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

package/dist/build/bin/designsystemet.js

@@ -24,7 +24,7 @@ program
     .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')
+    .option('-g --glob <glob>', 'Glob for files upon which to apply the migration', './**/*.(tsx|css)')
     .action((migrationKey, opts) => {
     const { glob, list } = opts;
     if (list) {

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

@@ -1,5 +1,5 @@
-import { cssClassRename, cssVarRename } from '../codemods/css/plugins.js';
-import { runCssCodemod } from '../codemods/css/run.js';
+import { cssClassRename, cssVarRename } from './codemods/css/plugins.js';
+import { runCssCodemod } from './codemods/css/run.js';
 export default (glob) => runCssCodemod({
     globPattern: glob,
     plugins: [
@@ -227,9 +227,8 @@ export default (glob) => runCssCodemod({
             '--fds-base_spacing': '[delete]',
             '--fds-base_sizing': '[delete]',
             '--fds-border_width-default': '--ds-border-width-default',
-            '--fds-border_width-active': '--ds-border-width-active',
-            '--fds-focus-border-width': '--ds-focus-border-width', // suggestion
-            '--fds-border_width-tab_focus': '--ds-border-width-tab_focus', // Skulle denne fjernes?
+            '--fds-border_width-active': '--ds-border-width-highlight',
+            '--fds-border_width-tab_focus': '--ds-border-width-highlight',
             '--fds-shadow-xsmall': '--ds-shadow-xs',
             '--fds-shadow-small': '--ds-shadow-sm',
             '--fds-shadow-medium': '--ds-shadow-md',
@@ -275,7 +274,66 @@ export default (glob) => runCssCodemod({
             '--fds-sizing-22': '--ds-sizing-22',
             '--fds-sizing-26': '--ds-sizing-26',
             '--fds-sizing-30': '--ds-sizing-30',
-            '--fds-opacity-disabled': '--ds-opacity-disabled',
+            '--fds-opacity-disabled': '--ds-disabled-opacity',
+            '--fds-colors-blue-100': '--ds-global-blue-1',
+            '--fds-colors-blue-200': '--ds-global-blue-2',
+            '--fds-colors-blue-700': '--ds-global-blue-7',
+            '--fds-colors-blue-800': '--ds-global-blue-8',
+            '--fds-colors-blue-900': '--ds-global-blue-9',
+            '--fds-colors-grey-100': '--ds-color-neutral-1',
+            '--fds-colors-grey-200': '--ds-color-neutral-2',
+            '--fds-colors-grey-400': '--ds-color-neutral-4',
+            '--fds-colors-grey-600': '--ds-color-neutral-6',
+            '--fds-colors-grey-700': '--ds-color-neutral-7',
+            '--fds-colors-grey-800': '--ds-color-neutral-8',
+            '--fds-colors-green-200': '--ds-global-green-2',
+            '--fds-colors-green-300': '--ds-global-green-3',
+            '--fds-colors-green-700': '--ds-global-green-7',
+            '--fds-colors-green-800': '--ds-global-green-8',
+            '--fds-colors-green-900': '--ds-global-green-9',
+            '--fds-colors-yellow-100': '--ds-global-yellow-1',
+            '--fds-colors-yellow-200': '--ds-global-yellow-2',
+            '--fds-colors-yellow-300': '--ds-global-yellow-3',
+            '--fds-colors-yellow-500': '--ds-global-yellow-5',
+            '--fds-colors-blue-400': '--ds-global-blue-4',
+            '--fds-colors-grey-300': '--ds-global-grey-3',
+            '--fds-colors-orange-600': '--ds-global-orange-6',
+            '--fds-colors-orange-700': '--ds-global-orange-7',
+            '--fds-colors-orange-800': '--ds-global-orange-8',
+            '--fds-colors-red-800': '--ds-global-red-8',
+            '--fds-colors-purple-700': '--ds-global-purple-7',
+            '--fds-colors-red-100': '--ds-global-red-1',
+            '--fds-colors-red-200': '--ds-global-red-2',
+            '--fds-colors-red-500': '--ds-global-red-5',
+            '--fds-colors-red-600': '--ds-global-red-6',
+            '--fds-colors-red-700': '--ds-global-red-7',
+            '--fds-brand-alt1-100': '--ds-color-brand1-1',
+            '--fds-brand-alt1-200': '--ds-color-brand1-2',
+            '--fds-brand-alt1-300': '--ds-color-brand1-3',
+            '--fds-brand-alt1-400': '--ds-color-brand1-4',
+            '--fds-brand-alt1-500': '--ds-color-brand1-5',
+            '--fds-brand-alt1-600': '--ds-color-brand1-6',
+            '--fds-brand-alt1-700': '--ds-color-brand1-7',
+            '--fds-brand-alt1-800': '--ds-color-brand1-8',
+            '--fds-brand-alt1-900': '--ds-color-brand1-9',
+            '--fds-brand-alt2-100': '--ds-color-brand2-1',
+            '--fds-brand-alt2-200': '--ds-color-brand2-2',
+            '--fds-brand-alt2-300': '--ds-color-brand2-3',
+            '--fds-brand-alt2-400': '--ds-color-brand2-4',
+            '--fds-brand-alt2-500': '--ds-color-brand2-5',
+            '--fds-brand-alt2-600': '--ds-color-brand2-6',
+            '--fds-brand-alt2-700': '--ds-color-brand2-7',
+            '--fds-brand-alt2-800': '--ds-color-brand2-8',
+            '--fds-brand-alt2-900': '--ds-color-brand2-9',
+            '--fds-brand-alt3-100': '--ds-color-brand3-1',
+            '--fds-brand-alt3-200': '--ds-color-brand3-2',
+            '--fds-brand-alt3-300': '--ds-color-brand3-3',
+            '--fds-brand-alt3-400': '--ds-color-brand3-4',
+            '--fds-brand-alt3-500': '--ds-color-brand3-5',
+            '--fds-brand-alt3-600': '--ds-color-brand3-6',
+            '--fds-brand-alt3-700': '--ds-color-brand3-7',
+            '--fds-brand-alt3-800': '--ds-color-brand3-8',
+            '--fds-brand-alt3-900': '--ds-color-brand3-9',
         }),
     ],
 });

package/dist/build/src/migrations/codemods/jsx/run.js

@@ -0,0 +1,19 @@
+import glob from 'fast-glob';
+import { run as jscodeshift } from 'jscodeshift/src/Runner.js';
+import chalk from 'chalk';
+const transformer = `${import.meta.dirname}/classname-prefix.ts`;
+export const runJSXCodemod = async ({ globPattern = './**/*.tsx', dry }) => {
+    const options = {
+        dry,
+        extensions: 'tsx',
+        parser: 'tsx',
+    };
+    const transform = async () => {
+        const files = await glob(globPattern, { ignore: ['node_modules/**', 'dist/**'] });
+        const result = await jscodeshift(transformer, files, options);
+        if (result.ok) {
+            console.log(chalk.green('Finished parsing'));
+        }
+    };
+    return transform();
+};

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

@@ -1,4 +1,6 @@
 import betaToV1 from './beta-to-v1.js';
+import reactBetaToV1 from './react-beta-to-v1.js';
 export default {
-    'beta-to-v1': betaToV1,
+    'css-beta-to-v1': betaToV1,
+    'react-beta-to-v1': reactBetaToV1,
 };

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

@@ -0,0 +1,2 @@
+import { runJSXCodemod } from './codemods/jsx/run.js';
+export default (glob) => runJSXCodemod({ globPattern: glob });

package/dist/build/src/test/jsx-test.js

@@ -6,5 +6,5 @@ export default function JsxTest({ className }) {
                         ? 'fds-yes'
                         : typeof DEFAULT === 'function'
                             ? 'fds-no'
-                            : 'fds-yes', className) }) }), _jsx("div", { className: `fds-${DEFAULT}` })] }));
+                            : 'fds-yes', className), children: "button" }) }), _jsx("div", { className: `fds-${DEFAULT}` })] }));
 }

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

@@ -0,0 +1,13 @@
+import fs from 'fs-extra';
+import glob from 'fast-glob';
+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);
+    },
+    undo: async function noOp() { },
+};

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

@@ -4,7 +4,10 @@ import { registerTransforms, permutateThemes } from '@tokens-studio/sd-transform
 import StyleDictionary from 'style-dictionary';
 import * as R from 'ramda';
 import { nameKebab, typographyShorthand, sizeRem } from './transformers.js';
-import { groupedTokens, scopedReferenceVariables } from './formatters.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;
@@ -15,6 +18,8 @@ StyleDictionary.registerTransform(nameKebab);
 StyleDictionary.registerTransform(typographyShorthand);
 StyleDictionary.registerFormat(groupedTokens);
 StyleDictionary.registerFormat(scopedReferenceVariables);
+StyleDictionary.registerFormat(typographyClasses);
+StyleDictionary.registerAction(makeEntryFile);
 StyleDictionary.registerTransformGroup({
     name: 'fds/css',
     transforms: [
@@ -30,16 +35,21 @@ StyleDictionary.registerTransformGroup({
     ],
 });
 const processThemeName = R.pipe(R.replace(`${separator}semantic`, ''), R.toLower, R.split(separator));
-const getCSSConfig = ({ fileName = 'unknown', buildPath = 'unknown' }) => {
+const getCSSConfig = ({ fileName = 'unknown', buildPath = 'unknown', mode = 'light', outPath, folderName, }) => {
     return {
-        log: { verbosity: 'verbose' },
         preprocessors: ['tokens-studio'],
         platforms: {
             css: {
-                prefix,
+                // custom
+                outPath,
+                fileName,
+                folderName,
                 basePxFontSize,
+                //
+                prefix,
+                buildPath: buildPath ?? `${outPath}/${folderName}/`,
                 transformGroup: 'fds/css',
-                buildPath,
+                actions: [makeEntryFile.name],
                 files: [
                     {
                         destination: `${fileName}.css`,
@@ -47,6 +57,7 @@ const getCSSConfig = ({ fileName = 'unknown', buildPath = 'unknown' }) => {
                     },
                 ],
                 options: {
+                    mode,
                     fileHeader,
                     includeReferences: (token) => {
                         if (R.test(/accent|neutral|brand1|brand2|brand3|success|danger|warning/, token.name) &&
@@ -62,7 +73,6 @@ const getCSSConfig = ({ fileName = 'unknown', buildPath = 'unknown' }) => {
 };
 const getStorefrontConfig = ({ fileName = 'unknown', buildPath = 'unknown' }) => {
     return {
-        log: { verbosity: 'verbose' },
         preprocessors: ['tokens-studio'],
         platforms: {
             storefront: {
@@ -90,55 +100,91 @@ const getStorefrontConfig = ({ fileName = 'unknown', buildPath = 'unknown' }) =>
         },
     };
 };
+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,
+                },
+            },
+        },
+    };
+};
 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 tokensPath = options.tokens;
-    const storefrontTokensOutPath = path.resolve('../../apps/storefront/tokens');
-    const packageTokensOutPath = path.resolve(options.out);
-    const $themes = JSON.parse(fs.readFileSync(path.resolve(`${tokensPath}/$themes.json`), 'utf-8'));
+    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 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);
+    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));
+    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}`);
+            const typographyClasses = await sd.extend(config);
+            return typographyClasses.buildAllPlatforms();
+        }));
+        console.log('🏁 Finished building Typography classes!');
+    }
     if (tokenConfigs.length > 0) {
-        console.log('🍱 Staring token builder');
-        console.log('➡️  Tokens path: ', tokensPath);
-        console.log('\n🏗️  Start building CSS tokens');
+        console.log('🍱 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();
         }));
-        console.log('🏁 Finished building package tokens!');
+        console.log('🏁 Finished building CSS variables!');
     }
     if (storefrontConfigs.length > 0 && options.preview) {
-        console.log('\n🏗️  Started building storefront tokens…');
+        console.log('\n🏗️  Building storefront js 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/formats/groupedTokens.js

@@ -0,0 +1,28 @@
+import * as R from 'ramda';
+import { fileHeader, createPropertyFormatter } from 'style-dictionary/utils';
+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/{formatters.js → formats/scopedReferenceVariables.js}

@@ -1,4 +1,3 @@
-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`
@@ -7,9 +6,8 @@ export const scopedReferenceVariables = {
     name: 'css/variables-scoped-references',
     format: async function ({ dictionary, file, options }) {
         const { allTokens, unfilteredTokens } = dictionary;
-        const { usesDtcg, outputReferences } = options;
-        const mode = file.destination.endsWith('dark.css') ? 'dark' : 'light';
-        const selector = mode === 'dark' ? '[data-ds-color-mode="dark"]' : ':root, [data-ds-color-mode="light"]';
+        const { usesDtcg, outputReferences, mode } = options;
+        const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
         const includeReferences = options.includeReferences;
         let referencedTokens = [];
         const format = createPropertyFormatter({
@@ -51,29 +49,3 @@ ${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/formats/typographyClasses.js

@@ -0,0 +1,31 @@
+import * as R from 'ramda';
+import { fileHeader } from 'style-dictionary/utils';
+// const isTransformedToken = (token: TransformedTokens): token is TransformedToken => token;
+/**
+ * Creates CSS classes from typography tokens
+ */
+export const typographyClasses = {
+    name: 'typographyClasses',
+    format: async function ({ dictionary, file, options, platform }) {
+        const { usesDtcg } = options;
+        const { basePxFontSize } = platform;
+        const classNames = R.map((token) => {
+            if (!Array.isArray(token)) {
+                const typography = (usesDtcg ? token.$value : token.value);
+                const baseFontPx = basePxFontSize || 16;
+                const fontSize = `${parseInt(typography.fontSize) / baseFontPx}rem`;
+                const className = `
+  .${token.name} {
+    font-size: ${fontSize};
+    line-height: ${typography?.lineHeight};
+    font-weight: ${typography?.fontWeight};
+  }`;
+                return className;
+            }
+        }, dictionary.allTokens);
+        return fileHeader({ file }).then((fileHeaderText) => `${fileHeaderText}
+@layer ds.typography {
+${classNames.join('\n')}
+}\n`);
+    },
+};

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

@@ -3,15 +3,16 @@ 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) => {
+    filter: (token) => ['sizing', 'spacing'].includes(token.type) && !token.name.includes('base'),
+    transform: (token, config, options) => {
+        const { usesDtcg } = options;
+        const value = (usesDtcg ? token.$value : token.value);
         const baseFont = config.basePxFontSize || 16;
-        const value = parseInt(token.value);
-        if (value === 0) {
+        const size = parseInt(value);
+        if (size === 0) {
             return '0';
         }
-        return `${value / baseFont}rem`;
+        return `${size / baseFont}rem`;
     },
 };
 export const nameKebab = {