feat: implement createTheme

libs/core/src/colors/index.ts

@@ -1,14 +1,14 @@
-export { black } from './black';
 export { blue } from './blue';
+export { common } from './common';
 export { coolGrey } from './coolGrey';
 export { green } from './green';
 export { grey } from './grey';
+export { magenta } from './magenta';
 export { orange } from './orange';
+export { defaultPalette } from './palette';
 export { purple } from './purple';
 export { red } from './red';
 export { teal } from './teal';
 export { turquoise } from './turquoise';
-export { violet } from './violet';
 export { warmGrey } from './warmGrey';
-export { white } from './white';
 export { yellow } from './yellow';

libs/core/src/colors/palette.ts

@@ -1,14 +1,16 @@
 export const defaultPalette = {
   primary: '#006FFF',
   secondary: '#FDB913',
-  positive: '#42BE65',
-  negative: '#FA4D56',
+  success: '#42BE65',
+  error: '#FA4D56',
   warning: '#FFC107',
   disable: '#DDE1E6',
-  textPrimary: '#161616',
-  textSecondary: '#393939',
-  textLight: '#F4F4F4',
-  textDisabled: '#A8A8A8',
-  textPlaceholder: '#393939',
-  textLink: '#006FFF',
-};
+  text: {
+    primary: '#161616',
+    secondary: '#393939',
+    light: '#F4F4F4',
+    disabled: '#A8A8A8',
+    placeholder: '#393939',
+    link: '#006FFF',
+  },
+} as const;

libs/core/src/index.ts

@@ -1,2 +1,3 @@
 export * from './colors';
 export * from './mui';
+export * from './styles';

libs/core/src/mui/index.ts

@@ -2,4 +2,4 @@
  * Re-export all other components from `@mui/material`
  * which is not implemented by `Sahab Design System`
  * */
-export {};
+export * from './styles';

libs/core/src/mui/styles/index.ts

@@ -0,0 +1,33 @@
+/**
+ * Re-export all files from `@mui/material/styles` except the `createTheme` file
+ */
+export {
+  alpha,
+  createStyles,
+  css,
+  darken,
+  decomposeColor,
+  duration,
+  easing,
+  emphasize,
+  getContrastRatio,
+  getInitColorSchemeScript,
+  getLuminance,
+  hexToRgb,
+  hslToRgb,
+  keyframes,
+  lighten,
+  makeStyles,
+  recomposeColor,
+  responsiveFontSizes,
+  rgbToHex,
+  shouldSkipGeneratingVar,
+  styled,
+  StyledEngineProvider,
+  ThemeProvider,
+  useColorScheme,
+  useTheme,
+  useThemeProps,
+  withStyles,
+  withTheme,
+} from '@mui/material/styles';

libs/core/src/styles/createTheme.test.ts

@@ -1,9 +1,43 @@
+import { common as expectedCommon, defaultPalette } from '../colors';
 import { createTheme } from './createTheme';
 
+const { text: expectedText, disable: expectedDisabled, ...expectedSemantic } = defaultPalette;
+const isSemantic = (val: string): val is keyof typeof expectedSemantic => val in expectedSemantic;
+
 describe('createTheme', () => {
-  it('should return default theme with no options', () => {
-    const theme = createTheme();
-    console.log(theme.palette);
-    expect(1).toBe(1);
+  it('should return default palette when passing no options', () => {
+    const { palette } = createTheme();
+
+    expect(palette.disabled).toMatchObject(expectedDisabled);
+    expect(palette.common).toMatchObject(expectedCommon);
+    expect(palette.text).toMatchObject(expectedText);
+
+    for (const [key, expected] of Object.entries(expectedSemantic)) {
+      if (isSemantic(key)) {
+        expect(palette[key].main).toBe(expected);
+      }
+    }
   });
+
+  it.each<keyof typeof expectedSemantic>(['primary', 'secondary', 'success', 'error', 'warning'])(
+    'should return the given value when passing the options',
+    (name) => {
+      const sample = '#000';
+      const { palette } = createTheme({
+        palette: {
+          [name]: {
+            main: sample,
+          },
+        },
+      });
+
+      expect(palette[name].main).toBe(sample);
+
+      for (const [key, expected] of Object.entries(expectedSemantic)) {
+        if (isSemantic(key) && key !== name) {
+          expect(palette[key].main).toBe(expected);
+        }
+      }
+    },
+  );
 });

libs/core/src/styles/createTheme.ts

@@ -1,82 +1,137 @@
 import { createTheme as createMuiTheme, Theme, ThemeOptions } from '@mui/material';
 import { deepmerge } from '@mui/utils';
-import createPalette from '@mui/material/styles/createPalette';
-import { defaultPalette } from '../colors/palette';
-import { black, white } from '../colors';
+import { common, defaultPalette } from '../colors';
 
+/**
+ * Add more colors to text palette which are defined by Sahab Design System
+ */
 declare module '@mui/material/styles' {
-  /*   interface Theme {
-    status: {
-      danger: string;
-    };
-  }
-  interface ThemeOptions {
-    status?: {
-      danger?: string;
-    };
-  } */
   interface TypeText {
-    lightColor: string;
+    light: string;
     placeholder: string;
     link: string;
   }
+  interface PaletteOptions {
+    disabled?: string;
+  }
+  interface Palette {
+    disabled?: string;
+  }
+}
+
+/**
+ * Update the Typography's variant prop options
+ * and disable the variants which are not used in Sahab Design System
+ */
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    h6: false;
+    subtitle2: false;
+    caption: false;
+    overline: false;
+  }
 }
 
 export const defaultOptions: ThemeOptions = {
   palette: {
     primary: { main: defaultPalette.primary },
     secondary: { main: defaultPalette.secondary },
-    error: { main: defaultPalette.negative },
+    error: { main: defaultPalette.error },
     warning: { main: defaultPalette.warning },
-    // info: { main: defaultPalette.warning }, TODO ask UI/UX
-    success: { main: defaultPalette.positive },
+    // TODO ask UI/UX
+    // info: { main: defaultPalette.warning },
+    success: { main: defaultPalette.success },
+    disabled: defaultPalette.disable,
     common: {
-      white,
-      black,
+      white: common.white,
+      black: common.black,
     },
     background: {
       // TODO ask UI/UX
       // paper:
       // default:
     },
     text: {
-      primary: '',
-      secondary: '',
-      lightColor: '',
-      disabled: '',
-      link: '',
-      placeholder: '',
+      primary: defaultPalette.text.primary,
+      secondary: defaultPalette.text.secondary,
+      light: defaultPalette.text.light,
+      disabled: defaultPalette.text.disabled,
+      link: defaultPalette.text.link,
+      placeholder: defaultPalette.text.placeholder,
     },
   },
   typography: {
-    fontFamily: 'IRANYekan',
+    fontFamily: 'iranyekan',
     fontSize: 16,
     fontWeightLight: 100,
     fontWeightRegular: 200,
     fontWeightMedium: 400,
     fontWeightBold: 600,
     h1: {
-      fontFamily: 'IRANYekan',
+      fontFamily: 'iranyekan',
+      fontWeight: 600,
+      fontSize: '2.25rem', // 32px
+      // lineHeight: 1.5, // FIXME
+    },
+    h2: {
+      fontFamily: 'iranyekan',
       fontWeight: 600,
-      fontSize: '2.25rem',
-      lineHeight: 1.5,
-      letterSpacing: '',
+      fontSize: '1.5rem', // 24px
+      // lineHeight: 1.5, // FIXME
+    },
+    h3: {
+      fontFamily: 'iranyekan',
+      fontWeight: 200,
+      fontSize: '1.5rem', // 24px
+      // lineHeight: 1.5, // FIXME
+    },
+    h4: {
+      fontFamily: 'iranyekan',
+      fontWeight: 600,
+      fontSize: '1.125rem', // 18px
+      // lineHeight: 1.5, // FIXME
+    },
+    h5: {
+      fontFamily: 'iranyekan',
+      fontWeight: 600,
+      fontSize: '1rem', // 16px
+      // lineHeight: 1.5, // FIXME
+    },
+    button: {
+      fontFamily: 'iranyekan',
+      fontWeight: 400,
+      fontSize: '1rem', // 16px
+      // lineHeight: 1.5, // FIXME
+    },
+    body1: {
+      fontFamily: 'iranyekan',
+      fontWeight: 200,
+      fontSize: '1rem', // 16px
+      // lineHeight: 1.5, // FIXME
+    },
+    body2: {
+      fontFamily: 'iranyekan',
+      fontWeight: 200,
+      fontSize: '0.875rem', // 14px
+      // lineHeight: 1.5, // FIXME
+    },
+    subtitle1: {
+      fontFamily: 'iranyekan',
+      fontWeight: 400,
+      fontSize: '0.625rem', // 10px
+      // lineHeight: 1.5, // FIXME
     },
-    h2: {},
-    h3: {},
-    h4: {},
-    h5: {},
-    h6: {},
-    button: {},
-    body1: {},
-    body2: {},
-    subtitle1: {},
+    // Disable h6, subtitle2, caption and overline variant
+    h6: undefined,
+    subtitle2: undefined,
+    caption: undefined,
+    overline: undefined,
   },
   components: {
     MuiLink: {
       defaultProps: {
         variant: 'body2',
-        color: defaultPalette.textLink,
+        color: defaultPalette.text.link,
       },
     },
   },

libs/core/src/styles/index.ts

@@ -0,0 +1 @@
+export * from './createTheme';