Button - custom text color combined with text-base size

[aleczratiu]

Hi,

I'm encountering some issues using custom color for the text, on the primary variant I have text-primary-foreground combined with the size text-base-semibold, because I'm using like this the text-primary-foreground color is not applied. I was needed to use ! mark to be able to apply the text-base-semibold and text-primary-foreground. In the list are more variants and sizes with the same issue, I've just added on of them to be easely following up.

Does anyone faced already with this type of issue? How have you fixed this case?

tailwind.config.ts

extend: {
    colors: {
        border: 'var(--border)',
        input: 'var(--input)',
        ring: 'var(--ring)',
        background: 'var(--background)',
        foreground: 'var(--foreground)',
        primary: {
            DEFAULT: 'var(--primary)',
            foreground: 'var(--primary-foreground)',
        },
}

import { ButtonHTMLAttributes, forwardRef } from 'react';
import { cva, type VariantProps } from 'class-variance-authority';
import { Slot } from '@radix-ui/react-slot';
import cn from '../../../utils/cn';

const buttonVariants = cva(
    'ring-offset-background focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm ' +
        'font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 ' +
        'disabled:pointer-events-none disabled:opacity-50',
    {
        variants: {
            variant: {
                primary: 'bg-primary text-primary-foreground',            },
            size: {
                xl: '!text-base-semibold w-full rounded-md px-[24px] py-[14px] sm:w-auto',
            },
        },
        defaultVariants: {
            variant: 'primary',
            size: 'xl',
        },
    },
);

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
    asChild?: boolean;
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, variant, size, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : 'button';
        return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
    },
);
Button.displayName = 'Button';

export { Button, buttonVariants };

[aleczratiu]

The entire problem was from cn method, istead can be used the clsx directly, if somone read this.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.