@hsu-react/ui 2.2.9 → 2.2.11
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/components/Button/index.module.scss +16 -5
- package/es/components/Select/index.module.scss +9 -1
- package/lib/components/Button/index.module.scss +16 -5
- package/lib/components/Select/index.module.scss +9 -1
- package/package.json +1 -1
- package/src/components/Button/index.module.scss +16 -5
- package/src/components/Select/index.module.scss +9 -1
|
@@ -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
|
}
|
|
@@ -54,7 +54,15 @@
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
// 悬浮只加深边框，聚焦才画光环。
|
|
58
|
+
//
|
|
59
|
+
// 两者从前并在同一块里，鼠标一碰整圈就亮起来，看上去像是已经聚焦——而同一行里的
|
|
60
|
+
// Input / DatePicker 悬浮都只变边框色，一排控件里只有下拉框自己在发光。
|
|
61
|
+
// 光环是「此刻的输入焦点在这里」的信号，悬浮借用它，焦点就没有了唯一标识。
|
|
62
|
+
&:hover {
|
|
63
|
+
border-color: var(--vita-primary);
|
|
64
|
+
}
|
|
65
|
+
|
|
58
66
|
&.focused {
|
|
59
67
|
border-color: var(--vita-primary);
|
|
60
68
|
|
|
@@ -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
|
}
|
|
@@ -54,7 +54,15 @@
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
// 悬浮只加深边框，聚焦才画光环。
|
|
58
|
+
//
|
|
59
|
+
// 两者从前并在同一块里，鼠标一碰整圈就亮起来，看上去像是已经聚焦——而同一行里的
|
|
60
|
+
// Input / DatePicker 悬浮都只变边框色，一排控件里只有下拉框自己在发光。
|
|
61
|
+
// 光环是「此刻的输入焦点在这里」的信号，悬浮借用它，焦点就没有了唯一标识。
|
|
62
|
+
&:hover {
|
|
63
|
+
border-color: var(--vita-primary);
|
|
64
|
+
}
|
|
65
|
+
|
|
58
66
|
&.focused {
|
|
59
67
|
border-color: var(--vita-primary);
|
|
60
68
|
|
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
|
}
|
|
@@ -54,7 +54,15 @@
|
|
|
54
54
|
}
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
|
|
57
|
+
// 悬浮只加深边框，聚焦才画光环。
|
|
58
|
+
//
|
|
59
|
+
// 两者从前并在同一块里，鼠标一碰整圈就亮起来，看上去像是已经聚焦——而同一行里的
|
|
60
|
+
// Input / DatePicker 悬浮都只变边框色，一排控件里只有下拉框自己在发光。
|
|
61
|
+
// 光环是「此刻的输入焦点在这里」的信号，悬浮借用它，焦点就没有了唯一标识。
|
|
62
|
+
&:hover {
|
|
63
|
+
border-color: var(--vita-primary);
|
|
64
|
+
}
|
|
65
|
+
|
|
58
66
|
&.focused {
|
|
59
67
|
border-color: var(--vita-primary);
|
|
60
68
|
|