@primer/primitives 7.10.0 → 7.11.0-rc.ecbdb39

package/dist/scss/colors/_light_colorblind.scss

@@ -200,11 +200,6 @@
     --color-btn-active-bg: hsla(220,14%,93%,1);
     --color-btn-active-border: rgba(27,31,36,0.15);
     --color-btn-selected-bg: hsla(220,14%,94%,1);
-    --color-btn-focus-bg: #f6f8fa;
-    --color-btn-focus-border: rgba(27,31,36,0.15);
-    --color-btn-focus-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-    --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
-    --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(9,105,218,0.3);
     --color-btn-counter-bg: rgba(27,31,36,0.08);
     --color-btn-primary-text: #ffffff;
     --color-btn-primary-bg: #218bff;
@@ -218,9 +213,6 @@
     --color-btn-primary-disabled-text: rgba(255,255,255,0.8);
     --color-btn-primary-disabled-bg: #80ccff;
     --color-btn-primary-disabled-border: rgba(27,31,36,0.15);
-    --color-btn-primary-focus-bg: #218bff;
-    --color-btn-primary-focus-border: rgba(27,31,36,0.15);
-    --color-btn-primary-focus-shadow: 0 0 0 3px rgba(33,139,255,0.4);
     --color-btn-primary-icon: rgba(255,255,255,0.8);
     --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
     --color-btn-outline-text: #0969da;
@@ -237,8 +229,6 @@
     --color-btn-outline-disabled-text: rgba(9,105,218,0.5);
     --color-btn-outline-disabled-bg: #f6f8fa;
     --color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
-    --color-btn-outline-focus-border: rgba(27,31,36,0.15);
-    --color-btn-outline-focus-shadow: 0 0 0 3px rgba(5,80,174,0.4);
     --color-btn-outline-counter-bg: rgba(9,105,218,0.1);
     --color-btn-danger-text: #b35900;
     --color-btn-danger-hover-text: #ffffff;
@@ -254,8 +244,6 @@
     --color-btn-danger-disabled-text: rgba(179,89,0,0.5);
     --color-btn-danger-disabled-bg: #f6f8fa;
     --color-btn-danger-disabled-counter-bg: rgba(179,89,0,0.05);
-    --color-btn-danger-focus-border: rgba(27,31,36,0.15);
-    --color-btn-danger-focus-shadow: 0 0 0 3px rgba(138,70,0,0.4);
     --color-btn-danger-counter-bg: rgba(179,89,0,0.1);
     --color-btn-danger-icon: #b35900;
     --color-btn-danger-hover-icon: #ffffff;
@@ -346,7 +334,6 @@
     --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);
-    --color-primer-shadow-focus: 0 0 0 3px rgba(9,105,218,0.3);
     --color-scale-black: #1b1f24;
     --color-scale-white: #ffffff;
     --color-scale-gray-0: #f6f8fa;

package/dist/scss/colors/_light_high_contrast.scss

@@ -200,11 +200,6 @@
     --color-btn-active-bg: #acb6c0;
     --color-btn-active-border: rgba(1,4,9,0.8);
     --color-btn-selected-bg: #acb6c0;
-    --color-btn-focus-bg: #ced5dc;
-    --color-btn-focus-border: rgba(1,4,9,0.8);
-    --color-btn-focus-shadow: 0 0 0 3px rgba(3,73,180,0.3);
-    --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(1,4,9,0.15);
-    --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(3,73,180,0.3);
     --color-btn-counter-bg: rgba(1,4,9,0.08);
     --color-btn-primary-text: #ffffff;
     --color-btn-primary-bg: #055d20;
@@ -218,9 +213,6 @@
     --color-btn-primary-disabled-text: rgba(255,255,255,0.8);
     --color-btn-primary-disabled-bg: #94d3a2;
     --color-btn-primary-disabled-border: rgba(1,4,9,0.8);
-    --color-btn-primary-focus-bg: #013d14;
-    --color-btn-primary-focus-border: #013d14;
-    --color-btn-primary-focus-shadow: 0 0 0 3px rgba(1,61,20,0.4);
     --color-btn-primary-icon: rgba(255,255,255,0.8);
     --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
     --color-btn-outline-text: #023b95;
@@ -237,8 +229,6 @@
     --color-btn-outline-disabled-text: rgba(3,73,180,0.5);
     --color-btn-outline-disabled-bg: #e7ecf0;
     --color-btn-outline-disabled-counter-bg: rgba(3,73,180,0.05);
-    --color-btn-outline-focus-border: #022f7a;
-    --color-btn-outline-focus-shadow: 0 0 0 3px rgba(2,59,149,0.4);
     --color-btn-outline-counter-bg: rgba(3,73,180,0.1);
     --color-btn-danger-text: #86061d;
     --color-btn-danger-hover-text: #ffffff;
@@ -254,8 +244,6 @@
     --color-btn-danger-disabled-text: rgba(160,17,31,0.5);
     --color-btn-danger-disabled-bg: #e7ecf0;
     --color-btn-danger-disabled-counter-bg: rgba(160,17,31,0.05);
-    --color-btn-danger-focus-border: #6e011a;
-    --color-btn-danger-focus-shadow: 0 0 0 3px rgba(134,6,29,0.4);
     --color-btn-danger-counter-bg: rgba(160,17,31,0.1);
     --color-btn-danger-icon: #86061d;
     --color-btn-danger-hover-icon: #ffffff;
@@ -346,7 +334,6 @@
     --color-primer-border-contrast: rgba(1,4,9,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(206,213,220,0.2);
-    --color-primer-shadow-focus: 0 0 0 3px rgba(3,73,180,0.3);
     --color-scale-black: #010409;
     --color-scale-white: #ffffff;
     --color-scale-gray-0: #ffffff;

package/dist/scss/colors/_light_tritanopia.scss

@@ -200,11 +200,6 @@
     --color-btn-active-bg: hsla(220,14%,93%,1);
     --color-btn-active-border: rgba(27,31,36,0.15);
     --color-btn-selected-bg: hsla(220,14%,94%,1);
-    --color-btn-focus-bg: #f6f8fa;
-    --color-btn-focus-border: rgba(27,31,36,0.15);
-    --color-btn-focus-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-    --color-btn-shadow-active: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
-    --color-btn-shadow-input-focus: 0 0 0 0.2em rgba(9,105,218,0.3);
     --color-btn-counter-bg: rgba(27,31,36,0.08);
     --color-btn-primary-text: #ffffff;
     --color-btn-primary-bg: #218bff;
@@ -218,9 +213,6 @@
     --color-btn-primary-disabled-text: rgba(255,255,255,0.8);
     --color-btn-primary-disabled-bg: #80ccff;
     --color-btn-primary-disabled-border: rgba(27,31,36,0.15);
-    --color-btn-primary-focus-bg: #218bff;
-    --color-btn-primary-focus-border: rgba(27,31,36,0.15);
-    --color-btn-primary-focus-shadow: 0 0 0 3px rgba(33,139,255,0.4);
     --color-btn-primary-icon: rgba(255,255,255,0.8);
     --color-btn-primary-counter-bg: rgba(255,255,255,0.2);
     --color-btn-outline-text: #0969da;
@@ -237,8 +229,6 @@
     --color-btn-outline-disabled-text: rgba(9,105,218,0.5);
     --color-btn-outline-disabled-bg: #f6f8fa;
     --color-btn-outline-disabled-counter-bg: rgba(9,105,218,0.05);
-    --color-btn-outline-focus-border: rgba(27,31,36,0.15);
-    --color-btn-outline-focus-shadow: 0 0 0 3px rgba(5,80,174,0.4);
     --color-btn-outline-counter-bg: rgba(9,105,218,0.1);
     --color-btn-danger-text: #cf222e;
     --color-btn-danger-hover-text: #ffffff;
@@ -254,8 +244,6 @@
     --color-btn-danger-disabled-text: rgba(207,34,46,0.5);
     --color-btn-danger-disabled-bg: #f6f8fa;
     --color-btn-danger-disabled-counter-bg: rgba(207,34,46,0.05);
-    --color-btn-danger-focus-border: rgba(27,31,36,0.15);
-    --color-btn-danger-focus-shadow: 0 0 0 3px rgba(164,14,38,0.4);
     --color-btn-danger-counter-bg: rgba(207,34,46,0.1);
     --color-btn-danger-icon: #cf222e;
     --color-btn-danger-hover-icon: #ffffff;
@@ -346,7 +334,6 @@
     --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);
-    --color-primer-shadow-focus: 0 0 0 3px rgba(9,105,218,0.3);
     --color-scale-black: #1b1f24;
     --color-scale-white: #ffffff;
     --color-scale-gray-0: #f6f8fa;

package/dist/ts/colors/dark.ts

@@ -260,11 +260,6 @@ export default {
     "activeBg": "hsla(212,12%,18%,1)",
     "activeBorder": "#6e7681",
     "selectedBg": "#161b22",
-    "focusBg": "#21262d",
-    "focusBorder": "#8b949e",
-    "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
-    "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
-    "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
     "counterBg": "#30363d",
     "primary": {
       "text": "#ffffff",
@@ -279,9 +274,6 @@ export default {
       "disabledText": "rgba(255,255,255,0.5)",
       "disabledBg": "rgba(35,134,54,0.6)",
       "disabledBorder": "rgba(240,246,252,0.1)",
-      "focusBg": "#238636",
-      "focusBorder": "rgba(240,246,252,0.1)",
-      "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
       "icon": "#ffffff",
       "counterBg": "rgba(255,255,255,0.2)"
     },
@@ -300,8 +292,6 @@ export default {
       "disabledText": "rgba(88,166,255,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(31,111,235,0.05)",
-      "focusBorder": "rgba(240,246,252,0.1)",
-      "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)",
       "counterBg": "rgba(31,111,235,0.1)"
     },
     "danger": {
@@ -320,8 +310,6 @@ export default {
       "disabledText": "rgba(248,81,73,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(218,54,51,0.05)",
-      "focusBorder": "#f85149",
-      "focusShadow": "0 0 0 3px rgba(248,81,73,0.4)",
       "counterBg": "rgba(218,54,51,0.1)",
       "icon": "#f85149"
     }
@@ -480,8 +468,7 @@ export default {
     },
     "shadow": {
       "highlight": "0 0 transparent",
-      "inset": "0 0 transparent",
-      "focus": "0 0 0 3px #0c2d6b"
+      "inset": "0 0 transparent"
     }
   },
   "scale": {

package/dist/ts/colors/dark_colorblind.ts

@@ -260,11 +260,6 @@ export default {
     "activeBg": "hsla(212,12%,18%,1)",
     "activeBorder": "#6e7681",
     "selectedBg": "#161b22",
-    "focusBg": "#21262d",
-    "focusBorder": "#8b949e",
-    "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
-    "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
-    "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
     "counterBg": "#30363d",
     "primary": {
       "text": "#ffffff",
@@ -279,9 +274,6 @@ export default {
       "disabledText": "rgba(255,255,255,0.5)",
       "disabledBg": "rgba(31,111,235,0.6)",
       "disabledBorder": "rgba(240,246,252,0.1)",
-      "focusBg": "#1f6feb",
-      "focusBorder": "rgba(240,246,252,0.1)",
-      "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
       "icon": "#ffffff",
       "counterBg": "rgba(255,255,255,0.2)"
     },
@@ -300,8 +292,6 @@ export default {
       "disabledText": "rgba(88,166,255,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(31,111,235,0.05)",
-      "focusBorder": "rgba(240,246,252,0.1)",
-      "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)",
       "counterBg": "rgba(31,111,235,0.1)"
     },
     "danger": {
@@ -320,8 +310,6 @@ export default {
       "disabledText": "rgba(212,118,22,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(183,97,0,0.05)",
-      "focusBorder": "#d47616",
-      "focusShadow": "0 0 0 3px rgba(212,118,22,0.4)",
       "counterBg": "rgba(183,97,0,0.1)",
       "icon": "#d47616"
     }
@@ -480,8 +468,7 @@ export default {
     },
     "shadow": {
       "highlight": "0 0 transparent",
-      "inset": "0 0 transparent",
-      "focus": "0 0 0 3px #0c2d6b"
+      "inset": "0 0 transparent"
     }
   },
   "scale": {

package/dist/ts/colors/dark_dimmed.ts

@@ -260,11 +260,6 @@ export default {
     "activeBg": "hsla(213,12%,27%,1)",
     "activeBorder": "#636e7b",
     "selectedBg": "#2d333b",
-    "focusBg": "#373e47",
-    "focusBorder": "#768390",
-    "focusShadow": "0 0 0 3px rgba(118,131,144,0.3)",
-    "shadowActive": "inset 0 0.15em 0.3em rgba(28,33,40,0.15)",
-    "shadowInputFocus": "0 0 0 0.2em rgba(49,109,202,0.3)",
     "counterBg": "#444c56",
     "primary": {
       "text": "#ffffff",
@@ -279,9 +274,6 @@ export default {
       "disabledText": "rgba(205,217,229,0.5)",
       "disabledBg": "rgba(52,125,57,0.6)",
       "disabledBorder": "rgba(205,217,229,0.1)",
-      "focusBg": "#347d39",
-      "focusBorder": "rgba(205,217,229,0.1)",
-      "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
       "icon": "#cdd9e5",
       "counterBg": "rgba(205,217,229,0.2)"
     },
@@ -300,8 +292,6 @@ export default {
       "disabledText": "rgba(83,155,245,0.5)",
       "disabledBg": "#22272e",
       "disabledCounterBg": "rgba(49,109,202,0.05)",
-      "focusBorder": "rgba(205,217,229,0.1)",
-      "focusShadow": "0 0 0 3px rgba(37,90,178,0.4)",
       "counterBg": "rgba(49,109,202,0.1)"
     },
     "danger": {
@@ -320,8 +310,6 @@ export default {
       "disabledText": "rgba(229,83,75,0.5)",
       "disabledBg": "#22272e",
       "disabledCounterBg": "rgba(201,60,55,0.05)",
-      "focusBorder": "#e5534b",
-      "focusShadow": "0 0 0 3px rgba(229,83,75,0.4)",
       "counterBg": "rgba(201,60,55,0.1)",
       "icon": "#e5534b"
     }
@@ -480,8 +468,7 @@ export default {
     },
     "shadow": {
       "highlight": "0 0 transparent",
-      "inset": "0 0 transparent",
-      "focus": "0 0 0 3px #143d79"
+      "inset": "0 0 transparent"
     }
   },
   "scale": {

package/dist/ts/colors/dark_high_contrast.ts

@@ -260,11 +260,6 @@ export default {
     "activeBg": "hsla(217,10%,33%,1)",
     "activeBorder": "#9ea7b3",
     "selectedBg": "rgba(82,89,100,0.9)",
-    "focusBg": "#272b33",
-    "focusBorder": "#bdc4cc",
-    "focusShadow": "0 0 0 3px rgba(189,196,204,0.3)",
-    "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
-    "shadowInputFocus": "0 0 0 0.2em rgba(64,158,255,0.3)",
     "counterBg": "#525964",
     "primary": {
       "text": "#0a0c10",
@@ -279,9 +274,6 @@ export default {
       "disabledText": "rgba(10,12,16,0.5)",
       "disabledBg": "rgba(9,180,58,0.6)",
       "disabledBorder": "rgba(74,225,104,0.4)",
-      "focusBg": "#09b43a",
-      "focusBorder": "#7a828e",
-      "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
       "icon": "#0a0c10",
       "counterBg": "rgba(1,4,9,0.15)"
     },
@@ -300,8 +292,6 @@ export default {
       "disabledText": "rgba(113,183,255,0.5)",
       "disabledBg": "#0a0c10",
       "disabledCounterBg": "rgba(64,158,255,0.05)",
-      "focusBorder": "#7a828e",
-      "focusShadow": "0 0 0 3px rgba(49,139,248,0.4)",
       "counterBg": "rgba(64,158,255,0.1)"
     },
     "danger": {
@@ -320,8 +310,6 @@ export default {
       "disabledText": "rgba(255,106,105,0.5)",
       "disabledBg": "#0a0c10",
       "disabledCounterBg": "rgba(255,106,105,0.05)",
-      "focusBorder": "#ff6a69",
-      "focusShadow": "0 0 0 3px rgba(255,106,105,0.4)",
       "counterBg": "rgba(1,4,9,0.15)",
       "icon": "#ff6a69"
     }
@@ -480,8 +468,7 @@ export default {
     },
     "shadow": {
       "highlight": "0 0 transparent",
-      "inset": "0 0 transparent",
-      "focus": "0 0 0 3px #1e60d5"
+      "inset": "0 0 transparent"
     }
   },
   "scale": {

package/dist/ts/colors/dark_tritanopia.ts

@@ -260,11 +260,6 @@ export default {
     "activeBg": "hsla(212,12%,18%,1)",
     "activeBorder": "#6e7681",
     "selectedBg": "#161b22",
-    "focusBg": "#21262d",
-    "focusBorder": "#8b949e",
-    "focusShadow": "0 0 0 3px rgba(139,148,158,0.3)",
-    "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
-    "shadowInputFocus": "0 0 0 0.2em rgba(31,111,235,0.3)",
     "counterBg": "#30363d",
     "primary": {
       "text": "#ffffff",
@@ -279,9 +274,6 @@ export default {
       "disabledText": "rgba(255,255,255,0.5)",
       "disabledBg": "rgba(31,111,235,0.6)",
       "disabledBorder": "rgba(240,246,252,0.1)",
-      "focusBg": "#1f6feb",
-      "focusBorder": "rgba(240,246,252,0.1)",
-      "focusShadow": "0 0 0 3px rgba(46,164,79,0.4)",
       "icon": "#ffffff",
       "counterBg": "rgba(255,255,255,0.2)"
     },
@@ -300,8 +292,6 @@ export default {
       "disabledText": "rgba(88,166,255,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(31,111,235,0.05)",
-      "focusBorder": "rgba(240,246,252,0.1)",
-      "focusShadow": "0 0 0 3px rgba(17,88,199,0.4)",
       "counterBg": "rgba(31,111,235,0.1)"
     },
     "danger": {
@@ -320,8 +310,6 @@ export default {
       "disabledText": "rgba(248,81,73,0.5)",
       "disabledBg": "#0d1117",
       "disabledCounterBg": "rgba(218,54,51,0.05)",
-      "focusBorder": "#f85149",
-      "focusShadow": "0 0 0 3px rgba(248,81,73,0.4)",
       "counterBg": "rgba(218,54,51,0.1)",
       "icon": "#f85149"
     }
@@ -480,8 +468,7 @@ export default {
     },
     "shadow": {
       "highlight": "0 0 transparent",
-      "inset": "0 0 transparent",
-      "focus": "0 0 0 3px #0c2d6b"
+      "inset": "0 0 transparent"
     }
   },
   "scale": {

package/dist/ts/colors/light.ts

@@ -260,11 +260,6 @@ export default {
     "activeBg": "hsla(220,14%,93%,1)",
     "activeBorder": "rgba(27,31,36,0.15)",
     "selectedBg": "hsla(220,14%,94%,1)",
-    "focusBg": "#f6f8fa",
-    "focusBorder": "rgba(27,31,36,0.15)",
-    "focusShadow": "0 0 0 3px rgba(9,105,218,0.3)",
-    "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,36,0.15)",
-    "shadowInputFocus": "0 0 0 0.2em rgba(9,105,218,0.3)",
     "counterBg": "rgba(27,31,36,0.08)",
     "primary": {
       "text": "#ffffff",
@@ -279,9 +274,6 @@ export default {
       "disabledText": "rgba(255,255,255,0.8)",
       "disabledBg": "#94d3a2",
       "disabledBorder": "rgba(27,31,36,0.15)",
-      "focusBg": "#2da44e",
-      "focusBorder": "rgba(27,31,36,0.15)",
-      "focusShadow": "0 0 0 3px rgba(45,164,78,0.4)",
       "icon": "rgba(255,255,255,0.8)",
       "counterBg": "rgba(255,255,255,0.2)"
     },
@@ -300,8 +292,6 @@ export default {
       "disabledText": "rgba(9,105,218,0.5)",
       "disabledBg": "#f6f8fa",
       "disabledCounterBg": "rgba(9,105,218,0.05)",
-      "focusBorder": "rgba(27,31,36,0.15)",
-      "focusShadow": "0 0 0 3px rgba(5,80,174,0.4)",
       "counterBg": "rgba(9,105,218,0.1)"
     },
     "danger": {
@@ -319,8 +309,6 @@ export default {
       "disabledText": "rgba(207,34,46,0.5)",
       "disabledBg": "#f6f8fa",
       "disabledCounterBg": "rgba(207,34,46,0.05)",
-      "focusBorder": "rgba(27,31,36,0.15)",
-      "focusShadow": "0 0 0 3px rgba(164,14,38,0.4)",
       "counterBg": "rgba(207,34,46,0.1)",
       "icon": "#cf222e",
       "hoverIcon": "#ffffff"
@@ -480,8 +468,7 @@ export default {
     },
     "shadow": {
       "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-      "inset": "inset 0 1px 0 rgba(208,215,222,0.2)",
-      "focus": "0 0 0 3px rgba(9,105,218,0.3)"
+      "inset": "inset 0 1px 0 rgba(208,215,222,0.2)"
     }
   },
   "scale": {

package/dist/ts/colors/light_colorblind.ts

@@ -260,11 +260,6 @@ export default {
     "activeBg": "hsla(220,14%,93%,1)",
     "activeBorder": "rgba(27,31,36,0.15)",
     "selectedBg": "hsla(220,14%,94%,1)",
-    "focusBg": "#f6f8fa",
-    "focusBorder": "rgba(27,31,36,0.15)",
-    "focusShadow": "0 0 0 3px rgba(9,105,218,0.3)",
-    "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,36,0.15)",
-    "shadowInputFocus": "0 0 0 0.2em rgba(9,105,218,0.3)",
     "counterBg": "rgba(27,31,36,0.08)",
     "primary": {
       "text": "#ffffff",
@@ -279,9 +274,6 @@ export default {
       "disabledText": "rgba(255,255,255,0.8)",
       "disabledBg": "#80ccff",
       "disabledBorder": "rgba(27,31,36,0.15)",
-      "focusBg": "#218bff",
-      "focusBorder": "rgba(27,31,36,0.15)",
-      "focusShadow": "0 0 0 3px rgba(33,139,255,0.4)",
       "icon": "rgba(255,255,255,0.8)",
       "counterBg": "rgba(255,255,255,0.2)"
     },
@@ -300,8 +292,6 @@ export default {
       "disabledText": "rgba(9,105,218,0.5)",
       "disabledBg": "#f6f8fa",
       "disabledCounterBg": "rgba(9,105,218,0.05)",
-      "focusBorder": "rgba(27,31,36,0.15)",
-      "focusShadow": "0 0 0 3px rgba(5,80,174,0.4)",
       "counterBg": "rgba(9,105,218,0.1)"
     },
     "danger": {
@@ -319,8 +309,6 @@ export default {
       "disabledText": "rgba(179,89,0,0.5)",
       "disabledBg": "#f6f8fa",
       "disabledCounterBg": "rgba(179,89,0,0.05)",
-      "focusBorder": "rgba(27,31,36,0.15)",
-      "focusShadow": "0 0 0 3px rgba(138,70,0,0.4)",
       "counterBg": "rgba(179,89,0,0.1)",
       "icon": "#b35900",
       "hoverIcon": "#ffffff"
@@ -480,8 +468,7 @@ export default {
     },
     "shadow": {
       "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-      "inset": "inset 0 1px 0 rgba(208,215,222,0.2)",
-      "focus": "0 0 0 3px rgba(9,105,218,0.3)"
+      "inset": "inset 0 1px 0 rgba(208,215,222,0.2)"
     }
   },
   "scale": {

package/dist/ts/colors/light_high_contrast.ts

@@ -260,11 +260,6 @@ export default {
     "activeBg": "#acb6c0",
     "activeBorder": "rgba(1,4,9,0.8)",
     "selectedBg": "#acb6c0",
-    "focusBg": "#ced5dc",
-    "focusBorder": "rgba(1,4,9,0.8)",
-    "focusShadow": "0 0 0 3px rgba(3,73,180,0.3)",
-    "shadowActive": "inset 0 0.15em 0.3em rgba(1,4,9,0.15)",
-    "shadowInputFocus": "0 0 0 0.2em rgba(3,73,180,0.3)",
     "counterBg": "rgba(1,4,9,0.08)",
     "primary": {
       "text": "#ffffff",
@@ -279,9 +274,6 @@ export default {
       "disabledText": "rgba(255,255,255,0.8)",
       "disabledBg": "#94d3a2",
       "disabledBorder": "rgba(1,4,9,0.8)",
-      "focusBg": "#013d14",
-      "focusBorder": "#013d14",
-      "focusShadow": "0 0 0 3px rgba(1,61,20,0.4)",
       "icon": "rgba(255,255,255,0.8)",
       "counterBg": "rgba(255,255,255,0.2)"
     },
@@ -300,8 +292,6 @@ export default {
       "disabledText": "rgba(3,73,180,0.5)",
       "disabledBg": "#e7ecf0",
       "disabledCounterBg": "rgba(3,73,180,0.05)",
-      "focusBorder": "#022f7a",
-      "focusShadow": "0 0 0 3px rgba(2,59,149,0.4)",
       "counterBg": "rgba(3,73,180,0.1)"
     },
     "danger": {
@@ -319,8 +309,6 @@ export default {
       "disabledText": "rgba(160,17,31,0.5)",
       "disabledBg": "#e7ecf0",
       "disabledCounterBg": "rgba(160,17,31,0.05)",
-      "focusBorder": "#6e011a",
-      "focusShadow": "0 0 0 3px rgba(134,6,29,0.4)",
       "counterBg": "rgba(160,17,31,0.1)",
       "icon": "#86061d",
       "hoverIcon": "#ffffff"
@@ -480,8 +468,7 @@ export default {
     },
     "shadow": {
       "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-      "inset": "inset 0 1px 0 rgba(206,213,220,0.2)",
-      "focus": "0 0 0 3px rgba(3,73,180,0.3)"
+      "inset": "inset 0 1px 0 rgba(206,213,220,0.2)"
     }
   },
   "scale": {

package/dist/ts/colors/light_tritanopia.ts

@@ -260,11 +260,6 @@ export default {
     "activeBg": "hsla(220,14%,93%,1)",
     "activeBorder": "rgba(27,31,36,0.15)",
     "selectedBg": "hsla(220,14%,94%,1)",
-    "focusBg": "#f6f8fa",
-    "focusBorder": "rgba(27,31,36,0.15)",
-    "focusShadow": "0 0 0 3px rgba(9,105,218,0.3)",
-    "shadowActive": "inset 0 0.15em 0.3em rgba(27,31,36,0.15)",
-    "shadowInputFocus": "0 0 0 0.2em rgba(9,105,218,0.3)",
     "counterBg": "rgba(27,31,36,0.08)",
     "primary": {
       "text": "#ffffff",
@@ -279,9 +274,6 @@ export default {
       "disabledText": "rgba(255,255,255,0.8)",
       "disabledBg": "#80ccff",
       "disabledBorder": "rgba(27,31,36,0.15)",
-      "focusBg": "#218bff",
-      "focusBorder": "rgba(27,31,36,0.15)",
-      "focusShadow": "0 0 0 3px rgba(33,139,255,0.4)",
       "icon": "rgba(255,255,255,0.8)",
       "counterBg": "rgba(255,255,255,0.2)"
     },
@@ -300,8 +292,6 @@ export default {
       "disabledText": "rgba(9,105,218,0.5)",
       "disabledBg": "#f6f8fa",
       "disabledCounterBg": "rgba(9,105,218,0.05)",
-      "focusBorder": "rgba(27,31,36,0.15)",
-      "focusShadow": "0 0 0 3px rgba(5,80,174,0.4)",
       "counterBg": "rgba(9,105,218,0.1)"
     },
     "danger": {
@@ -319,8 +309,6 @@ export default {
       "disabledText": "rgba(207,34,46,0.5)",
       "disabledBg": "#f6f8fa",
       "disabledCounterBg": "rgba(207,34,46,0.05)",
-      "focusBorder": "rgba(27,31,36,0.15)",
-      "focusShadow": "0 0 0 3px rgba(164,14,38,0.4)",
       "counterBg": "rgba(207,34,46,0.1)",
       "icon": "#cf222e",
       "hoverIcon": "#ffffff"
@@ -480,8 +468,7 @@ export default {
     },
     "shadow": {
       "highlight": "inset 0 1px 0 rgba(255,255,255,0.25)",
-      "inset": "inset 0 1px 0 rgba(208,215,222,0.2)",
-      "focus": "0 0 0 3px rgba(9,105,218,0.3)"
+      "inset": "inset 0 1px 0 rgba(208,215,222,0.2)"
     }
   },
   "scale": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/primitives",
-  "version": "7.10.0",
+  "version": "7.11.0-rc.ecbdb39",
   "description": "Typography, spacing, and color primitives for Primer design system",
   "files": [
     "dist",
@@ -28,16 +28,22 @@
   "scripts": {
     "build": "ts-node ./script/build.ts && tsc --project tsconfig.build.json",
     "build:tokens": "node -e \"require('./build')._init()\"",
-    "format": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
+    "format": "prettier --write  '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
+    "format:check": "prettier --check '**/*.{js,jsx,ts,tsx,md,mdx,css}'",
     "lint": "eslint '**/*.{js,ts,tsx,md,mdx}' --max-warnings=0 --config .eslintrc.js",
+    "lint:fix": "eslint '**/*.{js,ts,tsx,md,mdx}' --fix --max-warnings=0 --config .eslintrc.js",
     "postbuild": "ts-node ./script/color-contrast.ts",
     "prebuild": "rm -rf dist",
     "prebuild:tokens": "rm -rf tokens-v2-private",
+    "prebuild:color-tokens": "rm -rf tokens-v2-private/**/**/color",
     "prepack": "yarn build && yarn build:tokens",
+    "prepare": "husky install",
     "release": "changeset publish",
-    "build:color-tokens": "ts-node ./script/tempColorTokenBuild.ts",
+    "build:color-tokens": "ts-node -r tsconfig-paths/register ./script/tempColorTokenBuild.ts",
     "test": "jest --verbose --coverage",
-    "watch": "ls data/**/*.scss script/**/*.ts | entr -s 'yarn build'"
+    "watch": "ls data/**/*.scss script/**/*.ts | entr -s 'yarn build'",
+    "start:storybook": "npm run build:color-tokens && cd docs/storybook && npm run storybook",
+    "build:new-tokens": "npm run build:tokens && npm run build:color-tokens"
   },
   "prettier": "@github/prettier-config",
   "devDependencies": {
@@ -54,6 +60,7 @@
     "@types/chalk": "^2.2.0",
     "@types/flat": "^5.0.1",
     "@types/fs-extra": "^9.0.13",
+    "@types/jest": "^29.1.2",
     "@types/lodash": "^4.14.163",
     "@types/mkdirp": "^1.0.1",
     "@types/node": "^14.0.26",
@@ -78,6 +85,7 @@
     "eslint-plugin-storybook": "^0.5.12",
     "flat": "^5.0.2",
     "fs-extra": "^10.1.0",
+    "husky": "^8.0.1",
     "jest": "^29.0.1",
     "json5": "^2.2.1",
     "lodash": "^4.17.20",
@@ -87,7 +95,9 @@
     "react": "^17.0.2",
     "sass-extract": "^2.1.0",
     "style-dictionary": "3.7.1",
+    "ts-jest": "^29.0.3",
     "ts-node": "^8.10.2",
+    "tsconfig-paths": "^4.1.0",
     "typescript": "^4.2.0"
   }
 }