@7onic-ui/tokens 0.3.1 → 0.3.3

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.
Files changed (8) hide show
  1. package/css/all.css +1 -2
  2. package/css/themes/dark.css +3 -3
  3. package/css/themes/light.css +1 -1
  4. package/css/variables.css +25 -4
  5. package/llms.txt +12 -1
  6. package/package.json +1 -2
  7. package/tailwind/v4.css +1 -2
  8. package/css/reset.css +0 -26
package/css/all.css CHANGED
@@ -1,7 +1,6 @@
1
1
  /* Auto-generated by sync-tokens — DO NOT EDIT */
2
- /* All-in-one CSS bundle: variables + light/dark themes + framework baseline */
2
+ /* All-in-one CSS bundle: variables + light/dark themes */
3
3
 
4
4
  @import './variables.css';
5
5
  @import './themes/light.css';
6
6
  @import './themes/dark.css';
7
- @import './reset.css';
package/css/themes/dark.css CHANGED
@@ -11,7 +11,7 @@
11
11
  */
12
12
 
13
13
  @media (prefers-color-scheme: dark) {
14
- :root:not([data-theme="light"]) {
14
+ html:root:not([data-theme="light"]) {
15
15
  /* Background */
16
16
  --color-background: var(--color-gray-900);
17
17
  --color-background-rgb: 34 34 37;
@@ -155,8 +155,8 @@
155
155
  }
156
156
  }
157
157
 
158
- :root[data-theme="dark"],
159
- :root.dark {
158
+ html:root[data-theme="dark"],
159
+ html:root.dark {
160
160
  /* Background */
161
161
  --color-background: var(--color-gray-900);
162
162
  --color-background-rgb: 34 34 37;
package/css/themes/light.css CHANGED
@@ -5,7 +5,7 @@
5
5
  * Usage: @import '@7onic-ui/tokens/css/themes/light.css';
6
6
  */
7
7
 
8
- :root {
8
+ html:root {
9
9
  /* Background */
10
10
  --color-background: var(--color-white);
11
11
  --color-background-rgb: 255 255 255;
package/css/variables.css CHANGED
@@ -934,12 +934,33 @@
934
934
 
935
935
  /* ========================================
936
936
  Framework Compat Aliases
937
- Next.js 15 / Tailwind v4 convention mapping.
938
- html:root (0,1,1) > :root (0,1,0) — wins cascade
939
- regardless of source order vs framework defaults.
937
+ Maps Next.js 15 / Tailwind v4 convention
938
+ (--background, --foreground) to our tokens.
940
939
  ======================================== */
941
940
 
942
941
  html:root {
943
942
  --background: var(--color-background);
944
- --foreground: var(--color-foreground);
943
+ --foreground: var(--color-text);
944
+ color-scheme: light dark;
945
+ }
946
+
947
+ /* ========================================
948
+ Body Baseline
949
+ Overrides framework default body rules.
950
+ ======================================== */
951
+
952
+ html body {
953
+ background-color: var(--color-background);
954
+ color: var(--color-foreground);
955
+ font-family: var(--font-family-sans);
956
+ display: block;
957
+ place-items: initial;
958
+ min-width: auto;
959
+ margin: 0;
960
+ }
961
+
962
+ html body code,
963
+ html body pre,
964
+ html body kbd {
965
+ font-family: var(--font-family-mono);
945
966
  }
package/llms.txt CHANGED
@@ -78,6 +78,17 @@ module.exports = {
78
78
  <body class="bg-background text-foreground">
79
79
  ```
80
80
 
81
+ **Font baseline (automatic — do NOT add manually):**
82
+ `variables.css` import automatically applies:
83
+ - `html body { font-family: var(--font-family-sans) }` — Inter by default
84
+ - `html body code, pre, kbd { font-family: var(--font-family-mono) }` — monospace
85
+
86
+ Do NOT write `body { font-family: ... }` manually — it is already handled by the token import.
87
+ To use a custom font, override the CSS variable instead:
88
+ ```css
89
+ :root { --font-family-sans: 'Your Font', sans-serif; }
90
+ ```
91
+
81
92
  **2-4. Apply user's answers:**
82
93
 
83
94
  - Dark mode = yes → implement dark mode toggle (see below)
@@ -443,7 +454,7 @@ The token system is comprehensive — semantic colors, primitives, spacing, typo
443
454
  - **Never assume specific color values** — token values are defined by the user's project
444
455
  - **Never add CSS variables, hex values, or arbitrary Tailwind values**
445
456
  - **Token customization is the user's responsibility** — if the user needs custom values, they will handle it separately. See: https://7onic.design/components/theming
446
- - **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`, `reset.css`, `v3-preset.js`, `v4-theme.css`, `index.js`, `index.mjs`, `index.d.ts`, `tokens.json`
457
+ - **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`
447
458
 
448
459
  ### Self-Check (after writing ANY code)
449
460
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@7onic-ui/tokens",
3
- "version": "0.3.1",
3
+ "version": "0.3.3",
4
4
  "description": "Design tokens for 7onic — single source for design and code. CSS variables, Tailwind presets, JS, TypeScript",
5
5
  "author": "7onic",
6
6
  "license": "MIT",
@@ -27,7 +27,6 @@
27
27
  "./css/variables.css": "./css/variables.css",
28
28
  "./css/themes/light.css": "./css/themes/light.css",
29
29
  "./css/themes/dark.css": "./css/themes/dark.css",
30
- "./css/reset.css": "./css/reset.css",
31
30
  "./tailwind/v3-preset": "./tailwind/v3-preset.js",
32
31
  "./tailwind/v3-preset.js": "./tailwind/v3-preset.js",
33
32
  "./tailwind/v4-theme": "./tailwind/v4-theme.css",
package/tailwind/v4.css CHANGED
@@ -1,8 +1,7 @@
1
1
  /* Auto-generated by sync-tokens — DO NOT EDIT */
2
- /* All-in-one Tailwind v4 bundle: variables + themes + reset + v4 mapping */
2
+ /* All-in-one Tailwind v4 bundle: variables + themes + v4 mapping */
3
3
 
4
4
  @import '../css/variables.css';
5
5
  @import '../css/themes/light.css';
6
6
  @import '../css/themes/dark.css';
7
- @import '../css/reset.css';
8
7
  @import './v4-theme.css';
package/css/reset.css DELETED
@@ -1,26 +0,0 @@
1
- /**
2
- * Framework template baseline reset
3
- * ⚠️ Auto-generated — DO NOT EDIT
4
- *
5
- * Bundled into all.css and tailwind/v4.css.
6
- * Opt-out: import individual files (variables.css + themes/*) instead of bundle.
7
- *
8
- * Selector specificity: html body (0,0,2) > body (0,0,1)
9
- * Wins over Vite/Next.js default body rules regardless of source order.
10
- *
11
- * Override paths:
12
- * 1. Tailwind class on <body> — most common, most idiomatic
13
- * 2. Same-selector CSS after our import — source order wins
14
- * 3. Skip bundle, import individual files — complete opt-out
15
- *
16
- * See: docs/decisions/NEXTJS-FRAMEWORK-COMPAT-STRATEGY.md
17
- */
18
-
19
- html body {
20
- background-color: var(--color-background);
21
- color: var(--color-foreground);
22
- display: block;
23
- place-items: initial;
24
- min-width: auto;
25
- margin: 0;
26
- }