Format

styles/src/component/icon_button.ts

@@ -10,10 +10,7 @@ export type Margin = {
 }
 
 interface IconButtonOptions {
-    layer?:
-    | Theme["lowest"]
-    | Theme["middle"]
-    | Theme["highest"]
+    layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
     color?: keyof Theme["lowest"]
     margin?: Partial<Margin>
 }

styles/src/component/tab_bar_button.ts

@@ -12,44 +12,47 @@ type TabBarButtonProps = TabBarButtonOptions & {
     state?: Partial<Record<InteractiveState, Partial<TabBarButtonOptions>>>
 }
 
-export function tab_bar_button(theme: Theme, { icon, color = "base" }: TabBarButtonProps) {
+export function tab_bar_button(
+    theme: Theme,
+    { icon, color = "base" }: TabBarButtonProps
+) {
     const button_spacing = 8
 
-    return (
-        interactive({
-            base: {
-                icon: {
-                    color: foreground(theme.middle, color),
-                    asset: icon,
-                    dimensions: {
-                        width: 15,
-                        height: 15,
-                    },
+    return interactive({
+        base: {
+            icon: {
+                color: foreground(theme.middle, color),
+                asset: icon,
+                dimensions: {
+                    width: 15,
+                    height: 15,
                 },
+            },
+            container: {
+                corner_radius: 4,
+                padding: {
+                    top: 4,
+                    bottom: 4,
+                    left: 4,
+                    right: 4,
+                },
+                margin: {
+                    left: button_spacing / 2,
+                    right: button_spacing / 2,
+                },
+            },
+        },
+        state: {
+            hovered: {
                 container: {
-                    corner_radius: 4,
-                    padding: {
-                        top: 4, bottom: 4, left: 4, right: 4
-                    },
-                    margin: {
-                        left: button_spacing / 2,
-                        right: button_spacing / 2,
-                    },
+                    background: background(theme.middle, color, "hovered"),
                 },
             },
-            state: {
-                hovered: {
-                    container: {
-                        background: background(theme.middle, color, "hovered"),
-
-                    }
-                },
-                clicked: {
-                    container: {
-                        background: background(theme.middle, color, "pressed"),
-                    }
+            clicked: {
+                container: {
+                    background: background(theme.middle, color, "pressed"),
                 },
             },
-        })
-    )
+        },
+    })
 }

styles/src/component/text_button.ts

@@ -9,10 +9,7 @@ import { useTheme, Theme } from "../theme"
 import { Margin } from "./icon_button"
 
 interface TextButtonOptions {
-    layer?:
-    | Theme["lowest"]
-    | Theme["middle"]
-    | Theme["highest"]
+    layer?: Theme["lowest"] | Theme["middle"] | Theme["highest"]
     color?: keyof Theme["lowest"]
     margin?: Partial<Margin>
     text_properties?: TextProperties