@bitrise/bitkit 10.35.1 → 10.35.2-alpha-chakra.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/Foundations/Sizes/Sizes.ts +2 -0
- package/src/index.ts +4 -2
- package/src/tsconfig.tsbuildinfo +1 -1
- package/src/Old/Base/Base.css +0 -337
- package/src/Old/Base/Base.tsx +0 -199
- package/src/Old/Flex/Flex.css +0 -105
- package/src/Old/Flex/Flex.tsx +0 -92
- package/src/Old/Placement/Placement.css +0 -100
- package/src/Old/Placement/Placement.tsx +0 -74
- package/src/Old/Placement/PlacementArea.tsx +0 -49
- package/src/Old/Placement/PlacementArrow.tsx +0 -20
- package/src/Old/Placement/PlacementArrowPropsContext.ts +0 -9
- package/src/Old/Placement/PlacementManager.tsx +0 -24
- package/src/Old/Placement/PlacementManagerContext.ts +0 -9
- package/src/Old/Placement/PlacementPopper.tsx +0 -173
- package/src/Old/Placement/PlacementReference.tsx +0 -19
- package/src/Old/hooks/index.ts +0 -2
- package/src/Old/hooks/useEventListener.ts +0 -45
- package/src/Old/hooks/useSyncedStateAndProps.ts +0 -14
- package/src/Old/variables.css +0 -210
- package/src/Old/variables.ts +0 -320
- package/src/old.ts +0 -16
package/src/Old/Base/Base.css
DELETED
|
@@ -1,337 +0,0 @@
|
|
|
1
|
-
.Base {
|
|
2
|
-
margin: 0;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
.Base:first-child { margin-top: 0; }
|
|
6
|
-
.Base:last-child { margin-bottom: 0; }
|
|
7
|
-
|
|
8
|
-
.Base--container { position: relative; }
|
|
9
|
-
|
|
10
|
-
.Base--absolute {
|
|
11
|
-
position: absolute;
|
|
12
|
-
top: 0;
|
|
13
|
-
right: 0;
|
|
14
|
-
bottom: 0;
|
|
15
|
-
left: 0;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.Base--absolute-center {
|
|
19
|
-
position: absolute;
|
|
20
|
-
top: 50%;
|
|
21
|
-
left: 50%;
|
|
22
|
-
transform: translate(-50%, -50%);
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.Base--max-width {
|
|
26
|
-
width: 100%;
|
|
27
|
-
margin-right: auto;
|
|
28
|
-
margin-left: auto;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
.Base--clickable { cursor: pointer; }
|
|
32
|
-
|
|
33
|
-
.Base--overflow-hidden { overflow: hidden; }
|
|
34
|
-
.Base--overflow-scroll { overflow: scroll; }
|
|
35
|
-
.Base--overflow-auto { overflow: auto; }
|
|
36
|
-
|
|
37
|
-
.Base--elevation-x1 { box-shadow: var(--shadow-elevation--x1); }
|
|
38
|
-
.Base--elevation-x2 { box-shadow: var(--shadow-elevation--x2); }
|
|
39
|
-
.Base--elevation-x3 { box-shadow: var(--shadow-elevation--x3); }
|
|
40
|
-
|
|
41
|
-
.Base--margin-x0 { margin: 0; }
|
|
42
|
-
.Base--margin-x1 { margin: var(--size--x1) 0; }
|
|
43
|
-
.Base--margin-x2 { margin: var(--size--x2) 0; }
|
|
44
|
-
.Base--margin-x3 { margin: var(--size--x3) 0; }
|
|
45
|
-
.Base--margin-x4 { margin: var(--size--x4) 0; }
|
|
46
|
-
.Base--margin-x5 { margin: var(--size--x5) 0; }
|
|
47
|
-
.Base--margin-x6 { margin: var(--size--x6) 0; }
|
|
48
|
-
.Base--margin-x8 { margin: var(--size--x8) 0; }
|
|
49
|
-
.Base--margin-x10 { margin: var(--size--x10) 0; }
|
|
50
|
-
.Base--margin-x12 { margin: var(--size--x12) 0; }
|
|
51
|
-
.Base--margin-x16 { margin: var(--size--x16) 0; }
|
|
52
|
-
|
|
53
|
-
.Base--padding-horizontal-x0 { padding-right: 0; padding-left: 0; }
|
|
54
|
-
.Base--padding-horizontal-x1 { padding-right: var(--size--x1); padding-left: var(--size--x1); }
|
|
55
|
-
.Base--padding-horizontal-x2 { padding-right: var(--size--x2); padding-left: var(--size--x2); }
|
|
56
|
-
.Base--padding-horizontal-x3 { padding-right: var(--size--x3); padding-left: var(--size--x3); }
|
|
57
|
-
.Base--padding-horizontal-x4 { padding-right: var(--size--x4); padding-left: var(--size--x4); }
|
|
58
|
-
.Base--padding-horizontal-x5 { padding-right: var(--size--x5); padding-left: var(--size--x5); }
|
|
59
|
-
.Base--padding-horizontal-x6 { padding-right: var(--size--x6); padding-left: var(--size--x6); }
|
|
60
|
-
.Base--padding-horizontal-x8 { padding-right: var(--size--x8); padding-left: var(--size--x8); }
|
|
61
|
-
.Base--padding-horizontal-x10 { padding-right: var(--size--x10); padding-left: var(--size--x10); }
|
|
62
|
-
.Base--padding-horizontal-x12 { padding-right: var(--size--x12); padding-left: var(--size--x12); }
|
|
63
|
-
.Base--padding-horizontal-x16 { padding-right: var(--size--x16); padding-left: var(--size--x16); }
|
|
64
|
-
|
|
65
|
-
.Base--padding-vertical-x0 { padding-top: 0; padding-bottom: 0; }
|
|
66
|
-
.Base--padding-vertical-x1 { padding-top: var(--size--x1); padding-bottom: var(--size--x1); }
|
|
67
|
-
.Base--padding-vertical-x2 { padding-top: var(--size--x2); padding-bottom: var(--size--x2); }
|
|
68
|
-
.Base--padding-vertical-x3 { padding-top: var(--size--x3); padding-bottom: var(--size--x3); }
|
|
69
|
-
.Base--padding-vertical-x4 { padding-top: var(--size--x4); padding-bottom: var(--size--x4); }
|
|
70
|
-
.Base--padding-vertical-x5 { padding-top: var(--size--x5); padding-bottom: var(--size--x5); }
|
|
71
|
-
.Base--padding-vertical-x6 { padding-top: var(--size--x6); padding-bottom: var(--size--x6); }
|
|
72
|
-
.Base--padding-vertical-x8 { padding-top: var(--size--x8); padding-bottom: var(--size--x8); }
|
|
73
|
-
.Base--padding-vertical-x10 { padding-top: var(--size--x10); padding-bottom: var(--size--x10); }
|
|
74
|
-
.Base--padding-vertical-x12 { padding-top: var(--size--x12); padding-bottom: var(--size--x12); }
|
|
75
|
-
.Base--padding-vertical-x16 { padding-top: var(--size--x16); padding-bottom: var(--size--x16); }
|
|
76
|
-
|
|
77
|
-
.Base--border-width-x1,
|
|
78
|
-
.Base--border-width-x2,
|
|
79
|
-
.Base--border-width-x3 {
|
|
80
|
-
border-style: solid;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.Base--border-width-x1 { border-width: 0.0625rem; }
|
|
84
|
-
.Base--border-width-x2 { border-width: 0.125rem; }
|
|
85
|
-
.Base--border-width-x3 { border-width: 0.1875rem; }
|
|
86
|
-
|
|
87
|
-
.Base--border-radius-x1 { border-radius: var(--size--x1); }
|
|
88
|
-
.Base--border-radius-x2 { border-radius: var(--size--x2); }
|
|
89
|
-
.Base--border-radius-x4 { border-radius: var(--size--x4); }
|
|
90
|
-
.Base--border-radius-rounded { border-radius: 50%; }
|
|
91
|
-
|
|
92
|
-
.Base--border-color-white { border-color: var(--color-white); }
|
|
93
|
-
.Base--border-color-black { border-color: var(--color-black); }
|
|
94
|
-
|
|
95
|
-
.Base--border-color-gray-1 { border-color: var(--color-gray--1); }
|
|
96
|
-
.Base--border-color-gray-2 { border-color: var(--color-gray--2); }
|
|
97
|
-
.Base--border-color-gray-3 { border-color: var(--color-gray--3); }
|
|
98
|
-
.Base--border-color-gray-4 { border-color: var(--color-gray--4); }
|
|
99
|
-
.Base--border-color-gray-5 { border-color: var(--color-gray--5); }
|
|
100
|
-
.Base--border-color-gray-6 { border-color: var(--color-gray--6); }
|
|
101
|
-
.Base--border-color-gray-7 { border-color: var(--color-gray--7); }
|
|
102
|
-
.Base--border-color-gray-8 { border-color: var(--color-gray--8); }
|
|
103
|
-
|
|
104
|
-
.Base--border-color-aqua-1 { border-color: var(--color-aqua--1); }
|
|
105
|
-
.Base--border-color-aqua-2 { border-color: var(--color-aqua--2); }
|
|
106
|
-
.Base--border-color-aqua-3 { border-color: var(--color-aqua--3); }
|
|
107
|
-
.Base--border-color-aqua-4 { border-color: var(--color-aqua--4); }
|
|
108
|
-
.Base--border-color-aqua-5 { border-color: var(--color-aqua--5); }
|
|
109
|
-
|
|
110
|
-
.Base--border-color-grape-1 { border-color: var(--color-grape--1); }
|
|
111
|
-
.Base--border-color-grape-2 { border-color: var(--color-grape--2); }
|
|
112
|
-
.Base--border-color-grape-3 { border-color: var(--color-grape--3); }
|
|
113
|
-
.Base--border-color-grape-4 { border-color: var(--color-grape--4); }
|
|
114
|
-
.Base--border-color-grape-5 { border-color: var(--color-grape--5); }
|
|
115
|
-
|
|
116
|
-
.Base--border-color-eggplant { border-color: var(--color-eggplant); }
|
|
117
|
-
|
|
118
|
-
.Base--border-color-red-1 { border-color: var(--color-red--1); }
|
|
119
|
-
.Base--border-color-red-2 { border-color: var(--color-red--2); }
|
|
120
|
-
.Base--border-color-red-3 { border-color: var(--color-red--3); }
|
|
121
|
-
.Base--border-color-red-4 { border-color: var(--color-red--4); }
|
|
122
|
-
.Base--border-color-red-5 { border-color: var(--color-red--5); }
|
|
123
|
-
|
|
124
|
-
.Base--border-color-orange-1 { border-color: var(--color-orange--1); }
|
|
125
|
-
.Base--border-color-orange-2 { border-color: var(--color-orange--2); }
|
|
126
|
-
.Base--border-color-orange-3 { border-color: var(--color-orange--3); }
|
|
127
|
-
.Base--border-color-orange-4 { border-color: var(--color-orange--4); }
|
|
128
|
-
.Base--border-color-orange-5 { border-color: var(--color-orange--5); }
|
|
129
|
-
|
|
130
|
-
.Base--border-color-yellow-1 { border-color: var(--color-yellow--1); }
|
|
131
|
-
.Base--border-color-yellow-2 { border-color: var(--color-yellow--2); }
|
|
132
|
-
.Base--border-color-yellow-3 { border-color: var(--color-yellow--3); }
|
|
133
|
-
.Base--border-color-yellow-4 { border-color: var(--color-yellow--4); }
|
|
134
|
-
.Base--border-color-yellow-5 { border-color: var(--color-yellow--5); }
|
|
135
|
-
|
|
136
|
-
.Base--border-color-green-1 { border-color: var(--color-green--1); }
|
|
137
|
-
.Base--border-color-green-2 { border-color: var(--color-green--2); }
|
|
138
|
-
.Base--border-color-green-3 { border-color: var(--color-green--3); }
|
|
139
|
-
.Base--border-color-green-4 { border-color: var(--color-green--4); }
|
|
140
|
-
.Base--border-color-green-5 { border-color: var(--color-green--5); }
|
|
141
|
-
|
|
142
|
-
.Base--border-color-blue-1 { border-color: var(--color-blue--1); }
|
|
143
|
-
.Base--border-color-blue-2 { border-color: var(--color-blue--2); }
|
|
144
|
-
.Base--border-color-blue-3 { border-color: var(--color-blue--3); }
|
|
145
|
-
.Base--border-color-blue-4 { border-color: var(--color-blue--4); }
|
|
146
|
-
.Base--border-color-blue-5 { border-color: var(--color-blue--5); }
|
|
147
|
-
|
|
148
|
-
.Base--border-color-darkblue-1 { border-color: var(--color-darkblue--1); }
|
|
149
|
-
.Base--border-color-darkblue-2 { border-color: var(--color-darkblue--2); }
|
|
150
|
-
.Base--border-color-darkblue-3 { border-color: var(--color-darkblue--3); }
|
|
151
|
-
.Base--border-color-darkblue-4 { border-color: var(--color-darkblue--4); }
|
|
152
|
-
.Base--border-color-darkblue-5 { border-color: var(--color-darkblue--5); }
|
|
153
|
-
|
|
154
|
-
.Base--border-color-violet-1 { border-color: var(--color-violet--1); }
|
|
155
|
-
.Base--border-color-violet-2 { border-color: var(--color-violet--2); }
|
|
156
|
-
.Base--border-color-violet-3 { border-color: var(--color-violet--3); }
|
|
157
|
-
.Base--border-color-violet-4 { border-color: var(--color-violet--4); }
|
|
158
|
-
.Base--border-color-violet-5 { border-color: var(--color-violet--5); }
|
|
159
|
-
|
|
160
|
-
.Base--background-color-white { background-color: var(--color-white); }
|
|
161
|
-
.Base--background-color-black { background-color: var(--color-black); }
|
|
162
|
-
|
|
163
|
-
.Base--background-color-gray-1 { background-color: var(--color-gray--1); }
|
|
164
|
-
.Base--background-color-gray-2 { background-color: var(--color-gray--2); }
|
|
165
|
-
.Base--background-color-gray-3 { background-color: var(--color-gray--3); }
|
|
166
|
-
.Base--background-color-gray-4 { background-color: var(--color-gray--4); }
|
|
167
|
-
.Base--background-color-gray-5 { background-color: var(--color-gray--5); }
|
|
168
|
-
.Base--background-color-gray-6 { background-color: var(--color-gray--6); }
|
|
169
|
-
.Base--background-color-gray-7 { background-color: var(--color-gray--7); }
|
|
170
|
-
.Base--background-color-gray-8 { background-color: var(--color-gray--8); }
|
|
171
|
-
|
|
172
|
-
.Base--background-color-aqua-1 { background-color: var(--color-aqua--1); }
|
|
173
|
-
.Base--background-color-aqua-2 { background-color: var(--color-aqua--2); }
|
|
174
|
-
.Base--background-color-aqua-3 { background-color: var(--color-aqua--3); }
|
|
175
|
-
.Base--background-color-aqua-4 { background-color: var(--color-aqua--4); }
|
|
176
|
-
.Base--background-color-aqua-5 { background-color: var(--color-aqua--5); }
|
|
177
|
-
|
|
178
|
-
.Base--background-color-grape-1 { background-color: var(--color-grape--1); }
|
|
179
|
-
.Base--background-color-grape-2 { background-color: var(--color-grape--2); }
|
|
180
|
-
.Base--background-color-grape-3 { background-color: var(--color-grape--3); }
|
|
181
|
-
.Base--background-color-grape-4 { background-color: var(--color-grape--4); }
|
|
182
|
-
.Base--background-color-grape-5 { background-color: var(--color-grape--5); }
|
|
183
|
-
|
|
184
|
-
.Base--background-color-eggplant { background-color: var(--color-eggplant); }
|
|
185
|
-
|
|
186
|
-
.Base--background-color-red-1 { background-color: var(--color-red--1); }
|
|
187
|
-
.Base--background-color-red-2 { background-color: var(--color-red--2); }
|
|
188
|
-
.Base--background-color-red-3 { background-color: var(--color-red--3); }
|
|
189
|
-
.Base--background-color-red-4 { background-color: var(--color-red--4); }
|
|
190
|
-
.Base--background-color-red-5 { background-color: var(--color-red--5); }
|
|
191
|
-
|
|
192
|
-
.Base--background-color-orange-1 { background-color: var(--color-orange--1); }
|
|
193
|
-
.Base--background-color-orange-2 { background-color: var(--color-orange--2); }
|
|
194
|
-
.Base--background-color-orange-3 { background-color: var(--color-orange--3); }
|
|
195
|
-
.Base--background-color-orange-4 { background-color: var(--color-orange--4); }
|
|
196
|
-
.Base--background-color-orange-5 { background-color: var(--color-orange--5); }
|
|
197
|
-
|
|
198
|
-
.Base--background-color-yellow-1 { background-color: var(--color-yellow--1); }
|
|
199
|
-
.Base--background-color-yellow-2 { background-color: var(--color-yellow--2); }
|
|
200
|
-
.Base--background-color-yellow-3 { background-color: var(--color-yellow--3); }
|
|
201
|
-
.Base--background-color-yellow-4 { background-color: var(--color-yellow--4); }
|
|
202
|
-
.Base--background-color-yellow-5 { background-color: var(--color-yellow--5); }
|
|
203
|
-
|
|
204
|
-
.Base--background-color-green-1 { background-color: var(--color-green--1); }
|
|
205
|
-
.Base--background-color-green-2 { background-color: var(--color-green--2); }
|
|
206
|
-
.Base--background-color-green-3 { background-color: var(--color-green--3); }
|
|
207
|
-
.Base--background-color-green-4 { background-color: var(--color-green--4); }
|
|
208
|
-
.Base--background-color-green-5 { background-color: var(--color-green--5); }
|
|
209
|
-
|
|
210
|
-
.Base--background-color-blue-1 { background-color: var(--color-blue--1); }
|
|
211
|
-
.Base--background-color-blue-2 { background-color: var(--color-blue--2); }
|
|
212
|
-
.Base--background-color-blue-3 { background-color: var(--color-blue--3); }
|
|
213
|
-
.Base--background-color-blue-4 { background-color: var(--color-blue--4); }
|
|
214
|
-
.Base--background-color-blue-5 { background-color: var(--color-blue--5); }
|
|
215
|
-
|
|
216
|
-
.Base--background-color-darkblue-1 { background-color: var(--color-darkblue--1); }
|
|
217
|
-
.Base--background-color-darkblue-2 { background-color: var(--color-darkblue--2); }
|
|
218
|
-
.Base--background-color-darkblue-3 { background-color: var(--color-darkblue--3); }
|
|
219
|
-
.Base--background-color-darkblue-4 { background-color: var(--color-darkblue--4); }
|
|
220
|
-
.Base--background-color-darkblue-5 { background-color: var(--color-darkblue--5); }
|
|
221
|
-
|
|
222
|
-
.Base--background-color-violet-1 { background-color: var(--color-violet--1); }
|
|
223
|
-
.Base--background-color-violet-2 { background-color: var(--color-violet--2); }
|
|
224
|
-
.Base--background-color-violet-3 { background-color: var(--color-violet--3); }
|
|
225
|
-
.Base--background-color-violet-4 { background-color: var(--color-violet--4); }
|
|
226
|
-
.Base--background-color-violet-5 { background-color: var(--color-violet--5); }
|
|
227
|
-
|
|
228
|
-
.Base--background-color-neutral-95 { background-color: var(--colors-neutral-95, #f6f4f6); }
|
|
229
|
-
.Base--background-color-neutral-40 { background-color: var(--colors-neutral-40, #6b6071); }
|
|
230
|
-
|
|
231
|
-
.Base--background-color-purple-95 { background-color: var(--colors-purple-95, #f9f2fd); }
|
|
232
|
-
.Base--background-color-purple-40 { background-color: var(--colors-purple-40, #7b3ba5); }
|
|
233
|
-
|
|
234
|
-
.Base--background-color-red-95 { background-color: var(--colors-red-95, #fff0f3); }
|
|
235
|
-
.Base--background-color-red-40 { background-color: var(--colors-red-40, #a91e2e); }
|
|
236
|
-
|
|
237
|
-
.Base--background-color-yellow-95 { background-color: var(--colors-yellow-95, #fff6d1); }
|
|
238
|
-
.Base--background-color-yellow-40 { background-color: var(--colors-yellow-40, #875b00); }
|
|
239
|
-
|
|
240
|
-
.Base--background-color-green-95 { background-color: var(--colors-green-95, #eef9f1); }
|
|
241
|
-
.Base--background-color-green-40 { background-color: var(--colors-green-40, #167231); }
|
|
242
|
-
|
|
243
|
-
.Base--background-color-turquoise-95 { background-color: var(--colors-turquoise-95, #e9fbf9); }
|
|
244
|
-
.Base--background-color-turquoise-40 { background-color: var(--colors-turquoise-40, #007366); }
|
|
245
|
-
|
|
246
|
-
.Base--background-color-blue-95 { background-color: var(--colors-blue-95, #ecf8fd); }
|
|
247
|
-
.Base--background-color-blue-40 { background-color: var(--colors-blue-40, #1066ac); }
|
|
248
|
-
|
|
249
|
-
.Base--text-color-white { color: var(--color-white); }
|
|
250
|
-
.Base--text-color-black { color: var(--color-black); }
|
|
251
|
-
|
|
252
|
-
.Base--text-color-gray-1 { color: var(--color-gray--1); }
|
|
253
|
-
.Base--text-color-gray-2 { color: var(--color-gray--2); }
|
|
254
|
-
.Base--text-color-gray-3 { color: var(--color-gray--3); }
|
|
255
|
-
.Base--text-color-gray-4 { color: var(--color-gray--4); }
|
|
256
|
-
.Base--text-color-gray-5 { color: var(--color-gray--5); }
|
|
257
|
-
.Base--text-color-gray-6 { color: var(--color-gray--6); }
|
|
258
|
-
.Base--text-color-gray-7 { color: var(--color-gray--7); }
|
|
259
|
-
.Base--text-color-gray-8 { color: var(--color-gray--8); }
|
|
260
|
-
|
|
261
|
-
.Base--text-color-aqua-1 { color: var(--color-aqua--1); }
|
|
262
|
-
.Base--text-color-aqua-2 { color: var(--color-aqua--2); }
|
|
263
|
-
.Base--text-color-aqua-3 { color: var(--color-aqua--3); }
|
|
264
|
-
.Base--text-color-aqua-4 { color: var(--color-aqua--4); }
|
|
265
|
-
.Base--text-color-aqua-5 { color: var(--color-aqua--5); }
|
|
266
|
-
|
|
267
|
-
.Base--text-color-grape-1 { color: var(--color-grape--1); }
|
|
268
|
-
.Base--text-color-grape-2 { color: var(--color-grape--2); }
|
|
269
|
-
.Base--text-color-grape-3 { color: var(--color-grape--3); }
|
|
270
|
-
.Base--text-color-grape-4 { color: var(--color-grape--4); }
|
|
271
|
-
.Base--text-color-grape-5 { color: var(--color-grape--5); }
|
|
272
|
-
|
|
273
|
-
.Base--text-color-eggplant { color: var(--color-eggplant); }
|
|
274
|
-
|
|
275
|
-
.Base--text-color-red-1 { color: var(--color-red--1); }
|
|
276
|
-
.Base--text-color-red-2 { color: var(--color-red--2); }
|
|
277
|
-
.Base--text-color-red-3 { color: var(--color-red--3); }
|
|
278
|
-
.Base--text-color-red-4 { color: var(--color-red--4); }
|
|
279
|
-
.Base--text-color-red-5 { color: var(--color-red--5); }
|
|
280
|
-
|
|
281
|
-
.Base--text-color-orange-1 { color: var(--color-orange--1); }
|
|
282
|
-
.Base--text-color-orange-2 { color: var(--color-orange--2); }
|
|
283
|
-
.Base--text-color-orange-3 { color: var(--color-orange--3); }
|
|
284
|
-
.Base--text-color-orange-4 { color: var(--color-orange--4); }
|
|
285
|
-
.Base--text-color-orange-5 { color: var(--color-orange--5); }
|
|
286
|
-
|
|
287
|
-
.Base--text-color-yellow-1 { color: var(--color-yellow--1); }
|
|
288
|
-
.Base--text-color-yellow-2 { color: var(--color-yellow--2); }
|
|
289
|
-
.Base--text-color-yellow-3 { color: var(--color-yellow--3); }
|
|
290
|
-
.Base--text-color-yellow-4 { color: var(--color-yellow--4); }
|
|
291
|
-
.Base--text-color-yellow-5 { color: var(--color-yellow--5); }
|
|
292
|
-
|
|
293
|
-
.Base--text-color-green-1 { color: var(--color-green--1); }
|
|
294
|
-
.Base--text-color-green-2 { color: var(--color-green--2); }
|
|
295
|
-
.Base--text-color-green-3 { color: var(--color-green--3); }
|
|
296
|
-
.Base--text-color-green-4 { color: var(--color-green--4); }
|
|
297
|
-
.Base--text-color-green-5 { color: var(--color-green--5); }
|
|
298
|
-
|
|
299
|
-
.Base--text-color-blue-1 { color: var(--color-blue--1); }
|
|
300
|
-
.Base--text-color-blue-2 { color: var(--color-blue--2); }
|
|
301
|
-
.Base--text-color-blue-3 { color: var(--color-blue--3); }
|
|
302
|
-
.Base--text-color-blue-4 { color: var(--color-blue--4); }
|
|
303
|
-
.Base--text-color-blue-5 { color: var(--color-blue--5); }
|
|
304
|
-
|
|
305
|
-
.Base--text-color-darkblue-1 { color: var(--color-darkblue--1); }
|
|
306
|
-
.Base--text-color-darkblue-2 { color: var(--color-darkblue--2); }
|
|
307
|
-
.Base--text-color-darkblue-3 { color: var(--color-darkblue--3); }
|
|
308
|
-
.Base--text-color-darkblue-4 { color: var(--color-darkblue--4); }
|
|
309
|
-
.Base--text-color-darkblue-5 { color: var(--color-darkblue--5); }
|
|
310
|
-
|
|
311
|
-
.Base--text-color-violet-1 { color: var(--color-violet--1); }
|
|
312
|
-
.Base--text-color-violet-2 { color: var(--color-violet--2); }
|
|
313
|
-
.Base--text-color-violet-3 { color: var(--color-violet--3); }
|
|
314
|
-
.Base--text-color-violet-4 { color: var(--color-violet--4); }
|
|
315
|
-
.Base--text-color-violet-5 { color: var(--color-violet--5); }
|
|
316
|
-
|
|
317
|
-
.Base--text-color-neutral-95 { color: var(--colors-neutral-95, #f6f4f6); }
|
|
318
|
-
.Base--text-color-neutral-40 { color: var(--colors-neutral-40, #6b6071); }
|
|
319
|
-
|
|
320
|
-
.Base--text-color-purple-95 { color: var(--colors-purple-95, #f9f2fd); }
|
|
321
|
-
.Base--text-color-purple-40 { color: var(--colors-purple-40, #7b3ba5); }
|
|
322
|
-
|
|
323
|
-
.Base--text-color-red-95 { color: var(--colors-red-95, #fff0f3); }
|
|
324
|
-
.Base--text-color-red-40 { color: var(--colors-red-40, #a91e2e); }
|
|
325
|
-
|
|
326
|
-
.Base--text-color-yellow-95 { color: var(--colors-yellow-95, #fff6d1); }
|
|
327
|
-
.Base--text-color-yellow-40 { color: var(--colors-yellow-40, #875b00); }
|
|
328
|
-
|
|
329
|
-
.Base--text-color-green-95 { color: var(--colors-green-95, #eef9f1); }
|
|
330
|
-
.Base--text-color-green-40 { color: var(--colors-green-40, #167231); }
|
|
331
|
-
|
|
332
|
-
.Base--text-color-turquoise-95 { color: var(--colors-turquoise-95, #e9fbf9); }
|
|
333
|
-
.Base--text-color-turquoise-40 { color: var(--colors-turquoise-40, #007366); }
|
|
334
|
-
|
|
335
|
-
.Base--text-color-blue-95 { color: var(--colors-blue-95, #ecf8fd); }
|
|
336
|
-
.Base--text-color-blue-40 { color: var(--colors-blue-40, #1066ac); }
|
|
337
|
-
|
package/src/Old/Base/Base.tsx
DELETED
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import classnames from 'classnames';
|
|
3
|
-
import './Base.css';
|
|
4
|
-
|
|
5
|
-
export type TypeBorderRadius = 'x1' | 'x2' | 'x4' | 'rounded';
|
|
6
|
-
|
|
7
|
-
export const newToOld = {
|
|
8
|
-
'neutral.100': 'white',
|
|
9
|
-
'neutral.10': 'black',
|
|
10
|
-
'neutral.95': 'gray-1',
|
|
11
|
-
'neutral.93': 'gray-2',
|
|
12
|
-
'neutral.90': 'gray-3',
|
|
13
|
-
'neutral.80': 'gray-4',
|
|
14
|
-
'neutral.70': 'gray-5',
|
|
15
|
-
'neutral.50': 'gray-6',
|
|
16
|
-
'neutral.40': 'gray-7',
|
|
17
|
-
'neutral.30': 'gray-8',
|
|
18
|
-
'turquoise.95': 'aqua-1',
|
|
19
|
-
'turquoise.80': 'aqua-2',
|
|
20
|
-
'turquoise.70': 'aqua-3',
|
|
21
|
-
'turquoise.60': 'aqua-4',
|
|
22
|
-
'turquoise.50': 'aqua-5',
|
|
23
|
-
'purple.95': 'grape-1',
|
|
24
|
-
'purple.70': 'grape-2',
|
|
25
|
-
'purple.50': 'grape-3',
|
|
26
|
-
'purple.30': 'grape-4',
|
|
27
|
-
'purple.10': 'grape-5',
|
|
28
|
-
'purple.40': 'eggplant',
|
|
29
|
-
'red.93': 'red-1',
|
|
30
|
-
'red.70': 'red-2',
|
|
31
|
-
'red.50': 'red-3',
|
|
32
|
-
'red.40': 'red-4',
|
|
33
|
-
'red.30': 'red-5',
|
|
34
|
-
'yellow.95': 'yellow-1',
|
|
35
|
-
'yellow.90': 'yellow-2',
|
|
36
|
-
'yellow.80': 'yellow-3',
|
|
37
|
-
'yellow.70': 'yellow-4',
|
|
38
|
-
'yellow.40': 'yellow-5',
|
|
39
|
-
'green.95': 'green-1',
|
|
40
|
-
'green.80': 'green-2',
|
|
41
|
-
'green.60': 'green-3',
|
|
42
|
-
'green.50': 'green-4',
|
|
43
|
-
'green.40': 'green-5',
|
|
44
|
-
'blue.93': 'blue-1',
|
|
45
|
-
'blue.95': 'blue-95',
|
|
46
|
-
'blue.70': 'blue-2',
|
|
47
|
-
'blue.50': 'blue-3',
|
|
48
|
-
'blue.40': 'blue-4',
|
|
49
|
-
'blue.30': 'blue-5',
|
|
50
|
-
'blue.60': 'darkblue-2',
|
|
51
|
-
'blue.20': 'darkblue-4',
|
|
52
|
-
'blue.10': 'darkblue-5',
|
|
53
|
-
'purple.20': 'violet-5',
|
|
54
|
-
'red.95': 'red-95',
|
|
55
|
-
'orange-3': 'orange-3',
|
|
56
|
-
'turquoise.40': 'turquoise-40',
|
|
57
|
-
} as const;
|
|
58
|
-
|
|
59
|
-
export type TypeColors = keyof typeof newToOld;
|
|
60
|
-
|
|
61
|
-
export type TypeSizes = 'x0' | 'x1' | 'x2' | 'x3' | 'x4' | 'x5' | 'x6' | 'x8' | 'x10' | 'x12' | 'x16';
|
|
62
|
-
|
|
63
|
-
export interface Props {
|
|
64
|
-
/**
|
|
65
|
-
* Sets the type of component to be rendered. Can be a
|
|
66
|
-
* string for an HTML tag or a React component.
|
|
67
|
-
* */
|
|
68
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
69
|
-
Component?: string | React.ComponentType<any>;
|
|
70
|
-
/** Absolute positioning, useful for quick centering in a relative surrounding. */
|
|
71
|
-
absolute?: boolean | 'center';
|
|
72
|
-
/** Sets the background color of any of the valid swatch colors. */
|
|
73
|
-
backgroundColor?: TypeColors;
|
|
74
|
-
/** Sets the border color of any of the valid swatch colors. */
|
|
75
|
-
borderColor?: TypeColors;
|
|
76
|
-
/** Sets the border radius to a multiple value. E.g. 'x1'. */
|
|
77
|
-
borderRadius?: TypeBorderRadius;
|
|
78
|
-
/** Sets the border radius to a multiple value. E.g. 'x1'. */
|
|
79
|
-
borderWidth?: 'x1' | 'x2' | 'x3';
|
|
80
|
-
/** Standard class name property. */
|
|
81
|
-
className?: string;
|
|
82
|
-
/** Sets the border radius to a multiple value. E.g. x1 */
|
|
83
|
-
clickable?: boolean;
|
|
84
|
-
/** Sets relative positioning */
|
|
85
|
-
container?: boolean;
|
|
86
|
-
/** Sets an elevated style with box-shadow, with a multiple value. E.g. x1 */
|
|
87
|
-
elevation?: 'x1' | 'x2' | 'x3';
|
|
88
|
-
/** Sets inline height styling */
|
|
89
|
-
height?: number | string;
|
|
90
|
-
/** Similar to other libraries, an alias to pass a ref to the final React element. */
|
|
91
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
92
|
-
innerRef?: React.Ref<any>;
|
|
93
|
-
/** Sets the margin to a multiple value. E.g. 'x1'. */
|
|
94
|
-
margin?: TypeSizes;
|
|
95
|
-
/** Sets inline max-height styling */
|
|
96
|
-
maxHeight?: number | string;
|
|
97
|
-
/** Sets inline max-width styling */
|
|
98
|
-
maxWidth?: number | string;
|
|
99
|
-
/** Sets inline min-height styling */
|
|
100
|
-
minHeight?: number | string;
|
|
101
|
-
/** Sets inline min-width styling */
|
|
102
|
-
minWidth?: number | string;
|
|
103
|
-
/** Sets the vertical and horizontal padding to a multiple value. E.g. 'x1'. */
|
|
104
|
-
padding?: TypeSizes;
|
|
105
|
-
/** Sets the horizontal padding to a multiple value. E.g. 'x1'. */
|
|
106
|
-
paddingHorizontal?: TypeSizes;
|
|
107
|
-
/** Sets the vertical padding to a multiple value. E.g. 'x1'. */
|
|
108
|
-
paddingVertical?: TypeSizes;
|
|
109
|
-
/** Sets the overflow */
|
|
110
|
-
overflow?: 'hidden' | 'scroll' | 'auto';
|
|
111
|
-
/** Standard style property. */
|
|
112
|
-
style?: React.CSSProperties | { [key: string]: number | string };
|
|
113
|
-
/** @ignore */
|
|
114
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
115
|
-
ref?: React.Ref<any>;
|
|
116
|
-
/** Sets the font color of any of the valid swatch colors. */
|
|
117
|
-
textColor?: TypeColors;
|
|
118
|
-
/** Sets inline width styling */
|
|
119
|
-
width?: number | string;
|
|
120
|
-
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
121
|
-
[key: string]: any;
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
/**
|
|
125
|
-
* The Base component is the end of the line for all components and
|
|
126
|
-
* provides general and utility like styling.
|
|
127
|
-
* */
|
|
128
|
-
const Base: React.FunctionComponent<Props> = (props: Props) => {
|
|
129
|
-
const {
|
|
130
|
-
Component,
|
|
131
|
-
absolute,
|
|
132
|
-
backgroundColor,
|
|
133
|
-
borderColor,
|
|
134
|
-
borderWidth = borderColor ? 'x1' : undefined,
|
|
135
|
-
borderRadius,
|
|
136
|
-
children,
|
|
137
|
-
className,
|
|
138
|
-
clickable,
|
|
139
|
-
container,
|
|
140
|
-
elevation,
|
|
141
|
-
height,
|
|
142
|
-
innerRef,
|
|
143
|
-
margin,
|
|
144
|
-
maxHeight,
|
|
145
|
-
maxWidth,
|
|
146
|
-
minHeight,
|
|
147
|
-
minWidth,
|
|
148
|
-
padding,
|
|
149
|
-
paddingHorizontal = padding,
|
|
150
|
-
paddingVertical = padding,
|
|
151
|
-
overflow,
|
|
152
|
-
style,
|
|
153
|
-
textColor,
|
|
154
|
-
width,
|
|
155
|
-
...rest
|
|
156
|
-
} = props;
|
|
157
|
-
|
|
158
|
-
const FinalComponent = Component || 'div';
|
|
159
|
-
const classes = classnames(
|
|
160
|
-
'Base',
|
|
161
|
-
{
|
|
162
|
-
'Base--absolute': absolute === true,
|
|
163
|
-
[`Base--absolute-${absolute}`]: typeof absolute === 'string',
|
|
164
|
-
[`Base--background-color-${newToOld[backgroundColor!]}`]: backgroundColor,
|
|
165
|
-
[`Base--border-radius-${borderRadius}`]: borderRadius,
|
|
166
|
-
[`Base--border-color-${newToOld[borderColor!]}`]: borderColor,
|
|
167
|
-
[`Base--border-width-${borderWidth}`]: borderWidth,
|
|
168
|
-
'Base--clickable': clickable,
|
|
169
|
-
'Base--container': container,
|
|
170
|
-
[`Base--elevation-${elevation}`]: elevation,
|
|
171
|
-
[`Base--margin-${margin}`]: margin,
|
|
172
|
-
'Base--max-width': maxWidth,
|
|
173
|
-
[`Base--overflow-${overflow}`]: overflow,
|
|
174
|
-
[`Base--padding-horizontal-${paddingHorizontal}`]: paddingHorizontal,
|
|
175
|
-
[`Base--padding-vertical-${paddingVertical}`]: paddingVertical,
|
|
176
|
-
[`Base--text-color-${newToOld[textColor!]}`]: textColor,
|
|
177
|
-
},
|
|
178
|
-
className,
|
|
179
|
-
);
|
|
180
|
-
|
|
181
|
-
// Work around for findDOMNode area causing constant renders. Forwards
|
|
182
|
-
// refs for component compositions.
|
|
183
|
-
if (typeof FinalComponent === 'string') {
|
|
184
|
-
rest.ref = innerRef;
|
|
185
|
-
delete rest.innerRef;
|
|
186
|
-
}
|
|
187
|
-
|
|
188
|
-
return (
|
|
189
|
-
<FinalComponent
|
|
190
|
-
{...rest}
|
|
191
|
-
className={classes}
|
|
192
|
-
style={{ ...style, height, maxHeight, maxWidth, minHeight, minWidth, width }}
|
|
193
|
-
>
|
|
194
|
-
{children}
|
|
195
|
-
</FinalComponent>
|
|
196
|
-
);
|
|
197
|
-
};
|
|
198
|
-
|
|
199
|
-
export default Base;
|
package/src/Old/Flex/Flex.css
DELETED
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
/* stylelint-disable selector-max-universal */
|
|
2
|
-
|
|
3
|
-
.Flex { flex: 0 0 auto; }
|
|
4
|
-
|
|
5
|
-
.Flex--grow,
|
|
6
|
-
.Flex--grow-x1 {
|
|
7
|
-
flex-grow: 1;
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
.Flex--grow-x2 { flex-grow: 2; }
|
|
11
|
-
.Flex--grow-x3 { flex-grow: 3; }
|
|
12
|
-
.Flex--grow-x4 { flex-grow: 4; }
|
|
13
|
-
|
|
14
|
-
.Flex--shrink,
|
|
15
|
-
.Flex--shrink-x1,
|
|
16
|
-
.Flex--shrink-x2,
|
|
17
|
-
.Flex--shrink-x3,
|
|
18
|
-
.Flex--shrink-x4 {
|
|
19
|
-
min-width: 0;
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
.Flex--shrink,
|
|
23
|
-
.Flex--shrink-x1 {
|
|
24
|
-
flex-shrink: 1;
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.Flex--shrink-x2 { flex-shrink: 2; }
|
|
28
|
-
.Flex--shrink-x3 { flex-shrink: 3; }
|
|
29
|
-
.Flex--shrink-x4 { flex-shrink: 4; }
|
|
30
|
-
|
|
31
|
-
.Flex--initial-none { flex-basis: 0%; }
|
|
32
|
-
.Flex--initial-content { flex-basis: auto; }
|
|
33
|
-
.Flex--initial-container { flex-basis: 100%; }
|
|
34
|
-
|
|
35
|
-
.Flex--horizontal,
|
|
36
|
-
.Flex--vertical {
|
|
37
|
-
display: flex;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.Flex--wrap { flex-wrap: wrap; }
|
|
41
|
-
|
|
42
|
-
.Flex--horizontal > .Flex--initial-none { width: 0; }
|
|
43
|
-
.Flex--vertical > .Flex--initial-none { height: 0; }
|
|
44
|
-
|
|
45
|
-
.Flex--horizontal { flex-direction: row; }
|
|
46
|
-
.Flex--vertical { flex-direction: column; }
|
|
47
|
-
.Flex--horizontal.Flex--reverse { flex-direction: row-reverse; }
|
|
48
|
-
.Flex--vertical.Flex--reverse { flex-direction: column-reverse; }
|
|
49
|
-
|
|
50
|
-
.Flex--align-self-start { align-self: flex-start; }
|
|
51
|
-
.Flex--align-self-middle { align-self: center; }
|
|
52
|
-
.Flex--align-self-end { align-self: flex-end; }
|
|
53
|
-
|
|
54
|
-
.Flex--horizontal.Flex--align-horz-start { justify-content: flex-start; }
|
|
55
|
-
.Flex--horizontal.Flex--align-horz-middle { justify-content: center; }
|
|
56
|
-
.Flex--horizontal.Flex--align-horz-end { justify-content: flex-end; }
|
|
57
|
-
.Flex--horizontal.Flex--align-horz-around { justify-content: space-around; }
|
|
58
|
-
.Flex--horizontal.Flex--align-horz-between { justify-content: space-between; }
|
|
59
|
-
|
|
60
|
-
.Flex--horizontal.Flex--align-vert-start { align-items: flex-start; }
|
|
61
|
-
.Flex--horizontal.Flex--align-vert-middle { align-items: center; }
|
|
62
|
-
.Flex--horizontal.Flex--align-vert-end { align-items: flex-end; }
|
|
63
|
-
.Flex--horizontal.Flex--align-vert-baseline { align-items: baseline; }
|
|
64
|
-
|
|
65
|
-
.Flex--vertical.Flex--align-horz-start { align-items: flex-start; }
|
|
66
|
-
.Flex--vertical.Flex--align-horz-middle { align-items: center; }
|
|
67
|
-
.Flex--vertical.Flex--align-horz-end { align-items: flex-end; }
|
|
68
|
-
|
|
69
|
-
.Flex--vertical.Flex--align-vert-start { justify-content: flex-start; }
|
|
70
|
-
.Flex--vertical.Flex--align-vert-middle { justify-content: center; }
|
|
71
|
-
.Flex--vertical.Flex--align-vert-end { justify-content: flex-end; }
|
|
72
|
-
.Flex--vertical.Flex--align-vert-around { justify-content: space-around; }
|
|
73
|
-
.Flex--vertical.Flex--align-vert-between { justify-content: space-between; }
|
|
74
|
-
|
|
75
|
-
.Flex--vertical.Flex--gap-x1 > * { margin: calc(var(--size--x1) * 0.5) 0; }
|
|
76
|
-
.Flex--vertical.Flex--gap-x2 > * { margin: calc(var(--size--x2) * 0.5) 0; }
|
|
77
|
-
.Flex--vertical.Flex--gap-x3 > * { margin: calc(var(--size--x3) * 0.5) 0; }
|
|
78
|
-
.Flex--vertical.Flex--gap-x4 > * { margin: calc(var(--size--x4) * 0.5) 0; }
|
|
79
|
-
.Flex--vertical.Flex--gap-x5 > * { margin: calc(var(--size--x5) * 0.5) 0; }
|
|
80
|
-
.Flex--vertical.Flex--gap-x6 > * { margin: calc(var(--size--x6) * 0.5) 0; }
|
|
81
|
-
.Flex--vertical.Flex--gap-x8 > * { margin: calc(var(--size--x8) * 0.5) 0; }
|
|
82
|
-
.Flex--vertical.Flex--gap-x10 > * { margin: calc(var(--size--x10) * 0.5) 0; }
|
|
83
|
-
.Flex--vertical.Flex--gap-x12 > * { margin: calc(var(--size--x12) * 0.5) 0; }
|
|
84
|
-
.Flex--vertical.Flex--gap-x16 > * { margin: calc(var(--size--x16) * 0.5) 0; }
|
|
85
|
-
|
|
86
|
-
.Flex--horizontal.Flex--gap-x1 > * { margin: 0 calc(var(--size--x1) * 0.5); }
|
|
87
|
-
.Flex--horizontal.Flex--gap-x2 > * { margin: 0 calc(var(--size--x2) * 0.5); }
|
|
88
|
-
.Flex--horizontal.Flex--gap-x3 > * { margin: 0 calc(var(--size--x3) * 0.5); }
|
|
89
|
-
.Flex--horizontal.Flex--gap-x4 > * { margin: 0 calc(var(--size--x4) * 0.5); }
|
|
90
|
-
.Flex--horizontal.Flex--gap-x5 > * { margin: 0 calc(var(--size--x5) * 0.5); }
|
|
91
|
-
.Flex--horizontal.Flex--gap-x6 > * { margin: 0 calc(var(--size--x6) * 0.5); }
|
|
92
|
-
.Flex--horizontal.Flex--gap-x8 > * { margin: 0 calc(var(--size--x8) * 0.5); }
|
|
93
|
-
.Flex--horizontal.Flex--gap-x10 > * { margin: 0 calc(var(--size--x10) * 0.5); }
|
|
94
|
-
.Flex--horizontal.Flex--gap-x12 > * { margin: 0 calc(var(--size--x12) * 0.5); }
|
|
95
|
-
.Flex--horizontal.Flex--gap-x16 > * { margin: 0 calc(var(--size--x16) * 0.5); }
|
|
96
|
-
|
|
97
|
-
.Flex--gapped.Flex--vertical:not(.Flex--reverse) > *:first-child { margin-top: 0; }
|
|
98
|
-
.Flex--gapped.Flex--vertical:not(.Flex--reverse) > *:last-child { margin-bottom: 0; }
|
|
99
|
-
.Flex--gapped.Flex--vertical.Flex--reverse > *:first-child { margin-bottom: 0; }
|
|
100
|
-
.Flex--gapped.Flex--vertical.Flex--reverse > *:last-child { margin-top: 0; }
|
|
101
|
-
|
|
102
|
-
.Flex--gapped.Flex--horizontal:not(.Flex--reverse) > *:first-child { margin-left: 0; }
|
|
103
|
-
.Flex--gapped.Flex--horizontal:not(.Flex--reverse) > *:last-child { margin-right: 0; }
|
|
104
|
-
.Flex--gapped.Flex--horizontal.Flex--reverse > *:first-child { margin-right: 0; }
|
|
105
|
-
.Flex--gapped.Flex--horizontal.Flex--reverse > *:last-child { margin-left: 0; }
|