2024-03-24 17:50:12 +08:00
|
|
|
|
/* global css variable */
|
2024-03-31 18:12:33 +08:00
|
|
|
|
|
|
|
|
|
|
$margin: 14px; // 盒子间距
|
|
|
|
|
|
$padding: 16px; // 盒子和内容的间距
|
|
|
|
|
|
$radius-box: 2px; // 边框圆角
|
|
|
|
|
|
|
|
|
|
|
|
// 边框宽度
|
|
|
|
|
|
$border-1: 1px; // 常规
|
|
|
|
|
|
$border-2: 2px; // 较粗
|
|
|
|
|
|
$border-3: 3px; // 粗
|
|
|
|
|
|
|
|
|
|
|
|
// 设置全局主题色：https://arco.design/vue/docs/token
|
|
|
|
|
|
$color-primary: rgb(var(--primary-6)); // 主题色
|
|
|
|
|
|
$color-success: rgb(var(--success-6)); // 成功色
|
|
|
|
|
|
$color-warning: rgb(var(--warning-6)); // 警示色
|
|
|
|
|
|
$color-danger: rgb(var(--danger-6)); // 错误色
|
|
|
|
|
|
$color-link: rgb(var(--link-6)); // 链接色
|
|
|
|
|
|
|
|
|
|
|
|
// 字体色
|
|
|
|
|
|
$color-text-1: var(--color-text-1); // 标题、重点字体颜色 强调/正文标题
|
|
|
|
|
|
$color-text-2: var(--color-text-2); // 默认字体色 次强调/正文标题
|
|
|
|
|
|
$color-text-3: var(--color-text-3); // 次要信息 二级字体色
|
|
|
|
|
|
$color-text-4: var(--color-text-4); // 置灰信息
|
|
|
|
|
|
|
|
|
|
|
|
// 边框色
|
|
|
|
|
|
$color-border-1: var(--color-border-1); // 浅色-主要边框色
|
|
|
|
|
|
$color-border-2: var(--color-border-2); // 一般
|
|
|
|
|
|
$color-border-3: var(--color-border-3); // 深/悬浮
|
|
|
|
|
|
$color-border-4: var(--color-border-4); // 重/按钮描边
|
|
|
|
|
|
|
|
|
|
|
|
// 背景色
|
|
|
|
|
|
$color-bg-1: var(--color-bg-1); // 整体背景色
|
|
|
|
|
|
$color-bg-2: var(--color-bg-2); // 一级容器背景
|
|
|
|
|
|
$color-bg-3: var(--color-bg-3); // 二级容器背景
|
|
|
|
|
|
$color-bg-4: var(--color-bg-4); // 三级容器背景
|
|
|
|
|
|
|
|
|
|
|
|
// 阴影
|
|
|
|
|
|
$shadow-special: 0 0 1px rgba(0, 0, 0, 0.3); // 特殊阴影
|
|
|
|
|
|
$shadow1-center: 0 -2px 5px rgba(0, 0, 0, 0.1); // 阴影样式1
|
|
|
|
|
|
$shadow2-center: 0 0 10px rgba(0, 0, 0, 0.1); // 阴影样式2
|
|
|
|
|
|
$shadow3-center: 0 0 20px rgba(0, 0, 0, 0.1); // 阴影样式3
|
|
|
|
|
|
|
|
|
|
|
|
// 字体大小
|
|
|
|
|
|
$font-size-body-3: 14px; // 默认大小-正文-常规
|
|
|
|
|
|
$font-size-body-2: 13px; // 常规大小的小号字体
|
|
|
|
|
|
$font-size-body-1: 12px; // 说明描述-辅助文案/次要文案
|
|
|
|
|
|
// 标题
|
|
|
|
|
|
$font-size-title-1: 16px; // h3-标题-小
|
|
|
|
|
|
$font-size-title-2: 20px; // h2-标题-中
|
|
|
|
|
|
$font-size-title-3: 24px; // h1-标题-大
|
|
|
|
|
|
// 运营标题
|
|
|
|
|
|
$font-size-display-1: 36px; // 运营标题-小
|
|
|
|
|
|
$font-size-display-2: 48px; // 运营标题-中
|
|
|
|
|
|
$font-size-display-3: 56px; // 运营标题-大
|
