wetrade-design/lib/style/color/colors.less

一款多语言支持Vue3的UI框架

@import 'colorPalette';

/** gray-sp */
@gray-sp-2: #FBFCFD;
@gray-sp-4: #F8F9FB;
@gray-sp-6: #F5F6F8;
@gray-sp-8: #FBFCFD;
@gray-sp-10: #EEF0F4;
@gray-sp-12: #EBEDF2;
@gray-sp-16: #E4E7ED;
@gray-sp-18: #E0E4EB;
@gray-sp-20: #DDE1E9;
@gray-sp-25: #D4D9E3;
@gray-sp-30: #CFD2DB;
@gray-sp-35: #C7CAD5;
@gray-sp-40: #BEC3CF;
@gray-sp-50: #AEB3C3;
@gray-sp-60: #9EA3B8;

/** blue-sp */
@blue-sp-2:#FAFCFE;
@blue-sp-4:#F6F9FE;
@blue-sp-6:#F1F6FD;
@blue-sp-8:#ECF3FD;
@blue-sp-10:#E7EFFC;
@blue-sp-12:#E3EDFC;
@blue-sp-16:#D9E3FB;
@blue-sp-18:#D4E0FA;
@blue-sp-20:#D0DCFA;
@blue-sp-25:#C4D3F9;
@blue-sp-30:#B8CBF7;
@blue-sp-35:#ACC2F6;
@blue-sp-40:#A0B9F5;
@blue-sp-t15:fade(@blue-600, 7%);

/** green-sp */
@green-sp-2: #FAFDFC;
@green-sp-4: #F5FBF9;
@green-sp-6: #F0FAF6;
@green-sp-8: #EBF8F2;
@green-sp-10: #E6F6EF;
@green-sp-12: #E1F4EC;

/** red-sp */
@red-sp-2: #FFFAFB;
@red-sp-4: #FEF6F7;
@red-sp-6: #FEF1F4;
@red-sp-8: #FEEDF0;
@red-sp-10: #FEE8EC;
@red-sp-12: #FDE4E8;

/** orange-sp */
@orange-sp-2: #FFFCFA;
@orange-sp-4: #FFF8F5;
@orange-sp-6: #FFF5F0;
@orange-sp-8: #FFF2EB;
@orange-sp-10: #FEEFE6;
@orange-sp-12: #FEEBE1;

/** 品牌橙 */
@orange-base: #FF7925;
@orange-50: #FFF4E5;
@orange-100: #FFE7C7;
@orange-200: #FFDCAD;
@orange-300: #FFC98F;
@orange-400: #FF9D47;
@orange-500: @orange-base;
@orange-600: #F95C09;
@orange-700: #B84010;
@orange-800: #942908;
@orange-900: #701703;
@orange-500-7: fade(@orange-500, 7%);

/** 日落黄 */
@sunset-base: #FF9917;
@sunset-50: #FFF6E5;
@sunset-100: #FFEEC7;
@sunset-200: #FFE3AD;
@sunset-300: #FFD08A;
@sunset-400: #FFAD45;
@sunset-500: @sunset-base;
@sunset-600: #D57511;
@sunset-700: #AA550C;
@sunset-800: #803908;
@sunset-900: #552104;
@sunset-500-7: fade(@sunset-500, 7%);

/** 柠檬黄 */
@sunglow-base: #F6CD00;
@sunglow-50: #FDFFCC;
@sunglow-100: #FAFAA0;
@sunglow-200: #F5F284;
@sunglow-300: #FAED44;
@sunglow-400: #FAE215;
@sunglow-500: @sunglow-base;
@sunglow-600: #CC9600;
@sunglow-700: #B27700;
@sunglow-800: #6E4000;
@sunglow-900: #492700;
@sunglow-500-7: fade(@sunglow-500, 7%);

/** 新生绿 */
@shamrock-base: #9FDB1D;
@shamrock-50: #EAF8CE;
@shamrock-100: #E1F0B2;
@shamrock-200: #D0E990;
@shamrock-300: #C6E665;
@shamrock-400: #B5E241;
@shamrock-500: @shamrock-base;
@shamrock-600: #81B616;
@shamrock-700: #598508;
@shamrock-800: #3A5C06;
@shamrock-900: #304907;
@shamrock-500-7: fade(@shamrock-500, 7%);

/** 绿色 */
@green-base: #23BF70;
@green-50: #E2FDEF;
@green-100: #CEF3E1;
@green-200: #AAE5C8;
@green-300: #84DBA8;
@green-400: #53D48C;
@green-500: @green-base;
@green-600: #01A662;
@green-700: #019061;
@green-800: #08754F;
@green-900: #026B3F;
@green-500-7: fade(@green-500, 7%);

/** 碧涛青 */
@viking-base: #14C9C9;
@viking-50: #DEFCFC;
@viking-100: #B7F4F4;
@viking-200: #89E9E0;
@viking-300: #5EDFD6;
@viking-400: #37D4CF;
@viking-500: @viking-base;
@viking-600: #0DA5AA;
@viking-700: #0B8286;
@viking-800: #076065;
@viking-900: #043F43;
@viking-500-7: fade(@viking-500, 7%);

/** 海蔚蓝 */
@malibu-base: #25A4FF;
@malibu-50: #E0F2FF;
@malibu-100: #C2E5FF;
@malibu-200: #94D2FF;
@malibu-300: #75C5FF;
@malibu-400: #4AB3FF;
@malibu-500: @malibu-base;
@malibu-600: #0287E8;
@malibu-700: #106CB8;
@malibu-800: #085394;
@malibu-900: #033B70;
@malibu-500-7: fade(@malibu-500, 7%);

/** 品牌蓝色 */
@blue-base: #1251E5;
@blue-50: #E5F0FF;
@blue-100: #C7E0FF;
@blue-200: #A3C9FF;
@blue-300: #93BEFB;
@blue-400: #4A84F7;
@blue-500: #2469F2;
@blue-600: @blue-base;
@blue-700: #0F3CB7;
@blue-800: #042889;
@blue-900: #082061;
@blue-500-7: fade(@blue-500, 7%);

/** 宝石蓝 */
@dorger-base: #165DFF;
@dorger-50: #E0EAFF;
@dorger-100: #C7D8FF;
@dorger-200: #A3C2FF;
@dorger-300: #94B8FF;
@dorger-400: #4080FF;
@dorger-500: @dorger-base;
@dorger-600: #0B43DD;
@dorger-700: #0535B8;
@dorger-800: #002694;
@dorger-900: #001B70;
@dorger-500-7: fade(@dorger-500, 7%);

/** 星空紫 */
@heliotrope-base: #6366FF;
@heliotrope-50: #E5EAFF;
@heliotrope-100: #B3BCFF;
@heliotrope-200: #A3ABFF;
@heliotrope-300: #98A1FF;
@heliotrope-400: #7E84FF;
@heliotrope-500: @heliotrope-base;
@heliotrope-600: #4F4FDB;
@heliotrope-700: #3E3CB8;
@heliotrope-800: #2F2C94;
@heliotrope-900: #221E70;
@heliotrope-500-7: fade(@heliotrope-500, 7%);

/** 罗兰紫 */
@violet-base: #974CFF;
@violet-50: #F5E8FF;
@violet-100: #E7C9FF;
@violet-200: #D8ADFF;
@violet-300: #CD9EFF;
@violet-400: #AE6CFF;
@violet-500: @violet-base;
@violet-600: #793BDB;
@violet-700: #5D2CB8;
@violet-800: #441F94;
@violet-900: #2E1470;
@violet-500-7: fade(@violet-500, 7%);

/** 青春紫 */
@purple-base: #EB17EB;
@purple-50: #FFE5FF;
@purple-100: #FCCAF6;
@purple-200: #F8A5F8;
@purple-300: #F797F1;
@purple-400: #EF3EE9;
@purple-500: @purple-base;
@purple-600: #BD0EC3;
@purple-700: #9906A4;
@purple-800: #730180;
@purple-900: #50005C;
@purple-500-7: fade(@purple-500, 7%);

/** 品红 */
@rosein-base: #FF249D;
@rosein-50: #FFE0EE;
@rosein-100: #FFC7DE;
@rosein-200: #FFA8D8;
@rosein-300: #FF94C8;
@rosein-400: #FF4BA8;
@rosein-500: @rosein-base;
@rosein-600: #DB188B;
@rosein-700: #B80F77;
@rosein-800: #940863;
@rosein-900: #70024E;
@rosein-500-7: fade(@rosein-500, 7%);

/** 红色 */
@red-base: #F53958;
@red-50: #FDE5E8;
@red-100: #FBC9CE;
@red-200: #FFB2BE;
@red-300: #FF9EAE;
@red-400: #FF738A;
@red-500: @red-base;
@red-600: #F21D41;
@red-700: #DC1D3D;
@red-800: #C51D39;
@red-900: #AA011D;
@red-500-7: fade(@red-500, 7%);

/** 灰色 */
@gray-base: #818799;
@gray-00: #000000; 
@gray-25: #08090D;
@gray-50: #F6F7F9;
@gray-100: #EDEFF3;
// @gray-150: #E7E8EF;
@gray-200: #DBDEE8;
@gray-300: #C7CBD6;
@gray-400: #989FB2;
@gray-500: @gray-base;
@gray-600: #656B80;
@gray-700: #575E73;
@gray-800: #404659;
@gray-900: #1E1E29;
@gray-1000: #fff;
// @gray-600-40: fade(@gray-600, 40%);
@gray-500-7: fade(@gray-500, 7%);
@gray-500-10: fade(@gray-500, 10%);
@gray-500-20: fade(@gray-500, 20%);

/** 保留ant色板 */
@orange-1: color(~`colorPalette('@{orange-6}', 1) `);
@orange-2: color(~`colorPalette('@{orange-6}', 2) `);
@orange-3: color(~`colorPalette('@{orange-6}', 3) `);
@orange-4: color(~`colorPalette('@{orange-6}', 4) `);
@orange-5: color(~`colorPalette('@{orange-6}', 5) `);
@orange-6: @orange-base;
@orange-7: color(~`colorPalette('@{orange-6}', 7) `);
@orange-8: color(~`colorPalette('@{orange-6}', 8) `);
@orange-9: color(~`colorPalette('@{orange-6}', 9) `);
@orange-10: color(~`colorPalette('@{orange-6}', 10) `);

/** 绿色 */
@green-1: color(~`colorPalette('@{green-6}', 1) `);
@green-2: color(~`colorPalette('@{green-6}', 2) `);
@green-3: color(~`colorPalette('@{green-6}', 3) `);
@green-4: color(~`colorPalette('@{green-6}', 4) `);
@green-5: color(~`colorPalette('@{green-6}', 5) `);
@green-6: @green-base;
@green-7: color(~`colorPalette('@{green-6}', 7) `);
@green-8: color(~`colorPalette('@{green-6}', 8) `);
@green-9: color(~`colorPalette('@{green-6}', 9) `);
@green-10: color(~`colorPalette('@{green-6}', 10) `);

/** 品牌蓝 */
@blue-1: color(~`colorPalette('@{blue-6}', 1) `);
@blue-2: color(~`colorPalette('@{blue-6}', 2) `);
@blue-3: color(~`colorPalette('@{blue-6}', 3) `);
@blue-4: color(~`colorPalette('@{blue-6}', 4) `);
@blue-5: color(~`colorPalette('@{blue-6}', 5) `);
@blue-6: @blue-base;
@blue-7: color(~`colorPalette('@{blue-6}', 7) `);
@blue-8: color(~`colorPalette('@{blue-6}', 8) `);
@blue-9: color(~`colorPalette('@{blue-6}', 9) `);
@blue-10: color(~`colorPalette('@{blue-6}', 10) `);

@purple-1: color(~`colorPalette('@{purple-6}', 1) `);
@purple-2: color(~`colorPalette('@{purple-6}', 2) `);
@purple-3: color(~`colorPalette('@{purple-6}', 3) `);
@purple-4: color(~`colorPalette('@{purple-6}', 4) `);
@purple-5: color(~`colorPalette('@{purple-6}', 5) `);
@purple-6: @purple-base;
@purple-7: color(~`colorPalette('@{purple-6}', 7) `);
@purple-8: color(~`colorPalette('@{purple-6}', 8) `);
@purple-9: color(~`colorPalette('@{purple-6}', 9) `);
@purple-10: color(~`colorPalette('@{purple-6}', 10) `);

@cyan-base: #13c2c2;
@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `);
@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `);
@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `);
@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `);
@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `);
@cyan-6: @cyan-base;
@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `);
@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `);
@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `);
@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `);

@magenta-base: #eb2f96;
@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `);
@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `);
@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `);
@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `);
@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `);
@magenta-6: @magenta-base;
@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `);
@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `);
@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `);
@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `);

// alias of magenta
@pink-base: #eb2f96;
@pink-1: color(~`colorPalette('@{pink-6}', 1) `);
@pink-2: color(~`colorPalette('@{pink-6}', 2) `);
@pink-3: color(~`colorPalette('@{pink-6}', 3) `);
@pink-4: color(~`colorPalette('@{pink-6}', 4) `);
@pink-5: color(~`colorPalette('@{pink-6}', 5) `);
@pink-6: @pink-base;
@pink-7: color(~`colorPalette('@{pink-6}', 7) `);
@pink-8: color(~`colorPalette('@{pink-6}', 8) `);
@pink-9: color(~`colorPalette('@{pink-6}', 9) `);
@pink-10: color(~`colorPalette('@{pink-6}', 10) `);

@red-base: #f5222d;
@red-1: color(~`colorPalette('@{red-6}', 1) `);
@red-2: color(~`colorPalette('@{red-6}', 2) `);
@red-3: color(~`colorPalette('@{red-6}', 3) `);
@red-4: color(~`colorPalette('@{red-6}', 4) `);
@red-5: color(~`colorPalette('@{red-6}', 5) `);
@red-6: @red-base;
@red-7: color(~`colorPalette('@{red-6}', 7) `);
@red-8: color(~`colorPalette('@{red-6}', 8) `);
@red-9: color(~`colorPalette('@{red-6}', 9) `);
@red-10: color(~`colorPalette('@{red-6}', 10) `);

@yellow-base: #fadb14;
@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `);
@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `);
@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `);
@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `);
@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `);
@yellow-6: @yellow-base;
@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `);
@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `);
@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `);
@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `);

@volcano-base: #fa541c;
@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `);
@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `);
@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `);
@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `);
@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `);
@volcano-6: @volcano-base;
@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `);
@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `);
@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `);
@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `);

@geekblue-base: #2f54eb;
@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `);
@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `);
@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `);
@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `);
@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `);
@geekblue-6: @geekblue-base;
@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `);
@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `);
@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `);
@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `);

@lime-base: #a0d911;
@lime-1: color(~`colorPalette('@{lime-6}', 1) `);
@lime-2: color(~`colorPalette('@{lime-6}', 2) `);
@lime-3: color(~`colorPalette('@{lime-6}', 3) `);
@lime-4: color(~`colorPalette('@{lime-6}', 4) `);
@lime-5: color(~`colorPalette('@{lime-6}', 5) `);
@lime-6: @lime-base;
@lime-7: color(~`colorPalette('@{lime-6}', 7) `);
@lime-8: color(~`colorPalette('@{lime-6}', 8) `);
@lime-9: color(~`colorPalette('@{lime-6}', 9) `);
@lime-10: color(~`colorPalette('@{lime-6}', 10) `);

@gold-base: #faad14;
@gold-1: color(~`colorPalette('@{gold-6}', 1) `);
@gold-2: color(~`colorPalette('@{gold-6}', 2) `);
@gold-3: color(~`colorPalette('@{gold-6}', 3) `);
@gold-4: color(~`colorPalette('@{gold-6}', 4) `);
@gold-5: color(~`colorPalette('@{gold-6}', 5) `);
@gold-6: @gold-base;
@gold-7: color(~`colorPalette('@{gold-6}', 7) `);
@gold-8: color(~`colorPalette('@{gold-6}', 8) `);
@gold-9: color(~`colorPalette('@{gold-6}', 9) `);
@gold-10: color(~`colorPalette('@{gold-6}', 10) `);

@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
  purple;