@atelier-ui/react 0.2.15 → 0.2.16

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+## 0.2.16 (2026-08-26)
+
+### 🩹 Fixes
+
+- **typography:** every component states its typeface ([8fb67f1](https://github.com/DominikPieper/atelier-ui/commit/8fb67f1))
+
+### ❤️ Thank You
+
+- Claude Opus 5
+- Dominik Pieper @DominikPieper
+
 ## 0.2.15 (2026-08-26)
 
 ### 🚀 Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atelier-ui/react",
-  "version": "0.2.15",
+  "version": "0.2.16",
   "description": "Atelier component library for React — LLM-optimised, accessible, design-token-driven",
   "keywords": [
     "react",

package/src/lib/avatar/atl-avatar.css

@@ -86,6 +86,11 @@
 /* === AtlAvatarGroup === */
 
 .atl-avatar-group {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * Sans — measured: a card next to a button showed two typefaces. Declared once
+   * per component root, never on a descendant (ADR-0049). */
+  font-family: var(--ui-font-family);
   display: inline-flex;
   align-items: center;
   background: none;
@@ -109,7 +114,6 @@
   color: var(--ui-color-text-muted);
   border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-full);
-  font-family: var(--ui-font-family);
   font-weight: var(--ui-font-weight-semibold);
   box-shadow: 0 0 0 2px var(--ui-color-surface);
   margin-inline-start: -8px;

package/src/lib/card/atl-card.css

@@ -19,6 +19,11 @@
 }
 
 .atl-card {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * Sans — measured: a card next to a button showed two typefaces. Declared once
+   * per component root, never on a descendant (ADR-0049). */
+  font-family: var(--ui-font-family);
   display: block;
   border-radius: var(--ui-radius-xl);
   background-color: var(--ui-color-surface-raised);

package/src/lib/chat/atl-chat.css

@@ -26,6 +26,11 @@
 
 /* ── Host wrapper ──────────────────────────────────────────────────────────── */
 .atl-chat {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * Sans — measured: a card next to a button showed two typefaces. Declared once
+   * per component root, never on a descendant (ADR-0049). */
+  font-family: var(--ui-font-family);
   display: contents;
 }
 
@@ -43,6 +48,8 @@
 /* ═══════════════════════════════════════════════════════════════════════════ */
 .atl-chat.variant-drawer dialog {
   all: unset;
+  /* After `all: unset`, which would otherwise reset it (ADR-0049). */
+  font-family: var(--ui-font-family);
   position: fixed;
   inset: 0 0 0 auto;
   height: 100dvh;
@@ -109,7 +116,6 @@
   background: var(--ui-color-brand-ai, #b5e61c);
   color: var(--ui-color-text);
   border: none;
-  font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-lg);
   font-weight: var(--ui-font-weight-semibold);
   cursor: pointer;
@@ -338,7 +344,6 @@
   color: var(--ui-color-text);
   border: var(--ui-border-width) solid var(--ui-color-border);
   border-radius: var(--ui-radius-lg);
-  font-family: var(--ui-font-family);
   text-align: left;
   cursor: pointer;
   transition:
@@ -388,7 +393,6 @@
   border-radius: var(--ui-radius-md);
   background: var(--ui-color-surface-sunken);
   color: var(--ui-color-text);
-  font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-sm);
   line-height: var(--ui-line-height-normal);
   resize: none;
@@ -422,7 +426,6 @@
   padding: var(--ui-spacing-2) var(--ui-spacing-4);
   border: var(--ui-border-width) solid transparent;
   border-radius: var(--ui-radius-md);
-  font-family: var(--ui-font-family);
   font-size: var(--ui-font-size-sm);
   font-weight: var(--ui-font-weight-medium);
   cursor: pointer;

package/src/lib/code-block/atl-code-block.css

@@ -44,7 +44,7 @@
 }
 
 .code-block-label {
-  font-family: var(--ui-font-mono, 'Menlo', 'Monaco', 'Courier New', monospace);
+  font-family: var(--ui-font-mono);
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.03em;
@@ -97,7 +97,7 @@
 .code-block-pre {
   margin: 0;
   padding: var(--ui-spacing-4);
-  font-family: var(--ui-font-mono, 'Menlo', 'Monaco', 'Courier New', monospace);
+  font-family: var(--ui-font-mono);
   font-size: var(--ui-font-size-sm);
   line-height: 1.65;
   color: var(--ui-color-text);

package/src/lib/dialog/atl-dialog.css

@@ -21,6 +21,10 @@
 /* ── Native <dialog> reset + base ──────────────────────────────────────────── */
 .atl-dialog {
   all: unset;
+  /* After `all: unset`, which would otherwise reset it. The library states its own
+   * typeface (ADR-0035); without this the dialog renders in the consuming app's
+   * font while its neighbours render Instrument Sans (ADR-0049). */
+  font-family: var(--ui-font-family);
   position: fixed;
   inset: 0;
   margin: auto;

package/src/lib/drawer/atl-drawer.css

@@ -20,12 +20,19 @@
 
 /* ── Host wrapper ──────────────────────────────────────────────────────────── */
 .atl-drawer-host {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * Sans — measured: a card next to a button showed two typefaces. Declared once
+   * per component root, never on a descendant (ADR-0049). */
+  font-family: var(--ui-font-family);
   display: contents;
 }
 
 /* ── Native <dialog> base ──────────────────────────────────────────────────── */
 .atl-drawer-host dialog {
   all: unset;
+  /* After `all: unset`, which would otherwise reset it (ADR-0049). */
+  font-family: var(--ui-font-family);
   position: fixed;
   display: none;
   flex-direction: column;

package/src/lib/skeleton/atl-skeleton.css

@@ -9,6 +9,11 @@
 }
 
 .atl-skeleton {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * Sans — measured: a card next to a button showed two typefaces. Declared once
+   * per component root, never on a descendant (ADR-0049). */
+  font-family: var(--ui-font-family);
   display: block;
   background: var(--ui-color-border);
   overflow: hidden;

package/src/lib/toast/atl-toast.css

@@ -16,6 +16,11 @@
 
 /* ── Toast Container ── */
 .atl-toast-container {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * Sans — measured: a card next to a button showed two typefaces. Declared once
+   * per component root, never on a descendant (ADR-0049). */
+  font-family: var(--ui-font-family);
   position: fixed;
   z-index: var(--ui-z-toast, 400);
   display: flex;

package/src/lib/tooltip/atl-tooltip.css

@@ -16,6 +16,11 @@
 
 /* Tooltip wrapper — inline container */
 .atl-tooltip-wrapper {
+  /* The library states its own typeface (ADR-0035). Without this the component
+   * renders in the consuming app's font while its neighbours render Instrument
+   * Sans — measured: a card next to a button showed two typefaces. Declared once
+   * per component root, never on a descendant (ADR-0049). */
+  font-family: var(--ui-font-family);
   display: inline-block;
   position: relative;
 }