diff --git a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap index 17c6ff9474e..1cb9bd3406d 100644 --- a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap +++ b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap @@ -26,6 +26,7 @@ exports[`themes admin - theme shape 1`] = ` "green-100": "#EAFDC6", "green-400": "#AEE938", "green-700": "#008A27", + "green-900": "#151C07", "hyper": "#3A10E5", "hyper-400": "#5533FF", "hyper-500": "#3A10E5", @@ -71,6 +72,7 @@ exports[`themes admin - theme shape 1`] = ` "yellow-0": "#FFFAE5", "yellow-400": "#CCA900", "yellow-500": "#FFD300", + "yellow-900": "#211B00", }, "elements": { "headerHeight": { @@ -89,6 +91,8 @@ exports[`themes admin - theme shape 1`] = ` "background-hover": "rgba(255,255,255,0.09)", "background-primary": "#0A0D1C", "background-selected": "rgba(255,255,255,0.04)", + "background-success": "#151C07", + "background-warning": "#211B00", "border-disabled": "rgba(255,255,255,0.5)", "border-primary": "#ffffff", "border-secondary": "rgba(255,255,255,0.65)", @@ -121,6 +125,8 @@ exports[`themes admin - theme shape 1`] = ` "background-hover": "rgba(16,22,47,0.12)", "background-primary": "#FFF0E5", "background-selected": "rgba(16,22,47,0.04)", + "background-success": "#F5FFE3", + "background-warning": "#FFFAE5", "border-disabled": "rgba(16,22,47,0.63)", "border-primary": "#10162F", "border-secondary": "rgba(16,22,47,0.75)", @@ -156,6 +162,8 @@ exports[`themes admin - theme shape 1`] = ` "--color-background-hover": "var(--color-navy-200)", "--color-background-primary": "var(--color-beige)", "--color-background-selected": "var(--color-navy-100)", + "--color-background-success": "var(--color-green-0)", + "--color-background-warning": "var(--color-yellow-0)", "--color-border-disabled": "var(--color-navy-500)", "--color-border-primary": "var(--color-navy-800)", "--color-border-secondary": "var(--color-navy-600)", @@ -201,6 +209,7 @@ exports[`themes admin - theme shape 1`] = ` "--color-green-100": "#EAFDC6", "--color-green-400": "#AEE938", "--color-green-700": "#008A27", + "--color-green-900": "#151C07", "--color-hyper": "#3A10E5", "--color-hyper-400": "#5533FF", "--color-hyper-500": "#3A10E5", @@ -246,6 +255,7 @@ exports[`themes admin - theme shape 1`] = ` "--color-yellow-0": "#FFFAE5", "--color-yellow-400": "#CCA900", "--color-yellow-500": "#FFD300", + "--color-yellow-900": "#211B00", "--elements-headerHeight": "4rem", "--elements-headerZ": 15, "@media only screen and (min-width: 1024px)": { @@ -293,6 +303,8 @@ exports[`themes admin - theme shape 1`] = ` "background-hover": "var(--color-background-hover)", "background-primary": "var(--color-background-primary)", "background-selected": "var(--color-background-selected)", + "background-success": "var(--color-background-success)", + "background-warning": "var(--color-background-warning)", "beige": "var(--color-beige)", "beige-100": "var(--color-beige-100)", "black": "var(--color-black)", @@ -323,6 +335,7 @@ exports[`themes admin - theme shape 1`] = ` "green-100": "var(--color-green-100)", "green-400": "var(--color-green-400)", "green-700": "var(--color-green-700)", + "green-900": "var(--color-green-900)", "hyper": "var(--color-hyper)", "hyper-400": "var(--color-hyper-400)", "hyper-500": "var(--color-hyper-500)", @@ -381,6 +394,7 @@ exports[`themes admin - theme shape 1`] = ` "yellow-0": "var(--color-yellow-0)", "yellow-400": "var(--color-yellow-400)", "yellow-500": "var(--color-yellow-500)", + "yellow-900": "var(--color-yellow-900)", }, "elements": { "headerHeight": "var(--elements-headerHeight)", @@ -431,6 +445,8 @@ monospace", "background-hover": "white-200", "background-primary": "navy-900", "background-selected": "white-100", + "background-success": "green-900", + "background-warning": "yellow-900", "border-disabled": "white-500", "border-primary": "white", "border-secondary": "white-600", @@ -463,6 +479,8 @@ monospace", "background-hover": "navy-200", "background-primary": "beige", "background-selected": "navy-100", + "background-success": "green-0", + "background-warning": "yellow-0", "border-disabled": "navy-500", "border-primary": "navy-800", "border-secondary": "navy-600", @@ -529,6 +547,7 @@ exports[`themes core - theme shape 1`] = ` "green-100": "#EAFDC6", "green-400": "#AEE938", "green-700": "#008A27", + "green-900": "#151C07", "hyper": "#3A10E5", "hyper-400": "#5533FF", "hyper-500": "#3A10E5", @@ -574,6 +593,7 @@ exports[`themes core - theme shape 1`] = ` "yellow-0": "#FFFAE5", "yellow-400": "#CCA900", "yellow-500": "#FFD300", + "yellow-900": "#211B00", }, "elements": { "headerHeight": { @@ -592,6 +612,8 @@ exports[`themes core - theme shape 1`] = ` "background-hover": "rgba(255,255,255,0.09)", "background-primary": "#0A0D1C", "background-selected": "rgba(255,255,255,0.04)", + "background-success": "#151C07", + "background-warning": "#211B00", "border-disabled": "rgba(255,255,255,0.5)", "border-primary": "#ffffff", "border-secondary": "rgba(255,255,255,0.65)", @@ -624,6 +646,8 @@ exports[`themes core - theme shape 1`] = ` "background-hover": "rgba(16,22,47,0.12)", "background-primary": "#FFF0E5", "background-selected": "rgba(16,22,47,0.04)", + "background-success": "#F5FFE3", + "background-warning": "#FFFAE5", "border-disabled": "rgba(16,22,47,0.63)", "border-primary": "#10162F", "border-secondary": "rgba(16,22,47,0.75)", @@ -659,6 +683,8 @@ exports[`themes core - theme shape 1`] = ` "--color-background-hover": "var(--color-navy-200)", "--color-background-primary": "var(--color-beige)", "--color-background-selected": "var(--color-navy-100)", + "--color-background-success": "var(--color-green-0)", + "--color-background-warning": "var(--color-yellow-0)", "--color-border-disabled": "var(--color-navy-500)", "--color-border-primary": "var(--color-navy-800)", "--color-border-secondary": "var(--color-navy-600)", @@ -704,6 +730,7 @@ exports[`themes core - theme shape 1`] = ` "--color-green-100": "#EAFDC6", "--color-green-400": "#AEE938", "--color-green-700": "#008A27", + "--color-green-900": "#151C07", "--color-hyper": "#3A10E5", "--color-hyper-400": "#5533FF", "--color-hyper-500": "#3A10E5", @@ -749,6 +776,7 @@ exports[`themes core - theme shape 1`] = ` "--color-yellow-0": "#FFFAE5", "--color-yellow-400": "#CCA900", "--color-yellow-500": "#FFD300", + "--color-yellow-900": "#211B00", "--elements-headerHeight": "4rem", "--elements-headerZ": 15, "@media only screen and (min-width: 1024px)": { @@ -796,6 +824,8 @@ exports[`themes core - theme shape 1`] = ` "background-hover": "var(--color-background-hover)", "background-primary": "var(--color-background-primary)", "background-selected": "var(--color-background-selected)", + "background-success": "var(--color-background-success)", + "background-warning": "var(--color-background-warning)", "beige": "var(--color-beige)", "beige-100": "var(--color-beige-100)", "black": "var(--color-black)", @@ -826,6 +856,7 @@ exports[`themes core - theme shape 1`] = ` "green-100": "var(--color-green-100)", "green-400": "var(--color-green-400)", "green-700": "var(--color-green-700)", + "green-900": "var(--color-green-900)", "hyper": "var(--color-hyper)", "hyper-400": "var(--color-hyper-400)", "hyper-500": "var(--color-hyper-500)", @@ -884,6 +915,7 @@ exports[`themes core - theme shape 1`] = ` "yellow-0": "var(--color-yellow-0)", "yellow-400": "var(--color-yellow-400)", "yellow-500": "var(--color-yellow-500)", + "yellow-900": "var(--color-yellow-900)", }, "elements": { "headerHeight": "var(--elements-headerHeight)", @@ -934,6 +966,8 @@ monospace", "background-hover": "white-200", "background-primary": "navy-900", "background-selected": "white-100", + "background-success": "green-900", + "background-warning": "yellow-900", "border-disabled": "white-500", "border-primary": "white", "border-secondary": "white-600", @@ -966,6 +1000,8 @@ monospace", "background-hover": "navy-200", "background-primary": "beige", "background-selected": "navy-100", + "background-success": "green-0", + "background-warning": "yellow-0", "border-disabled": "navy-500", "border-primary": "navy-800", "border-secondary": "navy-600", @@ -1035,6 +1071,7 @@ exports[`themes platform - theme shape 1`] = ` "green-100": "#EAFDC6", "green-400": "#AEE938", "green-700": "#008A27", + "green-900": "#151C07", "hyper": "#3A10E5", "hyper-400": "#5533FF", "hyper-500": "#3A10E5", @@ -1087,6 +1124,7 @@ exports[`themes platform - theme shape 1`] = ` "yellow-0": "#FFFAE5", "yellow-400": "#CCA900", "yellow-500": "#FFD300", + "yellow-900": "#211B00", }, "elements": { "headerHeight": { @@ -1105,6 +1143,8 @@ exports[`themes platform - theme shape 1`] = ` "background-hover": "rgba(255,255,255,0.09)", "background-primary": "#0A0D1C", "background-selected": "rgba(255,255,255,0.04)", + "background-success": "#151C07", + "background-warning": "#211B00", "border-disabled": "rgba(255,255,255,0.5)", "border-primary": "#ffffff", "border-secondary": "rgba(255,255,255,0.65)", @@ -1162,6 +1202,8 @@ exports[`themes platform - theme shape 1`] = ` "background-hover": "rgba(16,22,47,0.12)", "background-primary": "#FFF0E5", "background-selected": "rgba(16,22,47,0.04)", + "background-success": "#F5FFE3", + "background-warning": "#FFFAE5", "border-disabled": "rgba(16,22,47,0.63)", "border-primary": "#10162F", "border-secondary": "rgba(16,22,47,0.75)", @@ -1222,6 +1264,8 @@ exports[`themes platform - theme shape 1`] = ` "--color-background-hover": "var(--color-white-200)", "--color-background-primary": "var(--color-navy-900)", "--color-background-selected": "var(--color-white-100)", + "--color-background-success": "var(--color-green-900)", + "--color-background-warning": "var(--color-yellow-900)", "--color-border-disabled": "var(--color-white-500)", "--color-border-primary": "var(--color-white)", "--color-border-secondary": "var(--color-white-600)", @@ -1295,6 +1339,7 @@ exports[`themes platform - theme shape 1`] = ` "--color-green-100": "#EAFDC6", "--color-green-400": "#AEE938", "--color-green-700": "#008A27", + "--color-green-900": "#151C07", "--color-hyper": "#3A10E5", "--color-hyper-400": "#5533FF", "--color-hyper-500": "#3A10E5", @@ -1347,6 +1392,7 @@ exports[`themes platform - theme shape 1`] = ` "--color-yellow-0": "#FFFAE5", "--color-yellow-400": "#CCA900", "--color-yellow-500": "#FFD300", + "--color-yellow-900": "#211B00", "--elements-headerHeight": "4rem", "--elements-headerZ": 15, "@media only screen and (min-width: 1024px)": { @@ -1394,6 +1440,8 @@ exports[`themes platform - theme shape 1`] = ` "background-hover": "var(--color-background-hover)", "background-primary": "var(--color-background-primary)", "background-selected": "var(--color-background-selected)", + "background-success": "var(--color-background-success)", + "background-warning": "var(--color-background-warning)", "beige": "var(--color-beige)", "beige-0": "var(--color-beige-0)", "beige-100": "var(--color-beige-100)", @@ -1452,6 +1500,7 @@ exports[`themes platform - theme shape 1`] = ` "green-100": "var(--color-green-100)", "green-400": "var(--color-green-400)", "green-700": "var(--color-green-700)", + "green-900": "var(--color-green-900)", "hyper": "var(--color-hyper)", "hyper-400": "var(--color-hyper-400)", "hyper-500": "var(--color-hyper-500)", @@ -1517,6 +1566,7 @@ exports[`themes platform - theme shape 1`] = ` "yellow-0": "var(--color-yellow-0)", "yellow-400": "var(--color-yellow-400)", "yellow-500": "var(--color-yellow-500)", + "yellow-900": "var(--color-yellow-900)", }, "elements": { "headerHeight": "var(--elements-headerHeight)", @@ -1567,6 +1617,8 @@ monospace", "background-hover": "white-200", "background-primary": "navy-900", "background-selected": "white-100", + "background-success": "green-900", + "background-warning": "yellow-900", "border-disabled": "white-500", "border-primary": "white", "border-secondary": "white-600", @@ -1624,6 +1676,8 @@ monospace", "background-hover": "navy-200", "background-primary": "beige", "background-selected": "navy-100", + "background-success": "green-0", + "background-warning": "yellow-0", "border-disabled": "navy-500", "border-primary": "navy-800", "border-secondary": "navy-600", diff --git a/packages/gamut-styles/src/themes/core.ts b/packages/gamut-styles/src/themes/core.ts index fc042e4d661..5b564ebfb27 100644 --- a/packages/gamut-styles/src/themes/core.ts +++ b/packages/gamut-styles/src/themes/core.ts @@ -50,6 +50,8 @@ export const coreTheme = createTheme({ selected: 'navy-100', disabled: 'navy-200', hover: 'navy-200', + success: 'green-0', + warning: 'yellow-0', error: 'red-0', }, shadow: { @@ -100,6 +102,8 @@ export const coreTheme = createTheme({ selected: 'white-100', disabled: 'white-200', hover: 'white-200', + success: 'green-900', + warning: 'yellow-900', error: 'red-900', }, shadow: { diff --git a/packages/gamut-styles/src/variables/colors.ts b/packages/gamut-styles/src/variables/colors.ts index c5bdd61c064..5c03ec32c08 100644 --- a/packages/gamut-styles/src/variables/colors.ts +++ b/packages/gamut-styles/src/variables/colors.ts @@ -36,11 +36,13 @@ export const coreSwatches = { '100': '#EAFDC6', '400': '#AEE938', '700': '#008A27', + '900': '#151C07', }, yellow: { '0': '#FFFAE5', '400': '#CCA900', '500': '#FFD300', + '900': '#211B00', }, pink: { '0': '#FFF5FF',