@ekkolyth/ui 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/catpuccin/frappe.css +35 -0
- package/dist/catpuccin/latte.css +35 -0
- package/dist/catpuccin/macchiato.css +35 -0
- package/dist/catpuccin/mocha.css +35 -0
- package/dist/convergence.css +70 -0
- package/dist/ekko-os.css +71 -0
- package/dist/tanstack.js +1 -1
- package/dist/themes.css +101 -0
- package/dist/tokyo-night.css +35 -0
- package/package.json +10 -2
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Catppuccin Frappe Theme - Dark Mode (Mauve accent) */
|
|
2
|
+
html[data-theme="frappe"] {
|
|
3
|
+
--radius: 0.625rem;
|
|
4
|
+
--background: hsl(229 18.64% 23.14%); /* base */
|
|
5
|
+
--foreground: hsl(227 70.15% 86.86%); /* text */
|
|
6
|
+
--card: hsl(229 18.64% 23.14%); /* base */
|
|
7
|
+
--card-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
8
|
+
--popover: hsl(229 18.64% 23.14%); /* base */
|
|
9
|
+
--popover-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
10
|
+
--primary: hsl(277 59.02% 76.08%); /* accent - Mauve */
|
|
11
|
+
--primary-foreground: hsl(229 18.64% 23.14%); /* base */
|
|
12
|
+
--secondary: hsl(230 15.58% 30.20%); /* surface0 */
|
|
13
|
+
--secondary-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
14
|
+
--muted: hsl(230 15.58% 30.20%); /* surface0 */
|
|
15
|
+
--muted-foreground: hsl(227 43.69% 79.80%); /* subtext1 */
|
|
16
|
+
--accent: hsl(230 15.58% 30.20%); /* surface0 */
|
|
17
|
+
--accent-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
18
|
+
--destructive: hsl(359 67.79% 70.78%); /* red */
|
|
19
|
+
--border: hsl(227 14.74% 37.25%); /* surface1 */
|
|
20
|
+
--input: hsl(227 14.74% 37.25%); /* surface1 */
|
|
21
|
+
--ring: hsl(227 70.15% 86.86%); /* text */
|
|
22
|
+
--chart-1: hsl(341 18.43% 40.00%); /* red */
|
|
23
|
+
--chart-2: hsl(191 18.43% 39.22%); /* teal */
|
|
24
|
+
--chart-3: hsl(224 23.53% 43.53%); /* blue */
|
|
25
|
+
--chart-4: hsl(31 9.41% 43.53%); /* yellow */
|
|
26
|
+
--chart-5: hsl(126 9.41% 41.18%); /* green */
|
|
27
|
+
--sidebar: hsl(229 18.82% 21.96%); /* mantle */
|
|
28
|
+
--sidebar-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
29
|
+
--sidebar-primary: hsl(277 59.02% 76.08%); /* accent - Mauve */
|
|
30
|
+
--sidebar-primary-foreground: hsl(229 18.64% 23.14%); /* base */
|
|
31
|
+
--sidebar-accent: hsl(229 18.64% 23.14%); /* surface0 */
|
|
32
|
+
--sidebar-accent-foreground: hsl(227 70.15% 86.86%); /* text */
|
|
33
|
+
--sidebar-border: hsl(227 14.74% 37.25%); /* surface1 */
|
|
34
|
+
--sidebar-ring: hsl(227 14.74% 37.25%); /* surface1 */
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Catppuccin Latte Theme - Light Mode (Mauve accent) */
|
|
2
|
+
html[data-theme="latte"] {
|
|
3
|
+
--radius: 0.625rem;
|
|
4
|
+
--background: hsl(220 23.08% 94.90%); /* base */
|
|
5
|
+
--foreground: hsl(234 16.02% 35.49%); /* text */
|
|
6
|
+
--card: hsl(220 23.08% 94.90%); /* base */
|
|
7
|
+
--card-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
8
|
+
--popover: hsl(220 23.08% 94.90%); /* base */
|
|
9
|
+
--popover-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
10
|
+
--primary: hsl(266 85.05% 58.04%); /* accent - Mauve */
|
|
11
|
+
--primary-foreground: hsl(220 23.08% 94.90%); /* base */
|
|
12
|
+
--secondary: hsl(223 15.91% 82.75%); /* surface0 */
|
|
13
|
+
--secondary-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
14
|
+
--muted: hsl(223 15.91% 82.75%); /* surface0 */
|
|
15
|
+
--muted-foreground: hsl(233 12.80% 41.37%); /* subtext1 */
|
|
16
|
+
--accent: hsl(223 15.91% 82.75%); /* surface0 */
|
|
17
|
+
--accent-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
18
|
+
--destructive: hsl(347 86.67% 44.12%); /* red */
|
|
19
|
+
--border: hsl(225 13.56% 76.86%); /* surface1 */
|
|
20
|
+
--input: hsl(225 13.56% 76.86%); /* surface1 */
|
|
21
|
+
--ring: hsl(234 16.02% 35.49%); /* text */
|
|
22
|
+
--chart-1: hsl(345 57.65% 74.12%); /* red */
|
|
23
|
+
--chart-2: hsl(185 37.25% 70.59%); /* teal */
|
|
24
|
+
--chart-3: hsl(219 81.96% 78.43%); /* blue */
|
|
25
|
+
--chart-4: hsl(35 61.18% 76.86%); /* yellow */
|
|
26
|
+
--chart-5: hsl(113 32.94% 73.33%); /* green */
|
|
27
|
+
--sidebar: hsl(218 25.10% 93.73%); /* mantle */
|
|
28
|
+
--sidebar-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
29
|
+
--sidebar-primary: hsl(266 85.05% 58.04%); /* accent - Mauve */
|
|
30
|
+
--sidebar-primary-foreground: hsl(220 23.08% 94.90%); /* base */
|
|
31
|
+
--sidebar-accent: hsl(220 23.08% 94.90%); /* surface0 */
|
|
32
|
+
--sidebar-accent-foreground: hsl(234 16.02% 35.49%); /* text */
|
|
33
|
+
--sidebar-border: hsl(225 13.56% 76.86%); /* surface1 */
|
|
34
|
+
--sidebar-ring: hsl(225 13.56% 76.86%); /* surface1 */
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Catppuccin Macchiato Theme - Dark Mode (Mauve accent) */
|
|
2
|
+
html[data-theme="macchiato"] {
|
|
3
|
+
--radius: 0.625rem;
|
|
4
|
+
--background: hsl(232 23.40% 18.43%); /* base */
|
|
5
|
+
--foreground: hsl(227 68.25% 87.65%); /* text */
|
|
6
|
+
--card: hsl(232 23.40% 18.43%); /* base */
|
|
7
|
+
--card-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
8
|
+
--popover: hsl(232 23.40% 18.43%); /* base */
|
|
9
|
+
--popover-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
10
|
+
--primary: hsl(267 82.69% 79.61%); /* accent - Mauve */
|
|
11
|
+
--primary-foreground: hsl(232 23.40% 18.43%); /* base */
|
|
12
|
+
--secondary: hsl(230 18.80% 26.08%); /* surface0 */
|
|
13
|
+
--secondary-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
14
|
+
--muted: hsl(230 18.80% 26.08%); /* surface0 */
|
|
15
|
+
--muted-foreground: hsl(228 39.22% 80.00%); /* subtext1 */
|
|
16
|
+
--accent: hsl(230 18.80% 26.08%); /* surface0 */
|
|
17
|
+
--accent-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
18
|
+
--destructive: hsl(351 73.91% 72.94%); /* red */
|
|
19
|
+
--border: hsl(231 15.61% 33.92%); /* surface1 */
|
|
20
|
+
--input: hsl(231 15.61% 33.92%); /* surface1 */
|
|
21
|
+
--ring: hsl(227 68.25% 87.65%); /* text */
|
|
22
|
+
--chart-1: hsl(333 20.78% 38.04%); /* red */
|
|
23
|
+
--chart-2: hsl(193 19.61% 38.04%); /* teal */
|
|
24
|
+
--chart-3: hsl(224 26.67% 41.18%); /* blue */
|
|
25
|
+
--chart-4: hsl(30 8.24% 42.35%); /* yellow */
|
|
26
|
+
--chart-5: hsl(139 10.98% 38.82%); /* green */
|
|
27
|
+
--sidebar: hsl(234 22.75% 17.25%); /* mantle */
|
|
28
|
+
--sidebar-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
29
|
+
--sidebar-primary: hsl(267 82.69% 79.61%); /* accent - Mauve */
|
|
30
|
+
--sidebar-primary-foreground: hsl(232 23.40% 18.43%); /* base */
|
|
31
|
+
--sidebar-accent: hsl(232 23.40% 18.43%); /* surface0 */
|
|
32
|
+
--sidebar-accent-foreground: hsl(227 68.25% 87.65%); /* text */
|
|
33
|
+
--sidebar-border: hsl(231 15.61% 33.92%); /* surface1 */
|
|
34
|
+
--sidebar-ring: hsl(231 15.61% 33.92%); /* surface1 */
|
|
35
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Catppuccin Mocha Theme - Dark Mode (Mauve accent) */
|
|
2
|
+
html[data-theme="mocha"] {
|
|
3
|
+
--radius: 0.625rem;
|
|
4
|
+
--background: hsl(240 21.05% 14.90%); /* base */
|
|
5
|
+
--foreground: hsl(226 63.93% 88.04%); /* text */
|
|
6
|
+
--card: hsl(240 21.05% 14.90%); /* base */
|
|
7
|
+
--card-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
8
|
+
--popover: hsl(240 21.05% 14.90%); /* base */
|
|
9
|
+
--popover-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
10
|
+
--primary: hsl(267 83.51% 80.98%); /* accent - Mauve */
|
|
11
|
+
--primary-foreground: hsl(240 21.05% 14.90%); /* base */
|
|
12
|
+
--secondary: hsl(237 16.24% 22.94%); /* surface0 */
|
|
13
|
+
--secondary-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
14
|
+
--muted: hsl(237 16.24% 22.94%); /* surface0 */
|
|
15
|
+
--muted-foreground: hsl(227 35.29% 80.00%); /* subtext1 */
|
|
16
|
+
--accent: hsl(237 16.24% 22.94%); /* surface0 */
|
|
17
|
+
--accent-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
18
|
+
--destructive: hsl(343 81.25% 74.90%); /* red */
|
|
19
|
+
--border: hsl(234 13.21% 31.18%); /* surface1 */
|
|
20
|
+
--input: hsl(234 13.21% 31.18%); /* surface1 */
|
|
21
|
+
--ring: hsl(226 63.93% 88.04%); /* text */
|
|
22
|
+
--chart-1: hsl(329 21.57% 37.25%); /* red */
|
|
23
|
+
--chart-2: hsl(188 18.82% 37.25%); /* teal */
|
|
24
|
+
--chart-3: hsl(221 27.45% 39.61%); /* blue */
|
|
25
|
+
--chart-4: hsl(30 9.41% 42.35%); /* yellow */
|
|
26
|
+
--chart-5: hsl(139 12.94% 38.04%); /* green */
|
|
27
|
+
--sidebar: hsl(240 21.18% 14.12%); /* mantle */
|
|
28
|
+
--sidebar-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
29
|
+
--sidebar-primary: hsl(267 83.51% 80.98%); /* accent - Mauve */
|
|
30
|
+
--sidebar-primary-foreground: hsl(240 21.05% 14.90%); /* base */
|
|
31
|
+
--sidebar-accent: hsl(240 21.05% 14.90%); /* surface0 */
|
|
32
|
+
--sidebar-accent-foreground: hsl(226 63.93% 88.04%); /* text */
|
|
33
|
+
--sidebar-border: hsl(234 13.21% 31.18%); /* surface1 */
|
|
34
|
+
--sidebar-ring: hsl(234 13.21% 31.18%); /* surface1 */
|
|
35
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/* Convergence - Light */
|
|
2
|
+
html[data-theme="light"] {
|
|
3
|
+
--background: oklch(1 0 0);
|
|
4
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
5
|
+
--card: oklch(1 0 0);
|
|
6
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
7
|
+
--popover: oklch(1 0 0);
|
|
8
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
9
|
+
--primary: oklch(0.51 0.23 277);
|
|
10
|
+
--primary-foreground: oklch(0.96 0.02 272);
|
|
11
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
12
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
13
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
14
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
15
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
16
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
17
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
18
|
+
--border: oklch(0.92 0.004 286.32);
|
|
19
|
+
--input: oklch(0.92 0.004 286.32);
|
|
20
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
21
|
+
--chart-1: oklch(0.79 0.1 275);
|
|
22
|
+
--chart-2: oklch(0.68 0.16 277);
|
|
23
|
+
--chart-3: oklch(0.59 0.2 277);
|
|
24
|
+
--chart-4: oklch(0.51 0.23 277);
|
|
25
|
+
--chart-5: oklch(0.46 0.21 277);
|
|
26
|
+
--radius: 0.45rem;
|
|
27
|
+
--sidebar: oklch(0.985 0 0);
|
|
28
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
29
|
+
--sidebar-primary: oklch(0.51 0.23 277);
|
|
30
|
+
--sidebar-primary-foreground: oklch(0.96 0.02 272);
|
|
31
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
32
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
33
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
34
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Convergence - Dark */
|
|
38
|
+
html[data-theme="dark"] {
|
|
39
|
+
--background: oklch(0.141 0.005 285.823);
|
|
40
|
+
--foreground: oklch(0.985 0 0);
|
|
41
|
+
--card: oklch(0.21 0.006 285.885);
|
|
42
|
+
--card-foreground: oklch(0.985 0 0);
|
|
43
|
+
--popover: oklch(0.21 0.006 285.885);
|
|
44
|
+
--popover-foreground: oklch(0.985 0 0);
|
|
45
|
+
--primary: oklch(0.59 0.2 277);
|
|
46
|
+
--primary-foreground: oklch(0.96 0.02 272);
|
|
47
|
+
--secondary: oklch(0.274 0.006 286.033);
|
|
48
|
+
--secondary-foreground: oklch(0.985 0 0);
|
|
49
|
+
--muted: oklch(0.274 0.006 286.033);
|
|
50
|
+
--muted-foreground: oklch(0.705 0.015 286.067);
|
|
51
|
+
--accent: oklch(0.274 0.006 286.033);
|
|
52
|
+
--accent-foreground: oklch(0.985 0 0);
|
|
53
|
+
--destructive: oklch(0.704 0.191 22.216);
|
|
54
|
+
--border: oklch(1 0 0 / 10%);
|
|
55
|
+
--input: oklch(1 0 0 / 15%);
|
|
56
|
+
--ring: oklch(0.552 0.016 285.938);
|
|
57
|
+
--chart-1: oklch(0.79 0.1 275);
|
|
58
|
+
--chart-2: oklch(0.68 0.16 277);
|
|
59
|
+
--chart-3: oklch(0.59 0.2 277);
|
|
60
|
+
--chart-4: oklch(0.51 0.23 277);
|
|
61
|
+
--chart-5: oklch(0.46 0.21 277);
|
|
62
|
+
--sidebar: oklch(0.21 0.006 285.885);
|
|
63
|
+
--sidebar-foreground: oklch(0.985 0 0);
|
|
64
|
+
--sidebar-primary: oklch(0.68 0.16 277);
|
|
65
|
+
--sidebar-primary-foreground: oklch(0.96 0.02 272);
|
|
66
|
+
--sidebar-accent: oklch(0.274 0.006 286.033);
|
|
67
|
+
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
68
|
+
--sidebar-border: oklch(1 0 0 / 10%);
|
|
69
|
+
--sidebar-ring: oklch(0.552 0.016 285.938);
|
|
70
|
+
}
|
package/dist/ekko-os.css
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
/* EkkoOS - Light (from EkkoOS apps/web globals.css :root) */
|
|
2
|
+
html[data-theme="ekkoos-light"] {
|
|
3
|
+
--radius: 0.25rem;
|
|
4
|
+
--background: oklch(1 0 0);
|
|
5
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
6
|
+
--card: oklch(1 0 0);
|
|
7
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
8
|
+
--popover: oklch(1 0 0);
|
|
9
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
10
|
+
--primary: oklch(0.21 0.006 285.885);
|
|
11
|
+
--primary-foreground: oklch(0.985 0 0);
|
|
12
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
13
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
14
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
15
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
16
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
17
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
18
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
19
|
+
--border: oklch(0.92 0.004 286.32);
|
|
20
|
+
--input: oklch(0.92 0.004 286.32);
|
|
21
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
22
|
+
--chart-1: oklch(0.646 0.222 41.116);
|
|
23
|
+
--chart-2: oklch(0.6 0.118 184.704);
|
|
24
|
+
--chart-3: oklch(0.398 0.07 227.392);
|
|
25
|
+
--chart-4: oklch(0.828 0.189 84.429);
|
|
26
|
+
--chart-5: oklch(0.769 0.188 70.08);
|
|
27
|
+
--sidebar: oklch(0.985 0 0);
|
|
28
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
29
|
+
--sidebar-primary: oklch(0.21 0.006 285.885);
|
|
30
|
+
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
31
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
32
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
33
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
34
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* EkkoOS - Dark (from EkkoOS apps/web globals.css .dark - monochrome) */
|
|
38
|
+
html[data-theme="ekkoos-dark"] {
|
|
39
|
+
--radius: 0.25rem;
|
|
40
|
+
--background: oklch(0 0 0);
|
|
41
|
+
--foreground: oklch(1 0 0);
|
|
42
|
+
--card: oklch(0.05 0 0 / 0.8);
|
|
43
|
+
--card-foreground: oklch(1 0 0);
|
|
44
|
+
--popover: oklch(0.05 0 0);
|
|
45
|
+
--popover-foreground: oklch(1 0 0);
|
|
46
|
+
--primary: oklch(0.8 0 0);
|
|
47
|
+
--primary-foreground: oklch(0 0 0);
|
|
48
|
+
--secondary: oklch(0.1 0 0);
|
|
49
|
+
--secondary-foreground: oklch(0.9 0 0);
|
|
50
|
+
--muted: oklch(0.1 0 0);
|
|
51
|
+
--muted-foreground: oklch(0.6 0 0);
|
|
52
|
+
--accent: oklch(0.2 0 0);
|
|
53
|
+
--accent-foreground: oklch(1 0 0);
|
|
54
|
+
--destructive: oklch(0.62 0.25 29);
|
|
55
|
+
--border: oklch(0.15 0 0);
|
|
56
|
+
--input: oklch(0.08 0 0);
|
|
57
|
+
--ring: oklch(0.8 0 0);
|
|
58
|
+
--chart-1: oklch(0.9 0 0);
|
|
59
|
+
--chart-2: oklch(0.8 0 0);
|
|
60
|
+
--chart-3: oklch(0.7 0 0);
|
|
61
|
+
--chart-4: oklch(0.6 0 0);
|
|
62
|
+
--chart-5: oklch(0.5 0 0);
|
|
63
|
+
--sidebar: oklch(0 0 0);
|
|
64
|
+
--sidebar-foreground: oklch(1 0 0);
|
|
65
|
+
--sidebar-primary: oklch(0.8 0 0);
|
|
66
|
+
--sidebar-primary-foreground: oklch(0 0 0);
|
|
67
|
+
--sidebar-accent: oklch(0.2 0 0);
|
|
68
|
+
--sidebar-accent-foreground: oklch(0.9 0 0);
|
|
69
|
+
--sidebar-border: oklch(0.1 0 0);
|
|
70
|
+
--sidebar-ring: oklch(0.8 0 0);
|
|
71
|
+
}
|
package/dist/tanstack.js
CHANGED
|
@@ -2,7 +2,7 @@ import { createContext, useState, useEffect, useMemo, use } from 'react';
|
|
|
2
2
|
import { ScriptOnce } from '@tanstack/react-router';
|
|
3
3
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
4
|
|
|
5
|
-
// src/components/
|
|
5
|
+
// src/components/themes/providers/tanstack-theme-provider.tsx
|
|
6
6
|
var initialState = {
|
|
7
7
|
theme: "system",
|
|
8
8
|
resolvedTheme: "light",
|
package/dist/themes.css
ADDED
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
@import "tailwindcss";
|
|
2
|
+
@import "tw-animate-css";
|
|
3
|
+
@import "shadcn/tailwind.css";
|
|
4
|
+
|
|
5
|
+
/* Import all theme CSS files */
|
|
6
|
+
@import "./catpuccin/latte.css";
|
|
7
|
+
@import "./catpuccin/frappe.css";
|
|
8
|
+
@import "./catpuccin/macchiato.css";
|
|
9
|
+
@import "./catpuccin/mocha.css";
|
|
10
|
+
@import "./ekko-os.css";
|
|
11
|
+
@import "./tokyo-night.css";
|
|
12
|
+
@import "./convergence.css";
|
|
13
|
+
|
|
14
|
+
@custom-variant dark (&:is(.dark *));
|
|
15
|
+
|
|
16
|
+
@theme inline {
|
|
17
|
+
--color-background: var(--background);
|
|
18
|
+
--color-foreground: var(--foreground);
|
|
19
|
+
--font-sans: var(--font-sans);
|
|
20
|
+
--font-mono: var(--font-geist-mono);
|
|
21
|
+
--color-sidebar-ring: var(--sidebar-ring);
|
|
22
|
+
--color-sidebar-border: var(--sidebar-border);
|
|
23
|
+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
|
24
|
+
--color-sidebar-accent: var(--sidebar-accent);
|
|
25
|
+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
|
26
|
+
--color-sidebar-primary: var(--sidebar-primary);
|
|
27
|
+
--color-sidebar-foreground: var(--sidebar-foreground);
|
|
28
|
+
--color-sidebar: var(--sidebar);
|
|
29
|
+
--color-chart-5: var(--chart-5);
|
|
30
|
+
--color-chart-4: var(--chart-4);
|
|
31
|
+
--color-chart-3: var(--chart-3);
|
|
32
|
+
--color-chart-2: var(--chart-2);
|
|
33
|
+
--color-chart-1: var(--chart-1);
|
|
34
|
+
--color-ring: var(--ring);
|
|
35
|
+
--color-input: var(--input);
|
|
36
|
+
--color-border: var(--border);
|
|
37
|
+
--color-destructive: var(--destructive);
|
|
38
|
+
--color-accent-foreground: var(--accent-foreground);
|
|
39
|
+
--color-accent: var(--accent);
|
|
40
|
+
--color-muted-foreground: var(--muted-foreground);
|
|
41
|
+
--color-muted: var(--muted);
|
|
42
|
+
--color-secondary-foreground: var(--secondary-foreground);
|
|
43
|
+
--color-secondary: var(--secondary);
|
|
44
|
+
--color-primary-foreground: var(--primary-foreground);
|
|
45
|
+
--color-primary: var(--primary);
|
|
46
|
+
--color-popover-foreground: var(--popover-foreground);
|
|
47
|
+
--color-popover: var(--popover);
|
|
48
|
+
--color-card-foreground: var(--card-foreground);
|
|
49
|
+
--color-card: var(--card);
|
|
50
|
+
--radius-sm: calc(var(--radius) - 4px);
|
|
51
|
+
--radius-md: calc(var(--radius) - 2px);
|
|
52
|
+
--radius-lg: var(--radius);
|
|
53
|
+
--radius-xl: calc(var(--radius) + 4px);
|
|
54
|
+
--radius-2xl: calc(var(--radius) + 8px);
|
|
55
|
+
--radius-3xl: calc(var(--radius) + 12px);
|
|
56
|
+
--radius-4xl: calc(var(--radius) + 16px);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
:root {
|
|
60
|
+
--background: oklch(1 0 0);
|
|
61
|
+
--foreground: oklch(0.141 0.005 285.823);
|
|
62
|
+
--card: oklch(1 0 0);
|
|
63
|
+
--card-foreground: oklch(0.141 0.005 285.823);
|
|
64
|
+
--popover: oklch(1 0 0);
|
|
65
|
+
--popover-foreground: oklch(0.141 0.005 285.823);
|
|
66
|
+
--primary: oklch(0.51 0.23 277);
|
|
67
|
+
--primary-foreground: oklch(0.96 0.02 272);
|
|
68
|
+
--secondary: oklch(0.967 0.001 286.375);
|
|
69
|
+
--secondary-foreground: oklch(0.21 0.006 285.885);
|
|
70
|
+
--muted: oklch(0.967 0.001 286.375);
|
|
71
|
+
--muted-foreground: oklch(0.552 0.016 285.938);
|
|
72
|
+
--accent: oklch(0.967 0.001 286.375);
|
|
73
|
+
--accent-foreground: oklch(0.21 0.006 285.885);
|
|
74
|
+
--destructive: oklch(0.577 0.245 27.325);
|
|
75
|
+
--border: oklch(0.92 0.004 286.32);
|
|
76
|
+
--input: oklch(0.92 0.004 286.32);
|
|
77
|
+
--ring: oklch(0.705 0.015 286.067);
|
|
78
|
+
--chart-1: oklch(0.79 0.1 275);
|
|
79
|
+
--chart-2: oklch(0.68 0.16 277);
|
|
80
|
+
--chart-3: oklch(0.59 0.2 277);
|
|
81
|
+
--chart-4: oklch(0.51 0.23 277);
|
|
82
|
+
--chart-5: oklch(0.46 0.21 277);
|
|
83
|
+
--radius: 0.45rem;
|
|
84
|
+
--sidebar: oklch(0.985 0 0);
|
|
85
|
+
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
|
86
|
+
--sidebar-primary: oklch(0.51 0.23 277);
|
|
87
|
+
--sidebar-primary-foreground: oklch(0.96 0.02 272);
|
|
88
|
+
--sidebar-accent: oklch(0.967 0.001 286.375);
|
|
89
|
+
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
|
90
|
+
--sidebar-border: oklch(0.92 0.004 286.32);
|
|
91
|
+
--sidebar-ring: oklch(0.705 0.015 286.067);
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
@layer base {
|
|
95
|
+
* {
|
|
96
|
+
@apply border-border outline-ring/50;
|
|
97
|
+
}
|
|
98
|
+
body {
|
|
99
|
+
@apply bg-background text-foreground;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
/* Tokyo Night Theme - Dark Mode */
|
|
2
|
+
html[data-theme="tokyo-night"] {
|
|
3
|
+
--radius: 0.625rem;
|
|
4
|
+
--background: hsl(233 16.00% 13.33%); /* #1a1b26 - dark blue-gray */
|
|
5
|
+
--foreground: hsl(228 23.53% 87.06%); /* #c0caf5 - light blue-gray */
|
|
6
|
+
--card: hsl(233 16.00% 13.33%); /* #1a1b26 */
|
|
7
|
+
--card-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
8
|
+
--popover: hsl(233 16.00% 13.33%); /* #1a1b26 */
|
|
9
|
+
--popover-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
10
|
+
--primary: hsl(217 91.67% 79.80%); /* #7aa2f7 - Tokyo Night blue */
|
|
11
|
+
--primary-foreground: hsl(233 16.00% 13.33%); /* #1a1b26 */
|
|
12
|
+
--secondary: hsl(233 18.18% 15.29%); /* #24283b - darker blue-gray */
|
|
13
|
+
--secondary-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
14
|
+
--muted: hsl(233 18.18% 15.29%); /* #24283b */
|
|
15
|
+
--muted-foreground: hsl(230 13.33% 66.67%); /* #565f89 - muted text */
|
|
16
|
+
--accent: hsl(233 18.18% 15.29%); /* #24283b */
|
|
17
|
+
--accent-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
18
|
+
--destructive: hsl(354 65.22% 78.24%); /* #f7768e - Tokyo Night red */
|
|
19
|
+
--border: hsl(233 18.18% 20.00%); /* #2f3549 - border color */
|
|
20
|
+
--input: hsl(233 18.18% 20.00%); /* #2f3549 */
|
|
21
|
+
--ring: hsl(217 91.67% 79.80%); /* #7aa2f7 - primary blue */
|
|
22
|
+
--chart-1: hsl(354 65.22% 78.24%); /* #f7768e - red */
|
|
23
|
+
--chart-2: hsl(158 64.00% 71.37%); /* #9ece6a - green */
|
|
24
|
+
--chart-3: hsl(217 91.67% 79.80%); /* #7aa2f7 - blue */
|
|
25
|
+
--chart-4: hsl(38 92.00% 72.16%); /* #e0af68 - yellow */
|
|
26
|
+
--chart-5: hsl(266 85.00% 78.24%); /* #bb9af7 - purple */
|
|
27
|
+
--sidebar: hsl(233 18.18% 12.94%); /* #16161e - darker background */
|
|
28
|
+
--sidebar-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
29
|
+
--sidebar-primary: hsl(217 91.67% 79.80%); /* #7aa2f7 */
|
|
30
|
+
--sidebar-primary-foreground: hsl(233 16.00% 13.33%); /* #1a1b26 */
|
|
31
|
+
--sidebar-accent: hsl(233 18.18% 15.29%); /* #24283b */
|
|
32
|
+
--sidebar-accent-foreground: hsl(228 23.53% 87.06%); /* #c0caf5 */
|
|
33
|
+
--sidebar-border: hsl(233 18.18% 20.00%); /* #2f3549 */
|
|
34
|
+
--sidebar-ring: hsl(233 18.18% 20.00%); /* #2f3549 */
|
|
35
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ekkolyth/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "Shared UI Library for my personal projects",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"theme",
|
|
@@ -36,7 +36,15 @@
|
|
|
36
36
|
"./providers/tanstack-theme": {
|
|
37
37
|
"types": "./dist/providers/tanstack-theme-provider.d.ts",
|
|
38
38
|
"import": "./dist/providers/tanstack-theme-provider.js"
|
|
39
|
-
}
|
|
39
|
+
},
|
|
40
|
+
"./themes": "./dist/themes.css",
|
|
41
|
+
"./catpuccin/latte": "./dist/catpuccin/latte.css",
|
|
42
|
+
"./catpuccin/frappe": "./dist/catpuccin/frappe.css",
|
|
43
|
+
"./catpuccin/macchiato": "./dist/catpuccin/macchiato.css",
|
|
44
|
+
"./catpuccin/mocha": "./dist/catpuccin/mocha.css",
|
|
45
|
+
"./ekko-os": "./dist/ekko-os.css",
|
|
46
|
+
"./tokyo-night": "./dist/tokyo-night.css",
|
|
47
|
+
"./convergence": "./dist/convergence.css"
|
|
40
48
|
},
|
|
41
49
|
"main": "./dist/index.js",
|
|
42
50
|
"types": "./dist/index.d.ts",
|