Button

1import { Button as ButtonPrimitive } from '@base-ui/react/button';
2import { type VariantProps, cva } from 'class-variance-authority';
3import * as React from 'react';
4 
5import { cn } from '@/lib/utils';
6 
7const hoverGradient = {
8  normal:
9    'hover:[background-image:linear-gradient(var(--color-stateslayer-overlay-hover),var(--color-stateslayer-overlay-hover))] disabled:hover:[background-image:none]',
10  inverse:
11    'hover:[background-image:linear-gradient(var(--color-stateslayer-overlay-hover-inverse),var(--color-stateslayer-overlay-hover-inverse))] disabled:hover:[background-image:none]',
12} as const;
13 
14const activeGradient = {
15  normal:
16    'active:[background-image:linear-gradient(var(--color-stateslayer-overlay-pressed),var(--color-stateslayer-overlay-pressed))] disabled:active:[background-image:none]',
17  inverse:
18    'active:[background-image:linear-gradient(var(--color-stateslayer-overlay-pressed-inverse),var(--color-stateslayer-overlay-pressed-inverse))] disabled:active:[background-image:none]',
19} as const;
20 
21const disabledOverlayGradient =
22  'disabled:[background-image:linear-gradient(var(--color-stateslayer-overlay-disabled),var(--color-stateslayer-overlay-disabled))]';
23 
24const commonDisabled = 'disabled:bg-fill-muted';
25 
26const buttonVariants = cva(
27  [
28    'relative cursor-pointer inline-flex items-center justify-center gap-2 whitespace-nowrap outline-none',
29    'transition-all',
30    'group/button',
31    'focus-visible:ring-stroke-status-focus',
32    'disabled:cursor-not-allowed disabled:text-fg-disabled',
33  ],
34  {
35    variants: {
36      variant: {
37        default: [
38          'bg-fill-primary text-fg-primary-inverse',
39          hoverGradient.inverse,
40          activeGradient.inverse,
41          'focus-visible:bg-stateslayer-overlay-active',
42          'focus-visible:ring-offset-1 focus-visible:ring-offset-stroke-active-inverse',
43          commonDisabled,
44          disabledOverlayGradient,
45        ],
46        accent: [
47          'bg-brand-accents-qb-accent text-mist-50-opacity-88',
48          hoverGradient.normal,
49          activeGradient.normal,
50          'focus-visible:ring-offset-1 focus-visible:ring-offset-stroke-active-inverse',
51          commonDisabled,
52          disabledOverlayGradient,
53        ],
54        secondary: [
55          'bg-fill-muted text-fg-primary',
56          hoverGradient.normal,
57          activeGradient.normal,
58          'focus-visible:ring-offset-1 focus-visible:ring-offset-stroke-active-inverse',
59          commonDisabled,
60// … truncated