From 43d5faeeade3d316bcf648ef4c3ba78621113265 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Fri, 30 Jun 2023 22:53:56 -0700
Subject: [PATCH] Update themes and variables

---
 styles/themes.scss    | 22 +++++++++++-----------
 styles/variables.scss | 31 ++++++++++++++++---------------
 2 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/styles/themes.scss b/styles/themes.scss
index 5d726d20..f0c2425c 100644
--- a/styles/themes.scss
+++ b/styles/themes.scss
@@ -58,11 +58,9 @@
   --input-bound-bg-hover: #{$input--bound--bg--light--hover};
 
   // Light - Selects
-  --select-bg: #{$select--bg--light};
-  --select-contained-bg: #{$select--contained--bg--light};
-  --select-contained-bg-hover: #{$select--contained--bg--light--hover};
-  --select-modal-bg: #{$select--modal--bg--light};
-  --select-modal-bg-hover: #{$select--modal--bg--light--hover};
+  --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};
@@ -98,7 +96,9 @@
   --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};
 
@@ -163,7 +163,7 @@
   --grid-rep-hover: #{$grid--rep--hover--dark};
 
   --card-bg: #{$page--element--bg--dark};
-  --bar-bg: #{$grey-10};
+  --bar-bg: #{$grey-20};
 
   --link-text-hover: #{$text--link--hover--dark};
 
@@ -216,11 +216,9 @@
   --input-bound-bg-hover: #{$input--bound--bg--dark--hover};
 
   // Dark - Selects
-  --select-bg: #{$select--bg--dark};
-  --select-contained-bg: #{$select--contained--bg--dark};
-  --select-contained-bg-hover: #{$select--contained--bg--dark--hover};
-  --select-modal-bg: #{$select--modal--bg--dark};
-  --select-modal-bg-hover: #{$select--modal--bg--dark--hover};
+  --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};
@@ -256,7 +254,9 @@
   --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};
 
diff --git a/styles/variables.scss b/styles/variables.scss
index e7200ba0..f32245ba 100644
--- a/styles/variables.scss
+++ b/styles/variables.scss
@@ -41,6 +41,7 @@ $grey-00: #000;
 $grey-05: #0a0a0a;
 $grey-10: #111;
 $grey-15: #191919;
+$grey-20: #212121;
 $grey-25: #232323;
 $grey-30: #2f2f2f;
 $grey-40: #444;
@@ -208,18 +209,16 @@ $input--bound--bg--dark: $grey-15;
 $input--bound--bg--dark--hover: $grey-10;
 
 // Color Definitions: Select
-$select--bg--light: $grey-100;
-$select--bg--dark: $grey-10;
+$select--trigger--bg--light: $grey-100;
+$select--trigger--bg--dark: $grey-10;
 
-$select--contained--bg--light: $grey-85;
-$select--contained--bg--light--hover: $grey-80;
-$select--contained--bg--dark: $grey-15;
-$select--contained--bg--dark--hover: $grey-10;
+$select--trigger--contained--bg--light: $grey-85;
+$select--trigger--contained--bg--light--hover: $grey-80;
+$select--trigger--contained--bg--dark: $grey-15;
+$select--trigger--contained--bg--dark--hover: $grey-10;
 
-$select--modal--bg--light: $grey-85;
-$select--modal--bg--light--hover: $grey-80;
-$select--modal--bg--dark: $grey-40;
-$select--modal--bg--dark--hover: $grey-30;
+$select--content--contained--bg--light: $grey-100;
+$select--content--contained--bg--dark: $grey-15;
 
 $select--separator--light: $grey-90;
 $select--separator--dark: $grey-05;
@@ -233,9 +232,6 @@ $grid--rep--hover--dark: $grey-10;
 $grid--border--color--light: $grey-85;
 $grid--border--color--dark: $grey-40;
 
-$select--content--contained--bg--light: $grey-85;
-$select--content--contained--bg--dark: $grey-15;
-
 // Color Definitions: Slider
 $slider--thumb--bg--light: $grey-100;
 $slider--thumb--bg--dark: $grey-100;
@@ -263,13 +259,17 @@ $extra--purple--bg--light: $purple-90;
 $extra--purple--card--bg--light: $purple-80;
 $extra--purple--primary--light: $purple-30;
 $extra--purple--secondary--light: $purple-40;
-$extra--purple--text--light: $purple-10;
+$extra--purple--light--text--light: $purple-40;
+$extra--purple--text--light: $purple-20;
+$extra--purple--dark--text--light: $purple-10;
 
 $extra--purple--bg--dark: $purple-20;
 $extra--purple--card--bg--dark: $purple-40;
 $extra--purple--primary--dark: $purple-05;
 $extra--purple--secondary--dark: $purple-10;
-$extra--purple--text--dark: $purple-00;
+$extra--purple--light--text--dark: $purple-30;
+$extra--purple--text--dark: $purple-20;
+$extra--purple--dark--text--dark: $purple-00;
 
 // Color Definitions: Subaura
 $subaura--orange--bg--light: $orange-90;
@@ -366,6 +366,7 @@ $full-corner: 500px;
 $card-corner: $unit * 1.5;
 $input-corner: $unit;
 $item-corner: $unit;
+$item-corner-small: $unit-half;
 
 // Shadows
 $hover-stroke: 1px solid rgba(0, 0, 0, 0.1);