Skip to content

Commit f7bb3e3

Browse files
gskinnergskinner
committed
Merge branch 'darkmode'
2 parents 4268b90 + 50c7f68 commit f7bb3e3

31 files changed

+1761
-1394
lines changed

‎assets/themes/dark.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dev/icons/moon.svg

+9
Loading

‎dev/inject/icons.svg

+1-1
Loading

‎dev/sass/codemirror.scss

+1
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
div.CodeMirror-cursor {
1111
pointer-events: none; /* this doesn't work in IE<11 */
12+
border-left: 1px solid $doc-black;
1213
}
1314
}
1415

‎dev/sass/colors.scss

+13-7
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// base colors:
2-
$theme-color: #80C0F0; /* #66CCFF */
2+
$theme-color: #70B0E0; /* #66CCFF */
33
$base-color: mix(#808080, $theme-color, 85);
44

55
// core colors:
@@ -30,18 +30,24 @@ $doc-light: mix($doc-white, $base-color, 50%);
3030

3131
// control colors:
3232
$title-bg: $doc-light;
33-
$tooltip-bg: rgba($doc-black,0.9);
34-
$selected-stroke-color: rgba($black, 0.4);
35-
$match-color: rgba($theme-color, 0.6);
33+
$tooltip-bg: rgba($doc-black,0.85);
34+
$selected-stroke-color: rgba($doc-black, 0.3);
35+
$match-color: rgba($theme-color, 0.5);
36+
3637
$dark-shadow: rgba(0,0,0, 0.25);
3738
$light-shadow: rgba(0,0,0, 0.1);
3839
$strong-shadow: rgba(0,0,0, 0.45);
3940

40-
// syntax coloring:
41-
$error-color: #C22;
41+
$details-group-alpha: 0.5;
42+
43+
// notice colors:
44+
$error-color: #D22;
4245
$warning-color: $error-color;
46+
$fail-color: $error-color;
47+
$pass-color: #0A0;
4348

44-
$group-color: #090;
49+
// syntax colors:
50+
$group-color: #0A0;
4551
$groupbg-color: #0E0;
4652
$alt-color: $group-color;
4753

‎dev/sass/colors_dark.scss

+20-40
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,39 @@
1+
@import "colors";
2+
13
// base colors:
2-
$theme-color: darken(#80C0F0, 15);
3-
$base-color: mix(#808080, adjust-hue($theme-color, 20), 85);
4+
$theme-color: desaturate(darken($theme-color, 18), 20);
5+
$base-color: mix(#808080, darken($theme-color, 20), 90);
46

57
// core colors:
6-
$black: darken($base-color, 44%);
7-
$darkest: mix($black, $base-color, 80%);
8-
$darker: mix($black, $base-color, 64%);
9-
$dark: mix($black, $base-color, 35%);
10-
11-
$mid: $base-color;
12-
13-
$white: lighten($base-color, 45%);
14-
$lightest: mix($white, $base-color, 92%);
15-
$lighter: mix($white, $base-color, 78%);
16-
$light: mix($white, $base-color, 50%);
8+
// inherited
179

1810
// doc colors:
19-
$doc-black: $white;
11+
$doc-black: $lighter;
2012
$doc-darkest: mix($doc-black, $base-color, 90%);
2113
$doc-darker: mix($doc-black, $base-color, 72%);
2214
$doc-dark: mix($doc-black, $base-color, 50%);
2315

24-
$doc-mid: $base-color;
16+
$doc-mid: $mid;
2517

26-
$doc-white: $darkest;
18+
$doc-white: mix($black, $darkest, 30%);
2719
$doc-lightest: mix($doc-white, $base-color, 92%);
28-
$doc-lighter: mix($doc-white, $base-color, 78%);
29-
$doc-light: mix($doc-white, $base-color, 50%);
20+
$doc-lighter: mix($doc-white, $base-color, 80%);
21+
$doc-light: mix($doc-white, $base-color, 60%);
3022

3123
// control colors:
3224
$title-bg: $doc-light;
33-
$tooltip-bg: rgba($doc-black,0.9);
34-
$selected-stroke-color: rgba($black, 0.4);
25+
$tooltip-bg: rgba($doc-black, 0.85);
26+
$selected-stroke-color: rgba($doc-black, 0.4);
3527
$match-color: rgba($theme-color, 0.6);
36-
$dark-shadow: rgba(0,0,0, 0.35);
37-
$light-shadow: rgba(0,0,0, 0.15);
38-
$strong-shadow: rgba(0,0,0, 0.55);
28+
29+
$details-group-alpha: 0.33;
30+
31+
// shadows inherited
32+
33+
// notice colors:
3934

4035
// syntax coloring:
41-
$group-color: #090;
42-
$groupbg-color: #0E0;
43-
$set-color: #D70;
44-
$setbg-color: #FE0;
45-
$error-color: #C24;
46-
$anchor-color: #840;
47-
$quant-color: #58F;
48-
$alt-color: $group-color;
49-
$esc-color: #C0C;
50-
$special-color: $esc-color;
36+
// inherited
5137

5238
// invisible char color:
53-
// this isn't bound to the theme color, because it's used in the tab bitmap:
54-
$invischar-color: rgba(127,127,127,0.5);
55-
56-
// this shares the colors with js:
57-
#library > #colors {
58-
.theme { color: $theme-color; }
59-
}
39+
// inherited

‎dev/sass/colors_light.scss

+8-20
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
1+
@import "colors";
2+
13
// base colors:
2-
$theme-color: darken(#80C0F0, 8);
4+
// inherit theme-color
5+
$theme-color: darken($theme-color, 6);
36
$base-color: mix(#808080, invert($theme-color), 95);
47

58
// core colors:
@@ -31,29 +34,14 @@ $doc-light: mix($doc-white, $base-color, 50%);
3134
// control colors:
3235
$title-bg: $doc-light;
3336
$tooltip-bg: rgba($doc-black,0.9);
34-
$selected-stroke-color: rgba($black, 0.4);
35-
$match-color: rgba($theme-color, 0.6);
37+
$selected-stroke-color: rgba($doc-black, 0.4);
38+
$match-color: rgba($theme-color, 0.45);
3639
$dark-shadow: rgba(0,0,0, 0.25);
3740
$light-shadow: rgba(0,0,0, 0.1);
3841
$strong-shadow: rgba(0,0,0, 0.35);
3942

4043
// syntax coloring:
41-
$group-color: #090;
42-
$groupbg-color: #0E0;
43-
$set-color: #D70;
44-
$setbg-color: #FE0;
45-
$error-color: #C24;
46-
$anchor-color: #840;
47-
$quant-color: #58F;
48-
$alt-color: $group-color;
49-
$esc-color: #C0C;
50-
$special-color: $esc-color;
44+
// inherited
5145

5246
// invisible char color:
53-
// this isn't bound to the theme color, because it's used in the tab bitmap:
54-
$invischar-color: rgba(127,127,127,0.5);
55-
56-
// this shares the colors with js:
57-
#library > #colors {
58-
.theme { color: $theme-color; }
59-
}
47+
// inherited

‎dev/sass/controls.scss

+47-32
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,16 @@
11
%control {
2-
background: rgba($doc-white, 0.25);
32
padding: 0.375rem 0.75rem;
43
font-size: 0.875rem;
54
border-radius: $control-radius;
65
}
76

8-
.controlbar {
9-
display: flex;
10-
padding: 0;
11-
margin: 0; // Firefox injects a 16px margin for some reason without this.
12-
13-
> * {
14-
margin-left: $pad*0.25;
15-
}
16-
}
17-
187
input, textarea {
198
@extend %control;
9+
2010
border-radius: 0;
21-
background: rgba($white, 0.05);
11+
background: rgba($white, $input-opacity);
2212
border: none;
23-
border-bottom: solid 1px rgba($white, 0.05);
13+
border-bottom: solid 1px rgba($white, $input-opacity);
2414
font-family: $font-family;
2515
font-size: 1rem;
2616
display: block;
@@ -77,11 +67,14 @@ svg.icon {
7767

7868
.control {
7969
@extend %control;
70+
71+
background: rgba($white, $control-opacity);
8072
}
8173

82-
.button {
74+
.button, .buttonbar > *, .segcontrol > * {
8375
@extend %control;
8476

77+
background: rgba($white, $button-opacity);
8578
display: inline-block;
8679
cursor: pointer;
8780
transition: background-color $transition-t ease-out;
@@ -95,12 +88,12 @@ svg.icon {
9588
color: $black;
9689

9790
&:hover {
98-
background: $doc-white;
91+
background: $white;
9992
}
10093
}
10194

10295
&:hover, &.selected {
103-
background: rgba($doc-white, 0.75);
96+
background: rgba($white, $button-hover-opacity);
10497

10598
> svg.icon.dropdown {
10699
margin-top: 0.5em;
@@ -114,7 +107,9 @@ svg.icon {
114107
}
115108

116109
> svg.icon {
117-
margin-right: 0.25em;
110+
& + * {
111+
margin-left: 0.25em;
112+
}
118113
margin-top: -0.125em;
119114

120115
&.dropdown {
@@ -126,25 +121,44 @@ svg.icon {
126121
}
127122
}
128123

129-
.segcontrol {
130-
@extend .controlbar;
131-
> * {
132-
@extend .button;
133-
margin-left: 1px;
134-
border-radius: 0;
135-
display: inline-block;
136-
137-
&:first-child {
138-
border-radius: $control-radius 0 0 $control-radius;
139-
}
140-
141-
&:last-child {
142-
border-radius: 0 $control-radius $control-radius 0;
143-
}
124+
.controlbar, .buttonbar, .segcontrol {
125+
display: flex;
126+
padding: 0;
127+
margin: 0; // Firefox injects a 16px margin for some reason without this.
128+
129+
> * {
130+
margin-left: $pad*0.25;
131+
}
132+
}
133+
134+
.buttonbar, .segcontrol {
135+
> * {
136+
margin-left: 1px;
137+
border-radius: 0;
138+
display: inline-block;
139+
140+
&:first-child {
141+
border-radius: $control-radius 0 0 $control-radius;
142+
}
143+
144+
&:last-child {
145+
border-radius: 0 $control-radius $control-radius 0;
146+
}
147+
}
148+
}
149+
150+
.segcontrol > * {
151+
&:first-child {
152+
border-radius: $control-radius 0 0 $control-radius;
153+
}
154+
155+
&:last-child {
156+
border-radius: 0 $control-radius $control-radius 0;
144157
}
145158
}
146159

147160

161+
148162
.tooltip {
149163
display: flex;
150164
flex-flow: column;
@@ -165,6 +179,7 @@ svg.icon {
165179
max-width: 15rem;
166180
box-shadow: 0px 3px 4px $dark-shadow;
167181
overflow-wrap: break-word;
182+
backdrop-filter: blur(3px);
168183

169184
code {
170185
font-weight: bold;

‎dev/sass/mobile.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
> .container > .app {
1717
display: block;
1818
position:relative;
19-
background: $lightest;
19+
background: $doc-lightest;
2020

2121

2222
> .doc {
@@ -31,7 +31,7 @@
3131
width: 100%;
3232
height: 100%;
3333
position: fixed;
34-
background: rgba($lighter, 0.5);
34+
background: rgba($doc-lighter, 0.5);
3535
z-index: 10;
3636
}
3737

‎dev/sass/regexr.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "colors";
1+
@import "colors"; // colors_dark
22
@import "variables";
33
@import "fonts";
44

0 commit comments

Comments
 (0)