@warp-ds/css 1.10.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 +58 -102
- package/component-classes/shortcuts.js +10 -5
- 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 -0
- package/dist/tokens/finn-no.css +1 -1
- package/dist/tokens/tori-fi.css +1 -1
- package/package.json +7 -6
- 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',
|
|
@@ -45,7 +29,8 @@ export const slider = {
|
|
|
45
29
|
activeTrack: 'absolute s-bg-primary h-6 top-[19px] rounded-4',
|
|
46
30
|
activeTrackDisabled: 'absolute s-bg-disabled h-6 top-[19px] rounded-4 pointer-events-none',
|
|
47
31
|
thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',
|
|
48
|
-
thumbEnabled:
|
|
32
|
+
thumbEnabled:
|
|
33
|
+
'border-2 shadow-[--w-shadow-slider] cursor-pointer s-bg-primary s-border-primary hover:s-bg-primary-hover hover:s-border-primary-hover hover:shadow-[--w-shadow-slider-handle-hover] active:s-bg-primary-active active:s-border-primary-active active:shadow-[--w-shadow-slider-handle-active] focus:shadow-[--w-shadow-slider-handle-hover] focus:s-border-primary-hover focus:s-bg-primary-hover',
|
|
49
34
|
thumbDisabled: 's-bg-disabled cursor-disabled pointer-events-none',
|
|
50
35
|
};
|
|
51
36
|
|
|
@@ -55,15 +40,13 @@ export const box = {
|
|
|
55
40
|
info: 's-bg-info-subtle',
|
|
56
41
|
neutral: 's-surface-sunken',
|
|
57
42
|
bordered: 'border-2 s-border s-bg',
|
|
58
|
-
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)
|
|
59
|
-
neutralClickable: 'hover:s-bg-hover active:s-bg-active', // Deprecated - Remove in v2 (after removing Clickable prop in the Box components)
|
|
60
|
-
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)
|
|
61
43
|
};
|
|
62
44
|
|
|
63
45
|
export const pill = {
|
|
64
46
|
pill: 'flex items-center',
|
|
65
47
|
button: 'inline-flex items-center focusable text-xs transition-all',
|
|
66
|
-
suggestion:
|
|
48
|
+
suggestion:
|
|
49
|
+
'bg-[--w-color-pill-suggestion-background] hover:bg-[--w-color-pill-suggestion-background-hover] active:bg-[--w-color-pill-suggestion-background-active] s-text font-bold',
|
|
67
50
|
filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted',
|
|
68
51
|
label: 'pl-12 py-8 rounded-l-full',
|
|
69
52
|
labelWithoutClose: 'pr-12 rounded-r-full',
|
|
@@ -108,19 +91,18 @@ export const steps = {
|
|
|
108
91
|
export const card = {
|
|
109
92
|
card: 'cursor-pointer overflow-hidden relative transition-all',
|
|
110
93
|
cardShadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',
|
|
111
|
-
cardUnselected: '', // TODO: Remove in v2 - Not used after introducing surface
|
|
112
94
|
cardSelected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',
|
|
113
95
|
cardOutline: 'absolute border-2 rounded-8 inset-0 transition-all',
|
|
114
96
|
cardOutlineUnselected: 'border-transparent group-active:s-border-active',
|
|
115
97
|
cardOutlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active',
|
|
116
98
|
cardFlat: 'border-2 rounded-4',
|
|
117
99
|
cardFlatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',
|
|
118
|
-
cardFlatSelected:
|
|
100
|
+
cardFlatSelected:
|
|
101
|
+
's-bg-selected hover:s-bg-selected-hover active:s-bg-selected-active s-border-selected hover:s-border-selected-hover active:s-border-selected-active',
|
|
119
102
|
a11y: 'sr-only',
|
|
120
103
|
};
|
|
121
104
|
|
|
122
105
|
export const switchToggle = {
|
|
123
|
-
switch: '', // TODO: Remove this in v2
|
|
124
106
|
label: 'block relative h-24 w-44 cursor-pointer group',
|
|
125
107
|
labelDisabled: 'pointer-events-none',
|
|
126
108
|
track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',
|
|
@@ -198,9 +180,11 @@ export const expandable = {
|
|
|
198
180
|
chevronTransform: 'transform transition-transform transform-gpu ease-in-out',
|
|
199
181
|
chevronExpand: '-rotate-180',
|
|
200
182
|
chevronCollapse: 'rotate-180',
|
|
201
|
-
elementsTransformChevronDownPart:
|
|
183
|
+
elementsTransformChevronDownPart:
|
|
184
|
+
'part-[w-icon-chevron-down-16-part]:transform part-[w-icon-chevron-down-16-part]:transition-transform part-[w-icon-chevron-down-16-part]:transform-gpu part-[w-icon-chevron-down-16-part]:ease-in-out',
|
|
202
185
|
elementsChevronDownExpandPart: 'part-[w-icon-chevron-down-16-part]:-rotate-180',
|
|
203
|
-
elementsTransformChevronUpPart:
|
|
186
|
+
elementsTransformChevronUpPart:
|
|
187
|
+
'part-[w-icon-chevron-up-16-part]:transform part-[w-icon-chevron-up-16-part]:transition-transform part-[w-icon-chevron-up-16-part]:transform-gpu part-[w-icon-chevron-up-16-part]:ease-in-out',
|
|
204
188
|
elementsChevronUpCollapsePart: 'part-[w-icon-chevron-up-16-part]:rotate-180',
|
|
205
189
|
expansion: 'overflow-hidden',
|
|
206
190
|
expansionNotExpanded: 'h-0 invisible',
|
|
@@ -214,7 +198,8 @@ export const expandable = {
|
|
|
214
198
|
const buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';
|
|
215
199
|
|
|
216
200
|
const buttonColors = {
|
|
217
|
-
primary:
|
|
201
|
+
primary:
|
|
202
|
+
's-text-inverted bg-[--w-color-button-primary-background] hover:bg-[--w-color-button-primary-background-hover] active:bg-[--w-color-button-primary-background-active]',
|
|
218
203
|
secondary: 's-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active',
|
|
219
204
|
utility: 's-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',
|
|
220
205
|
destructive: 's-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active',
|
|
@@ -338,7 +323,8 @@ export const buttonGroup = {
|
|
|
338
323
|
};
|
|
339
324
|
|
|
340
325
|
export const buttonGroupItem = {
|
|
341
|
-
wrapper:
|
|
326
|
+
wrapper:
|
|
327
|
+
'relative s-text s-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',
|
|
342
328
|
outlined: 'border hover:z-30 border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',
|
|
343
329
|
outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',
|
|
344
330
|
outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',
|
|
@@ -349,15 +335,17 @@ export const buttonGroupItem = {
|
|
|
349
335
|
};
|
|
350
336
|
|
|
351
337
|
export const modal = {
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
modal:
|
|
338
|
+
backdrop:
|
|
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]',
|
|
340
|
+
modal:
|
|
341
|
+
'pb-safe-[32] shadow-m max-h-[--w-modal-max-height] min-h-[--w-modal-min-height] w-[--w-modal-width] h-[--w-modal-height] relative transition-300 ease-in-out backface-hidden will-change-height rounded-8 mx-0 sm:mx-16 bg-[--w-s-color-surface-elevated-100] flex flex-col overflow-hidden outline-none space-y-16 pt-8 sm:pt-32 sm:pb-32 rounded-b-0 sm:rounded-b-8',
|
|
355
342
|
content: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
|
|
356
343
|
footer: 'flex justify-end shrink-0 px-16 sm:px-32',
|
|
357
344
|
transitionTitle: 'transition-all duration-300',
|
|
358
345
|
transitionTitleCenter: 'justify-self-center self-center',
|
|
359
346
|
transitionTitleColSpan: 'col-span-2',
|
|
360
|
-
title:
|
|
347
|
+
title:
|
|
348
|
+
'py-8 sm:py-0 -mt-4 sm:-mt-8 min-h-40 sm:min-h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-start px-16 sm:px-32 border-b sm:border-b-0 shrink-0',
|
|
361
349
|
titleText: 'mb-0 h4 sm:h3',
|
|
362
350
|
titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
|
|
363
351
|
titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',
|
|
@@ -368,14 +356,19 @@ export const modal = {
|
|
|
368
356
|
|
|
369
357
|
export const modalElement = {
|
|
370
358
|
// several items in here are 'resets' for the <dialog> element
|
|
371
|
-
dialogEl:
|
|
372
|
-
|
|
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',
|
|
373
363
|
contentSlot: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
|
|
374
364
|
header: 'relative pb-8',
|
|
375
365
|
headerTitleBar: 'pt-16 sm:pt-24 px-16 sm:px-32 grid gap-12 grid-cols-[auto_1fr_auto] items-start shrink-0!',
|
|
376
|
-
headerButton:
|
|
377
|
-
|
|
378
|
-
|
|
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]',
|
|
379
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`,
|
|
380
373
|
headerTitle: 'mb-0 t3 self-center',
|
|
381
374
|
headerTitleWithBackButton: 'justify-self-center',
|
|
@@ -417,7 +410,8 @@ export const input = {
|
|
|
417
410
|
};
|
|
418
411
|
|
|
419
412
|
export const select = {
|
|
420
|
-
default:
|
|
413
|
+
default:
|
|
414
|
+
'block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',
|
|
421
415
|
disabled: 's-bg-disabled-subtle s-border-disabled hover:s-border-disabled! active:s-border-disabled! s-text-disabled pointer-events-none',
|
|
422
416
|
invalid: 's-border-negative hover:s-border-negative-hover! outline-[--w-s-color-border-negative]!',
|
|
423
417
|
readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',
|
|
@@ -430,19 +424,16 @@ export const select = {
|
|
|
430
424
|
export const label = {
|
|
431
425
|
label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',
|
|
432
426
|
optional: 'pl-8 font-normal text-s s-text-subtle',
|
|
433
|
-
labelInvalid: 's-text-negative', // TODO: Remove in v2 - kept for backwards compatibility
|
|
434
427
|
};
|
|
435
428
|
|
|
436
429
|
export const helpText = {
|
|
437
430
|
helpText: 'text-xs mt-4 block',
|
|
438
431
|
helpTextColor: 's-text-subtle',
|
|
439
432
|
helpTextColorInvalid: 's-text-negative',
|
|
440
|
-
// TODO: Remove below properties in v2 - kept for backwards compatibility
|
|
441
|
-
helpTextValid: 's-text-positive',
|
|
442
|
-
helpTextInvalid: 's-text-negative',
|
|
443
433
|
};
|
|
444
434
|
|
|
445
|
-
const prefixSuffixWrapperBase =
|
|
435
|
+
const prefixSuffixWrapperBase =
|
|
436
|
+
'absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ';
|
|
446
437
|
|
|
447
438
|
export const suffix = {
|
|
448
439
|
wrapper: prefixSuffixWrapperBase + 'right-0',
|
|
@@ -482,18 +473,29 @@ export const toggle = {
|
|
|
482
473
|
a11y: 'sr-only',
|
|
483
474
|
|
|
484
475
|
// label classes
|
|
485
|
-
label:
|
|
476
|
+
label:
|
|
477
|
+
'peer-focus:focusable cursor-pointer text-m s-text s-border py-2 pl-28 select-none relative block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2', // !isRadioButton
|
|
486
478
|
labelBefore: 'before:content-[""] before:block', // !isRadioButton && !isIndeterminate
|
|
487
|
-
checkbox:
|
|
488
|
-
|
|
489
|
-
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
479
|
+
checkbox:
|
|
480
|
+
'before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-primary peer-checked:before:s-bg-primary peer-checked:peer-hover:before:s-border-primary-hover peer-checked:peer-hover:before:s-bg-primary-hover', // isCheckbox && !isIndeterminate && !isInvalid && !isDisabled
|
|
481
|
+
checkboxInvalid:
|
|
482
|
+
'before:s-bg before:s-border-negative before:rounded-2 hover:before:s-bg-negative-subtle-hover hover:before:s-border-negative-hover peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-bg-negative peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover', // isCheckbox && !isIndeterminate && isInvalid && !isDisabled
|
|
483
|
+
checkboxDisabled:
|
|
484
|
+
'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-2 peer-checked:before:bg-center peer-checked:before:bg-[url(var(--w-form-check-mark))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled', // isCheckbox && !isIndeterminate && !isInvalid && isDisabled
|
|
485
|
+
indeterminate:
|
|
486
|
+
'before:content-["–"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-primary peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary-hover peer-indeterminate:hover:before:s-bg-primary-hover', // isCheckbox && isIndeterminate && !isInvalid && !isDisabled
|
|
487
|
+
indeterminateInvalid:
|
|
488
|
+
'before:content-["–"] before:rounded-2 before:leading-xs before:text-center before:font-bold before:s-icon-inverted peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-negative peer-indeterminate:hover:before:s-border-negative-hover peer-indeterminate:hover:before:s-bg-negative-hover', // isCheckbox && isIndeterminate && isInvalid && !isDisabled
|
|
489
|
+
indeterminateDisabled:
|
|
490
|
+
'before:content-["–"] before:rounded-2 before:leading-xs before:text-center before:font-bold pointer-events-none before:s-icon-inverted peer-indeterminate:before:s-border-disabled peer-indeterminate:before:s-bg-disabled', // isCheckbox && isIndeterminate && !isInvalid && isDisabled
|
|
491
|
+
radio:
|
|
492
|
+
'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:before:s-border-selected peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-hover', // isRadio && !isDisabled && !isInvalid
|
|
493
|
+
radioInvalid:
|
|
494
|
+
'before:s-bg before:s-border-negative before:rounded-full peer-checked:before:border-[6] peer-hover:before:s-bg-negative-subtle peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover', // isRadio && isInvalid && !isDisabled
|
|
495
|
+
radioDisabled:
|
|
496
|
+
'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]', // isRadio && !isInvalid && isDisabled
|
|
497
|
+
radioButtonsLabel:
|
|
498
|
+
'peer-hover:peer-not-checked:s-bg-hover peer-checked:s-text-inverted peer-checked:s-bg-primary peer-checked:s-border-primary block relative font-bold cursor-pointer s-text-link text-center s-bg border-2 s-border group-first-of-type:rounded-tl-8 group-first-of-type:rounded-bl-8 group-last-of-type:rounded-tr-8 group-last-of-type:rounded-br-8 group-not-last-of-type:border-r-0 peer-checked:z-10 group-not-first:-ml-2', // isRadioButtons
|
|
497
499
|
radioButtonsRegular: 'text-s py-8 pl-12 pr-14', // isRadioButtons && !isSmall
|
|
498
500
|
radioButtonsSmall: 'text-xs py-[5px] px-[8px]', // isRadioButtons && isSmall
|
|
499
501
|
};
|
|
@@ -529,7 +531,8 @@ export const attention = {
|
|
|
529
531
|
tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8',
|
|
530
532
|
callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8',
|
|
531
533
|
highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m translate-z-0',
|
|
532
|
-
popover:
|
|
534
|
+
popover:
|
|
535
|
+
'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300] s-text rounded-8 p-16 drop-shadow-m translate-z-0',
|
|
533
536
|
arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
|
|
534
537
|
arrowDirectionLeftStart: '-left-[8px]',
|
|
535
538
|
arrowDirectionLeft: '-left-[8px]',
|
|
@@ -552,53 +555,6 @@ export const attention = {
|
|
|
552
555
|
closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,
|
|
553
556
|
};
|
|
554
557
|
|
|
555
|
-
export const backwardsCompatibleClasses = {
|
|
556
|
-
modalBackdrop: 'z-20', // replaced by z-30 in v1.4.0
|
|
557
|
-
chevronBox: 'right-16', //removed in v1.4.0
|
|
558
|
-
chevronNonBox: 'left-8', //removed in v1.4.0
|
|
559
|
-
checkboxInvalid: '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
|
|
560
|
-
radioInvalid: '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
|
|
561
|
-
radioDisabled: '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
|
|
562
|
-
modalTitle: 'h-40 sm:h-48 items-center', // replaced by min-h-40 sm:min-h-48 items-start
|
|
563
|
-
pillClose: 'pt-4 pb-6 text-m!', //replaced by py-8
|
|
564
|
-
toggle: 'peer-disabled:before:s-bg-disabled-subtle before:bg-[url(var(--w-form-check-mark))] peer-hover:before:s-bg-primary-subtle',
|
|
565
|
-
radioButton: 'flex! py-[5px]! px-[8px]!',
|
|
566
|
-
toggleIndeterminate: 'before:content-["-"] before:flex! before:items-center before:justify-center peer-indeterminate:hover:before:s-border-primary',
|
|
567
|
-
input: 'hover:s-border-disabled! s-text-negative! hover:s-border-negative-hover! bg-transparent! border-0! pl-40',
|
|
568
|
-
removedAlertTokens: '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',
|
|
569
|
-
removedBadgeTokens: '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',
|
|
570
|
-
removedBoxTokens: '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',
|
|
571
|
-
removedBreadcrumbsTokens: 'i-text-$color-breadcrumbs-text i-text-$color-breadcrumbs-link-text i-text-$color-breadcrumbs-icon',
|
|
572
|
-
removedButtonTokens:
|
|
573
|
-
'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',
|
|
574
|
-
removedButtonGroupTokens:
|
|
575
|
-
'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',
|
|
576
|
-
removedCalloutTokens: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text',
|
|
577
|
-
removedCardTokens:
|
|
578
|
-
'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',
|
|
579
|
-
removedCheckboxTokens:
|
|
580
|
-
'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',
|
|
581
|
-
removedComboboxTokens: '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',
|
|
582
|
-
removedExpandableTokens: 'i-text-$color-expandable-icon i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover i-text-$color-expandable-title-text',
|
|
583
|
-
removedHelpTextTokens: 'i-text-$color-helptext-text i-text-$color-helptext-text-positive i-text-$color-helptext-text-negative',
|
|
584
|
-
removedInputTokens: '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',
|
|
585
|
-
removedLabelTokens: 'i-text-$color-label-text-negative i-text-$color-label-optional-text i-text-$color-label-text',
|
|
586
|
-
removedModalTokens: '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',
|
|
587
|
-
removedPageIndicatorTokens: 'bg-[--w-s-icon-disabled] i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover i-bg-$color-pageindicator-background-selected',
|
|
588
|
-
removedPillTokens: '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',
|
|
589
|
-
removedPopoverTokens: 'border-[--w-s-color-background] i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text',
|
|
590
|
-
removedRadioTokens: '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',
|
|
591
|
-
removedSelectTokens: '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',
|
|
592
|
-
removedSliderTokens: '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',
|
|
593
|
-
removedStepindicatorTokens: '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',
|
|
594
|
-
removedSwitchTokens: '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',
|
|
595
|
-
removedTabsTokens: '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',
|
|
596
|
-
removedToastTokens: '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',
|
|
597
|
-
removedTooltipTokens: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background shadow-m i-text-$color-tooltip-text i-shadow-$shadow-tooltip',
|
|
598
|
-
removedAlphaTokens: 'bg-[--w-color-badge-price-background] bg-[--w-black-alpha25]',
|
|
599
|
-
surfaceUpdates: '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',
|
|
600
|
-
};
|
|
601
|
-
|
|
602
558
|
export const pagination = {
|
|
603
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',
|
|
604
560
|
currentPage: 'block md:hidden p-8 font-bold',
|
|
@@ -9,9 +9,14 @@ export const buttons = {
|
|
|
9
9
|
'button--primary': `${button.primary} max-w-max hover:s-text-inverted`,
|
|
10
10
|
'button--cta': `${button.primary} max-w-max hover:s-text-inverted`,
|
|
11
11
|
'button--pill': `${button.pill} max-w-max`,
|
|
12
|
-
'button--utility':
|
|
13
|
-
|
|
14
|
-
'button--
|
|
15
|
-
|
|
16
|
-
'button--
|
|
12
|
+
'button--utility':
|
|
13
|
+
'px-[15px] py-[11px] font-bold text-m leading-[24] max-w-max! focusable justify-center transition-colors ease-in-out border rounded-4 s-text! hover:s-text s-bg! hover:s-bg-hover! s-border! hover:s-border-hover! active:s-border-active!',
|
|
14
|
+
'button--utility-flat':
|
|
15
|
+
'py-12 px-16 border-0 font-bold text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out s-text! bg-transparent! hover:s-bg-subtle-hover! rounded-4',
|
|
16
|
+
'button--destructive':
|
|
17
|
+
'py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out s-bg-negative s-text-inverted hover:s-text-inverted hover:s-bg-negative-hover! active:s-bg-negative-active!',
|
|
18
|
+
'button--destructive-flat':
|
|
19
|
+
'py-12 px-16 border-0 font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out bg-transparent! s-text-negative! hover:s-bg-negative-subtle-hover! active:s-bg-negative-subtle-active!',
|
|
20
|
+
'button--flat':
|
|
21
|
+
'py-12 px-16 border-0! font-bold rounded-8 text-m leading-[24] max-w-max focusable justify-center transition-colors ease-in-out bg-transparent! s-text-link! hover:s-bg-hover! active:s-bg-active!',
|
|
17
22
|
};
|