Skip to content

Commit

Permalink
feat: implement createTheme (#8)
Browse files Browse the repository at this point in the history
  • Loading branch information
m-davoodi committed Aug 1, 2022
1 parent 3935bb2 commit 46b96ca
Show file tree
Hide file tree
Showing 13 changed files with 231 additions and 31 deletions.
1 change: 0 additions & 1 deletion libs/core/src/colors/black.ts

This file was deleted.

4 changes: 4 additions & 0 deletions libs/core/src/colors/common.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
export const common = {
black: '#000000',
white: '#FFFFFF',
} as const;
6 changes: 3 additions & 3 deletions libs/core/src/colors/index.ts
Original file line number Diff line number Diff line change
@@ -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';
12 changes: 12 additions & 0 deletions libs/core/src/colors/magenta.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
export const magenta = {
10: '#FFF0F7',
20: '#FFD6E8',
30: '#FFAFD2',
40: '#FF7EB6',
50: '#EE5396',
60: '#D02670',
70: '#9F1853',
80: '#740937',
90: '#510224',
100: '#2A0A18',
} as const;
16 changes: 16 additions & 0 deletions libs/core/src/colors/palette.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
export const defaultPalette = {
primary: '#006FFF',
secondary: '#FDB913',
success: '#42BE65',
error: '#FA4D56',
warning: '#FFC107',
disable: '#DDE1E6',
text: {
primary: '#161616',
secondary: '#393939',
light: '#F4F4F4',
disabled: '#A8A8A8',
placeholder: '#393939',
link: '#006FFF',
},
} as const;
20 changes: 10 additions & 10 deletions libs/core/src/colors/purple.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
export const purple = {
10: '#FFF0F7',
20: '#FFD6E8',
30: '#FFAFD2',
40: '#FF7EB6',
50: '#EE5396',
60: '#D02670',
70: '#9F1853',
80: '#740937',
90: '#510224',
100: '#2A0A18',
10: '#F6F2FF',
20: '#E8DAFF',
30: '#D4BBFF',
40: '#BE95FF',
50: '#A56EFF',
60: '#8A3FFC',
70: '#6929C4',
80: '#491D8B',
90: '#31135E',
100: '#1C0F30',
} as const;
12 changes: 0 additions & 12 deletions libs/core/src/colors/violet.ts

This file was deleted.

1 change: 0 additions & 1 deletion libs/core/src/colors/white.ts

This file was deleted.

8 changes: 7 additions & 1 deletion libs/core/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,2 +1,8 @@
export * from './colors';
export * from './mui';
export * from './colors';

/**
* The functions and components from the *MUI* packages which have been modified by *Sahab Design System*
* are re-exported here to override the *MUI* packages
*/
export { createTheme } from './styles';
7 changes: 4 additions & 3 deletions libs/core/src/mui/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
/**
* Re-export all other components from `@mui/material`
* which is not implemented by `Sahab Design System`
* Re-export all components and functions from `MUI` packages
* to be used across the apps installed this library
* */
export {};
export * from '@mui/material';
export * from '@mui/material/styles';
43 changes: 43 additions & 0 deletions libs/core/src/styles/createTheme.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +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 palette when passing no options', () => {
const { palette } = createTheme();

expect(palette.disabled).toBe(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);
}
}
},
);
});
131 changes: 131 additions & 0 deletions libs/core/src/styles/createTheme.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import { createTheme as createMuiTheme, Theme, ThemeOptions } from '@mui/material';
import { common, defaultPalette } from '../colors';

/**
* Add more colors to text palette which are defined by Sahab Design System
*/
declare module '@mui/material/styles' {
interface TypeText {
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;
}
}

const defaultOptions: ThemeOptions = {
palette: {
primary: { main: defaultPalette.primary },
secondary: { main: defaultPalette.secondary },
error: { main: defaultPalette.error },
warning: { main: defaultPalette.warning },
// TODO ask UI/UX
// info: { main: defaultPalette.warning },
success: { main: defaultPalette.success },
disabled: defaultPalette.disable,
common: { ...common }, // prevent mutable object.
background: {
// TODO ask UI/UX
// paper:
// default:
},
text: { ...defaultPalette.text }, // prevent mutable object.
},
typography: {
fontFamily: 'iranyekan',
fontSize: 16,
fontWeightLight: 100,
fontWeightRegular: 200,
fontWeightMedium: 400,
fontWeightBold: 600,
h1: {
fontFamily: 'iranyekan',
fontWeight: 600,
fontSize: '2.25rem', // 32px
// lineHeight: 1.5, // FIXME
},
h2: {
fontFamily: 'iranyekan',
fontWeight: 600,
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
},
// Disable h6, subtitle2, caption and overline variant
h6: undefined,
subtitle2: undefined,
caption: undefined,
overline: undefined,
},
components: {
MuiLink: {
defaultProps: {
variant: 'body2',
color: defaultPalette.text.link,
},
},
},
};

export function createTheme(options: ThemeOptions = {}, ...args: object[]): Theme {
return createMuiTheme(defaultOptions, options, ...args);
}
1 change: 1 addition & 0 deletions libs/core/src/styles/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { createTheme } from './createTheme';

0 comments on commit 46b96ca

Please sign in to comment.