Skip to content

Commit

Permalink
feat: v14
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiaoyatong
xiaoyatong committed Oct 23, 2024
1 parent 649d5f7 commit 737e54d
Show file tree
Hide file tree
Showing 6 changed files with 533 additions and 325 deletions.
4 changes: 2 additions & 2 deletions src/packages/tabs/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@
&-active {
font-weight: $font-weight-bold;
background-color: $white;
border-radius: $radius-s $radius-s 0 0;
border-radius: $radius-base $radius-base 0 0;
}
}
}
Expand All @@ -162,7 +162,7 @@
border-radius: $tabs-tab-button-border-radius;
font-weight: $font-weight-bold;
background-color: $tabs-tab-button-active-background-color;
color: $color-text-link;
color: $color-primary;
border: $tabs-tab-button-active-border;
}
}
Expand Down
29 changes: 13 additions & 16 deletions src/sites/mobile/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,23 +46,20 @@ const darkTheme = {
nutuiGray4: '#666666',
nutuiGray5: '#818181',
nutuiGray6: '#999999',
nutuiGray7: '#cccccc',
nutuiGray8: 'rgba(0, 0, 0, 0.4)',
nutuiGray9: 'rgba(0, 0, 0, 0.08)',
nutuiGray10: 'rgba(0, 0, 0, 0.02)',
nutuiGray7: '#e6e6e6',
nutuiBlack1: 'rgba(255, 255, 255, 0)',
nutuiBlack2: 'rgba(255, 255, 255, 0.2)',
nutuiBlack3: 'rgba(255, 255, 255, 0.06)',
// nutuiBlack4: 'rgba(0, 0, 0, 0.1)',
// nutuiBlack5: 'rgba(0, 0, 0, 0.2)',
// nutuiBlack6: 'rgba(0, 0, 0, 0.3)',
// nutuiBlack7: 'rgba(0, 0, 0, 0.4)',
// nutuiBlack8: 'rgba(0, 0, 0, 0.5)',
// nutuiBlack9: 'rgba(0, 0, 0, 0.6)',
nutuiBlack10: 'rgba(0, 0, 0, 0.7)',
// nutuiBlack11: 'rgba(0, 0, 0, 0.8)',
// nutuiBlack12: 'rgba(0, 0, 0, 0.9)',
// nutuiBlack13: 'rgba(0, 0, 0, 1)',
nutuiBlack2: 'rgba(20, 20, 20, 0.2)',
nutuiBlack3: 'rgba(20, 20, 20, 0.06)',
nutuiBlack4: 'rgba(20, 20, 20, 0.1)',
nutuiBlack5: 'rgba(20, 20, 20, 0.2)',
nutuiBlack6: 'rgba(20, 20, 20, 0.3)',
nutuiBlack7: 'rgba(20, 20, 20, 0.4)',
nutuiBlack8: 'rgba(20, 20, 20, 0.5)',
nutuiBlack9: 'rgba(20, 20, 20, 0.6)',
nutuiBlack10: 'rgba(20, 20, 20, 0.7)',
// nutuiBlack11: 'rgba(20, 20, 20, 0.8)',
// nutuiBlack12: 'rgba(20, 20, 20, 0.9)',
// nutuiBlack13: 'rgba(20, 20, 20, 1)',
nutuiWhite1: 'rgba(31, 31, 31, 0)',
// nutuiWhite2: 'rgba(255, 255, 255, 0.02)',
// nutuiWhite3: 'rgba(255, 255, 255, 0.06)',
Expand Down
312 changes: 254 additions & 58 deletions src/styles/theme-dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,83 @@ page {

--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-pressed: var(--nutui-brand-2);
--nutui-color-text-link: #040608;
// 品牌颜色语义化
--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-text: var(
--nutui-color-background-gray-1
); // 品牌主色调或其他深色背景下的文字
--nutui-color-primary-pressed: var(
--nutui-brand-7
); // 品牌主色调点击态，背景、边框、镂空状态下的文字
--nutui-color-primary-disabled: var(
--nutui-color-content-gray-1
); // 品牌主色调禁用态，背景、边框、镂空状态下的文字
--nutui-color-primary-disabled-special: var(
--nutui-brand-3
); // 品牌主色调特殊禁用态，通过操作后可转位默认态
--nutui-color-primary-light-pressed: var(
--nutui-brand-1
); // 品牌主色调镂空背景点击态

// service color
--nutui-golden-1: #fff2e0;
--nutui-golden-2: #ffd4a3;
--nutui-golden-3: #cc8241; // todo
--nutui-golden-4: #994d00; // todo

--nutui-golden-stop-1: #fff9f0;
--nutui-golden-stop-2: #ffe3c2;

// service color 语义化
--nutui-color-service: var(--nutui-golden-1);
--nutui-color-service-border: var(--nutui-golden-2);
--nutui-color-service-pressed: var(--nutui-golden-4);
--nutui-color-service-stop-1: var(--nutui-golden-stop-1);
--nutui-color-service-stop-2: var(--nutui-golden-stop-2);
--nutui-color-service-text: var(--nutui-golden-3);

// success color
--nutui-green-1: #ebfbeb;
--nutui-green-2: #00d900;
--nutui-green-3: #2aa32a;

// success color 语义化
--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-red-1: #ffebef;
--nutui-red-2: #ff0f23;

// danger color 语义化
--nutui-color-danger: var(--nutui-red-2); // 背景或文字
--nutui-color-danger-light: var(--nutui-red-1); // 背景

// warning color
--nutui-yellow-1: #fff5cc;
--nutui-yellow-2: #ffbf00;
--nutui-yellow-3: #c47600;

// warning color 语义化
--nutui-color-warning: var(--nutui-yellow-2); // 深背景
--nutui-color-warning-light: var(--nutui-yellow-1); // 浅背景
--nutui-color-warning-pressed: var(--nutui-yellow-3); // 文字

// info color
--nutui-blue-1: #e5f5ff;
--nutui-blue-2: #0073ff;

// info color 语义化
--nutui-color-info: var(--nutui-blue-2); // 背景或文字，链接色
--nutui-color-info-light: var(--nutui-blue-1); // 背景

--nutui-secondary-1: #14cc33; // 辅助色
--nutui-color-text-link: var(--nutui-blue-2);

// 背景色
// 卡片背景色
Expand All @@ -40,27 +109,27 @@ page {
// 二级文字色（常规），用于次级标题、属性标示、非主要信息引导等。
--nutui-gray-6: #999999;
// 一级文字色（重要）主要内容用色，常用语常规标题内容、细文浏览、常规按钮文字以及图表引导。
--nutui-gray-7: #cccccc;
--nutui-gray-7: #e6e6e6;

--nutui-black-1: rgba(255, 255, 255, 0);
// 蒙层色
// 容错蒙层
--nutui-black-2: rgba(255, 255, 255, 0.2);
--nutui-black-2: rgba(0, 0, 0, 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-3: rgba(20, 20, 20, 0.06);
--nutui-black-4: rgba(20, 20, 20, 0.1);
--nutui-black-5: rgba(20, 20, 20, 0.2);
--nutui-black-6: rgba(20, 20, 20, 0.3);
--nutui-black-7: rgba(20, 20, 20, 0.4);
--nutui-black-8: rgba(20, 20, 20, 0.5);
--nutui-black-9: rgba(20, 20, 20, 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-black-10: rgba(20, 20, 20, 0.7);
--nutui-black-11: rgba(20, 20, 20, 0.8);
--nutui-black-12: rgba(20, 20, 20, 0.9);
--nutui-black-13: rgba(20, 20, 20, 1);

--nutui-white-1: rgba(31, 31, 31, 0);
// --nutui-white-2: rgba(255, 255, 255, 0.02);
Expand All @@ -76,46 +145,173 @@ page {
--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-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-text: var(
--nutui-color-content-gray-3
); // 二级文字色或可操作用色（常规）
--nutui-color-text-help: var(
--nutui-color-content-gray-2
); // 三级文字色（次要）
--nutui-color-text-disabled: var(
--nutui-color-content-gray-1
); // 四级文字色（不可操作）

// 背景颜色值 语义化
--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: var(--nutui-color-background-gray-3); // 页面背景
--nutui-color-background-overlay: var(
--nutui-color-background-gray-1
); // 卡片背景
--nutui-color-background-sunken: var(
--nutui-color-background-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-part: var(--nutui-color-mask-gray-2); // 局部弹层
--nutui-color-mask-fault-toleran: var(--nutui-color-mask-gray-1); // 容错弹层

// 线颜色值 语义化
--nutui-color-line-gray-1: var(--nutui-black-3);
--nutui-color-border: var(--nutui-color-line-gray-1); // 间隔线或容错线
--nutui-color-border-disabled: var(
--nutui-color-content-gray-1
); // 组件边框禁用色

// 字体 ok
--nutui-font-size-8: 8px;
--nutui-font-size-9: 9px;
--nutui-font-size-10: 10px;
--nutui-font-size-12: 12px;
--nutui-font-size-13: 13px;
--nutui-font-size-14: 14px;
--nutui-font-size-15: 15px;
--nutui-font-size-16: 16px;
--nutui-font-size-17: 17px;
--nutui-font-size-18: 18px;
--nutui-font-size-19: 19px;
--nutui-font-size-20: 20px;
--nutui-font-size-21: 21px;
--nutui-font-size-22: 22px;
--nutui-font-size-23: 23px;
--nutui-font-size-24: 24px;
--nutui-font-size-25: 25px;
--nutui-font-size-26: 26px;

// 字号语义化
--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-base: var(--nutui-font-size-14); // 标准内容、名称类关键信息
--nutui-font-size-l: var(
--nutui-font-size-16
); // 汉字：楼层标题、卡片标题 数字：重复型价格，如搜推商卡
--nutui-font-size-xl: var(
--nutui-font-size-18
); // 汉字：页面标题、页面级最重要内容 数字：模块级主价格，如购物车、结算、底导
--nutui-font-size-xxl: var(
--nutui-font-size-24
); // 数字：页面级主价格，如商详、收银台
--nutui-font-size-xxxl: var(--nutui-font-size-26); // zanwu

// 字重 ok
--nutui-font-weight-light: 300; // 次要内容
--nutui-font-weight: 400; // 常规内容
--nutui-font-weight-bold: 600; // 强化内容

// 行高
--nutui-line-height-base: 1.5;

// 对齐方式
--nutui-text-align: left;

// 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-spacing-1: 1px;
--nutui-spacing-2: 2px;
--nutui-spacing-3: 3px;
--nutui-spacing-4: 4px;
--nutui-spacing-5: 5px;
--nutui-spacing-6: 6px;
--nutui-spacing-7: 7px;
--nutui-spacing-8: 8px;
--nutui-spacing-9: 9px;
--nutui-spacing-10: 10px;
--nutui-spacing-11: 11px;
--nutui-spacing-12: 12px;
--nutui-spacing-13: 13px;
--nutui-spacing-14: 14px;
--nutui-spacing-15: 15px;
--nutui-spacing-16: 16px;

// space 语义化
--nutui-spacing-xxxs: var(--nutui-spacing-2); // 狭小空间内的紧密关联内容
--nutui-spacing-xxs: var(
--nutui-spacing-4
); // 导购：紧密关联内容；平台：紧密关联内容
--nutui-spacing-xs: var(
--nutui-spacing-6
); // 导购：常规关联内容；平台：替代常规关联内容
--nutui-spacing-s: var(--nutui-spacing-7); // 一行二、一行三卡片间距
--nutui-spacing-base: var(
--nutui-spacing-8
); // 导购：弱关联内容；平台：常规关联内容
--nutui-spacing-l: var(--nutui-spacing-9); // 一行四卡片间距
--nutui-spacing-xl: var(
--nutui-spacing-12
); // 导购：无关联内容；平台：弱关联内容
--nutui-spacing-xxl: var(--nutui-spacing-16); // 平台：无关联内容

// radius ok
--nutui-radius-0: 0px;
--nutui-radius-1: 1px;
--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;
--nutui-radius-3: 3px;
--nutui-radius-4: 4px;
--nutui-radius-5: 5px;
--nutui-radius-6: 6px;
--nutui-radius-7: 7px;
--nutui-radius-8: 8px;
--nutui-radius-9: 9px;
--nutui-radius-10: 10px;
--nutui-radius-11: 11px;
--nutui-radius-12: 12px;
--nutui-radius-13: 13px;
--nutui-radius-14: 14px;
--nutui-radius-15: 15px;
--nutui-radius-16: 16px;
--nutui-radius-17: 17px;
--nutui-radius-18: 18px;
--nutui-radius-19: 19px;
--nutui-radius-20: 20px;
--nutui-radius-21: 21px;
--nutui-radius-22: 22px;
--nutui-radius-23: 23px;
--nutui-radius-24: 24px;

// radius 语义化
--nutui-radius-xxxs: var(--nutui-radius-0); // 内容描述型的详情页面通栏结构
--nutui-radius-xxs: var(--nutui-radius-2); // 标签
--nutui-radius-xs: var(--nutui-radius-4); // 单行高度20、24、28的组件
--nutui-radius-s: var(--nutui-radius-6); // 单行高度32、36的组件
--nutui-radius-base: var(--nutui-radius-8); // 单行高度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-xxxl: var(--nutui-radius-16); // zanwu
}
Loading

0 comments on commit 737e54d

Please sign in to comment.