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 9f7c626ea72..878617d899b 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", @@ -53,10 +54,12 @@ exports[`themes admin - theme shape 1`] = ` "pink-0": "#FFF5FF", "pink-400": "#F966FF", "red": "#E91C11", - "red-0": "#E85D7F", - "red-100": "#DC5879", + "red-0": "#FBF1F0", + "red-300": "#E85D7F", + "red-400": "#DC5879", "red-500": "#E91C11", "red-600": "#BE1809", + "red-900": "#280503", "white": "#ffffff", "white-100": "rgba(255,255,255,0.04)", "white-200": "rgba(255,255,255,0.09)", @@ -69,6 +72,7 @@ exports[`themes admin - theme shape 1`] = ` "yellow-0": "#FFFAE5", "yellow-400": "#CCA900", "yellow-500": "#FFD300", + "yellow-900": "#211B00", }, "elements": { "headerHeight": { @@ -83,9 +87,12 @@ exports[`themes admin - theme shape 1`] = ` "background-contrast": "#000000", "background-current": "#10162F", "background-disabled": "rgba(255,255,255,0.09)", + "background-error": "#280503", "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)", @@ -114,9 +121,12 @@ exports[`themes admin - theme shape 1`] = ` "background-contrast": "#ffffff", "background-current": "#ffffff", "background-disabled": "rgba(16,22,47,0.12)", + "background-error": "#FBF1F0", "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)", @@ -148,9 +158,12 @@ exports[`themes admin - theme shape 1`] = ` "--color-background-contrast": "var(--color-white)", "--color-background-current": "var(--color-white)", "--color-background-disabled": "var(--color-navy-200)", + "--color-background-error": "var(--color-red-0)", "--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)", @@ -196,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", @@ -223,10 +237,12 @@ exports[`themes admin - theme shape 1`] = ` "--color-pink-0": "#FFF5FF", "--color-pink-400": "#F966FF", "--color-red": "#E91C11", - "--color-red-0": "#E85D7F", - "--color-red-100": "#DC5879", + "--color-red-0": "#FBF1F0", + "--color-red-300": "#E85D7F", + "--color-red-400": "#DC5879", "--color-red-500": "#E91C11", "--color-red-600": "#BE1809", + "--color-red-900": "#280503", "--color-white": "#ffffff", "--color-white-100": "rgba(255,255,255,0.04)", "--color-white-200": "rgba(255,255,255,0.09)", @@ -239,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)": { @@ -282,9 +299,12 @@ exports[`themes admin - theme shape 1`] = ` "background-contrast": "var(--color-background-contrast)", "background-current": "var(--color-background-current)", "background-disabled": "var(--color-background-disabled)", + "background-error": "var(--color-background-error)", "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)", @@ -315,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)", @@ -348,9 +369,11 @@ exports[`themes admin - theme shape 1`] = ` "primary-inverse": "var(--color-primary-inverse)", "red": "var(--color-red)", "red-0": "var(--color-red-0)", - "red-100": "var(--color-red-100)", + "red-300": "var(--color-red-300)", + "red-400": "var(--color-red-400)", "red-500": "var(--color-red-500)", "red-600": "var(--color-red-600)", + "red-900": "var(--color-red-900)", "secondary": "var(--color-secondary)", "secondary-hover": "var(--color-secondary-hover)", "shadow-primary": "var(--color-shadow-primary)", @@ -371,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)", @@ -417,16 +441,19 @@ monospace", "background-contrast": "black", "background-current": "navy-800", "background-disabled": "white-200", + "background-error": "red-900", "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", "border-tertiary": "white-300", - "danger": "red-0", - "danger-hover": "red-100", - "feedback-error": "red-0", + "danger": "red-300", + "danger-hover": "red-400", + "feedback-error": "red-300", "feedback-success": "green-400", "feedback-warning": "yellow-0", "interface": "yellow-500", @@ -448,9 +475,12 @@ monospace", "background-contrast": "white", "background-current": "white", "background-disabled": "navy-200", + "background-error": "red-0", "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", @@ -517,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", @@ -544,10 +575,12 @@ exports[`themes core - theme shape 1`] = ` "pink-0": "#FFF5FF", "pink-400": "#F966FF", "red": "#E91C11", - "red-0": "#E85D7F", - "red-100": "#DC5879", + "red-0": "#FBF1F0", + "red-300": "#E85D7F", + "red-400": "#DC5879", "red-500": "#E91C11", "red-600": "#BE1809", + "red-900": "#280503", "white": "#ffffff", "white-100": "rgba(255,255,255,0.04)", "white-200": "rgba(255,255,255,0.09)", @@ -560,6 +593,7 @@ exports[`themes core - theme shape 1`] = ` "yellow-0": "#FFFAE5", "yellow-400": "#CCA900", "yellow-500": "#FFD300", + "yellow-900": "#211B00", }, "elements": { "headerHeight": { @@ -574,9 +608,12 @@ exports[`themes core - theme shape 1`] = ` "background-contrast": "#000000", "background-current": "#10162F", "background-disabled": "rgba(255,255,255,0.09)", + "background-error": "#280503", "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)", @@ -605,9 +642,12 @@ exports[`themes core - theme shape 1`] = ` "background-contrast": "#ffffff", "background-current": "#ffffff", "background-disabled": "rgba(16,22,47,0.12)", + "background-error": "#FBF1F0", "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)", @@ -639,9 +679,12 @@ exports[`themes core - theme shape 1`] = ` "--color-background-contrast": "var(--color-white)", "--color-background-current": "var(--color-white)", "--color-background-disabled": "var(--color-navy-200)", + "--color-background-error": "var(--color-red-0)", "--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)", @@ -687,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", @@ -714,10 +758,12 @@ exports[`themes core - theme shape 1`] = ` "--color-pink-0": "#FFF5FF", "--color-pink-400": "#F966FF", "--color-red": "#E91C11", - "--color-red-0": "#E85D7F", - "--color-red-100": "#DC5879", + "--color-red-0": "#FBF1F0", + "--color-red-300": "#E85D7F", + "--color-red-400": "#DC5879", "--color-red-500": "#E91C11", "--color-red-600": "#BE1809", + "--color-red-900": "#280503", "--color-white": "#ffffff", "--color-white-100": "rgba(255,255,255,0.04)", "--color-white-200": "rgba(255,255,255,0.09)", @@ -730,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)": { @@ -773,9 +820,12 @@ exports[`themes core - theme shape 1`] = ` "background-contrast": "var(--color-background-contrast)", "background-current": "var(--color-background-current)", "background-disabled": "var(--color-background-disabled)", + "background-error": "var(--color-background-error)", "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)", @@ -806,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)", @@ -839,9 +890,11 @@ exports[`themes core - theme shape 1`] = ` "primary-inverse": "var(--color-primary-inverse)", "red": "var(--color-red)", "red-0": "var(--color-red-0)", - "red-100": "var(--color-red-100)", + "red-300": "var(--color-red-300)", + "red-400": "var(--color-red-400)", "red-500": "var(--color-red-500)", "red-600": "var(--color-red-600)", + "red-900": "var(--color-red-900)", "secondary": "var(--color-secondary)", "secondary-hover": "var(--color-secondary-hover)", "shadow-primary": "var(--color-shadow-primary)", @@ -862,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)", @@ -908,16 +962,19 @@ monospace", "background-contrast": "black", "background-current": "navy-800", "background-disabled": "white-200", + "background-error": "red-900", "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", "border-tertiary": "white-300", - "danger": "red-0", - "danger-hover": "red-100", - "feedback-error": "red-0", + "danger": "red-300", + "danger-hover": "red-400", + "feedback-error": "red-300", "feedback-success": "green-400", "feedback-warning": "yellow-0", "interface": "yellow-500", @@ -939,9 +996,12 @@ monospace", "background-contrast": "white", "background-current": "white", "background-disabled": "navy-200", + "background-error": "red-0", "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", @@ -998,6 +1058,8 @@ exports[`themes platform - theme shape 1`] = ` "blue-400": "#3388FF", "blue-500": "#1557FF", "blue-800": "#1D2340", + "comment-dark": "#84868D", + "comment-light": "#686C7B", "gold": "#8A7300", "gold-800": "#8A7300", "gray-100": "#F5F5F5", @@ -1011,12 +1073,21 @@ 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", + "indent-active-dark": "#3B3D49", + "indent-active-light": "#BCBDC4", + "indent-inactive-dark": "#5F616B", + "indent-inactive-light": "#8E919D", "lightBeige": "#FFFBF8", "lightBlue": "#66C4FF", "lightGreen": "#AEE938", + "line-number-active-dark": "#CECFD2", + "line-number-active-light": "#31374C", + "line-number-inactive-dark": "#84868D", + "line-number-inactive-light": "#686C7B", "navy": "#10162F", "navy-100": "rgba(16,22,47,0.04)", "navy-200": "rgba(16,22,47,0.12)", @@ -1043,12 +1114,14 @@ exports[`themes platform - theme shape 1`] = ` "purple": "#B3CCFF", "purple-300": "#B3CCFF", "red": "#E91C11", - "red-0": "#E85D7F", - "red-100": "#DC5879", + "red-0": "#FBF1F0", + "red-300": "#E85D7F", + "red-400": "#DC5879", "red-500": "#E91C11", "red-600": "#BE1809", - "teal": "#027E97", - "teal-500": "#027E97", + "red-900": "#280503", + "teal": "#006D82", + "teal-500": "#006D82", "white": "#ffffff", "white-100": "rgba(255,255,255,0.04)", "white-200": "rgba(255,255,255,0.09)", @@ -1061,6 +1134,7 @@ exports[`themes platform - theme shape 1`] = ` "yellow-0": "#FFFAE5", "yellow-400": "#CCA900", "yellow-500": "#FFD300", + "yellow-900": "#211B00", }, "elements": { "headerHeight": { @@ -1075,9 +1149,12 @@ exports[`themes platform - theme shape 1`] = ` "background-contrast": "#000000", "background-current": "#10162F", "background-disabled": "rgba(255,255,255,0.09)", + "background-error": "#280503", "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)", @@ -1088,7 +1165,7 @@ exports[`themes platform - theme shape 1`] = ` "editor-atom": "#F966FF", "editor-attribute": "#AEE938", "editor-basic": "#ffffff", - "editor-comment": "#9E9E9E", + "editor-comment": "#84868D", "editor-constant": "#FF8C00", "editor-decoration": "#E85D7F", "editor-invalid": "#E85D7F", @@ -1103,9 +1180,10 @@ exports[`themes platform - theme shape 1`] = ` "editor-tag": "#E85D7F", "editor-text": "#FF8C00", "editor-ui-background": "#0A0D1C", - "editor-ui-indent-active": "#424242", - "editor-ui-indent-inactive": "#616161", - "editor-ui-line-number": "#9E9E9E", + "editor-ui-indent-active": "#3B3D49", + "editor-ui-indent-inactive": "#5F616B", + "editor-ui-line-number-active": "#CECFD2", + "editor-ui-line-number-inactive": "#84868D", "editor-ui-text": "#ffffff", "editor-value": "#FFD300", "editor-variable": "#AEE938", @@ -1131,9 +1209,12 @@ exports[`themes platform - theme shape 1`] = ` "background-contrast": "#ffffff", "background-current": "#ffffff", "background-disabled": "rgba(16,22,47,0.12)", + "background-error": "#FBF1F0", "background-hover": "rgba(16,22,47,0.12)", - "background-primary": "#FFF0E5", + "background-primary": "#F5FCFF", "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)", @@ -1144,11 +1225,11 @@ exports[`themes platform - theme shape 1`] = ` "editor-atom": "#CA00D1", "editor-attribute": "#008A27", "editor-basic": "#10162F", - "editor-comment": "rgba(16,22,47,0.28)", + "editor-comment": "#686C7B", "editor-constant": "#D14900", "editor-decoration": "#E91C11", "editor-invalid": "#E91C11", - "editor-key": "#027E97", + "editor-key": "#006D82", "editor-keyword": "#1557FF", "editor-number": "#E91C11", "editor-operator": "#E91C11", @@ -1159,9 +1240,10 @@ exports[`themes platform - theme shape 1`] = ` "editor-tag": "#E91C11", "editor-text": "#D14900", "editor-ui-background": "#ffffff", - "editor-ui-indent-active": "#0A0D1C", - "editor-ui-indent-inactive": "rgba(16,22,47,0.75)", - "editor-ui-line-number": "rgba(16,22,47,0.28)", + "editor-ui-indent-active": "#BCBDC4", + "editor-ui-indent-inactive": "#8E919D", + "editor-ui-line-number-active": "#31374C", + "editor-ui-line-number-inactive": "#686C7B", "editor-ui-text": "#10162F", "editor-value": "#8A7300", "editor-variable": "#008A27", @@ -1190,41 +1272,45 @@ exports[`themes platform - theme shape 1`] = ` "--color-background-contrast": "var(--color-black)", "--color-background-current": "var(--color-navy-800)", "--color-background-disabled": "var(--color-white-200)", + "--color-background-error": "var(--color-red-900)", "--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)", "--color-border-tertiary": "var(--color-white-300)", - "--color-danger": "var(--color-red-0)", - "--color-danger-hover": "var(--color-red-100)", - "--color-editor-annotation": "var(--color-red-0)", + "--color-danger": "var(--color-red-300)", + "--color-danger-hover": "var(--color-red-400)", + "--color-editor-annotation": "var(--color-red-300)", "--color-editor-atom": "var(--color-pink-400)", "--color-editor-attribute": "var(--color-green-400)", "--color-editor-basic": "var(--color-white)", - "--color-editor-comment": "var(--color-gray-600)", + "--color-editor-comment": "var(--color-comment-dark)", "--color-editor-constant": "var(--color-orange-500)", - "--color-editor-decoration": "var(--color-red-0)", - "--color-editor-invalid": "var(--color-red-0)", + "--color-editor-decoration": "var(--color-red-300)", + "--color-editor-invalid": "var(--color-red-300)", "--color-editor-key": "var(--color-blue-300)", "--color-editor-keyword": "var(--color-purple-300)", - "--color-editor-number": "var(--color-red-0)", - "--color-editor-operator": "var(--color-red-0)", + "--color-editor-number": "var(--color-red-300)", + "--color-editor-operator": "var(--color-red-300)", "--color-editor-predefined": "var(--color-white)", - "--color-editor-property": "var(--color-red-0)", + "--color-editor-property": "var(--color-red-300)", "--color-editor-regexp": "var(--color-green-400)", "--color-editor-string": "var(--color-yellow-500)", - "--color-editor-tag": "var(--color-red-0)", + "--color-editor-tag": "var(--color-red-300)", "--color-editor-text": "var(--color-orange-500)", "--color-editor-ui-background": "var(--color-navy-900)", - "--color-editor-ui-indent-active": "var(--color-gray-900)", - "--color-editor-ui-indent-inactive": "var(--color-gray-800)", - "--color-editor-ui-line-number": "var(--color-gray-600)", + "--color-editor-ui-indent-active": "var(--color-indent-active-dark)", + "--color-editor-ui-indent-inactive": "var(--color-indent-inactive-dark)", + "--color-editor-ui-line-number-active": "var(--color-line-number-active-dark)", + "--color-editor-ui-line-number-inactive": "var(--color-line-number-inactive-dark)", "--color-editor-ui-text": "var(--color-white)", "--color-editor-value": "var(--color-yellow-500)", "--color-editor-variable": "var(--color-green-400)", - "--color-feedback-error": "var(--color-red-0)", + "--color-feedback-error": "var(--color-red-300)", "--color-feedback-success": "var(--color-green-400)", "--color-feedback-warning": "var(--color-yellow-0)", "--color-interface": "var(--color-yellow-500)", @@ -1253,6 +1339,8 @@ exports[`themes platform - theme shape 1`] = ` "--color-blue-400": "#3388FF", "--color-blue-500": "#1557FF", "--color-blue-800": "#1D2340", + "--color-comment-dark": "#84868D", + "--color-comment-light": "#686C7B", "--color-gold": "#8A7300", "--color-gold-800": "#8A7300", "--color-gray-100": "#F5F5F5", @@ -1266,12 +1354,21 @@ 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", + "--color-indent-active-dark": "#3B3D49", + "--color-indent-active-light": "#BCBDC4", + "--color-indent-inactive-dark": "#5F616B", + "--color-indent-inactive-light": "#8E919D", "--color-lightBeige": "#FFFBF8", "--color-lightBlue": "#66C4FF", "--color-lightGreen": "#AEE938", + "--color-line-number-active-dark": "#CECFD2", + "--color-line-number-active-light": "#31374C", + "--color-line-number-inactive-dark": "#84868D", + "--color-line-number-inactive-light": "#686C7B", "--color-navy": "#10162F", "--color-navy-100": "rgba(16,22,47,0.04)", "--color-navy-200": "rgba(16,22,47,0.12)", @@ -1298,12 +1395,14 @@ exports[`themes platform - theme shape 1`] = ` "--color-purple": "#B3CCFF", "--color-purple-300": "#B3CCFF", "--color-red": "#E91C11", - "--color-red-0": "#E85D7F", - "--color-red-100": "#DC5879", + "--color-red-0": "#FBF1F0", + "--color-red-300": "#E85D7F", + "--color-red-400": "#DC5879", "--color-red-500": "#E91C11", "--color-red-600": "#BE1809", - "--color-teal": "#027E97", - "--color-teal-500": "#027E97", + "--color-red-900": "#280503", + "--color-teal": "#006D82", + "--color-teal-500": "#006D82", "--color-white": "#ffffff", "--color-white-100": "rgba(255,255,255,0.04)", "--color-white-200": "rgba(255,255,255,0.09)", @@ -1316,6 +1415,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)": { @@ -1359,9 +1459,12 @@ exports[`themes platform - theme shape 1`] = ` "background-contrast": "var(--color-background-contrast)", "background-current": "var(--color-background-current)", "background-disabled": "var(--color-background-disabled)", + "background-error": "var(--color-background-error)", "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)", @@ -1377,6 +1480,8 @@ exports[`themes platform - theme shape 1`] = ` "border-primary": "var(--color-border-primary)", "border-secondary": "var(--color-border-secondary)", "border-tertiary": "var(--color-border-tertiary)", + "comment-dark": "var(--color-comment-dark)", + "comment-light": "var(--color-comment-light)", "danger": "var(--color-danger)", "danger-hover": "var(--color-danger-hover)", "editor-annotation": "var(--color-editor-annotation)", @@ -1400,7 +1505,8 @@ exports[`themes platform - theme shape 1`] = ` "editor-ui-background": "var(--color-editor-ui-background)", "editor-ui-indent-active": "var(--color-editor-ui-indent-active)", "editor-ui-indent-inactive": "var(--color-editor-ui-indent-inactive)", - "editor-ui-line-number": "var(--color-editor-ui-line-number)", + "editor-ui-line-number-active": "var(--color-editor-ui-line-number-active)", + "editor-ui-line-number-inactive": "var(--color-editor-ui-line-number-inactive)", "editor-ui-text": "var(--color-editor-ui-text)", "editor-value": "var(--color-editor-value)", "editor-variable": "var(--color-editor-variable)", @@ -1420,14 +1526,23 @@ 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)", + "indent-active-dark": "var(--color-indent-active-dark)", + "indent-active-light": "var(--color-indent-active-light)", + "indent-inactive-dark": "var(--color-indent-inactive-dark)", + "indent-inactive-light": "var(--color-indent-inactive-light)", "interface": "var(--color-interface)", "interface-hover": "var(--color-interface-hover)", "lightBeige": "var(--color-lightBeige)", "lightBlue": "var(--color-lightBlue)", "lightGreen": "var(--color-lightGreen)", + "line-number-active-dark": "var(--color-line-number-active-dark)", + "line-number-active-light": "var(--color-line-number-active-light)", + "line-number-inactive-dark": "var(--color-line-number-inactive-dark)", + "line-number-inactive-light": "var(--color-line-number-inactive-light)", "navy": "var(--color-navy)", "navy-100": "var(--color-navy-100)", "navy-200": "var(--color-navy-200)", @@ -1458,9 +1573,11 @@ exports[`themes platform - theme shape 1`] = ` "purple-300": "var(--color-purple-300)", "red": "var(--color-red)", "red-0": "var(--color-red-0)", - "red-100": "var(--color-red-100)", + "red-300": "var(--color-red-300)", + "red-400": "var(--color-red-400)", "red-500": "var(--color-red-500)", "red-600": "var(--color-red-600)", + "red-900": "var(--color-red-900)", "secondary": "var(--color-secondary)", "secondary-hover": "var(--color-secondary-hover)", "shadow-primary": "var(--color-shadow-primary)", @@ -1483,6 +1600,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)", @@ -1529,41 +1647,45 @@ monospace", "background-contrast": "black", "background-current": "navy-800", "background-disabled": "white-200", + "background-error": "red-900", "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", "border-tertiary": "white-300", - "danger": "red-0", - "danger-hover": "red-100", - "editor-annotation": "red-0", + "danger": "red-300", + "danger-hover": "red-400", + "editor-annotation": "red-300", "editor-atom": "pink-400", "editor-attribute": "green-400", "editor-basic": "white", - "editor-comment": "gray-600", + "editor-comment": "comment-dark", "editor-constant": "orange-500", - "editor-decoration": "red-0", - "editor-invalid": "red-0", + "editor-decoration": "red-300", + "editor-invalid": "red-300", "editor-key": "blue-300", "editor-keyword": "purple-300", - "editor-number": "red-0", - "editor-operator": "red-0", + "editor-number": "red-300", + "editor-operator": "red-300", "editor-predefined": "white", - "editor-property": "red-0", + "editor-property": "red-300", "editor-regexp": "green-400", "editor-string": "yellow-500", - "editor-tag": "red-0", + "editor-tag": "red-300", "editor-text": "orange-500", "editor-ui-background": "navy-900", - "editor-ui-indent-active": "gray-900", - "editor-ui-indent-inactive": "gray-800", - "editor-ui-line-number": "gray-600", + "editor-ui-indent-active": "indent-active-dark", + "editor-ui-indent-inactive": "indent-inactive-dark", + "editor-ui-line-number-active": "line-number-active-dark", + "editor-ui-line-number-inactive": "line-number-inactive-dark", "editor-ui-text": "white", "editor-value": "yellow-500", "editor-variable": "green-400", - "feedback-error": "red-0", + "feedback-error": "red-300", "feedback-success": "green-400", "feedback-warning": "yellow-0", "interface": "yellow-500", @@ -1585,9 +1707,12 @@ monospace", "background-contrast": "white", "background-current": "white", "background-disabled": "navy-200", + "background-error": "red-0", "background-hover": "navy-200", - "background-primary": "beige", + "background-primary": "blue-0", "background-selected": "navy-100", + "background-success": "green-0", + "background-warning": "yellow-0", "border-disabled": "navy-500", "border-primary": "navy-800", "border-secondary": "navy-600", @@ -1598,7 +1723,7 @@ monospace", "editor-atom": "pink-800", "editor-attribute": "green-700", "editor-basic": "navy-800", - "editor-comment": "navy-300", + "editor-comment": "comment-light", "editor-constant": "orange-800", "editor-decoration": "red-500", "editor-invalid": "red-500", @@ -1613,9 +1738,10 @@ monospace", "editor-tag": "red-500", "editor-text": "orange-800", "editor-ui-background": "white", - "editor-ui-indent-active": "navy-900", - "editor-ui-indent-inactive": "navy-600", - "editor-ui-line-number": "navy-300", + "editor-ui-indent-active": "indent-active-light", + "editor-ui-indent-inactive": "indent-inactive-light", + "editor-ui-line-number-active": "line-number-active-light", + "editor-ui-line-number-inactive": "line-number-inactive-light", "editor-ui-text": "navy-800", "editor-value": "gold-800", "editor-variable": "green-700", diff --git a/packages/gamut-styles/src/themes/core.ts b/packages/gamut-styles/src/themes/core.ts index 2518d5dee00..5b564ebfb27 100644 --- a/packages/gamut-styles/src/themes/core.ts +++ b/packages/gamut-styles/src/themes/core.ts @@ -50,6 +50,9 @@ export const coreTheme = createTheme({ selected: 'navy-100', disabled: 'navy-200', hover: 'navy-200', + success: 'green-0', + warning: 'yellow-0', + error: 'red-0', }, shadow: { primary: 'navy-800', @@ -87,7 +90,7 @@ export const coreTheme = createTheme({ secondary: 'white-600', }, feedback: { - error: 'red-0', + error: 'red-300', success: 'green-400', warning: 'yellow-0', }, @@ -99,6 +102,9 @@ export const coreTheme = createTheme({ selected: 'white-100', disabled: 'white-200', hover: 'white-200', + success: 'green-900', + warning: 'yellow-900', + error: 'red-900', }, shadow: { primary: 'white', @@ -114,8 +120,8 @@ export const coreTheme = createTheme({ hover: 'white-700', }, danger: { - _: 'red-0', - hover: 'red-100', + _: 'red-300', + hover: 'red-400', }, interface: { _: 'yellow-500', diff --git a/packages/gamut-styles/src/themes/platform.ts b/packages/gamut-styles/src/themes/platform.ts index fe8d28a7c65..8ce5e5e99a0 100644 --- a/packages/gamut-styles/src/themes/platform.ts +++ b/packages/gamut-styles/src/themes/platform.ts @@ -12,12 +12,15 @@ export const platformTheme = createTheme(coreTheme) .addColors(platformPalette) .addColorModes('dark', { light: { + background: { + primary: 'blue-0', + }, editor: { attribute: 'green-700', annotation: 'red-500', atom: 'pink-800', basic: 'navy-800', - comment: 'navy-300', + comment: 'comment-light', constant: 'orange-800', decoration: 'red-500', invalid: 'red-500', @@ -36,40 +39,42 @@ export const platformTheme = createTheme(coreTheme) ui: { background: 'white', text: 'navy-800', - 'indent-active': 'navy-900', - 'indent-inactive': 'navy-600', - 'line-number': 'navy-300', + 'indent-active': 'indent-active-light', + 'indent-inactive': 'indent-inactive-light', + 'line-number-active': 'line-number-active-light', + 'line-number-inactive': 'line-number-inactive-light', }, }, }, dark: { editor: { attribute: 'green-400', - annotation: 'red-0', + annotation: 'red-300', atom: 'pink-400', basic: 'white', - comment: 'gray-600', + comment: 'comment-dark', constant: 'orange-500', - decoration: 'red-0', - invalid: 'red-0', + decoration: 'red-300', + invalid: 'red-300', key: 'blue-300', keyword: 'purple-300', - number: 'red-0', - operator: 'red-0', + number: 'red-300', + operator: 'red-300', predefined: 'white', - property: 'red-0', + property: 'red-300', regexp: 'green-400', string: 'yellow-500', - tag: 'red-0', + tag: 'red-300', text: 'orange-500', value: 'yellow-500', variable: 'green-400', ui: { background: 'navy-900', text: 'white', - 'indent-active': 'gray-900', - 'indent-inactive': 'gray-800', - 'line-number': 'gray-600', + 'indent-active': 'indent-active-dark', + 'indent-inactive': 'indent-inactive-dark', + 'line-number-active': 'line-number-active-dark', + 'line-number-inactive': 'line-number-inactive-dark', }, }, }, diff --git a/packages/gamut-styles/src/variables/colors.ts b/packages/gamut-styles/src/variables/colors.ts index 221bdda355f..9ed4dcd3df8 100644 --- a/packages/gamut-styles/src/variables/colors.ts +++ b/packages/gamut-styles/src/variables/colors.ts @@ -36,21 +36,25 @@ export const coreSwatches = { '100': '#EAFDC6', '400': '#AEE938', '700': '#008A27', + '900': '#151C07', }, yellow: { '0': '#FFFAE5', '400': '#CCA900', '500': '#FFD300', + '900': '#211B00', }, pink: { '0': '#FFF5FF', '400': '#F966FF', }, red: { - '0': '#E85D7F', - '100': '#DC5879', + '0': '#FBF1F0', + '300': '#E85D7F', + '400': '#DC5879', '500': '#E91C11', '600': '#BE1809', + '900': '#280503', }, orange: { '100': '#FFE8CC', @@ -93,7 +97,7 @@ export const trueColors = { palePink: coreSwatches.pink[0], paleYellow: coreSwatches.yellow[0], pink: coreSwatches.pink[400], - paleRed: coreSwatches.red[100], + paleRed: coreSwatches.red[400], red: coreSwatches.red[500], yellow: coreSwatches.yellow[500], black, @@ -123,7 +127,7 @@ export const platformSwatches = { '800': '#CA00D1', }, teal: { - '500': '#027E97', + '500': '#006D82', }, purple: { '300': '#B3CCFF', @@ -137,8 +141,22 @@ export const truePlatformColors = { purple: platformSwatches.purple[300], } as const; +export const platformEditorColors = { + 'comment-light': '#686C7B', + 'comment-dark': '#84868D', + 'indent-active-light': '#BCBDC4', + 'indent-active-dark': '#3B3D49', + 'indent-inactive-light': '#8E919D', + 'indent-inactive-dark': '#5F616B', + 'line-number-active-light': '#31374C', + 'line-number-active-dark': '#CECFD2', + 'line-number-inactive-light': '#686C7B', + 'line-number-inactive-dark': '#84868D', +} as const; + export const platformPalette = { ...flattenScale(platformSwatches), + ...platformEditorColors, ...truePlatformColors, } as const; diff --git a/packages/gamut/src/Badge/index.tsx b/packages/gamut/src/Badge/index.tsx index e247c9b822e..04bd54a67c7 100644 --- a/packages/gamut/src/Badge/index.tsx +++ b/packages/gamut/src/Badge/index.tsx @@ -130,54 +130,3 @@ export const Badge: React.FC = ({ icon, children, ...rest }) => { }); return {content}; }; - -// FOR TESTING PROPS -/* -export const TestBadgeCustomBackground = () => ( - - ✅ this works, no TS errors - -) - -export const TestBadgeCustomBg = () => ( - - ✅ this works, no TS errors - -) - -export const TestBadgeIncorrectCustomBg = () => ( - - ✅ this works, gets TS errors when both bg and background are used - -) - - -export const TestBadgeIncorrectVariantBg = () => ( - - ✅ this works, gets TS errors when both a variant and bg are used - -) - - -export const TestBadgeIncorrectVariantBackground = () => ( - - ✅ this works, gets TS errors when both a variant and background are used - -) -*/ diff --git a/packages/styleguide/src/lib/Foundations/Theme/PlatformTheme.mdx b/packages/styleguide/src/lib/Foundations/Theme/PlatformTheme.mdx index 5fd644585c7..4170e956d9b 100644 --- a/packages/styleguide/src/lib/Foundations/Theme/PlatformTheme.mdx +++ b/packages/styleguide/src/lib/Foundations/Theme/PlatformTheme.mdx @@ -73,6 +73,20 @@ Swatch colors are accessible with a dashcase key `theme.colors['${color}-${weigh +### Platform editor colors + +There are some additional colors that are used specifically for the Monaco code editor in the Learning Environment. Since these colors must be in 6 digit hex format, they cannot use the original color tokens with RGBA values. Instead, the original values were converted to 6 digit hex using the respective light and dark mode background colors. + +The original colors being: + +- comment: `navy-500` (light) and `white-500` (dark) +- indent-active: `navy-300` (light) and `white-300` (dark) +- indent-inactive: `navy-400` (light) and `white-400` (dark) +- line-number-active: `navy-700` (light) and `white-700` (dark) +- line-number-inactive: `navy-500` (light) and `white-500` (dark) + + + ### Standard colors Standard color atoms we select from in creating designs. All colors on Codecademy properties should adhere to these. Remember your accessibility contrast requirements too! diff --git a/packages/styleguide/src/lib/Foundations/shared/platformElements.tsx b/packages/styleguide/src/lib/Foundations/shared/platformElements.tsx index 8db8c9da10d..054050099fb 100644 --- a/packages/styleguide/src/lib/Foundations/shared/platformElements.tsx +++ b/packages/styleguide/src/lib/Foundations/shared/platformElements.tsx @@ -1,5 +1,6 @@ import { Background, + platformEditorColors, platformSwatches, platformTheme, truePlatformColors, @@ -58,6 +59,28 @@ export const platformColor = { ], }; +export const platformEditorColor = { + rows: Object.entries(platformEditorColors).map(([id, value]) => ({ + id, + hex: value, + })), + columns: [ + { ...PROP_COLUMN, size: 'lg' }, + { + ...PATH_COLUMN, + render: ({ id }: any) => ( + theme.colors{applyCorrectNotation({ id })} + ), + }, + { + key: 'swatch', + name: 'Swatch', + size: 'fill', + render: ({ hex }: any) => , + }, + ], +}; + export const platformLightMode = { rows: Object.entries(platformTheme.modes.light).map(([id, value]) => ({ id,