From ad49cb412d51bfffec75017bb5188f4e35ac7255 Mon Sep 17 00:00:00 2001 From: sarahgm <38324334+sarahgm@users.noreply.github.com> Date: Fri, 14 Jul 2023 10:49:43 +0200 Subject: [PATCH 1/6] chore: rename text primary colors b2b theme (#3134) chore: rename text primary colors --- themes/theme-b2b/src/components/Button.styles.ts | 6 +++--- themes/theme-b2b/src/components/DatePicker.styles.ts | 2 +- themes/theme-b2b/src/components/ListBox.styles.ts | 4 ++-- themes/theme-b2b/src/components/Menu.styles.ts | 2 +- themes/theme-b2b/src/components/NumberField.styles.ts | 2 +- themes/theme-b2b/src/components/Slider.styles.ts | 4 ++-- themes/theme-b2b/src/components/Table.styles.ts | 4 ++-- themes/theme-b2b/src/components/Tabs.styles.ts | 2 +- themes/theme-b2b/src/components/TextArea.styles.ts | 2 +- themes/theme-b2b/src/root.ts | 2 +- themes/theme-b2b/src/tokens.ts | 5 +++-- 11 files changed, 18 insertions(+), 17 deletions(-) diff --git a/themes/theme-b2b/src/components/Button.styles.ts b/themes/theme-b2b/src/components/Button.styles.ts index c07b997699..0a4f4f0326 100644 --- a/themes/theme-b2b/src/components/Button.styles.ts +++ b/themes/theme-b2b/src/components/Button.styles.ts @@ -18,12 +18,12 @@ export const Button: ThemeComponent<'Button'> = cva( ], ghost: [ 'border-border-dark border border-solid', - 'text-text-primary', + 'text-text-body', 'hover:bg-bg-hover', ], - text: ['text-text-primary data-[hover]:bg-bg-hover'], + text: ['text-text-body data-[hover]:bg-bg-hover'], menu: [ - 'text-text-primary bg-bg-body hover:text-text-light hover:bg-bg-secondary-hover', + 'text-text-body bg-bg-body hover:text-text-light hover:bg-bg-secondary-hover', ], }, size: { diff --git a/themes/theme-b2b/src/components/DatePicker.styles.ts b/themes/theme-b2b/src/components/DatePicker.styles.ts index 28a5302e71..8480f3a03c 100644 --- a/themes/theme-b2b/src/components/DatePicker.styles.ts +++ b/themes/theme-b2b/src/components/DatePicker.styles.ts @@ -5,7 +5,7 @@ export const DatePicker: ThemeComponent<'DatePicker'> = { button: cva([ 'h-full w-9 p-0', 'flex items-center justify-center ', - 'text-text-primary/80', + 'text-text-body/80', 'data-[hover]:bg-bg-hover group-focus/field:bg-bg-hover group-focus/field:[&[aria-expanded=true]]:bg-bg-secondary focus-visible:border-none focus-visible:outline-0 group-focus/field:text-white data-[hover]:text-white', 'disabled:hidden', ]), diff --git a/themes/theme-b2b/src/components/ListBox.styles.ts b/themes/theme-b2b/src/components/ListBox.styles.ts index 794c1f8d7a..e17369b549 100644 --- a/themes/theme-b2b/src/components/ListBox.styles.ts +++ b/themes/theme-b2b/src/components/ListBox.styles.ts @@ -1,7 +1,7 @@ import { ThemeComponent, cva } from '@marigold/system'; // Make sure ListBox looks correct if is in an overlay -const font = 'font-body text-text-primary'; +const font = 'font-body text-text-body'; export const ListBox: ThemeComponent<'ListBox'> = { container: cva([ @@ -23,5 +23,5 @@ export const ListBox: ThemeComponent<'ListBox'> = { section: cva( '[&:nth-child(n+1)]:border-border-light outline-none [&:nth-child(n+1)]:border-t-[1px_solid]' ), - sectionTitle: cva('text-text-primary-light px-2 pt-2 text-sm'), + sectionTitle: cva('text-text-body-accent px-2 pt-2 text-sm'), }; diff --git a/themes/theme-b2b/src/components/Menu.styles.ts b/themes/theme-b2b/src/components/Menu.styles.ts index 71c58d99ce..32665fc26f 100644 --- a/themes/theme-b2b/src/components/Menu.styles.ts +++ b/themes/theme-b2b/src/components/Menu.styles.ts @@ -7,5 +7,5 @@ export const Menu: ThemeComponent<'Menu'> = { ' overflow-y-auto overflow-x-hidden', ]), item: cva('focus:bg-bg-focus cursor-pointer px-4 py-1 outline-none'), - section: cva('text-text-primary-light p-4 text-sm'), + section: cva('text-text-body-accent p-4 text-sm'), }; diff --git a/themes/theme-b2b/src/components/NumberField.styles.ts b/themes/theme-b2b/src/components/NumberField.styles.ts index 11260f495e..13a4ed8983 100644 --- a/themes/theme-b2b/src/components/NumberField.styles.ts +++ b/themes/theme-b2b/src/components/NumberField.styles.ts @@ -9,7 +9,7 @@ export const NumberField: ThemeComponent<'NumberField'> = { 'data-[error]:border-border-error data-[error]:shadow-shadow-error data-[error]:shadow-[0_0_0_1px]', ]), stepper: cva([ - 'text-text-primary w-7', + 'text-text-body w-7', 'border-border-light border-solid first-of-type:border-r', 'border-border-light border-solid last-of-type:border-l ', 'data-[disabled]:text-text-disabled', diff --git a/themes/theme-b2b/src/components/Slider.styles.ts b/themes/theme-b2b/src/components/Slider.styles.ts index 04e1c9e6f6..1b8c9c83f6 100644 --- a/themes/theme-b2b/src/components/Slider.styles.ts +++ b/themes/theme-b2b/src/components/Slider.styles.ts @@ -13,6 +13,6 @@ export const Slider: ThemeComponent<'Slider'> = { 'data-[focus]:border-border-focus', 'data-[disabled]:bg-bg-disabled data-[disabled]:border-border-disabled', ]), - label: cva('text-text-primary text-base font-normal'), - output: cva('text-text-primary text-base font-normal'), + label: cva('text-text-body text-base font-normal'), + output: cva('text-text-body text-base font-normal'), }; diff --git a/themes/theme-b2b/src/components/Table.styles.ts b/themes/theme-b2b/src/components/Table.styles.ts index 6a8cb1ac13..3d44a1a65f 100644 --- a/themes/theme-b2b/src/components/Table.styles.ts +++ b/themes/theme-b2b/src/components/Table.styles.ts @@ -5,7 +5,7 @@ export const Table: ThemeComponent<'Table'> = { header: cva( [ 'cursor-default border-b-[1px] p-4 text-left', - 'text-text-primary border-border-light', + 'text-text-body border-border-light', 'focus:outline-outline-focus', ], { @@ -24,7 +24,7 @@ export const Table: ThemeComponent<'Table'> = { ]), cell: cva( [ - 'text-text-primary border-border-light border-b-[1px] p-4', + 'text-text-body border-border-light border-b-[1px] p-4', 'focus:outline-outline-focus', ], { diff --git a/themes/theme-b2b/src/components/Tabs.styles.ts b/themes/theme-b2b/src/components/Tabs.styles.ts index 70e73d160b..cba495cd9e 100644 --- a/themes/theme-b2b/src/components/Tabs.styles.ts +++ b/themes/theme-b2b/src/components/Tabs.styles.ts @@ -5,7 +5,7 @@ export const Tabs: ThemeComponent<'Tabs'> = { tab: cva( [ 'min-h-[40px]', - 'data-[hover]:text-text-primary data-[hover]:border-b-border-hover data-[hover]:border-b-8 data-[hover]:border-solid', + 'data-[hover]:text-text-body data-[hover]:border-b-border-hover data-[hover]:border-b-8 data-[hover]:border-solid', 'aria-disabled:text-text-disabled ', 'aria-selected:border-b-border-focus aria-selected:border-b-8 aria-selected:border-solid', ], diff --git a/themes/theme-b2b/src/components/TextArea.styles.ts b/themes/theme-b2b/src/components/TextArea.styles.ts index 9e5e213dfb..46f577b0b4 100644 --- a/themes/theme-b2b/src/components/TextArea.styles.ts +++ b/themes/theme-b2b/src/components/TextArea.styles.ts @@ -1,7 +1,7 @@ import { ThemeComponent, cva } from '@marigold/system'; export const TextArea: ThemeComponent<'TextArea'> = cva([ - 'text-text-primary font-body leading-8', + 'text-text-body font-body leading-8', 'border-border-light rounded-sm border outline-none', 'px-2 py-0', 'hover:border-border-hover', diff --git a/themes/theme-b2b/src/root.ts b/themes/theme-b2b/src/root.ts index 6187c8e12c..3e575b0b28 100644 --- a/themes/theme-b2b/src/root.ts +++ b/themes/theme-b2b/src/root.ts @@ -1,4 +1,4 @@ import { Theme, cva } from '@marigold/system'; export const root: Theme['root'] = cva( - 'font-body text-text-primary bg-bg-body m-0 p-0' + 'font-body text-text-body bg-bg-body m-0 p-0' ); diff --git a/themes/theme-b2b/src/tokens.ts b/themes/theme-b2b/src/tokens.ts index 43a1f19088..4190c962b3 100644 --- a/themes/theme-b2b/src/tokens.ts +++ b/themes/theme-b2b/src/tokens.ts @@ -92,10 +92,11 @@ export const colors = { // Text // --------------- text: { - primary: { + body: { DEFAULT: brand.secondary[700], - light: brand.secondary[500], + accent: brand.secondary[500], }, + link: brand.blue[400], light: brand.secondary[100], From 1d0fd2ac5e45a9a05ef311fc811b9e6049535641 Mon Sep 17 00:00:00 2001 From: Sebastian Sebald Date: Fri, 14 Jul 2023 11:54:52 +0200 Subject: [PATCH 2/6] fix: `` component doesn't enforce defaults (#3137) --- .changeset/nervous-rules-admire.md | 5 +++++ packages/components/src/Text/Text.test.tsx | 17 +++++++++-------- packages/components/src/Text/Text.tsx | 20 ++++++++++---------- 3 files changed, 24 insertions(+), 18 deletions(-) create mode 100644 .changeset/nervous-rules-admire.md diff --git a/.changeset/nervous-rules-admire.md b/.changeset/nervous-rules-admire.md new file mode 100644 index 0000000000..9e50863e4d --- /dev/null +++ b/.changeset/nervous-rules-admire.md @@ -0,0 +1,5 @@ +--- +"@marigold/components": patch +--- + +fix: `` component doesn't enforce defaults diff --git a/packages/components/src/Text/Text.test.tsx b/packages/components/src/Text/Text.test.tsx index c9f5ebfcf5..ae49d4a507 100644 --- a/packages/components/src/Text/Text.test.tsx +++ b/packages/components/src/Text/Text.test.tsx @@ -6,13 +6,13 @@ import { Text } from './Text'; const theme: Theme = { name: 'test', colors: { - emerald: 'rgb(5 150 105);', + emerald: 'rgb(5 150 105)', }, components: { - Text: cva("font-['Oswald_Regular']", { + Text: cva('font-["Oswald_Regular"]', { variants: { variant: { - one: 'font-["Arial]"', + one: 'font-["Arial"]', }, }, }), @@ -26,7 +26,7 @@ test('uses base as default variant', () => { ); const text = screen.getByText(/text/); - expect(text).toHaveClass(`font-['Oswald_Regular']`); + expect(text).toHaveClass(`font-["Oswald_Regular"]`); }); test('uses theme styles', () => { @@ -38,7 +38,7 @@ test('uses theme styles', () => { const text = screen.getByText(/text/); expect(text.className).toMatchInlineSnapshot( - `"font-["Arial]" text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"` + `"font-["Arial"] text-[--color] outline-[--outline]"` ); }); @@ -64,8 +64,9 @@ test('style props override theme styles', () => { const text = screen.getByText(/text/); expect(text.className).toMatchInlineSnapshot( - `"font-["Arial]" text-[--color] outline-[--outline] not-italic cursor-default font-normal text-[13px]"` + `"font-["Arial"] text-[--color] outline-[--outline]"` ); + expect(text.style.cssText).toMatchInlineSnapshot(`"--color: red-700;"`); }); test('get theme color', () => { @@ -78,9 +79,9 @@ test('get theme color', () => { const text = screen.getByTestId('text'); expect(text).toMatchInlineSnapshot(`

`); }); diff --git a/packages/components/src/Text/Text.tsx b/packages/components/src/Text/Text.tsx index d6ec01d6ef..3e20181c67 100644 --- a/packages/components/src/Text/Text.tsx +++ b/packages/components/src/Text/Text.tsx @@ -39,11 +39,11 @@ export const Text = ({ variant, size, color, - align = 'none', - cursor = 'default', - weight = 'normal', - fontSize = 'xs', - fontStyle = 'normal', + align, + cursor, + weight, + fontSize, + fontStyle, children, ...props }: TextProps) => { @@ -60,11 +60,11 @@ export const Text = ({ className={cn( classNames, 'text-[--color] outline-[--outline]', - textStyle[fontStyle], - textAlign[align], - cursorStyle[cursor], - fontWeight[weight], - textSize[fontSize] + fontStyle && textStyle[fontStyle], + align && textAlign[align], + cursor && cursorStyle[cursor], + weight && fontWeight[weight], + fontSize && textSize[fontSize] )} style={createVar({ color: From 51178da9ba5448f7d9b87dc6225d3b14b21bf63b Mon Sep 17 00:00:00 2001 From: sarahgm <38324334+sarahgm@users.noreply.github.com> Date: Mon, 17 Jul 2023 08:33:56 +0200 Subject: [PATCH 3/6] chore: change bg-focus token b2b theme (#3140) --- themes/theme-b2b/src/tokens.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/themes/theme-b2b/src/tokens.ts b/themes/theme-b2b/src/tokens.ts index 4190c962b3..562d5191cf 100644 --- a/themes/theme-b2b/src/tokens.ts +++ b/themes/theme-b2b/src/tokens.ts @@ -149,7 +149,7 @@ export const colors = { // State disabled: brand.secondary[200], hover: { DEFAULT: brand.secondary[400], light: brand.secondary[200] }, - focus: brand.primary[200], + focus: brand.secondary[200], selected: { DEFAULT: brand.primary[100], input: brand.primary[600], From fbecdd8a5da4cf0ac4f97dc15004f0e74b91cfe8 Mon Sep 17 00:00:00 2001 From: sarahgm <38324334+sarahgm@users.noreply.github.com> Date: Mon, 17 Jul 2023 08:34:38 +0200 Subject: [PATCH 4/6] chore: add divider variant to menuSection (#3139) --- packages/components/src/Menu/MenuSection.tsx | 2 +- themes/theme-b2b/src/tokens.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/Menu/MenuSection.tsx b/packages/components/src/Menu/MenuSection.tsx index 050e95b73d..6d484a935a 100644 --- a/packages/components/src/Menu/MenuSection.tsx +++ b/packages/components/src/Menu/MenuSection.tsx @@ -24,7 +24,7 @@ const MenuSection = ({ onAction, item, state }: MenuSectionProps) => { <> {item.key !== state.collection.getFirstKey() && (
  • - +
    • )}
  • diff --git a/themes/theme-b2b/src/tokens.ts b/themes/theme-b2b/src/tokens.ts index 562d5191cf..c307415ae4 100644 --- a/themes/theme-b2b/src/tokens.ts +++ b/themes/theme-b2b/src/tokens.ts @@ -136,7 +136,7 @@ export const colors = { * Use this when you need to separate a specific layer from * the surface color, e.g. table headers. */ - raised: brand.secondary[500], + raised: brand.secondary[400], /** * Use this when you need to make a specific layer * to appear lower than the surface color, e.g. progress bar. From 0642d6527c7e8f47632c0b4bc487e26f94fd1159 Mon Sep 17 00:00:00 2001 From: sarahgm <38324334+sarahgm@users.noreply.github.com> Date: Mon, 17 Jul 2023 08:35:41 +0200 Subject: [PATCH 5/6] fix: focus state if readonly (Input components) b2b theme (#3133) * save * add to other components --- packages/components/src/DateField/DateField.tsx | 5 +++-- themes/theme-b2b/src/components/DateField.styles.ts | 1 + themes/theme-b2b/src/components/Input.styles.ts | 1 + themes/theme-b2b/src/components/NumberField.styles.ts | 1 + themes/theme-b2b/src/components/TextArea.styles.ts | 1 + 5 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/components/src/DateField/DateField.tsx b/packages/components/src/DateField/DateField.tsx index a4cf680c94..4fbcf24f20 100644 --- a/packages/components/src/DateField/DateField.tsx +++ b/packages/components/src/DateField/DateField.tsx @@ -83,11 +83,13 @@ export const DateField = ({ const stateProps = useStateProps({ hover: isHovered, error, + readOnly, disabled, required, focus: isFocused || isPressed, }); + console.log(readOnly); return ( = { 'border-border-light rounded-sm border outline-none', 'h-[34px] px-2', 'group-hover/field:border-border-hover', + 'group-readonly/field:group-focus/field:border-border-light group-readonly/field:group-focus/field:outline-none', 'group-focus/field:border-border-focus group-focus/field:outline-outline-focus group-focus/field:-outline-offset-1', ' group-disabled/field:bg-bg-disabled group-disabled/field:border-border-disabled group-disabled/field:text-text-disabled', ' group-readonly/field:bg-bg-transparent group-readonly/field:text-text-disabled', diff --git a/themes/theme-b2b/src/components/Input.styles.ts b/themes/theme-b2b/src/components/Input.styles.ts index a668829bd7..a0128a1119 100644 --- a/themes/theme-b2b/src/components/Input.styles.ts +++ b/themes/theme-b2b/src/components/Input.styles.ts @@ -8,6 +8,7 @@ export const Input: ThemeComponent<'Input'> = { 'border-border-light rounded-sm border outline-none', 'px-2 leading-[2]', 'hover:border-border-hover', + 'read-only:focus:border-border-light read-only:focus:outline-none', 'focus:border-border-focus focus:outline-outline-focus focus:-outline-offset-1', 'disabled:bg-bg-disabled disabled:text-text-disabled disabled:cursor-not-allowed ', 'data-[error]:border-border-error data-[error]:outline-outline-error data-[error]:-outline-offset-1', diff --git a/themes/theme-b2b/src/components/NumberField.styles.ts b/themes/theme-b2b/src/components/NumberField.styles.ts index 13a4ed8983..50eb3921b5 100644 --- a/themes/theme-b2b/src/components/NumberField.styles.ts +++ b/themes/theme-b2b/src/components/NumberField.styles.ts @@ -4,6 +4,7 @@ export const NumberField: ThemeComponent<'NumberField'> = { group: cva([ 'border-border-light rounded-sm border border-solid', 'data-[hover]:border-border-hover', + 'group-readonly/field:group-focus/field:border-border-light group-readonly/field:group-focus/field:shadow-none', 'data-[focus]:border-border-focus data-[focus]:shadow-shadow-focus data-[focus]:shadow-[0_0_0_1px]', 'data-[disabled]:bg-bg-disabled data-[disabled]:text-text-disabled data-[disabled]:cursor-not-allowed ', 'data-[error]:border-border-error data-[error]:shadow-shadow-error data-[error]:shadow-[0_0_0_1px]', diff --git a/themes/theme-b2b/src/components/TextArea.styles.ts b/themes/theme-b2b/src/components/TextArea.styles.ts index 46f577b0b4..c25adeba68 100644 --- a/themes/theme-b2b/src/components/TextArea.styles.ts +++ b/themes/theme-b2b/src/components/TextArea.styles.ts @@ -5,6 +5,7 @@ export const TextArea: ThemeComponent<'TextArea'> = cva([ 'border-border-light rounded-sm border outline-none', 'px-2 py-0', 'hover:border-border-hover', + 'read-only:focus:border-border-light read-only:focus:shadow-none', 'focus:border-border-focus focus:shadow-[0_0_0_1px_#fa8005]', 'disabled:bg-bg-disabled disabled:text-text-disabled disabled:hover:border-border-disabled disabled:border-border-disabled disabled:cursor-not-allowed', 'group-error/field:border-border-error group-error/field:shadow-[0_0_0_1px_#dd4142]', From 1872595d18a536dfaf66901ee51f67e9f814475e Mon Sep 17 00:00:00 2001 From: sarahgm <38324334+sarahgm@users.noreply.github.com> Date: Mon, 17 Jul 2023 08:45:06 +0200 Subject: [PATCH 6/6] chore: move colors (#3138) Co-authored-by: Sebastian Sebald --- themes/theme-b2b/src/tokens.ts | 138 +++++++++++++++++---------------- 1 file changed, 71 insertions(+), 67 deletions(-) diff --git a/themes/theme-b2b/src/tokens.ts b/themes/theme-b2b/src/tokens.ts index c307415ae4..5d4d922223 100644 --- a/themes/theme-b2b/src/tokens.ts +++ b/themes/theme-b2b/src/tokens.ts @@ -26,68 +26,72 @@ const brand = { '900': '#111827', '950': '#030712', }, +} as const; - blue: { - '50': '#eefbfd', - '100': '#d5f2f8', - '200': '#b0e5f1', - '300': '#79d0e7', - '400': '#3ab3d5', - '500': '#1f96bb', - '600': '#1d799d', - '700': '#1e6280', - '800': '#215269', - '900': '#1f455a', - '950': '#0f2c3d', - }, +const green = { + '50': '#f7fce9', + '100': '#eef8cf', + '200': '#dcf1a5', + '300': '#c3e670', + '400': '#a8d744', + '500': '#8bbd26', + '600': '#6b961a', + '700': '#527318', + '800': '#425b19', + '900': '#394e19', + '950': '#1c2a09', +}; - red: { - '50': '#fdf3f3', - '100': '#fce4e4', - '200': '#f9cfcf', - '300': '#f4adad', - '400': '#ec7d7e', - '500': '#dd4142', - '600': '#cc3637', - '700': '#ab2a2b', - '800': '#8e2627', - '900': '#772526', - '950': '#400f0f', - }, +const yellow = { + '50': '#ffffe7', + '100': '#feffc1', + '200': '#fffd86', + '300': '#fff441', + '400': '#ffe60d', + '500': '#eac500', + '600': '#d19e00', + '700': '#a67102', + '800': '#89580a', + '900': '#74480f', + '950': '#442504', +}; - yellow: { - '50': '#ffffe7', - '100': '#feffc1', - '200': '#fffd86', - '300': '#fff441', - '400': '#ffe60d', - '500': '#eac500', - '600': '#d19e00', - '700': '#a67102', - '800': '#89580a', - '900': '#74480f', - '950': '#442504', - }, +const red = { + '50': '#fdf3f3', + '100': '#fce4e4', + '200': '#f9cfcf', + '300': '#f4adad', + '400': '#ec7d7e', + '500': '#dd4142', + '600': '#cc3637', + '700': '#ab2a2b', + '800': '#8e2627', + '900': '#772526', + '950': '#400f0f', +}; - green: { - '50': '#f7fce9', - '100': '#eef8cf', - '200': '#dcf1a5', - '300': '#c3e670', - '400': '#a8d744', - '500': '#8bbd26', - '600': '#6b961a', - '700': '#527318', - '800': '#425b19', - '900': '#394e19', - '950': '#1c2a09', - }, -} as const; +const blue = { + '50': '#eefbfd', + '100': '#d5f2f8', + '200': '#b0e5f1', + '300': '#79d0e7', + '400': '#3ab3d5', + '500': '#1f96bb', + '600': '#1d799d', + '700': '#1e6280', + '800': '#215269', + '900': '#1f455a', + '950': '#0f2c3d', +}; export const colors = { // Brand // --------------- brand, + blue, + yellow, + green, + red, // Text // --------------- @@ -97,13 +101,13 @@ export const colors = { accent: brand.secondary[500], }, - link: brand.blue[400], + link: blue[400], light: brand.secondary[100], // State disabled: brand.secondary[400], - error: brand.red[500], + error: red[500], hover: brand.secondary[800], }, @@ -156,7 +160,7 @@ export const colors = { }, // Status - info: brand.blue[500], + info: blue[500], }, // Shadow @@ -168,8 +172,8 @@ export const colors = { focus: brand.primary[600], // status - error: brand.red[500], - selected: brand.red[700], + error: red[500], + selected: red[700], disabled: brand.secondary[400], }, @@ -186,9 +190,9 @@ export const colors = { selected: brand.primary[800], // Status - error: brand.red[500], - info: brand.blue[500], - warning: brand.yellow[500], + error: red[500], + info: blue[500], + warning: yellow[500], }, // Outline @@ -197,19 +201,19 @@ export const colors = { dark: brand.secondary[700], // State - focus: brand.blue[400], + focus: blue[400], // Status - error: brand.red[500], + error: red[500], }, // Fill // --------------- fill: { // Status - required: brand.red[500], - error: brand.red[500], - info: brand.blue[500], - warning: brand.yellow[500], + required: red[500], + error: red[500], + info: blue[500], + warning: yellow[500], }, };