@moises.ai/design-system 3.11.11 → 3.11.13

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 (22) hide show
  1. package/dist/colors/custom-styles.css +50 -100
  2. package/dist/index.js +3046 -3029
  3. package/package.json +1 -1
  4. package/src/colors/custom-styles.css +50 -100
  5. package/src/components/Button/Button.module.css +8 -8
  6. package/src/components/Callout/Callout.module.css +4 -4
  7. package/src/components/Checkbox/Checkbox.module.css +7 -7
  8. package/src/components/DataTable/dnd/DataTableRowSortable.jsx +1 -1
  9. package/src/components/HorizontalVolume/HorizontalVolume.module.css +1 -1
  10. package/src/components/IconButton/IconButton.jsx +30 -3
  11. package/src/components/IconButton/IconButton.module.css +208 -147
  12. package/src/components/IconButton/IconButton.stories.jsx +354 -397
  13. package/src/components/InputLevelMeter/InputLevelMeter.jsx +2 -1
  14. package/src/components/MultiSelect/MultiSelect.jsx +1 -1
  15. package/src/components/PanControl/PanControl.jsx +51 -75
  16. package/src/components/PanControl/PanControl.module.css +0 -31
  17. package/src/components/Rating/Rating.module.css +1 -1
  18. package/src/components/Select/Select.jsx +1 -1
  19. package/src/components/SetlistList/SetlistList.module.css +2 -2
  20. package/src/components/Shell/Shell.module.css +1 -1
  21. package/src/components/Slider/Slider.module.css +3 -3
  22. package/src/lib/menu/Menu.module.css +3 -3
package/src/components/IconButton/IconButton.module.css CHANGED
@@ -9,139 +9,106 @@
9
9
  }
10
10
 
11
11
 
12
- .ghost.mint {
12
+ .ghost.accent {
13
13
  background-color: transparent;
14
- color: #0affa7 !important;
14
+ color: var(--accent-a11) !important;
15
15
  }
16
16
 
17
- .ghost.mint.highContrast {
17
+ .ghost.accent.highContrast {
18
18
  background-color: transparent;
19
- color: rgba(166, 254, 205, 1) !important;
19
+ color: var(--accent-12) !important;
20
20
  }
21
21
 
22
- .ghost.mint:hover:not(.disabled),
23
- .ghost.mint.highContrast:hover:not(.disabled) {
22
+ .ghost.accent:hover:not(.disabled),
23
+ .ghost.accent.highContrast:hover:not(.disabled) {
24
24
  background-color: transparent;
25
- color: var(--mint-dark-12) !important;
25
+ color: var(--accent-12) !important;
26
26
  }
27
27
 
28
- .ghost.mint:active:not(.disabled),
29
- .ghost.mint.highContrast:active:not(.disabled),
30
- .ghost.mint[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
31
- .ghost.mint[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
28
+ .ghost.accent:active:not(.disabled),
29
+ .ghost.accent.highContrast:active:not(.disabled),
30
+ .ghost.accent[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
31
+ .ghost.accent[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
32
32
  background-color: transparent;
33
- color: var(--mint-dark-alpha-10) !important;
34
- opacity: 0.92;
35
- }
36
-
37
- .ghost.mint.disabled {
38
- color: var(--mint-dark-alpha-5) !important;
33
+ color: var(--accent-a10) !important;
39
34
  }
40
35
 
41
- .ghost.mint.highContrast.disabled {
42
- color: var(--mint-dark-alpha-6) !important;
36
+ .ghost.accent.disabled,
37
+ .ghost.accent.highContrast.disabled {
38
+ color: var(--neutral-alpha-8) !important;
43
39
  }
44
40
 
45
- .ghost.red {
41
+ .ghost.error {
46
42
  background-color: transparent;
47
43
  color: rgba(255, 149, 146, 1) !important;
48
44
  }
49
45
 
50
- .ghost.red.disabled {
46
+ .ghost.error.disabled {
51
47
  color: var(--neutral-alpha-8) !important;
52
48
  }
53
49
 
54
- .ghost.red:hover:not(.disabled) {
50
+ .ghost.error:hover:not(.disabled) {
55
51
  background-color: transparent;
56
52
  color: rgba(255, 209, 217, 1) !important;
57
53
  }
58
54
 
59
- .ghost.red:active:not(.disabled),
60
- .ghost.red[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
61
- .ghost.red[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
55
+ .ghost.error:active:not(.disabled),
56
+ .ghost.error[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
57
+ .ghost.error[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
62
58
  background-color: transparent;
63
59
  color: rgba(255, 100, 101, 0.92) !important;
64
60
  }
65
61
 
66
- .ghost.gray {
62
+ .ghost.neutral {
67
63
  background-color: transparent;
68
64
  color: var(--neutral-alpha-11) !important;
69
65
  }
70
66
 
71
- .ghost.gray.highContrast {
67
+ .ghost.neutral.highContrast {
72
68
  background-color: transparent;
73
69
  color: var(--neutral-alpha-12) !important;
74
70
  }
75
71
 
76
- .ghost.gray:hover:not(.disabled) {
72
+ .ghost.neutral:hover:not(.disabled) {
77
73
  background-color: transparent;
78
74
  color: var(--neutral-alpha-12) !important;
79
75
  }
80
76
 
81
- .ghost.gray:active:not(.disabled),
82
- .ghost.gray[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
83
- .ghost.gray[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
77
+ .ghost.neutral:active:not(.disabled),
78
+ .ghost.neutral[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
79
+ .ghost.neutral[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
84
80
  background-color: transparent;
85
81
  color: var(--neutral-alpha-10) !important;
86
82
  }
87
83
 
88
- .ghost.cyan {
89
- background-color: transparent;
90
- color: var(--aqua-dark-alpha-11) !important;
91
- }
92
-
93
- .ghost.cyan:hover:not(.disabled) {
94
- background-color: transparent;
95
- color: var(--aqua-dark-alpha-12) !important;
96
- }
97
-
98
- .ghost.cyan:active:not(.disabled),
99
- .ghost.cyan[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
100
- .ghost.cyan[class*="_popoverTrigger"][data-state='open']:not(.disabled) {
101
- background-color: transparent;
102
- color: var(--aqua-dark-alpha-10) !important;
103
- }
104
-
105
- .ghost.cyan.highContrast {
106
- background-color: transparent;
107
- color: var(--aqua-dark-12) !important;
108
- }
109
-
110
- .ghost.cyan.highContrast:hover:not(.disabled) {
111
- background-color: transparent;
112
- color: var(--aqua-dark-12) !important;
113
- }
114
-
115
- .ghost.cyan.highContrast:active:not(.disabled),
116
- .ghost.cyan.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
117
- .ghost.cyan.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
118
- .ghost.cyan.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled) {
119
- background-color: transparent;
120
- color: var(--aqua-dark-alpha-10) !important;
121
- }
122
-
123
-
124
- .ghost.cyan.disabled,
125
- .ghost.cyan.loading,
126
- .ghost.cyan.highContrast.disabled,
127
- .ghost.cyan.highContrast.loading,
128
- .ghost.red.disabled,
129
- .ghost.red.loading,
130
- .ghost.red.highContrast.disabled,
131
- .ghost.red.highContrast.loading,
132
- .ghost.gray.disabled,
133
- .ghost.gray.loading,
134
- .ghost.gray.highContrast.disabled,
135
- .ghost.gray.highContrast.loading,
136
- .ghost.mint.loading,
137
- .ghost.mint.highContrast.loading {
84
+ .ghost.error.disabled,
85
+ .ghost.error.loading,
86
+ .ghost.error.highContrast.disabled,
87
+ .ghost.error.highContrast.loading,
88
+ .ghost.neutral.disabled,
89
+ .ghost.neutral.loading,
90
+ .ghost.neutral.highContrast.disabled,
91
+ .ghost.neutral.highContrast.loading,
92
+ .ghost.accent.loading,
93
+ .ghost.accent.highContrast.loading,
94
+ .ghost.accent.disabled.loading,
95
+ .ghost.accent.highContrast.disabled.loading,
96
+ .ghost.accent.loading,
97
+ .ghost.accent.highContrast.loading,
98
+ .ghost.accent.disabled.loading,
99
+ .ghost.accent.highContrast.disabled.loading,
100
+ .ghost.accent.loading,
101
+ .ghost.accent.highContrast.loading
102
+ {
138
103
  color: var(--neutral-alpha-8) !important;
139
104
  }
140
105
 
141
106
  .solid.disabled,
142
107
  .solid.loading,
143
108
  .surface.disabled,
144
- .surface.loading {
109
+ .surface.loading,
110
+ .soft.disabled,
111
+ .soft.loading {
145
112
  background-color: var(--neutral-alpha-3) !important;
146
113
  color: var(--neutral-alpha-8) !important;
147
114
  }
@@ -198,149 +165,243 @@
198
165
  border-radius: 12px;
199
166
  }
200
167
 
201
- .solid.cyan {
202
- background-color: var(--aqua-9);
203
- color: var(--accent-d1);
168
+ .solid.neutral,
169
+ .solid.neutral.highContrast {
170
+ background-color: var(--neutral-12);
171
+ color: var(--neutral-1);
204
172
  }
205
173
 
206
- .solid.cyan:hover:not(.disabled):not(.loading) {
207
- background-color: var(--aqua-10);
174
+ .solid.neutral:hover:not(.disabled):not(.loading),
175
+ .solid.neutral.highContrast:hover:not(.disabled):not(.loading) {
176
+ opacity: 0.88;
208
177
  }
209
178
 
210
- .solid.cyan.highContrast {
211
- background-color: var(--aqua-dark-12);
179
+ .solid.accent {
180
+ background-color: var(--accent-9);
212
181
  color: var(--neutral-1);
213
182
  }
214
183
 
215
- .solid.cyan.highContrast:hover:not(.disabled):not(.loading) {
216
- opacity: 0.88;
184
+ .solid.accent:hover:not(.disabled):not(.loading),
185
+ .solid.accent:active:not(.disabled):not(.loading) {
186
+ background-color: var(--accent-10);
217
187
  }
218
-
219
- .solid.cyan.highContrast:active:not(.disabled):not(.loading),
220
- .solid.cyan.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
221
- .solid.cyan.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
222
- .solid.cyan.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled) {
223
- opacity: 0.82;
188
+ .solid.accent.highContrast {
189
+ background-color: var(--accent-12);
190
+ color: var(--neutral-1);
224
191
  }
225
192
 
226
- .solid.gray,
227
- .solid.gray.highContrast {
228
- background-color: var(--neutral-12);
229
- color: var(--neutral-1);
193
+ .solid.accent.highContrast:hover:not(.disabled):not(.loading),
194
+ .solid.accent.highContrast:active:not(.disabled):not(.loading),
195
+ .solid.accent.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
196
+ .solid.accent.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
197
+ .solid.accent.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
198
+ background-color: var(--accent-12);
230
199
  }
231
200
 
232
- .solid.gray:hover:not(.disabled):not(.loading),
233
- .solid.gray.highContrast:hover:not(.disabled):not(.loading) {
234
- opacity: 0.88;
201
+
202
+
203
+ .solid.accent[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"],
204
+ .solid.accent[class*="_popoverTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"],
205
+ .solid.accent[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
206
+ background-color: var(--accent-10) !important;
235
207
  }
236
208
 
237
- .solid.red {
209
+ .solid.error {
238
210
  background-color: var(--red-9);
239
211
  color: var(--neutral-12);
240
212
  }
241
213
 
242
- .solid.red:hover:not(.disabled):not(.loading) {
214
+ .solid.error:hover:not(.disabled):not(.loading) {
243
215
  background-color: var(--red-10);
244
216
  }
245
217
 
246
- .solid.red.highContrast {
218
+ .solid.error.highContrast {
247
219
  background-color: var(--red-12);
248
220
  color: var(--red-1);
249
221
  }
250
222
 
251
- .solid.red.highContrast:hover:not(.disabled):not(.loading) {
223
+ .solid.error.highContrast:hover:not(.disabled):not(.loading) {
252
224
  background-color: var(--red-12);
253
225
  opacity: 0.88;
254
226
  }
255
227
 
256
- .solid.red.highContrast:active:not(.disabled):not(.loading),
257
- .solid.red.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
258
- .solid.red.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
259
- .solid.red.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled) {
228
+ .solid.error.highContrast:active:not(.disabled):not(.loading),
229
+ .solid.error.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
230
+ .solid.error.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
231
+ .solid.error.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled) {
260
232
  background-color: var(--red-12);
261
233
  opacity: 0.82;
262
234
  }
263
235
 
264
- .soft.gray {
236
+ .soft.neutral {
265
237
  background-color: var(--neutral-alpha-3);
266
238
  color: var(--neutral-11);
267
239
  }
268
240
 
269
- .soft.gray:hover:not(.disabled):not(.loading) {
241
+ .soft.neutral:hover:not(.disabled):not(.loading) {
270
242
  background-color: var(--neutral-alpha-4);
271
243
  }
272
244
 
273
-
274
- /*
275
- quando é um trigger é assim que o botao ta ficando
276
- <button data-accent-color="gray" type="button" id="radix-«r0»"
277
- aria-haspopup="menu" aria-expanded="true" data-state="open"
278
- class="rt-reset rt-BaseButton rt-r-size-1 rt-variant-soft
279
- rt-IconButton _iconButton_1c4cc_1 _gray_1c4cc_61 _size1_1c4cc_144 _soft_1c4cc_256
280
- _menuTrigger_17nux_207 _showActiveTrigger_17nux_207" aria-controls="radix-«r1»">conteudo do botao</button>
281
-
282
-
283
- */
284
- .soft.gray:active:not(.disabled):not(.loading),
285
- .soft.gray[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
286
- .soft.gray[class*="_popoverTrigger"][data-state='open']:not(.disabled),
287
- .soft.gray[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"]
245
+ .soft.neutral:active:not(.disabled):not(.loading),
246
+ .soft.neutral[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
247
+ .soft.neutral[class*="_popoverTrigger"][data-state='open']:not(.disabled),
248
+ .soft.neutral[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"]
288
249
  {
289
250
  background-color: var(--neutral-alpha-5) !important;
290
251
  opacity: 0.92;
291
252
  }
292
253
 
293
- .soft.gray.highContrast {
254
+ .soft.neutral.highContrast {
294
255
  background-color: var(--neutral-alpha-3);
295
256
  color: var(--neutral-12);
296
257
  }
297
258
 
298
- .soft.gray.highContrast:hover:not(.disabled):not(.loading) {
259
+ .soft.neutral.highContrast:hover:not(.disabled):not(.loading) {
299
260
  background-color: var(--neutral-alpha-4);
300
261
  opacity: 0.88;
301
262
  }
302
263
 
303
- .soft.gray.highContrast:active:not(.disabled):not(.loading),
304
- .soft.gray.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
305
- .soft.gray.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
306
- .soft.gray.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
264
+ .soft.neutral.highContrast:active:not(.disabled):not(.loading),
265
+ .soft.neutral.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
266
+ .soft.neutral.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
267
+ .soft.neutral.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
307
268
  background-color: var(--neutral-alpha-5);
308
269
  opacity: 0.82;
309
270
  }
310
271
 
311
- .surface.gray {
272
+ .soft.accent,
273
+ .soft.accent.highContrast {
274
+ background-color: var(--accent-a3);
275
+ color: var(--accent-12);
276
+ }
277
+
278
+ .soft.accent:hover:not(.disabled):not(.loading),
279
+ .soft.accent.highContrast:hover:not(.disabled):not(.loading) {
280
+ background-color: var(--accent-a4);
281
+ }
282
+
283
+ .soft.accent:active:not(.disabled):not(.loading),
284
+ .soft.accent.highContrast:active:not(.disabled):not(.loading),
285
+ .soft.accent.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
286
+ .soft.accent.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
287
+ .soft.accent.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"],
288
+ .soft.accent[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"],
289
+ .soft.accent[class*="_popoverTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"],
290
+ .soft.accent[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
291
+ background-color: var(--accent-a5) !important;
292
+ }
293
+
294
+ .soft.accent.disabled,
295
+ .soft.accent.highContrast.disabled {
296
+ color: var(--neutral-alpha-8) !important;
297
+
298
+ }
299
+
300
+ .surface.neutral {
312
301
  color: var(--neutral-11);
313
302
  border: 1px solid var(--neutral-alpha-7);
314
303
  }
315
304
 
316
- .surface.gray:hover:not(.disabled):not(.loading) {
305
+ .surface.neutral:hover:not(.disabled):not(.loading) {
317
306
  border: 1px solid var(--neutral-alpha-8);
318
307
  }
319
308
 
320
- .surface.gray:active:not(.disabled):not(.loading),
321
- .surface.gray[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
322
- .surface.gray[class*="_popoverTrigger"][data-state='open']:not(.disabled),
323
- .surface.gray[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
309
+ .surface.neutral:active:not(.disabled):not(.loading),
310
+ .surface.neutral[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
311
+ .surface.neutral[class*="_popoverTrigger"][data-state='open']:not(.disabled),
312
+ .surface.neutral[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
324
313
  background-color: var(--neutral-alpha-3);
325
314
  border: 1px solid var(--neutral-alpha-8);
326
315
  opacity: 0.92;
327
316
  }
328
317
 
329
- .surface.gray.highContrast {
318
+ .surface.neutral.highContrast {
330
319
  color: var(--neutral-12);
331
320
  border: 1px solid var(--neutral-alpha-7);
332
321
  }
333
322
 
334
- .surface.gray.highContrast:hover:not(.disabled):not(.loading) {
323
+ .surface.neutral.highContrast:hover:not(.disabled):not(.loading) {
335
324
  border: 1px solid var(--neutral-alpha-8);
336
325
  opacity: 0.88;
337
326
  }
338
327
 
339
- .surface.gray.highContrast:active:not(.disabled):not(.loading),
340
- .surface.gray.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
341
- .surface.gray.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
342
- .surface.gray.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
328
+ .surface.neutral.highContrast:active:not(.disabled):not(.loading),
329
+ .surface.neutral.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
330
+ .surface.neutral.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
331
+ .surface.neutral.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
343
332
  background-color: var(--neutral-alpha-3);
344
333
  border: 1px solid var(--neutral-alpha-8);
345
334
  opacity: 0.82;
346
335
  }
336
+
337
+ .toggleable.soft {
338
+ background-color: var(--neutral-alpha-3);
339
+ color: var(--accent-a9);
340
+ }
341
+
342
+ .toggleable.soft.highContrast {
343
+ background-color: var(--neutral-alpha-3);
344
+ color: var(--accent-a12);
345
+ }
346
+
347
+ .toggleable.soft:hover:not(.disabled):not(.loading),
348
+ .toggleable.soft.highContrast:hover:not(.disabled):not(.loading) {
349
+ background-color: var(--neutral-alpha-4);
350
+ color: var(--accent-a12);
351
+ }
352
+
353
+ .toggleable.soft:active:not(.disabled):not(.loading),
354
+ .toggleable.soft[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
355
+ .toggleable.soft[class*="_popoverTrigger"][data-state='open']:not(.disabled),
356
+ .toggleable.soft.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
357
+ .toggleable.soft.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
358
+ .toggleable.soft.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
359
+ background-color: var(--neutral-alpha-5);
360
+ color: var(--accent-a10);
361
+ }
362
+
363
+ .toggleable.soft.disabled {
364
+ color: var(--accent-a5) !important;
365
+ background-color: var(--neutral-alpha-3) !important;
366
+ }
367
+
368
+ .toggleable.soft.highContrast.disabled {
369
+ color: var(--accent-a6) !important;
370
+ background-color: var(--neutral-alpha-3) !important;
371
+ }
372
+
373
+ .toggleable.ghost {
374
+ background-color: transparent;
375
+ color: var(--accent-a9);
376
+ }
377
+
378
+ .toggleable.ghost.highContrast {
379
+ background-color: transparent;
380
+ color: var(--accent-a12);
381
+ }
382
+
383
+ .toggleable.ghost:hover:not(.disabled):not(.loading),
384
+ .toggleable.ghost.highContrast:hover:not(.disabled):not(.loading) {
385
+ background-color: transparent;
386
+ color: var(--accent-a12);
387
+ }
388
+
389
+ .toggleable.ghost:active:not(.disabled):not(.loading),
390
+ .toggleable.ghost[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
391
+ .toggleable.ghost[class*="_popoverTrigger"][data-state='open']:not(.disabled),
392
+ .toggleable.ghost.highContrast[class*="_dropdownMenuTrigger"][data-state='open']:not(.disabled),
393
+ .toggleable.ghost.highContrast[class*="_popoverTrigger"][data-state='open']:not(.disabled),
394
+ .toggleable.ghost.highContrast[class*="_menuTrigger"][data-state='open']:not(.disabled)[class*="_showActiveTrigger"] {
395
+ background-color: transparent;
396
+ color: var(--accent-a10);
397
+ }
398
+
399
+ .toggleable.ghost.disabled {
400
+ color: var(--accent-a5) !important;
401
+ background-color: transparent !important;
402
+ }
403
+
404
+ .toggleable.ghost.highContrast.disabled {
405
+ color: var(--accent-a6) !important;
406
+ background-color: transparent !important;
407
+ }