@aloudata/aloudata-design 2.18.3 → 2.19.0-beta.1

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

@@ -2,135 +2,130 @@
 *中性浅色背景 Neutral Light
 * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
-@NL0: #171717;
-@NL97: fade(@NL0, 3%); //TODO: 版本升级后，删除NL97;新版无此色号
-@NL95: #fcfcfd;
-@NL90: #f9fafb;
-@NL80: #f2f4f7;
-@NL70: #eaecf0;
-@NL60: #dbdbdb;
-@NL50: #858585;
-@NL40: #575757;
-@NL30: #475467;
-@NL20: #171717;
-@NL10: #171717;
+@NL0: var(--semantic-neutral-900);
+@NL97: var(--semantic-neutral-alpha-25);
+@NL95: var(--semantic-neutral-25);
+@NL90: var(--semantic-neutral-50);
+@NL80: var(--semantic-neutral-100);
+@NL70: var(--semantic-neutral-200);
+@NL60: var(--semantic-neutral-300);
+@NL50: var(--semantic-neutral-500);
+@NL40: var(--semantic-neutral-600);
+@NL30: var(--semantic-neutral-700);
+@NL20: var(--semantic-neutral-800);
+@NL10: var(--semantic-neutral-900);
 
 /**
 *中性深色背景 Neutral Dark
 * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
-@ND0: #ffffff;
-@ND97: fade(@ND0, 3%); //TODO: 版本升级后，删除ND97;新版无此色号
-@ND95: #101828;
-@ND90: #1d2939;
-@ND80: #344054;
-@ND70: #475467;
-@ND60: #667085;
-@ND50: #98a2b3;
-@ND40: #d5d5d5;
-@ND30: #eaecf0;
-@ND20: #f2f4f7;
-@ND10: #f9fafb;
+@ND0: var(--global-white-alpha-950);
+@ND97: var(--global-white-alpha-900);
+@ND95: var(--semantic-neutral-950);
+@ND90: var(--semantic-neutral-900);
+@ND80: var(--semantic-neutral-800);
+@ND70: var(--semantic-neutral-700);
+@ND60: var(--semantic-neutral-600);
+@ND50: var(--semantic-neutral-500);
+@ND40: var(--semantic-neutral-300);
+@ND30: var(--semantic-neutral-100);
+@ND20: var(--semantic-neutral-100);
+@ND10: var(--semantic-neutral-50);
 
 /**
 * 品牌色 Brand
 * 主色调是你的 "品牌 "颜色，用于所有互动元素，如按钮、链接、输入等。这种颜色可以定义整体感觉，并能引起人们的情感。
 **/
-@B10: #15325b;
-@B20: #1e4479;
-@B30: #3769ad;
-@B40: #3271c9;
-@B50: #3271c9;
-@B60: #84aadf;
-@B70: #adc6e9;
-@B80: #d6e3f4;
-@B90: #f0f6ff;
-@B95: #f2f5fa;
-@B98: #f2f5fa;
+@B10: var(--semantic-brand-900);
+@B20: var(--semantic-brand-800);
+@B30: var(--semantic-brand-700);
+@B40: var(--semantic-brand-600);
+@B50: var(--semantic-brand-600);
+@B60: var(--semantic-brand-500);
+@B70: var(--semantic-brand-400);
+@B80: var(--semantic-brand-300);
+@B90: var(--semantic-brand-100);
+@B95: var(--semantic-brand-50);
+@B98: var(--semantic-brand-25);
 
 /**
 * 辅助A Secondary A
 * 绿色传达了一个积极的行动，积极的趋势，或成功的确认。
 **/
-@SA10: #084c2b;
-@SA20: #0d7240;
-@SA30: #0a9953;
-@SA40: #16b667;
-@SA50: #44cb89;
-@SA60: #73d8a6;
-@SA70: #a1e5c4;
-@SA80: #d0f2e1;
-@SA90: #e8f9f0;
-@SA95: #f0faf5;
-@SA98: #f0faf5;
+@SA10: var(--semantic-positive-900);
+@SA20: var(--semantic-positive-800);
+@SA30: var(--semantic-positive-700);
+@SA40: var(--semantic-positive-600);
+@SA50: var(--semantic-positive-500);
+@SA60: var(--semantic-positive-400);
+@SA70: var(--semantic-positive-300);
+@SA80: var(--semantic-positive-100);
+@SA90: var(--semantic-positive-50);
+@SA95: var(--semantic-positive-25);
+@SA98: var(--semantic-positive-25);
 
 /**
 * 辅助B Secondary B
 * 橙色可以传达一个警示信号。这些颜色通常被用于提醒，以抓住用户的注意力。
 **/
-@SB10: #7b341e;
-@SB20: #ad5c0b;
-@SB30: #f28e2c;
-@SB40: #ffb01f;
-@SB50: #ffc04d;
-@SB60: #ffd180;
-@SB70: #fbd99d;
-@SB80: #feebc8;
-@SB90: #fffaf0;
-@SB95: #fefaf1;
-@SB98: #fefaf1;
+@SB10: var(--semantic-warning-900);
+@SB20: var(--semantic-warning-800);
+@SB30: var(--semantic-warning-700);
+@SB40: var(--semantic-warning-600);
+@SB50: var(--semantic-warning-500);
+@SB60: var(--semantic-warning-400);
+@SB70: var(--semantic-warning-300);
+@SB80: var(--semantic-warning-100);
+@SB90: var(--semantic-warning-50);
+@SB95: var(--semantic-warning-25);
+@SB98: var(--semantic-warning-25);
 
 /**
 * 辅助C Secondary C
 * 红色在错误状态和 "破坏性 "行动中使用。它们传达了一种破坏性/负面消极的行动，例如将一个用户从你的团队中删除。
 **/
-@SC10: #6b1a1a;
-@SC20: #832525;
-@SC30: #b82828;
-@SC40: #d64343;
-@SC50: #e26464;
-@SC60: #e98b8b;
-@SC70: #f1b1b1;
-@SC80: #f8d8d8;
-@SC90: #fbecec;
-@SC95: #fcf3f3;
-@SC98: #fcf3f3;
+@SC10: var(--semantic-negative-900);
+@SC20: var(--semantic-negative-800);
+@SC30: var(--semantic-negative-700);
+@SC40: var(--semantic-negative-600);
+@SC50: var(--semantic-negative-500);
+@SC60: var(--semantic-negative-400);
+@SC70: var(--semantic-negative-300);
+@SC80: var(--semantic-negative-100);
+@SC90: var(--semantic-negative-50);
+@SC95: var(--semantic-negative-25);
+@SC98: var(--semantic-negative-25);
 
 /**
 * 背景色 Background
 * 中性色是色彩系统的基础。 UI 设计中的几乎所有东西：文本、表单、背景、分隔线等等通常都是中性的。
 **/
-@BG0: #000000;
-@BG10: #171717;
-@BG20: #575757;
-@BG30: #475467;
-@BG40: #667085;
-@BG50: #98a2b3;
-@BG60: #dbdbdb;
-@BG70: #d5d5d5;
-@BG80: #f1f1f1;
-@BG90: #f8f8f8;
-@BG95: #ffffff;
-@BG97: #ffffff;
-@BG100: #ffffff;
+@BG0: var(--semantic-neutral-950);
+@BG10: var(--semantic-neutral-900);
+@BG20: var(--semantic-neutral-700);
+@BG30: var(--semantic-neutral-700);
+@BG40: var(--semantic-neutral-600);
+@BG50: var(--semantic-neutral-500);
+@BG60: var(--semantic-neutral-300);
+@BG70: var(--semantic-neutral-300);
+@BG80: var(--semantic-neutral-100);
+@BG90: var(--semantic-neutral-50);
+@BG95: var(--background-default);
+@BG97: var(--background-default);
+@BG100: var(--background-default);
 
 /***
 * 投影
 ***/
-@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);
-@shadow-primary: 0 0 0 4px rgba(21, 111, 238, 0.12);
-@shadow-drop: 0 0 0 4px #1570ef1f;
+@shadow-L: var(--elevation-bottom-bottom-lg);
+@shadow-xl: var(--elevation-bottom-bottom-xl);
+@shadow-lg: var(--elevation-bottom-bottom-lg);
+@shadow-md: var(--elevation-bottom-bottom-md);
+@shadow-sm: var(--elevation-bottom-bottom-sm);
+@shadow-xs: var(--elevation-bottom-bottom-sm);
+@shadow-body-top-left: var(--additional-effects-inner-default-border);
+@shadow-primary: var(--focus-default-focus);
+@shadow-drop: 0 0 0 4px var(--global-blue-500-12);
 // 业务颜色
 // 除了原色之外，在业务、提示和标签等组件中使用一些次要颜色也很有帮助。这些次要颜色应该少用或作为重点使用，而主要颜色应该占优先地位。
 
@@ -138,129 +133,129 @@
 * 业务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;
+@TA10: var(--semantic-positive-900);
+@TA20: var(--semantic-positive-800);
+@TA30: var(--semantic-positive-700);
+@TA40: var(--semantic-positive-600);
+@TA50: var(--semantic-positive-500);
+@TA60: var(--semantic-positive-400);
+@TA70: var(--semantic-positive-300);
+@TA80: var(--semantic-positive-100);
+@TA90: var(--semantic-positive-50);
+@TA95: var(--semantic-positive-25);
+@TA98: var(--semantic-positive-25);
 
 /**
 * 业务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;
+@TB10: var(--global-teal-900);
+@TB20: var(--global-teal-800);
+@TB30: var(--global-teal-700);
+@TB40: var(--global-teal-600);
+@TB50: var(--global-teal-500);
+@TB60: var(--global-teal-400);
+@TB70: var(--global-teal-300);
+@TB80: var(--global-teal-100);
+@TB90: var(--global-teal-50);
+@TB95: var(--global-teal-25);
+@TB98: var(--global-teal-25);
 
 /**
 * 业务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;
+@TC10: var(--global-cyan-900);
+@TC20: var(--global-cyan-800);
+@TC30: var(--global-cyan-700);
+@TC40: var(--global-cyan-600);
+@TC50: var(--global-cyan-500);
+@TC60: var(--global-cyan-400);
+@TC70: var(--global-cyan-300);
+@TC80: var(--global-cyan-100);
+@TC90: var(--global-cyan-50);
+@TC95: var(--global-cyan-25);
+@TC98: var(--global-cyan-25);
 
 /**
 * 业务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;
+@TD10: var(--global-violet-900);
+@TD20: var(--global-violet-800);
+@TD30: var(--global-violet-700);
+@TD40: var(--global-violet-600);
+@TD50: var(--global-violet-500);
+@TD60: var(--global-violet-400);
+@TD70: var(--global-violet-300);
+@TD80: var(--global-violet-100);
+@TD90: var(--global-violet-50);
+@TD95: var(--global-violet-25);
+@TD98: var(--global-violet-25);
 
 /**
 * 业务E (Tertiary E)
 **/
 
-@TE10: #271b47;
-@TE20: #382765;
-@TE30: #4f378f;
-@TE40: #6144af;
-@TE50: #9d76ed;
-@TE60: #b692f6;
-@TE70: #a08ae8;
-@TE80: #bcafee;
-@TE90: #d4cdf4;
-@TE95: #eae7f9;
-@TE98: #f5f3fc;
+@TE10: var(--global-purple-900);
+@TE20: var(--global-purple-800);
+@TE30: var(--global-purple-700);
+@TE40: var(--global-purple-600);
+@TE50: var(--global-purple-500);
+@TE60: var(--global-purple-400);
+@TE70: var(--global-purple-300);
+@TE80: var(--global-purple-100);
+@TE90: var(--global-purple-50);
+@TE95: var(--global-purple-25);
+@TE98: var(--global-purple-25);
 
 /**
 * 业务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;
+@TF10: var(--global-magenta-900);
+@TF20: var(--global-magenta-800);
+@TF30: var(--global-magenta-700);
+@TF40: var(--global-magenta-600);
+@TF50: var(--global-magenta-500);
+@TF60: var(--global-magenta-400);
+@TF70: var(--global-magenta-300);
+@TF80: var(--global-magenta-100);
+@TF90: var(--global-magenta-50);
+@TF95: var(--global-magenta-25);
+@TF98: var(--global-magenta-25);
 
 /**
 * 业务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;
+@TG10: var(--global-raspberry-900);
+@TG20: var(--global-raspberry-800);
+@TG30: var(--global-raspberry-700);
+@TG40: var(--global-raspberry-600);
+@TG50: var(--global-raspberry-500);
+@TG60: var(--global-raspberry-400);
+@TG70: var(--global-raspberry-300);
+@TG80: var(--global-raspberry-100);
+@TG90: var(--global-raspberry-50);
+@TG95: var(--global-raspberry-25);
+@TG98: var(--global-raspberry-25);
 
 /**
 * 业务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;
+@TH10: var(--semantic-warning-900);
+@TH20: var(--semantic-warning-800);
+@TH30: var(--semantic-warning-700);
+@TH40: var(--semantic-warning-600);
+@TH50: var(--semantic-warning-500);
+@TH60: var(--semantic-warning-400);
+@TH70: var(--semantic-warning-300);
+@TH80: var(--semantic-warning-100);
+@TH90: var(--semantic-warning-50);
+@TH95: var(--semantic-warning-25);
+@TH98: var(--semantic-warning-25);
 
 // 用css module的能力，将less变量输出给js，供js文件中使用
 :export {