@adea-ai/ui 0.104.3 → 0.106.0

package/src/styles/appearance-font-settings.css

@@ -0,0 +1,110 @@
+/* Optional typography roles and Appearance font controls.
+ *
+ * Import after `theme.css` and `base.css` when the host uses the shared font
+ * preference projection. This file defines selectors and utilities only; it
+ * never imports font assets. `fonts.css` remains a separate opt-in for bundled
+ * typefaces.
+ */
+
+/* The marker scopes role defaults and wins over theme.css root tokens even
+   when a bundler hoists this optional sheet before shared globals. Family
+   values come from the validated shared runtime/bootstrap projection. */
+:root[data-font-settings] {
+  --font-ui: var(--font-family-system);
+  --font-content: var(--font-family-system);
+  --font-code: var(--font-family-system-mono);
+  --font-sans: var(--font-ui);
+  --font-mono: var(--font-code);
+  --font-ui-scale: 1;
+  --font-content-scale: 1;
+  --font-code-scale: 1;
+
+  --text-2xs: calc(0.6875rem * var(--font-ui-scale));
+  --text-xs: calc(0.75rem * var(--font-ui-scale));
+  --text-sm: calc(0.875rem * var(--font-ui-scale));
+  --text-base: calc(1rem * var(--font-ui-scale));
+  --text-lg: calc(1.125rem * var(--font-ui-scale));
+  --text-xl: calc(1.25rem * var(--font-ui-scale));
+  --text-2xl: calc(1.5rem * var(--font-ui-scale));
+  --text-3xl: calc(1.875rem * var(--font-ui-scale));
+  --text-content: calc(0.875rem * var(--font-content-scale));
+  --text-content--line-height: var(--text-sm--line-height);
+  --text-code: calc(0.75rem * var(--font-code-scale));
+  --text-code--line-height: var(--text-xs--line-height);
+}
+
+@layer base {
+  code,
+  kbd,
+  pre,
+  samp {
+    font-family: var(--font-code);
+    font-size: var(--text-code);
+  }
+
+  /* Appearance's own controls grow with the UI preference while ordinary
+     controls retain their established density. */
+  .global-appearance-font-settings button,
+  .global-appearance-editor-actions button {
+    min-height: max(var(--control-height-sm), calc(1lh + 2px));
+  }
+
+  /* Text controls keep their density rung but gain room for their projected
+     line box. Icon-only controls use size-control-* and keep fixed targets. */
+  [data-font-settings] .h-control-2xs {
+    --font-control-height: var(--control-height-2xs);
+  }
+  [data-font-settings] .h-control-xs {
+    --font-control-height: var(--control-height-xs);
+  }
+  [data-font-settings] .h-control-sm {
+    --font-control-height: var(--control-height-sm);
+  }
+  [data-font-settings] .h-control-md {
+    --font-control-height: var(--control-height-md);
+  }
+  [data-font-settings] .h-control-lg {
+    --font-control-height: var(--control-height-lg);
+  }
+  [data-font-settings] .h-control-xl {
+    --font-control-height: var(--control-height-xl);
+  }
+  [data-font-settings] .h-control-2xl {
+    --font-control-height: var(--control-height-2xl);
+  }
+  [data-font-settings]
+    :is(
+      .h-control-2xs,
+      .h-control-xs,
+      .h-control-sm,
+      .h-control-md,
+      .h-control-lg,
+      .h-control-xl,
+      .h-control-2xl
+    ) {
+    min-height: max(var(--font-control-height), calc(1lh + 2px));
+  }
+
+  [data-font-settings]
+    input:is(
+      .h-control-2xs,
+      .h-control-xs,
+      .h-control-sm,
+      .h-control-md,
+      .h-control-lg,
+      .h-control-xl,
+      .h-control-2xl
+    ) {
+    min-height: max(var(--font-control-height), calc(1lh + var(--spacing) + var(--spacing) + 2px));
+  }
+
+  .global-appearance-font-settings input[type='number'] {
+    min-height: max(var(--control-height-md), calc(1lh + var(--spacing) + var(--spacing) + 3px));
+  }
+}
+
+/* Keep the numeric font-size value visible beside the native number stepper
+   as the UI font grows; unlayered so this minimum wins over min-w-0. */
+.global-appearance-font-settings input[type='number'] {
+  min-width: calc(3ch + var(--control-padding-md) + var(--control-padding-md) + 1.25rem + 2px);
+}

package/src/styles/fonts.css

@@ -4,15 +4,14 @@
  * a desktop app must not fetch a font at runtime, or the first paint after a cold
  * start shows a fallback face and then reflows.
  *
- *   Space Grotesk   the interface default, and the face the visual language was
- *                   drawn against
+ *   Space Grotesk   a self-hosted proportional family
  *   JetBrains Mono  code, terminals, ids, paths
  *   Geist           an alternative interface face; cortana already ships it
  *   Geist Mono      its monospace counterpart
  *
- * The family is a *selection*, not a constant: `theme.css` exposes a `data-font`
- * axis, so a user can pick a face the way they pick an accent, and the system
- * default (`system`) is always available for someone who wants their OS's own.
+ * These families feed the shared UI, content and code axes. Their stable ids are
+ * projected by `@adea-ai/ui/lib/appearance-font-settings`; System is the default
+ * and needs no font asset.
  *
  * Consumers import this after the theme:
  *

package/src/styles/globals.css

@@ -5,10 +5,13 @@
  * @shadcn/lint discover, so it must stay the file that imports Tailwind.
  *
  *   @import '@adea-ai/ui/globals.css';
+ *   @import '@adea-ai/ui/appearance-font-settings.css'; <- optional role preferences
  *   @import '@adea-ai/ui/fonts.css';   <- optional, self-hosted typefaces
  *
  * A consumer that already imports Tailwind itself should import `theme.css`
- * and `base.css` directly instead, and must not import this file.
+ * and `base.css` directly instead, and must not import this file. The font role
+ * stylesheet stays opt-in so applications that use only the base theme keep
+ * the existing CSS footprint.
  *
  * Tokens live in `theme.css` only. This file must never duplicate them.
  */

package/src/styles/theme.css

@@ -525,6 +525,14 @@
   --font-family-geist-mono: 'Geist Mono Variable', 'Geist Mono', monospace;
   --font-family-system: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
   --font-family-system-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
+  /* Lightweight role defaults keep conversation and code components useful for
+     consumers that have not opted into independent Appearance font settings. */
+  --font-content: var(--font-sans);
+  --font-code: var(--font-mono);
+  --text-content: var(--text-sm);
+  --text-content--line-height: var(--text-sm--line-height);
+  --text-code: 0.75rem;
+  --text-code--line-height: 1.5;
 
   /* Width compensation for the mono UI fonts. `normal` on the proportional face,
      tightened by the `[data-font]` blocks above when the UI font is monospace. */
@@ -776,6 +784,8 @@
 
   --font-sans: var(--font-sans);
   --font-mono: var(--font-mono);
+  --font-content: var(--font-content);
+  --font-code: var(--font-code);
   --font-family-space-grotesk: var(--font-family-space-grotesk);
   --font-family-jetbrains-mono: var(--font-family-jetbrains-mono);
   --font-family-geist: var(--font-family-geist);
@@ -799,6 +809,10 @@
   --text-2xl--line-height: var(--text-2xl--line-height);
   --text-3xl: var(--text-3xl);
   --text-3xl--line-height: var(--text-3xl--line-height);
+  --text-content: var(--text-content);
+  --text-content--line-height: var(--text-content--line-height);
+  --text-code: var(--text-code);
+  --text-code--line-height: var(--text-code--line-height);
 
   --radius-sm: var(--radius-sm);
   --radius-md: var(--radius-md);