-
Notifications
You must be signed in to change notification settings - Fork 26
/
Copy pathtailwind.theme.cjs
executable file
·127 lines (119 loc) · 5.03 KB
/
tailwind.theme.cjs
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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
const lightTheme = {
/* 🔵 - Yearn Finance ******************************************************
** These are the colors you will use the most and will make up the majority
** of your UI. Use them for most of your text, backgrounds, and borders,
** as well as for things like secondary buttons and links.
**************************************************************************/
'--color-neutral-0': '0 0% 100%',
'--color-neutral-100': '220 50% 98%',
'--color-neutral-200': '220 47% 97%',
'--color-neutral-300': '220 100% 94%',
'--color-neutral-400': '220 27% 85%',
'--color-neutral-500': '220 22% 36%',
'--color-neutral-600': '220 22% 25%',
'--color-neutral-700': '220 100% 14%',
'--color-neutral-800': '0 0% 8%',
'--color-neutral-900': '0 0% 0%',
/* 🔵 - Yearn Finance ******************************************************
** These are the splashes of color that should appear the most in your UI,
** and are the ones that determine the overall "look" of the site. Use
** these for things like primary actions, links, navigation items, icons,
** accent borders, or text you want to emphasize.
**************************************************************************/
'--color-primary-100': '220 100% 94%',
'--color-primary-200': '220 81% 88%',
'--color-primary-500': '220 95% 50%',
'--color-primary-600': '220 100% 44%',
'--color-accent-500': '220 95% 50%',
'--color-accent-600': '220 100% 44%',
/* 🔵 - Yearn Finance ******************************************************
** These colors should be used fairly conservatively throughout your UI to
** avoid overpowering your primary colors. Use them when you need an
** element to stand out, or to reinforce things like error states or
** positive trends with the appropriate semantic color.
**************************************************************************/
'--color-yellow-900': '32 100% 45%',
'--color-yellow-300': '32 100% 95%',
'--color-yellow-200': '32 100% 90%',
'--color-pink-900': '328 100% 45%',
'--color-pink-300': '328 100% 95%',
'--color-pink-200': '328 100% 90%',
'--color-red-900': '0 100% 45%',
'--color-red-300': '0 100% 95%',
'--color-red-200': '0 100% 90%',
}
const darkTheme = {
/* 🔵 - Yearn Finance ******************************************************
** These are the colors you will use the most and will make up the majority
** of your UI. Use them for most of your text, backgrounds, and borders,
** as well as for things like secondary buttons and links.
**************************************************************************/
'--color-neutral-0': '0 0% 0%',
'--color-neutral-100': '0 0% 10%',
'--color-neutral-200': '0 0% 8%',
'--color-neutral-300': '0 0% 15%',
'--color-neutral-400': '0 0% 66%',
'--color-neutral-500': '0 0% 100%',
'--color-neutral-600': '0 0% 13%',
'--color-neutral-700': '0 0% 100%',
'--color-neutral-800': '0 0% 8%',
'--color-neutral-900': '0 0% 100%',
/* 🔵 - Yearn Finance ******************************************************
** These are the splashes of color that should appear the most in your UI,
** and are the ones that determine the overall "look" of the site. Use
** these for things like primary actions, links, navigation items, icons,
** accent borders, or text you want to emphasize.
**************************************************************************/
'--color-primary-100': '0 0% 15%',
'--color-primary-200': '0 0% 13%',
'--color-primary-500': '0 0% 100%',
'--color-primary-600': '0 0% 90%',
'--color-accent-500': '220 95% 50%',
'--color-accent-600': '220 100% 44%',
/* 🔵 - Yearn Finance ******************************************************
** These colors should be used fairly conservatively throughout your UI to
** avoid overpowering your primary colors. Use them when you need an
** element to stand out, or to reinforce things like error states or
** positive trends with the appropriate semantic color.
**************************************************************************/
'--color-yellow-900': '32 100% 45%',
'--color-yellow-300': '32 100% 95%',
'--color-yellow-200': '32 100% 90%',
'--color-pink-900': '328 100% 45%',
'--color-pink-300': '328 100% 95%',
'--color-pink-200': '328 100% 90%',
'--color-red-900': '0 100% 45%',
'--color-red-300': '0 100% 95%',
'--color-red-200': '0 100% 90%',
}
const colors = {
...lightTheme, //default
'@media (prefers-color-scheme: light)': {
'& body[data-theme="system-prefs"]': {
...lightTheme
}
},
'@media (prefers-color-scheme: dark)': {
'& body[data-theme="system-prefs"]': {
...darkTheme
}
},
'& body[data-theme="light"]': {
...lightTheme
},
'& body[data-theme="dark"]': {
...darkTheme
}
};
//Not implemented yet
const paddings = {
'--padding-none': '0rem', //0px | p-0
'--padding-tightest': '0.125rem', //2px | p-0.5
'--padding-tighter': '0.25rem', //4px | p-1
'--padding-tight': '0.5rem', //8px | p-2
'--padding-normal': '1rem', //16px | p-4
'--padding-wide': '1.5rem', //24px | p-6
'--padding-wider': '2rem', //32px | p-8
'--padding-widest': '3rem' //48px | p-12
};
module.exports = {colors, paddings};