platformscode-new-react 0.0.2 → 0.0.4

package/src/assets/styles/themes/_light.scss

@@ -0,0 +1,404 @@
+:root {
+  --background-white: var(--colors-base-white);
+  --background-body: var(--colors-neutral-50);
+  --background-menu: var(--colors-base-white);
+  --background-card: var(--colors-base-white);
+  --background-surface-oncolor: var(--colors-base-white);
+  --background-black: var(--colors-base-black);
+  --background-neutral-800: var(--colors-neutral-800);
+  --background-neutral-400: var(--colors-neutral-400);
+  --background-neutral-300: var(--colors-neutral-300);
+  --background-neutral-200: var(--colors-neutral-200);
+  --background-neutral-100: var(--colors-neutral-100);
+  --background-neutral-50: var(--colors-neutral-50);
+  --background-neutral-25: var(--colors-neutral-25);
+  --background-primary: var(--colors-primary-sa-flag-600-primary);
+  --background-primary-400: var(--colors-primary-sa-flag-400);
+  --background-primary-200: var(--colors-primary-sa-flag-200);
+  --background-primary-50: var(--colors-primary-sa-flag-50);
+  --background-primary-25: var(--colors-primary-sa-flag-25);
+  --background-secondary: var(--colors-secondary-gold-600-primary);
+  --background-secondary-50: var(--colors-secondary-gold-50);
+  --background-secondary-25: var(--colors-secondary-gold-25);
+  --background-tertiary: var(--colors-tertiary-lavendar-600);
+  --background-tertiary-50: var(--colors-tertiary-lavendar-50);
+  --background-tertiary-25: var(--colors-tertiary-lavendar-25);
+  --background-success: var(--colors-green-600);
+  --background-success-50: var(--colors-green-50);
+  --background-success-25: var(--colors-green-25);
+  --background-info: var(--colors-blue-600);
+  --background-info-50: var(--colors-blue-50);
+  --background-info-25: var(--colors-blue-25);
+  --background-warning: var(--colors-yellow-600);
+  --background-warning-50: var(--colors-yellow-50);
+  --background-warning-25: var(--colors-yellow-25);
+  --background-error: var(--colors-red-600);
+  --background-error-50: var(--colors-red-50);
+  --background-error-25: var(--colors-red-25);
+  --background-sa-flag: var(--colors-green-900);
+  --background-sa-flag-50: var(--colors-green-50);
+  --background-sa-flag-25: var(--colors-green-25);
+  --background-notification-white: var(--colors-base-white);
+  --text-default: var(--colors-base-black);
+  --text-primary: var(--colors-primary-sa-flag-600-primary);
+  --text-secondary: var(--colors-secondary-gold-600-primary);
+  --text-tertiary: var(--colors-tertiary-lavendar-500-primary);
+  --text-primary-sa-flag: var(--colors-primary-sa-flag-800);
+  --text-display: var(--colors-neutral-800);
+  --text-primary-paragraph: var(--colors-neutral-700);
+  --text-secondary-paragraph: var(--colors-neutral-500);
+  --text-oncolor-primary: var(--colors-base-white);
+  --text-oncolor-secondary: var(--alpha-white-80);
+  --text-oncolor-tertiary: var(--alpha-white-70);
+  --text-success: var(--colors-green-700);
+  --text-info: var(--colors-blue-700);
+  --text-warning: var(--colors-yellow-700);
+  --text-error: var(--colors-red-700);
+  --text-primary-light: var(--colors-primary-sa-flag-300);
+  --text-secondary-light: var(--colors-secondary-gold-300);
+  --text-tertiary-light: var(--colors-tertiary-lavendar-300);
+  --text-default-disabled: var(--colors-neutral-400);
+  --text-default-oncolor-disabled: var(--alpha-white-40);
+  --border-white: var(--colors-base-white);
+  --border-white-40: var(--alpha-white-40);
+  --button-background-black-default: var(--colors-neutral-950);
+  --button-background-black-hovered: var(--colors-neutral-800);
+  --button-background-black-pressed: var(--colors-neutral-600);
+  --button-background-black-selected: var(--colors-neutral-700);
+  --button-background-black-focused: var(--colors-neutral-950);
+  --button-background-primary-default: var(--colors-primary-sa-flag-600-primary);
+  --button-background-primary-hovered: var(--colors-primary-sa-flag-700);
+  --button-background-primary-pressed: var(--colors-primary-sa-flag-900);
+  --button-background-primary-selected: var(--colors-primary-sa-flag-800);
+  --button-background-primary-focused: var(--colors-primary-sa-flag-600-primary);
+  --button-background-neutral-default: var(--colors-neutral-100);
+  --button-background-neutral-hovered: var(--colors-neutral-100);
+  --button-background-neutral-pressed: var(--colors-neutral-200);
+  --button-background-neutral-selected: var(--colors-neutral-200);
+  --button-background-neutral-focused: var(--colors-neutral-100);
+  --button-background-danger-primary-default: var(--colors-red-600);
+  --button-background-danger-primary-hovered: var(--colors-red-700);
+  --button-background-danger-primary-pressed: var(--colors-red-900);
+  --button-background-danger-primary-selected: var(--colors-red-800);
+  --button-background-danger-primary-focused: var(--colors-red-600);
+  --button-label-danger-primary-default-oncolor: var(--colors-red-200);
+  --button-label-danger-primary-hovered-oncolor: var(--colors-red-300);
+  --button-label-danger-primary-pressed-oncolor: var(--colors-red-400);
+  --button-background-danger-secondary-default: var(--colors-red-50);
+  --button-background-danger-secondary-hovered: var(--colors-red-100);
+  --button-background-danger-secondary-pressed: var(--colors-red-200);
+  --button-background-danger-secondary-selected: var(--colors-red-50);
+  --button-background-danger-secondary-focused: var(--colors-red-50);
+  --button-background-oncolor-default: var(--colors-base-white);
+  --button-background-oncolor-hovered: var(--alpha-white-80);
+  --button-background-oncolor-pressed: var(--alpha-white-60);
+  --button-background-oncolor-selected: var(--alpha-white-70);
+  --button-background-oncolor-focused: var(--alpha-white-100);
+  --button-background-transparent-default: var(--alpha-white-0);
+  --button-background-transparent-hovered: var(--alpha-white-20);
+  --button-background-transparent-pressed: var(--alpha-white-40);
+  --button-background-transparent-selected: var(--alpha-white-30);
+  --button-background-transparent-focused: var(--alpha-white-0);
+  --button-background-disabled-on-color: var(--alpha-white-20);
+  --button-label-transparent-hovered-on-color: var(--colors-primary-sa-flag-400);
+  --border-black: var(--colors-base-black);
+  --border-primary: var(--colors-primary-sa-flag-600-primary);
+  --border-primary-light: var(--colors-primary-sa-flag-200);
+  --border-secondary: var(--colors-secondary-gold-600-primary);
+  --border-secondary-light: var(--colors-secondary-gold-200);
+  --border-tertiary: var(--colors-tertiary-lavendar-500-primary);
+  --border-tertiary-light: var(--colors-tertiary-lavendar-200);
+  --border-neutral-primary: var(--colors-neutral-300);
+  --border-neutral-secondary: var(--colors-neutral-200);
+  --border-neutral-tertiary: var(--colors-neutral-100);
+  --border-background-white: var(--colors-neutral-100);
+  --border-background-neutral: var(--colors-neutral-300);
+  --border-transparent-10: var(--alpha-white-10);
+  --border-oncolor-transparent-30: var(--colors-alpha-alpha-white-30);
+  --border-success: var(--colors-green-700);
+  --button-label-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
+  --border-success-light: var(--colors-green-200);
+  --border-info: var(--colors-blue-700);
+  --button-label-transparent-selected-on-color: var(--colors-primary-sa-flag-400);
+  --border-info-light: var(--colors-blue-200);
+  --button-icon-transparent-hovered-on-color: var(--background-primary-400);
+  --border-warning: var(--colors-yellow-700);
+  --border-warning-light: var(--colors-yellow-200);
+  --border-error: var(--colors-red-700);
+  --button-icon-transparent-pressed-on-color: var(--colors-primary-sa-flag-300);
+  --border-error-light: var(--colors-red-200);
+  --button-icon-transparent-selected-on-color: var(--colors-primary-sa-flag-400);
+  --border-disabled: var(--colors-neutral-400);
+  --link-primary: var(--colors-primary-sa-flag-600-primary);
+  --link-primary-hovered: var(--colors-primary-sa-flag-400);
+  --link-primary-pressed: var(--colors-primary-sa-flag-300);
+  --link-primary-focused: var(--colors-primary-sa-flag-600-primary);
+  --link-primary-visited: var(--colors-primary-sa-flag-800);
+  --link-icon-primary-hovered: var(--colors-primary-sa-flag-400);
+  --link-icon-primary-pressed: var(--colors-primary-sa-flag-300);
+  --link-icon-primary-focused: var(--colors-primary-sa-flag-600-primary);
+  --link-icon-primary-visited: var(--colors-primary-sa-flag-800);
+  --link-secondary: var(--colors-secondary-gold-600-primary);
+  --link-secondary-hovered: var(--colors-secondary-gold-400);
+  --link-secondary-pressed: var(--colors-secondary-gold-300);
+  --link-secondary-focused: var(--colors-secondary-gold-600-primary);
+  --link-secondary-visited: var(--colors-secondary-gold-900);
+  --link-tertiary: var(--colors-tertiary-lavendar-500-primary);
+  --link-tertiary-hovered: var(--colors-tertiary-lavendar-400);
+  --link-tertiary-pressed: var(--colors-tertiary-lavendar-300);
+  --link-tertiary-focused: var(--colors-tertiary-lavendar-500-primary);
+  --link-tertiary-visited: var(--colors-tertiary-lavendar-800);
+  --link-neutral: var(--colors-neutral-700);
+  --link-neutral-hovered: var(--colors-neutral-500);
+  --link-icon-neutral-hovered: var(--colors-neutral-500);
+  --link-neutral-pressed: var(--colors-neutral-400);
+  --link-icon-neutral-pressed: var(--colors-neutral-400);
+  --link-neutral-focused: var(--colors-neutral-700);
+  --link-icon-neutral-focused: var(--colors-neutral-700);
+  --link-neutral-visited: var(--colors-neutral-600);
+  --link-icon-neutral-visited: var(--colors-neutral-600);
+  --link-danger: var(--colors-red-600);
+  --link-danger-hovered: var(--colors-red-700);
+  --link-icon-danger-hovered: var(--colors-red-700);
+  --link-danger-pressed: var(--colors-red-900);
+  --link-icon-danger-pressed: var(--colors-red-900);
+  --link-danger-focused: var(--colors-red-600);
+  --link-icon-danger-focused: var(--colors-red-600);
+  --link-danger-visited: var(--colors-red-800);
+  --link-icon-danger-visited: var(--colors-red-800);
+  --link-oncolor: var(--colors-base-white);
+  --link-oncolor-hovered: var(--colors-alpha-alpha-white-80);
+  --link-icon-oncolor-hovered: var(--alpha-white-80);
+  --link-oncolor-pressed: var(--colors-alpha-alpha-white-60);
+  --link-icon-oncolor-pressed: var(--alpha-white-60);
+  --link-oncolor-focused: var(--colors-base-white);
+  --link-link-oncolor-focused: var(--colors-base-white);
+  --link-oncolor-visited: var(--colors-alpha-alpha-white-90);
+  --link-icon-oncolor-visited: var(--alpha-white-90);
+  --link-oncolor-disabled: var(--colors-alpha-alpha-white-30);
+  --link-icon-oncolor-disabled: var(--alpha-white-30);
+  --icon-oncolor: var(--colors-base-white);
+  --tag-background-neutral: var(--colors-neutral-600);
+  --tag-background-neutral-light: var(--colors-neutral-50);
+  --tag-background-on-color: var(--colors-alpha-alpha-white-20);
+  --tag-text-neutral: var(--colors-neutral-800);
+  --tag-text-success: var(--colors-green-800);
+  --tag-text-info: var(--colors-blue-800);
+  --tag-text-warning: var(--colors-yellow-800);
+  --tag-text-error: var(--colors-red-800);
+  --tag-icon-neutral: var(--colors-neutral-800);
+  --tag-icon-success: var(--colors-green-800);
+  --tag-icon-info: var(--colors-blue-800);
+  --tag-icon-warning: var(--colors-yellow-800);
+  --tag-icon-error: var(--colors-red-800);
+  --tag-background-success: var(--colors-green-700);
+  --tag-background-success-light: var(--colors-green-50);
+  --tag-background-info: var(--colors-blue-600);
+  --tag-background-info-light: var(--colors-blue-50);
+  --tag-background-warning: var(--colors-yellow-700);
+  --tag-background-warning-light: var(--colors-yellow-50);
+  --tag-background-error: var(--colors-red-600);
+  --tag-background-error-light: var(--colors-red-50);
+  --tag-border-neutral: var(--colors-neutral-600);
+  --tag-border-neutral-light: var(--colors-neutral-50);
+  --tag-border-on-color: var(--colors-alpha-alpha-white-60);
+  --tag-border-success: var(--colors-green-700);
+  --tag-border-success-light: var(--colors-green-200);
+  --tag-border-info: var(--colors-blue-700);
+  --tag-border-info-light: var(--colors-blue-200);
+  --tag-border-warning: var(--colors-yellow-700);
+  --tag-border-warning-light: var(--colors-yellow-200);
+  --tag-border-error: var(--colors-red-700);
+  --tag-border-error-light: var(--colors-red-200);
+  --tag-dot: var(--colors-alpha-alpha-white-60);
+  --form-text-form-title: var(--text-default);
+  --controls-control-primary: var(--alpha-white-0);
+  --table-cell-border: var(--colors-neutral-300);
+  --table-cell-border-inverse: var(--border-black);
+  --table-text-head: var(--colors-neutral-700);
+  --table-text-body: var(--text-default);
+  --table-background-disabled: var(--background-disabled);
+  --table-background-hover-selected: var(--colors-neutral-50);
+  --table-background-header: var(--colors-neutral-100);
+  --table-background-row: var(--colors-neutral-50);
+  --controls-control-primary-checked: var(--colors-primary-sa-flag-600-primary);
+  --controls-control-primary-hovered: var(--colors-primary-sa-flag-800);
+  --controls-control-primary-pressed: var(--colors-primary-sa-flag-800);
+  --controls-control-primary-focused: var(--colors-primary-sa-flag-600-primary);
+  --controls-control-neutral-checked: var(--colors-neutral-950);
+  --controls-control-neutral-hovered: var(--colors-neutral-600);
+  --controls-control-neutral-pressed: var(--colors-neutral-600);
+  --controls-control-neutral-focused: var(--colors-neutral-950);
+  --controls-control-primary--readonly: var(--alpha-white-0);
+  --controls-control-pressed: var(--colors-neutral-300);
+  --controls-control-ripple-effect: var(--colors-neutral-200);
+  --controls-control-border: var(--colors-neutral-500);
+  --form-text-form-paragraph: var(--text-secondary-paragraph);
+  --form-field-text-label: var(--text-default);
+  --form-field-text-placeholder: var(--text-secondary-paragraph);
+  --form-field-text-hovered: var(--text-default);
+  --stepper-button-completed: var(--colors-primary-sa-flag-600-primary);
+  --tooltip-background-light: var(--colors-base-white);
+  --tooltip-text-heading-light: var(--text-display);
+  --tooltip-text-paragraph-light: var(--text-primary-paragraph);
+  --tooltip-background-dark: var(--colors-neutral-800);
+  --tooltip-text-heading-dark: var(--colors-neutral-50);
+  --tooltip-text-paragraph-dark: var(--colors-neutral-100);
+  --alpha-white-0: var(--colors-alpha-alpha-white-0);
+  --alpha-white-10: var(--colors-alpha-alpha-white-10);
+  --alpha-white-20: var(--colors-alpha-alpha-white-20);
+  --alpha-white-30: var(--colors-alpha-alpha-white-30);
+  --alpha-white-40: var(--colors-alpha-alpha-white-40);
+  --alpha-white-50: var(--colors-alpha-alpha-white-50);
+  --alpha-white-60: var(--colors-alpha-alpha-white-60);
+  --alpha-white-70: var(--colors-alpha-alpha-white-70);
+  --alpha-white-80: var(--colors-alpha-alpha-white-80);
+  --alpha-white-90: var(--colors-alpha-alpha-white-90);
+  --alpha-white-100: var(--colors-alpha-alpha-white-100);
+  --alpha-black-0: var(--colors-alpha-alpha-black-0);
+  --alpha-black-10: var(--colors-alpha-alpha-black-10);
+  --alpha-black-20: var(--colors-alpha-alpha-black-20);
+  --alpha-black-30: var(--colors-alpha-alpha-black-30);
+  --alpha-black-40: var(--colors-alpha-alpha-black-40);
+  --alpha-black-50: var(--colors-alpha-alpha-black-50);
+  --alpha-black-60: var(--colors-alpha-alpha-black-60);
+  --alpha-black-70: var(--colors-alpha-alpha-black-70);
+  --alpha-black-80: var(--colors-alpha-alpha-black-80);
+  --alpha-black-90: var(--colors-alpha-alpha-black-90);
+  --alpha-black-100: var(--colors-alpha-alpha-black-100);
+  --background-disabled: var(--colors-neutral-200);
+  --background-disabled-primary: var(--colors-primary-sa-flag-200);
+  --background-inverse-disabled: var(--colors-neutral-100);
+  --stepper-button-completed-hovered: var(--colors-primary-sa-flag-700);
+  --stepper-button-current: var(--colors-primary-sa-flag-600-primary);
+  --stepper-button-current-hovered: var(--colors-primary-sa-flag-700);
+  --stepper-button-upcomming: var(--colors-neutral-300);
+  --stepper-button-upcomming-hovered: var(--colors-neutral-400);
+  --stepper-button-background: var(--colors-base-white);
+  --stepper-text-primary: var(--text-display);
+  --stepper-text-secondary: var(--text-primary-paragraph);
+  --stepper-text-tertiary: var(--text-secondary-paragraph);
+  --stepper-line-completed: var(--colors-primary-sa-flag-600-primary);
+  --stepper-line-completed-hovered: var(--colors-primary-sa-flag-700);
+  --stepper-line-current: var(--colors-neutral-300);
+  --stepper-line-upcomming: var(--colors-neutral-300);
+  --stepper-line-upcomming-hovered: var(--colors-neutral-400);
+  --form-field-text-focused: var(--text-primary-paragraph);
+  --form-field-text-pressed: var(--text-primary-paragraph);
+  --form-field-text-filled: var(--text-default);
+  --form-field-text-readonly: var(--text-default);
+  --form-field-text-helper: var(--text-secondary-paragraph);
+  --form-field-background-default: var(--background-card);
+  --form-field-background-lighter: var(--colors-neutral-25);
+  --form-field-background-darker: var(--colors-neutral-100);
+  --form-field-background-pressed: var(--colors-neutral-100);
+  --form-field-border-default: var(--colors-neutral-400);
+  --form-field-border-hovered: var(--colors-neutral-700);
+  --form-field-border-pressed: var(--colors-neutral-950);
+  --form-field-border-error: var(--border-error);
+  --form-option-background-hover: var(--colors-neutral-100);
+  --form-option-background-pressed: var(--colors-neutral-200);
+  --form-datecell-background-default: var(--colors-primary-sa-flag-600-primary);
+  --form-datecell-background-hovered: var(--colors-primary-sa-flag-700);
+  --icon-default: var(--colors-base-black);
+  --form-datecell-background-pressed: var(--colors-primary-sa-flag-900);
+  --form-datecell-background-focused: var(--colors-primary-sa-flag-600-primary);
+  --form-datecell-today-background-default: var(--alpha-white-0);
+  --form-datecell-today-background-hovered: var(--colors-neutral-200);
+  --form-datecell-today-background-pressed: var(--colors-neutral-300);
+  --icon-default-500: var(--colors-neutral-500);
+  --form-datecell-today-background-focused: var(--alpha-white-0);
+  --form-datecell-background-disabled: #ffffff;
+  --form-datecell-background-600: var(--colors-primary-sa-flag-600-primary);
+  --form-datecell-background-300: var(--colors-primary-sa-flag-300);
+  --form-datecell-background-200: var(--colors-primary-sa-flag-200);
+  --form-datecell-background-100: var(--colors-primary-sa-flag-100);
+  --controls-control-icon-hovered: var(--icon-oncolor);
+  --alpha-primary-10: #1b835419;
+  --icon-default-400: var(--colors-neutral-400);
+  --icon-primary: var(--colors-primary-sa-flag-600-primary);
+  --alpha-primary-20: #1b835433;
+  --icon-primary-light: var(--colors-primary-sa-flag-50);
+  --alpha-warning-10: #dc680319;
+  --icon-primary-400: var(--colors-primary-sa-flag-400);
+  --alpha-warning-20: #dc680333;
+  --alpha-error-10: #d92c2019;
+  --alpha-error-20: #d92c2033;
+  --alpha-info-10: #156fee19;
+  --alpha-info-20: #156fee33;
+  --alpha-success-10: #06945419;
+  --alpha-success-20: #06945433;
+  --icon-neutral: var(--colors-neutral-700);
+  --icon-neutral-light: var(--colors-neutral-50);
+  --icon-secondary: var(--colors-secondary-gold-600-primary);
+  --icon-secondary-light: var(--colors-secondary-gold-50);
+  --icon-tertiary: var(--colors-tertiary-lavendar-500-primary);
+  --icon-tertiary-light: var(--colors-tertiary-lavendar-50);
+  --icon-success: var(--colors-green-700);
+  --icon-success-light: var(--colors-green-50);
+  --icon-info: var(--colors-blue-700);
+  --icon-info-light: var(--colors-blue-50);
+  --icon-warning: var(--colors-yellow-700);
+  --icon-warning-light: var(--colors-yellow-50);
+  --icon-error: var(--colors-red-700);
+  --icon-error-light: var(--colors-red-50);
+  --icon-default-disabled: var(--colors-neutral-400);
+  --icon-default-oncolor-disabled: var(--colors-alpha-alpha-white-40);
+  --control-disabled: var(--colors-neutral-400);
+  --featuredicons-icon-oncolor: var(--colors-base-white);
+  --featuredicons-icon-success: var(--colors-green-700);
+  --featuredicons-icon-default: var(--colors-base-black);
+  --featuredicons-icon-error: var(--colors-red-700);
+  --featuredicons-icon-secondary: var(--colors-secondary-gold-600-primary);
+  --featuredicons-icon-default-500: var(--colors-neutral-500);
+  --featuredicons-background-error-light: var(--colors-red-50);
+  --featuredicons-background-info-light: var(--colors-blue-50);
+  --featuredicons-background-warning-light: var(--colors-yellow-50);
+  --featuredicons-background-success-light: var(--colors-green-50);
+  --featuredicons-background-brand-light: var(--colors-primary-sa-flag-50);
+  --featuredicons-background-default-light: var(--colors-neutral-50);
+  --featuredicons-icon-default-400: var(--colors-neutral-400);
+  --featuredicons-icon-primary: var(--colors-primary-sa-flag-600-primary);
+  --featuredicons-icon-primary-light: var(--colors-primary-sa-flag-50);
+  --featuredicons-icon-primary-400: var(--colors-primary-sa-flag-400);
+  --featuredicons-icon-neutral: var(--colors-neutral-700);
+  --featuredicons-icon-neutral-light: var(--colors-neutral-50);
+  --featuredicons-icon-secondary-light: var(--colors-secondary-gold-50);
+  --featuredicons-icon-tertiary: var(--colors-tertiary-lavendar-500-primary);
+  --featuredicons-icon-tertiary-light: var(--colors-tertiary-lavendar-50);
+  --featuredicons-icon-success-light: var(--colors-green-50);
+  --featuredicons-icon-info: var(--colors-blue-700);
+  --featuredicons-icon-info-light: var(--colors-blue-50);
+  --featuredicons-icon-warning: var(--colors-yellow-700);
+  --featuredicons-bg-icon-warning-light: var(--background-warning-50);
+  --featuredicons-bg-icon-error-light: var(--background-error-50);
+  --featuredicons-bg-icon-brand-light: var(--colors-primary-sa-flag-50);
+  --featuredicons-bg-icon-info-light: var(--background-info-50);
+  --featuredicons-bg-icon-success-light: var(--background-success-50);
+  --controls-control-icon-pressed: var(--icon-oncolor);
+  --controls-control-icon-disabled: var(--colors-base-white);
+  --notification-background-error-light: var(--colors-red-50);
+  --notification-background-info-light: var(--colors-blue-50);
+  --notification-background-warning-light: var(--colors-yellow-50);
+  --notification-background-success-light: var(--colors-green-50);
+  --notification-background-brand-light: var(--colors-primary-sa-flag-50);
+  --notification-background-default-light: var(--colors-neutral-50);
+  --notification-background-default-50: var(--background-neutral-50);
+  --notification-background-success-50: var(--background-success-50);
+  --notification-background-warning-50: var(--background-warning-50);
+  --notification-background-error-50: var(--background-error-50);
+  --notification-background-brand-50: var(--colors-primary-sa-flag-50);
+  --notification-background-info-50: var(--background-info-50);
+  --notification-background-default-25: var(--background-neutral-25);
+  --notification-background-success-25: var(--background-success-25);
+  --notification-background-warning-25: var(--background-warning-25);
+  --notification-background-error-25: var(--background-error-25);
+  --notification-background-brand-25: var(--background-primary-25);
+  --notification-background-info-25: var(--background-info-25);
+  --notification-text-success: var(--text-success);
+  --notification-text-error: var(--text-error);
+  --notification-text-info: var(--text-info);
+  --notification-text-warning: var(--text-warning);
+  --notification-text-brand: var(--text-primary);
+  --controls-control-text-error: var(--text-error);
+}

package/src/components.ts

@@ -5,13 +5,17 @@
 
 /* eslint-disable */
 
-import { type DgaButtonCustomEvent } from '../../core/dist/types';
+import { type DgaButtonCustomEvent, type DgaLinkCustomEvent } from '../../core/dist/types';
 import { DgaAccordion as DgaAccordionElement, defineCustomElement as defineDgaAccordion } from '../../core/dist/components/dga-accordion.js';
 import { DgaAvatar as DgaAvatarElement, defineCustomElement as defineDgaAvatar } from '../../core/dist/components/dga-avatar.js';
 import { DgaBreadcrumbs as DgaBreadcrumbsElement, defineCustomElement as defineDgaBreadcrumbs } from '../../core/dist/components/dga-breadcrumbs.js';
 import { DgaButton as DgaButtonElement, defineCustomElement as defineDgaButton } from '../../core/dist/components/dga-button.js';
 import { DgaIcon as DgaIconElement, defineCustomElement as defineDgaIcon } from '../../core/dist/components/dga-icon.js';
+import { DgaLink as DgaLinkElement, defineCustomElement as defineDgaLink } from '../../core/dist/components/dga-link.js';
 import { DgaLoading as DgaLoadingElement, defineCustomElement as defineDgaLoading } from '../../core/dist/components/dga-loading.js';
+import { DgaNotificationToast as DgaNotificationToastElement, defineCustomElement as defineDgaNotificationToast } from '../../core/dist/components/dga-notification-toast.js';
+import { DgaNotification as DgaNotificationElement, defineCustomElement as defineDgaNotification } from '../../core/dist/components/dga-notification.js';
+import { DgaTag as DgaTagElement, defineCustomElement as defineDgaTag } from '../../core/dist/components/dga-tag.js';
 import { DgaTooltip as DgaTooltipElement, defineCustomElement as defineDgaTooltip } from '../../core/dist/components/dga-tooltip.js';
 import type { EventName } from '@stencil/react-output-target/runtime';
 import { createComponent } from '@stencil/react-output-target/runtime';
@@ -67,6 +71,16 @@ export const DgaIcon = /*@__PURE__*/ createComponent<DgaIconElement, DgaIconEven
   defineCustomElement: defineDgaIcon,
 });
 
+type DgaLinkEvents = { onOnClick: EventName<DgaLinkCustomEvent<MouseEvent>> };
+
+export const DgaLink = /*@__PURE__*/ createComponent<DgaLinkElement, DgaLinkEvents>({
+  tagName: 'dga-link',
+  elementClass: DgaLinkElement,
+  react: React,
+  events: { onOnClick: 'onClick' } as DgaLinkEvents,
+  defineCustomElement: defineDgaLink,
+});
+
 type DgaLoadingEvents = NonNullable<unknown>;
 
 export const DgaLoading = /*@__PURE__*/ createComponent<DgaLoadingElement, DgaLoadingEvents>({
@@ -77,6 +91,36 @@ export const DgaLoading = /*@__PURE__*/ createComponent<DgaLoadingElement, DgaLo
   defineCustomElement: defineDgaLoading,
 });
 
+type DgaNotificationEvents = NonNullable<unknown>;
+
+export const DgaNotification = /*@__PURE__*/ createComponent<DgaNotificationElement, DgaNotificationEvents>({
+  tagName: 'dga-notification',
+  elementClass: DgaNotificationElement,
+  react: React,
+  events: {} as DgaNotificationEvents,
+  defineCustomElement: defineDgaNotification,
+});
+
+type DgaNotificationToastEvents = NonNullable<unknown>;
+
+export const DgaNotificationToast = /*@__PURE__*/ createComponent<DgaNotificationToastElement, DgaNotificationToastEvents>({
+  tagName: 'dga-notification-toast',
+  elementClass: DgaNotificationToastElement,
+  react: React,
+  events: {} as DgaNotificationToastEvents,
+  defineCustomElement: defineDgaNotificationToast,
+});
+
+type DgaTagEvents = NonNullable<unknown>;
+
+export const DgaTag = /*@__PURE__*/ createComponent<DgaTagElement, DgaTagEvents>({
+  tagName: 'dga-tag',
+  elementClass: DgaTagElement,
+  react: React,
+  events: {} as DgaTagEvents,
+  defineCustomElement: defineDgaTag,
+});
+
 type DgaTooltipEvents = NonNullable<unknown>;
 
 export const DgaTooltip = /*@__PURE__*/ createComponent<DgaTooltipElement, DgaTooltipEvents>({

package/src/index.ts

@@ -1 +1,2 @@
+import './assets/styles/main.scss';
 export * from './components';

package/vite.config.ts

@@ -2,9 +2,29 @@ import path from 'node:path';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 import react from '@vitejs/plugin-react';
+// import { viteStaticCopy } from 'vite-plugin-static-copy';
 
 export default defineConfig({
-  plugins: [react(), dts()],
+  plugins: [
+    react(),
+    dts(),
+    // viteStaticCopy({
+    //   targets: [
+    //     {
+    //       src: '../core/dist/platformscode/dist/assets/fonts', // Source directory
+    //       dest: 'assets/fonts', // Destination directory in the dist folder
+    //     },
+    //   ],
+    // }),
+  ],
+  // css: {
+  //   preprocessorOptions: {
+  //     scss: {
+  //       additionalData: `@import "src/assets/styles/main.scss";`, // Example of injecting global SCSS variables
+  //     },
+  //   },
+  // },
+
   build: {
     lib: {
       entry: path.resolve(__dirname, 'src/index.ts'),