Button.tsx

import { Component, createElement } from 'cortex'
import { createStyleSheet } from 'cortex-css'

import { Theme } from '~/contexts/Theme'

/**
 * Element which is intentionally 'pressable'
 */
export class Button extends Component {

    public active = false
    public padding = Button.Padding.Medium
    public chip = false
    public variant = Button.Variant.Contained

    protected render() {
        return [
            <HTMLButtonElement role='button'>
                <HTMLSlotElement/>
            </HTMLButtonElement>
        ]
    }

    protected theme() {
        return createStyleSheet(css => {
            const theme = this.getContext(Theme)
    
            css.selectHost(css => {
                css.write(`
                    display: contents;
                `)
            })
            
            css.selectClass(HTMLButtonElement, css => {
                css.write(`
                    border: none;
                    outline: none;
                    background: none;
                    border: 1px solid ${ theme?.color?.secondary };
                    color: ${ theme?.color?.secondary };
                    border-radius: 100px;
                `)

                switch (this.padding) {
                    case Button.Padding.Small: css.write(`
                        padding: 5px 10px;
                    `); break
                    case Button.Padding.Medium: css.write(`
                        padding: 10px 20px;
                    `); break
                    case Button.Padding.None: css.write(`
                        padding: 0;
                    `); break
                    case Button.Padding.Large: css.write(`
                        padding: 15px 35px;
                    `); break
                }

                if (this.active) css.write(`
                    background: ${ theme?.color?.secondary?.alpha(0.8) };
                    box-shadow: 
                        inset 0 0 0 1px ${ theme?.color?.background },
                        0 8px 32px rgb(0 0 0 / 40%);
                    color: ${ theme?.color?.background };
                    filter: drop-shadow(0 16px 32px ${ theme?.color?.secondary?.alpha(0.15) });
                `)

                css.selectIs([ css.selectHover(), css.selectFocus() ], css => {
                    css.write(`
                        background: ${ theme?.color?.middleground?.alpha(0.5) };
                        box-shadow: 
                            inset 0 0 80px ${ theme?.color?.secondary?.alpha(0.5) }, 
                            0 8px 32px rgb(0 0 0 / 50%);
                        color: ${ theme?.color?.secondary };
                        filter: drop-shadow(0 16px 32px ${ theme?.color?.secondary?.alpha(0.15) });
                    `)
                })

                css.selectActive(css => {
                    css.write(`
                        opacity: 0.8;
                    `)
                })
            })
        })
    }
}

export namespace Button {

    export enum Padding {
        Small,
        Medium,
        None,
        Large
    }

    export enum Variant {
        Contained,
        Outlined,
        Inverted
    }
}

<Button active padding={ Button.Padding.Small }>
    Click Me
</Button>