@veritone-ce/design-system 1.1.0 → 1.2.1
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.
package/dist/assets/theme.d.ts
CHANGED
|
@@ -6,55 +6,39 @@ declare module '@mui/material/Button' {
|
|
|
6
6
|
tertiary: true;
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
+
declare module '@mui/material/styles' {
|
|
10
|
+
interface TypeText {
|
|
11
|
+
tertiary: string;
|
|
12
|
+
}
|
|
13
|
+
}
|
|
9
14
|
declare module '@mui/material/styles/createPalette' {
|
|
10
15
|
type ButtonPaletteColorOptions = SimplePaletteColorOptions & {
|
|
11
16
|
hover: string;
|
|
12
17
|
};
|
|
18
|
+
type MiscPalleteColorOptions = {
|
|
19
|
+
background: string;
|
|
20
|
+
altBackground: string;
|
|
21
|
+
rowHoverGreyOne: string;
|
|
22
|
+
rowOn: string;
|
|
23
|
+
rowOnHoverGreyTwo: string;
|
|
24
|
+
};
|
|
13
25
|
interface Palette {
|
|
14
26
|
button: ButtonPaletteColorOptions;
|
|
15
27
|
neutral: Palette['primary'];
|
|
28
|
+
misc: MiscPalleteColorOptions;
|
|
16
29
|
}
|
|
17
30
|
interface PaletteOptions {
|
|
18
31
|
button?: ButtonPaletteColorOptions;
|
|
19
32
|
neutral?: PaletteColorOptions;
|
|
33
|
+
misc?: MiscPalleteColorOptions;
|
|
20
34
|
}
|
|
21
35
|
interface ThemeOptions extends MuiThemeOptions {
|
|
22
36
|
pallete?: {
|
|
23
37
|
button?: ButtonPaletteColorOptions;
|
|
24
38
|
neutral?: PaletteColorOptions;
|
|
39
|
+
misc?: MiscPalleteColorOptions;
|
|
25
40
|
};
|
|
26
41
|
}
|
|
27
42
|
}
|
|
28
|
-
export declare const colors: {
|
|
29
|
-
light: {
|
|
30
|
-
one: string;
|
|
31
|
-
two: string;
|
|
32
|
-
three: string;
|
|
33
|
-
four: string;
|
|
34
|
-
five: string;
|
|
35
|
-
six: string;
|
|
36
|
-
};
|
|
37
|
-
primary: {
|
|
38
|
-
one: string;
|
|
39
|
-
two: string;
|
|
40
|
-
three: string;
|
|
41
|
-
};
|
|
42
|
-
dark: {
|
|
43
|
-
one: string;
|
|
44
|
-
two: string;
|
|
45
|
-
three: string;
|
|
46
|
-
four: string;
|
|
47
|
-
five: string;
|
|
48
|
-
};
|
|
49
|
-
brand: {
|
|
50
|
-
pink: string;
|
|
51
|
-
blueOne: string;
|
|
52
|
-
blueTwo: string;
|
|
53
|
-
warn: string;
|
|
54
|
-
success: string;
|
|
55
|
-
info: string;
|
|
56
|
-
error: string;
|
|
57
|
-
};
|
|
58
|
-
};
|
|
59
43
|
declare let theme: import("@mui/material").Theme;
|
|
60
44
|
export default theme;
|
package/dist/assets/theme.js
CHANGED
|
@@ -1,75 +1,40 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
/* eslint-disable @typescript-eslint/ban-ts-comment */
|
|
3
3
|
import { createTheme } from '@mui/material';
|
|
4
|
+
import buttonTheme from 'components/Button/button.theme';
|
|
4
5
|
import sx from '@mui/system/sx';
|
|
5
6
|
import CheckCircleIcon from '@mui/icons-material/CheckCircle';
|
|
6
7
|
import InfoIcon from '@mui/icons-material/Info';
|
|
7
8
|
import WarningIcon from '@mui/icons-material/Error';
|
|
8
9
|
import ErrorIcon from '@mui/icons-material/Cancel';
|
|
9
|
-
|
|
10
|
-
light: {
|
|
11
|
-
one: '#FFFFFF',
|
|
12
|
-
two: '#FAFAFA',
|
|
13
|
-
three: '#F2F7FE',
|
|
14
|
-
four: '#EAF1FA',
|
|
15
|
-
five: '#E0E8F0',
|
|
16
|
-
six: '#D5DFE9'
|
|
17
|
-
},
|
|
18
|
-
primary: {
|
|
19
|
-
one: '#1871E8',
|
|
20
|
-
two: '#335B89',
|
|
21
|
-
three: '#6098D1'
|
|
22
|
-
},
|
|
23
|
-
dark: {
|
|
24
|
-
one: '#2A323C',
|
|
25
|
-
two: '#1B1D1F',
|
|
26
|
-
three: '#7C848D',
|
|
27
|
-
four: '#465364',
|
|
28
|
-
five: ' #5C6269'
|
|
29
|
-
},
|
|
10
|
+
const colors = {
|
|
30
11
|
brand: {
|
|
31
12
|
pink: '#D43060',
|
|
32
13
|
blueOne: '#214167',
|
|
33
14
|
blueTwo: '#335B89',
|
|
34
|
-
|
|
15
|
+
warning: '#FFBB0A',
|
|
35
16
|
success: '#28BA3F',
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
light: 300,
|
|
46
|
-
normal: 400,
|
|
47
|
-
medium: 600,
|
|
48
|
-
bold: 700,
|
|
49
|
-
|
|
50
|
-
sizes: {
|
|
51
|
-
heading: {
|
|
52
|
-
xxsmall: '1.6rem',
|
|
53
|
-
xsmall: '1.8rem',
|
|
54
|
-
small: '2rem',
|
|
55
|
-
medium: '2.4rem',
|
|
56
|
-
large: '2.6rem',
|
|
57
|
-
xlarge: '2.7rem',
|
|
58
|
-
xxlarge: '3rem',
|
|
59
|
-
xxxlarge: '3.6rem'
|
|
17
|
+
error: '#EB0000',
|
|
18
|
+
white: `#FFFFFF`
|
|
19
|
+
},
|
|
20
|
+
text: {
|
|
21
|
+
primary: `#2A323C`,
|
|
22
|
+
secondary: `#5C6269`,
|
|
23
|
+
tertiary: `#465364`,
|
|
24
|
+
disabled: `#7C848D`
|
|
60
25
|
},
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
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`
|
|
70
36
|
}
|
|
71
|
-
|
|
72
|
-
} */
|
|
37
|
+
};
|
|
73
38
|
// create theme in steps https://mui.com/material-ui/customization/theming/#api
|
|
74
39
|
let theme = createTheme({
|
|
75
40
|
typography: {
|
|
@@ -81,150 +46,49 @@ let theme = createTheme({
|
|
|
81
46
|
}
|
|
82
47
|
},
|
|
83
48
|
palette: {
|
|
49
|
+
common: {
|
|
50
|
+
white: colors.brand.white
|
|
51
|
+
},
|
|
84
52
|
action: {
|
|
85
|
-
disabledBackground: colors.
|
|
86
|
-
disabled: colors.
|
|
53
|
+
disabledBackground: colors.misc.rowHoverGreyOne,
|
|
54
|
+
disabled: colors.text.disabled
|
|
87
55
|
},
|
|
88
56
|
primary: {
|
|
89
57
|
main: colors.brand.blueOne
|
|
90
58
|
},
|
|
91
59
|
secondary: {
|
|
92
|
-
main: colors.
|
|
93
|
-
contrastText: colors.
|
|
60
|
+
main: colors.brand.blueTwo,
|
|
61
|
+
contrastText: colors.brand.white
|
|
94
62
|
},
|
|
95
63
|
neutral: {
|
|
96
|
-
main: colors.
|
|
64
|
+
main: colors.text.secondary
|
|
97
65
|
},
|
|
98
66
|
button: {
|
|
99
|
-
main: colors.primary
|
|
100
|
-
hover: colors.
|
|
67
|
+
main: colors.button.primary,
|
|
68
|
+
hover: colors.button.hover
|
|
101
69
|
},
|
|
102
70
|
success: {
|
|
103
71
|
main: colors.brand.success
|
|
104
72
|
},
|
|
105
|
-
info: {
|
|
106
|
-
main: colors.brand.info
|
|
107
|
-
},
|
|
108
73
|
warning: {
|
|
109
|
-
main: colors.brand.
|
|
74
|
+
main: colors.brand.warning
|
|
110
75
|
},
|
|
111
76
|
error: {
|
|
112
77
|
main: colors.brand.error
|
|
113
78
|
},
|
|
114
|
-
divider: colors.brand.blueOne
|
|
79
|
+
divider: colors.brand.blueOne,
|
|
80
|
+
text: colors.text,
|
|
81
|
+
misc: colors.misc
|
|
115
82
|
},
|
|
116
83
|
spacing: 10
|
|
117
84
|
});
|
|
118
85
|
theme = createTheme(theme, {
|
|
119
86
|
components: {
|
|
120
|
-
MuiButton:
|
|
121
|
-
defaultProps: {
|
|
122
|
-
variant: 'contained',
|
|
123
|
-
disableRipple: true
|
|
124
|
-
},
|
|
125
|
-
styleOverrides: {
|
|
126
|
-
// @ts-ignore
|
|
127
|
-
root: ({ ownerState }) => (Object.assign(Object.assign(Object.assign({ textTransform: 'none', fontWeight: '600', '&.MuiButton-outlinedError': {
|
|
128
|
-
backgroundColor: colors.light.one
|
|
129
|
-
}, '&.Mui-disabled': Object.assign({}, (ownerState.variant !== `text` && {
|
|
130
|
-
borderColor: colors.light.five,
|
|
131
|
-
backgroundColor: colors.light.two,
|
|
132
|
-
borderWidth: '1px',
|
|
133
|
-
borderStyle: 'solid'
|
|
134
|
-
})), '& .MuiButton-startIcon': Object.assign({ marginRight: 0, marginLeft: 0, marginTop: '-1px', fontSize: '18px' }, {
|
|
135
|
-
'& .MuiSvgIcon-root': {
|
|
136
|
-
fontSize: 18
|
|
137
|
-
}
|
|
138
|
-
}), '& .MuiButton-endIcon': Object.assign({ marginRight: 0, marginLeft: 0, marginTop: '-1px', fontSize: '18px' }, {
|
|
139
|
-
'& .MuiSvgIcon-root': {
|
|
140
|
-
fontSize: 18
|
|
141
|
-
}
|
|
142
|
-
}), '&.Mui-disabled .MuiButton-startIcon .MuiButton-endIcon': {
|
|
143
|
-
opacity: 0.3
|
|
144
|
-
} }, (ownerState.variant === `contained` &&
|
|
145
|
-
{
|
|
146
|
-
//@ts-ignore
|
|
147
|
-
backgroundColor: ownerState.color === `primary`
|
|
148
|
-
? theme.palette.button.main
|
|
149
|
-
: //@ts-ignore
|
|
150
|
-
theme.palette[ownerState.color].main,
|
|
151
|
-
':hover': {
|
|
152
|
-
//@ts-ignore
|
|
153
|
-
backgroundColor: ownerState.color === `primary`
|
|
154
|
-
? theme.palette.button.hover
|
|
155
|
-
: //@ts-ignore
|
|
156
|
-
theme.palette[ownerState.color]
|
|
157
|
-
}
|
|
158
|
-
})), (ownerState.variant === `outlined` &&
|
|
159
|
-
{
|
|
160
|
-
backgroundColor: ownerState.color === `primary`
|
|
161
|
-
? colors.light.one
|
|
162
|
-
: //@ts-ignore
|
|
163
|
-
theme.palette[ownerState.color],
|
|
164
|
-
//@ts-ignore
|
|
165
|
-
color: ownerState.color === `primary`
|
|
166
|
-
? theme.palette.neutral.main
|
|
167
|
-
: //@ts-ignore
|
|
168
|
-
theme.palette[ownerState.color].main,
|
|
169
|
-
borderColor: ownerState.color === `primary`
|
|
170
|
-
? theme.palette.neutral.main
|
|
171
|
-
: //@ts-ignore
|
|
172
|
-
theme.palette[ownerState.color].main,
|
|
173
|
-
':hover': {
|
|
174
|
-
backgroundColor: ownerState.color === `primary`
|
|
175
|
-
? colors.light.one
|
|
176
|
-
: //@ts-ignore
|
|
177
|
-
theme.palette[ownerState.color],
|
|
178
|
-
//@ts-ignore
|
|
179
|
-
color: ownerState.color === `primary`
|
|
180
|
-
? theme.palette.secondary.main
|
|
181
|
-
: //@ts-ignore
|
|
182
|
-
theme.palette[ownerState.color],
|
|
183
|
-
//@ts-ignore
|
|
184
|
-
borderColor: ownerState.color === `primary`
|
|
185
|
-
? theme.palette.secondary.main
|
|
186
|
-
: //@ts-ignore
|
|
187
|
-
theme.palette[ownerState.color]
|
|
188
|
-
}
|
|
189
|
-
})), (ownerState.variant === `text` &&
|
|
190
|
-
{
|
|
191
|
-
backgroundColor: 'transparent',
|
|
192
|
-
color: ownerState.color === `primary`
|
|
193
|
-
? colors.dark.four
|
|
194
|
-
: //@ts-ignore
|
|
195
|
-
theme.palette[ownerState.color].main,
|
|
196
|
-
':hover': {
|
|
197
|
-
backgroundColor: 'rgba(255, 255, 255, 0.15)',
|
|
198
|
-
//@ts-ignore
|
|
199
|
-
color: ownerState.color === `primary`
|
|
200
|
-
? colors.primary.two
|
|
201
|
-
: //@ts-ignore
|
|
202
|
-
theme.palette[ownerState.color]
|
|
203
|
-
}
|
|
204
|
-
})))
|
|
205
|
-
},
|
|
206
|
-
variants: [
|
|
207
|
-
{
|
|
208
|
-
props: {
|
|
209
|
-
variant: 'secondary'
|
|
210
|
-
},
|
|
211
|
-
style: sx({
|
|
212
|
-
backgroundColor: 'white',
|
|
213
|
-
color: theme.palette.neutral.main,
|
|
214
|
-
border: `1px solid ${theme.palette.neutral.main}`,
|
|
215
|
-
':hover': {
|
|
216
|
-
border: `1px solid ${theme.palette.primary.main}`,
|
|
217
|
-
color: theme.palette.primary.main,
|
|
218
|
-
backgroundColor: 'white'
|
|
219
|
-
}
|
|
220
|
-
})
|
|
221
|
-
}
|
|
222
|
-
]
|
|
223
|
-
},
|
|
87
|
+
MuiButton: buttonTheme(theme),
|
|
224
88
|
MuiInputLabel: {
|
|
225
89
|
styleOverrides: {
|
|
226
90
|
root: sx({
|
|
227
|
-
color:
|
|
91
|
+
color: theme.palette.text.secondary,
|
|
228
92
|
fontSize: `14px`,
|
|
229
93
|
lineHeight: `21px`,
|
|
230
94
|
fontWeight: `600`
|
|
@@ -259,16 +123,17 @@ theme = createTheme(theme, {
|
|
|
259
123
|
},
|
|
260
124
|
styleOverrides: {
|
|
261
125
|
root: sx({
|
|
262
|
-
color: colors.
|
|
126
|
+
color: colors.text.primary,
|
|
263
127
|
'& .MuiOutlinedInput-root': {
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
128
|
+
// TODO: Where did this color come from?
|
|
129
|
+
// '& fieldset': {
|
|
130
|
+
// borderColor: colors.light.five
|
|
131
|
+
// },
|
|
267
132
|
'&:hover fieldset': {
|
|
268
|
-
borderColor:
|
|
133
|
+
borderColor: theme.palette.secondary.main
|
|
269
134
|
},
|
|
270
135
|
'&.Mui-focused fieldset': {
|
|
271
|
-
border: `1px solid ${
|
|
136
|
+
border: `1px solid ${theme.palette.text.secondary}`
|
|
272
137
|
},
|
|
273
138
|
'&.Mui-error fieldset': {
|
|
274
139
|
borderColor: theme.palette.error.main
|
|
@@ -281,10 +146,10 @@ theme = createTheme(theme, {
|
|
|
281
146
|
styleOverrides: {
|
|
282
147
|
root: {
|
|
283
148
|
borderRadius: `100%`,
|
|
284
|
-
outline: `1px solid ${
|
|
149
|
+
outline: `1px solid ${theme.palette.text.tertiary}`,
|
|
285
150
|
color: `white`,
|
|
286
151
|
text: {
|
|
287
|
-
fill:
|
|
152
|
+
fill: theme.palette.text.tertiary
|
|
288
153
|
},
|
|
289
154
|
'&.Mui-active': {
|
|
290
155
|
outline: `none`,
|
|
@@ -328,7 +193,7 @@ theme = createTheme(theme, {
|
|
|
328
193
|
MuiLink: {
|
|
329
194
|
defaultProps: {
|
|
330
195
|
underline: `none`,
|
|
331
|
-
color:
|
|
196
|
+
color: theme.palette.primary.main
|
|
332
197
|
}
|
|
333
198
|
},
|
|
334
199
|
MuiSnackbar: {
|
|
@@ -361,7 +226,6 @@ theme = createTheme(theme, {
|
|
|
361
226
|
root: {
|
|
362
227
|
width: `100%`,
|
|
363
228
|
backgroundColor: `white`,
|
|
364
|
-
borderColor: colors.light.six,
|
|
365
229
|
position: `relative`,
|
|
366
230
|
overflow: `hidden`,
|
|
367
231
|
'&:after': {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
2
|
import { CircularProgress, Box } from '@mui/material';
|
|
3
|
-
import
|
|
3
|
+
import theme from 'assets/theme';
|
|
4
4
|
const Indicator = () => {
|
|
5
5
|
return (_jsx(Box, Object.assign({ className: "button-loader", "data-testid": "loading-indicator", sx: {
|
|
6
6
|
position: `absolute`,
|
|
@@ -11,8 +11,8 @@ const Indicator = () => {
|
|
|
11
11
|
display: `grid`,
|
|
12
12
|
justifyItems: `center`,
|
|
13
13
|
alignItems: `center`,
|
|
14
|
-
background:
|
|
15
|
-
border: `1px solid ${
|
|
14
|
+
background: theme.palette.misc.rowHoverGreyOne,
|
|
15
|
+
border: `1px solid ${theme.palette.misc.rowOnHoverGreyTwo}`,
|
|
16
16
|
borderRadius: '0.2rem'
|
|
17
17
|
} }, { children: _jsx(CircularProgress, { size: 20 }) })));
|
|
18
18
|
};
|