@dustin-riley/design 0.1.1 → 0.1.2

package/DESIGN.md

@@ -26,7 +26,7 @@ This doc is the source of truth; the bundled `dustinriley-design` skill mirrors
 |---|---|
 | 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` |
-| Opt-in base element resets (link underline, boxed code, heading sizes, body) — import only if you have no base layer, and into a layer weaker than components | `@dustin-riley/design/reset.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,15 +17,17 @@ npm i @dustin-riley/design
 @import "@dustin-riley/design/tokens.css";
 @import "@dustin-riley/design/core.css";
 
-/* Tailwind v4 + shadcn projects instead just need: */
-@import "@dustin-riley/design/tailwind.css"; /* pulls in core + tokens */
+/* 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";
 
-/* ONLY if your project has no base element styling of its own —
-   import it into a layer weaker than your components so specific
-   rules still win: */
-@layer base { @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
 
 `tokens.css` — `--ds-*` custom properties + the focus ring. Pure tokens, no
@@ -34,13 +36,13 @@ 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` — **opt-in** opinionated base element resets (link underline, boxed
-inline code, heading sizes, body defaults). These are *not* tokens — they are
-project-level base opinions. Import only if you have no base layer of your own,
-and import it **into a cascade layer weaker than your components**; importing it
-unlayered makes it override your component rules. Projects that already style
-their own raw `a`/`code`/headings (e.g. via a prose/typography plugin) must NOT
-import it.
+`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`.

package/package.json

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

package/skill/dustinriley-design/SKILL.md

@@ -18,11 +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";`
-- `tokens.css` is pure tokens — safe unlayered. Opinionated base element
-  resets are NOT in tokens.css; they live in opt-in `@dustin-riley/design/reset.css`.
-  Import `reset.css` only if the project has no base element styling of its
-  own, and inside a layer weaker than components: `@layer base { @import "@dustin-riley/design/reset.css"; }`.
-  Never import reset.css unlayered — it will override component rules.
+- 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

@@ -1,27 +1,28 @@
-@import "./tokens.css";
-
 /* ============================================================
-   @dustin-riley/design — base element resets (OPT-IN)
+   @dustin-riley/design — base element resets
 
    Opinionated base styling for raw elements (link underline,
-   boxed inline code, heading sizes, body defaults). These are
-   NOT tokens — they are project-level base opinions, so they
-   ship separately and are opt-in.
+   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";
 
-   - Import this ONLY if your project has no base element layer
-     of its own.
-   - Import it into a cascade layer WEAKER than your component
-     styles so specific rules (e.g. `.site-nav a {…}`) win, e.g.:
-         @layer base { @import "@dustin-riley/design/reset.css"; }
-     Importing it unlayered makes it beat every layered rule and
-     will override your component overrides — don't.
-   - Projects that already style their own base elements (raw
-     `a` / `code` / headings) must NOT import this.
+   Requires the design tokens to be loaded (tokens.css / core.css /
+   tailwind.css) for the `var(--ds-*)` references to resolve.
    ============================================================ */
 
-html { font-size: 16px; }
+:where(html) { font-size: 16px; }
 
-body {
+:where(body) {
   background: var(--ds-bg);
   color: var(--ds-text);
   font-family: var(--ds-font-body);
@@ -32,48 +33,50 @@ body {
   overflow-x: clip;
 }
 
-h1, h2, h3, h4, h5, h6 {
+:where(h1, h2, h3, h4, h5, h6) {
   font-family: var(--ds-font-display);
   color: var(--ds-text);
   font-weight: 600;
 }
 
-h1, .h1 {
+:where(h1, .h1) {
   font-size: var(--ds-fs-h1);
   line-height: var(--ds-lh-h1);
   letter-spacing: var(--ds-tracking-h1);
 }
-h2, .h2 {
+:where(h2, .h2) {
   font-size: var(--ds-fs-h2);
   line-height: var(--ds-lh-h2);
   letter-spacing: var(--ds-tracking-h2);
 }
-h3, .h3 {
+:where(h3, .h3) {
   font-size: var(--ds-fs-h3);
   line-height: var(--ds-lh-h3);
   letter-spacing: var(--ds-tracking-h3);
   font-weight: 500;
 }
 
-a {
+: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);
 }
-a:hover { color: var(--ds-link-hover); }
+:where(a:hover) { color: var(--ds-link-hover); }
 
-code, pre, kbd, samp {
+:where(code, pre, kbd, samp) {
   font-family: var(--ds-font-mono);
   font-size: 0.9em;
 }
 
-code {
+: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); }