@blocklet/theme 3.0.16 → 3.0.19
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/cjs/index.js +121 -42
- package/dist/es/index.js +121 -42
- package/package.json +2 -3
package/dist/cjs/index.js
CHANGED
|
@@ -1,7 +1,48 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const system = require("@mui/system");
|
|
4
3
|
const deepmerge = require("deepmerge");
|
|
4
|
+
const defaultGenerator = (componentName) => componentName;
|
|
5
|
+
const createClassNameGenerator = () => {
|
|
6
|
+
let generate = defaultGenerator;
|
|
7
|
+
return {
|
|
8
|
+
configure(generator) {
|
|
9
|
+
generate = generator;
|
|
10
|
+
},
|
|
11
|
+
generate(componentName) {
|
|
12
|
+
return generate(componentName);
|
|
13
|
+
},
|
|
14
|
+
reset() {
|
|
15
|
+
generate = defaultGenerator;
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
};
|
|
19
|
+
const ClassNameGenerator = createClassNameGenerator();
|
|
20
|
+
const globalStateClasses = {
|
|
21
|
+
active: "active",
|
|
22
|
+
checked: "checked",
|
|
23
|
+
completed: "completed",
|
|
24
|
+
disabled: "disabled",
|
|
25
|
+
error: "error",
|
|
26
|
+
expanded: "expanded",
|
|
27
|
+
focused: "focused",
|
|
28
|
+
focusVisible: "focusVisible",
|
|
29
|
+
open: "open",
|
|
30
|
+
readOnly: "readOnly",
|
|
31
|
+
required: "required",
|
|
32
|
+
selected: "selected"
|
|
33
|
+
};
|
|
34
|
+
function generateUtilityClass(componentName, slot, globalStatePrefix = "Mui") {
|
|
35
|
+
const globalStateClass = globalStateClasses[slot];
|
|
36
|
+
return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
|
|
37
|
+
}
|
|
38
|
+
function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui") {
|
|
39
|
+
const result = {};
|
|
40
|
+
slots.forEach((slot) => {
|
|
41
|
+
result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
|
|
42
|
+
});
|
|
43
|
+
return result;
|
|
44
|
+
}
|
|
45
|
+
const alertClasses = generateUtilityClasses("MuiAlert", ["root", "action", "icon", "message", "filled", "colorSuccess", "colorInfo", "colorWarning", "colorError", "filledSuccess", "filledInfo", "filledWarning", "filledError", "outlined", "outlinedSuccess", "outlinedInfo", "outlinedWarning", "outlinedError", "standard", "standardSuccess", "standardInfo", "standardWarning", "standardError"]);
|
|
5
46
|
const BLOCKLET_THEME_PREFER_KEY = "blocklet_theme_prefer";
|
|
6
47
|
const merge = (x, y) => {
|
|
7
48
|
return deepmerge(x, y, {
|
|
@@ -115,6 +156,40 @@ const shadows = [
|
|
|
115
156
|
"0px 11.5px 46px 0px rgba(24,24,27,0.28),0px 11px 25px 0px rgba(24,24,27,0.14)",
|
|
116
157
|
"0px 12px 48px 0px rgba(24,24,27,0.29),0px 11.5px 26px 0px rgba(24,24,27,0.145)"
|
|
117
158
|
];
|
|
159
|
+
function alpha(color, opacity) {
|
|
160
|
+
if (color.startsWith("rgba(")) {
|
|
161
|
+
const match = color.match(/rgba?\(([^)]+)\)/);
|
|
162
|
+
if (match) {
|
|
163
|
+
const rgbValues = match[1].split(",").slice(0, 3).join(",");
|
|
164
|
+
return `rgba(${rgbValues}, ${opacity})`;
|
|
165
|
+
}
|
|
166
|
+
}
|
|
167
|
+
if (color.startsWith("rgb(")) {
|
|
168
|
+
const match = color.match(/rgb\(([^)]+)\)/);
|
|
169
|
+
if (match) {
|
|
170
|
+
return `rgba(${match[1]}, ${opacity})`;
|
|
171
|
+
}
|
|
172
|
+
}
|
|
173
|
+
if (color.startsWith("#")) {
|
|
174
|
+
const hex = color.slice(1);
|
|
175
|
+
let r;
|
|
176
|
+
let g;
|
|
177
|
+
let b;
|
|
178
|
+
if (hex.length === 3) {
|
|
179
|
+
r = parseInt(hex[0] + hex[0], 16);
|
|
180
|
+
g = parseInt(hex[1] + hex[1], 16);
|
|
181
|
+
b = parseInt(hex[2] + hex[2], 16);
|
|
182
|
+
} else if (hex.length === 6) {
|
|
183
|
+
r = parseInt(hex.slice(0, 2), 16);
|
|
184
|
+
g = parseInt(hex.slice(2, 4), 16);
|
|
185
|
+
b = parseInt(hex.slice(4, 6), 16);
|
|
186
|
+
} else {
|
|
187
|
+
return color;
|
|
188
|
+
}
|
|
189
|
+
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
190
|
+
}
|
|
191
|
+
return `rgba(${color}, ${opacity})`;
|
|
192
|
+
}
|
|
118
193
|
const BLOCKLET_THEME_LIGHT = {
|
|
119
194
|
palette: {
|
|
120
195
|
mode: "light",
|
|
@@ -399,21 +474,23 @@ const BLOCKLET_THEME_LIGHT = {
|
|
|
399
474
|
},
|
|
400
475
|
MuiAlert: {
|
|
401
476
|
styleOverrides: {
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
477
|
+
root: ({ theme }) => ({
|
|
478
|
+
[`&.${alertClasses.filled}.${alertClasses.colorError}`]: {
|
|
479
|
+
color: theme.palette.common.white,
|
|
480
|
+
fontWeight: 300
|
|
481
|
+
},
|
|
482
|
+
[`&.${alertClasses.filled}.${alertClasses.colorWarning}`]: {
|
|
483
|
+
color: theme.palette.common.white,
|
|
484
|
+
fontWeight: 300
|
|
485
|
+
},
|
|
486
|
+
[`&.${alertClasses.filled}.${alertClasses.colorInfo}`]: {
|
|
487
|
+
color: theme.palette.common.white,
|
|
488
|
+
fontWeight: 300
|
|
489
|
+
},
|
|
490
|
+
[`&.${alertClasses.filled}.${alertClasses.colorSuccess}`]: {
|
|
491
|
+
color: theme.palette.common.white,
|
|
492
|
+
fontWeight: 300
|
|
493
|
+
}
|
|
417
494
|
})
|
|
418
495
|
}
|
|
419
496
|
}
|
|
@@ -543,32 +620,34 @@ const BLOCKLET_THEME_DARK = merge(BLOCKLET_THEME_LIGHT, {
|
|
|
543
620
|
},
|
|
544
621
|
MuiAlert: {
|
|
545
622
|
styleOverrides: {
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
623
|
+
root: ({ theme }) => ({
|
|
624
|
+
[`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: {
|
|
625
|
+
backgroundColor: alpha(theme.palette.success.main, 0.25),
|
|
626
|
+
color: theme.palette.success.light,
|
|
627
|
+
"& .MuiAlert-icon": {
|
|
628
|
+
color: theme.palette.success.light
|
|
629
|
+
}
|
|
630
|
+
},
|
|
631
|
+
[`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: {
|
|
632
|
+
backgroundColor: alpha(theme.palette.info.main, 0.25),
|
|
633
|
+
color: theme.palette.info.light,
|
|
634
|
+
"& .MuiAlert-icon": {
|
|
635
|
+
color: theme.palette.info.light
|
|
636
|
+
}
|
|
637
|
+
},
|
|
638
|
+
[`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: {
|
|
639
|
+
backgroundColor: alpha(theme.palette.warning.main, 0.25),
|
|
640
|
+
color: theme.palette.warning.light,
|
|
641
|
+
"& .MuiAlert-icon": {
|
|
642
|
+
color: theme.palette.warning.light
|
|
643
|
+
}
|
|
644
|
+
},
|
|
645
|
+
[`&.${alertClasses.standard}.${alertClasses.colorError}`]: {
|
|
646
|
+
backgroundColor: alpha(theme.palette.error.main, 0.25),
|
|
647
|
+
color: theme.palette.error.light,
|
|
648
|
+
"& .MuiAlert-icon": {
|
|
649
|
+
color: theme.palette.error.light
|
|
650
|
+
}
|
|
572
651
|
}
|
|
573
652
|
})
|
|
574
653
|
}
|
package/dist/es/index.js
CHANGED
|
@@ -1,5 +1,46 @@
|
|
|
1
|
-
import { alpha } from "@mui/system";
|
|
2
1
|
import deepmerge from "deepmerge";
|
|
2
|
+
const defaultGenerator = (componentName) => componentName;
|
|
3
|
+
const createClassNameGenerator = () => {
|
|
4
|
+
let generate = defaultGenerator;
|
|
5
|
+
return {
|
|
6
|
+
configure(generator) {
|
|
7
|
+
generate = generator;
|
|
8
|
+
},
|
|
9
|
+
generate(componentName) {
|
|
10
|
+
return generate(componentName);
|
|
11
|
+
},
|
|
12
|
+
reset() {
|
|
13
|
+
generate = defaultGenerator;
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
const ClassNameGenerator = createClassNameGenerator();
|
|
18
|
+
const globalStateClasses = {
|
|
19
|
+
active: "active",
|
|
20
|
+
checked: "checked",
|
|
21
|
+
completed: "completed",
|
|
22
|
+
disabled: "disabled",
|
|
23
|
+
error: "error",
|
|
24
|
+
expanded: "expanded",
|
|
25
|
+
focused: "focused",
|
|
26
|
+
focusVisible: "focusVisible",
|
|
27
|
+
open: "open",
|
|
28
|
+
readOnly: "readOnly",
|
|
29
|
+
required: "required",
|
|
30
|
+
selected: "selected"
|
|
31
|
+
};
|
|
32
|
+
function generateUtilityClass(componentName, slot, globalStatePrefix = "Mui") {
|
|
33
|
+
const globalStateClass = globalStateClasses[slot];
|
|
34
|
+
return globalStateClass ? `${globalStatePrefix}-${globalStateClass}` : `${ClassNameGenerator.generate(componentName)}-${slot}`;
|
|
35
|
+
}
|
|
36
|
+
function generateUtilityClasses(componentName, slots, globalStatePrefix = "Mui") {
|
|
37
|
+
const result = {};
|
|
38
|
+
slots.forEach((slot) => {
|
|
39
|
+
result[slot] = generateUtilityClass(componentName, slot, globalStatePrefix);
|
|
40
|
+
});
|
|
41
|
+
return result;
|
|
42
|
+
}
|
|
43
|
+
const alertClasses = generateUtilityClasses("MuiAlert", ["root", "action", "icon", "message", "filled", "colorSuccess", "colorInfo", "colorWarning", "colorError", "filledSuccess", "filledInfo", "filledWarning", "filledError", "outlined", "outlinedSuccess", "outlinedInfo", "outlinedWarning", "outlinedError", "standard", "standardSuccess", "standardInfo", "standardWarning", "standardError"]);
|
|
3
44
|
const BLOCKLET_THEME_PREFER_KEY = "blocklet_theme_prefer";
|
|
4
45
|
const merge = (x, y) => {
|
|
5
46
|
return deepmerge(x, y, {
|
|
@@ -113,6 +154,40 @@ const shadows = [
|
|
|
113
154
|
"0px 11.5px 46px 0px rgba(24,24,27,0.28),0px 11px 25px 0px rgba(24,24,27,0.14)",
|
|
114
155
|
"0px 12px 48px 0px rgba(24,24,27,0.29),0px 11.5px 26px 0px rgba(24,24,27,0.145)"
|
|
115
156
|
];
|
|
157
|
+
function alpha(color, opacity) {
|
|
158
|
+
if (color.startsWith("rgba(")) {
|
|
159
|
+
const match = color.match(/rgba?\(([^)]+)\)/);
|
|
160
|
+
if (match) {
|
|
161
|
+
const rgbValues = match[1].split(",").slice(0, 3).join(",");
|
|
162
|
+
return `rgba(${rgbValues}, ${opacity})`;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
if (color.startsWith("rgb(")) {
|
|
166
|
+
const match = color.match(/rgb\(([^)]+)\)/);
|
|
167
|
+
if (match) {
|
|
168
|
+
return `rgba(${match[1]}, ${opacity})`;
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
if (color.startsWith("#")) {
|
|
172
|
+
const hex = color.slice(1);
|
|
173
|
+
let r;
|
|
174
|
+
let g;
|
|
175
|
+
let b;
|
|
176
|
+
if (hex.length === 3) {
|
|
177
|
+
r = parseInt(hex[0] + hex[0], 16);
|
|
178
|
+
g = parseInt(hex[1] + hex[1], 16);
|
|
179
|
+
b = parseInt(hex[2] + hex[2], 16);
|
|
180
|
+
} else if (hex.length === 6) {
|
|
181
|
+
r = parseInt(hex.slice(0, 2), 16);
|
|
182
|
+
g = parseInt(hex.slice(2, 4), 16);
|
|
183
|
+
b = parseInt(hex.slice(4, 6), 16);
|
|
184
|
+
} else {
|
|
185
|
+
return color;
|
|
186
|
+
}
|
|
187
|
+
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
188
|
+
}
|
|
189
|
+
return `rgba(${color}, ${opacity})`;
|
|
190
|
+
}
|
|
116
191
|
const BLOCKLET_THEME_LIGHT = {
|
|
117
192
|
palette: {
|
|
118
193
|
mode: "light",
|
|
@@ -397,21 +472,23 @@ const BLOCKLET_THEME_LIGHT = {
|
|
|
397
472
|
},
|
|
398
473
|
MuiAlert: {
|
|
399
474
|
styleOverrides: {
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
475
|
+
root: ({ theme }) => ({
|
|
476
|
+
[`&.${alertClasses.filled}.${alertClasses.colorError}`]: {
|
|
477
|
+
color: theme.palette.common.white,
|
|
478
|
+
fontWeight: 300
|
|
479
|
+
},
|
|
480
|
+
[`&.${alertClasses.filled}.${alertClasses.colorWarning}`]: {
|
|
481
|
+
color: theme.palette.common.white,
|
|
482
|
+
fontWeight: 300
|
|
483
|
+
},
|
|
484
|
+
[`&.${alertClasses.filled}.${alertClasses.colorInfo}`]: {
|
|
485
|
+
color: theme.palette.common.white,
|
|
486
|
+
fontWeight: 300
|
|
487
|
+
},
|
|
488
|
+
[`&.${alertClasses.filled}.${alertClasses.colorSuccess}`]: {
|
|
489
|
+
color: theme.palette.common.white,
|
|
490
|
+
fontWeight: 300
|
|
491
|
+
}
|
|
415
492
|
})
|
|
416
493
|
}
|
|
417
494
|
}
|
|
@@ -541,32 +618,34 @@ const BLOCKLET_THEME_DARK = merge(BLOCKLET_THEME_LIGHT, {
|
|
|
541
618
|
},
|
|
542
619
|
MuiAlert: {
|
|
543
620
|
styleOverrides: {
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
621
|
+
root: ({ theme }) => ({
|
|
622
|
+
[`&.${alertClasses.standard}.${alertClasses.colorSuccess}`]: {
|
|
623
|
+
backgroundColor: alpha(theme.palette.success.main, 0.25),
|
|
624
|
+
color: theme.palette.success.light,
|
|
625
|
+
"& .MuiAlert-icon": {
|
|
626
|
+
color: theme.palette.success.light
|
|
627
|
+
}
|
|
628
|
+
},
|
|
629
|
+
[`&.${alertClasses.standard}.${alertClasses.colorInfo}`]: {
|
|
630
|
+
backgroundColor: alpha(theme.palette.info.main, 0.25),
|
|
631
|
+
color: theme.palette.info.light,
|
|
632
|
+
"& .MuiAlert-icon": {
|
|
633
|
+
color: theme.palette.info.light
|
|
634
|
+
}
|
|
635
|
+
},
|
|
636
|
+
[`&.${alertClasses.standard}.${alertClasses.colorWarning}`]: {
|
|
637
|
+
backgroundColor: alpha(theme.palette.warning.main, 0.25),
|
|
638
|
+
color: theme.palette.warning.light,
|
|
639
|
+
"& .MuiAlert-icon": {
|
|
640
|
+
color: theme.palette.warning.light
|
|
641
|
+
}
|
|
642
|
+
},
|
|
643
|
+
[`&.${alertClasses.standard}.${alertClasses.colorError}`]: {
|
|
644
|
+
backgroundColor: alpha(theme.palette.error.main, 0.25),
|
|
645
|
+
color: theme.palette.error.light,
|
|
646
|
+
"& .MuiAlert-icon": {
|
|
647
|
+
color: theme.palette.error.light
|
|
648
|
+
}
|
|
570
649
|
}
|
|
571
650
|
})
|
|
572
651
|
}
|
package/package.json
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
"publishConfig": {
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
|
-
"version": "3.0.
|
|
6
|
+
"version": "3.0.19",
|
|
7
7
|
"description": "A preset MUI-based theme configuration designed for use with Blocklet.",
|
|
8
8
|
"main": "dist/cjs/index.js",
|
|
9
9
|
"module": "dist/es/index.js",
|
|
@@ -32,7 +32,6 @@
|
|
|
32
32
|
"@mui/material": "^7.1.2"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
|
-
"@mui/system": "^7.1.1",
|
|
36
35
|
"deepmerge": "^4.3.1"
|
|
37
36
|
},
|
|
38
37
|
"devDependencies": {
|
|
@@ -45,5 +44,5 @@
|
|
|
45
44
|
"ts-jest": "^29.4.0",
|
|
46
45
|
"typescript": "~5.5.4"
|
|
47
46
|
},
|
|
48
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "c7886f76502bc62236cc1dd28aa26c050a702d1c"
|
|
49
48
|
}
|