@empathyco/x-components 6.0.0-alpha.41 → 6.0.0-alpha.42

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.
@@ -14,7 +14,6 @@
14
14
  .x-normal-case {
15
15
  text-transform: none;
16
16
  }
17
-
18
17
  .x-underline {
19
18
  -webkit-text-decoration-line: underline;
20
19
  text-decoration-line: underline;
@@ -494,6 +493,7 @@
494
493
  [dir="rtl"] .x-padding--left-20 {
495
494
  padding-right: var(--x-size-base-20) !important;
496
495
  }
496
+
497
497
  .x-margin--auto {
498
498
  margin: auto !important;
499
499
  }
@@ -1145,49 +1145,6 @@
1145
1145
  .x-font-color--transparent {
1146
1146
  color: var(--x-color-base-transparent) !important;
1147
1147
  }
1148
- .x-fill--lead {
1149
- fill: var(--x-color-base-lead) !important;
1150
- }
1151
-
1152
- .x-fill--auxiliary {
1153
- fill: var(--x-color-base-auxiliary) !important;
1154
- }
1155
-
1156
- .x-fill--neutral-10 {
1157
- fill: var(--x-color-base-neutral-10) !important;
1158
- }
1159
-
1160
- .x-fill--neutral-35 {
1161
- fill: var(--x-color-base-neutral-35) !important;
1162
- }
1163
-
1164
- .x-fill--neutral-70 {
1165
- fill: var(--x-color-base-neutral-70) !important;
1166
- }
1167
-
1168
- .x-fill--neutral-95 {
1169
- fill: var(--x-color-base-neutral-95) !important;
1170
- }
1171
-
1172
- .x-fill--neutral-100 {
1173
- fill: var(--x-color-base-neutral-100) !important;
1174
- }
1175
-
1176
- .x-fill--accent {
1177
- fill: var(--x-color-base-accent) !important;
1178
- }
1179
-
1180
- .x-fill--enable {
1181
- fill: var(--x-color-base-enable) !important;
1182
- }
1183
-
1184
- .x-fill--disable {
1185
- fill: var(--x-color-base-disable) !important;
1186
- }
1187
-
1188
- .x-fill--transparent {
1189
- fill: var(--x-color-base-transparent) !important;
1190
- }
1191
1148
  .x-flex-1 {
1192
1149
  flex: 1 1 0% !important;
1193
1150
  }
@@ -1231,6 +1188,49 @@
1231
1188
  .x-self-baseline {
1232
1189
  align-self: baseline !important;
1233
1190
  }
1191
+ .x-fill--lead {
1192
+ fill: var(--x-color-base-lead) !important;
1193
+ }
1194
+
1195
+ .x-fill--auxiliary {
1196
+ fill: var(--x-color-base-auxiliary) !important;
1197
+ }
1198
+
1199
+ .x-fill--neutral-10 {
1200
+ fill: var(--x-color-base-neutral-10) !important;
1201
+ }
1202
+
1203
+ .x-fill--neutral-35 {
1204
+ fill: var(--x-color-base-neutral-35) !important;
1205
+ }
1206
+
1207
+ .x-fill--neutral-70 {
1208
+ fill: var(--x-color-base-neutral-70) !important;
1209
+ }
1210
+
1211
+ .x-fill--neutral-95 {
1212
+ fill: var(--x-color-base-neutral-95) !important;
1213
+ }
1214
+
1215
+ .x-fill--neutral-100 {
1216
+ fill: var(--x-color-base-neutral-100) !important;
1217
+ }
1218
+
1219
+ .x-fill--accent {
1220
+ fill: var(--x-color-base-accent) !important;
1221
+ }
1222
+
1223
+ .x-fill--enable {
1224
+ fill: var(--x-color-base-enable) !important;
1225
+ }
1226
+
1227
+ .x-fill--disable {
1228
+ fill: var(--x-color-base-disable) !important;
1229
+ }
1230
+
1231
+ .x-fill--transparent {
1232
+ fill: var(--x-color-base-transparent) !important;
1233
+ }
1234
1234
  /* Material Elevations extracted from:
1235
1235
  https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1236
1236
  */
@@ -1299,71 +1299,6 @@
1299
1299
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1300
1300
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1301
1301
  }
1302
-
1303
- .x-shadow--none {
1304
- box-shadow: none !important;
1305
- }
1306
-
1307
- .x-shadow--01 {
1308
- box-shadow: var(--x-string-box-shadow-01) !important;
1309
- }
1310
- .x-shadow--bottom-01 {
1311
- box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1312
- }
1313
- .x-shadow--02 {
1314
- box-shadow: var(--x-string-box-shadow-02) !important;
1315
- }
1316
- .x-shadow--bottom-02 {
1317
- box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1318
- }
1319
- .x-shadow--03 {
1320
- box-shadow: var(--x-string-box-shadow-03) !important;
1321
- }
1322
- .x-shadow--bottom-03 {
1323
- box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1324
- }
1325
- .x-shadow--04 {
1326
- box-shadow: var(--x-string-box-shadow-04) !important;
1327
- }
1328
- .x-shadow--bottom-04 {
1329
- box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1330
- }
1331
- .x-shadow--05 {
1332
- box-shadow: var(--x-string-box-shadow-05) !important;
1333
- }
1334
- .x-shadow--bottom-05 {
1335
- box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1336
- }
1337
- .x-shadow--06 {
1338
- box-shadow: var(--x-string-box-shadow-06) !important;
1339
- }
1340
- .x-shadow--bottom-06 {
1341
- box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1342
- }
1343
- .x-shadow--07 {
1344
- box-shadow: var(--x-string-box-shadow-07) !important;
1345
- }
1346
- .x-shadow--bottom-07 {
1347
- box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1348
- }
1349
- .x-shadow--08 {
1350
- box-shadow: var(--x-string-box-shadow-08) !important;
1351
- }
1352
- .x-shadow--bottom-08 {
1353
- box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1354
- }
1355
- .x-shadow--09 {
1356
- box-shadow: var(--x-string-box-shadow-09) !important;
1357
- }
1358
- .x-shadow--bottom-09 {
1359
- box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1360
- }
1361
- .x-shadow--10 {
1362
- box-shadow: var(--x-string-box-shadow-10) !important;
1363
- }
1364
- .x-shadow--bottom-10 {
1365
- box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1366
- }
1367
1302
  /* Material Elevations extracted from:
1368
1303
  https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1369
1304
  */
@@ -1432,6 +1367,71 @@
1432
1367
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1433
1368
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1434
1369
  }
1370
+
1371
+ .x-shadow--none {
1372
+ box-shadow: none !important;
1373
+ }
1374
+
1375
+ .x-shadow--01 {
1376
+ box-shadow: var(--x-string-box-shadow-01) !important;
1377
+ }
1378
+ .x-shadow--bottom-01 {
1379
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
1380
+ }
1381
+ .x-shadow--02 {
1382
+ box-shadow: var(--x-string-box-shadow-02) !important;
1383
+ }
1384
+ .x-shadow--bottom-02 {
1385
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
1386
+ }
1387
+ .x-shadow--03 {
1388
+ box-shadow: var(--x-string-box-shadow-03) !important;
1389
+ }
1390
+ .x-shadow--bottom-03 {
1391
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
1392
+ }
1393
+ .x-shadow--04 {
1394
+ box-shadow: var(--x-string-box-shadow-04) !important;
1395
+ }
1396
+ .x-shadow--bottom-04 {
1397
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
1398
+ }
1399
+ .x-shadow--05 {
1400
+ box-shadow: var(--x-string-box-shadow-05) !important;
1401
+ }
1402
+ .x-shadow--bottom-05 {
1403
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
1404
+ }
1405
+ .x-shadow--06 {
1406
+ box-shadow: var(--x-string-box-shadow-06) !important;
1407
+ }
1408
+ .x-shadow--bottom-06 {
1409
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
1410
+ }
1411
+ .x-shadow--07 {
1412
+ box-shadow: var(--x-string-box-shadow-07) !important;
1413
+ }
1414
+ .x-shadow--bottom-07 {
1415
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
1416
+ }
1417
+ .x-shadow--08 {
1418
+ box-shadow: var(--x-string-box-shadow-08) !important;
1419
+ }
1420
+ .x-shadow--bottom-08 {
1421
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
1422
+ }
1423
+ .x-shadow--09 {
1424
+ box-shadow: var(--x-string-box-shadow-09) !important;
1425
+ }
1426
+ .x-shadow--bottom-09 {
1427
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
1428
+ }
1429
+ .x-shadow--10 {
1430
+ box-shadow: var(--x-string-box-shadow-10) !important;
1431
+ }
1432
+ .x-shadow--bottom-10 {
1433
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
1434
+ }
1435
1435
  *[class*=x-border-width--] {
1436
1436
  border-width: 0;
1437
1437
  }
@@ -3274,91 +3274,91 @@
3274
3274
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3275
3275
  border-bottom-left-radius: var(--x-size-base-20) !important;
3276
3276
  }
3277
- .x-background--lead {
3278
- background-color: var(--x-color-base-lead) !important;
3277
+ .x-border-color--lead {
3278
+ border-color: var(--x-color-base-lead) !important;
3279
3279
  }
3280
3280
 
3281
- .x-background--auxiliary {
3282
- background-color: var(--x-color-base-auxiliary) !important;
3281
+ .x-border-color--auxiliary {
3282
+ border-color: var(--x-color-base-auxiliary) !important;
3283
3283
  }
3284
3284
 
3285
- .x-background--neutral-10 {
3286
- background-color: var(--x-color-base-neutral-10) !important;
3285
+ .x-border-color--neutral-10 {
3286
+ border-color: var(--x-color-base-neutral-10) !important;
3287
3287
  }
3288
3288
 
3289
- .x-background--neutral-35 {
3290
- background-color: var(--x-color-base-neutral-35) !important;
3289
+ .x-border-color--neutral-35 {
3290
+ border-color: var(--x-color-base-neutral-35) !important;
3291
3291
  }
3292
3292
 
3293
- .x-background--neutral-70 {
3294
- background-color: var(--x-color-base-neutral-70) !important;
3293
+ .x-border-color--neutral-70 {
3294
+ border-color: var(--x-color-base-neutral-70) !important;
3295
3295
  }
3296
3296
 
3297
- .x-background--neutral-95 {
3298
- background-color: var(--x-color-base-neutral-95) !important;
3297
+ .x-border-color--neutral-95 {
3298
+ border-color: var(--x-color-base-neutral-95) !important;
3299
3299
  }
3300
3300
 
3301
- .x-background--neutral-100 {
3302
- background-color: var(--x-color-base-neutral-100) !important;
3301
+ .x-border-color--neutral-100 {
3302
+ border-color: var(--x-color-base-neutral-100) !important;
3303
3303
  }
3304
3304
 
3305
- .x-background--accent {
3306
- background-color: var(--x-color-base-accent) !important;
3305
+ .x-border-color--accent {
3306
+ border-color: var(--x-color-base-accent) !important;
3307
3307
  }
3308
3308
 
3309
- .x-background--enable {
3310
- background-color: var(--x-color-base-enable) !important;
3309
+ .x-border-color--enable {
3310
+ border-color: var(--x-color-base-enable) !important;
3311
3311
  }
3312
3312
 
3313
- .x-background--disable {
3314
- background-color: var(--x-color-base-disable) !important;
3313
+ .x-border-color--disable {
3314
+ border-color: var(--x-color-base-disable) !important;
3315
3315
  }
3316
3316
 
3317
- .x-background--transparent {
3318
- background-color: var(--x-color-base-transparent) !important;
3317
+ .x-border-color--transparent {
3318
+ border-color: var(--x-color-base-transparent) !important;
3319
3319
  }
3320
- .x-border-color--lead {
3321
- border-color: var(--x-color-base-lead) !important;
3320
+ .x-background--lead {
3321
+ background-color: var(--x-color-base-lead) !important;
3322
3322
  }
3323
3323
 
3324
- .x-border-color--auxiliary {
3325
- border-color: var(--x-color-base-auxiliary) !important;
3324
+ .x-background--auxiliary {
3325
+ background-color: var(--x-color-base-auxiliary) !important;
3326
3326
  }
3327
3327
 
3328
- .x-border-color--neutral-10 {
3329
- border-color: var(--x-color-base-neutral-10) !important;
3328
+ .x-background--neutral-10 {
3329
+ background-color: var(--x-color-base-neutral-10) !important;
3330
3330
  }
3331
3331
 
3332
- .x-border-color--neutral-35 {
3333
- border-color: var(--x-color-base-neutral-35) !important;
3332
+ .x-background--neutral-35 {
3333
+ background-color: var(--x-color-base-neutral-35) !important;
3334
3334
  }
3335
3335
 
3336
- .x-border-color--neutral-70 {
3337
- border-color: var(--x-color-base-neutral-70) !important;
3336
+ .x-background--neutral-70 {
3337
+ background-color: var(--x-color-base-neutral-70) !important;
3338
3338
  }
3339
3339
 
3340
- .x-border-color--neutral-95 {
3341
- border-color: var(--x-color-base-neutral-95) !important;
3340
+ .x-background--neutral-95 {
3341
+ background-color: var(--x-color-base-neutral-95) !important;
3342
3342
  }
3343
3343
 
3344
- .x-border-color--neutral-100 {
3345
- border-color: var(--x-color-base-neutral-100) !important;
3344
+ .x-background--neutral-100 {
3345
+ background-color: var(--x-color-base-neutral-100) !important;
3346
3346
  }
3347
3347
 
3348
- .x-border-color--accent {
3349
- border-color: var(--x-color-base-accent) !important;
3348
+ .x-background--accent {
3349
+ background-color: var(--x-color-base-accent) !important;
3350
3350
  }
3351
3351
 
3352
- .x-border-color--enable {
3353
- border-color: var(--x-color-base-enable) !important;
3352
+ .x-background--enable {
3353
+ background-color: var(--x-color-base-enable) !important;
3354
3354
  }
3355
3355
 
3356
- .x-border-color--disable {
3357
- border-color: var(--x-color-base-disable) !important;
3356
+ .x-background--disable {
3357
+ background-color: var(--x-color-base-disable) !important;
3358
3358
  }
3359
3359
 
3360
- .x-border-color--transparent {
3361
- border-color: var(--x-color-base-transparent) !important;
3360
+ .x-background--transparent {
3361
+ background-color: var(--x-color-base-transparent) !important;
3362
3362
  }
3363
3363
  .x-text--stroke.x-text {
3364
3364
  --x-string-text-decoration: line-through;
@@ -3378,6 +3378,9 @@
3378
3378
  :root {
3379
3379
  --x-color-text-secondary: var(--x-color-base-neutral-35);
3380
3380
  }
3381
+ .x-text--secondary {
3382
+ --x-color-text-default: var(--x-color-text-secondary);
3383
+ }
3381
3384
  .x-text--light.x-text {
3382
3385
  --x-number-font-weight-text: var(--x-number-font-weight-base-light);
3383
3386
  }
@@ -3393,8 +3396,45 @@
3393
3396
  .x-text--light.x-small {
3394
3397
  --x-number-font-weight-small: var(--x-number-font-weight-base-light);
3395
3398
  }
3396
- .x-text--secondary {
3397
- --x-color-text-default: var(--x-color-text-secondary);
3399
+ :root {
3400
+ --x-font-family-base: "Montserrat", sans-serif;
3401
+ --x-size-font-base-xs: 12px;
3402
+ --x-size-font-base-s: 14px;
3403
+ --x-size-font-base-m: 16px;
3404
+ --x-size-font-base-l: 18px;
3405
+ --x-size-font-base-xl: 32px;
3406
+ --x-number-font-weight-base-light: 300;
3407
+ --x-number-font-weight-base-regular: 400;
3408
+ --x-number-font-weight-base-bold: 600;
3409
+ --x-size-line-height-base-s: 16px;
3410
+ --x-size-line-height-base-m: 24px;
3411
+ --x-size-line-height-base-l: 32px;
3412
+ --x-color-text-default: var(--x-color-base-neutral-10);
3413
+ --x-font-family-text: var(--x-font-family-base);
3414
+ --x-size-font-text: var(--x-size-font-base-s);
3415
+ --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
3416
+ --x-size-line-height-text: var(--x-size-line-height-base-s);
3417
+ --x-string-text-decoration-text: none;
3418
+ --x-font-family-title1: var(--x-font-family-base);
3419
+ --x-size-font-title1: var(--x-size-font-base-xl);
3420
+ --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
3421
+ --x-size-line-height-title1: var(--x-size-line-height-base-l);
3422
+ --x-string-text-decoration-title1: none;
3423
+ --x-font-family-title2: var(--x-font-family-base);
3424
+ --x-size-font-title2: var(--x-size-font-base-l);
3425
+ --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
3426
+ --x-size-line-height-title2: var(--x-size-line-height-base-m);
3427
+ --x-string-text-decoration-title2: none;
3428
+ --x-font-family-title3: var(--x-font-family-base);
3429
+ --x-size-font-title3: var(--x-size-font-base-m);
3430
+ --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
3431
+ --x-size-line-height-title3: var(--x-size-line-height-base-m);
3432
+ --x-string-text-decoration-title3: none;
3433
+ --x-font-family-small: var(--x-font-family-base);
3434
+ --x-size-font-small: var(--x-size-font-base-xs);
3435
+ --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
3436
+ --x-size-line-height-small: var(--x-size-line-height-base-s);
3437
+ --x-string-text-decoration-small: none;
3398
3438
  }
3399
3439
  :root {
3400
3440
  --x-font-family-base: "Montserrat", sans-serif;
@@ -3498,49 +3538,6 @@
3498
3538
  overflow: hidden;
3499
3539
  white-space: nowrap;
3500
3540
  }
3501
- :root {
3502
- --x-font-family-base: "Montserrat", sans-serif;
3503
- --x-size-font-base-xs: 12px;
3504
- --x-size-font-base-s: 14px;
3505
- --x-size-font-base-m: 16px;
3506
- --x-size-font-base-l: 18px;
3507
- --x-size-font-base-xl: 32px;
3508
- --x-number-font-weight-base-light: 300;
3509
- --x-number-font-weight-base-regular: 400;
3510
- --x-number-font-weight-base-bold: 600;
3511
- --x-size-line-height-base-s: 16px;
3512
- --x-size-line-height-base-m: 24px;
3513
- --x-size-line-height-base-l: 32px;
3514
- --x-color-text-default: var(--x-color-base-neutral-10);
3515
- --x-font-family-text: var(--x-font-family-base);
3516
- --x-size-font-text: var(--x-size-font-base-s);
3517
- --x-number-font-weight-text: var(--x-number-font-weight-base-regular);
3518
- --x-size-line-height-text: var(--x-size-line-height-base-s);
3519
- --x-string-text-decoration-text: none;
3520
- --x-font-family-title1: var(--x-font-family-base);
3521
- --x-size-font-title1: var(--x-size-font-base-xl);
3522
- --x-number-font-weight-title1: var(--x-number-font-weight-base-regular);
3523
- --x-size-line-height-title1: var(--x-size-line-height-base-l);
3524
- --x-string-text-decoration-title1: none;
3525
- --x-font-family-title2: var(--x-font-family-base);
3526
- --x-size-font-title2: var(--x-size-font-base-l);
3527
- --x-number-font-weight-title2: var(--x-number-font-weight-base-regular);
3528
- --x-size-line-height-title2: var(--x-size-line-height-base-m);
3529
- --x-string-text-decoration-title2: none;
3530
- --x-font-family-title3: var(--x-font-family-base);
3531
- --x-size-font-title3: var(--x-size-font-base-m);
3532
- --x-number-font-weight-title3: var(--x-number-font-weight-base-regular);
3533
- --x-size-line-height-title3: var(--x-size-line-height-base-m);
3534
- --x-string-text-decoration-title3: none;
3535
- --x-font-family-small: var(--x-font-family-base);
3536
- --x-size-font-small: var(--x-size-font-base-xs);
3537
- --x-number-font-weight-small: var(--x-number-font-weight-base-regular);
3538
- --x-size-line-height-small: var(--x-size-line-height-base-s);
3539
- --x-string-text-decoration-small: none;
3540
- }
3541
- :root {
3542
- --x-color-text-accent: var(--x-color-base-accent);
3543
- }
3544
3541
  .x-text--bold.x-text {
3545
3542
  --x-number-font-weight-text: var(--x-number-font-weight-base-bold);
3546
3543
  }
@@ -3556,6 +3553,9 @@
3556
3553
  .x-text--bold.x-small {
3557
3554
  --x-number-font-weight-small: var(--x-number-font-weight-base-bold);
3558
3555
  }
3556
+ :root {
3557
+ --x-color-text-accent: var(--x-color-base-accent);
3558
+ }
3559
3559
  .x-text--accent {
3560
3560
  --x-color-text-default: var(--x-color-text-accent);
3561
3561
  }
@@ -3672,6 +3672,52 @@
3672
3672
  --x-number-font-weight-tag-default-selected
3673
3673
  );
3674
3674
  }
3675
+ :root {
3676
+ --x-color-background-tag-default: var(--x-color-base-neutral-100);
3677
+ --x-color-border-tag-default: var(--x-color-text-tag-default);
3678
+ --x-color-text-tag-default: var(--x-color-text-default);
3679
+ --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
3680
+ --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
3681
+ --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
3682
+ --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
3683
+ --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
3684
+ --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
3685
+ --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
3686
+ --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
3687
+ --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
3688
+ --x-size-border-width-tag-default: var(--x-size-border-width-base);
3689
+ --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
3690
+ --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
3691
+ --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
3692
+ --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
3693
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
3694
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
3695
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
3696
+ --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
3697
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
3698
+ --x-size-height-tag-default: var(--x-size-base-07);
3699
+ --x-size-padding-right-tag-default: var(--x-size-base-04);
3700
+ --x-size-padding-left-tag-default: var(--x-size-base-04);
3701
+ --x-size-gap-tag-default: var(--x-size-base-02);
3702
+ --x-font-family-tag-default: var(--x-font-family-text);
3703
+ --x-size-font-tag-default: var(--x-size-font-text);
3704
+ --x-size-line-height-tag-default: var(--x-size-line-height-text);
3705
+ --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
3706
+ --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
3707
+ --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
3708
+ --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
3709
+ --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
3710
+ --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
3711
+ --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
3712
+ --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
3713
+ --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
3714
+ --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
3715
+ --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
3716
+ --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
3717
+ --x-number-font-weight-tag-default-curated-selected: var(
3718
+ --x-number-font-weight-tag-default-selected
3719
+ );
3720
+ }
3675
3721
 
3676
3722
  [dir="ltr"] .x-tag {
3677
3723
  border-left-width: var(--x-size-border-width-left-tag-default);
@@ -3847,52 +3893,6 @@
3847
3893
  );
3848
3894
  --x-size-line-height-filter-default-selected: var(--x-size-line-height-tag-default-selected);
3849
3895
  }
3850
- :root {
3851
- --x-color-background-tag-default: var(--x-color-base-neutral-100);
3852
- --x-color-border-tag-default: var(--x-color-text-tag-default);
3853
- --x-color-text-tag-default: var(--x-color-text-default);
3854
- --x-color-background-tag-default-selected: var(--x-color-base-neutral-95);
3855
- --x-color-border-tag-default-selected: var(--x-color-border-tag-default);
3856
- --x-color-text-tag-default-selected: var(--x-color-text-tag-default);
3857
- --x-color-background-tag-default-curated: var(--x-color-background-tag-default);
3858
- --x-color-border-tag-default-curated: var(--x-color-border-tag-default);
3859
- --x-color-text-tag-default-curated: var(--x-color-text-tag-default);
3860
- --x-color-background-tag-default-curated-selected: var(--x-color-background-tag-default-selected);
3861
- --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-default-selected);
3862
- --x-color-text-tag-default-curated-selected: var(--x-color-text-tag-default-selected);
3863
- --x-size-border-width-tag-default: var(--x-size-border-width-base);
3864
- --x-size-border-width-top-tag-default: var(--x-size-border-width-tag-default);
3865
- --x-size-border-width-right-tag-default: var(--x-size-border-width-tag-default);
3866
- --x-size-border-width-bottom-tag-default: var(--x-size-border-width-tag-default);
3867
- --x-size-border-width-left-tag-default: var(--x-size-border-width-tag-default);
3868
- --x-size-border-radius-tag-default: var(--x-size-border-radius-base-none);
3869
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-tag-default);
3870
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-tag-default);
3871
- --x-size-border-radius-bottom-right-tag-default: var(--x-size-border-radius-tag-default);
3872
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-tag-default);
3873
- --x-size-height-tag-default: var(--x-size-base-07);
3874
- --x-size-padding-right-tag-default: var(--x-size-base-04);
3875
- --x-size-padding-left-tag-default: var(--x-size-base-04);
3876
- --x-size-gap-tag-default: var(--x-size-base-02);
3877
- --x-font-family-tag-default: var(--x-font-family-text);
3878
- --x-size-font-tag-default: var(--x-size-font-text);
3879
- --x-size-line-height-tag-default: var(--x-size-line-height-text);
3880
- --x-number-font-weight-tag-default: var(--x-number-font-weight-text);
3881
- --x-font-family-tag-default-selected: var(--x-font-family-tag-default);
3882
- --x-size-font-tag-default-selected: var(--x-size-font-tag-default);
3883
- --x-size-line-height-tag-default-selected: var(--x-size-line-height-tag-default);
3884
- --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-default);
3885
- --x-font-family-tag-default-curated: var(--x-font-family-tag-default);
3886
- --x-size-font-tag-default-curated: var(--x-size-font-tag-default);
3887
- --x-size-line-height-tag-default-curated: var(--x-size-line-height-tag-default);
3888
- --x-number-font-weight-tag-default-curated: var(--x-number-font-weight-tag-default);
3889
- --x-font-family-tag-default-curated-selected: var(--x-font-family-tag-default-selected);
3890
- --x-size-font-tag-default-curated-selected: var(--x-size-font-tag-default-selected);
3891
- --x-size-line-height-tag-default-curated-selected: var(--x-size-line-height-tag-default-selected);
3892
- --x-number-font-weight-tag-default-curated-selected: var(
3893
- --x-number-font-weight-tag-default-selected
3894
- );
3895
- }
3896
3896
  :root {
3897
3897
  --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3898
3898
  --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
@@ -4165,6 +4165,12 @@
4165
4165
  --x-number-font-weight-suggestion-default-matching
4166
4166
  );
4167
4167
  }
4168
+ :root {
4169
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4170
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4171
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4172
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4173
+ }
4168
4174
  :root {
4169
4175
  --x-string-align-items-suggestion-default: center;
4170
4176
  --x-color-text-suggestion-default: var(--x-color-text-default);
@@ -4387,12 +4393,6 @@
4387
4393
  --x-color-text-suggestion-default-matching-curated
4388
4394
  );
4389
4395
  }
4390
- :root {
4391
- --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4392
- --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4393
- --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4394
- --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4395
- }
4396
4396
  .x-sliding-panel {
4397
4397
  z-index: 0;
4398
4398
  background-color: var(--x-color-background-sliding-panel);
@@ -4500,14 +4500,6 @@
4500
4500
  --x-size-padding-row-05: var(--x-size-base-05);
4501
4501
  --x-size-padding-row-06: var(--x-size-base-06);
4502
4502
  }
4503
- /* @deprecated */
4504
- :root {
4505
- --x-size-padding-row-02: var(--x-size-base-02);
4506
- --x-size-padding-row-03: var(--x-size-base-03);
4507
- --x-size-padding-row-04: var(--x-size-base-04);
4508
- --x-size-padding-row-05: var(--x-size-base-05);
4509
- --x-size-padding-row-06: var(--x-size-base-06);
4510
- }
4511
4503
 
4512
4504
  /* @deprecated */
4513
4505
  .x-row--padding-02 {
@@ -4529,6 +4521,36 @@
4529
4521
  .x-row--padding-06 {
4530
4522
  --x-size-padding-row: var(--x-size-padding-row-06);
4531
4523
  }
4524
+ /* @deprecated */
4525
+ :root {
4526
+ --x-size-padding-row-02: var(--x-size-base-02);
4527
+ --x-size-padding-row-03: var(--x-size-base-03);
4528
+ --x-size-padding-row-04: var(--x-size-base-04);
4529
+ --x-size-padding-row-05: var(--x-size-base-05);
4530
+ --x-size-padding-row-06: var(--x-size-base-06);
4531
+ }
4532
+ :root {
4533
+ --x-size-gap-row-01: var(--x-size-base-01);
4534
+ --x-size-gap-row-02: var(--x-size-base-02);
4535
+ --x-size-gap-row-03: var(--x-size-base-03);
4536
+ --x-size-gap-row-04: var(--x-size-base-04);
4537
+ --x-size-gap-row-05: var(--x-size-base-05);
4538
+ --x-size-gap-row-06: var(--x-size-base-06);
4539
+ --x-size-gap-row-07: var(--x-size-base-07);
4540
+ --x-size-gap-row-08: var(--x-size-base-08);
4541
+ --x-size-gap-row-09: var(--x-size-base-09);
4542
+ --x-size-gap-row-10: var(--x-size-base-10);
4543
+ --x-size-gap-row-11: var(--x-size-base-11);
4544
+ --x-size-gap-row-12: var(--x-size-base-12);
4545
+ --x-size-gap-row-13: var(--x-size-base-13);
4546
+ --x-size-gap-row-14: var(--x-size-base-14);
4547
+ --x-size-gap-row-15: var(--x-size-base-15);
4548
+ --x-size-gap-row-16: var(--x-size-base-16);
4549
+ --x-size-gap-row-17: var(--x-size-base-17);
4550
+ --x-size-gap-row-18: var(--x-size-base-18);
4551
+ --x-size-gap-row-19: var(--x-size-base-19);
4552
+ --x-size-gap-row-20: var(--x-size-base-20);
4553
+ }
4532
4554
  :root {
4533
4555
  --x-size-gap-row-01: var(--x-size-base-01);
4534
4556
  --x-size-gap-row-02: var(--x-size-base-02);
@@ -4631,28 +4653,6 @@
4631
4653
  .x-row--gap-20 {
4632
4654
  --x-size-gap-row: var(--x-size-gap-row-20);
4633
4655
  }
4634
- :root {
4635
- --x-size-gap-row-01: var(--x-size-base-01);
4636
- --x-size-gap-row-02: var(--x-size-base-02);
4637
- --x-size-gap-row-03: var(--x-size-base-03);
4638
- --x-size-gap-row-04: var(--x-size-base-04);
4639
- --x-size-gap-row-05: var(--x-size-base-05);
4640
- --x-size-gap-row-06: var(--x-size-base-06);
4641
- --x-size-gap-row-07: var(--x-size-base-07);
4642
- --x-size-gap-row-08: var(--x-size-base-08);
4643
- --x-size-gap-row-09: var(--x-size-base-09);
4644
- --x-size-gap-row-10: var(--x-size-base-10);
4645
- --x-size-gap-row-11: var(--x-size-base-11);
4646
- --x-size-gap-row-12: var(--x-size-base-12);
4647
- --x-size-gap-row-13: var(--x-size-base-13);
4648
- --x-size-gap-row-14: var(--x-size-base-14);
4649
- --x-size-gap-row-15: var(--x-size-base-15);
4650
- --x-size-gap-row-16: var(--x-size-base-16);
4651
- --x-size-gap-row-17: var(--x-size-base-17);
4652
- --x-size-gap-row-18: var(--x-size-base-18);
4653
- --x-size-gap-row-19: var(--x-size-base-19);
4654
- --x-size-gap-row-20: var(--x-size-base-20);
4655
- }
4656
4656
  :root {
4657
4657
  --x-size-gap-row: 0;
4658
4658
  --x-size-padding-row: 0;
@@ -4925,6 +4925,10 @@
4925
4925
  --x-number-zoom-scale-picture: 1.1;
4926
4926
  --x-number-zoom-duration-picture: 0.3s;
4927
4927
  }
4928
+ :root {
4929
+ --x-number-zoom-scale-picture: 1.1;
4930
+ --x-number-zoom-duration-picture: 0.3s;
4931
+ }
4928
4932
 
4929
4933
  .x-picture--zoom .x-picture-image {
4930
4934
  transition: transform var(--x-number-zoom-duration-picture) ease-out;
@@ -4932,10 +4936,6 @@
4932
4936
  .x-picture--zoom .x-picture-image:hover {
4933
4937
  transform: scale(var(--x-number-zoom-scale-picture));
4934
4938
  }
4935
- :root {
4936
- --x-number-zoom-scale-picture: 1.1;
4937
- --x-number-zoom-duration-picture: 0.3s;
4938
- }
4939
4939
  :root {
4940
4940
  --x-number-aspect-ratio-picture: 1;
4941
4941
  }
@@ -5025,10 +5025,6 @@
5025
5025
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5026
5026
  --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5027
5027
  }
5028
- :root {
5029
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5030
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5031
- }
5032
5028
 
5033
5029
  .x-picture--cover.x-picture {
5034
5030
  position: relative;
@@ -5045,6 +5041,10 @@
5045
5041
  width: 100%;
5046
5042
  height: 100%;
5047
5043
  }
5044
+ :root {
5045
+ --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5046
+ --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5047
+ }
5048
5048
  :root {
5049
5049
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5050
5050
  --x-mix-blend-mode-picture-colored: multiply;
@@ -5574,6 +5574,22 @@
5574
5574
  --x-size-font-message-default: var(--x-size-font-title3);
5575
5575
  --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5576
5576
  }
5577
+ /* @deprecated */
5578
+ :root {
5579
+ --x-size-padding-list-01: var(--x-size-base-01);
5580
+ --x-size-padding-list-02: var(--x-size-base-02);
5581
+ --x-size-padding-list-03: var(--x-size-base-03);
5582
+ --x-size-padding-list-04: var(--x-size-base-04);
5583
+ --x-size-padding-list-05: var(--x-size-base-05);
5584
+ --x-size-padding-list-06: var(--x-size-base-06);
5585
+ --x-size-padding-list-07: var(--x-size-base-07);
5586
+ --x-size-padding-list-08: var(--x-size-base-08);
5587
+ --x-size-padding-list-09: var(--x-size-base-09);
5588
+ --x-size-padding-list-10: var(--x-size-base-10);
5589
+ --x-size-padding-list-11: var(--x-size-base-11);
5590
+ --x-size-padding-list-12: var(--x-size-base-12);
5591
+ --x-size-padding-list-13: var(--x-size-base-13);
5592
+ }
5577
5593
  :root {
5578
5594
  --x-string-justify-message-default: center;
5579
5595
  --x-size-gap-message-default: var(--x-size-base-03);
@@ -5661,22 +5677,6 @@
5661
5677
  --x-size-padding-list-12: var(--x-size-base-12);
5662
5678
  --x-size-padding-list-13: var(--x-size-base-13);
5663
5679
  }
5664
- /* @deprecated */
5665
- :root {
5666
- --x-size-padding-list-01: var(--x-size-base-01);
5667
- --x-size-padding-list-02: var(--x-size-base-02);
5668
- --x-size-padding-list-03: var(--x-size-base-03);
5669
- --x-size-padding-list-04: var(--x-size-base-04);
5670
- --x-size-padding-list-05: var(--x-size-base-05);
5671
- --x-size-padding-list-06: var(--x-size-base-06);
5672
- --x-size-padding-list-07: var(--x-size-base-07);
5673
- --x-size-padding-list-08: var(--x-size-base-08);
5674
- --x-size-padding-list-09: var(--x-size-base-09);
5675
- --x-size-padding-list-10: var(--x-size-base-10);
5676
- --x-size-padding-list-11: var(--x-size-base-11);
5677
- --x-size-padding-list-12: var(--x-size-base-12);
5678
- --x-size-padding-list-13: var(--x-size-base-13);
5679
- }
5680
5680
 
5681
5681
  /* @deprecated */
5682
5682
  [class*=x-list--padding-].x-list.x-list--padding-top:not(.x-list--padding-right) {
@@ -6542,16 +6542,8 @@
6542
6542
  }
6543
6543
  .x-list--gap-20.x-list.x-list--wrap > *:not(:last-child) {
6544
6544
  margin-right: var(--x-size-gap-list-20);
6545
- margin-bottom: var(--x-size-gap-list-20);
6546
- }
6547
- }
6548
- :root {
6549
- --x-string-flow-list: column nowrap;
6550
- --x-size-padding-list: 0;
6551
- --x-size-gap-list: 0;
6552
- --x-size-justify-list: stretch;
6553
- --x-size-align-list: stretch;
6554
- --x-size-align-list-stretch: stretch;
6545
+ margin-bottom: var(--x-size-gap-list-20);
6546
+ }
6555
6547
  }
6556
6548
  :root {
6557
6549
  --x-string-flow-list: column nowrap;
@@ -6701,6 +6693,14 @@
6701
6693
  .x-list > .x-list__item--12 {
6702
6694
  flex: 12 1 auto;
6703
6695
  }
6696
+ :root {
6697
+ --x-string-flow-list: column nowrap;
6698
+ --x-size-padding-list: 0;
6699
+ --x-size-gap-list: 0;
6700
+ --x-size-justify-list: stretch;
6701
+ --x-size-align-list: stretch;
6702
+ --x-size-align-list-stretch: stretch;
6703
+ }
6704
6704
  :root {
6705
6705
  --x-size-border-radius-input-group-pill: var(--x-size-border-radius-base-pill);
6706
6706
  --x-size-border-radius-top-left-input-group-pill: var(--x-size-border-radius-input-group-pill);
@@ -6745,15 +6745,6 @@
6745
6745
  --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6746
6746
  --x-size-border-width-left-input-group-line: 0;
6747
6747
  }
6748
- :root {
6749
- --x-size-padding-left-input-group-line: 0;
6750
- --x-size-padding-right-input-group-line: 0;
6751
- --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6752
- --x-size-border-width-top-input-group-line: 0;
6753
- --x-size-border-width-right-input-group-line: 0;
6754
- --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6755
- --x-size-border-width-left-input-group-line: 0;
6756
- }
6757
6748
 
6758
6749
  .x-input-group--line .x-input-group,
6759
6750
  .x-input-group--line.x-input-group {
@@ -6792,6 +6783,15 @@
6792
6783
  margin-top: calc(var(--x-size-border-width-top-input-group-line) * -1) !important;
6793
6784
  margin-bottom: calc(var(--x-size-border-width-bottom-input-group-line) * -1) !important;
6794
6785
  }
6786
+ :root {
6787
+ --x-size-padding-left-input-group-line: 0;
6788
+ --x-size-padding-right-input-group-line: 0;
6789
+ --x-size-border-width-input-group-line: var(--x-size-border-width-input-group-default);
6790
+ --x-size-border-width-top-input-group-line: 0;
6791
+ --x-size-border-width-right-input-group-line: 0;
6792
+ --x-size-border-width-bottom-input-group-line: var(--x-size-border-width-input-group-line);
6793
+ --x-size-border-width-left-input-group-line: 0;
6794
+ }
6795
6795
  :root {
6796
6796
  --x-color-background-input-group-default: var(--x-color-background-input-default);
6797
6797
  --x-color-border-input-group-default: var(--x-color-border-input-default);
@@ -7090,6 +7090,34 @@
7090
7090
  --x-size-border-width-bottom-input-line: var(--x-size-border-width-base);
7091
7091
  --x-size-border-width-left-input-line: 0;
7092
7092
  }
7093
+ :root {
7094
+ --x-color-background-input-default: var(--x-color-base-neutral-100);
7095
+ --x-color-border-input-default: var(--x-color-base-neutral-70);
7096
+ --x-color-border-input-default-focus: var(--x-color-base-lead);
7097
+ --x-color-text-input-default: var(--x-color-text-default);
7098
+ --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7099
+ --x-size-border-width-input-default: var(--x-size-border-width-base);
7100
+ --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7101
+ --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7102
+ --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7103
+ --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7104
+ --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7105
+ --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7106
+ --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7107
+ --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7108
+ --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7109
+ --x-size-height-input-default: var(--x-size-base-07);
7110
+ --x-size-padding-right-input-default: var(--x-size-base-04);
7111
+ --x-size-padding-left-input-default: var(--x-size-base-04);
7112
+ --x-font-family-input-default: var(--x-font-family-text);
7113
+ --x-size-font-input-default: var(--x-size-font-text);
7114
+ --x-size-line-height-input-default: var(--x-size-line-height-text);
7115
+ --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7116
+ --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7117
+ --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7118
+ --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7119
+ --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7120
+ }
7093
7121
  :root {
7094
7122
  --x-size-padding-top-input-line: var(--x-size-base-03);
7095
7123
  --x-size-padding-right-input-line: 0;
@@ -7220,34 +7248,6 @@
7220
7248
  font-weight: var(--x-number-font-weight-input-placeholder-default);
7221
7249
  line-height: var(--x-size-line-height-input-placeholder-default);
7222
7250
  }
7223
- :root {
7224
- --x-color-background-input-default: var(--x-color-base-neutral-100);
7225
- --x-color-border-input-default: var(--x-color-base-neutral-70);
7226
- --x-color-border-input-default-focus: var(--x-color-base-lead);
7227
- --x-color-text-input-default: var(--x-color-text-default);
7228
- --x-color-text-input-placeholder-default: var(--x-color-base-neutral-35);
7229
- --x-size-border-width-input-default: var(--x-size-border-width-base);
7230
- --x-size-border-width-top-input-default: var(--x-size-border-width-input-default);
7231
- --x-size-border-width-right-input-default: var(--x-size-border-width-input-default);
7232
- --x-size-border-width-bottom-input-default: var(--x-size-border-width-input-default);
7233
- --x-size-border-width-left-input-default: var(--x-size-border-width-input-default);
7234
- --x-size-border-radius-input-default: var(--x-size-border-radius-base-none);
7235
- --x-size-border-radius-top-left-input-default: var(--x-size-border-radius-input-default);
7236
- --x-size-border-radius-top-right-input-default: var(--x-size-border-radius-input-default);
7237
- --x-size-border-radius-bottom-right-input-default: var(--x-size-border-radius-input-default);
7238
- --x-size-border-radius-bottom-left-input-default: var(--x-size-border-radius-input-default);
7239
- --x-size-height-input-default: var(--x-size-base-07);
7240
- --x-size-padding-right-input-default: var(--x-size-base-04);
7241
- --x-size-padding-left-input-default: var(--x-size-base-04);
7242
- --x-font-family-input-default: var(--x-font-family-text);
7243
- --x-size-font-input-default: var(--x-size-font-text);
7244
- --x-size-line-height-input-default: var(--x-size-line-height-text);
7245
- --x-number-font-weight-input-default: var(--x-number-font-weight-text);
7246
- --x-font-family-input-placeholder-default: var(--x-font-family-input-default);
7247
- --x-size-font-input-placeholder-default: var(--x-size-font-input-default);
7248
- --x-size-line-height-input-placeholder-default: var(--x-size-line-height-input-default);
7249
- --x-number-font-weight-input-placeholder-default: var(--x-number-font-weight-input-default);
7250
- }
7251
7251
  :root {
7252
7252
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7253
7253
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7279,14 +7279,18 @@
7279
7279
  --x-size-width-icon-xl: var(--x-size-base-07);
7280
7280
  --x-size-height-icon-xl: var(--x-size-base-07);
7281
7281
  }
7282
+ :root {
7283
+ --x-size-width-icon-xl: var(--x-size-base-07);
7284
+ --x-size-height-icon-xl: var(--x-size-base-07);
7285
+ }
7282
7286
 
7283
7287
  .x-icon--xl {
7284
7288
  --x-size-width-icon-default: var(--x-size-width-icon-xl);
7285
7289
  --x-size-height-icon-default: var(--x-size-height-icon-xl);
7286
7290
  }
7287
7291
  :root {
7288
- --x-size-width-icon-xl: var(--x-size-base-07);
7289
- --x-size-height-icon-xl: var(--x-size-base-07);
7292
+ --x-size-width-icon-s: var(--x-size-base-03);
7293
+ --x-size-height-icon-s: var(--x-size-base-03);
7290
7294
  }
7291
7295
  :root {
7292
7296
  --x-size-width-icon-s: var(--x-size-base-03);
@@ -7297,10 +7301,6 @@
7297
7301
  --x-size-width-icon-default: var(--x-size-width-icon-s);
7298
7302
  --x-size-height-icon-default: var(--x-size-height-icon-s);
7299
7303
  }
7300
- :root {
7301
- --x-size-width-icon-s: var(--x-size-base-03);
7302
- --x-size-height-icon-s: var(--x-size-base-03);
7303
- }
7304
7304
  :root {
7305
7305
  --x-size-width-icon-m: var(--x-size-base-05);
7306
7306
  --x-size-height-icon-m: var(--x-size-base-05);
@@ -8364,6 +8364,19 @@
8364
8364
  --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8365
8365
  --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8366
8366
  }
8367
+ :root {
8368
+ --x-size-gap-dropdown-card: var(--x-size-base-03);
8369
+ --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8370
+ --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8371
+ --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8372
+ --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8373
+ --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8374
+ --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8375
+ --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8376
+ --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8377
+ --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8378
+ --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8379
+ }
8367
8380
 
8368
8381
  .x-dropdown--card {
8369
8382
  --x-size-gap-dropdown-default: var(--x-size-gap-dropdown-card);
@@ -8394,19 +8407,6 @@
8394
8407
  --x-size-border-width-left-dropdown-list-card
8395
8408
  );
8396
8409
  }
8397
- :root {
8398
- --x-size-gap-dropdown-card: var(--x-size-base-03);
8399
- --x-size-border-radius-dropdown-card: var(--x-size-border-radius-base-s);
8400
- --x-size-border-radius-top-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8401
- --x-size-border-radius-top-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8402
- --x-size-border-radius-bottom-right-dropdown-card: var(--x-size-border-radius-dropdown-card);
8403
- --x-size-border-radius-bottom-left-dropdown-card: var(--x-size-border-radius-dropdown-card);
8404
- --x-size-border-width-dropdown-list-card: var(--x-size-border-width-base);
8405
- --x-size-border-width-top-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8406
- --x-size-border-width-right-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8407
- --x-size-border-width-bottom-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8408
- --x-size-border-width-left-dropdown-list-card: var(--x-size-border-width-dropdown-list-card);
8409
- }
8410
8410
  :root {
8411
8411
  --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8412
8412
  --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
@@ -8418,25 +8418,14 @@
8418
8418
  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8419
8419
  }
8420
8420
  :root {
8421
- --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8422
- --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8423
- --x-color-text-button-tertiary: var(--x-color-text-default);
8424
- --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8425
- --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8426
- --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8427
- --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8428
- --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8429
- }
8430
-
8431
- .x-button--tertiary.x-button,
8432
- .x-button--tertiary .x-button {
8433
- --x-color-background-button-default: var(--x-color-background-button-tertiary);
8434
- --x-color-border-button-default: var(--x-color-border-button-tertiary);
8435
- --x-color-text-button-default: var(--x-color-text-button-tertiary);
8436
- --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
8437
- --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
8438
- --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
8439
- --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8421
+ --x-color-background-button-secondary: transparent;
8422
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
8423
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
8424
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8425
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8426
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8427
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8428
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8440
8429
  }
8441
8430
  :root {
8442
8431
  --x-color-background-button-secondary: transparent;
@@ -8460,14 +8449,32 @@
8460
8449
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-secondary);
8461
8450
  }
8462
8451
  :root {
8463
- --x-color-background-button-secondary: transparent;
8464
- --x-color-border-button-secondary: var(--x-color-border-button-default);
8465
- --x-color-text-button-secondary: var(--x-color-border-button-default);
8466
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8467
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8468
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8469
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8470
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8452
+ --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8453
+ --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8454
+ --x-color-text-button-tertiary: var(--x-color-text-default);
8455
+ --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8456
+ --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8457
+ --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8458
+ --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8459
+ --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8460
+ }
8461
+
8462
+ .x-button--tertiary.x-button,
8463
+ .x-button--tertiary .x-button {
8464
+ --x-color-background-button-default: var(--x-color-background-button-tertiary);
8465
+ --x-color-border-button-default: var(--x-color-border-button-tertiary);
8466
+ --x-color-text-button-default: var(--x-color-text-button-tertiary);
8467
+ --x-size-border-width-top-button-default: var(--x-size-border-width-top-button-tertiary);
8468
+ --x-size-border-width-right-button-default: var(--x-size-border-width-right-button-tertiary);
8469
+ --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-tertiary);
8470
+ --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8471
+ }
8472
+ :root {
8473
+ --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8474
+ --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8475
+ --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8476
+ --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8477
+ --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8471
8478
  }
8472
8479
  :root {
8473
8480
  --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
@@ -8504,6 +8511,16 @@
8504
8511
  --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8505
8512
  --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8506
8513
  }
8514
+ :root {
8515
+ --x-color-background-button-primary: var(--x-color-background-button-default);
8516
+ --x-color-border-button-primary: var(--x-color-border-button-default);
8517
+ --x-color-text-button-primary: var(--x-color-text-button-default);
8518
+ --x-size-border-width-button-primary: var(--x-size-border-width-base);
8519
+ --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8520
+ --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8521
+ --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8522
+ --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8523
+ }
8507
8524
 
8508
8525
  .x-button--primary.x-button,
8509
8526
  .x-button--primary .x-button {
@@ -8515,16 +8532,6 @@
8515
8532
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
8516
8533
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
8517
8534
  }
8518
- :root {
8519
- --x-color-background-button-primary: var(--x-color-background-button-default);
8520
- --x-color-border-button-primary: var(--x-color-border-button-default);
8521
- --x-color-text-button-primary: var(--x-color-text-button-default);
8522
- --x-size-border-width-button-primary: var(--x-size-border-width-base);
8523
- --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8524
- --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8525
- --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8526
- --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8527
- }
8528
8535
  :root {
8529
8536
  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8530
8537
  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -8559,11 +8566,6 @@
8559
8566
  --x-color-border-button-ghost: transparent;
8560
8567
  --x-color-text-button-ghost: var(--x-color-base-lead);
8561
8568
  }
8562
- :root {
8563
- --x-color-background-button-ghost: transparent;
8564
- --x-color-border-button-ghost: transparent;
8565
- --x-color-text-button-ghost: var(--x-color-base-lead);
8566
- }
8567
8569
 
8568
8570
  .x-button--ghost.x-button,
8569
8571
  .x-button--ghost .x-button {
@@ -8581,6 +8583,11 @@
8581
8583
  .x-button--ghost.x-button--ghost-end .x-button {
8582
8584
  --x-size-padding-right-button-default: 0;
8583
8585
  }
8586
+ :root {
8587
+ --x-color-background-button-ghost: transparent;
8588
+ --x-color-border-button-ghost: transparent;
8589
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8590
+ }
8584
8591
  :root {
8585
8592
  --x-color-background-button-default: var(--x-color-base-lead);
8586
8593
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8696,13 +8703,6 @@
8696
8703
  --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8697
8704
  --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8698
8705
  }
8699
- :root {
8700
- --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8701
- --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8702
- --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8703
- --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8704
- --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8705
- }
8706
8706
 
8707
8707
  .x-button--card.x-button,
8708
8708
  .x-button--card .x-button {
@@ -8777,19 +8777,6 @@
8777
8777
  --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8778
8778
  --x-size-font-badge-default: var(--x-size-font-base-xs);
8779
8779
  }
8780
- :root {
8781
- --x-color-base-lead: #243d48;
8782
- --x-color-base-auxiliary: #bfe1ec;
8783
- --x-color-base-neutral-10: #1a1a1a;
8784
- --x-color-base-neutral-35: #595959;
8785
- --x-color-base-neutral-70: #b3b3b3;
8786
- --x-color-base-neutral-95: #f2f2f2;
8787
- --x-color-base-neutral-100: #ffffff;
8788
- --x-color-base-accent: #0086b2;
8789
- --x-color-base-enable: #00705c;
8790
- --x-color-base-disable: #e11f26;
8791
- --x-color-base-transparent: transparent;
8792
- }
8793
8780
  :root {
8794
8781
  --x-size-base-01: 2px;
8795
8782
  --x-size-base-02: 4px;
@@ -8813,11 +8800,17 @@
8813
8800
  --x-size-base-20: 344px;
8814
8801
  }
8815
8802
  :root {
8816
- --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8817
- --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8818
- --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8819
- --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8820
- --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8803
+ --x-color-base-lead: #243d48;
8804
+ --x-color-base-auxiliary: #bfe1ec;
8805
+ --x-color-base-neutral-10: #1a1a1a;
8806
+ --x-color-base-neutral-35: #595959;
8807
+ --x-color-base-neutral-70: #b3b3b3;
8808
+ --x-color-base-neutral-95: #f2f2f2;
8809
+ --x-color-base-neutral-100: #ffffff;
8810
+ --x-color-base-accent: #0086b2;
8811
+ --x-color-base-enable: #00705c;
8812
+ --x-color-base-disable: #e11f26;
8813
+ --x-color-base-transparent: transparent;
8821
8814
  }
8822
8815
  :root {
8823
8816
  --x-size-border-radius-base-none: 0;
@@ -8825,4 +8818,11 @@
8825
8818
  --x-size-border-radius-base-m: var(--x-size-base-06);
8826
8819
  --x-size-border-radius-base-pill: 99999px;
8827
8820
  --x-size-border-width-base: 1px;
8821
+ }
8822
+ :root {
8823
+ --x-size-border-radius-button-card: var(--x-size-border-radius-base-s);
8824
+ --x-size-border-radius-top-left-button-card: var(--x-size-border-radius-button-card);
8825
+ --x-size-border-radius-top-right-button-card: var(--x-size-border-radius-button-card);
8826
+ --x-size-border-radius-bottom-right-button-card: var(--x-size-border-radius-button-card);
8827
+ --x-size-border-radius-bottom-left-button-card: var(--x-size-border-radius-button-card);
8828
8828
  }