fix(tokens): global and alias colors (#333)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] clarity.design website / infrastructure changes
- [ ] Other... Please describe:

## What is the current behavior?

Light Theme:
- Token `--cds-alias-utility-gray` is using
`--cds-global-contruction-500`.

Issue Number: CDE-2297, CDE-2312

## What is the new behavior?

Light Theme:
- Token `--cds-alias-utility-gray` is using
`--cds-global-contruction-600`.

Dark Theme:
- Reorder tokens by type `utility`, `viz`, `status`, `object` and
`typography`
- Token `--cds-alias-object-container-background-dark` added with
`--cds-global-color-construction-700` value.
- Token `--cds-alias-status-alt` added with
`--cds-global-color-violet-700` value.
- Token `--cds-alias-status-alt-tint` added with
`--cds-global-color-violet-600` value.
- Token `--cds-alias-status-alt-shade` added with
`--cds-global-color-violet-900` value.

Other:
- Token `--cds-global-color-blue-25` added with `hsl(198, 100%, 96%)`
value.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

---------

Co-authored-by: Daniel Tsanev <tsanevd@vmware.com>

projects/core/build/tokens.ts

@@ -81,6 +81,7 @@ const color = {
     1000: token([93, 80, 12]),
   },
   blue: {
+    25: token([198, 100, 96]),
     50: token([198, 100, 95]),
     75: token([198, 100, 94]),
     100: token([198, 100, 87]),
@@ -353,8 +354,8 @@ const generateTypographyTokens = () => {
       200: token(color.construction[600]), // placeholders
       300: token(color.construction[800]), // labels
       400: token(color.construction[900]), // headings
-      500: token(color.black), // content
       450: token(color.construction[1000]),
+      500: token(color.black), // content
     },
     fontWeight: {
       // Clarity City is limited to a minimum weight of 300 and max weight of 600, tokens provide hooks for customization
@@ -680,7 +681,7 @@ const aliases = {
   },
   utility: {
     gray: {
-      value: token(color.construction[500]),
+      value: token(color.construction[600]),
       tint: token(color.construction[50]),
       shade: token(color.construction[700]),
     },

projects/core/src/index.performance.ts

@@ -8,14 +8,14 @@ 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.4);
-    expect((await testBundleSize('@cds/core/styles/theme.dark.min.css')).kb).toBeLessThan(1.27);
+    expect((await testBundleSize('@cds/core/global.min.css')).kb).toBeLessThan(9.5);
+    expect((await testBundleSize('@cds/core/styles/theme.dark.min.css')).kb).toBeLessThan(1.29);
     expect((await testBundleSize('@cds/core/list/list.min.css')).kb).toBeLessThan(0.4);
 
     // contained in @cds/core/global.min.css
     expect((await testBundleSize('@cds/core/styles/module.layout.min.css')).kb).toBeLessThan(4.6);
     expect((await testBundleSize('@cds/core/styles/module.reset.min.css')).kb).toBeLessThan(0.3);
-    expect((await testBundleSize('@cds/core/styles/module.tokens.min.css')).kb).toBeLessThan(3.66);
+    expect((await testBundleSize('@cds/core/styles/module.tokens.min.css')).kb).toBeLessThan(3.7);
     expect((await testBundleSize('@cds/core/styles/module.typography.min.css')).kb).toBeLessThan(1.62);
   });
 

projects/core/src/styles/theme.dark.scss

@@ -7,6 +7,7 @@
 @import '../../dist/lib/tokens/tokens';
 
 [cds-theme~='dark'] {
+  // global typography (deprecated)
   --cds-global-typography-color-500: #{$cds-global-color-white};
   --cds-global-typography-color-400: #{$cds-global-color-construction-100};
   --cds-global-typography-color-300: #{$cds-global-color-construction-200};
@@ -26,21 +27,33 @@
   --cds-global-typography-neutral-hover: #{$cds-global-color-construction-200};
   --cds-global-typography-link-on-colorbg: #{$cds-global-color-construction-1000};
 
-  --cds-alias-typography-color-500: #{$cds-global-color-white};
-  --cds-alias-typography-color-400: #{$cds-global-color-construction-100};
-  --cds-alias-typography-color-300: #{$cds-global-color-construction-200};
-  --cds-alias-typography-color-200: #{$cds-global-color-construction-300};
+  // typography
   --cds-alias-typography-color-100: #{$cds-global-color-black};
+  --cds-alias-typography-color-200: #{$cds-global-color-construction-300};
+  --cds-alias-typography-color-300: #{$cds-global-color-construction-200};
+  --cds-alias-typography-color-400: #{$cds-global-color-construction-100};
+  --cds-alias-typography-color-450: #{$cds-global-color-construction-50};
+  --cds-alias-typography-color-500: #{$cds-global-color-white};
+  --cds-alias-typography-disabled-button: #{$cds-global-color-construction-900};
+  --cds-alias-typography-disabled: #{$cds-global-color-construction-500};
+  --cds-alias-typography-info-hover: #{$cds-global-color-blue-200};
+  --cds-alias-typography-success-hover: #{$cds-global-color-green-400};
+  --cds-alias-typography-warning-hover: #{$cds-global-color-yellow-600};
+  --cds-alias-typography-danger-hover: #{$cds-global-color-red-400};
+  --cds-alias-typography-neutral-hover: #{$cds-global-color-construction-200};
+  --cds-alias-typography-link-on-colorbg: #{$cds-global-color-construction-1000};
   --cds-alias-typography-link-color: #{$cds-global-color-blue-400};
   --cds-alias-typography-link-color-hover: #{$cds-global-color-blue-200};
   --cds-alias-typography-link-color-visited: #{$cds-global-color-lavender-300};
   --cds-alias-typography-link-color-visited-hover: #{$cds-global-color-lavender-200};
 
+  // object
   --cds-alias-object-app-background: #{$cds-global-color-construction-1000};
   --cds-alias-object-container-backdrop-background: #{$cds-alias-object-opacity-300};
   --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};
+  --cds-alias-object-container-background-dark: #{$cds-global-color-construction-700};
   --cds-alias-object-container-background-inverse: #{$cds-global-color-construction-200};
   --cds-alias-object-container-background-inverse-tint: #{$cds-global-color-construction-100};
   --cds-alias-object-container-background-inverse-shade: #{$cds-global-color-construction-300};
@@ -63,14 +76,14 @@
   --cds-alias-object-interaction-background-selected: #{$cds-global-color-blue-900};
   --cds-alias-object-interaction-background-selected-active: #{$cds-global-color-construction-600};
   --cds-alias-object-interaction-background-selected-hover: #{$cds-global-color-construction-700};
+  --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-vertical-navigation-background-color: #{$cds-global-color-construction-1100};
   --cds-alias-object-interaction-vertical-navigation-background-hover: #{$cds-global-color-construction-600};
   --cds-alias-object-interaction-vertical-navigation-background-active: #{$cds-global-color-construction-800};
   --cds-alias-object-interaction-vertical-navigation-background-selected: #{$cds-global-color-construction-700};
   --cds-alias-object-interaction-vertical-navigation-background-selected-hover: #{$cds-global-color-construction-800};
   --cds-alias-object-interaction-vertical-navigation-background-selected-active: #{$cds-global-color-construction-600};
-  --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};
   --cds-alias-object-interaction-info-hover: #{$cds-global-color-blue-300};
   --cds-alias-object-interaction-info-click: #{$cds-global-color-blue-500};
@@ -89,8 +102,8 @@
   --cds-alias-object-interaction-neutral-secondary-hover: #{$cds-global-color-construction-800};
   --cds-alias-object-interaction-inverse-hover: #{$cds-global-color-construction-700};
   --cds-alias-object-interaction-inverse-click: #{$cds-global-color-construction-800};
-  --cds-alias-object-container-background-dark: #{$cds-global-color-construction-700};
 
+  // status
   --cds-alias-status-tint: transparent;
   --cds-alias-status-info: #{$cds-global-color-blue-400};
   --cds-alias-status-info-tint: #{$cds-global-color-blue-800};
@@ -106,23 +119,17 @@
   --cds-alias-status-danger-tint: #{$cds-global-color-red-800};
   --cds-alias-status-danger-shade: #{$cds-global-color-red-600};
   --cds-alias-status-danger-dark: #{$cds-global-color-red-900};
+  --cds-alias-status-alt: #{$cds-global-color-violet-700};
+  --cds-alias-status-alt-tint: #{$cds-global-color-violet-600};
+  --cds-alias-status-alt-shade: #{$cds-global-color-violet-900};
   --cds-alias-status-neutral: #{$cds-global-color-construction-300};
   --cds-alias-status-neutral-tint: #{$cds-global-color-construction-700};
   --cds-alias-status-neutral-shade: #{$cds-global-color-construction-400};
   --cds-alias-status-disabled: #{$cds-global-color-construction-600};
   --cds-alias-status-disabled-tint: #{$cds-global-color-construction-700};
   --cds-alias-status-disabled-shade: #{$cds-global-color-construction-500};
 
-  --cds-alias-typography-color-450: #{$cds-global-color-construction-50};
-  --cds-alias-typography-disabled-button: #{$cds-global-color-construction-900};
-  --cds-alias-typography-disabled: #{$cds-global-color-construction-500};
-  --cds-alias-typography-info-hover: #{$cds-global-color-blue-200};
-  --cds-alias-typography-success-hover: #{$cds-global-color-green-400};
-  --cds-alias-typography-warning-hover: #{$cds-global-color-yellow-600};
-  --cds-alias-typography-danger-hover: #{$cds-global-color-red-400};
-  --cds-alias-typography-neutral-hover: #{$cds-global-color-construction-200};
-  --cds-alias-typography-link-on-colorbg: #{$cds-global-color-construction-1000};
-
+  //utility
   --cds-alias-utility-gray: #{$cds-global-color-construction-300};
   --cds-alias-utility-gray-tint: #{$cds-global-color-construction-1000};
   --cds-alias-utility-gray-shade: #{$cds-global-color-construction-200};
@@ -151,6 +158,7 @@
   --cds-alias-utility-violet-tint: #{$cds-global-color-violet-1000};
   --cds-alias-utility-violet-shade: #{$cds-global-color-violet-200};
 
+  // viz
   --cds-alias-viz-border: #{$cds-global-color-cool-gray-50};
   --cds-alias-viz-general-1-blue: #{$cds-global-color-blue-400};
   --cds-alias-viz-general-2-violet: #{$cds-global-color-violet-400};