@backstage/theme 0.3.0 → 0.4.0-next.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.
- package/CHANGELOG.md +17 -0
- package/dist/index.d.ts +399 -54
- package/dist/index.esm.js +429 -213
- package/dist/index.esm.js.map +1 -1
- package/package.json +7 -3
package/dist/index.esm.js
CHANGED
|
@@ -1,147 +1,129 @@
|
|
|
1
|
-
import { createTheme as createTheme$
|
|
2
|
-
import { darken, lighten } from '@material
|
|
3
|
-
import
|
|
1
|
+
import { createTheme as createTheme$2, ThemeProvider } from '@material-ui/core/styles';
|
|
2
|
+
import { darken, lighten, createTheme as createTheme$1, adaptV4Theme, StyledEngineProvider, ThemeProvider as ThemeProvider$1 } from '@mui/material/styles';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { unstable_ClassNameGenerator } from '@mui/material/className';
|
|
5
|
+
import CSSBaseline from '@mui/material/CssBaseline';
|
|
4
6
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
rubyRed: ["#98002B", "#8D1134"],
|
|
15
|
-
toastyOrange: ["#BE2200", "#A41D00"],
|
|
16
|
-
purpleSky: ["#8912CA", "#3E00EA"],
|
|
17
|
-
eveningSea: ["#00FFF2", "#035355"],
|
|
18
|
-
teal: ["#005B4B"],
|
|
19
|
-
pinkSea: ["#C8077A", "#C2297D"],
|
|
20
|
-
greens: ["#4BB8A5", "#187656"]
|
|
21
|
-
};
|
|
22
|
-
function genPageTheme(props) {
|
|
23
|
-
var _a;
|
|
24
|
-
const { colors, shape, options } = props;
|
|
25
|
-
const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors;
|
|
26
|
-
const gradient = `linear-gradient(90deg, ${gradientColors.join(", ")})`;
|
|
27
|
-
const backgroundImage = `${shape}, ${gradient}`;
|
|
28
|
-
const fontColor = (_a = options == null ? void 0 : options.fontColor) != null ? _a : "#FFFFFF";
|
|
29
|
-
return {
|
|
30
|
-
colors,
|
|
31
|
-
shape,
|
|
32
|
-
backgroundImage,
|
|
33
|
-
fontColor
|
|
34
|
-
};
|
|
7
|
+
function adaptV5CssBaselineOverride(theme, overrides) {
|
|
8
|
+
if (!overrides || typeof overrides === "string") {
|
|
9
|
+
return void 0;
|
|
10
|
+
}
|
|
11
|
+
const styles = typeof overrides === "function" ? overrides(theme) : overrides;
|
|
12
|
+
if (styles) {
|
|
13
|
+
return { "@global": styles };
|
|
14
|
+
}
|
|
15
|
+
return void 0;
|
|
35
16
|
}
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
colors: colorVariants.pinkSea,
|
|
40
|
-
shape: shapes.wave2
|
|
41
|
-
}),
|
|
42
|
-
tool: genPageTheme({ colors: colorVariants.purpleSky, shape: shapes.round }),
|
|
43
|
-
service: genPageTheme({
|
|
44
|
-
colors: colorVariants.marineBlue,
|
|
45
|
-
shape: shapes.wave
|
|
46
|
-
}),
|
|
47
|
-
website: genPageTheme({ colors: colorVariants.veryBlue, shape: shapes.wave }),
|
|
48
|
-
library: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.wave }),
|
|
49
|
-
other: genPageTheme({ colors: colorVariants.darkGrey, shape: shapes.wave }),
|
|
50
|
-
app: genPageTheme({ colors: colorVariants.toastyOrange, shape: shapes.wave }),
|
|
51
|
-
apis: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave2 }),
|
|
52
|
-
card: genPageTheme({ colors: colorVariants.greens, shape: shapes.wave })
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
const DEFAULT_HTML_FONT_SIZE = 16;
|
|
56
|
-
const DEFAULT_FONT_FAMILY = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif';
|
|
57
|
-
function createThemeOptions(options) {
|
|
58
|
-
const {
|
|
59
|
-
palette,
|
|
60
|
-
htmlFontSize = DEFAULT_HTML_FONT_SIZE,
|
|
61
|
-
fontFamily = DEFAULT_FONT_FAMILY,
|
|
62
|
-
defaultPageTheme,
|
|
63
|
-
pageTheme: pageTheme$1 = pageTheme
|
|
64
|
-
} = options;
|
|
65
|
-
if (!pageTheme$1[defaultPageTheme]) {
|
|
66
|
-
throw new Error(`${defaultPageTheme} is not defined in pageTheme.`);
|
|
17
|
+
function adaptV5Override(theme, overrides) {
|
|
18
|
+
if (!overrides || typeof overrides === "string") {
|
|
19
|
+
return void 0;
|
|
67
20
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
21
|
+
if (typeof overrides === "object") {
|
|
22
|
+
return Object.fromEntries(
|
|
23
|
+
Object.entries(overrides).map(([className, style]) => {
|
|
24
|
+
if (typeof style === "function") {
|
|
25
|
+
return [className, style({ theme })];
|
|
26
|
+
}
|
|
27
|
+
return [className, style];
|
|
28
|
+
})
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
return overrides;
|
|
32
|
+
}
|
|
33
|
+
const stateStyleKeyPattern = /^&.Mui-([\w-]+)$/;
|
|
34
|
+
function extractV5StateOverrides(overrides) {
|
|
35
|
+
let output = overrides;
|
|
36
|
+
if (!overrides || typeof overrides !== "object") {
|
|
37
|
+
return output;
|
|
38
|
+
}
|
|
39
|
+
for (const className of Object.keys(overrides)) {
|
|
40
|
+
const styles = overrides[className];
|
|
41
|
+
if (!styles || typeof styles !== "object") {
|
|
42
|
+
continue;
|
|
43
|
+
}
|
|
44
|
+
for (const _styleKey of Object.keys(styles)) {
|
|
45
|
+
const styleKey = _styleKey;
|
|
46
|
+
const match = styleKey.match(stateStyleKeyPattern);
|
|
47
|
+
if (match) {
|
|
48
|
+
const [, state] = match;
|
|
49
|
+
const { [styleKey]: stateStyles, ...restStyles } = styles;
|
|
50
|
+
if (stateStyles) {
|
|
51
|
+
output = {
|
|
52
|
+
...output,
|
|
53
|
+
[className]: restStyles,
|
|
54
|
+
[state]: stateStyles
|
|
55
|
+
};
|
|
56
|
+
}
|
|
76
57
|
}
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
marginBottom: 6
|
|
100
|
-
},
|
|
101
|
-
h2: {
|
|
102
|
-
fontSize: 40,
|
|
103
|
-
fontWeight: 700,
|
|
104
|
-
marginBottom: 8
|
|
105
|
-
},
|
|
106
|
-
h1: {
|
|
107
|
-
fontSize: 54,
|
|
108
|
-
fontWeight: 700,
|
|
109
|
-
marginBottom: 10
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
return output;
|
|
61
|
+
}
|
|
62
|
+
function transformV5ComponentThemesToV4(theme, components = {}) {
|
|
63
|
+
const overrides = {};
|
|
64
|
+
const props = {};
|
|
65
|
+
for (const name of Object.keys(components)) {
|
|
66
|
+
const component = components[name];
|
|
67
|
+
if (!component) {
|
|
68
|
+
continue;
|
|
69
|
+
}
|
|
70
|
+
if ("styleOverrides" in component) {
|
|
71
|
+
if (name === "MuiCssBaseline") {
|
|
72
|
+
overrides[name] = adaptV5CssBaselineOverride(
|
|
73
|
+
theme,
|
|
74
|
+
component.styleOverrides
|
|
75
|
+
);
|
|
76
|
+
} else {
|
|
77
|
+
overrides[name] = extractV5StateOverrides(
|
|
78
|
+
adaptV5Override(theme, component.styleOverrides)
|
|
79
|
+
);
|
|
110
80
|
}
|
|
111
|
-
},
|
|
112
|
-
page: pageTheme$1[defaultPageTheme],
|
|
113
|
-
getPageTheme: ({ themeId }) => {
|
|
114
|
-
var _a;
|
|
115
|
-
return (_a = pageTheme$1[themeId]) != null ? _a : pageTheme$1[defaultPageTheme];
|
|
116
81
|
}
|
|
117
|
-
|
|
82
|
+
if ("defaultProps" in component) {
|
|
83
|
+
props[name] = component.defaultProps;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
return { overrides, props };
|
|
118
87
|
}
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
88
|
+
|
|
89
|
+
const defaultComponentThemes = {
|
|
90
|
+
MuiCssBaseline: {
|
|
91
|
+
styleOverrides: (theme) => ({
|
|
92
|
+
html: {
|
|
93
|
+
height: "100%",
|
|
94
|
+
fontFamily: theme.typography.fontFamily
|
|
95
|
+
},
|
|
96
|
+
body: {
|
|
97
|
+
height: "100%",
|
|
98
|
+
fontFamily: theme.typography.fontFamily,
|
|
99
|
+
overscrollBehaviorY: "none",
|
|
100
|
+
fontSize: "0.875rem",
|
|
101
|
+
lineHeight: 1.43
|
|
102
|
+
},
|
|
103
|
+
a: {
|
|
104
|
+
color: "inherit",
|
|
105
|
+
textDecoration: "none"
|
|
136
106
|
}
|
|
137
|
-
}
|
|
138
|
-
|
|
107
|
+
})
|
|
108
|
+
},
|
|
109
|
+
MuiGrid: {
|
|
110
|
+
defaultProps: {
|
|
111
|
+
spacing: 2
|
|
112
|
+
}
|
|
113
|
+
},
|
|
114
|
+
MuiSwitch: {
|
|
115
|
+
defaultProps: {
|
|
116
|
+
color: "primary"
|
|
117
|
+
}
|
|
118
|
+
},
|
|
119
|
+
MuiTableRow: {
|
|
120
|
+
styleOverrides: {
|
|
139
121
|
// Alternating row backgrounds
|
|
140
|
-
root: {
|
|
122
|
+
root: ({ theme }) => ({
|
|
141
123
|
"&:nth-of-type(odd)": {
|
|
142
124
|
backgroundColor: theme.palette.background.default
|
|
143
125
|
}
|
|
144
|
-
},
|
|
126
|
+
}),
|
|
145
127
|
// Use pointer for hoverable rows
|
|
146
128
|
hover: {
|
|
147
129
|
"&:hover": {
|
|
@@ -149,15 +131,17 @@ function createThemeOverrides(theme) {
|
|
|
149
131
|
}
|
|
150
132
|
},
|
|
151
133
|
// Alternating head backgrounds
|
|
152
|
-
head: {
|
|
134
|
+
head: ({ theme }) => ({
|
|
153
135
|
"&:nth-of-type(odd)": {
|
|
154
136
|
backgroundColor: theme.palette.background.paper
|
|
155
137
|
}
|
|
156
|
-
}
|
|
157
|
-
}
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
138
|
+
})
|
|
139
|
+
}
|
|
140
|
+
},
|
|
141
|
+
// Tables are more dense than default mui tables
|
|
142
|
+
MuiTableCell: {
|
|
143
|
+
styleOverrides: {
|
|
144
|
+
root: ({ theme }) => ({
|
|
161
145
|
wordBreak: "break-word",
|
|
162
146
|
overflow: "hidden",
|
|
163
147
|
verticalAlign: "middle",
|
|
@@ -165,26 +149,31 @@ function createThemeOverrides(theme) {
|
|
|
165
149
|
margin: 0,
|
|
166
150
|
padding: theme.spacing(3, 2, 3, 2.5),
|
|
167
151
|
borderBottom: 0
|
|
168
|
-
},
|
|
169
|
-
sizeSmall: {
|
|
152
|
+
}),
|
|
153
|
+
sizeSmall: ({ theme }) => ({
|
|
170
154
|
padding: theme.spacing(1.5, 2, 1.5, 2.5)
|
|
171
|
-
},
|
|
172
|
-
head: {
|
|
155
|
+
}),
|
|
156
|
+
head: ({ theme }) => ({
|
|
173
157
|
wordBreak: "break-word",
|
|
174
158
|
overflow: "hidden",
|
|
159
|
+
color: theme.palette.textSubtle,
|
|
175
160
|
fontWeight: "normal",
|
|
176
161
|
lineHeight: "1"
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
162
|
+
})
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
MuiTabs: {
|
|
166
|
+
styleOverrides: {
|
|
180
167
|
// Tabs are smaller than default mui tab rows
|
|
181
168
|
root: {
|
|
182
169
|
minHeight: 24
|
|
183
170
|
}
|
|
184
|
-
}
|
|
185
|
-
|
|
171
|
+
}
|
|
172
|
+
},
|
|
173
|
+
MuiTab: {
|
|
174
|
+
styleOverrides: {
|
|
186
175
|
// Tabs are smaller and have a hover background
|
|
187
|
-
root: {
|
|
176
|
+
root: ({ theme }) => ({
|
|
188
177
|
color: theme.palette.link,
|
|
189
178
|
minHeight: 24,
|
|
190
179
|
textTransform: "initial",
|
|
@@ -198,70 +187,84 @@ function createThemeOverrides(theme) {
|
|
|
198
187
|
fontSize: theme.typography.pxToRem(14),
|
|
199
188
|
fontWeight: 500
|
|
200
189
|
}
|
|
201
|
-
},
|
|
202
|
-
textColorPrimary: {
|
|
190
|
+
}),
|
|
191
|
+
textColorPrimary: ({ theme }) => ({
|
|
203
192
|
color: theme.palette.link
|
|
204
|
-
}
|
|
205
|
-
}
|
|
206
|
-
|
|
193
|
+
})
|
|
194
|
+
}
|
|
195
|
+
},
|
|
196
|
+
MuiTableSortLabel: {
|
|
197
|
+
styleOverrides: {
|
|
207
198
|
// No color change on hover, just rely on the arrow showing up instead.
|
|
208
199
|
root: {
|
|
209
200
|
color: "inherit",
|
|
210
201
|
"&:hover": {
|
|
211
202
|
color: "inherit"
|
|
203
|
+
},
|
|
204
|
+
"&:focus": {
|
|
205
|
+
color: "inherit"
|
|
206
|
+
},
|
|
207
|
+
// Bold font for highlighting selected column
|
|
208
|
+
"&.Mui-active": {
|
|
209
|
+
fontWeight: "bold",
|
|
210
|
+
color: "inherit"
|
|
212
211
|
}
|
|
213
|
-
},
|
|
214
|
-
// Bold font for highlighting selected column
|
|
215
|
-
active: {
|
|
216
|
-
fontWeight: "bold"
|
|
217
212
|
}
|
|
218
|
-
}
|
|
219
|
-
|
|
213
|
+
}
|
|
214
|
+
},
|
|
215
|
+
MuiListItemText: {
|
|
216
|
+
styleOverrides: {
|
|
220
217
|
dense: {
|
|
221
218
|
// Default dense list items to adding ellipsis for really long str...
|
|
222
219
|
whiteSpace: "nowrap",
|
|
223
220
|
overflow: "hidden",
|
|
224
221
|
textOverflow: "ellipsis"
|
|
225
222
|
}
|
|
226
|
-
}
|
|
227
|
-
|
|
223
|
+
}
|
|
224
|
+
},
|
|
225
|
+
MuiButton: {
|
|
226
|
+
styleOverrides: {
|
|
228
227
|
text: {
|
|
229
228
|
// Text buttons have less padding by default, but we want to keep the original padding
|
|
230
229
|
padding: void 0
|
|
231
230
|
}
|
|
232
|
-
}
|
|
233
|
-
|
|
234
|
-
|
|
231
|
+
}
|
|
232
|
+
},
|
|
233
|
+
MuiChip: {
|
|
234
|
+
styleOverrides: {
|
|
235
|
+
root: ({ theme }) => ({
|
|
235
236
|
backgroundColor: "#D9D9D9",
|
|
236
237
|
// By default there's no margin, but it's usually wanted, so we add some trailing margin
|
|
237
238
|
marginRight: theme.spacing(1),
|
|
238
239
|
marginBottom: theme.spacing(1),
|
|
239
240
|
color: theme.palette.grey[900]
|
|
240
|
-
},
|
|
241
|
-
outlined: {
|
|
241
|
+
}),
|
|
242
|
+
outlined: ({ theme }) => ({
|
|
242
243
|
color: theme.palette.text.primary
|
|
243
|
-
},
|
|
244
|
-
label: {
|
|
245
|
-
lineHeight:
|
|
244
|
+
}),
|
|
245
|
+
label: ({ theme }) => ({
|
|
246
|
+
lineHeight: theme.spacing(2.5),
|
|
246
247
|
fontWeight: theme.typography.fontWeightMedium,
|
|
247
|
-
fontSize:
|
|
248
|
-
},
|
|
249
|
-
labelSmall: {
|
|
250
|
-
fontSize:
|
|
251
|
-
},
|
|
252
|
-
deleteIcon: {
|
|
248
|
+
fontSize: theme.spacing(1.75)
|
|
249
|
+
}),
|
|
250
|
+
labelSmall: ({ theme }) => ({
|
|
251
|
+
fontSize: theme.spacing(1.5)
|
|
252
|
+
}),
|
|
253
|
+
deleteIcon: ({ theme }) => ({
|
|
253
254
|
color: theme.palette.grey[500],
|
|
254
|
-
width:
|
|
255
|
-
height:
|
|
256
|
-
margin: `0 ${theme.spacing(0.75)}
|
|
257
|
-
},
|
|
258
|
-
deleteIconSmall: {
|
|
259
|
-
width:
|
|
260
|
-
height:
|
|
261
|
-
margin: `0 ${theme.spacing(0.5)}
|
|
262
|
-
}
|
|
263
|
-
}
|
|
264
|
-
|
|
255
|
+
width: theme.spacing(3),
|
|
256
|
+
height: theme.spacing(3),
|
|
257
|
+
margin: `0 ${theme.spacing(0.75)} 0 -${theme.spacing(0.75)}`
|
|
258
|
+
}),
|
|
259
|
+
deleteIconSmall: ({ theme }) => ({
|
|
260
|
+
width: theme.spacing(2),
|
|
261
|
+
height: theme.spacing(2),
|
|
262
|
+
margin: `0 ${theme.spacing(0.5)} 0 -${theme.spacing(0.5)}`
|
|
263
|
+
})
|
|
264
|
+
}
|
|
265
|
+
},
|
|
266
|
+
MuiCard: {
|
|
267
|
+
styleOverrides: {
|
|
265
268
|
root: {
|
|
266
269
|
// When cards have a forced size, such as when they are arranged in a
|
|
267
270
|
// CSS grid, the content needs to flex such that the actions (buttons
|
|
@@ -270,14 +273,18 @@ function createThemeOverrides(theme) {
|
|
|
270
273
|
display: "flex",
|
|
271
274
|
flexDirection: "column"
|
|
272
275
|
}
|
|
273
|
-
}
|
|
274
|
-
|
|
276
|
+
}
|
|
277
|
+
},
|
|
278
|
+
MuiCardHeader: {
|
|
279
|
+
styleOverrides: {
|
|
275
280
|
root: {
|
|
276
281
|
// Reduce padding between header and content
|
|
277
282
|
paddingBottom: 0
|
|
278
283
|
}
|
|
279
|
-
}
|
|
280
|
-
|
|
284
|
+
}
|
|
285
|
+
},
|
|
286
|
+
MuiCardContent: {
|
|
287
|
+
styleOverrides: {
|
|
281
288
|
root: {
|
|
282
289
|
// When cards have a forced size, such as when they are arranged in a
|
|
283
290
|
// CSS grid, the content needs to flex such that the actions (buttons
|
|
@@ -288,28 +295,182 @@ function createThemeOverrides(theme) {
|
|
|
288
295
|
paddingBottom: void 0
|
|
289
296
|
}
|
|
290
297
|
}
|
|
291
|
-
}
|
|
292
|
-
|
|
298
|
+
}
|
|
299
|
+
},
|
|
300
|
+
MuiCardActions: {
|
|
301
|
+
styleOverrides: {
|
|
293
302
|
root: {
|
|
294
303
|
// We default to putting the card actions at the end
|
|
295
304
|
justifyContent: "flex-end"
|
|
296
305
|
}
|
|
297
306
|
}
|
|
307
|
+
}
|
|
308
|
+
};
|
|
309
|
+
|
|
310
|
+
const shapes = {
|
|
311
|
+
wave: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1368' height='401' x='0' y='0' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M437 116C223 116 112 0 112 0h1256v400c-82 0-225-21-282-109-112-175-436-175-649-175z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1368 400V282C891-29 788 40 711 161 608 324 121 372 0 361v39h1368z'/%3e%3cpath fill='url(%23paint2_linear)' d='M1368 244v156H0V94c92-24 198-46 375 0l135 41c176 51 195 109 858 109z'/%3e%3cpath fill='url(%23paint3_linear)' d='M1252 400h116c-14-7-35-14-116-16-663-14-837-128-1013-258l-85-61C98 28 46 8 0 0v400h1252z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M-172-98h1671v601H-172z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='602' x2='1093.5' y1='-960.5' y2='272' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='482' x2='480' y1='1058.5' y2='70.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='424' x2='446.1' y1='-587.5' y2='274.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='587' x2='349' y1='-1120.5' y2='341' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`,
|
|
312
|
+
wave2: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='1764' height='479' x='-229' y='-6' maskUnits='userSpaceOnUse'%3e%3cpath fill='url(%23paint0_linear)' d='M0 400h1350C1321 336 525 33 179-2c-345-34-395 236-408 402H0z'/%3e%3cpath fill='url(%23paint1_linear)' d='M1378 177v223H0V217s219 75 327 52C436 246 717-35 965 45s254 144 413 132z'/%3e%3cpath fill='url(%23paint2_linear)' d='M26 400l-78-16c-170 205-44-6-137-30l-4-1 4 1 137 30c37-45 89-110 159-201 399-514-45 238 1176-50 275-65 354-39 91 267H26z'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='431' x2='397.3' y1='-599' y2='372.8' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='236.5' x2='446.6' y1='-586' y2='381.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='851.8' x2='640.4' y1='-867.2' y2='363.7' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`,
|
|
313
|
+
round: `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='1368' height='400' fill='none'%3e%3cmask id='a' width='2269' height='1408' x='-610' y='-509' maskUnits='userSpaceOnUse'%3e%3ccircle cx='1212.8' cy='74.8' r='317.5' fill='url(%23paint0_linear)' transform='rotate(-52 1213 75)'/%3e%3ccircle cx='737.8' cy='445.8' r='317.5' fill='url(%23paint1_linear)' transform='rotate(-116 738 446)'/%3e%3ccircle cx='601.8' cy='52.8' r='418.6' fill='url(%23paint2_linear)' transform='rotate(-117 602 53)'/%3e%3ccircle cx='999.8' cy='364' r='389.1' fill='url(%23paint3_linear)' transform='rotate(31 1000 364)'/%3e%3cellipse cx='-109.2' cy='263.5' fill='url(%23paint4_linear)' rx='429.2' ry='465.8' transform='rotate(-85 -109 264)'/%3e%3c/mask%3e%3cg mask='url(%23a)'%3e%3cpath fill='white' d='M0 0h1368v400H0z'/%3e%3c/g%3e%3cdefs%3e%3clinearGradient id='paint0_linear' x1='1301.2' x2='161.4' y1='-1879.7' y2='-969.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear' x1='826.2' x2='-313.6' y1='-1508.7' y2='-598.6' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear' x1='718.4' x2='-784.3' y1='-2524' y2='-1324.2' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint3_linear' x1='1108.2' x2='-288.6' y1='-2031.1' y2='-915.9' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint4_linear' x1='10.4' x2='-1626.5' y1='-2603.8' y2='-1399.5' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='white'/%3e%3cstop offset='1' stop-color='white' stop-opacity='0'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e")`
|
|
314
|
+
};
|
|
315
|
+
const colorVariants = {
|
|
316
|
+
darkGrey: ["#171717", "#383838"],
|
|
317
|
+
marineBlue: ["#006D8F", "#0049A1"],
|
|
318
|
+
veryBlue: ["#0027AF", "#270094"],
|
|
319
|
+
rubyRed: ["#98002B", "#8D1134"],
|
|
320
|
+
toastyOrange: ["#BE2200", "#A41D00"],
|
|
321
|
+
purpleSky: ["#8912CA", "#3E00EA"],
|
|
322
|
+
eveningSea: ["#00FFF2", "#035355"],
|
|
323
|
+
teal: ["#005B4B"],
|
|
324
|
+
pinkSea: ["#C8077A", "#C2297D"],
|
|
325
|
+
greens: ["#4BB8A5", "#187656"]
|
|
326
|
+
};
|
|
327
|
+
function genPageTheme(props) {
|
|
328
|
+
var _a;
|
|
329
|
+
const { colors, shape, options } = props;
|
|
330
|
+
const gradientColors = colors.length === 1 ? [colors[0], colors[0]] : colors;
|
|
331
|
+
const gradient = `linear-gradient(90deg, ${gradientColors.join(", ")})`;
|
|
332
|
+
const backgroundImage = `${shape}, ${gradient}`;
|
|
333
|
+
const fontColor = (_a = options == null ? void 0 : options.fontColor) != null ? _a : "#FFFFFF";
|
|
334
|
+
return {
|
|
335
|
+
colors,
|
|
336
|
+
shape,
|
|
337
|
+
backgroundImage,
|
|
338
|
+
fontColor
|
|
298
339
|
};
|
|
299
340
|
}
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
341
|
+
const pageTheme = {
|
|
342
|
+
home: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave }),
|
|
343
|
+
documentation: genPageTheme({
|
|
344
|
+
colors: colorVariants.pinkSea,
|
|
345
|
+
shape: shapes.wave2
|
|
346
|
+
}),
|
|
347
|
+
tool: genPageTheme({ colors: colorVariants.purpleSky, shape: shapes.round }),
|
|
348
|
+
service: genPageTheme({
|
|
349
|
+
colors: colorVariants.marineBlue,
|
|
350
|
+
shape: shapes.wave
|
|
351
|
+
}),
|
|
352
|
+
website: genPageTheme({ colors: colorVariants.veryBlue, shape: shapes.wave }),
|
|
353
|
+
library: genPageTheme({ colors: colorVariants.rubyRed, shape: shapes.wave }),
|
|
354
|
+
other: genPageTheme({ colors: colorVariants.darkGrey, shape: shapes.wave }),
|
|
355
|
+
app: genPageTheme({ colors: colorVariants.toastyOrange, shape: shapes.wave }),
|
|
356
|
+
apis: genPageTheme({ colors: colorVariants.teal, shape: shapes.wave2 }),
|
|
357
|
+
card: genPageTheme({ colors: colorVariants.greens, shape: shapes.wave })
|
|
358
|
+
};
|
|
359
|
+
|
|
360
|
+
const DEFAULT_HTML_FONT_SIZE = 16;
|
|
361
|
+
const DEFAULT_FONT_FAMILY = '"Helvetica Neue", Helvetica, Roboto, Arial, sans-serif';
|
|
362
|
+
const DEFAULT_PAGE_THEME = "home";
|
|
363
|
+
function createBaseThemeOptions(options) {
|
|
364
|
+
const {
|
|
365
|
+
palette,
|
|
366
|
+
htmlFontSize = DEFAULT_HTML_FONT_SIZE,
|
|
367
|
+
fontFamily = DEFAULT_FONT_FAMILY,
|
|
368
|
+
defaultPageTheme = DEFAULT_PAGE_THEME,
|
|
369
|
+
pageTheme: pageTheme$1 = pageTheme
|
|
370
|
+
} = options;
|
|
371
|
+
if (!pageTheme$1[defaultPageTheme]) {
|
|
372
|
+
throw new Error(`${defaultPageTheme} is not defined in pageTheme.`);
|
|
373
|
+
}
|
|
374
|
+
return {
|
|
375
|
+
palette,
|
|
376
|
+
typography: {
|
|
377
|
+
htmlFontSize,
|
|
378
|
+
fontFamily,
|
|
379
|
+
h1: {
|
|
380
|
+
fontSize: 54,
|
|
381
|
+
fontWeight: 700,
|
|
382
|
+
marginBottom: 10
|
|
383
|
+
},
|
|
384
|
+
h2: {
|
|
385
|
+
fontSize: 40,
|
|
386
|
+
fontWeight: 700,
|
|
387
|
+
marginBottom: 8
|
|
388
|
+
},
|
|
389
|
+
h3: {
|
|
390
|
+
fontSize: 32,
|
|
391
|
+
fontWeight: 700,
|
|
392
|
+
marginBottom: 6
|
|
393
|
+
},
|
|
394
|
+
h4: {
|
|
395
|
+
fontWeight: 700,
|
|
396
|
+
fontSize: 28,
|
|
397
|
+
marginBottom: 6
|
|
398
|
+
},
|
|
399
|
+
h5: {
|
|
400
|
+
fontWeight: 700,
|
|
401
|
+
fontSize: 24,
|
|
402
|
+
marginBottom: 4
|
|
403
|
+
},
|
|
404
|
+
h6: {
|
|
405
|
+
fontWeight: 700,
|
|
406
|
+
fontSize: 20,
|
|
407
|
+
marginBottom: 2
|
|
408
|
+
}
|
|
409
|
+
},
|
|
410
|
+
page: pageTheme$1[defaultPageTheme],
|
|
411
|
+
getPageTheme: ({ themeId }) => {
|
|
412
|
+
var _a;
|
|
413
|
+
return (_a = pageTheme$1[themeId]) != null ? _a : pageTheme$1[defaultPageTheme];
|
|
414
|
+
}
|
|
415
|
+
};
|
|
306
416
|
}
|
|
307
417
|
|
|
308
|
-
|
|
309
|
-
|
|
418
|
+
var __accessCheck = (obj, member, msg) => {
|
|
419
|
+
if (!member.has(obj))
|
|
420
|
+
throw TypeError("Cannot " + msg);
|
|
421
|
+
};
|
|
422
|
+
var __privateGet = (obj, member, getter) => {
|
|
423
|
+
__accessCheck(obj, member, "read from private field");
|
|
424
|
+
return getter ? getter.call(obj) : member.get(obj);
|
|
425
|
+
};
|
|
426
|
+
var __privateAdd = (obj, member, value) => {
|
|
427
|
+
if (member.has(obj))
|
|
428
|
+
throw TypeError("Cannot add the same private member more than once");
|
|
429
|
+
member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
430
|
+
};
|
|
431
|
+
var __privateSet = (obj, member, value, setter) => {
|
|
432
|
+
__accessCheck(obj, member, "write to private field");
|
|
433
|
+
setter ? setter.call(obj, value) : member.set(obj, value);
|
|
434
|
+
return value;
|
|
435
|
+
};
|
|
436
|
+
var _themes;
|
|
437
|
+
class UnifiedThemeHolder {
|
|
438
|
+
constructor(v4, v5) {
|
|
439
|
+
__privateAdd(this, _themes, /* @__PURE__ */ new Map());
|
|
440
|
+
__privateSet(this, _themes, /* @__PURE__ */ new Map());
|
|
441
|
+
if (v4) {
|
|
442
|
+
__privateGet(this, _themes).set("v4", v4);
|
|
443
|
+
}
|
|
444
|
+
if (v5) {
|
|
445
|
+
__privateGet(this, _themes).set("v5", v5);
|
|
446
|
+
}
|
|
447
|
+
}
|
|
448
|
+
getTheme(version) {
|
|
449
|
+
return __privateGet(this, _themes).get(version);
|
|
450
|
+
}
|
|
451
|
+
}
|
|
452
|
+
_themes = new WeakMap();
|
|
453
|
+
function createUnifiedTheme(options) {
|
|
454
|
+
const themeOptions = createBaseThemeOptions(options);
|
|
455
|
+
const components = { ...defaultComponentThemes, ...options.components };
|
|
456
|
+
const v5Theme = createTheme$1({ ...themeOptions, components });
|
|
457
|
+
const v4Overrides = transformV5ComponentThemesToV4(v5Theme, components);
|
|
458
|
+
const v4Theme = { ...createTheme$2(themeOptions), ...v4Overrides };
|
|
459
|
+
return new UnifiedThemeHolder(v4Theme, v5Theme);
|
|
460
|
+
}
|
|
461
|
+
function createUnifiedThemeFromV4(options) {
|
|
462
|
+
const v5Theme = adaptV4Theme(options);
|
|
463
|
+
const v4Theme = createTheme$2(options);
|
|
464
|
+
return new UnifiedThemeHolder(v4Theme, v5Theme);
|
|
465
|
+
}
|
|
466
|
+
|
|
467
|
+
const palettes = {
|
|
468
|
+
light: {
|
|
310
469
|
type: "light",
|
|
470
|
+
mode: "light",
|
|
311
471
|
background: {
|
|
312
|
-
default: "#F8F8F8"
|
|
472
|
+
default: "#F8F8F8",
|
|
473
|
+
paper: "#FFFFFF"
|
|
313
474
|
},
|
|
314
475
|
status: {
|
|
315
476
|
ok: "#1DB954",
|
|
@@ -353,7 +514,7 @@ const lightTheme = createTheme({
|
|
|
353
514
|
warningText: "#000000",
|
|
354
515
|
linkHover: "#2196F3",
|
|
355
516
|
link: "#0A6EBE",
|
|
356
|
-
gold:
|
|
517
|
+
gold: "#FFD600",
|
|
357
518
|
navigation: {
|
|
358
519
|
background: "#171717",
|
|
359
520
|
indicator: "#9BF0E1",
|
|
@@ -374,14 +535,12 @@ const lightTheme = createTheme({
|
|
|
374
535
|
indicator: "#9BF0E1"
|
|
375
536
|
}
|
|
376
537
|
},
|
|
377
|
-
|
|
378
|
-
pageTheme
|
|
379
|
-
});
|
|
380
|
-
const darkTheme = createTheme({
|
|
381
|
-
palette: {
|
|
538
|
+
dark: {
|
|
382
539
|
type: "dark",
|
|
540
|
+
mode: "dark",
|
|
383
541
|
background: {
|
|
384
|
-
default: "#333333"
|
|
542
|
+
default: "#333333",
|
|
543
|
+
paper: "#424242"
|
|
385
544
|
},
|
|
386
545
|
status: {
|
|
387
546
|
ok: "#71CF88",
|
|
@@ -429,7 +588,7 @@ const darkTheme = createTheme({
|
|
|
429
588
|
warningText: "#000000",
|
|
430
589
|
linkHover: "#82BAFD",
|
|
431
590
|
link: "#9CC9FF",
|
|
432
|
-
gold:
|
|
591
|
+
gold: "#FFD600",
|
|
433
592
|
navigation: {
|
|
434
593
|
background: "#424242",
|
|
435
594
|
indicator: "#9BF0E1",
|
|
@@ -449,10 +608,67 @@ const darkTheme = createTheme({
|
|
|
449
608
|
tabbar: {
|
|
450
609
|
indicator: "#9BF0E1"
|
|
451
610
|
}
|
|
452
|
-
}
|
|
453
|
-
|
|
454
|
-
|
|
611
|
+
}
|
|
612
|
+
};
|
|
613
|
+
|
|
614
|
+
const themes = {
|
|
615
|
+
light: createUnifiedTheme({ palette: palettes.light }),
|
|
616
|
+
dark: createUnifiedTheme({ palette: palettes.dark })
|
|
617
|
+
};
|
|
618
|
+
|
|
619
|
+
unstable_ClassNameGenerator.configure((componentName) => {
|
|
620
|
+
return `v5-${componentName}`;
|
|
621
|
+
});
|
|
622
|
+
|
|
623
|
+
function UnifiedThemeProvider(props) {
|
|
624
|
+
const { children, theme, noCssBaseline = false } = props;
|
|
625
|
+
const v4Theme = theme.getTheme("v4");
|
|
626
|
+
const v5Theme = theme.getTheme("v5");
|
|
627
|
+
let cssBaseline = void 0;
|
|
628
|
+
if (!noCssBaseline) {
|
|
629
|
+
cssBaseline = /* @__PURE__ */ React.createElement(CSSBaseline, null);
|
|
630
|
+
}
|
|
631
|
+
let result = /* @__PURE__ */ React.createElement(React.Fragment, null, cssBaseline, children);
|
|
632
|
+
if (v4Theme) {
|
|
633
|
+
result = /* @__PURE__ */ React.createElement(ThemeProvider, { theme: v4Theme }, result);
|
|
634
|
+
}
|
|
635
|
+
if (v5Theme) {
|
|
636
|
+
result = /* @__PURE__ */ React.createElement(StyledEngineProvider, { injectFirst: true }, /* @__PURE__ */ React.createElement(ThemeProvider$1, { theme: v5Theme }, result));
|
|
637
|
+
}
|
|
638
|
+
return result;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
function createThemeOptions(options) {
|
|
642
|
+
var _a, _b, _c, _d;
|
|
643
|
+
return {
|
|
644
|
+
props: {
|
|
645
|
+
MuiGrid: (_b = (_a = defaultComponentThemes) == null ? void 0 : _a.MuiGrid) == null ? void 0 : _b.defaultProps,
|
|
646
|
+
MuiSwitch: (_d = (_c = defaultComponentThemes) == null ? void 0 : _c.MuiSwitch) == null ? void 0 : _d.defaultProps
|
|
647
|
+
},
|
|
648
|
+
...createBaseThemeOptions(options)
|
|
649
|
+
};
|
|
650
|
+
}
|
|
651
|
+
function createThemeOverrides(theme) {
|
|
652
|
+
return transformV5ComponentThemesToV4(
|
|
653
|
+
// Safe but we have to make sure we don't use mui5 specific stuff in the default component themes
|
|
654
|
+
theme,
|
|
655
|
+
defaultComponentThemes
|
|
656
|
+
).overrides;
|
|
657
|
+
}
|
|
658
|
+
function createTheme(options) {
|
|
659
|
+
const themeOptions = createThemeOptions(options);
|
|
660
|
+
const baseTheme = createTheme$2(themeOptions);
|
|
661
|
+
const overrides = createThemeOverrides(baseTheme);
|
|
662
|
+
const theme = { ...baseTheme, overrides };
|
|
663
|
+
return theme;
|
|
664
|
+
}
|
|
665
|
+
|
|
666
|
+
const lightTheme = createTheme({
|
|
667
|
+
palette: palettes.light
|
|
668
|
+
});
|
|
669
|
+
const darkTheme = createTheme({
|
|
670
|
+
palette: palettes.dark
|
|
455
671
|
});
|
|
456
672
|
|
|
457
|
-
export { colorVariants, createTheme, createThemeOptions, createThemeOverrides, darkTheme, genPageTheme, lightTheme, pageTheme, shapes };
|
|
673
|
+
export { UnifiedThemeProvider, colorVariants, createBaseThemeOptions, createTheme, createThemeOptions, createThemeOverrides, createUnifiedTheme, createUnifiedThemeFromV4, darkTheme, defaultComponentThemes, genPageTheme, lightTheme, pageTheme, palettes, shapes, themes, transformV5ComponentThemesToV4 };
|
|
458
674
|
//# sourceMappingURL=index.esm.js.map
|