@aloudata/aloudata-design 0.3.4 → 0.4.0-beta.2

package/lib/style/themes/default/themeColor.module.less

@@ -1,136 +1,263 @@
 /**
 *中性浅色背景 Neutral Light
-* 主要用于文字颜色
+* 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
-@NL0: #001A33;
-@NL97: fade(@NL0, 3%);
-@NL95: fade(@NL0, 5%);
-@NL90: fade(@NL0, 10%);
-@NL80: fade(@NL0, 20%);
-@NL70: fade(@NL0, 30%);
-@NL60: fade(@NL0, 40%);
-@NL50: fade(@NL0, 50%);
-@NL40: fade(@NL0, 60%);
-@NL30: fade(@NL0, 70%);
-@NL20: fade(@NL0, 80%);
-@NL10: fade(@NL0, 90%);
+@NL0: #101828;
+@NL97: fade(@NL0, 3%);//TODO: 版本升级后，删除NL97;新版无此色号
+@NL95:#FCFCFD; 
+@NL90: #F9FAFB;
+@NL80: #F2F4F7;
+@NL70: #EAECF0;
+@NL60: #D0D5DD;
+@NL50: #98A2B3;
+@NL40: #667085;
+@NL30: #475467;
+@NL20: #344054;
+@NL10: #1D2939;
 
 /**
 *中性深色背景 Neutral Dark
-* 主要用于文字颜色
+* 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
-@ND0: #FFFFFF;
-@ND97: fade(@ND0, 3%);
-@ND95: fade(@ND0, 5%);
-@ND90: fade(@ND0, 10%);
-@ND80: fade(@ND0, 20%);
-@ND70: fade(@ND0, 30%);
-@ND60: fade(@ND0, 40%);
-@ND50: fade(@ND0, 50%);
-@ND40: fade(@ND0, 60%);
-@ND30: fade(@ND0, 70%);
-@ND20: fade(@ND0, 80%);
-@ND10: fade(@ND0, 90%);
+@ND0: #FCFCFD;
+@ND97: fade(@ND0, 3%);//TODO: 版本升级后，删除ND97;新版无此色号
+@ND95:#101828; 
+@ND90: #1D2939;
+@ND80: #344054;
+@ND70: #475467;
+@ND60: #667085;
+@ND50: #98A2B3;
+@ND40: #D0D5DD;
+@ND30: #EAECF0;
+@ND20: #F2F4F7;
+@ND10: #F9FAFB;
 
 /**
 * 品牌色 Brand
-* 用作主操作强调、文字链、品牌传递
+* 主色调是你的 "品牌 "颜色，用于所有互动元素，如按钮、链接、输入等。这种颜色可以定义整体感觉，并能引起人们的情感。
 **/
-@B10: #001252;
-@B20: #071E6A;
-@B30: #0F2B7F;
-@B40: #0F38A6;
-@B50: #1945B3;
-@B60: #1552DF;
-@B70: #5588F6;
-@B80: #79A5FE;
-@B90: #ABC8FE;
-@B95: #D4E4FF;
-@B98: #EFF5FF;
+@B10: #194185;
+@B20: #1849A9;
+@B30: #175CD3;
+@B40: #1570EF;
+@B50: #2E90FA;
+@B60: #53B1FD;
+@B70: #84CAFF;
+@B80: #B2DDFF;
+@B90: #D1E9FF;
+@B95: #EFF8FF;
+@B98: #F5FAFF;
 
 /**
 * 辅助A Secondary A
-* 表达完成、成功
+* 绿色传达了一个积极的行动，积极的趋势，或成功的确认。
 **/
-@SA10: #003331;
-@SA20: #00493F;
-@SA30: #015844;
-@SA40: #026E4A;
-@SA50: #03834C;
-@SA60: #05994A;
-@SA70: #35C168;
-@SA80: #5EE080;
-@SA90: #96F4A5;
-@SA95: #C9F9CC;
-@SA98: #F0FFF0;
+@SA10: #054F31;
+@SA20: #05603A;
+@SA30: #027A48;
+@SA40: #1570EF;
+@SA50: #12B76A;
+@SA60: #32D583;
+@SA70: #6CE9A6;
+@SA80: #A6F4C5;
+@SA90: #D1FADF;
+@SA95: #ECFDF3;
+@SA98: #F6FEF9;
 
 /**
 * 辅助B Secondary B
-* 表达提醒、警告
+* 橙色可以传达一个警示信号。这些颜色通常被用于提醒，以抓住用户的注意力。
 **/
-@SB10: #472800;
-@SB20: #7A4C07;
-@SB30: #93610D;
-@SB40: #B77F14;
-@SB50: #DB9F1D;
-@SB60: #FFC229;
-@SB70: #FFD55E;
-@SB80: #FFE17E;
-@SB90: #FFEEA9;
-@SB95: #FFF7D4;
-@SB98: #FFFCEB;
+@SB10: #7A2E0E;
+@SB20: #93370D;
+@SB30: #B54708;
+@SB40: #DC6803;
+@SB50: #F79009;
+@SB60: #FDB022;
+@SB70: #FEC84B;
+@SB80: #FEDF89;
+@SB90: #FEF0C7;
+@SB95: #FFFAEB;
+@SB98: #FFFCF5;
 
 /**
 * 辅助C Secondary C
-* 表达错误、失败
+* 红色在错误状态和 "破坏性 "行动中使用。它们传达了一种破坏性/负面消极的行动，例如将一个用户从你的团队中删除。
 **/
-@SC10: #4D000B;
-@SC20: #76070F;
-@SC30: #8F0C0C;
-@SC40: #B11E13;
-@SC50: #D4361B;
-@SC60: #F75426;
-@SC70: #FA895B;
-@SC80: #FCAB7C;
-@SC90: #FECDA8;
-@SC95: #FEE9D3;
-@SC98: #FFF8F0;
+@SC10: #7A271A;
+@SC20: #912018;
+@SC30: #B42318;
+@SC40: #D92D20;
+@SC50: #F04438;
+@SC60: #F97066;
+@SC70: #FDA29B;
+@SC80: #FECDCA;
+@SC90: #FEE4E2;
+@SC95: #FEF3F2;
+@SC98: #FFFBFA;
 
 /**
 * 背景色 Background
-* 主要用于背景色
+* 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
-@BG0: #121212;
-@BG10: #0F1524;
-@BG20: #1F2B47;
-@BG30: #314168;
-@BG40: #455987;
-@BG50: #5C71A3;
-@BG60: #7A8DB8;
-@BG70: #9CA9C9;
-@BG80: #BDC6DB;
-@BG90: #E7EBF3;
-@BG95: #F5F6FA;
-@BG97: #FBFCFE;
-@BG100: #FFFFFF;
+@BG0: #000000;
+@BG10: #101828;
+@BG20: #1D2939;
+@BG30: #475467;
+@BG40: #667085;
+@BG50: #98A2B3;
+@BG60: #D0D5DD;
+@BG70: #EAECF0;
+@BG80: #F2F4F7;
+@BG90: #F5F6F7;
+@BG95: #F9FAFB;
+@BG97: #FCFCFD;
+@BG100:#FFFFFF;
 
 
 /***
-* 黑白
+* 投影
 ***/
-@white:#FFFFFF;
-@black:#121212;
+@shadow-L: 0px 11px 15px rgba(0, 26, 51, 0.1), 0px 9px 46px rgba(0, 26, 51, 0.05), 0px 24px 38px rgba(0, 26, 51, 0.03);
+@shadow-xl: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03);
+@shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03);
+@shadow-md: 0px 4px 6px -2px rgba(16, 24, 40, 0.08), 0px 2px 4px -2px rgba(16, 24, 40, 0.03);
+@shadow-sm: 0px 1px 4px rgba(16, 24, 40, 0.06), 0px 1px 2px rgba(16, 24, 40, 0.04);
+@shadow-xs: 0px 1px 2px rgba(16, 24, 40, 0.05);
+@shadow-body-top-left: -4px -4px 2px rgba(0, 0, 0, 0.05);
 
-/***
-* 图片
-***/
-@imageholder: fade(#999898, 30%);
-@mate: fade(#000000, 50%);
+// 业务颜色 
+// 除了原色之外，在业务、提示和标签等组件中使用一些次要颜色也很有帮助。这些次要颜色应该少用或作为重点使用，而主要颜色应该占优先地位。
+
+/**
+* 业务A (Tertiary A)
+**/
+
+@TA10: #2B4212;
+@TA20: #335015;
+@TA30: #3F611A;
+@TA40: #4F7A21;
+@TA50: #669F2A;
+@TA60: #86CB3C;
+@TA70: #ACDC79;
+@TA80: #CDEAAF;
+@TA90: #E6F4D7;
+@TA95: #F5FBEE;
+@TA98: #FAFDF7;
+
+
+/**
+* 业务B (Tertiary B)
+**/
+
+@TB10: #134E48;
+@TB20: #125D56;
+@TB30: #0F7569;
+@TB40: #0E9384;
+@TB50: #15B79E;
+@TB60: #2ED2B7;
+@TB70: #5EE9CF;
+@TB80: #99F6E0;
+@TB90: #CCFBEF;
+@TB95: #F0FDF9;
+@TB98: #F6FEFC;
+
+/**
+* 业务C (Tertiary C)
+**/
+
+@TC10: #013743;
+@TC20: #024D5E;
+@TC30: #036E86;
+@TC40: #0386A4;
+@TC50: #049BBD;
+@TC60: #05AED4;
+@TC70: #72C0DD;
+@TC80: #A1D2E6;
+@TC90: #C5E2EE;
+@TC95: #E4F0F6;
+@TC98: #F1F8FB;
+
+/**
+* 业务D (Tertiary D)
+**/
+
+@TD10: #2D3282;
+@TD20: #2D31A5;
+@TD30: #3537CC;
+@TD40: #444CE7;
+@TD50: #6071F3;
+@TD60: #7F98F9;
+@TD70: #A3BBFD;
+@TD80: #C7D7FE;
+@TD90: #E0EAFF;
+@TD95: #EEF4FF;
+@TD98: #F5F8FF;
+
+/**
+* 业务E (Tertiary E)
+**/
+
+@TE10: #271B47;
+@TE20: #382765;
+@TE30: #4F378F;
+@TE40: #6144AF;
+@TE50: #704ECB;
+@TE60: #7E58E3;
+@TE70: #A08AE8;
+@TE80: #BCAFEE;
+@TE90: #D4CDF4;
+@TE95: #EAE7F9;
+@TE98: #F5F3FC;
+
+/**
+* 业务F (Tertiary F)
+**/
+
+@TF10: #6E1876;
+@TF20: #821890;
+@TF30: #9F1AB0;
+@TF40: #BA24D5;
+@TF50: #D444F1;
+@TF60: #E477FA;
+@TF70: #EDAAFC;
+@TF80: #F6D0FE;
+@TF90: #FBE8FF;
+@TF95: #FDF4FF;
+@TF98: #FEFAFF;
+
+/**
+* 业务G (Tertiary G)
+**/
+
+@TG10: #851651;
+@TG20: #9E155E;
+@TG30: #C01573;
+@TG40: #DC2590;
+@TG50: #EE46BC;
+@TG60: #F570C7;
+@TG70: #F9A7DF;
+@TG80: #FCCEEE;
+@TG90: #FCE7F6;
+@TG95: #FDF2FA;
+@TG98: #FEF6FB;
+
+/**
+* 业务H (Tertiary H)
+**/
+
+@TH10: #713B11;
+@TH20: #85490D;
+@TH30: #A15B06;
+@TH40: #CA8403;
+@TH50: #EAA907;
+@TH60: #FAC414;
+@TH70: #FDE272;
+@TH80: #FEEE94;
+@TH90: #FDF7C3;
+@TH95: #FEFBE8;
+@TH98: #FEFDF0;
 
-/***
-* 投影
-***/
-@shadow-L:0px 11px 15px rgba(0, 26, 51, 0.1), 0px 9px 46px rgba(0, 26, 51, 0.05), 0px 24px 38px rgba(0, 26, 51, 0.03);
 
 // 用css module的能力，将less变量输出给js，供js文件中使用
 :export {
@@ -215,9 +342,106 @@
   BG95: @BG95;
   BG97: @BG97;
   BG100: @BG100;
-  WHITE: @white;
-  BLACK: @black;
-  IMAGE_HOLDER: @imageholder;
-  MATE: @mate;
   SHADOW_L: @shadow-L;
+  SHADOW_BODY_TOP_LEFT:@shadow-body-top-left;
+  SHADOW_XS: @shadow-xs;
+  SHADOW_SM: @shadow-sm;
+  SHADOW_MD: @shadow-md;
+  SHADOW_LG: @shadow-lg;
+  SHADOW_XL: @shadow-xl;
+  TA10: @TA10;
+  TA20: @TA20;
+  TA30: @TA30;
+  TA40: @TA40;
+  TA50: @TA50;
+  TA60: @TA60;
+  TA70: @TA70;
+  TA80: @TA80;
+  TA90: @TA90;
+  TA95: @TA95;
+  TA98: @TA98; 
+
+  TB10: @TB10;
+  TB20: @TB20;
+  TB30: @TB30;
+  TB40: @TB40;
+  TB50: @TB50;
+  TB60: @TB60;
+  TB70: @TB70;
+  TB80: @TB80;
+  TB90: @TB90;
+  TB95: @TB95;
+  TB98: @TB98; 
+
+  TC10: @TC10;
+  TC20: @TC20;
+  TC30: @TC30;
+  TC40: @TC40;
+  TC50: @TC50;
+  TC60: @TC60;
+  TC70: @TC70;
+  TC80: @TC80;
+  TC90: @TC90;
+  TC95: @TC95;
+  TC98: @TC98; 
+
+  TD10: @TD10;
+  TD20: @TD20;
+  TD30: @TD30;
+  TD40: @TD40;
+  TD50: @TD50;
+  TD60: @TD60;
+  TD70: @TD70;
+  TD80: @TD80;
+  TD90: @TD90;
+  TD95: @TD95;
+  TD98: @TD98; 
+
+  TE10: @TE10;
+  TE20: @TE20;
+  TE30: @TE30;
+  TE40: @TE40;
+  TE50: @TE50;
+  TE60: @TE60;
+  TE70: @TE70;
+  TE80: @TE80;
+  TE90: @TE90;
+  TE95: @TE95;
+  TE98: @TE98; 
+
+  TF10: @TF10;
+  TF20: @TF20;
+  TF30: @TF30;
+  TF40: @TF40;
+  TF50: @TF50;
+  TF60: @TF60;
+  TF70: @TF70;
+  TF80: @TF80;
+  TF90: @TF90;
+  TF95: @TF95;
+  TF98: @TF98; 
+
+  TG10: @TG10;
+  TG20: @TG20;
+  TG30: @TG30;
+  TG40: @TG40;
+  TG50: @TG50;
+  TG60: @TG60;
+  TG70: @TG70;
+  TG80: @TG80;
+  TG90: @TG90;
+  TG95: @TG95;
+  TG98: @TG98; 
+
+  TH10: @TH10;
+  TH20: @TH20;
+  TH30: @TH30;
+  TH40: @TH40;
+  TH50: @TH50;
+  TH60: @TH60;
+  TH70: @TH70;
+  TH80: @TH80;
+  TH90: @TH90;
+  TH95: @TH95;
+  TH98: @TH98; 
 }

package/lib/style/themes/default/themeColor.module.less.d.ts

@@ -25,9 +25,6 @@ interface CssExports {
   'BG90': string;
   'BG95': string;
   'BG97': string;
-  'BLACK': string;
-  'IMAGE_HOLDER': string;
-  'MATE': string;
   'ND0': string;
   'ND10': string;
   'ND20': string;
@@ -85,8 +82,101 @@ interface CssExports {
   'SC90': string;
   'SC95': string;
   'SC98': string;
+  'SHADOW_BODY_TOP_LEFT': string;
   'SHADOW_L': string;
-  'WHITE': string;
+  'SHADOW_LG': string;
+  'SHADOW_MD': string;
+  'SHADOW_SM': string;
+  'SHADOW_XL': string;
+  'SHADOW_XS': string;
+  'TA10': string;
+  'TA20': string;
+  'TA30': string;
+  'TA40': string;
+  'TA50': string;
+  'TA60': string;
+  'TA70': string;
+  'TA80': string;
+  'TA90': string;
+  'TA95': string;
+  'TA98': string;
+  'TB10': string;
+  'TB20': string;
+  'TB30': string;
+  'TB40': string;
+  'TB50': string;
+  'TB60': string;
+  'TB70': string;
+  'TB80': string;
+  'TB90': string;
+  'TB95': string;
+  'TB98': string;
+  'TC10': string;
+  'TC20': string;
+  'TC30': string;
+  'TC40': string;
+  'TC50': string;
+  'TC60': string;
+  'TC70': string;
+  'TC80': string;
+  'TC90': string;
+  'TC95': string;
+  'TC98': string;
+  'TD10': string;
+  'TD20': string;
+  'TD30': string;
+  'TD40': string;
+  'TD50': string;
+  'TD60': string;
+  'TD70': string;
+  'TD80': string;
+  'TD90': string;
+  'TD95': string;
+  'TD98': string;
+  'TE10': string;
+  'TE20': string;
+  'TE30': string;
+  'TE40': string;
+  'TE50': string;
+  'TE60': string;
+  'TE70': string;
+  'TE80': string;
+  'TE90': string;
+  'TE95': string;
+  'TE98': string;
+  'TF10': string;
+  'TF20': string;
+  'TF30': string;
+  'TF40': string;
+  'TF50': string;
+  'TF60': string;
+  'TF70': string;
+  'TF80': string;
+  'TF90': string;
+  'TF95': string;
+  'TF98': string;
+  'TG10': string;
+  'TG20': string;
+  'TG30': string;
+  'TG40': string;
+  'TG50': string;
+  'TG60': string;
+  'TG70': string;
+  'TG80': string;
+  'TG90': string;
+  'TG95': string;
+  'TG98': string;
+  'TH10': string;
+  'TH20': string;
+  'TH30': string;
+  'TH40': string;
+  'TH50': string;
+  'TH60': string;
+  'TH70': string;
+  'TH80': string;
+  'TH90': string;
+  'TH95': string;
+  'TH98': string;
 }
 export const cssExports: CssExports;
 export default cssExports;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aloudata/aloudata-design",
-  "version": "0.3.4",
+  "version": "0.4.0-beta.2",
   "scripts": {
     "start": "dumi dev",
     "docs:build": "dumi build",
@@ -52,7 +52,7 @@
     ]
   },
   "dependencies": {
-    "@aloudata/icons-react": "^0.0.7",
+    "@aloudata/icons-react": "^0.0.9",
     "@ant-design/icons": "^4.7.0",
     "antd": "^4.21.5",
     "babel-preset-react-app": "^10.0.1",