@primer/primitives 7.9.0 → 7.10.0-rc.15b37d5

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @primer/primitives
 
+## 7.10.0
+
+### Minor Changes
+
+- [#354](https://github.com/primer/primitives/pull/354) [`3b28659`](https://github.com/primer/primitives/commit/3b286594aed3d4de97866d354f050f7e59945e95) Thanks [@mperrotti](https://github.com/mperrotti)! - Introduces TreeView.Item component color primitives
+
+### Patch Changes
+
+- [#351](https://github.com/primer/primitives/pull/351) [`d8d2480`](https://github.com/primer/primitives/commit/d8d2480c1ec971dca7dd9b1026cf445663f1ae03) Thanks [@langermank](https://github.com/langermank)! - Add SCSS vars for PCSS utilities & dotcom
+
 ## 7.9.0
 
 ### Minor Changes

package/README.md

@@ -6,7 +6,6 @@ This repo contains values for color, spacing, and typography primitives for use
 
 ![primer primitives diagram](https://user-images.githubusercontent.com/4608155/135384588-192c279f-020f-4544-a61f-559be6629f18.png)
 
-
 ## Install
 
 This repository is distributed on [npm][npm]. After [installing npm][install-npm], you can install `@primer/primitives` with this command.
@@ -35,15 +34,15 @@ To deprecate a variable, define a mapping from the deprecated variable to its re
     ...
 ```
 
-```js
+```
 // data/colors/deprecated.json
-{
+
 {
   "text.primary": "fg.default", // this means: `text.primary` is deprecated. Use `fg.default` instead
   "auto.blue.4": ["accent.fg, accent.emphasis"], // this means: `auto.blue.4` is deprecated. Use `accent.fg` or `accent.emphasis` instead
   "text.white": null // this means: `text.white` is deprecated. We don't have a replacement for it
 }
-}
+
 ```
 
 During the build process, the `deprecated.json` files will be added to a `dist/deprecated` directory organized by variable category:

package/build.js

@@ -3,8 +3,30 @@ const StyleDictionary = require('style-dictionary')
 
 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`
@@ -12,9 +34,7 @@ const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
 StyleDictionary.registerTransform({
   name: 'name/css',
   type: 'name',
-  transformer: (token, options) => {
-    return token.path.join('-')
-  }
+  transformer: pathToKebabCase
 })
 
 /**
@@ -24,9 +44,7 @@ StyleDictionary.registerTransform({
 StyleDictionary.registerTransform({
   name: 'name/js',
   type: 'name',
-  transformer: (token, options) => {
-    return token.path.join('.')
-  }
+  transformer: pathToDotNotation
 })
 
 /**
@@ -36,27 +54,19 @@ StyleDictionary.registerTransform({
 StyleDictionary.registerTransform({
   name: 'name/js/es6',
   type: 'name',
-  transformer: (token, options) => {
-    const tokenPath = token.path.join(' ')
-    const tokenPathItems = tokenPath.split(' ')
-    for (var i = 0; i < tokenPathItems.length; i++) {
-      tokenPathItems[i] = tokenPathItems[i].charAt(0).toUpperCase() + tokenPathItems[i].slice(1)
-    }
-    const tokenName = tokenPathItems.join('')
-    return tokenName
-  }
+  transformer: pathToPascalCase
 })
 
 // find values with px unit
 function isPx(value) {
-  return /[\d\.]+px$/.test(value)
+  return /[\d.]+px$/.test(value)
 }
 
 // transform: px to rem
 StyleDictionary.registerTransform({
   name: 'pxToRem',
   type: 'value',
-  transformer: (token, options) => {
+  transformer: token => {
     if (isPx(token.value)) {
       const baseFontSize = 16
       const floatValue = parseFloat(token.value.replace('px', ''))
@@ -138,33 +148,38 @@ StyleDictionary.registerTransformGroup({
   transforms: ['name/css', 'pxToRem', 'typography/shorthand']
 })
 
+StyleDictionary.registerTransformGroup({
+  name: 'scss',
+  transforms: ['name/scss', 'pxToRem', 'typography/shorthand']
+})
+
 // REGISTER A CUSTOM FORMAT
 
 // wrap mobile tokens in media query
 StyleDictionary.registerFormat({
   name: 'css/touch-target-mobile',
-  formatter: function({dictionary, file, options}) {
+  formatter({dictionary, file, options}) {
     const {outputReferences} = options
-    return (
-      fileHeader({file}) +
-      `@media (pointer: coarse) { :root {\n` +
-      formattedVariables({format: 'css', dictionary, outputReferences}) +
-      '\n}}\n'
-    )
+    return `${fileHeader({file})}
+    @media (pointer: coarse) { :root {\n${formattedVariables({
+      format: 'css',
+      dictionary,
+      outputReferences
+    })}\n}}\n`
   }
 })
 
 // wrap desktop tokens in media query
 StyleDictionary.registerFormat({
   name: 'css/touch-target-desktop',
-  formatter: function({dictionary, file, options}) {
+  formatter({dictionary, file, options}) {
     const {outputReferences} = options
-    return (
-      fileHeader({file}) +
-      `@media (pointer: fine) { :root {\n` +
-      formattedVariables({format: 'css', dictionary, outputReferences}) +
-      '\n}}\n'
-    )
+    return `${fileHeader({file})}
+    @media (pointer: fine) { :root {\n${formattedVariables({
+      format: 'css',
+      dictionary,
+      outputReferences
+    })}\n}}\n`
   }
 })
 
@@ -173,9 +188,8 @@ StyleDictionary.registerFormat({
   formatter({dictionary}) {
     return dictionary.allProperties
       .map(prop => {
-        const {value, path, name} = prop
-        // const tokenPath = path
-        // const tokenProperty = path[path.length - 1]
+        const {value, name} = prop
+
         return `@custom-media --${name}-viewport ${value};`
       })
       .join('\n')
@@ -185,7 +199,7 @@ StyleDictionary.registerFormat({
 // format docs
 StyleDictionary.registerFormat({
   name: 'json/docs',
-  formatter: function({dictionary}) {
+  formatter({dictionary}) {
     const groupedTokens = groupBy(dictionary.allProperties, 'filePath')
 
     return JSON.stringify(groupedTokens, null, 2)
@@ -197,7 +211,7 @@ StyleDictionary.registerFormat({
  */
 StyleDictionary.registerFormat({
   name: 'javascript/module-v2',
-  formatter: function({dictionary, file}) {
+  formatter({dictionary, file}) {
     const recursiveleyFlattenDictionary = obj => {
       const tree = {}
       if (typeof obj !== 'object' || Array.isArray(obj)) {
@@ -216,11 +230,9 @@ StyleDictionary.registerFormat({
       return tree
     }
 
-    return (
-      fileHeader({file}) +
-      'module.exports = ' +
-      JSON.stringify(recursiveleyFlattenDictionary(dictionary.tokens), null, 2)
-    )
+    return `${fileHeader({file})}
+    
+module.exports = ${JSON.stringify(recursiveleyFlattenDictionary(dictionary.tokens), null, 2)}`
   }
 })
 
@@ -230,7 +242,7 @@ StyleDictionary.registerFormat({
  */
 StyleDictionary.registerFormat({
   name: 'typescript/module-declarations-v2',
-  formatter: function({dictionary, options, file}) {
+  formatter({dictionary, options, file}) {
     const {moduleName = `tokens`} = options
 
     const getType = value => {
@@ -268,10 +280,10 @@ StyleDictionary.registerFormat({
       return tree
     }
 
-    const output =
-      fileHeader({file}) +
-      `declare const ${moduleName}: ${JSON.stringify(recursiveTypeGeneration(dictionary.tokens), null, 2)}
- export default ${moduleName};`
+    const output = `${fileHeader({file})}
+    
+declare const ${moduleName}: ${JSON.stringify(recursiveTypeGeneration(dictionary.tokens), null, 2)}
+export default ${moduleName};`
 
     return output
       .replace(/"any"/g, 'any')
@@ -326,7 +338,9 @@ function buildPrimitives(
   {source, outputPath = 'tokens-v2-private', include, platforms, namespace = 'primer'},
   _StyleDictionary = StyleDictionary
 ) {
+  // eslint-disable-next-line no-console
   console.log('Build started...')
+  // eslint-disable-next-line no-console
   console.log('\n==============================================')
 
   const customParseConfig = {
@@ -345,6 +359,7 @@ function buildPrimitives(
 
             return JSON.parse(parsed)
           } catch (error) {
+            // eslint-disable-next-line no-console
             console.log(error)
           }
         }
@@ -380,6 +395,21 @@ function buildPrimitives(
           }
         ]
       },
+      scss: {
+        buildPath: `${outputPath}/scss/`,
+        transformGroup: 'scss',
+        // map the array of token file paths to style dictionary output files
+        files: files.map(filePath => {
+          return {
+            format: `scss/variables`,
+            destination: filePath.replace(`.json`, `.scss`),
+            filter: token => token.filePath === filePath,
+            options: {
+              outputReferences: true
+            }
+          }
+        })
+      },
       js: {
         buildPath: `${outputPath}/js/`,
         transforms: ['name/js/es6', 'pxToRem'],
@@ -540,5 +570,9 @@ function _init() {
 module.exports = {
   buildPrimitives,
   _init,
-  StyleDictionary
+  StyleDictionary,
+  pathToKebabCase,
+  pathToDotNotation,
+  capitalize,
+  pathToPascalCase
 }