@nutui/nutui-react-taro 3.0.0-beta.0 → 3.0.0-beta.10

package/dist/styles/variables.scss

@@ -1,150 +1,99 @@
 // ----------------------------------------------------
-// 主色调
-$color-primary: var(--nutui-color-primary, #ff0f23) !default;
+// 主色调 // done
+$color-primary: var(--nutui-brand-6) !default;
 $color-primary-stop-1: var(--nutui-color-primary-stop-1, #ff475d) !default;
 $color-primary-stop-2: var(--nutui-color-primary-stop-2, #ff0f23) !default;
 $color-primary-pressed: var(--nutui-color-primary-pressed, #e53029) !default;
-$color-primary-disabled: var(--nutui-color-primary-disabled, #ffadbe) !default;
-$color-primary-light: var(--nutui-color-primary-light, #ffebf1) !default;
-$color-primary-light-pressed: var(
-  --nutui-color-primary-light-pressed,
-  #ffebf1
-) !default;
+$color-primary-disabled: var(--nutui-color-primary-disabled, #c2c4cc) !default;
+$color-primary-disabled-special: var(--nutui-brand-3) !default;
+$color-primary-light-pressed: var(--nutui-brand-1) !default;
 $color-primary-gradient-1: linear-gradient(
   135deg,
   $color-primary-stop-1 0%,
   $color-primary-stop-2 100%
 ) !default;
+$color-primary-icon: var(--nutui-red-6) !default;
+$color-primary-icon-disabled: var(--nutui-gray-8) !default;
+$color-primary-specialdisabled: var(--nutui-red-3) !default;
 
-// 默认
+// 默认色
 $color-default: var(--nutui-color-default) !default;
 $color-default-pressed: var(--nutui-color-default-pressed) !default;
 $color-default-light: var(--nutui-color-default-light) !default;
 $color-default-disabled: var(--nutui-color-default-disabled) !default;
 
-// 信息
-$color-info: var(--nutui-color-info, #1988fa) !default;
+// 信息色
+$color-info: var(--nutui-color-info, #0073ff) !default; // done
 $color-info-pressed: var(--nutui-color-info-pressed, #496af2) !default;
 $color-info-disabled: var(--nutui-color-info-disabled, #89a6f8) !default;
-$color-info-light: var(--nutui-color-info-light) !default;
-$color-info-background: var(--nutui-color-info-background, #0073ff) !default;
-
-// 成功
-$color-success: var(--nutui-color-success, #2aa32a) !default;
-$color-success-pressed: var(--nutui-color-success-pressed) !default;
+$color-info-light: var(--nutui-color-info-light, #e5f5ff) !default; // done
+$color-info-background: var(
+  --nutui-color-info-background,
+  #0073ff
+) !default; // done
+$color-info-text: var(--nutui-color-info, #0073ff) !default; // done
+
+// 成功色
+$color-success: var(--nutui-green-2) !default; // done
+$color-success-pressed: var(--nutui-green-3) !default; // done
 $color-success-disabled: var(--nutui-color-success-disabled, #b2f0ae) !default;
-$color-success-light: var(--nutui-color-success-light, #ebfbeb) !default;
-$color-success-background: var(--nutui-color-success-background) !default;
+$color-success-light: var(--nutui-green-1) !default; // done
+$color-success-background: var(--nutui-green-2) !default; // done
+$color-success-text: var(--nutui-green-3) !default; // done
 
-// 警告
-$color-warning: var(--nutui-color-warning, #c47600) !default;
-$color-warning-pressed: var(--nutui-color-warning-pressed) !default;
+// 警告色
+$color-warning: var(--nutui-yellow-2) !default; // done
+$color-warning-pressed: var(--nutui-yellow-3) !default; // done
 $color-warning-disabled: var(--nutui-color-warning-disabled, #fdd3b9) !default;
-$color-warning-light: var(--nutui-color-warning-light) !default;
-$color-warning-background: var(--nutui-color-warning-background) !default;
+$color-warning-light: var(--nutui-yellow-1) !default; // done
+$color-warning-background: var(--nutui-yellow-2) !default; // done
+$color-warning-text: var(--nutui-yellow-3) !default; // done
 
-// 危险
-$color-danger: var(--nutui-color-danger, #ff0f23) !default;
+// 危险色
+$color-danger: var(--nutui-red-2) !default; //done
 $color-danger-pressed: var(--nutui-color-danger-pressed) !default;
 $color-danger-disabled: var(
   --nutui-color-danger-disabled,
-  $color-primary-disabled
-) !default;
-$color-danger-light: var(--nutui-color-danger-light) !default;
-$color-danger-background: var(--nutui-color-danger-background) !default;
-
-// 中性
-$color-dark: var(--nutui-gray-12) !default; // 分隔线
-$color-light: var(--nutui-gray-0) !default; // 输入框、头像边框等
-
-// 界面
-$color-surface-1: var(--nutui-gray-1) !default; // APP 的框架背景色
-$color-surface-2: var(--nutui-white-12) !default; // 卡片、内容容器背景色
-$color-surface-3: var(
-  --nutui-white-12
-) !default; // 3333	下拉菜单，即时反馈控件背景色
-$color-surface-4: var(--nutui-white-12) !default;
-$color-surface-overlay: var(--nutui-black-8) !default; // 	Mask遮罩
-
-// 边框
-$color-border: var(--nutui-black-3, rgba(0, 0, 0, 0.06)) !default;
-$color-border-disabled: var(--nutui-gray-4, #c2c4cc) !default;
-
-// 文本
-$color-title: var(
-  --nutui-gray-7,
-  #1a1a1a
-) !default; // 一级文字色：主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
-$color-text: var(
-  --nutui-gray-6,
-  #505259
-) !default; // 常规，二级文字色: 次要文字色，用于次级标题、属性标示、非主要信息引导等。
-$color-text-help: var(
-  --nutui-gray-5,
-  #888b94
-) !default; // 辅助色，三级文字色：暂无用到。todo
-$color-text-disabled: var(
-  --nutui-color-text-disabled,
-  #c2c4cc
-) !default; // 特殊禁用色
-$color-text-dark: var(--nutui-white-12) !default; //	深色背景下的反向文本色
-$color-text-link: $color-primary !default; //链接文本色
-$color-text-title: $color-title;
-
-// 字重
-$font-weight: var(--nutui-font-weight, 400) !default;
-$font-weight-bold: var(--nutui-font-weight-bold, 500) !default;
-
-// 行高
-$line-height-base: var(--nutui-line-height-base, 1.5) !default;
-
-// 间距 space
-$spacing-xxs: var(--nutui-spacing-2) !default; // 多用于文本与图标之间的间距
-$spacing-xs: var(--nutui-spacing-4) !default; // 多用于文本与图标之间的间距
-$spacing-s: var(--nutui-spacing-6) !default; // 二级卡片与屏幕两侧的间距
-$spacing-base: var(
-  --nutui-spacing-8
-) !default; // 楼层间距（二级卡片之间的上下间距）
-$spacing-l: var(
-  --nutui-spacing-10
-) !default; // 卡片布局容器中，同类信息组之间的上下间距（比如两行金刚位之间的间距）
-$spacing-xl: var(
-  --nutui-spacing-12
-) !default; // 卡片布局容器中，信息组之间的上下间距
-$spacing-xxl: var(--nutui-spacing-14) !default; // 卡片布局容器的内容左右间距，
-$spacing-xxxl: var(--nutui-spacing-16) !default; // 卡片布局容器的内容上下间距
-
-// 圆角 corners
-$radius-xxs: var(--nutui-radius-3) !default; // 标签
-$radius-xs: var(--nutui-radius-4) !default; // 单行高度16的组件
-$radius-s: var(--nutui-radius-6) !default; // 单行高度20的组件
-$radius-base: var(--nutui-radius-8) !default; // 单行高度24、28、32、36的组件
-$radius-l: var(--nutui-radius-12) !default; // 单行高度40以上的组件
-$radius-xl: var(--nutui-radius-16) !default; // 导购场景或一行多卡片
-$radius-xxl: var(--nutui-radius-20) !default; // 平台型通栏卡片
-$radius-xxxl: var(--nutui-radius-24) !default; // 页面结构分割或弹出层容器
-$radius-circle: 50px !default; // 按钮、徽标等组件的胶囊形态圆角样式
-$radius-full: 50% !default; // 头像、图片等不限制尺寸规格，需要以圆形呈现
-
-// 阴影 shadows
-$shadow-light: 0 0 4 0 rgba(0, 0, 0, 0.05) !default;
-$shadow-raised: 0 0 6 0 rgba(0, 0, 0, 0.1) !default;
-$shadow-overlay: 0 0 8 0 rgba(0, 0, 0, 0.2) !default;
+  $color-primary-disabled-special
+) !default;
+$color-danger-light: var(--nutui-red-1) !default; //done
+$color-danger-background: var(--nutui-color-danger-background) !default; //done
+$color-danger-text: var(--nutui-red-2) !default; //done
 
-// 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
-$color-background: var(--nutui-gray-3, #f5f6fa) !default;
+// 背景色
+$color-background: var(--nutui-gray-3) !default; //done
 // 卡片背景色
-$color-background-overlay: var(--nutui-gray-1, #ffffff) !default;
-// 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
-$color-background-sunken: var(--nutui-gray-2, #f7f8fc) !default;
+$color-background-overlay: var(--nutui-gray-1) !default;
+// 卡片内嵌背景色
+$color-background-sunken: var(
+  --nutui-color-background-sunken,
+  var(--nutui-gray-2)
+) !default;
 
 // 蒙层颜色
 // 页面全局蒙层
-$color-mask: var(--nutui-black-10, rgba(0, 0, 0, 0.7)) !default;
+$color-mask: var(--nutui-black-10) !default;
+// 局部蒙层
+$color-mask-part: var(--nutui-black-7) !default;
 // 容错蒙层
-$color-mask-part: var(--nutui-black-2, rgba(0, 0, 0, 0.02)) !default;
+$color-mask-fault-toleran: var(--nutui-black-2) !default;
+
+// 边框色
+$color-border: var(--nutui-black-3) !default;
+$color-border-disabled: var(--nutui-gray-4) !default;
 
-$spacing-icon-text: var(--nutui-spacing-2, 4px) !default;
+// 文本色
+$color-title: var(--nutui-gray-7) !default;
+$color-text: var(--nutui-gray-6) !default;
+$color-text-help: var(--nutui-gray-5) !default;
+$color-text-disabled: var(--nutui-gray-4) !default;
+$color-text-dark: var(--nutui-white-12) !default;
+$color-text-link: var(--nutui-blue-2) !default;
+
+// 与品牌色一起使用，默认为白色，不区分暗黑与明亮模式。
+$color-primary-text: #ffffff !default;
+$white: #ffffff !default;
+$black: #000000 !default;
 
 // ---- Font Family ----
 $font-family:
@@ -156,22 +105,58 @@ $font-family:
   sans-serif !default;
 
 // Font
-$font-size-xs: var(--nutui-font-size-1, 10px) !default;
-$font-size-small: var(--nutui-font-size-2, 12px) !default;
-$font-size-base: var(--nutui-font-size-3, 14px) !default;
-$font-size-large: var(--nutui-font-size-4, 16px) !default;
-$font-size-xl: var(--nutui-font-size-6, 20px) !default;
-$font-size-xxl: var(--nutui-font-size-8, 24px) !default;
-$font-size-xxxl: var(--nutui-font-size-10, 28px) !default;
-$font-size-xxxxl: var(--nutui-font-size-11, 32px) !default;
-
-// todo
-// 与品牌色一起使用，默认为白色，不区分暗黑与明亮模式。
-$color-primary-text: var(--nutui-color-primary-text, #ffffff) !default;
-// 链接色 todo
-$color-text-link: var(--nutui-color-text-link, #0073ff) !default;
-$white: #ffffff !default;
-$black: $color-title !default;
+$font-size-xxs: var(--nutui-font-size-xxs, 10px) !default;
+$font-size-xs: var(--nutui-font-size-xs, 11px) !default;
+$font-size-s: var(--nutui-font-size-s, 12px) !default;
+$font-size-base: var(--nutui-font-size-base, 14px) !default;
+$font-size-l: var(--nutui-font-size-l, 16px) !default;
+$font-size-xl: var(--nutui-font-size-xl, 18px) !default;
+$font-size-xxl: var(--nutui-font-size-xxl, 24px) !default;
+$font-size-xxxl: var(--nutui-font-size-10, 26px) !default;
+$font-size-xxxxl: var(--nutui-font-size-11, 28px) !default;
+
+// 字重 ok
+$font-weight-light: var(--nutui-font-weight-light, 300) !default;
+$font-weight: var(--nutui-font-weight, 400) !default;
+$font-weight-bold: var(--nutui-font-weight-bold, 600) !default;
+
+// 行高
+$line-height-base: var(--nutui-line-height-base, 1.5) !default;
+
+// 间距 space
+$spacing-xxxs: var(--nutui-spacing-xxxs, 2px) !default;
+$spacing-xxs: var(--nutui-spacing-xxs, 4px) !default;
+$spacing-xs: var(--nutui-spacing-xs, 6px) !default;
+$spacing-s: var(--nutui-spacing-s, 7px) !default;
+$spacing-base: var(--nutui-spacing-base, 8px) !default;
+$spacing-l: var(--nutui-spacing-l, 9px) !default;
+$spacing-xl: var(--nutui-spacing-xl, 12px) !default;
+$spacing-xxl: var(--nutui-spacing-xxl, 16px) !default;
+$spacing-xxxl: var(--nutui-spacing-xxxl, 18px) !default;
+
+// 圆角 corners ok
+$radius-xxxs: var(
+  --nutui-radius-xxxs,
+  0
+) !default; // 内容描述型的详情页面通栏结构
+$radius-xxs: var(--nutui-radius-xxs, 2px) !default; // 标签
+$radius-xs: var(--nutui-radius-xs, 4px) !default; // 单行高度20、24、28的组件
+$radius-s: var(--nutui-radius-s, 6px) !default; // 单行高度32、36的组件
+$radius-base: var(--nutui-radius-base, 8px) !default; // 单行高度40及以上的组件
+$radius-l: var(--nutui-radius-l, 8px) !default; // 入口型非通栏卡片
+$radius-xl: var(
+  --nutui-radius-xl,
+  12px
+) !default; // 结构分割、通栏卡片、临时操作层组件等场景
+$radius-xxl: var(--nutui-radius-xxl, 14px) !default; // 暂无
+$radius-xxxl: var(--nutui-radius-xxxl, 16px) !default; // 暂无
+$radius-circle: 50px !default; // 按钮、徽标等组件的胶囊形态圆角样式
+$radius-full: 50% !default; // 头像、图片等不限制尺寸规格，需要以圆形呈现
+
+// 阴影 shadows
+$shadow-light: 0 0 4 0 rgba(0, 0, 0, 0.05) !default;
+$shadow-raised: 0 0 6 0 rgba(0, 0, 0, 0.1) !default;
+$shadow-overlay: 0 0 8 0 rgba(0, 0, 0, 0.2) !default;
 
 // --- z-index ----
 $mask-z-index: 1000;
@@ -181,17 +166,14 @@ $mask-content-z-index: 1200;
 $animation-duration: 0.25s !default;
 $animation-timing-fun: cubic-bezier(0.55, 0.085, 0.68, 0.53) !default;
 
-// padding
-$padding-xs: var(--nutui-padding-xs, 12px) !default;
-
 // button（✅）
 $button-transition: opacity 0.2s;
 $button-square-border-radius: var(
   --nutui-button-square-border-radius,
   0
 ) !default;
-$button-border-radius: var(--nutui-button-border-radius, 8px) !default;
-$button-border-width: var(--nutui-button-border-width, 1px) !default;
+$button-border-radius: var(--nutui-button-border-radius, $radius-s) !default;
+$button-border-width: var(--nutui-button-border-width, 0.5px) !default;
 $button-normal-padding: var(--nutui-button-normal-padding, 0px 12px) !default;
 $button-default-height: var(--nutui-button-default-height, 32px) !default;
 $button-default-color: var(--nutui-button-default-color, $color-title) !default;
@@ -201,7 +183,7 @@ $button-default-background-color: var(
 ) !default;
 $button-default-border-color: var(
   --nutui-button-default-border-color,
-  $color-text
+  $color-text-disabled
 ) !default;
 $button-default-disabled: var(
   --nutui-button-default-disabled,
@@ -216,53 +198,53 @@ $button-default-font-size: var(
   --nutui-button-default-font-size,
   $font-size-base
 ) !default;
-$button-default-font-weight: var(
-  --nutui-button-default-font-weight,
-  $font-weight
-) !default;
 
 $button-xlarge-height: var(--nutui-button-xlarge-height, 48px) !default;
 $button-xlarge-padding: var(--nutui-button-xlarge-padding, 0px 24px) !default;
 $button-xlarge-font-size: var(
   --nutui-button-xlarge-font-size,
-  $font-size-xxl
+  $font-size-xl
+) !default;
+$button-xlarge-text-icon-margin: var(
+  --nutui-button-xlarge-text-icon-margin,
+  6px
+) !default;
+$button-xlarge-border-radius: var(
+  --nutui-button-xlarge-border-radius,
+  $radius-base
 ) !default;
 
 $button-large-height: var(--nutui-button-large-height, 40px) !default;
 $button-large-padding: var(--nutui-button-large-padding, 0px 16px) !default;
 $button-large-font-size: var(
   --nutui-button-large-font-size,
-  $font-size-large
-) !default;
-$button-large-font-weight: var(
-  --nutui-button-large-font-weight,
-  $font-weight-bold
+  $font-size-l
 ) !default;
 $button-large-border-radius: var(
   --nutui-button-large-border-radius,
-  12px
+  $radius-base
 ) !default;
 
 $button-small-font-size: var(
   --nutui-button-small-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $button-small-padding: var(--nutui-button-small-padding, 0px 8px) !default;
 $button-small-height: var(--nutui-button-small-height, 28px) !default;
 $button-small-border-radius: var(
   --nutui-button-small-border-radius,
-  8px
+  $radius-s
 ) !default;
 
 $button-mini-padding: var(--nutui-button-mini-padding, 0px 8px) !default;
 $button-mini-height: var(--nutui-button-mini-height, 24px) !default;
 $button-mini-font-size: var(
   --nutui-button-mini-font-size,
-  $font-size-small
+  $font-size-xs
 ) !default;
 $button-mini-border-radius: var(
   --nutui-button-mini-border-radius,
-  6px
+  $radius-xs
 ) !default;
 
 $button-primary-color: var(
@@ -273,16 +255,15 @@ $button-primary-border-color: var(
   --nutui-button-primary-border-color,
   $color-primary
 ) !default;
-$button-primary-background-color: $color-primary;
+$button-primary-background-color: linear-gradient(
+  90deg,
+  $color-primary-stop-1 0%,
+  $color-primary-stop-2 100%
+) !default;
 
-// linear-gradient(
-//   135deg,
-//   $color-primary-stop-1 0%,
-//   $color-primary-stop-2 100%
-// ) !default;
 $button-primary-disabled: var(
   --nutui-button-primary-disabled,
-  $color-primary-disabled
+  $color-primary-disabled-special
 ) !default;
 
 $button-success-color: var(
@@ -363,7 +344,7 @@ $cell-title-font-size: var(
 ) !default;
 $cell-description-font-size: var(
   --nutui-cell-description-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $cell-description-color: var(
   --nutui-cell-description-color,
@@ -419,7 +400,7 @@ $cell-group-description-color: var(
 ) !default;
 $cell-group-description-font-size: var(
   --nutui-cell-group-description-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $cell-group-description-line-height: var(
   --nutui-cell-group-description-line-height,
@@ -562,40 +543,34 @@ $input-border-bottom-width: var(
   --nutui-input-border-bottom-width,
   0px
 ) !default;
-$input-disabled-color: var(
-  --nutui-input-disabled-color,
-  $color-text-disabled
-) !default;
+// $input-disabled-color: var(
+//   --nutui-input-disabled-color,
+//   $color-text-disabled
+// ) !default;
 $input-font-size: var(--nutui-input-font-size, $font-size-base) !default;
-$input-border-radius: var(--nutui-input-border-radius, 0) !default;
-$input-color: var(--nutui-input-color, $color-title) !default;
+$input-border-radius: var(--nutui-input-border-radius, $radius-s) !default;
+// $input-color: var(--nutui-input-color, $color-title) !default;
 $input-background-color: var(
   --nutui-input-background-color,
   $color-background-overlay
 ) !default;
-$input-padding: var(--nutui-input-padding, 10px 25px) !default;
+$input-padding: var(--nutui-input-padding, 12px) !default;
 
 // textarea（✅）
-$textarea-font: var(--nutui-textarea-font, $font-size-base) !default;
-$textarea-padding: var(--nutui-textarea-padding, 10px 25px) !default;
-$textarea-limit-color: var(--nutui-textarea-limit-color, $color-text) !default;
+$textarea-padding: var(--nutui-textarea-padding, 12px) !default;
 $textarea-text-color: var(--nutui-textarea-text-color, $color-title) !default;
 $textarea-text-curror-color: var(
   --nutui-textarea-text-curror-color,
-  $color-title
+  $color-primary
 ) !default;
 $textarea-text-line-height: var(
   --nutui-textarea-text-line-height,
-  30px
-) !default;
-$textarea-disabled-color: var(
-  --nutui-textarea-disabled-color,
-  $color-text-disabled
+  20px
 ) !default;
 
 // inputnumber（✅）
-$inputnumber-input-width: var(--nutui-inputnumber-input-width, 60px) !default;
-$inputnumber-input-height: var(--nutui-inputnumber-input-height, 24px) !default;
+$inputnumber-input-width: var(--nutui-inputnumber-input-width, 26px) !default;
+$inputnumber-input-height: var(--nutui-inputnumber-input-height, 20px) !default;
 $inputnumber-input-background-color: var(
   --nutui-inputnumber-input-background-color,
   $color-background
@@ -606,22 +581,18 @@ $inputnumber-input-font-color: var(
 ) !default;
 $inputnumber-input-font-size: var(
   --nutui-inputnumber-input-font-size,
-  14px
+  $font-size-s
 ) !default;
 $inputnumber-input-border: var(--nutui-inputnumber-input-border, 0) !default;
 $inputnumber-input-border-radius: var(
   --nutui-inputnumber-input-border-radius,
-  6px
+  4px
 ) !default;
-$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0) !default;
-$inputnumber-button-width: var(--nutui-inputnumber-button-width, 14px) !default;
+$inputnumber-input-margin: var(--nutui-inputnumber-input-margin, 0px) !default;
+$inputnumber-button-width: var(--nutui-inputnumber-button-width, 20px) !default;
 $inputnumber-button-height: var(
   --nutui-inputnumber-button-height,
-  24px
-) !default;
-$inputnumber-button-border-radius: var(
-  --nutui-inputnumber-button-border-radius,
-  16px
+  20px
 ) !default;
 $inputnumber-button-background-color: var(
   --nutui-inputnumber-button-background-color,
@@ -714,7 +685,7 @@ $numberkeyboard-header-close-background-color: var(
 ) !default;
 $numberkeyboard-key-background-color: var(
   --nutui-numberkeyboard-key-background-color,
-  #fff
+  $color-background-overlay
 ) !default;
 $numberkeyboard-key-active-background-color: var(
   --nutui-numberkeyboard-key-active-background-color,
@@ -746,7 +717,7 @@ $numberkeyboard-key-color: var(
 ) !default;
 $numberkeyboard-key-confirm-font-size: var(
   --nutui-numberkeyboard-key-confirm-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $numberkeyboard-key-confirm-color: var(
   --nutui-numberkeyboard-key-confirm-color,
@@ -760,70 +731,91 @@ $numberkeyboard-key-confirm-background-color: var(
 // countdown（✅）
 $countdown-display: var(--nutui-countdown-display, flex) !default;
 $countdown-color: var(--nutui-countdown-color, $color-primary) !default;
-$countdown-font-size: var(--nutui-countdown-font-size, 10px) !default;
-$coutdown-font-weight: var(--nutui-countdown-font-weight, 400) !default;
-$countdown-height: var(--nutui-countdown-height, 14px) !default;
-$countdown-width: var(--nutui-countdown-width, 20px) !default;
-$countdown-number-padding: var(
-  --nutui-countdown-number-padding,
-  0 1px
+$countdown-font-size: var(--nutui-countdown-font-size, $font-size-xs) !default;
+$coutdown-font-weight: var(
+  --nutui-countdown-font-weight,
+  $font-weight
 ) !default;
+$countdown-height: var(--nutui-countdown-height, 16px) !default;
+$countdown-width: var(--nutui-countdown-width, 16px) !default;
+$countdown-number-padding: var(--nutui-countdown-number-padding, 0 0) !default;
 $countdown-number-border-radius: var(
   --nutui-countdown-number-border-radius,
-  2px
-) !default;
-$countdown-number-margin: var(--nutui-countdown-number-margin, 0 2px) !default;
-$countdown-number-border-color: var(
-  --nutui-countdown-number-border-color,
-  $color-primary-light
+  $radius-xxs
 ) !default;
+$countdown-number-margin: var(--nutui-countdown-number-margin, 0 1px) !default;
 $countdown-number-color: var(
   --nutui-countdown-number-color,
   $color-primary
 ) !default;
 $countdown-number-background-color: var(
   --nutui-countdown-number-background-color,
-  transparent
+  $color-background-overlay
 ) !default;
-$countdown-number-primary-border-color: var(
-  --nutui-countdown-number-primary-border-color,
-  $color-primary
+$countdown-number-border-color: var(
+  --nutui-countdown-number-border-color,
+  $color-primary-specialdisabled
 ) !default;
 $countdown-number-primary-color: var(
   --nutui-countdown-number-primary-color,
-  #ffffff
+  $color-primary-text
 ) !default;
 $countdown-number-primary-background-color: var(
   --nutui-countdown-number-primary-background-color,
   $color-primary
 ) !default;
+$countdown-number-primary-border-color: var(
+  --nutui-countdown-number-primary-border-color,
+  $color-primary
+) !default;
 
-//large price（✅）
+//price（✅）
+$price-primary-color: var(--nutui-price-color, $color-primary) !default;
+$price-color: var(--nutui-price-color, var(--nutui-color-text-help)) !default;
+$price-darkgray-color: var(
+  --nutui-price-darkgray-color,
+  var(--nutui-gray-7)
+) !default;
+$price-line-color: var(
+  --nutui-price-line-color,
+  var(--nutui-color-text-help)
+) !default;
 $price-symbol-padding-right: var(
   --nutui-price-symbol-padding-right,
-  1px
+  0px
 ) !default;
-$price-symbol-big-size: var(--nutui-price-symbol-big-size, 18px) !default;
-$price-integer-big-size: var(--nutui-price-integer-big-size, 24px) !default;
-$price-decimal-big-size: var(--nutui-price-decimal-big-size, 18px) !default;
+
+//xlarge price（✅）
+$price-symbol-xlarge-size: var(--nutui-price-symbol-xlarge-size, 12px) !default;
+$price-integer-xlarge-size: var(
+  --nutui-price-integer-xlarge-size,
+  24px
+) !default;
+$price-decimal-xlarge-size: var(
+  --nutui-price-decimal-xlarge-size,
+  12px
+) !default;
+
+//large price（✅）
+$price-symbol-large-size: var(--nutui-price-symbol-large-size, 12px) !default;
+$price-integer-large-size: var(--nutui-price-integer-large-size, 18px) !default;
+$price-decimal-large-size: var(--nutui-price-decimal-large-size, 12px) !default;
 
 //normal price（✅）
-$price-line-color: var(--nutui-price-line-color, $color-border) !default;
-$price-line-font-size: var(--nutui-price-line-font-size, 12px) !default;
-$price-symbol-medium-size: var(--nutui-price-symbol-medium-size, 14px) !default;
-$price-integer-medium-size: var(
-  --nutui-price-integer-medium-size,
+$price-symbol-normal-size: var(--nutui-price-symbol-normal-size, 12px) !default;
+$price-integer-normal-size: var(
+  --nutui-price-integer-normal-size,
   16px
 ) !default;
-$price-decimal-medium-size: var(
-  --nutui-price-decimal-medium-size,
-  14px
+$price-decimal-normal-size: var(
+  --nutui-price-decimal-normal-size,
+  12px
 ) !default;
 
 // small price（✅）
-$price-symbol-small-size: var(--nutui-price-symbol-small-size, 10px) !default;
+$price-symbol-small-size: var(--nutui-price-symbol-small-size, 12px) !default;
 $price-integer-small-size: var(--nutui-price-integer-small-size, 12px) !default;
-$price-decimal-small-size: var(--nutui-price-decimal-small-size, 10px) !default;
+$price-decimal-small-size: var(--nutui-price-decimal-small-size, 12px) !default;
 
 //avatar（✅）
 $avatar-square: var(--nutui-avatar-square, 5px) !default;
@@ -835,47 +827,63 @@ $avatar-normal-width: var(--nutui-avatar-normal-width, 40px) !default;
 $avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default;
 
 //switch（✅）
-$switch-close-background-color: var(
-  --nutui-switch-close-background-color,
+$switch-active-background-color: var(
+  --nutui-switch-active-background-color,
+  $color-primary
+) !default;
+$switch-inactive-background-color: var(
+  --nutui-switch-inactive-background-color,
   $color-text-disabled
 ) !default;
-$switch-open-background-color: var(
-  --nutui-switch-open-background-color,
-  $color-primary
+$switch-active-disabled-background-color: var(
+  --nutui-switch-active-disabled-background-color,
+  $color-primary-disabled-special
 ) !default;
-$switch-close-disabled-background-color: var(
-  --nutui-switch-close-disabled-background-color,
+$switch-inactive-disabled-background-color: var(
+  --nutui-switch-inactive-disabled-background-color,
   $color-background
 ) !default;
-$switch-open-disabled-background-color: var(
-  --nutui-switch-open-disabled-background-color,
-  $color-primary-disabled
+$switch-inactive-line-background-color: var(
+  --nutui-switch-inactive-line-background-color,
+  #ffffff
 ) !default;
-$switch-close-line-background-color: var(
-  --nutui-switch-close-line-background-color,
-  #fff
+$switch-width: var(--nutui-switch-width, 46px) !default;
+$switch-height: var(--nutui-switch-height, 28px) !default;
+$switch-line-height: var(--nutui-switch-line-height, 28px) !default;
+$switch-border-radius: var(
+  --nutui-switch-border-radius,
+  $radius-circle
 ) !default;
-$switch-width: var(--nutui-switch-width, 40px) !default;
-$switch-height: var(--nutui-switch-height, 24px) !default;
-$switch-line-height: var(--nutui-switch-line-height, 24px) !default;
-$switch-border-radius: var(--nutui-switch-border-radius, 8px) !default;
-$switch-inside-width: var(--nutui-switch-inside-width, 20px) !default;
-$switch-inside-height: var(--nutui-switch-inside-height, 20px) !default;
+$switch-border-width: var(--nutui-switch-border-width, 2px) !default;
 $switch-inside-border-radius: var(
   --nutui-switch-inside-border-radius,
-  $radius-s
-) !default;
-$switch-inside-open-transform: var(
-  --nutui-switch-inside-open-transform,
-  translateX(18px)
+  $radius-full
+) !default;
+/* #ifdef harmony */
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1)
+) !default;
+/* #endif */
+/* #ifndef harmony */
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 1px 0px rgba(0, 0, 0, 0.06),
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1),
+  0px 0px 0px 1px rgba(0, 0, 0, 0.02)
+) !default;
+/* #endif */
+$switch-label-text-color: var(
+  --nutui-switch-label-text-color,
+  $color-primary-text
 ) !default;
-$switch-inside-close-transform: var(
-  --nutui-switch-inside-close-transform,
-  translateX(2px)
+$switch-label-font-size: var(
+  --nutui-switch-label-font-size,
+  $font-size-s
 ) !default;
-$switch-button-box-shadow: var(
-  --nutui-switch-box-shadow,
-  0 0 transparent
+$switch-inactive-disabled-label-text-color: var(
+  --nutui-switch-inactive-disabled-label-text-color,
+  $color-text-disabled
 ) !default;
 
 // toast（✅）
@@ -883,11 +891,11 @@ $toast-inner-text-align: var(--nutui-toast-inner-text-align, center) !default;
 $toast-title-font-size: var(--nutui-toast-title-font-size, 16px) !default;
 $toast-text-font-size: var(--nutui-toast-text-font-size, 14px) !default;
 $toast-font-color: var(--nutui-toast-font-color, $white) !default;
-$toast-inner-padding: var(--nutui-toast-inner-padding, 16px 24px) !default;
+$toast-inner-padding: var(--nutui-toast-inner-padding, 13px 16px) !default;
 $toast-inner-bg-color: var(--nutui-toast-inner-bg-color, $color-mask) !default;
 $toast-inner-border-radius: var(
   --nutui-toast-inner-border-radius,
-  16px
+  $radius-xl
 ) !default;
 $toast-inner-top: var(--nutui-toast-inner-top, 50%) !default;
 
@@ -924,12 +932,6 @@ $tour-content-bottom-btn-border-radius: var(
   4px
 ) !default;
 
-//backtop（✅）
-$backtop-border-color: var(
-  --nutui-backtop-border-color,
-  $color-border
-) !default;
-
 // calendar（✅）
 $calendar-active-background-color: var(
   --nutui-calendar-active-background-color,
@@ -937,7 +939,7 @@ $calendar-active-background-color: var(
 ) !default;
 $calendar-choose-background-color: var(
   --nutui-calendar-choose-background-color,
-  $color-primary-light
+  $color-primary-light-pressed
 ) !default;
 $calendar-choose-color: var(
   --nutui-calendar-choose-color,
@@ -953,7 +955,7 @@ $calendar-disable-color: var(
 ) !default;
 $calendar-base-font-size: var(
   --nutui-calendar-base-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $calendar-title-font-size: var(
   --nutui-calendar-title-font-size,
@@ -980,37 +982,35 @@ $calendar-day-active-border-radius: var(
 ) !default;
 
 //hoverbutton
-$hoverbutton-spacing: var(
-  --nutui-hoverbutton-spacing,
-  var(--nutui-spacing-16, 16px)
-) !default;
+$hoverbutton-spacing: var(--nutui-hoverbutton-spacing, $spacing-base) !default;
 $hoverbutton-position-bottom: var(
   --nutui-hoverbutton-position-bottom,
-  48px
+  60px
 ) !default;
 $hoverbutton-position-right: var(
   --nutui-hoverbutton-position-right,
-  var(--nutui-spacing-16, 16px)
+  $spacing-base
 ) !default;
+$hoverbutton-item-size: var(--nutui-hoverbutton-item-size, 40px) !default;
 $hoverbutton-item-border-color: var(
   --nutui-hoverbutton-item-border-color,
-  var(--nutui-black-3, rgba(0, 0, 0, 0.06))
+  rgba(0, 0, 0, 0.12)
 ) !default;
 $hoverbutton-item-background: var(
   --nutui-hoverbutton-item-background,
-  var(--nutui-gray-1, #ffffff)
+  var(--nutui-white-12)
 ) !default;
 $hoverbutton-item-background-active: var(
   --nutui-hoverbutton-item-background-active,
-  var(--nutui-gray-3, #f6f6f6)
+  rgba(247, 248, 252, 0.9)
 ) !default;
 $hoverbutton-item-icon-color: var(
   --nutui-hoverbutton-item-icon-color,
-  var(--nutui-gray-7, #1a1a1a)
+  $color-title
 ) !default;
 $hoverbutton-item-icon-color-active: var(
   --nutui-hoverbutton-item-icon-color-active,
-  var(--nutui-gray-6, #595959)
+  $color-title
 ) !default;
 
 //overlay（✅）
@@ -1029,30 +1029,28 @@ $overlay-animation-duration: var(
   0.3s
 ) !default;
 //popup（✅）
-$popup-border-radius: var(--nutui-popup-border-radius, 24px) !default;
-$popup-icon-size: var(--nutui-popup-icon-size, $font-size-xl) !default;
+$popup-border-radius: var(--nutui-popup-border-radius, $radius-xl) !default;
+$popup-icon-size: var(--nutui-popup-icon-size, 20px) !default;
 $popup-title-padding: var(--nutui-popup-title-padding, 16px) !default;
 $popup-title-font-size: var(
   --nutui-popup-title-font-size,
-  $font-size-xl
+  $font-size-l
 ) !default;
-$popup-description-font-size: var(
-  --nutui-popup-description-font-size,
-  $font-size-xs
+$popup-title-font-weight: var(
+  --nutui-popup-title-font-weight,
+  $font-weight-bold
 ) !default;
-$popup-title-height: var(--nutui-popup-title-height, 50px) !default;
-$popup-title-border-bottom: var(--nutui-popup-title-border-bottom, 0) !default;
-$popup-animation-duration: var(--nutui-popup-animation-duration, 0.3s) !default;
-$popup-icon-size: var(--nutui-popup-icon-size, $font-size-xl) !default;
 $popup-description-font-size: var(
   --nutui-popup-description-font-size,
-  $font-size-xs
+  $font-size-base
 ) !default;
-$popup-title-font-weight: var(
-  --nutui-popup-title-font-weight,
-  $font-weight-bold
+$popup-description-spacing: var(
+  --nutui-popup-description-spacing,
+  $spacing-base
 ) !default;
 $popup-title-height: var(--nutui-popup-title-height, 50px) !default;
+$popup-title-border-bottom: var(--nutui-popup-title-border-bottom, 0) !default;
+$popup-animation-duration: var(--nutui-popup-animation-duration, 0.3s) !default;
 
 // Notify（✅）
 $notify-text-color: var(--nutui-notify-text-color, $white) !default;
@@ -1081,12 +1079,15 @@ $notify-warning-background-color: var(
 ) !default;
 
 // rate（✅）
-$rate-item-margin: var(--nutui-rate-item-margin, 14px) !default;
-$rate-icon-color: var(--nutui-rate-icon-color, $color-primary) !default;
+$rate-item-margin: var(--nutui-rate-item-margin, 4px) !default;
+$rate-icon-color: var(--nutui-rate-icon-color, $color-primary-icon) !default;
 $rate-icon-inactive-color: var(
   --nutui-rate-icon-inactive-color,
-  $color-text-disabled
+  $color-primary-icon-disabled
 ) !default;
+$rate-icon-size: var(--nutui-rate-icon-size, 12px) !default;
+$rate-font-color: var(--nutui-rate-font-color, $color-primary-icon) !default;
+$rate-font-size: var(--nutui-rate-font-size, 12px) !default;
 
 // tabbar（✅）
 $tabbar-height: var(--nutui-tabbar-height, 50px) !default;
@@ -1107,7 +1108,7 @@ $tabbar-text-font-size: var(
 ) !default;
 $tabbar-text-large-font-size: var(
   --nutui-tabbar-text-large-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $tabbar-text-large-font-weight: var(
   --nutui-tabbar-text-large-font-weight,
@@ -1144,7 +1145,7 @@ $range-height: var(--nutui-range-height, 4px) !default;
 $range-margin: var(--nutui-range-margin, 15px) !default;
 $range-inactive-color: var(
   --nutui-range-inactive-color,
-  $color-primary-light
+  $color-primary-light-pressed
 ) !default;
 $range-active-color: var(--nutui-range-active-color, $color-primary) !default;
 $range-button-background: var(
@@ -1181,7 +1182,7 @@ $steps-base-icon-margin-bottom: var(
 ) !default;
 $steps-base-icon-font-size: var(
   --nutui-steps-base-icon-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $steps-base-line-width: var(--nutui-steps-base-line-width, 70%) !default;
 $steps-base-line-height: var(--nutui-steps-base-line-height, 1px) !default;
@@ -1203,7 +1204,7 @@ $steps-base-title-margin-bottom: var(
 ) !default;
 $steps-base-description-font-size: var(
   --nutui-steps-base-description-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $steps-base-description-color: var(
   --nutui-steps-base-description-color,
@@ -1296,17 +1297,15 @@ $steps-dot-head-margin: var(--nutui-steps-dot-head-margin, 10px 0) !default;
 
 // dialog（✅）
 $dialog-z-index: var(--nutui-dialog-z-index, $mask-content-z-index) !default;
+$dialog-min-width: var(--nutui-dialog-min-width, 240px) !default;
 $dialog-width: var(--nutui-dialog-width, 295px) !default;
 $dialog-padding: var(--nutui-dialog-padding, 24px) !default;
+$dialog-max-height: var(--nutui-dialog-max-height, 420px) !default;
 $dialog-min-height: var(--nutui-dialog-min-height, 124px) !default;
-$dialog-border-radius: var(--nutui-dialog-border-radius, 16px) !default;
-$dialog-footer-justify-content: var(
-  --nutui-dialog-footer-justify-content,
-  space-around
-) !default;
+$dialog-border-radius: var(--nutui-dialog-border-radius, $radius-xl) !default;
 $dialog-content-margin: var(
   --nutui-dialog-content-margin,
-  5px 0 24px 0
+  12px 0 16px 0
 ) !default;
 $dialog-content-max-height: var(
   --nutui-dialog-content-max-height,
@@ -1334,19 +1333,23 @@ $dialog-footer-ok-max-width: var(
 ) !default;
 $dialog-header-font-size: var(
   --nutui-dialog-header-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $dialog-header-font-weight: var(
   --nutui-dialog-header-font-weight,
-  normal
+  $font-weight-bold
 ) !default;
 $dialog-vertical-footer-ok-margin-top: var(
   --nutui-dialog-vertical-footer-ok-margin-top,
-  5px
+  16px
 ) !default;
 $dialog-close-color: var(--nutui-dialog-close-color, #ffffff) !default;
-$dialog-close-width: var(--nutui-dialog-close-width, 18px) !default;
-$dialog-close-height: var(--nutui-dialog-close-height, 18px) !default;
+$dialog-close-width: var(--nutui-dialog-close-width, 16px) !default;
+$dialog-close-height: var(--nutui-dialog-close-height, 16px) !default;
+$dialog-bottom-close-icon-size: var(
+  --nutui-dialog-bottom-close-icon-size,
+  24px
+) !default;
 $dialog-close-top: var(--nutui-dialog-close-top, 16px) !default;
 $dialog-close-left: var(--nutui-dialog-close-left, 16px) !default;
 $dialog-close-right: var(--nutui-dialog-close-right, 16px) !default;
@@ -1362,20 +1365,20 @@ $checkbox-icon-disable-color: var(
 ) !default;
 $checkbox-label-margin-left: var(
   --nutui-checkbox-label-margin-left,
-  $spacing-icon-text
+  $spacing-xxs
 ) !default;
 $checkbox-label-color: var(--nutui-checkbox-label-color, $color-title) !default;
 $checkbox-label-font-size: var(
   --nutui-checkbox-label-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $checkbox-icon-font-size: var(
   --nutui-checkbox-icon-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $checkbox-button-font-size: var(
   --nutui-checkbox-button-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $checkbox-button-color: $color-text;
 $checkbox-button-background: $color-background;
@@ -1410,10 +1413,7 @@ $checkbox-list-item-padding: var(
 ) !default;
 
 //radio（✅）
-$radio-icon-font-size: var(
-  --nutui-radio-icon-font-size,
-  $font-size-large
-) !default;
+$radio-icon-font-size: var(--nutui-radio-icon-font-size, $font-size-l) !default;
 $radio-label-color: var(--nutui-radio-label-color, $color-title) !default;
 $radio-label-disable-color: var(
   --nutui-radio-label-disable-color,
@@ -1421,12 +1421,12 @@ $radio-label-disable-color: var(
 ) !default;
 $radio-label-font-size: var(
   --nutui-radio-label-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $radio-label-margin-left: var(--nutui-radio-label-margin-left, 4px) !default;
 $radio-button-font-size: var(
   --nutui-radio-button-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $radio-button-color: $color-text;
 $radio-button-padding: var(--nutui-radio-button-padding, 5px 18px) !default;
@@ -1495,10 +1495,7 @@ $noticebar-background: var(
   rgba(251, 248, 220, 1)
 ) !default;
 $noticebar-color: var(--nutui-noticebar-color, #d9500b) !default;
-$noticebar-font-size: var(
-  --nutui-noticebar-font-size,
-  $font-size-small
-) !default;
+$noticebar-font-size: var(--nutui-noticebar-font-size, $font-size-s) !default;
 $noticebar-line-height: var(--nutui-noticebar-line-height, 24px) !default;
 $noticebar-box-padding: var(--nutui-noticebar-box-padding, 0 16px) !default;
 $noticebar-border-radius: var(--nutui-noticebar-border-radius, 0) !default;
@@ -1536,7 +1533,7 @@ $timeselect-time-background: var(
 
 //tag（✅）
 $tag-padding: var(--nutui-tag-padding, 0px 2px) !default;
-$tag-font-size: var(--nutui-tag-font-size, $font-size-xs) !default;
+$tag-font-size: var(--nutui-tag-font-size, $font-size-xxs) !default;
 $tag-border-radius: var(--nutui-tag-border-radius, 2px) !default;
 $tag-height: var(--nutui-tag-height, 14px) !default;
 $tag-color: var(--nutui-tag-color, #ffffff) !default;
@@ -1572,36 +1569,43 @@ $tag-mark-border-radius: var(
 $badge-height: var(--nutui-badge-height, 14px) !default;
 $badge-background-color: var(
   --nutui-badge-background-color,
-  $color-primary-gradient-1
+  $color-primary
 ) !default;
-$badge-color: var(--nutui-badge-color, #fff) !default;
-$badge-font-size: var(--nutui-badge-font-size, $font-size-xs) !default;
+$badge-color: var(--nutui-badge-color, $color-primary-text) !default;
+$badge-font-size: var(--nutui-badge-font-size, $font-size-xxs) !default;
 $badge-border: var(
   --nutui-badge-border,
-  0px solid $color-primary-text
+  1px solid $color-primary-text
 ) !default;
 $badge-border-radius: var(--nutui-badge-border-radius, $badge-height) !default;
-$badge-min-width: var(--nutui-badge-min-width, 5px) !default;
-$badge-padding: var(--nutui-badge-padding, 0 4px) !default;
-$badge-icon-padding: var(--nutui-badge-icon-padding, 3px) !default;
-$badge-icon-size: var(--nutui-badge-icon-size, 12px) !default;
+$badge-min-width: var(--nutui-badge-min-width, 6px) !default;
+$badge-padding: var(--nutui-badge-padding, 1px 4px) !default;
+$badge-icon-padding: var(--nutui-badge-icon-padding, 2px) !default;
+$badge-icon-size: var(--nutui-badge-icon-size, 10px) !default;
 $badge-content-transform: var(
   --nutui-badge-content-transform,
-  translateY(-50%) translateX(100%)
+  translate(50%, -50%)
 ) !default;
 $badge-z-index: var(--nutui-badge-z-index, 1) !default;
-$badge-dot-width: var(--nutui-badge-dot-width, 7px) !default;
-$badge-dot-border: var(--nutui-badge-dot-border, 0px solid $color-primary-text);
+$badge-dot-width: var(--nutui-badge-dot-width, 6px) !default;
+$badge-dot-small-width: var(--nutui-badge-dot-width, 4px) !default;
+$badge-dot-large-width: var(--nutui-badge-dot-width, 8px) !default;
+$badge-dot-border: var(--nutui-badge-dot-border, 1px solid $color-primary-text);
+$badge-outline-color: var(--nutui-badge-outline-color, $color-primary) !default;
+$badge-outline-border: var(
+  --nutui-badge-outline-border,
+  1px solid $color-primary
+);
 
 //popover（✅）
-$popover-border-radius: var(--nutui-popover-border-radius, 8px) !default;
-$popover-font-size: var(--nutui-popover-font-size, $font-size-small) !default;
+$popover-border-radius: var(--nutui-popover-border-radius, $radius-xs) !default;
 $popover-border-color: var(--nutui-popover-border-color, #ffffff) !default;
+$popover-font-size: var(--nutui-popover-font-size, $font-size-s) !default;
 $popover-content-background-color: var(
   --nutui-popover-content-background-color,
   #ffffff
 ) !default;
-$popover-text-color: var(--nutui-popover-text-color, #1a1a1a) !default;
+$popover-text-color: var(--nutui-popover-text-color, $color-mask) !default;
 $popover-hover-background-color: var(
   --nutui-popover-hover-background-color,
   #fff
@@ -1622,6 +1626,7 @@ $popover-menu-item-padding: var(
   --nutui-popover-menu-item-padding,
   8px
 ) !default;
+$popover-menu-item-width: var(--nutui-popover-menu-item-width, 160px) !default;
 
 //progress（✅）
 $progress-height: var(--nutui-progress-height, 10px) !default;
@@ -1640,7 +1645,7 @@ $progress-text-color: var(
 ) !default;
 $progress-text-background: var(
   --nutui-progress-text-background,
-  $progress-color
+  $color-primary-gradient-1
 ) !default;
 $progress-text-padding: var(--nutui-progress-text-padding, 0 5px) !default;
 $progress-text-font-size: var(--nutui-progress-text-font-size, 9px) !default;
@@ -1691,10 +1696,13 @@ $pagination-prev-next-padding: var(
 ) !default;
 $pagination-lite-width: var(--nutui-pagination-lite-width, 40px) !default;
 $pagination-lite-height: var(--nutui-pagination-lite-height, 20px) !default;
-$pagination-lite-radius: var(--nutui-pagination-lite-radius, 6px) !default;
+$pagination-lite-radius: var(
+  --nutui-pagination-lite-radius,
+  $radius-xs
+) !default;
 $pagination-lite-background-color: var(
   --nutui-pagination-lite-background-color,
-  var(--nutui-black-7)
+  rgba(0, 0, 0, 0.45)
 ) !default;
 $pagination-lite-active-background-color: var(
   --nutui-pagination-lite-active-background-color,
@@ -1730,7 +1738,7 @@ $tabs-titles-item-active-font-weight: var(
 ) !default;
 $tabs-titles-item-active-font-size: var(
   --nutui-tabs-titles-item-active-font-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 $tabs-titles-item-active-background-color: var(
   --nutui-tabs-titles-item-active-background-color,
@@ -1751,7 +1759,7 @@ $tabs-tab-button-border-radius: var(
 ) !default;
 $tabs-tab-button-active-background-color: var(
   --nutui-tabs-button-active-background-color,
-  $color-primary-light
+  $color-primary-light-pressed
 ) !default;
 $tabs-tab-button-active-border: var(
   --nutui-tabs-button-active-border,
@@ -1767,7 +1775,11 @@ $tabs-vertical-titles-item-height: var(
 ) !default;
 $tabs-vertical-tab-line-color: var(
   --nutui-tabs-vertical-tab-line-color,
-  linear-gradient(180deg, $color-primary-stop-1 0%, $color-primary-light 100%)
+  linear-gradient(
+    180deg,
+    $color-primary-stop-1 0%,
+    $color-primary-light-pressed 100%
+  )
 ) !default;
 $tabs-vertical-tab-line-width: var(
   --nutui-tabs-vertical-tab-line-width,
@@ -1789,13 +1801,19 @@ $tabs-tabpane-backgroundColor: var(
 // indicator（✅）
 $indicator-color: var(--nutui-indicator-color, $color-primary) !default;
 $indicator-dot-color: var(--nutui-indicator-dot-color, $color-border) !default;
-$indicator-dot-size: var(--nutui-indicator-dot-size, 4px) !default;
+$indicator-dot-size: var(--nutui-indicator-dot-size, 3px) !default;
 $indicator-dot-active-size: var(
   --nutui-indicator-dot-active-size,
-  8px
+  6px
+) !default;
+$indicator-border-radius: var(
+  --nutui-indicator-border-radius,
+  $radius-xxs
+) !default;
+$indicator-dot-margin: var(
+  --nutui-indicator-dot-margin,
+  $spacing-xxxs
 ) !default;
-$indicator-border-radius: var(--nutui-indicator-border-radius, 2px) !default;
-$indicator-dot-margin: var(--nutui-indicator-dot-margin, 2px) !default;
 
 // menu（✅）
 $menu-scroll-fixed-top: var(--nutui-menu-scroll-fixed-top, 0) !default;
@@ -1929,26 +1947,57 @@ $searchbar-input-text-align: var(
   left
 ) !default;
 
+// segmented
+$segmented-height: var(--nutui-segmented-height, 24px) !default;
+$segmented-padding: var(--nutui-segmented-padding, $spacing-xxxs) !default;
+$segmented-border-radius: var(--nutui-segmented-radius, $radius-xs) !default;
+$segmented-background: var(
+  --nutui-segmented-background,
+  $color-mask-part
+) !default;
+$segmented-item-height: var(--nutui-segmented-height, 20px) !default;
+$segmented-item-padding: var(
+  --nutui-segmented-item-padding,
+  0 $spacing-xs
+) !default;
+$segmented-item-radius: var(--nutui-segmented-item-radius, $radius-xs) !default;
+$segmented-item-fontsize: var(
+  --nutui-segmented-item-fontsize,
+  $font-size-s
+) !default;
+$segmented-item-color: var(
+  --nutui-segmented-item-color,
+  $color-primary-text
+) !default;
+$segmented-active-background: var(
+  --nutui-segmented-active-background,
+  $color-mask-part
+) !default;
+$segmented-icon-margin-right: var(
+  --nutui-segmented-icon-margin-right,
+  $spacing-xxxs
+) !default;
+
 // empty（✅）
 $empty-padding: var(--nutui-empty-padding, 32px 40px) !default;
 $empty-image-size: var(--nutui-empty-image-size, 160px) !default;
 $empty-image-small-size: var(--nutui-empty-image-small-size, 120px) !default;
 $empty-title-margin-top: var(--nutui-empty-title-margin-top, 0px) !default;
+$empty-background-color: var(
+  --nutui-empty-background-color,
+  $color-background-overlay
+) !default;
 $empty-title-margin-bottom: var(
   --nutui-empty-title-margin-bottom,
-  8px
+  12px
 ) !default;
 $empty-title-line-height: var(
   --nutui-empty-title-line-height,
-  $font-size-base
-) !default;
-$empty-description-margin-top: var(
-  --nutui-empty-description-margin-top,
-  0px
+  $font-size-l
 ) !default;
 $empty-description-line-height: var(
   --nutui-empty-description-line-height,
-  1.2
+  1
 ) !default;
 
 // cascader（✅）
@@ -2054,20 +2103,25 @@ $skeleton-line-border-radius: var(
 $card-border-radius: var(--nutui-card-border-radius, 4px) !default;
 
 // grid（✅）
+$grid-border-width: var(--nutui-grid-border-width, 0px) !default;
 $grid-border-color: var(--nutui-grid-border-color, $color-border) !default;
+$grid-item-border-radius: var(
+  --nutui-grid-item-border-radius,
+  $radius-l
+) !default;
 $grid-item-content-padding: var(
   --nutui-grid-item-content-padding,
   16px 8px
 ) !default;
 $grid-item-content-bg-color: var(
   --nutui-grid-item-content-bg-color,
-  $white
+  var(--nutui-gray-1)
 ) !default;
 $grid-item-text-margin: var(--nutui-grid-item-text-margin, 8px) !default;
 $grid-item-text-color: var(--nutui-grid-item-text-color, $color-title) !default;
 $grid-item-text-font-size: var(
   --nutui-grid-item-text-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 
 // table（✅）
@@ -2092,7 +2146,7 @@ $navbar-width: var(--nutui-navbar-width, 100%) !default;
 $navbar-height: var(--nutui-navbar-height, 44px) !default;
 $navbar-margin-bottom: var(--nutui-navbar-margin-bottom, 20px) !default;
 $navbar-background: var(--nutui-navbar-background, $color-background) !default;
-$navbar-box-shadow: var(--nutui-navbar-box-shadow, 0px) !default;
+$navbar-box-shadow: var(--nutui-navbar-box-shadow, 0 0 transparent) !default;
 $navbar-color: var(--nutui-navbar-color, $color-title) !default;
 $navbar-font-size: var(--nutui-navbar-font-size, $font-size-base) !default;
 $navbar-title-font-size: var(
@@ -2107,7 +2161,33 @@ $navbar-title-font-color: var(
   --nutui-navbar-title-font-color,
   $color-title
 ) !default;
-
+// sidebar（✅）
+$sidebar-background-color: var(
+  --nutui-sidebar-background-color,
+  $color-background
+) !default;
+$sidebar-border-radius: var(--nutui-sidebar-border-radius, 0) !default;
+$sidebar-width: var(--nutui-sidebar-width, 104px) !default;
+$sidebar-max-width: var(--nutui-sidebar-max-width, 128px) !default;
+$sidebar-title-height: var(--nutui-sidebar-title-height, 52px) !default;
+$sidebar-inactive-font-size: var(
+  --nutui-sidebar-inactive-font-size,
+  $font-size-base
+) !default;
+$sidebar-active-font-size: var(
+  --nutui-sidebar-active-font-size,
+  $font-size-l
+) !default;
+$sidebar-active-font-weight: var(
+  --nutui-sidebar-active-font-weight,
+  $font-weight-bold
+) !default;
+$sidebar-active-color: var(
+  --nutui-sidebar-active-color,
+  $color-primary
+) !default;
+$sidebar-item-background: var(--nutui-sidebar-item-background, $white) !default;
+$sidebar-item-padding: var(--nutui-sidebar-item-padding, 24px 20px) !default;
 // sidenavbar（✅）
 $sidenavbar-content-bg-color: var(
   --nutui-sidenavbar-content-bg-color,
@@ -2161,7 +2241,7 @@ $sidenavbar-sub-list-color: var(
 $elevator-list-bg-color: var(--nutui-elevator-list-bg-color, $white) !default;
 $elevator-list-font-size: var(
   --nutui-elevator-list-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $elevator-list-color: var(--nutui-elevator-list-color, $color-title) !default;
 $elevator-list-item-padding: var(
@@ -2260,7 +2340,7 @@ $elevator-bars-inner-item-padding: var(
 ) !default;
 $elevator-bars-font-size: var(
   --nutui-elevator-bars-font-size,
-  $font-size-small
+  $font-size-s
 ) !default;
 $elevator-bars-active-color: var(
   --nutui-elevator-bars-active-color,
@@ -2325,7 +2405,7 @@ $circleprogress-text-color: var(
 ) !default;
 $circleprogress-text-size: var(
   --nutui-circleprogress-text-size,
-  $font-size-large
+  $font-size-l
 ) !default;
 
 // Ellipsis
@@ -2352,6 +2432,10 @@ $countup-border-radius: var(--nutui-countup-border-radius, 4px) !default;
 $countup-lr-margin: var(--nutui-countup-lr-margin, 0) !default;
 $countup-bg-color: var(--nutui-countup-bg-color, inherit) !default;
 $countup-color: var(--nutui-countup-color, $color-title) !default;
+$countup-separator-color: var(
+  --nutui-countup-separator-color,
+  $color-title
+) !default;
 
 // layout（✅）
 $row-content-color: var(--nutui-row-content-color, #fff) !default;
@@ -2383,20 +2467,24 @@ $space-gap: var(--nutui-space-gap, 8px) !default;
 
 // loading
 $loading-icon-color: var(--nutui-loading-icon-color, $color-text-help) !default;
-$loading-icon-size: var(--nutui-loading-icon-size, $font-size-small) !default;
+$loading-icon-size: var(--nutui-loading-icon-size, $font-size-s) !default;
 $loading-color: var(--nutui-loading-color, $color-text-help) !default;
-$loading-font-size: var(--nutui-loading-font-size, $font-size-small) !default;
+$loading-font-size: var(--nutui-loading-font-size, $font-size-s) !default;
+$loading-lottie-background: var(
+  --nutui-loading-lottie-background,
+  rgba(0, 0, 0, 0.06)
+) !default;
 
 // ResultPage
-$resultpage-width: var(--nutui-resultpage-width, 247px) !default;
-$resultpage-icon-size: var(--nutui-resultpage-icon-size, 48px) !default;
+$resultpage-width: var(--nutui-resultpage-width, 240px) !default;
+$resultpage-icon-size: var(--nutui-resultpage-icon-size, 36px) !default;
 $resultpage-icon-margin-bottom: var(
   --nutui-resultpage-icon-margin-bottom,
-  16px
+  12px
 ) !default;
 $resultpage-title-margin-bottom: var(
   --nutui-resultpage-title-margin-bottom,
-  9px
+  12px
 ) !default;
 $resultpage-title-font-size: var(
   --nutui-resultpage-title-font-size,
@@ -2420,5 +2508,5 @@ $resultpage-description-line-height: var(
 ) !default;
 $resultpage-actions-margin-top: var(
   --nutui-resultpage-actions-margin-top,
-  21px
+  16px
 ) !default;