🎨 Improve accessibility of themes

Author: Frontendland

README.md

@@ -149,7 +149,9 @@ The `setup` mixin can also accept the following options:
 | `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |
 | `includeTooltip` | `true` | Adds styles for using tooltips.
 | `includeScrollbarStyles` | `true` | Adds styles for scrollbars.
-| `includeBreakpoints` | `true` | Exposes breakpoint variables in CSS for JS. Used by components for responsiveness.
+| `includeBreakpoints` | `true` | Exposes breakpoint variables in CSS for JS. Used by components for responsiveness. |
+| `theme` | `dark` | Sets the default theme. Read more about available themes [here](https://webcoreui.dev/docs/themes). |
+| `themes` | `()` | Pass a map to enable multiple themes. Values can be arbitrary CSS selectors that actives the theme. |
 
 Default component styles can be changed by overriding the following CSS variables:
 

src/data.ts

@@ -120,12 +120,13 @@ export const menuLogo = {
 
 export const themes = {
     '#252525': 'dark',
-    '#FFF': 'light',
-    '#415a77': 'midnight',
-    '#d5bdaf': 'vintage',
+    '#DDD': 'light',
+    '#415A77': 'midnight',
     '#fCBA28': 'amber',
+    '#C9D4D9': 'nordic',
+    '#D5BDAF': 'vintage',
     '#9D2BD6': 'synthwave',
-    '#9A1F40': 'velvet'
+    '#3B9B3E': 'forest'
 }
 
 export const toggleThemes = {

src/scss/config.scss

@@ -1,6 +1,7 @@
 @forward 'webcore.config.scss';
 @forward './config/color-palette';
 @forward './config/css-values';
+@forward './config/functions.scss';
 @forward './config/typography';
 @forward './config/variables';
 @forward './config/layout';

src/scss/config/functions.scss

@@ -0,0 +1,41 @@
+@use 'sass:math';
+@use 'sass:color';
+
+@function _linear-channel($c) {
+    $c: math.div($c, 255);
+
+    @if $c <= 0.04045 {
+        @return math.div($c, 12.92);
+    }
+
+    @return math.pow(math.div($c + 0.055, 1.055), 2.4);
+}
+
+@function luminance($color) {
+    $r: _linear-channel(color.channel($color, 'red', $space: rgb));
+    $g: _linear-channel(color.channel($color, 'green', $space: rgb));
+    $b: _linear-channel(color.channel($color, 'blue', $space: rgb));
+
+    @return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
+}
+
+@function contrast($c1, $c2) {
+    $l1: luminance($c1);
+    $l2: luminance($c2);
+
+    @if $l1 < $l2 {
+        $tmp: $l1;
+        $l1: $l2;
+        $l2: $tmp;
+    }
+
+    @return math.div($l1 + 0.05, $l2 + 0.05);
+}
+
+@function wcag-required($level) {
+    @if $level == AAA {
+        @return 7;
+    }
+
+    @return 4.5;
+}

src/scss/config/mixins.scss

@@ -6,6 +6,7 @@
 @use 'webcore.config.scss' as *;
 @use './color-palette.scss' as *;
 @use './css-values.scss' as *;
+@use './functions.scss' as *;
 @use './layout.scss' as *;
 @use './typography.scss' as *;
 @use './variables.scss' as *;
@@ -406,3 +407,68 @@
         }
     }
 }
+
+@mixin validate-contrast($themeName, $tokens, $level, $print) {
+    $required: wcag-required($level);
+    $pairs: (
+        primary: (bg: primary-70, fg: primary),
+        secondary: (bg: primary-70, fg: primary-10),
+        muted: (bg: primary-70, fg: primary-20),
+        disabled: (bg: primary-70, fg: primary-30),
+        info: (bg: info, fg: info-fg),
+        success: (bg: success, fg: success-fg),
+        warning: (bg: warning, fg: warning-fg),
+        alert: (bg: alert, fg: alert-fg)
+    );
+
+    @each $name, $pair in $pairs {
+        $bg: map.get($tokens, map.get($pair, bg));
+        $fg: map.get($tokens, map.get($pair, fg));
+
+        $ratio: contrast($fg, $bg);
+
+        $logName: '#{$themeName} #{$name}';
+
+        @if not $print {
+            $logName: '#{map.get($pair, fg)} against #{map.get($pair, bg)} in theme "#{$themeName}"';
+        }
+
+        @if $ratio < $required {
+            @if $print {
+                contrast: '[#{$logName}] - FAILED: actual: #{$ratio}, required: #{$required} (fg: #{$fg}, bg: #{$bg})';
+            } @else {
+                @warn '#{$logName} is below WCAG #{$level} (actual: #{$ratio}, required: #{$required})';
+            }
+        } @else {
+            @if $print {
+                contrast: '[#{$logName}] - PASSED';
+            }
+        }
+    }
+}
+
+@mixin validate-tokens($referenceMap, $themeName, $tokens) {
+    $referenceKeys: map.keys($referenceMap);
+    $themeKeys: map.keys($tokens);
+
+    @each $key in $referenceKeys {
+        @if not list.index($themeKeys, $key) {
+            @warn 'Theme `#{$themeName}` is missing key `#{$key}`.';
+        }
+    }
+
+    @each $key in $themeKeys {
+        @if not list.index($referenceKeys, $key) {
+            @warn 'Theme `#{$themeName}` has unknown key `#{$key}`.';
+        }
+    }
+}
+
+@mixin validate-theme($themes, $selectedTheme, $level, $print: false) {
+    $referenceName: list.nth(map.keys($themes), 1);
+    $referenceMap: map.get($themes, $referenceName);
+    $tokens: map.get($themes, $selectedTheme);
+
+    @include validate-contrast($selectedTheme, $tokens, $level, $print);
+    @include validate-tokens($referenceMap, $selectedTheme, $tokens);
+}