@primer/primitives 7.8.4 → 7.9.0

package/dist/json/colors/light_tritanopia.json

@@ -57,7 +57,7 @@
       "markupItalic": "#24292f",
       "markupBold": "#24292f",
       "markupDeletedText": "#82071e",
-      "markupDeletedBg": "#FFEBE9",
+      "markupDeletedBg": "#ffebe9",
       "markupInsertedText": "#0550ae",
       "markupInsertedBg": "#ddf4ff",
       "markupChangedText": "#a40e26",
@@ -341,7 +341,7 @@
     },
     "danger": {
       "hoverBg": "rgba(255,235,233,0.64)",
-      "activeBg": "#FFEBE9",
+      "activeBg": "#ffebe9",
       "hoverText": "#cf222e"
     }
   },
@@ -361,6 +361,20 @@
       "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",
@@ -412,19 +426,19 @@
     "fg": "#cf222e",
     "emphasis": "#cf222e",
     "muted": "rgba(255,129,130,0.4)",
-    "subtle": "#FFEBE9"
+    "subtle": "#ffebe9"
   },
   "danger": {
     "fg": "#cf222e",
     "emphasis": "#cf222e",
     "muted": "rgba(255,129,130,0.4)",
-    "subtle": "#FFEBE9"
+    "subtle": "#ffebe9"
   },
   "open": {
     "fg": "#cf222e",
     "emphasis": "#fa4549",
     "muted": "rgba(255,129,130,0.4)",
-    "subtle": "#FFEBE9"
+    "subtle": "#ffebe9"
   },
   "closed": {
     "fg": "#6e7781",
@@ -453,7 +467,7 @@
       "sticky": "rgba(255,255,255,0.95)"
     },
     "border": {
-      "active": "#FD8C73",
+      "active": "#fd8c73",
       "contrast": "rgba(27,31,36,0.1)"
     },
     "shadow": {
@@ -514,7 +528,7 @@
       "#3b2300"
     ],
     "orange": [
-      "#FFEBE9",
+      "#ffebe9",
       "#ffcecb",
       "#ffaba8",
       "#ff8182",
@@ -526,7 +540,7 @@
       "#4c0014"
     ],
     "red": [
-      "#FFEBE9",
+      "#ffebe9",
       "#ffcecb",
       "#ffaba8",
       "#ff8182",
@@ -562,14 +576,14 @@
       "#4d0336"
     ],
     "coral": [
-      "#FFF0EB",
-      "#FFD6CC",
-      "#FFB4A1",
-      "#FD8C73",
-      "#EC6547",
-      "#C4432B",
-      "#9E2F1C",
-      "#801F0F",
+      "#fff0eb",
+      "#ffd6cc",
+      "#ffb4a1",
+      "#fd8c73",
+      "#ec6547",
+      "#c4432b",
+      "#9e2f1c",
+      "#801f0f",
       "#691105",
       "#510901"
     ]

package/dist/scss/colors/_dark.scss

@@ -278,6 +278,10 @@
     --color-switch-track-checked-border: #58a6ff;
     --color-switch-knob-checked-bg: #1f6feb;
     --color-switch-knob-checked-disabled-bg: #484f58;
+    --color-segmented-control-bg: #161b22;
+    --color-segmented-control-button-hover-bg: #30363d;
+    --color-segmented-control-button-active-bg: #21262d;
+    --color-segmented-control-button-selected-border: #6e7681;
     --color-fg-default: #c9d1d9;
     --color-fg-muted: #8b949e;
     --color-fg-subtle: #6e7681;
@@ -336,7 +340,7 @@
     --color-primer-fg-disabled: #484f58;
     --color-primer-canvas-backdrop: rgba(1,4,9,0.8);
     --color-primer-canvas-sticky: rgba(13,17,23,0.95);
-    --color-primer-border-active: #F78166;
+    --color-primer-border-active: #f78166;
     --color-primer-border-contrast: rgba(255,255,255,0.2);
     --color-primer-shadow-highlight: 0 0 transparent;
     --color-primer-shadow-inset: 0 0 transparent;
@@ -423,15 +427,15 @@
     --color-scale-pink-7: #7d2457;
     --color-scale-pink-8: #5e103e;
     --color-scale-pink-9: #42062a;
-    --color-scale-coral-0: #FFDDD2;
-    --color-scale-coral-1: #FFC2B2;
-    --color-scale-coral-2: #FFA28B;
-    --color-scale-coral-3: #F78166;
-    --color-scale-coral-4: #EA6045;
-    --color-scale-coral-5: #CF462D;
-    --color-scale-coral-6: #AC3220;
+    --color-scale-coral-0: #ffddd2;
+    --color-scale-coral-1: #ffc2b2;
+    --color-scale-coral-2: #ffa28b;
+    --color-scale-coral-3: #f78166;
+    --color-scale-coral-4: #ea6045;
+    --color-scale-coral-5: #cf462d;
+    --color-scale-coral-6: #ac3220;
     --color-scale-coral-7: #872012;
-    --color-scale-coral-8: #640D04;
+    --color-scale-coral-8: #640d04;
     --color-scale-coral-9: #460701;
   }
 }

package/dist/scss/colors/_dark_colorblind.scss

@@ -278,6 +278,10 @@
     --color-switch-track-checked-border: #58a6ff;
     --color-switch-knob-checked-bg: #1f6feb;
     --color-switch-knob-checked-disabled-bg: #484f58;
+    --color-segmented-control-bg: #161b22;
+    --color-segmented-control-button-hover-bg: #30363d;
+    --color-segmented-control-button-active-bg: #21262d;
+    --color-segmented-control-button-selected-border: #6e7681;
     --color-fg-default: #c9d1d9;
     --color-fg-muted: #8b949e;
     --color-fg-subtle: #6e7681;
@@ -336,7 +340,7 @@
     --color-primer-fg-disabled: #484f58;
     --color-primer-canvas-backdrop: rgba(1,4,9,0.8);
     --color-primer-canvas-sticky: rgba(13,17,23,0.95);
-    --color-primer-border-active: #F78166;
+    --color-primer-border-active: #f78166;
     --color-primer-border-contrast: rgba(255,255,255,0.2);
     --color-primer-shadow-highlight: 0 0 transparent;
     --color-primer-shadow-inset: 0 0 transparent;
@@ -423,15 +427,15 @@
     --color-scale-pink-7: #7d2457;
     --color-scale-pink-8: #5e103e;
     --color-scale-pink-9: #42062a;
-    --color-scale-coral-0: #FFDDD2;
-    --color-scale-coral-1: #FFC2B2;
-    --color-scale-coral-2: #FFA28B;
-    --color-scale-coral-3: #F78166;
-    --color-scale-coral-4: #EA6045;
-    --color-scale-coral-5: #CF462D;
-    --color-scale-coral-6: #AC3220;
+    --color-scale-coral-0: #ffddd2;
+    --color-scale-coral-1: #ffc2b2;
+    --color-scale-coral-2: #ffa28b;
+    --color-scale-coral-3: #f78166;
+    --color-scale-coral-4: #ea6045;
+    --color-scale-coral-5: #cf462d;
+    --color-scale-coral-6: #ac3220;
     --color-scale-coral-7: #872012;
-    --color-scale-coral-8: #640D04;
+    --color-scale-coral-8: #640d04;
     --color-scale-coral-9: #460701;
   }
 }

package/dist/scss/colors/_dark_dimmed.scss

@@ -278,6 +278,10 @@
     --color-switch-track-checked-border: #539bf5;
     --color-switch-knob-checked-bg: #316dca;
     --color-switch-knob-checked-disabled-bg: #545d68;
+    --color-segmented-control-bg: #2d333b;
+    --color-segmented-control-button-hover-bg: #444c56;
+    --color-segmented-control-button-active-bg: #373e47;
+    --color-segmented-control-button-selected-border: #636e7b;
     --color-fg-default: #adbac7;
     --color-fg-muted: #768390;
     --color-fg-subtle: #636e7b;
@@ -336,7 +340,7 @@
     --color-primer-fg-disabled: #545d68;
     --color-primer-canvas-backdrop: rgba(28,33,40,0.8);
     --color-primer-canvas-sticky: rgba(34,39,46,0.95);
-    --color-primer-border-active: #EC775C;
+    --color-primer-border-active: #ec775c;
     --color-primer-border-contrast: rgba(205,217,229,0.2);
     --color-primer-shadow-highlight: 0 0 transparent;
     --color-primer-shadow-inset: 0 0 transparent;
@@ -402,7 +406,7 @@
     --color-scale-red-6: #ad2e2c;
     --color-scale-red-7: #922323;
     --color-scale-red-8: #78191b;
-    --color-scale-red-9: #5D0F12;
+    --color-scale-red-9: #5d0f12;
     --color-scale-purple-0: #eedcff;
     --color-scale-purple-1: #dcbdfb;
     --color-scale-purple-2: #dcbdfb;
@@ -423,15 +427,15 @@
     --color-scale-pink-7: #7e325a;
     --color-scale-pink-8: #69264a;
     --color-scale-pink-9: #551639;
-    --color-scale-coral-0: #FFDACF;
-    --color-scale-coral-1: #FFB9A5;
-    --color-scale-coral-2: #F79981;
-    --color-scale-coral-3: #EC775C;
-    --color-scale-coral-4: #DE5B41;
-    --color-scale-coral-5: #C2442D;
-    --color-scale-coral-6: #A93524;
-    --color-scale-coral-7: #8D291B;
-    --color-scale-coral-8: #771D13;
-    --color-scale-coral-9: #5D1008;
+    --color-scale-coral-0: #ffdacf;
+    --color-scale-coral-1: #ffb9a5;
+    --color-scale-coral-2: #f79981;
+    --color-scale-coral-3: #ec775c;
+    --color-scale-coral-4: #de5b41;
+    --color-scale-coral-5: #c2442d;
+    --color-scale-coral-6: #a93524;
+    --color-scale-coral-7: #8d291b;
+    --color-scale-coral-8: #771d13;
+    --color-scale-coral-9: #5d1008;
   }
 }

package/dist/scss/colors/_dark_high_contrast.scss

@@ -278,6 +278,10 @@
     --color-switch-track-checked-border: #409eff;
     --color-switch-knob-checked-bg: #409eff;
     --color-switch-knob-checked-disabled-bg: #7a828e;
+    --color-segmented-control-bg: #272b33;
+    --color-segmented-control-button-hover-bg: #525964;
+    --color-segmented-control-button-active-bg: #272b33;
+    --color-segmented-control-button-selected-border: #9ea7b3;
     --color-fg-default: #f0f3f6;
     --color-fg-muted: #f0f3f6;
     --color-fg-subtle: #9ea7b3;
@@ -336,7 +340,7 @@
     --color-primer-fg-disabled: #7a828e;
     --color-primer-canvas-backdrop: rgba(1,4,9,0.8);
     --color-primer-canvas-sticky: rgba(10,12,16,0.95);
-    --color-primer-border-active: #FF967D;
+    --color-primer-border-active: #ff967d;
     --color-primer-border-contrast: rgba(255,255,255,0.2);
     --color-primer-shadow-highlight: 0 0 transparent;
     --color-primer-shadow-inset: 0 0 transparent;
@@ -423,15 +427,15 @@
     --color-scale-pink-7: #d23d91;
     --color-scale-pink-8: #b72c7d;
     --color-scale-pink-9: #9c1d6a;
-    --color-scale-coral-0: #FFDED4;
-    --color-scale-coral-1: #FFCBB9;
-    --color-scale-coral-2: #FFB39B;
-    --color-scale-coral-3: #FF967D;
-    --color-scale-coral-4: #FC704F;
-    --color-scale-coral-5: #FC704F;
-    --color-scale-coral-6: #F75133;
-    --color-scale-coral-7: #E03B21;
-    --color-scale-coral-8: #C62612;
-    --color-scale-coral-9: #A91500;
+    --color-scale-coral-0: #ffded4;
+    --color-scale-coral-1: #ffcbb9;
+    --color-scale-coral-2: #ffb39b;
+    --color-scale-coral-3: #ff967d;
+    --color-scale-coral-4: #fc704f;
+    --color-scale-coral-5: #fc704f;
+    --color-scale-coral-6: #f75133;
+    --color-scale-coral-7: #e03b21;
+    --color-scale-coral-8: #c62612;
+    --color-scale-coral-9: #a91500;
   }
 }

package/dist/scss/colors/_dark_tritanopia.scss

@@ -278,6 +278,10 @@
     --color-switch-track-checked-border: #58a6ff;
     --color-switch-knob-checked-bg: #1f6feb;
     --color-switch-knob-checked-disabled-bg: #484f58;
+    --color-segmented-control-bg: #161b22;
+    --color-segmented-control-button-hover-bg: #30363d;
+    --color-segmented-control-button-active-bg: #21262d;
+    --color-segmented-control-button-selected-border: #6e7681;
     --color-fg-default: #c9d1d9;
     --color-fg-muted: #8b949e;
     --color-fg-subtle: #6e7681;
@@ -336,7 +340,7 @@
     --color-primer-fg-disabled: #484f58;
     --color-primer-canvas-backdrop: rgba(1,4,9,0.8);
     --color-primer-canvas-sticky: rgba(13,17,23,0.95);
-    --color-primer-border-active: #F78166;
+    --color-primer-border-active: #f78166;
     --color-primer-border-contrast: rgba(255,255,255,0.2);
     --color-primer-shadow-highlight: 0 0 transparent;
     --color-primer-shadow-inset: 0 0 transparent;
@@ -423,15 +427,15 @@
     --color-scale-pink-7: #7d2457;
     --color-scale-pink-8: #5e103e;
     --color-scale-pink-9: #42062a;
-    --color-scale-coral-0: #FFDDD2;
-    --color-scale-coral-1: #FFC2B2;
-    --color-scale-coral-2: #FFA28B;
-    --color-scale-coral-3: #F78166;
-    --color-scale-coral-4: #EA6045;
-    --color-scale-coral-5: #CF462D;
-    --color-scale-coral-6: #AC3220;
+    --color-scale-coral-0: #ffddd2;
+    --color-scale-coral-1: #ffc2b2;
+    --color-scale-coral-2: #ffa28b;
+    --color-scale-coral-3: #f78166;
+    --color-scale-coral-4: #ea6045;
+    --color-scale-coral-5: #cf462d;
+    --color-scale-coral-6: #ac3220;
     --color-scale-coral-7: #872012;
-    --color-scale-coral-8: #640D04;
+    --color-scale-coral-8: #640d04;
     --color-scale-coral-9: #460701;
   }
 }

package/dist/scss/colors/_light.scss

@@ -6,13 +6,13 @@
     --color-marketing-icon-secondary: #54aeff;
     --color-diff-blob-addition-num-text: #24292f;
     --color-diff-blob-addition-fg: #24292f;
-    --color-diff-blob-addition-num-bg: #CCFFD8;
-    --color-diff-blob-addition-line-bg: #E6FFEC;
-    --color-diff-blob-addition-word-bg: #ABF2BC;
+    --color-diff-blob-addition-num-bg: #ccffd8;
+    --color-diff-blob-addition-line-bg: #e6ffec;
+    --color-diff-blob-addition-word-bg: #abf2bc;
     --color-diff-blob-deletion-num-text: #24292f;
     --color-diff-blob-deletion-fg: #24292f;
-    --color-diff-blob-deletion-num-bg: #FFD7D5;
-    --color-diff-blob-deletion-line-bg: #FFEBE9;
+    --color-diff-blob-deletion-num-bg: #ffd7d5;
+    --color-diff-blob-deletion-line-bg: #ffebe9;
     --color-diff-blob-deletion-word-bg: rgba(255,129,130,0.4);
     --color-diff-blob-hunk-num-bg: rgba(84,174,255,0.4);
     --color-diff-blob-expander-icon: #57606a;
@@ -40,7 +40,7 @@
     --color-prettylights-syntax-markup-italic: #24292f;
     --color-prettylights-syntax-markup-bold: #24292f;
     --color-prettylights-syntax-markup-deleted-text: #82071e;
-    --color-prettylights-syntax-markup-deleted-bg: #FFEBE9;
+    --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
     --color-prettylights-syntax-markup-inserted-text: #116329;
     --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
     --color-prettylights-syntax-markup-changed-text: #953800;
@@ -268,7 +268,7 @@
     --color-action-list-item-default-active-border: rgba(0,0,0,0);
     --color-action-list-item-default-selected-bg: rgba(208,215,222,0.24);
     --color-action-list-item-danger-hover-bg: rgba(255,235,233,0.64);
-    --color-action-list-item-danger-active-bg: #FFEBE9;
+    --color-action-list-item-danger-active-bg: #ffebe9;
     --color-action-list-item-danger-hover-text: #cf222e;
     --color-switch-track-bg: #eaeef2;
     --color-switch-track-border: #afb8c1;
@@ -278,6 +278,10 @@
     --color-switch-track-checked-border: #54aeff;
     --color-switch-knob-checked-bg: #0969da;
     --color-switch-knob-checked-disabled-bg: #6e7781;
+    --color-segmented-control-bg: #eaeef2;
+    --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);
+    --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);
+    --color-segmented-control-button-selected-border: #6e7781;
     --color-fg-default: #24292f;
     --color-fg-muted: #57606a;
     --color-fg-subtle: #6e7781;
@@ -316,7 +320,7 @@
     --color-danger-fg: #cf222e;
     --color-danger-emphasis: #cf222e;
     --color-danger-muted: rgba(255,129,130,0.4);
-    --color-danger-subtle: #FFEBE9;
+    --color-danger-subtle: #ffebe9;
     --color-open-fg: #1a7f37;
     --color-open-emphasis: #2da44e;
     --color-open-muted: rgba(74,194,107,0.4);
@@ -324,7 +328,7 @@
     --color-closed-fg: #cf222e;
     --color-closed-emphasis: #cf222e;
     --color-closed-muted: rgba(255,129,130,0.4);
-    --color-closed-subtle: #FFEBE9;
+    --color-closed-subtle: #ffebe9;
     --color-done-fg: #8250df;
     --color-done-emphasis: #8250df;
     --color-done-muted: rgba(194,151,255,0.4);
@@ -336,7 +340,7 @@
     --color-primer-fg-disabled: #8c959f;
     --color-primer-canvas-backdrop: rgba(27,31,36,0.5);
     --color-primer-canvas-sticky: rgba(255,255,255,0.95);
-    --color-primer-border-active: #FD8C73;
+    --color-primer-border-active: #fd8c73;
     --color-primer-border-contrast: rgba(27,31,36,0.1);
     --color-primer-shadow-highlight: inset 0 1px 0 rgba(255,255,255,0.25);
     --color-primer-shadow-inset: inset 0 1px 0 rgba(208,215,222,0.2);
@@ -393,7 +397,7 @@
     --color-scale-orange-7: #762c00;
     --color-scale-orange-8: #5c2200;
     --color-scale-orange-9: #471700;
-    --color-scale-red-0: #FFEBE9;
+    --color-scale-red-0: #ffebe9;
     --color-scale-red-1: #ffcecb;
     --color-scale-red-2: #ffaba8;
     --color-scale-red-3: #ff8182;
@@ -423,14 +427,14 @@
     --color-scale-pink-7: #772057;
     --color-scale-pink-8: #611347;
     --color-scale-pink-9: #4d0336;
-    --color-scale-coral-0: #FFF0EB;
-    --color-scale-coral-1: #FFD6CC;
-    --color-scale-coral-2: #FFB4A1;
-    --color-scale-coral-3: #FD8C73;
-    --color-scale-coral-4: #EC6547;
-    --color-scale-coral-5: #C4432B;
-    --color-scale-coral-6: #9E2F1C;
-    --color-scale-coral-7: #801F0F;
+    --color-scale-coral-0: #fff0eb;
+    --color-scale-coral-1: #ffd6cc;
+    --color-scale-coral-2: #ffb4a1;
+    --color-scale-coral-3: #fd8c73;
+    --color-scale-coral-4: #ec6547;
+    --color-scale-coral-5: #c4432b;
+    --color-scale-coral-6: #9e2f1c;
+    --color-scale-coral-7: #801f0f;
     --color-scale-coral-8: #691105;
     --color-scale-coral-9: #510901;
   }

package/dist/scss/colors/_light_colorblind.scss

@@ -278,6 +278,10 @@
     --color-switch-track-checked-border: #54aeff;
     --color-switch-knob-checked-bg: #0969da;
     --color-switch-knob-checked-disabled-bg: #6e7781;
+    --color-segmented-control-bg: #eaeef2;
+    --color-segmented-control-button-hover-bg: rgba(175,184,193,0.2);
+    --color-segmented-control-button-active-bg: rgba(175,184,193,0.4);
+    --color-segmented-control-button-selected-border: #6e7781;
     --color-fg-default: #24292f;
     --color-fg-muted: #57606a;
     --color-fg-subtle: #6e7781;
@@ -336,7 +340,7 @@
     --color-primer-fg-disabled: #8c959f;
     --color-primer-canvas-backdrop: rgba(27,31,36,0.5);
     --color-primer-canvas-sticky: rgba(255,255,255,0.95);
-    --color-primer-border-active: #FD8C73;
+    --color-primer-border-active: #fd8c73;
     --color-primer-border-contrast: rgba(27,31,36,0.1);
     --color-primer-shadow-highlight: inset 0 1px 0 rgba(255,255,255,0.25);
     --color-primer-shadow-inset: inset 0 1px 0 rgba(208,215,222,0.2);
@@ -423,14 +427,14 @@
     --color-scale-pink-7: #772057;
     --color-scale-pink-8: #611347;
     --color-scale-pink-9: #4d0336;
-    --color-scale-coral-0: #FFF0EB;
-    --color-scale-coral-1: #FFD6CC;
-    --color-scale-coral-2: #FFB4A1;
-    --color-scale-coral-3: #FD8C73;
-    --color-scale-coral-4: #EC6547;
-    --color-scale-coral-5: #C4432B;
-    --color-scale-coral-6: #9E2F1C;
-    --color-scale-coral-7: #801F0F;
+    --color-scale-coral-0: #fff0eb;
+    --color-scale-coral-1: #ffd6cc;
+    --color-scale-coral-2: #ffb4a1;
+    --color-scale-coral-3: #fd8c73;
+    --color-scale-coral-4: #ec6547;
+    --color-scale-coral-5: #c4432b;
+    --color-scale-coral-6: #9e2f1c;
+    --color-scale-coral-7: #801f0f;
     --color-scale-coral-8: #691105;
     --color-scale-coral-9: #510901;
   }