From a4fb3bfd19cd9f24c9cca89da959f76703579b11 Mon Sep 17 00:00:00 2001
From: "Nichols, Kieran" <kieran.nichols@tylertech.com>
Date: Wed, 25 Oct 2023 09:05:41 -0400
Subject: [PATCH] feat(theme): added `surface-inverse` and `on-surface-inverse`
 colors

---
 src/dev/pages/theme/theme.ts                          | 3 ++-
 src/lib/core/styles/tokens/theme/_color-emphasis.scss | 4 +++-
 src/lib/core/styles/tokens/theme/_tokens.surface.scss | 3 +++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/dev/pages/theme/theme.ts b/src/dev/pages/theme/theme.ts
index 21169f0d8..25c9dbe65 100644
--- 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
index 1551e5c56..e9bd4dda8 100644
--- 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
index 698696001..c25e7e94f 100644
--- 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),