@primer/primitives 7.11.8-rc.d8dbbf1 → 7.11.8-rc.e155359

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

@@ -7,7 +7,7 @@
     --text-display-size: 2.5rem;
     --text-display-lineHeight: calc(56 / 40);
     --text-display-weight: 500;
-    --text-display-shorthand: 500 2.5rem / calc(56 / 40) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    --text-display-shorthand: 500 2.5rem / calc(56 / 40) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
     --text-title-size-large: 2rem;
     --text-title-size-medium: 1.25rem;
     --text-title-size-small: 1rem;
@@ -17,13 +17,13 @@
     --text-title-weight-large: 600;
     --text-title-weight-medium: 600;
     --text-title-weight-small: 600;
-    --text-title-shorthand-large: 600 2rem / calc(48 / 32) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-    --text-title-shorthand-medium: 600 1.25rem / calc(32 / 20) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-    --text-title-shorthand-small: 600 1rem / calc(24 / 16) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    --text-title-shorthand-large: 600 2rem / calc(48 / 32) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
+    --text-title-shorthand-medium: 600 1.25rem / calc(32 / 20) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
+    --text-title-shorthand-small: 600 1rem / calc(24 / 16) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Uses the same size as body (large) with a heavier weight of semibold (600). */
     --text-subtitle-size: 1.25rem;
     --text-subtitle-lineHeight: calc(32 / 20);
     --text-subtitle-weight: 400;
-    --text-subtitle-shorthand: 400 1.25rem / calc(32 / 20) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    --text-subtitle-shorthand: 400 1.25rem / calc(32 / 20) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
     --text-body-size-large: 1rem;
     --text-body-size-medium: 0.875rem;
     --text-body-size-small: 0.75rem;
@@ -31,19 +31,19 @@
     --text-body-lineHeight-medium: calc(20 / 14);
     --text-body-lineHeight-small: calc(20 / 12);
     --text-body-weight: 400;
-    --text-body-shorthand-large: 400 1rem / calc(24 / 16) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-    --text-body-shorthand-medium: 400 0.875rem / calc(20 / 14) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-    --text-body-shorthand-small: 400 0.75rem / calc(20 / 12) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    --text-body-shorthand-large: 400 1rem / calc(24 / 16) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* User-generated content, markdown rendering. */
+    --text-body-shorthand-medium: 400 0.875rem / calc(20 / 14) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Default UI font. Most commonly used for body text. */
+    --text-body-shorthand-small: 400 0.75rem / calc(20 / 12) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Small body text for discrete UI applications, such as helper, footnote text. Should be used sparingly across pages. Line-height matches Body (medium) at 20px. */
     --text-caption-size: 0.75rem;
     --text-caption-lineHeight: calc(16 / 12);
     --text-caption-weight: 400;
-    --text-caption-shorthand: 400 0.75rem / calc(16 / 12) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+    --text-caption-shorthand: 400 0.75rem / calc(16 / 12) -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; /* Compact small font with a smaller line height of 16px. Use it for single-line scenarios, as the small sizing doesn’t pass accessibility requirements. */
     --text-codeBlock-size: 0.8125rem;
     --text-codeBlock-lineHeight: calc(20 / 13);
     --text-codeBlock-weight: 400;
-    --text-codeBlock-shorthand: 400 0.8125rem / calc(20 / 13) ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    --text-codeBlock-shorthand: 400 0.8125rem / calc(20 / 13) ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; /* Default style for rendering code blocks. */
     --text-codeInline-size: 0.9285em;
     --text-codeInline-weight: 400;
-    --text-codeInline-shorthand: 400 0.9285em ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
+    --text-codeInline-shorthand: 400 0.9285em ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace; /* Inline code blocks using em units to inherit size from its parent. */
   }
 }

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

@@ -30,9 +30,9 @@ export default {
         num: "#e6edf3",
       },
       bgColor: {
-        num: "#d476164d",
-        line: "#d4761626",
-        word: "#d4761666",
+        num: "#db6d284d",
+        line: "#db6d2826",
+        word: "#db6d2866",
       },
     },
     hunk: {
@@ -84,11 +84,11 @@ export default {
         comment: "#8b949e",
         constant: "#79c0ff",
         entity: "#d2a8ff",
-        keyword: "#ec8e2c",
-        storage: "#ec8e2c",
+        keyword: "#f0883e",
+        storage: "#f0883e",
         string: "#a5d6ff",
         support: "#79c0ff",
-        variable: "#fdac54",
+        variable: "#ffa657",
       },
     },
   },
@@ -138,7 +138,7 @@ export default {
       disabled: "#30363d",
       selected: "#f0f6fc",
       success: "#1f6feb",
-      danger: "#b76100",
+      danger: "#bd561d",
       warning: "#9e6a03",
     },
     iconColor: {
@@ -160,12 +160,12 @@ export default {
     },
     danger: {
       fgColor: {
-        rest: "#d47616",
-        hover: "#ec8e2c",
+        rest: "#db6d28",
+        hover: "#f0883e",
       },
       bgColor: {
-        hover: "#d476161a",
-        active: "#d4761666",
+        hover: "#db6d281a",
+        active: "#db6d2866",
       },
     },
     checked: {
@@ -301,25 +301,25 @@ export default {
     },
     danger: {
       fgColor: {
-        rest: "#d47616",
+        rest: "#db6d28",
         hover: "#ffffff",
         active: "#ffffff",
-        disabled: "#d4761680",
+        disabled: "#db6d2880",
       },
       iconColor: {
-        rest: "#d47616",
+        rest: "#db6d28",
         hover: "#ffffff",
       },
       bgColor: {
         rest: "#21262d",
-        hover: "#914d04",
-        active: "#ac5d0b",
+        hover: "#9b4215",
+        active: "#b5531d",
         disabled: "#21262d",
       },
       borderColor: {
         rest: "#30363d",
-        hover: "#914d04",
-        active: "#ac5d0b",
+        hover: "#9b4215",
+        active: "#b5531d",
       },
       shadow: {
         selected: "0px 0px 0px 0px #000000",
@@ -347,8 +347,8 @@ export default {
     danger: {
       bgColor: {
         hover: "#ffffff33",
-        disabled: "#b761000d",
-        rest: "#b761001a",
+        disabled: "#bd561d0d",
+        rest: "#bd561d1a",
       },
     },
   },
@@ -411,9 +411,9 @@ export default {
     accent: "#2f81f7",
     success: "#58a6ff",
     attention: "#d29922",
-    severe: "#d47616",
-    danger: "#d47616",
-    open: "#ec8e2c",
+    severe: "#db6d28",
+    danger: "#db6d28",
+    open: "#f0883e",
     closed: "#8b949e",
     done: "#a371f7",
     sponsors: "#db61a2",
@@ -440,16 +440,16 @@ export default {
       emphasis: "#9e6a03",
     },
     severe: {
-      muted: "#d476161a",
-      emphasis: "#b76100",
+      muted: "#db6d281a",
+      emphasis: "#bd561d",
     },
     danger: {
-      muted: "#d476161a",
-      emphasis: "#b76100",
+      muted: "#db6d281a",
+      emphasis: "#bd561d",
     },
     open: {
-      muted: "#d4761666",
-      emphasis: "#b76100",
+      muted: "#db6d2866",
+      emphasis: "#bd561d",
     },
     closed: {
       muted: "#6e768166",
@@ -486,16 +486,16 @@ export default {
       emphasis: "#9e6a03",
     },
     severe: {
-      muted: "#d4761666",
-      emphasis: "#b76100",
+      muted: "#db6d2866",
+      emphasis: "#bd561d",
     },
     danger: {
-      muted: "#d4761666",
-      emphasis: "#b76100",
+      muted: "#db6d2866",
+      emphasis: "#bd561d",
     },
     open: {
-      muted: "#d4761666",
-      emphasis: "#d47616",
+      muted: "#db6d2866",
+      emphasis: "#db6d28",
     },
     closed: {
       muted: "#6e768166",
@@ -517,8 +517,8 @@ export default {
       white: "#b1bac4",
       "white-bright": "#ffffff",
       gray: "#6e7681",
-      red: "#ec8e2c",
-      "red-bright": "#fdac54",
+      red: "#f0883e",
+      "red-bright": "#ffa657",
       green: "#58a6ff",
       "green-bright": "#79c0ff",
       yellow: "#d29922",
@@ -533,13 +533,8 @@ export default {
     prettylights: {
       syntax: {
         comment: "#8b949e",
-        constant: {
-          other: {
-            reference: {
-              link: "#a5d6ff",
-            },
-          },
-        },
+        constant: "#79c0ff",
+        "constant-other-reference-link": "#a5d6ff",
         entity: "#d2a8ff",
         storage: {
           modifier: {
@@ -547,20 +542,23 @@ export default {
           },
         },
         "entity-tag": "#a5d6ff",
-        keyword: "#ec8e2c",
+        keyword: "#f0883e",
         string: "#a5d6ff",
-        variable: "#fdac54",
+        variable: "#ffa657",
         brackethighlighter: {
+          unmatched: "#db6d28",
           angle: "#8b949e",
         },
         invalid: {
           illegal: {
-            bg: "#6c3906",
+            text: "#f0f6fc",
+            bg: "#762d0a",
           },
         },
         carriage: {
           return: {
-            bg: "#914d04",
+            text: "#f0f6fc",
+            bg: "#9b4215",
           },
         },
         "string-regexp": "#a5d6ff",
@@ -570,16 +568,16 @@ export default {
           italic: "#c9d1d9",
           bold: "#c9d1d9",
           deleted: {
-            text: "#ffe2bb",
-            bg: "#4e2906",
+            text: "#ffdfb6",
+            bg: "#5a1e02",
           },
           inserted: {
             text: "#cae8ff",
             bg: "#0c2d6b",
           },
           changed: {
-            text: "#ffe2bb",
-            bg: "#4e2906",
+            text: "#ffdfb6",
+            bg: "#5a1e02",
           },
           ignored: {
             text: "#c9d1d9",
@@ -651,28 +649,28 @@ export default {
         "9": "#341a00",
       },
       orange: {
-        "0": "#ffe2bb",
-        "1": "#ffc981",
-        "2": "#fdac54",
-        "3": "#ec8e2c",
-        "4": "#d47616",
-        "5": "#b76100",
-        "6": "#914d04",
-        "7": "#6c3906",
-        "8": "#4e2906",
-        "9": "#331c04",
+        "0": "#ffdfb6",
+        "1": "#ffc680",
+        "2": "#ffa657",
+        "3": "#f0883e",
+        "4": "#db6d28",
+        "5": "#bd561d",
+        "6": "#9b4215",
+        "7": "#762d0a",
+        "8": "#5a1e02",
+        "9": "#3d1300",
       },
       red: {
-        "0": "#ffe2bb",
-        "1": "#ffc981",
-        "2": "#fdac54",
-        "3": "#ec8e2c",
-        "4": "#d47616",
-        "5": "#b76100",
-        "6": "#914d04",
-        "7": "#6c3906",
-        "8": "#4e2906",
-        "9": "#331c04",
+        "0": "#ffdfb6",
+        "1": "#ffc680",
+        "2": "#ffa657",
+        "3": "#f0883e",
+        "4": "#db6d28",
+        "5": "#bd561d",
+        "6": "#9b4215",
+        "7": "#762d0a",
+        "8": "#5a1e02",
+        "9": "#3d1300",
       },
       purple: {
         "0": "#eddeff",

package/tokens-next-private/ts/functional/themes/dark-dimmed.ts

@@ -533,13 +533,8 @@ export default {
     prettylights: {
       syntax: {
         comment: "#768390",
-        constant: {
-          other: {
-            reference: {
-              link: "#96d0ff",
-            },
-          },
-        },
+        constant: "#6cb6ff",
+        "constant-other-reference-link": "#96d0ff",
         entity: "#dcbdfb",
         storage: {
           modifier: {
@@ -551,15 +546,18 @@ export default {
         string: "#96d0ff",
         variable: "#f69d50",
         brackethighlighter: {
+          unmatched: "#e5534b",
           angle: "#768390",
         },
         invalid: {
           illegal: {
+            text: "#cdd9e5",
             bg: "#922323",
           },
         },
         carriage: {
           return: {
+            text: "#cdd9e5",
             bg: "#ad2e2c",
           },
         },

package/tokens-next-private/ts/functional/themes/dark-high-contrast.ts

@@ -533,13 +533,8 @@ export default {
     prettylights: {
       syntax: {
         comment: "#bdc4cc",
-        constant: {
-          other: {
-            reference: {
-              link: "#addcff",
-            },
-          },
-        },
+        constant: "#91cbff",
+        "constant-other-reference-link": "#addcff",
         entity: "#dbb7ff",
         storage: {
           modifier: {
@@ -551,15 +546,18 @@ export default {
         string: "#addcff",
         variable: "#ffb757",
         brackethighlighter: {
+          unmatched: "#ff6a69",
           angle: "#bdc4cc",
         },
         invalid: {
           illegal: {
+            text: "#ffffff",
             bg: "#e82a2f",
           },
         },
         carriage: {
           return: {
+            text: "#ffffff",
             bg: "#ff4445",
           },
         },

package/tokens-next-private/ts/functional/themes/dark-tritanopia.ts

@@ -533,13 +533,8 @@ export default {
     prettylights: {
       syntax: {
         comment: "#8b949e",
-        constant: {
-          other: {
-            reference: {
-              link: "#a5d6ff",
-            },
-          },
-        },
+        constant: "#79c0ff",
+        "constant-other-reference-link": "#a5d6ff",
         entity: "#d2a8ff",
         storage: {
           modifier: {
@@ -551,15 +546,18 @@ export default {
         string: "#a5d6ff",
         variable: "#ffa198",
         brackethighlighter: {
+          unmatched: "#f85149",
           angle: "#8b949e",
         },
         invalid: {
           illegal: {
+            text: "#f0f6fc",
             bg: "#8e1519",
           },
         },
         carriage: {
           return: {
+            text: "#f0f6fc",
             bg: "#b62324",
           },
         },

package/tokens-next-private/ts/functional/themes/dark.ts

@@ -533,13 +533,8 @@ export default {
     prettylights: {
       syntax: {
         comment: "#8b949e",
-        constant: {
-          other: {
-            reference: {
-              link: "#a5d6ff",
-            },
-          },
-        },
+        constant: "#79c0ff",
+        "constant-other-reference-link": "#a5d6ff",
         entity: "#d2a8ff",
         storage: {
           modifier: {
@@ -551,15 +546,18 @@ export default {
         string: "#a5d6ff",
         variable: "#ffa657",
         brackethighlighter: {
+          unmatched: "#f85149",
           angle: "#8b949e",
         },
         invalid: {
           illegal: {
+            text: "#f0f6fc",
             bg: "#8e1519",
           },
         },
         carriage: {
           return: {
+            text: "#f0f6fc",
             bg: "#b62324",
           },
         },