Update palettes

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,
   };