From 068ec3d623a20c5d0620f2e91b1357918b1840b6 Mon Sep 17 00:00:00 2001 From: clairedenning Date: Thu, 11 Jan 2024 10:34:34 +0000 Subject: [PATCH] feat(data): MANY ORIGIN and MIDLAYER changes including... 1. Remove origin.colors.inverse.jade and add origin.colors.lightGreen. 2. Reorder origin colours. 3. Rename base.color.primary to base.primary.standard and add base.primary.inverse. 4. Add origin.colors.lightRed. 5. Rename base.color.interactive.danger to base.color.interactive.danger.typical. 6. Add base.color.interactive.danger.inverse colour tokens. --- data/tokens/Components/button.json | 38 +-- data/tokens/Components/datatable.json | 2 +- data/tokens/Components/form.json | 2 +- data/tokens/Components/link.json | 12 +- data/tokens/Modes/light.json | 330 +++++++++++++++----------- data/tokens/origin.json | 56 ++--- 6 files changed, 241 insertions(+), 199 deletions(-) diff --git a/data/tokens/Components/button.json b/data/tokens/Components/button.json index 7b738453..9f906d96 100644 --- a/data/tokens/Components/button.json +++ b/data/tokens/Components/button.json @@ -73,19 +73,19 @@ "type": "color" }, "bg-active": { - "value": "{base.color.interactive.danger.active}", + "value": "{base.color.interactive.danger.typical.active}", "type": "color" }, "bg-enabled": { - "value": "{base.color.interactive.danger.default}", + "value": "{base.color.interactive.danger.typical.default}", "type": "color" }, "bg-hover": { - "value": "{base.color.interactive.danger.hover}", + "value": "{base.color.interactive.danger.typical.hover}", "type": "color" }, "label-active": { - "value": "{base.color.interactive.danger.withActive}", + "value": "{base.color.interactive.danger.typical.withActive}", "type": "color" }, "label-disabled": { @@ -93,25 +93,25 @@ "type": "color" }, "label-enabled": { - "value": "{base.color.interactive.danger.withDefault}", + "value": "{base.color.interactive.danger.typical.withDefault}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.danger.withDefault}", + "value": "{base.color.interactive.danger.typical.withDefault}", "type": "color" } }, "secondary": { "bg-active": { - "value": "{base.color.interactive.danger.active}", + "value": "{base.color.interactive.danger.typical.active}", "type": "color" }, "bg-hover": { - "value": "{base.color.interactive.danger.hoverAlt}", + "value": "{base.color.interactive.danger.typical.hoverAlt}", "type": "color" }, "border-active": { - "value": "{base.color.interactive.danger.active}", + "value": "{base.color.interactive.danger.typical.active}", "type": "color" }, "border-disabled": { @@ -119,15 +119,15 @@ "type": "color" }, "border-enabled": { - "value": "{base.color.interactive.danger.default}", + "value": "{base.color.interactive.danger.typical.default}", "type": "color" }, "border-hover": { - "value": "{base.color.interactive.danger.hover}", + "value": "{base.color.interactive.danger.typical.hover}", "type": "color" }, "label-active": { - "value": "{base.color.interactive.primary.withActive}", + "value": "{base.color.interactive.primary.typical.withActive}", "type": "color" }, "label-disabled": { @@ -135,11 +135,11 @@ "type": "color" }, "label-enabled": { - "value": "{base.color.interactive.danger.default}", + "value": "{base.color.interactive.danger.typical.default}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.danger.hover}", + "value": "{base.color.interactive.danger.typical.hover}", "type": "color" } } @@ -156,15 +156,15 @@ "type": "color" }, "bg-enabled": { - "value": "{base.color.interactive.primary.default}", + "value": "{base.color.interactive.primary.typical.default}", "type": "color" }, "bg-hover": { - "value": "{base.color.interactive.primary.hover}", + "value": "{base.color.interactive.primary.typical.hover}", "type": "color" }, "label-active": { - "value": "{base.color.interactive.primary.withActive}", + "value": "{base.color.interactive.primary.typical.withActive}", "type": "color" }, "label-disabled": { @@ -172,11 +172,11 @@ "type": "color" }, "label-enabled": { - "value": "{base.color.interactive.primary.withDefault}", + "value": "{base.color.interactive.primary.typical.withDefault}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.primary.withDefault}", + "value": "{base.color.interactive.primary.typical.withDefault}", "type": "color" } }, diff --git a/data/tokens/Components/datatable.json b/data/tokens/Components/datatable.json index 5358bad0..1d881fde 100644 --- a/data/tokens/Components/datatable.json +++ b/data/tokens/Components/datatable.json @@ -78,7 +78,7 @@ }, "row": { "bg-activated": { - "value": "{base.color.interactive.primary.default}", + "value": "{base.color.interactive.primary.typical.default}", "type": "color" }, "bg-active": { diff --git a/data/tokens/Components/form.json b/data/tokens/Components/form.json index 8f3484ce..42932bf6 100644 --- a/data/tokens/Components/form.json +++ b/data/tokens/Components/form.json @@ -184,7 +184,7 @@ }, "labelset": { "label-required": { - "value": "{base.color.interactive.danger.default}", + "value": "{base.color.interactive.danger.typical.default}", "type": "color" }, "label-default": { diff --git a/data/tokens/Components/link.json b/data/tokens/Components/link.json index 44361aa2..f38bbe4d 100644 --- a/data/tokens/Components/link.json +++ b/data/tokens/Components/link.json @@ -12,21 +12,21 @@ }, "destructive": { "label-default": { - "value": "{base.color.interactive.danger.default}", + "value": "{base.color.interactive.danger.typical.default}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.danger.hover}", + "value": "{base.color.interactive.danger.typical.hover}", "type": "color" } }, "typical": { "label-default": { - "value": "{base.color.interactive.primary.defaultAlt}", + "value": "{base.color.interactive.primary.typical.defaultAlt}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.inverse.hoverAlt}", + "value": "{base.color.interactive.primary.inverse.hoverAlt}", "type": "color" } }, @@ -52,11 +52,11 @@ }, "typical": { "label-default": { - "value": "{base.color.interactive.inverse.defaultAlt}", + "value": "{base.color.interactive.primary.inverse.defaultAlt}", "type": "color" }, "label-hover": { - "value": "{base.color.interactive.inverse.hoverAlt}", + "value": "{base.color.interactive.primary.inverse.hoverAlt}", "type": "color" } }, diff --git a/data/tokens/Modes/light.json b/data/tokens/Modes/light.json index 04f1d520..7edb02a0 100644 --- a/data/tokens/Modes/light.json +++ b/data/tokens/Modes/light.json @@ -401,77 +401,115 @@ }, "interactive": { "danger": { - "active": { - "value": "{base.color.interactive.danger.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.active}", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" + "typical": { + "active": { + "value": "{base.color.interactive.danger.typical.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.active}", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } } - } + }, + "description": "used on pill hover states" }, - "description": "used on pill hover states" - }, - "default": { - "value": "{origin.colors.red}", - "type": "color" - }, - "defaultAlt": { - "value": "{origin.colors.red}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.12", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" + "default": { + "value": "{origin.colors.red}", + "type": "color" + }, + "defaultAlt": { + "value": "{origin.colors.red}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.12", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } } - } + }, + "description": "For links in datatables" }, - "description": "For links in datatables" - }, - "hover": { - "value": "{base.color.status.negative.standard.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" + "hover": { + "value": "{base.color.status.negative.standard.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } } - } + }, + "description": "used on pill hover states" }, - "description": "used on pill hover states" - }, - "hoverAlt": { - "value": "{base.color.interactive.danger.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "alpha", - "value": "{base.color.modifiers.button.hover} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" + "hoverAlt": { + "value": "{base.color.interactive.danger.typical.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "alpha", + "value": "{base.color.modifiers.button.hover} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } } - } + }, + "description": "used on pill hover states" }, - "description": "used on pill hover states" - }, - "withActive": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" + "withActive": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "withDefault": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + } }, - "withDefault": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" + "inverse": { + "default": { + "value": "{origin.colors.lightRed}", + "type": "color" + }, + "defaultAlt": { + "value": "{base.color.interactive.danger.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.12", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + }, + "description": "for links in datatables\n" + }, + "hoverAlt": { + "value": "{base.color.interactive.danger.inverse.defaultAlt}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + }, + "description": "for links in datatables" + } } }, "dataEntry": { @@ -715,100 +753,102 @@ } }, "primary": { - "active": { - "value": "{base.color.interactive.primary.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.active} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" + "typical": { + "active": { + "value": "{base.color.interactive.primary.typical.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.active} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } } } - } - }, - "default": { - "value": "{origin.colors.jade}", - "type": "color" - }, - "defaultAlt": { - "value": "{base.color.interactive.primary.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.12", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" + }, + "default": { + "value": "{origin.colors.jade}", + "type": "color" + }, + "defaultAlt": { + "value": "{base.color.interactive.primary.typical.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.12", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } } - } + }, + "description": "for links in datatables\n" }, - "description": "for links in datatables\n" - }, - "hover": { - "value": "{base.color.interactive.primary.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastMore}" + "hover": { + "value": "{base.color.interactive.primary.typical.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastMore}" + } } } + }, + "withActive": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "withDefault": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" + }, + "withHover": { + "value": "{base.color.generic.content.inverse.extreme}", + "type": "color" } }, - "withActive": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - }, - "withDefault": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - }, - "withHover": { - "value": "{base.color.generic.content.inverse.extreme}", - "type": "color" - } - }, - "inverse": { - "default": { - "value": "{origin.inverse.jade}", - "type": "color" - }, - "defaultAlt": { - "value": "{base.color.interactive.inverse.default}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "0.12", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " - } - } + "inverse": { + "default": { + "value": "{origin.colors.lightJade}", + "type": "color" }, - "description": "for links in datatables\n" - }, - "hoverAlt": { - "value": "{base.color.interactive.inverse.defaultAlt}", - "type": "color", - "$extensions": { - "studio.tokens": { - "modify": { - "type": "mix", - "value": "{base.color.modifiers.button.hoverAlt} ", - "space": "lch", - "color": "{base.color.modifier.contrastLess} " + "defaultAlt": { + "value": "{base.color.interactive.primary.inverse.default}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "0.12", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } } - } + }, + "description": "for links in datatables\n" }, - "description": "for links in datatables" + "hoverAlt": { + "value": "{base.color.interactive.primary.inverse.defaultAlt}", + "type": "color", + "$extensions": { + "studio.tokens": { + "modify": { + "type": "mix", + "value": "{base.color.modifiers.button.hoverAlt} ", + "space": "lch", + "color": "{base.color.modifier.contrastLess} " + } + } + }, + "description": "for links in datatables" + } } } }, diff --git a/data/tokens/origin.json b/data/tokens/origin.json index 4567b4d2..8b278304 100644 --- a/data/tokens/origin.json +++ b/data/tokens/origin.json @@ -14,34 +14,31 @@ "value": "#008AEB", "type": "color" }, - "brightOrange": { - "value": "#DF6000", - "type": "color", - "description": "Reference only. Do not use in components." + "green": { + "value": "#00821E", + "type": "color" }, "brilliantGreen": { "value": "#00D639", "type": "color", "description": "Reference only. Do not use in components." }, - "gold": { - "value": "#FFB500", - "type": "color" - }, - "green": { - "value": "#00821E", - "type": "color" - }, "brightGreen": { "value": "#009C26", "type": "color" }, - "storm": { - "value": "#6f6f6f", - "type": "color" + "orange": { + "value": "#BB4F00", + "type": "color", + "description": "was #E96400" }, - "brightStorm": { - "value": "#868686", + "brightOrange": { + "value": "#DF6000", + "type": "color", + "description": "Reference only. Do not use in components." + }, + "gold": { + "value": "#FFB500", "type": "color" }, "jade": { @@ -49,10 +46,18 @@ "type": "color", "description": "origin BASE (was originally #008146, darkened by 2% black to meet accessibility requirements)" }, - "orange": { - "value": "#BB4F00", + "lightJade": { + "value": "#008F4F", "type": "color", - "description": "was #E96400" + "description": "AAA text on 000000 bgs. This is deliberately NOT named bright." + }, + "storm": { + "value": "#6f6f6f", + "type": "color" + }, + "brightStorm": { + "value": "#868686", + "type": "color" }, "red": { "value": "#CC374B", @@ -62,6 +67,10 @@ "value": "#FF3053", "type": "color" }, + "lightRed": { + "value": "#E13E54", + "type": "color" + }, "transparent": { "value": "rgba(0,0,0,0)", "type": "color", @@ -73,13 +82,6 @@ "description": "Reference only. Do not use in components." } }, - "inverse": { - "jade": { - "value": "#008F4F", - "type": "color", - "description": "origin BASE (has AAA 5 to 1 ratio against 000000)" - } - }, "size": { "SCALE": { "value": "8",