-
Notifications
You must be signed in to change notification settings - Fork 36
/
var-theme.ts
187 lines (175 loc) · 6.41 KB
/
var-theme.ts
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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
import {
BackgroundVariables,
BaseColorsVariable,
ColorsVariables,
PalleteVariables,
TextVariables,
ThemeVariables,
} from "../types/variables.types";
import { applyOpacityValue } from "../utils/applyOpacityValue";
const blue: ColorsVariables<"blue"> = {
"blue-1": applyOpacityValue("--blue-1"),
"blue-2": applyOpacityValue("--blue-2"),
"blue-3": applyOpacityValue("--blue-3"),
"blue-4": applyOpacityValue("--blue-4"),
"blue-5": applyOpacityValue("--blue-5"),
"blue-6": applyOpacityValue("--blue-6"),
"blue-7": applyOpacityValue("--blue-7"),
"blue-8": applyOpacityValue("--blue-8"),
"blue-9": applyOpacityValue("--blue-9"),
"blue-10": applyOpacityValue("--blue-10"),
"blue-11": applyOpacityValue("--blue-11"),
"blue-12": applyOpacityValue("--blue-12"),
};
const green: ColorsVariables<"green"> = {
"green-1": applyOpacityValue("--green-1"),
"green-2": applyOpacityValue("--green-2"),
"green-3": applyOpacityValue("--green-3"),
"green-4": applyOpacityValue("--green-4"),
"green-5": applyOpacityValue("--green-5"),
"green-6": applyOpacityValue("--green-6"),
"green-7": applyOpacityValue("--green-7"),
"green-8": applyOpacityValue("--green-8"),
"green-9": applyOpacityValue("--green-9"),
"green-10": applyOpacityValue("--green-10"),
"green-11": applyOpacityValue("--green-11"),
"green-12": applyOpacityValue("--green-12"),
};
const cyan: ColorsVariables<"cyan"> = {
"cyan-1": applyOpacityValue("--cyan-1"),
"cyan-2": applyOpacityValue("--cyan-2"),
"cyan-3": applyOpacityValue("--cyan-3"),
"cyan-4": applyOpacityValue("--cyan-4"),
"cyan-5": applyOpacityValue("--cyan-5"),
"cyan-6": applyOpacityValue("--cyan-6"),
"cyan-7": applyOpacityValue("--cyan-7"),
"cyan-8": applyOpacityValue("--cyan-8"),
"cyan-9": applyOpacityValue("--cyan-9"),
"cyan-10": applyOpacityValue("--cyan-10"),
"cyan-11": applyOpacityValue("--cyan-11"),
"cyan-12": applyOpacityValue("--cyan-12"),
};
const gray: ColorsVariables<"gray"> = {
"gray-1": applyOpacityValue("--gray-1"),
"gray-2": applyOpacityValue("--gray-2"),
"gray-3": applyOpacityValue("--gray-3"),
"gray-4": applyOpacityValue("--gray-4"),
"gray-5": applyOpacityValue("--gray-5"),
"gray-6": applyOpacityValue("--gray-6"),
"gray-7": applyOpacityValue("--gray-7"),
"gray-8": applyOpacityValue("--gray-8"),
"gray-9": applyOpacityValue("--gray-9"),
"gray-10": applyOpacityValue("--gray-10"),
"gray-11": applyOpacityValue("--gray-11"),
"gray-12": applyOpacityValue("--gray-12"),
};
const pink: ColorsVariables<"pink"> = {
"pink-1": applyOpacityValue("--pink-1"),
"pink-2": applyOpacityValue("--pink-2"),
"pink-3": applyOpacityValue("--pink-3"),
"pink-4": applyOpacityValue("--pink-4"),
"pink-5": applyOpacityValue("--pink-5"),
"pink-6": applyOpacityValue("--pink-6"),
"pink-7": applyOpacityValue("--pink-7"),
"pink-8": applyOpacityValue("--pink-8"),
"pink-9": applyOpacityValue("--pink-9"),
"pink-10": applyOpacityValue("--pink-10"),
"pink-11": applyOpacityValue("--pink-11"),
"pink-12": applyOpacityValue("--pink-12"),
};
const purple: ColorsVariables<"purple"> = {
"purple-1": applyOpacityValue("--purple-1"),
"purple-2": applyOpacityValue("--purple-2"),
"purple-3": applyOpacityValue("--purple-3"),
"purple-4": applyOpacityValue("--purple-4"),
"purple-5": applyOpacityValue("--purple-5"),
"purple-6": applyOpacityValue("--purple-6"),
"purple-7": applyOpacityValue("--purple-7"),
"purple-8": applyOpacityValue("--purple-8"),
"purple-9": applyOpacityValue("--purple-9"),
"purple-10": applyOpacityValue("--purple-10"),
"purple-11": applyOpacityValue("--purple-11"),
"purple-12": applyOpacityValue("--purple-12"),
};
const yellow: ColorsVariables<"yellow"> = {
"yellow-1": applyOpacityValue("--yellow-1"),
"yellow-2": applyOpacityValue("--yellow-2"),
"yellow-3": applyOpacityValue("--yellow-3"),
"yellow-4": applyOpacityValue("--yellow-4"),
"yellow-5": applyOpacityValue("--yellow-5"),
"yellow-6": applyOpacityValue("--yellow-6"),
"yellow-7": applyOpacityValue("--yellow-7"),
"yellow-8": applyOpacityValue("--yellow-8"),
"yellow-9": applyOpacityValue("--yellow-9"),
"yellow-10": applyOpacityValue("--yellow-10"),
"yellow-11": applyOpacityValue("--yellow-11"),
"yellow-12": applyOpacityValue("--yellow-12"),
};
const red: ColorsVariables<"red"> = {
"red-1": applyOpacityValue("--red-1"),
"red-2": applyOpacityValue("--red-2"),
"red-3": applyOpacityValue("--red-3"),
"red-4": applyOpacityValue("--red-4"),
"red-5": applyOpacityValue("--red-5"),
"red-6": applyOpacityValue("--red-6"),
"red-7": applyOpacityValue("--red-7"),
"red-8": applyOpacityValue("--red-8"),
"red-9": applyOpacityValue("--red-9"),
"red-10": applyOpacityValue("--red-10"),
"red-11": applyOpacityValue("--red-11"),
"red-12": applyOpacityValue("--red-12"),
};
const slate: ColorsVariables<"slate"> = {
"slate-1": applyOpacityValue("--slate-1"),
"slate-2": applyOpacityValue("--slate-2"),
"slate-3": applyOpacityValue("--slate-3"),
"slate-4": applyOpacityValue("--slate-4"),
"slate-5": applyOpacityValue("--slate-5"),
"slate-6": applyOpacityValue("--slate-6"),
"slate-7": applyOpacityValue("--slate-7"),
"slate-8": applyOpacityValue("--slate-8"),
"slate-9": applyOpacityValue("--slate-9"),
"slate-10": applyOpacityValue("--slate-10"),
"slate-11": applyOpacityValue("--slate-11"),
"slate-12": applyOpacityValue("--slate-12"),
};
const background: BackgroundVariables = {
backgroundPrimary: applyOpacityValue("--backgroundPrimary"),
backgroundSecondary: applyOpacityValue("--backgroundSecondary"),
border: applyOpacityValue("--border"),
};
const text: TextVariables = {
content1: applyOpacityValue("--content1"),
content2: applyOpacityValue("--content2"),
content3: applyOpacityValue("--content3"),
whiteInverted: applyOpacityValue("--whiteInverted"),
blackInverted: applyOpacityValue("--blackInverted"),
};
const baseColors: BaseColorsVariable = {
neutral: applyOpacityValue("--neutral"),
primary: applyOpacityValue("--primary"),
secondary: applyOpacityValue("--secondary"),
success: applyOpacityValue("--success"),
error: applyOpacityValue("--error"),
warning: applyOpacityValue("--warning"),
info: applyOpacityValue("--info"),
};
const pallete: PalleteVariables = {
...blue,
...purple,
...green,
...yellow,
...red,
...cyan,
...pink,
...gray,
...slate,
};
export const varTheme: ThemeVariables = {
colors: {
...background,
...text,
...baseColors,
...pallete,
},
};