From e9ae0cee58b6c3d38c353641c566fd609377a5fa Mon Sep 17 00:00:00 2001 From: Andrew Holloway Date: Wed, 15 Nov 2023 19:16:15 -0600 Subject: [PATCH] refactor(tokens): rename tokens to be import/export compatible --- .../tier-1-definitions/colors.json | 106 +-- .../tier-2-usage/colors-background.json | 60 +- .../tier-2-usage/colors-border.json | 73 +- .../tier-2-usage/colors-icon.json | 72 +- .../tier-2-usage/colors-text.json | 49 +- .../tier-2-usage/colors-transparent.json | 9 +- .../{body.json => body-colors.json} | 6 +- ...dcrumb.json => breadcrumb-typography.json} | 0 .../tier-3-component/buttons-box.json | 15 + .../tier-3-component/buttons-colors.json | 674 ++++++++++++++++++ .../tier-3-component/buttons-typography.json | 26 + .../tier-3-component/buttons.json | 565 --------------- .../{checkbox.json => checkbox-colors.json} | 3 +- .../{data-bar.json => dataBar-colors.json} | 6 +- .../{focus-ring.json => focusRing-box.json} | 10 - .../tier-3-component/focusRing-colors.json | 18 + .../tier-3-component/forms-colors.json | 34 + .../tier-3-component/forms-form.json | 16 + .../tier-3-component/forms-typography.json | 16 + src/design-tokens/tier-3-component/forms.json | 49 -- .../{link.json => link-colors.json} | 58 +- .../tier-3-component/link-typography.json | 22 + .../{modals.json => modals-colors.json} | 3 +- ...gress-bar.json => progressBar-colors.json} | 0 .../{radio.json => radio-colors.json} | 3 +- .../{slider.json => slider-size.json} | 0 .../{tab.json => tab-typography.json} | 0 .../{tag.json => tag-typography.json} | 0 ...ghlight.json => textHighlight-colors.json} | 6 +- .../{toggle.json => toggle-colors.json} | 18 +- src/tokens-dist/css/variables.css | 2 +- src/tokens-dist/ts/colors.ts | 2 +- 32 files changed, 1116 insertions(+), 805 deletions(-) rename src/design-tokens/tier-3-component/{body.json => body-colors.json} (55%) rename src/design-tokens/tier-3-component/{breadcrumb.json => breadcrumb-typography.json} (100%) create mode 100644 src/design-tokens/tier-3-component/buttons-box.json create mode 100644 src/design-tokens/tier-3-component/buttons-colors.json create mode 100644 src/design-tokens/tier-3-component/buttons-typography.json delete mode 100644 src/design-tokens/tier-3-component/buttons.json rename src/design-tokens/tier-3-component/{checkbox.json => checkbox-colors.json} (69%) rename src/design-tokens/tier-3-component/{data-bar.json => dataBar-colors.json} (52%) rename src/design-tokens/tier-3-component/{focus-ring.json => focusRing-box.json} (57%) create mode 100644 src/design-tokens/tier-3-component/focusRing-colors.json create mode 100644 src/design-tokens/tier-3-component/forms-colors.json create mode 100644 src/design-tokens/tier-3-component/forms-form.json create mode 100644 src/design-tokens/tier-3-component/forms-typography.json delete mode 100644 src/design-tokens/tier-3-component/forms.json rename src/design-tokens/tier-3-component/{link.json => link-colors.json} (76%) create mode 100644 src/design-tokens/tier-3-component/link-typography.json rename src/design-tokens/tier-3-component/{modals.json => modals-colors.json} (73%) rename src/design-tokens/tier-3-component/{progress-bar.json => progressBar-colors.json} (100%) rename src/design-tokens/tier-3-component/{radio.json => radio-colors.json} (69%) rename src/design-tokens/tier-3-component/{slider.json => slider-size.json} (100%) rename src/design-tokens/tier-3-component/{tab.json => tab-typography.json} (100%) rename src/design-tokens/tier-3-component/{tag.json => tag-typography.json} (100%) rename src/design-tokens/tier-3-component/{text-highlight.json => textHighlight-colors.json} (53%) rename src/design-tokens/tier-3-component/{toggle.json => toggle-colors.json} (67%) diff --git a/src/design-tokens/tier-1-definitions/colors.json b/src/design-tokens/tier-1-definitions/colors.json index 1899fa143a..291ff0e82d 100644 --- a/src/design-tokens/tier-1-definitions/colors.json +++ b/src/design-tokens/tier-1-definitions/colors.json @@ -3,77 +3,81 @@ "color": { "brand": { "grape": { - "100": { "value": "#F0F0FC" }, - "200": { "value": "#E0E0F9" }, - "300": { "value": "#C4C1F3" }, - "400": { "value": "#A6A3EE" }, - "500": { "value": "#8984E8" }, - "600": { "value": "#6B65E2" }, - "700": { "value": "#5751D2" }, - "800": { "value": "#3E42B1" } + "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" } } }, "neutral": { "white": { - "value": "#FFFFFF" + "value": "#FFFFFF", + "group": "color" }, - "100": { "value": "#F4F6F8" }, - "200": { "value": "#E7E8EA" }, - "300": { "value": "#C0C4C8" }, - "400": { "value": "#999EA3" }, - "500": { "value": "#878C90" }, - "600": { "value": "#5D6369" }, - "700": { "value": "#383C43" }, - "800": { "value": "#21272D" }, - "black": { "value": "#161B1F" } + "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" } }, "other": { "mint": { - "100": { "value": "#ECFFF5" }, - "200": { "value": "#B7E9CE" }, - "300": { "value": "#8FDCB3" }, - "400": { "value": "#59C88C" }, - "500": { "value": "#00A56A" }, - "600": { "value": "#008656" }, - "700": { "value": "#007249" }, - "800": { "value": "#005939" } + "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" } }, "yellow": { - "100": { "value": "#FDF1D0" }, - "200": { "value": "#FFEBB3" }, - "300": { "value": "#FFDD80" }, - "400": { "value": "#F7BE2D" }, - "500": { "value": "#D18400" }, - "600": { "value": "#BF7300" }, - "700": { "value": "#9E5B03" }, - "800": { "value": "#854C03" } + "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" } }, "lemon": { - "value": "#F5FF8F" + "value": "#F5FF8F", + "group": "color", + "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release." }, "eraser": { "value": "#F3DCE2", + "group": "color", "comment": "@deprecated This token has been deprecated and will be removed in a future EDS release." }, "orange": { - "100": { "value": "#FFF1E9" }, - "200": { "value": "#FFCBA5" }, - "300": { "value": "#FFAF76" }, - "400": { "value": "#F6924A" }, - "500": { "value": "#E06B00" }, - "600": { "value": "#C64600" }, - "700": { "value": "#AC3400" }, - "800": { "value": "#842800" } + "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" } }, "ruby": { - "100": { "value": "#FFF0F4" }, - "200": { "value": "#FFCBD7" }, - "300": { "value": "#FB90B0" }, - "400": { "value": "#F76C96" }, - "500": { "value": "#F1497B" }, - "600": { "value": "#D41E52" }, - "700": { "value": "#BD0044" }, - "800": { "value": "#8F0134" } + "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" } } } } diff --git a/src/design-tokens/tier-2-usage/colors-background.json b/src/design-tokens/tier-2-usage/colors-background.json index d113f658f8..6800d496c6 100644 --- a/src/design-tokens/tier-2-usage/colors-background.json +++ b/src/design-tokens/tier-2-usage/colors-background.json @@ -6,86 +6,106 @@ "neutral": { "default": { "@": { - "value": "{eds.color.neutral.white}" + "value": "{eds.color.neutral.white}", + "group": "color" }, "hover": { - "value": "{eds.color.neutral.100}" + "value": "{eds.color.neutral.100}", + "group": "color" } }, "subtle": { "@": { - "value": "{eds.color.neutral.100}" + "value": "{eds.color.neutral.100}", + "group": "color" }, "hover": { - "value": "{eds.color.neutral.200}" + "value": "{eds.color.neutral.200}", + "group": "color" } }, "medium": { "@": { - "value": "{eds.color.neutral.200}" + "value": "{eds.color.neutral.200}", + "group": "color" }, "hover": { - "value": "{eds.color.neutral.300}" + "value": "{eds.color.neutral.300}", + "group": "color" } } }, "brand": { "primary": { "default": { - "value": "{eds.color.brand.grape.100}" + "value": "{eds.color.brand.grape.100}", + "group": "color" }, "subtle": { - "value": "{eds.color.brand.grape.100}" + "value": "{eds.color.brand.grape.100}", + "group": "color" }, "strong": { "@": { - "value": "{eds.color.brand.grape.600}" + "value": "{eds.color.brand.grape.600}", + "group": "color" }, "hover": { - "value": "{eds.color.brand.grape.800}" + "value": "{eds.color.brand.grape.800}", + "group": "color" } } } }, "utility": { "success": { - "value": "{eds.color.other.mint.100}" + "value": "{eds.color.other.mint.100}", + "group": "color" }, "warning": { - "value": "{eds.color.other.orange.100}" + "value": "{eds.color.other.orange.100}", + "group": "color" }, "error": { - "value": "{eds.color.other.ruby.100}" + "value": "{eds.color.other.ruby.100}", + "group": "color" } }, "grade": { "complete": { "default": { - "value": "{eds.color.other.mint.600}" + "value": "{eds.color.other.mint.600}", + "group": "color" }, "subtle": { - "value": "{eds.color.other.mint.100}" + "value": "{eds.color.other.mint.100}", + "group": "color" } }, "revise": { "default": { - "value": "{eds.color.other.yellow.400}" + "value": "{eds.color.other.yellow.400}", + "group": "color" }, "subtle": { - "value": "{eds.color.other.yellow.100}" + "value": "{eds.color.other.yellow.100}", + "group": "color" } }, "stop": { "default": { - "value": "{eds.color.other.ruby.600}" + "value": "{eds.color.other.ruby.600}", + "group": "color" }, "subtle": { - "value": "{eds.color.other.ruby.100}" + "value": "{eds.color.other.ruby.100}", + "group": "color" } } }, "disabled": { - "value": "{eds.color.neutral.300}" + "value": "{eds.color.neutral.300}", + "group": "color" } } } diff --git a/src/design-tokens/tier-2-usage/colors-border.json b/src/design-tokens/tier-2-usage/colors-border.json index 91f9d42448..fd7bb30f7a 100644 --- a/src/design-tokens/tier-2-usage/colors-border.json +++ b/src/design-tokens/tier-2-usage/colors-border.json @@ -6,102 +6,127 @@ "neutral": { "subtle": { "@": { - "value": "{eds.color.neutral.200}" + "value": "{eds.color.neutral.200}", + "group": "color" }, "hover": { - "value": "{eds.color.neutral.300}" + "value": "{eds.color.neutral.300}", + "group": "color" } }, "default": { "@": { - "value": "{eds.color.neutral.300}" + "value": "{eds.color.neutral.300}", + "group": "color" }, "hover": { - "value": "{eds.color.neutral.400}" + "value": "{eds.color.neutral.400}", + "group": "color" } }, "strong": { "@": { - "value": "{eds.color.neutral.400}" + "value": "{eds.color.neutral.400}", + "group": "color" }, "hover": { - "value": "{eds.color.neutral.500}" + "value": "{eds.color.neutral.500}", + "group": "color" } } }, "brand": { "primary": { "subtle": { - "value": "{eds.color.brand.grape.200}" + "value": "{eds.color.brand.grape.200}", + "group": "color" }, "default": { - "value": "var(--eds-theme-color-border-brand-primary)" + "value": "var(--eds-theme-color-border-brand-primary)", + "group": "color" }, "@": { "value": "{eds.color.brand.grape.300}", + "group": "color", "comment": "@deprecated This token is deprecated. Please use eds-theme-color-border-brand-primary-default instead" }, "strong": { - "value": "{eds.color.brand.grape.400}" + "value": "{eds.color.brand.grape.400}", + "group": "color" } } }, "utility": { "success": { "subtle": { - "value": "{eds.color.other.mint.200}" + "value": "{eds.color.other.mint.200}", + "group": "color" }, "default": { - "value": "{eds.color.other.mint.300}" + "value": "{eds.color.other.mint.300}", + "group": "color" }, "strong": { - "value": "{eds.color.other.mint.400}" + "value": "{eds.color.other.mint.400}", + "group": "color" } }, "warning": { "subtle": { - "value": "{eds.color.other.orange.200}" + "value": "{eds.color.other.orange.200}", + "group": "color" }, "default": { - "value": "{eds.color.other.orange.300}" + "value": "{eds.color.other.orange.300}", + "group": "color" }, "strong": { - "value": "{eds.color.other.orange.400}" + "value": "{eds.color.other.orange.400}", + "group": "color" } }, "error": { "subtle": { - "value": "{eds.color.other.ruby.200}" + "value": "{eds.color.other.ruby.200}", + "group": "color" }, "default": { - "value": "{eds.color.other.ruby.300}" + "value": "{eds.color.other.ruby.300}", + "group": "color" }, "strong": { - "value": "{eds.color.other.ruby.400}" + "value": "{eds.color.other.ruby.400}", + "group": "color" } } }, "grade": { "complete": { - "value": "{eds.color.other.mint.300}" + "value": "{eds.color.other.mint.300}", + "group": "color" }, "revise": { "subtle": { - "value": "{eds.color.other.yellow.200}" + "value": "{eds.color.other.yellow.200}", + "group": "color" }, "default": { - "value": "{eds.color.other.yellow.300}" + "value": "{eds.color.other.yellow.300}", + "group": "color" }, "strong": { - "value": "{eds.color.other.yellow.400}" + "value": "{eds.color.other.yellow.400}", + "group": "color" } }, "stop": { - "value": "{eds.color.other.ruby.300}" + "value": "{eds.color.other.ruby.300}", + "group": "color" } }, "disabled": { - "value": "{eds.color.neutral.300}" + "value": "{eds.color.neutral.300}", + "group": "color" } } } diff --git a/src/design-tokens/tier-2-usage/colors-icon.json b/src/design-tokens/tier-2-usage/colors-icon.json index 6a74592291..232a6bb838 100644 --- a/src/design-tokens/tier-2-usage/colors-icon.json +++ b/src/design-tokens/tier-2-usage/colors-icon.json @@ -6,106 +6,130 @@ "neutral": { "default": { "@": { - "value": "{eds.color.neutral.600}" + "value": "{eds.color.neutral.600}", + "group": "color" }, "inverse": { - "value": "{eds.color.neutral.white}" + "value": "{eds.color.neutral.white}", + "group": "color" }, "hover": { - "value": "{eds.color.neutral.700}" + "value": "{eds.color.neutral.700}", + "group": "color" } }, "strong": { "@": { - "value": "{eds.color.neutral.700}" + "value": "{eds.color.neutral.700}", + "group": "color" }, "hover": { - "value": "{eds.color.neutral.800}" + "value": "{eds.color.neutral.800}", + "group": "color" } }, "subtle": { "@": { - "value": "{eds.color.neutral.500}" + "value": "{eds.color.neutral.500}", + "group": "color" }, "hover": { - "value": "{eds.color.neutral.600}" + "value": "{eds.color.neutral.600}", + "group": "color" } } }, "link": { "default": { "@": { - "value": "{eds.color.brand.grape.600}" + "value": "{eds.color.brand.grape.600}", + "group": "color" }, "hover": { - "value": "{eds.color.brand.grape.700}" + "value": "{eds.color.brand.grape.700}", + "group": "color" } } }, "brand": { "primary": { "@": { - "value": "{eds.color.brand.grape.500}" + "value": "{eds.color.brand.grape.500}", + "group": "color" }, "hover": { - "value": "{eds.color.brand.grape.600}" + "value": "{eds.color.brand.grape.600}", + "group": "color" } } }, "utility": { "success": { "@": { - "value": "{eds.color.other.mint.500}" + "value": "{eds.color.other.mint.500}", + "group": "color" }, "hover": { - "value": "{eds.color.other.mint.600}" + "value": "{eds.color.other.mint.600}", + "group": "color" } }, "warning": { "@": { - "value": "{eds.color.other.orange.500}" + "value": "{eds.color.other.orange.500}", + "group": "color" }, "hover": { - "value": "{eds.color.other.orange.600}" + "value": "{eds.color.other.orange.600}", + "group": "color" } }, "error": { "@": { - "value": "{eds.color.other.ruby.500}" + "value": "{eds.color.other.ruby.500}", + "group": "color" }, "hover": { - "value": "{eds.color.other.ruby.600}" + "value": "{eds.color.other.ruby.600}", + "group": "color" } } }, "grade": { "complete": { "@": { - "value": "{eds.color.other.mint.500}" + "value": "{eds.color.other.mint.500}", + "group": "color" }, "hover": { - "value": "{eds.color.other.mint.500}" + "value": "{eds.color.other.mint.500}", + "group": "color" } }, "revise": { "@": { - "value": "{eds.color.neutral.800}" + "value": "{eds.color.neutral.800}", + "group": "color" }, "hover": { - "value": "{eds.color.neutral.black}" + "value": "{eds.color.neutral.black}", + "group": "color" } }, "stop": { "@": { - "value": "{eds.color.other.ruby.500}" + "value": "{eds.color.other.ruby.500}", + "group": "color" }, "hover": { - "value": "{eds.color.other.ruby.600}" + "value": "{eds.color.other.ruby.600}", + "group": "color" } } }, "disabled": { - "value": "{eds.color.neutral.300}" + "value": "{eds.color.neutral.300}", + "group": "color" } } } diff --git a/src/design-tokens/tier-2-usage/colors-text.json b/src/design-tokens/tier-2-usage/colors-text.json index 0b734aaa16..da7ae9c5c0 100644 --- a/src/design-tokens/tier-2-usage/colors-text.json +++ b/src/design-tokens/tier-2-usage/colors-text.json @@ -6,38 +6,63 @@ "neutral": { "default": { "@": { - "value": "{eds.color.neutral.700}" + "value": "{eds.color.neutral.700}", + "group": "color" }, "inverse": { - "value": "{eds.color.neutral.white}" + "value": "{eds.color.neutral.white}", + "group": "color" } }, "strong": { - "value": "{eds.color.neutral.800}" + "value": "{eds.color.neutral.800}", + "group": "color" }, "subtle": { - "value": "{eds.color.neutral.600}" + "value": "{eds.color.neutral.600}", + "group": "color" } }, "utility": { - "success": { "value": "{eds.color.other.mint.700}" }, - "warning": { "value": "{eds.color.other.orange.700}" }, - "error": { "value": "{eds.color.other.ruby.700}" } + "success": { + "value": "{eds.color.other.mint.700}", + "group": "color" + }, + "warning": { + "value": "{eds.color.other.orange.700}", + "group": "color" + }, + "error": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + } }, "grade": { - "complete": { "value": "{eds.color.other.mint.700}" }, - "revise": { "value": "{eds.color.neutral.800}" }, - "stop": { "value": "{eds.color.other.ruby.700}" } + "complete": { + "value": "{eds.color.other.mint.700}", + "group": "color" + }, + "revise": { + "value": "{eds.color.neutral.800}", + "group": "color" + }, + "stop": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + } }, "disabled": { - "value": "{eds.color.neutral.300}" + "value": "{eds.color.neutral.300}", + "group": "color" }, "brand": { "default": { - "value": "var(--eds-theme-color-text-brand-primary)" + "value": "var(--eds-theme-color-text-brand-primary)", + "group": "color" }, "primary": { "value": "{eds.color.brand.grape.700}", + "group": "color", "comment": "@deprecated This token is deprecated. Please use eds-theme-color-text-brand-default instead." } } diff --git a/src/design-tokens/tier-2-usage/colors-transparent.json b/src/design-tokens/tier-2-usage/colors-transparent.json index 3f2ce1eb5f..d3b4f32f2f 100644 --- a/src/design-tokens/tier-2-usage/colors-transparent.json +++ b/src/design-tokens/tier-2-usage/colors-transparent.json @@ -5,15 +5,18 @@ "transparent": { "black": { "0": { - "value": "rgba(0, 0, 0, 0)" + "value": "rgba(0, 0, 0, 0)", + "group": "color" }, "30": { - "value": "rgba(0, 0, 0, .3)" + "value": "rgba(0, 0, 0, .3)", + "group": "color" } }, "white": { "0": { - "value": "rgba(255, 255, 255, 0)" + "value": "rgba(255, 255, 255, 0)", + "group": "color" } } } diff --git a/src/design-tokens/tier-3-component/body.json b/src/design-tokens/tier-3-component/body-colors.json similarity index 55% rename from src/design-tokens/tier-3-component/body.json rename to src/design-tokens/tier-3-component/body-colors.json index 08ddfe63c4..22af7d63ed 100644 --- a/src/design-tokens/tier-3-component/body.json +++ b/src/design-tokens/tier-3-component/body-colors.json @@ -5,10 +5,12 @@ "body": { "background": { "@": { - "value": "{eds.color.neutral.100}" + "value": "{eds.color.neutral.100}", + "group": "color" }, "inverted": { - "value": "{eds.color.neutral.700}" + "value": "{eds.color.neutral.700}", + "group": "color" } } } diff --git a/src/design-tokens/tier-3-component/breadcrumb.json b/src/design-tokens/tier-3-component/breadcrumb-typography.json similarity index 100% rename from src/design-tokens/tier-3-component/breadcrumb.json rename to src/design-tokens/tier-3-component/breadcrumb-typography.json diff --git a/src/design-tokens/tier-3-component/buttons-box.json b/src/design-tokens/tier-3-component/buttons-box.json new file mode 100644 index 0000000000..48f0e91714 --- /dev/null +++ b/src/design-tokens/tier-3-component/buttons-box.json @@ -0,0 +1,15 @@ +{ + "eds": { + "theme": { + "box": { + "button": { + "border": { + "radius": { + "value": "{eds.border.radius.md}" + } + } + } + } + } + } +} diff --git a/src/design-tokens/tier-3-component/buttons-colors.json b/src/design-tokens/tier-3-component/buttons-colors.json new file mode 100644 index 0000000000..38078049a4 --- /dev/null +++ b/src/design-tokens/tier-3-component/buttons-colors.json @@ -0,0 +1,674 @@ +{ + "eds": { + "theme": { + "color": { + "button": { + "primary": { + "brand": { + "background": { + "@": { + "value": "{eds.color.brand.grape.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.brand.grape.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.brand.grape.800}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.color.brand.grape.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.brand.grape.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.brand.grape.800}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + }, + "error": { + "background": { + "@": { + "value": "{eds.color.other.ruby.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.ruby.800}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.color.other.ruby.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.ruby.800}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + } + }, + "secondary": { + "brand": { + "background": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.brand.grape.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.brand.grape.800}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.color.brand.grape.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.brand.grape.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.brand.grape.800}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.brand.grape.700}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + }, + "icon": { + "@": { + "value": "{eds.color.brand.grape.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + }, + "neutral": { + "background": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.200}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.700}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.color.neutral.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.600}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.700}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.neutral.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.600}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + }, + "icon": { + "@": { + "value": "{eds.color.neutral.400}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.400}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + }, + "success": { + "background": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.mint.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.mint.800}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.color.other.mint.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.mint.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.mint.800}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.other.mint.700}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + }, + "icon": { + "@": { + "value": "{eds.color.other.mint.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + }, + "warning": { + "background": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.orange.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.orange.800}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.color.other.orange.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.orange.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.orange.800}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.other.orange.700}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + }, + "icon": { + "@": { + "value": "{eds.color.other.orange.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + }, + "error": { + "background": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.ruby.800}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.color.other.ruby.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.ruby.800}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + }, + "icon": { + "@": { + "value": "{eds.color.other.ruby.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + } + }, + "icon": { + "brand": { + "@": { + "value": "{eds.color.brand.grape.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.brand.grape.600}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "background": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.brand.grape.200}", + "group": "color" + }, + "active": { + "value": "{eds.color.brand.grape.700}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.brand.grape.200}", + "group": "color" + }, + "active": { + "value": "{eds.color.brand.grape.700}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.brand.grape.700}", + "group": "color" + }, + "hover": { + "value": "{eds.color.brand.grape.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + }, + "neutral": { + "@": { + "value": "{eds.color.neutral.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.600}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "background": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.200}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.600}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.200}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.600}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.neutral.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.600}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + }, + "success": { + "@": { + "value": "{eds.color.other.mint.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.mint.600}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "background": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.mint.200}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.mint.700}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.mint.200}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.mint.700}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.other.mint.700}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.mint.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + }, + "warning": { + "@": { + "value": "{eds.color.other.orange.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.orange.600}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "background": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.orange.100}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.orange.700}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.orange.100}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.orange.700}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.other.orange.700}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.orange.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + }, + "error": { + "@": { + "value": "{eds.color.other.ruby.600}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.ruby.600}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "background": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.ruby.200}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + } + }, + "border": { + "@": { + "value": "{eds.theme.color.transparent.black.0}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.ruby.200}", + "group": "color" + }, + "active": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + } + }, + "text": { + "@": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + }, + "hover": { + "value": "{eds.color.other.ruby.700}", + "group": "color" + }, + "active": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + } + } + } + } + } + } +} diff --git a/src/design-tokens/tier-3-component/buttons-typography.json b/src/design-tokens/tier-3-component/buttons-typography.json new file mode 100644 index 0000000000..83ef5f03db --- /dev/null +++ b/src/design-tokens/tier-3-component/buttons-typography.json @@ -0,0 +1,26 @@ +{ + "eds": { + "theme": { + "typography": { + "button": { + "lg": { + "value": "var(--eds-typography-preset-006)" + }, + "md": { + "value": "var(--eds-typography-preset-006)" + }, + "label": { + "@": { + "value": "var(--eds-typography-preset-006)", + "comment": "@deprecated This is deprecated and missing from figma" + }, + "sm": { + "value": "var(--eds-typography-preset-008-bold)", + "comment": "@deprecated This is deprecated and missing from figma" + } + } + } + } + } + } +} diff --git a/src/design-tokens/tier-3-component/buttons.json b/src/design-tokens/tier-3-component/buttons.json deleted file mode 100644 index 71f9be2b03..0000000000 --- a/src/design-tokens/tier-3-component/buttons.json +++ /dev/null @@ -1,565 +0,0 @@ -{ - "eds": { - "theme": { - "typography": { - "button": { - "lg": { - "value": "var(--eds-typography-preset-006)" - }, - "md": { - "value": "var(--eds-typography-preset-006)" - }, - "label": { - "@": { - "value": "var(--eds-typography-preset-006)", - "comment": "@deprecated This is deprecated and missing from figma" - }, - "sm": { - "value": "var(--eds-typography-preset-008-bold)", - "comment": "@deprecated This is deprecated and missing from figma" - } - } - } - }, - "color": { - "button": { - "primary": { - "brand": { - "background": { - "@": { - "value": "{eds.color.brand.grape.600}" - }, - "hover": { - "value": "{eds.color.brand.grape.700}" - }, - "active": { - "value": "{eds.color.brand.grape.800}" - } - }, - "border": { - "@": { - "value": "{eds.color.brand.grape.600}" - }, - "hover": { - "value": "{eds.color.brand.grape.700}" - }, - "active": { - "value": "{eds.color.brand.grape.800}" - } - }, - "text": { - "@": { - "value": "{eds.color.neutral.white}" - }, - "hover": { - "value": "{eds.color.neutral.white}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - }, - "error": { - "background": { - "@": { - "value": "{eds.color.other.ruby.600}" - }, - "hover": { - "value": "{eds.color.other.ruby.700}" - }, - "active": { - "value": "{eds.color.other.ruby.800}" - } - }, - "border": { - "@": { - "value": "{eds.color.other.ruby.600}" - }, - "hover": { - "value": "{eds.color.other.ruby.700}" - }, - "active": { - "value": "{eds.color.other.ruby.800}" - } - }, - "text": { - "@": { - "value": "{eds.color.neutral.white}" - }, - "hover": { - "value": "{eds.color.neutral.white}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - } - }, - "secondary": { - "brand": { - "background": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.brand.grape.700}" - }, - "active": { - "value": "{eds.color.brand.grape.800}" - } - }, - "border": { - "@": { - "value": "{eds.color.brand.grape.600}" - }, - "hover": { - "value": "{eds.color.brand.grape.700}" - }, - "active": { - "value": "{eds.color.brand.grape.800}" - } - }, - "text": { - "@": { - "value": "{eds.color.brand.grape.700}" - }, - "hover": { - "value": "{eds.color.neutral.white}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - }, - "icon": { - "@": { - "value": "{eds.color.brand.grape.600}" - }, - "hover": { - "value": "{eds.color.neutral.white}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - }, - "neutral": { - "background": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.neutral.200}" - }, - "active": { - "value": "{eds.color.neutral.700}" - } - }, - "border": { - "@": { - "value": "{eds.color.neutral.600}" - }, - "hover": { - "value": "{eds.color.neutral.600}" - }, - "active": { - "value": "{eds.color.neutral.700}" - } - }, - "text": { - "@": { - "value": "{eds.color.neutral.600}" - }, - "hover": { - "value": "{eds.color.neutral.600}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - }, - "icon": { - "@": { - "value": "{eds.color.neutral.400}" - }, - "hover": { - "value": "{eds.color.neutral.400}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - }, - "success": { - "background": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.other.mint.700}" - }, - "active": { - "value": "{eds.color.other.mint.800}" - } - }, - "border": { - "@": { - "value": "{eds.color.other.mint.600}" - }, - "hover": { - "value": "{eds.color.other.mint.700}" - }, - "active": { - "value": "{eds.color.other.mint.800}" - } - }, - "text": { - "@": { - "value": "{eds.color.other.mint.700}" - }, - "hover": { - "value": "{eds.color.neutral.white}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - }, - "icon": { - "@": { - "value": "{eds.color.other.mint.600}" - }, - "hover": { - "value": "{eds.color.neutral.white}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - }, - "warning": { - "background": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.other.orange.700}" - }, - "active": { - "value": "{eds.color.other.orange.800}" - } - }, - "border": { - "@": { - "value": "{eds.color.other.orange.600}" - }, - "hover": { - "value": "{eds.color.other.orange.700}" - }, - "active": { - "value": "{eds.color.other.orange.800}" - } - }, - "text": { - "@": { - "value": "{eds.color.other.orange.700}" - }, - "hover": { - "value": "{eds.color.neutral.white}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - }, - "icon": { - "@": { - "value": "{eds.color.other.orange.600}" - }, - "hover": { - "value": "{eds.color.neutral.white}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - }, - "error": { - "background": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.other.ruby.700}" - }, - "active": { - "value": "{eds.color.other.ruby.800}" - } - }, - "border": { - "@": { - "value": "{eds.color.other.ruby.600}" - }, - "hover": { - "value": "{eds.color.other.ruby.700}" - }, - "active": { - "value": "{eds.color.other.ruby.800}" - } - }, - "text": { - "@": { - "value": "{eds.color.other.ruby.700}" - }, - "hover": { - "value": "{eds.color.neutral.white}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - }, - "icon": { - "@": { - "value": "{eds.color.other.ruby.600}" - }, - "hover": { - "value": "{eds.color.neutral.white}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - } - }, - "icon": { - "brand": { - "@": { - "value": "{eds.color.brand.grape.600}" - }, - "hover": { - "value": "{eds.color.brand.grape.600}" - }, - "active": { - "value": "{eds.color.neutral.white}" - }, - "background": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.brand.grape.200}" - }, - "active": { - "value": "{eds.color.brand.grape.700}" - } - }, - "border": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.brand.grape.200}" - }, - "active": { - "value": "{eds.color.brand.grape.700}" - } - }, - "text": { - "@": { - "value": "{eds.color.brand.grape.700}" - }, - "hover": { - "value": "{eds.color.brand.grape.700}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - }, - "neutral": { - "@": { - "value": "{eds.color.neutral.600}" - }, - "hover": { - "value": "{eds.color.neutral.600}" - }, - "active": { - "value": "{eds.color.neutral.white}" - }, - "background": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.neutral.200}" - }, - "active": { - "value": "{eds.color.neutral.600}" - } - }, - "border": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.neutral.200}" - }, - "active": { - "value": "{eds.color.neutral.600}" - } - }, - "text": { - "@": { - "value": "{eds.color.neutral.600}" - }, - "hover": { - "value": "{eds.color.neutral.600}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - }, - "success": { - "@": { - "value": "{eds.color.other.mint.600}" - }, - "hover": { - "value": "{eds.color.other.mint.600}" - }, - "active": { - "value": "{eds.color.neutral.white}" - }, - "background": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.other.mint.200}" - }, - "active": { - "value": "{eds.color.other.mint.700}" - } - }, - "border": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.other.mint.200}" - }, - "active": { - "value": "{eds.color.other.mint.700}" - } - }, - "text": { - "@": { - "value": "{eds.color.other.mint.700}" - }, - "hover": { - "value": "{eds.color.other.mint.700}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - }, - "warning": { - "@": { - "value": "{eds.color.other.orange.600}" - }, - "hover": { - "value": "{eds.color.other.orange.600}" - }, - "active": { - "value": "{eds.color.neutral.white}" - }, - "background": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.other.orange.100}" - }, - "active": { - "value": "{eds.color.other.orange.700}" - } - }, - "border": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.other.orange.100}" - }, - "active": { - "value": "{eds.color.other.orange.700}" - } - }, - "text": { - "@": { - "value": "{eds.color.other.orange.700}" - }, - "hover": { - "value": "{eds.color.other.orange.700}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - }, - "error": { - "@": { - "value": "{eds.color.other.ruby.600}" - }, - "hover": { - "value": "{eds.color.other.ruby.600}" - }, - "active": { - "value": "{eds.color.neutral.white}" - }, - "background": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.other.ruby.200}" - }, - "active": { - "value": "{eds.color.other.ruby.700}" - } - }, - "border": { - "@": { - "value": "{eds.theme.color.transparent.black.0}" - }, - "hover": { - "value": "{eds.color.other.ruby.200}" - }, - "active": { - "value": "{eds.color.other.ruby.700}" - } - }, - "text": { - "@": { - "value": "{eds.color.other.ruby.700}" - }, - "hover": { - "value": "{eds.color.other.ruby.700}" - }, - "active": { - "value": "{eds.color.neutral.white}" - } - } - } - } - } - }, - "box": { - "button": { - "border": { - "radius": { - "value": "{eds.border.radius.md}" - } - } - } - } - } - } -} diff --git a/src/design-tokens/tier-3-component/checkbox.json b/src/design-tokens/tier-3-component/checkbox-colors.json similarity index 69% rename from src/design-tokens/tier-3-component/checkbox.json rename to src/design-tokens/tier-3-component/checkbox-colors.json index 1da363be68..33dee4ddad 100644 --- a/src/design-tokens/tier-3-component/checkbox.json +++ b/src/design-tokens/tier-3-component/checkbox-colors.json @@ -6,7 +6,8 @@ "brand": { "background": { "@": { - "value": "{eds.color.brand.grape.500}" + "value": "{eds.color.brand.grape.500}", + "group": "colors" } } } diff --git a/src/design-tokens/tier-3-component/data-bar.json b/src/design-tokens/tier-3-component/dataBar-colors.json similarity index 52% rename from src/design-tokens/tier-3-component/data-bar.json rename to src/design-tokens/tier-3-component/dataBar-colors.json index b021bac868..93e71a7e11 100644 --- a/src/design-tokens/tier-3-component/data-bar.json +++ b/src/design-tokens/tier-3-component/dataBar-colors.json @@ -4,10 +4,12 @@ "color": { "data-bar": { "background": { - "value": "{eds.color.neutral.100}" + "value": "{eds.color.neutral.100}", + "group": "color" }, "border": { - "value": "{eds.color.neutral.300}" + "value": "{eds.color.neutral.300}", + "group": "color" } } } diff --git a/src/design-tokens/tier-3-component/focus-ring.json b/src/design-tokens/tier-3-component/focusRing-box.json similarity index 57% rename from src/design-tokens/tier-3-component/focus-ring.json rename to src/design-tokens/tier-3-component/focusRing-box.json index bc69dd2eaf..db017656d2 100644 --- a/src/design-tokens/tier-3-component/focus-ring.json +++ b/src/design-tokens/tier-3-component/focusRing-box.json @@ -1,16 +1,6 @@ { "eds": { "theme": { - "color": { - "focus-ring": { - "@": { - "value": "{eds.color.brand.grape.600}" - }, - "inverted": { - "value": "{eds.color.neutral.white}" - } - } - }, "box": { "focus-ring": { "outline": { diff --git a/src/design-tokens/tier-3-component/focusRing-colors.json b/src/design-tokens/tier-3-component/focusRing-colors.json new file mode 100644 index 0000000000..a9780275e1 --- /dev/null +++ b/src/design-tokens/tier-3-component/focusRing-colors.json @@ -0,0 +1,18 @@ +{ + "eds": { + "theme": { + "color": { + "focus-ring": { + "@": { + "value": "{eds.color.brand.grape.600}", + "group": "color" + }, + "inverted": { + "value": "{eds.color.neutral.white}", + "group": "color" + } + } + } + } + } +} diff --git a/src/design-tokens/tier-3-component/forms-colors.json b/src/design-tokens/tier-3-component/forms-colors.json new file mode 100644 index 0000000000..4fe2bcb661 --- /dev/null +++ b/src/design-tokens/tier-3-component/forms-colors.json @@ -0,0 +1,34 @@ +{ + "eds": { + "theme": { + "color": { + "form": { + "border": { + "@": { + "value": "{eds.color.neutral.500}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.800}", + "group": "color" + } + }, + "background": { + "@": { + "value": "{eds.color.neutral.white}", + "group": "color" + }, + "hover": { + "value": "{eds.color.neutral.100}", + "group": "color" + } + }, + "label": { + "value": "{eds.color.neutral.700}", + "group": "color" + } + } + } + } + } +} diff --git a/src/design-tokens/tier-3-component/forms-form.json b/src/design-tokens/tier-3-component/forms-form.json new file mode 100644 index 0000000000..d19faf88be --- /dev/null +++ b/src/design-tokens/tier-3-component/forms-form.json @@ -0,0 +1,16 @@ +{ + "eds": { + "theme": { + "form": { + "border": { + "width": { + "value": "{eds.border.width.sm}" + }, + "radius": { + "value": "{eds.border.radius.md}" + } + } + } + } + } +} diff --git a/src/design-tokens/tier-3-component/forms-typography.json b/src/design-tokens/tier-3-component/forms-typography.json new file mode 100644 index 0000000000..3cbd72bf54 --- /dev/null +++ b/src/design-tokens/tier-3-component/forms-typography.json @@ -0,0 +1,16 @@ +{ + "eds": { + "theme": { + "typography": { + "form": { + "label": { + "value": "var(--eds-typography-preset-006)" + }, + "input": { + "value": "var(--eds-typography-preset-005-light)" + } + } + } + } + } +} diff --git a/src/design-tokens/tier-3-component/forms.json b/src/design-tokens/tier-3-component/forms.json deleted file mode 100644 index b7c790aadb..0000000000 --- a/src/design-tokens/tier-3-component/forms.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "eds": { - "theme": { - "typography": { - "form": { - "label": { - "value": "var(--eds-typography-preset-006)" - }, - "input": { - "value": "var(--eds-typography-preset-005-light)" - } - } - }, - "color": { - "form": { - "border": { - "@": { - "value": "{eds.color.neutral.500}" - }, - "hover": { - "value": "{eds.color.neutral.800}" - } - }, - "background": { - "@": { - "value": "{eds.color.neutral.white}" - }, - "hover": { - "value": "{eds.color.neutral.100}" - } - }, - "label": { - "value": "{eds.color.neutral.700}" - } - } - }, - "form": { - "border": { - "width": { - "value": "{eds.border.width.sm}" - }, - "radius": { - "value": "{eds.border.radius.md}" - } - } - } - } - } -} diff --git a/src/design-tokens/tier-3-component/link.json b/src/design-tokens/tier-3-component/link-colors.json similarity index 76% rename from src/design-tokens/tier-3-component/link.json rename to src/design-tokens/tier-3-component/link-colors.json index 368cb2f5c6..7d05bc14db 100644 --- a/src/design-tokens/tier-3-component/link.json +++ b/src/design-tokens/tier-3-component/link-colors.json @@ -6,78 +6,76 @@ "brand": { "text": { "@": { - "value": "var(--eds-theme-color-text-neutral-strong)" + "value": "var(--eds-theme-color-text-neutral-strong)", + "group": "color" }, "hover": { - "value": "var(--eds-theme-color-text-brand-default)" + "value": "var(--eds-theme-color-text-brand-default)", + "group": "color" }, "focus": { - "value": "var(--eds-theme-color-text-neutral-default-inverse)" + "value": "var(--eds-theme-color-text-neutral-default-inverse)", + "group": "color" } }, "text-decoration": { "@": { - "value": "var(--eds-theme-color-text-brand-default)" + "value": "var(--eds-theme-color-text-brand-default)", + "group": "color" }, "hover": { - "value": "var(--eds-theme-color-text-brand-default)" + "value": "var(--eds-theme-color-text-brand-default)", + "group": "color" }, "focus": { - "value": "var(--eds-theme-color-text-neutral-default-inverse)" + "value": "var(--eds-theme-color-text-neutral-default-inverse)", + "group": "color" } }, "background": { "focus": { - "value": "var(--eds-theme-color-text-brand-default)" + "value": "var(--eds-theme-color-text-brand-default)", + "group": "color" } } }, "neutral": { "text": { "@": { - "value": "var(--eds-theme-color-text-neutral-strong)" + "value": "var(--eds-theme-color-text-neutral-strong)", + "group": "color" }, "hover": { - "value": "var(--eds-theme-color-text-brand-default)" + "value": "var(--eds-theme-color-text-brand-default)", + "group": "color" }, "focus": { - "value": "var(--eds-theme-color-text-neutral-default-inverse)" + "value": "var(--eds-theme-color-text-neutral-default-inverse)", + "group": "color" } }, "text-decoration": { "@": { - "value": "var(--eds-theme-color-text-neutral-default)" + "value": "var(--eds-theme-color-text-neutral-default)", + "group": "color" }, "hover": { - "value": "var(--eds-theme-color-text-brand-default)" + "value": "var(--eds-theme-color-text-brand-default)", + "group": "color" }, "focus": { - "value": "var(--eds-theme-color-text-neutral-default-inverse)" + "value": "var(--eds-theme-color-text-neutral-default-inverse)", + "group": "color" } }, "background": { "focus": { - "value": "var(--eds-theme-color-text-neutral-default)" + "value": "var(--eds-theme-color-text-neutral-default)", + "group": "color" } } } } - }, - "typography": { - "link": { - "lg": { - "value": "var(--eds-typography-preset-004)" - }, - "md": { - "value": "var(--eds-typography-preset-005)" - }, - "sm": { - "value": "var(--eds-typography-preset-007)" - }, - "xs": { - "value": "var(--eds-typography-preset-009)" - } - } } } } diff --git a/src/design-tokens/tier-3-component/link-typography.json b/src/design-tokens/tier-3-component/link-typography.json new file mode 100644 index 0000000000..7f8a56f489 --- /dev/null +++ b/src/design-tokens/tier-3-component/link-typography.json @@ -0,0 +1,22 @@ +{ + "eds": { + "theme": { + "typography": { + "link": { + "lg": { + "value": "var(--eds-typography-preset-004)" + }, + "md": { + "value": "var(--eds-typography-preset-005)" + }, + "sm": { + "value": "var(--eds-typography-preset-007)" + }, + "xs": { + "value": "var(--eds-typography-preset-009)" + } + } + } + } + } +} diff --git a/src/design-tokens/tier-3-component/modals.json b/src/design-tokens/tier-3-component/modals-colors.json similarity index 73% rename from src/design-tokens/tier-3-component/modals.json rename to src/design-tokens/tier-3-component/modals-colors.json index 33805c5d5e..96bc242b1c 100644 --- a/src/design-tokens/tier-3-component/modals.json +++ b/src/design-tokens/tier-3-component/modals-colors.json @@ -7,7 +7,8 @@ "header": { "background": { "@": { - "value": "{eds.color.brand.grape.500}" + "value": "{eds.color.brand.grape.500}", + "group": "color" } } } diff --git a/src/design-tokens/tier-3-component/progress-bar.json b/src/design-tokens/tier-3-component/progressBar-colors.json similarity index 100% rename from src/design-tokens/tier-3-component/progress-bar.json rename to src/design-tokens/tier-3-component/progressBar-colors.json diff --git a/src/design-tokens/tier-3-component/radio.json b/src/design-tokens/tier-3-component/radio-colors.json similarity index 69% rename from src/design-tokens/tier-3-component/radio.json rename to src/design-tokens/tier-3-component/radio-colors.json index 5f908bedf0..1bed943a93 100644 --- a/src/design-tokens/tier-3-component/radio.json +++ b/src/design-tokens/tier-3-component/radio-colors.json @@ -6,7 +6,8 @@ "brand": { "background": { "@": { - "value": "{eds.color.brand.grape.500}" + "value": "{eds.color.brand.grape.500}", + "group": "color" } } } diff --git a/src/design-tokens/tier-3-component/slider.json b/src/design-tokens/tier-3-component/slider-size.json similarity index 100% rename from src/design-tokens/tier-3-component/slider.json rename to src/design-tokens/tier-3-component/slider-size.json diff --git a/src/design-tokens/tier-3-component/tab.json b/src/design-tokens/tier-3-component/tab-typography.json similarity index 100% rename from src/design-tokens/tier-3-component/tab.json rename to src/design-tokens/tier-3-component/tab-typography.json diff --git a/src/design-tokens/tier-3-component/tag.json b/src/design-tokens/tier-3-component/tag-typography.json similarity index 100% rename from src/design-tokens/tier-3-component/tag.json rename to src/design-tokens/tier-3-component/tag-typography.json diff --git a/src/design-tokens/tier-3-component/text-highlight.json b/src/design-tokens/tier-3-component/textHighlight-colors.json similarity index 53% rename from src/design-tokens/tier-3-component/text-highlight.json rename to src/design-tokens/tier-3-component/textHighlight-colors.json index a8196c8c45..ae1280968f 100644 --- a/src/design-tokens/tier-3-component/text-highlight.json +++ b/src/design-tokens/tier-3-component/textHighlight-colors.json @@ -4,10 +4,12 @@ "color": { "text-highlight": { "foreground": { - "value": "{eds.color.neutral.800}" + "value": "{eds.color.neutral.800}", + "group": "color" }, "background": { - "value": "{eds.color.other.lemon}" + "value": "{eds.color.other.lemon}", + "group": "color" } } } diff --git a/src/design-tokens/tier-3-component/toggle.json b/src/design-tokens/tier-3-component/toggle-colors.json similarity index 67% rename from src/design-tokens/tier-3-component/toggle.json rename to src/design-tokens/tier-3-component/toggle-colors.json index 7d6bcbfcbf..c421f4c4bb 100644 --- a/src/design-tokens/tier-3-component/toggle.json +++ b/src/design-tokens/tier-3-component/toggle-colors.json @@ -5,29 +5,35 @@ "toggle": { "on": { "background": { - "value": "var(--eds-theme-color-background-brand-primary-strong)" + "value": "var(--eds-theme-color-background-brand-primary-strong)", + "group": "color" } }, "off": { "background": { - "value": "var(--eds-theme-color-icon-neutral-subtle)" + "value": "var(--eds-theme-color-icon-neutral-subtle)", + "group": "color" } }, "disabled": { "background": { - "value": "var(--eds-theme-color-icon-disabled)" + "value": "var(--eds-theme-color-icon-disabled)", + "group": "color" }, "text": { - "value": "var(--eds-theme-color-text-disabled)" + "value": "var(--eds-theme-color-text-disabled)", + "group": "color" } }, "primary": { "text": { - "value": "var(--eds-theme-color-text-neutral-default)" + "value": "var(--eds-theme-color-text-neutral-default)", + "group": "color" } }, "thumb": { - "value": "var(--eds-theme-color-text-neutral-default-inverse)" + "value": "var(--eds-theme-color-text-neutral-default-inverse)", + "group": "color" } } } diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css index 0e76a0bbcb..b5d8fb16d1 100644 --- a/src/tokens-dist/css/variables.css +++ b/src/tokens-dist/css/variables.css @@ -225,7 +225,7 @@ --eds-color-other-orange-200: #FFCBA5; --eds-color-other-orange-100: #FFF1E9; --eds-color-other-eraser: #F3DCE2; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */ - --eds-color-other-lemon: #F5FF8F; + --eds-color-other-lemon: #F5FF8F; /* @deprecated This token has been deprecated and will be removed in a future EDS release. */ --eds-color-other-yellow-800: #854C03; --eds-color-other-yellow-700: #9E5B03; --eds-color-other-yellow-600: #BF7300; diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts index bb63b9c05f..a92ba67078 100644 --- a/src/tokens-dist/ts/colors.ts +++ b/src/tokens-dist/ts/colors.ts @@ -32,7 +32,7 @@ export const EdsColorOtherYellow500 = '#D18400'; export const EdsColorOtherYellow600 = '#BF7300'; export const EdsColorOtherYellow700 = '#9E5B03'; export const EdsColorOtherYellow800 = '#854C03'; -export const EdsColorOtherLemon = '#F5FF8F'; +export const EdsColorOtherLemon = '#F5FF8F'; // @deprecated This token has been deprecated and will be removed in a future EDS release. export const EdsColorOtherEraser = '#F3DCE2'; // @deprecated This token has been deprecated and will be removed in a future EDS release. export const EdsColorOtherOrange100 = '#FFF1E9'; export const EdsColorOtherOrange200 = '#FFCBA5';