From 13bfa46eb33eae4dc83dcf97f00cebc75317ac11 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Thu, 13 Jun 2024 15:05:14 +0200 Subject: [PATCH 1/7] =?UTF-8?q?=F0=9F=9A=A7=20Extracted=20all=201.0=20over?= =?UTF-8?q?rides=20into=20new=20css=20file?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/eds-tokens/legacy-color-override.css | 104 ++++++++++++++++++ 1 file changed, 104 insertions(+) create mode 100644 packages/eds-tokens/legacy-color-override.css diff --git a/packages/eds-tokens/legacy-color-override.css b/packages/eds-tokens/legacy-color-override.css new file mode 100644 index 0000000000..5e601c1675 --- /dev/null +++ b/packages/eds-tokens/legacy-color-override.css @@ -0,0 +1,104 @@ +:root { + --eds_text__static_icons__default: rgba(61, 61, 61, 1); + --eds_text__static_icons__secondary: rgba(86, 86, 86, 1); + --eds_text__static_icons__tertiary: rgba(111, 111, 111, 1); + --eds_text__static_icons__primary_white: rgba(255, 255, 255, 1); + --eds_ui_background__default: rgba(255, 255, 255, 1); + --eds_ui_background__semitransparent: rgba(255, 255, 255, 0.2); + --eds_ui_background__light: rgba(247, 247, 247, 1); + --eds_ui_background__scrim: rgba(0, 0, 0, 0.4); + --eds_ui_background__overlay: rgba(0, 0, 0, 0.8); + --eds_ui_background__medium: rgba(220, 220, 220, 1); + --eds_ui_background__info: rgba(213, 234, 244, 1); + --eds_ui_background__warning: rgba(255, 231, 214, 1); + --eds_ui_background__danger: rgba(255, 193, 193, 1); + --eds_logo__fill_positive: rgba(235, 0, 55, 1); + --eds_logo__fill_negative: rgba(255, 255, 255, 1); + --eds_interactive_primary__selected_highlight: rgba(230, 250, 236, 1); + --eds_interactive_primary__selected_hover: rgba(195, 243, 210, 1); + --eds_interactive_primary__resting: rgba(0, 112, 121, 1); + --eds_interactive_primary__hover: rgba(0, 79, 85, 1); + --eds_interactive_primary__hover_alt: rgba(222, 237, 238, 1); + --eds_interactive_secondary__highlight: rgba(213, 234, 244, 1); + --eds_interactive_secondary__resting: rgba(36, 55, 70, 1); + --eds_interactive_secondary__link_hover: rgba(23, 36, 47, 1); + --eds_interactive_danger__highlight: rgba(255, 193, 193, 1); + --eds_interactive_danger__resting: rgba(235, 0, 0, 1); + --eds_interactive_danger__hover: rgba(179, 13, 47, 1); + --eds_interactive_danger__text: rgba(179, 13, 47, 1); + --eds_interactive_warning__highlight: rgba(255, 231, 214, 1); + --eds_interactive_warning__resting: rgba(255, 146, 0, 1); + --eds_interactive_warning__hover: rgba(173, 98, 0, 1); + --eds_interactive_warning__text: rgba(173, 98, 0, 1); + --eds_interactive_success__highlight: rgba(230, 250, 236, 1); + --eds_interactive_success__resting: rgba(75, 183, 72, 1); + --eds_interactive_success__hover: rgba(53, 129, 50, 1); + --eds_interactive_success__text: rgba(53, 129, 50, 1); + --eds_interactive_table__cell__fill_resting: rgba(255, 255, 255, 1); + --eds_interactive_table__cell__fill_hover: rgba(234, 234, 234, 1); + --eds_interactive_table__cell__fill_activated: rgba(230, 250, 236, 1); + --eds_interactive_table__header__fill_activated: rgba(234, 234, 234, 1); + --eds_interactive_table__header__fill_hover: rgba(220, 220, 220, 1); + --eds_interactive_table__header__fill_resting: rgba(247, 247, 247, 1); + --eds_interactive__disabled__text: rgba(190, 190, 190, 1); + --eds_interactive__text_highlight: rgba(213, 234, 244, 1); + --eds_interactive__focus: rgba(0, 112, 121, 1); + --eds_interactive__disabled__border: rgba(220, 220, 220, 1); + --eds_interactive__disabled__fill: rgba(234, 234, 234, 1); + --eds_interactive__link_on_interactive_colors: rgba(255, 255, 255, 1); + --eds_interactive__icon_on_interactive_colors: rgba(255, 255, 255, 1); + --eds_interactive__link_in_snackbars: rgba(151, 202, 206, 1); + --eds_interactive__pressed_overlay_dark: rgba(0, 0, 0, 0.2); + --eds_interactive__pressed_overlay_light: rgba(255, 255, 255, 0.2); + + /*Typography colors*/ + --eds_heading__h1_bold_color: rgba(61, 61, 61, 1); + --eds_heading__h1_color: rgba(61, 61, 61, 1); + --eds_heading__h2_color: rgba(61, 61, 61, 1); + --eds_heading__h3_color: rgba(61, 61, 61, 1); + --eds_heading__h4_color: rgba(61, 61, 61, 1); + --eds_heading__h5_color: rgba(61, 61, 61, 1); + --eds_heading__h6_color: rgba(61, 61, 61, 1); + --eds_navigation__menu_title_color: rgba(61, 61, 61, 1); + --eds_navigation__menu_tabs_color: rgba(61, 61, 61, 1); + --eds_navigation__label_color: rgba(0, 0, 0, 1); + --eds_navigation__drawer_active_color: rgba(0, 0, 0, 1); + --eds_navigation__drawer_inactive_color: rgba(0, 0, 0, 1); + --eds_navigation__button_color: rgba(0, 0, 0, 1); + --eds_navigation__breadcrumb_color: rgba(0, 0, 0, 1); + --eds_navigation__breadcrumb_hover_color: rgba(0, 0, 0, 1); + --eds_navigation__menu_title_hover_color: rgba(61, 61, 61, 1); + --eds_input__label_color: rgba(0, 0, 0, 1); + --eds_input__text_color: rgba(0, 0, 0, 1); + --eds_input__text_monospaced_color: rgba(0, 0, 0, 1); + --eds_input__helper_color: rgba(0, 0, 0, 1); + --eds_paragraph__body_short_italic_color: rgba(61, 61, 61, 1); + --eds_paragraph__caption_color: rgba(61, 61, 61, 1); + --eds_paragraph__meta_color: rgba(61, 61, 61, 1); + --eds_paragraph__body_short_color: rgba(61, 61, 61, 1); + --eds_paragraph__body_short_bold_italic_color: rgba(61, 61, 61, 1); + --eds_paragraph__body_short_bold_color: rgba(61, 61, 61, 1); + --eds_paragraph__body_short_link_color: rgba(0, 112, 121, 1); + --eds_paragraph__overline_color: rgba(61, 61, 61, 1); + --eds_paragraph__ingress_color: rgba(61, 61, 61, 1); + --eds_paragraph__body_long_color: rgba(61, 61, 61, 1); + --eds_paragraph__body_long_link_color: rgba(0, 112, 121, 1); + --eds_paragraph__body_long_italic_color: rgba(61, 61, 61, 1); + --eds_paragraph__body_long_bold_color: rgba(61, 61, 61, 1); + --eds_paragraph__body_long_bold_italic_color: rgba(61, 61, 61, 1); + --eds_table__cell_header_color: rgba(0, 0, 0, 1); + --eds_table__cell_text_color: rgba(0, 0, 0, 1); + --eds_table__cell_text_bold_color: rgba(0, 0, 0, 1); + --eds_table__cell_text_link_color: rgba(0, 0, 0, 1); + --eds_table__cell_numeric_monospaced_color: rgba(0, 0, 0, 1); + --eds_table__cell_header_color: rgba(0, 0, 0, 1); + --eds_table__cell_text_color: rgba(0, 0, 0, 1); + --eds_table__cell_text_bold_color: rgba(0, 0, 0, 1); + --eds_table__cell_text_link_color: rgba(0, 0, 0, 1); + --eds_table__cell_numeric_monospaced_color: rgba(0, 0, 0, 1); + --eds_ui__tooltip_color: rgba(61, 61, 61, 1); + --eds_ui__snackbar_color: rgba(61, 61, 61, 1); + --eds_ui__accordion_header_color: rgba(61, 61, 61, 1); + --eds_ui__chip__badge_color: rgba(61, 61, 61, 1); + --eds_ui__chart_color: rgba(61, 61, 61, 1); +} \ No newline at end of file From 635d1a538b2c94a41a97e3373913af7a7fd362c1 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 3 Jul 2024 15:21:02 +0200 Subject: [PATCH 2/7] wip mapping colors --- packages/eds-tokens/legacy-color-override.css | 154 ++++++++++-------- 1 file changed, 83 insertions(+), 71 deletions(-) diff --git a/packages/eds-tokens/legacy-color-override.css b/packages/eds-tokens/legacy-color-override.css index 5e601c1675..082da4bb37 100644 --- a/packages/eds-tokens/legacy-color-override.css +++ b/packages/eds-tokens/legacy-color-override.css @@ -1,31 +1,42 @@ :root { - --eds_text__static_icons__default: rgba(61, 61, 61, 1); - --eds_text__static_icons__secondary: rgba(86, 86, 86, 1); - --eds_text__static_icons__tertiary: rgba(111, 111, 111, 1); - --eds_text__static_icons__primary_white: rgba(255, 255, 255, 1); - --eds_ui_background__default: rgba(255, 255, 255, 1); + --eds_text__static_icons__default: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_text__static_icons__secondary: var(--eds-color-text-secondary, rgba(86, 86, 86, 1)); + --eds_text__static_icons__tertiary: var(--eds-color-text-tertiary, rgba(111, 111, 111, 1)); + --eds_text__static_icons__primary_white: var(--eds-color-text-inverted, rgba(255, 255, 255, 1)); + --eds_ui_background__default: var(--eds-color-surface-level-2, rgba(255, 255, 255, 1)); + /*circularProgress background, may need a custom light-dark*/ --eds_ui_background__semitransparent: rgba(255, 255, 255, 0.2); - --eds_ui_background__light: rgba(247, 247, 247, 1); - --eds_ui_background__scrim: rgba(0, 0, 0, 0.4); - --eds_ui_background__overlay: rgba(0, 0, 0, 0.8); - --eds_ui_background__medium: rgba(220, 220, 220, 1); - --eds_ui_background__info: rgba(213, 234, 244, 1); - --eds_ui_background__warning: rgba(255, 231, 214, 1); - --eds_ui_background__danger: rgba(255, 193, 193, 1); + --eds_ui_background__light: var(--eds-color-surface-level-1, rgba(247, 247, 247, 1)); + --eds_ui_background__scrim: var(--eds-ui-scrim-color-surface, rgba(0, 0, 0, 0.4)); + /*tooltip, snackbar*/ + --eds_ui_background__overlay: var(--eds-color-surface-inverted, rgba(0, 0, 0, 0.8)); + /*background__medium is used for misc borders, autocomplete/sidebarlink hover background, + *table header background and more, so need testing in dark mode to see if this works*/ + --eds_ui_background__medium: var(--eds-color-border-primary, rgba(220, 220, 220, 1)); + /*card backgrounds*/ + --eds_ui_background__info: var(--eds-color-message-surface-standard-info-on-level-1, rgba(213, 234, 244, 1)); + --eds_ui_background__warning: var(--eds-color-message-surface-standard-warning-on-level-1, rgba(255, 231, 214, 1)); + --eds_ui_background__danger: var(--eds-color-message-surface-standard-error-on-level-1, rgba(255, 193, 193, 1)); + --eds_logo__fill_positive: rgba(235, 0, 55, 1); --eds_logo__fill_negative: rgba(255, 255, 255, 1); - --eds_interactive_primary__selected_highlight: rgba(230, 250, 236, 1); - --eds_interactive_primary__selected_hover: rgba(195, 243, 210, 1); - --eds_interactive_primary__resting: rgba(0, 112, 121, 1); - --eds_interactive_primary__hover: rgba(0, 79, 85, 1); - --eds_interactive_primary__hover_alt: rgba(222, 237, 238, 1); - --eds_interactive_secondary__highlight: rgba(213, 234, 244, 1); + /*active background color (menu, autocomplete, pagination etc)*/ + --eds_interactive_primary__selected_highlight: var(--eds-color-interactive-surface-standard-secondary-active-initial, rgba(230, 250, 236, 1)); + --eds_interactive_primary__selected_hover: var(--eds-color-interactive-surface-standard-secondary-active-hover, rgba(195, 243, 210, 1)); + --eds_interactive_primary__resting: var(--eds-color-action-surface-primary-default-initial, rgba(0, 112, 121, 1)); + --eds_interactive_primary__hover: var(--eds-color-action-surface-primary-default-hover, rgba(0, 79, 85, 1)); + --eds_interactive_primary__hover_alt: var(--eds-color-interactive-surface-standard-secondary-active-initial, rgba(222, 237, 238, 1)); + /*secondary button ghost/outlined does not exist in 2.0 but the color is used other places. + *So lets see if one of them works for button in dark mode*/ + --eds_interactive_secondary__highlight: var(--eds-color-message-surface-standard-info-on-level-1, rgba(213, 234, 244, 1)); + /*in older version of 2.0: light: #03486b dark: #90bbd5*/ --eds_interactive_secondary__resting: rgba(36, 55, 70, 1); + /*in older version of 2.0: light: #02314a dark: #c4dbe8*/ --eds_interactive_secondary__link_hover: rgba(23, 36, 47, 1); - --eds_interactive_danger__highlight: rgba(255, 193, 193, 1); - --eds_interactive_danger__resting: rgba(235, 0, 0, 1); - --eds_interactive_danger__hover: rgba(179, 13, 47, 1); - --eds_interactive_danger__text: rgba(179, 13, 47, 1); + --eds_interactive_danger__highlight: var(--eds-color-action-surface-secondary-danger-hover, rgba(255, 193, 193, 1)); + --eds_interactive_danger__resting: var(--eds-color-action-surface-primary-danger-initial, rgba(235, 0, 0, 1)); + --eds_interactive_danger__hover: var(--eds-color-action-surface-primary-danger-hover, rgba(179, 13, 47, 1)); + --eds_interactive_danger__text: var(--eds-color-action-text-secondary-danger-initial, rgba(179, 13, 47, 1)); --eds_interactive_warning__highlight: rgba(255, 231, 214, 1); --eds_interactive_warning__resting: rgba(255, 146, 0, 1); --eds_interactive_warning__hover: rgba(173, 98, 0, 1); @@ -52,53 +63,54 @@ --eds_interactive__pressed_overlay_light: rgba(255, 255, 255, 0.2); /*Typography colors*/ - --eds_heading__h1_bold_color: rgba(61, 61, 61, 1); - --eds_heading__h1_color: rgba(61, 61, 61, 1); - --eds_heading__h2_color: rgba(61, 61, 61, 1); - --eds_heading__h3_color: rgba(61, 61, 61, 1); - --eds_heading__h4_color: rgba(61, 61, 61, 1); - --eds_heading__h5_color: rgba(61, 61, 61, 1); - --eds_heading__h6_color: rgba(61, 61, 61, 1); - --eds_navigation__menu_title_color: rgba(61, 61, 61, 1); - --eds_navigation__menu_tabs_color: rgba(61, 61, 61, 1); - --eds_navigation__label_color: rgba(0, 0, 0, 1); - --eds_navigation__drawer_active_color: rgba(0, 0, 0, 1); - --eds_navigation__drawer_inactive_color: rgba(0, 0, 0, 1); - --eds_navigation__button_color: rgba(0, 0, 0, 1); - --eds_navigation__breadcrumb_color: rgba(0, 0, 0, 1); - --eds_navigation__breadcrumb_hover_color: rgba(0, 0, 0, 1); - --eds_navigation__menu_title_hover_color: rgba(61, 61, 61, 1); - --eds_input__label_color: rgba(0, 0, 0, 1); - --eds_input__text_color: rgba(0, 0, 0, 1); - --eds_input__text_monospaced_color: rgba(0, 0, 0, 1); - --eds_input__helper_color: rgba(0, 0, 0, 1); - --eds_paragraph__body_short_italic_color: rgba(61, 61, 61, 1); - --eds_paragraph__caption_color: rgba(61, 61, 61, 1); - --eds_paragraph__meta_color: rgba(61, 61, 61, 1); - --eds_paragraph__body_short_color: rgba(61, 61, 61, 1); - --eds_paragraph__body_short_bold_italic_color: rgba(61, 61, 61, 1); - --eds_paragraph__body_short_bold_color: rgba(61, 61, 61, 1); - --eds_paragraph__body_short_link_color: rgba(0, 112, 121, 1); - --eds_paragraph__overline_color: rgba(61, 61, 61, 1); - --eds_paragraph__ingress_color: rgba(61, 61, 61, 1); - --eds_paragraph__body_long_color: rgba(61, 61, 61, 1); - --eds_paragraph__body_long_link_color: rgba(0, 112, 121, 1); - --eds_paragraph__body_long_italic_color: rgba(61, 61, 61, 1); - --eds_paragraph__body_long_bold_color: rgba(61, 61, 61, 1); - --eds_paragraph__body_long_bold_italic_color: rgba(61, 61, 61, 1); - --eds_table__cell_header_color: rgba(0, 0, 0, 1); - --eds_table__cell_text_color: rgba(0, 0, 0, 1); - --eds_table__cell_text_bold_color: rgba(0, 0, 0, 1); - --eds_table__cell_text_link_color: rgba(0, 0, 0, 1); - --eds_table__cell_numeric_monospaced_color: rgba(0, 0, 0, 1); - --eds_table__cell_header_color: rgba(0, 0, 0, 1); - --eds_table__cell_text_color: rgba(0, 0, 0, 1); - --eds_table__cell_text_bold_color: rgba(0, 0, 0, 1); - --eds_table__cell_text_link_color: rgba(0, 0, 0, 1); - --eds_table__cell_numeric_monospaced_color: rgba(0, 0, 0, 1); - --eds_ui__tooltip_color: rgba(61, 61, 61, 1); - --eds_ui__snackbar_color: rgba(61, 61, 61, 1); - --eds_ui__accordion_header_color: rgba(61, 61, 61, 1); - --eds_ui__chip__badge_color: rgba(61, 61, 61, 1); - --eds_ui__chart_color: rgba(61, 61, 61, 1); + --eds_heading__h1_bold_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_heading__h1_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_heading__h2_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_heading__h3_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_heading__h4_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_heading__h5_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_heading__h6_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_navigation__menu_title_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_navigation__menu_tabs_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_navigation__menu_title_hover_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__body_short_italic_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__caption_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__meta_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__body_short_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__body_short_bold_italic_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__body_short_bold_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__overline_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__ingress_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__body_long_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__body_long_italic_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__body_long_bold_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__body_long_bold_italic_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_ui__tooltip_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_ui__snackbar_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_ui__accordion_header_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_ui__chip__badge_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_ui__chart_color: var(--eds-color-text-primary, rgba(61, 61, 61, 1)); + --eds_paragraph__body_short_link_color: var(--eds-color-interactive-text-standard-secondary-active-initial, rgba(0, 112, 121, 1)); + --eds_paragraph__body_long_link_color: var(--eds-color-interactive-text-standard-secondary-active-initial, rgba(0, 112, 121, 1)); + /*I don't think we use any of these black text colors, but just in case we'll replace rgba(0, 0, 0, 1) with light-dark(black, white)*/ + --eds_navigation__label_color: light-dark(black, white); + --eds_navigation__drawer_active_color: light-dark(black, white); + --eds_navigation__drawer_inactive_color: light-dark(black, white); + --eds_navigation__button_color: light-dark(black, white); + --eds_navigation__breadcrumb_color: light-dark(black, white); + --eds_navigation__breadcrumb_hover_color: light-dark(black, white); + --eds_input__label_color: light-dark(black, white); + --eds_input__text_color: light-dark(black, white); + --eds_input__text_monospaced_color: light-dark(black, white); + --eds_input__helper_color: light-dark(black, white); + --eds_table__cell_header_color: light-dark(black, white); + --eds_table__cell_text_color: light-dark(black, white); + --eds_table__cell_text_bold_color: light-dark(black, white); + --eds_table__cell_text_link_color: light-dark(black, white); + --eds_table__cell_numeric_monospaced_color: light-dark(black, white); + --eds_table__cell_header_color: light-dark(black, white); + --eds_table__cell_text_color: light-dark(black, white); + --eds_table__cell_text_bold_color: light-dark(black, white); + --eds_table__cell_text_link_color: light-dark(black, white); + --eds_table__cell_numeric_monospaced_color: light-dark(black, white); } \ No newline at end of file From f38d563ab00cd5d18fa6b6ad7511e585e6cbbf70 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 3 Jul 2024 16:45:40 +0200 Subject: [PATCH 3/7] first pass of legacy color overrides --- packages/eds-tokens/legacy-color-override.css | 56 ++++++++++--------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/packages/eds-tokens/legacy-color-override.css b/packages/eds-tokens/legacy-color-override.css index 082da4bb37..acd3febe16 100644 --- a/packages/eds-tokens/legacy-color-override.css +++ b/packages/eds-tokens/legacy-color-override.css @@ -29,37 +29,43 @@ /*secondary button ghost/outlined does not exist in 2.0 but the color is used other places. *So lets see if one of them works for button in dark mode*/ --eds_interactive_secondary__highlight: var(--eds-color-message-surface-standard-info-on-level-1, rgba(213, 234, 244, 1)); - /*in older version of 2.0: light: #03486b dark: #90bbd5*/ - --eds_interactive_secondary__resting: rgba(36, 55, 70, 1); - /*in older version of 2.0: light: #02314a dark: #c4dbe8*/ - --eds_interactive_secondary__link_hover: rgba(23, 36, 47, 1); + /*secondary__resting: 1.0: rgba(36, 55, 70, 1) in older version of 2.0: light: #03486b dark: #90bbd5*/ + --eds_interactive_secondary__resting: light-dark(#03486b, #90bbd5); + /*secondary__link_hover: 1.0: rgba(23, 36, 47, 1) in older version of 2.0: light: #02314a dark: #c4dbe8*/ + --eds_interactive_secondary__link_hover: light-dark(#02314a, #c4dbe8); --eds_interactive_danger__highlight: var(--eds-color-action-surface-secondary-danger-hover, rgba(255, 193, 193, 1)); --eds_interactive_danger__resting: var(--eds-color-action-surface-primary-danger-initial, rgba(235, 0, 0, 1)); --eds_interactive_danger__hover: var(--eds-color-action-surface-primary-danger-hover, rgba(179, 13, 47, 1)); --eds_interactive_danger__text: var(--eds-color-action-text-secondary-danger-initial, rgba(179, 13, 47, 1)); - --eds_interactive_warning__highlight: rgba(255, 231, 214, 1); - --eds_interactive_warning__resting: rgba(255, 146, 0, 1); - --eds_interactive_warning__hover: rgba(173, 98, 0, 1); - --eds_interactive_warning__text: rgba(173, 98, 0, 1); - --eds_interactive_success__highlight: rgba(230, 250, 236, 1); - --eds_interactive_success__resting: rgba(75, 183, 72, 1); - --eds_interactive_success__hover: rgba(53, 129, 50, 1); - --eds_interactive_success__text: rgba(53, 129, 50, 1); - --eds_interactive_table__cell__fill_resting: rgba(255, 255, 255, 1); - --eds_interactive_table__cell__fill_hover: rgba(234, 234, 234, 1); - --eds_interactive_table__cell__fill_activated: rgba(230, 250, 236, 1); - --eds_interactive_table__header__fill_activated: rgba(234, 234, 234, 1); - --eds_interactive_table__header__fill_hover: rgba(220, 220, 220, 1); - --eds_interactive_table__header__fill_resting: rgba(247, 247, 247, 1); - --eds_interactive__disabled__text: rgba(190, 190, 190, 1); - --eds_interactive__text_highlight: rgba(213, 234, 244, 1); - --eds_interactive__focus: rgba(0, 112, 121, 1); - --eds_interactive__disabled__border: rgba(220, 220, 220, 1); - --eds_interactive__disabled__fill: rgba(234, 234, 234, 1); - --eds_interactive__link_on_interactive_colors: rgba(255, 255, 255, 1); - --eds_interactive__icon_on_interactive_colors: rgba(255, 255, 255, 1); + --eds_interactive_warning__highlight: var(--eds-color-message-surface-standard-warning-on-level-1, rgba(255, 231, 214, 1)); + --eds_interactive_warning__resting: var(--eds-input-color-message-border-warning-initial, rgba(255, 146, 0, 1)); + --eds_interactive_warning__hover: var(--eds-input-color-message-border-warning-focus, rgba(173, 98, 0, 1)); + --eds_interactive_warning__text: var(--eds-input-color-message-text-warning-focus, rgba(173, 98, 0, 1)); + --eds_interactive_success__highlight: var(--eds-color-message-surface-standard-success-on-level-1, rgba(230, 250, 236, 1)); + --eds_interactive_success__resting: var(--eds-input-color-message-border-success-initial, rgba(75, 183, 72, 1)); + --eds_interactive_success__hover: var(--eds-input-color-message-border-success-focus, rgba(53, 129, 50, 1)); + --eds_interactive_success__text: var(--eds-input-color-message-text-success-focus, rgba(53, 129, 50, 1)); + --eds_interactive_table__cell__fill_resting: var(--eds-table-cell-color-interactive-surface-resting-initial-on-level-1, rgba(255, 255, 255, 1)); + --eds_interactive_table__cell__fill_hover: var(--eds-table-cell-color-interactive-surface-resting-hover-on-level-1, rgba(234, 234, 234, 1)); + --eds_interactive_table__cell__fill_activated: var(--eds-table-cell-color-interactive-surface-active-initial-on-level-1, rgba(230, 250, 236, 1)); + --eds_interactive_table__header__fill_activated: var(--eds-table-header-color-interactive-surface-active-initial-on-level-1, rgba(234, 234, 234, 1)); + --eds_interactive_table__header__fill_hover: var(--eds-table-header-color-interactive-surface-resting-hover-on-level-1, rgba(220, 220, 220, 1)); + --eds_interactive_table__header__fill_resting: var(--eds-table-header-color-interactive-surface-resting-initial-on-level-1, rgba(247, 247, 247, 1)); + --eds_interactive__disabled__text: var(--eds-color-text-disabled, rgba(190, 190, 190, 1)); + /*text_highlight is not used anywhere*/ + --eds_interactive__text_highlight: var(--eds-color-message-surface-callout-info, rgba(213, 234, 244, 1)); + --eds_interactive__focus: var(--eds-input-color-border-focus, rgba(0, 112, 121, 1)); + --eds_interactive__disabled__border: var(--eds-color-border-disabled, rgba(220, 220, 220, 1)); + --eds_interactive__disabled__fill: var(--eds-color-interactive-surface-standard-primary-disabled-filled, rgba(234, 234, 234, 1)); + /*link_on_interactive_colors: not used*/ + --eds_interactive__link_on_interactive_colors: var(--eds-color-text-inverted, rgba(255, 255, 255, 1)); + /*icon_on_interactive_colors: progress and switch*/ + --eds_interactive__icon_on_interactive_colors: var(--eds-color-text-inverted, rgba(255, 255, 255, 1)); + /*special case for button in snackbar*/ --eds_interactive__link_in_snackbars: rgba(151, 202, 206, 1); + /*not used*/ --eds_interactive__pressed_overlay_dark: rgba(0, 0, 0, 0.2); + /*not used*/ --eds_interactive__pressed_overlay_light: rgba(255, 255, 255, 0.2); /*Typography colors*/ From 4da34dde5781a5f2e06975bf3231113b212e091a Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 3 Jul 2024 16:46:27 +0200 Subject: [PATCH 4/7] rename the file --- .../{legacy-color-override.css => legacy-colors-override.css} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/eds-tokens/{legacy-color-override.css => legacy-colors-override.css} (100%) diff --git a/packages/eds-tokens/legacy-color-override.css b/packages/eds-tokens/legacy-colors-override.css similarity index 100% rename from packages/eds-tokens/legacy-color-override.css rename to packages/eds-tokens/legacy-colors-override.css From f3ff82473553ede20fb45564479eae78bf2344a1 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Wed, 3 Jul 2024 16:49:22 +0200 Subject: [PATCH 5/7] replace usage of hex tokens with rgba --- .../HelperText/HelperText.token.ts | 2 +- .../src/components/Menu/Menu.stories.tsx | 32 +++++++++---------- .../stories/playground/DataTable.tsx | 4 +-- .../src/components/FilterWrapper.tsx | 2 +- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts index 541e839cc2..d70d0c06a2 100644 --- a/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts +++ b/packages/eds-core-react/src/components/InputWrapper/HelperText/HelperText.token.ts @@ -17,7 +17,7 @@ export type HelperTextProps = { } export const helperText: HelperTextProps = { - background: colors.ui.background__light.hex, + background: colors.ui.background__light.rgba, typography: { ...typography.input.helper, color: colors.text.static_icons__tertiary.rgba, diff --git a/packages/eds-core-react/src/components/Menu/Menu.stories.tsx b/packages/eds-core-react/src/components/Menu/Menu.stories.tsx index dfecf8bd60..f93e99d22c 100644 --- a/packages/eds-core-react/src/components/Menu/Menu.stories.tsx +++ b/packages/eds-core-react/src/components/Menu/Menu.stories.tsx @@ -150,13 +150,13 @@ export const Complex: StoryFn = () => { Open = () => { Copy = () => { Paste = () => { Rename = () => { Delete = () => { Settings @@ -349,7 +349,7 @@ export const StaysOpen: StoryFn = (args) => { = (args) => { = (args) => { @@ -483,7 +483,7 @@ export const AsLink: StoryFn = () => { = () => { diff --git a/packages/eds-core-react/stories/playground/DataTable.tsx b/packages/eds-core-react/stories/playground/DataTable.tsx index 00419c80dd..ef22aef225 100644 --- a/packages/eds-core-react/stories/playground/DataTable.tsx +++ b/packages/eds-core-react/stories/playground/DataTable.tsx @@ -147,7 +147,7 @@ const MenuButton = ({ row }: { row: string[] }) => { Open { Copy ({ aria-label={'Show column filters'} > Date: Thu, 11 Jul 2024 13:38:20 +0200 Subject: [PATCH 6/7] temp delete after --- .../eds-core-react/.storybook/preview.mjs | 2 + .../build/css/color/colors-trimmed-backup.css | 810 ++++++++++++++++++ packages/eds-tokens/package.json | 1 + 3 files changed, 813 insertions(+) create mode 100644 packages/eds-tokens/build/css/color/colors-trimmed-backup.css diff --git a/packages/eds-core-react/.storybook/preview.mjs b/packages/eds-core-react/.storybook/preview.mjs index c54d4702ca..be539baa2e 100644 --- a/packages/eds-core-react/.storybook/preview.mjs +++ b/packages/eds-core-react/.storybook/preview.mjs @@ -1,3 +1,5 @@ +import '@equinor/eds-tokens/css/variables-verbose.css' +import '@equinor/eds-tokens/legacy-colors-override.css' const preview = { viewMode: 'docs', parameters: { diff --git a/packages/eds-tokens/build/css/color/colors-trimmed-backup.css b/packages/eds-tokens/build/css/color/colors-trimmed-backup.css new file mode 100644 index 0000000000..3b9a3b1ff6 --- /dev/null +++ b/packages/eds-tokens/build/css/color/colors-trimmed-backup.css @@ -0,0 +1,810 @@ +/** + * Do not edit directly + */ + +:root { + --eds-color-shadow: light-dark(#00000024, #00000024); + /* For use in box shadows */ + --eds-color-text-primary: light-dark(#3d3d3d, #d6d9dc); + /* Dialog title, Popover title, Side sheet title, Title */ + --eds-color-text-secondary: light-dark(#565656, #c2c8cc); + /* Application name, Dialog body text, Popover body text */ + --eds-color-text-tertiary: light-dark(#6f6f6f, #a6afb5); + --eds-color-text-quaternary: light-dark(#9e9e9e, #64727d); + --eds-color-text-maximal: light-dark(#3d3d3d, #ffffff); + /* For titles and high-contrast headers */ + --eds-color-text-disabled: light-dark(#bebebe, #52616d); + /* simple semantic text color. Covers: Menu item, Tab, Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-color-text-inverted: light-dark(#ffffff, #000000); + /* Button, Toggle button */ + --eds-color-icon-primary: light-dark(#3d3d3d, #d6d9dc); + --eds-color-icon-secondary: light-dark(#565656, #c2c8cc); + --eds-color-icon-tertiary: light-dark(#6f6f6f, #a6afb5); + --eds-color-icon-quaternary: light-dark(#9e9e9e, #64727d); + --eds-color-icon-disabled: light-dark(#bebebe, #52616d); + /* simple semantic color for disabled icons. Covers: Autocomplete, Menu item (Menu & Sidebar) Search, Tab, Table header, Table header data grid, Table cell, Table data grid cell, Text field, Top bar */ + --eds-color-icon-inverted: light-dark(#ffffff, #000000); + /* Button, Toggle button */ + --eds-color-border-primary: light-dark(#dcdcdc, #ffffff29); + /* Dialog, Popover */ + --eds-color-border-secondary: light-dark(#bebebe, #ffffff33); + --eds-color-border-tertiary: light-dark(#9e9e9e, #ffffff4d); + --eds-color-border-quaternary: light-dark(#6f6f6f, #ffffff66); + --eds-color-border-disabled: light-dark(#dcdcdc, #435460); + /* simple semantic disabled colour for borders. Covers: Menu item, Tab, Table cell, Table data grid cell, Table header, Table header data grid */ + --eds-color-border-none: light-dark(#ffffff00, #00000000); + --eds-color-surface-level-1: light-dark(#f7f7f7, #132634); + /* level 1 surface (UI main) */ + --eds-color-surface-level-2: light-dark(#ffffff, #243746); + /* Card, Dialog */ + --eds-color-surface-level-3: light-dark(#ffffff, #2c4251); + /* Card, Menu, Popover */ + --eds-color-surface-none: light-dark(#ffffff00, #00000000); + /* transparent */ + --eds-color-surface-inverted: light-dark(#000000cc, #dcf2fff2); + /* Snackbar, Tooltip */ + --eds-color-action-text-primary-disabled: light-dark(#bebebe, #616161); + /* Button */ + --eds-color-action-text-primary-default-initial: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-text-primary-default-hover: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-text-primary-muted-initial: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-text-primary-muted-hover: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-text-primary-danger-initial: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-text-primary-danger-hover: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-text-secondary-disabled: light-dark(#bebebe, #52616d); + /* Button */ + --eds-color-action-text-secondary-default-initial: light-dark(#007079, #97cace); + /* Button */ + --eds-color-action-text-secondary-default-hover: light-dark(#004f55, #b3e2e5); + /* Button, Toggle button */ + --eds-color-action-text-secondary-muted-initial: light-dark(#6f6f6f, #a6afb5); + /* Button */ + --eds-color-action-text-secondary-muted-hover: light-dark(#565656, #c2c8cc); + /* Button */ + --eds-color-action-text-secondary-danger-initial: light-dark(#e20337, #ff666b); + /* Button */ + --eds-color-action-text-secondary-danger-hover: light-dark(#90042c, #ffabab); + /* Button */ + --eds-color-action-text-tertiary-disabled: light-dark(#bebebe, #52616d); + /* Button */ + --eds-color-action-text-tertiary-default-initial: light-dark(#007079, #97cace); + /* Button */ + --eds-color-action-text-tertiary-default-hover: light-dark(#004f55, #b3e2e5); + /* Button, Toggle button */ + --eds-color-action-text-tertiary-muted-initial: light-dark(#6f6f6f, #a6afb5); + /* Button */ + --eds-color-action-text-tertiary-muted-hover: light-dark(#565656, #c2c8cc); + /* Button */ + --eds-color-action-text-tertiary-danger-initial: light-dark(#e20337, #ff666b); + /* Button */ + --eds-color-action-text-tertiary-danger-hover: light-dark(#90042c, #ffabab); + /* Button */ + --eds-color-action-icon-primary-disabled: light-dark(#bebebe, #52616d); + --eds-color-action-icon-primary-default-initial: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-icon-primary-default-hover: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-icon-primary-muted-initial: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-icon-primary-muted-hover: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-icon-primary-danger-initial: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-icon-primary-danger-hover: light-dark(#ffffff, #000000); + /* Button */ + --eds-color-action-icon-secondary-disabled: light-dark(#bebebe, #52616d); + --eds-color-action-icon-secondary-default-initial: light-dark(#007079, #97cace); + /* Button */ + --eds-color-action-icon-secondary-default-hover: light-dark(#004f55, #b3e2e5); + /* Button */ + --eds-color-action-icon-secondary-muted-initial: light-dark(#6f6f6f, #a6afb5); + /* Button */ + --eds-color-action-icon-secondary-muted-hover: light-dark(#565656, #c2c8cc); + /* Button */ + --eds-color-action-icon-secondary-danger-initial: light-dark(#e20337, #ff666b); + /* Button */ + --eds-color-action-icon-secondary-danger-hover: light-dark(#90042c, #ffabab); + /* Button */ + --eds-color-action-icon-tertiary-disabled: light-dark(#bebebe, #52616d); + --eds-color-action-icon-tertiary-default-initial: light-dark(#007079, #97cace); + /* Button */ + --eds-color-action-icon-tertiary-default-hover: light-dark(#004f55, #b3e2e5); + /* Button */ + --eds-color-action-icon-tertiary-muted-initial: light-dark(#6f6f6f, #a6afb5); + /* Button */ + --eds-color-action-icon-tertiary-muted-hover: light-dark(#565656, #c2c8cc); + /* Button */ + --eds-color-action-icon-tertiary-danger-initial: light-dark(#e20337, #ff666b); + /* Button */ + --eds-color-action-icon-tertiary-danger-hover: light-dark(#90042c, #ffabab); + /* Button */ + --eds-color-action-border-primary-disabled: light-dark(#eaeaea, #2e3f4c); + /* Button */ + --eds-color-action-border-primary-default-initial: light-dark(#007079, #97cace); + /* Button, Toggle button */ + --eds-color-action-border-primary-default-hover: light-dark(#004f55, #b3e2e5); + /* Button, Toggle button */ + --eds-color-action-border-primary-muted-initial: light-dark(#6f6f6f, #a6afb5); + /* Button */ + --eds-color-action-border-primary-muted-hover: light-dark(#565656, #c2c8cc); + /* Button */ + --eds-color-action-border-primary-danger-initial: light-dark(#e20337, #ff666b); + /* Button */ + --eds-color-action-border-primary-danger-hover: light-dark(#90042c, #ffabab); + /* Button */ + --eds-color-action-border-secondary-disabled: light-dark(#cfcfcf, light-dark(#dcdcdc, #435460)); + /* Button */ + --eds-color-action-border-secondary-default-initial: light-dark(#007079, #97cace); + /* Button, Toggle button */ + --eds-color-action-border-secondary-default-hover: light-dark(#004f55, #b3e2e5); + /* Button, Toggle button */ + --eds-color-action-border-secondary-muted-initial: light-dark(#6f6f6f, #a6afb5); + /* Button */ + --eds-color-action-border-secondary-muted-hover: light-dark(#565656, #c2c8cc); + /* Button */ + --eds-color-action-border-secondary-danger-initial: light-dark(#e20337, #ff666b); + /* Button */ + --eds-color-action-border-secondary-danger-hover: light-dark(#90042c, #ffabab); + /* Button */ + --eds-color-action-border-tertiary-disabled: light-dark(#ffffff00, #00000000); + --eds-color-action-border-tertiary-default-initial: light-dark(#ffffff00, #00000000); + --eds-color-action-border-tertiary-default-hover: light-dark(#ffffff00, #00000000); + --eds-color-action-border-tertiary-muted-initial: light-dark(#ffffff00, #00000000); + --eds-color-action-border-tertiary-muted-hover: light-dark(#ffffff00, #00000000); + --eds-color-action-border-tertiary-danger-initial: light-dark(#ffffff00, #00000000); + --eds-color-action-border-tertiary-danger-hover: light-dark(#ffffff00, #00000000); + --eds-color-action-surface-primary-disabled: light-dark(#eaeaea, #2e3f4c); + /* Button */ + --eds-color-action-surface-primary-default-initial: light-dark(#007079, #97cace); + /* Button, Toggle button */ + --eds-color-action-surface-primary-default-hover: light-dark(#004f55, #b3e2e5); + /* Button, Toggle button */ + --eds-color-action-surface-primary-muted-initial: light-dark(#6f6f6f, #a6afb5); + /* Button */ + --eds-color-action-surface-primary-muted-hover: light-dark(#565656, #c2c8cc); + /* Button */ + --eds-color-action-surface-primary-danger-initial: light-dark(#e20337, #ff666b); + /* Button */ + --eds-color-action-surface-primary-danger-hover: light-dark(#90042c, #ffabab); + /* Button */ + --eds-color-action-surface-secondary-disabled: light-dark(#ffffff00, #00000000); + /* Button */ + --eds-color-action-surface-secondary-default-initial: light-dark(#ffffff00, #00000000); + /* Button, Ghost button, Toggle button */ + --eds-color-action-surface-secondary-default-hover: light-dark(#deedee, #033235); + /* Button, Ghost button, Toggle button */ + --eds-color-action-surface-secondary-muted-initial: light-dark(#ffffff00, #00000000); + /* Button */ + --eds-color-action-surface-secondary-muted-hover: light-dark(#dcdcdc, #344c5b); + /* Button */ + --eds-color-action-surface-secondary-danger-initial: light-dark(#ffffff00, #00000000); + /* Button */ + --eds-color-action-surface-secondary-danger-hover: light-dark(#ffd2d1, #500017); + /* Button */ + --eds-color-action-surface-tertiary-disabled: light-dark(#ffffff00, #00000000); + /* Button */ + --eds-color-action-surface-tertiary-default-initial: light-dark(#ffffff00, #00000000); + /* Button, Ghost button, Toggle button */ + --eds-color-action-surface-tertiary-default-hover: light-dark(#deedee, #033235); + /* Button, Ghost button, Toggle button */ + --eds-color-action-surface-tertiary-muted-initial: light-dark(#ffffff00, #00000000); + /* Button */ + --eds-color-action-surface-tertiary-muted-hover: light-dark(#dcdcdc, #344c5b); + /* Button */ + --eds-color-action-surface-tertiary-danger-initial: light-dark(#ffffff00, #00000000); + /* Button */ + --eds-color-action-surface-tertiary-danger-hover: light-dark(#ffd2d1, #500017); + /* Button */ + --eds-color-message-text-standard-info: light-dark(#045e8d, #6fc9fb); + /* Deprecated - Card. Use text/message. */ + --eds-color-message-text-standard-success: light-dark(#15682d, #7bcf78); + /* Deprecated - Card. Use text/message. */ + --eds-color-message-text-standard-warning: light-dark(#7f4600, #ffae74); + /* Deprecated - Card. Use text/message. */ + --eds-color-message-text-standard-error: light-dark(#90042c, #ff8a8a); + /* Deprecated - Card. Use text/message. */ + --eds-color-message-text-raised-info-initial: light-dark(#045e8d, #6fc9fb); + /* Chip, Card, input helper */ + --eds-color-message-text-raised-info-hover: light-dark(#034187, #aee1fd); + /* Chip */ + --eds-color-message-text-raised-success-initial: light-dark(#15682d, #7bcf78); + /* Chip, Card, input helper */ + --eds-color-message-text-raised-success-hover: light-dark(#204f1f, #cceecb); + /* Chip */ + --eds-color-message-text-raised-warning-initial: light-dark(#7f4600, #ffae74); + /* Chip, Card, input helper */ + --eds-color-message-text-raised-warning-hover: light-dark(#643700, #ffd9bd); + /* Chip */ + --eds-color-message-text-raised-error-initial: light-dark(#90042c, #ff8a8a); + /* Chip, Card, input helper */ + --eds-color-message-text-raised-error-hover: light-dark(#700020, #ffabab); + /* Chip */ + --eds-color-message-text-callout-info: light-dark(#045e8d, #dfeff7); + /* Banner */ + --eds-color-message-text-callout-success: light-dark(#15682d, #d9f7e2); + /* Banner */ + --eds-color-message-text-callout-warning: light-dark(#7f4600, #ffe7d6); + /* Banner */ + --eds-color-message-text-callout-error: light-dark(#90042c, #ffe1e0); + /* Banner */ + --eds-color-message-icon-standard-info: light-dark(#045e8d, #6fc9fb); + /* Deprecated - Card. Use icon/message. */ + --eds-color-message-icon-standard-success: light-dark(#15682d, #7bcf78); + /* Deprecated - Card. Use icon/message. */ + --eds-color-message-icon-standard-warning: light-dark(#7f4600, #ffae74); + /* Deprecated - Card. Use icon/message. */ + --eds-color-message-icon-standard-error: light-dark(#90042c, #ff8a8a); + /* Deprecated - Card. Use icon/message. */ + --eds-color-message-icon-raised-info-initial: light-dark(#045e8d, #6fc9fb); + /* Deprecated - Chip. Use icon/message. */ + --eds-color-message-icon-raised-info-hover: light-dark(#034187, #aee1fd); + /* Deprecated - Chip. Use icon/message. */ + --eds-color-message-icon-raised-success-initial: light-dark(#15682d, #7bcf78); + /* Deprecated - Chip. Use icon/message. */ + --eds-color-message-icon-raised-success-hover: light-dark(#204f1f, #cceecb); + /* Deprecated - Chip. Use icon/message. */ + --eds-color-message-icon-raised-warning-initial: light-dark(#7f4600, #ffae74); + /* Deprecated - Chip. Use icon/message. */ + --eds-color-message-icon-raised-warning-hover: light-dark(#643700, #ffd9bd); + /* Deprecated - Chip. Use icon/message. */ + --eds-color-message-icon-raised-error-initial: light-dark(#90042c, #ff8a8a); + /* Deprecated - Chip. Use icon/message. */ + --eds-color-message-icon-raised-error-hover: light-dark(#700020, #ffabab); + /* Deprecated - Chip. Use icon/message. */ + --eds-color-message-icon-callout-info: light-dark(#045e8d, #dfeff7); + /* Banner */ + --eds-color-message-icon-callout-success: light-dark(#15682d, #d9f7e2); + /* Banner */ + --eds-color-message-icon-callout-warning: light-dark(#7f4600, #ffe7d6); + /* Banner */ + --eds-color-message-icon-callout-error: light-dark(#90042c, #ffe1e0); + /* Banner */ + --eds-color-message-border-standard-info: light-dark(#d5eaf4, #0084c4); + /* Card */ + --eds-color-message-border-standard-success: light-dark(#d9f7e2, #3fa13d); + /* Card */ + --eds-color-message-border-standard-warning: light-dark(#ffe7d6, #e57e00); + /* Card */ + --eds-color-message-border-standard-error: light-dark(#ffd2d1, #e20337); + /* Card */ + --eds-color-message-border-raised-info-initial: #0084c4; + /* Chip */ + --eds-color-message-border-raised-info-hover: light-dark(#034187, #aee1fd); + /* Chip */ + --eds-color-message-border-raised-success-initial: #3fa13d; + /* Chip */ + --eds-color-message-border-raised-success-hover: light-dark(#204f1f, #cceecb); + /* Chip */ + --eds-color-message-border-raised-warning-initial: #e57e00; + /* Chip */ + --eds-color-message-border-raised-warning-hover: light-dark(#643700, #ffd9bd); + /* Chip */ + --eds-color-message-border-raised-error-initial: #e20337; + /* Chip */ + --eds-color-message-border-raised-error-hover: light-dark(#700020, #ffabab); + /* Chip */ + --eds-color-message-border-callout-info: light-dark(#d5eaf4, #045e8d); + /* Banner */ + --eds-color-message-border-callout-success: light-dark(#d9f7e2, #15682d); + /* Banner */ + --eds-color-message-border-callout-warning: light-dark(#ffe7d6, #7f4600); + /* Banner */ + --eds-color-message-border-callout-error: light-dark(#ffd2d1, #90042c); + /* Banner */ + --eds-color-message-surface-standard-info-on-level-1: light-dark(#d5eaf4, #243746); + /* Card */ + --eds-color-message-surface-standard-info-on-level-2: light-dark(#d5eaf4, #243746); + /* Card */ + --eds-color-message-surface-standard-info-on-level-3: light-dark(#d5eaf4, #2c4251); + /* Card */ + --eds-color-message-surface-standard-success-on-level-1: light-dark(#d9f7e2, #243746); + /* Card */ + --eds-color-message-surface-standard-success-on-level-2: light-dark(#d9f7e2, #243746); + /* Card */ + --eds-color-message-surface-standard-success-on-level-3: light-dark(#d9f7e2, #2c4251); + /* Card */ + --eds-color-message-surface-standard-warning-on-level-1: light-dark(#ffe7d6, #243746); + /* Card */ + --eds-color-message-surface-standard-warning-on-level-2: light-dark(#ffe7d6, #243746); + /* Card */ + --eds-color-message-surface-standard-warning-on-level-3: light-dark(#ffe7d6, #2c4251); + /* Card */ + --eds-color-message-surface-standard-error-on-level-1: light-dark(#ffd2d1, #243746); + /* Card */ + --eds-color-message-surface-standard-error-on-level-2: light-dark(#ffd2d1, #243746); + /* Card */ + --eds-color-message-surface-standard-error-on-level-3: light-dark(#ffd2d1, #2c4251); + /* Card */ + --eds-color-message-surface-raised-info-initial: light-dark(#dfeff7, #dfeff71a); + /* Chip */ + --eds-color-message-surface-raised-info-hover: light-dark(#dfeff7, #dfeff71a); + /* Chip */ + --eds-color-message-surface-raised-success-initial: light-dark(#e6faec, #e6faec1a); + /* Chip */ + --eds-color-message-surface-raised-success-hover: light-dark(#e6faec, #e6faec1a); + /* Chip */ + --eds-color-message-surface-raised-warning-initial: light-dark(#fff0e5, #fff0e51a); + /* Chip */ + --eds-color-message-surface-raised-warning-hover: light-dark(#fff0e5, #fff0e51a); + /* Chip */ + --eds-color-message-surface-raised-error-initial: light-dark(#ffe1e0, #ffe1e01a); + /* Chip */ + --eds-color-message-surface-raised-error-hover: light-dark(#ffe1e0, #ffe1e01a); + /* Chip */ + --eds-color-message-surface-callout-info: light-dark(#d5eaf4, #045e8d); + /* Chip */ + --eds-color-message-surface-callout-success: light-dark(#d9f7e2, #15682d); + /* Chip */ + --eds-color-message-surface-callout-warning: light-dark(#ffe7d6, #7f4600); + /* Banner */ + --eds-color-message-surface-callout-error: light-dark(#ffd2d1, #90042c); + /* Banner */ + --eds-color-interactive-border-raised-resting-initial: light-dark(#dcdcdc, #435460); + /* Chip */ + --eds-color-interactive-border-raised-resting-hover: light-dark(#565656, #d6d9dc); + /* Chip */ + --eds-color-interactive-border-raised-active-initial: light-dark(#b9d7da, #1e5d78); + /* Chip */ + --eds-color-interactive-border-raised-active-hover: light-dark(#007079, #a6d6d9); + /* Chip */ + --eds-color-interactive-border-raised-disabled: light-dark(#dcdcdc, #52616d); + /* Chip */ + --eds-color-interactive-border-standard-primary-disabled: light-dark(#dcdcdc, #52616d); + /* Toggle button */ + --eds-color-interactive-border-standard-primary-resting-initial: light-dark(#6f6f6f, #a6afb5); + /* Toggle button */ + --eds-color-interactive-border-standard-primary-resting-hover: light-dark(#6f6f6f, #a6afb5); + /* Toggle button */ + --eds-color-interactive-border-standard-primary-active-initial: light-dark(#007079, #97cace); + /* Toggle button */ + --eds-color-interactive-border-standard-primary-active-hover: light-dark(#007079, #97cace); + /* Toggle button */ + --eds-color-interactive-border-standard-secondary-disabled: light-dark(#f7f7f7, #132634); + /* Sidebar link */ + --eds-color-interactive-border-standard-secondary-resting-initial: light-dark(#f7f7f7, #132634); + /* Sidebar link */ + --eds-color-interactive-border-standard-secondary-resting-hover: light-dark(#f7f7f7, #132634); + /* Sidebar link */ + --eds-color-interactive-border-standard-secondary-active-initial: light-dark(#007079, #97cace); + /* Sidebar link */ + --eds-color-interactive-border-standard-secondary-active-hover: light-dark(#004f55, #b3e2e5); + /* Sidebar link */ + --eds-color-interactive-border-standard-tertiary-disabled: light-dark(#ffffff00, #00000000); + /* Sidebar menu */ + --eds-color-interactive-border-standard-tertiary-resting-initial: light-dark(#ffffff00, #00000000); + /* Sidebar menu */ + --eds-color-interactive-border-standard-tertiary-resting-hover: light-dark(#ffffff00, #00000000); + /* Tab */ + --eds-color-interactive-border-standard-tertiary-active-initial: light-dark(#ffffff00, #00000000); + /* Sidebar menu */ + --eds-color-interactive-border-standard-tertiary-active-hover: light-dark(#ffffff00, #00000000); + /* Sidebar menu */ + --eds-color-interactive-border-standard-quaternary-disabled: light-dark(#dcdcdc, #ffffff29); + /* Tab */ + --eds-color-interactive-border-standard-quaternary-resting-initial: light-dark(#dcdcdc, #ffffff29); + /* Tab */ + --eds-color-interactive-border-standard-quaternary-resting-hover: light-dark(#bebebe, #ffffff33); + /* Tab */ + --eds-color-interactive-border-standard-quaternary-active-initial: light-dark(#007079, #97cace); + /* Tab */ + --eds-color-interactive-border-standard-quaternary-active-hover: light-dark(#004f55, #b3e2e5); + /* Tab */ + --eds-color-interactive-text-standard-primary-disabled: light-dark(#bebebe, #52616d); + /* Disabled Toggle button */ + --eds-color-interactive-text-standard-primary-resting-initial: light-dark(#6f6f6f, #a6afb5); + /* Toggle button */ + --eds-color-interactive-text-standard-primary-resting-hover: light-dark(#565656, #c2c8cc); + /* Toggle button */ + --eds-color-interactive-text-standard-primary-active-initial: light-dark(#ffffff, #000000); + /* Toggle button */ + --eds-color-interactive-text-standard-primary-active-hover: light-dark(#ffffff, #000000); + /* Toggle button */ + --eds-color-interactive-text-standard-secondary-disabled: light-dark(#bebebe, #52616d); + /* Disabled Sidebar link */ + --eds-color-interactive-text-standard-secondary-resting-initial: light-dark(#6f6f6f, #a6afb5); + /* Sidebar link */ + --eds-color-interactive-text-standard-secondary-resting-hover: light-dark(#565656, #c2c8cc); + /* Sidebar link */ + --eds-color-interactive-text-standard-secondary-active-initial: light-dark(#007079, #97cace); + /* Sidebar link */ + --eds-color-interactive-text-standard-secondary-active-hover: light-dark(#004f55, #b3e2e5); + /* Sidebar link */ + --eds-color-interactive-text-standard-tertiary-disabled: light-dark(#bebebe, #52616d); + /* Disabled Sidebar link */ + --eds-color-interactive-text-standard-tertiary-resting-initial: light-dark(#6f6f6f, #a6afb5); + /* Sidebar link */ + --eds-color-interactive-text-standard-tertiary-resting-hover: light-dark(#565656, #c2c8cc); + /* Sidebar link */ + --eds-color-interactive-text-standard-tertiary-active-initial: light-dark(#007079, #d1edef); + /* Sidebar link */ + --eds-color-interactive-text-standard-tertiary-active-hover: light-dark(#004f55, #e0f4f5); + /* Sidebar link */ + --eds-color-interactive-text-standard-quaternary-disabled: light-dark(#bebebe, #52616d); + /* Disabled Tab */ + --eds-color-interactive-text-standard-quaternary-resting-initial: light-dark(#6f6f6f, #a6afb5); + /* Tab */ + --eds-color-interactive-text-standard-quaternary-resting-hover: light-dark(#565656, #c2c8cc); + /* Tab */ + --eds-color-interactive-text-standard-quaternary-active-initial: light-dark(#007079, #97cace); + /* Tab */ + --eds-color-interactive-text-standard-quaternary-active-hover: light-dark(#004f55, #b3e2e5); + /* Tab */ + --eds-color-interactive-text-raised-disabled: light-dark(#bebebe, #52616d); + /* Chip */ + --eds-color-interactive-text-raised-resting-initial: light-dark(#565656, #c2c8cc); + /* Chip */ + --eds-color-interactive-text-raised-resting-hover: light-dark(#3d3d3d, #d6d9dc); + /* Chip */ + --eds-color-interactive-text-raised-active-initial: light-dark(#007079, #b3e2e5); + /* Chip */ + --eds-color-interactive-text-raised-active-hover: light-dark(#004f55, #d1edef); + /* Chip */ + --eds-color-interactive-icon-standard-secondary-resting-initial: light-dark(#6f6f6f, #a6afb5); + /* Sidebar link */ + --eds-color-interactive-icon-standard-secondary-resting-hover: light-dark(#565656, #c2c8cc); + /* Sidebar link */ + --eds-color-interactive-icon-standard-secondary-active-initial: light-dark(#007079, #97cace); + /* Sidebar link */ + --eds-color-interactive-icon-standard-secondary-active-hover: light-dark(#004f55, #b3e2e5); + /* Sidebar link */ + --eds-color-interactive-icon-standard-secondary-disabled: light-dark(#bebebe, #52616d); + /* Sidebar link */ + --eds-color-interactive-icon-standard-primary-disabled: light-dark(#bebebe, #52616d); + /* Disabled Toggle button */ + --eds-color-interactive-icon-standard-primary-resting-initial: light-dark(#6f6f6f, #a6afb5); + /* Toggle button */ + --eds-color-interactive-icon-standard-primary-resting-hover: light-dark(#6f6f6f, #a6afb5); + /* Toggle button */ + --eds-color-interactive-icon-standard-primary-active-initial: light-dark(#ffffff, #000000); + /* Toggle button */ + --eds-color-interactive-icon-standard-primary-active-hover: light-dark(#ffffff, #000000); + /* Toggle button */ + --eds-color-interactive-icon-standard-tertiary-resting-initial: light-dark(#6f6f6f, #a6afb5); + /* Sidebar menu */ + --eds-color-interactive-icon-standard-tertiary-resting-hover: light-dark(#565656, #c2c8cc); + /* Sidebar menu */ + --eds-color-interactive-icon-standard-tertiary-disabled: light-dark(#bebebe, #52616d); + /* Sidebar menu */ + --eds-color-interactive-icon-standard-tertiary-active-initial: light-dark(#007079, #d1edef); + /* Sidebar menu */ + --eds-color-interactive-icon-standard-tertiary-active-hover: light-dark(#004f55, #e0f4f5); + /* Sidebar menu */ + --eds-color-interactive-icon-standard-quaternary-disabled: light-dark(#bebebe, #52616d); + /* Disabled Toggle button */ + --eds-color-interactive-icon-standard-quaternary-resting-initial: light-dark(#6f6f6f, #a6afb5); + /* Toggle button */ + --eds-color-interactive-icon-standard-quaternary-resting-hover: light-dark(#565656, #c2c8cc); + /* Toggle button */ + --eds-color-interactive-icon-standard-quaternary-active-initial: light-dark(#007079, #97cace); + /* Toggle button */ + --eds-color-interactive-icon-standard-quaternary-active-hover: light-dark(#004f55, #c9e0e2); + /* Toggle button */ + --eds-color-interactive-icon-raised-disabled: light-dark(#bebebe, #52616d); + /* Chip */ + --eds-color-interactive-icon-raised-resting-initial: light-dark(#565656, #c2c8cc); + /* Chip */ + --eds-color-interactive-icon-raised-resting-hover: light-dark(#3d3d3d, #d6d9dc); + /* Chip */ + --eds-color-interactive-icon-raised-active-initial: light-dark(#007079, #b3e2e5); + /* Chip */ + --eds-color-interactive-icon-raised-active-hover: light-dark(#004f55, #d1edef); + /* Chip */ + --eds-color-interactive-surface-standard-primary-disabled-outline: light-dark(#ffffff00, #00000000); + /* Toggle button */ + --eds-color-interactive-surface-standard-primary-disabled-filled: light-dark(#eaeaea, #2e3f4c); + /* Toggle button */ + --eds-color-interactive-surface-standard-primary-resting-initial: light-dark(#ffffff00, #00000000); + /* Toggle button */ + --eds-color-interactive-surface-standard-primary-resting-hover: light-dark(#dcdcdc, #344c5b); + /* Toggle button */ + --eds-color-interactive-surface-standard-primary-active-initial: light-dark(#007079, #97cace); + /* Toggle button */ + --eds-color-interactive-surface-standard-primary-active-hover: light-dark(#004f55, #b3e2e5); + /* Toggle button */ + --eds-color-interactive-surface-standard-secondary-disabled: light-dark(#ffffff00, #00000000); + /* Sidebar menu */ + --eds-color-interactive-surface-standard-secondary-resting-initial: light-dark(#ffffff00, #00000000); + /* Sidebar menu */ + --eds-color-interactive-surface-standard-secondary-resting-hover: light-dark(#dcdcdc, #344c5b); + /* Sidebar menu */ + --eds-color-interactive-surface-standard-secondary-active-initial: light-dark(#deedee, #1e5d78); + /* Sidebar menu */ + --eds-color-interactive-surface-standard-secondary-active-hover: light-dark(#c9e0e2, #257193); + /* Sidebar menu */ + --eds-color-interactive-surface-standard-tertiary-disabled: light-dark(#ffffff00, #00000000); + /* Sidebar link */ + --eds-color-interactive-surface-standard-tertiary-resting-initial: light-dark(#ffffff00, #00000000); + /* Sidebar link */ + --eds-color-interactive-surface-standard-tertiary-resting-hover: light-dark(#dcdcdc, #344c5b); + /* Sidebar link */ + --eds-color-interactive-surface-standard-tertiary-active-initial: light-dark(#deedee, #1e5d78); + /* Sidebar link */ + --eds-color-interactive-surface-standard-tertiary-active-hover: light-dark(#c9e0e2, #257193); + /* Sidebar link */ + --eds-color-interactive-surface-standard-quaternary-disabled: light-dark(#ffffff00, #00000000); + /* Tab */ + --eds-color-interactive-surface-standard-quaternary-resting-initial: light-dark(#ffffff00, #00000000); + /* Tab */ + --eds-color-interactive-surface-standard-quaternary-resting-hover: light-dark(#dcdcdc, #344c5b); + /* Tab */ + --eds-color-interactive-surface-standard-quaternary-active-initial: light-dark(#ffffff00, #00000000); + /* Tab */ + --eds-color-interactive-surface-standard-quaternary-active-hover: light-dark(#c9e0e2, #1e5d78); + /* Sidebar link */ + --eds-color-interactive-surface-raised-disabled: light-dark(#eaeaea, #2e3f4c66); + /* Interactive Chip (disabled) */ + --eds-color-interactive-surface-raised-resting-initial: light-dark(#eaeaea, #eaeaea1a); + /* Interactive Chip */ + --eds-color-interactive-surface-raised-resting-hover: light-dark(#eaeaea, #eaeaea1a); + /* Interactive Chip */ + --eds-color-interactive-surface-raised-active-initial: light-dark(#e6f3f4, #2a587480); + /* Interactive Chip */ + --eds-color-interactive-surface-raised-active-hover: light-dark(#e6f3f4, #2a587480); + /* Interactive Chip */ + --eds-color-static-text-standard: light-dark(#3d3d3d, #e9ebed); + --eds-color-static-text-raised: light-dark(#007079, #b3e2e5); + --eds-color-static-text-callout: light-dark(#3d3d3d, #ffffff); + --eds-color-static-icon-standard: light-dark(#007079, #a8cfd1); + --eds-color-static-icon-raised: light-dark(#007079, #b3e2e5); + --eds-color-static-icon-callout: light-dark(#007079, #a8cfd1); + --eds-color-static-border-standard-on-level-1: light-dark(#ffffff, #243746); + --eds-color-static-border-standard-on-level-2: light-dark(#ffffff, #243746); + --eds-color-static-border-standard-on-level-3: light-dark(#ffffff, #2c4251); + --eds-color-static-border-raised: light-dark(#dcdcdc, #435460); + --eds-color-static-border-callout: light-dark(#ffffff, #2c4251); + --eds-color-static-surface-standard-on-level-1: light-dark(#ffffff, #243746); + --eds-color-static-surface-standard-on-level-2: light-dark(#ffffff, #243746); + --eds-color-static-surface-standard-on-level-3: light-dark(#ffffff, #2c4251); + --eds-color-static-surface-raised: light-dark(#eaeaea, #eaeaea1a); + --eds-color-static-surface-callout: light-dark(#ffffff, #2c4251); + --eds-input-asterix-color-text: #e20337; + /* Autocomplete, Text field */ + --eds-input-placeholder-color-text: light-dark(#8c8c8c, #828f99); + /* Autocomplete, Table input, Search, Text field */ + --eds-input-helper-color-text-initial: light-dark(#6f6f6f, #a6afb5); + /* Autocomplete, Table input, Text field */ + --eds-input-helper-color-text-disabled: light-dark(#bebebe, #52616d); + /* Autocomplete, Table input, Search, Text field */ + --eds-input-helper-color-icon-initial: light-dark(#6f6f6f, #a6afb5); + /* Autocomplete, Table input, Text field */ + --eds-input-helper-color-icon-disabled: light-dark(#bebebe, #52616d); + /* Autocomplete, Table input, Search, Text field */ + --eds-input-color-text-initial: light-dark(#565656, #c2c8cc); + /* Autocomplete, Table input, Text field */ + --eds-input-color-text-focus: light-dark(#3d3d3d, #ffffff); + /* Autocomplete, Table input, Search, Text field */ + --eds-input-color-text-disabled: light-dark(#bebebe, #52616d); + /* Autocomplete, Table input, Search, Text field */ + --eds-input-color-icon-initial: light-dark(#565656, #c2c8cc); + /* Autocomplete, Table input, Text field */ + --eds-input-color-icon-focus: light-dark(#3d3d3d, #ffffff); + /* Autocomplete, Table input, Search, Text field */ + --eds-input-color-icon-disabled: light-dark(#bebebe, #52616d); + /* Autocomplete, Table input, Search, Text field */ + --eds-input-color-border-initial: light-dark(#b3b3b3, #ffffff29); + /* Autocomplete, Text field */ + --eds-input-color-border-focus: light-dark(#007079, #97cace); + /* Autocomplete, Search, Text field */ + --eds-input-color-border-disabled: light-dark(#ffffff00, #00000000); + /* Autocomplete, Search, Text field */ + --eds-input-color-surface-initial-on-level-1: light-dark(#ffffff, #00000047); + /* Autocomplete, Search, Table input, Text field input */ + --eds-input-color-surface-initial-on-level-2: light-dark(#f7f7f7, #00000047); + /* Autocomplete, Search, Table input, Text field input */ + --eds-input-color-surface-initial-on-level-3: light-dark(#f7f7f7, #00000047); + --eds-input-color-surface-disabled-on-level-1: light-dark(#ffffff, #00000047); + /* Autocomplete, Search, Table input, Text field input */ + --eds-input-color-surface-disabled-on-level-2: light-dark(#f7f7f7, #00000047); + /* Autocomplete, Search, Table input, Text field input */ + --eds-input-color-surface-disabled-on-level-3: light-dark(#f7f7f7, #00000047); + --eds-input-color-surface-read-only-on-level-1: light-dark(#ffffff00, #00000000); + --eds-input-color-surface-read-only-on-level-2: light-dark(#ffffff00, #00000000); + --eds-input-color-surface-read-only-on-level-3: light-dark(#ffffff00, #00000000); + --eds-input-color-message-border-success-initial: #3fa13d; + /* Text field */ + --eds-input-color-message-border-success-focus: light-dark(#15682d, #7bcf78); + /* Text field */ + --eds-input-color-message-border-warning-initial: #e57e00; + /* Text field */ + --eds-input-color-message-border-warning-focus: light-dark(#7f4600, #ffae74); + /* Text field */ + --eds-input-color-message-border-error-initial: #e20337; + /* Text field */ + --eds-input-color-message-border-error-focus: light-dark(#90042c, #ff8a8a); + /* Text field */ + --eds-input-color-message-icon-success-initial: #3fa13d; + /* Text field */ + --eds-input-color-message-icon-success-focus: light-dark(#15682d, #7bcf78); + /* Text field */ + --eds-input-color-message-icon-warning-initial: #e57e00; + /* Text field */ + --eds-input-color-message-icon-warning-focus: light-dark(#7f4600, #ffae74); + /* Text field */ + --eds-input-color-message-icon-error-initial: #e20337; + /* Text field */ + --eds-input-color-message-icon-error-focus: light-dark(#90042c, #ff8a8a); + /* Text field */ + --eds-input-color-message-text-success-initial: #3fa13d; + /* Text field */ + --eds-input-color-message-text-success-focus: light-dark(#15682d, #7bcf78); + /* Text field */ + --eds-input-color-message-text-warning-initial: #e57e00; + /* Text field */ + --eds-input-color-message-text-warning-focus: light-dark(#7f4600, #ffae74); + /* Text field */ + --eds-input-color-message-text-error-initial: #e20337; + /* Text field */ + --eds-input-color-message-text-error-focus: light-dark(#90042c, #ff8a8a); + /* Text field */ + --eds-input-label-color-text-initial: light-dark(#6f6f6f, #a6afb5); + --eds-input-label-color-text-disabled: light-dark(#bebebe, #52616d); + --eds-input-label-color-icon-initial: light-dark(#6f6f6f, #a6afb5); + --eds-input-label-color-icon-disabled: light-dark(#bebebe, #52616d); + --eds-table-cell-color-message-surface-error: light-dark(#ffd2d1, #ff666b47); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-text-disabled: light-dark(#bebebe, #52616d); + --eds-table-cell-color-interactive-text-resting-initial-on-level-1: light-dark(#3d3d3d, #d6d9dc); + --eds-table-cell-color-interactive-text-resting-initial-on-level-2: light-dark(#3d3d3d, #d6d9dc); + --eds-table-cell-color-interactive-text-resting-initial-on-level-3: light-dark(#3d3d3d, #d6d9dc); + --eds-table-cell-color-interactive-text-resting-hover-on-level-1: light-dark(#1f1f1f, #e9ebed); + --eds-table-cell-color-interactive-text-resting-hover-on-level-2: light-dark(#1f1f1f, #e9ebed); + --eds-table-cell-color-interactive-text-resting-hover-on-level-3: light-dark(#1f1f1f, #e9ebed); + --eds-table-cell-color-interactive-text-active-initial-on-level-1: light-dark(#3d3d3d, #d6d9dc); + /* Interactive table cell, table data grid cell */ + --eds-table-cell-color-interactive-text-active-initial-on-level-2: light-dark(#3d3d3d, #d6d9dc); + /* Interactive table cell, table data grid cell */ + --eds-table-cell-color-interactive-text-active-initial-on-level-3: light-dark(#3d3d3d, #d6d9dc); + /* Interactive table cell, table data grid cell */ + --eds-table-cell-color-interactive-text-active-hover-on-level-1: light-dark(#1f1f1f, #e9ebed); + /* Interactive table cell, data grid cell */ + --eds-table-cell-color-interactive-text-active-hover-on-level-2: light-dark(#1f1f1f, #e9ebed); + /* Interactive table cell, data grid cell */ + --eds-table-cell-color-interactive-text-active-hover-on-level-3: light-dark(#1f1f1f, #e9ebed); + /* Interactive table cell, data grid cell */ + --eds-table-cell-color-interactive-icon-disabled: light-dark(#bebebe, #52616d); + --eds-table-cell-color-interactive-icon-resting-initial-on-level-1: light-dark(#6f6f6f, #a6afb5); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-resting-initial-on-level-2: light-dark(#6f6f6f, #a6afb5); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-resting-initial-on-level-3: light-dark(#565656, #c2c8cc); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-resting-hover-on-level-1: light-dark(#1f1f1f, #e9ebed); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-resting-hover-on-level-2: light-dark(#1f1f1f, #e9ebed); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-resting-hover-on-level-3: light-dark(#1f1f1f, #e9ebed); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-active-initial-on-level-1: light-dark(#007079, #97cace); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-active-initial-on-level-2: light-dark(#007079, #97cace); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-active-initial-on-level-3: light-dark(#007079, #d1edef); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-active-hover-on-level-1: light-dark(#004f55, #b3e2e5); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-active-hover-on-level-2: light-dark(#004f55, #b3e2e5); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-icon-active-hover-on-level-3: light-dark(#004f55, #e0f4f5); + /* Table cell, Table data grid cell, Table header, Table data grid header */ + --eds-table-cell-color-interactive-border-disabled: light-dark(#dcdcdc, #ffffff29); + /* Border on Table cell doesn't change from Initial state, only the text & the icon. */ + --eds-table-cell-color-interactive-border-resting-initial-on-level-1: light-dark(#dcdcdc, #ffffff29); + --eds-table-cell-color-interactive-border-resting-initial-on-level-2: light-dark(#dcdcdc, #ffffff29); + --eds-table-cell-color-interactive-border-resting-initial-on-level-3: light-dark(#dcdcdc, #ffffff29); + --eds-table-cell-color-interactive-border-resting-hover-on-level-1: light-dark(#bebebe, #ffffff33); + --eds-table-cell-color-interactive-border-resting-hover-on-level-2: light-dark(#bebebe, #ffffff33); + --eds-table-cell-color-interactive-border-resting-hover-on-level-3: light-dark(#bebebe, #ffffff33); + --eds-table-cell-color-interactive-border-active-initial-on-level-1: light-dark(#dcdcdc, #ffffff29); + --eds-table-cell-color-interactive-border-active-initial-on-level-2: light-dark(#dcdcdc, #ffffff29); + --eds-table-cell-color-interactive-border-active-initial-on-level-3: light-dark(#dcdcdc, #ffffff29); + --eds-table-cell-color-interactive-border-active-hover-on-level-1: light-dark(#bebebe, #ffffff33); + --eds-table-cell-color-interactive-border-active-hover-on-level-2: light-dark(#bebebe, #ffffff33); + --eds-table-cell-color-interactive-border-active-hover-on-level-3: light-dark(#bebebe, #ffffff33); + --eds-table-cell-color-interactive-surface-resting-initial-on-level-1: light-dark(#ffffff00, #00000000); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-resting-initial-on-level-2: light-dark(#ffffff00, #00000000); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-resting-initial-on-level-3: light-dark(#ffffff00, #00000000); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-resting-hover-on-level-1: light-dark(#dcdcdc, #344c5b); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-resting-hover-on-level-2: light-dark(#dcdcdc, #344c5b); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-resting-hover-on-level-3: light-dark(#dcdcdc, #344c5b); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-disabled: light-dark(#ffffff00, #00000000); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-active-initial-on-level-1: light-dark(#deedee, #17485d); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-active-initial-on-level-2: light-dark(#deedee, #17485d); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-active-initial-on-level-3: light-dark(#deedee, #1e5d78); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-active-hover-on-level-1: light-dark(#c9e0e2, #1e5d78); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-active-hover-on-level-2: light-dark(#c9e0e2, #1e5d78); + /* Table cell, Table data grid cell */ + --eds-table-cell-color-interactive-surface-active-hover-on-level-3: light-dark(#c9e0e2, #257193); + /* Table cell, Table data grid cell */ + --eds-table-header-color-interactive-border-disabled: light-dark(#dcdcdc, #ffffff29); + --eds-table-header-color-interactive-border-active-initial-on-level-1: light-dark(#007079, #97cace); + --eds-table-header-color-interactive-border-active-initial-on-level-2: light-dark(#007079, #97cace); + --eds-table-header-color-interactive-border-active-initial-on-level-3: light-dark(#007079, #b3e2e5); + --eds-table-header-color-interactive-border-active-hover-on-level-1: light-dark(#004f55, #b3e2e5); + --eds-table-header-color-interactive-border-active-hover-on-level-2: light-dark(#004f55, #b3e2e5); + --eds-table-header-color-interactive-border-active-hover-on-level-3: light-dark(#004f55, #d1edef); + --eds-table-header-color-interactive-border-resting-initial-on-level-1: light-dark(#dcdcdc, #ffffff29); + --eds-table-header-color-interactive-border-resting-initial-on-level-2: light-dark(#dcdcdc, #ffffff29); + --eds-table-header-color-interactive-border-resting-initial-on-level-3: light-dark(#dcdcdc, #ffffff29); + --eds-table-header-color-interactive-border-resting-hover-on-level-1: light-dark(#bebebe, #ffffff33); + --eds-table-header-color-interactive-border-resting-hover-on-level-2: light-dark(#bebebe, #ffffff33); + --eds-table-header-color-interactive-border-resting-hover-on-level-3: light-dark(#bebebe, #ffffff33); + --eds-table-header-color-interactive-surface-resting-initial-on-level-1: light-dark(#ffffff, #243746); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-resting-initial-on-level-2: light-dark(#ffffff, #243746); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-resting-initial-on-level-3: light-dark(#f7f7f7, #2c4251); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-resting-hover-on-level-1: light-dark(#dcdcdc, #344c5b); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-resting-hover-on-level-2: light-dark(#dcdcdc, #344c5b); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-resting-hover-on-level-3: light-dark(#dcdcdc, #3f5664); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-active-initial-on-level-1: light-dark(#eaeaea, #2c4251); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-active-initial-on-level-2: light-dark(#eaeaea, #2c4251); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-active-initial-on-level-3: light-dark(#eaeaea, #344c5b); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-active-hover-on-level-1: light-dark(#dcdcdc, #344c5b); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-active-hover-on-level-2: light-dark(#dcdcdc, #344c5b); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-active-hover-on-level-3: light-dark(#dcdcdc, #3f5664); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-disabled-on-level-1: light-dark(#ffffff, #243746); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-disabled-on-level-2: light-dark(#ffffff, #243746); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-surface-disabled-on-level-3: light-dark(#f7f7f7, #2c4251); + /* Table header, Table data grid header */ + --eds-table-header-color-interactive-text-resting-initial-on-level-1: light-dark(#3d3d3d, #d6d9dc); + --eds-table-header-color-interactive-text-resting-initial-on-level-2: light-dark(#3d3d3d, #d6d9dc); + --eds-table-header-color-interactive-text-resting-initial-on-level-3: light-dark(#3d3d3d, #ffffff); + --eds-table-header-color-interactive-text-resting-hover-on-level-1: light-dark(#3d3d3d, #d6d9dc); + --eds-table-header-color-interactive-text-resting-hover-on-level-2: light-dark(#3d3d3d, #d6d9dc); + --eds-table-header-color-interactive-text-resting-hover-on-level-3: light-dark(#3d3d3d, #ffffff); + --eds-table-header-color-interactive-text-active-initial-on-level-1: light-dark(#007079, #97cace); + --eds-table-header-color-interactive-text-active-initial-on-level-2: light-dark(#007079, #97cace); + --eds-table-header-color-interactive-text-active-initial-on-level-3: light-dark(#007079, #b3e2e5); + --eds-table-header-color-interactive-text-active-hover-on-level-1: light-dark(#004f55, #b3e2e5); + --eds-table-header-color-interactive-text-active-hover-on-level-2: light-dark(#004f55, #b3e2e5); + --eds-table-header-color-interactive-text-active-hover-on-level-3: light-dark(#004f55, #d1edef); + --eds-table-header-color-interactive-icon-resting-initial-on-level-1: light-dark(#6f6f6f, #a6afb5); + --eds-table-header-color-interactive-icon-resting-initial-on-level-2: light-dark(#6f6f6f, #a6afb5); + --eds-table-header-color-interactive-icon-resting-initial-on-level-3: light-dark(#3d3d3d, #ffffff); + --eds-table-header-color-interactive-icon-resting-hover-on-level-1: light-dark(#3d3d3d, #d6d9dc); + --eds-table-header-color-interactive-icon-resting-hover-on-level-2: light-dark(#3d3d3d, #d6d9dc); + --eds-table-header-color-interactive-icon-resting-hover-on-level-3: light-dark(#3d3d3d, #ffffff); + --eds-table-header-color-interactive-icon-active-initial-on-level-1: light-dark(#007079, #97cace); + --eds-table-header-color-interactive-icon-active-initial-on-level-2: light-dark(#007079, #97cace); + --eds-table-header-color-interactive-icon-active-initial-on-level-3: light-dark(#007079, #b3e2e5); + --eds-table-header-color-interactive-icon-active-hover-on-level-1: light-dark(#004f55, #b3e2e5); + --eds-table-header-color-interactive-icon-active-hover-on-level-2: light-dark(#004f55, #b3e2e5); + --eds-table-header-color-interactive-icon-active-hover-on-level-3: light-dark(#004f55, #d1edef); + --eds-ui-scrim-color-surface: light-dark(#00000066, #00000066); + /* Scrim */ + --eds-ui-shell-color-surface: light-dark(#ffffff, #243746); + /* Sidebar, Side sheet, Toolbar, Top bar */ + --eds-ui-shell-color-border: light-dark(#f7f7f7, #132634); + /* Sidebar, Topbar, Side sheet */ + --eds-ui-main-color-surface: light-dark(#f7f7f7, #132634); + /* Recommended background color for EDS applications */ +} \ No newline at end of file diff --git a/packages/eds-tokens/package.json b/packages/eds-tokens/package.json index d0c049be78..3b66f5c35c 100644 --- a/packages/eds-tokens/package.json +++ b/packages/eds-tokens/package.json @@ -12,6 +12,7 @@ }, "./tokens.css": "./tokens.css", "./elements.css": "./elements.css", + "./legacy-colors-override.css": "./legacy-colors-override.css", "./css/variables.css": "./build/css/variables-trimmed.min.css", "./css/variables-verbose.css": "./build/css/variables-verbose.min.css", "./css/color/primitives.css": "./build/css/color/primitives-trimmed.css", From 66459a482d3798c07ff35ba53479812339a265d4 Mon Sep 17 00:00:00 2001 From: oddvernes Date: Fri, 12 Jul 2024 13:05:04 +0200 Subject: [PATCH 7/7] remove comments --- .../build/css/color/colors-trimmed-backup.css | 351 ------------------ 1 file changed, 351 deletions(-) diff --git a/packages/eds-tokens/build/css/color/colors-trimmed-backup.css b/packages/eds-tokens/build/css/color/colors-trimmed-backup.css index 3b9a3b1ff6..2306b32157 100644 --- a/packages/eds-tokens/build/css/color/colors-trimmed-backup.css +++ b/packages/eds-tokens/build/css/color/colors-trimmed-backup.css @@ -4,154 +4,86 @@ :root { --eds-color-shadow: light-dark(#00000024, #00000024); - /* For use in box shadows */ --eds-color-text-primary: light-dark(#3d3d3d, #d6d9dc); - /* Dialog title, Popover title, Side sheet title, Title */ --eds-color-text-secondary: light-dark(#565656, #c2c8cc); - /* Application name, Dialog body text, Popover body text */ --eds-color-text-tertiary: light-dark(#6f6f6f, #a6afb5); --eds-color-text-quaternary: light-dark(#9e9e9e, #64727d); --eds-color-text-maximal: light-dark(#3d3d3d, #ffffff); - /* For titles and high-contrast headers */ --eds-color-text-disabled: light-dark(#bebebe, #52616d); - /* simple semantic text color. Covers: Menu item, Tab, Table cell, Table data grid cell, Table header, Table data grid header */ --eds-color-text-inverted: light-dark(#ffffff, #000000); - /* Button, Toggle button */ --eds-color-icon-primary: light-dark(#3d3d3d, #d6d9dc); --eds-color-icon-secondary: light-dark(#565656, #c2c8cc); --eds-color-icon-tertiary: light-dark(#6f6f6f, #a6afb5); --eds-color-icon-quaternary: light-dark(#9e9e9e, #64727d); --eds-color-icon-disabled: light-dark(#bebebe, #52616d); - /* simple semantic color for disabled icons. Covers: Autocomplete, Menu item (Menu & Sidebar) Search, Tab, Table header, Table header data grid, Table cell, Table data grid cell, Text field, Top bar */ --eds-color-icon-inverted: light-dark(#ffffff, #000000); - /* Button, Toggle button */ --eds-color-border-primary: light-dark(#dcdcdc, #ffffff29); - /* Dialog, Popover */ --eds-color-border-secondary: light-dark(#bebebe, #ffffff33); --eds-color-border-tertiary: light-dark(#9e9e9e, #ffffff4d); --eds-color-border-quaternary: light-dark(#6f6f6f, #ffffff66); --eds-color-border-disabled: light-dark(#dcdcdc, #435460); - /* simple semantic disabled colour for borders. Covers: Menu item, Tab, Table cell, Table data grid cell, Table header, Table header data grid */ --eds-color-border-none: light-dark(#ffffff00, #00000000); --eds-color-surface-level-1: light-dark(#f7f7f7, #132634); - /* level 1 surface (UI main) */ --eds-color-surface-level-2: light-dark(#ffffff, #243746); - /* Card, Dialog */ --eds-color-surface-level-3: light-dark(#ffffff, #2c4251); - /* Card, Menu, Popover */ --eds-color-surface-none: light-dark(#ffffff00, #00000000); - /* transparent */ --eds-color-surface-inverted: light-dark(#000000cc, #dcf2fff2); - /* Snackbar, Tooltip */ --eds-color-action-text-primary-disabled: light-dark(#bebebe, #616161); - /* Button */ --eds-color-action-text-primary-default-initial: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-text-primary-default-hover: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-text-primary-muted-initial: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-text-primary-muted-hover: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-text-primary-danger-initial: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-text-primary-danger-hover: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-text-secondary-disabled: light-dark(#bebebe, #52616d); - /* Button */ --eds-color-action-text-secondary-default-initial: light-dark(#007079, #97cace); - /* Button */ --eds-color-action-text-secondary-default-hover: light-dark(#004f55, #b3e2e5); - /* Button, Toggle button */ --eds-color-action-text-secondary-muted-initial: light-dark(#6f6f6f, #a6afb5); - /* Button */ --eds-color-action-text-secondary-muted-hover: light-dark(#565656, #c2c8cc); - /* Button */ --eds-color-action-text-secondary-danger-initial: light-dark(#e20337, #ff666b); - /* Button */ --eds-color-action-text-secondary-danger-hover: light-dark(#90042c, #ffabab); - /* Button */ --eds-color-action-text-tertiary-disabled: light-dark(#bebebe, #52616d); - /* Button */ --eds-color-action-text-tertiary-default-initial: light-dark(#007079, #97cace); - /* Button */ --eds-color-action-text-tertiary-default-hover: light-dark(#004f55, #b3e2e5); - /* Button, Toggle button */ --eds-color-action-text-tertiary-muted-initial: light-dark(#6f6f6f, #a6afb5); - /* Button */ --eds-color-action-text-tertiary-muted-hover: light-dark(#565656, #c2c8cc); - /* Button */ --eds-color-action-text-tertiary-danger-initial: light-dark(#e20337, #ff666b); - /* Button */ --eds-color-action-text-tertiary-danger-hover: light-dark(#90042c, #ffabab); - /* Button */ --eds-color-action-icon-primary-disabled: light-dark(#bebebe, #52616d); --eds-color-action-icon-primary-default-initial: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-icon-primary-default-hover: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-icon-primary-muted-initial: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-icon-primary-muted-hover: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-icon-primary-danger-initial: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-icon-primary-danger-hover: light-dark(#ffffff, #000000); - /* Button */ --eds-color-action-icon-secondary-disabled: light-dark(#bebebe, #52616d); --eds-color-action-icon-secondary-default-initial: light-dark(#007079, #97cace); - /* Button */ --eds-color-action-icon-secondary-default-hover: light-dark(#004f55, #b3e2e5); - /* Button */ --eds-color-action-icon-secondary-muted-initial: light-dark(#6f6f6f, #a6afb5); - /* Button */ --eds-color-action-icon-secondary-muted-hover: light-dark(#565656, #c2c8cc); - /* Button */ --eds-color-action-icon-secondary-danger-initial: light-dark(#e20337, #ff666b); - /* Button */ --eds-color-action-icon-secondary-danger-hover: light-dark(#90042c, #ffabab); - /* Button */ --eds-color-action-icon-tertiary-disabled: light-dark(#bebebe, #52616d); --eds-color-action-icon-tertiary-default-initial: light-dark(#007079, #97cace); - /* Button */ --eds-color-action-icon-tertiary-default-hover: light-dark(#004f55, #b3e2e5); - /* Button */ --eds-color-action-icon-tertiary-muted-initial: light-dark(#6f6f6f, #a6afb5); - /* Button */ --eds-color-action-icon-tertiary-muted-hover: light-dark(#565656, #c2c8cc); - /* Button */ --eds-color-action-icon-tertiary-danger-initial: light-dark(#e20337, #ff666b); - /* Button */ --eds-color-action-icon-tertiary-danger-hover: light-dark(#90042c, #ffabab); - /* Button */ --eds-color-action-border-primary-disabled: light-dark(#eaeaea, #2e3f4c); - /* Button */ --eds-color-action-border-primary-default-initial: light-dark(#007079, #97cace); - /* Button, Toggle button */ --eds-color-action-border-primary-default-hover: light-dark(#004f55, #b3e2e5); - /* Button, Toggle button */ --eds-color-action-border-primary-muted-initial: light-dark(#6f6f6f, #a6afb5); - /* Button */ --eds-color-action-border-primary-muted-hover: light-dark(#565656, #c2c8cc); - /* Button */ --eds-color-action-border-primary-danger-initial: light-dark(#e20337, #ff666b); - /* Button */ --eds-color-action-border-primary-danger-hover: light-dark(#90042c, #ffabab); - /* Button */ --eds-color-action-border-secondary-disabled: light-dark(#cfcfcf, light-dark(#dcdcdc, #435460)); - /* Button */ --eds-color-action-border-secondary-default-initial: light-dark(#007079, #97cace); - /* Button, Toggle button */ --eds-color-action-border-secondary-default-hover: light-dark(#004f55, #b3e2e5); - /* Button, Toggle button */ --eds-color-action-border-secondary-muted-initial: light-dark(#6f6f6f, #a6afb5); - /* Button */ --eds-color-action-border-secondary-muted-hover: light-dark(#565656, #c2c8cc); - /* Button */ --eds-color-action-border-secondary-danger-initial: light-dark(#e20337, #ff666b); - /* Button */ --eds-color-action-border-secondary-danger-hover: light-dark(#90042c, #ffabab); - /* Button */ --eds-color-action-border-tertiary-disabled: light-dark(#ffffff00, #00000000); --eds-color-action-border-tertiary-default-initial: light-dark(#ffffff00, #00000000); --eds-color-action-border-tertiary-default-hover: light-dark(#ffffff00, #00000000); @@ -160,393 +92,199 @@ --eds-color-action-border-tertiary-danger-initial: light-dark(#ffffff00, #00000000); --eds-color-action-border-tertiary-danger-hover: light-dark(#ffffff00, #00000000); --eds-color-action-surface-primary-disabled: light-dark(#eaeaea, #2e3f4c); - /* Button */ --eds-color-action-surface-primary-default-initial: light-dark(#007079, #97cace); - /* Button, Toggle button */ --eds-color-action-surface-primary-default-hover: light-dark(#004f55, #b3e2e5); - /* Button, Toggle button */ --eds-color-action-surface-primary-muted-initial: light-dark(#6f6f6f, #a6afb5); - /* Button */ --eds-color-action-surface-primary-muted-hover: light-dark(#565656, #c2c8cc); - /* Button */ --eds-color-action-surface-primary-danger-initial: light-dark(#e20337, #ff666b); - /* Button */ --eds-color-action-surface-primary-danger-hover: light-dark(#90042c, #ffabab); - /* Button */ --eds-color-action-surface-secondary-disabled: light-dark(#ffffff00, #00000000); - /* Button */ --eds-color-action-surface-secondary-default-initial: light-dark(#ffffff00, #00000000); - /* Button, Ghost button, Toggle button */ --eds-color-action-surface-secondary-default-hover: light-dark(#deedee, #033235); - /* Button, Ghost button, Toggle button */ --eds-color-action-surface-secondary-muted-initial: light-dark(#ffffff00, #00000000); - /* Button */ --eds-color-action-surface-secondary-muted-hover: light-dark(#dcdcdc, #344c5b); - /* Button */ --eds-color-action-surface-secondary-danger-initial: light-dark(#ffffff00, #00000000); - /* Button */ --eds-color-action-surface-secondary-danger-hover: light-dark(#ffd2d1, #500017); - /* Button */ --eds-color-action-surface-tertiary-disabled: light-dark(#ffffff00, #00000000); - /* Button */ --eds-color-action-surface-tertiary-default-initial: light-dark(#ffffff00, #00000000); - /* Button, Ghost button, Toggle button */ --eds-color-action-surface-tertiary-default-hover: light-dark(#deedee, #033235); - /* Button, Ghost button, Toggle button */ --eds-color-action-surface-tertiary-muted-initial: light-dark(#ffffff00, #00000000); - /* Button */ --eds-color-action-surface-tertiary-muted-hover: light-dark(#dcdcdc, #344c5b); - /* Button */ --eds-color-action-surface-tertiary-danger-initial: light-dark(#ffffff00, #00000000); - /* Button */ --eds-color-action-surface-tertiary-danger-hover: light-dark(#ffd2d1, #500017); - /* Button */ --eds-color-message-text-standard-info: light-dark(#045e8d, #6fc9fb); - /* Deprecated - Card. Use text/message. */ --eds-color-message-text-standard-success: light-dark(#15682d, #7bcf78); - /* Deprecated - Card. Use text/message. */ --eds-color-message-text-standard-warning: light-dark(#7f4600, #ffae74); - /* Deprecated - Card. Use text/message. */ --eds-color-message-text-standard-error: light-dark(#90042c, #ff8a8a); - /* Deprecated - Card. Use text/message. */ --eds-color-message-text-raised-info-initial: light-dark(#045e8d, #6fc9fb); - /* Chip, Card, input helper */ --eds-color-message-text-raised-info-hover: light-dark(#034187, #aee1fd); - /* Chip */ --eds-color-message-text-raised-success-initial: light-dark(#15682d, #7bcf78); - /* Chip, Card, input helper */ --eds-color-message-text-raised-success-hover: light-dark(#204f1f, #cceecb); - /* Chip */ --eds-color-message-text-raised-warning-initial: light-dark(#7f4600, #ffae74); - /* Chip, Card, input helper */ --eds-color-message-text-raised-warning-hover: light-dark(#643700, #ffd9bd); - /* Chip */ --eds-color-message-text-raised-error-initial: light-dark(#90042c, #ff8a8a); - /* Chip, Card, input helper */ --eds-color-message-text-raised-error-hover: light-dark(#700020, #ffabab); - /* Chip */ --eds-color-message-text-callout-info: light-dark(#045e8d, #dfeff7); - /* Banner */ --eds-color-message-text-callout-success: light-dark(#15682d, #d9f7e2); - /* Banner */ --eds-color-message-text-callout-warning: light-dark(#7f4600, #ffe7d6); - /* Banner */ --eds-color-message-text-callout-error: light-dark(#90042c, #ffe1e0); - /* Banner */ --eds-color-message-icon-standard-info: light-dark(#045e8d, #6fc9fb); - /* Deprecated - Card. Use icon/message. */ --eds-color-message-icon-standard-success: light-dark(#15682d, #7bcf78); - /* Deprecated - Card. Use icon/message. */ --eds-color-message-icon-standard-warning: light-dark(#7f4600, #ffae74); - /* Deprecated - Card. Use icon/message. */ --eds-color-message-icon-standard-error: light-dark(#90042c, #ff8a8a); - /* Deprecated - Card. Use icon/message. */ --eds-color-message-icon-raised-info-initial: light-dark(#045e8d, #6fc9fb); - /* Deprecated - Chip. Use icon/message. */ --eds-color-message-icon-raised-info-hover: light-dark(#034187, #aee1fd); - /* Deprecated - Chip. Use icon/message. */ --eds-color-message-icon-raised-success-initial: light-dark(#15682d, #7bcf78); - /* Deprecated - Chip. Use icon/message. */ --eds-color-message-icon-raised-success-hover: light-dark(#204f1f, #cceecb); - /* Deprecated - Chip. Use icon/message. */ --eds-color-message-icon-raised-warning-initial: light-dark(#7f4600, #ffae74); - /* Deprecated - Chip. Use icon/message. */ --eds-color-message-icon-raised-warning-hover: light-dark(#643700, #ffd9bd); - /* Deprecated - Chip. Use icon/message. */ --eds-color-message-icon-raised-error-initial: light-dark(#90042c, #ff8a8a); - /* Deprecated - Chip. Use icon/message. */ --eds-color-message-icon-raised-error-hover: light-dark(#700020, #ffabab); - /* Deprecated - Chip. Use icon/message. */ --eds-color-message-icon-callout-info: light-dark(#045e8d, #dfeff7); - /* Banner */ --eds-color-message-icon-callout-success: light-dark(#15682d, #d9f7e2); - /* Banner */ --eds-color-message-icon-callout-warning: light-dark(#7f4600, #ffe7d6); - /* Banner */ --eds-color-message-icon-callout-error: light-dark(#90042c, #ffe1e0); - /* Banner */ --eds-color-message-border-standard-info: light-dark(#d5eaf4, #0084c4); - /* Card */ --eds-color-message-border-standard-success: light-dark(#d9f7e2, #3fa13d); - /* Card */ --eds-color-message-border-standard-warning: light-dark(#ffe7d6, #e57e00); - /* Card */ --eds-color-message-border-standard-error: light-dark(#ffd2d1, #e20337); - /* Card */ --eds-color-message-border-raised-info-initial: #0084c4; - /* Chip */ --eds-color-message-border-raised-info-hover: light-dark(#034187, #aee1fd); - /* Chip */ --eds-color-message-border-raised-success-initial: #3fa13d; - /* Chip */ --eds-color-message-border-raised-success-hover: light-dark(#204f1f, #cceecb); - /* Chip */ --eds-color-message-border-raised-warning-initial: #e57e00; - /* Chip */ --eds-color-message-border-raised-warning-hover: light-dark(#643700, #ffd9bd); - /* Chip */ --eds-color-message-border-raised-error-initial: #e20337; - /* Chip */ --eds-color-message-border-raised-error-hover: light-dark(#700020, #ffabab); - /* Chip */ --eds-color-message-border-callout-info: light-dark(#d5eaf4, #045e8d); - /* Banner */ --eds-color-message-border-callout-success: light-dark(#d9f7e2, #15682d); - /* Banner */ --eds-color-message-border-callout-warning: light-dark(#ffe7d6, #7f4600); - /* Banner */ --eds-color-message-border-callout-error: light-dark(#ffd2d1, #90042c); - /* Banner */ --eds-color-message-surface-standard-info-on-level-1: light-dark(#d5eaf4, #243746); - /* Card */ --eds-color-message-surface-standard-info-on-level-2: light-dark(#d5eaf4, #243746); - /* Card */ --eds-color-message-surface-standard-info-on-level-3: light-dark(#d5eaf4, #2c4251); - /* Card */ --eds-color-message-surface-standard-success-on-level-1: light-dark(#d9f7e2, #243746); - /* Card */ --eds-color-message-surface-standard-success-on-level-2: light-dark(#d9f7e2, #243746); - /* Card */ --eds-color-message-surface-standard-success-on-level-3: light-dark(#d9f7e2, #2c4251); - /* Card */ --eds-color-message-surface-standard-warning-on-level-1: light-dark(#ffe7d6, #243746); - /* Card */ --eds-color-message-surface-standard-warning-on-level-2: light-dark(#ffe7d6, #243746); - /* Card */ --eds-color-message-surface-standard-warning-on-level-3: light-dark(#ffe7d6, #2c4251); - /* Card */ --eds-color-message-surface-standard-error-on-level-1: light-dark(#ffd2d1, #243746); - /* Card */ --eds-color-message-surface-standard-error-on-level-2: light-dark(#ffd2d1, #243746); - /* Card */ --eds-color-message-surface-standard-error-on-level-3: light-dark(#ffd2d1, #2c4251); - /* Card */ --eds-color-message-surface-raised-info-initial: light-dark(#dfeff7, #dfeff71a); - /* Chip */ --eds-color-message-surface-raised-info-hover: light-dark(#dfeff7, #dfeff71a); - /* Chip */ --eds-color-message-surface-raised-success-initial: light-dark(#e6faec, #e6faec1a); - /* Chip */ --eds-color-message-surface-raised-success-hover: light-dark(#e6faec, #e6faec1a); - /* Chip */ --eds-color-message-surface-raised-warning-initial: light-dark(#fff0e5, #fff0e51a); - /* Chip */ --eds-color-message-surface-raised-warning-hover: light-dark(#fff0e5, #fff0e51a); - /* Chip */ --eds-color-message-surface-raised-error-initial: light-dark(#ffe1e0, #ffe1e01a); - /* Chip */ --eds-color-message-surface-raised-error-hover: light-dark(#ffe1e0, #ffe1e01a); - /* Chip */ --eds-color-message-surface-callout-info: light-dark(#d5eaf4, #045e8d); - /* Chip */ --eds-color-message-surface-callout-success: light-dark(#d9f7e2, #15682d); - /* Chip */ --eds-color-message-surface-callout-warning: light-dark(#ffe7d6, #7f4600); - /* Banner */ --eds-color-message-surface-callout-error: light-dark(#ffd2d1, #90042c); - /* Banner */ --eds-color-interactive-border-raised-resting-initial: light-dark(#dcdcdc, #435460); - /* Chip */ --eds-color-interactive-border-raised-resting-hover: light-dark(#565656, #d6d9dc); - /* Chip */ --eds-color-interactive-border-raised-active-initial: light-dark(#b9d7da, #1e5d78); - /* Chip */ --eds-color-interactive-border-raised-active-hover: light-dark(#007079, #a6d6d9); - /* Chip */ --eds-color-interactive-border-raised-disabled: light-dark(#dcdcdc, #52616d); - /* Chip */ --eds-color-interactive-border-standard-primary-disabled: light-dark(#dcdcdc, #52616d); - /* Toggle button */ --eds-color-interactive-border-standard-primary-resting-initial: light-dark(#6f6f6f, #a6afb5); - /* Toggle button */ --eds-color-interactive-border-standard-primary-resting-hover: light-dark(#6f6f6f, #a6afb5); - /* Toggle button */ --eds-color-interactive-border-standard-primary-active-initial: light-dark(#007079, #97cace); - /* Toggle button */ --eds-color-interactive-border-standard-primary-active-hover: light-dark(#007079, #97cace); - /* Toggle button */ --eds-color-interactive-border-standard-secondary-disabled: light-dark(#f7f7f7, #132634); - /* Sidebar link */ --eds-color-interactive-border-standard-secondary-resting-initial: light-dark(#f7f7f7, #132634); - /* Sidebar link */ --eds-color-interactive-border-standard-secondary-resting-hover: light-dark(#f7f7f7, #132634); - /* Sidebar link */ --eds-color-interactive-border-standard-secondary-active-initial: light-dark(#007079, #97cace); - /* Sidebar link */ --eds-color-interactive-border-standard-secondary-active-hover: light-dark(#004f55, #b3e2e5); - /* Sidebar link */ --eds-color-interactive-border-standard-tertiary-disabled: light-dark(#ffffff00, #00000000); - /* Sidebar menu */ --eds-color-interactive-border-standard-tertiary-resting-initial: light-dark(#ffffff00, #00000000); - /* Sidebar menu */ --eds-color-interactive-border-standard-tertiary-resting-hover: light-dark(#ffffff00, #00000000); - /* Tab */ --eds-color-interactive-border-standard-tertiary-active-initial: light-dark(#ffffff00, #00000000); - /* Sidebar menu */ --eds-color-interactive-border-standard-tertiary-active-hover: light-dark(#ffffff00, #00000000); - /* Sidebar menu */ --eds-color-interactive-border-standard-quaternary-disabled: light-dark(#dcdcdc, #ffffff29); - /* Tab */ --eds-color-interactive-border-standard-quaternary-resting-initial: light-dark(#dcdcdc, #ffffff29); - /* Tab */ --eds-color-interactive-border-standard-quaternary-resting-hover: light-dark(#bebebe, #ffffff33); - /* Tab */ --eds-color-interactive-border-standard-quaternary-active-initial: light-dark(#007079, #97cace); - /* Tab */ --eds-color-interactive-border-standard-quaternary-active-hover: light-dark(#004f55, #b3e2e5); - /* Tab */ --eds-color-interactive-text-standard-primary-disabled: light-dark(#bebebe, #52616d); - /* Disabled Toggle button */ --eds-color-interactive-text-standard-primary-resting-initial: light-dark(#6f6f6f, #a6afb5); - /* Toggle button */ --eds-color-interactive-text-standard-primary-resting-hover: light-dark(#565656, #c2c8cc); - /* Toggle button */ --eds-color-interactive-text-standard-primary-active-initial: light-dark(#ffffff, #000000); - /* Toggle button */ --eds-color-interactive-text-standard-primary-active-hover: light-dark(#ffffff, #000000); - /* Toggle button */ --eds-color-interactive-text-standard-secondary-disabled: light-dark(#bebebe, #52616d); - /* Disabled Sidebar link */ --eds-color-interactive-text-standard-secondary-resting-initial: light-dark(#6f6f6f, #a6afb5); - /* Sidebar link */ --eds-color-interactive-text-standard-secondary-resting-hover: light-dark(#565656, #c2c8cc); - /* Sidebar link */ --eds-color-interactive-text-standard-secondary-active-initial: light-dark(#007079, #97cace); - /* Sidebar link */ --eds-color-interactive-text-standard-secondary-active-hover: light-dark(#004f55, #b3e2e5); - /* Sidebar link */ --eds-color-interactive-text-standard-tertiary-disabled: light-dark(#bebebe, #52616d); - /* Disabled Sidebar link */ --eds-color-interactive-text-standard-tertiary-resting-initial: light-dark(#6f6f6f, #a6afb5); - /* Sidebar link */ --eds-color-interactive-text-standard-tertiary-resting-hover: light-dark(#565656, #c2c8cc); - /* Sidebar link */ --eds-color-interactive-text-standard-tertiary-active-initial: light-dark(#007079, #d1edef); - /* Sidebar link */ --eds-color-interactive-text-standard-tertiary-active-hover: light-dark(#004f55, #e0f4f5); - /* Sidebar link */ --eds-color-interactive-text-standard-quaternary-disabled: light-dark(#bebebe, #52616d); - /* Disabled Tab */ --eds-color-interactive-text-standard-quaternary-resting-initial: light-dark(#6f6f6f, #a6afb5); - /* Tab */ --eds-color-interactive-text-standard-quaternary-resting-hover: light-dark(#565656, #c2c8cc); - /* Tab */ --eds-color-interactive-text-standard-quaternary-active-initial: light-dark(#007079, #97cace); - /* Tab */ --eds-color-interactive-text-standard-quaternary-active-hover: light-dark(#004f55, #b3e2e5); - /* Tab */ --eds-color-interactive-text-raised-disabled: light-dark(#bebebe, #52616d); - /* Chip */ --eds-color-interactive-text-raised-resting-initial: light-dark(#565656, #c2c8cc); - /* Chip */ --eds-color-interactive-text-raised-resting-hover: light-dark(#3d3d3d, #d6d9dc); - /* Chip */ --eds-color-interactive-text-raised-active-initial: light-dark(#007079, #b3e2e5); - /* Chip */ --eds-color-interactive-text-raised-active-hover: light-dark(#004f55, #d1edef); - /* Chip */ --eds-color-interactive-icon-standard-secondary-resting-initial: light-dark(#6f6f6f, #a6afb5); - /* Sidebar link */ --eds-color-interactive-icon-standard-secondary-resting-hover: light-dark(#565656, #c2c8cc); - /* Sidebar link */ --eds-color-interactive-icon-standard-secondary-active-initial: light-dark(#007079, #97cace); - /* Sidebar link */ --eds-color-interactive-icon-standard-secondary-active-hover: light-dark(#004f55, #b3e2e5); - /* Sidebar link */ --eds-color-interactive-icon-standard-secondary-disabled: light-dark(#bebebe, #52616d); - /* Sidebar link */ --eds-color-interactive-icon-standard-primary-disabled: light-dark(#bebebe, #52616d); - /* Disabled Toggle button */ --eds-color-interactive-icon-standard-primary-resting-initial: light-dark(#6f6f6f, #a6afb5); - /* Toggle button */ --eds-color-interactive-icon-standard-primary-resting-hover: light-dark(#6f6f6f, #a6afb5); - /* Toggle button */ --eds-color-interactive-icon-standard-primary-active-initial: light-dark(#ffffff, #000000); - /* Toggle button */ --eds-color-interactive-icon-standard-primary-active-hover: light-dark(#ffffff, #000000); - /* Toggle button */ --eds-color-interactive-icon-standard-tertiary-resting-initial: light-dark(#6f6f6f, #a6afb5); - /* Sidebar menu */ --eds-color-interactive-icon-standard-tertiary-resting-hover: light-dark(#565656, #c2c8cc); - /* Sidebar menu */ --eds-color-interactive-icon-standard-tertiary-disabled: light-dark(#bebebe, #52616d); - /* Sidebar menu */ --eds-color-interactive-icon-standard-tertiary-active-initial: light-dark(#007079, #d1edef); - /* Sidebar menu */ --eds-color-interactive-icon-standard-tertiary-active-hover: light-dark(#004f55, #e0f4f5); - /* Sidebar menu */ --eds-color-interactive-icon-standard-quaternary-disabled: light-dark(#bebebe, #52616d); - /* Disabled Toggle button */ --eds-color-interactive-icon-standard-quaternary-resting-initial: light-dark(#6f6f6f, #a6afb5); - /* Toggle button */ --eds-color-interactive-icon-standard-quaternary-resting-hover: light-dark(#565656, #c2c8cc); - /* Toggle button */ --eds-color-interactive-icon-standard-quaternary-active-initial: light-dark(#007079, #97cace); - /* Toggle button */ --eds-color-interactive-icon-standard-quaternary-active-hover: light-dark(#004f55, #c9e0e2); - /* Toggle button */ --eds-color-interactive-icon-raised-disabled: light-dark(#bebebe, #52616d); - /* Chip */ --eds-color-interactive-icon-raised-resting-initial: light-dark(#565656, #c2c8cc); - /* Chip */ --eds-color-interactive-icon-raised-resting-hover: light-dark(#3d3d3d, #d6d9dc); - /* Chip */ --eds-color-interactive-icon-raised-active-initial: light-dark(#007079, #b3e2e5); - /* Chip */ --eds-color-interactive-icon-raised-active-hover: light-dark(#004f55, #d1edef); - /* Chip */ --eds-color-interactive-surface-standard-primary-disabled-outline: light-dark(#ffffff00, #00000000); - /* Toggle button */ --eds-color-interactive-surface-standard-primary-disabled-filled: light-dark(#eaeaea, #2e3f4c); - /* Toggle button */ --eds-color-interactive-surface-standard-primary-resting-initial: light-dark(#ffffff00, #00000000); - /* Toggle button */ --eds-color-interactive-surface-standard-primary-resting-hover: light-dark(#dcdcdc, #344c5b); - /* Toggle button */ --eds-color-interactive-surface-standard-primary-active-initial: light-dark(#007079, #97cace); - /* Toggle button */ --eds-color-interactive-surface-standard-primary-active-hover: light-dark(#004f55, #b3e2e5); - /* Toggle button */ --eds-color-interactive-surface-standard-secondary-disabled: light-dark(#ffffff00, #00000000); - /* Sidebar menu */ --eds-color-interactive-surface-standard-secondary-resting-initial: light-dark(#ffffff00, #00000000); - /* Sidebar menu */ --eds-color-interactive-surface-standard-secondary-resting-hover: light-dark(#dcdcdc, #344c5b); - /* Sidebar menu */ --eds-color-interactive-surface-standard-secondary-active-initial: light-dark(#deedee, #1e5d78); - /* Sidebar menu */ --eds-color-interactive-surface-standard-secondary-active-hover: light-dark(#c9e0e2, #257193); - /* Sidebar menu */ --eds-color-interactive-surface-standard-tertiary-disabled: light-dark(#ffffff00, #00000000); - /* Sidebar link */ --eds-color-interactive-surface-standard-tertiary-resting-initial: light-dark(#ffffff00, #00000000); - /* Sidebar link */ --eds-color-interactive-surface-standard-tertiary-resting-hover: light-dark(#dcdcdc, #344c5b); - /* Sidebar link */ --eds-color-interactive-surface-standard-tertiary-active-initial: light-dark(#deedee, #1e5d78); - /* Sidebar link */ --eds-color-interactive-surface-standard-tertiary-active-hover: light-dark(#c9e0e2, #257193); - /* Sidebar link */ --eds-color-interactive-surface-standard-quaternary-disabled: light-dark(#ffffff00, #00000000); - /* Tab */ --eds-color-interactive-surface-standard-quaternary-resting-initial: light-dark(#ffffff00, #00000000); - /* Tab */ --eds-color-interactive-surface-standard-quaternary-resting-hover: light-dark(#dcdcdc, #344c5b); - /* Tab */ --eds-color-interactive-surface-standard-quaternary-active-initial: light-dark(#ffffff00, #00000000); - /* Tab */ --eds-color-interactive-surface-standard-quaternary-active-hover: light-dark(#c9e0e2, #1e5d78); - /* Sidebar link */ --eds-color-interactive-surface-raised-disabled: light-dark(#eaeaea, #2e3f4c66); - /* Interactive Chip (disabled) */ --eds-color-interactive-surface-raised-resting-initial: light-dark(#eaeaea, #eaeaea1a); - /* Interactive Chip */ --eds-color-interactive-surface-raised-resting-hover: light-dark(#eaeaea, #eaeaea1a); - /* Interactive Chip */ --eds-color-interactive-surface-raised-active-initial: light-dark(#e6f3f4, #2a587480); - /* Interactive Chip */ --eds-color-interactive-surface-raised-active-hover: light-dark(#e6f3f4, #2a587480); - /* Interactive Chip */ --eds-color-static-text-standard: light-dark(#3d3d3d, #e9ebed); --eds-color-static-text-raised: light-dark(#007079, #b3e2e5); --eds-color-static-text-callout: light-dark(#3d3d3d, #ffffff); @@ -564,90 +302,52 @@ --eds-color-static-surface-raised: light-dark(#eaeaea, #eaeaea1a); --eds-color-static-surface-callout: light-dark(#ffffff, #2c4251); --eds-input-asterix-color-text: #e20337; - /* Autocomplete, Text field */ --eds-input-placeholder-color-text: light-dark(#8c8c8c, #828f99); - /* Autocomplete, Table input, Search, Text field */ --eds-input-helper-color-text-initial: light-dark(#6f6f6f, #a6afb5); - /* Autocomplete, Table input, Text field */ --eds-input-helper-color-text-disabled: light-dark(#bebebe, #52616d); - /* Autocomplete, Table input, Search, Text field */ --eds-input-helper-color-icon-initial: light-dark(#6f6f6f, #a6afb5); - /* Autocomplete, Table input, Text field */ --eds-input-helper-color-icon-disabled: light-dark(#bebebe, #52616d); - /* Autocomplete, Table input, Search, Text field */ --eds-input-color-text-initial: light-dark(#565656, #c2c8cc); - /* Autocomplete, Table input, Text field */ --eds-input-color-text-focus: light-dark(#3d3d3d, #ffffff); - /* Autocomplete, Table input, Search, Text field */ --eds-input-color-text-disabled: light-dark(#bebebe, #52616d); - /* Autocomplete, Table input, Search, Text field */ --eds-input-color-icon-initial: light-dark(#565656, #c2c8cc); - /* Autocomplete, Table input, Text field */ --eds-input-color-icon-focus: light-dark(#3d3d3d, #ffffff); - /* Autocomplete, Table input, Search, Text field */ --eds-input-color-icon-disabled: light-dark(#bebebe, #52616d); - /* Autocomplete, Table input, Search, Text field */ --eds-input-color-border-initial: light-dark(#b3b3b3, #ffffff29); - /* Autocomplete, Text field */ --eds-input-color-border-focus: light-dark(#007079, #97cace); - /* Autocomplete, Search, Text field */ --eds-input-color-border-disabled: light-dark(#ffffff00, #00000000); - /* Autocomplete, Search, Text field */ --eds-input-color-surface-initial-on-level-1: light-dark(#ffffff, #00000047); - /* Autocomplete, Search, Table input, Text field input */ --eds-input-color-surface-initial-on-level-2: light-dark(#f7f7f7, #00000047); - /* Autocomplete, Search, Table input, Text field input */ --eds-input-color-surface-initial-on-level-3: light-dark(#f7f7f7, #00000047); --eds-input-color-surface-disabled-on-level-1: light-dark(#ffffff, #00000047); - /* Autocomplete, Search, Table input, Text field input */ --eds-input-color-surface-disabled-on-level-2: light-dark(#f7f7f7, #00000047); - /* Autocomplete, Search, Table input, Text field input */ --eds-input-color-surface-disabled-on-level-3: light-dark(#f7f7f7, #00000047); --eds-input-color-surface-read-only-on-level-1: light-dark(#ffffff00, #00000000); --eds-input-color-surface-read-only-on-level-2: light-dark(#ffffff00, #00000000); --eds-input-color-surface-read-only-on-level-3: light-dark(#ffffff00, #00000000); --eds-input-color-message-border-success-initial: #3fa13d; - /* Text field */ --eds-input-color-message-border-success-focus: light-dark(#15682d, #7bcf78); - /* Text field */ --eds-input-color-message-border-warning-initial: #e57e00; - /* Text field */ --eds-input-color-message-border-warning-focus: light-dark(#7f4600, #ffae74); - /* Text field */ --eds-input-color-message-border-error-initial: #e20337; - /* Text field */ --eds-input-color-message-border-error-focus: light-dark(#90042c, #ff8a8a); - /* Text field */ --eds-input-color-message-icon-success-initial: #3fa13d; - /* Text field */ --eds-input-color-message-icon-success-focus: light-dark(#15682d, #7bcf78); - /* Text field */ --eds-input-color-message-icon-warning-initial: #e57e00; - /* Text field */ --eds-input-color-message-icon-warning-focus: light-dark(#7f4600, #ffae74); - /* Text field */ --eds-input-color-message-icon-error-initial: #e20337; - /* Text field */ --eds-input-color-message-icon-error-focus: light-dark(#90042c, #ff8a8a); - /* Text field */ --eds-input-color-message-text-success-initial: #3fa13d; - /* Text field */ --eds-input-color-message-text-success-focus: light-dark(#15682d, #7bcf78); - /* Text field */ --eds-input-color-message-text-warning-initial: #e57e00; - /* Text field */ --eds-input-color-message-text-warning-focus: light-dark(#7f4600, #ffae74); - /* Text field */ --eds-input-color-message-text-error-initial: #e20337; - /* Text field */ --eds-input-color-message-text-error-focus: light-dark(#90042c, #ff8a8a); - /* Text field */ --eds-input-label-color-text-initial: light-dark(#6f6f6f, #a6afb5); --eds-input-label-color-text-disabled: light-dark(#bebebe, #52616d); --eds-input-label-color-icon-initial: light-dark(#6f6f6f, #a6afb5); --eds-input-label-color-icon-disabled: light-dark(#bebebe, #52616d); --eds-table-cell-color-message-surface-error: light-dark(#ffd2d1, #ff666b47); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-text-disabled: light-dark(#bebebe, #52616d); --eds-table-cell-color-interactive-text-resting-initial-on-level-1: light-dark(#3d3d3d, #d6d9dc); --eds-table-cell-color-interactive-text-resting-initial-on-level-2: light-dark(#3d3d3d, #d6d9dc); @@ -656,44 +356,25 @@ --eds-table-cell-color-interactive-text-resting-hover-on-level-2: light-dark(#1f1f1f, #e9ebed); --eds-table-cell-color-interactive-text-resting-hover-on-level-3: light-dark(#1f1f1f, #e9ebed); --eds-table-cell-color-interactive-text-active-initial-on-level-1: light-dark(#3d3d3d, #d6d9dc); - /* Interactive table cell, table data grid cell */ --eds-table-cell-color-interactive-text-active-initial-on-level-2: light-dark(#3d3d3d, #d6d9dc); - /* Interactive table cell, table data grid cell */ --eds-table-cell-color-interactive-text-active-initial-on-level-3: light-dark(#3d3d3d, #d6d9dc); - /* Interactive table cell, table data grid cell */ --eds-table-cell-color-interactive-text-active-hover-on-level-1: light-dark(#1f1f1f, #e9ebed); - /* Interactive table cell, data grid cell */ --eds-table-cell-color-interactive-text-active-hover-on-level-2: light-dark(#1f1f1f, #e9ebed); - /* Interactive table cell, data grid cell */ --eds-table-cell-color-interactive-text-active-hover-on-level-3: light-dark(#1f1f1f, #e9ebed); - /* Interactive table cell, data grid cell */ --eds-table-cell-color-interactive-icon-disabled: light-dark(#bebebe, #52616d); --eds-table-cell-color-interactive-icon-resting-initial-on-level-1: light-dark(#6f6f6f, #a6afb5); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-resting-initial-on-level-2: light-dark(#6f6f6f, #a6afb5); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-resting-initial-on-level-3: light-dark(#565656, #c2c8cc); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-resting-hover-on-level-1: light-dark(#1f1f1f, #e9ebed); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-resting-hover-on-level-2: light-dark(#1f1f1f, #e9ebed); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-resting-hover-on-level-3: light-dark(#1f1f1f, #e9ebed); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-active-initial-on-level-1: light-dark(#007079, #97cace); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-active-initial-on-level-2: light-dark(#007079, #97cace); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-active-initial-on-level-3: light-dark(#007079, #d1edef); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-active-hover-on-level-1: light-dark(#004f55, #b3e2e5); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-active-hover-on-level-2: light-dark(#004f55, #b3e2e5); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-icon-active-hover-on-level-3: light-dark(#004f55, #e0f4f5); - /* Table cell, Table data grid cell, Table header, Table data grid header */ --eds-table-cell-color-interactive-border-disabled: light-dark(#dcdcdc, #ffffff29); - /* Border on Table cell doesn't change from Initial state, only the text & the icon. */ --eds-table-cell-color-interactive-border-resting-initial-on-level-1: light-dark(#dcdcdc, #ffffff29); --eds-table-cell-color-interactive-border-resting-initial-on-level-2: light-dark(#dcdcdc, #ffffff29); --eds-table-cell-color-interactive-border-resting-initial-on-level-3: light-dark(#dcdcdc, #ffffff29); @@ -707,31 +388,18 @@ --eds-table-cell-color-interactive-border-active-hover-on-level-2: light-dark(#bebebe, #ffffff33); --eds-table-cell-color-interactive-border-active-hover-on-level-3: light-dark(#bebebe, #ffffff33); --eds-table-cell-color-interactive-surface-resting-initial-on-level-1: light-dark(#ffffff00, #00000000); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-resting-initial-on-level-2: light-dark(#ffffff00, #00000000); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-resting-initial-on-level-3: light-dark(#ffffff00, #00000000); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-resting-hover-on-level-1: light-dark(#dcdcdc, #344c5b); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-resting-hover-on-level-2: light-dark(#dcdcdc, #344c5b); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-resting-hover-on-level-3: light-dark(#dcdcdc, #344c5b); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-disabled: light-dark(#ffffff00, #00000000); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-active-initial-on-level-1: light-dark(#deedee, #17485d); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-active-initial-on-level-2: light-dark(#deedee, #17485d); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-active-initial-on-level-3: light-dark(#deedee, #1e5d78); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-active-hover-on-level-1: light-dark(#c9e0e2, #1e5d78); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-active-hover-on-level-2: light-dark(#c9e0e2, #1e5d78); - /* Table cell, Table data grid cell */ --eds-table-cell-color-interactive-surface-active-hover-on-level-3: light-dark(#c9e0e2, #257193); - /* Table cell, Table data grid cell */ --eds-table-header-color-interactive-border-disabled: light-dark(#dcdcdc, #ffffff29); --eds-table-header-color-interactive-border-active-initial-on-level-1: light-dark(#007079, #97cace); --eds-table-header-color-interactive-border-active-initial-on-level-2: light-dark(#007079, #97cace); @@ -746,35 +414,20 @@ --eds-table-header-color-interactive-border-resting-hover-on-level-2: light-dark(#bebebe, #ffffff33); --eds-table-header-color-interactive-border-resting-hover-on-level-3: light-dark(#bebebe, #ffffff33); --eds-table-header-color-interactive-surface-resting-initial-on-level-1: light-dark(#ffffff, #243746); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-resting-initial-on-level-2: light-dark(#ffffff, #243746); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-resting-initial-on-level-3: light-dark(#f7f7f7, #2c4251); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-resting-hover-on-level-1: light-dark(#dcdcdc, #344c5b); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-resting-hover-on-level-2: light-dark(#dcdcdc, #344c5b); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-resting-hover-on-level-3: light-dark(#dcdcdc, #3f5664); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-active-initial-on-level-1: light-dark(#eaeaea, #2c4251); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-active-initial-on-level-2: light-dark(#eaeaea, #2c4251); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-active-initial-on-level-3: light-dark(#eaeaea, #344c5b); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-active-hover-on-level-1: light-dark(#dcdcdc, #344c5b); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-active-hover-on-level-2: light-dark(#dcdcdc, #344c5b); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-active-hover-on-level-3: light-dark(#dcdcdc, #3f5664); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-disabled-on-level-1: light-dark(#ffffff, #243746); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-disabled-on-level-2: light-dark(#ffffff, #243746); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-surface-disabled-on-level-3: light-dark(#f7f7f7, #2c4251); - /* Table header, Table data grid header */ --eds-table-header-color-interactive-text-resting-initial-on-level-1: light-dark(#3d3d3d, #d6d9dc); --eds-table-header-color-interactive-text-resting-initial-on-level-2: light-dark(#3d3d3d, #d6d9dc); --eds-table-header-color-interactive-text-resting-initial-on-level-3: light-dark(#3d3d3d, #ffffff); @@ -800,11 +453,7 @@ --eds-table-header-color-interactive-icon-active-hover-on-level-2: light-dark(#004f55, #b3e2e5); --eds-table-header-color-interactive-icon-active-hover-on-level-3: light-dark(#004f55, #d1edef); --eds-ui-scrim-color-surface: light-dark(#00000066, #00000066); - /* Scrim */ --eds-ui-shell-color-surface: light-dark(#ffffff, #243746); - /* Sidebar, Side sheet, Toolbar, Top bar */ --eds-ui-shell-color-border: light-dark(#f7f7f7, #132634); - /* Sidebar, Topbar, Side sheet */ --eds-ui-main-color-surface: light-dark(#f7f7f7, #132634); - /* Recommended background color for EDS applications */ } \ No newline at end of file