@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/linear.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Brand carrier skin: Linear (linear) v1.0.0
3
3
  * darkDefault=true 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
 
@@ -83,19 +83,19 @@ html[data-brand="linear"] {
83
83
  --radius-pill: 9999px;
84
84
 
85
85
  /* Free elevation (carrier-provided CSS shadows) */
86
- --elevation-card: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
87
- --elevation-control: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.04));
88
- --elevation-raised: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
89
- --shadow-xs: var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.04));
90
- --shadow-sm: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
91
- --shadow-md: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
92
- --shadow-lg: var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1));
86
+ --elevation-card: 0 1px 2px 0 rgb(0 0 0 / 0.05);
87
+ --elevation-control: 0 1px 2px 0 rgb(0 0 0 / 0.04);
88
+ --elevation-raised: 0 4px 6px -1px rgb(0 0 0 / 0.1);
89
+ --elevation-xs: 0 1px 2px 0 rgb(0 0 0 / 0.04);
90
+ --elevation-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
91
+ --elevation-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
92
+ --elevation-lg: 0 4px 6px -1px rgb(0 0 0 / 0.1);
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(--primary));
101
101
  --badge-default-fg: hsl(var(--primary-foreground));
@@ -107,6 +107,9 @@ html[data-brand="linear"] {
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,38 +119,27 @@ html[data-brand="linear"] {
116
119
  --font-mono: "Berkeley Mono", "JetBrains Mono", ui-monospace, monospace;
117
120
  --font-weight-heading: 510;
118
121
 
119
- /* Zone type scales */
120
- --zone-product-caption-size: 13px;
121
- --zone-product-caption-leading: 1.2;
122
- --zone-product-caption-weight: 400;
123
- --zone-product-body-sm-size: 14px;
124
- --zone-product-body-sm-leading: 1.5;
125
- --zone-product-body-sm-weight: 400;
126
- --zone-product-body-size: 14px;
127
- --zone-product-body-leading: 1.5;
128
- --zone-product-body-weight: 400;
129
- --zone-product-body-lg-size: 16px;
130
- --zone-product-body-lg-leading: 1.5;
131
- --zone-product-body-lg-weight: 400;
132
- --zone-product-heading-size: 24px;
133
- --zone-product-heading-leading: 1.25;
134
- --zone-product-heading-tracking: -0.012em;
135
- --zone-product-heading-weight: 510;
136
- --zone-product-display-size: 32px;
137
- --zone-product-display-leading: 1.15;
138
- --zone-product-display-tracking: -0.022em;
139
- --zone-product-display-weight: 510;
140
- --zone-marketing-body-size: 15px;
141
- --zone-marketing-body-leading: 1.6;
142
- --zone-marketing-body-weight: 400;
143
- --zone-marketing-heading-size: 48px;
144
- --zone-marketing-heading-leading: 1;
145
- --zone-marketing-heading-tracking: -0.022em;
146
- --zone-marketing-heading-weight: 510;
147
- --zone-marketing-display-size: 72px;
148
- --zone-marketing-display-leading: 1;
149
- --zone-marketing-display-tracking: -0.022em;
150
- --zone-marketing-display-weight: 510;
122
+ /* Motion */
123
+ --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
124
+ --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 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: 80ms;
128
+ --motion-duration-micro: 80ms;
129
+ --duration-flow: 140ms;
130
+ --motion-duration-flow: 140ms;
131
+ --duration-reveal: 200ms;
132
+ --motion-duration-reveal: 200ms;
133
+ --duration-cinematic: 320ms;
134
+ --motion-duration-cinematic: 320ms;
135
+
136
+ /* Spacing */
137
+ --space-source-xs: 0.375rem;
138
+ --space-source-sm: 0.5rem;
139
+ --space-source-md: 0.75rem;
140
+ --space-source-lg: 1rem;
141
+ --space-source-xl: 1.5rem;
142
+ --space-source-2xl: 2rem;
151
143
  }
152
144
 
153
145
  .dark,
@@ -204,79 +196,3 @@ html.dark[data-brand="linear"] {
204
196
  --brand-gradient-vertical: hsl(var(--primary));
205
197
  --brand-gradient-radial: hsl(var(--primary));
206
198
  }
207
-
208
- /* Zone: product — product never inherits marketing display */
209
- [data-zone="product"],
210
- .zone-product {
211
- font-size: var(--zone-product-body-size, 14px);
212
- line-height: var(--zone-product-body-leading, 1.5);
213
- font-weight: var(--zone-product-body-weight, 400);
214
- --text-caption: var(--zone-product-caption-size, inherit);
215
- --leading-caption: var(--zone-product-caption-leading, inherit);
216
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
217
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
218
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
219
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
220
- --text-body: var(--zone-product-body-size, inherit);
221
- --leading-body: var(--zone-product-body-leading, inherit);
222
- --tracking-body: var(--zone-product-body-tracking, inherit);
223
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
224
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
225
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
226
- --text-subheading: var(--zone-product-subheading-size, inherit);
227
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
228
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
229
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
230
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
231
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
232
- --text-heading: var(--zone-product-heading-size, inherit);
233
- --leading-heading: var(--zone-product-heading-leading, inherit);
234
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
235
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
236
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
237
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
238
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
239
- --leading-display: var(--zone-product-display-leading, inherit);
240
- --tracking-display: var(--zone-product-display-tracking, inherit);
241
- }
242
-
243
- /* Zone: marketing — product never inherits marketing display */
244
- [data-zone="marketing"],
245
- .zone-marketing {
246
- font-size: var(--zone-marketing-body-size, 15px);
247
- line-height: var(--zone-marketing-body-leading, 1.6);
248
- font-weight: var(--zone-marketing-body-weight, 400);
249
- --text-caption: var(--zone-marketing-caption-size, inherit);
250
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
251
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
252
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
253
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
254
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
255
- --text-body: var(--zone-marketing-body-size, inherit);
256
- --leading-body: var(--zone-marketing-body-leading, inherit);
257
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
258
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
259
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
260
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
261
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
262
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
263
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
264
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
265
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
266
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
267
- --text-heading: var(--zone-marketing-heading-size, inherit);
268
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
269
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
270
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
271
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
272
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
273
- --text-display: var(--zone-marketing-display-size, inherit);
274
- --leading-display: var(--zone-marketing-display-leading, inherit);
275
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
276
- }
277
-
278
- /* Product chrome must not use decorative gradients as action fills */
279
- [data-zone="product"] .btn-brand-default,
280
- .zone-product .btn-brand-default {
281
- /* intentional no-op: documents contract; action uses --primary only */
282
- }
package/skins/notion.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Brand carrier skin: Notion (notion) v1.0.0
3
3
  * darkDefault=false dualMode=false button=solid
4
- * fonts=2 zones=yes mode=global
4
+ * fonts=2 mode=global
5
5
  * Contract: roles.action → --primary; roles.brand → --brand-mark (never default CTA)
6
6
  */
7
7
 
@@ -97,16 +97,16 @@ html[data-brand="notion"] {
97
97
  --elevation-card: 0 0 #0000;
98
98
  --elevation-control: 0 0 #0000;
99
99
  --elevation-raised: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
100
- --shadow-xs: 0 0 #0000;
101
- --shadow-sm: 0 0 #0000;
102
- --shadow-md: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
103
- --shadow-lg: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
100
+ --elevation-xs: 0 0 #0000;
101
+ --elevation-sm: 0 0 #0000;
102
+ --elevation-md: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
103
+ --elevation-lg: 0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03);
104
104
  --btn-default-shadow: 0 0 #0000;
105
105
  --btn-default-bg: hsl(var(--primary));
106
106
  --btn-default-fg: hsl(var(--primary-foreground));
107
107
  --btn-default-border-width: 0px;
108
108
  --btn-default-border: transparent;
109
- --btn-default-stroke-gradient: transparent;
109
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
110
110
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
111
111
  --badge-default-bg: hsl(var(--secondary));
112
112
  --badge-default-fg: hsl(var(--secondary-foreground));
@@ -119,41 +119,27 @@ html[data-brand="notion"] {
119
119
  --font-display: "NotionInter", "Inter", ui-sans-serif, system-ui, sans-serif;
120
120
  --font-weight-heading: 700;
121
121
 
122
- /* Zone type scales */
123
- --zone-product-caption-size: 12px;
124
- --zone-product-caption-leading: 1.33;
125
- --zone-product-caption-tracking: 0.12px;
126
- --zone-product-caption-weight: 500;
127
- --zone-product-body-sm-size: 14px;
128
- --zone-product-body-sm-leading: 1.43;
129
- --zone-product-body-sm-weight: 500;
130
- --zone-product-body-size: 16px;
131
- --zone-product-body-leading: 1.5;
132
- --zone-product-body-weight: 400;
133
- --zone-product-subheading-size: 20px;
134
- --zone-product-subheading-leading: 1;
135
- --zone-product-subheading-weight: 500;
136
- --zone-product-heading-sm-size: 22px;
137
- --zone-product-heading-sm-leading: 1.27;
138
- --zone-product-heading-sm-tracking: -0.242px;
139
- --zone-product-heading-sm-weight: 600;
140
- --zone-product-heading-size: 40px;
141
- --zone-product-heading-leading: 1.5;
142
- --zone-product-heading-weight: 600;
143
- --zone-marketing-body-size: 16px;
144
- --zone-marketing-body-leading: 1.5;
145
- --zone-marketing-body-weight: 400;
146
- --zone-marketing-heading-size: 48px;
147
- --zone-marketing-heading-leading: 1.5;
148
- --zone-marketing-heading-weight: 700;
149
- --zone-marketing-heading-lg-size: 54px;
150
- --zone-marketing-heading-lg-leading: 1.04;
151
- --zone-marketing-heading-lg-tracking: -1.89px;
152
- --zone-marketing-heading-lg-weight: 700;
153
- --zone-marketing-display-size: 72px;
154
- --zone-marketing-display-leading: 1.21;
155
- --zone-marketing-display-tracking: -2.016px;
156
- --zone-marketing-display-weight: 700;
122
+ /* Motion */
123
+ --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
124
+ --motion-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
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: 120ms;
128
+ --motion-duration-micro: 120ms;
129
+ --duration-flow: 200ms;
130
+ --motion-duration-flow: 200ms;
131
+ --duration-reveal: 280ms;
132
+ --motion-duration-reveal: 280ms;
133
+ --duration-cinematic: 460ms;
134
+ --motion-duration-cinematic: 460ms;
135
+
136
+ /* Spacing */
137
+ --space-source-xs: 0.625rem;
138
+ --space-source-sm: 1rem;
139
+ --space-source-md: 1.5rem;
140
+ --space-source-lg: 2rem;
141
+ --space-source-xl: 2.75rem;
142
+ --space-source-2xl: 3.75rem;
157
143
 
158
144
  /* Taxonomy / decorative (not product CTA) */
159
145
  --brand-category-brand: #000000;
@@ -170,79 +156,3 @@ html[data-brand="notion"] {
170
156
  --brand-decorative-sky-wash: #62aef0;
171
157
  --brand-decorative-midnight: #02093a;
172
158
  }
173
-
174
- /* Zone: product — product never inherits marketing display */
175
- [data-zone="product"],
176
- .zone-product {
177
- font-size: var(--zone-product-body-size, 16px);
178
- line-height: var(--zone-product-body-leading, 1.5);
179
- font-weight: var(--zone-product-body-weight, 400);
180
- --text-caption: var(--zone-product-caption-size, inherit);
181
- --leading-caption: var(--zone-product-caption-leading, inherit);
182
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
183
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
184
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
185
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
186
- --text-body: var(--zone-product-body-size, inherit);
187
- --leading-body: var(--zone-product-body-leading, inherit);
188
- --tracking-body: var(--zone-product-body-tracking, inherit);
189
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
190
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
191
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
192
- --text-subheading: var(--zone-product-subheading-size, inherit);
193
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
194
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
195
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
196
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
197
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
198
- --text-heading: var(--zone-product-heading-size, inherit);
199
- --leading-heading: var(--zone-product-heading-leading, inherit);
200
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
201
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
202
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
203
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
204
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
205
- --leading-display: var(--zone-product-display-leading, inherit);
206
- --tracking-display: var(--zone-product-display-tracking, inherit);
207
- }
208
-
209
- /* Zone: marketing — product never inherits marketing display */
210
- [data-zone="marketing"],
211
- .zone-marketing {
212
- font-size: var(--zone-marketing-body-size, 16px);
213
- line-height: var(--zone-marketing-body-leading, 1.5);
214
- font-weight: var(--zone-marketing-body-weight, 400);
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/raycast.css CHANGED
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Brand carrier skin: Raycast (raycast) v1.0.0
3
3
  * darkDefault=true 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
 
@@ -103,22 +103,22 @@ html[data-brand="raycast"] {
103
103
  0,
104
104
  0.2
105
105
  ) 0px -1px 0px 0px inset;
106
- --shadow-xs: 0 0 #0000;
107
- --shadow-sm:
106
+ --elevation-xs: 0 0 #0000;
107
+ --elevation-sm:
108
108
  rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
109
109
  0,
110
110
  0,
111
111
  0,
112
112
  0.2
113
113
  ) 0px -1px 0px 0px inset;
114
- --shadow-md:
114
+ --elevation-md:
115
115
  rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
116
116
  0,
117
117
  0,
118
118
  0,
119
119
  0.2
120
120
  ) 0px -1px 0px 0px inset;
121
- --shadow-lg:
121
+ --elevation-lg:
122
122
  rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(
123
123
  0,
124
124
  0,
@@ -130,7 +130,7 @@ html[data-brand="raycast"] {
130
130
  --btn-default-fg: hsl(var(--primary-foreground));
131
131
  --btn-default-border-width: 0px;
132
132
  --btn-default-border: transparent;
133
- --btn-default-stroke-gradient: transparent;
133
+ --btn-default-stroke-gradient: linear-gradient(transparent, transparent);
134
134
  --btn-default-hover-bg: color-mix(in srgb, hsl(var(--primary)) 90%, transparent);
135
135
  --badge-default-bg: hsl(var(--secondary));
136
136
  --badge-default-fg: hsl(var(--secondary-foreground));
@@ -142,6 +142,9 @@ html[data-brand="raycast"] {
142
142
  --control-height-sm: 1.75rem;
143
143
  --control-height-md: 2rem;
144
144
  --control-height-lg: 2.5rem;
145
+ --control-height-icon-sm: 1.5rem;
146
+ --control-height-icon-md: 1.75rem;
147
+ --control-height-icon-lg: 2rem;
145
148
  --control-font-size-md: 0.8125rem;
146
149
 
147
150
  /* Typography */
@@ -151,122 +154,32 @@ html[data-brand="raycast"] {
151
154
  --font-mono: "Geist Mono", "GeistMono", ui-monospace, Menlo, monospace;
152
155
  --font-weight-heading: 400;
153
156
 
154
- /* Zone type scales */
155
- --zone-product-caption-size: 11px;
156
- --zone-product-caption-leading: 0.91;
157
- --zone-product-caption-tracking: 0.8px;
158
- --zone-product-caption-weight: 500;
159
- --zone-product-body-sm-size: 13px;
160
- --zone-product-body-sm-leading: 1.2;
161
- --zone-product-body-sm-weight: 500;
162
- --zone-product-body-size: 16px;
163
- --zone-product-body-leading: 1.15;
164
- --zone-product-body-weight: 400;
165
- --zone-product-body-lg-size: 18px;
166
- --zone-product-body-lg-leading: 1.15;
167
- --zone-product-body-lg-weight: 400;
168
- --zone-product-subheading-size: 20px;
169
- --zone-product-subheading-leading: 1.2;
170
- --zone-product-subheading-tracking: 0.2px;
171
- --zone-product-subheading-weight: 400;
172
- --zone-product-heading-sm-size: 24px;
173
- --zone-product-heading-sm-leading: 1.15;
174
- --zone-product-heading-sm-weight: 500;
175
- --zone-product-heading-size: 32px;
176
- --zone-product-heading-leading: 1.15;
177
- --zone-product-heading-weight: 500;
178
- --zone-marketing-body-size: 16px;
179
- --zone-marketing-body-leading: 1.15;
180
- --zone-marketing-body-weight: 400;
181
- --zone-marketing-heading-size: 32px;
182
- --zone-marketing-heading-leading: 1.15;
183
- --zone-marketing-heading-weight: 500;
184
- --zone-marketing-heading-lg-size: 56px;
185
- --zone-marketing-heading-lg-leading: 1.17;
186
- --zone-marketing-heading-lg-tracking: 0.22px;
187
- --zone-marketing-heading-lg-weight: 400;
188
- --zone-marketing-display-size: 64px;
189
- --zone-marketing-display-leading: 1.1;
190
- --zone-marketing-display-weight: 600;
157
+ /* Motion */
158
+ --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
159
+ --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
160
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
161
+ --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
162
+ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
163
+ --motion-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
164
+ --duration-micro: 90ms;
165
+ --motion-duration-micro: 90ms;
166
+ --duration-flow: 160ms;
167
+ --motion-duration-flow: 160ms;
168
+ --duration-reveal: 220ms;
169
+ --motion-duration-reveal: 220ms;
170
+ --duration-cinematic: 340ms;
171
+ --motion-duration-cinematic: 340ms;
172
+
173
+ /* Spacing */
174
+ --space-source-xs: 0.375rem;
175
+ --space-source-sm: 0.5rem;
176
+ --space-source-md: 0.75rem;
177
+ --space-source-lg: 1rem;
178
+ --space-source-xl: 1.375rem;
179
+ --space-source-2xl: 2rem;
191
180
 
192
181
  /* Taxonomy / decorative (not product CTA) */
193
182
  --brand-category-brand: #ff6363;
194
183
  --brand-category-ember: #452324;
195
184
  --brand-category-sky: #63a1ff;
196
185
  }
197
-
198
- /* Zone: product — product never inherits marketing display */
199
- [data-zone="product"],
200
- .zone-product {
201
- font-size: var(--zone-product-body-size, 16px);
202
- line-height: var(--zone-product-body-leading, 1.15);
203
- font-weight: var(--zone-product-body-weight, 400);
204
- --text-caption: var(--zone-product-caption-size, inherit);
205
- --leading-caption: var(--zone-product-caption-leading, inherit);
206
- --tracking-caption: var(--zone-product-caption-tracking, inherit);
207
- --text-body-sm: var(--zone-product-body-sm-size, inherit);
208
- --leading-body-sm: var(--zone-product-body-sm-leading, inherit);
209
- --tracking-body-sm: var(--zone-product-body-sm-tracking, inherit);
210
- --text-body: var(--zone-product-body-size, inherit);
211
- --leading-body: var(--zone-product-body-leading, inherit);
212
- --tracking-body: var(--zone-product-body-tracking, inherit);
213
- --text-body-lg: var(--zone-product-body-lg-size, inherit);
214
- --leading-body-lg: var(--zone-product-body-lg-leading, inherit);
215
- --tracking-body-lg: var(--zone-product-body-lg-tracking, inherit);
216
- --text-subheading: var(--zone-product-subheading-size, inherit);
217
- --leading-subheading: var(--zone-product-subheading-leading, inherit);
218
- --tracking-subheading: var(--zone-product-subheading-tracking, inherit);
219
- --text-heading-sm: var(--zone-product-heading-sm-size, inherit);
220
- --leading-heading-sm: var(--zone-product-heading-sm-leading, inherit);
221
- --tracking-heading-sm: var(--zone-product-heading-sm-tracking, inherit);
222
- --text-heading: var(--zone-product-heading-size, inherit);
223
- --leading-heading: var(--zone-product-heading-leading, inherit);
224
- --tracking-heading: var(--zone-product-heading-tracking, inherit);
225
- --text-heading-lg: var(--zone-product-heading-lg-size, inherit);
226
- --leading-heading-lg: var(--zone-product-heading-lg-leading, inherit);
227
- --tracking-heading-lg: var(--zone-product-heading-lg-tracking, inherit);
228
- --text-display: var(--zone-product-display-size, var(--zone-product-heading-size, inherit));
229
- --leading-display: var(--zone-product-display-leading, inherit);
230
- --tracking-display: var(--zone-product-display-tracking, inherit);
231
- }
232
-
233
- /* Zone: marketing — product never inherits marketing display */
234
- [data-zone="marketing"],
235
- .zone-marketing {
236
- font-size: var(--zone-marketing-body-size, 16px);
237
- line-height: var(--zone-marketing-body-leading, 1.15);
238
- font-weight: var(--zone-marketing-body-weight, 400);
239
- --text-caption: var(--zone-marketing-caption-size, inherit);
240
- --leading-caption: var(--zone-marketing-caption-leading, inherit);
241
- --tracking-caption: var(--zone-marketing-caption-tracking, inherit);
242
- --text-body-sm: var(--zone-marketing-body-sm-size, inherit);
243
- --leading-body-sm: var(--zone-marketing-body-sm-leading, inherit);
244
- --tracking-body-sm: var(--zone-marketing-body-sm-tracking, inherit);
245
- --text-body: var(--zone-marketing-body-size, inherit);
246
- --leading-body: var(--zone-marketing-body-leading, inherit);
247
- --tracking-body: var(--zone-marketing-body-tracking, inherit);
248
- --text-body-lg: var(--zone-marketing-body-lg-size, inherit);
249
- --leading-body-lg: var(--zone-marketing-body-lg-leading, inherit);
250
- --tracking-body-lg: var(--zone-marketing-body-lg-tracking, inherit);
251
- --text-subheading: var(--zone-marketing-subheading-size, inherit);
252
- --leading-subheading: var(--zone-marketing-subheading-leading, inherit);
253
- --tracking-subheading: var(--zone-marketing-subheading-tracking, inherit);
254
- --text-heading-sm: var(--zone-marketing-heading-sm-size, inherit);
255
- --leading-heading-sm: var(--zone-marketing-heading-sm-leading, inherit);
256
- --tracking-heading-sm: var(--zone-marketing-heading-sm-tracking, inherit);
257
- --text-heading: var(--zone-marketing-heading-size, inherit);
258
- --leading-heading: var(--zone-marketing-heading-leading, inherit);
259
- --tracking-heading: var(--zone-marketing-heading-tracking, inherit);
260
- --text-heading-lg: var(--zone-marketing-heading-lg-size, inherit);
261
- --leading-heading-lg: var(--zone-marketing-heading-lg-leading, inherit);
262
- --tracking-heading-lg: var(--zone-marketing-heading-lg-tracking, inherit);
263
- --text-display: var(--zone-marketing-display-size, inherit);
264
- --leading-display: var(--zone-marketing-display-leading, inherit);
265
- --tracking-display: var(--zone-marketing-display-tracking, inherit);
266
- }
267
-
268
- /* Product chrome must not use decorative gradients as action fills */
269
- [data-zone="product"] .btn-brand-default,
270
- .zone-product .btn-brand-default {
271
- /* intentional no-op: documents contract; action uses --primary only */
272
- }