@warp-ds/css 2.0.0-next.1 → 2.0.0-next.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/component-classes/index.d.ts +28 -106
- package/component-classes/index.js +10 -101
- package/dist/components.css +1 -1
- package/dist/index.html +16 -360
- package/dist/resets.css +1 -1
- package/dist/tokens/blocket-se.css +1 -1
- package/dist/tokens/dba-dk.css +1 -1
- package/dist/tokens/finn-no.css +1 -1
- package/dist/tokens/tori-fi.css +1 -1
- package/package.json +1 -1
- package/dist/resets.min.css +0 -1
|
@@ -4,40 +4,21 @@ export namespace pageIndicator {
|
|
|
4
4
|
let inactive: string;
|
|
5
5
|
let active: string;
|
|
6
6
|
}
|
|
7
|
-
export namespace
|
|
7
|
+
export namespace badge {
|
|
8
8
|
let base: string;
|
|
9
|
+
let neutral: string;
|
|
9
10
|
let info: string;
|
|
10
|
-
let
|
|
11
|
+
let positive: string;
|
|
11
12
|
let warning: string;
|
|
12
|
-
let
|
|
13
|
+
let negative: string;
|
|
13
14
|
let disabled: string;
|
|
15
|
+
let price: string;
|
|
14
16
|
let sponsored: string;
|
|
15
|
-
let
|
|
16
|
-
let
|
|
17
|
-
let
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
let base_1: string;
|
|
21
|
-
export { base_1 as base };
|
|
22
|
-
let neutral_1: string;
|
|
23
|
-
export { neutral_1 as neutral };
|
|
24
|
-
let info_1: string;
|
|
25
|
-
export { info_1 as info };
|
|
26
|
-
export let positive: string;
|
|
27
|
-
let warning_1: string;
|
|
28
|
-
export { warning_1 as warning };
|
|
29
|
-
export let negative: string;
|
|
30
|
-
let disabled_1: string;
|
|
31
|
-
export { disabled_1 as disabled };
|
|
32
|
-
export let price: string;
|
|
33
|
-
let sponsored_1: string;
|
|
34
|
-
export { sponsored_1 as sponsored };
|
|
35
|
-
export let notification: string;
|
|
36
|
-
export let positionBase: string;
|
|
37
|
-
export let positionTL: string;
|
|
38
|
-
export let positionTR: string;
|
|
39
|
-
export let positionBR: string;
|
|
40
|
-
export let positionBL: string;
|
|
17
|
+
let positionBase: string;
|
|
18
|
+
let positionTL: string;
|
|
19
|
+
let positionTR: string;
|
|
20
|
+
let positionBR: string;
|
|
21
|
+
let positionBL: string;
|
|
41
22
|
}
|
|
42
23
|
export namespace slider {
|
|
43
24
|
let wrapper_1: string;
|
|
@@ -53,14 +34,11 @@ export namespace slider {
|
|
|
53
34
|
export namespace box {
|
|
54
35
|
export let box: string;
|
|
55
36
|
export let bleed: string;
|
|
56
|
-
let
|
|
57
|
-
export {
|
|
58
|
-
let
|
|
59
|
-
export {
|
|
37
|
+
let info_1: string;
|
|
38
|
+
export { info_1 as info };
|
|
39
|
+
let neutral_1: string;
|
|
40
|
+
export { neutral_1 as neutral };
|
|
60
41
|
export let bordered: string;
|
|
61
|
-
export let infoClickable: string;
|
|
62
|
-
export let neutralClickable: string;
|
|
63
|
-
export let borderedClickable: string;
|
|
64
42
|
}
|
|
65
43
|
export namespace pill {
|
|
66
44
|
let pill: string;
|
|
@@ -103,7 +81,6 @@ export namespace steps {
|
|
|
103
81
|
export namespace card {
|
|
104
82
|
export let card: string;
|
|
105
83
|
export let cardShadow: string;
|
|
106
|
-
export let cardUnselected: string;
|
|
107
84
|
export let cardSelected: string;
|
|
108
85
|
export let cardOutline: string;
|
|
109
86
|
export let cardOutlineUnselected: string;
|
|
@@ -115,8 +92,6 @@ export namespace card {
|
|
|
115
92
|
export { a11y_1 as a11y };
|
|
116
93
|
}
|
|
117
94
|
export namespace switchToggle {
|
|
118
|
-
let _switch: string;
|
|
119
|
-
export { _switch as switch };
|
|
120
95
|
let label_1: string;
|
|
121
96
|
export { label_1 as label };
|
|
122
97
|
export let labelDisabled: string;
|
|
@@ -145,8 +120,8 @@ export namespace toast {
|
|
|
145
120
|
export let toast: string;
|
|
146
121
|
let positive_1: string;
|
|
147
122
|
export { positive_1 as positive };
|
|
148
|
-
let
|
|
149
|
-
export {
|
|
123
|
+
let warning_1: string;
|
|
124
|
+
export { warning_1 as warning };
|
|
150
125
|
let negative_1: string;
|
|
151
126
|
export { negative_1 as negative };
|
|
152
127
|
export let icon: string;
|
|
@@ -297,7 +272,6 @@ export namespace buttonGroupItem {
|
|
|
297
272
|
export let selected: string;
|
|
298
273
|
}
|
|
299
274
|
export namespace modal {
|
|
300
|
-
export let transparentBg: string;
|
|
301
275
|
export let backdrop: string;
|
|
302
276
|
export let modal: string;
|
|
303
277
|
let content_4: string;
|
|
@@ -346,22 +320,22 @@ export namespace alert {
|
|
|
346
320
|
let positive_2: string;
|
|
347
321
|
export { positive_2 as positive };
|
|
348
322
|
export let positiveIcon: string;
|
|
349
|
-
let
|
|
350
|
-
export {
|
|
323
|
+
let warning_2: string;
|
|
324
|
+
export { warning_2 as warning };
|
|
351
325
|
export let warningIcon: string;
|
|
352
|
-
let
|
|
353
|
-
export {
|
|
326
|
+
let info_2: string;
|
|
327
|
+
export { info_2 as info };
|
|
354
328
|
export let infoIcon: string;
|
|
355
329
|
}
|
|
356
330
|
export namespace input {
|
|
357
331
|
let wrapper_5: string;
|
|
358
332
|
export { wrapper_5 as wrapper };
|
|
359
|
-
let
|
|
360
|
-
export {
|
|
333
|
+
let base_1: string;
|
|
334
|
+
export { base_1 as base };
|
|
361
335
|
let _default: string;
|
|
362
336
|
export { _default as default };
|
|
363
|
-
let
|
|
364
|
-
export {
|
|
337
|
+
let disabled_1: string;
|
|
338
|
+
export { disabled_1 as disabled };
|
|
365
339
|
export let invalid: string;
|
|
366
340
|
export let readOnly: string;
|
|
367
341
|
export let placeholder: string;
|
|
@@ -372,8 +346,8 @@ export namespace input {
|
|
|
372
346
|
export namespace select {
|
|
373
347
|
let _default_1: string;
|
|
374
348
|
export { _default_1 as default };
|
|
375
|
-
let
|
|
376
|
-
export {
|
|
349
|
+
let disabled_2: string;
|
|
350
|
+
export { disabled_2 as disabled };
|
|
377
351
|
let invalid_1: string;
|
|
378
352
|
export { invalid_1 as invalid };
|
|
379
353
|
let readOnly_1: string;
|
|
@@ -389,14 +363,11 @@ export namespace label {
|
|
|
389
363
|
let label_2: string;
|
|
390
364
|
export { label_2 as label };
|
|
391
365
|
export let optional: string;
|
|
392
|
-
export let labelInvalid: string;
|
|
393
366
|
}
|
|
394
367
|
export namespace helpText {
|
|
395
368
|
let helpText: string;
|
|
396
369
|
let helpTextColor: string;
|
|
397
370
|
let helpTextColorInvalid: string;
|
|
398
|
-
let helpTextValid: string;
|
|
399
|
-
let helpTextInvalid: string;
|
|
400
371
|
}
|
|
401
372
|
export namespace suffix {
|
|
402
373
|
let wrapper_7: string;
|
|
@@ -482,8 +453,8 @@ export namespace combobox {
|
|
|
482
453
|
export { a11y_6 as a11y };
|
|
483
454
|
}
|
|
484
455
|
export namespace attention {
|
|
485
|
-
let
|
|
486
|
-
export {
|
|
456
|
+
let base_2: string;
|
|
457
|
+
export { base_2 as base };
|
|
487
458
|
export let tooltip: string;
|
|
488
459
|
export let callout: string;
|
|
489
460
|
export let highlight: string;
|
|
@@ -510,55 +481,6 @@ export namespace attention {
|
|
|
510
481
|
export let notCallout: string;
|
|
511
482
|
export let closeBtn: string;
|
|
512
483
|
}
|
|
513
|
-
export namespace backwardsCompatibleClasses {
|
|
514
|
-
export let modalBackdrop: string;
|
|
515
|
-
let chevronBox_1: string;
|
|
516
|
-
export { chevronBox_1 as chevronBox };
|
|
517
|
-
let chevronNonBox_1: string;
|
|
518
|
-
export { chevronNonBox_1 as chevronNonBox };
|
|
519
|
-
let checkboxInvalid_1: string;
|
|
520
|
-
export { checkboxInvalid_1 as checkboxInvalid };
|
|
521
|
-
let radioInvalid_1: string;
|
|
522
|
-
export { radioInvalid_1 as radioInvalid };
|
|
523
|
-
let radioDisabled_1: string;
|
|
524
|
-
export { radioDisabled_1 as radioDisabled };
|
|
525
|
-
export let modalTitle: string;
|
|
526
|
-
export let pillClose: string;
|
|
527
|
-
let toggle_1: string;
|
|
528
|
-
export { toggle_1 as toggle };
|
|
529
|
-
export let radioButton: string;
|
|
530
|
-
export let toggleIndeterminate: string;
|
|
531
|
-
let input_2: string;
|
|
532
|
-
export { input_2 as input };
|
|
533
|
-
export let removedAlertTokens: string;
|
|
534
|
-
export let removedBadgeTokens: string;
|
|
535
|
-
export let removedBoxTokens: string;
|
|
536
|
-
export let removedBreadcrumbsTokens: string;
|
|
537
|
-
export let removedButtonTokens: string;
|
|
538
|
-
export let removedButtonGroupTokens: string;
|
|
539
|
-
export let removedCalloutTokens: string;
|
|
540
|
-
export let removedCardTokens: string;
|
|
541
|
-
export let removedCheckboxTokens: string;
|
|
542
|
-
export let removedComboboxTokens: string;
|
|
543
|
-
export let removedExpandableTokens: string;
|
|
544
|
-
export let removedHelpTextTokens: string;
|
|
545
|
-
export let removedInputTokens: string;
|
|
546
|
-
export let removedLabelTokens: string;
|
|
547
|
-
export let removedModalTokens: string;
|
|
548
|
-
export let removedPageIndicatorTokens: string;
|
|
549
|
-
export let removedPillTokens: string;
|
|
550
|
-
export let removedPopoverTokens: string;
|
|
551
|
-
export let removedRadioTokens: string;
|
|
552
|
-
export let removedSelectTokens: string;
|
|
553
|
-
export let removedSliderTokens: string;
|
|
554
|
-
export let removedStepindicatorTokens: string;
|
|
555
|
-
export let removedSwitchTokens: string;
|
|
556
|
-
export let removedTabsTokens: string;
|
|
557
|
-
export let removedToastTokens: string;
|
|
558
|
-
export let removedTooltipTokens: string;
|
|
559
|
-
export let removedAlphaTokens: string;
|
|
560
|
-
export let surfaceUpdates: string;
|
|
561
|
-
}
|
|
562
484
|
export namespace pagination {
|
|
563
485
|
let link_2: string;
|
|
564
486
|
export { link_2 as link };
|
|
@@ -5,20 +5,6 @@ export const pageIndicator = {
|
|
|
5
5
|
active: 'bg-[--w-s-icon-selected]',
|
|
6
6
|
};
|
|
7
7
|
|
|
8
|
-
// Deprecated: Use Badge component
|
|
9
|
-
export const ribbon = {
|
|
10
|
-
base: 'py-4 px-8 border rounded-4 inline-flex last:mb-0',
|
|
11
|
-
info: 'i-border-$color-badge-info-background i-bg-$color-badge-info-background i-text-$color-badge-info-text',
|
|
12
|
-
success: 'i-border-$color-badge-positive-background i-bg-$color-badge-positive-background i-text-$color-badge-positive-text',
|
|
13
|
-
warning: 'i-border-$color-badge-warning-background i-bg-$color-badge-warning-background i-text-$color-badge-warning-text',
|
|
14
|
-
error: 'i-border-$color-badge-negative-background i-bg-$color-badge-negative-background i-text-$color-badge-negative-text',
|
|
15
|
-
disabled: 'i-border-$color-badge-disabled-background i-bg-$color-badge-disabled-background i-text-$color-badge-disabled-text',
|
|
16
|
-
sponsored: 'i-border-$color-badge-price-background i-bg-$color-badge-price-background i-text-$color-badge-price-text',
|
|
17
|
-
neutral: 'i-border-$color-badge-neutral-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text',
|
|
18
|
-
roundedTopRightBottomLeft: 'rounded-tr-0 rounded-bl-0',
|
|
19
|
-
roundedTopLeftBottomRight: 'rounded-tl-0 rounded-br-0',
|
|
20
|
-
};
|
|
21
|
-
|
|
22
8
|
export const badge = {
|
|
23
9
|
base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',
|
|
24
10
|
neutral: 'bg-[--w-color-badge-neutral-background] s-text',
|
|
@@ -29,8 +15,6 @@ export const badge = {
|
|
|
29
15
|
disabled: 's-bg-disabled s-text',
|
|
30
16
|
price: 'bg-[--w-black/70] s-text-inverted-static',
|
|
31
17
|
sponsored: 'bg-[--w-color-badge-sponsored-background] s-text',
|
|
32
|
-
// Notification badge is deprecated: Do not use! TODO: Remove in v2
|
|
33
|
-
notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',
|
|
34
18
|
positionBase: 'absolute backdrop-blur',
|
|
35
19
|
positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',
|
|
36
20
|
positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',
|
|
@@ -56,9 +40,6 @@ export const box = {
|
|
|
56
40
|
info: 's-bg-info-subtle',
|
|
57
41
|
neutral: 's-surface-sunken',
|
|
58
42
|
bordered: 'border-2 s-border s-bg',
|
|
59
|
-
infoClickable: 'hover:s-bg-info-subtle-hover active:s-bg-info-subtle-active', // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
|
|
60
|
-
neutralClickable: 'hover:s-bg-hover active:s-bg-active', // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
|
|
61
|
-
borderedClickable: 'hover:s-bg-hover active:s-bg-active hover:s-border-hover active:s-border-active', // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
|
|
62
43
|
};
|
|
63
44
|
|
|
64
45
|
export const pill = {
|
|
@@ -110,7 +91,6 @@ export const steps = {
|
|
|
110
91
|
export const card = {
|
|
111
92
|
card: 'cursor-pointer overflow-hidden relative transition-all',
|
|
112
93
|
cardShadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',
|
|
113
|
-
cardUnselected: '', // TODO: Remove in v2 - Not used after introducing surface
|
|
114
94
|
cardSelected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',
|
|
115
95
|
cardOutline: 'absolute border-2 rounded-8 inset-0 transition-all',
|
|
116
96
|
cardOutlineUnselected: 'border-transparent group-active:s-border-active',
|
|
@@ -123,7 +103,6 @@ export const card = {
|
|
|
123
103
|
};
|
|
124
104
|
|
|
125
105
|
export const switchToggle = {
|
|
126
|
-
switch: '', // TODO: Remove this in v2
|
|
127
106
|
label: 'block relative h-24 w-44 cursor-pointer group',
|
|
128
107
|
labelDisabled: 'pointer-events-none',
|
|
129
108
|
track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',
|
|
@@ -356,7 +335,6 @@ export const buttonGroupItem = {
|
|
|
356
335
|
};
|
|
357
336
|
|
|
358
337
|
export const modal = {
|
|
359
|
-
transparentBg: '', //TODO: Remove in v2 - previously used for opacity before changing to a rgba background in backdrop
|
|
360
338
|
backdrop:
|
|
361
339
|
'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-30 [--w-modal-max-height:80%] [--w-modal-width:640px] bg-[--w-black/25]',
|
|
362
340
|
modal:
|
|
@@ -378,14 +356,19 @@ export const modal = {
|
|
|
378
356
|
|
|
379
357
|
export const modalElement = {
|
|
380
358
|
// several items in here are 'resets' for the <dialog> element
|
|
381
|
-
dialogEl:
|
|
382
|
-
|
|
359
|
+
dialogEl:
|
|
360
|
+
'bg-transparent backface-hidden w-unset h-unset max-w-unset max-h-unset p-0 m-auto border-0 inset-0 open:flex open:fixed sm:place-content-center sm:place-items-center items-end [--w-modal-max-height:80%] [--w-modal-width:640px]',
|
|
361
|
+
dialogInner:
|
|
362
|
+
'transition-all relative pb-safe-[32] sm:pb-32 shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] ease-in-out backface-hidden will-change-height rounded-8 sm:mx-16 s-bg flex flex-col overflow-hidden lt-sm:rounded-b-0',
|
|
383
363
|
contentSlot: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
|
|
384
364
|
header: 'relative pb-8',
|
|
385
365
|
headerTitleBar: 'pt-16 sm:pt-24 px-16 sm:px-32 grid gap-12 grid-cols-[auto_1fr_auto] items-start shrink-0!',
|
|
386
|
-
headerButton:
|
|
387
|
-
|
|
388
|
-
|
|
366
|
+
headerButton:
|
|
367
|
+
'sm:min-h-[32px] sm:min-w-[32px] min-h-[40px] min-w-[40px] text-m leading-[24] p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding font-bold focusable transition-colors ease-in-out',
|
|
368
|
+
headerButtonLeft:
|
|
369
|
+
'-ml-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
|
|
370
|
+
headerCloseButton:
|
|
371
|
+
'-mr-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
|
|
389
372
|
headerCloseButtonOnImage: `absolute right-8 top-8 z-10 s-color-inverted bg-[var(--w-black)/70] hover:bg-[var(--w-black)/85] active:bg-[var(--w-black)] s-text-inverted`,
|
|
390
373
|
headerTitle: 'mb-0 t3 self-center',
|
|
391
374
|
headerTitleWithBackButton: 'justify-self-center',
|
|
@@ -441,16 +424,12 @@ export const select = {
|
|
|
441
424
|
export const label = {
|
|
442
425
|
label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',
|
|
443
426
|
optional: 'pl-8 font-normal text-s s-text-subtle',
|
|
444
|
-
labelInvalid: 's-text-negative', // TODO: Remove in v2 - kept for backwards compatibility
|
|
445
427
|
};
|
|
446
428
|
|
|
447
429
|
export const helpText = {
|
|
448
430
|
helpText: 'text-xs mt-4 block',
|
|
449
431
|
helpTextColor: 's-text-subtle',
|
|
450
432
|
helpTextColorInvalid: 's-text-negative',
|
|
451
|
-
// TODO: Remove below properties in v2 - kept for backwards compatibility
|
|
452
|
-
helpTextValid: 's-text-positive',
|
|
453
|
-
helpTextInvalid: 's-text-negative',
|
|
454
433
|
};
|
|
455
434
|
|
|
456
435
|
const prefixSuffixWrapperBase =
|
|
@@ -576,76 +555,6 @@ export const attention = {
|
|
|
576
555
|
closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,
|
|
577
556
|
};
|
|
578
557
|
|
|
579
|
-
export const backwardsCompatibleClasses = {
|
|
580
|
-
modalBackdrop: 'z-20', // replaced by z-30 in v1.4.0
|
|
581
|
-
chevronBox: 'right-16', //removed in v1.4.0
|
|
582
|
-
chevronNonBox: 'left-8', //removed in v1.4.0
|
|
583
|
-
checkboxInvalid:
|
|
584
|
-
'peer-checked:before:i-border-$color-checkbox-negative-border-selected peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover', //replaced in v1.5.0
|
|
585
|
-
radioInvalid:
|
|
586
|
-
'peer-checked:before:i-border-$color-radio-negative-border-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ', //replaced in v1.5.0
|
|
587
|
-
radioDisabled:
|
|
588
|
-
'before:i-bg-$color-radio-background-disabled before:i-bg-$color-checkbox-background-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled', //replaced in v1.5.0
|
|
589
|
-
modalTitle: 'h-40 sm:h-48 items-center', // replaced by min-h-40 sm:min-h-48 items-start
|
|
590
|
-
pillClose: 'pt-4 pb-6 text-m!', //replaced by py-8
|
|
591
|
-
toggle: 'peer-disabled:before:s-bg-disabled-subtle before:bg-[url(var(--w-form-check-mark))] peer-hover:before:s-bg-primary-subtle',
|
|
592
|
-
radioButton: 'flex! py-[5px]! px-[8px]!',
|
|
593
|
-
toggleIndeterminate:
|
|
594
|
-
'before:content-["-"] before:flex! before:items-center before:justify-center peer-indeterminate:hover:before:s-border-primary',
|
|
595
|
-
input: 'hover:s-border-disabled! s-text-negative! hover:s-border-negative-hover! bg-transparent! border-0! pl-40',
|
|
596
|
-
removedAlertTokens:
|
|
597
|
-
'i-border-$color-alert-negative-subtle-border i-bg-$color-alert-negative-background i-text-$color-alert-negative-text i-border-l-$color-alert-negative-border i-text-$color-alert-negative-icon i-border-$color-alert-positive-subtle-border i-bg-$color-alert-positive-background i-text-$color-alert-positive-text i-border-l-$color-alert-positive-border i-text-$color-alert-positive-icon i-border-$color-alert-warning-subtle-border i-bg-$color-alert-warning-background i-text-$color-alert-warning-text i-border-l-$color-alert-warning-border i-text-$color-alert-warning-icon i-border-$color-alert-info-subtle-border i-bg-$color-alert-info-background i-text-$color-alert-info-text i-border-l-$color-alert-info-border i-text-$color-alert-info-icon',
|
|
598
|
-
removedBadgeTokens:
|
|
599
|
-
'i-bg-$color-badge-price-background i-bg-$color-badge-negative-background i-bg-$color-badge-warning-background i-bg-$color-badge-positive-background i-bg-$color-badge-info-background i-bg-$color-badge-neutral-background i-text-$color-badge-neutral-text i-text-$color-badge-negative-text i-text-$color-badge-warning-text i-text-$color-badge-positive-text i-text-$color-badge-info-text i-text-$color-badge-disabled-text i-bg-$color-badge-disabled-background i-text-$color-badge-price-text',
|
|
600
|
-
removedBoxTokens:
|
|
601
|
-
'i-bg-$color-box-info-background i-text-$color-box-info-text i-bg-$color-box-neutral-background i-text-$color-box-neutral-text i-border-$color-box-bordered-border i-bg-$color-box-bordered-background i-text-$color-box-bordered-text hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover hover:i-bg-$color-box-bordered-background-hover active:i-bg-$color-box-bordered-background-hover hover:i-border-$color-box-bordered-border-hover active:i-border-$color-box-bordered-border-hover',
|
|
602
|
-
removedBreadcrumbsTokens: 'i-text-$color-breadcrumbs-text i-text-$color-breadcrumbs-link-text i-text-$color-breadcrumbs-icon',
|
|
603
|
-
removedButtonTokens:
|
|
604
|
-
'hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active i-bg-$color-button-primary-background hover:i-bg-$color-button-primary-background-hover active:i-bg-$color-button-primary-background-active i-text-$color-button-primary-text hover:i-text-$color-button-primary-text i-text-$color-button-secondary-text hover:i-text-$color-button-secondary-text i-border-$color-button-secondary-border i-bg-$color-button-secondary-background hover:i-bg-$color-button-secondary-background-hover hover:i-border-$color-button-secondary-border-hover active:i-bg-$color-button-secondary-background-active i-text-$color-button-utility-text hover:i-text-$color-button-utility-text i-bg-$color-button-utility-background i-border-$color-button-utility-border hover:i-bg-$color-button-utility-background hover:i-border-$color-button-utility-border-hover active:i-border-$color-button-utility-border-active i-bg-$color-button-negative-background i-text-$color-button-negative-text hover:i-text-$color-button-negative-text hover:i-bg-$color-button-negative-background-hover active:i-bg-$color-button-negative-background-active i-text-$color-button-pill-icon hover:i-text-$color-button-pill-icon-hover active:i-text-$color-button-pill-icon-active i-bg-$color-button-pill-background hover:i-bg-$color-button-pill-background-hover active:i-bg-$color-button-pill-background-active i-text-$color-button-disabled-text i-bg-$color-button-disabled-background i-bg-$color-button-quiet-background i-text-$color-button-quiet-text hover:i-bg-$color-button-quiet-background-hover active:i-bg-$color-button-quiet-background-active i-text-$color-button-utility-quiet-text i-bg-$color-button-utility-quiet-background hover:i-bg-$color-button-utility-quiet-background-hover i-bg-$color-button-negative-quiet-background i-text-$color-button-negative-quiet-text hover:i-bg-$color-button-negative-quiet-background-hover active:i-bg-$color-button-negative-quiet-background-active i-text-$color-button-loading-text i-bg-$color-button-loading-background i-text-$color-button-link-text',
|
|
605
|
-
removedButtonGroupTokens:
|
|
606
|
-
'peer-hover:peer-not-checked:i-bg-$color-buttongroup-primary-background-hover peer-checked:i-text-$color-buttongroup-primary-text-selected peer-checked:i-bg-$color-buttongroup-primary-background-selected peer-checked:i-border-$color-buttongroup-primary-border-selected i-text-$color-buttongroup-primary-text i-bg-$color-buttongroup-primary-background i-border-$color-buttongroup-primary-border i-bg-$color-buttongroup-utility-background-selected! i-border-$color-buttongroup-utility-border-selected i-border-$color-buttongroup-utility-border active:i-border-$color-buttongroup-utility-border-selected active:i-bg-$color-buttongroup-utility-background-selected hover:i-bg-$color-buttongroup-utility-background-hover i-text-$color-buttongroup-utility-text-selected! i-shadow-$shadow-buttongroup i-text-$color-buttongroup-utility-text i-bg-$color-buttongroup-utility-background hover:i-bg-$color-buttongroup-utility-background-hover active:i-text-$color-buttongroup-utility-text-selected active:i-bg-$color-buttongroup-utility-background-selected',
|
|
607
|
-
removedCalloutTokens: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text',
|
|
608
|
-
removedCardTokens:
|
|
609
|
-
'i-shadow-$shadow-card hover:i-shadow-$shadow-card-hover hover:i-bg-$color-card-background-hover i-bg-$color-card-flat-background i-border-$color-card-flat-border hover:i-bg-$color-card-flat-background-hover hover:i-border-$color-card-flat-border-hover active:i-bg-$color-card-flat-background-active active:i-border-$color-card-flat-border-active i-border-$color-card-flat-border-selected i-bg-$color-card-flat-background-selected hover:i-bg-$color-card-flat-background-selected-hover hover:i-border-$color-card-flat-border-selected-hover active:i-border-$color-card-flat-border-active active:i-bg-$color-card-flat-background-active i-border-$color-card-border-selected i-bg-$color-card-background-selected hover:i-border-$color-card-border-selected-hover hover:i-bg-$color-card-background-selected-hover active:i-border-$color-card-border-selected-active active:i-border-$color-card-flat-border i-border-$color-card-border i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',
|
|
610
|
-
removedCheckboxTokens:
|
|
611
|
-
'hover:before:s-bg-subtle i-border-$color-checkbox-border peer-indeterminate:before:i-border-$color-checkbox-border-selected before:i-text-$color-checkbox-icon peer-checked:before:i-border-$color-checkbox-negative-border hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:peer-hover:before:i-border-$ before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover before:i-border-$color-checkbox-border-disabled hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:before:i-bg-$color-checkbox-background-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover peer-checked:before:i-bg-$color-checkbox-background-selected-disabled hover:before:i-bg-$color-checkbox-background-hover peer-disabled:before:i-bg-$color-checkbox-background-disabled',
|
|
612
|
-
removedComboboxTokens:
|
|
613
|
-
'i-bg-$color-combobox-option-background-selected hover:i-bg-$color-combobox-option-background-selected-hover hover:i-bg-$color-combobox-option-background-hover i-bg-$color-combobox-background i-shadow-$shadow-combobox',
|
|
614
|
-
removedExpandableTokens:
|
|
615
|
-
'i-text-$color-expandable-icon i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover i-text-$color-expandable-title-text',
|
|
616
|
-
removedHelpTextTokens: 'i-text-$color-helptext-text i-text-$color-helptext-text-positive i-text-$color-helptext-text-negative',
|
|
617
|
-
removedInputTokens:
|
|
618
|
-
'placeholder:i-text-$color-input-text-placeholder i-text-$color-input-text-read-only i-text-$color-input-text-negative! i-border-$color-input-border-negative i-text-$color-input-text-disabled hover:i-border-$color-input-border-disabled! i-border-$color-input-border-disabled i-bg-$color-input-background-disabled active:i-border-$color-input-border-active hover:i-border-$color-input-border-hover i-border-$color-input-border i-bg-$color-input-background i-text-$color-input-text-filled',
|
|
619
|
-
removedLabelTokens: 'i-text-$color-label-text-negative i-text-$color-label-optional-text i-text-$color-label-text',
|
|
620
|
-
removedModalTokens:
|
|
621
|
-
'i-bg-$color-modal-background i-shadow-$shadow-modal before:i-bg-$color-modal-backdrop-background before:content-[""] before:absolute before:top-0 before:bottom-0 before:left-0 before:right-0 before:opacity-25',
|
|
622
|
-
removedPageIndicatorTokens:
|
|
623
|
-
'bg-[--w-s-icon-disabled] i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover i-bg-$color-pageindicator-background-selected',
|
|
624
|
-
removedPillTokens:
|
|
625
|
-
'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active s-text font-bold i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text i-text-$color-pill-suggestion-text',
|
|
626
|
-
removedPopoverTokens:
|
|
627
|
-
'border-[--w-s-color-background] i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text',
|
|
628
|
-
removedRadioTokens:
|
|
629
|
-
'before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover i-border-$color-radio-border peer-hover:before:i-border-$color-radio-border-hover before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-selected peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-disabled:before:i-bg-$color-radio-background-disabled peer-hover:before:i-bg-$color-radio-background-hover',
|
|
630
|
-
removedSelectTokens:
|
|
631
|
-
'i-border-$color-select-border-negative i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active i-text-$color-select-icon i-bg-$color-select-background-disabled i-bg-$color-select-background i-text-$color-select-text-disabled i-text-$color-select-text',
|
|
632
|
-
removedSliderTokens:
|
|
633
|
-
'i-bg-$color-slider-track-background-active i-bg-$color-slider-track-background-disabled i-bg-$color-slider-track-background focus:i-border-$color-slider-handle-border-hover active:i-border-$color-slider-handle-border-active hover:i-border-$color-slider-handle-border-hover i-border-$color-slider-handle-border i-bg-$color-slider-handle-background-disabled focus:i-bg-$color-slider-handle-background-hover active:i-bg-$color-slider-handle-background-active hover:i-bg-$color-slider-handle-background-hover i-bg-$color-slider-handle-background i-shadow-$shadow-slider active:slider-handle-shadow-active focus:slider-handle-shadow-hover hover:slider-handle-shadow-hover',
|
|
634
|
-
removedStepindicatorTokens:
|
|
635
|
-
'i-bg-$color-stepindicator-track-background-active i-bg-$color-stepindicator-track-background i-text-$color-stepindicator-handle-icon i-border-$color-stepindicator-handle-border i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background i-bg-$color-stepindicator-handle-background-active',
|
|
636
|
-
removedSwitchTokens:
|
|
637
|
-
'i-bg-$color-switch-handle-background-disabled i-bg-$color-switch-handle-background i-bg-$color-switch-track-background-disabled i-bg-$color-switch-track-background-selected group-hover:i-bg-$color-switch-track-background-selected-hover group-hover:i-bg-$color-switch-track-background-hover i-bg-$color-switch-track-background i-shadow-$shadow-switch-handle',
|
|
638
|
-
removedTabsTokens:
|
|
639
|
-
'i-text-$color-tabs-text-selected hover:i-text-$color-tabs-text-hover i-text-$color-tabs-text hover:i-border-$color-tabs-border-hover i-border-$color-tabs-border-selected i-border-$color-tabs-border',
|
|
640
|
-
removedToastTokens:
|
|
641
|
-
'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text i-text-$color-toast-negative-icon i-text-$color-toast-warning-icon i-text-$color-toast-positive-icon i-border-$color-toast-positive-subtle-border i-bg-$color-toast-positive-background i-text-$color-toast-positive-text i-text-$color-toast-close-icon hover:i-text-$color-toast-close-icon-hover active:i-text-$color-toast-close-icon-active',
|
|
642
|
-
removedTooltipTokens:
|
|
643
|
-
'i-bg-$color-tooltip-background i-border-$color-tooltip-background shadow-m i-text-$color-tooltip-text i-shadow-$shadow-tooltip',
|
|
644
|
-
removedAlphaTokens: 'bg-[--w-color-badge-price-background] bg-[--w-black-alpha25]',
|
|
645
|
-
surfaceUpdates:
|
|
646
|
-
'hover:s-bg-subtle-hover hover:shadow-m bg-[--w-s-color-surface-sunken] active:s-bg-hover active:s-bg-subtle-hover active:s-border-hover active:s-bg-info-subtle-hover',
|
|
647
|
-
};
|
|
648
|
-
|
|
649
558
|
export const pagination = {
|
|
650
559
|
link: 'hover:no-underline focus:no-underline focusable inline-flex justify-center items-center transition-colors ease-in-out min-h-[44px] min-w-[44px] p-4 rounded-full border-0 hover:bg-clip-padding',
|
|
651
560
|
currentPage: 'block md:hidden p-8 font-bold',
|