@primer/primitives 10.0.0-rc.e413e85d → 10.0.0-rc.eb6fe33a

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (93) hide show
  1. package/README.md +2 -2
  2. package/dist/build/PrimerStyleDictionary.js +2 -1
  3. package/dist/build/filters/isCubicBezier.d.ts +7 -0
  4. package/dist/build/filters/isCubicBezier.js +10 -0
  5. package/dist/build/platforms/css.js +1 -0
  6. package/dist/build/schemas/borderToken.d.ts +3 -3
  7. package/dist/build/schemas/colorToken.d.ts +3 -3
  8. package/dist/build/schemas/cubicBezierToken.d.ts +18 -0
  9. package/dist/build/schemas/cubicBezierToken.js +8 -0
  10. package/dist/build/schemas/designToken.js +2 -0
  11. package/dist/build/schemas/dimensionToken.d.ts +3 -3
  12. package/dist/build/schemas/durationToken.d.ts +3 -3
  13. package/dist/build/schemas/fontFamilyToken.d.ts +3 -3
  14. package/dist/build/schemas/fontWeightToken.d.ts +3 -3
  15. package/dist/build/schemas/numberToken.d.ts +3 -3
  16. package/dist/build/schemas/shadowToken.d.ts +3 -3
  17. package/dist/build/schemas/stringToken.d.ts +3 -3
  18. package/dist/build/schemas/tokenType.d.ts +1 -1
  19. package/dist/build/schemas/typographyToken.d.ts +3 -3
  20. package/dist/build/schemas/validTokenType.d.ts +1 -1
  21. package/dist/build/schemas/validTokenType.js +1 -0
  22. package/dist/build/schemas/viewportRangeToken.d.ts +3 -3
  23. package/dist/build/transformers/cubicBezierToCss.d.ts +8 -0
  24. package/dist/build/transformers/cubicBezierToCss.js +23 -0
  25. package/dist/build/transformers/index.d.ts +1 -0
  26. package/dist/build/transformers/index.js +1 -0
  27. package/dist/css/functional/themes/dark-colorblind.css +42 -22
  28. package/dist/css/functional/themes/dark-dimmed.css +44 -24
  29. package/dist/css/functional/themes/dark-high-contrast.css +42 -22
  30. package/dist/css/functional/themes/dark-tritanopia.css +42 -22
  31. package/dist/css/functional/themes/dark.css +42 -22
  32. package/dist/css/functional/themes/light-colorblind.css +42 -22
  33. package/dist/css/functional/themes/light-high-contrast.css +44 -24
  34. package/dist/css/functional/themes/light-tritanopia.css +42 -22
  35. package/dist/css/functional/themes/light.css +42 -22
  36. package/dist/css/functional/typography/typography.css +20 -20
  37. package/dist/css/primitives.css +20 -20
  38. package/dist/docs/functional/themes/dark-colorblind.json +533 -251
  39. package/dist/docs/functional/themes/dark-dimmed.json +560 -256
  40. package/dist/docs/functional/themes/dark-high-contrast.json +388 -148
  41. package/dist/docs/functional/themes/dark-tritanopia.json +535 -257
  42. package/dist/docs/functional/themes/dark.json +544 -256
  43. package/dist/docs/functional/themes/light-colorblind.json +355 -65
  44. package/dist/docs/functional/themes/light-high-contrast.json +333 -63
  45. package/dist/docs/functional/themes/light-tritanopia.json +307 -61
  46. package/dist/docs/functional/themes/light.json +336 -58
  47. package/dist/figma/figma.json +8 -8
  48. package/dist/figma/scales/dark-dimmed.json +2880 -0
  49. package/dist/figma/scales/dark-high-constrast.json +2880 -0
  50. package/dist/figma/scales/dark.json +2880 -0
  51. package/dist/figma/scales/light-high-constrast.json +2880 -0
  52. package/dist/figma/scales/light.json +2880 -0
  53. package/dist/figma/themes/dark-colorblind.json +144 -15
  54. package/dist/figma/themes/dark-dimmed.json +227 -52
  55. package/dist/figma/themes/dark-high-contrast.json +135 -25
  56. package/dist/figma/themes/dark-tritanopia.json +156 -28
  57. package/dist/figma/themes/dark.json +211 -52
  58. package/dist/figma/themes/light-colorblind.json +191 -16
  59. package/dist/figma/themes/light-high-contrast.json +169 -26
  60. package/dist/figma/themes/light-tritanopia.json +161 -35
  61. package/dist/figma/themes/light.json +201 -44
  62. package/dist/internalCss/dark-colorblind.css +42 -22
  63. package/dist/internalCss/dark-dimmed.css +44 -24
  64. package/dist/internalCss/dark-high-contrast.css +42 -22
  65. package/dist/internalCss/dark-tritanopia.css +42 -22
  66. package/dist/internalCss/dark.css +42 -22
  67. package/dist/internalCss/light-colorblind.css +42 -22
  68. package/dist/internalCss/light-high-contrast.css +44 -24
  69. package/dist/internalCss/light-tritanopia.css +42 -22
  70. package/dist/internalCss/light.css +42 -22
  71. package/dist/styleLint/functional/themes/dark-colorblind.json +533 -251
  72. package/dist/styleLint/functional/themes/dark-dimmed.json +560 -256
  73. package/dist/styleLint/functional/themes/dark-high-contrast.json +387 -147
  74. package/dist/styleLint/functional/themes/dark-tritanopia.json +535 -257
  75. package/dist/styleLint/functional/themes/dark.json +544 -256
  76. package/dist/styleLint/functional/themes/light-colorblind.json +355 -65
  77. package/dist/styleLint/functional/themes/light-high-contrast.json +333 -63
  78. package/dist/styleLint/functional/themes/light-tritanopia.json +307 -61
  79. package/dist/styleLint/functional/themes/light.json +336 -58
  80. package/package.json +2 -8
  81. package/src/tokens/functional/color/dark/app-dark.json5 +203 -88
  82. package/src/tokens/functional/color/dark/display-dark.json5 +95 -95
  83. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -8
  84. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +39 -26
  85. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +54 -28
  86. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +36 -13
  87. package/src/tokens/functional/color/dark/patterns-dark.json5 +16 -4
  88. package/src/tokens/functional/color/dark/primitives-dark.json5 +1 -1
  89. package/src/tokens/functional/color/light/app-light.json5 +195 -85
  90. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +25 -25
  91. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +59 -26
  92. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +62 -10
  93. package/src/tokens/functional/color/light/patterns-light.json5 +13 -1
package/dist/css/functional/themes/light.css CHANGED
@@ -5,17 +5,26 @@
5
5
  --topicTag-borderColor: #ffffff00;
6
6
  --highlight-neutral-bgColor: #fff8c5;
7
7
  --page-header-bgColor: #f6f8fa;
8
- --diffBlob-addition-fgColor-text: #1f2328;
9
- --diffBlob-addition-fgColor-num: #1f2328;
10
- --diffBlob-addition-bgColor-num: #d1f8d9;
11
- --diffBlob-addition-bgColor-line: #dafbe1;
12
- --diffBlob-addition-bgColor-word: #aceebb;
13
- --diffBlob-deletion-fgColor-text: #1f2328;
14
- --diffBlob-deletion-fgColor-num: #1f2328;
15
- --diffBlob-deletion-bgColor-num: #ffcecb;
16
- --diffBlob-deletion-bgColor-line: #ffebe9;
17
- --diffBlob-deletion-bgColor-word: #ff818266;
18
- --diffBlob-hunk-bgColor-num: #54aeff66;
8
+ --diffBlob-additionLine-fgColor: #1f2328;
9
+ --diffBlob-additionLine-bgColor: #dafbe1;
10
+ --diffBlob-additionWord-fgColor: #1f2328;
11
+ --diffBlob-additionWord-bgColor: #aceebb;
12
+ --diffBlob-additionNum-fgColor: #1f2328;
13
+ --diffBlob-additionNum-bgColor: #aceebb;
14
+ --diffBlob-deletionLine-fgColor: #1f2328;
15
+ --diffBlob-deletionLine-bgColor: #ffebe9;
16
+ --diffBlob-deletionWord-fgColor: #1f2328;
17
+ --diffBlob-deletionWord-bgColor: #ffcecb;
18
+ --diffBlob-deletionNum-fgColor: #1f2328;
19
+ --diffBlob-deletionNum-bgColor: #ffcecb;
20
+ --diffBlob-hunkLine-bgColor: #ddf4ff;
21
+ --diffBlob-hunkLine-fgColor: #59636e;
22
+ --diffBlob-hunkNum-fgColor-rest: #1f2328;
23
+ --diffBlob-hunkNum-fgColor-hover: #ffffff;
24
+ --diffBlob-hunkNum-bgColor-rest: #b6e3ff;
25
+ --diffBlob-hunkNum-bgColor-hover: #0969da;
26
+ --diffBlob-emptyNum-bgColor: #f6f8fa;
27
+ --diffBlob-emptyLine-bgColor: #f6f8fa;
19
28
  --diffBlob-expander-iconColor: #59636e;
20
29
  --codeMirror-fgColor: #1f2328;
21
30
  --codeMirror-bgColor: #ffffff;
@@ -242,6 +251,7 @@
242
251
  --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
243
252
  --button-invisible-fgColor-rest: #25292e;
244
253
  --button-invisible-fgColor-hover: #25292e;
254
+ --button-invisible-fgColor-active: #25292e;
245
255
  --button-invisible-fgColor-disabled: #818b98;
246
256
  --button-invisible-iconColor-rest: #59636e;
247
257
  --button-invisible-iconColor-hover: #59636e;
@@ -574,17 +584,26 @@
574
584
  --topicTag-borderColor: #ffffff00;
575
585
  --highlight-neutral-bgColor: #fff8c5;
576
586
  --page-header-bgColor: #f6f8fa;
577
- --diffBlob-addition-fgColor-text: #1f2328;
578
- --diffBlob-addition-fgColor-num: #1f2328;
579
- --diffBlob-addition-bgColor-num: #d1f8d9;
580
- --diffBlob-addition-bgColor-line: #dafbe1;
581
- --diffBlob-addition-bgColor-word: #aceebb;
582
- --diffBlob-deletion-fgColor-text: #1f2328;
583
- --diffBlob-deletion-fgColor-num: #1f2328;
584
- --diffBlob-deletion-bgColor-num: #ffcecb;
585
- --diffBlob-deletion-bgColor-line: #ffebe9;
586
- --diffBlob-deletion-bgColor-word: #ff818266;
587
- --diffBlob-hunk-bgColor-num: #54aeff66;
587
+ --diffBlob-additionLine-fgColor: #1f2328;
588
+ --diffBlob-additionLine-bgColor: #dafbe1;
589
+ --diffBlob-additionWord-fgColor: #1f2328;
590
+ --diffBlob-additionWord-bgColor: #aceebb;
591
+ --diffBlob-additionNum-fgColor: #1f2328;
592
+ --diffBlob-additionNum-bgColor: #aceebb;
593
+ --diffBlob-deletionLine-fgColor: #1f2328;
594
+ --diffBlob-deletionLine-bgColor: #ffebe9;
595
+ --diffBlob-deletionWord-fgColor: #1f2328;
596
+ --diffBlob-deletionWord-bgColor: #ffcecb;
597
+ --diffBlob-deletionNum-fgColor: #1f2328;
598
+ --diffBlob-deletionNum-bgColor: #ffcecb;
599
+ --diffBlob-hunkLine-bgColor: #ddf4ff;
600
+ --diffBlob-hunkLine-fgColor: #59636e;
601
+ --diffBlob-hunkNum-fgColor-rest: #1f2328;
602
+ --diffBlob-hunkNum-fgColor-hover: #ffffff;
603
+ --diffBlob-hunkNum-bgColor-rest: #b6e3ff;
604
+ --diffBlob-hunkNum-bgColor-hover: #0969da;
605
+ --diffBlob-emptyNum-bgColor: #f6f8fa;
606
+ --diffBlob-emptyLine-bgColor: #f6f8fa;
588
607
  --diffBlob-expander-iconColor: #59636e;
589
608
  --codeMirror-fgColor: #1f2328;
590
609
  --codeMirror-bgColor: #ffffff;
@@ -811,6 +830,7 @@
811
830
  --button-primary-shadow-selected: inset 0px 1px 0px 0px #002d114d;
812
831
  --button-invisible-fgColor-rest: #25292e;
813
832
  --button-invisible-fgColor-hover: #25292e;
833
+ --button-invisible-fgColor-active: #25292e;
814
834
  --button-invisible-fgColor-disabled: #818b98;
815
835
  --button-invisible-iconColor-rest: #59636e;
816
836
  --button-invisible-iconColor-hover: #59636e;
package/dist/css/functional/typography/typography.css CHANGED
@@ -1,43 +1,23 @@
1
1
  :root {
2
- --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
3
- --text-codeInline-weight: var(--base-text-weight-normal);
4
2
  --text-codeInline-size: 0.9285em;
5
- --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
6
- --text-codeBlock-weight: var(--base-text-weight-normal);
7
3
  --text-codeBlock-lineHeight: 1.5385;
8
4
  --text-codeBlock-size: 0.8125rem;
9
- --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* 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. */
10
- --text-caption-weight: var(--base-text-weight-normal);
11
5
  --text-caption-lineHeight: 1.3333;
12
6
  --text-caption-size: 0.75rem;
13
- --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* 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. */
14
- --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
15
- --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
16
- --text-body-weight: var(--base-text-weight-normal);
17
7
  --text-body-lineHeight-small: 1.6666;
18
8
  --text-body-lineHeight-medium: 1.4285;
19
9
  --text-body-lineHeight-large: 1.5;
20
10
  --text-body-size-small: 0.75rem;
21
11
  --text-body-size-medium: 0.875rem;
22
12
  --text-body-size-large: 1rem;
23
- --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
24
- --text-subtitle-weight: var(--base-text-weight-normal);
25
13
  --text-subtitle-lineHeight: 1.6;
26
14
  --text-subtitle-size: 1.25rem;
27
- --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
28
- --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
29
- --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
30
- --text-title-weight-small: var(--base-text-weight-semibold);
31
- --text-title-weight-medium: var(--base-text-weight-semibold);
32
- --text-title-weight-large: var(--base-text-weight-semibold);
33
15
  --text-title-lineHeight-small: 1.5;
34
16
  --text-title-lineHeight-medium: 1.6;
35
17
  --text-title-lineHeight-large: 1.5;
36
18
  --text-title-size-small: 1rem;
37
19
  --text-title-size-medium: 1.25rem;
38
20
  --text-title-size-large: 2rem;
39
- --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
40
- --text-display-weight: var(--base-text-weight-medium);
41
21
  --text-display-lineHeight: 1.4;
42
22
  --text-display-size: 2.5rem;
43
23
  --text-display-lineBoxHeight: 1.4;
@@ -45,4 +25,24 @@
45
25
  --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
46
26
  --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
47
27
  --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
28
+ --text-codeInline-weight: var(--base-text-weight-normal);
29
+ --text-codeBlock-weight: var(--base-text-weight-normal);
30
+ --text-caption-weight: var(--base-text-weight-normal);
31
+ --text-body-weight: var(--base-text-weight-normal);
32
+ --text-subtitle-weight: var(--base-text-weight-normal);
33
+ --text-title-weight-small: var(--base-text-weight-semibold);
34
+ --text-title-weight-medium: var(--base-text-weight-semibold);
35
+ --text-title-weight-large: var(--base-text-weight-semibold);
36
+ --text-display-weight: var(--base-text-weight-medium);
37
+ --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
38
+ --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
39
+ --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* 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. */
40
+ --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* 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. */
41
+ --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
42
+ --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
43
+ --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
44
+ --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
45
+ --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
46
+ --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
47
+ --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
48
48
  }
package/dist/css/primitives.css CHANGED
@@ -136,45 +136,25 @@
136
136
  --overlay-offset: 0.25rem;
137
137
  }
138
138
  :root {
139
- --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
140
- --text-codeInline-weight: var(--base-text-weight-normal);
141
139
  --text-codeInline-size: 0.9285em;
142
- --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
143
- --text-codeBlock-weight: var(--base-text-weight-normal);
144
140
  --text-codeBlock-lineHeight: 1.5385;
145
141
  --text-codeBlock-size: 0.8125rem;
146
- --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* 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. */
147
- --text-caption-weight: var(--base-text-weight-normal);
148
142
  --text-caption-lineHeight: 1.3333;
149
143
  --text-caption-size: 0.75rem;
150
- --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* 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. */
151
- --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
152
- --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
153
- --text-body-weight: var(--base-text-weight-normal);
154
144
  --text-body-lineHeight-small: 1.6666;
155
145
  --text-body-lineHeight-medium: 1.4285;
156
146
  --text-body-lineHeight-large: 1.5;
157
147
  --text-body-size-small: 0.75rem;
158
148
  --text-body-size-medium: 0.875rem;
159
149
  --text-body-size-large: 1rem;
160
- --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
161
- --text-subtitle-weight: var(--base-text-weight-normal);
162
150
  --text-subtitle-lineHeight: 1.6;
163
151
  --text-subtitle-size: 1.25rem;
164
- --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
165
- --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
166
- --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
167
- --text-title-weight-small: var(--base-text-weight-semibold);
168
- --text-title-weight-medium: var(--base-text-weight-semibold);
169
- --text-title-weight-large: var(--base-text-weight-semibold);
170
152
  --text-title-lineHeight-small: 1.5;
171
153
  --text-title-lineHeight-medium: 1.6;
172
154
  --text-title-lineHeight-large: 1.5;
173
155
  --text-title-size-small: 1rem;
174
156
  --text-title-size-medium: 1.25rem;
175
157
  --text-title-size-large: 2rem;
176
- --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
177
- --text-display-weight: var(--base-text-weight-medium);
178
158
  --text-display-lineHeight: 1.4;
179
159
  --text-display-size: 2.5rem;
180
160
  --text-display-lineBoxHeight: 1.4;
@@ -182,4 +162,24 @@
182
162
  --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
183
163
  --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
184
164
  --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
165
+ --text-codeInline-weight: var(--base-text-weight-normal);
166
+ --text-codeBlock-weight: var(--base-text-weight-normal);
167
+ --text-caption-weight: var(--base-text-weight-normal);
168
+ --text-body-weight: var(--base-text-weight-normal);
169
+ --text-subtitle-weight: var(--base-text-weight-normal);
170
+ --text-title-weight-small: var(--base-text-weight-semibold);
171
+ --text-title-weight-medium: var(--base-text-weight-semibold);
172
+ --text-title-weight-large: var(--base-text-weight-semibold);
173
+ --text-display-weight: var(--base-text-weight-medium);
174
+ --text-codeInline-shorthand: var(--text-codeInline-weight) var(--text-codeInline-size) var(--fontStack-monospace); /* Inline code blocks using em units to inherit size from its parent. */
175
+ --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
176
+ --text-caption-shorthand: var(--text-caption-weight) var(--text-caption-size) / var(--text-caption-lineHeight) var(--fontStack-sansSerif); /* 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. */
177
+ --text-body-shorthand-small: var(--text-body-weight) var(--text-body-size-small) / var(--text-body-lineHeight-small) var(--fontStack-sansSerif); /* 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. */
178
+ --text-body-shorthand-medium: var(--text-body-weight) var(--text-body-size-medium) / var(--text-body-lineHeight-medium) var(--fontStack-sansSerif); /* Default UI font. Most commonly used for body text. */
179
+ --text-body-shorthand-large: var(--text-body-weight) var(--text-body-size-large) / var(--text-body-lineHeight-large) var(--fontStack-sansSerif); /* User-generated content, markdown rendering. */
180
+ --text-subtitle-shorthand: var(--text-subtitle-weight) var(--text-subtitle-size) / var(--text-subtitle-lineHeight) var(--fontStack-sansSerifDisplay); /* Page sections/sub headings, or less important object names in page titles (automated action titles, for example). Same line-height as title (medium). */
181
+ --text-title-shorthand-small: var(--text-title-weight-small) var(--text-title-size-small) / var(--text-title-lineHeight-small) var(--fontStack-sansSerif); /* Uses the same size as body (large) with a heavier weight of semibold (600). */
182
+ --text-title-shorthand-medium: var(--text-title-weight-medium) var(--text-title-size-medium) / var(--text-title-lineHeight-medium) var(--fontStack-sansSerifDisplay); /* Default page title. The 32px-equivalent line-height matches with button and other medium control heights. Great for page header composition. */
183
+ --text-title-shorthand-large: var(--text-title-weight-large) var(--text-title-size-large) / var(--text-title-lineHeight-large) var(--fontStack-sansSerifDisplay); /* Page headings for user-created objects, such as issues or pull requests. Utilize title (medium) styles on narrow viewports. */
184
+ --text-display-shorthand: var(--text-display-weight) var(--text-display-size) / var(--text-display-lineHeight) var(--fontStack-sansSerifDisplay); /* Hero-style text for brand to product transition pages. Utilize Title (large) styles on narrow viewports. */
185
185
  }