@nebutra/tokens 2.0.0 → 3.0.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.
Files changed (22) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/brand-package/index.d.ts +11 -5
  3. package/dist/brand-package/index.js +15 -14
  4. package/dist/brand-package/index.js.map +1 -1
  5. package/dist/brand-package/use-brand.js +15 -14
  6. package/dist/brand-package/use-brand.js.map +1 -1
  7. package/dist/index.js +15 -14
  8. package/dist/index.js.map +1 -1
  9. package/dist/values.d.ts +1192 -0
  10. package/dist/values.js +518 -0
  11. package/dist/values.js.map +1 -0
  12. package/package.json +11 -5
  13. package/recipe.css +28 -2
  14. package/skins/cosmos.css +8 -8
  15. package/skins/gsap.css +8 -8
  16. package/skins/linear.css +8 -8
  17. package/skins/notion.css +8 -8
  18. package/skins/raycast.css +8 -8
  19. package/skins/stripe.css +8 -8
  20. package/skins/vanta.css +6 -6
  21. package/skins/vercel.css +8 -8
  22. package/styles.css +396 -140
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nebutra/tokens",
3
- "version": "2.0.0",
3
+ "version": "3.0.0",
4
4
  "description": "Unified theme tokens and theme-provider entry for Nebutra apps",
5
5
  "private": false,
6
6
  "nebutra": {
@@ -36,11 +36,16 @@
36
36
  "types": "./dist/brand-package/use-brand.d.ts",
37
37
  "import": "./dist/brand-package/use-brand.js",
38
38
  "default": "./dist/brand-package/use-brand.js"
39
+ },
40
+ "./values": {
41
+ "types": "./dist/values.d.ts",
42
+ "import": "./dist/values.js",
43
+ "default": "./dist/values.js"
39
44
  }
40
45
  },
41
46
  "dependencies": {
42
- "@nebutra/design-tokens": "2.0.0",
43
- "@nebutra/fonts": "2.0.0"
47
+ "@nebutra/design-tokens": "3.0.0",
48
+ "@nebutra/fonts": "3.0.0"
44
49
  },
45
50
  "peerDependencies": {
46
51
  "react": "^19"
@@ -75,11 +80,12 @@
75
80
  "CHANGELOG.md"
76
81
  ],
77
82
  "scripts": {
78
- "build": "node scripts/sync-styles.mjs && node scripts/emit-skins.mjs && tsup",
83
+ "build": "node scripts/sync-styles.mjs && node scripts/emit-values.mjs && node scripts/emit-skins.mjs && tsup",
79
84
  "sync": "node scripts/sync-styles.mjs",
80
85
  "emit-skins": "node scripts/emit-skins.mjs",
81
86
  "compile-brand": "node scripts/compile-brand.mjs",
82
87
  "typecheck": "tsc --noEmit",
83
- "test": "tsx --test src/brand-package/__tests__/*.test.ts"
88
+ "test": "tsx --test src/brand-package/__tests__/*.test.ts src/__tests__/*.test.ts",
89
+ "emit-values": "node scripts/emit-values.mjs"
84
90
  }
85
91
  }
package/recipe.css CHANGED
@@ -61,12 +61,33 @@
61
61
  --control-font-size-md: 0.875rem; /* 14 */
62
62
  --control-font-size-lg: 1rem; /* 16 */
63
63
  --font-weight-medium: 500;
64
- --font-weight-heading: 600;
64
+ /* 500, not 600: headings in DM Sans read confident at 500 and the measured
65
+ consensus caps heading weight at 400–510 (Linear 510, Vercel 400). */
66
+ --font-weight-heading: 500;
67
+
68
+ /*
69
+ * The boundary of an unchecked checkbox / radio. WCAG 1.4.11 wants 3:1 against
70
+ * the surface for a control's edge; --input and --border are hairlines at
71
+ * ~1.2:1 and left an empty checkbox all but invisible. Derived from each
72
+ * language's own foreground and background — the perceptual midpoint — rather
73
+ * than a scale step, because a skin's --neutral-8 can be a pale mix (Stripe's
74
+ * is): measured 3.4:1 light / 5.5:1 dark on House, and it holds per brand.
75
+ */
76
+ --control-border: color-mix(in oklab, hsl(var(--foreground)) 50%, hsl(var(--background)));
65
77
 
66
78
  /* ── Elevation (free CSS; brand package replaces these) ───────── */
67
- --elevation-card: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
79
+ /* House: a card is a hairline (--edge-soft), not a lifted object. Measured
80
+ consensus — Vercel, OpenAI, Resend, Ramp ban card shadows outright; the
81
+ one float shadow is for overlays (--elevation-overlay). Seventeen call
82
+ sites were flattening Card by hand; a Brand Package can lift it again. */
83
+ --elevation-card: 0 0 #0000;
68
84
  --elevation-control: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.04));
69
85
  --elevation-raised: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
86
+ --elevation-overlay: var(
87
+ --shadow-xl,
88
+ 0 20px 25px -5px rgb(0 0 0 / 0.1),
89
+ 0 8px 10px -6px rgb(0 0 0 / 0.1)
90
+ );
70
91
 
71
92
  /* ── Badge default = brand mark (AI / identity chips; not CTA) ─── */
72
93
  --badge-default-bg: hsl(var(--brand-mark));
@@ -360,6 +381,11 @@
360
381
  inherits: true;
361
382
  }
362
383
 
384
+ @property --elevation-overlay {
385
+ syntax: "*";
386
+ inherits: true;
387
+ }
388
+
363
389
  /* ── Genuinely untypeable: bare HSL channel triplets ──────────────────────────
364
390
  * These carry channels ("222 47% 11%"), not colours — they exist to be wrapped
365
391
  * as `hsl(var(--brand-mark))` / `hsl(var(--brand-mark) / 0.08)`, which is what
package/skins/cosmos.css CHANGED
@@ -117,17 +117,17 @@ html[data-brand="cosmos"] {
117
117
 
118
118
  /* Typography */
119
119
  --font-sans:
120
- var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
121
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
120
+ var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia, var(--font-misans, "MiSans"),
121
+ "PingFang SC", ui-serif, serif;
122
122
  --font-cn:
123
- var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
124
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
123
+ var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia, var(--font-misans, "MiSans"),
124
+ "PingFang SC", ui-serif, serif;
125
125
  --font-heading:
126
- var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
127
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
126
+ var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia, var(--font-misans, "MiSans"),
127
+ "PingFang SC", ui-serif, serif;
128
128
  --font-display:
129
- var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia,
130
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, serif;
129
+ var(--font-reg-fraunces), "Fraunces", "GT Super", Georgia, var(--font-misans, "MiSans"),
130
+ "PingFang SC", ui-serif, serif;
131
131
  --font-mono: var(--font-jetbrains-mono), "JetBrains Mono", ui-monospace, monospace;
132
132
  --font-weight-heading: 350;
133
133
 
package/skins/gsap.css CHANGED
@@ -124,17 +124,17 @@ html[data-brand="gsap"] {
124
124
 
125
125
  /* Typography */
126
126
  --font-sans:
127
- var(--font-reg-inter-tight), "Mori", "Inter Tight", "DM Sans",
128
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
127
+ var(--font-reg-inter-tight), "Mori", "Inter Tight", "DM Sans", var(--font-misans, "MiSans"),
128
+ "PingFang SC", ui-sans-serif, system-ui, sans-serif;
129
129
  --font-cn:
130
- var(--font-reg-inter-tight), "Mori", "Inter Tight", "DM Sans",
131
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
132
- --font-heading:
133
- var(--font-reg-inter-tight), "Mori", "Inter Tight", var(--font-noto-sans-sc, "Noto Sans SC"),
130
+ var(--font-reg-inter-tight), "Mori", "Inter Tight", "DM Sans", var(--font-misans, "MiSans"),
134
131
  "PingFang SC", ui-sans-serif, system-ui, sans-serif;
132
+ --font-heading:
133
+ var(--font-reg-inter-tight), "Mori", "Inter Tight", var(--font-misans, "MiSans"), "PingFang SC",
134
+ ui-sans-serif, system-ui, sans-serif;
135
135
  --font-display:
136
- var(--font-reg-inter-tight), "Mori", "Inter Tight", var(--font-noto-sans-sc, "Noto Sans SC"),
137
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
136
+ var(--font-reg-inter-tight), "Mori", "Inter Tight", var(--font-misans, "MiSans"), "PingFang SC",
137
+ ui-sans-serif, system-ui, sans-serif;
138
138
  --font-weight-heading: 600;
139
139
 
140
140
  /* Motion */
package/skins/linear.css CHANGED
@@ -123,17 +123,17 @@ html[data-brand="linear"] {
123
123
 
124
124
  /* Typography */
125
125
  --font-sans:
126
- var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
127
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
126
+ var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
127
+ ui-sans-serif, system-ui, sans-serif;
128
128
  --font-cn:
129
- var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
130
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
129
+ var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
130
+ ui-sans-serif, system-ui, sans-serif;
131
131
  --font-heading:
132
- var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
133
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
132
+ var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
133
+ ui-sans-serif, system-ui, sans-serif;
134
134
  --font-display:
135
- var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
136
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
135
+ var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
136
+ ui-sans-serif, system-ui, sans-serif;
137
137
  --font-mono:
138
138
  var(--font-jetbrains-mono), "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;
139
139
  --font-weight-heading: 510;
package/skins/notion.css CHANGED
@@ -117,17 +117,17 @@ html[data-brand="notion"] {
117
117
 
118
118
  /* Typography */
119
119
  --font-sans:
120
- var(--font-inter), "NotionInter", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
121
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
120
+ var(--font-inter), "NotionInter", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
121
+ ui-sans-serif, system-ui, sans-serif;
122
122
  --font-cn:
123
- var(--font-inter), "NotionInter", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
124
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
123
+ var(--font-inter), "NotionInter", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
124
+ ui-sans-serif, system-ui, sans-serif;
125
125
  --font-heading:
126
- var(--font-inter), "NotionInter", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
127
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
126
+ var(--font-inter), "NotionInter", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
127
+ ui-sans-serif, system-ui, sans-serif;
128
128
  --font-display:
129
- var(--font-inter), "NotionInter", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
130
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
129
+ var(--font-inter), "NotionInter", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
130
+ ui-sans-serif, system-ui, sans-serif;
131
131
  --font-weight-heading: 700;
132
132
 
133
133
  /* Motion */
package/skins/raycast.css CHANGED
@@ -158,17 +158,17 @@ html[data-brand="raycast"] {
158
158
 
159
159
  /* Typography */
160
160
  --font-sans:
161
- var(--font-inter), "Inter", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
162
- ui-sans-serif, system-ui, -apple-system, sans-serif;
161
+ var(--font-inter), "Inter", var(--font-misans, "MiSans"), "PingFang SC", ui-sans-serif,
162
+ system-ui, -apple-system, sans-serif;
163
163
  --font-cn:
164
- var(--font-inter), "Inter", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
165
- ui-sans-serif, system-ui, -apple-system, sans-serif;
164
+ var(--font-inter), "Inter", var(--font-misans, "MiSans"), "PingFang SC", ui-sans-serif,
165
+ system-ui, -apple-system, sans-serif;
166
166
  --font-heading:
167
- var(--font-inter), "Inter", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
168
- ui-sans-serif, system-ui, sans-serif;
167
+ var(--font-inter), "Inter", var(--font-misans, "MiSans"), "PingFang SC", ui-sans-serif,
168
+ system-ui, sans-serif;
169
169
  --font-display:
170
- var(--font-inter), "Inter", var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC",
171
- ui-sans-serif, system-ui, sans-serif;
170
+ var(--font-inter), "Inter", var(--font-misans, "MiSans"), "PingFang SC", ui-sans-serif,
171
+ system-ui, sans-serif;
172
172
  --font-mono: var(--font-geist-mono), "Geist Mono", "GeistMono", ui-monospace, Menlo, monospace;
173
173
  --font-weight-heading: 400;
174
174
 
package/skins/stripe.css CHANGED
@@ -115,17 +115,17 @@ html[data-brand="stripe"] {
115
115
 
116
116
  /* Typography */
117
117
  --font-sans:
118
- var(--font-reg-inter-tight), "sohne-var", "Inter Tight", "Inter",
119
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
118
+ var(--font-reg-inter-tight), "sohne-var", "Inter Tight", "Inter", var(--font-misans, "MiSans"),
119
+ "PingFang SC", ui-sans-serif, system-ui, sans-serif;
120
120
  --font-cn:
121
- var(--font-reg-inter-tight), "sohne-var", "Inter Tight", "Inter",
122
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
121
+ var(--font-reg-inter-tight), "sohne-var", "Inter Tight", "Inter", var(--font-misans, "MiSans"),
122
+ "PingFang SC", ui-sans-serif, system-ui, sans-serif;
123
123
  --font-heading:
124
- var(--font-reg-inter-tight), "sohne-var", "Inter Tight",
125
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
124
+ var(--font-reg-inter-tight), "sohne-var", "Inter Tight", var(--font-misans, "MiSans"),
125
+ "PingFang SC", ui-sans-serif, system-ui, sans-serif;
126
126
  --font-display:
127
- var(--font-reg-inter-tight), "sohne-var", "Inter Tight",
128
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-sans-serif, system-ui, sans-serif;
127
+ var(--font-reg-inter-tight), "sohne-var", "Inter Tight", var(--font-misans, "MiSans"),
128
+ "PingFang SC", ui-sans-serif, system-ui, sans-serif;
129
129
  --font-weight-heading: 300;
130
130
 
131
131
  /* Motion */
package/skins/vanta.css CHANGED
@@ -117,17 +117,17 @@ html[data-brand="vanta"] {
117
117
 
118
118
  /* Typography */
119
119
  --font-sans:
120
- var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
121
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
120
+ var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
121
+ ui-sans-serif, system-ui, sans-serif;
122
122
  --font-cn:
123
- var(--font-inter), "Inter Variable", "Inter", var(--font-noto-sans-sc, "Noto Sans SC"),
124
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
123
+ var(--font-inter), "Inter Variable", "Inter", var(--font-misans, "MiSans"), "PingFang SC",
124
+ ui-sans-serif, system-ui, sans-serif;
125
125
  --font-heading:
126
126
  var(--font-reg-source-serif-4), "Reckless", "Source Serif 4", "Lora",
127
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, Georgia, serif;
127
+ var(--font-misans, "MiSans"), "PingFang SC", ui-serif, Georgia, serif;
128
128
  --font-display:
129
129
  var(--font-reg-source-serif-4), "Reckless", "Source Serif 4", "Lora",
130
- var(--font-noto-sans-sc, "Noto Sans SC"), "PingFang SC", ui-serif, Georgia, serif;
130
+ var(--font-misans, "MiSans"), "PingFang SC", ui-serif, Georgia, serif;
131
131
  --font-weight-heading: 500;
132
132
 
133
133
  /* Motion */
package/skins/vercel.css CHANGED
@@ -123,17 +123,17 @@ html[data-brand="vercel"] {
123
123
 
124
124
  /* Typography */
125
125
  --font-sans:
126
- var(--font-geist-sans), "Geist Sans", "Geist", var(--font-noto-sans-sc, "Noto Sans SC"),
127
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
126
+ var(--font-geist-sans), "Geist Sans", "Geist", var(--font-misans, "MiSans"), "PingFang SC",
127
+ ui-sans-serif, system-ui, sans-serif;
128
128
  --font-cn:
129
- var(--font-geist-sans), "Geist Sans", "Geist", var(--font-noto-sans-sc, "Noto Sans SC"),
130
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
129
+ var(--font-geist-sans), "Geist Sans", "Geist", var(--font-misans, "MiSans"), "PingFang SC",
130
+ ui-sans-serif, system-ui, sans-serif;
131
131
  --font-heading:
132
- var(--font-geist-sans), "Geist Sans", "Geist", var(--font-noto-sans-sc, "Noto Sans SC"),
133
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
132
+ var(--font-geist-sans), "Geist Sans", "Geist", var(--font-misans, "MiSans"), "PingFang SC",
133
+ ui-sans-serif, system-ui, sans-serif;
134
134
  --font-display:
135
- var(--font-geist-sans), "Geist Sans", "Geist", var(--font-noto-sans-sc, "Noto Sans SC"),
136
- "PingFang SC", ui-sans-serif, system-ui, sans-serif;
135
+ var(--font-geist-sans), "Geist Sans", "Geist", var(--font-misans, "MiSans"), "PingFang SC",
136
+ ui-sans-serif, system-ui, sans-serif;
137
137
  --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, Menlo, monospace;
138
138
  --font-weight-heading: 450;
139
139