Badge

1'use client'
2 
3import { Button as ButtonPrimitive } from '@base-ui/react/button'
4import { cva, type VariantProps } from 'class-variance-authority'
5import clsx from 'clsx'
6import React from 'react'
7 
8import { cn } from '@/lib/utils'
9import { TouchTarget } from '@/components/button'
10import { Link } from '@/components/link'
11 
12const focusOutline = {
13  'primary/grey': [
14    // Base
15    '[--focus-outline:var(--color-primary-800)]',
16    // Base dark mode
17    'dark:[--focus-outline:var(--color-grey-600)]',
18    // Soft, Surface and outline
19    'data-[variant=soft]:[--focus-outline:var(--color-primary-800)]/20',
20    // Soft, Surface and outline dark mode
21    'dark:data-[variant=soft]:[--focus-outline:var(--color-grey-200)]/30',
22  ],
23  light: [
24    // Base
25    '[--focus-outline:var(--color-grey-300)]',
26    // Base dark mode
27    'dark:[--focus-outline:var(--color-grey-100)]',
28    // Soft dark mode
29    'dark:data-[variant=soft]:[--focus-outline:var(--color-grey-200)]/30',
30    // Surface
31    'data-[variant=surface]:[--focus-outline:var(--color-grey-600)]',
32    // Surface dark mode
33    'dark:data-[variant=surface]:[--focus-outline:var(--color-white)]/70',
34  ],
35  'primary/white': [
36    // Base
37    '[--focus-outline:var(--color-primary-800)]',
38    // Base dark mode
39    'dark:[--focus-outline:var(--color-white)]',
40    // Soft
41    'data-[variant=soft]:[--focus-outline:var(--color-primary-800)]/20',
42    // Soft dark mode
43    'dark:data-[variant=soft]:[--focus-outline:var(--color-grey-200)]/30',
44  ],
45  grey: [
46    // Base
47    '[--focus-outline:var(--color-grey-600)]',
48    // Base dark mode
49    'dark:[--focus-outline:var(--color-grey-500)]',
50    // Soft
51    'data-[variant=soft]:[--focus-outline:var(--color-grey-600)]/20',
52    // Soft dark mode
53    'dark:data-[variant=soft]:[--focus-outline:var(--color-grey-200)]/20',
54    // Outline dark mode
55    'dark:data-[variant=outline]:[--focus-outline:var(--color-grey-100)]/30',
56    // Surface dark mode
57    'dark:data-[variant=surface]:[--focus-outline:var(--color-grey-200)]/20',
58  ],
59  white: [
60    // Base
61    '[--focus-outline:var(--color-white)]',
62    // Soft
63    'data-[variant=soft]:[--focus-outline:var(--color-white)]/20',
64  ],
65  primary: [
66    // Base
67    '[--focus-outline:var(--color-primary-800)]',
68    // Soft
69    'data-[variant=soft]:[--focus-outline:var(--color-primary-800)]/20',
70    // Soft dark mode
71    'dark:data-[variant=soft]:[--focus-outline:var(--color-primary-800)]/60',
72  ],
73  secondary: [
74    // Base
75// … truncated