From b3bccf5b45b8f57f690a5f1eba45ce8702b0d1b8 Mon Sep 17 00:00:00 2001 From: Justin Edmund Date: Mon, 29 Sep 2025 23:37:50 -0700 Subject: [PATCH] update theme colors and styling tokens --- src/themes/_colors.scss | 74 +++++++++++++++++++++++++++++++++++++-- src/themes/themes.scss | 77 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 148 insertions(+), 3 deletions(-) diff --git a/src/themes/_colors.scss b/src/themes/_colors.scss index 89ffb233..7912b4d8 100644 --- a/src/themes/_colors.scss +++ b/src/themes/_colors.scss @@ -96,7 +96,7 @@ $wind-bg-20: #cdffed; $fire-text-00: #3f0202; $fire-text-10: #3e0000; -$fire-text-20: #6E0000; +$fire-text-20: #6e0000; $fire-text-30: #ec5c5c; $fire-bg-00: #e05555; $fire-bg-10: #fa6d6d; @@ -113,7 +113,7 @@ $water-bg-20: #cdedff; $earth-text-00: #321602; $earth-text-10: #662a00; $earth-text-15: #863504; -$earth-text-20: #8E3C0B; +$earth-text-20: #8e3c0b; $earth-text-30: #ec985c; $earth-bg-00: #df8849; $earth-bg-10: #fd9f5b; @@ -122,7 +122,7 @@ $earth-bg-20: #ffe2cd; $light-text-00: #3d3700; $light-text-10: #4b4300; $light-text-20: #715100; -$light-text-30: #C59C0C; +$light-text-30: #c59c0c; $light-bg-00: #cab91c; $light-bg-10: #e8d633; $light-bg-20: #fffacd; @@ -160,6 +160,10 @@ $unit--bg--dark: $grey-20; $unit--bg--light--hover: $grey-90; $unit--bg--dark--hover: $grey-30; +// Color Definitions: Sidebar +$sidebar--bg--light: $grey-100; +$sidebar--bg--dark: $grey-20; + // Color Definitions: Dialog $dialog--bg--light: $grey-100; $dialog--bg--dark: $grey-25; @@ -222,6 +226,28 @@ $button--text--dark: $grey-70; $button--text--dark--hover: $grey-100; $button--text--dark--disabled: $grey-50; +// Color Definitions: Button Secondary (for tier selector) +$button--secondary--bg--light: $grey-90; +$button--secondary--bg--light--hover: $grey-85; +$button--secondary--text--light: $grey-50; +$button--secondary--text--light--hover: $grey-40; + +$button--secondary--bg--dark: $grey-25; +$button--secondary--bg--dark--hover: $grey-30; +$button--secondary--text--dark: $grey-60; +$button--secondary--text--dark--hover: $grey-70; + +// Color Definitions: Button Primary (for selected tiers) +$button--primary--bg--light: $accent--blue--light; +$button--primary--bg--light--hover: $accent--blue--light--focus; +$button--primary--text--light: $grey-100; +$button--primary--border--light: $accent--blue--light; + +$button--primary--bg--dark: $accent--blue--dark; +$button--primary--bg--dark--hover: $accent--blue--dark--focus; +$button--primary--text--dark: $grey-10; +$button--primary--border--dark: $accent--blue--dark; + // Color Definitions: Input $input--bg--light: $grey-100; $input--bg--light--hover: $grey-95; @@ -395,6 +421,13 @@ $toggle--bg--dark: $grey-15; $toggle--stroke--light: rgba(0, 0, 0, 0.14); $toggle--stroke--dark: rgba(0, 0, 0, 0.8); +// Color Definitions: Borders +$border--subtle--light: $grey-85; +$border--subtle--dark: $grey-30; + +$border--medium--light: $grey-80; +$border--medium--dark: $grey-40; + // Color Definitions: Text $text--primary--color--light: $grey-40; $text--primary--color--dark: $grey-90; @@ -439,6 +472,41 @@ $tag--bg--dark: $grey-00; $tag--text--light: $grey-100; $tag--text--dark: $grey-50; +// Color Definitions: Segmented Control +// Variant 1: White background control with light gray segments (blended) +$segmented--control--blended--bg--light: $grey-100; +$segmented--control--blended--bg--dark: $grey-20; +$segmented--control--blended--segment--bg--light: $grey-90; +$segmented--control--blended--segment--bg--hover--light: $grey-85; +$segmented--control--blended--segment--bg--checked--light: $grey-85; +$segmented--control--blended--segment--text--light: $grey-60; +$segmented--control--blended--segment--text--hover--light: $grey-50; +$segmented--control--blended--segment--text--checked--light: $grey-40; + +$segmented--control--blended--segment--bg--dark: $grey-30; +$segmented--control--blended--segment--bg--hover--dark: $grey-40; +$segmented--control--blended--segment--bg--checked--dark: $grey-40; +$segmented--control--blended--segment--text--dark: $grey-60; +$segmented--control--blended--segment--text--hover--dark: $grey-70; +$segmented--control--blended--segment--text--checked--dark: $grey-90; + +// Variant 2: Light background control with white segments (background) +$segmented--control--background--bg--light: $grey-90; +$segmented--control--background--bg--dark: $grey-15; +$segmented--control--background--segment--bg--light: transparent; +$segmented--control--background--segment--bg--hover--light: $grey-85; +$segmented--control--background--segment--bg--checked--light: $grey-100; +$segmented--control--background--segment--text--light: $grey-60; +$segmented--control--background--segment--text--hover--light: $grey-50; +$segmented--control--background--segment--text--checked--light: $grey-40; + +$segmented--control--background--segment--bg--dark: transparent; +$segmented--control--background--segment--bg--hover--dark: $grey-20; +$segmented--control--background--segment--bg--checked--dark: $grey-30; +$segmented--control--background--segment--text--dark: $grey-60; +$segmented--control--background--segment--text--hover--dark: $grey-70; +$segmented--control--background--segment--text--checked--dark: $grey-90; + // Color Definitions: Element / Wind $wind--bg--light: $wind-bg-10; $wind--bg--dark: $wind-bg-10; diff --git a/src/themes/themes.scss b/src/themes/themes.scss index 9e6c1265..b98c9df1 100644 --- a/src/themes/themes.scss +++ b/src/themes/themes.scss @@ -31,6 +31,8 @@ --background: #{colors.$page--bg--light}; --background-rgb: 245, 245, 245; // RGB values for grey-90 + + --page-bg: #{colors.$page--bg--light}; --page-hover: #{colors.$page--hover--light}; --grid-rep-hover: #{colors.$grid--rep--hover--light}; @@ -69,6 +71,9 @@ --unit-bg: #{colors.$unit--bg--light}; --unit-bg-hover: #{colors.$unit--bg--light--hover}; + // Light - Sidebar + --sidebar-bg: #{colors.$sidebar--bg--light}; + // Light - Dialogs --dialog-bg: #{colors.$dialog--bg--light}; @@ -128,6 +133,17 @@ --button-text-hover: #{colors.$button--text--light--hover}; --button-text-disabled: #{colors.$button--text--light--disabled}; + // Light - Button variants + --button-secondary-bg: #{colors.$button--secondary--bg--light}; + --button-secondary-bg-hover: #{colors.$button--secondary--bg--light--hover}; + --button-secondary-text: #{colors.$button--secondary--text--light}; + --button-secondary-text-hover: #{colors.$button--secondary--text--light--hover}; + + --button-primary-bg: #{colors.$button--primary--bg--light}; + --button-primary-bg-hover: #{colors.$button--primary--bg--light--hover}; + --button-primary-text: #{colors.$button--primary--text--light}; + --button-primary-border: #{colors.$button--primary--border--light}; + // Light - Inputs --input-bg: #{colors.$input--bg--light}; --input-bg-hover: #{colors.$input--bg--light--hover}; @@ -160,6 +176,10 @@ --link-item-image-color: #{colors.$link--item--bg--image--light}; --link-item-image-color-hover: #{colors.$link--item--bg--image--light--hover}; + // Light - Borders + --border-subtle: #{colors.$border--subtle--light}; + --border-medium: #{colors.$border--medium--light}; + // Light - Text --text-primary: #{colors.$text--primary--color--light}; --text-secondary: #{colors.$text--secondary--color--light}; @@ -175,6 +195,25 @@ --tag-bg: #{colors.$tag--bg--light}; --tag-text: #{colors.$tag--text--light}; + // Light - Segmented Controls + // Variant 1: Blended (white bg with gray segments) + --segmented-control-blended-bg: #{colors.$segmented--control--blended--bg--light}; + --segmented-control-blended-segment-bg: #{colors.$segmented--control--blended--segment--bg--light}; + --segmented-control-blended-segment-bg-hover: #{colors.$segmented--control--blended--segment--bg--hover--light}; + --segmented-control-blended-segment-bg-checked: #{colors.$segmented--control--blended--segment--bg--checked--light}; + --segmented-control-blended-segment-text: #{colors.$segmented--control--blended--segment--text--light}; + --segmented-control-blended-segment-text-hover: #{colors.$segmented--control--blended--segment--text--hover--light}; + --segmented-control-blended-segment-text-checked: #{colors.$segmented--control--blended--segment--text--checked--light}; + + // Variant 2: Background (light bg with white segments) + --segmented-control-background-bg: #{colors.$segmented--control--background--bg--light}; + --segmented-control-background-segment-bg: #{colors.$segmented--control--background--segment--bg--light}; + --segmented-control-background-segment-bg-hover: #{colors.$segmented--control--background--segment--bg--hover--light}; + --segmented-control-background-segment-bg-checked: #{colors.$segmented--control--background--segment--bg--checked--light}; + --segmented-control-background-segment-text: #{colors.$segmented--control--background--segment--text--light}; + --segmented-control-background-segment-text-hover: #{colors.$segmented--control--background--segment--text--hover--light}; + --segmented-control-background-segment-text-checked: #{colors.$segmented--control--background--segment--text--checked--light}; + // Light - Extra Weapons --extra-purple-bg: #{colors.$extra--purple--bg--light}; --extra-purple-card-bg: #{colors.$extra--purple--card--bg--light}; @@ -319,6 +358,7 @@ --background: #{colors.$page--bg--dark}; --background-rgb: 25, 25, 25; // RGB values for grey-15 --page-hover: #{colors.$page--hover--dark}; + --page-bg: #{colors.$page--bg--dark}; --grid-rep-hover: #{colors.$grid--rep--hover--dark}; @@ -356,6 +396,9 @@ --unit-bg: #{colors.$unit--bg--dark}; --unit-bg-hover: #{colors.$unit--bg--dark--hover}; + // Dark - Sidebar + --sidebar-bg: #{colors.$sidebar--bg--dark}; + // Dark - Dialogs --dialog-bg: #{colors.$dialog--bg--dark}; @@ -415,6 +458,17 @@ --button-text-hover: #{colors.$button--text--dark--hover}; --button-text-disabled: #{colors.$button--text--dark--disabled}; + // Dark - Button variants + --button-secondary-bg: #{colors.$button--secondary--bg--dark}; + --button-secondary-bg-hover: #{colors.$button--secondary--bg--dark--hover}; + --button-secondary-text: #{colors.$button--secondary--text--dark}; + --button-secondary-text-hover: #{colors.$button--secondary--text--dark--hover}; + + --button-primary-bg: #{colors.$button--primary--bg--dark}; + --button-primary-bg-hover: #{colors.$button--primary--bg--dark--hover}; + --button-primary-text: #{colors.$button--primary--text--dark}; + --button-primary-border: #{colors.$button--primary--border--dark}; + // Dark - Inputs --input-bg: #{colors.$input--bg--dark}; --input-bg-hover: #{colors.$input--bg--dark--hover}; @@ -447,6 +501,10 @@ --link-item-image-color: #{colors.$link--item--bg--image--dark}; --link-item-image-color-hover: #{colors.$link--item--bg--image--dark--hover}; + // Dark - Borders + --border-subtle: #{colors.$border--subtle--dark}; + --border-medium: #{colors.$border--medium--dark}; + // Dark - Text --text-primary: #{colors.$text--primary--color--dark}; --text-secondary: #{colors.$text--secondary--color--dark}; @@ -462,6 +520,25 @@ --tag-bg: #{colors.$tag--bg--dark}; --tag-text: #{colors.$tag--text--dark}; + // Dark - Segmented Controls + // Variant 1: Blended (dark bg with lighter segments) + --segmented-control-blended-bg: #{colors.$segmented--control--blended--bg--dark}; + --segmented-control-blended-segment-bg: #{colors.$segmented--control--blended--segment--bg--dark}; + --segmented-control-blended-segment-bg-hover: #{colors.$segmented--control--blended--segment--bg--hover--dark}; + --segmented-control-blended-segment-bg-checked: #{colors.$segmented--control--blended--segment--bg--checked--dark}; + --segmented-control-blended-segment-text: #{colors.$segmented--control--blended--segment--text--dark}; + --segmented-control-blended-segment-text-hover: #{colors.$segmented--control--blended--segment--text--hover--dark}; + --segmented-control-blended-segment-text-checked: #{colors.$segmented--control--blended--segment--text--checked--dark}; + + // Variant 2: Background (dark bg with lighter segments) + --segmented-control-background-bg: #{colors.$segmented--control--background--bg--dark}; + --segmented-control-background-segment-bg: #{colors.$segmented--control--background--segment--bg--dark}; + --segmented-control-background-segment-bg-hover: #{colors.$segmented--control--background--segment--bg--hover--dark}; + --segmented-control-background-segment-bg-checked: #{colors.$segmented--control--background--segment--bg--checked--dark}; + --segmented-control-background-segment-text: #{colors.$segmented--control--background--segment--text--dark}; + --segmented-control-background-segment-text-hover: #{colors.$segmented--control--background--segment--text--hover--dark}; + --segmented-control-background-segment-text-checked: #{colors.$segmented--control--background--segment--text--checked--dark}; + // Dark - Extra Weapons --extra-purple-bg: #{colors.$extra--purple--bg--dark}; --extra-purple-card-bg: #{colors.$extra--purple--card--bg--dark};