antdv-eoi/es/style/themes/var/variables.less

An enterprise-class UI design language and Vue-based implementation

/************************* 全局灰度 *********************/
@--color-neutrals-1: var(--color-neutrals-1, #fafafa);
@--color-neutrals-2: var(--color-neutrals-2, #f0f0f0);
@--color-neutrals-3: var(--color-neutrals-3, #e6e6e6);
@--color-neutrals-4: var(--color-neutrals-4, #dbdbdb);
@--color-neutrals-5: var(--color-neutrals-5, #cccccc);
@--color-neutrals-6: var(--color-neutrals-6, #adadad);
@--color-neutrals-7: var(--color-neutrals-7, #8f8f8f);
@--color-neutrals-8: var(--color-neutrals-8, #707070);
@--color-neutrals-9: var(--color-neutrals-9, #525252);
@--color-neutrals-10: var(--color-neutrals-10, #383838);
@--color-neutrals-11: var(--color-neutrals-11, #242424);

@--color-neutrals-add-1: var(--color-neutrals-add-1);
@--color-neutrals-add-2: var(--color-neutrals-add-2);

/*所有阴影*/
@box-shadow-2px: var(--box-shadow-2px);
@box-shadow-4px: var(--box-shadow-4px);
@box-shadow-6px: var(--box-shadow-6px);
@box-shadow-8px: var(--box-shadow-8px);
@box-shadow-16px: var(--box-shadow-16px);
@box-shadow-24px: var(--box-shadow-24px);

/************************* 全局主题色 *********************/
@primary-color: #097BA6; // 对应  --color-primary

@--color-primary-assist: var(--color-primary-assist, #304765);
@--color-primary-info: var(--color-primary-info, #f5f9fb);
@--color-primary-hyperlink: var(--color-primary-hyperlink, #3a95b8);
@--color-primary-hover: var(--color-primary-hover, #07688d);
@--color-primary-pressed: var(--color-primary-pressed, #065573);

@--color-primary-light-1: var(--color-primary-light-1, #1f6681);
@--color-primary-light-2: var(--color-primary-light-2, #37778f);
@--color-primary-light-3: var(--color-primary-light-3, #51889d);
@--color-primary-light-4: var(--color-primary-light-4, #6999ab);
@--color-primary-light-5: var(--color-primary-light-5, #82aab9);
@--color-primary-light-6: var(--color-primary-light-6, #9bbbc7);
@--color-primary-light-7: var(--color-primary-light-7, #b4ccd5);
@--color-primary-light-8: var(--color-primary-light-8, #cddde3);
@--color-primary-light-9: var(--color-primary-light-9, #e6eef1);

@--color-primary-dark-1: var(--color-primary-dark-1, #054c67);
@--color-primary-dark-2: var(--color-primary-dark-2, #04445c);
@--color-primary-dark-3: var(--color-primary-dark-3, #043b50);
@--color-primary-dark-4: var(--color-primary-dark-4, #033345);
@--color-primary-dark-5: var(--color-primary-dark-5, #022a39);
@--color-primary-dark-6: var(--color-primary-dark-6, #02222e);
@--color-primary-dark-7: var(--color-primary-dark-7, #011922);
@--color-primary-dark-8: var(--color-primary-dark-8, #011117);
@--color-primary-dark-9: var(--color-primary-dark-9, #00080b);

@--color-primary-7: var(--color-primary-7);
@--color-primary-6: var(--color-primary-6);
@--color-primary-5: var(--color-primary-5);
@--color-primary-4: var(--color-primary-4);
@--color-primary-3: var(--color-primary-3);
@--color-primary-2: var(--color-primary-2);
@--color-primary-1: var(--color-primary-1);

@--color-primary-highlight-hyperlink: var(--color-primary-highlight-hyperlink, #ef881a);
@--color-primary-highlight-hover: var(--color-primary-highlight-hover, #d07616);
@--color-primary-highlight-pressed: var(--color-primary-highlight-pressed, #b16413);
@--color-primary-highlight-info: var(--color-primary-highlight-info, #fdf3e8);

/************************* 全局不变的颜色 *********************/
@--color-white: var(--color-white, #ffffff);
@--color-black: var(--color-black, #000000);

/* group color */
/* standard */
@--color-group-1: var(--color-group-1, #df9595);
@--color-group-2: var(--color-group-2, #d5b28e);
@--color-group-3: var(--color-group-3, #d5c58e);
@--color-group-4: var(--color-group-4, #ebd17b);
@--color-group-5: var(--color-group-5, #dbdc8f);
@--color-group-6: var(--color-group-6, #bcc896);
@--color-group-7: var(--color-group-7, #9cc896);
@--color-group-8: var(--color-group-8, #96c8bc);
@--color-group-9: var(--color-group-9, #96bfc8);
@--color-group-10: var(--color-group-10, #96aec8);
@--color-group-11: var(--color-group-11, #969fc8);
@--color-group-12: var(--color-group-12, #b296c8);
@--color-group-13: var(--color-group-13, #c795d1);
@--color-group-14: var(--color-group-14, #dc94c8);
@--color-group-15: var(--color-group-15, #e29cb9);
/* light */
@--color-group-1-light: var(--color-group-1-light, #eab9b9);
@--color-group-2-light: var(--color-group-2-light, #e3ccb5);
@--color-group-3-light: var(--color-group-3-light, #e3d9b5);
@--color-group-4-light: var(--color-group-4-light, #f1e1a9);
@--color-group-5-light: var(--color-group-5-light, #e7e8b6);
@--color-group-6-light: var(--color-group-6-light, #c7dbba);
@--color-group-7-light: var(--color-group-7-light, #bedbba);
@--color-group-8-light: var(--color-group-8-light, #badbd3);
@--color-group-9-light: var(--color-group-9-light, #bad5db);
@--color-group-10-light: var(--color-group-10-light, #bacadb);
@--color-group-11-light: var(--color-group-11-light, #bac0db);
@--color-group-12-light: var(--color-group-12-light, #ccbadb);
@--color-group-13-light: var(--color-group-13-light, #dab9e1);
@--color-group-14-light: var(--color-group-14-light, #e8b9db);
@--color-group-15-light: var(--color-group-15-light, #ecbed1);
/* dark */
@--color-group-1-dark: var(--color-group-1-dark, #bd7e7e);
@--color-group-2-dark: var(--color-group-2-dark, #b59778);
@--color-group-3-dark: var(--color-group-3-dark, #b5a778);
@--color-group-4-dark: var(--color-group-4-dark, #c7b168);
@--color-group-5-dark: var(--color-group-5-dark, #babb79);
@--color-group-6-dark: var(--color-group-6-dark, #90aa7f);
@--color-group-7-dark: var(--color-group-7-dark, #84aa7f);
@--color-group-8-dark: var(--color-group-8-dark, #7faa9f);
@--color-group-9-dark: var(--color-group-9-dark, #7fa2aa);
@--color-group-10-dark: var(--color-group-10-dark, #7f94aa);
@--color-group-11-dark: var(--color-group-11-dark, #7f87aa);
@--color-group-12-dark: var(--color-group-12-dark, #977faa);
@--color-group-13-dark: var(--color-group-13-dark, #a97eb1);
@--color-group-14-dark: var(--color-group-14-dark, #bb7daa);
@--color-group-15-dark: var(--color-group-15-dark, #c0849d);

/* 状态色 */
/* -state- Functional Color */
@--color-success-light: var(--color-success-light, #70cf92);
@--color-success-standard: var(--color-success-standard, #5fb07c);
@--color-success-dark: var(--color-success-dark, #4e9065);

@--color-caution-light: var(--color-caution-light, #f1d235);
@--color-caution-standard: var(--color-caution-standard, #cdb22d);
@--color-caution-dark: #a89225;

@--color-warning-light: var(--color-warning-light, #e19a4e);
@--color-warning-standard: var(--color-warning-standard, #bf8342);
@--color-warning-dark: #9d6b36;

@--color-danger-light: var(--color-danger-light, #ce5f5f);
@--color-danger-standard: var(--color-danger-standard, #af5050);
@--color-danger-dark: var(--color-danger-dark, #8f4242);
@--color-danger-light: var(--color-danger-light, #ce5f5f);
@--color-danger-standard: var(--color-danger-standard, #af5050);
@--color-danger-dark: var(--color-danger-dark, #8f4242);

@--color-ready-light: var(--color-ready-light, #5cb2d1);
@--color-ready-standard: var(--color-ready-standard, #4e97b1);
@--color-ready-dark: var(--color-ready-dark, #407c91);

@--color-info-light: var(--color-info-light, #bfbcbf);
@--color-info-standard: var(--color-info-standard, #a29fa2);
@--color-info-dark: var(--color-info-dark, #858385);

@--color-success-lighter: var(--color-success-lighter, #eff7f2);
@--color-caution-lighter: var(--color-caution-lighter, #fdfaeb);
@--color-warning-lighter: var(--color-warning-lighter, #f8f2ec);
@--color-danger-lighter: var(--color-danger-lighter, #f7eded);
@--color-info-lighter: var(--color-info-lighter, #f5f5f5);
@--color-ready-lighter: var(--color-ready-lighter, #edf4f7);

/* 状态色边框 */
@--border-color-primary-light: var(--border-color-primary-light, #82aab9);
@--border-color-caution-light: var(--border-color-caution-light, #f8e89a);
@--border-color-highlight-light: var(--border-color-highlight-light, #f7c38c);
@--border-color-success-light: var(--border-color-success-light, #b7e7c8);
@--border-color-warning-light: var(--border-color-warning-light, #f0cca6);
@--border-color-danger-light: var(--border-color-danger-light, #e6afaf);
@--border-color-info-light: var(--border-color-info-light, #dfdddf);
@--border-color-ready-light: var(--border-color-ready-light, #add8e8);