@almanaclabs/blaze-ui 0.7.1 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almanaclabs/blaze-ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "description": "Shared React components and design tokens for Blaze",
   "type": "module",
   "sideEffects": [

package/recipes/workspace-shell/workspace-shell.tsx

@@ -509,7 +509,7 @@ export function WorkspaceShellRecipe({
       <SidebarProvider
         defaultOpen={defaultSidebarOpen}
         data-sidebar-resizing={isSidebarResizing || undefined}
-        className="workspace-shell-motion h-svh min-h-[720px] overflow-hidden bg-[#f5f5f5]"
+        className="workspace-shell-motion h-svh min-h-[720px] overflow-hidden bg-canvas"
         style={
           {
             '--sidebar-width': `${sidebarWidth}px`,
@@ -575,7 +575,7 @@ export function WorkspaceShellRecipe({
           />
         </Sidebar>
 
-        <SidebarInset className="min-h-0 min-w-0 bg-[#f5f5f5] p-0 md:p-2.5 md:pl-0">
+        <SidebarInset className="min-h-0 min-w-0 bg-canvas p-0 md:p-2.5 md:pl-0">
           <section
             data-slot="workspace-frame"
             data-mode={mode}

package/src/styles/globals.css

@@ -24,8 +24,26 @@
   }
 
   --font-heading: var(--font-sans);
-  --font-sans: 'DM Sans Variable', system-ui, sans-serif;
-  --font-accent: 'Fraunces Variable', Georgia, serif;
+  --font-sans: -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
+  --font-accent: var(--font-sans);
+  --color-area-website: var(--area-website);
+  --color-area-website-soft: var(--area-website-soft);
+  --color-area-website-foreground: var(--area-website-foreground);
+  --color-area-social: var(--area-social);
+  --color-area-social-soft: var(--area-social-soft);
+  --color-area-social-foreground: var(--area-social-foreground);
+  --color-area-search: var(--area-search);
+  --color-area-search-soft: var(--area-search-soft);
+  --color-area-search-foreground: var(--area-search-foreground);
+  --color-area-ads: var(--area-ads);
+  --color-area-ads-soft: var(--area-ads-soft);
+  --color-area-ads-foreground: var(--area-ads-foreground);
+  --color-area-calls: var(--area-calls);
+  --color-area-calls-soft: var(--area-calls-soft);
+  --color-area-calls-foreground: var(--area-calls-foreground);
+  --color-area-reviews: var(--area-reviews);
+  --color-area-reviews-soft: var(--area-reviews-soft);
+  --color-area-reviews-foreground: var(--area-reviews-foreground);
   --color-canvas: var(--canvas);
   --color-brand-surface: var(--brand-surface);
   --color-brand-surface-foreground: var(--brand-surface-foreground);
@@ -85,6 +103,9 @@
 }
 
 :root {
+  --type-display-title-size: 2.75rem;
+  --type-display-title-line-height: 1.05;
+  --type-display-title-letter-spacing: -0.035em;
   --type-page-title-size: 1.75rem;
   --type-page-title-line-height: 1.14;
   --type-page-title-letter-spacing: -0.035em;
@@ -121,7 +142,158 @@
   --icon-stroke-20: 1.5px;
   --icon-stroke-24: 1.5px;
   --icon-stroke-32: 1.5px;
-  --canvas: #f2ede5;
+  --canvas: #fff;
+  --background: #f6f7f9;
+  --foreground: #1b1b23;
+  --foreground-secondary: #5f5f70;
+  --foreground-tertiary: #6e6e80;
+  --card: #fff;
+  --card-foreground: #1b1b23;
+  --popover: #fff;
+  --popover-foreground: #1b1b23;
+  --brand-accent: #2f6fe4;
+  --primary: #2f6fe4;
+  --primary-hover: #2a63cc;
+  --primary-foreground: #fff;
+  --link: #2a63cc;
+  --secondary: #efeff6;
+  --secondary-foreground: #1b1b23;
+  --muted: #efeff6;
+  --muted-foreground: #5f5f70;
+  --accent: #efeff2;
+  --accent-foreground: #1b1b23;
+  --surface-subtle: #f8f8fc;
+  --surface-muted: #efeff6;
+  --navigation-selected: #efeff2;
+  --brand-surface: #1b1b23;
+  --brand-surface-foreground: #fff;
+  --destructive: #c4161c;
+  --destructive-soft: #fde7e8;
+  --success: #1e7a4c;
+  --success-soft: #e3f4ea;
+  --warning: #8f5b00;
+  --warning-foreground: #845400;
+  --warning-soft: #fdf1d8;
+  --info: #1f63c4;
+  --border: #e1e1ea;
+  --border-subtle: #ebebf2;
+  --input: #d9d9e3;
+  --ring: #2f6fe4;
+  --area-website: #0d9488;
+  --area-social: #ec4899;
+  --area-search: #9333ea;
+  --area-ads: #f97316;
+  --area-calls: #16a34a;
+  --area-reviews: #d97706;
+  --area-website-foreground: #0f766e;
+  --area-social-foreground: #be185d;
+  --area-search-foreground: #7e22ce;
+  --area-ads-foreground: #9a3412;
+  --area-calls-foreground: #166534;
+  --area-reviews-foreground: #92400e;
+  --area-website-soft: color-mix(in srgb, var(--area-website) 10%, transparent);
+  --area-social-soft: color-mix(in srgb, var(--area-social) 10%, transparent);
+  --area-search-soft: color-mix(in srgb, var(--area-search) 10%, transparent);
+  --area-ads-soft: color-mix(in srgb, var(--area-ads) 10%, transparent);
+  --area-calls-soft: color-mix(in srgb, var(--area-calls) 10%, transparent);
+  --area-reviews-soft: color-mix(in srgb, var(--area-reviews) 10%, transparent);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.875rem;
+  --sidebar: var(--canvas);
+  --sidebar-foreground: #1b1b23;
+  --sidebar-primary: #2f6fe4;
+  --sidebar-primary-foreground: #fff;
+  --sidebar-accent: var(--navigation-selected);
+  --sidebar-accent-foreground: #1b1b23;
+  --sidebar-border: #e1e1ea;
+  --sidebar-ring: #2f6fe4;
+}
+
+.dark {
+  --canvas: #111116;
+  --background: #17171d;
+  --foreground: #f4f4f7;
+  --foreground-secondary: #b4b4c2;
+  --foreground-tertiary: #9a9aab;
+  --card: #1f1f27;
+  --card-foreground: #f4f4f7;
+  --popover: #1f1f27;
+  --popover-foreground: #f4f4f7;
+  --brand-accent: #6c9bf0;
+  --primary: #2f6fe4;
+  --primary-hover: #4a82ea;
+  --primary-foreground: #fff;
+  --link: #8ab0f4;
+  --secondary: #2a2a34;
+  --secondary-foreground: #f4f4f7;
+  --muted: #2a2a34;
+  --muted-foreground: #b4b4c2;
+  --accent: #2a2a34;
+  --accent-foreground: #f4f4f7;
+  --surface-subtle: #1c1c23;
+  --surface-muted: #2a2a34;
+  --navigation-selected: #2a2a34;
+  --brand-surface: #2a2a34;
+  --brand-surface-foreground: #f4f4f7;
+  --destructive: #f2868a;
+  --destructive-soft: #4a2124;
+  --success: #86cda4;
+  --success-soft: #1f3b2c;
+  --warning: #e9c270;
+  --warning-foreground: #e9c270;
+  --warning-soft: #45351b;
+  --info: #8ab0f4;
+  --border: #34343f;
+  --border-subtle: #2a2a34;
+  --input: #3d3d49;
+  --ring: #6c9bf0;
+  --area-website: #2dd4bf;
+  --area-social: #f472b6;
+  --area-search: #c084fc;
+  --area-ads: #fb923c;
+  --area-calls: #4ade80;
+  --area-reviews: #fbbf24;
+  --area-website-foreground: var(--area-website);
+  --area-social-foreground: var(--area-social);
+  --area-search-foreground: var(--area-search);
+  --area-ads-foreground: var(--area-ads);
+  --area-calls-foreground: var(--area-calls);
+  --area-reviews-foreground: var(--area-reviews);
+  --area-website-soft: color-mix(in srgb, var(--area-website) 16%, transparent);
+  --area-social-soft: color-mix(in srgb, var(--area-social) 16%, transparent);
+  --area-search-soft: color-mix(in srgb, var(--area-search) 16%, transparent);
+  --area-ads-soft: color-mix(in srgb, var(--area-ads) 16%, transparent);
+  --area-calls-soft: color-mix(in srgb, var(--area-calls) 16%, transparent);
+  --area-reviews-soft: color-mix(in srgb, var(--area-reviews) 16%, transparent);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: var(--canvas);
+  --sidebar-foreground: #f4f4f7;
+  --sidebar-primary: #2f6fe4;
+  --sidebar-primary-foreground: #fff;
+  --sidebar-accent: #2a2a34;
+  --sidebar-accent-foreground: #f4f4f7;
+  --sidebar-border: #34343f;
+  --sidebar-ring: #6c9bf0;
+}
+
+/*
+ * Huck, the alternate theme (ADR 0019, kept by ADR 0021): add `theme-huck` to the
+ * root element, or to any wrapper, for the warm cream palette, coral actions, DM Sans
+ * and Fraunces. Dark mode composes with it through `.dark`.
+ */
+.theme-huck {
+  --font-sans: 'DM Sans Variable', system-ui, sans-serif;
+  --font-heading: var(--font-sans);
+  --font-accent: 'Fraunces Variable', Georgia, serif;
+  --canvas: #fff;
   --background: #fffaf0;
   --foreground: #251613;
   --foreground-secondary: #74635d;
@@ -164,7 +336,7 @@
   --chart-4: oklch(0.371 0 0);
   --chart-5: oklch(0.269 0 0);
   --radius: 0.875rem;
-  --sidebar: #fffaf0;
+  --sidebar: var(--canvas);
   --sidebar-foreground: #251613;
   --sidebar-primary: #c83c31;
   --sidebar-primary-foreground: #fff8e7;
@@ -174,7 +346,8 @@
   --sidebar-ring: #5a170f;
 }
 
-.dark {
+.theme-huck.dark,
+.theme-huck .dark {
   --canvas: #1a100e;
   --background: #251613;
   --foreground: #fffaf0;
@@ -217,7 +390,7 @@
   --chart-3: oklch(0.439 0 0);
   --chart-4: oklch(0.371 0 0);
   --chart-5: oklch(0.269 0 0);
-  --sidebar: #30201b;
+  --sidebar: var(--canvas);
   --sidebar-foreground: #fffaf0;
   --sidebar-primary: #c83c31;
   --sidebar-primary-foreground: #fff8e7;
@@ -250,6 +423,14 @@
 }
 
 @layer utilities {
+  .type-display-title {
+    font-family: var(--font-heading);
+    font-size: var(--type-display-title-size);
+    line-height: var(--type-display-title-line-height);
+    letter-spacing: var(--type-display-title-letter-spacing);
+    font-weight: 400;
+  }
+
   .type-page-title {
     font-family: var(--font-heading);
     font-size: var(--type-page-title-size);