@nutui/nutui-react 3.1.0-beta.1 → 4.0.0-beta.2

package/dist/style.scss

@@ -5,105 +5,105 @@
 @import './es/packages/virtuallist/style/virtuallist.scss';
 @import './es/packages/video/style/video.scss';
 @import './es/packages/uploader/style/uploader.scss';
-@import './es/packages/trendarrow/style/trendarrow.scss';
-@import './es/packages/toast/style/toast.scss';
 @import './es/packages/tour/style/tour.scss';
+@import './es/packages/toast/style/toast.scss';
+@import './es/packages/trendarrow/style/trendarrow.scss';
 @import './es/packages/timeselect/style/timeselect.scss';
 @import './es/packages/timedetail/style/timedetail.scss';
 @import './es/packages/textarea/style/textarea.scss';
 @import './es/packages/tag/style/tag.scss';
 @import './es/packages/tabs/style/tabs.scss';
-@import './es/packages/tabpane/style/tabpane.scss';
 @import './es/packages/table/style/table.scss';
+@import './es/packages/tabpane/style/tabpane.scss';
 @import './es/packages/tabbaritem/style/tabbaritem.scss';
 @import './es/packages/tabbar/style/tabbar.scss';
-@import './es/packages/switch/style/switch.scss';
 @import './es/packages/swiperitem/style/swiperitem.scss';
+@import './es/packages/switch/style/switch.scss';
+@import './es/packages/swiper/style/swiper.scss';
 @import './es/packages/swipe/style/swipe.scss';
 @import './es/packages/sticky/style/sticky.scss';
-@import './es/packages/swiper/style/swiper.scss';
-@import './es/packages/step/style/step.scss';
 @import './es/packages/steps/style/steps.scss';
+@import './es/packages/step/style/step.scss';
 @import './es/packages/space/style/space.scss';
-@import './es/packages/skeleton/style/skeleton.scss';
-@import './es/packages/sidebaritem/style/sidebaritem.scss';
 @import './es/packages/signature/style/signature.scss';
-@import './es/packages/shortpassword/style/shortpassword.scss';
+@import './es/packages/sidebaritem/style/sidebaritem.scss';
+@import './es/packages/skeleton/style/skeleton.scss';
 @import './es/packages/sidebar/style/sidebar.scss';
-@import './es/packages/segmented/style/segmented.scss';
+@import './es/packages/shortpassword/style/shortpassword.scss';
 @import './es/packages/searchbar/style/searchbar.scss';
+@import './es/packages/segmented/style/segmented.scss';
 @import './es/packages/safearea/style/safearea.scss';
 @import './es/packages/row/style/row.scss';
 @import './es/packages/resultpage/style/resultpage.scss';
-@import './es/packages/range/style/range.scss';
 @import './es/packages/rate/style/rate.scss';
+@import './es/packages/range/style/range.scss';
 @import './es/packages/radiogroup/style/radiogroup.scss';
-@import './es/packages/radio/style/radio.scss';
 @import './es/packages/quickenter/style/quickenter.scss';
 @import './es/packages/pulltorefresh/style/pulltorefresh.scss';
 @import './es/packages/progress/style/progress.scss';
+@import './es/packages/radio/style/radio.scss';
 @import './es/packages/price/style/price.scss';
 @import './es/packages/popup/style/popup.scss';
 @import './es/packages/popover/style/popover.scss';
-@import './es/packages/pickerview/style/pickerview.scss';
-@import './es/packages/pagination/style/pagination.scss';
 @import './es/packages/picker/style/picker.scss';
+@import './es/packages/pickerview/style/pickerview.scss';
 @import './es/packages/overlay/style/overlay.scss';
 @import './es/packages/numberkeyboard/style/numberkeyboard.scss';
 @import './es/packages/notify/style/notify.scss';
-@import './es/packages/menu/style/menu.scss';
+@import './es/packages/pagination/style/pagination.scss';
+@import './es/packages/navbar/style/navbar.scss';
 @import './es/packages/noticebar/style/noticebar.scss';
 @import './es/packages/menuitem/style/menuitem.scss';
 @import './es/packages/lottie/style/lottie.scss';
-@import './es/packages/navbar/style/navbar.scss';
 @import './es/packages/layout/style/layout.scss';
+@import './es/packages/menu/style/menu.scss';
 @import './es/packages/loading/style/loading.scss';
 @import './es/packages/inputnumber/style/inputnumber.scss';
 @import './es/packages/input/style/input.scss';
 @import './es/packages/infiniteloading/style/infiniteloading.scss';
 @import './es/packages/indicator/style/indicator.scss';
-@import './es/packages/imagepreview/style/imagepreview.scss';
 @import './es/packages/image/style/image.scss';
+@import './es/packages/imagepreview/style/imagepreview.scss';
 @import './es/packages/hoverbuttonitem/style/hoverbuttonitem.scss';
 @import './es/packages/hoverbutton/style/hoverbutton.scss';
-@import './es/packages/griditem/style/griditem.scss';
 @import './es/packages/grid/style/grid.scss';
+@import './es/packages/griditem/style/griditem.scss';
 @import './es/packages/formitem/style/formitem.scss';
-@import './es/packages/fixednav/style/fixednav.scss';
 @import './es/packages/form/style/form.scss';
 @import './es/packages/empty/style/empty.scss';
 @import './es/packages/ellipsis/style/ellipsis.scss';
+@import './es/packages/fixednav/style/fixednav.scss';
 @import './es/packages/elevator/style/elevator.scss';
-@import './es/packages/drag/style/drag.scss';
 @import './es/packages/divider/style/divider.scss';
+@import './es/packages/drag/style/drag.scss';
 @import './es/packages/dialog/style/dialog.scss';
-@import './es/packages/datepicker/style/datepicker.scss';
 @import './es/packages/datepickerview/style/datepickerview.scss';
+@import './es/packages/datepicker/style/datepicker.scss';
 @import './es/packages/countup/style/countup.scss';
-@import './es/packages/countdown/style/countdown.scss';
-@import './es/packages/collapseitem/style/collapseitem.scss';
 @import './es/packages/configprovider/style/configprovider.scss';
-@import './es/packages/col/style/col.scss';
+@import './es/packages/collapseitem/style/collapseitem.scss';
+@import './es/packages/countdown/style/countdown.scss';
 @import './es/packages/collapse/style/collapse.scss';
 @import './es/packages/circleprogress/style/circleprogress.scss';
 @import './es/packages/checkboxgroup/style/checkboxgroup.scss';
-@import './es/packages/cellgroup/style/cellgroup.scss';
+@import './es/packages/col/style/col.scss';
 @import './es/packages/checkbox/style/checkbox.scss';
-@import './es/packages/cascader/style/cascader.scss';
+@import './es/packages/cellgroup/style/cellgroup.scss';
 @import './es/packages/cell/style/cell.scss';
-@import './es/packages/calendaritem/style/calendaritem.scss';
 @import './es/packages/card/style/card.scss';
-@import './es/packages/calendarcard/style/calendarcard.scss';
+@import './es/packages/cascader/style/cascader.scss';
+@import './es/packages/calendaritem/style/calendaritem.scss';
 @import './es/packages/calendar/style/calendar.scss';
 @import './es/packages/button/style/button.scss';
 @import './es/packages/barrage/style/barrage.scss';
+@import './es/packages/calendarcard/style/calendarcard.scss';
 @import './es/packages/badge/style/badge.scss';
 @import './es/packages/backtop/style/backtop.scss';
-@import './es/packages/avatargroup/style/avatargroup.scss';
 @import './es/packages/avatarcropper/style/avatarcropper.scss';
-@import './es/packages/avatar/style/avatar.scss';
+@import './es/packages/avatargroup/style/avatargroup.scss';
+@import './es/packages/audio/style/audio.scss';
 @import './es/packages/animatingnumbers/style/animatingnumbers.scss';
 @import './es/packages/animate/style/animate.scss';
-@import './es/packages/audio/style/audio.scss';
+@import './es/packages/avatar/style/avatar.scss';
 @import './es/packages/address/style/address.scss';
 @import './es/packages/actionsheet/style/actionsheet.scss';

package/dist/styles/theme-daojia.scss

@@ -105,6 +105,12 @@ page {
   --nutui-black-12: rgba(0, 0, 0, 0.9);
   --nutui-black-13: rgba(0, 0, 0, 1);
 
+  // mask 梯度
+  --nutui-mask-1: rgba(17, 20, 26, 0.02);
+  --nutui-mask-2: rgba(17, 20, 26, 0.08);
+  --nutui-mask-3: rgba(17, 20, 26, 0.2);
+  --nutui-mask-4: rgba(17, 20, 26, 0.7);
+
   --nutui-white-1: rgba(255, 255, 255, 0);
   --nutui-white-2: rgba(255, 255, 255, 0.02);
   --nutui-white-3: rgba(255, 255, 255, 0.05);
@@ -138,8 +144,6 @@ page {
   --nutui-color-primary-light: var(--nutui-brand-1);
   // 品牌主色调镂空背景点击态
   --nutui-color-primary-light-pressed: var(--nutui-brand-2);
-  // 看上去命名和上边重复，去掉
-  // --nutui-color-primary-specialdisabled: var(--nutui-red-3);
 
   // service color 语义化
   // 金色背景
@@ -183,50 +187,38 @@ page {
   --nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字
 
   // 文字颜色值 语义化
-  --nutui-color-content-gray-1: var(--nutui-gray-4);
-  --nutui-color-content-gray-2: var(--nutui-gray-5);
-  --nutui-color-content-gray-3: var(--nutui-gray-6);
-  --nutui-color-content-gray-4: var(--nutui-gray-7);
   // 一级文字色（重要）
-  --nutui-color-title: var(--nutui-color-content-gray-4);
+  --nutui-color-title: var(--nutui-gray-7);
   // 二级文字色或可操作用色（常规）
-  --nutui-color-text: var(--nutui-color-content-gray-3);
+  --nutui-color-text: var(--nutui-gray-6);
   // 三级文字色（次要）
-  --nutui-color-text-help: var(--nutui-color-content-gray-2);
+  --nutui-color-text-help: var(--nutui-gray-5);
   // 四级文字色（不可操作）
-  --nutui-color-text-disabled: var(--nutui-color-content-gray-1);
+  --nutui-color-text-disabled: var(--nutui-gray-4);
 
   // 背景颜色值 语义化
-  --nutui-color-background-gray-1: var(--nutui-gray-1);
-  --nutui-color-background-gray-2: var(--nutui-gray-2);
-  --nutui-color-background-gray-3: var(--nutui-gray-3);
-  --nutui-color-background-gray-4: var(--nutui-gray-9);
   // 页面背景
-  --nutui-color-background: var(--nutui-color-background-gray-3);
+  --nutui-color-background: var(--nutui-gray-3);
   // 卡片背景
-  --nutui-color-background-overlay: var(--nutui-color-background-gray-1);
+  --nutui-color-background-overlay: var(--nutui-gray-1);
   // 卡片内容器背景
-  --nutui-color-background-sunken: var(--nutui-color-background-gray-2);
+  --nutui-color-background-sunken: var(--nutui-gray-2);
   // 组件背景，2025年新增
-  --nutui-color-background-component: var(--nutui-color-background-gray-4);
+  --nutui-color-background-component: var(--nutui-gray-9);
 
   // 蒙层颜色值 语义化
-  --nutui-color-mask-gray-1: var(--nutui-black-2);
-  --nutui-color-mask-gray-2: var(--nutui-black-7);
-  --nutui-color-mask-gray-3: var(--nutui-black-10);
   // 全部蒙层
-  --nutui-color-mask: var(--nutui-color-mask-gray-3);
+  --nutui-color-mask: var(--nutui-mask-4);
   // 局部弹层
-  --nutui-color-mask-part: var(--nutui-color-mask-gray-2);
+  --nutui-color-mask-part: var(--nutui-mask-3);
   // 容错弹层
-  --nutui-color-mask-fault-toleran: var(--nutui-color-mask-gray-1);
+  --nutui-color-mask-fault-toleran: var(--nutui-mask-1);
 
   // 线颜色值 语义化
-  --nutui-color-line-gray-1: var(--nutui-black-3);
   // 间隔线或容错线
-  --nutui-color-border: var(--nutui-color-line-gray-1);
+  --nutui-color-border: var(--nutui-mask-2);
   // 组件边框禁用色
-  --nutui-color-border-disabled: var(--nutui-color-content-gray-1);
+  --nutui-color-border-disabled: var(--nutui-gray-4);
 
   // 字体 ok
   --nutui-font-size-8: 8px;
@@ -252,20 +244,25 @@ page {
   // 字号语义化
   // 徽标文字
   --nutui-font-size-xxxs: var(--nutui-font-size-9);
-  // 标签内文字
+  // 标签文字；标签内金额
   --nutui-font-size-xxs: var(--nutui-font-size-10);
-  // 导购或信息密集的次要内容、辅助信息
+  // 次要注解；搭配同字号汉字或币种符号、角分
   --nutui-font-size-xs: var(--nutui-font-size-11);
-  // 汉字：次要内容、辅助类信息 数字：羊角符号、小数点及角分
-  --nutui-font-size-s: var(--nutui-font-size-12);
-  // 标准内容、名称类关键信息
+  // 辅助说明；狭小空间商品价格
+  --nutui-font-size-s: var(--nutui-font-size-13);
+  --nutui-font-size-m: var(--nutui-font-size-13);
+  // 正文；普通商卡价格
   --nutui-font-size-base: var(--nutui-font-size-14);
-  // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡
-  --nutui-font-size-l: var(--nutui-font-size-15);
+  // 楼层标题；重复型主价格（搜推、交易、订单）
+  --nutui-font-size-l: var(--nutui-font-size-16);
+  // l(15) 与 xl(18) 之间，价格整数 normal 等（16px，字阶缩放）
+  --nutui-font-size-md: var(--nutui-font-size-16);
   --nutui-font-size-icon: var(--nutui-font-size-16);
-  // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导
+  // 页面标题；模块级总价格（购物车、结算底部条）
   --nutui-font-size-xl: var(--nutui-font-size-18);
-  // 数字：页面级主价格，如商详、收银台
+  // xl(18) 与 xxl(24) 之间（20px）
+  --nutui-font-size-2xl: var(--nutui-font-size-20);
+  // 页面级重要价格（商详、收银台）
   --nutui-font-size-xxl: var(--nutui-font-size-24);
   // zanwu
   --nutui-font-size-xxxl: var(--nutui-font-size-26);
@@ -350,20 +347,30 @@ page {
   --nutui-radius-24: 24px;
 
   // radius 语义化
-  // 内容描述型的详情页面通栏结构
-  --nutui-radius-xxxs: var(--nutui-radius-0);
+  --nutui-radius-xxxs: var(--nutui-radius-0); // zanwu
+  // 平台型页面通栏卡片结构
+  --nutui-radius-xxs: var(--nutui-radius-0);
   // 标签
-  --nutui-radius-xxs: var(--nutui-radius-2);
-  // 单行高度20、24、28的组件
-  --nutui-radius-xs: var(--nutui-radius-4);
-  // 单行高度32、36的组件
-  --nutui-radius-s: var(--nutui-radius-6);
-  // 单行高度40及以上的组件
-  --nutui-radius-base: var(--nutui-radius-8);
-  // 入口型非通栏卡片
+  --nutui-radius-xs: var(--nutui-radius-2);
+  // 单行高度20至24的组件
+  --nutui-radius-s: var(--nutui-radius-4);
+  // 单行高度28至36的组件
+  --nutui-radius-base: var(--nutui-radius-6);
+  // 导购型页面卡片结构/单行高度40及以上的组件
   --nutui-radius-l: var(--nutui-radius-8);
-  // 结构分割、通栏卡片、临时操作层组件等场景
+  // 顶导/吐司提示等悬浮层小面积组件
   --nutui-radius-xl: var(--nutui-radius-12);
-  --nutui-radius-xxl: var(--nutui-radius-14); // zanwu
+  // 弹层/弹窗/底导等悬浮层中大面积组件
+  --nutui-radius-xxl: var(--nutui-radius-16);
   --nutui-radius-xxxl: var(--nutui-radius-16); // zanwu
+
+  // line-width 梯度
+  --nutui-line-1: 1px;
+  --nutui-line-2: 1.5px;
+
+  // line 语义化
+  // 标签边框
+  --nutui-line-tag: var(--nutui-line-1);
+  // 间隔线/组件边框
+  --nutui-line-component: var(--nutui-line-2);
 }

package/dist/styles/theme-dark-daojia.scss

@@ -104,6 +104,12 @@ page {
   --nutui-black-12: rgba(20, 20, 20, 0.9);
   --nutui-black-13: rgba(20, 20, 20, 1);
 
+  // mask 梯度
+  --nutui-mask-1: rgba(0, 0, 0, 0.1);
+  --nutui-mask-2: rgba(255, 255, 255, 0.12);
+  --nutui-mask-3: rgba(0, 0, 0, 0.2);
+  --nutui-mask-4: rgba(0, 0, 0, 0.7);
+
   --nutui-white-1: rgba(31, 31, 31, 0);
   // --nutui-white-2: rgba(255, 255, 255, 0.02);
   // --nutui-white-3: rgba(255, 255, 255, 0.05);
@@ -137,8 +143,6 @@ page {
   --nutui-color-primary-light: var(--nutui-brand-1);
   // 品牌主色调镂空背景点击态
   --nutui-color-primary-light-pressed: var(--nutui-red-2);
-  // 看上去命名和上边重复，去掉
-  // --nutui-color-primary-specialdisabled: var(--nutui-red-3);
 
   // service color 语义化
   // 金色背景
@@ -182,50 +186,38 @@ page {
   --nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字
 
   // 文字颜色值 语义化
-  --nutui-color-content-gray-1: var(--nutui-gray-4);
-  --nutui-color-content-gray-2: var(--nutui-gray-5);
-  --nutui-color-content-gray-3: var(--nutui-gray-6);
-  --nutui-color-content-gray-4: var(--nutui-gray-7);
   // 一级文字色（重要）
-  --nutui-color-title: var(--nutui-color-content-gray-4);
+  --nutui-color-title: var(--nutui-gray-7);
   // 二级文字色或可操作用色（常规）
-  --nutui-color-text: var(--nutui-color-content-gray-3);
+  --nutui-color-text: var(--nutui-gray-6);
   // 三级文字色（次要）
-  --nutui-color-text-help: var(--nutui-color-content-gray-2);
+  --nutui-color-text-help: var(--nutui-gray-5);
   // 四级文字色（不可操作）
-  --nutui-color-text-disabled: var(--nutui-color-content-gray-1);
+  --nutui-color-text-disabled: var(--nutui-gray-4);
 
   // 背景颜色值 语义化
-  --nutui-color-background-gray-1: var(--nutui-gray-1);
-  --nutui-color-background-gray-2: var(--nutui-gray-2);
-  --nutui-color-background-gray-3: var(--nutui-gray-3);
-  --nutui-color-background-gray-4: var(--nutui-gray-9);
   // 页面背景
-  --nutui-color-background: var(--nutui-color-background-gray-3);
+  --nutui-color-background: var(--nutui-gray-3);
   // 卡片背景
-  --nutui-color-background-overlay: var(--nutui-color-background-gray-1);
+  --nutui-color-background-overlay: var(--nutui-gray-1);
   // 卡片内容器背景
-  --nutui-color-background-sunken: var(--nutui-color-background-gray-2);
+  --nutui-color-background-sunken: var(--nutui-gray-2);
   // 组件背景，2025年新增
-  --nutui-color-background-component: var(--nutui-color-background-gray-4);
+  --nutui-color-background-component: var(--nutui-gray-9);
 
   // 蒙层颜色值 语义化
-  --nutui-color-mask-gray-1: var(--nutui-black-2);
-  --nutui-color-mask-gray-2: var(--nutui-black-7);
-  --nutui-color-mask-gray-3: var(--nutui-black-10);
   // 全部蒙层
-  --nutui-color-mask: var(--nutui-color-mask-gray-3);
+  --nutui-color-mask: var(--nutui-mask-4);
   // 局部弹层
-  --nutui-color-mask-part: var(--nutui-color-mask-gray-2);
+  --nutui-color-mask-part: var(--nutui-mask-3);
   // 容错弹层
-  --nutui-color-mask-fault-toleran: var(--nutui-color-mask-gray-1);
+  --nutui-color-mask-fault-toleran: var(--nutui-mask-1);
 
   // 线颜色值 语义化
-  --nutui-color-line-gray-1: var(--nutui-black-3);
   // 间隔线或容错线
-  --nutui-color-border: var(--nutui-color-line-gray-1);
+  --nutui-color-border: var(--nutui-mask-2);
   // 组件边框禁用色
-  --nutui-color-border-disabled: var(--nutui-color-content-gray-1);
+  --nutui-color-border-disabled: var(--nutui-gray-4);
 
   // 字体 ok
   --nutui-font-size-8: 8px;
@@ -251,19 +243,25 @@ page {
   // 字号语义化
   // 徽标文字
   --nutui-font-size-xxxs: var(--nutui-font-size-9);
-  // 标签内文字
+  // 标签文字；标签内金额
   --nutui-font-size-xxs: var(--nutui-font-size-10);
-  // 导购或信息密集的次要内容、辅助信息
+  // 次要注解；搭配同字号汉字或币种符号、角分
   --nutui-font-size-xs: var(--nutui-font-size-11);
-  // 汉字：次要内容、辅助类信息 数字：羊角符号、小数点及角分
-  --nutui-font-size-s: var(--nutui-font-size-12);
-  // 标准内容、名称类关键信息
+  // 辅助说明；狭小空间商品价格
+  --nutui-font-size-s: var(--nutui-font-size-13);
+  --nutui-font-size-m: var(--nutui-font-size-13);
+  // 正文；普通商卡价格
   --nutui-font-size-base: var(--nutui-font-size-14);
-  // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡
+  // 楼层标题；重复型主价格（搜推、交易、订单）
   --nutui-font-size-l: var(--nutui-font-size-16);
-  // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导
+  // l(15) 与 xl(18) 之间，价格整数 normal 等（16px，字阶缩放）
+  --nutui-font-size-md: var(--nutui-font-size-16);
+  --nutui-font-size-icon: var(--nutui-font-size-16);
+  // 页面标题；模块级总价格（购物车、结算底部条）
   --nutui-font-size-xl: var(--nutui-font-size-18);
-  // 数字：页面级主价格，如商详、收银台
+  // xl(18) 与 xxl(24) 之间（20px）
+  --nutui-font-size-2xl: var(--nutui-font-size-20);
+  // 页面级重要价格（商详、收银台）
   --nutui-font-size-xxl: var(--nutui-font-size-24);
   // zanwu
   --nutui-font-size-xxxl: var(--nutui-font-size-26);
@@ -346,20 +344,30 @@ page {
   --nutui-radius-24: 24px;
 
   // radius 语义化
-  // 内容描述型的详情页面通栏结构
-  --nutui-radius-xxxs: var(--nutui-radius-0);
+  --nutui-radius-xxxs: var(--nutui-radius-0); // zanwu
+  // 平台型页面通栏卡片结构
+  --nutui-radius-xxs: var(--nutui-radius-0);
   // 标签
-  --nutui-radius-xxs: var(--nutui-radius-2);
-  // 单行高度20、24、28的组件
-  --nutui-radius-xs: var(--nutui-radius-4);
-  // 单行高度32、36的组件
-  --nutui-radius-s: var(--nutui-radius-6);
-  // 单行高度40及以上的组件
-  --nutui-radius-base: var(--nutui-radius-8);
-  // 入口型非通栏卡片
+  --nutui-radius-xs: var(--nutui-radius-2);
+  // 单行高度20至24的组件
+  --nutui-radius-s: var(--nutui-radius-4);
+  // 单行高度28至36的组件
+  --nutui-radius-base: var(--nutui-radius-6);
+  // 导购型页面卡片结构/单行高度40及以上的组件
   --nutui-radius-l: var(--nutui-radius-8);
-  // 结构分割、通栏卡片、临时操作层组件等场景
+  // 顶导/吐司提示等悬浮层小面积组件
   --nutui-radius-xl: var(--nutui-radius-12);
-  --nutui-radius-xxl: var(--nutui-radius-14); // zanwu
+  // 弹层/弹窗/底导等悬浮层中大面积组件
+  --nutui-radius-xxl: var(--nutui-radius-16);
   --nutui-radius-xxxl: var(--nutui-radius-16); // zanwu
+
+  // line-width 梯度
+  --nutui-line-1: 1px;
+  --nutui-line-2: 1.5px;
+
+  // line 语义化
+  // 标签边框
+  --nutui-line-tag: var(--nutui-line-1);
+  // 间隔线/组件边框
+  --nutui-line-component: var(--nutui-line-2);
 }