Skip to content

Commit 1e73873

Browse files
cdegrootcdegroot
authored
Make sidebar CSS use semantic vars (#1674)
1 parent e24cc25 commit 1e73873

File tree

3 files changed

+80
-46
lines changed

3 files changed

+80
-46
lines changed

‎assets/css/custom-props/theme-dark.css‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,23 @@ body.dark {
5959

6060
--success: var(--green-lightened-10);
6161

62-
--sidebarButton: var(--gray50);
63-
--sidebarButtonBackground: linear-gradient(180deg, var(--gray900) 20%, var(--gray900-opacity-50) 70%, var(--gray900-opacity-0) 100%);
62+
--sidebarButtonBackground: linear-gradient(180deg,
63+
var(--gray900) 20%,
64+
var(--gray900-opacity-50) 70%,
65+
var(--gray900-opacity-0) 100%);
66+
--sidebarAccentMain: var(--gray50);
67+
--sidebarBackground: var(--gray800);
68+
--sidebarGradient: linear-gradient(var(--sidebarBackground),
69+
var(gray800-opacity-0));
70+
--sidebarHeader: var(--gray700);
71+
--sidebarMuted: var(--gray300);
72+
--sidebarHover: var(--white);
73+
--sidebarScrollbarThumb: var(--coldGray);
74+
--sidebarScrollbarTrack: var(--sidebarBackground);
75+
--sidebarSearch: var(--gray700);
76+
--sidebarSubheadings: var(--gray400);
77+
--sidebarItem: var(--gray200);
78+
--sidebarInactiveItemMarker: var(--gray600);
79+
--sidebarLanguageAccentBar: var(--main);
80+
--sidebarActiveItem: var(--main-lightened-10);
6481
}

‎assets/css/custom-props/theme-light.css‎

Lines changed: 19 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,23 @@
5959

6060
--success: var(--green);
6161

62-
--sidebarButton: var(--gray50);
63-
--sidebarButtonBackground: linear-gradient(180deg, var(--white) 20%, var(--white-opacity-50) 70%, var(--white-opacity-0) 100%);
62+
--sidebarButtonBackground: linear-gradient(180deg,
63+
var(--gray900) 20%,
64+
var(--gray900-opacity-50) 70%,
65+
var(--gray900-opacity-0) 100%);
66+
--sidebarAccentMain: var(--gray50);
67+
--sidebarBackground: var(--gray800);
68+
--sidebarGradient: linear-gradient(var(--sidebarBackground),
69+
var(gray800-opacity-0));
70+
--sidebarHeader: var(--gray700);
71+
--sidebarMuted: var(--gray300);
72+
--sidebarHover: var(--white);
73+
--sidebarScrollbarThumb: var(--coldGray);
74+
--sidebarScrollbarTrack: var(--sidebarBackground);
75+
--sidebarSearch: var(--gray700);
76+
--sidebarSubheadings: var(--gray400);
77+
--sidebarItem: var(--gray200);
78+
--sidebarInactiveItemMarker: var(--gray600);
79+
--sidebarLanguageAccentBar: var(--main);
80+
--sidebarActiveItem: var(--main-lightened-10);
6481
}

‎assets/css/sidebar.css‎

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,14 @@
22
font-family: var(--sansFontFamily);
33
font-size: 16px;
44
line-height: 18px;
5-
background-color: var(--gray800);
6-
color: var(--gray50);
5+
background-color: var(--sidebarBackground);
6+
color: var(--sidebarAccentMain);
77
overflow: hidden;
8-
scrollbar-color: var(--coldGray) var(--gray800);
8+
scrollbar-color: var(--sidebarScrollbarThumb) var(--sidebarScrollbarTrack);
99
}
1010

1111
.sidebar .gradient {
12-
background: linear-gradient(var(--gray800), var(--gray800-opacity-0));
12+
background: var(--sidebarGradient);
1313
height: 20px;
1414
margin-top: -20px;
1515
pointer-events: none;
@@ -28,19 +28,19 @@
2828
}
2929

3030
.sidebar a {
31-
color: var(--gray50);
31+
color: var(--sidebarAccentMain);
3232
text-decoration: none;
3333
transition: color .3s ease-in-out;
3434
}
3535

3636
.sidebar a:hover {
37-
color: var(--white);
37+
color: var(--sidebarHover);
3838
}
3939

4040
.sidebar .sidebar-header {
4141
margin: 12px;
4242
border-radius: 4px;
43-
background-color: var(--gray700);
43+
background-color: var(--sidebarHeader);
4444
width: 276px;
4545
}
4646

@@ -63,7 +63,7 @@
6363
font-weight: 700;
6464
font-size: 20px;
6565
line-height: 30px;
66-
color: var(--gray50);
66+
color: var(--sidebarAccentMain);
6767
margin: 0;
6868
padding: 0;
6969
max-width: 230px;
@@ -78,7 +78,7 @@
7878
font-weight: 300;
7979
font-size: 16px;
8080
line-height: 20px;
81-
color: var(--gray300);
81+
color: var(--sidebarMuted);
8282
}
8383

8484
.sidebar .sidebar-projectVersionsDropdown {
@@ -90,7 +90,7 @@
9090
-webkit-appearance: none;
9191
appearance: none;
9292
background-color: transparent;
93-
color: var(--white);
93+
color: var(--sidebarHover);
9494
z-index: 2;
9595
}
9696

@@ -109,7 +109,7 @@
109109
content: "\25bc";
110110
z-index: 1;
111111
font-size: 8px;
112-
color: var(--white);
112+
color: var(--sidebarHover);
113113
}
114114

115115
.sidebar .sidebar-projectVersionsDropdown::-ms-expand {
@@ -126,7 +126,7 @@
126126
text-transform: uppercase;
127127
font-weight: 300;
128128
font-size: 14px;
129-
color: var(--gray300);
129+
color: var(--sidebarMuted);
130130
}
131131

132132
.sidebar .sidebar-listNav li {
@@ -142,11 +142,11 @@
142142
}
143143

144144
.sidebar .sidebar-listNav li:is(:hover, .selected) a {
145-
border-color: var(--main);
145+
border-color: var(--sidebarLanguageAccentBar);
146146
}
147147

148148
.sidebar .sidebar-listNav li:is(:hover, .selected) a {
149-
color: var(--gray50);
149+
color: var(--sidebarAccentMain);
150150
}
151151

152152
.sidebar .sidebar-search {
@@ -155,7 +155,7 @@
155155

156156
.sidebar .sidebar-search.selected .search-button,
157157
.sidebar .sidebar-search .search-button:hover {
158-
color: var(--main);
158+
color: var(--sidebarLanguageAccentBar);
159159
opacity: 1;
160160
}
161161

@@ -166,7 +166,7 @@
166166

167167
.sidebar .sidebar-search .search-button {
168168
font-size: 14px;
169-
color: var(--gray50);
169+
color: var(--sidebarAccentMain);
170170
background-color: transparent;
171171
border: none;
172172
cursor: pointer;
@@ -181,7 +181,7 @@
181181

182182
.sidebar .sidebar-search .search-close-button {
183183
font-size: 16px;
184-
color: var(--gray50);
184+
color: var(--sidebarAccentMain);
185185
background-color: transparent;
186186
border: none;
187187
cursor: pointer;
@@ -205,10 +205,10 @@
205205
}
206206

207207
.sidebar .sidebar-search .search-input {
208-
background-color: var(--gray700);
208+
background-color: var(--sidebarSearch);
209209
border: none;
210210
border-radius: 4px;
211-
color: var(--gray50);
211+
color: var(--sidebarAccentMain);
212212
margin-left: 12px;
213213
padding: 8px 6px 8px 38px;
214214
width: 276px;
@@ -285,7 +285,7 @@
285285
font-weight: bold;
286286
font-size: .9em;
287287
line-height: 1.8em;
288-
color: var(--gray400);
288+
color: var(--sidebarSubheadings);
289289
padding-left: 15px;
290290
}
291291

@@ -295,13 +295,13 @@
295295
font-size: .8em;
296296
margin: 2em 0 0;
297297
line-height: 1.8em;
298-
color: var(--gray400);
298+
color: var(--sidebarSubheadings);
299299
padding-left: 15px;
300300
}
301301

302302
.sidebar #full-list li a {
303303
padding: 3px 0 3px 15px;
304-
color: var(--gray200);
304+
color: var(--sidebarItem);
305305
overflow: hidden;
306306
}
307307

@@ -318,23 +318,23 @@
318318
}
319319

320320
.sidebar #full-list li .current-section > a {
321-
color: var(--main-lightened-10);
321+
color: var(--sidebarActiveItem);
322322
}
323323

324324
.sidebar #full-list > li > a:hover {
325-
border-left: 3px solid var(--main);
325+
border-left: 3px solid var(--sidebarLanguageAccentBar);
326326
padding-left: 12px;
327327
}
328328

329329
.sidebar #full-list > li.current-page > a {
330-
color: var(--main-lightened-10);
331-
border-left: 3px solid var(--main);
330+
color: var(--sidebarActiveItem);
331+
border-left: 3px solid var(--sidebarLanguageAccentBar);
332332
padding-left: 12px;
333333
}
334334

335335
.sidebar #full-list > li.current-page > a:after,
336336
.sidebar #full-list > li.current-page {
337-
color: var(--main-lightened-10);
337+
color: var(--sidebarActiveItem);
338338
}
339339

340340
.sidebar #full-list > li:last-child {
@@ -357,23 +357,23 @@
357357
line-height: 16px;
358358
padding: 0 8px;
359359
margin-right: 0;
360-
color: var(--gray50);
360+
color: var(--sidebarAccentMain);
361361
}
362362

363363
.sidebar #full-list ul li.current-hash {
364-
color: var(--main-lightened-10);
364+
color: var(--sidebarActiveItem);
365365
}
366366

367367
.sidebar #full-list ul li.current-hash > a {
368-
color: var(--main-lightened-10);
368+
color: var(--sidebarActiveItem);
369369
}
370370

371371
.sidebar #full-list ul li.current-hash > a:before,
372372
.sidebar #full-list > li > ul > li > a:hover:before {
373373
content: "\2022";
374374
position: absolute;
375375
margin-left: -15px;
376-
color: var(--main-lightened-10);
376+
color: var(--sidebarActiveItem);
377377
}
378378

379379
.sidebar #full-list ul li a {
@@ -392,11 +392,11 @@
392392
.sidebar #full-list ul li ul li {
393393
margin-right: 0;
394394
height: 20px;
395-
color: var(--gray50);
395+
color: var(--sidebarAccentMain);
396396
}
397397

398398
.sidebar #full-list ul li ul li a {
399-
border-left: 1px solid var(--gray600);
399+
border-left: 1px solid var(--sidebarInactiveItemMarker);
400400
padding: 0 10px;
401401
height: 20px;
402402
}
@@ -406,16 +406,16 @@
406406
}
407407

408408
.sidebar #full-list ul li ul li > a:hover {
409-
border-color: var(--main);
409+
border-color: var(--sidebarLanguageAccentBar);
410410
}
411411

412412
.sidebar #full-list ul li ul li.current-hash > a {
413-
color: var(--main-lightened-10);
414-
border-color: var(--main);
413+
color: var(--sidebarActiveItem);
414+
border-color: var(--sidebarLanguageAccentBar);
415415
}
416416

417417
.sidebar #full-list ul li ul li.current-hash > a {
418-
color: var(--main-lightened-10);
418+
color: var(--sidebarActiveItem);
419419
margin-left: 0;
420420
}
421421

@@ -424,13 +424,13 @@
424424
}
425425

426426
::-webkit-scrollbar-track {
427-
background-color: var(--gray800);
427+
background-color: var(--sidebarBackground);
428428
}
429429

430430
.sidebar ::-webkit-scrollbar-thumb {
431-
background-color: var(--coldGray);
431+
background-color: var(--sidebarScrollbarThumb);
432432
border-radius: 10px;
433-
border: 3px solid var(--gray800);
433+
border: 3px solid var(--sidebarBackground);
434434
}
435435

436436
.sidebar-button {
@@ -442,15 +442,15 @@
442442
}
443443

444444
.sidebar-button:hover {
445-
color: var(--white);
445+
color: var(--sidebarHover);
446446
}
447447

448448
.sidebar-button:is(:active, :hover, :focus) {
449449
outline: none;
450450
}
451451

452452
.sidebar-button {
453-
color: var(--sidebarButton);
453+
color: var(--sidebarAccentMain);
454454
}
455455
.sidebar-closed .sidebar-button {
456456
color: var(--contrast);

0 commit comments

Comments
 (0)