Fix purple color for Dark Mode and ExtraWeapons

Also made 13th slot uneditable for now

components/ExtraWeapons/index.scss

@@ -1,5 +1,5 @@
 #ExtraGrid {
-  background: #ecebff;
+  background: var(--extra-purple-bg);
   border-radius: 8px;
   box-sizing: border-box;
   display: flex;
@@ -17,7 +17,7 @@
   }
 
   & > span {
-    color: #4f3c79;
+    color: var(--extra-purple-text);
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -38,10 +38,10 @@
   }
 
   .WeaponUnit .WeaponImage {
-    background: #d5d3f6;
+    background: var(--extra-purple-card-bg);
   }
 
   .WeaponUnit .WeaponImage .icon svg {
-    fill: #8f8ac6;
+    fill: var(--extra-purple-secondary);
   }
 }

components/ExtraWeapons/index.tsx

@@ -28,7 +28,7 @@ const ExtraWeapons = (props: Props) => {
           return (
             <li key={`grid_unit_${i}`}>
               <WeaponUnit
-                editable={props.editable}
+                editable={i < 2 ? props.editable : false}
                 position={props.offset + i}
                 unitType={1}
                 gridWeapon={props.grid[props.offset + i]}

components/PartyDetails/index.scss

@@ -2,7 +2,7 @@
   display: none; // This breaks transition, find a workaround
   opacity: 0;
   margin: $unit-4x auto 0;
-  max-width: $unit * 95;
+  max-width: $unit * 94;
   position: relative;
 
   &.Editable {

components/ToggleSwitch/index.scss

@@ -47,11 +47,11 @@
   }
 
   &-checkbox:checked + &-label {
-    background: #ecebff;
+    background: var(--extra-purple-bg);
   }
 
   &-checkbox:checked + &-label &-switch {
-    background: #8c86ff;
+    background: var(--extra-purple-primary);
   }
 
   &-checkbox:checked + &-label {

components/WeaponUnit/index.scss

@@ -20,6 +20,10 @@
     transform: $scale-wide;
   }
 
+  &.empty {
+    min-height: auto;
+  }
+
   &.mainhand {
     margin-right: $unit * 3;
     max-width: 200px;

components/WeaponUnit/index.tsx

@@ -39,6 +39,7 @@ const WeaponUnit = (props: Props) => {
     grid: props.unitType == 1,
     editable: props.editable,
     filled: props.gridWeapon !== undefined,
+    empty: props.gridWeapon == undefined,
   })
 
   const gridWeapon = props.gridWeapon

styles/themes.scss

@@ -26,6 +26,12 @@
 
   --switch-nub: #{$switch--nub--bg--light};
 
+  --extra-purple-bg: #{$extra--purple--bg--light};
+  --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-text: #{$extra--purple--text--light};
+
   --grid-border-color: #{$grid--border--color--light};
 
   --wind-hover-bg: #{$wind-bg-20};
@@ -42,7 +48,7 @@
   --light-hover-text: #{$light-text-20};
 }
 
-[data-theme="dark"] {
+[data-theme='dark'] {
   --background: #{$page--bg--dark};
   --page-hover: #{$page--hover--dark};
 
@@ -70,6 +76,12 @@
 
   --switch-nub: #{$switch--nub--bg--dark};
 
+  --extra-purple-bg: #{$extra--purple--bg--dark};
+  --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: #{$extra--purple--text--dark};
+
   --grid-border-color: #{$grid--border--color--dark};
 
   --wind-hover-bg: #{$wind-bg-00};

styles/variables.scss

@@ -36,59 +36,21 @@ $grey-90: #f5f5f5;
 $grey-95: #fafafa;
 $grey-100: white;
 
-$page--bg--light: $grey-90;
+// Purple -- Additional Weapons
-$page--bg--dark: $grey-10;
+$purple-00: #332f7c;
-
+$purple-10: #4f3c79;
-$page--hover--light: $grey-90;
+$purple-20: #635fb7;
-$page--hover--dark: $grey-20;
+$purple-30: #8c86ff;
-
+$purple-40: #7471c7;
-$page--element--bg--light: $grey-70;
+$purple-80: #d5d3f6;
-$page--element--bg--dark: $grey-30;
+$purple-90: #ecebff;
-
-$input--bg--light: $grey-100;
-$input--bg--light--hover: $grey-95;
-$input--bg--dark: $grey-20;
-$input--bg--dark--hover: $grey-15;
-
-$input--bound--bg--light: $grey-90;
-$input--bound--bg--light--hover: $grey-80;
-$input--bound--bg--dark: $grey-10;
-$input--bound--bg--dark--hover: $grey-15;
-
-$item--bg--light--hover: $grey-90;
-$item--bg--dark--hover: $grey-10;
-
-$grid--rep--hover--light: $grey-100;
-$grid--rep--hover--dark: $grey-00;
-
-$grid--border--color--light: $grey-80;
-$grid--border--color--dark: $grey-30;
-
-$switch--nub--bg--light: $grey-80;
-$switch--nub--bg--dark: $grey-20;
-
-$text--primary--color--light: $grey-30;
-$text--primary--color--dark: $grey-90;
-
-$text--secondary--color--light: $grey-40;
-$text--secondary--hover--light: $grey-30;
-$text--secondary--color--dark: $grey-40;
-$text--secondary--hover--dark: $grey-70;
-
-$icon--secondary--color--light: $grey-70;
-$icon--secondary--color--dark: $grey-40;
-$icon--secondary--hover--light: $grey-40;
-$icon--secondary--hover--dark: $grey-70;
-
-$text--tertiary--color--light: $grey-60;
-$text--tertiary--color--dark: $grey-60;
 
+// Colors -- Interface
 $blue: #275dc5;
 $red: #ff6161;
 $error: #d13a3a;
 
-// Colors: Elements
+// Colors -- Elements
-
 $wind-text-00: #023e28;
 $wind-text-10: #006a43;
 $wind-text-20: #1dc688;
@@ -131,6 +93,64 @@ $dark-bg-00: #d565fb55;
 $dark-bg-10: #d565fb;
 $dark-bg-20: #f2cdff;
 
+$page--bg--light: $grey-90;
+$page--bg--dark: $grey-10;
+
+$page--hover--light: $grey-90;
+$page--hover--dark: $grey-20;
+
+$page--element--bg--light: $grey-70;
+$page--element--bg--dark: $grey-30;
+
+$input--bg--light: $grey-100;
+$input--bg--light--hover: $grey-95;
+$input--bg--dark: $grey-20;
+$input--bg--dark--hover: $grey-15;
+
+$input--bound--bg--light: $grey-90;
+$input--bound--bg--light--hover: $grey-80;
+$input--bound--bg--dark: $grey-10;
+$input--bound--bg--dark--hover: $grey-15;
+
+$item--bg--light--hover: $grey-90;
+$item--bg--dark--hover: $grey-10;
+
+$grid--rep--hover--light: $grey-100;
+$grid--rep--hover--dark: $grey-00;
+
+$grid--border--color--light: $grey-80;
+$grid--border--color--dark: $grey-30;
+
+$switch--nub--bg--light: $grey-80;
+$switch--nub--bg--dark: $grey-20;
+
+$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--bg--dark: $purple-20;
+$extra--purple--card--bg--dark: $purple-40;
+$extra--purple--primary--dark: $purple-00;
+$extra--purple--secondary--dark: $purple-10;
+$extra--purple--text--dark: $purple-00;
+
+$text--primary--color--light: $grey-30;
+$text--primary--color--dark: $grey-90;
+
+$text--secondary--color--light: $grey-40;
+$text--secondary--hover--light: $grey-30;
+$text--secondary--color--dark: $grey-40;
+$text--secondary--hover--dark: $grey-70;
+
+$icon--secondary--color--light: $grey-70;
+$icon--secondary--color--dark: $grey-40;
+$icon--secondary--hover--light: $grey-40;
+$icon--secondary--hover--dark: $grey-70;
+
+$text--tertiary--color--light: $grey-60;
+$text--tertiary--color--dark: $grey-60;
+
 $normal: 400;
 $medium: 500;
 $bold: 600;