@primer/primitives 7.8.4 → 7.9.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @primer/primitives
 
+## 7.9.0
+
+### Minor Changes
+
+- [#329](https://github.com/primer/primitives/pull/329) [`607cc75`](https://github.com/primer/primitives/commit/607cc753b305285faf399fdc47bb752cb6c71713) Thanks [@simurai](https://github.com/simurai)! - Add SegmentedControl colors
+
+### Patch Changes
+
+- [#338](https://github.com/primer/primitives/pull/338) [`4dc8e2e`](https://github.com/primer/primitives/commit/4dc8e2ea3725c32fcf3b5a7cfc0cf29d943e2169) Thanks [@adrian5](https://github.com/adrian5)! - Normalize color data to lowercase hex
+
 ## 7.8.4
 
 ### Patch Changes

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

@@ -361,6 +361,20 @@ declare const _default: {
             disabledBg: string;
         };
     };
+    segmentedControl: {
+        bg: string;
+        button: {
+            hover: {
+                bg: string;
+            };
+            active: {
+                bg: string;
+            };
+            selected: {
+                border: string;
+            };
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark.js

@@ -363,6 +363,20 @@ exports.default = {
             "disabledBg": "#484f58"
         }
     },
+    "segmentedControl": {
+        "bg": "#161b22",
+        "button": {
+            "hover": {
+                "bg": "#30363d"
+            },
+            "active": {
+                "bg": "#21262d"
+            },
+            "selected": {
+                "border": "#6e7681"
+            }
+        }
+    },
     "fg": {
         "default": "#c9d1d9",
         "muted": "#8b949e",
@@ -455,7 +469,7 @@ exports.default = {
             "sticky": "rgba(13,17,23,0.95)"
         },
         "border": {
-            "active": "#F78166",
+            "active": "#f78166",
             "contrast": "rgba(255,255,255,0.2)"
         },
         "shadow": {
@@ -564,15 +578,15 @@ exports.default = {
             "#42062a"
         ],
         "coral": [
-            "#FFDDD2",
-            "#FFC2B2",
-            "#FFA28B",
-            "#F78166",
-            "#EA6045",
-            "#CF462D",
-            "#AC3220",
+            "#ffddd2",
+            "#ffc2b2",
+            "#ffa28b",
+            "#f78166",
+            "#ea6045",
+            "#cf462d",
+            "#ac3220",
             "#872012",
-            "#640D04",
+            "#640d04",
             "#460701"
         ]
     }

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

@@ -361,6 +361,20 @@ declare const _default: {
             disabledBg: string;
         };
     };
+    segmentedControl: {
+        bg: string;
+        button: {
+            hover: {
+                bg: string;
+            };
+            active: {
+                bg: string;
+            };
+            selected: {
+                border: string;
+            };
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_colorblind.js

@@ -363,6 +363,20 @@ exports.default = {
             "disabledBg": "#484f58"
         }
     },
+    "segmentedControl": {
+        "bg": "#161b22",
+        "button": {
+            "hover": {
+                "bg": "#30363d"
+            },
+            "active": {
+                "bg": "#21262d"
+            },
+            "selected": {
+                "border": "#6e7681"
+            }
+        }
+    },
     "fg": {
         "default": "#c9d1d9",
         "muted": "#8b949e",
@@ -455,7 +469,7 @@ exports.default = {
             "sticky": "rgba(13,17,23,0.95)"
         },
         "border": {
-            "active": "#F78166",
+            "active": "#f78166",
             "contrast": "rgba(255,255,255,0.2)"
         },
         "shadow": {
@@ -564,15 +578,15 @@ exports.default = {
             "#42062a"
         ],
         "coral": [
-            "#FFDDD2",
-            "#FFC2B2",
-            "#FFA28B",
-            "#F78166",
-            "#EA6045",
-            "#CF462D",
-            "#AC3220",
+            "#ffddd2",
+            "#ffc2b2",
+            "#ffa28b",
+            "#f78166",
+            "#ea6045",
+            "#cf462d",
+            "#ac3220",
             "#872012",
-            "#640D04",
+            "#640d04",
             "#460701"
         ]
     }

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

@@ -361,6 +361,20 @@ declare const _default: {
             disabledBg: string;
         };
     };
+    segmentedControl: {
+        bg: string;
+        button: {
+            hover: {
+                bg: string;
+            };
+            active: {
+                bg: string;
+            };
+            selected: {
+                border: string;
+            };
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_dimmed.js

@@ -363,6 +363,20 @@ exports.default = {
             "disabledBg": "#545d68"
         }
     },
+    "segmentedControl": {
+        "bg": "#2d333b",
+        "button": {
+            "hover": {
+                "bg": "#444c56"
+            },
+            "active": {
+                "bg": "#373e47"
+            },
+            "selected": {
+                "border": "#636e7b"
+            }
+        }
+    },
     "fg": {
         "default": "#adbac7",
         "muted": "#768390",
@@ -455,7 +469,7 @@ exports.default = {
             "sticky": "rgba(34,39,46,0.95)"
         },
         "border": {
-            "active": "#EC775C",
+            "active": "#ec775c",
             "contrast": "rgba(205,217,229,0.2)"
         },
         "shadow": {
@@ -537,7 +551,7 @@ exports.default = {
             "#ad2e2c",
             "#922323",
             "#78191b",
-            "#5D0F12"
+            "#5d0f12"
         ],
         "purple": [
             "#eedcff",
@@ -564,16 +578,16 @@ exports.default = {
             "#551639"
         ],
         "coral": [
-            "#FFDACF",
-            "#FFB9A5",
-            "#F79981",
-            "#EC775C",
-            "#DE5B41",
-            "#C2442D",
-            "#A93524",
-            "#8D291B",
-            "#771D13",
-            "#5D1008"
+            "#ffdacf",
+            "#ffb9a5",
+            "#f79981",
+            "#ec775c",
+            "#de5b41",
+            "#c2442d",
+            "#a93524",
+            "#8d291b",
+            "#771d13",
+            "#5d1008"
         ]
     }
 };

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

@@ -361,6 +361,20 @@ declare const _default: {
             disabledBg: string;
         };
     };
+    segmentedControl: {
+        bg: string;
+        button: {
+            hover: {
+                bg: string;
+            };
+            active: {
+                bg: string;
+            };
+            selected: {
+                border: string;
+            };
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_high_contrast.js

@@ -363,6 +363,20 @@ exports.default = {
             "disabledBg": "#7a828e"
         }
     },
+    "segmentedControl": {
+        "bg": "#272b33",
+        "button": {
+            "hover": {
+                "bg": "#525964"
+            },
+            "active": {
+                "bg": "#272b33"
+            },
+            "selected": {
+                "border": "#9ea7b3"
+            }
+        }
+    },
     "fg": {
         "default": "#f0f3f6",
         "muted": "#f0f3f6",
@@ -455,7 +469,7 @@ exports.default = {
             "sticky": "rgba(10,12,16,0.95)"
         },
         "border": {
-            "active": "#FF967D",
+            "active": "#ff967d",
             "contrast": "rgba(255,255,255,0.2)"
         },
         "shadow": {
@@ -564,16 +578,16 @@ exports.default = {
             "#9c1d6a"
         ],
         "coral": [
-            "#FFDED4",
-            "#FFCBB9",
-            "#FFB39B",
-            "#FF967D",
-            "#FC704F",
-            "#FC704F",
-            "#F75133",
-            "#E03B21",
-            "#C62612",
-            "#A91500"
+            "#ffded4",
+            "#ffcbb9",
+            "#ffb39b",
+            "#ff967d",
+            "#fc704f",
+            "#fc704f",
+            "#f75133",
+            "#e03b21",
+            "#c62612",
+            "#a91500"
         ]
     }
 };

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

@@ -361,6 +361,20 @@ declare const _default: {
             disabledBg: string;
         };
     };
+    segmentedControl: {
+        bg: string;
+        button: {
+            hover: {
+                bg: string;
+            };
+            active: {
+                bg: string;
+            };
+            selected: {
+                border: string;
+            };
+        };
+    };
     fg: {
         default: string;
         muted: string;

package/dist/js/colors/dark_tritanopia.js

@@ -363,6 +363,20 @@ exports.default = {
             "disabledBg": "#484f58"
         }
     },
+    "segmentedControl": {
+        "bg": "#161b22",
+        "button": {
+            "hover": {
+                "bg": "#30363d"
+            },
+            "active": {
+                "bg": "#21262d"
+            },
+            "selected": {
+                "border": "#6e7681"
+            }
+        }
+    },
     "fg": {
         "default": "#c9d1d9",
         "muted": "#8b949e",
@@ -455,7 +469,7 @@ exports.default = {
             "sticky": "rgba(13,17,23,0.95)"
         },
         "border": {
-            "active": "#F78166",
+            "active": "#f78166",
             "contrast": "rgba(255,255,255,0.2)"
         },
         "shadow": {
@@ -564,15 +578,15 @@ exports.default = {
             "#42062a"
         ],
         "coral": [
-            "#FFDDD2",
-            "#FFC2B2",
-            "#FFA28B",
-            "#F78166",
-            "#EA6045",
-            "#CF462D",
-            "#AC3220",
+            "#ffddd2",
+            "#ffc2b2",
+            "#ffa28b",
+            "#f78166",
+            "#ea6045",
+            "#cf462d",
+            "#ac3220",
             "#872012",
-            "#640D04",
+            "#640d04",
             "#460701"
         ]
     }

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

@@ -362,6 +362,20 @@ declare const _default: {
                 disabledBg: string;
             };
         };
+        segmentedControl: {
+            bg: string;
+            button: {
+                hover: {
+                    bg: string;
+                };
+                active: {
+                    bg: string;
+                };
+                selected: {
+                    border: string;
+                };
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -840,6 +854,20 @@ declare const _default: {
                 disabledBg: string;
             };
         };
+        segmentedControl: {
+            bg: string;
+            button: {
+                hover: {
+                    bg: string;
+                };
+                active: {
+                    bg: string;
+                };
+                selected: {
+                    border: string;
+                };
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -1318,6 +1346,20 @@ declare const _default: {
                 disabledBg: string;
             };
         };
+        segmentedControl: {
+            bg: string;
+            button: {
+                hover: {
+                    bg: string;
+                };
+                active: {
+                    bg: string;
+                };
+                selected: {
+                    border: string;
+                };
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -1796,6 +1838,20 @@ declare const _default: {
                 disabledBg: string;
             };
         };
+        segmentedControl: {
+            bg: string;
+            button: {
+                hover: {
+                    bg: string;
+                };
+                active: {
+                    bg: string;
+                };
+                selected: {
+                    border: string;
+                };
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -2274,6 +2330,20 @@ declare const _default: {
                 disabledBg: string;
             };
         };
+        segmentedControl: {
+            bg: string;
+            button: {
+                hover: {
+                    bg: string;
+                };
+                active: {
+                    bg: string;
+                };
+                selected: {
+                    border: string;
+                };
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -2752,6 +2822,20 @@ declare const _default: {
                 disabledBg: string;
             };
         };
+        segmentedControl: {
+            bg: string;
+            button: {
+                hover: {
+                    bg: string;
+                };
+                active: {
+                    bg: string;
+                };
+                selected: {
+                    border: string;
+                };
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -3230,6 +3314,20 @@ declare const _default: {
                 disabledBg: string;
             };
         };
+        segmentedControl: {
+            bg: string;
+            button: {
+                hover: {
+                    bg: string;
+                };
+                active: {
+                    bg: string;
+                };
+                selected: {
+                    border: string;
+                };
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -3708,6 +3806,20 @@ declare const _default: {
                 disabledBg: string;
             };
         };
+        segmentedControl: {
+            bg: string;
+            button: {
+                hover: {
+                    bg: string;
+                };
+                active: {
+                    bg: string;
+                };
+                selected: {
+                    border: string;
+                };
+            };
+        };
         fg: {
             default: string;
             muted: string;
@@ -4186,6 +4298,20 @@ declare const _default: {
                 disabledBg: string;
             };
         };
+        segmentedControl: {
+            bg: string;
+            button: {
+                hover: {
+                    bg: string;
+                };
+                active: {
+                    bg: string;
+                };
+                selected: {
+                    border: string;
+                };
+            };
+        };
         fg: {
             default: string;
             muted: string;

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

@@ -361,6 +361,20 @@ declare const _default: {
             disabledBg: string;
         };
     };
+    segmentedControl: {
+        bg: string;
+        button: {
+            hover: {
+                bg: string;
+            };
+            active: {
+                bg: string;
+            };
+            selected: {
+                border: string;
+            };
+        };
+    };
     fg: {
         default: string;
         muted: string;