updated color tokens pipeline to support combined dark theme

packages/ui/internals/tokens/extract-design-tokens.js

@@ -41,6 +41,13 @@ try {
     console.log(`Theme file "${themeName}.json" written successfully.`)
   })
 
+  // duplicate the /themes/concept-one.json file to /themes/dark-combined.json
+  const darkThemePath = path.join(themesDirectory, 'concept-one.json')
+  const darkCombinedThemePath = path.join(themesDirectory, 'dark-combined.json')
+  const darkThemeData = fs.readFileSync(darkThemePath)
+  fs.writeFileSync(darkCombinedThemePath, darkThemeData)
+  console.log('Dark combined theme file written successfully.')
+
   console.log('Extraction completed!')
 } catch (error) {
   console.error('Error:', error.message)

packages/ui/transformTokens.js

@@ -83,7 +83,7 @@ StyleDictionary.registerTransform({
   matcher: (prop) => prop.type === 'color',
   transformer: (prop) => {
     if (!prop.original.value) {
-      console.error(`No colorvalue detected for ${prop.name}.`)
+      console.error(`No color value detected for ${prop.name}.`)
     }
 
     if (prop.original.value === '#') {
@@ -224,13 +224,25 @@ console.log(`Building Theme Styles...`)
 
 console.log(`\n`)
 
+console.log(themeFiles)
+
 themeFiles.map(function (filePath, i) {
   let fileName = fileNameCleaner(filePath)
 
+  const isCombinedDark = fileName === 'dark-combined' ? true : false
+
   // rename concept-one to dark-new
   fileName = fileName === 'dark' ? 'classic-dark' : fileName
   fileName = fileName === 'concept-one' ? 'dark' : fileName
 
+  const selector = isCombinedDark
+    ? `[data-theme='classic-dark'],
+.classic-dark,
+[data-theme='dark'],
+.dark`
+    : `[data-theme='${fileName}'],
+.${fileName}`
+
   let configTailwindFilesByType = []
 
   if (i === 0) {
@@ -255,8 +267,7 @@ themeFiles.map(function (filePath, i) {
             options: {
               showFileHeader: false,
               outputReferences: true,
-              selector: `[data-theme='${fileName}'],
-.${fileName}`,
+              selector: selector,
             },
             filter: (token) => token.filePath === filePath,
           },