@primer/primitives 11.4.1-rc.edbe0e39 → 11.5.0-rc.14eaeb12

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 (138) hide show
  1. package/DESIGN_TOKENS_SPEC.md +14 -5
  2. package/dist/build/schemas/borderToken.d.ts +45 -3
  3. package/dist/build/schemas/borderToken.js +2 -1
  4. package/dist/build/schemas/colorToken.d.ts +639 -30
  5. package/dist/build/schemas/colorToken.js +3 -2
  6. package/dist/build/schemas/colorW3cValue.d.ts +28 -0
  7. package/dist/build/schemas/colorW3cValue.js +42 -0
  8. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  9. package/dist/build/schemas/dimensionToken.d.ts +1 -1
  10. package/dist/build/schemas/durationToken.d.ts +1 -1
  11. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  12. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  13. package/dist/build/schemas/gradientToken.d.ts +23 -2
  14. package/dist/build/schemas/gradientToken.js +2 -1
  15. package/dist/build/schemas/numberToken.d.ts +1 -1
  16. package/dist/build/schemas/shadowToken.d.ts +1079 -43
  17. package/dist/build/schemas/shadowToken.js +8 -2
  18. package/dist/build/schemas/stringToken.d.ts +1 -1
  19. package/dist/build/schemas/tokenType.d.ts +1 -1
  20. package/dist/build/schemas/transitionToken.d.ts +1 -1
  21. package/dist/build/schemas/typographyToken.d.ts +1 -1
  22. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  23. package/dist/build/transformers/borderToCss.js +3 -1
  24. package/dist/build/transformers/colorAlphaToCss.js +6 -3
  25. package/dist/build/transformers/colorToHex.js +5 -2
  26. package/dist/build/transformers/colorToRgbAlpha.js +5 -2
  27. package/dist/build/transformers/colorToRgbaFloat.js +5 -0
  28. package/dist/build/transformers/durationToCss.js +4 -4
  29. package/dist/build/transformers/gradientToCss.js +2 -1
  30. package/dist/build/transformers/shadowToCss.js +4 -1
  31. package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
  32. package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
  33. package/dist/build/types/borderTokenValue.d.ts +2 -1
  34. package/dist/build/types/shadowTokenValue.d.ts +2 -1
  35. package/dist/css/base/motion/motion.css +1 -1
  36. package/dist/css/functional/size/radius.css +1 -1
  37. package/dist/css/functional/size/size-coarse.css +1 -0
  38. package/dist/css/functional/size/size-fine.css +1 -0
  39. package/dist/css/functional/size/size.css +5 -0
  40. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +22 -10
  41. package/dist/css/functional/themes/dark-colorblind.css +22 -10
  42. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +22 -10
  43. package/dist/css/functional/themes/dark-dimmed.css +22 -10
  44. package/dist/css/functional/themes/dark-high-contrast.css +22 -10
  45. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +22 -10
  46. package/dist/css/functional/themes/dark-tritanopia.css +22 -10
  47. package/dist/css/functional/themes/dark.css +22 -10
  48. package/dist/css/functional/themes/light-colorblind-high-contrast.css +14 -2
  49. package/dist/css/functional/themes/light-colorblind.css +20 -8
  50. package/dist/css/functional/themes/light-high-contrast.css +14 -2
  51. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +14 -2
  52. package/dist/css/functional/themes/light-tritanopia.css +20 -8
  53. package/dist/css/functional/themes/light.css +20 -8
  54. package/dist/docs/functional/size/radius.json +2 -2
  55. package/dist/docs/functional/size/size-coarse.json +55 -2
  56. package/dist/docs/functional/size/size-fine.json +55 -2
  57. package/dist/docs/functional/size/size.json +135 -0
  58. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +2502 -372
  59. package/dist/docs/functional/themes/dark-colorblind.json +2492 -370
  60. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +2355 -205
  61. package/dist/docs/functional/themes/dark-dimmed.json +2382 -212
  62. package/dist/docs/functional/themes/dark-high-contrast.json +2507 -373
  63. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +2517 -375
  64. package/dist/docs/functional/themes/dark-tritanopia.json +2499 -353
  65. package/dist/docs/functional/themes/dark.json +2501 -371
  66. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +2354 -204
  67. package/dist/docs/functional/themes/light-colorblind.json +2344 -202
  68. package/dist/docs/functional/themes/light-high-contrast.json +2359 -205
  69. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +2359 -205
  70. package/dist/docs/functional/themes/light-tritanopia.json +2354 -204
  71. package/dist/docs/functional/themes/light.json +2359 -205
  72. package/dist/fallbacks/functional/size/size-coarse.json +2 -1
  73. package/dist/fallbacks/functional/size/size-fine.json +2 -1
  74. package/dist/fallbacks/functional/size/size.json +5 -0
  75. package/dist/figma/dimension/dimension.json +56 -1
  76. package/dist/figma/themes/dark-colorblind.json +49 -1
  77. package/dist/figma/themes/dark-dimmed.json +51 -3
  78. package/dist/figma/themes/dark-high-contrast.json +49 -1
  79. package/dist/figma/themes/dark-tritanopia.json +49 -1
  80. package/dist/figma/themes/dark.json +49 -1
  81. package/dist/figma/themes/light-colorblind.json +49 -1
  82. package/dist/figma/themes/light-high-contrast.json +49 -1
  83. package/dist/figma/themes/light-tritanopia.json +49 -1
  84. package/dist/figma/themes/light.json +49 -1
  85. package/dist/internalCss/dark-colorblind-high-contrast.css +22 -10
  86. package/dist/internalCss/dark-colorblind.css +22 -10
  87. package/dist/internalCss/dark-dimmed-high-contrast.css +22 -10
  88. package/dist/internalCss/dark-dimmed.css +22 -10
  89. package/dist/internalCss/dark-high-contrast.css +22 -10
  90. package/dist/internalCss/dark-tritanopia-high-contrast.css +22 -10
  91. package/dist/internalCss/dark-tritanopia.css +22 -10
  92. package/dist/internalCss/dark.css +22 -10
  93. package/dist/internalCss/light-colorblind-high-contrast.css +14 -2
  94. package/dist/internalCss/light-colorblind.css +20 -8
  95. package/dist/internalCss/light-high-contrast.css +14 -2
  96. package/dist/internalCss/light-tritanopia-high-contrast.css +14 -2
  97. package/dist/internalCss/light-tritanopia.css +20 -8
  98. package/dist/internalCss/light.css +20 -8
  99. package/dist/styleLint/functional/size/radius.json +2 -2
  100. package/dist/styleLint/functional/size/size-coarse.json +57 -4
  101. package/dist/styleLint/functional/size/size-fine.json +57 -4
  102. package/dist/styleLint/functional/size/size.json +135 -0
  103. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +2491 -349
  104. package/dist/styleLint/functional/themes/dark-colorblind.json +2481 -347
  105. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +2516 -354
  106. package/dist/styleLint/functional/themes/dark-dimmed.json +2543 -361
  107. package/dist/styleLint/functional/themes/dark-high-contrast.json +2496 -350
  108. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +2506 -352
  109. package/dist/styleLint/functional/themes/dark-tritanopia.json +2511 -353
  110. package/dist/styleLint/functional/themes/dark.json +2491 -349
  111. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +2514 -352
  112. package/dist/styleLint/functional/themes/light-colorblind.json +2505 -351
  113. package/dist/styleLint/functional/themes/light-high-contrast.json +2371 -205
  114. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +2519 -353
  115. package/dist/styleLint/functional/themes/light-tritanopia.json +2515 -353
  116. package/dist/styleLint/functional/themes/light.json +2520 -354
  117. package/package.json +4 -3
  118. package/src/tokens/base/color/dark/dark.dimmed.json5 +405 -81
  119. package/src/tokens/base/color/dark/dark.high-contrast.json5 +405 -81
  120. package/src/tokens/base/color/dark/dark.json5 +475 -95
  121. package/src/tokens/base/color/dark/display-dark.json5 +960 -192
  122. package/src/tokens/base/color/light/display-light.json5 +960 -192
  123. package/src/tokens/base/color/light/light.high-contrast.json5 +405 -81
  124. package/src/tokens/base/color/light/light.json5 +475 -95
  125. package/src/tokens/base/size/size.json5 +194 -194
  126. package/src/tokens/component/button.json5 +368 -65
  127. package/src/tokens/component/reactionButton.json5 +20 -4
  128. package/src/tokens/functional/border/border.json5 +29 -1
  129. package/src/tokens/functional/color/bgColor.json5 +10 -2
  130. package/src/tokens/functional/color/borderColor.json5 +8 -1
  131. package/src/tokens/functional/color/control.json5 +160 -32
  132. package/src/tokens/functional/color/fgColor.json5 +5 -1
  133. package/src/tokens/functional/color/syntax.json5 +10 -2
  134. package/src/tokens/functional/shadow/shadow.json5 +576 -0
  135. package/src/tokens/functional/size/radius.json5 +1 -1
  136. package/src/tokens/functional/size/size-coarse.json5 +15 -0
  137. package/src/tokens/functional/size/size-fine.json5 +15 -0
  138. package/src/tokens/functional/size/size.json5 +50 -0
package/dist/docs/functional/size/size.json CHANGED
@@ -83,6 +83,33 @@
83
83
  "value": "0.625rem",
84
84
  "type": "dimension"
85
85
  },
86
+ "control-large-paddingInline-condensed": {
87
+ "key": "{control.large.paddingInline.condensed}",
88
+ "$extensions": {
89
+ "org.primer.figma": {
90
+ "collection": "pattern/size",
91
+ "scopes": ["gap"]
92
+ }
93
+ },
94
+ "filePath": "src/tokens/functional/size/size.json5",
95
+ "isSource": true,
96
+ "original": {
97
+ "$value": "{base.size.8}",
98
+ "$type": "dimension",
99
+ "$extensions": {
100
+ "org.primer.figma": {
101
+ "collection": "pattern/size",
102
+ "scopes": ["gap"]
103
+ }
104
+ },
105
+ "key": "{control.large.paddingInline.condensed}"
106
+ },
107
+ "name": "control-large-paddingInline-condensed",
108
+ "attributes": {},
109
+ "path": ["control", "large", "paddingInline", "condensed"],
110
+ "value": "0.5rem",
111
+ "type": "dimension"
112
+ },
86
113
  "control-large-paddingInline-normal": {
87
114
  "key": "{control.large.paddingInline.normal}",
88
115
  "$extensions": {
@@ -545,6 +572,33 @@
545
572
  "value": "0.75rem",
546
573
  "type": "dimension"
547
574
  },
575
+ "control-small-paddingInline-spacious": {
576
+ "key": "{control.small.paddingInline.spacious}",
577
+ "$extensions": {
578
+ "org.primer.figma": {
579
+ "collection": "pattern/size",
580
+ "scopes": ["gap"]
581
+ }
582
+ },
583
+ "filePath": "src/tokens/functional/size/size.json5",
584
+ "isSource": true,
585
+ "original": {
586
+ "$value": "{base.size.16}",
587
+ "$type": "dimension",
588
+ "$extensions": {
589
+ "org.primer.figma": {
590
+ "collection": "pattern/size",
591
+ "scopes": ["gap"]
592
+ }
593
+ },
594
+ "key": "{control.small.paddingInline.spacious}"
595
+ },
596
+ "name": "control-small-paddingInline-spacious",
597
+ "attributes": {},
598
+ "path": ["control", "small", "paddingInline", "spacious"],
599
+ "value": "1rem",
600
+ "type": "dimension"
601
+ },
548
602
  "control-small-size": {
549
603
  "key": "{control.small.size}",
550
604
  "$extensions": {
@@ -656,6 +710,33 @@
656
710
  "value": "0.875rem",
657
711
  "type": "dimension"
658
712
  },
713
+ "control-xlarge-paddingInline-condensed": {
714
+ "key": "{control.xlarge.paddingInline.condensed}",
715
+ "$extensions": {
716
+ "org.primer.figma": {
717
+ "collection": "pattern/size",
718
+ "scopes": ["gap"]
719
+ }
720
+ },
721
+ "filePath": "src/tokens/functional/size/size.json5",
722
+ "isSource": true,
723
+ "original": {
724
+ "$value": "{base.size.8}",
725
+ "$type": "dimension",
726
+ "$extensions": {
727
+ "org.primer.figma": {
728
+ "collection": "pattern/size",
729
+ "scopes": ["gap"]
730
+ }
731
+ },
732
+ "key": "{control.xlarge.paddingInline.condensed}"
733
+ },
734
+ "name": "control-xlarge-paddingInline-condensed",
735
+ "attributes": {},
736
+ "path": ["control", "xlarge", "paddingInline", "condensed"],
737
+ "value": "0.5rem",
738
+ "type": "dimension"
739
+ },
659
740
  "control-xlarge-paddingInline-normal": {
660
741
  "key": "{control.xlarge.paddingInline.normal}",
661
742
  "$extensions": {
@@ -1010,6 +1091,33 @@
1010
1091
  "value": "0.75rem",
1011
1092
  "type": "dimension"
1012
1093
  },
1094
+ "controlStack-medium-gap-auto": {
1095
+ "key": "{controlStack.medium.gap.auto}",
1096
+ "$extensions": {
1097
+ "org.primer.figma": {
1098
+ "collection": "pattern/size",
1099
+ "scopes": ["gap"]
1100
+ }
1101
+ },
1102
+ "filePath": "src/tokens/functional/size/size.json5",
1103
+ "isSource": true,
1104
+ "original": {
1105
+ "$value": "{base.size.8}",
1106
+ "$type": "dimension",
1107
+ "$extensions": {
1108
+ "org.primer.figma": {
1109
+ "collection": "pattern/size",
1110
+ "scopes": ["gap"]
1111
+ }
1112
+ },
1113
+ "key": "{controlStack.medium.gap.auto}"
1114
+ },
1115
+ "name": "controlStack-medium-gap-auto",
1116
+ "attributes": {},
1117
+ "path": ["controlStack", "medium", "gap", "auto"],
1118
+ "value": "0.5rem",
1119
+ "type": "dimension"
1120
+ },
1013
1121
  "controlStack-medium-gap-condensed": {
1014
1122
  "key": "{controlStack.medium.gap.condensed}",
1015
1123
  "$extensions": {
@@ -1064,6 +1172,33 @@
1064
1172
  "value": "0.75rem",
1065
1173
  "type": "dimension"
1066
1174
  },
1175
+ "controlStack-small-gap-auto": {
1176
+ "key": "{controlStack.small.gap.auto}",
1177
+ "$extensions": {
1178
+ "org.primer.figma": {
1179
+ "collection": "pattern/size",
1180
+ "scopes": ["gap"]
1181
+ }
1182
+ },
1183
+ "filePath": "src/tokens/functional/size/size.json5",
1184
+ "isSource": true,
1185
+ "original": {
1186
+ "$value": "{base.size.8}",
1187
+ "$type": "dimension",
1188
+ "$extensions": {
1189
+ "org.primer.figma": {
1190
+ "collection": "pattern/size",
1191
+ "scopes": ["gap"]
1192
+ }
1193
+ },
1194
+ "key": "{controlStack.small.gap.auto}"
1195
+ },
1196
+ "name": "controlStack-small-gap-auto",
1197
+ "attributes": {},
1198
+ "path": ["controlStack", "small", "gap", "auto"],
1199
+ "value": "0.5rem",
1200
+ "type": "dimension"
1201
+ },
1067
1202
  "controlStack-small-gap-condensed": {
1068
1203
  "key": "{controlStack.small.gap.condensed}",
1069
1204
  "$extensions": {