@atelier-ui/angular 0.2.11 → 0.2.13

package/package.json

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

package/src/styles/tokens.css

@@ -78,9 +78,33 @@
   /* ── 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) */
@@ -179,9 +203,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);
@@ -205,9 +235,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;
@@ -265,9 +295,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;
@@ -325,9 +355,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;