@webpros/mui-theme 0.3.2 → 0.3.3
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/README.md +63 -12
- package/dist/package.json +6 -4
- package/dist/src/components/feedback/Dialog/Dialog.theme.js +4 -4
- package/dist/src/components/surfaces/AppBar/AppBar.theme.d.ts +1 -1
- package/dist/src/components/surfaces/AppBar/AppBar.theme.js +1 -12
- package/dist/src/index.d.ts +1 -0
- package/dist/src/providers/WebProsMuiThemeProvider.d.ts +18 -2
- package/dist/src/providers/WebProsMuiThemeProvider.js +1 -1
- package/dist/src/providers/WebProsTheme.d.ts +19 -1
- package/dist/src/providers/WebProsTheme.js +20 -7
- package/dist/src/tokens/ThemeColorTokens.d.ts +1 -2
- package/dist/src/tokens/ThemeColorTokens.js +20 -3
- package/dist/src/utils/createIcon.js +14 -16
- package/dist/src/utils/getMUIComponents.d.ts +1 -2
- package/dist/src/utils/getMUIPalette.d.ts +2 -18
- package/dist/src/utils/getMUIPalette.js +4 -227
- package/package.json +6 -4
- package/dist/src/style/custom-color-palette.d.ts +0 -3
- package/dist/src/style/custom-color-palette.js +0 -73
- package/dist/src/tokens/legacyColors/LegacyDark.d.ts +0 -2
- package/dist/src/tokens/legacyColors/LegacyDark.js +0 -78
- package/dist/src/tokens/legacyColors/LegacyLight.d.ts +0 -2
- package/dist/src/tokens/legacyColors/LegacyLight.js +0 -76
- package/dist/src/tokens/legacyColors/ThemeColorTokensLegacy.d.ts +0 -72
- package/dist/src/tokens/legacyColors/ThemeColorTokensLegacy.js +0 -2
- package/dist/src/tokens/legacyColors/Tone.d.ts +0 -158
- package/dist/src/tokens/legacyColors/Tone.js +0 -157
- package/dist/src/tokens/legacyColors/index.d.ts +0 -2
- package/dist/src/tokens/legacyColors/index.js +0 -3
|
@@ -6,8 +6,8 @@ export const getMUIPalette = (themeMode, themeScheme) => {
|
|
|
6
6
|
/** Basic MUI overrides */
|
|
7
7
|
themeMode,
|
|
8
8
|
primary: {
|
|
9
|
-
main: scheme.primary,
|
|
10
|
-
contrastText: scheme.onPrimary,
|
|
9
|
+
main: scheme.schemes.base.primary,
|
|
10
|
+
contrastText: scheme.schemes.base.onPrimary,
|
|
11
11
|
},
|
|
12
12
|
error: {
|
|
13
13
|
main: scheme.schemes.status.error,
|
|
@@ -32,157 +32,10 @@ export const getMUIPalette = (themeMode, themeScheme) => {
|
|
|
32
32
|
},
|
|
33
33
|
divider: scheme.schemes.surfaces.outlineVariant,
|
|
34
34
|
/** ---------------- */
|
|
35
|
-
onPrimary: {
|
|
36
|
-
main: scheme.onPrimary,
|
|
37
|
-
contrastText: scheme.primary,
|
|
38
|
-
},
|
|
39
|
-
// primaryContainer: {
|
|
40
|
-
// main: scheme.primaryContainer,
|
|
41
|
-
// contrastText: scheme.onPrimaryContainer,
|
|
42
|
-
// },
|
|
43
|
-
onPrimaryContainer: {
|
|
44
|
-
main: scheme.onPrimaryContainer,
|
|
45
|
-
contrastText: scheme.primaryContainer,
|
|
46
|
-
},
|
|
47
35
|
secondary: {
|
|
48
|
-
main: scheme.secondary,
|
|
49
|
-
contrastText: scheme.onSecondary,
|
|
50
|
-
},
|
|
51
|
-
// onSecondary: {
|
|
52
|
-
// main: scheme.onSecondary,
|
|
53
|
-
// contrastText: scheme.secondary,
|
|
54
|
-
// },
|
|
55
|
-
// secondaryContainer: {
|
|
56
|
-
// main: scheme.secondaryContainer,
|
|
57
|
-
// contrastText: scheme.onSecondaryContainer,
|
|
58
|
-
// },
|
|
59
|
-
// onSecondaryContainer: {
|
|
60
|
-
// main: scheme.onSecondaryContainer,
|
|
61
|
-
// contrastText: scheme.secondaryContainer,
|
|
62
|
-
// },
|
|
63
|
-
// tertiary: {
|
|
64
|
-
// main: scheme.tertiary,
|
|
65
|
-
// contrastText: scheme.onTertiary,
|
|
66
|
-
// },
|
|
67
|
-
// onTertiary: {
|
|
68
|
-
// main: scheme.onTertiary,
|
|
69
|
-
// contrastText: scheme.tertiary,
|
|
70
|
-
// },
|
|
71
|
-
// tertiaryContainer: {
|
|
72
|
-
// main: scheme.tertiaryContainer,
|
|
73
|
-
// contrastText: scheme.onTertiaryContainer,
|
|
74
|
-
// },
|
|
75
|
-
// onTertiaryContainer: {
|
|
76
|
-
// main: scheme.onTertiaryContainer,
|
|
77
|
-
// contrastText: scheme.tertiaryContainer,
|
|
78
|
-
// },
|
|
79
|
-
onError: {
|
|
80
|
-
main: scheme.onError,
|
|
81
|
-
contrastText: scheme.error,
|
|
82
|
-
},
|
|
83
|
-
// errorContainer: {
|
|
84
|
-
// main: scheme.errorContainer,
|
|
85
|
-
// contrastText: scheme.onErrorContainer,
|
|
86
|
-
// },
|
|
87
|
-
// onErrorContainer: {
|
|
88
|
-
// main: scheme.onErrorContainer,
|
|
89
|
-
// contrastText: scheme.errorContainer,
|
|
90
|
-
// },
|
|
91
|
-
// primaryFixed: {
|
|
92
|
-
// main: scheme.primaryFixed,
|
|
93
|
-
// },
|
|
94
|
-
// primaryFixedDim: {
|
|
95
|
-
// main: scheme.primaryFixedDim,
|
|
96
|
-
// },
|
|
97
|
-
// onPrimaryFixed: {
|
|
98
|
-
// main: scheme.onPrimaryFixed,
|
|
99
|
-
// },
|
|
100
|
-
// onPrimaryFixedVariant: {
|
|
101
|
-
// main: scheme.onPrimaryFixedVariant,
|
|
102
|
-
// },
|
|
103
|
-
// secondaryFixed: {
|
|
104
|
-
// main: scheme.secondaryFixed,
|
|
105
|
-
// },
|
|
106
|
-
// secondaryFixedDim: {
|
|
107
|
-
// main: scheme.secondaryFixedDim,
|
|
108
|
-
// },
|
|
109
|
-
// onSecondaryFixed: {
|
|
110
|
-
// main: scheme.onSecondaryFixed,
|
|
111
|
-
// },
|
|
112
|
-
// onSecondaryFixedVariant: {
|
|
113
|
-
// main: scheme.onSecondaryFixedVariant,
|
|
114
|
-
// },
|
|
115
|
-
// tertiaryFixed: {
|
|
116
|
-
// main: scheme.tertiaryFixed,
|
|
117
|
-
// },
|
|
118
|
-
// tertiaryFixedDim: {
|
|
119
|
-
// main: scheme.tertiaryFixedDim,
|
|
120
|
-
// },
|
|
121
|
-
// onTertiaryFixed: {
|
|
122
|
-
// main: scheme.onTertiaryFixed,
|
|
123
|
-
// },
|
|
124
|
-
// onTertiaryFixedVariant: {
|
|
125
|
-
// main: scheme.onTertiaryFixedVariant,
|
|
126
|
-
// },
|
|
127
|
-
surface: {
|
|
128
|
-
main: scheme.surface,
|
|
129
|
-
contrastText: scheme.onSurface,
|
|
130
|
-
},
|
|
131
|
-
onSurface: {
|
|
132
|
-
main: scheme.onSurface,
|
|
133
|
-
contrastText: scheme.surface,
|
|
36
|
+
main: scheme.schemes.base.secondary,
|
|
37
|
+
contrastText: scheme.schemes.base.onSecondary,
|
|
134
38
|
},
|
|
135
|
-
surfaceDim: {
|
|
136
|
-
main: scheme.surfaceDim,
|
|
137
|
-
},
|
|
138
|
-
// surfaceBright: {
|
|
139
|
-
// main: scheme.surfaceBright,
|
|
140
|
-
// },
|
|
141
|
-
surfaceContainerLowest: {
|
|
142
|
-
main: scheme.surfaceContainerLowest,
|
|
143
|
-
},
|
|
144
|
-
// surfaceContainerLow: {
|
|
145
|
-
// main: scheme.surfaceContainerLow,
|
|
146
|
-
// },
|
|
147
|
-
surfaceContainer: {
|
|
148
|
-
main: scheme.surfaceContainer,
|
|
149
|
-
},
|
|
150
|
-
// surfaceContainerHigh: {
|
|
151
|
-
// main: scheme.surfaceContainerHigh,
|
|
152
|
-
// },
|
|
153
|
-
// surfaceContainerHighest: {
|
|
154
|
-
// main: scheme.surfaceContainerHighest,
|
|
155
|
-
// },
|
|
156
|
-
// surfaceVariant: {
|
|
157
|
-
// main: scheme.surfaceVariant,
|
|
158
|
-
// contrastText: scheme.onSurfaceVariant,
|
|
159
|
-
// },
|
|
160
|
-
onSurfaceVariant: {
|
|
161
|
-
main: scheme.onSurfaceVariant,
|
|
162
|
-
// contrastText: scheme.surfaceVariant,
|
|
163
|
-
},
|
|
164
|
-
// outline: {
|
|
165
|
-
// main: scheme.outline,
|
|
166
|
-
// },
|
|
167
|
-
// outlineVariant: {
|
|
168
|
-
// main: scheme.outlineVariant,
|
|
169
|
-
// },
|
|
170
|
-
// inversePrimary: {
|
|
171
|
-
// main: scheme.inversePrimary,
|
|
172
|
-
// // contrastText: scheme.inverseOnPrimary
|
|
173
|
-
// },
|
|
174
|
-
// inverseOnPrimary: {
|
|
175
|
-
// main: scheme.inverseOnPrimary,
|
|
176
|
-
// contrastText: scheme.inversePrimary,
|
|
177
|
-
// },
|
|
178
|
-
// inverseSurface: {
|
|
179
|
-
// main: scheme.inverseSurface,
|
|
180
|
-
// contrastText: scheme.inverseSurface,
|
|
181
|
-
// },
|
|
182
|
-
// inverseOnSurface: {
|
|
183
|
-
// main: scheme.inverseOnSurface,
|
|
184
|
-
// contrastText: scheme.inverseSurface,
|
|
185
|
-
// },
|
|
186
39
|
action: {
|
|
187
40
|
// active
|
|
188
41
|
hover: scheme.stateLayers.surfaces.onSurface.opacity08,
|
|
@@ -198,82 +51,6 @@ export const getMUIPalette = (themeMode, themeScheme) => {
|
|
|
198
51
|
// focusOpacity
|
|
199
52
|
// activatedOpacity
|
|
200
53
|
},
|
|
201
|
-
// shadow: {
|
|
202
|
-
// main: scheme.shadow, // TODO: verify if it is needed
|
|
203
|
-
// },
|
|
204
|
-
// scrim: {
|
|
205
|
-
// main: scheme.scrim,
|
|
206
|
-
// },
|
|
207
|
-
// surfaceTintColor: {
|
|
208
|
-
// main: scheme.surfaceTintColor,
|
|
209
|
-
// },
|
|
210
|
-
/**/
|
|
211
|
-
// background: {
|
|
212
|
-
// default: scheme.surface,
|
|
213
|
-
// paper: scheme.surfaceContainerLowest,
|
|
214
|
-
// },
|
|
215
|
-
// onBackground: {
|
|
216
|
-
// main: scheme.onSurface,
|
|
217
|
-
// },
|
|
218
|
-
// common: {
|
|
219
|
-
// white: scheme.background,
|
|
220
|
-
// black: scheme.onBackground,
|
|
221
|
-
// },
|
|
222
|
-
// onInfo: {
|
|
223
|
-
// main: scheme.onInfo,
|
|
224
|
-
// contrastText: scheme.info,
|
|
225
|
-
// },
|
|
226
|
-
// infoContainer: {
|
|
227
|
-
// main: scheme.infoContainer,
|
|
228
|
-
// contrastText: scheme.onInfoContainer,
|
|
229
|
-
// },
|
|
230
|
-
// onInfoContainer: {
|
|
231
|
-
// main: scheme.onInfoContainer,
|
|
232
|
-
// contrastText: scheme.infoContainer,
|
|
233
|
-
// },
|
|
234
|
-
// onSuccess: {
|
|
235
|
-
// main: scheme.onSuccess,
|
|
236
|
-
// contrastText: scheme.success,
|
|
237
|
-
// },
|
|
238
|
-
// successContainer: {
|
|
239
|
-
// main: scheme.successContainer,
|
|
240
|
-
// contrastText: scheme.onSuccessContainer,
|
|
241
|
-
// },
|
|
242
|
-
// onSuccessContainer: {
|
|
243
|
-
// main: scheme.onSuccessContainer,
|
|
244
|
-
// contrastText: scheme.successContainer,
|
|
245
|
-
// },
|
|
246
|
-
// onWarning: {
|
|
247
|
-
// main: scheme.onWarning,
|
|
248
|
-
// contrastText: scheme.warning,
|
|
249
|
-
// },
|
|
250
|
-
// warningContainer: {
|
|
251
|
-
// main: scheme.warningContainer,
|
|
252
|
-
// contrastText: scheme.onWarningContainer,
|
|
253
|
-
// },
|
|
254
|
-
// onWarningContainer: {
|
|
255
|
-
// main: scheme.onWarningContainer,
|
|
256
|
-
// contrastText: scheme.warningContainer,
|
|
257
|
-
// },
|
|
258
|
-
// undefined: {
|
|
259
|
-
// main: scheme.undefined,
|
|
260
|
-
// contrastText: scheme.onUndefined,
|
|
261
|
-
// },
|
|
262
|
-
// onUndefined: {
|
|
263
|
-
// main: scheme.onUndefined,
|
|
264
|
-
// contrastText: scheme.undefined,
|
|
265
|
-
// },
|
|
266
|
-
// undefinedContainer: {
|
|
267
|
-
// main: scheme.undefinedContainer,
|
|
268
|
-
// contrastText: scheme.onUndefinedContainer,
|
|
269
|
-
// },
|
|
270
|
-
// onUndefinedContainer: {
|
|
271
|
-
// main: scheme.onUndefinedContainer,
|
|
272
|
-
// contrastText: scheme.undefinedContainer,
|
|
273
|
-
// },
|
|
274
|
-
supportive: {
|
|
275
|
-
main: scheme.supportive,
|
|
276
|
-
},
|
|
277
54
|
},
|
|
278
55
|
colors: {
|
|
279
56
|
schemes: scheme.schemes,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@webpros/mui-theme",
|
|
3
3
|
"description": "MUI v7 theme for WebPros products",
|
|
4
|
-
"version": "0.3.
|
|
4
|
+
"version": "0.3.3",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
7
7
|
"type": "git",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"theming",
|
|
15
15
|
"ui"
|
|
16
16
|
],
|
|
17
|
-
"main": "
|
|
17
|
+
"main": "src/index.js",
|
|
18
18
|
"types": "dist/index.d.ts",
|
|
19
19
|
"exports": {
|
|
20
20
|
".": {
|
|
@@ -38,7 +38,9 @@
|
|
|
38
38
|
"yarn": "^1.22.0"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
|
-
"build": "
|
|
41
|
+
"build": "yarn build:main && yarn build:eslint",
|
|
42
|
+
"build:main": "tsc -p tsconfig.build.json && tsc-alias -p tsconfig.build.json",
|
|
43
|
+
"build:eslint": "tsc -p ./eslint/tsconfig.eslint.json",
|
|
42
44
|
"storybook:dev": "storybook dev -p 6006",
|
|
43
45
|
"storybook:build": "storybook build",
|
|
44
46
|
"test": "npm run prettier:test && npm run lint && npm run typecheck",
|
|
@@ -48,7 +50,7 @@
|
|
|
48
50
|
"prettier:write": "prettier --write \"**/*.{ts,tsx}\"",
|
|
49
51
|
"typecheck": "tsc --noEmit",
|
|
50
52
|
"extract-tokens": "node tools/extractM3Tokens.js",
|
|
51
|
-
"generate:icons": "node
|
|
53
|
+
"generate:icons": "node tools/generate-icons.js"
|
|
52
54
|
},
|
|
53
55
|
"peerDependencies": {
|
|
54
56
|
"@emotion/react": "^11.14.0",
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
// Copyright 2025 WebPros International GmbH. All rights reserved.
|
|
3
|
-
import Grid from '@mui/material/Grid';
|
|
4
|
-
import { ColorItem } from '@storybook/addon-docs/blocks';
|
|
5
|
-
import { LegacyDarkTokensDefault, LegacyLightTokensDefault, } from '../tokens/legacyColors';
|
|
6
|
-
export const CustomColorPalette = ({ mode }) => {
|
|
7
|
-
const modeTitle = mode === 'light' ? 'Light Theme' : 'Dark Theme';
|
|
8
|
-
const palette = mode === 'light' ? LegacyLightTokensDefault : LegacyDarkTokensDefault;
|
|
9
|
-
return (_jsxs(Grid, { container: true, rowSpacing: 2, direction: 'column', children: [_jsx("h3", { id: modeTitle, children: modeTitle }), _jsx("h3", { id: `${mode}-base-colors`, children: 'Base colors' }), _jsx("h3", { id: `${mode}-primary`, children: 'Primary' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Primary", subtitle: "", colors: {
|
|
10
|
-
'theme.primary': palette.primary,
|
|
11
|
-
'theme.onPrimary': palette.onPrimary,
|
|
12
|
-
'theme.primaryContainer': palette.primaryContainer,
|
|
13
|
-
'theme.onPrimaryContainer': palette.onPrimaryContainer,
|
|
14
|
-
} }) }), _jsx("h3", { id: `${mode}-secondary`, children: 'Secondary' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Secondary", subtitle: "", colors: {
|
|
15
|
-
'theme.secondary': palette.secondary,
|
|
16
|
-
'theme.onSecondary': palette.onSecondary,
|
|
17
|
-
'theme.secondaryContainer': palette.secondaryContainer,
|
|
18
|
-
'theme.onSecondaryContainer': palette.onSecondaryContainer,
|
|
19
|
-
} }) }), _jsx("h3", { id: `${mode}-tertiary`, children: 'Tertiary' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Tertiary", subtitle: "", colors: {
|
|
20
|
-
'theme.tertiary': palette.tertiary,
|
|
21
|
-
'theme.onTertiary': palette.onTertiary,
|
|
22
|
-
'theme.tertiaryContainer': palette.tertiaryContainer,
|
|
23
|
-
'theme.onTertiaryContainer': palette.onTertiaryContainer,
|
|
24
|
-
} }) }), _jsx("h3", { id: `${mode}-error`, children: 'Error' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Error", subtitle: "", colors: {
|
|
25
|
-
'theme.error': palette.error,
|
|
26
|
-
'theme.onError': palette.onError,
|
|
27
|
-
'theme.errorContainer': palette.errorContainer,
|
|
28
|
-
'theme.onErrorContainer': palette.onErrorContainer,
|
|
29
|
-
} }) }), _jsx("h3", { id: `${mode}-surface`, children: 'Surface' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Surface", subtitle: "", colors: {
|
|
30
|
-
'theme.surfaceDim': palette.surfaceDim,
|
|
31
|
-
'theme.surface': palette.surface,
|
|
32
|
-
'theme.surfaceBright': palette.surfaceBright,
|
|
33
|
-
} }) }), _jsx("h3", { id: `${mode}-surface-container`, children: 'Surface container' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Surface container", subtitle: "", colors: {
|
|
34
|
-
'theme.surfaceContainerLowest ': palette.surfaceContainerLowest,
|
|
35
|
-
'theme.surfaceContainerLow': palette.surfaceContainerLow,
|
|
36
|
-
'theme.surfaceContainer': palette.surfaceContainer,
|
|
37
|
-
'theme.surfaceContainerHigh': palette.surfaceContainerHigh,
|
|
38
|
-
'theme.surfaceContainerHighest': palette.surfaceContainerHighest,
|
|
39
|
-
} }) }), _jsx("h3", { id: `${mode}-on-surface`, children: 'On surface' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "On surface", subtitle: "", colors: {
|
|
40
|
-
'theme.onSurface ': palette.onSurface,
|
|
41
|
-
'theme.onSurfaceVariant ': palette.onSurfaceVariant,
|
|
42
|
-
'theme.outline ': palette.outline,
|
|
43
|
-
'theme.outlineVariant ': palette.outlineVariant,
|
|
44
|
-
} }) }), _jsx("h3", { id: `${mode}-inverse`, children: 'Inverse' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Inverse", subtitle: "", colors: {
|
|
45
|
-
'theme.inverseSurface ': palette.inverseSurface,
|
|
46
|
-
'theme.inversePrimary ': palette.inversePrimary,
|
|
47
|
-
'theme.inverseOnSurface ': palette.inverseOnSurface,
|
|
48
|
-
} }) }), _jsx("h3", { id: `${mode}-shadow-and-scrim`, children: 'Shadow and Scrim' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Shadow and Scrim", subtitle: "", colors: {
|
|
49
|
-
'theme.shadow ': palette.shadow,
|
|
50
|
-
'theme.scrim ': palette.scrim,
|
|
51
|
-
} }) }), _jsx("h3", { id: `${mode}-custom-colors`, children: 'Custom state colors' }), _jsx("h3", { id: `${mode}-info`, children: 'Info' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Info", subtitle: "", colors: {
|
|
52
|
-
'theme.info': palette.info,
|
|
53
|
-
'theme.onInfo': palette.onInfo,
|
|
54
|
-
'theme.infoContainer': palette.infoContainer,
|
|
55
|
-
'theme.onInfoContainer': palette.onInfoContainer,
|
|
56
|
-
} }) }), _jsx("h3", { id: `${mode}-warning`, children: 'Warning' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Warning", subtitle: "", colors: {
|
|
57
|
-
'theme.warning': palette.warning,
|
|
58
|
-
'theme.onWarning': palette.onWarning,
|
|
59
|
-
'theme.warningContainer': palette.warningContainer,
|
|
60
|
-
'theme.onWarningContainer': palette.onWarningContainer,
|
|
61
|
-
} }) }), _jsx("h3", { id: `${mode}-success`, children: 'Success' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Success", subtitle: "", colors: {
|
|
62
|
-
'theme.success': palette.success,
|
|
63
|
-
'theme.onSuccess': palette.onSuccess,
|
|
64
|
-
'theme.successContainer': palette.successContainer,
|
|
65
|
-
'theme.onSuccessContainer': palette.onSuccessContainer,
|
|
66
|
-
} }) }), _jsx("h3", { id: `${mode}-utility-colors`, children: 'Utility colors' }), _jsx("h3", { id: `${mode}-undefined`, children: 'Undefined' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Undefined", subtitle: "", colors: {
|
|
67
|
-
'theme.undefined': palette.undefined,
|
|
68
|
-
} }) }), _jsx("h3", { id: `${mode}-supportive`, children: 'Supportive' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Supportive", subtitle: "", colors: {
|
|
69
|
-
'theme.supportive': palette.supportive,
|
|
70
|
-
} }) }), _jsx("h3", { id: `${mode}-divider`, children: 'Outline' }), _jsx("div", { className: "color-item", children: _jsx(ColorItem, { title: "Outline", subtitle: "", colors: {
|
|
71
|
-
'theme.outline': palette.outline,
|
|
72
|
-
} }) })] }));
|
|
73
|
-
};
|
|
@@ -1,78 +0,0 @@
|
|
|
1
|
-
// Copyright 2025 WebPros International GmbH. All rights reserved.
|
|
2
|
-
// reference
|
|
3
|
-
// https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
|
|
4
|
-
export const LegacyDarkTokensDefault = {
|
|
5
|
-
primary: '#B09BEF',
|
|
6
|
-
onPrimary: '#19132D',
|
|
7
|
-
primaryContainer: '#4E388E',
|
|
8
|
-
onPrimaryContainer: '#F9F7FF',
|
|
9
|
-
secondary: '#9497AC',
|
|
10
|
-
onSecondary: '#23242A',
|
|
11
|
-
secondaryContainer: '#464854',
|
|
12
|
-
onSecondaryContainer: '#EDEEF1',
|
|
13
|
-
tertiary: '#8FAAB6',
|
|
14
|
-
onTertiary: '#3B4347',
|
|
15
|
-
tertiaryContainer: '#325261',
|
|
16
|
-
onTertiaryContainer: '#EDF0F1',
|
|
17
|
-
error: '#FA7A9A',
|
|
18
|
-
onError: '#68182C',
|
|
19
|
-
errorContainer: '#8C3148',
|
|
20
|
-
onErrorContainer: '#FFF2F5',
|
|
21
|
-
errorFixedDim: '#EF5350',
|
|
22
|
-
primaryFixed: '#E7DFFF',
|
|
23
|
-
primaryFixedDim: '#D0C0FF',
|
|
24
|
-
onPrimaryFixed: '#281C4C',
|
|
25
|
-
onPrimaryFixedVariant: '#4F4178',
|
|
26
|
-
secondaryFixed: '#E4E5F0',
|
|
27
|
-
secondaryFixedDim: '#C8CBD9',
|
|
28
|
-
onSecondaryFixed: '#1A1C2C',
|
|
29
|
-
onSecondaryFixedVariant: '#454859',
|
|
30
|
-
tertiaryFixed: '#D6E7EF',
|
|
31
|
-
tertiaryFixedDim: '#B9DAEA',
|
|
32
|
-
onTertiaryFixed: '#11262F',
|
|
33
|
-
onTertiaryFixedVariant: '#3C5560',
|
|
34
|
-
surface: '#222326',
|
|
35
|
-
onSurface: '#E5E7F3',
|
|
36
|
-
surfaceDim: '#131418',
|
|
37
|
-
surfaceBright: '#38393F',
|
|
38
|
-
surfaceContainerLowest: '#31323A',
|
|
39
|
-
surfaceContainerLow: '#25262C',
|
|
40
|
-
surfaceContainer: '#202126',
|
|
41
|
-
surfaceContainerHigh: '#1A1B20',
|
|
42
|
-
surfaceContainerHighest: '#16171A',
|
|
43
|
-
surfaceVariant: '#2B2C31',
|
|
44
|
-
onSurfaceVariant: '#AFB3C5',
|
|
45
|
-
outline: '#7F8293',
|
|
46
|
-
outlineVariant: '#454652',
|
|
47
|
-
inverseSurface: '#D9DBE4',
|
|
48
|
-
inverseOnSurface: '#222326',
|
|
49
|
-
inversePrimary: '#644EA5',
|
|
50
|
-
shadow: '#000000',
|
|
51
|
-
scrim: '#000000',
|
|
52
|
-
surfaceTint: '#9E8DD3',
|
|
53
|
-
background: '#151517',
|
|
54
|
-
onBackground: '#E2E4EE',
|
|
55
|
-
// custom colors
|
|
56
|
-
info: '#5696CE',
|
|
57
|
-
onInfo: '#0A253A',
|
|
58
|
-
infoContainer: '#124771',
|
|
59
|
-
onInfoContainer: '#E0ECF6',
|
|
60
|
-
infoFixedDim: '#03A9F4',
|
|
61
|
-
// ok
|
|
62
|
-
success: '#6EBB72',
|
|
63
|
-
onSuccess: '#0C440F',
|
|
64
|
-
successContainer: '#125F16',
|
|
65
|
-
onSuccessContainer: '#F1FDF1',
|
|
66
|
-
successFixedDim: '#4CAF50',
|
|
67
|
-
warning: '#DC8A4F',
|
|
68
|
-
onWarning: '#4E2305',
|
|
69
|
-
warningContainer: '#7B3C0F',
|
|
70
|
-
onWarningContainer: '#FAF0E9',
|
|
71
|
-
warningFixedDim: '#FF9800',
|
|
72
|
-
// ok
|
|
73
|
-
undefined: '#9BABB3',
|
|
74
|
-
onUndefined: '#2A3438',
|
|
75
|
-
undefinedContainer: '#3D464D',
|
|
76
|
-
onUndefinedContainer: '#E4EBF0',
|
|
77
|
-
supportive: '#8FAAB6',
|
|
78
|
-
};
|
|
@@ -1,76 +0,0 @@
|
|
|
1
|
-
// Copyright 2025 WebPros International GmbH. All rights reserved.
|
|
2
|
-
// reference
|
|
3
|
-
// https://www.figma.com/design/RPLeGa2LdhKElQQ0xIXtSh/WebPros-dashboard?node-id=53699-35493&t=pvKyGGnGRUL3kYn8-1
|
|
4
|
-
export const LegacyLightTokensDefault = {
|
|
5
|
-
primary: '#4527A0',
|
|
6
|
-
onPrimary: '#FFFFFF',
|
|
7
|
-
primaryContainer: '#E2DFFF',
|
|
8
|
-
onPrimaryContainer: '#1E1A69',
|
|
9
|
-
secondary: '#5F6690',
|
|
10
|
-
onSecondary: '#FFFFFF',
|
|
11
|
-
secondaryContainer: '#D3D5E3',
|
|
12
|
-
onSecondaryContainer: '#282B40',
|
|
13
|
-
tertiary: '#546E7A',
|
|
14
|
-
onTertiary: '#FFFFFF',
|
|
15
|
-
tertiaryContainer: '#DAE9F0',
|
|
16
|
-
onTertiaryContainer: '#11262F',
|
|
17
|
-
error: '#BA1A1A',
|
|
18
|
-
onError: '#FFFFFF',
|
|
19
|
-
errorContainer: '#FFDAD6',
|
|
20
|
-
onErrorContainer: '#940E0F',
|
|
21
|
-
errorFixedDim: '#EF5350',
|
|
22
|
-
primaryFixed: '#E7DFFF',
|
|
23
|
-
primaryFixedDim: '#D0C0FF',
|
|
24
|
-
onPrimaryFixed: '#281C4C',
|
|
25
|
-
onPrimaryFixedVariant: '#4F4178',
|
|
26
|
-
secondaryFixed: '#E4E5F0',
|
|
27
|
-
secondaryFixedDim: '#C8CBD9',
|
|
28
|
-
onSecondaryFixed: '#1A1C2C',
|
|
29
|
-
onSecondaryFixedVariant: '#454859',
|
|
30
|
-
tertiaryFixed: '#D6E7EF',
|
|
31
|
-
tertiaryFixedDim: '#B9DAEA',
|
|
32
|
-
onTertiaryFixed: '#11262F',
|
|
33
|
-
onTertiaryFixedVariant: '#3C5560',
|
|
34
|
-
surface: '#F2F3FA',
|
|
35
|
-
onSurface: '#1B1C21',
|
|
36
|
-
surfaceDim: '#CED0E0',
|
|
37
|
-
surfaceBright: '#EDF0FF',
|
|
38
|
-
surfaceContainerLowest: '#FFFFFF',
|
|
39
|
-
surfaceContainerLow: '#E7E9F4',
|
|
40
|
-
surfaceContainer: '#E4E5F0',
|
|
41
|
-
surfaceContainerHigh: '#FFFFFF',
|
|
42
|
-
surfaceContainerHighest: '#DDDFED',
|
|
43
|
-
surfaceVariant: '#E4E6F0',
|
|
44
|
-
onSurfaceVariant: '#505263',
|
|
45
|
-
outline: '#8C8E96',
|
|
46
|
-
outlineVariant: '#EEEEF1',
|
|
47
|
-
inverseSurface: '#313036',
|
|
48
|
-
inverseOnSurface: '#F3EFF7',
|
|
49
|
-
inversePrimary: '#D0C0FF',
|
|
50
|
-
shadow: '#000000',
|
|
51
|
-
scrim: '#000000',
|
|
52
|
-
surfaceTint: '#5D4D8D',
|
|
53
|
-
background: '#E9EBF6',
|
|
54
|
-
onBackground: '#1B1C21',
|
|
55
|
-
// custom colors
|
|
56
|
-
info: '#0373CE',
|
|
57
|
-
onInfo: '#FFFFFF',
|
|
58
|
-
infoContainer: '#C8E8FF',
|
|
59
|
-
onInfoContainer: '#094A94',
|
|
60
|
-
infoFixedDim: '#03A9F4',
|
|
61
|
-
success: '#2D8731',
|
|
62
|
-
onSuccess: '#FFFFFF',
|
|
63
|
-
successContainer: '#CAEFCD',
|
|
64
|
-
onSuccessContainer: '#0F5C13',
|
|
65
|
-
successFixedDim: '#4CAF50',
|
|
66
|
-
warning: '#C75300',
|
|
67
|
-
onWarning: '#FFFFFF',
|
|
68
|
-
warningContainer: '#FFE0B2',
|
|
69
|
-
onWarningContainer: '#892303',
|
|
70
|
-
warningFixedDim: '#FF9800',
|
|
71
|
-
undefined: '#90A4AE',
|
|
72
|
-
onUndefined: '#FFFFFF',
|
|
73
|
-
undefinedContainer: '#DFE2E4',
|
|
74
|
-
onUndefinedContainer: '#263238',
|
|
75
|
-
supportive: '#546E7A',
|
|
76
|
-
};
|
|
@@ -1,72 +0,0 @@
|
|
|
1
|
-
export type ThemeColorTokensLegacy = {
|
|
2
|
-
primary: string;
|
|
3
|
-
onPrimary: string;
|
|
4
|
-
primaryContainer: string;
|
|
5
|
-
onPrimaryContainer: string;
|
|
6
|
-
secondary: string;
|
|
7
|
-
onSecondary: string;
|
|
8
|
-
secondaryContainer: string;
|
|
9
|
-
onSecondaryContainer: string;
|
|
10
|
-
tertiary: string;
|
|
11
|
-
onTertiary: string;
|
|
12
|
-
tertiaryContainer: string;
|
|
13
|
-
onTertiaryContainer: string;
|
|
14
|
-
error: string;
|
|
15
|
-
onError: string;
|
|
16
|
-
errorContainer: string;
|
|
17
|
-
onErrorContainer: string;
|
|
18
|
-
errorFixedDim: string;
|
|
19
|
-
primaryFixed: string;
|
|
20
|
-
primaryFixedDim: string;
|
|
21
|
-
onPrimaryFixed: string;
|
|
22
|
-
onPrimaryFixedVariant: string;
|
|
23
|
-
secondaryFixed: string;
|
|
24
|
-
secondaryFixedDim: string;
|
|
25
|
-
onSecondaryFixed: string;
|
|
26
|
-
onSecondaryFixedVariant: string;
|
|
27
|
-
tertiaryFixed: string;
|
|
28
|
-
tertiaryFixedDim: string;
|
|
29
|
-
onTertiaryFixed: string;
|
|
30
|
-
onTertiaryFixedVariant: string;
|
|
31
|
-
surface: string;
|
|
32
|
-
onSurface: string;
|
|
33
|
-
surfaceDim: string;
|
|
34
|
-
surfaceBright: string;
|
|
35
|
-
surfaceContainerLowest: string;
|
|
36
|
-
surfaceContainerLow: string;
|
|
37
|
-
surfaceContainer: string;
|
|
38
|
-
surfaceContainerHigh: string;
|
|
39
|
-
surfaceContainerHighest: string;
|
|
40
|
-
surfaceVariant: string;
|
|
41
|
-
onSurfaceVariant: string;
|
|
42
|
-
outline: string;
|
|
43
|
-
outlineVariant: string;
|
|
44
|
-
inverseSurface: string;
|
|
45
|
-
inverseOnSurface: string;
|
|
46
|
-
inversePrimary: string;
|
|
47
|
-
shadow: string;
|
|
48
|
-
scrim: string;
|
|
49
|
-
surfaceTint: string;
|
|
50
|
-
background: string;
|
|
51
|
-
onBackground: string;
|
|
52
|
-
info: string;
|
|
53
|
-
onInfo: string;
|
|
54
|
-
infoContainer: string;
|
|
55
|
-
onInfoContainer: string;
|
|
56
|
-
infoFixedDim: string;
|
|
57
|
-
success: string;
|
|
58
|
-
onSuccess: string;
|
|
59
|
-
successContainer: string;
|
|
60
|
-
onSuccessContainer: string;
|
|
61
|
-
successFixedDim: string;
|
|
62
|
-
warning: string;
|
|
63
|
-
onWarning: string;
|
|
64
|
-
warningContainer: string;
|
|
65
|
-
onWarningContainer: string;
|
|
66
|
-
warningFixedDim: string;
|
|
67
|
-
undefined: string;
|
|
68
|
-
onUndefined: string;
|
|
69
|
-
undefinedContainer: string;
|
|
70
|
-
onUndefinedContainer: string;
|
|
71
|
-
supportive: string;
|
|
72
|
-
};
|