commonCva.ts71 lines · main

1	import { cva, VariantProps } from 'class-variance-authority'
2
3	const defaults = {
4	bg: {
5	brand: {
6	primary: 'bg-purple-600',
7	secondary: 'bg-purple-200',
8	},
9	},
10	text: {
11	brand: 'text-purple-600',
12	body: 'text-background',
13	title: 'text-alternative',
14	},
15	border: {
16	brand: 'border-brand-600',
17	primary: 'border-strong',
18	secondary: 'border-secondary',
19	alternative: 'border-alternative',
20	},
21	placeholder: 'placeholder-border-stronger',
22	focus: `
23	outline-hidden
24	focus:ring-current focus:ring-2
25	`,
26	'focus-visible': `
27	outline-hidden
28	transition-all
29	outline-0
30	focus-visible:outline-4
31	focus-visible:outline-offset-1
32	`,
33	size: {
34	// buttons, inputs, input labels use these sizes
35	text: {
36	tiny: 'text-xs',
37	small: 'text-sm leading-4',
38	medium: 'text-sm',
39	large: 'text-base',
40	xlarge: 'text-base',
41	},
42	// buttons, inputs, input labels use these sizes
43	padding: {
44	tiny: 'px-2.5 py-1',
45	small: 'px-3 py-2',
46	medium: 'px-4 py-2',
47	large: 'px-4 py-2',
48	xlarge: 'px-6 py-3',
49	},
50	},
51	overlay: {
52	base: `absolute inset-0 bg-background opacity-50`,
53	container: `fixed inset-0 transition-opacity`,
54	},
55	}
56
57	export const sizes = {
58	tiny: `${defaults.size.text.tiny} ${defaults.size.padding.tiny}`,
59	small: `${defaults.size.text.small} ${defaults.size.padding.small}`,
60	medium: `${defaults.size.text.medium} ${defaults.size.padding.medium}`,
61	large: `${defaults.size.text.large} ${defaults.size.padding.large}`,
62	xlarge: `${defaults.size.text.xlarge} ${defaults.size.padding.xlarge}`,
63	}
64	export type SizeVariantProps = VariantProps<typeof sizeVariants>['size']
65	export const sizeVariants = cva('', {
66	variants: {
67	size: {
68	...sizes,
69	},
70	},
71	})