@veritone-ce/design-system 1.0.2 → 1.2.0

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 (14) hide show
  1. package/dist/assets/theme.d.ts +15 -2
  2. package/dist/assets/theme.js +123 -151
  3. package/dist/components/Button/Indicator.js +5 -1
  4. package/dist/components/Button/button.theme.d.ts +838 -0
  5. package/dist/components/Button/button.theme.js +106 -0
  6. package/dist/components/Button/index.d.ts +3 -4
  7. package/dist/components/Button/index.js +14 -3
  8. package/dist/components/Button/useButtonProps.d.ts +1 -1
  9. package/dist/components/Button/useButtonProps.js +2 -2
  10. package/dist/components/ThemeProvider/index.d.ts +1 -1
  11. package/dist/components/ThemeProvider/index.js +3 -3
  12. package/dist/index.d.ts +2 -0
  13. package/dist/index.js +2 -0
  14. package/package.json +43 -58
package/dist/assets/theme.d.ts CHANGED
@@ -1,6 +1,4 @@
1
1
  import { ThemeOptions as MuiThemeOptions } from '@mui/material';
2
- import '@fontsource/nunito-sans';
3
- import '@fontsource/dosis';
4
2
  declare module '@mui/material/Button' {
5
3
  interface ButtonPropsVariantOverrides {
6
4
  primary: true;
@@ -8,22 +6,37 @@ declare module '@mui/material/Button' {
8
6
  tertiary: true;
9
7
  }
10
8
  }
9
+ declare module '@mui/material/styles' {
10
+ interface TypeText {
11
+ tertiary: string;
12
+ }
13
+ }
11
14
  declare module '@mui/material/styles/createPalette' {
12
15
  type ButtonPaletteColorOptions = SimplePaletteColorOptions & {
13
16
  hover: string;
14
17
  };
18
+ type MiscPalleteColorOptions = {
19
+ background: string;
20
+ altBackground: string;
21
+ rowHoverGreyOne: string;
22
+ rowOn: string;
23
+ rowOnHoverGreyTwo: string;
24
+ };
15
25
  interface Palette {
16
26
  button: ButtonPaletteColorOptions;
17
27
  neutral: Palette['primary'];
28
+ misc: MiscPalleteColorOptions;
18
29
  }
19
30
  interface PaletteOptions {
20
31
  button?: ButtonPaletteColorOptions;
21
32
  neutral?: PaletteColorOptions;
33
+ misc?: MiscPalleteColorOptions;
22
34
  }
23
35
  interface ThemeOptions extends MuiThemeOptions {
24
36
  pallete?: {
25
37
  button?: ButtonPaletteColorOptions;
26
38
  neutral?: PaletteColorOptions;
39
+ misc?: MiscPalleteColorOptions;
27
40
  };
28
41
  }
29
42
  }
package/dist/assets/theme.js CHANGED
@@ -1,12 +1,40 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
+ /* eslint-disable @typescript-eslint/ban-ts-comment */
2
3
  import { createTheme } from '@mui/material';
3
- import '@fontsource/nunito-sans';
4
- import '@fontsource/dosis';
4
+ import buttonTheme from 'components/Button/button.theme';
5
5
  import sx from '@mui/system/sx';
6
6
  import CheckCircleIcon from '@mui/icons-material/CheckCircle';
7
7
  import InfoIcon from '@mui/icons-material/Info';
8
8
  import WarningIcon from '@mui/icons-material/Error';
9
9
  import ErrorIcon from '@mui/icons-material/Cancel';
10
+ const colors = {
11
+ brand: {
12
+ pink: '#D43060',
13
+ blueOne: '#214167',
14
+ blueTwo: '#335B89',
15
+ warning: '#FFBB0A',
16
+ success: '#28BA3F',
17
+ error: '#EB0000',
18
+ white: `#FFFFFF`
19
+ },
20
+ text: {
21
+ primary: `#2A323C`,
22
+ secondary: `#5C6269`,
23
+ tertiary: `#465364`,
24
+ disabled: `#7C848D`
25
+ },
26
+ button: {
27
+ primary: `#1871E8`,
28
+ hover: `#1259B9`
29
+ },
30
+ misc: {
31
+ background: `#E4ECF3`,
32
+ altBackground: `#E0E8F0`,
33
+ rowHoverGreyOne: `#FAFAFA`,
34
+ rowOn: `#F2F7FE`,
35
+ rowOnHoverGreyTwo: `#EAF1FA`
36
+ }
37
+ };
10
38
  // create theme in steps https://mui.com/material-ui/customization/theming/#api
11
39
  let theme = createTheme({
12
40
  typography: {
@@ -14,114 +42,58 @@ let theme = createTheme({
14
42
  h2: {
15
43
  fontSize: '1.429rem',
16
44
  lineHeight: '2.143rem',
17
- fontWeight: '700',
18
- },
45
+ fontWeight: '700'
46
+ }
19
47
  },
20
48
  palette: {
49
+ common: {
50
+ white: colors.brand.white
51
+ },
52
+ action: {
53
+ disabledBackground: colors.misc.rowHoverGreyOne,
54
+ disabled: colors.text.disabled
55
+ },
21
56
  primary: {
22
- main: '#214167',
57
+ main: colors.brand.blueOne
23
58
  },
24
59
  secondary: {
25
- main: '#335B89',
26
- contrastText: '#ffffff',
60
+ main: colors.brand.blueTwo,
61
+ contrastText: colors.brand.white
27
62
  },
28
63
  neutral: {
29
- main: '#5C6269',
64
+ main: colors.text.secondary
30
65
  },
31
66
  button: {
32
- main: '#1871E8',
33
- hover: '#335B89',
67
+ main: colors.button.primary,
68
+ hover: colors.button.hover
34
69
  },
35
70
  success: {
36
- main: '#28BA3F',
37
- },
38
- info: {
39
- main: '#325491',
71
+ main: colors.brand.success
40
72
  },
41
73
  warning: {
42
- main: '#FFBB0A',
74
+ main: colors.brand.warning
43
75
  },
44
76
  error: {
45
- main: '#FF0000',
77
+ main: colors.brand.error
46
78
  },
47
- divider: '#214167',
79
+ divider: colors.brand.blueOne,
80
+ text: colors.text,
81
+ misc: colors.misc
48
82
  },
49
- spacing: 10,
83
+ spacing: 10
50
84
  });
51
85
  theme = createTheme(theme, {
52
86
  components: {
53
- MuiButton: {
54
- defaultProps: {
55
- variant: 'contained',
56
- disableRipple: true,
57
- },
58
- styleOverrides: {
59
- // @ts-ignore
60
- root: ({ ownerState }) => (Object.assign(Object.assign(Object.assign({ textTransform: 'none', fontWeight: '600', paddingTop: '7px', paddingBottom: '5px', '&.Mui-disabled': {
61
- borderColor: `#E0E8F0`,
62
- }, '& .MuiButton-startIcon': {
63
- marginTop: '-1px',
64
- }, '& .MuiButton-endIcon': {
65
- marginTop: '-1px',
66
- }, '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
67
- opacity: 0.3,
68
- } }, (ownerState.variant === `contained` &&
69
- {
70
- //@ts-ignore
71
- backgroundColor: ownerState.color === `primary` ? theme.palette.button.main : theme.palette[ownerState.color].main,
72
- ':hover': {
73
- //@ts-ignore
74
- backgroundColor: ownerState.color === `primary` ? theme.palette.button.hover : theme.palette[ownerState.color],
75
- },
76
- })), (ownerState.variant === `outlined` &&
77
- {
78
- //@ts-ignore
79
- color: ownerState.color === `primary` ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
80
- //@ts-ignore
81
- borderColor: ownerState.color === `primary` ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
82
- ':hover': {
83
- //@ts-ignore
84
- color: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
85
- //@ts-ignore
86
- borderColor: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
87
- },
88
- })), (ownerState.variant === `text` &&
89
- {
90
- //@ts-ignore
91
- color: ownerState.color === `primary` ? theme.palette.neutral.main : theme.palette[ownerState.color].main,
92
- ':hover': {
93
- //@ts-ignore
94
- color: ownerState.color === `primary` ? theme.palette.secondary.main : theme.palette[ownerState.color],
95
- },
96
- }))),
97
- },
98
- variants: [
99
- {
100
- props: {
101
- variant: 'secondary',
102
- },
103
- style: sx({
104
- backgroundColor: 'white',
105
- color: theme.palette.neutral.main,
106
- border: `1px solid ${theme.palette.neutral.main}`,
107
- ':hover': {
108
- border: `1px solid ${theme.palette.primary.main}`,
109
- color: theme.palette.primary.main,
110
- backgroundColor: 'white',
111
- },
112
- }),
113
- },
114
- ],
115
- },
87
+ MuiButton: buttonTheme(theme),
116
88
  MuiInputLabel: {
117
89
  styleOverrides: {
118
90
  root: sx({
119
- color: `#5C6269`,
91
+ color: theme.palette.text.secondary,
120
92
  fontSize: `14px`,
121
93
  lineHeight: `21px`,
122
- fontWeight: `600`,
123
- }),
124
- },
94
+ fontWeight: `600`
95
+ })
96
+ }
125
97
  },
126
98
  MuiFormHelperText: {
127
99
  styleOverrides: {
@@ -139,54 +111,55 @@ theme = createTheme(theme, {
139
111
  top: `50%`,
140
112
  transform: `translate(0, -50%)`,
141
113
  backgroundColor: theme.palette.error.main,
142
- borderRadius: `100%`,
143
- },
144
- },
145
- }),
146
- },
114
+ borderRadius: `100%`
115
+ }
116
+ }
117
+ })
118
+ }
147
119
  },
148
120
  MuiTextField: {
149
121
  defaultProps: {
150
- size: 'small',
122
+ size: 'small'
151
123
  },
152
124
  styleOverrides: {
153
125
  root: sx({
154
- color: `#2A323C`,
126
+ color: colors.text.primary,
155
127
  '& .MuiOutlinedInput-root': {
156
- '& fieldset': {
157
- borderColor: `#E0E8F0`,
158
- },
128
+ // TODO: Where did this color come from?
129
+ // '& fieldset': {
130
+ // borderColor: colors.light.five
131
+ // },
159
132
  '&:hover fieldset': {
160
- borderColor: `#335B89`,
133
+ borderColor: theme.palette.secondary.main
161
134
  },
162
135
  '&.Mui-focused fieldset': {
163
- border: `1px solid #5C6269`,
136
+ border: `1px solid ${theme.palette.text.secondary}`
164
137
  },
165
138
  '&.Mui-error fieldset': {
166
- borderColor: theme.palette.error.main,
167
- },
168
- },
169
- }),
170
- },
139
+ borderColor: theme.palette.error.main
140
+ }
141
+ }
142
+ })
143
+ }
171
144
  },
172
145
  MuiStepIcon: {
173
146
  styleOverrides: {
174
147
  root: {
175
148
  borderRadius: `100%`,
176
- outline: `1px solid #465364`,
149
+ outline: `1px solid ${theme.palette.text.tertiary}`,
177
150
  color: `white`,
178
151
  text: {
179
- fill: `#465364`,
152
+ fill: theme.palette.text.tertiary
180
153
  },
181
154
  '&.Mui-active': {
182
155
  outline: `none`,
183
156
  color: theme.palette.button.main,
184
157
  text: {
185
- fill: `white`,
186
- },
187
- },
188
- },
189
- },
158
+ fill: `white`
159
+ }
160
+ }
161
+ }
162
+ }
190
163
  },
191
164
  MuiDialogTitle: {
192
165
  styleOverrides: {
@@ -196,9 +169,9 @@ theme = createTheme(theme, {
196
169
  paddingTop: theme.spacing(3),
197
170
  paddingLeft: theme.spacing(3),
198
171
  paddingRight: theme.spacing(3),
199
- paddingBottom: theme.spacing(1),
200
- },
201
- },
172
+ paddingBottom: theme.spacing(1)
173
+ }
174
+ }
202
175
  },
203
176
  MuiDialogContent: {
204
177
  styleOverrides: {
@@ -206,38 +179,38 @@ theme = createTheme(theme, {
206
179
  paddingTop: 0,
207
180
  paddingLeft: theme.spacing(3),
208
181
  paddingRight: theme.spacing(3),
209
- paddingBottom: theme.spacing(1),
210
- },
211
- },
182
+ paddingBottom: theme.spacing(1)
183
+ }
184
+ }
212
185
  },
213
186
  MuiDialogActions: {
214
187
  styleOverrides: {
215
188
  root: {
216
- padding: theme.spacing(3),
217
- },
218
- },
189
+ padding: theme.spacing(3)
190
+ }
191
+ }
219
192
  },
220
193
  MuiLink: {
221
194
  defaultProps: {
222
195
  underline: `none`,
223
- color: `#1871E8`,
224
- },
196
+ color: theme.palette.primary.main
197
+ }
225
198
  },
226
199
  MuiSnackbar: {
227
200
  defaultProps: {
228
201
  autoHideDuration: 6000,
229
202
  anchorOrigin: {
230
203
  vertical: `top`,
231
- horizontal: `right`,
232
- },
204
+ horizontal: `right`
205
+ }
233
206
  },
234
207
  styleOverrides: {
235
208
  root: {
236
209
  width: `100%`,
237
210
  maxWidth: `415px`,
238
- position: `absolute`,
239
- },
240
- },
211
+ position: `absolute`
212
+ }
213
+ }
241
214
  },
242
215
  MuiAlert: {
243
216
  defaultProps: {
@@ -246,14 +219,13 @@ theme = createTheme(theme, {
246
219
  success: _jsx(CheckCircleIcon, {}),
247
220
  info: _jsx(InfoIcon, {}),
248
221
  warning: _jsx(WarningIcon, {}),
249
- error: _jsx(ErrorIcon, {}),
250
- },
222
+ error: _jsx(ErrorIcon, {})
223
+ }
251
224
  },
252
225
  styleOverrides: {
253
226
  root: {
254
227
  width: `100%`,
255
228
  backgroundColor: `white`,
256
- borderColor: `#D5DFE9`,
257
229
  position: `relative`,
258
230
  overflow: `hidden`,
259
231
  '&:after': {
@@ -262,59 +234,59 @@ theme = createTheme(theme, {
262
234
  width: `4px`,
263
235
  left: 0,
264
236
  top: 0,
265
- bottom: 0,
237
+ bottom: 0
266
238
  },
267
239
  '&.MuiAlert-outlinedSuccess:after': {
268
- backgroundColor: theme.palette.success.main,
240
+ backgroundColor: theme.palette.success.main
269
241
  },
270
242
  '&.MuiAlert-outlinedInfo:after': {
271
- backgroundColor: theme.palette.info.main,
243
+ backgroundColor: theme.palette.info.main
272
244
  },
273
245
  '&.MuiAlert-outlinedWarning:after': {
274
- backgroundColor: theme.palette.warning.main,
246
+ backgroundColor: theme.palette.warning.main
275
247
  },
276
248
  '&.MuiAlert-outlinedError:after': {
277
- backgroundColor: theme.palette.error.main,
249
+ backgroundColor: theme.palette.error.main
278
250
  },
279
251
  '& .MuiAlert-icon': {
280
252
  opacity: 1,
281
- fontSize: 20,
253
+ fontSize: 20
282
254
  },
283
255
  '& .MuiAlert-message': {
284
256
  fontSize: `12px`,
285
257
  lineHeight: `22px`,
286
- color: `black`,
287
- },
288
- },
289
- },
258
+ color: `black`
259
+ }
260
+ }
261
+ }
290
262
  },
291
263
  MuiCircularProgress: {
292
264
  styleOverrides: {
293
265
  root: {
294
- color: theme.palette.button.main,
295
- },
296
- },
266
+ color: theme.palette.button.main
267
+ }
268
+ }
297
269
  },
298
270
  MuiCardContent: {
299
271
  styleOverrides: {
300
272
  root: {
301
273
  padding: theme.spacing(2),
302
- paddingTop: theme.spacing(1),
303
- },
304
- },
274
+ paddingTop: theme.spacing(1)
275
+ }
276
+ }
305
277
  },
306
278
  MuiDataGrid: {
307
279
  styleOverrides: {
308
280
  root: {
309
281
  '& .MuiDataGrid-columnHeader:focus': {
310
- outline: 0,
282
+ outline: 0
311
283
  },
312
284
  '& .MuiDataGrid-cell:focus': {
313
- outline: 0,
314
- },
315
- },
316
- },
317
- },
318
- },
285
+ outline: 0
286
+ }
287
+ }
288
+ }
289
+ }
290
+ }
319
291
  });
320
292
  export default theme;
package/dist/components/Button/Indicator.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { CircularProgress, Box } from '@mui/material';
3
+ import theme from 'assets/theme';
3
4
  const Indicator = () => {
4
- return (_jsx(Box, Object.assign({ sx: {
5
+ return (_jsx(Box, Object.assign({ className: "button-loader", "data-testid": "loading-indicator", sx: {
5
6
  position: `absolute`,
6
7
  top: 0,
7
8
  left: 0,
@@ -10,6 +11,9 @@ const Indicator = () => {
10
11
  display: `grid`,
11
12
  justifyItems: `center`,
12
13
  alignItems: `center`,
14
+ background: theme.palette.misc.rowHoverGreyOne,
15
+ border: `1px solid ${theme.palette.misc.rowOnHoverGreyTwo}`,
16
+ borderRadius: '0.2rem'
13
17
  } }, { children: _jsx(CircularProgress, { size: 20 }) })));
14
18
  };
15
19
  export default Indicator;