ark/global.css at main · rodrgds/ark · GitHub

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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
@import 'tailwindcss';
@import 'uniwind';

@import 'tw-animate-css';

@theme {
  --radius: 10px;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);

  --spacing-hairline: hairlineWidth();
}

@layer theme {
  :root {
    @variant oled {
      --color-text-50: #050316;
      --color-text-100: #0a062d;
      --color-text-200: #140c5a;
      --color-text-300: #1e1287;
      --color-text-400: #2818b4;
      --color-text-500: #321fe0;
      --color-text-600: #5b4be7;
      --color-text-700: #8478ed;
      --color-text-800: #ada5f3;
      --color-text-900: #d6d2f9;
      --color-text-950: #eae9fc;

      --color-background-50: #000000;
      --color-background-100: #1a1a1a;
      --color-background-200: #333333;
      --color-background-300: #4d4d4d;
      --color-background-400: #666666;
      --color-background-500: #808080;
      --color-background-600: #999999;
      --color-background-700: #b3b3b3;
      --color-background-800: #cccccc;
      --color-background-900: #e6e6e6;
      --color-background-950: #f2f2f2;

      --color-primary-50: #0d0d0d;
      --color-primary-100: #1a1a1a;
      --color-primary-200: #333333;
      --color-primary-300: #4d4d4d;
      --color-primary-400: #666666;
      --color-primary-500: #808080;
      --color-primary-600: #999999;
      --color-primary-700: #b3b3b3;
      --color-primary-800: #cccccc;
      --color-primary-900: #e6e6e6;
      --color-primary-950: #f2f2f2;

      --color-secondary-50: #000000;
      --color-secondary-100: #181d16;
      --color-secondary-200: #313a2c;
      --color-secondary-300: #495742;
      --color-secondary-400: #627458;
      --color-secondary-500: #7a916e;
      --color-secondary-600: #95a78b;
      --color-secondary-700: #afbda8;
      --color-secondary-800: #cad3c5;
      --color-secondary-900: #e4e9e2;
      --color-secondary-950: #f2f4f0;

      --color-accent-50: #000000;
      --color-accent-100: #19191a;
      --color-accent-200: #323234;
      --color-accent-300: #4b4b4e;
      --color-accent-400: #646468;
      --color-accent-500: #7d7d82;
      --color-accent-600: #97979b;
      --color-accent-700: #b1b1b4;
      --color-accent-800: #cbcbcd;
      --color-accent-900: #e5e5e6;
      --color-accent-950: #f2f2f3;

      --color-background: var(--color-background-50);
      --color-foreground: var(--color-text-950);
      --color-card: var(--color-secondary-50);
      --color-card-foreground: var(--color-text-950);
      --color-popover: var(--color-secondary-50);
      --color-popover-foreground: var(--color-text-950);
      --color-primary: var(--color-secondary-600);
      --color-primary-foreground: var(--color-secondary-50);
      --color-secondary: var(--color-secondary-300);
      --color-secondary-foreground: var(--color-secondary-950);
      --color-muted: var(--color-secondary-100);
      --color-muted-foreground: var(--color-secondary-700);
      --color-accent: var(--color-secondary-400);
      --color-accent-foreground: var(--color-secondary-950);
      --color-destructive: #f87171;
      --color-border: var(--color-secondary-200);
      --color-input: var(--color-secondary-200);
      --color-ring: var(--color-secondary-600);
      --color-chart-1: var(--color-secondary-600);
      --color-chart-2: #f87171;
      --color-chart-3: var(--color-primary-800);
      --color-chart-4: var(--color-accent-600);
      --color-chart-5: var(--color-secondary-800);
      --color-sidebar: var(--color-background-50);
      --color-sidebar-foreground: var(--color-text-950);
      --color-sidebar-primary: var(--color-secondary-600);
      --color-sidebar-primary-foreground: var(--color-secondary-50);
      --color-sidebar-accent: var(--color-secondary-100);
      --color-sidebar-accent-foreground: var(--color-text-950);
      --color-sidebar-border: var(--color-secondary-200);
      --color-sidebar-ring: var(--color-secondary-600);
    }

    @variant light {
      --color-text-50: #eae9fc;
      --color-text-100: #d6d2f9;
      --color-text-200: #ada5f3;
      --color-text-300: #8478ed;
      --color-text-400: #5b4be7;
      --color-text-500: #321fe0;
      --color-text-600: #2818b4;
      --color-text-700: #1e1287;
      --color-text-800: #140c5a;
      --color-text-900: #0a062d;
      --color-text-950: #050316;

      --color-background-50: #f2f2f2;
      --color-background-100: #e6e6e6;
      --color-background-200: #cccccc;
      --color-background-300: #b3b3b3;
      --color-background-400: #999999;
      --color-background-500: #808080;
      --color-background-600: #666666;
      --color-background-700: #4d4d4d;
      --color-background-800: #333333;
      --color-background-900: #1a1a1a;
      --color-background-950: #0d0d0d;

      --color-primary-50: #f2f2f2;
      --color-primary-100: #e6e6e6;
      --color-primary-200: #cccccc;
      --color-primary-300: #b3b3b3;
      --color-primary-400: #999999;
      --color-primary-500: #808080;
      --color-primary-600: #666666;
      --color-primary-700: #4d4d4d;
      --color-primary-800: #333333;
      --color-primary-900: #1a1a1a;
      --color-primary-950: #0d0d0d;

      --color-secondary-50: #f2f4f0;
      --color-secondary-100: #e5e9e2;
      --color-secondary-200: #cad3c5;
      --color-secondary-300: #b0bda8;
      --color-secondary-400: #95a78b;
      --color-secondary-500: #7b916e;
      --color-secondary-600: #627458;
      --color-secondary-700: #4a5742;
      --color-secondary-800: #313a2c;
      --color-secondary-900: #191d16;
      --color-secondary-950: #0c0f0b;

      --color-accent-50: #f2f2f3;
      --color-accent-100: #e5e5e6;
      --color-accent-200: #cbcbcd;
      --color-accent-300: #b1b1b4;
      --color-accent-400: #97979b;
      --color-accent-500: #7d7d82;
      --color-accent-600: #646468;
      --color-accent-700: #4b4b4e;
      --color-accent-800: #323234;
      --color-accent-900: #19191a;
      --color-accent-950: #0c0c0d;

      --color-background: var(--color-background-50);
      --color-foreground: var(--color-text-950);
      --color-card: var(--color-secondary-50);
      --color-card-foreground: var(--color-text-950);
      --color-popover: var(--color-secondary-50);
      --color-popover-foreground: var(--color-text-950);
      --color-primary: var(--color-secondary-700);
      --color-primary-foreground: var(--color-secondary-50);
      --color-secondary: var(--color-secondary-100);
      --color-secondary-foreground: var(--color-secondary-950);
      --color-muted: var(--color-secondary-100);
      --color-muted-foreground: var(--color-secondary-700);
      --color-accent: var(--color-secondary-200);
      --color-accent-foreground: var(--color-secondary-950);
      --color-destructive: #b42318;
      --color-border: var(--color-secondary-200);
      --color-input: var(--color-secondary-200);
      --color-ring: var(--color-secondary-600);
      --color-chart-1: var(--color-secondary-600);
      --color-chart-2: #b42318;
      --color-chart-3: var(--color-primary-800);
      --color-chart-4: var(--color-accent-500);
      --color-chart-5: var(--color-secondary-400);
      --color-sidebar: var(--color-background-100);
      --color-sidebar-foreground: var(--color-text-950);
      --color-sidebar-primary: var(--color-secondary-700);
      --color-sidebar-primary-foreground: var(--color-secondary-50);
      --color-sidebar-accent: var(--color-secondary-100);
      --color-sidebar-accent-foreground: var(--color-secondary-950);
      --color-sidebar-border: var(--color-secondary-200);
      --color-sidebar-ring: var(--color-secondary-600);
    }

    @variant dark {
      --color-text-50: #050316;
      --color-text-100: #0a062d;
      --color-text-200: #140c5a;
      --color-text-300: #1e1287;
      --color-text-400: #2818b4;
      --color-text-500: #321fe0;
      --color-text-600: #5b4be7;
      --color-text-700: #8478ed;
      --color-text-800: #ada5f3;
      --color-text-900: #d6d2f9;
      --color-text-950: #eae9fc;

      --color-background-50: #0d0d0d;
      --color-background-100: #1a1a1a;
      --color-background-200: #333333;
      --color-background-300: #4d4d4d;
      --color-background-400: #666666;
      --color-background-500: #808080;
      --color-background-600: #999999;
      --color-background-700: #b3b3b3;
      --color-background-800: #cccccc;
      --color-background-900: #e6e6e6;
      --color-background-950: #f2f2f2;

      --color-primary-50: #0d0d0d;
      --color-primary-100: #1a1a1a;
      --color-primary-200: #333333;
      --color-primary-300: #4d4d4d;
      --color-primary-400: #666666;
      --color-primary-500: #808080;
      --color-primary-600: #999999;
      --color-primary-700: #b3b3b3;
      --color-primary-800: #cccccc;
      --color-primary-900: #e6e6e6;
      --color-primary-950: #f2f2f2;

      --color-secondary-50: #0c0f0b;
      --color-secondary-100: #181d16;
      --color-secondary-200: #313a2c;
      --color-secondary-300: #495742;
      --color-secondary-400: #627458;
      --color-secondary-500: #7a916e;
      --color-secondary-600: #95a78b;
      --color-secondary-700: #afbda8;
      --color-secondary-800: #cad3c5;
      --color-secondary-900: #e4e9e2;
      --color-secondary-950: #f2f4f0;

      --color-accent-50: #0c0c0d;
      --color-accent-100: #19191a;
      --color-accent-200: #323234;
      --color-accent-300: #4b4b4e;
      --color-accent-400: #646468;
      --color-accent-500: #7d7d82;
      --color-accent-600: #97979b;
      --color-accent-700: #b1b1b4;
      --color-accent-800: #cbcbcd;
      --color-accent-900: #e5e5e6;
      --color-accent-950: #f2f2f3;

      --color-background: var(--color-background-100);
      --color-foreground: var(--color-text-950);
      --color-card: var(--color-secondary-100);
      --color-card-foreground: var(--color-text-950);
      --color-popover: var(--color-secondary-100);
      --color-popover-foreground: var(--color-text-950);
      --color-primary: var(--color-secondary-600);
      --color-primary-foreground: var(--color-secondary-50);
      --color-secondary: var(--color-secondary-300);
      --color-secondary-foreground: var(--color-secondary-950);
      --color-muted: var(--color-secondary-200);
      --color-muted-foreground: var(--color-secondary-700);
      --color-accent: var(--color-secondary-400);
      --color-accent-foreground: var(--color-secondary-950);
      --color-destructive: #f87171;
      --color-border: var(--color-secondary-300);
      --color-input: var(--color-secondary-300);
      --color-ring: var(--color-secondary-600);
      --color-chart-1: var(--color-secondary-600);
      --color-chart-2: #f87171;
      --color-chart-3: var(--color-primary-800);
      --color-chart-4: var(--color-accent-600);
      --color-chart-5: var(--color-secondary-800);
      --color-sidebar: var(--color-background-100);
      --color-sidebar-foreground: var(--color-text-950);
      --color-sidebar-primary: var(--color-secondary-600);
      --color-sidebar-primary-foreground: var(--color-secondary-50);
      --color-sidebar-accent: var(--color-secondary-200);
      --color-sidebar-accent-foreground: var(--color-text-950);
      --color-sidebar-border: var(--color-secondary-300);
      --color-sidebar-ring: var(--color-secondary-600);
    }
  }
}