@nutui/nutui-react-taro 3.0.19-cpp-beta.0 → 3.0.19-cpp-beta.2
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/dist/cjs/packages/configprovider/types.d.ts +1 -1
- package/dist/cjs/packages/dialog/dialog.d.ts +2 -37
- package/dist/cjs/packages/dialog/style/dialog.scss +9 -1
- package/dist/cjs/packages/dialog/style/style.css +8 -1
- package/dist/cjs/packages/dialog/style/style.harmony.css +8 -1
- package/dist/cjs/packages/dialog/style-jmapp/dialog.scss +9 -1
- package/dist/cjs/packages/dialog/style-jmapp/style.css +8 -1
- package/dist/cjs/packages/dialog/style-jrkf/dialog.scss +9 -1
- package/dist/cjs/packages/dialog/style-jrkf/style.css +8 -1
- package/dist/es/packages/configprovider/types.d.ts +1 -1
- package/dist/es/packages/dialog/dialog.d.ts +2 -37
- package/dist/es/packages/dialog/style/dialog.scss +9 -1
- package/dist/es/packages/dialog/style/style.css +8 -1
- package/dist/es/packages/dialog/style/style.harmony.css +8 -1
- package/dist/es/packages/dialog/style-jmapp/dialog.scss +9 -1
- package/dist/es/packages/dialog/style-jmapp/style.css +8 -1
- package/dist/es/packages/dialog/style-jrkf/dialog.scss +9 -1
- package/dist/es/packages/dialog/style-jrkf/style.css +8 -1
- package/dist/style-jmapp.css +1 -1
- package/dist/style-jmapp.scss +25 -25
- package/dist/style-jrkf.css +1 -1
- package/dist/style-jrkf.scss +36 -36
- package/dist/style.css +1 -1
- package/dist/style.scss +33 -33
- package/dist/styles/theme-dark.scss +90 -56
- package/dist/styles/theme-default.scss +94 -60
- package/dist/styles/themes/dark.css +1 -1
- package/dist/styles/themes/default.css +1 -1
- package/dist/styles/variables-jmapp.scss +4 -0
- package/dist/styles/variables-jrkf.scss +4 -0
- package/dist/styles/variables.scss +4 -0
- package/package.json +1 -1
package/dist/style.scss
CHANGED
|
@@ -3,106 +3,106 @@
|
|
|
3
3
|
@import './styles/animation/index.scss';
|
|
4
4
|
@import './es/packages/watermark/style/watermark.scss';
|
|
5
5
|
@import './es/packages/virtuallist/style/virtuallist.scss';
|
|
6
|
-
@import './es/packages/video/style/video.scss';
|
|
7
6
|
@import './es/packages/uploader/style/uploader.scss';
|
|
8
|
-
@import './es/packages/
|
|
7
|
+
@import './es/packages/video/style/video.scss';
|
|
9
8
|
@import './es/packages/tour/style/tour.scss';
|
|
10
|
-
@import './es/packages/
|
|
11
|
-
@import './es/packages/timeselect/style/timeselect.scss';
|
|
9
|
+
@import './es/packages/trendarrow/style/trendarrow.scss';
|
|
12
10
|
@import './es/packages/toast/style/toast.scss';
|
|
11
|
+
@import './es/packages/timeselect/style/timeselect.scss';
|
|
13
12
|
@import './es/packages/textarea/style/textarea.scss';
|
|
13
|
+
@import './es/packages/timedetail/style/timedetail.scss';
|
|
14
14
|
@import './es/packages/tag/style/tag.scss';
|
|
15
15
|
@import './es/packages/tabs/style/tabs.scss';
|
|
16
|
-
@import './es/packages/tabpane/style/tabpane.scss';
|
|
17
|
-
@import './es/packages/tabbaritem/style/tabbaritem.scss';
|
|
18
16
|
@import './es/packages/table/style/table.scss';
|
|
17
|
+
@import './es/packages/tabpane/style/tabpane.scss';
|
|
19
18
|
@import './es/packages/tabbar/style/tabbar.scss';
|
|
20
|
-
@import './es/packages/
|
|
19
|
+
@import './es/packages/tabbaritem/style/tabbaritem.scss';
|
|
21
20
|
@import './es/packages/switch/style/switch.scss';
|
|
22
|
-
@import './es/packages/swipe/style/swipe.scss';
|
|
23
21
|
@import './es/packages/swiper/style/swiper.scss';
|
|
24
|
-
@import './es/packages/
|
|
25
|
-
@import './es/packages/
|
|
22
|
+
@import './es/packages/swiperitem/style/swiperitem.scss';
|
|
23
|
+
@import './es/packages/swipe/style/swipe.scss';
|
|
26
24
|
@import './es/packages/steps/style/steps.scss';
|
|
27
25
|
@import './es/packages/space/style/space.scss';
|
|
26
|
+
@import './es/packages/step/style/step.scss';
|
|
27
|
+
@import './es/packages/sticky/style/sticky.scss';
|
|
28
28
|
@import './es/packages/skeleton/style/skeleton.scss';
|
|
29
|
-
@import './es/packages/signature/style/signature.scss';
|
|
30
29
|
@import './es/packages/sidebaritem/style/sidebaritem.scss';
|
|
31
|
-
@import './es/packages/
|
|
30
|
+
@import './es/packages/signature/style/signature.scss';
|
|
32
31
|
@import './es/packages/shortpassword/style/shortpassword.scss';
|
|
33
|
-
@import './es/packages/searchbar/style/searchbar.scss';
|
|
34
32
|
@import './es/packages/segmented/style/segmented.scss';
|
|
33
|
+
@import './es/packages/sidebar/style/sidebar.scss';
|
|
34
|
+
@import './es/packages/searchbar/style/searchbar.scss';
|
|
35
35
|
@import './es/packages/safearea/style/safearea.scss';
|
|
36
36
|
@import './es/packages/row/style/row.scss';
|
|
37
37
|
@import './es/packages/rate/style/rate.scss';
|
|
38
38
|
@import './es/packages/resultpage/style/resultpage.scss';
|
|
39
39
|
@import './es/packages/range/style/range.scss';
|
|
40
|
+
@import './es/packages/radiogroup/style/radiogroup.scss';
|
|
40
41
|
@import './es/packages/radio/style/radio.scss';
|
|
41
42
|
@import './es/packages/pulltorefresh/style/pulltorefresh.scss';
|
|
42
|
-
@import './es/packages/progress/style/progress.scss';
|
|
43
43
|
@import './es/packages/price/style/price.scss';
|
|
44
|
-
@import './es/packages/radiogroup/style/radiogroup.scss';
|
|
45
|
-
@import './es/packages/popover/style/popover.scss';
|
|
46
44
|
@import './es/packages/popup/style/popup.scss';
|
|
45
|
+
@import './es/packages/progress/style/progress.scss';
|
|
46
|
+
@import './es/packages/popover/style/popover.scss';
|
|
47
47
|
@import './es/packages/pickerview/style/pickerview.scss';
|
|
48
|
-
@import './es/packages/picker/style/picker.scss';
|
|
49
48
|
@import './es/packages/pagination/style/pagination.scss';
|
|
49
|
+
@import './es/packages/picker/style/picker.scss';
|
|
50
50
|
@import './es/packages/overlay/style/overlay.scss';
|
|
51
51
|
@import './es/packages/numberkeyboard/style/numberkeyboard.scss';
|
|
52
52
|
@import './es/packages/notify/style/notify.scss';
|
|
53
53
|
@import './es/packages/noticebar/style/noticebar.scss';
|
|
54
54
|
@import './es/packages/menu/style/menu.scss';
|
|
55
|
-
@import './es/packages/menuitem/style/menuitem.scss';
|
|
56
55
|
@import './es/packages/navbar/style/navbar.scss';
|
|
56
|
+
@import './es/packages/menuitem/style/menuitem.scss';
|
|
57
57
|
@import './es/packages/lottie/style/lottie.scss';
|
|
58
58
|
@import './es/packages/loading/style/loading.scss';
|
|
59
|
-
@import './es/packages/inputnumber/style/inputnumber.scss';
|
|
60
59
|
@import './es/packages/layout/style/layout.scss';
|
|
60
|
+
@import './es/packages/inputnumber/style/inputnumber.scss';
|
|
61
61
|
@import './es/packages/input/style/input.scss';
|
|
62
|
+
@import './es/packages/infiniteloading/style/infiniteloading.scss';
|
|
62
63
|
@import './es/packages/indicator/style/indicator.scss';
|
|
63
64
|
@import './es/packages/imagepreview/style/imagepreview.scss';
|
|
64
|
-
@import './es/packages/infiniteloading/style/infiniteloading.scss';
|
|
65
|
-
@import './es/packages/hoverbuttonitem/style/hoverbuttonitem.scss';
|
|
66
65
|
@import './es/packages/image/style/image.scss';
|
|
66
|
+
@import './es/packages/hoverbuttonitem/style/hoverbuttonitem.scss';
|
|
67
67
|
@import './es/packages/hoverbutton/style/hoverbutton.scss';
|
|
68
68
|
@import './es/packages/griditem/style/griditem.scss';
|
|
69
69
|
@import './es/packages/grid/style/grid.scss';
|
|
70
|
-
@import './es/packages/form/style/form.scss';
|
|
71
70
|
@import './es/packages/formitem/style/formitem.scss';
|
|
71
|
+
@import './es/packages/ellipsis/style/ellipsis.scss';
|
|
72
|
+
@import './es/packages/form/style/form.scss';
|
|
72
73
|
@import './es/packages/empty/style/empty.scss';
|
|
73
74
|
@import './es/packages/fixednav/style/fixednav.scss';
|
|
74
|
-
@import './es/packages/ellipsis/style/ellipsis.scss';
|
|
75
75
|
@import './es/packages/elevator/style/elevator.scss';
|
|
76
76
|
@import './es/packages/drag/style/drag.scss';
|
|
77
77
|
@import './es/packages/divider/style/divider.scss';
|
|
78
|
-
@import './es/packages/datepicker/style/datepicker.scss';
|
|
79
|
-
@import './es/packages/datepickerview/style/datepickerview.scss';
|
|
80
78
|
@import './es/packages/dialog/style/dialog.scss';
|
|
79
|
+
@import './es/packages/datepicker/style/datepicker.scss';
|
|
81
80
|
@import './es/packages/countup/style/countup.scss';
|
|
82
81
|
@import './es/packages/countdown/style/countdown.scss';
|
|
82
|
+
@import './es/packages/datepickerview/style/datepickerview.scss';
|
|
83
|
+
@import './es/packages/configprovider/style/configprovider.scss';
|
|
83
84
|
@import './es/packages/collapseitem/style/collapseitem.scss';
|
|
84
85
|
@import './es/packages/collapse/style/collapse.scss';
|
|
85
|
-
@import './es/packages/configprovider/style/configprovider.scss';
|
|
86
86
|
@import './es/packages/col/style/col.scss';
|
|
87
87
|
@import './es/packages/circleprogress/style/circleprogress.scss';
|
|
88
88
|
@import './es/packages/checkboxgroup/style/checkboxgroup.scss';
|
|
89
89
|
@import './es/packages/cellgroup/style/cellgroup.scss';
|
|
90
|
-
@import './es/packages/cell/style/cell.scss';
|
|
91
90
|
@import './es/packages/checkbox/style/checkbox.scss';
|
|
91
|
+
@import './es/packages/cell/style/cell.scss';
|
|
92
92
|
@import './es/packages/cascader/style/cascader.scss';
|
|
93
93
|
@import './es/packages/calendaritem/style/calendaritem.scss';
|
|
94
94
|
@import './es/packages/card/style/card.scss';
|
|
95
95
|
@import './es/packages/calendar/style/calendar.scss';
|
|
96
96
|
@import './es/packages/calendarcard/style/calendarcard.scss';
|
|
97
|
+
@import './es/packages/barrage/style/barrage.scss';
|
|
97
98
|
@import './es/packages/button/style/button.scss';
|
|
98
99
|
@import './es/packages/badge/style/badge.scss';
|
|
100
|
+
@import './es/packages/avatargroup/style/avatargroup.scss';
|
|
101
|
+
@import './es/packages/avatarcropper/style/avatarcropper.scss';
|
|
99
102
|
@import './es/packages/backtop/style/backtop.scss';
|
|
100
|
-
@import './es/packages/barrage/style/barrage.scss';
|
|
101
103
|
@import './es/packages/avatar/style/avatar.scss';
|
|
102
|
-
@import './es/packages/
|
|
103
|
-
@import './es/packages/avatargroup/style/avatargroup.scss';
|
|
104
|
+
@import './es/packages/animatingnumbers/style/animatingnumbers.scss';
|
|
104
105
|
@import './es/packages/audio/style/audio.scss';
|
|
105
106
|
@import './es/packages/animate/style/animate.scss';
|
|
106
|
-
@import './es/packages/
|
|
107
|
-
@import './es/packages/actionsheet/style/actionsheet.scss';
|
|
108
|
-
@import './es/packages/address/style/address.scss';
|
|
107
|
+
@import './es/packages/address/style/address.scss';
|
|
108
|
+
@import './es/packages/actionsheet/style/actionsheet.scss';
|
|
@@ -18,82 +18,48 @@ page {
|
|
|
18
18
|
--nutui-brand-stop-1: #ff475d; // 渐变色起
|
|
19
19
|
--nutui-brand-stop-2: #fa3725; // 渐变色止
|
|
20
20
|
|
|
21
|
-
// 品牌颜色语义化
|
|
22
|
-
// 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等
|
|
23
|
-
--nutui-color-primary: var(--nutui-brand-6);
|
|
24
|
-
// 品牌渐变色左端
|
|
25
|
-
--nutui-color-primary-stop-1: var(--nutui-brand-stop-1);
|
|
26
|
-
// 品牌渐变色右端
|
|
27
|
-
--nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
|
|
28
|
-
// 品牌主色调或其他深色背景下的文字
|
|
29
|
-
--nutui-color-primary-text: var(--nutui-color-background-gray-1);
|
|
30
|
-
// 品牌主色调点击态，背景、边框、镂空状态下的文字
|
|
31
|
-
--nutui-color-primary-pressed: var(--nutui-brand-7);
|
|
32
|
-
// 品牌主色调禁用态，背景、边框、镂空状态下的文字
|
|
33
|
-
--nutui-color-primary-disabled: var(--nutui-color-content-gray-1);
|
|
34
|
-
// 品牌主色调特殊禁用态，通过操作后可转位默认态
|
|
35
|
-
--nutui-color-primary-disabled-special: var(--nutui-brand-3);
|
|
36
|
-
// 品牌主色调镂空背景点击态
|
|
37
|
-
--nutui-color-primary-light-pressed: var(--nutui-brand-1);
|
|
38
|
-
--nutui-color-primary-specialdisabled: var(--nutui-red-3);
|
|
39
|
-
|
|
40
21
|
// service color
|
|
41
|
-
--nutui-golden-1: #
|
|
42
|
-
--nutui-golden-2:
|
|
43
|
-
--nutui-golden-3:
|
|
44
|
-
--nutui-golden-4: #
|
|
22
|
+
--nutui-golden-1: #fff4e8;
|
|
23
|
+
--nutui-golden-2: rgba(184, 124, 63, 0.04);
|
|
24
|
+
--nutui-golden-3: rgba(191, 130, 66, 0.2);
|
|
25
|
+
--nutui-golden-4: #b87c3f;
|
|
26
|
+
--nutui-golden-5: #4d3b2a;
|
|
27
|
+
--nutui-golden-6: #33271c;
|
|
28
|
+
--nutui-golden-7: #ccb8a3;
|
|
45
29
|
|
|
46
30
|
--nutui-golden-stop-1: #fff9f0;
|
|
47
31
|
--nutui-golden-stop-2: #ffe3c2;
|
|
48
32
|
|
|
49
|
-
// service color 语义化
|
|
50
|
-
--nutui-color-service: var(--nutui-golden-1);
|
|
51
|
-
--nutui-color-service-border: var(--nutui-golden-2);
|
|
52
|
-
--nutui-color-service-pressed: var(--nutui-golden-4);
|
|
53
|
-
--nutui-color-service-stop-1: var(--nutui-golden-stop-1);
|
|
54
|
-
--nutui-color-service-stop-2: var(--nutui-golden-stop-2);
|
|
55
|
-
--nutui-color-service-text: var(--nutui-golden-3);
|
|
56
|
-
|
|
57
33
|
// success color
|
|
58
34
|
--nutui-green-1: #1f2920;
|
|
59
35
|
--nutui-green-2: #32c241;
|
|
60
36
|
--nutui-green-3: #12b222;
|
|
61
37
|
|
|
62
|
-
//
|
|
63
|
-
--nutui-color-success: var(--nutui-green-2); // 深背景
|
|
64
|
-
--nutui-color-success-light: var(--nutui-green-1); // 浅背景
|
|
65
|
-
--nutui-color-success-pressed: var(--nutui-green-3); // 文字
|
|
66
|
-
|
|
67
|
-
// danger color
|
|
68
|
-
--nutui-red-1: #2e2526;
|
|
69
|
-
--nutui-red-2: #ff3344;
|
|
70
|
-
--nutui-red-3: #ff3344;
|
|
71
|
-
--nutui-red-6: #ff3b3b;
|
|
38
|
+
// danger color 发现不一致 TODO
|
|
72
39
|
|
|
73
|
-
//
|
|
74
|
-
--nutui-
|
|
75
|
-
--nutui-
|
|
40
|
+
// red color
|
|
41
|
+
--nutui-red-1: #4c1c20;
|
|
42
|
+
--nutui-red-2: #621a20;
|
|
43
|
+
--nutui-red-3: #603840;
|
|
44
|
+
--nutui-red-4: #893f49;
|
|
45
|
+
--nutui-red-5: #bc3139;
|
|
46
|
+
--nutui-red-6: #bc3139;
|
|
47
|
+
--nutui-red-7: #ed3b34;
|
|
48
|
+
--nutui-red-8: #ff5144;
|
|
49
|
+
--nutui-red-9: #ff9382;
|
|
50
|
+
--nutui-red-10: #ffccbf;
|
|
51
|
+
--nutui-red-11: #ffe7e0;
|
|
76
52
|
|
|
77
53
|
// warning color
|
|
78
54
|
--nutui-yellow-1: #29271f;
|
|
79
55
|
--nutui-yellow-2: #faaf00;
|
|
80
|
-
--nutui-yellow-3: #
|
|
81
|
-
|
|
82
|
-
// warning color 语义化
|
|
83
|
-
--nutui-color-warning: var(--nutui-yellow-2); // 深背景
|
|
84
|
-
--nutui-color-warning-light: var(--nutui-yellow-1); // 浅背景
|
|
85
|
-
--nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字
|
|
56
|
+
--nutui-yellow-3: #cc8500;
|
|
86
57
|
|
|
87
58
|
// info color
|
|
88
59
|
--nutui-blue-1: #23292e;
|
|
89
60
|
--nutui-blue-2: #3385ff;
|
|
90
61
|
|
|
91
|
-
// info color 语义化
|
|
92
|
-
--nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色
|
|
93
|
-
--nutui-color-info-light: var(--nutui-blue-1); // 背景
|
|
94
|
-
|
|
95
62
|
--nutui-secondary-1: #14cc33; // 辅助色
|
|
96
|
-
--nutui-color-text-link: var(--nutui-blue-2);
|
|
97
63
|
|
|
98
64
|
// 背景色
|
|
99
65
|
// 卡片背景色
|
|
@@ -102,6 +68,8 @@ page {
|
|
|
102
68
|
--nutui-gray-2: #141414;
|
|
103
69
|
// 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
|
|
104
70
|
--nutui-gray-3: #0a0a0a;
|
|
71
|
+
// 组件背景色，2025年新增
|
|
72
|
+
--nutui-gray-9: #333333;
|
|
105
73
|
// 文字色
|
|
106
74
|
// 四级文字色，不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
|
|
107
75
|
--nutui-gray-4: #666666;
|
|
@@ -120,7 +88,7 @@ page {
|
|
|
120
88
|
--nutui-black-2: rgba(0, 0, 0, 0.1);
|
|
121
89
|
// 线条色
|
|
122
90
|
// 间隔线/容错线，用于结构或信息分割
|
|
123
|
-
--nutui-black-3: rgba(255, 255, 255, 0.
|
|
91
|
+
--nutui-black-3: rgba(255, 255, 255, 0.08);
|
|
124
92
|
--nutui-black-4: rgba(20, 20, 20, 0.1);
|
|
125
93
|
--nutui-black-5: rgba(20, 20, 20, 0.2);
|
|
126
94
|
--nutui-black-6: rgba(20, 20, 20, 0.3);
|
|
@@ -150,6 +118,69 @@ page {
|
|
|
150
118
|
--nutui-white-12: rgba(31, 31, 31, 0.9);
|
|
151
119
|
// --nutui-white-13: rgba(255, 255, 255, 1);
|
|
152
120
|
|
|
121
|
+
// 品牌颜色语义化
|
|
122
|
+
// 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等
|
|
123
|
+
--nutui-color-primary: var(--nutui-brand-6);
|
|
124
|
+
// 品牌渐变色左端
|
|
125
|
+
--nutui-color-primary-stop-1: var(--nutui-brand-stop-1);
|
|
126
|
+
// 品牌渐变色右端
|
|
127
|
+
--nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
|
|
128
|
+
// 品牌主色调或其他深色背景下的文字
|
|
129
|
+
--nutui-color-primary-text: var(--nutui-color-background-gray-1);
|
|
130
|
+
// 品牌主色调点击态，背景、边框、镂空状态下的文字
|
|
131
|
+
--nutui-color-primary-pressed: var(--nutui-red-7);
|
|
132
|
+
// 品牌主色调禁用态，背景、边框、镂空状态下的文字
|
|
133
|
+
--nutui-color-primary-disabled: var(--nutui-color-content-gray-1);
|
|
134
|
+
// 品牌主色调特殊禁用态，通过操作后可转位默认态
|
|
135
|
+
--nutui-color-primary-disabled-special: var(--nutui-red-3);
|
|
136
|
+
// 2025 新增
|
|
137
|
+
--nutui-color-primary-light: var(--nutui-brand-1);
|
|
138
|
+
// 品牌主色调镂空背景点击态
|
|
139
|
+
--nutui-color-primary-light-pressed: var(--nutui-red-2);
|
|
140
|
+
// 看上去命名和上边重复，去掉
|
|
141
|
+
// --nutui-color-primary-specialdisabled: var(--nutui-red-3);
|
|
142
|
+
|
|
143
|
+
// service color 语义化
|
|
144
|
+
// 金色背景
|
|
145
|
+
--nutui-color-service: var(--nutui-golden-1);
|
|
146
|
+
// 填充标签边框
|
|
147
|
+
--nutui-color-service-border-1: var(--nutui-golden-2);
|
|
148
|
+
// 线框标签边框
|
|
149
|
+
--nutui-color-service-border-2: var(--nutui-golden-3);
|
|
150
|
+
// 废弃
|
|
151
|
+
// --nutui-color-service-border: var(--nutui-golden-2);
|
|
152
|
+
--nutui-color-service-pressed: var(--nutui-golden-4);
|
|
153
|
+
// 金色文字
|
|
154
|
+
--nutui-color-service-text: var(--nutui-golden-4);
|
|
155
|
+
// 金色按钮背景
|
|
156
|
+
--nutui-color-service-btn-bg: var(--nutui-golden-5);
|
|
157
|
+
// 金色按钮点击态背景
|
|
158
|
+
--nutui-color-service-btn-bg-pressed: var(--nutui-golden-6);
|
|
159
|
+
// 金色按钮文字
|
|
160
|
+
--nutui-color-service-btn-text: var(--nutui-golden-7);
|
|
161
|
+
|
|
162
|
+
--nutui-color-service-stop-1: var(--nutui-golden-stop-1);
|
|
163
|
+
--nutui-color-service-stop-2: var(--nutui-golden-stop-2);
|
|
164
|
+
|
|
165
|
+
// success color 语义化
|
|
166
|
+
--nutui-color-success: var(--nutui-green-2); // 深背景
|
|
167
|
+
--nutui-color-success-light: var(--nutui-green-1); // 浅背景
|
|
168
|
+
--nutui-color-success-pressed: var(--nutui-green-3); // 文字
|
|
169
|
+
|
|
170
|
+
// danger color 语义化，待办，看上去目前非常的独立 @周峯
|
|
171
|
+
--nutui-color-danger: var(--nutui-red-2); // 背景或文字
|
|
172
|
+
--nutui-color-danger-light: var(--nutui-red-1); // 背景
|
|
173
|
+
|
|
174
|
+
// info color 语义化
|
|
175
|
+
--nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色
|
|
176
|
+
--nutui-color-info-light: var(--nutui-blue-1); // 背景
|
|
177
|
+
--nutui-color-text-link: var(--nutui-blue-2);
|
|
178
|
+
|
|
179
|
+
// warning color 语义化
|
|
180
|
+
--nutui-color-warning: var(--nutui-yellow-2); // 深背景
|
|
181
|
+
--nutui-color-warning-light: var(--nutui-yellow-1); // 浅背景
|
|
182
|
+
--nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字
|
|
183
|
+
|
|
153
184
|
// 文字颜色值 语义化
|
|
154
185
|
--nutui-color-content-gray-1: var(--nutui-gray-4);
|
|
155
186
|
--nutui-color-content-gray-2: var(--nutui-gray-5);
|
|
@@ -168,12 +199,15 @@ page {
|
|
|
168
199
|
--nutui-color-background-gray-1: var(--nutui-gray-1);
|
|
169
200
|
--nutui-color-background-gray-2: var(--nutui-gray-2);
|
|
170
201
|
--nutui-color-background-gray-3: var(--nutui-gray-3);
|
|
202
|
+
--nutui-color-background-gray-4: var(--nutui-gray-9);
|
|
171
203
|
// 页面背景
|
|
172
204
|
--nutui-color-background: var(--nutui-color-background-gray-3);
|
|
173
205
|
// 卡片背景
|
|
174
206
|
--nutui-color-background-overlay: var(--nutui-color-background-gray-1);
|
|
175
207
|
// 卡片内容器背景
|
|
176
208
|
--nutui-color-background-sunken: var(--nutui-color-background-gray-2);
|
|
209
|
+
// 组件背景，2025年新增
|
|
210
|
+
--nutui-color-background-component: var(--nutui-color-background-gray-4);
|
|
177
211
|
|
|
178
212
|
// 蒙层颜色值 语义化
|
|
179
213
|
--nutui-color-mask-gray-1: var(--nutui-black-2);
|
|
@@ -17,99 +17,67 @@ page {
|
|
|
17
17
|
--nutui-brand-stop-1: #ff475d; // 渐变色起
|
|
18
18
|
--nutui-brand-stop-2: #ff0f23; // 渐变色止
|
|
19
19
|
|
|
20
|
-
// 品牌颜色语义化
|
|
21
|
-
// 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等
|
|
22
|
-
--nutui-color-primary: var(--nutui-brand-6);
|
|
23
|
-
// 品牌渐变色左端
|
|
24
|
-
--nutui-color-primary-stop-1: var(--nutui-brand-stop-1);
|
|
25
|
-
// 品牌渐变色右端
|
|
26
|
-
--nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
|
|
27
|
-
// 品牌主色调或其他深色背景下的文字
|
|
28
|
-
--nutui-color-primary-text: var(--nutui-color-background-gray-1);
|
|
29
|
-
// 品牌主色调点击态，背景、边框、镂空状态下的文字
|
|
30
|
-
--nutui-color-primary-pressed: var(--nutui-brand-7);
|
|
31
|
-
// 品牌主色调禁用态，背景、边框、镂空状态下的文字
|
|
32
|
-
--nutui-color-primary-disabled: var(--nutui-color-content-gray-1);
|
|
33
|
-
// 品牌主色调特殊禁用态，通过操作后可转位默认态
|
|
34
|
-
--nutui-color-primary-disabled-special: var(--nutui-brand-3);
|
|
35
|
-
// 品牌主色调镂空背景点击态
|
|
36
|
-
--nutui-color-primary-light-pressed: var(--nutui-brand-1);
|
|
37
|
-
--nutui-color-primary-specialdisabled: var(--nutui-red-3);
|
|
38
|
-
|
|
39
20
|
// service color
|
|
40
|
-
--nutui-golden-1: #
|
|
41
|
-
--nutui-golden-2:
|
|
42
|
-
--nutui-golden-3:
|
|
43
|
-
--nutui-golden-4: #
|
|
21
|
+
--nutui-golden-1: #fff4e8;
|
|
22
|
+
--nutui-golden-2: rgba(181, 105, 26, 0.02);
|
|
23
|
+
--nutui-golden-3: rgba(181, 105, 26, 0.2);
|
|
24
|
+
--nutui-golden-4: #b5691a;
|
|
25
|
+
--nutui-golden-5: #ffe7cc;
|
|
26
|
+
--nutui-golden-6: #ffd8ad;
|
|
27
|
+
--nutui-golden-7: #664100;
|
|
44
28
|
|
|
45
29
|
--nutui-golden-stop-1: #fff9f0;
|
|
46
30
|
--nutui-golden-stop-2: #ffe3c2;
|
|
47
31
|
|
|
48
|
-
// service color 语义化
|
|
49
|
-
--nutui-color-service: var(--nutui-golden-1);
|
|
50
|
-
--nutui-color-service-border: var(--nutui-golden-2);
|
|
51
|
-
--nutui-color-service-pressed: var(--nutui-golden-4);
|
|
52
|
-
--nutui-color-service-stop-1: var(--nutui-golden-stop-1);
|
|
53
|
-
--nutui-color-service-stop-2: var(--nutui-golden-stop-2);
|
|
54
|
-
--nutui-color-service-text: var(--nutui-golden-3);
|
|
55
|
-
|
|
56
32
|
// success color
|
|
57
33
|
--nutui-green-1: #ebfbeb;
|
|
58
34
|
--nutui-green-2: #00d900;
|
|
59
35
|
--nutui-green-3: #2aa32a;
|
|
60
36
|
|
|
61
|
-
//
|
|
62
|
-
--nutui-color-success: var(--nutui-green-2); // 深背景
|
|
63
|
-
--nutui-color-success-light: var(--nutui-green-1); // 浅背景
|
|
64
|
-
--nutui-color-success-pressed: var(--nutui-green-3); // 文字
|
|
37
|
+
// danger color 发现不一致TODO
|
|
65
38
|
|
|
66
|
-
//
|
|
67
|
-
--nutui-red-1: #
|
|
39
|
+
// red color
|
|
40
|
+
--nutui-red-1: #fff0f4;
|
|
41
|
+
--nutui-red-2: #ffd6e1;
|
|
68
42
|
--nutui-red-3: #ffadbe;
|
|
69
|
-
--nutui-red-
|
|
43
|
+
--nutui-red-4: #ff8595;
|
|
44
|
+
--nutui-red-5: #ff5c67;
|
|
70
45
|
--nutui-red-6: #ff3333;
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
--nutui-
|
|
74
|
-
--nutui-
|
|
46
|
+
--nutui-red-7: #e53029;
|
|
47
|
+
--nutui-red-8: #cc2c21;
|
|
48
|
+
--nutui-red-9: #992412;
|
|
49
|
+
--nutui-red-10: #661b08;
|
|
50
|
+
--nutui-red-11: #330f02;
|
|
75
51
|
|
|
76
52
|
// warning color
|
|
77
|
-
--nutui-yellow-1: #
|
|
53
|
+
--nutui-yellow-1: #fff9e0;
|
|
78
54
|
--nutui-yellow-2: #ffbf00;
|
|
79
|
-
--nutui-yellow-3: #
|
|
80
|
-
|
|
81
|
-
// warning color 语义化
|
|
82
|
-
--nutui-color-warning: var(--nutui-yellow-2); // 深背景
|
|
83
|
-
--nutui-color-warning-light: var(--nutui-yellow-1); // 浅背景
|
|
84
|
-
--nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字
|
|
55
|
+
--nutui-yellow-3: #b26b00;
|
|
85
56
|
|
|
86
57
|
// info color
|
|
87
58
|
--nutui-blue-1: #e5f5ff;
|
|
88
59
|
--nutui-blue-2: #0073ff;
|
|
89
60
|
|
|
90
|
-
// info color 语义化
|
|
91
|
-
--nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色
|
|
92
|
-
--nutui-color-info-light: var(--nutui-blue-1); // 背景
|
|
93
|
-
|
|
94
61
|
--nutui-secondary-1: #14cc33; // 辅助色
|
|
95
|
-
--nutui-color-text-link: var(--nutui-blue-2);
|
|
96
62
|
|
|
97
63
|
// 背景色
|
|
98
64
|
// 卡片背景色
|
|
99
65
|
--nutui-gray-1: #ffffff;
|
|
100
66
|
// 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
|
|
101
|
-
--nutui-gray-2: #
|
|
67
|
+
--nutui-gray-2: #f5f6fa;
|
|
102
68
|
// 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
|
|
103
|
-
--nutui-gray-3: #
|
|
69
|
+
--nutui-gray-3: #f2f3f7;
|
|
70
|
+
// 组件背景色，2025年新增
|
|
71
|
+
--nutui-gray-9: #f5f6fa;
|
|
104
72
|
// 文字色
|
|
105
73
|
// 四级文字色，不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
|
|
106
74
|
--nutui-gray-4: #c2c4cc;
|
|
107
75
|
// 三级文字色（次要）
|
|
108
|
-
--nutui-gray-5: #
|
|
76
|
+
--nutui-gray-5: #828794;
|
|
109
77
|
// 二级文字色（常规），用于次级标题、属性标示、非主要信息引导等。
|
|
110
|
-
--nutui-gray-6: #
|
|
78
|
+
--nutui-gray-6: #3d414d;
|
|
111
79
|
// 一级文字色（重要）主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
|
|
112
|
-
--nutui-gray-7: #
|
|
80
|
+
--nutui-gray-7: #171a26;
|
|
113
81
|
// icon 未选中颜色
|
|
114
82
|
--nutui-gray-8: #dadce0;
|
|
115
83
|
|
|
@@ -119,7 +87,7 @@ page {
|
|
|
119
87
|
--nutui-black-2: rgba(0, 0, 0, 0.02);
|
|
120
88
|
// 线条色
|
|
121
89
|
// 间隔线/容错线，用于结构或信息分割
|
|
122
|
-
--nutui-black-3: rgba(0, 0, 0, 0.
|
|
90
|
+
--nutui-black-3: rgba(0, 0, 0, 0.08);
|
|
123
91
|
--nutui-black-4: rgba(0, 0, 0, 0.1);
|
|
124
92
|
--nutui-black-5: rgba(0, 0, 0, 0.2);
|
|
125
93
|
--nutui-black-6: rgba(0, 0, 0, 0.3);
|
|
@@ -149,6 +117,69 @@ page {
|
|
|
149
117
|
--nutui-white-12: rgba(255, 255, 255, 0.9);
|
|
150
118
|
--nutui-white-13: rgba(255, 255, 255, 1);
|
|
151
119
|
|
|
120
|
+
// 品牌颜色语义化
|
|
121
|
+
// 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等
|
|
122
|
+
--nutui-color-primary: var(--nutui-brand-6);
|
|
123
|
+
// 品牌渐变色左端
|
|
124
|
+
--nutui-color-primary-stop-1: var(--nutui-brand-stop-1);
|
|
125
|
+
// 品牌渐变色右端
|
|
126
|
+
--nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
|
|
127
|
+
// 品牌主色调或其他深色背景下的文字
|
|
128
|
+
--nutui-color-primary-text: var(--nutui-color-background-gray-1);
|
|
129
|
+
// 品牌主色调点击态，背景、边框、镂空状态下的文字
|
|
130
|
+
--nutui-color-primary-pressed: var(--nutui-red-7);
|
|
131
|
+
// 品牌主色调禁用态，背景、边框、镂空状态下的文字
|
|
132
|
+
--nutui-color-primary-disabled: var(--nutui-color-content-gray-1);
|
|
133
|
+
// 品牌主色调特殊禁用态，通过操作后可转位默认态
|
|
134
|
+
--nutui-color-primary-disabled-special: var(--nutui-red-3);
|
|
135
|
+
// 2025 新增
|
|
136
|
+
--nutui-color-primary-light: var(--nutui-brand-1);
|
|
137
|
+
// 品牌主色调镂空背景点击态
|
|
138
|
+
--nutui-color-primary-light-pressed: var(--nutui-red-2);
|
|
139
|
+
// 看上去命名和上边重复，去掉
|
|
140
|
+
// --nutui-color-primary-specialdisabled: var(--nutui-red-3);
|
|
141
|
+
|
|
142
|
+
// service color 语义化
|
|
143
|
+
// 金色背景
|
|
144
|
+
--nutui-color-service: var(--nutui-golden-1);
|
|
145
|
+
// 填充标签边框
|
|
146
|
+
--nutui-color-service-border-1: var(--nutui-golden-2);
|
|
147
|
+
// 线框标签边框
|
|
148
|
+
--nutui-color-service-border-2: var(--nutui-golden-3);
|
|
149
|
+
// 废弃
|
|
150
|
+
// --nutui-color-service-border: var(--nutui-golden-2);
|
|
151
|
+
--nutui-color-service-pressed: var(--nutui-golden-4);
|
|
152
|
+
// 金色文字
|
|
153
|
+
--nutui-color-service-text: var(--nutui-golden-4);
|
|
154
|
+
// 金色按钮背景
|
|
155
|
+
--nutui-color-service-btn-bg: var(--nutui-golden-5);
|
|
156
|
+
// 金色按钮点击态背景
|
|
157
|
+
--nutui-color-service-btn-bg-pressed: var(--nutui-golden-6);
|
|
158
|
+
// 金色按钮文字
|
|
159
|
+
--nutui-color-service-btn-text: var(--nutui-golden-7);
|
|
160
|
+
|
|
161
|
+
--nutui-color-service-stop-1: var(--nutui-golden-stop-1);
|
|
162
|
+
--nutui-color-service-stop-2: var(--nutui-golden-stop-2);
|
|
163
|
+
|
|
164
|
+
// success color 语义化
|
|
165
|
+
--nutui-color-success: var(--nutui-green-2); // 深背景
|
|
166
|
+
--nutui-color-success-light: var(--nutui-green-1); // 浅背景
|
|
167
|
+
--nutui-color-success-pressed: var(--nutui-green-3); // 文字
|
|
168
|
+
|
|
169
|
+
// danger color 语义化，待办，看上去目前非常的独立 TODO
|
|
170
|
+
--nutui-color-danger: var(--nutui-red-2); // 背景或文字
|
|
171
|
+
--nutui-color-danger-light: var(--nutui-red-1); // 背景
|
|
172
|
+
|
|
173
|
+
// info color 语义化
|
|
174
|
+
--nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色
|
|
175
|
+
--nutui-color-info-light: var(--nutui-blue-1); // 背景
|
|
176
|
+
--nutui-color-text-link: var(--nutui-blue-2);
|
|
177
|
+
|
|
178
|
+
// warning color 语义化
|
|
179
|
+
--nutui-color-warning: var(--nutui-yellow-2); // 深背景
|
|
180
|
+
--nutui-color-warning-light: var(--nutui-yellow-1); // 浅背景
|
|
181
|
+
--nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字
|
|
182
|
+
|
|
152
183
|
// 文字颜色值 语义化
|
|
153
184
|
--nutui-color-content-gray-1: var(--nutui-gray-4);
|
|
154
185
|
--nutui-color-content-gray-2: var(--nutui-gray-5);
|
|
@@ -167,12 +198,15 @@ page {
|
|
|
167
198
|
--nutui-color-background-gray-1: var(--nutui-gray-1);
|
|
168
199
|
--nutui-color-background-gray-2: var(--nutui-gray-2);
|
|
169
200
|
--nutui-color-background-gray-3: var(--nutui-gray-3);
|
|
201
|
+
--nutui-color-background-gray-4: var(--nutui-gray-9);
|
|
170
202
|
// 页面背景
|
|
171
203
|
--nutui-color-background: var(--nutui-color-background-gray-3);
|
|
172
204
|
// 卡片背景
|
|
173
205
|
--nutui-color-background-overlay: var(--nutui-color-background-gray-1);
|
|
174
206
|
// 卡片内容器背景
|
|
175
207
|
--nutui-color-background-sunken: var(--nutui-color-background-gray-2);
|
|
208
|
+
// 组件背景，2025年新增
|
|
209
|
+
--nutui-color-background-component: var(--nutui-color-background-gray-4);
|
|
176
210
|
|
|
177
211
|
// 蒙层颜色值 语义化
|
|
178
212
|
--nutui-color-mask-gray-1: var(--nutui-black-2);
|