[SCSE-190] Setup Chakra UI theming folders and files

packages/ui/.storybook/preview.js

@@ -1,4 +1,4 @@
-import {theme} from "../theme.ts"
+import { theme } from "../theme"
 import * as NextImage from "next/image";
 
 export const parameters = {
@@ -20,4 +20,4 @@ const OriginalNextImage = NextImage.default;
 Object.defineProperty(NextImage, "default", {
   configurable: true,
   value: (props) => <OriginalNextImage {...props} unoptimized />,
-});
+});

packages/ui/theme/components/Button.ts

@@ -0,0 +1,17 @@
+import { defineStyleConfig } from '@chakra-ui/react';
+
+const Button = defineStyleConfig({
+  // Styles for the base style
+  baseStyle: {},
+
+  // Styles for the size variations
+  sizes: {},
+
+  // Styles for the visual style variations
+  variants: {},
+
+  // The default `size` or `variant` values
+  defaultProps: {},
+});
+
+export default Button;

packages/ui/theme/components/index.ts

@@ -0,0 +1,5 @@
+import Button from './Button';
+
+const components = { Button };
+
+export default components;

packages/ui/theme/foundations/colors.ts

@@ -0,0 +1,7 @@
+const colors = {
+  // brand: {
+  //
+  // }
+};
+
+export default colors;

packages/ui/theme/foundations/fonts.ts

@@ -0,0 +1,9 @@
+const fonts = {
+  heading: `'Roboto', sans-serif`,
+  body: `'Roboto', sans-serif`,
+  title: `'Roboto', sans-serif`,
+  navigation: `'Poppins', sans-serif`,
+  timestamp: `'Roboto Slab', sans-serif`
+};
+
+export default fonts;

packages/ui/theme/index.ts

@@ -0,0 +1,27 @@
+import { extendTheme, ThemeConfig } from '@chakra-ui/react';
+
+const config: ThemeConfig = {
+  // If dark mode is enabled
+  // initialColorMode: 'light',
+  // useSystemColorMode: false,
+};
+
+// Global style overrides
+import styles from './styles';
+
+// Foundational style overrides
+import fonts from './foundations/fonts';
+import colors from './foundations/colors';
+
+// Component style overrides
+import components from './components';
+
+const overrides = {
+  config,
+  styles,
+  fonts,
+  colors,
+  components,
+};
+
+export const theme = extendTheme(overrides);

packages/ui/theme/styles.ts

@@ -0,0 +1,12 @@
+// import { mode } from '@chakra-ui/theme-tools';
+
+// global styles
+const styles = {
+  // global: (props: StyleFunctionProps) => ({
+  // body: {
+  //   bg: mode('#FFFFFF', '#121212')(props),
+  // },
+  // }),
+};
+
+export default styles;