Style cleanup for channels panel

2023-08-16 12:38:44 -04:00
parent 0524abf114
commit 6c15636ccc
7 changed files with 241 additions and 45 deletions
@@ -1,6 +1,118 @@
-export const ButtonVariant = {
-    Default: 'default',
-    Ghost: 'ghost'
-} as const
+import { font_sizes, useTheme } from "../common"
+import { Layer, Theme } from "../theme"
+import { TextStyle, background } from "../style_tree/components"

-export type Variant = typeof ButtonVariant[keyof typeof ButtonVariant]
+// eslint-disable-next-line @typescript-eslint/no-namespace
+export namespace Button {
+    export type Options = {
+        layer: Layer,
+        background: keyof Theme["lowest"]
+        color: keyof Theme["lowest"]
+        variant: Button.Variant
+        size: Button.Size
+        shape: Button.Shape
+        margin: {
+            top?: number
+            bottom?: number
+            left?: number
+            right?: number
+        },
+        states: {
+            enabled?: boolean,
+            hovered?: boolean,
+            pressed?: boolean,
+            focused?: boolean,
+            disabled?: boolean,
+        }
+    }
+
+    export type ToggleableOptions = Options & {
+        active_background: keyof Theme["lowest"]
+        active_color: keyof Theme["lowest"]
+    }
+
+    /** Padding added to each side of a Shape.Rectangle button */
+    export const RECTANGLE_PADDING = 2
+    export const FONT_SIZE = font_sizes.sm
+    export const ICON_SIZE = 14
+    export const CORNER_RADIUS = 6
+
+    export const variant = {
+        Default: 'filled',
+        Outline: 'outline',
+        Ghost: 'ghost'
+    } as const
+
+    export type Variant = typeof variant[keyof typeof variant]
+
+    export const shape = {
+        Rectangle: 'rectangle',
+        Square: 'square'
+    } as const
+
+    export type Shape = typeof shape[keyof typeof shape]
+
+    export const size = {
+        Small: "sm",
+        Medium: "md"
+    } as const
+
+    export type Size = typeof size[keyof typeof size]
+
+    export type BaseStyle = {
+        corder_radius: number
+        background: string | null
+        padding: {
+            top: number
+            bottom: number
+            left: number
+            right: number
+        },
+        margin: Button.Options['margin']
+        button_height: number
+    }
+
+    export type LabelButtonStyle = BaseStyle & TextStyle
+    // export type IconButtonStyle = ButtonStyle
+
+    export const button_base = (
+        options: Partial<Button.Options> = {
+            variant: Button.variant.Default,
+            shape: Button.shape.Rectangle,
+            states: {
+                hovered: true,
+                pressed: true
+            }
+        }
+    ): BaseStyle => {
+        const theme = useTheme()
+
+        const layer = options.layer ?? theme.middle
+        const color = options.color ?? "base"
+        const background_color = options.variant === Button.variant.Ghost ? null : background(layer, options.background ?? color)
+
+        const m = {
+            top: options.margin?.top ?? 0,
+            bottom: options.margin?.bottom ?? 0,
+            left: options.margin?.left ?? 0,
+            right: options.margin?.right ?? 0,
+        }
+        const size = options.size || Button.size.Medium
+        const padding = 2
+
+        const base: BaseStyle = {
+            background: background_color,
+            corder_radius: Button.CORNER_RADIUS,
+            padding: {
+                top: padding,
+                bottom: padding,
+                left: options.shape === Button.shape.Rectangle ? padding + Button.RECTANGLE_PADDING : padding,
+                right: options.shape === Button.shape.Rectangle ? padding + Button.RECTANGLE_PADDING : padding
+            },
+            margin: m,
+            button_height: 16,
+        }
+
+        return base
+    }
+}