Update inputs, tabs, pickers, autocomplete

styles/src/styleTree/app.ts

@@ -36,7 +36,7 @@ export default function app(theme: Theme): Object {
     contactsPanel: contactsPanel(theme),
     search: search(theme),
     breadcrumbs: {
-      ...text(theme, "sans", "primary"),
+      ...text(theme, "sans", "secondary"),
       padding: {
         left: 6,
       },

styles/src/styleTree/commandPalette.ts

@@ -1,20 +1,23 @@
 import Theme from "../themes/theme";
-import { text, backgroundColor, border } from "./components";
+import { colors } from "../tokens";
+import { text, backgroundColor, border, borderColor } from "./components";
 
 export default function commandPalette(theme: Theme) {
   return {
     keystrokeSpacing: 8,
     key: {
-      text: text(theme, "mono", "primary", { size: "xs" }),
-      cornerRadius: 3,
-      background: backgroundColor(theme, "info", "base"),
-      border: border(theme, "info"),
+      text: text(theme, "mono", "active", { size: "xs" }),
+      cornerRadius: 4,
+      background: backgroundColor(theme, "on300"),
+      border: border(theme, "secondary"),
       padding: {
-        left: 3,
-        right: 3,
+        top: 3,
+        bottom: 3,
+        left: 8,
+        right: 8,
       },
       margin: {
-        left: 3
+        left: 2
       },
     }
   }

styles/src/styleTree/editor.ts

@@ -67,8 +67,8 @@ export default function editor(theme: Theme) {
     ],
     autocomplete: {
       background: backgroundColor(theme, 500),
-      cornerRadius: 6,
-      padding: 6,
+      cornerRadius: 8,
+      padding: 4,
       border: border(theme, "secondary"),
       item: autocompleteItem,
       hoveredItem: {

styles/src/styleTree/search.ts

@@ -4,57 +4,62 @@ import { backgroundColor, border, player, text } from "./components";
 export default function search(theme: Theme) {
   const optionButton = {
     ...text(theme, "mono", "secondary"),
-    background: backgroundColor(theme, 300),
-    cornerRadius: 6,
-    border: border(theme, "primary"),
+    background: backgroundColor(theme, "on500"),
+    cornerRadius: 4,
+    border: border(theme, "secondary"),
     margin: {
-      left: 1,
-      right: 1,
+      left: 2,
+      right: 2,
     },
     padding: {
-      bottom: 1,
-      left: 6,
-      right: 6,
-      top: 1,
+      bottom: 3,
+      left: 8,
+      right: 8,
+      top: 3,
     },
   };
 
   const editor = {
     background: backgroundColor(theme, 500),
-    cornerRadius: 6,
+    cornerRadius: 8,
     minWidth: 200,
     maxWidth: 500,
     placeholderText: text(theme, "mono", "placeholder"),
     selection: player(theme, 1).selection,
-    text: text(theme, "mono", "primary"),
+    text: text(theme, "mono", "active"),
     border: border(theme, "secondary"),
     margin: {
-      right: 5,
+      right: 6,
     },
     padding: {
       top: 3,
       bottom: 3,
-      left: 14,
-      right: 14,
+      left: 12,
+      right: 8,
     },
   };
 
   return {
     matchBackground: theme.editor.highlight.match.value,
-    tabIconSpacing: 4,
+    tabIconSpacing: 8,
     tabIconWidth: 14,
     activeHoveredOptionButton: {
       ...optionButton,
-      background: backgroundColor(theme, 100),
+      ...text(theme, "mono", "active"),
+      background: backgroundColor(theme, "on500", "active"),
+      border: border(theme, "muted"),
     },
     activeOptionButton: {
       ...optionButton,
-      background: backgroundColor(theme, 100),
+      ...text(theme, "mono", "active"),
+      background: backgroundColor(theme, "on500", "active"),
+      border: border(theme, "muted"),
     },
     editor,
     hoveredOptionButton: {
       ...optionButton,
-      background: backgroundColor(theme, 100),
+      ...text(theme, "mono", "active"),
+      border: border(theme, "muted"),
     },
     invalidEditor: {
       ...editor,
@@ -67,8 +72,8 @@ export default function search(theme: Theme) {
     optionButton,
     optionButtonGroup: {
       padding: {
-        left: 2,
-        right: 2,
+        left: 4,
+        right: 4,
       },
     },
     resultsStatus: {

styles/src/styleTree/selectorModal.ts

@@ -5,11 +5,11 @@ export default function selectorModal(theme: Theme): Object {
   const item = {
     padding: {
       bottom: 4,
-      left: 16,
-      right: 16,
+      left: 12,
+      right: 12,
       top: 4,
     },
-    cornerRadius: 6,
+    cornerRadius: 8,
     text: text(theme, "sans", "secondary"),
     highlightText: text(theme, "sans", "feature", { weight: "bold" }),
   };
@@ -22,7 +22,7 @@ export default function selectorModal(theme: Theme): Object {
 
   return {
     background: backgroundColor(theme, 300),
-    cornerRadius: 6,
+    cornerRadius: 8,
     padding: 8,
     item,
     activeItem,
@@ -31,14 +31,14 @@ export default function selectorModal(theme: Theme): Object {
       text: text(theme, "sans", "placeholder"),
       padding: {
         bottom: 4,
-        left: 16,
-        right: 16,
+        left: 12,
+        right: 12,
         top: 8,
       },
     },
     inputEditor: {
       background: backgroundColor(theme, 500),
-      cornerRadius: 6,
+      cornerRadius: 8,
       placeholderText: text(theme, "sans", "placeholder"),
       selection: player(theme, 1).selection,
       text: text(theme, "mono", "primary"),

styles/src/styleTree/workspace.ts

@@ -4,9 +4,15 @@ import { backgroundColor, border, iconColor, text } from "./components";
 export default function workspace(theme: Theme) {
   const signInPrompt = {
     ...text(theme, "sans", "secondary", { size: "xs" }),
-    underline: true,
+    border: border(theme, "primary"),
+    cornerRadius: 6,
+    margin: {
+      top: 1,
+      right: 6,
+    },
     padding: {
-      right: 8,
+      left: 6,
+      right: 6,
     },
   };
 
@@ -18,23 +24,23 @@ export default function workspace(theme: Theme) {
     iconConflict: iconColor(theme, "warning"),
     iconDirty: iconColor(theme, "info"),
     iconWidth: 8,
-    spacing: 10,
-    text: text(theme, "mono", "secondary", { size: "sm" }),
+    spacing: 8,
+    text: text(theme, "sans", "secondary", { size: "sm" }),
     border: border(theme, "primary", {
       left: true,
       bottom: true,
       overlay: true,
     }),
     padding: {
-      left: 12,
-      right: 12,
+      left: 8,
+      right: 8,
     },
   };
 
   const activeTab = {
     ...tab,
     background: backgroundColor(theme, 500),
-    text: text(theme, "mono", "active", { size: "sm" }),
+    text: text(theme, "sans", "active", { size: "sm" }),
     border: {
       ...tab.border,
       bottom: false,