@jacshuo/onyx 0.1.8 → 0.1.9
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 +19 -1
- package/dist/styles/tailwind.css +21 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -119,12 +119,30 @@ import { Tabs, TabList, TabTrigger } from '@jacshuo/onyx/Tabs';
|
|
|
119
119
|
|---|---|---|
|
|
120
120
|
| `@jacshuo/onyx/styles.css` | ~102 KB | Full pre-compiled bundle — all utilities + all component CSS. Simplest setup. |
|
|
121
121
|
| `@jacshuo/onyx/styles/base.css` | ~95 KB | Tailwind utilities + core design tokens. No component-specific keyframes. |
|
|
122
|
-
| `@jacshuo/onyx/styles/
|
|
122
|
+
| `@jacshuo/onyx/styles/tailwind.css` | ~4 KB | **For projects with their own Tailwind CSS v4.** Includes `@source` directive, tokens & dark mode variant. |
|
|
123
|
+
| `@jacshuo/onyx/styles/tokens.css` | ~4 KB | Raw `@theme` tokens only — no `@source`, no Tailwind import. |
|
|
123
124
|
| `@jacshuo/onyx/styles/CinePlayer.css` | ~2.5 KB | CinePlayer keyframes & `--cp-*` design tokens |
|
|
124
125
|
| `@jacshuo/onyx/styles/MiniPlayer.css` | ~2.2 KB | MiniPlayer keyframes & `--mp-*` design tokens |
|
|
125
126
|
| `@jacshuo/onyx/styles/FileExplorer.css` | ~1.6 KB | FileExplorer `--fe-*` design tokens |
|
|
126
127
|
| `@jacshuo/onyx/styles/FilmReel.css` | ~0.6 KB | FilmReel keyframes |
|
|
127
128
|
|
|
129
|
+
#### Using with your own Tailwind CSS v4 setup
|
|
130
|
+
|
|
131
|
+
If your project already runs Tailwind CSS v4 and you want to import only the tokens (not the full pre-compiled bundle), you **must** use `tailwind.css` so that Tailwind scans the library's JS files for class names:
|
|
132
|
+
|
|
133
|
+
```css
|
|
134
|
+
/* your app's CSS entry */
|
|
135
|
+
@import "tailwindcss";
|
|
136
|
+
@import "@jacshuo/onyx/styles/tailwind.css";
|
|
137
|
+
|
|
138
|
+
/* optionally add per-component CSS for CinePlayer, MiniPlayer, etc. */
|
|
139
|
+
@import "@jacshuo/onyx/styles/CinePlayer.css";
|
|
140
|
+
```
|
|
141
|
+
|
|
142
|
+
> **Why?** Onyx components use Tailwind utility classes defined in JavaScript (via CVA). Without `@source`, your Tailwind build won't know about these classes and they won't be generated. The `tailwind.css` file includes `@source ".."` which tells Tailwind v4 to scan the library's compiled JS.
|
|
143
|
+
>
|
|
144
|
+
> **Do NOT** use `tokens.css` alone — it only provides design tokens without the `@source` directive, so component styles will be incomplete.
|
|
145
|
+
|
|
128
146
|
**Example — minimal setup with CinePlayer only:**
|
|
129
147
|
|
|
130
148
|
```tsx
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
/* ═══════════════════════════════════════════════════════════
|
|
2
|
+
Tailwind v4 integration — for consumers with their own
|
|
3
|
+
Tailwind CSS setup.
|
|
4
|
+
|
|
5
|
+
Import this file in your CSS AFTER @import "tailwindcss":
|
|
6
|
+
|
|
7
|
+
@import "tailwindcss";
|
|
8
|
+
@import "@jacshuo/onyx/styles/tailwind.css";
|
|
9
|
+
|
|
10
|
+
This tells Tailwind to scan the library's JS for class
|
|
11
|
+
names and includes all theme tokens + custom variants.
|
|
12
|
+
═══════════════════════════════════════════════════════════ */
|
|
13
|
+
|
|
14
|
+
/* Tell Tailwind to scan the library's compiled JS for class names */
|
|
15
|
+
@source "..";
|
|
16
|
+
|
|
17
|
+
/* Core design tokens (semantic colors, animations) */
|
|
18
|
+
@import "./tokens.css";
|
|
19
|
+
|
|
20
|
+
/* Class-based dark mode */
|
|
21
|
+
@custom-variant dark (&:where(.dark, .dark *));
|