@primer/primitives 7.11.5 → 7.11.6-rc.2fe33f9

package/tokens-next-private/json/functional/themes/light-tritanopia.json

@@ -95,9 +95,7 @@
   "header": {
     "fgColor": {
       "default": "#ffffffb3",
-      "logo": "#ffffff",
-      "text": "#ffffffb3",
-      "borderColor": "#57606a"
+      "logo": "#ffffff"
     },
     "bgColor": "#24292f",
     "borderColor": {
@@ -356,7 +354,7 @@
   },
   "focus": {
     "outlineColor": "#0969da",
-    "outline": "#0969da solid 1px"
+    "outline": "#0969da solid 2px"
   },
   "menu": {
     "bgColor": {
@@ -593,6 +591,119 @@
           }
         }
       }
+    },
+    "scale": {
+      "black": "#1f2328",
+      "transparent": "#ffffff00",
+      "white": "#ffffff",
+      "gray": {
+        "0": "#f6f8fa",
+        "1": "#eaeef2",
+        "2": "#d0d7de",
+        "3": "#afb8c1",
+        "4": "#8c959f",
+        "5": "#6e7781",
+        "6": "#57606a",
+        "7": "#424a53",
+        "8": "#32383f",
+        "9": "#24292f"
+      },
+      "blue": {
+        "0": "#ddf4ff",
+        "1": "#b6e3ff",
+        "2": "#80ccff",
+        "3": "#54aeff",
+        "4": "#218bff",
+        "5": "#0969da",
+        "6": "#0550ae",
+        "7": "#033d8b",
+        "8": "#0a3069",
+        "9": "#002155"
+      },
+      "green": {
+        "0": "#ddf4ff",
+        "1": "#b6e3ff",
+        "2": "#80ccff",
+        "3": "#54aeff",
+        "4": "#218bff",
+        "5": "#0969da",
+        "6": "#0550ae",
+        "7": "#033d8b",
+        "8": "#0a3069",
+        "9": "#002155"
+      },
+      "yellow": {
+        "0": "#fff8c5",
+        "1": "#fae17d",
+        "2": "#eac54f",
+        "3": "#d4a72c",
+        "4": "#bf8700",
+        "5": "#9a6700",
+        "6": "#7d4e00",
+        "7": "#633c01",
+        "8": "#4d2d00",
+        "9": "#3b2300"
+      },
+      "orange": {
+        "0": "#ffebe9",
+        "1": "#ffcecb",
+        "2": "#ffaba8",
+        "3": "#ff8182",
+        "4": "#fa4549",
+        "5": "#cf222e",
+        "6": "#a40e26",
+        "7": "#82071e",
+        "8": "#660018",
+        "9": "#4c0014"
+      },
+      "red": {
+        "0": "#ffebe9",
+        "1": "#ffcecb",
+        "2": "#ffaba8",
+        "3": "#ff8182",
+        "4": "#fa4549",
+        "5": "#cf222e",
+        "6": "#a40e26",
+        "7": "#82071e",
+        "8": "#660018",
+        "9": "#4c0014"
+      },
+      "purple": {
+        "0": "#fbefff",
+        "1": "#ecd8ff",
+        "2": "#d8b9ff",
+        "3": "#c297ff",
+        "4": "#a475f9",
+        "5": "#8250df",
+        "6": "#6639ba",
+        "7": "#512a97",
+        "8": "#3e1f79",
+        "9": "#2e1461"
+      },
+      "pink": {
+        "0": "#ffeff7",
+        "1": "#ffd3eb",
+        "2": "#ffadda",
+        "3": "#ff80c8",
+        "4": "#e85aad",
+        "5": "#bf3989",
+        "6": "#99286e",
+        "7": "#772057",
+        "8": "#611347",
+        "9": "#4d0336"
+      },
+      "coral": {
+        "0": "#fff0eb",
+        "1": "#ffd6cc",
+        "2": "#ffb4a1",
+        "3": "#fd8c73",
+        "4": "#ec6547",
+        "5": "#c4432b",
+        "6": "#9e2f1c",
+        "7": "#801f0f",
+        "8": "#691105",
+        "9": "#510901"
+      }
     }
   },
   "shadow": {

package/tokens-next-private/json/functional/themes/light.json

@@ -95,9 +95,7 @@
   "header": {
     "fgColor": {
       "default": "#ffffffb3",
-      "logo": "#ffffff",
-      "text": "#ffffffb3",
-      "borderColor": "#57606a"
+      "logo": "#ffffff"
     },
     "bgColor": "#24292f",
     "borderColor": {
@@ -356,7 +354,7 @@
   },
   "focus": {
     "outlineColor": "#0969da",
-    "outline": "#0969da solid 1px"
+    "outline": "#0969da solid 2px"
   },
   "menu": {
     "bgColor": {
@@ -593,6 +591,119 @@
           }
         }
       }
+    },
+    "scale": {
+      "black": "#1f2328",
+      "transparent": "#ffffff00",
+      "white": "#ffffff",
+      "gray": {
+        "0": "#f6f8fa",
+        "1": "#eaeef2",
+        "2": "#d0d7de",
+        "3": "#afb8c1",
+        "4": "#8c959f",
+        "5": "#6e7781",
+        "6": "#57606a",
+        "7": "#424a53",
+        "8": "#32383f",
+        "9": "#24292f"
+      },
+      "blue": {
+        "0": "#ddf4ff",
+        "1": "#b6e3ff",
+        "2": "#80ccff",
+        "3": "#54aeff",
+        "4": "#218bff",
+        "5": "#0969da",
+        "6": "#0550ae",
+        "7": "#033d8b",
+        "8": "#0a3069",
+        "9": "#002155"
+      },
+      "green": {
+        "0": "#dafbe1",
+        "1": "#aceebb",
+        "2": "#6fdd8b",
+        "3": "#4ac26b",
+        "4": "#2da44e",
+        "5": "#1a7f37",
+        "6": "#116329",
+        "7": "#044f1e",
+        "8": "#003d16",
+        "9": "#002d11"
+      },
+      "yellow": {
+        "0": "#fff8c5",
+        "1": "#fae17d",
+        "2": "#eac54f",
+        "3": "#d4a72c",
+        "4": "#bf8700",
+        "5": "#9a6700",
+        "6": "#7d4e00",
+        "7": "#633c01",
+        "8": "#4d2d00",
+        "9": "#3b2300"
+      },
+      "orange": {
+        "0": "#fff1e5",
+        "1": "#ffd8b5",
+        "2": "#ffb77c",
+        "3": "#fb8f44",
+        "4": "#e16f24",
+        "5": "#bc4c00",
+        "6": "#953800",
+        "7": "#762c00",
+        "8": "#5c2200",
+        "9": "#471700"
+      },
+      "red": {
+        "0": "#ffebe9",
+        "1": "#ffcecb",
+        "2": "#ffaba8",
+        "3": "#ff8182",
+        "4": "#fa4549",
+        "5": "#cf222e",
+        "6": "#a40e26",
+        "7": "#82071e",
+        "8": "#660018",
+        "9": "#4c0014"
+      },
+      "purple": {
+        "0": "#fbefff",
+        "1": "#ecd8ff",
+        "2": "#d8b9ff",
+        "3": "#c297ff",
+        "4": "#a475f9",
+        "5": "#8250df",
+        "6": "#6639ba",
+        "7": "#512a97",
+        "8": "#3e1f79",
+        "9": "#2e1461"
+      },
+      "pink": {
+        "0": "#ffeff7",
+        "1": "#ffd3eb",
+        "2": "#ffadda",
+        "3": "#ff80c8",
+        "4": "#e85aad",
+        "5": "#bf3989",
+        "6": "#99286e",
+        "7": "#772057",
+        "8": "#611347",
+        "9": "#4d0336"
+      },
+      "coral": {
+        "0": "#fff0eb",
+        "1": "#ffd6cc",
+        "2": "#ffb4a1",
+        "3": "#fd8c73",
+        "4": "#ec6547",
+        "5": "#c4432b",
+        "6": "#9e2f1c",
+        "7": "#801f0f",
+        "8": "#691105",
+        "9": "#510901"
+      }
     }
   },
   "shadow": {

package/tokens-next-private/json/functional/typography/typography.json

@@ -15,16 +15,23 @@
     "title": {
       "size": {
         "large": "2rem",
-        "medium": "1.25rem"
+        "medium": "1.25rem",
+        "small": "1rem"
       },
       "lineHeight": {
         "large": "calc(48/32)",
-        "medium": "calc(32/20)"
+        "medium": "calc(32/20)",
+        "small": "calc(24/16)"
+      },
+      "weight": {
+        "large": 600,
+        "medium": 600,
+        "small": 600
       },
-      "weight": 600,
       "shorthand": {
         "large": "600 2rem/calc(48/32) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
-        "medium": "600 1.25rem/calc(32/20) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
+        "medium": "600 1.25rem/calc(32/20) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+        "small": "600 1rem/calc(24/16) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
       }
     },
     "subtitle": {
@@ -64,9 +71,9 @@
       "shorthand": "400 0.8125rem/calc(20/13) ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
     },
     "codeInline": {
-      "size": "0.05803125rem",
+      "size": "0.9285em",
       "weight": 400,
-      "shorthand": "400 0.05803125rem ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
+      "shorthand": "400 0.9285em ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace"
     }
   }
 }

package/tokens-next-private/scss/base/size/size.scss

@@ -1,8 +1,3 @@
-/**
- * Do not edit directly
- * Generated on Wed, 05 Apr 2023 07:13:55 GMT
- */
-
 @mixin primer-colors-size {
   & {
     --base-size-4: 0.25rem;

package/tokens-next-private/scss/base/typography/typography.scss

@@ -1,8 +1,3 @@
-/**
- * Do not edit directly
- * Generated on Wed, 05 Apr 2023 07:13:55 GMT
- */
-
 @mixin primer-colors-typography {
   & {
     --base-text-weight-light: 300;

package/tokens-next-private/scss/functional/size/border.scss

@@ -1,13 +1,8 @@
-/**
- * Do not edit directly
- * Generated on Wed, 05 Apr 2023 07:13:55 GMT
- */
-
 @mixin primer-colors-border {
   & {
-    --borderInset-thin: inset 0 0 0 max(1px, 0.0625rem);
-    --borderInset-thick: inset 0 0 0 max(2px, 0.125rem);
-    --borderInset-thicker: inset 0 0 0 max(4px, 0.25rem);
+    --boxShadow-thin: inset 0 0 0 max(1px, 0.0625rem);
+    --boxShadow-thick: inset 0 0 0 max(2px, 0.125rem);
+    --boxShadow-thicker: inset 0 0 0 max(4px, 0.25rem);
     --borderWidth-thin: max(1px, 0.0625rem);
     --borderWidth-thick: max(2px, 0.125rem);
     --borderWidth-thicker: max(4px, 0.25rem);
@@ -15,6 +10,7 @@
     --borderRadius-medium: 6px;
     --borderRadius-large: 12px;
     --borderRadius-full: 100vh;
-    --outline-focus-offset: 0.0625rem;
+    --outline-focus-offset: -0.125rem;
+    --outline-focus-width: 0.125rem;
   }
 }

package/tokens-next-private/scss/functional/size/breakpoints.scss

@@ -1,8 +1,3 @@
-/**
- * Do not edit directly
- * Generated on Wed, 05 Apr 2023 07:13:55 GMT
- */
-
 @mixin primer-colors-breakpoints {
   & {
     --breakpoint-xsmall: 20rem;

package/tokens-next-private/scss/functional/size/size-coarse.scss

@@ -1,8 +1,3 @@
-/**
- * Do not edit directly
- * Generated on Wed, 05 Apr 2023 07:13:55 GMT
- */
-
 @mixin primer-colors-size-coarse {
   & {
     --control-minTarget-auto: 2.75rem;

package/tokens-next-private/scss/functional/size/size-fine.scss

@@ -1,8 +1,3 @@
-/**
- * Do not edit directly
- * Generated on Wed, 05 Apr 2023 07:13:55 GMT
- */
-
 @mixin primer-colors-size-fine {
   & {
     --control-minTarget-auto: 1rem;

package/tokens-next-private/scss/functional/size/size.scss

@@ -1,8 +1,3 @@
-/**
- * Do not edit directly
- * Generated on Wed, 05 Apr 2023 07:13:55 GMT
- */
-
 @mixin primer-colors-size {
   & {
     --control-minTarget-fine: 1rem;

package/tokens-next-private/scss/functional/size/viewport.scss

@@ -1,8 +1,3 @@
-/**
- * Do not edit directly
- * Generated on Wed, 05 Apr 2023 07:13:55 GMT
- */
-
 @mixin primer-colors-viewport {
   & {
     --viewportRange-narrow: (max-width: calc(48rem - 0.02px));

package/tokens-next-private/scss/functional/themes/dark-colorblind.scss

@@ -1,8 +1,3 @@
-/**
- * Do not edit directly
- * Generated on Wed, 05 Apr 2023 07:13:54 GMT
- */
-
 @mixin primer-colors-dark-colorblind {
   & {
     --topicTag-borderColor: #00000000;
@@ -42,8 +37,6 @@
     --codeMirror-syntax-fgColor-variable: #fdac54;
     --header-fgColor-default: #ffffffb3;
     --header-fgColor-logo: #f0f6fc;
-    --header-fgColor-text: #ffffffb3;
-    --header-fgColor-borderColor: #8b949e;
     --header-bgColor: #161b22f2;
     --header-borderColor-divider: #8b949e;
     --headerSearch-bgColor: #0d1117;
@@ -291,6 +284,99 @@
     --prettylights-syntax-brackethighlighterAngle: #8b949e;
     --prettylights-syntax-sublimelinterGutterMark: #484f58;
     --prettylights-syntax-constantOtherReferenceLink: #a5d6ff;
+    --color-scale-black: #010409; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-transparent: #00000000; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-white: #ffffff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-gray-0: #f0f6fc; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-gray-1: #c9d1d9; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-gray-2: #b1bac4; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-gray-3: #8b949e; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-gray-4: #6e7681; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-gray-5: #484f58; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-gray-6: #30363d; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-gray-7: #21262d; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-gray-8: #161b22; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-gray-9: #0d1117; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-blue-0: #cae8ff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-blue-1: #a5d6ff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-blue-2: #79c0ff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-blue-3: #58a6ff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-blue-4: #388bfd; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-blue-5: #1f6feb; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-blue-6: #1158c7; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-blue-7: #0d419d; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-blue-8: #0c2d6b; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-blue-9: #051d4d; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-green-0: #cae8ff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-green-1: #a5d6ff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-green-2: #79c0ff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-green-3: #58a6ff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-green-4: #388bfd; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-green-5: #1f6feb; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-green-6: #1158c7; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-green-7: #0d419d; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-green-8: #0c2d6b; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-green-9: #051d4d; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-yellow-0: #f8e3a1; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-yellow-1: #f2cc60; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-yellow-2: #e3b341; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-yellow-3: #d29922; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-yellow-4: #bb8009; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-yellow-5: #9e6a03; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-yellow-6: #845306; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-yellow-7: #693e00; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-yellow-8: #4b2900; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-yellow-9: #341a00; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-orange-0: #ffe2bb; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-orange-1: #ffc981; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-orange-2: #fdac54; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-orange-3: #ec8e2c; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-orange-4: #d47616; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-orange-5: #b76100; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-orange-6: #914d04; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-orange-7: #6c3906; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-orange-8: #4e2906; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-orange-9: #331c04; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-red-0: #ffe2bb; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-red-1: #ffc981; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-red-2: #fdac54; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-red-3: #ec8e2c; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-red-4: #d47616; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-red-5: #b76100; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-red-6: #914d04; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-red-7: #6c3906; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-red-8: #4e2906; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-red-9: #331c04; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-purple-0: #eddeff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-purple-1: #e2c5ff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-purple-2: #d2a8ff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-purple-3: #bc8cff; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-purple-4: #a371f7; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-purple-5: #8957e5; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-purple-6: #6e40c9; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-purple-7: #553098; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-purple-8: #3c1e70; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-purple-9: #271052; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-pink-0: #ffdaec; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-pink-1: #ffbedd; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-pink-2: #ff9bce; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-pink-3: #f778ba; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-pink-4: #db61a2; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-pink-5: #bf4b8a; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-pink-6: #9e3670; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-pink-7: #7d2457; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-pink-8: #5e103e; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-pink-9: #42062a; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-coral-0: #ffddd2; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-coral-1: #ffc2b2; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-coral-2: #ffa28b; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-coral-3: #f78166; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-coral-4: #ea6045; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-coral-5: #cf462d; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-coral-6: #ac3220; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-coral-7: #872012; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-coral-8: #640d04; /* Avoid using scales, use other functional tokens instead */
+    --color-scale-coral-9: #460701; /* Avoid using scales, use other functional tokens instead */
     --shadow-inset: 0px 0px 0px 0px #000000;
     --shadow-highlight: 0px 0px 0px 0px #000000;
     --shadow-resting-xsmall: 0px 1px 0px 0px #010409a3;
@@ -300,6 +386,6 @@
     --shadow-floating-medium: 0px 4px 32px -4px #6e768117, 0px 8px 16px -4px #6e768117, 0px 24px 48px -12px #6e768129, 0px 48px 96px -24px #6e76813d;
     --shadow-floating-large: 0px 8px 24px 0px #010409;
     --shadow-floating-xlarge: 0px 12px 48px 0px #010409;
-    --outline-focus: #1f6feb solid 1px;
+    --outline-focus: #1f6feb solid 2px;
   }
 }