acud/es/style/themes/dark/config.less

acg react 组件库

@import './colors.less';

@theme: dark;
@acud-prefix: acud;
@html-selector: html;

// ICONFONT
@iconfont-css-prefix: ~"@{acud-prefix}icon";

// 尺寸单位
@P: 4px;

// TODO！！ 需要写一个方法 - 把excel的config传进去，就可以出来这个组件的样式了， 因为是开关和TX控制的
// Color
// 主色 因为没有计算 所以先这样
@B1: @blue-1;
@B2: @blue-2;
@B3: @blue-3;
@B4: @blue-4;
@B5: @blue-5;
@B6: @blue-6;
@B7: @blue-7;
@B8: @blue-8;
@B9: @blue-9;
@B10: @blue-10;

// 中性色
@G1: @grey-1;
@G2: @grey-2;
@G3: @grey-3;
@G4: @grey-4;
@G5: @grey-5;
@G6: @grey-6;
@G7: @grey-7;
@G8: @grey-8;
@G9: @grey-9;
@G10: @grey-10;
@G11: @grey-11;

// 功能色 - 错误状态
@E1: @red-1;
@E2: @red-2;
@E3: @red-3;
@E4: @red-4;
@E5: @red-5;
@E6: @red-6;
@E7: @red-7;
@E8: @red-8;
@E9: @red-9;
@E10: @red-10;

// 功能色 - sus
@S1: @green-1;
@S2: @green-2;
@S3: @green-3;
@S4: @green-4;
@S5: @green-5;
@S6: @green-6;
@S7: @green-7;
@S8: @green-8;
@S9: @green-9;
@S10: @green-10;

// 功能色 - warning
@W1: @orange-1;
@W2: @orange-2;
@W3: @orange-3;
@W4: @orange-4;
@W5: @orange-5;
@W6: @orange-6;
@W7: @orange-7;
@W8: @orange-8;
@W9: @orange-9;
@W10: @orange-10;

// 辅助色
@Y1: @yellow-1;
@Y2: @yellow-2;
@Y3: @yellow-3;
@Y4: @yellow-4;
@Y5: @yellow-5;
@Y6: @yellow-6;
@Y7: @yellow-7;
@Y8: @yellow-8;
@Y9: @yellow-9;
@Y10: @yellow-10;

// 基本属性
// 字号 - 每个梯度都是2
// 根据UE规范使用@T{num}方式表示字体大小，不再支持@font-size-{size}形式
// @font-size-10: 10px;
// @font-size-12: 12px;
// @font-size-14: 14px;
// @font-size-16: 16px;
// @font-size-18: 18px;
// @font-size-20: 20px;
// @font-size-22: 22px;
// @font-size-22: 24px;

@T1: 10px;
@T2: 12px;
@T3: 14px;
@T4: 16px;
@T5: 18px;
@T6: 20px;
@T7: 22px;
@T8: 24px;
@T9: 28px;
@T10: 30px;
@T11: 32px;
@T12: 34px;
@T13: 36px;
@T14: 40px;

// 字重
@font-weight-200: 200;
@font-weight-400: 400;
@font-weight-500: 500;
@font-weight-600: 600;

// todo lineheight

// 间距 - 可做padding/margin
@space-1: 4px;
@space-2: 8px;
@space-3: 16px;
@space-4: 24px;
@space-5: 32px;
@space-6: 40px;
@space-7: 48px;
@space-8: 56px;
@space-9: 80px;

// padding
@padding-xsm: 4px;
@padding-sm: 8px;
@padding-m: 12px;

// 圆角
@R1: 0px;
@R2: 2px;
@R3: 4px;
@R4: 6px;
@R5: 8px;
@R6: 10px;
@R7: 16px;
@R8: 50%;

// border style - todo!!!
@border-width-base: 1px;
@border-style-base: solid;
@border-radius-base: 0px;

// shadow
@shadow-basic-color: @G11;
@shadow-main-color: fade(@shadow-basic-color, 12%);
@shadow-blur-color: fade(@shadow-basic-color, 10%);
@shadow-border-color: fade(@shadow-basic-color, 8%);

@shadow-1: ~'0px 2px 8px 0px @{shadow-main-color}, 0px 1px 10px 0px @{shadow-blur-color},  0px 2px 4px -1px @{shadow-border-color}';
@shadow-2: ~'0px 4px 12px 1px @{shadow-main-color}, 0px 3px 14px 2px @{shadow-blur-color},  0px 5px 5px -3px @{shadow-border-color}';
@shadow-3: ~'0px 6px 16px 2px @{shadow-main-color}, 0px 5px 18px 4px @{shadow-blur-color},  0px 8px 8px -5px @{shadow-border-color}';

@offConfig: transparent;
@shadowOff: false;

// {tpxx}-{actionType(deafult|hover|click|disabled)-cssproperty(color|background-color...)}
// 为什么最后一个要是css属性，是为了以后做拓展用 tp/p不一定只有四个属性
// 所有用到的变量必须声明，参考 https://github.com/less/less.js/issues/3444

// tp
@tp1-default-color: @G1;
@tp1-hover-color: @G1;
@tp1-click-color: @G1;
@tp1-disabled-color: @G7;

@tp2-default-color: @S6;
@tp2-hover-color: @S5;
@tp2-click-color: @S7;
@tp2-disabled-color: @G7;

@tp3-default-color: @G1;
@tp3-hover-color: @S6;
@tp3-click-color: @S7;
@tp3-disabled-color: @G7;


// p
// p1
@p1-default-background-color: @S6;
@p1-hover-background-color: @S5;
@p1-click-background-color: @S7;
@p1-disabled-background-color: @G9;

@p1-default-border-color:  @offConfig;
@p1-hover-border-color:  @offConfig;
@p1-click-border-color: @offConfig;
@p1-disabled-border-color: @offConfig;

@p1-default-box-shadow: @shadowOff;
@p1-hover-box-shadow: @shadowOff;
@p1-click-box-shadow: @shadowOff;
@p1-disabled-box-shadow: @shadowOff;

// p2
@p2-default-background-color: @offConfig;
@p2-hover-background-color: @offConfig;
@p2-click-background-color: @offConfig;
@p2-disabled-background-color: @G9;

@p2-default-border-color: @S6;
@p2-hover-border-color: @S5;
@p2-click-border-color: @S7;
@p2-disabled-border-color: @G9;

@p2-default-box-shadow: @shadowOff;
@p2-hover-box-shadow: @shadowOff;
@p2-click-box-shadow: @shadowOff;
@p2-disabled-box-shadow: @shadowOff;

// p3
@p3-default-background-color: @offConfig;
@p3-hover-background-color: @offConfig;
@p3-click-background-color: @offConfig;
@p3-disabled-background-color: @G9;

@p3-default-border-color: @G6;
@p3-hover-border-color: @S6;
@p3-click-border-color: @S7;
@p3-disabled-border-color: @G9;

@p3-default-box-shadow: @shadowOff;
@p3-hover-box-shadow: @shadowOff;
@p3-click-box-shadow: @shadowOff;
@p3-disabled-box-shadow: @shadowOff;

// p4
@p4-default-background-color: @W6;
@p4-hover-background-color: @W5;
@p4-click-background-color: @W7;
@p4-disabled-background-color: @G9;

@p4-default-border-color: @offConfig;
@p4-hover-border-color: @offConfig;
@p4-click-border-color: @offConfig;
@p4-disabled-border-color: @offConfig;

@p4-default-box-shadow: @shadowOff;
@p4-hover-box-shadow: @shadowOff;
@p4-click-box-shadow: @shadowOff;
@p4-disabled-box-shadow: @shadowOff;