@lobehub/ui 1.13.0 → 1.14.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/es/ColorScales/ScaleRow.js +2 -1
- package/es/ColorScales/index.js +2 -1
- package/es/Highlighter/theme.js +4 -20
- package/es/styles/algorithms/generateCustomStylish.js +1 -1
- package/es/styles/algorithms/generateCustomToken.js +4 -2
- package/es/styles/colors.js +12 -12
- package/es/types/customToken.d.ts +1 -1
- package/package.json +1 -1
|
@@ -39,12 +39,13 @@ var ScaleRow = /*#__PURE__*/memo(function (_ref) {
|
|
|
39
39
|
children: title
|
|
40
40
|
})
|
|
41
41
|
}, title), scale.map(function (color, index) {
|
|
42
|
+
if (index === 0 || index === 12) return null;
|
|
42
43
|
return /*#__PURE__*/_jsx("div", {
|
|
43
44
|
className: styles.scaleBox,
|
|
44
45
|
title: color,
|
|
45
46
|
style: style,
|
|
46
47
|
onClick: function onClick() {
|
|
47
|
-
var content = "token.".concat(name).concat(index
|
|
48
|
+
var content = "token.".concat(name).concat(index).concat(isAlpha ? 'A' : '', " /* ").concat(color, " */");
|
|
48
49
|
copy(content);
|
|
49
50
|
message.success(content);
|
|
50
51
|
},
|
package/es/ColorScales/index.js
CHANGED
|
@@ -24,6 +24,7 @@ var ColorScales = /*#__PURE__*/memo(function (_ref) {
|
|
|
24
24
|
children: [/*#__PURE__*/_jsx("div", {
|
|
25
25
|
className: styles.scaleRowTitle
|
|
26
26
|
}, "scale-num"), new Array(scale.light.length).fill('').map(function (_, index) {
|
|
27
|
+
if (index === 0 || index === 12) return null;
|
|
27
28
|
var isMidHighlight = midHighLight === index;
|
|
28
29
|
return /*#__PURE__*/_jsx("div", {
|
|
29
30
|
className: styles.scaleBox,
|
|
@@ -35,7 +36,7 @@ var ColorScales = /*#__PURE__*/memo(function (_ref) {
|
|
|
35
36
|
opacity: 0.5,
|
|
36
37
|
fontWeight: isMidHighlight ? 700 : 400
|
|
37
38
|
},
|
|
38
|
-
children: index
|
|
39
|
+
children: index
|
|
39
40
|
})
|
|
40
41
|
})
|
|
41
42
|
}, 'num' + index);
|
package/es/Highlighter/theme.js
CHANGED
|
@@ -1,25 +1,6 @@
|
|
|
1
1
|
import { colorScales } from "../styles/colors";
|
|
2
2
|
export var themeConfig = function themeConfig(isDarkMode) {
|
|
3
3
|
var type = isDarkMode ? 'dark' : 'light';
|
|
4
|
-
// const theme = {
|
|
5
|
-
// red: isDarkMode ? colorScales.tomato[type][9] : colorScales.red[type][10],
|
|
6
|
-
// brightRed: isDarkMode ? colorScales.tomato[type][9] : colorScales.red[type][10],
|
|
7
|
-
// yellow: isDarkMode ? colorScales.amber[type][9] : colorScales.amber[type][10],
|
|
8
|
-
// brightYellow: isDarkMode ? colorScales.yellow[type][9] : colorScales.brown[type][10],
|
|
9
|
-
// green: isDarkMode ? colorScales.lime[type][9] : colorScales.grass[type][10],
|
|
10
|
-
// brightGreen: isDarkMode ? colorScales.lime[type][9] : colorScales.grass[type][10],
|
|
11
|
-
// cyan: '#42b3c2',
|
|
12
|
-
// brightCyan: '#4cd1e0',
|
|
13
|
-
// blue: isDarkMode ? colorScales.sky[type][9] : colorScales.blue[type][10],
|
|
14
|
-
// brightBlue: isDarkMode ? colorScales.sky[type][9] : colorScales.blue[type][10],
|
|
15
|
-
// magenta: '#c162de',
|
|
16
|
-
// brightMagenta: isDarkMode ? colorScales.purple[type][10] : colorScales.violet[type][10],
|
|
17
|
-
// white: isDarkMode ? colorScales.slate[type][10] : colorScales.gray[type][10],
|
|
18
|
-
// brightWhite: isDarkMode ? colorScales.gray[type][11] : colorScales.gray[type][10],
|
|
19
|
-
// black: isDarkMode ? colorScales.slate[type][10] : colorScales.gray[type][10],
|
|
20
|
-
// brightBlack: '#4f5666',
|
|
21
|
-
// };
|
|
22
|
-
|
|
23
4
|
var color0 = colorScales.gray[type][11];
|
|
24
5
|
var color1 = isDarkMode ? colorScales.cyan[type][9] : colorScales.cyan[type][9];
|
|
25
6
|
var color2 = isDarkMode ? colorScales.lime[type][9] : colorScales.green[type][9];
|
|
@@ -1667,6 +1648,9 @@ export var themeConfig = function themeConfig(isDarkMode) {
|
|
|
1667
1648
|
settings: {
|
|
1668
1649
|
fontStyle: 'italic'
|
|
1669
1650
|
}
|
|
1670
|
-
}]
|
|
1651
|
+
}],
|
|
1652
|
+
colors: {
|
|
1653
|
+
'editor.foreground': color4
|
|
1654
|
+
}
|
|
1671
1655
|
};
|
|
1672
1656
|
};
|
|
@@ -14,6 +14,6 @@ export var generateCustomStylish = function generateCustomStylish(_ref) {
|
|
|
14
14
|
heroBlurBall: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n will-change: transform;\n\n background: linear-gradient(\n 135deg,\n ", " 0%,\n ", " 30%,\n ", " 70%,\n ", " 100%\n );\n background-size: 200% 200%;\n filter: blur(69px);\n\n animation: glow 10s ease infinite;\n\n @keyframes glow {\n 0% {\n background-position: 0 -100%;\n }\n\n 50% {\n background-position: 200% 50%;\n }\n\n 100% {\n background-position: 0 -100%;\n }\n }\n "])), token.gradientColor3, token.gradientColor1, token.red, token.cyan),
|
|
15
15
|
iconGradientDefault: css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-image: radial-gradient(\n 100% 100% at 50% 0,\n ", " 0,\n ", " 100%\n );\n "])), rgba(token.colorSolid, 0.2), rgba(token.colorSolid, 0.1)),
|
|
16
16
|
blur: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n backdrop-filter: blur(7px);\n "]))),
|
|
17
|
-
markdown: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n color: ", ";\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n font-weight: 600;\n }\n\n p {\n margin: 20px auto;\n\n font-size: 14px;\n line-height: 1.8;\n color: ", ";\n text-align: justify;\n word-wrap: break-word;\n }\n\n blockquote {\n margin: 16px 0;\n padding: 0 12px;\n p {\n font-style: italic;\n color: ", ";\n }\n }\n\n p:not(:last-child) {\n margin-bottom: 1em;\n }\n\n a {\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n }\n\n img {\n max-width: 100%;\n }\n\n code,\n pre * {\n font-size: ", "px;\n }\n\n pre {\n border-radius: ", "px;\n }\n\n > :not([data-code-type='highlighter']) code {\n padding: 2px 6px;\n\n color: ", ";\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n }\n\n table {\n border-spacing: 0;\n\n width: 100%;\n margin-block-start: 1em;\n margin-block-end: 1em;\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n padding: 8px;\n\n border: 1px solid ", ";\n border-radius: ", "px;\n }\n\n th,\n td {\n padding-block-start: 10px;\n padding-block-end: 10px;\n padding-inline-start: 16px;\n padding-inline-end: 16px;\n }\n\n thead {\n tr {\n th {\n background: ", ";\n &:first-child {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n }\n &:last-child {\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n }\n }\n }\n\n ul li {\n line-height: 1.8;\n }\n "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.fontSizeSM, token.borderRadius, isDarkMode ? token.
|
|
17
|
+
markdown: css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n color: ", ";\n\n h1,\n h2,\n h3,\n h4,\n h5 {\n font-weight: 600;\n }\n\n p {\n margin: 20px auto;\n\n font-size: 14px;\n line-height: 1.8;\n color: ", ";\n text-align: justify;\n word-wrap: break-word;\n }\n\n blockquote {\n margin: 16px 0;\n padding: 0 12px;\n p {\n font-style: italic;\n color: ", ";\n }\n }\n\n p:not(:last-child) {\n margin-bottom: 1em;\n }\n\n a {\n color: ", ";\n\n &:hover {\n color: ", ";\n }\n\n &:active {\n color: ", ";\n }\n }\n\n img {\n max-width: 100%;\n }\n\n code,\n pre * {\n font-size: ", "px;\n }\n\n pre {\n border-radius: ", "px;\n }\n\n > :not([data-code-type='highlighter']) code {\n padding: 2px 6px;\n\n color: ", ";\n\n background: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n }\n\n table {\n border-spacing: 0;\n\n width: 100%;\n margin-block-start: 1em;\n margin-block-end: 1em;\n margin-inline-start: 0px;\n margin-inline-end: 0px;\n padding: 8px;\n\n border: 1px solid ", ";\n border-radius: ", "px;\n }\n\n th,\n td {\n padding-block-start: 10px;\n padding-block-end: 10px;\n padding-inline-start: 16px;\n padding-inline-end: 16px;\n }\n\n thead {\n tr {\n th {\n background: ", ";\n &:first-child {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n }\n &:last-child {\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n }\n }\n }\n\n ul li {\n line-height: 1.8;\n }\n "])), isDarkMode ? token.colorTextSecondary : token.colorText, token.colorText, token.colorTextDescription, token.colorLink, token.colorLinkHover, token.colorLinkActive, token.fontSizeSM, token.borderRadius, isDarkMode ? token.cyan9A : token.cyan10A, isDarkMode ? token.cyan1A : token.cyan3A, isDarkMode ? token.cyan1A : token.cyan4A, token.borderRadiusSM, token.colorBorderSecondary, token.borderRadius, token.colorFillTertiary, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius)
|
|
18
18
|
};
|
|
19
19
|
};
|
|
@@ -16,10 +16,12 @@ var generateCustomColorPalette = function generateCustomColorPalette(_ref3) {
|
|
|
16
16
|
appearance = _ref3.appearance;
|
|
17
17
|
var colorStepPalette = {};
|
|
18
18
|
scale[appearance].forEach(function (color, index) {
|
|
19
|
-
|
|
19
|
+
if (index === 0 || index === 12) return;
|
|
20
|
+
colorStepPalette["".concat(name).concat(index)] = color;
|
|
20
21
|
});
|
|
21
22
|
scale["".concat(appearance, "A")].forEach(function (color, index) {
|
|
22
|
-
|
|
23
|
+
if (index === 0 || index === 12) return;
|
|
24
|
+
colorStepPalette["".concat(name).concat(index, "A")] = color;
|
|
23
25
|
});
|
|
24
26
|
return _objectSpread(_objectSpread({}, colorStepPalette), generateColorPalette({
|
|
25
27
|
name: name,
|
package/es/styles/colors.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export var colorScales = {
|
|
2
2
|
red: {
|
|
3
|
-
light: ['#ffffff', '#
|
|
4
|
-
lightA: ['rgba(255, 255, 255, 0.01)', 'rgba(255, 55,
|
|
5
|
-
dark: ['#
|
|
6
|
-
darkA: ['rgba(
|
|
3
|
+
light: ['#ffffff', '#fff7f7', '#ffeced', '#ffdde2', '#ffccd5', '#ffb8c7', '#ffa2b8', '#ff88a8', '#fe6998', '#f04f88', '#a72860', '#640039', '#0f0006'],
|
|
4
|
+
lightA: ['rgba(255, 255, 255, 0.01)', 'rgba(255, 55, 55, 0.04)', 'rgba(255, 17, 30, 0.08)', 'rgba(255, 12, 48, 0.14)', 'rgba(255, 0, 45, 0.2)', 'rgba(255, 1, 55, 0.28)', 'rgba(255, 4, 63, 0.37)', 'rgba(255, 2, 70, 0.47)', 'rgba(253, 1, 80, 0.59)', 'rgba(233, 0, 83, 0.69)', 'rgba(151, 2, 68, 0.85)', '#640039', '#0f0006'],
|
|
5
|
+
dark: ['#0f0006', '#34001d', '#4b002b', '#640039', '#7a0c46', '#911b53', '#a72860', '#bf356e', '#d7427b', '#f04f88', '#ff8eab', '#ffc9d3', '#ffffff'],
|
|
6
|
+
darkA: ['rgba(250, 0, 100, 0.06)', 'rgba(248, 0, 138, 0.21)', 'rgba(250, 0, 143, 0.3)', 'rgba(250, 0, 142, 0.4)', 'rgba(254, 25, 146, 0.48)', 'rgba(254, 47, 146, 0.57)', 'rgba(253, 61, 145, 0.66)', 'rgba(255, 71, 147, 0.75)', 'rgba(253, 78, 145, 0.85)', 'rgba(255, 84, 145, 0.94)', '#ff8eab', '#ffc9d3', '#ffffff']
|
|
7
7
|
},
|
|
8
8
|
volcano: {
|
|
9
9
|
light: ['#ffffff', '#fff7f6', '#ffece9', '#ffded9', '#ffcec5', '#ffbbaf', '#ffa695', '#ff8e78', '#fb745a', '#ec5e41', '#a53716', '#5d1900', '#0c0100'],
|
|
@@ -36,10 +36,10 @@ export var colorScales = {
|
|
|
36
36
|
darkA: ['rgba(100, 200, 0, 0.02)', 'rgba(154, 254, 0, 0.13)', 'rgba(168, 250, 0, 0.22)', 'rgba(177, 255, 0, 0.31)', 'rgba(183, 254, 0, 0.41)', 'rgba(188, 255, 0, 0.51)', 'rgba(190, 253, 0, 0.62)', 'rgba(196, 252, 37, 0.73)', 'rgba(204, 255, 57, 0.83)', 'rgba(209, 255, 70, 0.94)', 'rgba(225, 254, 137, 0.97)', 'rgba(240, 254, 192, 0.99)', '#ffffff']
|
|
37
37
|
},
|
|
38
38
|
green: {
|
|
39
|
-
light: ['#ffffff', '#
|
|
40
|
-
lightA: ['rgba(255, 255, 255, 0.01)', 'rgba(
|
|
41
|
-
dark: ['#000503', '#
|
|
42
|
-
darkA: ['rgba(0, 250, 150, 0.02)', 'rgba(0,
|
|
39
|
+
light: ['#ffffff', '#f4fdeb', '#e7f8dd', '#d8f2ce', '#c7eabd', '#b4e1ac', '#a0d79b', '#89cc8a', '#71c179', '#55b467', '#007944', '#003f28', '#000503'],
|
|
40
|
+
lightA: ['rgba(255, 255, 255, 0.01)', 'rgba(117, 230, 5, 0.08)', 'rgba(84, 205, 12, 0.14)', 'rgba(60, 190, 10, 0.2)', 'rgba(40, 174, 1, 0.26)', 'rgba(28, 164, 3, 0.33)', 'rgba(18, 155, 5, 0.4)', 'rgba(4, 146, 6, 0.47)', 'rgba(1, 144, 16, 0.56)', 'rgba(1, 143, 28, 0.67)', '#007944', '#003f28', '#000503'],
|
|
41
|
+
dark: ['#000503', '#001d12', '#002d1d', '#003f28', '#005232', '#00653c', '#007944', '#1b8d4d', '#3ba05a', '#55b467', '#96cd92', '#cde6c3', '#ffffff'],
|
|
42
|
+
darkA: ['rgba(0, 250, 150, 0.02)', 'rgba(0, 242, 150, 0.12)', 'rgba(0, 250, 161, 0.18)', 'rgba(0, 252, 160, 0.25)', 'rgba(0, 248, 152, 0.33)', 'rgba(0, 252, 150, 0.4)', 'rgba(0, 252, 142, 0.48)', 'rgba(48, 252, 137, 0.56)', 'rgba(94, 254, 143, 0.63)', 'rgba(120, 254, 145, 0.71)', 'rgba(185, 253, 180, 0.81)', 'rgba(225, 253, 214, 0.91)', '#ffffff']
|
|
43
43
|
},
|
|
44
44
|
cyan: {
|
|
45
45
|
light: ['#ffffff', '#f9fffb', '#effff8', '#e3fff4', '#d8fef0', '#ccfcec', '#c0fae8', '#b3f8e3', '#a5f6de', '#95f3d9', '#2fa28a', '#005245', '#000503'],
|
|
@@ -60,10 +60,10 @@ export var colorScales = {
|
|
|
60
60
|
darkA: ['rgba(0, 22, 244, 0.09)', 'rgba(0, 70, 248, 0.27)', 'rgba(0, 92, 249, 0.37)', 'rgba(0, 104, 251, 0.47)', 'rgba(0, 116, 255, 0.56)', 'rgba(0, 124, 255, 0.66)', 'rgba(3, 132, 254, 0.76)', 'rgba(29, 142, 254, 0.84)', 'rgba(43, 150, 254, 0.92)', '#369eff', 'rgba(137, 193, 254, 0.99)', '#c5dffd', '#ffffff']
|
|
61
61
|
},
|
|
62
62
|
purple: {
|
|
63
|
-
light: ['#ffffff', '#
|
|
64
|
-
lightA: ['rgba(255, 255, 255, 0.01)', 'rgba(255,
|
|
65
|
-
dark: ['#
|
|
66
|
-
darkA: ['rgba(
|
|
63
|
+
light: ['#ffffff', '#fff6fb', '#ffe7fd', '#fdd6fe', '#f6c4f8', '#eeb1f1', '#e49ce8', '#d886de', '#cb6ed2', '#bd54c6', '#892b8a', '#560053', '#0d000b'],
|
|
64
|
+
lightA: ['rgba(255, 255, 255, 0.01)', 'rgba(255, 30, 155, 0.04)', 'rgba(255, 15, 235, 0.1)', 'rgba(243, 14, 249, 0.17)', 'rgba(218, 9, 226, 0.24)', 'rgba(200, 3, 210, 0.31)', 'rgba(186, 1, 196, 0.39)', 'rgba(174, 3, 186, 0.48)', 'rgba(164, 1, 176, 0.57)', 'rgba(156, 0, 170, 0.67)', 'rgba(113, 0, 114, 0.83)', '#560053', '#0d000b'],
|
|
65
|
+
dark: ['#0d000b', '#2e002a', '#42003e', '#560053', '#670e66', '#781e78', '#892b8a', '#9a399e', '#ab46b2', '#bd54c6', '#d590da', '#edc7ee', '#ffffff'],
|
|
66
|
+
darkA: ['rgba(217, 0, 183, 0.06)', 'rgba(242, 0, 221, 0.19)', 'rgba(254, 0, 238, 0.26)', 'rgba(253, 0, 244, 0.34)', 'rgba(251, 34, 249, 0.41)', 'rgba(255, 64, 255, 0.47)', 'rgba(249, 78, 251, 0.55)', 'rgba(248, 92, 255, 0.62)', 'rgba(244, 100, 254, 0.7)', 'rgba(242, 108, 254, 0.78)', 'rgba(248, 167, 253, 0.86)', 'rgba(252, 212, 253, 0.94)', '#ffffff']
|
|
67
67
|
},
|
|
68
68
|
magenta: {
|
|
69
69
|
light: ['#ffffff', '#fff7f9', '#ffeaf4', '#ffdaee', '#ffc7e7', '#ffb2df', '#ff99d6', '#f980ca', '#ef67ba', '#e34ba9', '#a32466', '#63002d', '#100002'],
|
|
@@ -18,7 +18,7 @@ export type PresetColorKey = (typeof PresetColors)[number];
|
|
|
18
18
|
|
|
19
19
|
export type PresetColorType = Record<PresetColorKey, string>;
|
|
20
20
|
|
|
21
|
-
type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11
|
|
21
|
+
type ColorPaletteKeyIndex = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11;
|
|
22
22
|
|
|
23
23
|
type ColorTokenKey =
|
|
24
24
|
| 'Bg'
|