Skip to content

Commit 8aff7b8

Browse files
arvsrnarvsrn
authored
feat(app): update all components to use v2 tokens (#33598)
1 parent 6c12c32 commit 8aff7b8

16 files changed

Lines changed: 117 additions & 116 deletions

‎packages/ui/src/v2/components/accordion-v2.css‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
[data-component="accordion-v2"] {
2-
--accordion-v2-fg: var(--text-text-base);
3-
--accordion-v2-icon: var(--icon-icon-base);
4-
--accordion-v2-border: var(--border-border-strong);
5-
--accordion-v2-bg: var(--background-bg-base);
2+
--accordion-v2-fg: var(--v2-text-text-base);
3+
--accordion-v2-icon: var(--v2-icon-icon-base);
4+
--accordion-v2-border: var(--v2-border-border-strong);
5+
--accordion-v2-bg: var(--v2-background-bg-base);
66

77
box-sizing: border-box;
88
display: flex;

‎packages/ui/src/v2/components/basic-tool-v2.css‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@
55
}
66

77
[data-component="basic-tool-v2"] {
8-
--bt-title: var(--text-text-base);
9-
--bt-sep: var(--text-text-muted);
10-
--bt-subtitle: var(--text-text-muted);
11-
--bt-args: var(--text-text-muted);
12-
--bt-chevron: var(--text-text-faint);
13-
--bt-content: var(--text-text-muted);
8+
--bt-title: var(--v2-text-text-base);
9+
--bt-sep: var(--v2-text-text-muted);
10+
--bt-subtitle: var(--v2-text-text-muted);
11+
--bt-args: var(--v2-text-text-muted);
12+
--bt-chevron: var(--v2-text-text-faint);
13+
--bt-content: var(--v2-text-text-muted);
1414

1515
box-sizing: border-box;
1616
display: flex;
@@ -40,7 +40,7 @@
4040
}
4141

4242
[data-slot="basic-tool-v2-trigger"]:focus-visible {
43-
outline: 2px solid var(--border-border-focus);
43+
outline: 2px solid var(--v2-border-border-focus);
4444
outline-offset: 2px;
4545
border-radius: 2px;
4646
}

‎packages/ui/src/v2/components/checkbox-v2.css‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
}
1010

1111
[data-slot="checkbox-v2-error"] {
12-
color: var(--state-fg-danger);
12+
color: var(--v2-state-fg-danger);
1313
font-size: 12px;
1414
font-weight: var(--font-weight-regular);
1515
line-height: var(--line-height-normal);
@@ -59,9 +59,9 @@
5959
top: calc(50% - 16px / 2);
6060
border-radius: 4px;
6161
border: none;
62-
box-shadow: inset 0 0 0 0.5px var(--border-border-strong);
62+
box-shadow: inset 0 0 0 0.5px var(--v2-border-border-strong);
6363

64-
background: linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
64+
background: linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
6565
transition:
6666
background 170ms ease-out,
6767
opacity 170ms ease-out,
@@ -99,14 +99,14 @@
9999
display: inline-flex;
100100
align-items: center;
101101
user-select: none;
102-
color: var(--text-text-base);
102+
color: var(--v2-text-text-base);
103103
font-size: 13px;
104104
line-height: 20px;
105105
letter-spacing: -0.04px;
106106
}
107107

108108
[data-slot="checkbox-v2-description"] {
109-
color: var(--text-text-muted);
109+
color: var(--v2-text-text-muted);
110110
font-size: 11px;
111111
font-weight: 440;
112112
line-height: 1;
@@ -120,7 +120,7 @@
120120
[data-slot="checkbox-v2-input"]:focus-visible
121121
~ [data-slot="checkbox-v2-control-stack"]
122122
[data-slot="checkbox-v2-control"] {
123-
outline: 2px solid var(--border-border-focus);
123+
outline: 2px solid var(--v2-border-border-focus);
124124
outline-offset: 1px;
125125
}
126126

@@ -129,31 +129,31 @@
129129
)
130130
[data-slot="checkbox-v2-control"] {
131131
background:
132-
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
133-
linear-gradient(180deg, var(--alpha-light-6) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
132+
linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
133+
linear-gradient(180deg, var(--v2-alpha-light-6) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
134134
}
135135

136136
[data-slot="checkbox-v2"]:where([data-disabled]) [data-slot="checkbox-v2-control"] {
137137
opacity: 0.5;
138138
}
139139

140140
[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]) [data-slot="checkbox-v2-control"] {
141-
background: linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
141+
background: linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
142142
}
143143

144144
[data-slot="checkbox-v2"]:where([data-checked], [data-indeterminate]):where(:hover):where(
145145
:not([data-disabled], [data-readonly])
146146
)
147147
[data-slot="checkbox-v2-control"] {
148148
background:
149-
linear-gradient(0deg, var(--overlay-simple-overlay-contrast-hover), var(--overlay-simple-overlay-contrast-hover)),
150-
linear-gradient(180deg, var(--alpha-light-20) 0%, var(--alpha-light-0) 100%), var(--background-bg-accent);
149+
linear-gradient(0deg, var(--v2-overlay-simple-overlay-contrast-hover), var(--v2-overlay-simple-overlay-contrast-hover)),
150+
linear-gradient(180deg, var(--v2-alpha-light-20) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-accent);
151151
}
152152

153153
[data-slot="checkbox-v2"]:where([data-invalid]):where(:not([data-checked], [data-indeterminate]))
154154
[data-slot="checkbox-v2-control"] {
155-
background: var(--state-bg-danger);
156-
box-shadow: inset 0 0 0 0.5px #b82d35;
155+
background: var(--v2-state-bg-danger);
156+
box-shadow: inset 0 0 0 0.5px var(--v2-state-border-danger);
157157
}
158158

159159
[data-slot="checkbox-v2"] .checkbox-v2-icon {

‎packages/ui/src/v2/components/dialog-v2.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@
9191
border-radius: 4px;
9292
flex-shrink: 0;
9393
cursor: pointer;
94+
color: var(--v2-icon-icon-muted);
9495

9596
&:hover {
9697
background: var(--v2-overlay-simple-overlay-hover);

‎packages/ui/src/v2/components/dialog-v2.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ export function Dialog(props: DialogProps) {
7878
>
7979
<path
8080
d="M12.4446 3.55469L3.55566 12.4436M3.55566 3.55469L12.4446 12.4436"
81-
stroke="#808080"
81+
stroke="currentColor"
8282
stroke-linejoin="round"
8383
/>
8484
</svg>

‎packages/ui/src/v2/components/diff-changes-v2.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,10 @@
1515
}
1616

1717
[data-slot="diff-changes-additions"] {
18-
color: var(--state-fg-success);
18+
color: var(--v2-state-fg-success);
1919
}
2020

2121
[data-slot="diff-changes-deletions"] {
22-
color: var(--state-fg-danger);
22+
color: var(--v2-state-fg-danger);
2323
}
2424
}

‎packages/ui/src/v2/components/field-v2.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
font-size: 13px;
2323
line-height: 1;
2424
letter-spacing: -0.04px;
25-
color: var(--text-text-base);
25+
color: var(--v2-text-text-base);
2626
font-variation-settings: "slnt" 0;
2727
cursor: default;
2828
user-select: none;
@@ -51,21 +51,21 @@
5151
border: 0;
5252
border-radius: 0;
5353
background: transparent;
54-
color: var(--icon-icon-muted);
54+
color: var(--v2-icon-icon-muted);
5555
cursor: pointer;
5656
outline: none;
5757
}
5858

5959
[data-component="field-v2"] [data-slot="field-v2-label-info"]:is(:hover, [data-state="hover"]) {
60-
color: var(--text-text-base);
60+
color: var(--v2-text-text-base);
6161
}
6262

6363
[data-component="field-v2"] [data-slot="field-v2-label-info"]:focus {
6464
outline: none;
6565
}
6666

6767
[data-component="field-v2"] [data-slot="field-v2-label-info"]:focus-visible {
68-
outline: 2px solid var(--border-border-focus);
68+
outline: 2px solid var(--v2-border-border-focus);
6969
outline-offset: 1px;
7070
border-radius: 2px;
7171
}
@@ -80,7 +80,7 @@
8080
font-size: 11px;
8181
line-height: 1;
8282
letter-spacing: 0.05px;
83-
color: var(--text-text-muted);
83+
color: var(--v2-text-text-muted);
8484
font-variation-settings: "slnt" 0;
8585
user-select: none;
8686
}

‎packages/ui/src/v2/components/inline-input-v2.css‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@
1010
border-radius: 6px;
1111
outline: 1px solid transparent;
1212
outline-offset: 0;
13-
background: linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
14-
box-shadow: var(--elevation-button-neutral);
13+
background: linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
14+
box-shadow: var(--v2-elevation-button-neutral);
1515
flex: none;
1616
align-self: stretch;
1717
overflow: hidden;
@@ -27,8 +27,8 @@
2727

2828
[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within) {
2929
background:
30-
linear-gradient(0deg, var(--overlay-simple-overlay-hover), var(--overlay-simple-overlay-hover)),
31-
linear-gradient(180deg, var(--alpha-light-2) 0%, var(--alpha-light-0) 100%), var(--background-bg-base);
30+
linear-gradient(0deg, var(--v2-overlay-simple-overlay-hover), var(--v2-overlay-simple-overlay-hover)),
31+
linear-gradient(180deg, var(--v2-alpha-light-2) 0%, var(--v2-alpha-light-0) 100%), var(--v2-background-bg-base);
3232
}
3333

3434
[data-component="inline-input-v2"]:where(:hover):not([data-disabled], [data-invalid]):not(:focus-within)
@@ -37,12 +37,12 @@
3737
}
3838

3939
[data-component="inline-input-v2"]:where(:focus-within):not([data-disabled], [data-invalid]) {
40-
outline-color: var(--border-border-focus);
40+
outline-color: var(--v2-border-border-focus);
4141
box-shadow: none;
4242
}
4343

4444
[data-component="inline-input-v2"]:where([data-invalid]):not([data-disabled]) {
45-
outline-color: var(--state-fg-danger);
45+
outline-color: var(--v2-state-fg-danger);
4646
box-shadow: none;
4747
}
4848

@@ -64,7 +64,7 @@
6464
max-width: 100%;
6565
padding: 4px 8px;
6666
gap: 4px;
67-
background: var(--background-bg-layer-01);
67+
background: var(--v2-background-bg-layer-01);
6868
border-radius: 4px 0 0 4px;
6969
transition: background 85ms ease-out;
7070
}
@@ -86,7 +86,7 @@
8686
font-size: 13px;
8787
line-height: 1;
8888
letter-spacing: -0.04px;
89-
color: var(--text-text-muted);
89+
color: var(--v2-text-text-muted);
9090
font-variation-settings: "slnt" 0;
9191
}
9292

@@ -99,7 +99,7 @@
9999
align-self: stretch;
100100
width: 0.5px;
101101
min-width: 0.5px;
102-
background: var(--border-border-base);
102+
background: var(--v2-border-border-base);
103103
}
104104

105105
[data-component="inline-input-v2"] [data-slot="inline-input-v2-field"] {
@@ -142,12 +142,12 @@
142142
font-size: 13px;
143143
line-height: 1;
144144
letter-spacing: -0.04px;
145-
color: var(--text-text-base);
145+
color: var(--v2-text-text-base);
146146
font-variation-settings: "slnt" 0;
147147
}
148148

149149
[data-component="inline-input-v2"] [data-slot="inline-input-v2-input"]::placeholder {
150-
color: var(--text-text-faint);
150+
color: var(--v2-text-text-faint);
151151
}
152152

153153
[data-component="inline-input-v2"][data-numeric] [data-slot="inline-input-v2-input"] {
@@ -167,27 +167,27 @@
167167
border: 0;
168168
border-radius: 4px;
169169
background: transparent;
170-
color: var(--icon-icon-muted);
170+
color: var(--v2-icon-icon-muted);
171171
cursor: pointer;
172172
outline: none;
173173
}
174174

175175
[data-component="inline-input-v2"]
176176
[data-slot="inline-input-v2-icon-button"]:is(:hover, [data-state="hover"]):not(:disabled) {
177-
background-color: var(--overlay-simple-overlay-hover);
177+
background-color: var(--v2-overlay-simple-overlay-hover);
178178
}
179179

180180
[data-component="inline-input-v2"]
181181
[data-slot="inline-input-v2-icon-button"]:is(:active, [data-state="pressed"]):not(:disabled) {
182-
background-color: var(--overlay-simple-overlay-pressed);
182+
background-color: var(--v2-overlay-simple-overlay-pressed);
183183
}
184184

185185
[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:focus {
186186
outline: none;
187187
}
188188

189189
[data-component="inline-input-v2"] [data-slot="inline-input-v2-icon-button"]:focus-visible {
190-
outline: 2px solid var(--border-border-focus);
190+
outline: 2px solid var(--v2-border-border-focus);
191191
outline-offset: 1px;
192192
}
193193

@@ -203,15 +203,15 @@
203203
}
204204

205205
[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-prefix-text"] {
206-
color: var(--text-text-muted);
206+
color: var(--v2-text-text-muted);
207207
}
208208

209209
[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"] {
210-
color: var(--state-fg-danger);
211-
caret-color: var(--state-fg-danger);
210+
color: var(--v2-state-fg-danger);
211+
caret-color: var(--v2-state-fg-danger);
212212
}
213213

214214
[data-component="inline-input-v2"][data-invalid]:not([data-disabled]) [data-slot="inline-input-v2-input"]::placeholder {
215-
color: var(--state-fg-danger);
215+
color: var(--v2-state-fg-danger);
216216
opacity: 1;
217217
}

0 commit comments

Comments
 (0)