@neatui/css 3.8.3 → 3.10.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 +36 -21
- 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.5%),
|
|
82
92
|
deep: deep-color(map.get($s, 'back')),
|
|
83
93
|
);
|
|
84
94
|
$theme: map.merge(
|
|
@@ -91,7 +101,7 @@
|
|
|
91
101
|
}
|
|
92
102
|
|
|
93
103
|
// 生成变量
|
|
94
|
-
$levels: xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl;
|
|
104
|
+
$levels: xxs, xs, ss, sm, sl, ms, mm, ml, ls, lm, ll, xl, xxl;
|
|
95
105
|
$colors: main, text, well, warn, risk;
|
|
96
106
|
$f: list.nth(list.nth($theme, 1), 1);
|
|
97
107
|
@each $i in $theme {
|
|
@@ -105,25 +115,28 @@
|
|
|
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
|
-
$ls: 0.
|
|
124
|
+
$ls: 0.035;
|
|
115
125
|
@each $l in $levels {
|
|
116
126
|
// 透明度
|
|
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
|
+
|
|
137
|
+
@if ($ls == 0.035) {
|
|
138
|
+
$ls: 0.05;
|
|
139
|
+
} @else if($ls <= 0.1 or $ls >= 0.8) {
|
|
127
140
|
$ls: $ls + 0.05;
|
|
128
141
|
} @else {
|
|
129
142
|
$ls: $ls + 0.1;
|
|
@@ -139,28 +152,30 @@
|
|
|
139
152
|
--co-#{$k}: #{$v};
|
|
140
153
|
|
|
141
154
|
@if ($k != 'w' and $k != 'b') {
|
|
142
|
-
--co-#{$k}-fore: #{
|
|
155
|
+
--co-#{$k}-fore: #{mix-int($v, map.get($s, 'fore'), 100%)};
|
|
143
156
|
}
|
|
144
157
|
|
|
145
158
|
@if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk' or $k == 'info') {
|
|
146
|
-
--co-#{$k}-text: #{
|
|
159
|
+
--co-#{$k}-text: #{mix-int($v, map.get($s, 'text'), 100%)};
|
|
147
160
|
}
|
|
148
161
|
|
|
149
|
-
$ls: 0.
|
|
162
|
+
$ls: 0.035;
|
|
150
163
|
@each $l in $levels {
|
|
151
164
|
// 透明度
|
|
152
165
|
@if ($k != 'none') {
|
|
153
166
|
--co-#{$k}-#{$l}: #{rgba($v, $ls)};
|
|
154
167
|
|
|
155
168
|
@if ($k != 'w' and $k != 'b') {
|
|
156
|
-
--co-#{$k}-fore-#{$l}: #{
|
|
169
|
+
--co-#{$k}-fore-#{$l}: #{mix-int($v, map.get($s, 'fore'), $ls * 100%)};
|
|
157
170
|
}
|
|
158
171
|
|
|
159
172
|
@if ($k == 'main' or $k == 'well' or $k == 'warn' or $k == 'risk' or $k == 'info') {
|
|
160
|
-
--co-#{$k}-text-#{$l}: #{
|
|
173
|
+
--co-#{$k}-text-#{$l}: #{mix-int($v, map.get($s, 'text'), $ls * 100%)};
|
|
161
174
|
}
|
|
162
175
|
}
|
|
163
|
-
@if ($ls
|
|
176
|
+
@if ($ls == 0.035) {
|
|
177
|
+
$ls: 0.05;
|
|
178
|
+
} @else if($ls <= 0.1 or $ls >= 0.8) {
|
|
164
179
|
$ls: $ls + 0.05;
|
|
165
180
|
} @else {
|
|
166
181
|
$ls: $ls + 0.1;
|