@digdir/designsystemet 1.0.0-next.44 → 1.0.0-next.46

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

@@ -3,10 +3,10 @@ import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import { outputReferencesFilter } from "style-dictionary/utils";
 import { DEFAULT_COLOR, buildOptions } from "../build.js";
-import { isColorCategoryToken, pathStartsWithOneOf, typeEquals } from "../utils.js";
+import { isColorCategoryToken, isDigit, pathStartsWithOneOf, typeEquals } from "../utils.js";
 import { formats } from "./formats/css.js";
 import { jsTokens } from "./formats/js-tokens.js";
-import { nameKebab, resolveMath, sizeRem, typographyName } from "./transformers.js";
+import { resolveMath, sizeRem, typographyName, unitless } from "./transformers.js";
 import { getMultidimensionalThemes } from "./utils/getMultidimensionalThemes.js";
 void register(StyleDictionary, { withSDBuiltins: false });
 const usesDtcg = true;
@@ -14,18 +14,19 @@ const prefix = "ds";
 const basePxFontSize = 16;
 const fileHeader = () => [`These files are generated from design tokens defind using Token Studio`];
 StyleDictionary.registerTransform(sizeRem);
-StyleDictionary.registerTransform(nameKebab);
 StyleDictionary.registerTransform(typographyName);
 StyleDictionary.registerTransform(resolveMath);
+StyleDictionary.registerTransform(unitless);
 StyleDictionary.registerFormat(jsTokens);
 for (const format of Object.values(formats)) {
   StyleDictionary.registerFormat(format);
 }
 const dsTransformers = [
-  nameKebab.name,
+  "name/kebab",
   resolveMath.name,
   "ts/size/px",
   sizeRem.name,
+  unitless.name,
   "ts/typography/fontWeight",
   typographyName.name,
   "ts/color/modifiers",
@@ -34,12 +35,6 @@ const dsTransformers = [
   "shadow/css/shorthand"
 ];
 const paritionPrimitives = R.partition(R.test(/(?!.*global\.json).*primitives.*/));
-const outputColorReferences = (token) => {
-  if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) && R.includes("semantic/color", token.filePath)) {
-    return true;
-  }
-  return false;
-};
 const colorSchemeVariables = ({ "color-scheme": colorScheme = "light", theme }, { outPath }) => {
   const selector = `${colorScheme === "light" ? ":root, " : ""}[data-color-scheme="${colorScheme}"]`;
   const layer = `ds.theme.color-scheme.${colorScheme}`;
@@ -134,7 +129,6 @@ const colorCategoryVariables = (category) => ({ "color-scheme": colorScheme, the
 const semanticVariables = ({ theme }, { outPath }) => {
   const selector = `:root`;
   const layer = `ds.theme.semantic`;
-  const isCalculatedToken = (token) => pathStartsWithOneOf(["spacing", "sizing"], token);
   return {
     usesDtcg,
     preprocessors: ["tokens-studio"],
@@ -144,7 +138,6 @@ const semanticVariables = ({ theme }, { outPath }) => {
         outPath,
         theme,
         basePxFontSize,
-        isCalculatedToken,
         selector,
         layer,
         //
@@ -155,14 +148,20 @@ const semanticVariables = ({ theme }, { outPath }) => {
           {
             destination: `semantic.css`,
             format: formats.semantic.name,
-            filter: (token) => (!token.isSource || isCalculatedToken(token)) && !typeEquals(["color", "fontWeight", "fontFamily", "typography"], token)
+            filter: (token) => {
+              const unwantedPaths = pathStartsWithOneOf(["font-size", "line-height", "letter-spacing"], token);
+              const unwantedTypes = typeEquals(["color", "fontWeight", "fontFamily", "typography"], token);
+              const unwantedTokens = !(unwantedPaths || unwantedTypes);
+              return !token.isSource && unwantedTokens;
+            }
           }
         ],
         options: {
           fileHeader,
           outputReferences: (token, options) => {
             const include = pathStartsWithOneOf(["border-radius"], token);
-            return (include || isCalculatedToken(token)) && outputReferencesFilter(token, options);
+            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
+            return (include || isWantedSize) && outputReferencesFilter(token, options);
           }
         }
       }
@@ -183,26 +182,29 @@ const typescriptTokens = ({ "color-scheme": colorScheme, theme }, { outPath }) =
           {
             destination: `${colorScheme}.ts`,
             format: jsTokens.name,
-            outputReferences: outputColorReferences,
             filter: (token) => {
-              if (R.test(/primitives\/modes|\/themes/, token.filePath)) return false;
-              if (pathStartsWithOneOf(["border-width"], token)) return false;
-              if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) || R.includes("semantic", token.filePath)) {
-                return true;
-              }
-              return false;
+              if (pathStartsWithOneOf(["border-width", "letter-spacing", "border-radius"], token) && !R.includes("semantic", token.filePath))
+                return false;
+              const isSemanticColor = R.includes("semantic", token.filePath) && typeEquals(["color"], token);
+              const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
+              return isSemanticColor || wantedTypes;
             }
           }
         ],
         options: {
-          fileHeader
+          fileHeader,
+          outputReferences: (token, options) => {
+            const include = pathStartsWithOneOf(["border-radius"], token);
+            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
+            return (include || isWantedSize) && outputReferencesFilter(token, options);
+          }
         }
       }
     }
   };
 };
 const typographyVariables = ({ theme, typography }, { outPath }) => {
-  const selector = `${typography === "primary" ? ":root, " : ""}[data-ds-typography="${typography}"]`;
+  const selector = `${typography === "primary" ? ":root, " : ""}[data-typography="${typography}"]`;
   const layer = `ds.theme.typography.${typography}`;
   return {
     usesDtcg: true,
@@ -220,7 +222,7 @@ const typographyVariables = ({ theme, typography }, { outPath }) => {
         buildPath: `${outPath}/${theme}/`,
         basePxFontSize,
         transforms: [
-          nameKebab.name,
+          "name/kebab",
           "ts/size/px",
           sizeRem.name,
           "ts/size/lineheight",
@@ -233,11 +235,22 @@ const typographyVariables = ({ theme, typography }, { outPath }) => {
             format: formats.typography.name,
             filter: (token) => {
               const included = typeEquals(
-                ["typography", "fontweight", "fontFamily", "lineheight", "fontsize", "dimension", "font"],
+                ["typography", "fontweight", "fontFamily", "lineHeight", "dimension", "font", "fontsize"],
                 token
               );
               return included && !pathStartsWithOneOf(
-                ["spacing", "sizing", "border-width", "border-radius", "theme", "theme2", "theme3", "theme4"],
+                [
+                  "spacing",
+                  "sizing",
+                  "size",
+                  "_size",
+                  "border-width",
+                  "border-radius",
+                  "theme",
+                  "theme2",
+                  "theme3",
+                  "theme4"
+                ],
                 token
               );
             }

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

@@ -1,9 +1,49 @@
+import type { TransformedToken } from 'style-dictionary';
 import type { Format } from 'style-dictionary/types';
+/**
+ * In the given tokens array, inline and remove tokens that match the predicate
+ *
+ * Example: In pseudo-code, given the predicate `(token) => token.path === ['size', '1']` and the following tokens
+ * ```js
+ *  [
+ *    { path: ['size', 'base'], original: { $value: '8px' } },
+ *    { path: ['size', '1'], original: { $value: '{size.base} * 2' } },
+ *    { path: ['size', 'sm']: original: { $value: 'min({size.1}, 12px)' } }
+ *  ]
+ * ```
+ * would return
+ * ```js
+ *  [
+ *    { path: ['size', 'base'], original: { $value: '8px' } },
+ *    { path: ['size', 'sm']: original: { $value: 'min({size.base} * 2, 12px)' } }
+ *  ]
+ * ```
+ *
+ * @param shouldSquash - predicate to determine if token should be inlined
+ * @param tokens - array of tokens to transform
+ * @returns copy of `tokens` without those that matched the predicate,
+ *          where references to the matching tokens have been inlined
+ */
+export declare function squashTokens(shouldSquash: (t: TransformedToken) => boolean, tokens: TransformedToken[]): import("style-dictionary/types").TransformedToken[];
 declare module 'style-dictionary/types' {
     interface LocalOptions {
         replaceCategoryWith?: string;
     }
 }
+export declare const isNumericSizeToken: (t: TransformedToken) => boolean;
+export declare const isSquashTokens: (t: TransformedToken) => boolean;
+/**
+ * Overrides the default sizing formula with a custom one that supports [round()](https://developer.mozilla.org/en-US/docs/Web/CSS/round) if supported.
+ *
+ * @param format - Function to format a token into a CSS property string.
+ * @param tokens - Array of transformed tokens to format.
+ * @returns Object with formatted CSS strings for calc and round.
+ */
+export declare const overrideSizingFormula: (format: (t: TransformedToken) => string, token: TransformedToken) => {
+    name: string;
+    round: string;
+    calc: string;
+};
 export declare const formats: {
     colorScheme: Format;
     colorCategory: Format;

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

@@ -1 +1 @@
-{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/formats/css.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AA0DrD,OAAO,QAAQ,wBAAwB,CAAC;IACtC,UAAiB,YAAY;QAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B;CACF;AA2GD,eAAO,MAAM,OAAO;;;;;CAKc,CAAC"}
+{"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/formats/css.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAarD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,YAAY,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,uDAetG;AAsDD,OAAO,QAAQ,wBAAwB,CAAC;IACtC,UAAiB,YAAY;QAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B;CACF;AAmCD,eAAO,MAAM,kBAAkB,MAAO,gBAAgB,YAA4D,CAAC;AAEnH,eAAO,MAAM,cAAc,MAHY,gBAAgB,YAGkC,CAAC;AAE1F;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,WAAY,CAAC,CAAC,EAAE,gBAAgB,KAAK,MAAM,SAAS,gBAAgB;;;;CAYrG,CAAC;AA4FF,eAAO,MAAM,OAAO;;;;;CAKc,CAAC"}

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

@@ -1,7 +1,28 @@
 import * as R from "ramda";
-import { createPropertyFormatter, fileHeader, usesReferences } from "style-dictionary/utils";
-import { getValue, isColorCategoryToken, isGlobalColorToken, isSemanticToken } from "../../utils.js";
+import { createPropertyFormatter, fileHeader } from "style-dictionary/utils";
+import {
+  getValue,
+  isColorCategoryToken,
+  isDigit,
+  isGlobalColorToken,
+  isSemanticToken,
+  pathStartsWithOneOf
+} from "../../utils.js";
 import { colorCategories } from "../types.js";
+function squashTokens(shouldSquash, tokens) {
+  const [inlineableTokens, otherTokens] = R.partition(shouldSquash, tokens);
+  return otherTokens.map((token) => {
+    let transformed = getValue(token.original);
+    for (const ref of inlineableTokens) {
+      const refName = ref.path.join(".");
+      if (typeof transformed === "string") {
+        transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
+      }
+    }
+    const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
+    return tokenWithInlinedRefs;
+  });
+}
 const prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
   [data-color-scheme="auto"] ${content}
@@ -84,12 +105,43 @@ ${selector} ${content}
     return header + body;
   }
 };
-const calculatedVariable = R.pipe(R.split(/:(.*?);/g), (split) => `${split[0]}: calc(${R.trim(split[1])});`);
+const isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
+const isNumericSizeToken = (t) => pathStartsWithOneOf(["_size"], t) && isDigit(t.path[1]);
+const isSquashTokens = R.anyPass([isNumericBorderRadiusToken, isNumericSizeToken]);
+const overrideSizingFormula = (format, token) => {
+  const [name, value] = format(token).split(":");
+  const calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
+  const round = `round(down, ${calc}, 0.0625rem)`;
+  return {
+    name,
+    round,
+    calc
+  };
+};
+const formatSizingTokens = (format, tokens) => {
+  const { round, calc } = R.reduce(
+    (acc, token) => {
+      const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
+      return {
+        round: [...acc.round, `${name}: ${round2};`],
+        calc: [...acc.calc, `${name}: ${calc2};`]
+      };
+    },
+    { round: [], calc: [] },
+    tokens
+  );
+  return `
+${calc.join("\n")}
+
+  @supports (width: round(down, .1em, 1px)) {
+${round.join("\n")}
+  }`;
+};
 const semantic = {
   name: "ds/css-semantic",
   format: async ({ dictionary, file, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
-    const { selector, isCalculatedToken, layer } = platform;
+    const { selector, layer } = platform;
     const header = await fileHeader({ file });
     const format = createPropertyFormatter({
       outputReferences,
@@ -97,16 +149,13 @@ const semantic = {
       format: "css",
       usesDtcg
     });
-    const formattedTokens = R.map((token) => {
-      const originalValue = getValue(token.original);
-      if (usesReferences(originalValue) && typeof outputReferences === "function" && outputReferences?.(token, { dictionary })) {
-        if (isCalculatedToken?.(token, options)) {
-          return calculatedVariable(format(token));
-        }
-        return format(token);
-      }
-      return format(token);
-    }, dictionary.allTokens);
+    const tokens = squashTokens(isSquashTokens, dictionary.allTokens);
+    const filteredTokens = R.reject((token) => token.name.includes("ds-size-mode-font-size"), tokens);
+    const [sizingTokens, restTokens] = R.partition(
+      (t) => pathStartsWithOneOf(["size", "_size"], t) && isDigit(t.path[1]),
+      filteredTokens
+    );
+    const formattedTokens = [R.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
     const content = `{
 ${formattedTokens.join("\n")}
 }
@@ -153,5 +202,9 @@ const formats = {
   typography
 };
 export {
-  formats
+  formats,
+  isNumericSizeToken,
+  isSquashTokens,
+  overrideSizingFormula,
+  squashTokens
 };

package/dist/src/tokens/build/formats/js-tokens.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"js-tokens.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/formats/js-tokens.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAmBvE;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MA2BtB,CAAC"}
+{"version":3,"file":"js-tokens.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/formats/js-tokens.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAoB,MAAM,wBAAwB,CAAC;AAoBvE;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MAuCtB,CAAC"}

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

@@ -1,9 +1,11 @@
 import * as R from "ramda";
 import { createPropertyFormatter, fileHeader } from "style-dictionary/utils";
-import { getType, isColorCategoryToken } from "../../utils.js";
+import { getType, isColorCategoryToken, pathStartsWithOneOf } from "../../utils.js";
+import { isSquashTokens, overrideSizingFormula, squashTokens } from "./css.js";
 const groupByType = R.groupBy((token) => getType(token));
-const removeUnwatedTokens = R.filter(
-  (token) => !["ds-base-spacing", "ds-base-sizing"].includes(token.name) && !isColorCategoryToken(token)
+const removeUnwatedTokens = R.pipe(
+  R.reject((token) => isColorCategoryToken(token)),
+  R.reject((token) => R.any((path) => path.startsWith("_"))(token.path))
 );
 const dissocExtensions = R.pipe(R.dissoc("$extensions"), R.dissocPath(["original", "$extensions"]));
 const removeUnwatedProps = R.map((token) => dissocExtensions(token));
@@ -11,18 +13,29 @@ const toCssVarName = R.pipe(R.split(":"), R.head, R.trim);
 const jsTokens = {
   name: "ds/js-tokens",
   format: async ({ dictionary, file, options }) => {
-    const { usesDtcg } = options;
+    const { usesDtcg, outputReferences } = options;
     const format = createPropertyFormatter({
+      outputReferences,
       dictionary,
       format: "css",
       usesDtcg
     });
-    const formatTokens = R.map((token) => ({
-      ...token,
-      name: toCssVarName(format(token))
-    }));
+    const formatTokens = R.map((token) => {
+      if (pathStartsWithOneOf(["size", "_size"], token)) {
+        const { calc, name } = overrideSizingFormula(format, token);
+        return {
+          ...token,
+          name: name.trim(),
+          $value: calc.trim()
+        };
+      }
+      return {
+        ...token,
+        name: toCssVarName(format(token))
+      };
+    });
     const processTokens = R.pipe(removeUnwatedTokens, removeUnwatedProps, formatTokens, groupByType);
-    const tokens = processTokens(dictionary.allTokens);
+    const tokens = processTokens(squashTokens(isSquashTokens, dictionary.allTokens));
     const content = Object.entries(tokens).map(
       ([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, "$1:")} 
 `

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

@@ -1,6 +1,6 @@
 import type { Transform } from 'style-dictionary/types';
 export declare const sizeRem: Transform;
-export declare const nameKebab: Transform;
 export declare const typographyName: Transform;
 export declare const resolveMath: Transform;
+export declare const unitless: Transform;
 //# sourceMappingURL=transformers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"transformers.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/transformers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOxD,eAAO,MAAM,OAAO,EAAE,SAyBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,SASvB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAS5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,SAWzB,CAAC"}
+{"version":3,"file":"transformers.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/transformers.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAMxD,eAAO,MAAM,OAAO,EAAE,SAyBrB,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,SAS5B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,SAWzB,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,SAMtB,CAAC"}

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

@@ -1,7 +1,6 @@
 import { checkAndEvaluateMath } from "@tokens-studio/sd-transforms";
 import * as R from "ramda";
 import { getValue, pathStartsWithOneOf, typeEquals } from "../utils.js";
-import { noCase } from "./utils/noCase.js";
 const isPx = R.test(/\b\d+px\b/g);
 const sizeRem = {
   name: "ds/size/toRem",
@@ -25,16 +24,6 @@ const sizeRem = {
     return value;
   }
 };
-const 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
-    });
-  }
-};
 const typographyName = {
   name: "name/typography",
   type: "name",
@@ -50,15 +39,22 @@ const resolveMath = {
   type: "value",
   transitive: true,
   filter: (token) => {
-    const isValidValue = ["string", "object"].includes(typeof (token.$value ?? token.value));
+    const isValidValue = ["string", "object"].includes(typeof getValue(token));
     const isTokenOfInterest = !pathStartsWithOneOf(["border-radius"], token);
     return isValidValue && isTokenOfInterest;
   },
   transform: (token, platformCfg) => checkAndEvaluateMath(token, platformCfg.mathFractionDigits)
 };
+const unitless = {
+  name: "ds/unitless",
+  type: "value",
+  transitive: true,
+  filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
+  transform: (token) => parseInt(getValue(token))
+};
 export {
-  nameKebab,
   resolveMath,
   sizeRem,
-  typographyName
+  typographyName,
+  unitless
 };

package/dist/src/tokens/build.js

@@ -47,7 +47,7 @@ async function buildTokens(options) {
   const targetDir = path.resolve(options.outDir);
   buildOptions = options;
   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"));
+  const relevant$themes = $themes.filter((theme) => R.not(theme.group === "size" && theme.name !== "medium"));
   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;

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

@@ -1,13 +1,17 @@
-import type { Colors, Tokens, Typography } from './types.js';
-export declare const colorCliOptions: {
-    readonly main: "main-colors";
-    readonly support: "support-colors";
-    readonly neutral: "neutral-color";
+import type { Theme, Tokens } from './types.js';
+export declare const cliOptions: {
+    readonly outDir: "out-dir";
+    readonly theme: {
+        readonly colors: {
+            readonly main: "main-colors";
+            readonly support: "support-colors";
+            readonly neutral: "neutral-color";
+        };
+        readonly typography: {
+            readonly fontFamily: "font-family";
+        };
+        readonly borderRadius: "border-radius";
+    };
 };
-export type CreateTokensOptions = {
-    colors: Colors;
-    typography: Typography;
-    themeName: string;
-};
-export declare const createTokens: (opts: CreateTokensOptions) => Tokens;
+export declare const createTokens: (opts: Theme) => Tokens;
 //# sourceMappingURL=create.d.ts.map

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

@@ -1 +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"}
+{"version":3,"file":"create.d.ts","sourceRoot":"","sources":["../../../src/tokens/create.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAU,KAAK,EAAE,MAAM,EAAqC,MAAM,YAAY,CAAC;AAE3F,eAAO,MAAM,UAAU;;;;;;;;;;;;;CAab,CAAC;AAgFX,eAAO,MAAM,YAAY,SAAU,KAAK,WAqBvC,CAAC"}

package/dist/src/tokens/create.js

@@ -1,9 +1,18 @@
 import * as R from "ramda";
 import { baseColors, generateColorScale } from "../colors/index.js";
-const colorCliOptions = {
-  main: "main-colors",
-  support: "support-colors",
-  neutral: "neutral-color"
+const cliOptions = {
+  outDir: "out-dir",
+  theme: {
+    colors: {
+      main: "main-colors",
+      support: "support-colors",
+      neutral: "neutral-color"
+    },
+    typography: {
+      fontFamily: "font-family"
+    },
+    borderRadius: "border-radius"
+  }
 };
 const createColorTokens = (colorArray) => {
   const obj = {};
@@ -78,7 +87,7 @@ const generateGlobalTokens = (colorScheme) => {
   };
 };
 const createTokens = (opts) => {
-  const { colors, typography, themeName: name } = opts;
+  const { colors, typography, name } = opts;
   const tokens = {
     colors: {
       light: {
@@ -98,6 +107,6 @@ const createTokens = (opts) => {
   return tokens;
 };
 export {
-  colorCliOptions,
+  cliOptions,
   createTokens
 };

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

@@ -3,15 +3,15 @@
     "circle": {
       "small": {
         "$type": "sizing",
-        "$value": "{sizing.5} - {switch.border}"
+        "$value": "{_size.5} - {switch.border}"
       },
       "medium": {
         "$type": "sizing",
-        "$value": "{sizing.6} - {switch.border}"
+        "$value": "{_size.6} - {switch.border}"
       },
       "large": {
         "$type": "sizing",
-        "$value": "{sizing.7} - {switch.border}"
+        "$value": "{_size.7} - {switch.border}"
       }
     },
     "border": {

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

@@ -139,17 +139,5 @@
       "$type": "opacity",
       "$value": "30%"
     }
-  },
-  "sizing": {
-    "scale": {
-      "$type": "sizing",
-      "$value": "4"
-    }
-  },
-  "spacing": {
-    "scale": {
-      "$type": "spacing",
-      "$value": "4"
-    }
   }
 }