@n3wth/ui 0.7.0 → 0.8.0
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/theme.css +86 -0
- package/package.json +4 -3
package/dist/theme.css
ADDED
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
/* ============================================================
|
|
2
|
+
@n3wth/ui — canonical design tokens (Tailwind v4 @theme only)
|
|
3
|
+
|
|
4
|
+
Base-style-free token export. Import this in any Tailwind v4 app to
|
|
5
|
+
generate utilities (bg-bg, text-ink, border-rail...) AND get the
|
|
6
|
+
var(--color-*) custom properties, WITHOUT pulling in @n3wth/ui's
|
|
7
|
+
fonts or base reset:
|
|
8
|
+
|
|
9
|
+
@import 'tailwindcss';
|
|
10
|
+
@import '@n3wth/ui/theme';
|
|
11
|
+
|
|
12
|
+
Single source of truth for n3wth.com, agents.n3wth.com,
|
|
13
|
+
garden.n3wth.com. Fonts are intentionally NOT set here — each app
|
|
14
|
+
declares its own (Geist via next/font, local @font-face, etc.).
|
|
15
|
+
Keep in sync with the @theme block in styles.css.
|
|
16
|
+
============================================================ */
|
|
17
|
+
|
|
18
|
+
@theme {
|
|
19
|
+
/* n3wth canonical palette — values match production */
|
|
20
|
+
--color-bg: #08090b;
|
|
21
|
+
--color-bg-soft: #0d0e10;
|
|
22
|
+
--color-bg-raise: #131316;
|
|
23
|
+
--color-ink: #f2f3f5;
|
|
24
|
+
--color-ink-dim: #9aa0a8;
|
|
25
|
+
--color-ink-faint: #62666d;
|
|
26
|
+
--color-ink-label: #787c83;
|
|
27
|
+
--color-ink-ghost: #2c2f34;
|
|
28
|
+
--color-rail: rgba(255, 255, 255, 0.09);
|
|
29
|
+
--color-rail-strong: rgba(255, 255, 255, 0.17);
|
|
30
|
+
--color-accent-rail: rgba(255, 255, 255, 0.32);
|
|
31
|
+
--color-accent: #ffffff;
|
|
32
|
+
--color-accent-dim: #d4d6da;
|
|
33
|
+
--color-accent-ink: #08090b;
|
|
34
|
+
|
|
35
|
+
/* Legacy Apple-style scale (kept for existing @n3wth/ui components) */
|
|
36
|
+
--color-bg-secondary: #0a0a0a;
|
|
37
|
+
--color-white: #ffffff;
|
|
38
|
+
--color-grey-100: #f5f5f7;
|
|
39
|
+
--color-grey-200: #e8e8ed;
|
|
40
|
+
--color-grey-300: #c7c7cc;
|
|
41
|
+
--color-grey-400: #86868b;
|
|
42
|
+
--color-grey-600: #6e6e73;
|
|
43
|
+
--color-grey-800: #1d1d1f;
|
|
44
|
+
--color-accent-soft: rgba(255, 255, 255, 0.15);
|
|
45
|
+
|
|
46
|
+
/* Category colors */
|
|
47
|
+
--color-sage: #30d158;
|
|
48
|
+
--color-coral: #ff6961;
|
|
49
|
+
--color-mint: #64d2ff;
|
|
50
|
+
--color-gold: #ffd60a;
|
|
51
|
+
|
|
52
|
+
/* Glass effect */
|
|
53
|
+
--glass-bg: rgba(255, 255, 255, 0.05);
|
|
54
|
+
--glass-border: rgba(255, 255, 255, 0.1);
|
|
55
|
+
--glass-highlight: rgba(255, 255, 255, 0.15);
|
|
56
|
+
|
|
57
|
+
/* Semantic colors */
|
|
58
|
+
--color-success: #30d158;
|
|
59
|
+
--color-success-bg: rgba(48, 209, 88, 0.1);
|
|
60
|
+
--color-warning: #ffd60a;
|
|
61
|
+
--color-warning-bg: rgba(255, 214, 10, 0.1);
|
|
62
|
+
--color-error: #ff6961;
|
|
63
|
+
--color-error-bg: rgba(255, 105, 97, 0.1);
|
|
64
|
+
--color-info: #64d2ff;
|
|
65
|
+
--color-info-bg: rgba(100, 210, 255, 0.1);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
/* Bare-name runtime aliases (--bg, --ink, --accent...) so apps that
|
|
69
|
+
reference these via var() inherit canonical values. */
|
|
70
|
+
:root {
|
|
71
|
+
--bg: var(--color-bg);
|
|
72
|
+
--bg-soft: var(--color-bg-soft);
|
|
73
|
+
--bg-raise: var(--color-bg-raise);
|
|
74
|
+
--ink: var(--color-ink);
|
|
75
|
+
--ink-dim: var(--color-ink-dim);
|
|
76
|
+
--ink-faint: var(--color-ink-faint);
|
|
77
|
+
--ink-label: var(--color-ink-label);
|
|
78
|
+
--ink-ghost: var(--color-ink-ghost);
|
|
79
|
+
--rail: var(--color-rail);
|
|
80
|
+
--rail-strong: var(--color-rail-strong);
|
|
81
|
+
--accent-rail: var(--color-accent-rail);
|
|
82
|
+
--accent: var(--color-accent);
|
|
83
|
+
--accent-dim: var(--color-accent-dim);
|
|
84
|
+
--accent-ink: var(--color-accent-ink);
|
|
85
|
+
--ease: cubic-bezier(0.16, 1, 0.3, 1);
|
|
86
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@n3wth/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.8.0",
|
|
4
4
|
"description": "Atomic design system for Newth sites - flat, minimal, iOS-inspired",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -12,7 +12,8 @@
|
|
|
12
12
|
"types": "./dist/index.d.ts"
|
|
13
13
|
},
|
|
14
14
|
"./styles": "./dist/styles.css",
|
|
15
|
-
"./tailwind": "./tailwind.preset.js"
|
|
15
|
+
"./tailwind": "./tailwind.preset.js",
|
|
16
|
+
"./theme": "./dist/theme.css"
|
|
16
17
|
},
|
|
17
18
|
"files": [
|
|
18
19
|
"dist",
|
|
@@ -23,7 +24,7 @@
|
|
|
23
24
|
"dev": "vite build --watch",
|
|
24
25
|
"demo": "vite --config vite.demo.config.ts",
|
|
25
26
|
"demo:build": "vite build --config vite.demo.config.ts",
|
|
26
|
-
"build": "tsc && vite build && node -e \"const fs=require('fs');const css=fs.readFileSync('src/styles.css','utf8').replace(/@import 'tailwindcss';\\n\\n/,'');fs.writeFileSync('dist/styles.css',css)\"",
|
|
27
|
+
"build": "tsc && vite build && node -e \"const fs=require('fs');const css=fs.readFileSync('src/styles.css','utf8').replace(/@import 'tailwindcss';\\n\\n/,'');fs.writeFileSync('dist/styles.css',css)\" && node -e \"require('fs').copyFileSync('src/theme.css','dist/theme.css')\"",
|
|
27
28
|
"test": "vitest run",
|
|
28
29
|
"test:watch": "vitest",
|
|
29
30
|
"lint": "eslint src",
|