@opencode/ui 2.0.28 → 2.0.30

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 (14) hide show
  1. package/dist/data-display/badge/badge.d.ts +1 -1
  2. package/dist/i18n/en.d.ts +5 -0
  3. package/dist/icons/catalog.d.ts +4 -0
  4. package/package.json +1 -1
  5. package/src/actions/button/button.css +260 -243
  6. package/src/actions/icon-button/icon-button.css +125 -117
  7. package/src/actions/submit.css +58 -53
  8. package/src/context/dialog.tsx +3 -0
  9. package/src/data-display/badge/badge.css +5 -0
  10. package/src/data-display/badge/badge.tsx +1 -1
  11. package/src/forms/text-input/text-input.css +185 -180
  12. package/src/i18n/en.ts +5 -0
  13. package/src/icons/catalog.ts +4 -0
  14. package/src/styles/tailwind/index.css +0 -1
package/dist/data-display/badge/badge.d.ts CHANGED
@@ -2,6 +2,6 @@ import { type ComponentProps } from "solid-js";
2
2
  import "./badge.css";
3
3
  export interface BadgeProps extends ComponentProps<"span"> {
4
4
  appearance?: "standard" | "compact";
5
- variant?: "neutral" | "accent";
5
+ variant?: "neutral" | "accent" | "subtle";
6
6
  }
7
7
  export declare function Badge(props: BadgeProps): import("solid-js").JSX.Element;
package/dist/i18n/en.d.ts CHANGED
@@ -218,10 +218,12 @@ declare const source: {
218
218
  "ui.message.collapse": string;
219
219
  "ui.message.copy": string;
220
220
  "ui.message.copyMessage": string;
221
+ "ui.message.copyFullMessage": string;
221
222
  "ui.message.forkMessage": string;
222
223
  "ui.message.revertMessage": string;
223
224
  "ui.message.moveToQueue": string;
224
225
  "ui.message.pending": string;
226
+ "ui.message.voice": string;
225
227
  "ui.message.deletePending": string;
226
228
  "ui.message.copyResponse": string;
227
229
  "ui.message.copied": string;
@@ -232,6 +234,8 @@ declare const source: {
232
234
  "ui.message.modelVariant": string;
233
235
  "ui.sessionTimeline.notice.model": string;
234
236
  "ui.sessionTimeline.notice.modelSwitched": string;
237
+ "ui.sessionTimeline.notice.variantSwitched": string;
238
+ "ui.sessionTimeline.notice.variantDefault": string;
235
239
  "ui.sessionTimeline.notice.agentChanged": string;
236
240
  "ui.sessionTimeline.notice.movedTo": string;
237
241
  "ui.sessionTimeline.notice.movedTooltip": string;
@@ -252,6 +256,7 @@ declare const source: {
252
256
  "ui.question.multiHint": string;
253
257
  "ui.question.singleHint": string;
254
258
  "ui.question.custom.placeholder": string;
259
+ "ui.question.custom.answerPlaceholder": string;
255
260
  };
256
261
  export type Key = keyof typeof source;
257
262
  export type PluralCategory = "zero" | "one" | "two" | "few" | "many" | "other";
package/dist/icons/catalog.d.ts CHANGED
@@ -264,6 +264,10 @@ declare const icons: {
264
264
  viewBox: string;
265
265
  body: string;
266
266
  };
267
+ waveform: {
268
+ viewBox: string;
269
+ body: string;
270
+ };
267
271
  archive: {
268
272
  viewBox: string;
269
273
  body: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@opencode/ui",
3
- "version": "2.0.28",
3
+ "version": "2.0.30",
4
4
  "type": "module",
5
5
  "license": "MIT",
6
6
  "repository": {
package/src/actions/button/button.css CHANGED
@@ -1,296 +1,313 @@
1
+ /* Vite can link this before the app entry CSS, so name every layer here or `components` ranks below Tailwind's base reset. */
2
+ @layer properties, theme, base, components, utilities;
1
3
  @import "../submit.css";
2
4
 
3
- [data-component="button-v2"] {
4
- -webkit-font-smoothing: antialiased;
5
- -moz-osx-font-smoothing: grayscale;
6
- position: relative;
7
- display: inline-flex;
8
- align-items: center;
9
- justify-content: center;
10
- gap: 6px;
11
- border-radius: 6px;
12
- font-style: normal;
13
- font-weight: 530;
14
- font-size: 13px;
15
- line-height: 20px;
16
- color: var(--v2-text-text-base);
17
- text-shadow: none;
18
- font-variant-numeric: tabular-nums;
19
- letter-spacing: -0.04px;
20
- user-select: none;
21
- cursor: pointer;
22
- outline: none;
23
- }
5
+ @layer components {
6
+ [data-component="button-v2"] {
7
+ -webkit-font-smoothing: antialiased;
8
+ -moz-osx-font-smoothing: grayscale;
9
+ position: relative;
10
+ display: inline-flex;
11
+ align-items: center;
12
+ justify-content: center;
13
+ gap: 6px;
14
+ border-radius: 6px;
15
+ font-style: normal;
16
+ font-weight: 530;
17
+ font-size: 13px;
18
+ line-height: 20px;
19
+ color: var(--v2-text-text-base);
20
+ text-shadow: none;
21
+ font-variant-numeric: tabular-nums;
22
+ letter-spacing: -0.04px;
23
+ user-select: none;
24
+ cursor: pointer;
25
+ outline: none;
26
+ }
24
27
 
25
- [data-component="button-v2"] > * {
26
- pointer-events: none;
27
- }
28
+ [data-component="button-v2"] > * {
29
+ pointer-events: none;
30
+ }
28
31
 
29
- [data-component="button-v2"]:focus {
30
- outline: none;
31
- }
32
+ [data-component="button-v2"]:focus {
33
+ outline: none;
34
+ }
32
35
 
33
- [data-component="button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled):not([data-variant="loading"]) {
34
- outline: 2px solid var(--v2-border-border-focus);
35
- outline-offset: 2.5px;
36
- }
36
+ [data-component="button-v2"]:is(:focus-visible, [data-state="focus"]):not(:disabled):not([data-variant="loading"]) {
37
+ outline: 2px solid var(--v2-border-border-focus);
38
+ outline-offset: 2.5px;
39
+ }
37
40
 
38
- [data-component="button-v2"][data-size="normal"] {
39
- height: 28px;
40
- padding: 0 11px;
41
- }
41
+ [data-component="button-v2"][data-size="normal"] {
42
+ height: 28px;
43
+ padding: 0 11px;
44
+ }
42
45
 
43
- [data-component="button-v2"][data-size="small"] {
44
- height: 24px;
45
- padding: 0 9px;
46
- border-radius: 4px;
47
- }
46
+ [data-component="button-v2"][data-size="small"] {
47
+ height: 24px;
48
+ padding: 0 9px;
49
+ border-radius: 4px;
50
+ }
48
51
 
49
- [data-component="button-v2"][data-size="large"] {
50
- height: 32px;
51
- padding: 0 15px;
52
- }
52
+ [data-component="button-v2"][data-size="large"] {
53
+ height: 32px;
54
+ padding: 0 15px;
55
+ }
53
56
 
54
- [data-component="button-v2"][data-icon][data-size="small"] {
55
- padding-left: 9px;
56
- }
57
+ [data-component="button-v2"][data-icon][data-size="small"] {
58
+ padding-left: 9px;
59
+ }
57
60
 
58
- [data-component="button-v2"][data-icon][data-size="normal"] {
59
- padding-left: 11px;
60
- }
61
+ [data-component="button-v2"][data-icon][data-size="normal"] {
62
+ padding-left: 11px;
63
+ }
61
64
 
62
- [data-component="button-v2"][data-icon][data-size="large"] {
63
- padding-left: 15px;
64
- }
65
+ [data-component="button-v2"][data-icon][data-size="large"] {
66
+ padding-left: 15px;
67
+ }
65
68
 
66
- [data-component="button-v2"] [data-slot="icon-svg"] {
67
- color: currentColor;
68
- }
69
+ [data-component="button-v2"] [data-slot="icon-svg"] {
70
+ color: currentColor;
71
+ }
69
72
 
70
- /* Neutral */
71
- [data-component="button-v2"][data-variant="neutral"] {
72
- background-color: var(--v2-background-bg-button-neutral);
73
- color: var(--v2-text-text-base);
74
- box-shadow: var(--v2-elevation-button-neutral);
75
- }
73
+ /* Neutral */
74
+ [data-component="button-v2"][data-variant="neutral"] {
75
+ background-color: var(--v2-background-bg-button-neutral);
76
+ color: var(--v2-text-text-base);
77
+ box-shadow: var(--v2-elevation-button-neutral);
78
+ }
76
79
 
77
- [data-component="button-v2"][data-variant="neutral"]:is(:hover, [data-state="hover"]):not(:disabled) {
78
- background-image:
79
- linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
80
- linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
81
- }
80
+ [data-component="button-v2"][data-variant="neutral"]:is(:hover, [data-state="hover"]):not(:disabled) {
81
+ background-image:
82
+ linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
83
+ linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
84
+ }
82
85
 
83
- [data-component="button-v2"][data-variant="neutral"]:is(:active, [data-state="pressed"]):not(:disabled) {
84
- background-image:
85
- linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%),
86
- linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
87
- }
86
+ [data-component="button-v2"][data-variant="neutral"]:is(:active, [data-state="pressed"]):not(:disabled) {
87
+ background-image:
88
+ linear-gradient(
89
+ 90deg,
90
+ var(--v2-overlay-simple-overlay-pressed) 0%,
91
+ var(--v2-overlay-simple-overlay-pressed) 100%
92
+ ),
93
+ linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
94
+ }
88
95
 
89
- [data-component="button-v2"][data-variant="neutral"]:is(:disabled, [data-state="disabled"]) {
90
- opacity: 0.5;
91
- cursor: not-allowed;
92
- }
96
+ [data-component="button-v2"][data-variant="neutral"]:is(:disabled, [data-state="disabled"]) {
97
+ opacity: 0.5;
98
+ cursor: not-allowed;
99
+ }
93
100
 
94
- /* Danger */
95
- [data-component="button-v2"][data-variant="danger"] {
96
- background-color: var(--v2-background-bg-button-neutral);
97
- color: var(--v2-state-fg-danger);
98
- box-shadow: var(--v2-elevation-button-neutral);
99
- }
101
+ /* Danger */
102
+ [data-component="button-v2"][data-variant="danger"] {
103
+ background-color: var(--v2-background-bg-button-neutral);
104
+ color: var(--v2-state-fg-danger);
105
+ box-shadow: var(--v2-elevation-button-neutral);
106
+ }
100
107
 
101
- [data-component="button-v2"][data-variant="danger"]:is(:hover, [data-state="hover"]):not(:disabled) {
102
- background-image:
103
- linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
104
- linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
105
- }
108
+ [data-component="button-v2"][data-variant="danger"]:is(:hover, [data-state="hover"]):not(:disabled) {
109
+ background-image:
110
+ linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
111
+ linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
112
+ }
106
113
 
107
- [data-component="button-v2"][data-variant="danger"]:is(:active, [data-state="pressed"]):not(:disabled) {
108
- background-image:
109
- linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%),
110
- linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
111
- }
114
+ [data-component="button-v2"][data-variant="danger"]:is(:active, [data-state="pressed"]):not(:disabled) {
115
+ background-image:
116
+ linear-gradient(
117
+ 90deg,
118
+ var(--v2-overlay-simple-overlay-pressed) 0%,
119
+ var(--v2-overlay-simple-overlay-pressed) 100%
120
+ ),
121
+ linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
122
+ }
112
123
 
113
- [data-component="button-v2"][data-variant="danger"]:is(:disabled, [data-state="disabled"]) {
114
- opacity: 0.5;
115
- cursor: not-allowed;
116
- }
124
+ [data-component="button-v2"][data-variant="danger"]:is(:disabled, [data-state="disabled"]) {
125
+ opacity: 0.5;
126
+ cursor: not-allowed;
127
+ }
117
128
 
118
- [data-component="button-v2"][data-variant="warning"] {
119
- background-color: var(--v2-background-bg-button-neutral);
120
- color: var(--v2-state-fg-warning);
121
- box-shadow: var(--v2-elevation-button-neutral);
122
- }
129
+ [data-component="button-v2"][data-variant="warning"] {
130
+ background-color: var(--v2-background-bg-button-neutral);
131
+ color: var(--v2-state-fg-warning);
132
+ box-shadow: var(--v2-elevation-button-neutral);
133
+ }
123
134
 
124
- [data-component="button-v2"][data-variant="warning"]:is(:hover, [data-state="hover"]):not(:disabled) {
125
- background-image:
126
- linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
127
- linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
128
- }
135
+ [data-component="button-v2"][data-variant="warning"]:is(:hover, [data-state="hover"]):not(:disabled) {
136
+ background-image:
137
+ linear-gradient(90deg, var(--v2-overlay-simple-overlay-hover) 0%, var(--v2-overlay-simple-overlay-hover) 100%),
138
+ linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
139
+ }
129
140
 
130
- [data-component="button-v2"][data-variant="warning"]:is(:active, [data-state="pressed"]):not(:disabled) {
131
- background-image:
132
- linear-gradient(90deg, var(--v2-overlay-simple-overlay-pressed) 0%, var(--v2-overlay-simple-overlay-pressed) 100%),
133
- linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
134
- }
141
+ [data-component="button-v2"][data-variant="warning"]:is(:active, [data-state="pressed"]):not(:disabled) {
142
+ background-image:
143
+ linear-gradient(
144
+ 90deg,
145
+ var(--v2-overlay-simple-overlay-pressed) 0%,
146
+ var(--v2-overlay-simple-overlay-pressed) 100%
147
+ ),
148
+ linear-gradient(90deg, var(--v2-background-bg-button-neutral) 0%, var(--v2-background-bg-button-neutral) 100%);
149
+ }
135
150
 
136
- [data-component="button-v2"][data-variant="warning"]:is(:disabled, [data-state="disabled"]) {
137
- opacity: 0.5;
138
- cursor: not-allowed;
139
- }
151
+ [data-component="button-v2"][data-variant="warning"]:is(:disabled, [data-state="disabled"]) {
152
+ opacity: 0.5;
153
+ cursor: not-allowed;
154
+ }
140
155
 
141
- /* Outline */
142
- [data-component="button-v2"][data-variant="outline"] {
143
- background-color: transparent;
144
- color: var(--v2-text-text-base);
145
- box-shadow: inset 0 0 0 1px var(--v2-border-border-muted);
146
- }
156
+ /* Outline */
157
+ [data-component="button-v2"][data-variant="outline"] {
158
+ background-color: transparent;
159
+ color: var(--v2-text-text-base);
160
+ box-shadow: inset 0 0 0 1px var(--v2-border-border-muted);
161
+ }
147
162
 
148
- [data-component="button-v2"][data-variant="outline"]:is(:hover, [data-state="hover"]):not(:disabled) {
149
- background-color: var(--v2-overlay-simple-overlay-hover);
150
- }
163
+ [data-component="button-v2"][data-variant="outline"]:is(:hover, [data-state="hover"]):not(:disabled) {
164
+ background-color: var(--v2-overlay-simple-overlay-hover);
165
+ }
151
166
 
152
- [data-component="button-v2"][data-variant="outline"]:is(:active, [data-state="pressed"]):not(:disabled) {
153
- background-color: var(--v2-overlay-simple-overlay-pressed);
154
- }
167
+ [data-component="button-v2"][data-variant="outline"]:is(:active, [data-state="pressed"]):not(:disabled) {
168
+ background-color: var(--v2-overlay-simple-overlay-pressed);
169
+ }
155
170
 
156
- [data-component="button-v2"][data-variant="outline"]:is(:disabled, [data-state="disabled"]) {
157
- opacity: 0.5;
158
- cursor: not-allowed;
159
- }
171
+ [data-component="button-v2"][data-variant="outline"]:is(:disabled, [data-state="disabled"]) {
172
+ opacity: 0.5;
173
+ cursor: not-allowed;
174
+ }
160
175
 
161
- /* Contrast */
162
- [data-component="button-v2"][data-variant="contrast"] {
163
- background-image:
164
- linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
165
- linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
166
- color: var(--v2-text-text-contrast);
167
- text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
168
- box-shadow: var(--v2-elevation-button-contrast);
169
- }
176
+ /* Contrast */
177
+ [data-component="button-v2"][data-variant="contrast"] {
178
+ background-image:
179
+ linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
180
+ linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
181
+ color: var(--v2-text-text-contrast);
182
+ text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.3);
183
+ box-shadow: var(--v2-elevation-button-contrast);
184
+ }
170
185
 
171
- [data-component="button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
172
- background-image:
173
- linear-gradient(
174
- 90deg,
175
- var(--v2-overlay-simple-overlay-contrast-hover) 0%,
176
- var(--v2-overlay-simple-overlay-contrast-hover) 100%
177
- ),
178
- linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
179
- linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
180
- }
186
+ [data-component="button-v2"][data-variant="contrast"]:is(:hover, [data-state="hover"]):not(:disabled) {
187
+ background-image:
188
+ linear-gradient(
189
+ 90deg,
190
+ var(--v2-overlay-simple-overlay-contrast-hover) 0%,
191
+ var(--v2-overlay-simple-overlay-contrast-hover) 100%
192
+ ),
193
+ linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
194
+ linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
195
+ }
181
196
 
182
- [data-component="button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
183
- background-image:
184
- linear-gradient(
185
- 90deg,
186
- var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
187
- var(--v2-overlay-simple-overlay-contrast-pressed) 100%
188
- ),
189
- linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
190
- linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
191
- }
197
+ [data-component="button-v2"][data-variant="contrast"]:is(:active, [data-state="pressed"]):not(:disabled) {
198
+ background-image:
199
+ linear-gradient(
200
+ 90deg,
201
+ var(--v2-overlay-simple-overlay-contrast-pressed) 0%,
202
+ var(--v2-overlay-simple-overlay-contrast-pressed) 100%
203
+ ),
204
+ linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%),
205
+ linear-gradient(90deg, var(--v2-background-bg-contrast) 0%, var(--v2-background-bg-contrast) 100%);
206
+ }
192
207
 
193
- [data-component="button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
194
- opacity: 0.4;
195
- cursor: not-allowed;
196
- }
208
+ [data-component="button-v2"][data-variant="contrast"]:is(:disabled, [data-state="disabled"]) {
209
+ opacity: 0.4;
210
+ cursor: not-allowed;
211
+ }
197
212
 
198
- /* Loading */
199
- [data-component="button-v2"][data-variant="loading"] {
200
- background: var(--v2-background-bg-layer-02);
201
- color: var(--v2-text-text-base);
202
- box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
203
- cursor: default;
204
- pointer-events: none;
205
- }
213
+ /* Loading */
214
+ [data-component="button-v2"][data-variant="loading"] {
215
+ background: var(--v2-background-bg-layer-02);
216
+ color: var(--v2-text-text-base);
217
+ box-shadow: inset 0 0 0 0.5px var(--v2-border-border-muted);
218
+ cursor: default;
219
+ pointer-events: none;
220
+ }
206
221
 
207
- /* Ghost */
208
- [data-component="button-v2"][data-variant="ghost"] {
209
- background-color: transparent;
210
- color: var(--v2-text-text-base);
211
- }
222
+ /* Ghost */
223
+ [data-component="button-v2"][data-variant="ghost"] {
224
+ background-color: transparent;
225
+ color: var(--v2-text-text-base);
226
+ }
212
227
 
213
- [data-component="button-v2"][data-variant="ghost"]:is(:hover, [data-state="hover"]):not(:disabled):not(
214
- [data-expanded]
215
- ) {
216
- background-color: var(--v2-overlay-simple-overlay-hover);
217
- }
228
+ [data-component="button-v2"][data-variant="ghost"]:is(:hover, [data-state="hover"]):not(:disabled):not(
229
+ [data-expanded]
230
+ ) {
231
+ background-color: var(--v2-overlay-simple-overlay-hover);
232
+ }
218
233
 
219
- [data-component="button-v2"][data-variant="ghost"]:is(:active, [data-state="pressed"]):not(:disabled) {
220
- background-color: var(--v2-overlay-simple-overlay-pressed);
221
- }
234
+ [data-component="button-v2"][data-variant="ghost"]:is(:active, [data-state="pressed"]):not(:disabled) {
235
+ background-color: var(--v2-overlay-simple-overlay-pressed);
236
+ }
222
237
 
223
- [data-component="button-v2"][data-variant="ghost"]:where([data-expanded]):not(:disabled) {
224
- background-color: var(--v2-overlay-simple-overlay-pressed);
225
- }
238
+ [data-component="button-v2"][data-variant="ghost"]:where([data-expanded]):not(:disabled) {
239
+ background-color: var(--v2-overlay-simple-overlay-pressed);
240
+ }
226
241
 
227
- [data-component="button-v2"][data-variant="ghost"]:is(:disabled, [data-state="disabled"]) {
228
- opacity: 0.5;
229
- cursor: not-allowed;
230
- }
242
+ [data-component="button-v2"][data-variant="ghost"]:is(:disabled, [data-state="disabled"]) {
243
+ opacity: 0.5;
244
+ cursor: not-allowed;
245
+ }
231
246
 
232
- /* Ghost muted */
233
- [data-component="button-v2"][data-variant="ghost-muted"] {
234
- background-color: transparent;
235
- color: var(--v2-text-text-muted);
236
- font-weight: 440;
237
- }
247
+ /* Ghost muted */
248
+ [data-component="button-v2"][data-variant="ghost-muted"] {
249
+ background-color: transparent;
250
+ color: var(--v2-text-text-muted);
251
+ font-weight: 440;
252
+ }
238
253
 
239
- [data-component="button-v2"][data-variant="ghost-muted"] [data-slot="icon-svg"] {
240
- color: var(--v2-icon-icon-muted);
241
- }
254
+ [data-component="button-v2"][data-variant="ghost-muted"] [data-slot="icon-svg"] {
255
+ color: var(--v2-icon-icon-muted);
256
+ }
242
257
 
243
- @media (hover: hover) {
244
- [data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not(
245
- [data-expanded]
246
- ) {
247
- background-color: var(--v2-overlay-simple-overlay-hover);
258
+ @media (hover: hover) {
259
+ [data-component="button-v2"][data-variant="ghost-muted"]:is(:hover, [data-state="hover"]):not(:disabled):not(
260
+ [data-expanded]
261
+ ) {
262
+ background-color: var(--v2-overlay-simple-overlay-hover);
263
+ }
248
264
  }
249
- }
250
265
 
251
- [data-component="button-v2"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {
252
- background-color: var(--v2-overlay-simple-overlay-pressed);
253
- }
266
+ [data-component="button-v2"][data-variant="ghost-muted"]:is(:active, [data-state="pressed"]):not(:disabled) {
267
+ background-color: var(--v2-overlay-simple-overlay-pressed);
268
+ }
254
269
 
255
- [data-component="button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) {
256
- background-color: var(--v2-overlay-simple-overlay-pressed);
257
- color: var(--v2-text-text-base);
258
- }
270
+ [data-component="button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) {
271
+ background-color: var(--v2-overlay-simple-overlay-pressed);
272
+ color: var(--v2-text-text-base);
273
+ }
259
274
 
260
- [data-component="button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled) [data-slot="icon-svg"] {
261
- color: var(--v2-icon-icon-base);
262
- }
275
+ [data-component="button-v2"][data-variant="ghost-muted"]:where([data-expanded]):not(:disabled)
276
+ [data-slot="icon-svg"] {
277
+ color: var(--v2-icon-icon-base);
278
+ }
263
279
 
264
- [data-component="button-v2"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
265
- opacity: 0.5;
266
- cursor: not-allowed;
267
- }
280
+ [data-component="button-v2"][data-variant="ghost-muted"]:is(:disabled, [data-state="disabled"]) {
281
+ opacity: 0.5;
282
+ cursor: not-allowed;
283
+ }
268
284
 
269
- /* Ghost faint */
270
- [data-component="button-v2"][data-variant="ghost-faint"] {
271
- background-color: transparent;
272
- color: var(--v2-text-text-faint);
273
- }
285
+ /* Ghost faint */
286
+ [data-component="button-v2"][data-variant="ghost-faint"] {
287
+ background-color: transparent;
288
+ color: var(--v2-text-text-faint);
289
+ }
274
290
 
275
- [data-component="button-v2"][data-variant="ghost-faint"] [data-slot="icon-svg"] {
276
- color: var(--v2-icon-icon-faint);
277
- }
291
+ [data-component="button-v2"][data-variant="ghost-faint"] [data-slot="icon-svg"] {
292
+ color: var(--v2-icon-icon-faint);
293
+ }
278
294
 
279
- [data-component="button-v2"][data-variant="ghost-faint"]:is(:hover, [data-state="hover"]):not(:disabled):not(
280
- [data-expanded]
281
- ) {
282
- background-color: var(--v2-overlay-simple-overlay-hover);
283
- }
295
+ [data-component="button-v2"][data-variant="ghost-faint"]:is(:hover, [data-state="hover"]):not(:disabled):not(
296
+ [data-expanded]
297
+ ) {
298
+ background-color: var(--v2-overlay-simple-overlay-hover);
299
+ }
284
300
 
285
- [data-component="button-v2"][data-variant="ghost-faint"]:is(:active, [data-state="pressed"]):not(:disabled) {
286
- background-color: var(--v2-overlay-simple-overlay-pressed);
287
- }
301
+ [data-component="button-v2"][data-variant="ghost-faint"]:is(:active, [data-state="pressed"]):not(:disabled) {
302
+ background-color: var(--v2-overlay-simple-overlay-pressed);
303
+ }
288
304
 
289
- [data-component="button-v2"][data-variant="ghost-faint"]:where([data-expanded]):not(:disabled) {
290
- background-color: var(--v2-overlay-simple-overlay-pressed);
291
- }
305
+ [data-component="button-v2"][data-variant="ghost-faint"]:where([data-expanded]):not(:disabled) {
306
+ background-color: var(--v2-overlay-simple-overlay-pressed);
307
+ }
292
308
 
293
- [data-component="button-v2"][data-variant="ghost-faint"]:is(:disabled, [data-state="disabled"]) {
294
- opacity: 0.5;
295
- cursor: not-allowed;
309
+ [data-component="button-v2"][data-variant="ghost-faint"]:is(:disabled, [data-state="disabled"]) {
310
+ opacity: 0.5;
311
+ cursor: not-allowed;
312
+ }
296
313
  }