Using SD prefix instead of adding it to the tokens json file

packages/design-tokens/scripts/build-tokens.js

@@ -73,35 +73,40 @@ const darkJson = require('../src/tokens/base/colors/dark')
   //build most tokens
   buildPrimitives({
     source: [`tokens/functional/**/*.json`, `!tokens/functional/**/size-*.json`],
-    include: ['tokens/**/*.json'],
+    include: ['tokens/base/**/*.json'],
     namespace,
     outputPath,
   })
-
+  // build base tokens
   buildPrimitives({
     source: [`tokens/base/**/*.json`],
     namespace: undefined,
     outputPath,
   })
 
   buildPrimitives({
-    source: [`tokens/functional/size/size-fine.json`, `tokens/base/size/size.json`], //build size fine
+    source: [`tokens/functional/size/size-fine.json`], //build size fine
+    include: ['tokens/base/size/size.json'],
     namespace,
     outputPath,
   })
 
   buildPrimitives({
-    source: [`tokens/functional/size/size-coarse.json`, `tokens/base/size/size.json`], //build size coarse
+    source: [`tokens/functional/size/size-coarse.json`], //build size coarse
+    include: ['tokens/base/size/size.json'],
     namespace,
     outputPath,
   })
 
   buildPrimitives({
-    source: [`tokens/base/size/size.json`, `tokens/functional/size/size-fine.json`], // build the special formats
+    source: [`tokens/functional/size/size-fine.json`], // build the special formats
+    include: ['tokens/base/size/size.json'],
     namespace,
     outputPath,
     platforms: {
       css: {
+        prefix: namespace,
+        addPrefix: token => token.isSource,
         buildPath: `${outputPath}/css/`,
         transformGroup: 'css',
         files: [
@@ -124,10 +129,13 @@ const darkJson = require('../src/tokens/base/colors/dark')
   })
 
   buildPrimitives({
-    source: [`tokens/base/size/size.json`, `tokens/functional/size/size-coarse.json`], // build the special formats
+    source: [`tokens/functional/size/size-coarse.json`], // build the special formats
+    include: ['tokens/base/size/size.json'],
     namespace,
     platforms: {
       css: {
+        prefix: namespace,
+        addPrefix: token => token.isSource,
         buildPath: `${outputPath}/css/`,
         transformGroup: 'css',
         files: [
@@ -150,7 +158,6 @@ const darkJson = require('../src/tokens/base/colors/dark')
   })
 
   const filesForResponsiveTokens = [
-    `tokens/base/typography/typography.json`,
     `tokens/functional/typography/typography-responsive.json`,
     `tokens/functional/components/grid/grid.json`,
     `tokens/functional/components/river/river.json`,
@@ -167,13 +174,17 @@ const darkJson = require('../src/tokens/base/colors/dark')
 
     buildPrimitives({
       source: [path], // build the special formats
+      include: [`tokens/base/typography/typography.json`],
       namespace,
       platforms: {
         css: {
+          prefix: namespace,
+          addPrefix: token => token.isSource,
           buildPath: `${outputPath}/css/`,
           transformGroup: 'css',
           files: [
             {
+              filter: token => token.isSource,
               destination: `${sansExtension}.css`,
               format: `css/responsive-media-query`,
               options: {
@@ -191,6 +202,7 @@ const darkJson = require('../src/tokens/base/colors/dark')
     namespace,
     platforms: {
       css: {
+        // prefix: namespace,
         buildPath: `${outputPath}/css/`,
         transformGroup: 'css',
         files: [
@@ -206,8 +218,30 @@ const darkJson = require('../src/tokens/base/colors/dark')
     },
   })
 
+  // temp fix until prefix is removed from all component files
+
+  buildPrimitives({
+    source: [`tokens/functional/colors/global.json`],
+    namespace,
+    platforms: {
+      css: {
+        prefix: namespace, // we still need to remove namespace form all component files
+        buildPath: `${outputPath}/css/`,
+        transformGroup: 'css',
+        files: [
+          {
+            destination: `tokens/functional/colors/global-with-modes.css`,
+            format: `css/color-mode-attributes`,
+            options: {
+              outputReferences: false,
+            },
+          },
+        ],
+      },
+    },
+  })
+
   const filesForColorModes = [
-    `tokens/functional/colors/global.json`,
     `tokens/functional/components/button/colors.js`,
     `tokens/functional/components/accordion/colors.js`,
     `tokens/functional/components/faq/colors.json`,
@@ -242,15 +276,20 @@ const darkJson = require('../src/tokens/base/colors/dark')
   for (const path of filesForColorModes) {
     const sansExtension = path.replace(/\.[^/.]+$/, '')
 
+    const prefix = path.split('.').pop() === 'json' ? namespace : undefined
+
     buildPrimitives({
+      include: [`tokens/functional/colors/global.json`],
       source: [path], // build the special formats
       namespace,
       platforms: {
         css: {
+          prefix, // we still need to remove namespace form all component files with .js
           buildPath: `${outputPath}/css/`,
           transformGroup: 'css',
           files: [
             {
+              filter: token => token.isSource,
               destination: `${sansExtension}-with-modes.css`,
               format: `css/color-mode-attributes`,
               options: {

packages/design-tokens/scripts/style-dictionary.js

@@ -6,6 +6,11 @@ const {PrimerStyleDictionary: StyleDictionary} = require('@primer/primitives/dis
 
 const {fileHeader} = StyleDictionary.formatHelpers
 
+const namePathToKebabCasePrefix = require('../src/transforms/namePathToKebabCasePrefix')
+const colorToModeObject = require('../src/transforms/colorToModeObject')
+
+StyleDictionary.registerTransform(namePathToKebabCasePrefix)
+StyleDictionary.registerTransform(colorToModeObject)
 //-----
 // functions to be extracted
 // TODO: extract to a separate files
@@ -14,7 +19,7 @@ const {fileHeader} = StyleDictionary.formatHelpers
 
 StyleDictionary.registerTransformGroup({
   name: 'css',
-  transforms: ['name/pathToKebabCase', 'dimension/rem', 'typography/css'],
+  transforms: ['name/pathToKebabCasePrefix', 'dimension/rem', 'typography/css'],
 })
 
 // REGISTER A CUSTOM FORMAT
@@ -104,9 +109,11 @@ function buildPrimitives(
     ],
   }
 
-  const getConfig = files => {
+  const getConfig = (files, prefix) => {
     const defaultPlatformConfig = {
       css: {
+        prefix,
+        addPrefix: token => token.isSource,
         buildPath: `${outputPath}/css/`,
         transformGroup: 'css',
         // map the array of token file paths to style dictionary output files
@@ -122,6 +129,8 @@ function buildPrimitives(
         }),
       },
       cssViewport: {
+        prefix,
+        addPrefix: token => token.isSource,
         buildPath: `${outputPath}/css/tokens/functional/size/`,
         transformGroup: 'css',
         files: [
@@ -133,6 +142,8 @@ function buildPrimitives(
         ],
       },
       scss: {
+        prefix,
+        addPrefix: token => token.isSource,
         buildPath: `${outputPath}/scss/`,
         transformGroup: 'css',
         // map the array of token file paths to style dictionary output files
@@ -148,6 +159,7 @@ function buildPrimitives(
         }),
       },
       js: {
+        prefix,
         buildPath: `${outputPath}/js/`,
         transforms: ['name/pathToPascalCase', 'dimension/rem'],
         // map the array of token file paths to style dictionary output files
@@ -160,18 +172,20 @@ function buildPrimitives(
         }),
       },
       jsModule: {
+        prefix,
         buildPath: `${outputPath}/js/module/`,
-        transforms: ['dimension/rem'],
+        transforms: ['dimension/rem', 'color/modeObject'],
         // map the array of token file paths to style dictionary output files
         files: files.map(filePath => {
           return {
-            format: `javascript/module`,
+            format: `javascript/commonJs`,
             destination: filePath.replace(`.json`, `.js`),
             filter: token => token.filePath === filePath && token.isSource,
           }
         }),
       },
       tsTypes: {
+        prefix,
         buildPath: `${outputPath}/ts/`,
         transforms: ['dimension/rem'],
         // map the array of token file paths to style dictionary output files
@@ -184,6 +198,7 @@ function buildPrimitives(
         }),
       },
       ts: {
+        prefix,
         buildPath: `${outputPath}/ts/`,
         transforms: ['dimension/rem'],
         // map the array of token file paths to style dictionary output files
@@ -210,7 +225,7 @@ function buildPrimitives(
   //build all tokens
   _StyleDictionary
     .extend({
-      ...getConfig(glob.sync([...source])),
+      ...getConfig(glob.sync([...source]), namespace),
     })
     .buildAllPlatforms()
 }

packages/design-tokens/src/formats/typescript-module-declarations-v2.js

@@ -3,8 +3,9 @@ const {fileHeader} = StyleDictionary.formatHelpers
 
 const tsModuleDeclaration = {
   name: 'typescript/module-declarations-v2',
-  formatter({dictionary, options, file}) {
+  formatter({dictionary, options, file, platform}) {
     const {moduleName = `tokens`} = options
+    const {prefix} = platform || {}
 
     const getType = value => {
       switch (typeof value) {
@@ -41,9 +42,11 @@ const tsModuleDeclaration = {
       return tree
     }
 
+    const tokens = prefix ? {[prefix]: dictionary.tokens} : dictionary.tokens
+
     const output = `${fileHeader({file})}
 
-declare const ${moduleName}: ${JSON.stringify(recursiveTypeGeneration(dictionary.tokens), null, 2)}
+declare const ${moduleName}: ${JSON.stringify(recursiveTypeGeneration(tokens), null, 2)}
 export default ${moduleName};`
 
     return output