@gitlab/ui 123.12.0 → 124.1.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.
Files changed (40) hide show
  1. package/dist/components/base/alert/alert.js +8 -2
  2. package/dist/components/base/form/form_fields/form_fields.js +20 -5
  3. package/dist/components/base/form/form_fields/form_fields_loop.js +75 -0
  4. package/dist/components/base/pagination/pagination.js +3 -8
  5. package/dist/index.css +1 -1
  6. package/dist/index.css.map +1 -1
  7. package/dist/tokens/build/js/tokens.dark.js +17 -1
  8. package/dist/tokens/build/js/tokens.js +17 -1
  9. package/dist/tokens/css/tokens.css +20 -4
  10. package/dist/tokens/css/tokens.dark.css +20 -4
  11. package/dist/tokens/docs/tokens-tailwind-docs.dark.json +515 -3
  12. package/dist/tokens/docs/tokens-tailwind-docs.json +515 -3
  13. package/dist/tokens/figma/constants.tokens.json +203 -4
  14. package/dist/tokens/js/tokens.dark.js +20 -0
  15. package/dist/tokens/js/tokens.js +20 -0
  16. package/dist/tokens/json/tokens.dark.json +499 -3
  17. package/dist/tokens/json/tokens.json +499 -3
  18. package/dist/tokens/scss/_tokens.dark.scss +20 -4
  19. package/dist/tokens/scss/_tokens.scss +20 -4
  20. package/dist/tokens/scss/_tokens_custom_properties.scss +16 -0
  21. package/dist/tokens/tailwind/tokens.cjs +110 -531
  22. package/package.json +1 -1
  23. package/src/components/base/alert/alert.vue +10 -2
  24. package/src/components/base/form/form_fields/form_fields.vue +20 -5
  25. package/src/components/base/form/form_fields/form_fields_loop.vue +44 -0
  26. package/src/components/base/pagination/pagination.vue +0 -8
  27. package/src/tokens/build/css/tokens.css +20 -4
  28. package/src/tokens/build/css/tokens.dark.css +20 -4
  29. package/src/tokens/build/docs/tokens-tailwind-docs.dark.json +515 -3
  30. package/src/tokens/build/docs/tokens-tailwind-docs.json +515 -3
  31. package/src/tokens/build/figma/constants.tokens.json +203 -4
  32. package/src/tokens/build/js/tokens.dark.js +16 -0
  33. package/src/tokens/build/js/tokens.js +16 -0
  34. package/src/tokens/build/json/tokens.dark.json +499 -3
  35. package/src/tokens/build/json/tokens.json +499 -3
  36. package/src/tokens/build/scss/_tokens.dark.scss +20 -4
  37. package/src/tokens/build/scss/_tokens.scss +20 -4
  38. package/src/tokens/build/scss/_tokens_custom_properties.scss +16 -0
  39. package/src/tokens/build/tailwind/tokens.cjs +16 -0
  40. package/src/tokens/constant/font.tokens.json +203 -4
@@ -42028,6 +42028,262 @@
42028
42028
  }
42029
42029
  },
42030
42030
  "fontSize": {
42031
+ "100": {
42032
+ "key": "{font.size.100}",
42033
+ "$value": "0.75rem",
42034
+ "$type": "dimension",
42035
+ "$description": "Used for meta text and small labels.",
42036
+ "$extensions": {
42037
+ "com.figma.scope": [
42038
+ "FONT_SIZE"
42039
+ ]
42040
+ },
42041
+ "filePath": "src/tokens/constant/font.tokens.json",
42042
+ "isSource": true,
42043
+ "original": {
42044
+ "$value": "0.75rem",
42045
+ "$type": "dimension",
42046
+ "$description": "Used for meta text and small labels.",
42047
+ "$extensions": {
42048
+ "com.figma.scope": [
42049
+ "FONT_SIZE"
42050
+ ]
42051
+ },
42052
+ "key": "{font.size.100}"
42053
+ },
42054
+ "name": "FONT_SIZE_100",
42055
+ "attributes": {},
42056
+ "path": [
42057
+ "font",
42058
+ "size",
42059
+ "100"
42060
+ ],
42061
+ "cssWithValue": "var(--gl-font-size-100)"
42062
+ },
42063
+ "200": {
42064
+ "key": "{font.size.200}",
42065
+ "$value": "0.8125rem",
42066
+ "$type": "dimension",
42067
+ "$description": "Used for level 6 headings.",
42068
+ "$extensions": {
42069
+ "com.figma.scope": [
42070
+ "FONT_SIZE"
42071
+ ]
42072
+ },
42073
+ "filePath": "src/tokens/constant/font.tokens.json",
42074
+ "isSource": true,
42075
+ "original": {
42076
+ "$value": "0.8125rem",
42077
+ "$type": "dimension",
42078
+ "$description": "Used for level 6 headings.",
42079
+ "$extensions": {
42080
+ "com.figma.scope": [
42081
+ "FONT_SIZE"
42082
+ ]
42083
+ },
42084
+ "key": "{font.size.200}"
42085
+ },
42086
+ "name": "FONT_SIZE_200",
42087
+ "attributes": {},
42088
+ "path": [
42089
+ "font",
42090
+ "size",
42091
+ "200"
42092
+ ],
42093
+ "cssWithValue": "var(--gl-font-size-200)"
42094
+ },
42095
+ "300": {
42096
+ "key": "{font.size.300}",
42097
+ "$value": "0.875rem",
42098
+ "$type": "dimension",
42099
+ "$description": "Used for level 5 headings, body text, input labels, and help text.",
42100
+ "$extensions": {
42101
+ "com.figma.scope": [
42102
+ "FONT_SIZE"
42103
+ ]
42104
+ },
42105
+ "filePath": "src/tokens/constant/font.tokens.json",
42106
+ "isSource": true,
42107
+ "original": {
42108
+ "$value": "0.875rem",
42109
+ "$type": "dimension",
42110
+ "$description": "Used for level 5 headings, body text, input labels, and help text.",
42111
+ "$extensions": {
42112
+ "com.figma.scope": [
42113
+ "FONT_SIZE"
42114
+ ]
42115
+ },
42116
+ "key": "{font.size.300}"
42117
+ },
42118
+ "name": "FONT_SIZE_300",
42119
+ "attributes": {},
42120
+ "path": [
42121
+ "font",
42122
+ "size",
42123
+ "300"
42124
+ ],
42125
+ "cssWithValue": "var(--gl-font-size-300)"
42126
+ },
42127
+ "400": {
42128
+ "key": "{font.size.400}",
42129
+ "$value": "1rem",
42130
+ "$type": "dimension",
42131
+ "$description": "Used for level 4 headings, large body text.",
42132
+ "$extensions": {
42133
+ "com.figma.scope": [
42134
+ "FONT_SIZE"
42135
+ ]
42136
+ },
42137
+ "filePath": "src/tokens/constant/font.tokens.json",
42138
+ "isSource": true,
42139
+ "original": {
42140
+ "$value": "1rem",
42141
+ "$type": "dimension",
42142
+ "$description": "Used for level 4 headings, large body text.",
42143
+ "$extensions": {
42144
+ "com.figma.scope": [
42145
+ "FONT_SIZE"
42146
+ ]
42147
+ },
42148
+ "key": "{font.size.400}"
42149
+ },
42150
+ "name": "FONT_SIZE_400",
42151
+ "attributes": {},
42152
+ "path": [
42153
+ "font",
42154
+ "size",
42155
+ "400"
42156
+ ],
42157
+ "cssWithValue": "var(--gl-font-size-400)"
42158
+ },
42159
+ "500": {
42160
+ "key": "{font.size.500}",
42161
+ "$value": "clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)",
42162
+ "$type": "dimension",
42163
+ "$description": "Used for responsive level 3 headings.",
42164
+ "$extensions": {
42165
+ "com.figma.scope": [
42166
+ "FONT_SIZE"
42167
+ ]
42168
+ },
42169
+ "filePath": "src/tokens/constant/font.tokens.json",
42170
+ "isSource": true,
42171
+ "original": {
42172
+ "$value": "clamp(1.125rem, 0.9027777778rem + 0.462962963vw, 1.25rem)",
42173
+ "$type": "dimension",
42174
+ "$description": "Used for responsive level 3 headings.",
42175
+ "$extensions": {
42176
+ "com.figma.scope": [
42177
+ "FONT_SIZE"
42178
+ ]
42179
+ },
42180
+ "key": "{font.size.500}"
42181
+ },
42182
+ "name": "FONT_SIZE_500",
42183
+ "attributes": {},
42184
+ "path": [
42185
+ "font",
42186
+ "size",
42187
+ "500"
42188
+ ],
42189
+ "cssWithValue": "var(--gl-font-size-500)"
42190
+ },
42191
+ "600": {
42192
+ "key": "{font.size.600}",
42193
+ "$value": "clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)",
42194
+ "$type": "dimension",
42195
+ "$description": "Used for responsive level 2 headings.",
42196
+ "$extensions": {
42197
+ "com.figma.scope": [
42198
+ "FONT_SIZE"
42199
+ ]
42200
+ },
42201
+ "filePath": "src/tokens/constant/font.tokens.json",
42202
+ "isSource": true,
42203
+ "original": {
42204
+ "$value": "clamp(1.3125rem, 0.8680555556rem + 0.9259259259vw, 1.5625rem)",
42205
+ "$type": "dimension",
42206
+ "$description": "Used for responsive level 2 headings.",
42207
+ "$extensions": {
42208
+ "com.figma.scope": [
42209
+ "FONT_SIZE"
42210
+ ]
42211
+ },
42212
+ "key": "{font.size.600}"
42213
+ },
42214
+ "name": "FONT_SIZE_600",
42215
+ "attributes": {},
42216
+ "path": [
42217
+ "font",
42218
+ "size",
42219
+ "600"
42220
+ ],
42221
+ "cssWithValue": "var(--gl-font-size-600)"
42222
+ },
42223
+ "700": {
42224
+ "key": "{font.size.700}",
42225
+ "$value": "clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)",
42226
+ "$type": "dimension",
42227
+ "$description": "Used for responsive level 1 headings",
42228
+ "$extensions": {
42229
+ "com.figma.scope": [
42230
+ "FONT_SIZE"
42231
+ ]
42232
+ },
42233
+ "filePath": "src/tokens/constant/font.tokens.json",
42234
+ "isSource": true,
42235
+ "original": {
42236
+ "$value": "clamp(1.5rem, 0.8333333333rem + 1.3888888889vw, 1.875rem)",
42237
+ "$type": "dimension",
42238
+ "$description": "Used for responsive level 1 headings",
42239
+ "$extensions": {
42240
+ "com.figma.scope": [
42241
+ "FONT_SIZE"
42242
+ ]
42243
+ },
42244
+ "key": "{font.size.700}"
42245
+ },
42246
+ "name": "FONT_SIZE_700",
42247
+ "attributes": {},
42248
+ "path": [
42249
+ "font",
42250
+ "size",
42251
+ "700"
42252
+ ],
42253
+ "cssWithValue": "var(--gl-font-size-700)"
42254
+ },
42255
+ "800": {
42256
+ "key": "{font.size.800}",
42257
+ "$value": "clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)",
42258
+ "$type": "dimension",
42259
+ "$description": "Used for a responsive display option that can be applied to a level 1 heading to increase its prominence.",
42260
+ "$extensions": {
42261
+ "com.figma.scope": [
42262
+ "FONT_SIZE"
42263
+ ]
42264
+ },
42265
+ "filePath": "src/tokens/constant/font.tokens.json",
42266
+ "isSource": true,
42267
+ "original": {
42268
+ "$value": "clamp(1.75rem, 0.8611111111rem + 1.8518518519vw, 2.25rem)",
42269
+ "$type": "dimension",
42270
+ "$description": "Used for a responsive display option that can be applied to a level 1 heading to increase its prominence.",
42271
+ "$extensions": {
42272
+ "com.figma.scope": [
42273
+ "FONT_SIZE"
42274
+ ]
42275
+ },
42276
+ "key": "{font.size.800}"
42277
+ },
42278
+ "name": "FONT_SIZE_800",
42279
+ "attributes": {},
42280
+ "path": [
42281
+ "font",
42282
+ "size",
42283
+ "800"
42284
+ ],
42285
+ "cssWithValue": "var(--gl-font-size-800)"
42286
+ },
42031
42287
  "xs": {
42032
42288
  "key": "{font.size.xs}",
42033
42289
  "$value": "0.625rem",
@@ -42070,7 +42326,7 @@
42070
42326
  "filePath": "src/tokens/constant/font.tokens.json",
42071
42327
  "isSource": true,
42072
42328
  "original": {
42073
- "$value": "0.75rem",
42329
+ "$value": "{font.size.100}",
42074
42330
  "$type": "dimension",
42075
42331
  "$extensions": {
42076
42332
  "com.figma.scope": [
@@ -42100,7 +42356,7 @@
42100
42356
  "filePath": "src/tokens/constant/font.tokens.json",
42101
42357
  "isSource": true,
42102
42358
  "original": {
42103
- "$value": "0.875rem",
42359
+ "$value": "{font.size.300}",
42104
42360
  "$type": "dimension",
42105
42361
  "$extensions": {
42106
42362
  "com.figma.scope": [
@@ -42130,7 +42386,7 @@
42130
42386
  "filePath": "src/tokens/constant/font.tokens.json",
42131
42387
  "isSource": true,
42132
42388
  "original": {
42133
- "$value": "1rem",
42389
+ "$value": "{font.size.400}",
42134
42390
  "$type": "dimension",
42135
42391
  "$extensions": {
42136
42392
  "com.figma.scope": [
@@ -42148,6 +42404,262 @@
42148
42404
  ],
42149
42405
  "cssWithValue": "var(--gl-font-size-lg)"
42150
42406
  },
42407
+ "100-fixed": {
42408
+ "key": "{font.size.100-fixed}",
42409
+ "$value": "0.75rem",
42410
+ "$type": "dimension",
42411
+ "$description": "Used for meta text and small labels.",
42412
+ "$extensions": {
42413
+ "com.figma.scope": [
42414
+ "FONT_SIZE"
42415
+ ]
42416
+ },
42417
+ "filePath": "src/tokens/constant/font.tokens.json",
42418
+ "isSource": true,
42419
+ "original": {
42420
+ "$value": "0.75rem",
42421
+ "$type": "dimension",
42422
+ "$description": "Used for meta text and small labels.",
42423
+ "$extensions": {
42424
+ "com.figma.scope": [
42425
+ "FONT_SIZE"
42426
+ ]
42427
+ },
42428
+ "key": "{font.size.100-fixed}"
42429
+ },
42430
+ "name": "FONT_SIZE_100_FIXED",
42431
+ "attributes": {},
42432
+ "path": [
42433
+ "font",
42434
+ "size",
42435
+ "100-fixed"
42436
+ ],
42437
+ "cssWithValue": "var(--gl-font-size-100-fixed)"
42438
+ },
42439
+ "200-fixed": {
42440
+ "key": "{font.size.200-fixed}",
42441
+ "$value": "0.8125rem",
42442
+ "$type": "dimension",
42443
+ "$description": "Used for level 6 headings.",
42444
+ "$extensions": {
42445
+ "com.figma.scope": [
42446
+ "FONT_SIZE"
42447
+ ]
42448
+ },
42449
+ "filePath": "src/tokens/constant/font.tokens.json",
42450
+ "isSource": true,
42451
+ "original": {
42452
+ "$value": "0.8125rem",
42453
+ "$type": "dimension",
42454
+ "$description": "Used for level 6 headings.",
42455
+ "$extensions": {
42456
+ "com.figma.scope": [
42457
+ "FONT_SIZE"
42458
+ ]
42459
+ },
42460
+ "key": "{font.size.200-fixed}"
42461
+ },
42462
+ "name": "FONT_SIZE_200_FIXED",
42463
+ "attributes": {},
42464
+ "path": [
42465
+ "font",
42466
+ "size",
42467
+ "200-fixed"
42468
+ ],
42469
+ "cssWithValue": "var(--gl-font-size-200-fixed)"
42470
+ },
42471
+ "300-fixed": {
42472
+ "key": "{font.size.300-fixed}",
42473
+ "$value": "0.875rem",
42474
+ "$type": "dimension",
42475
+ "$description": "Used for level 5 headings, body text, input labels, and help text.",
42476
+ "$extensions": {
42477
+ "com.figma.scope": [
42478
+ "FONT_SIZE"
42479
+ ]
42480
+ },
42481
+ "filePath": "src/tokens/constant/font.tokens.json",
42482
+ "isSource": true,
42483
+ "original": {
42484
+ "$value": "0.875rem",
42485
+ "$type": "dimension",
42486
+ "$description": "Used for level 5 headings, body text, input labels, and help text.",
42487
+ "$extensions": {
42488
+ "com.figma.scope": [
42489
+ "FONT_SIZE"
42490
+ ]
42491
+ },
42492
+ "key": "{font.size.300-fixed}"
42493
+ },
42494
+ "name": "FONT_SIZE_300_FIXED",
42495
+ "attributes": {},
42496
+ "path": [
42497
+ "font",
42498
+ "size",
42499
+ "300-fixed"
42500
+ ],
42501
+ "cssWithValue": "var(--gl-font-size-300-fixed)"
42502
+ },
42503
+ "400-fixed": {
42504
+ "key": "{font.size.400-fixed}",
42505
+ "$value": "1rem",
42506
+ "$type": "dimension",
42507
+ "$description": "Used for level 4 headings, large body text.",
42508
+ "$extensions": {
42509
+ "com.figma.scope": [
42510
+ "FONT_SIZE"
42511
+ ]
42512
+ },
42513
+ "filePath": "src/tokens/constant/font.tokens.json",
42514
+ "isSource": true,
42515
+ "original": {
42516
+ "$value": "1rem",
42517
+ "$type": "dimension",
42518
+ "$description": "Used for level 4 headings, large body text.",
42519
+ "$extensions": {
42520
+ "com.figma.scope": [
42521
+ "FONT_SIZE"
42522
+ ]
42523
+ },
42524
+ "key": "{font.size.400-fixed}"
42525
+ },
42526
+ "name": "FONT_SIZE_400_FIXED",
42527
+ "attributes": {},
42528
+ "path": [
42529
+ "font",
42530
+ "size",
42531
+ "400-fixed"
42532
+ ],
42533
+ "cssWithValue": "var(--gl-font-size-400-fixed)"
42534
+ },
42535
+ "500-fixed": {
42536
+ "key": "{font.size.500-fixed}",
42537
+ "$value": "1.125rem",
42538
+ "$type": "dimension",
42539
+ "$description": "Used for level 3 headings.",
42540
+ "$extensions": {
42541
+ "com.figma.scope": [
42542
+ "FONT_SIZE"
42543
+ ]
42544
+ },
42545
+ "filePath": "src/tokens/constant/font.tokens.json",
42546
+ "isSource": true,
42547
+ "original": {
42548
+ "$value": "1.125rem",
42549
+ "$type": "dimension",
42550
+ "$description": "Used for level 3 headings.",
42551
+ "$extensions": {
42552
+ "com.figma.scope": [
42553
+ "FONT_SIZE"
42554
+ ]
42555
+ },
42556
+ "key": "{font.size.500-fixed}"
42557
+ },
42558
+ "name": "FONT_SIZE_500_FIXED",
42559
+ "attributes": {},
42560
+ "path": [
42561
+ "font",
42562
+ "size",
42563
+ "500-fixed"
42564
+ ],
42565
+ "cssWithValue": "var(--gl-font-size-500-fixed)"
42566
+ },
42567
+ "600-fixed": {
42568
+ "key": "{font.size.600-fixed}",
42569
+ "$value": "1.3125rem",
42570
+ "$type": "dimension",
42571
+ "$description": "Used for level 2 headings.",
42572
+ "$extensions": {
42573
+ "com.figma.scope": [
42574
+ "FONT_SIZE"
42575
+ ]
42576
+ },
42577
+ "filePath": "src/tokens/constant/font.tokens.json",
42578
+ "isSource": true,
42579
+ "original": {
42580
+ "$value": "1.3125rem",
42581
+ "$type": "dimension",
42582
+ "$description": "Used for level 2 headings.",
42583
+ "$extensions": {
42584
+ "com.figma.scope": [
42585
+ "FONT_SIZE"
42586
+ ]
42587
+ },
42588
+ "key": "{font.size.600-fixed}"
42589
+ },
42590
+ "name": "FONT_SIZE_600_FIXED",
42591
+ "attributes": {},
42592
+ "path": [
42593
+ "font",
42594
+ "size",
42595
+ "600-fixed"
42596
+ ],
42597
+ "cssWithValue": "var(--gl-font-size-600-fixed)"
42598
+ },
42599
+ "700-fixed": {
42600
+ "key": "{font.size.700-fixed}",
42601
+ "$value": "1.5rem",
42602
+ "$type": "dimension",
42603
+ "$description": "Used for level 1 headings",
42604
+ "$extensions": {
42605
+ "com.figma.scope": [
42606
+ "FONT_SIZE"
42607
+ ]
42608
+ },
42609
+ "filePath": "src/tokens/constant/font.tokens.json",
42610
+ "isSource": true,
42611
+ "original": {
42612
+ "$value": "1.5rem",
42613
+ "$type": "dimension",
42614
+ "$description": "Used for level 1 headings",
42615
+ "$extensions": {
42616
+ "com.figma.scope": [
42617
+ "FONT_SIZE"
42618
+ ]
42619
+ },
42620
+ "key": "{font.size.700-fixed}"
42621
+ },
42622
+ "name": "FONT_SIZE_700_FIXED",
42623
+ "attributes": {},
42624
+ "path": [
42625
+ "font",
42626
+ "size",
42627
+ "700-fixed"
42628
+ ],
42629
+ "cssWithValue": "var(--gl-font-size-700-fixed)"
42630
+ },
42631
+ "800-fixed": {
42632
+ "key": "{font.size.800-fixed}",
42633
+ "$value": "1.75rem",
42634
+ "$type": "dimension",
42635
+ "$description": "Used for a display option that can be applied to a level 1 heading to increase its prominence.",
42636
+ "$extensions": {
42637
+ "com.figma.scope": [
42638
+ "FONT_SIZE"
42639
+ ]
42640
+ },
42641
+ "filePath": "src/tokens/constant/font.tokens.json",
42642
+ "isSource": true,
42643
+ "original": {
42644
+ "$value": "1.75rem",
42645
+ "$type": "dimension",
42646
+ "$description": "Used for a display option that can be applied to a level 1 heading to increase its prominence.",
42647
+ "$extensions": {
42648
+ "com.figma.scope": [
42649
+ "FONT_SIZE"
42650
+ ]
42651
+ },
42652
+ "key": "{font.size.800-fixed}"
42653
+ },
42654
+ "name": "FONT_SIZE_800_FIXED",
42655
+ "attributes": {},
42656
+ "path": [
42657
+ "font",
42658
+ "size",
42659
+ "800-fixed"
42660
+ ],
42661
+ "cssWithValue": "var(--gl-font-size-800-fixed)"
42662
+ },
42151
42663
  "base": {
42152
42664
  "key": "{font.size.base}",
42153
42665
  "$value": "0.875rem",