feat(theme): added surface-inverse and on-surface-inverse colors

tyler-technologies-oss · Oct 25, 2023 · a4fb3bf · a4fb3bf
1 parent 9a1f4e0
commit a4fb3bf
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/dev/pages/theme/theme.ts b/src/dev/pages/theme/theme.ts
@@ -18,7 +18,8 @@ const SWATCH_GROUPS: ISwatchGroup[] = [
     swatches: [
       { text: 'Surface', background: 'surface' },
       { text: 'Surface dim (background)', background: 'surface-dim' },
-      { text: 'Surface bright', background: 'surface-bright' }
+      { text: 'Surface bright', background: 'surface-bright' },
+      { text: 'Surface inverse', background: 'surface-inverse', foreground: 'on-surface-inverse' }
     ]
   },
   {

diff --git a/src/lib/core/styles/tokens/theme/_color-emphasis.scss b/src/lib/core/styles/tokens/theme/_color-emphasis.scss
@@ -10,11 +10,13 @@ $color-emphasis-scale: (
   '060': 60%,
   '065': 65%,
   '070': 70%,
-  '087': 87%,
+  '080': 80%,
+  '087': 87%
 );
 
 $color-emphasis: (
   highest: map.get($color-emphasis-scale, '087'),
+  inverse: map.get($color-emphasis-scale, '080'),
   higher: map.get($color-emphasis-scale, '070'),
   high: map.get($color-emphasis-scale, '065'),
   medium-high: map.get($color-emphasis-scale, '060'),

diff --git a/src/lib/core/styles/tokens/theme/_tokens.surface.scss b/src/lib/core/styles/tokens/theme/_tokens.surface.scss
@@ -15,6 +15,7 @@
   $surface: map.get($theme, surface);
   $on-surface: theme-utils.contrast($surface);
   $surface-tone: color-utils.tone($surface);
+  $surface-inverse: theme-utils.hexify($on-surface, $surface, color-emphasis.value(inverse));
 
   $surface-container: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lower));
   $surface-container-low: theme-utils.hexify($on-surface, $surface, color-emphasis.value(lowest));
@@ -23,6 +24,7 @@
 
   @return (
     surface: $surface,
+    surface-inverse: $surface-inverse,
     surface-container: $surface-container,
     surface-container-low: $surface-container-low,
     surface-container-medium: $surface-container-medium,
@@ -31,6 +33,7 @@
     surface-bright: map.get($theme, surface-bright),
     surface-bright-shadow: map.get($theme, surface-bright-shadow),
     on-surface: $on-surface,
+    on-surface-inverse: theme-utils.contrast($surface-inverse),
     on-surface-container: theme-utils.contrast($surface-container),
     on-surface-container-low: theme-utils.contrast($surface-container-low),
     on-surface-container-medium: theme-utils.contrast($surface-container-medium),