@primer/primitives 7.10.0-rc.6459579 → 7.10.0-rc.e05ea69

package/CHANGELOG.md

@@ -4,7 +4,9 @@
 
 ### 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
+- [#358](https://github.com/primer/primitives/pull/358) [`a188c78`](https://github.com/primer/primitives/commit/a188c788c88dbf8f79bb3252d24416bd195fbc14) Thanks [@mperrotti](https://github.com/mperrotti)! - Adds a color token for the treeview icon fill.
+
+* [#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
 

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

@@ -59,14 +59,14 @@ StyleDictionary.registerTransform({
 
 // 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', ''))
@@ -158,28 +158,28 @@ StyleDictionary.registerTransformGroup({
 // 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`
   }
 })
 
@@ -188,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')
@@ -200,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)
@@ -212,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)) {
@@ -231,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)}`
   }
 })
 
@@ -245,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 => {
@@ -283,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')
@@ -341,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 = {
@@ -360,6 +359,7 @@ function buildPrimitives(
 
             return JSON.parse(parsed)
           } catch (error) {
+            // eslint-disable-next-line no-console
             console.log(error)
           }
         }
@@ -488,7 +488,7 @@ function _init() {
   const outputPath = 'tokens-v2-private'
   //build all tokens
   buildPrimitives({
-    source: [`tokens/**/*.json`, `!tokens/**/size-*.json`],
+    source: [`tokens/**/*.json`, `!tokens/**/size-*.json`, `!tokens/**/color/*.json`],
     outputPath
   })
 
@@ -547,7 +547,7 @@ function _init() {
 
   //build docs data
   buildPrimitives({
-    source: [`tokens/**/*.json`],
+    source: [`tokens/**/*.json`, `!tokens/**/color/*.json`],
     outputPath,
     platforms: {
       docs: {

package/dist/js/colors/dark.d.ts

@@ -379,6 +379,9 @@ declare const _default: {
         chevron: {
             hoverBg: string;
         };
+        directory: {
+            fill: string;
+        };
     };
     fg: {
         default: string;

package/dist/js/colors/dark.js

@@ -380,6 +380,9 @@ exports.default = {
     "treeViewItem": {
         "chevron": {
             "hoverBg": "rgba(177,186,196,0.12)"
+        },
+        "directory": {
+            "fill": "#8b949e"
         }
     },
     "fg": {

package/dist/js/colors/dark_colorblind.d.ts

@@ -379,6 +379,9 @@ declare const _default: {
         chevron: {
             hoverBg: string;
         };
+        directory: {
+            fill: string;
+        };
     };
     fg: {
         default: string;

package/dist/js/colors/dark_colorblind.js

@@ -380,6 +380,9 @@ exports.default = {
     "treeViewItem": {
         "chevron": {
             "hoverBg": "rgba(177,186,196,0.12)"
+        },
+        "directory": {
+            "fill": "#8b949e"
         }
     },
     "fg": {

package/dist/js/colors/dark_dimmed.d.ts

@@ -379,6 +379,9 @@ declare const _default: {
         chevron: {
             hoverBg: string;
         };
+        directory: {
+            fill: string;
+        };
     };
     fg: {
         default: string;

package/dist/js/colors/dark_dimmed.js

@@ -380,6 +380,9 @@ exports.default = {
     "treeViewItem": {
         "chevron": {
             "hoverBg": "rgba(144,157,171,0.12)"
+        },
+        "directory": {
+            "fill": "#768390"
         }
     },
     "fg": {

package/dist/js/colors/dark_high_contrast.d.ts

@@ -379,6 +379,9 @@ declare const _default: {
         chevron: {
             hoverBg: string;
         };
+        directory: {
+            fill: string;
+        };
     };
     fg: {
         default: string;

package/dist/js/colors/dark_high_contrast.js

@@ -380,6 +380,9 @@ exports.default = {
     "treeViewItem": {
         "chevron": {
             "hoverBg": "#525964"
+        },
+        "directory": {
+            "fill": "#f0f3f6"
         }
     },
     "fg": {

package/dist/js/colors/dark_tritanopia.d.ts

@@ -379,6 +379,9 @@ declare const _default: {
         chevron: {
             hoverBg: string;
         };
+        directory: {
+            fill: string;
+        };
     };
     fg: {
         default: string;

package/dist/js/colors/dark_tritanopia.js

@@ -380,6 +380,9 @@ exports.default = {
     "treeViewItem": {
         "chevron": {
             "hoverBg": "rgba(177,186,196,0.12)"
+        },
+        "directory": {
+            "fill": "#8b949e"
         }
     },
     "fg": {

package/dist/js/colors/index.d.ts

@@ -380,6 +380,9 @@ declare const _default: {
             chevron: {
                 hoverBg: string;
             };
+            directory: {
+                fill: string;
+            };
         };
         fg: {
             default: string;
@@ -877,6 +880,9 @@ declare const _default: {
             chevron: {
                 hoverBg: string;
             };
+            directory: {
+                fill: string;
+            };
         };
         fg: {
             default: string;
@@ -1374,6 +1380,9 @@ declare const _default: {
             chevron: {
                 hoverBg: string;
             };
+            directory: {
+                fill: string;
+            };
         };
         fg: {
             default: string;
@@ -1871,6 +1880,9 @@ declare const _default: {
             chevron: {
                 hoverBg: string;
             };
+            directory: {
+                fill: string;
+            };
         };
         fg: {
             default: string;
@@ -2368,6 +2380,9 @@ declare const _default: {
             chevron: {
                 hoverBg: string;
             };
+            directory: {
+                fill: string;
+            };
         };
         fg: {
             default: string;
@@ -2865,6 +2880,9 @@ declare const _default: {
             chevron: {
                 hoverBg: string;
             };
+            directory: {
+                fill: string;
+            };
         };
         fg: {
             default: string;
@@ -3362,6 +3380,9 @@ declare const _default: {
             chevron: {
                 hoverBg: string;
             };
+            directory: {
+                fill: string;
+            };
         };
         fg: {
             default: string;
@@ -3859,6 +3880,9 @@ declare const _default: {
             chevron: {
                 hoverBg: string;
             };
+            directory: {
+                fill: string;
+            };
         };
         fg: {
             default: string;
@@ -4356,6 +4380,9 @@ declare const _default: {
             chevron: {
                 hoverBg: string;
             };
+            directory: {
+                fill: string;
+            };
         };
         fg: {
             default: string;

package/dist/js/colors/light.d.ts

@@ -379,6 +379,9 @@ declare const _default: {
         chevron: {
             hoverBg: string;
         };
+        directory: {
+            fill: string;
+        };
     };
     fg: {
         default: string;

package/dist/js/colors/light.js

@@ -380,6 +380,9 @@ exports.default = {
     "treeViewItem": {
         "chevron": {
             "hoverBg": "rgba(208,215,222,0.32)"
+        },
+        "directory": {
+            "fill": "#54aeff"
         }
     },
     "fg": {

package/dist/js/colors/light_colorblind.d.ts

@@ -379,6 +379,9 @@ declare const _default: {
         chevron: {
             hoverBg: string;
         };
+        directory: {
+            fill: string;
+        };
     };
     fg: {
         default: string;

package/dist/js/colors/light_colorblind.js

@@ -380,6 +380,9 @@ exports.default = {
     "treeViewItem": {
         "chevron": {
             "hoverBg": "rgba(208,215,222,0.32)"
+        },
+        "directory": {
+            "fill": "#54aeff"
         }
     },
     "fg": {

package/dist/js/colors/light_high_contrast.d.ts

@@ -379,6 +379,9 @@ declare const _default: {
         chevron: {
             hoverBg: string;
         };
+        directory: {
+            fill: string;
+        };
     };
     fg: {
         default: string;

package/dist/js/colors/light_high_contrast.js

@@ -380,6 +380,9 @@ exports.default = {
     "treeViewItem": {
         "chevron": {
             "hoverBg": "#ced5dc"
+        },
+        "directory": {
+            "fill": "#368cf9"
         }
     },
     "fg": {

package/dist/js/colors/light_tritanopia.d.ts

@@ -379,6 +379,9 @@ declare const _default: {
         chevron: {
             hoverBg: string;
         };
+        directory: {
+            fill: string;
+        };
     };
     fg: {
         default: string;

package/dist/js/colors/light_tritanopia.js

@@ -380,6 +380,9 @@ exports.default = {
     "treeViewItem": {
         "chevron": {
             "hoverBg": "rgba(208,215,222,0.32)"
+        },
+        "directory": {
+            "fill": "#54aeff"
         }
     },
     "fg": {

package/dist/js/index.d.ts

@@ -381,6 +381,9 @@ declare const _default: {
                 chevron: {
                     hoverBg: string;
                 };
+                directory: {
+                    fill: string;
+                };
             };
             fg: {
                 default: string;
@@ -878,6 +881,9 @@ declare const _default: {
                 chevron: {
                     hoverBg: string;
                 };
+                directory: {
+                    fill: string;
+                };
             };
             fg: {
                 default: string;
@@ -1375,6 +1381,9 @@ declare const _default: {
                 chevron: {
                     hoverBg: string;
                 };
+                directory: {
+                    fill: string;
+                };
             };
             fg: {
                 default: string;
@@ -1872,6 +1881,9 @@ declare const _default: {
                 chevron: {
                     hoverBg: string;
                 };
+                directory: {
+                    fill: string;
+                };
             };
             fg: {
                 default: string;
@@ -2369,6 +2381,9 @@ declare const _default: {
                 chevron: {
                     hoverBg: string;
                 };
+                directory: {
+                    fill: string;
+                };
             };
             fg: {
                 default: string;
@@ -2866,6 +2881,9 @@ declare const _default: {
                 chevron: {
                     hoverBg: string;
                 };
+                directory: {
+                    fill: string;
+                };
             };
             fg: {
                 default: string;
@@ -3363,6 +3381,9 @@ declare const _default: {
                 chevron: {
                     hoverBg: string;
                 };
+                directory: {
+                    fill: string;
+                };
             };
             fg: {
                 default: string;
@@ -3860,6 +3881,9 @@ declare const _default: {
                 chevron: {
                     hoverBg: string;
                 };
+                directory: {
+                    fill: string;
+                };
             };
             fg: {
                 default: string;
@@ -4357,6 +4381,9 @@ declare const _default: {
                 chevron: {
                     hoverBg: string;
                 };
+                directory: {
+                    fill: string;
+                };
             };
             fg: {
                 default: string;

package/dist/json/colors/dark.json

@@ -378,6 +378,9 @@
   "treeViewItem": {
     "chevron": {
       "hoverBg": "rgba(177,186,196,0.12)"
+    },
+    "directory": {
+      "fill": "#8b949e"
     }
   },
   "fg": {

package/dist/json/colors/dark_colorblind.json

@@ -378,6 +378,9 @@
   "treeViewItem": {
     "chevron": {
       "hoverBg": "rgba(177,186,196,0.12)"
+    },
+    "directory": {
+      "fill": "#8b949e"
     }
   },
   "fg": {

package/dist/json/colors/dark_dimmed.json

@@ -378,6 +378,9 @@
   "treeViewItem": {
     "chevron": {
       "hoverBg": "rgba(144,157,171,0.12)"
+    },
+    "directory": {
+      "fill": "#768390"
     }
   },
   "fg": {

package/dist/json/colors/dark_high_contrast.json

@@ -378,6 +378,9 @@
   "treeViewItem": {
     "chevron": {
       "hoverBg": "#525964"
+    },
+    "directory": {
+      "fill": "#f0f3f6"
     }
   },
   "fg": {

package/dist/json/colors/dark_tritanopia.json

@@ -378,6 +378,9 @@
   "treeViewItem": {
     "chevron": {
       "hoverBg": "rgba(177,186,196,0.12)"
+    },
+    "directory": {
+      "fill": "#8b949e"
     }
   },
   "fg": {

package/dist/json/colors/light.json

@@ -378,6 +378,9 @@
   "treeViewItem": {
     "chevron": {
       "hoverBg": "rgba(208,215,222,0.32)"
+    },
+    "directory": {
+      "fill": "#54aeff"
     }
   },
   "fg": {

package/dist/json/colors/light_colorblind.json

@@ -378,6 +378,9 @@
   "treeViewItem": {
     "chevron": {
       "hoverBg": "rgba(208,215,222,0.32)"
+    },
+    "directory": {
+      "fill": "#54aeff"
     }
   },
   "fg": {

package/dist/json/colors/light_high_contrast.json

@@ -378,6 +378,9 @@
   "treeViewItem": {
     "chevron": {
       "hoverBg": "#ced5dc"
+    },
+    "directory": {
+      "fill": "#368cf9"
     }
   },
   "fg": {

package/dist/json/colors/light_tritanopia.json

@@ -378,6 +378,9 @@
   "treeViewItem": {
     "chevron": {
       "hoverBg": "rgba(208,215,222,0.32)"
+    },
+    "directory": {
+      "fill": "#54aeff"
     }
   },
   "fg": {