From 8e2fb26ab55e586cf3eb37e3b5833e72f079a550 Mon Sep 17 00:00:00 2001 From: "sashakoshka@tebibyte.media" Date: Wed, 19 Jun 2024 00:31:50 -0400 Subject: [PATCH] Add styling for calendars --- internal/style/aluminum/style.go | 84 ++++++++++++++++++++++++++------ internal/style/fallback/style.go | 81 +++++++++++++++++++++++++----- 2 files changed, 139 insertions(+), 26 deletions(-) diff --git a/internal/style/aluminum/style.go b/internal/style/aluminum/style.go index 17d7569..3130fba 100644 --- a/internal/style/aluminum/style.go +++ b/internal/style/aluminum/style.go @@ -23,22 +23,25 @@ func border (top, right, bottom, left uint32, width ...int) tomo.Border { } } -var colorDot = hex(0x7391c080) -var colorFocus = hex(0x5f8bc4FF) -var colorHighlight = hex(0x5f8bc4FF) -var colorBackground = hex(0xd4d4d4FF) -var colorForeground = color.Black +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 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), @@ -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 }, + ), + }, } diff --git a/internal/style/fallback/style.go b/internal/style/fallback/style.go index 4537fbe..aee0c1a 100644 --- a/internal/style/fallback/style.go +++ b/internal/style/fallback/style.go @@ -5,17 +5,21 @@ import "git.tebibyte.media/tomo/tomo" import "golang.org/x/image/font/basicfont" import "git.tebibyte.media/tomo/nasin/internal/style" -var colorFocus = color.RGBA { R: 61, G: 128, B: 143, A: 255 } -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 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 colorFocus = color.RGBA { R: 61, G: 128, B: 143, A: 255 } +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 }, + ), + }, }