npm - @sb1/ffe-core - Versions diffs - 32.0.4 → 33.0.0 - Mend

@sb1/ffe-core 32.0.4 → 33.0.0

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.

Files changed (10) hide show

package/css/colors-semantic.css +577 -890
package/css/ffe.css +581 -882
package/less/colors-semantic-chevron.less +7 -0
package/less/colors-semantic-storybook.less +288 -313
package/less/colors-semantic.less +577 -890
package/less/typography.less +5 -1
package/less/variables.less +3 -0
package/lib/semanticColors.js +47 -37
package/lib/semanticColorsTailwind.js +46 -37
package/package.json +11 -6

package/less/colors-semantic-storybook.less CHANGED Viewed

@@ -1,315 +1,290 @@
-// Semantic dark class
-.dark-mode {
---ffe-color-default-brand-primary-subtlest: var(--ffe-color-vann-800);
---ffe-color-default-brand-primary-subtler: var(--ffe-color-vann-700);
---ffe-color-default-brand-primary-subtle: var(--ffe-color-vann-600);
---ffe-color-default-brand-primary-strong: var(--ffe-color-vann-300);
---ffe-color-default-brand-primary-stronger: var(--ffe-color-vann-200);
---ffe-color-default-brand-primary-strongest: var(--ffe-color-vann-100);
---ffe-color-default-brand-secondary-subtler: var(--ffe-color-frost-800);
---ffe-color-default-brand-secondary-subtle: var(--ffe-color-frost-700);
---ffe-color-default-brand-secondary-default: var(--ffe-color-frost-600);
---ffe-color-default-brand-secondary-medium: var(--ffe-color-frost-500);
---ffe-color-default-brand-secondary-strong: var(--ffe-color-frost-300);
---ffe-color-default-brand-secondary-stronger: var(--ffe-color-frost-200);
---ffe-color-default-brand-tertiary-subtle: var(--ffe-color-syrin-750);
---ffe-color-default-brand-tertiary-default: var(--ffe-color-syrin-650);
---ffe-color-default-brand-tertiary-medium: var(--ffe-color-syrin-550);
---ffe-color-default-brand-tertiary-strong: var(--ffe-color-syrin-300);
---ffe-color-default-brand-tertiary-stronger: var(--ffe-color-syrin-200);
---ffe-color-default-brand-emphasis-strong: var(--ffe-color-vann-300);
---ffe-color-default-brand-emphasis-stronger: var(--ffe-color-vann-150);
---ffe-color-default-brand-emphasis-strongest: var(--ffe-color-vann-75);
---ffe-color-default-feedback-info-subtlest: var(--ffe-color-frost-800);
---ffe-color-default-feedback-info-subtler: var(--ffe-color-frost-700);
---ffe-color-default-feedback-info-strong: var(--ffe-color-frost-300);
---ffe-color-default-feedback-info-strongest: var(--ffe-color-frost-100);
---ffe-color-default-feedback-success-subtlest: var(--ffe-color-skog-800);
---ffe-color-default-feedback-success-subtler: var(--ffe-color-skog-700);
---ffe-color-default-feedback-success-medium: var(--ffe-color-skog-400);
---ffe-color-default-feedback-success-strong: var(--ffe-color-skog-300);
---ffe-color-default-feedback-success-stronger: var(--ffe-color-skog-200);
---ffe-color-default-feedback-success-strongest: var(--ffe-color-skog-100);
---ffe-color-default-feedback-warning-subtlest: var(--ffe-color-sol-750);
---ffe-color-default-feedback-warning-subtler: var(--ffe-color-sol-650);
---ffe-color-default-feedback-warning-strong: var(--ffe-color-sol-250);
---ffe-color-default-feedback-warning-strongest: var(--ffe-color-sol-100);
---ffe-color-default-feedback-critical-subtlest: var(--ffe-color-baer-800);
---ffe-color-default-feedback-critical-subtler: var(--ffe-color-baer-700);
---ffe-color-default-feedback-critical-medium: var(--ffe-color-baer-400);
---ffe-color-default-feedback-critical-strong: var(--ffe-color-baer-300);
---ffe-color-default-feedback-critical-strongest: var(--ffe-color-baer-100);
---ffe-color-default-feedback-tip-sublest: var(--ffe-color-syrin-800);
---ffe-color-default-feedback-tip-subtler: var(--ffe-color-syrin-700);
---ffe-color-default-feedback-tip-strong: var(--ffe-color-syrin-300);
---ffe-color-default-feedback-tip-strongest: var(--ffe-color-syrin-100);
---ffe-color-default-feedback-tip-stronger: var(--ffe-color-syrin-200);
---ffe-color-default-neutral-subtlest: var(--ffe-color-gray-900);
---ffe-color-default-neutral-subtler: var(--ffe-color-gray-750);
---ffe-color-default-neutral-subtle: var(--ffe-color-gray-650);
---ffe-color-default-neutral-default: var(--ffe-color-gray-500);
---ffe-color-default-neutral-medium: var(--ffe-color-gray-400);
---ffe-color-default-neutral-strong: var(--ffe-color-gray-250);
---ffe-color-default-neutral-stronger: var(--ffe-color-gray-150);
---ffe-color-default-neutral-strongest: var(--ffe-color-alpha-white-1000);
---ffe-color-default-neutral-inverted: var(--ffe-color-gray-1000);
---ffe-color-default-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
---ffe-color-default-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
---ffe-color-default-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
---ffe-color-default-neutral-alpha-default: var(--ffe-color-alpha-white-100);
---ffe-color-default-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
---ffe-color-default-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
---ffe-color-default-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
---ffe-color-default-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
---ffe-color-default-interactive-default: var(--ffe-color-vann-400);
---ffe-color-default-interactive-hover: var(--ffe-color-vann-300);
---ffe-color-default-interactive-pressed: var(--ffe-color-vann-200);
---ffe-color-default-interactive-focus: var(--ffe-color-alpha-white-1000);
---ffe-color-default-interactive-selected-default: var(--ffe-color-alpha-white-1000);
---ffe-color-default-interactive-selected-hover: var(--ffe-color-vann-50);
---ffe-color-default-interactive-selected-pressed: var(--ffe-color-vann-100);
---ffe-color-accent-brand-primary-subtler: var(--ffe-color-vann-700);
---ffe-color-accent-brand-primary-subtle: var(--ffe-color-vann-600);
---ffe-color-accent-brand-primary-default: var(--ffe-color-vann-500);
---ffe-color-accent-brand-primary-strong: var(--ffe-color-vann-300);
---ffe-color-accent-brand-primary-stronger: var(--ffe-color-vann-200);
---ffe-color-accent-brand-primary-strongest: var(--ffe-color-vann-100);
---ffe-color-accent-brand-secondary-subtler: var(--ffe-color-frost-800);
---ffe-color-accent-brand-secondary-subtle: var(--ffe-color-frost-700);
---ffe-color-accent-brand-secondary-default: var(--ffe-color-frost-600);
---ffe-color-accent-brand-secondary-medium: var(--ffe-color-frost-500);
---ffe-color-accent-brand-secondary-strong: var(--ffe-color-frost-300);
---ffe-color-accent-brand-secondary-stronger: var(--ffe-color-frost-200);
---ffe-color-accent-brand-tertiary-subtle: var(--ffe-color-syrin-750);
---ffe-color-accent-brand-tertiary-default: var(--ffe-color-syrin-650);
---ffe-color-accent-brand-tertiary-medium: var(--ffe-color-syrin-550);
---ffe-color-accent-brand-tertiary-strong: var(--ffe-color-syrin-300);
---ffe-color-accent-brand-tertiary-stronger: var(--ffe-color-syrin-200);
---ffe-color-accent-brand-emphasis-strong: var(--ffe-color-vann-300);
---ffe-color-accent-brand-emphasis-stronger: var(--ffe-color-vann-150);
---ffe-color-accent-brand-emphasis-strongest: var(--ffe-color-vann-75);
---ffe-color-accent-feedback-info-subtlest: var(--ffe-color-frost-800);
---ffe-color-accent-feedback-info-subtler: var(--ffe-color-frost-700);
---ffe-color-accent-feedback-info-strong: var(--ffe-color-frost-300);
---ffe-color-accent-feedback-info-strongest: var(--ffe-color-frost-100);
---ffe-color-accent-feedback-success-subtlest: var(--ffe-color-skog-800);
---ffe-color-accent-feedback-success-subtler: var(--ffe-color-skog-700);
---ffe-color-accent-feedback-success-subtle: var(--ffe-color-skog-550);
---ffe-color-accent-feedback-success-default: var(--ffe-color-skog-500);
---ffe-color-accent-feedback-success-strong: var(--ffe-color-skog-300);
---ffe-color-accent-feedback-success-strongest: var(--ffe-color-skog-100);
---ffe-color-accent-feedback-critical-subtlest: var(--ffe-color-baer-800);
---ffe-color-accent-feedback-critical-subtler: var(--ffe-color-baer-700);
---ffe-color-accent-feedback-critical-default: var(--ffe-color-baer-500);
---ffe-color-accent-feedback-critical-strong: var(--ffe-color-baer-300);
---ffe-color-accent-feedback-critical-strongest: var(--ffe-color-baer-100);
---ffe-color-accent-feedback-warning-subtlest: var(--ffe-color-sol-750);
---ffe-color-accent-feedback-warning-subtler: var(--ffe-color-sol-650);
---ffe-color-accent-feedback-warning-strong: var(--ffe-color-sol-250);
---ffe-color-accent-feedback-warning-strongest: var(--ffe-color-sol-100);
---ffe-color-accent-feedback-tip-sublest: var(--ffe-color-syrin-800);
---ffe-color-accent-feedback-tip-subtler: var(--ffe-color-syrin-700);
---ffe-color-accent-feedback-tip-strong: var(--ffe-color-syrin-300);
---ffe-color-accent-feedback-tip-stronger: var(--ffe-color-syrin-200);
---ffe-color-accent-feedback-tip-strongest: var(--ffe-color-syrin-100);
---ffe-color-accent-neutral-alpha-subtlest: var(--ffe-color-alpha-white-25);
---ffe-color-accent-neutral-alpha-subtler: var(--ffe-color-alpha-white-50);
---ffe-color-accent-neutral-alpha-subtle: var(--ffe-color-alpha-white-75);
---ffe-color-accent-neutral-alpha-default: var(--ffe-color-alpha-white-100);
---ffe-color-accent-neutral-alpha-medium: var(--ffe-color-alpha-white-200);
---ffe-color-accent-neutral-alpha-strong: var(--ffe-color-alpha-white-300);
---ffe-color-accent-neutral-alpha-stronger: var(--ffe-color-alpha-white-400);
---ffe-color-accent-neutral-alpha-strongest: var(--ffe-color-alpha-white-500);
---ffe-color-accent-neutral-stronger: var(--ffe-color-gray-150);
---ffe-color-accent-neutral-strongest: var(--ffe-color-alpha-white-1000);
---ffe-color-accent-neutral-inverted: var(--ffe-color-gray-1000);
---ffe-color-accent-interactive-default: var(--ffe-color-vann-300);
---ffe-color-accent-interactive-hover: var(--ffe-color-vann-400);
---ffe-color-accent-interactive-pressed: var(--ffe-color-vann-500);
---ffe-color-accent-interactive-focus: var(--ffe-color-alpha-white-1000);
---ffe-color-accent-interactive-selected-default: var(--ffe-color-alpha-white-1000);
---ffe-color-accent-interactive-selected-hover: var(--ffe-color-vann-50);
---ffe-color-accent-interactive-selected-pressed: var(--ffe-color-vann-100);
---ffe-color-speciality-logo-name: var(--ffe-color-alpha-white-1000);
---ffe-color-speciality-background-default: var(--ffe-color-alpha-black-1000);
---ffe-color-speciality-background-subtle: var(--ffe-color-gray-950);
---ffe-color-speciality-background-accent: var(--ffe-color-gray-1000);
---ffe-color-speciality-background-accent-subtle: var(--ffe-color-gray-950);
---ffe-color-speciality-background-transparent: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-background-surface-primary-default: var(--ffe-color-gray-900);
---ffe-color-speciality-background-surface-primary-default-hover: var(--ffe-color-gray-800);
---ffe-color-speciality-background-surface-primary-default-pressed: var(--ffe-color-gray-700);
---ffe-color-speciality-background-surface-secondary-default: var(--ffe-color-gray-900);
---ffe-color-speciality-background-surface-secondary-default-hover: var(--ffe-color-gray-800);
---ffe-color-speciality-background-surface-secondary-default-pressed: var(--ffe-color-gray-700);
---ffe-color-speciality-background-surface-tertiary-default: var(--ffe-color-gray-900);
---ffe-color-speciality-background-surface-tertiary-default-hover: var(--ffe-color-gray-800);
---ffe-color-speciality-background-surface-tertiary-default-pressed: var(--ffe-color-gray-700);
---ffe-color-speciality-background-surface-accent-accent: var(--ffe-color-gray-900);
---ffe-color-speciality-background-surface-accent-accent-hover: var(--ffe-color-gray-800);
---ffe-color-speciality-background-surface-accent-accent-pressed: var(--ffe-color-gray-700);
---ffe-color-speciality-buttons-primary-default-fill-default: var(--ffe-color-vann-550);
---ffe-color-speciality-buttons-primary-default-fill-hover: var(--ffe-color-vann-500);
---ffe-color-speciality-buttons-primary-default-fill-pressed: var(--ffe-color-vann-400);
---ffe-color-speciality-buttons-primary-accent-fill-default: var(--ffe-color-vann-550);
---ffe-color-speciality-buttons-primary-accent-fill-hover: var(--ffe-color-vann-500);
---ffe-color-speciality-buttons-primary-accent-fill-pressed: var(--ffe-color-vann-400);
---ffe-color-speciality-buttons-primary-accent-foreground-default: var(--ffe-color-alpha-white-1000);
---ffe-color-speciality-buttons-secondary-default-border-default: var(--ffe-color-vann-300);
---ffe-color-speciality-buttons-secondary-default-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-secondary-default-fill-hover: var(--ffe-color-alpha-white-100);
---ffe-color-speciality-buttons-secondary-default-fill-pressed: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-buttons-secondary-default-foreground-default: var(--ffe-color-vann-100);
---ffe-color-speciality-buttons-secondary-accent-border-default: var(--ffe-color-vann-300);
---ffe-color-speciality-buttons-secondary-accent-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-secondary-accent-fill-hover: var(--ffe-color-alpha-white-100);
---ffe-color-speciality-buttons-secondary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-buttons-secondary-accent-foreground-default: var(--ffe-color-vann-100);
---ffe-color-speciality-buttons-tertiary-default-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-tertiary-default-fill-hover: var(--ffe-color-alpha-white-100);
---ffe-color-speciality-buttons-tertiary-default-fill-pressed: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-buttons-tertiary-default-foreground-default: var(--ffe-color-vann-100);
---ffe-color-speciality-buttons-tertiary-accent-fill-default: var(--ffe-color-alpha-white-0);
---ffe-color-speciality-buttons-tertiary-accent-fill-hover: var(--ffe-color-alpha-white-100);
---ffe-color-speciality-buttons-tertiary-accent-fill-pressed: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-buttons-tertiary-accent-foreground-default: var(--ffe-color-vann-100);
---ffe-color-speciality-static-alpha-white-default: var(--ffe-color-alpha-white-200);
---ffe-color-speciality-static-alpha-white-medium: var(--ffe-color-alpha-white-400);
---ffe-color-speciality-static-alpha-white-strong: var(--ffe-color-alpha-white-600);
---ffe-color-speciality-static-alpha-white-stronger: var(--ffe-color-alpha-white-700);
---ffe-color-speciality-static-neutral-white: var(--ffe-color-alpha-white-1000);
-//inlined context to make darkmode work
---ffe-color-background-default: var(--ffe-color-speciality-background-default);
---ffe-color-background-subtle: var(--ffe-color-speciality-background-subtle);
---ffe-color-surface-primary-default: var(--ffe-color-speciality-background-surface-primary-default);
---ffe-color-surface-primary-default-hover: var(--ffe-color-speciality-background-surface-primary-default-hover);
---ffe-color-surface-primary-default-pressed: var(--ffe-color-speciality-background-surface-primary-default-pressed);
---ffe-color-surface-secondary-default: var(--ffe-color-speciality-background-surface-secondary-default);
---ffe-color-surface-secondary-hover: var(--ffe-color-speciality-background-surface-secondary-default-hover);
---ffe-color-surface-secondary-pressed: var(--ffe-color-speciality-background-surface-secondary-default-pressed);
---ffe-color-surface-tertiary-default: var(--ffe-color-speciality-background-surface-tertiary-default);
---ffe-color-surface-tertiary-hover: var(--ffe-color-speciality-background-surface-tertiary-default-hover);
---ffe-color-surface-tertiary-pressed: var(--ffe-color-speciality-background-surface-tertiary-default-pressed);
---ffe-color-surface-feedback-info: var(--ffe-color-default-feedback-info-subtlest);
---ffe-color-surface-feedback-success: var(--ffe-color-default-feedback-success-subtlest);
---ffe-color-surface-feedback-warning: var(--ffe-color-default-feedback-warning-subtlest);
---ffe-color-surface-feedback-critical: var(--ffe-color-default-feedback-critical-subtlest);
---ffe-color-surface-feedback-tip: var(--ffe-color-default-feedback-tip-sublest);
---ffe-color-fill-primary-default: var(--ffe-color-default-brand-primary-strong);
---ffe-color-fill-primary-hover: var(--ffe-color-default-brand-primary-stronger);
---ffe-color-fill-primary-pressed: var(--ffe-color-default-brand-primary-strongest);
---ffe-color-fill-primary-selected-default: var(--ffe-color-default-interactive-selected-default);
---ffe-color-fill-primary-selected-hover: var(--ffe-color-default-interactive-selected-hover);
---ffe-color-fill-primary-selected-pressed: var(--ffe-color-default-interactive-selected-pressed);
---ffe-color-fill-primary-subtle: var(--ffe-color-default-brand-primary-subtlest);
---ffe-color-fill-primary-subtle-hover: var(--ffe-color-default-brand-primary-subtler);
---ffe-color-fill-primary-subtle-pressed: var(--ffe-color-default-brand-primary-subtle);
---ffe-color-fill-primary-invisible: var(--ffe-color-speciality-background-transparent);
---ffe-color-fill-secondary-default: var(--ffe-color-default-brand-secondary-medium);
---ffe-color-fill-secondary-default-hover: var(--ffe-color-default-brand-secondary-strong);
---ffe-color-fill-secondary-default-pressed: var(--ffe-color-default-brand-secondary-stronger);
---ffe-color-fill-secondary-subtle: var(--ffe-color-default-brand-secondary-subtler);
---ffe-color-fill-secondary-subtle-hover: var(--ffe-color-default-brand-secondary-subtle);
---ffe-color-fill-secondary-subtle-pressed: var(--ffe-color-default-brand-secondary-default);
---ffe-color-fill-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
---ffe-color-fill-tertiary-default-hover: var(--ffe-color-default-brand-tertiary-strong);
---ffe-color-fill-tertiary-default-pressed: var(--ffe-color-default-brand-tertiary-stronger);
---ffe-color-fill-tertiary-subtle: var(--ffe-color-default-brand-tertiary-subtle);
---ffe-color-fill-tertiary-subtle-hover: var(--ffe-color-default-brand-tertiary-default);
---ffe-color-fill-tertiary-subtle-pressed: var(--ffe-color-default-brand-tertiary-medium);
---ffe-color-fill-neutral-default: var(--ffe-color-default-neutral-alpha-strong);
---ffe-color-fill-neutral-default-hover: var(--ffe-color-default-neutral-alpha-stronger);
---ffe-color-fill-neutral-default-pressed: var(--ffe-color-default-neutral-alpha-strongest);
---ffe-color-fill-neutral-subtle: var(--ffe-color-default-neutral-alpha-default);
---ffe-color-fill-neutral-subtle-hover: var(--ffe-color-default-neutral-alpha-medium);
---ffe-color-fill-neutral-subtle-pressed: var(--ffe-color-default-neutral-alpha-strong);
---ffe-color-fill-neutral-extra-subtle: var(--ffe-color-default-neutral-alpha-subtlest);
---ffe-color-fill-neutral-extra-subtle-hover: var(--ffe-color-default-neutral-alpha-subtler);
---ffe-color-fill-neutral-extra-subtle-pressed: var(--ffe-color-default-neutral-alpha-subtle);
---ffe-color-fill-feedback-info: var(--ffe-color-default-feedback-info-strong);
---ffe-color-fill-feedback-info-subtle: var(--ffe-color-default-feedback-info-subtler);
---ffe-color-fill-feedback-success: var(--ffe-color-default-feedback-success-strong);
---ffe-color-fill-feedback-success-subtle: var(--ffe-color-default-feedback-success-subtler);
---ffe-color-fill-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
---ffe-color-fill-feedback-warning-subtle: var(--ffe-color-default-feedback-warning-subtler);
---ffe-color-fill-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
---ffe-color-fill-feedback-critical-subtle: var(--ffe-color-default-feedback-critical-subtler);
---ffe-color-fill-feedback-tip: var(--ffe-color-default-feedback-tip-stronger);
---ffe-color-fill-feedback-tip-subtle: var(--ffe-color-default-feedback-tip-subtler);
---ffe-color-foreground-default: var(--ffe-color-default-neutral-strongest);
---ffe-color-foreground-subtle: var(--ffe-color-default-neutral-stronger);
---ffe-color-foreground-emphasis: var(--ffe-color-default-brand-emphasis-stronger);
---ffe-color-foreground-inverse: var(--ffe-color-default-neutral-subtlest);
---ffe-color-foreground-on-fill-default: var(--ffe-color-default-neutral-inverted);
---ffe-color-foreground-on-fill-inverse: var(--ffe-color-default-neutral-strongest);
---ffe-color-foreground-interactive-link: var(--ffe-color-default-interactive-default);
---ffe-color-foreground-interactive-link-hover: var(--ffe-color-default-interactive-hover);
---ffe-color-foreground-interactive-link-pressed: var(--ffe-color-default-interactive-pressed);
---ffe-color-foreground-interactive-link-active: var(--ffe-color-default-interactive-selected-default);
---ffe-color-foreground-feedback-info: var(--ffe-color-default-feedback-info-strongest);
---ffe-color-foreground-feedback-success: var(--ffe-color-default-feedback-success-strongest);
---ffe-color-foreground-feedback-warning: var(--ffe-color-default-feedback-warning-strongest);
---ffe-color-foreground-feedback-critical: var(--ffe-color-default-feedback-critical-strongest);
---ffe-color-foreground-feedback-tip: var(--ffe-color-default-feedback-tip-strongest);
---ffe-color-border-primary-default: var(--ffe-color-default-neutral-default);
---ffe-color-border-primary-default-hover: var(--ffe-color-default-neutral-medium);
---ffe-color-border-primary-default-pressed: var(--ffe-color-default-neutral-strong);
---ffe-color-border-primary-subtle: var(--ffe-color-default-neutral-subtler);
---ffe-color-border-primary-subtle-hover: var(--ffe-color-default-neutral-subtle);
---ffe-color-border-primary-subtle-pressed: var(--ffe-color-default-neutral-default);
---ffe-color-border-primary-emphasis: var(--ffe-color-default-brand-emphasis-strongest);
---ffe-color-border-secondary-default: var(--ffe-color-default-brand-secondary-medium);
---ffe-color-border-secondary-hover: var(--ffe-color-default-brand-secondary-strong);
---ffe-color-border-secondary-pressed: var(--ffe-color-default-brand-secondary-stronger);
---ffe-color-border-tertiary-default: var(--ffe-color-default-brand-tertiary-medium);
---ffe-color-border-tertiary-hover: var(--ffe-color-default-brand-tertiary-strong);
---ffe-color-border-tertiary-pressed: var(--ffe-color-default-brand-tertiary-stronger);
---ffe-color-border-interactive-focus: var(--ffe-color-default-interactive-focus);
---ffe-color-border-interactive-selected: var(--ffe-color-default-brand-primary-stronger);
---ffe-color-border-feedback-info: var(--ffe-color-default-feedback-info-strong);
---ffe-color-border-feedback-success: var(--ffe-color-default-feedback-success-strong);
---ffe-color-border-feedback-warning: var(--ffe-color-default-feedback-warning-strong);
---ffe-color-border-feedback-critical: var(--ffe-color-default-feedback-critical-strong);
---ffe-color-border-feedback-tip: var(--ffe-color-default-feedback-tip-strong);
---ffe-color-component-button-action-border-default: var(--ffe-color-default-feedback-success-medium);
---ffe-color-component-button-action-border-hover: var(--ffe-color-default-feedback-success-strong);
---ffe-color-component-button-action-border-pressed: var(--ffe-color-default-feedback-success-stronger);
---ffe-color-component-button-action-fill-default: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-button-action-fill-hover: var(--ffe-color-accent-feedback-success-subtler);
---ffe-color-component-button-action-fill-pressed: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-button-action-foreground-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-action-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-primary-border-default: var(--ffe-color-default-brand-emphasis-strong);
---ffe-color-component-button-primary-border-hover: var(--ffe-color-default-brand-emphasis-stronger);
---ffe-color-component-button-primary-border-pressed: var(--ffe-color-default-brand-emphasis-strongest);
---ffe-color-component-button-primary-fill-default: var(--ffe-color-speciality-buttons-primary-default-fill-default);
---ffe-color-component-button-primary-fill-hover: var(--ffe-color-speciality-buttons-primary-default-fill-hover);
---ffe-color-component-button-primary-fill-pressed: var(--ffe-color-speciality-buttons-primary-default-fill-pressed);
---ffe-color-component-button-primary-foreground-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-primary-foreground-hover: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-button-secondary-border-default: var(--ffe-color-speciality-buttons-secondary-default-border-default);
---ffe-color-component-button-secondary-border-hover: var(--ffe-color-speciality-buttons-secondary-default-border-default);
---ffe-color-component-button-secondary-border-pressed: var(--ffe-color-speciality-buttons-secondary-default-border-default);
---ffe-color-component-button-secondary-fill-default: var(--ffe-color-speciality-buttons-secondary-default-fill-default);
---ffe-color-component-button-secondary-fill-hover: var(--ffe-color-speciality-buttons-secondary-default-fill-hover);
---ffe-color-component-button-secondary-fill-pressed: var(--ffe-color-speciality-buttons-secondary-default-fill-pressed);
---ffe-color-component-button-secondary-foreground-default: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
---ffe-color-component-button-secondary-foreground-hover: var(--ffe-color-speciality-buttons-secondary-default-foreground-default);
---ffe-color-component-button-tertiary-fill-default: var(--ffe-color-speciality-buttons-tertiary-default-fill-default);
---ffe-color-component-button-tertiary-fill-hover: var(--ffe-color-speciality-buttons-tertiary-default-fill-hover);
---ffe-color-component-button-tertiary-fill-pressed: var(--ffe-color-speciality-buttons-tertiary-default-fill-pressed);
---ffe-color-component-button-tertiary-foreground-default: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
---ffe-color-component-button-tertiary-foreground-hover: var(--ffe-color-speciality-buttons-tertiary-default-foreground-default);
---ffe-color-component-toggleswitch-handle-default: var(--ffe-color-speciality-static-neutral-white);
---ffe-color-component-toggleswitch-fill-default: var(--ffe-color-default-neutral-medium);
---ffe-color-component-toggleswitch-fill-default-hover: var(--ffe-color-default-neutral-strong);
---ffe-color-component-toggleswitch-fill-default-pressed: var(--ffe-color-default-neutral-medium);
---ffe-color-component-toggleswitch-fill-selected: var(--ffe-color-accent-feedback-success-default);
---ffe-color-component-toggleswitch-fill-selected-hover: var(--ffe-color-accent-feedback-success-subtle);
---ffe-color-component-toggleswitch-fill-selected-pressed: var(--ffe-color-accent-feedback-success-default);
---ffe-color-component-toggleswitch-fill-critical: var(--ffe-color-default-feedback-critical-medium);
---ffe-color-component-logo-name: var(--ffe-color-speciality-logo-name);
---ffe-color-component-logo-number1: var(--ffe-color-alpha-white-1000);
+/* Generated from Figma tokens */
+.dark-mode, .dark-mode .ffe-default-mode {
+  --ffe-color-background-default: #020a0a;
+--ffe-color-background-subtle: #1f1f1f;
+--ffe-color-surface-primary-default: #292929;
+--ffe-color-surface-primary-default-hover: #333333;
+--ffe-color-surface-primary-default-pressed: #3d3d3d;
+--ffe-color-surface-secondary-default: #0c2232;
+--ffe-color-surface-secondary-default-hover: #102d43;
+--ffe-color-surface-secondary-default-pressed: #163853;
+--ffe-color-surface-tertiary-default: #1d192f;
+--ffe-color-surface-tertiary-default-hover: #27223a;
+--ffe-color-surface-tertiary-default-pressed: #312c44;
+--ffe-color-surface-neutral-default: #3d3d3d;
+--ffe-color-surface-neutral-default-hover: #474747;
+--ffe-color-surface-neutral-default-pressed: #525252;
+--ffe-color-surface-feedback-info: #163853;
+--ffe-color-surface-feedback-success: #0a4330;
+--ffe-color-surface-feedback-warning: #491c00;
+--ffe-color-surface-feedback-critical: #640e10;
+--ffe-color-surface-feedback-tip: #312c44;
+--ffe-color-fill-primary-default: #55709b;
+--ffe-color-fill-primary-default-hover: #748db4;
+--ffe-color-fill-primary-default-pressed: #90a9d0;
+--ffe-color-fill-primary-selected-default: #f7fafd;
+--ffe-color-fill-primary-selected-hover: #d7e7f4;
+--ffe-color-fill-primary-selected-pressed: #c3d9ef;
+--ffe-color-fill-primary-subtle: #2e405c;
+--ffe-color-fill-primary-subtle-hover: #374b6c;
+--ffe-color-fill-primary-subtle-pressed: #3e5579;
+--ffe-color-fill-primary-invisible: #ffffff00;
+--ffe-color-fill-secondary-default: #457aa1;
+--ffe-color-fill-secondary-default-hover: #6096bd;
+--ffe-color-fill-secondary-default-pressed: #7eb5d2;
+--ffe-color-fill-secondary-subtle: #2b5a7c;
+--ffe-color-fill-secondary-subtle-hover: #356488;
+--ffe-color-fill-secondary-subtle-pressed: #3b6f96;
+--ffe-color-fill-tertiary-default: #7b718e;
+--ffe-color-fill-tertiary-default-hover: #a39db9;
+--ffe-color-fill-tertiary-default-pressed: #b4aecb;
+--ffe-color-fill-tertiary-subtle: #4e4a64;
+--ffe-color-fill-tertiary-subtle-hover: #5a5671;
+--ffe-color-fill-tertiary-subtle-pressed: #665d79;
+--ffe-color-fill-neutral-default: #ffffff33;
+--ffe-color-fill-neutral-default-hover: #ffffff40;
+--ffe-color-fill-neutral-default-pressed: #ffffff4d;
+--ffe-color-fill-neutral-subtle: #ffffff13;
+--ffe-color-fill-neutral-subtle-hover: #ffffff1a;
+--ffe-color-fill-neutral-subtle-pressed: #ffffff26;
+--ffe-color-fill-neutral-extra-subtle: #ffffff06;
+--ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
+--ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
+--ffe-color-fill-feedback-info: #7eb5d2;
+--ffe-color-fill-feedback-info-subtle: #234f71;
+--ffe-color-fill-feedback-success: #6abe97;
+--ffe-color-fill-feedback-success-subtle: #09583b;
+--ffe-color-fill-feedback-warning: #ea910b;
+--ffe-color-fill-feedback-warning-subtle: #682c00;
+--ffe-color-fill-feedback-critical: #ff5e5c;
+--ffe-color-fill-feedback-critical-subtle: #7c1214;
+--ffe-color-fill-feedback-tip: #c1c1dc;
+--ffe-color-fill-feedback-tip-subtle: #45415a;
+--ffe-color-foreground-default: #ffffff;
+--ffe-color-foreground-subtle: #c2c2c2;
+--ffe-color-foreground-emphasis: #d7e7f4;
+--ffe-color-foreground-inverse: #020a0a;
+--ffe-color-foreground-interactive-link: #c3d9ef;
+--ffe-color-foreground-interactive-link-hover: #b6d1ec;
+--ffe-color-foreground-interactive-link-pressed: #9ec2e5;
+--ffe-color-foreground-interactive-link-active: #f7fafd;
+--ffe-color-foreground-feedback-info: #c3dfea;
+--ffe-color-foreground-feedback-success: #b2e6cd;
+--ffe-color-foreground-feedback-warning: #ffc675;
+--ffe-color-foreground-feedback-critical: #ffaea8;
+--ffe-color-foreground-feedback-tip: #d3d3ea;
+--ffe-color-component-form-input-foreground-default: #ffffff;
+--ffe-color-component-form-input-foreground-subtle: #c2c2c2;
+--ffe-color-component-form-input-foreground-placeholder: #adadad;
+--ffe-color-component-form-input-foreground-disabled: #8f8f8f;
+--ffe-color-component-form-input-foreground-read-only: #c2c2c2;
+--ffe-color-component-form-input-foreground-error: #ffaea8;
+--ffe-color-component-form-input-border-active: #d7e7f4;
+--ffe-color-component-form-input-fill-default: #292929;
+--ffe-color-component-form-input-fill-default-hover: #333333;
+--ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
+--ffe-color-component-form-input-fill-disabled: #5c5c5c;
+--ffe-color-component-form-input-fill-read-only: #474747;
+--ffe-color-component-form-input-fill-error: #640e10;
+--ffe-color-component-form-toggleswitch-handle-default: #ffffff;
+--ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
+--ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
+--ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
+--ffe-color-component-form-toggleswitch-fill-selected: #48a781;
+--ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
+--ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
+--ffe-color-component-form-toggleswitch-fill-critical: #e44244;
+--ffe-color-component-button-action-border-default: #48a781;
+--ffe-color-component-button-action-border-hover: #6abe97;
+--ffe-color-component-button-action-border-pressed: #8fd1b1;
+--ffe-color-component-button-action-fill-default: #00754e;
+--ffe-color-component-button-action-fill-hover: #2a7e5b;
+--ffe-color-component-button-action-fill-pressed: #409674;
+--ffe-color-component-button-action-foreground-default: #ffffff;
+--ffe-color-component-button-action-foreground-hover: #ffffff;
+--ffe-color-component-button-primary-border-default: #9ec2e5;
+--ffe-color-component-button-primary-border-hover: #c3d9ef;
+--ffe-color-component-button-primary-border-pressed: #d7e7f4;
+--ffe-color-component-button-primary-fill-default: #005aa4;
+--ffe-color-component-button-primary-fill-hover: #1566b2;
+--ffe-color-component-button-primary-fill-pressed: #2975c2;
+--ffe-color-component-button-primary-foreground-default: #ffffff;
+--ffe-color-component-button-primary-foreground-hover: #ffffff;
+--ffe-color-component-button-secondary-border-default: #f7fafd;
+--ffe-color-component-button-secondary-border-hover: #f7fafd;
+--ffe-color-component-button-secondary-border-pressed: #f7fafd;
+--ffe-color-component-button-secondary-fill-default: #ffffff00;
+--ffe-color-component-button-secondary-fill-hover: #333333;
+--ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
+--ffe-color-component-button-secondary-foreground-default: #ffffff;
+--ffe-color-component-button-secondary-foreground-hover: #ffffff;
+--ffe-color-component-button-tertiary-fill-default: #ffffff00;
+--ffe-color-component-button-tertiary-fill-hover: #333333;
+--ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
+--ffe-color-component-button-tertiary-foreground-default: #f7fafd;
+--ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
+--ffe-color-component-logo-name: #ffffff;
+--ffe-color-component-logo-number1: #ffffff;
 --ffe-color-component-logo-circle-dark-red: #af0000;
 --ffe-color-component-logo-circle-light-red: #e60000;
-}
+--ffe-color-border-primary-default: #ffffff26;
+--ffe-color-border-primary-default-hover: #ffffff33;
+--ffe-color-border-primary-default-pressed: #ffffff40;
+--ffe-color-border-primary-subtle: #ffffff13;
+--ffe-color-border-primary-subtle-hover: #ffffff1a;
+--ffe-color-border-primary-subtle-pressed: #ffffff26;
+--ffe-color-border-primary-emphasis: #9ec2e5;
+--ffe-color-border-feedback-info: #6096bd;
+--ffe-color-border-feedback-success: #48a781;
+--ffe-color-border-feedback-warning: #cc7205;
+--ffe-color-border-feedback-critical: #e44244;
+--ffe-color-border-feedback-tip: #a39db9;
+--ffe-color-border-interactive-focus: #ea910b;
+--ffe-color-border-interactive-selected: #9ec2e5;
+}
+.dark-mode .ffe-accent-mode, .dark-mode.ffe-accent-mode {
+  --ffe-color-background-default: #141414;
+--ffe-color-background-subtle: #1f1f1f;
+--ffe-color-surface-primary-default: #292929;
+--ffe-color-surface-primary-default-hover: #333333;
+--ffe-color-surface-primary-default-pressed: #3d3d3d;
+--ffe-color-surface-secondary-default: #0c2232;
+--ffe-color-surface-secondary-default-hover: #102d43;
+--ffe-color-surface-secondary-default-pressed: #163853;
+--ffe-color-surface-tertiary-default: #1d192f;
+--ffe-color-surface-tertiary-default-hover: #27223a;
+--ffe-color-surface-tertiary-default-pressed: #312c44;
+--ffe-color-surface-neutral-default: #3d3d3d;
+--ffe-color-surface-neutral-default-hover: #474747;
+--ffe-color-surface-neutral-default-pressed: #525252;
+--ffe-color-surface-feedback-info: #163853;
+--ffe-color-surface-feedback-success: #0a4330;
+--ffe-color-surface-feedback-warning: #491c00;
+--ffe-color-surface-feedback-critical: #640e10;
+--ffe-color-surface-feedback-tip: #312c44;
+--ffe-color-fill-primary-default: #55709b;
+--ffe-color-fill-primary-default-hover: #748db4;
+--ffe-color-fill-primary-default-pressed: #90a9d0;
+--ffe-color-fill-primary-selected-default: #f7fafd;
+--ffe-color-fill-primary-selected-hover: #d7e7f4;
+--ffe-color-fill-primary-selected-pressed: #c3d9ef;
+--ffe-color-fill-primary-subtle: #374b6c;
+--ffe-color-fill-primary-subtle-hover: #3e5579;
+--ffe-color-fill-primary-subtle-pressed: #47618a;
+--ffe-color-fill-primary-invisible: #ffffff00;
+--ffe-color-fill-secondary-default: #457aa1;
+--ffe-color-fill-secondary-default-hover: #6096bd;
+--ffe-color-fill-secondary-default-pressed: #7eb5d2;
+--ffe-color-fill-secondary-subtle: #2b5a7c;
+--ffe-color-fill-secondary-subtle-hover: #356488;
+--ffe-color-fill-secondary-subtle-pressed: #3b6f96;
+--ffe-color-fill-tertiary-default: #7b718e;
+--ffe-color-fill-tertiary-default-hover: #a39db9;
+--ffe-color-fill-tertiary-default-pressed: #b4aecb;
+--ffe-color-fill-tertiary-subtle: #4e4a64;
+--ffe-color-fill-tertiary-subtle-hover: #5a5671;
+--ffe-color-fill-tertiary-subtle-pressed: #665d79;
+--ffe-color-fill-neutral-default: #ffffff33;
+--ffe-color-fill-neutral-default-hover: #ffffff40;
+--ffe-color-fill-neutral-default-pressed: #ffffff4d;
+--ffe-color-fill-neutral-subtle: #ffffff13;
+--ffe-color-fill-neutral-subtle-hover: #ffffff1a;
+--ffe-color-fill-neutral-subtle-pressed: #ffffff26;
+--ffe-color-fill-neutral-extra-subtle: #ffffff06;
+--ffe-color-fill-neutral-extra-subtle-hover: #ffffff0d;
+--ffe-color-fill-neutral-extra-subtle-pressed: #ffffff13;
+--ffe-color-fill-feedback-info: #7eb5d2;
+--ffe-color-fill-feedback-info-subtle: #234f71;
+--ffe-color-fill-feedback-success: #6abe97;
+--ffe-color-fill-feedback-success-subtle: #09583b;
+--ffe-color-fill-feedback-warning: #ea910b;
+--ffe-color-fill-feedback-warning-subtle: #682c00;
+--ffe-color-fill-feedback-critical: #ff5e5c;
+--ffe-color-fill-feedback-critical-subtle: #7c1214;
+--ffe-color-fill-feedback-tip: #c1c1dc;
+--ffe-color-fill-feedback-tip-subtle: #45415a;
+--ffe-color-foreground-default: #ffffff;
+--ffe-color-foreground-subtle: #c2c2c2;
+--ffe-color-foreground-emphasis: #d7e7f4;
+--ffe-color-foreground-inverse: #020a0a;
+--ffe-color-foreground-interactive-link: #c3d9ef;
+--ffe-color-foreground-interactive-link-hover: #b6d1ec;
+--ffe-color-foreground-interactive-link-pressed: #9ec2e5;
+--ffe-color-foreground-interactive-link-active: #f7fafd;
+--ffe-color-foreground-feedback-info: #c3dfea;
+--ffe-color-foreground-feedback-success: #b2e6cd;
+--ffe-color-foreground-feedback-warning: #ffc675;
+--ffe-color-foreground-feedback-critical: #ffaea8;
+--ffe-color-foreground-feedback-tip: #d3d3ea;
+--ffe-color-component-form-input-foreground-default: #ffffff;
+--ffe-color-component-form-input-foreground-subtle: #c2c2c2;
+--ffe-color-component-form-input-foreground-placeholder: #adadad;
+--ffe-color-component-form-input-foreground-disabled: #8f8f8f;
+--ffe-color-component-form-input-foreground-read-only: #c2c2c2;
+--ffe-color-component-form-input-foreground-error: #ffaea8;
+--ffe-color-component-form-input-border-active: #d7e7f4;
+--ffe-color-component-form-input-fill-default: #292929;
+--ffe-color-component-form-input-fill-default-hover: #333333;
+--ffe-color-component-form-input-fill-default-pressed: #3d3d3d;
+--ffe-color-component-form-input-fill-disabled: #5c5c5c;
+--ffe-color-component-form-input-fill-read-only: #474747;
+--ffe-color-component-form-input-fill-error: #640e10;
+--ffe-color-component-form-toggleswitch-handle-default: #ffffff;
+--ffe-color-component-form-toggleswitch-fill-default: #7a7a7a;
+--ffe-color-component-form-toggleswitch-fill-default-hover: #8f8f8f;
+--ffe-color-component-form-toggleswitch-fill-default-pressed: #adadad;
+--ffe-color-component-form-toggleswitch-fill-selected: #48a781;
+--ffe-color-component-form-toggleswitch-fill-selected-hover: #6abe97;
+--ffe-color-component-form-toggleswitch-fill-selected-pressed: #8fd1b1;
+--ffe-color-component-form-toggleswitch-fill-critical: #e44244;
+--ffe-color-component-button-action-border-default: #48a781;
+--ffe-color-component-button-action-border-hover: #6abe97;
+--ffe-color-component-button-action-border-pressed: #8fd1b1;
+--ffe-color-component-button-action-fill-default: #00754e;
+--ffe-color-component-button-action-fill-hover: #2a7e5b;
+--ffe-color-component-button-action-fill-pressed: #409674;
+--ffe-color-component-button-action-foreground-default: #ffffff;
+--ffe-color-component-button-action-foreground-hover: #ffffff;
+--ffe-color-component-button-primary-border-default: #9ec2e5;
+--ffe-color-component-button-primary-border-hover: #c3d9ef;
+--ffe-color-component-button-primary-border-pressed: #d7e7f4;
+--ffe-color-component-button-primary-fill-default: #005aa4;
+--ffe-color-component-button-primary-fill-hover: #1566b2;
+--ffe-color-component-button-primary-fill-pressed: #2975c2;
+--ffe-color-component-button-primary-foreground-default: #ffffff;
+--ffe-color-component-button-primary-foreground-hover: #ffffff;
+--ffe-color-component-button-secondary-border-default: #f7fafd;
+--ffe-color-component-button-secondary-border-hover: #f7fafd;
+--ffe-color-component-button-secondary-border-pressed: #f7fafd;
+--ffe-color-component-button-secondary-fill-default: #ffffff00;
+--ffe-color-component-button-secondary-fill-hover: #333333;
+--ffe-color-component-button-secondary-fill-pressed: #3d3d3d;
+--ffe-color-component-button-secondary-foreground-default: #ffffff;
+--ffe-color-component-button-secondary-foreground-hover: #ffffff;
+--ffe-color-component-button-tertiary-fill-default: #ffffff00;
+--ffe-color-component-button-tertiary-fill-hover: #333333;
+--ffe-color-component-button-tertiary-fill-pressed: #3d3d3d;
+--ffe-color-component-button-tertiary-foreground-default: #f7fafd;
+--ffe-color-component-button-tertiary-foreground-hover: #f7fafd;
+--ffe-color-component-logo-name: #ffffff;
+--ffe-color-component-logo-number1: #ffffff;
+--ffe-color-component-logo-circle-dark-red: #af0000;
+--ffe-color-component-logo-circle-light-red: #e60000;
+--ffe-color-border-primary-default: #ffffff26;
+--ffe-color-border-primary-default-hover: #ffffff33;
+--ffe-color-border-primary-default-pressed: #ffffff40;
+--ffe-color-border-primary-subtle: #ffffff13;
+--ffe-color-border-primary-subtle-hover: #ffffff1a;
+--ffe-color-border-primary-subtle-pressed: #ffffff26;
+--ffe-color-border-primary-emphasis: #9ec2e5;
+--ffe-color-border-feedback-info: #6096bd;
+--ffe-color-border-feedback-success: #48a781;
+--ffe-color-border-feedback-warning: #cc7205;
+--ffe-color-border-feedback-critical: #e44244;
+--ffe-color-border-feedback-tip: #a39db9;
+--ffe-color-border-interactive-focus: #f49f1f;
+--ffe-color-border-interactive-selected: #9ec2e5;
+}