@empathyco/x-components 6.0.0-alpha.34 → 6.0.0-alpha.35

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.
@@ -1,5 +1,4 @@
1
1
 
2
-
3
2
  .x-uppercase {
4
3
  text-transform: uppercase;
5
4
  }
@@ -53,6 +52,7 @@
53
52
  .x-sticky {
54
53
  position: sticky !important;
55
54
  }
55
+
56
56
  .x-padding--00 {
57
57
  padding: 0 !important;
58
58
  }
@@ -1102,49 +1102,6 @@
1102
1102
  font-size: var(--x-size-base-20) !important;
1103
1103
  line-height: 1.5;
1104
1104
  }
1105
- .x-flex-1 {
1106
- flex: 1 1 0% !important;
1107
- }
1108
-
1109
- .x-flex-auto {
1110
- flex: 1 1 auto !important;
1111
- }
1112
-
1113
- .x-flex-initial {
1114
- flex: 0 1 auto !important;
1115
- }
1116
-
1117
- .x-flex-no-shrink {
1118
- flex: 1 0 auto !important;
1119
- }
1120
-
1121
- .x-flex-none {
1122
- flex: none !important;
1123
- }
1124
-
1125
- .x-self-auto {
1126
- align-self: auto !important;
1127
- }
1128
-
1129
- .x-self-start {
1130
- align-self: flex-start !important;
1131
- }
1132
-
1133
- .x-self-end {
1134
- align-self: flex-end !important;
1135
- }
1136
-
1137
- .x-self-center {
1138
- align-self: center !important;
1139
- }
1140
-
1141
- .x-self-stretch {
1142
- align-self: stretch !important;
1143
- }
1144
-
1145
- .x-self-baseline {
1146
- align-self: baseline !important;
1147
- }
1148
1105
  .x-font-color--lead {
1149
1106
  color: var(--x-color-base-lead) !important;
1150
1107
  }
@@ -1231,73 +1188,48 @@
1231
1188
  .x-fill--transparent {
1232
1189
  fill: var(--x-color-base-transparent) !important;
1233
1190
  }
1234
- /* Material Elevations extracted from:
1235
- https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
1236
- */
1237
- :root {
1238
- /* Shadow none */
1239
- --x-string-box-shadow-00: none;
1240
- /* Shadow 1dp */
1241
- --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
1242
- 0 1px 3px 0 rgba(0, 0, 0, 0.2);
1243
- /* Shadow 2dp */
1244
- --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
1245
- 0 1px 5px 0 rgba(0, 0, 0, 0.2);
1246
- /* Shadow 3dp */
1247
- --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
1248
- 0 1px 8px 0 rgba(0, 0, 0, 0.2);
1249
- /* Shadow 4dp */
1250
- --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
1251
- 0 2px 4px -1px rgba(0, 0, 0, 0.2);
1252
- /* Shadow 6dp */
1253
- --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
1254
- 0 3px 5px -1px rgba(0, 0, 0, 0.2);
1255
- /* Shadow 8dp */
1256
- --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
1257
- 0 5px 5px -3px rgba(0, 0, 0, 0.2);
1258
- /* Shadow 9dp */
1259
- --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
1260
- 0 5px 6px -3px rgba(0, 0, 0, 0.2);
1261
- /* Shadow 12dp */
1262
- --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
1263
- 0 7px 8px -4px rgba(0, 0, 0, 0.2);
1264
- /* Shadow 16dp */
1265
- --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
1266
- 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1267
- /* Shadow 24dp */
1268
- --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
1269
- 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1270
- /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
1271
- /* Shadow 1dp */
1272
- --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
1273
- 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
1274
- /* Shadow 2dp */
1275
- --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
1276
- 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
1277
- /* Shadow 3dp */
1278
- --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
1279
- 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
1280
- /* Shadow 4dp */
1281
- --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
1282
- 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
1283
- /* Shadow 6dp */
1284
- --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
1285
- 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
1286
- /* Shadow 8dp */
1287
- --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
1288
- 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
1289
- /* Shadow 9dp */
1290
- --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
1291
- 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
1292
- /* Shadow 12dp */
1293
- --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
1294
- 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
1295
- /* Shadow 16dp */
1296
- --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
1297
- 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
1298
- /* Shadow 24dp */
1299
- --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1300
- 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1191
+ .x-flex-1 {
1192
+ flex: 1 1 0% !important;
1193
+ }
1194
+
1195
+ .x-flex-auto {
1196
+ flex: 1 1 auto !important;
1197
+ }
1198
+
1199
+ .x-flex-initial {
1200
+ flex: 0 1 auto !important;
1201
+ }
1202
+
1203
+ .x-flex-no-shrink {
1204
+ flex: 1 0 auto !important;
1205
+ }
1206
+
1207
+ .x-flex-none {
1208
+ flex: none !important;
1209
+ }
1210
+
1211
+ .x-self-auto {
1212
+ align-self: auto !important;
1213
+ }
1214
+
1215
+ .x-self-start {
1216
+ align-self: flex-start !important;
1217
+ }
1218
+
1219
+ .x-self-end {
1220
+ align-self: flex-end !important;
1221
+ }
1222
+
1223
+ .x-self-center {
1224
+ align-self: center !important;
1225
+ }
1226
+
1227
+ .x-self-stretch {
1228
+ align-self: stretch !important;
1229
+ }
1230
+
1231
+ .x-self-baseline {
1232
+ align-self: baseline !important;
1301
1233
  }
1302
1234
  /* Material Elevations extracted from:
1303
1235
  https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
@@ -1367,71 +1299,6 @@
1367
1299
  --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
1368
1300
  0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
1369
1301
  }
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
1302
  *[class*=x-border-width--] {
1436
1303
  border-width: 0;
1437
1304
  }
@@ -3274,94 +3141,181 @@
3274
3141
  [dir="rtl"] .x-border-radius--bottom-right-20 {
3275
3142
  border-bottom-left-radius: var(--x-size-base-20) !important;
3276
3143
  }
3277
- .x-background--lead {
3278
- background-color: var(--x-color-base-lead) !important;
3144
+ .x-border-color--lead {
3145
+ border-color: var(--x-color-base-lead) !important;
3279
3146
  }
3280
3147
 
3281
- .x-background--auxiliary {
3282
- background-color: var(--x-color-base-auxiliary) !important;
3148
+ .x-border-color--auxiliary {
3149
+ border-color: var(--x-color-base-auxiliary) !important;
3283
3150
  }
3284
3151
 
3285
- .x-background--neutral-10 {
3286
- background-color: var(--x-color-base-neutral-10) !important;
3152
+ .x-border-color--neutral-10 {
3153
+ border-color: var(--x-color-base-neutral-10) !important;
3287
3154
  }
3288
3155
 
3289
- .x-background--neutral-35 {
3290
- background-color: var(--x-color-base-neutral-35) !important;
3156
+ .x-border-color--neutral-35 {
3157
+ border-color: var(--x-color-base-neutral-35) !important;
3291
3158
  }
3292
3159
 
3293
- .x-background--neutral-70 {
3294
- background-color: var(--x-color-base-neutral-70) !important;
3160
+ .x-border-color--neutral-70 {
3161
+ border-color: var(--x-color-base-neutral-70) !important;
3295
3162
  }
3296
3163
 
3297
- .x-background--neutral-95 {
3298
- background-color: var(--x-color-base-neutral-95) !important;
3164
+ .x-border-color--neutral-95 {
3165
+ border-color: var(--x-color-base-neutral-95) !important;
3299
3166
  }
3300
3167
 
3301
- .x-background--neutral-100 {
3302
- background-color: var(--x-color-base-neutral-100) !important;
3168
+ .x-border-color--neutral-100 {
3169
+ border-color: var(--x-color-base-neutral-100) !important;
3303
3170
  }
3304
3171
 
3305
- .x-background--accent {
3306
- background-color: var(--x-color-base-accent) !important;
3172
+ .x-border-color--accent {
3173
+ border-color: var(--x-color-base-accent) !important;
3307
3174
  }
3308
3175
 
3309
- .x-background--enable {
3310
- background-color: var(--x-color-base-enable) !important;
3176
+ .x-border-color--enable {
3177
+ border-color: var(--x-color-base-enable) !important;
3311
3178
  }
3312
3179
 
3313
- .x-background--disable {
3314
- background-color: var(--x-color-base-disable) !important;
3180
+ .x-border-color--disable {
3181
+ border-color: var(--x-color-base-disable) !important;
3315
3182
  }
3316
3183
 
3317
- .x-background--transparent {
3318
- background-color: var(--x-color-base-transparent) !important;
3184
+ .x-border-color--transparent {
3185
+ border-color: var(--x-color-base-transparent) !important;
3319
3186
  }
3320
- .x-border-color--lead {
3321
- border-color: var(--x-color-base-lead) !important;
3187
+ /* Material Elevations extracted from:
3188
+ https://gist.github.com/serglo/f9f0be9a66fd6755a0bda85f9c64e85f
3189
+ */
3190
+ :root {
3191
+ /* Shadow none */
3192
+ --x-string-box-shadow-00: none;
3193
+ /* Shadow 1dp */
3194
+ --x-string-box-shadow-01: 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 2px 1px -1px rgba(0, 0, 0, 0.12),
3195
+ 0 1px 3px 0 rgba(0, 0, 0, 0.2);
3196
+ /* Shadow 2dp */
3197
+ --x-string-box-shadow-02: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.12),
3198
+ 0 1px 5px 0 rgba(0, 0, 0, 0.2);
3199
+ /* Shadow 3dp */
3200
+ --x-string-box-shadow-03: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.12),
3201
+ 0 1px 8px 0 rgba(0, 0, 0, 0.2);
3202
+ /* Shadow 4dp */
3203
+ --x-string-box-shadow-04: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
3204
+ 0 2px 4px -1px rgba(0, 0, 0, 0.2);
3205
+ /* Shadow 6dp */
3206
+ --x-string-box-shadow-05: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12),
3207
+ 0 3px 5px -1px rgba(0, 0, 0, 0.2);
3208
+ /* Shadow 8dp */
3209
+ --x-string-box-shadow-06: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12),
3210
+ 0 5px 5px -3px rgba(0, 0, 0, 0.2);
3211
+ /* Shadow 9dp */
3212
+ --x-string-box-shadow-07: 0 9px 12px 1px rgba(0, 0, 0, 0.14), 0 3px 16px 2px rgba(0, 0, 0, 0.12),
3213
+ 0 5px 6px -3px rgba(0, 0, 0, 0.2);
3214
+ /* Shadow 12dp */
3215
+ --x-string-box-shadow-08: 0 12px 17px 2px rgba(0, 0, 0, 0.14), 0 5px 22px 4px rgba(0, 0, 0, 0.12),
3216
+ 0 7px 8px -4px rgba(0, 0, 0, 0.2);
3217
+ /* Shadow 16dp */
3218
+ --x-string-box-shadow-09: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12),
3219
+ 0 8px 10px -5px rgba(0, 0, 0, 0.2);
3220
+ /* Shadow 24dp */
3221
+ --x-string-box-shadow-10: 0 24px 38px 3px rgba(0, 0, 0, 0.14), 0 9px 46px 8px rgba(0, 0, 0, 0.12),
3222
+ 0 11px 15px -7px rgba(0, 0, 0, 0.2);
3223
+ /* BOTTOM ONLY SHADOW (not overflows on top of the element) */
3224
+ /* Shadow 1dp */
3225
+ --x-string-box-shadow-bottom-01: 0 2px 1px -1px rgba(0, 0, 0, 0.14),
3226
+ 0 2px 1px -1px rgba(0, 0, 0, 0.12), 0 4px 3px -3px rgba(0, 0, 0, 0.2);
3227
+ /* Shadow 2dp */
3228
+ --x-string-box-shadow-bottom-02: 0 4px 2px -2px rgba(0, 0, 0, 0.14),
3229
+ 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 6px 5px -5px rgba(0, 0, 0, 0.2);
3230
+ /* Shadow 3dp */
3231
+ --x-string-box-shadow-bottom-03: 0 7px 4px -4px rgba(0, 0, 0, 0.14),
3232
+ 0 4px 3px -3px rgba(0, 0, 0, 0.12), 0 9px 8px -8px rgba(0, 0, 0, 0.2);
3233
+ /* Shadow 4dp */
3234
+ --x-string-box-shadow-bottom-04: 0 9px 5px -5px rgba(0, 0, 0, 0.14),
3235
+ 0 11px 10px -10px rgba(0, 0, 0, 0.12), 0 5px 4px -4px rgba(0, 0, 0, 0.2);
3236
+ /* Shadow 6dp */
3237
+ --x-string-box-shadow-bottom-05: 0 16px 10px -10px rgba(0, 0, 0, 0.14),
3238
+ 0 19px 18px -18px rgba(0, 0, 0, 0.12), 0 8px 5px -6px rgba(0, 0, 0, 0.2);
3239
+ /* Shadow 8dp */
3240
+ --x-string-box-shadow-bottom-06: 0 19px 10px -10px rgba(0, 0, 0, 0.14),
3241
+ 0 19px 14px -14px rgba(0, 0, 0, 0.12), 0 7px 5px -5px rgba(0, 0, 0, 0.2);
3242
+ /* Shadow 9dp */
3243
+ --x-string-box-shadow-bottom-07: 0 22px 12px -12px rgba(0, 0, 0, 0.14),
3244
+ 0 21px 16px -16px rgba(0, 0, 0, 0.12), 0 8px 6px -6px rgba(0, 0, 0, 0.2);
3245
+ /* Shadow 12dp */
3246
+ --x-string-box-shadow-bottom-08: 0 31px 17px -17px rgba(0, 0, 0, 0.14),
3247
+ 0 27px 22px -22px rgba(0, 0, 0, 0.12), 0 11px 8px -8px rgba(0, 0, 0, 0.2);
3248
+ /* Shadow 16dp */
3249
+ --x-string-box-shadow-bottom-09: 0 22px 24px -4px rgba(0, 0, 0, 0.14),
3250
+ 0 21px 30px -10px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2);
3251
+ /* Shadow 24dp */
3252
+ --x-string-box-shadow-bottom-10: 0 34px 38px -7px rgba(0, 0, 0, 0.14),
3253
+ 0 29px 46px -12px rgba(0, 0, 0, 0.12), 0 11px 15px -7px rgba(0, 0, 0, 0.2);
3322
3254
  }
3323
3255
 
3324
- .x-border-color--auxiliary {
3325
- border-color: var(--x-color-base-auxiliary) !important;
3256
+ .x-shadow--none {
3257
+ box-shadow: none !important;
3326
3258
  }
3327
3259
 
3328
- .x-border-color--neutral-10 {
3329
- border-color: var(--x-color-base-neutral-10) !important;
3260
+ .x-shadow--01 {
3261
+ box-shadow: var(--x-string-box-shadow-01) !important;
3330
3262
  }
3331
-
3332
- .x-border-color--neutral-35 {
3333
- border-color: var(--x-color-base-neutral-35) !important;
3263
+ .x-shadow--bottom-01 {
3264
+ box-shadow: var(--x-string-box-shadow-bottom-01) !important;
3334
3265
  }
3335
-
3336
- .x-border-color--neutral-70 {
3337
- border-color: var(--x-color-base-neutral-70) !important;
3266
+ .x-shadow--02 {
3267
+ box-shadow: var(--x-string-box-shadow-02) !important;
3338
3268
  }
3339
-
3340
- .x-border-color--neutral-95 {
3341
- border-color: var(--x-color-base-neutral-95) !important;
3269
+ .x-shadow--bottom-02 {
3270
+ box-shadow: var(--x-string-box-shadow-bottom-02) !important;
3342
3271
  }
3343
-
3344
- .x-border-color--neutral-100 {
3345
- border-color: var(--x-color-base-neutral-100) !important;
3272
+ .x-shadow--03 {
3273
+ box-shadow: var(--x-string-box-shadow-03) !important;
3346
3274
  }
3347
-
3348
- .x-border-color--accent {
3349
- border-color: var(--x-color-base-accent) !important;
3275
+ .x-shadow--bottom-03 {
3276
+ box-shadow: var(--x-string-box-shadow-bottom-03) !important;
3350
3277
  }
3351
-
3352
- .x-border-color--enable {
3353
- border-color: var(--x-color-base-enable) !important;
3278
+ .x-shadow--04 {
3279
+ box-shadow: var(--x-string-box-shadow-04) !important;
3354
3280
  }
3355
-
3356
- .x-border-color--disable {
3357
- border-color: var(--x-color-base-disable) !important;
3281
+ .x-shadow--bottom-04 {
3282
+ box-shadow: var(--x-string-box-shadow-bottom-04) !important;
3358
3283
  }
3359
-
3360
- .x-border-color--transparent {
3361
- border-color: var(--x-color-base-transparent) !important;
3284
+ .x-shadow--05 {
3285
+ box-shadow: var(--x-string-box-shadow-05) !important;
3362
3286
  }
3363
- :root {
3364
- --x-color-text-secondary: var(--x-color-base-neutral-35);
3287
+ .x-shadow--bottom-05 {
3288
+ box-shadow: var(--x-string-box-shadow-bottom-05) !important;
3289
+ }
3290
+ .x-shadow--06 {
3291
+ box-shadow: var(--x-string-box-shadow-06) !important;
3292
+ }
3293
+ .x-shadow--bottom-06 {
3294
+ box-shadow: var(--x-string-box-shadow-bottom-06) !important;
3295
+ }
3296
+ .x-shadow--07 {
3297
+ box-shadow: var(--x-string-box-shadow-07) !important;
3298
+ }
3299
+ .x-shadow--bottom-07 {
3300
+ box-shadow: var(--x-string-box-shadow-bottom-07) !important;
3301
+ }
3302
+ .x-shadow--08 {
3303
+ box-shadow: var(--x-string-box-shadow-08) !important;
3304
+ }
3305
+ .x-shadow--bottom-08 {
3306
+ box-shadow: var(--x-string-box-shadow-bottom-08) !important;
3307
+ }
3308
+ .x-shadow--09 {
3309
+ box-shadow: var(--x-string-box-shadow-09) !important;
3310
+ }
3311
+ .x-shadow--bottom-09 {
3312
+ box-shadow: var(--x-string-box-shadow-bottom-09) !important;
3313
+ }
3314
+ .x-shadow--10 {
3315
+ box-shadow: var(--x-string-box-shadow-10) !important;
3316
+ }
3317
+ .x-shadow--bottom-10 {
3318
+ box-shadow: var(--x-string-box-shadow-bottom-10) !important;
3365
3319
  }
3366
3320
  .x-text--stroke.x-text {
3367
3321
  --x-string-text-decoration: line-through;
@@ -3378,6 +3332,52 @@
3378
3332
  .x-text--stroke.x-small {
3379
3333
  --x-string-text-decoration-small: line-through;
3380
3334
  }
3335
+ .x-background--lead {
3336
+ background-color: var(--x-color-base-lead) !important;
3337
+ }
3338
+
3339
+ .x-background--auxiliary {
3340
+ background-color: var(--x-color-base-auxiliary) !important;
3341
+ }
3342
+
3343
+ .x-background--neutral-10 {
3344
+ background-color: var(--x-color-base-neutral-10) !important;
3345
+ }
3346
+
3347
+ .x-background--neutral-35 {
3348
+ background-color: var(--x-color-base-neutral-35) !important;
3349
+ }
3350
+
3351
+ .x-background--neutral-70 {
3352
+ background-color: var(--x-color-base-neutral-70) !important;
3353
+ }
3354
+
3355
+ .x-background--neutral-95 {
3356
+ background-color: var(--x-color-base-neutral-95) !important;
3357
+ }
3358
+
3359
+ .x-background--neutral-100 {
3360
+ background-color: var(--x-color-base-neutral-100) !important;
3361
+ }
3362
+
3363
+ .x-background--accent {
3364
+ background-color: var(--x-color-base-accent) !important;
3365
+ }
3366
+
3367
+ .x-background--enable {
3368
+ background-color: var(--x-color-base-enable) !important;
3369
+ }
3370
+
3371
+ .x-background--disable {
3372
+ background-color: var(--x-color-base-disable) !important;
3373
+ }
3374
+
3375
+ .x-background--transparent {
3376
+ background-color: var(--x-color-base-transparent) !important;
3377
+ }
3378
+ :root {
3379
+ --x-color-text-secondary: var(--x-color-base-neutral-35);
3380
+ }
3381
3381
  .x-text--secondary {
3382
3382
  --x-color-text-default: var(--x-color-text-secondary);
3383
3383
  }
@@ -3566,6 +3566,24 @@
3566
3566
  --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3567
3567
  --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3568
3568
  }
3569
+
3570
+ .x-tag--pill.x-tag,
3571
+ .x-tag--pill .x-tag {
3572
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
3573
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
3574
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
3575
+ --x-size-border-radius-bottom-right-tag-default: var(
3576
+ --x-size-border-radius-bottom-right-tag-pill
3577
+ );
3578
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
3579
+ }
3580
+ :root {
3581
+ --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3582
+ --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3583
+ --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3584
+ --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3585
+ --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3586
+ }
3569
3587
  :root {
3570
3588
  --x-color-background-tag-ghost: transparent;
3571
3589
  --x-color-border-tag-ghost: transparent;
@@ -3579,22 +3597,34 @@
3579
3597
  --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3580
3598
  }
3581
3599
  :root {
3582
- --x-size-border-radius-tag-pill: var(--x-size-border-radius-base-pill);
3583
- --x-size-border-radius-top-left-tag-pill: var(--x-size-border-radius-tag-pill);
3584
- --x-size-border-radius-top-right-tag-pill: var(--x-size-border-radius-tag-pill);
3585
- --x-size-border-radius-bottom-right-tag-pill: var(--x-size-border-radius-tag-pill);
3586
- --x-size-border-radius-bottom-left-tag-pill: var(--x-size-border-radius-tag-pill);
3600
+ --x-color-background-tag-ghost: transparent;
3601
+ --x-color-border-tag-ghost: transparent;
3602
+ --x-color-background-tag-selected-ghost: transparent;
3603
+ --x-color-border-tag-selected-ghost: transparent;
3604
+ --x-color-background-tag-curated-ghost: transparent;
3605
+ --x-color-border-tag-curated-ghost: transparent;
3606
+ --x-color-background-tag-curated-selected-ghost: transparent;
3607
+ --x-color-border-tag-curated-selected-ghost: transparent;
3608
+ --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3609
+ --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3587
3610
  }
3588
3611
 
3589
- .x-tag--pill.x-tag,
3590
- .x-tag--pill .x-tag {
3591
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-pill);
3592
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-pill);
3593
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-pill);
3594
- --x-size-border-radius-bottom-right-tag-default: var(
3595
- --x-size-border-radius-bottom-right-tag-pill
3612
+ .x-tag--ghost.x-tag,
3613
+ .x-tag--ghost .x-tag {
3614
+ --x-color-background-tag-default: var(--x-color-background-tag-ghost);
3615
+ --x-color-border-tag-default: var(--x-color-border-tag-ghost);
3616
+ --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
3617
+ --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
3618
+ --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
3619
+ --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
3620
+ --x-color-background-tag-default-curated-selected: var(
3621
+ --x-color-background-tag-curated-selected-ghost
3622
+ );
3623
+ --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
3624
+ --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
3625
+ --x-number-font-weight-tag-default-curated-selected: var(
3626
+ --x-number-font-weight-tag-curated-selected-ghost
3596
3627
  );
3597
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-pill);
3598
3628
  }
3599
3629
  :root {
3600
3630
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
@@ -3642,36 +3672,6 @@
3642
3672
  --x-number-font-weight-tag-default-selected
3643
3673
  );
3644
3674
  }
3645
- :root {
3646
- --x-color-background-tag-ghost: transparent;
3647
- --x-color-border-tag-ghost: transparent;
3648
- --x-color-background-tag-selected-ghost: transparent;
3649
- --x-color-border-tag-selected-ghost: transparent;
3650
- --x-color-background-tag-curated-ghost: transparent;
3651
- --x-color-border-tag-curated-ghost: transparent;
3652
- --x-color-background-tag-curated-selected-ghost: transparent;
3653
- --x-color-border-tag-curated-selected-ghost: transparent;
3654
- --x-number-font-weight-tag-selected-ghost: var(--x-number-font-weight-base-bold);
3655
- --x-number-font-weight-tag-curated-selected-ghost: var(--x-number-font-weight-base-bold);
3656
- }
3657
-
3658
- .x-tag--ghost.x-tag,
3659
- .x-tag--ghost .x-tag {
3660
- --x-color-background-tag-default: var(--x-color-background-tag-ghost);
3661
- --x-color-border-tag-default: var(--x-color-border-tag-ghost);
3662
- --x-color-background-tag-default-curated: var(--x-color-background-tag-curated-ghost);
3663
- --x-color-border-tag-default-curated: var(--x-color-border-tag-curated-ghost);
3664
- --x-color-background-tag-default-selected: var(--x-color-background-tag-selected-ghost);
3665
- --x-color-border-tag-default-selected: var(--x-color-border-tag-selected-ghost);
3666
- --x-color-background-tag-default-curated-selected: var(
3667
- --x-color-background-tag-curated-selected-ghost
3668
- );
3669
- --x-color-border-tag-default-curated-selected: var(--x-color-border-tag-curated-selected-ghost);
3670
- --x-number-font-weight-tag-default-selected: var(--x-number-font-weight-tag-selected-ghost);
3671
- --x-number-font-weight-tag-default-curated-selected: var(
3672
- --x-number-font-weight-tag-curated-selected-ghost
3673
- );
3674
- }
3675
3675
  :root {
3676
3676
  --x-color-background-tag-default: var(--x-color-base-neutral-100);
3677
3677
  --x-color-border-tag-default: var(--x-color-text-tag-default);
@@ -3900,6 +3900,24 @@
3900
3900
  --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3901
3901
  --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3902
3902
  }
3903
+ :root {
3904
+ --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3905
+ --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3906
+ --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3907
+ --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3908
+ --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3909
+ }
3910
+
3911
+ .x-tag--card.x-tag,
3912
+ .x-tag--card .x-tag {
3913
+ --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
3914
+ --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
3915
+ --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
3916
+ --x-size-border-radius-bottom-right-tag-default: var(
3917
+ --x-size-border-radius-bottom-right-tag-card
3918
+ );
3919
+ --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3920
+ }
3903
3921
  :root {
3904
3922
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3905
3923
  --x-color-text-suggestion-group-matching-part-default: var(
@@ -3941,24 +3959,6 @@
3941
3959
  --x-size-line-height-suggestion-group-default: var(--x-size-line-height-suggestion-default);
3942
3960
  --x-number-font-weight-suggestion-group-default: var(--x-number-font-weight-suggestion-default);
3943
3961
  }
3944
- :root {
3945
- --x-size-border-radius-tag-card: var(--x-size-border-radius-base-s);
3946
- --x-size-border-radius-top-left-tag-card: var(--x-size-border-radius-tag-card);
3947
- --x-size-border-radius-top-right-tag-card: var(--x-size-border-radius-tag-card);
3948
- --x-size-border-radius-bottom-right-tag-card: var(--x-size-border-radius-tag-card);
3949
- --x-size-border-radius-bottom-left-tag-card: var(--x-size-border-radius-tag-card);
3950
- }
3951
-
3952
- .x-tag--card.x-tag,
3953
- .x-tag--card .x-tag {
3954
- --x-size-border-radius-tag-default: var(--x-size-border-radius-tag-card);
3955
- --x-size-border-radius-top-left-tag-default: var(--x-size-border-radius-top-left-tag-card);
3956
- --x-size-border-radius-top-right-tag-default: var(--x-size-border-radius-top-right-tag-card);
3957
- --x-size-border-radius-bottom-right-tag-default: var(
3958
- --x-size-border-radius-bottom-right-tag-card
3959
- );
3960
- --x-size-border-radius-bottom-left-tag-default: var(--x-size-border-radius-bottom-left-tag-card);
3961
- }
3962
3962
  :root {
3963
3963
  --x-color-text-suggestion-group-default: var(--x-color-text-suggestion-default);
3964
3964
  --x-color-text-suggestion-group-matching-part-default: var(
@@ -4075,6 +4075,12 @@
4075
4075
  --x-size-padding-left-button-default: 0;
4076
4076
  border: none;
4077
4077
  }
4078
+ :root {
4079
+ --x-color-background-sliding-panel: var(--x-color-base-neutral-100);
4080
+ --x-size-width-sliding-panel-gradient: var(--x-size-base-09);
4081
+ --x-size-padding-sliding-panel-button: var(--x-size-base-03);
4082
+ --x-size-horizontal-margin-sliding-panel-button-overflow: var(--x-size-base-02);
4083
+ }
4078
4084
  :root {
4079
4085
  --x-string-align-items-suggestion-default: center;
4080
4086
  --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,14 @@
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
4532
  :root {
4533
4533
  --x-size-gap-row-01: var(--x-size-base-01);
4534
4534
  --x-size-gap-row-02: var(--x-size-base-02);
@@ -4661,14 +4661,6 @@
4661
4661
  --x-size-span-row-item: 1;
4662
4662
  --x-size-start-row-item: 0;
4663
4663
  }
4664
- :root {
4665
- --x-size-gap-row: 0;
4666
- --x-size-padding-row: 0;
4667
- --x-size-justify-row: stretch;
4668
- --x-size-align-row: center;
4669
- --x-size-span-row-item: 1;
4670
- --x-size-start-row-item: 0;
4671
- }
4672
4664
 
4673
4665
  .x-row {
4674
4666
  display: grid;
@@ -4877,7 +4869,12 @@
4877
4869
  }
4878
4870
  }
4879
4871
  :root {
4880
- --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4872
+ --x-size-gap-row: 0;
4873
+ --x-size-padding-row: 0;
4874
+ --x-size-justify-row: stretch;
4875
+ --x-size-align-row: center;
4876
+ --x-size-span-row-item: 1;
4877
+ --x-size-start-row-item: 0;
4881
4878
  }
4882
4879
  :root {
4883
4880
  --x-size-height-progress-bar-line-default: var(--x-size-base-02);
@@ -4922,8 +4919,7 @@
4922
4919
  background-color: var(--x-color-background-progress-bar-line-default);
4923
4920
  }
4924
4921
  :root {
4925
- --x-number-zoom-scale-picture: 1.1;
4926
- --x-number-zoom-duration-picture: 0.3s;
4922
+ --x-size-border-radius-result-card: var(--x-size-border-radius-base-s);
4927
4923
  }
4928
4924
  :root {
4929
4925
  --x-number-zoom-scale-picture: 1.1;
@@ -4936,34 +4932,20 @@
4936
4932
  .x-picture--zoom .x-picture-image:hover {
4937
4933
  transform: scale(var(--x-number-zoom-scale-picture));
4938
4934
  }
4939
- :root {
4940
- --x-number-aspect-ratio-picture: 1;
4941
- }
4942
- :root {
4943
- --x-number-aspect-ratio-picture: 1;
4944
- }
4945
-
4946
- .x-picture--fixed-ratio.x-picture {
4947
- aspect-ratio: var(--x-number-aspect-ratio-picture);
4948
- width: 100%;
4949
- }
4950
- :root {
4951
- --x-size-border-radius-picture-default: 0;
4952
- --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
4953
- --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
4954
- --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
4955
- --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
4956
- --x-color-background-picture-default: transparent;
4957
- --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
4958
- --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
4959
- --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
4960
- --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
4961
- --x-object-fit-picture-default: contain;
4962
- --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
4963
- --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
4964
- --x-mix-blend-mode-picture-default: normal;
4965
- --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
4966
- --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
4935
+ :root {
4936
+ --x-number-zoom-scale-picture: 1.1;
4937
+ --x-number-zoom-duration-picture: 0.3s;
4938
+ }
4939
+ :root {
4940
+ --x-number-aspect-ratio-picture: 1;
4941
+ }
4942
+
4943
+ .x-picture--fixed-ratio.x-picture {
4944
+ aspect-ratio: var(--x-number-aspect-ratio-picture);
4945
+ width: 100%;
4946
+ }
4947
+ :root {
4948
+ --x-number-aspect-ratio-picture: 1;
4967
4949
  }
4968
4950
  :root {
4969
4951
  --x-size-border-radius-picture-default: 0;
@@ -5022,8 +5004,22 @@
5022
5004
  fill: var(--x-color-fill-picture-placeholder-path-default) !important;
5023
5005
  }
5024
5006
  :root {
5025
- --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
5026
- --x-color-background-picture-cover-hover-to: rgba(0, 0, 0, 0.5);
5007
+ --x-size-border-radius-picture-default: 0;
5008
+ --x-size-border-radius-top-picture-default: var(--x-size-border-radius-picture-default);
5009
+ --x-size-border-radius-right-picture-default: var(--x-size-border-radius-picture-default);
5010
+ --x-size-border-radius-bottom-picture-default: var(--x-size-border-radius-picture-default);
5011
+ --x-size-border-radius-left-picture-default: var(--x-size-border-radius-picture-default);
5012
+ --x-color-background-picture-default: transparent;
5013
+ --x-color-fill-picture-placeholder-path-default: var(--x-color-base-neutral-70);
5014
+ --x-color-fill-picture-placeholder-rect-default: var(--x-color-base-neutral-95);
5015
+ --x-color-fill-picture-fallback-path-default: var(--x-color-base-neutral-70);
5016
+ --x-color-fill-picture-fallback-rect-default: var(--x-color-base-neutral-95);
5017
+ --x-object-fit-picture-default: contain;
5018
+ --x-object-fit-picture-fallback-default: var(--x-object-fit-picture-default);
5019
+ --x-object-fit-picture-placeholder-default: var(--x-object-fit-picture-default);
5020
+ --x-mix-blend-mode-picture-default: normal;
5021
+ --x-mix-blend-mode-picture-fallback-default: var(--x-mix-blend-mode-picture-default);
5022
+ --x-mix-blend-mode-picture-placeholder-default: var(--x-mix-blend-mode-picture-default);
5027
5023
  }
5028
5024
  :root {
5029
5025
  --x-color-background-picture-cover-hover-from: rgba(0, 0, 0, 0);
@@ -5046,10 +5042,8 @@
5046
5042
  height: 100%;
5047
5043
  }
5048
5044
  :root {
5049
- --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5050
- --x-mix-blend-mode-picture-colored: multiply;
5051
- --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5052
- --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
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);
5053
5047
  }
5054
5048
  :root {
5055
5049
  --x-color-background-picture-colored: var(--x-color-base-neutral-95);
@@ -5070,6 +5064,12 @@
5070
5064
  .x-picture--colored.x-picture .x-picture--placeholder {
5071
5065
  --x-mix-blend-mode-picture-default: var(--x-mix-blend-mode-picture-placeholder-colored);
5072
5066
  }
5067
+ :root {
5068
+ --x-color-background-picture-colored: var(--x-color-base-neutral-95);
5069
+ --x-mix-blend-mode-picture-colored: multiply;
5070
+ --x-mix-blend-mode-picture-fallback-colored: var(--x-mix-blend-mode-picture-colored);
5071
+ --x-mix-blend-mode-picture-placeholder-colored: var(--x-mix-blend-mode-picture-colored);
5072
+ }
5073
5073
  :root {
5074
5074
  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5075
5075
  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5077,86 +5077,6 @@
5077
5077
  --x-size-border-radius-bottom-picture-card: var(--x-size-border-radius-picture-card);
5078
5078
  --x-size-border-radius-left-picture-card: var(--x-size-border-radius-picture-card);
5079
5079
  }
5080
- :root {
5081
- --x-color-background-option-list-button-default: transparent;
5082
- --x-color-border-option-list-button-default: transparent;
5083
- --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5084
- --x-color-background-option-list-button-default-hover: var(
5085
- --x-color-background-option-list-button-default
5086
- );
5087
- --x-color-border-option-list-button-default-hover: var(
5088
- --x-color-border-option-list-button-default
5089
- );
5090
- --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5091
- --x-color-background-option-list-button-default-selected: var(
5092
- --x-color-background-option-list-button-default
5093
- );
5094
- --x-color-border-option-list-button-default-selected: var(
5095
- --x-color-border-option-list-button-default
5096
- );
5097
- --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5098
- --x-color-background-option-list-button-default-selected-hover: var(
5099
- --x-color-background-option-list-button-default-selected
5100
- );
5101
- --x-color-border-option-list-button-default-selected-hover: var(
5102
- --x-color-border-option-list-button-default-selected
5103
- );
5104
- --x-color-text-option-list-button-default-selected-hover: var(
5105
- --x-color-text-option-list-button-default-selected
5106
- );
5107
- --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5108
- --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5109
- --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5110
- --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5111
- --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5112
- --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5113
- --x-color-border-top-option-list-item-default-selected: var(
5114
- --x-color-border-option-list-item-default-selected
5115
- );
5116
- --x-color-border-right-option-list-item-default-selected: var(
5117
- --x-color-border-option-list-item-default-selected
5118
- );
5119
- --x-color-border-bottom-option-list-item-default-selected: var(
5120
- --x-color-border-option-list-item-default-selected
5121
- );
5122
- --x-color-border-left-option-list-item-default-selected: var(
5123
- --x-color-border-option-list-item-default-selected
5124
- );
5125
- --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5126
- --x-size-border-width-top-option-list-item-default: 0;
5127
- --x-size-border-width-right-option-list-item-default: var(
5128
- --x-size-border-width-option-list-item-default
5129
- );
5130
- --x-size-border-width-bottom-option-list-item-default: 0;
5131
- --x-size-border-width-left-option-list-item-default: 0;
5132
- --x-size-border-width-top-option-list-item-default-selected: var(
5133
- --x-size-border-width-top-option-list-item-default
5134
- );
5135
- --x-size-border-width-right-option-list-item-default-selected: var(
5136
- --x-size-border-width-right-option-list-item-default
5137
- );
5138
- --x-size-border-width-bottom-option-list-item-default-selected: var(
5139
- --x-size-border-width-bottom-option-list-item-default
5140
- );
5141
- --x-size-border-width-left-option-list-item-default-selected: var(
5142
- --x-size-border-width-left-option-list-item-default
5143
- );
5144
- --x-size-padding-option-list-button-default: var(--x-size-base-02);
5145
- --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5146
- --x-size-padding-right-option-list-button-default: var(
5147
- --x-size-padding-option-list-button-default
5148
- );
5149
- --x-size-padding-bottom-option-list-button-default: var(
5150
- --x-size-padding-option-list-button-default
5151
- );
5152
- --x-size-padding-left-option-list-button-default: var(
5153
- --x-size-padding-option-list-button-default
5154
- );
5155
- --x-font-decoration-option-list-button-default-hover: underline;
5156
- --x-size-font-option-list-button-default: var(--x-size-font-text);
5157
- --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5158
- --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5159
- }
5160
5080
  :root {
5161
5081
  --x-size-border-radius-picture-card: var(--x-size-border-radius-base-s);
5162
5082
  --x-size-border-radius-top-picture-card: var(--x-size-border-radius-picture-card);
@@ -5364,6 +5284,86 @@
5364
5284
  -webkit-text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5365
5285
  text-decoration: var(--x-font-decoration-option-list-button-default-hover);
5366
5286
  }
5287
+ :root {
5288
+ --x-color-background-option-list-button-default: transparent;
5289
+ --x-color-border-option-list-button-default: transparent;
5290
+ --x-color-text-option-list-button-default: var(--x-color-base-neutral-35);
5291
+ --x-color-background-option-list-button-default-hover: var(
5292
+ --x-color-background-option-list-button-default
5293
+ );
5294
+ --x-color-border-option-list-button-default-hover: var(
5295
+ --x-color-border-option-list-button-default
5296
+ );
5297
+ --x-color-text-option-list-button-default-hover: var(--x-color-text-option-list-button-default);
5298
+ --x-color-background-option-list-button-default-selected: var(
5299
+ --x-color-background-option-list-button-default
5300
+ );
5301
+ --x-color-border-option-list-button-default-selected: var(
5302
+ --x-color-border-option-list-button-default
5303
+ );
5304
+ --x-color-text-option-list-button-default-selected: var(--x-color-text-default);
5305
+ --x-color-background-option-list-button-default-selected-hover: var(
5306
+ --x-color-background-option-list-button-default-selected
5307
+ );
5308
+ --x-color-border-option-list-button-default-selected-hover: var(
5309
+ --x-color-border-option-list-button-default-selected
5310
+ );
5311
+ --x-color-text-option-list-button-default-selected-hover: var(
5312
+ --x-color-text-option-list-button-default-selected
5313
+ );
5314
+ --x-color-border-option-list-item-default: var(--x-color-base-neutral-70);
5315
+ --x-color-border-top-option-list-item-default: var(--x-color-border-option-list-item-default);
5316
+ --x-color-border-right-option-list-item-default: var(--x-color-border-option-list-item-default);
5317
+ --x-color-border-bottom-option-list-item-default: var(--x-color-border-option-list-item-default);
5318
+ --x-color-border-left-option-list-item-default: var(--x-color-border-option-list-item-default);
5319
+ --x-color-border-option-list-item-default-selected: var(--x-color-base-neutral-70);
5320
+ --x-color-border-top-option-list-item-default-selected: var(
5321
+ --x-color-border-option-list-item-default-selected
5322
+ );
5323
+ --x-color-border-right-option-list-item-default-selected: var(
5324
+ --x-color-border-option-list-item-default-selected
5325
+ );
5326
+ --x-color-border-bottom-option-list-item-default-selected: var(
5327
+ --x-color-border-option-list-item-default-selected
5328
+ );
5329
+ --x-color-border-left-option-list-item-default-selected: var(
5330
+ --x-color-border-option-list-item-default-selected
5331
+ );
5332
+ --x-size-border-width-option-list-item-default: var(--x-size-border-width-base);
5333
+ --x-size-border-width-top-option-list-item-default: 0;
5334
+ --x-size-border-width-right-option-list-item-default: var(
5335
+ --x-size-border-width-option-list-item-default
5336
+ );
5337
+ --x-size-border-width-bottom-option-list-item-default: 0;
5338
+ --x-size-border-width-left-option-list-item-default: 0;
5339
+ --x-size-border-width-top-option-list-item-default-selected: var(
5340
+ --x-size-border-width-top-option-list-item-default
5341
+ );
5342
+ --x-size-border-width-right-option-list-item-default-selected: var(
5343
+ --x-size-border-width-right-option-list-item-default
5344
+ );
5345
+ --x-size-border-width-bottom-option-list-item-default-selected: var(
5346
+ --x-size-border-width-bottom-option-list-item-default
5347
+ );
5348
+ --x-size-border-width-left-option-list-item-default-selected: var(
5349
+ --x-size-border-width-left-option-list-item-default
5350
+ );
5351
+ --x-size-padding-option-list-button-default: var(--x-size-base-02);
5352
+ --x-size-padding-top-option-list-button-default: var(--x-size-padding-option-list-button-default);
5353
+ --x-size-padding-right-option-list-button-default: var(
5354
+ --x-size-padding-option-list-button-default
5355
+ );
5356
+ --x-size-padding-bottom-option-list-button-default: var(
5357
+ --x-size-padding-option-list-button-default
5358
+ );
5359
+ --x-size-padding-left-option-list-button-default: var(
5360
+ --x-size-padding-option-list-button-default
5361
+ );
5362
+ --x-font-decoration-option-list-button-default-hover: underline;
5363
+ --x-size-font-option-list-button-default: var(--x-size-font-text);
5364
+ --x-number-font-weight-option-list-button-default: var(--x-number-font-weight-base-regular);
5365
+ --x-number-font-weight-option-list-button-default-selected: var(--x-number-font-weight-base-bold);
5366
+ }
5367
5367
  :root {
5368
5368
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5369
5369
  --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -5409,10 +5409,6 @@
5409
5409
  --x-number-font-weight-base-regular
5410
5410
  );
5411
5411
  }
5412
- :root {
5413
- --x-modal-overlay-color: rgb(0, 0, 0);
5414
- --x-modal-overlay-opacity: 0.7;
5415
- }
5416
5412
  :root {
5417
5413
  --x-color-text-option-list-button-bottom-hover: var(--x-color-base-neutral-10);
5418
5414
  --x-color-text-option-list-button-bottom-selected-hover: var(
@@ -5554,25 +5550,8 @@
5554
5550
  opacity: var(--x-modal-overlay-opacity) !important;
5555
5551
  }
5556
5552
  :root {
5557
- --x-string-justify-message-default: center;
5558
- --x-size-gap-message-default: var(--x-size-base-03);
5559
- --x-size-padding-message-default: var(--x-size-base-06);
5560
- --x-color-background-message-default: var(--x-color-base-neutral-95);
5561
- --x-color-border-message-default: var(--x-color-background-message-default);
5562
- --x-color-text-message-default: var(--x-color-text-default);
5563
- --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
5564
- --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
5565
- --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
5566
- --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
5567
- --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
5568
- --x-size-border-width-message-default: var(--x-size-border-width-base);
5569
- --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
5570
- --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
5571
- --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
5572
- --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
5573
- --x-font-family-message-default: var(--x-font-family-title3);
5574
- --x-size-font-message-default: var(--x-size-font-title3);
5575
- --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
5553
+ --x-modal-overlay-color: rgb(0, 0, 0);
5554
+ --x-modal-overlay-opacity: 0.7;
5576
5555
  }
5577
5556
  :root {
5578
5557
  --x-string-justify-message-default: center;
@@ -7255,6 +7234,19 @@
7255
7234
  --x-size-border-radius-bottom-right-input-card: var(--x-size-border-radius-input-card);
7256
7235
  --x-size-border-radius-bottom-left-input-card: var(--x-size-border-radius-input-card);
7257
7236
  }
7237
+ :root {
7238
+ --x-size-width-icon-xl: var(--x-size-base-07);
7239
+ --x-size-height-icon-xl: var(--x-size-base-07);
7240
+ }
7241
+
7242
+ .x-icon--xl {
7243
+ --x-size-width-icon-default: var(--x-size-width-icon-xl);
7244
+ --x-size-height-icon-default: var(--x-size-height-icon-xl);
7245
+ }
7246
+ :root {
7247
+ --x-size-width-icon-xl: var(--x-size-base-07);
7248
+ --x-size-height-icon-xl: var(--x-size-base-07);
7249
+ }
7258
7250
  :root {
7259
7251
  --x-size-border-radius-input-card: var(--x-size-border-radius-base-s);
7260
7252
  --x-size-border-radius-top-left-input-card: var(--x-size-border-radius-input-card);
@@ -7273,20 +7265,7 @@
7273
7265
  );
7274
7266
  --x-size-border-radius-bottom-left-input-default: var(
7275
7267
  --x-size-border-radius-bottom-left-input-card
7276
- );
7277
- }
7278
- :root {
7279
- --x-size-width-icon-xl: var(--x-size-base-07);
7280
- --x-size-height-icon-xl: var(--x-size-base-07);
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
- }
7286
-
7287
- .x-icon--xl {
7288
- --x-size-width-icon-default: var(--x-size-width-icon-xl);
7289
- --x-size-height-icon-default: var(--x-size-height-icon-xl);
7268
+ );
7290
7269
  }
7291
7270
  :root {
7292
7271
  --x-size-width-icon-s: var(--x-size-base-03);
@@ -7318,6 +7297,15 @@
7318
7297
  --x-size-width-icon-l: var(--x-size-base-06);
7319
7298
  --x-size-height-icon-l: var(--x-size-base-06);
7320
7299
  }
7300
+ :root {
7301
+ --x-color-stroke-icon-default: currentColor;
7302
+ --x-color-fill-icon-default: none;
7303
+ --x-size-width-icon-default: var(--x-size-width-icon-m);
7304
+ --x-size-height-icon-default: var(--x-size-height-icon-m);
7305
+ --x-string-stroke-linecap-icon-default: butt;
7306
+ --x-string-stroke-linejoin-icon-default: mitter;
7307
+ --x-size-stroke-width-icon-default: 1px;
7308
+ }
7321
7309
  :root {
7322
7310
  --x-size-width-icon-l: var(--x-size-base-06);
7323
7311
  --x-size-height-icon-l: var(--x-size-base-06);
@@ -7328,13 +7316,9 @@
7328
7316
  --x-size-height-icon-default: var(--x-size-height-icon-l);
7329
7317
  }
7330
7318
  :root {
7331
- --x-color-stroke-icon-default: currentColor;
7332
- --x-color-fill-icon-default: none;
7333
- --x-size-width-icon-default: var(--x-size-width-icon-m);
7334
- --x-size-height-icon-default: var(--x-size-height-icon-m);
7335
- --x-string-stroke-linecap-icon-default: butt;
7336
- --x-string-stroke-linejoin-icon-default: mitter;
7337
- --x-size-stroke-width-icon-default: 1px;
7319
+ --x-size-padding-grid: 0;
7320
+ --x-size-gap-grid: var(--x-size-base-03);
7321
+ --x-size-min-width-grid-item: 150px;
7338
7322
  }
7339
7323
  :root {
7340
7324
  --x-color-stroke-icon-default: currentColor;
@@ -7371,11 +7355,6 @@
7371
7355
  --x-size-gap-grid: var(--x-size-base-03);
7372
7356
  --x-size-min-width-grid-item: 150px;
7373
7357
  }
7374
- :root {
7375
- --x-size-padding-grid: 0;
7376
- --x-size-gap-grid: var(--x-size-base-03);
7377
- --x-size-min-width-grid-item: 150px;
7378
- }
7379
7358
 
7380
7359
  .x-grid-list {
7381
7360
  margin: 0;
@@ -7832,6 +7811,18 @@
7832
7811
  --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7833
7812
  --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7834
7813
  }
7814
+ :root {
7815
+ --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7816
+ --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7817
+ --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7818
+ --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7819
+ --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7820
+ --x-size-padding-facet-header-card: var(--x-size-base-03);
7821
+ --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7822
+ --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7823
+ --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7824
+ --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7825
+ }
7835
7826
 
7836
7827
  .x-facet--card.x-facet,
7837
7828
  .x-facet--card .x-facet {
@@ -7847,19 +7838,10 @@
7847
7838
  --x-size-padding-left-facet-header-default: var(--x-size-padding-left-facet-header-card);
7848
7839
  }
7849
7840
  :root {
7850
- --x-size-border-radius-facet-card: var(--x-size-border-radius-base-s);
7851
- --x-size-border-radius-top-left-facet-card: var(--x-size-border-radius-facet-card);
7852
- --x-size-border-radius-top-right-facet-card: var(--x-size-border-radius-facet-card);
7853
- --x-size-border-radius-bottom-right-facet-card: var(--x-size-border-radius-facet-card);
7854
- --x-size-border-radius-bottom-left-facet-card: var(--x-size-border-radius-facet-card);
7855
- --x-size-padding-facet-header-card: var(--x-size-base-03);
7856
- --x-size-padding-top-facet-header-card: var(--x-size-padding-facet-header-card);
7857
- --x-size-padding-right-facet-header-card: var(--x-size-padding-facet-header-card);
7858
- --x-size-padding-bottom-facet-header-card: var(--x-size-padding-facet-header-card);
7859
- --x-size-padding-left-facet-header-card: var(--x-size-padding-facet-header-card);
7841
+ --x-size-width-dropdown-xl: 282px;
7860
7842
  }
7861
7843
  :root {
7862
- --x-size-width-dropdown-xl: 282px;
7844
+ --x-size-width-dropdown-s: 74px;
7863
7845
  }
7864
7846
  :root {
7865
7847
  --x-size-width-dropdown-xl: 282px;
@@ -7876,7 +7858,12 @@
7876
7858
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-s);
7877
7859
  }
7878
7860
  :root {
7879
- --x-size-width-dropdown-s: 74px;
7861
+ --x-size-gap-dropdown-pill: var(--x-size-base-03);
7862
+ --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
7863
+ --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7864
+ --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7865
+ --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7866
+ --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7880
7867
  }
7881
7868
  :root {
7882
7869
  --x-size-gap-dropdown-pill: var(--x-size-base-03);
@@ -7922,12 +7909,7 @@
7922
7909
  );
7923
7910
  }
7924
7911
  :root {
7925
- --x-size-gap-dropdown-pill: var(--x-size-base-03);
7926
- --x-size-border-width-dropdown-list-pill: var(--x-size-border-width-base);
7927
- --x-size-border-width-top-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7928
- --x-size-border-width-right-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7929
- --x-size-border-width-bottom-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7930
- --x-size-border-width-left-dropdown-list-pill: var(--x-size-border-width-dropdown-list-pill);
7912
+ --x-size-width-dropdown-m: 130px;
7931
7913
  }
7932
7914
  :root {
7933
7915
  --x-size-width-dropdown-m: 130px;
@@ -7936,43 +7918,6 @@
7936
7918
  .x-dropdown.x-dropdown--m {
7937
7919
  --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-m);
7938
7920
  }
7939
- :root {
7940
- --x-size-width-dropdown-m: 130px;
7941
- }
7942
- :root {
7943
- --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7944
- --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
7945
- --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
7946
- --x-size-padding-right-dropdown-item-line: 0;
7947
- --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
7948
- --x-size-padding-left-dropdown-item-line: 0;
7949
- --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
7950
- --x-size-padding-right-dropdown-toggle-line: 0;
7951
- --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
7952
- --x-size-padding-left-dropdown-toggle-line: 0;
7953
- --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
7954
- --x-size-border-width-top-dropdown-toggle-line: 0;
7955
- --x-size-border-width-right-dropdown-toggle-line: 0;
7956
- --x-size-border-width-bottom-dropdown-toggle-line: var(
7957
- --x-size-border-width-dropdown-toggle-line
7958
- );
7959
- --x-size-border-width-left-dropdown-toggle-line: 0;
7960
- --x-size-border-width-dropdown-list-line: 0;
7961
- --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7962
- --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7963
- --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7964
- --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
7965
- }
7966
- :root {
7967
- --x-size-width-dropdown-l: 202px;
7968
- }
7969
- :root {
7970
- --x-size-width-dropdown-l: 202px;
7971
- }
7972
-
7973
- .x-dropdown.x-dropdown--l {
7974
- --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
7975
- }
7976
7921
  :root {
7977
7922
  --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7978
7923
  --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
@@ -8036,6 +7981,40 @@
8036
7981
  --x-size-border-width-left-dropdown-list-line
8037
7982
  );
8038
7983
  }
7984
+ :root {
7985
+ --x-size-padding-block-dropdown-item-line: var(--x-size-base-03);
7986
+ --x-size-padding-inline-dropdown-item-line: 0 var(--x-size-base-03);
7987
+ --x-size-padding-top-dropdown-item-line: var(--x-size-base-03);
7988
+ --x-size-padding-right-dropdown-item-line: 0;
7989
+ --x-size-padding-bottom-dropdown-item-line: var(--x-size-base-03);
7990
+ --x-size-padding-left-dropdown-item-line: 0;
7991
+ --x-size-padding-top-dropdown-toggle-line: var(--x-size-base-03);
7992
+ --x-size-padding-right-dropdown-toggle-line: 0;
7993
+ --x-size-padding-bottom-dropdown-toggle-line: var(--x-size-base-03);
7994
+ --x-size-padding-left-dropdown-toggle-line: 0;
7995
+ --x-size-border-width-dropdown-toggle-line: var(--x-size-border-width-base);
7996
+ --x-size-border-width-top-dropdown-toggle-line: 0;
7997
+ --x-size-border-width-right-dropdown-toggle-line: 0;
7998
+ --x-size-border-width-bottom-dropdown-toggle-line: var(
7999
+ --x-size-border-width-dropdown-toggle-line
8000
+ );
8001
+ --x-size-border-width-left-dropdown-toggle-line: 0;
8002
+ --x-size-border-width-dropdown-list-line: 0;
8003
+ --x-size-border-width-top-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8004
+ --x-size-border-width-right-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8005
+ --x-size-border-width-bottom-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8006
+ --x-size-border-width-left-dropdown-list-line: var(--x-size-border-width-dropdown-list-line);
8007
+ }
8008
+ :root {
8009
+ --x-size-width-dropdown-l: 202px;
8010
+ }
8011
+ :root {
8012
+ --x-size-width-dropdown-l: 202px;
8013
+ }
8014
+
8015
+ .x-dropdown.x-dropdown--l {
8016
+ --x-size-width-dropdown-toggle-default: var(--x-size-width-dropdown-l);
8017
+ }
8039
8018
  :root {
8040
8019
  --x-size-border-radius-dropdown-default: var(--x-size-border-radius-base-none);
8041
8020
  --x-size-border-radius-top-left-dropdown-default: var(--x-size-border-radius-dropdown-default);
@@ -8417,6 +8396,16 @@
8417
8396
  --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8418
8397
  --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8419
8398
  }
8399
+ :root {
8400
+ --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8401
+ --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8402
+ --x-color-text-button-tertiary: var(--x-color-text-default);
8403
+ --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8404
+ --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8405
+ --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8406
+ --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8407
+ --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8408
+ }
8420
8409
 
8421
8410
  .x-button--tertiary.x-button,
8422
8411
  .x-button--tertiary .x-button {
@@ -8429,24 +8418,11 @@
8429
8418
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-tertiary);
8430
8419
  }
8431
8420
  :root {
8432
- --x-color-background-button-tertiary: var(--x-color-base-neutral-95);
8433
- --x-color-border-button-tertiary: var(--x-color-base-neutral-70);
8434
- --x-color-text-button-tertiary: var(--x-color-text-default);
8435
- --x-size-border-width-button-tertiary: var(--x-size-border-width-base);
8436
- --x-size-border-width-top-button-tertiary: var(--x-size-border-width-button-tertiary);
8437
- --x-size-border-width-right-button-tertiary: var(--x-size-border-width-button-tertiary);
8438
- --x-size-border-width-bottom-button-tertiary: var(--x-size-border-width-button-tertiary);
8439
- --x-size-border-width-left-button-tertiary: var(--x-size-border-width-button-tertiary);
8440
- }
8441
- :root {
8442
- --x-color-background-button-secondary: transparent;
8443
- --x-color-border-button-secondary: var(--x-color-border-button-default);
8444
- --x-color-text-button-secondary: var(--x-color-border-button-default);
8445
- --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8446
- --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8447
- --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8448
- --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8449
- --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8421
+ --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8422
+ --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8423
+ --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8424
+ --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8425
+ --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8450
8426
  }
8451
8427
  :root {
8452
8428
  --x-color-background-button-secondary: transparent;
@@ -8476,13 +8452,6 @@
8476
8452
  --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8477
8453
  --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8478
8454
  }
8479
- :root {
8480
- --x-size-border-radius-button-round: var(--x-size-border-radius-base-pill);
8481
- --x-size-border-radius-top-left-button-round: var(--x-size-border-radius-button-round);
8482
- --x-size-border-radius-top-right-button-round: var(--x-size-border-radius-button-round);
8483
- --x-size-border-radius-bottom-right-button-round: var(--x-size-border-radius-button-round);
8484
- --x-size-border-radius-bottom-left-button-round: var(--x-size-border-radius-button-round);
8485
- }
8486
8455
 
8487
8456
  .x-button--round.x-button,
8488
8457
  .x-button--round .x-button {
@@ -8501,6 +8470,26 @@
8501
8470
  --x-size-padding-left-button-default: 0;
8502
8471
  --x-size-padding-right-button-default: 0;
8503
8472
  }
8473
+ :root {
8474
+ --x-color-background-button-secondary: transparent;
8475
+ --x-color-border-button-secondary: var(--x-color-border-button-default);
8476
+ --x-color-text-button-secondary: var(--x-color-border-button-default);
8477
+ --x-size-border-width-button-secondary: var(--x-size-border-width-base);
8478
+ --x-size-border-width-top-button-secondary: var(--x-size-border-width-button-secondary);
8479
+ --x-size-border-width-right-button-secondary: var(--x-size-border-width-button-secondary);
8480
+ --x-size-border-width-bottom-button-secondary: var(--x-size-border-width-button-secondary);
8481
+ --x-size-border-width-left-button-secondary: var(--x-size-border-width-button-secondary);
8482
+ }
8483
+ :root {
8484
+ --x-color-background-button-primary: var(--x-color-background-button-default);
8485
+ --x-color-border-button-primary: var(--x-color-border-button-default);
8486
+ --x-color-text-button-primary: var(--x-color-text-button-default);
8487
+ --x-size-border-width-button-primary: var(--x-size-border-width-base);
8488
+ --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8489
+ --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8490
+ --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8491
+ --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8492
+ }
8504
8493
  :root {
8505
8494
  --x-color-background-button-primary: var(--x-color-background-button-default);
8506
8495
  --x-color-border-button-primary: var(--x-color-border-button-default);
@@ -8522,16 +8511,6 @@
8522
8511
  --x-size-border-width-bottom-button-default: var(--x-size-border-width-bottom-button-primary);
8523
8512
  --x-size-border-width-left-button-default: var(--x-size-border-width-left-button-primary);
8524
8513
  }
8525
- :root {
8526
- --x-color-background-button-primary: var(--x-color-background-button-default);
8527
- --x-color-border-button-primary: var(--x-color-border-button-default);
8528
- --x-color-text-button-primary: var(--x-color-text-button-default);
8529
- --x-size-border-width-button-primary: var(--x-size-border-width-base);
8530
- --x-size-border-width-top-button-primary: var(--x-size-border-width-button-primary);
8531
- --x-size-border-width-right-button-primary: var(--x-size-border-width-button-primary);
8532
- --x-size-border-width-bottom-button-primary: var(--x-size-border-width-button-primary);
8533
- --x-size-border-width-left-button-primary: var(--x-size-border-width-button-primary);
8534
- }
8535
8514
  :root {
8536
8515
  --x-size-border-radius-button-pill: var(--x-size-border-radius-base-pill);
8537
8516
  --x-size-border-radius-top-left-button-pill: var(--x-size-border-radius-button-pill);
@@ -8566,6 +8545,11 @@
8566
8545
  --x-color-border-button-ghost: transparent;
8567
8546
  --x-color-text-button-ghost: var(--x-color-base-lead);
8568
8547
  }
8548
+ :root {
8549
+ --x-color-background-button-ghost: transparent;
8550
+ --x-color-border-button-ghost: transparent;
8551
+ --x-color-text-button-ghost: var(--x-color-base-lead);
8552
+ }
8569
8553
 
8570
8554
  .x-button--ghost.x-button,
8571
8555
  .x-button--ghost .x-button {
@@ -8583,11 +8567,6 @@
8583
8567
  .x-button--ghost.x-button--ghost-end .x-button {
8584
8568
  --x-size-padding-right-button-default: 0;
8585
8569
  }
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
- }
8591
8570
  :root {
8592
8571
  --x-color-background-button-default: var(--x-color-base-lead);
8593
8572
  --x-color-border-button-default: var(--x-color-background-button-default);
@@ -8774,16 +8753,6 @@
8774
8753
  .x-badge-container {
8775
8754
  position: relative;
8776
8755
  }
8777
- :root {
8778
- --x-color-background-badge-default: var(--x-color-base-neutral-10);
8779
- --x-color-text-badge-default: var(--x-color-base-neutral-100);
8780
- --x-color-border-badge-default: var(--x-color-base-neutral-10);
8781
- --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8782
- --x-size-border-width-badge-default: 0;
8783
- --x-size-width-badge-default: 1.5em;
8784
- --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8785
- --x-size-font-badge-default: var(--x-size-font-base-xs);
8786
- }
8787
8756
  :root {
8788
8757
  --x-size-base-01: 2px;
8789
8758
  --x-size-base-02: 4px;
@@ -8806,6 +8775,16 @@
8806
8775
  --x-size-base-19: 280px;
8807
8776
  --x-size-base-20: 344px;
8808
8777
  }
8778
+ :root {
8779
+ --x-color-background-badge-default: var(--x-color-base-neutral-10);
8780
+ --x-color-text-badge-default: var(--x-color-base-neutral-100);
8781
+ --x-color-border-badge-default: var(--x-color-base-neutral-10);
8782
+ --x-size-border-radius-badge-default: var(--x-size-border-radius-base-pill);
8783
+ --x-size-border-width-badge-default: 0;
8784
+ --x-size-width-badge-default: 1.5em;
8785
+ --x-number-font-weight-badge-default: var(--x-number-font-weight-base-regular);
8786
+ --x-size-font-badge-default: var(--x-size-font-base-xs);
8787
+ }
8809
8788
  :root {
8810
8789
  --x-color-base-lead: #243d48;
8811
8790
  --x-color-base-auxiliary: #bfe1ec;
@@ -8825,4 +8804,25 @@
8825
8804
  --x-size-border-radius-base-m: var(--x-size-base-06);
8826
8805
  --x-size-border-radius-base-pill: 99999px;
8827
8806
  --x-size-border-width-base: 1px;
8807
+ }
8808
+ :root {
8809
+ --x-string-justify-message-default: center;
8810
+ --x-size-gap-message-default: var(--x-size-base-03);
8811
+ --x-size-padding-message-default: var(--x-size-base-06);
8812
+ --x-color-background-message-default: var(--x-color-base-neutral-95);
8813
+ --x-color-border-message-default: var(--x-color-background-message-default);
8814
+ --x-color-text-message-default: var(--x-color-text-default);
8815
+ --x-size-border-radius-message-default: var(--x-size-border-radius-base-m);
8816
+ --x-size-border-radius-top-left-message-default: var(--x-size-border-radius-message-default);
8817
+ --x-size-border-radius-top-right-message-default: var(--x-size-border-radius-message-default);
8818
+ --x-size-border-radius-bottom-right-message-default: var(--x-size-border-radius-message-default);
8819
+ --x-size-border-radius-bottom-left-message-default: var(--x-size-border-radius-message-default);
8820
+ --x-size-border-width-message-default: var(--x-size-border-width-base);
8821
+ --x-size-border-width-top-message-default: var(--x-size-border-width-message-default);
8822
+ --x-size-border-width-right-message-default: var(--x-size-border-width-message-default);
8823
+ --x-size-border-width-bottom-message-default: var(--x-size-border-width-message-default);
8824
+ --x-size-border-width-left-message-default: var(--x-size-border-width-message-default);
8825
+ --x-font-family-message-default: var(--x-font-family-title3);
8826
+ --x-size-font-message-default: var(--x-size-font-title3);
8827
+ --x-number-font-weight-message-default: var(--x-number-font-weight-title3);
8828
8828
  }