yui-vue3/src/styles/theme/index.less

A high quality UI components Library with Vue.js 3.

@import '../color/colorPalette';
@css-iconfont-family    : yui-icon;
@css-iconfont-prefix    : yui-icon-;

@primary-color          : #2d8cf0;
@primary-hover-color    : tint(@primary-color, 20%);
@primary-active-color   : shade(@primary-color, 5%);
@primary-focus-color    : fade(@primary-color, 20%);
@info-color             : #2db7f5;
@success-color          : #19be6b;
@warning-color          : #ff9900;
@error-color            : #ed4014;
@error-hover-color      : color(~`colorPalette('@{error-color}', 5)`);
@error-active-color     : color(~`colorPalette('@{error-color}', 7)`);
@link-color             : #2d8cf0;
@link-hover-color       : tint(@link-color, 20%);
@link-active-color      : shade(@link-color, 5%);
@selected-color         : fade(@primary-color, 90%);

@disabled-color          : #c5c8ce;

@font-family            : 'Helvetica Neue',Helvetica,'PingFang SC','Hiragino Sans GB','Microsoft YaHei','微软雅黑',Arial,sans-serif;
@code-family            : Consolas,Menlo,Courier,monospace;
@title-color            : #17233d;
@text-color             : #515a6e;
@font-size-base         : 14px;
@font-size-small        : 12px;
@font-size-large        : @font-size-base + 2px;

@border-color-split     : #e8eaec;

@background-color-select-hover: @input-disabled-bg;
@menu-dark-title              : #515a6e;
@menu-dark-active-bg          : #363e4f;
@menu-dark-subsidiary-color   : rgba(255,255,255,0.7);

@input-placeholder-color      : @disabled-color;

@input-disabled-bg            : #f3f3f3;

@screen-xs  : 480px;
@screen-sm  : 576px;
@screen-md  : 768px;
@screen-lg  : 992px;
@screen-xl  : 1200px;
@screen-xxl : 1600px;

@transition-time              : 0.2s;
@ease-in-out                  : ease-in-out;

@import './base';