forked from opentiny/tiny-engine
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathcommon.less
More file actions
138 lines (125 loc) · 10.5 KB
/
Copy pathcommon.less
File metadata and controls
138 lines (125 loc) · 10.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
// common变量定义
:root {
//功能色
--te-common-color-success: var(--te-base-kelly-60); // 注释，成功-背景色 #5cb300
--te-common-color-warning: var(--te-base-orange-60); // 注释，告警-背景色 #ff8800
--te-common-color-error: var(--te-base-red-60); // 注释，错误-背景色 #f23030
--te-common-color-info: var(--te-base-blue-70); // 注释，提示信息-背景色/选中色 #1476ff
--te-common-color-prompt-secondary: var(--te-base-indigo-10); // 注释，区块提示-背景色 #f0ebff
// 文本色
--te-common-text-primary: var(--te-base-gray-125); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #191919
--te-common-text-secondary: var(--te-base-gray-80); // 二级文本色-次要信息/表单标签颜色/选块按钮默认色 #595959
--te-common-text-weaken: var(--te-base-gray-70); // 三级文本色-弱化信息/提示文字 #808080
--te-common-text-disabled: var(--te-base-gray-50); // 文本禁用色 #c2c2c2
--te-common-text-link: var(--te-base-blue-70); // 链接色 #1476ff
--te-common-text-inverse: var(--te-base-gray-0); // 主按钮上的文本色 #fff
--te-common-text-dark-inverse: var(--te-base-gray-0); // 深色背景下按钮上的文本色 #fff
--te-common-text-emphasize: var(--te-base-blue-70); // 强调性文字 #1476ff
--te-common-text-checked: var(--te-base-blue-70); // 选中或者hover文字 #1476ff
--te-common-text-purple: var(--te-base-indigo-50); // 区块文本色 #6e51e0
--te-common-icon-primary: var(--te-base-gray-125); // 重要图标色 #191919
--te-common-icon-hover: var(--te-base-gray-80); // 图标悬浮色 #595959
--te-common-icon-secondary: var(--te-base-gray-70); // 图标默认色 #808080
--te-common-icon-disabled: var(--te-base-gray-50); // 图标禁用色 #c2c2c2
--te-common-icon-link: var(--te-base-blue-70); // 图标提示色 #1476ff
--te-common-border-default: var(--te-base-gray-40); // 线条-输入框默认色 #dbdbdb
--te-common-border-active: var(--te-base-gray-125); // 线条-输入框悬浮色/激活色 #191919
--te-common-border-disabled: var(--te-base-gray-40); // 线条-禁用色 #dbdbdb
--te-common-border-secondary: var(--te-base-gray-80); // 线条-次要按钮描边色 #595959
--te-common-border-prompt: var(--te-base-gray-40); // 线条-三级按钮默认色/表单内按钮 #dbdbdb
--te-common-border-hover: var(--te-base-gray-50); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #c2c2c2
--te-common-border-divider: var(--te-base-gray-30); //线条-白色背景分割线颜色 #e6e6e6
--te-common-border-bg-divider: var(--te-base-gray-40); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #dbdbdb
--te-common-border-checked: var(--te-base-blue-70); // 线条 选中色 #1476ff
--te-common-border-error-hover: var(--te-base-red-30); // 线条 红色按钮边框hover色 #faa7a3
--te-common-border-info: var(--te-base-blue-70); // 输入框提示色 #1476ff
--te-common-border-arrow-hover: var(--te-base-gray-10); // 三角箭头边框hover色 #f5f5f5
--te-common-bg-primary: var(--te-base-gray-125); // 主要按钮-背景色 #191919
--te-common-bg-primary-checked: var(--te-base-blue-70); // 主色-背景色 选中和hover等颜色 #1476ff
--te-common-bg-primary-emphasize: var(--te-base-blue-70); // 主色-背景色 强调背景 #1476ff
--te-common-bg-secondary: var(--te-base-gray-80); // 次要按钮-背景色 #595959
--te-common-bg-prompt: var(--te-base-gray-30); // 导航按钮-背景色/选块-选中色 #e6e6e6
--te-common-bg-container: var(
--te-base-gray-10
); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #f5f5f5
--te-common-bg-gray-hover: var(--te-base-gray-40); // 灰色背景hover色 #dbdbdb
--te-common-bg-container-weaken: var(--te-base-gray-5); // 浅编辑代码--背景色 #fafafa
--te-common-bg-tag: var(--te-base-green-10); // tag标签-背景色 #e4f7e9
--te-common-bg-default: var(--te-base-gray-0); // 白色背景-输入框背景/面板背景色 #fff
--te-common-bg-disabled: var(--te-base-gray-20); // 禁用/标签/下拉框多选标签 背景色 #f0f0f0
--te-common-bg-switch: var(--te-base-gray-50); // 开关默认色 #c2c2c2
--te-common-bg-error: var(--te-base-red-10); // 浅色错误背景-背景色 #fff1f0
--te-common-bg-popover: var(--te-base-gray-0); // 对话框/tooltip/popover背景 #fff
--te-common-bg-text-emphasize: var(--te-base-blue-150); // 强调性文字背景色 rgba(20, 118, 255, 0.1)
--te-common-bg-info: var(--te-base-blue-20); // 提示框info背景色 #deecff
--te-common-bg-scroll: var(--te-base-gray-40); // 滚动条默认背景色#dbdbdb
--te-common-bg-scroll-hover: var(--te-base-gray-50); // 滚动条默认背景色#c2c2c2
--te-common-shadow-panel: var(--te-base-box-shadow-rgba-3); // 面板阴影 rgba(0, 0, 0, 0.1)
--te-common-bg-purple-hover: var(--te-base-indigo-20); // 紫背景hover色 #e2d9fc
--te-common-mask: var(--te-base-gray-140); // 蒙层色 rgba(0, 0, 0, 0.2)
// 通用间距
--te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
--te-common-vertical-form-label-spacing: 8px; // 上下布局时，表单label与表单元素的间隔
}
:root[data-theme='dark'] {
//功能色
--te-common-color-success: var(--te-base-green-70); // 注释，成功-背景色 #39a632
--te-common-color-warning: var(--te-base-orange-60); // 注释，告警-背景色 #ff8800
--te-common-color-error: var(--te-base-red-140); // 注释，错误-背景色 #d94838
--te-common-color-info: var(--te-base-blue-60); // 注释，提示信息-背景色/选中色 #317af7
--te-common-color-prompt-secondary: var(--te-base-indigo-110); // 注释，区块提示-背景色 #272635
// 文本色
--te-common-text-primary: var(--te-base-gray-30); // 一级文本色-重要信息/标题颜色/输入类文本颜色 #E6E6E6
--te-common-text-secondary: var(--te-base-gray-60); // 二级文本色-次要信息/表单标签颜色 #B3B3B3
--te-common-text-weaken: var(--te-base-gray-70); // 三级文本色-弱化信息/提示文字 #808080
--te-common-text-disabled: var(--te-base-gray-90); // 文本禁用色 #4D4D4D
--te-common-text-link: var(--te-base-blue-60); // 链接色 #317AF7
--te-common-text-inverse: var(--te-base-gray-130); // 主按钮上的文本色 #000
--te-common-text-dark-inverse: var(--te-base-gray-130); // 深色背景下按钮上的文本色 #000
--te-common-text-emphasize: var(--te-base-blue-60); // 强调性文字 #317AF7
--te-common-text-checked: var(--te-base-blue-60); // 选中或者hover文字 #317AF7
--te-common-text-purple: var(--te-base-indigo-130); // 区块文本色 #716acc
--te-common-icon-primary: var(--te-base-gray-30); // 重要图标色 #E6E6E6
--te-common-icon-hover: var(--te-base-gray-60); // 图标悬浮色 #B3B3B3
--te-common-icon-secondary: var(--te-base-gray-70); // 图标默认色 #808080
--te-common-icon-disabled: var(--te-base-gray-90); // 图标禁用色 #4D4D4D
--te-common-icon-link: var(--te-base-blue-60); // 图标提示色 #317AF7
--te-common-border-default: var(--te-base-gray-90); // 线条-输入框默认色 #4D4D4D
--te-common-border-active: var(--te-base-gray-30); // 线条-输入框悬浮色/激活色 #E6E6E6
--te-common-border-disabled: var(--te-base-gray-90); // 线条-禁用色 #4D4D4D
--te-common-border-secondary: var(--te-base-gray-60); // 线条-次要按钮描边色 #B3B3B3
--te-common-border-prompt: var(--te-base-gray-90); // 线条-三级按钮默认色/表单内按钮 #4D4D4D
--te-common-border-hover: var(--te-base-gray-70); // 线条-按钮边框悬浮色/复选框/单选框默认边框色 #808080
--te-common-border-divider: var(--te-base-gray-100); //线条-白色背景分割线颜色 #333333
--te-common-border-bg-divider: var(--te-base-gray-90); // 线条-灰色背景分割线颜色/表头分割线/选块分割线 #4D4D4D
--te-common-border-checked: var(--te-base-blue-60); // 线条 选中色 #317AF7
--te-common-border-error-hover: var(--te-base-red-130); // 线条 红色按钮边框hover色 #B6332A
--te-common-border-info: var(--te-base-blue-60); // 输入框提示色 #317AF7
--te-common-border-arrow-hover: var(--te-base-gray-110); // 三角箭头边框hover色 #262626
--te-common-bg-primary: var(--te-base-gray-30); // 主要按钮-背景色 #E6E6E6
--te-common-bg-primary-checked: var(--te-base-blue-60); // 主色-背景色 选中和hover等颜色 #317AF7
--te-common-bg-primary-emphasize: var(--te-base-blue-60); // 主色-背景色 强调背景 #317AF7
--te-common-bg-secondary: var(--te-base-gray-60); // 次要按钮-背景色 #B3B3B3
--te-common-bg-prompt: var(--te-base-gray-100); // 导航按钮-背景色/选块-选中色 #333333
--te-common-bg-container: var(
--te-base-gray-110
); // 列表悬浮色/表格悬浮色/顶部导航按钮悬浮色/选块背景色/提示背景色 #262626
--te-common-bg-gray-hover: var(--te-base-gray-90); // 灰色背景hover色 #4D4D4D
--te-common-bg-container-weaken: var(--te-base-gray-110); // 浅编辑代码--背景色 #262626
--te-common-bg-tag: var(--te-base-green-120); // tag标签-背景色 #273726
--te-common-bg-default: var(--te-base-gray-120); // 深色背景-输入框背景/面板背景色 #1A1A1A
--te-common-bg-disabled: var(--te-base-gray-110); // 禁用/标签/下拉框多选标签 背景色 #262626
--te-common-bg-switch: var(--te-base-gray-90); // 开关默认色 #4D4D4D
--te-common-bg-error: var(--te-base-red-110); // 深色错误背景-背景色 #33201E
--te-common-bg-popover: var(--te-base-gray-100); // 对话框/tooltip/popover背景 #333333
--te-common-bg-text-emphasize: var(--te-base-blue-160); // 强调性文字背景色 rgba(49, 122, 247, 0.1)
--te-common-bg-info: var(--te-base-blue-120); // 提示框info背景色 #0A1831
--te-common-bg-scroll: var(--te-base-gray-110); // 滚动条默认背景色#262626
--te-common-bg-scroll-hover: var(--te-base-gray-100); // 滚动条默认背景色#333333
--te-common-shadow-panel: var(--te-base-box-shadow-rgba-4); // 面板阴影 rgba(0, 0, 0, 0.2)
--te-common-bg-purple-hover: var(--te-base-indigo-120); // 紫背景hover色 #302e47
--te-common-mask: var(--te-base-gray-140); // 蒙层色 rgba(0, 0, 0, 0.2)
// 通用间距
--te-common-vertical-item-spacing-normal: 12px; // 表单元素之间的距离，标题和列表之间的距离、一个独立元素的padding等等
--te-common-vertical-form-label-spacing: 8px; // 上下布局时，表单label与表单元素的间隔
}