update theme colors and styling tokens
This commit is contained in:
parent
79c0de3128
commit
b3bccf5b45
2 changed files with 148 additions and 3 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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};
|
||||
|
|
|
|||
Loading…
Reference in a new issue