Add styling for calendars

This commit is contained in:
Sasha Koshka 2024-06-19 00:31:50 -04:00
parent 45b2bee72d
commit 8e2fb26ab5
2 changed files with 139 additions and 26 deletions

View File

@ -39,6 +39,9 @@ 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),
@ -335,4 +338,55 @@ var rules = []style.Rule {
},
),
},
// *.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 },
),
},
}

View File

@ -10,12 +10,16 @@ var colorInput = color.RGBA { R: 208, G: 203, B: 150, A: 255 }
var colorCarved = color.RGBA { R: 151, G: 160, B: 150, A: 255 }
var colorGutter = color.RGBA { R: 116, G: 132, B: 126, A: 255 }
var colorShadow = color.RGBA { R: 57, G: 59, B: 57, A: 255 }
var colorShade = color.RGBA { A: 128 }
var colorInputShadow = color.RGBA { R: 143, G: 146, B: 91, A: 255 }
var colorHighlight = color.RGBA { R: 207, G: 215, B: 210, A: 255 }
var colorBackground = color.RGBA { R: 169, G: 171, B: 168, A: 255 }
var colorCarvedPressed = color.RGBA { R: 129, G: 142, B: 137, A: 255 }
var colorForeground = color.Black
var colorOutline = color.Black
var colorCalendarWeekdayHeader = color.RGBA { R: 194, G: 162, B: 132, A: 255 }
var colorCalendarWeekend = color.RGBA { R: 165, G: 185, B: 120, A: 255 }
var colorCalendarDay = color.RGBA { R: 194, G: 189, B: 132, A: 255 }
var outline = tomo.Border {
Width: tomo.I(1),
@ -31,6 +35,7 @@ var borderColorEngraved = [4]color.Color { colorShadow, colorHighlight, col
var borderColorLifted = [4]color.Color { colorHighlight, colorShadow, colorShadow, colorHighlight }
var borderColorInput = [4]color.Color { colorInputShadow, colorInput, colorInput, colorInputShadow }
var borderColorFocused = [4]color.Color { colorFocus, colorFocus, colorFocus, colorFocus }
var borderColorShade = [4]color.Color { colorShade, colorShade, colorShade, colorShade }
var rules = []style.Rule {
// *.*[*]
@ -342,4 +347,58 @@ var rules = []style.Rule {
},
),
},
// *.Calendar[*]
style.Rule {
Role: tomo.R("", "Calendar", ""),
Default: style.AS (
style.AttrBorder {
tomo.Border {
Width: tomo.I(0, 1, 1, 0),
Color: borderColorShade,
},
outline,
},
style.AttrColor { Color: colorInput },
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 },
),
},
}