788 lines
34 KiB
SCSS
788 lines
34 KiB
SCSS
@use 'sass:color';
|
|
@use 'colors';
|
|
@use 'typography';
|
|
@use 'spacing';
|
|
@use 'effects';
|
|
@use 'layout';
|
|
@use 'mixins';
|
|
|
|
:root {
|
|
--font-family: 'AGrot', 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};
|
|
--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};
|
|
|
|
--list-cell-bg: #{colors.$list--cell--bg--light};
|
|
--list-cell-bg-hover: #{colors.$list--cell--bg--light--hover};
|
|
|
|
--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 - Sidebar
|
|
--sidebar-bg: #{colors.$sidebar--bg--light};
|
|
|
|
// 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 - 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};
|
|
--input-bound-bg: #{colors.$input--bound--bg--light};
|
|
--input-bound-bg-hover: #{colors.$input--bound--bg--light--hover};
|
|
--input-section-bg: #{colors.$input--section--bg--light};
|
|
|
|
// Light - Checkboxes
|
|
--checkbox-bg: #{colors.$checkbox--bg--light};
|
|
--checkbox-bg-hover: #{colors.$checkbox--bg--light--hover};
|
|
--checkbox-text: #{colors.$checkbox--text--light};
|
|
--checkbox-text-hover: #{colors.$checkbox--text--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 - 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};
|
|
|
|
--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 - Danger/Error
|
|
--danger: #{colors.$error};
|
|
--danger-bg: #{colors.$error--bg--light};
|
|
|
|
// Light - Tags
|
|
--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};
|
|
--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};
|
|
--null-accent: #{colors.$grey-70};
|
|
|
|
// Light - Element button colors
|
|
--null-button-bg: #{colors.$grey-55};
|
|
--wind-button-bg: #{colors.$wind-text-30};
|
|
--fire-button-bg: #{colors.$fire-text-30};
|
|
--water-button-bg: #{colors.$water-text-30};
|
|
--earth-button-bg: #{colors.$earth-text-20};
|
|
--light-button-bg: #{colors.$light-text-30};
|
|
--dark-button-bg: #{colors.$dark-text-30};
|
|
|
|
// Light - Element button hover colors (slightly lighter than button-bg)
|
|
--null-button-bg-hover: #{colors.$grey-60};
|
|
--wind-button-bg-hover: #{color.adjust(colors.$wind-text-30, $lightness: 8%)};
|
|
--fire-button-bg-hover: #{color.adjust(colors.$fire-text-30, $lightness: 8%)};
|
|
--water-button-bg-hover: #{color.adjust(colors.$water-text-30, $lightness: 8%)};
|
|
--earth-button-bg-hover: #{color.adjust(colors.$earth-text-20, $lightness: 8%)};
|
|
--light-button-bg-hover: #{color.adjust(colors.$light-text-30, $lightness: 8%)};
|
|
--dark-button-bg-hover: #{color.adjust(colors.$dark-text-30, $lightness: 8%)};
|
|
|
|
// Light - Element navigation selected background
|
|
--null-nav-selected-bg: #{colors.$grey-85};
|
|
--wind-nav-selected-bg: #{colors.$wind-bg-20};
|
|
--fire-nav-selected-bg: #{colors.$fire-bg-20};
|
|
--water-nav-selected-bg: #{colors.$water-bg-20};
|
|
--earth-nav-selected-bg: #{colors.$earth-bg-20};
|
|
--light-nav-selected-bg: #{colors.$light-bg-20};
|
|
--dark-nav-selected-bg: #{colors.$dark-bg-20};
|
|
|
|
// Light - Element navigation hover background (between bg and nav-selected)
|
|
--null-nav-hover-bg: #{colors.$grey-80};
|
|
--wind-nav-hover-bg: #{colors.$wind-bg-15};
|
|
--fire-nav-hover-bg: #{colors.$fire-bg-15};
|
|
--water-nav-hover-bg: #{colors.$water-bg-15};
|
|
--earth-nav-hover-bg: #{colors.$earth-bg-15};
|
|
--light-nav-hover-bg: #{colors.$light-bg-15};
|
|
--dark-nav-hover-bg: #{colors.$dark-bg-15};
|
|
|
|
// Item detail backgrounds (same colors as nav selected)
|
|
--null-item-detail-bg: #{colors.$grey-85};
|
|
--wind-item-detail-bg: #{colors.$wind-bg-20};
|
|
--fire-item-detail-bg: #{colors.$fire-bg-20};
|
|
--water-item-detail-bg: #{colors.$water-bg-20};
|
|
--earth-item-detail-bg: #{colors.$earth-bg-20};
|
|
--light-item-detail-bg: #{colors.$light-bg-20};
|
|
--dark-item-detail-bg: #{colors.$dark-bg-20};
|
|
|
|
// Light - Element navigation selected text
|
|
--null-nav-selected-text: #{colors.$grey-40};
|
|
--wind-nav-selected-text: #{colors.$wind-text-20};
|
|
--fire-nav-selected-text: #{colors.$fire-text-20};
|
|
--water-nav-selected-text: #{colors.$water-text-10};
|
|
--earth-nav-selected-text: #{colors.$earth-text-15};
|
|
--light-nav-selected-text: #{colors.$light-text-20};
|
|
--dark-nav-selected-text: #{colors.$dark-text-20};
|
|
|
|
--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};
|
|
--wind-accent: #{colors.$wind--bg--light};
|
|
|
|
--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};
|
|
--fire-accent: #{colors.$fire--bg--light};
|
|
|
|
--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};
|
|
--water-accent: #{colors.$water--bg--light};
|
|
|
|
--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};
|
|
--earth-accent: #{colors.$earth--bg--light};
|
|
|
|
--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};
|
|
--dark-accent: #{colors.$dark--bg--light};
|
|
|
|
--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};
|
|
--light-accent: #{colors.$light--bg--light};
|
|
|
|
// Toast notifications
|
|
--toast-bg: #{colors.$grey-100};
|
|
--toast-text: #{colors.$text--primary--color--light};
|
|
--toast-text-secondary: #{colors.$text--secondary--color--light};
|
|
--toast-border: #{colors.$border--subtle--light};
|
|
--toast-success-bg: #e8f5e9;
|
|
--toast-success-text: #2e7d32;
|
|
--toast-error-bg: #{colors.$error--bg--light};
|
|
--toast-error-text: #{colors.$error};
|
|
--toast-warning-bg: #{colors.$notice--bg--light};
|
|
--toast-warning-text: #{colors.$notice--text--light};
|
|
--toast-info-bg: #e3f2fd;
|
|
--toast-info-text: #1565c0;
|
|
|
|
// Gradients
|
|
--hero-gradient: #{effects.$hero--gradient--light};
|
|
--hero-gradient-overlay: #{effects.$hero--gradient--light--overlay};
|
|
}
|
|
|
|
html[data-theme='dark'] {
|
|
--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};
|
|
|
|
--list-cell-bg: #{colors.$list--cell--bg--dark};
|
|
--list-cell-bg-hover: #{colors.$list--cell--bg--dark--hover};
|
|
|
|
--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 - Sidebar
|
|
--sidebar-bg: #{colors.$sidebar--bg--dark};
|
|
|
|
// 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 - 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};
|
|
--input-bound-bg: #{colors.$input--bound--bg--dark};
|
|
--input-bound-bg-hover: #{colors.$input--bound--bg--dark--hover};
|
|
--input-section-bg: #{colors.$input--section--bg--dark};
|
|
|
|
// Dark - Checkboxes
|
|
--checkbox-bg: #{colors.$checkbox--bg--dark};
|
|
--checkbox-bg-hover: #{colors.$checkbox--bg--dark--hover};
|
|
--checkbox-text: #{colors.$checkbox--text--dark};
|
|
--checkbox-text-hover: #{colors.$checkbox--text--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 - 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};
|
|
|
|
--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 - Danger/Error
|
|
--danger: #{colors.$error};
|
|
--danger-bg: #{colors.$error--bg--dark};
|
|
|
|
// Dark - Tags
|
|
--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};
|
|
--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};
|
|
--null-accent: #{colors.$grey-70};
|
|
|
|
// Dark - Element button colors (same as light theme)
|
|
--null-button-bg: #{colors.$grey-55};
|
|
--wind-button-bg: #{colors.$wind-text-30};
|
|
--fire-button-bg: #{colors.$fire-text-30};
|
|
--water-button-bg: #{colors.$water-text-30};
|
|
--earth-button-bg: #{colors.$earth-text-20};
|
|
--light-button-bg: #{colors.$light-text-30};
|
|
--dark-button-bg: #{colors.$dark-text-30};
|
|
|
|
// Dark - Element button hover colors (same as light theme)
|
|
--null-button-bg-hover: #{colors.$grey-60};
|
|
--wind-button-bg-hover: #{color.adjust(colors.$wind-text-30, $lightness: 8%)};
|
|
--fire-button-bg-hover: #{color.adjust(colors.$fire-text-30, $lightness: 8%)};
|
|
--water-button-bg-hover: #{color.adjust(colors.$water-text-30, $lightness: 8%)};
|
|
--earth-button-bg-hover: #{color.adjust(colors.$earth-text-20, $lightness: 8%)};
|
|
--light-button-bg-hover: #{color.adjust(colors.$light-text-30, $lightness: 8%)};
|
|
--dark-button-bg-hover: #{color.adjust(colors.$dark-text-30, $lightness: 8%)};
|
|
|
|
// Dark - Element navigation selected background (same as light theme)
|
|
--null-nav-selected-bg: #{colors.$grey-85};
|
|
--wind-nav-selected-bg: #{colors.$wind-bg-20};
|
|
--fire-nav-selected-bg: #{colors.$fire-bg-20};
|
|
--water-nav-selected-bg: #{colors.$water-bg-20};
|
|
--earth-nav-selected-bg: #{colors.$earth-bg-20};
|
|
--light-nav-selected-bg: #{colors.$light-bg-20};
|
|
--dark-nav-selected-bg: #{colors.$dark-bg-20};
|
|
|
|
// Dark - Element navigation hover background (same as light theme)
|
|
--null-nav-hover-bg: #{colors.$grey-80};
|
|
--wind-nav-hover-bg: #{colors.$wind-bg-15};
|
|
--fire-nav-hover-bg: #{colors.$fire-bg-15};
|
|
--water-nav-hover-bg: #{colors.$water-bg-15};
|
|
--earth-nav-hover-bg: #{colors.$earth-bg-15};
|
|
--light-nav-hover-bg: #{colors.$light-bg-15};
|
|
--dark-nav-hover-bg: #{colors.$dark-bg-15};
|
|
|
|
// Item detail backgrounds (same colors as nav selected)
|
|
--null-item-detail-bg: #{colors.$grey-85};
|
|
--wind-item-detail-bg: #{colors.$wind-bg-20};
|
|
--fire-item-detail-bg: #{colors.$fire-bg-20};
|
|
--water-item-detail-bg: #{colors.$water-bg-20};
|
|
--earth-item-detail-bg: #{colors.$earth-bg-20};
|
|
--light-item-detail-bg: #{colors.$light-bg-20};
|
|
--dark-item-detail-bg: #{colors.$dark-bg-20};
|
|
|
|
// Dark - Element navigation selected text (same as light theme)
|
|
--null-nav-selected-text: #{colors.$grey-40};
|
|
--wind-nav-selected-text: #{colors.$wind-text-20};
|
|
--fire-nav-selected-text: #{colors.$fire-text-20};
|
|
--water-nav-selected-text: #{colors.$water-text-10};
|
|
--earth-nav-selected-text: #{colors.$earth-text-15};
|
|
--light-nav-selected-text: #{colors.$light-text-20};
|
|
--dark-nav-selected-text: #{colors.$dark-text-20};
|
|
|
|
--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};
|
|
--wind-accent: #{colors.$wind--bg--dark};
|
|
|
|
--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};
|
|
--fire-accent: #{colors.$fire--bg--dark};
|
|
|
|
--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};
|
|
--water-accent: #{colors.$water--bg--dark};
|
|
|
|
--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};
|
|
--earth-accent: #{colors.$earth--bg--dark};
|
|
|
|
--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};
|
|
--dark-accent: #{colors.$dark--bg--dark};
|
|
|
|
--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};
|
|
--light-accent: #{colors.$light--bg--dark};
|
|
|
|
// Toast notifications
|
|
--toast-bg: #{colors.$grey-20};
|
|
--toast-text: #{colors.$text--primary--color--dark};
|
|
--toast-text-secondary: #{colors.$text--secondary--color--dark};
|
|
--toast-border: #{colors.$border--subtle--dark};
|
|
--toast-success-bg: #1b3d1f;
|
|
--toast-success-text: #66bb6a;
|
|
--toast-error-bg: #{colors.$error--bg--dark};
|
|
--toast-error-text: #{colors.$error};
|
|
--toast-warning-bg: #{colors.$notice--bg--dark};
|
|
--toast-warning-text: #{colors.$notice--text--dark};
|
|
--toast-info-bg: #0d2744;
|
|
--toast-info-text: #64b5f6;
|
|
|
|
// Gradients
|
|
--hero-gradient: #{effects.$hero--gradient--dark};
|
|
--hero-gradient-overlay: #{effects.$hero--gradient--dark--overlay};
|
|
}
|