@rogieking/figui3 1.0.0 → 1.0.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/README.md +89 -0
- package/fig.css +802 -320
- package/package.json +1 -1
package/fig.css
CHANGED
|
@@ -1,9 +1,361 @@
|
|
|
1
|
+
:root {
|
|
2
|
+
--figma-color-bg: #ffffff;
|
|
3
|
+
--figma-color-bg-brand: #0d99ff;
|
|
4
|
+
--figma-color-bg-brand-hover: #007be5;
|
|
5
|
+
--figma-color-bg-brand-pressed: #007be5;
|
|
6
|
+
--figma-color-bg-brand-secondary: #0768cf;
|
|
7
|
+
--figma-color-bg-brand-tertiary: #e5f4ff;
|
|
8
|
+
--figma-color-bg-component: #9747ff;
|
|
9
|
+
--figma-color-bg-component-hover: #8638e5;
|
|
10
|
+
--figma-color-bg-component-pressed: #8638e5;
|
|
11
|
+
--figma-color-bg-component-secondary: #7c2bda;
|
|
12
|
+
--figma-color-bg-component-tertiary: #f1e5ff;
|
|
13
|
+
--figma-color-bg-danger: #f24822;
|
|
14
|
+
--figma-color-bg-danger-hover: #dc3412;
|
|
15
|
+
--figma-color-bg-danger-pressed: #dc3412;
|
|
16
|
+
--figma-color-bg-danger-secondary: #bd2915;
|
|
17
|
+
--figma-color-bg-danger-tertiary: #ffe2e0;
|
|
18
|
+
--figma-color-bg-disabled: #d9d9d9;
|
|
19
|
+
--figma-color-bg-disabled-secondary: #b3b3b3;
|
|
20
|
+
--figma-color-bg-hover: #f5f5f5;
|
|
21
|
+
--figma-color-bg-inverse: #2c2c2c;
|
|
22
|
+
--figma-color-bg-onselected: #bde3ff;
|
|
23
|
+
--figma-color-bg-onselected-hover: #bde3ff;
|
|
24
|
+
--figma-color-bg-onselected-pressed: #bde3ff;
|
|
25
|
+
--figma-color-bg-pressed: #f5f5f5;
|
|
26
|
+
--figma-color-bg-secondary: #f5f5f5;
|
|
27
|
+
--figma-color-bg-selected: #e5f4ff;
|
|
28
|
+
--figma-color-bg-selected-hover: #bde3ff;
|
|
29
|
+
--figma-color-bg-selected-pressed: #bde3ff;
|
|
30
|
+
--figma-color-bg-selected-secondary: #f2f9ff;
|
|
31
|
+
--figma-color-bg-selected-strong: #0d99ff;
|
|
32
|
+
--figma-color-bg-selected-tertiary: #f2f9ff;
|
|
33
|
+
--figma-color-bg-success: #14ae5c;
|
|
34
|
+
--figma-color-bg-success-hover: #009951;
|
|
35
|
+
--figma-color-bg-success-pressed: #009951;
|
|
36
|
+
--figma-color-bg-success-secondary: #008043;
|
|
37
|
+
--figma-color-bg-success-tertiary: #cff7d3;
|
|
38
|
+
--figma-color-bg-tertiary: #e6e6e6;
|
|
39
|
+
--figma-color-bg-warning: #ffcd29;
|
|
40
|
+
--figma-color-bg-warning-hover: #ffc21a;
|
|
41
|
+
--figma-color-bg-warning-pressed: #ffc21a;
|
|
42
|
+
--figma-color-bg-warning-secondary: #fab815;
|
|
43
|
+
--figma-color-bg-warning-tertiary: #fff1c2;
|
|
44
|
+
--figma-color-border: #e6e6e6;
|
|
45
|
+
--figma-color-border-brand: #bde3ff;
|
|
46
|
+
--figma-color-border-brand-strong: #007be5;
|
|
47
|
+
--figma-color-border-component: #e4ccff;
|
|
48
|
+
--figma-color-border-component-hover: #9747ff;
|
|
49
|
+
--figma-color-border-component-strong: #8638e5;
|
|
50
|
+
--figma-color-border-danger: #ffc7c2;
|
|
51
|
+
--figma-color-border-danger-strong: #dc3412;
|
|
52
|
+
--figma-color-border-disabled: #e6e6e6;
|
|
53
|
+
--figma-color-border-disabled-strong: #0000004d;
|
|
54
|
+
--figma-color-border-onbrand: #007be5;
|
|
55
|
+
--figma-color-border-onbrand-strong: #ffffff;
|
|
56
|
+
--figma-color-border-oncomponent: #8638e5;
|
|
57
|
+
--figma-color-border-oncomponent-strong: #ffffff;
|
|
58
|
+
--figma-color-border-ondanger: #dc3412;
|
|
59
|
+
--figma-color-border-ondanger-strong: #ffffff;
|
|
60
|
+
--figma-color-border-onselected: #bde3ff;
|
|
61
|
+
--figma-color-border-onselected-strong: #000000e5;
|
|
62
|
+
--figma-color-border-onsuccess: #009951;
|
|
63
|
+
--figma-color-border-onsuccess-strong: #ffffff;
|
|
64
|
+
--figma-color-border-onwarning: #fab815;
|
|
65
|
+
--figma-color-border-onwarning-strong: #000000e5;
|
|
66
|
+
--figma-color-border-selected: #0d99ff;
|
|
67
|
+
--figma-color-border-selected-strong: #007be5;
|
|
68
|
+
--figma-color-border-strong: #2c2c2c;
|
|
69
|
+
--figma-color-border-success: #aff4c6;
|
|
70
|
+
--figma-color-border-success-strong: #009951;
|
|
71
|
+
--figma-color-border-warning: #ffe8a3;
|
|
72
|
+
--figma-color-border-warning-strong: #b86200;
|
|
73
|
+
--figma-color-icon: #000000e5;
|
|
74
|
+
--figma-color-icon-brand: #007be5;
|
|
75
|
+
--figma-color-icon-brand-pressed: #0768cf;
|
|
76
|
+
--figma-color-icon-brand-secondary: #80caff;
|
|
77
|
+
--figma-color-icon-brand-tertiary: #bde3ff;
|
|
78
|
+
--figma-color-icon-component: #8638e5;
|
|
79
|
+
--figma-color-icon-component-pressed: #7c2bda;
|
|
80
|
+
--figma-color-icon-component-secondary: #c5b2dc;
|
|
81
|
+
--figma-color-icon-component-tertiary: #c5b2dc;
|
|
82
|
+
--figma-color-icon-danger: #f24822;
|
|
83
|
+
--figma-color-icon-danger-hover: #bd2915;
|
|
84
|
+
--figma-color-icon-danger-pressed: #bd2915;
|
|
85
|
+
--figma-color-icon-danger-secondary: #f24822;
|
|
86
|
+
--figma-color-icon-danger-secondary-hover: #f24822;
|
|
87
|
+
--figma-color-icon-danger-tertiary: #f24822;
|
|
88
|
+
--figma-color-icon-disabled: #0000004d;
|
|
89
|
+
--figma-color-icon-hover: #000000e5;
|
|
90
|
+
--figma-color-icon-onbrand: #ffffff;
|
|
91
|
+
--figma-color-icon-onbrand-secondary: #ffffffcc;
|
|
92
|
+
--figma-color-icon-onbrand-tertiary: #ffffff66;
|
|
93
|
+
--figma-color-icon-oncomponent: #ffffff;
|
|
94
|
+
--figma-color-icon-oncomponent-secondary: #ffffffcc;
|
|
95
|
+
--figma-color-icon-oncomponent-tertiary: #ffffff66;
|
|
96
|
+
--figma-color-icon-ondanger: #ffffff;
|
|
97
|
+
--figma-color-icon-ondanger-secondary: #ffffffcc;
|
|
98
|
+
--figma-color-icon-ondanger-tertiary: #ffffff66;
|
|
99
|
+
--figma-color-icon-ondisabled: #ffffff;
|
|
100
|
+
--figma-color-icon-oninverse: #ffffffe5;
|
|
101
|
+
--figma-color-icon-onselected: #000000e5;
|
|
102
|
+
--figma-color-icon-onselected-secondary: #00000080;
|
|
103
|
+
--figma-color-icon-onselected-strong: #ffffff;
|
|
104
|
+
--figma-color-icon-onselected-tertiary: #0000004d;
|
|
105
|
+
--figma-color-icon-onsuccess: #ffffff;
|
|
106
|
+
--figma-color-icon-onsuccess-secondary: #ffffffcc;
|
|
107
|
+
--figma-color-icon-onsuccess-tertiary: #ffffff66;
|
|
108
|
+
--figma-color-icon-onwarning: #000000e5;
|
|
109
|
+
--figma-color-icon-onwarning-secondary: #00000080;
|
|
110
|
+
--figma-color-icon-onwarning-tertiary: #0000004d;
|
|
111
|
+
--figma-color-icon-pressed: #007be5;
|
|
112
|
+
--figma-color-icon-secondary: #00000080;
|
|
113
|
+
--figma-color-icon-secondary-hover: #000000e5;
|
|
114
|
+
--figma-color-icon-selected: #007be5;
|
|
115
|
+
--figma-color-icon-selected-secondary: #007be5;
|
|
116
|
+
--figma-color-icon-selected-tertiary: #007be5;
|
|
117
|
+
--figma-color-icon-success: #14ae5c;
|
|
118
|
+
--figma-color-icon-success-pressed: #008043;
|
|
119
|
+
--figma-color-icon-success-secondary: #14ae5c;
|
|
120
|
+
--figma-color-icon-success-tertiary: #14ae5c;
|
|
121
|
+
--figma-color-icon-tertiary: #0000004d;
|
|
122
|
+
--figma-color-icon-tertiary-hover: #000000e5;
|
|
123
|
+
--figma-color-icon-warning: #ffcd29;
|
|
124
|
+
--figma-color-icon-warning-pressed: #b86200;
|
|
125
|
+
--figma-color-icon-warning-secondary: #ffcd29;
|
|
126
|
+
--figma-color-icon-warning-tertiary: #ffcd29;
|
|
127
|
+
--figma-color-text: #000000e5;
|
|
128
|
+
--figma-color-text-brand: #007be5;
|
|
129
|
+
--figma-color-text-brand-secondary: #007be5;
|
|
130
|
+
--figma-color-text-brand-tertiary: #007be5;
|
|
131
|
+
--figma-color-text-component: #8638e5;
|
|
132
|
+
--figma-color-text-component-pressed: #7c2bda;
|
|
133
|
+
--figma-color-text-component-secondary: #c5b2dc;
|
|
134
|
+
--figma-color-text-component-tertiary: #c5b2dc;
|
|
135
|
+
--figma-color-text-danger: #dc3412;
|
|
136
|
+
--figma-color-text-danger-secondary: #dc3412;
|
|
137
|
+
--figma-color-text-danger-tertiary: #dc3412;
|
|
138
|
+
--figma-color-text-disabled: #0000004d;
|
|
139
|
+
--figma-color-text-hover: #000000e5;
|
|
140
|
+
--figma-color-text-onbrand: #ffffff;
|
|
141
|
+
--figma-color-text-onbrand-secondary: #ffffffcc;
|
|
142
|
+
--figma-color-text-onbrand-tertiary: #ffffff66;
|
|
143
|
+
--figma-color-text-oncomponent: #ffffff;
|
|
144
|
+
--figma-color-text-oncomponent-secondary: #ffffffcc;
|
|
145
|
+
--figma-color-text-oncomponent-tertiary: #ffffff66;
|
|
146
|
+
--figma-color-text-ondanger: #ffffff;
|
|
147
|
+
--figma-color-text-ondanger-secondary: #ffffffcc;
|
|
148
|
+
--figma-color-text-ondanger-tertiary: #ffffff66;
|
|
149
|
+
--figma-color-text-ondisabled: #ffffff;
|
|
150
|
+
--figma-color-text-oninverse: #ffffffe5;
|
|
151
|
+
--figma-color-text-onselected: #000000e5;
|
|
152
|
+
--figma-color-text-onselected-secondary: #00000080;
|
|
153
|
+
--figma-color-text-onselected-strong: #ffffff;
|
|
154
|
+
--figma-color-text-onselected-tertiary: #0000004d;
|
|
155
|
+
--figma-color-text-onsuccess: #ffffff;
|
|
156
|
+
--figma-color-text-onsuccess-secondary: #ffffffcc;
|
|
157
|
+
--figma-color-text-onsuccess-tertiary: #ffffff66;
|
|
158
|
+
--figma-color-text-onwarning: #000000e5;
|
|
159
|
+
--figma-color-text-onwarning-secondary: #00000080;
|
|
160
|
+
--figma-color-text-onwarning-tertiary: #0000004d;
|
|
161
|
+
--figma-color-text-secondary: #00000080;
|
|
162
|
+
--figma-color-text-secondary-hover: #000000e5;
|
|
163
|
+
--figma-color-text-selected: #007be5;
|
|
164
|
+
--figma-color-text-selected-secondary: #007be5;
|
|
165
|
+
--figma-color-text-selected-tertiary: #007be5;
|
|
166
|
+
--figma-color-text-success: #009951;
|
|
167
|
+
--figma-color-text-success-secondary: #009951;
|
|
168
|
+
--figma-color-text-success-tertiary: #009951;
|
|
169
|
+
--figma-color-text-tertiary: #0000004d;
|
|
170
|
+
--figma-color-text-tertiary-hover: #000000e5;
|
|
171
|
+
--figma-color-text-warning: #b86200;
|
|
172
|
+
--figma-color-text-warning-secondary: #b86200;
|
|
173
|
+
--figma-color-text-warning-tertiary: #b86200;
|
|
174
|
+
}
|
|
1
175
|
|
|
2
|
-
:
|
|
176
|
+
@media (prefers-color-scheme: dark) {
|
|
177
|
+
:root {
|
|
178
|
+
--figma-color-bg: #2c2c2c;
|
|
179
|
+
--figma-color-bg-brand: #0c8ce9;
|
|
180
|
+
--figma-color-bg-brand-hover: #0a6dc2;
|
|
181
|
+
--figma-color-bg-brand-pressed: #0a6dc2;
|
|
182
|
+
--figma-color-bg-brand-secondary: #105cad;
|
|
183
|
+
--figma-color-bg-brand-tertiary: #394360;
|
|
184
|
+
--figma-color-bg-component: #8a38f5;
|
|
185
|
+
--figma-color-bg-component-hover: #7a2ed6;
|
|
186
|
+
--figma-color-bg-component-pressed: #7a2ed6;
|
|
187
|
+
--figma-color-bg-component-secondary: #652ca8;
|
|
188
|
+
--figma-color-bg-component-tertiary: #473956;
|
|
189
|
+
--figma-color-bg-danger: #e03e1a;
|
|
190
|
+
--figma-color-bg-danger-hover: #c4381c;
|
|
191
|
+
--figma-color-bg-danger-pressed: #c4381c;
|
|
192
|
+
--figma-color-bg-danger-secondary: #963323;
|
|
193
|
+
--figma-color-bg-danger-tertiary: #60332a;
|
|
194
|
+
--figma-color-bg-disabled: #757575;
|
|
195
|
+
--figma-color-bg-disabled-secondary: #b3b3b3;
|
|
196
|
+
--figma-color-bg-hover: #383838;
|
|
197
|
+
--figma-color-bg-inverse: #ffffff;
|
|
198
|
+
--figma-color-bg-onselected: #667799;
|
|
199
|
+
--figma-color-bg-onselected-hover: #667799;
|
|
200
|
+
--figma-color-bg-onselected-pressed: #667799;
|
|
201
|
+
--figma-color-bg-pressed: #383838;
|
|
202
|
+
--figma-color-bg-secondary: #383838;
|
|
203
|
+
--figma-color-bg-selected: #4a5878;
|
|
204
|
+
--figma-color-bg-selected-hover: #536383;
|
|
205
|
+
--figma-color-bg-selected-pressed: #536383;
|
|
206
|
+
--figma-color-bg-selected-secondary: #394360;
|
|
207
|
+
--figma-color-bg-selected-strong: #0c8ce9;
|
|
208
|
+
--figma-color-bg-selected-tertiary: #394360;
|
|
209
|
+
--figma-color-bg-success: #198f51;
|
|
210
|
+
--figma-color-bg-success-hover: #078348;
|
|
211
|
+
--figma-color-bg-success-pressed: #078348;
|
|
212
|
+
--figma-color-bg-success-secondary: #0a5c35;
|
|
213
|
+
--figma-color-bg-success-tertiary: #476656;
|
|
214
|
+
--figma-color-bg-tertiary: #444444;
|
|
215
|
+
--figma-color-bg-warning: #f3c11b;
|
|
216
|
+
--figma-color-bg-warning-hover: #f2b50d;
|
|
217
|
+
--figma-color-bg-warning-pressed: #f2b50d;
|
|
218
|
+
--figma-color-bg-warning-secondary: #e4a711;
|
|
219
|
+
--figma-color-bg-warning-tertiary: #5c4100;
|
|
220
|
+
--figma-color-border: #444444;
|
|
221
|
+
--figma-color-border-brand: #105cad;
|
|
222
|
+
--figma-color-border-brand-strong: #7cc4f8;
|
|
223
|
+
--figma-color-border-component: #652ca8;
|
|
224
|
+
--figma-color-border-component-hover: #8a38f5;
|
|
225
|
+
--figma-color-border-component-strong: #d6b6fb;
|
|
226
|
+
--figma-color-border-danger: #963323;
|
|
227
|
+
--figma-color-border-danger-strong: #fca397;
|
|
228
|
+
--figma-color-border-disabled: #444444;
|
|
229
|
+
--figma-color-border-disabled-strong: #ffffff66;
|
|
230
|
+
--figma-color-border-onbrand: #0a6dc2;
|
|
231
|
+
--figma-color-border-onbrand-strong: #ffffff;
|
|
232
|
+
--figma-color-border-oncomponent: #7a2ed6;
|
|
233
|
+
--figma-color-border-oncomponent-strong: #ffffff;
|
|
234
|
+
--figma-color-border-ondanger: #c4381c;
|
|
235
|
+
--figma-color-border-ondanger-strong: #ffffff;
|
|
236
|
+
--figma-color-border-onselected: #667799;
|
|
237
|
+
--figma-color-border-onselected-strong: #ffffffe5;
|
|
238
|
+
--figma-color-border-onsuccess: #078348;
|
|
239
|
+
--figma-color-border-onsuccess-strong: #ffffff;
|
|
240
|
+
--figma-color-border-onwarning: #e4a711;
|
|
241
|
+
--figma-color-border-onwarning-strong: #000000e5;
|
|
242
|
+
--figma-color-border-selected: #0c8ce9;
|
|
243
|
+
--figma-color-border-selected-strong: #7cc4f8;
|
|
244
|
+
--figma-color-border-strong: #ffffffe5;
|
|
245
|
+
--figma-color-border-success: #0a5c35;
|
|
246
|
+
--figma-color-border-success-strong: #79d297;
|
|
247
|
+
--figma-color-border-warning: #925711;
|
|
248
|
+
--figma-color-border-warning-strong: #f7d15f;
|
|
249
|
+
--figma-color-icon: #ffffff;
|
|
250
|
+
--figma-color-icon-brand: #7cc4f8;
|
|
251
|
+
--figma-color-icon-brand-pressed: #0c8ce9;
|
|
252
|
+
--figma-color-icon-brand-secondary: #0a6dc2;
|
|
253
|
+
--figma-color-icon-brand-tertiary: #394360;
|
|
254
|
+
--figma-color-icon-component: #d1a8ff;
|
|
255
|
+
--figma-color-icon-component-pressed: #d6b6fb;
|
|
256
|
+
--figma-color-icon-component-secondary: #7f699b;
|
|
257
|
+
--figma-color-icon-component-tertiary: #7f699b;
|
|
258
|
+
--figma-color-icon-danger: #e03e1a;
|
|
259
|
+
--figma-color-icon-danger-hover: #fbbcb6;
|
|
260
|
+
--figma-color-icon-danger-pressed: #fbbcb6;
|
|
261
|
+
--figma-color-icon-danger-secondary: #e03e1a;
|
|
262
|
+
--figma-color-icon-danger-secondary-hover: #e03e1a;
|
|
263
|
+
--figma-color-icon-danger-tertiary: #e03e1a;
|
|
264
|
+
--figma-color-icon-disabled: #ffffff66;
|
|
265
|
+
--figma-color-icon-hover: #ffffff;
|
|
266
|
+
--figma-color-icon-onbrand: #ffffff;
|
|
267
|
+
--figma-color-icon-onbrand-secondary: #ffffffcc;
|
|
268
|
+
--figma-color-icon-onbrand-tertiary: #ffffff66;
|
|
269
|
+
--figma-color-icon-oncomponent: #ffffff;
|
|
270
|
+
--figma-color-icon-oncomponent-secondary: #ffffffcc;
|
|
271
|
+
--figma-color-icon-oncomponent-tertiary: #ffffff66;
|
|
272
|
+
--figma-color-icon-ondanger: #ffffff;
|
|
273
|
+
--figma-color-icon-ondanger-secondary: #ffffffcc;
|
|
274
|
+
--figma-color-icon-ondanger-tertiary: #ffffff66;
|
|
275
|
+
--figma-color-icon-ondisabled: #2c2c2c;
|
|
276
|
+
--figma-color-icon-oninverse: #000000e5;
|
|
277
|
+
--figma-color-icon-onselected: #ffffff;
|
|
278
|
+
--figma-color-icon-onselected-secondary: #ffffffb2;
|
|
279
|
+
--figma-color-icon-onselected-strong: #ffffff;
|
|
280
|
+
--figma-color-icon-onselected-tertiary: #ffffff66;
|
|
281
|
+
--figma-color-icon-onsuccess: #ffffff;
|
|
282
|
+
--figma-color-icon-onsuccess-secondary: #ffffffcc;
|
|
283
|
+
--figma-color-icon-onsuccess-tertiary: #ffffff66;
|
|
284
|
+
--figma-color-icon-onwarning: #000000e5;
|
|
285
|
+
--figma-color-icon-onwarning-secondary: #00000080;
|
|
286
|
+
--figma-color-icon-onwarning-tertiary: #0000004d;
|
|
287
|
+
--figma-color-icon-pressed: #0a6dc2;
|
|
288
|
+
--figma-color-icon-secondary: #ffffffb2;
|
|
289
|
+
--figma-color-icon-secondary-hover: #ffffff;
|
|
290
|
+
--figma-color-icon-selected: #7cc4f8;
|
|
291
|
+
--figma-color-icon-selected-secondary: #7cc4f8;
|
|
292
|
+
--figma-color-icon-selected-tertiary: #7cc4f8;
|
|
293
|
+
--figma-color-icon-success: #198f51;
|
|
294
|
+
--figma-color-icon-success-pressed: #a1e8b9;
|
|
295
|
+
--figma-color-icon-success-secondary: #198f51;
|
|
296
|
+
--figma-color-icon-success-tertiary: #198f51;
|
|
297
|
+
--figma-color-icon-tertiary: #ffffff66;
|
|
298
|
+
--figma-color-icon-tertiary-hover: #ffffff;
|
|
299
|
+
--figma-color-icon-warning: #f3c11b;
|
|
300
|
+
--figma-color-icon-warning-pressed: #f7d15f;
|
|
301
|
+
--figma-color-icon-warning-secondary: #f3c11b;
|
|
302
|
+
--figma-color-icon-warning-tertiary: #f3c11b;
|
|
303
|
+
--figma-color-text: #ffffff;
|
|
304
|
+
--figma-color-text-brand: #7cc4f8;
|
|
305
|
+
--figma-color-text-brand-secondary: #7cc4f8;
|
|
306
|
+
--figma-color-text-brand-tertiary: #7cc4f8;
|
|
307
|
+
--figma-color-text-component: #d1a8ff;
|
|
308
|
+
--figma-color-text-component-pressed: #d6b6fb;
|
|
309
|
+
--figma-color-text-component-secondary: #7f699b;
|
|
310
|
+
--figma-color-text-component-tertiary: #7f699b;
|
|
311
|
+
--figma-color-text-danger: #fca397;
|
|
312
|
+
--figma-color-text-danger-secondary: #fca397;
|
|
313
|
+
--figma-color-text-danger-tertiary: #fca397;
|
|
314
|
+
--figma-color-text-disabled: #ffffff66;
|
|
315
|
+
--figma-color-text-hover: #ffffff;
|
|
316
|
+
--figma-color-text-onbrand: #ffffff;
|
|
317
|
+
--figma-color-text-onbrand-secondary: #ffffffcc;
|
|
318
|
+
--figma-color-text-onbrand-tertiary: #ffffff66;
|
|
319
|
+
--figma-color-text-oncomponent: #ffffff;
|
|
320
|
+
--figma-color-text-oncomponent-secondary: #ffffffcc;
|
|
321
|
+
--figma-color-text-oncomponent-tertiary: #ffffff66;
|
|
322
|
+
--figma-color-text-ondanger: #ffffff;
|
|
323
|
+
--figma-color-text-ondanger-secondary: #ffffffcc;
|
|
324
|
+
--figma-color-text-ondanger-tertiary: #ffffff66;
|
|
325
|
+
--figma-color-text-ondisabled: #2c2c2c;
|
|
326
|
+
--figma-color-text-oninverse: #000000e5;
|
|
327
|
+
--figma-color-text-onselected: #ffffffe5;
|
|
328
|
+
--figma-color-text-onselected-secondary: #ffffffb2;
|
|
329
|
+
--figma-color-text-onselected-strong: #ffffff;
|
|
330
|
+
--figma-color-text-onselected-tertiary: #ffffff66;
|
|
331
|
+
--figma-color-text-onsuccess: #ffffff;
|
|
332
|
+
--figma-color-text-onsuccess-secondary: #ffffffcc;
|
|
333
|
+
--figma-color-text-onsuccess-tertiary: #ffffff66;
|
|
334
|
+
--figma-color-text-onwarning: #000000e5;
|
|
335
|
+
--figma-color-text-onwarning-secondary: #00000080;
|
|
336
|
+
--figma-color-text-onwarning-tertiary: #0000004d;
|
|
337
|
+
--figma-color-text-secondary: #ffffffb2;
|
|
338
|
+
--figma-color-text-secondary-hover: #ffffff;
|
|
339
|
+
--figma-color-text-selected: #7cc4f8;
|
|
340
|
+
--figma-color-text-selected-secondary: #7cc4f8;
|
|
341
|
+
--figma-color-text-selected-tertiary: #7cc4f8;
|
|
342
|
+
--figma-color-text-success: #79d297;
|
|
343
|
+
--figma-color-text-success-secondary: #79d297;
|
|
344
|
+
--figma-color-text-success-tertiary: #79d297;
|
|
345
|
+
--figma-color-text-tertiary: #ffffff66;
|
|
346
|
+
--figma-color-text-tertiary-hover: #ffffff;
|
|
347
|
+
--figma-color-text-warning: #f7d15f;
|
|
348
|
+
--figma-color-text-warning-secondary: #f7d15f;
|
|
349
|
+
--figma-color-text-warning-tertiary: #f7d15f;
|
|
350
|
+
}
|
|
351
|
+
}
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
:root {
|
|
3
355
|
--font-size: 16px;
|
|
4
|
-
--figma-color-bordertranslucent: rgba(0,0,0,0.1);
|
|
356
|
+
--figma-color-bordertranslucent: rgba(0, 0, 0, 0.1);
|
|
5
357
|
--figma-color-bg-brand: rgba(13, 153, 255, 1);
|
|
6
|
-
--checkerboard: repeating-conic-gradient(rgba(0,0,0,0.1) 0% 25%, rgba(255,255,255,0.1) 0% 50%) 0 0 / .66666rem .66666rem;
|
|
358
|
+
--checkerboard: repeating-conic-gradient(rgba(0, 0, 0, 0.1) 0% 25%, rgba(255, 255, 255, 0.1) 0% 50%) 0 0 / .66666rem .66666rem;
|
|
7
359
|
--bg-hue: linear-gradient(90deg, rgba(255, 0, 0, 1), rgba(255, 48, 0, 1), rgba(255, 96, 0, 1), rgba(255, 143, 0, 1), rgba(255, 191, 0, 1), rgba(255, 239, 0, 1), rgba(223, 255, 0, 1), rgba(175, 255, 0, 1), rgba(128, 255, 0, 1), rgba(80, 255, 0, 1), rgba(32, 255, 0, 1), rgba(0, 255, 16, 1), rgba(0, 255, 64, 1), rgba(0, 255, 112, 1), rgba(0, 255, 159, 1), rgba(0, 255, 207, 1), rgba(0, 255, 255, 1), rgba(0, 207, 255, 1), rgba(0, 159, 255, 1), rgba(0, 112, 255, 1), rgba(0, 64, 255, 1), rgba(0, 16, 255, 1), rgba(32, 0, 255, 1), rgba(80, 0, 255, 1), rgba(127, 0, 255, 1), rgba(175, 0, 255, 1), rgba(223, 0, 255, 1), rgba(255, 0, 239, 1), rgba(255, 0, 191, 1), rgba(255, 0, 143, 1), rgba(255, 0, 96, 1), rgba(255, 0, 48, 1));
|
|
8
360
|
--input-transition: all 0.08s ease-out;
|
|
9
361
|
--figma-color-text-disabled: rgba(0, 0, 0, 0.3);
|
|
@@ -28,13 +380,13 @@
|
|
|
28
380
|
--radius-large: 0.8125rem;
|
|
29
381
|
--body-medium-strong-fontWeight: 550;
|
|
30
382
|
--handle-shadow: 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
383
|
+
0px 1px 3px 0px rgba(0, 0, 0, 0.05),
|
|
384
|
+
0px 3px 8px 0px rgba(0, 0, 0, 0.05),
|
|
385
|
+
0px 0px 0.5px 0px rgba(0, 0, 0, 0.1);
|
|
386
|
+
|
|
35
387
|
--popover-min-width: 15rem;
|
|
36
388
|
--figma-color-bg-selected: #e5f4ff;
|
|
37
|
-
--figma-color-bg-ghost-hover: rgba(0,0,0,0.05);
|
|
389
|
+
--figma-color-bg-ghost-hover: rgba(0, 0, 0, 0.05);
|
|
38
390
|
--elevation-500-modal-window: 0px 0px .5px rgba(0, 0, 0, .08), 0px 10px 24px rgba(0, 0, 0, .18), 0px 2px 5px rgba(0, 0, 0, .15);
|
|
39
391
|
|
|
40
392
|
color-scheme: light dark;
|
|
@@ -46,20 +398,21 @@
|
|
|
46
398
|
}
|
|
47
399
|
|
|
48
400
|
@media (prefers-color-scheme: dark) {
|
|
49
|
-
:root{
|
|
401
|
+
:root {
|
|
50
402
|
--icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(255 255 255 / 50%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
|
|
51
|
-
--handle-shadow: 0px 0 0 0.75px rgba(255,255,255, 0.1),
|
|
52
|
-
|
|
403
|
+
--handle-shadow: 0px 0 0 0.75px rgba(255, 255, 255, 0.1),
|
|
404
|
+
0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
|
|
53
405
|
--figma-color-bg-selected: #3B435E;
|
|
54
|
-
--figma-color-bg-ghost-hover: rgba(255,255,255,0.05);
|
|
55
|
-
--figma-color-bordertranslucent: rgba(255,255,255,0.1);
|
|
406
|
+
--figma-color-bg-ghost-hover: rgba(255, 255, 255, 0.05);
|
|
407
|
+
--figma-color-bordertranslucent: rgba(255, 255, 255, 0.1);
|
|
56
408
|
--figma-color-border-selected: #0C8CE9;
|
|
57
409
|
--figma-color-icon-brand: #7CC4F8;
|
|
58
410
|
--elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, .45), 0px 3px 5px rgba(0, 0, 0, .35), inset 0px .75px 0px rgba(255, 255, 255, .1);
|
|
59
411
|
--figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.50), 0px 0.75px 0px 0px rgba(255, 255, 255, 0.10) inset, 0px 1px 3px 0px rgba(0, 0, 0, 0.40);
|
|
60
412
|
}
|
|
61
413
|
}
|
|
62
|
-
|
|
414
|
+
|
|
415
|
+
html {
|
|
63
416
|
width: 100%;
|
|
64
417
|
height: 100%;
|
|
65
418
|
margin: 0;
|
|
@@ -67,24 +420,30 @@ html{
|
|
|
67
420
|
color: var(--figma-color-text);
|
|
68
421
|
-webkit-font-smoothing: antialiased;
|
|
69
422
|
-moz-osx-font-smoothing: grayscale;
|
|
70
|
-
font-family: "Inter"
|
|
423
|
+
font-family: "Inter", -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
|
|
71
424
|
font-size: 16px;
|
|
72
|
-
font-weight: 500;
|
|
425
|
+
font-weight: 500;
|
|
73
426
|
background-color: var(--figma-color-bg);
|
|
74
427
|
}
|
|
75
|
-
|
|
428
|
+
|
|
429
|
+
*,
|
|
430
|
+
*:before,
|
|
431
|
+
*:after {
|
|
76
432
|
box-sizing: border-box;
|
|
77
433
|
}
|
|
78
434
|
|
|
79
|
-
body{
|
|
435
|
+
body {
|
|
80
436
|
font-size: var(--body-medium-fontSize);
|
|
81
437
|
}
|
|
82
438
|
|
|
83
439
|
/* helper classes/defaults */
|
|
84
440
|
::-webkit-scrollbar {
|
|
85
|
-
width: var(--spacer-1);
|
|
86
|
-
|
|
441
|
+
width: var(--spacer-1);
|
|
442
|
+
/* Width of the vertical scrollbar */
|
|
443
|
+
height: var(--spacer-1);
|
|
444
|
+
/* Height of the horizontal scrollbar */
|
|
87
445
|
}
|
|
446
|
+
|
|
88
447
|
::-webkit-scrollbar-thumb {
|
|
89
448
|
background-color: var(--figma-color-bg-tertiary);
|
|
90
449
|
border-radius: calc(var(--spacer-1)/2);
|
|
@@ -93,26 +452,29 @@ body{
|
|
|
93
452
|
::-webkit-scrollbar-thumb:hover {
|
|
94
453
|
background-color: var(--figma-color-bg-secondary);
|
|
95
454
|
}
|
|
455
|
+
|
|
96
456
|
/* For Firefox */
|
|
97
457
|
* {
|
|
98
458
|
scrollbar-width: thin;
|
|
99
459
|
scrollbar-color: var(--figma-color-bg-tertiary) var(--figma-color-bg-secondary);
|
|
100
460
|
}
|
|
101
461
|
|
|
102
|
-
.subtle{
|
|
462
|
+
.subtle {
|
|
103
463
|
color: var(--figma-color-text-tertiary);
|
|
104
464
|
}
|
|
105
465
|
|
|
106
466
|
/* Defaults */
|
|
107
|
-
p{
|
|
467
|
+
p {
|
|
108
468
|
margin: var(--spacer-2) 0;
|
|
109
469
|
line-height: 1rem;
|
|
110
470
|
color: var(--figma-color-text-secondary);
|
|
111
471
|
}
|
|
112
|
-
|
|
472
|
+
|
|
473
|
+
label {
|
|
113
474
|
color: var(--figma-color-text-secondary);
|
|
114
475
|
}
|
|
115
|
-
|
|
476
|
+
|
|
477
|
+
h2 {
|
|
116
478
|
font-weight: var(--body-medium-strong-fontWeight);
|
|
117
479
|
margin: var(--spacer-2) 0;
|
|
118
480
|
}
|
|
@@ -121,7 +483,7 @@ h2{
|
|
|
121
483
|
button,
|
|
122
484
|
select,
|
|
123
485
|
input,
|
|
124
|
-
fieldset{
|
|
486
|
+
fieldset {
|
|
125
487
|
display: inline-flex;
|
|
126
488
|
align-items: center;
|
|
127
489
|
margin: 0;
|
|
@@ -129,10 +491,11 @@ fieldset{
|
|
|
129
491
|
font: inherit;
|
|
130
492
|
line-height: 1rem;
|
|
131
493
|
}
|
|
132
|
-
|
|
494
|
+
|
|
495
|
+
textarea,
|
|
133
496
|
input[type=text],
|
|
134
497
|
input[type=number],
|
|
135
|
-
.input{
|
|
498
|
+
.input {
|
|
136
499
|
background-color: var(--figma-color-bg-secondary);
|
|
137
500
|
border: 0;
|
|
138
501
|
border-radius: var(--radius-medium);
|
|
@@ -145,18 +508,19 @@ input[type=number],
|
|
|
145
508
|
display: flex;
|
|
146
509
|
color: inherit;
|
|
147
510
|
|
|
148
|
-
&:focus{
|
|
511
|
+
&:focus {
|
|
149
512
|
box-shadow: inset 0 0 0 1px var(--border-selected);
|
|
150
513
|
outline: 0;
|
|
151
514
|
}
|
|
152
|
-
|
|
515
|
+
|
|
516
|
+
&::-webkit-inner-spin-button {
|
|
153
517
|
display: none;
|
|
154
518
|
}
|
|
155
519
|
}
|
|
156
520
|
|
|
157
521
|
/* Segmented control */
|
|
158
522
|
.segmented-control,
|
|
159
|
-
fig-segmented-control{
|
|
523
|
+
fig-segmented-control {
|
|
160
524
|
background-color: var(--figma-color-bg-secondary);
|
|
161
525
|
border: 0;
|
|
162
526
|
border-radius: var(--radius-medium);
|
|
@@ -165,28 +529,28 @@ fig-segmented-control{
|
|
|
165
529
|
padding: 1px;
|
|
166
530
|
display: inline-flex;
|
|
167
531
|
align-items: stretch;
|
|
168
|
-
|
|
532
|
+
|
|
169
533
|
&>fig-segment,
|
|
170
|
-
&>label{
|
|
534
|
+
&>label {
|
|
171
535
|
flex: 1;
|
|
172
536
|
display: flex;
|
|
173
537
|
align-items: center;
|
|
174
538
|
justify-content: center;
|
|
175
|
-
position: relative;
|
|
539
|
+
position: relative;
|
|
176
540
|
appearance: none;
|
|
177
541
|
padding: 0 var(--spacer-2);
|
|
178
|
-
|
|
179
|
-
& [type=radio]{
|
|
180
|
-
position: absolute;
|
|
542
|
+
|
|
543
|
+
& [type=radio] {
|
|
544
|
+
position: absolute;
|
|
181
545
|
inset: 0;
|
|
182
546
|
border-radius: 0;
|
|
183
547
|
opacity: 0;
|
|
184
|
-
z-index:1;
|
|
548
|
+
z-index: 1;
|
|
185
549
|
width: 100%;
|
|
186
550
|
height: 100%;
|
|
187
551
|
}
|
|
188
|
-
|
|
189
|
-
&:has(:checked){
|
|
552
|
+
|
|
553
|
+
&:has(:checked) {
|
|
190
554
|
background-color: var(--figma-color-bg);
|
|
191
555
|
border-radius: calc(var(--radius-medium) - 1px);
|
|
192
556
|
box-shadow: var(--handle-shadow);
|
|
@@ -195,7 +559,7 @@ fig-segmented-control{
|
|
|
195
559
|
}
|
|
196
560
|
|
|
197
561
|
/* Textarea */
|
|
198
|
-
textarea{
|
|
562
|
+
textarea {
|
|
199
563
|
min-height: 2rem;
|
|
200
564
|
display: block;
|
|
201
565
|
width: 100%;
|
|
@@ -204,7 +568,7 @@ textarea{
|
|
|
204
568
|
|
|
205
569
|
/* Dropdown */
|
|
206
570
|
select,
|
|
207
|
-
input[list]{
|
|
571
|
+
input[list] {
|
|
208
572
|
height: var(--spacer-4);
|
|
209
573
|
padding: 0 var(--spacer-2);
|
|
210
574
|
appearance: none;
|
|
@@ -217,35 +581,41 @@ input[list]{
|
|
|
217
581
|
background-color: var(--figma-color-bg);
|
|
218
582
|
box-shadow: inset 0 0 0 1px var(--figma-color-border);
|
|
219
583
|
accent-color: var(--figma-color-bg-brand);
|
|
220
|
-
|
|
584
|
+
|
|
585
|
+
&:focus {
|
|
221
586
|
box-shadow: inset 0 0 0 1px var(--border-selected);
|
|
222
587
|
outline: 0;
|
|
223
588
|
}
|
|
224
|
-
|
|
589
|
+
|
|
590
|
+
&::-webkit-calendar-picker-indicator {
|
|
225
591
|
opacity: 0;
|
|
226
592
|
}
|
|
227
593
|
}
|
|
594
|
+
|
|
228
595
|
input[list]:hover,
|
|
229
596
|
input[list]:active,
|
|
230
597
|
input[list]:focus,
|
|
231
|
-
select{
|
|
598
|
+
select {
|
|
232
599
|
background-image: var(--icon-chevron);
|
|
233
600
|
background-position: calc(100% - 0.25rem) center;
|
|
234
601
|
background-repeat: no-repeat;
|
|
235
602
|
}
|
|
603
|
+
|
|
236
604
|
input[list],
|
|
237
|
-
select{
|
|
605
|
+
select {
|
|
238
606
|
padding-right: 1.5rem;
|
|
239
607
|
}
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
608
|
+
|
|
609
|
+
fig-dropdown:has([trigger]) {
|
|
610
|
+
& select {
|
|
611
|
+
opacity: 0;
|
|
612
|
+
position: absolute;
|
|
613
|
+
inset: 0;
|
|
614
|
+
}
|
|
246
615
|
}
|
|
616
|
+
|
|
247
617
|
fig-dialog>*:not(dialog),
|
|
248
|
-
fig-dropdown>option{
|
|
618
|
+
fig-dropdown>option {
|
|
249
619
|
display: none !important;
|
|
250
620
|
}
|
|
251
621
|
|
|
@@ -254,7 +624,7 @@ button,
|
|
|
254
624
|
.button,
|
|
255
625
|
fig-button,
|
|
256
626
|
input[type=submit],
|
|
257
|
-
input[type=button]{
|
|
627
|
+
input[type=button] {
|
|
258
628
|
display: flex;
|
|
259
629
|
align-items: center;
|
|
260
630
|
justify-content: center;
|
|
@@ -266,104 +636,112 @@ input[type=button]{
|
|
|
266
636
|
color: var(--figma-color-text-onbrand);
|
|
267
637
|
border-radius: var(--radius-medium);
|
|
268
638
|
font-weight: 500;
|
|
269
|
-
|
|
639
|
+
|
|
640
|
+
&:active {
|
|
270
641
|
background-color: var(--figma-color-bg-brand-pressed);
|
|
271
642
|
}
|
|
272
643
|
|
|
273
|
-
/* Variant: Ghost */
|
|
644
|
+
/* Variant: Ghost */
|
|
274
645
|
&[variant="ghost"],
|
|
275
|
-
&[variant="ghost"]>button{
|
|
646
|
+
&[variant="ghost"]>button {
|
|
276
647
|
box-shadow: none;
|
|
277
648
|
background: none;
|
|
278
649
|
color: var(--figma-color-text);
|
|
279
650
|
|
|
280
|
-
&:hover:not(:active){
|
|
651
|
+
&:hover:not(:active) {
|
|
281
652
|
background-color: var(--figma-color-bg-ghost-hover);
|
|
282
653
|
}
|
|
283
|
-
|
|
654
|
+
|
|
655
|
+
&:active {
|
|
284
656
|
outline: 0;
|
|
285
657
|
background-color: var(--figma-color-bg-selected);
|
|
286
658
|
}
|
|
287
|
-
|
|
659
|
+
|
|
660
|
+
&[selected=true] {
|
|
288
661
|
background-color: var(--figma-color-bg-selected);
|
|
289
662
|
}
|
|
290
|
-
|
|
663
|
+
|
|
664
|
+
&:focus {
|
|
291
665
|
outline: 0;
|
|
292
666
|
background-color: transparent;
|
|
293
667
|
box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
|
|
294
668
|
}
|
|
295
669
|
}
|
|
670
|
+
|
|
296
671
|
&[variant="ghost"][icon][selected=true],
|
|
297
|
-
&[variant="ghost"][icon][selected=true]>button{
|
|
672
|
+
&[variant="ghost"][icon][selected=true]>button {
|
|
298
673
|
color: var(--figma-color-icon-brand);
|
|
299
674
|
}
|
|
675
|
+
|
|
300
676
|
&[variant="ghost"][disabled=true],
|
|
301
|
-
&[variant="ghost"][disabled=true]>button{
|
|
677
|
+
&[variant="ghost"][disabled=true]>button {
|
|
302
678
|
background-color: transparent;
|
|
303
679
|
}
|
|
304
680
|
|
|
305
681
|
|
|
306
682
|
/* Variant: Secondary */
|
|
307
683
|
&[variant="secondary"],
|
|
308
|
-
&[variant="secondary"]>button{
|
|
684
|
+
&[variant="secondary"]>button {
|
|
309
685
|
box-shadow: inset 0 0 0 1px var(--figma-color-border);
|
|
310
686
|
background: none;
|
|
311
687
|
color: var(--figma-color-text);
|
|
312
688
|
|
|
313
|
-
&:active{
|
|
689
|
+
&:active {
|
|
314
690
|
background-color: var(--figma-color-bg-secondary);
|
|
315
691
|
}
|
|
316
692
|
}
|
|
317
693
|
|
|
318
694
|
/* Icon only */
|
|
319
695
|
&[icon],
|
|
320
|
-
&[icon]>button{
|
|
696
|
+
&[icon]>button {
|
|
321
697
|
width: var(--spacer-4);
|
|
322
698
|
padding: 0;
|
|
323
699
|
|
|
324
|
-
&:hover{
|
|
700
|
+
&:hover {
|
|
325
701
|
background-color: var(--figma-color-bg-ghost-hover);
|
|
326
702
|
}
|
|
327
703
|
}
|
|
328
704
|
|
|
329
705
|
/* Upload */
|
|
330
706
|
&[upload],
|
|
331
|
-
&[upload]>button{
|
|
707
|
+
&[upload]>button {
|
|
332
708
|
position: relative;
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
709
|
+
|
|
710
|
+
& input[type=file] {
|
|
711
|
+
opacity: 0;
|
|
712
|
+
position: absolute;
|
|
713
|
+
inset: 0;
|
|
714
|
+
appearance: none;
|
|
715
|
+
}
|
|
339
716
|
}
|
|
340
717
|
|
|
341
718
|
/* Disabled */
|
|
342
719
|
&[disabled=true],
|
|
343
|
-
&[disabled=true]>button{
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
720
|
+
&[disabled=true]>button {
|
|
721
|
+
background-color: var(--figma-color-bg-disabled);
|
|
722
|
+
color: var(--figma-color-text-disabled);
|
|
723
|
+
pointer-events: none;
|
|
347
724
|
}
|
|
348
|
-
|
|
725
|
+
|
|
349
726
|
/* Size */
|
|
350
727
|
&[size="large"],
|
|
351
|
-
&[size="large"]>button{
|
|
728
|
+
&[size="large"]>button {
|
|
352
729
|
height: var(--spacer-5);
|
|
353
730
|
}
|
|
731
|
+
|
|
354
732
|
&[size="large"][icon],
|
|
355
|
-
&[size="large"][icon]>button{
|
|
733
|
+
&[size="large"][icon]>button {
|
|
356
734
|
width: var(--spacer-5);
|
|
357
735
|
}
|
|
358
736
|
|
|
359
737
|
/* Full width */
|
|
360
|
-
&[full]{
|
|
738
|
+
&[full] {
|
|
361
739
|
width: 100%;
|
|
362
740
|
}
|
|
363
741
|
|
|
364
742
|
/* Block button */
|
|
365
743
|
&[inline=false],
|
|
366
|
-
&[inline=false]>button{
|
|
744
|
+
&[inline=false]>button {
|
|
367
745
|
display: flex;
|
|
368
746
|
width: 100%;
|
|
369
747
|
justify-content: left;
|
|
@@ -372,19 +750,21 @@ input[type=button]{
|
|
|
372
750
|
align-items: center;
|
|
373
751
|
padding: var(--spacer-1) var(--spacer-2);
|
|
374
752
|
}
|
|
375
|
-
|
|
753
|
+
|
|
754
|
+
&[inline=false] {
|
|
376
755
|
padding: 0;
|
|
377
756
|
}
|
|
378
757
|
}
|
|
379
|
-
|
|
380
|
-
|
|
758
|
+
|
|
759
|
+
fig-button>button {
|
|
760
|
+
width: 100%;
|
|
381
761
|
}
|
|
382
762
|
|
|
383
763
|
|
|
384
764
|
|
|
385
765
|
/* Tabs */
|
|
386
766
|
fig-tab,
|
|
387
|
-
.tab{
|
|
767
|
+
.tab {
|
|
388
768
|
display: inline-flex;
|
|
389
769
|
flex-direction: column;
|
|
390
770
|
align-items: center;
|
|
@@ -399,9 +779,9 @@ fig-tab,
|
|
|
399
779
|
border-radius: var(--radius-medium);
|
|
400
780
|
color: var(--figma-color-text-secondary);
|
|
401
781
|
position: relative;
|
|
402
|
-
|
|
403
|
-
&[label]{
|
|
404
|
-
&::after{
|
|
782
|
+
|
|
783
|
+
&[label] {
|
|
784
|
+
&::after {
|
|
405
785
|
content: attr(label);
|
|
406
786
|
color: var(--figma-color-text-secondary);
|
|
407
787
|
content: attr(label);
|
|
@@ -414,37 +794,40 @@ fig-tab,
|
|
|
414
794
|
font-weight: var(--body-medium-strong-fontWeight);
|
|
415
795
|
}
|
|
416
796
|
}
|
|
417
|
-
|
|
797
|
+
|
|
418
798
|
&:has(:checked),
|
|
419
|
-
&[selected]{
|
|
799
|
+
&[selected] {
|
|
420
800
|
background-color: var(--figma-color-bg-secondary);
|
|
421
801
|
font-weight: var(--body-medium-strong-fontWeight);
|
|
422
802
|
color: var(--figma-color-text);
|
|
423
803
|
}
|
|
424
|
-
|
|
804
|
+
|
|
805
|
+
&:hover {
|
|
425
806
|
background-color: var(--figma-color-bg-secondary);
|
|
426
807
|
}
|
|
427
|
-
|
|
428
|
-
|
|
808
|
+
|
|
809
|
+
& [type=radio] {
|
|
810
|
+
position: absolute;
|
|
429
811
|
inset: 0;
|
|
430
812
|
border-radius: 0;
|
|
431
813
|
opacity: 0;
|
|
432
|
-
z-index:1;
|
|
814
|
+
z-index: 1;
|
|
433
815
|
width: 100%;
|
|
434
816
|
height: 100%;
|
|
435
817
|
}
|
|
436
818
|
}
|
|
819
|
+
|
|
437
820
|
fig-tabs,
|
|
438
|
-
.tabs{
|
|
821
|
+
.tabs {
|
|
439
822
|
display: flex;
|
|
440
823
|
gap: var(--spacer-2);
|
|
441
824
|
}
|
|
442
825
|
|
|
443
826
|
/* Avatar */
|
|
444
|
-
.avatar{
|
|
827
|
+
.avatar {
|
|
445
828
|
width: 1.5rem;
|
|
446
829
|
display: inline-grid;
|
|
447
|
-
place-items: center;
|
|
830
|
+
place-items: center;
|
|
448
831
|
height: 1.5rem;
|
|
449
832
|
border-radius: 100%;
|
|
450
833
|
border: 0;
|
|
@@ -452,11 +835,13 @@ fig-tabs,
|
|
|
452
835
|
overflow: hidden;
|
|
453
836
|
color: var(--figma-color-icon-onbrand);
|
|
454
837
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
455
|
-
|
|
838
|
+
|
|
839
|
+
&:has(img[src]) {
|
|
456
840
|
background: none;
|
|
457
841
|
}
|
|
458
842
|
}
|
|
459
|
-
|
|
843
|
+
|
|
844
|
+
.avatar img {
|
|
460
845
|
position: absolute;
|
|
461
846
|
background: var(--checkerboard);
|
|
462
847
|
width: 1.5rem;
|
|
@@ -464,16 +849,17 @@ fig-tabs,
|
|
|
464
849
|
border-radius: 100%;
|
|
465
850
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
466
851
|
}
|
|
467
|
-
|
|
852
|
+
|
|
853
|
+
.avatar::after {
|
|
468
854
|
content: attr(initials);
|
|
469
855
|
}
|
|
470
856
|
|
|
471
857
|
/* Color input */
|
|
472
|
-
input[type=color]{
|
|
858
|
+
input[type=color] {
|
|
473
859
|
width: 14px;
|
|
474
860
|
height: 14px;
|
|
475
861
|
-webkit-appearance: none;
|
|
476
|
-
appearance: none;
|
|
862
|
+
appearance: none;
|
|
477
863
|
border: 0;
|
|
478
864
|
padding: 0;
|
|
479
865
|
margin: 0;
|
|
@@ -483,13 +869,14 @@ input[type=color]{
|
|
|
483
869
|
box-sizing: content-box;
|
|
484
870
|
border-radius: var(--radius-medium);
|
|
485
871
|
background-color: var(--figma-color-bg-secondary);
|
|
486
|
-
|
|
487
|
-
&:focus{
|
|
872
|
+
|
|
873
|
+
&:focus {
|
|
488
874
|
box-shadow: inset 0 0 0 1px var(--border-selected);
|
|
489
875
|
outline: 0;
|
|
490
876
|
}
|
|
491
877
|
}
|
|
492
|
-
|
|
878
|
+
|
|
879
|
+
input[type=color]::-webkit-color-swatch-wrapper {
|
|
493
880
|
padding: 0;
|
|
494
881
|
border: 0;
|
|
495
882
|
border-radius: 0.125rem;
|
|
@@ -497,44 +884,50 @@ input[type=color]::-webkit-color-swatch-wrapper{
|
|
|
497
884
|
overflow: hidden;
|
|
498
885
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
499
886
|
}
|
|
500
|
-
|
|
887
|
+
|
|
888
|
+
input[type=color]::-moz-color-swatch {
|
|
501
889
|
border-radius: 0.125rem;
|
|
502
890
|
padding: 0;
|
|
503
891
|
border: 0;
|
|
504
|
-
mask-image: linear-gradient(to right, black 0%, black 50%,rgba(0,0,0,var(--alpha)) 50%);
|
|
892
|
+
mask-image: linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);
|
|
505
893
|
}
|
|
506
|
-
|
|
894
|
+
|
|
895
|
+
input[type=color]::-webkit-color-swatch {
|
|
507
896
|
padding: 0;
|
|
508
897
|
border: 0;
|
|
509
|
-
mask-image: linear-gradient(to right, black 0%, black 50%,rgba(0,0,0,var(--alpha)) 50%);
|
|
898
|
+
mask-image: linear-gradient(to right, black 0%, black 50%, rgba(0, 0, 0, var(--alpha)) 50%);
|
|
510
899
|
}
|
|
511
900
|
|
|
512
901
|
/* Combo input */
|
|
513
|
-
.input-combo{
|
|
902
|
+
.input-combo {
|
|
514
903
|
display: inline-flex;
|
|
515
904
|
flex-wrap: nowrap;
|
|
516
905
|
align-items: center;
|
|
517
906
|
gap: 1px;
|
|
518
|
-
|
|
907
|
+
|
|
908
|
+
&>* {
|
|
909
|
+
|
|
519
910
|
&:first-child,
|
|
520
|
-
&:first-child>*{
|
|
911
|
+
&:first-child>* {
|
|
521
912
|
border-top-right-radius: 0;
|
|
522
913
|
border-bottom-right-radius: 0;
|
|
523
914
|
}
|
|
915
|
+
|
|
524
916
|
&:last-child,
|
|
525
|
-
&:last-child>*{
|
|
917
|
+
&:last-child>* {
|
|
526
918
|
border-top-left-radius: 0;
|
|
527
919
|
border-bottom-left-radius: 0;
|
|
528
920
|
}
|
|
921
|
+
|
|
529
922
|
&:not(:last-child):not(:first-child),
|
|
530
|
-
&:not(:last-child):not(:first-child)>*{
|
|
923
|
+
&:not(:last-child):not(:first-child)>* {
|
|
531
924
|
border-radius: 0;
|
|
532
925
|
}
|
|
533
926
|
}
|
|
534
927
|
}
|
|
535
928
|
|
|
536
929
|
/* Switch */
|
|
537
|
-
input[type=checkbox].switch{
|
|
930
|
+
input[type=checkbox].switch {
|
|
538
931
|
display: inline-flex;
|
|
539
932
|
margin: 0;
|
|
540
933
|
vertical-align: middle;
|
|
@@ -542,12 +935,12 @@ input[type=checkbox].switch{
|
|
|
542
935
|
width: 2rem;
|
|
543
936
|
height: 1rem;
|
|
544
937
|
left: 0;
|
|
545
|
-
top:0;
|
|
938
|
+
top: 0;
|
|
546
939
|
margin: 0;
|
|
547
940
|
background: transparent;
|
|
548
941
|
appearance: none;
|
|
549
942
|
-moz-appearance: none;
|
|
550
|
-
-webkit-appearance:none;
|
|
943
|
+
-webkit-appearance: none;
|
|
551
944
|
outline: none;
|
|
552
945
|
border: 0;
|
|
553
946
|
align-items: center;
|
|
@@ -558,7 +951,8 @@ input[type=checkbox].switch{
|
|
|
558
951
|
box-sizing: border-box;
|
|
559
952
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
560
953
|
}
|
|
561
|
-
|
|
954
|
+
|
|
955
|
+
input[type=checkbox].switch:after {
|
|
562
956
|
content: '';
|
|
563
957
|
background-color: var(--figma-color-icon-onbrand);
|
|
564
958
|
width: calc(1rem - 2px);
|
|
@@ -569,62 +963,72 @@ input[type=checkbox].switch:after{
|
|
|
569
963
|
transition: var(--input-transition);
|
|
570
964
|
box-shadow: var(--handle-shadow);
|
|
571
965
|
}
|
|
572
|
-
|
|
966
|
+
|
|
967
|
+
input[type=checkbox].switch[indeterminate="true"]:after {
|
|
573
968
|
width: 0.5rem;
|
|
574
969
|
height: 0.125rem;
|
|
575
970
|
transform: none;
|
|
576
971
|
}
|
|
972
|
+
|
|
577
973
|
input[type=checkbox].switch[indeterminate="true"],
|
|
578
|
-
input[type=checkbox].switch:checked{
|
|
974
|
+
input[type=checkbox].switch:checked {
|
|
579
975
|
background-color: var(--figma-color-bg-brand);
|
|
580
976
|
}
|
|
581
|
-
|
|
977
|
+
|
|
978
|
+
input[type=checkbox].switch:checked:after {
|
|
582
979
|
transform: translate(0.5rem);
|
|
583
980
|
}
|
|
584
|
-
|
|
981
|
+
|
|
982
|
+
input[type=checkbox].switch:disabled {
|
|
585
983
|
background-color: var(--figma-color-bg-tertiary);
|
|
586
984
|
cursor: not-allowed;
|
|
587
985
|
}
|
|
588
|
-
|
|
986
|
+
|
|
987
|
+
input[type=checkbox].switch:focus {
|
|
589
988
|
outline: 0;
|
|
590
989
|
}
|
|
591
|
-
|
|
990
|
+
|
|
991
|
+
input[type=checkbox].switch:checked:focus {
|
|
592
992
|
outline: 0;
|
|
593
993
|
}
|
|
594
994
|
|
|
595
995
|
/* Checkbox */
|
|
596
|
-
input[type=checkbox]:not(.switch){
|
|
996
|
+
input[type=checkbox]:not(.switch) {
|
|
597
997
|
appearance: none;
|
|
598
998
|
border-radius: var(--radius-medium);
|
|
599
|
-
width: 1rem;
|
|
999
|
+
width: 1rem;
|
|
600
1000
|
height: 1rem;
|
|
601
1001
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
602
1002
|
background-color: var(--figma-color-bg-secondary);
|
|
603
1003
|
vertical-align: middle;
|
|
604
|
-
|
|
605
|
-
&:hover{
|
|
1004
|
+
|
|
1005
|
+
&:hover {
|
|
606
1006
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='white' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
|
|
607
1007
|
}
|
|
608
|
-
|
|
1008
|
+
|
|
1009
|
+
&:checked {
|
|
609
1010
|
background-color: var(--figma-color-bg-brand);
|
|
610
1011
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
|
|
611
1012
|
}
|
|
612
1013
|
}
|
|
613
|
-
|
|
1014
|
+
|
|
1015
|
+
.figma-light input[type=checkbox]:not(.switch):hover {
|
|
614
1016
|
background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.50012 7.5L7.50012 10.5L11.5001 4.5' stroke='black' opacity='0.25' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.125' /%3E%3C/svg%3E%0A");
|
|
615
1017
|
}
|
|
616
|
-
|
|
1018
|
+
|
|
1019
|
+
label.checkbox:has([type=checkbox]) {
|
|
617
1020
|
padding-left: 1.5rem;
|
|
618
|
-
|
|
1021
|
+
|
|
1022
|
+
& [type=radio] {
|
|
619
1023
|
margin-left: -1.5rem;
|
|
620
1024
|
}
|
|
621
1025
|
}
|
|
622
1026
|
|
|
623
1027
|
/* Radio */
|
|
624
|
-
input[type=radio]{
|
|
1028
|
+
input[type=radio] {
|
|
625
1029
|
appearance: none;
|
|
626
1030
|
border-radius: 0.5rem;
|
|
627
|
-
width: 1rem;
|
|
1031
|
+
width: 1rem;
|
|
628
1032
|
height: 1rem;
|
|
629
1033
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
630
1034
|
background-color: var(--figma-color-bg-secondary);
|
|
@@ -632,68 +1036,73 @@ input[type=radio]{
|
|
|
632
1036
|
margin: 0;
|
|
633
1037
|
display: inline-grid;
|
|
634
1038
|
place-content: center;
|
|
635
|
-
|
|
636
|
-
&:checked{
|
|
1039
|
+
|
|
1040
|
+
&:checked {
|
|
637
1041
|
background-color: var(--figma-color-bg-brand);
|
|
638
|
-
|
|
639
|
-
&::after{
|
|
1042
|
+
|
|
1043
|
+
&::after {
|
|
640
1044
|
transform: scale(1);
|
|
641
1045
|
}
|
|
642
1046
|
}
|
|
643
|
-
|
|
1047
|
+
|
|
1048
|
+
&:focus {
|
|
644
1049
|
box-shadow: inset 0 0 0 1px var(--border-selected);
|
|
645
1050
|
outline: 0;
|
|
646
1051
|
}
|
|
647
|
-
|
|
648
|
-
&::after{
|
|
649
|
-
content:'';
|
|
1052
|
+
|
|
1053
|
+
&::after {
|
|
1054
|
+
content: '';
|
|
650
1055
|
width: 0.5rem;
|
|
651
1056
|
height: 0.5rem;
|
|
652
1057
|
border-radius: 0.25rem;
|
|
653
1058
|
background-color: var(--figma-color-text-onbrand);
|
|
654
1059
|
transform: scale(0);
|
|
655
1060
|
transition: var(--input-transition);
|
|
656
|
-
box-shadow:
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
1061
|
+
box-shadow:
|
|
1062
|
+
0px 0 0 0.75px rgba(0, 0, 0, 0.1),
|
|
1063
|
+
0px 1px 3px 0px rgba(0, 0, 0, 0.1),
|
|
1064
|
+
0px 3px 8px 0px rgba(0, 0, 0, 0.1),
|
|
1065
|
+
0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
|
|
661
1066
|
}
|
|
662
1067
|
}
|
|
663
|
-
|
|
1068
|
+
|
|
1069
|
+
label.radio:has([type=radio]) {
|
|
664
1070
|
padding-left: 1.5rem;
|
|
665
|
-
|
|
1071
|
+
|
|
1072
|
+
& [type=radio] {
|
|
666
1073
|
margin-left: -1.5rem;
|
|
667
1074
|
}
|
|
668
1075
|
}
|
|
669
1076
|
|
|
670
1077
|
/* Fieldset */
|
|
671
|
-
fieldset{
|
|
1078
|
+
fieldset {
|
|
672
1079
|
display: flex;
|
|
673
1080
|
flex-direction: column;
|
|
674
1081
|
gap: 0.25rem;
|
|
675
1082
|
border: 0;
|
|
676
1083
|
align-items: start;
|
|
677
1084
|
padding: var(--spacer-2) 0;
|
|
678
|
-
|
|
1085
|
+
|
|
1086
|
+
&>legend {
|
|
679
1087
|
margin-top: 0.125rem;
|
|
680
1088
|
font-weight: 500;
|
|
681
1089
|
font-size: .625rem;
|
|
682
1090
|
line-height: 0.875rem;
|
|
683
1091
|
color: var(--figma-color-text-secondary);
|
|
684
1092
|
}
|
|
685
|
-
|
|
1093
|
+
|
|
1094
|
+
&>label {
|
|
686
1095
|
display: grid;
|
|
687
1096
|
width: 100%;
|
|
688
|
-
grid-template-columns: 4rem 1fr;
|
|
1097
|
+
grid-template-columns: 4rem 1fr;
|
|
689
1098
|
column-gap: var(--spacer-2);
|
|
690
1099
|
align-items: center;
|
|
691
1100
|
}
|
|
692
1101
|
}
|
|
693
1102
|
|
|
694
1103
|
/* Details */
|
|
695
|
-
details{
|
|
696
|
-
|
|
1104
|
+
details {
|
|
1105
|
+
&>summary {
|
|
697
1106
|
font-weight: var(--body-medium-strong-fontWeight);
|
|
698
1107
|
cursor: default;
|
|
699
1108
|
display: flex;
|
|
@@ -702,7 +1111,8 @@ details{
|
|
|
702
1111
|
height: var(--spacer-6);
|
|
703
1112
|
user-select: none;
|
|
704
1113
|
color: var(--figma-color-text-secondary);
|
|
705
|
-
|
|
1114
|
+
|
|
1115
|
+
&::before {
|
|
706
1116
|
content: var(--icon-chevron);
|
|
707
1117
|
display: inline-flex;
|
|
708
1118
|
align-items: start;
|
|
@@ -711,29 +1121,34 @@ details{
|
|
|
711
1121
|
transform: rotate(-90deg);
|
|
712
1122
|
transition: transform var(--transition-duration) var(--transition-timing-function);
|
|
713
1123
|
}
|
|
714
|
-
|
|
1124
|
+
|
|
1125
|
+
&::marker {
|
|
715
1126
|
content: "";
|
|
716
1127
|
}
|
|
717
1128
|
}
|
|
1129
|
+
|
|
718
1130
|
&>summary:hover,
|
|
719
|
-
&[open]>summary{
|
|
720
|
-
color: inherit;
|
|
721
|
-
|
|
1131
|
+
&[open]>summary {
|
|
1132
|
+
color: inherit;
|
|
1133
|
+
|
|
1134
|
+
&::before {
|
|
722
1135
|
opacity: 1;
|
|
723
1136
|
}
|
|
724
1137
|
}
|
|
725
|
-
|
|
726
|
-
|
|
1138
|
+
|
|
1139
|
+
&[open] {
|
|
1140
|
+
&>summary::before {
|
|
727
1141
|
transform: rotate(0deg);
|
|
728
1142
|
}
|
|
729
1143
|
}
|
|
730
1144
|
}
|
|
731
|
-
|
|
732
|
-
|
|
1145
|
+
|
|
1146
|
+
.figma-light details>summary:before {
|
|
1147
|
+
content: var(--icon-chevron);
|
|
733
1148
|
}
|
|
734
1149
|
|
|
735
1150
|
|
|
736
|
-
|
|
1151
|
+
/* Details
|
|
737
1152
|
|
|
738
1153
|
details summary{
|
|
739
1154
|
cursor: pointer;
|
|
@@ -773,9 +1188,9 @@ details{
|
|
|
773
1188
|
|
|
774
1189
|
|
|
775
1190
|
|
|
776
|
-
@layer slider{
|
|
777
|
-
|
|
778
|
-
.slider{
|
|
1191
|
+
@layer slider {
|
|
1192
|
+
|
|
1193
|
+
.slider {
|
|
779
1194
|
--start: 1;
|
|
780
1195
|
display: block;
|
|
781
1196
|
position: relative;
|
|
@@ -784,19 +1199,33 @@ details{
|
|
|
784
1199
|
margin: 0 -5px !important;
|
|
785
1200
|
--slider-percent: calc(var(--slider-complete) * (100% - 5px));
|
|
786
1201
|
--color-percent: calc(var(--slider-complete) * (100%));
|
|
787
|
-
|
|
788
|
-
|
|
1202
|
+
--slider-handle-shadow: inset 0 0 0 4px var(--figma-color-icon-onbrand),
|
|
1203
|
+
inset 0 0 0 5px rgba(0, 0, 0, 0.1),
|
|
1204
|
+
0px 0 0 0.75px rgba(0, 0, 0, 0.1),
|
|
1205
|
+
0px 1px 3px 0px rgba(0, 0, 0, 0.1),
|
|
1206
|
+
0px 3px 8px 0px rgba(0, 0, 0, 0.1),
|
|
1207
|
+
0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
|
|
1208
|
+
--slider-handle-shadow-focus: inset 0 0 0 4px var(--figma-color-icon-onbrand),
|
|
1209
|
+
inset 0 0 0 5px rgba(0, 0, 0, 0.1),
|
|
1210
|
+
0px 0 0 0.75px rgba(0, 0, 0, 0.1),
|
|
1211
|
+
0px 1px 3px 0px rgba(0, 0, 0, 0.1),
|
|
1212
|
+
0px 3px 8px 0px rgba(0, 0, 0, 0.1),
|
|
1213
|
+
0px 0px 0.5px 0px rgba(0, 0, 0, 0.18),
|
|
1214
|
+
0 0 0 1px var(--border-selected);
|
|
1215
|
+
|
|
1216
|
+
&.gradient {
|
|
789
1217
|
padding-top: 2.5rem !important;
|
|
790
1218
|
}
|
|
791
|
-
|
|
1219
|
+
|
|
1220
|
+
& input[type=color] {
|
|
792
1221
|
position: absolute;
|
|
793
1222
|
left: var(--color-percent);
|
|
794
|
-
transform: translate(-50%,calc(-100% - 0.5rem));
|
|
1223
|
+
transform: translate(-50%, calc(-100% - 0.5rem));
|
|
795
1224
|
}
|
|
796
1225
|
}
|
|
797
1226
|
|
|
798
1227
|
/* Chromium */
|
|
799
|
-
.slider input[type=range]{
|
|
1228
|
+
.slider input[type=range] {
|
|
800
1229
|
height: 1rem;
|
|
801
1230
|
appearance: none;
|
|
802
1231
|
-webkit-appearance: none;
|
|
@@ -806,17 +1235,21 @@ details{
|
|
|
806
1235
|
cursor: grab;
|
|
807
1236
|
cursor: -webkit-grab;
|
|
808
1237
|
background-color: transparent;
|
|
809
|
-
|
|
810
|
-
&:active {
|
|
1238
|
+
|
|
1239
|
+
&:active {
|
|
811
1240
|
cursor: grabbing;
|
|
812
1241
|
cursor: -webkit-grabbing;
|
|
813
1242
|
}
|
|
814
|
-
|
|
1243
|
+
|
|
1244
|
+
&:focus {
|
|
815
1245
|
outline: none;
|
|
816
|
-
|
|
1246
|
+
|
|
1247
|
+
&::-webkit-slider-thumb {
|
|
1248
|
+
box-shadow: var(--slider-handle-shadow-focus);
|
|
1249
|
+
}
|
|
817
1250
|
}
|
|
818
1251
|
|
|
819
|
-
&::-webkit-slider-thumb{
|
|
1252
|
+
&::-webkit-slider-thumb {
|
|
820
1253
|
appearance: none;
|
|
821
1254
|
-webkit-appearance: none;
|
|
822
1255
|
border-radius: 0.5rem;
|
|
@@ -826,54 +1259,58 @@ details{
|
|
|
826
1259
|
border: none;
|
|
827
1260
|
position: relative;
|
|
828
1261
|
z-index: 1;
|
|
829
|
-
box-shadow:
|
|
830
|
-
inset 0 0 0 4px var(--figma-color-icon-onbrand),
|
|
831
|
-
inset 0 0 0 5px rgba(0, 0, 0, 0.1),
|
|
832
|
-
0px 0 0 0.75px rgba(0, 0, 0, 0.1),
|
|
833
|
-
0px 1px 3px 0px rgba(0, 0, 0, 0.1),
|
|
834
|
-
0px 3px 8px 0px rgba(0, 0, 0, 0.1),
|
|
835
|
-
0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
|
|
1262
|
+
box-shadow: var(--slider-handle-shadow);
|
|
836
1263
|
}
|
|
837
|
-
|
|
1264
|
+
|
|
1265
|
+
&:disabled {
|
|
838
1266
|
cursor: not-allowed;
|
|
839
|
-
|
|
1267
|
+
|
|
1268
|
+
&::-webkit-slider-runnable-track {
|
|
840
1269
|
background: linear-gradient(to right, var(--figma-color-bg-secondary) 0%, var(--figma-color-bg-secondary) var(--slider-percent), var(--figma-color-bg) var(--slider-percent));
|
|
841
1270
|
}
|
|
842
|
-
|
|
1271
|
+
|
|
1272
|
+
&::-webkit-slider-thumb {
|
|
843
1273
|
box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
|
|
844
1274
|
}
|
|
845
1275
|
}
|
|
846
|
-
|
|
1276
|
+
|
|
1277
|
+
&::-webkit-slider-runnable-track {
|
|
847
1278
|
height: 1rem;
|
|
848
|
-
background-color: transparent;
|
|
1279
|
+
background-color: transparent;
|
|
849
1280
|
border-radius: 0.5rem;
|
|
850
1281
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
851
|
-
background: radial-gradient(.55rem .55rem at var(--slider-percent) 50%, var(--figma-color-bg-brand) 0%, var(--figma-color-bg-brand) .55rem,transparent .55rem, transparent 100%),
|
|
1282
|
+
background: radial-gradient(.55rem .55rem at var(--slider-percent) 50%, var(--figma-color-bg-brand) 0%, var(--figma-color-bg-brand) .55rem, transparent .55rem, transparent 100%),
|
|
852
1283
|
linear-gradient(to right, var(--figma-color-bg-brand) 0%, var(--figma-color-bg-brand) var(--slider-percent), var(--figma-color-bg-secondary) var(--slider-percent));
|
|
853
1284
|
background-size: 100% 100%, 100% 100%;
|
|
854
1285
|
background-position: 75% middle, left middle;
|
|
855
|
-
background-repeat:no-repeat;
|
|
1286
|
+
background-repeat: no-repeat;
|
|
856
1287
|
}
|
|
857
|
-
|
|
1288
|
+
|
|
1289
|
+
&.hue::-webkit-slider-runnable-track {
|
|
858
1290
|
background: var(--bg-hue);
|
|
859
1291
|
}
|
|
860
|
-
|
|
861
|
-
|
|
1292
|
+
|
|
1293
|
+
&.opacity::-webkit-slider-runnable-track {
|
|
1294
|
+
background: linear-gradient(to right, transparent, var(--color)), var(--checkerboard);
|
|
862
1295
|
}
|
|
863
|
-
|
|
1296
|
+
|
|
1297
|
+
&.gradient {
|
|
864
1298
|
border-radius: 0.125rem;
|
|
865
|
-
|
|
1299
|
+
|
|
1300
|
+
&::-webkit-slider-thumb {
|
|
866
1301
|
transform: scale(1.5) translateY(-1.25rem);
|
|
867
1302
|
opacity: 0.5;
|
|
868
1303
|
}
|
|
869
1304
|
}
|
|
870
|
-
|
|
1305
|
+
|
|
1306
|
+
&.gradient::-webkit-slider-runnable-track {
|
|
871
1307
|
border-radius: 0.125rem;
|
|
872
1308
|
background: var(--bg-hue);
|
|
873
1309
|
}
|
|
874
1310
|
}
|
|
1311
|
+
|
|
875
1312
|
/* Firefox */
|
|
876
|
-
.slider input[type=range]{
|
|
1313
|
+
.slider input[type=range] {
|
|
877
1314
|
height: 1rem;
|
|
878
1315
|
appearance: none;
|
|
879
1316
|
-webkit-appearance: none;
|
|
@@ -882,16 +1319,20 @@ details{
|
|
|
882
1319
|
width: 100%;
|
|
883
1320
|
cursor: -moz-grab;
|
|
884
1321
|
background-color: transparent;
|
|
885
|
-
|
|
886
|
-
&:active {
|
|
887
|
-
cursor: -moz-grabbing;
|
|
1322
|
+
|
|
1323
|
+
&:active {
|
|
1324
|
+
cursor: -moz-grabbing;
|
|
888
1325
|
}
|
|
889
|
-
|
|
1326
|
+
|
|
1327
|
+
&:focus {
|
|
890
1328
|
outline: none;
|
|
891
|
-
|
|
1329
|
+
|
|
1330
|
+
&::-moz-range-thumb {
|
|
1331
|
+
box-shadow: var(--slider-handle-shadow-focus);
|
|
1332
|
+
}
|
|
892
1333
|
}
|
|
893
1334
|
|
|
894
|
-
&::-moz-range-thumb{
|
|
1335
|
+
&::-moz-range-thumb {
|
|
895
1336
|
appearance: none;
|
|
896
1337
|
-webkit-appearance: none;
|
|
897
1338
|
border-radius: 0.5rem;
|
|
@@ -901,53 +1342,56 @@ details{
|
|
|
901
1342
|
border: none;
|
|
902
1343
|
position: relative;
|
|
903
1344
|
z-index: 1;
|
|
904
|
-
box-shadow:
|
|
905
|
-
inset 0 0 0 4px var(--figma-color-icon-onbrand),
|
|
906
|
-
inset 0 0 0 5px rgba(0, 0, 0, 0.1),
|
|
907
|
-
0px 0 0 0.75px rgba(0, 0, 0, 0.1),
|
|
908
|
-
0px 1px 3px 0px rgba(0, 0, 0, 0.1),
|
|
909
|
-
0px 3px 8px 0px rgba(0, 0, 0, 0.1),
|
|
910
|
-
0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
|
|
1345
|
+
box-shadow: var(--slider-handle-shadow);
|
|
911
1346
|
}
|
|
912
|
-
|
|
1347
|
+
|
|
1348
|
+
&:disabled {
|
|
913
1349
|
cursor: not-allowed;
|
|
914
|
-
|
|
1350
|
+
|
|
1351
|
+
&::-moz-range-track {
|
|
915
1352
|
background: linear-gradient(to right, var(--figma-color-bg-secondary) 0%, var(--figma-color-bg-secondary) var(--slider-percent), var(--figma-color-bg) var(--slider-percent));
|
|
916
1353
|
}
|
|
917
|
-
|
|
1354
|
+
|
|
1355
|
+
&::-moz-range-thumb {
|
|
918
1356
|
box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
|
|
919
1357
|
}
|
|
920
1358
|
}
|
|
921
|
-
|
|
1359
|
+
|
|
1360
|
+
&::-moz-range-track {
|
|
922
1361
|
height: 1rem;
|
|
923
|
-
background-color: transparent;
|
|
1362
|
+
background-color: transparent;
|
|
924
1363
|
border-radius: 0.5rem;
|
|
925
1364
|
box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
|
|
926
|
-
background: radial-gradient(.55rem .55rem at var(--slider-percent) 50%, var(--figma-color-bg-brand) 0%, var(--figma-color-bg-brand) .55rem,transparent .55rem, transparent 100%),
|
|
1365
|
+
background: radial-gradient(.55rem .55rem at var(--slider-percent) 50%, var(--figma-color-bg-brand) 0%, var(--figma-color-bg-brand) .55rem, transparent .55rem, transparent 100%),
|
|
927
1366
|
linear-gradient(to right, var(--figma-color-bg-brand) 0%, var(--figma-color-bg-brand) var(--slider-percent), var(--figma-color-bg-secondary) var(--slider-percent));
|
|
928
1367
|
background-size: 100% 100%, 100% 100%;
|
|
929
1368
|
background-position: 75% middle, left middle;
|
|
930
|
-
background-repeat:no-repeat;
|
|
1369
|
+
background-repeat: no-repeat;
|
|
931
1370
|
}
|
|
932
|
-
|
|
1371
|
+
|
|
1372
|
+
&.hue::-moz-range-track {
|
|
933
1373
|
background: var(--bg-hue);
|
|
934
1374
|
}
|
|
935
|
-
|
|
936
|
-
|
|
1375
|
+
|
|
1376
|
+
&.opacity::-moz-range-track {
|
|
1377
|
+
background: linear-gradient(to right, transparent, var(--color)), var(--checkerboard);
|
|
937
1378
|
}
|
|
938
|
-
|
|
1379
|
+
|
|
1380
|
+
&.gradient {
|
|
939
1381
|
border-radius: 0.125rem;
|
|
940
|
-
|
|
1382
|
+
|
|
1383
|
+
&::-webkit-slider-thumb {
|
|
941
1384
|
transform: scale(1.5) translateY(-1.25rem);
|
|
942
1385
|
opacity: 0.5;
|
|
943
1386
|
}
|
|
944
1387
|
}
|
|
945
|
-
|
|
1388
|
+
|
|
1389
|
+
&.gradient::-moz-range-track {
|
|
946
1390
|
border-radius: 0.125rem;
|
|
947
1391
|
background: var(--bg-hue);
|
|
948
1392
|
}
|
|
949
1393
|
}
|
|
950
|
-
|
|
1394
|
+
|
|
951
1395
|
@supports (animation-timeline: scroll()) {
|
|
952
1396
|
@property --slider-complete {
|
|
953
1397
|
initial-value: 0;
|
|
@@ -981,7 +1425,7 @@ details{
|
|
|
981
1425
|
.dialog,
|
|
982
1426
|
dialog,
|
|
983
1427
|
.popover,
|
|
984
|
-
[popover]{
|
|
1428
|
+
[popover] {
|
|
985
1429
|
padding: 0;
|
|
986
1430
|
outline: 0;
|
|
987
1431
|
border: 0;
|
|
@@ -991,12 +1435,13 @@ dialog,
|
|
|
991
1435
|
min-width: var(--popover-min-width);
|
|
992
1436
|
|
|
993
1437
|
box-shadow: var(--figma-elevation-100);
|
|
994
|
-
|
|
995
|
-
&:popover-open{
|
|
1438
|
+
|
|
1439
|
+
&:popover-open {
|
|
996
1440
|
display: block;
|
|
997
1441
|
outline: none !important;
|
|
998
1442
|
}
|
|
999
|
-
|
|
1443
|
+
|
|
1444
|
+
& header {
|
|
1000
1445
|
height: var(--spacer-6);
|
|
1001
1446
|
margin: 0;
|
|
1002
1447
|
padding: var(--spacer-2);
|
|
@@ -1004,14 +1449,17 @@ dialog,
|
|
|
1004
1449
|
align-items: center;
|
|
1005
1450
|
font-weight: var(--body-medium-strong-fontWeight);
|
|
1006
1451
|
box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
|
|
1007
|
-
|
|
1008
|
-
|
|
1452
|
+
|
|
1453
|
+
& h3 {
|
|
1454
|
+
font: inherit;
|
|
1455
|
+
}
|
|
1456
|
+
|
|
1457
|
+
&>:first-child {
|
|
1458
|
+
padding-left: var(--spacer-2);
|
|
1009
1459
|
}
|
|
1010
|
-
&>:first-child{
|
|
1011
|
-
padding-left: var(--spacer-2);
|
|
1012
|
-
}
|
|
1013
1460
|
}
|
|
1014
|
-
|
|
1461
|
+
|
|
1462
|
+
&[tooltip] {
|
|
1015
1463
|
color: var(--color-tooltip);
|
|
1016
1464
|
background-color: var(--bg-tooltip);
|
|
1017
1465
|
padding: var(--spacer-1) var(--spacer-2);
|
|
@@ -1019,53 +1467,56 @@ dialog,
|
|
|
1019
1467
|
box-sizing: content-box;
|
|
1020
1468
|
min-width: var(--popover-min-width);
|
|
1021
1469
|
max-width: var(--popover-min-width);
|
|
1022
|
-
|
|
1470
|
+
/*top: calc(anchor(top) - 1ch - (var(--spacer-1) * 2 + 1rem));*/
|
|
1023
1471
|
top: anchor(top);
|
|
1024
1472
|
left: anchor(center);
|
|
1025
1473
|
/*transform: translate(-50%,-100%);*/
|
|
1026
1474
|
|
|
1027
|
-
|
|
1475
|
+
|
|
1028
1476
|
white-space: nowrap;
|
|
1029
1477
|
overflow: hidden;
|
|
1030
1478
|
text-overflow: ellipsis;
|
|
1031
|
-
|
|
1032
|
-
|
|
1479
|
+
|
|
1480
|
+
|
|
1033
1481
|
border-radius: var(--radius-medium, 0.3125rem);
|
|
1034
|
-
box-shadow: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.15),
|
|
1035
|
-
0px 5px 12px 0px rgba(0, 0, 0, 0.13),
|
|
1482
|
+
box-shadow: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.15),
|
|
1483
|
+
0px 5px 12px 0px rgba(0, 0, 0, 0.13),
|
|
1036
1484
|
0px 1px 3px 0px rgba(0, 0, 0, 0.10);
|
|
1037
|
-
|
|
1485
|
+
|
|
1038
1486
|
@supports (-webkit-line-clamp: 2) {
|
|
1039
1487
|
white-space: initial;
|
|
1040
1488
|
-webkit-line-clamp: 2;
|
|
1041
1489
|
-webkit-box-orient: vertical;
|
|
1042
1490
|
}
|
|
1043
|
-
|
|
1044
|
-
&:popover-open{
|
|
1491
|
+
|
|
1492
|
+
&:popover-open {
|
|
1045
1493
|
display: inline-block;
|
|
1494
|
+
|
|
1046
1495
|
@supports (-webkit-line-clamp: 2) {
|
|
1047
1496
|
display: -webkit-box;
|
|
1048
1497
|
}
|
|
1498
|
+
|
|
1049
1499
|
min-width: 0;
|
|
1050
1500
|
}
|
|
1051
1501
|
}
|
|
1052
1502
|
}
|
|
1053
1503
|
|
|
1054
|
-
dialog{
|
|
1504
|
+
dialog {
|
|
1055
1505
|
position: fixed;
|
|
1056
1506
|
top: 50%;
|
|
1057
1507
|
left: 50%;
|
|
1058
1508
|
margin: 0;
|
|
1059
|
-
transform: translate(-50
|
|
1060
|
-
|
|
1509
|
+
transform: translate(-50%, -50%);
|
|
1510
|
+
|
|
1511
|
+
&[position*="bottom"] {
|
|
1061
1512
|
bottom: 0.5rem;
|
|
1062
1513
|
top: auto;
|
|
1063
|
-
transform: translate(-50%,0);
|
|
1514
|
+
transform: translate(-50%, 0);
|
|
1064
1515
|
}
|
|
1065
1516
|
}
|
|
1066
1517
|
|
|
1067
1518
|
/* Tooltip */
|
|
1068
|
-
.fig-tooltip{
|
|
1519
|
+
.fig-tooltip {
|
|
1069
1520
|
inset: unset;
|
|
1070
1521
|
color: var(--color-tooltip);
|
|
1071
1522
|
background-color: var(--bg-tooltip);
|
|
@@ -1074,60 +1525,64 @@ dialog{
|
|
|
1074
1525
|
display: inline-flex;
|
|
1075
1526
|
font-weight: inherit;
|
|
1076
1527
|
border-radius: var(--radius-medium, 0.3125rem);
|
|
1077
|
-
|
|
1528
|
+
|
|
1078
1529
|
font: inherit;
|
|
1079
1530
|
font-weight: normal;
|
|
1080
1531
|
|
|
1081
|
-
&:after{
|
|
1532
|
+
&:after {
|
|
1082
1533
|
content: '';
|
|
1083
1534
|
background-color: var(--bg-tooltip);
|
|
1084
1535
|
clip-path: path('M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z');
|
|
1085
1536
|
width: 1rem;
|
|
1086
|
-
height: 6px;
|
|
1537
|
+
height: 6px;
|
|
1087
1538
|
position: absolute;
|
|
1088
|
-
top: calc(100% - 1px);
|
|
1539
|
+
top: calc(100% - 1px);
|
|
1089
1540
|
left: 50%;
|
|
1090
1541
|
z-index: 2;
|
|
1091
1542
|
transform: translate(-50%);
|
|
1092
|
-
}
|
|
1093
|
-
|
|
1094
|
-
|
|
1543
|
+
}
|
|
1544
|
+
|
|
1545
|
+
&[position=bottom] {
|
|
1546
|
+
&:after {
|
|
1095
1547
|
top: 1px;
|
|
1096
|
-
transform: translate(-50
|
|
1548
|
+
transform: translate(-50%, -100%) scaleY(-1);
|
|
1097
1549
|
}
|
|
1098
1550
|
}
|
|
1099
1551
|
}
|
|
1100
1552
|
|
|
1101
|
-
.fig-tooltip,
|
|
1102
|
-
.fig-popover{
|
|
1553
|
+
.fig-tooltip,
|
|
1554
|
+
.fig-popover {
|
|
1103
1555
|
overflow: visible;
|
|
1104
|
-
box-shadow: inset 0 0.5px 0 0 rgba(255,255,255,0.1);
|
|
1556
|
+
box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
|
|
1105
1557
|
filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.10)) drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13)) drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
|
|
1106
|
-
|
|
1558
|
+
|
|
1559
|
+
&:after {
|
|
1107
1560
|
content: '';
|
|
1108
1561
|
background-color: inherit;
|
|
1109
1562
|
clip-path: path('M16 0H0L0 1H0.757359C1.55301 1 2.31607 1.31607 2.87868 1.87868L6.29587 5.29587C7.23704 6.23704 8.76296 6.23704 9.70413 5.29587L13.1213 1.87868C13.6839 1.31607 14.447 1 15.2426 1H16V0Z');
|
|
1110
1563
|
width: 1rem;
|
|
1111
|
-
height: 6px;
|
|
1564
|
+
height: 6px;
|
|
1112
1565
|
position: absolute;
|
|
1113
|
-
top: calc(100% - 1px);
|
|
1566
|
+
top: calc(100% - 1px);
|
|
1114
1567
|
left: 50%;
|
|
1115
1568
|
z-index: 2;
|
|
1116
1569
|
transform: translate(-50%);
|
|
1117
|
-
}
|
|
1118
|
-
|
|
1119
|
-
|
|
1570
|
+
}
|
|
1571
|
+
|
|
1572
|
+
&[position=bottom] {
|
|
1573
|
+
&:after {
|
|
1120
1574
|
top: 1px;
|
|
1121
|
-
transform: translate(-50
|
|
1575
|
+
transform: translate(-50%, -100%) scaleY(-1);
|
|
1122
1576
|
}
|
|
1123
1577
|
}
|
|
1124
1578
|
}
|
|
1125
1579
|
|
|
1126
1580
|
/* UI Icons */
|
|
1127
|
-
fig-icon{
|
|
1581
|
+
fig-icon {
|
|
1128
1582
|
display: block;
|
|
1129
1583
|
}
|
|
1130
|
-
|
|
1584
|
+
|
|
1585
|
+
fig-icon.close {
|
|
1131
1586
|
width: 1rem;
|
|
1132
1587
|
height: 1rem;
|
|
1133
1588
|
background-color: var(--figma-color-text);
|
|
@@ -1135,49 +1590,56 @@ fig-icon.close{
|
|
|
1135
1590
|
}
|
|
1136
1591
|
|
|
1137
1592
|
/* Web Components */
|
|
1138
|
-
fig-button,
|
|
1139
|
-
fig-tooltip,
|
|
1593
|
+
fig-button,
|
|
1594
|
+
fig-tooltip,
|
|
1140
1595
|
fig-popover,
|
|
1141
1596
|
fig-dialog,
|
|
1142
1597
|
fig-content,
|
|
1143
1598
|
fig-slider,
|
|
1144
1599
|
fig-segmented-control,
|
|
1145
1600
|
fig-switch,
|
|
1146
|
-
fig-input-color,
|
|
1601
|
+
fig-input-color,
|
|
1147
1602
|
fig-input-text,
|
|
1148
1603
|
fig-checkbox,
|
|
1149
1604
|
fig-radio,
|
|
1150
1605
|
fig-tab,
|
|
1151
1606
|
fig-tabs,
|
|
1152
|
-
fig-tooltip{
|
|
1607
|
+
fig-tooltip {
|
|
1153
1608
|
display: inline-flex;
|
|
1154
1609
|
gap: var(--spacer-2);
|
|
1155
1610
|
user-select: none;
|
|
1156
1611
|
}
|
|
1157
|
-
|
|
1612
|
+
|
|
1613
|
+
fig-input-text {
|
|
1158
1614
|
user-select: all;
|
|
1159
|
-
|
|
1615
|
+
gap: 0;
|
|
1616
|
+
|
|
1617
|
+
&[multiline] {
|
|
1160
1618
|
display: block;
|
|
1161
1619
|
}
|
|
1162
1620
|
}
|
|
1621
|
+
|
|
1163
1622
|
fig-input-text[autoresize] textarea,
|
|
1164
|
-
fig-input-text[autoresize] input{
|
|
1623
|
+
fig-input-text[autoresize] input {
|
|
1165
1624
|
field-sizing: content;
|
|
1166
1625
|
}
|
|
1167
|
-
|
|
1626
|
+
|
|
1627
|
+
fig-input-text[resizable] textarea {
|
|
1168
1628
|
resize: both;
|
|
1169
1629
|
}
|
|
1630
|
+
|
|
1170
1631
|
fig-checkbox,
|
|
1171
|
-
fig-radio{
|
|
1172
|
-
& label span{
|
|
1632
|
+
fig-radio {
|
|
1633
|
+
& label span {
|
|
1173
1634
|
vertical-align: middle;
|
|
1174
1635
|
}
|
|
1175
1636
|
}
|
|
1176
|
-
|
|
1177
|
-
|
|
1637
|
+
|
|
1638
|
+
fig-input-color {
|
|
1639
|
+
--alpha: 1;
|
|
1178
1640
|
}
|
|
1179
1641
|
|
|
1180
|
-
fig-header{
|
|
1642
|
+
fig-header {
|
|
1181
1643
|
height: var(--spacer-6);
|
|
1182
1644
|
margin: 0;
|
|
1183
1645
|
padding: var(--spacer-2);
|
|
@@ -1185,130 +1647,148 @@ fig-header{
|
|
|
1185
1647
|
align-items: center;
|
|
1186
1648
|
box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
|
|
1187
1649
|
gap: 0.25rem;
|
|
1188
|
-
|
|
1650
|
+
|
|
1651
|
+
& h3 {
|
|
1189
1652
|
padding-left: var(--spacer-1);
|
|
1190
1653
|
font-weight: var(--body-medium-strong-fontWeight);
|
|
1191
|
-
}
|
|
1192
|
-
&>*:not(fig-button){
|
|
1193
|
-
flex-grow:1;
|
|
1194
1654
|
}
|
|
1195
|
-
|
|
1655
|
+
|
|
1656
|
+
&>*:not(fig-button) {
|
|
1657
|
+
flex-grow: 1;
|
|
1658
|
+
}
|
|
1659
|
+
|
|
1660
|
+
&[borderless] {
|
|
1196
1661
|
box-shadow: none;
|
|
1197
1662
|
}
|
|
1198
1663
|
}
|
|
1199
1664
|
|
|
1200
|
-
fig-content{
|
|
1665
|
+
fig-content {
|
|
1201
1666
|
padding: var(--spacer-2);
|
|
1202
1667
|
display: block;
|
|
1203
1668
|
}
|
|
1204
1669
|
|
|
1205
1670
|
vstack,
|
|
1206
1671
|
.vstack,
|
|
1207
|
-
[vstack]{
|
|
1672
|
+
[vstack] {
|
|
1208
1673
|
display: flex;
|
|
1209
1674
|
flex-direction: column;
|
|
1210
1675
|
gap: 0.5rem;
|
|
1211
1676
|
}
|
|
1677
|
+
|
|
1212
1678
|
hstack,
|
|
1213
1679
|
.hstack,
|
|
1214
|
-
[hstack]{
|
|
1680
|
+
[hstack] {
|
|
1215
1681
|
display: flex;
|
|
1216
1682
|
gap: 0.5rem;
|
|
1217
1683
|
align-items: start;
|
|
1218
1684
|
}
|
|
1219
1685
|
|
|
1220
|
-
fig-input-text{
|
|
1686
|
+
fig-input-text {
|
|
1221
1687
|
background-color: var(--figma-color-bg-secondary);
|
|
1222
1688
|
border: 0;
|
|
1223
1689
|
border-radius: var(--radius-medium);
|
|
1224
1690
|
display: flex;
|
|
1225
1691
|
flex-wrap: nowrap;
|
|
1226
1692
|
justify-content: center;
|
|
1693
|
+
|
|
1227
1694
|
& label,
|
|
1228
|
-
& [slot]{
|
|
1695
|
+
& [slot] {
|
|
1229
1696
|
display: flex;
|
|
1230
1697
|
flex-wrap: nowrap;
|
|
1231
1698
|
justify-content: center;
|
|
1232
1699
|
align-items: center;
|
|
1233
1700
|
width: 100%;
|
|
1234
1701
|
}
|
|
1702
|
+
|
|
1235
1703
|
& [slot] {
|
|
1236
|
-
padding: .25rem 0.5rem;
|
|
1704
|
+
padding: .25rem 0.5rem;
|
|
1237
1705
|
flex: 0;
|
|
1238
1706
|
user-select: none;
|
|
1239
1707
|
color: var(--figma-color-text-secondary);
|
|
1240
1708
|
}
|
|
1241
|
-
|
|
1709
|
+
|
|
1710
|
+
& [slot=prepend] {
|
|
1242
1711
|
padding-right: 0;
|
|
1243
1712
|
}
|
|
1244
|
-
|
|
1713
|
+
|
|
1714
|
+
& [slot=append] {
|
|
1245
1715
|
padding-left: 0;
|
|
1246
1716
|
}
|
|
1247
|
-
|
|
1248
|
-
& input{
|
|
1717
|
+
|
|
1718
|
+
& input {
|
|
1249
1719
|
background-color: transparent !important;
|
|
1250
1720
|
flex: 1;
|
|
1721
|
+
|
|
1251
1722
|
&:focus,
|
|
1252
|
-
&:active{
|
|
1723
|
+
&:active {
|
|
1253
1724
|
box-shadow: none !important;
|
|
1254
1725
|
}
|
|
1255
1726
|
}
|
|
1256
|
-
|
|
1727
|
+
|
|
1728
|
+
&:has(input:focus) {
|
|
1257
1729
|
box-shadow: inset 0 0 0 1px var(--border-selected);
|
|
1258
1730
|
outline: 0;
|
|
1259
1731
|
}
|
|
1260
1732
|
}
|
|
1261
1733
|
|
|
1262
|
-
fig-input-color{
|
|
1734
|
+
fig-input-color {
|
|
1735
|
+
|
|
1263
1736
|
& fig-input-text:not([type]),
|
|
1264
|
-
& fig-input-text[type=text]{
|
|
1737
|
+
& fig-input-text[type=text] {
|
|
1265
1738
|
min-width: 6em;
|
|
1266
1739
|
display: inline-flex;
|
|
1267
1740
|
flex-direction: column;
|
|
1268
1741
|
align-items: stretch;
|
|
1269
|
-
|
|
1742
|
+
|
|
1743
|
+
& input[type=text] {
|
|
1270
1744
|
width: 100%;
|
|
1271
1745
|
}
|
|
1272
1746
|
}
|
|
1273
|
-
|
|
1747
|
+
|
|
1748
|
+
& fig-input-text[type=number] {
|
|
1274
1749
|
width: 3.5rem;
|
|
1275
1750
|
display: inline-flex;
|
|
1276
1751
|
}
|
|
1277
1752
|
}
|
|
1278
1753
|
|
|
1279
|
-
fig-slider{
|
|
1754
|
+
fig-slider {
|
|
1280
1755
|
display: flex;
|
|
1281
|
-
|
|
1756
|
+
|
|
1757
|
+
& .slider {
|
|
1282
1758
|
flex-grow: 1;
|
|
1283
1759
|
}
|
|
1284
|
-
|
|
1760
|
+
|
|
1761
|
+
& fig-input-text[type=number] {
|
|
1285
1762
|
width: 3.5rem;
|
|
1286
1763
|
}
|
|
1287
1764
|
}
|
|
1288
1765
|
|
|
1289
|
-
fig-field,
|
|
1290
|
-
.fig-field{
|
|
1766
|
+
fig-field,
|
|
1767
|
+
.fig-field {
|
|
1291
1768
|
display: flex;
|
|
1292
1769
|
margin: var(--spacer-2) 0;
|
|
1293
1770
|
flex-direction: column;
|
|
1294
1771
|
gap: 0;
|
|
1295
|
-
|
|
1772
|
+
|
|
1773
|
+
&>* {
|
|
1296
1774
|
flex: 1;
|
|
1297
1775
|
}
|
|
1298
|
-
|
|
1776
|
+
|
|
1777
|
+
&>label {
|
|
1299
1778
|
flex: 0;
|
|
1300
1779
|
padding: var(--spacer-1) 0;
|
|
1301
1780
|
display: flex;
|
|
1302
1781
|
min-height: calc(1rem + var(--spacer-1)*2);
|
|
1303
1782
|
align-items: center;
|
|
1304
1783
|
}
|
|
1305
|
-
|
|
1784
|
+
|
|
1785
|
+
&[direction=horizontal] {
|
|
1306
1786
|
gap: var(--spacer-2);
|
|
1307
1787
|
align-items: flex-start;
|
|
1308
1788
|
}
|
|
1309
1789
|
}
|
|
1310
1790
|
|
|
1311
|
-
fig-spinner{
|
|
1791
|
+
fig-spinner {
|
|
1312
1792
|
width: 1rem;
|
|
1313
1793
|
height: 1rem;
|
|
1314
1794
|
display: inline-flex;
|
|
@@ -1316,11 +1796,13 @@ fig-spinner{
|
|
|
1316
1796
|
clip-path: path("M15.9995 7.86066C16.0271 9.44267 15.585 10.9973 14.729 12.3281C13.8731 13.6588 12.6417 14.7058 11.1907 15.3368C9.73968 15.9677 8.13415 16.1542 6.57716 15.8726C5.02016 15.591 3.58161 14.8541 2.44344 13.755C1.30526 12.6559 0.518574 11.2439 0.182856 9.69769C-0.152862 8.15147 -0.0225313 6.54042 0.557366 5.06826C1.13726 3.59611 2.14068 2.32898 3.44073 1.4271C4.74079 0.525221 6.27908 0.0291073 7.86109 0.00149397L7.87922 1.04037C6.50268 1.06439 5.16418 1.49607 4.03298 2.28081C2.90177 3.06556 2.02868 4.16812 1.5241 5.44907C1.01952 6.73002 0.906114 8.13183 1.19823 9.47724C1.49034 10.8226 2.17486 12.0512 3.16521 13.0076C4.15556 13.9639 5.40727 14.6052 6.76204 14.8502C8.11682 15.0951 9.51382 14.9329 10.7764 14.3839C12.0389 13.8349 13.1104 12.9239 13.8552 11.766C14.5999 10.6081 14.9846 9.25533 14.9606 7.87879L15.9995 7.86066Z");
|
|
1317
1797
|
animation: fig-spinner-spin 1.0s linear infinite;
|
|
1318
1798
|
}
|
|
1799
|
+
|
|
1319
1800
|
@keyframes fig-spinner-spin {
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1801
|
+
from {
|
|
1802
|
+
transform: rotate(0deg);
|
|
1803
|
+
}
|
|
1804
|
+
|
|
1805
|
+
to {
|
|
1806
|
+
transform: rotate(360deg);
|
|
1807
|
+
}
|
|
1326
1808
|
}
|