@hsu-react/ui 2.2.9 → 2.2.10
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.
|
@@ -30,20 +30,31 @@
|
|
|
30
30
|
--ant-btn-border-color-hover: var(--ant-btn-color-hover);
|
|
31
31
|
--ant-btn-border-color-active: var(--ant-btn-color-active);
|
|
32
32
|
|
|
33
|
-
//
|
|
33
|
+
// 中性色系要单独处理：它的 color-base 就是边框色，而边框色与浅底色在暗色下恰好同值
|
|
34
34
|
// （--vita-border 与 --vita-muted 都是 #27272a），照抄就等于没有边框。
|
|
35
|
-
//
|
|
35
|
+
//
|
|
36
|
+
// 从**按钮自己那一档浅底**（--ant-btn-color-light，即 antd 给 filled 的底色）往文字色
|
|
37
|
+
// 混一档推出边框：同一色系、只是深一度，浅色下变深、暗色下变浅，一条规则两个主题都成立。
|
|
38
|
+
// 消费方把浅底换成暖色，边框自动跟着变暖，不会一个冷一个暖。
|
|
39
|
+
//
|
|
40
|
+
// 12% 是照标准边框相对面板的落差定的（#ffffff → #e4e4e7 约 27/255），够看见又不抢眼。
|
|
41
|
+
// 从前混的是 color-base 且高达 38%，等于往中性黑里灌，浅底上就是一圈发黑的框。
|
|
42
|
+
// 三个状态各自从对应那档底色推，边框始终比自己的底深一度。
|
|
36
43
|
&:global(.ant-btn-color-default) {
|
|
37
44
|
--ant-btn-border-color: color-mix(
|
|
38
45
|
in srgb,
|
|
39
|
-
var(--ant-btn-color-
|
|
46
|
+
var(--ant-btn-color-light) 88%,
|
|
40
47
|
var(--vita-foreground)
|
|
41
48
|
);
|
|
42
49
|
--ant-btn-border-color-hover: color-mix(
|
|
43
50
|
in srgb,
|
|
44
|
-
var(--ant-btn-color-
|
|
51
|
+
var(--ant-btn-color-light-hover) 88%,
|
|
52
|
+
var(--vita-foreground)
|
|
53
|
+
);
|
|
54
|
+
--ant-btn-border-color-active: color-mix(
|
|
55
|
+
in srgb,
|
|
56
|
+
var(--ant-btn-color-light-active) 88%,
|
|
45
57
|
var(--vita-foreground)
|
|
46
58
|
);
|
|
47
|
-
--ant-btn-border-color-active: var(--ant-btn-border-color-hover);
|
|
48
59
|
}
|
|
49
60
|
}
|
|
@@ -30,20 +30,31 @@
|
|
|
30
30
|
--ant-btn-border-color-hover: var(--ant-btn-color-hover);
|
|
31
31
|
--ant-btn-border-color-active: var(--ant-btn-color-active);
|
|
32
32
|
|
|
33
|
-
//
|
|
33
|
+
// 中性色系要单独处理：它的 color-base 就是边框色，而边框色与浅底色在暗色下恰好同值
|
|
34
34
|
// （--vita-border 与 --vita-muted 都是 #27272a），照抄就等于没有边框。
|
|
35
|
-
//
|
|
35
|
+
//
|
|
36
|
+
// 从**按钮自己那一档浅底**（--ant-btn-color-light，即 antd 给 filled 的底色）往文字色
|
|
37
|
+
// 混一档推出边框：同一色系、只是深一度，浅色下变深、暗色下变浅，一条规则两个主题都成立。
|
|
38
|
+
// 消费方把浅底换成暖色，边框自动跟着变暖，不会一个冷一个暖。
|
|
39
|
+
//
|
|
40
|
+
// 12% 是照标准边框相对面板的落差定的（#ffffff → #e4e4e7 约 27/255），够看见又不抢眼。
|
|
41
|
+
// 从前混的是 color-base 且高达 38%，等于往中性黑里灌，浅底上就是一圈发黑的框。
|
|
42
|
+
// 三个状态各自从对应那档底色推，边框始终比自己的底深一度。
|
|
36
43
|
&:global(.ant-btn-color-default) {
|
|
37
44
|
--ant-btn-border-color: color-mix(
|
|
38
45
|
in srgb,
|
|
39
|
-
var(--ant-btn-color-
|
|
46
|
+
var(--ant-btn-color-light) 88%,
|
|
40
47
|
var(--vita-foreground)
|
|
41
48
|
);
|
|
42
49
|
--ant-btn-border-color-hover: color-mix(
|
|
43
50
|
in srgb,
|
|
44
|
-
var(--ant-btn-color-
|
|
51
|
+
var(--ant-btn-color-light-hover) 88%,
|
|
52
|
+
var(--vita-foreground)
|
|
53
|
+
);
|
|
54
|
+
--ant-btn-border-color-active: color-mix(
|
|
55
|
+
in srgb,
|
|
56
|
+
var(--ant-btn-color-light-active) 88%,
|
|
45
57
|
var(--vita-foreground)
|
|
46
58
|
);
|
|
47
|
-
--ant-btn-border-color-active: var(--ant-btn-border-color-hover);
|
|
48
59
|
}
|
|
49
60
|
}
|
package/package.json
CHANGED
|
@@ -30,20 +30,31 @@
|
|
|
30
30
|
--ant-btn-border-color-hover: var(--ant-btn-color-hover);
|
|
31
31
|
--ant-btn-border-color-active: var(--ant-btn-color-active);
|
|
32
32
|
|
|
33
|
-
//
|
|
33
|
+
// 中性色系要单独处理：它的 color-base 就是边框色，而边框色与浅底色在暗色下恰好同值
|
|
34
34
|
// （--vita-border 与 --vita-muted 都是 #27272a），照抄就等于没有边框。
|
|
35
|
-
//
|
|
35
|
+
//
|
|
36
|
+
// 从**按钮自己那一档浅底**（--ant-btn-color-light，即 antd 给 filled 的底色）往文字色
|
|
37
|
+
// 混一档推出边框：同一色系、只是深一度，浅色下变深、暗色下变浅，一条规则两个主题都成立。
|
|
38
|
+
// 消费方把浅底换成暖色，边框自动跟着变暖，不会一个冷一个暖。
|
|
39
|
+
//
|
|
40
|
+
// 12% 是照标准边框相对面板的落差定的（#ffffff → #e4e4e7 约 27/255），够看见又不抢眼。
|
|
41
|
+
// 从前混的是 color-base 且高达 38%，等于往中性黑里灌，浅底上就是一圈发黑的框。
|
|
42
|
+
// 三个状态各自从对应那档底色推，边框始终比自己的底深一度。
|
|
36
43
|
&:global(.ant-btn-color-default) {
|
|
37
44
|
--ant-btn-border-color: color-mix(
|
|
38
45
|
in srgb,
|
|
39
|
-
var(--ant-btn-color-
|
|
46
|
+
var(--ant-btn-color-light) 88%,
|
|
40
47
|
var(--vita-foreground)
|
|
41
48
|
);
|
|
42
49
|
--ant-btn-border-color-hover: color-mix(
|
|
43
50
|
in srgb,
|
|
44
|
-
var(--ant-btn-color-
|
|
51
|
+
var(--ant-btn-color-light-hover) 88%,
|
|
52
|
+
var(--vita-foreground)
|
|
53
|
+
);
|
|
54
|
+
--ant-btn-border-color-active: color-mix(
|
|
55
|
+
in srgb,
|
|
56
|
+
var(--ant-btn-color-light-active) 88%,
|
|
45
57
|
var(--vita-foreground)
|
|
46
58
|
);
|
|
47
|
-
--ant-btn-border-color-active: var(--ant-btn-border-color-hover);
|
|
48
59
|
}
|
|
49
60
|
}
|