@dustin-riley/design 0.1.0 → 0.1.2

package/DESIGN.md

@@ -24,8 +24,9 @@ This doc is the source of truth; the bundled `dustinriley-design` skill mirrors
 
 | Concern | File |
 |---|---|
-| Design tokens (color, type, spacing, radius, shadow, motion) | `@dustin-riley/design/tokens.css` |
+| Design tokens (color, type, spacing, radius, shadow, motion) + focus ring — pure tokens, no element styling | `@dustin-riley/design/tokens.css` |
 | Component / primitive styles (buttons, container, panel, typographic helpers, etc.) | `@dustin-riley/design/core.css` |
+| Base element resets (link underline, boxed code, heading sizes, body) — `:where()` zero-specificity, plain import in every app; any app rule wins automatically | `@dustin-riley/design/reset.css` |
 | Tailwind v4 base + theme bridge + shadcn bridge | `@dustin-riley/design/tailwind.css` |
 
 **All design tokens are CSS custom properties prefixed `--ds-*`.** Always reference the token, never hard-code a hex / px value. If you need something the token set doesn't cover, that's a signal to push back on the design, not invent a one-off value.

package/README.md

@@ -17,14 +17,35 @@ npm i @dustin-riley/design
 @import "@dustin-riley/design/tokens.css";
 @import "@dustin-riley/design/core.css";
 
-/* Tailwind v4 + shadcn projects instead just need: */
+/* base element styling (links, code, headings, body) — plain import,
+   zero specificity (:where), so any app rule always wins. No @layer,
+   nothing to remember: */
+@import "@dustin-riley/design/reset.css";
+
+/* Tailwind v4 + shadcn projects also need: */
 @import "@dustin-riley/design/tailwind.css"; /* pulls in core + tokens */
 ```
 
+Every app imports the same set — no per-app reasoning.
+
 ## What's in / out
 
-In: `--ds-*` tokens, base element resets, focus ring, and generic primitives
-(`.ds-btn*`, `.ds-container`, `.ds-panel`, typographic helpers, `.kbd`, …).
+`tokens.css` — `--ds-*` custom properties + the focus ring. Pure tokens, no
+element styling; safe to import anywhere/unlayered.
+
+`core.css` — generic primitives (`.ds-btn*`, `.ds-container`, `.ds-panel`,
+typographic helpers, `.kbd`, …). Imports `tokens.css`.
+
+`reset.css` — base element styling (link underline, boxed inline code, heading
+sizes, body defaults). These are *not* tokens. Every selector is wrapped in
+`:where()`, giving it **zero specificity**, so *any* app rule — a bare `a {}`,
+a component class, a prose/typography plugin — wins automatically. No `@layer`
+(bundlers like Lightning CSS flatten a package-internal `@layer` pulled in via
+`@import`); no consumer incantation. Plain `@import`, same in every app. It only
+sets the baseline where nothing else applies. Requires tokens to be loaded.
+
+`tailwind.css` — optional Tailwind v4 `@theme` + shadcn HSL bridge (pulls in
+core + tokens). Does **not** include `reset.css`.
 
 Out by design: site furniture (nav, footer, hero, content grids). Build those
 per project from the tokens. See `DESIGN.md`.

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@dustin-riley/design",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Dustin Riley design system — warm mid-century modern tokens and primitives.",
   "license": "MIT",
   "type": "module",
   "files": ["src", "DESIGN.md", "skill", "README.md"],
   "exports": {
     "./tokens.css": "./src/tokens.css",
+    "./reset.css": "./src/reset.css",
     "./core.css": "./src/core.css",
     "./tailwind.css": "./src/tailwind.css",
     "./DESIGN.md": "./DESIGN.md"

package/skill/dustinriley-design/SKILL.md

@@ -18,6 +18,11 @@ Apply this whenever you add or change UI in a project importing `@dustin-riley/d
 ## How to consume
 - Always: `@import "@dustin-riley/design/tokens.css"; @import "@dustin-riley/design/core.css";`
 - Tailwind v4 + shadcn projects additionally: `@import "@dustin-riley/design/tailwind.css";`
+- Base element styling: `@import "@dustin-riley/design/reset.css";` — plain
+  import, same in every app. `tokens.css` is pure tokens (no element styling).
+  `reset.css` selectors are all `:where()` (zero specificity), so any app rule
+  (component class, bare element, prose plugin) wins automatically — no
+  `@layer`, no per-app judgment. Requires tokens to be loaded.
 
 ## Vocabulary (prefer extending these over inventing parallels)
 Buttons `.ds-btn` + `.ds-btn-primary|secondary|ghost`; layout `.ds-container`,

package/src/reset.css

@@ -0,0 +1,82 @@
+/* ============================================================
+   @dustin-riley/design — base element resets
+
+   Opinionated base styling for raw elements (link underline,
+   boxed inline code, heading sizes, body defaults).
+
+   Every selector is wrapped in :where(), giving it ZERO
+   specificity. So ANY app rule — a bare `a {}`, a component
+   class, a prose/typography plugin — automatically wins, with
+   no cascade-layer plumbing required. (We do NOT use @layer:
+   bundlers like Lightning CSS flatten a package-internal
+   @layer pulled in via @import, which would make these rules
+   unexpectedly override your components.)
+
+   Uniform contract — every app, plain import, nothing to remember:
+
+       @import "@dustin-riley/design/reset.css";
+
+   Requires the design tokens to be loaded (tokens.css / core.css /
+   tailwind.css) for the `var(--ds-*)` references to resolve.
+   ============================================================ */
+
+:where(html) { font-size: 16px; }
+
+:where(body) {
+  background: var(--ds-bg);
+  color: var(--ds-text);
+  font-family: var(--ds-font-body);
+  font-size: var(--ds-fs-body);
+  line-height: var(--ds-lh-body);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  overflow-x: clip;
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  font-family: var(--ds-font-display);
+  color: var(--ds-text);
+  font-weight: 600;
+}
+
+:where(h1, .h1) {
+  font-size: var(--ds-fs-h1);
+  line-height: var(--ds-lh-h1);
+  letter-spacing: var(--ds-tracking-h1);
+}
+:where(h2, .h2) {
+  font-size: var(--ds-fs-h2);
+  line-height: var(--ds-lh-h2);
+  letter-spacing: var(--ds-tracking-h2);
+}
+:where(h3, .h3) {
+  font-size: var(--ds-fs-h3);
+  line-height: var(--ds-lh-h3);
+  letter-spacing: var(--ds-tracking-h3);
+  font-weight: 500;
+}
+
+:where(a) {
+  color: var(--ds-link);
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+  transition: color var(--ds-duration-fast) var(--ds-ease-standard);
+}
+:where(a:hover) { color: var(--ds-link-hover); }
+
+:where(code, pre, kbd, samp) {
+  font-family: var(--ds-font-mono);
+  font-size: 0.9em;
+}
+
+:where(code) {
+  background: var(--ds-surface-sunken);
+  padding: 2px 6px;
+  border-radius: var(--ds-radius-sm);
+  border: 1px solid var(--ds-border);
+}
+
+/* ::selection is a pseudo-element and cannot be wrapped in :where();
+   it has specificity (0,0,1) — an app ::selection rule still wins. */
+::selection { background: rgba(184, 84, 28, 0.2); }

package/src/tokens.css

@@ -113,66 +113,7 @@
   border-radius: var(--ds-radius-sm);
 }
 
-/* ============================================================
-   Base element resets
-   (sourced from scorigami globals.css @layer base, layer-neutral)
-   ============================================================ */
-
-html { font-size: 16px; }
-
-body {
-  background: var(--ds-bg);
-  color: var(--ds-text);
-  font-family: var(--ds-font-body);
-  font-size: var(--ds-fs-body);
-  line-height: var(--ds-lh-body);
-  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
-  overflow-x: clip;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-family: var(--ds-font-display);
-  color: var(--ds-text);
-  font-weight: 600;
-}
-
-h1, .h1 {
-  font-size: var(--ds-fs-h1);
-  line-height: var(--ds-lh-h1);
-  letter-spacing: var(--ds-tracking-h1);
-}
-h2, .h2 {
-  font-size: var(--ds-fs-h2);
-  line-height: var(--ds-lh-h2);
-  letter-spacing: var(--ds-tracking-h2);
-}
-h3, .h3 {
-  font-size: var(--ds-fs-h3);
-  line-height: var(--ds-lh-h3);
-  letter-spacing: var(--ds-tracking-h3);
-  font-weight: 500;
-}
-
-a {
-  color: var(--ds-link);
-  text-decoration: underline;
-  text-decoration-thickness: 1px;
-  text-underline-offset: 3px;
-  transition: color var(--ds-duration-fast) var(--ds-ease-standard);
-}
-a:hover { color: var(--ds-link-hover); }
-
-code, pre, kbd, samp {
-  font-family: var(--ds-font-mono);
-  font-size: 0.9em;
-}
-
-code {
-  background: var(--ds-surface-sunken);
-  padding: 2px 6px;
-  border-radius: var(--ds-radius-sm);
-  border: 1px solid var(--ds-border);
-}
-
-::selection { background: rgba(184, 84, 28, 0.2); }
+/* Opinionated base element resets (link underline, code boxing,
+   heading sizes, body defaults) are NOT tokens — they ship in the
+   opt-in @dustin-riley/design/reset.css, never here. Keeping them
+   out of this file keeps tokens.css cascade-safe for any consumer. */