@7onic-ui/tokens 0.1.0 → 0.1.1
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/llms.txt +474 -0
- package/package.json +3 -2
package/llms.txt
ADDED
|
@@ -0,0 +1,474 @@
|
|
|
1
|
+
# 7onic Design System — AI Guide (Tokens)
|
|
2
|
+
|
|
3
|
+
## What is 7onic?
|
|
4
|
+
|
|
5
|
+
Token-driven design system. Single source of truth — design tokens to code.
|
|
6
|
+
Use the token system to style any project with consistent colors, spacing, typography, and more.
|
|
7
|
+
|
|
8
|
+
- Documentation: https://7onic.design
|
|
9
|
+
- npm: `@7onic-ui/tokens` (design tokens)
|
|
10
|
+
- For components + tokens guide, see: https://7onic.design/llms-full.txt
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
# ═══ SECTION 1: PROJECT SETUP ═══
|
|
15
|
+
|
|
16
|
+
## How to Start
|
|
17
|
+
|
|
18
|
+
### Step 1: Ask the user (setup checklist)
|
|
19
|
+
|
|
20
|
+
Before writing any code, present this checklist and wait for answers:
|
|
21
|
+
|
|
22
|
+
1. **Framework** — Next.js / Vite (React SPA) / Remix / other?
|
|
23
|
+
2. **Dark mode** — Yes or no?
|
|
24
|
+
3. **Font** — Use default, or custom font? If custom, which font?
|
|
25
|
+
4. **Locale** — Which language(s)? (for CJK font loading)
|
|
26
|
+
|
|
27
|
+
**If the user answers in natural language**, extract the answers. **If any item is missing, ask a follow-up question for the missing items only.** Do not proceed until all 4 items are answered.
|
|
28
|
+
|
|
29
|
+
### Step 2: Execute full setup (all at once, do not skip any)
|
|
30
|
+
|
|
31
|
+
After receiving answers, execute ALL of the following in order. Every step is mandatory.
|
|
32
|
+
|
|
33
|
+
**2-1. Install package (skip if already installed):**
|
|
34
|
+
```bash
|
|
35
|
+
npm install @7onic-ui/tokens
|
|
36
|
+
```
|
|
37
|
+
> Check package.json first. If already listed in dependencies, skip this step.
|
|
38
|
+
|
|
39
|
+
**2-2. Create or update globals.css with token imports:**
|
|
40
|
+
|
|
41
|
+
**How to detect Tailwind version:**
|
|
42
|
+
- `tailwind.config.js` (or `.ts`) exists → **v3**
|
|
43
|
+
- No config file → **v4** (uses CSS-based configuration)
|
|
44
|
+
|
|
45
|
+
**New project (Tailwind v4):**
|
|
46
|
+
```css
|
|
47
|
+
/* globals.css — ALL imports are required, do not skip any */
|
|
48
|
+
@import "tailwindcss";
|
|
49
|
+
@import "@7onic-ui/tokens/css/variables.css";
|
|
50
|
+
@import "@7onic-ui/tokens/css/themes/light.css";
|
|
51
|
+
@import "@7onic-ui/tokens/css/themes/dark.css"; /* omit ONLY if dark mode = no */
|
|
52
|
+
@import "@7onic-ui/tokens/tailwind/v4-theme.css";
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
**Existing project with Tailwind v3** (detect from tailwind.config.js):
|
|
56
|
+
```css
|
|
57
|
+
/* globals.css */
|
|
58
|
+
@tailwind base;
|
|
59
|
+
@tailwind components;
|
|
60
|
+
@tailwind utilities;
|
|
61
|
+
@import '@7onic-ui/tokens/css/variables.css';
|
|
62
|
+
@import '@7onic-ui/tokens/css/themes/light.css';
|
|
63
|
+
@import '@7onic-ui/tokens/css/themes/dark.css'; /* omit ONLY if dark mode = no */
|
|
64
|
+
```
|
|
65
|
+
```js
|
|
66
|
+
// tailwind.config.js — add preset
|
|
67
|
+
const preset = require('@7onic-ui/tokens/tailwind/v3-preset')
|
|
68
|
+
module.exports = {
|
|
69
|
+
presets: [preset],
|
|
70
|
+
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
|
71
|
+
}
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
**2-3. Set body classes:**
|
|
75
|
+
```html
|
|
76
|
+
<body class="bg-background text-foreground">
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
**2-4. Apply user's answers:**
|
|
80
|
+
|
|
81
|
+
- Dark mode = yes → implement dark mode toggle (see below)
|
|
82
|
+
- Custom font → load font (next/font for Next.js, CDN for Vite) + set `--font-family-sans`
|
|
83
|
+
- Locale includes Japanese → load Noto Sans JP font
|
|
84
|
+
- Locale includes Korean → load Noto Sans KR font
|
|
85
|
+
|
|
86
|
+
**2-5. Verify setup is complete before writing any UI code:**
|
|
87
|
+
- [ ] Package installed (@7onic-ui/tokens)
|
|
88
|
+
- [ ] globals.css has ALL required imports in correct order
|
|
89
|
+
- [ ] Body has `bg-background text-foreground`
|
|
90
|
+
- [ ] Dark mode toggle (if selected)
|
|
91
|
+
- [ ] Font loaded (if custom)
|
|
92
|
+
- [ ] CJK fonts loaded (if applicable)
|
|
93
|
+
|
|
94
|
+
⛔ **Do NOT proceed to Step 3 until all checks pass.**
|
|
95
|
+
|
|
96
|
+
### Icon Import Pattern (lucide-react)
|
|
97
|
+
|
|
98
|
+
```tsx
|
|
99
|
+
// ✅ Official pattern — no suffix
|
|
100
|
+
import { Search, Settings, ChevronDown, X } from 'lucide-react'
|
|
101
|
+
|
|
102
|
+
// ❌ Legacy alias — avoid
|
|
103
|
+
import { SearchIcon, SettingsIcon } from 'lucide-react'
|
|
104
|
+
|
|
105
|
+
// ⚠️ Name collision with your own component — use alias
|
|
106
|
+
import { Badge as BadgeIcon } from 'lucide-react'
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
### Step 3: Start building
|
|
110
|
+
|
|
111
|
+
Use token classes for all styling. See Token Reference below.
|
|
112
|
+
|
|
113
|
+
---
|
|
114
|
+
|
|
115
|
+
# ═══ SECTION 2: AI RULES ═══
|
|
116
|
+
|
|
117
|
+
## ⛔ Core Principle
|
|
118
|
+
|
|
119
|
+
**Token values are user-defined.** Every project has different brand colors, spacing, and design decisions. The token NAMES are the API — never assume or hardcode specific values.
|
|
120
|
+
|
|
121
|
+
## Whitelist — ONLY These Are Allowed
|
|
122
|
+
|
|
123
|
+
When writing any code, you may ONLY use:
|
|
124
|
+
|
|
125
|
+
1. **Token classes** — colors, spacing, typography, radius, shadows, z-index, icon sizes, duration, easing, opacity, scale (listed in Token Reference below)
|
|
126
|
+
2. **Tailwind structural utilities** — layout, positioning, display, overflow, sizing, and more:
|
|
127
|
+
- Layout: flex, grid, block, inline, hidden, container
|
|
128
|
+
- Position: relative, absolute, fixed, sticky, top-0, inset-0
|
|
129
|
+
- Flex/Grid: items-center, justify-between, gap-4, col-span-2
|
|
130
|
+
- Sizing: w-full, h-full, min-h-screen, max-w-7xl
|
|
131
|
+
- Spacing: space-x-*, space-y-*, divide-x, divide-y
|
|
132
|
+
- Overflow: overflow-hidden, overflow-auto, truncate, whitespace-nowrap
|
|
133
|
+
- Interaction: cursor-pointer, pointer-events-none, select-none
|
|
134
|
+
- Accessibility: sr-only
|
|
135
|
+
- Group/Peer: group, group-hover:*, peer, peer-checked:*
|
|
136
|
+
- Aspect: aspect-square, aspect-video
|
|
137
|
+
- Text: line-clamp-*, text-ellipsis
|
|
138
|
+
- Animation: animate-spin, animate-pulse, animate-bounce
|
|
139
|
+
- Any other Tailwind structural/layout utility not listed above is also allowed — as long as it does not hardcode colors, spacing values, font sizes, or other visual values that exist as tokens
|
|
140
|
+
- ⚠️ Utilities that implicitly use color (divide, border) must be paired with a token color:
|
|
141
|
+
`divide-y divide-border` ✅ / `divide-y` alone ❌ (may not adapt to dark mode)
|
|
142
|
+
`border border-border` ✅ / `border` alone ❌
|
|
143
|
+
3. **Tailwind visual utilities using token values** — gradients, transforms, transitions:
|
|
144
|
+
- Gradient: bg-gradient-to-r, from-primary, to-secondary (token colors only)
|
|
145
|
+
- Transform: rotate-45, translate-x-1
|
|
146
|
+
- Transition: transition-all, transition-colors (with token durations)
|
|
147
|
+
- Backdrop: backdrop-blur, backdrop-blur-sm
|
|
148
|
+
4. **Responsive prefixes** — sm:, md:, lg:, xl:, 2xl: (on allowed classes only)
|
|
149
|
+
5. **State prefixes** — hover:, focus:, active:, disabled: (on allowed classes only, token values only)
|
|
150
|
+
6. **Layout dimension arbitrary values** — height and width ONLY: h-[300px], max-w-[1200px], min-h-screen (when no token fits)
|
|
151
|
+
7. **Opacity modifier** — append `/0-100` to any token color for transparency:
|
|
152
|
+
- `bg-primary/50`, `text-foreground/70`, `border-border/30`
|
|
153
|
+
- Do NOT use `opacity-*` utility as a workaround — it affects the entire element including children
|
|
154
|
+
- `bg-primary/10` ✅ (only background is transparent) / `bg-primary opacity-10` ❌ (children also become transparent)
|
|
155
|
+
|
|
156
|
+
**Everything not in this list is FORBIDDEN.**
|
|
157
|
+
|
|
158
|
+
⚠️ **Gradient/visual utilities must use token colors only:** `from-primary to-secondary` ✅ / `from-blue-500 to-purple-600` ❌
|
|
159
|
+
|
|
160
|
+
## ❌ Forbidden — Never Use These
|
|
161
|
+
|
|
162
|
+
| Category | Forbidden | Use Instead |
|
|
163
|
+
|---|---|---|
|
|
164
|
+
| Raw colors | `bg-blue-500`, `text-gray-700`, `bg-white` | `bg-primary`, `text-foreground`, `bg-background` |
|
|
165
|
+
| Dark prefix | `dark:bg-gray-900`, `dark:text-white` | Semantic tokens auto-adapt |
|
|
166
|
+
| Arbitrary values | `p-[17px]`, `text-[13px]`, `rounded-[7px]`, `z-[999]` | `p-4`, `text-sm`, `rounded-md`, `z-modal` |
|
|
167
|
+
| Icon sizing | `w-4 h-4`, `w-5 h-5` | `icon-sm`, `icon-md` |
|
|
168
|
+
| Raw durations | `duration-150`, `duration-200` | `duration-micro`, `duration-normal` |
|
|
169
|
+
| Raw shadows | `shadow-[0_2px_4px...]` | `shadow-sm` |
|
|
170
|
+
| Inline styles | `style={{ color: '#333' }}` | `className="text-foreground"` |
|
|
171
|
+
| @apply raw | `@apply bg-blue-500` | `@apply bg-primary` |
|
|
172
|
+
| Hardcoded hex | `#FF5733`, `rgb(51,51,51)` | Token classes |
|
|
173
|
+
|
|
174
|
+
## When User Requests Custom Values
|
|
175
|
+
|
|
176
|
+
If the user explicitly asks for a value outside the token system:
|
|
177
|
+
|
|
178
|
+
```
|
|
179
|
+
User: "Change this background to #FF5733"
|
|
180
|
+
|
|
181
|
+
AI: "This color is not in the token system.
|
|
182
|
+
Apply this custom value bypassing the tokens?
|
|
183
|
+
Or I can use an existing token (bg-primary, bg-error, etc.)."
|
|
184
|
+
|
|
185
|
+
User: "Apply it"
|
|
186
|
+
AI: → Apply the custom value
|
|
187
|
+
```
|
|
188
|
+
|
|
189
|
+
**Rule:**
|
|
190
|
+
- User request within token range → execute immediately
|
|
191
|
+
- User request outside token range → ask "custom value, bypass tokens?" → execute only after confirmation
|
|
192
|
+
- AI writing code on its own → token system ONLY, never bypass
|
|
193
|
+
|
|
194
|
+
---
|
|
195
|
+
|
|
196
|
+
## Dark Mode
|
|
197
|
+
|
|
198
|
+
Dark mode is **automatic** when using semantic tokens. No `dark:` prefix needed.
|
|
199
|
+
|
|
200
|
+
| ❌ NEVER | ✅ CORRECT |
|
|
201
|
+
|---|---|
|
|
202
|
+
| `bg-white dark:bg-gray-900` | `bg-background` |
|
|
203
|
+
| `text-gray-900 dark:text-gray-100` | `text-foreground` |
|
|
204
|
+
| `text-gray-500 dark:text-gray-400` | `text-muted` |
|
|
205
|
+
| `border-gray-200 dark:border-gray-700` | `border-border` |
|
|
206
|
+
|
|
207
|
+
### Dark Mode Toggle Implementation
|
|
208
|
+
|
|
209
|
+
Strategy: `dark` class on `<html>` element.
|
|
210
|
+
|
|
211
|
+
**Required behavior:**
|
|
212
|
+
1. Toggle adds/removes `dark` class on `<html>`
|
|
213
|
+
2. Persist choice to localStorage (key: `"theme"`)
|
|
214
|
+
3. On page load: check localStorage first → fallback to system preference
|
|
215
|
+
4. System preference: `window.matchMedia('(prefers-color-scheme: dark)')`
|
|
216
|
+
|
|
217
|
+
**Three states:** `'light'` | `'dark'` | `'system'`
|
|
218
|
+
|
|
219
|
+
**Minimal logic:**
|
|
220
|
+
- Read: `localStorage.getItem('theme') || 'system'`
|
|
221
|
+
- Apply: `document.documentElement.classList.toggle('dark', isDark)`
|
|
222
|
+
- Save: `localStorage.setItem('theme', newTheme)`
|
|
223
|
+
|
|
224
|
+
**Add a toggle button in the header** that cycles through light → dark → system (or light ↔ dark).
|
|
225
|
+
|
|
226
|
+
---
|
|
227
|
+
|
|
228
|
+
# ═══ SECTION 3: TOKEN REFERENCE ═══
|
|
229
|
+
|
|
230
|
+
> Token values depend on the user's project configuration.
|
|
231
|
+
> The names below are the API. Never assume specific hex values.
|
|
232
|
+
|
|
233
|
+
## Colors — Semantic (theme-aware, USE THESE)
|
|
234
|
+
|
|
235
|
+
**Background:**
|
|
236
|
+
- `background` — main page background
|
|
237
|
+
- `background-paper` — card/surface background
|
|
238
|
+
- `background-elevated` — elevated surface (above paper)
|
|
239
|
+
- `background-muted` — subtle/subdued background
|
|
240
|
+
|
|
241
|
+
**Text:**
|
|
242
|
+
- `foreground` (alias: `text`) — primary text
|
|
243
|
+
- `text-muted` — secondary text, lower emphasis
|
|
244
|
+
- `text-subtle` — tertiary text, lowest emphasis
|
|
245
|
+
- `text-link` — link color
|
|
246
|
+
- `text-primary` — brand-colored text
|
|
247
|
+
|
|
248
|
+
**Intent Status:**
|
|
249
|
+
- `text-info` / `text-success` / `text-error` / `text-warning`
|
|
250
|
+
|
|
251
|
+
**Intent Colors (each has 5 variants):**
|
|
252
|
+
- `primary` / `primary-hover` / `primary-active` / `primary-tint` / `primary-foreground`
|
|
253
|
+
- `secondary` / `secondary-hover` / `secondary-active` / `secondary-tint` / `secondary-foreground`
|
|
254
|
+
- `success` / `success-hover` / `success-active` / `success-tint` / `success-foreground`
|
|
255
|
+
- `warning` / `warning-hover` / `warning-active` / `warning-tint` / `warning-foreground`
|
|
256
|
+
- `error` / `error-hover` / `error-active` / `error-tint` / `error-foreground`
|
|
257
|
+
- `info` / `info-hover` / `info-active` / `info-tint` / `info-foreground`
|
|
258
|
+
|
|
259
|
+
**Border:**
|
|
260
|
+
- `border` — default border
|
|
261
|
+
- `border-subtle` — lighter/softer border
|
|
262
|
+
- `border-strong` — stronger/darker border
|
|
263
|
+
|
|
264
|
+
**State:**
|
|
265
|
+
- `disabled` — disabled background
|
|
266
|
+
- `disabled-text` — disabled text
|
|
267
|
+
- `focus-ring` — focus indicator
|
|
268
|
+
- `focus-ring-error` — error focus indicator
|
|
269
|
+
|
|
270
|
+
## Colors — Primitive (raw palette, use sparingly)
|
|
271
|
+
|
|
272
|
+
7 color families, each with 50–900 shades (10 steps):
|
|
273
|
+
`gray`, `primary`, `secondary`, `blue`, `green`, `red`, `yellow`
|
|
274
|
+
|
|
275
|
+
Usage: `bg-primary-100`, `text-gray-600`, `border-blue-300`
|
|
276
|
+
**Prefer semantic tokens over primitives** — primitives don't auto-adapt to dark mode.
|
|
277
|
+
**Note:** The actual colors of each palette depend on the user's token configuration.
|
|
278
|
+
|
|
279
|
+
## Spacing
|
|
280
|
+
|
|
281
|
+
| Token | Value | Common Use |
|
|
282
|
+
|---|---|---|
|
|
283
|
+
| `0` | 0 | Reset |
|
|
284
|
+
| `0.5` | 2px | Micro gap |
|
|
285
|
+
| `1` | 4px | Tight gap |
|
|
286
|
+
| `1.5` | 6px | Small gap |
|
|
287
|
+
| `2` | 8px | Default gap |
|
|
288
|
+
| `2.5` | 10px | — |
|
|
289
|
+
| `3` | 12px | Section gap |
|
|
290
|
+
| `4` | 16px | Card padding |
|
|
291
|
+
| `5` | 20px | — |
|
|
292
|
+
| `6` | 24px | Section padding |
|
|
293
|
+
| `7` | 28px | — |
|
|
294
|
+
| `8` | 32px | Large padding |
|
|
295
|
+
| `10` | 40px | — |
|
|
296
|
+
| `12` | 48px | — |
|
|
297
|
+
| `14` | 56px | — |
|
|
298
|
+
| `16` | 64px | Page margin |
|
|
299
|
+
| `20` | 80px | — |
|
|
300
|
+
| `24` | 96px | Hero spacing |
|
|
301
|
+
|
|
302
|
+
## Typography
|
|
303
|
+
|
|
304
|
+
**Font Families:**
|
|
305
|
+
- `font-sans` — sans-serif body font (user-defined)
|
|
306
|
+
- `font-mono` — monospace code font (user-defined)
|
|
307
|
+
|
|
308
|
+
**Font Sizes:**
|
|
309
|
+
|
|
310
|
+
| Class | Size | Line Height | Use Case |
|
|
311
|
+
|---|---|---|---|
|
|
312
|
+
| `text-2xs` | 11px | 16px | Fine print |
|
|
313
|
+
| `text-xs` | 12px | 18px | Caption, badge |
|
|
314
|
+
| `text-sm` | 13px | 20px | Body small, table |
|
|
315
|
+
| `text-md` | 14px | 22px | Body default |
|
|
316
|
+
| `text-base` | 16px | 26px | Body large |
|
|
317
|
+
| `text-lg` | 18px | 28px | Subtitle |
|
|
318
|
+
| `text-xl` | 20px | 30px | Title |
|
|
319
|
+
| `text-2xl` | 24px | 34px | Heading |
|
|
320
|
+
| `text-3xl` | 30px | 40px | Hero subtitle |
|
|
321
|
+
| `text-4xl` | 36px | 46px | Hero title |
|
|
322
|
+
| `text-5xl` | 48px | 58px | Display |
|
|
323
|
+
|
|
324
|
+
**Font Weights:**
|
|
325
|
+
- `font-normal` (400) — body text
|
|
326
|
+
- `font-semibold` (600) — labels, emphasis
|
|
327
|
+
- `font-bold` (700) — headings
|
|
328
|
+
|
|
329
|
+
## Border Radius
|
|
330
|
+
|
|
331
|
+
| Class | Value | Use Case |
|
|
332
|
+
|---|---|---|
|
|
333
|
+
| `rounded-none` | 0px | Square |
|
|
334
|
+
| `rounded-sm` | 2px | Subtle |
|
|
335
|
+
| `rounded-base` | 4px | Default (checkbox) |
|
|
336
|
+
| `rounded-md` | 6px | Default (button) |
|
|
337
|
+
| `rounded-lg` | 8px | Card, input |
|
|
338
|
+
| `rounded-xl` | 12px | Large card |
|
|
339
|
+
| `rounded-2xl` | 16px | Modal |
|
|
340
|
+
| `rounded-3xl` | 24px | Pill shape |
|
|
341
|
+
| `rounded-full` | 9999px | Circle, pill button |
|
|
342
|
+
|
|
343
|
+
## Shadows
|
|
344
|
+
|
|
345
|
+
| Class | Description |
|
|
346
|
+
|---|---|
|
|
347
|
+
| `shadow-xs` | Barely visible — subtle elevation |
|
|
348
|
+
| `shadow-sm` | Default card shadow |
|
|
349
|
+
| `shadow-md` | Dropdown, popover |
|
|
350
|
+
| `shadow-lg` | Modal, drawer |
|
|
351
|
+
| `shadow-xl` | Floating action |
|
|
352
|
+
|
|
353
|
+
Shadows automatically adapt between light and dark themes.
|
|
354
|
+
|
|
355
|
+
## Z-Index (named stack)
|
|
356
|
+
|
|
357
|
+
| Class | Value | Use Case |
|
|
358
|
+
|---|---|---|
|
|
359
|
+
| `z-0` | 0 | Default |
|
|
360
|
+
| `z-10`–`z-50` | 10–50 | Layout layers |
|
|
361
|
+
| `z-sticky` | 100 | Sticky header |
|
|
362
|
+
| `z-dropdown` | 1000 | Dropdown menu |
|
|
363
|
+
| `z-overlay` | 1100 | Overlay/backdrop |
|
|
364
|
+
| `z-modal` | 2000 | Modal dialog |
|
|
365
|
+
| `z-popover` | 2100 | Popover |
|
|
366
|
+
| `z-tooltip` | 2200 | Tooltip |
|
|
367
|
+
| `z-toast` | 3000 | Toast notification |
|
|
368
|
+
|
|
369
|
+
**Never use arbitrary z-index values.** Always use these named tokens.
|
|
370
|
+
|
|
371
|
+
## Icon Sizes (6-step scale)
|
|
372
|
+
|
|
373
|
+
| Class | Size | Use Case |
|
|
374
|
+
|---|---|---|
|
|
375
|
+
| `icon-2xs` | 12px | Badge icon, small indicator |
|
|
376
|
+
| `icon-xs` | 14px | xs/sm button icon, tag |
|
|
377
|
+
| `icon-sm` | 16px | Default button icon, form element |
|
|
378
|
+
| `icon-md` | 20px | Navigation, default icon button |
|
|
379
|
+
| `icon-lg` | 24px | Large icon button, card |
|
|
380
|
+
| `icon-xl` | 32px | Hero, feature icon |
|
|
381
|
+
|
|
382
|
+
**Never use `w-4 h-4` for icons.** Always use `icon-{size}` classes.
|
|
383
|
+
|
|
384
|
+
## Duration
|
|
385
|
+
|
|
386
|
+
| Class | Value | Use Case |
|
|
387
|
+
|---|---|---|
|
|
388
|
+
| `duration-instant` | 0ms | No animation |
|
|
389
|
+
| `duration-fast` | 100ms | Micro interactions |
|
|
390
|
+
| `duration-micro` | 150ms | Button press, toggle |
|
|
391
|
+
| `duration-normal` | 200ms | Default transition |
|
|
392
|
+
| `duration-slow` | 300ms | Panel slide |
|
|
393
|
+
| `duration-slower` | 400ms | Page transition |
|
|
394
|
+
| `duration-slowest` | 500ms | Complex animation |
|
|
395
|
+
| `duration-spin` | 1000ms | Spinner rotation |
|
|
396
|
+
|
|
397
|
+
## Easing
|
|
398
|
+
|
|
399
|
+
- `ease-linear` — constant speed
|
|
400
|
+
- `ease-ease` — natural acceleration/deceleration
|
|
401
|
+
- `ease-ease-in` — slow start
|
|
402
|
+
- `ease-ease-out` — slow end
|
|
403
|
+
- `ease-ease-in-out` — slow start and end
|
|
404
|
+
|
|
405
|
+
## Opacity
|
|
406
|
+
|
|
407
|
+
21-step scale: `opacity-0`, `opacity-5`, `opacity-10` ... `opacity-95`, `opacity-100`
|
|
408
|
+
Each 5% increment. Values: 0, 0.05, 0.10 ... 0.95, 1.0
|
|
409
|
+
|
|
410
|
+
## Scale (Transform)
|
|
411
|
+
|
|
412
|
+
| Class | Value | Use Case |
|
|
413
|
+
|---|---|---|
|
|
414
|
+
| `scale-50` | 0.5 | Half size |
|
|
415
|
+
| `scale-75` | 0.75 | Reduced |
|
|
416
|
+
| `scale-95` | 0.95 | Hover shrink |
|
|
417
|
+
| `scale-pressed` | 0.98 | Button press effect |
|
|
418
|
+
|
|
419
|
+
## Breakpoints
|
|
420
|
+
|
|
421
|
+
| Class | Min Width | Use Case |
|
|
422
|
+
|---|---|---|
|
|
423
|
+
| `sm:` | 640px | Mobile landscape |
|
|
424
|
+
| `md:` | 768px | Tablet |
|
|
425
|
+
| `lg:` | 1024px | Desktop |
|
|
426
|
+
| `xl:` | 1280px | Wide desktop |
|
|
427
|
+
| `2xl:` | 1536px | Ultra-wide |
|
|
428
|
+
|
|
429
|
+
---
|
|
430
|
+
|
|
431
|
+
# ═══ SECTION 4: TOKEN CUSTOMIZATION ═══
|
|
432
|
+
|
|
433
|
+
## ⛔ Rule for AI: Use Existing Tokens Only
|
|
434
|
+
|
|
435
|
+
The token system is comprehensive — semantic colors, primitives, spacing, typography, radius, shadows, z-index, icon sizes, duration, easing, opacity, scale, and breakpoints cover all UI needs.
|
|
436
|
+
|
|
437
|
+
**Every visual value you need already exists as a token.** Use it.
|
|
438
|
+
|
|
439
|
+
- **Always use token names** (`bg-primary`, `text-foreground`, `rounded-lg`) — never hardcode values
|
|
440
|
+
- **Never assume specific color values** — token values are defined by the user's project
|
|
441
|
+
- **Never add CSS variables, hex values, or arbitrary Tailwind values**
|
|
442
|
+
- **Token customization is the user's responsibility** — if the user needs custom values, they will handle it separately. See: https://7onic.design/components/theming
|
|
443
|
+
- **Never modify generated token files** — the following files are auto-generated from figma-tokens.json via sync-tokens. AI must never edit, add to, or delete from these files: `variables.css`, `light.css`, `dark.css`, `v3-preset.js`, `v4-theme.css`, `index.js`, `index.mjs`, `index.d.ts`, `tokens.json`
|
|
444
|
+
|
|
445
|
+
### Self-Check (after writing ANY code)
|
|
446
|
+
|
|
447
|
+
Before presenting code to the user, scan your own output for violations:
|
|
448
|
+
|
|
449
|
+
- [ ] Any raw color class? (`bg-blue-*`, `text-gray-*`, `bg-white`, `border-gray-*`)
|
|
450
|
+
- [ ] Any arbitrary value? (`p-[*]`, `text-[*]`, `rounded-[*]`, `z-[*]`)
|
|
451
|
+
- [ ] Any inline style? (`style={{ }}`)
|
|
452
|
+
- [ ] Any `dark:` prefix?
|
|
453
|
+
- [ ] Any `w-N h-N` for icons instead of `icon-*`?
|
|
454
|
+
- [ ] Any `divide-*` or `border` without a token color? (`divide-y` alone → `divide-y divide-border`)
|
|
455
|
+
- [ ] Any `opacity-*` on element instead of color modifier? (`bg-primary opacity-10` → `bg-primary/10`)
|
|
456
|
+
|
|
457
|
+
**If ANY violation is found → fix it before showing code to the user.**
|
|
458
|
+
**Do NOT present code with violations. Fix first, then present.**
|
|
459
|
+
|
|
460
|
+
---
|
|
461
|
+
|
|
462
|
+
- **When in doubt, check the documentation** — if token usage is unclear, refer to the official docs:
|
|
463
|
+
- Token pages: `https://7onic.design/design-tokens/{name}` (e.g., `/design-tokens/colors`, `/design-tokens/spacing`)
|
|
464
|
+
- Do not guess token values or usage — verify from the documentation first
|
|
465
|
+
|
|
466
|
+
---
|
|
467
|
+
|
|
468
|
+
## Links
|
|
469
|
+
|
|
470
|
+
- Documentation: https://7onic.design
|
|
471
|
+
- npm (tokens): https://npmjs.com/package/@7onic-ui/tokens
|
|
472
|
+
- npm (react): https://npmjs.com/package/@7onic-ui/react
|
|
473
|
+
- GitHub: https://github.com/itonys/7onic
|
|
474
|
+
- Full AI guide (tokens + components): https://7onic.design/llms-full.txt
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@7onic-ui/tokens",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.1",
|
|
4
4
|
"description": "Design tokens for 7onic Design System — CSS variables, Tailwind presets, JS, TypeScript",
|
|
5
5
|
"author": "7onic",
|
|
6
6
|
"license": "MIT",
|
|
@@ -42,7 +42,8 @@
|
|
|
42
42
|
"json",
|
|
43
43
|
"types",
|
|
44
44
|
"cli",
|
|
45
|
-
"figma-tokens.json"
|
|
45
|
+
"figma-tokens.json",
|
|
46
|
+
"llms.txt"
|
|
46
47
|
],
|
|
47
48
|
"bin": {
|
|
48
49
|
"sync-tokens": "./cli/sync.js"
|