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 c28e7edf2b..7f7e35e391 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 @@ -89,6 +89,10 @@ 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)", + "border-disabled": "rgba(255,255,255,0.5)", + "border-primary": "#ffffff", + "border-secondary": "rgba(255,255,255,0.65)", + "border-tertiary": "rgba(255,255,255,0.2)", "danger": "#E85D7F", "danger-hover": "#DC5879", "feedback-error": "#E85D7F", @@ -116,6 +120,10 @@ 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)", + "border-disabled": "rgba(16,22,47,0.63)", + "border-primary": "#10162F", + "border-secondary": "rgba(16,22,47,0.75)", + "border-tertiary": "rgba(16,22,47,0.28)", "danger": "#E91C11", "danger-hover": "#BE1809", "feedback-error": "#BE1809", @@ -146,6 +154,10 @@ 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-border-disabled": "var(--color-navy-500)", + "--color-border-primary": "var(--color-navy-800)", + "--color-border-secondary": "var(--color-navy-600)", + "--color-border-tertiary": "var(--color-navy-300)", "--color-danger": "var(--color-red-500)", "--color-danger-hover": "var(--color-red-600)", "--color-feedback-error": "var(--color-red-600)", @@ -261,8 +273,8 @@ exports[`themes admin - theme shape 1`] = ` "xl": "16px", }, "borders": { - "1": "1px solid var(--color-secondary)", - "2": "2px solid var(--color-secondary)", + "1": "1px solid var(--color-border-primary)", + "2": "2px solid var(--color-border-primary)", }, "breakpoints": { "lg": "@media only screen and (min-width: 1200px)", @@ -289,6 +301,10 @@ exports[`themes admin - theme shape 1`] = ` "blue-400": "var(--color-blue-400)", "blue-500": "var(--color-blue-500)", "blue-800": "var(--color-blue-800)", + "border-disabled": "var(--color-border-disabled)", + "border-primary": "var(--color-border-primary)", + "border-secondary": "var(--color-border-secondary)", + "border-tertiary": "var(--color-border-tertiary)", "danger": "var(--color-danger)", "danger-hover": "var(--color-danger-hover)", "feedback-error": "var(--color-feedback-error)", @@ -413,6 +429,10 @@ monospace", "background-hover": "white-200", "background-primary": "navy-900", "background-selected": "white-100", + "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", @@ -440,6 +460,10 @@ monospace", "background-hover": "navy-200", "background-primary": "beige", "background-selected": "navy-100", + "border-disabled": "navy-500", + "border-primary": "navy-800", + "border-secondary": "navy-600", + "border-tertiary": "navy-300", "danger": "red-500", "danger-hover": "red-600", "feedback-error": "red-600", @@ -565,6 +589,10 @@ 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)", + "border-disabled": "rgba(255,255,255,0.5)", + "border-primary": "#ffffff", + "border-secondary": "rgba(255,255,255,0.65)", + "border-tertiary": "rgba(255,255,255,0.2)", "danger": "#E85D7F", "danger-hover": "#DC5879", "feedback-error": "#E85D7F", @@ -592,6 +620,10 @@ 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)", + "border-disabled": "rgba(16,22,47,0.63)", + "border-primary": "#10162F", + "border-secondary": "rgba(16,22,47,0.75)", + "border-tertiary": "rgba(16,22,47,0.28)", "danger": "#E91C11", "danger-hover": "#BE1809", "feedback-error": "#BE1809", @@ -622,6 +654,10 @@ 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-border-disabled": "var(--color-navy-500)", + "--color-border-primary": "var(--color-navy-800)", + "--color-border-secondary": "var(--color-navy-600)", + "--color-border-tertiary": "var(--color-navy-300)", "--color-danger": "var(--color-red-500)", "--color-danger-hover": "var(--color-red-600)", "--color-feedback-error": "var(--color-red-600)", @@ -737,8 +773,8 @@ exports[`themes core - theme shape 1`] = ` "xl": "16px", }, "borders": { - "1": "1px solid var(--color-secondary)", - "2": "2px solid var(--color-secondary)", + "1": "1px solid var(--color-border-primary)", + "2": "2px solid var(--color-border-primary)", }, "breakpoints": { "lg": "@media only screen and (min-width: 1200px)", @@ -765,6 +801,10 @@ exports[`themes core - theme shape 1`] = ` "blue-400": "var(--color-blue-400)", "blue-500": "var(--color-blue-500)", "blue-800": "var(--color-blue-800)", + "border-disabled": "var(--color-border-disabled)", + "border-primary": "var(--color-border-primary)", + "border-secondary": "var(--color-border-secondary)", + "border-tertiary": "var(--color-border-tertiary)", "danger": "var(--color-danger)", "danger-hover": "var(--color-danger-hover)", "feedback-error": "var(--color-feedback-error)", @@ -889,6 +929,10 @@ monospace", "background-hover": "white-200", "background-primary": "navy-900", "background-selected": "white-100", + "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", @@ -916,6 +960,10 @@ monospace", "background-hover": "navy-200", "background-primary": "beige", "background-selected": "navy-100", + "border-disabled": "navy-500", + "border-primary": "navy-800", + "border-secondary": "navy-600", + "border-tertiary": "navy-300", "danger": "red-500", "danger-hover": "red-600", "feedback-error": "red-600", @@ -1051,6 +1099,10 @@ 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)", + "border-disabled": "rgba(255,255,255,0.5)", + "border-primary": "#ffffff", + "border-secondary": "rgba(255,255,255,0.65)", + "border-tertiary": "rgba(255,255,255,0.2)", "danger": "#E85D7F", "danger-hover": "#DC5879", "editor-annotation": "#E85D7F", @@ -1103,6 +1155,10 @@ 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)", + "border-disabled": "rgba(16,22,47,0.63)", + "border-primary": "#10162F", + "border-secondary": "rgba(16,22,47,0.75)", + "border-tertiary": "rgba(16,22,47,0.28)", "danger": "#E91C11", "danger-hover": "#BE1809", "editor-annotation": "#E91C11", @@ -1158,6 +1214,10 @@ 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-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)", @@ -1308,8 +1368,8 @@ exports[`themes platform - theme shape 1`] = ` "xl": "16px", }, "borders": { - "1": "1px solid var(--color-secondary)", - "2": "2px solid var(--color-secondary)", + "1": "1px solid var(--color-border-primary)", + "2": "2px solid var(--color-border-primary)", }, "breakpoints": { "lg": "@media only screen and (min-width: 1200px)", @@ -1337,6 +1397,10 @@ exports[`themes platform - theme shape 1`] = ` "blue-400": "var(--color-blue-400)", "blue-500": "var(--color-blue-500)", "blue-800": "var(--color-blue-800)", + "border-disabled": "var(--color-border-disabled)", + "border-primary": "var(--color-border-primary)", + "border-secondary": "var(--color-border-secondary)", + "border-tertiary": "var(--color-border-tertiary)", "danger": "var(--color-danger)", "danger-hover": "var(--color-danger-hover)", "editor-annotation": "var(--color-editor-annotation)", @@ -1495,6 +1559,10 @@ monospace", "background-hover": "white-200", "background-primary": "navy-900", "background-selected": "white-100", + "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", @@ -1547,6 +1615,10 @@ monospace", "background-hover": "navy-200", "background-primary": "beige", "background-selected": "navy-100", + "border-disabled": "navy-500", + "border-primary": "navy-800", + "border-secondary": "navy-600", + "border-tertiary": "navy-300", "danger": "red-500", "danger-hover": "red-600", "editor-annotation": "red-500", diff --git a/packages/gamut-styles/src/themes/core.ts b/packages/gamut-styles/src/themes/core.ts index 834b3f060b..7e7bf4c005 100644 --- a/packages/gamut-styles/src/themes/core.ts +++ b/packages/gamut-styles/src/themes/core.ts @@ -72,6 +72,12 @@ export const coreTheme = createTheme({ _: 'hyper-500', hover: 'hyper-400', }, + border: { + primary: 'navy-800', + secondary: 'navy-600', + tertiary: 'navy-300', + disabled: 'navy-500', + } }, dark: { text: { @@ -115,11 +121,17 @@ export const coreTheme = createTheme({ _: 'yellow-500', hover: 'yellow-400', }, + border: { + primary: 'white', + secondary: 'white-600', + tertiary: 'white-300', + disabled: 'white-500', + } }, }) .addScale('borders', ({ colors }) => ({ - 1: `1px solid ${colors.secondary}`, - 2: `2px solid ${colors.secondary}`, + 1: `1px solid ${colors['border-primary']}`, + 2: `2px solid ${colors['border-primary']}`, })) .createScaleVariables('elements') .build(); diff --git a/packages/gamut/src/Badge/index.tsx b/packages/gamut/src/Badge/index.tsx index 96f5e55337..a55e7ef450 100644 --- a/packages/gamut/src/Badge/index.tsx +++ b/packages/gamut/src/Badge/index.tsx @@ -34,13 +34,13 @@ const colorVariants = variant({ }, tertiary: { border: 1, - borderColor: 'text-secondary', + borderColor: 'border-secondary', color: 'text-secondary', bg: 'transparent', }, tertiaryFill: { border: 1, - borderColor: 'text-secondary', + borderColor: 'border-secondary', color: 'text-secondary', bg: 'background', }, diff --git a/packages/gamut/src/Button/shared/variants.ts b/packages/gamut/src/Button/shared/variants.ts index c726cb845a..f99011970a 100644 --- a/packages/gamut/src/Button/shared/variants.ts +++ b/packages/gamut/src/Button/shared/variants.ts @@ -21,7 +21,7 @@ export const fillButtonVariants = templateVariants( transition: hoverBackgroundTransition, }, [ButtonSelectors.ACTIVE]: { - borderColor: 'text', + borderColor: 'border-primary', bg: variant, color: 'background', }, diff --git a/packages/gamut/src/Card/index.tsx b/packages/gamut/src/Card/index.tsx index 5dfc4e8afd..aec5273f2c 100644 --- a/packages/gamut/src/Card/index.tsx +++ b/packages/gamut/src/Card/index.tsx @@ -123,7 +123,7 @@ export const Card: React.FC = ({ variant, ...rest }) => { { borderTop="none" borderX="none" border={1} - borderColorBottom="text" + borderColorBottom="border-primary" data-testid="form-section-break" width="100%" /> diff --git a/packages/gamut/src/Pagination/styles.tsx b/packages/gamut/src/Pagination/styles.tsx index 6a823eecc9..b9f8177cb1 100644 --- a/packages/gamut/src/Pagination/styles.tsx +++ b/packages/gamut/src/Pagination/styles.tsx @@ -17,7 +17,7 @@ const paginationBaseStyles = { color: 'text-disabled', bg: 'transparent', }, - [ButtonSelectors.OUTLINE]: { borderColor: 'text' }, + [ButtonSelectors.OUTLINE]: { borderColor: 'border-primary' }, [ButtonSelectors.SHADOW_ACTIVE]: { opacity: 0 }, [ButtonSelectors.SHADOW_HOVER]: { opacity: 0 }, } as const; diff --git a/packages/gamut/src/ProgressBar/index.tsx b/packages/gamut/src/ProgressBar/index.tsx index 5ef162942c..af1de79379 100644 --- a/packages/gamut/src/ProgressBar/index.tsx +++ b/packages/gamut/src/ProgressBar/index.tsx @@ -90,11 +90,11 @@ const progressBarBackgroundVariants = variant({ variants: { blue: { bg: 'navy', - borderColor: 'navy', + borderColor: 'border-primary', }, yellow: { bg: 'gray-100', - borderColor: 'navy', + borderColor: 'border-primary', }, default: {}, }, diff --git a/packages/gamut/src/Tabs/TabButton.tsx b/packages/gamut/src/Tabs/TabButton.tsx index db10a59244..f1fee50ff6 100644 --- a/packages/gamut/src/Tabs/TabButton.tsx +++ b/packages/gamut/src/Tabs/TabButton.tsx @@ -58,7 +58,7 @@ const tabVariants = variant({ variants: { standard: { background: 'none', - borderColor: 'text', + borderColor: 'border-primary', borderLeft: 'none', borderRight: 'none', borderTop: 'none', diff --git a/packages/styleguide/.storybook/components/Headers/AboutHeader.tsx b/packages/styleguide/.storybook/components/Headers/AboutHeader.tsx index 3fb56c4320..6ed6c917c6 100644 --- a/packages/styleguide/.storybook/components/Headers/AboutHeader.tsx +++ b/packages/styleguide/.storybook/components/Headers/AboutHeader.tsx @@ -18,7 +18,7 @@ export const AboutHeader: React.FC = ({ = ({