zed/styles/src/component/button.ts

import { font_sizes, useTheme } from "../common"
import { Layer, Theme } from "../theme"
import { TextStyle, background } from "../style_tree/components"

// 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
    }
}