From 8e4f043c1202d054d0ff27638c4a59177ca7dd56 Mon Sep 17 00:00:00 2001 From: clairedenning Date: Mon, 16 Dec 2024 20:03:34 +0000 Subject: [PATCH] =?UTF-8?q?feat(status=20colors):=201.=20Add=20primitives.?= =?UTF-8?q?colors.xxxVibrant.=20=20=20=E2=80=A8=202.=20Add=20modes=20statu?= =?UTF-8?q?s.xxx.alt=20for=20pills=20and=20messages=20(point=20to=20primit?= =?UTF-8?q?ives.colors.xxxVibrant).=203.=20Point=20modes.color.status.xxx?= =?UTF-8?q?=20hover=20to=20alt.=204.=20Point=20modes.color.status=20xxx.de?= =?UTF-8?q?faultAlt=20to=20primitive=20xxxVibrant.=205.=20Point=20status?= =?UTF-8?q?=20component=20tokens=20to=20new=20modes.color.status.xxx.alt.?= =?UTF-8?q?=206.=20Point=20status.color.label-default=20to=20modes.color.i?= =?UTF-8?q?nteractive.monochrome.generic.default=20.=207.=20Point=20status?= =?UTF-8?q?.color.label-hover=20to=20modes.color.status.content.withHoverA?= =?UTF-8?q?lt.=208.=20Point=20status.color.xxx.border-default=20to=20new?= =?UTF-8?q?=20modes.color.status.xxx.alt.=209.=20Point=20form.color.valida?= =?UTF-8?q?tion=20border=20and=20bar=20tokens=20to=20new=20modes.color.sta?= =?UTF-8?q?tus.xxx.alt.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- data/tokens/$themes.json | 21 ++++---- data/tokens/components/container.json | 4 +- data/tokens/components/form.json | 2 +- data/tokens/components/logo.json | 2 +- data/tokens/components/progress.json | 10 ++-- data/tokens/components/status.json | 30 ++++++------ data/tokens/modes/dark.json | 9 ++-- data/tokens/modes/light.json | 69 +++++++++++++++++++-------- data/tokens/primitives.json | 45 +++++++++++++---- 9 files changed, 125 insertions(+), 67 deletions(-) diff --git a/data/tokens/$themes.json b/data/tokens/$themes.json index 42752c68..1580e694 100644 --- a/data/tokens/$themes.json +++ b/data/tokens/$themes.json @@ -23,7 +23,6 @@ "primitives.colors.brilliantGreen": "5d343447fd57716fb12fa447a89f03f732cc8a88", "primitives.colors.frozenJade": "87a7de84ab45496e6cc64ce21ab2766de414b4f8", "primitives.colors.emerald": "3ece6b999afc363b080c5b35a68880f039f13558", - "primitives.colors.emeraldLight": "9f5fb0629ff82e578756951337b2ccee960a7aef", "primitives.colors.green": "ccfabc49d84361f0c1b861032382012684d51d68", "primitives.colors.greenBright": "237ad80532906e4bd73759747e1a8208adbfe4cf", "primitives.colors.orange": "2989981124bbca5ab8af2c179292375e023ade7d", @@ -306,10 +305,6 @@ "modes.color.status.neutral.hoverAlt": "6c8ad3d9bed5656800b181fff37e6bb54fe85be8", "modes.color.status.neutral.frozen.default": "755f12aaa1435be3aa6b5222fada37205487a6bc", "modes.color.status.neutral.frozen.hover": "dddcc80d07f460a5a2e06580c0231eaf9c026f4e", - "modes.color.status.success.default": "33e57e77e60a7e032ba802856a3ca66896675570", - "modes.color.status.success.defaultAlt": "487b50bfc92b5b1575081419b84bd3aafa16c49f", - "modes.color.status.success.hover": "0705b821d04cdb73659c906462977dff185b1c0b", - "modes.color.status.success.hoverAlt": "cc20b78be580143e3c48aa7a8bc0e78299c7cc23", "modes.color.status.callout.defaultAlt": "71e207d65e4e4b2bc5278901e46fc1f32c75d514", "modes.color.status.callout.hoverAlt": "535d142dc19f9fa3ded556e4c9f48a89bc731be0", "modes.color.status.reviews.default": "9d192fd3843b352796d9b32f4a287ff2534079c3", @@ -317,7 +312,11 @@ "modes.color.status.reviews.frozen.default": "a8b5addf54a20e41a6a8390b224d756e90dbdb4d", "modes.color.status.reviews.frozen.hover": "1e0ae01e18e2348df26bea4b5cee1d8d94072de8", "modes.color.modifier.contrastLess": "7aca5a3b336cadb2696c48c5f7f69563fe0edd59", - "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568" + "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568", + "modes.color.status.positive.default": "33e57e77e60a7e032ba802856a3ca66896675570", + "modes.color.status.positive.defaultAlt": "487b50bfc92b5b1575081419b84bd3aafa16c49f", + "modes.color.status.positive.hover": "0705b821d04cdb73659c906462977dff185b1c0b", + "modes.color.status.positive.hoverAlt": "cc20b78be580143e3c48aa7a8bc0e78299c7cc23" }, "group": "Mode" }, @@ -471,10 +470,6 @@ "modes.color.status.neutral.hoverAlt": "6c8ad3d9bed5656800b181fff37e6bb54fe85be8", "modes.color.status.neutral.frozen.default": "755f12aaa1435be3aa6b5222fada37205487a6bc", "modes.color.status.neutral.frozen.hover": "dddcc80d07f460a5a2e06580c0231eaf9c026f4e", - "modes.color.status.success.default": "33e57e77e60a7e032ba802856a3ca66896675570", - "modes.color.status.success.defaultAlt": "487b50bfc92b5b1575081419b84bd3aafa16c49f", - "modes.color.status.success.hover": "0705b821d04cdb73659c906462977dff185b1c0b", - "modes.color.status.success.hoverAlt": "cc20b78be580143e3c48aa7a8bc0e78299c7cc23", "modes.color.status.callout.defaultAlt": "71e207d65e4e4b2bc5278901e46fc1f32c75d514", "modes.color.status.callout.hoverAlt": "535d142dc19f9fa3ded556e4c9f48a89bc731be0", "modes.color.status.reviews.default": "9d192fd3843b352796d9b32f4a287ff2534079c3", @@ -482,7 +477,11 @@ "modes.color.status.reviews.frozen.default": "a8b5addf54a20e41a6a8390b224d756e90dbdb4d", "modes.color.status.reviews.frozen.hover": "1e0ae01e18e2348df26bea4b5cee1d8d94072de8", "modes.color.modifier.contrastLess": "7aca5a3b336cadb2696c48c5f7f69563fe0edd59", - "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568" + "modes.color.modifier.contrastMore": "0088135ec931a1927de7ec7cc9c3b743cfdfe568", + "modes.color.status.positive.default": "33e57e77e60a7e032ba802856a3ca66896675570", + "modes.color.status.positive.defaultAlt": "487b50bfc92b5b1575081419b84bd3aafa16c49f", + "modes.color.status.positive.hover": "0705b821d04cdb73659c906462977dff185b1c0b", + "modes.color.status.positive.hoverAlt": "cc20b78be580143e3c48aa7a8bc0e78299c7cc23" }, "group": "Mode" }, diff --git a/data/tokens/components/container.json b/data/tokens/components/container.json index 5ad4b021..e912f539 100644 --- a/data/tokens/components/container.json +++ b/data/tokens/components/container.json @@ -91,7 +91,7 @@ } }, "bgFooter-activated": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.default}", "type": "color", "description": " " }, @@ -100,7 +100,7 @@ "type": "color" }, "border-activated": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.default}", "type": "color" }, "bgFooter-default": { diff --git a/data/tokens/components/form.json b/data/tokens/components/form.json index b0927b7f..999986f4 100644 --- a/data/tokens/components/form.json +++ b/data/tokens/components/form.json @@ -1363,7 +1363,7 @@ "type": "color" }, "label-success": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.default}", "type": "color" }, "label-warning": { diff --git a/data/tokens/components/logo.json b/data/tokens/components/logo.json index cc79168a..5aa3eb86 100644 --- a/data/tokens/components/logo.json +++ b/data/tokens/components/logo.json @@ -14,7 +14,7 @@ }, "trust": { "bg-default": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.default}", "type": "color", "description": "filled" }, diff --git a/data/tokens/components/progress.json b/data/tokens/components/progress.json index d4be3f22..b4487bb4 100644 --- a/data/tokens/components/progress.json +++ b/data/tokens/components/progress.json @@ -170,7 +170,7 @@ "description": "For progress ring in ai buttons" }, "fg-alt": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.default}", "type": "color" }, "fg-alt2": { @@ -232,7 +232,7 @@ "type": "color" }, "fg-complete": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.default}", "type": "color" } }, @@ -242,7 +242,7 @@ "type": "color" }, "bg-complete": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.default}", "type": "color" }, "bg-default": { @@ -276,7 +276,7 @@ "type": "color" }, "bg-complete": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.default}", "type": "color" }, "border-active-outer": { @@ -288,7 +288,7 @@ "type": "color" }, "border-success": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.default}", "type": "color" }, "label-active": { diff --git a/data/tokens/components/status.json b/data/tokens/components/status.json index d359a6f8..b5437b85 100644 --- a/data/tokens/components/status.json +++ b/data/tokens/components/status.json @@ -26,7 +26,7 @@ "description": "Decorative message icons" }, "label-default": { - "value": "{modes.color.interactive.monochrome.generic.withDefault}", + "value": "{modes.color.interactive.monochrome.generic.default}", "type": "color" }, "label-readonly": { @@ -35,7 +35,7 @@ "description": "Pill (all types, readonly, when nested in disabled parent components)" }, "label-hover": { - "value": "{modes.color.status.content.withHover}", + "value": "{modes.color.status.content.withHoverAlt}", "type": "color" }, "labelAlt-default": { @@ -85,7 +85,7 @@ }, "error": { "bg-default": { - "value": "{modes.color.status.negative.default}", + "value": "{modes.color.status.negative.alt}", "type": "color" }, "bgAlt": { @@ -102,13 +102,13 @@ "type": "color" }, "border-default": { - "value": "{modes.color.status.negative.default}", + "value": "{modes.color.status.negative.alt}", "type": "color" } }, "info": { "bg-default": { - "value": "{modes.color.status.info.default}", + "value": "{modes.color.status.info.alt}", "type": "color" }, "bgAlt": { @@ -130,13 +130,13 @@ "type": "color" }, "border-default": { - "value": "{modes.color.status.info.default}", + "value": "{modes.color.status.info.alt}", "type": "color" } }, "neutral": { "bg-default": { - "value": "{modes.color.status.neutral.default}", + "value": "{modes.color.status.neutral.alt}", "type": "color" }, "bgAlt": { @@ -153,7 +153,7 @@ "type": "color" }, "border-default": { - "value": "{modes.color.status.neutral.default}", + "value": "{modes.color.status.neutral.alt}", "type": "color" } }, @@ -177,30 +177,30 @@ }, "success": { "bg-default": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.alt}", "type": "color" }, "bgAlt": { - "value": "{modes.color.status.success.defaultAlt}", + "value": "{modes.color.status.positive.defaultAlt}", "type": "color", "description": "Subtle message bg" }, "bgAlt-hover": { - "value": "{modes.color.status.success.hoverAlt}", + "value": "{modes.color.status.positive.hoverAlt}", "type": "color" }, "bg-hover": { - "value": "{modes.color.status.success.hover}", + "value": "{modes.color.status.positive.hover}", "type": "color" }, "border-default": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.alt}", "type": "color" } }, "warning": { "bg-default": { - "value": "{modes.color.status.caution.default}", + "value": "{modes.color.status.caution.alt}", "type": "color" }, "bgAlt": { @@ -222,7 +222,7 @@ "type": "color" }, "border-default": { - "value": "{modes.color.status.caution.default}", + "value": "{modes.color.status.caution.alt}", "type": "color" } } diff --git a/data/tokens/modes/dark.json b/data/tokens/modes/dark.json index 19b21760..79ccddb1 100644 --- a/data/tokens/modes/dark.json +++ b/data/tokens/modes/dark.json @@ -1273,7 +1273,8 @@ "neutral": { "default": { "value": "{primitives.colors.stormBright}", - "type": "color" + "type": "color", + "description": "{primitives.colors.stormBright}" }, "defaultAlt": { "value": "{modes.color.modifier.contrastLess}", @@ -1351,7 +1352,7 @@ } } }, - "success": { + "positive": { "default": { "value": "{primitives.colors.greenBright}", "type": "color" @@ -1372,7 +1373,7 @@ "description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.default}", "type": "color", "$extensions": { "studio.tokens": { @@ -1387,7 +1388,7 @@ "description": "used on pill hover states" }, "hoverAlt": { - "value": "{modes.color.status.success.defaultAlt}", + "value": "{modes.color.status.positive.defaultAlt}", "type": "color", "$extensions": { "studio.tokens": { diff --git a/data/tokens/modes/light.json b/data/tokens/modes/light.json index 123390f3..8e510004 100644 --- a/data/tokens/modes/light.json +++ b/data/tokens/modes/light.json @@ -72,7 +72,7 @@ "default": { "value": "{primitives.colors.emerald}", "type": "color", - "description": "This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg." + "description": "This is the color to replace in white label products. Ensure luminousity of custom color = 46.8 (see hsluv.org). AAA against FFFFFF bg. " }, "frozen": { "value": "{primitives.colors.frozenJade}", @@ -1103,13 +1103,20 @@ "generic": { "default": { "value": "{primitives.colors.teal}", - "type": "color" + "type": "color", + "description": "used in progress bar " } }, "caution": { + "alt": { + "value": "{primitives.colors.orangeVibrant}", + "type": "color", + "description": "For pills and messages. Not accessible with white TEXT." + }, "default": { "value": "{primitives.colors.orange}", - "type": "color" + "type": "color", + "description": "Used in form validation, progress bar, tab\n" }, "defaultAlt": { "value": "{modes.color.modifier.contrastLess}", @@ -1120,14 +1127,14 @@ "type": "mix", "value": "0.1", "space": "lch", - "color": "{primitives.colors.orangeBright}" + "color": "{primitives.colors.orangeVibrant}" } } }, "description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.caution.default}", + "value": "{modes.color.status.caution.alt}", "type": "color", "$extensions": { "studio.tokens": { @@ -1206,9 +1213,15 @@ } }, "info": { + "alt": { + "value": "{primitives.colors.blueVibrant}", + "type": "color", + "description": "For pills and messages. Not accessible with white TEXT." + }, "default": { "value": "{primitives.colors.blue}", - "type": "color" + "type": "color", + "description": "used in progress bar" }, "defaultAlt": { "value": "{modes.color.modifier.contrastLess}", @@ -1219,14 +1232,14 @@ "type": "mix", "value": "0.1", "space": "lch", - "color": "{primitives.colors.blueBright} " + "color": "{primitives.colors.blueVibrant} " } } }, "description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.info.default}", + "value": "{modes.color.status.info.alt}", "type": "color", "$extensions": { "studio.tokens": { @@ -1264,9 +1277,15 @@ } }, "negative": { + "alt": { + "value": "{primitives.colors.redVibrant}", + "type": "color", + "description": "For pills and messages. Not accessible with white TEXT." + }, "default": { "value": "{primitives.colors.red}", - "type": "color" + "type": "color", + "description": "used in badge, form validation, progress bar, tab" }, "defaultAlt": { "value": "{modes.color.modifier.contrastLess}", @@ -1277,14 +1296,14 @@ "type": "mix", "value": "0.1", "space": "lch", - "color": "{primitives.colors.redBright}" + "color": "{primitives.colors.redVibrant}" } } }, "description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.negative.default}", + "value": "{modes.color.status.negative.alt}", "type": "color", "$extensions": { "studio.tokens": { @@ -1296,7 +1315,7 @@ } } }, - "description": "used on pill hover states" + "description": "used on pill hover states\n\n" }, "hoverAlt": { "value": "{modes.color.status.negative.defaultAlt}", @@ -1319,6 +1338,10 @@ } }, "neutral": { + "alt": { + "value": "{primitives.colors.stormVibrant}", + "type": "color" + }, "default": { "value": "{primitives.colors.storm}", "type": "color" @@ -1332,14 +1355,14 @@ "type": "mix", "value": "0.1", "space": "lch", - "color": "{primitives.colors.stormBright}" + "color": "{primitives.colors.stormVibrant}" } } }, "description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.neutral.default}", + "value": "{modes.color.status.neutral.alt}", "type": "color", "$extensions": { "studio.tokens": { @@ -1389,10 +1412,16 @@ } } }, - "success": { + "positive": { + "alt": { + "value": "{primitives.colors.greenVibrant}", + "type": "color", + "description": "For pills and messages. Not accessible with white TEXT." + }, "default": { "value": "{primitives.colors.green}", - "type": "color" + "type": "color", + "description": "used in container interactive (eg in tile select), form validation, progress bar" }, "defaultAlt": { "value": "{modes.color.modifier.contrastLess}", @@ -1403,14 +1432,14 @@ "type": "mix", "value": "0.1", "space": "lch", - "color": "{primitives.colors.greenBright}" + "color": "{primitives.colors.greenVibrant} " } } }, "description": "Subtle message bg" }, "hover": { - "value": "{modes.color.status.success.default}", + "value": "{modes.color.status.positive.alt}", "type": "color", "$extensions": { "studio.tokens": { @@ -1422,10 +1451,10 @@ } } }, - "description": "used on pill hover states" + "description": "used on pill hover states " }, "hoverAlt": { - "value": "{modes.color.status.success.defaultAlt}", + "value": "{modes.color.status.positive.defaultAlt}", "type": "color", "$extensions": { "studio.tokens": { diff --git a/data/tokens/primitives.json b/data/tokens/primitives.json index 3e9c23f6..7d55ef3c 100644 --- a/data/tokens/primitives.json +++ b/data/tokens/primitives.json @@ -16,26 +16,35 @@ "type": "color", "description": "Base information status color for on dark surface information messages, toasts and pills. Luminosity 56.2." }, + "blueVibrant": { + "value": "#0094fa", + "type": "color", + "description": "Base info status color on light surfaces. Eg messages and pills. Luminosity 59.8. Must be used with black labels." + }, "brilliantGreen": { "value": "#00D639", "type": "color", "description": "Sage Logo color Primary buttons on dark backgrounds" }, - "frozenJade": { - "value": "#008046", - "type": "color", - "description": "Legacy green used on old product theme" - }, "emerald": { "value": "#00811F", "type": "color", "description": "Primary buttons on light backgrounds. Was #008047 Jade. Luminosity 46.8." }, "emeraldLight": { - "value": "#009024", + "value": "#d6ff00", + "type": "color" + }, + "emeraldVibrant": { + "value": "#00a72b", "type": "color", "description": "AAA text on 000000 bgs. This is deliberately NOT named bright. Luminosity 51.9." }, + "frozenJade": { + "value": "#008046", + "type": "color", + "description": "Legacy green used on old product theme" + }, "green": { "value": "#008047", "type": "color", @@ -46,6 +55,11 @@ "type": "color", "description": "Base success status color for on dark surface messages, toasts and pills. Luminosity 56.2. (Was #009C26, now derivative of Jade)" }, + "greenVibrant": { + "value": "#00a65d", + "type": "color", + "description": "Base success status color on light surfaces. Eg messages and pills. Luminosity 59.8. Must be used with black labels.\n\nWas #00821e, then Jade #008047. Luminosity 46.8." + }, "orange": { "value": "#BA4E00", "type": "color", @@ -56,6 +70,11 @@ "type": "color", "description": "Base warning status color for on dark surface messages, toasts and pills. Warning text in inputs on dark surfaces. Luminosity 56.2." }, + "orangeVibrant": { + "value": "#EE6700", + "type": "color", + "description": "Base warning status color on light surfaces. Eg messages and pills. Luminosity 59.8. Must be used with black labels." + }, "gold": { "value": "#FFB500", "type": "color", @@ -81,6 +100,11 @@ "type": "color", "description": "Base neutral status color for on dark surface messages, toasts and pills. Luminosity 56.2." }, + "stormVibrant": { + "value": "#909090", + "type": "color", + "description": "Base neutral status color on light surfaces. Eg messages and pills. Luminosity 59.8. Must be used with black labels." + }, "red": { "value": "#CB374B", "type": "color", @@ -92,9 +116,14 @@ "description": "Base error status color for on dark surface messages, toasts and pills. Used in feedback components, on dark bg (meets SHAPE accessibility reqs). Luminosity 56.2." }, "redLight": { - "value": "#E13E54", + "value": "#90f", + "type": "color", + "description": "Base error status color for on light surface messages, toasts and pills. Error text in inputs on dark surfaces. Used in Buttons on dark bg (meets text accessibility reqs). Luminosity 51.9. #E13E54" + }, + "redVibrant": { + "value": "#ff5066", "type": "color", - "description": "Base error status color for on light surface messages, toasts and pills. Error text in inputs on dark surfaces. Used in Buttons on dark bg (meets text accessibility reqs). Luminosity 51.9." + "description": "Base negative status color on light surfaces. Eg messages and pills. Luminosity 59.8. Must be used with black labels." }, "teal": { "value": "#007c7b",