@gitlab/ui 134.6.0 → 134.8.0
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.
- package/dist/components/dashboards/dashboard_panel/dashboard_panel.js +5 -3
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +86 -68
- package/dist/tokens/build/js/tokens.js +93 -75
- package/package.json +5 -5
- package/src/components/base/toggle/toggle.scss +75 -51
- package/src/components/dashboards/dashboard_panel/dashboard_panel.vue +4 -1
- package/src/scss/bootstrap_no_utils.scss +33 -0
- package/src/scss/gitlab_ui_no_utils.scss +24 -0
- package/src/scss/themes.scss +10 -5
- package/src/tokens/build/css/tokens.css +76 -58
- package/src/tokens/build/css/tokens.dark.css +74 -56
- package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +145 -0
- package/src/tokens/build/docs/tokens-tailwind-docs.json +145 -0
- package/src/tokens/build/figma/constants.dark.json +2 -2
- package/src/tokens/build/figma/constants.json +2 -2
- package/src/tokens/build/figma/mode.dark.json +206 -108
- package/src/tokens/build/figma/mode.json +209 -87
- package/src/tokens/build/js/tokens.dark.js +85 -67
- package/src/tokens/build/js/tokens.js +92 -74
- package/src/tokens/build/json/tokens.dark.json +846 -225
- package/src/tokens/build/json/tokens.json +850 -229
- package/src/tokens/build/scss/_tokens.dark.scss +74 -56
- package/src/tokens/build/scss/_tokens.scss +76 -58
- package/src/tokens/build/scss/_tokens_custom_properties.scss +18 -0
- package/src/tokens/build/tailwind/tokens.cjs +1 -0
- package/src/tokens/constant/color.alpha.tokens.json +16 -0
- package/src/tokens/contextual/button.tokens.json +34 -58
- package/src/tokens/contextual/tabs.tokens.json +2 -8
- package/src/tokens/contextual/toggle.tokens.json +195 -0
- package/src/tokens/semantic/action.tokens.json +22 -124
- package/src/tokens/semantic/control.tokens.json +9 -21
|
@@ -4,17 +4,11 @@
|
|
|
4
4
|
"indicator": {
|
|
5
5
|
"color": {
|
|
6
6
|
"default": {
|
|
7
|
-
"$value": {
|
|
8
|
-
"default": "{color.blue.500}",
|
|
9
|
-
"dark": "{color.blue.400}"
|
|
10
|
-
},
|
|
7
|
+
"$value": "{action.selected.border.color.active}",
|
|
11
8
|
"$type": "color",
|
|
12
9
|
"$description": "Used for the selected indicator of a tab.",
|
|
13
10
|
"$extensions": {
|
|
14
|
-
"com.figma.scopes": [
|
|
15
|
-
"FRAME_FILL",
|
|
16
|
-
"SHAPE_FILL"
|
|
17
|
-
]
|
|
11
|
+
"com.figma.scopes": ["FRAME_FILL", "SHAPE_FILL"]
|
|
18
12
|
}
|
|
19
13
|
}
|
|
20
14
|
}
|
|
@@ -1,6 +1,201 @@
|
|
|
1
1
|
{
|
|
2
2
|
"toggle": {
|
|
3
3
|
"switch": {
|
|
4
|
+
"track": {
|
|
5
|
+
"color": {
|
|
6
|
+
"unchecked": {
|
|
7
|
+
"default": {
|
|
8
|
+
"$value": "{control.border.color.default}",
|
|
9
|
+
"$type": "color",
|
|
10
|
+
"$description": "Used for the track color of an unchecked toggle switch in the default state.",
|
|
11
|
+
"$extensions": {
|
|
12
|
+
"com.figma.scopes": [
|
|
13
|
+
"SHAPE_FILL"
|
|
14
|
+
]
|
|
15
|
+
}
|
|
16
|
+
},
|
|
17
|
+
"hover": {
|
|
18
|
+
"$value": "{control.border.color.hover}",
|
|
19
|
+
"$type": "color",
|
|
20
|
+
"$description": "Used for the track color of an unchecked toggle switch in the hover state.",
|
|
21
|
+
"$extensions": {
|
|
22
|
+
"com.figma.scopes": [
|
|
23
|
+
"SHAPE_FILL"
|
|
24
|
+
]
|
|
25
|
+
}
|
|
26
|
+
},
|
|
27
|
+
"focus": {
|
|
28
|
+
"$value": "{control.border.color.focus}",
|
|
29
|
+
"$type": "color",
|
|
30
|
+
"$description": "Used for the track color of an unchecked toggle switch in the focus state.",
|
|
31
|
+
"$extensions": {
|
|
32
|
+
"com.figma.scopes": [
|
|
33
|
+
"SHAPE_FILL"
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
},
|
|
37
|
+
"active": {
|
|
38
|
+
"$value": "{control.border.color.focus}",
|
|
39
|
+
"$type": "color",
|
|
40
|
+
"$description": "Used for the track color of an unchecked toggle switch in the active state.",
|
|
41
|
+
"$extensions": {
|
|
42
|
+
"com.figma.scopes": [
|
|
43
|
+
"SHAPE_FILL"
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
"checked": {
|
|
49
|
+
"default": {
|
|
50
|
+
"$value": {
|
|
51
|
+
"default": "{color.neutral.800}",
|
|
52
|
+
"dark": "{color.neutral.50}"
|
|
53
|
+
},
|
|
54
|
+
"$type": "color",
|
|
55
|
+
"$description": "Used for the track color of a checked toggle switch in the default state.",
|
|
56
|
+
"$extensions": {
|
|
57
|
+
"com.figma.scopes": [
|
|
58
|
+
"SHAPE_FILL"
|
|
59
|
+
]
|
|
60
|
+
}
|
|
61
|
+
},
|
|
62
|
+
"hover": {
|
|
63
|
+
"$value": {
|
|
64
|
+
"default": "{color.neutral.950}",
|
|
65
|
+
"dark": "{color.neutral.10}"
|
|
66
|
+
},
|
|
67
|
+
"$type": "color",
|
|
68
|
+
"$description": "Used for the track color of a checked toggle switch in the hover state.",
|
|
69
|
+
"$extensions": {
|
|
70
|
+
"com.figma.scopes": [
|
|
71
|
+
"SHAPE_FILL"
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
"focus": {
|
|
76
|
+
"$value": "{toggle.switch.track.color.checked.hover}",
|
|
77
|
+
"$type": "color",
|
|
78
|
+
"$description": "Used for the track color of a checked toggle switch in the focus state.",
|
|
79
|
+
"$extensions": {
|
|
80
|
+
"com.figma.scopes": [
|
|
81
|
+
"SHAPE_FILL"
|
|
82
|
+
]
|
|
83
|
+
}
|
|
84
|
+
},
|
|
85
|
+
"active": {
|
|
86
|
+
"$value": {
|
|
87
|
+
"default": "{color.neutral.1000}",
|
|
88
|
+
"dark": "{color.neutral.0}"
|
|
89
|
+
},
|
|
90
|
+
"$type": "color",
|
|
91
|
+
"$description": "Used for the track color of a checked toggle switch in the active state.",
|
|
92
|
+
"$extensions": {
|
|
93
|
+
"com.figma.scopes": [
|
|
94
|
+
"SHAPE_FILL"
|
|
95
|
+
]
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
"background": {
|
|
102
|
+
"color": {
|
|
103
|
+
"unchecked": {
|
|
104
|
+
"default": {
|
|
105
|
+
"$value": "{control.indicator.color.selected}",
|
|
106
|
+
"$type": "color",
|
|
107
|
+
"$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
|
|
108
|
+
"$extensions": {
|
|
109
|
+
"com.figma.scopes": [
|
|
110
|
+
"SHAPE_FILL"
|
|
111
|
+
]
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
"hover": {
|
|
115
|
+
"$value": "{toggle.switch.background.color.unchecked.default}",
|
|
116
|
+
"$type": "color",
|
|
117
|
+
"$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.",
|
|
118
|
+
"$extensions": {
|
|
119
|
+
"com.figma.scopes": [
|
|
120
|
+
"SHAPE_FILL"
|
|
121
|
+
]
|
|
122
|
+
}
|
|
123
|
+
},
|
|
124
|
+
"focus": {
|
|
125
|
+
"$value": "{toggle.switch.background.color.unchecked.default}",
|
|
126
|
+
"$type": "color",
|
|
127
|
+
"$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.",
|
|
128
|
+
"$extensions": {
|
|
129
|
+
"com.figma.scopes": [
|
|
130
|
+
"SHAPE_FILL"
|
|
131
|
+
]
|
|
132
|
+
}
|
|
133
|
+
},
|
|
134
|
+
"active": {
|
|
135
|
+
"$value": "{toggle.switch.background.color.unchecked.default}",
|
|
136
|
+
"$type": "color",
|
|
137
|
+
"$description": "Used for the background color of the unchecked toggle switch thumb in the active state.",
|
|
138
|
+
"$extensions": {
|
|
139
|
+
"com.figma.scopes": [
|
|
140
|
+
"SHAPE_FILL"
|
|
141
|
+
]
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
},
|
|
145
|
+
"checked": {
|
|
146
|
+
"default": {
|
|
147
|
+
"$value": "{action.strong.confirm.foreground.color.default}",
|
|
148
|
+
"$type": "color",
|
|
149
|
+
"$description": "Used for the background color of the checked toggle switch thumb in the default state.",
|
|
150
|
+
"$extensions": {
|
|
151
|
+
"com.figma.scopes": [
|
|
152
|
+
"SHAPE_FILL"
|
|
153
|
+
]
|
|
154
|
+
}
|
|
155
|
+
},
|
|
156
|
+
"hover": {
|
|
157
|
+
"$value": "{action.strong.confirm.foreground.color.hover}",
|
|
158
|
+
"$type": "color",
|
|
159
|
+
"$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
|
|
160
|
+
"$extensions": {
|
|
161
|
+
"com.figma.scopes": [
|
|
162
|
+
"SHAPE_FILL"
|
|
163
|
+
]
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
"focus": {
|
|
167
|
+
"$value": "{action.strong.confirm.foreground.color.focus}",
|
|
168
|
+
"$type": "color",
|
|
169
|
+
"$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
|
|
170
|
+
"$extensions": {
|
|
171
|
+
"com.figma.scopes": [
|
|
172
|
+
"SHAPE_FILL"
|
|
173
|
+
]
|
|
174
|
+
}
|
|
175
|
+
},
|
|
176
|
+
"active": {
|
|
177
|
+
"$value": "{action.strong.confirm.foreground.color.active}",
|
|
178
|
+
"$type": "color",
|
|
179
|
+
"$description": "Used for the background color of the checked toggle switch thumb in the active state.",
|
|
180
|
+
"$extensions": {
|
|
181
|
+
"com.figma.scopes": [
|
|
182
|
+
"SHAPE_FILL"
|
|
183
|
+
]
|
|
184
|
+
}
|
|
185
|
+
}
|
|
186
|
+
},
|
|
187
|
+
"disabled": {
|
|
188
|
+
"$value": "{action.disabled.foreground.color}",
|
|
189
|
+
"$type": "color",
|
|
190
|
+
"$description": "Used for the background color of the toggle switch thumb in the disabled state.",
|
|
191
|
+
"$extensions": {
|
|
192
|
+
"com.figma.scopes": [
|
|
193
|
+
"SHAPE_FILL"
|
|
194
|
+
]
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
},
|
|
4
199
|
"icon": {
|
|
5
200
|
"color": {
|
|
6
201
|
"unchecked": {
|
|
@@ -117,8 +117,8 @@
|
|
|
117
117
|
"color": {
|
|
118
118
|
"default": {
|
|
119
119
|
"$value": {
|
|
120
|
-
"default": "{color.
|
|
121
|
-
"dark": "{color.
|
|
120
|
+
"default": "{color.neutral.800}",
|
|
121
|
+
"dark": "{color.neutral.50}"
|
|
122
122
|
},
|
|
123
123
|
"$type": "color",
|
|
124
124
|
"$description": "Used for the background of a selected action in the default state.",
|
|
@@ -131,8 +131,8 @@
|
|
|
131
131
|
},
|
|
132
132
|
"hover": {
|
|
133
133
|
"$value": {
|
|
134
|
-
"default": "{color.
|
|
135
|
-
"dark": "{color.
|
|
134
|
+
"default": "{color.neutral.950}",
|
|
135
|
+
"dark": "{color.neutral.10}"
|
|
136
136
|
},
|
|
137
137
|
"$type": "color",
|
|
138
138
|
"$description": "Used for the background of a selected action in the hover state.",
|
|
@@ -156,8 +156,8 @@
|
|
|
156
156
|
},
|
|
157
157
|
"active": {
|
|
158
158
|
"$value": {
|
|
159
|
-
"default": "{color.
|
|
160
|
-
"dark": "{color.
|
|
159
|
+
"default": "{color.neutral.1000}",
|
|
160
|
+
"dark": "{color.neutral.0}"
|
|
161
161
|
},
|
|
162
162
|
"$type": "color",
|
|
163
163
|
"$description": "Used for the background of a selected action in the active state.",
|
|
@@ -270,26 +270,7 @@
|
|
|
270
270
|
"background": {
|
|
271
271
|
"color": {
|
|
272
272
|
"default": {
|
|
273
|
-
"$value": {
|
|
274
|
-
"default": {
|
|
275
|
-
"colorSpace": "srgb",
|
|
276
|
-
"components": [
|
|
277
|
-
0.6431372549019608,
|
|
278
|
-
0.6392156862745098,
|
|
279
|
-
0.6588235294117647
|
|
280
|
-
],
|
|
281
|
-
"alpha": 0
|
|
282
|
-
},
|
|
283
|
-
"dark": {
|
|
284
|
-
"colorSpace": "srgb",
|
|
285
|
-
"components": [
|
|
286
|
-
0.5372549019607843,
|
|
287
|
-
0.5333333333333333,
|
|
288
|
-
0.5529411764705883
|
|
289
|
-
],
|
|
290
|
-
"alpha": 0
|
|
291
|
-
}
|
|
292
|
-
},
|
|
273
|
+
"$value": "{color.alpha.0}",
|
|
293
274
|
"$type": "color",
|
|
294
275
|
"$description": "Used for the background of a neutral action in the default state.",
|
|
295
276
|
"$extensions": {
|
|
@@ -301,24 +282,8 @@
|
|
|
301
282
|
},
|
|
302
283
|
"hover": {
|
|
303
284
|
"$value": {
|
|
304
|
-
"default": {
|
|
305
|
-
|
|
306
|
-
"components": [
|
|
307
|
-
0.6431372549019608,
|
|
308
|
-
0.6392156862745098,
|
|
309
|
-
0.6588235294117647
|
|
310
|
-
],
|
|
311
|
-
"alpha": 0.16
|
|
312
|
-
},
|
|
313
|
-
"dark": {
|
|
314
|
-
"colorSpace": "srgb",
|
|
315
|
-
"components": [
|
|
316
|
-
0.5372549019607843,
|
|
317
|
-
0.5333333333333333,
|
|
318
|
-
0.5529411764705883
|
|
319
|
-
],
|
|
320
|
-
"alpha": 0.4
|
|
321
|
-
}
|
|
285
|
+
"default": "{color.alpha.dark.6}",
|
|
286
|
+
"dark": "{color.alpha.light.16}"
|
|
322
287
|
},
|
|
323
288
|
"$type": "color",
|
|
324
289
|
"$description": "Used for the background of a neutral action in the hover state.",
|
|
@@ -342,24 +307,8 @@
|
|
|
342
307
|
},
|
|
343
308
|
"active": {
|
|
344
309
|
"$value": {
|
|
345
|
-
"default": {
|
|
346
|
-
|
|
347
|
-
"components": [
|
|
348
|
-
0.3254901960784314,
|
|
349
|
-
0.3176470588235294,
|
|
350
|
-
0.34509803921568627
|
|
351
|
-
],
|
|
352
|
-
"alpha": 0.24
|
|
353
|
-
},
|
|
354
|
-
"dark": {
|
|
355
|
-
"colorSpace": "srgb",
|
|
356
|
-
"components": [
|
|
357
|
-
0.5372549019607843,
|
|
358
|
-
0.5333333333333333,
|
|
359
|
-
0.5529411764705883
|
|
360
|
-
],
|
|
361
|
-
"alpha": 0.16
|
|
362
|
-
}
|
|
310
|
+
"default": "{color.alpha.dark.16}",
|
|
311
|
+
"dark": "{color.alpha.light.8}"
|
|
363
312
|
},
|
|
364
313
|
"$type": "color",
|
|
365
314
|
"$description": "Used for the background of a neutral action in the active state.",
|
|
@@ -422,8 +371,8 @@
|
|
|
422
371
|
"color": {
|
|
423
372
|
"default": {
|
|
424
373
|
"$value": {
|
|
425
|
-
"default": "{color.
|
|
426
|
-
"dark": "{color.
|
|
374
|
+
"default": "{color.neutral.800}",
|
|
375
|
+
"dark": "{color.neutral.50}"
|
|
427
376
|
},
|
|
428
377
|
"$type": "color",
|
|
429
378
|
"$description": "Used for the foreground of a confirm (positive) action in the default state.",
|
|
@@ -436,8 +385,8 @@
|
|
|
436
385
|
},
|
|
437
386
|
"hover": {
|
|
438
387
|
"$value": {
|
|
439
|
-
"default": "{color.
|
|
440
|
-
"dark": "{color.
|
|
388
|
+
"default": "{color.neutral.950}",
|
|
389
|
+
"dark": "{color.neutral.10}"
|
|
441
390
|
},
|
|
442
391
|
"$type": "color",
|
|
443
392
|
"$description": "Used for the foreground of a confirm (positive) action in the hover state.",
|
|
@@ -461,8 +410,8 @@
|
|
|
461
410
|
},
|
|
462
411
|
"active": {
|
|
463
412
|
"$value": {
|
|
464
|
-
"default": "{color.
|
|
465
|
-
"dark": "{color.
|
|
413
|
+
"default": "{color.neutral.1000}",
|
|
414
|
+
"dark": "{color.neutral.0}"
|
|
466
415
|
},
|
|
467
416
|
"$type": "color",
|
|
468
417
|
"$description": "Used for the foreground of a confirm (positive) action in the active state.",
|
|
@@ -478,26 +427,7 @@
|
|
|
478
427
|
"background": {
|
|
479
428
|
"color": {
|
|
480
429
|
"default": {
|
|
481
|
-
"$value": {
|
|
482
|
-
"default": {
|
|
483
|
-
"colorSpace": "srgb",
|
|
484
|
-
"components": [
|
|
485
|
-
0.38823529411764707,
|
|
486
|
-
0.6509803921568628,
|
|
487
|
-
0.9137254901960784
|
|
488
|
-
],
|
|
489
|
-
"alpha": 0
|
|
490
|
-
},
|
|
491
|
-
"dark": {
|
|
492
|
-
"colorSpace": "srgb",
|
|
493
|
-
"components": [
|
|
494
|
-
0.25882352941176473,
|
|
495
|
-
0.5607843137254902,
|
|
496
|
-
0.8627450980392157
|
|
497
|
-
],
|
|
498
|
-
"alpha": 0
|
|
499
|
-
}
|
|
500
|
-
},
|
|
430
|
+
"$value": "{color.alpha.0}",
|
|
501
431
|
"$type": "color",
|
|
502
432
|
"$description": "Used for the background of a confirm (positive) action in the default state.",
|
|
503
433
|
"$extensions": {
|
|
@@ -509,24 +439,8 @@
|
|
|
509
439
|
},
|
|
510
440
|
"hover": {
|
|
511
441
|
"$value": {
|
|
512
|
-
"default": {
|
|
513
|
-
|
|
514
|
-
"components": [
|
|
515
|
-
0.38823529411764707,
|
|
516
|
-
0.6509803921568628,
|
|
517
|
-
0.9137254901960784
|
|
518
|
-
],
|
|
519
|
-
"alpha": 0.16
|
|
520
|
-
},
|
|
521
|
-
"dark": {
|
|
522
|
-
"colorSpace": "srgb",
|
|
523
|
-
"components": [
|
|
524
|
-
0.25882352941176473,
|
|
525
|
-
0.5607843137254902,
|
|
526
|
-
0.8627450980392157
|
|
527
|
-
],
|
|
528
|
-
"alpha": 0.4
|
|
529
|
-
}
|
|
442
|
+
"default": "{color.alpha.dark.6}",
|
|
443
|
+
"dark": "{color.alpha.light.16}"
|
|
530
444
|
},
|
|
531
445
|
"$type": "color",
|
|
532
446
|
"$description": "Used for the background of a confirm (positive) action in the hover state.",
|
|
@@ -550,24 +464,8 @@
|
|
|
550
464
|
},
|
|
551
465
|
"active": {
|
|
552
466
|
"$value": {
|
|
553
|
-
"default": {
|
|
554
|
-
|
|
555
|
-
"components": [
|
|
556
|
-
0.043137254901960784,
|
|
557
|
-
0.3607843137254902,
|
|
558
|
-
0.6784313725490196
|
|
559
|
-
],
|
|
560
|
-
"alpha": 0.24
|
|
561
|
-
},
|
|
562
|
-
"dark": {
|
|
563
|
-
"colorSpace": "srgb",
|
|
564
|
-
"components": [
|
|
565
|
-
0.25882352941176473,
|
|
566
|
-
0.5607843137254902,
|
|
567
|
-
0.8627450980392157
|
|
568
|
-
],
|
|
569
|
-
"alpha": 0.16
|
|
570
|
-
}
|
|
467
|
+
"default": "{color.alpha.dark.16}",
|
|
468
|
+
"dark": "{color.alpha.light.8}"
|
|
571
469
|
},
|
|
572
470
|
"$type": "color",
|
|
573
471
|
"$description": "Used for the background of a confirm (positive) action in the active state.",
|
|
@@ -61,8 +61,8 @@
|
|
|
61
61
|
"selected": {
|
|
62
62
|
"default": {
|
|
63
63
|
"$value": {
|
|
64
|
-
"default": "{color.
|
|
65
|
-
"dark": "{color.
|
|
64
|
+
"default": "{color.neutral.800}",
|
|
65
|
+
"dark": "{color.neutral.50}"
|
|
66
66
|
},
|
|
67
67
|
"$type": "color",
|
|
68
68
|
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background.",
|
|
@@ -75,8 +75,8 @@
|
|
|
75
75
|
},
|
|
76
76
|
"hover": {
|
|
77
77
|
"$value": {
|
|
78
|
-
"default": "{color.
|
|
79
|
-
"dark": "{color.
|
|
78
|
+
"default": "{color.neutral.950}",
|
|
79
|
+
"dark": "{color.neutral.10}"
|
|
80
80
|
},
|
|
81
81
|
"$type": "color",
|
|
82
82
|
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.",
|
|
@@ -88,12 +88,9 @@
|
|
|
88
88
|
}
|
|
89
89
|
},
|
|
90
90
|
"focus": {
|
|
91
|
-
"$value": {
|
|
92
|
-
"default": "{color.blue.700}",
|
|
93
|
-
"dark": "{color.blue.200}"
|
|
94
|
-
},
|
|
91
|
+
"$value": "{control.background.color.selected.hover}",
|
|
95
92
|
"$type": "color",
|
|
96
|
-
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on
|
|
93
|
+
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) background on focus.",
|
|
97
94
|
"$extensions": {
|
|
98
95
|
"com.figma.scopes": [
|
|
99
96
|
"FRAME_FILL",
|
|
@@ -170,10 +167,7 @@
|
|
|
170
167
|
},
|
|
171
168
|
"selected": {
|
|
172
169
|
"default": {
|
|
173
|
-
"$value": {
|
|
174
|
-
"default": "{color.blue.500}",
|
|
175
|
-
"dark": "{color.blue.400}"
|
|
176
|
-
},
|
|
170
|
+
"$value": "{control.background.color.selected.default}",
|
|
177
171
|
"$type": "color",
|
|
178
172
|
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border.",
|
|
179
173
|
"$extensions": {
|
|
@@ -183,10 +177,7 @@
|
|
|
183
177
|
}
|
|
184
178
|
},
|
|
185
179
|
"hover": {
|
|
186
|
-
"$value": {
|
|
187
|
-
"default": "{color.blue.700}",
|
|
188
|
-
"dark": "{color.blue.200}"
|
|
189
|
-
},
|
|
180
|
+
"$value": "{control.background.color.selected.hover}",
|
|
190
181
|
"$type": "color",
|
|
191
182
|
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.",
|
|
192
183
|
"$extensions": {
|
|
@@ -196,10 +187,7 @@
|
|
|
196
187
|
}
|
|
197
188
|
},
|
|
198
189
|
"focus": {
|
|
199
|
-
"$value": {
|
|
200
|
-
"default": "{color.blue.700}",
|
|
201
|
-
"dark": "{color.blue.200}"
|
|
202
|
-
},
|
|
190
|
+
"$value": "{control.background.color.selected.focus}",
|
|
203
191
|
"$type": "color",
|
|
204
192
|
"$description": "Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.",
|
|
205
193
|
"$extensions": {
|