@primer/primitives 7.8.3 → 7.9.0-rc.5ddc3c4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+## 7.8.4
+
+### Patch Changes
+
+- [#334](https://github.com/primer/primitives/pull/334) [`ff5fea6`](https://github.com/primer/primitives/commit/ff5fea6dfb229c430fec66277cf24520dd70d7b5) Thanks [@langermank](https://github.com/langermank)! - Typography bug fixes + border thickness naming
+
 ## 7.8.3
 
 ### Patch Changes

package/build.js

@@ -69,6 +69,10 @@ StyleDictionary.registerTransform({
         return '0'
       }
 
+      if (token.name.includes('lineHeight')) {
+        return `${floatValue / baseFontSize}`
+      }
+
       return `${floatValue / baseFontSize}rem`
     }
     return token.value
@@ -117,7 +121,13 @@ StyleDictionary.registerTransform({
   matcher: token => token.type === 'typography',
   transformer: token => {
     const {value} = token
-    return `${value.fontWeight} ${value.fontSize}/${value.lineHeight} ${value.fontFamily}`
+
+    // if lineHeight has value, include in shorthand
+    if (value.lineHeight) {
+      return `${value.fontWeight} ${value.fontSize}/${value.lineHeight} ${value.fontFamily}`
+    }
+
+    return `${value.fontWeight} ${value.fontSize} ${value.fontFamily}`
   }
 })
 

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

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

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

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

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

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;

package/dist/js/colors/light.js

@@ -363,6 +363,20 @@ exports.default = {
             "disabledBg": "#6e7781"
         }
     },
+    "segmentedControl": {
+        "bg": "#eaeef2",
+        "button": {
+            "hover": {
+                "bg": "rgba(175,184,193,0.2)"
+            },
+            "active": {
+                "bg": "rgba(175,184,193,0.4)"
+            },
+            "selected": {
+                "border": "#6e7781"
+            }
+        }
+    },
     "fg": {
         "default": "#24292f",
         "muted": "#57606a",

package/dist/js/colors/light_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/light_colorblind.js

@@ -363,6 +363,20 @@ exports.default = {
             "disabledBg": "#6e7781"
         }
     },
+    "segmentedControl": {
+        "bg": "#eaeef2",
+        "button": {
+            "hover": {
+                "bg": "rgba(175,184,193,0.2)"
+            },
+            "active": {
+                "bg": "rgba(175,184,193,0.4)"
+            },
+            "selected": {
+                "border": "#6e7781"
+            }
+        }
+    },
     "fg": {
         "default": "#24292f",
         "muted": "#57606a",

package/dist/js/colors/light_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/light_high_contrast.js

@@ -363,6 +363,20 @@ exports.default = {
             "disabledBg": "#66707B"
         }
     },
+    "segmentedControl": {
+        "bg": "#E7ECF0",
+        "button": {
+            "hover": {
+                "bg": "rgba(172,182,192,0.2)"
+            },
+            "active": {
+                "bg": "rgba(172,182,192,0.4)"
+            },
+            "selected": {
+                "border": "#66707B"
+            }
+        }
+    },
     "fg": {
         "default": "#0E1116",
         "muted": "#0E1116",

package/dist/js/colors/light_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/light_tritanopia.js

@@ -363,6 +363,20 @@ exports.default = {
             "disabledBg": "#6e7781"
         }
     },
+    "segmentedControl": {
+        "bg": "#eaeef2",
+        "button": {
+            "hover": {
+                "bg": "rgba(175,184,193,0.2)"
+            },
+            "active": {
+                "bg": "rgba(175,184,193,0.4)"
+            },
+            "selected": {
+                "border": "#6e7781"
+            }
+        }
+    },
     "fg": {
         "default": "#24292f",
         "muted": "#57606a",