530 lines
22 KiB
SCSS
530 lines
22 KiB
SCSS
@use 'colors';
|
|
@use 'typography';
|
|
@use 'spacing';
|
|
@use 'effects';
|
|
@use 'layout';
|
|
@use 'mixins';
|
|
|
|
:root {
|
|
--font-family: 'Goalking', system-ui, sans-serif;
|
|
|
|
// Spacing variables
|
|
--unit: #{spacing.$unit};
|
|
--unit-2x: #{spacing.$unit-2x};
|
|
--unit-3x: #{spacing.$unit-3x};
|
|
--unit-4x: #{spacing.$unit-4x};
|
|
--unit-5x: #{spacing.$unit-5x};
|
|
--unit-6x: #{spacing.$unit-6x};
|
|
--unit-8x: #{spacing.$unit-8x};
|
|
--unit-10x: #{spacing.$unit-10x};
|
|
--unit-12x: #{spacing.$unit-12x};
|
|
--unit-14x: #{spacing.$unit-14x};
|
|
--unit-20x: #{spacing.$unit-20x};
|
|
|
|
// Common spacing combinations
|
|
--spacing-xs: #{spacing.$unit};
|
|
--spacing-sm: #{spacing.$unit-2x};
|
|
--spacing-md: #{spacing.$unit-4x};
|
|
--spacing-lg: #{spacing.$unit-8x};
|
|
--spacing-xl: #{spacing.$unit-12x};
|
|
--spacing-2xl: #{spacing.$unit-14x};
|
|
|
|
--background: #{colors.$page--bg--light};
|
|
--page-hover: #{colors.$page--hover--light};
|
|
|
|
--grid-rep-hover: #{colors.$grid--rep--hover--light};
|
|
|
|
--card-bg: #{colors.$grey-100};
|
|
--bar-bg: #{colors.$grey-100};
|
|
|
|
--link-text-hover: #{colors.$text--link--hover--light};
|
|
|
|
--charge-attack-bg: #{colors.$charge--attack--bg};
|
|
--charge-attack-text: #{colors.$charge--attack--text};
|
|
--full-auto-bg: #{colors.$full--auto--bg};
|
|
--full-auto-text: #{colors.$charge--attack--text};
|
|
--auto-guard-bg: #{colors.$auto--guard--bg};
|
|
--auto-guard-text: #{colors.$auto--guard--text};
|
|
|
|
--full-auto-label-text: #{colors.$text--full--auto--light};
|
|
|
|
--separator-bg: #{colors.$separator--bg--light};
|
|
|
|
--accent-blue: #{colors.$accent--blue--light};
|
|
--accent-blue-focus: #{colors.$accent--blue--light--focus};
|
|
|
|
--accent-yellow: #{colors.$accent--yellow--light};
|
|
|
|
--selected-item-bg: #{colors.$selected--item--bg--light};
|
|
--selected-item-bg-hover: #{colors.$selected--item--bg--light--hover};
|
|
--anonymous-bg: #{colors.$anonymous--bg--light};
|
|
|
|
--placeholder-bg: #{colors.$grey-80};
|
|
--placeholder-bg-accent: #{colors.$grey-75};
|
|
|
|
--transparent-stroke: #{colors.$transparent--stroke--light};
|
|
|
|
// Light - Units
|
|
--unit-bg: #{colors.$unit--bg--light};
|
|
--unit-bg-hover: #{colors.$unit--bg--light--hover};
|
|
|
|
// Light - Dialogs
|
|
--dialog-bg: #{colors.$dialog--bg--light};
|
|
|
|
// Light - Menus
|
|
--menu-bg: #{colors.$menu--bg--light};
|
|
--menu-separator: #{colors.$menu--separator--light};
|
|
--menu-text: #{colors.$menu--text--light};
|
|
--menu-bg-item-hover: #{colors.$menu--item--bg--light--hover};
|
|
--menu-text-hover: #{colors.$menu--text--light--hover};
|
|
|
|
// Light - Formatting menu
|
|
--formatting-menu-bg: #{colors.$formatting--menu--bg--light};
|
|
--formatting-menu-item-bg: #{colors.$formatting--menu--item--bg--light};
|
|
--formatting-menu-item-bg-hover: #{colors.$formatting--menu--item--bg--light--hover};
|
|
--formatting-menu-item-bg-active: #{colors.$formatting--menu--item--bg--dark--active};
|
|
--formatting-menu-item-text: #{colors.$formatting--menu--item--text--light};
|
|
--formatting-menu-item-text-hover: #{colors.$formatting--menu--item--text--light--hover};
|
|
--formatting-menu-item-text-active: #{colors.$formatting--menu--item--text--dark--active};
|
|
|
|
// Light - Toolbar
|
|
--toolbar-bg: #{colors.$toolbar--bg--light};
|
|
--toolbar-divider-bg: #{colors.$toolbar--divider--bg--light};
|
|
--toolbar-item-bg: #{colors.$toolbar--item--bg--light};
|
|
--toolbar-item-bg-hover: #{colors.$toolbar--item--bg--light--hover};
|
|
--toolbar-item-bg-active: #{colors.$toolbar--item--bg--light--active};
|
|
--toolbar-item-text: #{colors.$toolbar--item--text--light};
|
|
--toolbar-item-text-hover: #{colors.$toolbar--item--text--light--hover};
|
|
--toolbar-item-text-active: #{colors.$toolbar--item--text--light--active};
|
|
|
|
// Light - Highlights
|
|
--highlight-bg: #{colors.$highlight--bg--light};
|
|
--highlight-bg-hover: #{colors.$highlight--bg--light--hover};
|
|
--highlight-text: #{colors.$highlight--text--light};
|
|
--highlight-text-hover: #{colors.$highlight--text--light--hover};
|
|
|
|
// Light - Placeholders
|
|
--placeholder-bound-bg: #{colors.$placeholder--bound--bg--light};
|
|
--placeholder-bound-bg-hover: #{colors.$placeholder--bound--bg--light--hover};
|
|
|
|
// Light - Notices
|
|
--notice-bg: #{colors.$notice--bg--light};
|
|
--notice-text: #{colors.$notice--text--light};
|
|
|
|
--notice-button-bg: #{colors.$notice--button--bg--light};
|
|
--notice-button-bg-hover: #{colors.$notice--button--bg--light--hover};
|
|
--notice-button-text: #{colors.$notice--button--text--light};
|
|
--notice-button-text-hover: #{colors.$notice--button--text--light--hover};
|
|
|
|
// Light - Buttons
|
|
--button-bg: #{colors.$button--bg--light};
|
|
--button-bg-hover: #{colors.$button--bg--light--hover};
|
|
--button-bg-disabled: #{colors.$button--bg--light--disabled};
|
|
--button-contained-bg: #{colors.$button--contained--bg--light};
|
|
--button-contained-bg-hover: #{colors.$button--contained--bg--light--hover};
|
|
|
|
--button-text: #{colors.$button--text--light};
|
|
--button-text-hover: #{colors.$button--text--light--hover};
|
|
--button-text-disabled: #{colors.$button--text--light--disabled};
|
|
|
|
// Light - Inputs
|
|
--input-bg: #{colors.$input--bg--light};
|
|
--input-bg-hover: #{colors.$input--bg--light--hover};
|
|
--input-bound-bg: #{colors.$input--bound--bg--light};
|
|
--input-bound-bg-hover: #{colors.$input--bound--bg--light--hover};
|
|
|
|
// Light - Selects
|
|
--select-bg: #{colors.$select--trigger--bg--light};
|
|
--select-contained-bg: #{colors.$select--trigger--contained--bg--light};
|
|
--select-contained-bg-hover: #{colors.$select--trigger--contained--bg--light--hover};
|
|
--select-separator: #{colors.$select--separator--light};
|
|
--select-content-contained-bg: #{colors.$select--content--contained--bg--light};
|
|
--option-bg-hover: #{colors.$option--bg--light--hover};
|
|
|
|
// Light - Sliders
|
|
--slider-thumb-bg: #{colors.$slider--thumb--bg--light};
|
|
--slider-thumb-bg-hover: #{colors.$slider--thumb--bg--light--hover};
|
|
--slider-thumb-shadow: #{colors.$slider--thumb--shadow--light};
|
|
--slider-thumb-shadow-hover: #{colors.$slider--thumb--shadow--light--hover};
|
|
|
|
// Light - Radio Buttons
|
|
--radio-button-bg: #{colors.$radio--bg--light};
|
|
--radio-button-bg-hover: #{colors.$radio--bg--light--hover};
|
|
|
|
--radio-active-bg: #{colors.$radio--active--bg--light};
|
|
--radio-active-bg-hover: #{colors.$radio--active--bg--light--hover};
|
|
|
|
// Light - About
|
|
--link-item-bg: #{colors.$link--item--bg--light};
|
|
--link-item-image-color: #{colors.$link--item--bg--image--light};
|
|
--link-item-image-color-hover: #{colors.$link--item--bg--image--light--hover};
|
|
|
|
// Light - Text
|
|
--text-primary: #{colors.$text--primary--color--light};
|
|
--text-secondary: #{colors.$text--secondary--color--light};
|
|
|
|
--text-tertiary: #{colors.$text--tertiary--color--light};
|
|
--text-tertiary-hover: #{colors.$text--tertiary--hover--light};
|
|
|
|
// Light - Icons
|
|
--icon-secondary: #{colors.$icon--secondary--color--light};
|
|
--icon-secondary-hover: #{colors.$icon--secondary--hover--light};
|
|
|
|
// Light - Tags
|
|
--tag-bg: #{colors.$tag--bg--light};
|
|
--tag-text: #{colors.$tag--text--light};
|
|
|
|
// Light - Extra Weapons
|
|
--extra-purple-bg: #{colors.$extra--purple--bg--light};
|
|
--extra-purple-card-bg: #{colors.$extra--purple--card--bg--light};
|
|
--extra-purple-primary: #{colors.$extra--purple--primary--light};
|
|
--extra-purple-secondary: #{colors.$extra--purple--secondary--light};
|
|
--extra-purple-light-text: #{colors.$extra--purple--light--text--light};
|
|
--extra-purple-text: #{colors.$extra--purple--text--light};
|
|
--extra-purple-dark-text: #{colors.$extra--purple--dark--text--dark};
|
|
|
|
--switch-nub: #{colors.$switch--nub--bg--light};
|
|
|
|
// Light - Subaura Summons
|
|
--subaura-orange-bg: #{colors.$subaura--orange--bg--light};
|
|
--subaura-orange-card-bg: #{colors.$subaura--orange--card--bg--light};
|
|
--subaura-orange-primary: #{colors.$subaura--orange--primary--light};
|
|
--subaura-orange-secondary: #{colors.$subaura--orange--secondary--light};
|
|
--subaura-orange-text: #{colors.$subaura--orange--text--light};
|
|
|
|
// Light - Pills
|
|
--pill-bg: #{colors.$pill--bg--light};
|
|
--pill-bg-hover: #{colors.$pill--bg--light--hover};
|
|
--pill-text: #{colors.$pill--text--light};
|
|
--pill-text-hover: #{colors.$pill--text--light--hover};
|
|
|
|
// Light - Element Toggle
|
|
--toggle-bg: #{colors.$toggle--bg--light};
|
|
--toggle-stroke: #{colors.$toggle--stroke--light};
|
|
|
|
--grid-border-color: #{colors.$grid--border--color--light};
|
|
|
|
// Light - Element theming
|
|
--null-bg: #{colors.$null--bg--light};
|
|
--null-bg-hover: #{colors.$null--bg--hover--light};
|
|
--null-text: #{colors.$null--text--light};
|
|
--null-text-contrast: #{colors.$null--text--light};
|
|
--null-raid-text: #{colors.$null--text--raid--light};
|
|
--null-text-hover: #{colors.$null--text--hover--light};
|
|
--null-shadow: #{colors.$null--shadow--light};
|
|
--null-shadow-hover: #{colors.$null--shadow--light--hover};
|
|
|
|
--wind-bg: #{colors.$wind--bg--light};
|
|
--wind-bg-hover: #{colors.$wind--bg--hover--light};
|
|
--wind-portrait-bg: #{colors.$wind--portrait--bg--light};
|
|
--wind-text: #{colors.$wind--text--light};
|
|
--wind-raid-text: #{colors.$wind--text--raid--light};
|
|
--wind-text-hover: #{colors.$wind--text--hover--light};
|
|
--wind-shadow: #{colors.$wind--shadow--light};
|
|
--wind-shadow-hover: #{colors.$wind--shadow--light--hover};
|
|
|
|
--fire-bg: #{colors.$fire--bg--light};
|
|
--fire-bg-hover: #{colors.$fire--bg--hover--light};
|
|
--fire-portrait-bg: #{colors.$fire--portrait--bg--light};
|
|
--fire-text: #{colors.$fire--text--light};
|
|
--fire-text-contrast: #{colors.$fire--text--light};
|
|
--fire-raid-text: #{colors.$fire--text--raid--light};
|
|
--fire-text-hover: #{colors.$fire--text--hover--light};
|
|
--fire-shadow: #{colors.$fire--shadow--light};
|
|
--fire-shadow-hover: #{colors.$fire--shadow--light--hover};
|
|
|
|
--water-bg: #{colors.$water--bg--light};
|
|
--water-bg-hover: #{colors.$water--bg--hover--light};
|
|
--water-portrait-bg: #{colors.$water--portrait--bg--light};
|
|
--water-text: #{colors.$water--text--light};
|
|
--water-text-contrast: #{colors.$water--text--light};
|
|
--water-raid-text: #{colors.$water--text--raid--light};
|
|
--water-text-hover: #{colors.$water--text--hover--light};
|
|
--water-shadow: #{colors.$water--shadow--light};
|
|
--water-shadow-hover: #{colors.$water--shadow--light--hover};
|
|
|
|
--earth-bg: #{colors.$earth--bg--light};
|
|
--earth-bg-hover: #{colors.$earth--bg--hover--light};
|
|
--earth-portrait-bg: #{colors.$earth--portrait--bg--light};
|
|
--earth-text: #{colors.$earth--text--light};
|
|
--earth-text-contrast: #{colors.$earth--text--light};
|
|
--earth-raid-text: #{colors.$earth--text--raid--light};
|
|
--earth-text-hover: #{colors.$earth--text--hover--light};
|
|
--earth-shadow: #{colors.$earth--shadow--light};
|
|
--earth-shadow-hover: #{colors.$earth--shadow--light--hover};
|
|
|
|
--dark-bg: #{colors.$dark--bg--light};
|
|
--dark-bg-hover: #{colors.$dark--bg--hover--light};
|
|
--dark-portrait-bg: #{colors.$dark--portrait--bg--light};
|
|
--dark-text: #{colors.$dark--text--light};
|
|
--dark-text-contrast: #{colors.$dark--text--light};
|
|
--dark-raid-text: #{colors.$dark--text--raid--light};
|
|
--dark-text-hover: #{colors.$dark--text--hover--light};
|
|
--dark-shadow: #{colors.$dark--shadow--light};
|
|
--dark-shadow-hover: #{colors.$dark--shadow--light--hover};
|
|
|
|
--light-bg: #{colors.$light--bg--light};
|
|
--light-bg-hover: #{colors.$light--bg--hover--light};
|
|
--light-portrait-bg: #{colors.$light--portrait--bg--light};
|
|
--light-text: #{colors.$light--text--light};
|
|
--light-text-contrast: #{colors.$light--text--light};
|
|
--light-raid-text: #{colors.$light--text--raid--light};
|
|
--light-text-hover: #{colors.$light--text--hover--light};
|
|
--light-shadow: #{colors.$light--shadow--light};
|
|
--light-shadow-hover: #{colors.$light--shadow--light--hover};
|
|
|
|
// Gradients
|
|
--hero-gradient: #{effects.$hero--gradient--light};
|
|
--hero-gradient-overlay: #{effects.$hero--gradient--light--overlay};
|
|
}
|
|
|
|
[data-theme='dark'] {
|
|
--background: #{colors.$page--bg--dark};
|
|
--page-hover: #{colors.$page--hover--dark};
|
|
|
|
--grid-rep-hover: #{colors.$grid--rep--hover--dark};
|
|
|
|
--card-bg: #{colors.$page--element--bg--dark};
|
|
--bar-bg: #{colors.$grey-20};
|
|
|
|
--link-text-hover: #{colors.$text--link--hover--dark};
|
|
|
|
--charge-attack-bg: #{colors.$charge--attack--bg};
|
|
--charge-attack-text: #{colors.$charge--attack--text};
|
|
|
|
--full-auto-bg: #{colors.$full--auto--bg};
|
|
--full-auto-text: #{colors.$charge--attack--text};
|
|
|
|
--full-auto-label-text: #{colors.$text--full--auto--dark};
|
|
|
|
--separator-bg: #{colors.$separator--bg--dark};
|
|
|
|
--accent-blue: #{colors.$accent--blue--dark};
|
|
--accent-blue-focus: #{colors.$accent--blue--dark--focus};
|
|
|
|
--accent-yellow: #{colors.$accent--yellow--dark};
|
|
|
|
--selected-item-bg: #{colors.$selected--item--bg--dark};
|
|
--selected-item-bg-hover: #{colors.$selected--item--bg--dark--hover};
|
|
|
|
--anonymous-bg: #{colors.$anonymous--bg--dark};
|
|
|
|
--placeholder-bg: #{colors.$grey-40};
|
|
--placeholder-bg-accent: #{colors.$grey-45};
|
|
|
|
--transparent-stroke: #{colors.$transparent--stroke--dark};
|
|
|
|
// Dark - Units
|
|
--unit-bg: #{colors.$unit--bg--dark};
|
|
--unit-bg-hover: #{colors.$unit--bg--dark--hover};
|
|
|
|
// Dark - Dialogs
|
|
--dialog-bg: #{colors.$dialog--bg--dark};
|
|
|
|
// Dark - Menus
|
|
--menu-bg: #{colors.$menu--bg--dark};
|
|
--menu-text: #{colors.$menu--text--dark};
|
|
--menu-separator: #{colors.$menu--separator--dark};
|
|
--menu-bg-item-hover: #{colors.$menu--item--bg--dark--hover};
|
|
--menu-text-hover: #{colors.$menu--text--dark--hover};
|
|
|
|
// Dark - Formatting menu
|
|
--formatting-menu-bg: #{colors.$formatting--menu--bg--dark};
|
|
--formatting-menu-item-bg: #{colors.$formatting--menu--item--bg--dark};
|
|
--formatting-menu-item-bg-hover: #{colors.$formatting--menu--item--bg--dark--hover};
|
|
--formatting-menu-item-bg-active: #{colors.$formatting--menu--item--bg--dark--active};
|
|
--formatting-menu-item-text: #{colors.$formatting--menu--item--text--dark};
|
|
--formatting-menu-item-text-hover: #{colors.$formatting--menu--item--text--dark--hover};
|
|
--formatting-menu-item-text-active: #{colors.$formatting--menu--item--text--dark--active};
|
|
|
|
// Dark - Toolbar
|
|
--toolbar-bg: #{colors.$toolbar--bg--dark};
|
|
--toolbar-divider-bg: #{colors.$toolbar--divider--bg--dark};
|
|
--toolbar-item-bg: #{colors.$toolbar--item--bg--dark};
|
|
--toolbar-item-bg-hover: #{colors.$toolbar--item--bg--dark--hover};
|
|
--toolbar-item-bg-active: #{colors.$toolbar--item--bg--dark--active};
|
|
--toolbar-item-text: #{colors.$toolbar--item--text--dark};
|
|
--toolbar-item-text-hover: #{colors.$toolbar--item--text--dark--hover};
|
|
--toolbar-item-text-active: #{colors.$toolbar--item--text--dark--active};
|
|
|
|
// Dark - Highlights
|
|
--highlight-bg: #{colors.$highlight--bg--dark};
|
|
--highlight-bg-hover: #{colors.$highlight--bg--dark--hover};
|
|
--highlight-text: #{colors.$highlight--text--dark};
|
|
--highlight-text-hover: #{colors.$highlight--text--dark--hover};
|
|
|
|
// Dark - Placeholders
|
|
--placeholder-bound-bg: #{colors.$placeholder--bound--bg--dark};
|
|
--placeholder-bound-bg-hover: #{colors.$placeholder--bound--bg--dark--hover};
|
|
|
|
// Dark - Notices
|
|
--notice-bg: #{colors.$notice--bg--dark};
|
|
--notice-text: #{colors.$notice--text--dark};
|
|
|
|
--notice-button-bg: #{colors.$notice--button--bg--dark};
|
|
--notice-button-bg-hover: #{colors.$notice--button--bg--dark--hover};
|
|
--notice-button-text: #{colors.$notice--button--text--dark};
|
|
--notice-button-text-hover: #{colors.$notice--button--text--dark--hover};
|
|
|
|
// Dark - Buttons
|
|
--button-bg: #{colors.$button--bg--dark};
|
|
--button-bg-hover: #{colors.$button--bg--dark--hover};
|
|
--button-contained-bg-hover: #{colors.$button--contained--bg--dark--hover};
|
|
--button-bg-disabled: #{colors.$button--bg--dark--disabled};
|
|
--button-contained-bg: #{colors.$button--contained--bg--dark};
|
|
|
|
--button-text: #{colors.$button--text--dark};
|
|
--button-text-hover: #{colors.$button--text--dark--hover};
|
|
--button-text-disabled: #{colors.$button--text--dark--disabled};
|
|
|
|
// Dark - Inputs
|
|
--input-bg: #{colors.$input--bg--dark};
|
|
--input-bg-hover: #{colors.$input--bg--dark--hover};
|
|
--input-bound-bg: #{colors.$input--bound--bg--dark};
|
|
--input-bound-bg-hover: #{colors.$input--bound--bg--dark--hover};
|
|
|
|
// Dark - Selects
|
|
--select-bg: #{colors.$select--trigger--bg--dark};
|
|
--select-contained-bg: #{colors.$select--trigger--contained--bg--dark};
|
|
--select-contained-bg-hover: #{colors.$select--trigger--contained--bg--dark--hover};
|
|
--select-separator: #{colors.$select--separator--dark};
|
|
--select-content-contained-bg: #{colors.$select--content--contained--bg--dark};
|
|
--option-bg-hover: #{colors.$option--bg--dark--hover};
|
|
|
|
// Dark - Sliders
|
|
--slider-thumb-bg: #{colors.$slider--thumb--bg--dark};
|
|
--slider-thumb-bg-hover: #{colors.$slider--thumb--bg--dark--hover};
|
|
--slider-thumb-shadow: #{colors.$slider--thumb--shadow--dark};
|
|
--slider-thumb-shadow-hover: #{colors.$slider--thumb--shadow--dark--hover};
|
|
|
|
// Dark - Radio Buttons
|
|
--radio-button-bg: #{colors.$radio--bg--dark};
|
|
--radio-button-bg-hover: #{colors.$radio--bg--dark--hover};
|
|
|
|
--radio-active-bg: #{colors.$radio--active--bg--dark};
|
|
--radio-active-bg-hover: #{colors.$radio--active--bg--dark--hover};
|
|
|
|
// Dark - About
|
|
--link-item-bg: #{colors.$link--item--bg--dark};
|
|
--link-item-image-color: #{colors.$link--item--bg--image--dark};
|
|
--link-item-image-color-hover: #{colors.$link--item--bg--image--dark--hover};
|
|
|
|
// Dark - Text
|
|
--text-primary: #{colors.$text--primary--color--dark};
|
|
--text-secondary: #{colors.$text--secondary--color--dark};
|
|
|
|
--text-tertiary: #{colors.$text--tertiary--color--dark};
|
|
--text-tertiary-hover: #{colors.$text--tertiary--hover--dark};
|
|
|
|
// Dark - Icons
|
|
--icon-secondary: #{colors.$icon--secondary--color--dark};
|
|
--icon-secondary-hover: #{colors.$icon--secondary--hover--dark};
|
|
|
|
// Dark - Tags
|
|
--tag-bg: #{colors.$tag--bg--dark};
|
|
--tag-text: #{colors.$tag--text--dark};
|
|
|
|
// Dark - Extra Weapons
|
|
--extra-purple-bg: #{colors.$extra--purple--bg--dark};
|
|
--extra-purple-card-bg: #{colors.$extra--purple--card--bg--dark};
|
|
--extra-purple-primary: #{colors.$extra--purple--primary--dark};
|
|
--extra-purple-secondary: #{colors.$extra--purple--secondary--dark};
|
|
--extra-purple-text-light: #{colors.$extra--purple--light--text--dark};
|
|
--extra-purple-text: #{colors.$extra--purple--text--dark};
|
|
--extra-purple-text-dark: #{colors.$extra--purple--dark--text--dark};
|
|
|
|
--switch-nub: #{colors.$switch--nub--bg--dark};
|
|
|
|
// Dark - Subaura Summons
|
|
--subaura-orange-bg: #{colors.$subaura--orange--bg--dark};
|
|
--subaura-orange-card-bg: #{colors.$subaura--orange--card--bg--dark};
|
|
--subaura-orange-primary: #{colors.$subaura--orange--primary--dark};
|
|
--subaura-orange-secondary: #{colors.$subaura--orange--secondary--dark};
|
|
--subaura-orange-text: #{colors.$subaura--orange--text--dark};
|
|
|
|
// Dark - Pills
|
|
--pill-bg: #{colors.$pill--bg--dark};
|
|
--pill-bg-hover: #{colors.$pill--bg--dark--hover};
|
|
--pill-text: #{colors.$pill--text--dark};
|
|
--pill-text-hover: #{colors.$pill--text--dark--hover};
|
|
|
|
// Dark - Element Toggle
|
|
--toggle-bg: #{colors.$toggle--bg--dark};
|
|
--toggle-stroke: #{colors.$toggle--stroke--dark};
|
|
|
|
--grid-border-color: #{colors.$grid--border--color--dark};
|
|
|
|
// Dark - Element theming
|
|
--null-bg: #{colors.$null--bg--dark};
|
|
--null-bg-hover: #{colors.$null--bg--hover--dark};
|
|
--null-text: #{colors.$null--text--dark};
|
|
--null-contrast-text: #{colors.$null--text--contrast};
|
|
--null-raid-text: #{colors.$null--text--raid--dark};
|
|
--null-text-hover: #{colors.$null--text--hover--dark};
|
|
--null-shadow: #{colors.$null--shadow--dark};
|
|
--null-shadow-hover: #{colors.$null--shadow--dark--hover};
|
|
|
|
--wind-bg: #{colors.$wind--bg--dark};
|
|
--wind-bg-hover: #{colors.$wind--bg--hover--dark};
|
|
--wind-portrait-bg: #{colors.$wind--portrait--bg--dark};
|
|
--wind-text: #{colors.$wind--text--dark};
|
|
--wind-raid-text: #{colors.$wind--text--raid--dark};
|
|
--wind-text-contrast: #{colors.$wind--text--contrast};
|
|
--wind-text-hover: #{colors.$wind--text--hover--dark};
|
|
--wind-shadow: #{colors.$wind--shadow--dark};
|
|
--wind-shadow-hover: #{colors.$wind--shadow--dark--hover};
|
|
|
|
--fire-bg: #{colors.$fire--bg--dark};
|
|
--fire-bg-hover: #{colors.$fire--bg--hover--dark};
|
|
--fire-portrait-bg: #{colors.$fire--portrait--bg--dark};
|
|
--fire-text: #{colors.$fire--text--dark};
|
|
--fire-text-contrast: #{colors.$fire--text--contrast};
|
|
--fire-raid-text: #{colors.$fire--text--raid--dark};
|
|
--fire-text-hover: #{colors.$fire--text--hover--dark};
|
|
--fire-shadow: #{colors.$fire--shadow--dark};
|
|
--fire-shadow-hover: #{colors.$fire--shadow--dark--hover};
|
|
|
|
--water-bg: #{colors.$water--bg--dark};
|
|
--water-bg-hover: #{colors.$water--bg--hover--dark};
|
|
--water-portrait-bg: #{colors.$water--portrait--bg--dark};
|
|
--water-text: #{colors.$water--text--dark};
|
|
--water-text-contrast: #{colors.$water--text--contrast};
|
|
--water-raid-text: #{colors.$water--text--raid--dark};
|
|
--water-text-hover: #{colors.$water--text--hover--dark};
|
|
--water-shadow: #{colors.$water--shadow--dark};
|
|
--water-shadow-hover: #{colors.$water--shadow--dark--hover};
|
|
|
|
--earth-bg: #{colors.$earth--bg--dark};
|
|
--earth-bg-hover: #{colors.$earth--bg--hover--dark};
|
|
--earth-portrait-bg: #{colors.$earth--portrait--bg--dark};
|
|
--earth-text: #{colors.$earth--text--dark};
|
|
--earth-text-contrast: #{colors.$earth--text--contrast};
|
|
--earth-raid-text: #{colors.$earth--text--raid--dark};
|
|
--earth-text-hover: #{colors.$earth--text--hover--dark};
|
|
--earth-shadow: #{colors.$earth--shadow--dark};
|
|
--earth-shadow-hover: #{colors.$earth--shadow--dark--hover};
|
|
|
|
--dark-bg: #{colors.$dark--bg--dark};
|
|
--dark-bg-hover: #{colors.$dark--bg--hover--dark};
|
|
--dark-portrait-bg: #{colors.$dark--portrait--bg--dark};
|
|
--dark-text: #{colors.$dark--text--dark};
|
|
--dark-text-contrast: #{colors.$dark--text--contrast};
|
|
--dark-raid-text: #{colors.$dark--text--raid--dark};
|
|
--dark-text-hover: #{colors.$dark--text--hover--dark};
|
|
--dark-shadow: #{colors.$dark--shadow--dark};
|
|
--dark-shadow-hover: #{colors.$dark--shadow--dark--hover};
|
|
|
|
--light-bg: #{colors.$light--bg--dark};
|
|
--light-bg-hover: #{colors.$light--bg--hover--dark};
|
|
--light-portrait-bg: #{colors.$light--portrait--bg--dark};
|
|
--light-text: #{colors.$light--text--dark};
|
|
--light-text-contrast: #{colors.$light--text--contrast};
|
|
--light-raid-text: #{colors.$light--text--raid--dark};
|
|
--light-text-hover: #{colors.$light--text--hover--dark};
|
|
--light-shadow: #{colors.$light--shadow--dark};
|
|
--light-shadow-hover: #{colors.$light--shadow--dark--hover};
|
|
|
|
// Gradients
|
|
--hero-gradient: #{effects.$hero--gradient--dark};
|
|
--hero-gradient-overlay: #{effects.$hero--gradient--dark--overlay};
|
|
}
|