ost-ui/components/__style/themes/default.less

ost ui for react

@BU: 1px; // 基本单位

// 色彩
// ---
// 文字色
@color-text-base: #000;                  // 基本
@color-text-base-inverse: #fff;          // 基本 - 反色
@color-text-secondary: #a4a9b0;          // 辅助色
@color-text-placeholder: #bbb;           // 文本框提示
@color-text-disabled: #bbb;              // 失效
@color-text-caption: #888;               // 辅助描述
@color-text-paragraph: #333;             // 段落
@color-link: @brand-primary;               // 链接

// 背景色
@fill-base: #fff;                           // 组件默认背景
@fill-body: #f5f5f9;                        // 页面背景
@fill-tap: #ddd;                            // 组件默认背景 - 按下
@fill-disabled: #ddd;                       // 通用失效背景
@fill-mask: rgba(0, 0, 0, 0.4);             // 遮罩背景
@color-icon-base: #ccc;                     // 许多小图标的背景，比如一些小圆点，加减号
@fill-grey: #f7f7f7;

// 透明度
@opacity-disabled: 0.3;   // switch checkbox radio 等组件禁用的透明度

// 全局/品牌色
@brand-primary: #fc6027;                    // 橙色字体
@brand-primary-tap: #ff6d00;
@brand-success: #20c084;
@brand-warning: #ffc600;
@brand-error: #f4333c;
@brand-important: #ff5b05;  // 用于小红点
@brand-wait: #108ee9;

// 边框色
@border-color-base: #ddd;

// 字体尺寸
// ---
@font-size-icontext: 10 * @BU;
@font-size-caption-sm: 12 * @BU;
@font-size-base: 14 * @BU;
@font-size-subhead: 15 * @BU;
@font-size-caption: 16 * @BU;
@font-size-heading: 17 * @BU;
@font-size-suphead: 24 * @BU;

// 圆角
// ---
@radius-xs: 2 * @BU;
@radius-sm: 3 * @BU;
@radius-md: 5 * @BU;
@radius-lg: 7 * @BU;
@radius-circle: 50%;

// 边框尺寸
// ---
@border-width-sm: @BU;
@border-width-md: @BU;
@border-width-lg: 2 * @BU;

// 间距
// ---
// 水平间距
@h-spacing-sm: 5 * @BU;
@h-spacing-md: 8 * @BU;
@h-spacing-lg: 15 * @BU;

// 垂直间距
@v-spacing-xs: 3 * @BU;
@v-spacing-sm: 6 * @BU;
@v-spacing-md: 9 * @BU;
@v-spacing-lg: 15 * @BU;
@v-spacing-xl: 21 * @BU;


// 图标尺寸
// ---
@icon-size-xxs: 15 * @BU;
@icon-size-xs: 18 * @BU;
@icon-size-sm: 21 * @BU;
@icon-size-md: 22 * @BU;       // 导航条上的图标、grid的图标大小
@icon-size-lg: 36 * @BU;


// button
@button-height: 40 * @BU;
@button-font-size: 16 * @BU;

@button-height-sm: 28 * @BU;
@button-font-size-sm: 12 * @BU;

@primary-button-fill: @brand-primary;
@primary-button-fill-tap: @brand-primary-tap;

@ghost-button-color: @brand-primary;    // 同时应用于背景、文字颜色、边框色
@ghost-button-fill-tap: fade(@brand-primary, 60%);

@warning-button-fill: #e94f4f;
@warning-button-fill-tap: #d24747;

@link-button-fill-tap: #ddd;
@link-button-font-size: 16 * @BU;