From 0a14e33dba0bc26da975c6f0de4d1094c4508fac Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Tue, 29 Aug 2023 15:59:35 -0400
Subject: [PATCH] Pull toolbar into it's own styletree

---
 styles/src/style_tree/toolbar.ts   | 20 ++++++++++++++++++++
 styles/src/style_tree/workspace.ts | 14 ++------------
 2 files changed, 22 insertions(+), 12 deletions(-)
 create mode 100644 styles/src/style_tree/toolbar.ts

diff --git a/styles/src/style_tree/toolbar.ts b/styles/src/style_tree/toolbar.ts
new file mode 100644
index 0000000000..32fd4ab1b5
--- /dev/null
+++ b/styles/src/style_tree/toolbar.ts
@@ -0,0 +1,20 @@
+import { useTheme } from "../common"
+import { toggleable_icon_button } from "../component/icon_button"
+import { background, border } from "./components"
+
+export const toolbar = () => {
+    const theme = useTheme()
+
+    return {
+        height: 42,
+        background: background(theme.highest),
+        border: border(theme.highest, { bottom: true }),
+        item_spacing: 8,
+        toggleable_tool: toggleable_icon_button(theme, {
+            margin: { left: 8 },
+            variant: "ghost",
+            active_color: "accent",
+        }),
+        padding: { left: 8, right: 8 },
+    }
+}
diff --git a/styles/src/style_tree/workspace.ts b/styles/src/style_tree/workspace.ts
index 43a6cec585..7feccfc8bc 100644
--- a/styles/src/style_tree/workspace.ts
+++ b/styles/src/style_tree/workspace.ts
@@ -13,6 +13,7 @@ import { interactive } from "../element"
 import { titlebar } from "./titlebar"
 import { useTheme } from "../theme"
 import { toggleable_icon_button } from "../component/icon_button"
+import { toolbar } from "./toolbar"
 
 export default function workspace(): any {
     const theme = useTheme()
@@ -128,18 +129,7 @@ export default function workspace(): any {
         },
         status_bar: statusBar(),
         titlebar: titlebar(),
-        toolbar: {
-            height: 42,
-            background: background(theme.highest),
-            border: border(theme.highest, { bottom: true }),
-            item_spacing: 8,
-            toggleable_tool: toggleable_icon_button(theme, {
-                margin: { left: 8 },
-                variant: "ghost",
-                active_color: "accent",
-            }),
-            padding: { left: 8, right: 8 },
-        },
+        toolbar: toolbar(),
         breadcrumb_height: 24,
         breadcrumbs: interactive({
             base: {