Add a bunch of new colors and theme variables

* Notice variables for FilterModal
* Unit background variables for GridRep
* An array of accent yellow colors
* Modified disabled button values in dark theme
* Modified extra purple text color in dark theme

styles/themes.scss

@@ -30,7 +30,11 @@
   --anonymous-bg: #{$anonymous--bg--light};
   --placeholder-bg: #{$grey-80};
 
-  // Light - Menus
+  // Light - Units
+  --unit-bg: #{$unit--bg--light};
+  --unit-bg-hover: #{$unit--bg--light--hover};
+
+  // Light - Dialogs
   --dialog-bg: #{$dialog--bg--light};
 
   // Light - Menus
@@ -40,6 +44,10 @@
   --menu-bg-item-hover: #{$menu--item--bg--light--hover};
   --menu-text-hover: #{$menu--text--light--hover};
 
+  // Light - Notices
+  --notice-bg: #{$notice--bg--light};
+  --notice-text: #{$notice--text--light};
+
   // Light - Buttons
   --button-bg: #{$button--bg--light};
   --button-bg-hover: #{$button--bg--light--hover};
@@ -188,6 +196,10 @@
   --anonymous-bg: #{$anonymous--bg--dark};
   --placeholder-bg: #{$grey-40};
 
+  // Dark - Units
+  --unit-bg: #{$unit--bg--dark};
+  --unit-bg-hover: #{$unit--bg--dark--hover};
+
   // Dark - Dialogs
   --dialog-bg: #{$dialog--bg--dark};
 
@@ -198,6 +210,10 @@
   --menu-bg-item-hover: #{$menu--item--bg--dark--hover};
   --menu-text-hover: #{$menu--text--dark--hover};
 
+  // Dark - Notices
+  --notice-bg: #{$notice--bg--dark};
+  --notice-text: #{$notice--text--dark};
+
   // Dark - Buttons
   --button-bg: #{$button--bg--dark};
   --button-bg-hover: #{$button--bg--dark--hover};

styles/variables.scss

@@ -94,6 +94,15 @@ $accent--blue--dark--focus: #275dc5;
 
 $accent--yellow--light: #c89d39;
 $accent--yellow--dark: #f9cc64;
+$yellow-text-10: #a39200;
+$yellow-text-20: #ffed4c;
+
+$accent--yellow--00: #463805;
+$accent--yellow--20: #7f6a00;
+$accent--yellow--40: #a39200;
+$accent--yellow--60: #c89d39;
+$accent--yellow--80: #deb351;
+$accent--yellow--100: #f9cc64;
 
 $selected--item--bg--dark: #f9cc645d;
 $selected--item--bg--dark--hover: #fcc33f81;
@@ -143,9 +152,6 @@ $dark-bg-00: #d565fb55;
 $dark-bg-10: #d565fb;
 $dark-bg-20: #f2cdff;
 
-$yellow-text-10: #a39200;
-$yellow-text-20: #ffed4c;
-
 $page--bg--light: $grey-90;
 $page--bg--dark: $grey-15;
 
@@ -161,6 +167,13 @@ $separator--bg--dark: $grey-15;
 $anonymous--bg--light: $grey-80;
 $anonymous--bg--dark: $grey-40;
 
+// Color Definitions: Unit
+$unit--bg--light: $grey-100;
+$unit--bg--dark: $grey-20;
+
+$unit--bg--light--hover: $grey-90;
+$unit--bg--dark--hover: $grey-30;
+
 // Color Definitions: Dialog
 $dialog--bg--light: $grey-100;
 $dialog--bg--dark: $grey-25;
@@ -177,6 +190,13 @@ $menu--item--bg--dark--hover: $grey-00;
 $menu--text--light--hover: $grey-100;
 $menu--text--dark--hover: $grey-15;
 
+// Color Definitions: Notices
+$notice--bg--light: $accent--yellow--100;
+$notice--bg--dark: $accent--yellow--00;
+
+$notice--text--light: $accent--yellow--20;
+$notice--text--dark: $accent--yellow--100;
+
 // Color Definitions: Button
 $button--bg--light: $grey-80;
 $button--bg--light--hover: $grey-100;
@@ -195,7 +215,7 @@ $button--text--light--hover: $grey-40;
 $button--text--light--disabled: $grey-70;
 $button--text--dark: $grey-70;
 $button--text--dark--hover: $grey-100;
-$button--text--dark--disabled: $grey-40;
+$button--text--dark--disabled: $grey-50;
 
 // Color Definitions: Input
 $input--bg--light: $grey-100;
@@ -268,7 +288,7 @@ $extra--purple--card--bg--dark: $purple-40;
 $extra--purple--primary--dark: $purple-05;
 $extra--purple--secondary--dark: $purple-10;
 $extra--purple--light--text--dark: $purple-30;
-$extra--purple--text--dark: $purple-20;
+$extra--purple--text--dark: $purple-80;
 $extra--purple--dark--text--dark: $purple-00;
 
 // Color Definitions: Subaura