@empathyco/x-components 3.0.0-alpha.271 → 3.0.0-alpha.273

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 (30) hide show
  1. package/CHANGELOG.md +31 -0
  2. package/design-system/base.css +0 -14
  3. package/design-system/default-theme.css +0 -529
  4. package/design-system/deprecated-full-theme.css +652 -22
  5. package/design-system/full-theme.css +89 -712
  6. package/docs/API-reference/components/common/panels/x-components.base-id-toggle-panel-button.md +1 -1
  7. package/docs/API-reference/components/common/panels/x-components.base-id-toggle-panel.md +1 -1
  8. package/js/components/panels/base-id-toggle-panel-button.vue.js.map +1 -1
  9. package/js/components/panels/base-id-toggle-panel.vue.js.map +1 -1
  10. package/js/x-modules/history-queries/components/history-query.vue.js +2 -2
  11. package/js/x-modules/history-queries/components/history-query.vue.js.map +1 -1
  12. package/js/x-modules/history-queries/components/remove-history-query.vue.js +1 -1
  13. package/js/x-modules/history-queries/components/remove-history-query.vue.js.map +1 -1
  14. package/package.json +3 -3
  15. package/design-system/suggestion-default.css +0 -198
  16. package/design-system/suggestion-group-default.css +0 -100
  17. package/design-system/typography-accent.css +0 -3
  18. package/design-system/typography-accent.token.css +0 -3
  19. package/design-system/typography-bold.css +0 -15
  20. package/design-system/typography-default.css +0 -90
  21. package/design-system/typography-light.css +0 -15
  22. package/design-system/typography-secondary.css +0 -3
  23. package/design-system/typography-secondary.token.css +0 -3
  24. package/design-system/typography-stroke.css +0 -15
  25. package/design-system/utilities-font-color.css +0 -43
  26. package/design-system/utilities-font-size.css +0 -80
  27. package/design-system/utilities-font-weight.css +0 -9
  28. package/design-system/utilities-line-height.css +0 -23
  29. package/design-system/utilities-text-decoration.css +0 -15
  30. package/design-system/utilities-text-transform.css +0 -15
@@ -40,20 +40,6 @@
40
40
  --x-size-base-19: 280px;
41
41
  --x-size-base-20: 344px;
42
42
  }
43
- :root {
44
- --x-font-family-base: "Montserrat", sans-serif;
45
- --x-size-font-base-xs: 12px;
46
- --x-size-font-base-s: 14px;
47
- --x-size-font-base-m: 16px;
48
- --x-size-font-base-l: 18px;
49
- --x-size-font-base-xl: 32px;
50
- --x-number-font-weight-base-light: 300;
51
- --x-number-font-weight-base-regular: 400;
52
- --x-number-font-weight-base-bold: 600;
53
- --x-size-line-height-base-s: 16px;
54
- --x-size-line-height-base-m: 24px;
55
- --x-size-line-height-base-l: 32px;
56
- }
57
43
  [dir="ltr"] .x-badge {
58
44
  right: calc(var(--x-size-width-badge-default) / 4);
59
45
  }
@@ -1196,6 +1182,13 @@
1196
1182
  --x-size-border-radius-bottom-left-input-group-pill
1197
1183
  );
1198
1184
  }
1185
+ :root {
1186
+ --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
1187
+ --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
1188
+ --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
1189
+ --x-size-border-radius-bottom-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
1190
+ --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
1191
+ }
1199
1192
  .x-input--card.x-input,
1200
1193
  .x-input--card .x-input {
1201
1194
  --x-size-border-radius-input-default: var(--x-size-border-radius-input-card);
@@ -2423,91 +2416,6 @@
2423
2416
  --x-size-font-message-default: var(--x-size-font-title3);
2424
2417
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
2425
2418
  }
2426
- .x-option-list--bottom.x-option-list,
2427
- .x-option-list--bottom .x-option-list {
2428
- --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
2429
- --x-color-text-option-list-button-default-hover: var(
2430
- --x-color-text-option-list-button-bottom-hover
2431
- );
2432
- --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
2433
- --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
2434
- --x-color-border-right-option-list-item-default: var(
2435
- --x-color-border-top-option-list-item-bottom
2436
- );
2437
- --x-color-border-bottom-option-list-item-default: var(
2438
- --x-color-border-top-option-list-item-bottom
2439
- );
2440
- --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
2441
- --x-size-border-width-option-list-item-default: var(
2442
- --x-size-border-width-option-list-item-bottom
2443
- );
2444
- --x-size-border-width-top-option-list-item-default: var(
2445
- --x-size-border-width-top-option-list-item-bottom
2446
- );
2447
- --x-size-border-width-right-option-list-item-default: var(
2448
- --x-size-border-width-right-option-list-item-bottom
2449
- );
2450
- --x-size-border-width-bottom-option-list-item-default: var(
2451
- --x-size-border-width-bottom-option-list-item-bottom
2452
- );
2453
- --x-size-border-width-left-option-list-item-default: var(
2454
- --x-size-border-width-left-option-list-item-bottom
2455
- );
2456
- --x-font-decoration-option-list-button-default-hover: var(
2457
- --x-font-decoration-option-list-button-bottom-hover
2458
- );
2459
- --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
2460
- --x-number-font-weight-option-list-button-default: var(
2461
- --x-number-font-weight-option-list-button-bottom
2462
- );
2463
- }
2464
- .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
2465
- .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
2466
- --x-color-text-option-list-button-default-selected: var(
2467
- --x-color-text-option-list-button-bottom-selected
2468
- );
2469
- --x-color-text-option-list-button-default-selected-hover: var(
2470
- --x-color-text-option-list-button-bottom-selected-hover
2471
- );
2472
- --x-color-border-option-list-item-default-selected: var(
2473
- --x-color-border-option-list-item-bottom-selected
2474
- );
2475
- --x-color-border-top-option-list-item-default-selected: var(
2476
- --x-color-border-top-option-list-item-bottom-selected
2477
- );
2478
- --x-color-border-right-option-list-item-default-selected: var(
2479
- --x-color-border-top-option-list-item-bottom-selected
2480
- );
2481
- --x-color-border-bottom-option-list-item-default-selected: var(
2482
- --x-color-border-bottom-option-list-item-bottom-selected
2483
- );
2484
- --x-color-border-left-option-list-item-default-selected: var(
2485
- --x-color-border-top-option-list-item-bottom-selected
2486
- );
2487
- --x-size-border-width-top-option-list-item-default: var(
2488
- --x-size-border-width-top-option-list-item-bottom-selected
2489
- );
2490
- --x-size-border-width-right-option-list-item-default: var(
2491
- --x-size-border-width-right-option-list-item-bottom-selected
2492
- );
2493
- --x-size-border-width-bottom-option-list-item-default: var(
2494
- --x-size-border-width-bottom-option-list-item-bottom-selected
2495
- );
2496
- --x-size-border-width-left-option-list-item-default: var(
2497
- --x-size-border-width-left-option-list-item-bottom-selected
2498
- );
2499
- --x-number-font-weight-option-list-button-default-selected: var(
2500
- --x-number-font-weight-option-list-button-bottom-selected
2501
- );
2502
- }
2503
- .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
2504
- .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
2505
- --x-size-border-width-option-list-item-default: inherit;
2506
- --x-size-border-width-top-option-list-item-default: inherit;
2507
- --x-size-border-width-right-option-list-item-default: inherit;
2508
- --x-size-border-width-bottom-option-list-item-default: inherit;
2509
- --x-size-border-width-left-option-list-item-default: inherit;
2510
- }
2511
2419
  :root {
2512
2420
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
2513
2421
  --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -3306,284 +3214,6 @@
3306
3214
  --x-size-padding-sliding-panel-button: var(--x-size-base-03);
3307
3215
  --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
3308
3216
  }
3309
- [dir="ltr"] .x-suggestion-group {
3310
- padding-left: var(--x-size-padding-left-suggestion-group-default);
3311
- }
3312
- [dir="rtl"] .x-suggestion-group {
3313
- padding-right: var(--x-size-padding-left-suggestion-group-default);
3314
- }
3315
- [dir="ltr"] .x-suggestion-group {
3316
- padding-right: var(--x-size-padding-right-suggestion-group-default);
3317
- }
3318
- [dir="rtl"] .x-suggestion-group {
3319
- padding-left: var(--x-size-padding-right-suggestion-group-default);
3320
- }
3321
- [dir="ltr"] .x-suggestion-group {
3322
- border-left-width: var(--x-size-border-width-left-suggestion-group-default);
3323
- }
3324
- [dir="rtl"] .x-suggestion-group {
3325
- border-right-width: var(--x-size-border-width-left-suggestion-group-default);
3326
- }
3327
- [dir="ltr"] .x-suggestion-group {
3328
- border-right-width: var(--x-size-border-width-right-suggestion-group-default);
3329
- }
3330
- [dir="rtl"] .x-suggestion-group {
3331
- border-left-width: var(--x-size-border-width-right-suggestion-group-default);
3332
- }
3333
- .x-suggestion-group {
3334
- display: flex;
3335
- flex-flow: row nowrap;
3336
- box-sizing: border-box;
3337
- background-color: var(--x-color-background-suggestion-group-default);
3338
- color: var(--x-color-text-suggestion-group-default);
3339
- border-color: var(--x-color-border-suggestion-group-default);
3340
- font-family: var(--x-font-family-suggestion-group-default);
3341
- font-size: var(--x-size-font-suggestion-group-default);
3342
- line-height: var(--x-size-line-height-suggestion-group-default);
3343
- font-weight: var(--x-number-font-weight-suggestion-group-default);
3344
- cursor: pointer;
3345
- padding-top: var(--x-size-padding-top-suggestion-group-default);
3346
- padding-bottom: var(--x-size-padding-bottom-suggestion-group-default);
3347
- gap: var(--x-size-gap-suggestion-group-default);
3348
- border-style: solid;
3349
- border-top-width: var(--x-size-border-width-top-suggestion-group-default);
3350
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-group-default);
3351
- border-radius: var(--x-size-border-radius-top-left-suggestion-group-default) var(--x-size-border-radius-top-right-suggestion-group-default) var(--x-size-border-radius-bottom-right-suggestion-group-default) var(--x-size-border-radius-bottom-left-suggestion-group-default);
3352
- }
3353
- @media not all and (min-resolution: 0.001dpcm) {
3354
- .x-suggestion-group {
3355
- gap: 0;
3356
- }
3357
- .x-suggestion-group > *:not(:last-child) {
3358
- margin-right: var(--x-size-gap-suggestion-group-default);
3359
- }
3360
- }
3361
- .x-suggestion-group .x-suggestion {
3362
- padding: 0;
3363
- flex: 1 1 auto;
3364
- border: none;
3365
- }
3366
- .x-suggestion-group .x-button {
3367
- --x-color-background-button-default: transparent;
3368
- --x-color-border-button-default: transparent;
3369
- --x-color-text-button-default: var(--x-color-text-suggestion-group-default);
3370
- --x-size-height-button-default: var(--x-size-line-height-suggestion-group-default);
3371
- --x-size-padding-right-button-default: 0;
3372
- --x-size-padding-left-button-default: 0;
3373
- border: none;
3374
- }
3375
- :root {
3376
- --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3377
- --x-color-text-suggestion-group-matching-part-default: var(--x-color-text-suggestion-matching-part-default);
3378
- --x-color-background-suggestion-group-default: var(--x-color-background-suggestion-default);
3379
- --x-color-border-suggestion-group-default: var(--x-color-text-suggestion-group-default);
3380
- --x-size-padding-top-suggestion-group-default: var(--x-size-padding-top-suggestion-default);
3381
- --x-size-padding-right-suggestion-group-default: var(--x-size-padding-right-suggestion-default);
3382
- --x-size-padding-bottom-suggestion-group-default: var(--x-size-padding-bottom-suggestion-default);
3383
- --x-size-padding-left-suggestion-group-default: var(--x-size-padding-left-suggestion-default);
3384
- --x-size-gap-suggestion-group-default: var(--x-size-gap-suggestion-default);
3385
- --x-size-border-width-suggestion-group-default: 0;
3386
- --x-size-border-width-top-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3387
- --x-size-border-width-right-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3388
- --x-size-border-width-bottom-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3389
- --x-size-border-width-left-suggestion-group-default: var(--x-size-border-width-suggestion-default);
3390
- --x-size-border-radius-suggestion-group-default: var(--x-size-border-radius-base-none);
3391
- --x-size-border-radius-top-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
3392
- --x-size-border-radius-top-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
3393
- --x-size-border-radius-bottom-right-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
3394
- --x-size-border-radius-bottom-left-suggestion-group-default: var(--x-size-border-radius-suggestion-default);
3395
- --x-font-family-suggestion-group-default: var(--x-font-family-suggestion-default);
3396
- --x-size-font-suggestion-group-default: var(--x-size-font-suggestion-default);
3397
- --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3398
- --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3399
- }
3400
- [dir="ltr"] .x-suggestion {
3401
- text-align: left;
3402
- }
3403
- [dir="rtl"] .x-suggestion {
3404
- text-align: right;
3405
- }
3406
- [dir="ltr"] .x-suggestion {
3407
- padding-left: var(--x-size-padding-left-suggestion-default);
3408
- }
3409
- [dir="rtl"] .x-suggestion {
3410
- padding-right: var(--x-size-padding-left-suggestion-default);
3411
- }
3412
- [dir="ltr"] .x-suggestion {
3413
- padding-right: var(--x-size-padding-right-suggestion-default);
3414
- }
3415
- [dir="rtl"] .x-suggestion {
3416
- padding-left: var(--x-size-padding-right-suggestion-default);
3417
- }
3418
- [dir="ltr"] .x-suggestion {
3419
- border-left-width: var(--x-size-border-width-left-suggestion-default);
3420
- }
3421
- [dir="rtl"] .x-suggestion {
3422
- border-right-width: var(--x-size-border-width-left-suggestion-default);
3423
- }
3424
- [dir="ltr"] .x-suggestion {
3425
- border-right-width: var(--x-size-border-width-right-suggestion-default);
3426
- }
3427
- [dir="rtl"] .x-suggestion {
3428
- border-left-width: var(--x-size-border-width-right-suggestion-default);
3429
- }
3430
- .x-suggestion {
3431
- display: flex;
3432
- flex-flow: row nowrap;
3433
- box-sizing: border-box;
3434
- align-items: var(--x-string-align-items-suggestion-default);
3435
- background-color: var(--x-color-background-suggestion-default);
3436
- color: var(--x-color-text-suggestion-default);
3437
- border-color: var(--x-color-border-suggestion-default);
3438
- font-family: var(--x-font-family-suggestion-default);
3439
- font-size: var(--x-size-font-suggestion-default);
3440
- line-height: var(--x-size-line-height-suggestion-default);
3441
- font-weight: var(--x-number-font-weight-suggestion-default);
3442
- cursor: pointer;
3443
- padding-top: var(--x-size-padding-top-suggestion-default);
3444
- padding-bottom: var(--x-size-padding-bottom-suggestion-default);
3445
- gap: var(--x-size-gap-suggestion-default);
3446
- border-style: solid;
3447
- border-top-width: var(--x-size-border-width-top-suggestion-default);
3448
- border-bottom-width: var(--x-size-border-width-bottom-suggestion-default);
3449
- border-radius: var(--x-size-border-radius-top-left-suggestion-default) var(--x-size-border-radius-top-right-suggestion-default) var(--x-size-border-radius-bottom-right-suggestion-default) var(--x-size-border-radius-bottom-left-suggestion-default);
3450
- }
3451
- @media not all and (min-resolution: 0.001dpcm) {
3452
- .x-suggestion {
3453
- gap: 0;
3454
- }
3455
- .x-suggestion > *:not(:last-child) {
3456
- margin-right: var(--x-size-gap-suggestion-default);
3457
- }
3458
- }
3459
- .x-suggestion__matching-part,
3460
- .x-suggestion .x-identifier-result__matching-part {
3461
- font-family: var(--x-font-family-suggestion-matching-part-default);
3462
- font-size: var(--x-size-font-suggestion-matching-part-default);
3463
- line-height: var(--x-size-line-height-suggestion-matching-part-default);
3464
- font-weight: var(--x-number-font-weight-suggestion-matching-part-default);
3465
- color: var(--x-color-text-suggestion-matching-part-default);
3466
- }
3467
- .x-suggestion__filter {
3468
- font-family: var(--x-font-family-suggestion-filter-default);
3469
- font-size: var(--x-size-font-suggestion-filter-default);
3470
- line-height: var(--x-size-line-height-suggestion-filter-default);
3471
- font-weight: var(--x-number-font-weight-suggestion-filter-default);
3472
- text-transform: var(--x-text-transform-suggestion-filter-default);
3473
- color: var(--x-color-text-suggestion-filter-default);
3474
- }
3475
- .x-suggestion--matching {
3476
- --x-font-family-suggestion-default: var(--x-font-family-suggestion-default-matching);
3477
- --x-size-font-suggestion-default: var(--x-size-font-suggestion-default-matching);
3478
- --x-size-line-height-suggestion-default: var(--x-size-line-height-suggestion-default-matching);
3479
- --x-number-font-weight-suggestion-default: var(
3480
- --x-number-font-weight-suggestion-default-matching
3481
- );
3482
- --x-color-text-suggestion-default: var(--x-color-text-suggestion-default-matching);
3483
- }
3484
- .x-suggestion > .x-identifier-result {
3485
- flex: none;
3486
- }
3487
- .x-suggestion.x-suggestion.x-suggestion--is-curated {
3488
- background-color: var(--x-color-background-suggestion-default-curated);
3489
- color: var(--x-color-text-suggestion-default-curated);
3490
- border-color: var(--x-color-border-suggestion-default-curated);
3491
- font-family: var(--x-font-family-suggestion-default-curated);
3492
- font-size: var(--x-size-font-suggestion-default-curated);
3493
- line-height: var(--x-size-line-height-suggestion-default-curated);
3494
- font-weight: var(--x-number-font-weight-suggestion-default-curated);
3495
- }
3496
- .x-suggestion.x-suggestion.x-suggestion--is-curated .x-suggestion__matching-part,
3497
- .x-suggestion.x-suggestion.x-suggestion--is-curated .x-identifier-result__matching-part {
3498
- font-family: var(--x-font-family-suggestion-matching-part-default-curated);
3499
- font-size: var(--x-size-font-suggestion-matching-part-default-curated);
3500
- line-height: var(--x-size-line-height-suggestion-matching-part-default-curated);
3501
- font-weight: var(--x-number-font-weight-suggestion-matching-part-default-curated);
3502
- color: var(--x-color-text-suggestion-matching-part-default-curated);
3503
- }
3504
- .x-suggestion.x-suggestion.x-suggestion--is-curated.x-suggestion--matching {
3505
- --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default-matching-curated);
3506
- --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default-matching-curated);
3507
- --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default-matching-curated);
3508
- --x-number-font-weight-suggestion-default-curated: var(
3509
- --x-number-font-weight-suggestion-default-matching-curated
3510
- );
3511
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default-matching-curated);
3512
- }
3513
- :root {
3514
- --x-string-align-items-suggestion-default: center;
3515
- --x-color-text-suggestion-default: var(--x-color-text-default);
3516
- --x-color-text-suggestion-matching-part-default: var(--x-color-base-neutral-35);
3517
- --x-color-text-suggestion-default-matching: var(--x-color-text-suggestion-default);
3518
- --x-color-text-suggestion-filter-default: var(--x-color-base-neutral-35);
3519
- --x-color-background-suggestion-default: transparent;
3520
- --x-color-border-suggestion-default: var(--x-color-text-suggestion-default);
3521
- --x-color-text-suggestion-default-curated: var(--x-color-text-suggestion-default);
3522
- --x-color-text-suggestion-matching-part-default-curated: var(--x-color-text-suggestion-matching-part-default);
3523
- --x-color-text-suggestion-default-matching-curated: var(--x-color-text-suggestion-default-matching);
3524
- --x-color-background-suggestion-default-curated: var(--x-color-background-suggestion-default);
3525
- --x-color-border-suggestion-default-curated: var(--x-color-border-suggestion-default);
3526
- --x-size-padding-top-suggestion-default: var(--x-size-base-01);
3527
- --x-size-padding-right-suggestion-default: 0;
3528
- --x-size-padding-bottom-suggestion-default: var(--x-size-base-02);
3529
- --x-size-padding-left-suggestion-default: 0;
3530
- --x-size-gap-suggestion-default: var(--x-size-base-03);
3531
- --x-size-border-width-suggestion-default: 0;
3532
- --x-size-border-width-top-suggestion-default: var(--x-size-border-width-suggestion-default);
3533
- --x-size-border-width-right-suggestion-default: var(--x-size-border-width-suggestion-default);
3534
- --x-size-border-width-bottom-suggestion-default: var(--x-size-border-width-suggestion-default);
3535
- --x-size-border-width-left-suggestion-default: var(--x-size-border-width-suggestion-default);
3536
- --x-size-border-radius-suggestion-default: var(--x-size-border-radius-base-none);
3537
- --x-size-border-radius-top-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
3538
- --x-size-border-radius-top-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
3539
- --x-size-border-radius-bottom-right-suggestion-default: var(--x-size-border-radius-suggestion-default);
3540
- --x-size-border-radius-bottom-left-suggestion-default: var(--x-size-border-radius-suggestion-default);
3541
- --x-font-family-suggestion-default: var(--x-font-family-text);
3542
- --x-size-font-suggestion-default: var(--x-size-font-text);
3543
- --x-size-line-height-suggestion-default: var(--x-size-line-height-text);
3544
- --x-number-font-weight-suggestion-default: var(--x-number-font-weight-text);
3545
- --x-font-family-suggestion-matching-part-default: var(--x-font-family-suggestion-default);
3546
- --x-size-font-suggestion-matching-part-default: var(--x-size-font-suggestion-default);
3547
- --x-size-line-height-suggestion-matching-part-default: var(
3548
- --x-size-line-height-suggestion-default
3549
- );
3550
- --x-number-font-weight-suggestion-matching-part-default: var(
3551
- --x-number-font-weight-suggestion-default
3552
- );
3553
- --x-font-family-suggestion-default-matching: var(--x-font-family-suggestion-default);
3554
- --x-size-font-suggestion-default-matching: var(--x-size-font-suggestion-default);
3555
- --x-size-line-height-suggestion-default-matching: var(--x-size-line-height-suggestion-default);
3556
- --x-number-font-weight-suggestion-default-matching: var(
3557
- --x-number-font-weight-suggestion-default
3558
- );
3559
- --x-font-family-suggestion-filter-default: var(--x-font-family-suggestion-default);
3560
- --x-size-font-suggestion-filter-default: var(--x-size-font-suggestion-default);
3561
- --x-size-line-height-suggestion-filter-default: var(--x-size-line-height-suggestion-default);
3562
- --x-number-font-weight-suggestion-filter-default: var(
3563
- --x-number-font-weight-suggestion-default
3564
- );
3565
- --x-text-transform-suggestion-filter-default: none;
3566
- --x-font-family-suggestion-default-curated: var(--x-font-family-suggestion-default);
3567
- --x-size-font-suggestion-default-curated: var(--x-size-font-suggestion-default);
3568
- --x-size-line-height-suggestion-default-curated: var(--x-size-line-height-suggestion-default);
3569
- --x-number-font-weight-suggestion-default-curated: var(--x-number-font-weight-suggestion-default);
3570
- --x-font-family-suggestion-matching-part-default-curated: var(--x-font-family-suggestion-matching-part-default);
3571
- --x-size-font-suggestion-matching-part-default-curated: var(--x-size-font-suggestion-matching-part-default);
3572
- --x-size-line-height-suggestion-matching-part-default-curated: var(
3573
- --x-size-line-height-suggestion-matching-part-default
3574
- );
3575
- --x-number-font-weight-suggestion-matching-part-default-curated: var(
3576
- --x-number-font-weight-suggestion-matching-part-default
3577
- );
3578
- --x-font-family-suggestion-default-matching-curated: var(--x-font-family-suggestion-default-matching);
3579
- --x-size-font-suggestion-default-matching-curated: var(--x-size-font-suggestion-default-matching);
3580
- --x-size-line-height-suggestion-default-matching-curated: var(
3581
- --x-size-line-height-suggestion-default-matching
3582
- );
3583
- --x-number-font-weight-suggestion-default-matching-curated: var(
3584
- --x-number-font-weight-suggestion-default-matching
3585
- );
3586
- }
3587
3217
  .x-tag--card.x-tag,
3588
3218
  .x-tag--card .x-tag {
3589
3219
  --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
@@ -3839,152 +3469,6 @@
3839
3469
  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3840
3470
  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3841
3471
  }
3842
- .x-text--accent {
3843
- --x-color-text-default: var(--x-color-text-accent);
3844
- }
3845
- :root {
3846
- --x-color-text-accent: var(--x-color-base-accent);
3847
- }
3848
- .x-text--bold.x-text {
3849
- --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3850
- }
3851
- .x-text--bold.x-title1 {
3852
- --x-number-font-weight-title1: var(--x-number-font-weight-base-bold);
3853
- }
3854
- .x-text--bold.x-title2 {
3855
- --x-number-font-weight-title2: var(--x-number-font-weight-base-bold);
3856
- }
3857
- .x-text--bold.x-title3 {
3858
- --x-number-font-weight-title3: var(--x-number-font-weight-base-bold);
3859
- }
3860
- .x-text--bold.x-small {
3861
- --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3862
- }
3863
- .x,
3864
- .x-text {
3865
- font-family: var(--x-font-family-text);
3866
- font-size: var(--x-size-font-text);
3867
- font-weight: var(--x-number-font-weight-text);
3868
- line-height: var(--x-size-line-height-text);
3869
- -webkit-text-decoration: var(--x-string-text-decoration);
3870
- text-decoration: var(--x-string-text-decoration);
3871
- color: var(--x-color-text-default);
3872
- margin: 0;
3873
- }
3874
-
3875
- .x-title1 {
3876
- font-family: var(--x-font-family-title1);
3877
- font-size: var(--x-size-font-title1);
3878
- font-weight: var(--x-number-font-weight-title1);
3879
- line-height: var(--x-size-line-height-title1);
3880
- -webkit-text-decoration: var(--x-string-text-decoration-title1);
3881
- text-decoration: var(--x-string-text-decoration-title1);
3882
- color: var(--x-color-text-default);
3883
- margin: 0;
3884
- }
3885
-
3886
- .x-title2 {
3887
- font-family: var(--x-font-family-title2);
3888
- font-size: var(--x-size-font-title2);
3889
- font-weight: var(--x-number-font-weight-title2);
3890
- line-height: var(--x-size-line-height-title2);
3891
- -webkit-text-decoration: var(--x-string-text-decoration-title2);
3892
- text-decoration: var(--x-string-text-decoration-title2);
3893
- color: var(--x-color-text-default);
3894
- margin: 0;
3895
- }
3896
-
3897
- .x-title3 {
3898
- font-family: var(--x-font-family-title3);
3899
- font-size: var(--x-size-font-title3);
3900
- font-weight: var(--x-number-font-weight-title3);
3901
- line-height: var(--x-size-line-height-title3);
3902
- -webkit-text-decoration: var(--x-string-text-decoration-title3);
3903
- text-decoration: var(--x-string-text-decoration-title3);
3904
- color: var(--x-color-text-default);
3905
- margin: 0;
3906
- }
3907
-
3908
- .x-small {
3909
- font-family: var(--x-font-family-small);
3910
- font-size: var(--x-size-font-small);
3911
- font-weight: var(--x-number-font-weight-small);
3912
- line-height: var(--x-size-line-height-small);
3913
- -webkit-text-decoration: var(--x-string-text-decoration-small);
3914
- text-decoration: var(--x-string-text-decoration-small);
3915
- color: var(--x-color-text-default);
3916
- margin: 0;
3917
- }
3918
-
3919
- .x-ellipsis {
3920
- text-overflow: ellipsis;
3921
- overflow: hidden;
3922
- white-space: nowrap;
3923
- }
3924
- :root {
3925
- --x-color-text-default: var(--x-color-base-neutral-10);
3926
- --x-font-family-text: var(--x-font-family-base);
3927
- --x-size-font-text: var(--x-size-font-base-s);
3928
- --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
3929
- --x-size-line-height-text: var(--x-size-line-height-base-s);
3930
- --x-string-text-decoration-text: none;
3931
- --x-font-family-title1: var(--x-font-family-base);
3932
- --x-size-font-title1: var(--x-size-font-base-xl);
3933
- --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
3934
- --x-size-line-height-title1: var(--x-size-line-height-base-l);
3935
- --x-string-text-decoration-title1: none;
3936
- --x-font-family-title2: var(--x-font-family-base);
3937
- --x-size-font-title2: var(--x-size-font-base-l);
3938
- --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
3939
- --x-size-line-height-title2: var(--x-size-line-height-base-m);
3940
- --x-string-text-decoration-title2: none;
3941
- --x-font-family-title3: var(--x-font-family-base);
3942
- --x-size-font-title3: var(--x-size-font-base-m);
3943
- --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
3944
- --x-size-line-height-title3: var(--x-size-line-height-base-m);
3945
- --x-string-text-decoration-title3: none;
3946
- --x-font-family-small: var(--x-font-family-base);
3947
- --x-size-font-small: var(--x-size-font-base-xs);
3948
- --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
3949
- --x-size-line-height-small: var(--x-size-line-height-base-s);
3950
- --x-string-text-decoration-small: none;
3951
- }
3952
- .x-text--light.x-text {
3953
- --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3954
- }
3955
- .x-text--light.x-title1 {
3956
- --x-number-font-weight-title1: var(--x-number-font-weight-base-light);
3957
- }
3958
- .x-text--light.x-title2 {
3959
- --x-number-font-weight-title2: var(--x-number-font-weight-base-light);
3960
- }
3961
- .x-text--light.x-title3 {
3962
- --x-number-font-weight-title3: var(--x-number-font-weight-base-light);
3963
- }
3964
- .x-text--light.x-small {
3965
- --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3966
- }
3967
- .x-text--secondary {
3968
- --x-color-text-default: var(--x-color-text-secondary);
3969
- }
3970
- :root {
3971
- --x-color-text-secondary: var(--x-color-base-neutral-35);
3972
- }
3973
- .x-text--stroke.x-text {
3974
- --x-string-text-decoration: line-through;
3975
- }
3976
- .x-text--stroke.x-title1 {
3977
- --x-string-text-decoration-title1: line-through;
3978
- }
3979
- .x-text--stroke.x-title2 {
3980
- --x-string-text-decoration-title2: line-through;
3981
- }
3982
- .x-text--stroke.x-title3 {
3983
- --x-string-text-decoration-title3: line-through;
3984
- }
3985
- .x-text--stroke.x-small {
3986
- --x-string-text-decoration-small: line-through;
3987
- }
3988
3472
 
3989
3473
  .x-background--lead {
3990
3474
  background-color: var(--x-color-base-lead) !important;
@@ -6144,138 +5628,6 @@
6144
5628
  .x-self-baseline {
6145
5629
  align-self: baseline !important;
6146
5630
  }
6147
- .x-font-color--lead {
6148
- color: var(--x-color-base-lead) !important;
6149
- }
6150
-
6151
- .x-font-color--auxiliary {
6152
- color: var(--x-color-base-auxiliary) !important;
6153
- }
6154
-
6155
- .x-font-color--neutral-10 {
6156
- color: var(--x-color-base-neutral-10) !important;
6157
- }
6158
-
6159
- .x-font-color--neutral-35 {
6160
- color: var(--x-color-base-neutral-35) !important;
6161
- }
6162
-
6163
- .x-font-color--neutral-70 {
6164
- color: var(--x-color-base-neutral-70) !important;
6165
- }
6166
-
6167
- .x-font-color--neutral-95 {
6168
- color: var(--x-color-base-neutral-95) !important;
6169
- }
6170
-
6171
- .x-font-color--neutral-100 {
6172
- color: var(--x-color-base-neutral-100) !important;
6173
- }
6174
-
6175
- .x-font-color--accent {
6176
- color: var(--x-color-base-accent) !important;
6177
- }
6178
-
6179
- .x-font-color--enable {
6180
- color: var(--x-color-base-enable) !important;
6181
- }
6182
-
6183
- .x-font-color--disable {
6184
- color: var(--x-color-base-disable) !important;
6185
- }
6186
-
6187
- .x-font-color--transparent {
6188
- color: var(--x-color-base-transparent) !important;
6189
- }
6190
- .x-font-size--01 {
6191
- font-size: var(--x-size-base-01) !important;
6192
- line-height: 1.5;
6193
- }
6194
- .x-font-size--02 {
6195
- font-size: var(--x-size-base-02) !important;
6196
- line-height: 1.5;
6197
- }
6198
- .x-font-size--03 {
6199
- font-size: var(--x-size-base-03) !important;
6200
- line-height: 1.5;
6201
- }
6202
- .x-font-size--04 {
6203
- font-size: var(--x-size-base-04) !important;
6204
- line-height: 1.5;
6205
- }
6206
- .x-font-size--05 {
6207
- font-size: var(--x-size-base-05) !important;
6208
- line-height: 1.5;
6209
- }
6210
- .x-font-size--06 {
6211
- font-size: var(--x-size-base-06) !important;
6212
- line-height: 1.5;
6213
- }
6214
- .x-font-size--07 {
6215
- font-size: var(--x-size-base-07) !important;
6216
- line-height: 1.5;
6217
- }
6218
- .x-font-size--08 {
6219
- font-size: var(--x-size-base-08) !important;
6220
- line-height: 1.5;
6221
- }
6222
- .x-font-size--09 {
6223
- font-size: var(--x-size-base-09) !important;
6224
- line-height: 1.5;
6225
- }
6226
- .x-font-size--10 {
6227
- font-size: var(--x-size-base-10) !important;
6228
- line-height: 1.5;
6229
- }
6230
- .x-font-size--11 {
6231
- font-size: var(--x-size-base-11) !important;
6232
- line-height: 1.5;
6233
- }
6234
- .x-font-size--12 {
6235
- font-size: var(--x-size-base-12) !important;
6236
- line-height: 1.5;
6237
- }
6238
- .x-font-size--13 {
6239
- font-size: var(--x-size-base-13) !important;
6240
- line-height: 1.5;
6241
- }
6242
- .x-font-size--14 {
6243
- font-size: var(--x-size-base-14) !important;
6244
- line-height: 1.5;
6245
- }
6246
- .x-font-size--15 {
6247
- font-size: var(--x-size-base-15) !important;
6248
- line-height: 1.5;
6249
- }
6250
- .x-font-size--16 {
6251
- font-size: var(--x-size-base-16) !important;
6252
- line-height: 1.5;
6253
- }
6254
- .x-font-size--17 {
6255
- font-size: var(--x-size-base-17) !important;
6256
- line-height: 1.5;
6257
- }
6258
- .x-font-size--18 {
6259
- font-size: var(--x-size-base-18) !important;
6260
- line-height: 1.5;
6261
- }
6262
- .x-font-size--19 {
6263
- font-size: var(--x-size-base-19) !important;
6264
- line-height: 1.5;
6265
- }
6266
- .x-font-size--20 {
6267
- font-size: var(--x-size-base-20) !important;
6268
- line-height: 1.5;
6269
- }
6270
- .x-font-weight--light {
6271
- font-weight: var(--x-number-font-weight-base-light) !important;
6272
- }
6273
- .x-font-weight--regular {
6274
- font-weight: var(--x-number-font-weight-base-regular) !important;
6275
- }
6276
- .x-font-weight--bold {
6277
- font-weight: var(--x-number-font-weight-base-bold) !important;
6278
- }
6279
5631
  .x-line-clamp--2 {
6280
5632
  overflow: hidden !important;
6281
5633
  display: -webkit-box !important;
@@ -6310,29 +5662,6 @@
6310
5662
  -webkit-box-orient: vertical !important;
6311
5663
  -webkit-line-clamp: 6 !important;
6312
5664
  }
6313
- .x-line-height--none {
6314
- line-height: 1 !important;
6315
- }
6316
-
6317
- .x-line-height--tight {
6318
- line-height: 1.25 !important;
6319
- }
6320
-
6321
- .x-line-height--snug {
6322
- line-height: 1.375 !important;
6323
- }
6324
-
6325
- .x-line-height--normal {
6326
- line-height: 1.5 !important;
6327
- }
6328
-
6329
- .x-line-height--relaxed {
6330
- line-height: 1.625 !important;
6331
- }
6332
-
6333
- .x-line-height--loose {
6334
- line-height: 2 !important;
6335
- }
6336
5665
  .x-margin--auto {
6337
5666
  margin: auto !important;
6338
5667
  }
@@ -7255,41 +6584,89 @@
7255
6584
  .x-sticky {
7256
6585
  position: sticky !important;
7257
6586
  }
7258
- .x-underline {
7259
- text-decoration-line: underline;
7260
- }
7261
6587
 
7262
- .x-overline {
7263
- text-decoration-line: overline;
7264
- }
7265
-
7266
- .x-line-through {
7267
- text-decoration-line: line-through;
7268
- }
7269
-
7270
- .x-no-underline {
7271
- text-decoration-line: none;
7272
- }
7273
- .x-uppercase {
7274
- text-transform: uppercase;
7275
- }
7276
-
7277
- .x-lowercase {
7278
- text-transform: lowercase;
7279
- }
7280
-
7281
- .x-capitalize {
7282
- text-transform: capitalize;
6588
+ .x-option-list--bottom.x-option-list,
6589
+ .x-option-list--bottom .x-option-list {
6590
+ --x-color-text-option-list-button-default: var(--x-color-text-option-list-button-bottom);
6591
+ --x-color-text-option-list-button-default-hover: var(
6592
+ --x-color-text-option-list-button-bottom-hover
6593
+ );
6594
+ --x-color-border-option-list-item-default: var(--x-color-border-option-list-item-bottom);
6595
+ --x-color-border-top-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
6596
+ --x-color-border-right-option-list-item-default: var(
6597
+ --x-color-border-top-option-list-item-bottom
6598
+ );
6599
+ --x-color-border-bottom-option-list-item-default: var(
6600
+ --x-color-border-top-option-list-item-bottom
6601
+ );
6602
+ --x-color-border-left-option-list-item-default: var(--x-color-border-top-option-list-item-bottom);
6603
+ --x-size-border-width-option-list-item-default: var(
6604
+ --x-size-border-width-option-list-item-bottom
6605
+ );
6606
+ --x-size-border-width-top-option-list-item-default: var(
6607
+ --x-size-border-width-top-option-list-item-bottom
6608
+ );
6609
+ --x-size-border-width-right-option-list-item-default: var(
6610
+ --x-size-border-width-right-option-list-item-bottom
6611
+ );
6612
+ --x-size-border-width-bottom-option-list-item-default: var(
6613
+ --x-size-border-width-bottom-option-list-item-bottom
6614
+ );
6615
+ --x-size-border-width-left-option-list-item-default: var(
6616
+ --x-size-border-width-left-option-list-item-bottom
6617
+ );
6618
+ --x-font-decoration-option-list-button-default-hover: var(
6619
+ --x-font-decoration-option-list-button-bottom-hover
6620
+ );
6621
+ --x-size-font-option-list-button-default: var(--x-size-font-option-list-button-bottom);
6622
+ --x-number-font-weight-option-list-button-default: var(
6623
+ --x-number-font-weight-option-list-button-bottom
6624
+ );
7283
6625
  }
7284
-
7285
- .x-normal-case {
7286
- text-transform: none;
6626
+ .x-option-list--bottom.x-option-list .x-option-list__item.x-option-list__item--is-selected,
6627
+ .x-option-list--bottom .x-option-list .x-option-list__item.x-option-list__item--is-selected {
6628
+ --x-color-text-option-list-button-default-selected: var(
6629
+ --x-color-text-option-list-button-bottom-selected
6630
+ );
6631
+ --x-color-text-option-list-button-default-selected-hover: var(
6632
+ --x-color-text-option-list-button-bottom-selected-hover
6633
+ );
6634
+ --x-color-border-option-list-item-default-selected: var(
6635
+ --x-color-border-option-list-item-bottom-selected
6636
+ );
6637
+ --x-color-border-top-option-list-item-default-selected: var(
6638
+ --x-color-border-top-option-list-item-bottom-selected
6639
+ );
6640
+ --x-color-border-right-option-list-item-default-selected: var(
6641
+ --x-color-border-top-option-list-item-bottom-selected
6642
+ );
6643
+ --x-color-border-bottom-option-list-item-default-selected: var(
6644
+ --x-color-border-bottom-option-list-item-bottom-selected
6645
+ );
6646
+ --x-color-border-left-option-list-item-default-selected: var(
6647
+ --x-color-border-top-option-list-item-bottom-selected
6648
+ );
6649
+ --x-size-border-width-top-option-list-item-default: var(
6650
+ --x-size-border-width-top-option-list-item-bottom-selected
6651
+ );
6652
+ --x-size-border-width-right-option-list-item-default: var(
6653
+ --x-size-border-width-right-option-list-item-bottom-selected
6654
+ );
6655
+ --x-size-border-width-bottom-option-list-item-default: var(
6656
+ --x-size-border-width-bottom-option-list-item-bottom-selected
6657
+ );
6658
+ --x-size-border-width-left-option-list-item-default: var(
6659
+ --x-size-border-width-left-option-list-item-bottom-selected
6660
+ );
6661
+ --x-number-font-weight-option-list-button-default-selected: var(
6662
+ --x-number-font-weight-option-list-button-bottom-selected
6663
+ );
7287
6664
  }
7288
-
7289
- :root {
7290
- --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
7291
- --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
7292
- --x-size-border-radius-top-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
7293
- --x-size-border-radius-bottom-right-input-group-pill: var(--x-size-border-radius-input-group-pill);
7294
- --x-size-border-radius-bottom-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
6665
+ .x-option-list--bottom.x-option-list .x-option-list__item:last-child,
6666
+ .x-option-list--bottom .x-option-list .x-option-list__item:last-child {
6667
+ --x-size-border-width-option-list-item-default: inherit;
6668
+ --x-size-border-width-top-option-list-item-default: inherit;
6669
+ --x-size-border-width-right-option-list-item-default: inherit;
6670
+ --x-size-border-width-bottom-option-list-item-default: inherit;
6671
+ --x-size-border-width-left-option-list-item-default: inherit;
7295
6672
  }