@dustin-riley/design 0.1.0 → 0.1.1

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` |
+| 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` |
 | 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

@@ -19,12 +19,31 @@ npm i @dustin-riley/design
 
 /* Tailwind v4 + shadcn projects instead just need: */
 @import "@dustin-riley/design/tailwind.css"; /* pulls in core + tokens */
+
+/* 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"; }
 ```
 
 ## 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` — **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.
+
+`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.1",
   "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";`
+- `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.
 
 ## 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,79 @@
+@import "./tokens.css";
+
+/* ============================================================
+   @dustin-riley/design — base element resets (OPT-IN)
+
+   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.
+
+   - 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.
+   ============================================================ */
+
+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); }

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. */