@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/src/tokens/base/size/size.json5 CHANGED
@@ -1,196 +1,196 @@
1
1
  {
2
- "base": {
3
- "size": {
4
- "2": {
5
- "$value": { "value": 2, "unit": "px" },
6
- "$type": "dimension",
7
- "$extensions": {
8
- "org.primer.figma": {
9
- "collection": "base/size",
10
- "scopes": ["size", "gap"]
11
- }
12
- }
13
- },
14
- "4": {
15
- "$value": { "value": 4, "unit": "px" },
16
- "$type": "dimension",
17
- "$extensions": {
18
- "org.primer.figma": {
19
- "collection": "base/size",
20
- "scopes": ["size", "gap"]
21
- }
22
- }
23
- },
24
- "6": {
25
- "$value": { "value": 6, "unit": "px" },
26
- "$type": "dimension",
27
- "$extensions": {
28
- "org.primer.figma": {
29
- "collection": "base/size",
30
- "scopes": ["size", "gap"]
31
- }
32
- }
33
- },
34
- "8": {
35
- "$value": { "value": 8, "unit": "px" },
36
- "$type": "dimension",
37
- "$extensions": {
38
- "org.primer.figma": {
39
- "collection": "base/size",
40
- "scopes": ["size", "gap"]
41
- }
42
- }
43
- },
44
- "12": {
45
- "$value": { "value": 12, "unit": "px" },
46
- "$type": "dimension",
47
- "$extensions": {
48
- "org.primer.figma": {
49
- "collection": "base/size",
50
- "scopes": ["size", "gap"]
51
- }
52
- }
53
- },
54
- "16": {
55
- "$value": { "value": 16, "unit": "px" },
56
- "$type": "dimension",
57
- "$extensions": {
58
- "org.primer.figma": {
59
- "collection": "base/size",
60
- "scopes": ["size", "gap"]
61
- }
62
- }
63
- },
64
- "20": {
65
- "$value": { "value": 20, "unit": "px" },
66
- "$type": "dimension",
67
- "$extensions": {
68
- "org.primer.figma": {
69
- "collection": "base/size",
70
- "scopes": ["size", "gap"]
71
- }
72
- }
73
- },
74
- "24": {
75
- "$value": { "value": 24, "unit": "px" },
76
- "$type": "dimension",
77
- "$extensions": {
78
- "org.primer.figma": {
79
- "collection": "base/size",
80
- "scopes": ["size", "gap"]
81
- }
82
- }
83
- },
84
- "28": {
85
- "$value": { "value": 28, "unit": "px" },
86
- "$type": "dimension",
87
- "$extensions": {
88
- "org.primer.figma": {
89
- "collection": "base/size",
90
- "scopes": ["size", "gap"]
91
- }
92
- }
93
- },
94
- "32": {
95
- "$value": { "value": 32, "unit": "px" },
96
- "$type": "dimension",
97
- "$extensions": {
98
- "org.primer.figma": {
99
- "collection": "base/size",
100
- "scopes": ["size", "gap"]
101
- }
102
- }
103
- },
104
- "36": {
105
- "$value": { "value": 36, "unit": "px" },
106
- "$type": "dimension",
107
- "$extensions": {
108
- "org.primer.figma": {
109
- "collection": "base/size",
110
- "scopes": ["size", "gap"]
111
- }
112
- }
113
- },
114
- "40": {
115
- "$value": { "value": 40, "unit": "px" },
116
- "$type": "dimension",
117
- "$extensions": {
118
- "org.primer.figma": {
119
- "collection": "base/size",
120
- "scopes": ["size", "gap"]
121
- }
122
- }
123
- },
124
- "44": {
125
- "$value": { "value": 44, "unit": "px" },
126
- "$type": "dimension",
127
- "$extensions": {
128
- "org.primer.figma": {
129
- "collection": "base/size",
130
- "scopes": ["size", "gap"]
131
- }
132
- }
133
- },
134
- "48": {
135
- "$value": { "value": 48, "unit": "px" },
136
- "$type": "dimension",
137
- "$extensions": {
138
- "org.primer.figma": {
139
- "collection": "base/size",
140
- "scopes": ["size", "gap"]
141
- }
142
- }
143
- },
144
- "64": {
145
- "$value": { "value": 64, "unit": "px" },
146
- "$type": "dimension",
147
- "$extensions": {
148
- "org.primer.figma": {
149
- "collection": "base/size",
150
- "scopes": ["size", "gap"]
151
- }
152
- }
153
- },
154
- "80": {
155
- "$value": { "value": 80, "unit": "px" },
156
- "$type": "dimension",
157
- "$extensions": {
158
- "org.primer.figma": {
159
- "collection": "base/size",
160
- "scopes": ["size", "gap"]
161
- }
162
- }
163
- },
164
- "96": {
165
- "$value": { "value": 96, "unit": "px" },
166
- "$type": "dimension",
167
- "$extensions": {
168
- "org.primer.figma": {
169
- "collection": "base/size",
170
- "scopes": ["size", "gap"]
171
- }
172
- }
173
- },
174
- "112": {
175
- "$value": { "value": 112, "unit": "px" },
176
- "$type": "dimension",
177
- "$extensions": {
178
- "org.primer.figma": {
179
- "collection": "base/size",
180
- "scopes": ["size", "gap"]
181
- }
182
- }
183
- },
184
- "128": {
185
- "$value": { "value": 128, "unit": "px" },
186
- "$type": "dimension",
187
- "$extensions": {
188
- "org.primer.figma": {
189
- "collection": "base/size",
190
- "scopes": ["size", "gap"]
191
- }
192
- }
193
- }
194
- }
195
- }
2
+ base: {
3
+ size: {
4
+ '2': {
5
+ $value: {value: 2, unit: 'px'},
6
+ $type: 'dimension',
7
+ $extensions: {
8
+ 'org.primer.figma': {
9
+ collection: 'base/size',
10
+ scopes: ['size', 'gap'],
11
+ },
12
+ },
13
+ },
14
+ '4': {
15
+ $value: {value: 4, unit: 'px'},
16
+ $type: 'dimension',
17
+ $extensions: {
18
+ 'org.primer.figma': {
19
+ collection: 'base/size',
20
+ scopes: ['size', 'gap'],
21
+ },
22
+ },
23
+ },
24
+ '6': {
25
+ $value: {value: 6, unit: 'px'},
26
+ $type: 'dimension',
27
+ $extensions: {
28
+ 'org.primer.figma': {
29
+ collection: 'base/size',
30
+ scopes: ['size', 'gap'],
31
+ },
32
+ },
33
+ },
34
+ '8': {
35
+ $value: {value: 8, unit: 'px'},
36
+ $type: 'dimension',
37
+ $extensions: {
38
+ 'org.primer.figma': {
39
+ collection: 'base/size',
40
+ scopes: ['size', 'gap'],
41
+ },
42
+ },
43
+ },
44
+ '12': {
45
+ $value: {value: 12, unit: 'px'},
46
+ $type: 'dimension',
47
+ $extensions: {
48
+ 'org.primer.figma': {
49
+ collection: 'base/size',
50
+ scopes: ['size', 'gap'],
51
+ },
52
+ },
53
+ },
54
+ '16': {
55
+ $value: {value: 16, unit: 'px'},
56
+ $type: 'dimension',
57
+ $extensions: {
58
+ 'org.primer.figma': {
59
+ collection: 'base/size',
60
+ scopes: ['size', 'gap'],
61
+ },
62
+ },
63
+ },
64
+ '20': {
65
+ $value: {value: 20, unit: 'px'},
66
+ $type: 'dimension',
67
+ $extensions: {
68
+ 'org.primer.figma': {
69
+ collection: 'base/size',
70
+ scopes: ['size', 'gap'],
71
+ },
72
+ },
73
+ },
74
+ '24': {
75
+ $value: {value: 24, unit: 'px'},
76
+ $type: 'dimension',
77
+ $extensions: {
78
+ 'org.primer.figma': {
79
+ collection: 'base/size',
80
+ scopes: ['size', 'gap'],
81
+ },
82
+ },
83
+ },
84
+ '28': {
85
+ $value: {value: 28, unit: 'px'},
86
+ $type: 'dimension',
87
+ $extensions: {
88
+ 'org.primer.figma': {
89
+ collection: 'base/size',
90
+ scopes: ['size', 'gap'],
91
+ },
92
+ },
93
+ },
94
+ '32': {
95
+ $value: {value: 32, unit: 'px'},
96
+ $type: 'dimension',
97
+ $extensions: {
98
+ 'org.primer.figma': {
99
+ collection: 'base/size',
100
+ scopes: ['size', 'gap'],
101
+ },
102
+ },
103
+ },
104
+ '36': {
105
+ $value: {value: 36, unit: 'px'},
106
+ $type: 'dimension',
107
+ $extensions: {
108
+ 'org.primer.figma': {
109
+ collection: 'base/size',
110
+ scopes: ['size', 'gap'],
111
+ },
112
+ },
113
+ },
114
+ '40': {
115
+ $value: {value: 40, unit: 'px'},
116
+ $type: 'dimension',
117
+ $extensions: {
118
+ 'org.primer.figma': {
119
+ collection: 'base/size',
120
+ scopes: ['size', 'gap'],
121
+ },
122
+ },
123
+ },
124
+ '44': {
125
+ $value: {value: 44, unit: 'px'},
126
+ $type: 'dimension',
127
+ $extensions: {
128
+ 'org.primer.figma': {
129
+ collection: 'base/size',
130
+ scopes: ['size', 'gap'],
131
+ },
132
+ },
133
+ },
134
+ '48': {
135
+ $value: {value: 48, unit: 'px'},
136
+ $type: 'dimension',
137
+ $extensions: {
138
+ 'org.primer.figma': {
139
+ collection: 'base/size',
140
+ scopes: ['size', 'gap'],
141
+ },
142
+ },
143
+ },
144
+ '64': {
145
+ $value: {value: 64, unit: 'px'},
146
+ $type: 'dimension',
147
+ $extensions: {
148
+ 'org.primer.figma': {
149
+ collection: 'base/size',
150
+ scopes: ['size', 'gap'],
151
+ },
152
+ },
153
+ },
154
+ '80': {
155
+ $value: {value: 80, unit: 'px'},
156
+ $type: 'dimension',
157
+ $extensions: {
158
+ 'org.primer.figma': {
159
+ collection: 'base/size',
160
+ scopes: ['size', 'gap'],
161
+ },
162
+ },
163
+ },
164
+ '96': {
165
+ $value: {value: 96, unit: 'px'},
166
+ $type: 'dimension',
167
+ $extensions: {
168
+ 'org.primer.figma': {
169
+ collection: 'base/size',
170
+ scopes: ['size', 'gap'],
171
+ },
172
+ },
173
+ },
174
+ '112': {
175
+ $value: {value: 112, unit: 'px'},
176
+ $type: 'dimension',
177
+ $extensions: {
178
+ 'org.primer.figma': {
179
+ collection: 'base/size',
180
+ scopes: ['size', 'gap'],
181
+ },
182
+ },
183
+ },
184
+ '128': {
185
+ $value: {value: 128, unit: 'px'},
186
+ $type: 'dimension',
187
+ $extensions: {
188
+ 'org.primer.figma': {
189
+ collection: 'base/size',
190
+ scopes: ['size', 'gap'],
191
+ },
192
+ },
193
+ },
194
+ },
195
+ },
196
196
  }