-
Notifications
You must be signed in to change notification settings - Fork 266
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
huangting73
committed
Oct 25, 2024
1 parent
f272e5a
commit dda8592
Showing
2 changed files
with
2,656 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,266 @@ | ||
| :root, | ||
| page { | ||
| --nutui-brand-1: #ffe5e5; // 梯度1 | ||
| --nutui-brand-2: #ffcccc; // 梯度2 | ||
| --nutui-brand-3: #ffb2b2; // 梯度3 | ||
| --nutui-brand-4: #ff9999; // 梯度4 | ||
| --nutui-brand-5: #ff7f7f; // 梯度5 | ||
| --nutui-brand-6: #ff6666; // 梯度6 | ||
| --nutui-brand-7: #ff4c4c; // 梯度7 | ||
| --nutui-brand-8: #ff4144; // 梯度8 * 主题色 primary brand | ||
| --nutui-brand-9: #e6393b; // 梯度9 | ||
| --nutui-brand-10: #cc3133; // 梯度10 | ||
| --nutui-brand-11: #b32a2b; // 梯度11 | ||
| --nutui-brand-12: #992222; // 梯度12 | ||
|
|
||
| --nutui-brand-stop-1: #ff9999; // 渐变色起 | ||
| --nutui-brand-stop-2: #ff6666; // 渐变色止 | ||
|
|
||
| --nutui-color-primary-pressed: var(--nutui-brand-7); | ||
| --nutui-color-primary-disabled: var(--nutui-brand-3); | ||
| --nutui-color-primary-light: var(--nutui-brand-1); | ||
| --nutui-color-primary-light-pressed: var(--nutui-brand-2); | ||
|
|
||
|
|
||
| --nutui-gray-0: #fbf1eb; // color-background | ||
| // 卡片背景色 | ||
| --nutui-gray-1: #fff4f4; // color-border-tint | ||
| // 通用背景色、轮廓描边色 | ||
| --nutui-gray-2: #f0f0f0; // color-border-base | ||
| // 轮廓描边色（适中） | ||
| --nutui-gray-3: #eeeeee; // color-border-shade | ||
| // 轮廓描边色（深） | ||
| --nutui-gray-4: #e6e6e6; | ||
| --nutui-gray-5: #d8d8d8; | ||
| --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.55); // | ||
| // 全局蒙层，用于弹出层、弹窗、新功能引导出现的整页遮罩 | ||
| --nutui-black-9: rgba(0, 0, 0, 0.6); // color-text-regular | ||
| // 二级文本色，正文文本色，用于次级标题，属性标示、非主要信息引导等 | ||
| --nutui-black-10: rgba(0, 0, 0, 0.7); // | ||
| --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: #eaf9f0; | ||
| --nutui-green-2: #cdf5db; | ||
| --nutui-green-3: #b2f0c9; | ||
| --nutui-green-4: #7de2a3; | ||
| --nutui-green-5: #51d07e; | ||
| --nutui-green-6: #1DB270; // * 成功色 success | ||
| --nutui-green-7: #1a9f63; | ||
| --nutui-green-8: #178d57; | ||
| --nutui-green-9: #147b4b; | ||
| --nutui-green-10: #116a40; | ||
| --nutui-green-11: #0e5935; | ||
| --nutui-green-12: #0b482a; | ||
|
|
||
| --nutui-orange-1: #fff4e6; | ||
| --nutui-orange-2: #ffe8cc; | ||
| --nutui-orange-3: #ffd9b3; | ||
| --nutui-orange-4: #ffcc99; | ||
| --nutui-orange-5: #ffbf80; | ||
| --nutui-orange-6: #ffb366; // * 警告色 warning | ||
| --nutui-orange-7: #ff9933; | ||
| --nutui-orange-8: #ff8000; | ||
| --nutui-orange-9: #cc6600; | ||
| --nutui-orange-10: #994d00; | ||
| --nutui-orange-11: #663300; | ||
| --nutui-orange-12: #331a00; | ||
|
|
||
|
|
||
| --nutui-red-1: #ffecec; | ||
| --nutui-red-2: #ffd9d9; | ||
| --nutui-red-3: #ffc6c6; | ||
| --nutui-red-4: #ff9999; | ||
| --nutui-red-5: #ff7373; | ||
| --nutui-red-6: #ff4d4d; | ||
| --nutui-red-7: #ff2626; | ||
| --nutui-red-8: #ff4144; // * 危险色 danger | ||
| --nutui-red-9: #e6393a; | ||
| --nutui-red-10: #cc3232; | ||
| --nutui-red-11: #b32b2b; | ||
| --nutui-red-12: #802020; | ||
|
|
||
| --nutui-info-1: #e5e9fa; | ||
| --nutui-info-2: #c4cffa; | ||
| --nutui-info-3: #a3b5f7; | ||
| --nutui-info-4: #7387f2; | ||
| --nutui-info-5: #3e5cd7; // * 说明色 info | ||
| --nutui-info-6: #364fc2; | ||
| --nutui-info-7: #2e42ad; | ||
| --nutui-info-8: #263598; | ||
| --nutui-info-9: #1e2883; | ||
| --nutui-info-10: #161b6e; | ||
| --nutui-info-11: #0e0e59; | ||
| --nutui-info-12: #060a4a; | ||
|
|
||
| --nutui-color-info: var(--nutui-info-6); | ||
| --nutui-color-text-disabled: var(--nutui-black-6); | ||
| // 字体 | ||
| --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-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: 16px; // radius-xxs | ||
| --nutui-radius-2: 18px; // radius-xs | ||
| --nutui-radius-3: 20px; // radius-s | ||
| --nutui-radius-4: 22px; // radius-base | ||
| --nutui-radius-5: 24px; // radius-l | ||
| --nutui-radius-6: 36px; // radius-xl | ||
|
|
||
| // 语义名 | ||
| --nutui-color-default: var(--nutui-gray-2); | ||
| --nutui-color-default-press: var(--nutui-gray-3); | ||
| --nutui-color-default-disabled: var(--nutui-gray-1); | ||
| --nutui-color-default-light: var(--nutui-gray-1); | ||
|
|
||
| --nutui-color-primary: var(--nutui-brand-8); | ||
| --nutui-color-primary-pressed: var(--nutui-brand-9); | ||
| --nutui-color-primary-disabled: var(--nutui-brand-3); | ||
| --nutui-color-primary-light: var(--nutui-brand-1); | ||
|
|
||
| --nutui-color-success: var(--nutui-green-6); | ||
| --nutui-color-success-press: var(--nutui-green-8); | ||
| --nutui-color-success-disabled: var(--nutui-green-3); | ||
| --nutui-color-success-light: var(--nutui-green-1); | ||
|
|
||
| --nutui-color-warning: var(--nutui-orange-6); | ||
| --nutui-color-warning-press: var(--nutui-orange-8); | ||
| --nutui-color-warning-disabled: var(--nutui-orange-3); | ||
| --nutui-color-warning-light: var(--nutui-orange-1); | ||
|
|
||
| --nutui-color-danger: var(--nutui-red-8); | ||
| --nutui-color-danger-press: var(--nutui-red-9); | ||
| --nutui-color-danger-disabled: var(--nutui-red-3); | ||
| --nutui-color-danger-light: var(--nutui-red-1); | ||
|
|
||
| --nutui-color-info: var(--nutui-info-6); | ||
| --nutui-color-info-press: var(--nutui-info-7); | ||
| --nutui-color-info-disabled: var(--nutui-info-3); | ||
| --nutui-color-info-light: var(--nutui-info-1); | ||
|
|
||
| --nutui-color-dark: var(--nutui-gray-12); | ||
| --nutui-color-light: var(--nutui-gray-0); | ||
|
|
||
| --nutui-color-surface-1: var(--nutui-gray-0); | ||
| --nutui-color-surface-2: var(--nutui-white-12); | ||
| --nutui-color-surface-3: var(--nutui-white-12); | ||
| --nutui-color-surface-4: var(--nutui-white-12); | ||
| --nutui-color-surface-overlay: var(--nutui-black-8); | ||
|
|
||
| --nutui-color-border-shade: var(--nutui-gray-3); | ||
| --nutui-color-border: var(--nutui-gray-2); | ||
| --nutui-color-border-tint: var(--nutui-gray-1); | ||
|
|
||
| --nutui-color-title: var(--nutui-gray-12); | ||
| --nutui-color-text: var(--nutui-gray-10); | ||
| --nutui-color-text-help: var(--nutui-gray-8); | ||
| --nutui-color-text-disabled: var(--nutui-gray-7); | ||
| --nutui-color-text-dark: var(--nutui-white-12); | ||
| --nutui-color-text-link: var(--nutui-color-primary); | ||
|
|
||
| --nutui-font-h1: var(--nutui-font-size-7); | ||
| --nutui-font-h2: var(--nutui-font-size-6); | ||
| --nutui-font-h3: var(--nutui-font-size-5); | ||
| --nutui-font-h4: var(--nutui-font-size-4); | ||
| --nutui-font-h5: var(--nutui-font-size-3); | ||
| --nutui-font-text-large: var(--nutui-font-size-5); | ||
| --nutui-font-text: var(--nutui-font-size-4); | ||
| --nutui-font-text-small: var(--nutui-font-size-3); | ||
| --nutui-font-text-xs: var(--nutui-font-size-2); | ||
| --nutui-font-text-mini: var(--nutui-font-size-1); | ||
|
|
||
| --nutui-font-weight: 400; | ||
| --nutui-font-weight-bold: 600; | ||
| --nutui-line-height: 140%; | ||
|
|
||
| --nutui-spacing-xxs: var(--nutui-spacing-1); | ||
| --nutui-spacing-xs: var(--nutui-spacing-2); | ||
| --nutui-spacing-s: var(--nutui-spacing-3); | ||
| --nutui-spacing-base: var(--nutui-spacing-4); | ||
| --nutui-spacing-l: var(--nutui-spacing-5); | ||
| --nutui-spacing-xl: var(--nutui-spacing-6); | ||
| --nutui-spacing-xxl: var(--nutui-spacing-7); | ||
| --nutui-spacing-xxxl: var(--nutui-spacing-8); | ||
| --nutui-spacing-4xl: var(--nutui-spacing-9); | ||
| --nutui-spacing-5xl: var(--nutui-spacing-10); | ||
|
|
||
| --nutui-radius-xxs: var(--nutui-radius-1); | ||
| --nutui-radius-xs: var(--nutui-radius-2); | ||
| --nutui-radius-s: var(--nutui-radius-3); | ||
| --nutui-radius-base: var(--nutui-radius-4); | ||
| --nutui-radius-l: var(--nutui-radius-5); | ||
| --nutui-radius-xl: var(--nutui-radius-6); | ||
| --nutui-radius-full: 50%; | ||
|
|
||
| --nutui-shadow-light: 0 0 4px 0 rgba(0, 0, 0, 0.05); | ||
| --nutui-shadow-raised: 0 0 6px 0 rgba(0, 0, 0, 0.1); | ||
| --nutui-shadow-overlay: 0 0 8px 0 rgba(0, 0, 0, 0.2); | ||
|
|
||
| // 其他语义变量 | ||
| --nutui-color-primary-stop-1: var(--nutui-brand-stop-1); | ||
| --nutui-color-primary-stop-2: var(--nutui-brand-stop-2); | ||
| --nutui-color-primary-text: #ffffff; | ||
| --nutui-color-primary-light-pressed: var(--nutui-brand-2); | ||
| --nutui-color-text-link: var(--nutui-brand-8); | ||
| --nutui-button-border-radius: var(--nutui-radius-base); | ||
| --nutui-button-default-color: var(--nutui-black-12); | ||
| --nutui-button-default-background-color: #fff; | ||
| --nutui-button-default-border-color: var(--nutui-black-12); | ||
| --nutui-button-default-disabled: var(--nutui-black-6); | ||
| --nutui-button-default-disabled-background-color: var(--nutui-black-5); | ||
| --nutui-button-default-disabled-border-color: var(--nutui-black-5); | ||
| } |
Oops, something went wrong.