Using upstream config from primer/primitives (#726)

* using upstream transforms

* replace custom-media

* rm unused stuff

Author: lukasoppermann

package-lock.json

@@ -33,7 +33,9 @@
     "test": "jest"
   },
   "devDependencies": {
-    "@primer/primitives": "9.0.2",
+    "@primer/primitives": "9.1.0",
+    "prettier": "^2.8.8",
+    "@prettier/sync": "^0.5.2",
     "color2k": "^2.0.2",
     "fast-glob": "3.3.2",
     "style-dictionary": "3.8.0"

packages/design-tokens/package.json

@@ -276,5 +276,5 @@ const darkJson = require('../src/tokens/base/colors/dark')
    * Step 4:
    * Clean up the temporary directory
    */
-  fs.rmdirSync(dest, {recursive: true})
+  fs.rmSync(dest, {recursive: true})
 })()

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

@@ -3,64 +3,18 @@
  */
 
 const glob = require('fast-glob')
-const StyleDictionary = require('style-dictionary')
+const {PrimerStyleDictionary} = require('@primer/primitives/dist/build/PrimerStyleDictionary.js')
+
+const StyleDictionary = PrimerStyleDictionary
 
 const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
 
 //-----
 // functions to be extracted
 // TODO: extract to a separate files
 
-const pathToKebabCase = token => token.path.join('-')
-
-const pathToDotNotation = token => token.path.join('.')
-
-const capitalize = string => string[0].toUpperCase() + string.slice(1)
-
-const pathToPascalCase = token => token.path.map(tokenPathItems => capitalize(tokenPathItems)).join('')
-
 // REGISTER THE CUSTOM TRANFORMS
 
-/**
- * transform: scss variable names
- * example: `$namespace-item-variant-property-modifier`
- */
-StyleDictionary.registerTransform({
-  name: 'name/scss',
-  type: 'name',
-  transformer: pathToKebabCase,
-})
-
-/**
- * transform: css variable names
- * example: `--namespace-item-variant-property-modifier`
- */
-StyleDictionary.registerTransform({
-  name: 'name/css',
-  type: 'name',
-  transformer: pathToKebabCase,
-})
-
-/**
- * transform: js variable names
- * example: `namespace.item.variant.property.modifier`
- */
-StyleDictionary.registerTransform({
-  name: 'name/js',
-  type: 'name',
-  transformer: pathToDotNotation,
-})
-
-/**
- * transform: js es6 variable names
- * example: `NamespaceItemVariantPropertyModifier`
- */
-StyleDictionary.registerTransform({
-  name: 'name/js/es6',
-  type: 'name',
-  transformer: pathToPascalCase,
-})
-
 // find values with px unit
 function isPx(value) {
   return /[\d.]+px$/.test(value)
@@ -93,68 +47,16 @@ StyleDictionary.registerTransform({
   },
 })
 
-//-----
-
-// ts output
-StyleDictionary.registerTransform({
-  name: 'attribute/typescript',
-  type: 'attribute',
-  transformer: token => {
-    return {
-      typescript: {
-        // these transforms will need to match the ones you use for typescript
-        // or you can "chain" the transforms and use token.name and token.value
-        // like scss and less transforms do.
-        name: token.path.slice(1).join('.'),
-        value: token.value,
-      },
-    }
-  },
-})
-
-// css output
-StyleDictionary.registerTransform({
-  name: 'attribute/css',
-  type: 'attribute',
-  transformer: token => {
-    const tokenName = token.path.slice(1).join('-')
-    return {
-      css: {
-        name: `--${tokenName}`,
-        value: token.value,
-      },
-    }
-  },
-})
-
-// transform: composite typography to shorthands
-StyleDictionary.registerTransform({
-  name: 'typography/shorthand',
-  type: 'value',
-  transitive: true,
-  matcher: token => token.type === 'typography',
-  transformer: token => {
-    const {value} = token
-
-    // if lineHeight has value, include in shorthand
-    if (value.lineHeight) {
-      return `${value.fontWeight} ${value.fontSize}/${value.lineHeight} ${value.fontFamily}`
-    }
-
-    return `${value.fontWeight} ${value.fontSize} ${value.fontFamily}`
-  },
-})
-
 // REGISTER THE CUSTOM TRANFORM GROUPS
 
 StyleDictionary.registerTransformGroup({
   name: 'css',
-  transforms: ['name/css', 'pxToRem', 'typography/shorthand'],
+  transforms: ['name/pathToKebabCase', 'pxToRem', 'typography/css'],
 })
 
 StyleDictionary.registerTransformGroup({
   name: 'scss',
-  transforms: ['name/scss', 'pxToRem', 'typography/shorthand'],
+  transforms: ['name/pathToKebabCase', 'pxToRem', 'typography/css'],
 })
 
 // REGISTER A CUSTOM FORMAT
@@ -187,19 +89,6 @@ StyleDictionary.registerFormat({
   },
 })
 
-StyleDictionary.registerFormat({
-  name: 'custom/format/custom-media',
-  formatter({dictionary}) {
-    return dictionary.allProperties
-      .map(prop => {
-        const {value, name} = prop
-
-        return `@custom-media --${name}-viewport ${value};`
-      })
-      .join('\n')
-  },
-})
-
 // format docs
 StyleDictionary.registerFormat({
   name: 'json/docs',
@@ -398,7 +287,7 @@ function buildPrimitives(
         files: [
           {
             filter: token => token.filePath.includes('viewport'),
-            format: 'custom/format/custom-media',
+            format: 'css/customMedia',
             destination: 'viewport.css',
           },
         ],
@@ -420,7 +309,7 @@ function buildPrimitives(
       },
       js: {
         buildPath: `${outputPath}/js/`,
-        transforms: ['name/js/es6', 'pxToRem'],
+        transforms: ['name/pathToPascalCase', 'pxToRem'],
         // map the array of token file paths to style dictionary output files
         files: files.map(filePath => {
           return {

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

@@ -1,27 +1,27 @@
 {
   "brand": {
     "viewportRange": {
-      "narrow": {
+      "narrow-viewport": {
         "$value": "(max-width: calc({brand.breakpoint.medium} - 0.02px))",
         "$type": "custom-viewportRange"
       },
-      "narrowLandscape": {
+      "narrowLandscape-viewport": {
         "$value": "(max-width: calc({brand.breakpoint.large} - 0.02px) and (max-height: calc({brand.breakpoint.small} - 0.02px)) and (orientation: landscape))",
         "$type": "custom-viewportRange"
       },
-      "regular": {
+      "regular-viewport": {
         "$value": "(min-width: {brand.breakpoint.medium})",
         "$type": "custom-viewportRange"
       },
-      "wide": {
+      "wide-viewport": {
         "$value": "(min-width: {brand.breakpoint.xxlarge})",
         "$type": "custom-viewportRange"
       },
-      "portrait": {
+      "portrait-viewport": {
         "$value": "(orientation: portrait)",
         "$type": "custom-viewportRange"
       },
-      "landscape": {
+      "landscape-viewport": {
         "$value": "(orientation: landscape)",
         "$type": "custom-viewportRange"
       }