Skip to content

Commit 706eb86

Browse files
velzievelzie
committed
[chrome] remove everything using legacy styles
1 parent 391ebd1 commit 706eb86

20 files changed

+148
-164
lines changed

‎packages/chrome/src/components/BookmarkPopup.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ BookmarkPopup.style = css`
5959
.title {
6060
padding: 1em;
6161
font-weight: bold;
62-
border-bottom: 1px solid var(--fg4);
62+
border-bottom: 1px solid var(--text-30);
6363
text-align: center;
6464
margin: 0 -1em;
6565
}
@@ -73,23 +73,23 @@ BookmarkPopup.style = css`
7373
margin-top: 0.5em;
7474
}
7575
button {
76-
background: var(--bg02);
77-
border: 1px solid var(--fg4);
76+
background: var(--toolbar_field);
77+
border: 1px solid var(--text-20);
7878
border-radius: 4px;
7979
padding: 0.5em 1em;
8080
font-size: 0.9em;
8181
cursor: pointer;
82-
color: var(--fg);
82+
color: var(--toolbar_field_text);
8383
}
8484
button:hover {
85-
background: var(--bg03);
85+
background: var(--text-10);
8686
}
8787
button.accent {
88-
background: var(--accent);
88+
background: var(--tab_line);
8989
color: white;
90-
border-color: var(--accent);
90+
border-color: var(--tab_line);
9191
}
9292
button.accent:hover {
93-
background: var(--accent-hover, var(--accent));
93+
background: var(--accent-dark);
9494
}
9595
`;

‎packages/chrome/src/components/Button.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -25,38 +25,38 @@ Button.style = css`
2525
color: inherit;
2626
}
2727
:scope:not(.icon) {
28-
background: var(--bg02);
29-
border: 1px solid var(--fg4);
28+
background: var(--toolbar_field);
29+
border: 1px solid var(--text-20);
3030
border-radius: 4px;
3131
padding: 0.5em 1em;
3232
font-size: 0.9em;
3333
cursor: pointer;
34-
color: var(--fg);
34+
color: var(--toolbar_field_text);
3535
}
3636
:scope:not(.icon):hover {
37-
background: var(--bg03);
37+
background: var(--text-10);
3838
}
3939
:scope.primary {
40-
background: var(--accent);
40+
background: var(--tab_line);
4141
color: white;
42-
border-color: var(--accent);
42+
border-color: var(--tab_line);
4343
}
4444
:scope.primary:hover {
45-
background: var(--accent-hover, var(--accent));
45+
background: var(--accent-dark);
4646
}
4747
4848
:scope:disabled,
4949
:scope[disabled] {
5050
opacity: 0.6;
5151
cursor: not-allowed;
5252
pointer-events: none;
53-
background: var(--bg02);
54-
color: var(--fg4);
55-
border-color: var(--fg4);
53+
background: var(--toolbar_field);
54+
color: var(--text-40);
55+
border-color: var(--text-20);
5656
}
5757
:scope:disabled:hover,
5858
:scope[disabled]:hover {
59-
background: var(--bg02);
59+
background: var(--toolbar_field);
6060
}
6161
6262
:scope.icon {
@@ -74,7 +74,7 @@ Button.style = css`
7474
top: 50%;
7575
left: 50%;
7676
transform: translate(-50%, -50%);
77-
background: var(--bg20);
77+
background: var(--text-15);
7878
border-radius: 50%;
7979
}
8080
`;

‎packages/chrome/src/components/Checkbox.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ Checkbox.style = css`
1919
:scope {
2020
width: 1em;
2121
height: 1em;
22-
background: var(--bg);
23-
border: 1px solid var(--bg20);
22+
background: var(--toolbar_field);
23+
border: 1px solid var(--text-20);
2424
display: inline-block;
2525
position: relative;
2626
border-radius: 4px;
@@ -38,16 +38,16 @@ Checkbox.style = css`
3838
display: flex;
3939
align-items: center;
4040
justify-content: center;
41-
color: var(--bg);
41+
color: var(--toolbar_field);
4242
font-size: 0.8em;
4343
transform: scale(0);
4444
transition: transform 120ms ease;
4545
pointer-events: none;
4646
}
4747
4848
:scope:has(input:checked) {
49-
background: var(--accent);
50-
border-color: var(--accent);
49+
background: var(--tab_line);
50+
border-color: var(--tab_line);
5151
}
5252
5353
:scope:has(input:checked)::after {

‎packages/chrome/src/components/DownloadsPopup.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ DownloadsPopup.style = css`
109109
.title {
110110
padding: 1em;
111111
display: flex;
112-
border-bottom: 1px solid var(--fg4);
112+
border-bottom: 1px solid var(--text-30);
113113
}
114114
.title p {
115115
font-size: 1.25em;
@@ -129,7 +129,7 @@ DownloadsPopup.style = css`
129129
top: 50%;
130130
left: 50%;
131131
transform: translate(-50%, -50%);
132-
background: var(--bg20);
132+
background: var(--text-15);
133133
border-radius: 50%;
134134
}
135135
@@ -149,7 +149,7 @@ DownloadsPopup.style = css`
149149
position: relative;
150150
}
151151
.entry:hover {
152-
background: var(--bg20);
152+
background: var(--text-15);
153153
}
154154
.contents {
155155
display: flex;
@@ -168,7 +168,7 @@ DownloadsPopup.style = css`
168168
right: 0;
169169
top: 0;
170170
padding: 1em;
171-
background: var(--bg20);
171+
background: var(--text-15);
172172
height: 100%;
173173
align-items: start;
174174
gap: 1em;
@@ -188,22 +188,22 @@ DownloadsPopup.style = css`
188188
top: 50%;
189189
left: 50%;
190190
transform: translate(-50%, -50%);
191-
background: var(--fg4);
191+
background: var(--text-30);
192192
border-radius: 50%;
193193
}
194194
195195
.contents .data {
196-
color: var(--fg2);
196+
color: var(--text-70);
197197
}
198198
.footer {
199-
border-top: 1px solid var(--fg4);
199+
border-top: 1px solid var(--text-30);
200200
padding: 1em;
201201
cursor: pointer;
202202
display: flex;
203203
align-items: center;
204204
}
205205
.footer:hover {
206-
background: var(--bg20);
206+
background: var(--text-15);
207207
}
208208
.buttoniconcontainer {
209209
flex: 1;
@@ -221,11 +221,11 @@ DownloadsPopup.style = css`
221221
border: none;
222222
}
223223
progress::-webkit-progress-bar {
224-
background-color: var(--fg4);
224+
background-color: var(--text-30);
225225
border-radius: var(--radius);
226226
}
227227
progress::-webkit-progress-value {
228-
background-color: var(--accent);
228+
background-color: var(--tab_line);
229229
border-radius: var(--radius);
230230
}
231231
`;

‎packages/chrome/src/components/Input.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -56,26 +56,26 @@ Input.style = css`
5656
5757
label {
5858
font-size: 0.9em;
59-
color: var(--fg2);
59+
color: var(--text-70);
6060
}
6161
6262
input {
63-
background: var(--bg01);
64-
border: 1px solid var(--fg4);
63+
background: var(--toolbar_field);
64+
border: 1px solid var(--text-20);
6565
border-radius: 4px;
6666
padding: 0.75em;
6767
font-family: var(--font);
6868
font-size: 0.9em;
69-
color: var(--fg);
69+
color: var(--toolbar_field_text);
7070
outline: none;
7171
transition:
7272
border-color 0.2s ease,
7373
box-shadow 0.2s ease;
7474
}
7575
7676
input:focus {
77-
border-color: var(--accent);
78-
box-shadow: 0 0 0 1px var(--accent-transparent);
77+
border-color: var(--tab_line);
78+
box-shadow: 0 0 0 2px var(--accent-20);
7979
}
8080
8181
input:disabled {
@@ -84,6 +84,6 @@ Input.style = css`
8484
}
8585
8686
input::placeholder {
87-
color: var(--fg4);
87+
color: var(--field-text-50);
8888
}
8989
`;

‎packages/chrome/src/components/Menu.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -170,7 +170,7 @@ Menu.style = css`
170170
transform: scale(100%);
171171
}
172172
.separator {
173-
border-top: 1px solid var(--toolbar_text);
173+
border-top: 1px solid var(--text-20);
174174
}
175175
:scope.closing {
176176
transform: scale(95%);
@@ -204,11 +204,11 @@ Menu.style = css`
204204
padding: 0;
205205
margin: 0;
206206
207-
background: var(--bg);
208-
border: 1px solid var(--bg20);
207+
background: var(--toolbar_field);
208+
border: 1px solid var(--text-20);
209209
}
210210
.item:hover {
211-
background: var(--bg01);
211+
background: var(--text-10);
212212
}
213213
`;
214214

‎packages/chrome/src/components/Omnibar/CircularProgress.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,10 +75,10 @@ CircularProgress.style = css`
7575
}
7676
circle {
7777
fill: transparent;
78-
stroke: var(--accent);
78+
stroke: var(--tab_line);
7979
/*transition: stroke-dashoffset 0.2s ease;*/
8080
}
8181
circle.inactive {
82-
stroke: var(--bg20);
82+
stroke: var(--text-15);
8383
}
8484
`;

‎packages/chrome/src/components/Omnibar/Omnibar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -248,7 +248,7 @@ Omnibar.style = css`
248248
border: none;
249249
font-size: 1.25em;
250250
background: none;
251-
color: var(--fg);
251+
color: var(--toolbar_text);
252252
border-radius: 0.2em;
253253
254254
transition: top 0.5s ease;
@@ -264,6 +264,6 @@ Omnibar.style = css`
264264
width: 2em;
265265
border-radius: 50%;
266266
opacity: 0.5;
267-
background: var(--bg20);
267+
background: var(--text-15);
268268
}
269269
`;

‎packages/chrome/src/components/Omnibar/Omnibox.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ InactiveBar.style = css`
4747
}
4848
4949
:scope.subtle.active {
50-
border: 1px solid var(--accent);
50+
border: 1px solid var(--tab_line);
5151
}
5252
`;
5353

@@ -425,7 +425,8 @@ Omnibox.style = css`
425425
width: 98%;
426426
margin: 0 auto;
427427
428-
border-bottom: 1px solid var(--fg5);
428+
border-bottom: 1px solid
429+
var(--text-35);
429430
margin-bottom: 0.5em;
430431
}
431432
@@ -434,7 +435,7 @@ Omnibox.style = css`
434435
height: 2em;
435436
line-height: 2.5em;
436437
padding-left: 1.5em;
437-
color: var(--fg3);
438+
color: var(--text-60);
438439
font-size: 0.9em;
439440
}
440441

‎packages/chrome/src/components/Omnibar/Suggestion.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,7 +138,7 @@ Suggestion.style = css`
138138
}
139139
140140
.url {
141-
color: var(--fg20);
141+
color: var(--text-65);
142142
font-size: 0.85em;
143143
min-width: 0;
144144
opacity: 0.6;
@@ -148,7 +148,7 @@ Suggestion.style = css`
148148
}
149149
:scope.focused,
150150
:scope.focused:hover {
151-
background: var(--accent);
151+
background: var(--tab_line);
152152
}
153153
:scope:hover {
154154
background: var(--toolbarbutton-hover-background);

0 commit comments

Comments
 (0)