@warp-ds/css 2.0.0-v2.2 → 2.0.1-next.1
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/classes.js +7 -10
- package/component-classes/index.d.ts +424 -380
- package/component-classes/index.js +299 -267
- package/component-classes/shortcuts.js +20 -13
- package/dist/components.css +1 -0
- package/dist/index.html +547 -0
- package/dist/resets.css +1 -0
- package/dist/tokens/blocket-se.css +1 -0
- package/dist/tokens/dba-dk.css +1 -0
- package/dist/tokens/finn-no.css +1 -0
- package/dist/tokens/tori-fi.css +1 -0
- package/package.json +28 -25
|
@@ -1,34 +1,20 @@
|
|
|
1
1
|
export const pageIndicator = {
|
|
2
2
|
wrapper: 'flex space-x-8 p-8',
|
|
3
3
|
dot: 'h-8 w-8 rounded-full',
|
|
4
|
-
inactive: '
|
|
5
|
-
active: '
|
|
6
|
-
};
|
|
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',
|
|
4
|
+
inactive: 's-bg-disabled-subtle hover:bg-[--w-s-icon-subtle]',
|
|
5
|
+
active: 'bg-[--w-s-icon-selected]',
|
|
20
6
|
};
|
|
21
7
|
|
|
22
8
|
export const badge = {
|
|
23
9
|
base: 'py-4 px-8 border-0 rounded-4 text-xs inline-flex',
|
|
24
|
-
neutral: '
|
|
25
|
-
info: '
|
|
26
|
-
positive: '
|
|
27
|
-
warning: '
|
|
28
|
-
negative: '
|
|
29
|
-
disabled: '
|
|
30
|
-
price: '
|
|
31
|
-
|
|
10
|
+
neutral: 'bg-[--w-color-badge-neutral-background] s-text',
|
|
11
|
+
info: 'bg-[--w-color-badge-info-background] s-text',
|
|
12
|
+
positive: 'bg-[--w-color-badge-positive-background] s-text',
|
|
13
|
+
warning: 'bg-[--w-color-badge-warning-background] s-text',
|
|
14
|
+
negative: 'bg-[--w-color-badge-negative-background] s-text',
|
|
15
|
+
disabled: 's-bg-disabled s-text',
|
|
16
|
+
price: 'bg-[--w-black/70] s-text-inverted-static',
|
|
17
|
+
sponsored: 'bg-[--w-color-badge-sponsored-background] s-text',
|
|
32
18
|
positionBase: 'absolute backdrop-blur',
|
|
33
19
|
positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',
|
|
34
20
|
positionTR: 'rounded-tl-0 rounded-tr-0 rounded-br-0 top-0 right-0',
|
|
@@ -38,67 +24,61 @@ export const badge = {
|
|
|
38
24
|
|
|
39
25
|
export const slider = {
|
|
40
26
|
wrapper: 'touch-pan-y relative w-full h-44 py-2',
|
|
41
|
-
track:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
activeTrackDisabled:
|
|
48
|
-
'i-bg-$color-slider-track-background-disabled pointer-events-none',
|
|
49
|
-
thumb:
|
|
50
|
-
'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',
|
|
27
|
+
track: 'absolute s-bg-disabled-subtle h-4 top-20 rounded-4 w-full',
|
|
28
|
+
trackDisabled: 'pointer-events-none',
|
|
29
|
+
activeTrack: 'absolute h-6 top-[19px] rounded-4',
|
|
30
|
+
activeTrackEnabled: 's-bg-primary',
|
|
31
|
+
activeTrackDisabled: 's-bg-disabled pointer-events-none',
|
|
32
|
+
thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',
|
|
51
33
|
thumbEnabled:
|
|
52
|
-
'border-2
|
|
53
|
-
thumbDisabled:
|
|
54
|
-
'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',
|
|
34
|
+
'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',
|
|
35
|
+
thumbDisabled: 's-bg-disabled cursor-disabled pointer-events-none',
|
|
55
36
|
};
|
|
56
37
|
|
|
57
38
|
export const box = {
|
|
58
|
-
|
|
39
|
+
base: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable
|
|
59
40
|
bleed: '-mx-16 sm:mx-0 rounded-l-0 rounded-r-0 sm:rounded-8', // We target L and R to override the default rounded-8
|
|
60
|
-
info: '
|
|
61
|
-
neutral: '
|
|
62
|
-
bordered: 'border-2
|
|
63
|
-
infoClickable: 'hover:i-bg-$color-box-info-background-hover active:i-bg-$color-box-info-background-hover',
|
|
64
|
-
neutralClickable: 'hover:i-bg-$color-box-neutral-background-hover active:i-bg-$color-box-neutral-background-hover',
|
|
65
|
-
borderedClickable: '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',
|
|
41
|
+
info: 's-bg-info-subtle',
|
|
42
|
+
neutral: 's-surface-sunken',
|
|
43
|
+
bordered: 'border-2 s-border s-bg',
|
|
66
44
|
};
|
|
67
45
|
|
|
68
46
|
export const pill = {
|
|
69
|
-
|
|
47
|
+
wrapper: 'flex items-center',
|
|
70
48
|
button: 'inline-flex items-center focusable text-xs transition-all',
|
|
71
|
-
suggestion:
|
|
72
|
-
|
|
49
|
+
suggestion:
|
|
50
|
+
'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',
|
|
51
|
+
filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted',
|
|
73
52
|
label: 'pl-12 py-8 rounded-l-full',
|
|
74
53
|
labelWithoutClose: 'pr-12 rounded-r-full',
|
|
75
54
|
labelWithClose: 'pr-2',
|
|
76
|
-
close: 'pr-12 pl-4
|
|
55
|
+
close: 'pr-12 pl-4 py-8 rounded-r-full',
|
|
77
56
|
a11y: 'sr-only',
|
|
78
57
|
};
|
|
79
58
|
|
|
80
59
|
export const step = {
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
60
|
+
base: 'group/step',
|
|
61
|
+
vertical: 'group/stepv grid-rows-[20px_auto] grid grid-flow-col gap-x-16',
|
|
62
|
+
horizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',
|
|
63
|
+
|
|
64
|
+
alignLeft: 'grid-cols-[20px_1fr]',
|
|
65
|
+
alignRight: 'grid-cols-[1fr_20px] text-right',
|
|
66
|
+
|
|
67
|
+
dot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',
|
|
68
|
+
dotAlignRight: 'col-start-2',
|
|
69
|
+
dotHorizontal: 'row-start-2 justify-self-end',
|
|
70
|
+
dotActive: 's-border-primary s-bg-primary',
|
|
71
|
+
dotIncomplete: 's-border s-bg',
|
|
72
|
+
|
|
73
|
+
line: 'group-last/stepv:hidden transition-colors duration-300',
|
|
74
|
+
lineVertical: 'w-2 h-full justify-self-center',
|
|
75
|
+
lineAlignRight: 'col-start-2',
|
|
76
|
+
lineHorizontal: 'h-2 w-full row-start-2',
|
|
77
|
+
lineHorizontalAlignRight: 'group-last/steph:bg-transparent',
|
|
78
|
+
lineHorizontalAlignLeft: 'group-first/steph:bg-transparent',
|
|
79
|
+
|
|
80
|
+
lineIncomplete: 's-bg-disabled',
|
|
81
|
+
lineComplete: 's-bg-primary',
|
|
102
82
|
|
|
103
83
|
content: 'last:mb-0 group-last/step:last:pb-0',
|
|
104
84
|
contentVertical: 'row-span-2 pb-32',
|
|
@@ -106,82 +86,72 @@ export const step = {
|
|
|
106
86
|
};
|
|
107
87
|
|
|
108
88
|
export const steps = {
|
|
109
|
-
|
|
110
|
-
|
|
89
|
+
wrapper: 'w-full',
|
|
90
|
+
horizontal: 'flex',
|
|
111
91
|
};
|
|
112
92
|
|
|
113
93
|
export const card = {
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
'active:i-border-$color-card-flat-border absolute rounded-8 inset-0 transition-all border-2',
|
|
125
|
-
cardOutlineUnselected: 'i-border-$color-card-border',
|
|
126
|
-
cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',
|
|
94
|
+
base: 'cursor-pointer overflow-hidden relative transition-all',
|
|
95
|
+
shadow: 'group rounded-8 s-surface-elevated-200 hover:s-surface-elevated-200-hover active:s-surface-elevated-200-active',
|
|
96
|
+
selected: '!s-bg-selected !hover:s-bg-selected-hover !active:s-bg-selected-active',
|
|
97
|
+
outline: 'absolute border-2 rounded-8 inset-0 transition-all',
|
|
98
|
+
outlineUnselected: 'border-transparent group-active:s-border-active',
|
|
99
|
+
outlineSelected: 's-border-selected group-hover:s-border-selected-hover group-active:s-border-selected-active',
|
|
100
|
+
flat: 'border-2 rounded-4',
|
|
101
|
+
flatUnselected: 's-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',
|
|
102
|
+
flatSelected:
|
|
103
|
+
'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',
|
|
127
104
|
a11y: 'sr-only',
|
|
128
105
|
};
|
|
129
106
|
|
|
130
107
|
export const switchToggle = {
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
labelDisabled: 'pointer-events-none',
|
|
108
|
+
base: 'block relative h-24 w-44 cursor-pointer group focusable rounded-full',
|
|
109
|
+
disabled: 'pointer-events-none',
|
|
134
110
|
track: 'absolute top-0 left-0 h-full w-full rounded-full transition-colors',
|
|
135
|
-
trackActive: '
|
|
136
|
-
trackInactive: '
|
|
137
|
-
trackDisabled: '
|
|
111
|
+
trackActive: 's-bg-primary group-hover:s-bg-primary-hover',
|
|
112
|
+
trackInactive: 'bg-[--w-color-switch-track-background] group-hover:bg-[--w-color-switch-track-background-hover]',
|
|
113
|
+
trackDisabled: 's-bg-disabled-subtle',
|
|
138
114
|
handle: 'absolute transform-gpu h-16 w-16 top-4 left-4 rounded-full transition-transform',
|
|
139
115
|
handleSelected: 'translate-x-20',
|
|
140
|
-
handleNotDisabled: '
|
|
141
|
-
handleDisabled: '
|
|
116
|
+
handleNotDisabled: 's-bg shadow-s',
|
|
117
|
+
handleDisabled: 's-bg-disabled',
|
|
142
118
|
a11y: 'sr-only',
|
|
143
119
|
};
|
|
144
120
|
|
|
145
121
|
export const toaster = {
|
|
146
|
-
|
|
147
|
-
|
|
122
|
+
wrapper: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',
|
|
123
|
+
base: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
|
|
148
124
|
content: 'w-full',
|
|
149
|
-
toaster:
|
|
150
|
-
'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
|
|
151
125
|
};
|
|
152
126
|
|
|
153
127
|
export const toast = {
|
|
154
128
|
wrapper: 'relative overflow-hidden w-full',
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
iconNegative: 'i-text-$color-toast-negative-icon',
|
|
129
|
+
base: 'flex group p-8 mt-16 rounded-8 border-2 pointer-events-auto transition-all',
|
|
130
|
+
positive: 's-bg-positive-subtle s-border-positive-subtle s-text',
|
|
131
|
+
warning: 's-bg-warning-subtle s-border-warning-subtle s-text',
|
|
132
|
+
negative: 's-bg-negative-subtle s-border-negative-subtle s-text',
|
|
133
|
+
iconBase: 'shrink-0 rounded-full w-[16px] h-[16px] m-[8px]',
|
|
134
|
+
iconPositive: 's-icon-positive',
|
|
135
|
+
iconWarning: 's-icon-warning',
|
|
136
|
+
iconNegative: 's-icon-negative',
|
|
164
137
|
iconLoading: 'animate-bounce',
|
|
165
138
|
content: 'self-center mr-8 py-4 last-child:mb-0',
|
|
166
|
-
close: 'bg-transparent ml-auto p-[8px]
|
|
139
|
+
close: 'bg-transparent ml-auto p-[8px] s-icon hover:s-icon-hover active:s-icon-active',
|
|
167
140
|
};
|
|
168
141
|
|
|
169
142
|
export const tabs = {
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
wrapperUnderlined:
|
|
174
|
-
'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',
|
|
143
|
+
wrapper: 'inline-block border-b s-border mb-32',
|
|
144
|
+
base: 'inline-grid relative -mb-1',
|
|
145
|
+
selectionIndicator: 'absolute s-border-selected -bottom-0 border-b-4 transition-all',
|
|
175
146
|
};
|
|
176
147
|
|
|
177
148
|
export const tab = {
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
149
|
+
base: 'grid items-center font-bold gap-8 focusable antialias p-16 pb-8 border-b-4 bg-transparent border-transparent hover:s-text-link hover:s-border-primary',
|
|
150
|
+
inactive: 's-text-subtle',
|
|
151
|
+
active: 's-text-link',
|
|
152
|
+
icon: 'mx-auto',
|
|
182
153
|
content: 'flex items-center justify-center gap-8',
|
|
183
154
|
contentUnderlined: 'content-underlined', // content-underlined is a no-op that prevents a quirk in how Vue handles class bindings
|
|
184
|
-
contentUnderlinedActive: 'i-text-$color-tabs-text-selected',
|
|
185
155
|
};
|
|
186
156
|
|
|
187
157
|
// Todo: Handle dynamic classnames
|
|
@@ -197,43 +167,50 @@ export const gridLayout = {
|
|
|
197
167
|
cols9: 'grid-cols-9',
|
|
198
168
|
};
|
|
199
169
|
|
|
200
|
-
export const buttonReset =
|
|
201
|
-
'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';
|
|
170
|
+
export const buttonReset = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';
|
|
202
171
|
|
|
203
172
|
export const expandable = {
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
chevronNonBox: 'relative left-8',
|
|
210
|
-
chevronBox: 'absolute right-16',
|
|
173
|
+
wrapper: 'will-change-height s-text',
|
|
174
|
+
box: 's-surface-sunken hover:s-bg-hover active:s-bg-active py-0 px-0 group block relative break-words last-child:mb-0 rounded-8',
|
|
175
|
+
bleed: '-mx-16 rounded-l-0 rounded-r-0 sm:mx-0 sm:rounded-8',
|
|
176
|
+
chevron: 'inline-block align-middle s-icon',
|
|
177
|
+
chevronNonBox: 'ml-8',
|
|
211
178
|
chevronTransform: 'transform transition-transform transform-gpu ease-in-out',
|
|
212
179
|
chevronExpand: '-rotate-180',
|
|
213
180
|
chevronCollapse: 'rotate-180',
|
|
181
|
+
|
|
182
|
+
// These are web component specific classes, using the ::part-selector:
|
|
183
|
+
elementsChevronDownTransform:
|
|
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',
|
|
185
|
+
elementsChevronUpTransform:
|
|
186
|
+
'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',
|
|
187
|
+
elementsChevronExpand: 'part-[w-icon-chevron-down-16-part]:-rotate-180',
|
|
188
|
+
elementsChevronCollapse: 'part-[w-icon-chevron-up-16-part]:rotate-180',
|
|
189
|
+
|
|
214
190
|
expansion: 'overflow-hidden',
|
|
215
191
|
expansionNotExpanded: 'h-0 invisible',
|
|
216
|
-
button:
|
|
217
|
-
buttonBox: 'w-full text-left relative inline-flex items-center
|
|
218
|
-
|
|
219
|
-
title: 'flex justify-between items-center',
|
|
220
|
-
titleType: '
|
|
192
|
+
button: 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 hover:underline focus-visible:underline',
|
|
193
|
+
buttonBox: 'w-full text-left relative inline-flex items-center justify-between group relative break-words last-child:mb-0 p-16 rounded-8',
|
|
194
|
+
contentWithTitle: 'pt-0',
|
|
195
|
+
title: 'flex w-full justify-between items-center',
|
|
196
|
+
titleType: 't4',
|
|
221
197
|
};
|
|
222
198
|
|
|
223
199
|
const buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';
|
|
224
200
|
|
|
225
201
|
const buttonColors = {
|
|
226
|
-
primary:
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
202
|
+
primary:
|
|
203
|
+
'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]',
|
|
204
|
+
secondary: 's-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active',
|
|
205
|
+
utility: 's-text s-bg hover:s-bg-hover active:s-bg-active s-border hover:s-border-hover active:s-border-active',
|
|
206
|
+
destructive: 's-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active',
|
|
207
|
+
pill: 's-icon hover:s-icon-hover active:s-icon-active bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
|
|
208
|
+
disabled: 's-text-inverted s-bg-disabled',
|
|
209
|
+
quiet: 'bg-transparent s-text-link hover:s-bg-hover active:s-bg-active',
|
|
210
|
+
utilityQuiet: 's-text bg-transparent hover:s-bg-hover active:s-bg-active',
|
|
211
|
+
negativeQuiet: 'bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active',
|
|
212
|
+
loading: 's-text s-bg-subtle',
|
|
213
|
+
link: 's-text-link',
|
|
237
214
|
};
|
|
238
215
|
|
|
239
216
|
const buttonTypes = {
|
|
@@ -241,9 +218,8 @@ const buttonTypes = {
|
|
|
241
218
|
secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,
|
|
242
219
|
utility: `border rounded-4 ${buttonDefaultStyling}`,
|
|
243
220
|
negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
|
|
244
|
-
pill:
|
|
245
|
-
`
|
|
246
|
-
link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,
|
|
221
|
+
pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
|
|
222
|
+
link: `bg-transparent focusable ease-in-out inline active:underline hover:underline focus:underline ${buttonColors.link}`,
|
|
247
223
|
};
|
|
248
224
|
|
|
249
225
|
const buttonSizes = {
|
|
@@ -264,38 +240,28 @@ const buttonTextSizes = {
|
|
|
264
240
|
};
|
|
265
241
|
|
|
266
242
|
const buttonVariants = {
|
|
267
|
-
inProgress:
|
|
268
|
-
|
|
269
|
-
quiet:
|
|
270
|
-
`border-0 rounded-8 ${buttonDefaultStyling}`,
|
|
243
|
+
inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited
|
|
244
|
+
quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
|
|
271
245
|
utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,
|
|
272
246
|
negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
|
|
273
|
-
isDisabled:
|
|
274
|
-
`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled
|
|
247
|
+
isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled
|
|
275
248
|
};
|
|
276
249
|
|
|
277
250
|
export const button = {
|
|
278
251
|
// Buttontypes
|
|
279
|
-
secondary:
|
|
280
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
|
|
281
|
-
|
|
282
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
|
|
283
|
-
secondaryDisabled:
|
|
284
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
|
|
252
|
+
secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button
|
|
253
|
+
secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
|
|
254
|
+
secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
|
|
285
255
|
secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,
|
|
286
256
|
secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
|
|
287
|
-
secondaryQuiet:
|
|
288
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${
|
|
289
|
-
secondaryQuietDisabled:
|
|
290
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
|
|
257
|
+
secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
|
|
258
|
+
secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
|
|
291
259
|
secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
|
|
292
260
|
secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
|
|
293
|
-
secondaryLoading:
|
|
294
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
|
|
261
|
+
secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
|
|
295
262
|
secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
|
|
296
263
|
secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
|
|
297
|
-
secondaryQuietLoading:
|
|
298
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
|
|
264
|
+
secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
|
|
299
265
|
|
|
300
266
|
primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta
|
|
301
267
|
primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,
|
|
@@ -343,46 +309,45 @@ export const button = {
|
|
|
343
309
|
|
|
344
310
|
link: `${buttonSizes.link} ${buttonTextSizes.medium} ${buttonTypes.link}`,
|
|
345
311
|
linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
|
|
346
|
-
linkAsButton: 'inline-block hover:no-underline text-center',
|
|
312
|
+
linkAsButton: 'inline-block active:no-underline hover:no-underline focus:no-underline text-center',
|
|
347
313
|
a11y: 'sr-only',
|
|
348
|
-
fullWidth:
|
|
349
|
-
contentWidth:
|
|
314
|
+
fullWidth: 'w-full max-w-full',
|
|
315
|
+
contentWidth: 'max-w-max',
|
|
350
316
|
};
|
|
351
317
|
|
|
352
318
|
export const buttonGroup = {
|
|
353
319
|
wrapper: 'inline-flex rounded-4 overflow-hidden',
|
|
354
|
-
raised: '
|
|
320
|
+
raised: 'shadow-s',
|
|
355
321
|
vertical: 'flex-col',
|
|
356
322
|
nonOutlinedVertical: 'divide-y',
|
|
357
323
|
nonOutlinedHorizontal: 'divide-x',
|
|
358
324
|
};
|
|
359
325
|
|
|
360
326
|
export const buttonGroupItem = {
|
|
361
|
-
wrapper: 'relative
|
|
362
|
-
outlined: 'border hover:z-30
|
|
327
|
+
wrapper: 'relative s-text',
|
|
328
|
+
outlined: 'border hover:z-30',
|
|
363
329
|
outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',
|
|
364
330
|
outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',
|
|
365
331
|
outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',
|
|
366
332
|
outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',
|
|
367
|
-
|
|
368
|
-
|
|
333
|
+
outlinedUnselected: 'border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',
|
|
334
|
+
outlinedSelected: 'active:border-[--w-color-buttongroup-utility-border-selected]',
|
|
335
|
+
unselected:
|
|
336
|
+
's-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',
|
|
337
|
+
selected: 'z-30 bg-[--w-color-buttongroup-utility-background-selected]',
|
|
369
338
|
};
|
|
370
339
|
|
|
371
340
|
export const modal = {
|
|
372
|
-
//TODO: this class can be removed when we have the solution for opacity and we can add rgba values to the background of the backdrop
|
|
373
|
-
transparentBg: `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`,
|
|
374
341
|
backdrop:
|
|
375
|
-
'fixed inset-0 flex sm:place-content-center sm:place-items-center items-end z-
|
|
376
|
-
modal:
|
|
377
|
-
|
|
378
|
-
content:
|
|
379
|
-
'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
|
|
342
|
+
'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]',
|
|
343
|
+
base: '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',
|
|
344
|
+
content: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
|
|
380
345
|
footer: 'flex justify-end shrink-0 px-16 sm:px-32',
|
|
381
346
|
transitionTitle: 'transition-all duration-300',
|
|
382
|
-
transitionTitleCenter: 'justify-self-center',
|
|
347
|
+
transitionTitleCenter: 'justify-self-center self-center',
|
|
383
348
|
transitionTitleColSpan: 'col-span-2',
|
|
384
349
|
title:
|
|
385
|
-
'-mt-4 sm:-mt-8 h-40 sm:h-48 grid gap-8 sm:gap-16 grid-cols-[auto_1fr_auto] items-
|
|
350
|
+
'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',
|
|
386
351
|
titleText: 'mb-0 h4 sm:h3',
|
|
387
352
|
titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
|
|
388
353
|
titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',
|
|
@@ -391,152 +356,219 @@ export const modal = {
|
|
|
391
356
|
titleButtonIconRotated: 'transform rotate-90',
|
|
392
357
|
};
|
|
393
358
|
|
|
359
|
+
export const modalElement = {
|
|
360
|
+
// several items in here are 'resets' for the <dialog> element
|
|
361
|
+
dialogEl:
|
|
362
|
+
'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]',
|
|
363
|
+
dialogInner:
|
|
364
|
+
'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',
|
|
365
|
+
contentSlot: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
|
|
366
|
+
header: 'relative pb-8',
|
|
367
|
+
headerTitleBar: 'pt-16 sm:pt-24 px-16 sm:px-32 grid gap-12 grid-cols-[auto_1fr_auto] items-start shrink-0!',
|
|
368
|
+
headerButton:
|
|
369
|
+
'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',
|
|
370
|
+
headerButtonLeft:
|
|
371
|
+
'-ml-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
|
|
372
|
+
headerCloseButton:
|
|
373
|
+
'-mr-8 s-icon bg-transparent hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
|
|
374
|
+
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`,
|
|
375
|
+
headerTitle: 'mb-0 t3 self-center',
|
|
376
|
+
headerTitleWithBackButton: 'justify-self-center',
|
|
377
|
+
headerTitleWithoutBackButton: 'col-span-2',
|
|
378
|
+
headerTitleWithTopArea: 'pt-16 px-16 sm:px-32',
|
|
379
|
+
footer: 'flex justify-end shrink-0 px-16 sm:px-32 pt-24',
|
|
380
|
+
};
|
|
381
|
+
|
|
394
382
|
export const alert = {
|
|
395
|
-
|
|
396
|
-
willChangeHeight:
|
|
397
|
-
textWrapper:
|
|
398
|
-
title:
|
|
399
|
-
icon:
|
|
400
|
-
negative:
|
|
401
|
-
negativeIcon:
|
|
402
|
-
positive:
|
|
403
|
-
positiveIcon:
|
|
404
|
-
warning:
|
|
405
|
-
warningIcon:
|
|
406
|
-
info:
|
|
407
|
-
infoIcon:
|
|
383
|
+
wrapper: 'flex p-16 border border-l-4 rounded-4 s-text',
|
|
384
|
+
willChangeHeight: 'will-change-height',
|
|
385
|
+
textWrapper: 'last-child:mb-0 text-s',
|
|
386
|
+
title: 'text-s',
|
|
387
|
+
icon: 'w-16 mr-8 min-w-16',
|
|
388
|
+
negative: 's-border-negative-subtle s-border-l-negative s-bg-negative-subtle',
|
|
389
|
+
negativeIcon: 's-icon-negative',
|
|
390
|
+
positive: 's-border-positive-subtle s-border-l-positive s-bg-positive-subtle',
|
|
391
|
+
positiveIcon: 's-icon-positive',
|
|
392
|
+
warning: 's-border-warning-subtle s-border-l-warning s-bg-warning-subtle',
|
|
393
|
+
warningIcon: 's-icon-warning',
|
|
394
|
+
info: 's-border-info-subtle s-border-l-info s-bg-info-subtle',
|
|
395
|
+
infoIcon: 's-icon-info',
|
|
408
396
|
};
|
|
409
397
|
|
|
410
398
|
export const input = {
|
|
411
|
-
|
|
412
|
-
textArea: 'min-h-[42] sm:min-h-[45]',
|
|
413
|
-
disabled: 'i-bg-$color-input-background-disabled i-border-$color-input-border-disabled hover:i-border-$color-input-border-disabled! i-text-$color-input-text-disabled pointer-events-none',
|
|
414
|
-
invalid: 'i-border-$color-input-border-negative i-text-$color-input-text-negative!',
|
|
415
|
-
readOnly: 'pl-0 bg-transparent border-0 pointer-events-none i-text-$color-input-text-read-only',
|
|
416
|
-
placeholder: 'placeholder:i-text-$color-input-text-placeholder',
|
|
399
|
+
// wrapper classes
|
|
417
400
|
wrapper: 'relative',
|
|
401
|
+
// input classes
|
|
402
|
+
base: 'block text-m leading-m mb-0 px-8 py-12 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] caret-current', // true
|
|
403
|
+
default: 'border-1 s-text s-bg s-border hover:s-border-hover active:s-border-selected', // !isInvalid && !isDisabled && !isReadOnly
|
|
404
|
+
disabled: 'border-1 s-text-disabled s-bg-disabled-subtle s-border-disabled pointer-events-none', // !isInvalid && isDisabled && !isReadOnly
|
|
405
|
+
invalid: 'border-1 s-text-negative s-bg s-border-negative hover:s-border-negative-hover outline-[--w-s-color-border-negative]!', // isInvalid && !isDisabled && !isReadOnly
|
|
406
|
+
readOnly: 'pl-0 bg-transparent pointer-events-none', // !isInvalid && !isDisabled && isReadOnly
|
|
407
|
+
placeholder: 'placeholder:s-text-placeholder',
|
|
418
408
|
suffix: 'pr-40',
|
|
419
|
-
prefix: 'pl-
|
|
409
|
+
prefix: 'pl-[var(--w-prefix-width,_40px)]',
|
|
410
|
+
// textarea classes
|
|
411
|
+
textArea: 'min-h-[42] sm:min-h-[45]',
|
|
420
412
|
};
|
|
421
413
|
|
|
422
414
|
export const select = {
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
415
|
+
base: 'block text-m mb-0 py-12 pr-32 rounded-4 w-full focusable focus:[--w-outline-offset:-2px] appearance-none cursor-pointer caret-current',
|
|
416
|
+
default: 's-text s-bg pl-8 border-1 s-border hover:s-border-hover active:s-border-active',
|
|
417
|
+
disabled:
|
|
418
|
+
's-text-disabled s-bg-disabled-subtle pl-8 border-1 s-border-disabled hover:s-border-disabled active:s-border-disabled pointer-events-none',
|
|
419
|
+
invalid:
|
|
420
|
+
's-text s-bg pl-8 border-1 s-border-negative hover:s-border-negative-hover active:s-border-active outline-[--w-s-color-border-negative]!',
|
|
421
|
+
readOnly: 's-text bg-transparent pl-0 border-0 pointer-events-none before:hidden',
|
|
427
422
|
wrapper: 'relative',
|
|
428
423
|
selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,
|
|
429
|
-
chevron: 'absolute top-[30%]
|
|
424
|
+
chevron: 'block absolute top-[30%] right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer',
|
|
430
425
|
chevronDisabled: 'opacity-25',
|
|
431
426
|
};
|
|
432
427
|
|
|
433
428
|
export const label = {
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
optional: 'pl-8 font-normal text-s i-text-$color-label-optional-text',
|
|
429
|
+
base: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',
|
|
430
|
+
optional: 'pl-8 font-normal text-s s-text-subtle',
|
|
437
431
|
};
|
|
438
432
|
|
|
439
433
|
export const helpText = {
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
434
|
+
base: 'text-xs mt-4 block',
|
|
435
|
+
color: 's-text-subtle',
|
|
436
|
+
colorInvalid: 's-text-negative',
|
|
443
437
|
};
|
|
444
438
|
|
|
445
|
-
const
|
|
446
|
-
'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';
|
|
439
|
+
const prefixSuffixWrapper =
|
|
440
|
+
'absolute top-0 bottom-0 flex justify-center items-center focusable rounded-4 focus:[--w-outline-offset:-2px] bg-transparent ';
|
|
447
441
|
|
|
448
442
|
export const suffix = {
|
|
449
|
-
wrapper:
|
|
443
|
+
wrapper: prefixSuffixWrapper + 'right-0',
|
|
450
444
|
wrapperWithLabel: 'w-max pr-12',
|
|
451
445
|
wrapperWithIcon: 'w-40',
|
|
452
|
-
label: 'antialiased block relative cursor-default pb-0 font-bold text-xs
|
|
446
|
+
label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',
|
|
453
447
|
};
|
|
454
448
|
|
|
455
449
|
export const prefix = {
|
|
456
|
-
wrapper:
|
|
450
|
+
wrapper: prefixSuffixWrapper + 'left-0',
|
|
457
451
|
wrapperWithLabel: 'w-max pl-12',
|
|
458
452
|
wrapperWithIcon: 'w-40',
|
|
459
|
-
label: 'antialiased block relative cursor-default pb-0 font-bold text-xs
|
|
453
|
+
label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',
|
|
460
454
|
};
|
|
461
455
|
|
|
462
456
|
export const breadcrumbs = {
|
|
463
457
|
wrapper: 'flex space-x-8',
|
|
464
|
-
text: '
|
|
465
|
-
link: '
|
|
466
|
-
separator: 'select-none
|
|
458
|
+
text: 's-text',
|
|
459
|
+
link: 's-text-link',
|
|
460
|
+
separator: 'select-none s-icon',
|
|
467
461
|
a11y: 'sr-only',
|
|
468
462
|
};
|
|
469
463
|
|
|
470
464
|
export const toggle = {
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
465
|
+
// wrapper classes
|
|
466
|
+
field: 'relative text-m', // true
|
|
467
|
+
wrapper: 'relative py-1', // true
|
|
468
|
+
wrapperRadioButtons: 'inline-flex font-bold rounded-8 focus-within:focusable', // isRadioButton && !isEqualWidth
|
|
469
|
+
wrapperRadioButtonsJustified: 'flex font-bold rounded-8 focus-within:focusable', // isRadioButton && isEqualWidth,
|
|
470
|
+
|
|
471
|
+
// group classes
|
|
472
|
+
radioButtonsGroup: 'group', // isRadioButton
|
|
473
|
+
radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto', // isRadioButton && isEqualWidth
|
|
474
|
+
|
|
475
|
+
// input classes
|
|
474
476
|
input: 'peer',
|
|
475
|
-
deadToggleInput: 'hidden',
|
|
476
|
-
inputDisabled: 'pointer-events-none',
|
|
477
|
-
focusable: 'peer-focus:focusable',
|
|
478
|
-
focusableWithin: 'focus-within:focusable',
|
|
479
|
-
label: 'cursor-pointer text-m i-text-$color-label-text py-2 pl-28 select-none relative block before:block before:border before:absolute before:transition-all before:left-0 before:w-20 before:h-20 before:top-2',
|
|
480
|
-
deadToggleLabel: '-mt-2',
|
|
481
|
-
noContent: `before:content-[""]`,
|
|
482
|
-
indeterminate: `before:flex! before:items-center before:justify-center before:i-text-$color-checkbox-icon before:text-center before:font-bold before:content-["-"] peer-indeterminate:before:i-border-$color-checkbox-border-selected peer-indeterminate:before:i-bg-$color-checkbox-background-selected peer-indeterminate:hover:before:i-border-$color-checkbox-border-hover peer-indeterminate:hover:before:i-bg-$color-checkbox-background-selected-hover`,
|
|
483
|
-
labelDisabled: 'pointer-events-none',
|
|
484
|
-
checkbox: 'before:rounded-2 hover:before:i-border-$color-checkbox-border-hover hover:before:i-bg-$color-checkbox-background-hover',
|
|
485
|
-
checkboxChecked: 'peer-checked:before:i-border-$color-checkbox-border-selected peer-checked:before:i-bg-$color-checkbox-background-selected peer-checked:peer-hover:before:i-border-$color-checkbox-border-selected-hover peer-checked:peer-hover:before:i-bg-$color-checkbox-background-selected-hover',
|
|
486
|
-
checkboxInvalid: 'before:i-bg-$color-checkbox-negative-background hover:before:i-bg-$color-checkbox-negative-background-hover peer-checked:before:i-border-$color-checkbox-negative-border-selected hover:before:i-border-$color-checkbox-negative-border-hover peer-checked:before:i-bg-$color-checkbox-negative-background-selected peer-checked:peer-hover:before:i-bg-$color-checkbox-negative-background-selected-hover peer-checked:peer-hover:before:i-border-$color-checkbox-negative-border-selected-hover',
|
|
487
|
-
checkboxDisabled: 'before:i-bg-$color-checkbox-background-disabled before:i-border-$color-checkbox-border-disabled peer-checked:before:i-border-$color-checkbox-border-selected-disabled peer-checked:before:i-bg-$color-checkbox-background-selected-disabled',
|
|
488
|
-
labelCheckboxBorder: 'i-border-$color-checkbox-border',
|
|
489
|
-
radio: 'before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-hover:before:i-border-$color-radio-border-hover peer-hover:before:i-bg-$color-radio-background-hover',
|
|
490
|
-
radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',
|
|
491
|
-
radioInvalid: 'before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover 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-selected peer-checked:peer-hover:before:i-border-$color-radio-negative-border-selected-hover ',
|
|
492
|
-
radioDisabled: 'before:i-bg-$color-radio-background-disabled before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-selected-disabled',
|
|
493
|
-
labelRadioBorder: 'i-border-$color-radio-border',
|
|
494
|
-
radioButtons: 'inline-flex relative font-bold rounded-8',
|
|
495
|
-
radioButtonsGroup: 'group',
|
|
496
|
-
radioButtonsLabel: '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 block relative text-s font-bold cursor-pointer i-text-$color-buttongroup-primary-text text-center i-bg-$color-buttongroup-primary-background border-2 i-border-$color-buttongroup-primary-border py-8 pl-12 pr-14 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',
|
|
497
|
-
radioButtonsJustified: 'flex!',
|
|
498
|
-
radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',
|
|
499
|
-
radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',
|
|
500
|
-
icon: `peer-checked:before:bg-center before:bg-[url(var(--w-form-check-mark))]`,
|
|
501
477
|
a11y: 'sr-only',
|
|
478
|
+
|
|
479
|
+
// label classes
|
|
480
|
+
label:
|
|
481
|
+
'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
|
|
482
|
+
labelBefore: 'before:content-[""] before:block', // !isRadioButton && !isIndeterminate
|
|
483
|
+
checkbox:
|
|
484
|
+
'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-icon-toggle-checked))] 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
|
|
485
|
+
checkboxInvalid:
|
|
486
|
+
'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-icon-toggle-checked))] 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
|
|
487
|
+
checkboxDisabled:
|
|
488
|
+
'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-icon-toggle-checked))] peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled', // isCheckbox && !isIndeterminate && !isInvalid && isDisabled
|
|
489
|
+
indeterminate:
|
|
490
|
+
'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
|
|
491
|
+
indeterminateInvalid:
|
|
492
|
+
'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
|
|
493
|
+
indeterminateDisabled:
|
|
494
|
+
'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
|
|
495
|
+
radio:
|
|
496
|
+
'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
|
|
497
|
+
radioInvalid:
|
|
498
|
+
'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
|
|
499
|
+
radioDisabled:
|
|
500
|
+
'before:s-bg-disabled-subtle before:s-border-disabled pointer-events-none before:rounded-full peer-checked:before:border-[6]', // isRadio && !isInvalid && isDisabled
|
|
501
|
+
radioButtonsLabel:
|
|
502
|
+
'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
|
|
503
|
+
radioButtonsRegular: 'text-s py-8 pl-12 pr-14', // isRadioButtons && !isSmall
|
|
504
|
+
radioButtonsSmall: 'text-xs py-[5px] px-[8px]', // isRadioButtons && isSmall
|
|
505
|
+
};
|
|
506
|
+
|
|
507
|
+
export const deadToggle = {
|
|
508
|
+
wrapper: `${toggle.wrapper} h-20 w-20 pointer-events-none`,
|
|
509
|
+
input: `${toggle.input} hidden`,
|
|
510
|
+
inputVue: 'hidden',
|
|
511
|
+
labelVue: '-mt-2',
|
|
512
|
+
labelRadio: `${toggle.label} ${toggle.labelBefore} ${toggle.radio}`,
|
|
513
|
+
labelCheckbox: `${toggle.label} ${toggle.labelBefore} ${toggle.checkbox}`,
|
|
502
514
|
};
|
|
503
515
|
|
|
504
516
|
export const clickable = {
|
|
505
517
|
toggle: 'absolute inset-0 h-full w-full appearance-none cursor-pointer focusable focusable-inset',
|
|
506
|
-
label:
|
|
518
|
+
label: 'antialiased block relative text-s font-bold s-text px-12 py-8 cursor-pointer focusable focusable-inset',
|
|
507
519
|
buttonOrLink: 'bg-transparent focusable',
|
|
508
520
|
buttonOrLinkStretch: 'inset-0 absolute',
|
|
509
521
|
};
|
|
510
522
|
|
|
511
523
|
export const combobox = {
|
|
512
524
|
wrapper: 'relative',
|
|
513
|
-
|
|
514
|
-
textMatch: 'font-bold',
|
|
525
|
+
base: 'absolute left-0 right-0 s-bg pb-4 rounded-8 overflow-hidden shadow-m',
|
|
515
526
|
listbox: 'm-0 p-0 select-none list-none',
|
|
516
|
-
option: 'block cursor-pointer p-8
|
|
517
|
-
|
|
527
|
+
option: 'block cursor-pointer p-8',
|
|
528
|
+
optionUnselected: 'hover:s-bg-hover',
|
|
529
|
+
optionSelected: 's-bg-selected hover:s-bg-selected-hover',
|
|
530
|
+
textMatch: 'font-bold',
|
|
518
531
|
a11y: 'sr-only',
|
|
519
532
|
};
|
|
520
533
|
|
|
521
534
|
export const attention = {
|
|
522
535
|
base: 'border-2 relative flex items-start',
|
|
523
|
-
tooltip:
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
highlight: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text py-8 px-16 rounded-8 drop-shadow-m',
|
|
536
|
+
tooltip: 's-bg-inverted border-[--w-s-color-background-inverted] shadow-m s-text-inverted-static rounded-4 py-6 px-8',
|
|
537
|
+
callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8',
|
|
538
|
+
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',
|
|
527
539
|
popover:
|
|
528
|
-
'
|
|
529
|
-
|
|
530
|
-
|
|
540
|
+
'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',
|
|
541
|
+
|
|
542
|
+
arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
|
|
543
|
+
arrowDirectionLeftStart: '-left-[8px]',
|
|
531
544
|
arrowDirectionLeft: '-left-[8px]',
|
|
545
|
+
arrowDirectionLeftEnd: '-left-[8px]',
|
|
546
|
+
arrowDirectionRightStart: '-right-[8px]',
|
|
532
547
|
arrowDirectionRight: '-right-[8px]',
|
|
548
|
+
arrowDirectionRightEnd: '-right-[8px]',
|
|
549
|
+
arrowDirectionBottomStart: '-bottom-[8px]',
|
|
533
550
|
arrowDirectionBottom: '-bottom-[8px]',
|
|
551
|
+
arrowDirectionBottomEnd: '-bottom-[8px]',
|
|
552
|
+
arrowDirectionTopStart: '-top-[8px]',
|
|
534
553
|
arrowDirectionTop: '-top-[8px]',
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
554
|
+
arrowDirectionTopEnd: '-top-[8px]',
|
|
555
|
+
arrowTooltip: 's-bg-inverted border-[--w-s-color-background-inverted]',
|
|
556
|
+
arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
|
|
557
|
+
arrowPopover: 'bg-[--w-s-color-surface-elevated-300] border-[--w-s-color-surface-elevated-300]',
|
|
558
|
+
arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
|
|
559
|
+
|
|
539
560
|
content: 'last-child:mb-0',
|
|
540
561
|
notCallout: 'absolute z-50',
|
|
541
562
|
closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,
|
|
542
|
-
};
|
|
563
|
+
};
|
|
564
|
+
|
|
565
|
+
export const pagination = {
|
|
566
|
+
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',
|
|
567
|
+
currentPage: 'block md:hidden p-8 font-bold',
|
|
568
|
+
icon: 's-icon hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
|
|
569
|
+
containerNav: 'flex items-center justify-center p-8',
|
|
570
|
+
a11y: 'sr-only',
|
|
571
|
+
pages: 'hidden md:block s-text-link',
|
|
572
|
+
active: 's-bg-primary s-text-inverted',
|
|
573
|
+
notActive: 'hover:bg-[--w-color-button-pill-background-hover] active:bg-[--w-color-button-pill-background-active]',
|
|
574
|
+
};
|