Style the clear button better, add border to button constructor options

styles/src/component/text_button.ts

@@ -1,5 +1,6 @@
 import { interactive, toggleable } from "../element"
 import {
+    Border,
     TextProperties,
     background,
     foreground,
@@ -16,6 +17,7 @@ interface TextButtonOptions {
     margin?: Partial<Margin>
     disabled?: boolean
     text_properties?: TextProperties
+    border?: Border
 }
 
 type ToggleableTextButtonOptions = TextButtonOptions & {
@@ -29,6 +31,7 @@ export function text_button({
     margin,
     disabled,
     text_properties,
+    border,
 }: TextButtonOptions = {}) {
     const theme = useTheme()
     if (!color) color = "base"
@@ -66,6 +69,7 @@ export function text_button({
         },
         state: {
             default: {
+                border,
                 background: background_color,
                 color: disabled
                     ? foreground(layer ?? theme.lowest, "disabled")
@@ -74,6 +78,7 @@ export function text_button({
             hovered: disabled
                 ? {}
                 : {
+                    border,
                     background: background(
                         layer ?? theme.lowest,
                         color,
@@ -88,6 +93,7 @@ export function text_button({
             clicked: disabled
                 ? {}
                 : {
+                    border,
                     background: background(
                         layer ?? theme.lowest,
                         color,

styles/src/style_tree/toolbar.ts

@@ -37,8 +37,21 @@ export const toolbar = () => {
         }),
         toggleable_text_tool: toggleable({
             state: {
-                inactive: text_button({ variant: "ghost", layer: theme.highest, disabled: true, margin: { right: 4 }, text_properties: { size: "sm" } }),
-                active: text_button({ variant: "ghost", layer: theme.highest, margin: { right: 4 }, text_properties: { size: "sm" } })
+                inactive: text_button({
+                    disabled: true,
+                    variant: "ghost",
+                    layer: theme.highest,
+                    margin: { left: 4 },
+                    text_properties: { size: "sm" },
+                    border: border(theme.middle),
+                }),
+                active: text_button({
+                    variant: "ghost",
+                    layer: theme.highest,
+                    margin: { left: 4 },
+                    text_properties: { size: "sm" },
+                    border: border(theme.middle),
+                }),
             }
         }),
     }

styles/src/style_tree/workspace.ts

@@ -19,8 +19,6 @@ export default function workspace(): any {
 
     const { is_light } = theme
 
-    const TOOLBAR_ITEM_SPACING = 8;
-
     return {
         background: background(theme.lowest),
         blank_pane: {