diff --git a/src/theme/foundations/breakpoints.ts b/src/theme/foundations/breakpoints.ts deleted file mode 100644 index f43deba731..0000000000 --- a/src/theme/foundations/breakpoints.ts +++ /dev/null @@ -1,9 +0,0 @@ -export const breakpoints = { - xs: '320px', - sm: '360px', - md: '768px', - lg: '1096px', - xl: '1200px', - '2xl': '1600px', - '3xl': '2000px' -}; diff --git a/src/theme/foundations/colors.ts b/src/theme/foundations/colors.ts new file mode 100644 index 0000000000..d55c22eb9d --- /dev/null +++ b/src/theme/foundations/colors.ts @@ -0,0 +1,15 @@ +export const colors = { + brand: { + light: { + primary: '#11866f', + secondary: '#25453f', + body: '#1d242c' + } + }, + green: { + 200: '#06fece' + }, + yellow: { + 50: '#f0f2e2' + } +}; diff --git a/src/theme/foundations/index.ts b/src/theme/foundations/index.ts index 05b3824cdc..06d0f4f4f0 100644 --- a/src/theme/foundations/index.ts +++ b/src/theme/foundations/index.ts @@ -1,2 +1,2 @@ -export * from './breakpoints'; +export * from './colors'; export * from './sizes'; diff --git a/src/theme/foundations/sizes.ts b/src/theme/foundations/sizes.ts index cfde7b2388..7cd50316be 100644 --- a/src/theme/foundations/sizes.ts +++ b/src/theme/foundations/sizes.ts @@ -1,7 +1,8 @@ export const sizes = { container: { - sm: '448px', + sm: '480px', lg: '1096px', - xl: '1200px' + xl: '1200px', + '2xl': '1536px' } }; diff --git a/src/theme/index.ts b/src/theme/index.ts index f9be847dc2..a5d16710c9 100644 --- a/src/theme/index.ts +++ b/src/theme/index.ts @@ -1,10 +1,32 @@ import { extendTheme } from '@chakra-ui/react'; -import { breakpoints, sizes } from './foundations'; +import { colors, sizes } from './foundations'; const overrides = { - breakpoints, - sizes + colors, + components: {}, + sizes, + styles: { + global: () => ({ + body: { + // TODO: move color to theme colors + bg: '#f0f2e2' + } + }) + }, + // TODO: fix textStyles + textStyles: { + h1: {}, + h2: {}, + 'hero-text-small': { + fontSize: '13px', + fontFamily: '"Inter", sans-serif' + }, + // TODO: refactor w/ semantic tokens for light/dark mode + 'link-light': {}, + // TODO: refactor w/ semantic tokens for light/dark mode + 'text-light': {} + } }; export default extendTheme(overrides);