hostinger / vue-frontend / src / components / Button / configuration.ts

configuration.ts in Hostinger Tools 3.0.61, at vue-frontend/src/components/Button/configuration.ts

164 lines 3.2 KB

Raw Download Zip

1	import type { ButtonSize, IButtonVariantConfiguration } from "@/types";
2
3	export const BUTTON_SIZE_CONFIGURATION: Record<
4	ButtonSize,
5	{ padding: string }
6	> = {
7	small: {
8	padding: "6px 16px"
9	},
10	medium: {
11	padding: "8px 24px"
12	},
13	large: {
14	padding: "12px 32px"
15	}
16	};
17
18	export const BUTTON_ICON_CONFIGURATION = {
19	small: {
20	size: 16
21	},
22	medium: {
23	size: 24
24	},
25	large: {
26	size: 24
27	}
28	};
29
30	export const BUTTON_LOADER_DIMENSION_CONFIGURATION = {
31	small: { size: "20px", border: "3px" },
32	medium: { size: "24px", border: "4px" },
33	large: { size: "32px", border: "5px" }
34	};
35
36	export const BUTTON_VARIANT_CONFIGURATION: IButtonVariantConfiguration = {
37	contain: {
38	primary: {
39	backgroundColor: "primary",
40	hoverBackgroundColor: "primary-dark",
41	border: "none",
42	color: "white",
43	disabled: {
44	color: "white",
45	backgroundColor: "gray"
46	}
47	},
48	danger: {
49	backgroundColor: "danger",
50	hoverBackgroundColor: "danger-dark",
51	border: "none",
52	color: "white",
53	disabled: {
54	color: "white",
55	backgroundColor: "gray"
56	}
57	},
58	dark: {
59	backgroundColor: "dark",
60	hoverBackgroundColor: "meteorite-gray",
61	border: "1px solid var(--light)",
62	color: "white",
63	disabled: {
64	color: "gray",
65	backgroundColor: "transparent"
66	}
67	},
68	warning: {
69	backgroundColor: "warning",
70	hoverBackgroundColor: "warning-dark",
71	border: "none",
72	color: "dark",
73	disabled: {
74	color: "white",
75	backgroundColor: "gray"
76	}
77	}
78	},
79	outline: {
80	primary: {
81	backgroundColor: "transparent",
82	hoverBackgroundColor: "primary-light",
83	border: "1px solid var(--gray-border)",
84	color: "primary",
85	disabled: {
86	color: "gray",
87	backgroundColor: "transparent"
88	}
89	},
90	dark: {
91	backgroundColor: "dark",
92	hoverBackgroundColor: "meteorite-gray",
93	border: "1px solid var(--light)",
94	color: "white",
95	disabled: {
96	color: "gray",
97	backgroundColor: "transparent"
98	}
99	},
100	danger: {
101	backgroundColor: "transparent",
102	hoverBackgroundColor: "danger-light",
103	border: "1px solid var(--gray-border)",
104	color: "danger",
105	disabled: {
106	color: "gray",
107	backgroundColor: "transparent"
108	}
109	},
110	warning: {
111	backgroundColor: "transparent",
112	hoverBackgroundColor: "warning-light",
113	border: "1px solid var(--gray-border)",
114	color: "warning",
115	disabled: {
116	color: "gray",
117	backgroundColor: "transparent"
118	}
119	}
120	},
121	text: {
122	primary: {
123	backgroundColor: "transparent",
124	hoverBackgroundColor: "primary-light",
125	border: "none",
126	color: "primary",
127	disabled: {
128	color: "gray",
129	backgroundColor: "transparent"
130	}
131	},
132	danger: {
133	backgroundColor: "transparent",
134	hoverBackgroundColor: "danger-light",
135	border: "none",
136	color: "danger",
137	disabled: {
138	color: "gray",
139	backgroundColor: "transparent"
140	}
141	},
142	dark: {
143	backgroundColor: "dark",
144	hoverBackgroundColor: "meteorite-gray",
145	border: "1px solid var(--light)",
146	color: "white",
147	disabled: {
148	color: "gray",
149	backgroundColor: "transparent"
150	}
151	},
152	warning: {
153	backgroundColor: "transparent",
154	hoverBackgroundColor: "warning-light",
155	border: "none",
156	color: "warning",
157	disabled: {
158	color: "gray",
159	backgroundColor: "transparent"
160	}
161	}
162	}
163	};
164