@digdir/designsystemet 0.0.3 → 0.0.4

package/dist/build/bin/designsystemet.js

@@ -0,0 +1,47 @@
+#!/usr/bin/env node
+import { Argument, program } from '@commander-js/extra-typings';
+import chalk from 'chalk';
+import migrations from './../src/migrations/index.js';
+import { run } from './../src/tokens/build.js';
+program.name('Designsystemet').description('CLI for working with Designsystemet');
+program
+    .command('tokens')
+    .showHelpAfterError()
+    .description('run Designsystemet token builder')
+    .option('-t, --tokens <string>', 'Path to "design-tokens"', '../../design-tokens')
+    .option('-p, --preview')
+    .action((opts) => {
+    const tokens = typeof opts.tokens === 'string' ? opts.tokens : '';
+    console.log(`Bulding tokens in ${chalk.green(tokens)}`);
+    return run({ tokens });
+});
+program
+    .command('migrate')
+    .showHelpAfterError()
+    .description('run a Designsystemet migration')
+    .addArgument(new Argument('[migration]', 'Available migrations').choices(Object.keys(migrations)))
+    .option('-l --list', 'List available migrations')
+    .option('-g --glob <glob>', 'Glob for files upon which to apply the migration', './**/*.css')
+    .action((migrationKey, opts) => {
+    const { glob, list } = opts;
+    if (list) {
+        Object.keys(migrations).forEach((key) => {
+            console.log(key);
+        });
+    }
+    else if (migrationKey) {
+        const migration = migrations[migrationKey];
+        if (!migration) {
+            console.error('Migration not found!');
+            throw 'Aborting';
+        }
+        console.log(`Applying migration ${chalk.blue(migrationKey)} with glob: ${chalk.green(glob)}`);
+        migration?.(glob)
+            .then(() => console.log(`Migration ${chalk.blue(migrationKey)} finished`))
+            .catch((error) => console.log(error));
+    }
+    else {
+        console.log('Migrate: please specify a migration name or --list');
+    }
+});
+await program.parseAsync(process.argv);

package/dist/build/src/codemods/css-var-codemod.js

@@ -0,0 +1,36 @@
+import fs from 'fs';
+import * as R from 'ramda';
+import postcss from 'postcss';
+import glob from 'fast-glob';
+export const cssVarCodemod = async ({ dictionary, globPath = './**/*.css' }) => {
+    const transformPlugin = {
+        postcssPlugin: 'Replaces referenced CSS variables',
+        Declaration(decl) {
+            Object.keys(dictionary).forEach((key) => {
+                const newValue = dictionary[key];
+                if (R.isEmpty(newValue)) {
+                    //console.log(`Skipping "${key}"; missing new value`);
+                }
+                if (newValue === '[delete]') {
+                    //console.log(`Found delete token "${key}"`);
+                }
+                if (decl.value.includes(key) && !R.isEmpty(newValue)) {
+                    decl.value = decl.value.replace(key, newValue);
+                }
+            });
+        },
+    };
+    const plugins = [transformPlugin];
+    const processor = postcss(plugins);
+    const transform = async () => {
+        const files = await glob(globPath, { ignore: ['node_modules/**'] });
+        const filePromises = files.map(async (file) => {
+            const contents = fs.readFileSync(file).toString();
+            const result = await processor.process(contents, { from: undefined });
+            fs.writeFileSync(file, result.css);
+        });
+        await Promise.all(filePromises);
+    };
+    // Run the transform.
+    void transform();
+};

package/dist/build/src/migrations/index.js

@@ -0,0 +1,8 @@
+import lightDark from './light-dark.js';
+import tokensv2 from './tokens-v2.js';
+import prefixDs from './prefix-ds.js';
+export default {
+    'tokens-rename-light-dark': lightDark,
+    'tokens-v2': tokensv2,
+    'css-prefix-ds': prefixDs,
+};

package/dist/build/src/migrations/light-dark.js

@@ -0,0 +1,22 @@
+import { cssVarCodemod } from '../codemods/css-var-codemod.js';
+export default (glob) => cssVarCodemod({
+    globPath: glob,
+    dictionary: {
+        '--fds-semantic-surface-first-light': '--fds-semantic-surface-first-subtle',
+        '--fds-semantic-surface-first-light-hover': '--fds-semantic-surface-first-subtle-hover',
+        '--fds-semantic-surface-first-light-active': '--fds-semantic-surface-first-subtle-active',
+        '--fds-semantic-surface-first-dark': '--fds-semantic-surface-first-strong',
+        '--fds-semantic-surface-second-light': '--fds-semantic-surface-second-subtle',
+        '--fds-semantic-surface-second-light-hover': '--fds-semantic-surface-second-subtle-hover',
+        '--fds-semantic-surface-second-light-active': '--fds-semantic-surface-second-subtle-active',
+        '--fds-semantic-surface-second-dark': '--fds-semantic-surface-second-strong',
+        '--fds-semantic-surface-third-light': '--fds-semantic-surface-third-subtle',
+        '--fds-semantic-surface-third-light-hover': '--fds-semantic-surface-third-subtle-hover',
+        '--fds-semantic-surface-third-light-active': '--fds-semantic-surface-third-subtle-active',
+        '--fds-semantic-surface-third-dark': '--fds-semantic-surface-third-strong',
+        '--fds-semantic-surface-neutral-dark': '--fds-semantic-surface-neutral-strong',
+        '--fds-semantic-surface-neutral-dark-hover': '--fds-semantic-surface-neutral-strong-hover',
+        '--fds-semantic-border-action-dark': '--fds-semantic-border-action-strong',
+        '--fds-semantic-border-action-dark-hover': '--fds-semantic-border-action-strong-hover',
+    },
+});

package/dist/build/src/migrations/prefix-ds.js

@@ -0,0 +1,7 @@
+import { cssVarCodemod } from '../codemods/css-var-codemod.js';
+export default (glob) => cssVarCodemod({
+    globPath: glob,
+    dictionary: {
+        '--fds': '--ds',
+    },
+});

package/dist/build/src/migrations/tokens-v2.js

@@ -0,0 +1,210 @@
+import { cssVarCodemod } from '../codemods/css-var-codemod.js';
+export default (glob) => cssVarCodemod({
+    globPath: glob,
+    dictionary: {
+        '--fds-semantic-surface-first-light': '--fds-color-brand1-surface-default',
+        '--fds-semantic-surface-first-light-hover': '--fds-color-brand1-surface-hover',
+        '--fds-semantic-surface-first-light-active': '--fds-color-brand1-surface-active',
+        '--fds-semantic-surface-first-dark': '',
+        '--fds-semantic-surface-second-light': '--fds-color-brand2-surface-default',
+        '--fds-semantic-surface-second-light-hover': '--fds-color-brand2-surface-hover',
+        '--fds-semantic-surface-second-light-active': '--fds-color-brand2-surface-active',
+        '--fds-semantic-surface-second-dark': '',
+        '--fds-semantic-surface-third-light': '--fds-color-brand3-surface-default',
+        '--fds-semantic-surface-third-light-hover': '--fds-color-brand3-surface-hover',
+        '--fds-semantic-surface-third-light-active': '--fds-color-brand3-surface-active',
+        '--fds-semantic-surface-third-dark': '',
+        '--fds-semantic-surface-action-first-subtle': '--fds-color-accent-surface-default',
+        '--fds-semantic-surface-action-first-subtle-hover': '--fds-color-accent-surface-hover',
+        '--fds-semantic-surface-action-first-default': '--fds-color-accent-base-default',
+        '--fds-semantic-surface-action-first-hover': '--fds-color-accent-base-hover',
+        '--fds-semantic-surface-action-first-active': '--fds-color-accent-base-active',
+        '--fds-semantic-surface-action-first-no_fill': '--fds-color-accent-contrast-first',
+        '--fds-semantic-surface-action-first-no_fill-hover': '--fds-color-accent-surface-default',
+        '--fds-semantic-surface-action-first-no_fill-active': '--fds-color-accent-surface-hover',
+        '--fds-semantic-surface-action-second-subtle': '--fds-color-accent-surface-default',
+        '--fds-semantic-surface-action-second-subtle-hover': '--fds-color-accent-surface-hover',
+        '--fds-semantic-surface-action-second-default': '--fds-color-accent-base-default',
+        '--fds-semantic-surface-action-second-hover': '--fds-color-accent-base-hover',
+        '--fds-semantic-surface-action-second-active': '--fds-color-accent-base-active',
+        '--fds-semantic-surface-action-second-no_fill': '--fds-color-accent-contrast-first',
+        '--fds-semantic-surface-action-second-no_fill-hover': '--fds-color-accent-surface-default',
+        '--fds-semantic-surface-action-second-no_fill-active': '--fds-color-accent-surface-hover',
+        '--fds-semantic-surface-action-subtle': '--fds-color-accent-surface-default',
+        '--fds-semantic-surface-action-subtle-hover': '--fds-color-accent-surface-hover',
+        '--fds-semantic-surface-action-default': '--fds-color-accent-base-default',
+        '--fds-semantic-surface-action-hover': '--fds-color-accent-base-hover',
+        '--fds-semantic-surface-action-active': '--fds-color-accent-base-active',
+        '--fds-semantic-surface-action-no_fill': '--fds-color-accent-contrast-first',
+        '--fds-semantic-surface-action-no_fill-hover': '--fds-color-accent-surface-default',
+        '--fds-semantic-surface-action-no_fill-active': '--fds-color-accent-surface-hover',
+        '--fds-semantic-surface-action-checked': '--fds-color-accent-base-default',
+        '--fds-semantic-surface-neutral-default': '--fds-color-neutral-background-default',
+        '--fds-semantic-surface-neutral-selected': '',
+        '--fds-semantic-surface-neutral-subtle': '--fds-color-neutral-background-subtle',
+        '--fds-semantic-surface-neutral-subtle-hover': '--fds-color-neutral-surface-default',
+        '--fds-semantic-surface-neutral-dark': '--fds-color-neutral-base-default',
+        '--fds-semantic-surface-neutral-dark-hover': '--fds-color-neutral-base-hover',
+        '--fds-semantic-surface-neutral-inverted': '',
+        '--fds-semantic-surface-success-subtle': '--fds-color-success-surface-default',
+        '--fds-semantic-surface-success-subtle-hover': '--fds-color-success-surface-hover',
+        '--fds-semantic-surface-success-default': '--fds-color-success-base-default',
+        '--fds-semantic-surface-success-hover': '--fds-color-success-base-hover',
+        '--fds-semantic-surface-success-active': '--fds-color-success-base-active',
+        '--fds-semantic-surface-success-no_fill': '--fds-color-success-contrast-first',
+        '--fds-semantic-surface-success-no_fill-hover': '--fds-color-success-surface-default',
+        '--fds-semantic-surface-success-no_fill-active': '--fds-color-success-surface-hover',
+        '--fds-semantic-surface-warning-subtle': '--fds-color-warning-surface-default',
+        '--fds-semantic-surface-warning-subtle-hover': '--fds-color-warning-surface-hover',
+        '--fds-semantic-surface-warning-default': '--fds-color-warning-base-default',
+        '--fds-semantic-surface-warning-default-hover': '--fds-color-warning-base-hover',
+        '--fds-semantic-surface-danger-subtle': '--fds-color-danger-surface-default',
+        '--fds-semantic-surface-danger-subtle-hover': '--fds-color-danger-surface-hover',
+        '--fds-semantic-surface-danger-default': '--fds-color-danger-base-default',
+        '--fds-semantic-surface-danger-hover': '--fds-color-danger-base-hover',
+        '--fds-semantic-surface-danger-active': '--fds-color-danger-base-active',
+        '--fds-semantic-surface-danger-no_fill': '--fds-color-danger-contrast-first',
+        '--fds-semantic-surface-danger-no_fill-hover': '--fds-color-danger-surface-default',
+        '--fds-semantic-surface-danger-no_fill-active': '--fds-color-danger-surface-hover',
+        '--fds-semantic-surface-info-subtle': '',
+        '--fds-semantic-surface-info-subtle-hover': '',
+        '--fds-semantic-surface-on_inverted-default': '',
+        '--fds-semantic-surface-on_inverted-hover': '',
+        '--fds-semantic-surface-on_inverted-active': '',
+        '--fds-semantic-surface-on_inverted-no_fill': '',
+        '--fds-semantic-surface-on_inverted-no_fill-hover': '',
+        '--fds-semantic-surface-on_inverted-no_fill-active': '',
+        '--fds-semantic-surface-focus-default': '',
+        '--fds-semantic-border-first-default': '',
+        '--fds-semantic-border-first-hover': '',
+        '--fds-semantic-border-first-active': '',
+        '--fds-semantic-border-second-default': '',
+        '--fds-semantic-border-second-hover': '',
+        '--fds-semantic-border-second-active': '',
+        '--fds-semantic-border-third-default': '',
+        '--fds-semantic-border-third-hover': '',
+        '--fds-semantic-border-third-active': '',
+        '--fds-semantic-border-action-first-subtle': '',
+        '--fds-semantic-border-action-first-subtle-hover': '',
+        '--fds-semantic-border-action-first-default': '',
+        '--fds-semantic-border-action-first-hover': '',
+        '--fds-semantic-border-action-first-active': '',
+        '--fds-semantic-border-action-second-subtle': '',
+        '--fds-semantic-border-action-second-subtle-hover': '',
+        '--fds-semantic-border-action-second-default': '',
+        '--fds-semantic-border-action-second-hover': '',
+        '--fds-semantic-border-action-second-active': '',
+        '--fds-semantic-border-action-subtle': '',
+        '--fds-semantic-border-action-subtle-hover': '',
+        '--fds-semantic-border-action-default': '',
+        '--fds-semantic-border-action-hover': '',
+        '--fds-semantic-border-action-active': '',
+        '--fds-semantic-border-action-dark': '',
+        '--fds-semantic-border-action-dark-hover': '',
+        '--fds-semantic-border-info-default': '',
+        '--fds-semantic-border-neutral-default': '',
+        '--fds-semantic-border-neutral-subtle': '',
+        '--fds-semantic-border-neutral-strong': '',
+        '--fds-semantic-border-success-default': '',
+        '--fds-semantic-border-success-hover': '',
+        '--fds-semantic-border-success-active': '',
+        '--fds-semantic-border-warning-default': '',
+        '--fds-semantic-border-warning-hover': '',
+        '--fds-semantic-border-warning-active': '',
+        '--fds-semantic-border-danger-default': '',
+        '--fds-semantic-border-danger-hover': '',
+        '--fds-semantic-border-danger-active': '',
+        '--fds-semantic-border-focus-outline': '',
+        '--fds-semantic-border-focus-boxshadow': '',
+        '--fds-semantic-border-on_inverted-default': '',
+        '--fds-semantic-border-input-default': '',
+        '--fds-semantic-border-input-hover': '',
+        '--fds-semantic-border-divider-default': '',
+        '--fds-semantic-border-divider-subtle': '',
+        '--fds-semantic-border-divider-strong': '',
+        '--fds-semantic-text-action-first-default': '',
+        '--fds-semantic-text-action-first-hover': '',
+        '--fds-semantic-text-action-first-active': '',
+        '--fds-semantic-text-action-first-on_action': '',
+        '--fds-semantic-text-action-second-default': '',
+        '--fds-semantic-text-action-second-hover': '',
+        '--fds-semantic-text-action-second-active': '',
+        '--fds-semantic-text-action-second-on_action': '',
+        '--fds-semantic-text-action-default': '',
+        '--fds-semantic-text-action-hover': '',
+        '--fds-semantic-text-action-active': '',
+        '--fds-semantic-text-action-on_action': '',
+        '--fds-semantic-text-success-default': '',
+        '--fds-semantic-text-success-hover': '',
+        '--fds-semantic-text-success-active': '',
+        '--fds-semantic-text-success-on_success': '',
+        '--fds-semantic-text-success-on_success_subtle': '',
+        '--fds-semantic-text-neutral-default': '',
+        '--fds-semantic-text-neutral-subtle': '',
+        '--fds-semantic-text-neutral-on_inverted': '',
+        '--fds-semantic-text-warning-default': '',
+        '--fds-semantic-text-warning-icon_warning': '',
+        '--fds-semantic-text-warning-on_warning': '',
+        '--fds-semantic-text-danger-default': '',
+        '--fds-semantic-text-danger-hover': '',
+        '--fds-semantic-text-danger-active': '',
+        '--fds-semantic-text-danger-on_danger': '',
+        '--fds-semantic-text-danger-on_danger_subtle': '',
+        '--fds-semantic-text-visited-default': '',
+        '--fds-semantic-background-default': '',
+        '--fds-semantic-background-subtle': '',
+        '--fds-typography-heading-2xlarge': '',
+        '--fds-typography-heading-xlarge': '',
+        '--fds-typography-heading-large': '',
+        '--fds-typography-heading-medium': '',
+        '--fds-typography-heading-small': '',
+        '--fds-typography-heading-xsmall': '',
+        '--fds-typography-heading-xxsmall': '',
+        '--fds-typography-ingress-large': '',
+        '--fds-typography-ingress-medium': '',
+        '--fds-typography-ingress-small': '',
+        '--fds-typography-ingress-xsmall': '',
+        '--fds-typography-paragraph-large': '',
+        '--fds-typography-paragraph-medium': '',
+        '--fds-typography-paragraph-small': '',
+        '--fds-typography-paragraph-xsmall': '',
+        '--fds-typography-paragraph-short-large': '',
+        '--fds-typography-paragraph-short-medium': '',
+        '--fds-typography-paragraph-short-small': '',
+        '--fds-typography-paragraph-short-xsmall': '',
+        '--fds-typography-paragraph-long-large': '',
+        '--fds-typography-paragraph-long-medium': '',
+        '--fds-typography-paragraph-long-small': '',
+        '--fds-typography-paragraph-long-xsmall': '',
+        '--fds-typography-label-large': '',
+        '--fds-typography-label-medium': '',
+        '--fds-typography-label-small': '',
+        '--fds-typography-label-xsmall': '',
+        '--fds-typography-error_message-large': '',
+        '--fds-typography-error_message-medium': '',
+        '--fds-typography-error_message-small': '',
+        '--fds-typography-error_message-xsmall': '',
+        '--fds-typography-interactive-large': '--fds-typography-paragraph-short-large',
+        '--fds-typography-interactive-medium': '--fds-typography-paragraph-short-medium',
+        '--fds-typography-interactive-small': '--fds-typography-paragraph-short-small',
+        '--fds-border_radius-interactive': '--fds-border-radius-md',
+        '--fds-border_radius-small': '--fds-border-radius-sm',
+        '--fds-border_radius-medium': '--fds-border-radius-md',
+        '--fds-border_radius-large': '--fds-border-radius-lg',
+        '--fds-border_radius-xlarge': '--fds-border-radius-xl',
+        '--fds-border_radius-xxlarge': '--fds-border-radius-2xl',
+        '--fds-border_radius-xxxlarge': '--fds-border-radius-3xl',
+        '--fds-border_radius-xxxxlarge': '--fds-border-radius-4xl',
+        '--fds-border_radius-full': '--fds-border-radius-full',
+        '--fds-base_spacing': '[delete]',
+        '--fds-base_sizing': '[delete]',
+        '--fds-border_width-default': '--fds-border-width-default',
+        '--fds-border_width-active': '--fds-border-width-active',
+        '--fds-border_width-tab_focus': '--fds-border-width-tab_focus', // Skulle denne fjernes?
+        '--fds-shadow-xsmall': '--fds-shadow-xs',
+        '--fds-shadow-small': '--fds-shadow-sm',
+        '--fds-shadow-medium': '--fds-shadow-md',
+        '--fds-shadow-large': '--fds-shadow-lg',
+        '--fds-shadow-xlarge': '--fds-shadow-xl',
+    },
+});

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

@@ -0,0 +1,140 @@
+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, scopedReferenceVariables } from './formatters.js';
+void registerTransforms(StyleDictionary);
+const prefix = 'fds';
+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.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' }) => {
+    return {
+        log: { verbosity: 'verbose' },
+        preprocessors: ['tokens-studio'],
+        platforms: {
+            css: {
+                prefix,
+                basePxFontSize,
+                transformGroup: 'fds/css',
+                buildPath,
+                files: [
+                    {
+                        destination: `${fileName}.css`,
+                        format: scopedReferenceVariables.name,
+                    },
+                ],
+                options: {
+                    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 {
+        log: { verbosity: 'verbose' },
+        preprocessors: ['tokens-studio'],
+        platforms: {
+            storefront: {
+                prefix,
+                basePxFontSize,
+                transformGroup: 'fds/css',
+                buildPath,
+                files: [
+                    {
+                        destination: `${fileName}.ts`,
+                        format: groupedTokens.name,
+                        filter: (token) => {
+                            return R.not(R.includes('themes', token.filePath));
+                        },
+                    },
+                ],
+                options: {
+                    fileHeader,
+                },
+            },
+        },
+    };
+};
+const sd = new StyleDictionary();
+export async function run(options) {
+    const tokensPath = options.tokens;
+    const storefrontTokensOutPath = path.resolve('../../apps/storefront/tokens');
+    const packageTokensOutPath = path.resolve('../../packages/theme/brand');
+    const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensPath}/$themes.json`), 'utf-8'));
+    const themes = permutateThemes($themes, {
+        separator,
+    });
+    const getConfigs = (configCallback, outPath) => Object.entries(themes)
+        .map(([name, tokensets]) => {
+        const updatedSets = tokensets.map((x) => `${tokensPath}/${x}.json`);
+        const [fileName, folderName] = processThemeName(name);
+        const paritionPrimitives = /(?!.*global\.json).*primitives.*/;
+        // const paritionPrimitives = /.*primitives.*/;
+        const [source, include] = R.partition(R.test(paritionPrimitives), updatedSets);
+        const config_ = configCallback({
+            fileName: fileName,
+            buildPath: `${outPath}/${folderName}/`,
+        });
+        const config = {
+            ...config_,
+            source: source,
+            include,
+        };
+        console.log(config);
+        return [`${folderName}: ${fileName}`, config];
+    })
+        .sort();
+    const tokenConfigs = getConfigs(getCSSConfig, packageTokensOutPath);
+    const storefrontConfigs = getConfigs(getStorefrontConfig, storefrontTokensOutPath);
+    if (tokenConfigs.length > 0) {
+        console.log('🍱 Staring token builder');
+        console.log('➡️  Tokens path: ', tokensPath);
+        console.log('\n🏗️  Start building CSS tokens');
+        await Promise.all(tokenConfigs.map(async ([name, config]) => {
+            console.log(`👷 Processing ${name}`);
+            const tokensPackageSD = await sd.extend(config);
+            return tokensPackageSD.buildAllPlatforms();
+        }));
+        console.log('🏁 Finished building package tokens!');
+    }
+    if (storefrontConfigs.length > 0) {
+        console.log('\n🏗️  Started 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!');
+    }
+}

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

@@ -0,0 +1,78 @@
+import * as R from 'ramda';
+import { fileHeader, createPropertyFormatter, usesReferences, getReferences } from 'style-dictionary/utils';
+/**
+ *  CSS variables format with option to include source references for matched token through `options.referencesFilter`
+ */
+export const scopedReferenceVariables = {
+    name: 'css/variables-scoped-references',
+    format: async function ({ dictionary, file, options }) {
+        const { allTokens, unfilteredTokens } = dictionary;
+        const { usesDtcg, outputReferences } = options;
+        const includeReferences = options.includeReferences;
+        let referencedTokens = [];
+        const format = createPropertyFormatter({
+            outputReferences,
+            dictionary,
+            format: 'css',
+        });
+        const formatWithReference = createPropertyFormatter({
+            outputReferences: true,
+            dictionary,
+            format: 'css',
+        });
+        const parseToken = (token, ignoreSource) => {
+            const originalValue = (usesDtcg ? token.original.$value : token.original.value);
+            if (usesReferences(originalValue) && includeReferences(token)) {
+                const refs = getReferences(originalValue, unfilteredTokens ? unfilteredTokens : {});
+                referencedTokens = [...referencedTokens, ...refs.filter((x) => x.isSource)];
+                return formatWithReference(token);
+            }
+            if (ignoreSource && !token.isSource) {
+                return format(token);
+            }
+        };
+        const tokens = allTokens.map((t) => parseToken(t, true)).filter((x) => x);
+        const referenceTokens = referencedTokens
+            .reduce((acc, token) => {
+            if (acc.find((x) => x.name === token.name)) {
+                return acc;
+            }
+            return [...acc, token];
+        }, [])
+            .map((token) => format(token))
+            .filter((formattedValue) => formattedValue);
+        return fileHeader({ file }).then((fileHeaderText) => `
+${fileHeaderText}
+:root {
+${referenceTokens.length > 0 ? referenceTokens.join('\n') : ''}
+${tokens.join('\n')}
+}
+      `);
+    },
+};
+const groupByType = R.groupBy((token) => token.type);
+/** 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 groupedTokens = {
+    name: 'groupedTokens',
+    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/noCase.js

@@ -0,0 +1,30 @@
+// 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/transformers.js

@@ -0,0 +1,39 @@
+import { noCase } from './noCase.js';
+export const sizeRem = {
+    name: 'fds/size/toRem',
+    type: 'value',
+    transitive: true,
+    filter: (token) => ['sizing', 'spacing'].includes(token.type) &&
+        !token.name.includes('base'),
+    transform: (token, config) => {
+        const baseFont = config.basePxFontSize || 16;
+        const value = parseInt(token.value);
+        if (value === 0) {
+            return '0';
+        }
+        return `${value / baseFont}rem`;
+    },
+};
+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, config, options) => {
+        const { usesDtcg } = options;
+        const typography = (usesDtcg ? token.$value : token.value);
+        const baseFontPx = config.basePxFontSize || 16;
+        const fontSize = `${parseInt(typography.fontSize) / baseFontPx}rem`;
+        return `${typography.fontWeight} ${fontSize}/${typography.lineHeight} '${typography.fontFamily}'`;
+    },
+};