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

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