Improve details group colors.

Author: gskinner

dev/sass/colors.scss

@@ -33,10 +33,13 @@ $title-bg: $doc-light;
 $tooltip-bg: rgba($doc-black,0.9);
 $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);
 
+$details-group-alpha: 0.5;
+
 // notice colors:
 $error-color: #D22;
 $warning-color: $error-color;

dev/sass/colors_dark.scss

@@ -25,6 +25,9 @@ $title-bg: $doc-light;
 $tooltip-bg: rgba($doc-black,0.9);
 $selected-stroke-color: rgba($doc-black, 0.4);
 $match-color: rgba($theme-color, 0.6);
+
+$details-group-alpha: 0.33;
+
 // shadows inherited
 
 // notice colors:
@@ -33,4 +36,4 @@ $match-color: rgba($theme-color, 0.6);
 // inherited
 
 // invisible char color:
-// inherited
+// inherited

dev/sass/views/tools/details.scss

@@ -64,13 +64,12 @@
 		@extend %selected-token;
 	}
 
-	$details-group-color: hsla(-20, 80, 70, 1);
-	$details-hue-adj: 60;
-	.group-0 { background: adjust-color($details-group-color, $hue: $details-hue-adj*0); }
-	.group-1 { background: adjust-color($details-group-color, $hue: $details-hue-adj*1); }
-	.group-2 { background: adjust-color($details-group-color, $hue: $details-hue-adj*2); }
-	.group-3 { background: adjust-color($details-group-color, $hue: $details-hue-adj*3); }
-	.group-4 { background: adjust-color($details-group-color, $hue: $details-hue-adj*4); }
-	.group-5 { background: adjust-color($details-group-color, $hue: $details-hue-adj*5); }
+	.group-1 { background: hsla(60, 100, 50, $details-group-alpha); }
+	.group-2 { background: hsla(120, 100, 50, $details-group-alpha); }
+	.group-3 { background: hsla(230, 100, 70, $details-group-alpha); }
+	.group-4 { background: hsla(280, 100, 60, $details-group-alpha); }
+	.group-5 { background: hsla(-10, 100, 60, $details-group-alpha); }
+	.group-0 { background: hsla(30, 100, 50, $details-group-alpha); }
+	.group-0, .group-1, .group-2, .group-3, .group-4, .group-5 { outline: 0.5px solid rgba($doc-black, 0.25); }
 
 }