@neatui/css 3.8.2 → 3.9.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.
- package/core/theme.scss +26 -16
- package/core/ux.scss +9 -0
- package/package.json +1 -1
package/core/theme.scss
CHANGED
|
@@ -7,6 +7,17 @@
|
|
|
7
7
|
@use 'sass:string';
|
|
8
8
|
@use 'sass:math';
|
|
9
9
|
|
|
10
|
+
// 整数颜色计算
|
|
11
|
+
@function mix-int($c1, $c2, $w) {
|
|
12
|
+
$mix: color.mix($c1, $c2, $w);
|
|
13
|
+
@return rgba(
|
|
14
|
+
math.round(color.channel($mix, 'red', $space: rgb)),
|
|
15
|
+
math.round(color.channel($mix, 'green', $space: rgb)),
|
|
16
|
+
math.round(color.channel($mix, 'blue', $space: rgb)),
|
|
17
|
+
color.alpha($mix)
|
|
18
|
+
);
|
|
19
|
+
}
|
|
20
|
+
|
|
10
21
|
// 动态加深颜色
|
|
11
22
|
@function deep-color($c, $min: 8%, $max: 16%) {
|
|
12
23
|
$perc: color.channel($c, 'lightness', $space: hsl);
|
|
@@ -19,8 +30,7 @@
|
|
|
19
30
|
@if $w > $max {
|
|
20
31
|
$w: $max;
|
|
21
32
|
}
|
|
22
|
-
|
|
23
|
-
@return color.mix(black, $c, $w);
|
|
33
|
+
@return mix-int(black, $c, $w);
|
|
24
34
|
}
|
|
25
35
|
|
|
26
36
|
@mixin theme(
|
|
@@ -73,12 +83,12 @@
|
|
|
73
83
|
none: transparent,
|
|
74
84
|
w: #ffffff,
|
|
75
85
|
b: #000000,
|
|
76
|
-
read:
|
|
77
|
-
desc:
|
|
78
|
-
note:
|
|
79
|
-
case:
|
|
80
|
-
line:
|
|
81
|
-
weak:
|
|
86
|
+
read: mix-int(map.get($s, 'text'), map.get($s, 'fore'), 85%),
|
|
87
|
+
desc: mix-int(map.get($s, 'text'), map.get($s, 'fore'), 55%),
|
|
88
|
+
note: mix-int(map.get($s, 'text'), map.get($s, 'fore'), 35%),
|
|
89
|
+
case: mix-int(map.get($s, 'text'), map.get($s, 'fore'), 20%),
|
|
90
|
+
line: mix-int(map.get($s, 'text'), map.get($s, 'fore'), 10%),
|
|
91
|
+
weak: mix-int(map.get($s, 'text'), map.get($s, 'fore'), 3%),
|
|
82
92
|
deep: deep-color(map.get($s, 'back')),
|
|
83
93
|
);
|
|
84
94
|
$theme: map.merge(
|
|
@@ -105,10 +115,10 @@
|
|
|
105
115
|
$v: list.nth($c, 2);
|
|
106
116
|
--co-#{$k}: #{$v};
|
|
107
117
|
@if ($k != 'w' and $k != 'b') {
|
|
108
|
-
--co-#{$k}-fore: #{
|
|
118
|
+
--co-#{$k}-fore: #{mix-int($v, map.get($s, 'fore'), 100%)};
|
|
109
119
|
}
|
|
110
120
|
@if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk' or $k == 'info') {
|
|
111
|
-
--co-#{$k}-text: #{
|
|
121
|
+
--co-#{$k}-text: #{mix-int($v, map.get($s, 'text'), 100%)};
|
|
112
122
|
}
|
|
113
123
|
|
|
114
124
|
$ls: 0.05;
|
|
@@ -117,10 +127,10 @@
|
|
|
117
127
|
@if ($k != 'none') {
|
|
118
128
|
--co-#{$k}-#{$l}: #{rgba($v, $ls)};
|
|
119
129
|
@if ($k != 'w' and $k != 'b') {
|
|
120
|
-
--co-#{$k}-fore-#{$l}: #{
|
|
130
|
+
--co-#{$k}-fore-#{$l}: #{mix-int($v, map.get($s, 'fore'), $ls * 100%)};
|
|
121
131
|
}
|
|
122
132
|
@if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk' or $k == 'info') {
|
|
123
|
-
--co-#{$k}-text-#{$l}: #{
|
|
133
|
+
--co-#{$k}-text-#{$l}: #{mix-int($v, map.get($s, 'text'), $ls * 100%)};
|
|
124
134
|
}
|
|
125
135
|
}
|
|
126
136
|
@if ($ls <= 0.1 or $ls >= 0.8) {
|
|
@@ -139,11 +149,11 @@
|
|
|
139
149
|
--co-#{$k}: #{$v};
|
|
140
150
|
|
|
141
151
|
@if ($k != 'w' and $k != 'b') {
|
|
142
|
-
--co-#{$k}-fore: #{
|
|
152
|
+
--co-#{$k}-fore: #{mix-int($v, map.get($s, 'fore'), 100%)};
|
|
143
153
|
}
|
|
144
154
|
|
|
145
155
|
@if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk' or $k == 'info') {
|
|
146
|
-
--co-#{$k}-text: #{
|
|
156
|
+
--co-#{$k}-text: #{mix-int($v, map.get($s, 'text'), 100%)};
|
|
147
157
|
}
|
|
148
158
|
|
|
149
159
|
$ls: 0.05;
|
|
@@ -153,11 +163,11 @@
|
|
|
153
163
|
--co-#{$k}-#{$l}: #{rgba($v, $ls)};
|
|
154
164
|
|
|
155
165
|
@if ($k != 'w' and $k != 'b') {
|
|
156
|
-
--co-#{$k}-fore-#{$l}: #{
|
|
166
|
+
--co-#{$k}-fore-#{$l}: #{mix-int($v, map.get($s, 'fore'), $ls * 100%)};
|
|
157
167
|
}
|
|
158
168
|
|
|
159
169
|
@if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk' or $k == 'info') {
|
|
160
|
-
--co-#{$k}-text-#{$l}: #{
|
|
170
|
+
--co-#{$k}-text-#{$l}: #{mix-int($v, map.get($s, 'text'), $ls * 100%)};
|
|
161
171
|
}
|
|
162
172
|
}
|
|
163
173
|
@if ($ls <= 0.1 or $ls >= 0.8) {
|
package/core/ux.scss
CHANGED