Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/packages/configprovider/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,7 @@ export type NutCSSVariables =
| 'nutuiColorTextDisabled'
| 'nutuiColorTextDark'
| 'nutuiColorTextLink'
| 'nutuiColorPrimaryText'
| 'nutuiFontSizeXxxs'
| 'nutuiFontSizeXxs'
| 'nutuiFontSizeXs'
Expand Down Expand Up @@ -360,7 +361,8 @@ export type NutCSSVariables =
| 'nutuiSwitchInactiveLineBackgroundColor'
| 'nutuiSwitchWidth'
| 'nutuiSwitchHeight'
| 'nutuiSwitchLineHeight'
| 'nutuiSwitchInsideWidth'
| 'nutuiSwitchInsideHeight'
| 'nutuiSwitchBorderRadius'
| 'nutuiSwitchBorderWidth'
| 'nutuiSwitchInsideBorderRadius'
Expand Down
17 changes: 9 additions & 8 deletions src/packages/switch/doc.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,17 +101,18 @@ The component provides the following CSS variables, which can be used to customi
| \--nutui-switch-active-background-color | Switch on status background color | `$color-primary` |
| \--nutui-switch-inactive-background-color | Switch off status background color | `$color-text-disabled` |
| \--nutui-switch-active-disabled-background-color | Switch toggle on the background color disabled | `$color-primary-disabled-special` |
| \--nutui-switch-inactive-disabled-background-color | Turn off the background color disabled | `$color-background` |
| \--nutui-switch-inactive-line-bg-color | Switch Off Internal Button Line Color | `#ffffff` |
| \--nutui-switch-width | Switch Width | `46px` |
| \--nutui-switch-height | Switch height | `28px` |
| \--nutui-switch-line-height | Switch line height | `28px` |
| \--nutui-switch-inactive-disabled-background-color | Turn off the background color disabled | `var(--nutui-color-background-component)` |
| \--nutui-switch-inactive-line-background-color | Switch Off Internal Button Line Color | `$color-primary-text` |
| \--nutui-switch-width | Switch Width | `56px` |
| \--nutui-switch-height | Switch height | `24px` |
| \--nutui-switch-inside-width | Switch internal button width | `32px` |
| \--nutui-switch-inside-height | Switch internal button height | `20px` |
| \--nutui-switch-border-radius | Switch rounded corner size | `$radius-circle` |
| \--nutui-switch-border-width | Switch border width | `2px` |
| \--nutui-switch-inside-border-radius | Switch internal button rounded corner size | `$radius-full` |
| \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
| \--nutui-switch-inside-border-radius | Switch internal button rounded corner size | `$radius-circle` |
| \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
| \--nutui-switch-label-text-color | Switch internal text color | `$color-primary-text` |
| \--nutui-switch-label-font-size | Switch internal text size | `$font-size-s` |
| \--nutui-switch-label-font-size | Switch internal text size | `$font-size-xs` |
| \--nutui-switch-inactive-disabled-label-text-color | Turn off and disable internal text color | `$color-text-disabled` |

<Contribution name="Switch" />
17 changes: 9 additions & 8 deletions src/packages/switch/doc.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react'
| \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
| \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
| \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
| \--nutui-switch-width | 开关宽度 | `46px` |
| \--nutui-switch-height | 开关高度 | `28px` |
| \--nutui-switch-line-height | 开关行高 | `28px` |
| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `var(--nutui-color-background-component)` |
| \--nutui-switch-inactive-line-background-color | 开关关闭状态内部按钮线条颜色 | `$color-primary-text` |
| \--nutui-switch-width | 开关宽度 | `56px` |
| \--nutui-switch-height | 开关高度 | `24px` |
| \--nutui-switch-inside-width | 开关内部按钮宽度 | `32px` |
| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
| \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
| \--nutui-switch-border-width | 开关边框宽度 | `2px` |
| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-circle` |
| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
| \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-xs` |
| \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |

<Contribution name="Switch" />
17 changes: 9 additions & 8 deletions src/packages/switch/doc.taro.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react-taro'
| \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
| \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
| \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
| \--nutui-switch-width | 开关宽度 | `46px` |
| \--nutui-switch-height | 开关高度 | `28px` |
| \--nutui-switch-line-height | 开关行高 | `28px` |
| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `var(--nutui-color-background-component)` |
| \--nutui-switch-inactive-line-background-color | 开关关闭状态内部按钮线条颜色 | `$color-primary-text` |
| \--nutui-switch-width | 开关宽度 | `56px` |
| \--nutui-switch-height | 开关高度 | `24px` |
| \--nutui-switch-inside-width | 开关内部按钮宽度 | `32px` |
| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
| \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
| \--nutui-switch-border-width | 开关边框宽度 | `2px` |
| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-circle` |
| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
| \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-xs` |
| \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |

<Contribution name="Switch" />
17 changes: 9 additions & 8 deletions src/packages/switch/doc.zh-TW.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,17 +101,18 @@ import { Switch } from '@nutui/nutui-react'
| \--nutui-switch-active-background-color | 開關打開狀態背景顏色 | `$color-primary` |
| \--nutui-switch-inactive-background-color | 開關關閉狀態背景顏色 | `$color-text-disabled` |
| \--nutui-switch-active-disabled-background-color | 開關打開狀態禁用的背景顏色 | `$color-primary-disabled-special` |
| \--nutui-switch-inactive-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `$color-background` |
| \--nutui-switch-inactive-line-bg-color | 開關關閉狀態內部按鈕線條顏色 | `#ffffff` |
| \--nutui-switch-width | 開關寬度 | `46px` |
| \--nutui-switch-height | 開關高度 | `28px` |
| \--nutui-switch-line-height | 開關行高 | `28px` |
| \--nutui-switch-inactive-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `var(--nutui-color-background-component)` |
| \--nutui-switch-inactive-line-background-color | 開關關閉狀態內部按鈕線條顏色 | `$color-primary-text` |
| \--nutui-switch-width | 開關寬度 | `56px` |
| \--nutui-switch-height | 開關高度 | `24px` |
| \--nutui-switch-inside-width | 開關內部按鈕寬度 | `32px` |
| \--nutui-switch-inside-height | 開關內部按鈕高度 | `20px` |
| \--nutui-switch-border-radius | 開關圓角大小 | `$radius-circle` |
| \--nutui-switch-border-width | 開關邊框寬度 | `2px` |
| \--nutui-switch-inside-border-radius | 開關內部按鈕圓角大小 | `$radius-full` |
| \--nutui-switch-inside-box-shadow | 開關內部按鈕陰影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
| \--nutui-switch-inside-border-radius | 開關內部按鈕圓角大小 | `$radius-circle` |
| \--nutui-switch-inside-box-shadow | 開關內部按鈕陰影 | `0px 4px 8px 0px rgba(0, 0, 0, 0.12)` |
| \--nutui-switch-label-text-color | 開關內部文字顏色 | `$color-primary-text` |
| \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-s` |
| \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-xs` |
| \--nutui-switch-inactive-disabled-label-text-color | 開關關閉禁用內部文字顏色 | `$color-text-disabled` |

<Contribution name="Switch" />
49 changes: 31 additions & 18 deletions src/packages/switch/switch.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
.nut-switch {
--nut-switch-height: #{$switch-height};
--nut-switch-inside-width: #{$switch-inside-width};
--nut-switch-border-width: #{$switch-border-width};
--nut-switch-label-margin-offset: calc(
var(--nut-switch-inside-width) + var(--nut-switch-border-width) + 3px
);

cursor: pointer;
position: relative;
/* #ifdef dynamic*/
Expand All @@ -11,13 +18,12 @@
align-items: center;
min-width: $switch-width;
height: $switch-height;
line-height: $switch-line-height;
background-color: $switch-active-background-color;
border-radius: $switch-border-radius;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
flex: 0 0 auto; // 防止被压缩
flex: 0 0 auto;

&-button {
position: absolute;
Expand All @@ -27,41 +33,48 @@
flex-direction: row;
align-items: center;
justify-content: center;
height: calc($switch-height - $switch-border-width * 2);
width: calc($switch-height - $switch-border-width * 2);
height: $switch-inside-height;
width: $switch-inside-width;
border-radius: $switch-inside-border-radius;
background: $color-primary-text;
transition: left 0.3s linear;
box-shadow: $switch-inside-box-shadow;
&-open {
left: calc(100% - $switch-height + $switch-border-width);
left: calc(
100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width)
);
&-rtl {
left: $switch-border-width;
left: var(--nut-switch-border-width);
}
}
&-close {
left: $switch-border-width;
left: var(--nut-switch-border-width);
&-rtl {
left: calc(100% - $switch-height + $switch-border-width);
left: calc(
100% - var(--nut-switch-inside-width) - var(--nut-switch-border-width)
);
}
}
.nut-icon {
width: calc(($switch-height - $switch-border-width * 2) / 2);
height: calc(($switch-height - $switch-border-width * 2) / 2);
color: $switch-active-disabled-background-color;
}
}

&-close {
background-color: $switch-inactive-background-color;
&-line {
width: calc(($switch-height - $switch-border-width * 2) / 2);
width: calc(
(var(--nut-switch-height) - var(--nut-switch-border-width) * 2) * 0.5
);
height: 2px;
background: $switch-inactive-line-background-color;
border-radius: 2px;
}
}

.nut-icon {
width: calc(var(--nut-switch-height) * 0.5);
height: calc(var(--nut-switch-height) * 0.5);
color: $switch-active-disabled-background-color;
}
Comment on lines +72 to +76

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

检查 icon 颜色语义:不应使用背景色 token 作为 icon 颜色。

Lines 72-76 将 .nut-icon 的颜色设置为 $switch-active-disabled-background-color,这在语义上不正确:

  • $switch-active-disabled-background-color 是一个背景颜色 token,用于禁用状态的背景
  • 作为 icon 颜色使用时,应该选择与按钮背景形成对比的文本/icon 颜色 token

相比之下,Line 91 的标签内 icon 正确使用了 $switch-label-text-color

建议修改

  • 如果 icon 在打开状态的按钮内,应使用与 $color-primary-text(按钮背景)对比的颜色,可能是 $color-primary 或新增的 icon 专用 token
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/packages/switch/switch.scss` around lines 72 - 76, The .nut-icon rule
currently uses the background token $switch-active-disabled-background-color
which is semantically wrong for icon color; update the .nut-icon selector to use
a proper text/icon color token (e.g. $switch-label-text-color or $color-primary,
or introduce a new $switch-icon-color token) so the icon contrasts with the
switch background; locate the .nut-icon block in switch.scss and replace the
color token accordingly to match the label icon usage on Line 91.


&-label {
/* #ifdef dynamic*/
display: flex;
Expand All @@ -78,16 +91,16 @@
color: $switch-label-text-color;
}
&-open {
margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
margin: 0 var(--nut-switch-label-margin-offset) 0 7px;
&-rtl {
margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
margin: 0 7px 0 var(--nut-switch-label-margin-offset);
}
}

&-close {
margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
margin: 0 7px 0 var(--nut-switch-label-margin-offset);
&-rtl {
margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
margin: 0 var(--nut-switch-label-margin-offset) 0 7px;
}
}

Expand Down
4 changes: 2 additions & 2 deletions src/styles/theme-dark.scss
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ page,
// --nutui-white-10: rgba(255, 255, 255, 0.7);
// --nutui-white-11: rgba(255, 255, 255, 0.8);
--nutui-white-12: rgba(31, 31, 31, 0.9);
// --nutui-white-13: rgba(255, 255, 255, 1);
--nutui-white-13: rgba(255, 255, 255, 1);

// 品牌颜色语义化
// 品牌主色调默认态,主要功能控件的背景、边框、镂空状态下的文字等
Expand All @@ -133,7 +133,7 @@ page,
// 品牌渐变色右端
--nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
// 品牌主色调或其他深色背景下的文字
--nutui-color-primary-text: var(--nutui-gray-1);
--nutui-color-primary-text: var(--nutui-white-13);
Comment thread
coderabbitai[bot] marked this conversation as resolved.
// 品牌主色调点击态,背景、边框、镂空状态下的文字
--nutui-color-primary-pressed: var(--nutui-red-7);
// 品牌主色调禁用态,背景、边框、镂空状态下的文字
Expand Down
2 changes: 1 addition & 1 deletion src/styles/theme-default.scss
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,7 @@ page {
// 品牌渐变色右端
--nutui-color-primary-stop-2: var(--nutui-brand-stop-2); // TODO 删掉
// 品牌主色调或其他深色背景下的文字
--nutui-color-primary-text: var(--nutui-gray-1);// TODO white
--nutui-color-primary-text: var(--nutui-white-13);
// 品牌主色调点击态,背景、边框、镂空状态下的文字
--nutui-color-primary-pressed: var(--nutui-red-7);
// 品牌主色调禁用态,背景、边框、镂空状态下的文字
Expand Down
31 changes: 11 additions & 20 deletions src/styles/variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -151,15 +151,15 @@ $color-border-disabled: var(--nutui-color-border-disabled, #c2c4cc) !default;
$color-title: var(--nutui-color-title, #1a1a1a) !default;
$color-text: var(--nutui-color-text, #505259) !default;
$color-text-help: var(--nutui-color-text-help, #888b94) !default;
$color-text-disabled: var(--nutui-color-text-disabled, #c2c4cc) !default;
$color-text-disabled: var(--nutui-color-text-disabled, #b4b8bf) !default;
$color-text-dark: var(
--nutui-color-text-dark,
rgba(255, 255, 255, 0.9)
) !default;
$color-text-link: var(--nutui-color-text-link, #0c82f7) !default;

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

Expand Down Expand Up @@ -1040,45 +1040,36 @@ $switch-active-disabled-background-color: var(
) !default;
$switch-inactive-disabled-background-color: var(
--nutui-switch-inactive-disabled-background-color,
$color-background
var(--nutui-color-background-component)
) !default;
$switch-inactive-line-background-color: var(
--nutui-switch-inactive-line-background-color,
#ffffff
$color-primary-text
) !default;
$switch-width: var(--nutui-switch-width, scale-px(46px)) !default;
$switch-height: var(--nutui-switch-height, scale-px(28px)) !default;
$switch-line-height: var(--nutui-switch-line-height, scale-px(28px)) !default;
$switch-width: var(--nutui-switch-width, scale-px(56px)) !default;
$switch-height: var(--nutui-switch-height, scale-px(24px)) !default;
$switch-inside-width: var(--nutui-switch-inside-width, scale-px(32px)) !default;
$switch-inside-height: var(--nutui-switch-inside-height, scale-px(20px)) !default;
$switch-border-radius: var(
--nutui-switch-border-radius,
$radius-circle
) !default;
$switch-border-width: var(--nutui-switch-border-width, scale-px(2px)) !default;
$switch-inside-border-radius: var(
--nutui-switch-inside-border-radius,
$radius-full
) !default;
/* #ifdef harmony */
$switch-inside-box-shadow: var(
--nutui-switch-inside-box-shadow,
0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1)
$radius-circle

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

验证 $radius-circle 的使用是否符合预期。

Line 1060 将 $switch-inside-border-radius$radius-full (50%) 改为 $radius-circle。但 $radius-circle 定义为 scale-px(50px)(一个具体的像素值),而非 50% 的相对值。当内部按钮尺寸不是完全正方形时(当前 32px×20px),这会导致视觉效果不同。

  • 如果 inside-width/height 的比例不是 1:1,使用 50px 的固定圆角可能无法形成正确的胶囊形。
  • 建议确认这是有意的设计变更,还是应该保持使用 $radius-full (50%) 以适配任何大小的内部按钮。
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/styles/variables.scss` at line 1060, 检查并修正 $switch-inside-border-radius
的取值:当前在 src/styles/variables.scss 用的是 $radius-circle(定义为 scale-px(50px) —— 固定
50px),这会在内部按钮非正方形(例如 32×20)时导致不正确的胶囊形。确认设计意图后要么将 $switch-inside-border-radius
恢复为 $radius-full(50% 相对值,能适配任意宽高),要么修改 $radius-circle 为相对值(如 50% 或新增
$radius-circle-percent)并替换使用处;定位符号参考
$switch-inside-border-radius、$radius-full、$radius-circle、scale-px(50px)。

) !default;
/* #endif */
/* #ifndef harmony */
$switch-inside-box-shadow: var(
--nutui-switch-inside-box-shadow,
0px scale-px(2px) scale-px(1px) 0px rgba(0, 0, 0, 0.06),
0px scale-px(2px) scale-px(6px) 0px rgba(0, 0, 0, 0.1),
0px 0px 0px scale-px(1px) rgba(0, 0, 0, 0.02)
0px scale-px(4px) scale-px(8px) 0px rgba(0, 0, 0, 0.12)
) !default;
/* #endif */
$switch-label-text-color: var(
--nutui-switch-label-text-color,
$color-primary-text
) !default;
$switch-label-font-size: var(
--nutui-switch-label-font-size,
$font-size-s
$font-size-xs
) !default;
$switch-inactive-disabled-label-text-color: var(
--nutui-switch-inactive-disabled-label-text-color,
Expand Down
Loading