@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/styleLint/functional/size/size.json CHANGED
@@ -83,6 +83,33 @@
83
83
  "attributes": {},
84
84
  "path": ["control", "large", "paddingBlock"]
85
85
  },
86
+ "control-large-paddingInline-condensed": {
87
+ "key": "{control.large.paddingInline.condensed}",
88
+ "$value": ["0.5rem", "8px"],
89
+ "$type": "dimension",
90
+ "$extensions": {
91
+ "org.primer.figma": {
92
+ "collection": "pattern/size",
93
+ "scopes": ["gap"]
94
+ }
95
+ },
96
+ "filePath": "src/tokens/functional/size/size.json5",
97
+ "isSource": true,
98
+ "original": {
99
+ "$value": "{base.size.8}",
100
+ "$type": "dimension",
101
+ "$extensions": {
102
+ "org.primer.figma": {
103
+ "collection": "pattern/size",
104
+ "scopes": ["gap"]
105
+ }
106
+ },
107
+ "key": "{control.large.paddingInline.condensed}"
108
+ },
109
+ "name": "control-large-paddingInline-condensed",
110
+ "attributes": {},
111
+ "path": ["control", "large", "paddingInline", "condensed"]
112
+ },
86
113
  "control-large-paddingInline-normal": {
87
114
  "key": "{control.large.paddingInline.normal}",
88
115
  "$value": ["0.75rem", "12px"],
@@ -545,6 +572,33 @@
545
572
  "attributes": {},
546
573
  "path": ["control", "small", "paddingInline", "normal"]
547
574
  },
575
+ "control-small-paddingInline-spacious": {
576
+ "key": "{control.small.paddingInline.spacious}",
577
+ "$value": ["1rem", "16px"],
578
+ "$type": "dimension",
579
+ "$extensions": {
580
+ "org.primer.figma": {
581
+ "collection": "pattern/size",
582
+ "scopes": ["gap"]
583
+ }
584
+ },
585
+ "filePath": "src/tokens/functional/size/size.json5",
586
+ "isSource": true,
587
+ "original": {
588
+ "$value": "{base.size.16}",
589
+ "$type": "dimension",
590
+ "$extensions": {
591
+ "org.primer.figma": {
592
+ "collection": "pattern/size",
593
+ "scopes": ["gap"]
594
+ }
595
+ },
596
+ "key": "{control.small.paddingInline.spacious}"
597
+ },
598
+ "name": "control-small-paddingInline-spacious",
599
+ "attributes": {},
600
+ "path": ["control", "small", "paddingInline", "spacious"]
601
+ },
548
602
  "control-small-size": {
549
603
  "key": "{control.small.size}",
550
604
  "$value": ["1.75rem", "28px"],
@@ -656,6 +710,33 @@
656
710
  "attributes": {},
657
711
  "path": ["control", "xlarge", "paddingBlock"]
658
712
  },
713
+ "control-xlarge-paddingInline-condensed": {
714
+ "key": "{control.xlarge.paddingInline.condensed}",
715
+ "$value": ["0.5rem", "8px"],
716
+ "$type": "dimension",
717
+ "$extensions": {
718
+ "org.primer.figma": {
719
+ "collection": "pattern/size",
720
+ "scopes": ["gap"]
721
+ }
722
+ },
723
+ "filePath": "src/tokens/functional/size/size.json5",
724
+ "isSource": true,
725
+ "original": {
726
+ "$value": "{base.size.8}",
727
+ "$type": "dimension",
728
+ "$extensions": {
729
+ "org.primer.figma": {
730
+ "collection": "pattern/size",
731
+ "scopes": ["gap"]
732
+ }
733
+ },
734
+ "key": "{control.xlarge.paddingInline.condensed}"
735
+ },
736
+ "name": "control-xlarge-paddingInline-condensed",
737
+ "attributes": {},
738
+ "path": ["control", "xlarge", "paddingInline", "condensed"]
739
+ },
659
740
  "control-xlarge-paddingInline-normal": {
660
741
  "key": "{control.xlarge.paddingInline.normal}",
661
742
  "$value": ["0.75rem", "12px"],
@@ -1010,6 +1091,33 @@
1010
1091
  "attributes": {},
1011
1092
  "path": ["controlStack", "large", "gap", "spacious"]
1012
1093
  },
1094
+ "controlStack-medium-gap-auto": {
1095
+ "key": "{controlStack.medium.gap.auto}",
1096
+ "$value": ["0.5rem", "8px"],
1097
+ "$type": "dimension",
1098
+ "$extensions": {
1099
+ "org.primer.figma": {
1100
+ "collection": "pattern/size",
1101
+ "scopes": ["gap"]
1102
+ }
1103
+ },
1104
+ "filePath": "src/tokens/functional/size/size.json5",
1105
+ "isSource": true,
1106
+ "original": {
1107
+ "$value": "{base.size.8}",
1108
+ "$type": "dimension",
1109
+ "$extensions": {
1110
+ "org.primer.figma": {
1111
+ "collection": "pattern/size",
1112
+ "scopes": ["gap"]
1113
+ }
1114
+ },
1115
+ "key": "{controlStack.medium.gap.auto}"
1116
+ },
1117
+ "name": "controlStack-medium-gap-auto",
1118
+ "attributes": {},
1119
+ "path": ["controlStack", "medium", "gap", "auto"]
1120
+ },
1013
1121
  "controlStack-medium-gap-condensed": {
1014
1122
  "key": "{controlStack.medium.gap.condensed}",
1015
1123
  "$value": ["0.5rem", "8px"],
@@ -1064,6 +1172,33 @@
1064
1172
  "attributes": {},
1065
1173
  "path": ["controlStack", "medium", "gap", "spacious"]
1066
1174
  },
1175
+ "controlStack-small-gap-auto": {
1176
+ "key": "{controlStack.small.gap.auto}",
1177
+ "$value": ["0.5rem", "8px"],
1178
+ "$type": "dimension",
1179
+ "$extensions": {
1180
+ "org.primer.figma": {
1181
+ "collection": "pattern/size",
1182
+ "scopes": ["gap"]
1183
+ }
1184
+ },
1185
+ "filePath": "src/tokens/functional/size/size.json5",
1186
+ "isSource": true,
1187
+ "original": {
1188
+ "$value": "{base.size.8}",
1189
+ "$type": "dimension",
1190
+ "$extensions": {
1191
+ "org.primer.figma": {
1192
+ "collection": "pattern/size",
1193
+ "scopes": ["gap"]
1194
+ }
1195
+ },
1196
+ "key": "{controlStack.small.gap.auto}"
1197
+ },
1198
+ "name": "controlStack-small-gap-auto",
1199
+ "attributes": {},
1200
+ "path": ["controlStack", "small", "gap", "auto"]
1201
+ },
1067
1202
  "controlStack-small-gap-condensed": {
1068
1203
  "key": "{controlStack.small.gap.condensed}",
1069
1204
  "$value": ["0.5rem", "8px"],