@primer/primitives 10.0.0-rc.d2acd2c0 → 10.0.0-rc.dd3dde40

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 (121) hide show
  1. package/README.md +2 -2
  2. package/dist/build/PrimerStyleDictionary.js +27 -26
  3. package/dist/build/filters/isCubicBezier.d.ts +7 -0
  4. package/dist/build/filters/isCubicBezier.js +10 -0
  5. package/dist/build/formats/typescriptExportDefinition.js +2 -2
  6. package/dist/build/parsers/w3cJsonParser.js +2 -2
  7. package/dist/build/platforms/css.js +1 -0
  8. package/dist/build/schemas/borderToken.d.ts +3 -3
  9. package/dist/build/schemas/colorToken.d.ts +3 -3
  10. package/dist/build/schemas/cubicBezierToken.d.ts +18 -0
  11. package/dist/build/schemas/cubicBezierToken.js +8 -0
  12. package/dist/build/schemas/designToken.js +2 -1
  13. package/dist/build/schemas/dimensionToken.d.ts +3 -3
  14. package/dist/build/schemas/durationToken.d.ts +3 -3
  15. package/dist/build/schemas/fontFamilyToken.d.ts +3 -3
  16. package/dist/build/schemas/fontWeightToken.d.ts +3 -3
  17. package/dist/build/schemas/numberToken.d.ts +3 -3
  18. package/dist/build/schemas/shadowToken.d.ts +3 -3
  19. package/dist/build/schemas/stringToken.d.ts +3 -3
  20. package/dist/build/schemas/tokenType.d.ts +1 -1
  21. package/dist/build/schemas/typographyToken.d.ts +3 -3
  22. package/dist/build/schemas/validTokenType.d.ts +1 -1
  23. package/dist/build/schemas/validTokenType.js +1 -0
  24. package/dist/build/schemas/viewportRangeToken.d.ts +3 -3
  25. package/dist/build/transformers/cubicBezierToCss.d.ts +8 -0
  26. package/dist/build/transformers/cubicBezierToCss.js +23 -0
  27. package/dist/build/transformers/durationToCss.js +2 -2
  28. package/dist/build/transformers/index.d.ts +1 -0
  29. package/dist/build/transformers/index.js +1 -0
  30. package/dist/css/base/motion/motion.css +17 -0
  31. package/dist/css/functional/motion/motion.css +4 -3
  32. package/dist/css/functional/themes/dark-colorblind.css +58 -38
  33. package/dist/css/functional/themes/dark-dimmed.css +44 -24
  34. package/dist/css/functional/themes/dark-high-contrast.css +42 -22
  35. package/dist/css/functional/themes/dark-tritanopia.css +44 -24
  36. package/dist/css/functional/themes/dark.css +42 -22
  37. package/dist/css/functional/themes/light-colorblind.css +60 -40
  38. package/dist/css/functional/themes/light-high-contrast.css +44 -24
  39. package/dist/css/functional/themes/light-tritanopia.css +42 -22
  40. package/dist/css/functional/themes/light.css +42 -22
  41. package/dist/css/functional/typography/typography.css +43 -43
  42. package/dist/css/primitives.css +64 -46
  43. package/dist/docs/base/motion/motion.json +205 -0
  44. package/dist/docs/functional/motion/motion.json +18 -3
  45. package/dist/docs/functional/themes/dark-colorblind.json +564 -282
  46. package/dist/docs/functional/themes/dark-dimmed.json +580 -276
  47. package/dist/docs/functional/themes/dark-high-contrast.json +408 -168
  48. package/dist/docs/functional/themes/dark-tritanopia.json +558 -280
  49. package/dist/docs/functional/themes/dark.json +564 -276
  50. package/dist/docs/functional/themes/light-colorblind.json +388 -108
  51. package/dist/docs/functional/themes/light-high-contrast.json +353 -83
  52. package/dist/docs/functional/themes/light-tritanopia.json +327 -81
  53. package/dist/docs/functional/themes/light.json +356 -78
  54. package/dist/fallbacks/base/motion/motion.json +17 -0
  55. package/dist/fallbacks/functional/motion/motion.json +1 -0
  56. package/dist/figma/dimension/dimension.json +518 -518
  57. package/dist/figma/figma.json +19 -19
  58. package/dist/figma/scales/dark-dimmed.json +3536 -656
  59. package/dist/figma/scales/dark-high-constrast.json +3535 -655
  60. package/dist/figma/scales/dark.json +3371 -491
  61. package/dist/figma/scales/light-high-constrast.json +3533 -653
  62. package/dist/figma/scales/light.json +3370 -490
  63. package/dist/figma/shadows/dark-colorblind.json +285 -285
  64. package/dist/figma/shadows/dark-dimmed.json +285 -285
  65. package/dist/figma/shadows/dark-high-contrast.json +285 -285
  66. package/dist/figma/shadows/dark-tritanopia.json +285 -285
  67. package/dist/figma/shadows/dark.json +285 -285
  68. package/dist/figma/shadows/light-colorblind.json +254 -254
  69. package/dist/figma/shadows/light-high-contrast.json +254 -254
  70. package/dist/figma/shadows/light-tritanopia.json +254 -254
  71. package/dist/figma/shadows/light.json +254 -254
  72. package/dist/figma/themes/dark-colorblind.json +5197 -5068
  73. package/dist/figma/themes/dark-dimmed.json +5526 -5351
  74. package/dist/figma/themes/dark-high-contrast.json +4361 -4251
  75. package/dist/figma/themes/dark-tritanopia.json +5315 -5187
  76. package/dist/figma/themes/dark.json +5740 -5581
  77. package/dist/figma/themes/light-colorblind.json +5104 -4929
  78. package/dist/figma/themes/light-high-contrast.json +4462 -4319
  79. package/dist/figma/themes/light-tritanopia.json +5176 -5050
  80. package/dist/figma/themes/light.json +5657 -5500
  81. package/dist/figma/typography/typography.json +162 -162
  82. package/dist/internalCss/dark-colorblind.css +58 -38
  83. package/dist/internalCss/dark-dimmed.css +44 -24
  84. package/dist/internalCss/dark-high-contrast.css +42 -22
  85. package/dist/internalCss/dark-tritanopia.css +44 -24
  86. package/dist/internalCss/dark.css +42 -22
  87. package/dist/internalCss/light-colorblind.css +60 -40
  88. package/dist/internalCss/light-high-contrast.css +44 -24
  89. package/dist/internalCss/light-tritanopia.css +42 -22
  90. package/dist/internalCss/light.css +42 -22
  91. package/dist/styleLint/base/motion/motion.json +205 -0
  92. package/dist/styleLint/functional/motion/motion.json +18 -3
  93. package/dist/styleLint/functional/themes/dark-colorblind.json +564 -282
  94. package/dist/styleLint/functional/themes/dark-dimmed.json +580 -276
  95. package/dist/styleLint/functional/themes/dark-high-contrast.json +407 -167
  96. package/dist/styleLint/functional/themes/dark-tritanopia.json +558 -280
  97. package/dist/styleLint/functional/themes/dark.json +564 -276
  98. package/dist/styleLint/functional/themes/light-colorblind.json +388 -108
  99. package/dist/styleLint/functional/themes/light-high-contrast.json +353 -83
  100. package/dist/styleLint/functional/themes/light-tritanopia.json +327 -81
  101. package/dist/styleLint/functional/themes/light.json +356 -78
  102. package/package.json +21 -29
  103. package/src/tokens/base/motion/easing.json5 +26 -0
  104. package/src/tokens/base/motion/timing.json5 +50 -0
  105. package/src/tokens/functional/color/dark/app-dark.json5 +203 -88
  106. package/src/tokens/functional/color/dark/data-vis-dark.json5 +20 -20
  107. package/src/tokens/functional/color/dark/display-dark.json5 +95 -95
  108. package/src/tokens/functional/color/dark/overrides/dark.dimmed.json5 +0 -8
  109. package/src/tokens/functional/color/dark/overrides/dark.high-contrast.json5 +39 -26
  110. package/src/tokens/functional/color/dark/overrides/dark.protanopia-deuteranopia.json5 +56 -30
  111. package/src/tokens/functional/color/dark/overrides/dark.tritanopia.json5 +37 -14
  112. package/src/tokens/functional/color/dark/patterns-dark.json5 +16 -4
  113. package/src/tokens/functional/color/dark/primitives-dark.json5 +1 -1
  114. package/src/tokens/functional/color/light/app-light.json5 +195 -85
  115. package/src/tokens/functional/color/light/data-vis-light.json5 +20 -20
  116. package/src/tokens/functional/color/light/overrides/light.high-contrast.json5 +25 -25
  117. package/src/tokens/functional/color/light/overrides/light.protanopia-deuteranopia.json5 +61 -33
  118. package/src/tokens/functional/color/light/overrides/light.tritanopia.json5 +62 -10
  119. package/src/tokens/functional/color/light/patterns-light.json5 +13 -1
  120. package/src/tokens/functional/motion/loading.json5 +1 -1
  121. package/src/tokens/functional/motion/patterns.json5 +9 -2
package/dist/css/functional/themes/light-colorblind.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: #54aeff66;
11
- --diffBlob-addition-bgColor-line: #ddf4ff80;
12
- --diffBlob-addition-bgColor-word: #54aeff66;
13
- --diffBlob-deletion-fgColor-text: #1f2328;
14
- --diffBlob-deletion-fgColor-num: #1f2328;
15
- --diffBlob-deletion-bgColor-num: #fb8f4466;
16
- --diffBlob-deletion-bgColor-line: #fff1e580;
17
- --diffBlob-deletion-bgColor-word: #ffb77c80;
18
- --diffBlob-hunk-bgColor-num: #54aeff66;
8
+ --diffBlob-additionLine-fgColor: #1f2328;
9
+ --diffBlob-additionLine-bgColor: #ddf4ff;
10
+ --diffBlob-additionWord-fgColor: #1f2328;
11
+ --diffBlob-additionWord-bgColor: #b6e3ff;
12
+ --diffBlob-additionNum-fgColor: #1f2328;
13
+ --diffBlob-additionNum-bgColor: #b6e3ff;
14
+ --diffBlob-deletionLine-fgColor: #1f2328;
15
+ --diffBlob-deletionLine-bgColor: #fff1e5;
16
+ --diffBlob-deletionWord-fgColor: #1f2328;
17
+ --diffBlob-deletionWord-bgColor: #ffd8b5;
18
+ --diffBlob-deletionNum-fgColor: #1f2328;
19
+ --diffBlob-deletionNum-bgColor: #ffd8b5;
20
+ --diffBlob-hunkLine-bgColor: #f6f8fa;
21
+ --diffBlob-hunkLine-fgColor: #59636e;
22
+ --diffBlob-hunkNum-fgColor-rest: #1f2328;
23
+ --diffBlob-hunkNum-fgColor-hover: #1f2328;
24
+ --diffBlob-hunkNum-bgColor-rest: #e6eaef;
25
+ --diffBlob-hunkNum-bgColor-hover: #c8d1da;
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;
@@ -186,8 +195,8 @@
186
195
  --control-transparent-borderColor-rest: #ffffff00;
187
196
  --control-transparent-borderColor-hover: #ffffff00;
188
197
  --control-transparent-borderColor-active: #ffffff00;
189
- --control-danger-fgColor-rest: #be4e02;
190
- --control-danger-fgColor-hover: #be4e02;
198
+ --control-danger-fgColor-rest: #bc4c00;
199
+ --control-danger-fgColor-hover: #bc4c00;
191
200
  --control-danger-bgColor-hover: #fff1e5;
192
201
  --control-danger-bgColor-active: #fff1e566;
193
202
  --control-checked-bgColor-rest: #0969da;
@@ -242,6 +251,7 @@
242
251
  --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
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;
@@ -264,11 +274,11 @@
264
274
  --button-outline-borderColor-hover: #1f232826;
265
275
  --button-outline-borderColor-active: #1f232826;
266
276
  --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
267
- --button-danger-fgColor-rest: #be4e02;
277
+ --button-danger-fgColor-rest: #bc4c00;
268
278
  --button-danger-fgColor-hover: #ffffff;
269
279
  --button-danger-fgColor-active: #ffffff;
270
- --button-danger-fgColor-disabled: #be4e0280;
271
- --button-danger-iconColor-rest: #be4e02;
280
+ --button-danger-fgColor-disabled: #bc4c0080;
281
+ --button-danger-iconColor-rest: #bc4c00;
272
282
  --button-danger-iconColor-hover: #ffffff;
273
283
  --button-danger-bgColor-rest: #f6f8fa;
274
284
  --button-danger-bgColor-hover: #953800;
@@ -295,7 +305,7 @@
295
305
  --buttonCounter-danger-bgColor-rest: #bc4c001a;
296
306
  --buttonCounter-danger-fgColor-rest: #c21c2c;
297
307
  --buttonCounter-danger-fgColor-hover: #ffffff;
298
- --buttonCounter-danger-fgColor-disabled: #be4e0280;
308
+ --buttonCounter-danger-fgColor-disabled: #bc4c0080;
299
309
  --reactionButton-selected-bgColor-rest: #ddf4ff;
300
310
  --reactionButton-selected-bgColor-hover: #caecff;
301
311
  --reactionButton-selected-fgColor-rest: #0969da;
@@ -447,7 +457,7 @@
447
457
  --fgColor-open: #bc4c00;
448
458
  --fgColor-attention: #9a6700;
449
459
  --fgColor-severe: #bc4c00;
450
- --fgColor-danger: #be4e02;
460
+ --fgColor-danger: #bc4c00;
451
461
  --fgColor-closed: #59636e;
452
462
  --fgColor-done: #8250df;
453
463
  --fgColor-upsell: #8250df;
@@ -467,8 +477,8 @@
467
477
  --bgColor-accent-emphasis: #0969da;
468
478
  --bgColor-success-muted: #ddf4ff;
469
479
  --bgColor-success-emphasis: #0969da;
470
- --bgColor-open-muted: #fb8f4466;
471
- --bgColor-open-emphasis: #e16f24;
480
+ --bgColor-open-muted: #fff1e5;
481
+ --bgColor-open-emphasis: #bc4c00;
472
482
  --bgColor-attention-muted: #fff8c5;
473
483
  --bgColor-attention-emphasis: #9a6700;
474
484
  --bgColor-severe-muted: #fff1e5;
@@ -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: #54aeff66;
580
- --diffBlob-addition-bgColor-line: #ddf4ff80;
581
- --diffBlob-addition-bgColor-word: #54aeff66;
582
- --diffBlob-deletion-fgColor-text: #1f2328;
583
- --diffBlob-deletion-fgColor-num: #1f2328;
584
- --diffBlob-deletion-bgColor-num: #fb8f4466;
585
- --diffBlob-deletion-bgColor-line: #fff1e580;
586
- --diffBlob-deletion-bgColor-word: #ffb77c80;
587
- --diffBlob-hunk-bgColor-num: #54aeff66;
587
+ --diffBlob-additionLine-fgColor: #1f2328;
588
+ --diffBlob-additionLine-bgColor: #ddf4ff;
589
+ --diffBlob-additionWord-fgColor: #1f2328;
590
+ --diffBlob-additionWord-bgColor: #b6e3ff;
591
+ --diffBlob-additionNum-fgColor: #1f2328;
592
+ --diffBlob-additionNum-bgColor: #b6e3ff;
593
+ --diffBlob-deletionLine-fgColor: #1f2328;
594
+ --diffBlob-deletionLine-bgColor: #fff1e5;
595
+ --diffBlob-deletionWord-fgColor: #1f2328;
596
+ --diffBlob-deletionWord-bgColor: #ffd8b5;
597
+ --diffBlob-deletionNum-fgColor: #1f2328;
598
+ --diffBlob-deletionNum-bgColor: #ffd8b5;
599
+ --diffBlob-hunkLine-bgColor: #f6f8fa;
600
+ --diffBlob-hunkLine-fgColor: #59636e;
601
+ --diffBlob-hunkNum-fgColor-rest: #1f2328;
602
+ --diffBlob-hunkNum-fgColor-hover: #1f2328;
603
+ --diffBlob-hunkNum-bgColor-rest: #e6eaef;
604
+ --diffBlob-hunkNum-bgColor-hover: #c8d1da;
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;
@@ -755,8 +774,8 @@
755
774
  --control-transparent-borderColor-rest: #ffffff00;
756
775
  --control-transparent-borderColor-hover: #ffffff00;
757
776
  --control-transparent-borderColor-active: #ffffff00;
758
- --control-danger-fgColor-rest: #be4e02;
759
- --control-danger-fgColor-hover: #be4e02;
777
+ --control-danger-fgColor-rest: #bc4c00;
778
+ --control-danger-fgColor-hover: #bc4c00;
760
779
  --control-danger-bgColor-hover: #fff1e5;
761
780
  --control-danger-bgColor-active: #fff1e566;
762
781
  --control-checked-bgColor-rest: #0969da;
@@ -811,6 +830,7 @@
811
830
  --button-primary-shadow-selected: inset 0px 1px 0px 0px #0021554d;
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;
@@ -833,11 +853,11 @@
833
853
  --button-outline-borderColor-hover: #1f232826;
834
854
  --button-outline-borderColor-active: #1f232826;
835
855
  --button-outline-shadow-selected: inset 0px 1px 0px 0px #00215533;
836
- --button-danger-fgColor-rest: #be4e02;
856
+ --button-danger-fgColor-rest: #bc4c00;
837
857
  --button-danger-fgColor-hover: #ffffff;
838
858
  --button-danger-fgColor-active: #ffffff;
839
- --button-danger-fgColor-disabled: #be4e0280;
840
- --button-danger-iconColor-rest: #be4e02;
859
+ --button-danger-fgColor-disabled: #bc4c0080;
860
+ --button-danger-iconColor-rest: #bc4c00;
841
861
  --button-danger-iconColor-hover: #ffffff;
842
862
  --button-danger-bgColor-rest: #f6f8fa;
843
863
  --button-danger-bgColor-hover: #953800;
@@ -864,7 +884,7 @@
864
884
  --buttonCounter-danger-bgColor-rest: #bc4c001a;
865
885
  --buttonCounter-danger-fgColor-rest: #c21c2c;
866
886
  --buttonCounter-danger-fgColor-hover: #ffffff;
867
- --buttonCounter-danger-fgColor-disabled: #be4e0280;
887
+ --buttonCounter-danger-fgColor-disabled: #bc4c0080;
868
888
  --reactionButton-selected-bgColor-rest: #ddf4ff;
869
889
  --reactionButton-selected-bgColor-hover: #caecff;
870
890
  --reactionButton-selected-fgColor-rest: #0969da;
@@ -1016,7 +1036,7 @@
1016
1036
  --fgColor-open: #bc4c00;
1017
1037
  --fgColor-attention: #9a6700;
1018
1038
  --fgColor-severe: #bc4c00;
1019
- --fgColor-danger: #be4e02;
1039
+ --fgColor-danger: #bc4c00;
1020
1040
  --fgColor-closed: #59636e;
1021
1041
  --fgColor-done: #8250df;
1022
1042
  --fgColor-upsell: #8250df;
@@ -1036,8 +1056,8 @@
1036
1056
  --bgColor-accent-emphasis: #0969da;
1037
1057
  --bgColor-success-muted: #ddf4ff;
1038
1058
  --bgColor-success-emphasis: #0969da;
1039
- --bgColor-open-muted: #fb8f4466;
1040
- --bgColor-open-emphasis: #e16f24;
1059
+ --bgColor-open-muted: #fff1e5;
1060
+ --bgColor-open-emphasis: #bc4c00;
1041
1061
  --bgColor-attention-muted: #fff8c5;
1042
1062
  --bgColor-attention-emphasis: #9a6700;
1043
1063
  --bgColor-severe-muted: #fff1e5;
package/dist/css/functional/themes/light-high-contrast.css CHANGED
@@ -5,18 +5,27 @@
5
5
  --topicTag-borderColor: #0349b4;
6
6
  --highlight-neutral-bgColor: #fcf7be;
7
7
  --page-header-bgColor: #e6eaef;
8
- --diffBlob-addition-fgColor-text: #ffffff;
9
- --diffBlob-addition-fgColor-num: #010409;
10
- --diffBlob-addition-bgColor-num: #c2f9cd;
11
- --diffBlob-addition-bgColor-line: #d2fedb;
12
- --diffBlob-addition-bgColor-word: #117f32;
13
- --diffBlob-deletion-fgColor-text: #ffffff;
14
- --diffBlob-deletion-fgColor-num: #010409;
15
- --diffBlob-deletion-bgColor-num: #ffc1bc;
16
- --diffBlob-deletion-bgColor-line: #fff0ee;
17
- --diffBlob-deletion-bgColor-word: #a0111f;
18
- --diffBlob-hunk-bgColor-num: #9cd7ff;
19
- --diffBlob-expander-iconColor: #454c54;
8
+ --diffBlob-additionLine-fgColor: #010409;
9
+ --diffBlob-additionLine-bgColor: #d2fedb;
10
+ --diffBlob-additionWord-fgColor: #ffffff;
11
+ --diffBlob-additionWord-bgColor: #055d20;
12
+ --diffBlob-additionNum-fgColor: #010409;
13
+ --diffBlob-additionNum-bgColor: #82e596;
14
+ --diffBlob-deletionLine-fgColor: #010409;
15
+ --diffBlob-deletionLine-bgColor: #fff0ee;
16
+ --diffBlob-deletionWord-fgColor: #ffffff;
17
+ --diffBlob-deletionWord-bgColor: #a0111f;
18
+ --diffBlob-deletionNum-fgColor: #010409;
19
+ --diffBlob-deletionNum-bgColor: #ffc1bc;
20
+ --diffBlob-hunkLine-bgColor: #dff7ff;
21
+ --diffBlob-hunkLine-fgColor: #454c54;
22
+ --diffBlob-hunkNum-fgColor-rest: #010409;
23
+ --diffBlob-hunkNum-fgColor-hover: #ffffff;
24
+ --diffBlob-hunkNum-bgColor-rest: #9cd7ff;
25
+ --diffBlob-hunkNum-bgColor-hover: #0349b4;
26
+ --diffBlob-emptyNum-bgColor: #e6eaef;
27
+ --diffBlob-emptyLine-bgColor: #e6eaef;
28
+ --diffBlob-expander-iconColor: #010409;
20
29
  --codeMirror-fgColor: #010409;
21
30
  --codeMirror-bgColor: #ffffff;
22
31
  --codeMirror-gutters-bgColor: #ffffff;
@@ -242,6 +251,7 @@
242
251
  --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
243
252
  --button-invisible-fgColor-rest: #25292e;
244
253
  --button-invisible-fgColor-hover: #393f46;
254
+ --button-invisible-fgColor-active: #25292e;
245
255
  --button-invisible-fgColor-disabled: #59636e;
246
256
  --button-invisible-iconColor-rest: #454c54;
247
257
  --button-invisible-iconColor-hover: #393f46;
@@ -574,18 +584,27 @@
574
584
  --topicTag-borderColor: #0349b4;
575
585
  --highlight-neutral-bgColor: #fcf7be;
576
586
  --page-header-bgColor: #e6eaef;
577
- --diffBlob-addition-fgColor-text: #ffffff;
578
- --diffBlob-addition-fgColor-num: #010409;
579
- --diffBlob-addition-bgColor-num: #c2f9cd;
580
- --diffBlob-addition-bgColor-line: #d2fedb;
581
- --diffBlob-addition-bgColor-word: #117f32;
582
- --diffBlob-deletion-fgColor-text: #ffffff;
583
- --diffBlob-deletion-fgColor-num: #010409;
584
- --diffBlob-deletion-bgColor-num: #ffc1bc;
585
- --diffBlob-deletion-bgColor-line: #fff0ee;
586
- --diffBlob-deletion-bgColor-word: #a0111f;
587
- --diffBlob-hunk-bgColor-num: #9cd7ff;
588
- --diffBlob-expander-iconColor: #454c54;
587
+ --diffBlob-additionLine-fgColor: #010409;
588
+ --diffBlob-additionLine-bgColor: #d2fedb;
589
+ --diffBlob-additionWord-fgColor: #ffffff;
590
+ --diffBlob-additionWord-bgColor: #055d20;
591
+ --diffBlob-additionNum-fgColor: #010409;
592
+ --diffBlob-additionNum-bgColor: #82e596;
593
+ --diffBlob-deletionLine-fgColor: #010409;
594
+ --diffBlob-deletionLine-bgColor: #fff0ee;
595
+ --diffBlob-deletionWord-fgColor: #ffffff;
596
+ --diffBlob-deletionWord-bgColor: #a0111f;
597
+ --diffBlob-deletionNum-fgColor: #010409;
598
+ --diffBlob-deletionNum-bgColor: #ffc1bc;
599
+ --diffBlob-hunkLine-bgColor: #dff7ff;
600
+ --diffBlob-hunkLine-fgColor: #454c54;
601
+ --diffBlob-hunkNum-fgColor-rest: #010409;
602
+ --diffBlob-hunkNum-fgColor-hover: #ffffff;
603
+ --diffBlob-hunkNum-bgColor-rest: #9cd7ff;
604
+ --diffBlob-hunkNum-bgColor-hover: #0349b4;
605
+ --diffBlob-emptyNum-bgColor: #e6eaef;
606
+ --diffBlob-emptyLine-bgColor: #e6eaef;
607
+ --diffBlob-expander-iconColor: #010409;
589
608
  --codeMirror-fgColor: #010409;
590
609
  --codeMirror-bgColor: #ffffff;
591
610
  --codeMirror-gutters-bgColor: #ffffff;
@@ -811,6 +830,7 @@
811
830
  --button-primary-shadow-selected: inset 0px 1px 0px 0px #00230b4d;
812
831
  --button-invisible-fgColor-rest: #25292e;
813
832
  --button-invisible-fgColor-hover: #393f46;
833
+ --button-invisible-fgColor-active: #25292e;
814
834
  --button-invisible-fgColor-disabled: #59636e;
815
835
  --button-invisible-iconColor-rest: #454c54;
816
836
  --button-invisible-iconColor-hover: #393f46;
package/dist/css/functional/themes/light-tritanopia.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: #d5f1ff;
11
- --diffBlob-addition-bgColor-line: #ddf4ff;
12
- --diffBlob-addition-bgColor-word: #b6e3ff;
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: #ddf4ff;
10
+ --diffBlob-additionWord-fgColor: #1f2328;
11
+ --diffBlob-additionWord-bgColor: #b6e3ff;
12
+ --diffBlob-additionNum-fgColor: #1f2328;
13
+ --diffBlob-additionNum-bgColor: #b6e3ff;
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: #f6f8fa;
21
+ --diffBlob-hunkLine-fgColor: #59636e;
22
+ --diffBlob-hunkNum-fgColor-rest: #1f2328;
23
+ --diffBlob-hunkNum-fgColor-hover: #1f2328;
24
+ --diffBlob-hunkNum-bgColor-rest: #e6eaef;
25
+ --diffBlob-hunkNum-bgColor-hover: #c8d1da;
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 #0021554d;
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: #d5f1ff;
580
- --diffBlob-addition-bgColor-line: #ddf4ff;
581
- --diffBlob-addition-bgColor-word: #b6e3ff;
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: #ddf4ff;
589
+ --diffBlob-additionWord-fgColor: #1f2328;
590
+ --diffBlob-additionWord-bgColor: #b6e3ff;
591
+ --diffBlob-additionNum-fgColor: #1f2328;
592
+ --diffBlob-additionNum-bgColor: #b6e3ff;
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: #f6f8fa;
600
+ --diffBlob-hunkLine-fgColor: #59636e;
601
+ --diffBlob-hunkNum-fgColor-rest: #1f2328;
602
+ --diffBlob-hunkNum-fgColor-hover: #1f2328;
603
+ --diffBlob-hunkNum-bgColor-rest: #e6eaef;
604
+ --diffBlob-hunkNum-bgColor-hover: #c8d1da;
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 #0021554d;
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/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,48 +1,48 @@
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
- --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
- --text-codeBlock-lineHeight: 1.5385;
8
- --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
- --text-caption-lineHeight: 1.3333;
12
- --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
- --text-body-lineHeight-small: 1.6666;
18
- --text-body-lineHeight-medium: 1.4285;
19
- --text-body-lineHeight-large: 1.5;
20
- --text-body-size-small: 0.75rem;
21
- --text-body-size-medium: 0.875rem;
22
- --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
- --text-subtitle-lineHeight: 1.6;
2
+ --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
3
+ --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
4
+ --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
5
+ --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
6
+ --text-display-lineBoxHeight: 1.4;
7
+ --text-display-size: 2.5rem;
8
+ --text-display-lineHeight: 1.4;
9
+ --text-title-size-large: 2rem;
10
+ --text-title-size-medium: 1.25rem;
11
+ --text-title-size-small: 1rem;
12
+ --text-title-lineHeight-large: 1.5;
13
+ --text-title-lineHeight-medium: 1.6;
14
+ --text-title-lineHeight-small: 1.5;
26
15
  --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);
16
+ --text-subtitle-lineHeight: 1.6;
17
+ --text-body-size-large: 1rem;
18
+ --text-body-size-medium: 0.875rem;
19
+ --text-body-size-small: 0.75rem;
20
+ --text-body-lineHeight-large: 1.5;
21
+ --text-body-lineHeight-medium: 1.4285;
22
+ --text-body-lineHeight-small: 1.6666;
23
+ --text-caption-size: 0.75rem;
24
+ --text-caption-lineHeight: 1.3333;
25
+ --text-codeBlock-size: 0.8125rem;
26
+ --text-codeBlock-lineHeight: 1.5385;
27
+ --text-codeInline-size: 0.9285em;
28
+ --text-display-weight: var(--base-text-weight-medium);
32
29
  --text-title-weight-large: var(--base-text-weight-semibold);
33
- --text-title-lineHeight-small: 1.5;
34
- --text-title-lineHeight-medium: 1.6;
35
- --text-title-lineHeight-large: 1.5;
36
- --text-title-size-small: 1rem;
37
- --text-title-size-medium: 1.25rem;
38
- --text-title-size-large: 2rem;
30
+ --text-title-weight-medium: var(--base-text-weight-semibold);
31
+ --text-title-weight-small: var(--base-text-weight-semibold);
32
+ --text-subtitle-weight: var(--base-text-weight-normal);
33
+ --text-body-weight: var(--base-text-weight-normal);
34
+ --text-caption-weight: var(--base-text-weight-normal);
35
+ --text-codeBlock-weight: var(--base-text-weight-normal);
36
+ --text-codeInline-weight: var(--base-text-weight-normal);
39
37
  --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
- --text-display-lineHeight: 1.4;
42
- --text-display-size: 2.5rem;
43
- --text-display-lineBoxHeight: 1.4;
44
- --fontStack-monospace: ui-monospace, SFMono-Regular, SF Mono, Menlo, Consolas, Liberation Mono, monospace;
45
- --fontStack-sansSerifDisplay: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
46
- --fontStack-sansSerif: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
47
- --fontStack-system: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
38
+ --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. */
39
+ --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. */
40
+ --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). */
41
+ --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). */
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-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. */
44
+ --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. */
45
+ --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. */
46
+ --text-codeBlock-shorthand: var(--text-codeBlock-weight) var(--text-codeBlock-size) / var(--text-codeBlock-lineHeight) var(--fontStack-monospace); /* Default style for rendering code blocks. */
47
+ --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. */
48
48
  }