@gitlab/ui 136.2.0 → 136.3.1

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 (28) hide show
  1. package/dist/components/base/filtered_search/filtered_search_term.js +1 -1
  2. package/dist/components/base/form/form_date/form_date.js +9 -1
  3. package/dist/components/base/sorting/sorting.js +2 -2
  4. package/dist/components/base/toggle/toggle.js +1 -0
  5. package/dist/index.css +2 -2
  6. package/dist/index.css.map +1 -1
  7. package/dist/tokens/build/js/tokens.dark.js +35 -17
  8. package/dist/tokens/build/js/tokens.js +35 -17
  9. package/package.json +1 -1
  10. package/src/components/base/filtered_search/filtered_search_term.vue +0 -1
  11. package/src/components/base/form/form_date/form_date.vue +9 -0
  12. package/src/components/base/sorting/sorting.vue +3 -2
  13. package/src/components/base/toggle/toggle.scss +90 -22
  14. package/src/components/base/toggle/toggle.vue +1 -0
  15. package/src/tokens/build/css/tokens.css +40 -22
  16. package/src/tokens/build/css/tokens.dark.css +40 -22
  17. package/src/tokens/build/figma/mode.dark.json +200 -24
  18. package/src/tokens/build/figma/mode.json +200 -24
  19. package/src/tokens/build/js/tokens.dark.js +34 -16
  20. package/src/tokens/build/js/tokens.js +34 -16
  21. package/src/tokens/build/json/tokens.dark.json +687 -42
  22. package/src/tokens/build/json/tokens.json +687 -42
  23. package/src/tokens/build/scss/_tokens.dark.scss +40 -22
  24. package/src/tokens/build/scss/_tokens.scss +40 -22
  25. package/src/tokens/build/scss/_tokens_custom_properties.scss +18 -0
  26. package/src/tokens/contextual/application-chrome.tokens.json +20 -0
  27. package/src/tokens/contextual/toggle.tokens.json +198 -33
  28. package/src/tokens/semantic/action.tokens.json +14 -0
package/src/tokens/contextual/toggle.tokens.json CHANGED
@@ -5,7 +5,7 @@
5
5
  "color": {
6
6
  "unchecked": {
7
7
  "default": {
8
- "$value": "{control.border.color.default}",
8
+ "$value": "{control.background.color.default}",
9
9
  "$type": "color",
10
10
  "$description": "Used for the track color of an unchecked toggle switch in the default state.",
11
11
  "$extensions": {
@@ -18,7 +18,7 @@
18
18
  "hover": {
19
19
  "$value": "{toggle.switch.track.color.unchecked.default}",
20
20
  "$type": "color",
21
- "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
21
+ "$description": "Used for the track color of an unchecked toggle switch in the hover state. The track is deliberately unchanged from the default state; hover is carried by the track border and the thumb size.",
22
22
  "$extensions": {
23
23
  "com.figma.scopes": [
24
24
  "SHAPE_FILL",
@@ -29,7 +29,7 @@
29
29
  "focus": {
30
30
  "$value": "{toggle.switch.track.color.unchecked.hover}",
31
31
  "$type": "color",
32
- "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
32
+ "$description": "Used for the track color of an unchecked toggle switch in the focus state. The track is deliberately unchanged from the default state; focus is carried by the focus ring, the track border and the thumb size.",
33
33
  "$extensions": {
34
34
  "com.figma.scopes": [
35
35
  "SHAPE_FILL",
@@ -38,7 +38,7 @@
38
38
  }
39
39
  },
40
40
  "active": {
41
- "$value": "{toggle.switch.track.color.unchecked.focus}",
41
+ "$value": "{action.neutral.background.color.active}",
42
42
  "$type": "color",
43
43
  "$description": "Used for the track color of an unchecked toggle switch in the active state.",
44
44
  "$extensions": {
@@ -47,14 +47,22 @@
47
47
  "FRAME_FILL"
48
48
  ]
49
49
  }
50
+ },
51
+ "disabled": {
52
+ "$value": "{control.background.color.default}",
53
+ "$type": "color",
54
+ "$description": "Used for the track color of a disabled unchecked toggle switch.",
55
+ "$extensions": {
56
+ "com.figma.scopes": [
57
+ "SHAPE_FILL",
58
+ "FRAME_FILL"
59
+ ]
60
+ }
50
61
  }
51
62
  },
52
63
  "checked": {
53
64
  "default": {
54
- "$value": {
55
- "default": "{color.neutral.800}",
56
- "dark": "{color.neutral.50}"
57
- },
65
+ "$value": "{action.selected.background.color.default}",
58
66
  "$type": "color",
59
67
  "$description": "Used for the track color of a checked toggle switch in the default state.",
60
68
  "$extensions": {
@@ -65,10 +73,7 @@
65
73
  }
66
74
  },
67
75
  "hover": {
68
- "$value": {
69
- "default": "{color.neutral.950}",
70
- "dark": "{color.neutral.10}"
71
- },
76
+ "$value": "{action.selected.background.color.hover}",
72
77
  "$type": "color",
73
78
  "$description": "Used for the track color of a checked toggle switch in the hover state.",
74
79
  "$extensions": {
@@ -79,7 +84,7 @@
79
84
  }
80
85
  },
81
86
  "focus": {
82
- "$value": "{toggle.switch.track.color.checked.hover}",
87
+ "$value": "{action.selected.background.color.focus}",
83
88
  "$type": "color",
84
89
  "$description": "Used for the track color of a checked toggle switch in the focus state.",
85
90
  "$extensions": {
@@ -90,10 +95,7 @@
90
95
  }
91
96
  },
92
97
  "active": {
93
- "$value": {
94
- "default": "{color.neutral.1000}",
95
- "dark": "{color.neutral.0}"
96
- },
98
+ "$value": "{action.selected.background.color.active}",
97
99
  "$type": "color",
98
100
  "$description": "Used for the track color of a checked toggle switch in the active state.",
99
101
  "$extensions": {
@@ -102,6 +104,146 @@
102
104
  "FRAME_FILL"
103
105
  ]
104
106
  }
107
+ },
108
+ "disabled": {
109
+ "$value": "{action.selected.background.color.disabled}",
110
+ "$type": "color",
111
+ "$description": "Used for the track color of a disabled checked toggle switch, which stays filled so the checked state remains legible.",
112
+ "$extensions": {
113
+ "com.figma.scopes": [
114
+ "SHAPE_FILL",
115
+ "FRAME_FILL"
116
+ ]
117
+ }
118
+ }
119
+ },
120
+ "loading": {
121
+ "$value": "{action.disabled.background.color}",
122
+ "$type": "color",
123
+ "$description": "Used for the track color of a loading toggle switch. A loading toggle renders no thumb and its value is still in flight, so the track carries no checked state.",
124
+ "$extensions": {
125
+ "com.figma.scopes": [
126
+ "SHAPE_FILL",
127
+ "FRAME_FILL"
128
+ ]
129
+ }
130
+ }
131
+ },
132
+ "border": {
133
+ "color": {
134
+ "unchecked": {
135
+ "default": {
136
+ "$value": "{control.border.color.default}",
137
+ "$type": "color",
138
+ "$description": "Used for the track border color of an unchecked toggle switch in the default state.",
139
+ "$extensions": {
140
+ "com.figma.scopes": [
141
+ "STROKE_COLOR"
142
+ ]
143
+ }
144
+ },
145
+ "hover": {
146
+ "$value": "{control.border.color.hover}",
147
+ "$type": "color",
148
+ "$description": "Used for the track border color of an unchecked toggle switch in the hover state.",
149
+ "$extensions": {
150
+ "com.figma.scopes": [
151
+ "STROKE_COLOR"
152
+ ]
153
+ }
154
+ },
155
+ "focus": {
156
+ "$value": "{toggle.switch.track.border.color.unchecked.hover}",
157
+ "$type": "color",
158
+ "$description": "Used for the track border color of an unchecked toggle switch in the focus state.",
159
+ "$extensions": {
160
+ "com.figma.scopes": [
161
+ "STROKE_COLOR"
162
+ ]
163
+ }
164
+ },
165
+ "active": {
166
+ "$value": "{toggle.switch.track.border.color.unchecked.focus}",
167
+ "$type": "color",
168
+ "$description": "Used for the track border color of an unchecked toggle switch in the active state.",
169
+ "$extensions": {
170
+ "com.figma.scopes": [
171
+ "STROKE_COLOR"
172
+ ]
173
+ }
174
+ },
175
+ "disabled": {
176
+ "$value": "{action.disabled.border.color}",
177
+ "$type": "color",
178
+ "$description": "Used for the track border color of a disabled unchecked toggle switch.",
179
+ "$extensions": {
180
+ "com.figma.scopes": [
181
+ "STROKE_COLOR"
182
+ ]
183
+ }
184
+ }
185
+ },
186
+ "checked": {
187
+ "default": {
188
+ "$value": "{action.selected.border.color.default}",
189
+ "$type": "color",
190
+ "$description": "Used for the track border color of a checked toggle switch in the default state.",
191
+ "$extensions": {
192
+ "com.figma.scopes": [
193
+ "STROKE_COLOR"
194
+ ]
195
+ }
196
+ },
197
+ "hover": {
198
+ "$value": "{action.selected.border.color.hover}",
199
+ "$type": "color",
200
+ "$description": "Used for the track border color of a checked toggle switch in the hover state.",
201
+ "$extensions": {
202
+ "com.figma.scopes": [
203
+ "STROKE_COLOR"
204
+ ]
205
+ }
206
+ },
207
+ "focus": {
208
+ "$value": "{action.selected.border.color.focus}",
209
+ "$type": "color",
210
+ "$description": "Used for the track border color of a checked toggle switch in the focus state.",
211
+ "$extensions": {
212
+ "com.figma.scopes": [
213
+ "STROKE_COLOR"
214
+ ]
215
+ }
216
+ },
217
+ "active": {
218
+ "$value": "{action.selected.border.color.active}",
219
+ "$type": "color",
220
+ "$description": "Used for the track border color of a checked toggle switch in the active state.",
221
+ "$extensions": {
222
+ "com.figma.scopes": [
223
+ "STROKE_COLOR"
224
+ ]
225
+ }
226
+ },
227
+ "disabled": {
228
+ "$value": "{toggle.switch.track.color.checked.disabled}",
229
+ "$type": "color",
230
+ "$description": "Used for the track border color of a disabled checked toggle switch, which matches the track color.",
231
+ "$extensions": {
232
+ "com.figma.scopes": [
233
+ "STROKE_COLOR"
234
+ ]
235
+ }
236
+ }
237
+ },
238
+ "loading": {
239
+ "$value": "{toggle.switch.track.color.loading}",
240
+ "$type": "color",
241
+ "$description": "Used for the track border color of a loading toggle switch, which matches the track color so the track reads as a single flat fill.",
242
+ "$extensions": {
243
+ "com.figma.scopes": [
244
+ "STROKE_COLOR"
245
+ ]
246
+ }
105
247
  }
106
248
  }
107
249
  }
@@ -110,7 +252,7 @@
110
252
  "color": {
111
253
  "unchecked": {
112
254
  "default": {
113
- "$value": "{control.indicator.color.selected}",
255
+ "$value": "{action.selected.background.color.default}",
114
256
  "$type": "color",
115
257
  "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
116
258
  "$extensions": {
@@ -152,11 +294,22 @@
152
294
  "FRAME_FILL"
153
295
  ]
154
296
  }
297
+ },
298
+ "disabled": {
299
+ "$value": "{action.disabled.foreground.color}",
300
+ "$type": "color",
301
+ "$description": "Used for the background color of the disabled unchecked toggle switch thumb.",
302
+ "$extensions": {
303
+ "com.figma.scopes": [
304
+ "SHAPE_FILL",
305
+ "FRAME_FILL"
306
+ ]
307
+ }
155
308
  }
156
309
  },
157
310
  "checked": {
158
311
  "default": {
159
- "$value": "{action.strong.confirm.foreground.color.default}",
312
+ "$value": "{action.selected.foreground.color.default}",
160
313
  "$type": "color",
161
314
  "$description": "Used for the background color of the checked toggle switch thumb in the default state.",
162
315
  "$extensions": {
@@ -167,7 +320,7 @@
167
320
  }
168
321
  },
169
322
  "hover": {
170
- "$value": "{action.strong.confirm.foreground.color.hover}",
323
+ "$value": "{action.selected.foreground.color.hover}",
171
324
  "$type": "color",
172
325
  "$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
173
326
  "$extensions": {
@@ -178,7 +331,7 @@
178
331
  }
179
332
  },
180
333
  "focus": {
181
- "$value": "{action.strong.confirm.foreground.color.focus}",
334
+ "$value": "{action.selected.foreground.color.focus}",
182
335
  "$type": "color",
183
336
  "$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
184
337
  "$extensions": {
@@ -189,7 +342,7 @@
189
342
  }
190
343
  },
191
344
  "active": {
192
- "$value": "{action.strong.confirm.foreground.color.active}",
345
+ "$value": "{action.selected.foreground.color.active}",
193
346
  "$type": "color",
194
347
  "$description": "Used for the background color of the checked toggle switch thumb in the active state.",
195
348
  "$extensions": {
@@ -198,18 +351,30 @@
198
351
  "FRAME_FILL"
199
352
  ]
200
353
  }
354
+ },
355
+ "disabled": {
356
+ "$value": "{action.selected.foreground.color.default}",
357
+ "$type": "color",
358
+ "$description": "Used for the background color of the disabled checked toggle switch thumb.",
359
+ "$extensions": {
360
+ "com.figma.scopes": [
361
+ "SHAPE_FILL",
362
+ "FRAME_FILL"
363
+ ]
364
+ }
201
365
  }
202
366
  },
203
367
  "disabled": {
204
- "$value": "{action.disabled.foreground.color}",
368
+ "$value": "{toggle.switch.background.color.unchecked.disabled}",
205
369
  "$type": "color",
206
- "$description": "Used for the background color of the toggle switch thumb in the disabled state.",
370
+ "$description": "Use toggle.switch.background.color.unchecked.disabled instead.",
207
371
  "$extensions": {
208
372
  "com.figma.scopes": [
209
373
  "SHAPE_FILL",
210
374
  "FRAME_FILL"
211
375
  ]
212
- }
376
+ },
377
+ "$deprecated": true
213
378
  }
214
379
  }
215
380
  },
@@ -217,7 +382,7 @@
217
382
  "color": {
218
383
  "unchecked": {
219
384
  "default": {
220
- "$value": "{action.strong.neutral.background.color.default}",
385
+ "$value": "{action.selected.foreground.color.default}",
221
386
  "$type": "color",
222
387
  "$description": "Used for the icon color of an unchecked toggle switch in the default state.",
223
388
  "$extensions": {
@@ -227,7 +392,7 @@
227
392
  }
228
393
  },
229
394
  "hover": {
230
- "$value": "{action.strong.neutral.background.color.hover}",
395
+ "$value": "{action.selected.foreground.color.hover}",
231
396
  "$type": "color",
232
397
  "$description": "Used for the icon color of an unchecked toggle switch in the hover state.",
233
398
  "$extensions": {
@@ -237,7 +402,7 @@
237
402
  }
238
403
  },
239
404
  "focus": {
240
- "$value": "{action.strong.neutral.background.color.focus}",
405
+ "$value": "{action.selected.foreground.color.focus}",
241
406
  "$type": "color",
242
407
  "$description": "Used for the icon color of an unchecked toggle switch in the focus state.",
243
408
  "$extensions": {
@@ -247,7 +412,7 @@
247
412
  }
248
413
  },
249
414
  "active": {
250
- "$value": "{action.strong.neutral.background.color.active}",
415
+ "$value": "{action.selected.foreground.color.active}",
251
416
  "$type": "color",
252
417
  "$description": "Used for the icon color of an unchecked toggle switch in the active state.",
253
418
  "$extensions": {
@@ -259,7 +424,7 @@
259
424
  },
260
425
  "checked": {
261
426
  "default": {
262
- "$value": "{action.strong.confirm.background.color.default}",
427
+ "$value": "{action.selected.background.color.default}",
263
428
  "$type": "color",
264
429
  "$description": "Used for the icon color of a checked toggle switch in the default state.",
265
430
  "$extensions": {
@@ -269,7 +434,7 @@
269
434
  }
270
435
  },
271
436
  "hover": {
272
- "$value": "{action.strong.confirm.background.color.hover}",
437
+ "$value": "{action.selected.background.color.hover}",
273
438
  "$type": "color",
274
439
  "$description": "Used for the icon color of a checked toggle switch in the hover state.",
275
440
  "$extensions": {
@@ -279,7 +444,7 @@
279
444
  }
280
445
  },
281
446
  "focus": {
282
- "$value": "{action.strong.confirm.background.color.focus}",
447
+ "$value": "{action.selected.background.color.focus}",
283
448
  "$type": "color",
284
449
  "$description": "Used for the icon color of a checked toggle switch in the focus state.",
285
450
  "$extensions": {
@@ -289,7 +454,7 @@
289
454
  }
290
455
  },
291
456
  "active": {
292
- "$value": "{action.strong.confirm.background.color.active}",
457
+ "$value": "{action.selected.background.color.active}",
293
458
  "$type": "color",
294
459
  "$description": "Used for the icon color of a checked toggle switch in the active state.",
295
460
  "$extensions": {
package/src/tokens/semantic/action.tokens.json CHANGED
@@ -167,6 +167,20 @@
167
167
  "SHAPE_FILL"
168
168
  ]
169
169
  }
170
+ },
171
+ "disabled": {
172
+ "$value": {
173
+ "default": "{color.neutral.400}",
174
+ "dark": "{color.neutral.500}"
175
+ },
176
+ "$type": "color",
177
+ "$description": "Used for the background of a disabled action that stays selected. Sits between the disabled background and the enabled selected background so the selected state keeps 3:1 contrast against the page while still reading as disabled.",
178
+ "$extensions": {
179
+ "com.figma.scopes": [
180
+ "FRAME_FILL",
181
+ "SHAPE_FILL"
182
+ ]
183
+ }
170
184
  }
171
185
  }
172
186
  },