@atelier-ui/react 0.2.12 → 0.2.14

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## 0.2.14 (2026-08-26)
+
+### 🩹 Fixes
+
+- **tokens:** the control height is the primitive, padding is derived (ADR-0041) ([df973f7](https://github.com/DominikPieper/atelier-ui/commit/df973f7))
+
+### ❤️ Thank You
+
+- Claude Opus 5
+- Dominik Pieper @DominikPieper
+
+## 0.2.13 (2026-08-26)
+
+### 🩹 Fixes
+
+- **tokens:** letter-spacing and danger focus-ring tokens; consolidate design findings ([0bdaddd](https://github.com/DominikPieper/atelier-ui/commit/0bdaddd))
+
+### ❤️ Thank You
+
+- Claude Opus 5
+- Dominik Pieper @DominikPieper
+
 ## 0.2.12 (2026-08-26)
 
 ### 🚀 Features

package/package.json

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

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

@@ -9,7 +9,7 @@
   font-size: var(--ui-font-size-md);
   font-weight: var(--ui-font-weight-semibold);
   line-height: var(--ui-line-height-tight);
-  letter-spacing: -0.01em;
+  letter-spacing: var(--ui-letter-spacing-tight);
   cursor: pointer;
   transition: background-color var(--ui-transition-fast),
     border-color var(--ui-transition-fast),
@@ -98,21 +98,33 @@
 
 /* Sizes — modern target heights (sm 32px / md 40px / lg 48px) */
 .atl-button.size-sm {
-  padding: 0.375rem 0.875rem;
+  padding: calc(
+      (var(--ui-control-height-sm) - var(--ui-line-height-tight) * var(--ui-font-size-sm)) / 2 -
+        1px
+    )
+    0.875rem;
   font-size: var(--ui-font-size-sm);
-  min-height: 2rem;
+  min-height: var(--ui-control-height-sm);
 }
 
 .atl-button.size-md {
-  padding: 0.5625rem 1.125rem;
+  padding: calc(
+      (var(--ui-control-height-md) - var(--ui-line-height-tight) * var(--ui-font-size-md)) / 2 -
+        1px
+    )
+    1.125rem;
   font-size: var(--ui-font-size-md);
-  min-height: 2.5rem;
+  min-height: var(--ui-control-height-md);
 }
 
 .atl-button.size-lg {
-  padding: 0.75rem 1.5rem;
+  padding: calc(
+      (var(--ui-control-height-lg) - var(--ui-line-height-tight) * var(--ui-font-size-lg)) / 2 -
+        1px
+    )
+    1.5rem;
   font-size: var(--ui-font-size-lg);
-  min-height: 3rem;
+  min-height: var(--ui-control-height-lg);
 }
 
 /* Disabled */

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

@@ -7,11 +7,16 @@
 .atl-input input {
   display: block;
   width: 100%;
-  min-height: 2.5rem;
-  padding: 0.625rem var(--ui-spacing-4);
+  min-height: var(--ui-control-height-md);
+  padding: calc(
+      (var(--ui-control-height-md) - var(--ui-line-height-tight) * var(--ui-font-size-md)) / 2 - 1px
+    )
+    var(--ui-spacing-4);
   font-size: inherit;
   font-family: inherit;
-  line-height: var(--ui-line-height-normal);
+  /* Control line-height, not the prose one: a single-line field has nothing to
+   * read across lines, and 1.5 is what made it 6px taller than a button. */
+  line-height: var(--ui-line-height-tight);
   color: var(--ui-color-text);
   background-color: var(--ui-color-input-bg);
   border: 1px solid var(--ui-color-input-border);
@@ -49,7 +54,7 @@
 
 .atl-input.is-invalid input:focus {
   border-color: var(--ui-color-input-border-invalid);
-  box-shadow: 0 0 0 2px var(--ui-color-surface), 0 0 0 4px var(--ui-color-danger);
+  box-shadow: var(--ui-focus-ring-danger);
 }
 
 /* Non-color invalid indicator (WCAG 1.4.1) */

package/styles/tokens.css

@@ -38,6 +38,18 @@
   --ui-letter-spacing-wide: 0.01em;
   --ui-letter-spacing-uppercase: 0.08em;
   --ui-font-size-3xl: 2.25rem;
+
+  /* ── Control heights ────────────────────────────────────────
+   * The height of an interactive control is the primitive; its block padding
+   * is DERIVED from it (ADR-0041):
+   *   padding-block: calc((height - line-height * font-size) / 2 - border)
+   * Stating the height and deriving the padding is what makes an input and a
+   * button the same height. Stating the padding and hoping, which is what the
+   * library did until 2026-08-26, made them 6px apart.
+   */
+  --ui-control-height-sm: 2rem;
+  --ui-control-height-md: 2.5rem;
+  --ui-control-height-lg: 3rem;
   --ui-font-weight-normal: 400;
   --ui-font-weight-medium: 500;
   --ui-font-weight-semibold: 600;
@@ -203,9 +215,15 @@
   --ui-transition-normal: var(--ui-duration-normal) var(--ui-ease-out);
   --ui-transition-slow: var(--ui-duration-slow) var(--ui-ease-out);
 
-  /* Focus ring — double-ring for light & dark background compatibility */
+  /* Focus ring — double-ring for light & dark background compatibility.
+   * Declared once: the inner ring tracks the surface and the outer the accent,
+   * both of which are mode-dependent, so the ring follows the mode for free.
+   * The danger variant exists so an invalid control does not have to restate
+   * the formula (it did, in atl-input.css, until 2026-08-26). */
   --ui-focus-ring: 0 0 0 2px var(--ui-color-surface),
     0 0 0 4px var(--ui-color-primary);
+  --ui-focus-ring-danger: 0 0 0 2px var(--ui-color-surface),
+    0 0 0 4px var(--ui-color-danger);
 
   /* Form controls */
   --ui-color-input-bg: var(--ui-color-surface-sunken);