From 0fb674b150ca09edd4342da661f90e0550474125 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 5 Jul 2023 18:48:56 -0700
Subject: [PATCH] Add new variables and themes

---
 styles/themes.scss    | 62 +++++++++++++++++++++++++++++++
 styles/variables.scss | 86 +++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 148 insertions(+)

diff --git a/styles/themes.scss b/styles/themes.scss
index 4edee375..6ebab807 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -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};
diff --git a/styles/variables.scss b/styles/variables.scss
index fa7f7242..2b9ccd41 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -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;