hensei-web/styles/themes.scss

:root {
  --background: #{$page--bg--light};
  --page-hover: #{$page--hover--light};

  --grid-rep-hover: #{$grid--rep--hover--light};

  --card-bg: #{$grey-100};
  --bar-bg: #{$grey-100};

  --link-text-hover: #{$text--link--hover--light};

  --charge-attack-bg: #{$charge--attack--bg};
  --charge-attack-text: #{$charge--attack--text};
  --full-auto-bg: #{$full--auto--bg};
  --full-auto-text: #{$charge--attack--text};
  --auto-guard-bg: #{$auto--guard--bg};
  --auto-guard-text: #{$auto--guard--text};

  --full-auto-label-text: #{$text--full--auto--light};

  --separator-bg: #{$separator--bg--light};

  --accent-blue: #{$accent--blue--light};
  --accent-blue-focus: #{$accent--blue--light--focus};

  --accent-yellow: #{$accent--yellow--light};

  --selected-item-bg: #{$selected--item--bg--light};
  --selected-item-bg-hover: #{$selected--item--bg--light--hover};
  --anonymous-bg: #{$anonymous--bg--light};
  --placeholder-bg: #{$grey-80};

  // Light - Menus
  --dialog-bg: #{$dialog--bg--light};

  // 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-contained-bg: #{$button--contained--bg--light};
  --button-contained-bg-hover: #{$button--contained--bg--light--hover};

  --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-contained-bg: #{$select--contained--bg--light};
  --select-contained-bg-hover: #{$select--contained--bg--light--hover};
  --select-modal-bg: #{$select--modal--bg--light};
  --select-modal-bg-hover: #{$select--modal--bg--light--hover};
  --select-separator: #{$select--separator--light};
  --option-bg-hover: #{$option--bg--light--hover};

  // Light - Sliders
  --slider-thumb-bg: #{$slider--thumb--bg--light};
  --slider-thumb-bg-hover: #{$slider--thumb--bg--light--hover};
  --slider-thumb-shadow: #{$slider--thumb--shadow--light};
  --slider-thumb-shadow-hover: #{$slider--thumb--shadow--light--hover};

  // Light - About
  --link-item-bg: #{$link--item--bg--light};
  --link-item-image-color: #{$link--item--bg--image--light};
  --link-item-image-color-hover: #{$link--item--bg--image--light--hover};

  // Light - Text
  --text-primary: #{$text--primary--color--light};
  --text-secondary: #{$text--secondary--color--light};

  --text-tertiary: #{$text--tertiary--color--light};
  --text-tertiary-hover: #{$text--tertiary--hover--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};

  // 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};

  --switch-nub: #{$switch--nub--bg--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};
  --subaura-orange-secondary: #{$subaura--orange--secondary--light};
  --subaura-orange-text: #{$subaura--orange--text--light};

  // Light - Element Toggle
  --toggle-bg: #{$toggle--bg--light};
  --toggle-stroke: #{$toggle--stroke--light};

  --grid-border-color: #{$grid--border--color--light};

  --wind-bg: #{$wind-bg-10};
  --wind-hover-bg: #{$wind-bg-20};
  --wind-text: #{$wind-text-10};
  --wind-hover-text: #{$wind-text-20};

  --fire-bg: #{$fire-bg-10};
  --fire-hover-bg: #{$fire-bg-20};
  --fire-text: #{$fire-text-10};
  --fire-hover-text: #{$fire-text-20};

  --water-bg: #{$water-bg-10};
  --water-hover-bg: #{$water-bg-20};
  --water-text: #{$water-text-10};
  --water-hover-text: #{$water-text-20};

  --earth-bg: #{$earth-bg-10};
  --earth-hover-bg: #{$earth-bg-20};
  --earth-text: #{$earth-text-10};
  --earth-hover-text: #{$earth-text-20};

  --dark-bg: #{$dark-bg-10};
  --dark-hover-bg: #{$dark-bg-20};
  --dark-text: #{$dark-text-10};
  --dark-hover-text: #{$dark-text-20};

  --light-bg: #{$light-bg-10};
  --light-hover-bg: #{$light-bg-20};
  --light-text: #{$light-text-10};
  --light-hover-text: #{$light-text-20};

  // Gradients
  --hero-gradient: #{$hero--gradient--light};
  --hero-gradient-overlay: #{$hero--gradient--light--overlay};
}

[data-theme='dark'] {
  --background: #{$page--bg--dark};
  --page-hover: #{$page--hover--dark};

  --grid-rep-hover: #{$grid--rep--hover--dark};

  --card-bg: #{$page--element--bg--dark};
  --bar-bg: #{$grey-10};

  --link-text-hover: #{$text--link--hover--dark};

  --charge-attack-bg: #{$charge--attack--bg};
  --charge-attack-text: #{$charge--attack--text};

  --full-auto-bg: #{$full--auto--bg};
  --full-auto-text: #{$charge--attack--text};

  --full-auto-label-text: #{$text--full--auto--dark};

  --separator-bg: #{$separator--bg--dark};

  --accent-blue: #{$accent--blue--dark};
  --accent-blue-focus: #{$accent--blue--dark--focus};

  --accent-yellow: #{$accent--yellow--dark};

  --selected-item-bg: #{$selected--item--bg--dark};
  --selected-item-bg-hover: #{$selected--item--bg--dark--hover};

  --anonymous-bg: #{$anonymous--bg--dark};
  --placeholder-bg: #{$grey-40};

  // Dark - Dialogs
  --dialog-bg: #{$dialog--bg--dark};

  // 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-contained-bg-hover: #{$button--contained--bg--dark--hover};
  --button-bg-disabled: #{$button--bg--dark--disabled};
  --button-contained-bg: #{$button--contained--bg--dark};

  --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-contained-bg: #{$select--contained--bg--dark};
  --select-contained-bg-hover: #{$select--contained--bg--dark--hover};
  --select-modal-bg: #{$select--modal--bg--dark};
  --select-modal-bg-hover: #{$select--modal--bg--dark--hover};
  --select-separator: #{$select--separator--dark};
  --option-bg-hover: #{$option--bg--dark--hover};

  // Dark - Sliders
  --slider-thumb-bg: #{$slider--thumb--bg--dark};
  --slider-thumb-bg-hover: #{$slider--thumb--bg--dark--hover};
  --slider-thumb-shadow: #{$slider--thumb--shadow--dark};
  --slider-thumb-shadow-hover: #{$slider--thumb--shadow--dark--hover};

  // Dark - About
  --link-item-bg: #{$link--item--bg--dark};
  --link-item-image-color: #{$link--item--bg--image--dark};
  --link-item-image-color-hover: #{$link--item--bg--image--dark--hover};

  // Dark - Text
  --text-primary: #{$text--primary--color--dark};
  --text-secondary: #{$text--secondary--color--dark};

  --text-tertiary: #{$text--tertiary--color--dark};
  --text-tertiary-hover: #{$text--tertiary--hover--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};

  // 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};

  --switch-nub: #{$switch--nub--bg--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};
  --subaura-orange-secondary: #{$subaura--orange--secondary--dark};
  --subaura-orange-text: #{$subaura--orange--text--dark};

  // Dark - Element Toggle
  --toggle-bg: #{$toggle--bg--dark};
  --toggle-stroke: #{$toggle--stroke--dark};

  --grid-border-color: #{$grid--border--color--dark};

  // Element theming
  --wind-bg: #{$wind-bg-10};
  --wind-hover-bg: #{$wind-bg-00};
  --wind-text: #{$wind-text-10};
  --wind-hover-text: #{$wind-text-00};

  --fire-bg: #{$fire-bg-10};
  --fire-hover-bg: #{$fire-bg-00};
  --fire-text: #{$fire-text-10};
  --fire-hover-text: #{$fire-text-00};

  --water-bg: #{$water-bg-10};
  --water-hover-bg: #{$water-bg-00};
  --water-text: #{$water-text-10};
  --water-hover-text: #{$water-text-00};

  --earth-bg: #{$earth-bg-10};
  --earth-hover-bg: #{$earth-bg-00};
  --earth-text: #{$earth-text-10};
  --earth-hover-text: #{$earth-text-00};

  --dark-bg: #{$dark-bg-10};
  --dark-hover-bg: #{$dark-bg-00};
  --dark-text: #{$dark-text-10};
  --dark-hover-text: #{$dark-text-00};

  --light-bg: #{$light-bg-10};
  --light-hover-bg: #{$light-bg-00};
  --light-text: #{$light-text-10};
  --light-hover-text: #{$light-text-00};

  // Gradients
  --hero-gradient: #{$hero--gradient--dark};
  --hero-gradient-overlay: #{$hero--gradient--dark--overlay};
}