From f76cd0d53a6ea4e110853e1c6602cbcf6b287617 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Sun, 10 Mar 2024 20:55:02 -0500 Subject: [PATCH 1/5] feat: add new v2.0 component tokens --- .storybook/data/tokens.json | 321 ++++++++++-- src/design-tokens/primitives.json | 488 +++++++++++++++--- src/design-tokens/themes.json | 549 ++++++++++++++++++++- src/tokens-dist/css/variables.css | 413 ++++++++++++---- src/tokens-dist/json/variables-nested.json | 439 ++++++++++++++-- src/tokens-dist/ts/colors.ts | 399 ++++++++++++--- 6 files changed, 2239 insertions(+), 370 deletions(-) diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json index ec13ea3ff..eda245bab 100644 --- a/.storybook/data/tokens.json +++ b/.storybook/data/tokens.json @@ -148,28 +148,91 @@ "eds-theme-typography-tab-sm": "var(--eds-typography-preset-008-light)", "eds-theme-typography-tab-sm-active": "var(--eds-typography-preset-009)", "eds-theme-typography-tag": "var(--eds-typography-preset-009)", + "eds-theme-border-radius-actions": "9999px", + "eds-theme-border-radius-surfaces-lg": "0px", + "eds-theme-border-radius-surfaces-md": "6", + "eds-theme-border-radius-objects-md": "4", + "eds-theme-border-radius-objects-sm": "2", + "eds-theme-border-radius-tab-underline-default": "9999px", + "eds-theme-border-radius-tab-underline-sticky": "9999px", "eds-theme-border-width": "1px", "eds-theme-box-button-border-radius": "4px", "eds-theme-box-focus-ring-outline-width": "1px", "eds-theme-box-focus-ring-outline-offset": "2px", "eds-theme-form-border-width": "1px", "eds-theme-form-border-radius": "4px", - "eds-theme-size-slider-track-height": "var(--eds-size-base-unit)", - "eds-theme-size-slider-thumb": "calc(var(--eds-size-base-unit) * 3)", - "eds-theme-color-body-background": "#F4F6F8", + "eds-theme-size-slider-track-height": "0.5rem", + "eds-theme-size-slider-thumb": "1.5rem", + "eds-theme-color-body-background": "#EEE7E4", "eds-theme-color-body-background-inverted": "#383C43", + "eds-theme-color-background-input": "rgba(255, 255, 255, 1)", "eds-theme-color-background-neutral-default": "#FFFFFF", - "eds-theme-color-background-neutral-default-hover": "#F4F6F8", - "eds-theme-color-background-neutral-subtle": "#F4F6F8", - "eds-theme-color-background-neutral-subtle-hover": "#E7E8EA", - "eds-theme-color-background-neutral-medium": "#E7E8EA", + "eds-theme-color-background-neutral-default-hover": "#EEE7E4", + "eds-theme-color-background-neutral-subtle": "#EEE7E4", + "eds-theme-color-background-neutral-subtle-hover": "#CFC9C7", + "eds-theme-color-background-neutral-medium": "#CFC9C7", "eds-theme-color-background-neutral-medium-hover": "#C0C4C8", "eds-theme-color-background-brand-primary-default": "#F0F0FC", "eds-theme-color-background-brand-primary-subtle": "#F0F0FC", "eds-theme-color-background-brand-primary-strong": "#6B65E2", "eds-theme-color-background-brand-primary-strong-hover": "#3E42B1", + "eds-theme-color-background-utility-base-0": "rgba(255, 255, 255, 1)", + "eds-theme-color-background-utility-base-1": "#FFFFFF", + "eds-theme-color-background-utility-container": "rgba(255, 255, 255, 1)", + "eds-theme-color-background-utility-container-hover": "#F9F3F1", + "eds-theme-color-background-utility-container-active": "#EEE7E4", + "eds-theme-color-background-utility-overlay-low-emphasis": "#272625", + "eds-theme-color-background-utility-overlay-high-emphasis": "#272625", + "eds-theme-color-background-utility-neutral-no-emphasis": "transparent", + "eds-theme-color-background-utility-neutral-no-emphasis-hover": "#F9F3F1", + "eds-theme-color-background-utility-neutral-no-emphasis-active": "#EEE7E4", + "eds-theme-color-background-utility-neutral-low-emphasis": "#F9F3F1", + "eds-theme-color-background-utility-neutral-low-emphasis-hover": "#EEE7E4", + "eds-theme-color-background-utility-neutral-low-emphasis-active": "#DFD9D6", + "eds-theme-color-background-utility-neutral-high-emphasis": "#6C6967", + "eds-theme-color-background-utility-neutral-high-emphasis-hover": "#565352", + "eds-theme-color-background-utility-neutral-high-emphasis-active": "#3F3E3D", + "eds-theme-color-background-utility-interactive-no-emphasis": "transparent", + "eds-theme-color-background-utility-interactive-no-emphasis-hover": "#EAF4FF", + "eds-theme-color-background-utility-interactive-no-emphasis-active": "#CEE6FF", + "eds-theme-color-background-utility-interactive-low-emphasis": "#EAF4FF", + "eds-theme-color-background-utility-interactive-low-emphasis-hover": "#CEE6FF", + "eds-theme-color-background-utility-interactive-low-emphasis-active": "#B5DAFF", + "eds-theme-color-background-utility-interactive-high-emphasis": "#0F2163", + "eds-theme-color-background-utility-interactive-high-emphasis-hover": "#0A164C", + "eds-theme-color-background-utility-interactive-high-emphasis-active": "#060E30", + "eds-theme-color-background-utility-critical-no-emphasis": "transparent", + "eds-theme-color-background-utility-critical-no-emphasis-hover": "FCF2F7", + "eds-theme-color-background-utility-critical-no-emphasis-active": "F8DDEA", + "eds-theme-color-background-utility-critical-low-emphasis": "FCF2F7", + "eds-theme-color-background-utility-critical-low-emphasis-hover": "F8DDEA", + "eds-theme-color-background-utility-critical-low-emphasis-active": "F5CCE0", + "eds-theme-color-background-utility-critical-high-emphasis": "9F1C55", + "eds-theme-color-background-utility-critical-high-emphasis-hover": "760C35", + "eds-theme-color-background-utility-critical-high-emphasis-active": "620424", + "eds-theme-color-background-utility-favorable-low-emphasis": "#E6F5ED", + "eds-theme-color-background-utility-favorable-low-emphasis-hover": "#D0EDDD", + "eds-theme-color-background-utility-favorable-low-emphasis-active": "#B3E1C7", + "eds-theme-color-background-utility-favorable-high-emphasis": "#367759", + "eds-theme-color-background-utility-favorable-high-emphasis-hover": "#225E43", + "eds-theme-color-background-utility-favorable-high-emphasis-active": "#13462F", + "eds-theme-color-background-utility-warning-low-emphasis": "#FDF3D3", + "eds-theme-color-background-utility-warning-low-emphasis-hover": "#FBE8AB", + "eds-theme-color-background-utility-warning-low-emphasis-active": "#F9DA78", + "eds-theme-color-background-utility-information-low-emphasis": "#EAF4FF", + "eds-theme-color-background-utility-information-low-emphasis-hover": "#CEE6FF", + "eds-theme-color-background-utility-information-low-emphasis-active": "#B5DAFF", + "eds-theme-color-background-utility-disabled-no-emphasis": "transparent", + "eds-theme-color-background-utility-disabled-low-emphasis": "#EEE7E4", + "eds-theme-color-background-utility-disabled-medium-emphasis": "#CFC9C7", + "eds-theme-color-background-utility-inverse-no-emphasis": "transparent", + "eds-theme-color-background-utility-inverse-no-emphasis-hover": "rgba(255,255,255, 0.2)", + "eds-theme-color-background-utility-inverse-no-emphasis-active": "rgba(255, 255, 255, 0.3)", + "eds-theme-color-background-utility-inverse-high-emphasis": "rgba(255, 255, 255, 1)", + "eds-theme-color-background-utility-inverse-high-emphasis-hover": "#F9F3F1", + "eds-theme-color-background-utility-inverse-high-emphasis-active": "#EEE7E4", + "eds-theme-color-background-utility-inverse-disabled": "rgba(255, 255, 255, 0.5)", "eds-theme-color-background-utility-success": "#ECFFF5", - "eds-theme-color-background-utility-warning": "#FFF1E9", "eds-theme-color-background-utility-error": "#FFF0F4", "eds-theme-color-background-grade-complete-default": "#008656", "eds-theme-color-background-grade-complete-subtle": "#ECFFF5", @@ -178,7 +241,7 @@ "eds-theme-color-background-grade-stop-default": "#D41E52", "eds-theme-color-background-grade-stop-subtle": "#FFF0F4", "eds-theme-color-background-disabled": "#C0C4C8", - "eds-theme-color-border-neutral-subtle": "#E7E8EA", + "eds-theme-color-border-neutral-subtle": "#CFC9C7", "eds-theme-color-border-neutral-subtle-hover": "#C0C4C8", "eds-theme-color-border-neutral-default": "#C0C4C8", "eds-theme-color-border-neutral-default-hover": "#999EA3", @@ -188,12 +251,40 @@ "eds-theme-color-border-brand-primary-default": "var(--eds-theme-color-border-brand-primary)", "eds-theme-color-border-brand-primary": "#C4C1F3", "eds-theme-color-border-brand-primary-strong": "#A6A3EE", - "eds-theme-color-border-utility-success-subtle": "#B7E9CE", - "eds-theme-color-border-utility-success-default": "#8FDCB3", - "eds-theme-color-border-utility-success-strong": "#59C88C", + "eds-theme-color-border-utility-neutral-low-emphasis": "#CFC9C7", + "eds-theme-color-border-utility-neutral-low-emphasis-hover": "#BEB8B6", + "eds-theme-color-border-utility-neutral-low-emphasis-active": "#A09C9A", + "eds-theme-color-border-utility-neutral-medium-emphasis": "#868281", + "eds-theme-color-border-utility-neutral-medium-emphasis-hover": "#6C6967", + "eds-theme-color-border-utility-neutral-medium-emphasis-active": "#565352", + "eds-theme-color-border-utility-neutral-high-emphasis": "#272625", + "eds-theme-color-border-utility-neutral-high-emphasis-hover": "#1A1919", + "eds-theme-color-border-utility-neutral-high-emphasis-active": "#0F0F0F", + "eds-theme-color-border-utility-interactive": "#0F2163", + "eds-theme-color-border-utility-interactive-hover": "#0A164C", + "eds-theme-color-border-utility-interactive-active": "#060E30", + "eds-theme-color-border-utility-critical": "9F1C55", + "eds-theme-color-border-utility-critical-hover": "760C35", + "eds-theme-color-border-utility-critical-active": "620424", + "eds-theme-color-border-utility-favorable": "#367759", + "eds-theme-color-border-utility-favorable-hover": "#225E43", + "eds-theme-color-border-utility-favorable-active": "#13462F", + "eds-theme-color-border-utility-warning": "#876701", + "eds-theme-color-border-utility-warning-hover": "#695001", + "eds-theme-color-border-utility-warning-active": "#4D3A01", "eds-theme-color-border-utility-warning-subtle": "#FFCBA5", "eds-theme-color-border-utility-warning-default": "#FFAF76", "eds-theme-color-border-utility-warning-strong": "#F6924A", + "eds-theme-color-border-utility-informational": "#3165D2", + "eds-theme-color-border-utility-informational-hover": "#254EAC", + "eds-theme-color-border-utility-informational-active": "#1B3889", + "eds-theme-color-border-utility-disabled": "#A09C9A", + "eds-theme-color-border-utility-focus": "#3165D2", + "eds-theme-color-border-utility-inverse": "rgba(255, 255, 255, 1)", + "eds-theme-color-border-utility-inverse-disabled": "rgba(255, 255, 255, 0.5)", + "eds-theme-color-border-utility-success-subtle": "#B7E9CE", + "eds-theme-color-border-utility-success-default": "#8FDCB3", + "eds-theme-color-border-utility-success-strong": "#59C88C", "eds-theme-color-border-utility-error-subtle": "#FFCBD7", "eds-theme-color-border-utility-error-default": "#FB90B0", "eds-theme-color-border-utility-error-strong": "#F76C96", @@ -234,7 +325,7 @@ "eds-theme-color-button-secondary-brand-icon-hover": "#FFFFFF", "eds-theme-color-button-secondary-brand-icon-active": "#FFFFFF", "eds-theme-color-button-secondary-neutral-background": "rgba(0, 0, 0, 0)", - "eds-theme-color-button-secondary-neutral-background-hover": "#E7E8EA", + "eds-theme-color-button-secondary-neutral-background-hover": "#CFC9C7", "eds-theme-color-button-secondary-neutral-background-active": "#383C43", "eds-theme-color-button-secondary-neutral-border": "#5D6369", "eds-theme-color-button-secondary-neutral-border-hover": "#5D6369", @@ -297,10 +388,10 @@ "eds-theme-color-button-icon-neutral-hover": "#5D6369", "eds-theme-color-button-icon-neutral-active": "#FFFFFF", "eds-theme-color-button-icon-neutral-background": "rgba(0, 0, 0, 0)", - "eds-theme-color-button-icon-neutral-background-hover": "#E7E8EA", + "eds-theme-color-button-icon-neutral-background-hover": "#CFC9C7", "eds-theme-color-button-icon-neutral-background-active": "#5D6369", "eds-theme-color-button-icon-neutral-border": "rgba(0, 0, 0, 0)", - "eds-theme-color-button-icon-neutral-border-hover": "#E7E8EA", + "eds-theme-color-button-icon-neutral-border-hover": "#CFC9C7", "eds-theme-color-button-icon-neutral-border-active": "#5D6369", "eds-theme-color-button-icon-neutral-text": "#5D6369", "eds-theme-color-button-icon-neutral-text-hover": "#5D6369", @@ -342,20 +433,20 @@ "eds-theme-color-button-icon-error-text-hover": "#BD0044", "eds-theme-color-button-icon-error-text-active": "#FFFFFF", "eds-theme-color-checkbox-brand-background": "#8984E8", - "eds-theme-color-data-bar-background": "#F4F6F8", + "eds-theme-color-data-bar-background": "#EEE7E4", "eds-theme-color-data-bar-border": "#C0C4C8", "eds-theme-color-focus-ring": "#6B65E2", "eds-theme-color-focus-ring-inverted": "#FFFFFF", "eds-theme-color-form-border": "#878C90", - "eds-theme-color-form-border-hover": "#21272D", + "eds-theme-color-form-border-hover": "#333231", "eds-theme-color-form-background": "#FFFFFF", - "eds-theme-color-form-background-hover": "#F4F6F8", + "eds-theme-color-form-background-hover": "#EEE7E4", "eds-theme-color-form-label": "#383C43", "eds-theme-color-icon-neutral-default": "#5D6369", "eds-theme-color-icon-neutral-default-inverse": "#FFFFFF", "eds-theme-color-icon-neutral-default-hover": "#383C43", "eds-theme-color-icon-neutral-strong": "#383C43", - "eds-theme-color-icon-neutral-strong-hover": "#21272D", + "eds-theme-color-icon-neutral-strong-hover": "#333231", "eds-theme-color-icon-neutral-subtle": "#878C90", "eds-theme-color-icon-neutral-subtle-hover": "#5D6369", "eds-theme-color-icon-link-default": "#6B65E2", @@ -370,7 +461,7 @@ "eds-theme-color-icon-utility-error-hover": "#D41E52", "eds-theme-color-icon-grade-complete": "#00A56A", "eds-theme-color-icon-grade-complete-hover": "#00A56A", - "eds-theme-color-icon-grade-revise": "#21272D", + "eds-theme-color-icon-grade-revise": "#333231", "eds-theme-color-icon-grade-revise-hover": "#161B1F", "eds-theme-color-icon-grade-stop": "#F1497B", "eds-theme-color-icon-grade-stop-hover": "#D41E52", @@ -390,23 +481,52 @@ "eds-theme-color-link-neutral-text-decoration-focus": "var(--eds-theme-color-text-neutral-default-inverse)", "eds-theme-color-link-neutral-background-focus": "var(--eds-theme-color-text-neutral-default)", "eds-theme-color-modal-brand-header-background": "#8984E8", - "eds-theme-color-progress-bar-background": "#E7E8EA", - "eds-theme-color-progress-bar-border": "#E7E8EA", + "eds-theme-color-progress-bar-background": "#CFC9C7", + "eds-theme-color-progress-bar-border": "#CFC9C7", "eds-theme-color-radio-brand-background": "#8984E8", "eds-theme-color-text-neutral-default": "#383C43", "eds-theme-color-text-neutral-default-inverse": "#FFFFFF", - "eds-theme-color-text-neutral-strong": "#21272D", + "eds-theme-color-text-neutral-strong": "#333231", "eds-theme-color-text-neutral-subtle": "#5D6369", + "eds-theme-color-text-utility-neutral-primary": "#272625", + "eds-theme-color-text-utility-neutral-primary-hover": "#1A1919", + "eds-theme-color-text-utility-neutral-primary-active": "#0F0F0F", + "eds-theme-color-text-utility-neutral-secondary": "#6C6967", + "eds-theme-color-text-utility-neutral-secondary-hover": "#565352", + "eds-theme-color-text-utility-neutral-secondary-active": "#3F3E3D", + "eds-theme-color-text-utility-interactive-primary": "#0F2163", + "eds-theme-color-text-utility-interactive-primary-hover": "#0A164C", + "eds-theme-color-text-utility-interactive-primary-active": "#060E30", + "eds-theme-color-text-utility-interactive-secondary": "#3165D2", + "eds-theme-color-text-utility-interactive-secondary-hover": "#254EAC", + "eds-theme-color-text-utility-interactive-secondary-active": "#1B3889", + "eds-theme-color-text-utility-interactive-visited": "#8A50A7", + "eds-theme-color-text-utility-critical": "9F1C55", + "eds-theme-color-text-utility-critical-hover": "760C35", + "eds-theme-color-text-utility-critical-active": "620424", + "eds-theme-color-text-utility-favorable": "#367759", + "eds-theme-color-text-utility-favorable-hover": "#225E43", + "eds-theme-color-text-utility-favorable-active": "#13462F", + "eds-theme-color-text-utility-warning": "#876701", + "eds-theme-color-text-utility-warning-hover": "#695001", + "eds-theme-color-text-utility-warning-active": "#4D3A01", + "eds-theme-color-text-utility-informational": "#3165D2", + "eds-theme-color-text-utility-informational-hover": "#254EAC", + "eds-theme-color-text-utility-informational-active": "#1B3889", + "eds-theme-color-text-utility-disabled-primary": "#A09C9A", + "eds-theme-color-text-utility-disabled-secondary": "#CFC9C7", + "eds-theme-color-text-utility-inverse": "rgba(255, 255, 255, 1)", + "eds-theme-color-text-utility-inverse-disabled": "rgba(255, 255, 255, 0.5)", + "eds-theme-color-text-utility-placeholder": "#6C6967", "eds-theme-color-text-utility-success": "#007249", - "eds-theme-color-text-utility-warning": "#AC3400", "eds-theme-color-text-utility-error": "#BD0044", "eds-theme-color-text-grade-complete": "#007249", - "eds-theme-color-text-grade-revise": "#21272D", + "eds-theme-color-text-grade-revise": "#333231", "eds-theme-color-text-grade-stop": "#BD0044", "eds-theme-color-text-disabled": "#C0C4C8", "eds-theme-color-text-brand-default": "var(--eds-theme-color-text-brand-primary)", "eds-theme-color-text-brand-primary": "#5751D2", - "eds-theme-color-text-highlight-foreground": "#21272D", + "eds-theme-color-text-highlight-foreground": "#333231", "eds-theme-color-text-highlight-background": "#FDF1D0", "eds-theme-color-toggle-on-background": "var(--eds-theme-color-background-brand-primary-strong)", "eds-theme-color-toggle-off-background": "var(--eds-theme-color-icon-neutral-subtle)", @@ -427,6 +547,11 @@ "eds-border-width-md": "2px", "eds-border-width-lg": "4px", "eds-border-width-xl": "8px", + "eds-border-radius-50": "2", + "eds-border-radius-100": "4", + "eds-border-radius-150": "6", + "eds-border-radius-200": "8", + "eds-border-radius-500": "20", "eds-border-radius-none": "0px", "eds-border-radius-md": "4px", "eds-border-radius-lg": "8px", @@ -441,16 +566,120 @@ "eds-color-brand-grape-600": "#6B65E2", "eds-color-brand-grape-700": "#5751D2", "eds-color-brand-grape-800": "#3E42B1", - "eds-color-neutral-100": "#F4F6F8", - "eds-color-neutral-200": "#E7E8EA", + "eds-color-neutral-100": "#EEE7E4", + "eds-color-neutral-150": "#DFD9D6", + "eds-color-neutral-200": "#CFC9C7", + "eds-color-neutral-250": "#BEB8B6", "eds-color-neutral-300": "#C0C4C8", + "eds-color-neutral-350": "#A09C9A", "eds-color-neutral-400": "#999EA3", + "eds-color-neutral-450": "#868281", "eds-color-neutral-500": "#878C90", + "eds-color-neutral-550": "#6C6967", "eds-color-neutral-600": "#5D6369", + "eds-color-neutral-650": "#565352", "eds-color-neutral-700": "#383C43", - "eds-color-neutral-800": "#21272D", + "eds-color-neutral-750": "#3F3E3D", + "eds-color-neutral-800": "#333231", + "eds-color-neutral-850": "#272625", + "eds-color-neutral-900": "#1A1919", + "eds-color-neutral-950": "#0F0F0F", "eds-color-neutral-white": "#FFFFFF", + "eds-color-neutral-025": "#FFFFFF", + "eds-color-neutral-050": "#F9F3F1", "eds-color-neutral-black": "#161B1F", + "eds-color-red-100": "F8DDEA", + "eds-color-red-150": "F5CCE0", + "eds-color-red-200": "F1B5D2", + "eds-color-red-250": "EC9EC3", + "eds-color-red-350": "E67EB0", + "eds-color-red-450": "DB458D", + "eds-color-red-550": "C62B73", + "eds-color-red-650": "9F1C55", + "eds-color-red-750": "760C35", + "eds-color-red-800": "620424", + "eds-color-red-850": "4D0118", + "eds-color-red-900": "350110", + "eds-color-red-950": "23010B", + "eds-color-red-050": "FCF2F7", + "eds-color-orange-100": "#FFDCCA", + "eds-color-orange-150": "#FFC7AB", + "eds-color-orange-200": "#FFB38D", + "eds-color-orange-250": "#FFA070", + "eds-color-orange-350": "#E87F4A", + "eds-color-orange-450": "#D0622C", + "eds-color-orange-550": "#B8470F", + "eds-color-orange-650": "#92380C", + "eds-color-orange-750": "#672808", + "eds-color-orange-800": "#532006", + "eds-color-orange-850": "#401805", + "eds-color-orange-900": "#2B1003", + "eds-color-orange-950": "#1B0A02", + "eds-color-orange-050": "#FFEEE5", + "eds-color-yellow-100": "#FBE8AB", + "eds-color-yellow-150": "#F9DA78", + "eds-color-yellow-200": "#F1CA53", + "eds-color-yellow-250": "#E7B724", + "eds-color-yellow-350": "#C4970C", + "eds-color-yellow-450": "#A57D01", + "eds-color-yellow-550": "#876701", + "eds-color-yellow-650": "#695001", + "eds-color-yellow-750": "#4D3A01", + "eds-color-yellow-800": "#392B01", + "eds-color-yellow-850": "#2B2001", + "eds-color-yellow-900": "#1E1701", + "eds-color-yellow-950": "#130E01", + "eds-color-yellow-050": "#FDF3D3", + "eds-color-green-100": "#D0EDDD", + "eds-color-green-150": "#B3E1C7", + "eds-color-green-200": "#95D5B1", + "eds-color-green-250": "#74C899", + "eds-color-green-350": "#57B083", + "eds-color-green-450": "#3F926D", + "eds-color-green-550": "#367759", + "eds-color-green-650": "#225E43", + "eds-color-green-750": "#13462F", + "eds-color-green-800": "#0E3423", + "eds-color-green-850": "#0A271A", + "eds-color-green-900": "#071B12", + "eds-color-green-950": "#05120C", + "eds-color-green-050": "#E6F5ED", + "eds-color-blue-100": "#CEE6FF", + "eds-color-blue-150": "#B5DAFF", + "eds-color-blue-200": "#99CCFF", + "eds-color-blue-250": "#85BAFB", + "eds-color-blue-350": "#6199F3", + "eds-color-blue-450": "#437EED", + "eds-color-blue-550": "#3165D2", + "eds-color-blue-650": "#254EAC", + "eds-color-blue-750": "#1B3889", + "eds-color-blue-800": "#152D76", + "eds-color-blue-850": "#0F2163", + "eds-color-blue-900": "#0A164C", + "eds-color-blue-950": "#060E30", + "eds-color-blue-050": "#EAF4FF", + "eds-color-purple-100": "#F3E5FA", + "eds-color-purple-150": "#EAD1F6", + "eds-color-purple-200": "#E0BAF2", + "eds-color-purple-250": "#D5A2EE", + "eds-color-purple-350": "#C580E7", + "eds-color-purple-450": "#A765C7", + "eds-color-purple-550": "#8A50A7", + "eds-color-purple-650": "#6E3A88", + "eds-color-purple-750": "#562D69", + "eds-color-purple-800": "#452455", + "eds-color-purple-850": "#311A3C", + "eds-color-purple-900": "#25142E", + "eds-color-purple-950": "#190D1E", + "eds-color-purple-050": "#FBF5FD", + "eds-color-opacity-10": ".10", + "eds-color-opacity-20": ".20", + "eds-color-opacity-30": ".30", + "eds-color-opacity-40": ".40", + "eds-color-opacity-50": ".50", + "eds-color-opacity-60": ".60", + "eds-color-opacity-70": ".60", + "eds-color-opacity-80": ".80", "eds-color-other-mint-100": "#ECFFF5", "eds-color-other-mint-200": "#B7E9CE", "eds-color-other-mint-300": "#8FDCB3", @@ -495,24 +724,24 @@ "eds-box-shadow-md": "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08)", "eds-box-shadow-lg": "0px 4px 12px rgba(0, 0, 0, 0.16)", "eds-box-shadow-xl": "0px 6px 20px rgba(0, 0, 0, 0.2)", - "eds-size-1": "var(--eds-size-base-unit)", - "eds-size-2": "calc(var(--eds-size-base-unit) * 2)", - "eds-size-3": "calc(var(--eds-size-base-unit) * 3)", - "eds-size-4": "calc(var(--eds-size-base-unit) * 4)", - "eds-size-5": "calc(var(--eds-size-base-unit) * 5)", - "eds-size-6": "calc(var(--eds-size-base-unit) * 6)", - "eds-size-7": "calc(var(--eds-size-base-unit) * 7)", - "eds-size-8": "calc(var(--eds-size-base-unit) * 8)", - "eds-size-9": "calc(var(--eds-size-base-unit) * 9)", - "eds-size-10": "calc(var(--eds-size-base-unit) * 10)", - "eds-size-11": "calc(var(--eds-size-base-unit) * 11)", - "eds-size-12": "calc(var(--eds-size-base-unit) * 12)", - "eds-size-20": "calc(var(--eds-size-base-unit) * 20)", + "eds-size-1": "0.5rem", + "eds-size-2": "1rem", + "eds-size-3": "1.5rem", + "eds-size-4": "2rem", + "eds-size-5": "2.5rem", + "eds-size-6": "3rem", + "eds-size-7": "3.5rem", + "eds-size-8": "4rem", + "eds-size-9": "4.5rem`", + "eds-size-10": "5rem", + "eds-size-11": "5.5rem", + "eds-size-12": "6rem", + "eds-size-20": "10rem", "eds-size-base-unit": "0.5rem", - "eds-size-half": "calc(var(--eds-size-base-unit) / 2)", - "eds-size-quarter": "calc(var(--eds-size-base-unit) / 4)", - "eds-size-1-and-half": "calc(var(--eds-size-base-unit) * 1.5)", - "eds-size-2-and-half": "calc(var(--eds-size-base-unit) * 2.5)", + "eds-size-half": "0.25rem", + "eds-size-quarter": "0.125rem", + "eds-size-1-and-half": "0.75rem", + "eds-size-2-and-half": "1.275rem", "eds-z-index-0": "0", "eds-z-index-100": "100", "eds-z-index-200": "200", diff --git a/src/design-tokens/primitives.json b/src/design-tokens/primitives.json index 19a4c6666..8f8d004d8 100644 --- a/src/design-tokens/primitives.json +++ b/src/design-tokens/primitives.json @@ -28,16 +28,20 @@ "border": { "width": { "sm": { - "value": "1px" + "value": "1px", + "comment":"@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "md": { - "value": "2px" + "value": "2px", + "comment":"@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "lg": { - "value": "4px" + "value": "4px", + "comment":"@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "xl": { - "value": "8px" + "value": "8px", + "comment":"@deprecated This should not be used in code or design. It will be removed in a future version of EDS." } }, "radius": { @@ -45,14 +49,22 @@ "value": "0px" }, "md": { - "value": "4px" + "value": "4px", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "lg": { - "value": "8px" + "value": "8px", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "xl": { - "value": "20px" + "value": "20px", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, + "50": { "value": "2", "group": "size" }, + "100": { "value": "4", "group": "size" }, + "150": { "value": "6", "group": "size" }, + "200": { "value": "8", "group": "size" }, + "500": { "value": "20", "group": "size" }, "round": { "value": "50%", "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." @@ -65,51 +77,294 @@ "color": { "brand": { "grape": { - "100": { "value": "#F0F0FC", "group": "color" }, - "200": { "value": "#E0E0F9", "group": "color" }, - "300": { "value": "#C4C1F3", "group": "color" }, - "400": { "value": "#A6A3EE", "group": "color" }, - "500": { "value": "#8984E8", "group": "color" }, - "600": { "value": "#6B65E2", "group": "color" }, - "700": { "value": "#5751D2", "group": "color" }, - "800": { "value": "#3E42B1", "group": "color" } + "100": { + "value": "#F0F0FC", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "200": { + "value": "#E0E0F9", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "300": { + "value": "#C4C1F3", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "400": { + "value": "#A6A3EE", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "500": { + "value": "#8984E8", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "600": { + "value": "#6B65E2", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "700": { + "value": "#5751D2", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "800": { + "value": "#3E42B1", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + } } }, "neutral": { "white": { "value": "#FFFFFF", - "group": "color" + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "025": { + "value": "#FFFFFF", + "group": "color", + "comment": "TODO-AH: inserting missing value" + }, + "050": { "value": "#F9F3F1", "group": "color" }, + "100": { "value": "#EEE7E4", "group": "color" }, + "150": { "value": "#DFD9D6", "group": "color" }, + "200": { "value": "#CFC9C7", "group": "color" }, + "250": { "value": "#BEB8B6", "group": "color" }, + "300": { + "value": "#C0C4C8", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "350": { "value": "#A09C9A", "group": "color" }, + "400": { + "value": "#999EA3", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, - "100": { "value": "#F4F6F8", "group": "color" }, - "200": { "value": "#E7E8EA", "group": "color" }, - "300": { "value": "#C0C4C8", "group": "color" }, - "400": { "value": "#999EA3", "group": "color" }, - "500": { "value": "#878C90", "group": "color" }, - "600": { "value": "#5D6369", "group": "color" }, - "700": { "value": "#383C43", "group": "color" }, - "800": { "value": "#21272D", "group": "color" }, - "black": { "value": "#161B1F", "group": "color" } + "450": { "value": "#868281", "group": "color" }, + "500": { + "value": "#878C90", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "550": { "value": "#6C6967", "group": "color" }, + "600": { + "value": "#5D6369", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "650": { "value": "#565352", "group": "color" }, + "700": { + "value": "#383C43", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "750": { "value": "#3F3E3D", "group": "color" }, + "800": { "value": "#333231", "group": "color" }, + "850": { "value": "#272625", "group": "color" }, + "900": { "value": "#1A1919", "group": "color" }, + "950": { "value": "#0F0F0F", "group": "color" }, + "black": { + "value": "#161B1F", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + } + }, + "red": { + "050": { "value": "FCF2F7", "group": "color" }, + "100": { "value": "F8DDEA", "group": "color" }, + "150": { "value": "F5CCE0", "group": "color" }, + "200": { "value": "F1B5D2", "group": "color" }, + "250": { "value": "EC9EC3", "group": "color" }, + "350": { "value": "E67EB0", "group": "color" }, + "450": { "value": "DB458D", "group": "color" }, + "550": { "value": "C62B73", "group": "color" }, + "650": { "value": "9F1C55", "group": "color" }, + "750": { "value": "760C35", "group": "color" }, + "800": { "value": "620424", "group": "color" }, + "850": { "value": "4D0118", "group": "color" }, + "900": { "value": "350110", "group": "color" }, + "950": { "value": "23010B", "group": "color" } + }, + "orange": { + "050": { "value": "#FFEEE5", "group": "color" }, + "100": { "value": "#FFDCCA", "group": "color" }, + "150": { "value": "#FFC7AB", "group": "color" }, + "200": { "value": "#FFB38D", "group": "color" }, + "250": { "value": "#FFA070", "group": "color" }, + "350": { "value": "#E87F4A", "group": "color" }, + "450": { "value": "#D0622C", "group": "color" }, + "550": { "value": "#B8470F", "group": "color" }, + "650": { "value": "#92380C", "group": "color" }, + "750": { "value": "#672808", "group": "color" }, + "800": { "value": "#532006", "group": "color" }, + "850": { "value": "#401805", "group": "color" }, + "900": { "value": "#2B1003", "group": "color" }, + "950": { "value": "#1B0A02", "group": "color" } + }, + "yellow": { + "050": { "value": "#FDF3D3", "group": "color" }, + "100": { "value": "#FBE8AB", "group": "color" }, + "150": { "value": "#F9DA78", "group": "color" }, + "200": { "value": "#F1CA53", "group": "color" }, + "250": { "value": "#E7B724", "group": "color" }, + "350": { "value": "#C4970C", "group": "color" }, + "450": { "value": "#A57D01", "group": "color" }, + "550": { "value": "#876701", "group": "color" }, + "650": { "value": "#695001", "group": "color" }, + "750": { "value": "#4D3A01", "group": "color" }, + "800": { "value": "#392B01", "group": "color" }, + "850": { "value": "#2B2001", "group": "color" }, + "900": { "value": "#1E1701", "group": "color" }, + "950": { "value": "#130E01", "group": "color" } + }, + "green": { + "050": { "value": "#E6F5ED", "group": "color" }, + "100": { "value": "#D0EDDD", "group": "color" }, + "150": { "value": "#B3E1C7", "group": "color" }, + "200": { "value": "#95D5B1", "group": "color" }, + "250": { "value": "#74C899", "group": "color" }, + "350": { "value": "#57B083", "group": "color" }, + "450": { "value": "#3F926D", "group": "color" }, + "550": { "value": "#367759", "group": "color" }, + "650": { "value": "#225E43", "group": "color" }, + "750": { "value": "#13462F", "group": "color" }, + "800": { "value": "#0E3423", "group": "color" }, + "850": { "value": "#0A271A", "group": "color" }, + "900": { "value": "#071B12", "group": "color" }, + "950": { "value": "#05120C", "group": "color" } + }, + "blue": { + "050": { "value": "#EAF4FF", "group": "color" }, + "100": { "value": "#CEE6FF", "group": "color" }, + "150": { "value": "#B5DAFF", "group": "color" }, + "200": { "value": "#99CCFF", "group": "color" }, + "250": { "value": "#85BAFB", "group": "color" }, + "350": { "value": "#6199F3", "group": "color" }, + "450": { "value": "#437EED", "group": "color" }, + "550": { "value": "#3165D2", "group": "color" }, + "650": { "value": "#254EAC", "group": "color" }, + "750": { "value": "#1B3889", "group": "color" }, + "800": { "value": "#152D76", "group": "color" }, + "850": { "value": "#0F2163", "group": "color" }, + "900": { "value": "#0A164C", "group": "color" }, + "950": { "value": "#060E30", "group": "color" } + }, + "purple": { + "050": { "value": "#FBF5FD", "group": "color" }, + "100": { "value": "#F3E5FA", "group": "color" }, + "150": { "value": "#EAD1F6", "group": "color" }, + "200": { "value": "#E0BAF2", "group": "color" }, + "250": { "value": "#D5A2EE", "group": "color" }, + "350": { "value": "#C580E7", "group": "color" }, + "450": { "value": "#A765C7", "group": "color" }, + "550": { "value": "#8A50A7", "group": "color" }, + "650": { "value": "#6E3A88", "group": "color" }, + "750": { "value": "#562D69", "group": "color" }, + "800": { "value": "#452455", "group": "color" }, + "850": { "value": "#311A3C", "group": "color" }, + "900": { "value": "#25142E", "group": "color" }, + "950": { "value": "#190D1E", "group": "color" } + }, + "opacity": { + "10": { "value": ".10", "group": "color" }, + "20": { "value": ".20", "group": "color" }, + "30": { "value": ".30", "group": "color" }, + "40": { "value": ".40", "group": "color" }, + "50": { "value": ".50", "group": "color" }, + "60": { "value": ".60", "group": "color" }, + "70": { "value": ".60", "group": "color" }, + "80": { "value": ".80", "group": "color" } }, "other": { "mint": { - "100": { "value": "#ECFFF5", "group": "color" }, - "200": { "value": "#B7E9CE", "group": "color" }, - "300": { "value": "#8FDCB3", "group": "color" }, - "400": { "value": "#59C88C", "group": "color" }, - "500": { "value": "#00A56A", "group": "color" }, - "600": { "value": "#008656", "group": "color" }, - "700": { "value": "#007249", "group": "color" }, - "800": { "value": "#005939", "group": "color" } + "100": { + "value": "#ECFFF5", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "200": { + "value": "#B7E9CE", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "300": { + "value": "#8FDCB3", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "400": { + "value": "#59C88C", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "500": { + "value": "#00A56A", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "600": { + "value": "#008656", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "700": { + "value": "#007249", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "800": { + "value": "#005939", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + } }, "yellow": { - "100": { "value": "#FDF1D0", "group": "color" }, - "200": { "value": "#FFEBB3", "group": "color" }, - "300": { "value": "#FFDD80", "group": "color" }, - "400": { "value": "#F7BE2D", "group": "color" }, - "500": { "value": "#D18400", "group": "color" }, - "600": { "value": "#BF7300", "group": "color" }, - "700": { "value": "#9E5B03", "group": "color" }, - "800": { "value": "#854C03", "group": "color" } + "100": { + "value": "#FDF1D0", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "200": { + "value": "#FFEBB3", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "300": { + "value": "#FFDD80", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "400": { + "value": "#F7BE2D", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "500": { + "value": "#D18400", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "600": { + "value": "#BF7300", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "700": { + "value": "#9E5B03", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "800": { + "value": "#854C03", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + } }, "lemon": { "value": "#F5FF8F", @@ -122,24 +377,88 @@ "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "orange": { - "100": { "value": "#FFF1E9", "group": "color" }, - "200": { "value": "#FFCBA5", "group": "color" }, - "300": { "value": "#FFAF76", "group": "color" }, - "400": { "value": "#F6924A", "group": "color" }, - "500": { "value": "#E06B00", "group": "color" }, - "600": { "value": "#C64600", "group": "color" }, - "700": { "value": "#AC3400", "group": "color" }, - "800": { "value": "#842800", "group": "color" } + "100": { + "value": "#FFF1E9", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "200": { + "value": "#FFCBA5", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "300": { + "value": "#FFAF76", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "400": { + "value": "#F6924A", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "500": { + "value": "#E06B00", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "600": { + "value": "#C64600", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "700": { + "value": "#AC3400", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "800": { + "value": "#842800", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + } }, "ruby": { - "100": { "value": "#FFF0F4", "group": "color" }, - "200": { "value": "#FFCBD7", "group": "color" }, - "300": { "value": "#FB90B0", "group": "color" }, - "400": { "value": "#F76C96", "group": "color" }, - "500": { "value": "#F1497B", "group": "color" }, - "600": { "value": "#D41E52", "group": "color" }, - "700": { "value": "#BD0044", "group": "color" }, - "800": { "value": "#8F0134", "group": "color" } + "100": { + "value": "#FFF0F4", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "200": { + "value": "#FFCBD7", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "300": { + "value": "#FB90B0", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "400": { + "value": "#F76C96", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "500": { + "value": "#F1497B", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "600": { + "value": "#D41E52", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "700": { + "value": "#BD0044", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "800": { + "value": "#8F0134", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + } } } }, @@ -160,28 +479,35 @@ "outline": { "width": { "sm": { - "value": "1px" + "value": "1px", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "md": { - "value": "2px" + "value": "2px", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "lg": { - "value": "4px" + "value": "4px", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." } } }, "box-shadow": { "sm": { - "value": "0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05)" + "value": "0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05)", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "md": { - "value": "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08)" + "value": "0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08)", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "lg": { - "value": "0px 4px 12px rgba(0, 0, 0, 0.16)" + "value": "0px 4px 12px rgba(0, 0, 0, 0.16)", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "xl": { - "value": "0px 6px 20px rgba(0, 0, 0, 0.2)" + "value": "0px 6px 20px rgba(0, 0, 0, 0.2)", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." } }, "size": { @@ -190,71 +516,71 @@ "group": "size" }, "half": { - "value": "calc(var(--eds-size-base-unit) / 2)", + "value": "0.25rem", "group": "size" }, "quarter": { - "value": "calc(var(--eds-size-base-unit) / 4)", + "value": "0.125rem", "group": "size" }, "1": { - "value": "var(--eds-size-base-unit)", + "value": "0.5rem", "group": "size" }, "1-and-half": { - "value": "calc(var(--eds-size-base-unit) * 1.5)", + "value": "0.75rem", "group": "size" }, "2": { - "value": "calc(var(--eds-size-base-unit) * 2)", + "value": "1rem", "group": "size" }, "2-and-half": { - "value": "calc(var(--eds-size-base-unit) * 2.5)", + "value": "1.275rem", "group": "size" }, "3": { - "value": "calc(var(--eds-size-base-unit) * 3)", + "value": "1.5rem", "group": "size" }, "4": { - "value": "calc(var(--eds-size-base-unit) * 4)", + "value": "2rem", "group": "size" }, "5": { - "value": "calc(var(--eds-size-base-unit) * 5)", + "value": "2.5rem", "group": "size" }, "6": { - "value": "calc(var(--eds-size-base-unit) * 6)", + "value": "3rem", "group": "size" }, "7": { - "value": "calc(var(--eds-size-base-unit) * 7)", + "value": "3.5rem", "group": "size" }, "8": { - "value": "calc(var(--eds-size-base-unit) * 8)", + "value": "4rem", "group": "size" }, "9": { - "value": "calc(var(--eds-size-base-unit) * 9)", + "value": "4.5rem`", "group": "size" }, "10": { - "value": "calc(var(--eds-size-base-unit) * 10)", + "value": "5rem", "group": "size" }, "11": { - "value": "calc(var(--eds-size-base-unit) * 11)", + "value": "5.5rem", "group": "size" }, "12": { - "value": "calc(var(--eds-size-base-unit) * 12)", + "value": "6rem", "group": "size" }, "20": { - "value": "calc(var(--eds-size-base-unit) * 20)", + "value": "10rem", "group": "size" } }, diff --git a/src/design-tokens/themes.json b/src/design-tokens/themes.json index 4009390b3..b3f1e623b 100644 --- a/src/design-tokens/themes.json +++ b/src/design-tokens/themes.json @@ -2,6 +2,36 @@ "eds": { "theme": { "border": { + "radius": { + "actions": { + "value": "{eds.border.radius.full}" + }, + "surfaces": { + "lg": { + "value": "{eds.border.radius.none}" + }, + "md": { + "value": "{eds.border.radius.150}" + } + }, + "objects": { + "md": { + "value": "{eds.border.radius.100}" + }, + "sm": { + "value": "{eds.border.radius.50}" + } + }, + "tabUnderline": { + "default": { + "value": "{eds.border.radius.full}" + }, + "sticky": { + "value": "{eds.border.radius.full}", + "comment": "TODO-AH: this token is marked as deprecated" + } + } + }, "width": { "value": "{eds.border.width.sm}" } @@ -61,6 +91,10 @@ } }, "background": { + "input": { + "value": "rgba(255, 255, 255, 1)", + "comment": "TODO-AH: what is the token to use here?" + }, "neutral": { "default": { "@": { @@ -116,17 +150,260 @@ } }, "utility": { - "success": { - "value": "{eds.color.other.mint.100}", - "group": "color" + "base": { + "0": { + "value": "rgba(255, 255, 255, 1)", + "comment": "TODO-AH: what is the token to use here?" + }, + "1": { + "value": "{eds.color.neutral.025}", + "comment": "TODO-AH: this appears to be missing in the spreadsheet" + } + }, + "container": { + "@": { + "value": "rgba(255, 255, 255, 1)", + "comment": "TODO-AH: what token is this referring to?" + }, + "hover": { + "value": "{eds.color.neutral.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "active": { + "value": "{eds.color.neutral.100}" + } + }, + "overlay": { + "lowEmphasis": { + "value": "{eds.color.neutral.850}", + "comment": "TODO-AH: color-mix with opacity 50%" + }, + "highEmphasis": { + "value": "{eds.color.neutral.850}", + "comment": "TODO-AH: color-mix with opacity 80%" + } + }, + "neutral": { + "noEmphasis": { + "@": { + "value": "transparent", + "comment": "TODO-AH: what token is this referring to?" + }, + "hover": { + "value": "{eds.color.neutral.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "active": { + "value": "{eds.color.neutral.100}" + } + }, + "lowEmphasis": { + "@": { + "value": "{eds.color.neutral.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "hover": { + "value": "{eds.color.neutral.100}" + }, + "active": { + "value": "{eds.color.neutral.150}" + } + }, + "highEmphasis": { + "@": { + "value": "{eds.color.neutral.550}" + }, + "hover": { + "value": "{eds.color.neutral.650}" + }, + "active": { + "value": "{eds.color.neutral.750}" + } + } + }, + "interactive": { + "noEmphasis": { + "@": { + "value": "transparent", + "comment": "TODO-AH: what token is this referring to?" + }, + "hover": { + "value": "{eds.color.blue.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "active": { + "value": "{eds.color.blue.100}" + } + }, + "lowEmphasis": { + "@": { + "value": "{eds.color.blue.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "hover": { + "value": "{eds.color.blue.100}" + }, + "active": { + "value": "{eds.color.blue.150}" + } + }, + "highEmphasis": { + "@": { + "value": "{eds.color.blue.850}" + }, + "hover": { + "value": "{eds.color.blue.900}" + }, + "active": { + "value": "{eds.color.blue.950}" + } + } + }, + "critical": { + "noEmphasis": { + "@": { + "value": "transparent", + "comment": "TODO-AH: what token is this referring to?" + }, + "hover": { + "value": "{eds.color.red.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "active": { + "value": "{eds.color.red.100}" + } + }, + "lowEmphasis": { + "@": { + "value": "{eds.color.red.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "hover": { + "value": "{eds.color.red.100}" + }, + "active": { + "value": "{eds.color.red.150}" + } + }, + "highEmphasis": { + "@": { + "value": "{eds.color.red.650}" + }, + "hover": { + "value": "{eds.color.red.750}" + }, + "active": { + "value": "{eds.color.red.800}" + } + } + }, + "favorable": { + "lowEmphasis": { + "@": { + "value": "{eds.color.green.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "hover": { + "value": "{eds.color.green.100}" + }, + "active": { + "value": "{eds.color.green.150}" + } + }, + "highEmphasis": { + "@": { + "value": "{eds.color.green.550}" + }, + "hover": { + "value": "{eds.color.green.650}" + }, + "active": { + "value": "{eds.color.green.750}" + } + } }, "warning": { - "value": "{eds.color.other.orange.100}", - "group": "color" + "lowEmphasis": { + "@": { + "value": "{eds.color.yellow.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "hover": { + "value": "{eds.color.yellow.100}" + }, + "active": { + "value": "{eds.color.yellow.150}" + } + } + }, + "information": { + "lowEmphasis": { + "@": { + "value": "{eds.color.blue.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "hover": { + "value": "{eds.color.blue.100}" + }, + "active": { + "value": "{eds.color.blue.150}" + } + } + }, + "disabled": { + "noEmphasis": { + "value": "transparent", + "comment": "TODO-AH: this appears to be missing in the spreadsheet" + }, + "lowEmphasis": { + "value": "{eds.color.neutral.100}" + }, + "mediumEmphasis": { + "value": "{eds.color.neutral.200}" + } + }, + "inverse": { + "noEmphasis": { + "@": { + "value": "transparent", + "comment": "TODO-AH: this appears to be missing in the spreadsheet" + }, + "hover": { + "value": "rgba(255,255,255, 0.2)", + "comment": "TODO-AH: missing token to color-mix with opacity 20%" + }, + "active": { + "value": "rgba(255, 255, 255, 0.3)", + "comment": "TODO-AH: missing token to color-mix with opacity 20%" + } + }, + "highEmphasis": { + "@": { + "value": "rgba(255, 255, 255, 1)", + "comment": "TODO-AH: missing token to color-mix with opacity 100%" + }, + "hover": { + "value": "{eds.color.neutral.050}", + "comment": "TODO-AH: name format does not match the tier 1" + }, + "active": { + "value": "{eds.color.neutral.100}" + } + }, + "disabled": { + "value": "rgba(255, 255, 255, 0.5)", + "comment": "TODO-AH: missing token to color-mix with opacity 50%" + } + }, + "success": { + "value": "{eds.color.other.mint.100}", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "error": { "value": "{eds.color.other.ruby.100}", - "group": "color" + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." } }, "grade": { @@ -227,34 +504,145 @@ } }, "utility": { - "success": { - "subtle": { - "value": "{eds.color.other.mint.200}", - "group": "color" + "neutral": { + "lowEmphasis": { + "@": { + "value": "{eds.color.neutral.200}" + }, + "hover": { + "value": "{eds.color.neutral.250}" + }, + "active": { + "value": "{eds.color.neutral.350}" + } }, - "default": { - "value": "{eds.color.other.mint.300}", - "group": "color" + "mediumEmphasis": { + "@": { + "value": "{eds.color.neutral.450}" + }, + "hover": { + "value": "{eds.color.neutral.550}" + }, + "active": { + "value": "{eds.color.neutral.650}" + } }, - "strong": { - "value": "{eds.color.other.mint.400}", - "group": "color" + "highEmphasis": { + "@": { + "value": "{eds.color.neutral.850}" + }, + "hover": { + "value": "{eds.color.neutral.900}" + }, + "active": { + "value": "{eds.color.neutral.950}" + } + } + }, + "interactive": { + "@": { + "value": "{eds.color.blue.850}" + }, + "hover": { + "value": "{eds.color.blue.900}" + }, + "active": { + "value": "{eds.color.blue.950}" + } + }, + "critical": { + "@": { + "value": "{eds.color.red.650}" + }, + "hover": { + "value": "{eds.color.red.750}" + }, + "active": { + "value": "{eds.color.red.800}" + } + }, + "favorable": { + "@": { + "value": "{eds.color.green.550}" + }, + "hover": { + "value": "{eds.color.green.650}" + }, + "active": { + "value": "{eds.color.green.750}" } }, "warning": { + "@": { + "value": "{eds.color.yellow.550}" + }, + "hover": { + "value": "{eds.color.yellow.650}" + }, + "active": { + "value": "{eds.color.yellow.750}" + }, "subtle": { "value": "{eds.color.other.orange.200}", - "group": "color" + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "default": { "value": "{eds.color.other.orange.300}", - "group": "color" + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "strong": { "value": "{eds.color.other.orange.400}", - "group": "color" + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + } + }, + "informational": { + "@": { + "value": "{eds.color.blue.550}" + }, + "hover": { + "value": "{eds.color.blue.650}" + }, + "active": { + "value": "{eds.color.blue.750}" + } + }, + "disabled": { + "value": "{eds.color.neutral.350}" + }, + "focus": { + "value": "{eds.color.blue.550}" + }, + "inverse": { + "@": { + "value": "rgba(255, 255, 255, 1)", + "comment": "TODO-AH: missing token to color-mix with opacity 100%" + }, + "disabled": { + "value": "rgba(255, 255, 255, 0.5)", + "comment": "TODO-AH: missing token to color-mix with opacity 50%" } }, + "success": { + "subtle": { + "value": "{eds.color.other.mint.200}", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "default": { + "value": "{eds.color.other.mint.300}", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + }, + "strong": { + "value": "{eds.color.other.mint.400}", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." + } + }, + "error": { "subtle": { "value": "{eds.color.other.ruby.200}", @@ -1290,13 +1678,126 @@ } }, "utility": { - "success": { - "value": "{eds.color.other.mint.700}", - "group": "color" + "neutral": { + "primary": { + "@": { + "value": "{eds.color.neutral.850}" + }, + "hover": { + "value": "{eds.color.neutral.900}" + }, + "active": { + "value": "{eds.color.neutral.950}" + } + }, + "secondary": { + "@": { + "value": "{eds.color.neutral.550}" + }, + "hover": { + "value": "{eds.color.neutral.650}" + }, + "active": { + "value": "{eds.color.neutral.750}" + } + } + }, + "interactive": { + "primary": { + "@": { + "value": "{eds.color.blue.850}" + }, + "hover": { + "value": "{eds.color.blue.900}" + }, + "active": { + "value": "{eds.color.blue.950}" + } + }, + "secondary": { + "@": { + "value": "{eds.color.blue.550}" + }, + "hover": { + "value": "{eds.color.blue.650}" + }, + "active": { + "value": "{eds.color.blue.750}" + } + }, + "visited": { + "value": "{eds.color.purple.550}" + } + }, + "critical": { + "@": { + "value": "{eds.color.red.650}" + }, + "hover": { + "value": "{eds.color.red.750}" + }, + "active": { + "value": "{eds.color.red.800}" + } + }, + "favorable": { + "@": { + "value": "{eds.color.green.550}" + }, + "hover": { + "value": "{eds.color.green.650}" + }, + "active": { + "value": "{eds.color.green.750}" + } }, "warning": { - "value": "{eds.color.other.orange.700}", - "group": "color" + "@": { + "value": "{eds.color.yellow.550}" + }, + "hover": { + "value": "{eds.color.yellow.650}" + }, + "active": { + "value": "{eds.color.yellow.750}" + } + }, + "informational": { + "@": { + "value": "{eds.color.blue.550}" + }, + "hover": { + "value": "{eds.color.blue.650}" + }, + "active": { + "value": "{eds.color.blue.750}" + } + }, + "disabled": { + "primary": { + "value": "{eds.color.neutral.350}" + }, + "secondary": { + "value": "{eds.color.neutral.200}" + } + }, + "inverse": { + "@": { + "value": "rgba(255, 255, 255, 1)", + "comment": "TODO-AH: what token is this referring to?" + }, + "disabled": { + "value": "rgba(255, 255, 255, 0.5)", + "comment": "TODO-AH: what token is this referring to?" + } + }, + "placeholder": { + "value": "{eds.color.neutral.550}" + }, + "success": { + "value": "{eds.color.other.mint.700}", + "group": "color", + "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "error": { "value": "{eds.color.other.ruby.700}", diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css index ba11ce969..484e3dfef 100644 --- a/src/tokens-dist/css/variables.css +++ b/src/tokens-dist/css/variables.css @@ -7,96 +7,205 @@ --eds-z-index-200: 200; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-z-index-100: 100; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-z-index-0: 0; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ - --eds-size-2-and-half: calc(var(--eds-size-base-unit) * 2.5); - --eds-size-1-and-half: calc(var(--eds-size-base-unit) * 1.5); - --eds-size-quarter: calc(var(--eds-size-base-unit) / 4); - --eds-size-half: calc(var(--eds-size-base-unit) / 2); + --eds-size-2-and-half: 1.275rem; + --eds-size-1-and-half: 0.75rem; + --eds-size-quarter: 0.125rem; + --eds-size-half: 0.25rem; --eds-size-base-unit: 0.5rem; - --eds-size-20: calc(var(--eds-size-base-unit) * 20); - --eds-size-12: calc(var(--eds-size-base-unit) * 12); - --eds-size-11: calc(var(--eds-size-base-unit) * 11); - --eds-size-10: calc(var(--eds-size-base-unit) * 10); - --eds-size-9: calc(var(--eds-size-base-unit) * 9); - --eds-size-8: calc(var(--eds-size-base-unit) * 8); - --eds-size-7: calc(var(--eds-size-base-unit) * 7); - --eds-size-6: calc(var(--eds-size-base-unit) * 6); - --eds-size-5: calc(var(--eds-size-base-unit) * 5); - --eds-size-4: calc(var(--eds-size-base-unit) * 4); - --eds-size-3: calc(var(--eds-size-base-unit) * 3); - --eds-size-2: calc(var(--eds-size-base-unit) * 2); - --eds-size-1: var(--eds-size-base-unit); - --eds-box-shadow-xl: 0px 6px 20px rgba(0, 0, 0, 0.2); - --eds-box-shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.16); - --eds-box-shadow-md: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08); - --eds-box-shadow-sm: 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05); - --eds-outline-width-lg: 4px; - --eds-outline-width-md: 2px; - --eds-outline-width-sm: 1px; + --eds-size-20: 10rem; + --eds-size-12: 6rem; + --eds-size-11: 5.5rem; + --eds-size-10: 5rem; + --eds-size-9: 4.5rem`; + --eds-size-8: 4rem; + --eds-size-7: 3.5rem; + --eds-size-6: 3rem; + --eds-size-5: 2.5rem; + --eds-size-4: 2rem; + --eds-size-3: 1.5rem; + --eds-size-2: 1rem; + --eds-size-1: 0.5rem; + --eds-box-shadow-xl: 0px 6px 20px rgba(0, 0, 0, 0.2); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-box-shadow-lg: 0px 4px 12px rgba(0, 0, 0, 0.16); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-box-shadow-md: 0px 0px 2px rgba(0, 0, 0, 0.2), 0px 2px 8px rgba(0, 0, 0, 0.08); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-box-shadow-sm: 0px 0px 1px rgba(0, 0, 0, 0.25), 0px 2px 1px rgba(0, 0, 0, 0.05); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-outline-width-lg: 4px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-outline-width-md: 2px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-outline-width-sm: 1px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-l-linelength-width: 36rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-l-sidebar-width: 13.5rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-l-max-width: 71.25rem; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ - --eds-color-other-ruby-800: #8F0134; - --eds-color-other-ruby-700: #BD0044; - --eds-color-other-ruby-600: #D41E52; - --eds-color-other-ruby-500: #F1497B; - --eds-color-other-ruby-400: #F76C96; - --eds-color-other-ruby-300: #FB90B0; - --eds-color-other-ruby-200: #FFCBD7; - --eds-color-other-ruby-100: #FFF0F4; - --eds-color-other-orange-800: #842800; - --eds-color-other-orange-700: #AC3400; - --eds-color-other-orange-600: #C64600; - --eds-color-other-orange-500: #E06B00; - --eds-color-other-orange-400: #F6924A; - --eds-color-other-orange-300: #FFAF76; - --eds-color-other-orange-200: #FFCBA5; - --eds-color-other-orange-100: #FFF1E9; + --eds-color-other-ruby-800: #8F0134; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-ruby-700: #BD0044; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-ruby-600: #D41E52; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-ruby-500: #F1497B; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-ruby-400: #F76C96; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-ruby-300: #FB90B0; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-ruby-200: #FFCBD7; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-ruby-100: #FFF0F4; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-orange-800: #842800; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-orange-700: #AC3400; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-orange-600: #C64600; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-orange-500: #E06B00; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-orange-400: #F6924A; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-orange-300: #FFAF76; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-orange-200: #FFCBA5; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-orange-100: #FFF1E9; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-color-other-eraser: #F3DCE2; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-color-other-lemon: #F5FF8F; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ - --eds-color-other-yellow-800: #854C03; - --eds-color-other-yellow-700: #9E5B03; - --eds-color-other-yellow-600: #BF7300; - --eds-color-other-yellow-500: #D18400; - --eds-color-other-yellow-400: #F7BE2D; - --eds-color-other-yellow-300: #FFDD80; - --eds-color-other-yellow-200: #FFEBB3; - --eds-color-other-yellow-100: #FDF1D0; - --eds-color-other-mint-800: #005939; - --eds-color-other-mint-700: #007249; - --eds-color-other-mint-600: #008656; - --eds-color-other-mint-500: #00A56A; - --eds-color-other-mint-400: #59C88C; - --eds-color-other-mint-300: #8FDCB3; - --eds-color-other-mint-200: #B7E9CE; - --eds-color-other-mint-100: #ECFFF5; - --eds-color-neutral-black: #161B1F; - --eds-color-neutral-white: #FFFFFF; - --eds-color-neutral-800: #21272D; - --eds-color-neutral-700: #383C43; - --eds-color-neutral-600: #5D6369; - --eds-color-neutral-500: #878C90; - --eds-color-neutral-400: #999EA3; - --eds-color-neutral-300: #C0C4C8; - --eds-color-neutral-200: #E7E8EA; - --eds-color-neutral-100: #F4F6F8; - --eds-color-brand-grape-800: #3E42B1; - --eds-color-brand-grape-700: #5751D2; - --eds-color-brand-grape-600: #6B65E2; - --eds-color-brand-grape-500: #8984E8; - --eds-color-brand-grape-400: #A6A3EE; - --eds-color-brand-grape-300: #C4C1F3; - --eds-color-brand-grape-200: #E0E0F9; - --eds-color-brand-grape-100: #F0F0FC; + --eds-color-other-yellow-800: #854C03; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-yellow-700: #9E5B03; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-yellow-600: #BF7300; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-yellow-500: #D18400; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-yellow-400: #F7BE2D; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-yellow-300: #FFDD80; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-yellow-200: #FFEBB3; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-yellow-100: #FDF1D0; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-mint-800: #005939; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-mint-700: #007249; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-mint-600: #008656; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-mint-500: #00A56A; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-mint-400: #59C88C; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-mint-300: #8FDCB3; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-mint-200: #B7E9CE; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-other-mint-100: #ECFFF5; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-opacity-80: .80; + --eds-color-opacity-70: .60; + --eds-color-opacity-60: .60; + --eds-color-opacity-50: .50; + --eds-color-opacity-40: .40; + --eds-color-opacity-30: .30; + --eds-color-opacity-20: .20; + --eds-color-opacity-10: .10; + --eds-color-purple-050: #FBF5FD; + --eds-color-purple-950: #190D1E; + --eds-color-purple-900: #25142E; + --eds-color-purple-850: #311A3C; + --eds-color-purple-800: #452455; + --eds-color-purple-750: #562D69; + --eds-color-purple-650: #6E3A88; + --eds-color-purple-550: #8A50A7; + --eds-color-purple-450: #A765C7; + --eds-color-purple-350: #C580E7; + --eds-color-purple-250: #D5A2EE; + --eds-color-purple-200: #E0BAF2; + --eds-color-purple-150: #EAD1F6; + --eds-color-purple-100: #F3E5FA; + --eds-color-blue-050: #EAF4FF; + --eds-color-blue-950: #060E30; + --eds-color-blue-900: #0A164C; + --eds-color-blue-850: #0F2163; + --eds-color-blue-800: #152D76; + --eds-color-blue-750: #1B3889; + --eds-color-blue-650: #254EAC; + --eds-color-blue-550: #3165D2; + --eds-color-blue-450: #437EED; + --eds-color-blue-350: #6199F3; + --eds-color-blue-250: #85BAFB; + --eds-color-blue-200: #99CCFF; + --eds-color-blue-150: #B5DAFF; + --eds-color-blue-100: #CEE6FF; + --eds-color-green-050: #E6F5ED; + --eds-color-green-950: #05120C; + --eds-color-green-900: #071B12; + --eds-color-green-850: #0A271A; + --eds-color-green-800: #0E3423; + --eds-color-green-750: #13462F; + --eds-color-green-650: #225E43; + --eds-color-green-550: #367759; + --eds-color-green-450: #3F926D; + --eds-color-green-350: #57B083; + --eds-color-green-250: #74C899; + --eds-color-green-200: #95D5B1; + --eds-color-green-150: #B3E1C7; + --eds-color-green-100: #D0EDDD; + --eds-color-yellow-050: #FDF3D3; + --eds-color-yellow-950: #130E01; + --eds-color-yellow-900: #1E1701; + --eds-color-yellow-850: #2B2001; + --eds-color-yellow-800: #392B01; + --eds-color-yellow-750: #4D3A01; + --eds-color-yellow-650: #695001; + --eds-color-yellow-550: #876701; + --eds-color-yellow-450: #A57D01; + --eds-color-yellow-350: #C4970C; + --eds-color-yellow-250: #E7B724; + --eds-color-yellow-200: #F1CA53; + --eds-color-yellow-150: #F9DA78; + --eds-color-yellow-100: #FBE8AB; + --eds-color-orange-050: #FFEEE5; + --eds-color-orange-950: #1B0A02; + --eds-color-orange-900: #2B1003; + --eds-color-orange-850: #401805; + --eds-color-orange-800: #532006; + --eds-color-orange-750: #672808; + --eds-color-orange-650: #92380C; + --eds-color-orange-550: #B8470F; + --eds-color-orange-450: #D0622C; + --eds-color-orange-350: #E87F4A; + --eds-color-orange-250: #FFA070; + --eds-color-orange-200: #FFB38D; + --eds-color-orange-150: #FFC7AB; + --eds-color-orange-100: #FFDCCA; + --eds-color-red-050: FCF2F7; + --eds-color-red-950: 23010B; + --eds-color-red-900: 350110; + --eds-color-red-850: 4D0118; + --eds-color-red-800: 620424; + --eds-color-red-750: 760C35; + --eds-color-red-650: 9F1C55; + --eds-color-red-550: C62B73; + --eds-color-red-450: DB458D; + --eds-color-red-350: E67EB0; + --eds-color-red-250: EC9EC3; + --eds-color-red-200: F1B5D2; + --eds-color-red-150: F5CCE0; + --eds-color-red-100: F8DDEA; + --eds-color-neutral-black: #161B1F; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-neutral-050: #F9F3F1; + --eds-color-neutral-025: #FFFFFF; /* TODO-AH: inserting missing value */ + --eds-color-neutral-white: #FFFFFF; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-neutral-950: #0F0F0F; + --eds-color-neutral-900: #1A1919; + --eds-color-neutral-850: #272625; + --eds-color-neutral-800: #333231; + --eds-color-neutral-750: #3F3E3D; + --eds-color-neutral-700: #383C43; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-neutral-650: #565352; + --eds-color-neutral-600: #5D6369; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-neutral-550: #6C6967; + --eds-color-neutral-500: #878C90; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-neutral-450: #868281; + --eds-color-neutral-400: #999EA3; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-neutral-350: #A09C9A; + --eds-color-neutral-300: #C0C4C8; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-neutral-250: #BEB8B6; + --eds-color-neutral-200: #CFC9C7; + --eds-color-neutral-150: #DFD9D6; + --eds-color-neutral-100: #EEE7E4; + --eds-color-brand-grape-800: #3E42B1; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-brand-grape-700: #5751D2; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-brand-grape-600: #6B65E2; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-brand-grape-500: #8984E8; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-brand-grape-400: #A6A3EE; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-brand-grape-300: #C4C1F3; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-brand-grape-200: #E0E0F9; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-brand-grape-100: #F0F0FC; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-border-radius-full: 9999px; --eds-border-radius-round: 50%; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ - --eds-border-radius-xl: 20px; - --eds-border-radius-lg: 8px; - --eds-border-radius-md: 4px; + --eds-border-radius-xl: 20px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-border-radius-lg: 8px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-border-radius-md: 4px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-border-radius-none: 0px; - --eds-border-width-xl: 8px; - --eds-border-width-lg: 4px; - --eds-border-width-md: 2px; - --eds-border-width-sm: 1px; + --eds-border-radius-500: 20; + --eds-border-radius-200: 8; + --eds-border-radius-150: 6; + --eds-border-radius-100: 4; + --eds-border-radius-50: 2; + --eds-border-width-xl: 8px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-border-width-lg: 4px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-border-width-md: 2px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-border-width-sm: 1px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-anim-ease: ease; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-anim-move-long: 0.4s; --eds-anim-move-medium: 0.3s; @@ -113,6 +222,8 @@ --eds-theme-color-toggle-off-background: var(--eds-theme-color-icon-neutral-subtle); --eds-theme-color-toggle-on-background: var(--eds-theme-color-background-brand-primary-strong); --eds-theme-color-text-brand-default: var(--eds-theme-color-text-brand-primary); + --eds-theme-color-text-utility-inverse-disabled: rgba(255, 255, 255, 0.5); /* TODO-AH: what token is this referring to? */ + --eds-theme-color-text-utility-inverse: rgba(255, 255, 255, 1); /* TODO-AH: what token is this referring to? */ --eds-theme-color-link-neutral-background-focus: var(--eds-theme-color-text-neutral-default); --eds-theme-color-link-neutral-text-decoration-focus: var(--eds-theme-color-text-neutral-default-inverse); --eds-theme-color-link-neutral-text-decoration-hover: var(--eds-theme-color-text-brand-default); @@ -127,7 +238,21 @@ --eds-theme-color-link-brand-text-focus: var(--eds-theme-color-text-neutral-default-inverse); --eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-brand-default); --eds-theme-color-link-brand-text: var(--eds-theme-color-text-neutral-strong); + --eds-theme-color-border-utility-inverse-disabled: rgba(255, 255, 255, 0.5); /* TODO-AH: missing token to color-mix with opacity 50% */ + --eds-theme-color-border-utility-inverse: rgba(255, 255, 255, 1); /* TODO-AH: missing token to color-mix with opacity 100% */ --eds-theme-color-border-brand-primary-default: var(--eds-theme-color-border-brand-primary); + --eds-theme-color-background-utility-inverse-disabled: rgba(255, 255, 255, 0.5); /* TODO-AH: missing token to color-mix with opacity 50% */ + --eds-theme-color-background-utility-inverse-high-emphasis: rgba(255, 255, 255, 1); /* TODO-AH: missing token to color-mix with opacity 100% */ + --eds-theme-color-background-utility-inverse-no-emphasis-active: rgba(255, 255, 255, 0.3); /* TODO-AH: missing token to color-mix with opacity 20% */ + --eds-theme-color-background-utility-inverse-no-emphasis-hover: rgba(255,255,255, 0.2); /* TODO-AH: missing token to color-mix with opacity 20% */ + --eds-theme-color-background-utility-inverse-no-emphasis: transparent; /* TODO-AH: this appears to be missing in the spreadsheet */ + --eds-theme-color-background-utility-disabled-no-emphasis: transparent; /* TODO-AH: this appears to be missing in the spreadsheet */ + --eds-theme-color-background-utility-critical-no-emphasis: transparent; /* TODO-AH: what token is this referring to? */ + --eds-theme-color-background-utility-interactive-no-emphasis: transparent; /* TODO-AH: what token is this referring to? */ + --eds-theme-color-background-utility-neutral-no-emphasis: transparent; /* TODO-AH: what token is this referring to? */ + --eds-theme-color-background-utility-container: rgba(255, 255, 255, 1); /* TODO-AH: what token is this referring to? */ + --eds-theme-color-background-utility-base-0: rgba(255, 255, 255, 1); /* TODO-AH: what is the token to use here? */ + --eds-theme-color-background-input: rgba(255, 255, 255, 1); /* TODO-AH: what is the token to use here? */ --eds-theme-typography-tag: var(--eds-typography-preset-009); --eds-theme-typography-tab-sm-active: var(--eds-typography-preset-009); --eds-theme-typography-tab-sm: var(--eds-typography-preset-008-light); @@ -285,8 +410,35 @@ --eds-theme-color-text-grade-revise: var(--eds-color-neutral-800); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-theme-color-text-grade-complete: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-theme-color-text-utility-error: var(--eds-color-other-ruby-700); - --eds-theme-color-text-utility-warning: var(--eds-color-other-orange-700); - --eds-theme-color-text-utility-success: var(--eds-color-other-mint-700); + --eds-theme-color-text-utility-success: var(--eds-color-other-mint-700); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-theme-color-text-utility-placeholder: var(--eds-color-neutral-550); + --eds-theme-color-text-utility-disabled-secondary: var(--eds-color-neutral-200); + --eds-theme-color-text-utility-disabled-primary: var(--eds-color-neutral-350); + --eds-theme-color-text-utility-informational-active: var(--eds-color-blue-750); + --eds-theme-color-text-utility-informational-hover: var(--eds-color-blue-650); + --eds-theme-color-text-utility-informational: var(--eds-color-blue-550); + --eds-theme-color-text-utility-warning-active: var(--eds-color-yellow-750); + --eds-theme-color-text-utility-warning-hover: var(--eds-color-yellow-650); + --eds-theme-color-text-utility-warning: var(--eds-color-yellow-550); + --eds-theme-color-text-utility-favorable-active: var(--eds-color-green-750); + --eds-theme-color-text-utility-favorable-hover: var(--eds-color-green-650); + --eds-theme-color-text-utility-favorable: var(--eds-color-green-550); + --eds-theme-color-text-utility-critical-active: var(--eds-color-red-800); + --eds-theme-color-text-utility-critical-hover: var(--eds-color-red-750); + --eds-theme-color-text-utility-critical: var(--eds-color-red-650); + --eds-theme-color-text-utility-interactive-visited: var(--eds-color-purple-550); + --eds-theme-color-text-utility-interactive-secondary-active: var(--eds-color-blue-750); + --eds-theme-color-text-utility-interactive-secondary-hover: var(--eds-color-blue-650); + --eds-theme-color-text-utility-interactive-secondary: var(--eds-color-blue-550); + --eds-theme-color-text-utility-interactive-primary-active: var(--eds-color-blue-950); + --eds-theme-color-text-utility-interactive-primary-hover: var(--eds-color-blue-900); + --eds-theme-color-text-utility-interactive-primary: var(--eds-color-blue-850); + --eds-theme-color-text-utility-neutral-secondary-active: var(--eds-color-neutral-750); + --eds-theme-color-text-utility-neutral-secondary-hover: var(--eds-color-neutral-650); + --eds-theme-color-text-utility-neutral-secondary: var(--eds-color-neutral-550); + --eds-theme-color-text-utility-neutral-primary-active: var(--eds-color-neutral-950); + --eds-theme-color-text-utility-neutral-primary-hover: var(--eds-color-neutral-900); + --eds-theme-color-text-utility-neutral-primary: var(--eds-color-neutral-850); --eds-theme-color-text-neutral-subtle: var(--eds-color-neutral-600); --eds-theme-color-text-neutral-strong: var(--eds-color-neutral-800); --eds-theme-color-text-neutral-default-inverse: var(--eds-color-neutral-white); @@ -476,12 +628,38 @@ --eds-theme-color-border-utility-error-strong: var(--eds-color-other-ruby-400); --eds-theme-color-border-utility-error-default: var(--eds-color-other-ruby-300); --eds-theme-color-border-utility-error-subtle: var(--eds-color-other-ruby-200); - --eds-theme-color-border-utility-warning-strong: var(--eds-color-other-orange-400); - --eds-theme-color-border-utility-warning-default: var(--eds-color-other-orange-300); - --eds-theme-color-border-utility-warning-subtle: var(--eds-color-other-orange-200); - --eds-theme-color-border-utility-success-strong: var(--eds-color-other-mint-400); - --eds-theme-color-border-utility-success-default: var(--eds-color-other-mint-300); - --eds-theme-color-border-utility-success-subtle: var(--eds-color-other-mint-200); + --eds-theme-color-border-utility-success-strong: var(--eds-color-other-mint-400); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-theme-color-border-utility-success-default: var(--eds-color-other-mint-300); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-theme-color-border-utility-success-subtle: var(--eds-color-other-mint-200); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-theme-color-border-utility-focus: var(--eds-color-blue-550); + --eds-theme-color-border-utility-disabled: var(--eds-color-neutral-350); + --eds-theme-color-border-utility-informational-active: var(--eds-color-blue-750); + --eds-theme-color-border-utility-informational-hover: var(--eds-color-blue-650); + --eds-theme-color-border-utility-informational: var(--eds-color-blue-550); + --eds-theme-color-border-utility-warning-strong: var(--eds-color-other-orange-400); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-theme-color-border-utility-warning-default: var(--eds-color-other-orange-300); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-theme-color-border-utility-warning-subtle: var(--eds-color-other-orange-200); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-theme-color-border-utility-warning-active: var(--eds-color-yellow-750); + --eds-theme-color-border-utility-warning-hover: var(--eds-color-yellow-650); + --eds-theme-color-border-utility-warning: var(--eds-color-yellow-550); + --eds-theme-color-border-utility-favorable-active: var(--eds-color-green-750); + --eds-theme-color-border-utility-favorable-hover: var(--eds-color-green-650); + --eds-theme-color-border-utility-favorable: var(--eds-color-green-550); + --eds-theme-color-border-utility-critical-active: var(--eds-color-red-800); + --eds-theme-color-border-utility-critical-hover: var(--eds-color-red-750); + --eds-theme-color-border-utility-critical: var(--eds-color-red-650); + --eds-theme-color-border-utility-interactive-active: var(--eds-color-blue-950); + --eds-theme-color-border-utility-interactive-hover: var(--eds-color-blue-900); + --eds-theme-color-border-utility-interactive: var(--eds-color-blue-850); + --eds-theme-color-border-utility-neutral-high-emphasis-active: var(--eds-color-neutral-950); + --eds-theme-color-border-utility-neutral-high-emphasis-hover: var(--eds-color-neutral-900); + --eds-theme-color-border-utility-neutral-high-emphasis: var(--eds-color-neutral-850); + --eds-theme-color-border-utility-neutral-medium-emphasis-active: var(--eds-color-neutral-650); + --eds-theme-color-border-utility-neutral-medium-emphasis-hover: var(--eds-color-neutral-550); + --eds-theme-color-border-utility-neutral-medium-emphasis: var(--eds-color-neutral-450); + --eds-theme-color-border-utility-neutral-low-emphasis-active: var(--eds-color-neutral-350); + --eds-theme-color-border-utility-neutral-low-emphasis-hover: var(--eds-color-neutral-250); + --eds-theme-color-border-utility-neutral-low-emphasis: var(--eds-color-neutral-200); --eds-theme-color-border-brand-primary-strong: var(--eds-color-brand-grape-400); --eds-theme-color-border-brand-primary: var(--eds-color-brand-grape-300); /* @deprecated This token is deprecated. Please use eds-theme-color-border-brand-primary-default instead */ --eds-theme-color-border-brand-primary-subtle: var(--eds-color-brand-grape-200); @@ -498,9 +676,53 @@ --eds-theme-color-background-grade-revise-default: var(--eds-color-other-yellow-400); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-theme-color-background-grade-complete-subtle: var(--eds-color-other-mint-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-theme-color-background-grade-complete-default: var(--eds-color-other-mint-600); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ - --eds-theme-color-background-utility-error: var(--eds-color-other-ruby-100); - --eds-theme-color-background-utility-warning: var(--eds-color-other-orange-100); - --eds-theme-color-background-utility-success: var(--eds-color-other-mint-100); + --eds-theme-color-background-utility-error: var(--eds-color-other-ruby-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-theme-color-background-utility-success: var(--eds-color-other-mint-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-theme-color-background-utility-inverse-high-emphasis-active: var(--eds-color-neutral-100); + --eds-theme-color-background-utility-inverse-high-emphasis-hover: var(--eds-color-neutral-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-disabled-medium-emphasis: var(--eds-color-neutral-200); + --eds-theme-color-background-utility-disabled-low-emphasis: var(--eds-color-neutral-100); + --eds-theme-color-background-utility-information-low-emphasis-active: var(--eds-color-blue-150); + --eds-theme-color-background-utility-information-low-emphasis-hover: var(--eds-color-blue-100); + --eds-theme-color-background-utility-information-low-emphasis: var(--eds-color-blue-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-warning-low-emphasis-active: var(--eds-color-yellow-150); + --eds-theme-color-background-utility-warning-low-emphasis-hover: var(--eds-color-yellow-100); + --eds-theme-color-background-utility-warning-low-emphasis: var(--eds-color-yellow-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-favorable-high-emphasis-active: var(--eds-color-green-750); + --eds-theme-color-background-utility-favorable-high-emphasis-hover: var(--eds-color-green-650); + --eds-theme-color-background-utility-favorable-high-emphasis: var(--eds-color-green-550); + --eds-theme-color-background-utility-favorable-low-emphasis-active: var(--eds-color-green-150); + --eds-theme-color-background-utility-favorable-low-emphasis-hover: var(--eds-color-green-100); + --eds-theme-color-background-utility-favorable-low-emphasis: var(--eds-color-green-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-critical-high-emphasis-active: var(--eds-color-red-800); + --eds-theme-color-background-utility-critical-high-emphasis-hover: var(--eds-color-red-750); + --eds-theme-color-background-utility-critical-high-emphasis: var(--eds-color-red-650); + --eds-theme-color-background-utility-critical-low-emphasis-active: var(--eds-color-red-150); + --eds-theme-color-background-utility-critical-low-emphasis-hover: var(--eds-color-red-100); + --eds-theme-color-background-utility-critical-low-emphasis: var(--eds-color-red-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-critical-no-emphasis-active: var(--eds-color-red-100); + --eds-theme-color-background-utility-critical-no-emphasis-hover: var(--eds-color-red-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-interactive-high-emphasis-active: var(--eds-color-blue-950); + --eds-theme-color-background-utility-interactive-high-emphasis-hover: var(--eds-color-blue-900); + --eds-theme-color-background-utility-interactive-high-emphasis: var(--eds-color-blue-850); + --eds-theme-color-background-utility-interactive-low-emphasis-active: var(--eds-color-blue-150); + --eds-theme-color-background-utility-interactive-low-emphasis-hover: var(--eds-color-blue-100); + --eds-theme-color-background-utility-interactive-low-emphasis: var(--eds-color-blue-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-interactive-no-emphasis-active: var(--eds-color-blue-100); + --eds-theme-color-background-utility-interactive-no-emphasis-hover: var(--eds-color-blue-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-neutral-high-emphasis-active: var(--eds-color-neutral-750); + --eds-theme-color-background-utility-neutral-high-emphasis-hover: var(--eds-color-neutral-650); + --eds-theme-color-background-utility-neutral-high-emphasis: var(--eds-color-neutral-550); + --eds-theme-color-background-utility-neutral-low-emphasis-active: var(--eds-color-neutral-150); + --eds-theme-color-background-utility-neutral-low-emphasis-hover: var(--eds-color-neutral-100); + --eds-theme-color-background-utility-neutral-low-emphasis: var(--eds-color-neutral-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-neutral-no-emphasis-active: var(--eds-color-neutral-100); + --eds-theme-color-background-utility-neutral-no-emphasis-hover: var(--eds-color-neutral-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-overlay-high-emphasis: var(--eds-color-neutral-850); /* TODO-AH: color-mix with opacity 80% */ + --eds-theme-color-background-utility-overlay-low-emphasis: var(--eds-color-neutral-850); /* TODO-AH: color-mix with opacity 50% */ + --eds-theme-color-background-utility-container-active: var(--eds-color-neutral-100); + --eds-theme-color-background-utility-container-hover: var(--eds-color-neutral-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-base-1: var(--eds-color-neutral-025); /* TODO-AH: this appears to be missing in the spreadsheet */ --eds-theme-color-background-brand-primary-strong-hover: var(--eds-color-brand-grape-800); --eds-theme-color-background-brand-primary-strong: var(--eds-color-brand-grape-600); --eds-theme-color-background-brand-primary-subtle: var(--eds-color-brand-grape-100); @@ -521,4 +743,11 @@ --eds-theme-box-focus-ring-outline-width: var(--eds-outline-width-sm); --eds-theme-box-button-border-radius: var(--eds-border-radius-md); --eds-theme-border-width: var(--eds-border-width-sm); + --eds-theme-border-radius-tab-underline-sticky: var(--eds-border-radius-full); /* TODO-AH: this token is marked as deprecated */ + --eds-theme-border-radius-tab-underline-default: var(--eds-border-radius-full); + --eds-theme-border-radius-objects-sm: var(--eds-border-radius-50); + --eds-theme-border-radius-objects-md: var(--eds-border-radius-100); + --eds-theme-border-radius-surfaces-md: var(--eds-border-radius-150); + --eds-theme-border-radius-surfaces-lg: var(--eds-border-radius-none); + --eds-theme-border-radius-actions: var(--eds-border-radius-full); } diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json index bfb4a7b0a..d1eeebc69 100644 --- a/src/tokens-dist/json/variables-nested.json +++ b/src/tokens-dist/json/variables-nested.json @@ -287,6 +287,21 @@ "tag": "var(--eds-typography-preset-009)" }, "border": { + "radius": { + "actions": "9999px", + "surfaces": { + "lg": "0px", + "md": "6" + }, + "objects": { + "md": "4", + "sm": "2" + }, + "tabUnderline": { + "default": "9999px", + "sticky": "9999px" + } + }, "width": "1px" }, "box": { @@ -311,30 +326,31 @@ "size": { "slider": { "track": { - "height": "var(--eds-size-base-unit)" + "height": "0.5rem" }, - "thumb": "calc(var(--eds-size-base-unit) * 3)" + "thumb": "1.5rem" } }, "color": { "body": { "background": { - "@": "#F4F6F8", + "@": "#EEE7E4", "inverted": "#383C43" } }, "background": { + "input": "rgba(255, 255, 255, 1)", "neutral": { "default": { "@": "#FFFFFF", - "hover": "#F4F6F8" + "hover": "#EEE7E4" }, "subtle": { - "@": "#F4F6F8", - "hover": "#E7E8EA" + "@": "#EEE7E4", + "hover": "#CFC9C7" }, "medium": { - "@": "#E7E8EA", + "@": "#CFC9C7", "hover": "#C0C4C8" } }, @@ -349,8 +365,115 @@ } }, "utility": { + "base": { + "0": "rgba(255, 255, 255, 1)", + "1": "#FFFFFF" + }, + "container": { + "@": "rgba(255, 255, 255, 1)", + "hover": "#F9F3F1", + "active": "#EEE7E4" + }, + "overlay": { + "lowEmphasis": "#272625", + "highEmphasis": "#272625" + }, + "neutral": { + "noEmphasis": { + "@": "transparent", + "hover": "#F9F3F1", + "active": "#EEE7E4" + }, + "lowEmphasis": { + "@": "#F9F3F1", + "hover": "#EEE7E4", + "active": "#DFD9D6" + }, + "highEmphasis": { + "@": "#6C6967", + "hover": "#565352", + "active": "#3F3E3D" + } + }, + "interactive": { + "noEmphasis": { + "@": "transparent", + "hover": "#EAF4FF", + "active": "#CEE6FF" + }, + "lowEmphasis": { + "@": "#EAF4FF", + "hover": "#CEE6FF", + "active": "#B5DAFF" + }, + "highEmphasis": { + "@": "#0F2163", + "hover": "#0A164C", + "active": "#060E30" + } + }, + "critical": { + "noEmphasis": { + "@": "transparent", + "hover": "FCF2F7", + "active": "F8DDEA" + }, + "lowEmphasis": { + "@": "FCF2F7", + "hover": "F8DDEA", + "active": "F5CCE0" + }, + "highEmphasis": { + "@": "9F1C55", + "hover": "760C35", + "active": "620424" + } + }, + "favorable": { + "lowEmphasis": { + "@": "#E6F5ED", + "hover": "#D0EDDD", + "active": "#B3E1C7" + }, + "highEmphasis": { + "@": "#367759", + "hover": "#225E43", + "active": "#13462F" + } + }, + "warning": { + "lowEmphasis": { + "@": "#FDF3D3", + "hover": "#FBE8AB", + "active": "#F9DA78" + } + }, + "information": { + "lowEmphasis": { + "@": "#EAF4FF", + "hover": "#CEE6FF", + "active": "#B5DAFF" + } + }, + "disabled": { + "noEmphasis": "transparent", + "lowEmphasis": "#EEE7E4", + "mediumEmphasis": "#CFC9C7" + }, + "inverse": { + "noEmphasis": { + "@": "transparent", + "hover": "rgba(255,255,255, 0.2)", + "active": "rgba(255, 255, 255, 0.3)" + }, + "highEmphasis": { + "@": "rgba(255, 255, 255, 1)", + "hover": "#F9F3F1", + "active": "#EEE7E4" + }, + "disabled": "rgba(255, 255, 255, 0.5)" + }, "success": "#ECFFF5", - "warning": "#FFF1E9", "error": "#FFF0F4" }, "grade": { @@ -372,7 +495,7 @@ "border": { "neutral": { "subtle": { - "@": "#E7E8EA", + "@": "#CFC9C7", "hover": "#C0C4C8" }, "default": { @@ -393,16 +516,62 @@ } }, "utility": { - "success": { - "subtle": "#B7E9CE", - "default": "#8FDCB3", - "strong": "#59C88C" + "neutral": { + "lowEmphasis": { + "@": "#CFC9C7", + "hover": "#BEB8B6", + "active": "#A09C9A" + }, + "mediumEmphasis": { + "@": "#868281", + "hover": "#6C6967", + "active": "#565352" + }, + "highEmphasis": { + "@": "#272625", + "hover": "#1A1919", + "active": "#0F0F0F" + } + }, + "interactive": { + "@": "#0F2163", + "hover": "#0A164C", + "active": "#060E30" + }, + "critical": { + "@": "9F1C55", + "hover": "760C35", + "active": "620424" + }, + "favorable": { + "@": "#367759", + "hover": "#225E43", + "active": "#13462F" }, "warning": { + "@": "#876701", + "hover": "#695001", + "active": "#4D3A01", "subtle": "#FFCBA5", "default": "#FFAF76", "strong": "#F6924A" }, + "informational": { + "@": "#3165D2", + "hover": "#254EAC", + "active": "#1B3889" + }, + "disabled": "#A09C9A", + "focus": "#3165D2", + "inverse": { + "@": "rgba(255, 255, 255, 1)", + "disabled": "rgba(255, 255, 255, 0.5)" + }, + "success": { + "subtle": "#B7E9CE", + "default": "#8FDCB3", + "strong": "#59C88C" + }, "error": { "subtle": "#FFCBD7", "default": "#FB90B0", @@ -483,7 +652,7 @@ "neutral": { "background": { "@": "rgba(0, 0, 0, 0)", - "hover": "#E7E8EA", + "hover": "#CFC9C7", "active": "#383C43" }, "border": { @@ -596,12 +765,12 @@ "active": "#FFFFFF", "background": { "@": "rgba(0, 0, 0, 0)", - "hover": "#E7E8EA", + "hover": "#CFC9C7", "active": "#5D6369" }, "border": { "@": "rgba(0, 0, 0, 0)", - "hover": "#E7E8EA", + "hover": "#CFC9C7", "active": "#5D6369" }, "text": { @@ -680,7 +849,7 @@ } }, "data-bar": { - "background": "#F4F6F8", + "background": "#EEE7E4", "border": "#C0C4C8" }, "focus-ring": { @@ -690,11 +859,11 @@ "form": { "border": { "@": "#878C90", - "hover": "#21272D" + "hover": "#333231" }, "background": { "@": "#FFFFFF", - "hover": "#F4F6F8" + "hover": "#EEE7E4" }, "label": "#383C43" }, @@ -707,7 +876,7 @@ }, "strong": { "@": "#383C43", - "hover": "#21272D" + "hover": "#333231" }, "subtle": { "@": "#878C90", @@ -746,7 +915,7 @@ "hover": "#00A56A" }, "revise": { - "@": "#21272D", + "@": "#333231", "hover": "#161B1F" }, "stop": { @@ -798,8 +967,8 @@ } }, "progress-bar": { - "background": "#E7E8EA", - "border": "#E7E8EA" + "background": "#CFC9C7", + "border": "#CFC9C7" }, "radio": { "brand": { @@ -814,17 +983,70 @@ "@": "#383C43", "inverse": "#FFFFFF" }, - "strong": "#21272D", + "strong": "#333231", "subtle": "#5D6369" }, "utility": { + "neutral": { + "primary": { + "@": "#272625", + "hover": "#1A1919", + "active": "#0F0F0F" + }, + "secondary": { + "@": "#6C6967", + "hover": "#565352", + "active": "#3F3E3D" + } + }, + "interactive": { + "primary": { + "@": "#0F2163", + "hover": "#0A164C", + "active": "#060E30" + }, + "secondary": { + "@": "#3165D2", + "hover": "#254EAC", + "active": "#1B3889" + }, + "visited": "#8A50A7" + }, + "critical": { + "@": "9F1C55", + "hover": "760C35", + "active": "620424" + }, + "favorable": { + "@": "#367759", + "hover": "#225E43", + "active": "#13462F" + }, + "warning": { + "@": "#876701", + "hover": "#695001", + "active": "#4D3A01" + }, + "informational": { + "@": "#3165D2", + "hover": "#254EAC", + "active": "#1B3889" + }, + "disabled": { + "primary": "#A09C9A", + "secondary": "#CFC9C7" + }, + "inverse": { + "@": "rgba(255, 255, 255, 1)", + "disabled": "rgba(255, 255, 255, 0.5)" + }, + "placeholder": "#6C6967", "success": "#007249", - "warning": "#AC3400", "error": "#BD0044" }, "grade": { "complete": "#007249", - "revise": "#21272D", + "revise": "#333231", "stop": "#BD0044" }, "disabled": "#C0C4C8", @@ -834,7 +1056,7 @@ } }, "text-highlight": { - "foreground": "#21272D", + "foreground": "#333231", "background": "#FDF1D0" }, "toggle": { @@ -884,6 +1106,11 @@ "xl": "8px" }, "radius": { + "50": "2", + "100": "4", + "150": "6", + "200": "8", + "500": "20", "none": "0px", "md": "4px", "lg": "8px", @@ -906,17 +1133,135 @@ } }, "neutral": { - "100": "#F4F6F8", - "200": "#E7E8EA", + "100": "#EEE7E4", + "150": "#DFD9D6", + "200": "#CFC9C7", + "250": "#BEB8B6", "300": "#C0C4C8", + "350": "#A09C9A", "400": "#999EA3", + "450": "#868281", "500": "#878C90", + "550": "#6C6967", "600": "#5D6369", + "650": "#565352", "700": "#383C43", - "800": "#21272D", + "750": "#3F3E3D", + "800": "#333231", + "850": "#272625", + "900": "#1A1919", + "950": "#0F0F0F", "white": "#FFFFFF", + "025": "#FFFFFF", + "050": "#F9F3F1", "black": "#161B1F" }, + "red": { + "100": "F8DDEA", + "150": "F5CCE0", + "200": "F1B5D2", + "250": "EC9EC3", + "350": "E67EB0", + "450": "DB458D", + "550": "C62B73", + "650": "9F1C55", + "750": "760C35", + "800": "620424", + "850": "4D0118", + "900": "350110", + "950": "23010B", + "050": "FCF2F7" + }, + "orange": { + "100": "#FFDCCA", + "150": "#FFC7AB", + "200": "#FFB38D", + "250": "#FFA070", + "350": "#E87F4A", + "450": "#D0622C", + "550": "#B8470F", + "650": "#92380C", + "750": "#672808", + "800": "#532006", + "850": "#401805", + "900": "#2B1003", + "950": "#1B0A02", + "050": "#FFEEE5" + }, + "yellow": { + "100": "#FBE8AB", + "150": "#F9DA78", + "200": "#F1CA53", + "250": "#E7B724", + "350": "#C4970C", + "450": "#A57D01", + "550": "#876701", + "650": "#695001", + "750": "#4D3A01", + "800": "#392B01", + "850": "#2B2001", + "900": "#1E1701", + "950": "#130E01", + "050": "#FDF3D3" + }, + "green": { + "100": "#D0EDDD", + "150": "#B3E1C7", + "200": "#95D5B1", + "250": "#74C899", + "350": "#57B083", + "450": "#3F926D", + "550": "#367759", + "650": "#225E43", + "750": "#13462F", + "800": "#0E3423", + "850": "#0A271A", + "900": "#071B12", + "950": "#05120C", + "050": "#E6F5ED" + }, + "blue": { + "100": "#CEE6FF", + "150": "#B5DAFF", + "200": "#99CCFF", + "250": "#85BAFB", + "350": "#6199F3", + "450": "#437EED", + "550": "#3165D2", + "650": "#254EAC", + "750": "#1B3889", + "800": "#152D76", + "850": "#0F2163", + "900": "#0A164C", + "950": "#060E30", + "050": "#EAF4FF" + }, + "purple": { + "100": "#F3E5FA", + "150": "#EAD1F6", + "200": "#E0BAF2", + "250": "#D5A2EE", + "350": "#C580E7", + "450": "#A765C7", + "550": "#8A50A7", + "650": "#6E3A88", + "750": "#562D69", + "800": "#452455", + "850": "#311A3C", + "900": "#25142E", + "950": "#190D1E", + "050": "#FBF5FD" + }, + "opacity": { + "10": ".10", + "20": ".20", + "30": ".30", + "40": ".40", + "50": ".50", + "60": ".60", + "70": ".60", + "80": ".80" + }, "other": { "mint": { "100": "#ECFFF5", @@ -981,24 +1326,24 @@ "xl": "0px 6px 20px rgba(0, 0, 0, 0.2)" }, "size": { - "1": "var(--eds-size-base-unit)", - "2": "calc(var(--eds-size-base-unit) * 2)", - "3": "calc(var(--eds-size-base-unit) * 3)", - "4": "calc(var(--eds-size-base-unit) * 4)", - "5": "calc(var(--eds-size-base-unit) * 5)", - "6": "calc(var(--eds-size-base-unit) * 6)", - "7": "calc(var(--eds-size-base-unit) * 7)", - "8": "calc(var(--eds-size-base-unit) * 8)", - "9": "calc(var(--eds-size-base-unit) * 9)", - "10": "calc(var(--eds-size-base-unit) * 10)", - "11": "calc(var(--eds-size-base-unit) * 11)", - "12": "calc(var(--eds-size-base-unit) * 12)", - "20": "calc(var(--eds-size-base-unit) * 20)", + "1": "0.5rem", + "2": "1rem", + "3": "1.5rem", + "4": "2rem", + "5": "2.5rem", + "6": "3rem", + "7": "3.5rem", + "8": "4rem", + "9": "4.5rem`", + "10": "5rem", + "11": "5.5rem", + "12": "6rem", + "20": "10rem", "base-unit": "0.5rem", - "half": "calc(var(--eds-size-base-unit) / 2)", - "quarter": "calc(var(--eds-size-base-unit) / 4)", - "1-and-half": "calc(var(--eds-size-base-unit) * 1.5)", - "2-and-half": "calc(var(--eds-size-base-unit) * 2.5)" + "half": "0.25rem", + "quarter": "0.125rem", + "1-and-half": "0.75rem", + "2-and-half": "1.275rem" }, "z-index": { "0": "0", diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts index 9db676858..4458d726d 100644 --- a/src/tokens-dist/ts/colors.ts +++ b/src/tokens-dist/ts/colors.ts @@ -1,18 +1,94 @@ -export const EdsThemeColorBodyBackground = '#F4F6F8'; +export const EdsThemeColorBodyBackground = '#EEE7E4'; export const EdsThemeColorBodyBackgroundInverted = '#383C43'; +export const EdsThemeColorBackgroundInput = 'rgba(255, 255, 255, 1)'; // TODO-AH: what is the token to use here? export const EdsThemeColorBackgroundNeutralDefault = '#FFFFFF'; -export const EdsThemeColorBackgroundNeutralDefaultHover = '#F4F6F8'; -export const EdsThemeColorBackgroundNeutralSubtle = '#F4F6F8'; -export const EdsThemeColorBackgroundNeutralSubtleHover = '#E7E8EA'; -export const EdsThemeColorBackgroundNeutralMedium = '#E7E8EA'; +export const EdsThemeColorBackgroundNeutralDefaultHover = '#EEE7E4'; +export const EdsThemeColorBackgroundNeutralSubtle = '#EEE7E4'; +export const EdsThemeColorBackgroundNeutralSubtleHover = '#CFC9C7'; +export const EdsThemeColorBackgroundNeutralMedium = '#CFC9C7'; export const EdsThemeColorBackgroundNeutralMediumHover = '#C0C4C8'; export const EdsThemeColorBackgroundBrandPrimaryDefault = '#F0F0FC'; export const EdsThemeColorBackgroundBrandPrimarySubtle = '#F0F0FC'; export const EdsThemeColorBackgroundBrandPrimaryStrong = '#6B65E2'; export const EdsThemeColorBackgroundBrandPrimaryStrongHover = '#3E42B1'; -export const EdsThemeColorBackgroundUtilitySuccess = '#ECFFF5'; -export const EdsThemeColorBackgroundUtilityWarning = '#FFF1E9'; -export const EdsThemeColorBackgroundUtilityError = '#FFF0F4'; +export const EdsThemeColorBackgroundUtilityBase0 = 'rgba(255, 255, 255, 1)'; // TODO-AH: what is the token to use here? +export const EdsThemeColorBackgroundUtilityBase1 = '#FFFFFF'; // TODO-AH: this appears to be missing in the spreadsheet +export const EdsThemeColorBackgroundUtilityContainer = 'rgba(255, 255, 255, 1)'; // TODO-AH: what token is this referring to? +export const EdsThemeColorBackgroundUtilityContainerHover = '#F9F3F1'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityContainerActive = '#EEE7E4'; +export const EdsThemeColorBackgroundUtilityOverlayLowEmphasis = '#272625'; // TODO-AH: color-mix with opacity 50% +export const EdsThemeColorBackgroundUtilityOverlayHighEmphasis = '#272625'; // TODO-AH: color-mix with opacity 80% +export const EdsThemeColorBackgroundUtilityNeutralNoEmphasis = 'transparent'; // TODO-AH: what token is this referring to? +export const EdsThemeColorBackgroundUtilityNeutralNoEmphasisHover = '#F9F3F1'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityNeutralNoEmphasisActive = '#EEE7E4'; +export const EdsThemeColorBackgroundUtilityNeutralLowEmphasis = '#F9F3F1'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityNeutralLowEmphasisHover = '#EEE7E4'; +export const EdsThemeColorBackgroundUtilityNeutralLowEmphasisActive = '#DFD9D6'; +export const EdsThemeColorBackgroundUtilityNeutralHighEmphasis = '#6C6967'; +export const EdsThemeColorBackgroundUtilityNeutralHighEmphasisHover = '#565352'; +export const EdsThemeColorBackgroundUtilityNeutralHighEmphasisActive = + '#3F3E3D'; +export const EdsThemeColorBackgroundUtilityInteractiveNoEmphasis = + 'transparent'; // TODO-AH: what token is this referring to? +export const EdsThemeColorBackgroundUtilityInteractiveNoEmphasisHover = + '#EAF4FF'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityInteractiveNoEmphasisActive = + '#CEE6FF'; +export const EdsThemeColorBackgroundUtilityInteractiveLowEmphasis = '#EAF4FF'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityInteractiveLowEmphasisHover = + '#CEE6FF'; +export const EdsThemeColorBackgroundUtilityInteractiveLowEmphasisActive = + '#B5DAFF'; +export const EdsThemeColorBackgroundUtilityInteractiveHighEmphasis = '#0F2163'; +export const EdsThemeColorBackgroundUtilityInteractiveHighEmphasisHover = + '#0A164C'; +export const EdsThemeColorBackgroundUtilityInteractiveHighEmphasisActive = + '#060E30'; +export const EdsThemeColorBackgroundUtilityCriticalNoEmphasis = 'transparent'; // TODO-AH: what token is this referring to? +export const EdsThemeColorBackgroundUtilityCriticalNoEmphasisHover = 'FCF2F7'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityCriticalNoEmphasisActive = 'F8DDEA'; +export const EdsThemeColorBackgroundUtilityCriticalLowEmphasis = 'FCF2F7'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityCriticalLowEmphasisHover = 'F8DDEA'; +export const EdsThemeColorBackgroundUtilityCriticalLowEmphasisActive = 'F5CCE0'; +export const EdsThemeColorBackgroundUtilityCriticalHighEmphasis = '9F1C55'; +export const EdsThemeColorBackgroundUtilityCriticalHighEmphasisHover = '760C35'; +export const EdsThemeColorBackgroundUtilityCriticalHighEmphasisActive = + '620424'; +export const EdsThemeColorBackgroundUtilityFavorableLowEmphasis = '#E6F5ED'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityFavorableLowEmphasisHover = + '#D0EDDD'; +export const EdsThemeColorBackgroundUtilityFavorableLowEmphasisActive = + '#B3E1C7'; +export const EdsThemeColorBackgroundUtilityFavorableHighEmphasis = '#367759'; +export const EdsThemeColorBackgroundUtilityFavorableHighEmphasisHover = + '#225E43'; +export const EdsThemeColorBackgroundUtilityFavorableHighEmphasisActive = + '#13462F'; +export const EdsThemeColorBackgroundUtilityWarningLowEmphasis = '#FDF3D3'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityWarningLowEmphasisHover = '#FBE8AB'; +export const EdsThemeColorBackgroundUtilityWarningLowEmphasisActive = '#F9DA78'; +export const EdsThemeColorBackgroundUtilityInformationLowEmphasis = '#EAF4FF'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityInformationLowEmphasisHover = + '#CEE6FF'; +export const EdsThemeColorBackgroundUtilityInformationLowEmphasisActive = + '#B5DAFF'; +export const EdsThemeColorBackgroundUtilityDisabledNoEmphasis = 'transparent'; // TODO-AH: this appears to be missing in the spreadsheet +export const EdsThemeColorBackgroundUtilityDisabledLowEmphasis = '#EEE7E4'; +export const EdsThemeColorBackgroundUtilityDisabledMediumEmphasis = '#CFC9C7'; +export const EdsThemeColorBackgroundUtilityInverseNoEmphasis = 'transparent'; // TODO-AH: this appears to be missing in the spreadsheet +export const EdsThemeColorBackgroundUtilityInverseNoEmphasisHover = + 'rgba(255,255,255, 0.2)'; // TODO-AH: missing token to color-mix with opacity 20% +export const EdsThemeColorBackgroundUtilityInverseNoEmphasisActive = + 'rgba(255, 255, 255, 0.3)'; // TODO-AH: missing token to color-mix with opacity 20% +export const EdsThemeColorBackgroundUtilityInverseHighEmphasis = + 'rgba(255, 255, 255, 1)'; // TODO-AH: missing token to color-mix with opacity 100% +export const EdsThemeColorBackgroundUtilityInverseHighEmphasisHover = '#F9F3F1'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityInverseHighEmphasisActive = + '#EEE7E4'; +export const EdsThemeColorBackgroundUtilityInverseDisabled = + 'rgba(255, 255, 255, 0.5)'; // TODO-AH: missing token to color-mix with opacity 50% +export const EdsThemeColorBackgroundUtilitySuccess = '#ECFFF5'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsThemeColorBackgroundUtilityError = '#FFF0F4'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorBackgroundGradeCompleteDefault = '#008656'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorBackgroundGradeCompleteSubtle = '#ECFFF5'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorBackgroundGradeReviseDefault = '#F7BE2D'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. @@ -20,7 +96,7 @@ export const EdsThemeColorBackgroundGradeReviseSubtle = '#FDF1D0'; // @deprecate export const EdsThemeColorBackgroundGradeStopDefault = '#D41E52'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorBackgroundGradeStopSubtle = '#FFF0F4'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorBackgroundDisabled = '#C0C4C8'; -export const EdsThemeColorBorderNeutralSubtle = '#E7E8EA'; +export const EdsThemeColorBorderNeutralSubtle = '#CFC9C7'; export const EdsThemeColorBorderNeutralSubtleHover = '#C0C4C8'; export const EdsThemeColorBorderNeutralDefault = '#C0C4C8'; export const EdsThemeColorBorderNeutralDefaultHover = '#999EA3'; @@ -31,12 +107,41 @@ export const EdsThemeColorBorderBrandPrimaryDefault = 'var(--eds-theme-color-border-brand-primary)'; export const EdsThemeColorBorderBrandPrimary = '#C4C1F3'; // @deprecated This token is deprecated. Please use eds-theme-color-border-brand-primary-default instead export const EdsThemeColorBorderBrandPrimaryStrong = '#A6A3EE'; -export const EdsThemeColorBorderUtilitySuccessSubtle = '#B7E9CE'; -export const EdsThemeColorBorderUtilitySuccessDefault = '#8FDCB3'; -export const EdsThemeColorBorderUtilitySuccessStrong = '#59C88C'; -export const EdsThemeColorBorderUtilityWarningSubtle = '#FFCBA5'; -export const EdsThemeColorBorderUtilityWarningDefault = '#FFAF76'; -export const EdsThemeColorBorderUtilityWarningStrong = '#F6924A'; +export const EdsThemeColorBorderUtilityNeutralLowEmphasis = '#CFC9C7'; +export const EdsThemeColorBorderUtilityNeutralLowEmphasisHover = '#BEB8B6'; +export const EdsThemeColorBorderUtilityNeutralLowEmphasisActive = '#A09C9A'; +export const EdsThemeColorBorderUtilityNeutralMediumEmphasis = '#868281'; +export const EdsThemeColorBorderUtilityNeutralMediumEmphasisHover = '#6C6967'; +export const EdsThemeColorBorderUtilityNeutralMediumEmphasisActive = '#565352'; +export const EdsThemeColorBorderUtilityNeutralHighEmphasis = '#272625'; +export const EdsThemeColorBorderUtilityNeutralHighEmphasisHover = '#1A1919'; +export const EdsThemeColorBorderUtilityNeutralHighEmphasisActive = '#0F0F0F'; +export const EdsThemeColorBorderUtilityInteractive = '#0F2163'; +export const EdsThemeColorBorderUtilityInteractiveHover = '#0A164C'; +export const EdsThemeColorBorderUtilityInteractiveActive = '#060E30'; +export const EdsThemeColorBorderUtilityCritical = '9F1C55'; +export const EdsThemeColorBorderUtilityCriticalHover = '760C35'; +export const EdsThemeColorBorderUtilityCriticalActive = '620424'; +export const EdsThemeColorBorderUtilityFavorable = '#367759'; +export const EdsThemeColorBorderUtilityFavorableHover = '#225E43'; +export const EdsThemeColorBorderUtilityFavorableActive = '#13462F'; +export const EdsThemeColorBorderUtilityWarning = '#876701'; +export const EdsThemeColorBorderUtilityWarningHover = '#695001'; +export const EdsThemeColorBorderUtilityWarningActive = '#4D3A01'; +export const EdsThemeColorBorderUtilityWarningSubtle = '#FFCBA5'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsThemeColorBorderUtilityWarningDefault = '#FFAF76'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsThemeColorBorderUtilityWarningStrong = '#F6924A'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsThemeColorBorderUtilityInformational = '#3165D2'; +export const EdsThemeColorBorderUtilityInformationalHover = '#254EAC'; +export const EdsThemeColorBorderUtilityInformationalActive = '#1B3889'; +export const EdsThemeColorBorderUtilityDisabled = '#A09C9A'; +export const EdsThemeColorBorderUtilityFocus = '#3165D2'; +export const EdsThemeColorBorderUtilityInverse = 'rgba(255, 255, 255, 1)'; // TODO-AH: missing token to color-mix with opacity 100% +export const EdsThemeColorBorderUtilityInverseDisabled = + 'rgba(255, 255, 255, 0.5)'; // TODO-AH: missing token to color-mix with opacity 50% +export const EdsThemeColorBorderUtilitySuccessSubtle = '#B7E9CE'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsThemeColorBorderUtilitySuccessDefault = '#8FDCB3'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsThemeColorBorderUtilitySuccessStrong = '#59C88C'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorBorderUtilityErrorSubtle = '#FFCBD7'; export const EdsThemeColorBorderUtilityErrorDefault = '#FB90B0'; export const EdsThemeColorBorderUtilityErrorStrong = '#F76C96'; @@ -77,7 +182,7 @@ export const EdsThemeColorButtonSecondaryBrandIcon = '#6B65E2'; export const EdsThemeColorButtonSecondaryBrandIconHover = '#FFFFFF'; export const EdsThemeColorButtonSecondaryBrandIconActive = '#FFFFFF'; export const EdsThemeColorButtonSecondaryNeutralBackground = 'rgba(0, 0, 0, 0)'; -export const EdsThemeColorButtonSecondaryNeutralBackgroundHover = '#E7E8EA'; +export const EdsThemeColorButtonSecondaryNeutralBackgroundHover = '#CFC9C7'; export const EdsThemeColorButtonSecondaryNeutralBackgroundActive = '#383C43'; export const EdsThemeColorButtonSecondaryNeutralBorder = '#5D6369'; export const EdsThemeColorButtonSecondaryNeutralBorderHover = '#5D6369'; @@ -140,10 +245,10 @@ export const EdsThemeColorButtonIconNeutral = '#5D6369'; export const EdsThemeColorButtonIconNeutralHover = '#5D6369'; export const EdsThemeColorButtonIconNeutralActive = '#FFFFFF'; export const EdsThemeColorButtonIconNeutralBackground = 'rgba(0, 0, 0, 0)'; -export const EdsThemeColorButtonIconNeutralBackgroundHover = '#E7E8EA'; +export const EdsThemeColorButtonIconNeutralBackgroundHover = '#CFC9C7'; export const EdsThemeColorButtonIconNeutralBackgroundActive = '#5D6369'; export const EdsThemeColorButtonIconNeutralBorder = 'rgba(0, 0, 0, 0)'; -export const EdsThemeColorButtonIconNeutralBorderHover = '#E7E8EA'; +export const EdsThemeColorButtonIconNeutralBorderHover = '#CFC9C7'; export const EdsThemeColorButtonIconNeutralBorderActive = '#5D6369'; export const EdsThemeColorButtonIconNeutralText = '#5D6369'; export const EdsThemeColorButtonIconNeutralTextHover = '#5D6369'; @@ -185,20 +290,20 @@ export const EdsThemeColorButtonIconErrorText = '#BD0044'; export const EdsThemeColorButtonIconErrorTextHover = '#BD0044'; export const EdsThemeColorButtonIconErrorTextActive = '#FFFFFF'; export const EdsThemeColorCheckboxBrandBackground = '#8984E8'; -export const EdsThemeColorDataBarBackground = '#F4F6F8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsThemeColorDataBarBackground = '#EEE7E4'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorDataBarBorder = '#C0C4C8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorFocusRing = '#6B65E2'; export const EdsThemeColorFocusRingInverted = '#FFFFFF'; export const EdsThemeColorFormBorder = '#878C90'; -export const EdsThemeColorFormBorderHover = '#21272D'; +export const EdsThemeColorFormBorderHover = '#333231'; export const EdsThemeColorFormBackground = '#FFFFFF'; -export const EdsThemeColorFormBackgroundHover = '#F4F6F8'; +export const EdsThemeColorFormBackgroundHover = '#EEE7E4'; export const EdsThemeColorFormLabel = '#383C43'; export const EdsThemeColorIconNeutralDefault = '#5D6369'; export const EdsThemeColorIconNeutralDefaultInverse = '#FFFFFF'; export const EdsThemeColorIconNeutralDefaultHover = '#383C43'; export const EdsThemeColorIconNeutralStrong = '#383C43'; -export const EdsThemeColorIconNeutralStrongHover = '#21272D'; +export const EdsThemeColorIconNeutralStrongHover = '#333231'; export const EdsThemeColorIconNeutralSubtle = '#878C90'; export const EdsThemeColorIconNeutralSubtleHover = '#5D6369'; export const EdsThemeColorIconLinkDefault = '#6B65E2'; @@ -213,7 +318,7 @@ export const EdsThemeColorIconUtilityError = '#F1497B'; export const EdsThemeColorIconUtilityErrorHover = '#D41E52'; export const EdsThemeColorIconGradeComplete = '#00A56A'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorIconGradeCompleteHover = '#00A56A'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. -export const EdsThemeColorIconGradeRevise = '#21272D'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsThemeColorIconGradeRevise = '#333231'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorIconGradeReviseHover = '#161B1F'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorIconGradeStop = '#F1497B'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorIconGradeStopHover = '#D41E52'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. @@ -247,24 +352,54 @@ export const EdsThemeColorLinkNeutralTextDecorationFocus = export const EdsThemeColorLinkNeutralBackgroundFocus = 'var(--eds-theme-color-text-neutral-default)'; export const EdsThemeColorModalBrandHeaderBackground = '#8984E8'; -export const EdsThemeColorProgressBarBackground = '#E7E8EA'; -export const EdsThemeColorProgressBarBorder = '#E7E8EA'; +export const EdsThemeColorProgressBarBackground = '#CFC9C7'; +export const EdsThemeColorProgressBarBorder = '#CFC9C7'; export const EdsThemeColorRadioBrandBackground = '#8984E8'; export const EdsThemeColorTextNeutralDefault = '#383C43'; export const EdsThemeColorTextNeutralDefaultInverse = '#FFFFFF'; -export const EdsThemeColorTextNeutralStrong = '#21272D'; +export const EdsThemeColorTextNeutralStrong = '#333231'; export const EdsThemeColorTextNeutralSubtle = '#5D6369'; -export const EdsThemeColorTextUtilitySuccess = '#007249'; -export const EdsThemeColorTextUtilityWarning = '#AC3400'; +export const EdsThemeColorTextUtilityNeutralPrimary = '#272625'; +export const EdsThemeColorTextUtilityNeutralPrimaryHover = '#1A1919'; +export const EdsThemeColorTextUtilityNeutralPrimaryActive = '#0F0F0F'; +export const EdsThemeColorTextUtilityNeutralSecondary = '#6C6967'; +export const EdsThemeColorTextUtilityNeutralSecondaryHover = '#565352'; +export const EdsThemeColorTextUtilityNeutralSecondaryActive = '#3F3E3D'; +export const EdsThemeColorTextUtilityInteractivePrimary = '#0F2163'; +export const EdsThemeColorTextUtilityInteractivePrimaryHover = '#0A164C'; +export const EdsThemeColorTextUtilityInteractivePrimaryActive = '#060E30'; +export const EdsThemeColorTextUtilityInteractiveSecondary = '#3165D2'; +export const EdsThemeColorTextUtilityInteractiveSecondaryHover = '#254EAC'; +export const EdsThemeColorTextUtilityInteractiveSecondaryActive = '#1B3889'; +export const EdsThemeColorTextUtilityInteractiveVisited = '#8A50A7'; +export const EdsThemeColorTextUtilityCritical = '9F1C55'; +export const EdsThemeColorTextUtilityCriticalHover = '760C35'; +export const EdsThemeColorTextUtilityCriticalActive = '620424'; +export const EdsThemeColorTextUtilityFavorable = '#367759'; +export const EdsThemeColorTextUtilityFavorableHover = '#225E43'; +export const EdsThemeColorTextUtilityFavorableActive = '#13462F'; +export const EdsThemeColorTextUtilityWarning = '#876701'; +export const EdsThemeColorTextUtilityWarningHover = '#695001'; +export const EdsThemeColorTextUtilityWarningActive = '#4D3A01'; +export const EdsThemeColorTextUtilityInformational = '#3165D2'; +export const EdsThemeColorTextUtilityInformationalHover = '#254EAC'; +export const EdsThemeColorTextUtilityInformationalActive = '#1B3889'; +export const EdsThemeColorTextUtilityDisabledPrimary = '#A09C9A'; +export const EdsThemeColorTextUtilityDisabledSecondary = '#CFC9C7'; +export const EdsThemeColorTextUtilityInverse = 'rgba(255, 255, 255, 1)'; // TODO-AH: what token is this referring to? +export const EdsThemeColorTextUtilityInverseDisabled = + 'rgba(255, 255, 255, 0.5)'; // TODO-AH: what token is this referring to? +export const EdsThemeColorTextUtilityPlaceholder = '#6C6967'; +export const EdsThemeColorTextUtilitySuccess = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorTextUtilityError = '#BD0044'; export const EdsThemeColorTextGradeComplete = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. -export const EdsThemeColorTextGradeRevise = '#21272D'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsThemeColorTextGradeRevise = '#333231'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorTextGradeStop = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorTextDisabled = '#C0C4C8'; export const EdsThemeColorTextBrandDefault = 'var(--eds-theme-color-text-brand-primary)'; export const EdsThemeColorTextBrandPrimary = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. Please use eds-theme-color-text-brand-default instead. -export const EdsThemeColorTextHighlightForeground = '#21272D'; +export const EdsThemeColorTextHighlightForeground = '#333231'; export const EdsThemeColorTextHighlightBackground = '#FDF1D0'; export const EdsThemeColorToggleOnBackground = 'var(--eds-theme-color-background-brand-primary-strong)'; @@ -281,55 +416,159 @@ export const EdsThemeColorToggleThumb = export const EdsThemeColorTransparentBlack0 = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorTransparentBlack30 = 'rgba(0, 0, 0, .3)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorTransparentWhite0 = 'rgba(255, 255, 255, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. -export const EdsColorBrandGrape100 = '#F0F0FC'; -export const EdsColorBrandGrape200 = '#E0E0F9'; -export const EdsColorBrandGrape300 = '#C4C1F3'; -export const EdsColorBrandGrape400 = '#A6A3EE'; -export const EdsColorBrandGrape500 = '#8984E8'; -export const EdsColorBrandGrape600 = '#6B65E2'; -export const EdsColorBrandGrape700 = '#5751D2'; -export const EdsColorBrandGrape800 = '#3E42B1'; -export const EdsColorNeutral100 = '#F4F6F8'; -export const EdsColorNeutral200 = '#E7E8EA'; -export const EdsColorNeutral300 = '#C0C4C8'; -export const EdsColorNeutral400 = '#999EA3'; -export const EdsColorNeutral500 = '#878C90'; -export const EdsColorNeutral600 = '#5D6369'; -export const EdsColorNeutral700 = '#383C43'; -export const EdsColorNeutral800 = '#21272D'; -export const EdsColorNeutralWhite = '#FFFFFF'; -export const EdsColorNeutralBlack = '#161B1F'; -export const EdsColorOtherMint100 = '#ECFFF5'; -export const EdsColorOtherMint200 = '#B7E9CE'; -export const EdsColorOtherMint300 = '#8FDCB3'; -export const EdsColorOtherMint400 = '#59C88C'; -export const EdsColorOtherMint500 = '#00A56A'; -export const EdsColorOtherMint600 = '#008656'; -export const EdsColorOtherMint700 = '#007249'; -export const EdsColorOtherMint800 = '#005939'; -export const EdsColorOtherYellow100 = '#FDF1D0'; -export const EdsColorOtherYellow200 = '#FFEBB3'; -export const EdsColorOtherYellow300 = '#FFDD80'; -export const EdsColorOtherYellow400 = '#F7BE2D'; -export const EdsColorOtherYellow500 = '#D18400'; -export const EdsColorOtherYellow600 = '#BF7300'; -export const EdsColorOtherYellow700 = '#9E5B03'; -export const EdsColorOtherYellow800 = '#854C03'; +export const EdsColorBrandGrape100 = '#F0F0FC'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorBrandGrape200 = '#E0E0F9'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorBrandGrape300 = '#C4C1F3'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorBrandGrape400 = '#A6A3EE'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorBrandGrape500 = '#8984E8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorBrandGrape600 = '#6B65E2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorBrandGrape700 = '#5751D2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorBrandGrape800 = '#3E42B1'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorNeutral100 = '#EEE7E4'; +export const EdsColorNeutral150 = '#DFD9D6'; +export const EdsColorNeutral200 = '#CFC9C7'; +export const EdsColorNeutral250 = '#BEB8B6'; +export const EdsColorNeutral300 = '#C0C4C8'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorNeutral350 = '#A09C9A'; +export const EdsColorNeutral400 = '#999EA3'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorNeutral450 = '#868281'; +export const EdsColorNeutral500 = '#878C90'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorNeutral550 = '#6C6967'; +export const EdsColorNeutral600 = '#5D6369'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorNeutral650 = '#565352'; +export const EdsColorNeutral700 = '#383C43'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorNeutral750 = '#3F3E3D'; +export const EdsColorNeutral800 = '#333231'; +export const EdsColorNeutral850 = '#272625'; +export const EdsColorNeutral900 = '#1A1919'; +export const EdsColorNeutral950 = '#0F0F0F'; +export const EdsColorNeutralWhite = '#FFFFFF'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorNeutral025 = '#FFFFFF'; // TODO-AH: inserting missing value +export const EdsColorNeutral050 = '#F9F3F1'; +export const EdsColorNeutralBlack = '#161B1F'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorRed100 = 'F8DDEA'; +export const EdsColorRed150 = 'F5CCE0'; +export const EdsColorRed200 = 'F1B5D2'; +export const EdsColorRed250 = 'EC9EC3'; +export const EdsColorRed350 = 'E67EB0'; +export const EdsColorRed450 = 'DB458D'; +export const EdsColorRed550 = 'C62B73'; +export const EdsColorRed650 = '9F1C55'; +export const EdsColorRed750 = '760C35'; +export const EdsColorRed800 = '620424'; +export const EdsColorRed850 = '4D0118'; +export const EdsColorRed900 = '350110'; +export const EdsColorRed950 = '23010B'; +export const EdsColorRed050 = 'FCF2F7'; +export const EdsColorOrange100 = '#FFDCCA'; +export const EdsColorOrange150 = '#FFC7AB'; +export const EdsColorOrange200 = '#FFB38D'; +export const EdsColorOrange250 = '#FFA070'; +export const EdsColorOrange350 = '#E87F4A'; +export const EdsColorOrange450 = '#D0622C'; +export const EdsColorOrange550 = '#B8470F'; +export const EdsColorOrange650 = '#92380C'; +export const EdsColorOrange750 = '#672808'; +export const EdsColorOrange800 = '#532006'; +export const EdsColorOrange850 = '#401805'; +export const EdsColorOrange900 = '#2B1003'; +export const EdsColorOrange950 = '#1B0A02'; +export const EdsColorOrange050 = '#FFEEE5'; +export const EdsColorYellow100 = '#FBE8AB'; +export const EdsColorYellow150 = '#F9DA78'; +export const EdsColorYellow200 = '#F1CA53'; +export const EdsColorYellow250 = '#E7B724'; +export const EdsColorYellow350 = '#C4970C'; +export const EdsColorYellow450 = '#A57D01'; +export const EdsColorYellow550 = '#876701'; +export const EdsColorYellow650 = '#695001'; +export const EdsColorYellow750 = '#4D3A01'; +export const EdsColorYellow800 = '#392B01'; +export const EdsColorYellow850 = '#2B2001'; +export const EdsColorYellow900 = '#1E1701'; +export const EdsColorYellow950 = '#130E01'; +export const EdsColorYellow050 = '#FDF3D3'; +export const EdsColorGreen100 = '#D0EDDD'; +export const EdsColorGreen150 = '#B3E1C7'; +export const EdsColorGreen200 = '#95D5B1'; +export const EdsColorGreen250 = '#74C899'; +export const EdsColorGreen350 = '#57B083'; +export const EdsColorGreen450 = '#3F926D'; +export const EdsColorGreen550 = '#367759'; +export const EdsColorGreen650 = '#225E43'; +export const EdsColorGreen750 = '#13462F'; +export const EdsColorGreen800 = '#0E3423'; +export const EdsColorGreen850 = '#0A271A'; +export const EdsColorGreen900 = '#071B12'; +export const EdsColorGreen950 = '#05120C'; +export const EdsColorGreen050 = '#E6F5ED'; +export const EdsColorBlue100 = '#CEE6FF'; +export const EdsColorBlue150 = '#B5DAFF'; +export const EdsColorBlue200 = '#99CCFF'; +export const EdsColorBlue250 = '#85BAFB'; +export const EdsColorBlue350 = '#6199F3'; +export const EdsColorBlue450 = '#437EED'; +export const EdsColorBlue550 = '#3165D2'; +export const EdsColorBlue650 = '#254EAC'; +export const EdsColorBlue750 = '#1B3889'; +export const EdsColorBlue800 = '#152D76'; +export const EdsColorBlue850 = '#0F2163'; +export const EdsColorBlue900 = '#0A164C'; +export const EdsColorBlue950 = '#060E30'; +export const EdsColorBlue050 = '#EAF4FF'; +export const EdsColorPurple100 = '#F3E5FA'; +export const EdsColorPurple150 = '#EAD1F6'; +export const EdsColorPurple200 = '#E0BAF2'; +export const EdsColorPurple250 = '#D5A2EE'; +export const EdsColorPurple350 = '#C580E7'; +export const EdsColorPurple450 = '#A765C7'; +export const EdsColorPurple550 = '#8A50A7'; +export const EdsColorPurple650 = '#6E3A88'; +export const EdsColorPurple750 = '#562D69'; +export const EdsColorPurple800 = '#452455'; +export const EdsColorPurple850 = '#311A3C'; +export const EdsColorPurple900 = '#25142E'; +export const EdsColorPurple950 = '#190D1E'; +export const EdsColorPurple050 = '#FBF5FD'; +export const EdsColorOpacity10 = '.10'; +export const EdsColorOpacity20 = '.20'; +export const EdsColorOpacity30 = '.30'; +export const EdsColorOpacity40 = '.40'; +export const EdsColorOpacity50 = '.50'; +export const EdsColorOpacity60 = '.60'; +export const EdsColorOpacity70 = '.60'; +export const EdsColorOpacity80 = '.80'; +export const EdsColorOtherMint100 = '#ECFFF5'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherMint200 = '#B7E9CE'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherMint300 = '#8FDCB3'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherMint400 = '#59C88C'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherMint500 = '#00A56A'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherMint600 = '#008656'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherMint700 = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherMint800 = '#005939'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherYellow100 = '#FDF1D0'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherYellow200 = '#FFEBB3'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherYellow300 = '#FFDD80'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherYellow400 = '#F7BE2D'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherYellow500 = '#D18400'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherYellow600 = '#BF7300'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherYellow700 = '#9E5B03'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherYellow800 = '#854C03'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsColorOtherLemon = '#F5FF8F'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsColorOtherEraser = '#F3DCE2'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. -export const EdsColorOtherOrange100 = '#FFF1E9'; -export const EdsColorOtherOrange200 = '#FFCBA5'; -export const EdsColorOtherOrange300 = '#FFAF76'; -export const EdsColorOtherOrange400 = '#F6924A'; -export const EdsColorOtherOrange500 = '#E06B00'; -export const EdsColorOtherOrange600 = '#C64600'; -export const EdsColorOtherOrange700 = '#AC3400'; -export const EdsColorOtherOrange800 = '#842800'; -export const EdsColorOtherRuby100 = '#FFF0F4'; -export const EdsColorOtherRuby200 = '#FFCBD7'; -export const EdsColorOtherRuby300 = '#FB90B0'; -export const EdsColorOtherRuby400 = '#F76C96'; -export const EdsColorOtherRuby500 = '#F1497B'; -export const EdsColorOtherRuby600 = '#D41E52'; -export const EdsColorOtherRuby700 = '#BD0044'; -export const EdsColorOtherRuby800 = '#8F0134'; +export const EdsColorOtherOrange100 = '#FFF1E9'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherOrange200 = '#FFCBA5'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherOrange300 = '#FFAF76'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherOrange400 = '#F6924A'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherOrange500 = '#E06B00'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherOrange600 = '#C64600'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherOrange700 = '#AC3400'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherOrange800 = '#842800'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherRuby100 = '#FFF0F4'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherRuby200 = '#FFCBD7'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherRuby300 = '#FB90B0'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherRuby400 = '#F76C96'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherRuby500 = '#F1497B'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherRuby600 = '#D41E52'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherRuby700 = '#BD0044'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorOtherRuby800 = '#8F0134'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. From 7277e801de3650cc4fa88d154be7aa54178829c2 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Mon, 11 Mar 2024 11:22:07 -0500 Subject: [PATCH 2/5] fix: remove tick mark from token value --- src/design-tokens/primitives.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/design-tokens/primitives.json b/src/design-tokens/primitives.json index 8f8d004d8..6270461dc 100644 --- a/src/design-tokens/primitives.json +++ b/src/design-tokens/primitives.json @@ -564,7 +564,7 @@ "group": "size" }, "9": { - "value": "4.5rem`", + "value": "4.5rem", "group": "size" }, "10": { From 7c083cf210ce844c7b594ff75569cdb14e7339be Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Mon, 11 Mar 2024 11:36:14 -0500 Subject: [PATCH 3/5] chore: update default background color --- src/design-tokens/css/base/body.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/design-tokens/css/base/body.css b/src/design-tokens/css/base/body.css index e9febb3a1..ee855827f 100644 --- a/src/design-tokens/css/base/body.css +++ b/src/design-tokens/css/base/body.css @@ -8,7 +8,7 @@ body { padding: 0; margin: 0; color: var(--eds-theme-color-text-neutral-default); - background: var(--eds-theme-color-background-neutral-subtle); + background: var(--eds-theme-color-background-neutral-default); } /* Body disabled variant */ From bad7bab7093e51c2d6b4d806a9df8d176f86d569 Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Mon, 11 Mar 2024 11:48:50 -0500 Subject: [PATCH 4/5] fix: adjust token values and usage for temp a11y fix --- .storybook/data/tokens.json | 2 +- .../InlineNotification/InlineNotification.module.css | 3 ++- src/tokens-dist/css/variables.css | 2 +- src/tokens-dist/json/variables-nested.json | 2 +- 4 files changed, 5 insertions(+), 4 deletions(-) diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json index eda245bab..eda73a2bb 100644 --- a/.storybook/data/tokens.json +++ b/.storybook/data/tokens.json @@ -732,7 +732,7 @@ "eds-size-6": "3rem", "eds-size-7": "3.5rem", "eds-size-8": "4rem", - "eds-size-9": "4.5rem`", + "eds-size-9": "4.5rem", "eds-size-10": "5rem", "eds-size-11": "5.5rem", "eds-size-12": "6rem", diff --git a/src/components/InlineNotification/InlineNotification.module.css b/src/components/InlineNotification/InlineNotification.module.css index f1ce87791..c384e6bb8 100644 --- a/src/components/InlineNotification/InlineNotification.module.css +++ b/src/components/InlineNotification/InlineNotification.module.css @@ -65,5 +65,6 @@ padding: calc(var(--eds-size-1) + var(--eds-theme-border-width)); } .inline-notification--full-width-subtle { - background-color: var(--eds-theme-color-background-neutral-subtle); + /* TODO-AH: revisit when re-theming the inline notification component */ + background-color: var(--eds-theme-color-background-neutral-default); } diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css index 484e3dfef..76d04fa18 100644 --- a/src/tokens-dist/css/variables.css +++ b/src/tokens-dist/css/variables.css @@ -16,7 +16,7 @@ --eds-size-12: 6rem; --eds-size-11: 5.5rem; --eds-size-10: 5rem; - --eds-size-9: 4.5rem`; + --eds-size-9: 4.5rem; --eds-size-8: 4rem; --eds-size-7: 3.5rem; --eds-size-6: 3rem; diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json index d1eeebc69..c73bec181 100644 --- a/src/tokens-dist/json/variables-nested.json +++ b/src/tokens-dist/json/variables-nested.json @@ -1334,7 +1334,7 @@ "6": "3rem", "7": "3.5rem", "8": "4rem", - "9": "4.5rem`", + "9": "4.5rem", "10": "5rem", "11": "5.5rem", "12": "6rem", From 465151f41bbae6ceca1658f568ae034d69c0482a Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Mon, 11 Mar 2024 14:15:36 -0500 Subject: [PATCH 5/5] feat(tokens): update token values from design --- .storybook/data/tokens.json | 104 ++++++++-------- src/design-tokens/primitives.json | 57 +++++---- src/design-tokens/themes.json | 95 +++++---------- src/tokens-dist/css/variables.css | 108 +++++++++-------- src/tokens-dist/json/variables-nested.json | 108 ++++++++--------- src/tokens-dist/ts/colors.ts | 134 +++++++++++---------- 6 files changed, 297 insertions(+), 309 deletions(-) diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json index eda73a2bb..a9a117b0a 100644 --- a/.storybook/data/tokens.json +++ b/.storybook/data/tokens.json @@ -153,8 +153,8 @@ "eds-theme-border-radius-surfaces-md": "6", "eds-theme-border-radius-objects-md": "4", "eds-theme-border-radius-objects-sm": "2", - "eds-theme-border-radius-tab-underline-default": "9999px", - "eds-theme-border-radius-tab-underline-sticky": "9999px", + "eds-theme-border-radius-objects-xs": "0px", + "eds-theme-border-radius-tab-underline": "50%", "eds-theme-border-width": "1px", "eds-theme-box-button-border-radius": "4px", "eds-theme-box-focus-ring-outline-width": "1px", @@ -165,7 +165,7 @@ "eds-theme-size-slider-thumb": "1.5rem", "eds-theme-color-body-background": "#EEE7E4", "eds-theme-color-body-background-inverted": "#383C43", - "eds-theme-color-background-input": "rgba(255, 255, 255, 1)", + "eds-theme-color-background-input": "rgb(var(--eds-color-white) / 1)", "eds-theme-color-background-neutral-default": "#FFFFFF", "eds-theme-color-background-neutral-default-hover": "#EEE7E4", "eds-theme-color-background-neutral-subtle": "#EEE7E4", @@ -176,9 +176,9 @@ "eds-theme-color-background-brand-primary-subtle": "#F0F0FC", "eds-theme-color-background-brand-primary-strong": "#6B65E2", "eds-theme-color-background-brand-primary-strong-hover": "#3E42B1", - "eds-theme-color-background-utility-base-0": "rgba(255, 255, 255, 1)", - "eds-theme-color-background-utility-base-1": "#FFFFFF", - "eds-theme-color-background-utility-container": "rgba(255, 255, 255, 1)", + "eds-theme-color-background-utility-base-0": "rgb(var(--eds-color-white) / 1)", + "eds-theme-color-background-utility-base-1": "#FDF9F8", + "eds-theme-color-background-utility-container": "rgb(var(--eds-color-white) / 1)", "eds-theme-color-background-utility-container-hover": "#F9F3F1", "eds-theme-color-background-utility-container-active": "#EEE7E4", "eds-theme-color-background-utility-overlay-low-emphasis": "#272625", @@ -202,14 +202,14 @@ "eds-theme-color-background-utility-interactive-high-emphasis-hover": "#0A164C", "eds-theme-color-background-utility-interactive-high-emphasis-active": "#060E30", "eds-theme-color-background-utility-critical-no-emphasis": "transparent", - "eds-theme-color-background-utility-critical-no-emphasis-hover": "FCF2F7", - "eds-theme-color-background-utility-critical-no-emphasis-active": "F8DDEA", - "eds-theme-color-background-utility-critical-low-emphasis": "FCF2F7", - "eds-theme-color-background-utility-critical-low-emphasis-hover": "F8DDEA", - "eds-theme-color-background-utility-critical-low-emphasis-active": "F5CCE0", - "eds-theme-color-background-utility-critical-high-emphasis": "9F1C55", - "eds-theme-color-background-utility-critical-high-emphasis-hover": "760C35", - "eds-theme-color-background-utility-critical-high-emphasis-active": "620424", + "eds-theme-color-background-utility-critical-no-emphasis-hover": "#FDF3F4", + "eds-theme-color-background-utility-critical-no-emphasis-active": "#FAE2E5", + "eds-theme-color-background-utility-critical-low-emphasis": "#FDF3F4", + "eds-theme-color-background-utility-critical-low-emphasis-hover": "#FAE2E5", + "eds-theme-color-background-utility-critical-low-emphasis-active": "#F6CDD1", + "eds-theme-color-background-utility-critical-high-emphasis": "#A51115", + "eds-theme-color-background-utility-critical-high-emphasis-hover": "#7D0A16", + "eds-theme-color-background-utility-critical-high-emphasis-active": "#660517", "eds-theme-color-background-utility-favorable-low-emphasis": "#E6F5ED", "eds-theme-color-background-utility-favorable-low-emphasis-hover": "#D0EDDD", "eds-theme-color-background-utility-favorable-low-emphasis-active": "#B3E1C7", @@ -226,12 +226,12 @@ "eds-theme-color-background-utility-disabled-low-emphasis": "#EEE7E4", "eds-theme-color-background-utility-disabled-medium-emphasis": "#CFC9C7", "eds-theme-color-background-utility-inverse-no-emphasis": "transparent", - "eds-theme-color-background-utility-inverse-no-emphasis-hover": "rgba(255,255,255, 0.2)", - "eds-theme-color-background-utility-inverse-no-emphasis-active": "rgba(255, 255, 255, 0.3)", - "eds-theme-color-background-utility-inverse-high-emphasis": "rgba(255, 255, 255, 1)", + "eds-theme-color-background-utility-inverse-no-emphasis-hover": "rgb(var(--eds-color-white) / 0.2)", + "eds-theme-color-background-utility-inverse-no-emphasis-active": "rgb(var(--eds-color-white) / 0.3)", + "eds-theme-color-background-utility-inverse-high-emphasis": "rgb(var(--eds-color-white) / 1)", "eds-theme-color-background-utility-inverse-high-emphasis-hover": "#F9F3F1", "eds-theme-color-background-utility-inverse-high-emphasis-active": "#EEE7E4", - "eds-theme-color-background-utility-inverse-disabled": "rgba(255, 255, 255, 0.5)", + "eds-theme-color-background-utility-inverse-disabled": "rgb(var(--eds-color-white) / 0.5)", "eds-theme-color-background-utility-success": "#ECFFF5", "eds-theme-color-background-utility-error": "#FFF0F4", "eds-theme-color-background-grade-complete-default": "#008656", @@ -263,9 +263,9 @@ "eds-theme-color-border-utility-interactive": "#0F2163", "eds-theme-color-border-utility-interactive-hover": "#0A164C", "eds-theme-color-border-utility-interactive-active": "#060E30", - "eds-theme-color-border-utility-critical": "9F1C55", - "eds-theme-color-border-utility-critical-hover": "760C35", - "eds-theme-color-border-utility-critical-active": "620424", + "eds-theme-color-border-utility-critical": "#A51115", + "eds-theme-color-border-utility-critical-hover": "#7D0A16", + "eds-theme-color-border-utility-critical-active": "#660517", "eds-theme-color-border-utility-favorable": "#367759", "eds-theme-color-border-utility-favorable-hover": "#225E43", "eds-theme-color-border-utility-favorable-active": "#13462F", @@ -280,8 +280,8 @@ "eds-theme-color-border-utility-informational-active": "#1B3889", "eds-theme-color-border-utility-disabled": "#A09C9A", "eds-theme-color-border-utility-focus": "#3165D2", - "eds-theme-color-border-utility-inverse": "rgba(255, 255, 255, 1)", - "eds-theme-color-border-utility-inverse-disabled": "rgba(255, 255, 255, 0.5)", + "eds-theme-color-border-utility-inverse": "rgb(var(--eds-color-white) / 1)", + "eds-theme-color-border-utility-inverse-disabled": "rgb(var(--eds-color-white) / 0.5)", "eds-theme-color-border-utility-success-subtle": "#B7E9CE", "eds-theme-color-border-utility-success-default": "#8FDCB3", "eds-theme-color-border-utility-success-strong": "#59C88C", @@ -501,9 +501,9 @@ "eds-theme-color-text-utility-interactive-secondary-hover": "#254EAC", "eds-theme-color-text-utility-interactive-secondary-active": "#1B3889", "eds-theme-color-text-utility-interactive-visited": "#8A50A7", - "eds-theme-color-text-utility-critical": "9F1C55", - "eds-theme-color-text-utility-critical-hover": "760C35", - "eds-theme-color-text-utility-critical-active": "620424", + "eds-theme-color-text-utility-critical": "#A51115", + "eds-theme-color-text-utility-critical-hover": "#7D0A16", + "eds-theme-color-text-utility-critical-active": "#660517", "eds-theme-color-text-utility-favorable": "#367759", "eds-theme-color-text-utility-favorable-hover": "#225E43", "eds-theme-color-text-utility-favorable-active": "#13462F", @@ -515,8 +515,8 @@ "eds-theme-color-text-utility-informational-active": "#1B3889", "eds-theme-color-text-utility-disabled-primary": "#A09C9A", "eds-theme-color-text-utility-disabled-secondary": "#CFC9C7", - "eds-theme-color-text-utility-inverse": "rgba(255, 255, 255, 1)", - "eds-theme-color-text-utility-inverse-disabled": "rgba(255, 255, 255, 0.5)", + "eds-theme-color-text-utility-inverse": "rgb(var(--eds-color-white) / 1)", + "eds-theme-color-text-utility-inverse-disabled": "rgb(var(--eds-color-white) / 0.5)", "eds-theme-color-text-utility-placeholder": "#6C6967", "eds-theme-color-text-utility-success": "#007249", "eds-theme-color-text-utility-error": "#BD0044", @@ -558,6 +558,8 @@ "eds-border-radius-xl": "20px", "eds-border-radius-round": "50%", "eds-border-radius-full": "9999px", + "eds-color-white": "255 255 255", + "eds-color-black": "0 0 0", "eds-color-brand-grape-100": "#F0F0FC", "eds-color-brand-grape-200": "#E0E0F9", "eds-color-brand-grape-300": "#C4C1F3", @@ -585,23 +587,23 @@ "eds-color-neutral-900": "#1A1919", "eds-color-neutral-950": "#0F0F0F", "eds-color-neutral-white": "#FFFFFF", - "eds-color-neutral-025": "#FFFFFF", + "eds-color-neutral-025": "#FDF9F8", "eds-color-neutral-050": "#F9F3F1", "eds-color-neutral-black": "#161B1F", - "eds-color-red-100": "F8DDEA", - "eds-color-red-150": "F5CCE0", - "eds-color-red-200": "F1B5D2", - "eds-color-red-250": "EC9EC3", - "eds-color-red-350": "E67EB0", - "eds-color-red-450": "DB458D", - "eds-color-red-550": "C62B73", - "eds-color-red-650": "9F1C55", - "eds-color-red-750": "760C35", - "eds-color-red-800": "620424", - "eds-color-red-850": "4D0118", - "eds-color-red-900": "350110", - "eds-color-red-950": "23010B", - "eds-color-red-050": "FCF2F7", + "eds-color-red-100": "#FAE2E5", + "eds-color-red-150": "#F6CDD1", + "eds-color-red-200": "#F3B7BD", + "eds-color-red-250": "#EFA0A9", + "eds-color-red-350": "#E9808C", + "eds-color-red-450": "#D8525B", + "eds-color-red-550": "#C42C2F", + "eds-color-red-650": "#A51115", + "eds-color-red-750": "#7D0A16", + "eds-color-red-800": "#660517", + "eds-color-red-850": "#4D0118", + "eds-color-red-900": "#350110", + "eds-color-red-950": "#23010B", + "eds-color-red-050": "#FDF3F4", "eds-color-orange-100": "#FFDCCA", "eds-color-orange-150": "#FFC7AB", "eds-color-orange-200": "#FFB38D", @@ -672,14 +674,14 @@ "eds-color-purple-900": "#25142E", "eds-color-purple-950": "#190D1E", "eds-color-purple-050": "#FBF5FD", - "eds-color-opacity-10": ".10", - "eds-color-opacity-20": ".20", - "eds-color-opacity-30": ".30", - "eds-color-opacity-40": ".40", - "eds-color-opacity-50": ".50", - "eds-color-opacity-60": ".60", - "eds-color-opacity-70": ".60", - "eds-color-opacity-80": ".80", + "eds-color-opacity-10": "0.10", + "eds-color-opacity-20": "0.20", + "eds-color-opacity-30": "0.30", + "eds-color-opacity-40": "0.40", + "eds-color-opacity-50": "0.50", + "eds-color-opacity-60": "0.60", + "eds-color-opacity-70": "0.60", + "eds-color-opacity-80": "0.80", "eds-color-other-mint-100": "#ECFFF5", "eds-color-other-mint-200": "#B7E9CE", "eds-color-other-mint-300": "#8FDCB3", diff --git a/src/design-tokens/primitives.json b/src/design-tokens/primitives.json index 6270461dc..d723ee824 100644 --- a/src/design-tokens/primitives.json +++ b/src/design-tokens/primitives.json @@ -75,6 +75,14 @@ } }, "color": { + "white": { + "value": "255 255 255", + "comment": "Specified as a value to color-func rgb() so that it can be blended" + }, + "black": { + "value": "0 0 0", + "comment": "Specified as a value to color-func rgb() so that it can be blended" + }, "brand": { "grape": { "100": { @@ -126,9 +134,8 @@ "comment": "@deprecated This should not be used in code or design. It will be removed in a future version of EDS." }, "025": { - "value": "#FFFFFF", - "group": "color", - "comment": "TODO-AH: inserting missing value" + "value": "#FDF9F8", + "group": "color" }, "050": { "value": "#F9F3F1", "group": "color" }, "100": { "value": "#EEE7E4", "group": "color" }, @@ -176,20 +183,20 @@ } }, "red": { - "050": { "value": "FCF2F7", "group": "color" }, - "100": { "value": "F8DDEA", "group": "color" }, - "150": { "value": "F5CCE0", "group": "color" }, - "200": { "value": "F1B5D2", "group": "color" }, - "250": { "value": "EC9EC3", "group": "color" }, - "350": { "value": "E67EB0", "group": "color" }, - "450": { "value": "DB458D", "group": "color" }, - "550": { "value": "C62B73", "group": "color" }, - "650": { "value": "9F1C55", "group": "color" }, - "750": { "value": "760C35", "group": "color" }, - "800": { "value": "620424", "group": "color" }, - "850": { "value": "4D0118", "group": "color" }, - "900": { "value": "350110", "group": "color" }, - "950": { "value": "23010B", "group": "color" } + "050": { "value": "#FDF3F4", "group": "color" }, + "100": { "value": "#FAE2E5", "group": "color" }, + "150": { "value": "#F6CDD1", "group": "color" }, + "200": { "value": "#F3B7BD", "group": "color" }, + "250": { "value": "#EFA0A9", "group": "color" }, + "350": { "value": "#E9808C", "group": "color" }, + "450": { "value": "#D8525B", "group": "color" }, + "550": { "value": "#C42C2F", "group": "color" }, + "650": { "value": "#A51115", "group": "color" }, + "750": { "value": "#7D0A16", "group": "color" }, + "800": { "value": "#660517", "group": "color" }, + "850": { "value": "#4D0118", "group": "color" }, + "900": { "value": "#350110", "group": "color" }, + "950": { "value": "#23010B", "group": "color" } }, "orange": { "050": { "value": "#FFEEE5", "group": "color" }, @@ -272,14 +279,14 @@ "950": { "value": "#190D1E", "group": "color" } }, "opacity": { - "10": { "value": ".10", "group": "color" }, - "20": { "value": ".20", "group": "color" }, - "30": { "value": ".30", "group": "color" }, - "40": { "value": ".40", "group": "color" }, - "50": { "value": ".50", "group": "color" }, - "60": { "value": ".60", "group": "color" }, - "70": { "value": ".60", "group": "color" }, - "80": { "value": ".80", "group": "color" } + "10": { "value": "0.10", "group": "color" }, + "20": { "value": "0.20", "group": "color" }, + "30": { "value": "0.30", "group": "color" }, + "40": { "value": "0.40", "group": "color" }, + "50": { "value": "0.50", "group": "color" }, + "60": { "value": "0.60", "group": "color" }, + "70": { "value": "0.60", "group": "color" }, + "80": { "value": "0.80", "group": "color" } }, "other": { "mint": { diff --git a/src/design-tokens/themes.json b/src/design-tokens/themes.json index b3f1e623b..54c9fb0ac 100644 --- a/src/design-tokens/themes.json +++ b/src/design-tokens/themes.json @@ -20,16 +20,13 @@ }, "sm": { "value": "{eds.border.radius.50}" + }, + "xs": { + "value": "{eds.border.radius.none}" } }, "tabUnderline": { - "default": { - "value": "{eds.border.radius.full}" - }, - "sticky": { - "value": "{eds.border.radius.full}", - "comment": "TODO-AH: this token is marked as deprecated" - } + "value": "{eds.border.radius.round}" } }, "width": { @@ -92,8 +89,7 @@ }, "background": { "input": { - "value": "rgba(255, 255, 255, 1)", - "comment": "TODO-AH: what is the token to use here?" + "value": "rgb(var(--eds-color-white) / 1)" }, "neutral": { "default": { @@ -152,22 +148,18 @@ "utility": { "base": { "0": { - "value": "rgba(255, 255, 255, 1)", - "comment": "TODO-AH: what is the token to use here?" + "value": "rgb(var(--eds-color-white) / 1)" }, "1": { - "value": "{eds.color.neutral.025}", - "comment": "TODO-AH: this appears to be missing in the spreadsheet" + "value": "{eds.color.neutral.025}" } }, "container": { "@": { - "value": "rgba(255, 255, 255, 1)", - "comment": "TODO-AH: what token is this referring to?" + "value": "rgb(var(--eds-color-white) / 1)" }, "hover": { - "value": "{eds.color.neutral.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.neutral.050}" }, "active": { "value": "{eds.color.neutral.100}" @@ -186,12 +178,10 @@ "neutral": { "noEmphasis": { "@": { - "value": "transparent", - "comment": "TODO-AH: what token is this referring to?" + "value": "transparent" }, "hover": { - "value": "{eds.color.neutral.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.neutral.050}" }, "active": { "value": "{eds.color.neutral.100}" @@ -199,8 +189,7 @@ }, "lowEmphasis": { "@": { - "value": "{eds.color.neutral.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.neutral.050}" }, "hover": { "value": "{eds.color.neutral.100}" @@ -224,12 +213,10 @@ "interactive": { "noEmphasis": { "@": { - "value": "transparent", - "comment": "TODO-AH: what token is this referring to?" + "value": "transparent" }, "hover": { - "value": "{eds.color.blue.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.blue.050}" }, "active": { "value": "{eds.color.blue.100}" @@ -237,8 +224,7 @@ }, "lowEmphasis": { "@": { - "value": "{eds.color.blue.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.blue.050}" }, "hover": { "value": "{eds.color.blue.100}" @@ -262,12 +248,10 @@ "critical": { "noEmphasis": { "@": { - "value": "transparent", - "comment": "TODO-AH: what token is this referring to?" + "value": "transparent" }, "hover": { - "value": "{eds.color.red.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.red.050}" }, "active": { "value": "{eds.color.red.100}" @@ -275,8 +259,7 @@ }, "lowEmphasis": { "@": { - "value": "{eds.color.red.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.red.050}" }, "hover": { "value": "{eds.color.red.100}" @@ -300,8 +283,7 @@ "favorable": { "lowEmphasis": { "@": { - "value": "{eds.color.green.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.green.050}" }, "hover": { "value": "{eds.color.green.100}" @@ -325,8 +307,7 @@ "warning": { "lowEmphasis": { "@": { - "value": "{eds.color.yellow.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.yellow.050}" }, "hover": { "value": "{eds.color.yellow.100}" @@ -339,8 +320,7 @@ "information": { "lowEmphasis": { "@": { - "value": "{eds.color.blue.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.blue.050}" }, "hover": { "value": "{eds.color.blue.100}" @@ -352,8 +332,7 @@ }, "disabled": { "noEmphasis": { - "value": "transparent", - "comment": "TODO-AH: this appears to be missing in the spreadsheet" + "value": "transparent" }, "lowEmphasis": { "value": "{eds.color.neutral.100}" @@ -365,34 +344,28 @@ "inverse": { "noEmphasis": { "@": { - "value": "transparent", - "comment": "TODO-AH: this appears to be missing in the spreadsheet" + "value": "transparent" }, "hover": { - "value": "rgba(255,255,255, 0.2)", - "comment": "TODO-AH: missing token to color-mix with opacity 20%" + "value": "rgb(var(--eds-color-white) / 0.2)" }, "active": { - "value": "rgba(255, 255, 255, 0.3)", - "comment": "TODO-AH: missing token to color-mix with opacity 20%" + "value": "rgb(var(--eds-color-white) / 0.3)" } }, "highEmphasis": { "@": { - "value": "rgba(255, 255, 255, 1)", - "comment": "TODO-AH: missing token to color-mix with opacity 100%" + "value": "rgb(var(--eds-color-white) / 1)" }, "hover": { - "value": "{eds.color.neutral.050}", - "comment": "TODO-AH: name format does not match the tier 1" + "value": "{eds.color.neutral.050}" }, "active": { "value": "{eds.color.neutral.100}" } }, "disabled": { - "value": "rgba(255, 255, 255, 0.5)", - "comment": "TODO-AH: missing token to color-mix with opacity 50%" + "value": "rgb(var(--eds-color-white) / 0.5)" } }, "success": { @@ -617,12 +590,10 @@ }, "inverse": { "@": { - "value": "rgba(255, 255, 255, 1)", - "comment": "TODO-AH: missing token to color-mix with opacity 100%" + "value": "rgb(var(--eds-color-white) / 1)" }, "disabled": { - "value": "rgba(255, 255, 255, 0.5)", - "comment": "TODO-AH: missing token to color-mix with opacity 50%" + "value": "rgb(var(--eds-color-white) / 0.5)" } }, "success": { @@ -1783,12 +1754,10 @@ }, "inverse": { "@": { - "value": "rgba(255, 255, 255, 1)", - "comment": "TODO-AH: what token is this referring to?" + "value": "rgb(var(--eds-color-white) / 1)" }, "disabled": { - "value": "rgba(255, 255, 255, 0.5)", - "comment": "TODO-AH: what token is this referring to?" + "value": "rgb(var(--eds-color-white) / 0.5)" } }, "placeholder": { diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css index 76d04fa18..9b22f6f39 100644 --- a/src/tokens-dist/css/variables.css +++ b/src/tokens-dist/css/variables.css @@ -69,14 +69,14 @@ --eds-color-other-mint-300: #8FDCB3; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-color-other-mint-200: #B7E9CE; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-color-other-mint-100: #ECFFF5; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ - --eds-color-opacity-80: .80; - --eds-color-opacity-70: .60; - --eds-color-opacity-60: .60; - --eds-color-opacity-50: .50; - --eds-color-opacity-40: .40; - --eds-color-opacity-30: .30; - --eds-color-opacity-20: .20; - --eds-color-opacity-10: .10; + --eds-color-opacity-80: 0.80; + --eds-color-opacity-70: 0.60; + --eds-color-opacity-60: 0.60; + --eds-color-opacity-50: 0.50; + --eds-color-opacity-40: 0.40; + --eds-color-opacity-30: 0.30; + --eds-color-opacity-20: 0.20; + --eds-color-opacity-10: 0.10; --eds-color-purple-050: #FBF5FD; --eds-color-purple-950: #190D1E; --eds-color-purple-900: #25142E; @@ -147,23 +147,23 @@ --eds-color-orange-200: #FFB38D; --eds-color-orange-150: #FFC7AB; --eds-color-orange-100: #FFDCCA; - --eds-color-red-050: FCF2F7; - --eds-color-red-950: 23010B; - --eds-color-red-900: 350110; - --eds-color-red-850: 4D0118; - --eds-color-red-800: 620424; - --eds-color-red-750: 760C35; - --eds-color-red-650: 9F1C55; - --eds-color-red-550: C62B73; - --eds-color-red-450: DB458D; - --eds-color-red-350: E67EB0; - --eds-color-red-250: EC9EC3; - --eds-color-red-200: F1B5D2; - --eds-color-red-150: F5CCE0; - --eds-color-red-100: F8DDEA; + --eds-color-red-050: #FDF3F4; + --eds-color-red-950: #23010B; + --eds-color-red-900: #350110; + --eds-color-red-850: #4D0118; + --eds-color-red-800: #660517; + --eds-color-red-750: #7D0A16; + --eds-color-red-650: #A51115; + --eds-color-red-550: #C42C2F; + --eds-color-red-450: #D8525B; + --eds-color-red-350: #E9808C; + --eds-color-red-250: #EFA0A9; + --eds-color-red-200: #F3B7BD; + --eds-color-red-150: #F6CDD1; + --eds-color-red-100: #FAE2E5; --eds-color-neutral-black: #161B1F; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-color-neutral-050: #F9F3F1; - --eds-color-neutral-025: #FFFFFF; /* TODO-AH: inserting missing value */ + --eds-color-neutral-025: #FDF9F8; --eds-color-neutral-white: #FFFFFF; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-color-neutral-950: #0F0F0F; --eds-color-neutral-900: #1A1919; @@ -191,6 +191,8 @@ --eds-color-brand-grape-300: #C4C1F3; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-color-brand-grape-200: #E0E0F9; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-color-brand-grape-100: #F0F0FC; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ + --eds-color-black: 0 0 0; /* Specified as a value to color-func rgb() so that it can be blended */ + --eds-color-white: 255 255 255; /* Specified as a value to color-func rgb() so that it can be blended */ --eds-border-radius-full: 9999px; --eds-border-radius-round: 50%; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-border-radius-xl: 20px; /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ @@ -222,8 +224,8 @@ --eds-theme-color-toggle-off-background: var(--eds-theme-color-icon-neutral-subtle); --eds-theme-color-toggle-on-background: var(--eds-theme-color-background-brand-primary-strong); --eds-theme-color-text-brand-default: var(--eds-theme-color-text-brand-primary); - --eds-theme-color-text-utility-inverse-disabled: rgba(255, 255, 255, 0.5); /* TODO-AH: what token is this referring to? */ - --eds-theme-color-text-utility-inverse: rgba(255, 255, 255, 1); /* TODO-AH: what token is this referring to? */ + --eds-theme-color-text-utility-inverse-disabled: rgb(var(--eds-color-white) / 0.5); + --eds-theme-color-text-utility-inverse: rgb(var(--eds-color-white) / 1); --eds-theme-color-link-neutral-background-focus: var(--eds-theme-color-text-neutral-default); --eds-theme-color-link-neutral-text-decoration-focus: var(--eds-theme-color-text-neutral-default-inverse); --eds-theme-color-link-neutral-text-decoration-hover: var(--eds-theme-color-text-brand-default); @@ -238,21 +240,21 @@ --eds-theme-color-link-brand-text-focus: var(--eds-theme-color-text-neutral-default-inverse); --eds-theme-color-link-brand-text-hover: var(--eds-theme-color-text-brand-default); --eds-theme-color-link-brand-text: var(--eds-theme-color-text-neutral-strong); - --eds-theme-color-border-utility-inverse-disabled: rgba(255, 255, 255, 0.5); /* TODO-AH: missing token to color-mix with opacity 50% */ - --eds-theme-color-border-utility-inverse: rgba(255, 255, 255, 1); /* TODO-AH: missing token to color-mix with opacity 100% */ + --eds-theme-color-border-utility-inverse-disabled: rgb(var(--eds-color-white) / 0.5); + --eds-theme-color-border-utility-inverse: rgb(var(--eds-color-white) / 1); --eds-theme-color-border-brand-primary-default: var(--eds-theme-color-border-brand-primary); - --eds-theme-color-background-utility-inverse-disabled: rgba(255, 255, 255, 0.5); /* TODO-AH: missing token to color-mix with opacity 50% */ - --eds-theme-color-background-utility-inverse-high-emphasis: rgba(255, 255, 255, 1); /* TODO-AH: missing token to color-mix with opacity 100% */ - --eds-theme-color-background-utility-inverse-no-emphasis-active: rgba(255, 255, 255, 0.3); /* TODO-AH: missing token to color-mix with opacity 20% */ - --eds-theme-color-background-utility-inverse-no-emphasis-hover: rgba(255,255,255, 0.2); /* TODO-AH: missing token to color-mix with opacity 20% */ - --eds-theme-color-background-utility-inverse-no-emphasis: transparent; /* TODO-AH: this appears to be missing in the spreadsheet */ - --eds-theme-color-background-utility-disabled-no-emphasis: transparent; /* TODO-AH: this appears to be missing in the spreadsheet */ - --eds-theme-color-background-utility-critical-no-emphasis: transparent; /* TODO-AH: what token is this referring to? */ - --eds-theme-color-background-utility-interactive-no-emphasis: transparent; /* TODO-AH: what token is this referring to? */ - --eds-theme-color-background-utility-neutral-no-emphasis: transparent; /* TODO-AH: what token is this referring to? */ - --eds-theme-color-background-utility-container: rgba(255, 255, 255, 1); /* TODO-AH: what token is this referring to? */ - --eds-theme-color-background-utility-base-0: rgba(255, 255, 255, 1); /* TODO-AH: what is the token to use here? */ - --eds-theme-color-background-input: rgba(255, 255, 255, 1); /* TODO-AH: what is the token to use here? */ + --eds-theme-color-background-utility-inverse-disabled: rgb(var(--eds-color-white) / 0.5); + --eds-theme-color-background-utility-inverse-high-emphasis: rgb(var(--eds-color-white) / 1); + --eds-theme-color-background-utility-inverse-no-emphasis-active: rgb(var(--eds-color-white) / 0.3); + --eds-theme-color-background-utility-inverse-no-emphasis-hover: rgb(var(--eds-color-white) / 0.2); + --eds-theme-color-background-utility-inverse-no-emphasis: transparent; + --eds-theme-color-background-utility-disabled-no-emphasis: transparent; + --eds-theme-color-background-utility-critical-no-emphasis: transparent; + --eds-theme-color-background-utility-interactive-no-emphasis: transparent; + --eds-theme-color-background-utility-neutral-no-emphasis: transparent; + --eds-theme-color-background-utility-container: rgb(var(--eds-color-white) / 1); + --eds-theme-color-background-utility-base-0: rgb(var(--eds-color-white) / 1); + --eds-theme-color-background-input: rgb(var(--eds-color-white) / 1); --eds-theme-typography-tag: var(--eds-typography-preset-009); --eds-theme-typography-tab-sm-active: var(--eds-typography-preset-009); --eds-theme-typography-tab-sm: var(--eds-typography-preset-008-light); @@ -679,50 +681,50 @@ --eds-theme-color-background-utility-error: var(--eds-color-other-ruby-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-theme-color-background-utility-success: var(--eds-color-other-mint-100); /* @deprecated This should not be used in code or design. It will be removed in a future version of EDS. */ --eds-theme-color-background-utility-inverse-high-emphasis-active: var(--eds-color-neutral-100); - --eds-theme-color-background-utility-inverse-high-emphasis-hover: var(--eds-color-neutral-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-inverse-high-emphasis-hover: var(--eds-color-neutral-050); --eds-theme-color-background-utility-disabled-medium-emphasis: var(--eds-color-neutral-200); --eds-theme-color-background-utility-disabled-low-emphasis: var(--eds-color-neutral-100); --eds-theme-color-background-utility-information-low-emphasis-active: var(--eds-color-blue-150); --eds-theme-color-background-utility-information-low-emphasis-hover: var(--eds-color-blue-100); - --eds-theme-color-background-utility-information-low-emphasis: var(--eds-color-blue-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-information-low-emphasis: var(--eds-color-blue-050); --eds-theme-color-background-utility-warning-low-emphasis-active: var(--eds-color-yellow-150); --eds-theme-color-background-utility-warning-low-emphasis-hover: var(--eds-color-yellow-100); - --eds-theme-color-background-utility-warning-low-emphasis: var(--eds-color-yellow-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-warning-low-emphasis: var(--eds-color-yellow-050); --eds-theme-color-background-utility-favorable-high-emphasis-active: var(--eds-color-green-750); --eds-theme-color-background-utility-favorable-high-emphasis-hover: var(--eds-color-green-650); --eds-theme-color-background-utility-favorable-high-emphasis: var(--eds-color-green-550); --eds-theme-color-background-utility-favorable-low-emphasis-active: var(--eds-color-green-150); --eds-theme-color-background-utility-favorable-low-emphasis-hover: var(--eds-color-green-100); - --eds-theme-color-background-utility-favorable-low-emphasis: var(--eds-color-green-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-favorable-low-emphasis: var(--eds-color-green-050); --eds-theme-color-background-utility-critical-high-emphasis-active: var(--eds-color-red-800); --eds-theme-color-background-utility-critical-high-emphasis-hover: var(--eds-color-red-750); --eds-theme-color-background-utility-critical-high-emphasis: var(--eds-color-red-650); --eds-theme-color-background-utility-critical-low-emphasis-active: var(--eds-color-red-150); --eds-theme-color-background-utility-critical-low-emphasis-hover: var(--eds-color-red-100); - --eds-theme-color-background-utility-critical-low-emphasis: var(--eds-color-red-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-critical-low-emphasis: var(--eds-color-red-050); --eds-theme-color-background-utility-critical-no-emphasis-active: var(--eds-color-red-100); - --eds-theme-color-background-utility-critical-no-emphasis-hover: var(--eds-color-red-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-critical-no-emphasis-hover: var(--eds-color-red-050); --eds-theme-color-background-utility-interactive-high-emphasis-active: var(--eds-color-blue-950); --eds-theme-color-background-utility-interactive-high-emphasis-hover: var(--eds-color-blue-900); --eds-theme-color-background-utility-interactive-high-emphasis: var(--eds-color-blue-850); --eds-theme-color-background-utility-interactive-low-emphasis-active: var(--eds-color-blue-150); --eds-theme-color-background-utility-interactive-low-emphasis-hover: var(--eds-color-blue-100); - --eds-theme-color-background-utility-interactive-low-emphasis: var(--eds-color-blue-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-interactive-low-emphasis: var(--eds-color-blue-050); --eds-theme-color-background-utility-interactive-no-emphasis-active: var(--eds-color-blue-100); - --eds-theme-color-background-utility-interactive-no-emphasis-hover: var(--eds-color-blue-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-interactive-no-emphasis-hover: var(--eds-color-blue-050); --eds-theme-color-background-utility-neutral-high-emphasis-active: var(--eds-color-neutral-750); --eds-theme-color-background-utility-neutral-high-emphasis-hover: var(--eds-color-neutral-650); --eds-theme-color-background-utility-neutral-high-emphasis: var(--eds-color-neutral-550); --eds-theme-color-background-utility-neutral-low-emphasis-active: var(--eds-color-neutral-150); --eds-theme-color-background-utility-neutral-low-emphasis-hover: var(--eds-color-neutral-100); - --eds-theme-color-background-utility-neutral-low-emphasis: var(--eds-color-neutral-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-neutral-low-emphasis: var(--eds-color-neutral-050); --eds-theme-color-background-utility-neutral-no-emphasis-active: var(--eds-color-neutral-100); - --eds-theme-color-background-utility-neutral-no-emphasis-hover: var(--eds-color-neutral-050); /* TODO-AH: name format does not match the tier 1 */ + --eds-theme-color-background-utility-neutral-no-emphasis-hover: var(--eds-color-neutral-050); --eds-theme-color-background-utility-overlay-high-emphasis: var(--eds-color-neutral-850); /* TODO-AH: color-mix with opacity 80% */ --eds-theme-color-background-utility-overlay-low-emphasis: var(--eds-color-neutral-850); /* TODO-AH: color-mix with opacity 50% */ --eds-theme-color-background-utility-container-active: var(--eds-color-neutral-100); - --eds-theme-color-background-utility-container-hover: var(--eds-color-neutral-050); /* TODO-AH: name format does not match the tier 1 */ - --eds-theme-color-background-utility-base-1: var(--eds-color-neutral-025); /* TODO-AH: this appears to be missing in the spreadsheet */ + --eds-theme-color-background-utility-container-hover: var(--eds-color-neutral-050); + --eds-theme-color-background-utility-base-1: var(--eds-color-neutral-025); --eds-theme-color-background-brand-primary-strong-hover: var(--eds-color-brand-grape-800); --eds-theme-color-background-brand-primary-strong: var(--eds-color-brand-grape-600); --eds-theme-color-background-brand-primary-subtle: var(--eds-color-brand-grape-100); @@ -743,8 +745,8 @@ --eds-theme-box-focus-ring-outline-width: var(--eds-outline-width-sm); --eds-theme-box-button-border-radius: var(--eds-border-radius-md); --eds-theme-border-width: var(--eds-border-width-sm); - --eds-theme-border-radius-tab-underline-sticky: var(--eds-border-radius-full); /* TODO-AH: this token is marked as deprecated */ - --eds-theme-border-radius-tab-underline-default: var(--eds-border-radius-full); + --eds-theme-border-radius-tab-underline: var(--eds-border-radius-round); + --eds-theme-border-radius-objects-xs: var(--eds-border-radius-none); --eds-theme-border-radius-objects-sm: var(--eds-border-radius-50); --eds-theme-border-radius-objects-md: var(--eds-border-radius-100); --eds-theme-border-radius-surfaces-md: var(--eds-border-radius-150); diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json index c73bec181..010fe91ac 100644 --- a/src/tokens-dist/json/variables-nested.json +++ b/src/tokens-dist/json/variables-nested.json @@ -295,12 +295,10 @@ }, "objects": { "md": "4", - "sm": "2" + "sm": "2", + "xs": "0px" }, - "tabUnderline": { - "default": "9999px", - "sticky": "9999px" - } + "tabUnderline": "50%" }, "width": "1px" }, @@ -339,7 +337,7 @@ } }, "background": { - "input": "rgba(255, 255, 255, 1)", + "input": "rgb(var(--eds-color-white) / 1)", "neutral": { "default": { "@": "#FFFFFF", @@ -366,11 +364,11 @@ }, "utility": { "base": { - "0": "rgba(255, 255, 255, 1)", - "1": "#FFFFFF" + "0": "rgb(var(--eds-color-white) / 1)", + "1": "#FDF9F8" }, "container": { - "@": "rgba(255, 255, 255, 1)", + "@": "rgb(var(--eds-color-white) / 1)", "hover": "#F9F3F1", "active": "#EEE7E4" }, @@ -415,18 +413,18 @@ "critical": { "noEmphasis": { "@": "transparent", - "hover": "FCF2F7", - "active": "F8DDEA" + "hover": "#FDF3F4", + "active": "#FAE2E5" }, "lowEmphasis": { - "@": "FCF2F7", - "hover": "F8DDEA", - "active": "F5CCE0" + "@": "#FDF3F4", + "hover": "#FAE2E5", + "active": "#F6CDD1" }, "highEmphasis": { - "@": "9F1C55", - "hover": "760C35", - "active": "620424" + "@": "#A51115", + "hover": "#7D0A16", + "active": "#660517" } }, "favorable": { @@ -463,15 +461,15 @@ "inverse": { "noEmphasis": { "@": "transparent", - "hover": "rgba(255,255,255, 0.2)", - "active": "rgba(255, 255, 255, 0.3)" + "hover": "rgb(var(--eds-color-white) / 0.2)", + "active": "rgb(var(--eds-color-white) / 0.3)" }, "highEmphasis": { - "@": "rgba(255, 255, 255, 1)", + "@": "rgb(var(--eds-color-white) / 1)", "hover": "#F9F3F1", "active": "#EEE7E4" }, - "disabled": "rgba(255, 255, 255, 0.5)" + "disabled": "rgb(var(--eds-color-white) / 0.5)" }, "success": "#ECFFF5", "error": "#FFF0F4" @@ -539,9 +537,9 @@ "active": "#060E30" }, "critical": { - "@": "9F1C55", - "hover": "760C35", - "active": "620424" + "@": "#A51115", + "hover": "#7D0A16", + "active": "#660517" }, "favorable": { "@": "#367759", @@ -564,8 +562,8 @@ "disabled": "#A09C9A", "focus": "#3165D2", "inverse": { - "@": "rgba(255, 255, 255, 1)", - "disabled": "rgba(255, 255, 255, 0.5)" + "@": "rgb(var(--eds-color-white) / 1)", + "disabled": "rgb(var(--eds-color-white) / 0.5)" }, "success": { "subtle": "#B7E9CE", @@ -1013,9 +1011,9 @@ "visited": "#8A50A7" }, "critical": { - "@": "9F1C55", - "hover": "760C35", - "active": "620424" + "@": "#A51115", + "hover": "#7D0A16", + "active": "#660517" }, "favorable": { "@": "#367759", @@ -1037,8 +1035,8 @@ "secondary": "#CFC9C7" }, "inverse": { - "@": "rgba(255, 255, 255, 1)", - "disabled": "rgba(255, 255, 255, 0.5)" + "@": "rgb(var(--eds-color-white) / 1)", + "disabled": "rgb(var(--eds-color-white) / 0.5)" }, "placeholder": "#6C6967", "success": "#007249", @@ -1120,6 +1118,8 @@ } }, "color": { + "white": "255 255 255", + "black": "0 0 0", "brand": { "grape": { "100": "#F0F0FC", @@ -1152,25 +1152,25 @@ "900": "#1A1919", "950": "#0F0F0F", "white": "#FFFFFF", - "025": "#FFFFFF", + "025": "#FDF9F8", "050": "#F9F3F1", "black": "#161B1F" }, "red": { - "100": "F8DDEA", - "150": "F5CCE0", - "200": "F1B5D2", - "250": "EC9EC3", - "350": "E67EB0", - "450": "DB458D", - "550": "C62B73", - "650": "9F1C55", - "750": "760C35", - "800": "620424", - "850": "4D0118", - "900": "350110", - "950": "23010B", - "050": "FCF2F7" + "100": "#FAE2E5", + "150": "#F6CDD1", + "200": "#F3B7BD", + "250": "#EFA0A9", + "350": "#E9808C", + "450": "#D8525B", + "550": "#C42C2F", + "650": "#A51115", + "750": "#7D0A16", + "800": "#660517", + "850": "#4D0118", + "900": "#350110", + "950": "#23010B", + "050": "#FDF3F4" }, "orange": { "100": "#FFDCCA", @@ -1253,14 +1253,14 @@ "050": "#FBF5FD" }, "opacity": { - "10": ".10", - "20": ".20", - "30": ".30", - "40": ".40", - "50": ".50", - "60": ".60", - "70": ".60", - "80": ".80" + "10": "0.10", + "20": "0.20", + "30": "0.30", + "40": "0.40", + "50": "0.50", + "60": "0.60", + "70": "0.60", + "80": "0.80" }, "other": { "mint": { diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts index 4458d726d..0fabf08e3 100644 --- a/src/tokens-dist/ts/colors.ts +++ b/src/tokens-dist/ts/colors.ts @@ -1,6 +1,6 @@ export const EdsThemeColorBodyBackground = '#EEE7E4'; export const EdsThemeColorBodyBackgroundInverted = '#383C43'; -export const EdsThemeColorBackgroundInput = 'rgba(255, 255, 255, 1)'; // TODO-AH: what is the token to use here? +export const EdsThemeColorBackgroundInput = 'rgb(var(--eds-color-white) / 1)'; export const EdsThemeColorBackgroundNeutralDefault = '#FFFFFF'; export const EdsThemeColorBackgroundNeutralDefaultHover = '#EEE7E4'; export const EdsThemeColorBackgroundNeutralSubtle = '#EEE7E4'; @@ -11,17 +11,19 @@ export const EdsThemeColorBackgroundBrandPrimaryDefault = '#F0F0FC'; export const EdsThemeColorBackgroundBrandPrimarySubtle = '#F0F0FC'; export const EdsThemeColorBackgroundBrandPrimaryStrong = '#6B65E2'; export const EdsThemeColorBackgroundBrandPrimaryStrongHover = '#3E42B1'; -export const EdsThemeColorBackgroundUtilityBase0 = 'rgba(255, 255, 255, 1)'; // TODO-AH: what is the token to use here? -export const EdsThemeColorBackgroundUtilityBase1 = '#FFFFFF'; // TODO-AH: this appears to be missing in the spreadsheet -export const EdsThemeColorBackgroundUtilityContainer = 'rgba(255, 255, 255, 1)'; // TODO-AH: what token is this referring to? -export const EdsThemeColorBackgroundUtilityContainerHover = '#F9F3F1'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityBase0 = + 'rgb(var(--eds-color-white) / 1)'; +export const EdsThemeColorBackgroundUtilityBase1 = '#FDF9F8'; +export const EdsThemeColorBackgroundUtilityContainer = + 'rgb(var(--eds-color-white) / 1)'; +export const EdsThemeColorBackgroundUtilityContainerHover = '#F9F3F1'; export const EdsThemeColorBackgroundUtilityContainerActive = '#EEE7E4'; export const EdsThemeColorBackgroundUtilityOverlayLowEmphasis = '#272625'; // TODO-AH: color-mix with opacity 50% export const EdsThemeColorBackgroundUtilityOverlayHighEmphasis = '#272625'; // TODO-AH: color-mix with opacity 80% -export const EdsThemeColorBackgroundUtilityNeutralNoEmphasis = 'transparent'; // TODO-AH: what token is this referring to? -export const EdsThemeColorBackgroundUtilityNeutralNoEmphasisHover = '#F9F3F1'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityNeutralNoEmphasis = 'transparent'; +export const EdsThemeColorBackgroundUtilityNeutralNoEmphasisHover = '#F9F3F1'; export const EdsThemeColorBackgroundUtilityNeutralNoEmphasisActive = '#EEE7E4'; -export const EdsThemeColorBackgroundUtilityNeutralLowEmphasis = '#F9F3F1'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityNeutralLowEmphasis = '#F9F3F1'; export const EdsThemeColorBackgroundUtilityNeutralLowEmphasisHover = '#EEE7E4'; export const EdsThemeColorBackgroundUtilityNeutralLowEmphasisActive = '#DFD9D6'; export const EdsThemeColorBackgroundUtilityNeutralHighEmphasis = '#6C6967'; @@ -29,12 +31,12 @@ export const EdsThemeColorBackgroundUtilityNeutralHighEmphasisHover = '#565352'; export const EdsThemeColorBackgroundUtilityNeutralHighEmphasisActive = '#3F3E3D'; export const EdsThemeColorBackgroundUtilityInteractiveNoEmphasis = - 'transparent'; // TODO-AH: what token is this referring to? + 'transparent'; export const EdsThemeColorBackgroundUtilityInteractiveNoEmphasisHover = - '#EAF4FF'; // TODO-AH: name format does not match the tier 1 + '#EAF4FF'; export const EdsThemeColorBackgroundUtilityInteractiveNoEmphasisActive = '#CEE6FF'; -export const EdsThemeColorBackgroundUtilityInteractiveLowEmphasis = '#EAF4FF'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityInteractiveLowEmphasis = '#EAF4FF'; export const EdsThemeColorBackgroundUtilityInteractiveLowEmphasisHover = '#CEE6FF'; export const EdsThemeColorBackgroundUtilityInteractiveLowEmphasisActive = @@ -44,17 +46,19 @@ export const EdsThemeColorBackgroundUtilityInteractiveHighEmphasisHover = '#0A164C'; export const EdsThemeColorBackgroundUtilityInteractiveHighEmphasisActive = '#060E30'; -export const EdsThemeColorBackgroundUtilityCriticalNoEmphasis = 'transparent'; // TODO-AH: what token is this referring to? -export const EdsThemeColorBackgroundUtilityCriticalNoEmphasisHover = 'FCF2F7'; // TODO-AH: name format does not match the tier 1 -export const EdsThemeColorBackgroundUtilityCriticalNoEmphasisActive = 'F8DDEA'; -export const EdsThemeColorBackgroundUtilityCriticalLowEmphasis = 'FCF2F7'; // TODO-AH: name format does not match the tier 1 -export const EdsThemeColorBackgroundUtilityCriticalLowEmphasisHover = 'F8DDEA'; -export const EdsThemeColorBackgroundUtilityCriticalLowEmphasisActive = 'F5CCE0'; -export const EdsThemeColorBackgroundUtilityCriticalHighEmphasis = '9F1C55'; -export const EdsThemeColorBackgroundUtilityCriticalHighEmphasisHover = '760C35'; +export const EdsThemeColorBackgroundUtilityCriticalNoEmphasis = 'transparent'; +export const EdsThemeColorBackgroundUtilityCriticalNoEmphasisHover = '#FDF3F4'; +export const EdsThemeColorBackgroundUtilityCriticalNoEmphasisActive = '#FAE2E5'; +export const EdsThemeColorBackgroundUtilityCriticalLowEmphasis = '#FDF3F4'; +export const EdsThemeColorBackgroundUtilityCriticalLowEmphasisHover = '#FAE2E5'; +export const EdsThemeColorBackgroundUtilityCriticalLowEmphasisActive = + '#F6CDD1'; +export const EdsThemeColorBackgroundUtilityCriticalHighEmphasis = '#A51115'; +export const EdsThemeColorBackgroundUtilityCriticalHighEmphasisHover = + '#7D0A16'; export const EdsThemeColorBackgroundUtilityCriticalHighEmphasisActive = - '620424'; -export const EdsThemeColorBackgroundUtilityFavorableLowEmphasis = '#E6F5ED'; // TODO-AH: name format does not match the tier 1 + '#660517'; +export const EdsThemeColorBackgroundUtilityFavorableLowEmphasis = '#E6F5ED'; export const EdsThemeColorBackgroundUtilityFavorableLowEmphasisHover = '#D0EDDD'; export const EdsThemeColorBackgroundUtilityFavorableLowEmphasisActive = @@ -64,29 +68,29 @@ export const EdsThemeColorBackgroundUtilityFavorableHighEmphasisHover = '#225E43'; export const EdsThemeColorBackgroundUtilityFavorableHighEmphasisActive = '#13462F'; -export const EdsThemeColorBackgroundUtilityWarningLowEmphasis = '#FDF3D3'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityWarningLowEmphasis = '#FDF3D3'; export const EdsThemeColorBackgroundUtilityWarningLowEmphasisHover = '#FBE8AB'; export const EdsThemeColorBackgroundUtilityWarningLowEmphasisActive = '#F9DA78'; -export const EdsThemeColorBackgroundUtilityInformationLowEmphasis = '#EAF4FF'; // TODO-AH: name format does not match the tier 1 +export const EdsThemeColorBackgroundUtilityInformationLowEmphasis = '#EAF4FF'; export const EdsThemeColorBackgroundUtilityInformationLowEmphasisHover = '#CEE6FF'; export const EdsThemeColorBackgroundUtilityInformationLowEmphasisActive = '#B5DAFF'; -export const EdsThemeColorBackgroundUtilityDisabledNoEmphasis = 'transparent'; // TODO-AH: this appears to be missing in the spreadsheet +export const EdsThemeColorBackgroundUtilityDisabledNoEmphasis = 'transparent'; export const EdsThemeColorBackgroundUtilityDisabledLowEmphasis = '#EEE7E4'; export const EdsThemeColorBackgroundUtilityDisabledMediumEmphasis = '#CFC9C7'; -export const EdsThemeColorBackgroundUtilityInverseNoEmphasis = 'transparent'; // TODO-AH: this appears to be missing in the spreadsheet +export const EdsThemeColorBackgroundUtilityInverseNoEmphasis = 'transparent'; export const EdsThemeColorBackgroundUtilityInverseNoEmphasisHover = - 'rgba(255,255,255, 0.2)'; // TODO-AH: missing token to color-mix with opacity 20% + 'rgb(var(--eds-color-white) / 0.2)'; export const EdsThemeColorBackgroundUtilityInverseNoEmphasisActive = - 'rgba(255, 255, 255, 0.3)'; // TODO-AH: missing token to color-mix with opacity 20% + 'rgb(var(--eds-color-white) / 0.3)'; export const EdsThemeColorBackgroundUtilityInverseHighEmphasis = - 'rgba(255, 255, 255, 1)'; // TODO-AH: missing token to color-mix with opacity 100% -export const EdsThemeColorBackgroundUtilityInverseHighEmphasisHover = '#F9F3F1'; // TODO-AH: name format does not match the tier 1 + 'rgb(var(--eds-color-white) / 1)'; +export const EdsThemeColorBackgroundUtilityInverseHighEmphasisHover = '#F9F3F1'; export const EdsThemeColorBackgroundUtilityInverseHighEmphasisActive = '#EEE7E4'; export const EdsThemeColorBackgroundUtilityInverseDisabled = - 'rgba(255, 255, 255, 0.5)'; // TODO-AH: missing token to color-mix with opacity 50% + 'rgb(var(--eds-color-white) / 0.5)'; export const EdsThemeColorBackgroundUtilitySuccess = '#ECFFF5'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorBackgroundUtilityError = '#FFF0F4'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorBackgroundGradeCompleteDefault = '#008656'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. @@ -119,9 +123,9 @@ export const EdsThemeColorBorderUtilityNeutralHighEmphasisActive = '#0F0F0F'; export const EdsThemeColorBorderUtilityInteractive = '#0F2163'; export const EdsThemeColorBorderUtilityInteractiveHover = '#0A164C'; export const EdsThemeColorBorderUtilityInteractiveActive = '#060E30'; -export const EdsThemeColorBorderUtilityCritical = '9F1C55'; -export const EdsThemeColorBorderUtilityCriticalHover = '760C35'; -export const EdsThemeColorBorderUtilityCriticalActive = '620424'; +export const EdsThemeColorBorderUtilityCritical = '#A51115'; +export const EdsThemeColorBorderUtilityCriticalHover = '#7D0A16'; +export const EdsThemeColorBorderUtilityCriticalActive = '#660517'; export const EdsThemeColorBorderUtilityFavorable = '#367759'; export const EdsThemeColorBorderUtilityFavorableHover = '#225E43'; export const EdsThemeColorBorderUtilityFavorableActive = '#13462F'; @@ -136,9 +140,10 @@ export const EdsThemeColorBorderUtilityInformationalHover = '#254EAC'; export const EdsThemeColorBorderUtilityInformationalActive = '#1B3889'; export const EdsThemeColorBorderUtilityDisabled = '#A09C9A'; export const EdsThemeColorBorderUtilityFocus = '#3165D2'; -export const EdsThemeColorBorderUtilityInverse = 'rgba(255, 255, 255, 1)'; // TODO-AH: missing token to color-mix with opacity 100% +export const EdsThemeColorBorderUtilityInverse = + 'rgb(var(--eds-color-white) / 1)'; export const EdsThemeColorBorderUtilityInverseDisabled = - 'rgba(255, 255, 255, 0.5)'; // TODO-AH: missing token to color-mix with opacity 50% + 'rgb(var(--eds-color-white) / 0.5)'; export const EdsThemeColorBorderUtilitySuccessSubtle = '#B7E9CE'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorBorderUtilitySuccessDefault = '#8FDCB3'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorBorderUtilitySuccessStrong = '#59C88C'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. @@ -372,9 +377,9 @@ export const EdsThemeColorTextUtilityInteractiveSecondary = '#3165D2'; export const EdsThemeColorTextUtilityInteractiveSecondaryHover = '#254EAC'; export const EdsThemeColorTextUtilityInteractiveSecondaryActive = '#1B3889'; export const EdsThemeColorTextUtilityInteractiveVisited = '#8A50A7'; -export const EdsThemeColorTextUtilityCritical = '9F1C55'; -export const EdsThemeColorTextUtilityCriticalHover = '760C35'; -export const EdsThemeColorTextUtilityCriticalActive = '620424'; +export const EdsThemeColorTextUtilityCritical = '#A51115'; +export const EdsThemeColorTextUtilityCriticalHover = '#7D0A16'; +export const EdsThemeColorTextUtilityCriticalActive = '#660517'; export const EdsThemeColorTextUtilityFavorable = '#367759'; export const EdsThemeColorTextUtilityFavorableHover = '#225E43'; export const EdsThemeColorTextUtilityFavorableActive = '#13462F'; @@ -386,9 +391,10 @@ export const EdsThemeColorTextUtilityInformationalHover = '#254EAC'; export const EdsThemeColorTextUtilityInformationalActive = '#1B3889'; export const EdsThemeColorTextUtilityDisabledPrimary = '#A09C9A'; export const EdsThemeColorTextUtilityDisabledSecondary = '#CFC9C7'; -export const EdsThemeColorTextUtilityInverse = 'rgba(255, 255, 255, 1)'; // TODO-AH: what token is this referring to? +export const EdsThemeColorTextUtilityInverse = + 'rgb(var(--eds-color-white) / 1)'; export const EdsThemeColorTextUtilityInverseDisabled = - 'rgba(255, 255, 255, 0.5)'; // TODO-AH: what token is this referring to? + 'rgb(var(--eds-color-white) / 0.5)'; export const EdsThemeColorTextUtilityPlaceholder = '#6C6967'; export const EdsThemeColorTextUtilitySuccess = '#007249'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorTextUtilityError = '#BD0044'; @@ -416,6 +422,8 @@ export const EdsThemeColorToggleThumb = export const EdsThemeColorTransparentBlack0 = 'rgba(0, 0, 0, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorTransparentBlack30 = 'rgba(0, 0, 0, .3)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsThemeColorTransparentWhite0 = 'rgba(255, 255, 255, 0)'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. +export const EdsColorWhite = '255 255 255'; // Specified as a value to color-func rgb() so that it can be blended +export const EdsColorBlack = '0 0 0'; // Specified as a value to color-func rgb() so that it can be blended export const EdsColorBrandGrape100 = '#F0F0FC'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsColorBrandGrape200 = '#E0E0F9'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsColorBrandGrape300 = '#C4C1F3'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. @@ -443,23 +451,23 @@ export const EdsColorNeutral850 = '#272625'; export const EdsColorNeutral900 = '#1A1919'; export const EdsColorNeutral950 = '#0F0F0F'; export const EdsColorNeutralWhite = '#FFFFFF'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. -export const EdsColorNeutral025 = '#FFFFFF'; // TODO-AH: inserting missing value +export const EdsColorNeutral025 = '#FDF9F8'; export const EdsColorNeutral050 = '#F9F3F1'; export const EdsColorNeutralBlack = '#161B1F'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. -export const EdsColorRed100 = 'F8DDEA'; -export const EdsColorRed150 = 'F5CCE0'; -export const EdsColorRed200 = 'F1B5D2'; -export const EdsColorRed250 = 'EC9EC3'; -export const EdsColorRed350 = 'E67EB0'; -export const EdsColorRed450 = 'DB458D'; -export const EdsColorRed550 = 'C62B73'; -export const EdsColorRed650 = '9F1C55'; -export const EdsColorRed750 = '760C35'; -export const EdsColorRed800 = '620424'; -export const EdsColorRed850 = '4D0118'; -export const EdsColorRed900 = '350110'; -export const EdsColorRed950 = '23010B'; -export const EdsColorRed050 = 'FCF2F7'; +export const EdsColorRed100 = '#FAE2E5'; +export const EdsColorRed150 = '#F6CDD1'; +export const EdsColorRed200 = '#F3B7BD'; +export const EdsColorRed250 = '#EFA0A9'; +export const EdsColorRed350 = '#E9808C'; +export const EdsColorRed450 = '#D8525B'; +export const EdsColorRed550 = '#C42C2F'; +export const EdsColorRed650 = '#A51115'; +export const EdsColorRed750 = '#7D0A16'; +export const EdsColorRed800 = '#660517'; +export const EdsColorRed850 = '#4D0118'; +export const EdsColorRed900 = '#350110'; +export const EdsColorRed950 = '#23010B'; +export const EdsColorRed050 = '#FDF3F4'; export const EdsColorOrange100 = '#FFDCCA'; export const EdsColorOrange150 = '#FFC7AB'; export const EdsColorOrange200 = '#FFB38D'; @@ -530,14 +538,14 @@ export const EdsColorPurple850 = '#311A3C'; export const EdsColorPurple900 = '#25142E'; export const EdsColorPurple950 = '#190D1E'; export const EdsColorPurple050 = '#FBF5FD'; -export const EdsColorOpacity10 = '.10'; -export const EdsColorOpacity20 = '.20'; -export const EdsColorOpacity30 = '.30'; -export const EdsColorOpacity40 = '.40'; -export const EdsColorOpacity50 = '.50'; -export const EdsColorOpacity60 = '.60'; -export const EdsColorOpacity70 = '.60'; -export const EdsColorOpacity80 = '.80'; +export const EdsColorOpacity10 = '0.10'; +export const EdsColorOpacity20 = '0.20'; +export const EdsColorOpacity30 = '0.30'; +export const EdsColorOpacity40 = '0.40'; +export const EdsColorOpacity50 = '0.50'; +export const EdsColorOpacity60 = '0.60'; +export const EdsColorOpacity70 = '0.60'; +export const EdsColorOpacity80 = '0.80'; export const EdsColorOtherMint100 = '#ECFFF5'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsColorOtherMint200 = '#B7E9CE'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS. export const EdsColorOtherMint300 = '#8FDCB3'; // @deprecated This should not be used in code or design. It will be removed in a future version of EDS.