Skip to content

Commit a30fcf9

Browse files
j-f1Thibaut
j-f1
authored and
Thibaut
committed
Switch from SASS variables to CSS variables
* Switch from SASS variables to CSS variables for most styling These are the simple cases, and the more complex ones will be covered by future commits. I’ve also replaced $fooZ ± 1 with the appropriate variable to avoid a runtime `calc()`. * Eliminate the `$style` variable 🔥 I’ve added a `--absolute` variable that’s `white` in dark mode and `black` in regular mode. * Remove `$inputFocusBorder` 🔥 * Switch the Prism styles to CSS variables * Convert `$mediumScreen` to a mixin * 🔥 `$selectionText` * Eliminate the final uses of SCSS variables I’ve dropped the 95% opacity on the background of the method source code overlay in RDoc since the difference isn’t noticeable but it makes implementation a lot easier. * Misc fixes * Extract the common variables from the two themes to a new file * Remove illegal usages of CSS variables in SCSS functions This flattens out the buttons on the settings page which makes the styles simpler (and more modern-looking IMO) and removes the box-shadow on the button, which was completely invisible to me. * Fix usages of SCSS functions in CSS variables * Use `html._theme-*` selectors * Eliminate `application-dark.css`; switch themes by toggling classes This also means that the Application Cache doesn’t have to get updated when toggling themes, and a new CSS file that’s nearly the same doesn’t need to be downloaded.
1 parent 2ad4662 commit a30fcf9

53 files changed

Lines changed: 434 additions & 582 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎assets/javascripts/views/content/settings_page.coffee‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,10 @@ class app.views.SettingsPage extends app.View
2424
'Preferences'
2525

2626
toggleDark: (enable) ->
27-
css = $('link[rel="stylesheet"][data-alt]')
28-
alt = css.getAttribute('data-alt')
29-
css.setAttribute('data-alt', css.getAttribute('href'))
30-
css.setAttribute('href', alt)
27+
html = document.documentElement
28+
html.classList.toggle('_theme-default')
29+
html.classList.toggle('_theme-dark')
3130
app.settings.set('dark', !!enable)
32-
app.appCache?.updateInBackground()
3331
return
3432

3533
toggleLayout: (layout, enable) ->

‎assets/stylesheets/application-dark.css.scss‎

Lines changed: 0 additions & 108 deletions
This file was deleted.

‎assets/stylesheets/application.css.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
* http://mozilla.org/MPL/2.0/
1212
*/
1313

14-
@import 'global/variables',
14+
@import 'global/variables-light',
15+
'global/variables-dark',
16+
'global/variables',
1517
'global/mixins',
1618
'global/icons',
1719
'global/classes',

‎assets/stylesheets/components/_app.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
html._booting { background: $contentBackground; }
1+
html._booting { background: var(--contentBackground); }
22
body._max-width { background: none; }
3-
html._booting body._max-width { background: $documentBackground; }
3+
html._booting body._max-width { background: var(--documentBackground); }
44

55
._app {
66
position: relative;
@@ -15,8 +15,8 @@ html._booting body._max-width { background: $documentBackground; }
1515

1616
._max-width & {
1717
margin: 0 auto;
18-
max-width: $maxWidth;
19-
background: $contentBackground;
20-
box-shadow: 1px 0 $headerBorder, -1px 0 $headerBorder;
18+
max-width: var(--maxWidth);
19+
background: var(--contentBackground);
20+
box-shadow: 1px 0 var(--headerBorder), -1px 0 var(--headerBorder);
2121
}
2222
}

‎assets/stylesheets/components/_content.scss‎

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,13 @@
44

55
._container {
66
position: relative;
7-
z-index: $contentZ;
7+
z-index: var(--contentZ);
88
height: 100%;
9-
margin-left: $sidebarWidth;
9+
margin-left: var(--sidebarWidth);
1010
pointer-events: none;
1111
@extend %border-box;
1212

13-
@media #{$mediumScreen} { margin-left: $sidebarMediumWidth; }
13+
@include mobile { margin-left: var(--sidebarMediumWidth); }
1414

1515
._sidebar-hidden & { margin-left: 0; }
1616
body:not(._native-scrollbars) & { -webkit-margin-end: -1px; }
@@ -30,7 +30,7 @@
3030
._sidebar-hidden &:before {
3131
content: '';
3232
display: block;
33-
margin-top: $headerHeight;
33+
margin-top: var(--headerHeight);
3434
}
3535

3636
._overlay-scrollbars & { padding-left: .625rem; }
@@ -54,7 +54,7 @@
5454
font-size: 4rem;
5555
font-weight: 300;
5656
letter-spacing: -.125rem;
57-
color: $loadingText;
57+
color: var(--loadingText);
5858
text-align: center;
5959
cursor: default;
6060
}
@@ -68,7 +68,7 @@
6868
//
6969

7070
._splash-title {
71-
color: $splashText;
71+
color: var(--splashText);
7272
@extend %loading, %user-select-none;
7373
}
7474

@@ -88,7 +88,7 @@
8888
min-height: calc(100vh - 2.375rem);
8989

9090
._sidebar-hidden & {
91-
min-height: calc(100vh - 2.375rem - #{$headerHeight});
91+
min-height: calc(100vh - 2.375rem - var(--headerHeight));
9292
}
9393
}
9494

@@ -140,12 +140,12 @@
140140

141141
._error-text {
142142
margin: 0 0 1rem;
143-
color: $textColorLight;
143+
color: var(--textColorLight);
144144
}
145145

146146
._error-links {
147147
font-size: 1rem;
148-
font-weight: $boldFontWeight;
148+
font-weight: var(--boldFontWeight);
149149
}
150150

151151
._error-link { padding: 0 .5rem; }
@@ -167,7 +167,7 @@
167167
height: 1px;
168168
margin-top: .25rem;
169169
margin-left: 1rem;
170-
background: $boxBorderLight;
170+
background: var(--boxBorderLight);
171171
}
172172
}
173173

@@ -197,7 +197,7 @@
197197
._toc-title {
198198
margin: 0 0 .5rem;
199199
font-size: inherit;
200-
font-weight: $boldFontWeight;
200+
font-weight: var(--boldFontWeight);
201201
}
202202

203203
._toc-list {
@@ -252,7 +252,7 @@
252252
._docs-size {
253253
text-align: right;
254254

255-
> small { color: $textColorLight; }
255+
> small { color: var(--textColorLight); }
256256
}
257257

258258
._docs-tools {
@@ -285,7 +285,7 @@
285285
padding: 0 .75rem;
286286
}
287287
._btn-link:not(._show) { display: none; }
288-
._btn-link._show ~ ._btn-link._show { border-left: 1px solid $boxBorder; }
288+
._btn-link._show ~ ._btn-link._show { border-left: 1px solid var(--boxBorder); }
289289
}
290290

291291
//
@@ -297,15 +297,15 @@
297297
position: relative;
298298
padding-left: 10em;
299299
font-size: .8125rem;
300-
color: $textColorLight;
300+
color: var(--textColorLight);
301301

302302
+ ._news-row { margin-top: 1em; }
303303
}
304304

305305
._news-title {
306306
display: block;
307307
font-size: .875rem;
308-
color: $textColor;
308+
color: var(--textColor);
309309
}
310310

311311
._news-date {
@@ -372,12 +372,12 @@
372372
// Utilities
373373
//
374374

375-
._bold { font-weight: $boldFontWeight; }
375+
._bold { font-weight: var(--boldFontWeight); }
376376
._note { @extend %note; }
377377
._note-green { @extend %note-green; }
378378
._label { @extend %label; }
379379
._code { @extend %code; }
380-
._highlight { background: $highlightBackground !important; }
380+
._highlight { background: var(--highlightBackground) !important; }
381381

382382
._table { width: 100%; }
383383
._mobile ._table { overflow-x: auto; }
@@ -396,12 +396,9 @@
396396
pre:hover > & { display: block; }
397397
&:hover { opacity: 1; }
398398

399-
> svg { @extend %svg-icon; }
400-
401-
@if $style == 'dark' {
402-
> svg { fill: white; }
403-
} @else {
404-
> svg { fill: black; }
399+
> svg {
400+
@extend %svg-icon;
401+
fill: var(--absolute);
405402
}
406403

407404
&._pre-clip-success > svg,
@@ -419,15 +416,13 @@
419416
line-height: normal;
420417
white-space: nowrap;
421418
padding: .375rem .675rem;
422-
background-image: linear-gradient(lighten($boxBackground, 4%), darken($boxBackground, 2%));
423-
border: 1px solid $boxBorder;
419+
background-color: var(--boxBackground);
420+
border: 1px solid var(--boxBorder);
424421
border-radius: 3px;
425-
box-shadow: 0 1px rgba($boxBorder, .08);
426422
cursor: pointer;
427423

428424
&:active {
429-
background-color: $boxBackground;
430-
box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px $boxBorder;
425+
box-shadow: inset 0 1px 1px rgba(black, .05), inset 0 1px 4px var(--boxBorder);
431426
}
432427
}
433428

@@ -447,18 +442,18 @@
447442

448443
._btn-link {
449444
line-height: inherit;
450-
color: $linkColor;
451-
text-decoration: $linkTextDecoration;
445+
color: var(--linkColor);
446+
text-decoration: var(--linkTextDecoration);
452447

453448
&:hover {
454-
color: $linkColorHover;
449+
color: var(--linkColorHover);
455450
text-decoration: underline;
456451
}
457452
}
458453

459454
._reset-btn,
460455
._reset-btn:hover {
461-
color: $textColorRed;
456+
color: var(--textColorRed);
462457
}
463458

464459
._github-btn {

‎assets/stylesheets/components/_fail.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
._fail-title {
2424
margin: 0 0 1rem;
2525
font-size: 1rem;
26-
font-weight: $boldFontWeight;
26+
font-weight: var(--boldFontWeight);
2727
}
2828

2929
._fail-text, ._fail-list {

0 commit comments

Comments
 (0)