@digdir/designsystemet 0.1.0-next.31 → 1.0.0-next.33

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/init/template/default-files/design-tokens/semantic/color.json

@@ -551,11 +551,11 @@
       },
       "contrast-default": {
         "$type": "color",
-        "$value": "{global.yellow.contrast-1}"
+        "$value": "{global.orange.contrast-1}"
       },
       "contrast-subtle": {
         "$type": "color",
-        "$value": "{global.yellow.contrast-2}"
+        "$value": "{global.orange.contrast-2}"
       }
     },
     "focus": {

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) {

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"
+    }
+  }
+}

package/dist/src/tokens/design-tokens/default/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%"
+    }
+  }
+}