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};
  --placeholder-bg-accent: #{$grey-75};

  --transparent-stroke: #{$transparent--stroke--light};

  // Light - Units
  --unit-bg: #{$unit--bg--light};
  --unit-bg-hover: #{$unit--bg--light--hover};

  // Light - Dialogs
  --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 - Formatting menu
  --formatting-menu-bg: #{$formatting--menu--bg--light};
  --formatting-menu-item-bg: #{$formatting--menu--item--bg--light};
  --formatting-menu-item-bg-hover: #{$formatting--menu--item--bg--light--hover};
  --formatting-menu-item-bg-active: #{$formatting--menu--item--bg--dark--active};
  --formatting-menu-item-text: #{$formatting--menu--item--text--light};
  --formatting-menu-item-text-hover: #{$formatting--menu--item--text--light--hover};
  --formatting-menu-item-text-active: #{$formatting--menu--item--text--dark--active};

  // Light - Toolbar
  --toolbar-bg: #{$toolbar--bg--light};
  --toolbar-divider-bg: #{$toolbar--divider--bg--light};
  --toolbar-item-bg: #{$toolbar--item--bg--light};
  --toolbar-item-bg-hover: #{$toolbar--item--bg--light--hover};
  --toolbar-item-bg-active: #{$toolbar--item--bg--light--active};
  --toolbar-item-text: #{$toolbar--item--text--light};
  --toolbar-item-text-hover: #{$toolbar--item--text--light--hover};
  --toolbar-item-text-active: #{$toolbar--item--text--light--active};

  // Light - Highlights
  --highlight-bg: #{$highlight--bg--light};
  --highlight-bg-hover: #{$highlight--bg--light--hover};
  --highlight-text: #{$highlight--text--light};
  --highlight-text-hover: #{$highlight--text--light--hover};

  // Light - Placeholders
  --placeholder-bound-bg: #{$placeholder--bound--bg--light};
  --placeholder-bound-bg-hover: #{$placeholder--bound--bg--light--hover};

  // Light - Notices
  --notice-bg: #{$notice--bg--light};
  --notice-text: #{$notice--text--light};

  --notice-button-bg: #{$notice--button--bg--light};
  --notice-button-bg-hover: #{$notice--button--bg--light--hover};
  --notice-button-text: #{$notice--button--text--light};
  --notice-button-text-hover: #{$notice--button--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--trigger--bg--light};
  --select-contained-bg: #{$select--trigger--contained--bg--light};
  --select-contained-bg-hover: #{$select--trigger--contained--bg--light--hover};
  --select-separator: #{$select--separator--light};
  --select-content-contained-bg: #{$select--content--contained--bg--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 - Radio Buttons
  --radio-button-bg: #{$radio--bg--light};
  --radio-button-bg-hover: #{$radio--bg--light--hover};

  --radio-active-bg: #{$radio--active--bg--light};
  --radio-active-bg-hover: #{$radio--active--bg--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-light-text: #{$extra--purple--light--text--light};
  --extra-purple-text: #{$extra--purple--text--light};
  --extra-purple-dark-text: #{$extra--purple--dark--text--dark};

  --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 - Pills
  --pill-bg: #{$pill--bg--light};
  --pill-bg-hover: #{$pill--bg--light--hover};
  --pill-text: #{$pill--text--light};
  --pill-text-hover: #{$pill--text--light--hover};

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

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

  // Light - Element theming
  --null-bg: #{$null--bg--light};
  --null-bg-hover: #{$null--bg--hover--light};
  --null-text: #{$null--text--light};
  --null-raid-text: #{$null--text--raid--light};
  --null-text-hover: #{$null--text--hover--light};
  --null-shadow: #{$null--shadow--light};
  --null-shadow-hover: #{$null--shadow--light--hover};

  --wind-bg: #{$wind--bg--light};
  --wind-bg-hover: #{$wind--bg--hover--light};
  --wind-portrait-bg: #{$wind--portrait--bg--light};
  --wind-text: #{$wind--text--light};
  --wind-raid-text: #{$wind--text--raid--light};
  --wind-text-hover: #{$wind--text--hover--light};
  --wind-shadow: #{$wind--shadow--light};
  --wind-shadow-hover: #{$wind--shadow--light--hover};

  --fire-bg: #{$fire--bg--light};
  --fire-bg-hover: #{$fire--bg--hover--light};
  --fire-portrait-bg: #{$fire--portrait--bg--light};
  --fire-text: #{$fire--text--light};
  --fire-raid-text: #{$fire--text--raid--light};
  --fire-text-hover: #{$fire--text--hover--light};
  --fire-shadow: #{$fire--shadow--light};
  --fire-shadow-hover: #{$fire--shadow--light--hover};

  --water-bg: #{$water--bg--light};
  --water-bg-hover: #{$water--bg--hover--light};
  --water-portrait-bg: #{$water--portrait--bg--light};
  --water-text: #{$water--text--light};
  --water-raid-text: #{$water--text--raid--light};
  --water-text-hover: #{$water--text--hover--light};
  --water-shadow: #{$water--shadow--light};
  --water-shadow-hover: #{$water--shadow--light--hover};

  --earth-bg: #{$earth--bg--light};
  --earth-bg-hover: #{$earth--bg--hover--light};
  --earth-portrait-bg: #{$earth--portrait--bg--light};
  --earth-text: #{$earth--text--light};
  --earth-raid-text: #{$earth--text--raid--light};
  --earth-text-hover: #{$earth--text--hover--light};
  --earth-shadow: #{$earth--shadow--light};
  --earth-shadow-hover: #{$earth--shadow--light--hover};

  --dark-bg: #{$dark--bg--light};
  --dark-bg-hover: #{$dark--bg--hover--light};
  --dark-portrait-bg: #{$dark--portrait--bg--light};
  --dark-text: #{$dark--text--light};
  --dark-raid-text: #{$dark--text--raid--light};
  --dark-text-hover: #{$dark--text--hover--light};
  --dark-shadow: #{$dark--shadow--light};
  --dark-shadow-hover: #{$dark--shadow--light--hover};

  --light-bg: #{$light--bg--light};
  --light-bg-hover: #{$light--bg--hover--light};
  --light-portrait-bg: #{$light--portrait--bg--light};
  --light-text: #{$light--text--light};
  --light-raid-text: #{$light--text--raid--light};
  --light-text-hover: #{$light--text--hover--light};
  --light-shadow: #{$light--shadow--light};
  --light-shadow-hover: #{$light--shadow--light--hover};

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

  --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};
  --placeholder-bg-accent: #{$grey-45};

  --transparent-stroke: #{$transparent--stroke--dark};

  // Dark - Units
  --unit-bg: #{$unit--bg--dark};
  --unit-bg-hover: #{$unit--bg--dark--hover};

  // 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 - Formatting menu
  --formatting-menu-bg: #{$formatting--menu--bg--dark};
  --formatting-menu-item-bg: #{$formatting--menu--item--bg--dark};
  --formatting-menu-item-bg-hover: #{$formatting--menu--item--bg--dark--hover};
  --formatting-menu-item-bg-active: #{$formatting--menu--item--bg--dark--active};
  --formatting-menu-item-text: #{$formatting--menu--item--text--dark};
  --formatting-menu-item-text-hover: #{$formatting--menu--item--text--dark--hover};
  --formatting-menu-item-text-active: #{$formatting--menu--item--text--dark--active};

  // Dark - Toolbar
  --toolbar-bg: #{$toolbar--bg--dark};
  --toolbar-divider-bg: #{$toolbar--divider--bg--dark};
  --toolbar-item-bg: #{$toolbar--item--bg--dark};
  --toolbar-item-bg-hover: #{$toolbar--item--bg--dark--hover};
  --toolbar-item-bg-active: #{$toolbar--item--bg--dark--active};
  --toolbar-item-text: #{$toolbar--item--text--dark};
  --toolbar-item-text-hover: #{$toolbar--item--text--dark--hover};
  --toolbar-item-text-active: #{$toolbar--item--text--dark--active};

  // Dark - Highlights
  --highlight-bg: #{$highlight--bg--dark};
  --highlight-bg-hover: #{$highlight--bg--dark--hover};
  --highlight-text: #{$highlight--text--dark};
  --highlight-text-hover: #{$highlight--text--dark--hover};

  // Dark - Placeholders
  --placeholder-bound-bg: #{$placeholder--bound--bg--dark};
  --placeholder-bound-bg-hover: #{$placeholder--bound--bg--dark--hover};

  // Dark - Notices
  --notice-bg: #{$notice--bg--dark};
  --notice-text: #{$notice--text--dark};

  --notice-button-bg: #{$notice--button--bg--dark};
  --notice-button-bg-hover: #{$notice--button--bg--dark--hover};
  --notice-button-text: #{$notice--button--text--dark};
  --notice-button-text-hover: #{$notice--button--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--trigger--bg--dark};
  --select-contained-bg: #{$select--trigger--contained--bg--dark};
  --select-contained-bg-hover: #{$select--trigger--contained--bg--dark--hover};
  --select-separator: #{$select--separator--dark};
  --select-content-contained-bg: #{$select--content--contained--bg--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 - Radio Buttons
  --radio-button-bg: #{$radio--bg--dark};
  --radio-button-bg-hover: #{$radio--bg--dark--hover};

  --radio-active-bg: #{$radio--active--bg--dark};
  --radio-active-bg-hover: #{$radio--active--bg--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-light: #{$extra--purple--light--text--dark};
  --extra-purple-text: #{$extra--purple--text--dark};
  --extra-purple-text-dark: #{$extra--purple--dark--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 - Pills
  --pill-bg: #{$pill--bg--dark};
  --pill-bg-hover: #{$pill--bg--dark--hover};
  --pill-text: #{$pill--text--dark};
  --pill-text-hover: #{$pill--text--dark--hover};

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

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

  // Dark - Element theming
  --null-bg: #{$null--bg--dark};
  --null-bg-hover: #{$null--bg--hover--dark};
  --null-text: #{$null--text--dark};
  --null-raid-text: #{$null--text--raid--dark};
  --null-text-hover: #{$null--text--hover--dark};
  --null-shadow: #{$null--shadow--dark};
  --null-shadow-hover: #{$null--shadow--dark--hover};

  --wind-bg: #{$wind--bg--dark};
  --wind-bg-hover: #{$wind--bg--hover--dark};
  --wind-portrait-bg: #{$wind--portrait--bg--dark};
  --wind-text: #{$wind--text--dark};
  --wind-raid-text: #{$wind--text--raid--dark};
  --wind-text-hover: #{$wind--text--hover--dark};
  --wind-shadow: #{$wind--shadow--dark};
  --wind-shadow-hover: #{$wind--shadow--dark--hover};

  --fire-bg: #{$fire--bg--dark};
  --fire-bg-hover: #{$fire--bg--hover--dark};
  --fire-portrait-bg: #{$fire--portrait--bg--dark};
  --fire-text: #{$fire--text--dark};
  --fire-raid-text: #{$fire--text--raid--dark};
  --fire-text-hover: #{$fire--text--hover--dark};
  --fire-shadow: #{$fire--shadow--dark};
  --fire-shadow-hover: #{$fire--shadow--dark--hover};

  --water-bg: #{$water--bg--dark};
  --water-bg-hover: #{$water--bg--hover--dark};
  --water-portrait-bg: #{$water--portrait--bg--dark};
  --water-text: #{$water--text--dark};
  --water-raid-text: #{$water--text--raid--dark};
  --water-text-hover: #{$water--text--hover--dark};
  --water-shadow: #{$water--shadow--dark};
  --water-shadow-hover: #{$water--shadow--dark--hover};

  --earth-bg: #{$earth--bg--dark};
  --earth-bg-hover: #{$earth--bg--hover--dark};
  --earth-portrait-bg: #{$earth--portrait--bg--dark};
  --earth-text: #{$earth--text--dark};
  --earth-raid-text: #{$earth--text--raid--dark};
  --earth-text-hover: #{$earth--text--hover--dark};
  --earth-shadow: #{$earth--shadow--dark};
  --earth-shadow-hover: #{$earth--shadow--dark--hover};

  --dark-bg: #{$dark--bg--dark};
  --dark-bg-hover: #{$dark--bg--hover--dark};
  --dark-portrait-bg: #{$dark--portrait--bg--dark};
  --dark-text: #{$dark--text--dark};
  --dark-raid-text: #{$dark--text--raid--dark};
  --dark-text-hover: #{$dark--text--hover--dark};
  --dark-shadow: #{$dark--shadow--dark};
  --dark-shadow-hover: #{$dark--shadow--dark--hover};

  --light-bg: #{$light--bg--dark};
  --light-bg-hover: #{$light--bg--hover--dark};
  --light-portrait-bg: #{$light--portrait--bg--dark};
  --light-text: #{$light--text--dark};
  --light-raid-text: #{$light--text--raid--dark};
  --light-text-hover: #{$light--text--hover--dark};
  --light-shadow: #{$light--shadow--dark};
  --light-shadow-hover: #{$light--shadow--dark--hover};

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