@zesty-io/material 0.2.1 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/es/FieldTypeDate/index.d.ts +2 -2
  2. package/es/FieldTypeDate/index.js +2 -2
  3. package/es/FieldTypeDateTime/index.d.ts +2 -2
  4. package/es/FieldTypeDateTime/index.js +2 -2
  5. package/es/LegacyTheme/index.d.ts +3 -0
  6. package/es/LegacyTheme/index.js +81 -0
  7. package/es/LegacyTheme/palette.d.ts +3 -0
  8. package/es/LegacyTheme/palette.js +23 -0
  9. package/es/LegacyTheme/typography.d.ts +3 -0
  10. package/es/LegacyTheme/typography.js +4 -0
  11. package/es/index.d.ts +1 -0
  12. package/es/index.js +1 -0
  13. package/es/theme/index.js +16 -47
  14. package/es/theme/palette.d.ts +12 -0
  15. package/es/theme/palette.js +126 -26
  16. package/es/theme/typography.d.ts +6 -0
  17. package/es/theme/typography.js +53 -0
  18. package/package.json +1 -1
  19. package/src/FieldTypeDate/index.tsx +3 -3
  20. package/src/FieldTypeDateTime/index.tsx +4 -4
  21. package/src/LegacyTheme/index.ts +88 -0
  22. package/src/LegacyTheme/palette.ts +25 -0
  23. package/src/LegacyTheme/typography.ts +7 -0
  24. package/src/index.ts +1 -0
  25. package/src/theme/index.ts +16 -51
  26. package/src/theme/palette.ts +141 -26
  27. package/src/theme/typography.ts +62 -0
  28. package/zesty-io-material-0.1.2.tgz +0 -0
package/es/FieldTypeDate/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
3
- export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
2
+ import { DesktopDatePickerProps } from '@mui/x-date-pickers';
3
+ export interface FieldTypeDateProps extends Omit<DesktopDatePickerProps<Date, Date>, 'renderInput'> {
4
4
  helperText?: string;
5
5
  error?: boolean;
6
6
  required?: boolean;
package/es/FieldTypeDate/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
3
3
  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
4
- import { DatePicker } from '@mui/x-date-pickers/DatePicker';
4
+ import { DesktopDatePicker } from '@mui/x-date-pickers';
5
5
  import { FormControl, FormLabel, TextField } from '@mui/material';
6
6
  ;
7
7
  const FieldTypeDate = ({ label, helperText, error, required, ...props }) => {
8
- return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
8
+ return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DesktopDatePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
9
9
  };
10
10
  export default FieldTypeDate;
package/es/FieldTypeDateTime/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  /// <reference types="react" />
2
- import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
3
- export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
2
+ import { DesktopDateTimePickerProps } from '@mui/x-date-pickers';
3
+ export interface FieldTypeDateTimeProps extends Omit<DesktopDateTimePickerProps<Date, Date>, 'renderInput'> {
4
4
  helperText?: string;
5
5
  error?: boolean;
6
6
  required?: boolean;
package/es/FieldTypeDateTime/index.js CHANGED
@@ -1,10 +1,10 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
3
3
  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
4
- import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
4
+ import { DesktopDateTimePicker } from '@mui/x-date-pickers';
5
5
  import { TextField, FormControl, FormLabel } from '@mui/material';
6
6
  ;
7
7
  const FieldTypeDateTime = ({ label, helperText, error, required, ...props }) => {
8
- return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DateTimePicker, { "data-testid": "zds-date-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
8
+ return (_jsxs(FormControl, { fullWidth: true, required: required, children: [_jsx(FormLabel, { children: label }), _jsx(LocalizationProvider, { dateAdapter: AdapterDateFns, children: _jsx(DesktopDateTimePicker, { "data-testid": "zds-date-time-picker", renderInput: (params) => _jsx(TextField, { ...params, helperText: helperText, error: error, size: "small" }), ...props }) })] }));
9
9
  };
10
10
  export default FieldTypeDateTime;
package/es/LegacyTheme/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { Theme } from '@mui/material/styles';
2
+ declare let theme: Theme;
3
+ export default theme;
package/es/LegacyTheme/index.js ADDED
@@ -0,0 +1,81 @@
1
+ import palette from './palette';
2
+ import typography from './typography';
3
+ import { createTheme } from '@mui/material/styles';
4
+ let theme = createTheme({
5
+ palette,
6
+ typography,
7
+ });
8
+ theme = createTheme(theme, {
9
+ components: {
10
+ MuiAccordionSummary: {
11
+ styleOverrides: {
12
+ root: {
13
+ backgroundColor: '#e4e9f1',
14
+ },
15
+ },
16
+ },
17
+ MuiButton: {
18
+ styleOverrides: {
19
+ root: {
20
+ minWidth: 'auto',
21
+ },
22
+ },
23
+ },
24
+ MuiTooltip: {
25
+ styleOverrides: {
26
+ tooltip: {
27
+ color: theme.palette.primary.contrastText,
28
+ backgroundColor: theme.palette.primary.main,
29
+ fontSize: '14px',
30
+ lineHeight: '20px',
31
+ },
32
+ arrow: {
33
+ color: theme.palette.primary.main,
34
+ },
35
+ },
36
+ },
37
+ MuiInputBase: {
38
+ styleOverrides: {
39
+ root: {
40
+ backgroundColor: theme.palette.primary.contrastText,
41
+ },
42
+ },
43
+ },
44
+ MuiFormLabel: {
45
+ styleOverrides: {
46
+ root: {
47
+ color: theme.palette.primary.dark,
48
+ },
49
+ asterisk: {
50
+ color: theme.palette.error.main,
51
+ },
52
+ },
53
+ },
54
+ MuiCard: {
55
+ styleOverrides: {
56
+ root: {
57
+ overflow: 'visible',
58
+ },
59
+ },
60
+ },
61
+ MuiCardHeader: {
62
+ styleOverrides: {
63
+ root: {
64
+ backgroundColor: '#e4e9f1',
65
+ },
66
+ },
67
+ },
68
+ MuiToggleButton: {
69
+ styleOverrides: {
70
+ root: ({ ownerState, theme }) => ({
71
+ backgroundColor: `${theme.palette[ownerState.color].contrastText} !important`,
72
+ ...(ownerState.selected && {
73
+ color: `${theme.palette[ownerState.color].contrastText} !important`,
74
+ backgroundColor: `${theme.palette[ownerState.color].main} !important`,
75
+ }),
76
+ }),
77
+ },
78
+ },
79
+ },
80
+ });
81
+ export default theme;
package/es/LegacyTheme/palette.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { PaletteOptions } from '@mui/material/styles';
2
+ declare const palette: PaletteOptions;
3
+ export default palette;
package/es/LegacyTheme/palette.js ADDED
@@ -0,0 +1,23 @@
1
+ const palette = {
2
+ primary: {
3
+ main: '#404759',
4
+ contrastText: '#ffffff',
5
+ },
6
+ secondary: {
7
+ main: '#497edf',
8
+ contrastText: '#ffffff',
9
+ },
10
+ success: {
11
+ main: '#75bf25',
12
+ contrastText: '#ffffff',
13
+ },
14
+ warning: {
15
+ main: '#f17829',
16
+ contrastText: '#ffffff',
17
+ },
18
+ error: {
19
+ main: '#e53c05',
20
+ contrastText: '#ffffff',
21
+ },
22
+ };
23
+ export default palette;
package/es/LegacyTheme/typography.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { TypographyVariantsOptions } from '@mui/material/styles';
2
+ declare const typography: TypographyVariantsOptions;
3
+ export default typography;
package/es/LegacyTheme/typography.js ADDED
@@ -0,0 +1,4 @@
1
+ const typography = {
2
+ fontFamily: "'Mulish'",
3
+ };
4
+ export default typography;
package/es/index.d.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export { default as legacyTheme } from './LegacyTheme';
1
2
  export { default as theme } from './theme';
2
3
  export { default as FieldTypeText } from './FieldTypeText';
3
4
  export { default as FieldTypeSort } from './FieldTypeSort';
package/es/index.js CHANGED
@@ -1,3 +1,4 @@
1
+ export { default as legacyTheme } from './LegacyTheme';
1
2
  export { default as theme } from './theme';
2
3
  export { default as FieldTypeText } from './FieldTypeText';
3
4
  export { default as FieldTypeSort } from './FieldTypeSort';
package/es/theme/index.js CHANGED
@@ -7,73 +7,42 @@ let theme = createTheme({
7
7
  });
8
8
  theme = createTheme(theme, {
9
9
  components: {
10
- MuiAccordionSummary: {
11
- styleOverrides: {
12
- root: {
13
- backgroundColor: '#e4e9f1',
14
- },
15
- },
16
- },
17
- MuiButton: {
18
- styleOverrides: {
19
- root: {
20
- minWidth: 'auto',
21
- },
22
- },
23
- },
24
- MuiTooltip: {
25
- styleOverrides: {
26
- tooltip: {
27
- color: theme.palette.primary.contrastText,
28
- backgroundColor: theme.palette.primary.main,
29
- fontSize: '14px',
30
- lineHeight: '20px',
31
- },
32
- arrow: {
33
- color: theme.palette.primary.main,
34
- },
35
- },
36
- },
37
- MuiInputBase: {
10
+ MuiFormLabel: {
38
11
  styleOverrides: {
39
12
  root: {
40
- backgroundColor: theme.palette.primary.contrastText,
13
+ ...theme.typography.body2,
41
14
  },
42
15
  },
43
16
  },
44
- MuiFormLabel: {
17
+ MuiTab: {
45
18
  styleOverrides: {
46
19
  root: {
47
- color: theme.palette.primary.dark,
48
- },
49
- asterisk: {
50
- color: theme.palette.error.main,
20
+ borderBottom: 2,
21
+ borderColor: theme.palette.grey[100],
22
+ borderStyle: "solid",
51
23
  },
52
24
  },
53
25
  },
54
- MuiCard: {
26
+ MuiCardHeader: {
55
27
  styleOverrides: {
56
28
  root: {
57
- overflow: 'visible',
29
+ padding: "16px 16px 0px",
58
30
  },
59
31
  },
60
32
  },
61
- MuiCardHeader: {
33
+ MuiCardContent: {
62
34
  styleOverrides: {
63
35
  root: {
64
- backgroundColor: '#e4e9f1',
36
+ padding: "8px 16px 16px",
37
+ ":last-child": {
38
+ paddingBottom: "16px",
39
+ },
65
40
  },
66
41
  },
67
42
  },
68
- MuiToggleButton: {
69
- styleOverrides: {
70
- root: ({ ownerState, theme }) => ({
71
- backgroundColor: `${theme.palette[ownerState.color].contrastText} !important`,
72
- ...(ownerState.selected && {
73
- color: `${theme.palette[ownerState.color].contrastText} !important`,
74
- backgroundColor: `${theme.palette[ownerState.color].main} !important`,
75
- }),
76
- }),
43
+ MuiButton: {
44
+ defaultProps: {
45
+ disableElevation: true,
77
46
  },
78
47
  },
79
48
  },
package/es/theme/palette.d.ts CHANGED
@@ -1,3 +1,15 @@
1
+ import { Color } from '@mui/material';
1
2
  import { PaletteOptions } from '@mui/material/styles';
3
+ declare module '@mui/material/styles' {
4
+ interface PaletteOptions {
5
+ red?: Partial<Color>;
6
+ deepPurple?: Partial<Color>;
7
+ deepOrange?: Partial<Color>;
8
+ pink?: Partial<Color>;
9
+ blue?: Partial<Color>;
10
+ green?: Partial<Color>;
11
+ purple?: Partial<Color>;
12
+ }
13
+ }
2
14
  declare const palette: PaletteOptions;
3
15
  export default palette;
package/es/theme/palette.js CHANGED
@@ -1,36 +1,136 @@
1
1
  const palette = {
2
2
  primary: {
3
- main: '#404759',
4
- contrastText: '#ffffff',
5
- },
6
- secondary: {
7
- main: '#497edf',
8
- contrastText: '#ffffff',
3
+ main: "#FF5D03",
4
+ dark: "#EC4A0A",
5
+ light: "#FD853A",
9
6
  },
10
7
  success: {
11
- main: '#75bf25',
12
- contrastText: '#ffffff',
8
+ main: "#12B76A",
9
+ dark: "#027A48",
10
+ light: "#D1FADF",
13
11
  },
14
12
  warning: {
15
- main: '#f17829',
16
- contrastText: '#ffffff',
13
+ main: "#F79009",
14
+ dark: "B54708",
15
+ light: "#FEF0C7",
17
16
  },
18
17
  error: {
19
- main: '#e53c05',
20
- contrastText: '#ffffff',
21
- },
22
- // action: {
23
- // active: 'rgba(0,0,0,54)',
24
- // hover: 'rgba(0,0,0,0.04)',
25
- // hoverOpacity: 0.04,
26
- // selected: 'rgba(0,0,0,0.08)',
27
- // selectedOpacity: 0.08,
28
- // disabled: 'rgba(26, 32, 44, 0.4)',
29
- // disabledBackground: 'rgba(26, 32, 44, 0.12)',
30
- // disabledOpacity: 0.4,
31
- // focus: 'rgba(0,0,0,0.12)',
32
- // focusOpacity: 0.12,
33
- // activatedOpacity: 0.12,
34
- // },
18
+ main: "#F04438",
19
+ dark: "#B42318",
20
+ light: "#FECDCA",
21
+ },
22
+ info: {
23
+ main: "#0BA5EC",
24
+ dark: "#026AA2",
25
+ light: "#7CD4FD",
26
+ },
27
+ text: {
28
+ primary: "#101828",
29
+ secondary: "#475467",
30
+ },
31
+ grey: {
32
+ 50: "#F9FAFB",
33
+ 100: "#F2F4F7",
34
+ 200: "#E4E7EC",
35
+ 300: "#D0D5DD",
36
+ 400: "#98A2B3",
37
+ 500: "#667085",
38
+ 600: "#475467",
39
+ 700: "#344054",
40
+ 800: "#1D2939",
41
+ 900: "#101828",
42
+ },
43
+ deepPurple: {
44
+ 50: '#F8F9FC',
45
+ 100: '#EAECF5',
46
+ 200: '#C8CCE5',
47
+ 300: '#9EA5D1',
48
+ 400: "#4E5BA6",
49
+ 500: '#4E5BA6',
50
+ 600: '#3E4784',
51
+ 700: '#363F72',
52
+ 800: '#293056',
53
+ 900: '#101323'
54
+ },
55
+ deepOrange: {
56
+ 50: "#FFF6ED",
57
+ 100: "#FFEAD5",
58
+ 200: "#FDDCAB",
59
+ 300: "#FEB273",
60
+ 400: "#FD853A",
61
+ 500: "#FF5C08",
62
+ 600: "#EC4A0A",
63
+ 700: "#C4320A",
64
+ 800: "#9C2A10",
65
+ 900: "#7E2410",
66
+ },
67
+ red: {
68
+ 50: '#FEF3F2',
69
+ 100: '#FEE4E2',
70
+ 200: '#FECDCA',
71
+ 300: '#FDA29B',
72
+ 400: '#F97066',
73
+ 500: '#F04438',
74
+ 600: '#D92D20',
75
+ 700: '#B42318',
76
+ 800: '#912018',
77
+ 900: '#7A271A',
78
+ },
79
+ pink: {
80
+ 50: '#FDF2FA',
81
+ 100: '#FCE7F6',
82
+ 200: '#FCCEEE',
83
+ 300: '#FAA7E0',
84
+ 400: "#F670C7",
85
+ 500: '#EE46BC',
86
+ 600: '#DD2590',
87
+ 700: '#C11574',
88
+ 800: '#9E165F',
89
+ 900: '#851651',
90
+ },
91
+ blue: {
92
+ 50: '#F0F9FF',
93
+ 100: "#E0F2FE",
94
+ 200: '#B9E6FE',
95
+ 300: '#7CD4FD',
96
+ 400: "#36BFFA",
97
+ 500: '#0BA5EC',
98
+ 600: '#0086C9',
99
+ 700: '#026AA2',
100
+ 800: '#065986',
101
+ 900: '#0B4A6F',
102
+ },
103
+ green: {
104
+ 50: '#ECFDF3',
105
+ 100: "#D1FADF",
106
+ 200: '#A6F4C5',
107
+ 300: '#6CE9A6',
108
+ 400: "#32D583",
109
+ 500: '#12B76A',
110
+ 600: '#039855',
111
+ 700: '#027A48',
112
+ 800: '#05603A',
113
+ 900: '#054F31',
114
+ },
115
+ purple: {
116
+ 50: '#F3E5F5',
117
+ 100: '#E1BEE7',
118
+ 200: '#CE93D8',
119
+ 300: '#BA68C8',
120
+ 400: '#AB47BC',
121
+ 500: '#9C27B0',
122
+ 600: '#8E24AA',
123
+ 700: '#7B1FA2',
124
+ 800: '#6A1B9A',
125
+ 900: '#4A148C',
126
+ },
127
+ action: {
128
+ active: "rgba(16, 24, 40, 0.40)",
129
+ hover: "rgba(16, 24, 40, 0.04)",
130
+ selected: "rgba(16, 24, 40, 0.08)",
131
+ disabled: "rgba(16, 24, 40, 0.26)",
132
+ disabledBackground: "rgba(16, 24, 40, 0.12)",
133
+ focus: "rgba(16, 24, 40, 0.12)",
134
+ }
35
135
  };
36
136
  export default palette;
package/es/theme/typography.d.ts CHANGED
@@ -1,3 +1,9 @@
1
1
  import { TypographyVariantsOptions } from '@mui/material/styles';
2
+ import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
3
+ declare module '@mui/material/styles' {
4
+ interface TypographyVariantsOptions {
5
+ body3?: TypographyStyleOptions;
6
+ }
7
+ }
2
8
  declare const typography: TypographyVariantsOptions;
3
9
  export default typography;
package/es/theme/typography.js CHANGED
@@ -1,4 +1,57 @@
1
1
  const typography = {
2
2
  fontFamily: "'Mulish'",
3
+ h1: {
4
+ fontSize: "36px",
5
+ lineHeight: "44px",
6
+ },
7
+ h2: {
8
+ fontSize: "32px",
9
+ lineHeight: "40px",
10
+ },
11
+ h3: {
12
+ fontSize: "28px",
13
+ lineHeight: "36px",
14
+ },
15
+ h4: {
16
+ fontSize: "24px",
17
+ lineHeight: "32px",
18
+ },
19
+ h5: {
20
+ fontSize: "20px",
21
+ lineHeight: "28px",
22
+ },
23
+ h6: {
24
+ fontSize: "16px",
25
+ lineHeight: "22px",
26
+ },
27
+ body1: {
28
+ fontSize: '16px',
29
+ lineHeight: '24px',
30
+ },
31
+ body2: {
32
+ fontSize: '14px',
33
+ lineHeight: '20px',
34
+ },
35
+ body3: {
36
+ fontSize: '12px',
37
+ lineHeight: '18px',
38
+ letterSpacing: '0.15px',
39
+ },
40
+ subtitle1: {
41
+ fontSize: '16px',
42
+ lineHeight: "28px",
43
+ },
44
+ subtitle2: {
45
+ fontSize: '14px',
46
+ lineHeight: "22px",
47
+ },
48
+ caption: {
49
+ fontSize: '12px',
50
+ lineHeight: "20px",
51
+ },
52
+ overline: {
53
+ fontSize: "12px",
54
+ letterSpacing: "1px",
55
+ },
3
56
  };
4
57
  export default typography;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zesty-io/material",
3
- "version": "0.2.1",
3
+ "version": "0.2.4",
4
4
  "description": "Contains custom components which are in addition to the @mui design-system",
5
5
  "author": "Zesty.io",
6
6
  "license": "MIT",
package/src/FieldTypeDate/index.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
2
2
  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
3
- import { DatePicker, DatePickerProps} from '@mui/x-date-pickers/DatePicker';
3
+ import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers';
4
4
  import { FormControl, FormLabel, TextField } from '@mui/material';
5
5
 
6
- export interface FieldTypeDateProps extends Omit<DatePickerProps<Date, Date>, 'renderInput'> {
6
+ export interface FieldTypeDateProps extends Omit<DesktopDatePickerProps<Date, Date>, 'renderInput'> {
7
7
  helperText?: string;
8
8
  error?: boolean;
9
9
  required?: boolean;
@@ -14,7 +14,7 @@ const FieldTypeDate = ({label, helperText, error, required, ...props}: FieldType
14
14
  <FormControl fullWidth required={required}>
15
15
  <FormLabel>{label}</FormLabel>
16
16
  <LocalizationProvider dateAdapter={AdapterDateFns}>
17
- <DatePicker
17
+ <DesktopDatePicker
18
18
  data-testid="zds-date-picker"
19
19
  renderInput={(params) =>
20
20
  <TextField
package/src/FieldTypeDateTime/index.tsx CHANGED
@@ -1,9 +1,9 @@
1
1
  import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
2
2
  import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
3
- import { DateTimePicker, DateTimePickerProps} from '@mui/x-date-pickers/DateTimePicker';
3
+ import { DesktopDateTimePicker, DesktopDateTimePickerProps } from '@mui/x-date-pickers';
4
4
  import { TextField, FormControl, FormLabel } from '@mui/material';
5
5
 
6
- export interface FieldTypeDateTimeProps extends Omit<DateTimePickerProps<Date, Date>, 'renderInput'> {
6
+ export interface FieldTypeDateTimeProps extends Omit<DesktopDateTimePickerProps<Date, Date>, 'renderInput'> {
7
7
  helperText?: string;
8
8
  error?: boolean;
9
9
  required?: boolean;
@@ -14,8 +14,8 @@ const FieldTypeDateTime = ({label, helperText, error, required, ...props}: Field
14
14
  <FormControl fullWidth required={required}>
15
15
  <FormLabel>{label}</FormLabel>
16
16
  <LocalizationProvider dateAdapter={AdapterDateFns}>
17
- <DateTimePicker
18
- data-testid="zds-date-picker"
17
+ <DesktopDateTimePicker
18
+ data-testid="zds-date-time-picker"
19
19
  renderInput={(params) =>
20
20
  <TextField
21
21
 
package/src/LegacyTheme/index.ts ADDED
@@ -0,0 +1,88 @@
1
+ import palette from './palette';
2
+ import typography from './typography';
3
+ import { createTheme, Theme } from '@mui/material/styles';
4
+
5
+ let theme: Theme = createTheme({
6
+ palette,
7
+ typography,
8
+ });
9
+
10
+ theme = createTheme(theme, {
11
+ components: {
12
+ MuiAccordionSummary: {
13
+ styleOverrides: {
14
+ root: {
15
+ backgroundColor: '#e4e9f1',
16
+ },
17
+ },
18
+ },
19
+ MuiButton: {
20
+ styleOverrides: {
21
+ root: {
22
+ minWidth: 'auto',
23
+ },
24
+ },
25
+ },
26
+ MuiTooltip: {
27
+ styleOverrides: {
28
+ tooltip: {
29
+ color: theme.palette.primary.contrastText,
30
+ backgroundColor: theme.palette.primary.main,
31
+ fontSize: '14px',
32
+ lineHeight: '20px',
33
+ },
34
+ arrow: {
35
+ color: theme.palette.primary.main,
36
+ },
37
+ },
38
+ },
39
+ MuiInputBase: {
40
+ styleOverrides: {
41
+ root: {
42
+ backgroundColor: theme.palette.primary.contrastText,
43
+ },
44
+ },
45
+ },
46
+ MuiFormLabel: {
47
+ styleOverrides: {
48
+ root: {
49
+ color: theme.palette.primary.dark,
50
+ },
51
+ asterisk: {
52
+ color: theme.palette.error.main,
53
+ },
54
+ },
55
+ },
56
+ MuiCard: {
57
+ styleOverrides: {
58
+ root: {
59
+ overflow: 'visible',
60
+ },
61
+ },
62
+ },
63
+ MuiCardHeader: {
64
+ styleOverrides: {
65
+ root: {
66
+ backgroundColor: '#e4e9f1',
67
+ },
68
+ },
69
+ },
70
+ MuiToggleButton: {
71
+ styleOverrides: {
72
+ root: ({ ownerState, theme }: any) => ({
73
+ backgroundColor: `${
74
+ theme.palette[ownerState.color].contrastText
75
+ } !important`,
76
+ ...(ownerState.selected && {
77
+ color: `${theme.palette[ownerState.color].contrastText} !important`,
78
+ backgroundColor: `${
79
+ theme.palette[ownerState.color].main
80
+ } !important`,
81
+ }),
82
+ }),
83
+ },
84
+ },
85
+ },
86
+ });
87
+
88
+ export default theme;
package/src/LegacyTheme/palette.ts ADDED
@@ -0,0 +1,25 @@
1
+ import { PaletteOptions } from '@mui/material/styles';
2
+ const palette: PaletteOptions = {
3
+ primary: {
4
+ main: '#404759',
5
+ contrastText: '#ffffff',
6
+ },
7
+ secondary: {
8
+ main: '#497edf',
9
+ contrastText: '#ffffff',
10
+ },
11
+ success: {
12
+ main: '#75bf25',
13
+ contrastText: '#ffffff',
14
+ },
15
+ warning: {
16
+ main: '#f17829',
17
+ contrastText: '#ffffff',
18
+ },
19
+ error: {
20
+ main: '#e53c05',
21
+ contrastText: '#ffffff',
22
+ },
23
+ };
24
+
25
+ export default palette;
package/src/LegacyTheme/typography.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { TypographyVariantsOptions } from '@mui/material/styles';
2
+
3
+ const typography: TypographyVariantsOptions = {
4
+ fontFamily: "'Mulish'",
5
+ };
6
+
7
+ export default typography;
package/src/index.ts CHANGED
@@ -1,3 +1,4 @@
1
+ export { default as legacyTheme } from './LegacyTheme';
1
2
  export { default as theme } from './theme';
2
3
  export { default as FieldTypeText } from './FieldTypeText';
3
4
  export { default as FieldTypeSort } from './FieldTypeSort';
package/src/theme/index.ts CHANGED
@@ -9,77 +9,42 @@ let theme: Theme = createTheme({
9
9
 
10
10
  theme = createTheme(theme, {
11
11
  components: {
12
- MuiAccordionSummary: {
13
- styleOverrides: {
14
- root: {
15
- backgroundColor: '#e4e9f1',
16
- },
17
- },
18
- },
19
- MuiButton: {
20
- styleOverrides: {
21
- root: {
22
- minWidth: 'auto',
23
- },
24
- },
25
- },
26
- MuiTooltip: {
27
- styleOverrides: {
28
- tooltip: {
29
- color: theme.palette.primary.contrastText,
30
- backgroundColor: theme.palette.primary.main,
31
- fontSize: '14px',
32
- lineHeight: '20px',
33
- },
34
- arrow: {
35
- color: theme.palette.primary.main,
36
- },
37
- },
38
- },
39
- MuiInputBase: {
12
+ MuiFormLabel: {
40
13
  styleOverrides: {
41
14
  root: {
42
- backgroundColor: theme.palette.primary.contrastText,
15
+ ...theme.typography.body2,
43
16
  },
44
17
  },
45
18
  },
46
- MuiFormLabel: {
19
+ MuiTab: {
47
20
  styleOverrides: {
48
21
  root: {
49
- color: theme.palette.primary.dark,
50
- },
51
- asterisk: {
52
- color: theme.palette.error.main,
22
+ borderBottom: 2,
23
+ borderColor: theme.palette.grey[100],
24
+ borderStyle: "solid",
53
25
  },
54
26
  },
55
27
  },
56
- MuiCard: {
28
+ MuiCardHeader: {
57
29
  styleOverrides: {
58
30
  root: {
59
- overflow: 'visible',
31
+ padding: "16px 16px 0px",
60
32
  },
61
33
  },
62
34
  },
63
- MuiCardHeader: {
35
+ MuiCardContent: {
64
36
  styleOverrides: {
65
37
  root: {
66
- backgroundColor: '#e4e9f1',
38
+ padding: "8px 16px 16px",
39
+ ":last-child": {
40
+ paddingBottom: "16px",
41
+ },
67
42
  },
68
43
  },
69
44
  },
70
- MuiToggleButton: {
71
- styleOverrides: {
72
- root: ({ ownerState, theme }: any) => ({
73
- backgroundColor: `${
74
- theme.palette[ownerState.color].contrastText
75
- } !important`,
76
- ...(ownerState.selected && {
77
- color: `${theme.palette[ownerState.color].contrastText} !important`,
78
- backgroundColor: `${
79
- theme.palette[ownerState.color].main
80
- } !important`,
81
- }),
82
- }),
45
+ MuiButton: {
46
+ defaultProps: {
47
+ disableElevation: true,
83
48
  },
84
49
  },
85
50
  },
package/src/theme/palette.ts CHANGED
@@ -1,38 +1,153 @@
1
+ import { Color } from '@mui/material';
1
2
  import { PaletteOptions } from '@mui/material/styles';
3
+
4
+ // Module augmentation
5
+ declare module '@mui/material/styles' {
6
+ export interface PaletteOptions {
7
+ red?: Partial<Color>;
8
+ deepPurple?: Partial<Color>;
9
+ deepOrange?: Partial<Color>;
10
+ pink?: Partial<Color>;
11
+ blue?: Partial<Color>;
12
+ green?: Partial<Color>;
13
+ purple?: Partial<Color>;
14
+ }
15
+ }
16
+
2
17
  const palette: PaletteOptions = {
3
18
  primary: {
4
- main: '#404759',
5
- contrastText: '#ffffff',
6
- },
7
- secondary: {
8
- main: '#497edf',
9
- contrastText: '#ffffff',
19
+ main: "#FF5D03",
20
+ dark: "#EC4A0A",
21
+ light: "#FD853A",
10
22
  },
11
23
  success: {
12
- main: '#75bf25',
13
- contrastText: '#ffffff',
24
+ main: "#12B76A",
25
+ dark: "#027A48",
26
+ light: "#D1FADF",
14
27
  },
15
28
  warning: {
16
- main: '#f17829',
17
- contrastText: '#ffffff',
29
+ main: "#F79009",
30
+ dark: "B54708",
31
+ light: "#FEF0C7",
18
32
  },
19
33
  error: {
20
- main: '#e53c05',
21
- contrastText: '#ffffff',
22
- },
23
- // action: {
24
- // active: 'rgba(0,0,0,54)',
25
- // hover: 'rgba(0,0,0,0.04)',
26
- // hoverOpacity: 0.04,
27
- // selected: 'rgba(0,0,0,0.08)',
28
- // selectedOpacity: 0.08,
29
- // disabled: 'rgba(26, 32, 44, 0.4)',
30
- // disabledBackground: 'rgba(26, 32, 44, 0.12)',
31
- // disabledOpacity: 0.4,
32
- // focus: 'rgba(0,0,0,0.12)',
33
- // focusOpacity: 0.12,
34
- // activatedOpacity: 0.12,
35
- // },
34
+ main: "#F04438",
35
+ dark: "#B42318",
36
+ light: "#FECDCA",
37
+ },
38
+ info: {
39
+ main: "#0BA5EC",
40
+ dark: "#026AA2",
41
+ light: "#7CD4FD",
42
+ },
43
+ text: {
44
+ primary: "#101828",
45
+ secondary: "#475467",
46
+ },
47
+ grey: {
48
+ 50: "#F9FAFB",
49
+ 100: "#F2F4F7",
50
+ 200: "#E4E7EC",
51
+ 300: "#D0D5DD",
52
+ 400: "#98A2B3",
53
+ 500: "#667085",
54
+ 600: "#475467",
55
+ 700: "#344054",
56
+ 800: "#1D2939",
57
+ 900: "#101828",
58
+ },
59
+ deepPurple: {
60
+ 50: '#F8F9FC',
61
+ 100: '#EAECF5',
62
+ 200: '#C8CCE5',
63
+ 300: '#9EA5D1',
64
+ 400: "#4E5BA6",
65
+ 500: '#4E5BA6',
66
+ 600: '#3E4784',
67
+ 700: '#363F72',
68
+ 800: '#293056',
69
+ 900: '#101323'
70
+ },
71
+ deepOrange: {
72
+ 50: "#FFF6ED",
73
+ 100: "#FFEAD5",
74
+ 200: "#FDDCAB",
75
+ 300: "#FEB273",
76
+ 400: "#FD853A",
77
+ 500: "#FF5C08",
78
+ 600: "#EC4A0A",
79
+ 700: "#C4320A",
80
+ 800: "#9C2A10",
81
+ 900: "#7E2410",
82
+ },
83
+ red: {
84
+ 50: '#FEF3F2',
85
+ 100: '#FEE4E2',
86
+ 200: '#FECDCA',
87
+ 300: '#FDA29B',
88
+ 400: '#F97066',
89
+ 500: '#F04438',
90
+ 600: '#D92D20',
91
+ 700: '#B42318',
92
+ 800: '#912018',
93
+ 900: '#7A271A',
94
+ },
95
+ pink: {
96
+ 50: '#FDF2FA',
97
+ 100: '#FCE7F6',
98
+ 200: '#FCCEEE',
99
+ 300: '#FAA7E0',
100
+ 400: "#F670C7",
101
+ 500: '#EE46BC',
102
+ 600: '#DD2590',
103
+ 700: '#C11574',
104
+ 800: '#9E165F',
105
+ 900: '#851651',
106
+ },
107
+ blue: {
108
+ 50: '#F0F9FF',
109
+ 100: "#E0F2FE",
110
+ 200: '#B9E6FE',
111
+ 300: '#7CD4FD',
112
+ 400: "#36BFFA",
113
+ 500: '#0BA5EC',
114
+ 600: '#0086C9',
115
+ 700: '#026AA2',
116
+ 800: '#065986',
117
+ 900: '#0B4A6F',
118
+ },
119
+ green: {
120
+ 50: '#ECFDF3',
121
+ 100: "#D1FADF",
122
+ 200: '#A6F4C5',
123
+ 300: '#6CE9A6',
124
+ 400: "#32D583",
125
+ 500: '#12B76A',
126
+ 600: '#039855',
127
+ 700: '#027A48',
128
+ 800: '#05603A',
129
+ 900: '#054F31',
130
+ },
131
+ purple: {
132
+ 50: '#F3E5F5',
133
+ 100: '#E1BEE7',
134
+ 200: '#CE93D8',
135
+ 300: '#BA68C8',
136
+ 400: '#AB47BC',
137
+ 500: '#9C27B0',
138
+ 600: '#8E24AA',
139
+ 700: '#7B1FA2',
140
+ 800: '#6A1B9A',
141
+ 900: '#4A148C',
142
+ },
143
+ action: {
144
+ active: "rgba(16, 24, 40, 0.40)",
145
+ hover: "rgba(16, 24, 40, 0.04)",
146
+ selected: "rgba(16, 24, 40, 0.08)",
147
+ disabled: "rgba(16, 24, 40, 0.26)",
148
+ disabledBackground: "rgba(16, 24, 40, 0.12)",
149
+ focus: "rgba(16, 24, 40, 0.12)",
150
+ }
36
151
  };
37
152
 
38
153
  export default palette;
package/src/theme/typography.ts CHANGED
@@ -1,7 +1,69 @@
1
1
  import { TypographyVariantsOptions } from '@mui/material/styles';
2
+ import { TypographyStyleOptions } from '@mui/material/styles/createTypography';
3
+
4
+ // Module augmentation
5
+ declare module '@mui/material/styles' {
6
+ export interface TypographyVariantsOptions {
7
+ body3?: TypographyStyleOptions;
8
+ }
9
+ }
2
10
 
3
11
  const typography: TypographyVariantsOptions = {
4
12
  fontFamily: "'Mulish'",
13
+ h1: {
14
+ fontSize: "36px",
15
+ lineHeight: "44px",
16
+ },
17
+ h2: {
18
+ fontSize: "32px",
19
+ lineHeight: "40px",
20
+ },
21
+ h3: {
22
+ fontSize: "28px",
23
+ lineHeight: "36px",
24
+ },
25
+ h4: {
26
+ fontSize: "24px",
27
+ lineHeight: "32px",
28
+ },
29
+ h5: {
30
+ fontSize: "20px",
31
+ lineHeight: "28px",
32
+ },
33
+ h6: {
34
+ fontSize: "16px",
35
+ lineHeight: "22px",
36
+ },
37
+ body1: {
38
+ fontSize: '16px',
39
+ lineHeight : '24px',
40
+ },
41
+ body2: {
42
+ fontSize: '14px',
43
+ lineHeight : '20px',
44
+ },
45
+ body3: {
46
+ fontSize: '12px',
47
+ lineHeight: '18px',
48
+ letterSpacing: '0.15px',
49
+ },
50
+ subtitle1: {
51
+ fontSize: '16px',
52
+ lineHeight: "28px",
53
+ },
54
+ subtitle2: {
55
+ fontSize: '14px',
56
+ lineHeight: "22px",
57
+ },
58
+ caption: {
59
+ fontSize: '12px',
60
+ lineHeight: "20px",
61
+ },
62
+ overline: {
63
+ fontSize: "12px",
64
+ letterSpacing: "1px",
65
+ },
66
+
5
67
  };
6
68
 
7
69
  export default typography;
package/zesty-io-material-0.1.2.tgz DELETED
Binary file