@telesign/boreal-web-components 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/scss/variables/_theme-proximus.scss

@@ -1,225 +1,224 @@
-$boreal-accent-dark: $boreal-color-proximus-mint-mint-700;
+$boreal-primary-darker: $boreal-color-proximus-cobalt-cobalt-900;
+$boreal-primary-dark: $boreal-color-proximus-cobalt-cobalt-700;
+$boreal-primary-base: $boreal-color-proximus-cobalt-cobalt-500;
+$boreal-primary-light: $boreal-color-proximus-cobalt-cobalt-200;
+$boreal-primary-lighter: $boreal-color-proximus-cobalt-cobalt-50;
+$boreal-accent-darker: $boreal-color-proximus-cobalt-cobalt-900;
+$boreal-accent-dark: $boreal-color-proximus-cobalt-cobalt-700;
+$boreal-accent-base: $boreal-color-proximus-cobalt-cobalt-500;
+$boreal-accent-light: $boreal-color-proximus-cobalt-cobalt-300;
+$boreal-accent-lighter: $boreal-color-proximus-cobalt-cobalt-100;
+$boreal-neutral: $boreal-color-proximus-neutral-neutral-50;
+$boreal-neutral-lighter: $boreal-color-proximus-onyx-onyx-50;
+$boreal-neutral-light: $boreal-color-proximus-onyx-onyx-100;
+$boreal-neutral-paper: $boreal-color-proximus-onyx-onyx-200;
+$boreal-neutral-dark: $boreal-color-proximus-onyx-onyx-100;
+$boreal-neutral-base: $boreal-color-proximus-onyx-onyx-200;
+$boreal-neutral-darker: $boreal-color-proximus-onyx-onyx-500;
+$boreal-neutral-deep: $boreal-color-proximus-onyx-onyx-600;
+$boreal-neutral-ink: $boreal-color-proximus-onyx-onyx-700;
+$boreal-neutral-deeper: $boreal-color-proximus-onyx-onyx-800;
+$boreal-neutral-contrast: $boreal-color-proximus-onyx-onyx-900;
+$boreal-base-darker: $boreal-color-proximus-onyx-onyx-200;
+$boreal-base-dark: $boreal-color-proximus-onyx-onyx-100;
+$boreal-base-alt: $boreal-color-proximus-onyx-onyx-700;
+$boreal-base-light: $boreal-color-proximus-neutral-neutral-300;
+$boreal-base-lighter: $boreal-color-proximus-neutral-neutral-200;
+$boreal-danger-darker: $boreal-color-proximus-red-red-900;
+$boreal-danger-dark: $boreal-color-proximus-red-red-800;
+$boreal-danger-base: $boreal-color-proximus-red-red-500;
+$boreal-danger-light: $boreal-color-proximus-red-red-200;
+$boreal-danger-lighter: $boreal-color-proximus-red-red-50;
+$boreal-success-dark: $boreal-color-proximus-mint-mint-700;
+$boreal-success-base: $boreal-color-proximus-mint-mint-500;
+$boreal-success-lighter: $boreal-color-proximus-mint-mint-50;
+$boreal-success-darker: $boreal-color-proximus-mint-mint-900;
+$boreal-success-light: $boreal-color-proximus-mint-mint-200;
+$boreal-warning-darker: $boreal-color-proximus-amber-amber-900;
+$boreal-warning-dark: $boreal-color-proximus-amber-amber-700;
+$boreal-warning-base: $boreal-color-proximus-amber-amber-400;
+$boreal-warning-light: $boreal-color-proximus-amber-amber-200;
+$boreal-warning-lighter: $boreal-color-proximus-amber-amber-50;
+$boreal-information-darker: $boreal-color-proximus-cobalt-cobalt-900;
+$boreal-information-dark: $boreal-color-proximus-cobalt-cobalt-700;
+$boreal-information-base: $boreal-color-proximus-cobalt-cobalt-500;
+$boreal-information-light: $boreal-color-proximus-cobalt-cobalt-200;
+$boreal-information-lighter: $boreal-color-proximus-cobalt-cobalt-50;
+$boreal-white: $boreal-color-proximus-neutral-neutral-50;
 $boreal-black: $boreal-color-proximus-onyx-onyx-900;
-$boreal-accent-light: $boreal-color-proximus-mint-mint-200;
-$boreal-white: $boreal-color-white;
-$boreal-accent-base: $boreal-color-proximus-mint-mint-400;
-$boreal-extended-teal-light: $boreal-color-engage-teal-teal-20;
-$boreal-extended-teal-lighter: $boreal-color-engage-teal-teal-5;
-$boreal-extended-teal-base: $boreal-color-engage-teal-teal-40;
-$boreal-extended-teal-dark: $boreal-color-engage-teal-teal-70;
-$boreal-extended-teal-darker: $boreal-color-engage-teal-teal-90;
-$boreal-extended-purple-base: $boreal-color-engage-purple-purple-50;
-$boreal-extended-purple-dark: $boreal-color-engage-purple-purple-70;
-$boreal-extended-orange-base: $boreal-color-engage-orange-orange-40;
-$boreal-extended-purple-light: $boreal-color-engage-purple-purple-20;
-$boreal-extended-orange-darker: $boreal-color-engage-orange-orange-90;
+$boreal-focus: $boreal-color-proximus-cobalt-cobalt-200;
+$boreal-user-base: $boreal-color-proximus-cobalt-cobalt-50;
 $boreal-extended-orange-lighter: $boreal-color-engage-orange-orange-5;
-$boreal-extended-orange-dark: $boreal-color-engage-orange-orange-70;
 $boreal-extended-orange-light: $boreal-color-engage-orange-orange-20;
+$boreal-extended-orange-base: $boreal-color-engage-orange-orange-40;
+$boreal-extended-orange-dark: $boreal-color-engage-orange-orange-70;
+$boreal-extended-orange-darker: $boreal-color-engage-orange-orange-90;
+$boreal-extended-onyx-lighter: $boreal-color-protect-onyx-onyx-100;
+$boreal-extended-onyx-light: $boreal-color-protect-onyx-onyx-200;
+$boreal-extended-onyx-base: $boreal-color-protect-onyx-onyx-500;
+$boreal-extended-onyx-dark: $boreal-color-protect-onyx-onyx-600;
+$boreal-extended-onyx-darker: $boreal-color-protect-onyx-onyx-900;
 $boreal-extended-purple-lighter: $boreal-color-engage-purple-purple-5;
+$boreal-extended-purple-light: $boreal-color-engage-purple-purple-20;
+$boreal-extended-purple-base: $boreal-color-engage-purple-purple-50;
+$boreal-extended-purple-dark: $boreal-color-engage-purple-purple-70;
 $boreal-extended-purple-darker: $boreal-color-engage-purple-purple-90;
+$boreal-extended-rose-lighter: $boreal-color-engage-rose-rose-5;
+$boreal-extended-rose-light: $boreal-color-engage-rose-rose-20;
+$boreal-extended-rose-base: $boreal-color-engage-rose-rose-50;
+$boreal-extended-rose-dark: $boreal-color-engage-rose-rose-70;
+$boreal-extended-rose-darker: $boreal-color-engage-rose-rose-90;
+$boreal-extended-teal-lighter: $boreal-color-engage-teal-teal-5;
+$boreal-extended-teal-base: $boreal-color-engage-teal-teal-40;
+$boreal-extended-teal-dark: $boreal-color-engage-teal-teal-70;
+$boreal-extended-teal-light: $boreal-color-engage-teal-teal-20;
+$boreal-extended-teal-darker: $boreal-color-engage-teal-teal-90;
 $boreal-extended-cyan-lighter: $boreal-color-engage-cyan-cyan-5;
 $boreal-extended-cyan-light: $boreal-color-engage-cyan-cyan-20;
 $boreal-extended-cyan-base: $boreal-color-engage-cyan-cyan-40;
 $boreal-extended-cyan-dark: $boreal-color-engage-cyan-cyan-70;
 $boreal-extended-cyan-darker: $boreal-color-engage-cyan-cyan-90;
-$boreal-extended-lime-dark: $boreal-color-engage-lime-lime-70;
+$boreal-extended-lime-lighter: $boreal-color-engage-lime-lime-5;
+$boreal-extended-lime-light: $boreal-color-engage-lime-lime-20;
 $boreal-extended-lime-base: $boreal-color-engage-lime-lime-40;
+$boreal-extended-lime-dark: $boreal-color-engage-lime-lime-70;
 $boreal-extended-lime-darker: $boreal-color-engage-lime-lime-90;
-$boreal-extended-lime-light: $boreal-color-engage-lime-lime-20;
-$boreal-extended-lime-lighter: $boreal-color-engage-lime-lime-5;
 $boreal-extended-cobalt-lighter: $boreal-color-protect-cobalt-cobalt-50;
 $boreal-extended-cobalt-light: $boreal-color-protect-cobalt-cobalt-100;
 $boreal-extended-cobalt-base: $boreal-color-protect-cobalt-cobalt-600;
 $boreal-extended-cobalt-dark: $boreal-color-protect-cobalt-cobalt-800;
 $boreal-extended-cobalt-darker: $boreal-color-protect-cobalt-cobalt-900;
-$boreal-extended-onyx-lighter: $boreal-color-protect-onyx-onyx-100;
-$boreal-extended-onyx-light: $boreal-color-protect-onyx-onyx-200;
-$boreal-extended-onyx-base: $boreal-color-protect-onyx-onyx-500;
-$boreal-extended-onyx-dark: $boreal-color-protect-onyx-onyx-600;
-$boreal-extended-onyx-darker: $boreal-color-protect-onyx-onyx-900;
-$boreal-extended-rose-lighter: $boreal-color-engage-rose-rose-5;
-$boreal-extended-rose-light: $boreal-color-engage-rose-rose-20;
-$boreal-extended-rose-base: $boreal-color-engage-rose-rose-50;
-$boreal-extended-rose-dark: $boreal-color-engage-rose-rose-70;
-$boreal-extended-rose-darker: $boreal-color-engage-rose-rose-90;
-$boreal-neutral-deep: $boreal-color-proximus-onyx-onyx-600;
-$boreal-information-lighter: $boreal-color-proximus-cobalt-cobalt-5;
-$boreal-information-light: $boreal-color-proximus-cobalt-cobalt-200;
-$boreal-success-lighter: $boreal-color-proximus-mint-mint-5;
-$boreal-information-base: $boreal-color-proximus-cobalt-cobalt-500;
-$boreal-neutral-contrast: $boreal-color-proximus-onyx-onyx-900;
-$boreal-information-dark: $boreal-color-proximus-cobalt-cobalt-700;
-$boreal-neutral-base: $boreal-color-proximus-onyx-onyx-400;
-$boreal-warning-base: $boreal-color-proximus-amber-amber-400;
-$boreal-neutral-ink: $boreal-color-proximus-onyx-onyx-700;
-$boreal-warning-dark: $boreal-color-proximus-amber-amber-700;
-$boreal-warning-darker: $boreal-color-proximus-amber-amber-900;
-$boreal-warning-light: $boreal-color-proximus-amber-amber-200;
-$boreal-focus: $boreal-color-proximus-cobalt-cobalt-200;
-$boreal-success-light: $boreal-color-proximus-mint-mint-200;
-$boreal-neutral-ligther: $boreal-color-proximus-neutral-neutral-200;
-$boreal-success-base: $boreal-color-proximus-mint-mint-600;
-$boreal-primary-dark: $boreal-color-proximus-cobalt-cobalt-700;
-$boreal-danger-darker: $boreal-color-proximus-red-red-900;
-$boreal-primary-darker: $boreal-color-proximus-cobalt-cobalt-900;
-$boreal-danger-dark: $boreal-color-proximus-red-red-800;
-$boreal-base-alt: $boreal-color-proximus-onyx-onyx-900;
-$boreal-neutral-dark: $boreal-color-proximus-onyx-onyx-100;
-$boreal-danger-lighter: $boreal-color-proximus-red-red-50;
-$boreal-base-lighter: $boreal-color-proximus-neutral-neutral-300;
-$boreal-danger-light: $boreal-color-proximus-red-red-200;
-$boreal-accent-lighter: $boreal-color-proximus-mint-mint-5;
-$boreal-success-dark: $boreal-color-proximus-mint-mint-700;
-$boreal-neutral: $boreal-color-proximus-onyx-onyx-50;
-$boreal-accent-darker: $boreal-color-proximus-mint-mint-900;
-$boreal-neutral-paper: $boreal-color-proximus-onyx-onyx-200;
-$boreal-warning-lighter: $boreal-color-proximus-amber-amber-50;
-$boreal-success-darker: $boreal-color-proximus-mint-mint-900;
-$boreal-primary-base: $boreal-color-proximus-cobalt-cobalt-500;
-$boreal-information-darker: $boreal-color-proximus-cobalt-cobalt-900;
-$boreal-neutral-darker: $boreal-color-proximus-onyx-onyx-500;
-$boreal-neutral-light: $boreal-color-proximus-onyx-onyx-100;
-$boreal-danger-base: $boreal-color-proximus-red-red-500;
-$boreal-neutral-deeper: $boreal-color-proximus-onyx-onyx-800;
-$boreal-base-light: $boreal-color-proximus-neutral-neutral-300;
-$boreal-primary-light: $boreal-color-proximus-cobalt-cobalt-200;
-$boreal-primary-lighter: $boreal-color-proximus-cobalt-cobalt-5;
-$boreal-base-dark: $boreal-color-proximus-onyx-onyx-100;
-$boreal-base-darker: $boreal-color-proximus-onyx-onyx-200;
-$boreal-user-base: $boreal-color-proximus-cobalt-cobalt-5;
-$boreal-bg-overlay: $boreal-neutral-contrast;
-$boreal-bg-inverse: $boreal-white;
-$boreal-bg-primary-darker: $boreal-primary-darker;
-$boreal-bg-neutral: $boreal-neutral;
-$boreal-bg-primary-base: $boreal-primary-base;
-$boreal-bg-neutral-ink: $boreal-neutral-ink;
 $boreal-bg-primary-lighter: $boreal-primary-lighter;
 $boreal-bg-primary-light: $boreal-primary-light;
+$boreal-bg-primary-base: $boreal-primary-base;
+$boreal-bg-primary-darker: $boreal-primary-darker;
+$boreal-bg-inverse: $boreal-white;
+$boreal-bg-neutral: $boreal-neutral;
 $boreal-bg-neutral-light: $boreal-neutral-light;
 $boreal-bg-neutral-paper: $boreal-neutral-paper;
-$boreal-bg-nuetral-dark: $boreal-neutral-dark;
+$boreal-bg-neutral-dark: $boreal-neutral-dark;
 $boreal-bg-neutral-base: $boreal-neutral-base;
 $boreal-bg-neutral-darker: $boreal-neutral-darker;
 $boreal-bg-neutral-deep: $boreal-neutral-deep;
-$boreal-text-success-base: $boreal-success-base;
-$boreal-text-danger-base: $boreal-danger-base;
-$boreal-text-information-base: $boreal-information-base;
-$boreal-text-accent: $boreal-accent-base;
+$boreal-bg-neutral-ink: $boreal-neutral-ink;
+$boreal-bg-overlay: $boreal-neutral-contrast;
 $boreal-text-default: $boreal-neutral-ink;
 $boreal-text-default-light: $boreal-neutral-base;
-$boreal-text-inverse: $boreal-white;
-$boreal-text-warning-base: $boreal-warning-base;
+$boreal-text-base: $boreal-base-alt;
+$boreal-text-default-dark: $boreal-neutral-dark;
+$boreal-text-default-darker: $boreal-neutral-darker;
+$boreal-text-default-deep: $boreal-neutral-deep;
+$boreal-text-default-ink: $boreal-neutral-ink;
 $boreal-text-disabled: $boreal-neutral-dark;
+$boreal-text-accent: $boreal-accent-base;
+$boreal-text-primary-dark: $boreal-primary-dark;
 $boreal-text-primary-base: $boreal-primary-base;
+$boreal-text-primary-light: $boreal-primary-light;
 $boreal-text-danger-dark: $boreal-danger-dark;
-$boreal-text-success-dark: $boreal-success-dark;
-$boreal-text-information-dark: $boreal-information-darker;
-$boreal-text-warning-light: $boreal-warning-light;
+$boreal-text-danger-base: $boreal-danger-base;
 $boreal-text-danger-light: $boreal-danger-light;
+$boreal-text-success-dark: $boreal-success-dark;
+$boreal-text-success-base: $boreal-success-base;
 $boreal-text-success-light: $boreal-success-light;
+$boreal-text-information-dark: $boreal-information-darker;
+$boreal-text-information-base: $boreal-information-base;
 $boreal-text-information-light: $boreal-information-light;
 $boreal-text-warning-dark: $boreal-warning-darker;
-$boreal-text-base: $boreal-base-alt;
-$boreal-text-primary-light: $boreal-primary-light;
-$boreal-text-primary-dark: $boreal-primary-dark;
-$boreal-text-default-dark: $boreal-neutral-dark;
-$boreal-text-default-darker: $boreal-neutral-darker;
-$boreal-text-default-deep: $boreal-neutral-deep;
-$boreal-text-default-ink: $boreal-neutral-ink;
+$boreal-text-warning-base: $boreal-warning-base;
+$boreal-text-warning-light: $boreal-warning-light;
+$boreal-text-inverse: $boreal-white;
 $boreal-ui-default-base: $boreal-neutral;
-$boreal-ui-inverse: $boreal-white;
+$boreal-ui-default-lighter: $boreal-base-lighter;
+$boreal-ui-default-light: $boreal-neutral-paper;
+$boreal-ui-default-paper: $boreal-neutral-dark;
+$boreal-ui-default-dark: $boreal-neutral-base;
+$boreal-ui-default-darker: $boreal-neutral-darker;
+$boreal-ui-default-deep: $boreal-neutral-deep;
+$boreal-ui-default-ink: $boreal-neutral-ink;
+$boreal-ui-primary-dark: $boreal-primary-dark;
+$boreal-ui-primary-base: $boreal-primary-base;
+$boreal-ui-primary-light: $boreal-primary-light;
+$boreal-ui-primary-lighter: $boreal-primary-lighter;
 $boreal-ui-accent: $boreal-accent-base;
 $boreal-ui-black-light: $boreal-neutral-darker;
+$boreal-ui-black: $boreal-neutral-contrast;
 $boreal-ui-base: $boreal-base-alt;
 $boreal-ui-base-light: $boreal-base-light;
-$boreal-ui-disabled: $boreal-neutral-ligther;
-$boreal-ui-info-light: $boreal-information-light;
-$boreal-ui-success-light: $boreal-success-light;
+$boreal-ui-base-lighter: $boreal-base-lighter;
+$boreal-ui-success-dark: $boreal-success-dark;
 $boreal-ui-success-base: $boreal-success-base;
-$boreal-ui-black: $boreal-neutral-contrast;
-$boreal-ui-danger-light: $boreal-danger-light;
-$boreal-ui-primary-lighter: $boreal-primary-lighter;
-$boreal-ui-danger-base: $boreal-danger-base;
-$boreal-ui-info-base: $boreal-information-base;
-$boreal-ui-primary-base: $boreal-primary-base;
-$boreal-ui-primary-light: $boreal-primary-light;
-$boreal-ui-primary-dark: $boreal-primary-dark;
-$boreal-ui-warning-base: $boreal-warning-base;
+$boreal-ui-success-light: $boreal-success-light;
 $boreal-ui-success-lighter: $boreal-success-lighter;
+$boreal-ui-danger-dark: $boreal-danger-dark;
+$boreal-ui-danger-base: $boreal-danger-base;
+$boreal-ui-danger-light: $boreal-danger-light;
 $boreal-ui-danger-lighter: $boreal-danger-lighter;
+$boreal-ui-info-dark: $boreal-information-dark;
+$boreal-ui-info-base: $boreal-information-base;
+$boreal-ui-info-light: $boreal-information-light;
 $boreal-ui-info-lighter: $boreal-information-lighter;
+$boreal-ui-warning-dark: $boreal-warning-dark;
+$boreal-ui-warning-base: $boreal-warning-base;
 $boreal-ui-warning-light: $boreal-warning-light;
 $boreal-ui-warning-lighter: $boreal-warning-lighter;
-$boreal-ui-base-lighter: $boreal-base-lighter;
-$boreal-ui-default-lighter: $boreal-neutral-ligther;
-$boreal-ui-success-dark: $boreal-success-dark;
-$boreal-ui-danger-dark: $boreal-danger-dark;
-$boreal-ui-info-dark: $boreal-information-dark;
-$boreal-ui-warning-dark: $boreal-warning-dark;
-$boreal-ui-default-light: $boreal-neutral-light;
-$boreal-ui-default-paper: $boreal-neutral-paper;
-$boreal-ui-default-dark: $boreal-neutral-dark;
-$boreal-ui-default-darker: $boreal-neutral-darker;
-$boreal-ui-default-deep: $boreal-neutral-deep;
-$boreal-ui-default-ink: $boreal-neutral-ink;
-$boreal-icon-info-dark: $boreal-information-darker;
+$boreal-ui-disabled: $boreal-neutral-lighter;
+$boreal-ui-inverse: $boreal-white;
+$boreal-stroke-primary-dark: $boreal-primary-dark;
+$boreal-stroke-primary-base: $boreal-primary-base;
+$boreal-stroke-primary-light: $boreal-primary-light;
+$boreal-stroke-default-lighter: $boreal-base-lighter;
+$boreal-stroke-default-light: $boreal-base-light;
+$boreal-stroke-default-dark: $boreal-base-dark;
+$boreal-stroke-default-ink: $boreal-base-alt;
+$boreal-stroke-accent: $boreal-accent-base;
+$boreal-stroke-info-dark: $boreal-information-dark;
+$boreal-stroke-info-base: $boreal-information-base;
+$boreal-stroke-info-light: $boreal-information-light;
+$boreal-stroke-warning-dark: $boreal-warning-dark;
+$boreal-stroke-warning: $boreal-warning-base;
+$boreal-stroke-warning-light: $boreal-warning-light;
+$boreal-stroke-success-dark: $boreal-success-dark;
+$boreal-stroke-success-base: $boreal-success-base;
+$boreal-stroke-success-light: $boreal-success-light;
+$boreal-stroke-danger-dark: $boreal-danger-dark;
+$boreal-stroke-danger-base: $boreal-danger-base;
+$boreal-stroke-danger-light: $boreal-danger-light;
+$boreal-stroke-focus: $boreal-focus;
+$boreal-stroke-inverse: $boreal-white;
+$boreal-icon-primary-dark: $boreal-primary-dark;
+$boreal-icon-primary-base: $boreal-primary-base;
+$boreal-icon-primary-light: $boreal-primary-light;
+$boreal-icon-accent-base: $boreal-accent-base;
 $boreal-icon-default-lighter: $boreal-neutral-paper;
 $boreal-icon-default-light: $boreal-neutral-dark;
 $boreal-icon-default-dark: $boreal-neutral-base;
-$boreal-icon-success-base: $boreal-success-base;
-$boreal-icon-inverse: $boreal-white;
-$boreal-icon-warning-base: $boreal-warning-base;
-$boreal-icon-accent-base: $boreal-accent-base;
-$boreal-icon-danger-base: $boreal-danger-base;
-$boreal-icon-base: $boreal-base-alt;
-$boreal-icon-primary-base: $boreal-primary-base;
-$boreal-icon-success-dark: $boreal-success-dark;
-$boreal-icon-warning-dark: $boreal-warning-darker;
-$boreal-icon-danger-dark: $boreal-danger-dark;
+$boreal-icon-default-ink: $boreal-neutral-ink;
+$boreal-icon-info-dark: $boreal-information-darker;
 $boreal-icon-info-base: $boreal-information-base;
 $boreal-icon-info-light: $boreal-information-light;
+$boreal-icon-success-dark: $boreal-success-dark;
+$boreal-icon-success-base: $boreal-success-base;
 $boreal-icon-success-light: $boreal-success-light;
+$boreal-icon-warning-dark: $boreal-warning-darker;
+$boreal-icon-warning-base: $boreal-warning-base;
 $boreal-icon-warning-light: $boreal-warning-light;
+$boreal-icon-danger-dark: $boreal-danger-dark;
+$boreal-icon-danger-base: $boreal-danger-base;
 $boreal-icon-danger-light: $boreal-danger-light;
+$boreal-icon-base: $boreal-base-alt;
+$boreal-icon-inverse: $boreal-white;
 $boreal-icon-disabled: $boreal-neutral-dark;
-$boreal-icon-primary-light: $boreal-primary-light;
-$boreal-icon-primary-dark: $boreal-primary-dark;
 $boreal-icon-user: $boreal-user-base;
-$boreal-icon-default-ink: $boreal-neutral-ink;
-$boreal-alpha-black-50: #272a2f80;
+$boreal-alpha-black-5: #272a2f0d;
+$boreal-alpha-black-10: #272a2f1a;
 $boreal-alpha-black-25: #272a2f40;
-$boreal-alpha-white-50: #ffffff80;
-$boreal-alpha-white-25: #ffffff40;
+$boreal-alpha-black-50: #272a2f80;
 $boreal-alpha-white-10: #ffffff1a;
+$boreal-alpha-white-25: #ffffff40;
+$boreal-alpha-white-50: #ffffff80;
+$boreal-alpha-white-55: #ffffff8c;
 $boreal-alpha-white-75: #ffffffbf;
+$boreal-alpha-white-80: #ffffffcc;
 $boreal-alpha-white-85: #ffffffd9;
 $boreal-alpha-white-90: #ffffffe6;
-$boreal-alpha-white-95: #ffffffe6;
-$boreal-alpha-white-80: #ffffffcc;
-$boreal-alpha-white-55: #ffffff8c;
-$boreal-alpha-black-5: #272a2f0d;
-$boreal-alpha-black-10: #272a2f1a;
-$boreal-extended-tael-darker: $boreal-extended-teal-darker;
-$boreal-stroke-warning: $boreal-warning-base;
-$boreal-stroke-inverse: $boreal-white;
-$boreal-stroke-info-base: $boreal-information-base;
-$boreal-stroke-success-base: $boreal-success-base;
-$boreal-stroke-default-dark: $boreal-base-dark;
-$boreal-stroke-default-light: $boreal-base-light;
-$boreal-stroke-default-ink: $boreal-base-alt;
-$boreal-stroke-focus: $boreal-focus;
-$boreal-stroke-danger-base: $boreal-danger-base;
-$boreal-stroke-accent: $boreal-accent-base;
-$boreal-stroke-primary-base: $boreal-primary-base;
-$boreal-stroke-primary-light: $boreal-primary-light;
-$boreal-stroke-primary-dark: $boreal-primary-dark;
-$boreal-stroke-info-light: $boreal-information-light;
-$boreal-stroke-info-dark: $boreal-information-dark;
-$boreal-stroke-success-light: $boreal-success-light;
-$boreal-stroke-success-dark: $boreal-success-dark;
-$boreal-stroke-warning-light: $boreal-warning-light;
-$boreal-stroke-warning-dark: $boreal-warning-dark;
-$boreal-stroke-danger-light: $boreal-danger-light;
-$boreal-stroke-danger-dark: $boreal-danger-dark;
-$boreal-stroke-default-lighter: $boreal-base-lighter;
+$boreal-alpha-white-95: #ffffffe6;

package/dist/types/components/actions/bds-button/bds-button.d.ts

@@ -70,7 +70,7 @@ export declare class BdsButton implements IButton {
     private internalForm;
     /** Validate props */
     checkPropValues(): void;
-    /**  */
+    /** Before component rendered */
     componentWillLoad(): void;
     /** After component rendered */
     componentDidLoad(): void;

package/dist/types/components/actions/bds-list-menu/bds-list-menu/bds-list-menu.d.ts

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+/**
+ * Container component that manages a list of menu items.
+ * It handles selection logic (single/multiple) and maintains the data state.
+ *
+ * @summary A list menu component that can contain multiple menu items and manage their selection state.
+ * @slot - Default slot for bds-list-menu-item elements.
+ *
+ * @attr {boolean} multiple - If true, allows multiple items to be selected. Default is false (single selection).
+ * @attr {string} menuRole - Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'.
+ *
+ * @property {boolean} multiple - If true, allows multiple items to be selected. Default is false (single selection).
+ * @property {string} menuRole - Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'.
+ *
+ * @event bdsChange - Emitted when the selection changes, providing the current selected value(s).
+ * @method getSelectedValues - Returns the currently selected value(s). If multiple is true, returns an array of strings; otherwise, returns a single string or undefined.
+ * @method setSelectedValues - Sets the selected value(s). Accepts a string for single selection or an array of strings for multiple selection.
+ *
+ * @default false - By default, the menu does not allow multiple selections (single selection mode).
+ * @default 'menu' - The default ARIA role for the menu is 'menu'.
+ *
+ */
+export declare class BdsListMenu {
+    /** The host element */
+    el: HTMLBdsListMenuElement;
+    /** If true, allows multiple items to be selected. Default is false (single selection). */
+    readonly multiple: boolean;
+    /** Defines the ARIA role of the menu. Can be 'menu' or 'listbox'. Default is 'menu'. */
+    readonly menuRole: 'menu' | 'listbox';
+    /** State to manage selected values */
+    selectedValues: string[];
+    /** Emitted when the selection changes, providing the current selected value(s). */
+    readonly bdsChange: EventEmitter<string | string[]>;
+    /** Emitted when the selection changes, providing the current selected value(s). */
+    readonly bdsClicked: EventEmitter<HTMLElement>;
+    /**
+     * Retrieves the currently selected value(s) programmatically.
+     * @method getSelectedValues
+     * @returns {Promise<string | string[]>} The selected value(s) based on the 'multiple' prop.
+     */
+    getSelectedValues(): Promise<string | string[]>;
+    /**
+     * Sets the selected values programmatically.
+     * Useful for initializing the menu from an external data source or form reset.
+     * @method setSelectedValues
+     * @param {string | string[]} values - The value or values to be marked as selected.
+     */
+    setSelectedValues(values: string | string[]): Promise<void>;
+    /** Handles the click event on a menu item, updating the selection state accordingly. */
+    handleItemClick(event: CustomEvent): void;
+    /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
+    componentWillLoad(): void;
+    /** Get all child menu items */
+    get childItems(): HTMLBdsListMenuItemElement[];
+    /** First clickable element  */
+    get firstEnabledItem(): HTMLBdsListMenuItemElement;
+    /** Updates the active state of the menu items based on the current selection. */
+    private updateActiveState;
+    /** Handles selection logic for multiple selection mode. */
+    private handleMultipleSelection;
+    /** Handles selection logic for single selection mode. */
+    private handleSingleSelection;
+    /** Updates the state of child menu items based on the current selection. */
+    private updateChildrenState;
+    /** Initializes the selected values based on the child menu items that have the 'selected' attribute set. */
+    private initialSelectedValues;
+    /** Renders the component with a slot for menu items. */
+    render(): any;
+}
+//# sourceMappingURL=bds-list-menu.d.ts.map

package/dist/types/components/actions/bds-list-menu/bds-list-menu-item/bds-list-menu-item.d.ts

@@ -0,0 +1,116 @@
+import { EventEmitter } from '../../../../stencil-public-runtime';
+import { ComponentState } from "../../../../types/index";
+import { IListMenuItem, IListMenuItemEvent } from './types/IListMenuItem';
+declare const BdsListMenuItem_base: abstract new (...args: any[]) => {
+    el: HTMLElement;
+    disabled: boolean;
+    selected: boolean;
+    activeItem: boolean;
+    readonly parentRole: import("@/types").MenuRole | null;
+    readonly menuItemRole: import("@/types").MenuItemRole;
+    readonly ariaSelected: string | null;
+    readonly itemTabIndex: number;
+    handleKeyDownLogic(e: KeyboardEvent, onActivate: () => void): void;
+} & {
+    el: HTMLElement;
+    href: string;
+    newTab: boolean;
+    download: string;
+    readonly isLink: boolean;
+    readonly linkAttributes: import("@/types").LinksAttrs;
+    _isExternalLink(url: string): boolean;
+    handleLinkKeyDown(event: KeyboardEvent): void;
+    handleLinkClick(event: MouseEvent): void;
+    sanitizeUrl(url: string): string;
+};
+/**
+ * Component representing an individual item within a list menu for navigations and selection.
+ *
+ * @summary A menu item component that supports different variants, disabled state, and selection state, it also supports link behavior when the href prop is provided.
+ *
+ * @slot - Default slot for the content of the menu item.
+ *
+ * @attr {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+ * @attr {string} name - The name of the list menu item.
+ * @attr {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+ * @attr {boolean} selected - If true, the menu item is styled as selected.
+ * @attr {boolean} activeItem - If true, the menu item is styled as active.
+ * @attr {string} value - The value associated with the menu item, emitted in events when activated.\
+ * @attr {string} href - The URL for the link. If provided, the menu item will behave as a link.
+ * @attr {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+ * @attr {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+ * @attr {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+ *
+ * @property {string} variant - Defines the visual style of the list menu item. Can be 'button' or 'label'. Default is 'button'.
+ * @property {string} name - The name of the list menu item.
+ * @property {boolean} disabled - If true, the menu item is non-interactive and styled as disabled.
+ * @property {boolean} selected - If true, the menu item is styled as selected.
+ * @property {boolean} activeItem - If true, the menu item is styled as active.
+ * @property {string} value - The value associated with the menu item, emitted in events when activated.
+ * @property {string} href - The URL for the link. If provided, the menu item will behave as a link.
+ * @property {boolean} newTab - If true, the link will open in a new tab. Only applicable if href is provided.
+ * @property {boolean} downloadable - If true, the link will be treated as a download link. Only applicable if href is provided.
+ * @property {string} filename - The suggested filename for the download. Only applicable if downloadable is true.
+ *
+ * @default 'button' - The default variant for the menu item is 'button', which is a standard clickable item.
+ * @default '' - By default, the name of the menu item is an empty string.
+ * @default false - By default, the menu item is not disabled and is interactive.
+ * @default false - By default, the menu item is not selected.
+ * @default false - By default, the menu item is not active.
+ * @default '' - By default, the value of the menu item is an empty string.
+ * @default '' - By default, the href is an empty string, meaning the menu item will not behave as a link.
+ * @default false - By default, the newTab property is false, meaning links will open in the same tab.
+ * @default false - By default, the downloadable property is false, meaning links will not be treated as download links.
+ * @default '' - By default, the filename is an empty string, meaning no suggested filename for downloads.
+ */
+export declare class BdsListMenuItem extends BdsListMenuItem_base implements IListMenuItem {
+    /** The host element */
+    el: HTMLBdsListMenuItemElement;
+    /**
+     * Defines the visual style of the list menu item.
+     * - 'button': A standard clickable item.
+     * - 'label': A non-interactive label, typically used for grouping items.
+     */
+    readonly variant: IListMenuItem['variant'];
+    /** The name of the list menu item */
+    readonly name: IListMenuItem['name'];
+    /** Disabled state item */
+    readonly disabled: IListMenuItem['disabled'];
+    /** Selected item state */
+    readonly selected: IListMenuItem['selected'];
+    /** Value associated with the menu item */
+    readonly value: IListMenuItem['value'];
+    /** Active state item */
+    readonly activeItem: IListMenuItem['activeItem'];
+    /** Link behavior props */
+    readonly href: IListMenuItem['href'];
+    /** Opens the link in a new tab if true */
+    readonly newTab: IListMenuItem['newTab'];
+    /** Makes the link downloadable if true */
+    readonly download: IListMenuItem['download'];
+    /** State to manage click and keyboard interaction states */
+    currentState: ComponentState;
+    /** Event handler for activation */
+    readonly bdsSelect: EventEmitter<IListMenuItemEvent>;
+    checkPropsVariant(): void;
+    /** Lifecycle method called before the component is loaded */
+    componentWillLoad(): void;
+    /** Event to notify when the menu item is clicked */
+    private handleClick;
+    /** Event to handle keydown navigation and trigger click */
+    private handleKeyDown;
+    /** Event to handle keyup navigation and reset active state */
+    private handleKeyUp;
+    /** Checks if the variant is a label */
+    private get isLabelVariant();
+    /** Returns the class map for the list menu item */
+    private get classMap();
+    /** Return the render for the label variant of the list menu item */
+    private renderTypeLabel;
+    /** Return the render for the button variant of the list menu item */
+    private renderTypeButton;
+    /** Main render */
+    render(): any;
+}
+export {};
+//# sourceMappingURL=bds-list-menu-item.d.ts.map

package/dist/types/components/actions/bds-list-menu/bds-list-menu-item/types/IListMenuItem.d.ts

@@ -0,0 +1,12 @@
+import { IWithLinks, IMenuBehavior } from "../../../../../types/index";
+import { ListMenuItemVariants } from './types';
+export interface IListMenuItem extends IMenuBehavior, IWithLinks {
+    variant: ListMenuItemVariants;
+    name: string;
+    value: string;
+}
+export interface IListMenuItemEvent {
+    value: string;
+    selected: boolean;
+}
+//# sourceMappingURL=IListMenuItem.d.ts.map

package/dist/types/components/actions/bds-list-menu/bds-list-menu-item/types/enum.d.ts

@@ -0,0 +1,5 @@
+export declare const LIST_MENU_ITEM_VARIANTS: {
+    readonly LABEL: "label";
+    readonly BUTTON: "button";
+};
+//# sourceMappingURL=enum.d.ts.map

package/dist/types/components/actions/bds-list-menu/bds-list-menu-item/types/types.d.ts

@@ -0,0 +1,3 @@
+import { LIST_MENU_ITEM_VARIANTS } from './enum';
+export type ListMenuItemVariants = (typeof LIST_MENU_ITEM_VARIANTS)[keyof typeof LIST_MENU_ITEM_VARIANTS];
+//# sourceMappingURL=types.d.ts.map