@telesign/boreal-react 0.1.0-alpha.0

package/dist/css/theme-protect.css

@@ -0,0 +1,227 @@
+[data-theme="protect"] {
+  --boreal-accent-dark: var(--boreal-color-protect-cobalt-cobalt-700);
+  --boreal-black: var(--boreal-color-protect-onyx-onyx-900);
+  --boreal-accent-light: var(--boreal-color-protect-cobalt-cobalt-50);
+  --boreal-white: var(--boreal-color-white);
+  --boreal-accent-base: var(--boreal-color-protect-cobalt-cobalt-400);
+  --boreal-extended-teal-light: var(--boreal-color-engage-teal-teal-20);
+  --boreal-extended-teal-lighter: var(--boreal-color-engage-teal-teal-5);
+  --boreal-extended-teal-base: var(--boreal-color-engage-teal-teal-40);
+  --boreal-extended-teal-dark: var(--boreal-color-engage-teal-teal-70);
+  --boreal-extended-teal-darker: var(--boreal-color-engage-teal-teal-90);
+  --boreal-extended-purple-base: var(--boreal-color-engage-purple-purple-50);
+  --boreal-extended-purple-dark: var(--boreal-color-engage-purple-purple-70);
+  --boreal-extended-orange-base: var(--boreal-color-engage-orange-orange-40);
+  --boreal-extended-purple-light: var(--boreal-color-engage-purple-purple-20);
+  --boreal-extended-orange-darker: var(--boreal-color-engage-orange-orange-90);
+  --boreal-extended-orange-lighter: var(--boreal-color-engage-orange-orange-5);
+  --boreal-extended-orange-dark: var(--boreal-color-engage-orange-orange-70);
+  --boreal-extended-orange-light: var(--boreal-color-engage-orange-orange-20);
+  --boreal-extended-purple-lighter: var(--boreal-color-engage-purple-purple-5);
+  --boreal-extended-purple-darker: var(--boreal-color-engage-purple-purple-90);
+  --boreal-extended-cyan-lighter: var(--boreal-color-engage-cyan-cyan-5);
+  --boreal-extended-cyan-light: var(--boreal-color-engage-cyan-cyan-20);
+  --boreal-extended-cyan-base: var(--boreal-color-engage-cyan-cyan-40);
+  --boreal-extended-cyan-dark: var(--boreal-color-engage-cyan-cyan-70);
+  --boreal-extended-cyan-darker: var(--boreal-color-engage-cyan-cyan-90);
+  --boreal-extended-lime-dark: var(--boreal-color-engage-lime-lime-70);
+  --boreal-extended-lime-base: var(--boreal-color-engage-lime-lime-40);
+  --boreal-extended-lime-darker: var(--boreal-color-engage-lime-lime-90);
+  --boreal-extended-lime-light: var(--boreal-color-engage-lime-lime-20);
+  --boreal-extended-lime-lighter: var(--boreal-color-engage-lime-lime-5);
+  --boreal-extended-cobalt-lighter: var(--boreal-color-protect-cobalt-cobalt-50);
+  --boreal-extended-cobalt-light: var(--boreal-color-protect-cobalt-cobalt-100);
+  --boreal-extended-cobalt-base: var(--boreal-color-protect-cobalt-cobalt-600);
+  --boreal-extended-cobalt-dark: var(--boreal-color-protect-cobalt-cobalt-800);
+  --boreal-extended-cobalt-darker: var(--boreal-color-protect-cobalt-cobalt-900);
+  --boreal-extended-onyx-lighter: var(--boreal-color-protect-onyx-onyx-100);
+  --boreal-extended-onyx-light: var(--boreal-color-protect-onyx-onyx-200);
+  --boreal-extended-onyx-base: var(--boreal-color-protect-onyx-onyx-500);
+  --boreal-extended-onyx-dark: var(--boreal-color-protect-onyx-onyx-600);
+  --boreal-extended-onyx-darker: var(--boreal-color-protect-onyx-onyx-900);
+  --boreal-extended-rose-lighter: var(--boreal-color-engage-rose-rose-5);
+  --boreal-extended-rose-light: var(--boreal-color-engage-rose-rose-20);
+  --boreal-extended-rose-base: var(--boreal-color-engage-rose-rose-50);
+  --boreal-extended-rose-dark: var(--boreal-color-engage-rose-rose-70);
+  --boreal-extended-rose-darker: var(--boreal-color-engage-rose-rose-90);
+  --boreal-neutral-deep: var(--boreal-color-protect-onyx-onyx-600);
+  --boreal-information-lighter: var(--boreal-color-protect-cyan-cyan-50);
+  --boreal-information-light: var(--boreal-color-protect-cyan-cyan-200);
+  --boreal-success-lighter: var(--boreal-color-protect-lime-lime-50);
+  --boreal-information-base: var(--boreal-color-protect-cyan-cyan-700);
+  --boreal-neutral-contrast: var(--boreal-color-protect-onyx-onyx-900);
+  --boreal-information-dark: var(--boreal-color-protect-cyan-cyan-800);
+  --boreal-neutral-base: var(--boreal-color-protect-onyx-onyx-400);
+  --boreal-warning-base: var(--boreal-color-protect-sunrise-sunrise-500);
+  --boreal-neutral-ink: var(--boreal-color-protect-onyx-onyx-700);
+  --boreal-warning-dark: var(--boreal-color-protect-sunrise-sunrise-800);
+  --boreal-warning-darker: var(--boreal-color-protect-sunrise-sunrise-900);
+  --boreal-warning-light: var(--boreal-color-protect-sunrise-sunrise-200);
+  --boreal-focus: #1f5bff4d;
+  --boreal-success-light: var(--boreal-color-protect-lime-lime-200);
+  --boreal-neutral-ligther: var(--boreal-color-protect-onyx-onyx-50);
+  --boreal-success-base: var(--boreal-color-protect-lime-lime-600);
+  --boreal-primary-dark: var(--boreal-color-protect-indigo-indigo-700);
+  --boreal-danger-darker: var(--boreal-color-protect-cherry-cherry-900);
+  --boreal-primary-darker: var(--boreal-color-protect-indigo-indigo-900);
+  --boreal-danger-dark: var(--boreal-color-protect-cherry-cherry-800);
+  --boreal-base-alt: var(--boreal-color-protect-indigo-indigo-500);
+  --boreal-neutral-dark: var(--boreal-color-protect-onyx-onyx-300);
+  --boreal-danger-lighter: var(--boreal-color-protect-cherry-cherry-50);
+  --boreal-base-lighter: var(--boreal-color-protect-indigo-indigo-25);
+  --boreal-danger-light: var(--boreal-color-protect-cherry-cherry-200);
+  --boreal-accent-lighter: var(--boreal-color-protect-cobalt-cobalt-25);
+  --boreal-success-dark: var(--boreal-color-protect-lime-lime-800);
+  --boreal-neutral: var(--boreal-color-protect-indigo-indigo-25);
+  --boreal-accent-darker: var(--boreal-color-protect-cobalt-cobalt-900);
+  --boreal-neutral-paper: var(--boreal-color-protect-onyx-onyx-200);
+  --boreal-warning-lighter: var(--boreal-color-protect-sunrise-sunrise-50);
+  --boreal-success-darker: var(--boreal-color-protect-lime-lime-900);
+  --boreal-primary-base: var(--boreal-color-protect-indigo-indigo-500);
+  --boreal-information-darker: var(--boreal-color-protect-cyan-cyan-900);
+  --boreal-neutral-darker: var(--boreal-color-protect-onyx-onyx-500);
+  --boreal-neutral-light: var(--boreal-color-protect-onyx-onyx-100);
+  --boreal-danger-base: var(--boreal-color-protect-cherry-cherry-700);
+  --boreal-neutral-deeper: var(--boreal-color-protect-onyx-onyx-800);
+  --boreal-base-light: var(--boreal-color-protect-indigo-indigo-50);
+  --boreal-primary-light: var(--boreal-color-protect-indigo-indigo-200);
+  --boreal-primary-lighter: var(--boreal-color-protect-indigo-indigo-25);
+  --boreal-base-dark: var(--boreal-color-protect-indigo-indigo-200);
+  --boreal-base-darker: var(--boreal-color-protect-indigo-indigo-300);
+  --boreal-user-base: var(--boreal-color-protect-indigo-indigo-400);
+  --boreal-bg-overlay: var(--boreal-neutral-contrast);
+  --boreal-bg-inverse: var(--boreal-white);
+  --boreal-bg-primary-darker: var(--boreal-primary-darker);
+  --boreal-bg-neutral: var(--boreal-neutral);
+  --boreal-bg-primary-base: var(--boreal-primary-base);
+  --boreal-bg-neutral-ink: var(--boreal-neutral-ink);
+  --boreal-bg-primary-lighter: var(--boreal-primary-lighter);
+  --boreal-bg-primary-light: var(--boreal-primary-light);
+  --boreal-bg-neutral-light: var(--boreal-neutral-light);
+  --boreal-bg-neutral-paper: var(--boreal-neutral-paper);
+  --boreal-bg-nuetral-dark: var(--boreal-neutral-dark);
+  --boreal-bg-neutral-base: var(--boreal-neutral-base);
+  --boreal-bg-neutral-darker: var(--boreal-neutral-darker);
+  --boreal-bg-neutral-deep: var(--boreal-neutral-deep);
+  --boreal-text-success-base: var(--boreal-success-base);
+  --boreal-text-danger-base: var(--boreal-danger-base);
+  --boreal-text-information-base: var(--boreal-information-base);
+  --boreal-text-accent: var(--boreal-accent-base);
+  --boreal-text-default: var(--boreal-neutral-ink);
+  --boreal-text-default-light: var(--boreal-neutral-base);
+  --boreal-text-inverse: var(--boreal-white);
+  --boreal-text-warning-base: var(--boreal-warning-base);
+  --boreal-text-disabled: var(--boreal-neutral-dark);
+  --boreal-text-primary-base: var(--boreal-primary-base);
+  --boreal-text-danger-dark: var(--boreal-danger-dark);
+  --boreal-text-success-dark: var(--boreal-success-dark);
+  --boreal-text-information-dark: var(--boreal-information-darker);
+  --boreal-text-warning-light: var(--boreal-warning-light);
+  --boreal-text-danger-light: var(--boreal-danger-light);
+  --boreal-text-success-light: var(--boreal-success-light);
+  --boreal-text-information-light: var(--boreal-information-light);
+  --boreal-text-warning-dark: var(--boreal-warning-darker);
+  --boreal-text-base: var(--boreal-base-alt);
+  --boreal-text-primary-light: var(--boreal-primary-light);
+  --boreal-text-primary-dark: var(--boreal-primary-dark);
+  --boreal-text-default-dark: var(--boreal-neutral-dark);
+  --boreal-text-default-darker: var(--boreal-neutral-darker);
+  --boreal-text-default-deep: var(--boreal-neutral-deep);
+  --boreal-text-default-ink: var(--boreal-neutral-ink);
+  --boreal-ui-default-base: var(--boreal-neutral);
+  --boreal-ui-inverse: var(--boreal-white);
+  --boreal-ui-accent: var(--boreal-accent-base);
+  --boreal-ui-black-light: var(--boreal-neutral-darker);
+  --boreal-ui-base: var(--boreal-base-alt);
+  --boreal-ui-base-light: var(--boreal-base-light);
+  --boreal-ui-disabled: var(--boreal-neutral-ligther);
+  --boreal-ui-info-light: var(--boreal-information-light);
+  --boreal-ui-success-light: var(--boreal-success-light);
+  --boreal-ui-success-base: var(--boreal-success-base);
+  --boreal-ui-black: var(--boreal-neutral-contrast);
+  --boreal-ui-danger-light: var(--boreal-danger-light);
+  --boreal-ui-primary-lighter: var(--boreal-primary-lighter);
+  --boreal-ui-danger-base: var(--boreal-danger-base);
+  --boreal-ui-info-base: var(--boreal-information-base);
+  --boreal-ui-primary-base: var(--boreal-primary-base);
+  --boreal-ui-primary-light: var(--boreal-primary-light);
+  --boreal-ui-primary-dark: var(--boreal-primary-dark);
+  --boreal-ui-warning-base: var(--boreal-warning-base);
+  --boreal-ui-success-lighter: var(--boreal-success-lighter);
+  --boreal-ui-danger-lighter: var(--boreal-danger-lighter);
+  --boreal-ui-info-lighter: var(--boreal-information-lighter);
+  --boreal-ui-warning-light: var(--boreal-warning-light);
+  --boreal-ui-warning-lighter: var(--boreal-warning-lighter);
+  --boreal-ui-base-lighter: var(--boreal-base-lighter);
+  --boreal-ui-default-lighter: var(--boreal-neutral-ligther);
+  --boreal-ui-success-dark: var(--boreal-success-dark);
+  --boreal-ui-danger-dark: var(--boreal-danger-dark);
+  --boreal-ui-info-dark: var(--boreal-information-dark);
+  --boreal-ui-warning-dark: var(--boreal-warning-dark);
+  --boreal-ui-default-light: var(--boreal-neutral-light);
+  --boreal-ui-default-paper: var(--boreal-neutral-paper);
+  --boreal-ui-default-dark: var(--boreal-neutral-dark);
+  --boreal-ui-default-darker: var(--boreal-neutral-darker);
+  --boreal-ui-default-deep: var(--boreal-neutral-deep);
+  --boreal-ui-default-ink: var(--boreal-neutral-ink);
+  --boreal-icon-info-dark: var(--boreal-information-darker);
+  --boreal-icon-default-lighter: var(--boreal-neutral-paper);
+  --boreal-icon-default-light: var(--boreal-neutral-dark);
+  --boreal-icon-default-dark: var(--boreal-neutral-base);
+  --boreal-icon-success-base: var(--boreal-success-base);
+  --boreal-icon-inverse: var(--boreal-white);
+  --boreal-icon-warning-base: var(--boreal-warning-base);
+  --boreal-icon-accent-base: var(--boreal-accent-base);
+  --boreal-icon-danger-base: var(--boreal-danger-base);
+  --boreal-icon-base: var(--boreal-base-alt);
+  --boreal-icon-primary-base: var(--boreal-primary-base);
+  --boreal-icon-success-dark: var(--boreal-success-dark);
+  --boreal-icon-warning-dark: var(--boreal-warning-darker);
+  --boreal-icon-danger-dark: var(--boreal-danger-dark);
+  --boreal-icon-info-base: var(--boreal-information-base);
+  --boreal-icon-info-light: var(--boreal-information-light);
+  --boreal-icon-success-light: var(--boreal-success-light);
+  --boreal-icon-warning-light: var(--boreal-warning-light);
+  --boreal-icon-danger-light: var(--boreal-danger-light);
+  --boreal-icon-disabled: var(--boreal-neutral-dark);
+  --boreal-icon-primary-light: var(--boreal-primary-light);
+  --boreal-icon-primary-dark: var(--boreal-primary-dark);
+  --boreal-icon-user: var(--boreal-user-base);
+  --boreal-icon-default-ink: var(--boreal-neutral-ink);
+  --boreal-alpha-black-50: #272a2f80;
+  --boreal-alpha-black-25: #272a2f40;
+  --boreal-alpha-white-50: #ffffff80;
+  --boreal-alpha-white-25: #ffffff40;
+  --boreal-alpha-white-10: #ffffff1a;
+  --boreal-alpha-white-75: #ffffffbf;
+  --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: var(--boreal-extended-teal-darker);
+  --boreal-stroke-warning: var(--boreal-warning-base);
+  --boreal-stroke-inverse: var(--boreal-white);
+  --boreal-stroke-info-base: var(--boreal-information-base);
+  --boreal-stroke-success-base: var(--boreal-success-base);
+  --boreal-stroke-default-dark: var(--boreal-base-dark);
+  --boreal-stroke-default-light: var(--boreal-base-light);
+  --boreal-stroke-default-ink: var(--boreal-base-alt);
+  --boreal-stroke-focus: var(--boreal-focus);
+  --boreal-stroke-danger-base: var(--boreal-danger-base);
+  --boreal-stroke-accent: var(--boreal-accent-base);
+  --boreal-stroke-primary-base: var(--boreal-primary-base);
+  --boreal-stroke-primary-light: var(--boreal-primary-light);
+  --boreal-stroke-primary-dark: var(--boreal-primary-dark);
+  --boreal-stroke-info-light: var(--boreal-information-light);
+  --boreal-stroke-info-dark: var(--boreal-information-dark);
+  --boreal-stroke-success-light: var(--boreal-success-light);
+  --boreal-stroke-success-dark: var(--boreal-success-dark);
+  --boreal-stroke-warning-light: var(--boreal-warning-light);
+  --boreal-stroke-warning-dark: var(--boreal-warning-dark);
+  --boreal-stroke-danger-light: var(--boreal-danger-light);
+  --boreal-stroke-danger-dark: var(--boreal-danger-dark);
+  --boreal-stroke-default-lighter: var(--boreal-base-lighter);
+}

package/dist/css/theme-proximus.css

@@ -0,0 +1,227 @@
+[data-theme="proximus"] {
+  --boreal-accent-dark: var(--boreal-color-proximus-mint-mint-700);
+  --boreal-black: var(--boreal-color-proximus-onyx-onyx-900);
+  --boreal-accent-light: var(--boreal-color-proximus-mint-mint-200);
+  --boreal-white: var(--boreal-color-white);
+  --boreal-accent-base: var(--boreal-color-proximus-mint-mint-400);
+  --boreal-extended-teal-light: var(--boreal-color-engage-teal-teal-20);
+  --boreal-extended-teal-lighter: var(--boreal-color-engage-teal-teal-5);
+  --boreal-extended-teal-base: var(--boreal-color-engage-teal-teal-40);
+  --boreal-extended-teal-dark: var(--boreal-color-engage-teal-teal-70);
+  --boreal-extended-teal-darker: var(--boreal-color-engage-teal-teal-90);
+  --boreal-extended-purple-base: var(--boreal-color-engage-purple-purple-50);
+  --boreal-extended-purple-dark: var(--boreal-color-engage-purple-purple-70);
+  --boreal-extended-orange-base: var(--boreal-color-engage-orange-orange-40);
+  --boreal-extended-purple-light: var(--boreal-color-engage-purple-purple-20);
+  --boreal-extended-orange-darker: var(--boreal-color-engage-orange-orange-90);
+  --boreal-extended-orange-lighter: var(--boreal-color-engage-orange-orange-5);
+  --boreal-extended-orange-dark: var(--boreal-color-engage-orange-orange-70);
+  --boreal-extended-orange-light: var(--boreal-color-engage-orange-orange-20);
+  --boreal-extended-purple-lighter: var(--boreal-color-engage-purple-purple-5);
+  --boreal-extended-purple-darker: var(--boreal-color-engage-purple-purple-90);
+  --boreal-extended-cyan-lighter: var(--boreal-color-engage-cyan-cyan-5);
+  --boreal-extended-cyan-light: var(--boreal-color-engage-cyan-cyan-20);
+  --boreal-extended-cyan-base: var(--boreal-color-engage-cyan-cyan-40);
+  --boreal-extended-cyan-dark: var(--boreal-color-engage-cyan-cyan-70);
+  --boreal-extended-cyan-darker: var(--boreal-color-engage-cyan-cyan-90);
+  --boreal-extended-lime-dark: var(--boreal-color-engage-lime-lime-70);
+  --boreal-extended-lime-base: var(--boreal-color-engage-lime-lime-40);
+  --boreal-extended-lime-darker: var(--boreal-color-engage-lime-lime-90);
+  --boreal-extended-lime-light: var(--boreal-color-engage-lime-lime-20);
+  --boreal-extended-lime-lighter: var(--boreal-color-engage-lime-lime-5);
+  --boreal-extended-cobalt-lighter: var(--boreal-color-protect-cobalt-cobalt-50);
+  --boreal-extended-cobalt-light: var(--boreal-color-protect-cobalt-cobalt-100);
+  --boreal-extended-cobalt-base: var(--boreal-color-protect-cobalt-cobalt-600);
+  --boreal-extended-cobalt-dark: var(--boreal-color-protect-cobalt-cobalt-800);
+  --boreal-extended-cobalt-darker: var(--boreal-color-protect-cobalt-cobalt-900);
+  --boreal-extended-onyx-lighter: var(--boreal-color-protect-onyx-onyx-100);
+  --boreal-extended-onyx-light: var(--boreal-color-protect-onyx-onyx-200);
+  --boreal-extended-onyx-base: var(--boreal-color-protect-onyx-onyx-500);
+  --boreal-extended-onyx-dark: var(--boreal-color-protect-onyx-onyx-600);
+  --boreal-extended-onyx-darker: var(--boreal-color-protect-onyx-onyx-900);
+  --boreal-extended-rose-lighter: var(--boreal-color-engage-rose-rose-5);
+  --boreal-extended-rose-light: var(--boreal-color-engage-rose-rose-20);
+  --boreal-extended-rose-base: var(--boreal-color-engage-rose-rose-50);
+  --boreal-extended-rose-dark: var(--boreal-color-engage-rose-rose-70);
+  --boreal-extended-rose-darker: var(--boreal-color-engage-rose-rose-90);
+  --boreal-neutral-deep: var(--boreal-color-proximus-onyx-onyx-600);
+  --boreal-information-lighter: var(--boreal-color-proximus-cobalt-cobalt-5);
+  --boreal-information-light: var(--boreal-color-proximus-cobalt-cobalt-200);
+  --boreal-success-lighter: var(--boreal-color-proximus-mint-mint-5);
+  --boreal-information-base: var(--boreal-color-proximus-cobalt-cobalt-500);
+  --boreal-neutral-contrast: var(--boreal-color-proximus-onyx-onyx-900);
+  --boreal-information-dark: var(--boreal-color-proximus-cobalt-cobalt-700);
+  --boreal-neutral-base: var(--boreal-color-proximus-onyx-onyx-400);
+  --boreal-warning-base: var(--boreal-color-proximus-amber-amber-400);
+  --boreal-neutral-ink: var(--boreal-color-proximus-onyx-onyx-700);
+  --boreal-warning-dark: var(--boreal-color-proximus-amber-amber-700);
+  --boreal-warning-darker: var(--boreal-color-proximus-amber-amber-900);
+  --boreal-warning-light: var(--boreal-color-proximus-amber-amber-200);
+  --boreal-focus: var(--boreal-color-proximus-cobalt-cobalt-200);
+  --boreal-success-light: var(--boreal-color-proximus-mint-mint-200);
+  --boreal-neutral-ligther: var(--boreal-color-proximus-neutral-neutral-200);
+  --boreal-success-base: var(--boreal-color-proximus-mint-mint-600);
+  --boreal-primary-dark: var(--boreal-color-proximus-cobalt-cobalt-700);
+  --boreal-danger-darker: var(--boreal-color-proximus-red-red-900);
+  --boreal-primary-darker: var(--boreal-color-proximus-cobalt-cobalt-900);
+  --boreal-danger-dark: var(--boreal-color-proximus-red-red-800);
+  --boreal-base-alt: var(--boreal-color-proximus-onyx-onyx-900);
+  --boreal-neutral-dark: var(--boreal-color-proximus-onyx-onyx-100);
+  --boreal-danger-lighter: var(--boreal-color-proximus-red-red-50);
+  --boreal-base-lighter: var(--boreal-color-proximus-neutral-neutral-300);
+  --boreal-danger-light: var(--boreal-color-proximus-red-red-200);
+  --boreal-accent-lighter: var(--boreal-color-proximus-mint-mint-5);
+  --boreal-success-dark: var(--boreal-color-proximus-mint-mint-700);
+  --boreal-neutral: var(--boreal-color-proximus-onyx-onyx-50);
+  --boreal-accent-darker: var(--boreal-color-proximus-mint-mint-900);
+  --boreal-neutral-paper: var(--boreal-color-proximus-onyx-onyx-200);
+  --boreal-warning-lighter: var(--boreal-color-proximus-amber-amber-50);
+  --boreal-success-darker: var(--boreal-color-proximus-mint-mint-900);
+  --boreal-primary-base: var(--boreal-color-proximus-cobalt-cobalt-500);
+  --boreal-information-darker: var(--boreal-color-proximus-cobalt-cobalt-900);
+  --boreal-neutral-darker: var(--boreal-color-proximus-onyx-onyx-500);
+  --boreal-neutral-light: var(--boreal-color-proximus-onyx-onyx-100);
+  --boreal-danger-base: var(--boreal-color-proximus-red-red-500);
+  --boreal-neutral-deeper: var(--boreal-color-proximus-onyx-onyx-800);
+  --boreal-base-light: var(--boreal-color-proximus-neutral-neutral-300);
+  --boreal-primary-light: var(--boreal-color-proximus-cobalt-cobalt-200);
+  --boreal-primary-lighter: var(--boreal-color-proximus-cobalt-cobalt-5);
+  --boreal-base-dark: var(--boreal-color-proximus-onyx-onyx-100);
+  --boreal-base-darker: var(--boreal-color-proximus-onyx-onyx-200);
+  --boreal-user-base: var(--boreal-color-proximus-cobalt-cobalt-5);
+  --boreal-bg-overlay: var(--boreal-neutral-contrast);
+  --boreal-bg-inverse: var(--boreal-white);
+  --boreal-bg-primary-darker: var(--boreal-primary-darker);
+  --boreal-bg-neutral: var(--boreal-neutral);
+  --boreal-bg-primary-base: var(--boreal-primary-base);
+  --boreal-bg-neutral-ink: var(--boreal-neutral-ink);
+  --boreal-bg-primary-lighter: var(--boreal-primary-lighter);
+  --boreal-bg-primary-light: var(--boreal-primary-light);
+  --boreal-bg-neutral-light: var(--boreal-neutral-light);
+  --boreal-bg-neutral-paper: var(--boreal-neutral-paper);
+  --boreal-bg-nuetral-dark: var(--boreal-neutral-dark);
+  --boreal-bg-neutral-base: var(--boreal-neutral-base);
+  --boreal-bg-neutral-darker: var(--boreal-neutral-darker);
+  --boreal-bg-neutral-deep: var(--boreal-neutral-deep);
+  --boreal-text-success-base: var(--boreal-success-base);
+  --boreal-text-danger-base: var(--boreal-danger-base);
+  --boreal-text-information-base: var(--boreal-information-base);
+  --boreal-text-accent: var(--boreal-accent-base);
+  --boreal-text-default: var(--boreal-neutral-ink);
+  --boreal-text-default-light: var(--boreal-neutral-base);
+  --boreal-text-inverse: var(--boreal-white);
+  --boreal-text-warning-base: var(--boreal-warning-base);
+  --boreal-text-disabled: var(--boreal-neutral-dark);
+  --boreal-text-primary-base: var(--boreal-primary-base);
+  --boreal-text-danger-dark: var(--boreal-danger-dark);
+  --boreal-text-success-dark: var(--boreal-success-dark);
+  --boreal-text-information-dark: var(--boreal-information-darker);
+  --boreal-text-warning-light: var(--boreal-warning-light);
+  --boreal-text-danger-light: var(--boreal-danger-light);
+  --boreal-text-success-light: var(--boreal-success-light);
+  --boreal-text-information-light: var(--boreal-information-light);
+  --boreal-text-warning-dark: var(--boreal-warning-darker);
+  --boreal-text-base: var(--boreal-base-alt);
+  --boreal-text-primary-light: var(--boreal-primary-light);
+  --boreal-text-primary-dark: var(--boreal-primary-dark);
+  --boreal-text-default-dark: var(--boreal-neutral-dark);
+  --boreal-text-default-darker: var(--boreal-neutral-darker);
+  --boreal-text-default-deep: var(--boreal-neutral-deep);
+  --boreal-text-default-ink: var(--boreal-neutral-ink);
+  --boreal-ui-default-base: var(--boreal-neutral);
+  --boreal-ui-inverse: var(--boreal-white);
+  --boreal-ui-accent: var(--boreal-accent-base);
+  --boreal-ui-black-light: var(--boreal-neutral-darker);
+  --boreal-ui-base: var(--boreal-base-alt);
+  --boreal-ui-base-light: var(--boreal-base-light);
+  --boreal-ui-disabled: var(--boreal-neutral-ligther);
+  --boreal-ui-info-light: var(--boreal-information-light);
+  --boreal-ui-success-light: var(--boreal-success-light);
+  --boreal-ui-success-base: var(--boreal-success-base);
+  --boreal-ui-black: var(--boreal-neutral-contrast);
+  --boreal-ui-danger-light: var(--boreal-danger-light);
+  --boreal-ui-primary-lighter: var(--boreal-primary-lighter);
+  --boreal-ui-danger-base: var(--boreal-danger-base);
+  --boreal-ui-info-base: var(--boreal-information-base);
+  --boreal-ui-primary-base: var(--boreal-primary-base);
+  --boreal-ui-primary-light: var(--boreal-primary-light);
+  --boreal-ui-primary-dark: var(--boreal-primary-dark);
+  --boreal-ui-warning-base: var(--boreal-warning-base);
+  --boreal-ui-success-lighter: var(--boreal-success-lighter);
+  --boreal-ui-danger-lighter: var(--boreal-danger-lighter);
+  --boreal-ui-info-lighter: var(--boreal-information-lighter);
+  --boreal-ui-warning-light: var(--boreal-warning-light);
+  --boreal-ui-warning-lighter: var(--boreal-warning-lighter);
+  --boreal-ui-base-lighter: var(--boreal-base-lighter);
+  --boreal-ui-default-lighter: var(--boreal-neutral-ligther);
+  --boreal-ui-success-dark: var(--boreal-success-dark);
+  --boreal-ui-danger-dark: var(--boreal-danger-dark);
+  --boreal-ui-info-dark: var(--boreal-information-dark);
+  --boreal-ui-warning-dark: var(--boreal-warning-dark);
+  --boreal-ui-default-light: var(--boreal-neutral-light);
+  --boreal-ui-default-paper: var(--boreal-neutral-paper);
+  --boreal-ui-default-dark: var(--boreal-neutral-dark);
+  --boreal-ui-default-darker: var(--boreal-neutral-darker);
+  --boreal-ui-default-deep: var(--boreal-neutral-deep);
+  --boreal-ui-default-ink: var(--boreal-neutral-ink);
+  --boreal-icon-info-dark: var(--boreal-information-darker);
+  --boreal-icon-default-lighter: var(--boreal-neutral-paper);
+  --boreal-icon-default-light: var(--boreal-neutral-dark);
+  --boreal-icon-default-dark: var(--boreal-neutral-base);
+  --boreal-icon-success-base: var(--boreal-success-base);
+  --boreal-icon-inverse: var(--boreal-white);
+  --boreal-icon-warning-base: var(--boreal-warning-base);
+  --boreal-icon-accent-base: var(--boreal-accent-base);
+  --boreal-icon-danger-base: var(--boreal-danger-base);
+  --boreal-icon-base: var(--boreal-base-alt);
+  --boreal-icon-primary-base: var(--boreal-primary-base);
+  --boreal-icon-success-dark: var(--boreal-success-dark);
+  --boreal-icon-warning-dark: var(--boreal-warning-darker);
+  --boreal-icon-danger-dark: var(--boreal-danger-dark);
+  --boreal-icon-info-base: var(--boreal-information-base);
+  --boreal-icon-info-light: var(--boreal-information-light);
+  --boreal-icon-success-light: var(--boreal-success-light);
+  --boreal-icon-warning-light: var(--boreal-warning-light);
+  --boreal-icon-danger-light: var(--boreal-danger-light);
+  --boreal-icon-disabled: var(--boreal-neutral-dark);
+  --boreal-icon-primary-light: var(--boreal-primary-light);
+  --boreal-icon-primary-dark: var(--boreal-primary-dark);
+  --boreal-icon-user: var(--boreal-user-base);
+  --boreal-icon-default-ink: var(--boreal-neutral-ink);
+  --boreal-alpha-black-50: #272a2f80;
+  --boreal-alpha-black-25: #272a2f40;
+  --boreal-alpha-white-50: #ffffff80;
+  --boreal-alpha-white-25: #ffffff40;
+  --boreal-alpha-white-10: #ffffff1a;
+  --boreal-alpha-white-75: #ffffffbf;
+  --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: var(--boreal-extended-teal-darker);
+  --boreal-stroke-warning: var(--boreal-warning-base);
+  --boreal-stroke-inverse: var(--boreal-white);
+  --boreal-stroke-info-base: var(--boreal-information-base);
+  --boreal-stroke-success-base: var(--boreal-success-base);
+  --boreal-stroke-default-dark: var(--boreal-base-dark);
+  --boreal-stroke-default-light: var(--boreal-base-light);
+  --boreal-stroke-default-ink: var(--boreal-base-alt);
+  --boreal-stroke-focus: var(--boreal-focus);
+  --boreal-stroke-danger-base: var(--boreal-danger-base);
+  --boreal-stroke-accent: var(--boreal-accent-base);
+  --boreal-stroke-primary-base: var(--boreal-primary-base);
+  --boreal-stroke-primary-light: var(--boreal-primary-light);
+  --boreal-stroke-primary-dark: var(--boreal-primary-dark);
+  --boreal-stroke-info-light: var(--boreal-information-light);
+  --boreal-stroke-info-dark: var(--boreal-information-dark);
+  --boreal-stroke-success-light: var(--boreal-success-light);
+  --boreal-stroke-success-dark: var(--boreal-success-dark);
+  --boreal-stroke-warning-light: var(--boreal-warning-light);
+  --boreal-stroke-warning-dark: var(--boreal-warning-dark);
+  --boreal-stroke-danger-light: var(--boreal-danger-light);
+  --boreal-stroke-danger-dark: var(--boreal-danger-dark);
+  --boreal-stroke-default-lighter: var(--boreal-base-lighter);
+}

package/dist/index.js

@@ -0,0 +1,3 @@
+export * from './components/components';
+export default {};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../lib/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AAExC,eAAe,EAAE,CAAC"}

package/dist/scss/global/_fonts.scss

@@ -0,0 +1 @@
+@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

package/dist/scss/global/_index.scss

@@ -0,0 +1,3 @@
+@forward '_fonts';
+@forward '_typography';
+@forward '_reset';

package/dist/scss/global/_reset.scss

@@ -0,0 +1,50 @@
+/**
+ * Boreal Design System - CSS Reset
+ * Minimal reset for consistent cross-browser rendering
+ */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  line-height: 1.5;
+  -webkit-text-size-adjust: 100%;
+}
+
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  overflow-wrap: break-word;
+}

package/dist/scss/global/_typography.scss

@@ -0,0 +1,156 @@
+@use "../../../dist/stencil/index" as *;
+
+.heading-4xl {
+  font-weight: $boreal-typography-font-weight-light;
+  font-size: $boreal-typography-font-size-4xl;
+  line-height: $boreal-typography-line-height-4xl;
+}
+.heading-3xl {
+  font-weight: $boreal-typography-font-weight-light;
+  font-size: $boreal-typography-font-size-3xl;
+  line-height: $boreal-typography-line-height-3xl;
+}
+.heading-2xl {
+  font-weight: $boreal-typography-font-weight-regular;
+  font-size: $boreal-typography-font-size-2xl;
+  line-height: $boreal-typography-line-height-2xl;
+}
+.heading-xl {
+  font-weight: $boreal-typography-font-weight-regular;
+  font-size: $boreal-typography-font-size-xl;
+  line-height: $boreal-typography-line-height-xl;
+}
+.heading-lg {
+  font-weight: $boreal-typography-font-weight-regular;
+  font-size: $boreal-typography-font-size-lg;
+  line-height: $boreal-typography-line-height-lg;
+}
+.heading-md {
+  font-weight: $boreal-typography-font-weight-semibold;
+  font-size: $boreal-typography-font-size-md;
+  line-height: $boreal-typography-line-height-md;
+}
+.heading-sm {
+  font-weight: $boreal-typography-font-weight-semibold;
+  font-size: $boreal-typography-font-size-sm;
+  line-height: $boreal-typography-line-height-sm;
+}
+
+.display-sm {
+  font-size: $boreal-typography-font-size-xl;
+  line-height: $boreal-typography-line-height-xl;
+  font-weight: $boreal-typography-font-weight-regular;
+}
+.display-md {
+  font-size: $boreal-typography-font-size-2xl;
+  line-height: $boreal-typography-line-height-2xl;
+  font-weight: $boreal-typography-font-weight-regular;
+}
+.display-lg {
+  font-size: $boreal-typography-font-size-3xl;
+  line-height: $boreal-typography-line-height-3xl;
+  font-weight: $boreal-typography-font-weight-regular;
+}
+.display-xl {
+  font-size: $boreal-typography-font-size-4xl;
+  line-height: $boreal-typography-line-height-4xl;
+  font-weight: $boreal-typography-font-weight-regular;
+}
+.display-xs {
+  font-size: $boreal-typography-font-size-xs;
+  line-height: $boreal-typography-line-height-xs;
+  font-weight: $boreal-typography-font-weight-regular;
+}
+
+.label-lg {
+  font-size: $boreal-typography-font-size-lg;
+  font-weight: $boreal-typography-font-weight-semibold;
+  line-height: $boreal-typography-line-height-md;
+  color: $boreal-text-default-darker;
+}
+.label-md {
+  font-size: $boreal-typography-font-size-md;
+  font-weight: $boreal-typography-font-weight-semibold;
+  line-height: $boreal-typography-line-height-md;
+  color: $boreal-text-default-darker;
+}
+.label-sm {
+  font-size: $boreal-typography-font-size-sm;
+  font-weight: $boreal-typography-font-weight-semibold;
+  line-height: $boreal-typography-line-height-sm;
+  color: $boreal-text-default-darker;
+}
+.label-xs {
+  font-size: $boreal-typography-font-size-xs;
+  font-weight: $boreal-typography-font-weight-semibold;
+  line-height: $boreal-typography-line-height-xs;
+  color: $boreal-text-default-darker;
+}
+
+.support-text {
+  font-size: $boreal-typography-font-size-sm;
+  line-height: $boreal-typography-line-height-xs;
+  font-weight: $boreal-typography-font-weight-regular;
+}
+.code {
+  font-family: $boreal-typography-font-family-secondary;
+  font-size: $boreal-typography-font-size-xs;
+  font-weight: $boreal-typography-font-weight-regular;
+  color: $boreal-text-default;
+  line-height: $boreal-typography-line-height-md;
+  overflow-wrap: break-word;
+
+  background-color: $boreal-ui-base-light;
+  padding: $boreal-spacing-3xs $boreal-spacing-xs;
+  border-radius: $boreal-radius-xs;
+
+  display: inline;
+  box-decoration-break: clone;
+  -webkit-box-decoration-break: clone;
+}
+.caption {
+  font-size: $boreal-typography-font-size-xs;
+  font-weight: $boreal-typography-font-weight-regular;
+  line-height: $boreal-typography-line-height-md;
+  color: $boreal-text-default-light;
+}
+.helper-text {
+  font-size: $boreal-typography-font-size-xs;
+  font-weight: $boreal-typography-font-weight-regular;
+  line-height: $boreal-typography-line-height-sm;
+  color: $boreal-text-default-light;
+}
+
+.link {
+  font-size: $boreal-typography-font-size-sm;
+  font-weight: $boreal-typography-font-weight-regular;
+  line-height: $boreal-typography-line-height-md;
+  color: $boreal-text-primary-base;
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+  &:visited {
+    color: $boreal-text-primary-base;
+  }
+  &:active {
+    color: $boreal-text-primary-dark;
+  }
+
+  &-md {
+    @extend .link;
+    font-size: $boreal-typography-font-size-md;
+    line-height: $boreal-typography-line-height-md;
+  }
+  &-sm {
+    @extend .link;
+    font-size: $boreal-typography-font-size-sm;
+    line-height: $boreal-typography-line-height-sm;
+  }
+  &-xs {
+    @extend .link;
+    font-size: $boreal-typography-font-size-xs;
+    line-height: $boreal-typography-line-height-xs;
+  }
+}