@warp-ds/css 1.7.0 → 1.7.1-next.10
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 +4 -7
- package/component-classes/index.d.ts +376 -366
- package/component-classes/index.js +104 -130
- package/component-classes/shortcuts.js +2 -2
- package/dist/components.css +1 -1
- package/dist/index.html +114 -40
- package/dist/resets.css +1 -1
- package/dist/resets.min.css +1 -1
- package/dist/tokens/blocket-se.css +1 -1
- package/dist/tokens/finn-no.css +1 -1
- package/dist/tokens/tori-fi.css +1 -1
- package/package.json +13 -13
|
@@ -21,13 +21,15 @@ export const ribbon = {
|
|
|
21
21
|
|
|
22
22
|
export const badge = {
|
|
23
23
|
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: '
|
|
24
|
+
neutral: 'bg-[--w-color-badge-neutral-background] s-text',
|
|
25
|
+
info: 'bg-[--w-color-badge-info-background] s-text',
|
|
26
|
+
positive: 'bg-[--w-color-badge-positive-background] s-text',
|
|
27
|
+
warning: 'bg-[--w-color-badge-warning-background] s-text',
|
|
28
|
+
negative: 'bg-[--w-color-badge-negative-background] s-text',
|
|
29
|
+
disabled: 's-bg-disabled s-text',
|
|
30
|
+
price: 'bg-[--w-color-badge-price-background] s-text-inverted',
|
|
31
|
+
sponsored: 'bg-[--w-color-badge-sponsored-background] s-text',
|
|
32
|
+
// Notification badge is deprecated: Do not use!
|
|
31
33
|
notification: 'i-bg-$color-badge-notification-background i-text-$color-badge-notification-text',
|
|
32
34
|
positionBase: 'absolute backdrop-blur',
|
|
33
35
|
positionTL: 'rounded-tl-0 rounded-tr-0 rounded-bl-0 top-0 left-0',
|
|
@@ -38,31 +40,24 @@ export const badge = {
|
|
|
38
40
|
|
|
39
41
|
export const slider = {
|
|
40
42
|
wrapper: 'touch-pan-y relative w-full h-44 py-2',
|
|
41
|
-
track:
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
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',
|
|
51
|
-
thumbEnabled:
|
|
52
|
-
'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',
|
|
53
|
-
thumbDisabled:
|
|
54
|
-
'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',
|
|
43
|
+
track: 'absolute i-bg-$color-slider-track-background h-4 top-20 rounded-4 w-full ',
|
|
44
|
+
trackDisabled: 'pointer-events-none i-bg-$color-slider-track-background-disabled',
|
|
45
|
+
activeTrack: 'absolute i-bg-$color-slider-track-background-active h-6 top-[19px] rounded-4',
|
|
46
|
+
activeTrackDisabled: 'i-bg-$color-slider-track-background-disabled pointer-events-none',
|
|
47
|
+
thumb: 'absolute transition-shadow w-24 h-24 bottom-10 rounded-4 outline-none',
|
|
48
|
+
thumbEnabled: 'border-2 i-shadow-$shadow-slider cursor-pointer i-bg-$color-slider-handle-background i-border-$color-slider-handle-border hover:i-bg-$color-slider-handle-background-hover hover:i-border-$color-slider-handle-border-hover hover:slider-handle-shadow-hover active:i-bg-$color-slider-handle-background-active active:i-border-$color-slider-handle-border-active active:slider-handle-shadow-active focus:slider-handle-shadow-hover focus:i-border-$color-slider-handle-border-hover focus:i-bg-$color-slider-handle-background-hover',
|
|
49
|
+
thumbDisabled: 'i-bg-$color-slider-handle-background-disabled cursor-disabled pointer-events-none',
|
|
55
50
|
};
|
|
56
51
|
|
|
57
52
|
export const box = {
|
|
58
53
|
box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable
|
|
59
54
|
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:
|
|
64
|
-
neutralClickable: 'hover:
|
|
65
|
-
borderedClickable: 'hover:
|
|
55
|
+
info: 's-bg-info-subtle',
|
|
56
|
+
neutral: 's-bg-subtle',
|
|
57
|
+
bordered: 'border-2 s-border s-bg',
|
|
58
|
+
infoClickable: 'hover:s-bg-info-subtle-hover active:s-bg-info-subtle-hover',
|
|
59
|
+
neutralClickable: 'hover:s-bg-subtle-hover active:s-bg-subtle-hover',
|
|
60
|
+
borderedClickable: 'hover:s-bg-hover active:s-bg-hover hover:s-border-hover active:s-border-hover',
|
|
66
61
|
};
|
|
67
62
|
|
|
68
63
|
export const pill = {
|
|
@@ -112,19 +107,15 @@ export const steps = {
|
|
|
112
107
|
|
|
113
108
|
export const card = {
|
|
114
109
|
card: 'cursor-pointer overflow-hidden relative transition-all',
|
|
115
|
-
cardShadow: 'rounded-8
|
|
110
|
+
cardShadow: 'rounded-8 shadow-s hover:shadow-m hover:s-bg-subtle-hover tap-highlight-transparent',
|
|
116
111
|
cardFlat: 'border-2 rounded-4',
|
|
117
|
-
cardFlatUnselected:
|
|
118
|
-
|
|
119
|
-
cardFlatSelected:
|
|
120
|
-
'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',
|
|
112
|
+
cardFlatUnselected: 's-bg s-border hover:s-bg-subtle-hover hover:s-border-hover active:s-bg-active active:s-border-active',
|
|
113
|
+
cardFlatSelected: 's-border-selected s-bg-selected hover:s-bg-selected-hover hover:s-border-selected-hover active:s-border-selected-active active:s-bg-selected-active',
|
|
121
114
|
cardUnselected: 's-bg',
|
|
122
|
-
cardSelected:
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
cardOutlineUnselected: 'i-border-$color-card-border',
|
|
127
|
-
cardOutlineSelected: 'i-border-$color-card-border-selected hover:i-border-$color-card-border-selected-hover',
|
|
115
|
+
cardSelected: 's-border-selected s-bg-selected hover:s-border-selected-hover hover:s-bg-selected-hover active:s-border-selected-active',
|
|
116
|
+
cardOutline: 'active:s-border absolute rounded-8 inset-0 transition-all border-2',
|
|
117
|
+
cardOutlineUnselected: 'border-transparent',
|
|
118
|
+
cardOutlineSelected: 's-border-selected hover:s-border-selected-hover',
|
|
128
119
|
a11y: 'sr-only',
|
|
129
120
|
};
|
|
130
121
|
|
|
@@ -144,17 +135,14 @@ export const switchToggle = {
|
|
|
144
135
|
};
|
|
145
136
|
|
|
146
137
|
export const toaster = {
|
|
147
|
-
container:
|
|
148
|
-
'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',
|
|
138
|
+
container: 'fixed transform translate-z-0 bottom-16 left-0 right-0 mx-8 sm:mx-16 z-50 pointer-events-none',
|
|
149
139
|
content: 'w-full',
|
|
150
|
-
toaster:
|
|
151
|
-
'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
|
|
140
|
+
toaster: 'grid auto-rows-auto justify-items-center justify-center mx-auto pointer-events-none',
|
|
152
141
|
};
|
|
153
142
|
|
|
154
143
|
export const toast = {
|
|
155
144
|
wrapper: 'relative overflow-hidden w-full',
|
|
156
|
-
toast:
|
|
157
|
-
'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',
|
|
145
|
+
toast: 'flex group p-8 mt-16 rounded-8 border-2 w-full pointer-events-auto transition-all',
|
|
158
146
|
positive: 'i-bg-$color-toast-positive-background i-border-$color-toast-positive-subtle-border i-text-$color-toast-positive-text',
|
|
159
147
|
warning: 'i-bg-$color-toast-warning-background i-border-$color-toast-warning-subtle-border i-text-$color-toast-warning-text',
|
|
160
148
|
negative: 'i-bg-$color-toast-negative-background i-border-$color-toast-negative-subtle-border i-text-$color-toast-negative-text',
|
|
@@ -169,10 +157,8 @@ export const toast = {
|
|
|
169
157
|
|
|
170
158
|
export const tabs = {
|
|
171
159
|
tabContainer: 'inline-grid relative',
|
|
172
|
-
wunderbar:
|
|
173
|
-
|
|
174
|
-
wrapperUnderlined:
|
|
175
|
-
'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',
|
|
160
|
+
wunderbar: 'absolute i-border-$color-tabs-border-selected -bottom-0 border-b-4 transition-all',
|
|
161
|
+
wrapperUnderlined: 'border-b i-border-$color-tabs-border -mx-16 sm:mx-0 px-4 sm:px-0 mb-32 ',
|
|
176
162
|
};
|
|
177
163
|
|
|
178
164
|
export const tab = {
|
|
@@ -198,8 +184,7 @@ export const gridLayout = {
|
|
|
198
184
|
cols9: 'grid-cols-9',
|
|
199
185
|
};
|
|
200
186
|
|
|
201
|
-
export const buttonReset =
|
|
202
|
-
'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';
|
|
187
|
+
export const buttonReset = 'focus:outline-none appearance-none cursor-pointer bg-transparent border-0 m-0 p-0 inline-block';
|
|
203
188
|
|
|
204
189
|
export const expandable = {
|
|
205
190
|
expandable: 'will-change-height',
|
|
@@ -228,17 +213,17 @@ export const expandable = {
|
|
|
228
213
|
const buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';
|
|
229
214
|
|
|
230
215
|
const buttonColors = {
|
|
231
|
-
primary: '
|
|
232
|
-
secondary: '
|
|
233
|
-
utility: '
|
|
234
|
-
destructive: '
|
|
235
|
-
pill: '
|
|
236
|
-
disabled: '
|
|
237
|
-
quiet: '
|
|
238
|
-
utilityQuiet: '
|
|
239
|
-
negativeQuiet: '
|
|
240
|
-
loading: '
|
|
241
|
-
link: '
|
|
216
|
+
primary: '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]',
|
|
217
|
+
secondary: 's-text-link s-border s-bg hover:s-bg-hover hover:s-border-hover active:s-bg-active',
|
|
218
|
+
utility: 's-text s-bg s-border hover:s-border-hover active:s-border-active',
|
|
219
|
+
destructive: 's-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active',
|
|
220
|
+
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]',
|
|
221
|
+
disabled: 's-text-inverted s-bg-disabled',
|
|
222
|
+
quiet: 'bg-transparent s-text-link hover:s-bg-hover active:s-bg-active',
|
|
223
|
+
utilityQuiet: 's-text s-bg-transparent hover:s-bg-subtle-hover',
|
|
224
|
+
negativeQuiet: 's-bg s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active',
|
|
225
|
+
loading: 's-text s-bg-subtle',
|
|
226
|
+
link: 's-text-link',
|
|
242
227
|
};
|
|
243
228
|
|
|
244
229
|
const buttonTypes = {
|
|
@@ -246,8 +231,7 @@ const buttonTypes = {
|
|
|
246
231
|
secondary: `border-2 rounded-8 ${buttonDefaultStyling}`,
|
|
247
232
|
utility: `border rounded-4 ${buttonDefaultStyling}`,
|
|
248
233
|
negative: `border-0 rounded-8 ${buttonDefaultStyling}`,
|
|
249
|
-
pill:
|
|
250
|
-
`p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
|
|
234
|
+
pill: `p-4 rounded-full border-0 inline-flex items-center justify-center hover:bg-clip-padding ${buttonDefaultStyling}`,
|
|
251
235
|
link: `bg-transparent focusable ease-in-out inline active:underline hover:underline ${buttonColors.link}`,
|
|
252
236
|
};
|
|
253
237
|
|
|
@@ -269,38 +253,28 @@ const buttonTextSizes = {
|
|
|
269
253
|
};
|
|
270
254
|
|
|
271
255
|
const buttonVariants = {
|
|
272
|
-
inProgress:
|
|
273
|
-
|
|
274
|
-
quiet:
|
|
275
|
-
`border-0 rounded-8 ${buttonDefaultStyling}`,
|
|
256
|
+
inProgress: `border-transparent animate-inprogress pointer-events-none ${buttonColors.loading}`, // .button--in-progress, a.button--in-progress:visited
|
|
257
|
+
quiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
|
|
276
258
|
utilityQuiet: `border-0 rounded-4 ${buttonDefaultStyling}`,
|
|
277
259
|
negativeQuiet: `border-0 rounded-8 ${buttonDefaultStyling}`,
|
|
278
|
-
isDisabled:
|
|
279
|
-
`font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled
|
|
260
|
+
isDisabled: `font-bold justify-center transition-colors ease-in-out cursor-default pointer-events-none ${buttonColors.disabled}`, // .button:disabled, .button--is-disabled
|
|
280
261
|
};
|
|
281
262
|
|
|
282
263
|
export const button = {
|
|
283
264
|
// Buttontypes
|
|
284
|
-
secondary:
|
|
285
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
|
|
286
|
-
|
|
287
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
|
|
288
|
-
secondaryDisabled:
|
|
289
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
|
|
265
|
+
secondary: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`, // .button--secondary, .button--default, .button
|
|
266
|
+
secondaryHref: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonColors.secondary}`,
|
|
267
|
+
secondaryDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
|
|
290
268
|
secondarySmall: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonColors.secondary}`,
|
|
291
269
|
secondarySmallDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.isDisabled}`,
|
|
292
|
-
secondaryQuiet:
|
|
293
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${
|
|
294
|
-
secondaryQuietDisabled:
|
|
295
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
|
|
270
|
+
secondaryQuiet: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonColors.quiet}`,
|
|
271
|
+
secondaryQuietDisabled: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
|
|
296
272
|
secondarySmallQuiet: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonColors.quiet}`,
|
|
297
273
|
secondarySmallQuietDisabled: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.isDisabled}`,
|
|
298
|
-
secondaryLoading:
|
|
299
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
|
|
274
|
+
secondaryLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
|
|
300
275
|
secondarySmallLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonTypes.secondary} ${buttonVariants.inProgress}`,
|
|
301
276
|
secondarySmallQuietLoading: `${buttonTextSizes.xsmall} ${buttonSizes.xsmall} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
|
|
302
|
-
secondaryQuietLoading:
|
|
303
|
-
`${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
|
|
277
|
+
secondaryQuietLoading: `${buttonSizes.medium} ${buttonTextSizes.medium} ${buttonVariants.quiet} ${buttonVariants.inProgress}`,
|
|
304
278
|
|
|
305
279
|
primary: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonTypes.primary} ${buttonColors.primary}`, // .button--primary, .button--cta
|
|
306
280
|
primaryDisabled: `${buttonSizes.large} ${buttonTextSizes.medium} ${buttonVariants.isDisabled} ${buttonTypes.primary}`,
|
|
@@ -350,44 +324,40 @@ export const button = {
|
|
|
350
324
|
linkSmall: `${buttonSizes.link} ${buttonTextSizes.xsmall} ${buttonTypes.link}`,
|
|
351
325
|
linkAsButton: 'inline-block hover:no-underline text-center',
|
|
352
326
|
a11y: 'sr-only',
|
|
353
|
-
fullWidth:
|
|
354
|
-
contentWidth:
|
|
327
|
+
fullWidth: 'w-full max-w-full',
|
|
328
|
+
contentWidth: 'max-w-max',
|
|
355
329
|
};
|
|
356
330
|
|
|
357
331
|
export const buttonGroup = {
|
|
358
332
|
wrapper: 'inline-flex rounded-4 overflow-hidden',
|
|
359
|
-
raised: '
|
|
333
|
+
raised: 'shadow-s',
|
|
360
334
|
vertical: 'flex-col',
|
|
361
335
|
nonOutlinedVertical: 'divide-y',
|
|
362
336
|
nonOutlinedHorizontal: 'divide-x',
|
|
363
337
|
};
|
|
364
338
|
|
|
365
339
|
export const buttonGroupItem = {
|
|
366
|
-
wrapper: 'relative
|
|
367
|
-
outlined: 'border hover:z-30
|
|
340
|
+
wrapper: 'relative s-text s-bg hover:bg-[--w-color-buttongroup-utility-background-hover] active:s-text active:bg-[--w-color-buttongroup-utility-background-selected]',
|
|
341
|
+
outlined: 'border hover:z-30 border-[--w-color-buttongroup-utility-border] active:border-[--w-color-buttongroup-utility-border-selected]',
|
|
368
342
|
outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',
|
|
369
343
|
outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',
|
|
370
344
|
outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',
|
|
371
345
|
outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',
|
|
372
|
-
outlinedSelected: '
|
|
373
|
-
selected: 'z-30
|
|
346
|
+
outlinedSelected: 'border-[--w-color-buttongroup-utility-border-selected]',
|
|
347
|
+
selected: 'z-30 s-text! bg-[--w-color-buttongroup-utility-background-selected]!',
|
|
374
348
|
};
|
|
375
349
|
|
|
376
350
|
export const modal = {
|
|
377
351
|
//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
|
|
378
352
|
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`,
|
|
379
|
-
backdrop:
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
'pb-safe-[32] i-shadow-$shadow-modal 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 i-bg-$color-modal-background 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',
|
|
383
|
-
content:
|
|
384
|
-
'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
|
|
353
|
+
backdrop: '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]',
|
|
354
|
+
modal: 'pb-safe-[32] i-shadow-$shadow-modal 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 i-bg-$color-modal-background 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
|
+
content: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
|
|
385
356
|
footer: 'flex justify-end shrink-0 px-16 sm:px-32',
|
|
386
357
|
transitionTitle: 'transition-all duration-300',
|
|
387
358
|
transitionTitleCenter: 'justify-self-center self-center',
|
|
388
359
|
transitionTitleColSpan: 'col-span-2',
|
|
389
|
-
title:
|
|
390
|
-
'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',
|
|
360
|
+
title: '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',
|
|
391
361
|
titleText: 'mb-0 h4 sm:h3',
|
|
392
362
|
titleButton: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} sm:min-h-[44px] sm:min-w-[44px] min-h-[32px] min-w-[32px]`,
|
|
393
363
|
titleButtonLeft: '-ml-8 sm:-ml-12 justify-self-start',
|
|
@@ -397,19 +367,19 @@ export const modal = {
|
|
|
397
367
|
};
|
|
398
368
|
|
|
399
369
|
export const alert = {
|
|
400
|
-
alert:
|
|
401
|
-
willChangeHeight:
|
|
402
|
-
textWrapper:
|
|
403
|
-
title:
|
|
404
|
-
icon:
|
|
405
|
-
negative:
|
|
406
|
-
negativeIcon:
|
|
407
|
-
positive:
|
|
408
|
-
positiveIcon:
|
|
409
|
-
warning:
|
|
410
|
-
warningIcon:
|
|
411
|
-
info:
|
|
412
|
-
infoIcon:
|
|
370
|
+
alert: 'flex p-16 border border-l-4 rounded-4 s-text',
|
|
371
|
+
willChangeHeight: 'will-change-height',
|
|
372
|
+
textWrapper: 'last-child:mb-0 text-s',
|
|
373
|
+
title: 'text-s',
|
|
374
|
+
icon: 'w-16 mr-8 min-w-16',
|
|
375
|
+
negative: 's-border-negative-subtle s-border-l-negative s-bg-negative-subtle',
|
|
376
|
+
negativeIcon: 's-icon-negative',
|
|
377
|
+
positive: 's-border-positive-subtle s-border-l-positive s-bg-positive-subtle',
|
|
378
|
+
positiveIcon: 's-icon-positive',
|
|
379
|
+
warning: 's-border-warning-subtle s-border-l-warning s-bg-warning-subtle',
|
|
380
|
+
warningIcon: 's-icon-warning',
|
|
381
|
+
info: 's-border-info-subtle s-border-l-info s-bg-info-subtle',
|
|
382
|
+
infoIcon: 's-icon-info',
|
|
413
383
|
};
|
|
414
384
|
|
|
415
385
|
export const input = {
|
|
@@ -447,8 +417,7 @@ export const helpText = {
|
|
|
447
417
|
helpTextInvalid: 'i-text-$color-helptext-text-negative',
|
|
448
418
|
};
|
|
449
419
|
|
|
450
|
-
const prefixSuffixWrapperBase =
|
|
451
|
-
'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';
|
|
420
|
+
const prefixSuffixWrapperBase = 'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';
|
|
452
421
|
|
|
453
422
|
export const suffix = {
|
|
454
423
|
wrapper: prefixSuffixWrapperBase + 'right-0',
|
|
@@ -466,9 +435,9 @@ export const prefix = {
|
|
|
466
435
|
|
|
467
436
|
export const breadcrumbs = {
|
|
468
437
|
wrapper: 'flex space-x-8',
|
|
469
|
-
text: '
|
|
470
|
-
link: '
|
|
471
|
-
separator: 'select-none
|
|
438
|
+
text: 's-text',
|
|
439
|
+
link: 's-text-link',
|
|
440
|
+
separator: 'select-none s-icon',
|
|
472
441
|
a11y: 'sr-only',
|
|
473
442
|
};
|
|
474
443
|
|
|
@@ -498,7 +467,7 @@ export const toggle = {
|
|
|
498
467
|
labelRadioBorder: 'i-border-$color-radio-border',
|
|
499
468
|
radioButtons: 'inline-flex relative font-bold rounded-8',
|
|
500
469
|
radioButtonsGroup: 'group',
|
|
501
|
-
radioButtonsLabel: 'peer-hover:peer-not-checked:
|
|
470
|
+
radioButtonsLabel: '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 text-s font-bold cursor-pointer s-text-link text-center s-bg border-2 s-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',
|
|
502
471
|
radioButtonsJustified: 'flex!',
|
|
503
472
|
radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',
|
|
504
473
|
radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',
|
|
@@ -525,22 +494,19 @@ export const combobox = {
|
|
|
525
494
|
|
|
526
495
|
export const attention = {
|
|
527
496
|
base: 'border-2 relative flex items-start',
|
|
528
|
-
tooltip:
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',
|
|
534
|
-
arrowBase:
|
|
535
|
-
'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
|
|
497
|
+
tooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background i-shadow-$shadow-tooltip i-text-$color-tooltip-text rounded-4 py-6 px-8',
|
|
498
|
+
callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8',
|
|
499
|
+
highlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8 drop-shadow-m',
|
|
500
|
+
popover: 'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text rounded-8 p-16 drop-shadow-m',
|
|
501
|
+
arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
|
|
536
502
|
arrowDirectionLeft: '-left-[8px]',
|
|
537
503
|
arrowDirectionRight: '-right-[8px]',
|
|
538
504
|
arrowDirectionBottom: '-bottom-[8px]',
|
|
539
505
|
arrowDirectionTop: '-top-[8px]',
|
|
540
506
|
arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',
|
|
541
|
-
arrowCallout: '
|
|
507
|
+
arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
|
|
542
508
|
arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',
|
|
543
|
-
arrowHighlight: '
|
|
509
|
+
arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
|
|
544
510
|
content: 'last-child:mb-0',
|
|
545
511
|
notCallout: 'absolute z-50',
|
|
546
512
|
closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,
|
|
@@ -554,7 +520,15 @@ export const backwardsCompatibleClasses = {
|
|
|
554
520
|
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
|
|
555
521
|
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
|
|
556
522
|
modalTitle: 'h-40 sm:h-48 items-center', // replaced by min-h-40 sm:min-h-48 items-start
|
|
557
|
-
pillClose: 'pt-4 pb-6 text-m!' //replaced by py-8
|
|
523
|
+
pillClose: 'pt-4 pb-6 text-m!', //replaced by py-8
|
|
524
|
+
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',
|
|
525
|
+
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',
|
|
526
|
+
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',
|
|
527
|
+
removedBreadcrumbsTokens: 'i-text-$color-breadcrumbs-text i-text-$color-breadcrumbs-link-text i-text-$color-breadcrumbs-icon',
|
|
528
|
+
removedButtonTokens: '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-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-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',
|
|
529
|
+
removedButtonGroupTokens: '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',
|
|
530
|
+
removedCalloutTokens: 'i-bg-$color-callout-background i-border-$color-callout-border i-text-$color-callout-text',
|
|
531
|
+
removedCardTokens: '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',
|
|
558
532
|
};
|
|
559
533
|
|
|
560
534
|
export const pagination = {
|
|
@@ -567,5 +541,5 @@ export const pagination = {
|
|
|
567
541
|
firstPageButton: 'md:hidden',
|
|
568
542
|
firstPageLabel: 'font-bold',
|
|
569
543
|
active: 's-bg-primary s-text-inverted',
|
|
570
|
-
defaultPage: 'hover:s-bg-primary-subtle-hover'
|
|
571
|
-
};
|
|
544
|
+
defaultPage: 'hover:s-bg-primary-subtle-hover',
|
|
545
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export const buttons = {
|
|
2
|
-
|
|
2
|
+
button: 'py-10 px-14 text-m leading-[24] border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out 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',
|
|
3
3
|
'button--secondary': 'py-10 px-14 text-m leading-[24] border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out 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',
|
|
4
4
|
'button--default': 'py-10 px-14 text-m leading-[24] border-2 rounded-8 font-bold max-w-max focusable justify-center transition-colors ease-in-out 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',
|
|
5
5
|
'button--small': 'px-16! py-6! text-xs!',
|
|
@@ -12,4 +12,4 @@ export const buttons = {
|
|
|
12
12
|
'button--destructive': '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 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!',
|
|
13
13
|
'button--destructive-flat': '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 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!',
|
|
14
14
|
'button--flat': '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 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!',
|
|
15
|
-
};
|
|
15
|
+
};
|