feat(tokens): add new tokens, update app background for system (vmwar…

…e-clarity#265)

Adds the new tokens for the system. Exports typography tokens as an
alias and a global (exact mapping, will remove global in the future).
Only change to applications is a minor shift in color for the
--cds-alias-object-app-background color for accessibility contrast ratio
reasons.

projects/core/build/tokens.ts

@@ -5,6 +5,7 @@
  */
 
 import { token, CdsTheme } from './token-utils';
+import { cloneDeep } from 'lodash';
 
 // internal optimization so tokens can refer to pre-calculated values rather than generating/duplicating the same calc over many tokens
 const internal = {
@@ -315,6 +316,7 @@ const color = {
     1000: token([41, 22, 16]),
   },
   construction: {
+    25: token([198, 33, 99]),
     50: token([198, 36, 96]),
     100: token([198, 20, 91]),
     200: token([198, 14, 82]),
@@ -350,6 +352,7 @@ const typography = {
     300: token(color.construction[800]), // labels
     400: token(color.construction[900]), // headings
     500: token(color.black), // content
+    450: token(color.construction[1000]),
   },
   fontWeight: {
     // Clarity City is limited to a minimum weight of 300 and max weight of 600, tokens provide hooks for customization
@@ -387,6 +390,9 @@ const typography = {
         hover: token(color.lavender[700]),
       },
     },
+    onColorbg: {
+      value: token(color.black),
+    },
   },
   body: {
     fontSize: token(14, { scale: internal.scale3 }),
@@ -455,6 +461,25 @@ const typography = {
     letterSpacing: token('0.05em'),
     fontWeight: token('500'),
   },
+  infoHover: {
+    value: token(color.blue[800]),
+  },
+  successHover: {
+    value: token(color.green[800]),
+  },
+  warningHover: {
+    value: token(color.ochre[900]),
+  },
+  dangerHover: {
+    value: token(color.red[800]),
+  },
+  neutralHover: {
+    value: token(color.construction[700]),
+  },
+  disabled: {
+    value: token(color.construction[400]),
+    button: token(color.construction[500]),
+  },
 };
 
 const animation = {
@@ -536,7 +561,7 @@ const aliases = {
       },
     },
     app: {
-      background: token(color.gray[50]),
+      background: token(color.construction[25]),
     },
     overlay: {
       background: token(color.white),
@@ -547,9 +572,39 @@ const aliases = {
         value: token(color.white),
         tint: token(color.construction[50]),
         shade: token(color.construction[100]),
+        dark: token(color.construction[200]),
       },
       borderColor: token(color.construction[200]),
     },
+    info: {
+      hover: token(color.blue[800]),
+      click: token(color.blue[900]),
+      secondaryHover: token(color.blue[50]),
+    },
+    success: {
+      hover: token(color.green[800]),
+      click: token(color.green[900]),
+      secondaryHover: token(color.green[50]),
+    },
+    warning: {
+      hover: token(color.ochre[600]),
+      click: token(color.ochre[700]),
+      secondaryHover: token(color.ochre[50]),
+    },
+    danger: {
+      hover: token(color.red[800]),
+      click: token(color.red[900]),
+      secondaryHover: token(color.red[50]),
+    },
+    neutral: {
+      hover: token(color.construction[700]),
+      click: token(color.construction[800]),
+      secondaryHover: token(color.construction[50]),
+    },
+    inverse: {
+      hover: token(color.construction[600]),
+      click: token(color.construction[800]),
+    },
   },
   status: {
     info: {
@@ -590,6 +645,54 @@ const aliases = {
       shade: token(color.violet[900]),
     },
   },
+  utility: {
+    gray: {
+      value: token(color.construction[500]),
+      tint: token(color.construction[50]),
+      shade: token(color.construction[700]),
+    },
+    blue: {
+      value: token(color.blue[700]),
+      tint: token(color.blue[50]),
+      shade: token(color.blue[800]),
+    },
+    lightBlue: {
+      value: token(color.blue[300]),
+      tint: token(color.blue[50]),
+      shade: token(color.blue[600]),
+    },
+    darkBlue: {
+      value: token(color.azure[800]),
+      tint: token(color.azure[50]),
+      shade: token(color.azure[1000]),
+    },
+    green: {
+      value: token(color.green[700]),
+      tint: token(color.green[50]),
+      shade: token(color.green[800]),
+    },
+    yellow: {
+      value: token(color.ochre[500]),
+      tint: token(color.ochre[100]),
+      shade: token(color.ochre[700]),
+    },
+    red: {
+      value: token(color.red[700]),
+      tint: token(color.red[50]),
+      shade: token(color.red[800]),
+    },
+    tangerine: {
+      value: token(color.tangerine[400]),
+      tint: token(color.tangerine[50]),
+      shade: token(color.tangerine[600]),
+    },
+    violet: {
+      value: token(color.violet[600]),
+      tint: token(color.violet[50]),
+      shade: token(color.violet[800]),
+    },
+  },
+  typography: cloneDeep(typography), // Typography will move from -global to -alias in the future.
 };
 
 export const baseTheme: CdsTheme = {

projects/core/package.json

@@ -74,6 +74,7 @@
     "jasmine": "4.0.2",
     "lit": "^2.1.3",
     "lit-analyzer": "1.2.1",
+    "lodash": "^4.17.21",
     "modern-normalize": "1.1.0",
     "playwright": "1.18.0",
     "postcss": "8.4.5",
@@ -91,9 +92,9 @@
     "sass": "1.48.0",
     "stylelint-no-px": "1.0.1",
     "terser": "5.10.0",
-    "tslib": "^2.3.1",
     "ts-lit-plugin": "1.2.1",
     "ts-node": "10.4.0",
+    "tslib": "^2.3.1",
     "typescript": "4.5.4",
     "web-test-runner-jasmine": "^0.0.1",
     "web-test-runner-performance": "^0.1.4",

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(8.6);
-    expect((await testBundleSize('@cds/core/styles/theme.dark.min.css')).kb).toBeLessThan(0.5);
+    expect((await testBundleSize('@cds/core/global.min.css')).kb).toBeLessThan(8.716);
+    expect((await testBundleSize('@cds/core/styles/theme.dark.min.css')).kb).toBeLessThan(0.79);
     expect((await testBundleSize('@cds/core/list/list.min.css')).kb).toBeLessThan(0.5);
 
     // 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.5);
-    expect((await testBundleSize('@cds/core/styles/module.tokens.min.css')).kb).toBeLessThan(2.5);
+    expect((await testBundleSize('@cds/core/styles/module.tokens.min.css')).kb).toBeLessThan(3.042);
     expect((await testBundleSize('@cds/core/styles/module.typography.min.css')).kb).toBeLessThan(1.616);
   });
 

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

@@ -41,6 +41,24 @@
   --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};
+  --cds-alias-object-interaction-info-secondary-hover: #{$cds-global-color-blue-1000};
+  --cds-alias-object-interaction-success-hover: #{$cds-global-color-green-400};
+  --cds-alias-object-interaction-success-click: #{$cds-global-color-green-600};
+  --cds-alias-object-interaction-success-secondary-hover: #{$cds-global-color-green-1000};
+  --cds-alias-object-interaction-warning-hover: #{$cds-global-color-yellow-300};
+  --cds-alias-object-interaction-warning-click: #{$cds-global-color-yellow-500};
+  --cds-alias-object-interaction-warning-secondary-hover: #{$cds-global-color-yellow-1000};
+  --cds-alias-object-interaction-danger-hover: #{$cds-global-color-red-400};
+  --cds-alias-object-interaction-danger-click: #{$cds-global-color-red-600};
+  --cds-alias-object-interaction-danger-secondary-hover: #{$cds-global-color-red-1000};
+  --cds-alias-object-interaction-neutral-hover: #{$cds-global-color-construction-200};
+  --cds-alias-object-interaction-neutral-click: #{$cds-global-color-construction-400};
+  --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-800};
 
   --cds-alias-status-tint: transparent;
   --cds-alias-status-info: #{$cds-global-color-blue-400};
@@ -63,4 +81,42 @@
   --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};
+
+  --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};
+  --cds-alias-utility-blue: #{$cds-global-color-blue-300};
+  --cds-alias-utility-blue-tint: #{$cds-global-color-blue-1000};
+  --cds-alias-utility-blue-shade: #{$cds-global-color-blue-200};
+  --cds-alias-utility-light-blue: #{$cds-global-color-blue-700};
+  --cds-alias-utility-light-blue-tint: #{$cds-global-color-blue-1000};
+  --cds-alias-utility-light-blue-shade: #{$cds-global-color-blue-500};
+  --cds-alias-utility-dark-blue: #{$cds-global-color-azure-200};
+  --cds-alias-utility-dark-blue-tint: #{$cds-global-color-azure-1000};
+  --cds-alias-utility-dark-blue-shade: #{$cds-global-color-azure-50};
+  --cds-alias-utility-green: #{$cds-global-color-green-400};
+  --cds-alias-utility-green-tint: #{$cds-global-color-green-1000};
+  --cds-alias-utility-green-shade: #{$cds-global-color-green-200};
+  --cds-alias-utility-yellow: #{$cds-global-color-ochre-400};
+  --cds-alias-utility-yellow-tint: #{$cds-global-color-ochre-900};
+  --cds-alias-utility-yellow-shade: #{$cds-global-color-ochre-300};
+  --cds-alias-utility-red: #{$cds-global-color-red-300};
+  --cds-alias-utility-red-tint: #{$cds-global-color-red-1000};
+  --cds-alias-utility-red-shade: #{$cds-global-color-red-200};
+  --cds-alias-utility-tangerine: #{$cds-global-color-tangerine-600};
+  --cds-alias-utility-tangerine-tint: #{$cds-global-color-tangerine-1000};
+  --cds-alias-utility-tangerine-shade: #{$cds-global-color-tangerine-400};
+  --cds-alias-utility-violet: #{$cds-global-color-violet-400};
+  --cds-alias-utility-violet-tint: #{$cds-global-color-violet-1000};
+  --cds-alias-utility-violet-shade: #{$cds-global-color-violet-200};
 }