Update inputs, tabs, pickers, autocomplete

Nate Butler created 3 years ago

Change summary

assets/themes/dark.json                | 188 +++++++++++++++------------
assets/themes/light.json               | 188 +++++++++++++++------------
styles/src/styleTree/app.ts            |   2 
styles/src/styleTree/commandPalette.ts |  19 +-
styles/src/styleTree/editor.ts         |   4 
styles/src/styleTree/search.ts         |  45 +++--
styles/src/styleTree/selectorModal.ts  |  14 +-
styles/src/styleTree/workspace.ts      |  20 +-
styles/src/themes/dark.ts              |  12 +
styles/src/themes/light.ts             |  14 +
styles/src/themes/theme.ts             |   2 
11 files changed, 294 insertions(+), 214 deletions(-)

Detailed changes

assets/themes/dark.json

@@ -1,16 +1,16 @@
 {
   "selector": {
     "background": "#1c1c1c",
-    "corner_radius": 6,
+    "corner_radius": 8,
     "padding": 8,
     "item": {
       "padding": {
         "bottom": 4,
-        "left": 16,
-        "right": 16,
+        "left": 12,
+        "right": 12,
         "top": 4
       },
-      "corner_radius": 6,
+      "corner_radius": 8,
       "text": {
         "family": "Zed Sans",
         "color": "#9c9c9c",
@@ -26,11 +26,11 @@
     "active_item": {
       "padding": {
         "bottom": 4,
-        "left": 16,
-        "right": 16,
+        "left": 12,
+        "right": 12,
         "top": 4
       },
-      "corner_radius": 6,
+      "corner_radius": 8,
       "text": {
         "family": "Zed Sans",
         "color": "#f1f1f1",
@@ -56,14 +56,14 @@
       },
       "padding": {
         "bottom": 4,
-        "left": 16,
-        "right": 16,
+        "left": 12,
+        "right": 12,
         "top": 8
       }
     },
     "input_editor": {
       "background": "#000000",
-      "corner_radius": 6,
+      "corner_radius": 8,
       "placeholder_text": {
         "family": "Zed Sans",
         "color": "#474747",
@@ -114,9 +114,9 @@
       "icon_conflict": "#f6a724",
       "icon_dirty": "#135acd",
       "icon_width": 8,
-      "spacing": 10,
+      "spacing": 8,
       "text": {
-        "family": "Zed Mono",
+        "family": "Zed Sans",
         "color": "#9c9c9c",
         "size": 14
       },
@@ -128,8 +128,8 @@
         "overlay": true
       },
       "padding": {
-        "left": 12,
-        "right": 12
+        "left": 8,
+        "right": 8
       }
     },
     "active_tab": {
@@ -140,9 +140,9 @@
       "icon_conflict": "#f6a724",
       "icon_dirty": "#135acd",
       "icon_width": 8,
-      "spacing": 10,
+      "spacing": 8,
       "text": {
-        "family": "Zed Mono",
+        "family": "Zed Sans",
         "color": "#ffffff",
         "size": 14
       },
@@ -154,8 +154,8 @@
         "overlay": true
       },
       "padding": {
-        "left": 12,
-        "right": 12
+        "left": 8,
+        "right": 8
       }
     },
     "left_sidebar": {
@@ -272,18 +272,36 @@
         "family": "Zed Sans",
         "color": "#9c9c9c",
         "size": 12,
-        "underline": true,
+        "border": {
+          "color": "#070707",
+          "width": 1
+        },
+        "corner_radius": 6,
+        "margin": {
+          "top": 1,
+          "right": 6
+        },
         "padding": {
-          "right": 8
+          "left": 6,
+          "right": 6
         }
       },
       "hovered_sign_in_prompt": {
         "family": "Zed Sans",
         "color": "#ffffff",
         "size": 12,
-        "underline": true,
+        "border": {
+          "color": "#070707",
+          "width": 1
+        },
+        "corner_radius": 6,
+        "margin": {
+          "top": 1,
+          "right": 6
+        },
         "padding": {
-          "right": 8
+          "left": 6,
+          "right": 6
         }
       },
       "offline_icon": {
@@ -383,8 +401,8 @@
     ],
     "autocomplete": {
       "background": "#000000",
-      "corner_radius": 6,
-      "padding": 6,
+      "corner_radius": 8,
+      "padding": 4,
       "border": {
         "color": "#232323",
         "width": 1
@@ -713,21 +731,23 @@
     "key": {
       "text": {
         "family": "Zed Mono",
-        "color": "#f1f1f1",
+        "color": "#ffffff",
         "size": 12
       },
-      "corner_radius": 3,
-      "background": "#2472f2",
+      "corner_radius": 4,
+      "background": "#0e0e0e",
       "border": {
-        "color": "#2472f2",
+        "color": "#232323",
         "width": 1
       },
       "padding": {
-        "left": 3,
-        "right": 3
+        "top": 3,
+        "bottom": 3,
+        "left": 8,
+        "right": 8
       },
       "margin": {
-        "left": 3
+        "left": 2
       }
     }
   },
@@ -1127,53 +1147,53 @@
   },
   "search": {
     "match_background": "#3f15a380",
-    "tab_icon_spacing": 4,
+    "tab_icon_spacing": 8,
     "tab_icon_width": 14,
     "active_hovered_option_button": {
       "family": "Zed Mono",
-      "color": "#9c9c9c",
+      "color": "#ffffff",
       "size": 14,
-      "background": "#2b2b2b",
-      "corner_radius": 6,
+      "background": "#232323",
+      "corner_radius": 4,
       "border": {
-        "color": "#070707",
+        "color": "#404040",
         "width": 1
       },
       "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
       }
     },
     "active_option_button": {
       "family": "Zed Mono",
-      "color": "#9c9c9c",
+      "color": "#ffffff",
       "size": 14,
-      "background": "#2b2b2b",
-      "corner_radius": 6,
+      "background": "#232323",
+      "corner_radius": 4,
       "border": {
-        "color": "#070707",
+        "color": "#404040",
         "width": 1
       },
       "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
       }
     },
     "editor": {
       "background": "#000000",
-      "corner_radius": 6,
+      "corner_radius": 8,
       "min_width": 200,
       "max_width": 500,
       "placeholder_text": {
@@ -1187,7 +1207,7 @@
       },
       "text": {
         "family": "Zed Mono",
-        "color": "#f1f1f1",
+        "color": "#ffffff",
         "size": 14
       },
       "border": {
@@ -1195,39 +1215,39 @@
         "width": 1
       },
       "margin": {
-        "right": 5
+        "right": 6
       },
       "padding": {
         "top": 3,
         "bottom": 3,
-        "left": 14,
-        "right": 14
+        "left": 12,
+        "right": 8
       }
     },
     "hovered_option_button": {
       "family": "Zed Mono",
-      "color": "#9c9c9c",
+      "color": "#ffffff",
       "size": 14,
-      "background": "#2b2b2b",
-      "corner_radius": 6,
+      "background": "#0e0e0e",
+      "corner_radius": 4,
       "border": {
-        "color": "#070707",
+        "color": "#404040",
         "width": 1
       },
       "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
       }
     },
     "invalid_editor": {
       "background": "#000000",
-      "corner_radius": 6,
+      "corner_radius": 8,
       "min_width": 200,
       "max_width": 500,
       "placeholder_text": {
@@ -1241,7 +1261,7 @@
       },
       "text": {
         "family": "Zed Mono",
-        "color": "#f1f1f1",
+        "color": "#ffffff",
         "size": 14
       },
       "border": {
@@ -1249,13 +1269,13 @@
         "width": 1
       },
       "margin": {
-        "right": 5
+        "right": 6
       },
       "padding": {
         "top": 3,
         "bottom": 3,
-        "left": 14,
-        "right": 14
+        "left": 12,
+        "right": 8
       }
     },
     "match_index": {
@@ -1268,27 +1288,27 @@
       "family": "Zed Mono",
       "color": "#9c9c9c",
       "size": 14,
-      "background": "#1c1c1c",
-      "corner_radius": 6,
+      "background": "#0e0e0e",
+      "corner_radius": 4,
       "border": {
-        "color": "#070707",
+        "color": "#232323",
         "width": 1
       },
       "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
       }
     },
     "option_button_group": {
       "padding": {
-        "left": 2,
-        "right": 2
+        "left": 4,
+        "right": 4
       }
     },
     "results_status": {
@@ -1299,7 +1319,7 @@
   },
   "breadcrumbs": {
     "family": "Zed Sans",
-    "color": "#f1f1f1",
+    "color": "#9c9c9c",
     "size": 14,
     "padding": {
       "left": 6

assets/themes/light.json

@@ -1,16 +1,16 @@
 {
   "selector": {
     "background": "#f8f8f8",
-    "corner_radius": 6,
+    "corner_radius": 8,
     "padding": 8,
     "item": {
       "padding": {
         "bottom": 4,
-        "left": 16,
-        "right": 16,
+        "left": 12,
+        "right": 12,
         "top": 4
       },
-      "corner_radius": 6,
+      "corner_radius": 8,
       "text": {
         "family": "Zed Sans",
         "color": "#474747",
@@ -26,11 +26,11 @@
     "active_item": {
       "padding": {
         "bottom": 4,
-        "left": 16,
-        "right": 16,
+        "left": 12,
+        "right": 12,
         "top": 4
       },
-      "corner_radius": 6,
+      "corner_radius": 8,
       "text": {
         "family": "Zed Sans",
         "color": "#2b2b2b",
@@ -42,7 +42,7 @@
         "weight": "bold",
         "size": 14
       },
-      "background": "#dcdcdc"
+      "background": "#e3e3e3"
     },
     "border": {
       "color": "#d5d5d5",
@@ -56,14 +56,14 @@
       },
       "padding": {
         "bottom": 4,
-        "left": 16,
-        "right": 16,
+        "left": 12,
+        "right": 12,
         "top": 8
       }
     },
     "input_editor": {
       "background": "#ffffff",
-      "corner_radius": 6,
+      "corner_radius": 8,
       "placeholder_text": {
         "family": "Zed Sans",
         "color": "#808080",
@@ -114,9 +114,9 @@
       "icon_conflict": "#f7bf17",
       "icon_dirty": "#135acd",
       "icon_width": 8,
-      "spacing": 10,
+      "spacing": 8,
       "text": {
-        "family": "Zed Mono",
+        "family": "Zed Sans",
         "color": "#474747",
         "size": 14
       },
@@ -128,8 +128,8 @@
         "overlay": true
       },
       "padding": {
-        "left": 12,
-        "right": 12
+        "left": 8,
+        "right": 8
       }
     },
     "active_tab": {
@@ -140,9 +140,9 @@
       "icon_conflict": "#f7bf17",
       "icon_dirty": "#135acd",
       "icon_width": 8,
-      "spacing": 10,
+      "spacing": 8,
       "text": {
-        "family": "Zed Mono",
+        "family": "Zed Sans",
         "color": "#000000",
         "size": 14
       },
@@ -154,8 +154,8 @@
         "overlay": true
       },
       "padding": {
-        "left": 12,
-        "right": 12
+        "left": 8,
+        "right": 8
       }
     },
     "left_sidebar": {
@@ -272,18 +272,36 @@
         "family": "Zed Sans",
         "color": "#474747",
         "size": 12,
-        "underline": true,
+        "border": {
+          "color": "#d5d5d5",
+          "width": 1
+        },
+        "corner_radius": 6,
+        "margin": {
+          "top": 1,
+          "right": 6
+        },
         "padding": {
-          "right": 8
+          "left": 6,
+          "right": 6
         }
       },
       "hovered_sign_in_prompt": {
         "family": "Zed Sans",
         "color": "#000000",
         "size": 12,
-        "underline": true,
+        "border": {
+          "color": "#d5d5d5",
+          "width": 1
+        },
+        "corner_radius": 6,
+        "margin": {
+          "top": 1,
+          "right": 6
+        },
         "padding": {
-          "right": 8
+          "left": 6,
+          "right": 6
         }
       },
       "offline_icon": {
@@ -383,8 +401,8 @@
     ],
     "autocomplete": {
       "background": "#ffffff",
-      "corner_radius": 6,
-      "padding": 6,
+      "corner_radius": 8,
+      "padding": 4,
       "border": {
         "color": "#d5d5d5",
         "width": 1
@@ -713,21 +731,23 @@
     "key": {
       "text": {
         "family": "Zed Mono",
-        "color": "#2b2b2b",
+        "color": "#000000",
         "size": 12
       },
-      "corner_radius": 3,
-      "background": "#c5dafc",
+      "corner_radius": 4,
+      "background": "#f1f1f1",
       "border": {
-        "color": "#9ec1fa",
+        "color": "#d5d5d5",
         "width": 1
       },
       "padding": {
-        "left": 3,
-        "right": 3
+        "top": 3,
+        "bottom": 3,
+        "left": 8,
+        "right": 8
       },
       "margin": {
-        "left": 3
+        "left": 2
       }
     }
   },
@@ -1127,53 +1147,53 @@
   },
   "search": {
     "match_background": "#fce9b7",
-    "tab_icon_spacing": 4,
+    "tab_icon_spacing": 8,
     "tab_icon_width": 14,
     "active_hovered_option_button": {
       "family": "Zed Mono",
-      "color": "#474747",
+      "color": "#000000",
       "size": 14,
-      "background": "#eaeaea",
-      "corner_radius": 6,
+      "background": "#ffffff",
+      "corner_radius": 4,
       "border": {
-        "color": "#d5d5d5",
+        "color": "#e3e3e3",
         "width": 1
       },
       "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
       }
     },
     "active_option_button": {
       "family": "Zed Mono",
-      "color": "#474747",
+      "color": "#000000",
       "size": 14,
-      "background": "#eaeaea",
-      "corner_radius": 6,
+      "background": "#ffffff",
+      "corner_radius": 4,
       "border": {
-        "color": "#d5d5d5",
+        "color": "#e3e3e3",
         "width": 1
       },
       "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
       }
     },
     "editor": {
       "background": "#ffffff",
-      "corner_radius": 6,
+      "corner_radius": 8,
       "min_width": 200,
       "max_width": 500,
       "placeholder_text": {
@@ -1187,7 +1207,7 @@
       },
       "text": {
         "family": "Zed Mono",
-        "color": "#2b2b2b",
+        "color": "#000000",
         "size": 14
       },
       "border": {
@@ -1195,39 +1215,39 @@
         "width": 1
       },
       "margin": {
-        "right": 5
+        "right": 6
       },
       "padding": {
         "top": 3,
         "bottom": 3,
-        "left": 14,
-        "right": 14
+        "left": 12,
+        "right": 8
       }
     },
     "hovered_option_button": {
       "family": "Zed Mono",
-      "color": "#474747",
+      "color": "#000000",
       "size": 14,
-      "background": "#eaeaea",
-      "corner_radius": 6,
+      "background": "#f1f1f1",
+      "corner_radius": 4,
       "border": {
-        "color": "#d5d5d5",
+        "color": "#e3e3e3",
         "width": 1
       },
       "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
       }
     },
     "invalid_editor": {
       "background": "#ffffff",
-      "corner_radius": 6,
+      "corner_radius": 8,
       "min_width": 200,
       "max_width": 500,
       "placeholder_text": {
@@ -1241,7 +1261,7 @@
       },
       "text": {
         "family": "Zed Mono",
-        "color": "#2b2b2b",
+        "color": "#000000",
         "size": 14
       },
       "border": {
@@ -1249,13 +1269,13 @@
         "width": 1
       },
       "margin": {
-        "right": 5
+        "right": 6
       },
       "padding": {
         "top": 3,
         "bottom": 3,
-        "left": 14,
-        "right": 14
+        "left": 12,
+        "right": 8
       }
     },
     "match_index": {
@@ -1268,27 +1288,27 @@
       "family": "Zed Mono",
       "color": "#474747",
       "size": 14,
-      "background": "#f8f8f8",
-      "corner_radius": 6,
+      "background": "#f1f1f1",
+      "corner_radius": 4,
       "border": {
         "color": "#d5d5d5",
         "width": 1
       },
       "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
       }
     },
     "option_button_group": {
       "padding": {
-        "left": 2,
-        "right": 2
+        "left": 4,
+        "right": 4
       }
     },
     "results_status": {
@@ -1299,7 +1319,7 @@
   },
   "breadcrumbs": {
     "family": "Zed Sans",
-    "color": "#2b2b2b",
+    "color": "#474747",
     "size": 14,
     "padding": {
       "left": 6

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,

styles/src/themes/dark.ts

@@ -21,6 +21,18 @@ const backgroundColor = {
     active: withOpacity(colors.neutral[0], 0.12),
     focused: colors.neutral[825],
   },
+  on300: {
+    base: colors.neutral[850],
+    hovered: colors.neutral[875],
+    active: colors.neutral[900],
+    focused: colors.neutral[875],
+  },
+  on500: {
+    base: colors.neutral[850],
+    hovered: colors.neutral[800],
+    active: colors.neutral[775],
+    focused: colors.neutral[800],
+  },
   ok: {
     base: colors.green[600],
     hovered: colors.green[600],

styles/src/themes/light.ts

@@ -12,7 +12,7 @@ const backgroundColor = {
   300: {
     base: colors.neutral[25],
     hovered: colors.neutral[75],
-    active: colors.neutral[125],
+    active: colors.neutral[100],
     focused: colors.neutral[75],
   },
   500: {
@@ -21,6 +21,18 @@ const backgroundColor = {
     active: withOpacity(colors.neutral[900], 0.06),
     focused: colors.neutral[50],
   },
+  on300: {
+    base: colors.neutral[50],
+    hovered: colors.neutral[100],
+    active: colors.neutral[150],
+    focused: colors.neutral[100],
+  },
+  on500: {
+    base: colors.neutral[50],
+    hovered: colors.neutral[25],
+    active: colors.neutral[0],
+    focused: colors.neutral[25],
+  },
   ok: {
     base: colors.green[100],
     hovered: colors.green[100],

styles/src/themes/theme.ts

@@ -63,6 +63,8 @@ export default interface Theme {
     100: BackgroundColorSet;
     300: BackgroundColorSet;
     500: BackgroundColorSet;
+    on300: BackgroundColorSet;
+    on500: BackgroundColorSet;
     ok: BackgroundColorSet;
     error: BackgroundColorSet;
     warning: BackgroundColorSet;