@digdir/designsystemet 1.0.0-next.45 → 1.0.0-next.47

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, unitless } 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,7 +14,6 @@ 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);
@@ -23,7 +22,7 @@ for (const format of Object.values(formats)) {
   StyleDictionary.registerFormat(format);
 }
 const dsTransformers = [
-  nameKebab.name,
+  "name/kebab",
   resolveMath.name,
   "ts/size/px",
   sizeRem.name,
@@ -160,8 +159,9 @@ const semanticVariables = ({ theme }, { outPath }) => {
         options: {
           fileHeader,
           outputReferences: (token, options) => {
-            const include = pathStartsWithOneOf(["border-radius", "size"], token);
-            return include && outputReferencesFilter(token, options);
+            const include = pathStartsWithOneOf(["border-radius"], token);
+            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
+            return (include || isWantedSize) && outputReferencesFilter(token, options);
           }
         }
       }
@@ -187,16 +187,16 @@ const typescriptTokens = ({ "color-scheme": colorScheme, theme }, { outPath }) =
                 return false;
               const isSemanticColor = R.includes("semantic", token.filePath) && typeEquals(["color"], token);
               const wantedTypes = typeEquals(["shadow", "dimension", "typography", "opacity"], token);
-              const isNotPrivate = R.not(R.any((path) => path.startsWith("_"))(token.path));
-              return (isSemanticColor || wantedTypes) && isNotPrivate;
+              return isSemanticColor || wantedTypes;
             }
           }
         ],
         options: {
           fileHeader,
           outputReferences: (token, options) => {
-            const include = pathStartsWithOneOf(["border-radius", "size"], token);
-            return include && outputReferencesFilter(token, options);
+            const include = pathStartsWithOneOf(["border-radius"], token);
+            const isWantedSize = pathStartsWithOneOf(["size", "_size"], token) && isDigit(token.path[1]);
+            return (include || isWantedSize) && outputReferencesFilter(token, options);
           }
         }
       }
@@ -222,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",
@@ -239,7 +239,18 @@ const typographyVariables = ({ theme, typography }, { outPath }) => {
                 token
               );
               return included && !pathStartsWithOneOf(
-                ["spacing", "sizing", "size", "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

@@ -19,17 +19,19 @@ import type { Format } from 'style-dictionary/types';
  *  ]
  * ```
  *
- * @param shouldInline - predicate to determine if token should be inlined
+ * @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 inlineTokens(shouldInline: (t: TransformedToken) => boolean, tokens: TransformedToken[]): import("style-dictionary/types").TransformedToken[];
+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.
  *

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":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAYrD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,wBAAgB,YAAY,CAAC,YAAY,EAAE,CAAC,CAAC,EAAE,gBAAgB,KAAK,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,uDAYtG;AAsDD,OAAO,QAAQ,wBAAwB,CAAC;IACtC,UAAiB,YAAY;QAC3B,mBAAmB,CAAC,EAAE,MAAM,CAAC;KAC9B;CACF;AAuCD;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,WAAY,CAAC,CAAC,EAAE,gBAAgB,KAAK,MAAM,SAAS,gBAAgB;;;;CAYrG,CAAC;AAyFF,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

@@ -3,18 +3,21 @@ import { createPropertyFormatter, fileHeader } from "style-dictionary/utils";
 import {
   getValue,
   isColorCategoryToken,
+  isDigit,
   isGlobalColorToken,
   isSemanticToken,
   pathStartsWithOneOf
 } from "../../utils.js";
 import { colorCategories } from "../types.js";
-function inlineTokens(shouldInline, tokens) {
-  const [inlineableTokens, otherTokens] = R.partition(shouldInline, tokens);
+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(".");
-      transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
+      if (typeof transformed === "string") {
+        transformed = transformed.replaceAll(`{${refName}}`, getValue(ref.original));
+      }
     }
     const tokenWithInlinedRefs = R.set(R.lensPath(["original", "$value"]), transformed, token);
     return tokenWithInlinedRefs;
@@ -102,12 +105,12 @@ ${selector} ${content}
     return header + body;
   }
 };
-const isDigit = (s) => /^\d+$/.test(s);
 const isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
-const isUwantedTokens = R.anyPass([isNumericBorderRadiusToken]);
+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 calc = value.replace(`var(--ds-size-mode-font-size)`, "1em").replace(/floor\((.*)\);/, "calc($1)");
   const round = `round(down, ${calc}, 0.0625rem)`;
   return {
     name,
@@ -120,8 +123,8 @@ const formatSizingTokens = (format, tokens) => {
     (acc, token) => {
       const { round: round2, calc: calc2, name } = overrideSizingFormula(format, token);
       return {
-        round: [...acc.round, `${name}: ${round2}`],
-        calc: [...acc.calc, `${name}: ${calc2}`]
+        round: [...acc.round, `${name}: ${round2};`],
+        calc: [...acc.calc, `${name}: ${calc2};`]
       };
     },
     { round: [], calc: [] },
@@ -146,9 +149,12 @@ const semantic = {
       format: "css",
       usesDtcg
     });
-    const tokens = inlineTokens(isUwantedTokens, 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(pathStartsWithOneOf(["size"]), filteredTokens);
+    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")}
@@ -197,6 +203,8 @@ const formats = {
 };
 export {
   formats,
-  inlineTokens,
-  overrideSizingFormula
+  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;AAiBvE;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MAuCtB,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,12 @@
 import * as R from "ramda";
 import { createPropertyFormatter, fileHeader } from "style-dictionary/utils";
 import { getType, isColorCategoryToken, pathStartsWithOneOf } from "../../utils.js";
-import { overrideSizingFormula } from "./css.js";
+import { isSquashTokens, overrideSizingFormula, squashTokens } from "./css.js";
 const groupByType = R.groupBy((token) => getType(token));
-const removeUnwatedTokens = R.filter((token) => !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));
 const toCssVarName = R.pipe(R.split(":"), R.head, R.trim);
@@ -18,7 +21,7 @@ const jsTokens = {
       usesDtcg
     });
     const formatTokens = R.map((token) => {
-      if (pathStartsWithOneOf(["size"], token)) {
+      if (pathStartsWithOneOf(["size", "_size"], token)) {
         const { calc, name } = overrideSizingFormula(format, token);
         return {
           ...token,
@@ -32,7 +35,7 @@ const jsTokens = {
       };
     });
     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,5 @@
 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;

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;AAEF,eAAO,MAAM,QAAQ,EAAE,SAMtB,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",
@@ -60,11 +49,10 @@ const unitless = {
   name: "ds/unitless",
   type: "value",
   transitive: true,
-  filter: (token) => pathStartsWithOneOf(["size"], token),
+  filter: (token) => pathStartsWithOneOf(["size", "_size"], token),
   transform: (token) => parseInt(getValue(token))
 };
 export {
-  nameKebab,
   resolveMath,
   sizeRem,
   typographyName,

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

@@ -10,8 +10,10 @@ type Options = {
     verbose: boolean;
     /** Set the default "accent" color, if not overridden with data-color */
     accentColor?: string;
-    /** Dry run */
+    /** Dry run, no files will be written */
     dry?: boolean;
+    /** Clean the output path before building tokens */
+    clean?: boolean;
 };
 export declare let buildOptions: Options | undefined;
 export declare function buildTokens(options: Options): Promise<void>;

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

@@ -1 +1 @@
-{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/tokens/build.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,aAAa,WAAW,CAAC;AAEtC,KAAK,OAAO,GAAG;IACb,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,cAAc;IACd,GAAG,CAAC,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,eAAO,IAAI,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;AAwC7C,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAiFjE"}
+{"version":3,"file":"build.d.ts","sourceRoot":"","sources":["../../../src/tokens/build.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,aAAa,WAAW,CAAC;AAEtC,KAAK,OAAO,GAAG;IACb,yBAAyB;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,wCAAwC;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,8BAA8B;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,4BAA4B;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,wEAAwE;IACxE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,wCAAwC;IACxC,GAAG,CAAC,EAAE,OAAO,CAAC;IACd,mDAAmD;IACnD,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,eAAO,IAAI,YAAY,EAAE,OAAO,GAAG,SAAS,CAAC;AAwC7C,wBAAsB,WAAW,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,CAqFjE"}

package/dist/src/tokens/build.js

@@ -7,7 +7,7 @@ import { configs, getConfigsForThemeDimensions } from "./build/configs.js";
 import { colorCategories } from "./build/types.js";
 import { makeEntryFile } from "./build/utils/entryfile.js";
 import { processThemeObject } from "./build/utils/getMultidimensionalThemes.js";
-import { copyFile, writeFile } from "./utils.js";
+import { cleanDir, copyFile, writeFile } from "./utils.js";
 const DEFAULT_COLOR = "accent";
 let buildOptions;
 const sd = new StyleDictionary();
@@ -42,7 +42,7 @@ const buildConfigs = {
   }
 };
 async function buildTokens(options) {
-  const { dry } = options;
+  const { dry, clean } = options;
   const tokensDir = options.tokens;
   const targetDir = path.resolve(options.outDir);
   buildOptions = options;
@@ -66,6 +66,9 @@ async function buildTokens(options) {
     }),
     buildConfigs
   );
+  if (clean) {
+    await cleanDir(targetDir, dry);
+  }
   try {
     for (const [key, { buildConfig, sdConfigs }] of R.toPairs(buildAndSdConfigs)) {
       if (!(buildConfig.enabled?.() ?? true)) {

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

@@ -1,13 +1,18 @@
-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 clean: "clean";
+    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;
-    name: 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,IAAI,EAAE,MAAM,CAAC;CACd,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;;;;;;;;;;;;;;CAcb,CAAC;AAgFX,eAAO,MAAM,YAAY,SAAU,KAAK,WAqBvC,CAAC"}

package/dist/src/tokens/create.js

@@ -1,9 +1,19 @@
 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",
+  clean: "clean",
+  theme: {
+    colors: {
+      main: "main-colors",
+      support: "support-colors",
+      neutral: "neutral-color"
+    },
+    typography: {
+      fontFamily: "font-family"
+    },
+    borderRadius: "border-radius"
+  }
 };
 const createColorTokens = (colorArray) => {
   const obj = {};
@@ -98,6 +108,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": "{size.5} - {switch.border}"
+        "$value": "{_size.5} - {switch.border}"
       },
       "medium": {
         "$type": "sizing",
-        "$value": "{size.6} - {switch.border}"
+        "$value": "{_size.6} - {switch.border}"
       },
       "large": {
         "$type": "sizing",
-        "$value": "{size.7} - {switch.border}"
+        "$value": "{_size.7} - {switch.border}"
       }
     },
     "border": {

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

@@ -140,4 +140,4 @@
       "$value": "30%"
     }
   }
-}
+}

package/dist/src/tokens/design-tokens/default/primitives/modes/size/global.json

@@ -1,84 +1,84 @@
 {
-  "size": {
+  "_size": {
     "0": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *0)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *0)"
     },
     "1": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *1)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *1)"
     },
     "2": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *2)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *2)"
     },
     "3": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *3)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *3)"
     },
     "4": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *4)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *4)"
     },
     "5": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *5)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *5)"
     },
     "6": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *6)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *6)"
     },
     "7": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *7)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *7)"
     },
     "8": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *8)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *8)"
     },
     "9": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *9)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *9)"
     },
     "10": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *10)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *10)"
     },
     "11": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *11)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *11)"
     },
     "12": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *12)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *12)"
     },
     "13": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *13)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *13)"
     },
     "14": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *14)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *14)"
     },
     "15": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *15)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *15)"
     },
     "18": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *18)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *18)"
     },
     "22": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *22)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *22)"
     },
     "26": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *26)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *26)"
     },
     "30": {
       "$type": "dimension",
-      "$value": "floor({size.step} / {size.base} * {size.mode-font-size} *30)"
+      "$value": "floor({_size.step} / {_size.base} * {_size.mode-font-size} *30)"
     },
     "mode-font-size": {
       "$type": "dimension",