@primer/primitives 7.9.0 → 7.10.0-rc.24b9498

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @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
+
 ## 7.9.0
 
 ### Minor Changes

package/build.js

@@ -3,6 +3,18 @@ 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
 
 /**
@@ -12,9 +24,7 @@ const {fileHeader, formattedVariables} = StyleDictionary.formatHelpers
 StyleDictionary.registerTransform({
   name: 'name/css',
   type: 'name',
-  transformer: (token, options) => {
-    return token.path.join('-')
-  }
+  transformer: pathToKebabCase
 })
 
 /**
@@ -24,9 +34,7 @@ StyleDictionary.registerTransform({
 StyleDictionary.registerTransform({
   name: 'name/js',
   type: 'name',
-  transformer: (token, options) => {
-    return token.path.join('.')
-  }
+  transformer: pathToDotNotation
 })
 
 /**
@@ -36,19 +44,11 @@ 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) {
+function isPx (value) {
   return /[\d\.]+px$/.test(value)
 }
 
@@ -143,7 +143,7 @@ StyleDictionary.registerTransformGroup({
 // wrap mobile tokens in media query
 StyleDictionary.registerFormat({
   name: 'css/touch-target-mobile',
-  formatter: function({dictionary, file, options}) {
+  formatter: function ({dictionary, file, options}) {
     const {outputReferences} = options
     return (
       fileHeader({file}) +
@@ -157,7 +157,7 @@ StyleDictionary.registerFormat({
 // wrap desktop tokens in media query
 StyleDictionary.registerFormat({
   name: 'css/touch-target-desktop',
-  formatter: function({dictionary, file, options}) {
+  formatter: function ({dictionary, file, options}) {
     const {outputReferences} = options
     return (
       fileHeader({file}) +
@@ -170,7 +170,7 @@ StyleDictionary.registerFormat({
 
 StyleDictionary.registerFormat({
   name: 'custom/format/custom-media',
-  formatter({dictionary}) {
+  formatter ({dictionary}) {
     return dictionary.allProperties
       .map(prop => {
         const {value, path, name} = prop
@@ -185,7 +185,7 @@ StyleDictionary.registerFormat({
 // format docs
 StyleDictionary.registerFormat({
   name: 'json/docs',
-  formatter: function({dictionary}) {
+  formatter: function ({dictionary}) {
     const groupedTokens = groupBy(dictionary.allProperties, 'filePath')
 
     return JSON.stringify(groupedTokens, null, 2)
@@ -197,7 +197,7 @@ StyleDictionary.registerFormat({
  */
 StyleDictionary.registerFormat({
   name: 'javascript/module-v2',
-  formatter: function({dictionary, file}) {
+  formatter: function ({dictionary, file}) {
     const recursiveleyFlattenDictionary = obj => {
       const tree = {}
       if (typeof obj !== 'object' || Array.isArray(obj)) {
@@ -230,7 +230,7 @@ StyleDictionary.registerFormat({
  */
 StyleDictionary.registerFormat({
   name: 'typescript/module-declarations-v2',
-  formatter: function({dictionary, options, file}) {
+  formatter: function ({dictionary, options, file}) {
     const {moduleName = `tokens`} = options
 
     const getType = value => {
@@ -287,7 +287,7 @@ StyleDictionary.registerFormat({
  * @param {Function} The iteratee to transform keys.
  * @returns {Object} Returns the composed aggregate object.
  */
-function groupBy(collection, iteratee = x => x) {
+function groupBy (collection, iteratee = x => x) {
   const current = typeof iteratee === 'function' ? iteratee : ({[iteratee]: prop}) => prop
 
   const array = Array.isArray(collection) ? collection : Object.values(collection)
@@ -322,7 +322,7 @@ function groupBy(collection, iteratee = x => x) {
  *   platforms: {...}
  *  })
  */
-function buildPrimitives(
+function buildPrimitives (
   {source, outputPath = 'tokens-v2-private', include, platforms, namespace = 'primer'},
   _StyleDictionary = StyleDictionary
 ) {
@@ -454,7 +454,7 @@ function buildPrimitives(
  *   from an npm script. Internal use only. Use `build` for self-serve.
  * @private
  */
-function _init() {
+function _init () {
   const outputPath = 'tokens-v2-private'
   //build all tokens
   buildPrimitives({
@@ -540,5 +540,9 @@ function _init() {
 module.exports = {
   buildPrimitives,
   _init,
-  StyleDictionary
+  StyleDictionary,
+  pathToKebabCase,
+  pathToDotNotation,
+  capitalize,
+  pathToPascalCase
 }

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

@@ -375,6 +375,11 @@ declare const _default: {
             };
         };
     };
+    treeViewItem: {
+        chevron: {
+            hoverBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark.js

@@ -109,7 +109,7 @@ exports.default = {
         "inputPlaceholderText": "#6e7681",
         "inputFocusText": "#c9d1d9",
         "inputBg": "#161b22",
-        "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)",
+        "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)",
         "donutError": "#f85149",
         "donutPending": "#d29922",
         "donutSuccess": "#2ea043",
@@ -377,6 +377,11 @@ exports.default = {
             }
         }
     },
+    "treeViewItem": {
+        "chevron": {
+            "hoverBg": "rgba(177,186,196,0.12)"
+        }
+    },
     "fg": {
         "default": "#c9d1d9",
         "muted": "#8b949e",

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

@@ -375,6 +375,11 @@ declare const _default: {
             };
         };
     };
+    treeViewItem: {
+        chevron: {
+            hoverBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_colorblind.js

@@ -109,7 +109,7 @@ exports.default = {
         "inputPlaceholderText": "#6e7681",
         "inputFocusText": "#c9d1d9",
         "inputBg": "#161b22",
-        "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)",
+        "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)",
         "donutError": "#d47616",
         "donutPending": "#d29922",
         "donutSuccess": "#388bfd",
@@ -377,6 +377,11 @@ exports.default = {
             }
         }
     },
+    "treeViewItem": {
+        "chevron": {
+            "hoverBg": "rgba(177,186,196,0.12)"
+        }
+    },
     "fg": {
         "default": "#c9d1d9",
         "muted": "#8b949e",

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

@@ -375,6 +375,11 @@ declare const _default: {
             };
         };
     };
+    treeViewItem: {
+        chevron: {
+            hoverBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_dimmed.js

@@ -109,7 +109,7 @@ exports.default = {
         "inputPlaceholderText": "#636e7b",
         "inputFocusText": "#adbac7",
         "inputBg": "#2d333b",
-        "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)",
+        "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)",
         "donutError": "#e5534b",
         "donutPending": "#c69026",
         "donutSuccess": "#46954a",
@@ -377,6 +377,11 @@ exports.default = {
             }
         }
     },
+    "treeViewItem": {
+        "chevron": {
+            "hoverBg": "rgba(144,157,171,0.12)"
+        }
+    },
     "fg": {
         "default": "#adbac7",
         "muted": "#768390",

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

@@ -375,6 +375,11 @@ declare const _default: {
             };
         };
     };
+    treeViewItem: {
+        chevron: {
+            hoverBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_high_contrast.js

@@ -109,7 +109,7 @@ exports.default = {
         "inputPlaceholderText": "#9ea7b3",
         "inputFocusText": "#f0f3f6",
         "inputBg": "#272b33",
-        "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)",
+        "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)",
         "donutError": "#ff6a69",
         "donutPending": "#f0b72f",
         "donutSuccess": "#09b43a",
@@ -377,6 +377,11 @@ exports.default = {
             }
         }
     },
+    "treeViewItem": {
+        "chevron": {
+            "hoverBg": "#525964"
+        }
+    },
     "fg": {
         "default": "#f0f3f6",
         "muted": "#f0f3f6",

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

@@ -375,6 +375,11 @@ declare const _default: {
             };
         };
     };
+    treeViewItem: {
+        chevron: {
+            hoverBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_tritanopia.js

@@ -109,7 +109,7 @@ exports.default = {
         "inputPlaceholderText": "#6e7681",
         "inputFocusText": "#c9d1d9",
         "inputBg": "#161b22",
-        "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)",
+        "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)",
         "donutError": "#f85149",
         "donutPending": "#d29922",
         "donutSuccess": "#388bfd",
@@ -377,6 +377,11 @@ exports.default = {
             }
         }
     },
+    "treeViewItem": {
+        "chevron": {
+            "hoverBg": "rgba(177,186,196,0.12)"
+        }
+    },
     "fg": {
         "default": "#c9d1d9",
         "muted": "#8b949e",

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

@@ -376,6 +376,11 @@ declare const _default: {
                 };
             };
         };
+        treeViewItem: {
+            chevron: {
+                hoverBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -868,6 +873,11 @@ declare const _default: {
                 };
             };
         };
+        treeViewItem: {
+            chevron: {
+                hoverBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -1360,6 +1370,11 @@ declare const _default: {
                 };
             };
         };
+        treeViewItem: {
+            chevron: {
+                hoverBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -1852,6 +1867,11 @@ declare const _default: {
                 };
             };
         };
+        treeViewItem: {
+            chevron: {
+                hoverBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -2344,6 +2364,11 @@ declare const _default: {
                 };
             };
         };
+        treeViewItem: {
+            chevron: {
+                hoverBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -2836,6 +2861,11 @@ declare const _default: {
                 };
             };
         };
+        treeViewItem: {
+            chevron: {
+                hoverBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -3328,6 +3358,11 @@ declare const _default: {
                 };
             };
         };
+        treeViewItem: {
+            chevron: {
+                hoverBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -3820,6 +3855,11 @@ declare const _default: {
                 };
             };
         };
+        treeViewItem: {
+            chevron: {
+                hoverBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -4312,6 +4352,11 @@ declare const _default: {
                 };
             };
         };
+        treeViewItem: {
+            chevron: {
+                hoverBg: string;
+            };
+        };
         fg: {
             default: string;
             muted: string;

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

@@ -375,6 +375,11 @@ declare const _default: {
             };
         };
     };
+    treeViewItem: {
+        chevron: {
+            hoverBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/light.js

@@ -377,6 +377,11 @@ exports.default = {
             }
         }
     },
+    "treeViewItem": {
+        "chevron": {
+            "hoverBg": "rgba(208,215,222,0.32)"
+        }
+    },
     "fg": {
         "default": "#24292f",
         "muted": "#57606a",

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

@@ -375,6 +375,11 @@ declare const _default: {
             };
         };
     };
+    treeViewItem: {
+        chevron: {
+            hoverBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/light_colorblind.js

@@ -377,6 +377,11 @@ exports.default = {
             }
         }
     },
+    "treeViewItem": {
+        "chevron": {
+            "hoverBg": "rgba(208,215,222,0.32)"
+        }
+    },
     "fg": {
         "default": "#24292f",
         "muted": "#57606a",

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

@@ -375,6 +375,11 @@ declare const _default: {
             };
         };
     };
+    treeViewItem: {
+        chevron: {
+            hoverBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/light_high_contrast.js

@@ -377,6 +377,11 @@ exports.default = {
             }
         }
     },
+    "treeViewItem": {
+        "chevron": {
+            "hoverBg": "#ced5dc"
+        }
+    },
     "fg": {
         "default": "#0e1116",
         "muted": "#0e1116",

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

@@ -375,6 +375,11 @@ declare const _default: {
             };
         };
     };
+    treeViewItem: {
+        chevron: {
+            hoverBg: string;
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/light_tritanopia.js

@@ -377,6 +377,11 @@ exports.default = {
             }
         }
     },
+    "treeViewItem": {
+        "chevron": {
+            "hoverBg": "rgba(208,215,222,0.32)"
+        }
+    },
     "fg": {
         "default": "#24292f",
         "muted": "#57606a",

package/dist/js/index.d.ts

@@ -377,6 +377,11 @@ declare const _default: {
                     };
                 };
             };
+            treeViewItem: {
+                chevron: {
+                    hoverBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -869,6 +874,11 @@ declare const _default: {
                     };
                 };
             };
+            treeViewItem: {
+                chevron: {
+                    hoverBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -1361,6 +1371,11 @@ declare const _default: {
                     };
                 };
             };
+            treeViewItem: {
+                chevron: {
+                    hoverBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -1853,6 +1868,11 @@ declare const _default: {
                     };
                 };
             };
+            treeViewItem: {
+                chevron: {
+                    hoverBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -2345,6 +2365,11 @@ declare const _default: {
                     };
                 };
             };
+            treeViewItem: {
+                chevron: {
+                    hoverBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -2837,6 +2862,11 @@ declare const _default: {
                     };
                 };
             };
+            treeViewItem: {
+                chevron: {
+                    hoverBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -3329,6 +3359,11 @@ declare const _default: {
                     };
                 };
             };
+            treeViewItem: {
+                chevron: {
+                    hoverBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -3821,6 +3856,11 @@ declare const _default: {
                     };
                 };
             };
+            treeViewItem: {
+                chevron: {
+                    hoverBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;
@@ -4313,6 +4353,11 @@ declare const _default: {
                     };
                 };
             };
+            treeViewItem: {
+                chevron: {
+                    hoverBg: string;
+                };
+            };
             fg: {
                 default: string;
                 muted: string;

package/dist/json/colors/dark.json

@@ -107,7 +107,7 @@
     "inputPlaceholderText": "#6e7681",
     "inputFocusText": "#c9d1d9",
     "inputBg": "#161b22",
-    "inputShadow": "0 0 0 1px (obj) => get_1.default(obj, path)",
+    "inputShadow": "0 0 0 1px (obj) => (0, get_1.default)(obj, path)",
     "donutError": "#f85149",
     "donutPending": "#d29922",
     "donutSuccess": "#2ea043",
@@ -375,6 +375,11 @@
       }
     }
   },
+  "treeViewItem": {
+    "chevron": {
+      "hoverBg": "rgba(177,186,196,0.12)"
+    }
+  },
   "fg": {
     "default": "#c9d1d9",
     "muted": "#8b949e",