@digdir/designsystemet 0.1.0-next.20 → 0.1.0-next.22

package/dist/bin/designsystemet.js

@@ -1,9 +1,9 @@
 #!/usr/bin/env node
 import { Argument, Command, program } from "@commander-js/extra-typings";
 import chalk from "chalk";
+import { makeInitCommand } from "../src/init/index.js";
 import migrations from "../src/migrations/index.js";
 import { run } from "../src/tokens/build.js";
-import { makeInitCommand } from "../src/init/index.js";
 program.name("Designsystemet").description("CLI for working with Designsystemet");
 program.command("tokens").showHelpAfterError().description("run Designsystemet token builder").option("-t, --tokens [string]", `Path to ${chalk.blue("design-tokens")}`, "./design-tokens").option("-o, --out [string]", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).action((opts) => {
   const tokens = typeof opts.tokens === "string" ? opts.tokens : "./design-tokens";
@@ -15,9 +15,9 @@ program.command("tokens").showHelpAfterError().description("run Designsystemet t
 program.command("migrate").showHelpAfterError().description("run a Designsystemet migration").addArgument(new Argument("[migration]", "Available migrations").choices(Object.keys(migrations))).option("-l --list", "List available migrations").option("-g --glob <glob>", "Glob for files upon which to apply the migration", "./**/*.(tsx|css)").action((migrationKey, opts) => {
   const { glob, list } = opts;
   if (list) {
-    Object.keys(migrations).forEach((key) => {
+    for (const key of Object.keys(migrations)) {
       console.log(key);
-    });
+    }
   } else if (migrationKey) {
     const migration = migrations[migrationKey];
     if (!migration) {

package/dist/src/colors/colorUtils.js

@@ -1,6 +1,6 @@
-import { Hsluv } from "hsluv";
-import chroma from "chroma-js";
 import { APCAcontrast, sRGBtoY } from "apca-w3";
+import chroma from "chroma-js";
+import { Hsluv } from "hsluv";
 const hexToCssHsl = (hex, valuesOnly = false) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   let r = 0;
@@ -12,9 +12,14 @@ const hexToCssHsl = (hex, valuesOnly = false) => {
     g = parseInt(result[2], 16);
     b = parseInt(result[3], 16);
   }
-  r /= 255, g /= 255, b /= 255;
-  const max = Math.max(r, g, b), min = Math.min(r, g, b);
-  let h, s, l = (max + min) / 2;
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  let h = 0;
+  let s = 0;
+  let l = (max + min) / 2;
   if (max == min) {
     h = s = 0;
   } else {
@@ -40,7 +45,9 @@ const hexToCssHsl = (hex, valuesOnly = false) => {
   return cssString;
 };
 const hexToHSL = (H) => {
-  let r = 0, g = 0, b = 0;
+  let r = 0;
+  let g = 0;
+  let b = 0;
   if (H.length == 4) {
     r = parseInt("0x" + H[1] + H[1]);
     g = parseInt("0x" + H[2] + H[2]);
@@ -53,8 +60,12 @@ const hexToHSL = (H) => {
   r /= 255;
   g /= 255;
   b /= 255;
-  let h = 0, s = 0, l = 0;
-  const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
+  let h = 0;
+  let s = 0;
+  let l = 0;
+  const cmin = Math.min(r, g, b);
+  const cmax = Math.max(r, g, b);
+  const delta = cmax - cmin;
   if (delta == 0) h = 0;
   else if (cmax == r) h = (g - b) / delta % 6;
   else if (cmax == g) h = (b - r) / delta + 2;
@@ -79,8 +90,12 @@ const hslArrToCss = (HSL) => {
 const HSLToHex = (h, s, l) => {
   s /= 100;
   l /= 100;
-  let r = 0, g = 0, b = 0;
-  const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(h / 60 % 2 - 1)), m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  const m = l - c / 2;
   if (0 <= h && h < 60) {
     r = c;
     g = x;
@@ -116,9 +131,7 @@ const HSLToHex = (h, s, l) => {
 };
 const hexToRgb = (hex) => {
   const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
-    return r + r + g + g + b + b;
-  });
+  hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
   return result ? {
     r: parseInt(result[1], 16),
@@ -127,9 +140,9 @@ const hexToRgb = (hex) => {
   } : null;
 };
 const luminanceFromRgb = (r, g, b) => {
-  const a = [Number(r), Number(g), Number(b)].map(function(v) {
+  const a = [Number(r), Number(g), Number(b)].map((v) => {
     v /= 255;
-    return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
   });
   return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
 };
@@ -146,9 +159,8 @@ const luminanceFromHex = (hex) => {
 const getRatioFromLum = (lum1, lum2) => {
   if (lum1 !== null && lum2 !== null) {
     return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
-  } else {
-    return -1;
   }
+  return -1;
 };
 const getHslLightessFromHex = (hex) => {
   return chroma(hex).hsl()[2];
@@ -187,11 +199,11 @@ const areColorsContrasting = (color1, color2, type = "aa") => {
   if (contrast !== null) {
     if (type === "aaa") {
       return contrast >= 7;
-    } else if (type === "aa") {
+    }
+    if (type === "aa") {
       return contrast >= 4.5;
-    } else {
-      return contrast >= 3;
     }
+    return contrast >= 3;
   }
   return false;
 };
@@ -207,7 +219,7 @@ const getApcaContrastLc = (textColor, backgroundColor) => {
   return 0;
 };
 const isHexColor = (hex) => {
-  return typeof hex === "string" && hex.length === 6 && !isNaN(Number("0x" + hex));
+  return typeof hex === "string" && hex.length === 6 && !Number.isNaN(Number("0x" + hex));
 };
 export {
   HSLToHex,

package/dist/src/colors/themeUtils.js

@@ -155,7 +155,8 @@ const canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
   const activeAgainstBlack = getContrastFromHex(baseActiveColor, "#000000");
   if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {
     return true;
-  } else if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
+  }
+  if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
     return true;
   }
   return false;

package/dist/src/init/createTokensPackage.js

@@ -1,12 +1,12 @@
-import path from "node:path";
 import fs from "node:fs/promises";
+import path from "node:path";
 import chalk from "chalk";
 import prompts from "prompts";
-import packageJsonTemplate from "./template/template-files/package.json" with { type: "json" };
 import generateMetadata from "./generateMetadataJson.js";
 import generateThemes from "./generateThemesJson.js";
-import { toGeneratedCssFileName, normalizeTokenSetName, toValidPackageName } from "./utils.js";
 import { nextStepsMarkdown } from "./nextStepsMarkdown.js";
+import packageJsonTemplate from "./template/template-files/package.json" with { type: "json" };
+import { normalizeTokenSetName, toGeneratedCssFileName, toValidPackageName } from "./utils.js";
 const MODES = ["Light", "Dark", "Contrast"];
 const promptOptions = {
   onCancel: () => {

package/dist/src/init/generateMetadataJson.js

@@ -6,9 +6,7 @@ function generateMetadataJson(modes, themes) {
       "primitives/typography/default",
       ...modes.flatMap((mode) => [
         `primitives/colors/${normalizeTokenSetName(mode)}/global`,
-        ...themes.map(
-          (theme) => `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`
-        )
+        ...themes.map((theme) => `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`)
       ]),
       ...themes.map((theme) => `themes/${normalizeTokenSetName(theme)}`),
       "semantic/color",

package/dist/src/init/generateThemesJson.js

@@ -2,11 +2,7 @@ import { randomUUID } from "node:crypto";
 import { TokenSetStatus } from "@tokens-studio/types";
 import { normalizeTokenSetName } from "./utils.js";
 function generateThemesJson(modes, themes) {
-  return [
-    ...generateModesGroup(modes, themes),
-    ...generateThemesGroup(themes),
-    generateSemanticGroup()
-  ];
+  return [...generateModesGroup(modes, themes), ...generateThemesGroup(themes), generateSemanticGroup()];
 }
 function generateModesGroup(modes, themes) {
   return modes.map(
@@ -14,10 +10,7 @@ function generateModesGroup(modes, themes) {
       id: randomUUID(),
       name: mode,
       selectedTokenSets: Object.fromEntries([
-        [
-          `primitives/colors/${normalizeTokenSetName(mode)}/global`,
-          TokenSetStatus.ENABLED
-        ],
+        [`primitives/colors/${normalizeTokenSetName(mode)}/global`, TokenSetStatus.ENABLED],
         ...themes.map(
           (theme) => [
             `primitives/colors/${normalizeTokenSetName(mode)}/${normalizeTokenSetName(theme)}`,

package/dist/src/migrations/codemods/css/plugins.js

@@ -1,6 +1,6 @@
-import * as R from "ramda";
 import chalk from "chalk";
 import hash from "object-hash";
+import * as R from "ramda";
 const printDelete = (text) => console.log(`${chalk.red("Deleted:")} ${text}`.replace(/"|'/g, ""));
 const deleteMsg = (decl, from) => `${chalk.yellow(from)} @ ${chalk.gray(`${JSON.stringify(decl.source?.input.file)}:${decl.source?.start?.line}:${decl.source?.start?.column}`)}`;
 const cssClassRename = (dictionary) => ({
@@ -8,11 +8,11 @@ const cssClassRename = (dictionary) => ({
   Rule(rule) {
     const selector = rule.selector;
     if (!selector) return;
-    Object.entries(dictionary).forEach(([from, to]) => {
+    for (const [from, to] of Object.entries(dictionary)) {
       if (!selector.includes(from)) return;
       const newSelector = selector.replace(new RegExp(from, "g"), to);
       rule.selector = newSelector;
-    });
+    }
   }
 });
 const cssVarRename = (dictionary) => ({
@@ -20,22 +20,21 @@ const cssVarRename = (dictionary) => ({
   Declaration(decl) {
     const { value, prop } = decl;
     const deleted = /* @__PURE__ */ new Set();
-    Object.entries(dictionary).forEach(([from, to]) => {
+    for (const [from, to] of Object.entries(dictionary)) {
       if (!R.isEmpty(to)) {
-        switch (true) {
-          case R.includes(from, value):
-            to === "[delete]" && deleted.add(deleteMsg(decl, from));
-            decl.value = value.replace(from, to);
-            break;
-          case R.includes(from, prop):
-            if (decl.variable) {
-              to === "[delete]" && deleted.add(deleteMsg(decl, from));
-              decl.prop = prop.replace(from, to);
-              break;
-            }
+        if (R.includes(from, value)) {
+          if (to === "[delete]") {
+            deleted.add(deleteMsg(decl, from));
+          }
+          decl.value = value.replace(from, to);
+        } else if (R.includes(from, prop) && decl.variable) {
+          if (to === "[delete]") {
+            deleted.add(deleteMsg(decl, from));
+          }
+          decl.prop = prop.replace(from, to);
         }
       }
-    });
+    }
     if (deleted.size > 0) {
       Array.from(deleted).forEach(printDelete);
     }

package/dist/src/migrations/codemods/css/run.js

@@ -1,6 +1,6 @@
-import fs from "fs";
-import postcss from "postcss";
+import fs from "node:fs";
 import glob from "fast-glob";
+import postcss from "postcss";
 const runCssCodemod = async ({ plugins = [], globPattern = "./**/*.css" }) => {
   const processor = postcss(plugins);
   const transform = async () => {

package/dist/src/migrations/codemods/jsx/classname-prefix.js

@@ -5,11 +5,11 @@ const replaceInLiteral = (node) => {
   return node;
 };
 const replaceInTemplateLiteral = (node) => {
-  node.forEach((element) => {
+  for (const element of node) {
     const value = element.value.raw;
-    if (typeof value !== "string") return;
+    if (typeof value !== "string") continue;
     element.value.raw = replaceInLiteral(value);
-  });
+  }
 };
 const processNode = (node) => {
   if (!node) return;
@@ -46,11 +46,12 @@ const processNode = (node) => {
 function replaceClassNamePrefix(file, api) {
   const j = api.jscodeshift;
   const root = j(file.source);
-  root.find(j.JSXElement).forEach((path) => {
-    j(path).find(j.JSXAttribute, { name: { name: "className" } }).forEach((nodePath) => {
+  for (const path of root.find(j.JSXElement).paths()) {
+    const nodes = j(path).find(j.JSXAttribute, { name: { name: "className" } });
+    for (const nodePath of nodes.paths()) {
       processNode(nodePath.value.value);
-    });
-  });
+    }
+  }
   return root.toSource({
     quote: "single",
     reuseWhitespace: true,

package/dist/src/migrations/codemods/jsx/run.js

@@ -1,6 +1,6 @@
+import chalk from "chalk";
 import glob from "fast-glob";
 import { run as jscodeshift } from "jscodeshift/src/Runner.js";
-import chalk from "chalk";
 const transformer = `${import.meta.dirname}/classname-prefix.ts`;
 const runJSXCodemod = async ({ globPattern = "./**/*.tsx", dry }) => {
   const options = {

package/dist/src/tokens/actions.js

@@ -1,6 +1,6 @@
-import fs from "fs-extra";
-import glob from "fast-glob";
 import chalk from "chalk";
+import glob from "fast-glob";
+import fs from "fs-extra";
 import * as R from "ramda";
 const sortLightmodeFirst = R.sortWith([R.descend(R.includes("light")), R.descend(R.includes("secondary"))]);
 const header = `@charset "UTF-8";
@@ -10,7 +10,7 @@ const header = `@charset "UTF-8";
 `;
 const makeEntryFile = {
   name: "make_entryfile",
-  do: async function(dictionary, platform) {
+  do: async (dictionary, platform) => {
     const { outPath, theme, log } = platform;
     const writePath = `${outPath}/${theme}.css`;
     if (log?.verbosity !== "silent") {
@@ -18,7 +18,7 @@ const makeEntryFile = {
     }
     const generateImportUrls = R.pipe(
       sortLightmodeFirst,
-      R.map((file) => `@import url('./${theme}/${file.toString()}');`),
+      R.map((file) => `@import url('${theme}/${file.toString()}');`),
       R.join("\n")
     );
     const files = await glob(`**/*`, { cwd: platform.buildPath });

package/dist/src/tokens/build.js

@@ -1,15 +1,16 @@
-import path from "path";
-import fs from "fs";
-import StyleDictionary from "style-dictionary";
-import * as R from "ramda";
+import fs from "node:fs";
+import path from "node:path";
 import chalk from "chalk";
+import * as R from "ramda";
+import StyleDictionary from "style-dictionary";
 import * as configs from "./configs.js";
+import { makeEntryFile } from "./utils/entryfile.js";
 const { permutateThemes, getConfigs } = configs;
 const sd = new StyleDictionary();
 async function run(options) {
   const tokensDir = options.tokens;
   const storefrontOutDir = path.resolve("../../apps/storefront/tokens");
-  const tokensOutDir = path.resolve(options.out);
+  const outPath = path.resolve(options.out);
   const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensDir}/$themes.json`), "utf-8"));
   const relevant$themes = $themes.filter((theme) => {
     const group = R.toLower(R.defaultTo("")(theme.group));
@@ -20,9 +21,9 @@ async function run(options) {
   const typographyThemes = R.filter((val) => val.mode === "light", themes);
   const colormodeThemes = R.filter((val) => val.typography === "primary", themes);
   const semanticThemes = R.filter((val) => val.mode === "light" && val.typography === "primary", themes);
-  const colorModeConfigs = getConfigs(configs.colorModeVariables, tokensOutDir, tokensDir, colormodeThemes);
-  const semanticConfigs = getConfigs(configs.semanticVariables, tokensOutDir, tokensDir, semanticThemes);
-  const typographyConfigs = getConfigs(configs.typographyCSS, tokensOutDir, tokensDir, typographyThemes);
+  const colorModeConfigs = getConfigs(configs.colorModeVariables, outPath, tokensDir, colormodeThemes);
+  const semanticConfigs = getConfigs(configs.semanticVariables, outPath, tokensDir, semanticThemes);
+  const typographyConfigs = getConfigs(configs.typographyCSS, outPath, tokensDir, typographyThemes);
   const storefrontConfigs = getConfigs(configs.typescriptTokens, storefrontOutDir, tokensDir, colormodeThemes);
   if (typographyConfigs.length > 0) {
     console.log(`
@@ -35,17 +36,6 @@ async function run(options) {
       })
     );
   }
-  if (semanticConfigs.length > 0) {
-    console.log(`
-\u{1F371} Building ${chalk.green("semantic")}`);
-    await Promise.all(
-      semanticConfigs.map(async ({ theme, config, semantic }) => {
-        console.log(`\u{1F477} ${theme} - ${semantic}`);
-        const typographyClasses = await sd.extend(config);
-        return typographyClasses.buildAllPlatforms();
-      })
-    );
-  }
   if (colorModeConfigs.length > 0) {
     console.log(`
 \u{1F371} Building ${chalk.green("color-mode")}`);
@@ -57,6 +47,17 @@ async function run(options) {
       })
     );
   }
+  if (semanticConfigs.length > 0) {
+    console.log(`
+\u{1F371} Building ${chalk.green("semantic")}`);
+    await Promise.all(
+      semanticConfigs.map(async ({ theme, config, semantic }) => {
+        console.log(`\u{1F477} ${theme} - ${semantic}`);
+        const typographyClasses = await sd.extend(config);
+        return typographyClasses.buildAllPlatforms();
+      })
+    );
+  }
   if (storefrontConfigs.length > 0 && options.preview) {
     console.log(`
 \u{1F371} Building ${chalk.green("Storefront preview tokens")}`);
@@ -68,6 +69,16 @@ async function run(options) {
       })
     );
   }
+  if (semanticConfigs.length > 0) {
+    console.log(`
+\u{1F371} Building ${chalk.green("CSS file")}`);
+    await Promise.all(
+      semanticConfigs.map(async ({ theme }) => {
+        console.log(`\u{1F477} ${theme}.css`);
+        return makeEntryFile({ theme, outPath, buildPath: path.resolve(`${outPath}/${theme}`) });
+      })
+    );
+  }
 }
 export {
   run

package/dist/src/tokens/configs.js

@@ -1,14 +1,14 @@
-import * as tokenStudio from "@tokens-studio/sd-transforms";
+import { register } from "@tokens-studio/sd-transforms";
+import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import { outputReferencesFilter } from "style-dictionary/utils";
-import * as R from "ramda";
-import { permutateThemes as permutateThemes_ } from "./utils/permutateThemes.js";
-import { nameKebab, typographyShorthand, sizeRem } from "./transformers.js";
-import { jsTokens } from "./formats/js-tokens.js";
 import * as formats from "./formats/css.js";
-import { makeEntryFile } from "./actions.js";
-import { typeEquals } from "./utils/utils.js";
-void tokenStudio.registerTransforms(StyleDictionary);
+import { jsTokens } from "./formats/js-tokens.js";
+import { nameKebab, sizeRem, typographyShorthand } from "./transformers.js";
+import { permutateThemes as permutateThemes_ } from "./utils/permutateThemes.js";
+import { pathStartsWithOneOf, typeEquals } from "./utils/utils.js";
+void register(StyleDictionary, { withSDBuiltins: false });
+const usesDtcg = true;
 const prefix = "ds";
 const basePxFontSize = 16;
 const separator = "_";
@@ -20,7 +20,6 @@ StyleDictionary.registerFormat(jsTokens);
 StyleDictionary.registerFormat(formats.colormode);
 StyleDictionary.registerFormat(formats.semantic);
 StyleDictionary.registerFormat(formats.typography);
-StyleDictionary.registerAction(makeEntryFile);
 const dsTransformers = [
   nameKebab.name,
   `ts/resolveMath`,
@@ -31,7 +30,7 @@ const dsTransformers = [
   "ts/color/modifiers",
   "ts/color/css/hexrgba",
   "ts/size/lineheight",
-  "ts/shadow/css/shorthand"
+  "shadow/css/shorthand"
 ];
 const paritionPrimitives = R.partition(R.test(/(?!.*global\.json).*primitives.*/));
 const hasUnknownProps = R.pipe(R.values, R.none(R.equals("unknown")), R.not);
@@ -48,6 +47,7 @@ const colorModeVariables = ({ mode = "light", outPath, theme }) => {
   const selector = `${mode === "light" ? ":root, " : ""}[data-ds-color-mode="${mode}"]`;
   const layer = `ds.theme.color-mode.${mode}`;
   return {
+    usesDtcg,
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
@@ -62,7 +62,6 @@ const colorModeVariables = ({ mode = "light", outPath, theme }) => {
         prefix,
         buildPath: `${outPath}/${theme}/`,
         transforms: dsTransformers,
-        actions: [makeEntryFile.name],
         files: [
           {
             destination: `color-mode/${mode}.css`,
@@ -81,8 +80,9 @@ const colorModeVariables = ({ mode = "light", outPath, theme }) => {
 const semanticVariables = ({ outPath, theme }) => {
   const selector = `:root`;
   const layer = `ds.theme.semantic`;
-  const isCalculatedToken = (token) => typeEquals(["spacing", "sizing", "borderRadius"], token);
+  const isCalculatedToken = (token) => pathStartsWithOneOf(["spacing", "sizing", "border-radius"], token);
   return {
+    usesDtcg,
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
@@ -98,12 +98,11 @@ const semanticVariables = ({ outPath, theme }) => {
         prefix,
         buildPath: `${outPath}/${theme}/`,
         transforms: dsTransformers,
-        actions: [makeEntryFile.name],
         files: [
           {
             destination: `semantic.css`,
             format: formats.semantic.name,
-            filter: (token) => (!token.isSource || isCalculatedToken(token)) && !typeEquals(["color", "fontWeights", "fontFamilies"], token)
+            filter: (token) => (!token.isSource || isCalculatedToken(token)) && !typeEquals(["color", "fontWeight", "fontFamily"], token)
           }
         ],
         options: {
@@ -116,6 +115,7 @@ const semanticVariables = ({ outPath, theme }) => {
 };
 const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
   return {
+    usesDtcg,
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
@@ -130,9 +130,8 @@ const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
             format: jsTokens.name,
             outputReferences: outputColorReferences,
             filter: (token) => {
-              if (R.test(/primitives\/modes|\/themes/, token.filePath)) {
-                return false;
-              }
+              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;
               }
@@ -151,6 +150,7 @@ const typographyCSS = ({ outPath, theme, typography }) => {
   const selector = `${typography === "primary" ? ":root, " : ""}[data-ds-typography="${typography}"]`;
   const layer = `ds.theme.typography.${typography}`;
   return {
+    usesDtcg: true,
     log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
@@ -167,10 +167,14 @@ const typographyCSS = ({ outPath, theme, typography }) => {
             destination: `typography/${typography}.css`,
             format: formats.typography.name,
             filter: (token) => {
-              return typeEquals(
-                ["typography", "fontweights", "fontfamilies", "lineheights", "fontsizes", "letterSpacing"],
+              const included = typeEquals(
+                ["typography", "fontweight", "fontFamily", "lineheight", "fontsize", "dimension", "font"],
+                token
+              );
+              return included && !pathStartsWithOneOf(
+                ["spacing", "sizing", "border-width", "border-radius", "theme", "theme2", "theme3", "theme4"],
                 token
-              ) && !(token.path[0] || "").startsWith("theme");
+              );
             }
           }
         ],