Fix color ramps to use colored fg

Nate Butler created 3 years ago

Change summary

styles/src/styleTree/editor.ts    |  3 +--
styles/src/themes/common/ramps.ts | 24 ++++++++++++------------
2 files changed, 13 insertions(+), 14 deletions(-)

Detailed changes

styles/src/styleTree/editor.ts

@@ -4,7 +4,6 @@ import {
   Layer,
   StyleSets,
 } from "../themes/common/colorScheme";
-import { withOpacity } from "../utils/color";
 import {
   background,
   border,
@@ -227,7 +226,7 @@ export default function editor(colorScheme: ColorScheme) {
     errorDiagnostic: diagnostic(elevation.middle, "negative"),
     warningDiagnostic: diagnostic(elevation.middle, "warning"),
     informationDiagnostic: diagnostic(elevation.middle, "info"),
-    hintDiagnostic: diagnostic(elevation.middle, "positive"),
+    hintDiagnostic: diagnostic(elevation.middle, "warning"),
     invalidErrorDiagnostic: diagnostic(elevation.middle, "base"),
     invalidHintDiagnostic: diagnostic(elevation.middle, "base"),
     invalidInformationDiagnostic: diagnostic(elevation.middle, "base"),

styles/src/themes/common/ramps.ts

@@ -224,10 +224,10 @@ function bottomLayer(ramps: RampSet, isLight: boolean): Layer {
     base: buildStyleSet(ramps.neutral, buildLayer(0.2, 1, 0.08)),
     variant: buildStyleSet(ramps.neutral, buildLayer(0.2, 0.7, 0.08)),
     on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
   };
 }
 
@@ -236,10 +236,10 @@ function middleLayer(ramps: RampSet, isLight: boolean): Layer {
     base: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
     variant: buildStyleSet(ramps.neutral, buildLayer(0.1, 0.7, 0.08)),
     on: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
   };
 }
 
@@ -248,9 +248,9 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
     base: buildStyleSet(ramps.neutral, buildLayer(0, 1, 0.08)),
     variant: buildStyleSet(ramps.neutral, buildLayer(0, 0.7, 0.08)),
     on: buildStyleSet(ramps.neutral, buildLayer(0.1, 1, 0.08)),
-    info: buildStyleSet(ramps.blue, buildLayer(0.1, 1, 0.08)),
-    positive: buildStyleSet(ramps.green, buildLayer(0.1, 1, 0.08)),
-    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 1, 0.08)),
-    negative: buildStyleSet(ramps.red, buildLayer(0.1, 1, 0.08)),
+    info: buildStyleSet(ramps.blue, buildLayer(0.1, 0.5, 0.08)),
+    positive: buildStyleSet(ramps.green, buildLayer(0.1, 0.5, 0.08)),
+    warning: buildStyleSet(ramps.yellow, buildLayer(0.1, 0.5, 0.08)),
+    negative: buildStyleSet(ramps.red, buildLayer(0.1, 0.5, 0.08)),
   };
 }