@dustin-riley/design 0.2.1 → 0.2.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/DESIGN.md +1 -1
  2. package/package.json +1 -1
  3. package/src/tokens.css +9 -6
package/DESIGN.md CHANGED
@@ -148,7 +148,7 @@ For framework motion (Framer Motion etc.), use spring presets:
148
148
  | Hover (cards, buttons) | `translateY(-1px)` + elevation bump `sm → md`. Color shift secondary. |
149
149
  | Hover (text links) | Color shift only — no underline toggling. |
150
150
  | Press / active | `scale(0.97)` snappy spring. Buttons may shift to `--ds-primary-pressed`. Elevation drops to resting. |
151
- | 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. |
151
+ | Focus | `--ds-focus-ring-color` outline (2px primary at 40% opacity, edge-hugging / no offset; follows the element shape). Always visible. **Never `outline: none` without a replacement** — wire `:focus-visible` to the ring globally. |
152
152
  | Disabled | 40% opacity, no pointer events, no hover lift. Never communicated by color alone. |
153
153
 
154
154
  ---
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@dustin-riley/design",
3
- "version": "0.2.1",
3
+ "version": "0.2.3",
4
4
  "description": "Dustin Riley design system — warm mid-century modern tokens and primitives.",
5
5
  "license": "MIT",
6
6
  "type": "module",
package/src/tokens.css CHANGED
@@ -102,15 +102,18 @@
102
102
  --ds-duration-slow: 280ms;
103
103
  --ds-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
104
104
 
105
- /* Focus ring */
106
- --ds-focus-ring:
107
- 0 0 0 2px var(--ds-bg), 0 0 0 4px rgba(184, 84, 28, 0.4);
105
+ /* Focus ring — 2px primary @ 40% opacity, edge-hugging (no offset).
106
+ Delivered as an `outline` so it stays tight (no soft halo on wide
107
+ inputs) and follows each element's own border-radius. Do NOT switch
108
+ to box-shadow, force a border-radius, or add an outline-offset —
109
+ all of those read as an oversized glow (see docs/SPEC.md addenda
110
+ 6 & 7). */
111
+ --ds-focus-ring-color: rgba(184, 84, 28, 0.4);
108
112
  }
109
113
 
110
114
  :focus-visible {
111
- outline: none;
112
- box-shadow: var(--ds-focus-ring);
113
- border-radius: var(--ds-radius-sm);
115
+ outline: 2px solid var(--ds-focus-ring-color);
116
+ outline-offset: 0;
114
117
  }
115
118
 
116
119
  /* Opinionated base element resets (link underline, code boxing,