Merge remote-tracking branch 'origin/main' into chat-again

styles/src/build_themes.ts

@@ -30,6 +30,9 @@ function write_themes(themes: Theme[], output_directory: string) {
         setTheme(theme)
 
         const style_tree = app()
+        // Nathan: New elements will read directly from the theme colors.
+        // Adding this during the transition. Afterwards, we can port all themes to Rust.
+        style_tree.base_theme = theme
         const style_tree_json = JSON.stringify(style_tree, null, 2)
         const temp_path = path.join(temp_directory, `${theme.name}.json`)
         const out_path = path.join(output_directory, `${theme.name}.json`)

styles/src/style_tree/feedback.ts

@@ -12,9 +12,6 @@ export default function feedback(): any {
                 background: background(theme.highest, "on"),
                 corner_radius: 6,
                 border: border(theme.highest, "on"),
-                margin: {
-                    right: 4,
-                },
                 padding: {
                     bottom: 2,
                     left: 10,
@@ -41,9 +38,15 @@ export default function feedback(): any {
             },
         }),
         button_margin: 8,
-        info_text_default: text(theme.highest, "sans", "default", {
-            size: "xs",
-        }),
+        info_text_default: {
+            padding: {
+                left: 4,
+                right: 4,
+            },
+            ...text(theme.highest, "sans", "default", {
+                size: "xs",
+            })
+        },
         link_text_default: text(theme.highest, "sans", "default", {
             size: "xs",
             underline: true,

styles/src/style_tree/toolbar.ts

@@ -2,14 +2,14 @@ import { useTheme } from "../common"
 import { toggleable_icon_button } from "../component/icon_button"
 import { interactive, toggleable } from "../element"
 import { background, border, foreground, text } from "./components"
-import { text_button } from "../component";
+import { text_button } from "../component"
 
 export const toolbar = () => {
     const theme = useTheme()
 
     return {
         height: 42,
-        padding: { left: 4, right: 4 },
+        padding: { left: 8, right: 8 },
         background: background(theme.highest),
         border: border(theme.highest, { bottom: true }),
         item_spacing: 4,
@@ -24,9 +24,9 @@ export const toolbar = () => {
                 ...text(theme.highest, "sans", "variant"),
                 corner_radius: 6,
                 padding: {
-                    left: 6,
-                    right: 6,
-                },
+                    left: 4,
+                    right: 4,
+                }
             },
             state: {
                 hovered: {