-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathbutton.ts
More file actions
67 lines (63 loc) · 1.99 KB
/
button.ts
File metadata and controls
67 lines (63 loc) · 1.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { twMerge } from "tailwind-merge";
import { bgColors, Color, textColors } from "./colors";
export type buttonVariant = "filled" | "outlined" | "text";
export type buttonSize = "small" | "medium" | "large";
export type buttonShape = "default" | "pill" | "square" | "circle" | "none";
export const buttonColors = (variant: buttonVariant, color: Color) => {
return {
filled: {
red: twMerge("text-white", bgColors.red[500]),
light: twMerge("text-white", bgColors.light[500]),
dark: twMerge("text-white", bgColors.dark[500]),
transparent: bgColors.transparent[500],
},
outlined: {
red: twMerge("border-red-500 border-2", textColors.red[500]),
light: twMerge("border-light-500 border-2", textColors.light[500]),
dark: twMerge("border-dark-500 border-2", textColors.dark[500]),
transparent: twMerge("border-transparent"),
},
text: {
red: twMerge(textColors.red[500]),
light: twMerge(textColors.light[500]),
dark: twMerge(textColors.dark[500]),
transparent: twMerge(textColors.transparent[500]),
},
}[variant][color];
};
const sizes = {
textSizes: {
small: "text-xs",
medium: "text-sm",
large: "text-lg",
},
paddingSizes: {
long: {
small: "py-2 px-8",
medium: "py-3 px-10",
large: "py-4 px-16 lg:py-5 lg:px-20",
},
square: {
small: "py-3 px-3",
medium: "py-4 px-4",
large: "py-5 px-5",
},
},
};
export const buttonShapes = (shape: buttonShape, size: buttonSize) => {
return {
default: twMerge("rounded-lg", sizes.textSizes[size], sizes.paddingSizes.long[size]),
pill: twMerge("rounded-full", sizes.textSizes[size], sizes.paddingSizes.long[size]),
square: twMerge(
"rounded-xl aspect-square",
sizes.textSizes[size],
sizes.paddingSizes.square[size],
),
circle: twMerge(
"rounded-full aspect-square",
sizes.textSizes[size],
sizes.paddingSizes.square[size],
),
none: sizes.textSizes[size],
}[shape];
};