oneao/workspace
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

u

Browse Source
This commit is contained in:
oneao committed 2025-09-04 17:31:49 +08:00
1 parent 068fcb7649
commit 1a33497c5d
29 files changed
+889 -306
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

code/base-project/base-vue/packages/ao-design/src/_styles/_variables.scss
+70 -30
View File
@@ -2,45 +2,85 @@
$prefix: 'ao' !default;
// 基础颜色
$primary: var(--ao-primary); // 色彩-品牌-可操作
$warning: var(--ao-warning); // 色彩-功能-警告
$danger: var(--ao-danger); // 色彩-功能-失败
$success: var(--ao-success); // 色彩-功能-成功
$default-color: var(--ao-default-color); // 色彩-品牌-可操作
$primary-color: var(--ao-primary-color); // 色彩-品牌-可操作
$warning-color: var(--ao-warning-color); // 色彩-功能-警告
$danger-color: var(--ao-danger-color); // 色彩-功能-失败
$success-color: var(--ao-success-color); // 色彩-功能-成功
// 默认颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
$default-color-hover: var(--ao-default-color-hover); // hover态
$default-color-focus: var(--ao-default-color-focus); // focus态，包括鼠标和键盘
$default-color-active: var(--ao-default-color-active); // 点击态
$default-color-disabled: var(--ao-default-color-disabled); // 禁用态
// 基础颜色的扩展 用于 hover / 聚焦 / 禁用 / 点击 等状态
$primary-hover: var(--ao-primary-hover); // hover态
$primary-focus: var(--ao-primary-focus); // focus态，包括鼠标和键盘
$primary-active: var(--ao-primary-active); // 点击态
$primary-disabled: var(--ao-primary-disabled); // 禁用态
$primary-color-hover: var(--ao-primary-color-hover); // hover态
$primary-color-focus: var(--ao-primary-color-focus); // focus态，包括鼠标和键盘
$primary-color-active: var(--ao-primary-color-active); // 点击态
$primary-color-disabled: var(--ao-primary-color-disabled); // 禁用态
// 警告色扩展
$warning-hover: var(--ao-warning-hover);
$warning-focus: var(--ao-warning-focus);
$warning-active: var(--ao-warning-active);
$warning-disabled: var(--ao-warning-disabled);
$warning-color-hover: var(--ao-warning-color-hover);
$warning-color-focus: var(--ao-warning-color-focus);
$warning-color-active: var(--ao-warning-color-active);
$warning-color-disabled: var(--ao-warning-color-disabled);
// 失败/错误色扩展
$danger-hover: var(--ao-danger-hover);
$danger-focus: var(--ao-danger-focus);
$danger-active: var(--ao-danger-active);
$danger-disabled: var(--ao-danger-disabled);
$danger-color-hover: var(--ao-danger-color-hover);
$danger-color-focus: var(--ao-danger-color-focus);
$danger-color-active: var(--ao-danger-color-active);
$danger-color-disabled: var(--ao-danger-color-disabled);
// 成功色扩展
$success-hover: var(--ao-success-hover);
$success-focus: var(--ao-success-focus);
$success-active: var(--ao-success-active);
$success-disabled: var(--ao-success-disabled);
$success-color-hover: var(--ao-success-color-hover);
$success-color-focus: var(--ao-success-color-focus);
$success-color-active: var(--ao-success-color-active);
$success-color-disabled: var(--ao-success-color-disabled);
// 文本颜色
$text-primary: var(--ao-text-primary); // 色彩-文字-主要
$text-secondary: var(--ao-text-secondary); // 色彩-文字-次要
$text-assist: var(--ao-text-secondary); // 色彩-文字-次要
$text-placeholder: var(--ao-text-placeholder); // 色彩-文字-占位符/说明
$text-disabled: var(--ao-text-disabled); // 色彩-文字-禁用
$text-anti: var(--ao-text-anti); // 色彩-文字-反色
$text-primary: var(--ao-text-primary); // 色彩-文字-品牌
$text-link: var(--ao-text-link); // 色彩-文字-链接
$text-color-base: var(--ao-text-color-base); // 色彩-文字-主要
$text-color-secondary: var(--ao-text-color-secondary); // 色彩-文字-次要
$text-color-assist: var(--ao-text-color-assist); // 色彩-文字-次要
$text-color-placeholder: var(--ao-text-color-placeholder); // 色彩-文字-占位符/说明
$text-color-disabled: var(--ao-text-color-disabled); // 色彩-文字-禁用
$text-color-anti: var(--ao-text-color-anti); // 色彩-文字-反色
$text-color-link: var(--ao-text-color-link); // 色彩-文字-链接
$border-radius: 2px;
$border-divider: var(--ao-stroke); // 分割线（内容区域之间的分隔，如列表、面板内部）
$border-component: var(--ao-border); // 组件边框（Input、Select、Card 等容器的外部边框）
$stroke-color: var(--ao-stroke-color); // 分割线（内容区域之间的分隔，如列表、面板内部）
$border-color: var(--ao-border-color); // 组件边框（Input、Select、Card 等容器的外部边框）
$bg-color-control: var(
--ao-bg-color-control
); // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
// 高度
$size-height-small: 24px;
$size-height-medium: 28px;
$size-height-large: 32px;
// 字体大小
$size-font-small: 12px;
$size-font-medium: 13px;
$size-font-large: 14px;
// 滚动条颜色
$scrollbar-color: var(--ao-scrollbar-color);
// 滚动条悬浮颜色
$scrollbar-hover-color: var(--ao-scrollbar-hover-color);
// 滚动条轨道颜色
$scroll-track-color: var(--ao-scroll-track-color);
// 容器颜色，使用的组件：popup
$bg-color-container: var(--ao-bg-color-container);
$bg-color-container-hover: var(--ao-bg-color-container-hover);
$bg-color-container-active: var(--ao-bg-color-container-active);
// shadow
// 基础/下层 投影 hover 使用的组件包括：表格 /
$shadow-surface: var(--ao-shadow-surface);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
$shadow-popup: var(--ao-shadow-popup);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
$shadow-overlay: var(--ao-shadow-overlay);
code/base-project/base-vue/packages/ao-design/src/_styles/theme/_dark.scss
+58 -31
View File
@@ -1,39 +1,66 @@
:root[theme-mode='dark'] {
--ao-primary: #4582e6;
--ao-warning: #cf6e2d;
--ao-danger: #c64751;
--ao-success: #059465;
--ao-default-color: #393939;
--ao-primary-color: #4582e6;
--ao-warning-color: #cf6e2d;
--ao-danger-color: #c64751;
--ao-success-color: #059465;
--ao-primary-hover: #2667d4;
--ao-primary-focus: #173463;
--ao-primary-active: #699ef5;
--ao-primary-disabled: #143975;
--ao-default-color-hover: #4b4b4b;
--ao-default-color-focus: #505050;
--ao-default-color-active: #5c5c5c;
--ao-default-color-disabled: #2c2c2c;
--ao-warning-hover: #a75d2b;
--ao-warning-focus: #582f21;
--ao-warning-active: #dc7633;
--ao-warning-disabled: #733c23;
--ao-primary-color-hover: #2667d4;
--ao-primary-color-focus: #173463;
--ao-primary-color-active: #699ef5;
--ao-primary-color-disabled: #143975;
--ao-danger-hover: #a03f46;
--ao-danger-focus: #5e2a2d;
--ao-danger-active: #de6670;
--ao-danger-disabled: #703439;
--ao-warning-color-hover: #a75d2b;
--ao-warning-color-focus: #582f21;
--ao-warning-color-active: #dc7633;
--ao-warning-color-disabled: #733c23;
--ao-success-hover: #0d7a55;
--ao-success-focus: #1a4230;
--ao-success-active: #43af8a;
--ao-success-disabled: #17533d;
--ao-danger-color-hover: #a03f46;
--ao-danger-color-focus: #5e2a2d;
--ao-danger-color-active: #de6670;
--ao-danger-color-disabled: #703439;
--ao-text-primary: rgba(255, 255, 255, 90%); /* 主要文字 */
--ao-text-secondary: rgba(255, 255, 255, 55%); /* 次要文字 / 辅助信息 */
--ao-text-assist: rgba(255, 255, 255, 45%); /* 输入框内部辅助元素（icon/count） */
--ao-text-placeholder: rgba(255, 255, 255, 35%); /* 占位符 / 说明文字 */
--ao-text-disabled: rgba(255, 255, 255, 22%); /* 禁用文字 */
--ao-text-anti: #fff; /* 反色文字（深色背景上） */
--ao-text-brand: #4582e6; /* 品牌色文字 / 主操作色 */
--ao-text-link: #4582e6; /* 链接文字 */
--ao-text-watermark: rgba(255, 255, 255, 10%); /* 水印 / 背景文字 */
--ao-success-color-hover: #0d7a55;
--ao-success-color-focus: #1a4230;
--ao-success-color-active: #43af8a;
--ao-success-color-disabled: #17533d;
--ao-stroke: #393939; // 分割线
--ao-border: #5e5e5e; // 边框
--ao-text-color-base: rgba(255, 255, 255, 90%); /* 主要文字 */
--ao-text-color-secondary: rgba(255, 255, 255, 55%); /* 次要文字 / 辅助信息 */
--ao-text-color-assist: rgba(255, 255, 255, 45%); /* 输入框内部辅助元素（icon/count） */
--ao-text-color-placeholder: rgba(255, 255, 255, 35%); /* 占位符 / 说明文字 */
--ao-text-color-disabled: rgba(255, 255, 255, 22%); /* 禁用文字 */
--ao-text-color-anti: #fff; /* 反色文字（深色背景上） */
--ao-text-color-link: #4582e6; /* 链接文字 */
--ao-text-color-watermark: rgba(255, 255, 255, 10%); /* 水印 / 背景文字 */
--ao-stroke-color: #393939; // 分割线
--ao-border-color: #5e5e5e; // 边框
--ao-bg-color-control: transparent; // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
// 滚动条颜色
--ao-scrollbar-color: rgba(255, 255, 255, 10%);
// 滚动条悬浮颜色（ hover ）
--ao-scrollbar-hover-color: rgba(255, 255, 255, 30%);
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
--ao-scroll-track-color: #333;
// 容器颜色，使用的组件：popup
--ao-bg-color-container: #242424;
--ao-bg-color-container-hover: #2c2c2c;
--ao-bg-color-container-active: #4b4b4b;
// shadow阴影
// 基础/下层 投影 hover 使用的组件包括：表格 /
--ao-shadow-surface: 0 4px 6px rgba(0, 0, 0, 6%), 0 1px 10px rgba(0, 0, 0, 8%), 0 2px 4px rgba(0, 0, 0, 12%);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
--ao-shadow-popup: 0 8px 10px rgba(0, 0, 0, 12%), 0 3px 14px rgba(0, 0, 0, 10%), 0 5px 5px rgba(0, 0, 0, 16%);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
--ao-shadow-overlay: 0 16px 24px rgba(0, 0, 0, 14%), 0 6px 30px rgba(0, 0, 0, 12%), 0 8px 10px rgba(0, 0, 0, 20%);
}
code/base-project/base-vue/packages/ao-design/src/_styles/theme/_light.scss
+60 -31
View File
@@ -1,40 +1,69 @@
:root,
:root[theme-mode='light'] {
--ao-primary: #0052d9;
--ao-warning: #e37318;
--ao-danger: #d54941;
--ao-success: #2ba471;
--ao-default-color: #e7e7e7;
--ao-primary-color: #0052d9;
--ao-warning-color: #e37318;
--ao-danger-color: #d54941;
--ao-success-color: #2ba471;
--ao-primary-hover: #366ef4;
--ao-primary-focus: #d9e1ff;
--ao-primary-active: #003cab;
--ao-primary-disabled: #b5c7ff;
--ao-default-color-hover: #dddddd;
--ao-default-color-focus: #cfcfcf;
--ao-default-color-active: #ababab;
--ao-default-color-disabled: #eeeeee;
--ao-warning-hover: #fa9550;
--ao-warning-focus: #ffd9c2;
--ao-warning-active: #be5a00;
--ao-warning-disabled: #ffb98c;
--ao-primary-color-hover: #366ef4;
--ao-primary-color-focus: #d9e1ff;
--ao-primary-color-active: #003cab;
--ao-primary-color-disabled: #b5c7ff;
--ao-danger-hover: #f6685d;
--ao-danger-focus: #ffd8d2;
--ao-danger-active: #ad352f;
--ao-danger-disabled: #ffb9b0;
--ao-warning-color-hover: #fa9550;
--ao-warning-color-focus: #ffd9c2;
--ao-warning-color-active: #be5a00;
--ao-warning-color-disabled: #ffb98c;
--ao-success-hover: #56c08d;
--ao-success-focus: #c6f3d7;
--ao-success-active: #008858;
--ao-success-disabled: #92dab2;
--ao-danger-color-hover: #f6685d;
--ao-danger-color-focus: #ffd8d2;
--ao-danger-color-active: #ad352f;
--ao-danger-color-disabled: #ffb9b0;
--ao-text-primary: rgba(0, 0, 0, 90%); /* 主要文字 */
--ao-text-secondary: rgba(0, 0, 0, 60%); /* 次要文字 / 辅助信息 */
--ao-text-assist: rgba(0, 0, 0, 50%); /* 输入框内部辅助元素（icon/count） */
--ao-text-placeholder: rgba(0, 0, 0, 40%); /* 占位符 / 说明文字 */
--ao-text-disabled: rgba(0, 0, 0, 26%); /* 禁用文字 */
--ao-text-anti: #fff; /* 反色文字（深色背景上） */
--ao-text-brand: #0052d9; /* 品牌色文字 / 主操作色 */
--ao-text-link: #003cab; /* 链接文字 */
--ao-text-watermark: rgba(0, 0, 0, 10%); /* 水印 / 背景文字 */
--ao-success-color-hover: #56c08d;
--ao-success-color-focus: #c6f3d7;
--ao-success-color-active: #008858;
--ao-success-color-disabled: #92dab2;
--ao-stroke: #e8e8e8; // 分割线
--ao-border: #ddd; // 边框
--ao-text-color-base: rgba(0, 0, 0, 90%); /* 主要文字 */
--ao-text-color-secondary: rgba(0, 0, 0, 60%); /* 次要文字 / 辅助信息 */
--ao-text-color-assist: rgba(0, 0, 0, 50%); /* 输入框内部辅助元素（icon/count） */
--ao-text-color-placeholder: rgba(0, 0, 0, 40%); /* 占位符 / 说明文字 */
--ao-text-color-disabled: rgba(0, 0, 0, 26%); /* 禁用文字 */
--ao-text-color-anti: #fff; /* 反色文字（深色背景上） */
--ao-text-color-link: #003cab; /* 链接文字 */
--ao-text-color-watermark: rgba(0, 0, 0, 10%); /* 水印 / 背景文字 */
--ao-stroke-color: #e8e8e8; // 分割线
--ao-border-color: #ddd; // 边框
--ao-bg-color-control: #fff; // 特殊组件背景色，目前只用于 button、input 组件多主题场景，浅色主题下固定为白色，深色主题下为 transparent 适配背景颜色
// 滚动条颜色
--ao-scrollbar-color: rgba(0, 0, 0, 10%);
// 滚动条悬浮颜色（ hover ）
--ao-scrollbar-hover-color: rgba(0, 0, 0, 30%);
// 滚动条轨道颜色，不能是带透明度，否则纵向滚动时，横向滚动条会穿透
--ao-scroll-track-color: #fff;
// 容器颜色，使用的组件：popup
--ao-bg-color-container: #fff;
--ao-bg-color-container-hover: #f3f3f3;
--ao-bg-color-container-active: #e8e8e8;
// shadow阴影
// 基础/下层 投影 hover 使用的组件包括：表格 /
--ao-shadow-surface: 0 1px 10px rgba(0, 0, 0, 5%), 0 4px 5px rgba(0, 0, 0, 8%), 0 2px 4px -1px rgba(0, 0, 0, 12%);
// 中层投影 下拉 使用的组件包括：下拉菜单 / 气泡确认框 / 选择器 /
--ao-shadow-popup:
0 3px 14px 2px rgba(0, 0, 0, 5%), 0 8px 10px 1px rgba(0, 0, 0, 6%), 0 5px 5px -3px rgba(0, 0, 0, 10%);
// 上层投影（警示/弹窗）使用的组件包括：全局提示 / 消息通知
--ao-shadow-overlay:
0 6px 30px 5px rgba(0, 0, 0, 5%), 0 16px 24px 2px rgba(0, 0, 0, 4%), 0 8px 10px -5px rgba(0, 0, 0, 8%);
}