@lobehub/ui 1.13.0 → 1.14.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.
|
@@ -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);
|
|
@@ -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
|
@@ -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'],
|
|
@@ -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'
|