@etchkit/tailwind 0.0.1 → 0.0.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/README.md +64 -0
- package/etchkit.css +37 -18
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
# @etchkit/tailwind
|
|
2
|
+
|
|
3
|
+
Tailwind CSS v4 design tokens for [etchkit](https://github.com/Swanand58/etchkit) — the brutalist copy-paste component library.
|
|
4
|
+
|
|
5
|
+
**No shadows. No softness. Just structure.**
|
|
6
|
+
|
|
7
|
+
## Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @etchkit/tailwind
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
In your global CSS file:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
@import "tailwindcss";
|
|
19
|
+
@import "@etchkit/tailwind";
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
That's it. All design tokens are available as CSS custom properties.
|
|
23
|
+
|
|
24
|
+
## Design tokens
|
|
25
|
+
|
|
26
|
+
| Token | Light | Dark |
|
|
27
|
+
|-------|-------|------|
|
|
28
|
+
| `--background` | `#F8FAFC` (slate-50) | `#1e2130` (steel blue-gray) |
|
|
29
|
+
| `--foreground` | `#0F172A` (slate-900) | `#F5F7FA` (blue-tinted white) |
|
|
30
|
+
| `--muted` | `#F0F4F8` | `#252836` |
|
|
31
|
+
| `--muted-foreground` | `#64748B` | `#94A3B8` |
|
|
32
|
+
| `--border` | `#0F172A` | `#FAFAFA` |
|
|
33
|
+
| `--destructive` | `#EF4444` | `#EF4444` |
|
|
34
|
+
| `--surface-dark` | `#1e2130` | `#1e2130` |
|
|
35
|
+
| `--radius` | `0px` | `0px` |
|
|
36
|
+
|
|
37
|
+
`--surface-dark` is a fixed dark token for inverted sections — same value in both light and dark mode.
|
|
38
|
+
|
|
39
|
+
Dark mode via `.dark` class on `<html>`.
|
|
40
|
+
|
|
41
|
+
## Customization
|
|
42
|
+
|
|
43
|
+
Override any token in your own CSS after the import:
|
|
44
|
+
|
|
45
|
+
```css
|
|
46
|
+
@import "tailwindcss";
|
|
47
|
+
@import "@etchkit/tailwind";
|
|
48
|
+
|
|
49
|
+
:root {
|
|
50
|
+
--background: oklch(0.97 0.01 214);
|
|
51
|
+
--foreground: oklch(0.15 0.05 214);
|
|
52
|
+
--radius: 4px;
|
|
53
|
+
}
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
## Part of etchkit
|
|
57
|
+
|
|
58
|
+
- [`@etchkit/cli`](https://www.npmjs.com/package/@etchkit/cli) — add components to your project
|
|
59
|
+
- [`@etchkit/ui`](https://www.npmjs.com/package/@etchkit/ui) — component source reference
|
|
60
|
+
- [Docs & Playground](https://github.com/Swanand58/etchkit)
|
|
61
|
+
|
|
62
|
+
## License
|
|
63
|
+
|
|
64
|
+
MIT
|
package/etchkit.css
CHANGED
|
@@ -1,38 +1,55 @@
|
|
|
1
1
|
/* etchkit design tokens — Tailwind v4 CSS theme */
|
|
2
2
|
|
|
3
3
|
:root {
|
|
4
|
-
--background:
|
|
5
|
-
--foreground:
|
|
6
|
-
--card:
|
|
7
|
-
--card-foreground:
|
|
8
|
-
--muted:
|
|
9
|
-
--muted-foreground:
|
|
10
|
-
--border:
|
|
11
|
-
--input:
|
|
12
|
-
--ring:
|
|
13
|
-
--accent:
|
|
14
|
-
--accent-foreground:
|
|
4
|
+
--background: 210 40% 98%;
|
|
5
|
+
--foreground: 222 47% 11%;
|
|
6
|
+
--card: 210 40% 98%;
|
|
7
|
+
--card-foreground: 222 47% 11%;
|
|
8
|
+
--muted: 210 40% 96%;
|
|
9
|
+
--muted-foreground: 215 16% 47%;
|
|
10
|
+
--border: 222 47% 11%;
|
|
11
|
+
--input: 222 47% 11%;
|
|
12
|
+
--ring: 222 47% 11%;
|
|
13
|
+
--accent: 210 40% 96%;
|
|
14
|
+
--accent-foreground: 222 47% 11%;
|
|
15
15
|
--destructive: 0 84% 60%;
|
|
16
16
|
--destructive-foreground: 0 0% 98%;
|
|
17
|
+
--surface-dark: 224 22% 15%;
|
|
18
|
+
--surface-dark-foreground: 210 17% 98%;
|
|
17
19
|
}
|
|
18
20
|
|
|
19
21
|
.dark {
|
|
20
|
-
--background:
|
|
21
|
-
--foreground:
|
|
22
|
-
--card:
|
|
23
|
-
--card-foreground:
|
|
24
|
-
--muted:
|
|
25
|
-
--muted-foreground:
|
|
22
|
+
--background: 224 22% 15%;
|
|
23
|
+
--foreground: 210 17% 98%;
|
|
24
|
+
--card: 224 22% 15%;
|
|
25
|
+
--card-foreground: 210 17% 98%;
|
|
26
|
+
--muted: 225 20% 19%;
|
|
27
|
+
--muted-foreground: 215 20% 65%;
|
|
26
28
|
--border: 0 0% 98%;
|
|
27
29
|
--input: 0 0% 98%;
|
|
28
30
|
--ring: 0 0% 98%;
|
|
29
|
-
--accent:
|
|
31
|
+
--accent: 225 20% 19%;
|
|
30
32
|
--accent-foreground: 0 0% 98%;
|
|
33
|
+
--surface-dark: 224 22% 15%;
|
|
34
|
+
--surface-dark-foreground: 210 17% 98%;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@keyframes accordion-down {
|
|
38
|
+
from { height: 0; overflow: hidden; }
|
|
39
|
+
to { height: var(--radix-accordion-content-height); overflow: hidden; }
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
@keyframes accordion-up {
|
|
43
|
+
from { height: var(--radix-accordion-content-height); overflow: hidden; }
|
|
44
|
+
to { height: 0; overflow: hidden; }
|
|
31
45
|
}
|
|
32
46
|
|
|
33
47
|
@theme inline {
|
|
34
48
|
--font-family-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
|
|
35
49
|
|
|
50
|
+
--animate-accordion-down: accordion-down 0.2s ease-out;
|
|
51
|
+
--animate-accordion-up: accordion-up 0.2s ease-out;
|
|
52
|
+
|
|
36
53
|
--radius: 0px;
|
|
37
54
|
--radius-sm: 2px;
|
|
38
55
|
--radius-md: 4px;
|
|
@@ -52,4 +69,6 @@
|
|
|
52
69
|
--color-accent-foreground: hsl(var(--accent-foreground));
|
|
53
70
|
--color-destructive: hsl(var(--destructive));
|
|
54
71
|
--color-destructive-foreground: hsl(var(--destructive-foreground));
|
|
72
|
+
--color-surface-dark: hsl(var(--surface-dark));
|
|
73
|
+
--color-surface-dark-foreground: hsl(var(--surface-dark-foreground));
|
|
55
74
|
}
|