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

package/dist/bin/designsystemet.js

@@ -22,12 +22,13 @@ function makeTokenCommands() {
     }
     return buildTokens({ tokens, outDir, preview, verbose, dry });
   });
-  tokenCmd.command("create").description("Create Designsystemet tokens").requiredOption(`-m, --${colorCliOptions.main} <name:hex...>`, `Main colors`, parseColorValues).requiredOption(`-s, --${colorCliOptions.support} <name:hex...>`, `Support colors`, parseColorValues).requiredOption(`-n, --${colorCliOptions.neutral} <hex>`, `Neutral hex color`, convertToHex).option("-o, --out-dir <string>", `Output directory for created ${chalk.blue("design-tokens")}`, DEFAULT_TOKENS_DIR).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, false).option("-f, --font-family <string>", `Font family`, "Inter").option("--theme <string>", `Theme name`, "theme").action(async (opts) => {
+  tokenCmd.command("create").description("Create Designsystemet tokens").requiredOption(`-m, --${colorCliOptions.main} <name:hex...>`, `Main colors`, parseColorValues).requiredOption(`-s, --${colorCliOptions.support} <name:hex...>`, `Support colors`, parseColorValues).requiredOption(`-n, --${colorCliOptions.neutral} <hex>`, `Neutral hex color`, convertToHex).option("-o, --out-dir <string>", `Output directory for created ${chalk.blue("design-tokens")}`, DEFAULT_TOKENS_DIR).option("--dry [boolean]", `Dry run for created ${chalk.blue("design-tokens")}`, false).option("-f, --font-family <string>", `Font family`, "Inter").option("-b, --border-radius <number>", `Unitless base border-radius in px`, "4").option("--theme <string>", `Theme name`, "theme").action(async (opts) => {
     const { theme, fontFamily, outDir } = opts;
     const dry = Boolean(opts.dry);
+    const borderRadius = Number(opts.borderRadius);
     console.log(`Creating tokens with options ${chalk.green(JSON.stringify(opts, null, 2))}`);
-    const props = {
-      themeName: theme,
+    const themeOptions = {
+      name: theme,
       colors: {
         main: opts.mainColors,
         support: opts.supportColors,
@@ -35,13 +36,14 @@ function makeTokenCommands() {
       },
       typography: {
         fontFamily
-      }
+      },
+      borderRadius
     };
     if (dry) {
       console.log(`Performing dry run, no files will be written`);
     }
-    const tokens = createTokens(props);
-    await writeTokens({ outDir, tokens, themeName: theme, colors: props.colors, dry });
+    const tokens = createTokens(themeOptions);
+    await writeTokens({ outDir, tokens, theme: themeOptions, dry });
     return Promise.resolve();
   });
   return tokenCmd;

package/dist/src/colors/theme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG/F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAOrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,eAAe,WAAW,KAAG,SAAS,EA8BvF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,UAAW,QAAQ,KAAG,SAIrD,CAAC;AA6BH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,KAAG,QAC2C,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,UAAW,QAAQ,KAAG,QAQnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}
+{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../../src/colors/theme.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAI3C,OAAO,KAAK,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAG/F,eAAO,MAAM,UAAU,EAAE,MAAM,CAAC,YAAY,EAAE,QAAQ,CAOrD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,eAAe,WAAW,KAAG,SAAS,EA8BvF,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,UAAW,QAAQ,KAAG,SAIrD,CAAC;AAgCH;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,UAAW,QAAQ,KAAG,QAC2C,CAAC;AAEjG;;;;GAIG;AACH,eAAO,MAAM,iBAAiB,UAAW,QAAQ,KAAG,QAQnD,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,cAAe,MAAM,eAAe,WAAW,WAEzE,CAAC"}

package/dist/src/colors/theme.js

@@ -46,7 +46,7 @@ const getBaseColors = (color, colorScheme) => {
   const modifier = colorLightness <= 30 || colorLightness >= 49 && colorLightness <= 65 ? -8 : 8;
   const calculateLightness = (base, mod) => base - mod;
   return {
-    baseDefault: chroma(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
+    baseDefault: colorScheme === "light" ? color : chroma(color).luminance(getLuminanceFromLightness(colorLightness)).hex(),
     baseHover: chroma(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier))).hex(),
     baseActive: chroma(color).luminance(getLuminanceFromLightness(calculateLightness(colorLightness, modifier * 2))).hex()
   };

package/dist/src/migrations/beta-to-v1.js

@@ -236,46 +236,46 @@ var beta_to_v1_default = (glob) => runCssCodemod({
       "--fds-shadow-medium": "--ds-shadow-md",
       "--fds-shadow-large": "--ds-shadow-lg",
       "--fds-shadow-xlarge": "--ds-shadow-xl",
-      "--fds-spacing-0": "--ds-spacing-0",
-      "--fds-spacing-1": "--ds-spacing-1",
-      "--fds-spacing-2": "--ds-spacing-2",
-      "--fds-spacing-3": "--ds-spacing-3",
-      "--fds-spacing-4": "--ds-spacing-4",
-      "--fds-spacing-5": "--ds-spacing-5",
-      "--fds-spacing-6": "--ds-spacing-6",
-      "--fds-spacing-7": "--ds-spacing-7",
-      "--fds-spacing-8": "--ds-spacing-8",
-      "--fds-spacing-9": "--ds-spacing-9",
-      "--fds-spacing-10": "--ds-spacing-10",
-      "--fds-spacing-11": "--ds-spacing-11",
-      "--fds-spacing-12": "--ds-spacing-12",
-      "--fds-spacing-13": "--ds-spacing-13",
-      "--fds-spacing-14": "--ds-spacing-14",
-      "--fds-spacing-15": "--ds-spacing-15",
-      "--fds-spacing-18": "--ds-spacing-18",
-      "--fds-spacing-22": "--ds-spacing-22",
-      "--fds-spacing-26": "--ds-spacing-26",
-      "--fds-spacing-30": "--ds-spacing-30",
-      "--fds-sizing-0": "--ds-sizing-0",
-      "--fds-sizing-1": "--ds-sizing-1",
-      "--fds-sizing-2": "--ds-sizing-2",
-      "--fds-sizing-3": "--ds-sizing-3",
-      "--fds-sizing-4": "--ds-sizing-4",
-      "--fds-sizing-5": "--ds-sizing-5",
-      "--fds-sizing-6": "--ds-sizing-6",
-      "--fds-sizing-7": "--ds-sizing-7",
-      "--fds-sizing-8": "--ds-sizing-8",
-      "--fds-sizing-9": "--ds-sizing-9",
-      "--fds-sizing-10": "--ds-sizing-10",
-      "--fds-sizing-11": "--ds-sizing-11",
-      "--fds-sizing-12": "--ds-sizing-12",
-      "--fds-sizing-13": "--ds-sizing-13",
-      "--fds-sizing-14": "--ds-sizing-14",
-      "--fds-sizing-15": "--ds-sizing-15",
-      "--fds-sizing-18": "--ds-sizing-18",
-      "--fds-sizing-22": "--ds-sizing-22",
-      "--fds-sizing-26": "--ds-sizing-26",
-      "--fds-sizing-30": "--ds-sizing-30",
+      "--fds-spacing-0": "--ds-size-0",
+      "--fds-spacing-1": "--ds-size-1",
+      "--fds-spacing-2": "--ds-size-2",
+      "--fds-spacing-3": "--ds-size-3",
+      "--fds-spacing-4": "--ds-size-4",
+      "--fds-spacing-5": "--ds-size-5",
+      "--fds-spacing-6": "--ds-size-6",
+      "--fds-spacing-7": "--ds-size-7",
+      "--fds-spacing-8": "--ds-size-8",
+      "--fds-spacing-9": "--ds-size-9",
+      "--fds-spacing-10": "--ds-size-10",
+      "--fds-spacing-11": "--ds-size-11",
+      "--fds-spacing-12": "--ds-size-12",
+      "--fds-spacing-13": "--ds-size-13",
+      "--fds-spacing-14": "--ds-size-14",
+      "--fds-spacing-15": "--ds-size-15",
+      "--fds-spacing-18": "--ds-size-18",
+      "--fds-spacing-22": "--ds-size-22",
+      "--fds-spacing-26": "--ds-size-26",
+      "--fds-spacing-30": "--ds-size-30",
+      "--fds-sizing-0": "--ds-size-0",
+      "--fds-sizing-1": "--ds-size-1",
+      "--fds-sizing-2": "--ds-size-2",
+      "--fds-sizing-3": "--ds-size-3",
+      "--fds-sizing-4": "--ds-size-4",
+      "--fds-sizing-5": "--ds-size-5",
+      "--fds-sizing-6": "--ds-size-6",
+      "--fds-sizing-7": "--ds-size-7",
+      "--fds-sizing-8": "--ds-size-8",
+      "--fds-sizing-9": "--ds-size-9",
+      "--fds-sizing-10": "--ds-size-10",
+      "--fds-sizing-11": "--ds-size-11",
+      "--fds-sizing-12": "--ds-size-12",
+      "--fds-sizing-13": "--ds-size-13",
+      "--fds-sizing-14": "--ds-size-14",
+      "--fds-sizing-15": "--ds-size-15",
+      "--fds-sizing-18": "--ds-size-18",
+      "--fds-sizing-22": "--ds-size-22",
+      "--fds-sizing-26": "--ds-size-26",
+      "--fds-sizing-30": "--ds-size-30",
       "--fds-opacity-disabled": "--ds-disabled-opacity",
       "--fds-colors-blue-100": "--ds-global-blue-1",
       "--fds-colors-blue-200": "--ds-global-blue-2",

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

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAQhG,OAAO,KAAK,EAEV,kBAAkB,EAElB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAO5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AAwCjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AAuPnH,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,cAC5B,wBAAwB,UAC3B,oBAAoB,EAAE,cAClB,cAAc,EAAE,WACnB,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,MAAM,IAAI,qBAAqB,EAAoB,MAAM,wBAAwB,CAAC;AAQhG,OAAO,KAAK,EAEV,kBAAkB,EAClB,2BAA2B,EAC3B,cAAc,EACd,gBAAgB,EACjB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAO5G,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AA+BjC,MAAM,MAAM,wBAAwB,GAAG,CACrC,WAAW,EAAE,gBAAgB,EAC7B,OAAO,EAAE;IACP,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KACE,qBAAqB,GAAG;IAAE,MAAM,EAAE,qBAAqB,CAAC;IAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,gBAAgB,CAAC,CAAA;CAAE,EAAE,CAAC;AAoPnH,eAAO,MAAM,OAAO;;;;;;;CAOnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,cAC5B,wBAAwB,UAC3B,oBAAoB,EAAE,cAClB,cAAc,EAAE,WACnB,kBAAkB,KAC1B,2BAA2B,EA8B7B,CAAC"}

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

@@ -6,7 +6,7 @@ import { DEFAULT_COLOR, buildOptions } from "../build.js";
 import { isColorCategoryToken, 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 { nameKebab, resolveMath, sizeRem, typographyName, unitless } from "./transformers.js";
 import { getMultidimensionalThemes } from "./utils/getMultidimensionalThemes.js";
 void register(StyleDictionary, { withSDBuiltins: false });
 const usesDtcg = true;
@@ -17,6 +17,7 @@ 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);
@@ -26,6 +27,7 @@ const dsTransformers = [
   resolveMath.name,
   "ts/size/px",
   sizeRem.name,
+  unitless.name,
   "ts/typography/fontWeight",
   typographyName.name,
   "ts/color/modifiers",
@@ -34,12 +36,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 +130,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 +139,6 @@ const semanticVariables = ({ theme }, { outPath }) => {
         outPath,
         theme,
         basePxFontSize,
-        isCalculatedToken,
         selector,
         layer,
         //
@@ -155,14 +149,19 @@ 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 include = pathStartsWithOneOf(["border-radius", "size"], token);
+            return include && 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);
+              const isNotPrivate = R.not(R.any((path) => path.startsWith("_"))(token.path));
+              return (isSemanticColor || wantedTypes) && isNotPrivate;
             }
           }
         ],
         options: {
-          fileHeader
+          fileHeader,
+          outputReferences: (token, options) => {
+            const include = pathStartsWithOneOf(["border-radius", "size"], token);
+            return include && 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,
@@ -233,11 +235,11 @@ 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", "border-width", "border-radius", "theme", "theme2", "theme3", "theme4"],
                 token
               );
             }

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

@@ -1,9 +1,47 @@
+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 shouldInline - 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[];
 declare module 'style-dictionary/types' {
     interface LocalOptions {
         replaceCategoryWith?: string;
     }
 }
+/**
+ * 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;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"}

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

@@ -1,7 +1,25 @@
 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,
+  isGlobalColorToken,
+  isSemanticToken,
+  pathStartsWithOneOf
+} from "../../utils.js";
 import { colorCategories } from "../types.js";
+function inlineTokens(shouldInline, tokens) {
+  const [inlineableTokens, otherTokens] = R.partition(shouldInline, 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));
+    }
+    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 +102,43 @@ ${selector} ${content}
     return header + body;
   }
 };
-const calculatedVariable = R.pipe(R.split(/:(.*?);/g), (split) => `${split[0]}: calc(${R.trim(split[1])});`);
+const isDigit = (s) => /^\d+$/.test(s);
+const isNumericBorderRadiusToken = (t) => t.path[0] === "border-radius" && isDigit(t.path[1]);
+const isUwantedTokens = R.anyPass([isNumericBorderRadiusToken]);
+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 +146,10 @@ 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 = inlineTokens(isUwantedTokens, 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 formattedTokens = [R.map(format, restTokens).join("\n"), formatSizingTokens(format, sizingTokens)];
     const content = `{
 ${formattedTokens.join("\n")}
 }
@@ -153,5 +196,7 @@ const formats = {
   typography
 };
 export {
-  formats
+  formats,
+  inlineTokens,
+  overrideSizingFormula
 };

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;AAiBvE;;GAEG;AACH,eAAO,MAAM,QAAQ,EAAE,MAuCtB,CAAC"}

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

@@ -1,26 +1,36 @@
 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 { overrideSizingFormula } 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.filter((token) => !isColorCategoryToken(token));
 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);
 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"], 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 content = Object.entries(tokens).map(

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

@@ -3,4 +3,5 @@ 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;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"}

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

@@ -50,15 +50,23 @@ 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"], 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

@@ -7,7 +7,7 @@ export declare const colorCliOptions: {
 export type CreateTokensOptions = {
     colors: Colors;
     typography: Typography;
-    themeName: string;
+    name: string;
 };
 export declare const createTokens: (opts: CreateTokensOptions) => 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,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"}

package/dist/src/tokens/create.js

@@ -78,7 +78,7 @@ const generateGlobalTokens = (colorScheme) => {
   };
 };
 const createTokens = (opts) => {
-  const { colors, typography, themeName: name } = opts;
+  const { colors, typography, name } = opts;
   const tokens = {
     colors: {
       light: {

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"
-    }
   }
-}
+}