@primer/primitives 7.9.0 → 7.10.0-rc.3d7410a

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/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,15 +54,7 @@ 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
@@ -138,6 +148,11 @@ 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
@@ -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
 }

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",

package/dist/json/colors/dark_colorblind.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": "#d47616",
     "donutPending": "#d29922",
     "donutSuccess": "#388bfd",
@@ -375,6 +375,11 @@
       }
     }
   },
+  "treeViewItem": {
+    "chevron": {
+      "hoverBg": "rgba(177,186,196,0.12)"
+    }
+  },
   "fg": {
     "default": "#c9d1d9",
     "muted": "#8b949e",

package/dist/json/colors/dark_dimmed.json

@@ -107,7 +107,7 @@
     "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",
@@ -375,6 +375,11 @@
       }
     }
   },
+  "treeViewItem": {
+    "chevron": {
+      "hoverBg": "rgba(144,157,171,0.12)"
+    }
+  },
   "fg": {
     "default": "#adbac7",
     "muted": "#768390",