From 6434b304dc7ae268c80868ed8530cbc19d07ef2d Mon Sep 17 00:00:00 2001 From: Pierre-Yves Lafleur Date: Thu, 5 Dec 2024 14:27:47 -0500 Subject: [PATCH 1/7] feat(Theme): add snapshot for default theme --- packages/react/src/themes/equisoft.test.ts | 7 + .../react/src/themes/equisoft.test.ts.snap | 1077 +++++++++++++++++ 2 files changed, 1084 insertions(+) create mode 100644 packages/react/src/themes/equisoft.test.ts create mode 100644 packages/react/src/themes/equisoft.test.ts.snap diff --git a/packages/react/src/themes/equisoft.test.ts b/packages/react/src/themes/equisoft.test.ts new file mode 100644 index 0000000000..41182c11de --- /dev/null +++ b/packages/react/src/themes/equisoft.test.ts @@ -0,0 +1,7 @@ +import { buildTheme } from './build-theme'; + +describe('buildTheme', () => { + test('equisoft (default) theme snapshot', () => { + expect(buildTheme({})).toMatchSnapshot(); + }); +}); diff --git a/packages/react/src/themes/equisoft.test.ts.snap b/packages/react/src/themes/equisoft.test.ts.snap new file mode 100644 index 0000000000..9e7190af22 --- /dev/null +++ b/packages/react/src/themes/equisoft.test.ts.snap @@ -0,0 +1,1077 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`buildTheme equisoft (default) theme snapshot 1`] = ` +{ + "alias": { + "color-action": "#006296", + "color-action-destructive": "#CD2C23", + "color-action-destructive-disabled": "#F99D99", + "color-action-destructive-hover": "#7B1A15", + "color-action-disabled": "#84C6EA", + "color-action-hover": "#003A5A", + "color-action-inverse": "#FFFFFF", + "color-action-inverse-disabled": "#006296", + "color-action-inverse-hover": "#84C6EA", + "color-backdrop-background": "rgb(0 0 0 / 0.75)", + "color-backdrop-background-subtle": "rgb(0 0 0 / 0.5)", + "color-background": "#FFFFFF", + "color-background-brand": "#006296", + "color-background-brand-bold": "#012639", + "color-background-brand-subtle": "#84C6EA", + "color-background-disabled": "#F1F2F2", + "color-background-empty": "#DBDEE1", + "color-background-hover": "#DBDEE1", + "color-background-indicator-active": "#012639", + "color-background-indicator-disabled": "#B7BBC2", + "color-background-indicator-selected": "#006296", + "color-background-isolated": "#FAFAFA", + "color-background-neutral-bold": "#60666E", + "color-background-neutral-bold-disabled": "#B7BBC2", + "color-background-neutral-subtle": "#F1F2F2", + "color-background-neutral-subtlest": "#FAFAFA", + "color-background-overlay": "#FFFFFF", + "color-background-selected": "#E0F0F9", + "color-background-selected-hover": "#C2E2F4", + "color-border": "#DBDEE1", + "color-border-bold": "#878F9A", + "color-border-brand": "#006296", + "color-border-brand-bold": "#003A5A", + "color-border-disabled": "#DBDEE1", + "color-border-empty": "#B7BBC2", + "color-border-focus-inside": "#84C6EA", + "color-border-focus-inside-inverse": "#006296", + "color-border-focus-outside": "#006296", + "color-border-focus-outside-inverse": "#84C6EA", + "color-border-hover": "#000000", + "color-border-inverse": "#FFFFFF", + "color-border-overlay": "#878F9A", + "color-border-selected": "#006296", + "color-border-subtle": "#F1F2F2", + "color-box-shadow": "rgb(0 0 0 / 0.2)", + "color-content": "#1B1C1E", + "color-content-brand": "#006296", + "color-content-disabled": "#B7BBC2", + "color-content-hover": "#000000", + "color-content-inverse": "#FFFFFF", + "color-content-selected": "#003A5A", + "color-content-subtle": "#60666E", + "color-control-auxiliary": "#60666E", + "color-control-auxiliary-checked": "#FFFFFF", + "color-control-auxiliary-disabled": "#B7BBC2", + "color-control-auxiliary-error": "#CD2C23", + "color-control-auxiliary-hover": "#000000", + "color-control-auxiliary-selected": "#003A5A", + "color-control-auxiliary-success": "#008533", + "color-control-background": "#FFFFFF", + "color-control-background-checked": "#006296", + "color-control-background-disabled": "#F1F2F2", + "color-control-background-hover": "#DBDEE1", + "color-control-background-selected": "#E0F0F9", + "color-control-background-selected-hover": "#C2E2F4", + "color-control-border": "#60666E", + "color-control-border-checked": "#006296", + "color-control-border-disabled": "#B7BBC2", + "color-control-border-error": "#CD2C23", + "color-control-border-hover": "#000000", + "color-control-border-selected": "#006296", + "color-control-value": "#1B1C1E", + "color-control-value-disabled": "#B7BBC2", + "color-control-value-hover": "#000000", + "color-feedback-background-alert-bold": "#CD2C23", + "color-feedback-background-alert-subtle": "#FAEAE9", + "color-feedback-background-alert-subtlest": "#FDF7F6", + "color-feedback-background-discovery-bold": "#602FA0", + "color-feedback-background-discovery-subtle": "#EFEAF5", + "color-feedback-background-discovery-subtlest": "#F9F7FB", + "color-feedback-background-informative-bold": "#006296", + "color-feedback-background-informative-subtle": "#E0F0F9", + "color-feedback-background-informative-subtlest": "#F3F9FD", + "color-feedback-background-success-bold": "#008533", + "color-feedback-background-success-bold-disabled": "#8ADDA9", + "color-feedback-background-success-subtle": "#E1F7EA", + "color-feedback-background-success-subtlest": "#F6FBF8", + "color-feedback-background-warning-bold": "#F5A200", + "color-feedback-background-warning-subtle": "#FFF7E5", + "color-feedback-background-warning-subtlest": "#FFFBF5", + "color-feedback-border-alert": "#CD2C23", + "color-feedback-border-discovery": "#602FA0", + "color-feedback-border-informative": "#006296", + "color-feedback-border-success": "#008533", + "color-feedback-border-warning": "#F5A200", + "color-feedback-content-alert": "#7B1A15", + "color-feedback-content-discovery": "#3A1C60", + "color-feedback-content-informative": "#003A5A", + "color-feedback-content-success": "#004F1E", + "color-feedback-content-warning": "#664400", + "color-link-content": "#006296", + "color-link-content-disabled": "#8FCEF0", + "color-link-content-hover": "#003A5A", + "color-link-content-visited": "#006296", + "color-menu-background": "#FFFFFF", + "color-menu-border": "#878F9A", + "color-menu-item-background": "transparent", + "color-menu-item-background-hover": "#DBDEE1", + "color-menu-item-content": "#1B1C1E", + "color-menu-item-content-disabled": "#B7BBC2", + "color-menu-item-content-hover": "#000000", + "color-menu-item-subcontent": "#60666E", + "text-action-md-font-family": ""Open Sans", sans-serif", + "text-action-md-font-size": "0.75rem", + "text-action-md-font-weight": "700", + "text-action-md-letter-spacing": "0.2px", + "text-action-md-line-height": "1.5rem", + "text-action-md-transform": "uppercase", + "text-action-sm-font-family": ""Open Sans", sans-serif", + "text-action-sm-font-size": "0.6875rem", + "text-action-sm-font-weight": "700", + "text-action-sm-letter-spacing": "0.2px", + "text-action-sm-line-height": "1.5rem", + "text-action-sm-transform": "uppercase", + "text-body-lg-font-family": ""Open Sans", sans-serif", + "text-body-lg-font-size": "1rem", + "text-body-lg-font-weight": "400", + "text-body-lg-letter-spacing": "0.2px", + "text-body-lg-line-height": "1.5rem", + "text-body-lg-transform": "none", + "text-body-md-font-family": ""Open Sans", sans-serif", + "text-body-md-font-size": "0.875rem", + "text-body-md-font-weight": "400", + "text-body-md-letter-spacing": "0.2px", + "text-body-md-line-height": "1.5rem", + "text-body-md-transform": "none", + "text-body-sm-font-family": ""Open Sans", sans-serif", + "text-body-sm-font-size": "0.75rem", + "text-body-sm-font-weight": "400", + "text-body-sm-letter-spacing": "0.2px", + "text-body-sm-line-height": "1.25rem", + "text-body-sm-transform": "none", + "text-caption-md-font-family": ""Open Sans", sans-serif", + "text-caption-md-font-size": "0.875rem", + "text-caption-md-font-weight": "400", + "text-caption-md-letter-spacing": "0.2px", + "text-caption-md-line-height": "1.5rem", + "text-caption-md-transform": "none", + "text-heading-lg-font-family": ""Open Sans", sans-serif", + "text-heading-lg-font-size": "1.5rem", + "text-heading-lg-font-weight": "600", + "text-heading-lg-letter-spacing": "0.2px", + "text-heading-lg-line-height": "2rem", + "text-heading-lg-transform": "none", + "text-heading-md-font-family": ""Open Sans", sans-serif", + "text-heading-md-font-size": "1.25rem", + "text-heading-md-font-weight": "600", + "text-heading-md-letter-spacing": "0.2px", + "text-heading-md-line-height": "1.75rem", + "text-heading-md-transform": "none", + "text-heading-sm-font-family": ""Open Sans", sans-serif", + "text-heading-sm-font-size": "1rem", + "text-heading-sm-font-weight": "600", + "text-heading-sm-letter-spacing": "0.2px", + "text-heading-sm-line-height": "1.5rem", + "text-heading-sm-transform": "none", + "text-heading-xl-font-family": ""Open Sans", sans-serif", + "text-heading-xl-font-size": "2rem", + "text-heading-xl-font-weight": "600", + "text-heading-xl-letter-spacing": "0.2px", + "text-heading-xl-line-height": "2.5rem", + "text-heading-xl-transform": "none", + "text-heading-xs-font-family": ""Open Sans", sans-serif", + "text-heading-xs-font-size": "0.875rem", + "text-heading-xs-font-weight": "600", + "text-heading-xs-letter-spacing": "0.2px", + "text-heading-xs-line-height": "1.25rem", + "text-heading-xs-transform": "none", + "text-highlight-lg-font-family": ""Open Sans", sans-serif", + "text-highlight-lg-font-size": "1.5rem", + "text-highlight-lg-font-weight": "600", + "text-highlight-lg-letter-spacing": "0.2px", + "text-highlight-lg-line-height": "2rem", + "text-highlight-lg-transform": "none", + "text-highlight-md-font-family": ""Open Sans", sans-serif", + "text-highlight-md-font-size": "1.25rem", + "text-highlight-md-font-weight": "600", + "text-highlight-md-letter-spacing": "0.2px", + "text-highlight-md-line-height": "1.75rem", + "text-highlight-md-transform": "none", + "text-highlight-sm-font-family": ""Open Sans", sans-serif", + "text-highlight-sm-font-size": "1rem", + "text-highlight-sm-font-weight": "600", + "text-highlight-sm-letter-spacing": "0.2px", + "text-highlight-sm-line-height": "1.5rem", + "text-highlight-sm-transform": "none", + "text-label-md-font-family": ""Open Sans", sans-serif", + "text-label-md-font-size": "0.875rem", + "text-label-md-font-weight": "400", + "text-label-md-letter-spacing": "0.2px", + "text-label-md-line-height": "1.5rem", + "text-label-md-transform": "none", + "text-label-sm-font-family": ""Open Sans", sans-serif", + "text-label-sm-font-size": "0.75rem", + "text-label-sm-font-weight": "400", + "text-label-sm-letter-spacing": "0.2px", + "text-label-sm-line-height": "1.25rem", + "text-label-sm-transform": "none", + "text-legend-sm-font-family": ""Open Sans", sans-serif", + "text-legend-sm-font-size": "0.75rem", + "text-legend-sm-font-weight": "400", + "text-legend-sm-letter-spacing": "0.2px", + "text-legend-sm-line-height": "1.25rem", + "text-legend-sm-transform": "none", + }, + "component": { + "accordion-header-background-color": "#FFFFFF", + "accordion-header-border-color": "#DBDEE1", + "accordion-header-disabled-background-color": "#F1F2F2", + "accordion-header-disabled-border-color": "#DBDEE1", + "accordion-header-disabled-icon-color": "#B7BBC2", + "accordion-header-disabled-text-color": "#B7BBC2", + "accordion-header-hover-background-color": "#DBDEE1", + "accordion-header-hover-border-color": "#000000", + "accordion-header-hover-text-color": "#000000", + "accordion-header-text-color": "#1B1C1E", + "accordion-panel-background-color": "#FAFAFA", + "accordion-panel-border-color": "#DBDEE1", + "accordion-panel-text-color": "#1B1C1E", + "avatar-background-color": "#F1F2F2", + "avatar-text-color": "#60666E", + "badge-background-color": "#CD2C23", + "badge-text-color": "#FFFFFF", + "bento-menu-separator-color": "#DBDEE1", + "breadcrumb-link-active-color": "#1B1C1E", + "breadcrumb-link-color": "#60666E", + "breadcrumb-link-disabled-color": "#B7BBC2", + "breadcrumb-link-hover-color": "#000000", + "breadcrumb-separator-color": "#60666E", + "button-destructive-primary-background-color": "#CD2C23", + "button-destructive-primary-border-color": "#CD2C23", + "button-destructive-primary-disabled-background-color": "#F99D99", + "button-destructive-primary-disabled-border-color": "#F99D99", + "button-destructive-primary-disabled-text-color": "#FFFFFF", + "button-destructive-primary-hover-background-color": "#7B1A15", + "button-destructive-primary-hover-border-color": "#7B1A15", + "button-destructive-primary-hover-text-color": "#FFFFFF", + "button-destructive-primary-inverted-background-color": "#FFFFFF", + "button-destructive-primary-inverted-border-color": "#FFFFFF", + "button-destructive-primary-inverted-disabled-background-color": "#FFFFFF", + "button-destructive-primary-inverted-disabled-border-color": "#FFFFFF", + "button-destructive-primary-inverted-disabled-text-color": "#F99D99", + "button-destructive-primary-inverted-hover-background-color": "#FFFFFF", + "button-destructive-primary-inverted-hover-border-color": "#FFFFFF", + "button-destructive-primary-inverted-hover-text-color": "#7B1A15", + "button-destructive-primary-inverted-text-color": "#CD2C23", + "button-destructive-primary-text-color": "#FFFFFF", + "button-destructive-secondary-background-color": "transparent", + "button-destructive-secondary-border-color": "#CD2C23", + "button-destructive-secondary-disabled-background-color": "transparent", + "button-destructive-secondary-disabled-border-color": "#F99D99", + "button-destructive-secondary-disabled-text-color": "#F99D99", + "button-destructive-secondary-hover-background-color": "transparent", + "button-destructive-secondary-hover-border-color": "#7B1A15", + "button-destructive-secondary-hover-text-color": "#7B1A15", + "button-destructive-secondary-inverted-background-color": "transparent", + "button-destructive-secondary-inverted-border-color": "#CD2C23", + "button-destructive-secondary-inverted-disabled-background-color": "transparent", + "button-destructive-secondary-inverted-disabled-border-color": "#F99D99", + "button-destructive-secondary-inverted-disabled-text-color": "#F99D99", + "button-destructive-secondary-inverted-hover-background-color": "transparent", + "button-destructive-secondary-inverted-hover-border-color": "#7B1A15", + "button-destructive-secondary-inverted-hover-text-color": "#7B1A15", + "button-destructive-secondary-inverted-text-color": "#CD2C23", + "button-destructive-secondary-text-color": "#CD2C23", + "button-destructive-tertiary-background-color": "transparent", + "button-destructive-tertiary-border-color": "transparent", + "button-destructive-tertiary-disabled-background-color": "transparent", + "button-destructive-tertiary-disabled-border-color": "transparent", + "button-destructive-tertiary-disabled-text-color": "#F99D99", + "button-destructive-tertiary-hover-background-color": "#FAEAE9", + "button-destructive-tertiary-hover-border-color": "transparent", + "button-destructive-tertiary-hover-text-color": "#7B1A15", + "button-destructive-tertiary-inverted-background-color": "transparent", + "button-destructive-tertiary-inverted-border-color": "transparent", + "button-destructive-tertiary-inverted-disabled-background-color": "transparent", + "button-destructive-tertiary-inverted-disabled-border-color": "transparent", + "button-destructive-tertiary-inverted-disabled-text-color": "#F99D99", + "button-destructive-tertiary-inverted-hover-background-color": "#FAEAE9", + "button-destructive-tertiary-inverted-hover-border-color": "transparent", + "button-destructive-tertiary-inverted-hover-text-color": "#7B1A15", + "button-destructive-tertiary-inverted-text-color": "#CD2C23", + "button-destructive-tertiary-text-color": "#CD2C23", + "button-input-background-color": "#FFFFFF", + "button-input-border-color": "#60666E", + "button-input-disabled-background-color": "#F1F2F2", + "button-input-disabled-border-color": "#B7BBC2", + "button-input-disabled-text-color": "#B7BBC2", + "button-input-hover-background-color": "#DBDEE1", + "button-input-hover-border-color": "#000000", + "button-input-hover-text-color": "#000000", + "button-input-text-color": "#60666E", + "button-primary-background-color": "#006296", + "button-primary-border-color": "#006296", + "button-primary-disabled-background-color": "#84C6EA", + "button-primary-disabled-border-color": "#84C6EA", + "button-primary-disabled-text-color": "#FFFFFF", + "button-primary-hover-background-color": "#003A5A", + "button-primary-hover-border-color": "#003A5A", + "button-primary-hover-text-color": "#FFFFFF", + "button-primary-inverted-background-color": "#FFFFFF", + "button-primary-inverted-border-color": "#FFFFFF", + "button-primary-inverted-disabled-background-color": "#006296", + "button-primary-inverted-disabled-border-color": "#006296", + "button-primary-inverted-disabled-text-color": "#84C6EA", + "button-primary-inverted-hover-background-color": "#84C6EA", + "button-primary-inverted-hover-border-color": "#84C6EA", + "button-primary-inverted-hover-text-color": "#003A5A", + "button-primary-inverted-text-color": "#006296", + "button-primary-text-color": "#FFFFFF", + "button-secondary-background-color": "transparent", + "button-secondary-border-color": "#006296", + "button-secondary-disabled-background-color": "transparent", + "button-secondary-disabled-border-color": "#84C6EA", + "button-secondary-disabled-text-color": "#84C6EA", + "button-secondary-hover-background-color": "transparent", + "button-secondary-hover-border-color": "#003A5A", + "button-secondary-hover-text-color": "#003A5A", + "button-secondary-inverted-background-color": "transparent", + "button-secondary-inverted-border-color": "#FFFFFF", + "button-secondary-inverted-disabled-background-color": "transparent", + "button-secondary-inverted-disabled-border-color": "#006296", + "button-secondary-inverted-disabled-text-color": "#006296", + "button-secondary-inverted-hover-background-color": "transparent", + "button-secondary-inverted-hover-border-color": "#84C6EA", + "button-secondary-inverted-hover-text-color": "#84C6EA", + "button-secondary-inverted-text-color": "#FFFFFF", + "button-secondary-text-color": "#006296", + "button-tertiary-background-color": "transparent", + "button-tertiary-border-color": "transparent", + "button-tertiary-disabled-background-color": "transparent", + "button-tertiary-disabled-border-color": "transparent", + "button-tertiary-disabled-text-color": "#B7BBC2", + "button-tertiary-hover-background-color": "rgb(0 0 0 / 0.15)", + "button-tertiary-hover-border-color": "transparent", + "button-tertiary-hover-text-color": "#000000", + "button-tertiary-inverted-background-color": "transparent", + "button-tertiary-inverted-border-color": "transparent", + "button-tertiary-inverted-disabled-background-color": "transparent", + "button-tertiary-inverted-disabled-border-color": "transparent", + "button-tertiary-inverted-disabled-text-color": "#006296", + "button-tertiary-inverted-hover-background-color": "rgb(0 0 0 / 0.5)", + "button-tertiary-inverted-hover-border-color": "transparent", + "button-tertiary-inverted-hover-text-color": "#FFFFFF", + "button-tertiary-inverted-text-color": "#FFFFFF", + "button-tertiary-text-color": "#60666E", + "card-background-color": "#FFFFFF", + "card-border-color": "#F1F2F2", + "card-box-shadow-color": "rgb(0 0 0 / 0.2)", + "card-link-border-color": "#878F9A", + "card-link-hover-background-color": "#DBDEE1", + "card-link-hover-border-color": "#000000", + "card-text-color": "#1B1C1E", + "carousel-dot-border-color": "transparent", + "carousel-dot-selected-background-color": "#006296", + "carousel-dot-unselected-background-color": "#DBDEE1", + "checkbox-checked-background-color": "#006296", + "checkbox-checked-border-color": "#006296", + "checkbox-checked-icon-color": "#FFFFFF", + "checkbox-disabled-background-color": "#F1F2F2", + "checkbox-disabled-border-color": "#B7BBC2", + "checkbox-error-border-color": "#CD2C23", + "checkbox-hover-background-color": "#DBDEE1", + "checkbox-hover-border-color": "#000000", + "checkbox-unchecked-background-color": "#FFFFFF", + "checkbox-unchecked-border-color": "#60666E", + "chooser-background-color": "#FFFFFF", + "chooser-border-color": "#60666E", + "chooser-disabled-background-color": "#F1F2F2", + "chooser-disabled-border-color": "#B7BBC2", + "chooser-disabled-text-color": "#B7BBC2", + "chooser-hover-background-color": "#DBDEE1", + "chooser-hover-border-color": "#000000", + "chooser-hover-text-color": "#000000", + "chooser-selected-background-color": "#E0F0F9", + "chooser-selected-border-color": "#006296", + "chooser-selected-text-color": "#003A5A", + "chooser-text-color": "#60666E", + "combobox-arrow-button-background-color": "transparent", + "combobox-arrow-button-disabled-icon-color": "#B7BBC2", + "combobox-arrow-button-hover-background-color": "transparent", + "combobox-arrow-button-icon-color": "#60666E", + "combobox-background-color": "#FFFFFF", + "combobox-border-color": "#60666E", + "combobox-clear-button-border-right-color": "#60666E", + "combobox-clear-button-disabled-icon-color": "#B7BBC2", + "combobox-clear-button-icon-color": "#60666E", + "combobox-disabled-background-color": "#F1F2F2", + "combobox-disabled-border-color": "#B7BBC2", + "combobox-disabled-text-color": "#B7BBC2", + "combobox-error-border-color": "#CD2C23", + "combobox-placeholder-text-color": "#60666E", + "datepicker-backdrop-color": "rgb(0 0 0 / 0.5)", + "datepicker-background-color": "#FFFFFF", + "datepicker-border-color": "#878F9A", + "datepicker-box-shadow-color": "rgb(0 0 0 / 0.2)", + "datepicker-day-background-color": "transparent", + "datepicker-day-border-color": "transparent", + "datepicker-day-disabled-text-color": "#B7BBC2", + "datepicker-day-hover-background-color": "#DBDEE1", + "datepicker-day-outside-month-text-color": "#60666E", + "datepicker-day-selected-background-color": "#E0F0F9", + "datepicker-day-selected-border-color": "#006296", + "datepicker-day-selected-outside-month-background-color": "#E0F0F9", + "datepicker-day-selected-outside-month-border-color": "#006296", + "datepicker-day-selected-outside-month-text-color": "#003A5A", + "datepicker-day-selected-text-color": "#003A5A", + "datepicker-day-text-color": "#1B1C1E", + "datepicker-day-today-text-color": "#003A5A", + "datepicker-header-background-color": "transparent", + "disclosure-background-color": "#FFFFFF", + "disclosure-border-color": "#878F9A", + "disclosure-box-shadow-color": "rgb(0 0 0 / 0.2)", + "disclosure-text-color": "#1B1C1E", + "dropdown-list-arrow-color": "#60666E", + "dropdown-list-arrow-disabled-color": "#B7BBC2", + "dropdown-list-input-background-color": "#FFFFFF", + "dropdown-list-input-border-color": "#60666E", + "dropdown-list-input-disabled-background-color": "#F1F2F2", + "dropdown-list-input-disabled-border-color": "#B7BBC2", + "dropdown-list-input-disabled-text-color": "#B7BBC2", + "dropdown-list-input-error-border-color": "#CD2C23", + "dropdown-list-input-icon-color": "#60666E", + "dropdown-menu-background-color": "#FFFFFF", + "dropdown-menu-border-color": "#878F9A", + "dropdown-menu-box-shadow-color": "rgb(0 0 0 / 0.2)", + "dropdown-menu-external-item-disabled-text-color": "#B7BBC2", + "dropdown-menu-external-item-hover-background-color": "#DBDEE1", + "dropdown-menu-external-item-text-color": "#1B1C1E", + "dropdown-menu-external-item-visited-icon-color": "#006296", + "dropdown-menu-external-item-visited-text-color": "#006296", + "dropdown-menu-group-border-color": "#DBDEE1", + "dropdown-menu-item-content-description-text-color": "#60666E", + "dropdown-menu-item-content-icon-background-color": "#F1F2F2", + "dropdown-menu-item-content-icon-border-color": "#DBDEE1", + "dropdown-menu-list-item-text-color": "#1B1C1E", + "dropdown-menu-nav-item-disabled-background-color": "transparent", + "dropdown-menu-nav-item-disabled-icon-color": "#B7BBC2", + "dropdown-menu-nav-item-disabled-text-color": "#B7BBC2", + "dropdown-menu-nav-item-external-link-icon-color": "#1B1C1E", + "dropdown-menu-nav-item-external-link-text-color": "#1B1C1E", + "dropdown-menu-nav-item-hover-background-color": "#DBDEE1", + "dropdown-menu-nav-item-text-color": "#1B1C1E", + "dropdown-menu-text-color": "#1B1C1E", + "external-link-visited-text-color": "#006296", + "field-error-text-color": "#CD2C23", + "field-hint-text-color": "#60666E", + "field-input-border-color": "#60666E", + "field-input-error-border-color": "#CD2C23", + "focus-inside-border-color": "#84C6EA", + "focus-inverted-inside-border-color": "#006296", + "focus-inverted-outside-border-color": "#84C6EA", + "focus-outside-border-color": "#006296", + "global-banner-alert-action-button-border-color": "#FFFFFF", + "global-banner-alert-action-button-hover-border-color": "rgb(255 255 255 / 0.5)", + "global-banner-alert-action-button-hover-text-color": "rgb(255 255 255 / 0.5)", + "global-banner-alert-action-button-text-color": "#FFFFFF", + "global-banner-alert-background-color": "#CD2C23", + "global-banner-alert-text-color": "#FFFFFF", + "global-banner-discovery-action-button-border-color": "#FFFFFF", + "global-banner-discovery-action-button-hover-border-color": "rgb(255 255 255 / 0.5)", + "global-banner-discovery-action-button-hover-text-color": "rgb(255 255 255 / 0.5)", + "global-banner-discovery-action-button-text-color": "#FFFFFF", + "global-banner-discovery-background-color": "#602FA0", + "global-banner-discovery-text-color": "#FFFFFF", + "global-banner-neutral-action-button-border-color": "#FFFFFF", + "global-banner-neutral-action-button-hover-border-color": "rgb(255 255 255 / 0.5)", + "global-banner-neutral-action-button-hover-text-color": "rgb(255 255 255 / 0.5)", + "global-banner-neutral-action-button-text-color": "#FFFFFF", + "global-banner-neutral-background-color": "#60666E", + "global-banner-neutral-text-color": "#FFFFFF", + "global-banner-warning-action-button-border-color": "#1B1C1E", + "global-banner-warning-action-button-hover-border-color": "rgb(0 0 0 / 0.6)", + "global-banner-warning-action-button-hover-text-color": "rgb(0 0 0 / 0.6)", + "global-banner-warning-action-button-text-color": "#1B1C1E", + "global-banner-warning-background-color": "#F5A200", + "global-banner-warning-text-color": "#1B1C1E", + "global-header-background-color": "#012639", + "global-header-content-text-color": "#FFFFFF", + "global-header-logo-content-text-color": "#FFFFFF", + "global-header-logo-title-separator-color": "#003A5A", + "global-navigation-background-color": "#FFFFFF", + "global-navigation-box-shadow-color": "rgb(0 0 0 / 0.2)", + "global-navigation-item-hover-background-color": "#DBDEE1", + "global-navigation-item-hover-text-color": "#000000", + "global-navigation-item-selected-background-color": "#E0F0F9", + "global-navigation-item-selected-text-color": "#003A5A", + "global-navigation-item-text-color": "#60666E", + "global-navigation-separator-border-color": "#DBDEE1", + "heading-subtitle-text-color": "#60666E", + "heading-text-color": "#1B1C1E", + "label-text-color": "#1B1C1E", + "legend-disabled-text-color": "#B7BBC2", + "legend-item-bullet-color": "#84C6EA", + "legend-item-description-text-color": "#60666E", + "legend-text-color": "#1B1C1E", + "link-disabled-icon-color": "#8FCEF0", + "link-disabled-text-color": "#8FCEF0", + "link-hover-icon-color": "#003A5A", + "link-hover-text-color": "#003A5A", + "link-icon-color": "#006296", + "link-text-color": "#006296", + "link-visited-icon-color": "#006296", + "link-visited-text-color": "#006296", + "listbox-background-color": "#FFFFFF", + "listbox-border-color": "#878F9A", + "listbox-box-shadow-depth-color": "rgb(0 0 0 / 0.2)", + "listbox-item-disabled-background-color": "transparent", + "listbox-item-disabled-text-color": "#B7BBC2", + "listbox-item-hover-background-color": "#DBDEE1", + "listbox-item-indicator-selected-color": "#006296", + "listbox-item-subcontent-disabled-text-color": "#B7BBC2", + "listbox-item-subcontent-text-color": "#60666E", + "listbox-item-text-color": "#1B1C1E", + "lozenge-alert-background-color": "#CD2C23", + "lozenge-alert-border-color": "#CD2C23", + "lozenge-alert-subtle-background-color": "#FAEAE9", + "lozenge-alert-subtle-border-color": "#FAEAE9", + "lozenge-alert-subtle-text-color": "#7B1A15", + "lozenge-alert-text-color": "#FFFFFF", + "lozenge-discovery-background-color": "#602FA0", + "lozenge-discovery-border-color": "#602FA0", + "lozenge-discovery-subtle-background-color": "#EFEAF5", + "lozenge-discovery-subtle-border-color": "#EFEAF5", + "lozenge-discovery-subtle-text-color": "#3A1C60", + "lozenge-discovery-text-color": "#FFFFFF", + "lozenge-info-background-color": "#006296", + "lozenge-info-border-color": "#006296", + "lozenge-info-subtle-background-color": "#E0F0F9", + "lozenge-info-subtle-border-color": "#E0F0F9", + "lozenge-info-subtle-text-color": "#003A5A", + "lozenge-info-text-color": "#FFFFFF", + "lozenge-neutral-background-color": "#60666E", + "lozenge-neutral-border-color": "#60666E", + "lozenge-neutral-subtle-background-color": "#F1F2F2", + "lozenge-neutral-subtle-border-color": "#F1F2F2", + "lozenge-neutral-subtle-text-color": "#60666E", + "lozenge-neutral-text-color": "#FFFFFF", + "lozenge-success-background-color": "#008533", + "lozenge-success-border-color": "#008533", + "lozenge-success-subtle-background-color": "#E1F7EA", + "lozenge-success-subtle-border-color": "#E1F7EA", + "lozenge-success-subtle-text-color": "#004F1E", + "lozenge-success-text-color": "#FFFFFF", + "lozenge-warning-background-color": "#F5A200", + "lozenge-warning-border-color": "#F5A200", + "lozenge-warning-subtle-background-color": "#FFF7E5", + "lozenge-warning-subtle-border-color": "#FFF7E5", + "lozenge-warning-subtle-text-color": "#664400", + "lozenge-warning-text-color": "#1B1C1E", + "menu-background-color": "#FFFFFF", + "menu-border-color": "#878F9A", + "menu-box-shadow-color": "rgb(0 0 0 / 0.2)", + "menu-group-text-color": "#60666E", + "menu-item-disabled-text-color": "#B7BBC2", + "menu-item-hover-background-color": "#DBDEE1", + "menu-item-hover-icon-color": "#000000", + "menu-item-hover-text-color": "#000000", + "menu-item-icon-color": "#1B1C1E", + "menu-item-text-color": "#1B1C1E", + "menu-submenu-background-color": "#FFFFFF", + "menu-submenu-border-color": "#878F9A", + "menu-submenu-box-shadow-color": "rgb(0 0 0 / 0.2)", + "modal-backdrop-background-color": "rgb(0 0 0 / 0.75)", + "modal-background-color": "#FFFFFF", + "modal-border-color": "#878F9A", + "modal-dialog-alert-icon-color": "#7B1A15", + "nav-list-background-color": "#FFFFFF", + "nav-list-border-color": "#878F9A", + "nav-list-box-shadow-color": "rgb(0 0 0 / 0.2)", + "nav-list-item-disabled-text-color": "#B7BBC2", + "nav-list-item-hover-background-color": "#DBDEE1", + "nav-list-item-icon-color": "#1B1C1E", + "nav-list-item-icon-hover-color": "#000000", + "nav-list-item-text-color": "#1B1C1E", + "nav-list-item-text-hover-color": "#000000", + "numeric-input-background-color": "#FFFFFF", + "numeric-input-border-color": "#60666E", + "numeric-input-disabled-adornment-text-color": "#B7BBC2", + "numeric-input-disabled-background-color": "#F1F2F2", + "numeric-input-disabled-border-color": "#B7BBC2", + "numeric-input-error-border-color": "#CD2C23", + "pagination-page-background-color": "transparent", + "pagination-page-hover-background-color": "#DBDEE1", + "pagination-page-selected-background-color": "#E0F0F9", + "pagination-page-selected-border-color": "#006296", + "pagination-page-selected-hover-background-color": "#E0F0F9", + "pagination-page-selected-text-color": "#003A5A", + "pagination-page-text-color": "#60666E", + "password-rule-empty-text-color": "#60666E", + "password-rule-error-text-color": "#CD2C23", + "password-rule-success-text-color": "#008533", + "password-strength-label-text-color": "#60666E", + "password-strength-meter-empty-color": "#DBDEE1", + "password-strength-meter-fair-color": "#F5A200", + "password-strength-meter-good-color": "#008533", + "password-strength-meter-strong-color": "#004F1E", + "password-strength-meter-weak-color": "#CD2C23", + "phone-input-background-color": "transparent", + "phone-input-mask-text-color": "#60666E", + "progress-circle-empty-track-color": "#DBDEE1", + "progress-circle-label-text-color": "#1B1C1E", + "progress-circle-result-text-color": "#1B1C1E", + "progress-circular-color": "#006296", + "progress-circular-inverted-color": "#FFFFFF", + "progress-indicator-empty-track-color": "#DBDEE1", + "progress-indicator-label-text-color": "#1B1C1E", + "progress-tracker-bridge-empty-background-color": "#DBDEE1", + "progress-tracker-bridge-filled-background-color": "#006296", + "progress-tracker-notification-badge-color": "#FFFFFF", + "progress-tracker-notification-badge-fill-color": "#CD2C23", + "progress-tracker-step-completed-background-color": "#006296", + "progress-tracker-step-completed-border-color": "#006296", + "progress-tracker-step-completed-label-text-color": "#006296", + "progress-tracker-step-completed-text-color": "#FFFFFF", + "progress-tracker-step-current-border-color": "#006296", + "progress-tracker-step-current-label-text-color": "#003A5A", + "progress-tracker-step-current-text-color": "#003A5A", + "progress-tracker-step-todo-background-color": "#FFFFFF", + "progress-tracker-step-todo-text-color": "#1B1C1E", + "progress-tracker-step-uncompleted-border-color": "#B7BBC2", + "progress-tracker-step-uncompleted-label-text-color": "#60666E", + "progress-tracker-step-uncompleted-text-color": "#1B1C1E", + "radio-button-background-color": "#FFFFFF", + "radio-button-border-color": "#60666E", + "radio-button-checked-background-color": "#006296", + "radio-button-checked-border-color": "#006296", + "radio-button-checked-dot-color": "#006296", + "radio-button-disabled-background-color": "#F1F2F2", + "radio-button-disabled-border-color": "#B7BBC2", + "radio-button-disabled-checked-dot-color": "#B7BBC2", + "radio-button-disabled-hover-border-color": "#B7BBC2", + "radio-button-disabled-label-color": "#B7BBC2", + "radio-button-group-legend-text-color": "#1B1C1E", + "radio-button-hover-border-color": "#000000", + "radio-card-background-color": "#FFFFFF", + "radio-card-border-color": "#60666E", + "radio-card-disabled-background-color": "#F1F2F2", + "radio-card-disabled-border-color": "#B7BBC2", + "radio-card-disabled-text-color": "#B7BBC2", + "radio-card-hover-background-color": "#DBDEE1", + "radio-card-hover-border-color": "#000000", + "radio-card-hover-text-color": "#000000", + "radio-card-selected-background-color": "#E0F0F9", + "radio-card-selected-border-color": "#006296", + "radio-card-text-color": "#1B1C1E", + "route-link-disabled-text-color": "#8FCEF0", + "route-link-hover-text-color": "#003A5A", + "route-link-text-color": "#006296", + "route-link-visited-text-color": "#006296", + "search-input-disabled-icon-color": "#B7BBC2", + "search-input-icon-color": "#60666E", + "search-input-label-text-color": "#60666E", + "search-input-reset-button-background-color": "transparent", + "search-input-reset-button-border-color": "transparent", + "sectional-banner-alert-background-color": "#FDF7F6", + "sectional-banner-alert-border-color": "#CD2C23", + "sectional-banner-alert-icon-color": "#7B1A15", + "sectional-banner-discovery-background-color": "#F9F7FB", + "sectional-banner-discovery-border-color": "#602FA0", + "sectional-banner-discovery-icon-color": "#3A1C60", + "sectional-banner-info-background-color": "#F3F9FD", + "sectional-banner-info-border-color": "#006296", + "sectional-banner-info-icon-color": "#003A5A", + "sectional-banner-neutral-background-color": "#FAFAFA", + "sectional-banner-neutral-border-color": "#878F9A", + "sectional-banner-neutral-icon-color": "#60666E", + "sectional-banner-success-background-color": "#F6FBF8", + "sectional-banner-success-border-color": "#008533", + "sectional-banner-success-icon-color": "#004F1E", + "sectional-banner-warning-background-color": "#FFFBF5", + "sectional-banner-warning-border-color": "#F5A200", + "sectional-banner-warning-icon-color": "#664400", + "segmented-control-background-color": "transparent", + "segmented-control-border-color": "transparent", + "segmented-control-disabled-background-color": "#F1F2F2", + "segmented-control-disabled-border-color": "#B7BBC2", + "segmented-control-disabled-text-color": "#B7BBC2", + "segmented-control-hover-background-color": "rgb(0 0 0 / 0.05)", + "segmented-control-hover-border-color": "#000000", + "segmented-control-hover-text-color": "#000000", + "segmented-control-list-background-color": "rgb(0 0 0 / 0.05)", + "segmented-control-pressed-background-color": "#E0F0F9", + "segmented-control-pressed-border-color": "#006296", + "segmented-control-pressed-hover-background-color": "#C2E2F4", + "segmented-control-pressed-hover-text-color": "#003A5A", + "segmented-control-pressed-text-color": "#003A5A", + "segmented-control-text-color": "#60666E", + "side-drawer-background-color": "#FFFFFF", + "side-drawer-box-shadow-color": "rgb(0 0 0 / 0.2)", + "skip-link-background-color": "#FFFFFF", + "skip-link-text-color": "#006296", + "slider-thumb-background-color": "#FFFFFF", + "slider-thumb-border-color": "#006296", + "slider-thumb-disabled-border-color": "#B7BBC2", + "slider-track-empty-background-color": "#DBDEE1", + "slider-track-empty-disabled-background-color": "#F1F2F2", + "slider-track-empty-label-text-color": "#60666E", + "slider-track-empty-mark-background-color": "#60666E", + "slider-track-empty-mark-disabled-background-color": "#B7BBC2", + "slider-track-filled-background-color": "#006296", + "slider-track-filled-disabled-background-color": "#B7BBC2", + "slider-track-filled-mark-background-color": "#FFFFFF", + "slider-track-filled-mark-disabled-background-color": "#FFFFFF", + "spinner-fill-color": "#006296", + "status-circle-blocked-background-color": "#CD2C23", + "status-circle-disabled-background-color": "#F1F2F2", + "status-circle-disabled-border-color": "#DBDEE1", + "status-circle-enabled-background-color": "#008533", + "status-disabled-text-color": "#B7BBC2", + "stepper-button-background-color": "#FFFFFF", + "stepper-button-border-color": "#60666E", + "stepper-button-disabled-background-color": "#F1F2F2", + "stepper-button-disabled-border-color": "#B7BBC2", + "stepper-button-disabled-text-color": "#B7BBC2", + "stepper-button-hover-background-color": "#DBDEE1", + "stepper-button-text-color": "#60666E", + "tab-border-bottom-color": "#DBDEE1", + "tab-button-active-text-color": "#1B1C1E", + "tab-button-hover-text-color": "#000000", + "tab-button-icon-color": "#60666E", + "tab-button-indicator-active-background-color": "#012639", + "tab-button-indicator-hover-background-color": "#DBDEE1", + "tab-button-indicator-selected-background-color": "#006296", + "tab-button-selected-text-color": "#1B1C1E", + "tab-button-text-color": "#60666E", + "tab-global-button-background-color": "transparent", + "tab-global-button-selected-background-color": "transparent", + "tab-global-list-background-color": "#FFFFFF", + "tab-scroll-button-hover-background-color": "#DBDEE1", + "tab-section-background-color": "#FFFFFF", + "tab-section-border-color": "#DBDEE1", + "tab-section-box-shadow-color": "rgb(0 0 0 / 0.2)", + "tab-section-button-background-color": "#FFFFFF", + "tab-section-button-selected-background-color": "#FFFFFF", + "tab-section-list-background-color": "#F1F2F2", + "table-background-color": "transparent", + "table-body-background-color": "transparent", + "table-cell-hover-background-color": "#DBDEE1", + "table-cell-number-text-color": "#60666E", + "table-footer-background-color": "#FFFFFF", + "table-footer-border-color": "#DBDEE1", + "table-group-border-color": "#DBDEE1", + "table-header-background-color": "#FFFFFF", + "table-header-border-color": "#DBDEE1", + "table-row-border-color": "#DBDEE1", + "table-row-error-background-color": "#FDF7F6", + "table-row-odd-background-color": "#FAFAFA", + "table-row-selected-background-color": "#E0F0F9", + "table-sort-button-ascending-icon-color": "#60666E", + "table-sort-button-default-icon-color": "#60666E", + "table-sort-button-descending-icon-color": "#60666E", + "table-text-color": "#1B1C1E", + "tag-background-color": "#F1F2F2", + "tag-border-color": "#878F9A", + "tag-decorative-01-background-color": "#EBE6EB", + "tag-decorative-01-border-color": "#38023B", + "tag-decorative-01-icon-color": "#220123", + "tag-decorative-01-text-color": "#220123", + "tag-decorative-02-background-color": "#FAF3E7", + "tag-decorative-02-border-color": "#CE840C", + "tag-decorative-02-icon-color": "#7D520B", + "tag-decorative-02-text-color": "#7D520B", + "tag-decorative-03-background-color": "#E7F0F1", + "tag-decorative-03-border-color": "#126773", + "tag-decorative-03-icon-color": "#0B3E45", + "tag-decorative-03-text-color": "#0B3E45", + "tag-decorative-04-background-color": "#F3E6E6", + "tag-decorative-04-border-color": "#960000", + "tag-decorative-04-icon-color": "#530000", + "tag-decorative-04-text-color": "#530000", + "tag-decorative-05-background-color": "#F2F5E8", + "tag-decorative-05-border-color": "#7B9C1D", + "tag-decorative-05-icon-color": "#4A5E11", + "tag-decorative-05-text-color": "#4A5E11", + "tag-decorative-06-background-color": "#FAEDE6", + "tag-decorative-06-border-color": "#CD4B00", + "tag-decorative-06-icon-color": "#7B2D00", + "tag-decorative-06-text-color": "#7B2D00", + "tag-decorative-07-background-color": "#E7EDF5", + "tag-decorative-07-border-color": "#104697", + "tag-decorative-07-icon-color": "#0A2A5B", + "tag-decorative-07-text-color": "#0A2A5B", + "tag-decorative-08-background-color": "#E6EDEB", + "tag-decorative-08-border-color": "#064633", + "tag-decorative-08-icon-color": "#042A1F", + "tag-decorative-08-text-color": "#042A1F", + "tag-decorative-09-background-color": "#F2E9EF", + "tag-decorative-09-border-color": "#7E235A", + "tag-decorative-09-icon-color": "#4C1536", + "tag-decorative-09-text-color": "#4C1536", + "tag-decorative-10-background-color": "#F1F0F7", + "tag-decorative-10-border-color": "#766DAB", + "tag-decorative-10-icon-color": "#444167", + "tag-decorative-10-text-color": "#444167", + "tag-hover-background-color": "#DBDEE1", + "tag-hover-border-color": "#000000", + "tag-hover-icon-color": "#000000", + "tag-hover-text-color": "#000000", + "tag-icon-color": "#1B1C1E", + "tag-selected-background-color": "#E0F0F9", + "tag-selected-border-color": "#006296", + "tag-selected-icon-color": "#003A5A", + "tag-selected-text-color": "#003A5A", + "tag-text-color": "#1B1C1E", + "text-area-counter-error-text-color": "#CD2C23", + "text-area-counter-text-color": "#60666E", + "text-input-adornment-color": "#60666E", + "text-input-background-color": "#FFFFFF", + "text-input-border-color": "#60666E", + "text-input-disabled-adornment-text-color": "#B7BBC2", + "text-input-disabled-background-color": "#F1F2F2", + "text-input-disabled-border-color": "#B7BBC2", + "text-input-disabled-text-color": "#B7BBC2", + "text-input-error-border-color": "#CD2C23", + "text-input-placeholder-disabled-text-color": "#B7BBC2", + "text-input-placeholder-text-color": "#60666E", + "text-input-text-color": "#1B1C1E", + "toast-alert-background-color": "#CD2C23", + "toast-alert-icon-color": "#FFFFFF", + "toast-alert-text-color": "#FFFFFF", + "toast-discovery-background-color": "#602FA0", + "toast-discovery-icon-color": "#FFFFFF", + "toast-discovery-text-color": "#FFFFFF", + "toast-neutral-background-color": "#60666E", + "toast-neutral-icon-color": "#FFFFFF", + "toast-neutral-text-color": "#FFFFFF", + "toast-success-background-color": "#008533", + "toast-success-icon-color": "#FFFFFF", + "toast-success-text-color": "#FFFFFF", + "toast-warning-background-color": "#F5A200", + "toast-warning-icon-color": "#1B1C1E", + "toast-warning-text-color": "#1B1C1E", + "toggle-switch-background-color": "#60666E", + "toggle-switch-border-color": "#60666E", + "toggle-switch-disabled-background-color": "#B7BBC2", + "toggle-switch-disabled-border-color": "#B7BBC2", + "toggle-switch-disabled-toggled-background-color": "#8ADDA9", + "toggle-switch-disabled-toggled-border-color": "#8ADDA9", + "toggle-switch-knob-background-color": "#FFFFFF", + "toggle-switch-label-text-color": "#1B1C1E", + "toggle-switch-toggled-background-color": "#008533", + "toggle-switch-toggled-border-color": "#008533", + "toggletip-popper-container-background-color": "#FFFFFF", + "toggletip-popper-container-border-color": "#878F9A", + "toggletip-popper-container-text-color": "#1B1C1E", + "tooltip-icon-color": "#1B1C1E", + "tooltip-inverted-icon-color": "#FFFFFF", + "tooltip-popper-container-border-color": "#FFFFFF", + "tooltip-popper-container-default-background-color": "#60666E", + "tooltip-popper-container-success-background-color": "#008533", + "tooltip-popper-container-text-color": "#FFFFFF", + }, + "ref": { + "color-accent-05": "#FFECEB", + "color-accent-10": "#FFD9D7", + "color-accent-20": "#FFB3AF", + "color-accent-30": "#FF8D88", + "color-accent-40": "#FF6760", + "color-accent-50": "#FF4138", + "color-accent-60": "#CC342D", + "color-accent-70": "#992722", + "color-accent-80": "#661A16", + "color-accent-90": "#330D0B", + "color-alert-02": "#FDF7F6", + "color-alert-05": "#FAEAE9", + "color-alert-10": "#FCCDCC", + "color-alert-20": "#F99D99", + "color-alert-30": "#F76C65", + "color-alert-40": "#F43C32", + "color-alert-50": "#CD2C23", + "color-alert-60": "#A4231C", + "color-alert-70": "#7B1A15", + "color-alert-80": "#52110E", + "color-alert-90": "#290807", + "color-black": "#000000", + "color-brand-05": "#E0F0F9", + "color-brand-10": "#C2E2F4", + "color-brand-20": "#84C6EA", + "color-brand-30": "#3F9DD1", + "color-brand-40": "#1582BD", + "color-brand-50": "#006296", + "color-brand-60": "#004E78", + "color-brand-70": "#003A5A", + "color-brand-80": "#012639", + "color-brand-90": "#00131E", + "color-decorative-01-05": "#EBE6EB", + "color-decorative-01-10": "#D7CCD8", + "color-decorative-01-50": "#38023B", + "color-decorative-01-70": "#220123", + "color-decorative-02-05": "#FAF3E7", + "color-decorative-02-10": "#F6E7D0", + "color-decorative-02-50": "#CE840C", + "color-decorative-02-70": "#7D520B", + "color-decorative-03-05": "#E7F0F1", + "color-decorative-03-10": "#D0E1E3", + "color-decorative-03-50": "#126773", + "color-decorative-03-70": "#0B3E45", + "color-decorative-04-05": "#F3E6E6", + "color-decorative-04-10": "#E8CCCC", + "color-decorative-04-50": "#960000", + "color-decorative-04-70": "#530000", + "color-decorative-05-05": "#F2F5E8", + "color-decorative-05-10": "#E5EBD2", + "color-decorative-05-50": "#7B9C1D", + "color-decorative-05-70": "#4A5E11", + "color-decorative-06-05": "#FAEDE6", + "color-decorative-06-10": "#F5DBCC", + "color-decorative-06-50": "#CD4B00", + "color-decorative-06-70": "#7B2D00", + "color-decorative-07-05": "#E7EDF5", + "color-decorative-07-10": "#CFDAEA", + "color-decorative-07-50": "#104697", + "color-decorative-07-70": "#0A2A5B", + "color-decorative-08-05": "#E6EDEB", + "color-decorative-08-10": "#CDDAD6", + "color-decorative-08-50": "#064633", + "color-decorative-08-70": "#042A1F", + "color-decorative-09-05": "#F2E9EF", + "color-decorative-09-10": "#E5D3DE", + "color-decorative-09-50": "#7E235A", + "color-decorative-09-70": "#4C1536", + "color-decorative-10-05": "#F1F0F7", + "color-decorative-10-10": "#E3E2EE", + "color-decorative-10-50": "#766DAB", + "color-decorative-10-70": "#444167", + "color-discovery-02": "#F9F7FB", + "color-discovery-05": "#EFEAF5", + "color-discovery-10": "#DFD5EC", + "color-discovery-20": "#CFC1E3", + "color-discovery-30": "#B097D0", + "color-discovery-40": "#8059B3", + "color-discovery-50": "#602FA0", + "color-discovery-60": "#4D2680", + "color-discovery-70": "#3A1C60", + "color-discovery-80": "#261340", + "color-discovery-90": "#130920", + "color-informative-02": "#F3F9FD", + "color-informative-05": "#E0F0F9", + "color-informative-10": "#C2E2F4", + "color-informative-20": "#8FCEF0", + "color-informative-30": "#4EADE1", + "color-informative-40": "#2286BC", + "color-informative-50": "#006296", + "color-informative-60": "#004E78", + "color-informative-70": "#003A5A", + "color-informative-80": "#012639", + "color-informative-90": "#00131E", + "color-neutral-02": "#FAFAFA", + "color-neutral-05": "#F1F2F2", + "color-neutral-10": "#E7E8EA", + "color-neutral-15": "#DBDEE1", + "color-neutral-20": "#CFD2D6", + "color-neutral-30": "#B7BBC2", + "color-neutral-40": "#9FA5AE", + "color-neutral-50": "#878F9A", + "color-neutral-60": "#6C727B", + "color-neutral-65": "#60666E", + "color-neutral-70": "#51555C", + "color-neutral-80": "#36393D", + "color-neutral-90": "#1B1C1E", + "color-success-02": "#F6FBF8", + "color-success-05": "#E1F7EA", + "color-success-10": "#C4EED5", + "color-success-20": "#8ADDA9", + "color-success-30": "#50CB7F", + "color-success-40": "#1AB655", + "color-success-50": "#008533", + "color-success-60": "#00661E", + "color-success-70": "#004F1E", + "color-success-80": "#003514", + "color-success-90": "#001A0A", + "color-warning-02": "#FFFBF5", + "color-warning-05": "#FFF7E5", + "color-warning-10": "#FFEECC", + "color-warning-20": "#FFDD99", + "color-warning-30": "#FFCB66", + "color-warning-40": "#FFBA33", + "color-warning-50": "#F5A200", + "color-warning-60": "#C78500", + "color-warning-70": "#9E6900", + "color-warning-80": "#664400", + "color-warning-90": "#332200", + "color-white": "#FFFFFF", + "font-family-brand": ""Open Sans", sans-serif", + "font-family-sans": ""Open Sans", sans-serif", + "font-size-100": "0.25rem", + "font-size-1000": "2.5rem", + "font-size-1100": "2.75rem", + "font-size-1200": "3rem", + "font-size-200": "0.5rem", + "font-size-275": "0.6875rem", + "font-size-300": "0.75rem", + "font-size-350": "0.875rem", + "font-size-400": "1rem", + "font-size-500": "1.25rem", + "font-size-600": "1.5rem", + "font-size-700": "1.75rem", + "font-size-800": "2rem", + "font-size-900": "2.25rem", + "font-transform-none": "none", + "font-transform-uppercase": "uppercase", + "font-weight-bold": "700", + "font-weight-regular": "400", + "font-weight-semibold": "600", + "letter-spacing-dense": "-0.2px", + "letter-spacing-narrow": "normal", + "letter-spacing-normal": "0.2px", + "line-height-100": "0.25rem", + "line-height-1000": "2.5rem", + "line-height-1100": "2.75rem", + "line-height-1200": "3rem", + "line-height-200": "0.5rem", + "line-height-300": "0.75rem", + "line-height-400": "1rem", + "line-height-500": "1.25rem", + "line-height-600": "1.5rem", + "line-height-700": "1.75rem", + "line-height-800": "2rem", + "line-height-900": "2.25rem", + "transparent-100": "transparent", + "transparent-dark-10": "rgb(0 0 0 / 0.1)", + "transparent-dark-15": "rgb(0 0 0 / 0.15)", + "transparent-dark-20": "rgb(0 0 0 / 0.2)", + "transparent-dark-25": "rgb(0 0 0 / 0.25)", + "transparent-dark-30": "rgb(0 0 0 / 0.3)", + "transparent-dark-35": "rgb(0 0 0 / 0.35)", + "transparent-dark-40": "rgb(0 0 0 / 0.4)", + "transparent-dark-45": "rgb(0 0 0 / 0.45)", + "transparent-dark-5": "rgb(0 0 0 / 0.05)", + "transparent-dark-50": "rgb(0 0 0 / 0.5)", + "transparent-dark-55": "rgb(0 0 0 / 0.55)", + "transparent-dark-60": "rgb(0 0 0 / 0.6)", + "transparent-dark-65": "rgb(0 0 0 / 0.65)", + "transparent-dark-70": "rgb(0 0 0 / 0.7)", + "transparent-dark-75": "rgb(0 0 0 / 0.75)", + "transparent-dark-80": "rgb(0 0 0 / 0.8)", + "transparent-dark-85": "rgb(0 0 0 / 0.85)", + "transparent-dark-90": "rgb(0 0 0 / 0.9)", + "transparent-dark-95": "rgb(0 0 0 / 0.95)", + "transparent-light-10": "rgb(255 255 255 / 0.1)", + "transparent-light-15": "rgb(255 255 255 / 0.15)", + "transparent-light-20": "rgb(255 255 255 / 0.2)", + "transparent-light-25": "rgb(255 255 255 / 0.25)", + "transparent-light-30": "rgb(255 255 255 / 0.3)", + "transparent-light-35": "rgb(255 255 255 / 0.35)", + "transparent-light-40": "rgb(255 255 255 / 0.4)", + "transparent-light-45": "rgb(255 255 255 / 0.45)", + "transparent-light-5": "rgb(255 255 255 / 0.05)", + "transparent-light-50": "rgb(255 255 255 / 0.5)", + "transparent-light-55": "rgb(255 255 255 / 0.55)", + "transparent-light-60": "rgb(255 255 255 / 0.6)", + "transparent-light-65": "rgb(255 255 255 / 0.65)", + "transparent-light-70": "rgb(255 255 255 / 0.7)", + "transparent-light-75": "rgb(255 255 255 / 0.75)", + "transparent-light-80": "rgb(255 255 255 / 0.8)", + "transparent-light-85": "rgb(255 255 255 / 0.85)", + "transparent-light-90": "rgb(255 255 255 / 0.9)", + "transparent-light-95": "rgb(255 255 255 / 0.95)", + }, +} +`; From b002d12babd265c6be77b3e46e3222b8ae0a65b9 Mon Sep 17 00:00:00 2001 From: Pierre-Yves Lafleur Date: Thu, 5 Dec 2024 09:30:17 -0500 Subject: [PATCH 2/7] feat(Theme): handle contextual tokens --- .../react/src/components/design-system.tsx | 6 +- .../device-context-provider.tsx | 89 +++---- .../internationalization-provider.tsx | 3 - .../table/sort-button-icon.test.tsx | 4 +- .../theme-wrapper/theme-wrapper.test.tsx | 8 +- .../theme-wrapper/theme-wrapper.tsx | 57 +++-- packages/react/src/index.ts | 9 +- packages/react/src/test-utils/renderer.tsx | 4 +- .../react/src/test-utils/testing-library.tsx | 8 +- packages/react/src/theme.ts | 9 +- packages/react/src/themes/build-theme.test.ts | 155 +++++++----- .../react/src/themes/build-theme.test.ts.snap | 220 ------------------ packages/react/src/themes/build-theme.ts | 168 +++++++++---- packages/react/src/themes/equisoft.test.ts | 3 +- .../react/src/themes/equisoft.test.ts.snap | 206 ++++++++-------- packages/react/src/themes/equisoft.ts | 10 +- packages/react/src/themes/index.ts | 2 +- packages/react/src/themes/tokens/tokens.ts | 10 +- packages/storybook/.storybook/themes.ts | 31 +++ .../stories/1-getting-started.stories.tsx | 28 ++- .../utils/device-context-decorator.tsx | 8 +- .../stories/utils/shadow-dom-decorator.tsx | 6 +- 22 files changed, 508 insertions(+), 536 deletions(-) delete mode 100644 packages/react/src/themes/build-theme.test.ts.snap create mode 100644 packages/storybook/.storybook/themes.ts diff --git a/packages/react/src/components/design-system.tsx b/packages/react/src/components/design-system.tsx index 5b3626c828..28697128d9 100644 --- a/packages/react/src/components/design-system.tsx +++ b/packages/react/src/components/design-system.tsx @@ -8,7 +8,11 @@ export type DesignSystemProps = ThemeWrapperProps & DeviceContextProviderProps & export const DesignSystem: FunctionComponent> = (props) => ( - + {props.children} diff --git a/packages/react/src/components/device-context-provider/device-context-provider.tsx b/packages/react/src/components/device-context-provider/device-context-provider.tsx index 8eb340456f..6e11de30f7 100644 --- a/packages/react/src/components/device-context-provider/device-context-provider.tsx +++ b/packages/react/src/components/device-context-provider/device-context-provider.tsx @@ -1,4 +1,12 @@ -import { createContext, FunctionComponent, PropsWithChildren, useContext, useEffect, useState } from 'react'; +import { + createContext, + FunctionComponent, + PropsWithChildren, + useCallback, + useContext, + useEffect, + useState, +} from 'react'; import { breakpoints, Breakpoints } from '../../legacy-constants/breakpoints'; export type DeviceType = 'desktop' | 'tablet' | 'mobile'; @@ -15,40 +23,32 @@ export interface DeviceContextProps { breakpoints: Breakpoints; } -const getDeviceContext = (deviceName: DeviceType | undefined = undefined): DeviceContextProps => { +function getDeviceContext(deviceName: DeviceType): DeviceContextProps { let isDesktop = false; let isTablet = false; let isMobile = false; - const defaultContext: DeviceContextProps = { - device: 'desktop', - isDesktop: true, - isTablet: false, - isMobile: false, - breakpoints, - }; - - if (deviceName) { - if (deviceName === 'desktop') { - isDesktop = true; - } else if (deviceName === 'tablet') { - isTablet = true; - } else if (deviceName === 'mobile') { - isMobile = true; - } - return { - device: deviceName, - isDesktop, - isTablet, - isMobile, - breakpoints, - }; + if (deviceName === 'desktop') { + isDesktop = true; + } else if (deviceName === 'tablet') { + isTablet = true; + } else if (deviceName === 'mobile') { + isMobile = true; } - return defaultContext; -}; -const getDevice = (screenWidth: number): DeviceType => { + return { + device: deviceName, + isDesktop, + isTablet, + isMobile, + breakpoints, + }; +} + +function getDeviceType(): DeviceType { let currentDevice: DeviceType = 'desktop'; + const screenWidth = (window.innerWidth || document.documentElement.clientWidth); + if (screenWidth >= breakpoints.desktop) { currentDevice = 'desktop'; } else if (screenWidth < breakpoints.desktop && screenWidth > breakpoints.mobile) { @@ -58,39 +58,46 @@ const getDevice = (screenWidth: number): DeviceType => { } return currentDevice; -}; +} -const DeviceContext = createContext(getDeviceContext()); +const DeviceContext = createContext(getDeviceContext(getDeviceType())); -/** - * @deprecated Use {@link DesignSystem} instead - */ export const DeviceContextProvider: FunctionComponent> = ({ children, staticDevice, }) => { - const [device, setDevice] = useState(getDeviceContext(staticDevice)); + const deviceType = staticDevice || getDeviceType(); - function handleScreenResize(): void { - const screenWidth = (window.innerWidth || document.documentElement.clientWidth); - const currentDevice = getDevice(screenWidth); + const [previousDeviceType, setPreviousDeviceType] = useState(deviceType); + const [previousStaticDevice, setPreviousStaticDevice] = useState(staticDevice); + const [deviceContext, setDeviceContext] = useState(getDeviceContext(deviceType)); - setDevice(getDeviceContext(currentDevice)); + if (staticDevice !== previousStaticDevice) { + setPreviousStaticDevice(staticDevice); + setDeviceContext(getDeviceContext(deviceType)); } + const handleScreenResize = useCallback(() => { + const currentDeviceType = getDeviceType(); + + if (currentDeviceType !== previousDeviceType) { + setPreviousDeviceType(currentDeviceType); + setDeviceContext(getDeviceContext(currentDeviceType)); + } + }, [previousDeviceType]); + useEffect(() => { if (!staticDevice) { - handleScreenResize(); window.addEventListener('resize', handleScreenResize); return () => { window.removeEventListener('resize', handleScreenResize); }; } return undefined; - }, [staticDevice]); + }, [handleScreenResize, staticDevice]); return ( - + {children} ); diff --git a/packages/react/src/components/internationalization-provider/internationalization-provider.tsx b/packages/react/src/components/internationalization-provider/internationalization-provider.tsx index ec94aedd8f..7e28a60274 100644 --- a/packages/react/src/components/internationalization-provider/internationalization-provider.tsx +++ b/packages/react/src/components/internationalization-provider/internationalization-provider.tsx @@ -15,9 +15,6 @@ interface IntlContextProps { const IntlContext = createContext({ i18n: createI18n() }); -/** - * @deprecated Use {@link DesignSystem} instead - */ export const IntlProvider: FunctionComponent> = ({ children, language }) => { const [i18n] = useState(() => createI18n(language)); diff --git a/packages/react/src/components/table/sort-button-icon.test.tsx b/packages/react/src/components/table/sort-button-icon.test.tsx index 1cf2db2e07..679768a917 100644 --- a/packages/react/src/components/table/sort-button-icon.test.tsx +++ b/packages/react/src/components/table/sort-button-icon.test.tsx @@ -1,10 +1,12 @@ import { shallow } from 'enzyme'; import { useTheme } from '../../hooks/use-theme'; -import { equisoftTheme } from '../../themes'; import { SortButtonIcon } from './sort-button-icon'; +import { buildTheme, equisoftThemeCustomization } from '../../themes'; jest.mock('../../hooks/use-theme'); +const equisoftTheme = buildTheme(equisoftThemeCustomization); + describe('SortButtonIcon', () => { beforeEach(() => { jest.mocked(useTheme).mockReturnValue(equisoftTheme); diff --git a/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx b/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx index 85b80ebb3a..bfd970025d 100644 --- a/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx +++ b/packages/react/src/components/theme-wrapper/theme-wrapper.test.tsx @@ -1,8 +1,8 @@ import { render, shallow } from 'enzyme'; -import { buildTheme, Button } from '../..'; +import { Button } from '../..'; import { ShadowWrapper } from '../shadow-wrapper/shadow-wrapper'; import { ThemeWrapper } from './theme-wrapper'; -import { ThemeCustomization } from '../../themes/theme'; +import { ThemeCustomization } from '../../themes'; describe('Theme Wrapper', () => { test('Returns component with default theme', () => { @@ -25,10 +25,8 @@ describe('Theme Wrapper', () => { }, }; - const builtTheme = buildTheme(themeCustomization); - const tree1 = render( - +