@digdir/designsystemet 0.1.0-alpha.9 → 0.1.0-next.21

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

@@ -1,229 +0,0 @@
-import * as tokenStudio from '@tokens-studio/sd-transforms';
-import StyleDictionary from 'style-dictionary';
-import { outputReferencesFilter } from 'style-dictionary/utils';
-import * as R from 'ramda';
-import { permutateThemes as permutateThemes_ } from './utils/permutateThemes';
-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';
-import { makeEntryFile } from './actions.js';
-import { typeEquals } from './utils/utils';
-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);
-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',
-];
-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) => permutateThemes_($themes, {
-    separator,
-});
-export const colorModeVariables = ({ 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,
-                selector,
-                //
-                prefix,
-                buildPath: `${outPath}/${theme}/`,
-                transforms: dsTransformers,
-                actions: [makeEntryFile.name],
-                files: [
-                    {
-                        destination: `color-mode/${mode}.css`,
-                        format: cssVariables.name,
-                        filter: (token) => !token.isSource && typeEquals('color', token),
-                    },
-                ],
-                options: {
-                    fileHeader,
-                    outputReferences: (token, options) => outputColorReferences(token) && outputReferencesFilter(token, options),
-                },
-            },
-        },
-    };
-};
-export const semanticVariables = ({ outPath, theme }) => {
-    const selector = `:root`;
-    /**
-     * 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'],
-        platforms: {
-            css: {
-                // custom
-                outPath,
-                theme,
-                basePxFontSize,
-                isCalculatedToken,
-                selector,
-                //
-                prefix,
-                buildPath: `${outPath}/${theme}/`,
-                transforms: dsTransformers,
-                actions: [makeEntryFile.name],
-                files: [
-                    {
-                        destination: `semantic.css`,
-                        format: cssVariables.name,
-                        filter: (token) => (!token.isSource || isCalculatedToken(token)) &&
-                            !typeEquals(['color', 'fontWeights', 'fontFamilies'], token),
-                    },
-                ],
-                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,
-                },
-            },
-        },
-    };
-};
-export const typographyCSS = ({ outPath, theme, typography }) => {
-    // const selector = `${typography === 'default' ? ':root, ' : ''}[data-ds-typography="${typography}"]`;
-    return {
-        log: { verbosity: 'silent' },
-        preprocessors: ['tokens-studio'],
-        hooks: {
-            transforms: {
-                typographyClassName: {
-                    type: 'name',
-                    filter: (token) => typeEquals('typography', token),
-                    transform: (token) => {
-                        const name = R.pipe((list) => {
-                            const withPrefix = R.concat([prefix], R.remove(0, 0, list));
-                            const [rest, last] = R.splitAt(-1, withPrefix);
-                            return `${rest.join('-')}--${R.head(last)}`;
-                        }, R.trim, R.toLower)(token.path);
-                        return name;
-                    },
-                },
-            },
-        },
-        platforms: {
-            css: {
-                prefix,
-                typography,
-                // selector,
-                buildPath: `${outPath}/${theme}/`,
-                basePxFontSize,
-                transforms: [
-                    nameKebab.name,
-                    'ts/size/px',
-                    sizeRem.name,
-                    'typographyClassName',
-                    'ts/size/lineheight',
-                    'ts/typography/fontWeight',
-                ],
-                files: [
-                    {
-                        destination: `typography.css`,
-                        format: cssClassesTypography.name,
-                        filter: (token) => {
-                            return (typeEquals(['typography', 'fontweights', 'fontfamilies', 'lineheights', 'fontsizes'], token) &&
-                                !(token.path[0] || '').startsWith('theme'));
-                        },
-                    },
-                ],
-                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

@@ -1,50 +0,0 @@
-import * as R from 'ramda';
-import { fileHeader, createPropertyFormatter, getReferences } from 'style-dictionary/utils';
-import { getValue, getType, typeEquals } from '../utils/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 { outputReferences } = options;
-        const { 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 = getType(token);
-            if (type === 'typography') {
-                const classSelector = R.replace('-typography', '', token.name);
-                const references = getReferences(getValue(token.original), dictionary.tokens);
-                const fontweight = R.find(R.curry(typeEquals)(['fontweights']))(references);
-                const lineheight = R.find(R.curry(typeEquals)(['lineheights']))(references);
-                const lineheightValue = R.isNotNil(lineheight) ? getValue(lineheight) : '';
-                const fontsize = R.find(R.curry(typeEquals)(['fontsizes']))(references);
-                const fontSizeValue = R.isNotNil(fontsize) ? getValue(fontsize) : '';
-                let fontWeightName = '';
-                if (fontweight) {
-                    fontWeightName = getVariableName(format(fontweight));
-                }
-                const className = `
-  .${classSelector} {
-    font-size: ${fontSizeValue};
-    line-height: ${lineheightValue};
-    ${fontWeightName && `font-weight: var(${fontWeightName});`}
-  }`;
-                return { ...acc, classes: [...acc.classes, className] };
-            }
-            return { ...acc, variables: [...acc.variables, format(token)] };
-        }, { 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

@@ -1,39 +0,0 @@
-import * as R from 'ramda';
-import { fileHeader, createPropertyFormatter, usesReferences } from 'style-dictionary/utils';
-import { getValue } from '../utils/utils';
-const calculatedVariable = R.pipe(R.split(/:(.*?);/g), (split) => `${split[0]}: calc(${R.trim(split[1])});`);
-const prefersColorScheme = (mode, content) => `
-@media (prefers-color-scheme: ${mode}) {
-  [data-ds-color-mode="auto"] ${content}
-}
-`;
-export const cssVariables = {
-    name: 'ds/css-variables',
-    format: async function ({ dictionary, file, options, platform }) {
-        const { allTokens } = dictionary;
-        const { outputReferences } = options;
-        const { selector, isCalculatedToken, mode } = platform;
-        const mode_ = mode;
-        const header = await fileHeader({ file });
-        const format = createPropertyFormatter({
-            outputReferences,
-            dictionary,
-            format: 'css',
-        });
-        const formatTokens = R.map((token) => {
-            const originalValue = getValue(token.original);
-            if (usesReferences(originalValue) &&
-                typeof outputReferences === 'function' &&
-                outputReferences?.(token, { dictionary })) {
-                if (isCalculatedToken?.(token, options)) {
-                    return calculatedVariable(format(token));
-                }
-            }
-            return format(token);
-        });
-        const formattedVariables = formatTokens(allTokens);
-        const content = `{\n${formattedVariables.join('\n')}\n}\n`;
-        const autoSelectorContent = ['light', 'dark'].includes(mode_) ? prefersColorScheme(mode_, content) : '';
-        return header + `${selector} ${content}` + autoSelectorContent;
-    },
-};

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

@@ -1,29 +0,0 @@
-import * as R from 'ramda';
-import { fileHeader, createPropertyFormatter } from 'style-dictionary/utils';
-import { getType } from '../utils/utils';
-const groupByType = R.groupBy((token) => getType(token));
-/** Add token name with prefix to list for removal */
-const removeUnwatedTokens = R.filter((token) => !['fds-base_spacing', 'fds-base_sizing'].includes(token.name));
-const toCssVarName = R.pipe(R.split(':'), R.head, R.trim);
-/**
- * Format for displaying tokens in storefront
- */
-export const jsTokens = {
-    name: 'ds/js-tokens',
-    format: async function ({ dictionary, file }) {
-        const format = createPropertyFormatter({
-            dictionary,
-            format: 'css',
-        });
-        const formatTokens = R.map((token) => ({
-            ...token,
-            name: toCssVarName(format(token)),
-        }));
-        const processTokens = R.pipe(removeUnwatedTokens, formatTokens, groupByType);
-        const tokens = processTokens(dictionary.allTokens);
-        const content = Object.entries(tokens)
-            .map(([name, token]) => `export const  ${name} = ${JSON.stringify(token, null, 2).replace(/"([^"]+)":/g, '$1:')} \n`)
-            .join('\n');
-        return fileHeader({ file }).then((fileHeaderText) => fileHeaderText + content);
-    },
-};

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

@@ -1,42 +0,0 @@
-import * as R from 'ramda';
-import { noCase } from './utils/noCase';
-import { getValue, typeEquals } from './utils/utils';
-const isPx = R.test(/\b\d+px\b/g);
-export const sizeRem = {
-    name: 'ds/size/toRem',
-    type: 'value',
-    transitive: true,
-    filter: (token) => typeEquals(['sizing', 'spacing', 'borderRadius', 'fontsizes'], token),
-    transform: (token, config) => {
-        const value = getValue(token);
-        if (isPx(value)) {
-            const baseFont = config.basePxFontSize || 16;
-            const size = parseInt(value);
-            if (size === 0) {
-                return '0';
-            }
-            return `${size / baseFont}rem`;
-        }
-        return value;
-    },
-};
-export const nameKebab = {
-    name: 'name/cti/hierarchical-kebab',
-    type: 'name',
-    transform: (token, options) => {
-        return noCase([options?.prefix].concat(token.path).join('-'), {
-            delimiter: '-',
-            stripRegexp: /[^A-Z0-9_]+/gi,
-        });
-    },
-};
-export const typographyShorthand = {
-    name: 'typography/shorthand',
-    type: 'value',
-    transitive: true,
-    filter: (token) => token.type === 'typography',
-    transform: (token) => {
-        const typography = getValue(token);
-        return `${typography.fontWeight} ${typography.fontSize}/${typography.lineHeight} '${typography.fontFamily}'`;
-    },
-};

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

@@ -1,30 +0,0 @@
-// Copied from https://github.com/blakeembrey/change-case/blob/change-case%404.1.2/packages/no-case/src/index.ts
-const lowerCase = (text = '') => text.toLowerCase();
-// Support camel case ("camelCase" -> "camel Case" and "CAMELCase" -> "CAMEL Case").
-const DEFAULT_SPLIT_REGEXP = [/([a-z0-9])([A-Z])/g, /([A-Z])([A-Z][a-z])/g];
-// Remove all non-word characters.
-const DEFAULT_STRIP_REGEXP = /[^A-Z0-9]+/gi;
-/**
- * Normalize the string into something other libraries can manipulate easier.
- */
-export function noCase(input, options = {}) {
-    const { splitRegexp = DEFAULT_SPLIT_REGEXP, stripRegexp = DEFAULT_STRIP_REGEXP, transform = lowerCase, delimiter = ' ', } = options;
-    const result = replace(replace(input, splitRegexp, '$1\0$2'), stripRegexp, '\0');
-    let start = 0;
-    let end = result.length;
-    // Trim the delimiter from around the output string.
-    while (result.charAt(start) === '\0')
-        start++;
-    while (result.charAt(end - 1) === '\0')
-        end--;
-    // Transform each token independently.
-    return result.slice(start, end).split('\0').map(transform).join(delimiter);
-}
-/**
- * Replace `re` in the input string with the replacement value.
- */
-function replace(input, re, value) {
-    if (re instanceof RegExp)
-        return input.replace(re, value);
-    return re.reduce((input, re) => input.replace(re, value), input);
-}

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

@@ -1,56 +0,0 @@
-import { TokenSetStatus } from '@tokens-studio/types';
-function mapThemesToSetsObject(themes) {
-    return Object.fromEntries(themes.map((theme) => [theme.name, filterTokenSets(theme.selectedTokenSets)]));
-}
-export function permutateThemes(themes, { separator = '-' } = {}) {
-    if (themes.some((theme) => theme.group)) {
-        // Sort themes by groups
-        const groups = {};
-        themes.forEach((theme) => {
-            if (theme.group) {
-                groups[theme.group] = [...(groups[theme.group] ?? []), theme];
-            }
-            else {
-                throw new Error(`Theme ${theme.name} does not have a group property, which is required for multi-dimensional theming.`);
-            }
-        });
-        if (Object.keys(groups).length <= 1) {
-            return mapThemesToSetsObject(themes);
-        }
-        // Create theme permutations
-        const permutations = cartesian(Object.values(groups));
-        return Object.fromEntries(permutations.map((perm) => {
-            // 1) concat the names of the theme groups to create the permutation theme name
-            // 2) merge the selectedTokenSets together from the different theme group parts
-            const reduced = perm.reduce((acc, curr) => [
-                // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
-                `${acc[0]}${acc[0] ? separator : ''}${curr.name}`,
-                [...acc[1], ...filterTokenSets(curr.selectedTokenSets)],
-            ], ['', []]);
-            // Dedupe the tokensets, return as entries [name, sets]
-            return [reduced[0], [...new Set(reduced[1])]];
-        }));
-    }
-    else {
-        return mapThemesToSetsObject(themes);
-    }
-}
-function filterTokenSets(tokensets) {
-    return (Object.entries(tokensets)
-        .filter(([, val]) => val !== TokenSetStatus.DISABLED)
-        // ensure source type sets are always ordered before enabled type sets
-        .sort((a, b) => {
-        if (a[1] === TokenSetStatus.SOURCE && b[1] === TokenSetStatus.ENABLED) {
-            return -1;
-        }
-        else if (a[1] === TokenSetStatus.ENABLED && b[1] === TokenSetStatus.SOURCE) {
-            return 1;
-        }
-        return 0;
-    })
-        .map((entry) => entry[0]));
-}
-// cartesian permutations: [[1,2], [3,4]] -> [[1,3], [1,4], [2,3], [2,4]]
-function cartesian(a) {
-    return a.reduce((a, b) => a.flatMap((d) => b.map((e) => [d, e].flat())));
-}

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

@@ -1,21 +0,0 @@
-import * as R from 'ramda';
-/**
- * Returns type based on design token format used. Read more:https://v4.styledictionary.com/info/dtcg/
- * @param token Transformed token
- * @returns type
- */
-export const getType = (token) => (token.$type ?? token.type) || '';
-/**
- * Returns value based on design token format used. Read more:https://v4.styledictionary.com/info/dtcg/
- *
- * Use generic (`<T>`) to define return value type
- * @param token Transformed or Design token
- * @returns value
- */
-export const getValue = (token) => (token.$value ?? token.value);
-export const typeEquals = (types, token) => {
-    if (R.isNil(token)) {
-        return false;
-    }
-    return R.includes(R.toLower(getType(token)), R.map(R.toLower, Array.isArray(types) ? types : [types]));
-};