@gitlab/ui 136.3.0 → 136.3.2

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 (47) hide show
  1. package/dist/components/base/collapse/collapse.js +3 -4
  2. package/dist/components/base/filtered_search/filtered_search.js +4 -5
  3. package/dist/components/base/filtered_search/filtered_search_token.js +8 -9
  4. package/dist/components/base/filtered_search/filtered_search_token_segment.js +13 -14
  5. package/dist/components/base/form/form_checkbox/form_checkbox.js +14 -15
  6. package/dist/components/base/form/form_input/form_input.js +9 -11
  7. package/dist/components/base/form/form_radio/form_radio.js +14 -15
  8. package/dist/components/base/form/form_textarea/form_textarea.js +13 -16
  9. package/dist/components/base/infinite_scroll/infinite_scroll.js +17 -19
  10. package/dist/components/base/new_dropdowns/listbox/listbox.js +17 -19
  11. package/dist/components/base/sorting/sorting.js +2 -2
  12. package/dist/components/base/tabs/tabs/scrollable_tabs.js +6 -8
  13. package/dist/components/base/toggle/toggle.js +1 -0
  14. package/dist/components/base/token_selector/token_selector.js +13 -15
  15. package/dist/index.css +2 -2
  16. package/dist/index.css.map +1 -1
  17. package/dist/tokens/build/js/tokens.dark.js +34 -17
  18. package/dist/tokens/build/js/tokens.js +34 -17
  19. package/package.json +4 -4
  20. package/src/components/base/collapse/collapse.vue +3 -4
  21. package/src/components/base/filtered_search/filtered_search.vue +4 -5
  22. package/src/components/base/filtered_search/filtered_search_token.vue +8 -9
  23. package/src/components/base/filtered_search/filtered_search_token_segment.vue +10 -11
  24. package/src/components/base/form/form_checkbox/form_checkbox.vue +14 -15
  25. package/src/components/base/form/form_input/form_input.vue +9 -11
  26. package/src/components/base/form/form_radio/form_radio.vue +14 -15
  27. package/src/components/base/form/form_textarea/form_textarea.vue +13 -16
  28. package/src/components/base/infinite_scroll/infinite_scroll.vue +16 -18
  29. package/src/components/base/new_dropdowns/listbox/listbox.vue +17 -19
  30. package/src/components/base/sorting/sorting.vue +3 -2
  31. package/src/components/base/tabs/tabs/scrollable_tabs.vue +7 -9
  32. package/src/components/base/toggle/toggle.scss +90 -22
  33. package/src/components/base/toggle/toggle.vue +1 -0
  34. package/src/components/base/token_selector/token_selector.vue +12 -14
  35. package/src/tokens/build/css/tokens.css +39 -22
  36. package/src/tokens/build/css/tokens.dark.css +39 -22
  37. package/src/tokens/build/figma/mode.dark.json +189 -24
  38. package/src/tokens/build/figma/mode.json +189 -24
  39. package/src/tokens/build/js/tokens.dark.js +33 -16
  40. package/src/tokens/build/js/tokens.js +33 -16
  41. package/src/tokens/build/json/tokens.dark.json +650 -42
  42. package/src/tokens/build/json/tokens.json +650 -42
  43. package/src/tokens/build/scss/_tokens.dark.scss +39 -22
  44. package/src/tokens/build/scss/_tokens.scss +39 -22
  45. package/src/tokens/build/scss/_tokens_custom_properties.scss +17 -0
  46. package/src/tokens/contextual/toggle.tokens.json +198 -33
  47. package/src/tokens/semantic/action.tokens.json +14 -0
package/src/tokens/build/json/tokens.json CHANGED
@@ -23885,7 +23885,7 @@
23885
23885
  "unchecked": {
23886
23886
  "default": {
23887
23887
  "key": "{toggle.switch.track.color.unchecked.default}",
23888
- "$value": "#89888d",
23888
+ "$value": "#fff",
23889
23889
  "$type": "color",
23890
23890
  "$description": "Used for the track color of an unchecked toggle switch in the default state.",
23891
23891
  "$extensions": {
@@ -23897,7 +23897,7 @@
23897
23897
  "filePath": "src/tokens/contextual/toggle.tokens.json",
23898
23898
  "isSource": true,
23899
23899
  "original": {
23900
- "$value": "{control.border.color.default}",
23900
+ "$value": "{control.background.color.default}",
23901
23901
  "$type": "color",
23902
23902
  "$description": "Used for the track color of an unchecked toggle switch in the default state.",
23903
23903
  "$extensions": {
@@ -23921,9 +23921,9 @@
23921
23921
  },
23922
23922
  "hover": {
23923
23923
  "key": "{toggle.switch.track.color.unchecked.hover}",
23924
- "$value": "#89888d",
23924
+ "$value": "#fff",
23925
23925
  "$type": "color",
23926
- "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
23926
+ "$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.",
23927
23927
  "$extensions": {
23928
23928
  "com.figma.scopes": [
23929
23929
  "SHAPE_FILL",
@@ -23935,7 +23935,7 @@
23935
23935
  "original": {
23936
23936
  "$value": "{toggle.switch.track.color.unchecked.default}",
23937
23937
  "$type": "color",
23938
- "$description": "Used for the track color of an unchecked toggle switch in the hover state.",
23938
+ "$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.",
23939
23939
  "$extensions": {
23940
23940
  "com.figma.scopes": [
23941
23941
  "SHAPE_FILL",
@@ -23957,9 +23957,9 @@
23957
23957
  },
23958
23958
  "focus": {
23959
23959
  "key": "{toggle.switch.track.color.unchecked.focus}",
23960
- "$value": "#89888d",
23960
+ "$value": "#fff",
23961
23961
  "$type": "color",
23962
- "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
23962
+ "$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.",
23963
23963
  "$extensions": {
23964
23964
  "com.figma.scopes": [
23965
23965
  "SHAPE_FILL",
@@ -23971,7 +23971,7 @@
23971
23971
  "original": {
23972
23972
  "$value": "{toggle.switch.track.color.unchecked.hover}",
23973
23973
  "$type": "color",
23974
- "$description": "Used for the track color of an unchecked toggle switch in the focus state.",
23974
+ "$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.",
23975
23975
  "$extensions": {
23976
23976
  "com.figma.scopes": [
23977
23977
  "SHAPE_FILL",
@@ -23993,7 +23993,7 @@
23993
23993
  },
23994
23994
  "active": {
23995
23995
  "key": "{toggle.switch.track.color.unchecked.active}",
23996
- "$value": "#89888d",
23996
+ "$value": "rgba(5, 5, 6, 0.16)",
23997
23997
  "$type": "color",
23998
23998
  "$description": "Used for the track color of an unchecked toggle switch in the active state.",
23999
23999
  "$extensions": {
@@ -24005,7 +24005,7 @@
24005
24005
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24006
24006
  "isSource": true,
24007
24007
  "original": {
24008
- "$value": "{toggle.switch.track.color.unchecked.focus}",
24008
+ "$value": "{action.neutral.background.color.active}",
24009
24009
  "$type": "color",
24010
24010
  "$description": "Used for the track color of an unchecked toggle switch in the active state.",
24011
24011
  "$extensions": {
@@ -24026,6 +24026,42 @@
24026
24026
  "unchecked",
24027
24027
  "active"
24028
24028
  ]
24029
+ },
24030
+ "disabled": {
24031
+ "key": "{toggle.switch.track.color.unchecked.disabled}",
24032
+ "$value": "#fff",
24033
+ "$type": "color",
24034
+ "$description": "Used for the track color of a disabled unchecked toggle switch.",
24035
+ "$extensions": {
24036
+ "com.figma.scopes": [
24037
+ "SHAPE_FILL",
24038
+ "FRAME_FILL"
24039
+ ]
24040
+ },
24041
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24042
+ "isSource": true,
24043
+ "original": {
24044
+ "$value": "{control.background.color.default}",
24045
+ "$type": "color",
24046
+ "$description": "Used for the track color of a disabled unchecked toggle switch.",
24047
+ "$extensions": {
24048
+ "com.figma.scopes": [
24049
+ "SHAPE_FILL",
24050
+ "FRAME_FILL"
24051
+ ]
24052
+ },
24053
+ "key": "{toggle.switch.track.color.unchecked.disabled}"
24054
+ },
24055
+ "name": "TOGGLE_SWITCH_TRACK_COLOR_UNCHECKED_DISABLED",
24056
+ "attributes": {},
24057
+ "path": [
24058
+ "toggle",
24059
+ "switch",
24060
+ "track",
24061
+ "color",
24062
+ "unchecked",
24063
+ "disabled"
24064
+ ]
24029
24065
  }
24030
24066
  },
24031
24067
  "checked": {
@@ -24043,7 +24079,7 @@
24043
24079
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24044
24080
  "isSource": true,
24045
24081
  "original": {
24046
- "$value": "{color.neutral.800}",
24082
+ "$value": "{action.selected.background.color.default}",
24047
24083
  "$type": "color",
24048
24084
  "$description": "Used for the track color of a checked toggle switch in the default state.",
24049
24085
  "$extensions": {
@@ -24079,7 +24115,7 @@
24079
24115
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24080
24116
  "isSource": true,
24081
24117
  "original": {
24082
- "$value": "{color.neutral.950}",
24118
+ "$value": "{action.selected.background.color.hover}",
24083
24119
  "$type": "color",
24084
24120
  "$description": "Used for the track color of a checked toggle switch in the hover state.",
24085
24121
  "$extensions": {
@@ -24115,7 +24151,7 @@
24115
24151
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24116
24152
  "isSource": true,
24117
24153
  "original": {
24118
- "$value": "{toggle.switch.track.color.checked.hover}",
24154
+ "$value": "{action.selected.background.color.focus}",
24119
24155
  "$type": "color",
24120
24156
  "$description": "Used for the track color of a checked toggle switch in the focus state.",
24121
24157
  "$extensions": {
@@ -24151,7 +24187,7 @@
24151
24187
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24152
24188
  "isSource": true,
24153
24189
  "original": {
24154
- "$value": "{color.neutral.1000}",
24190
+ "$value": "{action.selected.background.color.active}",
24155
24191
  "$type": "color",
24156
24192
  "$description": "Used for the track color of a checked toggle switch in the active state.",
24157
24193
  "$extensions": {
@@ -24172,6 +24208,469 @@
24172
24208
  "checked",
24173
24209
  "active"
24174
24210
  ]
24211
+ },
24212
+ "disabled": {
24213
+ "key": "{toggle.switch.track.color.checked.disabled}",
24214
+ "$value": "#89888d",
24215
+ "$type": "color",
24216
+ "$description": "Used for the track color of a disabled checked toggle switch, which stays filled so the checked state remains legible.",
24217
+ "$extensions": {
24218
+ "com.figma.scopes": [
24219
+ "SHAPE_FILL",
24220
+ "FRAME_FILL"
24221
+ ]
24222
+ },
24223
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24224
+ "isSource": true,
24225
+ "original": {
24226
+ "$value": "{action.selected.background.color.disabled}",
24227
+ "$type": "color",
24228
+ "$description": "Used for the track color of a disabled checked toggle switch, which stays filled so the checked state remains legible.",
24229
+ "$extensions": {
24230
+ "com.figma.scopes": [
24231
+ "SHAPE_FILL",
24232
+ "FRAME_FILL"
24233
+ ]
24234
+ },
24235
+ "key": "{toggle.switch.track.color.checked.disabled}"
24236
+ },
24237
+ "name": "TOGGLE_SWITCH_TRACK_COLOR_CHECKED_DISABLED",
24238
+ "attributes": {},
24239
+ "path": [
24240
+ "toggle",
24241
+ "switch",
24242
+ "track",
24243
+ "color",
24244
+ "checked",
24245
+ "disabled"
24246
+ ]
24247
+ }
24248
+ },
24249
+ "loading": {
24250
+ "key": "{toggle.switch.track.color.loading}",
24251
+ "$value": "#ececef",
24252
+ "$type": "color",
24253
+ "$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.",
24254
+ "$extensions": {
24255
+ "com.figma.scopes": [
24256
+ "SHAPE_FILL",
24257
+ "FRAME_FILL"
24258
+ ]
24259
+ },
24260
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24261
+ "isSource": true,
24262
+ "original": {
24263
+ "$value": "{action.disabled.background.color}",
24264
+ "$type": "color",
24265
+ "$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.",
24266
+ "$extensions": {
24267
+ "com.figma.scopes": [
24268
+ "SHAPE_FILL",
24269
+ "FRAME_FILL"
24270
+ ]
24271
+ },
24272
+ "key": "{toggle.switch.track.color.loading}"
24273
+ },
24274
+ "name": "TOGGLE_SWITCH_TRACK_COLOR_LOADING",
24275
+ "attributes": {},
24276
+ "path": [
24277
+ "toggle",
24278
+ "switch",
24279
+ "track",
24280
+ "color",
24281
+ "loading"
24282
+ ]
24283
+ }
24284
+ },
24285
+ "border": {
24286
+ "color": {
24287
+ "unchecked": {
24288
+ "default": {
24289
+ "key": "{toggle.switch.track.border.color.unchecked.default}",
24290
+ "$value": "#89888d",
24291
+ "$type": "color",
24292
+ "$description": "Used for the track border color of an unchecked toggle switch in the default state.",
24293
+ "$extensions": {
24294
+ "com.figma.scopes": [
24295
+ "STROKE_COLOR"
24296
+ ]
24297
+ },
24298
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24299
+ "isSource": true,
24300
+ "original": {
24301
+ "$value": "{control.border.color.default}",
24302
+ "$type": "color",
24303
+ "$description": "Used for the track border color of an unchecked toggle switch in the default state.",
24304
+ "$extensions": {
24305
+ "com.figma.scopes": [
24306
+ "STROKE_COLOR"
24307
+ ]
24308
+ },
24309
+ "key": "{toggle.switch.track.border.color.unchecked.default}"
24310
+ },
24311
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_DEFAULT",
24312
+ "attributes": {},
24313
+ "path": [
24314
+ "toggle",
24315
+ "switch",
24316
+ "track",
24317
+ "border",
24318
+ "color",
24319
+ "unchecked",
24320
+ "default"
24321
+ ]
24322
+ },
24323
+ "hover": {
24324
+ "key": "{toggle.switch.track.border.color.unchecked.hover}",
24325
+ "$value": "#626168",
24326
+ "$type": "color",
24327
+ "$description": "Used for the track border color of an unchecked toggle switch in the hover state.",
24328
+ "$extensions": {
24329
+ "com.figma.scopes": [
24330
+ "STROKE_COLOR"
24331
+ ]
24332
+ },
24333
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24334
+ "isSource": true,
24335
+ "original": {
24336
+ "$value": "{control.border.color.hover}",
24337
+ "$type": "color",
24338
+ "$description": "Used for the track border color of an unchecked toggle switch in the hover state.",
24339
+ "$extensions": {
24340
+ "com.figma.scopes": [
24341
+ "STROKE_COLOR"
24342
+ ]
24343
+ },
24344
+ "key": "{toggle.switch.track.border.color.unchecked.hover}"
24345
+ },
24346
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_HOVER",
24347
+ "attributes": {},
24348
+ "path": [
24349
+ "toggle",
24350
+ "switch",
24351
+ "track",
24352
+ "border",
24353
+ "color",
24354
+ "unchecked",
24355
+ "hover"
24356
+ ]
24357
+ },
24358
+ "focus": {
24359
+ "key": "{toggle.switch.track.border.color.unchecked.focus}",
24360
+ "$value": "#626168",
24361
+ "$type": "color",
24362
+ "$description": "Used for the track border color of an unchecked toggle switch in the focus state.",
24363
+ "$extensions": {
24364
+ "com.figma.scopes": [
24365
+ "STROKE_COLOR"
24366
+ ]
24367
+ },
24368
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24369
+ "isSource": true,
24370
+ "original": {
24371
+ "$value": "{toggle.switch.track.border.color.unchecked.hover}",
24372
+ "$type": "color",
24373
+ "$description": "Used for the track border color of an unchecked toggle switch in the focus state.",
24374
+ "$extensions": {
24375
+ "com.figma.scopes": [
24376
+ "STROKE_COLOR"
24377
+ ]
24378
+ },
24379
+ "key": "{toggle.switch.track.border.color.unchecked.focus}"
24380
+ },
24381
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_FOCUS",
24382
+ "attributes": {},
24383
+ "path": [
24384
+ "toggle",
24385
+ "switch",
24386
+ "track",
24387
+ "border",
24388
+ "color",
24389
+ "unchecked",
24390
+ "focus"
24391
+ ]
24392
+ },
24393
+ "active": {
24394
+ "key": "{toggle.switch.track.border.color.unchecked.active}",
24395
+ "$value": "#626168",
24396
+ "$type": "color",
24397
+ "$description": "Used for the track border color of an unchecked toggle switch in the active state.",
24398
+ "$extensions": {
24399
+ "com.figma.scopes": [
24400
+ "STROKE_COLOR"
24401
+ ]
24402
+ },
24403
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24404
+ "isSource": true,
24405
+ "original": {
24406
+ "$value": "{toggle.switch.track.border.color.unchecked.focus}",
24407
+ "$type": "color",
24408
+ "$description": "Used for the track border color of an unchecked toggle switch in the active state.",
24409
+ "$extensions": {
24410
+ "com.figma.scopes": [
24411
+ "STROKE_COLOR"
24412
+ ]
24413
+ },
24414
+ "key": "{toggle.switch.track.border.color.unchecked.active}"
24415
+ },
24416
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_ACTIVE",
24417
+ "attributes": {},
24418
+ "path": [
24419
+ "toggle",
24420
+ "switch",
24421
+ "track",
24422
+ "border",
24423
+ "color",
24424
+ "unchecked",
24425
+ "active"
24426
+ ]
24427
+ },
24428
+ "disabled": {
24429
+ "key": "{toggle.switch.track.border.color.unchecked.disabled}",
24430
+ "$value": "#dcdcde",
24431
+ "$type": "color",
24432
+ "$description": "Used for the track border color of a disabled unchecked toggle switch.",
24433
+ "$extensions": {
24434
+ "com.figma.scopes": [
24435
+ "STROKE_COLOR"
24436
+ ]
24437
+ },
24438
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24439
+ "isSource": true,
24440
+ "original": {
24441
+ "$value": "{action.disabled.border.color}",
24442
+ "$type": "color",
24443
+ "$description": "Used for the track border color of a disabled unchecked toggle switch.",
24444
+ "$extensions": {
24445
+ "com.figma.scopes": [
24446
+ "STROKE_COLOR"
24447
+ ]
24448
+ },
24449
+ "key": "{toggle.switch.track.border.color.unchecked.disabled}"
24450
+ },
24451
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_UNCHECKED_DISABLED",
24452
+ "attributes": {},
24453
+ "path": [
24454
+ "toggle",
24455
+ "switch",
24456
+ "track",
24457
+ "border",
24458
+ "color",
24459
+ "unchecked",
24460
+ "disabled"
24461
+ ]
24462
+ }
24463
+ },
24464
+ "checked": {
24465
+ "default": {
24466
+ "key": "{toggle.switch.track.border.color.checked.default}",
24467
+ "$value": "#3a383f",
24468
+ "$type": "color",
24469
+ "$description": "Used for the track border color of a checked toggle switch in the default state.",
24470
+ "$extensions": {
24471
+ "com.figma.scopes": [
24472
+ "STROKE_COLOR"
24473
+ ]
24474
+ },
24475
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24476
+ "isSource": true,
24477
+ "original": {
24478
+ "$value": "{action.selected.border.color.default}",
24479
+ "$type": "color",
24480
+ "$description": "Used for the track border color of a checked toggle switch in the default state.",
24481
+ "$extensions": {
24482
+ "com.figma.scopes": [
24483
+ "STROKE_COLOR"
24484
+ ]
24485
+ },
24486
+ "key": "{toggle.switch.track.border.color.checked.default}"
24487
+ },
24488
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_DEFAULT",
24489
+ "attributes": {},
24490
+ "path": [
24491
+ "toggle",
24492
+ "switch",
24493
+ "track",
24494
+ "border",
24495
+ "color",
24496
+ "checked",
24497
+ "default"
24498
+ ]
24499
+ },
24500
+ "hover": {
24501
+ "key": "{toggle.switch.track.border.color.checked.hover}",
24502
+ "$value": "#18171d",
24503
+ "$type": "color",
24504
+ "$description": "Used for the track border color of a checked toggle switch in the hover state.",
24505
+ "$extensions": {
24506
+ "com.figma.scopes": [
24507
+ "STROKE_COLOR"
24508
+ ]
24509
+ },
24510
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24511
+ "isSource": true,
24512
+ "original": {
24513
+ "$value": "{action.selected.border.color.hover}",
24514
+ "$type": "color",
24515
+ "$description": "Used for the track border color of a checked toggle switch in the hover state.",
24516
+ "$extensions": {
24517
+ "com.figma.scopes": [
24518
+ "STROKE_COLOR"
24519
+ ]
24520
+ },
24521
+ "key": "{toggle.switch.track.border.color.checked.hover}"
24522
+ },
24523
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_HOVER",
24524
+ "attributes": {},
24525
+ "path": [
24526
+ "toggle",
24527
+ "switch",
24528
+ "track",
24529
+ "border",
24530
+ "color",
24531
+ "checked",
24532
+ "hover"
24533
+ ]
24534
+ },
24535
+ "focus": {
24536
+ "key": "{toggle.switch.track.border.color.checked.focus}",
24537
+ "$value": "#18171d",
24538
+ "$type": "color",
24539
+ "$description": "Used for the track border color of a checked toggle switch in the focus state.",
24540
+ "$extensions": {
24541
+ "com.figma.scopes": [
24542
+ "STROKE_COLOR"
24543
+ ]
24544
+ },
24545
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24546
+ "isSource": true,
24547
+ "original": {
24548
+ "$value": "{action.selected.border.color.focus}",
24549
+ "$type": "color",
24550
+ "$description": "Used for the track border color of a checked toggle switch in the focus state.",
24551
+ "$extensions": {
24552
+ "com.figma.scopes": [
24553
+ "STROKE_COLOR"
24554
+ ]
24555
+ },
24556
+ "key": "{toggle.switch.track.border.color.checked.focus}"
24557
+ },
24558
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_FOCUS",
24559
+ "attributes": {},
24560
+ "path": [
24561
+ "toggle",
24562
+ "switch",
24563
+ "track",
24564
+ "border",
24565
+ "color",
24566
+ "checked",
24567
+ "focus"
24568
+ ]
24569
+ },
24570
+ "active": {
24571
+ "key": "{toggle.switch.track.border.color.checked.active}",
24572
+ "$value": "#050506",
24573
+ "$type": "color",
24574
+ "$description": "Used for the track border color of a checked toggle switch in the active state.",
24575
+ "$extensions": {
24576
+ "com.figma.scopes": [
24577
+ "STROKE_COLOR"
24578
+ ]
24579
+ },
24580
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24581
+ "isSource": true,
24582
+ "original": {
24583
+ "$value": "{action.selected.border.color.active}",
24584
+ "$type": "color",
24585
+ "$description": "Used for the track border color of a checked toggle switch in the active state.",
24586
+ "$extensions": {
24587
+ "com.figma.scopes": [
24588
+ "STROKE_COLOR"
24589
+ ]
24590
+ },
24591
+ "key": "{toggle.switch.track.border.color.checked.active}"
24592
+ },
24593
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_ACTIVE",
24594
+ "attributes": {},
24595
+ "path": [
24596
+ "toggle",
24597
+ "switch",
24598
+ "track",
24599
+ "border",
24600
+ "color",
24601
+ "checked",
24602
+ "active"
24603
+ ]
24604
+ },
24605
+ "disabled": {
24606
+ "key": "{toggle.switch.track.border.color.checked.disabled}",
24607
+ "$value": "#89888d",
24608
+ "$type": "color",
24609
+ "$description": "Used for the track border color of a disabled checked toggle switch, which matches the track color.",
24610
+ "$extensions": {
24611
+ "com.figma.scopes": [
24612
+ "STROKE_COLOR"
24613
+ ]
24614
+ },
24615
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24616
+ "isSource": true,
24617
+ "original": {
24618
+ "$value": "{toggle.switch.track.color.checked.disabled}",
24619
+ "$type": "color",
24620
+ "$description": "Used for the track border color of a disabled checked toggle switch, which matches the track color.",
24621
+ "$extensions": {
24622
+ "com.figma.scopes": [
24623
+ "STROKE_COLOR"
24624
+ ]
24625
+ },
24626
+ "key": "{toggle.switch.track.border.color.checked.disabled}"
24627
+ },
24628
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_CHECKED_DISABLED",
24629
+ "attributes": {},
24630
+ "path": [
24631
+ "toggle",
24632
+ "switch",
24633
+ "track",
24634
+ "border",
24635
+ "color",
24636
+ "checked",
24637
+ "disabled"
24638
+ ]
24639
+ }
24640
+ },
24641
+ "loading": {
24642
+ "key": "{toggle.switch.track.border.color.loading}",
24643
+ "$value": "#ececef",
24644
+ "$type": "color",
24645
+ "$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.",
24646
+ "$extensions": {
24647
+ "com.figma.scopes": [
24648
+ "STROKE_COLOR"
24649
+ ]
24650
+ },
24651
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24652
+ "isSource": true,
24653
+ "original": {
24654
+ "$value": "{toggle.switch.track.color.loading}",
24655
+ "$type": "color",
24656
+ "$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.",
24657
+ "$extensions": {
24658
+ "com.figma.scopes": [
24659
+ "STROKE_COLOR"
24660
+ ]
24661
+ },
24662
+ "key": "{toggle.switch.track.border.color.loading}"
24663
+ },
24664
+ "name": "TOGGLE_SWITCH_TRACK_BORDER_COLOR_LOADING",
24665
+ "attributes": {},
24666
+ "path": [
24667
+ "toggle",
24668
+ "switch",
24669
+ "track",
24670
+ "border",
24671
+ "color",
24672
+ "loading"
24673
+ ]
24175
24674
  }
24176
24675
  }
24177
24676
  }
@@ -24181,7 +24680,7 @@
24181
24680
  "unchecked": {
24182
24681
  "default": {
24183
24682
  "key": "{toggle.switch.background.color.unchecked.default}",
24184
- "$value": "#fff",
24683
+ "$value": "#3a383f",
24185
24684
  "$type": "color",
24186
24685
  "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
24187
24686
  "$extensions": {
@@ -24193,7 +24692,7 @@
24193
24692
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24194
24693
  "isSource": true,
24195
24694
  "original": {
24196
- "$value": "{control.indicator.color.selected}",
24695
+ "$value": "{action.selected.background.color.default}",
24197
24696
  "$type": "color",
24198
24697
  "$description": "Used for the background color of the unchecked toggle switch thumb in the default state.",
24199
24698
  "$extensions": {
@@ -24217,7 +24716,7 @@
24217
24716
  },
24218
24717
  "hover": {
24219
24718
  "key": "{toggle.switch.background.color.unchecked.hover}",
24220
- "$value": "#fff",
24719
+ "$value": "#3a383f",
24221
24720
  "$type": "color",
24222
24721
  "$description": "Used for the background color of the unchecked toggle switch thumb in the hover state.",
24223
24722
  "$extensions": {
@@ -24253,7 +24752,7 @@
24253
24752
  },
24254
24753
  "focus": {
24255
24754
  "key": "{toggle.switch.background.color.unchecked.focus}",
24256
- "$value": "#fff",
24755
+ "$value": "#3a383f",
24257
24756
  "$type": "color",
24258
24757
  "$description": "Used for the background color of the unchecked toggle switch thumb in the focus state.",
24259
24758
  "$extensions": {
@@ -24289,7 +24788,7 @@
24289
24788
  },
24290
24789
  "active": {
24291
24790
  "key": "{toggle.switch.background.color.unchecked.active}",
24292
- "$value": "#fff",
24791
+ "$value": "#3a383f",
24293
24792
  "$type": "color",
24294
24793
  "$description": "Used for the background color of the unchecked toggle switch thumb in the active state.",
24295
24794
  "$extensions": {
@@ -24322,6 +24821,42 @@
24322
24821
  "unchecked",
24323
24822
  "active"
24324
24823
  ]
24824
+ },
24825
+ "disabled": {
24826
+ "key": "{toggle.switch.background.color.unchecked.disabled}",
24827
+ "$value": "#89888d",
24828
+ "$type": "color",
24829
+ "$description": "Used for the background color of the disabled unchecked toggle switch thumb.",
24830
+ "$extensions": {
24831
+ "com.figma.scopes": [
24832
+ "SHAPE_FILL",
24833
+ "FRAME_FILL"
24834
+ ]
24835
+ },
24836
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
24837
+ "isSource": true,
24838
+ "original": {
24839
+ "$value": "{action.disabled.foreground.color}",
24840
+ "$type": "color",
24841
+ "$description": "Used for the background color of the disabled unchecked toggle switch thumb.",
24842
+ "$extensions": {
24843
+ "com.figma.scopes": [
24844
+ "SHAPE_FILL",
24845
+ "FRAME_FILL"
24846
+ ]
24847
+ },
24848
+ "key": "{toggle.switch.background.color.unchecked.disabled}"
24849
+ },
24850
+ "name": "TOGGLE_SWITCH_BACKGROUND_COLOR_UNCHECKED_DISABLED",
24851
+ "attributes": {},
24852
+ "path": [
24853
+ "toggle",
24854
+ "switch",
24855
+ "background",
24856
+ "color",
24857
+ "unchecked",
24858
+ "disabled"
24859
+ ]
24325
24860
  }
24326
24861
  },
24327
24862
  "checked": {
@@ -24339,7 +24874,7 @@
24339
24874
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24340
24875
  "isSource": true,
24341
24876
  "original": {
24342
- "$value": "{action.strong.confirm.foreground.color.default}",
24877
+ "$value": "{action.selected.foreground.color.default}",
24343
24878
  "$type": "color",
24344
24879
  "$description": "Used for the background color of the checked toggle switch thumb in the default state.",
24345
24880
  "$extensions": {
@@ -24375,7 +24910,7 @@
24375
24910
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24376
24911
  "isSource": true,
24377
24912
  "original": {
24378
- "$value": "{action.strong.confirm.foreground.color.hover}",
24913
+ "$value": "{action.selected.foreground.color.hover}",
24379
24914
  "$type": "color",
24380
24915
  "$description": "Used for the background color of the checked toggle switch thumb in the hover state.",
24381
24916
  "$extensions": {
@@ -24411,7 +24946,7 @@
24411
24946
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24412
24947
  "isSource": true,
24413
24948
  "original": {
24414
- "$value": "{action.strong.confirm.foreground.color.focus}",
24949
+ "$value": "{action.selected.foreground.color.focus}",
24415
24950
  "$type": "color",
24416
24951
  "$description": "Used for the background color of the checked toggle switch thumb in the focus state.",
24417
24952
  "$extensions": {
@@ -24447,7 +24982,7 @@
24447
24982
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24448
24983
  "isSource": true,
24449
24984
  "original": {
24450
- "$value": "{action.strong.confirm.foreground.color.active}",
24985
+ "$value": "{action.selected.foreground.color.active}",
24451
24986
  "$type": "color",
24452
24987
  "$description": "Used for the background color of the checked toggle switch thumb in the active state.",
24453
24988
  "$extensions": {
@@ -24468,31 +25003,69 @@
24468
25003
  "checked",
24469
25004
  "active"
24470
25005
  ]
25006
+ },
25007
+ "disabled": {
25008
+ "key": "{toggle.switch.background.color.checked.disabled}",
25009
+ "$value": "#fff",
25010
+ "$type": "color",
25011
+ "$description": "Used for the background color of the disabled checked toggle switch thumb.",
25012
+ "$extensions": {
25013
+ "com.figma.scopes": [
25014
+ "SHAPE_FILL",
25015
+ "FRAME_FILL"
25016
+ ]
25017
+ },
25018
+ "filePath": "src/tokens/contextual/toggle.tokens.json",
25019
+ "isSource": true,
25020
+ "original": {
25021
+ "$value": "{action.selected.foreground.color.default}",
25022
+ "$type": "color",
25023
+ "$description": "Used for the background color of the disabled checked toggle switch thumb.",
25024
+ "$extensions": {
25025
+ "com.figma.scopes": [
25026
+ "SHAPE_FILL",
25027
+ "FRAME_FILL"
25028
+ ]
25029
+ },
25030
+ "key": "{toggle.switch.background.color.checked.disabled}"
25031
+ },
25032
+ "name": "TOGGLE_SWITCH_BACKGROUND_COLOR_CHECKED_DISABLED",
25033
+ "attributes": {},
25034
+ "path": [
25035
+ "toggle",
25036
+ "switch",
25037
+ "background",
25038
+ "color",
25039
+ "checked",
25040
+ "disabled"
25041
+ ]
24471
25042
  }
24472
25043
  },
24473
25044
  "disabled": {
24474
25045
  "key": "{toggle.switch.background.color.disabled}",
24475
25046
  "$value": "#89888d",
24476
25047
  "$type": "color",
24477
- "$description": "Used for the background color of the toggle switch thumb in the disabled state.",
25048
+ "$description": "Use toggle.switch.background.color.unchecked.disabled instead.",
24478
25049
  "$extensions": {
24479
25050
  "com.figma.scopes": [
24480
25051
  "SHAPE_FILL",
24481
25052
  "FRAME_FILL"
24482
25053
  ]
24483
25054
  },
25055
+ "$deprecated": true,
24484
25056
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24485
25057
  "isSource": true,
24486
25058
  "original": {
24487
- "$value": "{action.disabled.foreground.color}",
25059
+ "$value": "{toggle.switch.background.color.unchecked.disabled}",
24488
25060
  "$type": "color",
24489
- "$description": "Used for the background color of the toggle switch thumb in the disabled state.",
25061
+ "$description": "Use toggle.switch.background.color.unchecked.disabled instead.",
24490
25062
  "$extensions": {
24491
25063
  "com.figma.scopes": [
24492
25064
  "SHAPE_FILL",
24493
25065
  "FRAME_FILL"
24494
25066
  ]
24495
25067
  },
25068
+ "$deprecated": true,
24496
25069
  "key": "{toggle.switch.background.color.disabled}"
24497
25070
  },
24498
25071
  "name": "TOGGLE_SWITCH_BACKGROUND_COLOR_DISABLED",
@@ -24512,7 +25085,7 @@
24512
25085
  "unchecked": {
24513
25086
  "default": {
24514
25087
  "key": "{toggle.switch.icon.color.unchecked.default}",
24515
- "$value": "#626168",
25088
+ "$value": "#fff",
24516
25089
  "$type": "color",
24517
25090
  "$description": "Used for the icon color of an unchecked toggle switch in the default state.",
24518
25091
  "$extensions": {
@@ -24523,7 +25096,7 @@
24523
25096
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24524
25097
  "isSource": true,
24525
25098
  "original": {
24526
- "$value": "{action.strong.neutral.background.color.default}",
25099
+ "$value": "{action.selected.foreground.color.default}",
24527
25100
  "$type": "color",
24528
25101
  "$description": "Used for the icon color of an unchecked toggle switch in the default state.",
24529
25102
  "$extensions": {
@@ -24546,7 +25119,7 @@
24546
25119
  },
24547
25120
  "hover": {
24548
25121
  "key": "{toggle.switch.icon.color.unchecked.hover}",
24549
- "$value": "#4c4b51",
25122
+ "$value": "#fff",
24550
25123
  "$type": "color",
24551
25124
  "$description": "Used for the icon color of an unchecked toggle switch in the hover state.",
24552
25125
  "$extensions": {
@@ -24557,7 +25130,7 @@
24557
25130
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24558
25131
  "isSource": true,
24559
25132
  "original": {
24560
- "$value": "{action.strong.neutral.background.color.hover}",
25133
+ "$value": "{action.selected.foreground.color.hover}",
24561
25134
  "$type": "color",
24562
25135
  "$description": "Used for the icon color of an unchecked toggle switch in the hover state.",
24563
25136
  "$extensions": {
@@ -24580,7 +25153,7 @@
24580
25153
  },
24581
25154
  "focus": {
24582
25155
  "key": "{toggle.switch.icon.color.unchecked.focus}",
24583
- "$value": "#4c4b51",
25156
+ "$value": "#fff",
24584
25157
  "$type": "color",
24585
25158
  "$description": "Used for the icon color of an unchecked toggle switch in the focus state.",
24586
25159
  "$extensions": {
@@ -24591,7 +25164,7 @@
24591
25164
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24592
25165
  "isSource": true,
24593
25166
  "original": {
24594
- "$value": "{action.strong.neutral.background.color.focus}",
25167
+ "$value": "{action.selected.foreground.color.focus}",
24595
25168
  "$type": "color",
24596
25169
  "$description": "Used for the icon color of an unchecked toggle switch in the focus state.",
24597
25170
  "$extensions": {
@@ -24614,7 +25187,7 @@
24614
25187
  },
24615
25188
  "active": {
24616
25189
  "key": "{toggle.switch.icon.color.unchecked.active}",
24617
- "$value": "#3a383f",
25190
+ "$value": "#fff",
24618
25191
  "$type": "color",
24619
25192
  "$description": "Used for the icon color of an unchecked toggle switch in the active state.",
24620
25193
  "$extensions": {
@@ -24625,7 +25198,7 @@
24625
25198
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24626
25199
  "isSource": true,
24627
25200
  "original": {
24628
- "$value": "{action.strong.neutral.background.color.active}",
25201
+ "$value": "{action.selected.foreground.color.active}",
24629
25202
  "$type": "color",
24630
25203
  "$description": "Used for the icon color of an unchecked toggle switch in the active state.",
24631
25204
  "$extensions": {
@@ -24650,7 +25223,7 @@
24650
25223
  "checked": {
24651
25224
  "default": {
24652
25225
  "key": "{toggle.switch.icon.color.checked.default}",
24653
- "$value": "#1f75cb",
25226
+ "$value": "#3a383f",
24654
25227
  "$type": "color",
24655
25228
  "$description": "Used for the icon color of a checked toggle switch in the default state.",
24656
25229
  "$extensions": {
@@ -24661,7 +25234,7 @@
24661
25234
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24662
25235
  "isSource": true,
24663
25236
  "original": {
24664
- "$value": "{action.strong.confirm.background.color.default}",
25237
+ "$value": "{action.selected.background.color.default}",
24665
25238
  "$type": "color",
24666
25239
  "$description": "Used for the icon color of a checked toggle switch in the default state.",
24667
25240
  "$extensions": {
@@ -24684,7 +25257,7 @@
24684
25257
  },
24685
25258
  "hover": {
24686
25259
  "key": "{toggle.switch.icon.color.checked.hover}",
24687
- "$value": "#2f68b4",
25260
+ "$value": "#18171d",
24688
25261
  "$type": "color",
24689
25262
  "$description": "Used for the icon color of a checked toggle switch in the hover state.",
24690
25263
  "$extensions": {
@@ -24695,7 +25268,7 @@
24695
25268
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24696
25269
  "isSource": true,
24697
25270
  "original": {
24698
- "$value": "{action.strong.confirm.background.color.hover}",
25271
+ "$value": "{action.selected.background.color.hover}",
24699
25272
  "$type": "color",
24700
25273
  "$description": "Used for the icon color of a checked toggle switch in the hover state.",
24701
25274
  "$extensions": {
@@ -24718,7 +25291,7 @@
24718
25291
  },
24719
25292
  "focus": {
24720
25293
  "key": "{toggle.switch.icon.color.checked.focus}",
24721
- "$value": "#2f68b4",
25294
+ "$value": "#18171d",
24722
25295
  "$type": "color",
24723
25296
  "$description": "Used for the icon color of a checked toggle switch in the focus state.",
24724
25297
  "$extensions": {
@@ -24729,7 +25302,7 @@
24729
25302
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24730
25303
  "isSource": true,
24731
25304
  "original": {
24732
- "$value": "{action.strong.confirm.background.color.focus}",
25305
+ "$value": "{action.selected.background.color.focus}",
24733
25306
  "$type": "color",
24734
25307
  "$description": "Used for the icon color of a checked toggle switch in the focus state.",
24735
25308
  "$extensions": {
@@ -24752,7 +25325,7 @@
24752
25325
  },
24753
25326
  "active": {
24754
25327
  "key": "{toggle.switch.icon.color.checked.active}",
24755
- "$value": "#2f5ca0",
25328
+ "$value": "#050506",
24756
25329
  "$type": "color",
24757
25330
  "$description": "Used for the icon color of a checked toggle switch in the active state.",
24758
25331
  "$extensions": {
@@ -24763,7 +25336,7 @@
24763
25336
  "filePath": "src/tokens/contextual/toggle.tokens.json",
24764
25337
  "isSource": true,
24765
25338
  "original": {
24766
- "$value": "{action.strong.confirm.background.color.active}",
25339
+ "$value": "{action.selected.background.color.active}",
24767
25340
  "$type": "color",
24768
25341
  "$description": "Used for the icon color of a checked toggle switch in the active state.",
24769
25342
  "$extensions": {
@@ -30026,6 +30599,41 @@
30026
30599
  "color",
30027
30600
  "active"
30028
30601
  ]
30602
+ },
30603
+ "disabled": {
30604
+ "key": "{action.selected.background.color.disabled}",
30605
+ "$value": "#89888d",
30606
+ "$type": "color",
30607
+ "$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.",
30608
+ "$extensions": {
30609
+ "com.figma.scopes": [
30610
+ "FRAME_FILL",
30611
+ "SHAPE_FILL"
30612
+ ]
30613
+ },
30614
+ "filePath": "src/tokens/semantic/action.tokens.json",
30615
+ "isSource": true,
30616
+ "original": {
30617
+ "$value": "{color.neutral.400}",
30618
+ "$type": "color",
30619
+ "$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.",
30620
+ "$extensions": {
30621
+ "com.figma.scopes": [
30622
+ "FRAME_FILL",
30623
+ "SHAPE_FILL"
30624
+ ]
30625
+ },
30626
+ "key": "{action.selected.background.color.disabled}"
30627
+ },
30628
+ "name": "ACTION_SELECTED_BACKGROUND_COLOR_DISABLED",
30629
+ "attributes": {},
30630
+ "path": [
30631
+ "action",
30632
+ "selected",
30633
+ "background",
30634
+ "color",
30635
+ "disabled"
30636
+ ]
30029
30637
  }
30030
30638
  }
30031
30639
  },