From 55e2280985886c71571575db78af2f82ab8e3b9c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Fri, 15 Mar 2024 10:43:39 +0100 Subject: [PATCH 1/2] add base colors to use in app --- src/design-system/config/theme.ts | 4 ++-- src/types/theme.d.ts | 3 ++- src/utils/getColorValue.ts | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/design-system/config/theme.ts b/src/design-system/config/theme.ts index e049d9c7..c9c8f480 100644 --- a/src/design-system/config/theme.ts +++ b/src/design-system/config/theme.ts @@ -341,11 +341,11 @@ export const _appTheme = { export const theme = { light: { ..._appTheme, - colors: themeColors.lightMode, + colors: { ...themeColors.primitives, ...themeColors.lightMode }, }, dark: { ..._appTheme, - colors: themeColors.darkMode, + colors: { ...themeColors.primitives, ...themeColors.darkMode }, }, } diff --git a/src/types/theme.d.ts b/src/types/theme.d.ts index 58ddebbc..58611f3b 100644 --- a/src/types/theme.d.ts +++ b/src/types/theme.d.ts @@ -11,7 +11,8 @@ declare global { type Fonts = keyof AppTheme['fonts'] // COLORS - type Colors = typeof themeColors.lightMode | typeof themeColors.darkMode + type Colors = typeof themeColors.primitives & + (typeof themeColors.lightMode | typeof themeColors.darkMode) export type ColorNames = NestedKeys diff --git a/src/utils/getColorValue.ts b/src/utils/getColorValue.ts index d792b776..0771fdf9 100644 --- a/src/utils/getColorValue.ts +++ b/src/utils/getColorValue.ts @@ -8,7 +8,7 @@ export const getColorValue = ({ color, colors }: GetColorValueProps): string => return color } - if (!color || typeof color === 'object') return 'transparent' + if (!color || typeof color === 'object') return colors.Base.transparent const keys = color.split('.') From f32827960b367d4909ee751f40cf4e609376e758 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Baumruck?= Date: Mon, 18 Mar 2024 09:48:23 +0100 Subject: [PATCH 2/2] update button test --- .../components/Button/Button.test.tsx | 28 ++++++++----------- 1 file changed, 12 insertions(+), 16 deletions(-) diff --git a/src/design-system/components/Button/Button.test.tsx b/src/design-system/components/Button/Button.test.tsx index 433ea986..9e02ed77 100644 --- a/src/design-system/components/Button/Button.test.tsx +++ b/src/design-system/components/Button/Button.test.tsx @@ -23,7 +23,6 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ ...baseStyles, - alignItems: 'center', backgroundColor: theme.light.colors.button.primary.bg, borderColor: theme.light.colors.button.primary.border, borderWidth: 1, @@ -34,7 +33,6 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ ...baseStyles, - alignItems: 'center', backgroundColor: theme.light.colors.button.primary.error.bg, borderColor: theme.light.colors.button.primary.error.border, borderWidth: 1, @@ -45,7 +43,6 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ ...baseStyles, - alignItems: 'center', backgroundColor: theme.light.colors.button.secondary.bg, borderColor: theme.light.colors.button.secondary.border, borderWidth: 1, @@ -67,7 +64,6 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ ...baseStyles, - alignItems: 'center', backgroundColor: theme.light.colors.button.secondary.error.bg, borderColor: theme.light.colors.button.secondary.error.border, borderWidth: 1, @@ -78,8 +74,8 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ ...baseStyles, - backgroundColor: 'transparent', - borderColor: 'transparent', + backgroundColor: theme.light.colors.Base.transparent, + borderColor: theme.light.colors.Base.transparent, borderWidth: undefined, }) }) @@ -88,8 +84,8 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ ...baseStyles, - backgroundColor: 'transparent', - borderColor: 'transparent', + backgroundColor: theme.light.colors.Base.transparent, + borderColor: theme.light.colors.Base.transparent, borderWidth: undefined, }) }) @@ -98,8 +94,8 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ ...baseStyles, - backgroundColor: 'transparent', - borderColor: 'transparent', + backgroundColor: theme.light.colors.Base.transparent, + borderColor: theme.light.colors.Base.transparent, borderWidth: undefined, }) }) @@ -108,8 +104,8 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ ...baseStyles, - backgroundColor: 'transparent', - borderColor: 'transparent', + backgroundColor: theme.light.colors.Base.transparent, + borderColor: theme.light.colors.Base.transparent, borderWidth: undefined, }) }) @@ -118,8 +114,8 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ ...baseStyles, - backgroundColor: 'transparent', - borderColor: 'transparent', + backgroundColor: theme.light.colors.Base.transparent, + borderColor: theme.light.colors.Base.transparent, borderWidth: undefined, }) }) @@ -128,8 +124,8 @@ describe('Button', () => { const { getByTestId } = render() expect(getByTestId('baseButton').props.style).toStrictEqual({ ...baseStyles, - backgroundColor: 'transparent', - borderColor: 'transparent', + backgroundColor: theme.light.colors.Base.transparent, + borderColor: theme.light.colors.Base.transparent, borderWidth: undefined, }) })