Skip to content

Commit a57bbd4

Browse files
kagolkagol
authored
feat: add devui-theme (#205)
1 parent c8f258f commit a57bbd4

37 files changed

+2083
-8
lines changed

‎packages/devui-theme/.gitignore

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎packages/devui-theme/package.json

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
{
2+
"name": "devui-theme",
3+
"version": "0.0.1",
4+
"main": "src/index.ts",
5+
"module": "src/index.ts",
6+
"files": [
7+
"dist",
8+
"src"
9+
],
10+
"scripts": {
11+
"dev": "vite",
12+
"build": "vite build",
13+
"preview": "vite preview"
14+
},
15+
"dependencies": {
16+
"css-vars-ponyfill": "^2.4.7",
17+
"enquirejs-ssr": "^2.1.7",
18+
"rxjs": "^7.5.4",
19+
"vue": "^3.2.25"
20+
},
21+
"devDependencies": {
22+
"@vitejs/plugin-vue": "^2.2.0",
23+
"typescript": "^4.5.4",
24+
"vite": "^2.8.0",
25+
"vue-tsc": "^0.29.8"
26+
}
27+
}

‎packages/devui-theme/src/index.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
export * from './theme';
2+
export * from './theme-collection';

‎packages/devui-theme/src/styles-var/devui-var.less

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// empty file wait to fill in

‎packages/devui-theme/src/styles-var/devui-var.scss

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@import './private/color';
2+
@import './private/font';
3+
@import './private/shadow';
4+
@import './private/corner';
5+
@import './private/animation';
6+
@import './private/z-index';

‎packages/devui-theme/src/styles-var/private/_animation.scss

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
$devui-animation-duration-slow: var(--devui-animation-duration-slow, 300ms);
2+
$devui-animation-duration-base: var(--devui-animation-duration-base, 200ms);
3+
$devui-animation-duration-fast: var(--devui-animation-duration-fast, 100ms);
4+
5+
$devui-animation-ease-in: var(--devui-animation-ease-in, cubic-bezier(0.5, 0, 0.84, 0.25));
6+
$devui-animation-ease-out: var(--devui-animation-ease-out, cubic-bezier(0.16, 0.75, 0.5, 1));
7+
$devui-animation-ease-in-out: var(--devui-animation-ease-in-out, cubic-bezier(0.5, 0.05, 0.5, 0.95));
8+
$devui-animation-ease-in-out-smooth: var(--devui-animation-ease-in-out-smooth, cubic-bezier(0.645, 0.045, 0.355, 1));
9+
$devui-animation-linear: var(--devui-animation-linear, cubic-bezier(0, 0, 1, 1));

‎packages/devui-theme/src/styles-var/private/_color.scss

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
// 基础变量
2+
$devui-global-bg: var(--devui-global-bg, #f3f6f8); // 全局带底色背景
3+
$devui-global-bg-normal: var(--devui-global-bg-normal, #ffffff); // 全局白色背景
4+
$devui-base-bg: var(--devui-base-bg, #ffffff); // 基础区块背景白色
5+
$devui-base-bg-dark: var(--devui-base-bg-dark, #333854); // 基础区块背景深色(固定)
6+
$devui-brand: var(--devui-brand, #5e7ce0); // 品牌色
7+
$devui-brand-foil: var(--devui-brand-foil, #859bff); // 品牌色辅助色、正衬色
8+
$devui-brand-hover: var(--devui-brand-hover, #7693f5); // 品牌色高亮色（加亮）
9+
$devui-brand-active: var(--devui-brand-active, #526ecc); // 品牌色激活色（加深）
10+
$devui-brand-active-focus: var(--devui-brand-active-focus, #344899); // 品牌色焦点色（重度加深）
11+
$devui-contrast: var(--devui-contrast, #c7000b); // 品牌色撞色、对比色、反衬色、第二品牌色
12+
$devui-text: var(--devui-text, #252b3a); // 正文文本
13+
$devui-text-weak: var(--devui-text-weak, #575d6c); // 弱化的正文信息（手风琴子项，表头）
14+
$devui-aide-text: var(--devui-aide-text, #8a8e99); // 辅助文本、帮助信息（面包屑）
15+
$devui-aide-text-stress: var(--devui-aide-text-stress, #575d6c); // 辅助文本、帮助信息里的强调色
16+
$devui-placeholder: var(--devui-placeholder, #8a8e99); // 占位符
17+
$devui-light-text: var(--devui-light-text, #ffffff); // 有色深色背景下字体颜色（固定）
18+
$devui-dark-text: var(--devui-dark-text, #252b3a); // 有色浅色背景下字体颜色（固定）
19+
$devui-link: var(--devui-link, #526ecc); // 链接文本颜色
20+
$devui-link-active: var(--devui-link-active, #344899); // 链接文本悬停/激活颜色
21+
$devui-link-light: var(--devui-link-light, #96adfa); // 深色背景下链接文本颜色
22+
$devui-link-light-active: var(--devui-link-light-active, #beccfa); // 深色背景下链接文本悬停/激活颜色
23+
$devui-line: var(--devui-line, #adb0b8); // 边框分割线，仅用于边框
24+
$devui-dividing-line: var(--devui-dividing-line, #dfe1e6); // 内容分割线，用于内容之间的分割
25+
$devui-block: var(--devui-block, #ffffff); // 大面积的不可折叠区块的背景色（例如顶部导航背景色）
26+
$devui-area: var(--devui-area, #f8f8f8); // 可折叠区块的背景色（展开区域颜色）
27+
$devui-danger: var(--devui-danger, #f66f6a); // 失败、错误、告警
28+
$devui-warning: var(--devui-warning, #fac20a); // 警告、需注意类型提示
29+
$devui-waiting: var(--devui-waiting, #9faad7); // 等待中
30+
$devui-success: var(--devui-success, #50d4ab); // 成功、正确
31+
$devui-info: var(--devui-info, #5e7ce0); // 通知、一般提示、执行中
32+
$devui-initial: var(--devui-initial, #e9edfa); // 初始化、未执行
33+
$devui-unavailable: var(--devui-unavailable, #f5f5f6); // 不可用、禁用状态
34+
$devui-shadow: var(--devui-shadow, rgba(0, 0, 0, 0.2)); // 阴影色
35+
$devui-light-shadow: var(--devui-light-shadow, rgba(0, 0, 0, 0.1)); // 弱化阴影色
36+
37+
// 图标
38+
$devui-icon-text: var(--devui-icon-text, #252b3a); // 文字图标颜色，同 正文颜色
39+
$devui-icon-bg: var(--devui-icon-bg, #ffffff); // svg图标 背景色
40+
$devui-icon-fill: var(--devui-icon-fill, #d3d5d9); // svg图标 灰色填充色
41+
$devui-icon-fill-hover: var(--devui-icon-fill-hover, #adb5ce); // svg图标 灰色填充色悬停反馈色
42+
$devui-icon-fill-active: var(--devui-icon-fill-active, #5e7ce0); // svg图标 高亮填充色（激活状态）
43+
$devui-icon-fill-active-hover: var(--devui-icon-fill-active-hover, #526ecc); // svg图标 高亮填充色悬停反馈色
44+
// 表单
45+
$devui-form-control-line: var(--devui-form-control-line, #adb0b8); // 表单控件边框色，同 边框分割线
46+
$devui-form-control-line-hover: var(--devui-form-control-line-hover, #575d6c); // 表单控件边框悬停反馈色
47+
$devui-form-control-line-active: var(--devui-form-control-line-active, #5e7ce0); // 表单控件边框激活色，用于获得焦点
48+
$devui-form-control-line-active-hover: var(--devui-form-control-line-active-hover, #344899); // 表单控件边框激活色，用于获得焦点且悬停
49+
// 列表
50+
$devui-list-item-active-bg: var(--devui-list-item-active-bg, #5e7ce0); // 列表类型单选选中背景
51+
$devui-list-item-active-text: var(--devui-list-item-active-text, #ffffff); // 列表类型单选选中背景搭配文本，同 有色深色背景下字体颜色（固定）
52+
$devui-list-item-active-hover-bg: var(--devui-list-item-active-hover-bg, #526ecc); // 列表类型单选选中背景悬停反馈色（仅用于分页等）
53+
$devui-list-item-hover-bg: var(--devui-list-item-hover-bg, #f2f5fc); // 列表类型普通选项悬停背景
54+
$devui-list-item-hover-text: var(--devui-list-item-hover-text, #526ecc); // 列表类型普通选项悬停背景搭配文本
55+
$devui-list-item-selected-bg: var(--devui-list-item-selected-bg, #e9edfa); // 列表类型多选被选中的行色，仅用于表格类
56+
$devui-list-item-strip-bg: var(--devui-list-item-strip-bg, #f2f5fc); // 列表类型斑马纹色，仅用于表格类
57+
// 禁用
58+
$devui-disabled-bg: var(--devui-disabled-bg, #f5f5f6); // disabled背景颜色
59+
$devui-disabled-line: var(--devui-disabled-line, #dfe1e6); // disabled边框颜色
60+
$devui-disabled-text: var(--devui-disabled-text, #adb0b8); // disabled文字颜色
61+
$devui-primary-disabled: var(--devui-primary-disabled, #beccfa); //主要按钮disabled状态文字颜色
62+
$devui-icon-fill-active-disabled: var(--devui-icon-fill-active-disabled, #beccfa); // svg图标激活状态禁用色
63+
// 特殊背景色
64+
$devui-label-bg: var(--devui-label-bg, #eef0f5); // 默认标签化选项背景色
65+
$devui-connected-overlay-bg: var(--devui-connected-overlay-bg, #ffffff); // 有连接点的弹出菜单层背景色
66+
$devui-connected-overlay-line: var(--devui-connected-overlay-line, #526ecc); // 有连接点的弹出菜单层边框色
67+
$devui-fullscreen-overlay-bg: var(--devui-fullscreen-overlay-bg, #ffffff); // 全屏类型的弹出内容层背景色（模态弹窗）
68+
$devui-feedback-overlay-bg: var(--devui-feedback-overlay-bg, #464d6e); // 信息提示反馈类型的漂浮层背景色（toast、popover）
69+
$devui-feedback-overlay-text: var(--devui-feedback-overlay-text, #dfe1e6); // 信息提示反馈类型的漂浮层背景色搭配文本色
70+
$devui-embed-search-bg: var(--devui-embed-search-bg, #f2f5fc); // 被嵌套的无边框搜索框背景色
71+
$devui-embed-search-bg-hover: var(--devui-embed-search-bg-hover, #eef0f5); // 被嵌套的无边框搜索框背景色
72+
$devui-float-block-shadow: var(--devui-float-block-shadow, rgba(94, 124, 224, 0.3)); // 特殊浮层背景色（待修正）
73+
$devui-highlight-overlay: var(--devui-highlight-overlay, rgba(255, 255, 255, 0.8)); // 局部半透明全局浮层背景色（比如底部）
74+
$devui-range-item-hover-bg: var(--devui-range-item-hover-bg, #e9edfa); // datepicker范围中的日期hover的反馈背景色
75+
76+
// 按钮
77+
$devui-primary: var(--devui-primary, #5e7ce0); // 主要按钮，同品牌色
78+
$devui-primary-hover: var(--devui-primary-hover, #7693f5); // 主要按钮悬停
79+
$devui-primary-active: var(--devui-primary-active, #344899); // 主要按钮激活
80+
81+
$devui-contrast-hover: var(--devui-contrast-hover, #d64a52); // 突出按钮悬停
82+
$devui-contrast-active: var(--devui-contrast-active, #b12220);// 突出按钮激活
83+
84+
// 状态
85+
$devui-danger-line: var(--devui-danger-line, #f66f6a); // 失败边框
86+
$devui-danger-bg: var(--devui-danger-bg, #ffeeed); // 失败底色
87+
88+
$devui-warning-line: var(--devui-warning-line, #fa9841);// 警告边框
89+
$devui-warning-bg: var(--devui-warning-bg, #fff3e8); // 警告底色
90+
91+
$devui-info-line: var(--devui-info-line, #5e7ce0); // 通知边框
92+
$devui-info-bg: var(--devui-info-bg, #f2f5fc); // 通知底色
93+
94+
$devui-success-line: var(--devui-success-line, #50d4ab);// 成功边框
95+
$devui-success-bg: var(--devui-success-bg, #edfff9); // 成功底色
96+
$devui-primary-line: var(--devui-primary-line, #5e7ce0);// 主要边框
97+
$devui-primary-bg: var(--devui-primary-bg, #f2f5fc); // 主要底色
98+
99+
$devui-default-line: var(--devui-default-line, #5e7ce0);// 默认边框
100+
$devui-default-bg: var(--devui-default-bg, #f3f6f8); // 默认底色

‎packages/devui-theme/src/styles-var/private/_corner.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
//圆角变量
2+
3+
$devui-border-radius: var(--devui-border-radius, 2px); //一般圆角
4+
$devui-border-radius-feedback: var(--devui-border-radius-feedback, 4px); //反馈类圆角
5+
$devui-border-radius-card: var(--devui-border-radius-card, 6px); //卡片圆角

‎packages/devui-theme/src/styles-var/private/_font.scss

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
// 字号大小变量
2+
3+
$devui-font-size: var(--devui-font-size, 12px); //正文、卡片副标题
4+
$devui-font-size-card-title: var(--devui-font-size-card-title, 14px); //卡片标题
5+
$devui-font-size-page-title: var(--devui-font-size-page-title, 16px); //页面标题
6+
$devui-font-size-modal-title: var(--devui-font-size-modal-title, 18px); //弹窗标题、数字
7+
$devui-font-size-price: var(--devui-font-size-price, 20px); //购买价格
8+
$devui-font-size-data-overview: var(--devui-font-size-data-overview, 24px); //数据总览
9+
10+
$devui-font-size-icon: var(--devui-font-size-icon, 16px); //图标大小
11+
$devui-font-size-sm: var(--devui-font-size-sm, 12px); //当组件size为'sm'时使用此字号大小
12+
$devui-font-size-md: var(--devui-font-size-md, 12px); //当组件size为''时使用此字号大小
13+
$devui-font-size-lg: var(--devui-font-size-lg, 14px); //当组件size为'lg'时使用此字号大小
14+
15+
$devui-font-title-weight: bold; //标题文字粗细
16+
$devui-font-content-weight: normal; //内容文字粗细
17+
$devui-line-height-base: 1.5; //规范行高
18+
19+
$font-title-weight: bold;
20+
$font-content-weight: normal;
21+
$line-height-base: 1.5;

‎packages/devui-theme/src/styles-var/private/_shadow.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
//阴影变量
2+
3+
$devui-shadow-length-base: var(--devui-shadow-length-base, 0 1px 4px 0); //直接铺陈在页面上方的元素 (card等)
4+
5+
$devui-shadow-length-slide-left: var(--devui-shadow-length-slide-left, -2px 0 8px 0); //向左滑动时出现在右侧边缘的阴影 (dataTable固定右侧列向左滑动)
6+
$devui-shadow-length-slide-right: var(--devui-shadow-length-slide-right, 2px 0 8px 0); //向右滑动时出现在左侧边缘的阴影 (dataTable固定左侧列向右滑动)
7+
$devui-shadow-length-connected-overlay : var(--devui-shadow-connected-overlay, 0 2px 8px 0); //有连接点的弹出(覆盖)层 (DatePicker Cascader Select TagsInput Pagination的下拉菜单等)
8+
9+
$devui-shadow-length-hover : var(--devui-shadow-length-hover, 0 4px 16px 0); //涉及到hover的地方
10+
$devui-shadow-length-feedback-overlay : var(--devui-shadow-length-feedback-overlay, 0 4px 16px 0); //信息提示反馈类 (PopOver Tooltip Toast StepsGuide等)
11+
12+
$devui-shadow-length-fullscreen-overlay: var(--devui-shadow-fullscreen-overlay, 0 8px 40px 0); //无连接点的弹出(覆盖)层 (Drawer Modal ImagePreview等)

‎packages/devui-theme/src/styles-var/private/_variables.scss

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
@import './color';
2+
@import '../core/font';
3+
@import '../theme/font';
4+
5+
$text-color: $devui-text;
6+
$font-family: 'HuaweiFont', 'Helvetica','Arial', 'PingFangSC-Regular', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑','Microsoft JhengHei';
7+
$font-variant-base: tabular-nums;
8+
$body-background: $devui-base-bg;
9+
$devui-font-size: $devui-font-size; // 12px
10+
// $devui-font-size-modal-title: $devui-font-size-modal-title; // 18px
11+
$font-size-page-title: $devui-font-size-page-title; // 16px
12+
// $devui-font-size-card-title: $devui-font-size-card-title; // 14px
13+
.devui-font-size-base {
14+
font-size: $devui-font-size; // 12px
15+
}
16+
17+
.devui-font-base {
18+
@include font-content(); // 12px normal 1.5
19+
}
20+
21+
.devui-font-size-modal-title {
22+
font-size: $devui-font-size-modal-title; // 18px
23+
}
24+
25+
.devui-font-modal-title {
26+
@include font-title($devui-font-size-modal-title); // 18px bold 1.5
27+
}
28+
29+
.devui-font-size-page-title {
30+
font-size: $devui-font-size-page-title; // 16px
31+
}
32+
33+
.devui-font-page-title {
34+
@include font-title(); // 16px bold 1.5
35+
}
36+
37+
.devui-font-size-secondary-title {
38+
font-size: $devui-font-size-card-title; // 14px
39+
}
40+
41+
.devui-font-secondary-title {
42+
@include font-title($devui-font-size-card-title); // 14px bold 1.5
43+
}

‎packages/devui-theme/src/styles-var/private/_z-index.scss

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// 临时层
2+
// 若存在遮罩，则遮罩基于对应z-index值-1
3+
$devui-z-index-full-page-overlay: var(--devui-z-index-full-page-overlay, 1080); // 全屏覆盖类元素
4+
$devui-z-index-dropdown: var(--devui-z-index-dropdown, 1052); // 下拉菜单，dropdown等
5+
$devui-z-index-pop-up: var(--devui-z-index-pop-up, 1060); // 提示类信息，popover，tooltip等
6+
$devui-z-index-modal: var(--devui-z-index-modal, 1050);// 弹窗,
7+
$devui-z-index-drawer: var(--devui-z-index-drawer, 1040);// 抽屉板
8+
$devui-z-index-framework: var(--devui-z-index-framework, 1000);// 框架类元素，header,sideMenu等
9+
10+
// 内容层，根据需要设置，zIndex需小于临时层
11+
12+
// 背景层，根据需要设置，zIndex需小于内容层

0 commit comments

Comments
 (0)