working on new tokens builderscript

digdir · Jun 6, 2024 · 10f7281 · 10f7281
1 parent 704e7ab
commit 10f7281
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 26 deletions.
diff --git a/packages/cli/src/tokens/configs.ts b/packages/cli/src/tokens/configs.ts
@@ -52,43 +52,38 @@ export const permutateThemes = ($themes: ThemeObject[]) =>
   }) as Record<string, string[]>;
 
 type GetConfig = (options: {
-  fileName: string;
-  buildPath: string;
   mode?: string;
+  theme?: string;
+  semantic?: string;
+  fontSize?: string;
+  typography?: string;
   outPath?: string;
-  folderName?: string;
 }) => Config;
 
-export const tokensConfig: GetConfig = ({
-  fileName = 'unknown',
-  buildPath = 'unknown',
-  mode = 'light',
-  outPath,
-  folderName,
-}) => {
+export const tokensConfig: GetConfig = ({ mode = 'light', outPath, theme }) => {
   return {
     log: { verbosity: 'verbose' },
     preprocessors: ['tokens-studio'],
     platforms: {
       css: {
         // custom
         outPath,
-        fileName,
-        folderName,
+        mode,
+        fileName: mode,
+        folderName: theme,
         basePxFontSize,
         //
         prefix,
-        buildPath: buildPath ?? `${outPath}/${folderName}/`,
+        buildPath: `${outPath}/${theme}/`,
         transformGroup: 'fds/css',
         actions: [makeEntryFile.name],
         files: [
           {
-            destination: `${fileName}.css`,
+            destination: `color-modes/${mode}.css`,
             format: scopedReferenceVariables.name,
           },
         ],
         options: {
-          mode,
           fileHeader,
           includeReferences: (token: TransformedToken) => {
             if (
@@ -106,18 +101,18 @@ export const tokensConfig: GetConfig = ({
   };
 };
 
-export const previewConfig = ({ fileName = 'unknown', buildPath = 'unknown' }): Config => {
+export const previewConfig: GetConfig = ({ mode = 'unknown', outPath, theme }) => {
   return {
     preprocessors: ['tokens-studio'],
     platforms: {
       storefront: {
         prefix,
         basePxFontSize,
         transformGroup: 'fds/css',
-        buildPath,
+        buildPath: `${outPath}/${theme}/`,
         files: [
           {
-            destination: `${fileName}.ts`,
+            destination: `${mode}.ts`,
             format: groupedTokens.name,
             filter: (token: TransformedToken) => {
               if (
@@ -139,19 +134,20 @@ export const previewConfig = ({ fileName = 'unknown', buildPath = 'unknown' }):
   };
 };
 
-export const typographyConfig: GetConfig = ({ buildPath = 'unknown', fileName }) => {
+export const typographyConfig: GetConfig = ({ outPath, theme, typography }) => {
   return {
     log: { verbosity: 'verbose' },
     preprocessors: ['tokens-studio'],
     platforms: {
       css: {
         prefix,
-        buildPath,
+        typography,
+        buildPath: `${outPath}/${theme}/`,
         basePxFontSize,
         transforms: [nameKebab.name, 'ts/size/lineheight', 'ts/size/px', 'ts/typography/fontWeight'],
         files: [
           {
-            destination: `typography.css`,
+            destination: `typography/${typography}.css`,
             format: typographyClasses.name,
             filter: (token) => token.type === 'typography',
           },
@@ -182,11 +178,12 @@ export const getConfigs = (
       const [source, include] = R.partition(R.test(paritionPrimitives), setsWithPaths);
 
       const config_ = getConfig({
-        fileName: mode,
         outPath,
-        folderName: theme,
-        buildPath: `${outPath}/${theme}/`,
+        theme,
         mode,
+        semantic,
+        fontSize,
+        typography,
       });
 
       const config = {

diff --git a/packages/cli/src/tokens/formats/scopedReferenceVariables.ts b/packages/cli/src/tokens/formats/scopedReferenceVariables.ts
@@ -8,9 +8,10 @@ type IncludeReferences = (token: TransformedToken) => boolean;
  */
 export const scopedReferenceVariables: Format = {
   name: 'css/variables-scoped-references',
-  format: async function ({ dictionary, file, options }) {
+  format: async function ({ dictionary, file, options, platform }) {
     const { allTokens, unfilteredTokens } = dictionary;
-    const { usesDtcg, outputReferences, mode } = options;
+    const { usesDtcg, outputReferences } = options;
+    const { mode } = platform;
 
     const selector = `${mode === 'light' ? ':root, ' : ''}[data-ds-color-mode="${mode}"]`;
     const includeReferences = options.includeReferences as IncludeReferences;