Merge branch 'darkmode'

dev/sass/codemirror.scss

@@ -9,6 +9,7 @@
 
 	div.CodeMirror-cursor {
 		pointer-events: none; /* this doesn't work in IE<11 */
+		border-left: 1px solid $doc-black;
 	}
 }
 

dev/sass/colors.scss

@@ -1,5 +1,5 @@
 // base colors:
-$theme-color: #80C0F0; /* #66CCFF */
+$theme-color: #70B0E0; /* #66CCFF */
 $base-color: mix(#808080, $theme-color, 85);
 
 // core colors:
@@ -30,18 +30,24 @@ $doc-light: mix($doc-white, $base-color, 50%);
 
 // control colors:
 $title-bg: $doc-light;
-$tooltip-bg: rgba($doc-black,0.9);
-$selected-stroke-color: rgba($black, 0.4);
-$match-color: rgba($theme-color, 0.6);
+$tooltip-bg: rgba($doc-black,0.85);
+$selected-stroke-color: rgba($doc-black, 0.3);
+$match-color: rgba($theme-color, 0.5);
+
 $dark-shadow: rgba(0,0,0, 0.25);
 $light-shadow: rgba(0,0,0, 0.1);
 $strong-shadow: rgba(0,0,0, 0.45);
 
-// syntax coloring:
-$error-color: #C22;
+$details-group-alpha: 0.5;
+
+// notice colors:
+$error-color: #D22;
 $warning-color: $error-color;
+$fail-color: $error-color;
+$pass-color: #0A0;
 
-$group-color: #090;
+// syntax colors:
+$group-color: #0A0;
 $groupbg-color: #0E0;
 $alt-color: $group-color;
 

dev/sass/colors_dark.scss

@@ -1,59 +1,39 @@
+@import "colors";
+
 // base colors:
-$theme-color: darken(#80C0F0, 15);
-$base-color: mix(#808080, adjust-hue($theme-color, 20), 85);
+$theme-color: desaturate(darken($theme-color, 18), 20);
+$base-color: mix(#808080, darken($theme-color, 20), 90);
 
 // core colors:
-$black: darken($base-color, 44%);
-$darkest: mix($black, $base-color, 80%);
-$darker: mix($black, $base-color, 64%);
-$dark: mix($black, $base-color, 35%);
-
-$mid: $base-color;
-
-$white: lighten($base-color, 45%);
-$lightest: mix($white, $base-color, 92%);
-$lighter: mix($white, $base-color, 78%);
-$light: mix($white, $base-color, 50%);
+// inherited
 
 // doc colors:
-$doc-black: $white;
+$doc-black: $lighter;
 $doc-darkest: mix($doc-black, $base-color, 90%);
 $doc-darker: mix($doc-black, $base-color, 72%);
 $doc-dark: mix($doc-black, $base-color, 50%);
 
-$doc-mid: $base-color;
+$doc-mid: $mid;
 
-$doc-white: $darkest;
+$doc-white: mix($black, $darkest, 30%);
 $doc-lightest: mix($doc-white, $base-color, 92%);
-$doc-lighter: mix($doc-white, $base-color, 78%);
-$doc-light: mix($doc-white, $base-color, 50%);
+$doc-lighter: mix($doc-white, $base-color, 80%);
+$doc-light: mix($doc-white, $base-color, 60%);
 
 // control colors:
 $title-bg: $doc-light;
-$tooltip-bg: rgba($doc-black,0.9);
-$selected-stroke-color: rgba($black, 0.4);
+$tooltip-bg: rgba($doc-black, 0.85);
+$selected-stroke-color: rgba($doc-black, 0.4);
 $match-color: rgba($theme-color, 0.6);
-$dark-shadow: rgba(0,0,0, 0.35);
-$light-shadow: rgba(0,0,0, 0.15);
-$strong-shadow: rgba(0,0,0, 0.55);
+
+$details-group-alpha: 0.33;
+
+// shadows inherited
+
+// notice colors:
 
 // syntax coloring:
-$group-color: #090;
-$groupbg-color: #0E0;
-$set-color: #D70;
-$setbg-color: #FE0;
-$error-color: #C24;
-$anchor-color: #840;
-$quant-color: #58F;
-$alt-color: $group-color;
-$esc-color: #C0C;
-$special-color: $esc-color;
+// inherited
 
 // invisible char color:
-// this isn't bound to the theme color, because it's used in the tab bitmap:
-$invischar-color: rgba(127,127,127,0.5);
-
-// this shares the colors with js:
-#library > #colors {
-	.theme { color: $theme-color; }
-}
+// inherited

dev/sass/colors_light.scss

@@ -1,5 +1,8 @@
+@import "colors";
+
 // base colors:
-$theme-color: darken(#80C0F0, 8);
+// inherit theme-color
+$theme-color: darken($theme-color, 6);
 $base-color: mix(#808080, invert($theme-color), 95);
 
 // core colors:
@@ -31,29 +34,14 @@ $doc-light: mix($doc-white, $base-color, 50%);
 // control colors:
 $title-bg: $doc-light;
 $tooltip-bg: rgba($doc-black,0.9);
-$selected-stroke-color: rgba($black, 0.4);
-$match-color: rgba($theme-color, 0.6);
+$selected-stroke-color: rgba($doc-black, 0.4);
+$match-color: rgba($theme-color, 0.45);
 $dark-shadow: rgba(0,0,0, 0.25);
 $light-shadow: rgba(0,0,0, 0.1);
 $strong-shadow: rgba(0,0,0, 0.35);
 
 // syntax coloring:
-$group-color: #090;
-$groupbg-color: #0E0;
-$set-color: #D70;
-$setbg-color: #FE0;
-$error-color: #C24;
-$anchor-color: #840;
-$quant-color: #58F;
-$alt-color: $group-color;
-$esc-color: #C0C;
-$special-color: $esc-color;
+// inherited
 
 // invisible char color:
-// this isn't bound to the theme color, because it's used in the tab bitmap:
-$invischar-color: rgba(127,127,127,0.5);
-
-// this shares the colors with js:
-#library > #colors {
-	.theme { color: $theme-color; }
-}
+// inherited

dev/sass/controls.scss

@@ -1,26 +1,16 @@
 %control {
-	background: rgba($doc-white, 0.25);
 	padding: 0.375rem 0.75rem;
 	font-size: 0.875rem;
 	border-radius: $control-radius;
 }
 
-.controlbar {
-	display: flex;
-	padding: 0;
-	margin: 0; // Firefox injects a 16px margin for some reason without this.
-
-	> * {
-		margin-left: $pad*0.25;
-	}
-}
-
 input, textarea {
 	@extend %control;
+
 	border-radius: 0;
-	background: rgba($white, 0.05);
+	background: rgba($white, $input-opacity);
 	border: none;
-	border-bottom: solid 1px rgba($white, 0.05);
+	border-bottom: solid 1px rgba($white, $input-opacity);
 	font-family: $font-family;
 	font-size: 1rem;
 	display: block;
@@ -77,11 +67,14 @@ svg.icon {
 
 .control {
 	@extend %control;
+
+	background: rgba($white, $control-opacity);
 }
 
-.button {
+.button, .buttonbar > *, .segcontrol > * {
 	@extend %control;
 
+	background: rgba($white, $button-opacity);
 	display: inline-block;
 	cursor: pointer;
 	transition: background-color $transition-t ease-out;
@@ -95,12 +88,12 @@ svg.icon {
 		color: $black;
 
 		&:hover {
-			background: $doc-white;
+			background: $white;
 		}
 	}
 
 	&:hover, &.selected {
-		background: rgba($doc-white, 0.75);
+		background: rgba($white, $button-hover-opacity);
 
 		> svg.icon.dropdown {
 			margin-top: 0.5em;
@@ -114,7 +107,9 @@ svg.icon {
 	}
 
 	> svg.icon {
-		margin-right: 0.25em;
+		& + * {
+			margin-left: 0.25em;
+		}
 		margin-top: -0.125em;
 
 		&.dropdown {
@@ -126,25 +121,44 @@ svg.icon {
 	}
 }
 
-.segcontrol {
-	@extend .controlbar;
-	 > * {
-		@extend .button;
-		margin-left: 1px;
-		border-radius: 0;
-		display: inline-block;
-
-		 &:first-child {
-			border-radius: $control-radius 0 0 $control-radius;
-		}
-
-		&:last-child {
-			border-radius: 0 $control-radius $control-radius 0;
-		}
+.controlbar, .buttonbar, .segcontrol {
+	display: flex;
+	padding: 0;
+	margin: 0; // Firefox injects a 16px margin for some reason without this.
+
+	> * {
+		margin-left: $pad*0.25;
+	}
+}
+
+.buttonbar, .segcontrol {
+	> * {
+	   margin-left: 1px;
+	   border-radius: 0;
+	   display: inline-block;
+
+		&:first-child {
+		   border-radius: $control-radius 0 0 $control-radius;
+	   }
+
+	   &:last-child {
+		   border-radius: 0 $control-radius $control-radius 0;
+	   }
+   }
+}
+
+.segcontrol > * {
+	&:first-child {
+		border-radius: $control-radius 0 0 $control-radius;
+	}
+
+	&:last-child {
+		border-radius: 0 $control-radius $control-radius 0;
 	}
 }
 
 
+
 .tooltip {
 	display: flex;
 	flex-flow: column;
@@ -165,6 +179,7 @@ svg.icon {
 		max-width: 15rem;
 		box-shadow: 0px 3px 4px $dark-shadow;
 		overflow-wrap: break-word;
+		backdrop-filter: blur(3px);
 
 		code {
 			font-weight: bold;

dev/sass/mobile.scss

@@ -16,7 +16,7 @@
 		> .container > .app {
 			display: block;
 			position:relative;
-			background: $lightest;
+			background: $doc-lightest;
 
 
 			> .doc {
@@ -31,7 +31,7 @@
 					width: 100%;
 					height: 100%;
 					position: fixed;
-					background: rgba($lighter, 0.5);
+					background: rgba($doc-lighter, 0.5);
 					z-index: 10;
 				}
 

dev/sass/regexr.scss

@@ -1,4 +1,4 @@
-@import "colors";
+@import "colors"; // colors_dark
 @import "variables";
 @import "fonts";