@nebutra/tokens 0.1.0 → 0.1.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/.turbo/turbo-build.log +8 -0
- package/.turbo/turbo-typecheck.log +4 -0
- package/AGENTS.md +5 -2
- package/CHANGELOG.md +33 -0
- package/DESIGN.md +30 -6
- package/LICENSE +21 -676
- package/README.md +41 -8
- package/brands/gsap/brand.json +180 -0
- package/brands/linear/brand.json +202 -0
- package/brands/notion/brand.json +189 -0
- package/brands/raycast/brand.json +167 -0
- package/brands/stripe/brand.json +183 -0
- package/brands/vanta/brand.json +198 -0
- package/brands/vercel/brand.json +207 -0
- package/package.json +18 -9
- package/recipe.css +114 -0
- package/scripts/compile-brand-run.ts +79 -0
- package/scripts/compile-brand.mjs +25 -0
- package/scripts/emit-skins-run.ts +62 -0
- package/scripts/emit-skins.mjs +31 -0
- package/scripts/sync-styles.mjs +29 -0
- package/skins/README.md +151 -0
- package/skins/gsap.css +247 -0
- package/skins/linear.css +282 -0
- package/skins/notion.css +248 -0
- package/skins/raycast.css +272 -0
- package/skins/stripe.css +248 -0
- package/skins/vanta.css +255 -0
- package/skins/vercel.css +283 -0
- package/src/brand-package/__tests__/compile-refero.test.ts +427 -0
- package/src/brand-package/__tests__/emit-css.test.ts +130 -0
- package/src/brand-package/apply-brand.ts +92 -0
- package/src/brand-package/compile-helpers.ts +170 -0
- package/src/brand-package/compile-refero.ts +69 -0
- package/src/brand-package/emit-css.ts +468 -0
- package/src/brand-package/hex-to-hsl.ts +100 -0
- package/src/brand-package/index.ts +71 -0
- package/src/brand-package/infer-recipe.ts +198 -0
- package/src/brand-package/normalize.ts +295 -0
- package/src/brand-package/presets/context.ts +17 -0
- package/src/brand-package/presets/generic.ts +214 -0
- package/src/brand-package/presets/gsap.ts +146 -0
- package/src/brand-package/presets/index.ts +31 -0
- package/src/brand-package/presets/linear.ts +183 -0
- package/src/brand-package/presets/notion.ts +208 -0
- package/src/brand-package/presets/raycast.ts +138 -0
- package/src/brand-package/presets/recipe.ts +61 -0
- package/src/brand-package/presets/stripe.ts +207 -0
- package/src/brand-package/presets/vanta.ts +220 -0
- package/src/brand-package/presets/vercel.ts +187 -0
- package/src/brand-package/types.ts +285 -0
- package/src/brand-package/use-brand.ts +207 -0
- package/src/brand-package/validate.ts +108 -0
- package/src/index.ts +31 -1
- package/src/theme-provider.tsx +21 -6
- package/styles.css +157 -79
- package/turbo.json +15 -0
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
|
|
2
|
+
> @nebutra/tokens@0.1.2 build /Users/tseka_luk/Documents/Nebutra-SaaS-Lab/Nebutra-Sailor/packages/design/tokens
|
|
3
|
+
> node scripts/sync-styles.mjs && node scripts/emit-skins.mjs
|
|
4
|
+
|
|
5
|
+
Formatted 1 file in 9ms. No fixes applied.
|
|
6
|
+
styles.css refreshed from @nebutra/design-tokens
|
|
7
|
+
emit-skins: 7 skins from brand.json → skins/*.css
|
|
8
|
+
gsap, linear, notion, raycast, stripe, vanta, vercel
|
package/AGENTS.md
CHANGED
|
@@ -12,7 +12,7 @@ base semantic CSS variables and the light/dark theme-provider surface.
|
|
|
12
12
|
## Source Of Truth
|
|
13
13
|
|
|
14
14
|
- Public package surface and exports: `package.json`, `src/index.ts`
|
|
15
|
-
- Canonical runtime token definitions
|
|
15
|
+
- Canonical runtime token definitions: `styles.css` (generated from `@nebutra/design-tokens` via `sync-styles.mjs`; keep `verify:parity` at 100%)
|
|
16
16
|
|
|
17
17
|
## Contract Boundaries
|
|
18
18
|
|
|
@@ -22,7 +22,10 @@ base semantic CSS variables and the light/dark theme-provider surface.
|
|
|
22
22
|
- Keep `THEME_IDS` and `DEFAULT_THEME` in `src/index.ts` aligned with the
|
|
23
23
|
actual light/dark behavior implemented in `styles.css`.
|
|
24
24
|
- This package owns the base light/dark token system only. Do not move named
|
|
25
|
-
product-
|
|
25
|
+
product-mood presets here. **Design-language catalog & global swap** belong in
|
|
26
|
+
`@nebutra/theme` (`languages.json`, `applyLanguage`, `skins.css`). Brand Package
|
|
27
|
+
*engine* (compile / emit / normalize) stays in this package (`brand-package/`).
|
|
28
|
+
Multi-mood oklch catalogs were deleted — never reintroduce a second root `@theme` primary.
|
|
26
29
|
- Preserve the package boundary between CSS tokens and component usage.
|
|
27
30
|
`@nebutra/ui` and apps should consume the exported CSS surface rather than
|
|
28
31
|
importing token internals.
|
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
# @nebutra/tokens
|
|
2
|
+
|
|
3
|
+
## 0.1.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Ship the MIT LICENSE file these packages have always declared but never included.
|
|
8
|
+
|
|
9
|
+
Every one of these declares `"license": "MIT"` in its manifest, and npm shows
|
|
10
|
+
that on the registry page — but the tarball carried no licence text at all.
|
|
11
|
+
MIT's own terms require the notice to accompany "all copies or substantial
|
|
12
|
+
portions of the Software", so a consumer vendoring one of these packages had
|
|
13
|
+
nothing to comply with.
|
|
14
|
+
|
|
15
|
+
No code changes. This is the licence text only, published so the tarballs
|
|
16
|
+
match what the manifests have been claiming.
|
|
17
|
+
|
|
18
|
+
`tests/architecture/release-surface.test.ts` now asserts the LICENSE _file_
|
|
19
|
+
exists and is MIT, not just the manifest _field_ — the field-only check is how
|
|
20
|
+
this went unnoticed, and is also how `create-sailor` shipped the full AGPL-3.0
|
|
21
|
+
text under an MIT declaration for its entire published history.
|
|
22
|
+
|
|
23
|
+
- Updated dependencies []:
|
|
24
|
+
- @nebutra/design-tokens@0.1.2
|
|
25
|
+
|
|
26
|
+
## 0.1.1
|
|
27
|
+
|
|
28
|
+
### Patch Changes
|
|
29
|
+
|
|
30
|
+
- Publish registry package metadata under the MIT license.
|
|
31
|
+
|
|
32
|
+
- Updated dependencies []:
|
|
33
|
+
- @nebutra/design-tokens@0.1.1
|
package/DESIGN.md
CHANGED
|
@@ -9,20 +9,36 @@
|
|
|
9
9
|
| Status | **★ Source of truth for runtime apps** |
|
|
10
10
|
| Source file | `packages/design/tokens/styles.css` |
|
|
11
11
|
| Tailwind integration | Tailwind v4 `@theme inline` block in same file |
|
|
12
|
-
| Re-exports | `ThemeProvider
|
|
12
|
+
| Re-exports | Custom `ThemeProvider` / `useTheme` (cookie + class; not next-themes) |
|
|
13
13
|
|
|
14
14
|
---
|
|
15
15
|
|
|
16
16
|
## 1. Identity
|
|
17
17
|
|
|
18
|
-
This package emits the **runtime CSS variables** consumed by every Nebutra app.
|
|
18
|
+
This package emits the **runtime CSS variables** consumed by every Nebutra app.
|
|
19
|
+
|
|
20
|
+
### App consumption contract (package-owned)
|
|
21
|
+
|
|
22
|
+
Apps should **not** hand-roll monorepo `@source` paths. Import the UI entry:
|
|
19
23
|
|
|
20
24
|
```css
|
|
21
|
-
/* apps
|
|
25
|
+
/* Simple apps */
|
|
26
|
+
@import "@nebutra/ui/styles/preset.css";
|
|
27
|
+
|
|
28
|
+
/* Or: tokens yourself + package-owned source scan */
|
|
22
29
|
@import "tailwindcss";
|
|
23
30
|
@import "@nebutra/tokens/styles.css";
|
|
31
|
+
@import "@nebutra/ui/styles/sources.css";
|
|
24
32
|
```
|
|
25
33
|
|
|
34
|
+
| Layer | Entry | Role |
|
|
35
|
+
|-------|-------|------|
|
|
36
|
+
| Tokens | `@nebutra/tokens/styles.css` | CSS variables + `@theme` only |
|
|
37
|
+
| UI sources | `@nebutra/ui/styles/sources.css` | Tailwind `@source` for CVA classes (owned by UI package) |
|
|
38
|
+
| UI preset | `@nebutra/ui/styles/preset.css` | tailwind + tokens + sources + fonts |
|
|
39
|
+
|
|
40
|
+
Tokens alone never style `Input`/`Button` — utilities come from scanning UI.
|
|
41
|
+
|
|
26
42
|
Tokens are organized in three concentric rings:
|
|
27
43
|
|
|
28
44
|
```
|
|
@@ -109,7 +125,14 @@ Scales: `--neutral-{1..12}`, `--blue-{1..12}`, `--cyan-{1..12}`. Light values ar
|
|
|
109
125
|
| `--brand-primary` | `var(--blue-9)` → `#0033FE` | Primary brand |
|
|
110
126
|
| `--brand-accent` | `var(--cyan-9)` → `#0BF1C3` | Accent |
|
|
111
127
|
| `--brand-tertiary` | `#8B5CF6` | Data viz / infra tags only |
|
|
112
|
-
| `--
|
|
128
|
+
| `--primary` | `228 85% 56%` → soft blue for UI | **Canonical product CTA** (`bg-primary`, `Button` default) |
|
|
129
|
+
| `--brand-primary` | `#0033FE` | VI 云毓蓝 — logo / identity |
|
|
130
|
+
| `--brand-gradient` | `hsl(var(--primary))` | **Legacy alias of `--primary`**, not a separate color. Prefer `Button` / `bg-primary`. |
|
|
131
|
+
| `--brand-gradient-logo` | `linear-gradient(135deg, #0033FE → #00A2E9 → #0BF1C3)` | Logo/VI only (OKLab mid stop) |
|
|
132
|
+
|
|
133
|
+
**CTA rule:** use existing `@nebutra/ui` `Button` (`bg-primary`). Do not invent parallel “action” colors. `#0033FE` is identity; UI softens via `--primary` already defined in `themes/light.json`.
|
|
134
|
+
|
|
135
|
+
**Logo gradient / dirty-mid rule:** `--brand-gradient-logo` must keep **three hex stops** ending in `#0033fe` → `#00a2e9` → `#0bf1c3` (see `semantic.json` + `verify-brand-token-sync`). Mid `#00a2e9` is the OKLab midpoint — prevents soft/gray mids on large VI surfaces. Product chrome must not reintroduce multi-stop blue→cyan as button fills. Full guidance: [`packages/design/brand/DESIGN.md` §2.2](../brand/DESIGN.md#22-brand-gradient).
|
|
113
136
|
|
|
114
137
|
### 2.4 Semantic theme tokens (HSL triplets — Tailwind compatible)
|
|
115
138
|
|
|
@@ -293,9 +316,9 @@ import { colors } from "@nebutra/ui/theme"; // deprecated
|
|
|
293
316
|
|
|
294
317
|
## 5. Theming
|
|
295
318
|
|
|
296
|
-
Light/dark switching: handled by `
|
|
319
|
+
Light/dark switching: handled by `@nebutra/tokens` `ThemeProvider` via the `class` attribute (`class="dark"`). The `.dark` selector inside `styles.css` (generated from design-tokens) overrides every semantic token plus inverts the 12-step scales (step 1 = darkest, step 12 = lightest in dark mode).
|
|
297
320
|
|
|
298
|
-
For
|
|
321
|
+
For **design-language swap** (Brand Packages / `applyLanguage`), see [`packages/design/theme/DESIGN.md`](../theme/DESIGN.md).
|
|
299
322
|
|
|
300
323
|
---
|
|
301
324
|
|
|
@@ -304,6 +327,7 @@ For the **multi-theme product feature** (6 oklch presets), see [`packages/design
|
|
|
304
327
|
| Surface | Status |
|
|
305
328
|
|--------|--------|
|
|
306
329
|
| Brand color hex anchors (`#0033FE`, `#0BF1C3`, `--nebutra-neutral-{50..950}`) | **Locked** |
|
|
330
|
+
| UI CTA color | Use `--primary` / `Button`; `--brand-gradient` is a legacy alias of `--primary` |
|
|
307
331
|
| 12-step semantic ladder positions (1–12 meaning) | **Locked** |
|
|
308
332
|
| Container widths | **Locked** |
|
|
309
333
|
| Radius scale values | **Locked** |
|