@almanaclabs/blaze-ui 0.4.0 → 0.5.0

package/src/styles/globals.css

@@ -1,29 +1,27 @@
 @import 'tw-animate-css';
 
 @font-face {
-  font-family: 'Inter Variable';
+  font-family: 'Sohne';
   font-style: normal;
   font-display: swap;
-  font-weight: 100 900;
-  src: url('@fontsource-variable/inter/files/inter-latin-ext-wght-normal.woff2')
-    format('woff2-variations');
-  unicode-range:
-    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
-    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+  font-weight: 400;
+  src: url('./fonts/Sohne-Book.woff2') format('woff2');
 }
 
 @font-face {
-  font-family: 'Inter Variable';
+  font-family: 'Sohne';
   font-style: normal;
   font-display: swap;
-  font-weight: 100 900;
-  src: url('@fontsource-variable/inter/files/inter-latin-wght-normal.woff2')
-    format('woff2-variations');
-  unicode-range:
-    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
-    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
-    U+2215, U+FEFF, U+FFFD;
+  font-weight: 500;
+  src: url('./fonts/Sohne-Medium.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Sohne';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 600;
+  src: url('./fonts/Sohne-Semi.woff2') format('woff2');
 }
 
 @custom-variant dark (&:is(.dark *));
@@ -48,7 +46,7 @@
   }
 
   --font-heading: var(--font-sans);
-  --font-sans: 'Inter Variable', sans-serif;
+  --font-sans: 'Sohne', -apple-system, BlinkMacSystemFont, sans-serif;
   --color-sidebar-ring: var(--sidebar-ring);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
@@ -66,6 +64,15 @@
   --color-input: var(--input);
   --color-border: var(--border);
   --color-destructive: var(--destructive);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-info: var(--info);
+  --color-foreground-secondary: var(--foreground-secondary);
+  --color-foreground-tertiary: var(--foreground-tertiary);
+  --color-surface-subtle: var(--surface-subtle);
+  --color-surface-muted: var(--surface-muted);
+  --color-navigation-selected: var(--navigation-selected);
+  --color-border-subtle: var(--border-subtle);
   --color-accent-foreground: var(--accent-foreground);
   --color-accent: var(--accent);
   --color-muted-foreground: var(--muted-foreground);
@@ -80,34 +87,78 @@
   --color-card: var(--card);
   --color-foreground: var(--foreground);
   --color-background: var(--background);
-  --radius-sm: calc(var(--radius) * 0.6);
-  --radius-md: calc(var(--radius) * 0.8);
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
   --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) * 1.4);
-  --radius-2xl: calc(var(--radius) * 1.8);
-  --radius-3xl: calc(var(--radius) * 2.2);
-  --radius-4xl: calc(var(--radius) * 2.6);
+  --radius-xl: 0.75rem;
+  --radius-2xl: 0.875rem;
+  --radius-3xl: 1rem;
+  --radius-4xl: 1.25rem;
 }
 
 :root {
-  --background: oklch(1 0 0);
-  --foreground: oklch(0.145 0 0);
-  --card: oklch(1 0 0);
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: oklch(0.205 0 0);
-  --primary-foreground: oklch(0.985 0 0);
-  --secondary: oklch(0.97 0 0);
-  --secondary-foreground: oklch(0.205 0 0);
-  --muted: oklch(0.97 0 0);
-  --muted-foreground: oklch(0.535 0 0);
-  --accent: oklch(0.97 0 0);
-  --accent-foreground: oklch(0.205 0 0);
-  --destructive: oklch(0.505 0.213 27.518);
-  --border: oklch(0.922 0 0);
-  --input: oklch(0.922 0 0);
-  --ring: oklch(0.708 0 0);
+  --type-page-title-size: 1.5rem;
+  --type-page-title-line-height: 1.1;
+  --type-page-title-letter-spacing: -0.0125rem;
+  --type-section-title-size: 1.375rem;
+  --type-section-title-line-height: 1.2727;
+  --type-section-title-letter-spacing: 0;
+  --type-content-size: 1rem;
+  --type-content-line-height: 1.4;
+  --type-content-letter-spacing: 0.02em;
+  --type-label-size: 0.875rem;
+  --type-label-line-height: 1.4286;
+  --type-label-letter-spacing: 0.02em;
+  --type-body-size: 0.875rem;
+  --type-body-line-height: 1.5;
+  --type-body-letter-spacing: 0.02em;
+  --type-meta-size: 0.75rem;
+  --type-meta-line-height: 1.5;
+  --type-meta-letter-spacing: 0.02em;
+  /* Positive values move editable/selectable values down from line-box center. */
+  --sohne-control-optical-offset: 0.0625rem;
+  /*
+   * These are rendered CSS-pixel widths, not Tabler view-box units. Shape-level
+   * non-scaling strokes keep them stable as icons resize. The scale uses only
+   * quarter- and sixth-pixel increments, preserves compact-icon legibility, and
+   * compounds the optical reduction until task and display icons plateau at 3/2px.
+   */
+  --icon-stroke-8: calc(3px / 4);
+  --icon-stroke-12: 1px;
+  --icon-stroke-14: calc(7px / 6);
+  --icon-stroke-15: calc(7px / 6);
+  --icon-stroke-16: 1.25px;
+  --icon-stroke-18: calc(4px / 3);
+  --icon-stroke-20: 1.5px;
+  --icon-stroke-24: 1.5px;
+  --icon-stroke-32: 1.5px;
+  --background: #fff;
+  --foreground: rgb(0 0 0 / 90%);
+  --foreground-secondary: rgb(0 0 0 / 60%);
+  --foreground-tertiary: rgb(0 0 0 / 56%);
+  --card: #fff;
+  --card-foreground: rgb(0 0 0 / 90%);
+  --popover: #fff;
+  --popover-foreground: rgb(0 0 0 / 90%);
+  --primary: rgb(0 0 0 / 90%);
+  --primary-foreground: #fff;
+  --secondary: rgb(0 0 0 / 3%);
+  --secondary-foreground: rgb(0 0 0 / 90%);
+  --muted: rgb(0 0 0 / 3%);
+  --muted-foreground: rgb(0 0 0 / 60%);
+  --accent: rgb(0 0 0 / 5%);
+  --accent-foreground: rgb(0 0 0 / 90%);
+  --surface-subtle: rgb(0 0 0 / 2%);
+  --surface-muted: rgb(0 0 0 / 3%);
+  --navigation-selected: rgb(0 0 0 / 8%);
+  --destructive: #ad0006;
+  --success: #005f45;
+  --warning: #896900;
+  --info: #2b6595;
+  --border: rgb(0 0 0 / 8%);
+  --border-subtle: rgb(0 0 0 / 5%);
+  --input: rgb(0 0 0 / 8%);
+  --ring: rgb(0 0 0 / 40%);
   --chart-1: oklch(0.87 0 0);
   --chart-2: oklch(0.556 0 0);
   --chart-3: oklch(0.439 0 0);
@@ -126,23 +177,32 @@
 
 .dark {
   --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
+  --foreground: rgb(255 255 255 / 90%);
+  --foreground-secondary: rgb(255 255 255 / 60%);
+  --foreground-tertiary: rgb(255 255 255 / 56%);
   --card: oklch(0.205 0 0);
-  --card-foreground: oklch(0.985 0 0);
+  --card-foreground: rgb(255 255 255 / 90%);
   --popover: oklch(0.205 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.922 0 0);
+  --popover-foreground: rgb(255 255 255 / 90%);
+  --primary: rgb(255 255 255 / 90%);
   --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
+  --secondary: rgb(255 255 255 / 6%);
+  --secondary-foreground: rgb(255 255 255 / 90%);
+  --muted: rgb(255 255 255 / 6%);
+  --muted-foreground: rgb(255 255 255 / 60%);
+  --accent: rgb(255 255 255 / 8%);
+  --accent-foreground: rgb(255 255 255 / 90%);
+  --surface-subtle: rgb(255 255 255 / 4%);
+  --surface-muted: rgb(255 255 255 / 6%);
+  --navigation-selected: rgb(255 255 255 / 10%);
   --destructive: oklch(0.704 0.191 22.216);
-  --border: oklch(1 0 0 / 10%);
-  --input: oklch(1 0 0 / 15%);
-  --ring: oklch(0.556 0 0);
+  --success: #65c9a6;
+  --warning: #e5c559;
+  --info: #7bb5e3;
+  --border: rgb(255 255 255 / 12%);
+  --border-subtle: rgb(255 255 255 / 8%);
+  --input: rgb(255 255 255 / 12%);
+  --ring: rgb(255 255 255 / 45%);
   --chart-1: oklch(0.87 0 0);
   --chart-2: oklch(0.556 0 0);
   --chart-3: oklch(0.439 0 0);
@@ -165,8 +225,14 @@
   }
 
   body {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
     background-color: var(--background);
     color: var(--foreground);
+    font-family: var(--font-sans);
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    letter-spacing: var(--type-body-letter-spacing);
   }
 
   button:not(:disabled):not([aria-disabled='true']),
@@ -175,6 +241,119 @@
   }
 }
 
+@layer utilities {
+  .type-page-title {
+    font-size: var(--type-page-title-size);
+    line-height: var(--type-page-title-line-height);
+    letter-spacing: var(--type-page-title-letter-spacing);
+  }
+
+  .type-section-title {
+    font-size: var(--type-section-title-size);
+    line-height: var(--type-section-title-line-height);
+    letter-spacing: var(--type-section-title-letter-spacing);
+  }
+
+  .type-body-lg {
+    font-size: var(--type-content-size);
+    line-height: var(--type-content-line-height);
+    letter-spacing: var(--type-content-letter-spacing);
+  }
+
+  .type-content {
+    font-size: var(--type-content-size);
+    line-height: var(--type-content-line-height);
+    letter-spacing: var(--type-content-letter-spacing);
+  }
+
+  .type-label {
+    font-size: var(--type-label-size);
+    line-height: var(--type-label-line-height);
+    letter-spacing: var(--type-label-letter-spacing);
+  }
+
+  .type-body {
+    font-size: var(--type-body-size);
+    line-height: var(--type-body-line-height);
+    letter-spacing: var(--type-body-letter-spacing);
+  }
+
+  .type-meta {
+    font-size: var(--type-meta-size);
+    line-height: var(--type-meta-line-height);
+    letter-spacing: var(--type-meta-letter-spacing);
+  }
+
+  /* Use these paired size/stroke utilities for Tabler icons outside components. */
+  .icon-optical-8 {
+    width: 0.5rem;
+    height: 0.5rem;
+    stroke-width: var(--icon-stroke-8);
+  }
+
+  .icon-optical-12 {
+    width: 0.75rem;
+    height: 0.75rem;
+    stroke-width: var(--icon-stroke-12);
+  }
+
+  .icon-optical-14 {
+    width: 0.875rem;
+    height: 0.875rem;
+    stroke-width: var(--icon-stroke-14);
+  }
+
+  .icon-optical-15 {
+    width: 0.9375rem;
+    height: 0.9375rem;
+    stroke-width: var(--icon-stroke-15);
+  }
+
+  .icon-optical-16 {
+    width: 1rem;
+    height: 1rem;
+    stroke-width: var(--icon-stroke-16);
+  }
+
+  .icon-optical-18 {
+    width: 1.125rem;
+    height: 1.125rem;
+    stroke-width: var(--icon-stroke-18);
+  }
+
+  .icon-optical-20 {
+    width: 1.25rem;
+    height: 1.25rem;
+    stroke-width: var(--icon-stroke-20);
+  }
+
+  .icon-optical-24 {
+    width: 1.5rem;
+    height: 1.5rem;
+    stroke-width: var(--icon-stroke-24);
+  }
+
+  .icon-optical-32 {
+    width: 2rem;
+    height: 2rem;
+    stroke-width: var(--icon-stroke-32);
+  }
+}
+
+@layer components {
+  [data-slot] svg.tabler-icon {
+    stroke-width: var(--icon-stroke-width, var(--icon-stroke-16));
+  }
+
+  [data-slot]
+    svg.tabler-icon
+    :where(path, circle, ellipse, line, polyline, polygon, rect),
+  svg.tabler-icon[class*='icon-optical-']
+    :where(path, circle, ellipse, line, polyline, polygon, rect) {
+    vector-effect: non-scaling-stroke;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   [data-slot],
   [data-slot]::before,