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

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

164 lines 3.6 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