Merge branch 'main' into storybook

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/search.ts

@@ -48,7 +48,7 @@ export default function search(): any {
     }
 
     return {
-        padding: { top: 0, bottom: 0 },
+        padding: { top: 4, bottom: 4 },
 
         option_button: toggleable({
             base: interactive({
@@ -394,7 +394,7 @@ export default function search(): any {
                 }),
             },
         }),
-        search_bar_row_height: 32,
+        search_bar_row_height: 34,
         search_row_spacing: 8,
         option_button_height: 22,
         modes_container: {},

styles/src/style_tree/toolbar.ts

@@ -1,14 +1,15 @@
 import { useTheme } from "../common"
 import { toggleable_icon_button } from "../component/icon_button"
-import { interactive } from "../element"
+import { interactive, toggleable } from "../element"
 import { background, border, foreground, text } from "./components"
+import { text_button } from "../component";
 
 export const toolbar = () => {
     const theme = useTheme()
 
     return {
-        height: 32,
-        padding: { left: 4, right: 4, top: 4, bottom: 4 },
+        height: 42,
+        padding: { left: 4, right: 4 },
         background: background(theme.highest),
         border: border(theme.highest, { bottom: true }),
         item_spacing: 4,
@@ -34,5 +35,24 @@ export const toolbar = () => {
                 },
             },
         }),
+        toggleable_text_tool: toggleable({
+            state: {
+                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),
+                }),
+            }
+        }),
     }
 }