wip

digdir · May 14, 2024 · 6777b50 · 6777b50
1 parent 52d51d0
commit 6777b50
Show file tree

Hide file tree

Showing 13 changed files with 2,574 additions and 74 deletions.
diff --git a/packages/cli/package.json b/packages/cli/package.json
@@ -29,14 +29,14 @@
   },
   "devDependencies": {
     "@commander-js/extra-typings": "^12.0.1",
-    "@tokens-studio/sd-transforms": "^0.15.2",
+    "@tokens-studio/sd-transforms": "^0.16.0",
     "@types/glob": "^8.1.0",
     "@types/node": "^20.12.7",
     "@types/ramda": "^0.29.9",
     "commander": "^12.0.0",
     "ramda": "^0.29.1",
     "rimraf": "^5.0.5",
-    "style-dictionary": "^4.0.0-prerelease.26",
+    "style-dictionary": "^4.0.0-prerelease.27",
     "typescript": "^5.4.5"
   }
 }
diff --git a/packages/cli/src/tokens/build.ts b/packages/cli/src/tokens/build.ts
@@ -71,6 +71,7 @@ const getCSSConfig = (brand: Brand, targetFolder = ''): Config => {
 
   return {
     log: { verbosity: 'verbose' },
+    preprocessors: ['tokens-studio'],
     platforms: {
       css: {
         prefix,
@@ -162,46 +163,46 @@ export async function run(options: Options): Promise<void> {
   // const storefrontTokensPath = path.resolve('../../apps/storefront/tokens');
   const packageTokensPath = path.resolve('../../packages/theme/brand');
 
-  // const configs = Object.entries(themes).map(([name, tokensets]) => {
-  //   const updatedSets = tokensets.map((x) =>
-  //     path.resolve(`${tokensPath}/${x}.json`),
-  //   );
-
-  //   const [source, include] = R.partition(
-  //     R.includes('core/modes'),
-  //     updatedSets,
-  //   );
-
-  //   const config_ = getCSSConfig(name, packageTokensPath);
-
-  //   const config = {
-  //     ...config_,
-  //     source,
-  //     include,
-  //   };
-
-  //   console.log(config);
-
-  //   return [name, config];
-  // });
+  const configs = Object.entries(themes).map(([name, tokensets]) => {
+    const updatedSets = tokensets.map((x) =>
+      path.resolve(`${tokensPath}/${x}.json`),
+    );
 
-  const defaultConfig = {
-    ...getCSSConfig('theme1', packageTokensPath),
-    source: [
-      '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/core/modes/light.json',
-      // '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/core/modes/dark.json',
-    ],
-    include: [
-      '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/themes/theme1.json',
-      '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/core/size/default.json',
-      '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/core/typography/default.json',
-      '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/core/styles/default.json',
-      '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/semantic/color.json',
-      '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/semantic/style.json',
-    ],
-  };
+    const [source, include] = R.partition(
+      R.includes('core/modes'),
+      updatedSets,
+    );
 
-  const configs = [['theme1', defaultConfig]];
+    const config_ = getCSSConfig(name, packageTokensPath);
+
+    const config = {
+      ...config_,
+      source,
+      include,
+    };
+
+    console.log(config);
+
+    return [name, config];
+  });
+
+  // const defaultConfig = {
+  //   ...getCSSConfig('theme1', packageTokensPath),
+  //   source: [
+  //     '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/core/modes/light.json',
+  //     '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/core/size/default.json',
+  //     '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/core/typography/default.json',
+  //     '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/core/styles/default.json',
+  //     // '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/core/modes/dark.json',
+  //   ],
+  //   include: [
+  //     '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/themes/theme1.json',
+  //     '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/semantic/color.json',
+  //     '/Users/michaelmarszalek/Documents/designsystemet/design-tokens/semantic/style.json',
+  //   ],
+  // };
+
+  // const configs = [['theme1', defaultConfig]];
 
   if (brands.length > 0) {
     console.log('🍱 Staring token builder');

diff --git a/packages/cli/src/tokens/formatters.ts b/packages/cli/src/tokens/formatters.ts
@@ -14,7 +14,7 @@ type IncludeReferences = (token: TransformedToken) => boolean;
  */
 export const scopedReferenceVariables: Format = {
   name: 'css/variables-scoped-references',
-  formatter: async function ({ dictionary, file, options }) {
+  format: async function ({ dictionary, file, options }) {
     const { allTokens, unfilteredTokens } = dictionary;
     const { usesDtcg, outputReferences } = options;
     const includeReferences = options.includeReferences as IncludeReferences;
@@ -72,13 +72,13 @@ export const scopedReferenceVariables: Format = {
     return fileHeader({ file }).then((fileHeaderText) => {
       const content = `
       ${fileHeaderText}
-      :root {
-        /** Referenced source tokens */
-        /** DO NOT OVERRIDE */
-        ${referenceTokens.join('\n')}
-        \n  /** Tokens */
-        ${tokens.join('\n')}
-      }
+:root {
+  /** Referenced source tokens */
+  /** DO NOT OVERRIDE */
+${referenceTokens.join('\n')}
+  /** Tokens */
+${tokens.join('\n')}
+}
       `;
 
       return content;
@@ -103,7 +103,7 @@ const toCssVarName = R.pipe(R.split(':'), R.head, R.trim);
  */
 export const groupedTokens: Format = {
   name: 'groupedTokens',
-  formatter: async function ({ dictionary, file }) {
+  format: async function ({ dictionary, file }) {
     const format = createPropertyFormatter({
       dictionary,
       format: 'css',

diff --git a/packages/cli/src/tokens/transformers.ts b/packages/cli/src/tokens/transformers.ts
@@ -6,11 +6,11 @@ export const sizeRem: Transform = {
   name: 'fds/size/toRem',
   type: 'value',
   transitive: true,
-  matcher: (token) =>
+  filter: (token) =>
     ['sizing', 'spacing'].includes(token.type as string) &&
     !token.name.includes('base'),
-  transformer: (token, options) => {
-    const baseFont = options.basePxFontSize || 16;
+  transform: (token, options) => {
+    const baseFont = (options.basePxFontSize as unknown as number) || 16;
     const value = parseInt(token.value as string);
 
     if (value === 0) {
@@ -24,7 +24,7 @@ export const sizeRem: Transform = {
 export const nameKebab: Transform = {
   name: 'name/cti/hierarchical-kebab',
   type: 'name',
-  transformer: (token, options) => {
+  transform: (token, options) => {
     return noCase([options?.prefix].concat(token.path).join('-'), {
       delimiter: '-',
       stripRegexp: /[^A-Z0-9_]+/gi,
@@ -43,12 +43,12 @@ export const typographyShorthand: Transform = {
   name: 'typography/shorthand',
   type: 'value',
   transitive: true,
-  matcher: (token) => token.type === 'typography',
-  transformer: (token, config, options) => {
+  filter: (token) => token.type === 'typography',
+  transform: (token, config, options) => {
     const { usesDtcg } = options;
     const typography = (usesDtcg ? token.$value : token.value) as Typgraphy;
 
-    const baseFontPx = config?.basePxFontSize || 16;
+    const baseFontPx = (options.basePxFontSize as unknown as number) || 16;
     const fontSize = `${parseInt(typography.fontSize) / baseFontPx}rem`;
 
     return `${typography.fontWeight} ${fontSize}/${typography.lineHeight} '${typography.fontFamily}'`;