Skip to content

Commit 8235496

Browse files
irisSongirisSong
authored
feat(switch): 适配 v16 (#3483)
* fix: 移除jmfe桥接方式 * feat(switch): 适配 v16 * fix: 优化wcsc 对嵌套 calc + var 解析成本高问题 * style: 更新导出变量类型 * style: theme-dark 变量更新
1 parent fcc05b8 commit 8235496

9 files changed

Lines changed: 84 additions & 74 deletions

File tree

‎src/packages/configprovider/types.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,7 @@ export type NutCSSVariables =
5656
| 'nutuiColorTextDisabled'
5757
| 'nutuiColorTextDark'
5858
| 'nutuiColorTextLink'
59+
| 'nutuiColorPrimaryText'
5960
| 'nutuiFontSizeXxxs'
6061
| 'nutuiFontSizeXxs'
6162
| 'nutuiFontSizeXs'
@@ -360,7 +361,8 @@ export type NutCSSVariables =
360361
| 'nutuiSwitchInactiveLineBackgroundColor'
361362
| 'nutuiSwitchWidth'
362363
| 'nutuiSwitchHeight'
363-
| 'nutuiSwitchLineHeight'
364+
| 'nutuiSwitchInsideWidth'
365+
| 'nutuiSwitchInsideHeight'
364366
| 'nutuiSwitchBorderRadius'
365367
| 'nutuiSwitchBorderWidth'
366368
| 'nutuiSwitchInsideBorderRadius'

‎src/packages/switch/doc.en-US.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,17 +101,18 @@ The component provides the following CSS variables, which can be used to customi
101101
| \--nutui-switch-active-background-color | Switch on status background color | `$color-primary` |
102102
| \--nutui-switch-inactive-background-color | Switch off status background color | `$color-text-disabled` |
103103
| \--nutui-switch-active-disabled-background-color | Switch toggle on the background color disabled | `$color-primary-disabled-special` |
104-
| \--nutui-switch-inactive-disabled-background-color | Turn off the background color disabled | `$color-background` |
105-
| \--nutui-switch-inactive-line-bg-color | Switch Off Internal Button Line Color | `#ffffff` |
106-
| \--nutui-switch-width | Switch Width | `46px` |
107-
| \--nutui-switch-height | Switch height | `28px` |
108-
| \--nutui-switch-line-height | Switch line height | `28px` |
104+
| \--nutui-switch-inactive-disabled-background-color | Turn off the background color disabled | `var(--nutui-color-background-component)` |
105+
| \--nutui-switch-inactive-line-background-color | Switch Off Internal Button Line Color | `$color-primary-text` |
106+
| \--nutui-switch-width | Switch Width | `56px` |
107+
| \--nutui-switch-height | Switch height | `24px` |
108+
| \--nutui-switch-inside-width | Switch internal button width | `32px` |
109+
| \--nutui-switch-inside-height | Switch internal button height | `20px` |
109110
| \--nutui-switch-border-radius | Switch rounded corner size | `$radius-circle` |
110111
| \--nutui-switch-border-width | Switch border width | `2px` |
111-
| \--nutui-switch-inside-border-radius | Switch internal button rounded corner size | `$radius-full` |
112-
| \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
112+
| \--nutui-switch-inside-border-radius | Switch internal button rounded corner size | `$radius-circle` |
113+
| \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
113114
| \--nutui-switch-label-text-color | Switch internal text color | `$color-primary-text` |
114-
| \--nutui-switch-label-font-size | Switch internal text size | `$font-size-s` |
115+
| \--nutui-switch-label-font-size | Switch internal text size | `$font-size-xs` |
115116
| \--nutui-switch-inactive-disabled-label-text-color | Turn off and disable internal text color | `$color-text-disabled` |
116117

117118
<Contribution name="Switch" />

‎src/packages/switch/doc.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react'
101101
| \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
102102
| \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
103103
| \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
104-
| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
105-
| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
106-
| \--nutui-switch-width | 开关宽度 | `46px` |
107-
| \--nutui-switch-height | 开关高度 | `28px` |
108-
| \--nutui-switch-line-height | 开关行高 | `28px` |
104+
| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `var(--nutui-color-background-component)` |
105+
| \--nutui-switch-inactive-line-background-color | 开关关闭状态内部按钮线条颜色 | `$color-primary-text` |
106+
| \--nutui-switch-width | 开关宽度 | `56px` |
107+
| \--nutui-switch-height | 开关高度 | `24px` |
108+
| \--nutui-switch-inside-width | 开关内部按钮宽度 | `32px` |
109+
| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
109110
| \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
110111
| \--nutui-switch-border-width | 开关边框宽度 | `2px` |
111-
| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
112-
| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
112+
| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-circle` |
113+
| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
113114
| \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
114-
| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
115+
| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-xs` |
115116
| \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
116117

117118
<Contribution name="Switch" />

‎src/packages/switch/doc.taro.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react-taro'
101101
| \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
102102
| \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
103103
| \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
104-
| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
105-
| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
106-
| \--nutui-switch-width | 开关宽度 | `46px` |
107-
| \--nutui-switch-height | 开关高度 | `28px` |
108-
| \--nutui-switch-line-height | 开关行高 | `28px` |
104+
| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `var(--nutui-color-background-component)` |
105+
| \--nutui-switch-inactive-line-background-color | 开关关闭状态内部按钮线条颜色 | `$color-primary-text` |
106+
| \--nutui-switch-width | 开关宽度 | `56px` |
107+
| \--nutui-switch-height | 开关高度 | `24px` |
108+
| \--nutui-switch-inside-width | 开关内部按钮宽度 | `32px` |
109+
| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
109110
| \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
110111
| \--nutui-switch-border-width | 开关边框宽度 | `2px` |
111-
| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
112-
| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
112+
| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-circle` |
113+
| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
113114
| \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
114-
| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
115+
| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-xs` |
115116
| \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
116117

117118
<Contribution name="Switch" />

‎src/packages/switch/doc.zh-TW.md‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react'
101101
| \--nutui-switch-active-background-color | 開關打開狀態背景顏色 | `$color-primary` |
102102
| \--nutui-switch-inactive-background-color | 開關關閉狀態背景顏色 | `$color-text-disabled` |
103103
| \--nutui-switch-active-disabled-background-color | 開關打開狀態禁用的背景顏色 | `$color-primary-disabled-special` |
104-
| \--nutui-switch-inactive-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `$color-background` |
105-
| \--nutui-switch-inactive-line-bg-color | 開關關閉狀態內部按鈕線條顏色 | `#ffffff` |
106-
| \--nutui-switch-width | 開關寬度 | `46px` |
107-
| \--nutui-switch-height | 開關高度 | `28px` |
108-
| \--nutui-switch-line-height | 開關行高 | `28px` |
104+
| \--nutui-switch-inactive-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `var(--nutui-color-background-component)` |
105+
| \--nutui-switch-inactive-line-background-color | 開關關閉狀態內部按鈕線條顏色 | `$color-primary-text` |
106+
| \--nutui-switch-width | 開關寬度 | `56px` |
107+
| \--nutui-switch-height | 開關高度 | `24px` |
108+
| \--nutui-switch-inside-width | 開關內部按鈕寬度 | `32px` |
109+
| \--nutui-switch-inside-height | 開關內部按鈕高度 | `20px` |
109110
| \--nutui-switch-border-radius | 開關圓角大小 | `$radius-circle` |
110111
| \--nutui-switch-border-width | 開關邊框寬度 | `2px` |
111-
| \--nutui-switch-inside-border-radius | 開關內部按鈕圓角大小 | `$radius-full` |
112-
| \--nutui-switch-inside-box-shadow | 開關內部按鈕陰影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
112+
| \--nutui-switch-inside-border-radius | 開關內部按鈕圓角大小 | `$radius-circle` |
113+
| \--nutui-switch-inside-box-shadow | 開關內部按鈕陰影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
113114
| \--nutui-switch-label-text-color | 開關內部文字顏色 | `$color-primary-text` |
114-
| \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-s` |
115+
| \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-xs` |
115116
| \--nutui-switch-inactive-disabled-label-text-color | 開關關閉禁用內部文字顏色 | `$color-text-disabled` |
116117

117118
<Contribution name="Switch" />

‎src/packages/switch/switch.scss‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
11
.nut-switch {
2+
--nut-switch-height: #{$switch-height};
3+
--nut-switch-inside-width: #{$switch-inside-width};
4+
--nut-switch-border-width: #{$switch-border-width};
5+
--nut-switch-label-margin-offset: calc(
6+
var(--nut-switch-inside-width) + var(--nut-switch-border-width) + 3px
7+
);
8+
29
cursor: pointer;
310
position: relative;
411
/* #ifdef dynamic*/
@@ -11,13 +18,12 @@
1118
align-items: center;
1219
min-width: $switch-width;
1320
height: $switch-height;
14-
line-height: $switch-line-height;
1521
background-color: $switch-active-background-color;
1622
border-radius: $switch-border-radius;
1723
background-size: 100% 100%;
1824
background-repeat: no-repeat;
1925
background-position: center center;
20-
flex: 0 0 auto; // 防止被压缩
26+
flex: 0 0 auto;
2127

2228
&-button {
2329
position: absolute;
@@ -27,41 +33,48 @@
2733
flex-direction: row;
2834
align-items: center;
2935
justify-content: center;
30-
height: calc($switch-height - $switch-border-width * 2);
31-
width: calc($switch-height - $switch-border-width * 2);
36+
height: $switch-inside-height;
37+
width: $switch-inside-width;
3238
border-radius: $switch-inside-border-radius;
3339
background: $color-primary-text;
3440
transition: left 0.3s linear;
3541
box-shadow: $switch-inside-box-shadow;
3642
&-open {
37-
left: calc(100% - $switch-height + $switch-border-width);
43+
left: calc(
44+
100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width)
45+
);
3846
&-rtl {
39-
left: $switch-border-width;
47+
left: var(--nut-switch-border-width);
4048
}
4149
}
4250
&-close {
43-
left: $switch-border-width;
51+
left: var(--nut-switch-border-width);
4452
&-rtl {
45-
left: calc(100% - $switch-height + $switch-border-width);
53+
left: calc(
54+
100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width)
55+
);
4656
}
4757
}
48-
.nut-icon {
49-
width: calc(($switch-height - $switch-border-width * 2) / 2);
50-
height: calc(($switch-height - $switch-border-width * 2) / 2);
51-
color: $switch-active-disabled-background-color;
52-
}
5358
}
5459

5560
&-close {
5661
background-color: $switch-inactive-background-color;
5762
&-line {
58-
width: calc(($switch-height - $switch-border-width * 2) / 2);
63+
width: calc(
64+
(var(--nut-switch-height) - var(--nut-switch-border-width) * 2) * 0.5
65+
);
5966
height: 2px;
6067
background: $switch-inactive-line-background-color;
6168
border-radius: 2px;
6269
}
6370
}
6471

72+
.nut-icon {
73+
width: calc(var(--nut-switch-height) * 0.5);
74+
height: calc(var(--nut-switch-height) * 0.5);
75+
color: $switch-active-disabled-background-color;
76+
}
77+
6578
&-label {
6679
/* #ifdef dynamic*/
6780
display: flex;
@@ -78,16 +91,16 @@
7891
color: $switch-label-text-color;
7992
}
8093
&-open {
81-
margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
94+
margin: 0 var(--nut-switch-label-margin-offset) 0 7px;
8295
&-rtl {
83-
margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
96+
margin: 0 7px 0 var(--nut-switch-label-margin-offset);
8497
}
8598
}
8699

87100
&-close {
88-
margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
101+
margin: 0 7px 0 var(--nut-switch-label-margin-offset);
89102
&-rtl {
90-
margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
103+
margin: 0 var(--nut-switch-label-margin-offset) 0 7px;
91104
}
92105
}
93106

‎src/styles/theme-dark.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ page,
123123
// --nutui-white-10: rgba(255, 255, 255, 0.7);
124124
// --nutui-white-11: rgba(255, 255, 255, 0.8);
125125
--nutui-white-12: rgba(31, 31, 31, 0.9);
126-
// --nutui-white-13: rgba(255, 255, 255, 1);
126+
--nutui-white-13: rgba(255, 255, 255, 1);
127127

128128
// 品牌颜色语义化
129129
// 品牌主色调默认态，主要功能控件的背景、边框、镂空状态下的文字等
@@ -133,7 +133,7 @@ page,
133133
// 品牌渐变色右端
134134
--nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
135135
// 品牌主色调或其他深色背景下的文字
136-
--nutui-color-primary-text: var(--nutui-gray-1);
136+
--nutui-color-primary-text: var(--nutui-white-13);
137137
// 品牌主色调点击态，背景、边框、镂空状态下的文字
138138
--nutui-color-primary-pressed: var(--nutui-red-7);
139139
// 品牌主色调禁用态，背景、边框、镂空状态下的文字

‎src/styles/theme-default.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -132,7 +132,7 @@ page {
132132
// 品牌渐变色右端
133133
--nutui-color-primary-stop-2: var(--nutui-brand-stop-2); // TODO 删掉
134134
// 品牌主色调或其他深色背景下的文字
135-
--nutui-color-primary-text: var(--nutui-gray-1);// TODO white
135+
--nutui-color-primary-text: var(--nutui-white-13);
136136
// 品牌主色调点击态，背景、边框、镂空状态下的文字
137137
--nutui-color-primary-pressed: var(--nutui-red-7);
138138
// 品牌主色调禁用态，背景、边框、镂空状态下的文字

‎src/styles/variables.scss‎

Lines changed: 11 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -151,15 +151,15 @@ $color-border-disabled: var(--nutui-color-border-disabled, #c2c4cc) !default;
151151
$color-title: var(--nutui-color-title, #1a1a1a) !default;
152152
$color-text: var(--nutui-color-text, #505259) !default;
153153
$color-text-help: var(--nutui-color-text-help, #888b94) !default;
154-
$color-text-disabled: var(--nutui-color-text-disabled, #c2c4cc) !default;
154+
$color-text-disabled: var(--nutui-color-text-disabled, #b4b8bf) !default;
155155
$color-text-dark: var(
156156
--nutui-color-text-dark,
157157
rgba(255, 255, 255, 0.9)
158158
) !default;
159159
$color-text-link: var(--nutui-color-text-link, #0c82f7) !default;
160160

161161
// 与品牌色一起使用，默认为白色，不区分暗黑与明亮模式。
162-
$color-primary-text: #ffffff !default;
162+
$color-primary-text: var(--nutui-color-primary-text, #ffffff) !default;
163163
$white: #ffffff !default;
164164
$black: #000000 !default;
165165

@@ -1040,45 +1040,36 @@ $switch-active-disabled-background-color: var(
10401040
) !default;
10411041
$switch-inactive-disabled-background-color: var(
10421042
--nutui-switch-inactive-disabled-background-color,
1043-
$color-background
1043+
var(--nutui-color-background-component)
10441044
) !default;
10451045
$switch-inactive-line-background-color: var(
10461046
--nutui-switch-inactive-line-background-color,
1047-
#ffffff
1047+
$color-primary-text
10481048
) !default;
1049-
$switch-width: var(--nutui-switch-width, scale-px(46px)) !default;
1050-
$switch-height: var(--nutui-switch-height, scale-px(28px)) !default;
1051-
$switch-line-height: var(--nutui-switch-line-height, scale-px(28px)) !default;
1049+
$switch-width: var(--nutui-switch-width, scale-px(56px)) !default;
1050+
$switch-height: var(--nutui-switch-height, scale-px(24px)) !default;
1051+
$switch-inside-width: var(--nutui-switch-inside-width, scale-px(32px)) !default;
1052+
$switch-inside-height: var(--nutui-switch-inside-height, scale-px(20px)) !default;
10521053
$switch-border-radius: var(
10531054
--nutui-switch-border-radius,
10541055
$radius-circle
10551056
) !default;
10561057
$switch-border-width: var(--nutui-switch-border-width, scale-px(2px)) !default;
10571058
$switch-inside-border-radius: var(
10581059
--nutui-switch-inside-border-radius,
1059-
$radius-full
1060-
) !default;
1061-
/* #ifdef harmony */
1062-
$switch-inside-box-shadow: var(
1063-
--nutui-switch-inside-box-shadow,
1064-
0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1)
1060+
$radius-circle
10651061
) !default;
1066-
/* #endif */
1067-
/* #ifndef harmony */
10681062
$switch-inside-box-shadow: var(
10691063
--nutui-switch-inside-box-shadow,
1070-
0px scale-px(2px) scale-px(1px) 0px rgba(0, 0, 0, 0.06),
1071-
0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1),
1072-
0px 0px 0px scale-px(1px) rgba(0, 0, 0, 0.02)
1064+
0px scale-px(4px) scale-px(8px) 0px rgba(0, 0, 0, 0.12)
10731065
) !default;
1074-
/* #endif */
10751066
$switch-label-text-color: var(
10761067
--nutui-switch-label-text-color,
10771068
$color-primary-text
10781069
) !default;
10791070
$switch-label-font-size: var(
10801071
--nutui-switch-label-font-size,
1081-
$font-size-s
1072+
$font-size-xs
10821073
) !default;
10831074
$switch-inactive-disabled-label-text-color: var(
10841075
--nutui-switch-inactive-disabled-label-text-color,

0 commit comments

Comments
 (0)