@primer/primitives 11.4.0 → 11.4.1-rc.14fb4bb1

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 (165) hide show
  1. package/DESIGN_TOKENS_GUIDE.md +185 -0
  2. package/DESIGN_TOKENS_SPEC.md +565 -0
  3. package/dist/build/formats/jsonFigma.js +8 -1
  4. package/dist/build/formats/markdownLlmGuidelines.d.ts +7 -6
  5. package/dist/build/formats/markdownLlmGuidelines.js +1034 -60
  6. package/dist/build/schemas/borderToken.d.ts +61 -5
  7. package/dist/build/schemas/borderToken.js +2 -1
  8. package/dist/build/schemas/colorToken.d.ts +639 -30
  9. package/dist/build/schemas/colorToken.js +3 -2
  10. package/dist/build/schemas/colorW3cValue.d.ts +28 -0
  11. package/dist/build/schemas/colorW3cValue.js +42 -0
  12. package/dist/build/schemas/cubicBezierToken.d.ts +1 -1
  13. package/dist/build/schemas/dimensionToken.d.ts +9 -2
  14. package/dist/build/schemas/dimensionValue.d.ts +12 -1
  15. package/dist/build/schemas/dimensionValue.js +10 -13
  16. package/dist/build/schemas/durationToken.d.ts +8 -2
  17. package/dist/build/schemas/durationValue.d.ts +11 -1
  18. package/dist/build/schemas/durationValue.js +13 -3
  19. package/dist/build/schemas/fontFamilyToken.d.ts +1 -1
  20. package/dist/build/schemas/fontWeightToken.d.ts +1 -1
  21. package/dist/build/schemas/gradientToken.d.ts +23 -2
  22. package/dist/build/schemas/gradientToken.js +2 -1
  23. package/dist/build/schemas/numberToken.d.ts +1 -1
  24. package/dist/build/schemas/shadowToken.d.ts +1751 -127
  25. package/dist/build/schemas/shadowToken.js +8 -2
  26. package/dist/build/schemas/stringToken.d.ts +1 -1
  27. package/dist/build/schemas/stringToken.js +1 -1
  28. package/dist/build/schemas/tokenType.d.ts +1 -1
  29. package/dist/build/schemas/transitionToken.d.ts +15 -3
  30. package/dist/build/schemas/typographyToken.d.ts +19 -5
  31. package/dist/build/schemas/typographyToken.js +1 -1
  32. package/dist/build/schemas/validTokenType.d.ts +1 -1
  33. package/dist/build/schemas/validTokenType.js +1 -1
  34. package/dist/build/schemas/viewportRangeToken.d.ts +1 -1
  35. package/dist/build/transformers/borderToCss.js +19 -1
  36. package/dist/build/transformers/colorAlphaToCss.js +6 -3
  37. package/dist/build/transformers/colorToHex.js +5 -2
  38. package/dist/build/transformers/colorToRgbAlpha.js +5 -2
  39. package/dist/build/transformers/colorToRgbaFloat.js +5 -0
  40. package/dist/build/transformers/dimensionToPixelUnitless.d.ts +3 -2
  41. package/dist/build/transformers/dimensionToPixelUnitless.js +22 -26
  42. package/dist/build/transformers/dimensionToRem.d.ts +2 -1
  43. package/dist/build/transformers/dimensionToRem.js +21 -22
  44. package/dist/build/transformers/dimensionToRemPxArray.d.ts +2 -1
  45. package/dist/build/transformers/dimensionToRemPxArray.js +21 -22
  46. package/dist/build/transformers/durationToCss.d.ts +2 -1
  47. package/dist/build/transformers/durationToCss.js +18 -11
  48. package/dist/build/transformers/gradientToCss.js +2 -1
  49. package/dist/build/transformers/shadowToCss.js +15 -1
  50. package/dist/build/transformers/utilities/normalizeColorValue.d.ts +23 -0
  51. package/dist/build/transformers/utilities/normalizeColorValue.js +74 -0
  52. package/dist/build/transformers/utilities/parseDimension.d.ts +12 -0
  53. package/dist/build/transformers/utilities/parseDimension.js +31 -0
  54. package/dist/build/types/borderTokenValue.d.ts +5 -2
  55. package/dist/build/types/dimensionTokenValue.d.ts +9 -0
  56. package/dist/build/types/shadowTokenValue.d.ts +8 -5
  57. package/dist/css/functional/themes/dark-colorblind-high-contrast.css +32 -28
  58. package/dist/css/functional/themes/dark-colorblind.css +32 -28
  59. package/dist/css/functional/themes/dark-dimmed-high-contrast.css +32 -28
  60. package/dist/css/functional/themes/dark-dimmed.css +32 -28
  61. package/dist/css/functional/themes/dark-high-contrast.css +32 -28
  62. package/dist/css/functional/themes/dark-tritanopia-high-contrast.css +32 -28
  63. package/dist/css/functional/themes/dark-tritanopia.css +32 -28
  64. package/dist/css/functional/themes/dark.css +32 -28
  65. package/dist/css/functional/themes/light-colorblind-high-contrast.css +32 -28
  66. package/dist/css/functional/themes/light-colorblind.css +32 -28
  67. package/dist/css/functional/themes/light-high-contrast.css +32 -28
  68. package/dist/css/functional/themes/light-tritanopia-high-contrast.css +32 -28
  69. package/dist/css/functional/themes/light-tritanopia.css +32 -28
  70. package/dist/css/functional/themes/light.css +32 -28
  71. package/dist/css/primitives.css +4 -0
  72. package/dist/docs/base/motion/motion.json +96 -24
  73. package/dist/docs/base/size/size.json +76 -19
  74. package/dist/docs/base/typography/typography.json +24 -6
  75. package/dist/docs/functional/size/border.json +26 -11
  76. package/dist/docs/functional/size/breakpoints.json +24 -6
  77. package/dist/docs/functional/size/radius.json +16 -4
  78. package/dist/docs/functional/size/size.json +60 -15
  79. package/dist/docs/functional/themes/dark-colorblind-high-contrast.json +2629 -346
  80. package/dist/docs/functional/themes/dark-colorblind.json +2629 -346
  81. package/dist/docs/functional/themes/dark-dimmed-high-contrast.json +2629 -346
  82. package/dist/docs/functional/themes/dark-dimmed.json +2629 -346
  83. package/dist/docs/functional/themes/dark-high-contrast.json +2629 -346
  84. package/dist/docs/functional/themes/dark-tritanopia-high-contrast.json +2629 -346
  85. package/dist/docs/functional/themes/dark-tritanopia.json +2629 -346
  86. package/dist/docs/functional/themes/dark.json +2629 -346
  87. package/dist/docs/functional/themes/light-colorblind-high-contrast.json +2635 -352
  88. package/dist/docs/functional/themes/light-colorblind.json +2632 -349
  89. package/dist/docs/functional/themes/light-high-contrast.json +2635 -352
  90. package/dist/docs/functional/themes/light-tritanopia-high-contrast.json +2635 -352
  91. package/dist/docs/functional/themes/light-tritanopia.json +2632 -349
  92. package/dist/docs/functional/themes/light.json +2632 -349
  93. package/dist/docs/functional/typography/typography.json +8 -2
  94. package/dist/fallbacks/base/motion/motion.json +48 -12
  95. package/dist/figma/themes/light-colorblind.json +4 -4
  96. package/dist/figma/themes/light-high-contrast.json +4 -4
  97. package/dist/figma/themes/light-tritanopia.json +4 -4
  98. package/dist/figma/themes/light.json +4 -4
  99. package/dist/internalCss/dark-colorblind-high-contrast.css +28 -28
  100. package/dist/internalCss/dark-colorblind.css +28 -28
  101. package/dist/internalCss/dark-dimmed-high-contrast.css +28 -28
  102. package/dist/internalCss/dark-dimmed.css +28 -28
  103. package/dist/internalCss/dark-high-contrast.css +28 -28
  104. package/dist/internalCss/dark-tritanopia-high-contrast.css +28 -28
  105. package/dist/internalCss/dark-tritanopia.css +28 -28
  106. package/dist/internalCss/dark.css +28 -28
  107. package/dist/internalCss/light-colorblind-high-contrast.css +28 -28
  108. package/dist/internalCss/light-colorblind.css +28 -28
  109. package/dist/internalCss/light-high-contrast.css +28 -28
  110. package/dist/internalCss/light-tritanopia-high-contrast.css +28 -28
  111. package/dist/internalCss/light-tritanopia.css +28 -28
  112. package/dist/internalCss/light.css +28 -28
  113. package/dist/styleLint/base/motion/motion.json +96 -24
  114. package/dist/styleLint/base/size/size.json +76 -19
  115. package/dist/styleLint/base/typography/typography.json +30 -12
  116. package/dist/styleLint/functional/size/border.json +27 -12
  117. package/dist/styleLint/functional/size/breakpoints.json +24 -6
  118. package/dist/styleLint/functional/size/radius.json +17 -5
  119. package/dist/styleLint/functional/size/size-coarse.json +3 -3
  120. package/dist/styleLint/functional/size/size-fine.json +3 -3
  121. package/dist/styleLint/functional/size/size.json +111 -66
  122. package/dist/styleLint/functional/themes/dark-colorblind-high-contrast.json +2757 -366
  123. package/dist/styleLint/functional/themes/dark-colorblind.json +2757 -366
  124. package/dist/styleLint/functional/themes/dark-dimmed-high-contrast.json +2757 -366
  125. package/dist/styleLint/functional/themes/dark-dimmed.json +2757 -366
  126. package/dist/styleLint/functional/themes/dark-high-contrast.json +2757 -366
  127. package/dist/styleLint/functional/themes/dark-tritanopia-high-contrast.json +2757 -366
  128. package/dist/styleLint/functional/themes/dark-tritanopia.json +2757 -366
  129. package/dist/styleLint/functional/themes/dark.json +2757 -366
  130. package/dist/styleLint/functional/themes/light-colorblind-high-contrast.json +2763 -372
  131. package/dist/styleLint/functional/themes/light-colorblind.json +2760 -369
  132. package/dist/styleLint/functional/themes/light-high-contrast.json +2763 -372
  133. package/dist/styleLint/functional/themes/light-tritanopia-high-contrast.json +2763 -372
  134. package/dist/styleLint/functional/themes/light-tritanopia.json +2760 -369
  135. package/dist/styleLint/functional/themes/light.json +2760 -369
  136. package/dist/styleLint/functional/typography/typography.json +28 -22
  137. package/package.json +9 -7
  138. package/src/tokens/base/motion/timing.json5 +12 -12
  139. package/src/tokens/base/size/size.json5 +194 -194
  140. package/src/tokens/base/typography/typography.json5 +6 -6
  141. package/src/tokens/component/avatar.json5 +72 -44
  142. package/src/tokens/component/button.json5 +1545 -1193
  143. package/src/tokens/functional/border/border.json5 +4 -1
  144. package/src/tokens/functional/color/bgColor.json5 +8 -0
  145. package/src/tokens/functional/color/display.json5 +7 -0
  146. package/src/tokens/functional/color/fgColor.json5 +8 -0
  147. package/src/tokens/functional/color/syntax.json5 +14 -0
  148. package/src/tokens/functional/shadow/shadow.json5 +1254 -163
  149. package/src/tokens/functional/size/border.json5 +8 -8
  150. package/src/tokens/functional/size/breakpoints.json5 +6 -6
  151. package/src/tokens/functional/size/radius.json5 +4 -4
  152. package/src/tokens/functional/size/size.json5 +15 -15
  153. package/src/tokens/functional/typography/typography.json5 +8 -4
  154. package/dist/build/parsers/index.d.ts +0 -1
  155. package/dist/build/parsers/index.js +0 -1
  156. package/dist/build/parsers/w3cJsonParser.d.ts +0 -6
  157. package/dist/build/parsers/w3cJsonParser.js +0 -25
  158. package/dist/removed/testing.json5 +0 -4
  159. package/guidelines/color.llm.md +0 -16
  160. package/guidelines/guidelines.llm.md +0 -34
  161. package/guidelines/motion.llm.md +0 -41
  162. package/guidelines/spacing.llm.md +0 -20
  163. package/guidelines/typography.llm.md +0 -14
  164. package/src/tokens/removed/testing.json5 +0 -4
  165. package/token-guidelines.llm.md +0 -695
package/src/tokens/component/button.json5 CHANGED
@@ -3,2437 +3,2789 @@
3
3
  default: {
4
4
  fgColor: {
5
5
  rest: {
6
- $value: '{control.fgColor.rest}',
7
- $type: 'color',
8
- $extensions: {
6
+ '$value': '{control.fgColor.rest}',
7
+ '$type': 'color',
8
+ '$extensions': {
9
9
  'org.primer.figma': {
10
10
  collection: 'mode',
11
11
  group: 'component (internal)',
12
- scopes: ['fgColor'],
12
+ scopes: [
13
+ 'fgColor'
14
+ ]
13
15
  },
14
16
  'org.primer.overrides': {
15
17
  dark: {
16
- $value: '{control.fgColor.rest}',
17
- },
18
- },
19
- },
20
- },
18
+ '$value': '{control.fgColor.rest}'
19
+ }
20
+ }
21
+ }
22
+ }
21
23
  },
22
24
  bgColor: {
23
25
  rest: {
24
- $value: '{control.bgColor.rest}',
25
- $type: 'color',
26
- $extensions: {
26
+ '$value': '{control.bgColor.rest}',
27
+ '$type': 'color',
28
+ '$extensions': {
27
29
  'org.primer.figma': {
28
30
  collection: 'mode',
29
31
  group: 'component (internal)',
30
- scopes: ['bgColor'],
32
+ scopes: [
33
+ 'bgColor'
34
+ ]
31
35
  },
32
36
  'org.primer.overrides': {
33
37
  dark: {
34
- $value: '{control.bgColor.rest}',
35
- },
36
- },
37
- },
38
+ '$value': '{control.bgColor.rest}'
39
+ }
40
+ }
41
+ }
38
42
  },
39
43
  hover: {
40
- $value: '{control.bgColor.hover}',
41
- $type: 'color',
42
- $extensions: {
44
+ '$value': '{control.bgColor.hover}',
45
+ '$type': 'color',
46
+ '$extensions': {
43
47
  'org.primer.figma': {
44
48
  collection: 'mode',
45
49
  group: 'component (internal)',
46
- scopes: ['bgColor'],
50
+ scopes: [
51
+ 'bgColor'
52
+ ]
47
53
  },
48
54
  'org.primer.overrides': {
49
55
  dark: {
50
- $value: '{control.bgColor.hover}',
51
- },
52
- },
53
- },
56
+ '$value': '{control.bgColor.hover}'
57
+ }
58
+ }
59
+ }
54
60
  },
55
61
  active: {
56
- $value: '{control.bgColor.active}',
57
- $type: 'color',
58
- $extensions: {
62
+ '$value': '{control.bgColor.active}',
63
+ '$type': 'color',
64
+ '$extensions': {
59
65
  'org.primer.figma': {
60
66
  collection: 'mode',
61
67
  group: 'component (internal)',
62
- scopes: ['bgColor'],
63
- },
64
- },
68
+ scopes: [
69
+ 'bgColor'
70
+ ]
71
+ }
72
+ }
65
73
  },
66
74
  selected: {
67
- $value: '{control.bgColor.active}',
68
- $type: 'color',
69
- $extensions: {
75
+ '$value': '{control.bgColor.active}',
76
+ '$type': 'color',
77
+ '$extensions': {
70
78
  'org.primer.figma': {
71
79
  collection: 'mode',
72
80
  group: 'component (internal)',
73
- scopes: ['bgColor'],
74
- },
75
- },
81
+ scopes: [
82
+ 'bgColor'
83
+ ]
84
+ }
85
+ }
76
86
  },
77
87
  disabled: {
78
- $value: '{control.bgColor.disabled}',
79
- $type: 'color',
80
- $extensions: {},
81
- },
88
+ '$value': '{control.bgColor.disabled}',
89
+ '$type': 'color',
90
+ '$extensions': {}
91
+ }
82
92
  },
83
93
  borderColor: {
84
94
  rest: {
85
- $value: '{control.borderColor.rest}',
86
- $type: 'color',
87
- $extensions: {
95
+ '$value': '{control.borderColor.rest}',
96
+ '$type': 'color',
97
+ '$extensions': {
88
98
  'org.primer.figma': {
89
99
  collection: 'mode',
90
100
  group: 'component (internal)',
91
- scopes: ['borderColor'],
92
- },
93
- },
101
+ scopes: [
102
+ 'borderColor'
103
+ ]
104
+ }
105
+ }
94
106
  },
95
107
  hover: {
96
- $value: '{button.default.borderColor.rest}',
97
- $type: 'color',
98
- $extensions: {
108
+ '$value': '{button.default.borderColor.rest}',
109
+ '$type': 'color',
110
+ '$extensions': {
99
111
  'org.primer.figma': {
100
112
  collection: 'mode',
101
113
  group: 'component (internal)',
102
- scopes: ['borderColor'],
103
- },
104
- },
114
+ scopes: [
115
+ 'borderColor'
116
+ ]
117
+ }
118
+ }
105
119
  },
106
120
  active: {
107
- $value: '{control.borderColor.rest}',
108
- $type: 'color',
109
- $extensions: {
121
+ '$value': '{control.borderColor.rest}',
122
+ '$type': 'color',
123
+ '$extensions': {
110
124
  'org.primer.figma': {
111
125
  collection: 'mode',
112
126
  group: 'component (internal)',
113
- scopes: ['borderColor'],
127
+ scopes: [
128
+ 'borderColor'
129
+ ]
114
130
  },
115
131
  'org.primer.overrides': {
116
132
  dark: {
117
- $value: '{button.default.borderColor.rest}',
118
- },
119
- },
120
- },
133
+ '$value': '{button.default.borderColor.rest}'
134
+ }
135
+ }
136
+ }
121
137
  },
122
138
  disabled: {
123
- $value: '{control.borderColor.disabled}',
124
- $type: 'color',
125
- $extensions: {
139
+ '$value': '{control.borderColor.disabled}',
140
+ '$type': 'color',
141
+ '$extensions': {
126
142
  'org.primer.figma': {
127
143
  collection: 'mode',
128
144
  group: 'component (internal)',
129
- scopes: ['borderColor'],
145
+ scopes: [
146
+ 'borderColor'
147
+ ]
130
148
  },
131
149
  'org.primer.overrides': {
132
150
  dark: {
133
- $value: '{control.borderColor.disabled}',
134
- },
135
- },
136
- },
137
- },
151
+ '$value': '{control.borderColor.disabled}'
152
+ }
153
+ }
154
+ }
155
+ }
138
156
  },
139
157
  shadow: {
140
158
  resting: {
141
- $value: [
159
+ '$value': [
142
160
  {
143
161
  color: '{base.color.neutral.13}',
144
162
  alpha: 0.04,
145
- offsetX: '0px',
146
- offsetY: '1px',
147
- blur: '0px',
148
- spread: '0px',
149
- inset: false,
150
- },
163
+ offsetX: {
164
+ value: 0,
165
+ unit: 'px'
166
+ },
167
+ offsetY: {
168
+ value: 1,
169
+ unit: 'px'
170
+ },
171
+ blur: {
172
+ value: 0,
173
+ unit: 'px'
174
+ },
175
+ spread: {
176
+ value: 0,
177
+ unit: 'px'
178
+ },
179
+ inset: false
180
+ }
151
181
  ],
152
- $type: 'shadow',
153
- $extensions: {
182
+ '$type': 'shadow',
183
+ '$extensions': {
154
184
  'org.primer.figma': {
155
185
  collection: 'mode',
156
- group: 'component shadow',
186
+ group: 'component shadow'
157
187
  },
158
188
  'org.primer.overrides': {
159
189
  dark: {
160
- $value: [
190
+ '$value': [
161
191
  {
162
192
  color: '{base.color.transparent}',
163
193
  alpha: 0,
164
- offsetX: '0px',
165
- offsetY: '0px',
166
- blur: '0px',
167
- spread: '0px',
168
- inset: false,
169
- },
170
- ],
171
- },
172
- },
173
- },
174
- },
175
- },
194
+ offsetX: {
195
+ value: 0,
196
+ unit: 'px'
197
+ },
198
+ offsetY: {
199
+ value: 0,
200
+ unit: 'px'
201
+ },
202
+ blur: {
203
+ value: 0,
204
+ unit: 'px'
205
+ },
206
+ spread: {
207
+ value: 0,
208
+ unit: 'px'
209
+ },
210
+ inset: false
211
+ }
212
+ ]
213
+ }
214
+ }
215
+ }
216
+ }
217
+ }
176
218
  },
177
219
  primary: {
178
220
  fgColor: {
179
221
  rest: {
180
- $value: '{fgColor.white}',
181
- $type: 'color',
182
- $extensions: {
222
+ '$value': '{fgColor.white}',
223
+ '$type': 'color',
224
+ '$extensions': {
183
225
  'org.primer.figma': {
184
226
  collection: 'mode',
185
227
  group: 'component (internal)',
186
- scopes: ['fgColor'],
228
+ scopes: [
229
+ 'fgColor'
230
+ ]
187
231
  },
188
232
  'org.primer.overrides': {
189
233
  dark: {
190
- $value: '{fgColor.white}',
234
+ '$value': '{fgColor.white}'
191
235
  },
192
236
  'dark-dimmed': {
193
- $value: '#ffffff',
237
+ '$value': '#ffffff'
194
238
  },
195
239
  'dark-dimmed-high-contrast': {
196
- $value: '#ffffff',
197
- },
198
- },
199
- },
240
+ '$value': '#ffffff'
241
+ }
242
+ }
243
+ }
200
244
  },
201
245
  disabled: {
202
- $value: '{base.color.neutral.0}',
203
- $type: 'color',
204
- $extensions: {
246
+ '$value': '{base.color.neutral.0}',
247
+ '$type': 'color',
248
+ '$extensions': {
205
249
  'org.primer.figma': {
206
250
  collection: 'mode',
207
251
  group: 'component (internal)',
208
- scopes: ['fgColor'],
252
+ scopes: [
253
+ 'fgColor'
254
+ ]
209
255
  },
210
256
  'org.primer.overrides': {
211
257
  dark: {
212
- $value: '{base.color.neutral.13}',
213
- alpha: 0.4,
214
- },
215
- },
258
+ '$value': '{base.color.neutral.13}',
259
+ alpha: 0.4
260
+ }
261
+ }
216
262
  },
217
- alpha: 0.8,
218
- },
263
+ alpha: 0.8
264
+ }
219
265
  },
220
266
  iconColor: {
221
267
  rest: {
222
- $value: '{fgColor.white}',
223
- $type: 'color',
224
- $extensions: {
268
+ '$value': '{fgColor.white}',
269
+ '$type': 'color',
270
+ '$extensions': {
225
271
  'org.primer.figma': {
226
272
  collection: 'mode',
227
273
  group: 'component (internal)',
228
- scopes: ['fgColor'],
274
+ scopes: [
275
+ 'fgColor'
276
+ ]
229
277
  },
230
278
  'org.primer.overrides': {
231
279
  light: {
232
- $value: '{fgColor.white}',
233
- alpha: 0.8,
280
+ '$value': '{fgColor.white}',
281
+ alpha: 0.8
234
282
  },
235
283
  dark: {
236
- $value: '{fgColor.white}',
284
+ '$value': '{fgColor.white}'
237
285
  },
238
286
  'dark-dimmed': {
239
- $value: '#ffffff',
287
+ '$value': '#ffffff'
240
288
  },
241
289
  'dark-dimmed-high-contrast': {
242
- $value: '#ffffff',
243
- },
244
- },
245
- },
246
- },
290
+ '$value': '#ffffff'
291
+ }
292
+ }
293
+ }
294
+ }
247
295
  },
248
296
  bgColor: {
249
297
  rest: {
250
- $value: '{bgColor.success.emphasis}',
251
- $type: 'color',
252
- $extensions: {
298
+ '$value': '{bgColor.success.emphasis}',
299
+ '$type': 'color',
300
+ '$extensions': {
253
301
  'org.primer.figma': {
254
302
  collection: 'mode',
255
303
  group: 'component (internal)',
256
- scopes: ['bgColor'],
304
+ scopes: [
305
+ 'bgColor'
306
+ ]
257
307
  },
258
308
  'org.primer.overrides': {
259
309
  dark: {
260
- $value: '{bgColor.success.emphasis}',
310
+ '$value': '{bgColor.success.emphasis}'
261
311
  },
262
312
  'light-high-contrast': {
263
- $value: '{base.color.green.5}',
264
- },
265
- },
266
- },
313
+ '$value': '{base.color.green.5}'
314
+ }
315
+ }
316
+ }
267
317
  },
268
318
  hover: {
269
- $value: '#1c8139',
270
- $type: 'color',
271
- $extensions: {
319
+ '$value': '#1c8139',
320
+ '$type': 'color',
321
+ '$extensions': {
272
322
  'org.primer.figma': {
273
323
  collection: 'mode',
274
324
  group: 'component (internal)',
275
- scopes: ['bgColor'],
325
+ scopes: [
326
+ 'bgColor'
327
+ ]
276
328
  },
277
329
  'org.primer.overrides': {
278
330
  dark: {
279
- $value: '#29903B',
331
+ '$value': '#29903B'
280
332
  },
281
333
  'dark-dimmed': {
282
- $value: '#3b8640',
334
+ '$value': '#3b8640'
283
335
  },
284
336
  'dark-dimmed-high-contrast': {
285
- $value: '{base.color.green.6}',
337
+ '$value': '{base.color.green.6}'
286
338
  },
287
339
  'dark-tritanopia': {
288
- $value: '#2a7aef',
340
+ '$value': '#2a7aef'
289
341
  },
290
342
  'dark-tritanopia-high-contrast': {
291
- $value: '#2a7aef',
343
+ '$value': '#2a7aef'
292
344
  },
293
345
  'dark-protanopia-deuteranopia': {
294
- $value: '#2a7aef',
346
+ '$value': '#2a7aef'
295
347
  },
296
348
  'dark-protanopia-deuteranopia-high-contrast': {
297
- $value: '#2a7aef',
349
+ '$value': '#2a7aef'
298
350
  },
299
351
  'dark-high-contrast': {
300
- $value: '#08792b',
352
+ '$value': '#08792b'
301
353
  },
302
354
  'light-tritanopia': {
303
- $value: '#0864d1',
355
+ '$value': '#0864d1'
304
356
  },
305
357
  'light-tritanopia-high-contrast': {
306
- $value: '#0864d1',
358
+ '$value': '#0864d1'
307
359
  },
308
360
  'light-protanopia-deuteranopia': {
309
- $value: '#0864d1',
361
+ '$value': '#0864d1'
310
362
  },
311
363
  'light-protanopia-deuteranopia-high-contrast': {
312
- $value: '#0864d1',
364
+ '$value': '#0864d1'
313
365
  },
314
366
  'light-high-contrast': {
315
- $value: '#04571e',
316
- },
317
- },
318
- },
367
+ '$value': '#04571e'
368
+ }
369
+ }
370
+ }
319
371
  },
320
372
  active: {
321
- $value: '#197935',
322
- $type: 'color',
323
- $extensions: {
373
+ '$value': '#197935',
374
+ '$type': 'color',
375
+ '$extensions': {
324
376
  'org.primer.figma': {
325
377
  collection: 'mode',
326
378
  group: 'component (internal)',
327
- scopes: ['bgColor'],
379
+ scopes: [
380
+ 'bgColor'
381
+ ]
328
382
  },
329
383
  'org.primer.overrides': {
330
384
  dark: {
331
- $value: '#2E9A40',
385
+ '$value': '#2E9A40'
332
386
  },
333
387
  'dark-dimmed': {
334
- $value: '#428f46',
388
+ '$value': '#428f46'
335
389
  },
336
390
  'dark-dimmed-high-contrast': {
337
- $value: '{base.color.green.5}',
391
+ '$value': '{base.color.green.5}'
338
392
  },
339
393
  'dark-tritanopia': {
340
- $value: '#3685f3',
394
+ '$value': '#3685f3'
341
395
  },
342
396
  'dark-tritanopia-high-contrast': {
343
- $value: '#3685f3',
397
+ '$value': '#3685f3'
344
398
  },
345
399
  'dark-protanopia-deuteranopia': {
346
- $value: '#3685f3',
400
+ '$value': '#3685f3'
347
401
  },
348
402
  'dark-protanopia-deuteranopia-high-contrast': {
349
- $value: '#3685f3',
403
+ '$value': '#3685f3'
350
404
  },
351
405
  'dark-high-contrast': {
352
- $value: '#109135',
406
+ '$value': '#109135'
353
407
  },
354
408
  'light-tritanopia': {
355
- $value: '#075fc8',
409
+ '$value': '#075fc8'
356
410
  },
357
411
  'light-tritanopia-high-contrast': {
358
- $value: '#075fc8',
412
+ '$value': '#075fc8'
359
413
  },
360
414
  'light-protanopia-deuteranopia': {
361
- $value: '#075fc8',
415
+ '$value': '#075fc8'
362
416
  },
363
417
  'light-protanopia-deuteranopia-high-contrast': {
364
- $value: '#075fc8',
418
+ '$value': '#075fc8'
365
419
  },
366
420
  'light-high-contrast': {
367
- $value: '#03501b',
368
- },
369
- },
370
- },
421
+ '$value': '#03501b'
422
+ }
423
+ }
424
+ }
371
425
  },
372
426
  disabled: {
373
- $value: '#95d8a6',
374
- $type: 'color',
375
- $extensions: {
427
+ '$value': '#95d8a6',
428
+ '$type': 'color',
429
+ '$extensions': {
376
430
  'org.primer.figma': {
377
431
  collection: 'mode',
378
432
  group: 'component (internal)',
379
- scopes: ['bgColor'],
433
+ scopes: [
434
+ 'bgColor'
435
+ ]
380
436
  },
381
437
  'org.primer.overrides': {
382
438
  dark: {
383
- $value: '#105823',
439
+ '$value': '#105823'
384
440
  },
385
441
  'dark-dimmed': {
386
- $value: '#105823',
442
+ '$value': '#105823'
387
443
  },
388
444
  'dark-tritanopia': {
389
- $value: '#5fabfe',
445
+ '$value': '#5fabfe'
390
446
  },
391
447
  'dark-tritanopia-high-contrast': {
392
- $value: '#5fabfe',
448
+ '$value': '#5fabfe'
393
449
  },
394
450
  'dark-protanopia-deuteranopia': {
395
- $value: '{base.color.blue.6}',
451
+ '$value': '{base.color.blue.6}'
396
452
  },
397
453
  'dark-protanopia-deuteranopia-high-contrast': {
398
- $value: '{base.color.blue.6}',
454
+ '$value': '{base.color.blue.6}'
399
455
  },
400
456
  'dark-high-contrast': {
401
- $value: '#048f2f',
457
+ '$value': '#048f2f'
402
458
  },
403
459
  'light-tritanopia': {
404
- $value: '#92caff',
460
+ '$value': '#92caff'
405
461
  },
406
462
  'light-tritanopia-high-contrast': {
407
- $value: '#92caff',
463
+ '$value': '#92caff'
408
464
  },
409
465
  'light-protanopia-deuteranopia': {
410
- $value: '#92caff',
466
+ '$value': '#92caff'
411
467
  },
412
468
  'light-protanopia-deuteranopia-high-contrast': {
413
- $value: '#92caff',
469
+ '$value': '#92caff'
414
470
  },
415
471
  'light-high-contrast': {
416
- $value: '#85cb97',
417
- },
418
- },
419
- },
420
- },
472
+ '$value': '#85cb97'
473
+ }
474
+ }
475
+ }
476
+ }
421
477
  },
422
478
  borderColor: {
423
479
  rest: {
424
- $value: '{borderColor.translucent}',
425
- $type: 'color',
426
- $extensions: {
480
+ '$value': '{borderColor.translucent}',
481
+ '$type': 'color',
482
+ '$extensions': {
427
483
  'org.primer.figma': {
428
484
  collection: 'mode',
429
485
  group: 'component (internal)',
430
- scopes: ['borderColor'],
486
+ scopes: [
487
+ 'borderColor'
488
+ ]
431
489
  },
432
490
  'org.primer.overrides': {
433
491
  'dark-high-contrast': {
434
- $value: '{base.color.green.2}',
435
- alpha: 1,
492
+ '$value': '{base.color.green.2}',
493
+ alpha: 1
436
494
  },
437
495
  'dark-dimmed-high-contrast': {
438
- $value: '{base.color.green.2}',
439
- alpha: 1,
496
+ '$value': '{base.color.green.2}',
497
+ alpha: 1
440
498
  },
441
499
  'dark-protanopia-deuteranopia-high-contrast': {
442
- $value: '{base.color.blue.2}',
443
- alpha: 1,
500
+ '$value': '{base.color.blue.2}',
501
+ alpha: 1
444
502
  },
445
503
  'dark-tritanopia-high-contrast': {
446
- $value: '{base.color.blue.2}',
447
- alpha: 1,
504
+ '$value': '{base.color.blue.2}',
505
+ alpha: 1
448
506
  },
449
507
  'light-high-contrast': {
450
- $value: '{base.color.green.7}',
451
- alpha: 1,
508
+ '$value': '{base.color.green.7}',
509
+ alpha: 1
452
510
  },
453
511
  'light-protanopia-deuteranopia-high-contrast': {
454
- $value: '{base.color.blue.7}',
455
- alpha: 1,
512
+ '$value': '{base.color.blue.7}',
513
+ alpha: 1
456
514
  },
457
515
  'light-tritanopia-high-contrast': {
458
- $value: '{base.color.blue.7}',
459
- alpha: 1,
460
- },
461
- },
462
- },
516
+ '$value': '{base.color.blue.7}',
517
+ alpha: 1
518
+ }
519
+ }
520
+ }
463
521
  },
464
522
  hover: {
465
- $value: '{button.primary.borderColor.rest}',
466
- $type: 'color',
467
- $extensions: {
523
+ '$value': '{button.primary.borderColor.rest}',
524
+ '$type': 'color',
525
+ '$extensions': {
468
526
  'org.primer.figma': {
469
527
  collection: 'mode',
470
528
  group: 'component (internal)',
471
- scopes: ['borderColor'],
472
- },
473
- },
529
+ scopes: [
530
+ 'borderColor'
531
+ ]
532
+ }
533
+ }
474
534
  },
475
535
  active: {
476
- $value: '{button.primary.borderColor.rest}',
477
- $type: 'color',
478
- $extensions: {
536
+ '$value': '{button.primary.borderColor.rest}',
537
+ '$type': 'color',
538
+ '$extensions': {
479
539
  'org.primer.figma': {
480
540
  collection: 'mode',
481
541
  group: 'component (internal)',
482
- scopes: ['borderColor'],
483
- },
484
- },
542
+ scopes: [
543
+ 'borderColor'
544
+ ]
545
+ }
546
+ }
485
547
  },
486
548
  disabled: {
487
- $value: '{button.primary.bgColor.disabled}',
488
- $type: 'color',
489
- $extensions: {
549
+ '$value': '{button.primary.bgColor.disabled}',
550
+ '$type': 'color',
551
+ '$extensions': {
490
552
  'org.primer.figma': {
491
553
  collection: 'mode',
492
554
  group: 'component (internal)',
493
- scopes: ['borderColor'],
555
+ scopes: [
556
+ 'borderColor'
557
+ ]
494
558
  },
495
559
  'org.primer.overrides': {
496
560
  dark: {
497
- $value: '#105823',
561
+ '$value': '#105823'
498
562
  },
499
563
  'dark-dimmed': {
500
- $value: '#105823',
564
+ '$value': '#105823'
501
565
  },
502
566
  'dark-tritanopia': {
503
- $value: '#5fabfe',
567
+ '$value': '#5fabfe'
504
568
  },
505
569
  'dark-tritanopia-high-contrast': {
506
- $value: '#5fabfe',
570
+ '$value': '#5fabfe'
507
571
  },
508
572
  'dark-protanopia-deuteranopia': {
509
- $value: '#1158c7',
573
+ '$value': '#1158c7'
510
574
  },
511
575
  'dark-protanopia-deuteranopia-high-contrast': {
512
- $value: '#1158c7',
576
+ '$value': '#1158c7'
513
577
  },
514
578
  'dark-high-contrast': {
515
- $value: '{base.color.green.2}',
516
- alpha: 0.4,
579
+ '$value': '{base.color.green.2}',
580
+ alpha: 0.4
517
581
  },
518
582
  'light-high-contrast': {
519
- $value: '#85cb97',
520
- },
521
- },
522
- },
523
- },
583
+ '$value': '#85cb97'
584
+ }
585
+ }
586
+ }
587
+ }
524
588
  },
525
589
  shadow: {
526
590
  selected: {
527
- $value: [
591
+ '$value': [
528
592
  {
529
593
  color: '{base.color.green.9}',
530
594
  alpha: 0.3,
531
- offsetX: '0px',
532
- offsetY: '1px',
533
- blur: '0px',
534
- spread: '0px',
535
- inset: true,
536
- },
595
+ offsetX: {
596
+ value: 0,
597
+ unit: 'px'
598
+ },
599
+ offsetY: {
600
+ value: 1,
601
+ unit: 'px'
602
+ },
603
+ blur: {
604
+ value: 0,
605
+ unit: 'px'
606
+ },
607
+ spread: {
608
+ value: 0,
609
+ unit: 'px'
610
+ },
611
+ inset: true
612
+ }
537
613
  ],
538
- $type: 'shadow',
539
- $extensions: {
614
+ '$type': 'shadow',
615
+ '$extensions': {
540
616
  'org.primer.figma': {
541
617
  collection: 'mode',
542
- group: 'component shadow',
618
+ group: 'component shadow'
543
619
  },
544
620
  'org.primer.overrides': {
545
621
  'light-tritanopia': {
546
- $value: [
622
+ '$value': [
547
623
  {
548
624
  color: '{base.color.blue.9}',
549
625
  alpha: 0.3,
550
- offsetX: '0px',
551
- offsetY: '1px',
552
- blur: '0px',
553
- spread: '0px',
554
- inset: true,
555
- },
556
- ],
626
+ offsetX: {
627
+ value: 0,
628
+ unit: 'px'
629
+ },
630
+ offsetY: {
631
+ value: 1,
632
+ unit: 'px'
633
+ },
634
+ blur: {
635
+ value: 0,
636
+ unit: 'px'
637
+ },
638
+ spread: {
639
+ value: 0,
640
+ unit: 'px'
641
+ },
642
+ inset: true
643
+ }
644
+ ]
557
645
  },
558
646
  'light-protanopia-deuteranopia': {
559
- $value: [
647
+ '$value': [
560
648
  {
561
649
  color: '{base.color.blue.9}',
562
650
  alpha: 0.3,
563
- offsetX: '0px',
564
- offsetY: '1px',
565
- blur: '0px',
566
- spread: '0px',
567
- inset: true,
568
- },
569
- ],
570
- },
571
- dark: {
572
- $value: [
651
+ offsetX: {
652
+ value: 0,
653
+ unit: 'px'
654
+ },
655
+ offsetY: {
656
+ value: 1,
657
+ unit: 'px'
658
+ },
659
+ blur: {
660
+ value: 0,
661
+ unit: 'px'
662
+ },
663
+ spread: {
664
+ value: 0,
665
+ unit: 'px'
666
+ },
667
+ inset: true
668
+ }
669
+ ]
670
+ },
671
+ dark: {
672
+ '$value': [
573
673
  {
574
674
  color: '{base.color.transparent}',
575
675
  alpha: 0,
576
- offsetX: '0px',
577
- offsetY: '0px',
578
- blur: '0px',
579
- spread: '0px',
580
- inset: false,
581
- },
582
- ],
583
- },
584
- },
585
- },
586
- },
587
- },
676
+ offsetX: {
677
+ value: 0,
678
+ unit: 'px'
679
+ },
680
+ offsetY: {
681
+ value: 0,
682
+ unit: 'px'
683
+ },
684
+ blur: {
685
+ value: 0,
686
+ unit: 'px'
687
+ },
688
+ spread: {
689
+ value: 0,
690
+ unit: 'px'
691
+ },
692
+ inset: false
693
+ }
694
+ ]
695
+ }
696
+ }
697
+ }
698
+ }
699
+ }
588
700
  },
589
701
  invisible: {
590
702
  fgColor: {
591
703
  rest: {
592
- $value: '{control.fgColor.rest}',
593
- $type: 'color',
594
- $extensions: {
704
+ '$value': '{control.fgColor.rest}',
705
+ '$type': 'color',
706
+ '$extensions': {
595
707
  'org.primer.figma': {
596
708
  collection: 'mode',
597
709
  group: 'component (internal)',
598
- scopes: ['fgColor'],
710
+ scopes: [
711
+ 'fgColor'
712
+ ]
599
713
  },
600
714
  'org.primer.overrides': {
601
715
  dark: {
602
- $value: '{control.fgColor.rest}',
603
- },
604
- },
605
- },
716
+ '$value': '{control.fgColor.rest}'
717
+ }
718
+ }
719
+ }
606
720
  },
607
721
  hover: {
608
- $value: '{control.fgColor.rest}',
609
- $type: 'color',
610
- $extensions: {
722
+ '$value': '{control.fgColor.rest}',
723
+ '$type': 'color',
724
+ '$extensions': {
611
725
  'org.primer.figma': {
612
726
  collection: 'mode',
613
727
  group: 'component (internal)',
614
- scopes: ['fgColor'],
728
+ scopes: [
729
+ 'fgColor'
730
+ ]
615
731
  },
616
732
  'org.primer.overrides': {
617
733
  dark: {
618
- $value: '{control.fgColor.rest}',
734
+ '$value': '{control.fgColor.rest}'
619
735
  },
620
736
  'light-high-contrast': {
621
- $value: '{base.color.neutral.11}',
737
+ '$value': '{base.color.neutral.11}'
622
738
  },
623
739
  'light-protanopia-deuteranopia-high-contrast': {
624
- $value: '{base.color.neutral.11}',
740
+ '$value': '{base.color.neutral.11}'
625
741
  },
626
742
  'light-tritanopia-high-contrast': {
627
- $value: '{base.color.neutral.11}',
628
- },
629
- },
630
- },
743
+ '$value': '{base.color.neutral.11}'
744
+ }
745
+ }
746
+ }
631
747
  },
632
748
  active: {
633
- $value: '{control.fgColor.rest}',
634
- $type: 'color',
635
- $extensions: {
749
+ '$value': '{control.fgColor.rest}',
750
+ '$type': 'color',
751
+ '$extensions': {
636
752
  'org.primer.figma': {
637
753
  collection: 'mode',
638
754
  group: 'component (internal)',
639
- scopes: ['fgColor'],
755
+ scopes: [
756
+ 'fgColor'
757
+ ]
640
758
  },
641
759
  'org.primer.overrides': {
642
760
  dark: {
643
- $value: '{control.fgColor.rest}',
644
- },
645
- },
646
- },
761
+ '$value': '{control.fgColor.rest}'
762
+ }
763
+ }
764
+ }
647
765
  },
648
766
  disabled: {
649
- $value: '{control.fgColor.disabled}',
650
- $type: 'color',
651
- $extensions: {
767
+ '$value': '{control.fgColor.disabled}',
768
+ '$type': 'color',
769
+ '$extensions': {
652
770
  'org.primer.figma': {
653
771
  collection: 'mode',
654
772
  group: 'component (internal)',
655
- scopes: ['fgColor'],
773
+ scopes: [
774
+ 'fgColor'
775
+ ]
656
776
  },
657
777
  'org.primer.overrides': {
658
778
  dark: {
659
- $value: '{control.fgColor.disabled}',
660
- },
661
- },
662
- },
663
- },
779
+ '$value': '{control.fgColor.disabled}'
780
+ }
781
+ }
782
+ }
783
+ }
664
784
  },
665
785
  iconColor: {
666
786
  rest: {
667
- $value: '{fgColor.muted}',
668
- $type: 'color',
669
- $extensions: {
787
+ '$value': '{fgColor.muted}',
788
+ '$type': 'color',
789
+ '$extensions': {
670
790
  'org.primer.figma': {
671
791
  collection: 'mode',
672
792
  group: 'component (internal)',
673
- scopes: ['fgColor'],
793
+ scopes: [
794
+ 'fgColor'
795
+ ]
674
796
  },
675
797
  'org.primer.overrides': {
676
798
  dark: {
677
- $value: '{fgColor.muted}',
799
+ '$value': '{fgColor.muted}'
678
800
  },
679
801
  'dark-dimmed': {
680
- $value: '{base.color.neutral.10}',
802
+ '$value': '{base.color.neutral.10}'
681
803
  },
682
804
  'dark-high-contrast': {
683
- $value: '{base.color.neutral.11}',
805
+ '$value': '{base.color.neutral.11}'
684
806
  },
685
807
  'dark-dimmed-high-contrast': {
686
- $value: '{base.color.neutral.11}',
808
+ '$value': '{base.color.neutral.11}'
687
809
  },
688
810
  'dark-protanopia-deuteranopia-high-contrast': {
689
- $value: '{base.color.neutral.11}',
811
+ '$value': '{base.color.neutral.11}'
690
812
  },
691
813
  'dark-tritanopia-high-contrast': {
692
- $value: '{base.color.neutral.11}',
693
- },
694
- },
695
- },
814
+ '$value': '{base.color.neutral.11}'
815
+ }
816
+ }
817
+ }
696
818
  },
697
819
  hover: {
698
- $value: '{fgColor.muted}',
699
- $type: 'color',
700
- $extensions: {
820
+ '$value': '{fgColor.muted}',
821
+ '$type': 'color',
822
+ '$extensions': {
701
823
  'org.primer.figma': {
702
824
  collection: 'mode',
703
825
  group: 'component (internal)',
704
- scopes: ['fgColor'],
826
+ scopes: [
827
+ 'fgColor'
828
+ ]
705
829
  },
706
830
  'org.primer.overrides': {
707
831
  dark: {
708
- $value: '{fgColor.muted}',
832
+ '$value': '{fgColor.muted}'
709
833
  },
710
834
  'dark-dimmed': {
711
- $value: '{base.color.neutral.10}',
835
+ '$value': '{base.color.neutral.10}'
712
836
  },
713
837
  'dark-dimmed-high-contrast': {
714
- $value: '{base.color.neutral.11}',
838
+ '$value': '{base.color.neutral.11}'
715
839
  },
716
840
  'dark-high-contrast': {
717
- $value: '{base.color.neutral.11}',
841
+ '$value': '{base.color.neutral.11}'
718
842
  },
719
843
  'dark-protanopia-deuteranopia-high-contrast': {
720
- $value: '{base.color.neutral.11}',
844
+ '$value': '{base.color.neutral.11}'
721
845
  },
722
846
  'dark-tritanopia-high-contrast': {
723
- $value: '{base.color.neutral.11}',
847
+ '$value': '{base.color.neutral.11}'
724
848
  },
725
849
  'light-high-contrast': {
726
- $value: '{base.color.neutral.11}',
850
+ '$value': '{base.color.neutral.11}'
727
851
  },
728
852
  'light-protanopia-deuteranopia-high-contrast': {
729
- $value: '{base.color.neutral.11}',
853
+ '$value': '{base.color.neutral.11}'
730
854
  },
731
855
  'light-tritanopia-high-contrast': {
732
- $value: '{base.color.neutral.11}',
733
- },
734
- },
735
- },
856
+ '$value': '{base.color.neutral.11}'
857
+ }
858
+ }
859
+ }
736
860
  },
737
861
  disabled: {
738
- $value: '{control.fgColor.disabled}',
739
- $type: 'color',
740
- $extensions: {
862
+ '$value': '{control.fgColor.disabled}',
863
+ '$type': 'color',
864
+ '$extensions': {
741
865
  'org.primer.figma': {
742
866
  collection: 'mode',
743
867
  group: 'component (internal)',
744
- scopes: ['fgColor'],
868
+ scopes: [
869
+ 'fgColor'
870
+ ]
745
871
  },
746
872
  'org.primer.overrides': {
747
873
  dark: {
748
- $value: '{control.fgColor.disabled}',
749
- },
750
- },
751
- },
752
- },
874
+ '$value': '{control.fgColor.disabled}'
875
+ }
876
+ }
877
+ }
878
+ }
753
879
  },
754
880
  bgColor: {
755
881
  rest: {
756
- $value: '{control.transparent.bgColor.rest}',
757
- $type: 'color',
758
- $extensions: {
882
+ '$value': '{control.transparent.bgColor.rest}',
883
+ '$type': 'color',
884
+ '$extensions': {
759
885
  'org.primer.figma': {
760
886
  collection: 'mode',
761
887
  group: 'component (internal)',
762
- scopes: ['bgColor'],
888
+ scopes: [
889
+ 'bgColor'
890
+ ]
763
891
  },
764
892
  'org.primer.overrides': {
765
893
  dark: {
766
- $value: '{control.transparent.bgColor.rest}',
767
- },
768
- },
769
- },
894
+ '$value': '{control.transparent.bgColor.rest}'
895
+ }
896
+ }
897
+ }
770
898
  },
771
899
  hover: {
772
- $value: '{control.transparent.bgColor.hover}',
773
- $type: 'color',
774
- $extensions: {
900
+ '$value': '{control.transparent.bgColor.hover}',
901
+ '$type': 'color',
902
+ '$extensions': {
775
903
  'org.primer.figma': {
776
904
  collection: 'mode',
777
905
  group: 'component (internal)',
778
- scopes: ['bgColor'],
906
+ scopes: [
907
+ 'bgColor'
908
+ ]
779
909
  },
780
910
  'org.primer.overrides': {
781
911
  dark: {
782
- $value: '{control.transparent.bgColor.hover}',
912
+ '$value': '{control.transparent.bgColor.hover}'
783
913
  },
784
914
  'dark-high-contrast': {
785
- $value: '{base.color.neutral.2}',
786
- alpha: null,
915
+ '$value': '{base.color.neutral.2}',
916
+ alpha: null
787
917
  },
788
918
  'dark-protanopia-deuteranopia-high-contrast': {
789
- $value: '{base.color.neutral.2}',
790
- alpha: null,
919
+ '$value': '{base.color.neutral.2}',
920
+ alpha: null
791
921
  },
792
922
  'dark-tritanopia-high-contrast': {
793
- $value: '{base.color.neutral.2}',
794
- alpha: null,
795
- },
796
- },
797
- },
923
+ '$value': '{base.color.neutral.2}',
924
+ alpha: null
925
+ }
926
+ }
927
+ }
798
928
  },
799
929
  active: {
800
- $value: '{control.transparent.bgColor.active}',
801
- $type: 'color',
802
- $extensions: {
930
+ '$value': '{control.transparent.bgColor.active}',
931
+ '$type': 'color',
932
+ '$extensions': {
803
933
  'org.primer.figma': {
804
934
  collection: 'mode',
805
935
  group: 'component (internal)',
806
- scopes: ['bgColor'],
936
+ scopes: [
937
+ 'bgColor'
938
+ ]
807
939
  },
808
940
  'org.primer.overrides': {
809
941
  dark: {
810
- $value: '{control.transparent.bgColor.active}',
942
+ '$value': '{control.transparent.bgColor.active}'
811
943
  },
812
944
  'dark-high-contrast': {
813
- $value: '{base.color.neutral.3}',
814
- alpha: null,
945
+ '$value': '{base.color.neutral.3}',
946
+ alpha: null
815
947
  },
816
948
  'dark-protanopia-deuteranopia-high-contrast': {
817
- $value: '{base.color.neutral.3}',
818
- alpha: null,
949
+ '$value': '{base.color.neutral.3}',
950
+ alpha: null
819
951
  },
820
952
  'dark-tritanopia-high-contrast': {
821
- $value: '{base.color.neutral.3}',
822
- alpha: null,
823
- },
824
- },
825
- },
953
+ '$value': '{base.color.neutral.3}',
954
+ alpha: null
955
+ }
956
+ }
957
+ }
826
958
  },
827
959
  disabled: {
828
- $value: '{base.color.transparent}',
829
- $type: 'color',
830
- $extensions: {
960
+ '$value': '{base.color.transparent}',
961
+ '$type': 'color',
962
+ '$extensions': {
831
963
  'org.primer.figma': {
832
964
  collection: 'mode',
833
965
  group: 'component (internal)',
834
- scopes: ['bgColor'],
966
+ scopes: [
967
+ 'bgColor'
968
+ ]
835
969
  },
836
970
  'org.primer.overrides': {
837
971
  dark: {
838
- $value: '{base.color.transparent}',
839
- },
840
- },
841
- },
842
- },
972
+ '$value': '{base.color.transparent}'
973
+ }
974
+ }
975
+ }
976
+ }
843
977
  },
844
978
  borderColor: {
845
979
  rest: {
846
- $value: '{control.transparent.borderColor.rest}',
847
- $type: 'color',
848
- $extensions: {
980
+ '$value': '{control.transparent.borderColor.rest}',
981
+ '$type': 'color',
982
+ '$extensions': {
849
983
  'org.primer.figma': {
850
984
  collection: 'mode',
851
985
  group: 'component (internal)',
852
- scopes: ['borderColor'],
986
+ scopes: [
987
+ 'borderColor'
988
+ ]
853
989
  },
854
990
  'org.primer.overrides': {
855
991
  dark: {
856
- $value: '{control.transparent.borderColor.rest}',
857
- },
858
- },
859
- },
992
+ '$value': '{control.transparent.borderColor.rest}'
993
+ }
994
+ }
995
+ }
860
996
  },
861
997
  hover: {
862
- $value: '{control.transparent.borderColor.hover}',
863
- $type: 'color',
864
- $extensions: {
998
+ '$value': '{control.transparent.borderColor.hover}',
999
+ '$type': 'color',
1000
+ '$extensions': {
865
1001
  'org.primer.figma': {
866
1002
  collection: 'mode',
867
1003
  group: 'component (internal)',
868
- scopes: ['borderColor'],
1004
+ scopes: [
1005
+ 'borderColor'
1006
+ ]
869
1007
  },
870
1008
  'org.primer.overrides': {
871
1009
  dark: {
872
- $value: '{control.transparent.borderColor.hover}',
873
- },
874
- },
875
- },
1010
+ '$value': '{control.transparent.borderColor.hover}'
1011
+ }
1012
+ }
1013
+ }
876
1014
  },
877
1015
  disabled: {
878
- $value: '{base.color.transparent}',
879
- $type: 'color',
880
- $extensions: {
1016
+ '$value': '{base.color.transparent}',
1017
+ '$type': 'color',
1018
+ '$extensions': {
881
1019
  'org.primer.figma': {
882
1020
  collection: 'mode',
883
1021
  group: 'component (internal)',
884
- scopes: ['borderColor'],
1022
+ scopes: [
1023
+ 'borderColor'
1024
+ ]
885
1025
  },
886
1026
  'org.primer.overrides': {
887
1027
  dark: {
888
- $value: '{base.color.transparent}',
889
- },
890
- },
891
- },
892
- },
893
- },
1028
+ '$value': '{base.color.transparent}'
1029
+ }
1030
+ }
1031
+ }
1032
+ }
1033
+ }
894
1034
  },
895
1035
  outline: {
896
1036
  fgColor: {
897
1037
  rest: {
898
- $value: '{fgColor.accent}',
899
- $type: 'color',
900
- $extensions: {
1038
+ '$value': '{fgColor.accent}',
1039
+ '$type': 'color',
1040
+ '$extensions': {
901
1041
  'org.primer.figma': {
902
1042
  collection: 'mode',
903
1043
  group: 'component (internal)',
904
- scopes: ['fgColor'],
1044
+ scopes: [
1045
+ 'fgColor'
1046
+ ]
905
1047
  },
906
1048
  'org.primer.overrides': {
907
1049
  dark: {
908
- $value: '{base.color.blue.4}',
909
- },
910
- },
911
- },
1050
+ '$value': '{base.color.blue.4}'
1051
+ }
1052
+ }
1053
+ }
912
1054
  },
913
1055
  hover: {
914
- $value: '{base.color.neutral.0}',
915
- $type: 'color',
916
- $extensions: {
1056
+ '$value': '{base.color.neutral.0}',
1057
+ '$type': 'color',
1058
+ '$extensions': {
917
1059
  'org.primer.figma': {
918
1060
  collection: 'mode',
919
1061
  group: 'component (internal)',
920
- scopes: ['fgColor'],
1062
+ scopes: [
1063
+ 'fgColor'
1064
+ ]
921
1065
  },
922
1066
  'org.primer.overrides': {
923
1067
  dark: {
924
- $value: '{base.color.blue.3}',
925
- },
926
- },
927
- },
1068
+ '$value': '{base.color.blue.3}'
1069
+ }
1070
+ }
1071
+ }
928
1072
  },
929
1073
  active: {
930
- $value: '{base.color.neutral.0}',
931
- $type: 'color',
932
- $extensions: {
1074
+ '$value': '{base.color.neutral.0}',
1075
+ '$type': 'color',
1076
+ '$extensions': {
933
1077
  'org.primer.figma': {
934
1078
  collection: 'mode',
935
1079
  group: 'component (internal)',
936
- scopes: ['fgColor'],
1080
+ scopes: [
1081
+ 'fgColor'
1082
+ ]
937
1083
  },
938
1084
  'org.primer.overrides': {
939
1085
  dark: {
940
- $value: '{base.color.neutral.13}',
941
- },
942
- },
943
- },
1086
+ '$value': '{base.color.neutral.13}'
1087
+ }
1088
+ }
1089
+ }
944
1090
  },
945
1091
  disabled: {
946
- $value: '{fgColor.accent}',
947
- $type: 'color',
948
- $extensions: {
1092
+ '$value': '{fgColor.accent}',
1093
+ '$type': 'color',
1094
+ '$extensions': {
949
1095
  'org.primer.figma': {
950
1096
  collection: 'mode',
951
1097
  group: 'component (internal)',
952
- scopes: ['fgColor'],
1098
+ scopes: [
1099
+ 'fgColor'
1100
+ ]
953
1101
  },
954
1102
  'org.primer.overrides': {
955
1103
  dark: {
956
- $value: '{fgColor.accent}',
957
- alpha: 0.5,
1104
+ '$value': '{fgColor.accent}',
1105
+ alpha: 0.5
958
1106
  },
959
1107
  'dark-dimmed': {
960
- $value: '#478be680',
961
- },
962
- },
1108
+ '$value': '#478be680'
1109
+ }
1110
+ }
963
1111
  },
964
- alpha: 0.5,
965
- },
1112
+ alpha: 0.5
1113
+ }
966
1114
  },
967
1115
  bgColor: {
968
1116
  rest: {
969
- $value: '{control.bgColor.rest}',
970
- $type: 'color',
971
- $extensions: {
1117
+ '$value': '{control.bgColor.rest}',
1118
+ '$type': 'color',
1119
+ '$extensions': {
972
1120
  'org.primer.figma': {
973
1121
  collection: 'mode',
974
1122
  group: 'component (internal)',
975
- scopes: ['bgColor'],
1123
+ scopes: [
1124
+ 'bgColor'
1125
+ ]
976
1126
  },
977
1127
  'org.primer.overrides': {
978
1128
  dark: {
979
- $value: '{base.color.neutral.12}',
980
- },
981
- },
982
- },
1129
+ '$value': '{base.color.neutral.12}'
1130
+ }
1131
+ }
1132
+ }
983
1133
  },
984
1134
  hover: {
985
- $value: '{bgColor.accent.emphasis}',
986
- $type: 'color',
987
- $extensions: {
1135
+ '$value': '{bgColor.accent.emphasis}',
1136
+ '$type': 'color',
1137
+ '$extensions': {
988
1138
  'org.primer.figma': {
989
1139
  collection: 'mode',
990
1140
  group: 'component (internal)',
991
- scopes: ['bgColor'],
1141
+ scopes: [
1142
+ 'bgColor'
1143
+ ]
992
1144
  },
993
1145
  'org.primer.overrides': {
994
1146
  dark: {
995
- $value: '{control.bgColor.hover}',
1147
+ '$value': '{control.bgColor.hover}'
996
1148
  },
997
1149
  'dark-tritanopia': {
998
- $value: '#262c36',
999
- },
1000
- },
1001
- },
1150
+ '$value': '#262c36'
1151
+ }
1152
+ }
1153
+ }
1002
1154
  },
1003
1155
  active: {
1004
- $value: '#0757ba',
1005
- $type: 'color',
1006
- $extensions: {
1156
+ '$value': '#0757ba',
1157
+ '$type': 'color',
1158
+ '$extensions': {
1007
1159
  'org.primer.figma': {
1008
1160
  collection: 'mode',
1009
1161
  group: 'component (internal)',
1010
- scopes: ['bgColor'],
1162
+ scopes: [
1163
+ 'bgColor'
1164
+ ]
1011
1165
  },
1012
1166
  'org.primer.overrides': {
1013
1167
  dark: {
1014
- $value: '{base.color.blue.7}',
1168
+ '$value': '{base.color.blue.7}'
1015
1169
  },
1016
1170
  'dark-tritanopia': {
1017
- $value: '#0d419d',
1171
+ '$value': '#0d419d'
1018
1172
  },
1019
1173
  'dark-tritanopia-high-contrast': {
1020
- $value: '#0d419d',
1174
+ '$value': '#0d419d'
1021
1175
  },
1022
1176
  'light-high-contrast': {
1023
- $value: '#033f9d',
1177
+ '$value': '#033f9d'
1024
1178
  },
1025
1179
  'light-tritanopia-high-contrast': {
1026
- $value: '#033f9d',
1180
+ '$value': '#033f9d'
1027
1181
  },
1028
1182
  'light-protanopia-deuteranopia-high-contrast': {
1029
- $value: '#033f9d',
1030
- },
1031
- },
1032
- },
1183
+ '$value': '#033f9d'
1184
+ }
1185
+ }
1186
+ }
1033
1187
  },
1034
1188
  disabled: {
1035
- $value: '{control.bgColor.disabled}',
1036
- $type: 'color',
1037
- $extensions: {
1189
+ '$value': '{control.bgColor.disabled}',
1190
+ '$type': 'color',
1191
+ '$extensions': {
1038
1192
  'org.primer.figma': {
1039
1193
  collection: 'mode',
1040
1194
  group: 'component (internal)',
1041
- scopes: ['bgColor'],
1195
+ scopes: [
1196
+ 'bgColor'
1197
+ ]
1042
1198
  },
1043
1199
  'org.primer.overrides': {
1044
1200
  dark: {
1045
- $value: '{control.bgColor.disabled}',
1201
+ '$value': '{control.bgColor.disabled}'
1046
1202
  },
1047
1203
  'dark-tritanopia': {
1048
- $value: '#212830',
1049
- },
1050
- },
1051
- },
1052
- },
1204
+ '$value': '#212830'
1205
+ }
1206
+ }
1207
+ }
1208
+ }
1053
1209
  },
1054
1210
  borderColor: {
1055
1211
  hover: {
1056
- $value: '{button.primary.borderColor.hover}',
1057
- $type: 'color',
1058
- $extensions: {
1212
+ '$value': '{button.primary.borderColor.hover}',
1213
+ '$type': 'color',
1214
+ '$extensions': {
1059
1215
  'org.primer.figma': {
1060
1216
  collection: 'mode',
1061
1217
  group: 'component (internal)',
1062
- scopes: ['borderColor'],
1218
+ scopes: [
1219
+ 'borderColor'
1220
+ ]
1063
1221
  },
1064
1222
  'org.primer.overrides': {
1065
1223
  dark: {
1066
- $value: '{button.default.borderColor.hover}',
1224
+ '$value': '{button.default.borderColor.hover}'
1067
1225
  },
1068
1226
  'light-high-contrast': {
1069
- $value: '{base.color.blue.7}',
1227
+ '$value': '{base.color.blue.7}'
1070
1228
  },
1071
1229
  'light-protanopia-deuteranopia-high-contrast': {
1072
- $value: '{base.color.blue.7}',
1230
+ '$value': '{base.color.blue.7}'
1073
1231
  },
1074
1232
  'light-tritanopia-high-contrast': {
1075
- $value: '{base.color.blue.7}',
1076
- },
1077
- },
1078
- },
1233
+ '$value': '{base.color.blue.7}'
1234
+ }
1235
+ }
1236
+ }
1079
1237
  },
1080
1238
  active: {
1081
- $value: '{button.outline.borderColor.hover}',
1082
- $type: 'color',
1083
- $extensions: {
1239
+ '$value': '{button.outline.borderColor.hover}',
1240
+ '$type': 'color',
1241
+ '$extensions': {
1084
1242
  'org.primer.figma': {
1085
1243
  collection: 'mode',
1086
1244
  group: 'component (internal)',
1087
- scopes: ['borderColor'],
1088
- },
1089
- },
1090
- },
1245
+ scopes: [
1246
+ 'borderColor'
1247
+ ]
1248
+ }
1249
+ }
1250
+ }
1091
1251
  },
1092
1252
  shadow: {
1093
1253
  selected: {
1094
- $value: [
1254
+ '$value': [
1095
1255
  {
1096
1256
  color: '{base.color.blue.9}',
1097
1257
  alpha: 0.2,
1098
- offsetX: '0px',
1099
- offsetY: '1px',
1100
- blur: '0px',
1101
- spread: '0px',
1102
- inset: true,
1103
- },
1258
+ offsetX: {
1259
+ value: 0,
1260
+ unit: 'px'
1261
+ },
1262
+ offsetY: {
1263
+ value: 1,
1264
+ unit: 'px'
1265
+ },
1266
+ blur: {
1267
+ value: 0,
1268
+ unit: 'px'
1269
+ },
1270
+ spread: {
1271
+ value: 0,
1272
+ unit: 'px'
1273
+ },
1274
+ inset: true
1275
+ }
1104
1276
  ],
1105
- $type: 'shadow',
1106
- $extensions: {
1277
+ '$type': 'shadow',
1278
+ '$extensions': {
1107
1279
  'org.primer.figma': {
1108
1280
  collection: 'mode',
1109
- group: 'component shadow',
1281
+ group: 'component shadow'
1110
1282
  },
1111
1283
  'org.primer.overrides': {
1112
1284
  dark: {
1113
- $value: [
1285
+ '$value': [
1114
1286
  {
1115
1287
  color: '{base.color.transparent}',
1116
1288
  alpha: 0,
1117
- offsetX: '0px',
1118
- offsetY: '0px',
1119
- blur: '0px',
1120
- spread: '0px',
1121
- inset: false,
1122
- },
1123
- ],
1124
- },
1125
- },
1126
- },
1127
- },
1128
- },
1289
+ offsetX: {
1290
+ value: 0,
1291
+ unit: 'px'
1292
+ },
1293
+ offsetY: {
1294
+ value: 0,
1295
+ unit: 'px'
1296
+ },
1297
+ blur: {
1298
+ value: 0,
1299
+ unit: 'px'
1300
+ },
1301
+ spread: {
1302
+ value: 0,
1303
+ unit: 'px'
1304
+ },
1305
+ inset: false
1306
+ }
1307
+ ]
1308
+ }
1309
+ }
1310
+ }
1311
+ }
1312
+ }
1129
1313
  },
1130
1314
  danger: {
1131
1315
  fgColor: {
1132
1316
  rest: {
1133
- $value: '{fgColor.danger}',
1134
- $type: 'color',
1135
- $extensions: {
1317
+ '$value': '{fgColor.danger}',
1318
+ '$type': 'color',
1319
+ '$extensions': {
1136
1320
  'org.primer.figma': {
1137
1321
  collection: 'mode',
1138
1322
  group: 'component (internal)',
1139
- scopes: ['fgColor'],
1323
+ scopes: [
1324
+ 'fgColor'
1325
+ ]
1140
1326
  },
1141
1327
  'org.primer.overrides': {
1142
1328
  dark: {
1143
- $value: '#FA5E55',
1329
+ '$value': '#FA5E55'
1144
1330
  },
1145
1331
  'dark-dimmed': {
1146
- $value: '#ea5c53',
1332
+ '$value': '#ea5c53'
1147
1333
  },
1148
1334
  'dark-dimmed-high-contrast': {
1149
- $value: '{base.color.red.1}',
1335
+ '$value': '{base.color.red.1}'
1150
1336
  },
1151
1337
  'dark-protanopia-deuteranopia': {
1152
- $value: '{fgColor.danger}',
1338
+ '$value': '{fgColor.danger}'
1153
1339
  },
1154
1340
  'dark-high-contrast': {
1155
- $value: '{base.color.red.2}',
1341
+ '$value': '{base.color.red.2}'
1156
1342
  },
1157
1343
  'dark-tritanopia-high-contrast': {
1158
- $value: '{base.color.red.2}',
1344
+ '$value': '{base.color.red.2}'
1159
1345
  },
1160
1346
  'dark-protanopia-deuteranopia-high-contrast': {
1161
- $value: '{base.color.orange.2}',
1162
- },
1163
- },
1164
- },
1347
+ '$value': '{base.color.orange.2}'
1348
+ }
1349
+ }
1350
+ }
1165
1351
  },
1166
1352
  hover: {
1167
- $value: '{base.color.neutral.0}',
1168
- $type: 'color',
1169
- $extensions: {
1353
+ '$value': '{base.color.neutral.0}',
1354
+ '$type': 'color',
1355
+ '$extensions': {
1170
1356
  'org.primer.figma': {
1171
1357
  collection: 'mode',
1172
1358
  group: 'component (internal)',
1173
- scopes: ['fgColor'],
1359
+ scopes: [
1360
+ 'fgColor'
1361
+ ]
1174
1362
  },
1175
1363
  'org.primer.overrides': {
1176
1364
  dark: {
1177
- $value: '{base.color.neutral.13}',
1365
+ '$value': '{base.color.neutral.13}'
1178
1366
  },
1179
1367
  'dark-dimmed-high-contrast': {
1180
- $value: '#ffffff',
1368
+ '$value': '#ffffff'
1181
1369
  },
1182
1370
  'dark-dimmed': {
1183
- $value: '#ffffff',
1184
- },
1185
- },
1186
- },
1371
+ '$value': '#ffffff'
1372
+ }
1373
+ }
1374
+ }
1187
1375
  },
1188
1376
  active: {
1189
- $value: '{base.color.neutral.0}',
1190
- $type: 'color',
1191
- $extensions: {
1377
+ '$value': '{base.color.neutral.0}',
1378
+ '$type': 'color',
1379
+ '$extensions': {
1192
1380
  'org.primer.figma': {
1193
1381
  collection: 'mode',
1194
1382
  group: 'component (internal)',
1195
- scopes: ['fgColor'],
1383
+ scopes: [
1384
+ 'fgColor'
1385
+ ]
1196
1386
  },
1197
1387
  'org.primer.overrides': {
1198
1388
  dark: {
1199
- $value: '{base.color.neutral.13}',
1389
+ '$value': '{base.color.neutral.13}'
1200
1390
  },
1201
1391
  'dark-dimmed-high-contrast': {
1202
- $value: '#ffffff',
1392
+ '$value': '#ffffff'
1203
1393
  },
1204
1394
  'dark-dimmed': {
1205
- $value: '#ffffff',
1206
- },
1207
- },
1208
- },
1395
+ '$value': '#ffffff'
1396
+ }
1397
+ }
1398
+ }
1209
1399
  },
1210
1400
  disabled: {
1211
- $value: '{fgColor.danger}',
1212
- $type: 'color',
1213
- $extensions: {
1401
+ '$value': '{fgColor.danger}',
1402
+ '$type': 'color',
1403
+ '$extensions': {
1214
1404
  'org.primer.figma': {
1215
1405
  collection: 'mode',
1216
1406
  group: 'component (internal)',
1217
- scopes: ['fgColor'],
1407
+ scopes: [
1408
+ 'fgColor'
1409
+ ]
1218
1410
  },
1219
1411
  'org.primer.overrides': {
1220
1412
  dark: {
1221
- $value: '{fgColor.danger}',
1222
- alpha: 0.5,
1223
- },
1224
- },
1413
+ '$value': '{fgColor.danger}',
1414
+ alpha: 0.5
1415
+ }
1416
+ }
1225
1417
  },
1226
- alpha: 0.5,
1227
- },
1418
+ alpha: 0.5
1419
+ }
1228
1420
  },
1229
1421
  iconColor: {
1230
1422
  rest: {
1231
- $value: '{button.danger.fgColor.rest}',
1232
- $type: 'color',
1233
- $extensions: {
1423
+ '$value': '{button.danger.fgColor.rest}',
1424
+ '$type': 'color',
1425
+ '$extensions': {
1234
1426
  'org.primer.figma': {
1235
1427
  collection: 'mode',
1236
1428
  group: 'component (internal)',
1237
- scopes: ['fgColor'],
1238
- },
1239
- },
1429
+ scopes: [
1430
+ 'fgColor'
1431
+ ]
1432
+ }
1433
+ }
1240
1434
  },
1241
1435
  hover: {
1242
- $value: '{base.color.neutral.0}',
1243
- $type: 'color',
1244
- $extensions: {
1436
+ '$value': '{base.color.neutral.0}',
1437
+ '$type': 'color',
1438
+ '$extensions': {
1245
1439
  'org.primer.figma': {
1246
1440
  collection: 'mode',
1247
1441
  group: 'component (internal)',
1248
- scopes: ['fgColor'],
1442
+ scopes: [
1443
+ 'fgColor'
1444
+ ]
1249
1445
  },
1250
1446
  'org.primer.overrides': {
1251
1447
  dark: {
1252
- $value: '{base.color.neutral.13}',
1448
+ '$value': '{base.color.neutral.13}'
1253
1449
  },
1254
1450
  'dark-dimmed-high-contrast': {
1255
- $value: '#ffffff',
1256
- },
1257
- },
1258
- },
1259
- },
1451
+ '$value': '#ffffff'
1452
+ }
1453
+ }
1454
+ }
1455
+ }
1260
1456
  },
1261
1457
  bgColor: {
1262
1458
  rest: {
1263
- $value: '{control.bgColor.rest}',
1264
- $type: 'color',
1265
- $extensions: {
1459
+ '$value': '{control.bgColor.rest}',
1460
+ '$type': 'color',
1461
+ '$extensions': {
1266
1462
  'org.primer.figma': {
1267
1463
  collection: 'mode',
1268
1464
  group: 'component (internal)',
1269
- scopes: ['bgColor'],
1465
+ scopes: [
1466
+ 'bgColor'
1467
+ ]
1270
1468
  },
1271
1469
  'org.primer.overrides': {
1272
1470
  dark: {
1273
- $value: '{control.bgColor.rest}',
1274
- },
1275
- },
1276
- },
1471
+ '$value': '{control.bgColor.rest}'
1472
+ }
1473
+ }
1474
+ }
1277
1475
  },
1278
1476
  hover: {
1279
- $value: '{bgColor.danger.emphasis}',
1280
- $type: 'color',
1281
- $extensions: {
1477
+ '$value': '{bgColor.danger.emphasis}',
1478
+ '$type': 'color',
1479
+ '$extensions': {
1282
1480
  'org.primer.figma': {
1283
1481
  collection: 'mode',
1284
1482
  group: 'component (internal)',
1285
- scopes: ['bgColor'],
1483
+ scopes: [
1484
+ 'bgColor'
1485
+ ]
1286
1486
  },
1287
1487
  'org.primer.overrides': {
1288
1488
  dark: {
1289
- $value: '{base.color.red.6}',
1489
+ '$value': '{base.color.red.6}'
1290
1490
  },
1291
1491
  'dark-protanopia-deuteranopia': {
1292
- $value: '{base.color.orange.6}',
1492
+ '$value': '{base.color.orange.6}'
1293
1493
  },
1294
1494
  'dark-high-contrast': {
1295
- $value: '{base.color.red.9}',
1495
+ '$value': '{base.color.red.9}'
1296
1496
  },
1297
1497
  'dark-dimmed-high-contrast': {
1298
- $value: '{base.color.red.7}',
1498
+ '$value': '{base.color.red.7}'
1299
1499
  },
1300
1500
  'dark-protanopia-deuteranopia-high-contrast': {
1301
- $value: '{base.color.orange.9}',
1501
+ '$value': '{base.color.orange.9}'
1302
1502
  },
1303
1503
  'dark-tritanopia-high-contrast': {
1304
- $value: '{base.color.red.9}',
1305
- },
1306
- },
1307
- },
1504
+ '$value': '{base.color.red.9}'
1505
+ }
1506
+ }
1507
+ }
1308
1508
  },
1309
1509
  active: {
1310
- $value: '{base.color.red.6}',
1311
- $type: 'color',
1312
- $extensions: {
1510
+ '$value': '{base.color.red.6}',
1511
+ '$type': 'color',
1512
+ '$extensions': {
1313
1513
  'org.primer.figma': {
1314
1514
  collection: 'mode',
1315
1515
  group: 'component (internal)',
1316
- scopes: ['bgColor'],
1516
+ scopes: [
1517
+ 'bgColor'
1518
+ ]
1317
1519
  },
1318
1520
  'org.primer.overrides': {
1319
1521
  dark: {
1320
- $value: '{bgColor.danger.emphasis}',
1522
+ '$value': '{bgColor.danger.emphasis}'
1321
1523
  },
1322
1524
  'dark-dimmed': {
1323
- $value: '{bgColor.danger.emphasis}',
1525
+ '$value': '{bgColor.danger.emphasis}'
1324
1526
  },
1325
1527
  'dark-dimmed-high-contrast': {
1326
- $value: '{bgColor.danger.emphasis}',
1528
+ '$value': '{bgColor.danger.emphasis}'
1327
1529
  },
1328
1530
  'dark-protanopia-deuteranopia': {
1329
- $value: '{bgColor.danger.emphasis}',
1531
+ '$value': '{bgColor.danger.emphasis}'
1330
1532
  },
1331
1533
  'dark-high-contrast': {
1332
- $value: '{bgColor.danger.emphasis}',
1534
+ '$value': '{bgColor.danger.emphasis}'
1333
1535
  },
1334
1536
  'dark-tritanopia-high-contrast': {
1335
- $value: '{bgColor.danger.emphasis}',
1537
+ '$value': '{bgColor.danger.emphasis}'
1336
1538
  },
1337
1539
  'dark-protanopia-deuteranopia-high-contrast': {
1338
- $value: '{bgColor.danger.emphasis}',
1540
+ '$value': '{bgColor.danger.emphasis}'
1339
1541
  },
1340
1542
  'light-protanopia-deuteranopia': {
1341
- $value: '{base.color.orange.6}',
1543
+ '$value': '{base.color.orange.6}'
1342
1544
  },
1343
1545
  'light-protanopia-deuteranopia-high-contrast': {
1344
- $value: '{base.color.orange.6}',
1345
- },
1346
- },
1347
- },
1546
+ '$value': '{base.color.orange.6}'
1547
+ }
1548
+ }
1549
+ }
1348
1550
  },
1349
1551
  disabled: {
1350
- $value: '{control.bgColor.disabled}',
1351
- $type: 'color',
1352
- $extensions: {
1552
+ '$value': '{control.bgColor.disabled}',
1553
+ '$type': 'color',
1554
+ '$extensions': {
1353
1555
  'org.primer.figma': {
1354
1556
  collection: 'mode',
1355
1557
  group: 'component (internal)',
1356
- scopes: ['bgColor'],
1558
+ scopes: [
1559
+ 'bgColor'
1560
+ ]
1357
1561
  },
1358
1562
  'org.primer.overrides': {
1359
1563
  dark: {
1360
- $value: '{control.bgColor.disabled}',
1361
- },
1362
- },
1363
- },
1364
- },
1564
+ '$value': '{control.bgColor.disabled}'
1565
+ }
1566
+ }
1567
+ }
1568
+ }
1365
1569
  },
1366
1570
  borderColor: {
1367
1571
  rest: {
1368
- $value: '{control.borderColor.rest}',
1369
- $type: 'color',
1370
- $extensions: {
1572
+ '$value': '{control.borderColor.rest}',
1573
+ '$type': 'color',
1574
+ '$extensions': {
1371
1575
  'org.primer.figma': {
1372
1576
  collection: 'mode',
1373
1577
  group: 'component (internal)',
1374
- scopes: ['borderColor'],
1578
+ scopes: [
1579
+ 'borderColor'
1580
+ ]
1375
1581
  },
1376
1582
  'org.primer.overrides': {
1377
1583
  dark: {
1378
- $value: '{control.borderColor.rest}',
1379
- },
1380
- },
1381
- },
1584
+ '$value': '{control.borderColor.rest}'
1585
+ }
1586
+ }
1587
+ }
1382
1588
  },
1383
1589
  hover: {
1384
- $value: '{button.primary.borderColor.rest}',
1385
- $type: 'color',
1386
- $extensions: {
1590
+ '$value': '{button.primary.borderColor.rest}',
1591
+ '$type': 'color',
1592
+ '$extensions': {
1387
1593
  'org.primer.figma': {
1388
1594
  collection: 'mode',
1389
1595
  group: 'component (internal)',
1390
- scopes: ['borderColor'],
1596
+ scopes: [
1597
+ 'borderColor'
1598
+ ]
1391
1599
  },
1392
1600
  'org.primer.overrides': {
1393
1601
  dark: {
1394
- $value: '{button.primary.borderColor.rest}',
1602
+ '$value': '{button.primary.borderColor.rest}'
1395
1603
  },
1396
1604
  'dark-high-contrast': {
1397
- $value: '{base.color.red.2}',
1398
- alpha: 1,
1605
+ '$value': '{base.color.red.2}',
1606
+ alpha: 1
1399
1607
  },
1400
1608
  'dark-dimmed-high-contrast': {
1401
- $value: '{base.color.red.1}',
1402
- alpha: 1,
1609
+ '$value': '{base.color.red.1}',
1610
+ alpha: 1
1403
1611
  },
1404
1612
  'dark-protanopia-deuteranopia-high-contrast': {
1405
- $value: '{base.color.orange.2}',
1406
- alpha: 1,
1613
+ '$value': '{base.color.orange.2}',
1614
+ alpha: 1
1407
1615
  },
1408
1616
  'dark-tritanopia-high-contrast': {
1409
- $value: '{base.color.red.2}',
1410
- alpha: 1,
1617
+ '$value': '{base.color.red.2}',
1618
+ alpha: 1
1411
1619
  },
1412
1620
  'light-high-contrast': {
1413
- $value: '{base.color.red.7}',
1414
- alpha: 1,
1621
+ '$value': '{base.color.red.7}',
1622
+ alpha: 1
1415
1623
  },
1416
1624
  'light-protanopia-deuteranopia-high-contrast': {
1417
- $value: '{base.color.orange.7}',
1418
- alpha: 1,
1625
+ '$value': '{base.color.orange.7}',
1626
+ alpha: 1
1419
1627
  },
1420
1628
  'light-tritanopia-high-contrast': {
1421
- $value: '{base.color.red.7}',
1422
- alpha: 1,
1423
- },
1424
- },
1425
- },
1629
+ '$value': '{base.color.red.7}',
1630
+ alpha: 1
1631
+ }
1632
+ }
1633
+ }
1426
1634
  },
1427
1635
  active: {
1428
- $value: '{button.danger.borderColor.hover}',
1429
- $type: 'color',
1430
- $extensions: {
1636
+ '$value': '{button.danger.borderColor.hover}',
1637
+ '$type': 'color',
1638
+ '$extensions': {
1431
1639
  'org.primer.figma': {
1432
1640
  collection: 'mode',
1433
1641
  group: 'component (internal)',
1434
- scopes: ['borderColor'],
1642
+ scopes: [
1643
+ 'borderColor'
1644
+ ]
1435
1645
  },
1436
1646
  'org.primer.overrides': {
1437
1647
  dark: {
1438
- $value: '{button.danger.borderColor.hover}',
1648
+ '$value': '{button.danger.borderColor.hover}'
1439
1649
  },
1440
1650
  'dark-high-contrast': {
1441
- $value: '{base.color.red.2}',
1442
- alpha: 1,
1443
- },
1444
- },
1445
- },
1446
- },
1651
+ '$value': '{base.color.red.2}',
1652
+ alpha: 1
1653
+ }
1654
+ }
1655
+ }
1656
+ }
1447
1657
  },
1448
1658
  shadow: {
1449
1659
  selected: {
1450
- $value: [
1660
+ '$value': [
1451
1661
  {
1452
1662
  color: '{base.color.red.9}',
1453
1663
  alpha: 0.2,
1454
- offsetX: '0px',
1455
- offsetY: '1px',
1456
- blur: '0px',
1457
- spread: '0px',
1458
- inset: true,
1459
- },
1664
+ offsetX: {
1665
+ value: 0,
1666
+ unit: 'px'
1667
+ },
1668
+ offsetY: {
1669
+ value: 1,
1670
+ unit: 'px'
1671
+ },
1672
+ blur: {
1673
+ value: 0,
1674
+ unit: 'px'
1675
+ },
1676
+ spread: {
1677
+ value: 0,
1678
+ unit: 'px'
1679
+ },
1680
+ inset: true
1681
+ }
1460
1682
  ],
1461
- $type: 'shadow',
1462
- $extensions: {
1683
+ '$type': 'shadow',
1684
+ '$extensions': {
1463
1685
  'org.primer.figma': {
1464
1686
  collection: 'mode',
1465
- group: 'component shadow',
1687
+ group: 'component shadow'
1466
1688
  },
1467
1689
  'org.primer.overrides': {
1468
1690
  'light-protanopia-deuteranopia': {
1469
- $value: [
1691
+ '$value': [
1470
1692
  {
1471
1693
  color: '{base.color.orange.9}',
1472
1694
  alpha: 0.2,
1473
- offsetX: '0px',
1474
- offsetY: '1px',
1475
- blur: '0px',
1476
- spread: '0px',
1477
- inset: true,
1478
- },
1479
- ],
1480
- },
1481
- dark: {
1482
- $value: [
1695
+ offsetX: {
1696
+ value: 0,
1697
+ unit: 'px'
1698
+ },
1699
+ offsetY: {
1700
+ value: 1,
1701
+ unit: 'px'
1702
+ },
1703
+ blur: {
1704
+ value: 0,
1705
+ unit: 'px'
1706
+ },
1707
+ spread: {
1708
+ value: 0,
1709
+ unit: 'px'
1710
+ },
1711
+ inset: true
1712
+ }
1713
+ ]
1714
+ },
1715
+ dark: {
1716
+ '$value': [
1483
1717
  {
1484
1718
  color: '{base.color.transparent}',
1485
1719
  alpha: 0,
1486
- offsetX: '0px',
1487
- offsetY: '0px',
1488
- blur: '0px',
1489
- spread: '0px',
1490
- inset: false,
1491
- },
1492
- ],
1493
- },
1494
- },
1495
- },
1496
- },
1497
- },
1720
+ offsetX: {
1721
+ value: 0,
1722
+ unit: 'px'
1723
+ },
1724
+ offsetY: {
1725
+ value: 0,
1726
+ unit: 'px'
1727
+ },
1728
+ blur: {
1729
+ value: 0,
1730
+ unit: 'px'
1731
+ },
1732
+ spread: {
1733
+ value: 0,
1734
+ unit: 'px'
1735
+ },
1736
+ inset: false
1737
+ }
1738
+ ]
1739
+ }
1740
+ }
1741
+ }
1742
+ }
1743
+ }
1498
1744
  },
1499
1745
  inactive: {
1500
1746
  fgColor: {
1501
- $value: '{base.color.neutral.9}',
1502
- $type: 'color',
1503
- $extensions: {
1747
+ '$value': '{base.color.neutral.9}',
1748
+ '$type': 'color',
1749
+ '$extensions': {
1504
1750
  'org.primer.figma': {
1505
1751
  collection: 'mode',
1506
1752
  group: 'component (internal)',
1507
- scopes: ['fgColor'],
1753
+ scopes: [
1754
+ 'fgColor'
1755
+ ]
1508
1756
  },
1509
1757
  'org.primer.overrides': {
1510
1758
  dark: {
1511
- $value: '{base.color.neutral.9}',
1759
+ '$value': '{base.color.neutral.9}'
1512
1760
  },
1513
1761
  'dark-dimmed': {
1514
- $value: '{base.color.neutral.8}',
1762
+ '$value': '{base.color.neutral.8}'
1515
1763
  },
1516
1764
  'dark-high-contrast': {
1517
- $value: '{base.color.neutral.10}',
1765
+ '$value': '{base.color.neutral.10}'
1518
1766
  },
1519
1767
  'dark-protanopia-deuteranopia-high-contrast': {
1520
- $value: '{base.color.neutral.10}',
1768
+ '$value': '{base.color.neutral.10}'
1521
1769
  },
1522
1770
  'dark-tritanopia-high-contrast': {
1523
- $value: '{base.color.neutral.10}',
1771
+ '$value': '{base.color.neutral.10}'
1524
1772
  },
1525
1773
  'light-high-contrast': {
1526
- $value: '{base.color.neutral.10}',
1774
+ '$value': '{base.color.neutral.10}'
1527
1775
  },
1528
1776
  'light-protanopia-deuteranopia-high-contrast': {
1529
- $value: '{base.color.neutral.10}',
1777
+ '$value': '{base.color.neutral.10}'
1530
1778
  },
1531
1779
  'light-tritanopia-high-contrast': {
1532
- $value: '{base.color.neutral.10}',
1533
- },
1534
- },
1535
- },
1780
+ '$value': '{base.color.neutral.10}'
1781
+ }
1782
+ }
1783
+ }
1536
1784
  },
1537
1785
  bgColor: {
1538
- $value: '{base.color.neutral.3}',
1539
- $type: 'color',
1540
- $extensions: {
1786
+ '$value': '{base.color.neutral.3}',
1787
+ '$type': 'color',
1788
+ '$extensions': {
1541
1789
  'org.primer.figma': {
1542
1790
  collection: 'mode',
1543
1791
  group: 'component (internal)',
1544
- scopes: ['bgColor'],
1792
+ scopes: [
1793
+ 'bgColor'
1794
+ ]
1545
1795
  },
1546
1796
  'org.primer.overrides': {
1547
1797
  dark: {
1548
- $value: '{base.color.neutral.4}',
1798
+ '$value': '{base.color.neutral.4}'
1549
1799
  },
1550
1800
  'dark-dimmed': {
1551
- $value: '{base.color.neutral.5}',
1801
+ '$value': '{base.color.neutral.5}'
1552
1802
  },
1553
1803
  'dark-high-contrast': {
1554
- $value: '{control.bgColor.rest}',
1804
+ '$value': '{control.bgColor.rest}'
1555
1805
  },
1556
1806
  'light-high-contrast': {
1557
- $value: '{control.bgColor.rest}',
1558
- },
1559
- },
1560
- },
1561
- },
1807
+ '$value': '{control.bgColor.rest}'
1808
+ }
1809
+ }
1810
+ }
1811
+ }
1562
1812
  },
1563
1813
  star: {
1564
1814
  iconColor: {
1565
- $value: '{base.color.yellow.2}',
1566
- $type: 'color',
1567
- $extensions: {
1815
+ '$value': '{base.color.yellow.2}',
1816
+ '$type': 'color',
1817
+ '$extensions': {
1568
1818
  'org.primer.figma': {
1569
1819
  collection: 'mode',
1570
1820
  group: 'component (internal)',
1571
- scopes: ['bgColor'],
1821
+ scopes: [
1822
+ 'bgColor'
1823
+ ]
1572
1824
  },
1573
1825
  'org.primer.overrides': {
1574
1826
  dark: {
1575
- $value: '{base.color.yellow.2}',
1576
- },
1577
- },
1578
- },
1579
- },
1580
- },
1827
+ '$value': '{base.color.yellow.2}'
1828
+ }
1829
+ }
1830
+ }
1831
+ }
1832
+ }
1581
1833
  },
1582
1834
  buttonCounter: {
1583
1835
  default: {
1584
1836
  bgColor: {
1585
1837
  rest: {
1586
- $value: '{bgColor.neutral.muted}',
1587
- $type: 'color',
1588
- $extensions: {
1838
+ '$value': '{bgColor.neutral.muted}',
1839
+ '$type': 'color',
1840
+ '$extensions': {
1589
1841
  'org.primer.figma': {
1590
1842
  collection: 'mode',
1591
1843
  group: 'component (internal)',
1592
- scopes: ['bgColor'],
1844
+ scopes: [
1845
+ 'bgColor'
1846
+ ]
1593
1847
  },
1594
1848
  'org.primer.overrides': {
1595
1849
  dark: {
1596
- $value: '{base.color.neutral.6}',
1850
+ '$value': '{base.color.neutral.6}'
1597
1851
  },
1598
1852
  'light-high-contrast': '{base.color.neutral.7}',
1599
1853
  'light-protanopia-deuteranopia-high-contrast': '{base.color.neutral.7}',
1600
- 'light-tritanopia-high-contrast': '{base.color.neutral.7}',
1601
- },
1602
- },
1603
- },
1604
- },
1854
+ 'light-tritanopia-high-contrast': '{base.color.neutral.7}'
1855
+ }
1856
+ }
1857
+ }
1858
+ }
1605
1859
  },
1606
1860
  invisible: {
1607
1861
  bgColor: {
1608
1862
  rest: {
1609
- $value: '{bgColor.neutral.muted}',
1610
- $type: 'color',
1611
- $extensions: {
1863
+ '$value': '{bgColor.neutral.muted}',
1864
+ '$type': 'color',
1865
+ '$extensions': {
1612
1866
  'org.primer.figma': {
1613
1867
  collection: 'mode',
1614
1868
  group: 'component (internal)',
1615
- scopes: ['bgColor'],
1869
+ scopes: [
1870
+ 'bgColor'
1871
+ ]
1616
1872
  },
1617
1873
  'org.primer.overrides': {
1618
1874
  dark: {
1619
- $value: '{bgColor.neutral.muted}',
1620
- },
1621
- },
1622
- },
1623
- },
1624
- },
1875
+ '$value': '{bgColor.neutral.muted}'
1876
+ }
1877
+ }
1878
+ }
1879
+ }
1880
+ }
1625
1881
  },
1626
1882
  primary: {
1627
1883
  bgColor: {
1628
1884
  rest: {
1629
- $value: '{base.color.green.9}',
1630
- $type: 'color',
1631
- $extensions: {
1885
+ '$value': '{base.color.green.9}',
1886
+ '$type': 'color',
1887
+ '$extensions': {
1632
1888
  'org.primer.figma': {
1633
1889
  collection: 'mode',
1634
1890
  group: 'component (internal)',
1635
- scopes: ['bgColor'],
1891
+ scopes: [
1892
+ 'bgColor'
1893
+ ]
1636
1894
  },
1637
1895
  'org.primer.overrides': {
1638
1896
  dark: {
1639
- $value: '{base.color.green.9}',
1640
- alpha: 0.2,
1897
+ '$value': '{base.color.green.9}',
1898
+ alpha: 0.2
1641
1899
  },
1642
1900
  'dark-high-contrast': {
1643
- $value: '{base.color.neutral.0}',
1644
- alpha: 0.15,
1901
+ '$value': '{base.color.neutral.0}',
1902
+ alpha: 0.15
1645
1903
  },
1646
1904
  'dark-tritanopia-high-contrast': {
1647
- $value: '{base.color.neutral.0}',
1648
- alpha: 0.15,
1905
+ '$value': '{base.color.neutral.0}',
1906
+ alpha: 0.15
1649
1907
  },
1650
1908
  'dark-protanopia-deuteranopia-high-contrast': {
1651
- $value: '{base.color.neutral.0}',
1652
- alpha: 0.15,
1653
- },
1654
- },
1655
- },
1656
- alpha: 0.2,
1657
- },
1658
- },
1909
+ '$value': '{base.color.neutral.0}',
1910
+ alpha: 0.15
1911
+ }
1912
+ }
1913
+ },
1914
+ alpha: 0.2
1915
+ }
1916
+ }
1659
1917
  },
1660
1918
  outline: {
1661
1919
  bgColor: {
1662
1920
  rest: {
1663
- $value: '{bgColor.accent.emphasis}',
1664
- $type: 'color',
1665
- $extensions: {
1921
+ '$value': '{bgColor.accent.emphasis}',
1922
+ '$type': 'color',
1923
+ '$extensions': {
1666
1924
  'org.primer.figma': {
1667
1925
  collection: 'mode',
1668
1926
  group: 'component (internal)',
1669
- scopes: ['bgColor'],
1927
+ scopes: [
1928
+ 'bgColor'
1929
+ ]
1670
1930
  },
1671
1931
  'org.primer.overrides': {
1672
1932
  dark: {
1673
- $value: '{base.color.blue.9}',
1674
- alpha: 0.2,
1675
- },
1676
- },
1933
+ '$value': '{base.color.blue.9}',
1934
+ alpha: 0.2
1935
+ }
1936
+ }
1677
1937
  },
1678
- alpha: 0.1,
1938
+ alpha: 0.1
1679
1939
  },
1680
1940
  hover: {
1681
- $value: '{base.color.neutral.0}',
1682
- $type: 'color',
1683
- $extensions: {
1941
+ '$value': '{base.color.neutral.0}',
1942
+ '$type': 'color',
1943
+ '$extensions': {
1684
1944
  'org.primer.figma': {
1685
1945
  collection: 'mode',
1686
1946
  group: 'component (internal)',
1687
- scopes: ['bgColor'],
1947
+ scopes: [
1948
+ 'bgColor'
1949
+ ]
1688
1950
  },
1689
1951
  'org.primer.overrides': {
1690
1952
  dark: {
1691
- $value: '{base.color.blue.9}',
1692
- alpha: 0.2,
1693
- },
1694
- },
1953
+ '$value': '{base.color.blue.9}',
1954
+ alpha: 0.2
1955
+ }
1956
+ }
1695
1957
  },
1696
- alpha: 0.2,
1958
+ alpha: 0.2
1697
1959
  },
1698
1960
  disabled: {
1699
- $value: '{bgColor.accent.emphasis}',
1700
- $type: 'color',
1701
- $extensions: {
1961
+ '$value': '{bgColor.accent.emphasis}',
1962
+ '$type': 'color',
1963
+ '$extensions': {
1702
1964
  'org.primer.figma': {
1703
1965
  collection: 'mode',
1704
1966
  group: 'component (internal)',
1705
- scopes: ['bgColor'],
1967
+ scopes: [
1968
+ 'bgColor'
1969
+ ]
1706
1970
  },
1707
1971
  'org.primer.overrides': {
1708
1972
  dark: {
1709
- $value: '{bgColor.accent.emphasis}',
1710
- alpha: 0.05,
1711
- },
1712
- },
1973
+ '$value': '{bgColor.accent.emphasis}',
1974
+ alpha: 0.05
1975
+ }
1976
+ }
1713
1977
  },
1714
- alpha: 0.05,
1715
- },
1978
+ alpha: 0.05
1979
+ }
1716
1980
  },
1717
1981
  fgColor: {
1718
1982
  rest: {
1719
- $value: '{base.color.blue.6}',
1720
- $type: 'color',
1721
- $extensions: {
1983
+ '$value': '{base.color.blue.6}',
1984
+ '$type': 'color',
1985
+ '$extensions': {
1722
1986
  'org.primer.figma': {
1723
1987
  collection: 'mode',
1724
1988
  group: 'component (internal)',
1725
- scopes: ['fgColor'],
1989
+ scopes: [
1990
+ 'fgColor'
1991
+ ]
1726
1992
  },
1727
1993
  'org.primer.overrides': {
1728
1994
  dark: {
1729
- $value: '{base.color.blue.4}',
1730
- },
1731
- },
1732
- },
1995
+ '$value': '{base.color.blue.4}'
1996
+ }
1997
+ }
1998
+ }
1733
1999
  },
1734
2000
  hover: {
1735
- $value: '{base.color.neutral.0}',
1736
- $type: 'color',
1737
- $extensions: {
2001
+ '$value': '{base.color.neutral.0}',
2002
+ '$type': 'color',
2003
+ '$extensions': {
1738
2004
  'org.primer.figma': {
1739
2005
  collection: 'mode',
1740
2006
  group: 'component (internal)',
1741
- scopes: ['fgColor'],
2007
+ scopes: [
2008
+ 'fgColor'
2009
+ ]
1742
2010
  },
1743
2011
  'org.primer.overrides': {
1744
2012
  dark: {
1745
- $value: '{base.color.blue.3}',
1746
- },
1747
- },
1748
- },
2013
+ '$value': '{base.color.blue.3}'
2014
+ }
2015
+ }
2016
+ }
1749
2017
  },
1750
2018
  disabled: {
1751
- $value: '{fgColor.accent}',
1752
- $type: 'color',
1753
- $extensions: {
2019
+ '$value': '{fgColor.accent}',
2020
+ '$type': 'color',
2021
+ '$extensions': {
1754
2022
  'org.primer.figma': {
1755
2023
  collection: 'mode',
1756
2024
  group: 'component (internal)',
1757
- scopes: ['fgColor'],
2025
+ scopes: [
2026
+ 'fgColor'
2027
+ ]
1758
2028
  },
1759
2029
  'org.primer.overrides': {
1760
2030
  dark: {
1761
- $value: '{fgColor.accent}',
1762
- alpha: 0.5,
1763
- },
1764
- },
2031
+ '$value': '{fgColor.accent}',
2032
+ alpha: 0.5
2033
+ }
2034
+ }
1765
2035
  },
1766
- alpha: 0.5,
1767
- },
1768
- },
2036
+ alpha: 0.5
2037
+ }
2038
+ }
1769
2039
  },
1770
2040
  danger: {
1771
2041
  bgColor: {
1772
2042
  hover: {
1773
- $value: '{base.color.neutral.0}',
1774
- $type: 'color',
1775
- $extensions: {
2043
+ '$value': '{base.color.neutral.0}',
2044
+ '$type': 'color',
2045
+ '$extensions': {
1776
2046
  'org.primer.figma': {
1777
2047
  collection: 'mode',
1778
2048
  group: 'component (internal)',
1779
- scopes: ['bgColor'],
2049
+ scopes: [
2050
+ 'bgColor'
2051
+ ]
1780
2052
  },
1781
2053
  'org.primer.overrides': {
1782
2054
  dark: {
1783
- $value: '{base.color.neutral.13}',
1784
- alpha: 0.2,
2055
+ '$value': '{base.color.neutral.13}',
2056
+ alpha: 0.2
1785
2057
  },
1786
2058
  'dark-high-contrast': {
1787
- $value: '{base.color.neutral.0}',
1788
- alpha: 0.15,
2059
+ '$value': '{base.color.neutral.0}',
2060
+ alpha: 0.15
1789
2061
  },
1790
2062
  'dark-protanopia-deuteranopia-high-contrast': {
1791
- $value: '{base.color.neutral.0}',
1792
- alpha: 0.15,
2063
+ '$value': '{base.color.neutral.0}',
2064
+ alpha: 0.15
1793
2065
  },
1794
2066
  'dark-tritanopia-high-contrast': {
1795
- $value: '{base.color.neutral.0}',
1796
- alpha: 0.15,
1797
- },
1798
- },
2067
+ '$value': '{base.color.neutral.0}',
2068
+ alpha: 0.15
2069
+ }
2070
+ }
1799
2071
  },
1800
- alpha: 0.2,
2072
+ alpha: 0.2
1801
2073
  },
1802
2074
  disabled: {
1803
- $value: '{bgColor.danger.emphasis}',
1804
- $type: 'color',
1805
- $extensions: {
2075
+ '$value': '{bgColor.danger.emphasis}',
2076
+ '$type': 'color',
2077
+ '$extensions': {
1806
2078
  'org.primer.figma': {
1807
2079
  collection: 'mode',
1808
2080
  group: 'component (internal)',
1809
- scopes: ['bgColor'],
2081
+ scopes: [
2082
+ 'bgColor'
2083
+ ]
1810
2084
  },
1811
2085
  'org.primer.overrides': {
1812
2086
  dark: {
1813
- $value: '{bgColor.danger.emphasis}',
1814
- alpha: 0.05,
1815
- },
1816
- },
2087
+ '$value': '{bgColor.danger.emphasis}',
2088
+ alpha: 0.05
2089
+ }
2090
+ }
1817
2091
  },
1818
- alpha: 0.05,
2092
+ alpha: 0.05
1819
2093
  },
1820
2094
  rest: {
1821
- $value: '{bgColor.danger.emphasis}',
1822
- $type: 'color',
1823
- $extensions: {
2095
+ '$value': '{bgColor.danger.emphasis}',
2096
+ '$type': 'color',
2097
+ '$extensions': {
1824
2098
  'org.primer.figma': {
1825
2099
  collection: 'mode',
1826
2100
  group: 'component (internal)',
1827
- scopes: ['bgColor'],
2101
+ scopes: [
2102
+ 'bgColor'
2103
+ ]
1828
2104
  },
1829
2105
  'org.primer.overrides': {
1830
2106
  dark: {
1831
- $value: '{base.color.red.9}',
1832
- alpha: 0.2,
2107
+ '$value': '{base.color.red.9}',
2108
+ alpha: 0.2
1833
2109
  },
1834
2110
  'dark-high-contrast': {
1835
- $value: '{base.color.neutral.0}',
1836
- alpha: 0.15,
2111
+ '$value': '{base.color.neutral.0}',
2112
+ alpha: 0.15
1837
2113
  },
1838
2114
  'dark-protanopia-deuteranopia-high-contrast': {
1839
- $value: '{base.color.neutral.0}',
1840
- alpha: 0.15,
2115
+ '$value': '{base.color.neutral.0}',
2116
+ alpha: 0.15
1841
2117
  },
1842
2118
  'dark-tritanopia-high-contrast': {
1843
- $value: '{base.color.neutral.0}',
1844
- alpha: 0.15,
1845
- },
1846
- },
2119
+ '$value': '{base.color.neutral.0}',
2120
+ alpha: 0.15
2121
+ }
2122
+ }
1847
2123
  },
1848
- alpha: 0.1,
1849
- },
2124
+ alpha: 0.1
2125
+ }
1850
2126
  },
1851
2127
  fgColor: {
1852
2128
  rest: {
1853
- $value: '#c21c2c',
1854
- $type: 'color',
1855
- $extensions: {
2129
+ '$value': '#c21c2c',
2130
+ '$type': 'color',
2131
+ '$extensions': {
1856
2132
  'org.primer.figma': {
1857
2133
  collection: 'mode',
1858
2134
  group: 'component (internal)',
1859
- scopes: ['fgColor'],
2135
+ scopes: [
2136
+ 'fgColor'
2137
+ ]
1860
2138
  },
1861
2139
  'org.primer.overrides': {
1862
2140
  dark: {
1863
- $value: '{fgColor.danger}',
2141
+ '$value': '{fgColor.danger}'
1864
2142
  },
1865
2143
  'light-high-contrast': {
1866
- $value: '{fgColor.danger}',
2144
+ '$value': '{fgColor.danger}'
1867
2145
  },
1868
2146
  'light-tritanopia-high-contrast': {
1869
- $value: '{fgColor.danger}',
2147
+ '$value': '{fgColor.danger}'
1870
2148
  },
1871
2149
  'light-protanopia-deuteranopia': {
1872
- $value: '{base.color.orange.6}',
2150
+ '$value': '{base.color.orange.6}'
1873
2151
  },
1874
2152
  'light-protanopia-deuteranopia-high-contrast': {
1875
- $value: '{fgColor.danger}',
1876
- },
1877
- },
1878
- },
2153
+ '$value': '{fgColor.danger}'
2154
+ }
2155
+ }
2156
+ }
1879
2157
  },
1880
2158
  hover: {
1881
- $value: '{base.color.neutral.0}',
1882
- $type: 'color',
1883
- $extensions: {
2159
+ '$value': '{base.color.neutral.0}',
2160
+ '$type': 'color',
2161
+ '$extensions': {
1884
2162
  'org.primer.figma': {
1885
2163
  collection: 'mode',
1886
2164
  group: 'component (internal)',
1887
- scopes: ['fgColor'],
2165
+ scopes: [
2166
+ 'fgColor'
2167
+ ]
1888
2168
  },
1889
2169
  'org.primer.overrides': {
1890
2170
  dark: {
1891
- $value: '{base.color.neutral.13}',
1892
- },
1893
- },
1894
- },
2171
+ '$value': '{base.color.neutral.13}'
2172
+ }
2173
+ }
2174
+ }
1895
2175
  },
1896
2176
  disabled: {
1897
- $value: '{fgColor.danger}',
1898
- $type: 'color',
1899
- $extensions: {
2177
+ '$value': '{fgColor.danger}',
2178
+ '$type': 'color',
2179
+ '$extensions': {
1900
2180
  'org.primer.figma': {
1901
2181
  collection: 'mode',
1902
2182
  group: 'component (internal)',
1903
- scopes: ['fgColor'],
2183
+ scopes: [
2184
+ 'fgColor'
2185
+ ]
1904
2186
  },
1905
2187
  'org.primer.overrides': {
1906
2188
  dark: {
1907
- $value: '{fgColor.danger}',
1908
- alpha: 0.5,
1909
- },
1910
- },
2189
+ '$value': '{fgColor.danger}',
2190
+ alpha: 0.5
2191
+ }
2192
+ }
1911
2193
  },
1912
- alpha: 0.5,
1913
- },
1914
- },
1915
- },
2194
+ alpha: 0.5
2195
+ }
2196
+ }
2197
+ }
1916
2198
  },
1917
2199
  buttonKeybindingHint: {
1918
2200
  default: {
1919
2201
  bgColor: {
1920
2202
  rest: {
1921
- $value: '{base.color.neutral.2}',
1922
- $type: 'color',
1923
- $extensions: {
2203
+ '$value': '{base.color.neutral.2}',
2204
+ '$type': 'color',
2205
+ '$extensions': {
1924
2206
  'org.primer.figma': {
1925
2207
  collection: 'mode',
1926
2208
  group: 'component (internal)',
1927
- scopes: ['bgColor'],
2209
+ scopes: [
2210
+ 'bgColor'
2211
+ ]
1928
2212
  },
1929
2213
  'org.primer.overrides': {
1930
2214
  dark: {
1931
- $value: '{base.color.neutral.5}',
2215
+ '$value': '{base.color.neutral.5}'
1932
2216
  },
1933
2217
  'dark-high-contrast': '{base.color.neutral.4}',
1934
2218
  'dark-protanopia-deuteranopia-high-contrast': '{base.color.neutral.4}',
1935
- 'dark-tritanopia-high-contrast': '{base.color.neutral.4}',
1936
- },
1937
- },
2219
+ 'dark-tritanopia-high-contrast': '{base.color.neutral.4}'
2220
+ }
2221
+ }
1938
2222
  },
1939
2223
  disabled: {
1940
- $value: '{buttonKeybindingHint.default.bgColor.rest}',
1941
- $type: 'color',
1942
- $extensions: {
2224
+ '$value': '{buttonKeybindingHint.default.bgColor.rest}',
2225
+ '$type': 'color',
2226
+ '$extensions': {
1943
2227
  'org.primer.figma': {
1944
2228
  collection: 'mode',
1945
2229
  group: 'component (internal)',
1946
- scopes: ['bgColor'],
1947
- },
1948
- },
1949
- },
2230
+ scopes: [
2231
+ 'bgColor'
2232
+ ]
2233
+ }
2234
+ }
2235
+ }
1950
2236
  },
1951
2237
  borderColor: {
1952
2238
  rest: {
1953
- $value: '{borderColor.muted}',
1954
- $type: 'color',
1955
- $extensions: {
2239
+ '$value': '{borderColor.muted}',
2240
+ '$type': 'color',
2241
+ '$extensions': {
1956
2242
  'org.primer.figma': {
1957
2243
  collection: 'mode',
1958
2244
  group: 'component (internal)',
1959
- scopes: ['borderColor'],
1960
- },
1961
- },
2245
+ scopes: [
2246
+ 'borderColor'
2247
+ ]
2248
+ }
2249
+ }
1962
2250
  },
1963
2251
  disabled: {
1964
- $value: '{control.borderColor.disabled}',
1965
- $type: 'color',
1966
- $extensions: {
2252
+ '$value': '{control.borderColor.disabled}',
2253
+ '$type': 'color',
2254
+ '$extensions': {
1967
2255
  'org.primer.figma': {
1968
2256
  collection: 'mode',
1969
2257
  group: 'component (internal)',
1970
- scopes: ['borderColor'],
1971
- },
1972
- },
1973
- },
2258
+ scopes: [
2259
+ 'borderColor'
2260
+ ]
2261
+ }
2262
+ }
2263
+ }
1974
2264
  },
1975
2265
  fgColor: {
1976
2266
  rest: {
1977
- $value: '{fgColor.muted}',
1978
- $type: 'color',
1979
- $extensions: {
2267
+ '$value': '{fgColor.muted}',
2268
+ '$type': 'color',
2269
+ '$extensions': {
1980
2270
  'org.primer.figma': {
1981
2271
  collection: 'mode',
1982
2272
  group: 'component (internal)',
1983
- scopes: ['fgColor'],
1984
- },
1985
- },
2273
+ scopes: [
2274
+ 'fgColor'
2275
+ ]
2276
+ }
2277
+ }
1986
2278
  },
1987
2279
  disabled: {
1988
- $value: '{control.fgColor.disabled}',
1989
- $type: 'color',
1990
- $extensions: {
2280
+ '$value': '{control.fgColor.disabled}',
2281
+ '$type': 'color',
2282
+ '$extensions': {
1991
2283
  'org.primer.figma': {
1992
2284
  collection: 'mode',
1993
2285
  group: 'component (internal)',
1994
- scopes: ['fgColor'],
1995
- },
1996
- },
1997
- },
1998
- },
2286
+ scopes: [
2287
+ 'fgColor'
2288
+ ]
2289
+ }
2290
+ }
2291
+ }
2292
+ }
1999
2293
  },
2000
2294
  invisible: {
2001
2295
  bgColor: {
2002
2296
  rest: {
2003
- $value: '{buttonKeybindingHint.default.bgColor.rest}',
2004
- $type: 'color',
2005
- $extensions: {
2297
+ '$value': '{buttonKeybindingHint.default.bgColor.rest}',
2298
+ '$type': 'color',
2299
+ '$extensions': {
2006
2300
  'org.primer.figma': {
2007
2301
  collection: 'mode',
2008
2302
  group: 'component (internal)',
2009
- scopes: ['bgColor'],
2010
- },
2011
- },
2303
+ scopes: [
2304
+ 'bgColor'
2305
+ ]
2306
+ }
2307
+ }
2012
2308
  },
2013
2309
  hover: {
2014
- $value: '{control.transparent.bgColor.hover}',
2015
- $type: 'color',
2016
- $extensions: {
2310
+ '$value': '{control.transparent.bgColor.hover}',
2311
+ '$type': 'color',
2312
+ '$extensions': {
2017
2313
  'org.primer.figma': {
2018
2314
  collection: 'mode',
2019
2315
  group: 'component (internal)',
2020
- scopes: ['bgColor'],
2021
- },
2022
- },
2316
+ scopes: [
2317
+ 'bgColor'
2318
+ ]
2319
+ }
2320
+ }
2023
2321
  },
2024
2322
  active: {
2025
- $value: '{control.transparent.bgColor.active}',
2026
- $type: 'color',
2027
- $extensions: {
2323
+ '$value': '{control.transparent.bgColor.active}',
2324
+ '$type': 'color',
2325
+ '$extensions': {
2028
2326
  'org.primer.figma': {
2029
2327
  collection: 'mode',
2030
2328
  group: 'component (internal)',
2031
- scopes: ['bgColor'],
2032
- },
2033
- },
2329
+ scopes: [
2330
+ 'bgColor'
2331
+ ]
2332
+ }
2333
+ }
2034
2334
  },
2035
2335
  disabled: {
2036
- $value: '{button.invisible.bgColor.disabled}',
2037
- $type: 'color',
2038
- $extensions: {
2336
+ '$value': '{button.invisible.bgColor.disabled}',
2337
+ '$type': 'color',
2338
+ '$extensions': {
2039
2339
  'org.primer.figma': {
2040
2340
  collection: 'mode',
2041
2341
  group: 'component (internal)',
2042
- scopes: ['bgColor'],
2043
- },
2044
- },
2045
- },
2342
+ scopes: [
2343
+ 'bgColor'
2344
+ ]
2345
+ }
2346
+ }
2347
+ }
2046
2348
  },
2047
2349
  borderColor: {
2048
2350
  rest: {
2049
- $value: '{base.color.transparent}',
2050
- $type: 'color',
2051
- $extensions: {
2351
+ '$value': '{base.color.transparent}',
2352
+ '$type': 'color',
2353
+ '$extensions': {
2052
2354
  'org.primer.figma': {
2053
2355
  collection: 'mode',
2054
2356
  group: 'component (internal)',
2055
- scopes: ['borderColor'],
2357
+ scopes: [
2358
+ 'borderColor'
2359
+ ]
2056
2360
  },
2057
2361
  'org.primer.overrides': {
2058
2362
  'dark-high-contrast': {
2059
- $value: '{borderColor.muted}',
2363
+ '$value': '{borderColor.muted}'
2060
2364
  },
2061
2365
  'dark-tritanopia-high-contrast': {
2062
- $value: '{borderColor.muted}',
2366
+ '$value': '{borderColor.muted}'
2063
2367
  },
2064
2368
  'dark-protanopia-deuteranopia-high-contrast': {
2065
- $value: '{borderColor.muted}',
2369
+ '$value': '{borderColor.muted}'
2066
2370
  },
2067
2371
  'light-high-contrast': {
2068
- $value: '{borderColor.muted}',
2372
+ '$value': '{borderColor.muted}'
2069
2373
  },
2070
2374
  'light-tritanopia-high-contrast': {
2071
- $value: '{borderColor.muted}',
2375
+ '$value': '{borderColor.muted}'
2072
2376
  },
2073
2377
  'light-protanopia-deuteranopia-high-contrast': {
2074
- $value: '{borderColor.muted}',
2075
- },
2076
- },
2077
- },
2378
+ '$value': '{borderColor.muted}'
2379
+ }
2380
+ }
2381
+ }
2078
2382
  },
2079
2383
  disabled: {
2080
- $value: '{control.borderColor.disabled}',
2081
- $type: 'color',
2082
- $extensions: {
2384
+ '$value': '{control.borderColor.disabled}',
2385
+ '$type': 'color',
2386
+ '$extensions': {
2083
2387
  'org.primer.figma': {
2084
2388
  collection: 'mode',
2085
2389
  group: 'component (internal)',
2086
- scopes: ['borderColor'],
2087
- },
2088
- },
2089
- },
2390
+ scopes: [
2391
+ 'borderColor'
2392
+ ]
2393
+ }
2394
+ }
2395
+ }
2090
2396
  },
2091
2397
  fgColor: {
2092
2398
  rest: {
2093
- $value: '{fgColor.muted}',
2094
- $type: 'color',
2095
- $extensions: {
2399
+ '$value': '{fgColor.muted}',
2400
+ '$type': 'color',
2401
+ '$extensions': {
2096
2402
  'org.primer.figma': {
2097
2403
  collection: 'mode',
2098
2404
  group: 'component (internal)',
2099
- scopes: ['borderColor'],
2100
- },
2101
- },
2405
+ scopes: [
2406
+ 'borderColor'
2407
+ ]
2408
+ }
2409
+ }
2102
2410
  },
2103
2411
  disabled: {
2104
- $value: '{control.fgColor.disabled}',
2105
- $type: 'color',
2106
- $extensions: {
2412
+ '$value': '{control.fgColor.disabled}',
2413
+ '$type': 'color',
2414
+ '$extensions': {
2107
2415
  'org.primer.figma': {
2108
2416
  collection: 'mode',
2109
2417
  group: 'component (internal)',
2110
- scopes: ['borderColor'],
2111
- },
2112
- },
2113
- },
2114
- },
2418
+ scopes: [
2419
+ 'borderColor'
2420
+ ]
2421
+ }
2422
+ }
2423
+ }
2424
+ }
2115
2425
  },
2116
2426
  primary: {
2117
2427
  bgColor: {
2118
2428
  rest: {
2119
- $value: '{buttonCounter.primary.bgColor.rest}',
2120
- $type: 'color',
2121
- $extensions: {
2429
+ '$value': '{buttonCounter.primary.bgColor.rest}',
2430
+ '$type': 'color',
2431
+ '$extensions': {
2122
2432
  'org.primer.figma': {
2123
2433
  collection: 'mode',
2124
2434
  group: 'component (internal)',
2125
- scopes: ['bgColor'],
2126
- },
2127
- },
2435
+ scopes: [
2436
+ 'bgColor'
2437
+ ]
2438
+ }
2439
+ }
2128
2440
  },
2129
2441
  disabled: {
2130
- $value: '{buttonCounter.primary.bgColor.rest}',
2131
- $type: 'color',
2132
- $extensions: {
2442
+ '$value': '{buttonCounter.primary.bgColor.rest}',
2443
+ '$type': 'color',
2444
+ '$extensions': {
2133
2445
  'org.primer.figma': {
2134
2446
  collection: 'mode',
2135
2447
  group: 'component (internal)',
2136
- scopes: ['bgColor'],
2137
- },
2448
+ scopes: [
2449
+ 'bgColor'
2450
+ ]
2451
+ }
2138
2452
  },
2139
- alpha: 0.1,
2140
- },
2453
+ alpha: 0.1
2454
+ }
2141
2455
  },
2142
2456
  borderColor: {
2143
2457
  rest: {
2144
- $value: '{borderColor.translucent}',
2145
- $type: 'color',
2146
- $extensions: {
2458
+ '$value': '{borderColor.translucent}',
2459
+ '$type': 'color',
2460
+ '$extensions': {
2147
2461
  'org.primer.figma': {
2148
2462
  collection: 'mode',
2149
2463
  group: 'component (internal)',
2150
- scopes: ['borderColor'],
2464
+ scopes: [
2465
+ 'borderColor'
2466
+ ]
2151
2467
  },
2152
2468
  'org.primer.overrides': {
2153
2469
  'dark-dimmed': {
2154
- $value: '{buttonCounter.primary.bgColor.rest}',
2155
- alpha: 0.1,
2470
+ '$value': '{buttonCounter.primary.bgColor.rest}',
2471
+ alpha: 0.1
2156
2472
  },
2157
2473
  'dark-dimmed-high-contrast': {
2158
- $value: '{base.color.white}',
2474
+ '$value': '{base.color.white}'
2159
2475
  },
2160
2476
  dark: {
2161
- $value: '{buttonCounter.primary.bgColor.rest}',
2162
- alpha: 0.1,
2477
+ '$value': '{buttonCounter.primary.bgColor.rest}',
2478
+ alpha: 0.1
2163
2479
  },
2164
2480
  'dark-high-contrast': {
2165
- $value: '{base.color.white}',
2481
+ '$value': '{base.color.white}'
2166
2482
  },
2167
2483
  'dark-tritanopia-high-contrast': {
2168
- $value: '{base.color.white}',
2484
+ '$value': '{base.color.white}'
2169
2485
  },
2170
2486
  'dark-protanopia-deuteranopia-high-contrast': {
2171
- $value: '{base.color.white}',
2487
+ '$value': '{base.color.white}'
2172
2488
  },
2173
2489
  'light-high-contrast': {
2174
- $value: '{base.color.white}',
2490
+ '$value': '{base.color.white}'
2175
2491
  },
2176
2492
  'light-tritanopia-high-contrast': {
2177
- $value: '{base.color.white}',
2493
+ '$value': '{base.color.white}'
2178
2494
  },
2179
2495
  'light-protanopia-deuteranopia-high-contrast': {
2180
- $value: '{base.color.white}',
2181
- },
2182
- },
2183
- },
2496
+ '$value': '{base.color.white}'
2497
+ }
2498
+ }
2499
+ }
2184
2500
  },
2185
2501
  disabled: {
2186
- $value: '{control.borderColor.disabled}',
2187
- $type: 'color',
2188
- $extensions: {
2502
+ '$value': '{control.borderColor.disabled}',
2503
+ '$type': 'color',
2504
+ '$extensions': {
2189
2505
  'org.primer.figma': {
2190
2506
  collection: 'mode',
2191
2507
  group: 'component (internal)',
2192
- scopes: ['borderColor'],
2193
- },
2194
- },
2195
- },
2508
+ scopes: [
2509
+ 'borderColor'
2510
+ ]
2511
+ }
2512
+ }
2513
+ }
2196
2514
  },
2197
2515
  fgColor: {
2198
2516
  rest: {
2199
- $value: '{fgColor.onEmphasis}',
2200
- $type: 'color',
2201
- $extensions: {
2517
+ '$value': '{fgColor.onEmphasis}',
2518
+ '$type': 'color',
2519
+ '$extensions': {
2202
2520
  'org.primer.figma': {
2203
2521
  collection: 'mode',
2204
2522
  group: 'component (internal)',
2205
- scopes: ['fgColor'],
2206
- },
2207
- },
2523
+ scopes: [
2524
+ 'fgColor'
2525
+ ]
2526
+ }
2527
+ }
2208
2528
  },
2209
2529
  disabled: {
2210
- $value: '{button.primary.fgColor.disabled}',
2211
- $type: 'color',
2212
- $extensions: {
2530
+ '$value': '{button.primary.fgColor.disabled}',
2531
+ '$type': 'color',
2532
+ '$extensions': {
2213
2533
  'org.primer.figma': {
2214
2534
  collection: 'mode',
2215
2535
  group: 'component (internal)',
2216
- scopes: ['fgColor'],
2217
- },
2218
- },
2219
- },
2220
- },
2536
+ scopes: [
2537
+ 'fgColor'
2538
+ ]
2539
+ }
2540
+ }
2541
+ }
2542
+ }
2221
2543
  },
2222
2544
  danger: {
2223
2545
  bgColor: {
2224
2546
  rest: {
2225
- $value: '{buttonKeybindingHint.default.bgColor.rest}',
2226
- $type: 'color',
2227
- $extensions: {
2547
+ '$value': '{buttonKeybindingHint.default.bgColor.rest}',
2548
+ '$type': 'color',
2549
+ '$extensions': {
2228
2550
  'org.primer.figma': {
2229
2551
  collection: 'mode',
2230
2552
  group: 'component (internal)',
2231
- scopes: ['bgColor'],
2232
- },
2233
- },
2553
+ scopes: [
2554
+ 'bgColor'
2555
+ ]
2556
+ }
2557
+ }
2234
2558
  },
2235
2559
  hover: {
2236
- $value: '{base.color.black}',
2237
- $type: 'color',
2238
- $extensions: {
2560
+ '$value': '{base.color.black}',
2561
+ '$type': 'color',
2562
+ '$extensions': {
2239
2563
  'org.primer.figma': {
2240
2564
  collection: 'mode',
2241
2565
  group: 'component (internal)',
2242
- scopes: ['bgColor'],
2243
- },
2566
+ scopes: [
2567
+ 'bgColor'
2568
+ ]
2569
+ }
2244
2570
  },
2245
- alpha: 0.2,
2571
+ alpha: 0.2
2246
2572
  },
2247
2573
  active: {
2248
- $value: '{base.color.black}',
2249
- $type: 'color',
2250
- $extensions: {
2574
+ '$value': '{base.color.black}',
2575
+ '$type': 'color',
2576
+ '$extensions': {
2251
2577
  'org.primer.figma': {
2252
2578
  collection: 'mode',
2253
2579
  group: 'component (internal)',
2254
- scopes: ['bgColor'],
2255
- },
2580
+ scopes: [
2581
+ 'bgColor'
2582
+ ]
2583
+ }
2256
2584
  },
2257
- alpha: 0.4,
2585
+ alpha: 0.4
2258
2586
  },
2259
2587
  disabled: {
2260
- $value: '{buttonKeybindingHint.default.bgColor.disabled}',
2261
- $type: 'color',
2262
- $extensions: {
2588
+ '$value': '{buttonKeybindingHint.default.bgColor.disabled}',
2589
+ '$type': 'color',
2590
+ '$extensions': {
2263
2591
  'org.primer.figma': {
2264
2592
  collection: 'mode',
2265
2593
  group: 'component (internal)',
2266
- scopes: ['bgColor'],
2267
- },
2268
- },
2269
- },
2594
+ scopes: [
2595
+ 'bgColor'
2596
+ ]
2597
+ }
2598
+ }
2599
+ }
2270
2600
  },
2271
2601
  borderColor: {
2272
2602
  rest: {
2273
- $value: '{buttonKeybindingHint.default.borderColor.rest}',
2274
- $type: 'color',
2275
- $extensions: {
2603
+ '$value': '{buttonKeybindingHint.default.borderColor.rest}',
2604
+ '$type': 'color',
2605
+ '$extensions': {
2276
2606
  'org.primer.figma': {
2277
2607
  collection: 'mode',
2278
2608
  group: 'component (internal)',
2279
- scopes: ['borderColor'],
2280
- },
2281
- },
2609
+ scopes: [
2610
+ 'borderColor'
2611
+ ]
2612
+ }
2613
+ }
2282
2614
  },
2283
2615
  hover: {
2284
- $value: '{borderColor.translucent}',
2285
- $type: 'color',
2286
- $extensions: {
2616
+ '$value': '{borderColor.translucent}',
2617
+ '$type': 'color',
2618
+ '$extensions': {
2287
2619
  'org.primer.figma': {
2288
2620
  collection: 'mode',
2289
2621
  group: 'component (internal)',
2290
- scopes: ['borderColor'],
2622
+ scopes: [
2623
+ 'borderColor'
2624
+ ]
2291
2625
  },
2292
2626
  'org.primer.overrides': {
2293
2627
  dark: {
2294
- $value: '{base.color.black}',
2295
- alpha: 0.1,
2628
+ '$value': '{base.color.black}',
2629
+ alpha: 0.1
2296
2630
  },
2297
2631
  'dark-dimmed': {
2298
- $value: '{base.color.black}',
2299
- alpha: 0.1,
2632
+ '$value': '{base.color.black}',
2633
+ alpha: 0.1
2300
2634
  },
2301
2635
  'dark-dimmed-high-contrast': {
2302
- $value: '{base.color.white}',
2636
+ '$value': '{base.color.white}'
2303
2637
  },
2304
2638
  'dark-high-contrast': {
2305
- $value: '{base.color.white}',
2639
+ '$value': '{base.color.white}'
2306
2640
  },
2307
2641
  'dark-tritanopia-high-contrast': {
2308
- $value: '{base.color.white}',
2642
+ '$value': '{base.color.white}'
2309
2643
  },
2310
2644
  'dark-protanopia-deuteranopia-high-contrast': {
2311
- $value: '{base.color.white}',
2645
+ '$value': '{base.color.white}'
2312
2646
  },
2313
2647
  'light-high-contrast': {
2314
- $value: '{base.color.white}',
2648
+ '$value': '{base.color.white}'
2315
2649
  },
2316
2650
  'light-tritanopia-high-contrast': {
2317
- $value: '{base.color.white}',
2651
+ '$value': '{base.color.white}'
2318
2652
  },
2319
2653
  'light-protanopia-deuteranopia-high-contrast': {
2320
- $value: '{base.color.white}',
2321
- },
2322
- },
2323
- },
2654
+ '$value': '{base.color.white}'
2655
+ }
2656
+ }
2657
+ }
2324
2658
  },
2325
2659
  active: {
2326
- $value: '{buttonKeybindingHint.danger.borderColor.hover}',
2327
- $type: 'color',
2328
- $extensions: {
2660
+ '$value': '{buttonKeybindingHint.danger.borderColor.hover}',
2661
+ '$type': 'color',
2662
+ '$extensions': {
2329
2663
  'org.primer.figma': {
2330
2664
  collection: 'mode',
2331
2665
  group: 'component (internal)',
2332
- scopes: ['borderColor'],
2333
- },
2334
- },
2666
+ scopes: [
2667
+ 'borderColor'
2668
+ ]
2669
+ }
2670
+ }
2335
2671
  },
2336
2672
  disabled: {
2337
- $value: '{buttonKeybindingHint.default.borderColor.disabled}',
2338
- $type: 'color',
2339
- $extensions: {
2673
+ '$value': '{buttonKeybindingHint.default.borderColor.disabled}',
2674
+ '$type': 'color',
2675
+ '$extensions': {
2340
2676
  'org.primer.figma': {
2341
2677
  collection: 'mode',
2342
2678
  group: 'component (internal)',
2343
- scopes: ['borderColor'],
2344
- },
2345
- },
2346
- },
2679
+ scopes: [
2680
+ 'borderColor'
2681
+ ]
2682
+ }
2683
+ }
2684
+ }
2347
2685
  },
2348
2686
  fgColor: {
2349
2687
  rest: {
2350
- $value: '{buttonKeybindingHint.default.fgColor.rest}',
2351
- $type: 'color',
2352
- $extensions: {
2688
+ '$value': '{buttonKeybindingHint.default.fgColor.rest}',
2689
+ '$type': 'color',
2690
+ '$extensions': {
2353
2691
  'org.primer.figma': {
2354
2692
  collection: 'mode',
2355
2693
  group: 'component (internal)',
2356
- scopes: ['fgColor'],
2357
- },
2358
- },
2694
+ scopes: [
2695
+ 'fgColor'
2696
+ ]
2697
+ }
2698
+ }
2359
2699
  },
2360
2700
  hover: {
2361
- $value: '{fgColor.onEmphasis}',
2362
- $type: 'color',
2363
- $extensions: {
2701
+ '$value': '{fgColor.onEmphasis}',
2702
+ '$type': 'color',
2703
+ '$extensions': {
2364
2704
  'org.primer.figma': {
2365
2705
  collection: 'mode',
2366
2706
  group: 'component (internal)',
2367
- scopes: ['fgColor'],
2368
- },
2369
- },
2707
+ scopes: [
2708
+ 'fgColor'
2709
+ ]
2710
+ }
2711
+ }
2370
2712
  },
2371
2713
  active: {
2372
- $value: '{fgColor.onEmphasis}',
2373
- $type: 'color',
2374
- $extensions: {
2714
+ '$value': '{fgColor.onEmphasis}',
2715
+ '$type': 'color',
2716
+ '$extensions': {
2375
2717
  'org.primer.figma': {
2376
2718
  collection: 'mode',
2377
2719
  group: 'component (internal)',
2378
- scopes: ['fgColor'],
2379
- },
2380
- },
2720
+ scopes: [
2721
+ 'fgColor'
2722
+ ]
2723
+ }
2724
+ }
2381
2725
  },
2382
2726
  disabled: {
2383
- $value: '{buttonKeybindingHint.default.fgColor.disabled}',
2384
- $type: 'color',
2385
- $extensions: {
2727
+ '$value': '{buttonKeybindingHint.default.fgColor.disabled}',
2728
+ '$type': 'color',
2729
+ '$extensions': {
2386
2730
  'org.primer.figma': {
2387
2731
  collection: 'mode',
2388
2732
  group: 'component (internal)',
2389
- scopes: ['fgColor'],
2390
- },
2391
- },
2392
- },
2393
- },
2733
+ scopes: [
2734
+ 'fgColor'
2735
+ ]
2736
+ }
2737
+ }
2738
+ }
2739
+ }
2394
2740
  },
2395
2741
  inactive: {
2396
2742
  bgColor: {
2397
- $value: '{base.color.neutral.2}',
2398
- $type: 'color',
2399
- $extensions: {
2743
+ '$value': '{base.color.neutral.2}',
2744
+ '$type': 'color',
2745
+ '$extensions': {
2400
2746
  'org.primer.figma': {
2401
2747
  collection: 'mode',
2402
2748
  group: 'component (internal)',
2403
- scopes: ['bgColor'],
2749
+ scopes: [
2750
+ 'bgColor'
2751
+ ]
2404
2752
  },
2405
2753
  'org.primer.overrides': {
2406
2754
  dark: {
2407
- $value: '{base.color.neutral.5}',
2755
+ '$value': '{base.color.neutral.5}'
2408
2756
  },
2409
2757
  'dark-high-contrast': '{base.color.neutral.4}',
2410
2758
  'dark-protanopia-deuteranopia-high-contrast': '{base.color.neutral.4}',
2411
- 'dark-tritanopia-high-contrast': '{base.color.neutral.4}',
2412
- },
2413
- },
2759
+ 'dark-tritanopia-high-contrast': '{base.color.neutral.4}'
2760
+ }
2761
+ }
2414
2762
  },
2415
2763
  borderColor: {
2416
- $value: '{borderColor.muted}',
2417
- $type: 'color',
2418
- $extensions: {
2764
+ '$value': '{borderColor.muted}',
2765
+ '$type': 'color',
2766
+ '$extensions': {
2419
2767
  'org.primer.figma': {
2420
2768
  collection: 'mode',
2421
2769
  group: 'component (internal)',
2422
- scopes: ['borderColor'],
2423
- },
2424
- },
2770
+ scopes: [
2771
+ 'borderColor'
2772
+ ]
2773
+ }
2774
+ }
2425
2775
  },
2426
2776
  fgColor: {
2427
- $value: '{button.inactive.fgColor}',
2428
- $type: 'color',
2429
- $extensions: {
2777
+ '$value': '{button.inactive.fgColor}',
2778
+ '$type': 'color',
2779
+ '$extensions': {
2430
2780
  'org.primer.figma': {
2431
2781
  collection: 'mode',
2432
2782
  group: 'component (internal)',
2433
- scopes: ['fgColor'],
2434
- },
2435
- },
2436
- },
2437
- },
2438
- },
2783
+ scopes: [
2784
+ 'fgColor'
2785
+ ]
2786
+ }
2787
+ }
2788
+ }
2789
+ }
2790
+ }
2439
2791
  }