Update palettes

Nate Butler created 3 years ago

Change summary

styles/src/styleTree/commandPalette.ts | 23 +++++++++++++----------
styles/src/styleTree/picker.ts         | 28 ++++++++++++++++------------
styles/src/themes/common/ramps.ts      |  8 ++++----
3 files changed, 33 insertions(+), 26 deletions(-)

Detailed changes

styles/src/styleTree/commandPalette.ts

@@ -1,26 +1,29 @@
 import { ColorScheme } from "../themes/common/colorScheme";
-import { text, border, background } from "./components";
+import { withOpacity } from "../utils/color";
+import { text, background } from "./components";
 
 export default function commandPalette(colorScheme: ColorScheme) {
   let layer = colorScheme.highest.top;
   return {
     keystrokeSpacing: 8,
     key: {
-      text: text(layer, "mono", { size: "xs" }),
-      cornerRadius: 4,
-      background: background(layer, "on"),
+      text: text(layer, "mono", "on", "default", { size: "xs" }),
+      cornerRadius: 2,
+      background: withOpacity(background(layer, "on"), 0.5),
       padding: {
-        top: 2,
-        bottom: 2,
-        left: 8,
-        right: 8,
+        top: 1,
+        bottom: 1,
+        left: 6,
+        right: 6,
       },
       margin: {
+        top: 1,
+        bottom: 1,
         left: 2,
       },
       active: {
-        text: text(layer, "mono", { size: "xs" }),
-        background: background(layer),
+        text: text(layer, "mono", "on", "active", { size: "xs" }),
+        background: withOpacity(background(layer, "on"), 0.2),
       },
     },
   };

styles/src/styleTree/picker.ts

@@ -10,8 +10,7 @@ export default function picker(colorScheme: ColorScheme) {
   let layer = elevation.top;
   return {
     background: background(layer),
-    cornerRadius: 8,
-    padding: 8,
+    cornerRadius: 12,
     item: {
       padding: {
         bottom: 4,
@@ -19,8 +18,12 @@ export default function picker(colorScheme: ColorScheme) {
         right: 12,
         top: 4,
       },
-      cornerRadius: 8,
-      text: text(layer, "sans"),
+      margin: {
+        left: 4,
+        right: 4
+      },
+      cornerRadius: 6,
+      text: text(layer, "sans", "variant"),
       highlightText: text(layer, "sans", "info", { weight: "bold" }),
       active: {
         background: background(layer, "active"),
@@ -35,25 +38,26 @@ export default function picker(colorScheme: ColorScheme) {
     empty: {
       text: text(layer, "sans", "variant"),
       padding: {
-        bottom: 4,
-        left: 12,
-        right: 12,
+        bottom: 8,
+        left: 16,
+        right: 16,
         top: 8,
       },
     },
     inputEditor: {
-      background: background(layer, "on"),
-      cornerRadius: 8,
       placeholderText: text(layer, "sans", "on", "disabled"),
       selection: colorScheme.players[0],
       text: text(layer, "mono", "on"),
-      border: border(layer, "on"),
+      border: border(layer, { bottom: true }),
       padding: {
-        bottom: 7,
+        bottom: 8,
         left: 16,
         right: 16,
-        top: 7,
+        top: 8,
       },
+      margin: {
+        bottom: 4
+      }
     },
     shadow: elevation.shadow,
   };

styles/src/themes/common/ramps.ts

@@ -57,7 +57,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
   let middle = elevation(
     resampleSet(
       baseSet,
-      evenSamples(0.125, 1)
+      evenSamples(0.08, 1)
     ),
     isLight,
     {
@@ -71,7 +71,7 @@ export function createColorScheme(name: string, isLight: boolean, colorRamps: {
   let highest = elevation(
     resampleSet(
       baseSet,
-      evenSamples(0.25, 1)
+      evenSamples(0.16, 1)
     ),
     isLight,
     {
@@ -634,10 +634,10 @@ function topLayer(ramps: RampSet, isLight: boolean): Layer {
       disabled: 0.1,
     },
     foreground: {
-      default: 0.9,
+      default: 0.6,
       hovered: 0.9,
       pressed: 0.9,
-      active: 0.5,
+      active: 0.3,
       disabled: 0.2,
     },
   });