@nebutra/tokens 0.1.2 → 0.1.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 (69) hide show
  1. package/brands/gsap/brand.json +17 -64
  2. package/brands/linear/brand.json +18 -57
  3. package/brands/notion/brand.json +18 -62
  4. package/brands/raycast/brand.json +17 -64
  5. package/brands/stripe/brand.json +16 -72
  6. package/brands/vanta/brand.json +16 -63
  7. package/brands/vercel/brand.json +16 -50
  8. package/dist/brand-package/index.d.ts +123 -0
  9. package/dist/brand-package/index.js +61 -0
  10. package/dist/brand-package/index.js.map +1 -0
  11. package/dist/brand-package/use-brand.d.ts +2 -0
  12. package/dist/brand-package/use-brand.js +12 -0
  13. package/dist/brand-package/use-brand.js.map +1 -0
  14. package/dist/chunk-ALJTP5HL.js +881 -0
  15. package/dist/chunk-ALJTP5HL.js.map +1 -0
  16. package/dist/chunk-RGUJQOLH.js +1582 -0
  17. package/dist/chunk-RGUJQOLH.js.map +1 -0
  18. package/dist/index.d.ts +81 -0
  19. package/dist/index.js +187 -0
  20. package/dist/index.js.map +1 -0
  21. package/dist/use-brand-C8d4DPqE.d.ts +371 -0
  22. package/package.json +34 -9
  23. package/recipe.css +322 -1
  24. package/skins/README.md +2 -4
  25. package/skins/gsap.css +31 -119
  26. package/skins/linear.css +33 -117
  27. package/skins/notion.css +27 -117
  28. package/skins/raycast.css +32 -119
  29. package/skins/stripe.css +27 -129
  30. package/skins/vanta.css +27 -122
  31. package/skins/vercel.css +30 -111
  32. package/styles.css +388 -113
  33. package/.turbo/turbo-build.log +0 -8
  34. package/.turbo/turbo-typecheck.log +0 -4
  35. package/AGENTS.md +0 -45
  36. package/DESIGN.md +0 -357
  37. package/scripts/compile-brand-run.ts +0 -79
  38. package/scripts/compile-brand.mjs +0 -25
  39. package/scripts/emit-skins-run.ts +0 -62
  40. package/scripts/emit-skins.mjs +0 -31
  41. package/scripts/sync-styles.mjs +0 -29
  42. package/src/brand-package/__tests__/compile-refero.test.ts +0 -427
  43. package/src/brand-package/__tests__/emit-css.test.ts +0 -130
  44. package/src/brand-package/apply-brand.ts +0 -92
  45. package/src/brand-package/compile-helpers.ts +0 -170
  46. package/src/brand-package/compile-refero.ts +0 -69
  47. package/src/brand-package/emit-css.ts +0 -468
  48. package/src/brand-package/hex-to-hsl.ts +0 -100
  49. package/src/brand-package/index.ts +0 -71
  50. package/src/brand-package/infer-recipe.ts +0 -198
  51. package/src/brand-package/normalize.ts +0 -295
  52. package/src/brand-package/presets/context.ts +0 -17
  53. package/src/brand-package/presets/generic.ts +0 -214
  54. package/src/brand-package/presets/gsap.ts +0 -146
  55. package/src/brand-package/presets/index.ts +0 -31
  56. package/src/brand-package/presets/linear.ts +0 -183
  57. package/src/brand-package/presets/notion.ts +0 -208
  58. package/src/brand-package/presets/raycast.ts +0 -138
  59. package/src/brand-package/presets/recipe.ts +0 -61
  60. package/src/brand-package/presets/stripe.ts +0 -207
  61. package/src/brand-package/presets/vanta.ts +0 -220
  62. package/src/brand-package/presets/vercel.ts +0 -187
  63. package/src/brand-package/types.ts +0 -285
  64. package/src/brand-package/use-brand.ts +0 -207
  65. package/src/brand-package/validate.ts +0 -108
  66. package/src/index.ts +0 -67
  67. package/src/theme-provider.tsx +0 -246
  68. package/tsconfig.json +0 -11
  69. package/turbo.json +0 -15
package/skins/stripe.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Brand carrier skin: Stripe (stripe) v1.0.0
3
3
  * darkDefault=false dualMode=false button=solid
4
- * fonts=1 zones=yes mode=global
4
+ * fonts=1 mode=global
5
5
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
6
6
  */
7
7
 
@@ -87,16 +87,16 @@ html[data-brand="stripe"] {
87
87
  --elevation-card: 0 0 #0000;
88
88
  --elevation-control: 0 0 #0000;
89
89
  --elevation-raised: 0 0 #0000;
90
- --shadow-xs: 0 0 #0000;
91
- --shadow-sm: 0 0 #0000;
92
- --shadow-md: 0 0 #0000;
93
- --shadow-lg: 0 0 #0000;
90
+ --elevation-xs: 0 0 #0000;
91
+ --elevation-sm: 0 0 #0000;
92
+ --elevation-md: 0 0 #0000;
93
+ --elevation-lg: 0 0 #0000;
94
94
  --btn-default-shadow: 0 0 #0000;
95
95
  --btn-default-bg: hsl(var(--primary));
96
96
  --btn-default-fg: hsl(var(--primary-foreground));
97
97
  --btn-default-border-width: 0px;
98
98
  --btn-default-border: transparent;
99
- --btn-default-stroke-gradient: transparent;
99
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
100
100
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
101
101
  --badge-default-bg: hsl(var(--secondary));
102
102
  --badge-default-fg: hsl(var(--secondary-foreground));
@@ -109,51 +109,27 @@ html[data-brand="stripe"] {
109
109
  --font-display: "sohne-var", "Inter Tight", ui-sans-serif, system-ui, sans-serif;
110
110
  --font-weight-heading: 300;
111
111
 
112
- /* Zone type scales */
113
- --zone-product-caption-size: 12px;
114
- --zone-product-caption-leading: 1.45;
115
- --zone-product-caption-tracking: -0.12px;
116
- --zone-product-caption-weight: 300;
117
- --zone-product-body-sm-size: 14px;
118
- --zone-product-body-sm-leading: 1.4;
119
- --zone-product-body-sm-tracking: -0.14px;
120
- --zone-product-body-sm-weight: 400;
121
- --zone-product-body-size: 16px;
122
- --zone-product-body-leading: 1.2;
123
- --zone-product-body-tracking: -0.16px;
124
- --zone-product-body-weight: 400;
125
- --zone-product-body-lg-size: 20px;
126
- --zone-product-body-lg-leading: 1.4;
127
- --zone-product-body-lg-tracking: -0.2px;
128
- --zone-product-body-lg-weight: 300;
129
- --zone-product-subheading-size: 22px;
130
- --zone-product-subheading-leading: 1.1;
131
- --zone-product-subheading-tracking: -0.22px;
132
- --zone-product-subheading-weight: 300;
133
- --zone-product-heading-sm-size: 26px;
134
- --zone-product-heading-sm-leading: 1.12;
135
- --zone-product-heading-sm-tracking: -0.26px;
136
- --zone-product-heading-sm-weight: 300;
137
- --zone-product-heading-size: 32px;
138
- --zone-product-heading-leading: 1.1;
139
- --zone-product-heading-tracking: -0.64px;
140
- --zone-product-heading-weight: 300;
141
- --zone-marketing-body-size: 16px;
142
- --zone-marketing-body-leading: 1.4;
143
- --zone-marketing-body-tracking: -0.16px;
144
- --zone-marketing-body-weight: 300;
145
- --zone-marketing-heading-size: 32px;
146
- --zone-marketing-heading-leading: 1.1;
147
- --zone-marketing-heading-tracking: -0.64px;
148
- --zone-marketing-heading-weight: 300;
149
- --zone-marketing-heading-lg-size: 48px;
150
- --zone-marketing-heading-lg-leading: 1.03;
151
- --zone-marketing-heading-lg-tracking: -0.96px;
152
- --zone-marketing-heading-lg-weight: 300;
153
- --zone-marketing-display-size: 56px;
154
- --zone-marketing-display-leading: 1.03;
155
- --zone-marketing-display-tracking: -1.4px;
156
- --zone-marketing-display-weight: 300;
112
+ /* Motion */
113
+ --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
114
+ --motion-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
115
+ --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
116
+ --motion-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
117
+ --duration-micro: 100ms;
118
+ --motion-duration-micro: 100ms;
119
+ --duration-flow: 180ms;
120
+ --motion-duration-flow: 180ms;
121
+ --duration-reveal: 260ms;
122
+ --motion-duration-reveal: 260ms;
123
+ --duration-cinematic: 400ms;
124
+ --motion-duration-cinematic: 400ms;
125
+
126
+ /* Spacing */
127
+ --space-source-xs: 0.5rem;
128
+ --space-source-sm: 0.75rem;
129
+ --space-source-md: 1.125rem;
130
+ --space-source-lg: 1.75rem;
131
+ --space-source-xl: 2.25rem;
132
+ --space-source-2xl: 3.25rem;
157
133
 
158
134
  /* Taxonomy / decorative (not product CTA) */
159
135
  --brand-category-brand: #061b31;
@@ -168,81 +144,3 @@ html[data-brand="stripe"] {
168
144
  --brand-decorative-section-band: #f8fafd;
169
145
  --brand-decorative-frost: #e5edf5;
170
146
  }
171
-
172
- /* Zone: product — product never inherits marketing display */
173
- [data-zone="product"],
174
- .zone-product {
175
- font-size: var(--zone-product-body-size, 16px);
176
- line-height: var(--zone-product-body-leading, 1.2);
177
- font-weight: var(--zone-product-body-weight, 400);
178
- letter-spacing: var(--zone-product-body-tracking, -0.16px);
179
- --text-caption: var(--zone-product-caption-size, inherit);
180
- --leading-caption: var(--zone-product-caption-leading, inherit);
181
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
182
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
183
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
184
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
185
- --text-body: var(--zone-product-body-size, inherit);
186
- --leading-body: var(--zone-product-body-leading, inherit);
187
- --tracking-body: var(--zone-product-body-tracking, inherit);
188
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
189
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
190
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
191
- --text-subheading: var(--zone-product-subheading-size, inherit);
192
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
193
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
194
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
195
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
196
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
197
- --text-heading: var(--zone-product-heading-size, inherit);
198
- --leading-heading: var(--zone-product-heading-leading, inherit);
199
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
200
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
201
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
202
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
203
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
204
- --leading-display: var(--zone-product-display-leading, inherit);
205
- --tracking-display: var(--zone-product-display-tracking, inherit);
206
- }
207
-
208
- /* Zone: marketing — product never inherits marketing display */
209
- [data-zone="marketing"],
210
- .zone-marketing {
211
- font-size: var(--zone-marketing-body-size, 16px);
212
- line-height: var(--zone-marketing-body-leading, 1.4);
213
- font-weight: var(--zone-marketing-body-weight, 300);
214
- letter-spacing: var(--zone-marketing-body-tracking, -0.16px);
215
- --text-caption: var(--zone-marketing-caption-size, inherit);
216
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
217
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
218
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
219
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
220
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
221
- --text-body: var(--zone-marketing-body-size, inherit);
222
- --leading-body: var(--zone-marketing-body-leading, inherit);
223
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
224
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
225
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
226
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
227
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
228
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
229
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
230
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
231
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
232
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
233
- --text-heading: var(--zone-marketing-heading-size, inherit);
234
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
235
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
236
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
237
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
238
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
239
- --text-display: var(--zone-marketing-display-size, inherit);
240
- --leading-display: var(--zone-marketing-display-leading, inherit);
241
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
242
- }
243
-
244
- /* Product chrome must not use decorative gradients as action fills */
245
- [data-zone="product"] .btn-brand-default,
246
- .zone-product .btn-brand-default {
247
- /* intentional no-op: documents contract; action uses --primary only */
248
- }
package/skins/vanta.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Brand carrier skin: Vanta (vanta) v1.0.0
3
3
  * darkDefault=false dualMode=false button=solid
4
- * fonts=3 zones=yes mode=global
4
+ * fonts=3 mode=global
5
5
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
6
6
  */
7
7
 
@@ -104,16 +104,16 @@ html[data-brand="vanta"] {
104
104
  --elevation-card: 0 0 #0000;
105
105
  --elevation-control: 0 0 #0000;
106
106
  --elevation-raised: 0 0 #0000;
107
- --shadow-xs: 0 0 #0000;
108
- --shadow-sm: 0 0 #0000;
109
- --shadow-md: 0 0 #0000;
110
- --shadow-lg: 0 0 #0000;
107
+ --elevation-xs: 0 0 #0000;
108
+ --elevation-sm: 0 0 #0000;
109
+ --elevation-md: 0 0 #0000;
110
+ --elevation-lg: 0 0 #0000;
111
111
  --btn-default-shadow: 0 0 #0000;
112
112
  --btn-default-bg: hsl(var(--primary));
113
113
  --btn-default-fg: hsl(var(--primary-foreground));
114
114
  --btn-default-border-width: 0px;
115
115
  --btn-default-border: transparent;
116
- --btn-default-stroke-gradient: transparent;
116
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
117
117
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
118
118
  --badge-default-bg: hsl(var(--secondary));
119
119
  --badge-default-fg: hsl(var(--secondary-foreground));
@@ -126,44 +126,27 @@ html[data-brand="vanta"] {
126
126
  --font-display: "Reckless", "Source Serif 4", "Lora", ui-serif, Georgia, serif;
127
127
  --font-weight-heading: 500;
128
128
 
129
- /* Zone type scales */
130
- --zone-product-caption-size: 12px;
131
- --zone-product-caption-leading: 1.5;
132
- --zone-product-caption-tracking: -0.02px;
133
- --zone-product-caption-weight: 500;
134
- --zone-product-body-sm-size: 14px;
135
- --zone-product-body-sm-leading: 1.43;
136
- --zone-product-body-sm-tracking: -0.02px;
137
- --zone-product-body-sm-weight: 400;
138
- --zone-product-body-size: 16px;
139
- --zone-product-body-leading: 1.5;
140
- --zone-product-body-tracking: -0.02px;
141
- --zone-product-body-weight: 400;
142
- --zone-product-subheading-size: 20px;
143
- --zone-product-subheading-leading: 1.4;
144
- --zone-product-subheading-weight: 500;
145
- --zone-product-heading-sm-size: 24px;
146
- --zone-product-heading-sm-leading: 1.35;
147
- --zone-product-heading-sm-weight: 500;
148
- --zone-product-heading-size: 32px;
149
- --zone-product-heading-leading: 1.3;
150
- --zone-product-heading-weight: 500;
151
- --zone-marketing-body-size: 16px;
152
- --zone-marketing-body-leading: 1.5;
153
- --zone-marketing-body-tracking: -0.02px;
154
- --zone-marketing-body-weight: 400;
155
- --zone-marketing-heading-size: 42px;
156
- --zone-marketing-heading-leading: 1.2;
157
- --zone-marketing-heading-tracking: -0.84px;
158
- --zone-marketing-heading-weight: 400;
159
- --zone-marketing-heading-lg-size: 56px;
160
- --zone-marketing-heading-lg-leading: 1.15;
161
- --zone-marketing-heading-lg-tracking: -1.12px;
162
- --zone-marketing-heading-lg-weight: 400;
163
- --zone-marketing-display-size: 90px;
164
- --zone-marketing-display-leading: 1.1;
165
- --zone-marketing-display-tracking: -1.62px;
166
- --zone-marketing-display-weight: 400;
129
+ /* Motion */
130
+ --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
131
+ --motion-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
132
+ --ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);
133
+ --motion-ease-in-out: cubic-bezier(0.37, 0, 0.63, 1);
134
+ --duration-micro: 120ms;
135
+ --motion-duration-micro: 120ms;
136
+ --duration-flow: 240ms;
137
+ --motion-duration-flow: 240ms;
138
+ --duration-reveal: 380ms;
139
+ --motion-duration-reveal: 380ms;
140
+ --duration-cinematic: 620ms;
141
+ --motion-duration-cinematic: 620ms;
142
+
143
+ /* Spacing */
144
+ --space-source-xs: 0.75rem;
145
+ --space-source-sm: 1.125rem;
146
+ --space-source-md: 1.75rem;
147
+ --space-source-lg: 2.5rem;
148
+ --space-source-xl: 3.5rem;
149
+ --space-source-2xl: 5rem;
167
150
 
168
151
  /* Taxonomy / decorative (not product CTA) */
169
152
  --brand-category-brand: #260048;
@@ -175,81 +158,3 @@ html[data-brand="vanta"] {
175
158
  --brand-category-ash: #dfdfe9;
176
159
  --brand-decorative-hero-wash: #ddd6ff;
177
160
  }
178
-
179
- /* Zone: product — product never inherits marketing display */
180
- [data-zone="product"],
181
- .zone-product {
182
- font-size: var(--zone-product-body-size, 16px);
183
- line-height: var(--zone-product-body-leading, 1.5);
184
- font-weight: var(--zone-product-body-weight, 400);
185
- letter-spacing: var(--zone-product-body-tracking, -0.02px);
186
- --text-caption: var(--zone-product-caption-size, inherit);
187
- --leading-caption: var(--zone-product-caption-leading, inherit);
188
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
189
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
190
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
191
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
192
- --text-body: var(--zone-product-body-size, inherit);
193
- --leading-body: var(--zone-product-body-leading, inherit);
194
- --tracking-body: var(--zone-product-body-tracking, inherit);
195
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
196
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
197
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
198
- --text-subheading: var(--zone-product-subheading-size, inherit);
199
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
200
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
201
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
202
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
203
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
204
- --text-heading: var(--zone-product-heading-size, inherit);
205
- --leading-heading: var(--zone-product-heading-leading, inherit);
206
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
207
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
208
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
209
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
210
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
211
- --leading-display: var(--zone-product-display-leading, inherit);
212
- --tracking-display: var(--zone-product-display-tracking, inherit);
213
- }
214
-
215
- /* Zone: marketing — product never inherits marketing display */
216
- [data-zone="marketing"],
217
- .zone-marketing {
218
- font-size: var(--zone-marketing-body-size, 16px);
219
- line-height: var(--zone-marketing-body-leading, 1.5);
220
- font-weight: var(--zone-marketing-body-weight, 400);
221
- letter-spacing: var(--zone-marketing-body-tracking, -0.02px);
222
- --text-caption: var(--zone-marketing-caption-size, inherit);
223
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
224
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
225
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
226
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
227
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
228
- --text-body: var(--zone-marketing-body-size, inherit);
229
- --leading-body: var(--zone-marketing-body-leading, inherit);
230
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
231
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
232
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
233
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
234
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
235
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
236
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
237
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
238
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
239
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
240
- --text-heading: var(--zone-marketing-heading-size, inherit);
241
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
242
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
243
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
244
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
245
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
246
- --text-display: var(--zone-marketing-display-size, inherit);
247
- --leading-display: var(--zone-marketing-display-leading, inherit);
248
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
249
- }
250
-
251
- /* Product chrome must not use decorative gradients as action fills */
252
- [data-zone="product"] .btn-brand-default,
253
- .zone-product .btn-brand-default {
254
- /* intentional no-op: documents contract; action uses --primary only */
255
- }
package/skins/vercel.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Brand carrier skin: Vercel (vercel) v1.0.0
3
3
  * darkDefault=false dualMode=true button=solid
4
- * fonts=1 zones=yes mode=global
4
+ * fonts=1 mode=global
5
5
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
6
6
  */
7
7
 
@@ -86,16 +86,16 @@ html[data-brand="vercel"] {
86
86
  --elevation-card: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
87
87
  --elevation-control: 0 0 #0000;
88
88
  --elevation-raised: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
89
- --shadow-xs: 0 0 #0000;
90
- --shadow-sm: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
91
- --shadow-md: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
92
- --shadow-lg: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
89
+ --elevation-xs: 0 0 #0000;
90
+ --elevation-sm: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
91
+ --elevation-md: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
92
+ --elevation-lg: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
93
93
  --btn-default-shadow: 0 0 #0000;
94
94
  --btn-default-bg: hsl(var(--primary));
95
95
  --btn-default-fg: hsl(var(--primary-foreground));
96
96
  --btn-default-border-width: 0px;
97
97
  --btn-default-border: transparent;
98
- --btn-default-stroke-gradient: transparent;
98
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
99
99
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
100
100
  --badge-default-bg: hsl(var(--secondary));
101
101
  --badge-default-fg: hsl(var(--secondary-foreground));
@@ -107,6 +107,9 @@ html[data-brand="vercel"] {
107
107
  --control-height-sm: 1.75rem;
108
108
  --control-height-md: 2rem;
109
109
  --control-height-lg: 2.5rem;
110
+ --control-height-icon-sm: 1.5rem;
111
+ --control-height-icon-md: 1.75rem;
112
+ --control-height-icon-lg: 2rem;
110
113
  --control-font-size-md: 0.8125rem;
111
114
 
112
115
  /* Typography */
@@ -116,35 +119,27 @@ html[data-brand="vercel"] {
116
119
  --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
117
120
  --font-weight-heading: 450;
118
121
 
119
- /* Zone type scales */
120
- --zone-product-caption-size: 13px;
121
- --zone-product-caption-leading: 1.54;
122
- --zone-product-caption-weight: 400;
123
- --zone-product-body-sm-size: 14px;
124
- --zone-product-body-sm-leading: 1.43;
125
- --zone-product-body-sm-weight: 400;
126
- --zone-product-body-size: 16px;
127
- --zone-product-body-leading: 1.5;
128
- --zone-product-body-weight: 400;
129
- --zone-product-heading-size: 30px;
130
- --zone-product-heading-leading: 1.1;
131
- --zone-product-heading-tracking: -1.5px;
132
- --zone-product-heading-weight: 500;
133
- --zone-marketing-body-size: 16px;
134
- --zone-marketing-body-leading: 1.5;
135
- --zone-marketing-body-weight: 400;
136
- --zone-marketing-heading-size: 30px;
137
- --zone-marketing-heading-leading: 1.1;
138
- --zone-marketing-heading-tracking: -1.5px;
139
- --zone-marketing-heading-weight: 450;
140
- --zone-marketing-heading-lg-size: 56px;
141
- --zone-marketing-heading-lg-leading: 1;
142
- --zone-marketing-heading-lg-tracking: -3.36px;
143
- --zone-marketing-heading-lg-weight: 450;
144
- --zone-marketing-display-size: 64px;
145
- --zone-marketing-display-leading: 1;
146
- --zone-marketing-display-tracking: -3.84px;
147
- --zone-marketing-display-weight: 450;
122
+ /* Motion */
123
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
124
+ --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
125
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
126
+ --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
127
+ --duration-micro: 100ms;
128
+ --motion-duration-micro: 100ms;
129
+ --duration-flow: 150ms;
130
+ --motion-duration-flow: 150ms;
131
+ --duration-reveal: 200ms;
132
+ --motion-duration-reveal: 200ms;
133
+ --duration-cinematic: 300ms;
134
+ --motion-duration-cinematic: 300ms;
135
+
136
+ /* Spacing */
137
+ --space-source-xs: 0.5rem;
138
+ --space-source-sm: 0.75rem;
139
+ --space-source-md: 1rem;
140
+ --space-source-lg: 1.5rem;
141
+ --space-source-xl: 2rem;
142
+ --space-source-2xl: 3rem;
148
143
 
149
144
  /* Taxonomy / decorative (not product CTA) */
150
145
  --brand-category-carbon: #000000;
@@ -205,79 +200,3 @@ html.dark[data-brand="vercel"] {
205
200
  --brand-gradient-vertical: hsl(var(--primary));
206
201
  --brand-gradient-radial: hsl(var(--primary));
207
202
  }
208
-
209
- /* Zone: product — product never inherits marketing display */
210
- [data-zone="product"],
211
- .zone-product {
212
- font-size: var(--zone-product-body-size, 16px);
213
- line-height: var(--zone-product-body-leading, 1.5);
214
- font-weight: var(--zone-product-body-weight, 400);
215
- --text-caption: var(--zone-product-caption-size, inherit);
216
- --leading-caption: var(--zone-product-caption-leading, inherit);
217
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
218
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
219
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
220
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
221
- --text-body: var(--zone-product-body-size, inherit);
222
- --leading-body: var(--zone-product-body-leading, inherit);
223
- --tracking-body: var(--zone-product-body-tracking, inherit);
224
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
225
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
226
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
227
- --text-subheading: var(--zone-product-subheading-size, inherit);
228
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
229
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
230
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
231
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
232
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
233
- --text-heading: var(--zone-product-heading-size, inherit);
234
- --leading-heading: var(--zone-product-heading-leading, inherit);
235
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
236
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
237
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
238
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
239
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
240
- --leading-display: var(--zone-product-display-leading, inherit);
241
- --tracking-display: var(--zone-product-display-tracking, inherit);
242
- }
243
-
244
- /* Zone: marketing — product never inherits marketing display */
245
- [data-zone="marketing"],
246
- .zone-marketing {
247
- font-size: var(--zone-marketing-body-size, 16px);
248
- line-height: var(--zone-marketing-body-leading, 1.5);
249
- font-weight: var(--zone-marketing-body-weight, 400);
250
- --text-caption: var(--zone-marketing-caption-size, inherit);
251
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
252
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
253
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
254
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
255
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
256
- --text-body: var(--zone-marketing-body-size, inherit);
257
- --leading-body: var(--zone-marketing-body-leading, inherit);
258
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
259
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
260
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
261
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
262
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
263
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
264
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
265
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
266
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
267
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
268
- --text-heading: var(--zone-marketing-heading-size, inherit);
269
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
270
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
271
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
272
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
273
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
274
- --text-display: var(--zone-marketing-display-size, inherit);
275
- --leading-display: var(--zone-marketing-display-leading, inherit);
276
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
277
- }
278
-
279
- /* Product chrome must not use decorative gradients as action fills */
280
- [data-zone="product"] .btn-brand-default,
281
- .zone-product .btn-brand-default {
282
- /* intentional no-op: documents contract; action uses --primary only */
283
- }