Use theme store to pass color_scheme directly to components

styles/src/component/icon_button.ts

@@ -1,6 +1,6 @@
 import { interactive, toggleable } from "../element"
 import { background, foreground } from "../style_tree/components"
-import { ColorScheme } from "../theme/color_scheme"
+import { useTheme, ColorScheme } from "../theme"
 
 export type Margin = {
     top: number
@@ -22,10 +22,9 @@ type ToggleableIconButtonOptions = IconButtonOptions & {
     active_color?: keyof ColorScheme["lowest"]
 }
 
-export function icon_button(
-    theme: ColorScheme,
-    { color, margin, layer }: IconButtonOptions
-) {
+export function icon_button({ color, margin, layer }: IconButtonOptions) {
+    const theme = useTheme()
+
     if (!color) color = "base"
 
     const m = {
@@ -75,8 +74,8 @@ export function toggleable_icon_button(
 
     return toggleable({
         state: {
-            inactive: icon_button(theme, { color, margin }),
-            active: icon_button(theme, {
+            inactive: icon_button({ color, margin }),
+            active: icon_button({
                 color: active_color ? active_color : color,
                 margin,
                 layer: theme.middle,

styles/src/component/text_button.ts

@@ -5,7 +5,7 @@ import {
     foreground,
     text,
 } from "../style_tree/components"
-import { ColorScheme } from "../theme/color_scheme"
+import { useTheme, ColorScheme } from "../theme"
 import { Margin } from "./icon_button"
 
 interface TextButtonOptions {
@@ -22,10 +22,13 @@ type ToggleableTextButtonOptions = TextButtonOptions & {
     active_color?: keyof ColorScheme["lowest"]
 }
 
-export function text_button(
-    theme: ColorScheme,
-    { color, layer, margin, text_properties }: TextButtonOptions
-) {
+export function text_button({
+    color,
+    layer,
+    margin,
+    text_properties,
+}: TextButtonOptions) {
+    const theme = useTheme()
     if (!color) color = "base"
 
     const text_options: TextProperties = {
@@ -79,8 +82,8 @@ export function toggleable_text_button(
 
     return toggleable({
         state: {
-            inactive: text_button(theme, { color, margin }),
-            active: text_button(theme, {
+            inactive: text_button({ color, margin }),
+            active: text_button({
                 color: active_color ? active_color : color,
                 margin,
                 layer: theme.middle,