@digdir/designsystemet 0.0.2 → 0.0.3

package/dist/bin/designsystemet.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+import {
+  migrations_default
+} from "../chunk-XTBS6KQY.js";
+import "../chunk-3INHRMDA.js";
+import "../chunk-AFUBGWSA.js";
+import "../chunk-AH6WYHXT.js";
+import "../chunk-N6YJGJKH.js";
+import {
+  run
+} from "../chunk-Q4LKHGOS.js";
+import "../chunk-FSFXGZ5S.js";
+import "../chunk-HG7XELK3.js";
+import "../chunk-F6JN3G6R.js";
+
+// bin/designsystemet.ts
+import { Argument, program } from "@commander-js/extra-typings";
+import chalk from "chalk";
+program.name("Designsystemet").description("CLI for working with Designsystemet");
+program.command("tokens").showHelpAfterError().description("run Designsystemet token builder").option("-t, --tokens <string>", 'Path to "design-tokens"', "../../design-tokens").option("-p, --preview").action((opts) => {
+  const tokens = typeof opts.tokens === "string" ? opts.tokens : "";
+  console.log(`Bulding tokens in ${chalk.green(tokens)}`);
+  return run({ tokens });
+});
+program.command("migrate").showHelpAfterError().description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations_default))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.css").action((migrationKey, opts) => {
+  const { glob, list } = opts;
+  if (list) {
+    Object.keys(migrations_default).forEach((key) => {
+      console.log(key);
+    });
+  } else if (migrationKey) {
+    const migration = migrations_default[migrationKey];
+    if (!migration) {
+      console.error("Migration not found!");
+      throw "Aborting";
+    }
+    console.log(`Applying migration ${chalk.blue(migrationKey)} with glob: ${chalk.green(glob)}`);
+    migration?.(glob).then(() => console.log(`Migration ${chalk.blue(migrationKey)} finished`)).catch((error) => console.log(error));
+  } else {
+    console.log("Migrate: please specify a migration name or --list");
+  }
+});
+await program.parseAsync(process.argv);

package/dist/chunk-3INHRMDA.js

@@ -0,0 +1,30 @@
+import {
+  cssVarCodemod
+} from "./chunk-N6YJGJKH.js";
+
+// src/migrations/light-dark.ts
+var light_dark_default = (glob) => cssVarCodemod({
+  globPath: glob,
+  dictionary: {
+    "--fds-semantic-surface-first-light": "--fds-semantic-surface-first-subtle",
+    "--fds-semantic-surface-first-light-hover": "--fds-semantic-surface-first-subtle-hover",
+    "--fds-semantic-surface-first-light-active": "--fds-semantic-surface-first-subtle-active",
+    "--fds-semantic-surface-first-dark": "--fds-semantic-surface-first-strong",
+    "--fds-semantic-surface-second-light": "--fds-semantic-surface-second-subtle",
+    "--fds-semantic-surface-second-light-hover": "--fds-semantic-surface-second-subtle-hover",
+    "--fds-semantic-surface-second-light-active": "--fds-semantic-surface-second-subtle-active",
+    "--fds-semantic-surface-second-dark": "--fds-semantic-surface-second-strong",
+    "--fds-semantic-surface-third-light": "--fds-semantic-surface-third-subtle",
+    "--fds-semantic-surface-third-light-hover": "--fds-semantic-surface-third-subtle-hover",
+    "--fds-semantic-surface-third-light-active": "--fds-semantic-surface-third-subtle-active",
+    "--fds-semantic-surface-third-dark": "--fds-semantic-surface-third-strong",
+    "--fds-semantic-surface-neutral-dark": "--fds-semantic-surface-neutral-strong",
+    "--fds-semantic-surface-neutral-dark-hover": "--fds-semantic-surface-neutral-strong-hover",
+    "--fds-semantic-border-action-dark": "--fds-semantic-border-action-strong",
+    "--fds-semantic-border-action-dark-hover": "--fds-semantic-border-action-strong-hover"
+  }
+});
+
+export {
+  light_dark_default
+};

package/dist/chunk-AFUBGWSA.js

@@ -0,0 +1,15 @@
+import {
+  cssVarCodemod
+} from "./chunk-N6YJGJKH.js";
+
+// src/migrations/prefix-ds.ts
+var prefix_ds_default = (glob) => cssVarCodemod({
+  globPath: glob,
+  dictionary: {
+    "--fds": "--ds"
+  }
+});
+
+export {
+  prefix_ds_default
+};

package/dist/chunk-AH6WYHXT.js

@@ -0,0 +1,219 @@
+import {
+  cssVarCodemod
+} from "./chunk-N6YJGJKH.js";
+
+// src/migrations/tokens-v2.ts
+var tokens_v2_default = (glob) => cssVarCodemod({
+  globPath: glob,
+  dictionary: {
+    "--fds-semantic-surface-first-light": "--fds-color-brand1-surface-default",
+    "--fds-semantic-surface-first-light-hover": "--fds-color-brand1-surface-hover",
+    "--fds-semantic-surface-first-light-active": "--fds-color-brand1-surface-active",
+    "--fds-semantic-surface-first-dark": "",
+    "--fds-semantic-surface-second-light": "--fds-color-brand2-surface-default",
+    "--fds-semantic-surface-second-light-hover": "--fds-color-brand2-surface-hover",
+    "--fds-semantic-surface-second-light-active": "--fds-color-brand2-surface-active",
+    "--fds-semantic-surface-second-dark": "",
+    "--fds-semantic-surface-third-light": "--fds-color-brand3-surface-default",
+    "--fds-semantic-surface-third-light-hover": "--fds-color-brand3-surface-hover",
+    "--fds-semantic-surface-third-light-active": "--fds-color-brand3-surface-active",
+    "--fds-semantic-surface-third-dark": "",
+    "--fds-semantic-surface-action-first-subtle": "--fds-color-accent-surface-default",
+    "--fds-semantic-surface-action-first-subtle-hover": "--fds-color-accent-surface-hover",
+    "--fds-semantic-surface-action-first-default": "--fds-color-accent-base-default",
+    "--fds-semantic-surface-action-first-hover": "--fds-color-accent-base-hover",
+    "--fds-semantic-surface-action-first-active": "--fds-color-accent-base-active",
+    "--fds-semantic-surface-action-first-no_fill": "--fds-color-accent-contrast-first",
+    "--fds-semantic-surface-action-first-no_fill-hover": "--fds-color-accent-surface-default",
+    "--fds-semantic-surface-action-first-no_fill-active": "--fds-color-accent-surface-hover",
+    "--fds-semantic-surface-action-second-subtle": "--fds-color-accent-surface-default",
+    "--fds-semantic-surface-action-second-subtle-hover": "--fds-color-accent-surface-hover",
+    "--fds-semantic-surface-action-second-default": "--fds-color-accent-base-default",
+    "--fds-semantic-surface-action-second-hover": "--fds-color-accent-base-hover",
+    "--fds-semantic-surface-action-second-active": "--fds-color-accent-base-active",
+    "--fds-semantic-surface-action-second-no_fill": "--fds-color-accent-contrast-first",
+    "--fds-semantic-surface-action-second-no_fill-hover": "--fds-color-accent-surface-default",
+    "--fds-semantic-surface-action-second-no_fill-active": "--fds-color-accent-surface-hover",
+    "--fds-semantic-surface-action-subtle": "--fds-color-accent-surface-default",
+    "--fds-semantic-surface-action-subtle-hover": "--fds-color-accent-surface-hover",
+    "--fds-semantic-surface-action-default": "--fds-color-accent-base-default",
+    "--fds-semantic-surface-action-hover": "--fds-color-accent-base-hover",
+    "--fds-semantic-surface-action-active": "--fds-color-accent-base-active",
+    "--fds-semantic-surface-action-no_fill": "--fds-color-accent-contrast-first",
+    "--fds-semantic-surface-action-no_fill-hover": "--fds-color-accent-surface-default",
+    "--fds-semantic-surface-action-no_fill-active": "--fds-color-accent-surface-hover",
+    "--fds-semantic-surface-action-checked": "--fds-color-accent-base-default",
+    "--fds-semantic-surface-neutral-default": "--fds-color-neutral-background-default",
+    "--fds-semantic-surface-neutral-selected": "",
+    "--fds-semantic-surface-neutral-subtle": "--fds-color-neutral-background-subtle",
+    "--fds-semantic-surface-neutral-subtle-hover": "--fds-color-neutral-surface-default",
+    "--fds-semantic-surface-neutral-dark": "--fds-color-neutral-base-default",
+    "--fds-semantic-surface-neutral-dark-hover": "--fds-color-neutral-base-hover",
+    "--fds-semantic-surface-neutral-inverted": "",
+    "--fds-semantic-surface-success-subtle": "--fds-color-success-surface-default",
+    "--fds-semantic-surface-success-subtle-hover": "--fds-color-success-surface-hover",
+    "--fds-semantic-surface-success-default": "--fds-color-success-base-default",
+    "--fds-semantic-surface-success-hover": "--fds-color-success-base-hover",
+    "--fds-semantic-surface-success-active": "--fds-color-success-base-active",
+    "--fds-semantic-surface-success-no_fill": "--fds-color-success-contrast-first",
+    "--fds-semantic-surface-success-no_fill-hover": "--fds-color-success-surface-default",
+    "--fds-semantic-surface-success-no_fill-active": "--fds-color-success-surface-hover",
+    "--fds-semantic-surface-warning-subtle": "--fds-color-warning-surface-default",
+    "--fds-semantic-surface-warning-subtle-hover": "--fds-color-warning-surface-hover",
+    "--fds-semantic-surface-warning-default": "--fds-color-warning-base-default",
+    "--fds-semantic-surface-warning-default-hover": "--fds-color-warning-base-hover",
+    "--fds-semantic-surface-danger-subtle": "--fds-color-danger-surface-default",
+    "--fds-semantic-surface-danger-subtle-hover": "--fds-color-danger-surface-hover",
+    "--fds-semantic-surface-danger-default": "--fds-color-danger-base-default",
+    "--fds-semantic-surface-danger-hover": "--fds-color-danger-base-hover",
+    "--fds-semantic-surface-danger-active": "--fds-color-danger-base-active",
+    "--fds-semantic-surface-danger-no_fill": "--fds-color-danger-contrast-first",
+    "--fds-semantic-surface-danger-no_fill-hover": "--fds-color-danger-surface-default",
+    "--fds-semantic-surface-danger-no_fill-active": "--fds-color-danger-surface-hover",
+    "--fds-semantic-surface-info-subtle": "",
+    "--fds-semantic-surface-info-subtle-hover": "",
+    "--fds-semantic-surface-on_inverted-default": "",
+    "--fds-semantic-surface-on_inverted-hover": "",
+    "--fds-semantic-surface-on_inverted-active": "",
+    "--fds-semantic-surface-on_inverted-no_fill": "",
+    "--fds-semantic-surface-on_inverted-no_fill-hover": "",
+    "--fds-semantic-surface-on_inverted-no_fill-active": "",
+    "--fds-semantic-surface-focus-default": "",
+    "--fds-semantic-border-first-default": "",
+    "--fds-semantic-border-first-hover": "",
+    "--fds-semantic-border-first-active": "",
+    "--fds-semantic-border-second-default": "",
+    "--fds-semantic-border-second-hover": "",
+    "--fds-semantic-border-second-active": "",
+    "--fds-semantic-border-third-default": "",
+    "--fds-semantic-border-third-hover": "",
+    "--fds-semantic-border-third-active": "",
+    "--fds-semantic-border-action-first-subtle": "",
+    "--fds-semantic-border-action-first-subtle-hover": "",
+    "--fds-semantic-border-action-first-default": "",
+    "--fds-semantic-border-action-first-hover": "",
+    "--fds-semantic-border-action-first-active": "",
+    "--fds-semantic-border-action-second-subtle": "",
+    "--fds-semantic-border-action-second-subtle-hover": "",
+    "--fds-semantic-border-action-second-default": "",
+    "--fds-semantic-border-action-second-hover": "",
+    "--fds-semantic-border-action-second-active": "",
+    "--fds-semantic-border-action-subtle": "",
+    "--fds-semantic-border-action-subtle-hover": "",
+    "--fds-semantic-border-action-default": "",
+    "--fds-semantic-border-action-hover": "",
+    "--fds-semantic-border-action-active": "",
+    "--fds-semantic-border-action-dark": "",
+    "--fds-semantic-border-action-dark-hover": "",
+    "--fds-semantic-border-info-default": "",
+    "--fds-semantic-border-neutral-default": "",
+    "--fds-semantic-border-neutral-subtle": "",
+    "--fds-semantic-border-neutral-strong": "",
+    "--fds-semantic-border-success-default": "",
+    "--fds-semantic-border-success-hover": "",
+    "--fds-semantic-border-success-active": "",
+    "--fds-semantic-border-warning-default": "",
+    "--fds-semantic-border-warning-hover": "",
+    "--fds-semantic-border-warning-active": "",
+    "--fds-semantic-border-danger-default": "",
+    "--fds-semantic-border-danger-hover": "",
+    "--fds-semantic-border-danger-active": "",
+    "--fds-semantic-border-focus-outline": "",
+    "--fds-semantic-border-focus-boxshadow": "",
+    "--fds-semantic-border-on_inverted-default": "",
+    "--fds-semantic-border-input-default": "",
+    "--fds-semantic-border-input-hover": "",
+    "--fds-semantic-border-divider-default": "",
+    "--fds-semantic-border-divider-subtle": "",
+    "--fds-semantic-border-divider-strong": "",
+    "--fds-semantic-text-action-first-default": "",
+    "--fds-semantic-text-action-first-hover": "",
+    "--fds-semantic-text-action-first-active": "",
+    "--fds-semantic-text-action-first-on_action": "",
+    "--fds-semantic-text-action-second-default": "",
+    "--fds-semantic-text-action-second-hover": "",
+    "--fds-semantic-text-action-second-active": "",
+    "--fds-semantic-text-action-second-on_action": "",
+    "--fds-semantic-text-action-default": "",
+    "--fds-semantic-text-action-hover": "",
+    "--fds-semantic-text-action-active": "",
+    "--fds-semantic-text-action-on_action": "",
+    "--fds-semantic-text-success-default": "",
+    "--fds-semantic-text-success-hover": "",
+    "--fds-semantic-text-success-active": "",
+    "--fds-semantic-text-success-on_success": "",
+    "--fds-semantic-text-success-on_success_subtle": "",
+    "--fds-semantic-text-neutral-default": "",
+    "--fds-semantic-text-neutral-subtle": "",
+    "--fds-semantic-text-neutral-on_inverted": "",
+    "--fds-semantic-text-warning-default": "",
+    "--fds-semantic-text-warning-icon_warning": "",
+    "--fds-semantic-text-warning-on_warning": "",
+    "--fds-semantic-text-danger-default": "",
+    "--fds-semantic-text-danger-hover": "",
+    "--fds-semantic-text-danger-active": "",
+    "--fds-semantic-text-danger-on_danger": "",
+    "--fds-semantic-text-danger-on_danger_subtle": "",
+    "--fds-semantic-text-visited-default": "",
+    "--fds-semantic-background-default": "",
+    "--fds-semantic-background-subtle": "",
+    "--fds-typography-heading-2xlarge": "",
+    "--fds-typography-heading-xlarge": "",
+    "--fds-typography-heading-large": "",
+    "--fds-typography-heading-medium": "",
+    "--fds-typography-heading-small": "",
+    "--fds-typography-heading-xsmall": "",
+    "--fds-typography-heading-xxsmall": "",
+    "--fds-typography-ingress-large": "",
+    "--fds-typography-ingress-medium": "",
+    "--fds-typography-ingress-small": "",
+    "--fds-typography-ingress-xsmall": "",
+    "--fds-typography-paragraph-large": "",
+    "--fds-typography-paragraph-medium": "",
+    "--fds-typography-paragraph-small": "",
+    "--fds-typography-paragraph-xsmall": "",
+    "--fds-typography-paragraph-short-large": "",
+    "--fds-typography-paragraph-short-medium": "",
+    "--fds-typography-paragraph-short-small": "",
+    "--fds-typography-paragraph-short-xsmall": "",
+    "--fds-typography-paragraph-long-large": "",
+    "--fds-typography-paragraph-long-medium": "",
+    "--fds-typography-paragraph-long-small": "",
+    "--fds-typography-paragraph-long-xsmall": "",
+    "--fds-typography-label-large": "",
+    "--fds-typography-label-medium": "",
+    "--fds-typography-label-small": "",
+    "--fds-typography-label-xsmall": "",
+    "--fds-typography-error_message-large": "",
+    "--fds-typography-error_message-medium": "",
+    "--fds-typography-error_message-small": "",
+    "--fds-typography-error_message-xsmall": "",
+    "--fds-typography-interactive-large": "--fds-typography-paragraph-short-large",
+    "--fds-typography-interactive-medium": "--fds-typography-paragraph-short-medium",
+    "--fds-typography-interactive-small": "--fds-typography-paragraph-short-small",
+    "--fds-border_radius-interactive": "--fds-border-radius-md",
+    "--fds-border_radius-small": "--fds-border-radius-sm",
+    "--fds-border_radius-medium": "--fds-border-radius-md",
+    "--fds-border_radius-large": "--fds-border-radius-lg",
+    "--fds-border_radius-xlarge": "--fds-border-radius-xl",
+    "--fds-border_radius-xxlarge": "--fds-border-radius-2xl",
+    "--fds-border_radius-xxxlarge": "--fds-border-radius-3xl",
+    "--fds-border_radius-xxxxlarge": "--fds-border-radius-4xl",
+    "--fds-border_radius-full": "--fds-border-radius-full",
+    "--fds-base_spacing": "[delete]",
+    "--fds-base_sizing": "[delete]",
+    "--fds-border_width-default": "--fds-border-width-default",
+    "--fds-border_width-active": "--fds-border-width-active",
+    "--fds-border_width-tab_focus": "--fds-border-width-tab_focus",
+    // Skulle denne fjernes?
+    "--fds-shadow-xsmall": "--fds-shadow-xs",
+    "--fds-shadow-small": "--fds-shadow-sm",
+    "--fds-shadow-medium": "--fds-shadow-md",
+    "--fds-shadow-large": "--fds-shadow-lg",
+    "--fds-shadow-xlarge": "--fds-shadow-xl"
+  }
+});
+
+export {
+  tokens_v2_default
+};

package/dist/chunk-F6JN3G6R.js

@@ -0,0 +1,33 @@
+// src/tokens/noCase.ts
+var lowerCase = (text = "") => text.toLowerCase();
+var DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
+var DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
+function noCase(input, options = {}) {
+  const {
+    splitRegexp = DEFAULT_SPLIT_REGEXP,
+    stripRegexp = DEFAULT_STRIP_REGEXP,
+    transform = lowerCase,
+    delimiter = " "
+  } = options;
+  const result = replace(
+    replace(input, splitRegexp, "$1\0$2"),
+    stripRegexp,
+    "\0"
+  );
+  let start = 0;
+  let end = result.length;
+  while (result.charAt(start) === "\0")
+    start++;
+  while (result.charAt(end - 1) === "\0")
+    end--;
+  return result.slice(start, end).split("\0").map(transform).join(delimiter);
+}
+function replace(input, re, value) {
+  if (re instanceof RegExp)
+    return input.replace(re, value);
+  return re.reduce((input2, re2) => input2.replace(re2, value), input);
+}
+
+export {
+  noCase
+};

package/dist/chunk-FSFXGZ5S.js

@@ -0,0 +1,48 @@
+import {
+  noCase
+} from "./chunk-F6JN3G6R.js";
+
+// src/tokens/transformers.ts
+var sizeRem = {
+  name: "fds/size/toRem",
+  type: "value",
+  transitive: true,
+  filter: (token) => ["sizing", "spacing"].includes(token.type) && !token.name.includes("base"),
+  transform: (token, config) => {
+    const baseFont = config.basePxFontSize || 16;
+    const value = parseInt(token.value);
+    if (value === 0) {
+      return "0";
+    }
+    return `${value / baseFont}rem`;
+  }
+};
+var nameKebab = {
+  name: "name/cti/hierarchical-kebab",
+  type: "name",
+  transform: (token, options) => {
+    return noCase([options?.prefix].concat(token.path).join("-"), {
+      delimiter: "-",
+      stripRegexp: /[^A-Z0-9_]+/gi
+    });
+  }
+};
+var typographyShorthand = {
+  name: "typography/shorthand",
+  type: "value",
+  transitive: true,
+  filter: (token) => token.type === "typography",
+  transform: (token, config, options) => {
+    const { usesDtcg } = options;
+    const typography = usesDtcg ? token.$value : token.value;
+    const baseFontPx = config.basePxFontSize || 16;
+    const fontSize = `${parseInt(typography.fontSize) / baseFontPx}rem`;
+    return `${typography.fontWeight} ${fontSize}/${typography.lineHeight} '${typography.fontFamily}'`;
+  }
+};
+
+export {
+  sizeRem,
+  nameKebab,
+  typographyShorthand
+};

package/dist/chunk-HG7XELK3.js

@@ -0,0 +1,79 @@
+// src/tokens/formatters.ts
+import * as R from "ramda";
+import { fileHeader, createPropertyFormatter, usesReferences, getReferences } from "style-dictionary/utils";
+var scopedReferenceVariables = {
+  name: "css/variables-scoped-references",
+  format: async function({ dictionary, file, options }) {
+    const { allTokens, unfilteredTokens } = dictionary;
+    const { usesDtcg, outputReferences } = options;
+    const includeReferences = options.includeReferences;
+    let referencedTokens = [];
+    const format = createPropertyFormatter({
+      outputReferences,
+      dictionary,
+      format: "css"
+    });
+    const formatWithReference = createPropertyFormatter({
+      outputReferences: true,
+      dictionary,
+      format: "css"
+    });
+    const parseToken = (token, ignoreSource) => {
+      const originalValue = usesDtcg ? token.original.$value : token.original.value;
+      if (usesReferences(originalValue) && includeReferences(token)) {
+        const refs = getReferences(originalValue, unfilteredTokens ? unfilteredTokens : {});
+        referencedTokens = [...referencedTokens, ...refs.filter((x) => x.isSource)];
+        return formatWithReference(token);
+      }
+      if (ignoreSource && !token.isSource) {
+        return format(token);
+      }
+    };
+    const tokens = allTokens.map((t) => parseToken(t, true)).filter((x) => x);
+    const referenceTokens = referencedTokens.reduce((acc, token) => {
+      if (acc.find((x) => x.name === token.name)) {
+        return acc;
+      }
+      return [...acc, token];
+    }, []).map((token) => format(token)).filter((formattedValue) => formattedValue);
+    return fileHeader({ file }).then(
+      (fileHeaderText) => `
+${fileHeaderText}
+:root {
+${referenceTokens.length > 0 ? referenceTokens.join("\n") : ""}
+${tokens.join("\n")}
+}
+      `
+    );
+  }
+};
+var groupByType = R.groupBy((token) => token.type);
+var removeUnwatedTokens = R.filter(
+  (token) => !["fds-base_spacing", "fds-base_sizing"].includes(token.name)
+);
+var toCssVarName = R.pipe(R.split(":"), R.head, R.trim);
+var groupedTokens = {
+  name: "groupedTokens",
+  format: async function({ dictionary, file }) {
+    const format = createPropertyFormatter({
+      dictionary,
+      format: "css"
+    });
+    const formatTokens = R.map((token) => ({
+      ...token,
+      name: toCssVarName(format(token))
+    }));
+    const processTokens = R.pipe(removeUnwatedTokens, formatTokens, groupByType);
+    const tokens = processTokens(dictionary.allTokens);
+    const content = Object.entries(tokens).map(
+      ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")} 
+`
+    ).join("\n");
+    return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
+  }
+};
+
+export {
+  scopedReferenceVariables,
+  groupedTokens
+};

package/dist/chunk-N6YJGJKH.js

@@ -0,0 +1,38 @@
+// src/codemods/css-var-codemod.ts
+import fs from "fs";
+import * as R from "ramda";
+import postcss from "postcss";
+import glob from "fast-glob";
+var cssVarCodemod = async ({ dictionary, globPath = "./**/*.css" }) => {
+  const transformPlugin = {
+    postcssPlugin: "Replaces referenced CSS variables",
+    Declaration(decl) {
+      Object.keys(dictionary).forEach((key) => {
+        const newValue = dictionary[key];
+        if (R.isEmpty(newValue)) {
+        }
+        if (newValue === "[delete]") {
+        }
+        if (decl.value.includes(key) && !R.isEmpty(newValue)) {
+          decl.value = decl.value.replace(key, newValue);
+        }
+      });
+    }
+  };
+  const plugins = [transformPlugin];
+  const processor = postcss(plugins);
+  const transform = async () => {
+    const files = await glob(globPath, { ignore: ["node_modules/**"] });
+    const filePromises = files.map(async (file) => {
+      const contents = fs.readFileSync(file).toString();
+      const result = await processor.process(contents, { from: void 0 });
+      fs.writeFileSync(file, result.css);
+    });
+    await Promise.all(filePromises);
+  };
+  void transform();
+};
+
+export {
+  cssVarCodemod
+};

package/dist/chunk-Q4LKHGOS.js

@@ -0,0 +1,153 @@
+import {
+  nameKebab,
+  sizeRem,
+  typographyShorthand
+} from "./chunk-FSFXGZ5S.js";
+import {
+  groupedTokens,
+  scopedReferenceVariables
+} from "./chunk-HG7XELK3.js";
+
+// src/tokens/build.ts
+import path from "path";
+import fs from "fs";
+import { registerTransforms, permutateThemes } from "@tokens-studio/sd-transforms";
+import StyleDictionary from "style-dictionary";
+import * as R from "ramda";
+void registerTransforms(StyleDictionary);
+var prefix = "fds";
+var basePxFontSize = 16;
+var separator = "_";
+var fileHeader = () => [`These files are generated from design tokens defind using Token Studio`];
+StyleDictionary.registerTransform(sizeRem);
+StyleDictionary.registerTransform(nameKebab);
+StyleDictionary.registerTransform(typographyShorthand);
+StyleDictionary.registerFormat(groupedTokens);
+StyleDictionary.registerFormat(scopedReferenceVariables);
+StyleDictionary.registerTransformGroup({
+  name: "fds/css",
+  transforms: [
+    `ts/resolveMath`,
+    nameKebab.name,
+    sizeRem.name,
+    typographyShorthand.name,
+    "ts/color/modifiers",
+    "ts/color/css/hexrgba",
+    "ts/size/lineheight",
+    "ts/size/px",
+    "ts/shadow/css/shorthand"
+  ]
+});
+var processThemeName = R.pipe(R.replace(`${separator}semantic`, ""), R.toLower, R.split(separator));
+var getCSSConfig = ({ fileName = "unknown", buildPath = "unknown" }) => {
+  return {
+    log: { verbosity: "verbose" },
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      css: {
+        prefix,
+        basePxFontSize,
+        transformGroup: "fds/css",
+        buildPath,
+        files: [
+          {
+            destination: `${fileName}.css`,
+            format: scopedReferenceVariables.name
+          }
+        ],
+        options: {
+          fileHeader,
+          includeReferences: (token) => {
+            if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) && R.includes("semantic/color", token.filePath)) {
+              return true;
+            }
+            return false;
+          }
+        }
+      }
+    }
+  };
+};
+var getStorefrontConfig = ({ fileName = "unknown", buildPath = "unknown" }) => {
+  return {
+    log: { verbosity: "verbose" },
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      storefront: {
+        prefix,
+        basePxFontSize,
+        transformGroup: "fds/css",
+        buildPath,
+        files: [
+          {
+            destination: `${fileName}.ts`,
+            format: groupedTokens.name,
+            filter: (token) => {
+              return R.not(R.includes("themes", token.filePath));
+            }
+          }
+        ],
+        options: {
+          fileHeader
+        }
+      }
+    }
+  };
+};
+var sd = new StyleDictionary();
+async function run(options) {
+  const tokensPath = options.tokens;
+  const storefrontTokensOutPath = path.resolve("../../apps/storefront/tokens");
+  const packageTokensOutPath = path.resolve("../../packages/theme/brand");
+  const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensPath}/$themes.json`), "utf-8"));
+  const themes = permutateThemes($themes, {
+    separator
+  });
+  const getConfigs = (configCallback, outPath) => Object.entries(themes).map(([name, tokensets]) => {
+    const updatedSets = tokensets.map((x) => `${tokensPath}/${x}.json`);
+    const [fileName, folderName] = processThemeName(name);
+    const paritionPrimitives = /(?!.*global\.json).*primitives.*/;
+    const [source, include] = R.partition(R.test(paritionPrimitives), updatedSets);
+    const config_ = configCallback({
+      fileName,
+      buildPath: `${outPath}/${folderName}/`
+    });
+    const config = {
+      ...config_,
+      source,
+      include
+    };
+    console.log(config);
+    return [`${folderName}: ${fileName}`, config];
+  }).sort();
+  const tokenConfigs = getConfigs(getCSSConfig, packageTokensOutPath);
+  const storefrontConfigs = getConfigs(getStorefrontConfig, storefrontTokensOutPath);
+  if (tokenConfigs.length > 0) {
+    console.log("\u{1F371} Staring token builder");
+    console.log("\u27A1\uFE0F  Tokens path: ", tokensPath);
+    console.log("\n\u{1F3D7}\uFE0F  Start building CSS tokens");
+    await Promise.all(
+      tokenConfigs.map(async ([name, config]) => {
+        console.log(`\u{1F477} Processing ${name}`);
+        const tokensPackageSD = await sd.extend(config);
+        return tokensPackageSD.buildAllPlatforms();
+      })
+    );
+    console.log("\u{1F3C1} Finished building package tokens!");
+  }
+  if (storefrontConfigs.length > 0) {
+    console.log("\n\u{1F3D7}\uFE0F  Started building storefront tokens\u2026");
+    await Promise.all(
+      storefrontConfigs.map(async ([name, config]) => {
+        console.log(`\u{1F477} Processing ${name}`);
+        const storefrontSD = await sd.extend(config);
+        return storefrontSD.buildAllPlatforms();
+      })
+    );
+    console.log("\u{1F3C1} Finished building storefront tokens!");
+  }
+}
+
+export {
+  run
+};