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

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",
@@ -102,7 +102,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: {
@@ -146,13 +146,17 @@ 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 +165,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`,
@@ -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,12 @@ 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");
+    console.log("dictionary.allTokens", dictionary.allTokens);
+    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.js

@@ -23,7 +23,7 @@ async function buildTokens(options) {
   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 typographyConfigs = getConfigs(configs.typographyVariables, outPath, tokensDir, typographyThemes);
   const storefrontConfigs = getConfigs(configs.typescriptTokens, storefrontOutDir, tokensDir, colormodeThemes);
   if (typographyConfigs.length > 0) {
     console.log(`

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

@@ -17,7 +17,7 @@ type GetConfig = (options: {
 export declare const colorModeVariables: GetConfig;
 export declare const semanticVariables: GetConfig;
 export declare const typescriptTokens: GetConfig;
-export declare const typographyCSS: GetConfig;
+export declare const typographyVariables: GetConfig;
 type getConfigs = (getConfig: GetConfig, outPath: string, tokensDir: string, themes: PermutatedThemes) => {
     mode: string;
     theme: string;

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

@@ -1 +1 @@
-{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAOvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAQnE,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,SAAS,MAAM,CAAC;AAyC7B,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;AAEvF,eAAO,MAAM,eAAe,YAAa,WAAW,EAAE,qBAGlD,CAAC;AAEL,KAAK,SAAS,GAAG,CAAC,OAAO,EAAE;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAK,MAAM,CAAC;AAEb,eAAO,MAAM,kBAAkB,EAAE,SAkChC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SA+C/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAqC9B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,SA2C3B,CAAC;AAEF,KAAK,UAAU,GAAG,CAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,gBAAgB,KACrB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAAE,CAAC;AAE3G,eAAO,MAAM,UAAU,EAAE,UAqCd,CAAC"}
+{"version":3,"file":"configs.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/configs.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGxD,OAAO,KAAK,EAAE,MAAM,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAOvE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,4BAA4B,CAAC;AAQnE,eAAO,MAAM,MAAM,OAAO,CAAC;AAC3B,eAAO,MAAM,cAAc,KAAK,CAAC;AACjC,eAAO,MAAM,SAAS,MAAM,CAAC;AAyC7B,MAAM,MAAM,iBAAiB,GAAG,CAAC,KAAK,EAAE,gBAAgB,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;AAEvF,eAAO,MAAM,eAAe,YAAa,WAAW,EAAE,qBAGlD,CAAC;AAEL,KAAK,SAAS,GAAG,CAAC,OAAO,EAAE;IACzB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,KAAK,MAAM,CAAC;AAEb,eAAO,MAAM,kBAAkB,EAAE,SAkChC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,SA+C/B,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,SAqC9B,CAAC;AAEF,eAAO,MAAM,mBAAmB,EAAE,SAsDjC,CAAC;AAEF,KAAK,UAAU,GAAG,CAChB,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,MAAM,EACf,SAAS,EAAE,MAAM,EACjB,MAAM,EAAE,gBAAgB,KACrB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,EAAE,CAAC;AAE3G,eAAO,MAAM,UAAU,EAAE,UAqCd,CAAC"}

package/dist/types/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;AAarD,eAAO,MAAM,SAAS,EAAE,MA4BvB,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAsCtB,CAAC;AAsCF,eAAO,MAAM,UAAU,EAAE,MAuFxB,CAAC"}
+{"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;AAarD,eAAO,MAAM,SAAS,EAAE,MA6BvB,CAAC;AAIF,eAAO,MAAM,QAAQ,EAAE,MAoCtB,CAAC;AAQF,eAAO,MAAM,UAAU,EAAE,MA0BxB,CAAC"}

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

@@ -1,5 +1,5 @@
 import type { Transform } from 'style-dictionary/types';
 export declare const sizeRem: Transform;
 export declare const nameKebab: Transform;
-export declare const typographyShorthand: Transform;
+export declare const typographyName: Transform;
 //# sourceMappingURL=transformers.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"transformers.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/transformers.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAOxD,eAAO,MAAM,OAAO,EAAE,SAyBrB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,SASvB,CAAC;AASF,eAAO,MAAM,mBAAmB,EAAE,SASjC,CAAC"}
+{"version":3,"file":"transformers.d.ts","sourceRoot":"","sources":["../../../../../src/tokens/build/transformers.ts"],"names":[],"mappings":"AACA,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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet",
-  "version": "1.0.0-next.33",
+  "version": "1.0.0-next.34",
   "description": "CLI for Designsystemet",
   "author": "Designsystemet team",
   "repository": {