@digdir/designsystemet 1.0.0-next.32 → 1.0.0-next.34

package/dist/bin/designsystemet.js

@@ -4,23 +4,26 @@ import chalk from "chalk";
 import { convertToHex } from "../src/colors/index.js";
 import { createTokensPackage } from "../src/init/createTokensPackage.js";
 import migrations from "../src/migrations/index.js";
-import { buildTokens } from "../src/tokens/build/index.js";
-import { createTokens } from "../src/tokens/create//index.js";
+import { buildTokens } from "../src/tokens/build.js";
+import { createTokens } from "../src/tokens/create.js";
+import { writeTokens } from "../src/tokens/write.js";
 program.name("Designsystemet").description("CLI for working with Designsystemet").showHelpAfterError();
 function makeTokenCommands() {
   const tokenCmd = createCommand("tokens");
-  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, "./design-tokens").option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).action((opts) => {
-    const tokens = typeof opts.tokens === "string" ? opts.tokens : "./design-tokens";
+  const DEFAULT_TOKENSDIR = "./design-tokens";
+  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).action((opts) => {
+    const tokens = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENSDIR;
     const out = typeof opts.out === "string" ? opts.out : "./dist/tokens";
     const preview = opts.preview;
     console.log(`Bulding tokens in ${chalk.green(tokens)}`);
     return buildTokens({ tokens, out, preview });
   });
-  tokenCmd.command("create").description("Create Designsystemet tokens").option("-w, --write [string]", `Output directory for created ${chalk.blue("design-tokens")}`).option("-a, --accent <number>", `Accent hex color`).option("-n, --neutral <number>", `Neutral hex color`).option("-b1, --brand1 <number>", `Brand1 hex color`).option("-b2, --brand2 <number>", `Brand2 hex color`).option("-b3, --brand3 <number>", `Brand3 hex color`).option("-f, --font-family <string>", `Font family`).action(async (opts) => {
-    console.log(`Creating tokens with options ${chalk.green(JSON.stringify(opts))}`);
-    const family = typeof opts.fontFamily === "string" ? opts.fontFamily : "Inter";
-    const write2 = typeof opts.write === "boolean" ? "./design-tokens" : opts.write;
+  tokenCmd.command("create").description("Create Designsystemet tokens").requiredOption("-a, --accent <number>", `Accent hex color`).requiredOption("-n, --neutral <number>", `Neutral hex color`).requiredOption("-b1, --brand1 <number>", `Brand1 hex color`).requiredOption("-b2, --brand2 <number>", `Brand2 hex color`).requiredOption("-b3, --brand3 <number>", `Brand3 hex color`).option("-w, --write [string]", `Output directory for created ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-f, --font-family <string>", `Font family`, "Inter").option("--theme <string>", `Theme name`, "theme").action(async (opts) => {
+    const { theme, fontFamily } = opts;
+    console.log(`Creating tokens with options ${chalk.green(JSON.stringify(opts, null, 2))}`);
+    const write = typeof opts.write === "boolean" ? DEFAULT_TOKENSDIR : opts.write;
     const props = {
+      themeName: theme,
       colors: {
         accent: convertToHex(opts.accent),
         neutral: convertToHex(opts.neutral),
@@ -29,11 +32,14 @@ function makeTokenCommands() {
         brand3: convertToHex(opts.brand3)
       },
       typography: {
-        family
-      },
-      write: write2
+        fontFamily
+      }
     };
-    await createTokens(props);
+    const tokens = createTokens(props);
+    if (write) {
+      await writeTokens({ writeDir: write, tokens, themeName: theme });
+    }
+    return Promise.resolve();
   });
   return tokenCmd;
 }

package/dist/src/colors/theme.js

@@ -229,7 +229,7 @@ const getBaseColor = (color) => {
   return conv.hex;
 };
 const getCssVariable = (colorType, colorNumber) => {
-  return `--ds-${colorType}-${getColorNameFromNumber(colorNumber).toLowerCase().replace(/\s/g, "-")}`;
+  return `--ds-color-${colorType}-${getColorNameFromNumber(colorNumber).toLowerCase().replace(/\s/g, "-")}`;
 };
 export {
   baseColors,

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

@@ -1,10 +1,10 @@
-import { register } from "@tokens-studio/sd-transforms";
+import { expandTypesMap, register } from "@tokens-studio/sd-transforms";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import { outputReferencesFilter } from "style-dictionary/utils";
 import * as formats from "./formats/css.js";
 import { jsTokens } from "./formats/js-tokens.js";
-import { nameKebab, sizeRem, typographyShorthand } from "./transformers.js";
+import { nameKebab, sizeRem, typographyName } from "./transformers.js";
 import { permutateThemes as permutateThemes_ } from "./utils/permutateThemes.js";
 import { pathStartsWithOneOf, typeEquals } from "./utils/utils.js";
 void register(StyleDictionary, { withSDBuiltins: false });
@@ -15,7 +15,7 @@ const separator = "_";
 const fileHeader = () => [`These files are generated from design tokens defind using Token Studio`];
 StyleDictionary.registerTransform(sizeRem);
 StyleDictionary.registerTransform(nameKebab);
-StyleDictionary.registerTransform(typographyShorthand);
+StyleDictionary.registerTransform(typographyName);
 StyleDictionary.registerFormat(jsTokens);
 StyleDictionary.registerFormat(formats.colormode);
 StyleDictionary.registerFormat(formats.semantic);
@@ -26,7 +26,7 @@ const dsTransformers = [
   "ts/size/px",
   sizeRem.name,
   "ts/typography/fontWeight",
-  typographyShorthand.name,
+  typographyName.name,
   "ts/color/modifiers",
   "ts/color/css/hexrgba",
   "ts/size/lineheight",
@@ -102,7 +102,7 @@ const semanticVariables = ({ outPath, theme }) => {
           {
             destination: `semantic.css`,
             format: formats.semantic.name,
-            filter: (token) => (!token.isSource || isCalculatedToken(token)) && !typeEquals(["color", "fontWeight", "fontFamily"], token)
+            filter: (token) => (!token.isSource || isCalculatedToken(token)) && !typeEquals(["color", "fontWeight", "fontFamily", "typography"], token)
           }
         ],
         options: {
@@ -146,13 +146,17 @@ const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
     }
   };
 };
-const typographyCSS = ({ outPath, theme, typography }) => {
+const typographyVariables = ({ outPath, theme, typography }) => {
   const selector = `${typography === "primary" ? ":root, " : ""}[data-ds-typography="${typography}"]`;
   const layer = `ds.theme.typography.${typography}`;
   return {
     usesDtcg: true,
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
+    expand: {
+      include: ["typography"],
+      typesMap: { ...expandTypesMap, typography: { ...expandTypesMap.typography, letterSpacing: "dimension" } }
+    },
     platforms: {
       css: {
         prefix,
@@ -161,7 +165,14 @@ const typographyCSS = ({ outPath, theme, typography }) => {
         layer,
         buildPath: `${outPath}/${theme}/`,
         basePxFontSize,
-        transforms: [nameKebab.name, "ts/size/px", sizeRem.name, "ts/size/lineheight", "ts/typography/fontWeight"],
+        transforms: [
+          nameKebab.name,
+          "ts/size/px",
+          sizeRem.name,
+          "ts/size/lineheight",
+          "ts/typography/fontWeight",
+          typographyName.name
+        ],
         files: [
           {
             destination: `typography/${typography}.css`,
@@ -223,5 +234,5 @@ export {
   semanticVariables,
   separator,
   typescriptTokens,
-  typographyCSS
+  typographyVariables
 };

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

@@ -1,7 +1,6 @@
 import * as R from "ramda";
-import { createPropertyFormatter, fileHeader, getReferences, usesReferences } from "style-dictionary/utils";
-import { prefix } from "../configs.js";
-import { getValue, typeEquals } from "../utils/utils.js";
+import { createPropertyFormatter, fileHeader, usesReferences } from "style-dictionary/utils";
+import { getValue } from "../utils/utils.js";
 const prefersColorScheme = (mode, content) => `
 @media (prefers-color-scheme: ${mode}) {
   [data-ds-color-mode="auto"] ${content}
@@ -21,10 +20,12 @@ const colormode = {
       format: "css",
       usesDtcg
     });
-    const colorSchemeProperty = mode_ === "dark" || mode_ === "light" ? `color-scheme: ${mode_};
+    const colorSchemeProperty = mode_ === "dark" || mode_ === "light" ? `
+  color-scheme: ${mode_};
 ` : "";
+    const formattedTokens = dictionary.allTokens.map(format).join("\n");
     const content = `{
-${allTokens.map(format).join("\n")}
+${formattedTokens}
 ${colorSchemeProperty}}
 `;
     const autoSelectorContent = ["light", "dark"].includes(mode_) ? prefersColorScheme(mode_, content) : "";
@@ -40,7 +41,6 @@ const calculatedVariable = R.pipe(R.split(/:(.*?);/g), (split) => `${split[0]}:
 const semantic = {
   name: "ds/css-semantic",
   format: async ({ dictionary, file, options, platform }) => {
-    const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
     const { selector, isCalculatedToken, layer } = platform;
     const header = await fileHeader({ file });
@@ -50,7 +50,7 @@ const semantic = {
       format: "css",
       usesDtcg
     });
-    const formatTokens = R.map((token) => {
+    const formattedTokens = R.map((token) => {
       const originalValue = getValue(token.original);
       if (usesReferences(originalValue) && typeof outputReferences === "function" && outputReferences?.(token, { dictionary })) {
         if (isCalculatedToken?.(token, options)) {
@@ -58,10 +58,9 @@ const semantic = {
         }
       }
       return format(token);
-    });
-    const formattedVariables = formatTokens(allTokens);
+    }, dictionary.allTokens);
     const content = `{
-${formattedVariables.join("\n")}
+${formattedTokens.join("\n")}
 }
 `;
     const body = R.isNotNil(layer) ? `@layer ${layer} {
@@ -72,28 +71,9 @@ ${selector} ${content}
     return header + body;
   }
 };
-const sortByType = R.sortBy((token) => token?.$type === "typography");
-const getVariableName = R.pipe(
-  R.split(":"),
-  R.head,
-  R.defaultTo(""),
-  R.trim,
-  (name) => `var(${name})`
-);
-const bemify = R.pipe(
-  (path) => {
-    const filteredPath = path.filter((p) => p !== "typography");
-    const withPrefix = R.concat([prefix], R.remove(0, 0, filteredPath));
-    const [rest, last] = R.splitAt(-1, withPrefix);
-    const className = `${rest.join("-")}--${R.head(last)}`;
-    return className;
-  },
-  R.trim,
-  R.toLower
-);
-const classSelector = R.pipe(R.prop("path"), bemify);
-const sortTypographyLast = R.sortWith([
-  R.ascend((token) => typeEquals("typography")(token) ? 1 : 0)
+const typographyFontFamilyPredicate = R.allPass([
+  R.pathSatisfies(R.includes("typography"), ["path"]),
+  R.pathSatisfies(R.includes("fontFamily"), ["path"])
 ]);
 const typography = {
   name: "ds/css-typography",
@@ -107,67 +87,12 @@ const typography = {
       format: "css",
       usesDtcg
     });
-    const sortedTokens = sortTypographyLast(dictionary.allTokens);
-    const formattedTokens = R.pipe(
-      sortByType,
-      R.reduce(
-        (acc, token) => {
-          if (typeEquals("fontweight", token)) {
-            const className = `
-  .${classSelector(token)} {
-    font-weight: ${getValue(token)};
-  }`;
-            return Object.assign(acc, {
-              variables: [...acc.variables, format(token)],
-              classes: [...acc.classes, className]
-            });
-          }
-          if (typeEquals("lineheight", token)) {
-            const className = `
-  .${classSelector(token)} {
-    line-height: ${getValue(token)};
-  }`;
-            return Object.assign(acc, {
-              variables: [...acc.variables, format(token)],
-              classes: [...acc.classes, className]
-            });
-          }
-          if (typeEquals("typography", token)) {
-            let references = [];
-            try {
-              references = getReferences(getValue(token.original), dictionary.tokens);
-            } catch (error) {
-              console.error("Error getting references", error);
-              throw new Error(JSON.stringify(token, null, 2));
-            }
-            const fontweight = R.find(typeEquals(["fontweight"]))(references);
-            const lineheight = R.find(typeEquals(["lineheight"]))(references);
-            const fontsize = R.find(typeEquals(["fontsize"]))(references);
-            const letterSpacing = R.find(typeEquals(["dimension"]))(references);
-            const fontSizeVar = fontsize ? getVariableName(format(fontsize)) : null;
-            const fontWeightVar = fontweight ? getVariableName(format(fontweight)) : null;
-            const lineheightVar = lineheight ? getVariableName(format(lineheight)) : null;
-            const letterSpacingVar = letterSpacing ? getVariableName(format(letterSpacing)) : null;
-            const className = `
-  .${classSelector(token)} {
-    ${fontSizeVar ? `font-size: ${fontSizeVar};` : ""}
-    ${lineheightVar ? `line-height: ${lineheightVar};` : ""}
-    ${fontWeightVar ? `font-weight: ${fontWeightVar};` : ""}
-    ${letterSpacingVar ? `letter-spacing: ${letterSpacingVar};` : ""}
-  }`;
-            return Object.assign(acc, { classes: [className, ...acc.classes] });
-          }
-          return Object.assign(acc, { variables: [...acc.variables, format(token)] });
-        },
-        { variables: [], classes: [] }
-      )
-    )(sortedTokens);
-    const classes = formattedTokens.classes.join("\n");
-    const variables = formattedTokens.variables.join("\n");
+    console.log("dictionary.allTokens", dictionary.allTokens);
+    const filteredTokens = R.reject(typographyFontFamilyPredicate, dictionary.allTokens);
+    const formattedTokens = R.pipe(R.map(format), R.join("\n"))(filteredTokens);
     const content = selector ? `${selector} {
-${variables}
-${classes}
-}` : classes;
+${formattedTokens}
+}` : formattedTokens;
     const body = R.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }` : content;

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

@@ -34,18 +34,18 @@ const nameKebab = {
     });
   }
 };
-const typographyShorthand = {
-  name: "typography/shorthand",
-  type: "value",
+const typographyName = {
+  name: "name/typography",
+  type: "name",
   transitive: true,
-  filter: (token) => typeEquals("typography", token),
+  // expanded tokens have different type so we match on path instead
+  filter: (token) => pathStartsWithOneOf(["typography"], token),
   transform: (token) => {
-    const typography = getValue(token);
-    return `${typography.fontWeight} ${typography.fontSize}/${typography.lineHeight} '${typography.fontFamily}'`;
+    return token.name.replace("-typography", "");
   }
 };
 export {
   nameKebab,
   sizeRem,
-  typographyShorthand
+  typographyName
 };

package/dist/src/tokens/{build/index.js → build.js}

@@ -3,8 +3,8 @@ import path from "node:path";
 import chalk from "chalk";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
-import * as configs from "./configs.js";
-import { makeEntryFile } from "./utils/entryfile.js";
+import * as configs from "./build/configs.js";
+import { makeEntryFile } from "./build/utils/entryfile.js";
 const { permutateThemes, getConfigs } = configs;
 const sd = new StyleDictionary();
 async function buildTokens(options) {
@@ -23,7 +23,7 @@ async function buildTokens(options) {
   const semanticThemes = R.filter((val) => val.mode === "light" && val.typography === "primary", themes);
   const colorModeConfigs = getConfigs(configs.colorModeVariables, outPath, tokensDir, colormodeThemes);
   const semanticConfigs = getConfigs(configs.semanticVariables, outPath, tokensDir, semanticThemes);
-  const typographyConfigs = getConfigs(configs.typographyCSS, outPath, tokensDir, typographyThemes);
+  const typographyConfigs = getConfigs(configs.typographyVariables, outPath, tokensDir, typographyThemes);
   const storefrontConfigs = getConfigs(configs.typescriptTokens, storefrontOutDir, tokensDir, colormodeThemes);
   if (typographyConfigs.length > 0) {
     console.log(`

package/dist/src/tokens/create.js

@@ -0,0 +1,100 @@
+import { baseColors, generateScaleForColor } from "../colors/index.js";
+const createColorTokens = (colorArray) => {
+  const obj = {};
+  const $type = "color";
+  for (let i = 0; i < colorArray.length; i++) {
+    if (i === 13 && colorArray.length >= 14) {
+      obj["contrast-1"] = {
+        $type,
+        $value: colorArray[i].hex
+      };
+    } else if (i === 14 && colorArray.length >= 15) {
+      obj["contrast-2"] = {
+        $type,
+        $value: colorArray[i].hex
+      };
+    } else {
+      obj[i + 1] = { $type, $value: colorArray[i].hex };
+    }
+  }
+  return obj;
+};
+const generateTypographyTokens = (themeName, { fontFamily }) => {
+  return {
+    [themeName]: {
+      main: {
+        $type: "fontFamilies",
+        $value: fontFamily ?? "Inter"
+      },
+      bold: {
+        $type: "fontWeights",
+        $value: "Medium"
+      },
+      "extra-bold": {
+        $type: "fontWeights",
+        $value: "Semi bold"
+      },
+      regular: {
+        $type: "fontWeights",
+        $value: "Regular"
+      }
+    }
+  };
+};
+const generateThemeTokens = (themeName, theme, colors) => {
+  const accentColors = generateScaleForColor(colors.accent, theme);
+  const neutralColors = generateScaleForColor(colors.neutral, theme);
+  const brand1Colors = generateScaleForColor(colors.brand1, theme);
+  const brand2Colors = generateScaleForColor(colors.brand2, theme);
+  const brand3Colors = generateScaleForColor(colors.brand3, theme);
+  return {
+    [themeName]: {
+      accent: createColorTokens(accentColors),
+      neutral: createColorTokens(neutralColors),
+      brand1: createColorTokens(brand1Colors),
+      brand2: createColorTokens(brand2Colors),
+      brand3: createColorTokens(brand3Colors)
+    }
+  };
+};
+const generateGlobalTokens = (theme) => {
+  const blueScale = generateScaleForColor(baseColors.blue, theme);
+  const greenScale = generateScaleForColor(baseColors.green, theme);
+  const orangeScale = generateScaleForColor(baseColors.orange, theme);
+  const purpleScale = generateScaleForColor(baseColors.purple, theme);
+  const redScale = generateScaleForColor(baseColors.red, theme);
+  const yellowScale = generateScaleForColor(baseColors.yellow, theme);
+  return {
+    global: {
+      blue: createColorTokens(blueScale),
+      green: createColorTokens(greenScale),
+      orange: createColorTokens(orangeScale),
+      purple: createColorTokens(purpleScale),
+      red: createColorTokens(redScale),
+      yellow: createColorTokens(yellowScale)
+    }
+  };
+};
+const createTokens = (opts) => {
+  const { colors, typography, themeName: name } = opts;
+  const tokens = {
+    colors: {
+      light: {
+        [name]: generateThemeTokens(name, "light", colors),
+        global: generateGlobalTokens("light")
+      },
+      dark: { [name]: generateThemeTokens(name, "dark", colors), global: generateGlobalTokens("dark") },
+      contrast: {
+        [name]: generateThemeTokens(name, "contrast", colors),
+        global: generateGlobalTokens("contrast")
+      }
+    },
+    typography: {
+      primary: generateTypographyTokens(name, typography)
+    }
+  };
+  return tokens;
+};
+export {
+  createTokens
+};

package/dist/src/tokens/design-tokens/default/Figma/components.json

@@ -0,0 +1,22 @@
+{
+  "switch": {
+    "circle": {
+      "small": {
+        "$type": "sizing",
+        "$value": "{sizing.5} - {switch.border}"
+      },
+      "medium": {
+        "$type": "sizing",
+        "$value": "{sizing.6} - {switch.border}"
+      },
+      "large": {
+        "$type": "sizing",
+        "$value": "{sizing.7} - {switch.border}"
+      }
+    },
+    "border": {
+      "$type": "sizing",
+      "$value": "4"
+    }
+  }
+}

package/dist/src/tokens/design-tokens/default/primitives/globals.json

@@ -0,0 +1,161 @@
+{
+  "border-width": {
+    "1": {
+      "$type": "borderWidth",
+      "$value": "1px"
+    },
+    "2": {
+      "$type": "borderWidth",
+      "$value": "2px"
+    }
+  },
+  "shadow": {
+    "100": {
+      "$type": "boxShadow",
+      "$value": [
+        {
+          "color": "rgba(0,0,0,0.16)",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "1",
+          "blur": "2",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.12)"
+        }
+      ]
+    },
+    "200": {
+      "$type": "boxShadow",
+      "$value": [
+        {
+          "color": "rgba(0,0,0,0.15)",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.12)",
+          "x": "0",
+          "y": "1",
+          "blur": "2",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "2",
+          "blur": "4",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.1)"
+        }
+      ]
+    },
+    "300": {
+      "$type": "boxShadow",
+      "$value": [
+        {
+          "color": "rgba(0,0,0,0.14)",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.12)",
+          "x": "0",
+          "y": "2",
+          "blur": "4",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "4",
+          "blur": "8",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.12)"
+        }
+      ]
+    },
+    "400": {
+      "$type": "boxShadow",
+      "$value": [
+        {
+          "color": "rgba(0,0,0,0.13)",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.13)",
+          "x": "0",
+          "y": "3",
+          "blur": "5",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "6",
+          "blur": "12",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.14)"
+        }
+      ]
+    },
+    "500": {
+      "$type": "boxShadow",
+      "$value": [
+        {
+          "color": "rgba(0,0,0,0.12)",
+          "x": "0",
+          "y": "0",
+          "blur": "1",
+          "spread": "0"
+        },
+        {
+          "color": "rgba(0,0,0,0.16)",
+          "x": "0",
+          "y": "4",
+          "blur": "8",
+          "spread": "0"
+        },
+        {
+          "x": "0",
+          "y": "12",
+          "blur": "24",
+          "spread": "0",
+          "color": "rgba(0,0,0,0.16)"
+        }
+      ]
+    }
+  },
+  "border-radius": {
+    "base": {
+      "$type": "borderRadius",
+      "$value": "4"
+    }
+  },
+  "opacity": {
+    "30": {
+      "$type": "opacity",
+      "$value": "30%"
+    }
+  },
+  "sizing": {
+    "base": {
+      "$type": "sizing",
+      "$value": "4"
+    }
+  },
+  "spacing": {
+    "base": {
+      "$type": "spacing",
+      "$value": "4"
+    }
+  }
+}