feat(mobile): add new token (#829)
This commit is contained in:
黄怡林
GitHub
parent
61dd65994a
commit
a68a6bfa8b
|
|
@ -10,8 +10,135 @@
|
|||
*
|
||||
*/
|
||||
|
||||
/*基础变量定义*/
|
||||
/* 基础变量定义 */
|
||||
:root {
|
||||
/* 主题色 */
|
||||
--ti-mobile-color-brand-1: #1f1b1b; // 主题色
|
||||
--ti-mobile-color-brand-2: #1476ff; // 辅助色
|
||||
|
||||
/* 背景色 */
|
||||
--ti-mobile-color-bg-default: #f5f5f5; // 页面、表头背景色
|
||||
--ti-mobile-color-bg-active: #f5f5f5; // 选中背景色
|
||||
--ti-mobile-color-bg-disabled: #f0f0f0; //禁用背景色
|
||||
--ti-mobile-color-bg-control-active: #1476ff; // 开关背景色
|
||||
--ti-mobile-color-bg-control-default: #c2c2c2; // 开关背景色
|
||||
--ti-mobile-color-bg-control-disabled-1: #dbdbdb; // 开关禁用背景色
|
||||
--ti-mobile-color-bg-control-disabled-2: #b3d6ff; // 选块选中，开关禁用
|
||||
--ti-mobile-color-bg-container-1: #fff; // 容器背景色1
|
||||
--ti-mobile-color-bg-container-2: #fafafa; // 容器背景色2
|
||||
--ti-mobile-color-bg-topnavigation: #fff; // 顶部导航背景色
|
||||
--ti-mobile-color-bg-topnavigation-active: #595959; // 顶部导航选中背景色
|
||||
--ti-mobile-color-bg-primary-default: #191919; // 主按钮背景色
|
||||
--ti-mobile-color-bg-primary-active: #595959; // 主按钮选中背景色
|
||||
--ti-mobile-color-bg-mask: #0000004b; // 遮罩层背景色 30%透明度
|
||||
--ti-mobile-color-bg-cell-active: #f0f7ff; // 表格选中背景色
|
||||
|
||||
/* 文本色 */
|
||||
--ti-mobile-color-text-primary: #191919; // 主要文本色、灰色标签文本色
|
||||
--ti-mobile-color-text-secondary: #595959; // 次要文本色
|
||||
--ti-mobile-color-text-placeholder: #808080; // 占位符、辅助文本色
|
||||
--ti-mobile-color-text-disabled: #c2c2c2; // 禁用文本色
|
||||
--ti-mobile-color-text-inverse: #fff; // 文本反色
|
||||
--ti-mobile-color-text-brand: #191919; // 主题色
|
||||
--ti-mobile-color-text-link: #1476ff; // 文本链接、文本按钮色
|
||||
|
||||
/* 图标色 */
|
||||
--ti-mobile-color-icon-control: #191919; // 页面默认图标色
|
||||
--ti-mobile-color-icon-default: #808080; // 默认图标色
|
||||
--ti-mobile-color-icon-active: #191919; // 聚焦图标色
|
||||
--ti-mobile-color-icon-disabled: #c2c2c2; // 禁用图标色
|
||||
--ti-mobile-color-icon-link: #1476ff; // 链接图标色
|
||||
--ti-mobile-color-icon-inverse: #fff; // 图标反色
|
||||
|
||||
/* 边框色 */
|
||||
--ti-mobile-color-border-default: #c2c2c2; // 默认边框色
|
||||
--ti-mobile-color-border-default-2: #595959; // 次要按钮边框色
|
||||
--ti-mobile-color-border-active: #191919; // 点击态边框色
|
||||
--ti-mobile-color-border-disabled: #dbdbdb; // 禁用边框色
|
||||
--ti-mobile-color-border-divider: #f0f0f0; // 分割线
|
||||
--ti-mobile-color-border-dash: #191919; // 下滑虚线
|
||||
|
||||
/* 功能色 */
|
||||
--ti-mobile-color-success: #5cb300; // 成功色
|
||||
--ti-mobile-color-success-subtle: #e6f2d5; // 成功背景色
|
||||
--ti-mobile-color-error: #f23030; // 校验、错误色
|
||||
--ti-mobile-color-error-subtle: #fce3e1; // 错误背景色
|
||||
--ti-mobile-color-warning: #ff8800; // 告警色
|
||||
--ti-mobile-color-warning-subtle: #ffebd1; // 告警背景色
|
||||
--ti-mobile-color-info: #1476ff; // 提示色
|
||||
--ti-mobile-color-info-subtle: #deecff; // 提示背景色
|
||||
--ti-mobile-color-none: #c2c2c2; // 失效色
|
||||
--ti-mobile-color-alert-fatal: #b50e65; // 致命告警色
|
||||
--ti-mobile-color-alert-error: #f23030; // 紧急告警色
|
||||
--ti-mobile-color-alert-warning: #ff8800; // 重要告警色
|
||||
--ti-mobile-color-alert-secondary: #ffb700; // 次要告警色
|
||||
--ti-mobile-color-alert-ordinary: #f2e70c; //普通告警色
|
||||
|
||||
/* 图表色 */
|
||||
--ti-mobile-color-chart-1: #1476ff; // 图表用色1
|
||||
--ti-mobile-color-chart-2: #0bb8b2; // 图表用色2
|
||||
--ti-mobile-color-chart-3: #6e51e0; // 图表用色3
|
||||
--ti-mobile-color-chart-4: #5cb300; // 图表用色4
|
||||
--ti-mobile-color-chart-5: #fcb1e1; // 图表用色5
|
||||
--ti-mobile-color-chart-6: #33bcf2; // 图表用色6
|
||||
--ti-mobile-color-chart-7: #ba53e6; // 图表用色7
|
||||
--ti-mobile-color-chart-8: #eb4696; // 图表用色8
|
||||
--ti-mobile-color-chart-9: #c2c2c2; // 图表用色9
|
||||
|
||||
/* 字号 */
|
||||
--ti-mobile-font-size-xs: 10px; // 辅助文字、图标刻度
|
||||
--ti-mobile-font-size-s: 12px; // 按钮文字、正文
|
||||
--ti-mobile-font-size-m: 14px; // 次标题、按钮文本、正文、眉题
|
||||
--ti-mobile-font-size-l: 16px; // 次标题、按钮文本、正文
|
||||
--ti-mobile-font-size-xl: 18px; // 标题
|
||||
--ti-mobile-font-size-2xl: 20px; // 标题、弹窗标题
|
||||
--ti-mobile-font-size-3xl: 24px; // 标题
|
||||
--ti-mobile-font-size-4xl: 30px; // 标题
|
||||
--ti-mobile-font-size-5xl: 38px; // 标题
|
||||
--ti-mobile-font-size-6xl: 48px; // 标题
|
||||
|
||||
/* 字重 */
|
||||
--ti-mobile-font-weight-regular: 400; // 标准
|
||||
--ti-mobile-font-weight-medium: 500; // 中粗
|
||||
|
||||
/* 字族 */
|
||||
--ti-mobile-font-family: 'HarmonySans', '鸿蒙黑体', 'NotoSans', 'Helvetica', 'Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑',
|
||||
'Microsoft JhengHei';
|
||||
|
||||
/* 间距 */
|
||||
--ti-mobile-space-1x: 4px; // 1倍间距
|
||||
--ti-mobile-space-2x: 8px; // 2倍间距
|
||||
--ti-mobile-space-3x: 12px; // 3倍间距
|
||||
--ti-mobile-space-4x: 16px; // 4倍间距
|
||||
--ti-mobile-space-5x: 20px; // 5倍间距
|
||||
--ti-mobile-space-6x: 24px; // 6倍间距
|
||||
--ti-mobile-space-8x: 32px; // 8倍间距
|
||||
--ti-mobile-space-12x: 48px; // 12倍间距
|
||||
--ti-mobile-space-16x: 64px; // 16倍间距
|
||||
|
||||
/* 圆角 */
|
||||
--ti-mobile-border-radius-xs: 2px; // 适用于小标签
|
||||
--ti-mobile-border-radius-s: 4px; // 适用于中标签
|
||||
--ti-mobile-border-radius-m: 8px; // 管理侧卡片、全局/信息提示、弹窗
|
||||
--ti-mobile-border-radius-l: 12px; // 中圆角
|
||||
--ti-mobile-border-radius-xl: 16px; // 大圆角(卡片、弹窗)
|
||||
--ti-mobile-border-radius-xxl: 24px; // 中圆角
|
||||
--ti-mobile-border-radius-full: 9999px; // 全圆角(按钮、开关)
|
||||
|
||||
/* 边框宽度 */
|
||||
--ti-mobile-border-width: 1px;
|
||||
|
||||
/* 边框类型 */
|
||||
--ti-mobile-border-style-solid: solid; // 实线
|
||||
--ti-mobile-border-style-dash: dash; // 虚线
|
||||
|
||||
/* 阴影 */
|
||||
--ti-mobile-shadow-xs: 0 0 4px 0 rgba(0, 0, 0, 0, 0.08); // 输入框、下拉框、日期选择框
|
||||
--ti-mobile-shadow-s: 0 0 20px 0 rgba(0, 0, 0, 0.08); // 卡片选中、聚焦；悬浮面板、全局提示
|
||||
--ti-mobile-shadow-m: 0 10px 20px 0 rgba(0, 0, 0, 0, 0.15);
|
||||
--ti-mobile-shadow-l: 0 10px 50px 0 rgba(0, 0, 0, 0, 0.3);
|
||||
|
||||
/* ------------------ deprecated ------------------ */
|
||||
/* 品牌色*/
|
||||
--ti-mobile-base-color-brand-1: #4a79fe; /* 蓝_品牌色*/
|
||||
--ti-mobile-base-color-brand-2: #3168f1;
|
||||
|
|
|
|||
Loading…
Reference in New Issue