dati/lib/style/themes/default.less

// 布局容器大小为750 * 1334

// @{组件}-{属性}-{场景}-{状态}-{大小}-{反色}
// ----------------------------------------------------------------------------------
// 组件可选，具体组件名：如 button tabs list input 等。未指定时表示全局通用。
// 组件名可以复合，例如 default-button table tabs-current link-button 以表示更精确的主体。
// ----------------------------------------------------------------------------------
// 属性
// 必选，变量实际内容。
// brand 通用品牌色
// fill 背景色
// border-color 边框色
// color 色彩。优先使用上面三种。
// border-width 边框大小
// font-size 文字大小
// radius 圆角大小
// height 容器高度
// v-spacing 垂直间距
// h-spacing 水平间距
// ----------------------------------------------------------------------------------
// 场景
// text 文本
// heading 标题
// subhead 子标题
// caption 辅助说明文字
// paragraph 段落文字
// placeholder 占位符
// display 广告/展示
// icontext 图标文字
// link 链接
// body 页面
// overlay 浮层
// mask 遮罩
// shadow 阴影
// ----------------------------------------------------------------------------------
// 状态
// 可选。
// base 基本/默认
// tap 按下
// disabled 失效
// priamry 主要
// success 成功
// warning 警告
// info 信息
// important 重要/强调
// error 错误
// ----------------------------------------------------------------------------------
// 大小
// 约定的大小选项。可选，一般和 font-size radius height spacing border-width 进行配合。
// xl 超大
// lg 大
// md 中
// sm 小
// xs 超小
// ----------------------------------------------------------------------------------
// 反色
// 可选。
// inverse 用于深色背景

@hd: 2upx; // 基本单位

// 色彩----------------------------------------------------------------------------------
/* 标准色 */
@color--red: #e54d42; // 嫣红
@color--orange: #f37b1d; //桔橙
@color--yellow: #fbbd08; //明黄
@color--olive: #8dc63f; //橄榄
@color--green: #39b54a; //森绿
@color--cyan: #1cbbb4; //天青
@color--blue: #0081ff; //海蓝
@color--purple: #6739b6; //姹紫
@color--mauve: #9c26b0; //木槿
@color--pink: #e03997; //桃粉
@color--brown: #a5673f; //棕褐
@color--grey: #8799a3; //玄灰
@color--black: #333333; //
@color--darkGray: #666666;
@color--gray: #aaaaaa; //草灰
@color--ghostWhite: #f1f1f1; //墨黑
@color--white: #ffffff; //雅白
/* 浅色 */
@color--redLight: #fadbd9; // 嫣红
@color--orangeLight: #fde6d2; // 桔橙
@color--yellowLight: #fef2ce; // 明黄
@color--oliveLight: #e8f4d9; // 橄榄
@color--greenLight: #d7f0db; // 森绿
@color--cyanLight: #d2f1f0; // 天青
@color--blueLight: #cce6ff; // 海蓝
@color--purpleLight: #e1d7f0; // 姹紫
@color--mauveLight: #ebd4ef; // 木槿
@color--pinkLight: #f9d7ea; // 桃粉
@color--brownLight: #ede1d9; // 棕褐
@color--greyLight: #e7ebed; // 玄灰
/* 渐变色 */
@color--gradualRed: linear-gradient(45deg, #f43f3b, #ec008c); // 魅红
@color--gradualOrange: linear-gradient(45deg, #ff9700, #ed1c24); // 鎏金
@color--gradualGreen: linear-gradient(45deg, #39b54a, #8dc63f); // 翠柳
@color--gradualPurple: linear-gradient(45deg, #9000ff, #5e00ff); // 靛青
@color--gradualPink: linear-gradient(45deg, #ec008c, #6739b6); // 惑紫
@color--gradualBlue: linear-gradient(45deg, #0081ff, #1cbbb4); // 霞彩
/* 阴影透明色 */
@shadowSize: 6upx 6upx 8upx;
@color--redShadow: rgba(204, 69, 59, 0.2); // 嫣红
@color--orangeShadow: rgba(217, 109, 26, 0.2); // 桔橙
@color--yellowShadow: rgba(224, 170, 7, 0.2); // 明黄
@color--oliveShadow: rgba(124, 173, 55, 0.2); // 橄榄
@color--greenShadow: rgba(48, 156, 63, 0.2); // 森绿
@color--cyanShadow: rgba(28, 187, 180, 0.2); // 天青
@color--blueShadow: rgba(0, 102, 204, 0.2); // 海蓝
@color--purpleShadow: rgba(88, 48, 156, 0.2); // 姹紫
@color--mauveShadow: rgba(133, 33, 150, 0.2); // 木槿
@color--pinkShadow: rgba(199, 50, 134, 0.2); // 桃粉
@color--brownShadow: rgba(140, 88, 53, 0.2); // 棕褐
@color--greyShadow: rgba(114, 130, 138, 0.2); // 玄灰
@color--grayShadow: rgba(114, 130, 138, 0.2);
@color--blackShadow: rgba(26, 26, 26, 0.2);

// ---
// 全局/品牌色
@brand-primary: #108ee9;
@brand-primary-tap: #0e80d2;
@brand-success: #6abf47;
@brand-warning: #ffc600;
@brand-error: #f4333c;
@brand-hot: #f96268;
@brand-important: #ff5b05; // 用于小红点
@brand-wait: #108ee9;

// 文字色
@color-text-base: #000; // 基本 ---- 默认文字
@color-text-base-inverse: #fff; // 基本 - 反色 ---- 深色背景下的文字
@color-text-secondary: #a4a9b0; // 辅助色
@color-text-placeholder: #bbb; // 文本框提示 ---- input输入框、textarea输入区域-文字提示 清除图标的默认颜色
@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 等组件禁用的透明度

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

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

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

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

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

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

// padding、margin
@padding-spacing-xs : 10upx;
@padding-spacing-sm : 20upx;
@padding-spacing-md : 30upx;
@padding-spacing-lg : 40upx;
@padding-spacing-xl : 50upx;
@margin-spacing-xs : 10upx;
@margin-spacing-sm : 20upx;
@margin-spacing-md : 30upx;
@margin-spacing-lg : 40upx;
@margin-spacing-xl : 50upx;

// 高度----------------------------------------------------------------------------------
// ---
@line-height-base: 1; // 单行行高
@line-height-paragraph: 1.5; // 多行行高

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

// 动画缓动----------------------------------------------------------------------------------
// ---
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

// 组件变量
// ---
// modal
@modal-font-size-heading: 18 * @hd;
@modal-button-font-size: 18 * @hd; // 按钮字号
@modal-button-height: 50 * @hd; // 按钮高度
@modal-fill: @fill-base;
@modal-radius: 10 * @hd;

// list
@list-title-height: 30 * @hd;
@list-item-height-sm: 35 * @hd;
@list-item-height: 44 * @hd;

// z-index
@progress-zindex: 2000;
@popover-zindex: 1999;
@toast-zindex: 1999;
@action-sheet-zindex: 1000; // actonsheet 会放到 popup / modal 中
@picker-zindex: 1000;
@popup-zindex: 999;
@modal-zindex: 999; // modal.alert 应该最大，其他应该较小
@tabs-pagination-zindex: 999;