UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

open-hand.github.io/choerodon-ui/

open-hand/choerodon-ui

171 lines (155 loc) • 7.59 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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
@import 'colorPalette'; // color palettes @blue-1: color(~`colorPalette("@{blue-6}", 1)`); @blue-2: color(~`colorPalette("@{blue-6}", 2)`); @blue-3: color(~`colorPalette("@{blue-6}", 3)`); @blue-4: color(~`colorPalette("@{blue-6}", 4)`); @blue-5: color(~`colorPalette("@{blue-6}", 5)`); @blue-6: #3f51b5; @blue-7: color(~`colorPalette("@{blue-6}", 7)`); @blue-8: color(~`colorPalette("@{blue-6}", 8)`); @blue-9: color(~`colorPalette("@{blue-6}", 9)`); @blue-10: color(~`colorPalette("@{blue-6}", 10)`); @purple-1: color(~`colorPalette("@{purple-6}", 1)`); @purple-2: color(~`colorPalette("@{purple-6}", 2)`); @purple-3: color(~`colorPalette("@{purple-6}", 3)`); @purple-4: color(~`colorPalette("@{purple-6}", 4)`); @purple-5: color(~`colorPalette("@{purple-6}", 5)`); @purple-6: #8e44ad; @purple-7: color(~`colorPalette("@{purple-6}", 7)`); @purple-8: color(~`colorPalette("@{purple-6}", 8)`); @purple-9: color(~`colorPalette("@{purple-6}", 9)`); @purple-10: color(~`colorPalette("@{purple-6}", 10)`); @cyan-1: color(~`colorPalette("@{cyan-6}", 1)`); @cyan-2: color(~`colorPalette("@{cyan-6}", 2)`); @cyan-3: color(~`colorPalette("@{cyan-6}", 3)`); @cyan-4: color(~`colorPalette("@{cyan-6}", 4)`); @cyan-5: color(~`colorPalette("@{cyan-6}", 5)`); @cyan-6: #13c2c2; @cyan-7: color(~`colorPalette("@{cyan-6}", 7)`); @cyan-8: color(~`colorPalette("@{cyan-6}", 8)`); @cyan-9: color(~`colorPalette("@{cyan-6}", 9)`); @cyan-10: color(~`colorPalette("@{cyan-6}", 10)`); @green-1: color(~`colorPalette("@{green-6}", 1)`); @green-2: color(~`colorPalette("@{green-6}", 2)`); @green-3: color(~`colorPalette("@{green-6}", 3)`); @green-4: color(~`colorPalette("@{green-6}", 4)`); @green-5: color(~`colorPalette("@{green-6}", 5)`); @green-6: #00bf96; @green-7: color(~`colorPalette("@{green-6}", 7)`); @green-8: color(~`colorPalette("@{green-6}", 8)`); @green-9: color(~`colorPalette("@{green-6}", 9)`); @green-10: color(~`colorPalette("@{green-6}", 10)`); @magenta-1: color(~`colorPalette("@{magenta-6}", 1)`); @magenta-2: color(~`colorPalette("@{magenta-6}", 2)`); @magenta-3: color(~`colorPalette("@{magenta-6}", 3)`); @magenta-4: color(~`colorPalette("@{magenta-6}", 4)`); @magenta-5: color(~`colorPalette("@{magenta-6}", 5)`); @magenta-6: #eb2f96; @magenta-7: color(~`colorPalette("@{magenta-6}", 7)`); @magenta-8: color(~`colorPalette("@{magenta-6}", 8)`); @magenta-9: color(~`colorPalette("@{magenta-6}", 9)`); @magenta-10: color(~`colorPalette("@{magenta-6}", 10)`); // alias of magenta @pink-1: color(~`colorPalette("@{pink-6}", 1)`); @pink-2: color(~`colorPalette("@{pink-6}", 2)`); @pink-3: color(~`colorPalette("@{pink-6}", 3)`); @pink-4: color(~`colorPalette("@{pink-6}", 4)`); @pink-5: color(~`colorPalette("@{pink-6}", 5)`); @pink-6: #eb2f96; @pink-7: color(~`colorPalette("@{pink-6}", 7)`); @pink-8: color(~`colorPalette("@{pink-6}", 8)`); @pink-9: color(~`colorPalette("@{pink-6}", 9)`); @pink-10: color(~`colorPalette("@{pink-6}", 10)`); @red-1: color(~`colorPalette("@{red-6}", 1)`); @red-2: color(~`colorPalette("@{red-6}", 2)`); @red-3: color(~`colorPalette("@{red-6}", 3)`); @red-4: color(~`colorPalette("@{red-6}", 4)`); @red-5: color(~`colorPalette("@{red-6}", 5)`); @red-6: #d50000; @red-7: color(~`colorPalette("@{red-6}", 7)`); @red-8: color(~`colorPalette("@{red-6}", 8)`); @red-9: color(~`colorPalette("@{red-6}", 9)`); @red-10: color(~`colorPalette("@{red-6}", 10)`); @orange-1: color(~`colorPalette("@{orange-6}", 1)`); @orange-2: color(~`colorPalette("@{orange-6}", 2)`); @orange-3: color(~`colorPalette("@{orange-6}", 3)`); @orange-4: color(~`colorPalette("@{orange-6}", 4)`); @orange-5: color(~`colorPalette("@{orange-6}", 5)`); @orange-6: #fa8c16; @orange-7: color(~`colorPalette("@{orange-6}", 7)`); @orange-8: color(~`colorPalette("@{orange-6}", 8)`); @orange-9: color(~`colorPalette("@{orange-6}", 9)`); @orange-10: color(~`colorPalette("@{orange-6}", 10)`); @yellow-1: color(~`colorPalette("@{yellow-6}", 1)`); @yellow-2: color(~`colorPalette("@{yellow-6}", 2)`); @yellow-3: color(~`colorPalette("@{yellow-6}", 3)`); @yellow-4: color(~`colorPalette("@{yellow-6}", 4)`); @yellow-5: color(~`colorPalette("@{yellow-6}", 5)`); @yellow-6: #fadb14; @yellow-7: color(~`colorPalette("@{yellow-6}", 7)`); @yellow-8: color(~`colorPalette("@{yellow-6}", 8)`); @yellow-9: color(~`colorPalette("@{yellow-6}", 9)`); @yellow-10: color(~`colorPalette("@{yellow-6}", 10)`); @volcano-1: color(~`colorPalette("@{volcano-6}", 1)`); @volcano-2: color(~`colorPalette("@{volcano-6}", 2)`); @volcano-3: color(~`colorPalette("@{volcano-6}", 3)`); @volcano-4: color(~`colorPalette("@{volcano-6}", 4)`); @volcano-5: color(~`colorPalette("@{volcano-6}", 5)`); @volcano-6: #fa541c; @volcano-7: color(~`colorPalette("@{volcano-6}", 7)`); @volcano-8: color(~`colorPalette("@{volcano-6}", 8)`); @volcano-9: color(~`colorPalette("@{volcano-6}", 9)`); @volcano-10: color(~`colorPalette("@{volcano-6}", 10)`); @geekblue-1: color(~`colorPalette("@{geekblue-6}", 1)`); @geekblue-2: color(~`colorPalette("@{geekblue-6}", 2)`); @geekblue-3: color(~`colorPalette("@{geekblue-6}", 3)`); @geekblue-4: color(~`colorPalette("@{geekblue-6}", 4)`); @geekblue-5: color(~`colorPalette("@{geekblue-6}", 5)`); @geekblue-6: #2f54eb; @geekblue-7: color(~`colorPalette("@{geekblue-6}", 7)`); @geekblue-8: color(~`colorPalette("@{geekblue-6}", 8)`); @geekblue-9: color(~`colorPalette("@{geekblue-6}", 9)`); @geekblue-10: color(~`colorPalette("@{geekblue-6}", 10)`); @lime-1: color(~`colorPalette("@{lime-6}", 1)`); @lime-2: color(~`colorPalette("@{lime-6}", 2)`); @lime-3: color(~`colorPalette("@{lime-6}", 3)`); @lime-4: color(~`colorPalette("@{lime-6}", 4)`); @lime-5: color(~`colorPalette("@{lime-6}", 5)`); @lime-6: #a0d911; @lime-7: color(~`colorPalette("@{lime-6}", 7)`); @lime-8: color(~`colorPalette("@{lime-6}", 8)`); @lime-9: color(~`colorPalette("@{lime-6}", 9)`); @lime-10: color(~`colorPalette("@{lime-6}", 10)`); @gold-1: color(~`colorPalette("@{gold-6}", 1)`); @gold-2: color(~`colorPalette("@{gold-6}", 2)`); @gold-3: color(~`colorPalette("@{gold-6}", 3)`); @gold-4: color(~`colorPalette("@{gold-6}", 4)`); @gold-5: color(~`colorPalette("@{gold-6}", 5)`); @gold-6: #faad14; @gold-7: color(~`colorPalette("@{gold-6}", 7)`); @gold-8: color(~`colorPalette("@{gold-6}", 8)`); @gold-9: color(~`colorPalette("@{gold-6}", 9)`); @gold-10: color(~`colorPalette("@{gold-6}", 10)`); @dark-1: color(~`colorPalette("@{dark-6}", 1)`); @dark-2: color(~`colorPalette("@{dark-6}", 2)`); @dark-3: color(~`colorPalette("@{dark-6}", 3)`); @dark-4: color(~`colorPalette("@{dark-6}", 4)`); @dark-5: color(~`colorPalette("@{dark-6}", 5)`); @dark-6: #2f353b; @dark-7: color(~`colorPalette("@{dark-6}", 7)`); @dark-8: color(~`colorPalette("@{dark-6}", 8)`); @dark-9: color(~`colorPalette("@{dark-6}", 9)`); @dark-10: color(~`colorPalette("@{dark-6}", 10)`); @gray-1: color(~`colorPalette("@{gray-6}", 1)`); @gray-2: color(~`colorPalette("@{gray-6}", 2)`); @gray-3: color(~`colorPalette("@{gray-6}", 3)`); @gray-4: color(~`colorPalette("@{gray-6}", 4)`); @gray-5: color(~`colorPalette("@{gray-6}", 5)`); @gray-6: #808080; @gray-7: color(~`colorPalette("@{gray-6}", 7)`); @gray-8: color(~`colorPalette("@{gray-6}", 8)`); @gray-9: color(~`colorPalette("@{gray-6}", 9)`); @gray-10: color(~`colorPalette("@{gray-6}", 10)`); @preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue, purple, dark, gray;