await build

primer · Sep 16, 2024 · 7b82ad5 · 7b82ad5
1 parent 0997625
commit 7b82ad5
Show file tree

Hide file tree

Showing 42 changed files with 263 additions and 243 deletions.
diff --git a/scripts/buildTokens.ts b/scripts/buildTokens.ts
@@ -29,8 +29,8 @@ const getStyleDictionaryConfig: StyleDictionaryConfigGenerator = (
   source, // build the special formats
   include,
   log: {
-    warnings: 'disabled', // 'warn' | 'error' | 'disabled'
-    verbosity: 'silent', // 'default' | 'silent' | 'verbose'
+    warnings: 'warn', // 'warn' | 'error' | 'disabled'
+    verbosity: 'verbose', // 'default' | 'silent' | 'verbose'
     errors: {
       brokenReferences: 'throw', // 'throw' | 'console'
     },
@@ -268,6 +268,6 @@ export const buildDesignTokens = async (buildOptions: ConfigGeneratorOptions): P
  * Run build script
  * ----------------------------------- */
 // build to dist
-buildDesignTokens({
+await buildDesignTokens({
   buildPath: 'dist/',
 })
diff --git a/scripts/diffTokenProps.ts b/scripts/diffTokenProps.ts
@@ -1,6 +1,6 @@
-import {parse as json5Parse} from 'json5'
+import JSON5 from 'json5'
 import fs from 'fs'
-import {flattenObject} from './utilities/flattenObject'
+import {flattenObject} from './utilities/flattenObject.js'
 
 type DiffItem = {
   mainThemeName: string
@@ -20,7 +20,7 @@ const diffProps = (diffArray: DiffItem[], propsToCheck = ['mix', 'alpha']) => {
     // add files from mainFiles
     for (const filePath of mainFiles) {
       const file = fs.readFileSync(filePath, 'utf8')
-      mainTheme = {...mainTheme, ...flattenObject(json5Parse(file), undefined, undefined, isToken)}
+      mainTheme = {...mainTheme, ...flattenObject(JSON5.parse(file), undefined, undefined, isToken)}
     }
     // add files from mainThemeDir
     for (const filePath of fs.readdirSync(mainThemeDir)) {
@@ -29,7 +29,7 @@ const diffProps = (diffArray: DiffItem[], propsToCheck = ['mix', 'alpha']) => {
       }
       const file = fs.readFileSync(`${mainThemeDir}/${filePath}`, 'utf8')
 
-      mainTheme = {...mainTheme, ...flattenObject(json5Parse(file), undefined, undefined, isToken)}
+      mainTheme = {...mainTheme, ...flattenObject(JSON5.parse(file), undefined, undefined, isToken)}
     }
 
     for (const filePath of fs.readdirSync(overridesDir)) {
@@ -38,7 +38,7 @@ const diffProps = (diffArray: DiffItem[], propsToCheck = ['mix', 'alpha']) => {
       }
       const fileDiff = []
       const file = fs.readFileSync(`${overridesDir}/${filePath}`, 'utf8')
-      const tokens = flattenObject(json5Parse(file), undefined, undefined, isToken)
+      const tokens = flattenObject(JSON5.parse(file), undefined, undefined, isToken)
 
       for (const [name, value] of Object.entries(tokens)) {
         if (!mainTheme.hasOwnProperty(name)) {

diff --git a/src/PrimerStyleDictionary.ts b/src/PrimerStyleDictionary.ts
@@ -1,5 +1,4 @@
 import StyleDictionary from 'style-dictionary'
-import {w3cJsonParser} from './parsers/index.js'
 import {
   borderToCss,
   colorToRgbAlpha,
@@ -39,56 +38,58 @@ import {
 } from './formats/index.js'
 
 /**
- * Parsers
- *
+ * @name {@link PrimerStyleDictionary}
+ * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers
+ * @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts)
+ * @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts)
  */
-StyleDictionary.registerParser(w3cJsonParser)
+export const PrimerStyleDictionary: StyleDictionary = new StyleDictionary()
 
 /**
  * Formats
  *
  */
-StyleDictionary.registerFormat({
+PrimerStyleDictionary.registerFormat({
   name: 'css/advanced',
   format: cssAdvanced,
 })
 
-StyleDictionary.registerFormat({
+PrimerStyleDictionary.registerFormat({
   name: 'css/customMedia',
   format: cssCustomMedia,
 })
 
-StyleDictionary.registerFormat({
+PrimerStyleDictionary.registerFormat({
   name: 'javascript/esm',
   format: javascriptEsm,
 })
 
-StyleDictionary.registerFormat({
+PrimerStyleDictionary.registerFormat({
   name: 'javascript/commonJs',
   format: javascriptCommonJs,
 })
 
-StyleDictionary.registerFormat({
+PrimerStyleDictionary.registerFormat({
   name: 'typescript/export-definition',
   format: typescriptExportDefinition,
 })
 
-StyleDictionary.registerFormat({
+PrimerStyleDictionary.registerFormat({
   name: 'json/nested-prefixed',
   format: jsonNestedPrefixed,
 })
 
-StyleDictionary.registerFormat({
+PrimerStyleDictionary.registerFormat({
   name: 'json/one-dimensional',
   format: jsonOneDimensional,
 })
 
-StyleDictionary.registerFormat({
+PrimerStyleDictionary.registerFormat({
   name: 'json/postCss-fallback',
   format: jsonPostCssFallback,
 })
 
-StyleDictionary.registerFormat({
+PrimerStyleDictionary.registerFormat({
   name: 'json/figma',
   format: jsonFigma,
 })
@@ -97,111 +98,101 @@ StyleDictionary.registerFormat({
  * Transformers
  *
  */
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...colorToRgbAlpha,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...colorToRgbaFloat,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...colorToHexMix,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...colorToHex,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...floatToPixel,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...floatToPixelUnitless,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...dimensionToRem,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...dimensionToRemPxArray,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...dimensionToPixelUnitless,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...durationToCss,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...figmaAttributes,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...jsonDeprecated,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...namePathToCamelCase,
 })
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...namePathToPascalCase,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...namePathToDotNotation,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...namePathToFigma,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...namePathToCamelCase,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...namePathToKebabCase,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...namePathToSlashNotation,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...shadowToCss,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...borderToCss,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...typographyToCss,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...fontWeightToNumber,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...fontFamilyToCss,
 })
 
-StyleDictionary.registerTransform({
+PrimerStyleDictionary.registerTransform({
   ...fontFamilyToFigma,
 })
-
-/**
- * @name {@link PrimerStyleDictionary}
- * @description Returns style dictionary object with primer preset that includes parsers, formats and transformers
- * @parsers [w3cJsonParser](https://github.com/primer/primitives/blob/main/config//parsers/w3c-json-parser.ts)
- * @formats [javascript/esm](https://github.com/primer/primitives/blob/main/config/formats/javascript-esm.ts), [javascript/commonJs](https://github.com/primer/primitives/blob/main/config/formats/javascript-commonJs.ts), [typescript/export-definition](https://github.com/primer/primitives/blob/main/config/formats/typescript-export-defition.ts)
- * @transformers [color/rgbAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-rgb-alpha.ts), [color/hexAlpha](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex-alpha.ts), [color/hex](https://github.com/primer/primitives/blob/main/config/tranformers/color-to-hex6.ts), [json/deprecated](https://github.com/primer/primitives/blob/main/config/tranformers/json-deprecated.ts), [name/pathToDotNotation](https://github.com/primer/primitives/blob/main/config/tranformers/name-path-to-dot-notation.ts)
- */
-
-export const PrimerStyleDictionary: StyleDictionary = new StyleDictionary()
diff --git a/src/filters/isColor.ts b/src/filters/isColor.ts
@@ -6,5 +6,9 @@ import type {TransformedToken} from 'style-dictionary/types'
  * @returns boolean
  */
 export const isColor = (token: TransformedToken): boolean => {
-  return token.$type === 'color'
+  const typeValue = token.$type ?? token.type
+  // if (token.path.join('-') === 'control-transparent-bgColor-selected') {
+  //   console.log(typeValue === 'color', token)
+  // }
+  return typeValue === 'color'
 }
diff --git a/src/formats/jsonOneDimensional.ts b/src/formats/jsonOneDimensional.ts
@@ -9,10 +9,27 @@ import type {FormatFn, FormatFnArguments} from 'style-dictionary/types'
  */
 export const jsonOneDimensional: FormatFn = ({dictionary, file: _file, options}: FormatFnArguments) => {
   // option to allow verbose output (object) or just the value
-  const {outputVerbose} = options
+  const {outputVerbose, propertyConversion} = options
   const tokens = jsonToFlat(dictionary.allTokens, outputVerbose)
-  // add file header and convert output
-  const output = JSON.stringify(tokens, null, 2)
+  if (propertyConversion === undefined) {
+    //
+    const output = JSON.stringify(tokens, null, 2)
+    // return prettified
+    return format(output, {parser: 'json', printWidth: 500})
+  }
+  // replace property names
+  const convertedTokens = Object.fromEntries(
+    Object.entries(tokens).map(([name, token]) => {
+      for (const [from, to] of Object.entries(propertyConversion as Record<string, string>)) {
+        if (from in token) {
+          token[to] = token[from]
+          delete token[from]
+        }
+      }
+      return [name, token]
+    }),
+  )
+  const output = JSON.stringify(convertedTokens, null, 2)
   // return prettified
   return format(output, {parser: 'json', printWidth: 500})
 }
diff --git a/src/platforms/docJson.ts b/src/platforms/docJson.ts
@@ -18,6 +18,11 @@ export const docJson: PlatformInitializer = (outputFile, prefix, buildPath): Pla
   ],
   options: {
     basePxFontSize: 16,
+    propertyConversion: {
+      $value: 'value',
+      $type: 'type',
+      $description: 'description',
+    },
   },
   files: [
     {

diff --git a/src/tokens/functional/color/light/primitives-light.json5 b/src/tokens/functional/color/light/primitives-light.json5
@@ -118,7 +118,7 @@
           group: 'semantic',
           scopes: ['fgColor'],
         },
-      }
+      },
     },
     accent: {
       $value: '{base.color.blue.5}',
@@ -806,7 +806,7 @@
           scopes: ['borderColor'],
         },
       },
-      alpha: 0.1
+      alpha: 0.1,
     },
     transparent: {
       $value: '{base.color.transparent}',

diff --git a/src/transformers/borderToCss.test.ts b/src/transformers/borderToCss.test.ts
@@ -4,7 +4,7 @@ import {borderToCss} from './borderToCss.js'
 describe('Transformer: borderToCss', () => {
   it('transforms `border` token to css border string', () => {
     const input = getMockToken({
-      value: {
+      $value: {
         color: '#000000',
         style: 'solid',
         width: '1px',
@@ -20,7 +20,7 @@ describe('Transformer: borderToCss', () => {
     expect(() =>
       borderToCss.transform(
         getMockToken({
-          value: {
+          $value: {
             color: '#000000',
             style: 'solid',
           },
@@ -34,7 +34,7 @@ describe('Transformer: borderToCss', () => {
     expect(() =>
       borderToCss.transform(
         getMockToken({
-          value: {
+          $value: {
             color: '#000000',
             width: '1px',
           },
@@ -48,7 +48,7 @@ describe('Transformer: borderToCss', () => {
     expect(() =>
       borderToCss.transform(
         getMockToken({
-          value: {
+          $value: {
             style: 'solid',
             width: '1px',
           },

diff --git a/src/transformers/borderToCss.ts b/src/transformers/borderToCss.ts
@@ -1,4 +1,4 @@
-import type {Config, PlatformConfig, Transform, TransformedToken} from 'style-dictionary/types'
+import type {Transform, TransformedToken} from 'style-dictionary/types'
 import {isBorder} from '../filters/isBorder.js'
 import type {BorderTokenValue} from '../types/BorderTokenValue.js'
 
@@ -21,12 +21,11 @@ const checkForBorderTokenProperties = (border: Record<string, unknown>): border
  */
 export const borderToCss: Transform = {
   name: 'border/css',
-  type: `value`,
+  type: 'value',
   transitive: true,
   filter: isBorder,
-  transform: (token: TransformedToken, config: PlatformConfig, options: Config) => {
-    const valueProp = options.usesDtcg ? '$value' : 'value'
-    const value = token[valueProp]
+  transform: (token: TransformedToken) => {
+    const value = token.$value ?? token.value
     // if value === string it was probably already transformed
     if (typeof value === 'string') {
       return value