darkmode color variable update

src/assets/stylesheets/utilities/_utilities.appearance.scss

@@ -14,6 +14,7 @@
 
   // White
   --color-white: #{hex-var($color-white)};
+  --color-always-white: #{hex-var($color-white)};
 
   // Bases
   --color-base-blue-normal: #{hex-var($color-base-blue-normal)};
@@ -49,25 +50,20 @@
 
   &--dark {
     // Black
-    --color-black: #{hex-var(invert($color-black))};
+    --color-black: #{hex-var($color-gray-100)};
 
     // White
-    --color-white: #{hex-var(invert($color-white))};
+    --color-white: #{hex-var($color-gray-950)};
+    --color-always-white: #{hex-var($color-white)};
 
     // Bases
-    --color-base-blue-normal: #{hex-var(lighten($color-base-blue-normal, 4%))};
+    --color-base-blue-normal: #{hex-var($color-base-indigo)};
     --color-base-blue-dark: #{hex-var(lighten($color-base-blue-dark, 6%))};
     --color-base-blue-link: #{hex-var(lighten($color-base-blue-link, 4%))};
     --color-base-green-normal: #{hex-var(lighten($color-base-green-normal, 18%))};
-    --color-base-grey-dark: #{hex-var(
-        lighten(invert($color-base-grey-dark), 2%)
-      )};
-    --color-base-grey-light: #{hex-var(
-        lighten(invert($color-base-grey-light), 2%)
-      )};
-    --color-base-grey-normal: #{hex-var(
-        lighten(invert($color-base-grey-normal), 4%)
-      )};
+    --color-base-grey-dark: #{hex-var($color-gray-100)};
+    --color-base-grey-light: #{hex-var($color-gray-900)};
+    --color-base-grey-normal: #{hex-var($color-gray-400)};
     --color-base-orange-light: #{hex-var(lighten($color-base-orange-light, 6%))};
     --color-base-orange-normal: #{hex-var(
         lighten($color-base-orange-normal, 2%)
@@ -82,20 +78,18 @@
     --color-border-primary: #{hex-var(
         lighten(invert($color-border-primary), 8%)
       )};
-    --color-border-secondary: #{hex-var(
-        lighten(invert($color-border-secondary), 4%)
-      )};
+    --color-border-secondary: #{hex-var($color-gray-800)};
     --color-border-tertiary: #{hex-var(
         lighten(invert($color-border-tertiary), 4%)
       )};
 
     // Backgrounds
-    --color-background-primary: #{hex-var(invert($color-background-primary))};
-    --color-background-secondary: #{hex-var(invert($color-background-secondary))};
+    --color-background-primary: #{hex-var($color-gray-900)};
+    --color-background-secondary: #{hex-var($color-gray-900)};
 
     // Texts
-    --color-text-primary: #{hex-var(invert($color-text-primary))};
-    --color-text-secondary: #{hex-var(invert($color-text-secondary))};
+    --color-text-primary: #{hex-var($color-gray-100)};
+    --color-text-secondary: #{hex-var($color-gray-400)};
     --color-text-tertiary: #{hex-var(invert($color-text-tertiary))};
     --color-text-reverse: #{hex-var(invert($color-text-reverse))};
   }

src/assets/stylesheets/variables/_variables.colors.scss

@@ -52,3 +52,17 @@ $color-text-primary: #000000;
 $color-text-secondary: #828993;
 $color-text-tertiary: #999fa7;
 $color-text-reverse: #ffffff;
+
+// Dark mode
+$color-gray-950: #010103;
+$color-gray-900: #090b0f;
+$color-gray-800: #13181f;
+$color-gray-700: #364152;
+$color-gray-600: #4B5565;
+$color-gray-500: #697586;
+$color-gray-400: #9AA4B2;
+$color-gray-300: #CDD5DF;
+$color-gray-200: #E3E8EF;
+$color-gray-100: #EEF2F6;
+
+$color-base-indigo: #3458AD;

src/components/base/BasePresence.vue

@@ -136,7 +136,7 @@ $availabilities: (
       }
 
       &#{$c}--active {
-        background-color: rgb(var(--color-white));
+        background-color: rgb(var(--color-always-white));
       }
     }
   }

src/components/form/FormField.vue

@@ -311,7 +311,7 @@ $c: ".c-form-field";
 
   #{$c}__inner {
     background-color: rgb(var(--color-white));
-    border: 1px solid rgba(var(--color-black), 0.1);
+    border: 1px solid rgba(var(--color-border-secondary));
     outline: 0 none;
     color: rgb(var(--color-text-primary));
     font-family: inherit;

src/components/list/ListButton.vue

@@ -267,7 +267,7 @@ $c: ".c-list-button";
     }
 
     #{$c}__label {
-      color: rgb(var(--color-white));
+      color: rgb(var(--color-always-white));
     }
   }
 

src/components/list/ListDisclosure.vue

@@ -180,7 +180,7 @@ $c: ".c-list-disclosure";
 
   &--separated {
     #{$c}__header {
-      border-block-end: 1px solid rgba(var(--color-base-grey-normal), 0.2);
+      border-block-end: 1px solid rgba(var(--color-border-secondary));
       padding-block-end: 4px;
     }
   }