feat(utils/sui-tokens): add primitives export flag

SUI-Components · Jan 3, 2025 · 35dd3c2 · 35dd3c2
1 parent b513555
commit 35dd3c2
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 44 deletions.
diff --git a/utils/sui-tokens/src/build.ts b/utils/sui-tokens/src/build.ts
@@ -116,21 +116,21 @@ export const runSCSS = async ({
   output,
   selector,
   mode,
-  primitive
+  primitives
 }: {
   configuration?: string
   output?: string
   selector: string
   mode?: 'light' | 'dark'
-  primitive: boolean
+  primitives: boolean
 }) => {
   console.log(chalk.blue('Loading tokens configuration'))
   const tokensConfig = await loadTokensConfig(configuration)
   console.log(chalk.blue('Building tokens'))
   console.log(chalk.green(JSON.stringify(tokensConfig, null, 2)))
   const result = build(tokensConfig)
   console.log(chalk.blue('Writing tokens'))
-  await writeTokensConfig(generate.scss(result, selector, mode), output)
+  await writeTokensConfig(generate.scss(result, {hasPrimitive: primitives, selector, mode}), output)
   console.log(chalk.blue('Done!'))
 }
 

diff --git a/utils/sui-tokens/src/generate.ts b/utils/sui-tokens/src/generate.ts
@@ -7,6 +7,9 @@ const anidate = (
   [key, value]: [string, string | number | object | string[] | number[]]
 ) => {
   if (typeof value === 'string' || typeof value === 'number') {
+    if (accumulator === undefined) {
+      accumulator = new Map()
+    }
     accumulator.set(`${kebabCase(key)}`, value as string)
   } else if (Array.isArray(value)) {
     value.forEach((arrayValue, arrayIndex) => {
@@ -23,91 +26,101 @@ const anidate = (
 export const generate = {
   scss: (
     {settings, primitive, semantic}: {settings: SettingsTheme; primitive: PrimitiveTheme; semantic: SemanticTheme},
-    selector: string,
-    mode?: 'light' | 'dark'
+    {
+      selector,
+      mode,
+      hasPrimitive
+    }: {
+      selector: string
+      mode?: 'light' | 'dark'
+      hasPrimitive: boolean
+    }
   ) => {
-    const semanticMaps: {
+    const maps: {
       [index: string]: Map<string, string>
-    } = {
-      color: new Map<string, string>(),
-      font: new Map<string, string>(),
-      opacity: new Map<string, string>(),
-      elevation: new Map<string, string>(),
-      spacing: new Map<string, string>()
-    }
-    const semanticTokens: {
+    } = {}
+
+    const customProperty: {
       [index: string]: string
-    } = {
-      color: '',
-      font: '',
-      opacity: '',
-      elevation: '',
-      spacing: ''
-    }
+    } = {}
 
     const scssTokens: {
       [index: string]: string
-    } = {
-      color: '',
-      font: '',
-      opacity: '',
-      elevation: '',
-      spacing: ''
-    }
+    } = {}
 
     const add = (partial: any, keyword: string, prefix?: string, ident: number = 0) => {
+      if (maps[keyword] === undefined) {
+        maps[keyword] = new Map()
+      }
       Object.entries(partial).forEach(([key, value]: [string, any]) => {
-        anidate(semanticMaps[keyword], [`${keyword}-${key}`, value])
+        anidate(maps[keyword], [`${keyword}-${key}`, value])
       })
 
       const getTokenKey = (key: string) => `--${prefix === undefined ? '' : `${prefix}-`}${key}`
 
       const identStr = '  '.repeat(ident)
-      semanticTokens[keyword] = String().concat(
-        ...Array.from(semanticMaps[keyword]).map(v => {
-          const [key, value] = v as [string, string | number]
-          return `
+      if (customProperty !== undefined) {
+        customProperty[keyword] = String().concat(
+          ...Array.from(maps[keyword]).map(v => {
+            const [key, value] = v as [string, string | number]
+            return `
 ${identStr}${getTokenKey(key)}: ${value};`
-        })
-      )
+          })
+        )
+      }
 
       scssTokens[keyword] = String().concat(
-        ...Array.from(semanticMaps[keyword]).map(val => {
+        ...Array.from(maps[keyword]).map(val => {
           const [key] = val as [string, string | number]
           return `
 $${key}: var(${getTokenKey(key)}) !default;`
         })
       )
     }
 
-    const {prefix} = settings
+    const {prefix, fontSize} = settings
     const hasMode = (mode?: 'light' | 'dark') => mode !== undefined
 
+    hasPrimitive && add(primitive.color, 'primitiveColor', prefix, hasMode(mode) ? 2 : 1)
     add(semantic.color, 'color', prefix, hasMode(mode) ? 2 : 1)
     add(semantic.font, 'font', prefix, hasMode(mode) ? 2 : 1)
     add(semantic.opacity, 'opacity', prefix, hasMode(mode) ? 2 : 1)
-    add(semantic.elevation, 'elevation', prefix, hasMode(mode) ? 2 : 1)
+    add(
+      semantic.elevation,
+
+      'elevation',
+      prefix,
+      hasMode(mode) ? 2 : 1
+    )
     add(semantic.spacing, 'spacing', prefix, hasMode(mode) ? 2 : 1)
 
     return `// This file is auto-generated by sui-tokens
-${selector} {${hasMode(mode) ? `\n  @media (prefers-color-scheme: ${mode as string}) {` : ''}${semanticTokens.color}
-${semanticTokens.font}
-${semanticTokens.opacity}
-${semanticTokens.elevation}
-${semanticTokens.spacing}${hasMode(mode) ? `\n  }` : ''}
+${selector} {${hasMode(mode) ? `\n  @media (prefers-color-scheme: ${mode as string}) {` : ''}${customProperty.color}
+${hasPrimitive ? `${customProperty.primitiveColor}\n` : ''}${customProperty.font}
+${customProperty.opacity}
+${customProperty.elevation}
+${customProperty.spacing}${hasMode(mode) ? `\n  }` : ''}
 }
 ${scssTokens.color}
 ${scssTokens.font}
 ${scssTokens.opacity}
 ${scssTokens.elevation}
 ${scssTokens.spacing}
+${
+  fontSize !== undefined
+    ? `\n:where(body) {
+  font-size: ${fontSize};
+}`
+    : ''
+}
 `
   },
   json: (
-    {primitive, semantic}: {primitive: PrimitiveTheme; semantic: SemanticTheme},
+    {settings, primitive, semantic}: {settings: SettingsTheme; primitive: PrimitiveTheme; semantic: SemanticTheme},
     {hasPrimitive}: {hasPrimitive: boolean}
   ) => {
     return {
+      settings,
       ...(hasPrimitive ? {primitive} : {}),
       semantic
     }