-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
13 changed files
with
231 additions
and
31 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export const common = { | ||
black: '#000000', | ||
white: '#FFFFFF', | ||
} as const; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} | ||
} | ||
}, | ||
); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { createTheme } from './createTheme'; |