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

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/utils/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAM5E;;;;GAIG;AACH,eAAO,MAAM,OAAO,UAAW,gBAAgB,WAAkD,CAAC;AAElG;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,gBAAgB,GAAG,WAAW,KAAG,CAAuC,CAAC;AAE5G;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,yDAAmB,MAAM,EAAE,GAAG,MAAM,SAAS,gBAAgB,aAMlF,CAAC;AAEH,eAAO,MAAM,mBAAmB,yDAAmB,MAAM,EAAE,SAAS,gBAAgB,aASlF,CAAC;AAEH,wBAAgB,eAAe,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAEhE;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,gBAAgB,GAAG,OAAO,CAEnE;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,gBAAgB,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,OAAO,CAKpG"}

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

@@ -17,9 +17,24 @@ const pathStartsWithOneOf = R.curry((paths, token) => {
   const matchPathsStartingWith = R.map((path) => R.startsWith([path], tokenPath), mapToLowerCase(paths));
   return hasAnyTruth(matchPathsStartingWith);
 });
+function isSemanticToken(token) {
+  return token.filePath.includes("semantic/");
+}
+function isGlobalColorToken(token) {
+  return typeEquals("color", token) && pathStartsWithOneOf(["global"], token);
+}
+function isColorCategoryToken(token, category) {
+  if (!category) {
+    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+  }
+  return R.startsWith(["color", category], token.path);
+}
 export {
   getType,
   getValue,
+  isColorCategoryToken,
+  isGlobalColorToken,
+  isSemanticToken,
   pathStartsWithOneOf,
   typeEquals
 };

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

@@ -0,0 +1,17 @@
+export declare const DEFAULT_COLOR = "accent";
+type Options = {
+    /** Design tokens path */
+    tokens: string;
+    /** Output directory for built tokens */
+    out: string;
+    /** Generate preview tokens */
+    preview: boolean;
+    /** Enable verbose output */
+    verbose: boolean;
+    /** Set the default "accent" color, if not overridden with data-color */
+    accentColor?: string;
+};
+export declare let buildOptions: Options | undefined;
+export declare function buildTokens(options: Options): Promise<void>;
+export {};
+//# sourceMappingURL=build.d.ts.map

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

@@ -0,0 +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"}

package/dist/src/tokens/build.js

@@ -1,91 +1,88 @@
-import fs from "node:fs";
+import fs from "node:fs/promises";
 import path from "node:path";
 import chalk from "chalk";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
-import * as configs from "./build/configs.js";
+import { configs, getConfigsForThemeDimensions } from "./build/configs.js";
 import { makeEntryFile } from "./build/utils/entryfile.js";
-const { permutateThemes, getConfigs } = configs;
+import { processThemeObject } from "./build/utils/getMultidimensionalThemes.js";
+const DEFAULT_COLOR = "accent";
+let buildOptions;
 const sd = new StyleDictionary();
+const buildConfigs = {
+  typography: { getConfig: configs.typographyVariables, dimensions: ["typography"] },
+  "color-mode": { getConfig: configs.colorModeVariables, dimensions: ["mode"] },
+  "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"],
+    options: { outPath: path.resolve("../../apps/storefront/tokens") },
+    enabled: () => buildOptions?.preview ?? false
+  },
+  entryFiles: {
+    name: "CSS entry files",
+    getConfig: configs.semanticVariables,
+    dimensions: ["semantic"],
+    build: async (sdConfigs, { outPath }) => {
+      await Promise.all(
+        sdConfigs.map(async ({ permutation: { theme } }) => {
+          console.log(`\u{1F477} ${theme}.css`);
+          const builtinColorsFilename = "builtin-colors.css";
+          const builtinColors = path.resolve(import.meta.dirname, "build", builtinColorsFilename);
+          await fs.copyFile(builtinColors, path.resolve(outPath, theme, builtinColorsFilename));
+          return makeEntryFile({ theme, outPath, buildPath: path.resolve(outPath, theme) });
+        })
+      );
+    }
+  }
+};
 async function buildTokens(options) {
-  const verbosity = options.verbose ? "verbose" : "silent";
+  buildOptions = options;
   const tokensDir = options.tokens;
-  const storefrontOutDir = path.resolve("../../apps/storefront/tokens");
   const outPath = path.resolve(options.out);
-  const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensDir}/$themes.json`), "utf-8"));
-  const relevant$themes = $themes.filter((theme) => {
-    const group = R.toLower(R.defaultTo("")(theme.group));
-    if (group === "size" && theme.name.toLowerCase() !== "default") return false;
-    return true;
-  });
-  const themes = permutateThemes(relevant$themes);
-  const typographyThemes = R.filter((val) => val.mode === "light", themes);
-  const colormodeThemes = R.filter((val) => val.typography === "primary", themes);
-  const semanticThemes = R.filter((val) => val.mode === "light" && val.typography === "primary", themes);
-  const colorModeConfigs = getConfigs(configs.colorModeVariables, outPath, tokensDir, colormodeThemes, verbosity);
-  const semanticConfigs = getConfigs(configs.semanticVariables, outPath, tokensDir, semanticThemes, verbosity);
-  const typographyConfigs = getConfigs(configs.typographyVariables, outPath, tokensDir, typographyThemes, verbosity);
-  const storefrontConfigs = getConfigs(
-    configs.typescriptTokens,
-    storefrontOutDir,
-    tokensDir,
-    colormodeThemes,
-    verbosity
+  const $themes = JSON.parse(await fs.readFile(path.resolve(`${tokensDir}/$themes.json`), "utf-8")).map(processThemeObject);
+  const relevant$themes = $themes.filter((theme) => R.not(theme.group === "size" && theme.name !== "default"));
+  if (!buildOptions.accentColor) {
+    const accentOrFirstMainColor = relevant$themes.find((theme) => theme.name === DEFAULT_COLOR) || relevant$themes.find((theme) => theme.group === "main-color");
+    buildOptions.accentColor = accentOrFirstMainColor?.name;
+  }
+  if (buildOptions.accentColor !== DEFAULT_COLOR) {
+    console.log("accent color:", buildOptions.accentColor);
+  }
+  const buildAndSdConfigs = R.map(
+    (val) => ({
+      buildConfig: val,
+      sdConfigs: getConfigsForThemeDimensions(val.getConfig, relevant$themes, val.dimensions, {
+        outPath,
+        tokensDir,
+        ...val.options
+      })
+    }),
+    buildConfigs
   );
   try {
-    if (typographyConfigs.length > 0) {
-      console.log(`
-\u{1F371} Building ${chalk.green("typography")}`);
-      await Promise.all(
-        typographyConfigs.map(async ({ theme, typography, config }) => {
-          console.log(`\u{1F477} ${theme} - ${typography}`);
-          const typographyClasses = await sd.extend(config);
-          return typographyClasses.buildAllPlatforms();
-        })
-      );
-    }
-    if (colorModeConfigs.length > 0) {
-      console.log(`
-\u{1F371} Building ${chalk.green("color-mode")}`);
-      await Promise.all(
-        colorModeConfigs.map(async ({ theme, mode, config }) => {
-          console.log(`\u{1F477} ${theme} - ${mode}`);
-          const themeVariablesSD = await sd.extend(config);
-          return themeVariablesSD.buildAllPlatforms();
-        })
-      );
-    }
-    if (semanticConfigs.length > 0) {
-      console.log(`
-\u{1F371} Building ${chalk.green("semantic")}`);
-      await Promise.all(
-        semanticConfigs.map(async ({ theme, config, semantic }) => {
-          console.log(`\u{1F477} ${theme} - ${semantic}`);
-          const typographyClasses = await sd.extend(config);
-          return typographyClasses.buildAllPlatforms();
-        })
-      );
-    }
-    if (storefrontConfigs.length > 0 && options.preview) {
-      console.log(`
-\u{1F371} Building ${chalk.green("Storefront preview tokens")}`);
-      await Promise.all(
-        storefrontConfigs.map(async ({ theme, mode, config }) => {
-          console.log(`\u{1F477} ${theme} - ${mode}`);
-          const storefrontSD = await sd.extend(config);
-          return storefrontSD.buildAllPlatforms();
-        })
-      );
-    }
-    if (semanticConfigs.length > 0) {
-      console.log(`
-\u{1F371} Building ${chalk.green("CSS file")}`);
-      await Promise.all(
-        semanticConfigs.map(async ({ theme }) => {
-          console.log(`\u{1F477} ${theme}.css`);
-          return makeEntryFile({ theme, outPath, buildPath: path.resolve(`${outPath}/${theme}`) });
-        })
-      );
+    for (const [key, { buildConfig, sdConfigs }] of R.toPairs(buildAndSdConfigs)) {
+      if (!(buildConfig.enabled?.() ?? true)) {
+        continue;
+      }
+      if (sdConfigs.length > 0) {
+        console.log(`
+\u{1F371} Building ${chalk.green(buildConfig.name ?? key)}`);
+        if (buildConfig.build) {
+          return await buildConfig.build(sdConfigs, { outPath, tokensDir, ...buildConfig.options });
+        }
+        await Promise.all(
+          sdConfigs.map(async ({ config, permutation }) => {
+            const modes = ["theme", ...buildConfig.dimensions];
+            const modeMessage = modes.map((x) => permutation[x]).join(" - ");
+            console.log(modeMessage);
+            return (await sd.extend(config)).buildAllPlatforms();
+          })
+        );
+      }
     }
   } catch (err) {
     if (err instanceof Error) {
@@ -95,5 +92,7 @@ async function buildTokens(options) {
   }
 }
 export {
+  DEFAULT_COLOR,
+  buildOptions,
   buildTokens
 };

package/dist/{types/src → src}/tokens/create.d.ts

@@ -1,4 +1,9 @@
 import type { Colors, Tokens, Typography } from './types.js';
+export declare const colorCliOptions: {
+    readonly main: "main-colors";
+    readonly support: "support-colors";
+    readonly neutral: "neutral-color";
+};
 export type CreateTokensOptions = {
     colors: Colors;
     typography: Typography;

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

@@ -0,0 +1 @@
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../src/tokens/create.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,EAAyB,UAAU,EAAE,MAAM,YAAY,CAAC;AAEpF,eAAO,MAAM,eAAe;;;;CAIlB,CAAC;AAEX,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,UAAU,EAAE,UAAU,CAAC;IACvB,SAAS,EAAE,MAAM,CAAC;CACnB,CAAC;AAgFF,eAAO,MAAM,YAAY,SAAU,mBAAmB,WAqBrD,CAAC"}

package/dist/src/tokens/create.js

@@ -1,4 +1,10 @@
+import * as R from "ramda";
 import { baseColors, generateScaleForColor } from "../colors/index.js";
+const colorCliOptions = {
+  main: "main-colors",
+  support: "support-colors",
+  neutral: "neutral-color"
+};
 const createColorTokens = (colorArray) => {
   const obj = {};
   const $type = "color";
@@ -42,18 +48,14 @@ const generateTypographyTokens = (themeName, { fontFamily }) => {
   };
 };
 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);
+  const main = R.map((color) => createColorTokens(generateScaleForColor(color, theme)), colors.main);
+  const support = R.map((color) => createColorTokens(generateScaleForColor(color, theme)), colors.support);
+  const neutral = createColorTokens(generateScaleForColor(colors.neutral, theme));
   return {
     [themeName]: {
-      accent: createColorTokens(accentColors),
-      neutral: createColorTokens(neutralColors),
-      brand1: createColorTokens(brand1Colors),
-      brand2: createColorTokens(brand2Colors),
-      brand3: createColorTokens(brand3Colors)
+      ...main,
+      ...support,
+      neutral
     }
   };
 };
@@ -96,5 +98,6 @@ const createTokens = (opts) => {
   return tokens;
 };
 export {
+  colorCliOptions,
   createTokens
 };

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

@@ -134,12 +134,6 @@
       ]
     }
   },
-  "border-radius": {
-    "base": {
-      "$type": "borderRadius",
-      "$value": "4"
-    }
-  },
   "opacity": {
     "30": {
       "$type": "opacity",
@@ -147,13 +141,13 @@
     }
   },
   "sizing": {
-    "base": {
+    "scale": {
       "$type": "sizing",
       "$value": "4"
     }
   },
   "spacing": {
-    "base": {
+    "scale": {
       "$type": "spacing",
       "$value": "4"
     }