@digdir/designsystemet 0.1.0-next.20 → 0.1.0-next.21

package/dist/bin/designsystemet.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 import { Argument, Command, program } from "@commander-js/extra-typings";
 import chalk from "chalk";
+import { makeInitCommand } from "../src/init/index.js";
 import migrations from "../src/migrations/index.js";
 import { run } from "../src/tokens/build.js";
-import { makeInitCommand } from "../src/init/index.js";
 program.name("Designsystemet").description("CLI for working with Designsystemet");
 program.command("tokens").showHelpAfterError().description("run Designsystemet token builder").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";

package/dist/src/colors/colorUtils.js

@@ -1,6 +1,6 @@
-import { Hsluv } from "hsluv";
-import chroma from "chroma-js";
 import { APCAcontrast, sRGBtoY } from "apca-w3";
+import chroma from "chroma-js";
+import { Hsluv } from "hsluv";
 const hexToCssHsl = (hex, valuesOnly = false) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   let r = 0;
@@ -12,9 +12,14 @@ const hexToCssHsl = (hex, valuesOnly = false) => {
     g = parseInt(result[2], 16);
     b = parseInt(result[3], 16);
   }
-  r /= 255, g /= 255, b /= 255;
-  const max = Math.max(r, g, b), min = Math.min(r, g, b);
-  let h, s, l = (max + min) / 2;
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  let l = (max + min) / 2;
   if (max == min) {
     h = s = 0;
   } else {
@@ -40,7 +45,9 @@ const hexToCssHsl = (hex, valuesOnly = false) => {
   return cssString;
 };
 const hexToHSL = (H) => {
-  let r = 0, g = 0, b = 0;
+  let r = 0;
+  let g = 0;
+  let b = 0;
   if (H.length == 4) {
     r = parseInt("0x" + H[1] + H[1]);
     g = parseInt("0x" + H[2] + H[2]);
@@ -53,8 +60,12 @@ const hexToHSL = (H) => {
   r /= 255;
   g /= 255;
   b /= 255;
-  let h = 0, s = 0, l = 0;
-  const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
+  let h = 0;
+  let s = 0;
+  let l = 0;
+  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;
@@ -79,8 +90,12 @@ const hslArrToCss = (HSL) => {
 const HSLToHex = (h, s, l) => {
   s /= 100;
   l /= 100;
-  let r = 0, g = 0, b = 0;
-  const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
   if (0 <= h && h < 60) {
     r = c;
     g = x;
@@ -116,9 +131,7 @@ const HSLToHex = (h, s, l) => {
 };
 const hexToRgb = (hex) => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
-    return r + r + g + g + b + b;
-  });
+  hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result ? {
     r: parseInt(result[1], 16),
@@ -127,9 +140,9 @@ const hexToRgb = (hex) => {
   } : null;
 };
 const luminanceFromRgb = (r, g, b) => {
-  const a = [Number(r), Number(g), Number(b)].map(function(v) {
+  const a = [Number(r), Number(g), Number(b)].map((v) => {
     v /= 255;
-    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
   });
   return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
 };
@@ -146,9 +159,8 @@ const luminanceFromHex = (hex) => {
 const getRatioFromLum = (lum1, lum2) => {
   if (lum1 !== null && lum2 !== null) {
     return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
-  } else {
-    return -1;
   }
+  return -1;
 };
 const getHslLightessFromHex = (hex) => {
   return chroma(hex).hsl()[2];
@@ -187,11 +199,11 @@ const areColorsContrasting = (color1, color2, type = "aa") => {
   if (contrast !== null) {
     if (type === "aaa") {
       return contrast >= 7;
-    } else if (type === "aa") {
+    }
+    if (type === "aa") {
       return contrast >= 4.5;
-    } else {
-      return contrast >= 3;
     }
+    return contrast >= 3;
   }
   return false;
 };
@@ -207,7 +219,7 @@ const getApcaContrastLc = (textColor, backgroundColor) => {
   return 0;
 };
 const isHexColor = (hex) => {
-  return typeof hex === "string" && hex.length === 6 && !isNaN(Number("0x" + hex));
+  return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
 };
 export {
   HSLToHex,

package/dist/src/colors/themeUtils.js

@@ -155,7 +155,8 @@ const canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
   const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
   if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {
     return true;
-  } else if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
+  }
+  if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
     return true;
   }
   return false;

package/dist/src/init/createTokensPackage.js

@@ -1,12 +1,12 @@
-import path from "node:path";
 import fs from "node:fs/promises";
+import path from "node:path";
 import chalk from "chalk";
 import prompts from "prompts";
-import packageJsonTemplate from "./template/template-files/package.json" with { type: "json" };
 import generateMetadata from "./generateMetadataJson.js";
 import generateThemes from "./generateThemesJson.js";
-import { toGeneratedCssFileName, normalizeTokenSetName, toValidPackageName } from "./utils.js";
 import { nextStepsMarkdown } from "./nextStepsMarkdown.js";
+import packageJsonTemplate from "./template/template-files/package.json" with { type: "json" };
+import { normalizeTokenSetName, toGeneratedCssFileName, toValidPackageName } from "./utils.js";
 const MODES = ["Light", "Dark", "Contrast"];
 const promptOptions = {
   onCancel: () => {

package/dist/src/init/generateMetadataJson.js

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

package/dist/src/init/generateThemesJson.js

@@ -2,11 +2,7 @@ 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 [...generateModesGroup(modes, themes), ...generateThemesGroup(themes), generateSemanticGroup()];
 }
 function generateModesGroup(modes, themes) {
   return modes.map(
@@ -14,10 +10,7 @@ function generateModesGroup(modes, themes) {
       id: randomUUID(),
       name: mode,
       selectedTokenSets: Object.fromEntries([
-        [
-          `primitives/colors/${normalizeTokenSetName(mode)}/global`,
-          TokenSetStatus.ENABLED
-        ],
+        [`primitives/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
         ...themes.map(
           (theme) => [
             `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,

package/dist/src/migrations/codemods/css/plugins.js

@@ -1,6 +1,6 @@
-import * as R from "ramda";
 import chalk from "chalk";
 import hash from "object-hash";
+import * as R from "ramda";
 const printDelete = (text) => console.log(`${chalk.red("Deleted:")} ${text}`.replace(/"|'/g, ""));
 const deleteMsg = (decl, from) => `${chalk.yellow(from)} @ ${chalk.gray(`${JSON.stringify(decl.source?.input.file)}:${decl.source?.start?.line}:${decl.source?.start?.column}`)}`;
 const cssClassRename = (dictionary) => ({

package/dist/src/migrations/codemods/css/run.js

@@ -1,6 +1,6 @@
-import fs from "fs";
-import postcss from "postcss";
+import fs from "node:fs";
 import glob from "fast-glob";
+import postcss from "postcss";
 const runCssCodemod = async ({ plugins = [], globPattern = "./**/*.css" }) => {
   const processor = postcss(plugins);
   const transform = async () => {

package/dist/src/migrations/codemods/jsx/run.js

@@ -1,6 +1,6 @@
+import chalk from "chalk";
 import glob from "fast-glob";
 import { run as jscodeshift } from "jscodeshift/src/Runner.js";
-import chalk from "chalk";
 const transformer = `${import.meta.dirname}/classname-prefix.ts`;
 const runJSXCodemod = async ({ globPattern = "./**/*.tsx", dry }) => {
   const options = {

package/dist/src/tokens/actions.js

@@ -1,6 +1,6 @@
-import fs from "fs-extra";
-import glob from "fast-glob";
 import chalk from "chalk";
+import glob from "fast-glob";
+import fs from "fs-extra";
 import * as R from "ramda";
 const sortLightmodeFirst = R.sortWith([R.descend(R.includes("light")), R.descend(R.includes("secondary"))]);
 const header = `@charset "UTF-8";
@@ -10,7 +10,7 @@ const header = `@charset "UTF-8";
 `;
 const makeEntryFile = {
   name: "make_entryfile",
-  do: async function(dictionary, platform) {
+  do: async (dictionary, platform) => {
     const { outPath, theme, log } = platform;
     const writePath = `${outPath}/${theme}.css`;
     if (log?.verbosity !== "silent") {

package/dist/src/tokens/build.js

@@ -1,8 +1,8 @@
-import path from "path";
-import fs from "fs";
-import StyleDictionary from "style-dictionary";
-import * as R from "ramda";
+import fs from "node:fs";
+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";
 const { permutateThemes, getConfigs } = configs;
 const sd = new StyleDictionary();

package/dist/src/tokens/configs.js

@@ -1,12 +1,12 @@
 import * as tokenStudio from "@tokens-studio/sd-transforms";
+import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import { outputReferencesFilter } from "style-dictionary/utils";
-import * as R from "ramda";
-import { permutateThemes as permutateThemes_ } from "./utils/permutateThemes.js";
-import { nameKebab, typographyShorthand, sizeRem } from "./transformers.js";
-import { jsTokens } from "./formats/js-tokens.js";
-import * as formats from "./formats/css.js";
 import { makeEntryFile } from "./actions.js";
+import * as formats from "./formats/css.js";
+import { jsTokens } from "./formats/js-tokens.js";
+import { nameKebab, sizeRem, typographyShorthand } from "./transformers.js";
+import { permutateThemes as permutateThemes_ } from "./utils/permutateThemes.js";
 import { typeEquals } from "./utils/utils.js";
 void tokenStudio.registerTransforms(StyleDictionary);
 const prefix = "ds";

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

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { fileHeader, createPropertyFormatter, usesReferences, getReferences } from "style-dictionary/utils";
+import { createPropertyFormatter, fileHeader, getReferences, usesReferences } from "style-dictionary/utils";
 import { prefix } from "../configs.js";
 import { getValue, typeEquals } from "../utils/utils.js";
 const prefersColorScheme = (mode, content) => `
@@ -9,7 +9,7 @@ const prefersColorScheme = (mode, content) => `
 `;
 const colormode = {
   name: "ds/css-colormode",
-  format: async function({ dictionary, file, options, platform }) {
+  format: async ({ dictionary, file, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences } = options;
     const { selector, mode, layer } = platform;
@@ -36,7 +36,7 @@ ${selector} ${content} ${autoSelectorContent}
 const calculatedVariable = R.pipe(R.split(/:(.*?);/g), (split) => `${split[0]}: calc(${R.trim(split[1])});`);
 const semantic = {
   name: "ds/css-semantic",
-  format: async function({ dictionary, file, options, platform }) {
+  format: async ({ dictionary, file, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences } = options;
     const { selector, isCalculatedToken, layer } = platform;
@@ -91,7 +91,7 @@ const sortTypographyLast = R.sortWith([
 ]);
 const typography = {
   name: "ds/css-typography",
-  format: async function({ dictionary, file, options, platform }) {
+  format: async ({ dictionary, file, options, platform }) => {
     const { outputReferences } = options;
     const { selector, layer } = platform;
     const header = await fileHeader({ file });

package/dist/src/tokens/formats/js-tokens.js

@@ -1,5 +1,5 @@
 import * as R from "ramda";
-import { fileHeader, createPropertyFormatter } from "style-dictionary/utils";
+import { createPropertyFormatter, fileHeader } from "style-dictionary/utils";
 import { getType } from "../utils/utils.js";
 const groupByType = R.groupBy((token) => getType(token));
 const removeUnwatedTokens = R.filter(
@@ -8,7 +8,7 @@ const removeUnwatedTokens = R.filter(
 const toCssVarName = R.pipe(R.split(":"), R.head, R.trim);
 const jsTokens = {
   name: "ds/js-tokens",
-  format: async function({ dictionary, file }) {
+  format: async ({ dictionary, file }) => {
     const format = createPropertyFormatter({
       dictionary,
       format: "css"

package/dist/src/tokens/utils/noCase.js

@@ -8,11 +8,7 @@ function noCase(input, options = {}) {
     transform = lowerCase,
     delimiter = " "
   } = options;
-  const result = replace(
-    replace(input, splitRegexp, "$1\0$2"),
-    stripRegexp,
-    "\0"
-  );
+  const result = replace(replace(input, splitRegexp, "$1\0$2"), stripRegexp, "\0");
   let start = 0;
   let end = result.length;
   while (result.charAt(start) === "\0") start++;

package/dist/src/tokens/utils/permutateThemes.js

@@ -1,5 +1,5 @@
-import * as R from "ramda";
 import { TokenSetStatus } from "@tokens-studio/types";
+import * as R from "ramda";
 function mapThemesToSetsObject(themes) {
   return themes.map((theme) => ({ name: theme.name, selectedTokenSets: filterTokenSets(theme.selectedTokenSets) }));
 }
@@ -49,7 +49,8 @@ function filterTokenSets(tokensets) {
   return Object.entries(tokensets).filter(([, val]) => val !== TokenSetStatus.DISABLED).sort((a, b) => {
     if (a[1] === TokenSetStatus.SOURCE && b[1] === TokenSetStatus.ENABLED) {
       return -1;
-    } else if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) {
+    }
+    if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) {
       return 1;
     }
     return 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet",
-  "version": "0.1.0-next.20",
+  "version": "0.1.0-next.21",
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "repository": {
@@ -14,18 +14,12 @@
   "files": [
     "./dist/**"
   ],
+  "bin": "dist/bin/designsystemet.js",
   "exports": {
-    "./color": "./src/colors/index.ts"
+    "./color": "./dist/src/colors/index.js"
   },
-  "bin": "bin/designsystemet.js",
   "publishConfig": {
-    "access": "public",
-    "bin": {
-      "designsystemet": "dist/bin/designsystemet.js"
-    },
-    "exports": {
-      "./color": "./dist/src/colors/index.js"
-    }
+    "access": "public"
   },
   "scripts": {
     "designsystemet": "tsx ./bin/designsystemet.ts",
@@ -63,7 +57,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/glob": "^8.1.0",
     "@types/jscodeshift": "^0.11.11",
-    "@types/node": "^20.12.7",
+    "@types/node": "^20.14.12",
     "@types/object-hash": "^3",
     "@types/prompts": "^2.4.9",
     "@types/ramda": "^0.29.9",