npm - @inera/ids-design - Versions diffs - 7.2.2 → 8.0.0 - Mend

@inera/ids-design 7.2.2 → 8.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 (200) hide show

package/tokens/themes/inera-tokens.css CHANGED Viewed

@@ -1,6 +1,6 @@
-.ids--inera.ids--light,
-.ids--inera.ids--dark {
-  --ids-palette-primary-30: #7e2a4c;
+/* Autogenerated by src/style-dictionary/build.js */
+.ids--inera.ids--light, .ids--inera.ids--dark {
+--ids-palette-primary-30: #7e2a4c;
   --ids-palette-primary-40: #a33662;
   --ids-palette-primary-50: #c03f73;
   --ids-palette-primary-60: #e481a9;
@@ -8,6 +8,7 @@
   --ids-palette-secondary-40: #e7dac5;
   --ids-palette-secondary-90: #f6f1e9;
   --ids-palette-secondary-95: #f9f6f1;
+  --ids-palette-accent-20: #254637;
   --ids-palette-accent-30: #305a47;
   --ids-palette-accent-40: #40775e;
   --ids-palette-accent-90: #94d1b6;
@@ -24,267 +25,308 @@
   --ids-palette-attention-95: #fff7d9;
   --ids-palette-error-40: #db0f00;
   --ids-palette-error-60: #f52819;
-  --ids-palette-error-99: #ffeceb;
+  --ids-palette-error-99: #ffeceb;--ids-search-button-small-font-seize: 1.125rem;
+  --ids-search-button-small-line-height: 1.5rem;
+  --ids-input-height: var(--ids-48);
+  --ids-input-padding-x: var(--ids-20);
+  --ids-textarea-padding-x: var(--ids-20);
+  --ids-select-height: var(--ids-48);
+  --ids-select-padding-x: var(--ids-20);
+  --ids-search-button-small-padding-x: var(--ids-28);
+  --ids-search-button-small-padding-y: var(--ids-12);
 }
 .ids--inera.ids--light {
-  --ids-input-height: 3rem;
-  --ids-input-padding-x: 1.25rem;
-  --ids-textarea-padding-x: 1.25rem;
-  --ids-select-height: 3rem;
-  --ids-select-padding-x: 1.25rem;
-  --ids-search-button-small-padding-x: 1.75rem;
-  --ids-search-button-small-padding-y: 0.75rem;
-  --ids-search-button-small-font-seize: 1.125rem;
-  --ids-search-button-small-line-height: 1.5rem;
-  --ids-font-family-primary: Open sans;
+--ids-font-family-primary: Open sans;
   --ids-font-family-secondary: Poppins;
-  --ids-color-surface-background-default: #ffffff;
-  --ids-color-surface-border-default: #727373;
-  --ids-color-surface-text-on-default: #353636;
-  --ids-color-surface-background-elevated-1: #ffffff;
-  --ids-color-surface-border-elevated-1: #cccccc;
-  --ids-color-surface-text-on-elevated-1: #353636;
-  --ids-color-surface-text-subtle-on-elevated-1: #727373;
-  --ids-color-surface-background-elevated-2: #ffffff;
-  --ids-color-surface-text-on-elevated-2: #353636;
-  --ids-color-surface-border-elevated-2: #cccccc;
-  --ids-color-surface-background-alternative: #f9f6f1;
-  --ids-color-surface-text-on-alternative: #353636;
-  --ids-color-surface-background-alternative-elevated-1: #f9f6f1;
-  --ids-color-surface-text-on-alternative-elevated-1: #353636;
-  --ids-color-brand-text-logo: #a33662;
-  --ids-color-brand-text-primary: #a33662;
-  --ids-color-brand-background-primary: #a33662;
-  --ids-color-brand-background-primary-subtle: #7e2a4c;
-  --ids-color-brand-background-primary-subtle-2: #c03f73;
-  --ids-color-brand-border-primary: #a33662;
-  --ids-color-brand-text-on-primary: #ffffff;
-  --ids-color-brand-background-secondary: #f9f6f1;
-  --ids-color-brand-text-on-secondary: #353636;
-  --ids-color-navigation-background-default: #a33662;
-  --ids-color-navigation-border-default: #a33662;
-  --ids-color-navigation-text-default: #7e2a4c;
-  --ids-color-navigation-icon-default: #a33662;
-  --ids-color-navigation-text-on-default: #ffffff;
-  --ids-color-navigation-background-hover: #7e2a4c;
-  --ids-color-navigation-border-hover: #7e2a4c;
-  --ids-color-navigation-text-hover: #7e2a4c;
-  --ids-color-navigation-text-on-hover: #ffffff;
-  --ids-color-navigation-background-active: #7e2a4c;
-  --ids-color-navigation-border-active: #7e2a4c;
-  --ids-color-navigation-text-active: #7e2a4c;
-  --ids-color-navigation-text-on-active: #ffffff;
-  --ids-color-interactive-background-default: #40775e;
-  --ids-color-interactive-border-default: #40775e;
-  --ids-color-interactive-text-default: #40775e;
-  --ids-color-interactive-text-on-default: #ffffff;
-  --ids-color-interactive-background-hover: #305a47;
-  --ids-color-interactive-border-hover: #305a47;
-  --ids-color-interactive-text-hover: #305a47;
-  --ids-color-interactive-text-on-hover: #ffffff;
-  --ids-color-interactive-background-active: #305a47;
-  --ids-color-interactive-border-active: #305a47;
-  --ids-color-interactive-text-active: #305a47;
-  --ids-color-interactive-text-on-active: #ffffff;
-  --ids-color-interactive-background-disabled: #ffffff;
-  --ids-color-interactive-border-disabled: #cccccc;
-  --ids-color-interactive-text-disabled: #727373;
-  --ids-color-interactive-text-on-disabled: #727373;
-  --ids-color-interactive-focus-outline: #353636;
-  --ids-color-interactive-focus-outline-on: #ffffff;
-  --ids-color-feedback-background-information: #f0f0f0;
-  --ids-color-feedback-border-information: #727373;
-  --ids-color-feedback-text-on-information: #353636;
-  --ids-color-feedback-text-information: #353636;
-  --ids-color-feedback-background-success: #e7f7ea;
-  --ids-color-feedback-border-success: #2c863f;
-  --ids-color-feedback-text-on-success: #353636;
-  --ids-color-feedback-text-success: #2c863f;
-  --ids-color-feedback-background-attention: #fff7d9;
-  --ids-color-feedback-border-attention: #727373;
-  --ids-color-feedback-text-on-attention: #353636;
-  --ids-color-feedback-text-attention: #353636;
-  --ids-color-feedback-background-error: #ffeceb;
-  --ids-color-feedback-border-error: #db0f00;
-  --ids-color-feedback-text-on-error: #353636;
-  --ids-color-feedback-text-error: #db0f00;
-  --ids-color-feedback-background-notification: #a33662;
-  --ids-color-feedback-text-on-notification: #ffffff;
-  --ids-color-form-background-default: #f9f6f1;
-  --ids-color-form-border-default: #40775e;
-  --ids-color-form-text-on-default: #353636;
-  --ids-color-form-placeholder-text-on-default: #727373;
-  --ids-color-form-background-light-default: #ffffff;
-  --ids-color-form-border-light-default: #40775e;
-  --ids-color-form-text-on-light-default: #353636;
-  --ids-color-form-placeholder-text-on-light-default: #727373;
-  --ids-color-form-background-active: #f9f6f1;
-  --ids-color-form-border-active: #40775e;
-  --ids-color-form-text-on-active: #353636;
-  --ids-color-form-placeholder-text-on-active: #727373;
-  --ids-color-form-background-light-active: #ffffff;
-  --ids-color-form-border-light-active: #40775e;
-  --ids-color-form-text-on-light-active: #353636;
-  --ids-color-form-placeholder-text-on-light-active: #727373;
-  --ids-color-form-background-disabled: #f0f0f0;
-  --ids-color-form-border-disabled: #727373;
-  --ids-color-form-text-on-light-disabled: #727373;
-  --ids-color-form-placeholder-text-on-light-disabled: #727373;
-  --ids-color-form-background-light-disabled: #f0f0f0;
-  --ids-color-form-border-light-disabled: #727373;
-  --ids-color-form-text-on-disabled: #727373;
-  --ids-color-form-placeholder-text-on-disabled: #727373;
-  --ids-color-form-background-invalid: #ffeceb;
-  --ids-color-form-border-invalid: #db0f00;
-  --ids-color-form-text-on-invalid: #353636;
-  --ids-color-form-placeholder-text-on-invalid: #727373;
-  --ids-color-form-message-background-invalid: #ffffff;
-  --ids-color-form-message-border-invalid: #db0f00;
-  --ids-color-form-message-text-on-invalid: #db0f00;
-  --ids-color-form-background-light-invalid: #ffeceb;
-  --ids-color-form-border-light-invalid: #db0f00;
-  --ids-color-form-text-on-light-invalid: #353636;
-  --ids-color-form-placeholder-text-on-light-invalid: #727373;
-  --ids-color-heading-text-xxl: #a33662;
-  --ids-color-heading-text-xl: #a33662;
-  --ids-color-heading-text-l: #a33662;
-  --ids-color-heading-text-m: #a33662;
-  --ids-color-heading-text-s: #353636;
-  --ids-color-heading-text-xs: #353636;
+  --ids-color-surface-shadow-elevated-1: #000000;
+  --ids-color-surface-shadow-elevated-2: #000000;
   --ids-border-radius-primary: 0.1875rem;
   --ids-border-radius-secondary: 0.3125rem;
   --ids-border-width-general: 0.0625rem;
   --ids-border-width-invalid: 0.125rem;
+  --ids-shadow-position-y-elevated-1-effect-1: 1.875rem;
+  --ids-shadow-position-y-elevated-1-effect-2: 1.0625rem;
+  --ids-shadow-position-y-elevated-1-effect-3: 0.4375rem;
+  --ids-shadow-position-y-elevated-1-effect-4: 0.125rem;
+  --ids-shadow-position-y-elevated-2-effect-1: 3.875rem;
+  --ids-shadow-position-y-elevated-2-effect-2: 2.1875rem;
+  --ids-shadow-position-y-elevated-2-effect-3: 1rem;
+  --ids-shadow-position-y-elevated-2-effect-4: 0.25rem;
+  --ids-shadow-blur-elevated-1-effect-1: 0.75rem;
+  --ids-shadow-blur-elevated-1-effect-2: 0.625rem;
+  --ids-shadow-blur-elevated-1-effect-3: 0.4375rem;
+  --ids-shadow-blur-elevated-1-effect-4: 0.25rem;
+  --ids-shadow-blur-elevated-2-effect-1: 1.5625rem;
+  --ids-shadow-blur-elevated-2-effect-2: 1.3125rem;
+  --ids-shadow-blur-elevated-2-effect-3: 1rem;
+  --ids-shadow-blur-elevated-2-effect-4: 0.5625rem;
+  --ids-shadow-opacity-elevated-1-effect-1: 0.125rem;
+  --ids-shadow-opacity-elevated-1-effect-2: 0.375rem;
+  --ids-shadow-opacity-elevated-1-effect-3: 0.625rem;
+  --ids-shadow-opacity-elevated-1-effect-4: 0.75rem;
+  --ids-shadow-opacity-elevated-2-effect-1: 0.125rem;
+  --ids-shadow-opacity-elevated-2-effect-2: 0;
+  --ids-shadow-opacity-elevated-2-effect-3: 0.75rem;
+  --ids-shadow-opacity-elevated-2-effect-4: 0.875rem;
+  --ids-color-surface-background-default: var(--ids-palette-neutral-100);
+  --ids-color-surface-border-default: var(--ids-palette-neutral-40);
+  --ids-color-surface-text-on-default: var(--ids-palette-neutral-20);
+  --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-100);
+  --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-90);
+  --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-20);
+  --ids-color-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-40);
+  --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-100);
+  --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-20);
+  --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-90);
+  --ids-color-surface-background-alternative: var(--ids-palette-secondary-95);
+  --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-20);
+  --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-secondary-95);
+  --ids-color-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-20);
+  --ids-color-brand-text-logo: var(--ids-palette-primary-40);
+  --ids-color-brand-text-primary: var(--ids-palette-primary-40);
+  --ids-color-brand-background-primary: var(--ids-palette-primary-40);
+  --ids-color-brand-background-primary-subtle: var(--ids-palette-primary-30);
+  --ids-color-brand-background-primary-subtle-2: var(--ids-palette-primary-50);
+  --ids-color-brand-border-primary: var(--ids-palette-primary-40);
+  --ids-color-brand-text-on-primary: var(--ids-palette-neutral-100);
+  --ids-color-brand-background-secondary: var(--ids-palette-secondary-95);
+  --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-20);
+  --ids-color-navigation-background-default: var(--ids-palette-primary-40);
+  --ids-color-navigation-border-default: var(--ids-palette-primary-40);
+  --ids-color-navigation-text-default: var(--ids-palette-primary-30);
+  --ids-color-navigation-icon-default: var(--ids-palette-primary-40);
+  --ids-color-navigation-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-navigation-background-hover: var(--ids-palette-primary-30);
+  --ids-color-navigation-border-hover: var(--ids-palette-primary-30);
+  --ids-color-navigation-text-hover: var(--ids-palette-primary-30);
+  --ids-color-navigation-text-on-hover: var(--ids-palette-neutral-100);
+  --ids-color-navigation-background-active: var(--ids-palette-primary-30);
+  --ids-color-navigation-border-active: var(--ids-palette-primary-30);
+  --ids-color-navigation-text-active: var(--ids-palette-primary-30);
+  --ids-color-navigation-text-on-active: var(--ids-palette-neutral-100);
+  --ids-color-interactive-background-default: var(--ids-palette-accent-40);
+  --ids-color-interactive-border-default: var(--ids-palette-accent-40);
+  --ids-color-interactive-text-default: var(--ids-palette-accent-40);
+  --ids-color-interactive-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-interactive-background-hover: var(--ids-palette-accent-30);
+  --ids-color-interactive-border-hover: var(--ids-palette-accent-30);
+  --ids-color-interactive-text-hover: var(--ids-palette-accent-30);
+  --ids-color-interactive-text-on-hover: var(--ids-palette-neutral-100);
+  --ids-color-interactive-background-active: var(--ids-palette-accent-20);
+  --ids-color-interactive-border-active: var(--ids-palette-accent-20);
+  --ids-color-interactive-text-active: var(--ids-palette-accent-20);
+  --ids-color-interactive-text-on-active: var(--ids-palette-neutral-100);
+  --ids-color-interactive-background-disabled: var(--ids-palette-neutral-100);
+  --ids-color-interactive-border-disabled: var(--ids-palette-neutral-90);
+  --ids-color-interactive-text-disabled: var(--ids-palette-neutral-40);
+  --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
+  --ids-color-interactive-focus-outline: var(--ids-palette-neutral-20);
+  --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-100);
+  --ids-color-feedback-background-information: var(--ids-palette-neutral-99);
+  --ids-color-feedback-border-information: var(--ids-palette-neutral-40);
+  --ids-color-feedback-text-on-information: var(--ids-palette-neutral-20);
+  --ids-color-feedback-text-information: var(--ids-palette-neutral-20);
+  --ids-color-feedback-background-success: var(--ids-palette-success-99);
+  --ids-color-feedback-border-success: var(--ids-palette-success-40);
+  --ids-color-feedback-text-on-success: var(--ids-palette-neutral-20);
+  --ids-color-feedback-text-success: var(--ids-palette-success-40);
+  --ids-color-feedback-background-attention: var(--ids-palette-attention-95);
+  --ids-color-feedback-border-attention: var(--ids-palette-neutral-40);
+  --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-20);
+  --ids-color-feedback-text-attention: var(--ids-palette-neutral-20);
+  --ids-color-feedback-background-error: var(--ids-palette-error-99);
+  --ids-color-feedback-border-error: var(--ids-palette-error-40);
+  --ids-color-feedback-text-on-error: var(--ids-palette-neutral-20);
+  --ids-color-feedback-text-error: var(--ids-palette-error-40);
+  --ids-color-feedback-background-notification: var(--ids-palette-primary-40);
+  --ids-color-feedback-text-on-notification: var(--ids-palette-neutral-100);
+  --ids-color-form-background-default: var(--ids-palette-secondary-95);
+  --ids-color-form-border-default: var(--ids-palette-accent-40);
+  --ids-color-form-text-on-default: var(--ids-palette-neutral-20);
+  --ids-color-form-placeholder-text-on-default: var(--ids-palette-neutral-40);
+  --ids-color-form-background-light-default: var(--ids-palette-neutral-100);
+  --ids-color-form-border-light-default: var(--ids-palette-accent-40);
+  --ids-color-form-text-on-light-default: var(--ids-palette-neutral-20);
+  --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-40);
+  --ids-color-form-background-active: var(--ids-palette-secondary-95);
+  --ids-color-form-border-active: var(--ids-palette-accent-40);
+  --ids-color-form-text-on-active: var(--ids-palette-neutral-20);
+  --ids-color-form-placeholder-text-on-active: var(--ids-palette-neutral-40);
+  --ids-color-form-background-light-active: var(--ids-palette-neutral-100);
+  --ids-color-form-border-light-active: var(--ids-palette-accent-40);
+  --ids-color-form-text-on-light-active: var(--ids-palette-neutral-20);
+  --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-40);
+  --ids-color-form-background-disabled: var(--ids-palette-neutral-99);
+  --ids-color-form-border-disabled: var(--ids-palette-neutral-40);
+  --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-40);
+  --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-40);
+  --ids-color-form-background-light-disabled: var(--ids-palette-neutral-99);
+  --ids-color-form-border-light-disabled: var(--ids-palette-neutral-40);
+  --ids-color-form-text-on-disabled: var(--ids-palette-neutral-40);
+  --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-40);
+  --ids-color-form-background-invalid: var(--ids-palette-error-99);
+  --ids-color-form-border-invalid: var(--ids-palette-error-40);
+  --ids-color-form-text-on-invalid: var(--ids-palette-neutral-20);
+  --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-40);
+  --ids-color-form-message-background-invalid: var(--ids-palette-neutral-100);
+  --ids-color-form-message-border-invalid: var(--ids-palette-error-40);
+  --ids-color-form-message-text-on-invalid: var(--ids-palette-error-40);
+  --ids-color-form-background-light-invalid: var(--ids-palette-error-99);
+  --ids-color-form-border-light-invalid: var(--ids-palette-error-40);
+  --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-20);
+  --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-40);
+  --ids-color-heading-text-xxl: var(--ids-color-brand-text-primary);
+  --ids-color-heading-text-xl: var(--ids-color-brand-text-primary);
+  --ids-color-heading-text-l: var(--ids-color-brand-text-primary);
+  --ids-color-heading-text-m: var(--ids-color-brand-text-primary);
+  --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
+  --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
 }
 .ids--inera.ids--dark {
-  --ids-input-height: 3rem;
-  --ids-input-padding-x: 1.25rem;
-  --ids-textarea-padding-x: 1.25rem;
-  --ids-select-height: 3rem;
-  --ids-select-padding-x: 1.25rem;
-  --ids-search-button-small-padding-x: 1.75rem;
-  --ids-search-button-small-padding-y: 0.75rem;
-  --ids-search-button-small-font-seize: 1.125rem;
-  --ids-search-button-small-line-height: 1.5rem;
-  --ids-font-family-primary: Open sans;
+--ids-font-family-primary: Open sans;
   --ids-font-family-secondary: Poppins;
-  --ids-color-surface-background-default: #151515;
-  --ids-color-surface-border-default: #727373;
-  --ids-color-surface-text-on-default: #ffffff;
-  --ids-color-surface-background-elevated-1: #252525;
-  --ids-color-surface-border-elevated-1: #727373;
-  --ids-color-surface-text-on-elevated-1: #ffffff;
-  --ids-color-surface-text-subtle-on-elevated-1: #f0f0f0;
-  --ids-color-surface-background-elevated-2: #353636;
-  --ids-color-surface-text-on-elevated-2: #ffffff;
-  --ids-color-surface-border-elevated-2: #727373;
-  --ids-color-surface-background-alternative: #151515;
-  --ids-color-surface-text-on-alternative: #ffffff;
-  --ids-color-surface-background-alternative-elevated-1: #252525;
-  --ids-color-surface-text-on-alternative-elevated-1: #ffffff;
-  --ids-color-brand-text-logo: #c03f73;
-  --ids-color-brand-text-primary: #e481a9;
-  --ids-color-brand-background-primary: #252525;
-  --ids-color-brand-background-primary-subtle: #7e2a4c;
-  --ids-color-brand-background-primary-subtle-2: #151515;
-  --ids-color-brand-border-primary: #c03f73;
-  --ids-color-brand-text-on-primary: #ffffff;
-  --ids-color-brand-background-secondary: #252525;
-  --ids-color-brand-text-on-secondary: #ffffff;
-  --ids-color-navigation-background-default: #151515;
-  --ids-color-navigation-border-default: #e3abc1;
-  --ids-color-navigation-text-default: #ffffff;
-  --ids-color-navigation-icon-default: #e3abc1;
-  --ids-color-navigation-text-on-default: #e3abc1;
-  --ids-color-navigation-background-hover: #e481a9;
-  --ids-color-navigation-border-hover: #e481a9;
-  --ids-color-navigation-text-hover: #ffffff;
-  --ids-color-navigation-text-on-hover: #e3abc1;
-  --ids-color-navigation-background-active: #e481a9;
-  --ids-color-navigation-border-active: #e481a9;
-  --ids-color-navigation-text-active: #ffffff;
-  --ids-color-navigation-text-on-active: #e3abc1;
-  --ids-color-interactive-background-default: #94d1b6;
-  --ids-color-interactive-border-default: #94d1b6;
-  --ids-color-interactive-text-default: #94d1b6;
-  --ids-color-interactive-text-on-default: #151515;
-  --ids-color-interactive-background-hover: #ffffff;
-  --ids-color-interactive-border-hover: #ffffff;
-  --ids-color-interactive-text-hover: #ffffff;
-  --ids-color-interactive-text-on-hover: #305a47;
-  --ids-color-interactive-background-active: #ffffff;
-  --ids-color-interactive-border-active: #ffffff;
-  --ids-color-interactive-text-active: #ffffff;
-  --ids-color-interactive-text-on-active: #305a47;
-  --ids-color-interactive-background-disabled: #cccccc;
-  --ids-color-interactive-border-disabled: #cccccc;
-  --ids-color-interactive-text-disabled: #cccccc;
-  --ids-color-interactive-text-on-disabled: #727373;
-  --ids-color-interactive-focus-outline: #f0f0f0;
-  --ids-color-interactive-focus-outline-on: #353636;
-  --ids-color-feedback-background-information: #252525;
-  --ids-color-feedback-border-information: #727373;
-  --ids-color-feedback-text-on-information: #ffffff;
-  --ids-color-feedback-text-information: #cccccc;
-  --ids-color-feedback-background-success: #252525;
-  --ids-color-feedback-border-success: #2c863f;
-  --ids-color-feedback-text-on-success: #ffffff;
-  --ids-color-feedback-text-success: #2c863f;
-  --ids-color-feedback-background-attention: #252525;
-  --ids-color-feedback-border-attention: #ffd748;
-  --ids-color-feedback-text-on-attention: #ffffff;
-  --ids-color-feedback-text-attention: #ffd748;
-  --ids-color-feedback-background-error: #252525;
-  --ids-color-feedback-border-error: #f52819;
-  --ids-color-feedback-text-on-error: #ffffff;
-  --ids-color-feedback-text-error: #f52819;
-  --ids-color-feedback-background-notification: #c03f73;
-  --ids-color-feedback-text-on-notification: #ffffff;
-  --ids-color-form-background-default: #151515;
-  --ids-color-form-border-default: #94d1b6;
-  --ids-color-form-text-on-default: #ffffff;
-  --ids-color-form-placeholder-text-on-default: #f0f0f0;
-  --ids-color-form-background-light-default: #151515;
-  --ids-color-form-border-light-default: #94d1b6;
-  --ids-color-form-text-on-light-default: #ffffff;
-  --ids-color-form-placeholder-text-on-light-default: #f0f0f0;
-  --ids-color-form-background-active: #151515;
-  --ids-color-form-border-active: #ffffff;
-  --ids-color-form-text-on-active: #ffffff;
-  --ids-color-form-placeholder-text-on-active: #f0f0f0;
-  --ids-color-form-background-light-active: #151515;
-  --ids-color-form-border-light-active: #ffffff;
-  --ids-color-form-text-on-light-active: #ffffff;
-  --ids-color-form-placeholder-text-on-light-active: #f0f0f0;
-  --ids-color-form-background-disabled: #151515;
-  --ids-color-form-border-disabled: #cccccc;
-  --ids-color-form-text-on-light-disabled: #f0f0f0;
-  --ids-color-form-placeholder-text-on-light-disabled: #f0f0f0;
-  --ids-color-form-background-light-disabled: #151515;
-  --ids-color-form-border-light-disabled: #cccccc;
-  --ids-color-form-text-on-disabled: #f0f0f0;
-  --ids-color-form-placeholder-text-on-disabled: #f0f0f0;
-  --ids-color-form-background-invalid: #151515;
-  --ids-color-form-border-invalid: #f52819;
-  --ids-color-form-text-on-invalid: #ffffff;
-  --ids-color-form-placeholder-text-on-invalid: #f0f0f0;
-  --ids-color-form-message-background-invalid: #353636;
-  --ids-color-form-message-border-invalid: #f52819;
-  --ids-color-form-message-text-on-invalid: #ffffff;
-  --ids-color-form-background-light-invalid: #151515;
-  --ids-color-form-border-light-invalid: #f52819;
-  --ids-color-form-text-on-light-invalid: #ffffff;
-  --ids-color-form-placeholder-text-on-light-invalid: #f0f0f0;
-  --ids-color-heading-text-xxl: #ffffff;
-  --ids-color-heading-text-xl: #ffffff;
-  --ids-color-heading-text-l: #ffffff;
-  --ids-color-heading-text-m: #ffffff;
-  --ids-color-heading-text-s: #ffffff;
-  --ids-color-heading-text-xs: #ffffff;
+  --ids-color-surface-shadow-elevated-1: #ffffff;
+  --ids-color-surface-shadow-elevated-2: #ffffff;
   --ids-border-radius-primary: 0.1875rem;
   --ids-border-radius-secondary: 0.3125rem;
   --ids-border-width-general: 0.125rem;
   --ids-border-width-invalid: 0.125rem;
-}
+  --ids-shadow-position-y-elevated-1-effect-1: 1.875rem;
+  --ids-shadow-position-y-elevated-1-effect-2: 1.0625rem;
+  --ids-shadow-position-y-elevated-1-effect-3: 0.4375rem;
+  --ids-shadow-position-y-elevated-1-effect-4: 0.125rem;
+  --ids-shadow-position-y-elevated-2-effect-1: 3.875rem;
+  --ids-shadow-position-y-elevated-2-effect-2: 2.1875rem;
+  --ids-shadow-position-y-elevated-2-effect-3: 1rem;
+  --ids-shadow-position-y-elevated-2-effect-4: 0.25rem;
+  --ids-shadow-blur-elevated-1-effect-1: 0.75rem;
+  --ids-shadow-blur-elevated-1-effect-2: 0.625rem;
+  --ids-shadow-blur-elevated-1-effect-3: 0.4375rem;
+  --ids-shadow-blur-elevated-1-effect-4: 0.25rem;
+  --ids-shadow-blur-elevated-2-effect-1: 1.5625rem;
+  --ids-shadow-blur-elevated-2-effect-2: 1.3125rem;
+  --ids-shadow-blur-elevated-2-effect-3: 1rem;
+  --ids-shadow-blur-elevated-2-effect-4: 0.5625rem;
+  --ids-shadow-opacity-elevated-1-effect-1: 0.125rem;
+  --ids-shadow-opacity-elevated-1-effect-2: 0.375rem;
+  --ids-shadow-opacity-elevated-1-effect-3: 0.625rem;
+  --ids-shadow-opacity-elevated-1-effect-4: 0.75rem;
+  --ids-shadow-opacity-elevated-2-effect-1: 0.125rem;
+  --ids-shadow-opacity-elevated-2-effect-2: 0.4375rem;
+  --ids-shadow-opacity-elevated-2-effect-3: 0.75rem;
+  --ids-shadow-opacity-elevated-2-effect-4: 0.875rem;
+  --ids-color-surface-background-default: var(--ids-palette-neutral-10);
+  --ids-color-surface-border-default: var(--ids-palette-neutral-40);
+  --ids-color-surface-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-surface-background-elevated-1: var(--ids-palette-neutral-15);
+  --ids-color-surface-border-elevated-1: var(--ids-palette-neutral-40);
+  --ids-color-surface-text-on-elevated-1: var(--ids-palette-neutral-100);
+  --ids-color-surface-text-subtle-on-elevated-1: var(--ids-palette-neutral-99);
+  --ids-color-surface-background-elevated-2: var(--ids-palette-neutral-20);
+  --ids-color-surface-text-on-elevated-2: var(--ids-palette-neutral-100);
+  --ids-color-surface-border-elevated-2: var(--ids-palette-neutral-40);
+  --ids-color-surface-background-alternative: var(--ids-palette-neutral-10);
+  --ids-color-surface-text-on-alternative: var(--ids-palette-neutral-100);
+  --ids-color-surface-background-alternative-elevated-1: var(--ids-palette-neutral-15);
+  --ids-color-surface-text-on-alternative-elevated-1: var(--ids-palette-neutral-100);
+  --ids-color-brand-text-logo: var(--ids-palette-primary-50);
+  --ids-color-brand-text-primary: var(--ids-palette-primary-60);
+  --ids-color-brand-background-primary: var(--ids-palette-neutral-15);
+  --ids-color-brand-background-primary-subtle: var(--ids-palette-primary-30);
+  --ids-color-brand-background-primary-subtle-2: var(--ids-palette-neutral-10);
+  --ids-color-brand-border-primary: var(--ids-palette-primary-50);
+  --ids-color-brand-text-on-primary: var(--ids-palette-neutral-100);
+  --ids-color-brand-background-secondary: var(--ids-palette-neutral-15);
+  --ids-color-brand-text-on-secondary: var(--ids-palette-neutral-100);
+  --ids-color-navigation-background-default: var(--ids-palette-neutral-10);
+  --ids-color-navigation-border-default: var(--ids-palette-primary-90);
+  --ids-color-navigation-text-default: var(--ids-palette-neutral-100);
+  --ids-color-navigation-icon-default: var(--ids-palette-primary-90);
+  --ids-color-navigation-text-on-default: var(--ids-palette-primary-90);
+  --ids-color-navigation-background-hover: var(--ids-palette-primary-60);
+  --ids-color-navigation-border-hover: var(--ids-palette-primary-60);
+  --ids-color-navigation-text-hover: var(--ids-palette-neutral-100);
+  --ids-color-navigation-text-on-hover: var(--ids-palette-primary-90);
+  --ids-color-navigation-background-active: var(--ids-palette-primary-60);
+  --ids-color-navigation-border-active: var(--ids-palette-primary-60);
+  --ids-color-navigation-text-active: var(--ids-palette-neutral-100);
+  --ids-color-navigation-text-on-active: var(--ids-palette-primary-90);
+  --ids-color-interactive-background-default: var(--ids-palette-accent-90);
+  --ids-color-interactive-border-default: var(--ids-palette-accent-90);
+  --ids-color-interactive-text-default: var(--ids-palette-accent-90);
+  --ids-color-interactive-text-on-default: var(--ids-palette-neutral-10);
+  --ids-color-interactive-background-hover: var(--ids-palette-neutral-100);
+  --ids-color-interactive-border-hover: var(--ids-palette-neutral-100);
+  --ids-color-interactive-text-hover: var(--ids-palette-neutral-100);
+  --ids-color-interactive-text-on-hover: var(--ids-palette-accent-30);
+  --ids-color-interactive-background-active: var(--ids-palette-neutral-100);
+  --ids-color-interactive-border-active: var(--ids-palette-neutral-100);
+  --ids-color-interactive-text-active: var(--ids-palette-neutral-100);
+  --ids-color-interactive-text-on-active: var(--ids-palette-accent-30);
+  --ids-color-interactive-background-disabled: var(--ids-palette-neutral-90);
+  --ids-color-interactive-border-disabled: var(--ids-palette-neutral-90);
+  --ids-color-interactive-text-disabled: var(--ids-palette-neutral-90);
+  --ids-color-interactive-text-on-disabled: var(--ids-palette-neutral-40);
+  --ids-color-interactive-focus-outline: var(--ids-palette-neutral-99);
+  --ids-color-interactive-focus-outline-on: var(--ids-palette-neutral-99);
+  --ids-color-feedback-background-information: var(--ids-palette-neutral-15);
+  --ids-color-feedback-border-information: var(--ids-palette-neutral-40);
+  --ids-color-feedback-text-on-information: var(--ids-palette-neutral-100);
+  --ids-color-feedback-text-information: var(--ids-palette-neutral-90);
+  --ids-color-feedback-background-success: var(--ids-palette-neutral-15);
+  --ids-color-feedback-border-success: var(--ids-palette-success-40);
+  --ids-color-feedback-text-on-success: var(--ids-palette-neutral-100);
+  --ids-color-feedback-text-success: var(--ids-palette-success-40);
+  --ids-color-feedback-background-attention: var(--ids-palette-neutral-15);
+  --ids-color-feedback-border-attention: var(--ids-palette-attention-40);
+  --ids-color-feedback-text-on-attention: var(--ids-palette-neutral-100);
+  --ids-color-feedback-text-attention: var(--ids-palette-attention-40);
+  --ids-color-feedback-background-error: var(--ids-palette-neutral-15);
+  --ids-color-feedback-border-error: var(--ids-palette-error-60);
+  --ids-color-feedback-text-on-error: var(--ids-palette-neutral-100);
+  --ids-color-feedback-text-error: var(--ids-palette-error-60);
+  --ids-color-feedback-background-notification: var(--ids-palette-primary-50);
+  --ids-color-feedback-text-on-notification: var(--ids-palette-neutral-100);
+  --ids-color-form-background-default: var(--ids-palette-neutral-10);
+  --ids-color-form-border-default: var(--ids-palette-accent-90);
+  --ids-color-form-text-on-default: var(--ids-palette-neutral-100);
+  --ids-color-form-placeholder-text-on-default: var(--ids-palette-neutral-99);
+  --ids-color-form-background-light-default: var(--ids-palette-neutral-10);
+  --ids-color-form-border-light-default: var(--ids-palette-accent-90);
+  --ids-color-form-text-on-light-default: var(--ids-palette-neutral-100);
+  --ids-color-form-placeholder-text-on-light-default: var(--ids-palette-neutral-99);
+  --ids-color-form-background-active: var(--ids-palette-neutral-10);
+  --ids-color-form-border-active: var(--ids-palette-neutral-100);
+  --ids-color-form-text-on-active: var(--ids-palette-neutral-100);
+  --ids-color-form-placeholder-text-on-active: var(--ids-palette-neutral-99);
+  --ids-color-form-background-light-active: var(--ids-palette-neutral-10);
+  --ids-color-form-border-light-active: var(--ids-palette-neutral-100);
+  --ids-color-form-text-on-light-active: var(--ids-palette-neutral-100);
+  --ids-color-form-placeholder-text-on-light-active: var(--ids-palette-neutral-99);
+  --ids-color-form-background-disabled: var(--ids-palette-neutral-10);
+  --ids-color-form-border-disabled: var(--ids-palette-neutral-90);
+  --ids-color-form-text-on-light-disabled: var(--ids-palette-neutral-99);
+  --ids-color-form-placeholder-text-on-light-disabled: var(--ids-palette-neutral-99);
+  --ids-color-form-background-light-disabled: var(--ids-palette-neutral-10);
+  --ids-color-form-border-light-disabled: var(--ids-palette-neutral-90);
+  --ids-color-form-text-on-disabled: var(--ids-palette-neutral-99);
+  --ids-color-form-placeholder-text-on-disabled: var(--ids-palette-neutral-99);
+  --ids-color-form-background-invalid: var(--ids-palette-neutral-10);
+  --ids-color-form-border-invalid: var(--ids-palette-error-60);
+  --ids-color-form-text-on-invalid: var(--ids-palette-neutral-100);
+  --ids-color-form-placeholder-text-on-invalid: var(--ids-palette-neutral-99);
+  --ids-color-form-message-background-invalid: var(--ids-palette-neutral-20);
+  --ids-color-form-message-border-invalid: var(--ids-palette-error-60);
+  --ids-color-form-message-text-on-invalid: var(--ids-palette-neutral-100);
+  --ids-color-form-background-light-invalid: var(--ids-palette-neutral-10);
+  --ids-color-form-border-light-invalid: var(--ids-palette-error-60);
+  --ids-color-form-text-on-light-invalid: var(--ids-palette-neutral-100);
+  --ids-color-form-placeholder-text-on-light-invalid: var(--ids-palette-neutral-99);
+  --ids-color-heading-text-xxl: var(--ids-color-surface-text-on-default);
+  --ids-color-heading-text-xl: var(--ids-color-surface-text-on-default);
+  --ids-color-heading-text-l: var(--ids-color-surface-text-on-default);
+  --ids-color-heading-text-m: var(--ids-color-surface-text-on-default);
+  --ids-color-heading-text-s: var(--ids-color-surface-text-on-default);
+  --ids-color-heading-text-xs: var(--ids-color-surface-text-on-default);
+}

package/components/alert-global/alert-global-lit.js DELETED Viewed

@@ -1,7 +0,0 @@
-import { css, unsafeCSS } from 'lit';
-var css_248z = "@media (max-width:1023px){.ids-desktop{display:none!important}}@media (min-width:1024px){.ids-mobile{display:none!important}}.ids-alert-global{align-items:center;background-color:var(--IDS-ALERT-GLOBAL__BACKGROUND-COLOR);border:none;box-shadow:0 0 .625rem rgba(0,0,0,.3);color:var(--IDS-ALERT-GLOBAL__COLOR);display:block;font-size:1rem;line-height:1.625rem;padding:1.875rem;position:relative;z-index:1}.ids-alert-global .ids-alert-global__inner{margin-left:auto;margin-right:auto;max-width:var(--IDS__MAX-WIDTH)}.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon-headline{align-items:center;display:flex;flex-wrap:wrap;gap:1.25rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon-headline.ids-alert-global__icon-headline--agent{padding-left:2.75rem;position:relative}.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon-headline.ids-alert-global__icon-headline--agent:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\e91f\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.75rem;left:0;pointer-events:none;position:absolute;top:0}.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon{font-size:1.75rem;height:1.75rem;width:1.75rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__header{align-items:center;display:flex;flex-wrap:wrap;gap:1.25rem;justify-content:space-between}.ids-alert-global .ids-alert-global__inner .ids-alert-global__headline{display:flex;text-align:left}.ids-alert-global .ids-alert-global__inner .ids-alert-global__headline *,.ids-alert-global .ids-alert-global__inner .ids-alert-global__headline ::slotted(*){align-items:center!important;color:var(--IDS-ALERT-GLOBAL-HEADLINE-COLOR);display:flex!important;font-family:var(--IDS-ALERT-GLOBAL__HEADLINE-FONT-FAMILY)!important;font-size:1.125rem!important;font-weight:var(--IDS-ALERT__HEADLINE-FONT-WEIGHT)!important;line-height:1.75rem!important;margin:0!important}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button{background:none;border:none;color:inherit;font:inherit;outline:inherit;padding:0;-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button:focus{outline:var(--IDS-FOCUS__OUTLINE);outline-offset:var(--IDS-FOCUS__OUTLINE-OFFSET)!important}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button{align-items:center;cursor:pointer;display:flex;font-family:var(--IDS-FONT-FAMILY-BASE);font-size:1rem;justify-content:center;justify-self:end;min-height:1.5rem;min-width:1.5rem;padding-right:1.625rem;position:relative}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button:before{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:\"\\e906\";display:block;font:icon;font-family:Inera-Design-Icons!important;font-size:1.25rem;pointer-events:none;position:absolute;right:.125rem;top:50%;transform:translateY(-50%)}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button.ids-alert-global__button--expanded:before{content:\"\\e909\"}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button-text{display:none;margin-right:1rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__content{color:var(--IDS-COLOR-NEUTRAL-20);font-family:var(--IDS-BODY__FONT-FAMILY);font-size:var(--IDS-BODY__FONT-SIZE);font-style:normal;font-weight:400;letter-spacing:0;line-height:var(--IDS-BODY__LINE-HEIGHT);margin-top:.75rem}@media (min-width:1024px){.ids-alert-global .ids-alert-global__inner .ids-alert-global__icon{font-size:1.875rem;height:1.875rem;width:1.875rem}.ids-alert-global .ids-alert-global__inner .ids-alert-global__button-text{display:block}}.ids-alert-global .ids-alert-global__sub-content{margin-top:.75rem}.ids-alert-global.ids-alert-global--collapsed .ids-alert-global__content,.ids-alert-global.ids-alert-global--collapsed .ids-alert-global__sub-content{display:none}@media (max-width:1024px){.ids-alert-global.ids-alert-global--hide-icon-on-m .ids-alert-global__icon-headline--agent{padding-left:0!important}.ids-alert-global.ids-alert-global--hide-icon-on-m .ids-alert-global__icon-headline--agent:before{display:none!important}.ids-alert-global.ids-alert-global--hide-icon-on-m .ids-alert-global__icon{display:none}}.ids-alert-global.ids-alert-global--agent{background-color:var(--IDS-ALERT-GLOBAL--AGENT__BACKGROUND-COLOR)!important;color:var(--IDS-ALERT-GLOBAL--AGENT__COLOR)!important}";
-var alertGlobalLit = css`${unsafeCSS(css_248z)}`;
-export { alertGlobalLit as default };