@digdir/designsystemet 1.0.0-next.33 → 1.0.0-next.35

package/dist/bin/designsystemet.js

@@ -11,12 +11,13 @@ program.name("Designsystemet").description("CLI for working with Designsystemet"
 function makeTokenCommands() {
   const tokenCmd = createCommand("tokens");
   const DEFAULT_TOKENSDIR = "./design-tokens";
-  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).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) => {
+  tokenCmd.command("build").description("Build Designsystemet tokens").option("-t, --tokens <string>", `Path to ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-o, --out <string>", `Output directory for built ${chalk.blue("design-tokens")}`, "./dist/tokens").option("-p, --preview", "Generate preview token.ts files", false).option("--verbose", "Enable verbose output", false).action((opts) => {
     const tokens = typeof opts.tokens === "string" ? opts.tokens : DEFAULT_TOKENSDIR;
     const out = typeof opts.out === "string" ? opts.out : "./dist/tokens";
     const preview = opts.preview;
+    const verbose = opts.verbose;
     console.log(`Bulding tokens in ${chalk.green(tokens)}`);
-    return buildTokens({ tokens, out, preview });
+    return buildTokens({ tokens, out, preview, verbose });
   });
   tokenCmd.command("create").description("Create Designsystemet tokens").requiredOption("-a, --accent <number>", `Accent hex color`).requiredOption("-n, --neutral <number>", `Neutral hex color`).requiredOption("-b1, --brand1 <number>", `Brand1 hex color`).requiredOption("-b2, --brand2 <number>", `Brand2 hex color`).requiredOption("-b3, --brand3 <number>", `Brand3 hex color`).option("-w, --write [string]", `Output directory for created ${chalk.blue("design-tokens")}`, DEFAULT_TOKENSDIR).option("-f, --font-family <string>", `Font family`, "Inter").option("--theme <string>", `Theme name`, "theme").action(async (opts) => {
     const { theme, fontFamily } = opts;

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

@@ -1,10 +1,10 @@
-import { register } from "@tokens-studio/sd-transforms";
+import { expandTypesMap, register } from "@tokens-studio/sd-transforms";
 import * as R from "ramda";
 import StyleDictionary from "style-dictionary";
 import { outputReferencesFilter } from "style-dictionary/utils";
 import * as formats from "./formats/css.js";
 import { jsTokens } from "./formats/js-tokens.js";
-import { nameKebab, sizeRem, typographyShorthand } from "./transformers.js";
+import { nameKebab, sizeRem, typographyName } from "./transformers.js";
 import { permutateThemes as permutateThemes_ } from "./utils/permutateThemes.js";
 import { pathStartsWithOneOf, typeEquals } from "./utils/utils.js";
 void register(StyleDictionary, { withSDBuiltins: false });
@@ -15,7 +15,7 @@ const separator = "_";
 const fileHeader = () => [`These files are generated from design tokens defind using Token Studio`];
 StyleDictionary.registerTransform(sizeRem);
 StyleDictionary.registerTransform(nameKebab);
-StyleDictionary.registerTransform(typographyShorthand);
+StyleDictionary.registerTransform(typographyName);
 StyleDictionary.registerFormat(jsTokens);
 StyleDictionary.registerFormat(formats.colormode);
 StyleDictionary.registerFormat(formats.semantic);
@@ -26,7 +26,7 @@ const dsTransformers = [
   "ts/size/px",
   sizeRem.name,
   "ts/typography/fontWeight",
-  typographyShorthand.name,
+  typographyName.name,
   "ts/color/modifiers",
   "ts/color/css/hexrgba",
   "ts/size/lineheight",
@@ -48,7 +48,6 @@ const colorModeVariables = ({ mode = "light", outPath, theme }) => {
   const layer = `ds.theme.color-mode.${mode}`;
   return {
     usesDtcg,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
       css: {
@@ -83,7 +82,6 @@ const semanticVariables = ({ outPath, theme }) => {
   const isCalculatedToken = (token) => pathStartsWithOneOf(["spacing", "sizing", "border-radius"], token);
   return {
     usesDtcg,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
       css: {
@@ -102,7 +100,7 @@ const semanticVariables = ({ outPath, theme }) => {
           {
             destination: `semantic.css`,
             format: formats.semantic.name,
-            filter: (token) => (!token.isSource || isCalculatedToken(token)) && !typeEquals(["color", "fontWeight", "fontFamily"], token)
+            filter: (token) => (!token.isSource || isCalculatedToken(token)) && !typeEquals(["color", "fontWeight", "fontFamily", "typography"], token)
           }
         ],
         options: {
@@ -116,7 +114,6 @@ const semanticVariables = ({ outPath, theme }) => {
 const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
   return {
     usesDtcg,
-    log: { verbosity: "silent" },
     preprocessors: ["tokens-studio"],
     platforms: {
       ts: {
@@ -146,13 +143,16 @@ const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
     }
   };
 };
-const typographyCSS = ({ outPath, theme, typography }) => {
+const typographyVariables = ({ 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"],
+    expand: {
+      include: ["typography"],
+      typesMap: { ...expandTypesMap, typography: { ...expandTypesMap.typography, letterSpacing: "dimension" } }
+    },
     platforms: {
       css: {
         prefix,
@@ -161,7 +161,14 @@ const typographyCSS = ({ outPath, theme, typography }) => {
         layer,
         buildPath: `${outPath}/${theme}/`,
         basePxFontSize,
-        transforms: [nameKebab.name, "ts/size/px", sizeRem.name, "ts/size/lineheight", "ts/typography/fontWeight"],
+        transforms: [
+          nameKebab.name,
+          "ts/size/px",
+          sizeRem.name,
+          "ts/size/lineheight",
+          "ts/typography/fontWeight",
+          typographyName.name
+        ],
         files: [
           {
             destination: `typography/${typography}.css`,
@@ -185,7 +192,7 @@ const typographyCSS = ({ outPath, theme, typography }) => {
     }
   };
 };
-const getConfigs = (getConfig, outPath, tokensDir, permutatedThemes) => permutatedThemes.map((permutatedTheme) => {
+const getConfigs = (getConfig, outPath, tokensDir, permutatedThemes, logVerbosity) => permutatedThemes.map((permutatedTheme) => {
   const {
     selectedTokenSets = [],
     mode = "unknown",
@@ -209,6 +216,10 @@ const getConfigs = (getConfig, outPath, tokensDir, permutatedThemes) => permutat
   });
   const config = {
     ...config_,
+    log: {
+      ...config_?.log,
+      verbosity: logVerbosity
+    },
     source,
     include
   };
@@ -223,5 +234,5 @@ export {
   semanticVariables,
   separator,
   typescriptTokens,
-  typographyCSS
+  typographyVariables
 };

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

@@ -1,7 +1,6 @@
 import * as R from "ramda";
-import { createPropertyFormatter, fileHeader, getReferences, usesReferences } from "style-dictionary/utils";
-import { prefix } from "../configs.js";
-import { getValue, typeEquals } from "../utils/utils.js";
+import { createPropertyFormatter, fileHeader, usesReferences } from "style-dictionary/utils";
+import { getValue } from "../utils/utils.js";
 const prefersColorScheme = (mode, content) => `
 @media (prefers-color-scheme: ${mode}) {
   [data-ds-color-mode="auto"] ${content}
@@ -21,10 +20,12 @@ const colormode = {
       format: "css",
       usesDtcg
     });
-    const colorSchemeProperty = mode_ === "dark" || mode_ === "light" ? `color-scheme: ${mode_};
+    const colorSchemeProperty = mode_ === "dark" || mode_ === "light" ? `
+  color-scheme: ${mode_};
 ` : "";
+    const formattedTokens = dictionary.allTokens.map(format).join("\n");
     const content = `{
-${allTokens.map(format).join("\n")}
+${formattedTokens}
 ${colorSchemeProperty}}
 `;
     const autoSelectorContent = ["light", "dark"].includes(mode_) ? prefersColorScheme(mode_, content) : "";
@@ -40,7 +41,6 @@ const calculatedVariable = R.pipe(R.split(/:(.*?);/g), (split) => `${split[0]}:
 const semantic = {
   name: "ds/css-semantic",
   format: async ({ dictionary, file, options, platform }) => {
-    const { allTokens } = dictionary;
     const { outputReferences, usesDtcg } = options;
     const { selector, isCalculatedToken, layer } = platform;
     const header = await fileHeader({ file });
@@ -50,7 +50,7 @@ const semantic = {
       format: "css",
       usesDtcg
     });
-    const formatTokens = R.map((token) => {
+    const formattedTokens = R.map((token) => {
       const originalValue = getValue(token.original);
       if (usesReferences(originalValue) && typeof outputReferences === "function" && outputReferences?.(token, { dictionary })) {
         if (isCalculatedToken?.(token, options)) {
@@ -58,10 +58,9 @@ const semantic = {
         }
       }
       return format(token);
-    });
-    const formattedVariables = formatTokens(allTokens);
+    }, dictionary.allTokens);
     const content = `{
-${formattedVariables.join("\n")}
+${formattedTokens.join("\n")}
 }
 `;
     const body = R.isNotNil(layer) ? `@layer ${layer} {
@@ -72,28 +71,9 @@ ${selector} ${content}
     return header + body;
   }
 };
-const sortByType = R.sortBy((token) => token?.$type === "typography");
-const getVariableName = R.pipe(
-  R.split(":"),
-  R.head,
-  R.defaultTo(""),
-  R.trim,
-  (name) => `var(${name})`
-);
-const bemify = R.pipe(
-  (path) => {
-    const filteredPath = path.filter((p) => p !== "typography");
-    const withPrefix = R.concat([prefix], R.remove(0, 0, filteredPath));
-    const [rest, last] = R.splitAt(-1, withPrefix);
-    const className = `${rest.join("-")}--${R.head(last)}`;
-    return className;
-  },
-  R.trim,
-  R.toLower
-);
-const classSelector = R.pipe(R.prop("path"), bemify);
-const sortTypographyLast = R.sortWith([
-  R.ascend((token) => typeEquals("typography")(token) ? 1 : 0)
+const typographyFontFamilyPredicate = R.allPass([
+  R.pathSatisfies(R.includes("typography"), ["path"]),
+  R.pathSatisfies(R.includes("fontFamily"), ["path"])
 ]);
 const typography = {
   name: "ds/css-typography",
@@ -107,67 +87,11 @@ const typography = {
       format: "css",
       usesDtcg
     });
-    const sortedTokens = sortTypographyLast(dictionary.allTokens);
-    const formattedTokens = R.pipe(
-      sortByType,
-      R.reduce(
-        (acc, token) => {
-          if (typeEquals("fontweight", token)) {
-            const className = `
-  .${classSelector(token)} {
-    font-weight: ${getValue(token)};
-  }`;
-            return Object.assign(acc, {
-              variables: [...acc.variables, format(token)],
-              classes: [...acc.classes, className]
-            });
-          }
-          if (typeEquals("lineheight", token)) {
-            const className = `
-  .${classSelector(token)} {
-    line-height: ${getValue(token)};
-  }`;
-            return Object.assign(acc, {
-              variables: [...acc.variables, format(token)],
-              classes: [...acc.classes, className]
-            });
-          }
-          if (typeEquals("typography", token)) {
-            let references = [];
-            try {
-              references = getReferences(getValue(token.original), dictionary.tokens);
-            } catch (error) {
-              console.error("Error getting references", error);
-              throw new Error(JSON.stringify(token, null, 2));
-            }
-            const fontweight = R.find(typeEquals(["fontweight"]))(references);
-            const lineheight = R.find(typeEquals(["lineheight"]))(references);
-            const fontsize = R.find(typeEquals(["fontsize"]))(references);
-            const letterSpacing = R.find(typeEquals(["dimension"]))(references);
-            const fontSizeVar = fontsize ? getVariableName(format(fontsize)) : null;
-            const fontWeightVar = fontweight ? getVariableName(format(fontweight)) : null;
-            const lineheightVar = lineheight ? getVariableName(format(lineheight)) : null;
-            const letterSpacingVar = letterSpacing ? getVariableName(format(letterSpacing)) : null;
-            const className = `
-  .${classSelector(token)} {
-    ${fontSizeVar ? `font-size: ${fontSizeVar};` : ""}
-    ${lineheightVar ? `line-height: ${lineheightVar};` : ""}
-    ${fontWeightVar ? `font-weight: ${fontWeightVar};` : ""}
-    ${letterSpacingVar ? `letter-spacing: ${letterSpacingVar};` : ""}
-  }`;
-            return Object.assign(acc, { classes: [className, ...acc.classes] });
-          }
-          return Object.assign(acc, { variables: [...acc.variables, format(token)] });
-        },
-        { variables: [], classes: [] }
-      )
-    )(sortedTokens);
-    const classes = formattedTokens.classes.join("\n");
-    const variables = formattedTokens.variables.join("\n");
+    const filteredTokens = R.reject(typographyFontFamilyPredicate, dictionary.allTokens);
+    const formattedTokens = R.pipe(R.map(format), R.join("\n"))(filteredTokens);
     const content = selector ? `${selector} {
-${variables}
-${classes}
-}` : classes;
+${formattedTokens}
+}` : formattedTokens;
     const body = R.isNotNil(layer) ? `@layer ${layer} {
 ${content}
 }` : content;

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

@@ -34,18 +34,18 @@ const nameKebab = {
     });
   }
 };
-const typographyShorthand = {
-  name: "typography/shorthand",
-  type: "value",
+const typographyName = {
+  name: "name/typography",
+  type: "name",
   transitive: true,
-  filter: (token) => typeEquals("typography", token),
+  // expanded tokens have different type so we match on path instead
+  filter: (token) => pathStartsWithOneOf(["typography"], token),
   transform: (token) => {
-    const typography = getValue(token);
-    return `${typography.fontWeight} ${typography.fontSize}/${typography.lineHeight} '${typography.fontFamily}'`;
+    return token.name.replace("-typography", "");
   }
 };
 export {
   nameKebab,
   sizeRem,
-  typographyShorthand
+  typographyName
 };

package/dist/src/tokens/build/utils/entryfile.js

@@ -1,14 +1,40 @@
+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 sortOrder = [
+  "color-mode/light",
+  "typography/secondary",
+  "semantic",
+  "color-mode/dark",
+  "color-mode/contrast",
+  "typography/primary"
+];
+const sortByDefinedOrder = R.sortBy((fileName) => {
+  const sortIndex = sortOrder.findIndex((sortElement) => fileName.includes(`${sortElement}.css`));
+  if (sortIndex === -1) {
+    console.error(
+      chalk.yellow("WARNING: CSS section does not have a defined sort order:", fileName.replace(".css", ""))
+    );
+    console.log(
+      chalk.dim(
+        `
+A Digdir developer should define its order in the sortOrder array in entryfile.ts.
+The section will currently be added to the end of the entry file, but the exact
+order may change due to nondeterminism.`.trim()
+      )
+    );
+    console.log();
+    return Infinity;
+  }
+  return sortIndex;
+});
 const header = `@charset "UTF-8";
 
 @layer ds.reset, ds.theme, ds.base, ds.utilities, ds.components;
 
 `;
-const sortAndConcat = R.pipe(
-  sortLightmodeFirst,
+const concat = R.pipe(
   R.map((file) => {
     try {
       const content = fs.readFileSync(file, "utf-8").toString();
@@ -23,7 +49,8 @@ const sortAndConcat = R.pipe(
 const makeEntryFile = async ({ outPath, buildPath, theme }) => {
   const writePath = `${outPath}/${theme}.css`;
   const files = await glob(`**/*`, { cwd: buildPath });
-  const content = header + sortAndConcat(files.map((file) => `${buildPath}/${file}`));
+  const sortedFileNames = sortByDefinedOrder(files);
+  const content = header + concat(sortedFileNames.map((file) => `${buildPath}/${file}`));
   await fs.writeFile(writePath, content);
 };
 export {

package/dist/src/tokens/build.js

@@ -8,76 +8,90 @@ import { makeEntryFile } from "./build/utils/entryfile.js";
 const { permutateThemes, getConfigs } = configs;
 const sd = new StyleDictionary();
 async function buildTokens(options) {
+  const verbosity = options.verbose ? "verbose" : "silent";
   const tokensDir = options.tokens;
   const storefrontOutDir = path.resolve("../../apps/storefront/tokens");
   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));
-    if (group === "size" && theme.name !== "default") return false;
+    if (group === "size" && theme.name.toLowerCase() !== "default") return false;
     return true;
   });
   const themes = permutateThemes(relevant$themes);
   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, 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(`
+  const colorModeConfigs = getConfigs(configs.colorModeVariables, outPath, tokensDir, colormodeThemes, verbosity);
+  const semanticConfigs = getConfigs(configs.semanticVariables, outPath, tokensDir, semanticThemes, verbosity);
+  const typographyConfigs = getConfigs(configs.typographyVariables, outPath, tokensDir, typographyThemes, verbosity);
+  const storefrontConfigs = getConfigs(
+    configs.typescriptTokens,
+    storefrontOutDir,
+    tokensDir,
+    colormodeThemes,
+    verbosity
+  );
+  try {
+    if (typographyConfigs.length > 0) {
+      console.log(`
 \u{1F371} Building ${chalk.green("typography")}`);
-    await Promise.all(
-      typographyConfigs.map(async ({ theme, typography, config }) => {
-        console.log(`\u{1F477} ${theme} - ${typography}`);
-        const typographyClasses = await sd.extend(config);
-        return typographyClasses.buildAllPlatforms();
-      })
-    );
-  }
-  if (colorModeConfigs.length > 0) {
-    console.log(`
+      await Promise.all(
+        typographyConfigs.map(async ({ theme, typography, config }) => {
+          console.log(`\u{1F477} ${theme} - ${typography}`);
+          const typographyClasses = await sd.extend(config);
+          return typographyClasses.buildAllPlatforms();
+        })
+      );
+    }
+    if (colorModeConfigs.length > 0) {
+      console.log(`
 \u{1F371} Building ${chalk.green("color-mode")}`);
-    await Promise.all(
-      colorModeConfigs.map(async ({ theme, mode, config }) => {
-        console.log(`\u{1F477} ${theme} - ${mode}`);
-        const themeVariablesSD = await sd.extend(config);
-        return themeVariablesSD.buildAllPlatforms();
-      })
-    );
-  }
-  if (semanticConfigs.length > 0) {
-    console.log(`
+      await Promise.all(
+        colorModeConfigs.map(async ({ theme, mode, config }) => {
+          console.log(`\u{1F477} ${theme} - ${mode}`);
+          const themeVariablesSD = await sd.extend(config);
+          return themeVariablesSD.buildAllPlatforms();
+        })
+      );
+    }
+    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(`
+      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")}`);
-    await Promise.all(
-      storefrontConfigs.map(async ({ theme, mode, config }) => {
-        console.log(`\u{1F477} ${theme} - ${mode}`);
-        const storefrontSD = await sd.extend(config);
-        return storefrontSD.buildAllPlatforms();
-      })
-    );
-  }
-  if (semanticConfigs.length > 0) {
-    console.log(`
+      await Promise.all(
+        storefrontConfigs.map(async ({ theme, mode, config }) => {
+          console.log(`\u{1F477} ${theme} - ${mode}`);
+          const storefrontSD = await sd.extend(config);
+          return storefrontSD.buildAllPlatforms();
+        })
+      );
+    }
+    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}`) });
-      })
-    );
+      await Promise.all(
+        semanticConfigs.map(async ({ theme }) => {
+          console.log(`\u{1F477} ${theme}.css`);
+          return makeEntryFile({ theme, outPath, buildPath: path.resolve(`${outPath}/${theme}`) });
+        })
+      );
+    }
+  } catch (err) {
+    if (err instanceof Error) {
+      err.message = err.message.replace('log.verbosity "verbose" or use ', "");
+    }
+    throw err;
   }
 }
 export {

package/dist/src/tokens/design-tokens/default/semantic/style.json

@@ -72,49 +72,17 @@
         }
       }
     },
-    "ingress": {
-      "lg": {
-        "$type": "typography",
-        "$value": {
-          "fontFamily": "{font.family}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.lg}",
-          "fontSize": "{font-size.8}",
-          "letterSpacing": "{letter-spacing.8}"
-        }
-      },
-      "md": {
+    "body": {
+      "xl": {
         "$type": "typography",
         "$value": {
           "fontFamily": "{font.family}",
           "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.lg}",
+          "lineHeight": "{line-height.md}",
           "fontSize": "{font-size.7}",
           "letterSpacing": "{letter-spacing.8}"
         }
       },
-      "sm": {
-        "$type": "typography",
-        "$value": {
-          "fontFamily": "{font.family}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.lg}",
-          "fontSize": "{font-size.6}",
-          "letterSpacing": "{letter-spacing.7}"
-        }
-      },
-      "xs": {
-        "$type": "typography",
-        "$value": {
-          "fontFamily": "{font.family}",
-          "fontWeight": "{font-weight.regular}",
-          "lineHeight": "{line-height.lg}",
-          "fontSize": "{font-size.5}",
-          "letterSpacing": "{letter-spacing.6}"
-        }
-      }
-    },
-    "paragraph": {
       "lg": {
         "$type": "typography",
         "$value": {
@@ -156,6 +124,16 @@
         }
       },
       "short": {
+        "xl": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{font.family}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.sm}",
+            "fontSize": "{font-size.7}",
+            "letterSpacing": "{letter-spacing.8}"
+          }
+        },
         "lg": {
           "$type": "typography",
           "$value": {
@@ -198,6 +176,16 @@
         }
       },
       "long": {
+        "xl": {
+          "$type": "typography",
+          "$value": {
+            "fontFamily": "{font.family}",
+            "fontWeight": "{font-weight.regular}",
+            "lineHeight": "{line-height.lg}",
+            "fontSize": "{font-size.7}",
+            "letterSpacing": "{letter-spacing.8}"
+          }
+        },
         "lg": {
           "$type": "typography",
           "$value": {