diff --git a/data/tokens/$themes.json b/data/tokens/$themes.json index 95578f25..c912ace1 100644 --- a/data/tokens/$themes.json +++ b/data/tokens/$themes.json @@ -4391,12 +4391,6 @@ "tab.color.bg-hover": "5a423db0a74e578a55e9190169ed5706b8a008f4", "tab.color.border-enabled": "ab9fa748bb5194e0fc3e265ea50d015bb014fd2d", "tab.color.border-hover": "c5affbe1329789237c379a860684f3034b0933e7", - "tab.color.icon-enabled": "6d4c0c7c30992888d09c794ab70a3c3ce7b9baef", - "tab.color.icon-hover": "f6d224fe972b8d484006cd2b251b48e9c6f6144b", - "tab.color.label-active": "19d3a9036e6e2b1271ff32b81fa50191cbffa142", - "tab.color.icon-active": "a882447b658aa26b2694f1b6ebf26eaeb98d6e43", - "tab.color.label-enabled": "691226bda8fc13bcbfae1e7e409dd8aacfc9e44f", - "tab.color.label-hover": "f8c367d3dca0e458c0a4937e5d4a65b01d58ba26", "tab.color.navigation.bg-default": "e3facc8423ab67d4d5beeae1562fece5da868d02", "tab.color.validation.border-warning": "cf2e74be918f9b6ed3c2e2a2bd205c64cae48778", "tab.color.validation.border-error": "f794f4e18be75e8014786527f9dc50e4f9301a29", diff --git a/data/tokens/components/button.json b/data/tokens/components/button.json index aec4af41..9649bb2f 100644 --- a/data/tokens/components/button.json +++ b/data/tokens/components/button.json @@ -710,44 +710,6 @@ "type": "color" } }, - "toggle": { - "bg-activeDisabled": { - "value": "{modes.color.interactive.inactive.default}", - "type": "color" - }, - "label-activeDisabled": { - "value": "{modes.color.interactive.inactive.contentAlt}", - "type": "color" - }, - "bg-active": { - "value": "{modes.color.interactive.monochrome.generic.active}", - "type": "color" - }, - "bg-hover": { - "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", - "type": "color" - }, - "border-enabled": { - "value": "{modes.color.interactive.monochrome.generic.default}", - "type": "color" - }, - "label-active": { - "value": "{modes.color.interactive.monochrome.generic.withActive}", - "type": "color" - }, - "label-disabled": { - "value": "{modes.color.interactive.inactive.content}", - "type": "color" - }, - "label-enabled": { - "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", - "type": "color" - }, - "label-hover": { - "value": "{modes.color.interactive.monochrome.generic.withHover}", - "type": "color" - } - }, "secondary": { "bg-active": { "value": "{modes.color.interactive.monochrome.generic.activeAlt}", @@ -845,6 +807,10 @@ "value": "{modes.color.interactive.monochrome.generic.withActiveAlt}", "type": "color" }, + "label-active-copy": { + "value": "{modes.color.interactive.monochrome.frozen.withActive}", + "type": "color" + }, "label-disabled": { "value": "{modes.color.interactive.inactive.content}", "type": "color" @@ -857,6 +823,44 @@ "value": "{modes.color.interactive.monochrome.generic.withHover}", "type": "color" } + }, + "toggle": { + "bg-activeDisabled": { + "value": "{modes.color.interactive.inactive.default}", + "type": "color" + }, + "label-activeDisabled": { + "value": "{modes.color.interactive.inactive.contentAlt}", + "type": "color" + }, + "bg-active": { + "value": "{modes.color.interactive.monochrome.generic.active}", + "type": "color" + }, + "bg-hover": { + "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", + "type": "color" + }, + "border-enabled": { + "value": "{modes.color.interactive.monochrome.generic.default}", + "type": "color" + }, + "label-active": { + "value": "{modes.color.interactive.monochrome.generic.withActive}", + "type": "color" + }, + "label-disabled": { + "value": "{modes.color.interactive.inactive.content}", + "type": "color" + }, + "label-enabled": { + "value": "{modes.color.interactive.monochrome.generic.defaultAlt}", + "type": "color" + }, + "label-hover": { + "value": "{modes.color.interactive.monochrome.generic.withHover}", + "type": "color" + } } }, "video": { diff --git a/data/tokens/components/tab.json b/data/tokens/components/tab.json index b6fc9617..d96cbc8b 100644 --- a/data/tokens/components/tab.json +++ b/data/tokens/components/tab.json @@ -92,6 +92,11 @@ } }, "color": { + "bg-enabled": { + "value": "{modes.color.none}", + "type": "color", + "description": "For anchor nav, not tab." + }, "bg-hover": { "value": "{modes.color.interactive.monochrome.generic.hoverAlt}", "type": "color", diff --git a/data/tokens/context/frozenproduct.json b/data/tokens/context/frozenproduct.json index 593c1914..e829d0c9 100644 --- a/data/tokens/context/frozenproduct.json +++ b/data/tokens/context/frozenproduct.json @@ -2,6 +2,20 @@ "button": { "color": { "typical": { + "primary": { + "bg-active": { + "value": "{modes.color.interactive.primary.frozen.active}", + "type": "color" + }, + "bg-enabled": { + "value": "{modes.color.interactive.primary.frozen.default}", + "type": "color" + }, + "bg-hover": { + "value": "{modes.color.interactive.primary.frozen.hover}", + "type": "color" + } + }, "secondary": { "bg-active": { "value": "{modes.color.interactive.primary.frozen.active}", @@ -26,6 +40,36 @@ "label-enabled": { "value": "{modes.color.interactive.primary.frozen.default}", "type": "color" + }, + "label-hover": { + "value": "{modes.color.interactive.monochrome.frozen.withHoverAlt}", + "type": "color" + }, + "label-active": { + "value": "{modes.color.interactive.monochrome.frozen.withActive}", + "type": "color" + } + }, + "subtle": { + "bg-active": { + "value": "{modes.color.interactive.monochrome.frozen.activeAlt}", + "type": "color" + }, + "bg-hover": { + "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", + "type": "color" + }, + "label-active": { + "value": "{modes.color.interactive.monochrome.frozen.active}", + "type": "color" + }, + "label-enabled": { + "value": "{modes.color.interactive.monochrome.frozen.default}", + "type": "color" + }, + "label-hover": { + "value": "{modes.color.interactive.monochrome.frozen.withHover}", + "type": "color" } }, "tertiary": { @@ -42,7 +86,7 @@ "type": "color" }, "border-enabled": { - "value": "{modes.color.interactive.primary.frozen.default}", + "value": "{modes.color.none}", "type": "color" }, "border-hover": { @@ -56,41 +100,19 @@ "bg-enabled": { "value": "{modes.color.none}", "type": "color" - } - }, - "primary": { - "bg-active": { - "value": "{modes.color.interactive.primary.frozen.active}", - "type": "color" }, - "bg-enabled": { - "value": "{modes.color.interactive.primary.frozen.default}", + "label-hover": { + "value": "{modes.color.interactive.monochrome.frozen.withHoverAlt}", "type": "color" }, - "bg-hover": { - "value": "{modes.color.interactive.primary.frozen.hover}", + "label-active": { + "value": "{modes.color.interactive.monochrome.frozen.withActive}", "type": "color" } }, - "subtle": { - "bg-active": { - "value": "{modes.color.interactive.monochrome.frozen.activeAlt}", - "type": "color" - }, - "bg-hover": { - "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", - "type": "color" - }, - "label-active": { - "value": "{modes.color.interactive.monochrome.frozen.active}", - "type": "color" - }, - "label-enabled": { - "value": "{modes.color.interactive.monochrome.frozen.default}", - "type": "color" - }, + "toggle": { "label-hover": { - "value": "{modes.color.interactive.monochrome.frozen.withHover}", + "value": "{modes.color.interactive.monochrome.generic.withHover}", "type": "color" } } @@ -216,6 +238,20 @@ "value": "{modes.color.interactive.dataEntry.frozen.withDefault}", "type": "color" } + }, + "switch": { + "bg-active": { + "value": "{modes.color.interactive.monochrome.frozen.default}", + "type": "color" + }, + "border-enabled": { + "value": "{modes.color.interactive.dataEntry.frozen.withDefault}", + "type": "color" + }, + "fg-enabled": { + "value": "{modes.color.interactive.dataEntry.frozen.withDefault}", + "type": "color" + } } } }, @@ -283,20 +319,6 @@ } } }, - "tab": { - "radius": { - "M": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "Tab horizontal - top corners. Tab vertical - left corners." - }, - "L": { - "value": "{global.radius.interactive.S}", - "type": "borderRadius", - "description": "Tab horizontal - top corners. Tab vertical - left corners." - } - } - }, "nav": { "radius": { "menumodal": { @@ -325,15 +347,30 @@ "type": "color" }, "label-hover": { - "value": "{modes.color.interactive.monochrome.frozen.withHover}", + "value": "{modes.color.interactive.monochrome.generic.default}", "type": "color" }, "label-enabled": { - "value": "{modes.color.interactive.monochrome.frozen.default}", + "value": "{modes.color.interactive.monochrome.generic.default}", "type": "color" } } }, + "progress": { + "color": { + "loader": { + "bg-default": { + "value": "{modes.color.interactive.progress.frozen.bg}", + "type": "color" + }, + "fg-default": { + "value": "{modes.color.interactive.primary.frozen.default}", + "type": "color", + "description": "used for loader standard loader spinner" + } + } + } + }, "status": { "color": { "rating": { @@ -363,6 +400,43 @@ } } }, + "tab": { + "radius": { + "M": { + "value": "{global.radius.interactive.S}", + "type": "borderRadius", + "description": "Tab horizontal - top corners. Tab vertical - left corners." + }, + "L": { + "value": "{global.radius.interactive.S}", + "type": "borderRadius", + "description": "Tab horizontal - top corners. Tab vertical - left corners." + } + }, + "color": { + "bg-enabled": { + "value": "{modes.color.interactive.monochrome.generic.withDefault}", + "type": "color" + }, + "bg-hover": { + "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", + "type": "color", + "description": "For anchor nav, not tab." + }, + "border-active": { + "value": "{modes.color.interactive.primary.frozen.default}", + "type": "color" + }, + "border-enabled": { + "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", + "type": "color" + }, + "border-hover": { + "value": "{modes.color.interactive.monochrome.frozen.hoverAlt}", + "type": "color" + } + } + }, "table": { "color": { "row": { diff --git a/data/tokens/modes/dark.json b/data/tokens/modes/dark.json index 08e2e7f8..2a0a3084 100644 --- a/data/tokens/modes/dark.json +++ b/data/tokens/modes/dark.json @@ -95,7 +95,7 @@ "type": "mix", "value": "0.04", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -109,7 +109,7 @@ "type": "mix", "value": "0.08", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -123,7 +123,7 @@ "type": "mix", "value": "0.117", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -137,7 +137,7 @@ "type": "mix", "value": "0.16", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -151,7 +151,7 @@ "type": "mix", "value": "0.24", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -165,7 +165,7 @@ "type": "mix", "value": "0.32", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -179,10 +179,15 @@ "type": "mix", "value": "0.40", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } + }, + "extreme": { + "value": "{primitives.colors.white}", + "type": "color", + "description": "Consumed within generic monochrome, progress" } }, "content": { @@ -273,7 +278,7 @@ "type": "mix", "value": "0.08", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } }, @@ -288,7 +293,7 @@ "type": "mix", "value": "0.16", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } }, @@ -303,7 +308,7 @@ "type": "mix", "value": "0.32", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -317,7 +322,7 @@ "type": "mix", "value": "0.50", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -371,7 +376,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.active}", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } }, @@ -390,7 +395,7 @@ "type": "mix", "value": "0.12", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } }, @@ -405,7 +410,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.hover} ", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -433,18 +438,18 @@ "type": "mix", "value": "{modes.color.modifiers.button.hoverAlt} ", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } }, "description": "for links in datatables" }, "withActive": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "withDefault": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.fg.nought}", "type": "color" } }, @@ -455,7 +460,7 @@ "description": "Input backgrounds." }, "withActive": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.content.extreme}", "type": "color", "description": "checkbox tick icon or radio handle" }, @@ -464,7 +469,7 @@ "type": "color" }, "withHover": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.content.extreme}", "type": "color", "description": "text for draggable area on file input" }, @@ -477,7 +482,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.hoverAlt} ", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } }, @@ -517,7 +522,7 @@ "type": "color" }, "content": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.content.extreme}", "type": "color" }, "withDefaultAlt": { @@ -529,7 +534,7 @@ "type": "mix", "value": "0.4", "space": "lch", - "color": "{modes.color.modifier.contrastLess}" + "color": "{modes.color.modifier.contrastLess} " } } } @@ -546,7 +551,7 @@ "description": "disabled buttons on dark" }, "mask": { - "value": "{primitives.colors.white}", + "value": "{modes.color.modifier.contrastMore}", "type": "color", "description": "full screen takeover token for modal dimmer" }, @@ -561,7 +566,7 @@ "description": "Disabled text inside buttons" }, "contentAlt": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "icon": { @@ -573,6 +578,23 @@ "value": "{modes.color.generic.content.moderate}", "type": "color", "description": "Readonly icon inside form inputs. " + }, + "frozen": { + "defaultAlt": { + "value": "{primitives.colors.navy}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.9", + "space": "lch", + "color": "{modes.color.modifier.contrastLess} " + } + } + }, + "description": "Disabled input and button backgrounds, button borders and input backgrounds." + } } }, "monochrome": { @@ -620,9 +642,17 @@ } } }, + "withActive": { + "value": "{modes.color.generic.fg.nought}", + "type": "color" + }, "withHover": { "value": "{modes.color.interactive.monochrome.frozen.active}", "type": "color" + }, + "withHoverAlt": { + "value": "{modes.color.generic.fg.nought}", + "type": "color" } }, "generic": { @@ -671,7 +701,7 @@ "description": "subtle and toggle button text" }, "hoverAlt": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.bg.extreme}", "type": "color", "$extensions": { "studio.tokens": { @@ -699,7 +729,7 @@ "description": "subtle table header hover" }, "withActive": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "withActiveAlt": { @@ -707,7 +737,7 @@ "type": "color" }, "withDefault": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "withHover": { @@ -768,7 +798,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.active} ", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -786,7 +816,7 @@ "type": "mix", "value": "{modes.color.modifiers.link.enabled}", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } }, @@ -801,7 +831,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.hover} ", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -815,22 +845,22 @@ "type": "mix", "value": "{modes.color.modifiers.link.hover}", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } }, "description": "for link hover " }, "withActive": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "withDefault": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "withHover": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "frozen": { @@ -843,7 +873,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.active} ", "space": "lch", - "color": "{modes.color.modifier.contrastLess}" + "color": "{modes.color.modifier.contrastMore}" } } } @@ -875,7 +905,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.hover} ", "space": "lch", - "color": "{modes.color.modifier.contrastLess} " + "color": "{modes.color.modifier.contrastMore} " } } } @@ -899,7 +929,7 @@ }, "progress": { "bg": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.bg.extreme}", "type": "color", "$extensions": { "studio.tokens": { @@ -912,7 +942,7 @@ } }, "bgAlt": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.bg.nought}", "type": "color", "$extensions": { "studio.tokens": { @@ -923,6 +953,21 @@ } } } + }, + "frozen": { + "bg": { + "value": "{modes.color.generic.bg.extreme}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "lch" + } + } + } + } } } }, @@ -933,7 +978,7 @@ "type": "color" }, "defaultAlt": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.bg.extreme}", "type": "color", "description": "bg for contextual message comp" }, @@ -958,8 +1003,18 @@ "type": "color" }, "defaultAlt": { - "value": "{primitives.colors.orange}", + "value": "{modes.color.modifier.contrastLess}", "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.2", + "space": "lch", + "color": "{primitives.colors.orangeBright}" + } + } + }, "description": "Subtle message bg" }, "hover": { @@ -969,9 +1024,9 @@ "studio.tokens": { "modify": { "type": "mix", - "value": "{modes.color.modifiers.button.hoverAlt}", + "value": "{modes.color.modifiers.button.hover}", "space": "lch", - "color": "{modes.color.modifier.contrastLess}" + "color": "{modes.color.modifier.contrastMore}" } } }, @@ -1038,8 +1093,18 @@ "type": "color" }, "defaultAlt": { - "value": "{primitives.colors.blue}", + "value": "{modes.color.modifier.contrastLess}", "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.2", + "space": "lch", + "color": "{primitives.colors.blueBright}" + } + } + }, "description": "Subtle message bg" }, "hover": { @@ -1051,7 +1116,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.hover}", "space": "lch", - "color": "{modes.color.modifier.contrastLess}" + "color": "{modes.color.modifier.contrastMore}" } } }, @@ -1079,8 +1144,18 @@ "type": "color" }, "defaultAlt": { - "value": "{primitives.colors.red}", + "value": "{modes.color.modifier.contrastLess}", "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.2", + "space": "lch", + "color": "{primitives.colors.redBright}" + } + } + }, "description": "Subtle message bg" }, "hover": { @@ -1092,7 +1167,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.hover}", "space": "lch", - "color": "{modes.color.modifier.contrastLess}" + "color": "{modes.color.modifier.contrastMore}" } } }, @@ -1124,8 +1199,18 @@ "type": "color" }, "defaultAlt": { - "value": "{primitives.colors.storm}", + "value": "{modes.color.modifier.contrastLess}", "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.2", + "space": "lch", + "color": "{primitives.colors.stormBright}" + } + } + }, "description": "Subtle message bg" }, "hover": { @@ -1137,7 +1222,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.hover}", "space": "lch", - "color": "{modes.color.modifier.contrastLess}" + "color": "{modes.color.modifier.contrastMore}" } } }, @@ -1165,8 +1250,18 @@ "type": "color" }, "defaultAlt": { - "value": "{primitives.colors.green}", + "value": "{modes.color.modifier.contrastLess}", "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.2", + "space": "lch", + "color": "{primitives.colors.greenBright}" + } + } + }, "description": "Subtle message bg" }, "hover": { @@ -1178,7 +1273,7 @@ "type": "mix", "value": "{modes.color.modifiers.button.hover}", "space": "lch", - "color": "{modes.color.modifier.contrastLess}" + "color": "{modes.color.modifier.contrastMore}" } } }, @@ -1202,15 +1297,15 @@ }, "callout": { "defaultAlt": { - "value": "{primitives.colors.brilliantGreen}", + "value": "{modes.color.modifier.contrastLess}", "type": "color", "$extensions": { "studio.tokens": { "modify": { "type": "mix", - "value": "0.4", + "value": "0.15", "space": "lch", - "color": "{modes.color.modifier.contrastMore} " + "color": "{primitives.colors.brilliantGreen}" } } }, @@ -1285,11 +1380,11 @@ }, "modifier": { "contrastLess": { - "value": "{primitives.colors.white}", + "value": "{primitives.colors.black}", "type": "color" }, "contrastMore": { - "value": "{primitives.colors.black}", + "value": "{primitives.colors.white}", "type": "color" } }, @@ -1298,7 +1393,7 @@ "active": { "value": "0.32", "type": "other", - "description": "Actve modifier used when 16% hover is used" + "description": "Active modifier used when 16% hover is used" }, "activeAlt": { "value": "0.16", diff --git a/data/tokens/modes/light.json b/data/tokens/modes/light.json index 028fb463..fdeb0fe3 100644 --- a/data/tokens/modes/light.json +++ b/data/tokens/modes/light.json @@ -183,6 +183,11 @@ } } } + }, + "extreme": { + "value": "{primitives.colors.black}", + "type": "color", + "description": "Consumed within generic monochrome, progress" } }, "content": { @@ -441,11 +446,11 @@ "description": "used on link hover state" }, "withActive": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "withDefault": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.fg.nought}", "type": "color" } }, @@ -456,7 +461,7 @@ "description": "Input backgrounds." }, "withActive": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.content.extreme}", "type": "color", "description": "checkbox tick icon or radio handle" }, @@ -465,7 +470,7 @@ "type": "color" }, "withHover": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.content.extreme}", "type": "color", "description": "text for draggable area on file input" }, @@ -546,7 +551,7 @@ "type": "color" }, "content": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.content.extreme}", "type": "color" } }, @@ -557,7 +562,7 @@ "description": "Disabled form input borders." }, "mask": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.bg.extreme}", "type": "color", "description": "full screen takeover token for modal dimmer" }, @@ -572,7 +577,7 @@ "description": "Disabled text inside buttons and form inputs." }, "contentAlt": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.fg.nought}", "type": "color", "description": " Disabled labels inside buttons and Switch." }, @@ -585,6 +590,23 @@ "value": "{modes.color.generic.content.moderate}", "type": "color", "description": "Readonly icon inside form inputs. " + }, + "frozen": { + "defaultAlt": { + "value": "{primitives.colors.navy}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.9", + "space": "lch", + "color": "{modes.color.modifier.contrastLess} " + } + } + }, + "description": "Disabled input and button backgrounds, button borders and input backgrounds." + } } }, "monochrome": { @@ -633,14 +655,22 @@ } } }, + "withActive": { + "value": "{modes.color.generic.fg.nought}", + "type": "color" + }, "withHover": { "value": "{modes.color.interactive.monochrome.frozen.active}", "type": "color" + }, + "withHoverAlt": { + "value": "{modes.color.generic.fg.nought}", + "type": "color" } }, "generic": { "active": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.bg.extreme}", "type": "color" }, "activeAlt": { @@ -684,7 +714,7 @@ "description": "subtle and toggle button text" }, "hoverAlt": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.bg.extreme}", "type": "color", "$extensions": { "studio.tokens": { @@ -712,7 +742,7 @@ "description": "subtle table header hover" }, "withActive": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "withActiveAlt": { @@ -720,7 +750,7 @@ "type": "color" }, "withDefault": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "withHover": { @@ -836,15 +866,15 @@ "description": "for link hover" }, "withActive": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "withDefault": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "withHover": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.fg.nought}", "type": "color" }, "frozen": { @@ -914,7 +944,7 @@ }, "progress": { "bg": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.bg.extreme}", "type": "color", "$extensions": { "studio.tokens": { @@ -927,7 +957,7 @@ } }, "bgAlt": { - "value": "{primitives.colors.white}", + "value": "{modes.color.generic.bg.nought}", "type": "color", "$extensions": { "studio.tokens": { @@ -938,6 +968,21 @@ } } } + }, + "frozen": { + "bg": { + "value": "{primitives.colors.frozenJade}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "0.08", + "space": "lch" + } + } + } + } } } }, @@ -948,7 +993,7 @@ "type": "color" }, "defaultAlt": { - "value": "{primitives.colors.black}", + "value": "{modes.color.generic.bg.extreme}", "type": "color", "description": "bg for contextual message comp" }, @@ -1063,7 +1108,7 @@ "type": "color" }, "defaultAlt": { - "value": "{primitives.colors.white}", + "value": "{modes.color.modifier.contrastLess}", "type": "color", "$extensions": { "studio.tokens": { @@ -1228,7 +1273,7 @@ "type": "mix", "value": "0.1", "space": "lch", - "color": "{modes.color.status.success.default} " + "color": "{primitives.colors.greenBright}" } } }, diff --git a/data/tokens/primitives.json b/data/tokens/primitives.json index 7f6eb8fc..d71d1fd7 100644 --- a/data/tokens/primitives.json +++ b/data/tokens/primitives.json @@ -380,7 +380,7 @@ "y": "2", "blur": "2", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.10)", + "color": "{primitives.colors.black}1A", "type": "dropShadow" }, { @@ -388,7 +388,7 @@ "y": "5", "blur": "5", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.1)", + "color": "{primitives.colors.black}1A", "type": "dropShadow" } ], @@ -401,7 +401,7 @@ "y": "1", "blur": "2", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.10)", + "color": "{primitives.colors.black}1A", "type": "dropShadow" }, { @@ -409,7 +409,7 @@ "y": "2", "blur": "10", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.2)", + "color": "{primitives.colors.black}33", "type": "dropShadow" } ], @@ -422,7 +422,7 @@ "y": "2", "blur": "3", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.1)", + "color": "{primitives.colors.black}1A", "type": "dropShadow" }, { @@ -430,7 +430,7 @@ "y": "6", "blur": "30", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.15)", + "color": "{primitives.colors.black}26", "type": "dropShadow" } ], @@ -443,7 +443,7 @@ "y": "3", "blur": "4", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.1)", + "color": "{primitives.colors.black}1A", "type": "dropShadow" }, { @@ -451,7 +451,7 @@ "y": "10", "blur": "60", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.1)", + "color": "{primitives.colors.black}1A", "type": "dropShadow" } ], @@ -466,7 +466,7 @@ "y": "-1", "blur": "2", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.10)", + "color": "{primitives.colors.black}1A", "type": "dropShadow" }, { @@ -474,7 +474,7 @@ "y": "-2", "blur": "10", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.2)", + "color": "{primitives.colors.black}33", "type": "dropShadow" } ], @@ -487,7 +487,7 @@ "y": "-3", "blur": "4", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.1)", + "color": "{primitives.colors.black}1A", "type": "dropShadow" }, { @@ -495,7 +495,7 @@ "y": "-10", "blur": "60", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.1)", + "color": "{primitives.colors.black}1A", "type": "dropShadow" } ], @@ -510,7 +510,7 @@ "y": "-1", "blur": "0", "spread": "0", - "color": "rgba( {primitives.colors.black} , 0.3)", + "color": "{primitives.colors.black}4D", "type": "innerShadow" } ], diff --git a/docs/CHANGELOG.md b/docs/CHANGELOG.md index 87056edc..5834459d 100644 --- a/docs/CHANGELOG.md +++ b/docs/CHANGELOG.md @@ -1,3 +1,25 @@ +# [5.0.0-beta.27](https://github.com/Sage/design-tokens/compare/v5.0.0-beta.26...v5.0.0-beta.27) (2024-12-03) + + +### Features + +* **data:** 2nd push ([5dc3fdc](https://github.com/Sage/design-tokens/commit/5dc3fdc947ed9c450f568ff97f2235b2f0cb589b)) +* **data:** Add form.color.switch for FROZENPRODUCT theme ([5535161](https://github.com/Sage/design-tokens/commit/5535161580792a45ba6d14dfcf6cb5a37d04724b)) +* **data:** adding color overrides for progress bar ([77bfecc](https://github.com/Sage/design-tokens/commit/77bfecc0a2161ff6fa0af9b9ea4e7bd178ae7b85)) +* **data:** adding tab frozen colors ([ae4b665](https://github.com/Sage/design-tokens/commit/ae4b665484330cb5cf48f51dd4a85fe77760da45)) +* **data:** Change code order in FROZENPRODUCT theme colours ([1a20919](https://github.com/Sage/design-tokens/commit/1a2091903e845c319af54e6b96cb7b1f8b69fc17)) +* **data:** correct FROZEN tertiary button enabled border value ([8ce493c](https://github.com/Sage/design-tokens/commit/8ce493cf03af8951b916f4b25eff52c2040f1c20)) +* **data:** DARK THEME Add modes.color.generic.bg.extreme. Update values of tokens referencing primitive black and white to reference generic colour tokens. ([acdcc09](https://github.com/Sage/design-tokens/commit/acdcc09f1a201fe15e081c9c08e1d7d43ec9e3de)) +* **data:** first set of changes relating to dark theme contrastMore and contrastLess values, along with changes to tokens that reference contrastMore and contrastLess ([db38739](https://github.com/Sage/design-tokens/commit/db38739f11802f6932d4c1dc2de93c4cafa9ce89)) +* **data:** fixing active and hover label breakages in frozen theme ([2516e22](https://github.com/Sage/design-tokens/commit/2516e22971346238342b0c994c7761dd1d478777)) +* **data:** fixing issues with popover component in frozen theme ([c1217e0](https://github.com/Sage/design-tokens/commit/c1217e0ea7845982dab6f9b9115003750c27b34d)) +* **data:** LIGHT THEME Add modes.color.generic.bg.extreme, and change all values that reference primitive white or black to reference generic colour tokens instead ([3728b06](https://github.com/Sage/design-tokens/commit/3728b06085d0be28d5c4a38542db8914d53eec8f)) +* **data:** LIGHT THEME: 1. Correct modes.color.status info and callout defaultAlt values. 2. Correct value of status.callout.hoverAlt. DARK THEME: 1. Correct all status defaultAlt tokens to use same mixes as light theme tokens, with slight modification to the mix amount: 0.2 in dark vs of 0.1 in light. 2. Correct value of status.succes.hoverAlt. ([3297228](https://github.com/Sage/design-tokens/commit/32972285048dcb5c1baa45c0b2158da532ba8a6b)) +* **data:** Reorder code for button colours. ([7142986](https://github.com/Sage/design-tokens/commit/714298604cf2c066b0a367b1e9e050793aff7c82)) +* **data:** Update value of modes.color.status.caution.hover ([d182ff8](https://github.com/Sage/design-tokens/commit/d182ff80a5b46129f3d6b39e401682352b4fc3e7)) +* **data:** update values of DARK THEME focus colours ([974f3c7](https://github.com/Sage/design-tokens/commit/974f3c71ca0c8029d4f07b21f7f61691f9a69277)) +* **data:** Update values of primitives shadows for [@dru](https://github.com/dru) ([04f4097](https://github.com/Sage/design-tokens/commit/04f40978b2c25032d429f1cc352902b28158624a)) + # [5.0.0-beta.26](https://github.com/Sage/design-tokens/compare/v5.0.0-beta.25...v5.0.0-beta.26) (2024-12-02)