@dustin-riley/design 0.2.2 → 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 +5 -4
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-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. |
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.2",
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,17 +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 — 2px primary @ 40% opacity, 2px offset (per DESIGN.md).
105
+ /* Focus ring — 2px primary @ 40% opacity, edge-hugging (no offset).
106
106
  Delivered as an `outline` so it stays tight (no soft halo on wide
107
107
  inputs) and follows each element's own border-radius. Do NOT switch
108
- to box-shadow or force a border-radius here — that produced an
109
- oversized glow + squared-off corners (see docs/SPEC.md addendum 6). */
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). */
110
111
  --ds-focus-ring-color: rgba(184, 84, 28, 0.4);
111
112
  }
112
113
 
113
114
  :focus-visible {
114
115
  outline: 2px solid var(--ds-focus-ring-color);
115
- outline-offset: 2px;
116
+ outline-offset: 0;
116
117
  }
117
118
 
118
119
  /* Opinionated base element resets (link underline, code boxing,