@dustin-riley/design 0.2.2 → 0.3.0
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.
- package/DESIGN.md +1 -1
- package/package.json +15 -4
- package/src/core.css +2 -1
- 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,
|
|
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,10 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dustin-riley/design",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.0",
|
|
4
4
|
"description": "Dustin Riley design system — warm mid-century modern tokens and primitives.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|
|
7
|
-
"files": [
|
|
7
|
+
"files": [
|
|
8
|
+
"src",
|
|
9
|
+
"DESIGN.md",
|
|
10
|
+
"skill",
|
|
11
|
+
"README.md"
|
|
12
|
+
],
|
|
8
13
|
"exports": {
|
|
9
14
|
"./tokens.css": "./src/tokens.css",
|
|
10
15
|
"./core.css": "./src/core.css",
|
|
@@ -15,6 +20,12 @@
|
|
|
15
20
|
"generate": "node scripts/generate-bridge.mjs",
|
|
16
21
|
"test": "node --test"
|
|
17
22
|
},
|
|
18
|
-
"publishConfig": {
|
|
19
|
-
|
|
23
|
+
"publishConfig": {
|
|
24
|
+
"access": "public"
|
|
25
|
+
},
|
|
26
|
+
"keywords": [
|
|
27
|
+
"design-system",
|
|
28
|
+
"css",
|
|
29
|
+
"design-tokens"
|
|
30
|
+
]
|
|
20
31
|
}
|
package/src/core.css
CHANGED
|
@@ -154,6 +154,8 @@ h6,
|
|
|
154
154
|
}
|
|
155
155
|
|
|
156
156
|
/* ----- Section labels ----- */
|
|
157
|
+
/* Pure typography — no outer margin. Stacked spacing is the context's job
|
|
158
|
+
(e.g. .ds-page-header > .grid-label below); inline/flex uses stay clean. */
|
|
157
159
|
.grid-label {
|
|
158
160
|
font-family: var(--ds-font-mono);
|
|
159
161
|
font-size: var(--ds-fs-caption);
|
|
@@ -161,7 +163,6 @@ h6,
|
|
|
161
163
|
text-transform: uppercase;
|
|
162
164
|
letter-spacing: 0.06em;
|
|
163
165
|
color: var(--ds-text-muted);
|
|
164
|
-
margin: 0 0 var(--ds-space-4);
|
|
165
166
|
}
|
|
166
167
|
|
|
167
168
|
/* ----- Back link ----- */
|
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,
|
|
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
|
|
109
|
-
|
|
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:
|
|
116
|
+
outline-offset: 0;
|
|
116
117
|
}
|
|
117
118
|
|
|
118
119
|
/* Opinionated base element resets (link underline, code boxing,
|