falcon-ui/src/styles/vars.less

ui components for falcon

/* falcon-ui基础样式变量定义 */
// Color Palette
@black: #000000;
@white: #ffffff;
@gray-1: #f7f8fa;
@gray-2: #f2f3f5;
@gray-3: #ebedf0;
@gray-4: #dcdee0;
@gray-5: #c8c9cc;
@gray-6: #969799;
@gray-7: #646566;
@gray-8: #323233;
@red: #ee0a24;
@blue: #1989fa;
@orange: #ff976a;
@orange-dark: #ed6a0c;
@orange-light: #fffbe8;
@green: #07c160;

// generate from https://coolors.co/ff7a7a-ffbf71-fbff83-77ff5c-68f2ff-6da5ff-927eff-ff90ff-ffffbd
// 颜色使用
// 0. 如下为 赤、橙、黄、绿、青、蓝、紫、粉、黑、白、
// 1. 因为我们选用的颜色饱和度都为 100 (hls l为100)，因此 less 的 saturate 不会有效果，desaturate 可以减少纯色变灰
// 2. light 不为 100，（也不可以是100，否色就成白色了），因此一般在用色时使用 lighten 调整明度即可，明度越高颜色越泛白
// 总结：只用 lighten 调整明度使用，fade fadein fadeout 调整 alpha 值与调整明度的效果基本一致，可参考 button 用色例子
@fl-red: #FF7A7A;
@fl-orange: #FFBF71;
@fl-yellow: #FBFF83;
@fl-green: #77FF5C;
@fl-cyan: #68F2FF;
@fl-blue: #6DA5FF;
@fl-purple: #927EFF;

@fl-pink: #FF90FF;

@fl-black: #000;
@fl-white:    #fff;

// from https://coolors.co/f8f9fa-e9ecef-dee2e6-ced4da-adb5bd-6c757d-495057-343a40-212529
@fl-gray-100: #f8f9fa;
@fl-gray-200: #e9ecef;
@fl-gray-300: #dee2e6;
@fl-gray-400: #ced4da;
@fl-gray-500: #adb5bd;
@fl-gray-600: #6c757d;
@fl-gray-700: #495057;
@fl-gray-800: #343a40;
@fl-gray-900: #212529;

@fl-gray: @fl-gray-600;

// Gradient Colors
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);

// Component Colors
@text-color: #606266;
@active-color: @gray-2;
@active-opacity: 0.7;
@disabled-opacity: 0.5;
@background-color: @gray-1;
@background-color-light: #fafafa;
@text-link-color: #576b95;

// Padding
@padding-base: 4px;
@padding-xs: @padding-base * 2;
@padding-sm: @padding-base * 3;
@padding-md: @padding-base * 4;
@padding-lg: @padding-base * 6;
@padding-xl: @padding-base * 8;

// Font
@font-size-xs: 10px;
@font-size-sm: 12px;
@font-size-md: 14px;
@font-size-lg: 16px;
@font-size-xl: 18px;
@font-weight-bold: 500;
@line-height-xs: 14px;
@line-height-sm: 18px;
@line-height-md: 20px;
@line-height-lg: 22px;

// Animation
@animation-duration-base: 0.3s;
@animation-duration-fast: 0.2s;
@animation-timing-function-enter: ease-out;
@animation-timing-function-leave: ease-in;

// Border
@border-color: @gray-3;
@border-width-base: 1px;
@border-radius-sm: 2px;
@border-radius-md: 4px;
@border-radius-lg: 8px;
@border-radius-max: 999px;