Updates themes and variables

styles/themes.scss

@@ -108,6 +108,12 @@
   --subaura-orange-secondary: #{$subaura--orange--secondary--light};
   --subaura-orange-text: #{$subaura--orange--text--light};
 
+  // Light - Pills
+  --pill-bg: #{$pill--bg--light};
+  --pill-bg-hover: #{$pill--bg--light--hover};
+  --pill-text: #{$pill--text--light};
+  --pill-text-hover: #{$pill--text--light--hover};
+
   // Light - Element Toggle
   --toggle-bg: #{$toggle--bg--light};
   --toggle-stroke: #{$toggle--stroke--light};
@@ -259,6 +265,12 @@
   --subaura-orange-secondary: #{$subaura--orange--secondary--dark};
   --subaura-orange-text: #{$subaura--orange--text--dark};
 
+  // Dark - Pills
+  --pill-bg: #{$pill--bg--dark};
+  --pill-bg-hover: #{$pill--bg--dark--hover};
+  --pill-text: #{$pill--text--dark};
+  --pill-text-hover: #{$pill--text--dark--hover};
+
   // Dark - Element Toggle
   --toggle-bg: #{$toggle--bg--dark};
   --toggle-stroke: #{$toggle--stroke--dark};
@@ -268,32 +280,32 @@
   // Element theming
   --wind-bg: #{$wind-bg-10};
   --wind-hover-bg: #{$wind-bg-00};
-  --wind-text: #{$wind-text-10};
+  --wind-text: #{$wind-text-20};
   --wind-hover-text: #{$wind-text-00};
 
   --fire-bg: #{$fire-bg-10};
   --fire-hover-bg: #{$fire-bg-00};
-  --fire-text: #{$fire-text-10};
+  --fire-text: #{$fire-text-20};
   --fire-hover-text: #{$fire-text-00};
 
   --water-bg: #{$water-bg-10};
   --water-hover-bg: #{$water-bg-00};
-  --water-text: #{$water-text-10};
+  --water-text: #{$water-text-20};
   --water-hover-text: #{$water-text-00};
 
   --earth-bg: #{$earth-bg-10};
   --earth-hover-bg: #{$earth-bg-00};
-  --earth-text: #{$earth-text-10};
+  --earth-text: #{$earth-text-20};
   --earth-hover-text: #{$earth-text-00};
 
   --dark-bg: #{$dark-bg-10};
   --dark-hover-bg: #{$dark-bg-00};
-  --dark-text: #{$dark-text-10};
+  --dark-text: #{$dark-text-20};
   --dark-hover-text: #{$dark-text-00};
 
   --light-bg: #{$light-bg-10};
   --light-hover-bg: #{$light-bg-00};
-  --light-text: #{$light-text-10};
+  --light-text: #{$light-text-20};
   --light-hover-text: #{$light-text-00};
 
   // Gradients

styles/variables.scss

@@ -56,6 +56,7 @@ $grey-100: white;
 
 // Purple -- Additional Weapons
 $purple-00: #25224e;
+$purple-05: #373278;
 $purple-10: #4f3c79;
 $purple-20: #635fb7;
 $purple-30: #8c86ff;
@@ -256,9 +257,10 @@ $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--bg--dark: $purple-20;
 $extra--purple--card--bg--dark: $purple-40;
-$extra--purple--primary--dark: $purple-00;
+$extra--purple--primary--dark: $purple-05;
 $extra--purple--secondary--dark: $purple-10;
 $extra--purple--text--dark: $purple-00;
 
@@ -283,6 +285,17 @@ $full--auto--bg: $yellow-text-20;
 $auto--guard--bg: $purple-30;
 $auto--guard--text: $purple-10;
 
+// Color Definitions: Pills
+$pill--bg--light: $grey-90;
+$pill--bg--light--hover: $grey-50;
+$pill--text--light: $grey-30;
+$pill--text--light--hover: $grey-100;
+
+$pill--bg--dark: $grey-00;
+$pill--bg--dark--hover: $grey-50;
+$pill--text--dark: $grey-100;
+$pill--text--dark--hover: $grey-00;
+
 // Color Definitions: Element Toggle
 $toggle--bg--light: $grey-90;
 $toggle--bg--dark: $grey-15;
@@ -342,9 +355,10 @@ $scale-wide: scale(1.05, 1.05);
 $scale-tall: scale(1.012, 1.012);
 
 // Border radius
+$full-corner: 500px;
 $card-corner: $unit * 1.5;
 $input-corner: $unit;
-$item-corner: $unit-half;
+$item-corner: $unit;
 
 // Shadows
 $hover-stroke: 1px solid rgba(0, 0, 0, 0.1);