diff --git a/styles/globals.scss b/styles/globals.scss index e30ce601..637a9411 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -355,7 +355,8 @@ img.profile { } i.tag { - background: $grey-90; + background: var(--tag-bg); + color: var(--tag-text); border-radius: calc($unit / 2); font-size: 10px; font-weight: $bold; diff --git a/styles/themes.scss b/styles/themes.scss index 5f3d2403..ec475a83 100644 --- a/styles/themes.scss +++ b/styles/themes.scss @@ -7,15 +7,34 @@ --card-bg: #{$grey-100}; --bar-bg: #{$grey-100}; + // Light - Menus + --menu-bg: #{$menu--bg--light}; + --menu-separator: #{$menu--separator--light}; + --menu-text: #{$menu--text--light}; + --menu-bg-item-hover: #{$menu--item--bg--light--hover}; + --menu-text-hover: #{$menu--text--light--hover}; + + // Light - Buttons + --button-bg: #{$button--bg--light}; + --button-bg-hover: #{$button--bg--light--hover}; + --button-bg-disabled: #{$button--bg--light--disabled}; + + --button-text: #{$button--text--light}; + --button-text-hover: #{$button--text--light--hover}; + --button-text-disabled: #{$button--text--light--disabled}; + + // Light - Inputs --input-bg: #{$input--bg--light}; --input-bg-hover: #{$input--bg--light--hover}; --input-bound-bg: #{$input--bound--bg--light}; --input-bound-bg-hover: #{$input--bound--bg--light--hover}; + // Light - Selects --select-bg: #{$select--bg--light}; --select-separator: #{$select--separator--light}; --option-bg-hover: #{$option--bg--light--hover}; + // Light - Text --text-primary: #{$text--primary--color--light}; --text-secondary: #{$text--secondary--color--light}; @@ -23,17 +42,24 @@ --text-tertiary: #{$text--tertiary--color--light}; + // Light - Icons --icon-secondary: #{$icon--secondary--color--light}; --icon-secondary-hover: #{$icon--secondary--hover--light}; + // Light - Tags + --tag-bg: #{$tag--bg--light}; + --tag-text: #{$tag--text--light}; + --switch-nub: #{$switch--nub--bg--light}; + // Light - Extra Weapons --extra-purple-bg: #{$extra--purple--bg--light}; --extra-purple-card-bg: #{$extra--purple--card--bg--light}; --extra-purple-primary: #{$extra--purple--primary--light}; --extra-purple-secondary: #{$extra--purple--secondary--light}; --extra-purple-text: #{$extra--purple--text--light}; + // Light - Subaura Summons --subaura-orange-bg: #{$subaura--orange--bg--light}; --subaura-orange-card-bg: #{$subaura--orange--card--bg--light}; --subaura-orange-primary: #{$subaura--orange--primary--light}; @@ -65,15 +91,34 @@ --card-bg: #{$page--element--bg--dark}; --bar-bg: #{$grey-10}; + // Dark - Menus + --menu-bg: #{$menu--bg--dark}; + --menu-text: #{$menu--text--dark}; + --menu-separator: #{$menu--separator--dark}; + --menu-bg-item-hover: #{$menu--item--bg--dark--hover}; + --menu-text-hover: #{$menu--text--dark--hover}; + + // Dark - Buttons + --button-bg: #{$button--bg--dark}; + --button-bg-hover: #{$button--bg--dark--hover}; + --button-bg-disabled: #{$button--bg--dark--disabled}; + + --button-text: #{$button--text--dark}; + --button-text-hover: #{$button--text--dark--hover}; + --button-text-disabled: #{$button--text--dark--disabled}; + + // Dark - Inputs --input-bg: #{$input--bg--dark}; --input-bg-hover: #{$input--bg--dark--hover}; --input-bound-bg: #{$input--bound--bg--dark}; --input-bound-bg-hover: #{$input--bound--bg--dark--hover}; + // Dark - Selects --select-bg: #{$select--bg--dark}; --select-separator: #{$select--separator--dark}; --option-bg-hover: #{$option--bg--dark--hover}; + // Dark - Text --text-primary: #{$text--primary--color--dark}; --text-secondary: #{$text--secondary--color--dark}; @@ -81,17 +126,24 @@ --text-tertiary: #{$text--tertiary--color--dark}; + // Dark - Icons --icon-secondary: #{$icon--secondary--color--dark}; --icon-secondary-hover: #{$icon--secondary--hover--dark}; + // Dark - Tags + --tag-bg: #{$tag--bg--dark}; + --tag-text: #{$tag--text--dark}; + --switch-nub: #{$switch--nub--bg--dark}; + // Dark - Extra Weapons --extra-purple-bg: #{$extra--purple--bg--dark}; --extra-purple-card-bg: #{$extra--purple--card--bg--dark}; --extra-purple-primary: #{$extra--purple--primary--dark}; --extra-purple-secondary: #{$extra--purple--secondary--dark}; --extra-purple-text: #{$extra--purple--text--dark}; + // Dark - Subaura Summons --subaura-orange-bg: #{$subaura--orange--bg--dark}; --subaura-orange-card-bg: #{$subaura--orange--card--bg--dark}; --subaura-orange-primary: #{$subaura--orange--primary--dark}; diff --git a/styles/variables.scss b/styles/variables.scss index 3faa5443..37bc7dd1 100644 --- a/styles/variables.scss +++ b/styles/variables.scss @@ -113,6 +113,33 @@ $page--hover--dark: $grey-30; $page--element--bg--light: $grey-70; $page--element--bg--dark: $grey-40; +// Color Definitions: Menu +$menu--bg--light: $grey-100; +$menu--bg--dark: $grey-05; +$menu--text--light: $grey-90; +$menu--text--dark: $grey-50; +$menu--separator--light: $grey-90; +$menu--separator--dark: $grey-05; +$menu--item--bg--light--hover: $grey-90; +$menu--item--bg--dark--hover: $grey-00; +$menu--text--light--hover: $grey-100; +$menu--text--dark--hover: $grey-15; + +// Color Definitions: Button +$button--bg--light: $grey-80; +$button--bg--light--hover: $grey-100; +$button--bg--light--disabled: $grey-50; +$button--bg--dark: $grey-00; +$button--bg--dark--hover: $grey-05; +$button--bg--dark--disabled: $grey-30; + +$button--text--light: $grey-55; +$button--text--light--hover: $grey-40; +$button--text--light--disabled: $grey-40; +$button--text--dark: $grey-70; +$button--text--dark--hover: $grey-100; +$button--text--dark--disabled: $grey-50; + // Color Definitions: Input $input--bg--light: $grey-100; $input--bg--light--hover: $grey-95; @@ -124,10 +151,11 @@ $input--bound--bg--light--hover: $grey-80; $input--bound--bg--dark: $grey-15; $input--bound--bg--dark--hover: $grey-25; +// Color Definitions: Select $select--bg--light: $grey-100; -$select--bg--dark: $grey-10; +$select--bg--dark: $grey-05; $select--separator--light: $grey-90; -$select--separator--dark: $grey-05; +$select--separator--dark: $grey-00; $option--bg--light--hover: $grey-90; $option--bg--dark--hover: $grey-00; @@ -182,6 +210,12 @@ $icon--secondary--hover--dark: $grey-70; $text--tertiary--color--light: $grey-60; $text--tertiary--color--dark: $grey-60; +// Color Definitions: Tag +$tag--bg--light: $grey-60; +$tag--bg--dark: $grey-00; +$tag--text--light: $grey-100; +$tag--text--dark: $grey-50; + // Font-weight $normal: 400; $medium: 500;