@digdir/designsystemet 0.1.0-alpha.18 → 0.1.0-alpha.19

package/dist/src/tokens/configs.js

@@ -9,12 +9,10 @@ import * as formats from "./formats/css.js";
 import { makeEntryFile } from "./actions.js";
 import { typeEquals } from "./utils/utils.js";
 void tokenStudio.registerTransforms(StyleDictionary);
-export const prefix = 'ds';
-export const basePxFontSize = 16;
-export const separator = '_';
-const fileHeader = ()=>[
-        `These files are generated from design tokens defind using Token Studio`
-    ];
+const prefix = "ds";
+const basePxFontSize = 16;
+const separator = "_";
+const fileHeader = () => [`These files are generated from design tokens defind using Token Studio`];
 StyleDictionary.registerTransform(sizeRem);
 StyleDictionary.registerTransform(nameKebab);
 StyleDictionary.registerTransform(typographyShorthand);
@@ -24,235 +22,202 @@ StyleDictionary.registerFormat(formats.semantic);
 StyleDictionary.registerFormat(formats.typography);
 StyleDictionary.registerAction(makeEntryFile);
 const dsTransformers = [
-    nameKebab.name,
-    `ts/resolveMath`,
-    'ts/size/px',
-    sizeRem.name,
-    'ts/typography/fontWeight',
-    typographyShorthand.name,
-    'ts/color/modifiers',
-    'ts/color/css/hexrgba',
-    'ts/size/lineheight',
-    'ts/shadow/css/shorthand'
+  nameKebab.name,
+  `ts/resolveMath`,
+  "ts/size/px",
+  sizeRem.name,
+  "ts/typography/fontWeight",
+  typographyShorthand.name,
+  "ts/color/modifiers",
+  "ts/color/css/hexrgba",
+  "ts/size/lineheight",
+  "ts/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);
-const outputColorReferences = (token)=>{
-    if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) && R.includes('semantic/color', token.filePath)) {
-        return true;
-    }
-    return false;
+const hasUnknownProps = R.pipe(R.values, R.none(R.equals("unknown")), R.not);
+const outputColorReferences = (token) => {
+  if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) && R.includes("semantic/color", token.filePath)) {
+    return true;
+  }
+  return false;
 };
-export const permutateThemes = ($themes)=>permutateThemes_($themes, {
-        separator
-    });
-export const colorModeVariables = ({ mode = 'light', outPath, theme })=>{
-    const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
-    const layer = `ds.theme.color-mode.${mode}`;
-    return {
-        log: {
-            verbosity: 'silent'
-        },
-        preprocessors: [
-            'tokens-studio'
+const permutateThemes = ($themes) => permutateThemes_($themes, {
+  separator
+});
+const colorModeVariables = ({ mode = "light", outPath, theme }) => {
+  const selector = `${mode === "light" ? ":root, " : ""}[data-ds-color-mode="${mode}"]`;
+  const layer = `ds.theme.color-mode.${mode}`;
+  return {
+    log: { verbosity: "silent" },
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      css: {
+        // custom
+        outPath,
+        mode,
+        theme,
+        selector,
+        layer,
+        //
+        prefix,
+        buildPath: `${outPath}/${theme}/`,
+        transforms: dsTransformers,
+        actions: [makeEntryFile.name],
+        files: [
+          {
+            destination: `color-mode/${mode}.css`,
+            format: formats.colormode.name,
+            filter: (token) => !token.isSource && typeEquals("color", token)
+          }
         ],
-        platforms: {
-            css: {
-                // custom
-                outPath,
-                mode,
-                theme,
-                selector,
-                layer,
-                //
-                prefix,
-                buildPath: `${outPath}/${theme}/`,
-                transforms: dsTransformers,
-                actions: [
-                    makeEntryFile.name
-                ],
-                files: [
-                    {
-                        destination: `color-mode/${mode}.css`,
-                        format: formats.colormode.name,
-                        filter: (token)=>!token.isSource && typeEquals('color', token)
-                    }
-                ],
-                options: {
-                    fileHeader,
-                    outputReferences: (token, options)=>outputColorReferences(token) && outputReferencesFilter(token, options)
-                }
-            }
+        options: {
+          fileHeader,
+          outputReferences: (token, options) => outputColorReferences(token) && outputReferencesFilter(token, options)
         }
-    };
+      }
+    }
+  };
 };
-export const semanticVariables = ({ outPath, theme })=>{
-    const selector = `:root`;
-    const layer = `ds.theme.semantic`;
-    /**
-   * This is a workaround for our formatters to support transative transformers while retaining outputReference.
-   *
-   * This function will wrap formatted token in `calc()`
-   *
-   * @example  --ds-spacing-1: var(--ds-spacing-base)*1; ->  --ds-spacing-0: calc(var(--ds-spacing-base)*1);
-   */ const isCalculatedToken = (token)=>typeEquals([
-            'spacing',
-            'sizing',
-            'borderRadius'
-        ], token);
-    return {
-        log: {
-            verbosity: 'silent'
-        },
-        preprocessors: [
-            'tokens-studio'
+const semanticVariables = ({ outPath, theme }) => {
+  const selector = `:root`;
+  const layer = `ds.theme.semantic`;
+  const isCalculatedToken = (token) => typeEquals(["spacing", "sizing", "borderRadius"], token);
+  return {
+    log: { verbosity: "silent" },
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      css: {
+        // custom
+        outPath,
+        theme,
+        basePxFontSize,
+        isCalculatedToken,
+        selector,
+        layer,
+        //
+        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)
+          }
         ],
-        platforms: {
-            css: {
-                // custom
-                outPath,
-                theme,
-                basePxFontSize,
-                isCalculatedToken,
-                selector,
-                layer,
-                //
-                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)
-                    }
-                ],
-                options: {
-                    fileHeader,
-                    outputReferences: (token, options)=>isCalculatedToken(token) && outputReferencesFilter(token, options)
-                }
-            }
+        options: {
+          fileHeader,
+          outputReferences: (token, options) => isCalculatedToken(token) && outputReferencesFilter(token, options)
         }
-    };
+      }
+    }
+  };
 };
-export const typescriptTokens = ({ mode = 'unknown', outPath, theme })=>{
-    return {
-        log: {
-            verbosity: 'silent'
-        },
-        preprocessors: [
-            'tokens-studio'
-        ],
-        platforms: {
-            ts: {
-                prefix,
-                basePxFontSize,
-                transforms: dsTransformers,
-                buildPath: `${outPath}/${theme}/`,
-                files: [
-                    {
-                        destination: `${mode}.ts`,
-                        format: jsTokens.name,
-                        outputReferences: outputColorReferences,
-                        filter: (token)=>{
-                            if (R.test(/primitives\/modes|\/themes/, token.filePath)) {
-                                return false;
-                            }
-                            if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) || R.includes('semantic', token.filePath)) {
-                                return true;
-                            }
-                            return false;
-                        }
-                    }
-                ],
-                options: {
-                    fileHeader
-                }
+const typescriptTokens = ({ mode = "unknown", outPath, theme }) => {
+  return {
+    log: { verbosity: "silent" },
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      ts: {
+        prefix,
+        basePxFontSize,
+        transforms: dsTransformers,
+        buildPath: `${outPath}/${theme}/`,
+        files: [
+          {
+            destination: `${mode}.ts`,
+            format: jsTokens.name,
+            outputReferences: outputColorReferences,
+            filter: (token) => {
+              if (R.test(/primitives\/modes|\/themes/, token.filePath)) {
+                return false;
+              }
+              if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) || R.includes("semantic", token.filePath)) {
+                return true;
+              }
+              return false;
             }
+          }
+        ],
+        options: {
+          fileHeader
         }
-    };
+      }
+    }
+  };
 };
-export const typographyCSS = ({ outPath, theme, typography })=>{
-    const selector = `${typography === 'primary' ? ':root, ' : ''}[data-ds-typography="${typography}"]`;
-    const layer = `ds.theme.typography.${typography}`;
-    return {
-        log: {
-            verbosity: 'silent'
-        },
-        preprocessors: [
-            'tokens-studio'
-        ],
-        platforms: {
-            css: {
-                prefix,
-                typography,
-                selector,
-                layer,
-                buildPath: `${outPath}/${theme}/`,
-                basePxFontSize,
-                transforms: [
-                    nameKebab.name,
-                    'ts/size/px',
-                    sizeRem.name,
-                    'ts/size/lineheight',
-                    'ts/typography/fontWeight'
-                ],
-                files: [
-                    {
-                        destination: `typography/${typography}.css`,
-                        format: formats.typography.name,
-                        filter: (token)=>{
-                            return typeEquals([
-                                'typography',
-                                'fontweights',
-                                'fontfamilies',
-                                'lineheights',
-                                'fontsizes',
-                                'letterSpacing'
-                            ], token) && !(token.path[0] || '').startsWith('theme');
-                        }
-                    }
-                ],
-                options: {
-                    fileHeader
-                }
+const typographyCSS = ({ outPath, theme, typography }) => {
+  const selector = `${typography === "primary" ? ":root, " : ""}[data-ds-typography="${typography}"]`;
+  const layer = `ds.theme.typography.${typography}`;
+  return {
+    log: { verbosity: "silent" },
+    preprocessors: ["tokens-studio"],
+    platforms: {
+      css: {
+        prefix,
+        typography,
+        selector,
+        layer,
+        buildPath: `${outPath}/${theme}/`,
+        basePxFontSize,
+        transforms: [nameKebab.name, "ts/size/px", sizeRem.name, "ts/size/lineheight", "ts/typography/fontWeight"],
+        files: [
+          {
+            destination: `typography/${typography}.css`,
+            format: formats.typography.name,
+            filter: (token) => {
+              return typeEquals(
+                ["typography", "fontweights", "fontfamilies", "lineheights", "fontsizes", "letterSpacing"],
+                token
+              ) && !(token.path[0] || "").startsWith("theme");
             }
+          }
+        ],
+        options: {
+          fileHeader
         }
-    };
+      }
+    }
+  };
+};
+const getConfigs = (getConfig, outPath, tokensDir, permutatedThemes) => permutatedThemes.map((permutatedTheme) => {
+  const {
+    selectedTokenSets = [],
+    mode = "unknown",
+    theme = "unknown",
+    semantic = "unknown",
+    size = "unknown",
+    typography = "unknown"
+  } = permutatedTheme;
+  if (hasUnknownProps(permutatedTheme)) {
+    throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
+  }
+  const setsWithPaths = selectedTokenSets.map((x) => `${tokensDir}/${x}.json`);
+  const [source, include] = paritionPrimitives(setsWithPaths);
+  const config_ = getConfig({
+    outPath,
+    theme,
+    mode,
+    semantic,
+    size,
+    typography
+  });
+  const config = {
+    ...config_,
+    source,
+    include
+  };
+  return { mode, theme, semantic, size, typography, config };
+}).sort();
+export {
+  basePxFontSize,
+  colorModeVariables,
+  getConfigs,
+  permutateThemes,
+  prefix,
+  semanticVariables,
+  separator,
+  typescriptTokens,
+  typographyCSS
 };
-export const getConfigs = (getConfig, outPath, tokensDir, permutatedThemes)=>permutatedThemes.map((permutatedTheme)=>{
-        const { selectedTokenSets = [], mode = 'unknown', theme = 'unknown', semantic = 'unknown', size = 'unknown', typography = 'unknown' } = permutatedTheme;
-        if (hasUnknownProps(permutatedTheme)) {
-            throw Error(`Theme ${permutatedTheme.name} has unknown props: ${JSON.stringify(permutatedTheme)}`);
-        }
-        const setsWithPaths = selectedTokenSets.map((x)=>`${tokensDir}/${x}.json`);
-        const [source, include] = paritionPrimitives(setsWithPaths);
-        const config_ = getConfig({
-            outPath,
-            theme,
-            mode,
-            semantic,
-            size,
-            typography
-        });
-        const config = {
-            ...config_,
-            source,
-            include
-        };
-        return {
-            mode,
-            theme,
-            semantic,
-            size,
-            typography,
-            config
-        };
-    }).sort();