Maintain Responsive Styles #3054

taylorpreston · 2024-12-20T16:35:07Z

taylorpreston
Dec 20, 2024

Hey! I have a Button component I am building and want to the ability to use the responsive styles in JSX like this <Button variant={base= "solid", md: "outline}>Hello World</Button>

How do I keep that functionality and how do I correctly type it?

import { cva, css, cx, type RecipeVariantProps } from '../../styled-system/css';
import { ButtonHTMLAttributes } from 'react';

const buttonRecipe = cva({
    base: {
        display: 'inline-block',
        cursor: 'pointer',
        borderRadius: 'md',
        fontWeight: 'semibold',
        transition: 'all 0.1s ease-in-out',
        _active: {
            scale: 0.98,
        },
    },
    variants: {
        variant: {
            solid: {
                bg: {
                    base: 'colorPalette.default',
                },
                color: {
                    base: 'white',
                },
                _hover: {
                    bg: 'colorPalette.dark ',
                },
                _active: {
                    bg: 'colorPalette.default',
                    outline: '{borders.thick}',
                    outlineColor: 'colorPalette.lighter',
                    boxShadow: '0px 1px 2px 0px #1018280D',
                },
                _focus: {
                    outline: '{borders.thick}',
                    outlineColor: 'colorPalette.lighter',
                    boxShadow: '0px 1px 2px 0px #1018280D',
                },
            },
            outline: {
                bg: 'transparent',
                color: 'colorPalette.default',
                border: '{borders.thin}',
                borderColor: 'colorPalette.default',
                _hover: {
                    bg: 'colorPalette.lightest',
                    color: 'colorPalette.default',
                },
                _active: {
                    bg: 'colorPalette.lightest',
                    color: 'colorPalette.default',
                    boxShadow: '0px 0px 3px 0px #0E5FE9',
                },
                _focus: {
                    outline: '3px solid',
                    outlineColor: 'colorPalette.lighter',
                    boxShadow: '0px 1px 2px 0px #1018280D',
                },
            },
            ghost: {
                bg: 'transparent',
                color: 'colorPalette.default',
                _hover: {
                    bg: 'colorPalette.lightest',
                    color: 'colorPalette.default',
                },
                _active: {
                    bg: 'colorPalette.lightest',
                    color: 'colorPalette.default',
                },
                _focus: {
                    outline: '{borders.thick}',
                    outlineColor: 'colorPalette.lighter',
                    boxShadow: '0px 1px 2px 0px #1018280D',
                },
            },
        },
        size: {
            small: {
                px: 2,
                py: 1,
                fontSize: 'sm',
            },
            medium: {
                px: 3,
                py: 2,
                fontSize: 'md',
            },
            large: {
                px: 4,
                py: 2,
                fontSize: 'lg',
            },
        },
    },
    defaultVariants: {
        variant: 'solid',
        size: 'large',
    },
});

export type ButtonRecipeProps = RecipeVariantProps<typeof buttonRecipe>;

type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &
    ButtonRecipeProps & {
        colorPalette?: string;
    };

export const Button = ({
    colorPalette,
    children,
    className,
    variant = 'solid',
    size = 'medium',
    ...props
}: ButtonProps) => {
    return (
        <button
            className={cx(
                css({
                    colorPalette: colorPalette,
                }),
                buttonRecipe({
                    variant: variant,
                    size: size,
                }),
                className,
            )}
            {...props}
        >
            {children}
        </button>
    );
};