@warp-ds/css 1.7.1-next.2 → 1.7.1-next.21
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 +15 -0
- package/component-classes/index.js +93 -78
- package/dist/components.css +1 -1
- package/dist/index.html +109 -9
- 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 +1 -1
|
@@ -495,7 +495,22 @@ export namespace backwardsCompatibleClasses {
|
|
|
495
495
|
export { radioDisabled_1 as radioDisabled };
|
|
496
496
|
export let modalTitle: string;
|
|
497
497
|
export let pillClose: string;
|
|
498
|
+
export let removedAlertTokens: string;
|
|
498
499
|
export let removedBadgeTokens: string;
|
|
500
|
+
export let removedBoxTokens: string;
|
|
501
|
+
export let removedBreadcrumbsTokens: string;
|
|
502
|
+
export let removedButtonTokens: string;
|
|
503
|
+
export let removedButtonGroupTokens: string;
|
|
504
|
+
export let removedCalloutTokens: string;
|
|
505
|
+
export let removedCardTokens: string;
|
|
506
|
+
export let removedCheckboxTokens: string;
|
|
507
|
+
export let removedComboboxTokens: string;
|
|
508
|
+
export let removedExpandableTokens: string;
|
|
509
|
+
export let removedHelpTextTokens: string;
|
|
510
|
+
export let removedInputTokens: string;
|
|
511
|
+
export let removedLabelTokens: string;
|
|
512
|
+
export let removedModalTokens: string;
|
|
513
|
+
export let removedPageIndicatorTokens: string;
|
|
499
514
|
}
|
|
500
515
|
export namespace pagination {
|
|
501
516
|
export let currentPage: string;
|
|
@@ -1,8 +1,8 @@
|
|
|
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: '
|
|
4
|
+
inactive: 'bg-[--w-s-icon-disabled] hover:bg-[--w-s-icon-subtle]',
|
|
5
|
+
active: 'bg-[--w-s-icon-selected]',
|
|
6
6
|
};
|
|
7
7
|
|
|
8
8
|
// Deprecated: Use Badge component
|
|
@@ -52,12 +52,12 @@ export const slider = {
|
|
|
52
52
|
export const box = {
|
|
53
53
|
box: 'group block relative break-words last-child:mb-0 p-16 rounded-8', // Relative here enables w-clickable
|
|
54
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
|
|
55
|
-
info: '
|
|
56
|
-
neutral: '
|
|
57
|
-
bordered: 'border-2
|
|
58
|
-
infoClickable: 'hover:
|
|
59
|
-
neutralClickable: 'hover:
|
|
60
|
-
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',
|
|
61
61
|
};
|
|
62
62
|
|
|
63
63
|
export const pill = {
|
|
@@ -107,15 +107,15 @@ export const steps = {
|
|
|
107
107
|
|
|
108
108
|
export const card = {
|
|
109
109
|
card: 'cursor-pointer overflow-hidden relative transition-all',
|
|
110
|
-
cardShadow: 'rounded-8
|
|
110
|
+
cardShadow: 'rounded-8 shadow-s hover:shadow-m hover:s-bg-subtle-hover tap-highlight-transparent',
|
|
111
111
|
cardFlat: 'border-2 rounded-4',
|
|
112
|
-
cardFlatUnselected: '
|
|
113
|
-
cardFlatSelected: '
|
|
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',
|
|
114
114
|
cardUnselected: 's-bg',
|
|
115
|
-
cardSelected: '
|
|
116
|
-
cardOutline: 'active:
|
|
117
|
-
cardOutlineUnselected: '
|
|
118
|
-
cardOutlineSelected: '
|
|
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',
|
|
119
119
|
a11y: 'sr-only',
|
|
120
120
|
};
|
|
121
121
|
|
|
@@ -188,10 +188,10 @@ export const buttonReset = 'focus:outline-none appearance-none cursor-pointer bg
|
|
|
188
188
|
|
|
189
189
|
export const expandable = {
|
|
190
190
|
expandable: 'will-change-height',
|
|
191
|
-
expandableTitle: 'font-bold
|
|
192
|
-
expandableBox: '
|
|
191
|
+
expandableTitle: 'font-bold s-text',
|
|
192
|
+
expandableBox: 's-bg-subtle hover:s-bg-subtle-hover py-0 px-0 ' + box.box,
|
|
193
193
|
expandableBleed: box.bleed,
|
|
194
|
-
chevron: 'inline-block align-middle
|
|
194
|
+
chevron: 'inline-block align-middle s-icon',
|
|
195
195
|
chevronNonBox: 'ml-8',
|
|
196
196
|
chevronBox: '',
|
|
197
197
|
chevronTransform: 'transform transition-transform transform-gpu ease-in-out',
|
|
@@ -213,17 +213,17 @@ export const expandable = {
|
|
|
213
213
|
const buttonDefaultStyling = 'font-bold focusable justify-center transition-colors ease-in-out';
|
|
214
214
|
|
|
215
215
|
const buttonColors = {
|
|
216
|
-
primary: '
|
|
217
|
-
secondary: '
|
|
218
|
-
utility: '
|
|
219
|
-
destructive: '
|
|
220
|
-
pill: '
|
|
221
|
-
disabled: '
|
|
222
|
-
quiet: '
|
|
223
|
-
utilityQuiet: '
|
|
224
|
-
negativeQuiet: '
|
|
225
|
-
loading: '
|
|
226
|
-
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',
|
|
227
227
|
};
|
|
228
228
|
|
|
229
229
|
const buttonTypes = {
|
|
@@ -330,28 +330,28 @@ export const button = {
|
|
|
330
330
|
|
|
331
331
|
export const buttonGroup = {
|
|
332
332
|
wrapper: 'inline-flex rounded-4 overflow-hidden',
|
|
333
|
-
raised: '
|
|
333
|
+
raised: 'shadow-s',
|
|
334
334
|
vertical: 'flex-col',
|
|
335
335
|
nonOutlinedVertical: 'divide-y',
|
|
336
336
|
nonOutlinedHorizontal: 'divide-x',
|
|
337
337
|
};
|
|
338
338
|
|
|
339
339
|
export const buttonGroupItem = {
|
|
340
|
-
wrapper: 'relative
|
|
341
|
-
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]',
|
|
342
342
|
outlinedVertical: '-mb-1 last:mb-0 first:rounded-lt-4 first:rounded-rt-4 last:rounded-lb-4 last:rounded-rb-4',
|
|
343
343
|
outlinedHorizontal: '-mr-1 last:mr-0 first:rounded-lt-4 first:rounded-lb-4 last:rounded-rt-4 last:rounded-rb-4',
|
|
344
344
|
outlinedVerticalResets: 'px-1 pt-1 last:pb-1 -mb-1 last:mb-0',
|
|
345
345
|
outlinedHorizontalResets: 'py-1 pl-1 last:pr-1 -mr-1 last:mr-0',
|
|
346
|
-
outlinedSelected: '
|
|
347
|
-
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]!',
|
|
348
348
|
};
|
|
349
349
|
|
|
350
350
|
export const modal = {
|
|
351
|
-
//TODO:
|
|
352
|
-
transparentBg:
|
|
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]
|
|
351
|
+
//TODO: transparentBg can be removed when it has been removed in React and Vue - previously used for opacity before changing to a rgba background in backdrop
|
|
352
|
+
transparentBg: '',
|
|
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] bg-[--w-black-alpha25]',
|
|
354
|
+
modal: '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 s-bg 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
355
|
content: 'block overflow-y-auto overflow-x-hidden last-child:mb-0 grow shrink px-16 sm:px-32 relative',
|
|
356
356
|
footer: 'flex justify-end shrink-0 px-16 sm:px-32',
|
|
357
357
|
transitionTitle: 'transition-all duration-300',
|
|
@@ -367,28 +367,28 @@ export const modal = {
|
|
|
367
367
|
};
|
|
368
368
|
|
|
369
369
|
export const alert = {
|
|
370
|
-
alert: 'flex p-16 border border-l-4 rounded-4',
|
|
370
|
+
alert: 'flex p-16 border border-l-4 rounded-4 s-text',
|
|
371
371
|
willChangeHeight: 'will-change-height',
|
|
372
372
|
textWrapper: 'last-child:mb-0 text-s',
|
|
373
373
|
title: 'text-s',
|
|
374
374
|
icon: 'w-16 mr-8 min-w-16',
|
|
375
|
-
negative: '
|
|
376
|
-
negativeIcon: '
|
|
377
|
-
positive: '
|
|
378
|
-
positiveIcon: '
|
|
379
|
-
warning: '
|
|
380
|
-
warningIcon: '
|
|
381
|
-
info: '
|
|
382
|
-
infoIcon: '
|
|
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',
|
|
383
383
|
};
|
|
384
384
|
|
|
385
385
|
export const input = {
|
|
386
|
-
default: 'block text-m mb-0 leading-m
|
|
386
|
+
default: 'block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-selected rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] caret-current',
|
|
387
387
|
textArea: 'min-h-[42] sm:min-h-[45]',
|
|
388
|
-
disabled: '
|
|
389
|
-
invalid: '
|
|
390
|
-
readOnly: 'pl-0 bg-transparent border-0 pointer-events-none
|
|
391
|
-
placeholder: 'placeholder:
|
|
388
|
+
disabled: 's-bg-disabled-subtle s-border-disabled hover:s-border-disabled! s-text-disabled pointer-events-none',
|
|
389
|
+
invalid: 's-border-negative s-text-negative!',
|
|
390
|
+
readOnly: 'pl-0 bg-transparent border-0 pointer-events-none s-text',
|
|
391
|
+
placeholder: 'placeholder:s-text-placeholder',
|
|
392
392
|
wrapper: 'relative',
|
|
393
393
|
suffix: 'pr-40',
|
|
394
394
|
prefix: 'pl-40',
|
|
@@ -406,15 +406,15 @@ export const select = {
|
|
|
406
406
|
};
|
|
407
407
|
|
|
408
408
|
export const label = {
|
|
409
|
-
label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer
|
|
410
|
-
labelInvalid: '
|
|
411
|
-
optional: 'pl-8 font-normal text-s
|
|
409
|
+
label: 'antialiased block relative text-s font-bold pb-4 cursor-pointer s-text',
|
|
410
|
+
labelInvalid: 's-text-negative',
|
|
411
|
+
optional: 'pl-8 font-normal text-s s-text',
|
|
412
412
|
};
|
|
413
413
|
|
|
414
414
|
export const helpText = {
|
|
415
|
-
helpText: 'text-xs mt-4 block
|
|
416
|
-
helpTextValid: '
|
|
417
|
-
helpTextInvalid: '
|
|
415
|
+
helpText: 'text-xs mt-4 block s-text-subtle',
|
|
416
|
+
helpTextValid: 's-text-positive',
|
|
417
|
+
helpTextInvalid: 's-text-negative',
|
|
418
418
|
};
|
|
419
419
|
|
|
420
420
|
const prefixSuffixWrapperBase = 'absolute top-0 bottom-0 flex justify-center items-center focusable focus:[--w-outline-offset:-2px] bg-transparent ';
|
|
@@ -423,21 +423,21 @@ export const suffix = {
|
|
|
423
423
|
wrapper: prefixSuffixWrapperBase + 'right-0',
|
|
424
424
|
wrapperWithLabel: 'w-max pr-12',
|
|
425
425
|
wrapperWithIcon: 'w-40',
|
|
426
|
-
label: 'antialiased block relative cursor-default pb-0 font-bold text-xs
|
|
426
|
+
label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',
|
|
427
427
|
};
|
|
428
428
|
|
|
429
429
|
export const prefix = {
|
|
430
430
|
wrapper: prefixSuffixWrapperBase + 'left-0',
|
|
431
431
|
wrapperWithLabel: 'w-max pl-12',
|
|
432
432
|
wrapperWithIcon: 'w-40',
|
|
433
|
-
label: 'antialiased block relative cursor-default pb-0 font-bold text-xs
|
|
433
|
+
label: 'antialiased block relative cursor-default pb-0 font-bold text-xs s-text',
|
|
434
434
|
};
|
|
435
435
|
|
|
436
436
|
export const breadcrumbs = {
|
|
437
437
|
wrapper: 'flex space-x-8',
|
|
438
|
-
text: '
|
|
439
|
-
link: '
|
|
440
|
-
separator: 'select-none
|
|
438
|
+
text: 's-text',
|
|
439
|
+
link: 's-text-link',
|
|
440
|
+
separator: 'select-none s-icon',
|
|
441
441
|
a11y: 'sr-only',
|
|
442
442
|
};
|
|
443
443
|
|
|
@@ -450,16 +450,16 @@ export const toggle = {
|
|
|
450
450
|
inputDisabled: 'pointer-events-none',
|
|
451
451
|
focusable: 'peer-focus:focusable',
|
|
452
452
|
focusableWithin: 'focus-within:focusable',
|
|
453
|
-
label: 'cursor-pointer text-m
|
|
453
|
+
label: 'cursor-pointer text-m s-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',
|
|
454
454
|
deadToggleLabel: '-mt-2',
|
|
455
455
|
noContent: `before:content-[""]`,
|
|
456
|
-
indeterminate: `before:flex! before:items-center before:justify-center before:
|
|
456
|
+
indeterminate: `before:flex! before:items-center before:justify-center before:s-icon-inverted before:text-center before:font-bold before:content-["-"] peer-indeterminate:before:s-border-negative peer-indeterminate:before:s-bg-primary peer-indeterminate:hover:before:s-border-primary peer-indeterminate:hover:before:s-bg-primary-hover`,
|
|
457
457
|
labelDisabled: 'pointer-events-none',
|
|
458
|
-
checkbox: 'before:s-bg before:rounded-2 hover:before:
|
|
459
|
-
checkboxChecked: 'peer-checked:before:
|
|
460
|
-
checkboxInvalid: 'before:
|
|
461
|
-
checkboxDisabled: 'peer-disabled:before:
|
|
462
|
-
labelCheckboxBorder: '
|
|
458
|
+
checkbox: 'before:s-bg before:rounded-2 hover:before:s-border-primary hover:before:s-bg-subtle',
|
|
459
|
+
checkboxChecked: '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',
|
|
460
|
+
checkboxInvalid: 'before:s-bg hover:before:s-bg-negative-subtle-hover peer-checked:before:s-border-negative hover:before:s-border-negative-hover peer-checked:before:s-bg-negative peer-checked:peer-hover:before:s-bg-negative-hover peer-checked:peer-hover:before:s-border-negative-hover',
|
|
461
|
+
checkboxDisabled: 'peer-disabled:before:s-bg-disabled-subtle before:s-border-disabled peer-checked:before:s-border-disabled peer-checked:before:s-bg-disabled',
|
|
462
|
+
labelCheckboxBorder: 's-border-negative',
|
|
463
463
|
radio: 'before:s-bg 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',
|
|
464
464
|
radioChecked: 'peer-checked:before:i-border-$color-radio-border-selected',
|
|
465
465
|
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 peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover ',
|
|
@@ -467,7 +467,7 @@ export const toggle = {
|
|
|
467
467
|
labelRadioBorder: 'i-border-$color-radio-border',
|
|
468
468
|
radioButtons: 'inline-flex relative font-bold rounded-8',
|
|
469
469
|
radioButtonsGroup: 'group',
|
|
470
|
-
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',
|
|
471
471
|
radioButtonsJustified: 'flex!',
|
|
472
472
|
radioButtonsGroupJustified: 'grow-1 shrink-0 basis-auto',
|
|
473
473
|
radioButtonsLabelSmall: 'text-xs py-[5px]! px-[8px]!',
|
|
@@ -484,19 +484,19 @@ export const clickable = {
|
|
|
484
484
|
|
|
485
485
|
export const combobox = {
|
|
486
486
|
wrapper: 'relative',
|
|
487
|
-
combobox: 'absolute left-0 right-0 pb-8 rounded-8
|
|
487
|
+
combobox: 'absolute left-0 right-0 pb-8 rounded-8 s-bg shadow-m',
|
|
488
488
|
textMatch: 'font-bold',
|
|
489
489
|
listbox: 'm-0 p-0 select-none list-none',
|
|
490
|
-
option: 'block cursor-pointer p-8 hover:
|
|
491
|
-
optionSelected: '
|
|
490
|
+
option: 'block cursor-pointer p-8 hover:s-bg-hover',
|
|
491
|
+
optionSelected: 's-bg-selected hover:s-bg-selected-hover',
|
|
492
492
|
a11y: 'sr-only',
|
|
493
493
|
};
|
|
494
494
|
|
|
495
495
|
export const attention = {
|
|
496
496
|
base: 'border-2 relative flex items-start',
|
|
497
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: '
|
|
499
|
-
highlight: '
|
|
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
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
501
|
arrowBase: 'absolute h-[14px] w-[14px] border-2 border-b-0 border-r-0 rounded-tl-4 transform',
|
|
502
502
|
arrowDirectionLeft: '-left-[8px]',
|
|
@@ -504,9 +504,9 @@ export const attention = {
|
|
|
504
504
|
arrowDirectionBottom: '-bottom-[8px]',
|
|
505
505
|
arrowDirectionTop: '-top-[8px]',
|
|
506
506
|
arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',
|
|
507
|
-
arrowCallout: '
|
|
507
|
+
arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
|
|
508
508
|
arrowPopover: 'i-bg-$color-popover-background i-border-$color-popover-background',
|
|
509
|
-
arrowHighlight: '
|
|
509
|
+
arrowHighlight: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
|
|
510
510
|
content: 'last-child:mb-0',
|
|
511
511
|
notCallout: 'absolute z-50',
|
|
512
512
|
closeBtn: `${buttonTextSizes.medium} ${buttonTypes.pill} ${buttonColors.pill} justify-self-end -mr-8 ml-8`,
|
|
@@ -521,7 +521,22 @@ export const backwardsCompatibleClasses = {
|
|
|
521
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
|
|
522
522
|
modalTitle: 'h-40 sm:h-48 items-center', // replaced by min-h-40 sm:min-h-48 items-start
|
|
523
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',
|
|
524
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',
|
|
532
|
+
removedCheckboxTokens: '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',
|
|
533
|
+
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',
|
|
534
|
+
removedExpandableTokens: 'i-text-$color-expandable-icon i-bg-$color-expandable-background hover:i-bg-$color-expandable-background-hover i-text-$color-expandable-title-text',
|
|
535
|
+
removedHelpTextTokens: 'i-text-$color-helptext-text i-text-$color-helptext-text-positive i-text-$color-helptext-text-negative',
|
|
536
|
+
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',
|
|
537
|
+
removedLabelTokens: 'i-text-$color-label-text-negative i-text-$color-label-optional-text i-text-$color-label-text',
|
|
538
|
+
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',
|
|
539
|
+
removedPageIndicatorTokens: 'i-bg-$color-pageindicator-background hover:i-bg-$color-pageindicator-background-hover i-bg-$color-pageindicator-background-selected',
|
|
525
540
|
};
|
|
526
541
|
|
|
527
542
|
export const pagination = {
|