feat(tokens): add/update color tokens

vmware-clarity · May 28, 2024 · 1ae4e02 · 1ae4e02
1 parent 5c8b522
commit 1ae4e02
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/projects/core/build/tokens.ts b/projects/core/build/tokens.ts
@@ -551,9 +551,13 @@ const aliases = {
       borderColor: token(color.construction[500]),
       background: {
         value: token(color.white),
-        hover: token(color.blue[50]),
-        active: token(color.blue[75]),
-        selected: token(color.blue[50]),
+        hover: token(color.construction[50]),
+        active: token(color.construction[100]),
+        selected: {
+          value: token(color.blue[75]),
+          hover: token(color.construction[100]),
+          active: token(color.construction[200]),
+        },
         disabled: token(color.white),
         highlight: token(color.blue[700]),
       },
@@ -613,6 +617,11 @@ const aliases = {
           shade: token(color.construction[300]),
         },
       },
+      backdrop: {
+        background: {
+          value: token('hsla(0, 0%, 100%, 0.6)'),
+        },
+      },
       borderColor: token(color.construction[200]),
     },
   },

diff --git a/projects/core/src/index.performance.ts b/projects/core/src/index.performance.ts
@@ -9,7 +9,7 @@ import { testBundleSize } from 'web-test-runner-performance/browser.js';
 describe('performance', () => {
   it(`should meet maximum individual css bundle size limits`, async () => {
     expect((await testBundleSize('@cds/core/global.min.css')).kb).toBeLessThan(9.0);
-    expect((await testBundleSize('@cds/core/styles/theme.dark.min.css')).kb).toBeLessThan(0.846);
+    expect((await testBundleSize('@cds/core/styles/theme.dark.min.css')).kb).toBeLessThan(0.882);
     expect((await testBundleSize('@cds/core/list/list.min.css')).kb).toBeLessThan(0.5);
 
     // contained in @cds/core/global.min.css

diff --git a/projects/core/src/styles/theme.dark.scss b/projects/core/src/styles/theme.dark.scss
@@ -37,6 +37,7 @@
   --cds-alias-typography-link-color-visited-hover: #{$cds-global-color-lavender-200};
 
   --cds-alias-object-app-background: #{$cds-global-color-construction-1000};
+  --cds-alias-object-container-backdrop-background: hsla(0, 0%, 0%, 0.6);
   --cds-alias-object-container-background: #{$cds-global-color-construction-900};
   --cds-alias-object-container-background-tint: #{$cds-global-color-construction-1000};
   --cds-alias-object-container-background-shade: #{$cds-global-color-construction-800};
@@ -57,9 +58,9 @@
   --cds-alias-object-interaction-color-selected: #{$cds-global-color-construction-200};
   --cds-alias-object-interaction-color-disabled: #{$cds-global-color-construction-600};
   --cds-alias-object-interaction-background: #{$cds-global-color-construction-1000};
-  --cds-alias-object-interaction-background-hover: #{$cds-global-color-construction-600};
-  --cds-alias-object-interaction-background-active: #{$cds-global-color-construction-800};
-  --cds-alias-object-interaction-background-selected: #{$cds-global-color-construction-700};
+  --cds-alias-object-interaction-background-hover: #{$cds-global-color-construction-800};
+  --cds-alias-object-interaction-background-active: #{$cds-global-color-construction-600};
+  --cds-alias-object-interaction-background-selected: #{$cds-global-color-blue-900};
   --cds-alias-object-interaction-background-disabled: #{$cds-global-color-construction-700};
   --cds-alias-object-interaction-background-highlight: #{$cds-global-color-blue-400};
   --cds-alias-object-interaction-border-color: #{$cds-global-color-construction-300};