feat(cli,theme): don't output underlying primitives for semantic colo…

…r variables (#2641)
digdir · Oct 24, 2024 · a452813 · a452813
1 parent df0da9a
commit a452813
Show file tree

Hide file tree

Showing 28 changed files with 3,918 additions and 6,276 deletions.
diff --git a/.changeset/slow-news-act.md b/.changeset/slow-news-act.md
@@ -0,0 +1,26 @@
+---
+"@digdir/designsystemet-theme": minor
+"@digdir/designsystemet": minor
+---
+
+CSS variables: `--ds-color-*-{1,2,...,13,contrast-1,contrast-2}`, which were generated from the `primitives` layer of design tokens, have been removed since they are always 1-to-1 with the semantic layer. Use the equivalent variables from the semantic layer instead
+
+Example, for the `neutral` scale:
+```css
+  var(--ds-color-neutral-background-default); /* instead of: var(--ds-color-neutral-1) */
+  var(--ds-color-neutral-background-subtle);  /* instead of: var(--ds-color-neutral-2) */
+  var(--ds-color-neutral-surface-default);    /* instead of: var(--ds-color-neutral-3) */
+  var(--ds-color-neutral-surface-hover);      /* instead of: var(--ds-color-neutral-4) */
+  var(--ds-color-neutral-surface-active);     /* instead of: var(--ds-color-neutral-5) */
+  var(--ds-color-neutral-border-subtle);      /* instead of: var(--ds-color-neutral-6) */
+  var(--ds-color-neutral-border-default);     /* instead of: var(--ds-color-neutral-7) */
+  var(--ds-color-neutral-border-strong);      /* instead of: var(--ds-color-neutral-8) */
+  var(--ds-color-neutral-base-default);       /* instead of: var(--ds-color-neutral-9) */
+  var(--ds-color-neutral-base-hover);         /* instead of: var(--ds-color-neutral-10) */
+  var(--ds-color-neutral-base-active);        /* instead of: var(--ds-color-neutral-11) */
+  var(--ds-color-neutral-text-subtle);        /* instead of: var(--ds-color-neutral-12) */
+  var(--ds-color-neutral-text-default);       /* instead of: var(--ds-color-neutral-13) */
+  var(--ds-color-neutral-contrast-default);   /* instead of: var(--ds-color-neutral-contrast-1) */
+  var(--ds-color-neutral-contrast-subtle);    /* instead of: var(--ds-color-neutral-contrast-2) */
+```
+...and similarly for `accent`, `brand1`, `brand2` and `brand3`.
diff --git a/apps/_components/src/Header/Header.module.css b/apps/_components/src/Header/Header.module.css
@@ -91,11 +91,11 @@
 }
 
 .linkIcon.figma path {
-  stroke: var(--ds-color-neutral-8);
+  stroke: var(--ds-color-neutral-border-strong);
 }
 
 .linkIcon.github path {
-  fill: var(--ds-color-neutral-8);
+  fill: var(--ds-color-neutral-border-strong);
 }
 
 .linkIcon.figma:hover path {

diff --git a/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css b/apps/storefront/app/bloggen/_components/Card/BlogCard.module.css
@@ -34,6 +34,6 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--ds-color-brand1-6);
+  background-color: var(--ds-color-brand1-border-subtle);
   margin: auto;
 }
diff --git a/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css b/apps/storefront/app/bloggen/_components/Contributors/Contributors.module.css
@@ -55,7 +55,7 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--ds-color-brand1-7);
+  background-color: var(--ds-color-brand1-border-default);
   margin: auto 0;
   break-after: avoid;
 }
diff --git a/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css b/apps/storefront/app/bloggen/_components/PostLayout/PostLayout.module.css
@@ -40,7 +40,7 @@
   height: 7px;
   transform: rotate(45deg);
   border-radius: 1px;
-  background-color: var(--ds-color-brand1-7);
+  background-color: var(--ds-color-brand1-border-default);
   margin: auto 0;
 }
 

diff --git a/apps/storefront/components/Banner/Banner.module.css b/apps/storefront/components/Banner/Banner.module.css
@@ -25,7 +25,7 @@
   display: grid;
   place-items: center;
   transform: rotate(45deg);
-  background-color: var(--ds-color-brand2-6);
+  background-color: var(--ds-color-brand2-border-subtle);
   border-radius: 3px;
   margin-top: var(--ds-spacing-2);
   margin-bottom: var(--ds-spacing-2);
@@ -38,15 +38,15 @@
 }
 
 .red {
-  background-color: var(--ds-color-brand1-7);
+  background-color: var(--ds-color-brand1-border-default);
 }
 
 .yellow {
-  background-color: var(--ds-color-brand2-6);
+  background-color: var(--ds-color-brand2-border-subtle);
 }
 
 .blue {
-  background-color: var(--ds-color-brand3-7);
+  background-color: var(--ds-color-brand3-border-default);
 }
 
 .logo {
@@ -77,13 +77,13 @@
 }
 
 .logo.svg-red path {
-  fill: var(--ds-color-brand1-6);
+  fill: var(--ds-color-brand1-border-subtle);
 }
 
 .logo.svg-yellow path {
-  fill: var(--ds-color-brand2-6);
+  fill: var(--ds-color-brand2-border-subtle);
 }
 
 .logo.svg-blue path {
-  fill: var(--ds-color-brand3-6);
+  fill: var(--ds-color-brand3-border-subtle);
 }
diff --git a/apps/storefront/components/ImageBanner/ImageBanner.module.css b/apps/storefront/components/ImageBanner/ImageBanner.module.css
@@ -4,15 +4,15 @@
 }
 
 .blue {
-  background-color: var(--ds-color-brand3-3);
+  background-color: var(--ds-color-brand3-surface-default);
 }
 
 .red {
-  background-color: var(--ds-color-brand1-3);
+  background-color: var(--ds-color-brand1-surface-default);
 }
 
 .yellow {
-  background-color: var(--ds-color-brand2-3);
+  background-color: var(--ds-color-brand2-surface-default);
 }
 
 .grey {

diff --git a/apps/storefront/components/NavigationCard/NavigationCard.module.css b/apps/storefront/components/NavigationCard/NavigationCard.module.css
@@ -41,17 +41,17 @@
 }
 
 .red {
-  background-color: var(--ds-color-brand1-5);
+  background-color: var(--ds-color-brand1-surface-active);
   color: var(--ds-color-brand1-text-default);
 }
 
 .blue {
-  background-color: var(--ds-color-brand3-4);
+  background-color: var(--ds-color-brand3-surface-hover);
   color: var(--ds-color-brand3-text-default);
 }
 
 .yellow {
-  background-color: var(--ds-color-brand2-4);
+  background-color: var(--ds-color-brand2-surface-hover);
   color: var(--ds-color-brand2-text-default);
 }
 

diff --git a/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css b/apps/storefront/layouts/MenuPageLayout/MenuPageLayout.module.css
@@ -55,15 +55,15 @@
 }
 
 .iconContainer.red {
-  border-color: var(--ds-color-brand1-4);
+  border-color: var(--ds-color-brand1-surface-hover);
 }
 
 .iconContainer.blue {
-  border-color: var(--ds-color-brand3-4);
+  border-color: var(--ds-color-brand3-surface-hover);
 }
 
 .iconContainer.yellow {
-  border-color: var(--ds-color-brand2-4);
+  border-color: var(--ds-color-brand2-surface-hover);
 }
 
 .iconContainer svg {
@@ -76,15 +76,15 @@
 }
 
 .iconContainer.red svg {
-  color: var(--ds-color-brand1-6);
+  color: var(--ds-color-brand1-border-subtle);
 }
 
 .iconContainer.blue svg {
-  color: var(--ds-color-brand3-6);
+  color: var(--ds-color-brand3-border-subtle);
 }
 
 .iconContainer.yellow svg {
-  color: var(--ds-color-brand2-6);
+  color: var(--ds-color-brand2-border-subtle);
 }
 
 .content {

diff --git a/apps/storybook/.storybook/manager-head.html b/apps/storybook/.storybook/manager-head.html
@@ -132,11 +132,11 @@
   }
 
   .header__linkIcon.header__figma path {
-    stroke: var(--ds-color-neutral-8);
+    stroke: var(--ds-color-neutral-border-strong);
   }
 
   .header__linkIcon.header__github path {
-    fill: var(--ds-color-neutral-8);
+    fill: var(--ds-color-neutral-border-strong);
   }
 
   .header__linkIcon.header__figma:hover path {

diff --git a/apps/theme/components/Previews/Previews.module.css b/apps/theme/components/Previews/Previews.module.css
@@ -24,11 +24,11 @@
 
 .menuItem:hover {
   cursor: pointer;
-  background-color: var(--ds-color-accent-4);
+  background-color: var(--ds-color-accent-surface-hover);
 }
 
 .menuItemActive {
-  background-color: var(--ds-color-accent-3);
+  background-color: var(--ds-color-accent-surface-default);
 }
 
 .menuItem[aria-disabled] {
@@ -58,11 +58,11 @@
 
 .toggle:hover {
   cursor: pointer;
-  background-color: var(--ds-color-accent-4);
+  background-color: var(--ds-color-accent-surface-hover);
 }
 
 .active {
-  background-color: var(--ds-color-accent-3);
+  background-color: var(--ds-color-accent-surface-default);
 }
 
 .toggle img {

diff --git a/packages/cli/src/tokens/build/configs.ts b/packages/cli/src/tokens/build/configs.ts
@@ -99,7 +99,7 @@ const colorModeVariables: GetStyleDictionaryConfig = ({ mode = 'light', theme },
         ],
         options: {
           fileHeader,
-          outputReferences: (token, options) => outputColorReferences(token) && outputReferencesFilter(token, options),
+          outputReferences: false,
         },
       },
     },

diff --git a/packages/cli/src/tokens/build/formats/css.ts b/packages/cli/src/tokens/build/formats/css.ts
@@ -4,7 +4,7 @@ import type { Format } from 'style-dictionary/types';
 import { createPropertyFormatter, fileHeader, usesReferences } from 'style-dictionary/utils';
 
 import type { IsCalculatedToken } from '../types.js';
-import { getValue } from '../utils/utils.js';
+import { getValue, isGlobalColorToken, isSemanticToken } from '../utils/utils.js';
 
 const prefersColorScheme = (mode: string, content: string) => `
 @media (prefers-color-scheme: ${mode}) {
@@ -32,7 +32,15 @@ export const colormode: Format = {
 
     const colorSchemeProperty = mode_ === 'dark' || mode_ === 'light' ? `\n  color-scheme: ${mode_};\n` : '';
 
-    const formattedTokens = dictionary.allTokens.map(format).join('\n');
+    const filteredAllTokens = allTokens.filter(
+      R.anyPass([
+        // Include semantic tokens in the output
+        isSemanticToken,
+        // Include global color tokens
+        isGlobalColorToken,
+      ]),
+    );
+    const formattedTokens = filteredAllTokens.map(format).join('\n');
     const content = `{\n${formattedTokens}\n${colorSchemeProperty}}\n`;
     const autoSelectorContent = ['light', 'dark'].includes(mode_) ? prefersColorScheme(mode_, content) : '';
     const body = R.isNotNil(layer)

diff --git a/packages/cli/src/tokens/build/utils/utils.ts b/packages/cli/src/tokens/build/utils/utils.ts
@@ -46,3 +46,11 @@ export const pathStartsWithOneOf = R.curry((paths: string[], token: TransformedT
 
   return hasAnyTruth(matchPathsStartingWith);
 });
+
+export function isSemanticToken(token: TransformedToken): boolean {
+  return token.filePath.includes('semantic/');
+}
+
+export function isGlobalColorToken(token: TransformedToken): boolean {
+  return typeEquals('color', token) && pathStartsWithOneOf(['global'], token);
+}
diff --git a/packages/css/checkbox.css b/packages/css/checkbox.css
@@ -95,15 +95,15 @@
 .ds-checkbox__input:checked {
   --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
   --dsc-checkbox-background: var(--ds-color-accent-base-default);
-  --dsc-checkbox-check_color: var(--ds-color-accent-contrast-1);
+  --dsc-checkbox-check_color: var(--ds-color-accent-contrast-default);
 
   background: var(--dsc-checkbox-background);
 }
 
 .ds-checkbox__input:indeterminate {
   --dsc-checkbox-border-color: var(--ds-color-accent-base-default);
   --dsc-checkbox-background: var(--ds-color-accent-base-default);
-  --dsc-checkbox-check_color: var(--ds-color-accent-contrast-1);
+  --dsc-checkbox-check_color: var(--ds-color-accent-contrast-default);
 }
 
 .ds-checkbox__input:indeterminate::after {

diff --git a/packages/css/radio.css b/packages/css/radio.css
@@ -88,7 +88,7 @@
 
 .ds-radio__input:checked {
   --dsc-radio-border-color: var(--ds-color-accent-base-default);
-  --dsc-radio-background: radial-gradient(circle, var(--ds-color-accent-contrast-1) 60%, transparent 60%);
+  --dsc-radio-background: radial-gradient(circle, var(--ds-color-accent-contrast-default) 60%, transparent 60%);
 
   /* We use a gradient to avoid bleeding pixels */
   background: var(--dsc-radio-background);