@digdir/designsystemet 1.0.0-next.36 → 1.0.0-next.37

package/dist/src/colors/theme.d.ts

@@ -16,9 +16,9 @@ type ThemeGenType = {
  * Generates a color scale based on a base color and a mode.
  *
  * @param color The base color that is used to generate the color scale
- * @param mode The mode of the theme
+ * @param colorScheme The color scheme to generate a scale for
  */
-export declare const generateScaleForColor: (color: CssColor, mode: ColorMode, contrastMode?: "aa" | "aaa") => ColorInfo[];
+export declare const generateScaleForColor: (color: CssColor, colorScheme: ColorMode, contrastMode?: "aa" | "aaa") => ColorInfo[];
 /**
  *
  * Generates a color theme based on a base color. Light, Dark and Contrast scales are includes.

package/dist/src/colors/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG3G,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAOrD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,KAAK,aAAa,GAAG;IACnB,SAAS,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AA2EF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,UACzB,QAAQ,QACT,SAAS,iBACD,IAAI,GAAG,KAAK,KACzB,SAAS,EAuCX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,UAAW,QAAQ,iBAAgB,IAAI,GAAG,KAAK,KAAU,SAU1F,CAAC;AAEF,eAAO,MAAM,oBAAoB,qBAA6B,aAAa,KAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAgB3G,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AACF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,6BAAqC,YAAY,KAAG,mBAUlF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,cAAe,QAAQ,0BAO5D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,UAAW,QAAQ,aAaxD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,qBAAsB,QAAQ,mBAAmB,QAAQ,YAe1F,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,UAAW,QAAQ,aAAa,MAAM,aAkB1E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,SAAU,MAAM,KAAG,WAmBrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,WAAY,WAAW,KAAG,MAmB5D,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,QAAQ,KAQvB,QACpB,CAAC;AAEF,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,iCAAiC,CAAC;AAKhE,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG3G,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAOrD,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,YAAY,GAAG,aAAa,CAAC;AAE/D,KAAK,aAAa,GAAG;IACnB,SAAS,CAAC,EAAE,SAAS,GAAG,KAAK,CAAC;IAC9B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF,KAAK,YAAY,GAAG;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AA2EF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,UACzB,QAAQ,eACF,SAAS,iBACR,IAAI,GAAG,KAAK,KACzB,SAAS,EAuCX,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,qBAAqB,UAAW,QAAQ,iBAAgB,IAAI,GAAG,KAAK,KAAU,SAU1F,CAAC;AAEF,eAAO,MAAM,oBAAoB,qBAA6B,aAAa,KAAG,MAAM,CAAC,YAAY,EAAE,SAAS,CAgB3G,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IAChC,OAAO,EAAE,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,CAAC;IACnC,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AACF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,6BAAqC,YAAY,KAAG,mBAUlF,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,cAAe,QAAQ,0BAO5D,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,UAAW,QAAQ,aAaxD,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,qBAAsB,QAAQ,mBAAmB,QAAQ,YAe1F,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,wBAAwB,UAAW,QAAQ,aAAa,MAAM,aAkB1E,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,SAAU,MAAM,KAAG,WAmBrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,sBAAsB,WAAY,WAAW,KAAG,MAmB5D,CAAC;AAEF,eAAO,MAAM,YAAY,UAAW,QAAQ,KAQvB,QACpB,CAAC;AAEF,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}

package/dist/src/colors/theme.js

@@ -10,14 +10,14 @@ const baseColors = {
   red: "#C01B1B",
   yellow: "#D4B12F"
 };
-const generateThemeColor = (color, mode, contrastMode = "aa") => {
+const generateThemeColor = (color, colorScheme, contrastMode = "aa") => {
   const leoBackgroundColor = new BackgroundColor({
     name: "backgroundColor",
     colorKeys: ["#ffffff"],
     ratios: [1]
   });
   let colorLightness = getLightnessFromHex(color);
-  if (mode === "dark" || mode === "contrast") {
+  if (colorScheme === "dark" || colorScheme === "contrast") {
     color = getBaseColor(color);
     colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
   }
@@ -35,15 +35,15 @@ const generateThemeColor = (color, mode, contrastMode = "aa") => {
     color,
     leoBackgroundColor.colorKeys[0]
   );
-  const textSubLightLightness = contrastMode === "aa" ? 42 : 30;
+  const textSubLightLightness = contrastMode === "aa" ? 41 : 30;
   const textDefLightLightness = contrastMode === "aa" ? 18 : 12;
-  const textSubDarkLightness = contrastMode === "aa" ? 67 : 80;
+  const textSubDarkLightness = contrastMode === "aa" ? 66 : 80;
   const textDefDarkLightness = contrastMode === "aa" ? 90 : 94;
   let lightnessScale = [];
-  if (mode === "light") {
-    lightnessScale = [100, 96, 90, 84, 78, 76, 54, 33, textSubLightLightness, textDefLightLightness];
-  } else if (mode === "dark") {
-    lightnessScale = [10, 14, 20, 26, 32, 35, 47, 77, textSubDarkLightness, textDefDarkLightness];
+  if (colorScheme === "light") {
+    lightnessScale = [100, 96, 90, 84, 78, 76, 53, 41, textSubLightLightness, textDefLightLightness];
+  } else if (colorScheme === "dark") {
+    lightnessScale = [10, 14, 20, 26, 32, 35, 52, 66, textSubDarkLightness, textDefDarkLightness];
   } else {
     lightnessScale = [1, 6, 14, 20, 26, 58, 70, 82, 80, 95];
   }
@@ -62,8 +62,8 @@ const generateThemeColor = (color, mode, contrastMode = "aa") => {
     ]
   });
 };
-const generateScaleForColor = (color, mode, contrastMode = "aa") => {
-  const themeColor = generateThemeColor(color, mode, contrastMode);
+const generateScaleForColor = (color, colorScheme, contrastMode = "aa") => {
+  const themeColor = generateThemeColor(color, colorScheme, contrastMode);
   const leoBackgroundColor = new BackgroundColor({
     name: "backgroundColor",
     colorKeys: ["#ffffff"],
@@ -92,7 +92,7 @@ const generateScaleForColor = (color, mode, contrastMode = "aa") => {
     number: 15,
     name: getColorNameFromNumber(15)
   });
-  if (mode === "light") {
+  if (colorScheme === "light") {
     outputArray[8].hex = color;
   }
   return outputArray;

package/dist/src/init/createTokensPackage.js

@@ -188,15 +188,15 @@ Will now create the following:
   for (const theme of themes.map(normalizeTokenSetName)) {
     for (const mode of modes.map(normalizeTokenSetName)) {
       await fs.cp(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/global.json`),
-        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/global.json`),
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/color-scheme/${mode}/global.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/color-scheme/${mode}/global.json`),
         { recursive: true }
       );
       const template2 = await fs.readFile(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/theme-template.json`)
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/color-scheme/${mode}/theme-template.json`)
       );
       await fs.writeFile(
-        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/${theme}.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/color-scheme/${mode}/${theme}.json`),
         template2.toString("utf-8").replaceAll("<theme>", theme)
       );
       const templatePrimaryTypo = await fs.readFile(

package/dist/src/init/generateMetadataJson.js

@@ -7,9 +7,9 @@ function generateMetadataJson(modes, themes) {
       "primitives/modes/typography/primary/theme",
       "primitives/modes/typography/secondary/theme",
       ...modes.flatMap((mode) => [
-        `primitives/modes/colors/${normalizeTokenSetName(mode)}/global`,
+        `primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/global`,
         ...themes.map(
-          (theme) => `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`
+          (theme) => `primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`
         )
       ]),
       ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`),

package/dist/src/init/generateThemesJson.js

@@ -36,10 +36,10 @@ function generateModesGroup(modes, themes) {
       id: randomUUID(),
       name: mode,
       selectedTokenSets: Object.fromEntries([
-        [`primitives/modes/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
+        [`primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
         ...themes.map(
           (theme) => [
-            `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+            `primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
             TokenSetStatus.ENABLED
           ]
         )

package/dist/src/init/nextStepsMarkdown.js

@@ -1,7 +1,7 @@
 import { normalizeTokenSetName, toGeneratedCssFileName } from "./utils.js";
 function nextStepsMarkdown(themes, modes, tokensTargetDir, packageName) {
   const themeModeCombinations = themes.flatMap(
-    (theme) => modes.map((mode) => [theme, mode])
+    (theme) => modes.map((colorScheme) => [theme, colorScheme])
   );
   const themeOrThemes = `theme${themes.length > 1 ? "s" : ""}`;
   const isOrAre = themes.length > 1 ? "are" : "is";
@@ -24,7 +24,7 @@ function nextStepsMarkdown(themes, modes, tokensTargetDir, packageName) {
 2. Press "Kopier tema"
 3. Under "Json til Figma", copy the contents under ${modes.join(" / ")} to
    the corresponding file under \`${tokensTargetDir}\`:
-${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join("\n")}
+${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/modes/color-scheme/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join("\n")}
    This can also be done in Tokens Studio for Figma.
 4. **IMPORTANT!** In the JSON data you copied, replace \`theme\` on line 2
    with the correct theme identifier, depending on the theme you're customizing.

package/dist/src/tokens/build/configs.d.ts

@@ -10,7 +10,7 @@ export type GetStyleDictionaryConfig = (permutation: ThemePermutation, options:
     permutationOverrides?: Partial<ThemePermutation>;
 }[];
 export declare const configs: {
-    colorModeVariables: GetStyleDictionaryConfig;
+    colorSchemeVariables: GetStyleDictionaryConfig;
     mainColorVariables: GetStyleDictionaryConfig;
     supportColorVariables: GetStyleDictionaryConfig;
     typographyVariables: GetStyleDictionaryConfig;

package/dist/src/tokens/build/configs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAOhG,OAAO,KAAK,EAEV,kBAAkB,EAElB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAQ5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AAwCjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AAoPnH,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,cAC5B,wBAAwB,UAC3B,oBAAoB,EAAE,cAClB,cAAc,EAAE,WACnB,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAOhG,OAAO,KAAK,EAEV,kBAAkB,EAElB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAQ5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AAwCjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AAuPnH,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,cAC5B,wBAAwB,UAC3B,oBAAoB,EAAE,cAClB,cAAc,EAAE,WACnB,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}

package/dist/src/tokens/build/configs.js

@@ -40,9 +40,9 @@ const outputColorReferences = (token) => {
   }
   return false;
 };
-const colorModeVariables = ({ mode = "light", theme }, { outPath }) => {
-  const selector = `${mode === "light" ? ":root, " : ""}[data-ds-color-mode="${mode}"]`;
-  const layer = `ds.theme.color-mode.${mode}`;
+const colorSchemeVariables = ({ "color-scheme": colorScheme = "light", theme }, { outPath }) => {
+  const selector = `${colorScheme === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme}"]`;
+  const layer = `ds.theme.color-scheme.${colorScheme}`;
   return {
     usesDtcg,
     preprocessors: ["tokens-studio"],
@@ -50,7 +50,7 @@ const colorModeVariables = ({ mode = "light", theme }, { outPath }) => {
       css: {
         // custom
         outPath,
-        mode,
+        colorScheme,
         theme,
         selector,
         layer,
@@ -60,8 +60,8 @@ const colorModeVariables = ({ mode = "light", theme }, { outPath }) => {
         transforms: dsTransformers,
         files: [
           {
-            destination: `color-mode/${mode}.css`,
-            format: formats.colormode.name,
+            destination: `color-scheme/${colorScheme}.css`,
+            format: formats.colorScheme.name,
             filter: (token) => !token.isSource && typeEquals("color", token)
           }
         ],
@@ -73,7 +73,7 @@ const colorModeVariables = ({ mode = "light", theme }, { outPath }) => {
     }
   };
 };
-const colorCategoryVariables = (category) => ({ mode, theme, [`${category}-color`]: color }, { outPath }) => {
+const colorCategoryVariables = (category) => ({ "color-scheme": colorScheme, theme, [`${category}-color`]: color }, { outPath }) => {
   const layer = `ds.theme.color`;
   const isDefault = color === buildOptions?.accentColor;
   const selector = `${isDefault ? ":root, " : ""}[data-color="${color}"]`;
@@ -84,7 +84,7 @@ const colorCategoryVariables = (category) => ({ mode, theme, [`${category}-color
       css: {
         // custom
         outPath,
-        mode,
+        colorScheme,
         theme,
         selector,
         layer,
@@ -95,7 +95,7 @@ const colorCategoryVariables = (category) => ({ mode, theme, [`${category}-color
         files: [
           {
             destination: `color/${color}.css`,
-            format: formats.colorcategory.name,
+            format: formats.colorCategory.name,
             filter: (token) => isColorCategoryToken(token, category)
           }
         ],
@@ -169,7 +169,7 @@ const semanticVariables = ({ theme }, { outPath }) => {
     }
   };
 };
-const typescriptTokens = ({ mode, theme }, { outPath }) => {
+const typescriptTokens = ({ "color-scheme": colorScheme, theme }, { outPath }) => {
   return {
     usesDtcg,
     preprocessors: ["tokens-studio"],
@@ -181,7 +181,7 @@ const typescriptTokens = ({ mode, theme }, { outPath }) => {
         buildPath: `${outPath}/${theme}/`,
         files: [
           {
-            destination: `${mode}.ts`,
+            destination: `${colorScheme}.ts`,
             format: jsTokens.name,
             outputReferences: outputColorReferences,
             filter: (token) => {
@@ -251,7 +251,7 @@ const typographyVariables = ({ theme, typography }, { outPath }) => {
   };
 };
 const configs = {
-  colorModeVariables,
+  colorSchemeVariables,
   mainColorVariables: colorCategoryVariables("main"),
   supportColorVariables: colorCategoryVariables("support"),
   typographyVariables,

package/dist/src/tokens/build/formats/css.d.ts

@@ -5,8 +5,8 @@ declare module 'style-dictionary/types' {
     }
 }
 export declare const formats: {
-    colormode: Format;
-    colorcategory: Format;
+    colorScheme: Format;
+    colorCategory: Format;
     semantic: Format;
     typography: Format;
 };

package/dist/src/tokens/build/formats/css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/formats/css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAuDrD,OAAO,QAAQ,wBAAwB,CAAC;IACtC,UAAiB,YAAY;QAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B;CACF;AA2GD,eAAO,MAAM,OAAO;;;;;CAKc,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/formats/css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AA0DrD,OAAO,QAAQ,wBAAwB,CAAC;IACtC,UAAiB,YAAY;QAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B;CACF;AA2GD,eAAO,MAAM,OAAO;;;;;CAKc,CAAC"}

package/dist/src/tokens/build/formats/css.js

@@ -2,18 +2,18 @@ import * as R from "ramda";
 import { createPropertyFormatter, fileHeader, usesReferences } from "style-dictionary/utils";
 import { colorCategories } from "../types.js";
 import { getValue, isColorCategoryToken, isGlobalColorToken, isSemanticToken } from "../utils/utils.js";
-const prefersColorScheme = (mode, content) => `
-@media (prefers-color-scheme: ${mode}) {
-  [data-ds-color-mode="auto"] ${content}
+const prefersColorScheme = (colorScheme2, content) => `
+@media (prefers-color-scheme: ${colorScheme2}) {
+  [data-color-scheme="auto"] ${content}
 }
 `;
-const colormode = {
-  name: "ds/css-colormode",
+const colorScheme = {
+  name: "ds/css-colorscheme",
   format: async ({ dictionary, file, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
-    const { selector, mode, layer } = platform;
-    const mode_ = mode;
+    const { selector, colorScheme: colorScheme2, layer } = platform;
+    const colorScheme_ = colorScheme2;
     const header = await fileHeader({ file });
     const format = createPropertyFormatter({
       outputReferences,
@@ -21,8 +21,8 @@ const colormode = {
       format: "css",
       usesDtcg
     });
-    const colorSchemeProperty = mode_ === "dark" || mode_ === "light" ? `
-  color-scheme: ${mode_};
+    const colorSchemeProperty = colorScheme_ === "dark" || colorScheme_ === "light" ? `
+  color-scheme: ${colorScheme_};
 ` : "";
     const filteredAllTokens = allTokens.filter(
       R.allPass([
@@ -41,7 +41,7 @@ const colormode = {
 ${formattedTokens}
 ${colorSchemeProperty}}
 `;
-    const autoSelectorContent = ["light", "dark"].includes(mode_) ? prefersColorScheme(mode_, content) : "";
+    const autoSelectorContent = ["light", "dark"].includes(colorScheme_) ? prefersColorScheme(colorScheme_, content) : "";
     const body = R.isNotNil(layer) ? `@layer ${layer} {
 ${selector} ${content} ${autoSelectorContent}
 }
@@ -50,7 +50,7 @@ ${selector} ${content} ${autoSelectorContent}
     return header + body;
   }
 };
-const colorcategory = {
+const colorCategory = {
   name: "ds/css-colorcategory",
   format: async ({ dictionary, file, options, platform }) => {
     const { outputReferences, usesDtcg, replaceCategoryWith = "" } = options;
@@ -147,8 +147,8 @@ ${content}
   }
 };
 const formats = {
-  colormode,
-  colorcategory,
+  colorScheme,
+  colorCategory,
   semantic,
   typography
 };

package/dist/src/tokens/build/types.d.ts

@@ -9,7 +9,7 @@ export type ColorCategories = keyof typeof colorCategories;
  * A multi-dimensional theme is a concrete permutation of the possible theme dimensions
  */
 export type ThemePermutation = {
-    mode: string;
+    'color-scheme': string;
     'main-color': string;
     'support-color': string;
     semantic: string;

package/dist/src/tokens/build/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAE1D,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC;AAEtG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,wBAAwB,CAAC;IACpC,0FAA0F;IAC1F,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,uGAAuG;IACvG,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,EAAE,OAAO,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjG,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IAAE,WAAW,EAAE,gBAAgB,CAAC;IAAC,MAAM,EAAE,qBAAqB,CAAA;CAAE,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAChG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AAE1D,eAAO,MAAM,eAAe;;;CAGlB,CAAC;AACX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,eAAe,CAAC;AAE3D;;GAEG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B,cAAc,EAAE,MAAM,CAAC;IACvB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG,MAAM,gBAAgB,CAAC;AAEpD,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,qBAAqB,KAAK,OAAO,CAAC;AAEtG,MAAM,MAAM,kBAAkB,GAAG;IAC/B,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,0EAA0E;IAC1E,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,SAAS,EAAE,wBAAwB,CAAC;IACpC,0FAA0F;IAC1F,UAAU,EAAE,cAAc,EAAE,CAAC;IAC7B,uGAAuG;IACvG,OAAO,CAAC,EAAE,OAAO,CAAC,kBAAkB,CAAC,CAAC;IACtC,mEAAmE;IACnE,KAAK,CAAC,EAAE,CAAC,SAAS,EAAE,2BAA2B,EAAE,EAAE,OAAO,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;IACjG,+DAA+D;IAC/D,OAAO,CAAC,EAAE,MAAM,OAAO,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,2BAA2B,GAAG;IAAE,WAAW,EAAE,gBAAgB,CAAC;IAAC,MAAM,EAAE,qBAAqB,CAAA;CAAE,CAAC"}

package/dist/src/tokens/build/utils/entryfile.js

@@ -3,11 +3,11 @@ import glob from "fast-glob";
 import fs from "fs-extra";
 import * as R from "ramda";
 const sortOrder = [
-  "color-mode/light",
+  "color-scheme/light",
   "typography/secondary",
   "semantic",
-  "color-mode/dark",
-  "color-mode/contrast",
+  "color-scheme/dark",
+  "color-scheme/contrast",
   "typography/primary",
   "color/",
   "builtin-colors"

package/dist/src/tokens/build/utils/getMultidimensionalThemes.js

@@ -74,7 +74,7 @@ function permutateThemes(groups) {
         name: "",
         selectedTokenSets: [],
         permutation: {
-          mode: "unknown",
+          "color-scheme": "unknown",
           "main-color": "unknown",
           "support-color": "unknown",
           theme: "unknown",

package/dist/src/tokens/build.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/tokens/build.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,WAAW,CAAC;AAEtC,KAAK,OAAO,GAAG;IACb,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,IAAI,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;AAwC7C,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAuEjE"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/tokens/build.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,aAAa,WAAW,CAAC;AAEtC,KAAK,OAAO,GAAG;IACb,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,GAAG,EAAE,MAAM,CAAC;IACZ,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,eAAO,IAAI,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;AAwC7C,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAyEjE"}

package/dist/src/tokens/build.js

@@ -4,6 +4,7 @@ import chalk from "chalk";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import { configs, getConfigsForThemeDimensions } from "./build/configs.js";
+import { colorCategories } from "./build/types.js";
 import { makeEntryFile } from "./build/utils/entryfile.js";
 import { processThemeObject } from "./build/utils/getMultidimensionalThemes.js";
 const DEFAULT_COLOR = "accent";
@@ -11,14 +12,14 @@ let buildOptions;
 const sd = new StyleDictionary();
 const buildConfigs = {
   typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
-  "color-mode": { getConfig: configs.colorModeVariables, dimensions: ["mode"] },
+  "color-scheme": { getConfig: configs.colorSchemeVariables, dimensions: ["color-scheme"] },
   "main-color": { getConfig: configs.mainColorVariables, dimensions: ["main-color"] },
   "support-color": { getConfig: configs.supportColorVariables, dimensions: ["support-color"] },
   semantic: { getConfig: configs.semanticVariables, dimensions: ["semantic"] },
   storefront: {
     name: "Storefront preview tokens",
     getConfig: configs.typescriptTokens,
-    dimensions: ["mode"],
+    dimensions: ["color-scheme"],
     options: { outPath: path.resolve("../../apps/storefront/tokens") },
     enabled: () => buildOptions?.preview ?? false
   },
@@ -72,7 +73,7 @@ async function buildTokens(options) {
         console.log(`
 \u{1F371} Building ${chalk.green(buildConfig.name ?? key)}`);
         if (buildConfig.build) {
-          return await buildConfig.build(sdConfigs, { outPath, tokensDir, ...buildConfig.options });
+          await buildConfig.build(sdConfigs, { outPath, tokensDir, ...buildConfig.options });
         }
         await Promise.all(
           sdConfigs.map(async ({ config, permutation }) => {
@@ -90,6 +91,26 @@ async function buildTokens(options) {
     }
     throw err;
   }
+  await writeColorTypeDeclaration($themes, outPath);
+}
+async function writeColorTypeDeclaration($themes, outPath) {
+  const colorsFileName = "colors.d.ts";
+  console.log(`
+\u{1F371} Building ${chalk.green("type declarations")}`);
+  console.log(colorsFileName);
+  const mainAndSupportColors = $themes.filter(
+    (x) => x.group && [colorCategories.main, colorCategories.support].map((c) => `${c}-color`).includes(x.group)
+  ).map((x) => x.name);
+  const typeDeclaration = `
+import type { MainAndSupportColors as BaseCustomColors } from '@digdir/designsystemet-react/colors';
+
+declare module '@digdir/designsystemet-react/colors' {
+  export interface MainAndSupportColors extends BaseCustomColors {
+${mainAndSupportColors.map((color) => `    ${color}: never;`).join("\n")}
+  }
+}
+`.trimStart();
+  await fs.writeFile(path.resolve(outPath, colorsFileName), typeDeclaration, "utf-8");
 }
 export {
   DEFAULT_COLOR,

package/dist/src/tokens/design-tokens/template/$metadata.json

@@ -5,10 +5,10 @@
     "primitives/size/compact",
     "primitives/modes/typography/primary/<theme>",
     "primitives/modes/typography/secondary/<theme>",
-    "primitives/modes/colors/dark/global",
-    "primitives/modes/colors/dark/<theme>",
-    "primitives/modes/colors/light/global",
-    "primitives/modes/colors/light/<theme>",
+    "primitives/modes/color-scheme/dark/global",
+    "primitives/modes/color-scheme/dark/<theme>",
+    "primitives/modes/color-scheme/light/global",
+    "primitives/modes/color-scheme/light/<theme>",
     "themes/<theme>",
     "semantic/color",
     "semantic/modes/main-color/accent",

package/dist/src/tokens/design-tokens/template/$themes.json

@@ -28,11 +28,11 @@
     "name": "Light",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "primitives/modes/colors/light/global": "enabled",
-      "primitives/modes/colors/light/theme": "enabled",
-      "primitives/modes/colors/light/theme2": "enabled",
-      "primitives/modes/colors/light/theme3": "enabled",
-      "primitives/modes/colors/light/theme4": "enabled"
+      "primitives/modes/color-scheme/light/global": "enabled",
+      "primitives/modes/color-scheme/light/theme": "enabled",
+      "primitives/modes/color-scheme/light/theme2": "enabled",
+      "primitives/modes/color-scheme/light/theme3": "enabled",
+      "primitives/modes/color-scheme/light/theme4": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:34811:5472",
     "$figmaModeId": "34811:0",
@@ -428,18 +428,18 @@
       "theme4.brand3.contrast-1": "61ffa3f921c9c346bc22448c458ba59a585be1cb",
       "theme4.brand3.contrast-2": "dcdfe1ec7245c3ee88fe149188d299456324b7a6"
     },
-    "group": "Mode"
+    "group": "Color scheme"
   },
   {
     "id": "9ebd8aed52afbffc17e2666e8b4653a53498b257",
     "name": "Dark",
     "$figmaStyleReferences": {},
     "selectedTokenSets": {
-      "primitives/modes/colors/dark/global": "enabled",
-      "primitives/modes/colors/dark/theme": "enabled",
-      "primitives/modes/colors/dark/theme2": "enabled",
-      "primitives/modes/colors/dark/theme3": "enabled",
-      "primitives/modes/colors/dark/theme4": "enabled"
+      "primitives/modes/color-scheme/dark/global": "enabled",
+      "primitives/modes/color-scheme/dark/theme": "enabled",
+      "primitives/modes/color-scheme/dark/theme2": "enabled",
+      "primitives/modes/color-scheme/dark/theme3": "enabled",
+      "primitives/modes/color-scheme/dark/theme4": "enabled"
     },
     "$figmaCollectionId": "VariableCollectionId:34811:5472",
     "$figmaModeId": "34811:1",
@@ -835,7 +835,7 @@
       "theme4.brand3.contrast-1": "61ffa3f921c9c346bc22448c458ba59a585be1cb",
       "theme4.brand3.contrast-2": "dcdfe1ec7245c3ee88fe149188d299456324b7a6"
     },
-    "group": "Mode"
+    "group": "Color scheme"
   },
   {
     "id": "368d753fcac4455f289500eaa42e70dc0a03522f",

package/dist/src/tokens/write/generate$metadata.js

@@ -6,8 +6,8 @@ function generateMetadataJson(modes, themes, colors) {
       ...themes.map((theme) => `primitives/modes/typography/primary/${theme}`),
       ...themes.map((theme) => `primitives/modes/typography/secondary/${theme}`),
       ...modes.flatMap((mode) => [
-        `primitives/modes/colors/${mode}/global`,
-        ...themes.map((theme) => `primitives/modes/colors/${mode}/${theme}`)
+        `primitives/modes/color-scheme/${mode}/global`,
+        ...themes.map((theme) => `primitives/modes/color-scheme/${mode}/${theme}`)
       ]),
       ...themes.map((theme) => `themes/${theme}`),
       "semantic/color",

package/dist/src/tokens/write/generate$themes.js

@@ -26,7 +26,7 @@ function generateSizeGroup() {
     }
   ];
 }
-const modeDefaults = {
+const colorSchemeDefaults = {
   light: {
     name: "Light",
     selectedTokenSets: {},
@@ -52,10 +52,10 @@ const modeDefaults = {
 function generateModesGroup(modes, themes) {
   return modes.map(
     (mode) => ({
-      ...modeDefaults[mode],
+      ...colorSchemeDefaults[mode],
       selectedTokenSets: Object.fromEntries([
-        [`primitives/modes/colors/${mode}/global`, TokenSetStatus.ENABLED],
-        ...themes.map((theme) => [`primitives/modes/colors/${mode}/${theme}`, TokenSetStatus.ENABLED])
+        [`primitives/modes/color-scheme/${mode}/global`, TokenSetStatus.ENABLED],
+        ...themes.map((theme) => [`primitives/modes/color-scheme/${mode}/${theme}`, TokenSetStatus.ENABLED])
       ]),
       group: "Mode"
     })

package/dist/src/tokens/write.js

@@ -13,8 +13,8 @@ const DIRNAME = import.meta.dirname || __dirname;
 const DEFAULT_FILES_PATH = path.join(DIRNAME, "./design-tokens/default");
 const TEMPLATE_FILES_PATH = path.join(DIRNAME, "./design-tokens/template/");
 const stringify = (data) => JSON.stringify(data, null, 2);
-const generateColorModeFile = (folder, name, tokens, outPath) => {
-  const path2 = `${outPath}/primitives/modes/colors/${folder}`;
+const generateColorSchemeFile = (folder, name, tokens, outPath) => {
+  const path2 = `${outPath}/primitives/modes/color-scheme/${folder}`;
   return {
     data: stringify(tokens),
     path: path2,
@@ -142,12 +142,12 @@ const writeTokens = async (options) => {
     )
   );
   const files = [
-    generateColorModeFile("light", themeName, tokens.colors.light[themeName], targetDir),
-    generateColorModeFile("light", "global", tokens.colors.light.global, targetDir),
-    generateColorModeFile("dark", themeName, tokens.colors.dark[themeName], targetDir),
-    generateColorModeFile("dark", "global", tokens.colors.dark.global, targetDir),
-    generateColorModeFile("contrast", themeName, tokens.colors.contrast[themeName], targetDir),
-    generateColorModeFile("contrast", "global", tokens.colors.contrast.global, targetDir),
+    generateColorSchemeFile("light", themeName, tokens.colors.light[themeName], targetDir),
+    generateColorSchemeFile("light", "global", tokens.colors.light.global, targetDir),
+    generateColorSchemeFile("dark", themeName, tokens.colors.dark[themeName], targetDir),
+    generateColorSchemeFile("dark", "global", tokens.colors.dark.global, targetDir),
+    generateColorSchemeFile("contrast", themeName, tokens.colors.contrast[themeName], targetDir),
+    generateColorSchemeFile("contrast", "global", tokens.colors.contrast.global, targetDir),
     generateTypographyFile("primary", themeName, tokens.typography.primary, targetDir),
     generateTypographyFile("secondary", themeName, tokens.typography.primary, targetDir)
   ];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet",
-  "version": "1.0.0-next.36",
+  "version": "1.0.0-next.37",
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "repository": {