@rogieking/figui3 1.9.7 → 2.0.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 (5) hide show
  1. package/base.css +13 -0
  2. package/components.css +346 -383
  3. package/example.html +1906 -1052
  4. package/fig.js +202 -43
  5. package/package.json +1 -1
package/components.css CHANGED
@@ -1,95 +1,103 @@
1
1
  :root {
2
- --figma-color-bg: #ffffff;
3
- --figma-color-bg-brand: #0d99ff;
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);
4
7
  --figma-color-bg-menu: #1e1e1e;
5
8
  --figma-color-bg-menu-hover: #0c8ce9;
6
- --figma-color-bg-brand-hover: #007be5;
7
- --figma-color-bg-brand-pressed: #007be5;
8
- --figma-color-bg-brand-secondary: #0768cf;
9
- --figma-color-bg-brand-tertiary: #e5f4ff;
10
- --figma-color-bg-component: #9747ff;
11
- --figma-color-bg-component-hover: #8638e5;
12
- --figma-color-bg-component-pressed: #8638e5;
13
- --figma-color-bg-component-secondary: #7c2bda;
14
- --figma-color-bg-component-tertiary: #f1e5ff;
15
- --figma-color-bg-danger: #f24822;
16
- --figma-color-bg-danger-hover: #dc3412;
17
- --figma-color-bg-danger-pressed: #dc3412;
18
- --figma-color-bg-danger-secondary: #bd2915;
19
- --figma-color-bg-danger-tertiary: #ffe2e0;
20
- --figma-color-bg-disabled: #d9d9d9;
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);
21
24
  --figma-color-bg-disabled-secondary: #b3b3b3;
22
- --figma-color-bg-hover: #f5f5f5;
23
- --figma-color-bg-inverse: #2c2c2c;
24
- --figma-color-bg-onselected: #bde3ff;
25
- --figma-color-bg-onselected-hover: #bde3ff;
26
- --figma-color-bg-onselected-pressed: #bde3ff;
27
- --figma-color-bg-pressed: #f5f5f5;
28
- --figma-color-bg-secondary: #f5f5f5;
29
- --figma-color-bg-selected: #e5f4ff;
30
- --figma-color-bg-selected-hover: #bde3ff;
31
- --figma-color-bg-selected-pressed: #bde3ff;
32
- --figma-color-bg-selected-secondary: #f2f9ff;
33
- --figma-color-bg-selected-strong: #0d99ff;
34
- --figma-color-bg-selected-tertiary: #f2f9ff;
35
- --figma-color-bg-success: #14ae5c;
36
- --figma-color-bg-success-hover: #009951;
37
- --figma-color-bg-success-pressed: #009951;
38
- --figma-color-bg-success-secondary: #008043;
39
- --figma-color-bg-success-tertiary: #cff7d3;
40
- --figma-color-bg-tertiary: #e6e6e6;
41
- --figma-color-bg-warning: #ffcd29;
42
- --figma-color-bg-warning-hover: #ffc21a;
43
- --figma-color-bg-warning-pressed: #ffc21a;
44
- --figma-color-bg-warning-secondary: #fab815;
45
- --figma-color-bg-warning-tertiary: #fff1c2;
46
- --figma-color-border: #e6e6e6;
47
- --figma-color-border-brand: #bde3ff;
48
- --figma-color-border-brand-strong: #007be5;
49
- --figma-color-border-component: #e4ccff;
50
- --figma-color-border-component-hover: #9747ff;
51
- --figma-color-border-component-strong: #8638e5;
52
- --figma-color-border-danger: #ffc7c2;
53
- --figma-color-border-danger-strong: #dc3412;
54
- --figma-color-border-disabled: #e6e6e6;
55
- --figma-color-border-disabled-strong: #0000004d;
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);
56
62
  --figma-color-border-menu: #383838;
57
- --figma-color-border-onbrand: #007be5;
63
+ --figma-color-border-onbrand: light-dark(#007be5, #0a6dc2);
58
64
  --figma-color-border-onbrand-strong: #ffffff;
59
- --figma-color-border-oncomponent: #8638e5;
65
+ --figma-color-border-oncomponent: light-dark(#8638e5, #7a2ed6);
60
66
  --figma-color-border-oncomponent-strong: #ffffff;
61
- --figma-color-border-ondanger: #dc3412;
67
+ --figma-color-border-ondanger: light-dark(#dc3412, #c4381c);
62
68
  --figma-color-border-ondanger-strong: #ffffff;
63
- --figma-color-border-onselected: #bde3ff;
64
- --figma-color-border-onselected-strong: #000000e5;
65
- --figma-color-border-onsuccess: #009951;
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);
66
72
  --figma-color-border-onsuccess-strong: #ffffff;
67
- --figma-color-border-onwarning: #fab815;
73
+ --figma-color-border-onwarning: light-dark(#fab815, #e4a711);
68
74
  --figma-color-border-onwarning-strong: #000000e5;
69
- --figma-color-border-selected: #0d99ff;
70
- --figma-color-border-selected-strong: #007be5;
71
- --figma-color-border-strong: #2c2c2c;
72
- --figma-color-border-success: #aff4c6;
73
- --figma-color-border-success-strong: #009951;
74
- --figma-color-border-warning: #ffe8a3;
75
- --figma-color-border-warning-strong: #b86200;
76
- --figma-color-icon: #000000e5;
77
- --figma-color-icon-brand: #007be5;
78
- --figma-color-icon-brand-pressed: #0768cf;
79
- --figma-color-icon-brand-secondary: #80caff;
80
- --figma-color-icon-brand-tertiary: #bde3ff;
81
- --figma-color-icon-component: #8638e5;
82
- --figma-color-icon-component-pressed: #7c2bda;
83
- --figma-color-icon-component-secondary: #c5b2dc;
84
- --figma-color-icon-component-tertiary: #c5b2dc;
85
- --figma-color-icon-danger: #f24822;
86
- --figma-color-icon-danger-hover: #bd2915;
87
- --figma-color-icon-danger-pressed: #bd2915;
88
- --figma-color-icon-danger-secondary: #f24822;
89
- --figma-color-icon-danger-secondary-hover: #f24822;
90
- --figma-color-icon-danger-tertiary: #f24822;
91
- --figma-color-icon-disabled: #0000004d;
92
- --figma-color-icon-hover: #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);
93
101
  --figma-color-icon-onbrand: #ffffff;
94
102
  --figma-color-icon-onbrand-secondary: #ffffffcc;
95
103
  --figma-color-icon-onbrand-tertiary: #ffffff66;
@@ -99,47 +107,49 @@
99
107
  --figma-color-icon-ondanger: #ffffff;
100
108
  --figma-color-icon-ondanger-secondary: #ffffffcc;
101
109
  --figma-color-icon-ondanger-tertiary: #ffffff66;
102
- --figma-color-icon-ondisabled: #ffffff;
103
- --figma-color-icon-oninverse: #ffffffe5;
104
- --figma-color-icon-onselected: #000000e5;
105
- --figma-color-icon-onselected-secondary: #00000080;
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);
106
114
  --figma-color-icon-onselected-strong: #ffffff;
107
- --figma-color-icon-onselected-tertiary: #0000004d;
115
+ --figma-color-icon-onselected-tertiary: light-dark(#0000004d, #ffffff66);
108
116
  --figma-color-icon-onsuccess: #ffffff;
109
117
  --figma-color-icon-onsuccess-secondary: #ffffffcc;
110
118
  --figma-color-icon-onsuccess-tertiary: #ffffff66;
111
119
  --figma-color-icon-onwarning: #000000e5;
112
120
  --figma-color-icon-onwarning-secondary: #00000080;
113
121
  --figma-color-icon-onwarning-tertiary: #0000004d;
114
- --figma-color-icon-pressed: #007be5;
115
- --figma-color-icon-secondary: #00000080;
116
- --figma-color-icon-secondary-hover: #000000e5;
117
- --figma-color-icon-selected: #007be5;
118
- --figma-color-icon-selected-secondary: #007be5;
119
- --figma-color-icon-selected-tertiary: #007be5;
120
- --figma-color-icon-success: #14ae5c;
121
- --figma-color-icon-success-pressed: #008043;
122
- --figma-color-icon-success-secondary: #14ae5c;
123
- --figma-color-icon-success-tertiary: #14ae5c;
124
- --figma-color-icon-tertiary: #0000004d;
125
- --figma-color-icon-tertiary-hover: #000000e5;
126
- --figma-color-icon-warning: #ffcd29;
127
- --figma-color-icon-warning-pressed: #b86200;
128
- --figma-color-icon-warning-secondary: #ffcd29;
129
- --figma-color-icon-warning-tertiary: #ffcd29;
130
- --figma-color-text: #000000e5;
131
- --figma-color-text-brand: #007be5;
132
- --figma-color-text-brand-secondary: #007be5;
133
- --figma-color-text-brand-tertiary: #007be5;
134
- --figma-color-text-component: #8638e5;
135
- --figma-color-text-component-pressed: #7c2bda;
136
- --figma-color-text-component-secondary: #c5b2dc;
137
- --figma-color-text-component-tertiary: #c5b2dc;
138
- --figma-color-text-danger: #dc3412;
139
- --figma-color-text-danger-secondary: #dc3412;
140
- --figma-color-text-danger-tertiary: #dc3412;
141
- --figma-color-text-disabled: #0000004d;
142
- --figma-color-text-hover: #000000e5;
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);
143
153
  --figma-color-text-onbrand: #ffffff;
144
154
  --figma-color-text-onbrand-secondary: #ffffffcc;
145
155
  --figma-color-text-onbrand-tertiary: #ffffff66;
@@ -149,215 +159,96 @@
149
159
  --figma-color-text-ondanger: #ffffff;
150
160
  --figma-color-text-ondanger-secondary: #ffffffcc;
151
161
  --figma-color-text-ondanger-tertiary: #ffffff66;
152
- --figma-color-text-ondisabled: #ffffff;
153
- --figma-color-text-oninverse: #ffffffe5;
154
- --figma-color-text-onselected: #000000e5;
155
- --figma-color-text-onselected-secondary: #00000080;
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);
156
166
  --figma-color-text-onselected-strong: #ffffff;
157
- --figma-color-text-onselected-tertiary: #0000004d;
167
+ --figma-color-text-onselected-tertiary: light-dark(#0000004d, #ffffff66);
158
168
  --figma-color-text-onsuccess: #ffffff;
159
169
  --figma-color-text-onsuccess-secondary: #ffffffcc;
160
170
  --figma-color-text-onsuccess-tertiary: #ffffff66;
161
171
  --figma-color-text-onwarning: #000000e5;
162
172
  --figma-color-text-onwarning-secondary: #00000080;
163
173
  --figma-color-text-onwarning-tertiary: #0000004d;
164
- --figma-color-text-secondary: #00000080;
165
- --figma-color-text-secondary-hover: #000000e5;
174
+ --figma-color-text-secondary: light-dark(#00000080, #ffffffb2);
175
+ --figma-color-text-secondary-hover: light-dark(#000000e5, #ffffff);
166
176
  --figma-color-text-selection: rgba(13, 153, 255, 0.4);
167
- --figma-color-text-selected: #007be5;
168
- --figma-color-text-selected-secondary: #007be5;
169
- --figma-color-text-selected-tertiary: #007be5;
170
- --figma-color-text-success: #009951;
171
- --figma-color-text-success-secondary: #009951;
172
- --figma-color-text-success-tertiary: #009951;
173
- --figma-color-text-tertiary: #0000004d;
174
- --figma-color-text-tertiary-hover: #000000e5;
175
- --figma-color-text-warning: #b86200;
176
- --figma-color-text-warning-secondary: #b86200;
177
- --figma-color-text-warning-tertiary: #b86200;
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);
178
188
  --figma-color-text-menu: #ffffff;
179
189
  --figma-color-text-menu-secondary: rgba(255, 255, 255, 0.7);
180
190
  --figma-color-text-menu-tertiary: rgba(255, 255, 255, 0.4);
181
191
  }
182
192
 
183
- :root.figma-dark {
184
- --figma-color-bg: #2c2c2c;
185
- --figma-color-bg-brand: #0c8ce9;
186
- --figma-color-bg-brand-hover: #0a6dc2;
187
- --figma-color-bg-brand-pressed: #0a6dc2;
188
- --figma-color-bg-brand-secondary: #105cad;
189
- --figma-color-bg-brand-tertiary: #394360;
190
- --figma-color-bg-component: #8a38f5;
191
- --figma-color-bg-component-hover: #7a2ed6;
192
- --figma-color-bg-component-pressed: #7a2ed6;
193
- --figma-color-bg-component-secondary: #652ca8;
194
- --figma-color-bg-component-tertiary: #473956;
195
- --figma-color-bg-danger: #e03e1a;
196
- --figma-color-bg-danger-hover: #c4381c;
197
- --figma-color-bg-danger-pressed: #c4381c;
198
- --figma-color-bg-danger-secondary: #963323;
199
- --figma-color-bg-danger-tertiary: #60332a;
200
- --figma-color-bg-disabled: #757575;
201
- --figma-color-bg-disabled-secondary: #b3b3b3;
202
- --figma-color-bg-hover: #383838;
203
- --figma-color-bg-inverse: #ffffff;
204
- --figma-color-bg-onselected: #667799;
205
- --figma-color-bg-onselected-hover: #667799;
206
- --figma-color-bg-onselected-pressed: #667799;
207
- --figma-color-bg-pressed: #383838;
208
- --figma-color-bg-secondary: #383838;
209
- --figma-color-bg-selected: #4a5878;
210
- --figma-color-bg-selected-hover: #536383;
211
- --figma-color-bg-selected-pressed: #536383;
212
- --figma-color-bg-selected-secondary: #394360;
213
- --figma-color-bg-selected-strong: #0c8ce9;
214
- --figma-color-bg-selected-tertiary: #394360;
215
- --figma-color-bg-success: #198f51;
216
- --figma-color-bg-success-hover: #078348;
217
- --figma-color-bg-success-pressed: #078348;
218
- --figma-color-bg-success-secondary: #0a5c35;
219
- --figma-color-bg-success-tertiary: #476656;
220
- --figma-color-bg-tertiary: #444444;
221
- --figma-color-bg-warning: #f3c11b;
222
- --figma-color-bg-warning-hover: #f2b50d;
223
- --figma-color-bg-warning-pressed: #f2b50d;
224
- --figma-color-bg-warning-secondary: #e4a711;
225
- --figma-color-bg-warning-tertiary: #5c4100;
226
- --figma-color-border: #444444;
227
- --figma-color-border-brand: #105cad;
228
- --figma-color-border-brand-strong: #7cc4f8;
229
- --figma-color-border-component: #652ca8;
230
- --figma-color-border-component-hover: #8a38f5;
231
- --figma-color-border-component-strong: #d6b6fb;
232
- --figma-color-border-danger: #963323;
233
- --figma-color-border-danger-strong: #fca397;
234
- --figma-color-border-disabled: #444444;
235
- --figma-color-border-disabled-strong: #ffffff66;
236
- --figma-color-border-onbrand: #0a6dc2;
237
- --figma-color-border-onbrand-strong: #ffffff;
238
- --figma-color-border-oncomponent: #7a2ed6;
239
- --figma-color-border-oncomponent-strong: #ffffff;
240
- --figma-color-border-ondanger: #c4381c;
241
- --figma-color-border-ondanger-strong: #ffffff;
242
- --figma-color-border-onselected: #667799;
243
- --figma-color-border-onselected-strong: #ffffffe5;
244
- --figma-color-border-onsuccess: #078348;
245
- --figma-color-border-onsuccess-strong: #ffffff;
246
- --figma-color-border-onwarning: #e4a711;
247
- --figma-color-border-onwarning-strong: #000000e5;
248
- --figma-color-border-selected: #0c8ce9;
249
- --figma-color-border-selected-strong: #7cc4f8;
250
- --figma-color-border-strong: #ffffffe5;
251
- --figma-color-border-success: #0a5c35;
252
- --figma-color-border-success-strong: #79d297;
253
- --figma-color-border-warning: #925711;
254
- --figma-color-border-warning-strong: #f7d15f;
255
- --figma-color-icon: #ffffff;
256
- --figma-color-icon-brand: #7cc4f8;
257
- --figma-color-icon-brand-pressed: #0c8ce9;
258
- --figma-color-icon-brand-secondary: #0a6dc2;
259
- --figma-color-icon-brand-tertiary: #394360;
260
- --figma-color-icon-component: #d1a8ff;
261
- --figma-color-icon-component-pressed: #d6b6fb;
262
- --figma-color-icon-component-secondary: #7f699b;
263
- --figma-color-icon-component-tertiary: #7f699b;
264
- --figma-color-icon-danger: #e03e1a;
265
- --figma-color-icon-danger-hover: #fbbcb6;
266
- --figma-color-icon-danger-pressed: #fbbcb6;
267
- --figma-color-icon-danger-secondary: #e03e1a;
268
- --figma-color-icon-danger-secondary-hover: #e03e1a;
269
- --figma-color-icon-danger-tertiary: #e03e1a;
270
- --figma-color-icon-disabled: #ffffff66;
271
- --figma-color-icon-hover: #ffffff;
272
- --figma-color-icon-onbrand: #ffffff;
273
- --figma-color-icon-onbrand-secondary: #ffffffcc;
274
- --figma-color-icon-onbrand-tertiary: #ffffff66;
275
- --figma-color-icon-oncomponent: #ffffff;
276
- --figma-color-icon-oncomponent-secondary: #ffffffcc;
277
- --figma-color-icon-oncomponent-tertiary: #ffffff66;
278
- --figma-color-icon-ondanger: #ffffff;
279
- --figma-color-icon-ondanger-secondary: #ffffffcc;
280
- --figma-color-icon-ondanger-tertiary: #ffffff66;
281
- --figma-color-icon-ondisabled: #2c2c2c;
282
- --figma-color-icon-oninverse: #000000e5;
283
- --figma-color-icon-onselected: #ffffff;
284
- --figma-color-icon-onselected-secondary: #ffffffb2;
285
- --figma-color-icon-onselected-strong: #ffffff;
286
- --figma-color-icon-onselected-tertiary: #ffffff66;
287
- --figma-color-icon-onsuccess: #ffffff;
288
- --figma-color-icon-onsuccess-secondary: #ffffffcc;
289
- --figma-color-icon-onsuccess-tertiary: #ffffff66;
290
- --figma-color-icon-onwarning: #000000e5;
291
- --figma-color-icon-onwarning-secondary: #00000080;
292
- --figma-color-icon-onwarning-tertiary: #0000004d;
293
- --figma-color-icon-pressed: #0a6dc2;
294
- --figma-color-icon-secondary: #ffffffb2;
295
- --figma-color-icon-secondary-hover: #ffffff;
296
- --figma-color-icon-selected: #7cc4f8;
297
- --figma-color-icon-selected-secondary: #7cc4f8;
298
- --figma-color-icon-selected-tertiary: #7cc4f8;
299
- --figma-color-icon-success: #198f51;
300
- --figma-color-icon-success-pressed: #a1e8b9;
301
- --figma-color-icon-success-secondary: #198f51;
302
- --figma-color-icon-success-tertiary: #198f51;
303
- --figma-color-icon-tertiary: #ffffff66;
304
- --figma-color-icon-tertiary-hover: #ffffff;
305
- --figma-color-icon-warning: #f3c11b;
306
- --figma-color-icon-warning-pressed: #f7d15f;
307
- --figma-color-icon-warning-secondary: #f3c11b;
308
- --figma-color-icon-warning-tertiary: #f3c11b;
309
- --figma-color-text: #ffffff;
310
- --figma-color-text-brand: #7cc4f8;
311
- --figma-color-text-brand-secondary: #7cc4f8;
312
- --figma-color-text-brand-tertiary: #7cc4f8;
313
- --figma-color-text-component: #d1a8ff;
314
- --figma-color-text-component-pressed: #d6b6fb;
315
- --figma-color-text-component-secondary: #7f699b;
316
- --figma-color-text-component-tertiary: #7f699b;
317
- --figma-color-text-danger: #fca397;
318
- --figma-color-text-danger-secondary: #fca397;
319
- --figma-color-text-danger-tertiary: #fca397;
320
- --figma-color-text-disabled: #ffffff66;
321
- --figma-color-text-hover: #ffffff;
322
- --figma-color-text-onbrand: #ffffff;
323
- --figma-color-text-onbrand-secondary: #ffffffcc;
324
- --figma-color-text-onbrand-tertiary: #ffffff66;
325
- --figma-color-text-oncomponent: #ffffff;
326
- --figma-color-text-oncomponent-secondary: #ffffffcc;
327
- --figma-color-text-oncomponent-tertiary: #ffffff66;
328
- --figma-color-text-ondanger: #ffffff;
329
- --figma-color-text-ondanger-secondary: #ffffffcc;
330
- --figma-color-text-ondanger-tertiary: #ffffff66;
331
- --figma-color-text-ondisabled: #2c2c2c;
332
- --figma-color-text-oninverse: #000000e5;
333
- --figma-color-text-onselected: #ffffffe5;
334
- --figma-color-text-onselected-secondary: #ffffffb2;
335
- --figma-color-text-onselected-strong: #ffffff;
336
- --figma-color-text-onselected-tertiary: #ffffff66;
337
- --figma-color-text-onsuccess: #ffffff;
338
- --figma-color-text-onsuccess-secondary: #ffffffcc;
339
- --figma-color-text-onsuccess-tertiary: #ffffff66;
340
- --figma-color-text-onwarning: #000000e5;
341
- --figma-color-text-onwarning-secondary: #00000080;
342
- --figma-color-text-onwarning-tertiary: #0000004d;
343
- --figma-color-text-secondary: #ffffffb2;
344
- --figma-color-text-secondary-hover: #ffffff;
345
- --figma-color-text-selected: #7cc4f8;
346
- --figma-color-text-selected-secondary: #7cc4f8;
347
- --figma-color-text-selected-tertiary: #7cc4f8;
348
- --figma-color-text-success: #79d297;
349
- --figma-color-text-success-secondary: #79d297;
350
- --figma-color-text-success-tertiary: #79d297;
351
- --figma-color-text-tertiary: #ffffff66;
352
- --figma-color-text-tertiary-hover: #ffffff;
353
- --figma-color-text-warning: #f7d15f;
354
- --figma-color-text-warning-secondary: #f7d15f;
355
- --figma-color-text-warning-tertiary: #f7d15f;
356
- }
357
-
358
193
  :root {
194
+ /* Typography & Sizing */
359
195
  --font-size: 16px;
360
- --figma-color-bordertranslucent: rgba(0, 0, 0, 0.05);
196
+ --font-family: "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next,
197
+ avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto,
198
+ arial, sans-serif;
199
+ --body-medium-fontSize: 0.6875rem;
200
+ --body-large-fontSize: 0.8125rem;
201
+ --body-letter-spacing: 0.055px;
202
+ --body-medium-strong-fontWeight: 550;
203
+ --body-large-strong-fontWeight: 500;
204
+ --body-medium-fontWeight: 450;
205
+
206
+ /* Spacing */
207
+ --spacer-1: 0.25rem;
208
+ --spacer-2: 0.5rem;
209
+ --spacer-3: 1rem;
210
+ --spacer-4: 1.5rem;
211
+ --spacer-5: 2rem;
212
+ --spacer-6: 2.5rem;
213
+
214
+ /* Radii */
215
+ --radius-medium: 0.3125rem;
216
+ --radius-large: 0.8125rem;
217
+
218
+ /* Transitions */
219
+ --input-transition: all 0.08s ease-out;
220
+
221
+ /* Misc UI */
222
+ --popover-min-width: 15rem;
223
+ --handle-color: #fff;
224
+ --bg-selected: #f5f5f5;
225
+ --bg-selected-active: #e5f4ff;
226
+ --bg-tooltip: #1e1e1e;
227
+ --color-tooltip: #ffffff;
228
+
229
+ /* Transparent Backgrounds - use light-dark() */
230
+ --figma-color-bordertranslucent: light-dark(
231
+ rgba(0, 0, 0, 0.05),
232
+ rgba(255, 255, 255, 0.05)
233
+ );
234
+ --figma-color-bg-transparent: light-dark(
235
+ rgba(0, 0, 0, 0.05),
236
+ rgba(255, 255, 255, 0.05)
237
+ );
238
+ --figma-color-bg-transparent-hover: light-dark(
239
+ rgba(0, 0, 0, 0.05),
240
+ rgba(255, 255, 255, 0.05)
241
+ );
242
+ --figma-color-bg-transparent-pressed: light-dark(
243
+ rgba(0, 0, 0, 0.1),
244
+ rgba(255, 255, 255, 0.1)
245
+ );
246
+ --figma-color-bg-transparent-secondary: light-dark(
247
+ rgba(0, 0, 0, 0.2),
248
+ rgba(255, 255, 255, 0.2)
249
+ );
250
+
251
+ /* Gradients */
361
252
  --checkerboard: repeating-conic-gradient(
362
253
  rgba(0, 0, 0, 0.1) 0% 25%,
363
254
  rgba(255, 255, 255, 0.1) 0% 50%
@@ -398,77 +289,63 @@
398
289
  rgba(255, 0, 96, 1),
399
290
  rgba(255, 0, 48, 1)
400
291
  );
401
- --input-transition: all 0.08s ease-out;
402
- --bg-selected: #f5f5f5;
403
- --bg-selected-active: #e5f4ff;
404
- --bg-tooltip: #1e1e1e;
405
- --body-medium-fontSize: 0.6875rem;
406
- --body-large-fontSize: 0.8125rem;
407
- --figma-color-border-selected: #0d99ff;
408
- --spacer-1: 0.25rem;
409
- --spacer-2: 0.5rem;
410
- --spacer-3: 1rem;
411
- --spacer-4: 1.5rem;
412
- --spacer-5: 2rem;
413
- --spacer-6: 2.5rem;
414
- --color-tooltip: #ffffff;
415
- --radius-medium: 0.3125rem;
416
- --radius-large: 0.8125rem;
417
- --body-letter-spacing: 0.055px;
418
- --body-medium-strong-fontWeight: 550;
419
- --body-large-strong-fontWeight: 500;
420
- --body-medium-fontWeight: 450;
421
- --handle-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
422
- --handle-color: #fff;
423
-
424
- --popover-min-width: 15rem;
425
- --figma-color-bg-ghost-hover: rgba(0, 0, 0, 0.05);
426
- --elevation-500-modal-window: 0px 0px 0.5px rgba(0, 0, 0, 0.08),
427
- 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15);
428
292
 
429
- --figma-elevation-400-menu-panel: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.12),
430
- 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
431
-
432
- --figma-elevation-500-modal-window: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
433
- 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
434
-
435
- color-scheme: light dark;
436
- /* Icons */
293
+ /* Icons - light theme defaults */
437
294
  --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(0 0 0 / 90%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
438
295
  --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 fill-rule='evenodd' clip-rule='evenodd' d='M11.7773 4.08403C12.0071 4.2372 12.0692 4.54764 11.916 4.7774L7.91603 10.7774C7.83293 10.902 7.69834 10.9829 7.54927 10.9976C7.4002 11.0124 7.25237 10.9595 7.14645 10.8536L4.14645 7.85361C3.95118 7.65834 3.95118 7.34176 4.14645 7.1465C4.34171 6.95124 4.65829 6.95124 4.85355 7.1465L7.42229 9.71523L11.084 4.2227C11.2372 3.99294 11.5476 3.93085 11.7773 4.08403Z' fill='white'/%3E%3C/svg%3E%0A");
439
296
  --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");
440
297
 
441
- /* Elevations */
298
+ /* Elevations - light theme defaults */
299
+ --elevation-500-modal-window: 0px 0px 0.5px rgba(0, 0, 0, 0.08),
300
+ 0px 10px 24px rgba(0, 0, 0, 0.18), 0px 2px 5px rgba(0, 0, 0, 0.15);
442
301
  --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.3),
443
302
  0px 1px 3px 0px rgba(0, 0, 0, 0.15);
444
-
445
303
  --figma-elevation-200: 0px 1px 3px 0px rgba(0, 0, 0, 0.102),
446
304
  0px 3px 8px 0px rgba(0, 0, 0, 0.102), 0px 0px 0.5px 0px rgba(0, 0, 0, 0.18);
447
-
448
- --font-family: "Inter", AppleSystemUIFont, BlinkMacSystemFont, avenir next,
449
- avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto,
450
- arial, sans-serif;
305
+ --figma-elevation-400-menu-panel: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.12),
306
+ 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
307
+ --figma-elevation-500-modal-window: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.08),
308
+ 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 2px 5px 0px rgba(0, 0, 0, 0.15);
309
+ --handle-shadow: 0px 0 0 0.5px rgba(0, 0, 0, 0.1), var(--figma-elevation-200);
451
310
  }
452
311
 
312
+ /* Dark theme overrides for non-color values (icons, shadows, elevations) */
313
+ /* These cannot use light-dark() as they are not color values */
314
+ @media (prefers-color-scheme: dark) {
315
+ :root {
316
+ --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(255 255 255 / 100%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
317
+ --handle-shadow: 0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
318
+ 0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
319
+ --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
320
+ 0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
321
+ 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
322
+ --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px
323
+ rgba(255, 255, 255, 0.08) inset,
324
+ 0px 10px 16px 0px rgba(0, 0, 0, 0.35),
325
+ inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
326
+ 0px 2px 5px 0px rgba(0, 0, 0, 0.35);
327
+ --figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
328
+ 0px 3px 5px rgba(0, 0, 0, 0.35),
329
+ inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
330
+ }
331
+ }
332
+
333
+ /* Class-based dark theme override (for manual theme switching) */
453
334
  :root.figma-dark {
454
335
  --icon-chevron: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.87868 7.12132L8 9.24264L10.1213 7.12132' stroke='rgb(255 255 255 / 100%)' stroke-linecap='round'/%3E%3C/svg%3E%0A");
455
-
456
336
  --handle-shadow: 0px 0 0 0.75px 0px 0 0 0.75px rgba(0, 0, 0, 0.1),
457
337
  0px 0px 0.5px 0px rgba(255, 255, 255, 0.1);
458
- --figma-color-bg-ghost-hover: rgba(255, 255, 255, 0.05);
459
- --figma-color-bordertranslucent: rgba(255, 255, 255, 0.05);
338
+ --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
339
+ 0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
340
+ 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
460
341
  --figma-elevation-400-menu-panel: 0px 0.5px 0px 0px rgba(255, 255, 255, 0.08)
461
342
  inset,
462
343
  0px 10px 16px 0px rgba(0, 0, 0, 0.35),
463
344
  inset 0px 0.75px 0px rgba(255, 255, 255, 0.075),
464
345
  0px 2px 5px 0px rgba(0, 0, 0, 0.35);
465
-
466
346
  --figma-elevation-500-modal-window: 0px 10px 24px rgba(0, 0, 0, 0.45),
467
347
  0px 3px 5px rgba(0, 0, 0, 0.35),
468
348
  inset 0px 0.75px 0px rgba(255, 255, 255, 0.1);
469
- --figma-elevation-100: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5),
470
- 0px 0.75px 0px 0px rgba(255, 255, 255, 0.1) inset,
471
- 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
472
349
  }
473
350
 
474
351
  button,
@@ -776,6 +653,7 @@ fig-button {
776
653
  padding: 0 var(--spacer-2);
777
654
  appearance: none;
778
655
  border: 0;
656
+ min-width: 0;
779
657
  color: var(--figma-color-text-onbrand);
780
658
  outline: 0;
781
659
  border-radius: var(--radius-medium);
@@ -786,40 +664,63 @@ fig-button {
786
664
  background-color: var(--figma-color-bg-brand-pressed);
787
665
  }
788
666
 
789
- /* Variant: Ghost */
790
- &[variant="ghost"],
667
+ &:hover {
668
+ background-color: var(--figma-color-bg-brand-hover);
669
+ &:active {
670
+ background-color: var(--figma-color-bg-brand-pressed);
671
+ }
672
+ &:active {
673
+ background-color: var(--figma-color-bg-brand-pressed);
674
+ color: var(--figma-color-text-onbrand-secondary);
675
+ }
676
+ }
677
+
678
+ /* Variant: Link */
791
679
  &[variant="link"] {
792
680
  box-shadow: none;
793
681
  background: none;
794
- color: var(--figma-color-text);
682
+ color: var(--figma-color-text-brand);
795
683
 
796
684
  &:hover:not(:active) {
797
- background-color: var(--figma-color-bg-ghost-hover);
685
+ background-color: transparent;
798
686
  }
799
687
 
800
688
  &:active {
801
689
  outline: 0;
802
690
  background-color: var(--figma-color-bg-selected);
691
+ color: var(--figma-color-text-brand);
803
692
  }
804
693
  }
694
+ /* Variant: Ghost */
695
+ &[variant="ghost"] {
696
+ box-shadow: none;
697
+ background: none;
698
+ color: var(--figma-color-text);
805
699
 
806
- &[variant="ghost"][disabled]:not([disabled="false"]) {
807
- background-color: transparent;
808
- }
700
+ &:hover:not(:active) {
701
+ background-color: var(--figma-color-bg-transparent-hover);
702
+ }
809
703
 
810
- &[variant="link"] {
811
- color: var(--figma-color-text-brand);
704
+ &:active {
705
+ outline: 0;
706
+ background-color: var(--figma-color-bg-transparent-pressed);
707
+ color: var(--figma-color-text);
708
+ }
812
709
  }
813
710
 
711
+ &[variant="ghost"][disabled]:not([disabled="false"]) {
712
+ background-color: transparent;
713
+ }
814
714
  /* Variant: Secondary */
815
715
  &[variant="secondary"] {
816
- border: 1px solid var(--figma-color-border);
716
+ box-shadow: inset 0 0 0 1px var(--figma-color-border);
817
717
  padding: 0 calc(var(--spacer-2) - 1px);
818
718
  background: none;
819
719
  color: var(--figma-color-text);
820
720
 
821
721
  &:active {
822
722
  background-color: var(--figma-color-bg-secondary);
723
+ color: var(--figma-color-text);
823
724
  }
824
725
  }
825
726
 
@@ -925,12 +826,10 @@ fig-button {
925
826
  }
926
827
  }
927
828
 
928
- &:focus,
929
- &:focus-within {
930
- &:not(:active) {
931
- outline: 0;
932
- box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
933
- }
829
+ &:focus-visible,
830
+ &[data-focus-visible] {
831
+ outline: 0;
832
+ box-shadow: inset 0 0 0 1px var(--figma-color-border-selected);
934
833
  }
935
834
  svg {
936
835
  *[fill] {
@@ -1389,7 +1288,7 @@ input[type="checkbox"].switch {
1389
1288
  align-items: center;
1390
1289
  justify-content: center;
1391
1290
  border-radius: 0.5rem;
1392
- background-color: var(--figma-color-bg-secondary);
1291
+ background-color: var(--figma-color-bg-switch);
1393
1292
  transition: var(--input-transition);
1394
1293
  box-sizing: border-box;
1395
1294
  box-shadow: inset 0 0 0 1px var(--figma-color-bordertranslucent);
@@ -1458,7 +1357,7 @@ input[type="checkbox"]:not(.switch) {
1458
1357
  background-color: transparent;
1459
1358
  mask-image: var(--checkmark);
1460
1359
  }
1461
- &:hover:not(:checked) {
1360
+ &:hover:not(:checked):not(:disabled) {
1462
1361
  &::after {
1463
1362
  opacity: 0.25;
1464
1363
  background-color: var(--figma-color-icon);
@@ -1482,12 +1381,18 @@ input[type="checkbox"]:not(.switch) {
1482
1381
  }
1483
1382
  }
1484
1383
  }
1485
- :root.figma-light {
1486
- input[type="checkbox"]:not(.switch):hover {
1384
+ /* Light theme checkbox hover (black checkmark preview) */
1385
+ @media (prefers-color-scheme: light) {
1386
+ input[type="checkbox"]:not(.switch):not(:disabled):hover {
1487
1387
  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");
1488
1388
  }
1489
1389
  }
1490
1390
 
1391
+ /* Class-based light theme override (for manual theme switching) */
1392
+ :root.figma-light input[type="checkbox"]:not(.switch):not(:disabled):hover {
1393
+ 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");
1394
+ }
1395
+
1491
1396
  label.checkbox:has([type="checkbox"]) {
1492
1397
  padding-left: 1.5rem;
1493
1398
 
@@ -1526,7 +1431,7 @@ input[type="radio"] {
1526
1431
  }
1527
1432
  }
1528
1433
 
1529
- &:hover:not(:checked) {
1434
+ &:hover:not(:checked):not(:disabled) {
1530
1435
  &::after {
1531
1436
  transform: scale(1);
1532
1437
  opacity: 0.25;
@@ -1630,10 +1535,6 @@ details {
1630
1535
  }
1631
1536
  }
1632
1537
 
1633
- .figma-light details > summary:before {
1634
- content: var(--icon-chevron);
1635
- }
1636
-
1637
1538
  /* Sliders */
1638
1539
  .fig-slider,
1639
1540
  fig-slider {
@@ -2083,6 +1984,68 @@ dialog[is="fig-dialog"] {
2083
1984
  z-index: var(--z-index);
2084
1985
  }
2085
1986
 
1987
+ dialog[is="fig-toast"] {
1988
+ --z-index: 999999;
1989
+ z-index: var(--z-index);
1990
+ box-shadow: var(--figma-elevation-100);
1991
+ border-radius: var(--radius-large);
1992
+ padding: var(--spacer-2) var(--spacer-3);
1993
+ align-items: center;
1994
+ gap: var(--spacer-2);
1995
+ height: 2.5rem;
1996
+ justify-content: center;
1997
+ min-width: 0;
1998
+ color: var(--figma-color-text);
1999
+
2000
+ &[open] {
2001
+ display: flex;
2002
+ }
2003
+
2004
+ & p {
2005
+ margin: 0;
2006
+ padding: 0;
2007
+ color: inherit;
2008
+ font-weight: var(--body-medium-strong-fontWeight);
2009
+ }
2010
+
2011
+ hr[vertical] {
2012
+ margin: 0;
2013
+ }
2014
+
2015
+ & fig-button:last-child {
2016
+ margin-right: calc(var(--spacer-2) * -1);
2017
+ }
2018
+
2019
+ /* Theme: Dark (default) - hardcoded to ensure consistency regardless of global theme */
2020
+ &[theme="dark"] {
2021
+ background-color: #2c2c2c;
2022
+ color: rgba(255, 255, 255, 0.9);
2023
+ color-scheme: dark;
2024
+ }
2025
+
2026
+ /* Theme: Light - hardcoded to ensure consistency regardless of global theme */
2027
+ &[theme="light"] {
2028
+ background-color: #ffffff;
2029
+ color: rgba(0, 0, 0, 0.9);
2030
+ box-shadow: var(--figma-elevation-500-modal-window);
2031
+ color-scheme: light;
2032
+ }
2033
+
2034
+ /* Theme: Danger - hardcoded to ensure consistency regardless of global theme */
2035
+ &[theme="danger"] {
2036
+ background-color: #f24822;
2037
+ color: #ffffff;
2038
+ color-scheme: dark;
2039
+ }
2040
+
2041
+ /* Theme: Brand - hardcoded to ensure consistency regardless of global theme */
2042
+ &[theme="brand"] {
2043
+ background-color: #0d99ff;
2044
+ color: #ffffff;
2045
+ color-scheme: dark;
2046
+ }
2047
+ }
2048
+
2086
2049
  /* Tooltip */
2087
2050
  fig-tooltip,
2088
2051
  fig-popover {