From 4a5b2fa5dc49261395cbd54092e49654c95f28b8 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 14 Aug 2023 15:13:57 -0400
Subject: [PATCH] Add ghost button variants

---
 styles/src/component/button.ts      |  6 ++++++
 styles/src/component/icon_button.ts | 12 ++++++++----
 styles/src/component/text_button.ts |  9 ++++++---
 3 files changed, 20 insertions(+), 7 deletions(-)
 create mode 100644 styles/src/component/button.ts

diff --git a/styles/src/component/button.ts b/styles/src/component/button.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ba72851768edf7d46c6c8cb774b777b92ecc6da1
--- /dev/null
+++ b/styles/src/component/button.ts
@@ -0,0 +1,6 @@
+export const ButtonVariant = {
+    Default: 'default',
+    Ghost: 'ghost'
+} as const
+
+export type Variant = typeof ButtonVariant[keyof typeof ButtonVariant]
diff --git a/styles/src/component/icon_button.ts b/styles/src/component/icon_button.ts
index 6887fc7c30e1f234fd043bb115c2658039b5f806..ae3fa763e72a47943102e549538381db3516e7c4 100644
--- a/styles/src/component/icon_button.ts
+++ b/styles/src/component/icon_button.ts
@@ -1,6 +1,7 @@
 import { interactive, toggleable } from "../element"
 import { background, foreground } from "../style_tree/components"
 import { useTheme, Theme } from "../theme"
+import { ButtonVariant, Variant } from "./button"
 
 export type Margin = {
     top: number
@@ -16,17 +17,20 @@ interface IconButtonOptions {
     | Theme["highest"]
     color?: keyof Theme["lowest"]
     margin?: Partial<Margin>
+    variant?: Variant
 }
 
 type ToggleableIconButtonOptions = IconButtonOptions & {
     active_color?: keyof Theme["lowest"]
 }
 
-export function icon_button({ color, margin, layer }: IconButtonOptions) {
+export function icon_button({ color, margin, layer, variant = ButtonVariant.Default }: IconButtonOptions) {
     const theme = useTheme()
 
     if (!color) color = "base"
 
+    const background_color = variant === ButtonVariant.Ghost ? null : background(layer ?? theme.lowest, color)
+
     const m = {
         top: margin?.top ?? 0,
         bottom: margin?.bottom ?? 0,
@@ -51,7 +55,7 @@ export function icon_button({ color, margin, layer }: IconButtonOptions) {
         },
         state: {
             default: {
-                background: background(layer ?? theme.lowest, color),
+                background: background_color,
                 color: foreground(layer ?? theme.lowest, color),
             },
             hovered: {
@@ -68,13 +72,13 @@ export function icon_button({ color, margin, layer }: IconButtonOptions) {
 
 export function toggleable_icon_button(
     theme: Theme,
-    { color, active_color, margin }: ToggleableIconButtonOptions
+    { color, active_color, margin, variant }: ToggleableIconButtonOptions
 ) {
     if (!color) color = "base"
 
     return toggleable({
         state: {
-            inactive: icon_button({ color, margin }),
+            inactive: icon_button({ color, margin, variant }),
             active: icon_button({
                 color: active_color ? active_color : color,
                 margin,
diff --git a/styles/src/component/text_button.ts b/styles/src/component/text_button.ts
index 3311081a6f8048ac475745fdc970a0620b7f7412..c7bdb26e7bec5a34dc6d021cb3c164b767824fde 100644
--- a/styles/src/component/text_button.ts
+++ b/styles/src/component/text_button.ts
@@ -6,6 +6,7 @@ import {
     text,
 } from "../style_tree/components"
 import { useTheme, Theme } from "../theme"
+import { ButtonVariant, Variant } from "./button"
 import { Margin } from "./icon_button"
 
 interface TextButtonOptions {
@@ -13,7 +14,7 @@ interface TextButtonOptions {
     | Theme["lowest"]
     | Theme["middle"]
     | Theme["highest"]
-    variant?: "default" | "ghost"
+    variant?: Variant
     color?: keyof Theme["lowest"]
     margin?: Partial<Margin>
     text_properties?: TextProperties
@@ -24,7 +25,7 @@ type ToggleableTextButtonOptions = TextButtonOptions & {
 }
 
 export function text_button({
-    variant = "default",
+    variant = ButtonVariant.Default,
     color,
     layer,
     margin,
@@ -33,6 +34,8 @@ export function text_button({
     const theme = useTheme()
     if (!color) color = "base"
 
+    const background_color = variant === ButtonVariant.Ghost ? null : background(layer ?? theme.lowest, color)
+
     const text_options: TextProperties = {
         size: "xs",
         weight: "normal",
@@ -61,7 +64,7 @@ export function text_button({
         },
         state: {
             default: {
-                background: variant !== "ghost" ? background(layer ?? theme.lowest, color) : null,
+                background: background_color,
                 color: foreground(layer ?? theme.lowest, color),
             },
             hovered: {