Renamed style directory to styles

This commit is contained in:
2024-08-12 17:12:43 -04:00
parent ecfb90957a
commit 4b53a5a019
17 changed files with 2 additions and 2 deletions

View File

@@ -0,0 +1,214 @@
// Colors
$ColorDot = #7391c0;
$ColorAccent = #5f8bc4;
$ColorHighlight = #5f8bc4;
$ColorBackground = #d4d4d4;
$ColorForeground = #000;
$ColorOutline = $ColorForeground;
$ColorGutter = #bfc6d1;
$ColorGutterHovered = #c5cbd6;
$ColorRaised = #e9eaea;
$ColorRaisedPressed = #ccd4dd;
$ColorRaisedFocused = #cfd6dd;
$ColorRaisedHovered = #f1f3f5;
$ColorSunken = #e9eaea;
$ColorSunkenFocused = #e0e6ee;
$ColorSunkenPressed = #e0e6ee;
$ColorCalendarWeekdayHeader = #d3cac2;
$ColorCalendarWeekend = #c2d3c4;
$ColorCalendarDay = #d6dae2;
// Borders
$BorderOutline = $ColorOutline / 1;
$BorderEngraved = #c3c3c5 #e3e3e3 #e9e9e9 #c2c2c2 / 1;
$BorderGap = #697c7c #566767 #566767 #697c7c / 1;
$BorderLifted = #f9fafc #c2c8d3 #a4afc0 #f5f6f8 / 1;
$BorderLiftedFocused = #f0f4f9 #b1baca #9aa6b7 #e4e9ee / 1;
$BorderFocused = #5f8bc4 #5f8bc4 #5f8bc4 #5f8bc4 / 1;
$BorderTear = $BorderEngraved;
$BorderTearFocused = #7f94b5 #ced7e4 #ced7e4 #7f94b5 / 1;
$BorderTearPad = #0000 / 3;
$BorderTearPadFocused = #7391c080 / 3;
$BorderInnerShadow = #a4afc0 / 1 0 0 1;
$BorderOuterShadow = #a4afc0 / 0 1 1 0;
*.* {
TextColor: $ColorForeground;
DotColor: $ColorDot;
Gap: 8;
}
*.Button {
Border: $BorderEngraved, $BorderGap, $BorderLifted;
Padding: 4 8;
Color: $ColorRaised;
}
*.Button[focused] {
Border: $BorderEngraved, $BorderGap, $BorderLiftedFocused;
Padding: 4 8;
Color: $ColorRaisedFocused;
}
*.Button[hovered] {
Color: $ColorRaisedHovered;
}
*.Button[pressed] {
Border: $BorderEngraved, $BorderGap, $BorderInnerShadow;
Padding: 5 8 4 9;
Color: $ColorRaisedPressed;
}
*.TextInput {
Border: $BorderEngraved, $BorderGap, $BorderInnerShadow;
Padding: 5 4 4 5;
Color: $ColorSunken;
}
*.TextInput[focused] {
Border: $BorderEngraved, $BorderFocused, $BorderInnerShadow;
}
*.TextView {
Border: $BorderEngraved, $BorderGap, $BorderInnerShadow;
Padding: 5 4 4 5;
Color: $ColorSunken;
}
*.NumberInput {
Gap: 0;
}
*.Container[sunken] {
Border: $BorderEngraved, $BorderGap, $BorderInnerShadow;
Padding: 5 4 4 5;
Color: $ColorSunken;
}
*.Container[outer] {
Color: $ColorBackground;
Padding: 8;
}
*.Container[menu] {
Border: $BorderGap, $BorderLifted;
Color: $ColorBackground;
Gap: 0;
}
*.Heading {
Align: middle middle;
}
*.Separator {
Border: $BorderEngraved;
}
*.Slider {
Border: $BorderEngraved, $BorderGap, $BorderInnerShadow;
Color: $ColorGutter;
}
*.Slider[focused] {
Border: $BorderEngraved, $BorderFocused, $BorderInnerShadow;
}
*.Slider[hovered] {
Color: $ColorGutterHovered;
}
*.Slider[horizontal] {
MinimumSize: 48 0;
}
*.Slider[vertical] {
MinimumSize: 0 48;
}
*.SliderHandle {
Border: $BorderOuterShadow, $BorderGap, $BorderLifted;
Color: $ColorRaised;
MinimumSize: 12;
}
*.ScrollContainer {
Gap: 0;
}
*.Checkbox {
Border: $BorderEngraved, $BorderGap, $BorderInnerShadow;
Color: $ColorSunken;
Padding: 0 1 1 0;
MinimumSize: 19;
}
*.Checkbox[focused] {
Border: $BorderEngraved, $BorderFocused, $BorderInnerShadow;
Color: $ColorSunkenFocused;
Padding: 0;
}
*.Checkbox[checked] {
// TODO
}
*.MenuItem {
Padding: 4;
Gap: 4;
Color: #0000;
}
*.MenuItem[hovered] {
Color: $ColorDot;
}
*.MenuItem[focused] {
Color: $ColorDot;
}
*.File {
Color: #0000;
}
*.File[focused] {
Color: $ColorDot;
}
*.TearLine {
Border: $BorderTearPad, $BorderTear;
}
*.TearLine[hovered] {
Border: $BorderTearPadFocused, $BorderTearFocused;
}
*.TearLine[focused] {
Border: $BorderTearPadFocused, $BorderTearFocused;
}
*.Calendar {
Border: $BorderOuterShadow, $BorderGap;
Color: $ColorRaised;
Padding: 2;
Gap: 2;
}
*.CalendarGrid {
Gap: 2 2;
}
*.CalendarWeekdayHeader {
Color: $ColorCalendarWeekdayHeader;
Padding: 2;
}
*.CalendarDay {
Color: $ColorCalendarDay;
Padding: 2;
MinimumSize: 32;
}
*.CalendarDay[weekend] {
Color: $ColorCalendarWeekend;
}

View File

@@ -0,0 +1,18 @@
package aluminumStyle
import "image/color"
import "git.tebibyte.media/tomo/tomo"
// New returns Aluminum, a futuristic, bluish-white style.
func New () *style.Style {
return &style.Style {
Colors: map[tomo.Color] color.Color {
tomo.ColorBackground: colorBackground,
tomo.ColorForeground: colorForeground,
tomo.ColorRaised: colorRaised,
tomo.ColorSunken: colorSunken,
tomo.ColorAccent: colorFocus,
},
Rules: rules,
}
}

View File

@@ -0,0 +1,391 @@
package aluminumStyle
import "image/color"
import "git.tebibyte.media/tomo/tomo"
import "golang.org/x/image/font/basicfont"
func hex (color uint32) (c color.RGBA) {
c.A = uint8(color)
c.B = uint8(color >> 8)
c.G = uint8(color >> 16)
c.R = uint8(color >> 24)
return
}
func border (top, right, bottom, left uint32, width ...int) tomo.Border {
return tomo.Border {
Width: tomo.I(width...),
Color: [4]color.Color {
hex(top), hex(right),
hex(bottom), hex(left),
},
}
}
var colorDot = hex(0x7391c080)
var colorFocus = hex(0x5f8bc4FF)
var colorHighlight = hex(0x5f8bc4FF)
var colorBackground = hex(0xd4d4d4FF)
var colorForeground = color.Black
var colorOutline = color.Black
var colorGutter = hex(0xbfc6d1FF)
var colorGutterHovered = hex(0xc5cbd6FF)
var colorRaised = hex(0xe9eaeaFF)
var colorRaisedPressed = hex(0xccd4ddFF)
var colorRaisedFocused = hex(0xcfd6ddFF)
var colorRaisedHovered = hex(0xf1f3f5FF)
var colorSunken = hex(0xe9eaeaFF)
var colorSunkenFocused = hex(0xe0e6eeFF)
var colorSunkenPressed = hex(0xe0e6eeFF)
var colorCalendarWeekdayHeader = hex(0xd3cac2FF)
var colorCalendarWeekend = hex(0xc2d3c4FF)
var colorCalendarDay = hex(0xd6dae2FF)
var outline = tomo.Border {
Width: tomo.I(1),
Color: [4]color.Color {
colorOutline,
colorOutline,
colorOutline,
colorOutline,
},
}
var borderEngraved = border(0xc3c3c5FF, 0xe3e3e3FF, 0xe9e9e9ff, 0xc2c2c2ff, 1)
var borderGap = border(0x697c7cFF, 0x566767FF, 0x566767ff, 0x697c7cff, 1)
var borderLifted = border(0xf9fafcFF, 0xc2c8d3FF, 0xa4afc0ff, 0xf5f6f8ff, 1)
var borderLiftedFocused = border(0xf0f4f9FF, 0xb1bacaFF, 0x9aa6b7ff, 0xe4e9eeff, 1)
var borderFocused = border(0x5f8bc4FF, 0x5f8bc4FF, 0x5f8bc4ff, 0x5f8bc4ff, 1)
var borderTear = borderEngraved
var borderTearFocused = border(0x7f94b5FF, 0xced7e4FF, 0xced7e4FF, 0x7f94b5FF, 1)
var borderTearPad = border(0x00000000, 0x00000000, 0x00000000, 0x00000000, 3)
var borderTearPadFocused = border(0x7391c080, 0x7391c080, 0x7391c080, 0x7391c080, 3)
var borderInnerShadow = border(0xa4afc0FF, 0xa4afc0FF, 0xa4afc0ff, 0xa4afc0ff, 1, 0, 0, 1)
var borderOuterShadow = border(0xa4afc0FF, 0xa4afc0FF, 0xa4afc0ff, 0xa4afc0ff, 0, 1, 1, 0)
var rules = []style.Rule {
// *.*[*]
style.Rule {
Default: style.AS (
style.AttrFace { Face: basicfont.Face7x13 },
style.AttrTextColor { Color: tomo.ColorForeground },
style.AttrDotColor { Color: colorDot },
style.AttrGap { X: 8, Y: 8 },
),
},
// *.Button[*]
style.Rule {
Role: tomo.R("", "Button", ""),
Default: style.AS (
style.AttrBorder {
borderEngraved,
borderGap,
borderLifted,
},
style.AttrPadding(tomo.I(4, 8)),
style.AttrColor { Color: tomo.ColorRaised },
),
Pressed: style.AS (
style.AttrBorder {
borderEngraved,
borderGap,
borderInnerShadow,
},
style.AttrPadding(tomo.I(5, 8, 4, 9)),
style.AttrColor { Color: colorRaisedPressed },
),
Focused: style.AS (
style.AttrBorder {
borderEngraved,
borderGap,
borderLiftedFocused,
},
style.AttrPadding(tomo.I(4, 8)),
style.AttrColor { Color: colorRaisedFocused },
),
Hovered: style.AS (
style.AttrColor { Color: colorRaisedHovered },
),
},
// *.TextInput[*]
style.Rule {
Role: tomo.R("", "TextInput", ""),
Default: style.AS (
style.AttrBorder {
borderEngraved,
borderGap,
borderInnerShadow,
},
style.AttrColor { Color: tomo.ColorSunken },
style.AttrPadding(tomo.I(5, 4, 4, 5)),
),
Focused: style.AS (
style.AttrBorder {
borderEngraved,
borderFocused,
borderInnerShadow,
},
),
},
// *.TextView[*]
style.Rule {
Role: tomo.R("", "TextView", ""),
Default: style.AS (
style.AttrBorder {
borderEngraved,
borderGap,
borderInnerShadow,
},
style.AttrColor { Color: tomo.ColorSunken },
style.AttrPadding(tomo.I(8)),
),
},
// *.NumberInput[*]
style.Rule {
Role: tomo.R("", "NumberInput", ""),
Default: style.AS (
style.AttrGap { },
),
},
// *.Container[sunken]
style.Rule {
Role: tomo.R("", "Container", "sunken"),
Default: style.AS (
style.AttrBorder {
borderEngraved,
borderGap,
borderInnerShadow,
},
style.AttrColor { Color: tomo.ColorSunken },
style.AttrPadding(tomo.I(8)),
),
},
// *.Container[outer]
style.Rule {
Role: tomo.R("", "Container", "outer"),
Default: style.AS (
style.AttrColor { Color: tomo.ColorBackground },
style.AttrPadding(tomo.I(8)),
),
},
// *.Container[menu]
style.Rule {
Role: tomo.R("", "Container", "menu"),
Default: style.AS (
style.AttrBorder {
borderGap,
borderLifted,
},
style.AttrColor { Color: tomo.ColorBackground },
style.AttrGap { },
),
},
// *.Heading[*]
style.Rule {
Role: tomo.R("", "Heading", ""),
Default: style.AS (
style.AttrAlign { X: tomo.AlignMiddle, Y: tomo.AlignMiddle },
),
},
// *.Separator[*]
style.Rule {
Role: tomo.R("", "Separator", ""),
Default: style.AS (
style.AttrBorder {
borderEngraved,
},
),
},
// *.Slider[*]
style.Rule {
Role: tomo.R("", "Slider", ""),
Default: style.AS (
style.AttrBorder {
borderEngraved,
borderGap,
borderInnerShadow,
},
style.AttrColor { Color: colorGutter },
),
Focused: style.AS (
style.AttrBorder {
borderEngraved,
borderFocused,
borderInnerShadow,
},
),
Hovered: style.AS (
style.AttrColor { Color: colorGutterHovered },
),
},
// *.Slider[horizontal]
style.Rule {
Role: tomo.R("", "Slider", "horizontal"),
Default: style.AS(style.AttrMinimumSize { X: 48 }),
},
// *.Slider[vertical]
style.Rule {
Role: tomo.R("", "Slider", "vertical"),
Default: style.AS(style.AttrMinimumSize { Y: 48 }),
},
// *.SliderHandle[*]
style.Rule {
Role: tomo.R("", "SliderHandle", ""),
Default: style.AS (
style.AttrBorder {
borderOuterShadow,
borderGap,
borderLifted,
},
style.AttrColor { Color: tomo.ColorRaised },
style.AttrMinimumSize { X: 12, Y: 12, },
),
},
// *.Checkbox[*]
style.Rule {
Role: tomo.R("", "Checkbox", ""),
Default: style.AS (
style.AttrBorder {
borderEngraved,
borderGap,
borderInnerShadow,
},
style.AttrColor { Color: tomo.ColorSunken },
style.AttrPadding(tomo.I(0, 1, 1, 0)),
style.AttrMinimumSize { X: 19, Y: 19 },
),
Focused: style.AS (
style.AttrBorder {
borderEngraved,
borderFocused,
borderInnerShadow,
},
style.AttrPadding(tomo.I(0)),
style.AttrColor { Color: colorSunkenFocused },
),
},
// *.LabelCheckbox[*]
style.Rule {
Role: tomo.R("", "LabelCheckbox", ""),
Default: style.AS (
style.AttrGap { X: 8, Y: 8 },
),
},
// *.MenuItem[*]
style.Rule {
Role: tomo.R("", "MenuItem", ""),
Default: style.AS (
style.AttrPadding(tomo.I(4)),
style.AttrGap { X: 4, Y: 4 },
style.AttrColor { Color: color.Transparent },
),
Hovered: style.AS (
style.AttrColor { Color: colorDot },
),
Focused: style.AS (
style.AttrColor { Color: colorDot },
),
},
// *.File[*]
style.Rule {
Role: tomo.R("", "File", ""),
Default: style.AS (
style.AttrColor { Color: color.Transparent },
),
Focused: style.AS (
style.AttrColor { Color: colorDot },
),
},
// *.TearLine[*]
style.Rule {
Role: tomo.R("", "TearLine", ""),
Default: style.AS (
style.AttrBorder {
borderTearPad,
borderTear,
},
),
Hovered: style.AS (
style.AttrBorder {
borderTearPadFocused,
borderTearFocused,
},
),
Focused: style.AS (
style.AttrBorder {
borderTearPadFocused,
borderTearFocused,
},
),
},
// *.Calendar[*]
style.Rule {
Role: tomo.R("", "Calendar", ""),
Default: style.AS (
style.AttrBorder {
borderOuterShadow,
borderGap,
},
style.AttrColor { Color: tomo.ColorRaised },
style.AttrPadding(tomo.I(2)),
style.AttrGap { X: 2, Y: 2 },
),
},
// *.CalendarGrid[*]
style.Rule {
Role: tomo.R("", "CalendarGrid", ""),
Default: style.AS (
style.AttrGap { X: 2, Y: 2 },
),
},
// *.CalendarWeekdayHeader[*]
style.Rule {
Role: tomo.R("", "CalendarWeekdayHeader", ""),
Default: style.AS (
style.AttrPadding(tomo.I(2)),
style.AttrColor { Color: colorCalendarWeekdayHeader },
),
},
// *.CalendarDay[weekday]
style.Rule {
Role: tomo.R("", "CalendarDay", "weekday"),
Default: style.AS (
style.AttrPadding(tomo.I(2)),
style.AttrMinimumSize { X: 32, Y: 32 },
style.AttrColor { Color: colorCalendarDay },
),
},
// *.CalendarDay[weekend]
style.Rule {
Role: tomo.R("", "CalendarDay", "weekend"),
Default: style.AS (
style.AttrPadding(tomo.I(2)),
style.AttrMinimumSize { X: 32, Y: 32 },
style.AttrColor { Color: colorCalendarWeekend },
),
},
}