granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add new variables and themes

Browse source
This commit is contained in:
Justin Edmund 2023-07-05 18:48:56 -07:00
parent 97ea666561
commit 0fb674b150
2 changed files with 148 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
styles/themes.scss
View file

@ -44,6 +44,25 @@
--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 - Placeholders
--placeholder-bound-bg: #{$placeholder--bound--bg--light};
--placeholder-bound-bg-hover: #{$placeholder--bound--bg--light--hover};
@ -139,36 +158,48 @@
--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-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-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-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-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-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};
@ -221,6 +252,25 @@
--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 - Placeholders
--placeholder-bound-bg: #{$placeholder--bound--bg--dark};
--placeholder-bound-bg-hover: #{$placeholder--bound--bg--dark--hover};
@ -316,36 +366,48 @@
--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-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-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-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-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-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};

86
styles/variables.scss
View file

@ -336,6 +336,53 @@ $pill--bg--dark--hover: $grey-50;
$pill--text--dark: $grey-100;
$pill--text--dark--hover: $grey-00;
// Color Definitions: Formatting menu
$formatting--menu--bg--light: $grey-30;
$formatting--menu--bg--dark: $grey-10;
$formatting--menu--item--bg--light: $grey-30;
$formatting--menu--item--bg--dark: $grey-20;
$formatting--menu--item--bg--light--hover: $grey-40;
$formatting--menu--item--bg--dark--hover: $grey-30;
$formatting--menu--item--bg--light--active: $grey-50;
$formatting--menu--item--bg--dark--active: $grey-40;
$formatting--menu--item--text--light: $grey-100;
$formatting--menu--item--text--dark: $grey-00;
$formatting--menu--item--text--light--hover: $grey-100;
$formatting--menu--item--text--dark--hover: $grey-00;
$formatting--menu--item--text--light--active: $grey-100;
$formatting--menu--item--text--dark--active: $grey-00;
// Color Definitions: Toolbar
$toolbar--bg--light: $grey-75;
$toolbar--bg--dark: $grey-10;
$toolbar--divider--bg--light: $grey-70;
$toolbar--divider--bg--dark: $grey-20;
$toolbar--item--bg--light: $grey-75;
$toolbar--item--bg--dark: $grey-20;
$toolbar--item--bg--light--hover: $grey-70;
$toolbar--item--bg--dark--hover: $grey-30;
$toolbar--item--bg--light--active: $accent--blue--light;
$toolbar--item--bg--dark--active: $accent--blue--dark;
$toolbar--item--text--light: $grey-40;
$toolbar--item--text--dark: $grey-80;
$toolbar--item--text--light--hover: $grey-30;
$toolbar--item--text--dark--hover: $grey-90;
$toolbar--item--text--light--active: $grey-100;
$toolbar--item--text--dark--active: $grey-00;
// Color Definitions: Element Toggle
$toggle--bg--light: $grey-90;
$toggle--bg--dark: $grey-15;
@ -390,6 +437,12 @@ $wind--text--raid--dark: $wind-bg-10;
$wind--text--hover--light: $wind-text-00;
$wind--text--hover--dark: $wind-text-00;
$wind--shadow--light: fade-out($wind-text-20, 0.3);
$wind--shadow--dark: fade-out($wind-text-20, 0.3);
$wind--shadow--light--hover: fade-out($wind-text-00, 0.3);
$wind--shadow--dark--hover: fade-out($wind-text-00, 0.3);
// Color Definitions: Element / Fire
$fire--bg--light: $fire-bg-10;
$fire--bg--dark: $fire-bg-10;
@ -406,6 +459,12 @@ $fire--text--raid--dark: $fire-bg-10;
$fire--text--hover--light: $fire-text-00;
$fire--text--hover--dark: $fire-text-00;
$fire--shadow--light: fade-out($fire-text-20, 0.3);
$fire--shadow--dark: fade-out($fire-text-20, 0.3);
$fire--shadow--light--hover: fade-out($fire-text-00, 0.3);
$fire--shadow--dark--hover: fade-out($fire-text-00, 0.3);
// Color Definitions: Element / Water
$water--bg--light: $water-bg-10;
$water--bg--dark: $water-bg-10;
@ -422,6 +481,12 @@ $water--text--raid--dark: $water-bg-10;
$water--text--hover--light: $water-text-00;
$water--text--hover--dark: $water-text-00;
$water--shadow--light: fade-out($water-text-20, 0.3);
$water--shadow--dark: fade-out($water-text-20, 0.3);
$water--shadow--light--hover: fade-out($water-text-00, 0.3);
$water--shadow--dark--hover: fade-out($water-text-00, 0.3);
// Color Definitions: Element / Earth
$earth--bg--light: $earth-bg-10;
$earth--bg--dark: $earth-bg-10;
@ -438,6 +503,12 @@ $earth--text--raid--dark: $earth-bg-10;
$earth--text--hover--light: $earth-text-00;
$earth--text--hover--dark: $earth-text-00;
$earth--shadow--light: fade-out($earth-text-20, 0.3);
$earth--shadow--dark: fade-out($earth-text-20, 0.3);
$earth--shadow--light--hover: fade-out($earth-text-00, 0.3);
$earth--shadow--dark--hover: fade-out($earth-text-00, 0.3);
// Color Definitions: Element / Dark
$dark--bg--light: $dark-bg-10;
$dark--bg--dark: $dark-bg-10;
@ -454,6 +525,12 @@ $dark--text--raid--dark: $dark-bg-10;
$dark--text--hover--light: $dark-text-00;
$dark--text--hover--dark: $dark-text-00;
$dark--shadow--light: fade-out($dark-text-20, 0.3);
$dark--shadow--dark: fade-out($dark-text-20, 0.3);
$dark--shadow--light--hover: fade-out($dark-text-00, 0.3);
$dark--shadow--dark--hover: fade-out($dark-text-00, 0.3);
// Color Definitions: Element / Light
$light--bg--light: $light-bg-10;
$light--bg--dark: $light-bg-10;
@ -470,6 +547,12 @@ $light--text--raid--dark: $light-bg-10;
$light--text--hover--light: $light-text-00;
$light--text--hover--dark: $light-text-00;
$light--shadow--light: fade-out($light-text-20, 0.3);
$light--shadow--dark: fade-out($light-text-20, 0.3);
$light--shadow--light--hover: fade-out($light-text-00, 0.3);
$light--shadow--dark--hover: fade-out($light-text-00, 0.3);
// Font-weight
$normal: 400;
$medium: 500;
@ -497,6 +580,9 @@ $input-corner: $unit;
$item-corner: $unit;
$item-corner-small: $unit-half;
$bubble-menu-corner: $unit;
$bubble-menu-item-corner: $unit-half * 1.5;
// Shadows
$hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
$hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;