@primer/primitives 7.11.7 → 7.11.8-rc.08a9209

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

@@ -91,6 +91,7 @@
   "text-display-shorthand": {
     "value": "500 2.5rem/calc(56/40) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
+    "comment": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports.",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -100,7 +101,8 @@
         "lineHeight": "{text.display.lineHeight}",
         "fontFamily": "{fontStack.sansSerif}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports."
     },
     "name": "text-display-shorthand",
     "attributes": {},
@@ -220,6 +222,7 @@
   "text-title-shorthand-large": {
     "value": "600 2rem/calc(48/32) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
+    "comment": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports.",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -229,7 +232,8 @@
         "lineHeight": "{text.title.lineHeight.large}",
         "fontFamily": "{fontStack.sansSerif}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports."
     },
     "name": "text-title-shorthand-large",
     "attributes": {},
@@ -238,6 +242,7 @@
   "text-title-shorthand-medium": {
     "value": "600 1.25rem/calc(32/20) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
+    "comment": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition.",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -247,7 +252,8 @@
         "lineHeight": "{text.title.lineHeight.medium}",
         "fontFamily": "{fontStack.sansSerif}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition."
     },
     "name": "text-title-shorthand-medium",
     "attributes": {},
@@ -256,6 +262,7 @@
   "text-title-shorthand-small": {
     "value": "600 1rem/calc(24/16) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
+    "comment": "Uses the same size as body (large) with a heavier weight of semibold (600).",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -265,7 +272,8 @@
         "lineHeight": "{text.title.lineHeight.small}",
         "fontFamily": "{fontStack.sansSerif}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "Uses the same size as body (large) with a heavier weight of semibold (600)."
     },
     "name": "text-title-shorthand-small",
     "attributes": {},
@@ -311,6 +319,7 @@
   "text-subtitle-shorthand": {
     "value": "400 1.25rem/calc(32/20) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
+    "comment": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium).",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -320,7 +329,8 @@
         "lineHeight": "{text.subtitle.lineHeight}",
         "fontFamily": "{fontStack.sansSerif}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium)."
     },
     "name": "text-subtitle-shorthand",
     "attributes": {},
@@ -414,6 +424,7 @@
   "text-body-shorthand-large": {
     "value": "400 1rem/calc(24/16) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
+    "comment": "User-generated content, markdown rendering.",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -423,7 +434,8 @@
         "lineHeight": "{text.body.lineHeight.large}",
         "fontFamily": "{fontStack.sansSerif}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "User-generated content, markdown rendering."
     },
     "name": "text-body-shorthand-large",
     "attributes": {},
@@ -432,6 +444,7 @@
   "text-body-shorthand-medium": {
     "value": "400 0.875rem/calc(20/14) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
+    "comment": "Default UI font. Most commonly used for body text.",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -441,7 +454,8 @@
         "lineHeight": "{text.body.lineHeight.medium}",
         "fontFamily": "{fontStack.sansSerif}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "Default UI font. Most commonly used for body text."
     },
     "name": "text-body-shorthand-medium",
     "attributes": {},
@@ -450,6 +464,7 @@
   "text-body-shorthand-small": {
     "value": "400 0.75rem/calc(20/12) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
+    "comment": "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.",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -459,7 +474,8 @@
         "lineHeight": "{text.body.lineHeight.small}",
         "fontFamily": "{fontStack.sansSerif}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "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."
     },
     "name": "text-body-shorthand-small",
     "attributes": {},
@@ -505,6 +521,7 @@
   "text-caption-shorthand": {
     "value": "400 0.75rem/calc(16/12) -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
     "$type": "typography",
+    "comment": "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.",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -514,7 +531,8 @@
         "lineHeight": "{text.caption.lineHeight}",
         "fontFamily": "{fontStack.sansSerif}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "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."
     },
     "name": "text-caption-shorthand",
     "attributes": {},
@@ -558,6 +576,7 @@
   "text-codeBlock-shorthand": {
     "value": "400 0.8125rem/calc(20/13) ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
     "$type": "typography",
+    "comment": "Default style for rendering code blocks.",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -567,7 +586,8 @@
         "lineHeight": "{text.codeBlock.lineHeight}",
         "fontFamily": "{fontStack.monospace}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "Default style for rendering code blocks."
     },
     "name": "text-codeBlock-shorthand",
     "attributes": {},
@@ -602,6 +622,7 @@
   "text-codeInline-shorthand": {
     "value": "400 0.9285em ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace",
     "$type": "typography",
+    "comment": "Inline code blocks using em units to inherit size from its parent.",
     "filePath": "src/tokens/functional/typography/typography.json",
     "isSource": true,
     "original": {
@@ -610,7 +631,8 @@
         "fontSize": "{text.codeInline.size}",
         "fontFamily": "{fontStack.monospace}"
       },
-      "$type": "typography"
+      "$type": "typography",
+      "comment": "Inline code blocks using em units to inherit size from its parent."
     },
     "name": "text-codeInline-shorthand",
     "attributes": {},

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

@@ -30,9 +30,9 @@ exports.default = {
         num: "#e6edf3",
       },
       bgColor: {
-        num: "#d476164d",
-        line: "#d4761626",
-        word: "#d4761666",
+        num: "#db6d284d",
+        line: "#db6d2826",
+        word: "#db6d2866",
       },
     },
     hunk: {
@@ -84,11 +84,11 @@ exports.default = {
         comment: "#8b949e",
         constant: "#79c0ff",
         entity: "#d2a8ff",
-        keyword: "#ec8e2c",
-        storage: "#ec8e2c",
+        keyword: "#f0883e",
+        storage: "#f0883e",
         string: "#a5d6ff",
         support: "#79c0ff",
-        variable: "#fdac54",
+        variable: "#ffa657",
       },
     },
   },
@@ -108,7 +108,7 @@ exports.default = {
   },
   avatar: {
     bgColor: "#ffffff1a",
-    borderColor: "#00000000",
+    borderColor: "#30363d66",
     shadow: "0px 0px 0px 2px #0d1117",
   },
   avatarStack: {
@@ -138,7 +138,7 @@ exports.default = {
       disabled: "#30363d",
       selected: "#f0f6fc",
       success: "#1f6feb",
-      danger: "#b76100",
+      danger: "#bd561d",
       warning: "#9e6a03",
     },
     iconColor: {
@@ -160,12 +160,12 @@ exports.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 @@ exports.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 @@ exports.default = {
     danger: {
       bgColor: {
         hover: "#ffffff33",
-        disabled: "#b761000d",
-        rest: "#b761001a",
+        disabled: "#bd561d0d",
+        rest: "#bd561d1a",
       },
     },
   },
@@ -411,9 +411,9 @@ exports.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 @@ exports.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 @@ exports.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",
@@ -510,62 +510,92 @@ exports.default = {
       emphasis: "#bf4b8a",
     },
   },
-  ansi: {
-    fgColor: {
+  color: {
+    ansi: {
       black: "#484f58",
-      blackBright: "#6e7681",
+      "black-bright": "#6e7681",
       white: "#b1bac4",
-      whiteBright: "#ffffff",
+      "white-bright": "#ffffff",
       gray: "#6e7681",
-      red: "#ec8e2c",
-      redBright: "#fdac54",
+      red: "#f0883e",
+      "red-bright": "#ffa657",
       green: "#58a6ff",
-      greenBright: "#79c0ff",
+      "green-bright": "#79c0ff",
       yellow: "#d29922",
-      yellowBright: "#e3b341",
+      "yellow-bright": "#e3b341",
       blue: "#58a6ff",
-      blueBright: "#79c0ff",
+      "blue-bright": "#79c0ff",
       magenta: "#bc8cff",
-      magentaBright: "#d2a8ff",
+      "magenta-bright": "#d2a8ff",
       cyan: "#39c5cf",
-      cyanBright: "#56d4dd",
+      "cyan-bright": "#56d4dd",
     },
-  },
-  prettylights: {
-    syntax: {
-      comment: "#8b949e",
-      constant: "#79c0ff",
-      entity: "#d2a8ff",
-      storageModifierImport: "#c9d1d9",
-      entityTag: "#a5d6ff",
-      keyword: "#ec8e2c",
-      string: "#a5d6ff",
-      variable: "#fdac54",
-      brackethighlighterUnmatched: "#d47616",
-      invalidIllegalText: "#f0f6fc",
-      invalidIllegalBg: "#6c3906",
-      carriageReturnText: "#f0f6fc",
-      carriageReturnBg: "#914d04",
-      stringRegexp: "#a5d6ff",
-      markupList: "#f2cc60",
-      markupHeading: "#1f6feb",
-      markupItalic: "#c9d1d9",
-      markupBold: "#c9d1d9",
-      markupDeletedText: "#ffe2bb",
-      markupDeletedBg: "#4e2906",
-      markupInsertedText: "#cae8ff",
-      markupInsertedBg: "#0c2d6b",
-      markupChangedText: "#ffe2bb",
-      markupChangedBg: "#4e2906",
-      markupIgnoredText: "#c9d1d9",
-      markupIgnoredBg: "#1158c7",
-      metaDiffRange: "#d2a8ff",
-      brackethighlighterAngle: "#8b949e",
-      sublimelinterGutterMark: "#484f58",
-      constantOtherReferenceLink: "#a5d6ff",
+    prettylights: {
+      syntax: {
+        comment: "#8b949e",
+        constant: "#79c0ff",
+        "constant-other-reference-link": "#a5d6ff",
+        entity: "#d2a8ff",
+        storage: {
+          modifier: {
+            import: "#c9d1d9",
+          },
+        },
+        "entity-tag": "#a5d6ff",
+        keyword: "#f0883e",
+        string: "#a5d6ff",
+        variable: "#ffa657",
+        brackethighlighter: {
+          unmatched: "#db6d28",
+          angle: "#8b949e",
+        },
+        invalid: {
+          illegal: {
+            text: "#f0f6fc",
+            bg: "#762d0a",
+          },
+        },
+        carriage: {
+          return: {
+            text: "#f0f6fc",
+            bg: "#9b4215",
+          },
+        },
+        "string-regexp": "#a5d6ff",
+        markup: {
+          list: "#f2cc60",
+          heading: "#1f6feb",
+          italic: "#c9d1d9",
+          bold: "#c9d1d9",
+          deleted: {
+            text: "#ffdfb6",
+            bg: "#5a1e02",
+          },
+          inserted: {
+            text: "#cae8ff",
+            bg: "#0c2d6b",
+          },
+          changed: {
+            text: "#ffdfb6",
+            bg: "#5a1e02",
+          },
+          ignored: {
+            text: "#c9d1d9",
+            bg: "#1158c7",
+          },
+        },
+        meta: {
+          diff: {
+            range: "#d2a8ff",
+          },
+        },
+        sublimelinter: {
+          gutter: {
+            mark: "#484f58",
+          },
+        },
+      },
     },
-  },
-  color: {
     scale: {
       black: "#010409",
       transparent: "#00000000",
@@ -619,28 +649,28 @@ exports.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",