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

package/dist/styles/theme-dark.scss

@@ -1,84 +1,85 @@
 @import './jd-font';
 :root,
-page {
+page,
+.nut-theme-dark {
   // 品牌颜色
-  --nutui-brand-1: #403635; // 梯度1
-  --nutui-brand-2: #665452; // 梯度2
-  --nutui-brand-3: #99706b; // 梯度3
-  --nutui-brand-4: #cc5f52; // 梯度4
-  --nutui-brand-5: #f2503d; // 梯度5
-  --nutui-brand-6: #fa3725; // 梯度6
-  --nutui-brand-7: #f24130; // 梯度7
-  --nutui-brand-8: #e55446; // 梯度8
-  --nutui-brand-9: #f26e61; // 梯度9
-  --nutui-brand-10: #e5928a; // 梯度10
-
-  --nutui-brand-11: #330f02; // 梯度11
+  --nutui-brand-1: #2a181c; // 梯度1
+  --nutui-brand-2: #3d2128; // 梯度2
+  --nutui-brand-3: #5f2b34; // 梯度3
+  --nutui-brand-4: #802b37; // 梯度4
+  --nutui-brand-5: #b81427; // 梯度5
+  --nutui-brand-6: #ff0f23; // 梯度6
+  --nutui-brand-7: #ff707b; // 梯度7
+  --nutui-brand-8: #ffa3ac; // 梯度8
+  --nutui-brand-9: #ffccd2; // 梯度9
+  --nutui-brand-10: #fff0f2; // 梯度10
+  --nutui-brand-11: #fff4f5; // 梯度11
 
   --nutui-brand-stop-1: #ff475d; // 渐变色起
   --nutui-brand-stop-2: #fa3725; // 渐变色止
 
   // service color
-  --nutui-golden-1: #fff4e8;
-  --nutui-golden-2: rgba(184, 124, 63, 0.04);
-  --nutui-golden-3: rgba(191, 130, 66, 0.2);
-  --nutui-golden-4: #b87c3f;
-  --nutui-golden-5: #4d3b2a;
-  --nutui-golden-6: #33271c;
-  --nutui-golden-7: #ccb8a3;
+  --nutui-golden-1: #3a2b1a;
+  --nutui-golden-2: #d1995a;
+  --nutui-golden-3: #4d443d;
+  --nutui-golden-4: #b38b6d;
+  --nutui-golden-5: #4a3b29;
+  --nutui-golden-6: #614d35;
+  --nutui-golden-7: #2b2723;
 
   --nutui-golden-stop-1: #fff9f0;
   --nutui-golden-stop-2: #ffe3c2;
 
   // success color
-  --nutui-green-1: #1f2920;
-  --nutui-green-2: #32c241;
-  --nutui-green-3: #12b222;
+  --nutui-green-1: #253a2a;
+  --nutui-green-2: #4bd165;
+  --nutui-green-3: #45b058;
 
   // danger color 发现不一致 TODO
 
   // red color
-  --nutui-red-1: #4c1c20;
-  --nutui-red-2: #621a20;
-  --nutui-red-3: #603840;
-  --nutui-red-4: #893f49;
-  --nutui-red-5: #bc3139;
-  --nutui-red-6: #bc3139;
-  --nutui-red-7: #ed3b34;
-  --nutui-red-8: #ff5144;
-  --nutui-red-9: #ff9382;
-  --nutui-red-10: #ffccbf;
-  --nutui-red-11: #ffe7e0;
+  --nutui-red-1: var(--nutui-brand-1);
+  --nutui-red-2: var(--nutui-brand-2);
+  --nutui-red-3: var(--nutui-brand-3);
+  --nutui-red-4: var(--nutui-brand-4);
+  --nutui-red-5: var(--nutui-brand-5);
+  --nutui-red-6: var(--nutui-brand-6);
+  --nutui-red-7: var(--nutui-brand-7);
+  --nutui-red-8: var(--nutui-brand-8);
+  --nutui-red-9: var(--nutui-brand-9);
+  --nutui-red-10: var(--nutui-brand-10);
+  --nutui-red-11: var(--nutui-brand-11);
 
   // warning color
-  --nutui-yellow-1: #29271f;
-  --nutui-yellow-2: #faaf00;
-  --nutui-yellow-3: #cc8500;
+  --nutui-yellow-1: #3f351e;
+  --nutui-yellow-2: #ffbd22;
+  --nutui-yellow-3: #d99100;
 
   // info color
-  --nutui-blue-1: #23292e;
-  --nutui-blue-2: #3385ff;
+  --nutui-blue-1: #212f42;
+  --nutui-blue-2: #60a5fa;
+  --nutui-blue-3: #90caf9;
 
   --nutui-secondary-1: #14cc33; // 辅助色
 
   // 背景色
   // 卡片背景色
-  --nutui-gray-1: #1f1f1f;
+  --nutui-gray-1: #1f2226;
   // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
-  --nutui-gray-2: #141414;
+  --nutui-gray-2: #2a2f36;
   // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
-  --nutui-gray-3: #0a0a0a;
+  --nutui-gray-3: #14171a;
   // 组件背景色，2025年新增
   --nutui-gray-9: #333333;
   // 文字色
   // 四级文字色，不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
-  --nutui-gray-4: #666666;
+  --nutui-gray-4: #4b5159;
   // 三级文字色（次要）
-  --nutui-gray-5: #818181;
+  --nutui-gray-5: #717985;
   // 二级文字色（常规），用于次级标题、属性标示、非主要信息引导等。
-  --nutui-gray-6: #999999;
+  --nutui-gray-6: #a1a9b3;
   // 一级文字色（重要）主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
-  --nutui-gray-7: #e6e6e6;
+  --nutui-gray-7: #e1e6eb;
   // icon 禁用颜色
   --nutui-gray-8: #dadce0;
 
@@ -104,6 +105,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);
@@ -126,55 +133,49 @@ page {
   // 品牌渐变色右端
   --nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
   // 品牌主色调或其他深色背景下的文字
-  --nutui-color-primary-text: var(--nutui-color-background-gray-1);
+  --nutui-color-primary-text: var(--nutui-gray-1);
   // 品牌主色调点击态，背景、边框、镂空状态下的文字
   --nutui-color-primary-pressed: var(--nutui-red-7);
   // 品牌主色调禁用态，背景、边框、镂空状态下的文字
-  --nutui-color-primary-disabled: var(--nutui-color-content-gray-1);
+  --nutui-color-primary-disabled: var(--nutui-gray-4);
   // 品牌主色调特殊禁用态，通过操作后可转位默认态
   --nutui-color-primary-disabled-special: var(--nutui-red-3);
   // 2025 新增
   --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 语义化
   // 金色背景
   --nutui-color-service: var(--nutui-golden-1);
-  // 填充标签边框
-  --nutui-color-service-border-1: var(--nutui-golden-2);
-  // 线框标签边框
-  --nutui-color-service-border-2: var(--nutui-golden-3);
-  // 废弃
-  //   --nutui-color-service-border: var(--nutui-golden-2);
-  --nutui-color-service-pressed: var(--nutui-golden-4);
+  // 深背景
+  --nutui-color-service-pressed: var(--nutui-golden-2);
+  // 边框
+  --nutui-color-service-border: var(--nutui-golden-3);
   // 金色文字
   --nutui-color-service-text: var(--nutui-golden-4);
   // 金色按钮背景
   --nutui-color-service-btn-bg: var(--nutui-golden-5);
   // 金色按钮点击态背景
   --nutui-color-service-btn-bg-pressed: var(--nutui-golden-6);
-  // 金色按钮文字
-  --nutui-color-service-btn-text: var(--nutui-golden-7);
-
-  --nutui-color-service-stop-1: var(--nutui-golden-stop-1);
-  --nutui-color-service-stop-2: var(--nutui-golden-stop-2);
+  // 金色按钮不可点击态背景
+  --nutui-color-service-btn-bg-disabled: var(--nutui-golden-7);
 
   // success color 语义化
-  --nutui-color-success: var(--nutui-green-2); // 深背景
+  --nutui-color-success: var(--nutui-green-2); // 深背景/图形
   --nutui-color-success-light: var(--nutui-green-1); // 浅背景
   --nutui-color-success-pressed: var(--nutui-green-3); // 文字
 
   // danger color 语义化，待办，看上去目前非常的独立 @周峯
   --nutui-color-danger: var(--nutui-red-2); // 背景或文字
   --nutui-color-danger-light: var(--nutui-red-1); // 背景
+  --nutui-color-danger-pressed: var(--nutui-red-3); // 文字
 
   // info color 语义化
   --nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色
   --nutui-color-info-light: var(--nutui-blue-1); // 背景
   --nutui-color-text-link: var(--nutui-blue-2);
+  --nutui-color-info-pressed: var(--nutui-blue-3); // 文字
 
   // warning color 语义化
   --nutui-color-warning: var(--nutui-yellow-2); // 深背景
@@ -182,50 +183,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); // TODO 当前定义为 white
   // 卡片内容器背景
-  --nutui-color-background-sunken: var(--nutui-color-background-gray-2);
+  --nutui-color-background-sunken: var(--nutui-gray-2); // TODO 待判断是否还存在
   // 组件背景，2025年新增
-  --nutui-color-background-component: var(--nutui-color-background-gray-4);
+  --nutui-color-background-component: var(--nutui-gray-2);
 
   // 蒙层颜色值 语义化
-  --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: calc(8px * var(--nut-scale-font, var(--nut-scale-f, 1)));
@@ -251,25 +240,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);
   // 16px 字阶（与 l 同档数值，供 --nutui-font-size-md 语义）
   --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);
@@ -364,20 +353,30 @@ page {
   --nutui-radius-24: calc(24px * var(--nut-scale-f, 1));
 
   // 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: calc(1px * var(--nut-scale-f, 1));
+  --nutui-line-2: calc(1.5px * var(--nut-scale-f, 1));
+
+  // line 语义化
+  // 标签边框
+  --nutui-line-tag: var(--nutui-line-1);
+  // 间隔线/组件边框
+  --nutui-line-component: var(--nutui-line-2);
 }