@dustin-riley/design 0.2.0 → 0.2.2

package/DESIGN.md

@@ -148,7 +148,7 @@ For framework motion (Framer Motion etc.), use spring presets:
 | Hover (cards, buttons) | `translateY(-1px)` + elevation bump `sm → md`. Color shift secondary. |
 | Hover (text links) | Color shift only — no underline toggling. |
 | Press / active | `scale(0.97)` snappy spring. Buttons may shift to `--ds-primary-pressed`. Elevation drops to resting. |
-| Focus | `--ds-focus-ring` (2px primary at 40% opacity, 2px offset). Always visible. **Never `outline: none` without a replacement** — wire `:focus-visible` to the ring globally. |
+| Focus | `--ds-focus-ring-color` outline (2px primary at 40% opacity, 2px offset; outline follows the element shape). Always visible. **Never `outline: none` without a replacement** — wire `:focus-visible` to the ring globally. |
 | Disabled | 40% opacity, no pointer events, no hover lift. Never communicated by color alone. |
 
 ---

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dustin-riley/design",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Dustin Riley design system — warm mid-century modern tokens and primitives.",
   "license": "MIT",
   "type": "module",

package/src/core.css

@@ -281,10 +281,11 @@ h6,
   font-weight: 500;
 }
 
-:where(a) {
-  color: var(--ds-link);
-  transition: color var(--ds-duration-fast) var(--ds-ease-standard);
-}
+/* No global `a` rule. <a> is both chrome (nav/brand/footer) and content,
+   so any system-wide color/decoration is wrong somewhere. Links inherit
+   text color via Tailwind Preflight; link color/underline is an
+   intentional component or prose decision (article-body links, prose
+   links, active nav, etc. opt into var(--ds-link)). */
 
 :where(code, pre, kbd, samp) {
   font-family: var(--ds-font-mono);

package/src/tokens.css

@@ -102,15 +102,17 @@
   --ds-duration-slow: 280ms;
   --ds-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
 
-  /* Focus ring */
-  --ds-focus-ring:
-    0 0 0 2px var(--ds-bg), 0 0 0 4px rgba(184, 84, 28, 0.4);
+  /* Focus ring — 2px primary @ 40% opacity, 2px offset (per DESIGN.md).
+     Delivered as an `outline` so it stays tight (no soft halo on wide
+     inputs) and follows each element's own border-radius. Do NOT switch
+     to box-shadow or force a border-radius here — that produced an
+     oversized glow + squared-off corners (see docs/SPEC.md addendum 6). */
+  --ds-focus-ring-color: rgba(184, 84, 28, 0.4);
 }
 
 :focus-visible {
-  outline: none;
-  box-shadow: var(--ds-focus-ring);
-  border-radius: var(--ds-radius-sm);
+  outline: 2px solid var(--ds-focus-ring-color);
+  outline-offset: 2px;
 }
 
 /* Opinionated base element resets (link underline, code boxing,