@atelier-ui/angular 0.2.10 → 0.2.12

package/package.json

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

package/src/styles/tokens.css

@@ -11,6 +11,8 @@
  * Mono (code), chosen 2026-08-26 — see ADR-0035, which revises ADR-0020's
  * Inter choice. The library declares the stacks; loading the faces is the
  * consumer's job (the docs app does it through Astro's fonts config).
+ * The --ui-type-* roles (ADR-0036) are the layer component CSS should
+ * reference; the individual axes remain for the cases a role does not fit.
  *
  * Plan: ~/.claude/plans/atelier-design-rebrief.md (Direction A pivot)
  *
@@ -34,18 +36,75 @@
   --ui-letter-spacing-tight: -0.01em;
   --ui-letter-spacing-normal: 0;
   --ui-letter-spacing-wide: 0.01em;
+  --ui-letter-spacing-uppercase: 0.08em;
+  --ui-font-size-3xl: 2.25rem;
   --ui-font-weight-normal: 400;
   --ui-font-weight-medium: 500;
   --ui-font-weight-semibold: 600;
+  --ui-font-weight-bold: 700;
   --ui-line-height-tight: 1.25;
   --ui-line-height-normal: 1.5;
 
+  /* ── Type roles ─────────────────────────────────────────────
+   * Composed entirely from the axes above, so sizes and weights stay
+   * single-sourced and a role adds meaning rather than new numbers.
+   * Reference a ROLE from component CSS (`font: var(--ui-type-body-md)`),
+   * not an axis — the role is what carries ADR-0035's rule that weight
+   * comes from the sans and the display face is never bolded.
+   *
+   * `font:` is a shorthand: it resets font-style, font-variant,
+   * font-stretch and line-height, so declare it BEFORE any font-* override
+   * on the same rule. It does not touch letter-spacing — pair the display
+   * role with --ui-letter-spacing-tight and an uppercased label role with
+   * --ui-letter-spacing-uppercase yourself.
+   */
+  --ui-type-display: italic var(--ui-font-weight-normal) var(--ui-font-size-3xl) /
+    var(--ui-line-height-tight) var(--ui-font-display);
+  --ui-type-headline: var(--ui-font-weight-bold) var(--ui-font-size-2xl) /
+    var(--ui-line-height-tight) var(--ui-font-family);
+  --ui-type-title: var(--ui-font-weight-semibold) var(--ui-font-size-lg) /
+    var(--ui-line-height-tight) var(--ui-font-family);
+  --ui-type-body-lg: var(--ui-font-weight-normal) var(--ui-font-size-lg) /
+    var(--ui-line-height-normal) var(--ui-font-family);
+  --ui-type-body-md: var(--ui-font-weight-normal) var(--ui-font-size-md) /
+    var(--ui-line-height-normal) var(--ui-font-family);
+  --ui-type-body-sm: var(--ui-font-weight-normal) var(--ui-font-size-sm) /
+    var(--ui-line-height-normal) var(--ui-font-family);
+  --ui-type-label: var(--ui-font-weight-medium) var(--ui-font-size-xs) /
+    var(--ui-line-height-tight) var(--ui-font-family);
+  --ui-type-code: var(--ui-font-weight-normal) var(--ui-font-size-sm) /
+    var(--ui-line-height-normal) var(--ui-font-mono);
+
   /* ── Colours · light mode (default) ────────────────────────── */
 
   /* Primary — Conciso deep teal */
-  --ui-color-primary: #006470;
-  --ui-color-primary-hover: #004e58;
-  --ui-color-primary-active: #003a42;
+
+  /* ── Teal ramp · primitive tier (ADR-0038) ──────────────────
+   * The brand hue as a tonal scale. Semantics below alias into it, so a step
+   * is declared once and every mode picks a different step of the same ramp.
+   *
+   * Annotations are CHECKED, not decorative — `check:contrast` re-measures
+   * every one and fails if a stated ratio is wrong or below AA:
+   *   ★  the brand anchor
+   *   T on surface(light|dark) N.NN  this step carries normal text on that
+   *      canvas at the stated WCAG 2.2 ratio
+   * Steps 50–500 are generated by perceptual (OKLab) interpolation between the
+   * shipping values; 100–300 and 700–900 ARE the shipping values, unchanged.
+   */
+  --ui-color-teal-50: #99f4f4;
+  --ui-color-teal-100: #87efef;
+  --ui-color-teal-200: #5ee5e5;
+  --ui-color-teal-300: #34d8d8; /* T on surface(dark) 10.83 */
+  --ui-color-teal-400: #27babd; /* T on surface(dark) 8.01 */
+  --ui-color-teal-500: #1a9ca3; /* T on surface(dark) 5.73 — lightest step that still carries text on dark */
+  --ui-color-teal-600: #0d7f89; /* T on surface(light) 4.76 — lightest step that still carries text on light */
+  --ui-color-teal-700: #006470; /* ★ · T on surface(light) 6.87 */
+  --ui-color-teal-800: #004e58; /* T on surface(light) 9.41 */
+  --ui-color-teal-900: #003a42; /* T on surface(light) 12.47 */
+
+  --ui-color-primary: var(--ui-color-teal-700);
+  --ui-color-primary-hover: var(--ui-color-teal-800);
+  --ui-color-primary-active: var(--ui-color-teal-900);
   --ui-color-primary-light: rgba(0, 100, 112, 0.08);
 
   /* Secondary (legacy — kept for components that opt in) */
@@ -170,9 +229,9 @@
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --ui-color-primary: #34d8d8;
-    --ui-color-primary-hover: #5ee5e5;
-    --ui-color-primary-active: #87efef;
+    --ui-color-primary: var(--ui-color-teal-300);
+    --ui-color-primary-hover: var(--ui-color-teal-200);
+    --ui-color-primary-active: var(--ui-color-teal-100);
     --ui-color-primary-light: rgba(52, 216, 216, 0.15);
 
     --ui-color-secondary: #94a3b8;
@@ -230,9 +289,9 @@
 }
 
 [data-theme="dark"] {
-  --ui-color-primary: #34d8d8;
-  --ui-color-primary-hover: #5ee5e5;
-  --ui-color-primary-active: #87efef;
+  --ui-color-primary: var(--ui-color-teal-300);
+  --ui-color-primary-hover: var(--ui-color-teal-200);
+  --ui-color-primary-active: var(--ui-color-teal-100);
   --ui-color-primary-light: rgba(52, 216, 216, 0.15);
 
   --ui-color-secondary: #94a3b8;
@@ -290,9 +349,9 @@
 
 /* Explicit light theme — declared last so it wins over prefers-color-scheme: dark */
 [data-theme="light"] {
-  --ui-color-primary: #006470;
-  --ui-color-primary-hover: #004e58;
-  --ui-color-primary-active: #003a42;
+  --ui-color-primary: var(--ui-color-teal-700);
+  --ui-color-primary-hover: var(--ui-color-teal-800);
+  --ui-color-primary-active: var(--ui-color-teal-900);
   --ui-color-primary-light: rgba(0, 100, 112, 0.08);
 
   --ui-color-secondary: #475569;