@almanaclabs/blaze-ui 0.7.2 → 0.8.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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/styles/globals.css +184 -3
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@almanaclabs/blaze-ui",
3
- "version": "0.7.2",
3
+ "version": "0.8.0",
4
4
  "description": "Shared React components and design tokens for Blaze",
5
5
  "type": "module",
6
6
  "sideEffects": [
package/src/styles/globals.css CHANGED
@@ -24,8 +24,26 @@
24
24
  }
25
25
 
26
26
  --font-heading: var(--font-sans);
27
- --font-sans: 'DM Sans Variable', system-ui, sans-serif;
28
- --font-accent: 'Fraunces Variable', Georgia, serif;
27
+ --font-sans: -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
28
+ --font-accent: var(--font-sans);
29
+ --color-area-website: var(--area-website);
30
+ --color-area-website-soft: var(--area-website-soft);
31
+ --color-area-website-foreground: var(--area-website-foreground);
32
+ --color-area-social: var(--area-social);
33
+ --color-area-social-soft: var(--area-social-soft);
34
+ --color-area-social-foreground: var(--area-social-foreground);
35
+ --color-area-search: var(--area-search);
36
+ --color-area-search-soft: var(--area-search-soft);
37
+ --color-area-search-foreground: var(--area-search-foreground);
38
+ --color-area-ads: var(--area-ads);
39
+ --color-area-ads-soft: var(--area-ads-soft);
40
+ --color-area-ads-foreground: var(--area-ads-foreground);
41
+ --color-area-calls: var(--area-calls);
42
+ --color-area-calls-soft: var(--area-calls-soft);
43
+ --color-area-calls-foreground: var(--area-calls-foreground);
44
+ --color-area-reviews: var(--area-reviews);
45
+ --color-area-reviews-soft: var(--area-reviews-soft);
46
+ --color-area-reviews-foreground: var(--area-reviews-foreground);
29
47
  --color-canvas: var(--canvas);
30
48
  --color-brand-surface: var(--brand-surface);
31
49
  --color-brand-surface-foreground: var(--brand-surface-foreground);
@@ -85,6 +103,9 @@
85
103
  }
86
104
 
87
105
  :root {
106
+ --type-display-title-size: 2.75rem;
107
+ --type-display-title-line-height: 1.05;
108
+ --type-display-title-letter-spacing: -0.035em;
88
109
  --type-page-title-size: 1.75rem;
89
110
  --type-page-title-line-height: 1.14;
90
111
  --type-page-title-letter-spacing: -0.035em;
@@ -122,6 +143,157 @@
122
143
  --icon-stroke-24: 1.5px;
123
144
  --icon-stroke-32: 1.5px;
124
145
  --canvas: #fff;
146
+ --background: #f6f7f9;
147
+ --foreground: #1b1b23;
148
+ --foreground-secondary: #5f5f70;
149
+ --foreground-tertiary: #6e6e80;
150
+ --card: #fff;
151
+ --card-foreground: #1b1b23;
152
+ --popover: #fff;
153
+ --popover-foreground: #1b1b23;
154
+ --brand-accent: #2f6fe4;
155
+ --primary: #2f6fe4;
156
+ --primary-hover: #2a63cc;
157
+ --primary-foreground: #fff;
158
+ --link: #2a63cc;
159
+ --secondary: #efeff6;
160
+ --secondary-foreground: #1b1b23;
161
+ --muted: #efeff6;
162
+ --muted-foreground: #5f5f70;
163
+ --accent: #efeff2;
164
+ --accent-foreground: #1b1b23;
165
+ --surface-subtle: #f8f8fc;
166
+ --surface-muted: #efeff6;
167
+ --navigation-selected: #efeff2;
168
+ --brand-surface: #1b1b23;
169
+ --brand-surface-foreground: #fff;
170
+ --destructive: #c4161c;
171
+ --destructive-soft: #fde7e8;
172
+ --success: #1e7a4c;
173
+ --success-soft: #e3f4ea;
174
+ --warning: #8f5b00;
175
+ --warning-foreground: #845400;
176
+ --warning-soft: #fdf1d8;
177
+ --info: #1f63c4;
178
+ --border: #e1e1ea;
179
+ --border-subtle: #ebebf2;
180
+ --input: #d9d9e3;
181
+ --ring: #2f6fe4;
182
+ --area-website: #0d9488;
183
+ --area-social: #ec4899;
184
+ --area-search: #9333ea;
185
+ --area-ads: #f97316;
186
+ --area-calls: #16a34a;
187
+ --area-reviews: #d97706;
188
+ --area-website-foreground: #0f766e;
189
+ --area-social-foreground: #be185d;
190
+ --area-search-foreground: #7e22ce;
191
+ --area-ads-foreground: #9a3412;
192
+ --area-calls-foreground: #166534;
193
+ --area-reviews-foreground: #92400e;
194
+ --area-website-soft: color-mix(in srgb, var(--area-website) 10%, transparent);
195
+ --area-social-soft: color-mix(in srgb, var(--area-social) 10%, transparent);
196
+ --area-search-soft: color-mix(in srgb, var(--area-search) 10%, transparent);
197
+ --area-ads-soft: color-mix(in srgb, var(--area-ads) 10%, transparent);
198
+ --area-calls-soft: color-mix(in srgb, var(--area-calls) 10%, transparent);
199
+ --area-reviews-soft: color-mix(in srgb, var(--area-reviews) 10%, transparent);
200
+ --chart-1: oklch(0.87 0 0);
201
+ --chart-2: oklch(0.556 0 0);
202
+ --chart-3: oklch(0.439 0 0);
203
+ --chart-4: oklch(0.371 0 0);
204
+ --chart-5: oklch(0.269 0 0);
205
+ --radius: 0.875rem;
206
+ --sidebar: var(--canvas);
207
+ --sidebar-foreground: #1b1b23;
208
+ --sidebar-primary: #2f6fe4;
209
+ --sidebar-primary-foreground: #fff;
210
+ --sidebar-accent: var(--navigation-selected);
211
+ --sidebar-accent-foreground: #1b1b23;
212
+ --sidebar-border: #e1e1ea;
213
+ --sidebar-ring: #2f6fe4;
214
+ }
215
+
216
+ .dark {
217
+ --canvas: #111116;
218
+ --background: #17171d;
219
+ --foreground: #f4f4f7;
220
+ --foreground-secondary: #b4b4c2;
221
+ --foreground-tertiary: #9a9aab;
222
+ --card: #1f1f27;
223
+ --card-foreground: #f4f4f7;
224
+ --popover: #1f1f27;
225
+ --popover-foreground: #f4f4f7;
226
+ --brand-accent: #6c9bf0;
227
+ --primary: #2f6fe4;
228
+ --primary-hover: #4a82ea;
229
+ --primary-foreground: #fff;
230
+ --link: #8ab0f4;
231
+ --secondary: #2a2a34;
232
+ --secondary-foreground: #f4f4f7;
233
+ --muted: #2a2a34;
234
+ --muted-foreground: #b4b4c2;
235
+ --accent: #2a2a34;
236
+ --accent-foreground: #f4f4f7;
237
+ --surface-subtle: #1c1c23;
238
+ --surface-muted: #2a2a34;
239
+ --navigation-selected: #2a2a34;
240
+ --brand-surface: #2a2a34;
241
+ --brand-surface-foreground: #f4f4f7;
242
+ --destructive: #f2868a;
243
+ --destructive-soft: #4a2124;
244
+ --success: #86cda4;
245
+ --success-soft: #1f3b2c;
246
+ --warning: #e9c270;
247
+ --warning-foreground: #e9c270;
248
+ --warning-soft: #45351b;
249
+ --info: #8ab0f4;
250
+ --border: #34343f;
251
+ --border-subtle: #2a2a34;
252
+ --input: #3d3d49;
253
+ --ring: #6c9bf0;
254
+ --area-website: #2dd4bf;
255
+ --area-social: #f472b6;
256
+ --area-search: #c084fc;
257
+ --area-ads: #fb923c;
258
+ --area-calls: #4ade80;
259
+ --area-reviews: #fbbf24;
260
+ --area-website-foreground: var(--area-website);
261
+ --area-social-foreground: var(--area-social);
262
+ --area-search-foreground: var(--area-search);
263
+ --area-ads-foreground: var(--area-ads);
264
+ --area-calls-foreground: var(--area-calls);
265
+ --area-reviews-foreground: var(--area-reviews);
266
+ --area-website-soft: color-mix(in srgb, var(--area-website) 16%, transparent);
267
+ --area-social-soft: color-mix(in srgb, var(--area-social) 16%, transparent);
268
+ --area-search-soft: color-mix(in srgb, var(--area-search) 16%, transparent);
269
+ --area-ads-soft: color-mix(in srgb, var(--area-ads) 16%, transparent);
270
+ --area-calls-soft: color-mix(in srgb, var(--area-calls) 16%, transparent);
271
+ --area-reviews-soft: color-mix(in srgb, var(--area-reviews) 16%, transparent);
272
+ --chart-1: oklch(0.87 0 0);
273
+ --chart-2: oklch(0.556 0 0);
274
+ --chart-3: oklch(0.439 0 0);
275
+ --chart-4: oklch(0.371 0 0);
276
+ --chart-5: oklch(0.269 0 0);
277
+ --sidebar: var(--canvas);
278
+ --sidebar-foreground: #f4f4f7;
279
+ --sidebar-primary: #2f6fe4;
280
+ --sidebar-primary-foreground: #fff;
281
+ --sidebar-accent: #2a2a34;
282
+ --sidebar-accent-foreground: #f4f4f7;
283
+ --sidebar-border: #34343f;
284
+ --sidebar-ring: #6c9bf0;
285
+ }
286
+
287
+ /*
288
+ * Huck, the alternate theme (ADR 0019, kept by ADR 0021): add `theme-huck` to the
289
+ * root element, or to any wrapper, for the warm cream palette, coral actions, DM Sans
290
+ * and Fraunces. Dark mode composes with it through `.dark`.
291
+ */
292
+ .theme-huck {
293
+ --font-sans: 'DM Sans Variable', system-ui, sans-serif;
294
+ --font-heading: var(--font-sans);
295
+ --font-accent: 'Fraunces Variable', Georgia, serif;
296
+ --canvas: #fff;
125
297
  --background: #fffaf0;
126
298
  --foreground: #251613;
127
299
  --foreground-secondary: #74635d;
@@ -174,7 +346,8 @@
174
346
  --sidebar-ring: #5a170f;
175
347
  }
176
348
 
177
- .dark {
349
+ .theme-huck.dark,
350
+ .theme-huck .dark {
178
351
  --canvas: #1a100e;
179
352
  --background: #251613;
180
353
  --foreground: #fffaf0;
@@ -250,6 +423,14 @@
250
423
  }
251
424
 
252
425
  @layer utilities {
426
+ .type-display-title {
427
+ font-family: var(--font-heading);
428
+ font-size: var(--type-display-title-size);
429
+ line-height: var(--type-display-title-line-height);
430
+ letter-spacing: var(--type-display-title-letter-spacing);
431
+ font-weight: 400;
432
+ }
433
+
253
434
  .type-page-title {
254
435
  font-family: var(--font-heading);
255
436
  font-size: var(--type-page-title-size);