@digdir/designsystemet 1.0.7 → 1.1.0

package/dist/src/tokens/process/configs/color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/color.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKrE,OAAO,EAAE,KAAK,wBAAwB,EAA0B,MAAM,aAAa,CAAC;AAEpF,eAAO,MAAM,oBAAoB,EAAE,wBA8BlC,CAAC;AAEF,KAAK,iBAAiB,GAAG;IAAE,QAAQ,EAAE,eAAe,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,aAAa,CAAA;CAAE,CAAC;AAEvG,eAAO,MAAM,sBAAsB,GAChC,MAAM,iBAAiB,KAAG,wBAgD1B,CAAC"}
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/color.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAKrE,OAAO,EAAkB,KAAK,wBAAwB,EAAU,MAAM,aAAa,CAAC;AAEpF,eAAO,MAAM,oBAAoB,EAAE,wBA8BlC,CAAC;AAEF,KAAK,iBAAiB,GAAG;IAAE,QAAQ,EAAE,eAAe,CAAA;CAAE,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,aAAa,CAAA;CAAE,CAAC;AAEvG,eAAO,MAAM,sBAAsB,GAChC,MAAM,iBAAiB,KAAG,wBAgD1B,CAAC"}

package/dist/src/tokens/process/configs/color.js

@@ -3,6 +3,14 @@ import * as R12 from "ramda";
 
 // src/tokens/utils.ts
 import * as R from "ramda";
+
+// src/tokens/types.ts
+var colorCategories = {
+  main: "main",
+  support: "support"
+};
+
+// src/tokens/utils.ts
 var mapToLowerCase = R.map(R.toLower);
 var hasAnyTruth = R.any(R.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
@@ -36,7 +44,9 @@ function isGlobalColorToken(token) {
 }
 function isColorCategoryToken(token, category) {
   if (!category) {
-    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+    return Object.keys(colorCategories).some(
+      (colorCategory2) => isColorCategoryToken(token, colorCategory2)
+    );
   }
   return R.startsWith(["color", category], token.path);
 }
@@ -59,14 +69,6 @@ function inlineTokens(shouldInline, tokens) {
 // src/tokens/process/formats/css/color.ts
 import * as R2 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
-
-// src/tokens/types.ts
-var colorCategories = {
-  main: "main",
-  support: "support"
-};
-
-// src/tokens/process/formats/css/color.ts
 var prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
   [data-color-scheme="auto"] ${content}
@@ -74,7 +76,7 @@ var prefersColorScheme = (colorScheme2, content) => `
 `;
 var colorScheme = {
   name: "ds/css-colorscheme",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
     const { selector, colorScheme: colorScheme2, layer } = platform;
@@ -116,7 +118,7 @@ ${selector} ${content} ${autoSelectorContent}
 };
 var colorCategory = {
   name: "ds/css-colorcategory",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = R2.compose(
@@ -159,7 +161,7 @@ var isInlineTokens = R3.anyPass([isNumericBorderRadiusToken, isNumericSizeToken,
 var 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)`;
+  const round = `round(down, ${calc}, 1px)`;
   return {
     name,
     round,
@@ -187,7 +189,7 @@ ${round.join("\n")}
 };
 var semantic = {
   name: "ds/css-semantic",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter2({
@@ -225,7 +227,7 @@ var typographyFontFamilyPredicate = R4.allPass([
 ]);
 var typography = {
   name: "ds/css-typography",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter3({
@@ -791,7 +793,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
     );
   }
   const layer = `ds.theme.color`;
-  const isRootColor = color === buildOptions?.rootColor;
+  const isRootColor = color === buildOptions?.defaultColor;
   const selector = isRootColor ? `:root, [data-color-scheme], [data-color="${color}"]` : `[data-color="${color}"], [data-color-scheme][data-color="${color}"]`;
   const config = {
     preprocessors: ["tokens-studio"],

package/dist/src/tokens/process/configs/semantic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/semantic.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,KAAK,wBAAwB,EAA0C,MAAM,aAAa,CAAC;AAEpG,eAAO,MAAM,iBAAiB,EAAE,wBA0C/B,CAAC"}
+{"version":3,"file":"semantic.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/semantic.ts"],"names":[],"mappings":"AAKA,OAAO,EAAkC,KAAK,wBAAwB,EAAU,MAAM,aAAa,CAAC;AAEpG,eAAO,MAAM,iBAAiB,EAAE,wBA0C/B,CAAC"}

package/dist/src/tokens/process/configs/semantic.js

@@ -4,6 +4,14 @@ import { outputReferencesFilter } from "style-dictionary/utils";
 
 // src/tokens/utils.ts
 import * as R from "ramda";
+
+// src/tokens/types.ts
+var colorCategories = {
+  main: "main",
+  support: "support"
+};
+
+// src/tokens/utils.ts
 var mapToLowerCase = R.map(R.toLower);
 var hasAnyTruth = R.any(R.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
@@ -34,7 +42,9 @@ function isGlobalColorToken(token) {
 }
 function isColorCategoryToken(token, category) {
   if (!category) {
-    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+    return Object.keys(colorCategories).some(
+      (colorCategory2) => isColorCategoryToken(token, colorCategory2)
+    );
   }
   return R.startsWith(["color", category], token.path);
 }
@@ -57,14 +67,6 @@ function inlineTokens(shouldInline, tokens) {
 // src/tokens/process/formats/css/color.ts
 import * as R2 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
-
-// src/tokens/types.ts
-var colorCategories = {
-  main: "main",
-  support: "support"
-};
-
-// src/tokens/process/formats/css/color.ts
 var prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
   [data-color-scheme="auto"] ${content}
@@ -72,7 +74,7 @@ var prefersColorScheme = (colorScheme2, content) => `
 `;
 var colorScheme = {
   name: "ds/css-colorscheme",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
     const { selector, colorScheme: colorScheme2, layer } = platform;
@@ -114,7 +116,7 @@ ${selector} ${content} ${autoSelectorContent}
 };
 var colorCategory = {
   name: "ds/css-colorcategory",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = R2.compose(
@@ -157,7 +159,7 @@ var isInlineTokens = R3.anyPass([isNumericBorderRadiusToken, isNumericSizeToken,
 var 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)`;
+  const round = `round(down, ${calc}, 1px)`;
   return {
     name,
     round,
@@ -185,7 +187,7 @@ ${round.join("\n")}
 };
 var semantic = {
   name: "ds/css-semantic",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter2({
@@ -223,7 +225,7 @@ var typographyFontFamilyPredicate = R4.allPass([
 ]);
 var typography = {
   name: "ds/css-typography",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter3({

package/dist/src/tokens/process/configs/storefront.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"storefront.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/storefront.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,wBAAwB,EAA0C,MAAM,aAAa,CAAC;AAEpG,eAAO,MAAM,gBAAgB,EAAE,wBAqC9B,CAAC"}
+{"version":3,"file":"storefront.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/storefront.ts"],"names":[],"mappings":"AAMA,OAAO,EAAkC,KAAK,wBAAwB,EAAU,MAAM,aAAa,CAAC;AAEpG,eAAO,MAAM,gBAAgB,EAAE,wBAqC9B,CAAC"}

package/dist/src/tokens/process/configs/storefront.js

@@ -4,6 +4,14 @@ import { outputReferencesFilter } from "style-dictionary/utils";
 
 // src/tokens/utils.ts
 import * as R from "ramda";
+
+// src/tokens/types.ts
+var colorCategories = {
+  main: "main",
+  support: "support"
+};
+
+// src/tokens/utils.ts
 var mapToLowerCase = R.map(R.toLower);
 var hasAnyTruth = R.any(R.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
@@ -28,7 +36,9 @@ var pathStartsWithOneOf = R.curry(
 );
 function isColorCategoryToken(token, category) {
   if (!category) {
-    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+    return Object.keys(colorCategories).some(
+      (colorCategory) => isColorCategoryToken(token, colorCategory)
+    );
   }
   return R.startsWith(["color", category], token.path);
 }
@@ -62,7 +72,7 @@ var isInlineTokens = R2.anyPass([isNumericBorderRadiusToken, isNumericSizeToken,
 var 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)`;
+  const round = `round(down, ${calc}, 1px)`;
   return {
     name,
     round,

package/dist/src/tokens/process/configs/typography.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/typography.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,wBAAwB,EAA0B,MAAM,aAAa,CAAC;AAEpF,eAAO,MAAM,mBAAmB,EAAE,wBAkDjC,CAAC"}
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/configs/typography.ts"],"names":[],"mappings":"AAKA,OAAO,EAAkB,KAAK,wBAAwB,EAAU,MAAM,aAAa,CAAC;AAEpF,eAAO,MAAM,mBAAmB,EAAE,wBAkDjC,CAAC"}

package/dist/src/tokens/process/configs/typography.js

@@ -3,6 +3,14 @@ import { expandTypesMap } from "@tokens-studio/sd-transforms";
 
 // src/tokens/utils.ts
 import * as R from "ramda";
+
+// src/tokens/types.ts
+var colorCategories = {
+  main: "main",
+  support: "support"
+};
+
+// src/tokens/utils.ts
 var mapToLowerCase = R.map(R.toLower);
 var hasAnyTruth = R.any(R.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
@@ -33,7 +41,9 @@ function isGlobalColorToken(token) {
 }
 function isColorCategoryToken(token, category) {
   if (!category) {
-    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+    return Object.keys(colorCategories).some(
+      (colorCategory2) => isColorCategoryToken(token, colorCategory2)
+    );
   }
   return R.startsWith(["color", category], token.path);
 }
@@ -56,14 +66,6 @@ function inlineTokens(shouldInline, tokens) {
 // src/tokens/process/formats/css/color.ts
 import * as R2 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
-
-// src/tokens/types.ts
-var colorCategories = {
-  main: "main",
-  support: "support"
-};
-
-// src/tokens/process/formats/css/color.ts
 var prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
   [data-color-scheme="auto"] ${content}
@@ -71,7 +73,7 @@ var prefersColorScheme = (colorScheme2, content) => `
 `;
 var colorScheme = {
   name: "ds/css-colorscheme",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
     const { selector, colorScheme: colorScheme2, layer } = platform;
@@ -113,7 +115,7 @@ ${selector} ${content} ${autoSelectorContent}
 };
 var colorCategory = {
   name: "ds/css-colorcategory",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = R2.compose(
@@ -156,7 +158,7 @@ var isInlineTokens = R3.anyPass([isNumericBorderRadiusToken, isNumericSizeToken,
 var 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)`;
+  const round = `round(down, ${calc}, 1px)`;
   return {
     name,
     round,
@@ -184,7 +186,7 @@ ${round.join("\n")}
 };
 var semantic = {
   name: "ds/css-semantic",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter2({
@@ -222,7 +224,7 @@ var typographyFontFamilyPredicate = R4.allPass([
 ]);
 var typography = {
   name: "ds/css-typography",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter3({

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

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/configs.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,2BAA2B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAInG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAOpE,OAAO,EAAE,KAAK,oBAAoB,EAA6B,MAAM,sCAAsC,CAAC;AAc5G,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,WAAW,wBAAwB,EACnC,kBAAkB,oBAAoB,EAAE,EACxC,YAAY,cAAc,EAAE,EAC5B,SAAS,kBAAkB,KAC1B,2BAA2B,EAoD7B,CAAC"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../src/tokens/process/configs.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,2BAA2B,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAInG,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,qBAAqB,CAAC;AAOpE,OAAO,EAA6B,KAAK,oBAAoB,EAAE,MAAM,sCAAsC,CAAC;AAc5G,eAAO,MAAM,OAAO;;;;;;;;;;;;CAYnB,CAAC;AAEF,eAAO,MAAM,4BAA4B,GACvC,WAAW,wBAAwB,EACnC,kBAAkB,oBAAoB,EAAE,EACxC,YAAY,cAAc,EAAE,EAC5B,SAAS,kBAAkB,KAC1B,2BAA2B,EAoD7B,CAAC"}

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

@@ -5,6 +5,14 @@ import StyleDictionary2 from "style-dictionary";
 
 // src/tokens/utils.ts
 import * as R from "ramda";
+
+// src/tokens/types.ts
+var colorCategories = {
+  main: "main",
+  support: "support"
+};
+
+// src/tokens/utils.ts
 var mapToLowerCase = R.map(R.toLower);
 var hasAnyTruth = R.any(R.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
@@ -38,7 +46,9 @@ function isGlobalColorToken(token) {
 }
 function isColorCategoryToken(token, category) {
   if (!category) {
-    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+    return Object.keys(colorCategories).some(
+      (colorCategory2) => isColorCategoryToken(token, colorCategory2)
+    );
   }
   return R.startsWith(["color", category], token.path);
 }
@@ -76,14 +86,6 @@ import * as R8 from "ramda";
 // src/tokens/process/formats/css/color.ts
 import * as R2 from "ramda";
 import { createPropertyFormatter } from "style-dictionary/utils";
-
-// src/tokens/types.ts
-var colorCategories = {
-  main: "main",
-  support: "support"
-};
-
-// src/tokens/process/formats/css/color.ts
 var prefersColorScheme = (colorScheme2, content) => `
 @media (prefers-color-scheme: ${colorScheme2}) {
   [data-color-scheme="auto"] ${content}
@@ -91,7 +93,7 @@ var prefersColorScheme = (colorScheme2, content) => `
 `;
 var colorScheme = {
   name: "ds/css-colorscheme",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
     const { selector, colorScheme: colorScheme2, layer } = platform;
@@ -133,7 +135,7 @@ ${selector} ${content} ${autoSelectorContent}
 };
 var colorCategory = {
   name: "ds/css-colorcategory",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = R2.compose(
@@ -176,7 +178,7 @@ var isInlineTokens = R3.anyPass([isNumericBorderRadiusToken, isNumericSizeToken,
 var 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)`;
+  const round = `round(down, ${calc}, 1px)`;
   return {
     name,
     round,
@@ -204,7 +206,7 @@ ${round.join("\n")}
 };
 var semantic = {
   name: "ds/css-semantic",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter2({
@@ -242,7 +244,7 @@ var typographyFontFamilyPredicate = R4.allPass([
 ]);
 var typography = {
   name: "ds/css-typography",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter3({
@@ -460,24 +462,9 @@ var getMultidimensionalThemes = (processed$themes, dimensions) => {
   });
 };
 var processed = Symbol("Type brand for ProcessedThemeObject");
-function isProcessed(theme) {
-  return Boolean(theme[processed]);
-}
-function processThemeObject(theme) {
-  if (isProcessed(theme)) {
-    return theme;
-  }
-  const result = { ...theme, [processed]: true };
-  if (result.group) {
-    result.group = kebabCase(result.group);
-  }
-  result.name = kebabCase(result.name);
-  return result;
-}
 function groupThemes(themes) {
   const groups = {};
-  for (const rawTheme of themes) {
-    const theme = processThemeObject(rawTheme);
+  for (const theme of themes) {
     if (theme.group) {
       const groupKey = theme.group;
       groups[groupKey] = [...groups[groupKey] ?? [], theme];
@@ -702,7 +689,7 @@ var colorCategoryVariables = (opts) => ({ "color-scheme": colorScheme2, theme, .
     );
   }
   const layer = `ds.theme.color`;
-  const isRootColor = color === buildOptions?.rootColor;
+  const isRootColor = color === buildOptions?.defaultColor;
   const selector = isRootColor ? `:root, [data-color-scheme], [data-color="${color}"]` : `[data-color="${color}"], [data-color-scheme][data-color="${color}"]`;
   const config = {
     preprocessors: ["tokens-studio"],

package/dist/src/tokens/process/formats/css/color.js

@@ -39,7 +39,9 @@ function isGlobalColorToken(token) {
 }
 function isColorCategoryToken(token, category) {
   if (!category) {
-    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+    return Object.keys(colorCategories).some(
+      (colorCategory2) => isColorCategoryToken(token, colorCategory2)
+    );
   }
   return R.startsWith(["color", category], token.path);
 }
@@ -52,7 +54,7 @@ var prefersColorScheme = (colorScheme2, content) => `
 `;
 var colorScheme = {
   name: "ds/css-colorscheme",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
     const { selector, colorScheme: colorScheme2, layer } = platform;
@@ -94,7 +96,7 @@ ${selector} ${content} ${autoSelectorContent}
 };
 var colorCategory = {
   name: "ds/css-colorcategory",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = R2.compose(

package/dist/src/tokens/process/formats/css/semantic.js

@@ -50,7 +50,7 @@ var isInlineTokens = R2.anyPass([isNumericBorderRadiusToken, isNumericSizeToken,
 var 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)`;
+  const round = `round(down, ${calc}, 1px)`;
   return {
     name,
     round,
@@ -78,7 +78,7 @@ ${round.join("\n")}
 };
 var semantic = {
   name: "ds/css-semantic",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter({

package/dist/src/tokens/process/formats/css/typography.js

@@ -7,7 +7,7 @@ var typographyFontFamilyPredicate = R.allPass([
 ]);
 var typography = {
   name: "ds/css-typography",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter({

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

@@ -40,7 +40,9 @@ function isGlobalColorToken(token) {
 }
 function isColorCategoryToken(token, category) {
   if (!category) {
-    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+    return Object.keys(colorCategories).some(
+      (colorCategory2) => isColorCategoryToken(token, colorCategory2)
+    );
   }
   return R.startsWith(["color", category], token.path);
 }
@@ -68,7 +70,7 @@ var prefersColorScheme = (colorScheme2, content) => `
 `;
 var colorScheme = {
   name: "ds/css-colorscheme",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
     const { selector, colorScheme: colorScheme2, layer } = platform;
@@ -110,7 +112,7 @@ ${selector} ${content} ${autoSelectorContent}
 };
 var colorCategory = {
   name: "ds/css-colorcategory",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = R2.compose(
@@ -153,7 +155,7 @@ var isInlineTokens = R3.anyPass([isNumericBorderRadiusToken, isNumericSizeToken,
 var 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)`;
+  const round = `round(down, ${calc}, 1px)`;
   return {
     name,
     round,
@@ -181,7 +183,7 @@ ${round.join("\n")}
 };
 var semantic = {
   name: "ds/css-semantic",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter2({
@@ -219,7 +221,7 @@ var typographyFontFamilyPredicate = R4.allPass([
 ]);
 var typography = {
   name: "ds/css-typography",
-  format: async ({ dictionary, file, options, platform }) => {
+  format: async ({ dictionary, options, platform }) => {
     const { outputReferences, usesDtcg } = options;
     const { selector, layer } = platform;
     const format = createPropertyFormatter3({

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

@@ -4,6 +4,14 @@ import { createPropertyFormatter as createPropertyFormatter2, fileHeader } from
 
 // src/tokens/utils.ts
 import * as R from "ramda";
+
+// src/tokens/types.ts
+var colorCategories = {
+  main: "main",
+  support: "support"
+};
+
+// src/tokens/utils.ts
 var mapToLowerCase = R.map(R.toLower);
 var hasAnyTruth = R.any(R.equals(true));
 var getType = (token) => (token.$type ?? token.type) || "";
@@ -28,7 +36,9 @@ var pathStartsWithOneOf = R.curry(
 );
 function isColorCategoryToken(token, category) {
   if (!category) {
-    return ["main", "support"].some((c) => isColorCategoryToken(token, c));
+    return Object.keys(colorCategories).some(
+      (colorCategory) => isColorCategoryToken(token, colorCategory)
+    );
   }
   return R.startsWith(["color", category], token.path);
 }
@@ -58,7 +68,7 @@ var isInlineTokens = R2.anyPass([isNumericBorderRadiusToken, isNumericSizeToken,
 var 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)`;
+  const round = `round(down, ${calc}, 1px)`;
   return {
     name,
     round,

package/dist/src/tokens/process/output/tailwind.d.ts

@@ -0,0 +1,3 @@
+import type { OutputFile } from '../../types.js';
+export declare const createTailwindCSSFiles: (cssFiles: OutputFile[]) => OutputFile[];
+//# sourceMappingURL=tailwind.d.ts.map

package/dist/src/tokens/process/output/tailwind.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tailwind.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/process/output/tailwind.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,eAAO,MAAM,sBAAsB,GAAI,UAAU,UAAU,EAAE,KAAG,UAAU,EAezE,CAAC"}

package/dist/src/tokens/process/output/tailwind.js

@@ -0,0 +1,59 @@
+// src/tokens/process/output/tailwind.ts
+var createTailwindCSSFiles = (cssFiles) => {
+  console.log("\n\u{1F371} Creating Tailwind Config");
+  return cssFiles.map((file) => {
+    if (file.destination) {
+      const tailwindConfig = generateTailwind(file.output);
+      const tailwindFile = {
+        destination: file.destination.replace(".css", ".tailwind.css"),
+        output: tailwindConfig
+      };
+      return tailwindFile;
+    }
+    return void 0;
+  }).filter((item) => item !== void 0);
+};
+var generateTailwind = (css) => {
+  const tailwind = ["--font-sans: var(--ds-font-family)"];
+  const tokens = Array.from(new Set(css.match(/--ds-[^:)]+/g)), (m) => m).sort(
+    (a, b) => a.localeCompare(b, void 0, { numeric: true, sensitivity: "base" })
+  );
+  for (const token of tokens) {
+    if (token.startsWith("--ds-color-") && !token.startsWith("--ds-color-focus")) {
+      tailwind.push(`--color-${token.replace("--ds-color-", "")}: var(${token})`);
+    } else if (token.startsWith("--ds-font-weight-")) {
+      tailwind.push(`--font-weight-${token.replace("--ds-font-weight-", "")}: var(${token})`);
+    } else if (token.match(/--ds-border-radius-(sm|md|lg|xl)/)) {
+      tailwind.push(`--radius-${token.replace("--ds-border-radius-", "")}: var(${token})`);
+    } else if (token.match(/--ds-body-(sm|mg|lg)-body-font-size/)) {
+      tailwind.push(`--text-${token.replace("--ds-body-", "").replace("-font-size", "")}: var(${token})`);
+    } else if (token.match(/^--ds-size-\d+$/)) {
+      tailwind.push(`--spacing-${token.replace("--ds-size-", "")}: var(${token})`);
+    }
+  }
+  const dynamicColors = `[data-color] {
+      --color-background-default: var(--ds-color-background-default);
+      --color-background-tinted: var(--ds-color-background-tinted);
+      --color-surface-default: var(--ds-color-surface-default);
+      --color-surface-tinted: var(--ds-color-surface-tinted);
+      --color-surface-hover: var(--ds-color-surface-hover);
+      --color-surface-active: var(--ds-color-surface-active);
+      --color-border-subtle: var(--ds-color-border-subtle);
+      --color-border-default: var(--ds-color-border-default);
+      --color-border-strong: var(--ds-color-border-strong);
+      --color-text-subtle: var(--ds-color-text-subtle);
+      --color-text-default: var(--ds-color-text-default);
+      --color-base-default: var(--ds-color-base-default);
+      --color-base-hover: var(--ds-color-base-hover);
+      --color-base-active: var(--ds-color-base-active);
+      --color-base-contrast-subtle: var(--ds-color-base-contrast-subtle);
+      --color-base-contrast-default: var(--ds-color-base-contrast-default);
+    }`;
+  return `@theme {${tailwind.map((str) => `
+  ${str};`).join("")}
+}
+${dynamicColors}`;
+};
+export {
+  createTailwindCSSFiles
+};