@pisell/materials 6.12.76 → 6.12.77
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.
|
@@ -64,7 +64,7 @@ Provider 会渲染一个 div，可通过 className、style 和 ref 对接布局
|
|
|
64
64
|
| ------------------ | ------------------------------ | ------------ |
|
|
65
65
|
| colorTextOnPrimary | --pisell-color-text-on-primary | colorPrimary |
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
当前在 `tokens.ts` 中将 `colorTextOnPrimary` 暂时固定为 `#ffffff`，不再根据主色自动选择黑／白文字。所有消费此变量的组件统一使用白字，包括浅色主色场景。
|
|
68
68
|
|
|
69
69
|
这与 `colorPrimaryText` 不同：后者表示作为文字使用的品牌色，前者表示写在主色背景上的文字颜色。消费者须配对使用：
|
|
70
70
|
|
|
@@ -75,7 +75,7 @@ Provider 会渲染一个 div，可通过 className、style 和 ref 对接布局
|
|
|
75
75
|
}
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
这个固定值不保证所有主色及 hover / active 背景上的文字对比度；后续调整自动选色策略时，组件仍通过同一个变量接收结果。
|
|
79
79
|
|
|
80
80
|
本步提供变量，不批量替换已有白字。组件尚未消费对应前景变量时，文字颜色不会自动改变。
|
|
81
81
|
|
|
@@ -1,39 +1,6 @@
|
|
|
1
1
|
import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js";
|
|
2
2
|
import { theme } from "antd";
|
|
3
|
-
import { generate } from "@ant-design/colors";
|
|
4
3
|
//#region src/theme/provider/tokens.ts
|
|
5
|
-
function rgba(color) {
|
|
6
|
-
if (color.trim().toLowerCase() === "transparent") return [
|
|
7
|
-
0,
|
|
8
|
-
0,
|
|
9
|
-
0,
|
|
10
|
-
0
|
|
11
|
-
];
|
|
12
|
-
const hex = generate(color)[5].slice(1);
|
|
13
|
-
return [
|
|
14
|
-
parseInt(hex.slice(0, 2), 16),
|
|
15
|
-
parseInt(hex.slice(2, 4), 16),
|
|
16
|
-
parseInt(hex.slice(4, 6), 16),
|
|
17
|
-
hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1
|
|
18
|
-
];
|
|
19
|
-
}
|
|
20
|
-
function composite(color, surface) {
|
|
21
|
-
return color.slice(0, 3).map((channel, index) => channel * color[3] + surface[index] * (1 - color[3]));
|
|
22
|
-
}
|
|
23
|
-
/** Choose foreground by contrast on the supplied container, over a white canvas. */
|
|
24
|
-
function textOnPrimary(background, container) {
|
|
25
|
-
const surface = composite(rgba(container), [
|
|
26
|
-
255,
|
|
27
|
-
255,
|
|
28
|
-
255
|
|
29
|
-
]);
|
|
30
|
-
const channels = composite(rgba(background), surface).map((channel) => {
|
|
31
|
-
const value = channel / 255;
|
|
32
|
-
return value <= .04045 ? value / 12.92 : Math.pow((value + .055) / 1.055, 2.4);
|
|
33
|
-
});
|
|
34
|
-
const luminance = channels[0] * .2126 + channels[1] * .7152 + channels[2] * .0722;
|
|
35
|
-
return 1.05 / (luminance + .05) >= (luminance + .05) / .05 ? "#ffffff" : "#000000";
|
|
36
|
-
}
|
|
37
4
|
function toCSSVariableName(token) {
|
|
38
5
|
return `--pisell-${token.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z0-9]+)/g, "$1-$2").replace(/([a-z])([A-Z0-9])/g, "$1-$2").toLowerCase()}`;
|
|
39
6
|
}
|
|
@@ -53,7 +20,7 @@ function resolvePisellTheme(theme$1) {
|
|
|
53
20
|
colorPrimaryText: resolved.colorPrimaryText,
|
|
54
21
|
colorPrimaryTextHover: resolved.colorPrimaryTextHover,
|
|
55
22
|
colorPrimaryTextActive: resolved.colorPrimaryTextActive,
|
|
56
|
-
colorTextOnPrimary:
|
|
23
|
+
colorTextOnPrimary: "#ffffff"
|
|
57
24
|
};
|
|
58
25
|
const cssVariables = {};
|
|
59
26
|
for (const [key, value] of Object.entries(token)) cssVariables[toCSSVariableName(key)] = value;
|
|
@@ -64,7 +64,7 @@ Provider 会渲染一个 div，可通过 className、style 和 ref 对接布局
|
|
|
64
64
|
| ------------------ | ------------------------------ | ------------ |
|
|
65
65
|
| colorTextOnPrimary | --pisell-color-text-on-primary | colorPrimary |
|
|
66
66
|
|
|
67
|
-
|
|
67
|
+
当前在 `tokens.ts` 中将 `colorTextOnPrimary` 暂时固定为 `#ffffff`，不再根据主色自动选择黑／白文字。所有消费此变量的组件统一使用白字，包括浅色主色场景。
|
|
68
68
|
|
|
69
69
|
这与 `colorPrimaryText` 不同：后者表示作为文字使用的品牌色，前者表示写在主色背景上的文字颜色。消费者须配对使用：
|
|
70
70
|
|
|
@@ -75,7 +75,7 @@ Provider 会渲染一个 div，可通过 className、style 和 ref 对接布局
|
|
|
75
75
|
}
|
|
76
76
|
```
|
|
77
77
|
|
|
78
|
-
|
|
78
|
+
这个固定值不保证所有主色及 hover / active 背景上的文字对比度；后续调整自动选色策略时，组件仍通过同一个变量接收结果。
|
|
79
79
|
|
|
80
80
|
本步提供变量，不批量替换已有白字。组件尚未消费对应前景变量时，文字颜色不会自动改变。
|
|
81
81
|
|
|
@@ -1,40 +1,7 @@
|
|
|
1
1
|
require("../../_virtual/_rolldown/runtime.js");
|
|
2
2
|
const require_objectSpread2 = require("../../_virtual/_@oxc-project_runtime@0.122.0/helpers/objectSpread2.js");
|
|
3
3
|
let antd = require("antd");
|
|
4
|
-
let _ant_design_colors = require("@ant-design/colors");
|
|
5
4
|
//#region src/theme/provider/tokens.ts
|
|
6
|
-
function rgba(color) {
|
|
7
|
-
if (color.trim().toLowerCase() === "transparent") return [
|
|
8
|
-
0,
|
|
9
|
-
0,
|
|
10
|
-
0,
|
|
11
|
-
0
|
|
12
|
-
];
|
|
13
|
-
const hex = (0, _ant_design_colors.generate)(color)[5].slice(1);
|
|
14
|
-
return [
|
|
15
|
-
parseInt(hex.slice(0, 2), 16),
|
|
16
|
-
parseInt(hex.slice(2, 4), 16),
|
|
17
|
-
parseInt(hex.slice(4, 6), 16),
|
|
18
|
-
hex.length === 8 ? parseInt(hex.slice(6, 8), 16) / 255 : 1
|
|
19
|
-
];
|
|
20
|
-
}
|
|
21
|
-
function composite(color, surface) {
|
|
22
|
-
return color.slice(0, 3).map((channel, index) => channel * color[3] + surface[index] * (1 - color[3]));
|
|
23
|
-
}
|
|
24
|
-
/** Choose foreground by contrast on the supplied container, over a white canvas. */
|
|
25
|
-
function textOnPrimary(background, container) {
|
|
26
|
-
const surface = composite(rgba(container), [
|
|
27
|
-
255,
|
|
28
|
-
255,
|
|
29
|
-
255
|
|
30
|
-
]);
|
|
31
|
-
const channels = composite(rgba(background), surface).map((channel) => {
|
|
32
|
-
const value = channel / 255;
|
|
33
|
-
return value <= .04045 ? value / 12.92 : Math.pow((value + .055) / 1.055, 2.4);
|
|
34
|
-
});
|
|
35
|
-
const luminance = channels[0] * .2126 + channels[1] * .7152 + channels[2] * .0722;
|
|
36
|
-
return 1.05 / (luminance + .05) >= (luminance + .05) / .05 ? "#ffffff" : "#000000";
|
|
37
|
-
}
|
|
38
5
|
function toCSSVariableName(token) {
|
|
39
6
|
return `--pisell-${token.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/([A-Z]+)([A-Z][a-z0-9]+)/g, "$1-$2").replace(/([a-z])([A-Z0-9])/g, "$1-$2").toLowerCase()}`;
|
|
40
7
|
}
|
|
@@ -54,7 +21,7 @@ function resolvePisellTheme(theme) {
|
|
|
54
21
|
colorPrimaryText: resolved.colorPrimaryText,
|
|
55
22
|
colorPrimaryTextHover: resolved.colorPrimaryTextHover,
|
|
56
23
|
colorPrimaryTextActive: resolved.colorPrimaryTextActive,
|
|
57
|
-
colorTextOnPrimary:
|
|
24
|
+
colorTextOnPrimary: "#ffffff"
|
|
58
25
|
};
|
|
59
26
|
const cssVariables = {};
|
|
60
27
|
for (const [key, value] of Object.entries(token)) cssVariables[toCSSVariableName(key)] = value;
|