@digdir/designsystemet 0.1.0-alpha.5 → 0.1.0-alpha.7

package/dist/build/src/index.js

@@ -0,0 +1 @@
+export {};

package/dist/build/src/migrations/beta-to-v1.js

@@ -3,7 +3,9 @@ import { runCssCodemod } from './codemods/css/run.js';
 export default (glob) => runCssCodemod({
     globPattern: glob,
     plugins: [
-        cssClassRename({}),
+        cssClassRename({
+            '.fds-': '.ds-',
+        }),
         // New component token prefixes
         cssVarRename({
             '--fds-accordion': '--dsc-accordion',

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

@@ -1,13 +1,20 @@
 import fs from 'fs-extra';
 import glob from 'fast-glob';
+import chalk from 'chalk';
+import * as R from 'ramda';
 export const makeEntryFile = {
     name: 'make_entryfile',
-    do: async function (dictionary, config) {
-        console.log('Creating entry file');
-        const { outPath, folderName } = config;
-        const files = await glob(`**/*`, { cwd: config.buildPath });
-        const content = files.map((file) => `@import url('./${folderName}/${file}');`).join('\n');
-        await fs.writeFile(`${outPath}/${folderName}.css`, content);
+    do: async function (dictionary, platform) {
+        const { outPath, theme, log } = platform;
+        const writePath = `${outPath}/${theme}.css`;
+        if (log?.verbosity !== 'silent') {
+            console.log(chalk.green(`Creating entry file: ${writePath}`));
+        }
+        const files = await glob(`**/*`, { cwd: platform.buildPath });
+        const content = R.reverse(R.sortBy(R.includes('light'), files))
+            .map((file) => `@import url('./${theme}/${file}');`)
+            .join('\n');
+        await fs.writeFile(writePath, content);
     },
     undo: async function noOp() { },
 };

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

@@ -1,190 +1,55 @@
 import path from 'path';
 import fs from 'fs';
-import { registerTransforms, permutateThemes } from '@tokens-studio/sd-transforms';
 import StyleDictionary from 'style-dictionary';
 import * as R from 'ramda';
-import { nameKebab, typographyShorthand, sizeRem } from './transformers.js';
-import { groupedTokens } from './formats/groupedTokens.js';
-import { scopedReferenceVariables } from './formats/scopedReferenceVariables.js';
-import { typographyClasses } from './formats/typographyClasses.js';
-import { makeEntryFile } from './actions.js';
-void registerTransforms(StyleDictionary);
-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);
-StyleDictionary.registerFormat(groupedTokens);
-StyleDictionary.registerFormat(scopedReferenceVariables);
-StyleDictionary.registerFormat(typographyClasses);
-StyleDictionary.registerAction(makeEntryFile);
-StyleDictionary.registerTransformGroup({
-    name: 'fds/css',
-    transforms: [
-        `ts/resolveMath`,
-        nameKebab.name,
-        sizeRem.name,
-        typographyShorthand.name,
-        'ts/color/modifiers',
-        'ts/color/css/hexrgba',
-        'ts/size/lineheight',
-        'ts/size/px',
-        'ts/shadow/css/shorthand',
-    ],
-});
-const processThemeName = R.pipe(R.replace(`${separator}semantic`, ''), R.toLower, R.split(separator));
-const getCSSConfig = ({ fileName = 'unknown', buildPath = 'unknown', mode = 'light', outPath, folderName, }) => {
-    return {
-        preprocessors: ['tokens-studio'],
-        platforms: {
-            css: {
-                // custom
-                outPath,
-                fileName,
-                folderName,
-                basePxFontSize,
-                //
-                prefix,
-                buildPath: buildPath ?? `${outPath}/${folderName}/`,
-                transformGroup: 'fds/css',
-                actions: [makeEntryFile.name],
-                files: [
-                    {
-                        destination: `${fileName}.css`,
-                        format: scopedReferenceVariables.name,
-                    },
-                ],
-                options: {
-                    mode,
-                    fileHeader,
-                    includeReferences: (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 getStorefrontConfig = ({ fileName = 'unknown', buildPath = 'unknown' }) => {
-    return {
-        preprocessors: ['tokens-studio'],
-        platforms: {
-            storefront: {
-                prefix,
-                basePxFontSize,
-                transformGroup: 'fds/css',
-                buildPath,
-                files: [
-                    {
-                        destination: `${fileName}.ts`,
-                        format: groupedTokens.name,
-                        filter: (token) => {
-                            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 getTypographyConfig = ({ buildPath = 'unknown' }) => {
-    return {
-        log: { verbosity: 'verbose' },
-        preprocessors: ['tokens-studio'],
-        platforms: {
-            css: {
-                prefix,
-                buildPath,
-                basePxFontSize,
-                transforms: [nameKebab.name, 'ts/size/lineheight', 'ts/size/px'],
-                files: [
-                    {
-                        destination: 'typography.css',
-                        format: typographyClasses.name,
-                        filter: (token) => token.type === 'typography',
-                    },
-                ],
-                options: {
-                    fileHeader,
-                },
-            },
-        },
-    };
-};
+import { getConfigs, cssVariablesConfig, tsTokensConfig, cssTypographyConfig, permutateThemes } from './configs.js';
+// type FormattedCSSPlatform = { css: { output: string; destination: string }[] };
 const sd = new StyleDictionary();
-const getConfigs = (getConfig, outPath, tokensDir, themes) => Object.entries(themes)
-    .map(([name, tokensets]) => {
-    const setsWithPaths = tokensets.map((x) => `${tokensDir}/${x}.json`);
-    const [fileName, folderName] = processThemeName(name);
-    const paritionPrimitives = /(?!.*global\.json).*primitives.*/;
-    const [source, include] = R.partition(R.test(paritionPrimitives), setsWithPaths);
-    const config_ = getConfig({
-        fileName: fileName,
-        outPath,
-        folderName,
-        buildPath: `${outPath}/${folderName}/`,
-        mode: fileName,
-    });
-    const config = {
-        ...config_,
-        source,
-        include,
-    };
-    // console.log(config);
-    return [`${folderName}: ${fileName}`, config];
-})
-    .sort();
 export async function run(options) {
     const tokensDir = options.tokens;
     const storefrontOutDir = path.resolve('../../apps/storefront/tokens');
     const tokensOutDir = path.resolve(options.out);
     const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensDir}/$themes.json`), 'utf-8'));
-    const themes = permutateThemes($themes, {
-        separator,
+    const relevant$themes = $themes.filter((theme) => {
+        const group = R.toLower(R.defaultTo('')(theme.group));
+        if (group === 'typography' && theme.name !== 'default')
+            return false;
+        if (group === 'fontsize' && theme.name !== 'default')
+            return false;
+        return true;
     });
-    const tokenConfigs = getConfigs(getCSSConfig, tokensOutDir, tokensDir, themes);
-    const storefrontConfigs = getConfigs(getStorefrontConfig, storefrontOutDir, tokensDir, themes);
-    const typographyConfigs = getConfigs(getTypographyConfig, tokensOutDir, tokensDir, R.pickBy((val, key) => R.startsWith('light', R.toLower(key)), themes));
+    const themes = permutateThemes(relevant$themes);
+    const typographyThemes = R.pickBy((_, key) => R.startsWith('light', R.toLower(key)), themes);
+    const themeVariableConfigs = getConfigs(cssVariablesConfig, tokensOutDir, tokensDir, themes);
+    const storefrontConfigs = getConfigs(tsTokensConfig, storefrontOutDir, tokensDir, themes);
+    const typographyConfigs = getConfigs(cssTypographyConfig, tokensOutDir, tokensDir, typographyThemes);
     if (typographyConfigs.length > 0) {
-        console.log('🍱 Bulding typography classes');
-        console.log('➡️  Tokens path: ', tokensDir);
-        await Promise.all(typographyConfigs.map(async ([name, config]) => {
-            console.log(`👷 Processing ${name}`);
+        console.log('\n🍱 Building Typography classes');
+        await Promise.all(typographyConfigs.map(async ({ name, config }) => {
+            const typographyTheme = name.split('-')[0];
+            console.log(`👷 Processing: ${typographyTheme}`);
             const typographyClasses = await sd.extend(config);
             return typographyClasses.buildAllPlatforms();
         }));
         console.log('🏁 Finished building Typography classes!');
     }
-    if (tokenConfigs.length > 0) {
-        console.log('🍱 Building CSS variables from tokens');
+    if (themeVariableConfigs.length > 0) {
+        console.log('\n🍱 Building CSS variables from tokens');
         console.log('➡️  Tokens path: ', tokensDir);
-        await Promise.all(tokenConfigs.map(async ([name, config]) => {
-            console.log(`👷 Processing ${name}`);
-            const tokensPackageSD = await sd.extend(config);
-            return tokensPackageSD.buildAllPlatforms();
+        await Promise.all(themeVariableConfigs.map(async ({ name, config }) => {
+            console.log(`👷 Processing: ${name}`);
+            const themeVariablesSD = await sd.extend(config);
+            return themeVariablesSD.buildAllPlatforms();
         }));
         console.log('🏁 Finished building CSS variables!');
     }
     if (storefrontConfigs.length > 0 && options.preview) {
-        console.log('\n🏗️  Building storefront js tokens');
-        await Promise.all(storefrontConfigs.map(async ([name, config]) => {
-            console.log(`👷 Processing ${name}`);
+        console.log('\n🏗️  Building Storefront tokens');
+        await Promise.all(storefrontConfigs.map(async ({ name, config }) => {
+            console.log(`👷 Processing: ${name}`);
             const storefrontSD = await sd.extend(config);
             return storefrontSD.buildAllPlatforms();
         }));
-        console.log('🏁 Finished building storefront tokens');
+        console.log('🏁 Finished building Storefront tokens');
     }
 }

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

@@ -0,0 +1,169 @@
+import * as tokenStudio from '@tokens-studio/sd-transforms';
+import StyleDictionary from 'style-dictionary';
+import * as R from 'ramda';
+import { nameKebab, typographyShorthand, sizeRem } from './transformers.js';
+import { jsTokens } from './formats/js-tokens.js';
+import { cssVariables } from './formats/css-variables.js';
+import { cssClassesTypography } from './formats/css-classes.js';
+import { makeEntryFile } from './actions.js';
+void tokenStudio.registerTransforms(StyleDictionary);
+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);
+StyleDictionary.registerFormat(jsTokens);
+StyleDictionary.registerFormat(cssVariables);
+StyleDictionary.registerFormat(cssClassesTypography);
+StyleDictionary.registerAction(makeEntryFile);
+StyleDictionary.registerTransformGroup({
+    name: 'ds/css',
+    transforms: [
+        `ts/resolveMath`,
+        'ts/typography/fontWeight',
+        nameKebab.name,
+        sizeRem.name,
+        typographyShorthand.name,
+        'ts/color/modifiers',
+        'ts/color/css/hexrgba',
+        'ts/size/lineheight',
+        'ts/size/px',
+        'ts/shadow/css/shorthand',
+    ],
+});
+const processThemeName = R.pipe(R.replace(`${separator}semantic`, ''), R.toLower, R.split(separator));
+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) => tokenStudio.permutateThemes($themes, {
+    separator,
+});
+export const cssVariablesConfig = ({ mode = 'light', outPath, theme }) => {
+    const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
+    return {
+        log: { verbosity: 'silent' },
+        preprocessors: ['tokens-studio'],
+        platforms: {
+            css: {
+                // custom
+                outPath,
+                mode,
+                theme,
+                basePxFontSize,
+                selector,
+                //
+                prefix,
+                buildPath: `${outPath}/${theme}/`,
+                transformGroup: 'ds/css',
+                actions: [makeEntryFile.name],
+                files: [
+                    {
+                        destination: `${mode}.css`,
+                        format: cssVariables.name,
+                        filter: (token) => !token.isSource,
+                    },
+                ],
+                options: {
+                    fileHeader,
+                    outputReferences: outputColorReferences,
+                },
+            },
+        },
+    };
+};
+export const tsTokensConfig = ({ mode = 'unknown', outPath, theme }) => {
+    return {
+        log: { verbosity: 'silent' },
+        preprocessors: ['tokens-studio'],
+        platforms: {
+            ts: {
+                prefix,
+                basePxFontSize,
+                transformGroup: 'ds/css',
+                buildPath: `${outPath}/${theme}/`,
+                files: [
+                    {
+                        destination: `${mode}.ts`,
+                        format: jsTokens.name,
+                        outputReferences: outputColorReferences,
+                        filter: (token) => {
+                            if (R.test(/primitives\/colors|\/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 cssTypographyConfig = ({ outPath, theme, typography }) => {
+    // const selector = `${typography === 'default' ? ':root, ' : ''}[data-ds-typography="${typography}"]`;
+    return {
+        log: { verbosity: 'silent' },
+        preprocessors: ['tokens-studio'],
+        platforms: {
+            css: {
+                prefix,
+                typography,
+                // selector,
+                buildPath: `${outPath}/${theme}/`,
+                basePxFontSize,
+                transforms: [nameKebab.name, 'ts/size/lineheight', 'ts/size/px', 'ts/typography/fontWeight'],
+                files: [
+                    {
+                        destination: `typography.css`,
+                        format: cssClassesTypography.name,
+                        filter: (token) => ['typography', 'fontWeights'].includes(token.type),
+                        outputColorReferences: (token) => {
+                            const type = token.$type ?? token.type;
+                            if (type === 'fontWeights') {
+                                return true;
+                            }
+                            return false;
+                        },
+                    },
+                ],
+                options: {
+                    fileHeader,
+                },
+            },
+        },
+    };
+};
+export const getConfigs = (getConfig, outPath, tokensDir, themes) => Object.entries(themes)
+    .map(([name, tokensets]) => {
+    const setsWithPaths = tokensets.map((x) => `${tokensDir}/${x}.json`);
+    const [mode, theme, semantic, fontSize, typography] = processThemeName(name);
+    const paritionPrimitives = /(?!.*global\.json).*primitives.*/;
+    const [source, include] = R.partition(R.test(paritionPrimitives), setsWithPaths);
+    const config_ = getConfig({
+        outPath,
+        theme,
+        mode,
+        semantic,
+        fontSize,
+        typography,
+    });
+    const config = {
+        ...config_,
+        source,
+        include,
+    };
+    return { name: `${theme}-${mode}`, config };
+})
+    .sort();

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

@@ -0,0 +1,53 @@
+import * as R from 'ramda';
+import { fileHeader, createPropertyFormatter, getReferences } from 'style-dictionary/utils';
+const sortByType = R.sortBy((token) => token?.type === 'typography');
+const getVariableName = R.pipe(R.split(':'), R.head, R.defaultTo(''), R.trim);
+/**
+ * Creates CSS classes from typography tokens
+ */
+export const cssClassesTypography = {
+    name: 'ds/css-classes-typography',
+    format: async function ({ dictionary, file, options, platform }) {
+        const { usesDtcg, outputReferences } = options;
+        const { basePxFontSize, selector } = platform;
+        const header = await fileHeader({ file });
+        const format = createPropertyFormatter({
+            outputReferences,
+            dictionary,
+            format: 'css',
+        });
+        const formattedTokens = R.pipe(sortByType, R.reduce((acc, token) => {
+            const type = token.type ?? token.$type;
+            if (type === 'fontWeights') {
+                const variable = format(token);
+                return { ...acc, variables: [...acc.variables, variable] };
+            }
+            if (type === 'typography') {
+                const typography = (usesDtcg ? token.$value : token.value);
+                const baseFontPx = basePxFontSize || 16;
+                const fontSize = `${parseInt(typography.fontSize) / baseFontPx}rem`;
+                const classSelector = R.replace('-typography', '', token.name);
+                // const formattedTypography = format(token);
+                const references = getReferences(token.original.value.fontWeight, dictionary.tokens);
+                const fontWeight = R.last(references);
+                let fontWeightName = '';
+                if (fontWeight) {
+                    fontWeightName = getVariableName(format(fontWeight));
+                }
+                const className = `
+  .${classSelector} {
+    font-size: ${fontSize};
+    line-height: ${typography?.lineHeight};
+    ${fontWeightName && `font-weight: var(${fontWeightName});`}
+  }`;
+                return { ...acc, classes: [...acc.classes, className] };
+            }
+            return acc;
+        }, { variables: [], classes: [] }))(dictionary.allTokens);
+        const classes = formattedTokens.classes.join('\n');
+        const variables = formattedTokens.variables.join('\n');
+        const variables_ = `:root {\n${variables}\n}\n`;
+        const content = selector ? `${selector} {\n${classes}\n}` : classes;
+        return header + `@layer ds.typography {\n${variables_}\n${content}\n}\n`;
+    },
+};

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

@@ -0,0 +1,17 @@
+import { fileHeader, createPropertyFormatter } from 'style-dictionary/utils';
+export const cssVariables = {
+    name: 'ds/css-variables',
+    format: async function ({ dictionary, file, options, platform }) {
+        const { allTokens } = dictionary;
+        const { outputReferences } = options;
+        const { selector } = platform;
+        const header = await fileHeader({ file });
+        const format = createPropertyFormatter({
+            outputReferences,
+            dictionary,
+            format: 'css',
+        });
+        const formattedVariables = allTokens.map(format);
+        return header + `${selector} {\n${formattedVariables.join('\n')}\n}\n`;
+    },
+};

package/dist/build/src/tokens/formats/{groupedTokens.js → js-tokens.js}

@@ -7,8 +7,8 @@ const toCssVarName = R.pipe(R.split(':'), R.head, R.trim);
 /**
  * Format for displaying tokens in storefront
  */
-export const groupedTokens = {
-    name: 'groupedTokens',
+export const jsTokens = {
+    name: 'ds/js-tokens',
     format: async function ({ dictionary, file }) {
         const format = createPropertyFormatter({
             dictionary,

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

@@ -1,6 +1,6 @@
 import { noCase } from './noCase.js';
 export const sizeRem = {
-    name: 'fds/size/toRem',
+    name: 'ds/size/toRem',
     type: 'value',
     transitive: true,
     filter: (token) => ['sizing', 'spacing'].includes(token.type) && !token.name.includes('base'),