With global color

digdir · May 16, 2024 · a6fff85 · a6fff85
1 parent 184b71b
commit a6fff85
Show file tree

Hide file tree

Showing 18 changed files with 11,854 additions and 11,300 deletions.
diff --git a/apps/storefront/tokens/altinn/dark.ts b/apps/storefront/tokens/altinn/dark.ts
diff --git a/apps/storefront/tokens/altinn/light.ts b/apps/storefront/tokens/altinn/light.ts
diff --git a/apps/storefront/tokens/digdir/dark.ts b/apps/storefront/tokens/digdir/dark.ts
diff --git a/apps/storefront/tokens/digdir/light.ts b/apps/storefront/tokens/digdir/light.ts
diff --git a/apps/storefront/tokens/theme4/dark.ts b/apps/storefront/tokens/theme4/dark.ts
diff --git a/apps/storefront/tokens/theme4/light.ts b/apps/storefront/tokens/theme4/light.ts
diff --git a/apps/storefront/tokens/uutilsynet/dark.ts b/apps/storefront/tokens/uutilsynet/dark.ts
diff --git a/apps/storefront/tokens/uutilsynet/light.ts b/apps/storefront/tokens/uutilsynet/light.ts
diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts
@@ -64,16 +64,12 @@ const getCSSConfig: GetConfig = ({ fileName = 'unknown', buildPath = 'unknown' }
           fileHeader,
           includeReferences: (token: TransformedToken) => {
             if (
-              R.test(/accent|neutral|brand1|brand2|brand3/, token.name) &&
+              R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) &&
               R.includes('semantic/color', token.filePath)
             ) {
               return true;
             }
 
-            if (R.test(/global/, token.name) && R.includes('primitives', token.filePath)) {
-              return true;
-            }
-
             return false;
           },
         },
@@ -134,7 +130,9 @@ export async function run(options: Options): Promise<void> {
 
         const [fileName, folderName] = processThemeName(name);
 
-        const [source, include] = R.partition(R.test(/\/primitives\//), updatedSets);
+        const paritionPrimitives = /(?!.*global\.json).*primitives.*/;
+        // const paritionPrimitives = /.*primitives.*/;
+        const [source, include] = R.partition(R.test(paritionPrimitives), updatedSets);
 
         const config_ = configCallback({
           fileName: fileName,

diff --git a/packages/cli/src/tokens/formatters.ts b/packages/cli/src/tokens/formatters.ts
@@ -1,11 +1,6 @@
 import * as R from 'ramda';
 import type { TransformedToken, Format } from 'style-dictionary/types';
-import {
-  fileHeader,
-  createPropertyFormatter,
-  usesReferences,
-  getReferences,
-} from 'style-dictionary/utils';
+import { fileHeader, createPropertyFormatter, usesReferences, getReferences } from 'style-dictionary/utils';
 
 type IncludeReferences = (token: TransformedToken) => boolean;
 
@@ -33,20 +28,12 @@ export const scopedReferenceVariables: Format = {
     });
 
     const parseToken = (token: TransformedToken, ignoreSource?: boolean) => {
-      const originalValue = (
-        usesDtcg ? token.original.$value : token.original.value
-      ) as string;
+      const originalValue = (usesDtcg ? token.original.$value : token.original.value) as string;
 
       if (usesReferences(originalValue) && includeReferences(token)) {
-        const refs = getReferences(
-          originalValue,
-          unfilteredTokens ? unfilteredTokens : {},
-        );
+        const refs = getReferences(originalValue, unfilteredTokens ? unfilteredTokens : {});
 
-        referencedTokens = [
-          ...referencedTokens,
-          ...refs.filter((x) => x.isSource),
-        ];
+        referencedTokens = [...referencedTokens, ...refs.filter((x) => x.isSource)];
 
         return formatWithReference(token);
       }
@@ -73,24 +60,19 @@ export const scopedReferenceVariables: Format = {
       (fileHeaderText) => `
 ${fileHeaderText}
 :root {
-  /** Referenced tokens */
-${referenceTokens.join('\n')}
-  /** Tokens */
+${referenceTokens.length > 0 ? referenceTokens.join('\n') : ''}
 ${tokens.join('\n')}
 }
       `,
     );
   },
 };
 
-const groupByType = R.groupBy(
-  (token: TransformedToken) => token.type as string,
-);
+const groupByType = R.groupBy((token: TransformedToken) => token.type as string);
 
 /** Add token name with prefix to list for removal */
 const removeUnwatedTokens = R.filter(
-  (token: TransformedToken) =>
-    !['fds-base_spacing', 'fds-base_sizing'].includes(token.name),
+  (token: TransformedToken) => !['fds-base_spacing', 'fds-base_sizing'].includes(token.name),
 );
 
 const toCssVarName = R.pipe(R.split(':'), R.head, R.trim);
@@ -111,26 +93,16 @@ export const groupedTokens: Format = {
       name: toCssVarName(format(token)),
     }));
 
-    const processTokens = R.pipe(
-      removeUnwatedTokens,
-      formatTokens,
-      groupByType,
-    );
+    const processTokens = R.pipe(removeUnwatedTokens, formatTokens, groupByType);
 
     const tokens = processTokens(dictionary.allTokens);
 
     const content = Object.entries(tokens)
       .map(
-        ([name, token]) =>
-          `export const  ${name} = ${JSON.stringify(token, null, 2).replace(
-            /"([^"]+)":/g,
-            '$1:',
-          )} \n`,
+        ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, '$1:')} \n`,
       )
       .join('\n');
 
-    return fileHeader({ file }).then(
-      (fileHeaderText) => fileHeaderText + content,
-    );
+    return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
   },
 };
diff --git a/packages/theme/brand/altinn/dark.css b/packages/theme/brand/altinn/dark.css
@@ -5,9 +5,82 @@
 
 
 :root {
-  /** Referenced tokens */
 
-  /** Tokens */
+  --fds-global-green-1: #08200c;
+  --fds-global-green-2: #0b290f;
+  --fds-global-green-3: #0f3814;
+  --fds-global-green-4: #114218;
+  --fds-global-green-5: #144c1c;
+  --fds-global-green-6: #185e22;
+  --fds-global-green-7: #207a2c;
+  --fds-global-green-8: #279636;
+  --fds-global-green-9: #2ca63d;
+  --fds-global-green-10: #248c33;
+  --fds-global-green-11: #1d7129;
+  --fds-global-green-12: #64be70;
+  --fds-global-green-13: #a2d8aa;
+  --fds-global-green-contrast-1: #000;
+  --fds-global-green-contrast-2: #e6e6e6;
+  --fds-global-yellow-1: #211b08;
+  --fds-global-yellow-2: #2b230a;
+  --fds-global-yellow-3: #3a300e;
+  --fds-global-yellow-4: #453810;
+  --fds-global-yellow-5: #4e4013;
+  --fds-global-yellow-6: #625017;
+  --fds-global-yellow-7: #7f681e;
+  --fds-global-yellow-8: #9c8125;
+  --fds-global-yellow-9: #ecc238;
+  --fds-global-yellow-10: #cfaa31;
+  --fds-global-yellow-11: #b2922a;
+  --fds-global-yellow-12: #cca730;
+  --fds-global-yellow-13: #eec84d;
+  --fds-global-yellow-contrast-1: #000;
+  --fds-global-yellow-contrast-2: #e6e6e6;
+  --fds-global-orange-1: #2d1508;
+  --fds-global-orange-2: #3a1b0a;
+  --fds-global-orange-3: #4f240d;
+  --fds-global-orange-4: #5d2b0f;
+  --fds-global-orange-5: #6b3212;
+  --fds-global-orange-6: #853e16;
+  --fds-global-orange-7: #ac4f1c;
+  --fds-global-orange-8: #d46223;
+  --fds-global-orange-9: #d46223;
+  --fds-global-orange-10: #b0511d;
+  --fds-global-orange-11: #8e4117;
+  --fds-global-orange-12: #e39a72;
+  --fds-global-orange-13: #efc3ab;
+  --fds-global-orange-contrast-1: #ffffff;
+  --fds-global-orange-contrast-2: #e6e6e6;
+  --fds-global-red-1: #380c0c;
+  --fds-global-red-2: #470f10;
+  --fds-global-red-3: #5e1515;
+  --fds-global-red-4: #6f1819;
+  --fds-global-red-5: #7f1c1c;
+  --fds-global-red-6: #9d2223;
+  --fds-global-red-7: #bb3f40;
+  --fds-global-red-8: #c96666;
+  --fds-global-red-9: #b32728;
+  --fds-global-red-10: #8c1f1f;
+  --fds-global-red-11: #671617;
+  --fds-global-red-12: #dc9a9b;
+  --fds-global-red-13: #e9c2c2;
+  --fds-global-red-contrast-1: #000;
+  --fds-global-red-contrast-2: #e6e6e6;
+  --fds-global-blue-1: #031d30;
+  --fds-global-blue-2: #032540;
+  --fds-global-blue-3: #043256;
+  --fds-global-blue-4: #053c65;
+  --fds-global-blue-5: #064474;
+  --fds-global-blue-6: #075490;
+  --fds-global-blue-7: #0a6dba;
+  --fds-global-blue-8: #3389cb;
+  --fds-global-blue-9: #0c72c1;
+  --fds-global-blue-10: #085c9c;
+  --fds-global-blue-11: #064678;
+  --fds-global-blue-12: #78b1dc;
+  --fds-global-blue-13: #aed0ea;
+  --fds-global-blue-contrast-1: #ffffff;
+  --fds-global-blue-contrast-2: #e6e6e6;
   --fds-color-accent-1: #001c36;
   --fds-color-accent-2: #002445;
   --fds-color-accent-3: #00315c;
@@ -158,36 +231,36 @@
   --fds-color-brand3-text-default: var(--fds-color-brand3-13);
   --fds-color-brand3-contrast-first: var(--fds-color-brand3-contrast-1);
   --fds-color-brand3-contrast-second: var(--fds-color-brand3-contrast-2);
-  --fds-color-success-background-default: #08200c;
-  --fds-color-success-background-subtle: #0b290f;
-  --fds-color-success-surface-default: #0f3814;
-  --fds-color-success-surface-hover: #114218;
-  --fds-color-success-surface-active: #144c1c;
-  --fds-color-success-border-subtle: #185e22;
-  --fds-color-success-border-default: #207a2c;
-  --fds-color-success-border-strong: #279636;
-  --fds-color-success-base-default: #2ca63d;
-  --fds-color-success-base-hover: #248c33;
-  --fds-color-success-base-active: #1d7129;
-  --fds-color-success-text-subtle: #64be70;
-  --fds-color-success-text-default: #a2d8aa;
-  --fds-color-success-contrast-first: #000;
-  --fds-color-success-contrast-second: #e6e6e6;
-  --fds-color-danger-background-default: #380c0c;
-  --fds-color-danger-background-subtle: #470f10;
-  --fds-color-danger-surface-default: #5e1515;
-  --fds-color-danger-surface-hover: #6f1819;
-  --fds-color-danger-surface-active: #7f1c1c;
-  --fds-color-danger-border-subtle: #9d2223;
-  --fds-color-danger-border-default: #bb3f40;
-  --fds-color-danger-border-strong: #c96666;
-  --fds-color-danger-base-default: #b32728;
-  --fds-color-danger-base-hover: #8c1f1f;
-  --fds-color-danger-base-active: #671617;
-  --fds-color-danger-text-subtle: #dc9a9b;
-  --fds-color-danger-text-default: #e9c2c2;
-  --fds-color-danger-contrast-first: #000;
-  --fds-color-danger-contrast-second: #e6e6e6;
+  --fds-color-success-background-default: var(--fds-global-green-1);
+  --fds-color-success-background-subtle: var(--fds-global-green-2);
+  --fds-color-success-surface-default: var(--fds-global-green-3);
+  --fds-color-success-surface-hover: var(--fds-global-green-4);
+  --fds-color-success-surface-active: var(--fds-global-green-5);
+  --fds-color-success-border-subtle: var(--fds-global-green-6);
+  --fds-color-success-border-default: var(--fds-global-green-7);
+  --fds-color-success-border-strong: var(--fds-global-green-8);
+  --fds-color-success-base-default: var(--fds-global-green-9);
+  --fds-color-success-base-hover: var(--fds-global-green-10);
+  --fds-color-success-base-active: var(--fds-global-green-11);
+  --fds-color-success-text-subtle: var(--fds-global-green-12);
+  --fds-color-success-text-default: var(--fds-global-green-13);
+  --fds-color-success-contrast-first: var(--fds-global-green-contrast-1);
+  --fds-color-success-contrast-second: var(--fds-global-green-contrast-2);
+  --fds-color-danger-background-default: var(--fds-global-red-1);
+  --fds-color-danger-background-subtle: var(--fds-global-red-2);
+  --fds-color-danger-surface-default: var(--fds-global-red-3);
+  --fds-color-danger-surface-hover: var(--fds-global-red-4);
+  --fds-color-danger-surface-active: var(--fds-global-red-5);
+  --fds-color-danger-border-subtle: var(--fds-global-red-6);
+  --fds-color-danger-border-default: var(--fds-global-red-7);
+  --fds-color-danger-border-strong: var(--fds-global-red-8);
+  --fds-color-danger-base-default: var(--fds-global-red-9);
+  --fds-color-danger-base-hover: var(--fds-global-red-10);
+  --fds-color-danger-base-active: var(--fds-global-red-11);
+  --fds-color-danger-text-subtle: var(--fds-global-red-12);
+  --fds-color-danger-text-default: var(--fds-global-red-13);
+  --fds-color-danger-contrast-first: var(--fds-global-red-contrast-1);
+  --fds-color-danger-contrast-second: var(--fds-global-red-contrast-2);
   --fds-color-info-background-default: #031d30;
   --fds-color-info-background-subtle: #032540;
   --fds-color-info-surface-default: #043256;
@@ -203,21 +276,21 @@
   --fds-color-info-text-default: #aed0ea;
   --fds-color-info-contrast-first: #ffffff;
   --fds-color-info-contrast-second: #e6e6e6;
-  --fds-color-warning-background-default: #211b08;
-  --fds-color-warning-background-subtle: #2b230a;
-  --fds-color-warning-surface-default: #3a300e;
-  --fds-color-warning-surface-hover: #453810;
-  --fds-color-warning-surface-active: #4e4013;
-  --fds-color-warning-border-subtle: #625017;
-  --fds-color-warning-border-default: #7f681e;
-  --fds-color-warning-border-strong: #9c8125;
-  --fds-color-warning-base-default: #d46223;
-  --fds-color-warning-base-hover: #b0511d;
-  --fds-color-warning-base-active: #8e4117;
-  --fds-color-warning-text-subtle: #e39a72;
-  --fds-color-warning-text-default: #efc3ab;
-  --fds-color-warning-contrast-first: #000;
-  --fds-color-warning-contrast-second: #e6e6e6;
+  --fds-color-warning-background-default: var(--fds-global-yellow-1);
+  --fds-color-warning-background-subtle: var(--fds-global-yellow-2);
+  --fds-color-warning-surface-default: var(--fds-global-yellow-3);
+  --fds-color-warning-surface-hover: var(--fds-global-yellow-4);
+  --fds-color-warning-surface-active: var(--fds-global-yellow-5);
+  --fds-color-warning-border-subtle: var(--fds-global-yellow-6);
+  --fds-color-warning-border-default: var(--fds-global-yellow-7);
+  --fds-color-warning-border-strong: var(--fds-global-yellow-8);
+  --fds-color-warning-base-default: var(--fds-global-orange-9);
+  --fds-color-warning-base-hover: var(--fds-global-orange-10);
+  --fds-color-warning-base-active: var(--fds-global-orange-11);
+  --fds-color-warning-text-subtle: var(--fds-global-orange-12);
+  --fds-color-warning-text-default: var(--fds-global-orange-13);
+  --fds-color-warning-contrast-first: var(--fds-global-yellow-contrast-1);
+  --fds-color-warning-contrast-second: var(--fds-global-yellow-contrast-2);
   --fds-typography-heading-2xlarge: 500 3.75rem/1.3 'Inter';
   --fds-typography-heading-xlarge: 500 3rem/1.3 'Inter';
   --fds-typography-heading-large: 500 2.25rem/1.3 'Inter';