@warp-ds/css 1.7.1-next.9 → 1.8.0-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/index.d.ts +14 -0
- package/component-classes/index.js +75 -61
- package/dist/components.css +1 -1
- package/dist/index.html +58 -3
- 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
|
@@ -502,6 +502,20 @@ export namespace backwardsCompatibleClasses {
|
|
|
502
502
|
export let removedButtonTokens: string;
|
|
503
503
|
export let removedButtonGroupTokens: string;
|
|
504
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;
|
|
514
|
+
export let removedPillTokens: string;
|
|
515
|
+
export let removedPopoverTokens: string;
|
|
516
|
+
export let removedRadioTokens: string;
|
|
517
|
+
export let removedSelectTokens: string;
|
|
518
|
+
export let removedStepindicatorTokens: string;
|
|
505
519
|
}
|
|
506
520
|
export namespace pagination {
|
|
507
521
|
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
|
|
@@ -63,8 +63,8 @@ export const box = {
|
|
|
63
63
|
export const pill = {
|
|
64
64
|
pill: 'flex items-center',
|
|
65
65
|
button: 'inline-flex items-center focusable text-xs transition-all',
|
|
66
|
-
suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active
|
|
67
|
-
filter: '
|
|
66
|
+
suggestion: 'i-bg-$color-pill-suggestion-background hover:i-bg-$color-pill-suggestion-background-hover active:i-bg-$color-pill-suggestion-background-active s-text font-bold',
|
|
67
|
+
filter: 's-bg-primary hover:s-bg-primary-hover active:s-bg-primary-active s-text-inverted',
|
|
68
68
|
label: 'pl-12 py-8 rounded-l-full',
|
|
69
69
|
labelWithoutClose: 'pr-12 rounded-r-full',
|
|
70
70
|
labelWithClose: 'pr-2',
|
|
@@ -79,11 +79,11 @@ export const step = {
|
|
|
79
79
|
stepVerticalRight: 'grid-cols-[1fr_20px] text-right',
|
|
80
80
|
stepHorizontal: 'group/steph grid-rows-[auto_20px] grid-cols-[1fr_20px_1fr] flex-1 grid gap-y-16 items-center',
|
|
81
81
|
|
|
82
|
-
stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300
|
|
82
|
+
stepDot: 'rounded-full border-2 h-20 w-20 transition-colors duration-300 s-icon-inverted',
|
|
83
83
|
stepDotVerticalRight: 'col-start-2',
|
|
84
84
|
stepDotHorizontal: 'row-start-2 justify-self-end',
|
|
85
|
-
stepDotActive: '
|
|
86
|
-
stepDotIncomplete: '
|
|
85
|
+
stepDotActive: 's-border-primary s-bg-primary',
|
|
86
|
+
stepDotIncomplete: 's-border s-bg',
|
|
87
87
|
|
|
88
88
|
stepLine: 'group-last/stepv:hidden transition-colors duration-300',
|
|
89
89
|
stepLineVertical: 'w-2 h-full justify-self-center',
|
|
@@ -92,8 +92,8 @@ export const step = {
|
|
|
92
92
|
stepLineHorizontalRight: 'group-last/steph:bg-transparent',
|
|
93
93
|
stepLineHorizontalLeft: 'group-first/steph:bg-transparent',
|
|
94
94
|
|
|
95
|
-
stepLineIncomplete: '
|
|
96
|
-
stepLineComplete: '
|
|
95
|
+
stepLineIncomplete: 's-bg-disabled',
|
|
96
|
+
stepLineComplete: 's-bg-primary',
|
|
97
97
|
|
|
98
98
|
content: 'last:mb-0 group-last/step:last:pb-0',
|
|
99
99
|
contentVertical: 'row-span-2 pb-32',
|
|
@@ -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 active:s-bg-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',
|
|
@@ -215,13 +215,13 @@ const buttonDefaultStyling = 'font-bold focusable justify-center transition-colo
|
|
|
215
215
|
const buttonColors = {
|
|
216
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
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',
|
|
218
|
+
utility: 's-text s-bg hover:s-bg-hover s-border hover:s-border-hover active:s-border-active',
|
|
219
219
|
destructive: 's-bg-negative s-text-inverted hover:s-bg-negative-hover active:s-bg-negative-active',
|
|
220
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
221
|
disabled: 's-text-inverted s-bg-disabled',
|
|
222
222
|
quiet: 'bg-transparent s-text-link hover:s-bg-hover active:s-bg-active',
|
|
223
|
-
utilityQuiet: 's-text
|
|
224
|
-
negativeQuiet: '
|
|
223
|
+
utilityQuiet: 's-text bg-transparent hover:s-bg-subtle-hover',
|
|
224
|
+
negativeQuiet: 'bg-transparent s-text-negative hover:s-bg-negative-subtle-hover active:s-bg-negative-subtle-active',
|
|
225
225
|
loading: 's-text s-bg-subtle',
|
|
226
226
|
link: 's-text-link',
|
|
227
227
|
};
|
|
@@ -348,10 +348,10 @@ export const buttonGroupItem = {
|
|
|
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',
|
|
@@ -383,38 +383,38 @@ export const alert = {
|
|
|
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',
|
|
395
395
|
};
|
|
396
396
|
|
|
397
397
|
export const select = {
|
|
398
|
-
default: 'block text-m mb-0 leading-m
|
|
399
|
-
disabled: '
|
|
400
|
-
invalid: '
|
|
398
|
+
default: 'block text-m mb-0 leading-m s-text s-bg s-border hover:s-border-hover active:s-border-active rounded-4 py-12 px-8 block border-1 w-full focusable focus:[--w-outline-offset:-2px] appearance-none pr-32 cursor-pointer caret-current',
|
|
399
|
+
disabled: 's-bg-disabled-subtle s-border-disabled hover:s-border-disabled! active:s-border-disabled! s-text-disabled pointer-events-none',
|
|
400
|
+
invalid: 's-border-negative',
|
|
401
401
|
readOnly: 'pl-0 bg-transparent border-0 pointer-events-none before:hidden',
|
|
402
402
|
wrapper: 'relative',
|
|
403
403
|
selectWrapper: `relative before:block before:absolute before:right-0 before:bottom-0 before:w-32 before:h-full before:pointer-events-none `,
|
|
404
|
-
chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full
|
|
404
|
+
chevron: 'absolute top-[30%] block right-0 bottom-0 w-32 h-full s-icon pointer-events-none cursor-pointer',
|
|
405
405
|
chevronDisabled: 'opacity-25',
|
|
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,14 +423,14 @@ 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 = {
|
|
@@ -450,21 +450,21 @@ 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-primary 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: '
|
|
463
|
-
radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:
|
|
464
|
-
radioChecked: 'peer-checked:before:
|
|
465
|
-
radioInvalid: 'before:
|
|
466
|
-
radioDisabled: 'peer-disabled:before:
|
|
467
|
-
labelRadioBorder: '
|
|
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',
|
|
463
|
+
radio: 'before:s-bg before:rounded-full peer-checked:before:border-[6] peer-checked:peer-hover:before:s-border-selected-hover peer-hover:before:s-border-primary peer-hover:before:s-bg-primary-subtle',
|
|
464
|
+
radioChecked: 'peer-checked:before:s-border-selected',
|
|
465
|
+
radioInvalid: 'before:s-bg peer-hover:before:s-bg-negative-subtle before:s-border-negative peer-hover:before:s-border-negative-hover peer-checked:before:s-border-negative peer-checked:peer-hover:before:s-border-negative-hover ',
|
|
466
|
+
radioDisabled: 'peer-disabled:before:s-bg-disabled-subtle before:s-border-disabled peer-checked:before:s-border-disabled',
|
|
467
|
+
labelRadioBorder: 's-border',
|
|
468
468
|
radioButtons: 'inline-flex relative font-bold rounded-8',
|
|
469
469
|
radioButtonsGroup: 'group',
|
|
470
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',
|
|
@@ -484,11 +484,11 @@ 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
|
|
|
@@ -497,7 +497,7 @@ export const attention = {
|
|
|
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
498
|
callout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border] s-text py-8 px-16 rounded-8',
|
|
499
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: '
|
|
500
|
+
popover: 's-bg border-[--w-s-color-background] s-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]',
|
|
503
503
|
arrowDirectionRight: '-right-[8px]',
|
|
@@ -505,7 +505,7 @@ export const attention = {
|
|
|
505
505
|
arrowDirectionTop: '-top-[8px]',
|
|
506
506
|
arrowTooltip: 'i-bg-$color-tooltip-background i-border-$color-tooltip-background',
|
|
507
507
|
arrowCallout: 'bg-[--w-color-callout-background] border-[--w-color-callout-border]',
|
|
508
|
-
arrowPopover: '
|
|
508
|
+
arrowPopover: 's-bg border-[--w-s-color-background]',
|
|
509
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',
|
|
@@ -525,9 +525,23 @@ export const backwardsCompatibleClasses = {
|
|
|
525
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
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
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-
|
|
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-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
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
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',
|
|
540
|
+
removedPillTokens: 'i-bg-$color-pill-filter-background hover:i-bg-$color-pill-filter-background-hover active:i-bg-$color-pill-filter-background-active i-text-$color-pill-filter-text i-text-$color-pill-suggestion-text',
|
|
541
|
+
removedPopoverTokens: 'i-bg-$color-popover-background i-border-$color-popover-background i-text-$color-popover-paragraph-text',
|
|
542
|
+
removedRadioTokens: 'before:i-border-$color-radio-negative-border peer-hover:before:i-border-$color-radio-negative-border-hover peer-checked:before:i-border-$color-radio-negative-border peer-checked:peer-hover:before:i-border-$color-radio-negative-border-hover before:i-bg-$color-radio-negative-background peer-hover:before:i-bg-$color-radio-negative-background-hover i-border-$color-radio-border peer-hover:before:i-border-$color-radio-border-hover before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-disabled peer-checked:before:i-border-$color-radio-border-selected peer-checked:peer-hover:before:i-border-$color-radio-border-selected-hover peer-disabled:before:i-bg-$color-radio-background-disabled peer-hover:before:i-bg-$color-radio-background-hover',
|
|
543
|
+
removedSelectTokens: 'i-border-$color-select-border-negative i-border-$color-select-border-disabled hover:i-border-$color-select-border-disabled! active:i-border-$color-select-border-disabled! i-border-$color-select-border hover:i-border-$color-select-border-hover active:i-border-$color-select-border-active i-text-$color-select-icon i-bg-$color-select-background-disabled i-bg-$color-select-background i-text-$color-select-text-disabled i-text-$color-select-text',
|
|
544
|
+
removedStepindicatorTokens: 'i-bg-$color-stepindicator-track-background-active i-bg-$color-stepindicator-track-background i-text-$color-stepindicator-handle-icon i-border-$color-stepindicator-handle-border i-border-$color-stepindicator-handle-border-active i-bg-$color-stepindicator-handle-background i-bg-$color-stepindicator-handle-background-active',
|
|
531
545
|
};
|
|
532
546
|
|
|
533
547
|
export const pagination = {
|