@nebutra/tokens 0.1.3 → 2.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 (38) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/brands/README.md +66 -0
  3. package/brands/cosmos/DESIGN.md +356 -0
  4. package/brands/cosmos/brand.json +209 -0
  5. package/brands/cosmos/refero-tokens.json +312 -0
  6. package/brands/gsap/brand.json +1 -27
  7. package/brands/linear/DESIGN.md +478 -0
  8. package/brands/linear/brand.json +2 -19
  9. package/brands/notion/brand.json +2 -28
  10. package/brands/raycast/brand.json +2 -17
  11. package/brands/stripe/brand.json +1 -16
  12. package/brands/vanta/brand.json +1 -38
  13. package/brands/vercel/brand.json +1 -18
  14. package/dist/brand-package/index.d.ts +2 -2
  15. package/dist/brand-package/index.js +2289 -34
  16. package/dist/brand-package/index.js.map +1 -1
  17. package/dist/brand-package/use-brand.d.ts +1 -1
  18. package/dist/brand-package/use-brand.js +956 -5
  19. package/dist/brand-package/use-brand.js.map +1 -1
  20. package/dist/index.d.ts +1 -1
  21. package/dist/index.js +2416 -22
  22. package/dist/index.js.map +1 -1
  23. package/dist/{use-brand-C8d4DPqE.d.ts → use-brand-ClmvK_lC.d.ts} +19 -3
  24. package/package.json +8 -2
  25. package/recipe.css +8 -0
  26. package/skins/cosmos.css +239 -0
  27. package/skins/gsap.css +32 -20
  28. package/skins/linear.css +54 -17
  29. package/skins/notion.css +36 -25
  30. package/skins/raycast.css +37 -19
  31. package/skins/stripe.css +34 -15
  32. package/skins/vanta.css +34 -30
  33. package/skins/vercel.css +55 -19
  34. package/styles.css +115 -28
  35. package/dist/chunk-ALJTP5HL.js +0 -881
  36. package/dist/chunk-ALJTP5HL.js.map +0 -1
  37. package/dist/chunk-RGUJQOLH.js +0 -1582
  38. package/dist/chunk-RGUJQOLH.js.map +0 -1
package/skins/raycast.css CHANGED
@@ -1,19 +1,10 @@
1
1
  /**
2
2
  * Brand carrier skin: Raycast (raycast) v1.0.0
3
3
  * darkDefault=true dualMode=false button=solid
4
- * fonts=1 mode=global
4
+ * fonts=0 mode=global
5
5
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
6
6
  */
7
7
 
8
- /* Brand font faces */
9
- @font-face {
10
- font-family: "Inter";
11
- src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
12
- format("woff2");
13
- font-weight: 100 900;
14
- font-display: swap;
15
- }
16
-
17
8
  :root,
18
9
  .dark,
19
10
  html[data-brand="raycast"] {
@@ -27,9 +18,9 @@ html[data-brand="raycast"] {
27
18
  --role-quiet: 220 5% 11%;
28
19
  --role-quiet-fg: 0 0% 100%;
29
20
  --role-muted: 220 8% 7%;
30
- --role-muted-fg: 210 1% 42%;
21
+ --role-muted-fg: 210 1% 48%;
31
22
  --role-border: 210 2% 19%;
32
- --role-input: 220 8% 7%;
23
+ --role-input: 210 2% 19%;
33
24
  --role-ring: 240 1% 61%;
34
25
  --role-brand: 0 100% 69%;
35
26
  --role-brand-fg: 210 1% 27%;
@@ -48,13 +39,13 @@ html[data-brand="raycast"] {
48
39
  --secondary: 220 5% 11%;
49
40
  --secondary-foreground: 0 0% 100%;
50
41
  --muted: 220 8% 7%;
51
- --muted-foreground: 210 1% 42%;
42
+ --muted-foreground: 210 1% 48%;
52
43
  --accent: 0 100% 69%;
53
44
  --accent-foreground: 210 1% 27%;
54
45
  --destructive: 0 72% 51%;
55
46
  --destructive-foreground: 0 0% 100%;
56
47
  --border: 210 2% 19%;
57
- --input: 220 8% 7%;
48
+ --input: 210 2% 19%;
58
49
  --ring: 240 1% 61%;
59
50
  --success: 151 59% 59%;
60
51
  --success-foreground: 210 20% 2%;
@@ -68,17 +59,35 @@ html[data-brand="raycast"] {
68
59
  --sidebar-accent-foreground: 210 1% 27%;
69
60
  --sidebar-border: 210 2% 19%;
70
61
  --sidebar-ring: 240 1% 61%;
62
+ --brand-primary: hsl(0 100% 69%);
63
+ --brand-accent: hsl(0 0% 90%);
64
+ --brand-accent-foreground: hsl(210 1% 27%);
65
+ --brand-tertiary: hsl(0 0% 90%);
71
66
  --brand-gradient: hsl(var(--primary));
72
67
  --brand-gradient-reverse: hsl(var(--primary));
73
68
  --brand-gradient-vertical: hsl(var(--primary));
74
69
  --brand-gradient-radial: hsl(var(--primary));
75
70
 
71
+ /* ── Neutral ramp, anchored on this language's roles ── */
72
+ --neutral-1: hsl(210 20% 2%);
73
+ --neutral-2: hsl(220 18% 3%);
74
+ --neutral-3: color-mix(in oklab, hsl(210 2% 19%) 20%, hsl(220 18% 3%));
75
+ --neutral-4: color-mix(in oklab, hsl(210 2% 19%) 40%, hsl(220 18% 3%));
76
+ --neutral-5: color-mix(in oklab, hsl(210 2% 19%) 60%, hsl(220 18% 3%));
77
+ --neutral-6: color-mix(in oklab, hsl(210 2% 19%) 80%, hsl(220 18% 3%));
78
+ --neutral-7: hsl(210 2% 19%);
79
+ --neutral-8: color-mix(in oklab, hsl(210 1% 48%) 25%, hsl(210 2% 19%));
80
+ --neutral-9: color-mix(in oklab, hsl(210 1% 48%) 50%, hsl(210 2% 19%));
81
+ --neutral-10: color-mix(in oklab, hsl(210 1% 48%) 75%, hsl(210 2% 19%));
82
+ --neutral-11: hsl(210 1% 48%);
83
+ --neutral-12: hsl(0 0% 100%);
84
+
76
85
  /* Recipe (action language + free elev/radii) */
77
86
  /* Shape slots */
78
87
  --btn-default-radius: 8px;
79
88
  --radius-button: 8px;
80
89
  --radius-buttons: 8px;
81
- --radius-md: 8px;
90
+ --radius-md: min(8px, 16px);
82
91
  --radius-card: 16px;
83
92
  --radius-lg: 16px;
84
93
  --radius-badge: 6px;
@@ -148,10 +157,19 @@ html[data-brand="raycast"] {
148
157
  --control-font-size-md: 0.8125rem;
149
158
 
150
159
  /* Typography */
151
- --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
152
- --font-heading: "Inter", ui-sans-serif, system-ui, sans-serif;
153
- --font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
154
- --font-mono: "Geist Mono", "GeistMono", ui-monospace, Menlo, monospace;
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;
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;
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;
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;
172
+ --font-mono: var(--font-geist-mono), "Geist Mono", "GeistMono", ui-monospace, Menlo, monospace;
155
173
  --font-weight-heading: 400;
156
174
 
157
175
  /* Motion */
package/skins/stripe.css CHANGED
@@ -1,18 +1,10 @@
1
1
  /**
2
2
  * Brand carrier skin: Stripe (stripe) v1.0.0
3
3
  * darkDefault=false dualMode=false button=solid
4
- * fonts=1 mode=global
4
+ * fonts=0 mode=global
5
5
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
6
6
  */
7
7
 
8
- /* Brand font faces */
9
- @font-face {
10
- font-family: "sohne-var";
11
- src: url("/brand-assets/sohne-var.woff2") format("woff2");
12
- font-weight: 300 400;
13
- font-display: swap;
14
- }
15
-
16
8
  :root,
17
9
  html[data-brand="stripe"] {
18
10
  /* ── Color roles (carrier) ── */
@@ -27,7 +19,7 @@ html[data-brand="stripe"] {
27
19
  --role-muted: 216 56% 98%;
28
20
  --role-muted-fg: 217 17% 47%;
29
21
  --role-border: 210 44% 93%;
30
- --role-input: 0 0% 100%;
22
+ --role-input: 210 44% 93%;
31
23
  --role-ring: 248 98% 61%;
32
24
  --role-brand: 211 78% 11%;
33
25
  --role-brand-fg: 0 0% 100%;
@@ -52,7 +44,7 @@ html[data-brand="stripe"] {
52
44
  --destructive: 0 72% 51%;
53
45
  --destructive-foreground: 0 0% 100%;
54
46
  --border: 210 44% 93%;
55
- --input: 0 0% 100%;
47
+ --input: 210 44% 93%;
56
48
  --ring: 248 98% 61%;
57
49
  --info: 231 100% 73%;
58
50
  --info-foreground: 211 78% 11%;
@@ -64,17 +56,35 @@ html[data-brand="stripe"] {
64
56
  --sidebar-accent-foreground: 0 0% 100%;
65
57
  --sidebar-border: 210 44% 93%;
66
58
  --sidebar-ring: 248 98% 61%;
59
+ --brand-primary: hsl(211 78% 11%);
60
+ --brand-accent: hsl(248 98% 61%);
61
+ --brand-accent-foreground: hsl(0 0% 100%);
62
+ --brand-tertiary: hsl(248 98% 61%);
67
63
  --brand-gradient: hsl(var(--primary));
68
64
  --brand-gradient-reverse: hsl(var(--primary));
69
65
  --brand-gradient-vertical: hsl(var(--primary));
70
66
  --brand-gradient-radial: hsl(var(--primary));
71
67
 
68
+ /* ── Neutral ramp, anchored on this language's roles ── */
69
+ --neutral-1: hsl(0 0% 100%);
70
+ --neutral-2: hsl(0 0% 100%);
71
+ --neutral-3: color-mix(in oklab, hsl(210 44% 93%) 20%, hsl(0 0% 100%));
72
+ --neutral-4: color-mix(in oklab, hsl(210 44% 93%) 40%, hsl(0 0% 100%));
73
+ --neutral-5: color-mix(in oklab, hsl(210 44% 93%) 60%, hsl(0 0% 100%));
74
+ --neutral-6: color-mix(in oklab, hsl(210 44% 93%) 80%, hsl(0 0% 100%));
75
+ --neutral-7: hsl(210 44% 93%);
76
+ --neutral-8: color-mix(in oklab, hsl(217 17% 47%) 25%, hsl(210 44% 93%));
77
+ --neutral-9: color-mix(in oklab, hsl(217 17% 47%) 50%, hsl(210 44% 93%));
78
+ --neutral-10: color-mix(in oklab, hsl(217 17% 47%) 75%, hsl(210 44% 93%));
79
+ --neutral-11: hsl(217 17% 47%);
80
+ --neutral-12: hsl(211 78% 11%);
81
+
72
82
  /* Recipe (action language + free elev/radii) */
73
83
  /* Shape slots */
74
84
  --btn-default-radius: 4px;
75
85
  --radius-button: 4px;
76
86
  --radius-buttons: 4px;
77
- --radius-md: 4px;
87
+ --radius-md: min(4px, 4px);
78
88
  --radius-card: 4px;
79
89
  --radius-lg: 4px;
80
90
  --radius-badge: 9999px;
@@ -104,9 +114,18 @@ html[data-brand="stripe"] {
104
114
  --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
105
115
 
106
116
  /* Typography */
107
- --font-sans: "sohne-var", "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
108
- --font-heading: "sohne-var", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
109
- --font-display: "sohne-var", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
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;
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;
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;
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;
110
129
  --font-weight-heading: 300;
111
130
 
112
131
  /* Motion */
package/skins/vanta.css CHANGED
@@ -1,33 +1,10 @@
1
1
  /**
2
2
  * Brand carrier skin: Vanta (vanta) v1.0.0
3
3
  * darkDefault=false dualMode=false button=solid
4
- * fonts=3 mode=global
4
+ * fonts=0 mode=global
5
5
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
6
6
  */
7
7
 
8
- /* Brand font faces */
9
- @font-face {
10
- font-family: "Inter Variable";
11
- src: url("https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2")
12
- format("woff2");
13
- font-weight: 100 900;
14
- font-display: swap;
15
- }
16
-
17
- @font-face {
18
- font-family: "Reckless";
19
- src: url("/brand-assets/reckless-regular.woff2") format("woff2");
20
- font-weight: 400;
21
- font-display: swap;
22
- }
23
-
24
- @font-face {
25
- font-family: "Reckless";
26
- src: url("/brand-assets/reckless-medium.woff2") format("woff2");
27
- font-weight: 500;
28
- font-display: swap;
29
- }
30
-
31
8
  :root,
32
9
  html[data-brand="vanta"] {
33
10
  /* ── Color roles (carrier) ── */
@@ -42,7 +19,7 @@ html[data-brand="vanta"] {
42
19
  --role-muted: 240 20% 93%;
43
20
  --role-muted-fg: 238 11% 48%;
44
21
  --role-border: 240 17% 11%;
45
- --role-input: 0 0% 100%;
22
+ --role-input: 240 17% 11%;
46
23
  --role-ring: 268 95% 39%;
47
24
  --role-brand: 272 100% 14%;
48
25
  --role-brand-fg: 0 0% 100%;
@@ -67,7 +44,7 @@ html[data-brand="vanta"] {
67
44
  --destructive: 0 72% 51%;
68
45
  --destructive-foreground: 0 0% 100%;
69
46
  --border: 240 17% 11%;
70
- --input: 0 0% 100%;
47
+ --input: 240 17% 11%;
71
48
  --ring: 268 95% 39%;
72
49
  --warning: 44 100% 53%;
73
50
  --warning-foreground: 240 17% 11%;
@@ -81,17 +58,35 @@ html[data-brand="vanta"] {
81
58
  --sidebar-accent-foreground: 0 0% 100%;
82
59
  --sidebar-border: 240 17% 11%;
83
60
  --sidebar-ring: 268 95% 39%;
61
+ --brand-primary: hsl(272 100% 14%);
62
+ --brand-accent: hsl(268 95% 39%);
63
+ --brand-accent-foreground: hsl(0 0% 100%);
64
+ --brand-tertiary: hsl(268 95% 39%);
84
65
  --brand-gradient: hsl(var(--primary));
85
66
  --brand-gradient-reverse: hsl(var(--primary));
86
67
  --brand-gradient-vertical: hsl(var(--primary));
87
68
  --brand-gradient-radial: hsl(var(--primary));
88
69
 
70
+ /* ── Neutral ramp, anchored on this language's roles ── */
71
+ --neutral-1: hsl(220 23% 97%);
72
+ --neutral-2: hsl(0 0% 100%);
73
+ --neutral-3: color-mix(in oklab, hsl(240 17% 11%) 20%, hsl(0 0% 100%));
74
+ --neutral-4: color-mix(in oklab, hsl(240 17% 11%) 40%, hsl(0 0% 100%));
75
+ --neutral-5: color-mix(in oklab, hsl(240 17% 11%) 60%, hsl(0 0% 100%));
76
+ --neutral-6: color-mix(in oklab, hsl(240 17% 11%) 80%, hsl(0 0% 100%));
77
+ --neutral-7: hsl(240 17% 11%);
78
+ --neutral-8: color-mix(in oklab, hsl(238 11% 48%) 25%, hsl(240 17% 11%));
79
+ --neutral-9: color-mix(in oklab, hsl(238 11% 48%) 50%, hsl(240 17% 11%));
80
+ --neutral-10: color-mix(in oklab, hsl(238 11% 48%) 75%, hsl(240 17% 11%));
81
+ --neutral-11: hsl(238 11% 48%);
82
+ --neutral-12: hsl(240 17% 11%);
83
+
89
84
  /* Recipe (action language + free elev/radii) */
90
85
  /* Shape slots */
91
86
  --btn-default-radius: 999px;
92
87
  --radius-button: 999px;
93
88
  --radius-buttons: 999px;
94
- --radius-md: 999px;
89
+ --radius-md: min(999px, 16px);
95
90
  --radius-card: 16px;
96
91
  --radius-lg: 16px;
97
92
  --radius-badge: 999px;
@@ -121,9 +116,18 @@ html[data-brand="vanta"] {
121
116
  --badge-default-hover-bg: color-mix(in srgb, hsl(var(--secondary)) 90%, white);
122
117
 
123
118
  /* Typography */
124
- --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
125
- --font-heading: "Reckless", "Source Serif 4", "Lora", ui-serif, Georgia, serif;
126
- --font-display: "Reckless", "Source Serif 4", "Lora", ui-serif, Georgia, serif;
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;
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;
125
+ --font-heading:
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;
128
+ --font-display:
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;
127
131
  --font-weight-heading: 500;
128
132
 
129
133
  /* Motion */
package/skins/vercel.css CHANGED
@@ -1,19 +1,10 @@
1
1
  /**
2
2
  * Brand carrier skin: Vercel (vercel) v1.0.0
3
3
  * darkDefault=false dualMode=true button=solid
4
- * fonts=1 mode=global
4
+ * fonts=0 mode=global
5
5
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
6
6
  */
7
7
 
8
- /* Brand font faces */
9
- @font-face {
10
- font-family: "Geist Sans";
11
- src: url("https://cdn.jsdelivr.net/fontsource/fonts/geist-sans:vf@latest/latin-wght-normal.woff2")
12
- format("woff2");
13
- font-weight: 100 900;
14
- font-display: swap;
15
- }
16
-
17
8
  :root,
18
9
  html[data-brand="vercel"] {
19
10
  /* ── Color roles (carrier) ── */
@@ -28,7 +19,7 @@ html[data-brand="vercel"] {
28
19
  --role-muted: 0 0% 92%;
29
20
  --role-muted-fg: 0 0% 40%;
30
21
  --role-border: 0 0% 92%;
31
- --role-input: 0 0% 100%;
22
+ --role-input: 0 0% 92%;
32
23
  --role-ring: 0 0% 9%;
33
24
 
34
25
  /* ── shadcn bridge (primary = action CTA) ── */
@@ -49,7 +40,7 @@ html[data-brand="vercel"] {
49
40
  --destructive: 0 72% 51%;
50
41
  --destructive-foreground: 0 0% 100%;
51
42
  --border: 0 0% 92%;
52
- --input: 0 0% 100%;
43
+ --input: 0 0% 92%;
53
44
  --ring: 0 0% 9%;
54
45
  --success: 133 50% 32%;
55
46
  --success-foreground: 0 0% 100%;
@@ -63,17 +54,35 @@ html[data-brand="vercel"] {
63
54
  --sidebar-accent-foreground: 0 0% 30%;
64
55
  --sidebar-border: 0 0% 92%;
65
56
  --sidebar-ring: 0 0% 9%;
57
+ --brand-primary: hsl(0 0% 9%);
58
+ --brand-accent: hsl(0 0% 9%);
59
+ --brand-accent-foreground: hsl(0 0% 100%);
60
+ --brand-tertiary: hsl(0 0% 9%);
66
61
  --brand-gradient: hsl(var(--primary));
67
62
  --brand-gradient-reverse: hsl(var(--primary));
68
63
  --brand-gradient-vertical: hsl(var(--primary));
69
64
  --brand-gradient-radial: hsl(var(--primary));
70
65
 
66
+ /* ── Neutral ramp, anchored on this language's roles ── */
67
+ --neutral-1: hsl(0 0% 98%);
68
+ --neutral-2: hsl(0 0% 100%);
69
+ --neutral-3: color-mix(in oklab, hsl(0 0% 92%) 20%, hsl(0 0% 100%));
70
+ --neutral-4: color-mix(in oklab, hsl(0 0% 92%) 40%, hsl(0 0% 100%));
71
+ --neutral-5: color-mix(in oklab, hsl(0 0% 92%) 60%, hsl(0 0% 100%));
72
+ --neutral-6: color-mix(in oklab, hsl(0 0% 92%) 80%, hsl(0 0% 100%));
73
+ --neutral-7: hsl(0 0% 92%);
74
+ --neutral-8: color-mix(in oklab, hsl(0 0% 40%) 25%, hsl(0 0% 92%));
75
+ --neutral-9: color-mix(in oklab, hsl(0 0% 40%) 50%, hsl(0 0% 92%));
76
+ --neutral-10: color-mix(in oklab, hsl(0 0% 40%) 75%, hsl(0 0% 92%));
77
+ --neutral-11: hsl(0 0% 40%);
78
+ --neutral-12: hsl(0 0% 9%);
79
+
71
80
  /* Recipe (action language + free elev/radii) */
72
81
  /* Shape slots */
73
82
  --btn-default-radius: 6px;
74
83
  --radius-button: 6px;
75
84
  --radius-buttons: 6px;
76
- --radius-md: 6px;
85
+ --radius-md: min(6px, 6px);
77
86
  --radius-card: 6px;
78
87
  --radius-lg: 6px;
79
88
  --radius-badge: 6px;
@@ -113,10 +122,19 @@ html[data-brand="vercel"] {
113
122
  --control-font-size-md: 0.8125rem;
114
123
 
115
124
  /* Typography */
116
- --font-sans: "Geist Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
117
- --font-heading: "Geist Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
118
- --font-display: "Geist Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
119
- --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
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;
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;
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;
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;
137
+ --font-mono: var(--font-geist-mono), "Geist Mono", ui-monospace, Menlo, monospace;
120
138
  --font-weight-heading: 450;
121
139
 
122
140
  /* Motion */
@@ -160,7 +178,7 @@ html.dark[data-brand="vercel"] {
160
178
  --role-muted: 0 0% 12%;
161
179
  --role-muted-fg: 0 0% 63%;
162
180
  --role-border: 0 0% 16%;
163
- --role-input: 0 0% 4%;
181
+ --role-input: 0 0% 16%;
164
182
  --role-ring: 0 0% 100%;
165
183
 
166
184
  /* ── shadcn bridge (primary = action CTA) ── */
@@ -181,7 +199,7 @@ html.dark[data-brand="vercel"] {
181
199
  --destructive: 0 72% 51%;
182
200
  --destructive-foreground: 0 0% 100%;
183
201
  --border: 0 0% 16%;
184
- --input: 0 0% 4%;
202
+ --input: 0 0% 16%;
185
203
  --ring: 0 0% 100%;
186
204
  --success: 133 49% 40%;
187
205
  --success-foreground: 0 0% 100%;
@@ -195,8 +213,26 @@ html.dark[data-brand="vercel"] {
195
213
  --sidebar-accent-foreground: 0 0% 93%;
196
214
  --sidebar-border: 0 0% 16%;
197
215
  --sidebar-ring: 0 0% 100%;
216
+ --brand-primary: hsl(0 0% 100%);
217
+ --brand-accent: hsl(0 0% 100%);
218
+ --brand-accent-foreground: hsl(0 0% 0%);
219
+ --brand-tertiary: hsl(0 0% 100%);
198
220
  --brand-gradient: hsl(var(--primary));
199
221
  --brand-gradient-reverse: hsl(var(--primary));
200
222
  --brand-gradient-vertical: hsl(var(--primary));
201
223
  --brand-gradient-radial: hsl(var(--primary));
224
+
225
+ /* ── Neutral ramp, anchored on this language's roles ── */
226
+ --neutral-1: hsl(0 0% 0%);
227
+ --neutral-2: hsl(0 0% 4%);
228
+ --neutral-3: color-mix(in oklab, hsl(0 0% 16%) 20%, hsl(0 0% 4%));
229
+ --neutral-4: color-mix(in oklab, hsl(0 0% 16%) 40%, hsl(0 0% 4%));
230
+ --neutral-5: color-mix(in oklab, hsl(0 0% 16%) 60%, hsl(0 0% 4%));
231
+ --neutral-6: color-mix(in oklab, hsl(0 0% 16%) 80%, hsl(0 0% 4%));
232
+ --neutral-7: hsl(0 0% 16%);
233
+ --neutral-8: color-mix(in oklab, hsl(0 0% 63%) 25%, hsl(0 0% 16%));
234
+ --neutral-9: color-mix(in oklab, hsl(0 0% 63%) 50%, hsl(0 0% 16%));
235
+ --neutral-10: color-mix(in oklab, hsl(0 0% 63%) 75%, hsl(0 0% 16%));
236
+ --neutral-11: hsl(0 0% 63%);
237
+ --neutral-12: hsl(0 0% 93%);
202
238
  }