customThemeExample.ts41 lines · main

1	const defaults = {
2	brandBackground: 'bg-black',
3	size: {
4	text: {
5	tiny: 'text-xs',
6	small: 'text-sm leading-4',
7	medium: 'text-sm',
8	large: 'text-base',
9	xlarge: 'text-base',
10	},
11	padding: {
12	tiny: 'px-2.5 py-1.5',
13	small: 'px-3 py-2',
14	medium: 'px-4 py-2',
15	large: 'px-4 py-2',
16	xlarge: 'px-6 py-3',
17	},
18	},
19	}
20
21	// simple settings
22
23	// advanced settings
24
25	// Compiled default used for data inputs and buttons
26
27	const default__padding_and_text = {
28	tiny: `${defaults.size.text.tiny} ${defaults.size.padding.tiny}`,
29	small: `${defaults.size.text.small} ${defaults.size.padding.small}`,
30	medium: `${defaults.size.text.medium} ${defaults.size.padding.medium}`,
31	large: `${defaults.size.text.large} ${defaults.size.padding.large}`,
32	xlarge: `${defaults.size.text.xlarge} ${defaults.size.padding.xlarge}`,
33	}
34
35	export default {
36	button: {
37	type: {
38	primary: `${defaults.brandBackground} text-white hover:bg-brand-600 dark:hover:bg-brand`,
39	},
40	},
41	}