Merge pull request #2818 from SUI-Components/theme-a11y-colors

feat(utils/sui-theme): prepare the a11y light dark mode

utils/sui-theme/src/_default.scss

@@ -1,3 +1,15 @@
 @mixin p {
   margin: 0 0 $m-v;
 }
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color-scheme: light;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color-scheme: dark;
+  }
+}

utils/sui-theme/src/settings/_color.scss

@@ -5,6 +5,34 @@
 
 @import '../utils/colors';
 
+:root [data-theme-mode='light'] {
+  --c-base: #ffffff;
+  --c-base-inverse: #000000;
+
+  --c-primary: #0052ff;
+  --c-accent: #e80262;
+
+  --c-gray: color-mix(in srgb, var(--c-base-inverse) 80%, var(--c-base));
+
+  --c-success: #008537;
+  --c-alert: #bd5b00;
+  --c-error: #e72326;
+}
+
+:root [data-theme-mode='dark'] {
+  --c-base: #000000;
+  --c-base-inverse: #ffffff;
+
+  --c-primary: #2469ff;
+  --c-accent: #e80262;
+
+  --c-gray: color-mix(in srgb, var(--c-base-inverse) 80%, var(--c-base));
+
+  --c-success: #008a39;
+  --c-alert: #bd5b00;
+  --c-error: #e72326;
+}
+
 // Shade step {color}-light or {color}-dark variation
 $c-dark-step: -2 !default;
 $c-light-step: 2 !default;
@@ -17,7 +45,7 @@ $c-light-step: 2 !default;
 $c-system: #000000 !default;
 
 // Primary color
-$c-primary: #2b91c1 !default;
+$c-primary: var(--c-primary, #2b91c1) !default;
 
 // Old primary color gradients, keeping them for retro compatibility
 $c-primary-light: color-variation($c-primary, $c-light-step) !default;
@@ -37,8 +65,8 @@ $c-primary-dark-3: color-variation($c-primary, -3) !default;
 $c-primary-dark-4: color-variation($c-primary, -4) !default;
 
 // Secondary/Accent color
-$c-accent: #d57c1b !default;
-$c-secondary: #d57c1b !default;
+$c-accent: var(--c-accent, #d57c1b) !default;
+$c-secondary: var(--c-accent, #d57c1b) !default;
 
 // Old Secondary/Accent color gradients, keeping them for retro compatibility
 $c-accent-light: color-variation($c-accent, $c-light-step) !default;
@@ -69,7 +97,7 @@ $c-secondary-dark-3: color-variation($c-secondary, -3) !default;
 $c-secondary-dark-4: color-variation($c-secondary, -4) !default;
 
 // Gray color
-$c-gray: #777777 !default;
+$c-gray: var(--c-gray, #777777) !default;
 
 // Old Gray color gradients, keeping them for retro compatibility
 $c-gray-light: color-variation($c-gray, $c-light-step) !default;
@@ -90,7 +118,7 @@ $c-gray-dark-3: color-variation($c-gray, -3) !default;
 $c-gray-dark-4: color-variation($c-gray, -4) !default;
 
 // Success color
-$c-success: #00a544 !default;
+$c-success: var(--c-success, #00a544) !default;
 
 // Old Success color gradients, keeping them for retro compatibility
 $c-success-light: color-variation($c-success, $c-light-step) !default;
@@ -110,7 +138,7 @@ $c-success-dark-3: color-variation($c-success, -3) !default;
 $c-success-dark-4: color-variation($c-success, -4) !default;
 
 // Alert color
-$c-alert: #ff6335 !default;
+$c-alert: var(--c-alert, #ff6335) !default;
 
 // Old Alert color gradients, keeping them for retro compatibility
 $c-alert-light: color-variation($c-alert, $c-light-step) !default;
@@ -130,7 +158,7 @@ $c-alert-dark-3: color-variation($c-alert, -3) !default;
 $c-alert-dark-4: color-variation($c-alert, -4) !default;
 
 // Error color
-$c-error: #e93e40 !default;
+$c-error: var(--c-error, #e93e40) !default;
 
 // Old Error Alert color gradients, keeping them for retro compatibility
 $c-error-light: color-variation($c-error, $c-light-step) !default;
@@ -154,8 +182,8 @@ $c-error-dark-4: color-variation($c-error, -4) !default;
 ///////////////////////////////////////////////////////////////////////////////
 
 // Absolute colors / common colors to avoid linting alerts on hardcoded values
-$c-white: #ffffff !default;
-$c-black: #000000 !default;
+$c-white: var(--c-base, #ffffff) !default;
+$c-black: var(--c-base-inverse, #000000) !default;
 
 // Text colors
 $c-text-base: $c-gray-dark !default;

utils/sui-theme/src/utils/_colors.scss

@@ -12,8 +12,8 @@
 // $c-primary-dark: color-variation($c-primary, -2) -> 2 steps darker
 // $c-primary-darkest: color-variation($c-primary, -4) -> 4 steps darker
 
-$color-variation-dark: black !default;
-$color-variation-light: white !default;
+$color-variation-light: var(--c-base, white) !default;
+$color-variation-dark: var(--c-base-inverse, black) !default;
 
 $color-lighten-steps: 25, 50, 75, 90, 95 !default;
 $color-darken-steps: 20, 35, 55, 75 !default;