@digdir/designsystemet 0.1.0-next.22 → 0.1.0-next.23

package/dist/src/colors/colorUtils.js

@@ -20,7 +20,7 @@ const hexToCssHsl = (hex, valuesOnly = false) => {
   let h = 0;
   let s = 0;
   let l = (max + min) / 2;
-  if (max == min) {
+  if (max === min) {
     h = s = 0;
   } else {
     const d = max - min;
@@ -48,11 +48,11 @@ const hexToHSL = (H) => {
   let r = 0;
   let g = 0;
   let b = 0;
-  if (H.length == 4) {
+  if (H.length === 4) {
     r = parseInt("0x" + H[1] + H[1]);
     g = parseInt("0x" + H[2] + H[2]);
     b = parseInt("0x" + H[3] + H[3]);
-  } else if (H.length == 7) {
+  } else if (H.length === 7) {
     r = parseInt("0x" + H[1] + H[2]);
     g = parseInt("0x" + H[3] + H[4]);
     b = parseInt("0x" + H[5] + H[6]);
@@ -66,14 +66,14 @@ const hexToHSL = (H) => {
   const cmin = Math.min(r, g, b);
   const cmax = Math.max(r, g, b);
   const delta = cmax - cmin;
-  if (delta == 0) h = 0;
-  else if (cmax == r) h = (g - b) / delta % 6;
-  else if (cmax == g) h = (b - r) / delta + 2;
+  if (delta === 0) h = 0;
+  else if (cmax === r) h = (g - b) / delta % 6;
+  else if (cmax === g) h = (b - r) / delta + 2;
   else h = (r - g) / delta + 4;
   h = Math.round(h * 60);
   if (h < 0) h += 360;
   l = (cmax + cmin) / 2;
-  s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+  s = delta === 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
   s = +(s * 100).toFixed(1);
   l = +(l * 100).toFixed(1);
   return [h, s, l];
@@ -124,9 +124,9 @@ const HSLToHex = (h, s, l) => {
   r = parseInt(Math.round((r + m) * 255).toString(16), 16);
   g = parseInt(Math.round((g + m) * 255).toString(16), 16);
   b = parseInt(Math.round((b + m) * 255).toString(16), 16);
-  if (r.toString().length == 1) r = parseInt("0" + r.toString(), 10);
-  if (g.toString().length == 1) g = parseInt("0" + g.toString(), 10);
-  if (b.toString().length == 1) b = parseInt("0" + b.toString(), 10);
+  if (r.toString().length === 1) r = parseInt("0" + r.toString(), 10);
+  if (g.toString().length === 1) g = parseInt("0" + g.toString(), 10);
+  if (b.toString().length === 1) b = parseInt("0" + b.toString(), 10);
   return "#" + r + g + b;
 };
 const hexToRgb = (hex) => {

package/dist/src/init/createTokensPackage.js

@@ -176,20 +176,43 @@ Will now create the following:
     await fs.mkdir(path.join(TOKENS_TARGET_DIR, "themes"));
   } catch {
   }
+  try {
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, "themes"));
+  } catch {
+  }
+  try {
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, "primitives/modes/typography/primary"), { recursive: true });
+    await fs.mkdir(path.join(TOKENS_TARGET_DIR, "primitives/modes/typography/secondary"), { recursive: true });
+  } catch {
+  }
   for (const theme of themes.map(normalizeTokenSetName)) {
     for (const mode of modes.map(normalizeTokenSetName)) {
       await fs.cp(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/global.json`),
-        path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/global.json`),
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/global.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/global.json`),
         { recursive: true }
       );
       const template2 = await fs.readFile(
-        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/colors/${mode}/theme-template.json`)
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/colors/${mode}/theme-template.json`)
       );
       await fs.writeFile(
-        path.join(TOKENS_TARGET_DIR, `primitives/colors/${mode}/${theme}.json`),
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/colors/${mode}/${theme}.json`),
         template2.toString("utf-8").replaceAll("<theme>", theme)
       );
+      const templatePrimaryTypo = await fs.readFile(
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/typography/primary/theme-template.json`)
+      );
+      await fs.writeFile(
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/typography/primary/${theme}.json`),
+        templatePrimaryTypo.toString("utf-8").replaceAll("<theme>", theme)
+      );
+      const templateSecondaryTypo = await fs.readFile(
+        path.join(TOKEN_TEMPLATE_FILES_PATH, `primitives/modes/typography/secondary/theme-template.json`)
+      );
+      await fs.writeFile(
+        path.join(TOKENS_TARGET_DIR, `primitives/modes/typography/secondary/${theme}.json`),
+        templateSecondaryTypo.toString("utf-8").replaceAll("<theme>", theme)
+      );
     }
     const template = await fs.readFile(path.join(TOKEN_TEMPLATE_FILES_PATH, `themes/theme-template.json`));
     await fs.writeFile(

package/dist/src/init/generateMetadataJson.js

@@ -2,11 +2,13 @@ import { normalizeTokenSetName } from "./utils.js";
 function generateMetadataJson(modes, themes) {
   return {
     tokenSetOrder: [
-      "primitives/globals",
-      "primitives/typography/default",
+      "primitives/modes/globals",
+      "primitives/modes/typography/default",
       ...modes.flatMap((mode) => [
-        `primitives/colors/${normalizeTokenSetName(mode)}/global`,
-        ...themes.map((theme) => `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`)
+        `primitives/modes/colors/${normalizeTokenSetName(mode)}/global`,
+        ...themes.map(
+          (theme) => `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`
+        )
       ]),
       ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`),
       "semantic/color",

package/dist/src/init/generateThemesJson.js

@@ -2,7 +2,33 @@ import { randomUUID } from "node:crypto";
 import { TokenSetStatus } from "@tokens-studio/types";
 import { normalizeTokenSetName } from "./utils.js";
 function generateThemesJson(modes, themes) {
-  return [...generateModesGroup(modes, themes), ...generateThemesGroup(themes), generateSemanticGroup()];
+  return [
+    ...generateSizeGroup(),
+    ...generateThemesGroup(themes),
+    ...generateTypographyGroup(themes),
+    ...generateModesGroup(modes, themes),
+    generateSemanticGroup()
+  ];
+}
+function generateSizeGroup() {
+  return [
+    {
+      id: randomUUID(),
+      name: "default",
+      selectedTokenSets: {
+        "primitives/size/default": TokenSetStatus.ENABLED
+      },
+      group: "Size"
+    },
+    {
+      id: randomUUID(),
+      name: "compact",
+      selectedTokenSets: {
+        "primitives/size/compact": TokenSetStatus.ENABLED
+      },
+      group: "Size"
+    }
+  ];
 }
 function generateModesGroup(modes, themes) {
   return modes.map(
@@ -10,10 +36,10 @@ function generateModesGroup(modes, themes) {
       id: randomUUID(),
       name: mode,
       selectedTokenSets: Object.fromEntries([
-        [`primitives/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
+        [`primitives/modes/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
         ...themes.map(
           (theme) => [
-            `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
+            `primitives/modes/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,
             TokenSetStatus.ENABLED
           ]
         )
@@ -41,12 +67,37 @@ function generateSemanticGroup() {
     selectedTokenSets: {
       "semantic/style": TokenSetStatus.ENABLED,
       "semantic/color": TokenSetStatus.ENABLED,
-      "primitives/globals": TokenSetStatus.SOURCE,
-      "primitives/typography/default": TokenSetStatus.SOURCE
+      "primitives/globals": TokenSetStatus.SOURCE
     },
     group: "Semantic"
   };
 }
+function generateTypographyGroup(themes) {
+  return [
+    {
+      id: randomUUID(),
+      name: "primary",
+      selectedTokenSets: Object.fromEntries(
+        themes.map((theme) => [
+          `primitives/modes/typography/primary/${normalizeTokenSetName(theme)}`,
+          TokenSetStatus.ENABLED
+        ])
+      ),
+      group: "Typography"
+    },
+    {
+      id: randomUUID(),
+      name: "secondary",
+      selectedTokenSets: Object.fromEntries(
+        themes.map((theme) => [
+          `primitives/modes/typography/secondary/${normalizeTokenSetName(theme)}`,
+          TokenSetStatus.ENABLED
+        ])
+      ),
+      group: "Typography"
+    }
+  ];
+}
 export {
   generateThemesJson as default
 };

package/dist/src/init/nextStepsMarkdown.js

@@ -23,8 +23,8 @@ function nextStepsMarkdown(themes, modes, tokensTargetDir, packageName) {
 1. Go to https://theme.designsystemet.no and set up a color theme
 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/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}.json\`  `).join("\n")}
+   the corresponding file under \`${tokensTargetDir}\`:
+${themeModeCombinations.map(([theme, mode]) => `     **${theme}, ${mode}**: \`primitives/modes/colors/${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/init/template/default-files/design-tokens/primitives/globals.json

@@ -1,21 +1,20 @@
 {
   "border-width": {
     "1": {
-      "type": "borderWidth",
-      "value": "1px"
+      "$type": "borderWidth",
+      "$value": "1px"
     },
     "2": {
-      "type": "borderWidth",
-      "value": "2px"
+      "$type": "borderWidth",
+      "$value": "2px"
     }
   },
   "shadow": {
     "100": {
-      "type": "boxShadow",
-      "value": [
+      "$type": "boxShadow",
+      "$value": [
         {
           "color": "rgba(0,0,0,0.16)",
-          "type": "dropShadow",
           "x": "0",
           "y": "0",
           "blur": "1",
@@ -26,17 +25,15 @@
           "y": "1",
           "blur": "2",
           "spread": "0",
-          "color": "rgba(0,0,0,0.12)",
-          "type": "dropShadow"
+          "color": "rgba(0,0,0,0.12)"
         }
       ]
     },
     "200": {
-      "type": "boxShadow",
-      "value": [
+      "$type": "boxShadow",
+      "$value": [
         {
           "color": "rgba(0,0,0,0.15)",
-          "type": "dropShadow",
           "x": "0",
           "y": "0",
           "blur": "1",
@@ -44,7 +41,6 @@
         },
         {
           "color": "rgba(0,0,0,0.12)",
-          "type": "dropShadow",
           "x": "0",
           "y": "1",
           "blur": "2",
@@ -55,17 +51,15 @@
           "y": "2",
           "blur": "4",
           "spread": "0",
-          "color": "rgba(0,0,0,0.1)",
-          "type": "dropShadow"
+          "color": "rgba(0,0,0,0.1)"
         }
       ]
     },
     "300": {
-      "type": "boxShadow",
-      "value": [
+      "$type": "boxShadow",
+      "$value": [
         {
           "color": "rgba(0,0,0,0.14)",
-          "type": "dropShadow",
           "x": "0",
           "y": "0",
           "blur": "1",
@@ -73,7 +67,6 @@
         },
         {
           "color": "rgba(0,0,0,0.12)",
-          "type": "dropShadow",
           "x": "0",
           "y": "2",
           "blur": "4",
@@ -84,17 +77,15 @@
           "y": "4",
           "blur": "8",
           "spread": "0",
-          "color": "rgba(0,0,0,0.12)",
-          "type": "dropShadow"
+          "color": "rgba(0,0,0,0.12)"
         }
       ]
     },
     "400": {
-      "type": "boxShadow",
-      "value": [
+      "$type": "boxShadow",
+      "$value": [
         {
           "color": "rgba(0,0,0,0.13)",
-          "type": "dropShadow",
           "x": "0",
           "y": "0",
           "blur": "1",
@@ -102,7 +93,6 @@
         },
         {
           "color": "rgba(0,0,0,0.13)",
-          "type": "dropShadow",
           "x": "0",
           "y": "3",
           "blur": "5",
@@ -113,17 +103,15 @@
           "y": "6",
           "blur": "12",
           "spread": "0",
-          "color": "rgba(0,0,0,0.14)",
-          "type": "dropShadow"
+          "color": "rgba(0,0,0,0.14)"
         }
       ]
     },
     "500": {
-      "type": "boxShadow",
-      "value": [
+      "$type": "boxShadow",
+      "$value": [
         {
           "color": "rgba(0,0,0,0.12)",
-          "type": "dropShadow",
           "x": "0",
           "y": "0",
           "blur": "1",
@@ -131,7 +119,6 @@
         },
         {
           "color": "rgba(0,0,0,0.16)",
-          "type": "dropShadow",
           "x": "0",
           "y": "4",
           "blur": "8",
@@ -142,56 +129,33 @@
           "y": "12",
           "blur": "24",
           "spread": "0",
-          "color": "rgba(0,0,0,0.16)",
-          "type": "dropShadow"
+          "color": "rgba(0,0,0,0.16)"
         }
       ]
     }
   },
   "border-radius": {
-    "2": {
-      "type": "borderRadius",
-      "value": "2"
-    },
-    "4": {
-      "type": "borderRadius",
-      "value": "4"
-    },
-    "8": {
-      "type": "borderRadius",
-      "value": "8"
-    },
-    "12": {
-      "type": "borderRadius",
-      "value": "12"
-    },
-    "16": {
-      "type": "borderRadius",
-      "value": "16"
-    },
-    "24": {
-      "type": "borderRadius",
-      "value": "24"
-    },
-    "32": {
-      "type": "borderRadius",
-      "value": "32"
-    },
-    "9999": {
-      "type": "borderRadius",
-      "value": "9999"
+    "base": {
+      "$type": "borderRadius",
+      "$value": "4"
     }
   },
   "opacity": {
     "30": {
-      "type": "opacity",
-      "value": "30%"
+      "$type": "opacity",
+      "$value": "30%"
     }
   },
   "sizing": {
     "base": {
-      "type": "sizing",
-      "value": "4"
+      "$type": "sizing",
+      "$value": "4"
+    }
+  },
+  "spacing": {
+    "base": {
+      "$type": "spacing",
+      "$value": "4"
     }
   }
 }

package/dist/src/init/template/default-files/design-tokens/primitives/size/default.json

@@ -0,0 +1,175 @@
+{
+  "line-height": {
+    "sm": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "lineHeights",
+      "$value": "130%"
+    },
+    "md": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "lineHeights",
+      "$value": "150%"
+    },
+    "lg": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "lineHeights",
+      "$value": "170%"
+    }
+  },
+  "font-size": {
+    "1": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "12"
+    },
+    "2": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "13"
+    },
+    "3": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "14"
+    },
+    "4": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "16"
+    },
+    "5": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "18"
+    },
+    "6": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "21"
+    },
+    "7": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "24"
+    },
+    "8": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "30"
+    },
+    "9": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "36"
+    },
+    "10": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "48"
+    },
+    "11": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "fontSizes",
+      "$value": "60"
+    }
+  },
+  "letter-spacing": {
+    "1": {
+      "$type": "letterSpacing",
+      "$value": "-1%"
+    },
+    "2": {
+      "$type": "letterSpacing",
+      "$value": "-0.5%"
+    },
+    "3": {
+      "$type": "letterSpacing",
+      "$value": "-0.25%"
+    },
+    "4": {
+      "$type": "letterSpacing",
+      "$value": "-0.15%"
+    },
+    "5": {
+      "$type": "letterSpacing",
+      "$value": "0%"
+    },
+    "6": {
+      "$type": "letterSpacing",
+      "$value": "0.15%"
+    },
+    "7": {
+      "$type": "letterSpacing",
+      "$value": "0.25%"
+    },
+    "8": {
+      "$type": "letterSpacing",
+      "$value": "0.5%"
+    },
+    "9": {
+      "$extensions": {
+        "studio.tokens": {
+          "modify": {}
+        }
+      },
+      "$type": "letterSpacing",
+      "$value": "1.5%"
+    }
+  }
+}