@7onic-ui/tokens 0.3.4 → 0.3.6

package/cli/sync.js

@@ -925,6 +925,7 @@ function generateVariablesCss(tokens) {
   lines.push(`  --background: var(--color-background);`);
   lines.push(`  --foreground: var(--color-text);`);
   lines.push(`  color-scheme: light dark;`);
+  lines.push(`  height: auto;`);
   lines.push(`}`);
   lines.push(``);
   lines.push(`/* ========================================`);
@@ -934,11 +935,12 @@ function generateVariablesCss(tokens) {
   lines.push(``);
   lines.push(`html body {`);
   lines.push(`  background-color: var(--color-background);`);
-  lines.push(`  color: var(--color-foreground);`);
+  lines.push(`  color: var(--color-text);`);
   lines.push(`  font-family: var(--font-family-sans);`);
   lines.push(`  display: block;`);
   lines.push(`  place-items: initial;`);
   lines.push(`  min-width: auto;`);
+  lines.push(`  min-height: auto;`);
   lines.push(`  margin: 0;`);
   lines.push(`}`);
   lines.push(``);

package/css/variables.css

@@ -934,7 +934,7 @@
 
 /* ========================================
    Framework Compat Aliases
-   Maps Next.js 15 / Tailwind v4 convention
+   Maps Next.js / Tailwind v4 convention
    (--background, --foreground) to our tokens.
    ======================================== */
 
@@ -942,20 +942,22 @@ html:root {
   --background: var(--color-background);
   --foreground: var(--color-text);
   color-scheme: light dark;
+  height: auto;
 }
 
 /* ========================================
-   Body Baseline
+   Body Baseline for Next.js / Vite resets
    Overrides framework default body rules.
    ======================================== */
 
 html body {
   background-color: var(--color-background);
-  color: var(--foreground);
+  color: var(--color-text);
   font-family: var(--font-family-sans);
   display: block;
   place-items: initial;
   min-width: auto;
+  min-height: auto;
   margin: 0;
 }
 

package/llms.txt

@@ -26,85 +26,21 @@ Before writing any code, present this checklist and wait for answers:
 
 **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.
 
-### Step 2: Execute full setup (all at once, do not skip any)
+### Step 2: Install / Setup
 
-After receiving answers, execute ALL of the following in order. Every step is mandatory.
+⚠️ **DO NOT GUESS** — token install procedures evolve with each Tailwind / framework version. Before writing any code, AI **MUST** fetch the live pages below and follow their instructions verbatim:
 
-**2-1. Install package (skip if already installed):**
-```bash
-npm install @7onic-ui/tokens
-```
-> Check package.json first. If already listed in dependencies, skip this step.
-
-**2-2. Create or update globals.css with token imports:**
-
-**How to detect Tailwind version:**
-- `tailwind.config.js` (or `.ts`) exists → **v3**
-- No config file → **v4** (uses CSS-based configuration)
-
-**New project (Tailwind v4):**
-```css
-/* globals.css (Next.js) or src/index.css (Vite) — ALL imports are required, do not skip any */
-@import "tailwindcss";
-@import "@7onic-ui/tokens/css/variables.css";
-@import "@7onic-ui/tokens/css/themes/light.css";
-@import "@7onic-ui/tokens/css/themes/dark.css";    /* omit ONLY if dark mode = no */
-@import "@7onic-ui/tokens/tailwind/v4-theme.css";
-```
-
-> **Vite + Tailwind v4**: `npx 7onic init` auto-injects `@import "tailwindcss"` if not present, and automatically configures the `@/` path alias (`tsconfig.app.json` + `vite.config.ts`). No manual CSS or alias setup needed.
-
-**Existing project with Tailwind v3** (detect from tailwind.config.js):
-```css
-/* globals.css — @import must come BEFORE @tailwind directives */
-@import '@7onic-ui/tokens/css/variables.css';
-@import '@7onic-ui/tokens/css/themes/light.css';
-@import '@7onic-ui/tokens/css/themes/dark.css';    /* omit ONLY if dark mode = no */
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-```
-```js
-// tailwind.config.js — add preset
-const preset = require('@7onic-ui/tokens/tailwind/v3-preset')
-module.exports = {
-  presets: [preset],
-  content: ['./src/**/*.{js,ts,jsx,tsx}'],
-}
-```
-
-**2-3. Set body classes:**
-```html
-<body class="bg-background text-foreground">
-```
-
-**Font baseline (automatic — do NOT add manually):**
-`variables.css` import automatically applies:
-- `html body { font-family: var(--font-family-sans) }` — Inter by default
-- `html body code, pre, kbd { font-family: var(--font-family-mono) }` — monospace
-
-Do NOT write `body { font-family: ... }` manually — it is already handled by the token import.
-To use a custom font, override the CSS variable instead:
-```css
-:root { --font-family-sans: 'Your Font', sans-serif; }
-```
-
-**2-4. Apply user's answers:**
+- **Official tokens install page (SSOT)**: https://7onic.design/design-tokens/installation
+- **Tailwind CSS official**: https://tailwindcss.com/docs/installation
 
-- Dark mode = yes → implement dark mode toggle (see below)
-- Custom font → load font (next/font for Next.js, CDN for Vite) + set `--font-family-sans`
-- Locale includes Japanese → load Noto Sans JP font
-- Locale includes Korean → load Noto Sans KR font
+The install instructions are intentionally **not duplicated in this file**. Setup details (`@7onic-ui/tokens` install, `tailwind.config.js` preset, `globals.css` imports, font baseline, dark mode toggle, etc.) are version-sensitive and change frequently — always defer to the live documentation above.
 
-**2-5. Verify setup is complete before writing any UI code:**
-- [ ] Package installed (@7onic-ui/tokens)
-- [ ] globals.css has ALL required imports in correct order
-- [ ] Body has `bg-background text-foreground`
-- [ ] Dark mode toggle (if selected)
-- [ ] Font loaded (if custom)
-- [ ] CJK fonts loaded (if applicable)
+Apply user's answers from Step 1 after the install page steps are complete:
+- Dark mode = yes → implement dark mode toggle (see below in this file)
+- Custom font → override `--font-family-sans` per the install page guidance
+- Japanese / Korean locale → load Noto Sans JP / KR
 
-⛔ **Do NOT proceed to Step 3 until all checks pass.**
+⛔ **Do NOT proceed to Step 3 until install page setup is verified.**
 
 ### Icon Import Pattern (lucide-react)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@7onic-ui/tokens",
-  "version": "0.3.4",
+  "version": "0.3.6",
   "description": "Design tokens for 7onic — single source for design and code. CSS variables, Tailwind presets, JS, TypeScript",
   "author": "7onic",
   "license": "MIT",