@rogieking/figui3 3.0.2 → 3.1.0

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.
Files changed (10) hide show
  1. package/README.md +19 -1
  2. package/dist/.min-css/fig-y6bay2cg.css +2 -0
  3. package/dist/.min-css/fig.js +1 -0
  4. package/dist/base.css +99 -0
  5. package/dist/components.css +3978 -0
  6. package/dist/fig.css +2 -0
  7. package/dist/fig.js +72 -69
  8. package/dist/fig.min.js +399 -0
  9. package/fig.js +187 -26
  10. package/package.json +4 -1
package/dist/components.css ADDED
@@ -0,0 +1,3978 @@
1
+ :root {
2
+ color-scheme: light dark;
3
+
4
+ /* Background Colors */
5
+ --figma-color-bg: light-dark(#ffffff, #2c2c2c);
6
+ --figma-color-bg-brand: light-dark(#0d99ff, #0c8ce9);
7
+ --figma-color-bg-menu: #1e1e1e;
8
+ --figma-color-bg-menu-hover: #0c8ce9;
9
+ --figma-color-bg-brand-hover: light-dark(#007be5, #0a6dc2);
10
+ --figma-color-bg-brand-pressed: light-dark(#0768cf, #105cad);
11
+ --figma-color-bg-brand-secondary: light-dark(#0768cf, #105cad);
12
+ --figma-color-bg-brand-tertiary: light-dark(#e5f4ff, #394360);
13
+ --figma-color-bg-component: light-dark(#9747ff, #8a38f5);
14
+ --figma-color-bg-component-hover: light-dark(#8638e5, #7a2ed6);
15
+ --figma-color-bg-component-pressed: light-dark(#8638e5, #7a2ed6);
16
+ --figma-color-bg-component-secondary: light-dark(#7c2bda, #652ca8);
17
+ --figma-color-bg-component-tertiary: light-dark(#f1e5ff, #473956);
18
+ --figma-color-bg-danger: light-dark(#f24822, #e03e1a);
19
+ --figma-color-bg-danger-hover: light-dark(#dc3412, #c4381c);
20
+ --figma-color-bg-danger-pressed: light-dark(#dc3412, #c4381c);
21
+ --figma-color-bg-danger-secondary: light-dark(#bd2915, #963323);
22
+ --figma-color-bg-danger-tertiary: light-dark(#ffe2e0, #60332a);
23
+ --figma-color-bg-disabled: light-dark(#d9d9d9, #757575);
24
+ --figma-color-bg-disabled-secondary: #b3b3b3;
25
+ --figma-color-bg-hover: light-dark(#f5f5f5, #383838);
26
+ --figma-color-bg-inverse: light-dark(#2c2c2c, #ffffff);
27
+ --figma-color-bg-onselected: light-dark(#bde3ff, #667799);
28
+ --figma-color-bg-onselected-hover: light-dark(#bde3ff, #667799);
29
+ --figma-color-bg-onselected-pressed: light-dark(#bde3ff, #667799);
30
+ --figma-color-bg-pressed: light-dark(#f5f5f5, #383838);
31
+ --figma-color-bg-secondary: light-dark(#f5f5f5, #383838);
32
+ --figma-color-bg-selected: light-dark(#e5f4ff, #4a5878);
33
+ --figma-color-bg-selected-hover: light-dark(#bde3ff, #536383);
34
+ --figma-color-bg-selected-pressed: light-dark(#bde3ff, #536383);
35
+ --figma-color-bg-selected-secondary: light-dark(#f2f9ff, #394360);
36
+ --figma-color-bg-selected-strong: light-dark(#0d99ff, #0c8ce9);
37
+ --figma-color-bg-selected-tertiary: light-dark(#f2f9ff, #394360);
38
+ --figma-color-bg-success: light-dark(#14ae5c, #198f51);
39
+ --figma-color-bg-success-hover: light-dark(#009951, #078348);
40
+ --figma-color-bg-success-pressed: light-dark(#009951, #078348);
41
+ --figma-color-bg-success-secondary: light-dark(#008043, #0a5c35);
42
+ --figma-color-bg-success-tertiary: light-dark(#cff7d3, #476656);
43
+ --figma-color-bg-tertiary: light-dark(#e6e6e6, #444444);
44
+ --figma-color-bg-warning: light-dark(#ffcd29, #f3c11b);
45
+ --figma-color-bg-warning-hover: light-dark(#ffc21a, #f2b50d);
46
+ --figma-color-bg-warning-pressed: light-dark(#ffc21a, #f2b50d);
47
+ --figma-color-bg-warning-secondary: light-dark(#fab815, #e4a711);
48
+ --figma-color-bg-warning-tertiary: light-dark(#fff1c2, #5c4100);
49
+ --figma-color-bg-switch: light-dark(#e6e6e6, #444444);
50
+
51
+ /* Border Colors */
52
+ --figma-color-border: light-dark(#e6e6e6, #444444);
53
+ --figma-color-border-brand: light-dark(#bde3ff, #105cad);
54
+ --figma-color-border-brand-strong: light-dark(#007be5, #7cc4f8);
55
+ --figma-color-border-component: light-dark(#e4ccff, #652ca8);
56
+ --figma-color-border-component-hover: light-dark(#9747ff, #8a38f5);
57
+ --figma-color-border-component-strong: light-dark(#8638e5, #d6b6fb);
58
+ --figma-color-border-danger: light-dark(#ffc7c2, #963323);
59
+ --figma-color-border-danger-strong: light-dark(#dc3412, #fca397);
60
+ --figma-color-border-disabled: light-dark(#e6e6e6, #444444);
61
+ --figma-color-border-disabled-strong: light-dark(#0000004d, #ffffff66);
62
+ --figma-color-border-menu: #383838;
63
+ --figma-color-border-onbrand: light-dark(#007be5, #0a6dc2);
64
+ --figma-color-border-onbrand-strong: #ffffff;
65
+ --figma-color-border-oncomponent: light-dark(#8638e5, #7a2ed6);
66
+ --figma-color-border-oncomponent-strong: #ffffff;
67
+ --figma-color-border-ondanger: light-dark(#dc3412, #c4381c);
68
+ --figma-color-border-ondanger-strong: #ffffff;
69
+ --figma-color-border-onselected: light-dark(#bde3ff, #667799);
70
+ --figma-color-border-onselected-strong: light-dark(#000000e5, #ffffffe5);
71
+ --figma-color-border-onsuccess: light-dark(#009951, #078348);
72
+ --figma-color-border-onsuccess-strong: #ffffff;
73
+ --figma-color-border-onwarning: light-dark(#fab815, #e4a711);
74
+ --figma-color-border-onwarning-strong: #000000e5;
75
+ --figma-color-border-selected: light-dark(#0d99ff, #0c8ce9);
76
+ --figma-color-border-selected-strong: light-dark(#007be5, #7cc4f8);
77
+ --figma-color-border-strong: light-dark(#2c2c2c, #ffffffe5);
78
+ --figma-color-border-success: light-dark(#aff4c6, #0a5c35);
79
+ --figma-color-border-success-strong: light-dark(#009951, #79d297);
80
+ --figma-color-border-warning: light-dark(#ffe8a3, #925711);
81
+ --figma-color-border-warning-strong: light-dark(#b86200, #f7d15f);
82
+
83
+ /* Icon Colors */
84
+ --figma-color-icon: light-dark(#000000e5, #ffffff);
85
+ --figma-color-icon-brand: light-dark(#007be5, #7cc4f8);
86
+ --figma-color-icon-brand-pressed: light-dark(#0768cf, #0c8ce9);
87
+ --figma-color-icon-brand-secondary: light-dark(#80caff, #0a6dc2);
88
+ --figma-color-icon-brand-tertiary: light-dark(#bde3ff, #394360);
89
+ --figma-color-icon-component: light-dark(#8638e5, #d1a8ff);
90
+ --figma-color-icon-component-pressed: light-dark(#7c2bda, #d6b6fb);
91
+ --figma-color-icon-component-secondary: light-dark(#c5b2dc, #7f699b);
92
+ --figma-color-icon-component-tertiary: light-dark(#c5b2dc, #7f699b);
93
+ --figma-color-icon-danger: light-dark(#f24822, #e03e1a);
94
+ --figma-color-icon-danger-hover: light-dark(#bd2915, #fbbcb6);
95
+ --figma-color-icon-danger-pressed: light-dark(#bd2915, #fbbcb6);
96
+ --figma-color-icon-danger-secondary: light-dark(#f24822, #e03e1a);
97
+ --figma-color-icon-danger-secondary-hover: light-dark(#f24822, #e03e1a);
98
+ --figma-color-icon-danger-tertiary: light-dark(#f24822, #e03e1a);
99
+ --figma-color-icon-disabled: light-dark(#0000004d, #ffffff66);
100
+ --figma-color-icon-hover: light-dark(#000000e5, #ffffff);
101
+ --figma-color-icon-onbrand: #ffffff;
102
+ --figma-color-icon-onbrand-secondary: #ffffffcc;
103
+ --figma-color-icon-onbrand-tertiary: #ffffff66;
104
+ --figma-color-icon-oncomponent: #ffffff;
105
+ --figma-color-icon-oncomponent-secondary: #ffffffcc;
106
+ --figma-color-icon-oncomponent-tertiary: #ffffff66;
107
+ --figma-color-icon-ondanger: #ffffff;
108
+ --figma-color-icon-ondanger-secondary: #ffffffcc;
109
+ --figma-color-icon-ondanger-tertiary: #ffffff66;
110
+ --figma-color-icon-ondisabled: light-dark(#ffffff, #2c2c2c);
111
+ --figma-color-icon-oninverse: light-dark(#ffffffe5, #000000e5);
112
+ --figma-color-icon-onselected: light-dark(#000000e5, #ffffff);
113
+ --figma-color-icon-onselected-secondary: light-dark(#00000080, #ffffffb2);
114
+ --figma-color-icon-onselected-strong: #ffffff;
115
+ --figma-color-icon-onselected-tertiary: light-dark(#0000004d, #ffffff66);
116
+ --figma-color-icon-onsuccess: #ffffff;
117
+ --figma-color-icon-onsuccess-secondary: #ffffffcc;
118
+ --figma-color-icon-onsuccess-tertiary: #ffffff66;
119
+ --figma-color-icon-onwarning: #000000e5;
120
+ --figma-color-icon-onwarning-secondary: #00000080;
121
+ --figma-color-icon-onwarning-tertiary: #0000004d;
122
+ --figma-color-icon-pressed: light-dark(#007be5, #0a6dc2);
123
+ --figma-color-icon-secondary: light-dark(#00000080, #ffffffb2);
124
+ --figma-color-icon-secondary-hover: light-dark(#000000e5, #ffffff);
125
+ --figma-color-icon-selected: light-dark(#007be5, #7cc4f8);
126
+ --figma-color-icon-selected-secondary: light-dark(#007be5, #7cc4f8);
127
+ --figma-color-icon-selected-tertiary: light-dark(#007be5, #7cc4f8);
128
+ --figma-color-icon-success: light-dark(#14ae5c, #198f51);
129
+ --figma-color-icon-success-pressed: light-dark(#008043, #a1e8b9);
130
+ --figma-color-icon-success-secondary: light-dark(#14ae5c, #198f51);
131
+ --figma-color-icon-success-tertiary: light-dark(#14ae5c, #198f51);
132
+ --figma-color-icon-tertiary: light-dark(#0000004d, #ffffff66);
133
+ --figma-color-icon-tertiary-hover: light-dark(#000000e5, #ffffff);
134
+ --figma-color-icon-warning: light-dark(#ffcd29, #f3c11b);
135
+ --figma-color-icon-warning-pressed: light-dark(#b86200, #f7d15f);
136
+ --figma-color-icon-warning-secondary: light-dark(#ffcd29, #f3c11b);
137
+ --figma-color-icon-warning-tertiary: light-dark(#ffcd29, #f3c11b);
138
+
139
+ /* Text Colors */
140
+ --figma-color-text: light-dark(#000000e5, #ffffff);
141
+ --figma-color-text-brand: light-dark(#007be5, #7cc4f8);
142
+ --figma-color-text-brand-secondary: light-dark(#007be5, #7cc4f8);
143
+ --figma-color-text-brand-tertiary: light-dark(#007be5, #7cc4f8);
144
+ --figma-color-text-component: light-dark(#8638e5, #d1a8ff);
145
+ --figma-color-text-component-pressed: light-dark(#7c2bda, #d6b6fb);
146
+ --figma-color-text-component-secondary: light-dark(#c5b2dc, #7f699b);
147
+ --figma-color-text-component-tertiary: light-dark(#c5b2dc, #7f699b);
148
+ --figma-color-text-danger: light-dark(#dc3412, #fca397);
149
+ --figma-color-text-danger-secondary: light-dark(#dc3412, #fca397);
150
+ --figma-color-text-danger-tertiary: light-dark(#dc3412, #fca397);
151
+ --figma-color-text-disabled: light-dark(#0000004d, #ffffff66);
152
+ --figma-color-text-hover: light-dark(#000000e5, #ffffff);
153
+ --figma-color-text-onbrand: #ffffff;
154
+ --figma-color-text-onbrand-secondary: #ffffffcc;
155
+ --figma-color-text-onbrand-tertiary: #ffffff66;
156
+ --figma-color-text-oncomponent: #ffffff;
157
+ --figma-color-text-oncomponent-secondary: #ffffffcc;
158
+ --figma-color-text-oncomponent-tertiary: #ffffff66;
159
+ --figma-color-text-ondanger: #ffffff;
160
+ --figma-color-text-ondanger-secondary: #ffffffcc;
161
+ --figma-color-text-ondanger-tertiary: #ffffff66;
162
+ --figma-color-text-ondisabled: light-dark(#ffffff, #2c2c2c);
163
+ --figma-color-text-oninverse: light-dark(#ffffffe5, #000000e5);
164
+ --figma-color-text-onselected: light-dark(#000000e5, #ffffffe5);
165
+ --figma-color-text-onselected-secondary: light-dark(#00000080, #ffffffb2);
166
+ --figma-color-text-onselected-strong: #ffffff;
167
+ --figma-color-text-onselected-tertiary: light-dark(#0000004d, #ffffff66);
168
+ --figma-color-text-onsuccess: #ffffff;
169
+ --figma-color-text-onsuccess-secondary: #ffffffcc;
170
+ --figma-color-text-onsuccess-tertiary: #ffffff66;
171
+ --figma-color-text-onwarning: #000000e5;
172
+ --figma-color-text-onwarning-secondary: #00000080;
173
+ --figma-color-text-onwarning-tertiary: #0000004d;
174
+ --figma-color-text-secondary: light-dark(#00000080, #ffffffb2);
175
+ --figma-color-text-secondary-hover: light-dark(#000000e5, #ffffff);
176
+ --figma-color-text-selection: rgba(13, 153, 255, 0.4);
177
+ --figma-color-text-selected: light-dark(#007be5, #7cc4f8);
178
+ --figma-color-text-selected-secondary: light-dark(#007be5, #7cc4f8);
179
+ --figma-color-text-selected-tertiary: light-dark(#007be5, #7cc4f8);
180
+ --figma-color-text-success: light-dark(#009951, #79d297);
181
+ --figma-color-text-success-secondary: light-dark(#009951, #79d297);
182
+ --figma-color-text-success-tertiary: light-dark(#009951, #79d297);
183
+ --figma-color-text-tertiary: light-dark(#0000004d, #ffffff66);
184
+ --figma-color-text-tertiary-hover: light-dark(#000000e5, #ffffff);
185
+ --figma-color-text-warning: light-dark(#b86200, #f7d15f);
186
+ --figma-color-text-warning-secondary: light-dark(#b86200, #f7d15f);
187
+ --figma-color-text-warning-tertiary: light-dark(#b86200, #f7d15f);
188
+ --figma-color-text-menu: #ffffff;
189
+ --figma-color-text-menu-secondary: rgba(255, 255, 255, 0.7);
190
+ --figma-color-text-menu-tertiary: rgba(255, 255, 255, 0.4);
191
+ }
192
+
193
+ :root {
194
+ /* Typography & Sizing */
195
+ --font-size: 16px;
196
+ --font-family:
197
+ "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next, avenir,
198
+ segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial,
199
+ sans-serif;
200
+ --body-medium-fontSize: 0.6875rem;
201
+ --body-large-fontSize: 0.8125rem;
202
+ --body-letter-spacing: 0.055px;
203
+ --body-medium-strong-fontWeight: 550;
204
+ --body-large-strong-fontWeight: 500;
205
+ --body-medium-fontWeight: 450;
206
+
207
+ /* Spacing */
208
+ --spacer-1: 0.25rem;
209
+ --spacer-2: 0.5rem;
210
+ --spacer-2-5: 0.75rem;
211
+ --spacer-3: 1rem;
212
+ --spacer-4: 1.5rem;
213
+ --spacer-5: 2rem;
214
+ --spacer-6: 2.5rem;
215
+
216
+ /* Radii */
217
+ --radius-none: 0;
218
+ --radius-small: 0.125rem;
219
+ --radius-medium: 0.3125rem;
220
+ --radius-large: 0.8125rem;
221
+ --figma-radius-none: var(--radius-none);
222
+ --figma-radius-small: var(--radius-small);
223
+ --figma-radius-medium: var(--radius-medium);
224
+ --figma-radius-large: var(--radius-large);
225
+
226
+ /* Transitions */
227
+ --input-transition: all 0.08s ease-out;
228
+
229
+ /* Misc UI */
230
+ --popover-min-width: 15rem;
231
+ --handle-color: #fff;
232
+ --bg-selected: #f5f5f5;
233
+ --bg-selected-active: #e5f4ff;
234
+ --bg-tooltip: #1e1e1e;
235
+ --color-tooltip: #ffffff;
236
+
237
+ /* Transparent Backgrounds - use light-dark() */
238
+ --figma-color-bordertranslucent: light-dark(
239
+ rgba(0, 0, 0, 0.1),
240
+ rgba(255, 255, 255, 0.1)
241
+ );
242
+ --figma-color-bg-transparent: light-dark(
243
+ rgba(0, 0, 0, 0.05),
244
+ rgba(255, 255, 255, 0.05)
245
+ );
246
+ --figma-color-bg-transparent-hover: light-dark(
247
+ rgba(0, 0, 0, 0.05),
248
+ rgba(255, 255, 255, 0.05)
249
+ );
250
+ --figma-color-bg-transparent-pressed: light-dark(
251
+ rgba(0, 0, 0, 0.1),
252
+ rgba(255, 255, 255, 0.1)
253
+ );
254
+ --figma-color-bg-transparent-secondary: light-dark(
255
+ rgba(0, 0, 0, 0.2),
256
+ rgba(255, 255, 255, 0.2)
257
+ );
258
+
259
+ /* Gradients */
260
+ --checkerboard: repeating-conic-gradient(
261
+ rgba(0, 0, 0, 0.1) 0% 25%,
262
+ rgba(255, 255, 255, 0.1) 0% 50%
263
+ )
264
+ 0 0 / 0.66666rem 0.66666rem;
265
+ --bg-hue: linear-gradient(
266
+ 90deg,
267
+ rgba(255, 0, 0, 1),
268
+ rgba(255, 48, 0, 1),
269
+ rgba(255, 96, 0, 1),
270
+ rgba(255, 143, 0, 1),
271
+ rgba(255, 191, 0, 1),
272
+ rgba(255, 239, 0, 1),
273
+ rgba(223, 255, 0, 1),
274
+ rgba(175, 255, 0, 1),
275
+ rgba(128, 255, 0, 1),
276
+ rgba(80, 255, 0, 1),
277
+ rgba(32, 255, 0, 1),
278
+ rgba(0, 255, 16, 1),
279
+ rgba(0, 255, 64, 1),
280
+ rgba(0, 255, 112, 1),
281
+ rgba(0, 255, 159, 1),
282
+ rgba(0, 255, 207, 1),
283
+ rgba(0, 255, 255, 1),
284
+ rgba(0, 207, 255, 1),
285
+ rgba(0, 159, 255, 1),
286
+ rgba(0, 112, 255, 1),
287
+ rgba(0, 64, 255, 1),
288
+ rgba(0, 16, 255, 1),
289
+ rgba(32, 0, 255, 1),
290
+ rgba(80, 0, 255, 1),
291
+ rgba(127, 0, 255, 1),
292
+ rgba(175, 0, 255, 1),
293
+ rgba(223, 0, 255, 1),
294
+ rgba(255, 0, 239, 1),
295
+ rgba(255, 0, 191, 1),
296
+ rgba(255, 0, 143, 1),
297
+ rgba(255, 0, 96, 1),
298
+ rgba(255, 0, 48, 1)
299
+ );
300
+
301
+ /* Icons - colorless shapes for use with mask-image */
302
+ --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='black' stroke-linecap='round'/%3E%3C/svg%3E%0A");
303
+ --icon-checkmark: 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='M11.084 4.22266C11.2372 3.99292 11.5476 3.93084 11.7773 4.08398C12.0071 4.23716 12.0692 4.54758 11.916 4.77734L7.91602 10.7773C7.83292 10.902 7.6979 10.9833 7.54883 10.998C7.39993 11.0126 7.25229 10.9593 7.14648 10.8535L4.14648 7.85352C3.95126 7.65825 3.95123 7.34173 4.14648 7.14648C4.34174 6.95124 4.65825 6.95126 4.85352 7.14648L7.42188 9.71484L11.084 4.22266Z' fill='white'/%3E%3C/svg%3E%0A");
304
+ --icon-steppers: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.7245 6.08191C11.9186 5.95386 12.1826 5.97562 12.3534 6.14637L14.3534 8.14637L14.4179 8.22449C14.546 8.41852 14.5242 8.68253 14.3534 8.8534C14.1826 9.02426 13.9186 9.04601 13.7245 8.91785L13.6464 8.8534L11.9999 7.20691L10.3534 8.8534C10.1582 9.04866 9.84166 9.04866 9.6464 8.8534C9.45123 8.65813 9.45117 8.3416 9.6464 8.14637L11.6464 6.14637L11.7245 6.08191Z' fill='black'/%3E%3Cpath d='M13.7248 15.0822C13.9189 14.9541 14.1829 14.9758 14.3537 15.1467C14.5246 15.3176 14.5463 15.5815 14.4182 15.7756L14.3537 15.8537L12.3537 17.8537C12.1829 18.0246 11.9189 18.0463 11.7248 17.9182L11.6467 17.8537L9.64669 15.8537L9.58224 15.7756C9.45407 15.5815 9.47583 15.3176 9.64669 15.1467C9.81756 14.9758 10.0815 14.9541 10.2756 15.0822L10.3537 15.1467L12.0002 16.7932L13.6467 15.1467L13.7248 15.0822Z' fill='black' /%3E%3C/svg%3E%0A");
305
+ --icon-eyedropper: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M15.1592 5.65801C16.0376 4.78045 17.4621 4.78055 18.3408 5.65899L18.4951 5.82989C19.1671 6.65442 19.168 7.84476 18.4951 8.66973L18.3408 8.84063L16.6455 10.533C17.1104 11.083 17.1181 11.889 16.6641 12.4461L16.5605 12.5604C16.0111 13.1097 15.1425 13.1428 14.5537 12.6629L14.5342 12.6453L10.0908 17.0916C9.6188 17.5633 8.98876 17.7764 8.375 17.742L7.56055 18.5574C6.97441 19.1432 6.02451 19.1422 5.43945 18.5584V18.5574C4.8538 17.9718 4.85405 17.0221 5.43945 16.4363L6.25586 15.618C6.22412 15.0058 6.44026 14.3794 6.90918 13.91L11.3516 9.46367C10.856 8.87434 10.885 7.99381 11.4395 7.43926L11.5537 7.33574C12.1094 6.88283 12.9136 6.88854 13.4639 7.35137L15.1592 5.65801ZM7.61621 14.617C7.33755 14.8961 7.21782 15.2747 7.25781 15.6385C7.27925 15.8351 7.24419 16.0445 7.10449 16.1844L6.14648 17.1434C5.9516 17.3387 5.95135 17.6553 6.14648 17.8504C6.34167 18.0449 6.65842 18.0451 6.85352 17.8504L7.80859 16.8943C7.94931 16.7536 8.16065 16.7184 8.3584 16.741C8.72329 16.7828 9.10374 16.6643 9.38379 16.3846L13.8223 11.9432L12.0547 10.1756L7.61621 14.617ZM17.6338 6.36602C17.1458 5.87828 16.3544 5.8783 15.8662 6.36602L14.084 8.14629L14.0186 8.20586C13.6767 8.48476 13.1722 8.46484 12.8535 8.14629C12.6583 7.95131 12.3417 7.95119 12.1465 8.14629C11.9514 8.34148 11.9515 8.65808 12.1465 8.85332L15.1465 11.8533C15.3175 12.024 15.5814 12.0451 15.7754 11.9168L15.8535 11.8533C16.0486 11.6582 16.0484 11.3416 15.8535 11.1463V11.1453C15.8524 11.1443 15.8507 11.1434 15.8496 11.1424C15.5128 10.8013 15.514 10.2513 15.8535 9.91192L17.6338 8.1336C18.1216 7.6457 18.1213 6.85425 17.6338 6.36602Z' fill='black' fill-opacity='0.9'/%3E%3C/svg%3E");
306
+ --icon-add: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12 6C12.2761 6 12.5 6.22386 12.5 6.5V11.5H17.5C17.7761 11.5 18 11.7239 18 12C18 12.2761 17.7761 12.5 17.5 12.5H12.5V17.5C12.5 17.7761 12.2761 18 12 18C11.7239 18 11.5 17.7761 11.5 17.5V12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H11.5V6.5C11.5 6.22386 11.7239 6 12 6Z' fill='currentColor'/%3E%3C/svg%3E");
307
+ --icon-minus: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 12C18 12.2761 17.7761 12.5 17.5 12.5H6.5C6.22386 12.5 6 12.2761 6 12C6 11.7239 6.22386 11.5 6.5 11.5H17.5C17.7761 11.5 18 11.7239 18 12Z' fill='currentColor'/%3E%3C/svg%3E");
308
+ --icon-back: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.8536 7.14645C14.0488 7.34171 14.0488 7.65829 13.8536 7.85355L9.70711 12L13.8536 16.1464C14.0488 16.3417 14.0488 16.6583 13.8536 16.8536C13.6583 17.0488 13.3417 17.0488 13.1464 16.8536L8.64645 12.3535C8.55268 12.2598 8.5 12.1326 8.5 12C8.5 11.8674 8.55268 11.7402 8.64645 11.6464L13.1464 7.14645C13.3417 6.95118 13.6583 6.95118 13.8536 7.14645Z' fill='currentColor'/%3E%3C/svg%3E");
309
+ --icon-arrow-left: 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='M9.5 4.5L5.5 8L9.5 11.5' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
310
+ --icon-forward: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.1464 16.8536C9.95118 16.6583 9.95118 16.3417 10.1464 16.1464L14.2929 12L10.1464 7.85355C9.95118 7.65829 9.95118 7.34171 10.1464 7.14645C10.3417 6.95118 10.6583 6.95118 10.8536 7.14645L15.3536 11.6464C15.5488 11.8417 15.5488 12.1583 15.3536 12.3536L10.8536 16.8536C10.6583 17.0488 10.3417 17.0488 10.1464 16.8536Z' fill='currentColor'/%3E%3C/svg%3E");
311
+ --icon-close: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.2242 7.08154C16.4182 6.95348 16.6823 6.97551 16.8531 7.146C17.024 7.31683 17.0457 7.58084 16.9176 7.7749L16.8531 7.85303L12.7067 11.9995L16.8531 16.146L16.9176 16.2241C17.0457 16.4182 17.024 16.6822 16.8531 16.853C16.6823 17.0239 16.4183 17.0456 16.2242 16.9175L16.1461 16.853L11.9996 12.7065L7.85315 16.853C7.65789 17.0483 7.34138 17.0483 7.14612 16.853C6.95128 16.6577 6.95101 16.3411 7.14612 16.146L11.2926 11.9995L7.14612 7.85303L7.08167 7.7749C6.95389 7.58087 6.97541 7.3167 7.14612 7.146C7.31683 6.97532 7.58101 6.95376 7.77502 7.08154L7.85315 7.146L11.9996 11.2925L16.1461 7.146L16.2242 7.08154Z' fill='currentColor'/%3E%3C/svg%3E");
312
+ --icon-rotate: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.2325 6.47442C11.2088 5.49811 12.7917 5.49811 13.768 6.47442L15.2931 7.99955H14.0002C13.7241 7.99955 13.5002 8.2234 13.5002 8.49955C13.5002 8.77569 13.7241 8.99955 14.0002 8.99955H16.5002C16.7764 8.99955 17.0002 8.77569 17.0002 8.49955V5.99955C17.0002 5.7234 16.7764 5.49955 16.5002 5.49955C16.2241 5.49955 16.0002 5.7234 16.0002 5.99955V7.29244L14.4751 5.76731C13.1083 4.40048 10.8922 4.40048 9.52537 5.76731L7.14669 8.14599C6.95143 8.34126 6.95143 8.65784 7.14669 8.8531C7.34195 9.04836 7.65854 9.04836 7.8538 8.8531L10.2325 6.47442ZM13.0609 9.64599C12.4751 9.06021 11.5254 9.06021 10.9396 9.64599L7.64669 12.9389C7.06091 13.5247 7.0609 14.4744 7.64669 15.0602L10.9396 18.3531C11.5254 18.9389 12.4751 18.9389 13.0609 18.3531L16.3538 15.0602C16.9396 14.4744 16.9396 13.5247 16.3538 12.9389L13.0609 9.64599ZM11.6467 10.3531C11.842 10.1578 12.1585 10.1578 12.3538 10.3531L15.6467 13.646C15.842 13.8413 15.842 14.1578 15.6467 14.3531L12.3538 17.646C12.1585 17.8413 11.842 17.8413 11.6467 17.646L8.3538 14.3531C8.15854 14.1578 8.15854 13.8413 8.3538 13.646L11.6467 10.3531Z' fill='currentColor'/%3E%3C/svg%3E");
313
+ --icon-swap: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M8.35355 6.35355C8.54882 6.15829 8.54882 5.84171 8.35355 5.64645C8.15829 5.45118 7.84171 5.45118 7.64645 5.64645L5.14645 8.14645C4.95118 8.34171 4.95118 8.65829 5.14645 8.85355L7.64645 11.3536C7.84171 11.5488 8.15829 11.5488 8.35355 11.3536C8.54882 11.1583 8.54882 10.8417 8.35355 10.6464L6.70711 9H18.5C18.7761 9 19 8.77614 19 8.5C19 8.22386 18.7761 8 18.5 8H6.70711L8.35355 6.35355ZM15.6464 13.3536C15.4512 13.1583 15.4512 12.8417 15.6464 12.6464C15.8417 12.4512 16.1583 12.4512 16.3536 12.6464L18.8536 15.1464C19.0488 15.3417 19.0488 15.6583 18.8536 15.8536L16.3536 18.3536C16.1583 18.5488 15.8417 18.5488 15.6464 18.3536C15.4512 18.1583 15.4512 17.8417 15.6464 17.6464L17.2929 16H5.5C5.22386 16 5 15.7761 5 15.5C5 15.2239 5.22386 15 5.5 15H17.2929L15.6464 13.3536Z' fill='currentColor'/%3E%3C/svg%3E");
314
+
315
+ /* Elevations — light-dark() handles theme switching inline */
316
+ --figma-elevation-100:
317
+ 0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
318
+ inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1)),
319
+ 0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
320
+
321
+ --figma-elevation-200:
322
+ 0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.18), transparent),
323
+ 0px 3px 8px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.35)),
324
+ 0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)),
325
+ inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
326
+ inset 0px 0px 0.5px 0px light-dark(transparent, rgba(255, 255, 255, 0.3));
327
+
328
+ --elevation-100-canvas:
329
+ 0 0 0.5px 0 light-dark(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.5)),
330
+ 0 0.5px 0 0 light-dark(transparent, rgba(255, 255, 255, 0.1)) inset,
331
+ 0 0 0.5px 0 light-dark(transparent, rgba(255, 255, 255, 0.3)) inset,
332
+ 0 1px 3px 0 light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.4));
333
+
334
+ --figma-elevation-400-menu-panel:
335
+ 0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.12), transparent),
336
+ 0px 10px 16px 0px light-dark(rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.35)),
337
+ 0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.35)),
338
+ inset 0px 0.5px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.08)),
339
+ inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.075));
340
+
341
+ --figma-elevation-500-modal-window:
342
+ 0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.08), transparent),
343
+ 0px 10px 24px 0px light-dark(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.45)),
344
+ 0px 2px 5px 0px light-dark(rgba(0, 0, 0, 0.15), transparent),
345
+ 0px 3px 5px 0px light-dark(transparent, rgba(0, 0, 0, 0.35)),
346
+ inset 0px 0.75px 0px 0px light-dark(transparent, rgba(255, 255, 255, 0.1));
347
+
348
+ --handle-shadow:
349
+ 0px 0px 0px 0.5px rgba(0, 0, 0, 0.1),
350
+ 0px 0px 0.5px 0px light-dark(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0.1)),
351
+ 0px 1px 3px 0px light-dark(rgba(0, 0, 0, 0.15), transparent);
352
+ }
353
+
354
+ button,
355
+ select,
356
+ input,
357
+ fieldset {
358
+ display: inline-flex;
359
+ align-items: center;
360
+ margin: 0;
361
+ gap: 0.25rem;
362
+ font: inherit;
363
+ line-height: 1rem;
364
+ }
365
+
366
+ textarea,
367
+ input[type="text"],
368
+ input[type="number"],
369
+ input[type="password"],
370
+ .input {
371
+ background-color: var(--figma-color-bg-secondary);
372
+ border: 0;
373
+ border-radius: var(--radius-medium);
374
+ padding: var(--spacer-1) var(--spacer-2);
375
+ line-height: 1rem !important;
376
+ box-sizing: content-box;
377
+ resize: none;
378
+ min-width: 0;
379
+ font: inherit;
380
+ display: flex;
381
+ color: inherit;
382
+ appearance: textfield;
383
+ -moz-appearance: textfield;
384
+
385
+ &:focus {
386
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
387
+ outline: 0;
388
+ }
389
+ &::-webkit-outer-spin-button,
390
+ &::-webkit-inner-spin-button {
391
+ display: none;
392
+ color-scheme: inherit;
393
+ -webkit-appearance: none;
394
+ margin: 0;
395
+ }
396
+ }
397
+
398
+ fig-input-text,
399
+ fig-input-number {
400
+ &:has([slot="append"]) input[type="number"] {
401
+ &::-webkit-outer-spin-button,
402
+ &::-webkit-inner-spin-button {
403
+ display: none;
404
+ color-scheme: inherit;
405
+ margin: 0;
406
+ opacity: 0;
407
+ }
408
+ }
409
+ &[steppers="true"] {
410
+ input[type="number"]::-webkit-inner-spin-button {
411
+ display: block;
412
+ opacity: 1;
413
+ height: 1.5rem;
414
+ width: 1.5rem;
415
+ margin-right: calc(var(--spacer-2) * -1);
416
+ background-color: var(--figma-color-text-secondary);
417
+ mask-image: var(--icon-steppers);
418
+ }
419
+ }
420
+ }
421
+
422
+ /* Textarea */
423
+ textarea {
424
+ min-height: 2rem;
425
+ display: block;
426
+ width: 100%;
427
+ box-sizing: border-box;
428
+ }
429
+
430
+ /* Dropdown */
431
+ select,
432
+ input[type="text"][list] {
433
+ height: var(--spacer-4);
434
+ padding: 0 calc(var(--spacer-2) - 1px);
435
+ border-radius: var(--radius-medium);
436
+ display: flex;
437
+ appearance: none;
438
+ align-items: center;
439
+ flex: 1 0 0;
440
+ border: 0;
441
+ color: var(--figma-color-text);
442
+ background-color: var(--figma-color-bg);
443
+ box-shadow: inset 0 0 0 1px var(--figma-color-border);
444
+ accent-color: var(--figma-color-bg-brand);
445
+ overflow: hidden;
446
+ white-space: nowrap;
447
+ text-overflow: ellipsis;
448
+
449
+ &:focus {
450
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
451
+ outline: 0;
452
+ }
453
+
454
+ &::-webkit-calendar-picker-indicator {
455
+ color-scheme: inherit;
456
+ opacity: 0;
457
+ }
458
+ }
459
+
460
+ @supports (appearance: base-select) {
461
+ fig-dropdown[experimental~="modern"] {
462
+ &[type="dropdown"] {
463
+ select:before {
464
+ content: attr(aria-label);
465
+ }
466
+ option::checkmark {
467
+ display: none;
468
+ }
469
+ option {
470
+ padding-left: var(--spacer-3);
471
+ }
472
+ }
473
+ select {
474
+ --option-height: 1.5rem;
475
+ --max-width: 20rem;
476
+ @media (hover) and (pointer: fine) {
477
+ &,
478
+ &::picker(select) {
479
+ appearance: base-select;
480
+ }
481
+ }
482
+
483
+ padding-block: 0;
484
+ will-change: scale;
485
+
486
+ @supports (-webkit-touch-callout: none) {
487
+ font-size: 16px;
488
+ }
489
+
490
+ option::checkmark {
491
+ content: "";
492
+ display: block;
493
+ width: 1rem;
494
+ height: 1rem;
495
+ background-color: currentColor;
496
+ -webkit-mask-image: var(--icon-checkmark);
497
+ mask-image: var(--icon-checkmark);
498
+ -webkit-mask-repeat: no-repeat;
499
+ mask-repeat: no-repeat;
500
+ -webkit-mask-position: center;
501
+ mask-position: center;
502
+ -webkit-mask-size: contain;
503
+ mask-size: contain;
504
+ }
505
+
506
+ option {
507
+ display: flex;
508
+ gap: var(--spacer-1);
509
+ padding: 0 var(--spacer-4) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
510
+ font-weight: var(--body-medium-fontWeight);
511
+ color: var(--figma-color-text-menu);
512
+ position: relative;
513
+ & * {
514
+ color: inherit;
515
+ }
516
+ &[hidden] {
517
+ display: none;
518
+ }
519
+ &:before {
520
+ content: "";
521
+ display: block;
522
+ position: absolute;
523
+ inset: 0 var(--spacer-2);
524
+ border-radius: var(--radius-medium);
525
+ z-index: -1;
526
+ }
527
+ &:checked:before {
528
+ background-color: transparent;
529
+ }
530
+ &:not(:checked):before {
531
+ background-color: transparent;
532
+ }
533
+ &:not(:disabled) {
534
+ &:hover,
535
+ &:active,
536
+ &:focus-visible {
537
+ background-color: transparent;
538
+ outline: 0;
539
+ &:before {
540
+ background-color: var(--figma-color-bg-menu-hover);
541
+ }
542
+ }
543
+ }
544
+ }
545
+
546
+ optgroup {
547
+ color: var(--figma-color-text-menu-secondary);
548
+ text-align: left;
549
+ position: relative;
550
+ padding: 0 var(--spacer-1) 0 calc(var(--spacer-1) * 2 + var(--spacer-1));
551
+ font-weight: var(--body-medium-fontWeight);
552
+ &[label]:not([label=""]) {
553
+ padding-top: var(--spacer-2);
554
+ option:first-child {
555
+ margin-top: var(--spacer-2);
556
+ }
557
+ }
558
+ legend {
559
+ padding: var(--spacer-1, 0.3rem) var(--spacer-1, 1rem);
560
+ }
561
+ option {
562
+ margin: 0 calc(var(--spacer-1) * -1);
563
+ margin-left: calc((var(--spacer-1) * 2 + var(--spacer-1)) * -1);
564
+ }
565
+ &:not(:first-child) {
566
+ margin-top: var(--spacer-2);
567
+ padding-top: var(--spacer-3);
568
+
569
+ &:before {
570
+ content: "";
571
+ display: block;
572
+ position: absolute;
573
+ left: 0;
574
+ right: 0;
575
+ top: 1px;
576
+ height: 1px;
577
+ background-color: var(--figma-color-border-menu);
578
+ margin-bottom: var(--spacer-2);
579
+ }
580
+ }
581
+ }
582
+ option[hidden="true"]:first-child + optgroup {
583
+ margin-top: 0;
584
+ padding-top: var(--spacer-2);
585
+ &:before {
586
+ display: none;
587
+ }
588
+ }
589
+
590
+ /* Customizable select button content (closed state) */
591
+ &:has(> button) {
592
+ padding-left: 0;
593
+ }
594
+ & > button {
595
+ display: flex;
596
+ align-items: center;
597
+ gap: var(--spacer-1);
598
+ width: 100%;
599
+ border: 0;
600
+ background: transparent;
601
+ padding: 0;
602
+ margin: 0;
603
+ color: inherit;
604
+ font: inherit;
605
+ height: 100%;
606
+ white-space: nowrap;
607
+ text-overflow: ellipsis;
608
+ overflow: hidden;
609
+
610
+ & > selectedcontent {
611
+ display: flex;
612
+ align-items: center;
613
+ gap: 0;
614
+ min-width: 0;
615
+ &:not(:has(> svg)) {
616
+ padding-left: var(--spacer-2);
617
+ }
618
+
619
+ & svg {
620
+ flex-shrink: 0;
621
+ }
622
+ }
623
+ }
624
+ }
625
+ ::picker-icon {
626
+ display: none;
627
+ }
628
+
629
+ ::picker(select) {
630
+ appearance: base-select;
631
+ color-scheme: dark;
632
+
633
+ /* Appearance/style */
634
+ scrollbar-width: thin;
635
+ outline: 0;
636
+ scrollbar-color: var(--figma-color-text-menu-tertiary)
637
+ var(--figma-color-bg-menu);
638
+ border-radius: var(--radius-large);
639
+ border: 0;
640
+ background-color: var(--figma-color-bg-menu);
641
+ padding: var(--spacer-2) 0;
642
+ box-shadow: var(--figma-elevation-400-menu-panel);
643
+ }
644
+ }
645
+ }
646
+
647
+ input[type="text"][list],
648
+ select {
649
+ padding-right: var(--spacer-4);
650
+ padding-left: var(--spacer-2);
651
+ }
652
+
653
+ /* Dropdown */
654
+ fig-dropdown,
655
+ .fig-dropdown {
656
+ display: inline-flex;
657
+ position: relative;
658
+
659
+ & > *:not(select) {
660
+ display: none !important;
661
+ }
662
+ > select {
663
+ display: flex;
664
+ align-items: center;
665
+ flex: 1;
666
+ width: 100%;
667
+ }
668
+
669
+ /* Chevron icon using mask-image for light-dark support */
670
+ &::after {
671
+ content: "";
672
+ position: absolute;
673
+ right: 0.25rem;
674
+ top: 50%;
675
+ transform: translateY(-50%);
676
+ width: 1rem;
677
+ height: 1rem;
678
+ mask-image: var(--icon-chevron);
679
+ mask-size: contain;
680
+ mask-repeat: no-repeat;
681
+ mask-position: center;
682
+ background-color: var(--figma-color-icon);
683
+ pointer-events: none;
684
+ }
685
+
686
+ /* Autoresize to content width */
687
+ &[autoresize] select {
688
+ field-sizing: content;
689
+ }
690
+ }
691
+
692
+ /* Button */
693
+ .fig-button,
694
+ fig-button {
695
+ color: var(--figma-color-text-onbrand);
696
+ display: flex;
697
+ align-items: center;
698
+ justify-content: center;
699
+ height: var(--spacer-4);
700
+ padding: 0 var(--spacer-2);
701
+ appearance: none;
702
+ border: 0;
703
+ min-width: 0;
704
+ color: var(--figma-color-text-onbrand);
705
+ outline: 0;
706
+ border-radius: var(--radius-medium);
707
+ background-color: var(--figma-color-bg-brand);
708
+ font-weight: 500;
709
+
710
+ &:active {
711
+ background-color: var(--figma-color-bg-brand-pressed);
712
+ }
713
+
714
+ &:hover {
715
+ background-color: var(--figma-color-bg-brand-hover);
716
+ &:active {
717
+ background-color: var(--figma-color-bg-brand-pressed);
718
+ }
719
+ &:active {
720
+ background-color: var(--figma-color-bg-brand-pressed);
721
+ color: var(--figma-color-text-onbrand-secondary);
722
+ }
723
+ }
724
+
725
+ /* Variant: Link */
726
+ &[variant="link"] {
727
+ box-shadow: none;
728
+ background: none;
729
+ color: var(--figma-color-text-brand);
730
+
731
+ &:hover:not(:active) {
732
+ background-color: transparent;
733
+ }
734
+
735
+ &:active {
736
+ outline: 0;
737
+ background-color: var(--figma-color-bg-selected);
738
+ color: var(--figma-color-text-brand);
739
+ }
740
+ }
741
+ /* Variant: Ghost */
742
+ &[variant="ghost"] {
743
+ box-shadow: none;
744
+ background: none;
745
+ color: var(--figma-color-text);
746
+
747
+ &:hover:not(:active) {
748
+ background-color: var(--figma-color-bg-transparent-hover);
749
+ }
750
+
751
+ &:active {
752
+ outline: 0;
753
+ background-color: var(--figma-color-bg-transparent-pressed);
754
+ color: var(--figma-color-text);
755
+ }
756
+ }
757
+
758
+ &[variant="ghost"][disabled]:not([disabled="false"]) {
759
+ background-color: transparent;
760
+ }
761
+ /* Variant: Secondary */
762
+ &[variant="secondary"] {
763
+ box-shadow: inset 0 0 0 1px var(--figma-color-border);
764
+ padding: 0 calc(var(--spacer-2) - 1px);
765
+ background: none;
766
+ color: var(--figma-color-text);
767
+
768
+ &:active {
769
+ background-color: var(--figma-color-bg-secondary);
770
+ color: var(--figma-color-text);
771
+ }
772
+ }
773
+
774
+ /* Variant: Input */
775
+ &[variant="input"] {
776
+ background-color: var(--figma-color-bg-secondary);
777
+ box-shadow: none;
778
+ color: var(--figma-color-text);
779
+
780
+ &:hover {
781
+ box-shadow: inset 0 0 0 1px var(--figma-color-border);
782
+ background-color: var(--figma-color-bg-transparent);
783
+ }
784
+
785
+ &:active {
786
+ background-color: var(--figma-color-bg-secondary);
787
+ color: var(--figma-color-text);
788
+ }
789
+
790
+ &:focus-visible {
791
+ background-color: var(--figma-color-bg-secondary);
792
+ }
793
+ }
794
+
795
+ /* Variant: Overlay (for on top of content) */
796
+ &[variant="overlay"] {
797
+ color-scheme: light;
798
+ background-color: var(--figma-color-bg);
799
+ color: var(--figma-color-text);
800
+ box-shadow: 0 0 0 1px var(--figma-color-bordertranslucent);
801
+
802
+ &:active,
803
+ &:has(:active) {
804
+ background-color: var(--figma-color-bg-secondary);
805
+ color: var(--figma-color-text);
806
+ }
807
+ }
808
+
809
+ /* Icon only */
810
+ &[icon] {
811
+ width: var(--spacer-4);
812
+ padding: 0;
813
+ flex-grow: 0;
814
+ flex-shrink: 0;
815
+ flex-basis: var(--spacer-4);
816
+ &[size="compact"] {
817
+ width: var(--spacer-3);
818
+ flex-basis: var(--spacer-3);
819
+ }
820
+ }
821
+
822
+ /* Disabled */
823
+ &[disabled]:not([disabled="false"]) {
824
+ background-color: var(--figma-color-bg-disabled);
825
+ pointer-events: none;
826
+ cursor: not-allowed;
827
+ &:not([variant="secondary"]) {
828
+ color: var(--figma-color-text-ondisabled);
829
+ box-shadow: none;
830
+ }
831
+ &[variant="secondary"],
832
+ &[variant="ghost"] {
833
+ color: var(--figma-color-text-disabled);
834
+ background-color: transparent;
835
+ }
836
+ }
837
+
838
+ /* Size */
839
+ &[size="large"],
840
+ &[size="large"] > button {
841
+ height: var(--spacer-5);
842
+ padding: 0 var(--spacer-3);
843
+ }
844
+
845
+ &[size="large"][icon],
846
+ &[size="large"][icon] > button {
847
+ width: var(--spacer-5);
848
+ flex-basis: var(--spacer-5);
849
+ padding: 0;
850
+ }
851
+
852
+ /* Full width */
853
+ &[full] {
854
+ width: 100%;
855
+ }
856
+
857
+ /* Block button */
858
+ &[inline="false"],
859
+ &[inline="false"] > button {
860
+ display: flex;
861
+ width: 100%;
862
+ justify-content: left;
863
+ height: auto;
864
+ text-align: left;
865
+ align-items: center;
866
+ padding: var(--spacer-1) var(--spacer-2);
867
+ }
868
+
869
+ &[type="select"],
870
+ &[type="upload"] {
871
+ position: relative;
872
+ overflow: hidden;
873
+ > select,
874
+ > input,
875
+ > fig-dropdown {
876
+ position: absolute;
877
+ inset: 0;
878
+ opacity: 0;
879
+ appearance: none;
880
+ }
881
+ }
882
+
883
+ &[inline="false"] {
884
+ padding: 0;
885
+ }
886
+
887
+ &[selected]:not([selected="false"]) {
888
+ &,
889
+ &:hover {
890
+ color: var(--figma-color-icon-brand);
891
+ background-color: var(--figma-color-bg-selected);
892
+ }
893
+ }
894
+
895
+ &:focus-visible,
896
+ &[data-focus-visible] {
897
+ outline: 0;
898
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
899
+ }
900
+ svg {
901
+ *[fill] {
902
+ fill: currentColor;
903
+ }
904
+ *[stroke]:not([stroke="none"]) {
905
+ stroke: currentColor;
906
+ }
907
+ }
908
+ &:has(svg:first-child):not([icon]) {
909
+ padding-left: var(--spacer-1);
910
+ }
911
+ }
912
+
913
+ /* Combo button */
914
+ .fig-button-combo,
915
+ fig-button-combo,
916
+ .fig-input-combo,
917
+ fig-input-combo {
918
+ display: inline-flex;
919
+ flex-wrap: nowrap;
920
+ align-items: center;
921
+ gap: 0px;
922
+ & > * {
923
+ &:first-child,
924
+ &:first-child > * {
925
+ border-top-right-radius: 0;
926
+ border-bottom-right-radius: 0;
927
+ }
928
+
929
+ &:last-child,
930
+ &:last-child > * {
931
+ border-top-left-radius: 0;
932
+ border-bottom-left-radius: 0;
933
+ }
934
+
935
+ &:not(:last-child):not(:first-child),
936
+ &:not(:last-child):not(:first-child) > * {
937
+ border-radius: 0;
938
+ }
939
+ }
940
+ }
941
+ .fig-input-combo,
942
+ fig-input-combo {
943
+ gap: 1px;
944
+ }
945
+ .fig-button-combo,
946
+ fig-button-combo {
947
+ > *:not([variant="secondary"]):not(:first-child) {
948
+ box-shadow: inset 1px 0 0 0 var(--figma-color-bg-brand-hover);
949
+ &[disabled]:not([disabled="false"]) {
950
+ box-shadow: inset 1px 0 0 0 var(--figma-color-border-disabled);
951
+ }
952
+ }
953
+ > *[variant="secondary"]:not(:first-child) {
954
+ border-left-width: 0 !important;
955
+ &[disabled]:not([disabled="false"]) {
956
+ border-left-width: 0 !important;
957
+ }
958
+ }
959
+ }
960
+
961
+ /* Tabs */
962
+ fig-tab,
963
+ .fig-tab {
964
+ display: inline-flex;
965
+ flex-direction: column;
966
+ align-items: center;
967
+ justify-content: center;
968
+ height: 1.5rem;
969
+ padding: 0 var(--spacer-2);
970
+ appearance: none;
971
+ border: 0;
972
+ cursor: default;
973
+ gap: 0 !important;
974
+ user-select: none;
975
+ border-radius: var(--radius-medium);
976
+ color: var(--figma-color-text-secondary);
977
+ position: relative;
978
+
979
+ &[label] {
980
+ &::after {
981
+ content: attr(label);
982
+ color: var(--figma-color-text-secondary);
983
+ content: attr(label);
984
+ height: 0 !important;
985
+ width: auto !important;
986
+ visibility: hidden;
987
+ overflow: hidden;
988
+ user-select: none;
989
+ pointer-events: none;
990
+ font-weight: var(--body-medium-strong-fontWeight);
991
+ }
992
+ }
993
+
994
+ &:has(:checked),
995
+ &[selected]:not([selected="false"]) {
996
+ background-color: var(--figma-color-bg-secondary);
997
+ font-weight: var(--body-medium-strong-fontWeight);
998
+ color: var(--figma-color-text);
999
+ }
1000
+
1001
+ &:hover {
1002
+ background-color: var(--figma-color-bg-secondary);
1003
+ }
1004
+
1005
+ & [type="radio"] {
1006
+ position: absolute;
1007
+ inset: 0;
1008
+ border-radius: 0;
1009
+ opacity: 0;
1010
+ z-index: 1;
1011
+ width: 100%;
1012
+ height: 100%;
1013
+ }
1014
+ }
1015
+
1016
+ fig-tabs,
1017
+ .tabs {
1018
+ display: flex;
1019
+ gap: var(--spacer-2);
1020
+ }
1021
+
1022
+ fig-tab-content,
1023
+ .fig-tab-content {
1024
+ display: none;
1025
+ }
1026
+
1027
+ /* Avatar */
1028
+ fig-avatar,
1029
+ .fig-avatar {
1030
+ --size: 1.5rem;
1031
+ width: var(--size);
1032
+ display: inline-grid;
1033
+ place-items: center;
1034
+ height: var(--size);
1035
+ border-radius: 100%;
1036
+ border: 0;
1037
+ background: var(--figma-color-bg-brand);
1038
+ overflow: hidden;
1039
+ color: var(--figma-color-icon-onbrand);
1040
+
1041
+ img {
1042
+ width: var(--size);
1043
+ height: var(--size);
1044
+ position: absolute;
1045
+ border-radius: 100%;
1046
+ box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1047
+ &:not([src]) {
1048
+ background: var(--checkerboard);
1049
+ }
1050
+ }
1051
+ &[borderless] img {
1052
+ box-shadow: none;
1053
+ }
1054
+
1055
+ &:has(img[src]) {
1056
+ background: none;
1057
+ }
1058
+ &::after {
1059
+ content: attr(initials);
1060
+ }
1061
+ &[size="large"] {
1062
+ --size: 3rem;
1063
+ }
1064
+ }
1065
+
1066
+ /* Color input */
1067
+ input[type="color"] {
1068
+ width: 0.875rem;
1069
+ height: 0.875rem;
1070
+ -webkit-appearance: none;
1071
+ appearance: none;
1072
+ border: 0;
1073
+ padding: 0;
1074
+ margin: 0;
1075
+ background: none;
1076
+ padding: 0.3125rem;
1077
+ flex-shrink: 0;
1078
+ box-sizing: content-box;
1079
+ border-radius: var(--radius-medium);
1080
+ background-color: var(--figma-color-bg-secondary);
1081
+ display: inline-grid;
1082
+
1083
+ &:focus {
1084
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
1085
+ outline: 0;
1086
+ }
1087
+
1088
+ &::-webkit-color-swatch-wrapper {
1089
+ padding: 0;
1090
+ border: 0;
1091
+ color-scheme: inherit;
1092
+ appearance: none;
1093
+ border-radius: 0.125rem;
1094
+ background: var(--checkerboard);
1095
+ overflow: hidden;
1096
+ grid-area: 1/1;
1097
+ color-scheme: inherit;
1098
+ outline: 0;
1099
+ }
1100
+
1101
+ &::-webkit-color-swatch {
1102
+ padding: 0;
1103
+ border: 0;
1104
+ color-scheme: inherit;
1105
+ box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1106
+ color-scheme: inherit;
1107
+ border-radius: 0.125rem;
1108
+ mask-image: linear-gradient(
1109
+ to right,
1110
+ black 0%,
1111
+ black 50%,
1112
+ rgba(0, 0, 0, var(--alpha)) 50%
1113
+ );
1114
+ }
1115
+ }
1116
+
1117
+ input[type="color"] {
1118
+ &::-moz-color-swatch {
1119
+ color-scheme: inherit;
1120
+ border-radius: 0.125rem;
1121
+ color-scheme: inherit;
1122
+ padding: 0;
1123
+ border: 0;
1124
+ appearance: none;
1125
+ mask-image: linear-gradient(
1126
+ to right,
1127
+ black 0%,
1128
+ black 50%,
1129
+ rgba(0, 0, 0, var(--alpha)) 50%
1130
+ );
1131
+ border-radius: 0.125rem;
1132
+ box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1133
+ }
1134
+ }
1135
+
1136
+ fig-chit {
1137
+ --size: 1.5rem;
1138
+ --chit-background: #d9d9d9;
1139
+ --chit-bg-size: cover;
1140
+ --chit-bg-position: center;
1141
+ --alpha: 1;
1142
+
1143
+ display: inline-grid;
1144
+ width: var(--size);
1145
+ height: var(--size);
1146
+ border-radius: var(--radius-medium);
1147
+
1148
+ &::before,
1149
+ &::after,
1150
+ input {
1151
+ grid-area: 1/1;
1152
+ }
1153
+
1154
+ /* Selection ring */
1155
+ &[selected]:not([selected="false"])::before {
1156
+ content: "";
1157
+ width: var(--size);
1158
+ height: var(--size);
1159
+ z-index: 1;
1160
+ border-radius: var(--radius-medium);
1161
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
1162
+ }
1163
+
1164
+ &[size="large"] {
1165
+ --size: 1.75rem;
1166
+
1167
+ /* Large size: swatch fills the whole area */
1168
+ input[type="color"] {
1169
+ padding: 0;
1170
+ width: var(--size);
1171
+ height: var(--size);
1172
+ border-radius: var(--radius-medium);
1173
+ }
1174
+
1175
+ input[type="color"]::-webkit-color-swatch-wrapper {
1176
+ border-radius: var(--radius-medium);
1177
+ }
1178
+
1179
+ input[type="color"]::-webkit-color-swatch {
1180
+ border-radius: var(--radius-medium);
1181
+ }
1182
+
1183
+ input[type="color"]::-moz-color-swatch {
1184
+ border-radius: var(--radius-medium);
1185
+ }
1186
+
1187
+ &[selected]:not([selected="false"])::before {
1188
+ box-shadow:
1189
+ inset 0 0 0 1px var(--figma-color-border-selected),
1190
+ inset 0 0 0 3px var(--figma-color-bg);
1191
+ }
1192
+
1193
+ /* Large gradient/image: also fill the area */
1194
+ &[data-type="gradient"]::after,
1195
+ &[data-type="image"]::after {
1196
+ width: var(--size);
1197
+ height: var(--size);
1198
+ border-radius: var(--radius-medium);
1199
+ }
1200
+ }
1201
+
1202
+ &[disabled] {
1203
+ pointer-events: none;
1204
+ opacity: 0.5;
1205
+ }
1206
+
1207
+ /* Gradient/Image types - inset thumbnail with hidden input */
1208
+ &[data-type="gradient"],
1209
+ &[data-type="image"] {
1210
+ background-color: var(--figma-color-bg-secondary);
1211
+
1212
+ &::after {
1213
+ content: "";
1214
+ width: 0.875rem;
1215
+ height: 0.875rem;
1216
+ background: var(--chit-background);
1217
+ background-size: var(--chit-bg-size);
1218
+ background-position: var(--chit-bg-position);
1219
+ background-repeat: no-repeat;
1220
+ border-radius: 0.125rem;
1221
+ box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1222
+ mask-image: linear-gradient(
1223
+ to right,
1224
+ black 0%,
1225
+ black 50%,
1226
+ rgba(0, 0, 0, var(--alpha)) 50%
1227
+ );
1228
+ }
1229
+
1230
+ &::after,
1231
+ input {
1232
+ grid-area: 1/1;
1233
+ place-self: center;
1234
+ }
1235
+
1236
+ input[type="color"] {
1237
+ opacity: 0;
1238
+ }
1239
+
1240
+ input[type="color"]::-webkit-color-swatch-wrapper {
1241
+ background: none;
1242
+ }
1243
+
1244
+ input[type="color"]::-moz-color-swatch {
1245
+ opacity: 0;
1246
+ }
1247
+
1248
+ input[type="color"]::-webkit-color-swatch {
1249
+ opacity: 0;
1250
+ }
1251
+ }
1252
+
1253
+ /* Checkerboard for empty/missing images */
1254
+ &[data-type="image"]:not([background])::after,
1255
+ &[data-type="image"][background=""]::after,
1256
+ &[data-type="image"][background="url()"]::after {
1257
+ background: var(--checkerboard);
1258
+ }
1259
+ }
1260
+
1261
+ /* Fig Image */
1262
+ fig-image {
1263
+ --image-size: 2rem;
1264
+ --fit: cover;
1265
+ --image-width: var(--image-size);
1266
+ --image-height: var(--image-size);
1267
+ --aspect-ratio: 1 / 1;
1268
+ display: inline-grid;
1269
+ place-items: center;
1270
+ width: var(--image-width);
1271
+ height: var(--image-height);
1272
+ aspect-ratio: var(--aspect-ratio);
1273
+ > * {
1274
+ grid-area: 1/1;
1275
+ }
1276
+ fig-chit {
1277
+ --size: 100% !important;
1278
+ --chit-bg-size: var(--fit);
1279
+ &[disabled] {
1280
+ opacity: 1;
1281
+ }
1282
+ }
1283
+ &:not([src]):not([src=""]) fig-button,
1284
+ &:hover fig-button {
1285
+ opacity: 1;
1286
+ pointer-events: all;
1287
+ }
1288
+ &[size="medium"] {
1289
+ --image-size: 4rem;
1290
+ }
1291
+ &[size="large"] {
1292
+ --image-size: 8rem;
1293
+ }
1294
+ &[size="auto"] {
1295
+ --image-size: 6rem;
1296
+ &[full]:not([full="false"]) {
1297
+ --image-width: 100%;
1298
+ }
1299
+ }
1300
+ &[aspect-ratio] {
1301
+ height: auto;
1302
+ fig-chit {
1303
+ --size: 100% !important;
1304
+ height: auto !important;
1305
+ aspect-ratio: var(--aspect-ratio) !important;
1306
+ }
1307
+ }
1308
+ > div {
1309
+ display: flex;
1310
+ gap: var(--spacer-2);
1311
+ opacity: 0;
1312
+ pointer-events: none;
1313
+ }
1314
+ &:not([src]):not([src=""]) > div,
1315
+ &:hover > div {
1316
+ opacity: 1;
1317
+ pointer-events: all;
1318
+ }
1319
+ fig-button[type="download"] {
1320
+ display: none;
1321
+ }
1322
+ &[src]:not([src=""]) {
1323
+ fig-button[type="download"] {
1324
+ display: inline-flex;
1325
+ }
1326
+ }
1327
+ }
1328
+
1329
+ /* Easing Curve */
1330
+ fig-easing-curve {
1331
+ display: flex;
1332
+ flex-direction: column;
1333
+ gap: var(--spacer-2);
1334
+ --stroke-width: 1;
1335
+ --easing-bezier-handle-radius: 4.25;
1336
+ --easing-spring-handle-radius: 4.25;
1337
+ --easing-handle-fill: var(--figma-color-border-strong);
1338
+ --easing-handle-fill-active: var(--figma-color-bg-brand);
1339
+ --easing-handle-stroke: var(--figma-color-bg-secondary);
1340
+ --easing-handle-stroke-width: var(--stroke-width);
1341
+ --easing-duration-bar-width: 4.25;
1342
+ --easing-duration-bar-height: 16;
1343
+ --easing-duration-bar-radius: 3;
1344
+ --aspect-ratio: 1 / 1;
1345
+ --easing-duration-bar-fill: var(--figma-color-border-strong);
1346
+ --easing-duration-bar-stroke: var(--figma-color-bg-secondary);
1347
+ --easing-duration-bar-stroke-width: var(--stroke-width);
1348
+
1349
+ width: 100%;
1350
+ .fig-easing-curve-svg {
1351
+ width: 100%;
1352
+ aspect-ratio: var(--aspect-ratio);
1353
+ overflow: visible;
1354
+ }
1355
+ .fig-easing-curve-svg-container {
1356
+ border-radius: var(--radius-medium);
1357
+ background: var(--figma-color-bg-secondary);
1358
+ padding: var(--spacer-3);
1359
+ overflow: hidden;
1360
+ &:is(:hover, :active, :focus, :focus-visible, :focus-within) {
1361
+ overflow: visible;
1362
+ }
1363
+ }
1364
+ &.spring-mode {
1365
+ .fig-easing-curve-svg-container,
1366
+ .fig-easing-curve-svg {
1367
+ cursor: ew-resize;
1368
+ }
1369
+ }
1370
+ .fig-easing-curve-diagonal,
1371
+ .fig-easing-curve-bounds,
1372
+ .fig-easing-curve-arm,
1373
+ .fig-easing-curve-path,
1374
+ .fig-easing-curve-target {
1375
+ pointer-events: none;
1376
+ }
1377
+ .fig-easing-curve-diagonal {
1378
+ stroke: var(--figma-color-bordertranslucent);
1379
+ stroke-width: var(--stroke-width);
1380
+ stroke-linejoin: round;
1381
+ stroke-linecap: round;
1382
+ }
1383
+ .fig-easing-curve-bounds {
1384
+ fill: transparent;
1385
+ }
1386
+ .fig-easing-curve-arm {
1387
+ stroke: var(--figma-color-border-strong);
1388
+ stroke-width: var(--stroke-width);
1389
+ stroke-linejoin: round;
1390
+ stroke-linecap: round;
1391
+ }
1392
+ .fig-easing-curve-path {
1393
+ fill: none;
1394
+ stroke: var(--figma-color-text);
1395
+ stroke-width: var(--stroke-width);
1396
+ stroke-linejoin: round;
1397
+ stroke-linecap: round;
1398
+ }
1399
+ .fig-easing-curve-target {
1400
+ stroke: var(--figma-color-bordertranslucent);
1401
+ stroke-width: var(--stroke-width);
1402
+ stroke-linejoin: round;
1403
+ stroke-linecap: round;
1404
+ }
1405
+ .fig-easing-curve-handle {
1406
+ fill: var(--easing-handle-fill);
1407
+ cursor: default;
1408
+ pointer-events: all;
1409
+ stroke: var(--easing-handle-stroke);
1410
+ stroke-width: var(--easing-handle-stroke-width);
1411
+ &:hover {
1412
+ fill: var(--easing-handle-fill-active);
1413
+ }
1414
+ &:active {
1415
+ cursor: grabbing;
1416
+ fill: var(--easing-handle-fill-active);
1417
+ }
1418
+ }
1419
+ .fig-easing-curve-endpoint {
1420
+ fill: var(--easing-handle-fill);
1421
+ }
1422
+ .fig-easing-curve-duration-bar {
1423
+ fill: var(--easing-duration-bar-fill);
1424
+ stroke: var(--easing-duration-bar-stroke);
1425
+ stroke-width: var(--easing-duration-bar-stroke-width);
1426
+ cursor: default;
1427
+ pointer-events: all;
1428
+ &:hover {
1429
+ fill: var(--easing-handle-fill-active);
1430
+ }
1431
+ &:active {
1432
+ cursor: grabbing;
1433
+ fill: var(--easing-handle-fill-active);
1434
+ }
1435
+ }
1436
+ .fig-easing-curve-dropdown {
1437
+ option svg {
1438
+ vertical-align: middle;
1439
+ }
1440
+ }
1441
+ }
1442
+
1443
+ /* 3D Rotate */
1444
+ fig-3d-rotate {
1445
+ display: flex;
1446
+ flex-wrap: wrap;
1447
+ gap: var(--spacer-2);
1448
+ width: 100%;
1449
+ --aspect-ratio: 1 / 1;
1450
+ --perspective: 20rem;
1451
+ --perspective-origin: 50% 50%;
1452
+ --transform-origin: 50% 50% -50cqi;
1453
+ --gradient-start-color: light-dark(
1454
+ rgba(0, 0, 0, 0.05),
1455
+ rgba(255, 255, 255, 0.05)
1456
+ );
1457
+ --border-width: 1px;
1458
+ --border-start-color: light-dark(
1459
+ rgba(0, 0, 0, 0.1),
1460
+ rgba(255, 255, 255, 0.1)
1461
+ );
1462
+ --border-end-color: transparent;
1463
+ --border-end-color: transparent;
1464
+ --gradient-end-color: transparent;
1465
+ --figma-3d-rotate-handle-size: 6px;
1466
+ --front-face-bg: light-dark(var(--figma-color-bg), #555);
1467
+
1468
+ fig-field[direction="horizontal"] & {
1469
+ flex: 1;
1470
+ min-width: 0;
1471
+ }
1472
+
1473
+ > fig-input-number {
1474
+ flex: 1 0 3rem;
1475
+ }
1476
+
1477
+ .fig-3d-rotate-container {
1478
+ flex: 1 1 100%;
1479
+ border-radius: var(--radius-medium);
1480
+ background: var(--figma-color-bg-secondary);
1481
+ padding: 0 2.5rem;
1482
+ width: 100%;
1483
+ aspect-ratio: var(--aspect-ratio);
1484
+ display: flex;
1485
+ align-items: center;
1486
+ justify-content: center;
1487
+ cursor: grab;
1488
+ user-select: none;
1489
+ overflow: hidden;
1490
+
1491
+ &.dragging,
1492
+ &:active {
1493
+ cursor: grabbing;
1494
+ }
1495
+ &:focus {
1496
+ outline: 0;
1497
+ }
1498
+ }
1499
+
1500
+ .fig-3d-rotate-scene {
1501
+ width: 100%;
1502
+ aspect-ratio: 1 / 1;
1503
+ max-height: max(3.5rem, 50%);
1504
+ max-width: max(3.5rem, 50%);
1505
+ perspective: var(--perspective, 20rem);
1506
+ perspective-origin: var(--perspective-origin, 50% 50%);
1507
+ container-type: inline-size;
1508
+ }
1509
+
1510
+ .fig-3d-rotate-cube {
1511
+ width: 100%;
1512
+ height: 100%;
1513
+ position: relative;
1514
+ aspect-ratio: 1 / 1;
1515
+ transform-style: preserve-3d;
1516
+ transform-origin: var(--transform-origin, 50% 50% -50cqi);
1517
+ }
1518
+
1519
+ .fig-3d-rotate-face {
1520
+ position: absolute;
1521
+ inset: 0;
1522
+ backface-visibility: visible;
1523
+ background: linear-gradient(
1524
+ to bottom,
1525
+ var(--gradient-start-color),
1526
+ var(--gradient-end-color)
1527
+ );
1528
+ &.selected {
1529
+ background: var(--figma-color-border-strong) !important;
1530
+ inset: -1px;
1531
+ border-radius: var(--radius-medium);
1532
+ box-shadow: var(--elevation-100-canvas);
1533
+ }
1534
+
1535
+ &.front {
1536
+ background: var(--front-face-bg);
1537
+ border-radius: var(--radius-medium);
1538
+ transform-style: preserve-3d;
1539
+ box-shadow: var(--elevation-100-canvas);
1540
+ inset: -1px;
1541
+
1542
+ &::after {
1543
+ content: "";
1544
+ position: absolute;
1545
+ width: var(--figma-3d-rotate-handle-size);
1546
+ height: var(--figma-3d-rotate-handle-size);
1547
+ border-radius: 50%;
1548
+ background: var(--figma-color-border-strong);
1549
+ top: 50%;
1550
+ left: 50%;
1551
+ transform: translate(-50%, -50%);
1552
+ backface-visibility: hidden;
1553
+ }
1554
+ }
1555
+ &.back {
1556
+ transform-origin: 100% 50%;
1557
+ transform: translateX(-100%) rotateY(-0.25turn) translateX(-100%)
1558
+ rotateY(-0.25turn);
1559
+ background: linear-gradient(
1560
+ to bottom,
1561
+ var(--border-start-color),
1562
+ var(--border-end-color)
1563
+ );
1564
+ border-radius: var(--radius-medium);
1565
+ }
1566
+ &.right {
1567
+ transform-origin: 0% 50%;
1568
+ transform: translateX(100%) rotateY(0.25turn);
1569
+ background: linear-gradient(
1570
+ to right,
1571
+ var(--gradient-start-color),
1572
+ var(--gradient-end-color)
1573
+ );
1574
+ border-width: var(--border-width) 0;
1575
+ border-style: solid;
1576
+ border-image: linear-gradient(
1577
+ to right,
1578
+ var(--border-start-color),
1579
+ var(--border-end-color)
1580
+ )
1581
+ 1;
1582
+ }
1583
+ &.left {
1584
+ transform-origin: 100% 50%;
1585
+ transform: translateX(-100%) rotateY(-0.25turn);
1586
+ background: linear-gradient(
1587
+ to left,
1588
+ var(--gradient-start-color),
1589
+ var(--gradient-end-color)
1590
+ );
1591
+ border-width: var(--border-width) 0;
1592
+ border-style: solid;
1593
+ border-image: linear-gradient(
1594
+ to left,
1595
+ var(--border-start-color),
1596
+ var(--border-end-color)
1597
+ )
1598
+ 1;
1599
+ }
1600
+ &.top {
1601
+ translate: 0 -100%;
1602
+ transform-origin: 50% 100%;
1603
+ transform: rotateX(0.25turn);
1604
+ background: linear-gradient(
1605
+ to top,
1606
+ var(--gradient-start-color),
1607
+ var(--gradient-end-color)
1608
+ );
1609
+ border-width: 0 var(--border-width);
1610
+ border-style: solid;
1611
+ border-image: linear-gradient(
1612
+ to top,
1613
+ var(--border-start-color),
1614
+ var(--border-end-color)
1615
+ )
1616
+ 1;
1617
+ }
1618
+ &.bottom {
1619
+ top: 100%;
1620
+ bottom: auto;
1621
+ transform-origin: 50% 0%;
1622
+ transform: rotateX(-0.25turn);
1623
+ background: linear-gradient(
1624
+ to bottom,
1625
+ var(--gradient-start-color),
1626
+ var(--gradient-end-color)
1627
+ );
1628
+ border-width: 0 var(--border-width);
1629
+ border-style: solid;
1630
+ border-image: linear-gradient(
1631
+ to bottom,
1632
+ var(--border-start-color),
1633
+ var(--border-end-color)
1634
+ )
1635
+ 1;
1636
+ }
1637
+ }
1638
+ }
1639
+
1640
+ /* Origin Grid */
1641
+ fig-origin-grid {
1642
+ display: flex;
1643
+ flex-direction: column;
1644
+ width: 100%;
1645
+ gap: var(--spacer-2);
1646
+ --aspect-ratio: 1 / 1;
1647
+ --origin-grid-dot-size: 0.125rem;
1648
+ --origin-grid-handle-size: 0.75rem;
1649
+ --origin-grid-height: var(--spacer-4);
1650
+
1651
+ fig-field[direction="horizontal"] & {
1652
+ flex: 1;
1653
+ min-width: 0;
1654
+ }
1655
+
1656
+ .fig-origin-grid-surface {
1657
+ width: 100%;
1658
+ aspect-ratio: var(--aspect-ratio);
1659
+ min-height: calc(var(--origin-grid-height) * 3);
1660
+ }
1661
+
1662
+ .origin-grid {
1663
+ position: relative;
1664
+ container-type: size;
1665
+ width: 100%;
1666
+ height: 100%;
1667
+ border-radius: var(--radius-medium);
1668
+ background: var(--figma-color-bg-secondary);
1669
+ user-select: none;
1670
+ cursor: default;
1671
+
1672
+ &.is-dragging {
1673
+ cursor: grabbing !important;
1674
+
1675
+ .origin-grid-handle {
1676
+ cursor: grabbing !important;
1677
+ }
1678
+ }
1679
+
1680
+ &.drag-disabled {
1681
+ .origin-grid-handle {
1682
+ cursor: default;
1683
+ }
1684
+ }
1685
+ }
1686
+
1687
+ .origin-grid-cells {
1688
+ position: absolute;
1689
+ inset: 0;
1690
+ display: grid;
1691
+ grid-template-columns: repeat(3, 1fr);
1692
+ }
1693
+
1694
+ .origin-grid-cell {
1695
+ display: grid;
1696
+ place-items: center;
1697
+ width: 100%;
1698
+ height: 100%;
1699
+ min-height: var(--origin-grid-height);
1700
+ color: var(--figma-color-icon-tertiary);
1701
+ pointer-events: none;
1702
+
1703
+ .origin-grid-dot {
1704
+ width: var(--origin-grid-dot-size);
1705
+ height: var(--origin-grid-dot-size);
1706
+ border-radius: var(--radius-small);
1707
+ background: currentColor;
1708
+ }
1709
+
1710
+ &.is-hovered {
1711
+ color: var(--figma-color-bg-brand-secondary);
1712
+
1713
+ .origin-grid-dot {
1714
+ width: var(--origin-grid-handle-size);
1715
+ height: var(--origin-grid-handle-size);
1716
+ }
1717
+ }
1718
+ }
1719
+
1720
+ .origin-grid-handle {
1721
+ --origin-overflow-rotation: 0deg;
1722
+ --origin-overflow-nudge-base: var(--spacer-2-5);
1723
+ --origin-overflow-nudge-x: 0px;
1724
+ --origin-overflow-nudge-y: 0px;
1725
+ --origin-overflow-nudge-x-scale: calc((100cqb / 100cqi) * -1);
1726
+ --origin-overflow-nudge-y-scale: calc((100cqb / 100cqi) * -1);
1727
+ position: absolute;
1728
+ left: 50%;
1729
+ top: 50%;
1730
+ width: var(--origin-grid-handle-size);
1731
+ height: var(--origin-grid-handle-size);
1732
+ border-radius: var(--radius-small);
1733
+ background: var(--figma-color-bg-brand);
1734
+ box-shadow:
1735
+ 0 0 0 1px var(--figma-color-bg),
1736
+ var(--elevation-100-canvas);
1737
+ transform: translate(
1738
+ calc(-50% + var(--origin-overflow-nudge-x)),
1739
+ calc(-50% + var(--origin-overflow-nudge-y))
1740
+ )
1741
+ rotate(var(--origin-overflow-rotation));
1742
+ cursor: default;
1743
+ touch-action: none;
1744
+
1745
+ &.beyond-bounds-x,
1746
+ &.beyond-bounds-y {
1747
+ -webkit-mask-image: var(--icon-arrow-left);
1748
+ mask-image: var(--icon-arrow-left);
1749
+ -webkit-mask-repeat: no-repeat;
1750
+ mask-repeat: no-repeat;
1751
+ -webkit-mask-position: center;
1752
+ mask-position: center;
1753
+ -webkit-mask-size: 24px 24px;
1754
+ mask-size: 24px 24px;
1755
+ border-radius: 0;
1756
+ }
1757
+
1758
+ &.beyond-bounds-x.overflow-right {
1759
+ --origin-overflow-rotation: 180deg;
1760
+ }
1761
+
1762
+ &.beyond-bounds-y:not(.beyond-bounds-x) {
1763
+ --origin-overflow-rotation: 90deg;
1764
+ }
1765
+
1766
+ &.beyond-bounds-y.overflow-down:not(.beyond-bounds-x) {
1767
+ --origin-overflow-rotation: -90deg;
1768
+ }
1769
+
1770
+ &.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-up {
1771
+ --origin-overflow-rotation: 45deg;
1772
+ }
1773
+
1774
+ &.beyond-bounds-x.beyond-bounds-y.overflow-left.overflow-down {
1775
+ --origin-overflow-rotation: -45deg;
1776
+ }
1777
+
1778
+ &.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-up {
1779
+ --origin-overflow-rotation: 135deg;
1780
+ }
1781
+
1782
+ &.beyond-bounds-x.beyond-bounds-y.overflow-right.overflow-down {
1783
+ --origin-overflow-rotation: -135deg;
1784
+ }
1785
+
1786
+ &.overflow-left {
1787
+ --origin-overflow-nudge-x: calc(
1788
+ var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-x-scale)
1789
+ );
1790
+ }
1791
+
1792
+ &.overflow-right {
1793
+ --origin-overflow-nudge-x: calc(
1794
+ var(--origin-overflow-nudge-base) *
1795
+ var(--origin-overflow-nudge-x-scale) * -1
1796
+ );
1797
+ }
1798
+
1799
+ &.overflow-up {
1800
+ --origin-overflow-nudge-y: calc(
1801
+ var(--origin-overflow-nudge-base) * var(--origin-overflow-nudge-y-scale)
1802
+ );
1803
+ }
1804
+
1805
+ &.overflow-down {
1806
+ --origin-overflow-nudge-y: calc(
1807
+ var(--origin-overflow-nudge-base) *
1808
+ var(--origin-overflow-nudge-y-scale) * -1
1809
+ );
1810
+ }
1811
+ }
1812
+
1813
+ .origin-values {
1814
+ display: grid;
1815
+ grid-template-columns: 1fr 1fr;
1816
+ gap: var(--spacer-2);
1817
+ }
1818
+ }
1819
+
1820
+ /* Combo input */
1821
+ .input-combo {
1822
+ display: inline-flex;
1823
+ flex-wrap: nowrap;
1824
+ align-items: center;
1825
+ gap: 1px;
1826
+
1827
+ & > label {
1828
+ align-self: stretch;
1829
+ color: var(--figma-color-text);
1830
+ }
1831
+
1832
+ & > * {
1833
+ &:first-child:not(:last-child),
1834
+ &:first-child:not(:last-child) > * {
1835
+ border-top-right-radius: 0;
1836
+ border-bottom-right-radius: 0;
1837
+ }
1838
+
1839
+ &:last-child:not(:first-child),
1840
+ &:last-child:not(:first-child) > * {
1841
+ border-top-left-radius: 0;
1842
+ border-bottom-left-radius: 0;
1843
+ }
1844
+
1845
+ &:not(:last-child):not(:first-child),
1846
+ &:not(:last-child):not(:first-child) > * {
1847
+ border-radius: 0;
1848
+ }
1849
+ }
1850
+ }
1851
+
1852
+ /* Input Fill label */
1853
+ .fig-input-fill-label {
1854
+ display: inline-flex;
1855
+ align-items: center;
1856
+ padding: 0 var(--spacer-2) 0 var(--spacer-1);
1857
+ height: var(--control-height);
1858
+ font-size: var(--font-size-small);
1859
+ color: var(--figma-color-text-secondary);
1860
+ background: var(--figma-color-bg-secondary);
1861
+ flex: 1;
1862
+ min-width: 0;
1863
+ user-select: none;
1864
+ margin-left: -1px;
1865
+ }
1866
+
1867
+ /* Switch */
1868
+ input[type="checkbox"].switch {
1869
+ display: inline-flex;
1870
+ margin: 0;
1871
+ vertical-align: middle;
1872
+ padding: 0;
1873
+ width: 2rem;
1874
+ height: 1rem;
1875
+ left: 0;
1876
+ top: 0;
1877
+ margin: 0;
1878
+ background: transparent;
1879
+ appearance: none;
1880
+ -moz-appearance: none;
1881
+ -webkit-appearance: none;
1882
+ outline: none;
1883
+ border: 0;
1884
+ align-items: center;
1885
+ justify-content: center;
1886
+ border-radius: 0.5rem;
1887
+ background-color: var(--figma-color-bg-switch);
1888
+ transition: var(--input-transition);
1889
+ box-sizing: border-box;
1890
+ box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1891
+ }
1892
+
1893
+ input[type="checkbox"].switch:after {
1894
+ content: "";
1895
+ background-color: var(--handle-color);
1896
+ width: calc(1rem - 2px);
1897
+ height: calc(1rem - 2px);
1898
+ border-radius: 0.5rem;
1899
+ margin: 1px;
1900
+ transform: translate(calc(-0.5rem));
1901
+ transition: var(--input-transition);
1902
+ box-shadow: var(--handle-shadow);
1903
+ }
1904
+
1905
+ input[type="checkbox"].switch[indeterminate="true"]:after {
1906
+ width: 0.5rem;
1907
+ height: 0.125rem;
1908
+ transform: none;
1909
+ }
1910
+
1911
+ input[type="checkbox"].switch[indeterminate="true"],
1912
+ input[type="checkbox"].switch:checked {
1913
+ background-color: var(--figma-color-bg-brand);
1914
+ }
1915
+
1916
+ input[type="checkbox"].switch:checked:after {
1917
+ transform: translate(0.5rem);
1918
+ }
1919
+
1920
+ input[type="checkbox"].switch:disabled {
1921
+ background-color: var(--figma-color-bg-secondary);
1922
+ cursor: not-allowed;
1923
+ &:after {
1924
+ background-color: var(--figma-color-bg);
1925
+ }
1926
+ }
1927
+
1928
+ input[type="checkbox"].switch:focus {
1929
+ outline: 0;
1930
+ }
1931
+
1932
+ input[type="checkbox"].switch:checked:focus {
1933
+ outline: 0;
1934
+ }
1935
+
1936
+ /* Checkbox */
1937
+ input[type="checkbox"]:not(.switch) {
1938
+ --size: 1rem;
1939
+ appearance: none;
1940
+ border-radius: var(--radius-medium);
1941
+ width: var(--size);
1942
+ height: var(--size);
1943
+ aspect-ratio: 1/1;
1944
+ box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
1945
+ background-color: var(--figma-color-bg-secondary);
1946
+ vertical-align: middle;
1947
+
1948
+ &::after {
1949
+ content: "";
1950
+ width: var(--size);
1951
+ height: var(--size);
1952
+ background-color: transparent;
1953
+ mask-image: var(--icon-checkmark);
1954
+ }
1955
+ &:hover:not(:checked):not(:disabled) {
1956
+ &::after {
1957
+ opacity: 0.25;
1958
+ background-color: var(--figma-color-icon);
1959
+ }
1960
+ }
1961
+
1962
+ &:checked {
1963
+ background-color: var(--figma-color-bg-brand);
1964
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);
1965
+ &::after {
1966
+ background-color: var(--figma-color-icon-onbrand);
1967
+ }
1968
+ }
1969
+
1970
+ &:focus {
1971
+ outline: 0;
1972
+
1973
+ &:not(:checked) {
1974
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
1975
+ }
1976
+ }
1977
+ }
1978
+ /* Light theme checkbox hover (black checkmark preview) */
1979
+ /* @media is a no-JS fallback — ignored when setTheme() sets classes */
1980
+ @media (prefers-color-scheme: light) {
1981
+ :root:not(.figma-dark):not(.figma-light)
1982
+ input[type="checkbox"]:not(.switch):not(:disabled):hover {
1983
+ 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");
1984
+ }
1985
+ }
1986
+
1987
+ /* Class-based light theme override (primary mechanism via setTheme()) */
1988
+ :root.figma-light input[type="checkbox"]:not(.switch):not(:disabled):hover {
1989
+ 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");
1990
+ }
1991
+
1992
+ label.checkbox:has([type="checkbox"]) {
1993
+ padding-left: 1.5rem;
1994
+
1995
+ & [type="radio"] {
1996
+ margin-left: -1.5rem;
1997
+ }
1998
+ }
1999
+
2000
+ /* Radio */
2001
+ input[type="radio"] {
2002
+ appearance: none;
2003
+ border-radius: 0.5rem;
2004
+ width: 1rem;
2005
+ height: 1rem;
2006
+ box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
2007
+ background-color: var(--figma-color-bg-secondary);
2008
+ vertical-align: middle;
2009
+ margin: 0;
2010
+ display: inline-grid;
2011
+ place-content: center;
2012
+
2013
+ &:checked {
2014
+ background-color: var(--figma-color-bg-brand);
2015
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected-strong);
2016
+
2017
+ &::after {
2018
+ transform: scale(1);
2019
+ }
2020
+ }
2021
+
2022
+ &:focus {
2023
+ outline: 0;
2024
+
2025
+ &:not(:checked) {
2026
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
2027
+ }
2028
+ }
2029
+
2030
+ &:hover:not(:checked):not(:disabled) {
2031
+ &::after {
2032
+ transform: scale(1);
2033
+ opacity: 0.25;
2034
+ background-color: var(--figma-color-icon);
2035
+ }
2036
+ }
2037
+
2038
+ &::after {
2039
+ content: "";
2040
+ width: 0.375rem;
2041
+ height: 0.375rem;
2042
+ border-radius: 100%;
2043
+ background-color: var(--figma-color-icon-onbrand);
2044
+ transform: scale(0);
2045
+ box-shadow:
2046
+ 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
2047
+ 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
2048
+ 0px 3px 8px 0px rgba(0, 0, 0, 0.1),
2049
+ 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
2050
+ }
2051
+ }
2052
+
2053
+ label.radio:has([type="radio"]) {
2054
+ padding-left: 1.5rem;
2055
+
2056
+ & [type="radio"] {
2057
+ margin-left: -1.5rem;
2058
+ }
2059
+ }
2060
+
2061
+ /* Fieldset */
2062
+ fieldset {
2063
+ display: flex;
2064
+ flex-direction: column;
2065
+ gap: 0.25rem;
2066
+ border: 0;
2067
+ align-items: start;
2068
+ padding: var(--spacer-2) 0;
2069
+
2070
+ & > legend {
2071
+ margin-top: 0.125rem;
2072
+ font-weight: 500;
2073
+ font-size: 0.625rem;
2074
+ line-height: 0.875rem;
2075
+ color: var(--figma-color-text-secondary);
2076
+ }
2077
+
2078
+ & > label {
2079
+ display: grid;
2080
+ width: 100%;
2081
+ grid-template-columns: 4rem 1fr;
2082
+ column-gap: var(--spacer-2);
2083
+ align-items: center;
2084
+ }
2085
+ }
2086
+
2087
+ /* Details */
2088
+ details {
2089
+ & > summary {
2090
+ font-weight: var(--body-medium-strong-fontWeight);
2091
+ cursor: default;
2092
+ display: flex;
2093
+ align-items: center;
2094
+ padding: 0 1rem 0 0;
2095
+ height: var(--spacer-5);
2096
+ user-select: none;
2097
+ color: var(--figma-color-text-secondary);
2098
+
2099
+ &::before {
2100
+ content: "";
2101
+ mask-image: var(--icon-chevron);
2102
+ display: inline-flex;
2103
+ background: var(--figma-color-text-secondary);
2104
+ align-items: start;
2105
+ justify-content: center;
2106
+ width: 1rem;
2107
+ height: 1rem;
2108
+ transform: rotate(-90deg);
2109
+ transition: transform var(--transition-duration)
2110
+ var(--transition-timing-function);
2111
+ }
2112
+ &::-webkit-details-marker {
2113
+ display: none;
2114
+ }
2115
+ &::marker {
2116
+ content: "";
2117
+ }
2118
+ }
2119
+
2120
+ & > summary:hover,
2121
+ &[open] > summary {
2122
+ color: inherit;
2123
+
2124
+ &::before {
2125
+ opacity: 1;
2126
+ }
2127
+ }
2128
+
2129
+ &[open] {
2130
+ & > summary::before {
2131
+ transform: rotate(0deg);
2132
+ }
2133
+ }
2134
+ }
2135
+
2136
+ /* Sliders */
2137
+ .fig-slider,
2138
+ fig-slider {
2139
+ --slider-field-height: 1.5rem;
2140
+ --slider-height: 1rem;
2141
+ --slider-thumb-size: var(--slider-height);
2142
+ --slider-percent: calc(var(--slider-complete) * 100%);
2143
+ --start-percent: calc(var(--default, 0) * 100%);
2144
+ --slider-tick-size: calc(var(--slider-height) / 4);
2145
+ --slider-handle-shadow:
2146
+ inset 0 0 0 calc(4px + 0.5rem * var(--unchanged)) var(--handle-color),
2147
+ 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-100);
2148
+ --slider-handle-shadow-focus:
2149
+ inset 0 0 0 4px var(--handle-color), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
2150
+ var(--handle-shadow), 0 0 0 1px var(--figma-color-border-selected);
2151
+ --slider-transition: none;
2152
+ --handle-transition: var(--slider-transition);
2153
+
2154
+ display: inline-flex;
2155
+ align-items: center;
2156
+ position: relative;
2157
+ height: var(--slider-field-height);
2158
+ transition: var(--slider-transition);
2159
+
2160
+ .fig-slider-input-container {
2161
+ height: var(--slider-height);
2162
+ position: relative;
2163
+ display: block;
2164
+ width: 100%;
2165
+ transition: var(--slider-transition);
2166
+ background: var(--figma-color-bg-secondary);
2167
+ border-radius: 0.5rem;
2168
+ box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
2169
+
2170
+ /* Track */
2171
+ &::before {
2172
+ content: "";
2173
+ background: var(--figma-color-bg-brand);
2174
+ position: absolute;
2175
+ left: 0;
2176
+ top: 0;
2177
+ pointer-events: none;
2178
+ bottom: 0;
2179
+ border-radius: 0.5rem;
2180
+ min-width: var(--slider-height);
2181
+ box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
2182
+ width: calc(
2183
+ var(--slider-percent) + (1 - var(--slider-complete)) *
2184
+ var(--slider-height)
2185
+ );
2186
+ max-width: 100%;
2187
+ }
2188
+ }
2189
+ &[type="stepper"] {
2190
+ .fig-slider-input-container {
2191
+ &::before {
2192
+ display: none;
2193
+ }
2194
+ }
2195
+ }
2196
+
2197
+ &[type="delta"] {
2198
+ datalist option {
2199
+ position: absolute;
2200
+ margin: 0;
2201
+ left: calc(var(--start-percent) - var(--slider-tick-size) / 2);
2202
+ top: calc(50% - var(--slider-tick-size) / 2);
2203
+ }
2204
+ .fig-slider-input-container {
2205
+ &::before {
2206
+ --left-start: calc(var(--start-percent) - var(--slider-height) / 2);
2207
+ left: min(
2208
+ var(--left-start),
2209
+ var(--slider-percent) - (var(--slider-complete)) *
2210
+ var(--slider-height)
2211
+ );
2212
+ --width: calc(var(--slider-percent) - var(--start-percent));
2213
+ --abs-width: max(
2214
+ var(--width) + var(--slider-height) / 2 +
2215
+ (1 - var(--slider-complete)) * var(--slider-height),
2216
+ -1 * var(--width) + var(--slider-height) / 2 +
2217
+ (var(--slider-complete)) * var(--slider-height)
2218
+ );
2219
+ width: var(--abs-width);
2220
+ --delta: calc(var(--slider-complete) - var(--default));
2221
+ --abs-delta: max(var(--delta), -1 * var(--delta));
2222
+ opacity: calc(var(--abs-delta) * 100);
2223
+ }
2224
+ }
2225
+ }
2226
+
2227
+ &[type="hue"],
2228
+ &[type="opacity"] {
2229
+ .fig-slider-input-container {
2230
+ &::before {
2231
+ display: none;
2232
+ }
2233
+ }
2234
+ }
2235
+
2236
+ /* Chromium */
2237
+ input[type="range"] {
2238
+ height: var(--slider-height);
2239
+ appearance: none;
2240
+ -webkit-appearance: none;
2241
+ border-radius: calc(var(--slider-height) / 2);
2242
+ display: block;
2243
+ width: 100%;
2244
+ background-color: transparent;
2245
+ transition: var(--slider-transition);
2246
+ position: relative;
2247
+
2248
+ &:active::-webkit-slider-thumb {
2249
+ cursor: grabbing;
2250
+ cursor: -webkit-grabbing;
2251
+ }
2252
+
2253
+ &:focus {
2254
+ outline: none;
2255
+ }
2256
+
2257
+ &::-webkit-slider-thumb {
2258
+ appearance: none;
2259
+ background: transparent;
2260
+ -webkit-appearance: none;
2261
+ color-scheme: inherit;
2262
+ transition: var(--handle-transition);
2263
+ border-radius: 100%;
2264
+ height: var(--slider-thumb-size);
2265
+ width: var(--slider-thumb-size);
2266
+ margin-top: calc(var(--slider-height) / 2 - var(--slider-thumb-size) / 2);
2267
+ aspect-ratio: 1;
2268
+ border: none;
2269
+ position: relative;
2270
+ z-index: 1;
2271
+ cursor: default;
2272
+ box-shadow: var(--slider-handle-shadow);
2273
+ }
2274
+
2275
+ &:disabled {
2276
+ cursor: not-allowed;
2277
+
2278
+ &::-webkit-slider-runnable-track {
2279
+ color-scheme: inherit;
2280
+ background: linear-gradient(
2281
+ to right,
2282
+ var(--figma-color-bg-secondary) 0%,
2283
+ var(--figma-color-bg-secondary) var(--slider-percent),
2284
+ var(--figma-color-bg) var(--slider-percent)
2285
+ );
2286
+ }
2287
+
2288
+ &::-webkit-slider-thumb {
2289
+ box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
2290
+ }
2291
+ }
2292
+
2293
+ &::-webkit-slider-runnable-track {
2294
+ color-scheme: inherit;
2295
+ height: var(--slider-height);
2296
+ background-color: transparent;
2297
+ transition: var(--slider-transition);
2298
+ border-radius: calc(var(--slider-height) / 2);
2299
+ }
2300
+
2301
+ &.hue::-webkit-slider-runnable-track {
2302
+ background: var(--bg-hue);
2303
+ }
2304
+
2305
+ &.opacity::-webkit-slider-runnable-track {
2306
+ background:
2307
+ linear-gradient(to right, transparent, var(--color)),
2308
+ var(--checkerboard);
2309
+ }
2310
+ }
2311
+
2312
+ /* Firefox */
2313
+ input[type="range"] {
2314
+ height: var(--slider-height);
2315
+ appearance: none;
2316
+ -moz-appearance: none;
2317
+ border-radius: calc(var(--slider-height) / 2);
2318
+ display: block;
2319
+ width: 100%;
2320
+ background-color: transparent;
2321
+ transition: var(--slider-transition);
2322
+ position: relative;
2323
+
2324
+ &:focus {
2325
+ outline: none;
2326
+ }
2327
+
2328
+ &:active::-moz-range-thumb {
2329
+ cursor: grabbing;
2330
+ cursor: -webkit-grabbing;
2331
+ }
2332
+
2333
+ &::-moz-range-thumb {
2334
+ color-scheme: inherit;
2335
+ appearance: none;
2336
+ -moz-appearance: none;
2337
+ background: transparent;
2338
+ border-radius: 100%;
2339
+ height: var(--slider-thumb-size);
2340
+ width: var(--slider-thumb-size);
2341
+ aspect-ratio: 1;
2342
+ border: none;
2343
+ position: relative;
2344
+ z-index: 1;
2345
+ cursor: default;
2346
+ box-shadow: var(--slider-handle-shadow);
2347
+ transition: var(--handle-transition);
2348
+ }
2349
+
2350
+ &:disabled {
2351
+ cursor: not-allowed;
2352
+
2353
+ &::-moz-range-track {
2354
+ color-scheme: inherit;
2355
+ background: linear-gradient(
2356
+ to right,
2357
+ var(--figma-color-bg-secondary) 0%,
2358
+ var(--figma-color-bg-secondary) var(--slider-percent),
2359
+ var(--figma-color-bg) var(--slider-percent)
2360
+ );
2361
+ }
2362
+
2363
+ &::-moz-range-thumb {
2364
+ box-shadow: inset 0 0 0 1rem var(--figma-color-bg-disabled);
2365
+ }
2366
+ }
2367
+
2368
+ &::-moz-range-track {
2369
+ height: var(--slider-height);
2370
+ background-color: transparent;
2371
+ border-radius: calc(var(--slider-height) / 2);
2372
+ transition: var(--slider-transition);
2373
+ }
2374
+
2375
+ &.hue::-moz-range-track {
2376
+ background: var(--bg-hue);
2377
+ }
2378
+
2379
+ &.opacity::-moz-range-track {
2380
+ background:
2381
+ linear-gradient(to right, transparent, var(--color)),
2382
+ var(--checkerboard);
2383
+ }
2384
+ }
2385
+
2386
+ datalist {
2387
+ position: absolute;
2388
+ inset: 0;
2389
+ top: 0;
2390
+ display: flex;
2391
+ transition: var(--slider-transition);
2392
+ background: transparent;
2393
+ align-items: center;
2394
+ margin: 0;
2395
+ border: 0;
2396
+ appearance: none;
2397
+ padding: 0 calc((var(--slider-height) / 2) - var(--slider-tick-size) / 2);
2398
+ height: var(--slider-height);
2399
+ pointer-events: none;
2400
+ justify-content: space-between;
2401
+ width: 100%;
2402
+
2403
+ & option {
2404
+ appearance: none;
2405
+ width: var(--slider-tick-size);
2406
+ height: var(--slider-tick-size);
2407
+ aspect-ratio: 1;
2408
+ padding: 0;
2409
+ border: 0;
2410
+ border-radius: 100%;
2411
+ font-size: 0;
2412
+ background: var(--figma-color-icon-tertiary);
2413
+ display: block;
2414
+ &[default] {
2415
+ background: var(--figma-color-icon);
2416
+ }
2417
+
2418
+ &:first-child:last-child {
2419
+ margin: 0 auto;
2420
+ }
2421
+ }
2422
+ }
2423
+
2424
+ &[variant="minimal"] {
2425
+ --slider-height: 0.375rem;
2426
+ --slider-thumb-size: 0.75rem;
2427
+ --slider-tick-size: calc(var(--slider-height) / 2);
2428
+ --handle-transition: none;
2429
+ --slider-transition: none;
2430
+ --slider-handle-shadow:
2431
+ inset 0 0 0 calc(6px + 0.5rem * var(--unchanged)) var(--handle-color),
2432
+ 0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
2433
+ var(--figma-elevation-100);
2434
+
2435
+ .fig-slider-input-container {
2436
+ height: var(--slider-height);
2437
+ position: relative;
2438
+ display: block;
2439
+ width: 100%;
2440
+ }
2441
+ fig-input-text {
2442
+ height: calc(var(--slider-height) * 2);
2443
+ background-color: transparent;
2444
+ }
2445
+
2446
+ &:hover,
2447
+ &:focus-within {
2448
+ fig-input-text {
2449
+ height: auto;
2450
+ }
2451
+ }
2452
+ }
2453
+ &[variant="neue"] {
2454
+ --slider-height: 0.375rem;
2455
+ --slider-thumb-size: 0.75rem;
2456
+ --slider-tick-size: calc(var(--slider-height) / 2);
2457
+ --handle-transition: none;
2458
+ --slider-transition: none;
2459
+ --slider-handle-shadow:
2460
+ inset 0 0 0 calc(6px + 0.5rem * var(--unchanged)) var(--handle-color),
2461
+ 0 0 0 0.75px rgba(0, 0, 0, 0.075), inset 0 0 0 5px rgba(0, 0, 0, 0.1),
2462
+ var(--figma-elevation-100);
2463
+
2464
+ background-color: var(--figma-color-bg-secondary);
2465
+ border-radius: var(--radius-medium);
2466
+ padding-left: var(--spacer-2);
2467
+
2468
+ &:not([text="true"]) {
2469
+ padding-right: var(--spacer-2);
2470
+ }
2471
+
2472
+ .fig-slider-input-container {
2473
+ height: var(--slider-height);
2474
+ position: relative;
2475
+ display: block;
2476
+ width: 100%;
2477
+ box-shadow: none;
2478
+ background-color: var(--figma-color-bg-tertiary);
2479
+ }
2480
+ fig-input-text,
2481
+ fig-input-number {
2482
+ flex-basis: 5rem;
2483
+ border-top-left-radius: 0;
2484
+ border-bottom-left-radius: 0;
2485
+ border-left: 1px solid var(--figma-color-bg);
2486
+ }
2487
+
2488
+ &:hover,
2489
+ &:focus-within {
2490
+ fig-input-text,
2491
+ fig-input-number {
2492
+ height: auto;
2493
+ }
2494
+ }
2495
+ }
2496
+ }
2497
+
2498
+ /* Popovers/Dialogs */
2499
+ .dialog,
2500
+ dialog,
2501
+ .popover,
2502
+ [popover] {
2503
+ padding: 0;
2504
+ outline: 0;
2505
+ border: 0;
2506
+ inset: auto;
2507
+ color: var(--figma-color-text);
2508
+ border-radius: var(--radius-large, 0.8125rem);
2509
+ background: var(--figma-color-bg);
2510
+ min-width: var(--popover-min-width);
2511
+
2512
+ box-shadow: var(--figma-elevation-500-modal-window);
2513
+
2514
+ footer {
2515
+ display: flex;
2516
+ justify-content: flex-end;
2517
+ padding: var(--spacer-2);
2518
+ gap: var(--spacer-2);
2519
+ }
2520
+ p {
2521
+ padding: 0 var(--spacer-3);
2522
+ }
2523
+
2524
+ &:popover-open {
2525
+ display: block;
2526
+ outline: none !important;
2527
+ }
2528
+
2529
+ & header {
2530
+ height: var(--spacer-6);
2531
+ margin: 0;
2532
+ padding: var(--spacer-2);
2533
+ display: flex;
2534
+ align-items: center;
2535
+ font-weight: var(--body-medium-strong-fontWeight);
2536
+ box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
2537
+
2538
+ & h3 {
2539
+ font: inherit;
2540
+ }
2541
+
2542
+ & > :first-child {
2543
+ padding-left: var(--spacer-2);
2544
+ }
2545
+ }
2546
+
2547
+ &[tooltip] {
2548
+ color: var(--color-tooltip);
2549
+ background-color: var(--bg-tooltip);
2550
+ padding: var(--spacer-1) var(--spacer-2);
2551
+ line-height: 1rem !important;
2552
+ box-sizing: content-box;
2553
+ min-width: var(--popover-min-width);
2554
+ max-width: var(--popover-min-width);
2555
+ /*top: calc(anchor(top) - 1ch - (var(--spacer-1) * 2 + 1rem));*/
2556
+ top: anchor(top);
2557
+ left: anchor(center);
2558
+ /*transform: translate(-50%,-100%);*/
2559
+
2560
+ white-space: nowrap;
2561
+ overflow: hidden;
2562
+ text-overflow: ellipsis;
2563
+
2564
+ border-radius: var(--radius-medium, 0.3125rem);
2565
+ box-shadow:
2566
+ 0px 0px 0.5px 0px rgba(0, 0, 0, 0.15),
2567
+ 0px 5px 12px 0px rgba(0, 0, 0, 0.13),
2568
+ 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
2569
+
2570
+ @supports (-webkit-line-clamp: 2) {
2571
+ white-space: initial;
2572
+ -webkit-line-clamp: 2;
2573
+ -webkit-box-orient: vertical;
2574
+ }
2575
+
2576
+ &:popover-open {
2577
+ display: inline-block;
2578
+
2579
+ @supports (-webkit-line-clamp: 2) {
2580
+ display: -webkit-box;
2581
+ }
2582
+
2583
+ min-width: 0;
2584
+ }
2585
+ }
2586
+ }
2587
+ dialog[is="fig-dialog"] {
2588
+ --z-index: 999999;
2589
+ z-index: var(--z-index);
2590
+ }
2591
+
2592
+ dialog[is="fig-popup"] {
2593
+ --z-index: 999999;
2594
+ --beak-offset: 1px;
2595
+ z-index: var(--z-index);
2596
+ position: fixed;
2597
+ margin: 0;
2598
+ min-width: 0;
2599
+ padding: 0;
2600
+ overflow: auto;
2601
+
2602
+ &[autoresize]:not([autoresize="false"]) {
2603
+ width: max-content;
2604
+ max-width: calc(100vw - var(--spacer-4));
2605
+ max-height: calc(100vh - var(--spacer-4));
2606
+ }
2607
+
2608
+ &[open] {
2609
+ display: block;
2610
+ }
2611
+
2612
+ &[theme="dark"] {
2613
+ color-scheme: dark;
2614
+ }
2615
+
2616
+ &[theme="light"] {
2617
+ color-scheme: light;
2618
+ }
2619
+
2620
+ &[theme="menu"] {
2621
+ background-color: var(--figma-color-bg-menu);
2622
+ color: var(--figma-color-text-menu);
2623
+ color-scheme: dark;
2624
+ }
2625
+
2626
+ &[variant="popover"] {
2627
+ overflow: visible;
2628
+ box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
2629
+ filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
2630
+ drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
2631
+ drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
2632
+
2633
+ &:after {
2634
+ content: "";
2635
+ background-color: inherit;
2636
+ clip-path: path(
2637
+ "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"
2638
+ );
2639
+ position: absolute;
2640
+ width: 1rem;
2641
+ height: 6px;
2642
+ z-index: 2;
2643
+ pointer-events: none;
2644
+ }
2645
+
2646
+ &[data-beak-side="bottom"]:after {
2647
+ top: calc(100% - 1px);
2648
+ left: var(--beak-offset, 50%);
2649
+ transform: translateX(-50%);
2650
+ }
2651
+
2652
+ &[data-beak-side="top"]:after {
2653
+ top: 1px;
2654
+ left: var(--beak-offset, 50%);
2655
+ transform: translate(-50%, -100%) scaleY(-1);
2656
+ }
2657
+
2658
+ &[data-beak-side="left"]:after {
2659
+ left: 6px;
2660
+ top: var(--beak-offset, 50%);
2661
+ transform: translate(-100%, -50%) rotate(90deg);
2662
+ }
2663
+
2664
+ &[data-beak-side="right"]:after {
2665
+ left: calc(100% - 6px);
2666
+ top: var(--beak-offset, 50%);
2667
+ transform: translate(0, -50%) rotate(-90deg);
2668
+ }
2669
+ }
2670
+ }
2671
+
2672
+ dialog[is="fig-toast"] {
2673
+ --z-index: 999999;
2674
+ z-index: var(--z-index);
2675
+ box-shadow: var(--figma-elevation-100);
2676
+ border-radius: var(--radius-large);
2677
+ padding: var(--spacer-2) var(--spacer-3);
2678
+ align-items: center;
2679
+ gap: var(--spacer-2);
2680
+ height: 2.5rem;
2681
+ justify-content: center;
2682
+ min-width: 0;
2683
+ color: var(--figma-color-text);
2684
+
2685
+ &[open] {
2686
+ display: flex;
2687
+ }
2688
+
2689
+ & p {
2690
+ margin: 0;
2691
+ padding: 0;
2692
+ color: inherit;
2693
+ font-weight: var(--body-medium-strong-fontWeight);
2694
+ }
2695
+
2696
+ hr[vertical] {
2697
+ margin: 0;
2698
+ }
2699
+
2700
+ & fig-button:last-child {
2701
+ margin-right: calc(var(--spacer-2) * -1);
2702
+ }
2703
+
2704
+ /* Theme: Dark (default) - hardcoded to ensure consistency regardless of global theme */
2705
+ &[theme="dark"] {
2706
+ background-color: #2c2c2c;
2707
+ color: rgba(255, 255, 255, 0.9);
2708
+ color-scheme: dark;
2709
+ }
2710
+
2711
+ /* Theme: Light - hardcoded to ensure consistency regardless of global theme */
2712
+ &[theme="light"] {
2713
+ background-color: #ffffff;
2714
+ color: rgba(0, 0, 0, 0.9);
2715
+ box-shadow: var(--figma-elevation-500-modal-window);
2716
+ color-scheme: light;
2717
+ }
2718
+
2719
+ /* Theme: Danger - hardcoded to ensure consistency regardless of global theme */
2720
+ &[theme="danger"] {
2721
+ background-color: #f24822;
2722
+ color: #ffffff;
2723
+ color-scheme: dark;
2724
+ }
2725
+
2726
+ /* Theme: Brand - hardcoded to ensure consistency regardless of global theme */
2727
+ &[theme="brand"] {
2728
+ background-color: #0d99ff;
2729
+ color: #ffffff;
2730
+ color-scheme: dark;
2731
+ }
2732
+ }
2733
+
2734
+ /* Tooltip */
2735
+ fig-tooltip {
2736
+ display: contents;
2737
+ }
2738
+ .fig-tooltip {
2739
+ inset: unset;
2740
+ display: inline-block;
2741
+ color: var(--color-tooltip);
2742
+ background-color: var(--bg-tooltip);
2743
+ padding: var(--spacer-1) var(--spacer-2);
2744
+ line-height: 1rem !important;
2745
+ font-weight: inherit;
2746
+ border-radius: var(--radius-medium, 0.3125rem);
2747
+ max-width: 180px;
2748
+ width: max-content;
2749
+
2750
+ & > span {
2751
+ text-wrap: balance;
2752
+ max-height: 2.5rem;
2753
+ overflow-y: hidden;
2754
+ display: -webkit-box;
2755
+ -webkit-line-clamp: 2;
2756
+ -webkit-box-orient: vertical;
2757
+ line-clamp: 2;
2758
+ text-overflow: ellipsis;
2759
+ width: auto;
2760
+ }
2761
+
2762
+ &:after {
2763
+ content: "";
2764
+ background-color: var(--bg-tooltip);
2765
+ clip-path: path(
2766
+ "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"
2767
+ );
2768
+ width: 1rem;
2769
+ height: 6px;
2770
+ position: absolute;
2771
+ top: calc(100% - 1px);
2772
+ left: var(--beak-offset, 50%);
2773
+ z-index: 2;
2774
+ transform: translate(-50%);
2775
+ }
2776
+
2777
+ &[position="bottom"] {
2778
+ &:after {
2779
+ top: 1px;
2780
+ left: var(--beak-offset, 50%);
2781
+ transform: translate(-50%, -100%) scaleY(-1);
2782
+ }
2783
+ }
2784
+ }
2785
+
2786
+ .fig-tooltip {
2787
+ overflow: visible;
2788
+ box-shadow: inset 0 0.5px 0 0 rgba(255, 255, 255, 0.1);
2789
+ filter: drop-shadow(0px 1px 1.5px rgba(0, 0, 0, 0.1))
2790
+ drop-shadow(0px 2.5px 6px rgba(0, 0, 0, 0.13))
2791
+ drop-shadow(0px 0px 0.5px rgba(0, 0, 0, 0.15));
2792
+
2793
+ &:after {
2794
+ content: "";
2795
+ background-color: inherit;
2796
+ clip-path: path(
2797
+ "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"
2798
+ );
2799
+ width: 1rem;
2800
+ height: 6px;
2801
+ position: absolute;
2802
+ top: calc(100% - 1px);
2803
+ left: var(--beak-offset, 50%);
2804
+ z-index: 2;
2805
+ transform: translate(-50%);
2806
+ }
2807
+
2808
+ &[position="bottom"] {
2809
+ &:after {
2810
+ top: 1px;
2811
+ left: var(--beak-offset, 50%);
2812
+ transform: translate(-50%, -100%) scaleY(-1);
2813
+ }
2814
+ }
2815
+ }
2816
+
2817
+ /* UI Icons */
2818
+ fig-icon {
2819
+ display: block;
2820
+ }
2821
+
2822
+ fig-icon.close {
2823
+ width: 1rem;
2824
+ height: 1rem;
2825
+ background-color: var(--figma-color-text);
2826
+ clip-path: path(
2827
+ "M11.6464 3.64645C11.8417 3.45118 12.1583 3.45118 12.3536 3.64645C12.5488 3.84171 12.5488 4.15829 12.3536 4.35355L8.70711 8L12.3536 11.6464C12.5488 11.8417 12.5488 12.1583 12.3536 12.3536C12.1583 12.5488 11.8417 12.5488 11.6464 12.3536L8 8.70711L4.35355 12.3536C4.15829 12.5488 3.84171 12.5488 3.64645 12.3536C3.45118 12.1583 3.45118 11.8417 3.64645 11.6464L7.29289 8L3.64645 4.35355C3.45118 4.15829 3.45118 3.84171 3.64645 3.64645C3.84171 3.45118 4.15829 3.45118 4.35355 3.64645L8 7.29289L11.6464 3.64645Z"
2828
+ );
2829
+ }
2830
+
2831
+ /* Web Components */
2832
+ fig-button,
2833
+ fig-content,
2834
+ fig-slider,
2835
+ fig-switch,
2836
+ fig-input-color,
2837
+ fig-input-fill,
2838
+ fig-checkbox,
2839
+ fig-radio,
2840
+ fig-tab,
2841
+ fig-tabs,
2842
+ fig-segmented-control {
2843
+ display: inline-flex;
2844
+ gap: var(--spacer-2);
2845
+ user-select: none;
2846
+
2847
+ &[full] {
2848
+ display: flex;
2849
+ width: 100%;
2850
+ }
2851
+ }
2852
+
2853
+ fig-checkbox,
2854
+ fig-radio {
2855
+ align-items: center;
2856
+ padding-top: 0.25rem;
2857
+ padding-bottom: 0.25rem;
2858
+
2859
+ & label span {
2860
+ vertical-align: middle;
2861
+ }
2862
+ }
2863
+
2864
+ fig-switch {
2865
+ align-items: center;
2866
+ padding-top: 0.25rem;
2867
+ padding-bottom: 0.25rem;
2868
+ }
2869
+
2870
+ fig-input-color {
2871
+ --alpha: 1;
2872
+ }
2873
+
2874
+ fig-header {
2875
+ height: var(--spacer-6);
2876
+ margin: 0;
2877
+ padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);
2878
+ display: flex;
2879
+ align-items: center;
2880
+ box-shadow: inset 0 -1px 0 0 var(--figma-color-border);
2881
+ gap: 0.25rem;
2882
+
2883
+ & h3 {
2884
+ font-weight: var(--body-medium-strong-fontWeight);
2885
+ flex-grow: 1;
2886
+ }
2887
+
2888
+ &[borderless] {
2889
+ box-shadow: none;
2890
+ }
2891
+ }
2892
+
2893
+ fig-footer {
2894
+ display: flex;
2895
+ align-items: center;
2896
+ justify-content: flex-end;
2897
+ gap: var(--spacer-2);
2898
+ height: var(--spacer-6);
2899
+ padding: var(--spacer-1) var(--spacer-2) var(--spacer-1) var(--spacer-3);
2900
+ box-shadow: inset 0 1px 0 0 var(--figma-color-border);
2901
+
2902
+ & h3 {
2903
+ font-weight: var(--body-medium-strong-fontWeight);
2904
+ flex-grow: 1;
2905
+ display: flex;
2906
+ align-items: baseline;
2907
+ gap: var(--spacer-half);
2908
+ }
2909
+
2910
+ &[borderless] {
2911
+ box-shadow: none;
2912
+ }
2913
+
2914
+ &[sticky]:not([sticky="false"]) {
2915
+ position: sticky;
2916
+ bottom: 0;
2917
+ z-index: 10;
2918
+ margin-top: auto;
2919
+ background: var(--figma-color-bg);
2920
+ }
2921
+ }
2922
+
2923
+ fig-content {
2924
+ padding: var(--spacer-2) 0;
2925
+ display: block;
2926
+ }
2927
+
2928
+ vstack,
2929
+ .vstack,
2930
+ [vstack] {
2931
+ display: flex;
2932
+ flex-direction: column;
2933
+ align-items: start;
2934
+ gap: var(--spacer-2);
2935
+ flex-wrap: wrap;
2936
+ }
2937
+
2938
+ hstack,
2939
+ .hstack,
2940
+ [hstack] {
2941
+ display: flex;
2942
+ gap: var(--spacer-2);
2943
+ align-items: start;
2944
+ flex-wrap: nowrap;
2945
+ }
2946
+
2947
+ fig-input-text,
2948
+ fig-input-number {
2949
+ background-color: var(--figma-color-bg-secondary);
2950
+ border: 0;
2951
+ border-radius: var(--radius-medium);
2952
+ display: inline-flex;
2953
+ flex-wrap: nowrap;
2954
+ justify-content: center;
2955
+ user-select: all;
2956
+ gap: 0;
2957
+ min-width: 0;
2958
+ flex: 1;
2959
+ color: var(--figma-color-text);
2960
+
2961
+ &[multiline] {
2962
+ display: flex;
2963
+ width: 100%; /* Multiline defaults to full width */
2964
+ }
2965
+ &[autoresize] input,
2966
+ &[autoresize] textarea {
2967
+ field-sizing: content;
2968
+ }
2969
+ &[resizable] input,
2970
+ &[resizable] textarea {
2971
+ resize: both;
2972
+ }
2973
+ &[resizable]:has(textarea[style*="width"]),
2974
+ &[resizable]:has(textarea[style*="height"]),
2975
+ &[resizable]:has(input[style*="width"]),
2976
+ &[resizable]:has(input[style*="height"]) {
2977
+ flex: unset;
2978
+ }
2979
+
2980
+ & label,
2981
+ & [slot] {
2982
+ display: flex;
2983
+ flex-wrap: nowrap;
2984
+ justify-content: center;
2985
+ align-items: center;
2986
+ width: 100%;
2987
+ }
2988
+
2989
+ & [slot] {
2990
+ user-select: none;
2991
+ width: 1.5rem;
2992
+ color: var(--figma-color-text-secondary);
2993
+ }
2994
+
2995
+ & [slot="prepend"] {
2996
+ padding-right: 0;
2997
+ margin-right: calc(var(--spacer-2) * -1);
2998
+ }
2999
+
3000
+ & [slot="append"] {
3001
+ padding-left: 0;
3002
+ margin-left: calc(var(--spacer-2) * -1);
3003
+ }
3004
+
3005
+ & input {
3006
+ background-color: transparent !important;
3007
+ flex: 1;
3008
+
3009
+ &:focus,
3010
+ &:active {
3011
+ box-shadow: none !important;
3012
+ }
3013
+ }
3014
+
3015
+ &:has(input:focus) {
3016
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
3017
+ outline: 0;
3018
+ }
3019
+ &:hover {
3020
+ box-shadow: inset 0 0 0 1px var(--figma-color-border);
3021
+ }
3022
+ /* Disabled */
3023
+ &[disabled]:not([disabled="false"]) {
3024
+ background-color: var(--figma-color-bg);
3025
+ pointer-events: none;
3026
+ cursor: not-allowed;
3027
+ color: var(--figma-color-text-disabled);
3028
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-disabled);
3029
+ & [slot] {
3030
+ color: var(--figma-color-text-disabled);
3031
+ }
3032
+ }
3033
+ }
3034
+
3035
+ fig-input-number > [slot],
3036
+ fig-input-text[type="number"] > [slot] {
3037
+ cursor: ew-resize !important;
3038
+ }
3039
+
3040
+ fig-input-color,
3041
+ fig-input-fill {
3042
+ & > .input-combo > fig-chit:not(:only-child),
3043
+ & > .input-combo > fig-chit:not(:only-child) > input,
3044
+ & > .input-combo > fig-fill-picker:not(:only-child),
3045
+ & > .input-combo > fig-fill-picker:not(:only-child) > fig-chit > input,
3046
+ & fig-fill-picker:not(:only-child) {
3047
+ border-top-right-radius: 0 !important;
3048
+ border-bottom-right-radius: 0 !important;
3049
+ }
3050
+
3051
+ & > .input-combo {
3052
+ flex: 1;
3053
+ min-width: 0;
3054
+ }
3055
+
3056
+ fig-input-number {
3057
+ flex: 0;
3058
+ flex-basis: 3rem;
3059
+ }
3060
+
3061
+ &[disabled]:not([disabled="false"]) {
3062
+ .input-combo {
3063
+ gap: 0;
3064
+ }
3065
+ }
3066
+
3067
+ fig-field[direction="horizontal"] &,
3068
+ fig-field[direction="row"] & {
3069
+ flex: 1;
3070
+ min-width: 0;
3071
+ }
3072
+ }
3073
+
3074
+ fig-slider {
3075
+ display: flex;
3076
+
3077
+ & .slider {
3078
+ flex-grow: 1;
3079
+ }
3080
+
3081
+ & fig-input-number {
3082
+ flex-basis: 5rem;
3083
+ }
3084
+
3085
+ fig-field[direction="horizontal"] &,
3086
+ fig-field[direction="row"] & {
3087
+ flex: 1;
3088
+ min-width: 0;
3089
+ }
3090
+ }
3091
+
3092
+ fig-field,
3093
+ .fig-field {
3094
+ --field-label-width: 4rem;
3095
+ display: flex;
3096
+ padding: var(--spacer-1) var(--spacer-3);
3097
+ margin: 0;
3098
+ flex-direction: column;
3099
+ gap: 0;
3100
+ align-items: start;
3101
+
3102
+ &[direction="row"],
3103
+ &[direction="horizontal"] {
3104
+ flex-direction: row;
3105
+ align-items: center;
3106
+ gap: var(--spacer-2);
3107
+ }
3108
+
3109
+ & > [full] {
3110
+ flex: 1;
3111
+ flex: 1 1 auto;
3112
+ }
3113
+
3114
+ & > label {
3115
+ flex: 0;
3116
+ padding: var(--spacer-1) 0;
3117
+ display: flex;
3118
+ justify-content: space-between;
3119
+ min-height: calc(1rem + var(--spacer-1) * 2);
3120
+ align-items: center;
3121
+ width: 100%;
3122
+ }
3123
+
3124
+ &[direction="row"] > label,
3125
+ &[direction="horizontal"] > label {
3126
+ width: auto;
3127
+ min-width: var(--field-label-width);
3128
+ }
3129
+
3130
+ &[direction="horizontal"] {
3131
+ gap: var(--spacer-2);
3132
+ align-items: start;
3133
+ flex-direction: row;
3134
+
3135
+ & > label {
3136
+ min-width: 4rem;
3137
+ }
3138
+ &[columns="thirds"] {
3139
+ display: grid;
3140
+ grid-template-columns: repeat(3, 1fr);
3141
+ gap: var(--spacer-2);
3142
+
3143
+ & > label {
3144
+ grid-column: 1;
3145
+ }
3146
+
3147
+ & > label ~ * {
3148
+ grid-column: 2 / span 2;
3149
+ }
3150
+ }
3151
+ &[columns="half"] {
3152
+ display: grid;
3153
+ grid-template-columns: repeat(2, 1fr);
3154
+ gap: var(--spacer-2);
3155
+
3156
+ & > label {
3157
+ grid-column: 1;
3158
+ }
3159
+
3160
+ & > label ~ * {
3161
+ grid-column: 2 / span 2;
3162
+ }
3163
+ }
3164
+ }
3165
+ }
3166
+
3167
+ fig-spinner {
3168
+ width: 1rem;
3169
+ height: 1rem;
3170
+ display: inline-flex;
3171
+ background-color: var(--figma-color-icon-tertiary);
3172
+ clip-path: path(
3173
+ "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"
3174
+ );
3175
+ animation: fig-spinner-spin 1s linear infinite;
3176
+ }
3177
+
3178
+ /* Segmented control */
3179
+ .segmented-control,
3180
+ fig-segmented-control {
3181
+ display: inline-flex;
3182
+ user-select: none;
3183
+ background-color: var(--figma-color-bg-secondary);
3184
+ border: 0;
3185
+ border-radius: var(--radius-medium);
3186
+ height: 1.5rem;
3187
+ padding: 1px;
3188
+ gap: 0;
3189
+ display: inline-flex;
3190
+ align-items: stretch;
3191
+
3192
+ & fig-segment {
3193
+ flex: 1;
3194
+ display: flex;
3195
+ align-items: center;
3196
+ justify-content: center;
3197
+ position: relative;
3198
+ appearance: none;
3199
+ color: var(--figma-color-text-secondary);
3200
+ padding: 0 var(--spacer-2);
3201
+
3202
+ &[selected]:not([selected="false"]),
3203
+ &[selected="true"] {
3204
+ color: var(--figma-color-text);
3205
+ background-color: var(--figma-color-bg);
3206
+ border-radius: calc(var(--radius-medium) - 1px);
3207
+ box-shadow: 0 0 0 1px var(--figma-color-border);
3208
+ }
3209
+
3210
+ svg {
3211
+ *[fill] {
3212
+ fill: currentColor;
3213
+ }
3214
+ *[stroke]:not([stroke="none"]) {
3215
+ stroke: currentColor;
3216
+ }
3217
+ }
3218
+ }
3219
+
3220
+ &[size="large"] {
3221
+ height: var(--spacer-5);
3222
+
3223
+ & fig-segment {
3224
+ padding: 0 var(--spacer-3);
3225
+ }
3226
+ }
3227
+
3228
+ &[disabled]:not([disabled="false"]) {
3229
+ pointer-events: none;
3230
+
3231
+ fig-segment {
3232
+ color: var(--figma-color-text-disabled);
3233
+ background-color: transparent;
3234
+ box-shadow: none;
3235
+ }
3236
+ }
3237
+ }
3238
+
3239
+ fig-joystick {
3240
+ --size: 100%;
3241
+ --aspect-ratio: 1 / 1;
3242
+ display: flex;
3243
+ flex-direction: column;
3244
+ gap: var(--spacer-2);
3245
+ user-select: none;
3246
+ width: var(--size);
3247
+
3248
+ /* When inside horizontal fig-field, grow to fill and let inputs expand */
3249
+ fig-field[direction="horizontal"] & {
3250
+ flex: 1;
3251
+ min-width: 0;
3252
+
3253
+ fig-input-number {
3254
+ flex: 1;
3255
+ width: auto;
3256
+ }
3257
+ }
3258
+
3259
+ .joystick-values {
3260
+ display: grid;
3261
+ grid-template-columns: 1fr 1fr;
3262
+ gap: var(--spacer-2);
3263
+ }
3264
+
3265
+ .joystick-values > fig-input-number {
3266
+ width: 100%;
3267
+ }
3268
+
3269
+ .fig-input-joystick-plane-container {
3270
+ display: flex;
3271
+ width: 100%;
3272
+ aspect-ratio: var(--aspect-ratio);
3273
+ place-items: center;
3274
+ flex-shrink: 0;
3275
+ flex-grow: 0;
3276
+ align-items: center;
3277
+ justify-content: center;
3278
+ position: relative;
3279
+ &:focus {
3280
+ outline: 0;
3281
+ }
3282
+ }
3283
+
3284
+ .fig-joystick-axis-label {
3285
+ position: absolute;
3286
+ z-index: 1;
3287
+ pointer-events: none;
3288
+ user-select: none;
3289
+ color: var(--figma-color-text-tertiary);
3290
+ font-size: 10px;
3291
+ line-height: 1;
3292
+ letter-spacing: 0.01em;
3293
+ font-weight: 700;
3294
+ text-shadow:
3295
+ 1px 0 0 var(--figma-color-bg-secondary),
3296
+ -1px 0 0 var(--figma-color-bg-secondary),
3297
+ 0 1px 0 var(--figma-color-bg-secondary),
3298
+ 0 -1px 0 var(--figma-color-bg-secondary);
3299
+
3300
+ &.top {
3301
+ top: var(--spacer-2);
3302
+ left: 50%;
3303
+ transform: translateX(-50%);
3304
+ }
3305
+
3306
+ &.bottom {
3307
+ bottom: var(--spacer-2);
3308
+ left: 50%;
3309
+ transform: translateX(-50%);
3310
+ }
3311
+
3312
+ &.left {
3313
+ left: var(--spacer-2);
3314
+ top: 50%;
3315
+ transform: translateY(-50%) rotate(-90deg);
3316
+ transform-origin: center;
3317
+
3318
+ &.no-rotate {
3319
+ transform: translateY(-50%);
3320
+ }
3321
+ }
3322
+
3323
+ &.right {
3324
+ right: var(--spacer-2);
3325
+ top: 50%;
3326
+ transform: translateY(-50%) rotate(90deg);
3327
+ transform-origin: center;
3328
+ }
3329
+ }
3330
+
3331
+ .fig-input-joystick-plane {
3332
+ display: inline-grid;
3333
+ place-items: center;
3334
+ position: relative;
3335
+ width: 100%;
3336
+ height: 100%;
3337
+ flex-shrink: 0;
3338
+ }
3339
+ .fig-input-joystick-plane > * {
3340
+ grid-area: 1/1;
3341
+ }
3342
+ .fig-input-joystick-guides {
3343
+ position: absolute;
3344
+ width: var(--size);
3345
+ height: var(--size);
3346
+ border-radius: var(--radius-medium);
3347
+ overflow: hidden;
3348
+ background: var(--figma-color-bg-secondary);
3349
+
3350
+ &:before {
3351
+ content: "";
3352
+ position: absolute;
3353
+ height: 0;
3354
+ border-left: 1px solid var(--figma-color-border);
3355
+ height: calc(100% - 2px);
3356
+ top: 1px;
3357
+ left: calc(50% - 0.5px);
3358
+ pointer-events: none;
3359
+ }
3360
+ &:after {
3361
+ content: "";
3362
+ position: absolute;
3363
+ height: 0;
3364
+ border-top: 1px solid var(--figma-color-border);
3365
+ width: calc(100% - 2px);
3366
+ top: calc(50% - 0.5px);
3367
+ left: 1px;
3368
+ pointer-events: none;
3369
+ }
3370
+ }
3371
+ .fig-input-joystick-plane.dragging .fig-input-joystick-guides {
3372
+ background:
3373
+ linear-gradient(
3374
+ 45deg,
3375
+ transparent calc(50% - 0.5px),
3376
+ var(--figma-color-border) calc(50% - 0.5px),
3377
+ var(--figma-color-border) calc(50% + 0.5px),
3378
+ transparent calc(50% + 0.5px)
3379
+ ),
3380
+ linear-gradient(
3381
+ -45deg,
3382
+ transparent calc(50% - 0.5px),
3383
+ var(--figma-color-border) calc(50% - 0.5px),
3384
+ var(--figma-color-border) calc(50% + 0.5px),
3385
+ transparent calc(50% + 0.5px)
3386
+ ),
3387
+ var(--figma-color-bg-secondary);
3388
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
3389
+ }
3390
+ .fig-input-joystick-plane-container:focus .fig-input-joystick-guides {
3391
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
3392
+ }
3393
+
3394
+ .fig-input-joystick-handle {
3395
+ position: absolute;
3396
+ z-index: 2;
3397
+ width: 1rem;
3398
+ height: 1rem;
3399
+ background: var(--figma-color-bg-brand);
3400
+ box-shadow:
3401
+ inset 0 0 0 0.125rem var(--handle-color),
3402
+ 0px 0 0 0.5px rgba(0, 0, 0, 0.1),
3403
+ var(--elevation-100-canvas);
3404
+ border-radius: 50%;
3405
+ transform: translate(-50%, -50%);
3406
+ transition: box-shadow var(--slider-transition);
3407
+ }
3408
+ }
3409
+
3410
+ fig-input-angle {
3411
+ --size: 1.5rem;
3412
+ display: inline-flex;
3413
+ gap: var(--spacer-2);
3414
+ user-select: none;
3415
+
3416
+ /* When inside horizontal fig-field, grow to fill and let inputs expand */
3417
+ fig-field[direction="horizontal"] & {
3418
+ flex: 1;
3419
+ min-width: 0;
3420
+
3421
+ fig-input-number {
3422
+ flex: 1;
3423
+ width: auto;
3424
+ }
3425
+ }
3426
+
3427
+ .fig-input-angle-plane {
3428
+ display: inline-grid;
3429
+ place-items: center;
3430
+ width: var(--size);
3431
+ height: var(--size);
3432
+ aspect-ratio: 1/1;
3433
+ flex-shrink: 0;
3434
+ background-color: var(--figma-color-bg-secondary);
3435
+ border-radius: 100%;
3436
+ box-shadow: inset 0 0 0 1px var(--figma-color-border);
3437
+ &:focus,
3438
+ &.dragging {
3439
+ outline: 0;
3440
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
3441
+ }
3442
+ }
3443
+ .fig-input-angle-handle {
3444
+ display: inline-grid;
3445
+ place-items: center;
3446
+ grid-area: 1/1;
3447
+ width: calc(0.5rem + 2px);
3448
+ height: calc(0.5rem + 2px);
3449
+ &::before {
3450
+ content: "";
3451
+ display: block;
3452
+ width: 0.5rem;
3453
+ height: 0.5rem;
3454
+ background: var(--handle-color);
3455
+ box-shadow: var(--handle-shadow);
3456
+ border-radius: 50%;
3457
+ }
3458
+ }
3459
+ }
3460
+
3461
+ /* Layer */
3462
+ fig-layer {
3463
+ --indent: var(--spacer-2);
3464
+ display: block;
3465
+ color: var(--figma-color-text);
3466
+ position: relative;
3467
+ user-select: none;
3468
+ width: 100%;
3469
+ border-radius: var(--radius-medium);
3470
+
3471
+ /* When layer has children */
3472
+ &:has(fig-layer) {
3473
+ & > .fig-layer-row {
3474
+ & > .fig-layer-chevron {
3475
+ visibility: visible;
3476
+ }
3477
+ }
3478
+ }
3479
+
3480
+ & > .fig-layer-row {
3481
+ display: flex;
3482
+ align-items: center;
3483
+ gap: var(--spacer-1);
3484
+ padding: var(--spacer-1) var(--spacer-2);
3485
+ margin-left: 0;
3486
+ height: var(--spacer-4);
3487
+ border-radius: var(--radius-medium);
3488
+ position: relative;
3489
+
3490
+ /* Chevron element - injected by JS when layer has children */
3491
+ .fig-layer-chevron {
3492
+ mask-image: var(--icon-chevron);
3493
+ mask-size: contain;
3494
+ mask-repeat: no-repeat;
3495
+ mask-position: center;
3496
+ display: flex;
3497
+ visibility: hidden;
3498
+ background: var(--figma-color-text-tertiary);
3499
+ width: var(--spacer-3);
3500
+ height: var(--spacer-3);
3501
+ flex-shrink: 0;
3502
+ transition: transform 0.15s;
3503
+ position: absolute;
3504
+ left: calc(var(--spacer-3) * -1);
3505
+ top: var(--spacer-1);
3506
+ rotate: -90deg;
3507
+ }
3508
+
3509
+ &:hover {
3510
+ background: var(--figma-color-bg-secondary);
3511
+
3512
+ .fig-layer-actions {
3513
+ opacity: 1;
3514
+ }
3515
+ }
3516
+
3517
+ /* Layer icon */
3518
+ .fig-layer-icon {
3519
+ flex-shrink: 0;
3520
+ width: var(--spacer-3);
3521
+ height: var(--spacer-3);
3522
+ color: var(--figma-color-icon-tertiary);
3523
+ margin-left: calc(var(--spacer-1) * -1);
3524
+ }
3525
+
3526
+ > label {
3527
+ flex: 1;
3528
+ min-width: 0;
3529
+ overflow: hidden;
3530
+ text-overflow: ellipsis;
3531
+ white-space: nowrap;
3532
+ color: var(--figma-color-text);
3533
+ }
3534
+ }
3535
+
3536
+ .fig-layer-actions {
3537
+ display: flex;
3538
+ margin-right: calc(-1 * var(--spacer-1));
3539
+ gap: 0;
3540
+ opacity: 0;
3541
+ transition: opacity 0.15s;
3542
+ flex-shrink: 0;
3543
+
3544
+ > * {
3545
+ flex-shrink: 0;
3546
+ }
3547
+ }
3548
+
3549
+ /* Nested layers indentation */
3550
+ > fig-layer {
3551
+ padding-left: var(--indent);
3552
+ margin-top: 1px;
3553
+ }
3554
+
3555
+ /* Collapsed state - hide children */
3556
+ &:not([open]) > fig-layer,
3557
+ &[open="false"] > fig-layer {
3558
+ display: none;
3559
+ }
3560
+
3561
+ &[open]:not([open="false"]) {
3562
+ /* Rotate chevron when open */
3563
+ & > .fig-layer-row > .fig-layer-chevron {
3564
+ rotate: 0deg;
3565
+ }
3566
+ }
3567
+
3568
+ /* Dimmed when not visible */
3569
+ &[visible="false"] > .fig-layer-row {
3570
+ & > label {
3571
+ color: var(--figma-color-text-tertiary);
3572
+ }
3573
+ }
3574
+
3575
+ /* Selected state */
3576
+ &[selected]:not([selected="false"]) {
3577
+ /* Open with children */
3578
+ /*&:has(fig-layer) {
3579
+ background: var(--figma-color-bg-selected-secondary);
3580
+ }*/
3581
+ & > .fig-layer-row {
3582
+ background: var(--figma-color-bg-selected);
3583
+ & > .fig-layer-icon {
3584
+ color: var(--figma-color-icon);
3585
+ }
3586
+ }
3587
+ }
3588
+ }
3589
+
3590
+ /* Shimmer */
3591
+ fig-shimmer {
3592
+ display: contents;
3593
+ --shimmer-angle: 90deg;
3594
+ --shimmer-size: 250% 100%;
3595
+ --shimmer-duration: 1.5s;
3596
+
3597
+ &[direction="vertical"] {
3598
+ --shimmer-angle: 180deg;
3599
+ --shimmer-size: 100% 250%;
3600
+ }
3601
+ &[direction="diagonal"] {
3602
+ --shimmer-angle: 135deg;
3603
+ --shimmer-size: 250% 250%;
3604
+ }
3605
+
3606
+ /* When not playing, remove shimmer effect entirely */
3607
+ &[playing="false"] > * {
3608
+ background: none;
3609
+ -webkit-background-clip: unset;
3610
+ background-clip: unset;
3611
+ -webkit-text-fill-color: unset;
3612
+ animation: none;
3613
+ }
3614
+ }
3615
+
3616
+ /* Only apply shimmer when playing (default) or playing="true" */
3617
+ fig-shimmer:not([playing="false"]) > * {
3618
+ background: linear-gradient(
3619
+ var(--shimmer-angle),
3620
+ var(--figma-color-text-tertiary) 0%,
3621
+ var(--figma-color-text-tertiary) 40%,
3622
+ var(--figma-color-text) 50%,
3623
+ var(--figma-color-text-tertiary) 60%,
3624
+ var(--figma-color-text-tertiary) 100%
3625
+ );
3626
+ background-size: var(--shimmer-size);
3627
+ -webkit-background-clip: text;
3628
+ background-clip: text;
3629
+ -webkit-text-fill-color: transparent;
3630
+ animation: fig-shimmer var(--shimmer-duration) linear infinite;
3631
+ }
3632
+
3633
+ /* Fill Picker */
3634
+ fig-fill-picker {
3635
+ display: contents;
3636
+
3637
+ > [slot^="mode-"] {
3638
+ display: none;
3639
+ }
3640
+ }
3641
+
3642
+ .fig-fill-picker-dialog {
3643
+ width: 240px;
3644
+ padding: 0;
3645
+
3646
+ fig-header {
3647
+ padding: var(--spacer-2);
3648
+ display: flex;
3649
+ justify-content: space-between;
3650
+ align-items: center;
3651
+ }
3652
+
3653
+ fig-tab {
3654
+ font-size: 0.6875rem;
3655
+ padding: var(--spacer-1) var(--spacer-1);
3656
+ }
3657
+ }
3658
+
3659
+ .fig-fill-picker-type-label {
3660
+ font-size: var(--font-size-small);
3661
+ font-weight: var(--font-weight-medium);
3662
+ color: var(--figma-color-text);
3663
+ padding: var(--spacer-1) var(--spacer-2);
3664
+ }
3665
+
3666
+ .fig-fill-picker-content {
3667
+ padding: var(--spacer-3);
3668
+ }
3669
+
3670
+ .fig-fill-picker-tab {
3671
+ display: none;
3672
+
3673
+ &:first-child {
3674
+ display: block;
3675
+ }
3676
+ }
3677
+
3678
+ /* Solid Tab */
3679
+ .fig-fill-picker-color-area {
3680
+ position: relative;
3681
+ width: 100%;
3682
+ aspect-ratio: 1;
3683
+ border-radius: var(--radius-medium);
3684
+ overflow: visible;
3685
+ margin-bottom: var(--spacer-2);
3686
+
3687
+ canvas {
3688
+ width: 100%;
3689
+ height: 100%;
3690
+ border-radius: var(--radius-medium);
3691
+ }
3692
+ }
3693
+
3694
+ .fig-fill-picker-handle {
3695
+ position: absolute;
3696
+ width: 1rem;
3697
+ height: 1rem;
3698
+ border-radius: 50%;
3699
+ background: var(--picker-color);
3700
+ box-shadow:
3701
+ inset 0 0 0 0.125rem var(--handle-color),
3702
+ 0px 0 0 0.5px rgba(0, 0, 0, 0.1),
3703
+ var(--elevation-100-canvas);
3704
+ transform: translate(-50%, -50%);
3705
+ z-index: 1;
3706
+ &:hover {
3707
+ transform: translate(-50%, -50%);
3708
+ }
3709
+ }
3710
+
3711
+ .fig-fill-picker-sliders {
3712
+ display: flex;
3713
+ flex-direction: column;
3714
+ gap: var(--spacer-2);
3715
+ margin-bottom: var(--spacer-2);
3716
+
3717
+ fig-slider {
3718
+ width: 100%;
3719
+ }
3720
+ }
3721
+
3722
+ .fig-fill-picker-inputs {
3723
+ display: flex;
3724
+ gap: var(--spacer-1);
3725
+ align-items: center;
3726
+
3727
+ .fig-fill-picker-color-input {
3728
+ flex: 1;
3729
+ }
3730
+ }
3731
+
3732
+ /* Gradient Tab */
3733
+ .fig-fill-picker-gradient-header {
3734
+ display: flex;
3735
+ gap: var(--spacer-2);
3736
+ align-items: center;
3737
+ margin-bottom: var(--spacer-2);
3738
+
3739
+ & > *:last-child fig-button {
3740
+ margin-left: auto;
3741
+ }
3742
+
3743
+ .fig-fill-picker-gradient-center {
3744
+ fig-input-number {
3745
+ width: 48px;
3746
+ }
3747
+ }
3748
+ }
3749
+
3750
+ .fig-fill-picker-gradient-preview {
3751
+ position: relative;
3752
+ width: 100%;
3753
+ aspect-ratio: 1;
3754
+ border-radius: var(--radius-medium);
3755
+ overflow: hidden;
3756
+ margin-bottom: var(--spacer-2);
3757
+ }
3758
+
3759
+ .fig-fill-picker-gradient-bar {
3760
+ position: absolute;
3761
+ inset: 0;
3762
+ border-radius: var(--radius-medium);
3763
+ background: linear-gradient(90deg, #d9d9d9 0%, #737373 100%);
3764
+ }
3765
+
3766
+ .fig-fill-picker-gradient-stops-handles {
3767
+ position: absolute;
3768
+ top: 0;
3769
+ left: 0;
3770
+ right: 0;
3771
+ bottom: 0;
3772
+ pointer-events: none;
3773
+ }
3774
+
3775
+ .fig-fill-picker-gradient-stops {
3776
+ .fig-fill-picker-gradient-stops-header {
3777
+ display: flex;
3778
+ justify-content: space-between;
3779
+ align-items: center;
3780
+ margin-bottom: var(--spacer-1);
3781
+ font-size: 0.75rem;
3782
+ color: var(--figma-color-text-secondary);
3783
+ }
3784
+ }
3785
+
3786
+ .fig-fill-picker-gradient-stops-list {
3787
+ display: flex;
3788
+ flex-direction: column;
3789
+ gap: var(--spacer-1);
3790
+ }
3791
+
3792
+ .fig-fill-picker-gradient-stop-row {
3793
+ display: flex;
3794
+ gap: var(--spacer-1);
3795
+ align-items: center;
3796
+
3797
+ & > .fig-fill-picker-stop-position {
3798
+ flex: 0;
3799
+ flex-basis: 3rem;
3800
+ min-width: 0;
3801
+ width: 3rem;
3802
+ }
3803
+
3804
+ .fig-fill-picker-stop-color {
3805
+ flex: 1;
3806
+ min-width: 0;
3807
+ fig-input-text {
3808
+ min-width: 0;
3809
+ }
3810
+ }
3811
+
3812
+ .fig-fill-picker-stop-remove {
3813
+ flex-shrink: 0;
3814
+ }
3815
+ }
3816
+
3817
+ /* Media Tabs (Image/Video/Webcam) */
3818
+ .fig-fill-picker-media-header {
3819
+ display: flex;
3820
+ gap: var(--spacer-1);
3821
+ align-items: center;
3822
+ margin-bottom: var(--spacer-2);
3823
+
3824
+ .fig-fill-picker-scale-mode {
3825
+ flex: 1;
3826
+ }
3827
+
3828
+ .fig-fill-picker-scale {
3829
+ width: 56px;
3830
+ }
3831
+ }
3832
+
3833
+ .fig-fill-picker-media-preview {
3834
+ position: relative;
3835
+ aspect-ratio: 1;
3836
+ border-radius: var(--radius-medium);
3837
+ overflow: hidden;
3838
+ display: flex;
3839
+ align-items: center;
3840
+ justify-content: center;
3841
+
3842
+ &.dragover {
3843
+ outline: 2px dashed var(--figma-color-border-brand);
3844
+ outline-offset: -2px;
3845
+ }
3846
+
3847
+ &.has-media {
3848
+ fig-button {
3849
+ visibility: hidden;
3850
+ }
3851
+ &:hover {
3852
+ fig-button {
3853
+ visibility: visible;
3854
+ }
3855
+ }
3856
+ }
3857
+ }
3858
+
3859
+ .fig-fill-picker-checkerboard {
3860
+ position: absolute;
3861
+ inset: 0;
3862
+ background-image:
3863
+ linear-gradient(45deg, var(--figma-color-bg-tertiary) 25%, transparent 25%),
3864
+ linear-gradient(
3865
+ -45deg,
3866
+ var(--figma-color-bg-tertiary) 25%,
3867
+ transparent 25%
3868
+ ),
3869
+ linear-gradient(45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%),
3870
+ linear-gradient(-45deg, transparent 75%, var(--figma-color-bg-tertiary) 75%);
3871
+ background-size: 16px 16px;
3872
+ background-position:
3873
+ 0 0,
3874
+ 0 8px,
3875
+ 8px -8px,
3876
+ -8px 0px;
3877
+ }
3878
+
3879
+ .fig-fill-picker-image-preview {
3880
+ position: absolute;
3881
+ inset: 0;
3882
+ width: 100%;
3883
+ height: 100%;
3884
+ display: none;
3885
+ }
3886
+
3887
+ .fig-fill-picker-video-preview {
3888
+ position: absolute;
3889
+ inset: 0;
3890
+ width: 100%;
3891
+ height: 100%;
3892
+ object-fit: cover;
3893
+ display: none;
3894
+ }
3895
+
3896
+ .fig-fill-picker-upload {
3897
+ position: relative;
3898
+ z-index: 1;
3899
+ }
3900
+
3901
+ /* Webcam Tab */
3902
+ .fig-fill-picker-webcam-preview {
3903
+ position: relative;
3904
+ aspect-ratio: 1;
3905
+ border-radius: var(--radius-medium);
3906
+ overflow: hidden;
3907
+ margin-bottom: var(--spacer-2);
3908
+ }
3909
+
3910
+ .fig-fill-picker-webcam-video {
3911
+ position: absolute;
3912
+ inset: 0;
3913
+ width: 100%;
3914
+ height: 100%;
3915
+ object-fit: cover;
3916
+ }
3917
+
3918
+ .fig-fill-picker-webcam-status {
3919
+ position: absolute;
3920
+ inset: 0;
3921
+ display: flex;
3922
+ align-items: center;
3923
+ justify-content: center;
3924
+ background: var(--figma-color-bg-secondary);
3925
+ color: var(--figma-color-text-secondary);
3926
+ font-size: 0.75rem;
3927
+ }
3928
+
3929
+ .fig-fill-picker-webcam-controls {
3930
+ display: flex;
3931
+ gap: var(--spacer-1);
3932
+
3933
+ .fig-fill-picker-camera-select {
3934
+ flex: 1;
3935
+ }
3936
+
3937
+ .fig-fill-picker-webcam-capture {
3938
+ flex-shrink: 0;
3939
+ }
3940
+ }
3941
+
3942
+ /* Utilities */
3943
+
3944
+ .fig-mask-icon {
3945
+ --size: var(--spacer-4);
3946
+ --icon: var(--icon-add);
3947
+ display: inline-flex;
3948
+ width: var(--size);
3949
+ height: var(--size);
3950
+ background: currentColor;
3951
+ mask-image: var(--icon);
3952
+ mask-size: contain;
3953
+ mask-repeat: no-repeat;
3954
+ mask-position: center;
3955
+ -webkit-mask-image: var(--icon);
3956
+ -webkit-mask-size: contain;
3957
+ -webkit-mask-repeat: no-repeat;
3958
+ -webkit-mask-position: center;
3959
+ }
3960
+
3961
+ @keyframes fig-spinner-spin {
3962
+ from {
3963
+ transform: rotate(0deg);
3964
+ }
3965
+
3966
+ to {
3967
+ transform: rotate(360deg);
3968
+ }
3969
+ }
3970
+
3971
+ @keyframes fig-shimmer {
3972
+ 0% {
3973
+ background-position: 100% 100%;
3974
+ }
3975
+ 100% {
3976
+ background-position: 0% 0%;
3977
+ }
3978
+ }