@nutui/nutui-react 2.1.0 → 2.2.0-beta.0

package/dist/style.mjs

@@ -1,9 +1,5 @@
 /*!
-* @nutui/nutui-react v2.1.0 Fri Nov 17 2023 14:50:14 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.2.0 Fri Nov 24 2023 15:05:19 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
-const t = "";
-export {
-  t as default
-};

package/dist/styles/theme-dark.scss

@@ -1,11 +1,5 @@
 :root,
 page {
-  --nutui-brand-color: #fa2c19;
-  --nutui-brand-color-start: #ff404f;
-  --nutui-brand-color-end: #fa2c19;
-  --nutui-brand-link-color: #396acc;
-  --nutui-brand-text-color: #ffffff;
-  --nutui-brand-info-color: #2a91fa;
   --nutui-gray-0: #000000;
   --nutui-gray-1: #e6e6e6;
   --nutui-gray-2: #828282;
@@ -17,11 +11,123 @@ page {
   --nutui-gray-8: rgba(0, 0, 0, 0.4);
   --nutui-gray-9: rgba(0, 0, 0, 0.08);
   --nutui-gray-10: rgba(0, 0, 0, 0.02);
-  --nutui-font-size-0: 10px;
-  --nutui-font-size-1: 12px;
-  --nutui-font-size-2: 14px;
-  --nutui-font-size-3: 16px;
-  --nutui-font-size-4: 18px;
-  --nutui-font-weight-bold: 400;
+
+  --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-stop-1: #f54958; // 梯度100
+  --nutui-brand-stop-2: #fa3725; // 渐变色止
+
+  --nutui-secondary-1: #1bbf30; // 辅助色
+
+  --nutui-color-primary: var(--nutui-brand-6);
+  --nutui-color-primary-stop-1: var(--nutui-brand-stop-1);
+  --nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
+  --nutui-color-primary-pressed: var(--nutui-brand-7);
+  --nutui-color-primary-disabled: var(--nutui-brand-3);
+  --nutui-color-primary-text: #ffffff;
+  --nutui-color-primary-light: var(--nutui-brand-1);
+  --nutui-color-primary-light-pressed: var(--nutui-brand-2);
+  --nutui-color-text-link: #040608;
+
+  // // 背景色
+  // // 卡片背景色
+  // --nutui-gray-1: #1f1f1f;
+  // // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
+  // --nutui-gray-2: #141414;
+  // // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
+  // --nutui-gray-3: #0a0a0a;
+  // // 文字色
+  // // 四级文字色，不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
+  // --nutui-gray-4: #666666;
+  // // 三级文字色（次要）
+  // --nutui-gray-5: #818181;
+  // // 二级文字色（常规），用于次级标题、属性标示、非主要信息引导等。
+  // --nutui-gray-6: #999999;
+  // // 一级文字色（重要）主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
+  // --nutui-gray-7: #cccccc;
+
+  --nutui-black-1: rgba(255, 255, 255, 0);
+  // 蒙层色
+  // 容错蒙层
+  --nutui-black-2: rgba(255, 255, 255, 0.2);
+  // 线条色
+  // 间隔线/容错线，用于结构或信息分割
+  --nutui-black-3: rgba(255, 255, 255, 0.06);
+  // --nutui-black-4: rgba(0, 0, 0, 0.1);
+  // --nutui-black-5: rgba(0, 0, 0, 0.2);
+  // --nutui-black-6: rgba(0, 0, 0, 0.3);
+  // --nutui-black-7: rgba(0, 0, 0, 0.4);
+  // --nutui-black-8: rgba(0, 0, 0, 0.5);
+  // --nutui-black-9: rgba(0, 0, 0, 0.6);
+  // 蒙层色
+  // 全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩
+  --nutui-black-10: rgba(0, 0, 0, 0.7);
+  // --nutui-black-11: rgba(0, 0, 0, 0.8);
+  // --nutui-black-12: rgba(0, 0, 0, 0.9);
+  // --nutui-black-13: rgba(0, 0, 0, 1);
+
+  --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.06);
+  // --nutui-white-4: rgba(255, 255, 255, 0.1);
+  // --nutui-white-5: rgba(255, 255, 255, 0.2);
+  // --nutui-white-6: rgba(255, 255, 255, 0.3);
+  --nutui-white-7: rgba(31, 31, 31, 0.4);
+  --nutui-white-8: rgba(31, 31, 31, 0.5);
+  // --nutui-white-9: rgba(255, 255, 255, 0.6);
+  // --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-color-info: #1988fa;
+  --nutui-color-text-disabled: var(--nutui-gray-4);
+  // 字体
+  --nutui-font-size-1: 10px;
+  --nutui-font-size-2: 12px;
+  --nutui-font-size-3: 14px;
+  --nutui-font-size-4: 16px;
+  --nutui-font-size-5: 18px;
+  --nutui-font-size-6: 20px;
+  --nutui-font-size-7: 22px;
+  --nutui-font-size-8: 24px;
+  --nutui-font-size-9: 26px;
+  --nutui-font-size-10: 28px;
+  // 字重
+  --nutui-font-weight: 400;
+  // 行高
   --nutui-line-height-base: 1.5;
+
+  // space
+  --nutui-spacing-1: 2px;
+  --nutui-spacing-2: 4px;
+  --nutui-spacing-3: 6px;
+  --nutui-spacing-4: 8px;
+  --nutui-spacing-5: 10px;
+  --nutui-spacing-6: 12px;
+  --nutui-spacing-7: 14px;
+  --nutui-spacing-8: 16px;
+  --nutui-spacing-9: 18px;
+  --nutui-spacing-10: 20px;
+
+  // radius
+  --nutui-radius-1: 0px;
+  --nutui-radius-2: 2px;
+  --nutui-radius-3: 4px;
+  --nutui-radius-4: 6px;
+  --nutui-radius-5: 8px;
+  --nutui-radius-6: 10px;
+  --nutui-radius-7: 12px;
+  --nutui-radius-8: 14px;
+  --nutui-radius-9: 16px;
+  --nutui-radius-10: 18px;
 }

package/dist/styles/theme-default.scss

@@ -1,12 +1,5 @@
 :root,
 page {
-  --nutui-brand-color: #fa2c19;
-  --nutui-brand-color-start: #ff404f;
-  --nutui-brand-color-end: #fa2c19;
-  --nutui-brand-link-color: #396acc;
-  --nutui-brand-color-opacity: rgba(250, 44, 25, 0.5);
-  --nutui-brand-text-color: #ffffff;
-  --nutui-brand-info-color: #1988fa;
   --nutui-gray-0: #000000;
   // 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
   --nutui-gray-1: #1a1a1a;
@@ -29,14 +22,125 @@ page {
   // 图片容错蒙层
   --nutui-gray-10: rgba(0, 0, 0, 0.02);
 
+  --nutui-brand-1: #ffeae8; // 梯度1
+  --nutui-brand-2: #fec3be; // 梯度2
+  --nutui-brand-3: #fd9d94; // 梯度3
+  --nutui-brand-4: #fc776b; // 梯度4
+  --nutui-brand-5: #fb5142; // 梯度5
+  --nutui-brand-6: #fa2c19; // 梯度6
+  --nutui-brand-7: #cf1f0f; // 梯度7
+  --nutui-brand-8: #a31508; // 梯度8
+  --nutui-brand-9: #780d03; // 梯度9
+  --nutui-brand-10: #4d0004; // 梯度10
+
+  --nutui-brand-stop-1: #f53d4d; // 渐变色起
+  --nutui-brand-stop-2: #fa2c19; // 渐变色止
+
+  --nutui-secondary-1: #14cc33; // 辅助色
+
+  --nutui-color-primary: var(--nutui-brand-6);
+  --nutui-color-primary-stop-1: var(--nutui-brand-stop-1);
+  --nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
+  --nutui-color-primary-pressed: var(--nutui-brand-7);
+  --nutui-color-primary-disabled: var(--nutui-brand-3);
+  --nutui-color-primary-text: #ffffff;
+  --nutui-color-primary-light: var(--nutui-brand-1);
+  --nutui-color-primary-light-pressed: var(--nutui-brand-2);
+
+  --nutui-color-text-link: #396acc;
+
+  // 背景色
+  // // 卡片背景色
+  // --nutui-gray-1: #ffffff;
+  // // 卡片内嵌背景色，用于卡片内部的信息包裹，感知较弱。
+  // --nutui-gray-2: #f8f8f8;
+  // // 页面基底色，用于卡片式页面的兜底，永远置于页面最底层。
+  // --nutui-gray-3: #f6f6f6;
+  // // 文字色
+  // // 四级文字色，不可操作内容色，用于预置内容、无效内容、特殊不可点击按钮、组件边框线等。
+  // --nutui-gray-4: #bfbfbf;
+  // // 三级文字色（次要）
+  // --nutui-gray-5: #8c8c8c;
+  // // 二级文字色（常规），用于次级标题、属性标示、非主要信息引导等。
+  // --nutui-gray-6: #595959;
+  // // 一级文字色（重要）主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
+  // --nutui-gray-7: #1a1a1a;
+
+  --nutui-black-1: rgba(0, 0, 0, 0);
+  // 蒙层色
+  // 容错蒙层
+  --nutui-black-2: rgba(0, 0, 0, 0.02);
+  // 线条色
+  // 间隔线/容错线，用于结构或信息分割
+  --nutui-black-3: rgba(0, 0, 0, 0.06);
+  --nutui-black-4: rgba(0, 0, 0, 0.1);
+  --nutui-black-5: rgba(0, 0, 0, 0.2);
+  --nutui-black-6: rgba(0, 0, 0, 0.3);
+  --nutui-black-7: rgba(0, 0, 0, 0.4);
+  --nutui-black-8: rgba(0, 0, 0, 0.5);
+  --nutui-black-9: rgba(0, 0, 0, 0.6);
+  // 蒙层色
+  // 全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩
+  --nutui-black-10: rgba(0, 0, 0, 0.7);
+  --nutui-black-11: rgba(0, 0, 0, 0.8);
+  --nutui-black-12: rgba(0, 0, 0, 0.9);
+  --nutui-black-13: rgba(0, 0, 0, 1);
+
+  --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.06);
+  --nutui-white-4: rgba(255, 255, 255, 0.1);
+  --nutui-white-5: rgba(255, 255, 255, 0.2);
+  --nutui-white-6: rgba(255, 255, 255, 0.3);
+  --nutui-white-7: rgba(255, 255, 255, 0.4);
+  --nutui-white-8: rgba(255, 255, 255, 0.5);
+  --nutui-white-9: rgba(255, 255, 255, 0.6);
+  --nutui-white-10: rgba(255, 255, 255, 0.7);
+  --nutui-white-11: rgba(255, 255, 255, 0.8);
+  --nutui-white-12: rgba(255, 255, 255, 0.9);
+  --nutui-white-13: rgba(255, 255, 255, 1);
+
+  --nutui-color-info: #1988fa;
+  --nutui-color-text-disabled: var(--nutui-gray-4);
+
   // 字体
-  --nutui-font-size-0: 10px;
-  --nutui-font-size-1: 12px;
-  --nutui-font-size-2: 14px;
-  --nutui-font-size-3: 16px;
-  --nutui-font-size-4: 18px;
+  --nutui-font-size-1: 10px;
+  --nutui-font-size-2: 12px;
+  --nutui-font-size-3: 14px;
+  --nutui-font-size-4: 16px;
+  --nutui-font-size-5: 18px;
+  --nutui-font-size-6: 20px;
+  --nutui-font-size-7: 22px;
+  --nutui-font-size-8: 24px;
+  --nutui-font-size-9: 26px;
+  --nutui-font-size-10: 28px;
   // 字重
-  --nutui-font-weight-bold: 400;
+  --nutui-font-weight: 400;
+  --nutui-font-weight-bold: 500;
   // 行高
   --nutui-line-height-base: 1.5;
+
+  // space
+  --nutui-spacing-1: 2px;
+  --nutui-spacing-2: 4px;
+  --nutui-spacing-3: 6px;
+  --nutui-spacing-4: 8px;
+  --nutui-spacing-5: 10px;
+  --nutui-spacing-6: 12px;
+  --nutui-spacing-7: 14px;
+  --nutui-spacing-8: 16px;
+  --nutui-spacing-9: 18px;
+  --nutui-spacing-10: 20px;
+
+  // radius
+  --nutui-radius-1: 0px;
+  --nutui-radius-2: 2px;
+  --nutui-radius-3: 4px;
+  --nutui-radius-4: 6px;
+  --nutui-radius-5: 8px;
+  --nutui-radius-6: 10px;
+  --nutui-radius-7: 12px;
+  --nutui-radius-8: 14px;
+  --nutui-radius-9: 16px;
+  --nutui-radius-10: 18px;
 }

package/dist/styles/theme-jmapp.scss

@@ -1,11 +1,5 @@
 :root,
 page {
-  --nutui-brand-color: #3768fa;
-  --nutui-brand-color-start: #3768fa;
-  --nutui-brand-color-end: #2c53c8;
-  --nutui-brand-link-color: #396acc;
-  --nutui-brand-color-opacity: rgba(55, 104, 250, 0.4);
-  --nutui-brand-text-color: #ffffff;
   --nutui-gray-0: #000000;
   // 主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
   --nutui-gray-1: #1a1a1a;
@@ -28,14 +22,169 @@ page {
   // 图片容错蒙层
   --nutui-gray-10: rgba(0, 0, 0, 0.02);
 
+  --nutui-brand-1: #edf4ff; // 梯度1
+  --nutui-brand-2: #dce9ff; // 梯度2
+  --nutui-brand-3: #ccdefb; // 梯度3
+  --nutui-brand-4: #a6c8ff; // 梯度4
+  --nutui-brand-5: #82b1ff; // 梯度5
+  --nutui-brand-6: #5c99ff; // 梯度6
+  --nutui-brand-7: #317fff; // 梯度7
+  --nutui-brand-8: #3768fa; // 梯度8 * 主题色 primary brand
+  --nutui-brand-9: #1b58ba; // 梯度9
+  --nutui-brand-10: #244986; // 梯度10
+  --nutui-brand-11: #193666; // 梯度11
+  --nutui-brand-12: #16243e; // 梯度12
+
+  --nutui-brand-stop-1: var(--nutui-brand-8); // 渐变色起
+  --nutui-brand-stop-2: var(--nutui-brand-8); // 渐变色止
+
+  --nutui-color-primary: var(--nutui-brand-8);
+  --nutui-color-primary-stop-1: var(--nutui-brand-stop-1);
+  --nutui-color-primary-stop-2: var(--nutui-brand-stop-2);
+  --nutui-color-primary-pressed: var(--nutui-brand-9);
+  --nutui-color-primary-disabled: var(--nutui-brand-3);
+  --nutui-color-primary-text: #ffffff;
+  --nutui-color-primary-light: var(--nutui-brand-1);
+  --nutui-color-primary-light-pressed: var(--nutui-brand-2);
+  --nutui-color-text-link: var(--nutui-brand-8);
+
+  // --nutui-gray-0: #f4f4f4; // color-background
+  // // 卡片背景色
+  // --nutui-gray-1: #f7f7f7; // color-border-tint
+  // // 通用背景色、轮廓描边色
+  // --nutui-gray-2: #f0f0f0; // color-border-base
+  // // 轮廓描边色（适中）
+  // --nutui-gray-3: #ebebeb; // color-border-shade
+  // // 轮廓描边色（深）
+  // --nutui-gray-4: #e6e6e6;
+  // --nutui-gray-5: ##d9d9d9;
+  // --nutui-gray-6: #cccccc;
+  // --nutui-gray-7: #b5b5b5;
+  // --nutui-gray-8: #8c8c8c;
+  // --nutui-gray-9: #666666;
+  // --nutui-gray-10: #595959;
+  // --nutui-gray-11: #333333;
+  // --nutui-gray-12: #262626;
+
+  --nutui-black-1: rgba(0, 0, 0, 0.02);
+  --nutui-black-2: rgba(0, 0, 0, 0.05);
+  --nutui-black-3: rgba(0, 0, 0, 0.1);
+  --nutui-black-4: rgba(0, 0, 0, 0.2);
+  --nutui-black-5: rgba(0, 0, 0, 0.3); // color-text-disabled
+  // 四级文本色，禁用文本色，用于表达禁用状态，占位符等需弱化呈现的文本
+  --nutui-black-6: rgba(0, 0, 0, 0.4);
+  --nutui-black-7: rgba(0, 0, 0, 0.5); // color-text-description
+  // 三级文本色，描述文本色，用于对正文级标题做注释说明
+  --nutui-black-8: rgba(0, 0, 0, 0.6); //
+  // 全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩
+  --nutui-black-9: rgba(0, 0, 0, 0.7); //  color-text-regular
+  // 二级文本色，正文文本色，用于次级标题，属性标示、非主要信息引导等
+  --nutui-black-10: rgba(0, 0, 0, 0.8); //
+  --nutui-black-11: rgba(0, 0, 0, 0.9); //  color-text-title
+  // 一级文字色，标题文本色，主要内容用色，常用语常规标题内容等
+  --nutui-black-12: rgba(0, 0, 0, 1); //
+
+  --nutui-white-1: rgba(255, 255, 255, 0.02);
+  --nutui-white-2: rgba(255, 255, 255, 0.05);
+  --nutui-white-3: rgba(255, 255, 255, 0.1);
+  --nutui-white-4: rgba(255, 255, 255, 0.2);
+  --nutui-white-5: rgba(255, 255, 255, 0.3);
+  --nutui-white-6: rgba(255, 255, 255, 0.4);
+  --nutui-white-7: rgba(255, 255, 255, 0.5);
+  --nutui-white-8: rgba(255, 255, 255, 0.6);
+  --nutui-white-9: rgba(255, 255, 255, 0.7);
+  --nutui-white-10: rgba(255, 255, 255, 0.8);
+  --nutui-white-11: rgba(255, 255, 255, 0.9);
+  --nutui-white-12: rgba(255, 255, 255, 1);
+
+  --nutui-green-1: #eaf9e8;
+  --nutui-green-2: #cdf5c9;
+  --nutui-green-3: #b2f0ae;
+  --nutui-green-4: #7de279;
+  --nutui-green-5: #51d04f;
+  --nutui-green-6: #00bc14; // * 成功色 success
+  --nutui-green-7: #12a300;
+  --nutui-green-8: #2b8e23;
+  --nutui-green-9: #007308;
+  --nutui-green-10: #005c05;
+  --nutui-green-11: #243f23;
+  --nutui-green-12: #192a18;
+
+  --nutui-orange-1: #fdf1ea;
+  --nutui-orange-2: #fee2d1;
+  --nutui-orange-3: #f5d6c3;
+  --nutui-orange-4: #fdd3b9;
+  --nutui-orange-5: #fcb487;
+  --nutui-orange-6: #ec7600; // * 警告色 warning
+  --nutui-orange-7: #cd6600;
+  --nutui-orange-8: #ae5604;
+  --nutui-orange-9: #914600;
+  --nutui-orange-10: #743702;
+  --nutui-orange-11: #562a09;
+  --nutui-orange-12: #351f11;
+
+  --nutui-red-1: #fff0ed;
+  --nutui-red-2: #fee1da;
+  --nutui-red-3: #fdd1ca;
+  --nutui-red-4: #fbb1a5;
+  --nutui-red-5: #ff8b79;
+  --nutui-red-6: #ff5e4a;
+  --nutui-red-7: #ea3f2d;
+  --nutui-red-8: #d82515; // * 危险色 danger
+  --nutui-red-9: #b7180a;
+  --nutui-red-10: #960800;
+  --nutui-red-11: #611d15;
+  --nutui-red-12: #3a1a16;
+
+  --nutui-info-1: #e5f8fa;
+  --nutui-info-2: #c4f0f7;
+  --nutui-info-3: #a3e8f2;
+  --nutui-info-4: #73d6ed;
+  --nutui-info-5: #00c2e3;
+  --nutui-info-6: #00abcc; // * 说明色 info
+  --nutui-info-7: #0094b5;
+  --nutui-info-8: #007d9e;
+  --nutui-info-9: #006985;
+  --nutui-info-10: #00526e;
+  --nutui-info-11: #003d59;
+  --nutui-info-12: #00324a;
+
+  --nutui-color-info: var(--nutui-info-6);
+  --nutui-color-text-disabled: var(--nutui-black-6);
+
   // 字体
-  --nutui-font-size-0: 10px;
-  --nutui-font-size-1: 12px;
-  --nutui-font-size-2: 14px;
-  --nutui-font-size-3: 16px;
-  --nutui-font-size-4: 18px;
+  --nutui-font-size-1: 10px; // font-text-mini
+  --nutui-font-size-2: 11px;
+  --nutui-font-size-3: 12px; // font-text-small
+  --nutui-font-size-4: 14px; // font-text、font-h3
+  --nutui-font-size-5: 16px; // font-text-large、font-h2
+  --nutui-font-size-6: 18px;
+  --nutui-font-size-7: 20px; // font-h1
+  --nutui-font-size-8: 24px; // 板块标题，指标数值、价格金额
+  --nutui-font-size-9: 32px; // 运营小标题
+  --nutui-font-size-10: 40px; // 运营大标题
   // 字重
-  --nutui-font-weight-bold: 400;
+  --nutui-font-weight: 400;
   // 行高
   --nutui-line-height-base: 1.5;
+
+  // space
+  --nutui-spacing-1: 2px; // spacing-xxs
+  --nutui-spacing-2: 4px; // spacing-xs
+  --nutui-spacing-3: 6px; // spacing-s
+  --nutui-spacing-4: 8px; // spacing-base
+  --nutui-spacing-5: 10px; // spacing-l
+  --nutui-spacing-6: 12px; // spacing-xl
+  --nutui-spacing-7: 14px; // spacing-xxl
+  --nutui-spacing-8: 16px; // spacing-xxxl
+  --nutui-spacing-9: 18px;
+  --nutui-spacing-10: 20px;
+
+  // radius
+  --nutui-radius-1: 2px; // radius-xxs
+  --nutui-radius-2: 4px; // radius-xs
+  --nutui-radius-3: 6px; // radius-s
+  --nutui-radius-4: 8px; // radius-base
+  --nutui-radius-5: 12px; // radius-l
+  --nutui-radius-6: 16px; // radius-xl
 }