start-vibing-stacks 1.9.1 → 1.9.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/ui.js
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
* Start Vibing Stacks — Terminal UI
|
|
3
3
|
*/
|
|
4
4
|
import chalk from 'chalk';
|
|
5
|
-
const VERSION = '1.9.
|
|
5
|
+
const VERSION = '1.9.2';
|
|
6
6
|
const gradient = (text) => {
|
|
7
7
|
const colors = [chalk.hex('#FF6B6B'), chalk.hex('#FF8E53'), chalk.hex('#FFBD2E'), chalk.hex('#48BB78'), chalk.hex('#4299E1'), chalk.hex('#9F7AEA')];
|
|
8
8
|
return text.split('').map((c, i) => colors[i % colors.length](c)).join('');
|
package/package.json
CHANGED
|
@@ -1,94 +1,273 @@
|
|
|
1
|
-
#
|
|
1
|
+
# TailwindCSS 4 — CSS-First Design System
|
|
2
2
|
|
|
3
|
-
**ALWAYS invoke when writing Tailwind
|
|
3
|
+
**ALWAYS invoke when writing Tailwind classes, theming, or responsive layouts.**
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## What Changed (v3 → v4)
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
| v3 (Legacy) | v4 (Current) |
|
|
8
|
+
|---|---|
|
|
9
|
+
| `tailwind.config.js` | CSS `@theme` directive |
|
|
10
|
+
| PostCSS plugin | Oxide engine (10x faster) |
|
|
11
|
+
| `@tailwind base/components/utilities` | `@import "tailwindcss"` |
|
|
12
|
+
| Colors in JS config | Colors as CSS variables |
|
|
13
|
+
| `@apply` everywhere | Components > `@apply` |
|
|
14
|
+
|
|
15
|
+
## Setup (v4)
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
/* resources/css/app.css (Laravel + Inertia) */
|
|
19
|
+
@import "tailwindcss";
|
|
20
|
+
|
|
21
|
+
@theme {
|
|
22
|
+
/* ─── Semantic Colors (OKLCH for perceptual uniformity) ─── */
|
|
23
|
+
--color-primary: oklch(0.55 0.15 250);
|
|
24
|
+
--color-primary-foreground: oklch(0.98 0 0);
|
|
25
|
+
--color-secondary: oklch(0.75 0.05 250);
|
|
26
|
+
--color-secondary-foreground: oklch(0.15 0 0);
|
|
27
|
+
--color-destructive: oklch(0.55 0.2 25);
|
|
28
|
+
--color-destructive-foreground: oklch(0.98 0 0);
|
|
29
|
+
|
|
30
|
+
--color-background: oklch(0.99 0 0);
|
|
31
|
+
--color-foreground: oklch(0.15 0 0);
|
|
32
|
+
--color-muted: oklch(0.95 0.01 250);
|
|
33
|
+
--color-muted-foreground: oklch(0.45 0.02 250);
|
|
34
|
+
--color-border: oklch(0.90 0.01 250);
|
|
35
|
+
--color-ring: oklch(0.55 0.15 250);
|
|
36
|
+
|
|
37
|
+
--color-surface: oklch(0.98 0 0);
|
|
38
|
+
--color-surface-raised: oklch(1 0 0);
|
|
39
|
+
|
|
40
|
+
/* ─── Typography ─── */
|
|
41
|
+
--font-sans: 'Inter', system-ui, sans-serif;
|
|
42
|
+
--font-mono: 'JetBrains Mono', monospace;
|
|
43
|
+
|
|
44
|
+
/* ─── Spacing ─── */
|
|
45
|
+
--spacing-page: 1rem;
|
|
46
|
+
|
|
47
|
+
/* ─── Border Radius ─── */
|
|
48
|
+
--radius-sm: 0.375rem;
|
|
49
|
+
--radius-md: 0.5rem;
|
|
50
|
+
--radius-lg: 0.75rem;
|
|
51
|
+
--radius-xl: 1rem;
|
|
52
|
+
|
|
53
|
+
/* ─── Shadows ─── */
|
|
54
|
+
--shadow-sm: 0 1px 2px oklch(0 0 0 / 0.05);
|
|
55
|
+
--shadow-md: 0 4px 6px oklch(0 0 0 / 0.07);
|
|
56
|
+
--shadow-lg: 0 10px 15px oklch(0 0 0 / 0.1);
|
|
57
|
+
|
|
58
|
+
/* ─── Animations ─── */
|
|
59
|
+
--animate-fade-in: fade-in 0.2s ease-out;
|
|
60
|
+
--animate-slide-up: slide-up 0.3s ease-out;
|
|
61
|
+
--animate-slide-down: slide-down 0.3s ease-out;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
/* ─── Dark Mode Override ─── */
|
|
65
|
+
@theme dark {
|
|
66
|
+
--color-background: oklch(0.13 0.01 250);
|
|
67
|
+
--color-foreground: oklch(0.95 0 0);
|
|
68
|
+
--color-surface: oklch(0.17 0.01 250);
|
|
69
|
+
--color-surface-raised: oklch(0.21 0.01 250);
|
|
70
|
+
--color-muted: oklch(0.22 0.02 250);
|
|
71
|
+
--color-muted-foreground: oklch(0.65 0.02 250);
|
|
72
|
+
--color-border: oklch(0.28 0.02 250);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/* ─── Keyframes ─── */
|
|
76
|
+
@keyframes fade-in {
|
|
77
|
+
from { opacity: 0; }
|
|
78
|
+
to { opacity: 1; }
|
|
79
|
+
}
|
|
80
|
+
@keyframes slide-up {
|
|
81
|
+
from { opacity: 0; transform: translateY(8px); }
|
|
82
|
+
to { opacity: 1; transform: translateY(0); }
|
|
83
|
+
}
|
|
84
|
+
@keyframes slide-down {
|
|
85
|
+
from { opacity: 0; transform: translateY(-8px); }
|
|
86
|
+
to { opacity: 1; transform: translateY(0); }
|
|
87
|
+
}
|
|
9
88
|
```
|
|
10
89
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
{/* Mobile: full → Tablet: half → Desktop: third → Large: quarter */}
|
|
14
|
-
</div>
|
|
90
|
+
## Color Token Architecture
|
|
91
|
+
|
|
15
92
|
```
|
|
93
|
+
Layer 1 — Primitive: oklch(0.55 0.15 250) (raw values)
|
|
94
|
+
Layer 2 — Semantic: --color-primary (purpose-based)
|
|
95
|
+
Layer 3 — Component: className="bg-primary" (usage in JSX)
|
|
16
96
|
|
|
17
|
-
|
|
97
|
+
Usage in Tailwind classes:
|
|
98
|
+
bg-primary text-primary-foreground
|
|
99
|
+
bg-destructive text-destructive-foreground
|
|
100
|
+
bg-muted text-muted-foreground
|
|
101
|
+
bg-surface border-border
|
|
102
|
+
```
|
|
18
103
|
|
|
19
|
-
|
|
20
|
-
```tsx
|
|
21
|
-
// Center
|
|
22
|
-
<div className="flex items-center justify-center h-screen" />
|
|
104
|
+
## Mobile-First Responsive
|
|
23
105
|
|
|
24
|
-
|
|
25
|
-
|
|
106
|
+
```
|
|
107
|
+
Breakpoints (min-width):
|
|
108
|
+
(none) → 0px Mobile base
|
|
109
|
+
sm: → 640px Large phone
|
|
110
|
+
md: → 768px Tablet
|
|
111
|
+
lg: → 1024px Laptop
|
|
112
|
+
xl: → 1280px Desktop
|
|
113
|
+
2xl: → 1536px Large desktop
|
|
26
114
|
```
|
|
27
115
|
|
|
28
|
-
### Grid
|
|
29
116
|
```tsx
|
|
30
|
-
|
|
31
|
-
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"
|
|
117
|
+
{/* Mobile: stack → Tablet: 2 cols → Desktop: 3 cols */}
|
|
118
|
+
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
32
119
|
|
|
33
|
-
|
|
34
|
-
<div className="
|
|
120
|
+
{/* Mobile: full width → Desktop: sidebar layout */}
|
|
121
|
+
<div className="flex flex-col lg:flex-row gap-6">
|
|
122
|
+
<aside className="w-full lg:w-64 shrink-0">Sidebar</aside>
|
|
123
|
+
<main className="flex-1">Content</main>
|
|
124
|
+
</div>
|
|
35
125
|
```
|
|
36
126
|
|
|
37
|
-
##
|
|
127
|
+
## Container Queries (v4 Native)
|
|
38
128
|
|
|
39
129
|
```tsx
|
|
40
|
-
|
|
41
|
-
|
|
130
|
+
{/* Parent defines container */}
|
|
131
|
+
<div className="@container">
|
|
132
|
+
{/* Children respond to PARENT width, not viewport */}
|
|
133
|
+
<div className="flex flex-col @md:flex-row @lg:grid @lg:grid-cols-3 gap-4">
|
|
134
|
+
<Card />
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
{/* Named containers for specificity */}
|
|
139
|
+
<div className="@container/card">
|
|
140
|
+
<h2 className="text-sm @md/card:text-lg">Title</h2>
|
|
42
141
|
</div>
|
|
43
142
|
```
|
|
44
143
|
|
|
144
|
+
**Rule:** Use container queries for **reusable components** (cards, widgets). Use viewport breakpoints for **page-level layouts**.
|
|
145
|
+
|
|
45
146
|
## Component Patterns
|
|
46
147
|
|
|
47
|
-
###
|
|
148
|
+
### Button
|
|
149
|
+
|
|
48
150
|
```tsx
|
|
49
|
-
|
|
151
|
+
const buttonVariants = {
|
|
152
|
+
base: "inline-flex items-center justify-center font-medium rounded-md transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed",
|
|
153
|
+
variant: {
|
|
154
|
+
primary: "bg-primary text-primary-foreground hover:bg-primary/90",
|
|
155
|
+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
|
156
|
+
destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
|
|
157
|
+
outline: "border border-border bg-transparent hover:bg-muted",
|
|
158
|
+
ghost: "hover:bg-muted",
|
|
159
|
+
},
|
|
160
|
+
size: {
|
|
161
|
+
sm: "h-8 px-3 text-sm",
|
|
162
|
+
md: "h-10 px-4 text-sm",
|
|
163
|
+
lg: "h-12 px-6 text-base",
|
|
164
|
+
},
|
|
165
|
+
};
|
|
50
166
|
```
|
|
51
167
|
|
|
52
|
-
###
|
|
168
|
+
### Card
|
|
169
|
+
|
|
53
170
|
```tsx
|
|
54
|
-
<
|
|
171
|
+
<div className="bg-surface-raised rounded-lg border border-border shadow-sm p-6 hover:shadow-md transition-shadow">
|
|
172
|
+
<h3 className="text-lg font-semibold text-foreground">Title</h3>
|
|
173
|
+
<p className="mt-2 text-muted-foreground">Description</p>
|
|
174
|
+
</div>
|
|
55
175
|
```
|
|
56
176
|
|
|
57
177
|
### Input
|
|
178
|
+
|
|
58
179
|
```tsx
|
|
59
|
-
<input className="w-full px-3
|
|
180
|
+
<input className="w-full h-10 px-3 rounded-md border border-border bg-background text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent transition-colors" />
|
|
60
181
|
```
|
|
61
182
|
|
|
62
|
-
|
|
183
|
+
### Table (responsive)
|
|
63
184
|
|
|
64
185
|
```tsx
|
|
65
|
-
|
|
66
|
-
<div className="
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
186
|
+
{/* Mobile: card layout → Desktop: table */}
|
|
187
|
+
<div className="hidden md:block">
|
|
188
|
+
<table className="w-full text-sm">
|
|
189
|
+
<thead className="border-b border-border">
|
|
190
|
+
<tr className="text-left text-muted-foreground">
|
|
191
|
+
<th className="p-3 font-medium">Name</th>
|
|
192
|
+
</tr>
|
|
193
|
+
</thead>
|
|
194
|
+
</table>
|
|
195
|
+
</div>
|
|
196
|
+
<div className="md:hidden space-y-3">
|
|
197
|
+
{/* Card layout for mobile */}
|
|
198
|
+
</div>
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
## Dark Mode
|
|
202
|
+
|
|
203
|
+
```tsx
|
|
204
|
+
{/* Automatic with semantic tokens */}
|
|
205
|
+
<div className="bg-background text-foreground">
|
|
206
|
+
<p className="text-muted-foreground">Always adapts</p>
|
|
207
|
+
<div className="border-border bg-surface">Card</div>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
{/* Toggle button */}
|
|
211
|
+
<button onClick={() => document.documentElement.classList.toggle('dark')}>
|
|
212
|
+
Toggle Theme
|
|
213
|
+
</button>
|
|
79
214
|
```
|
|
80
215
|
|
|
81
|
-
|
|
216
|
+
**Rule:** Use semantic tokens (`bg-background`, `text-foreground`) instead of explicit dark classes. The `@theme dark` block handles everything.
|
|
217
|
+
|
|
218
|
+
## Show/Hide
|
|
82
219
|
|
|
83
220
|
```tsx
|
|
84
221
|
<div className="hidden lg:block">Desktop only</div>
|
|
85
|
-
<div className="
|
|
222
|
+
<div className="lg:hidden">Mobile only</div>
|
|
86
223
|
<span className="sr-only">Screen reader only</span>
|
|
87
224
|
```
|
|
88
225
|
|
|
226
|
+
## Auto-fit Grid
|
|
227
|
+
|
|
228
|
+
```tsx
|
|
229
|
+
{/* Cards that auto-wrap based on available space */}
|
|
230
|
+
<div className="grid grid-cols-[repeat(auto-fit,minmax(280px,1fr))] gap-4">
|
|
231
|
+
{items.map(item => <Card key={item.id} {...item} />)}
|
|
232
|
+
</div>
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
## Animations
|
|
236
|
+
|
|
237
|
+
```tsx
|
|
238
|
+
<div className="animate-fade-in">Fades in on mount</div>
|
|
239
|
+
<div className="animate-slide-up">Slides up on mount</div>
|
|
240
|
+
<Loader className="h-5 w-5 animate-spin" />
|
|
241
|
+
<div className="h-4 w-24 bg-muted animate-pulse rounded" /> {/* Skeleton */}
|
|
242
|
+
```
|
|
243
|
+
|
|
244
|
+
## Spacing Consistency
|
|
245
|
+
|
|
246
|
+
```
|
|
247
|
+
Use the 4px scale consistently:
|
|
248
|
+
gap-1 = 4px p-1 = 4px
|
|
249
|
+
gap-2 = 8px p-2 = 8px
|
|
250
|
+
gap-3 = 12px p-3 = 12px
|
|
251
|
+
gap-4 = 16px p-4 = 16px
|
|
252
|
+
gap-6 = 24px p-6 = 24px
|
|
253
|
+
gap-8 = 32px p-8 = 32px
|
|
254
|
+
|
|
255
|
+
Page padding: px-4 md:px-6 lg:px-8
|
|
256
|
+
Section gaps: space-y-6 md:space-y-8
|
|
257
|
+
Card padding: p-4 md:p-6
|
|
258
|
+
```
|
|
259
|
+
|
|
89
260
|
## FORBIDDEN
|
|
90
261
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
262
|
+
| ❌ Don't | ✅ Do |
|
|
263
|
+
|---|---|
|
|
264
|
+
| `tailwind.config.js` in v4 | `@theme` in CSS |
|
|
265
|
+
| `@apply` for everything | React components |
|
|
266
|
+
| `!important` | Fix specificity |
|
|
267
|
+
| `style={{ color: 'red' }}` | `text-destructive` |
|
|
268
|
+
| Arbitrary values for tokens | Define in `@theme` |
|
|
269
|
+
| `bg-white dark:bg-gray-900` | `bg-background` (semantic) |
|
|
270
|
+
| `@tailwind base` | `@import "tailwindcss"` (v4) |
|
|
271
|
+
| Dynamic class strings | Static complete strings (purge-safe) |
|
|
272
|
+
| `text-[#FF5733]` inline | `--color-accent` in `@theme` |
|
|
273
|
+
| Inconsistent spacing | Follow 4px scale |
|