@dustin-riley/design 0.1.1 → 0.2.0

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` |
+| Minimal base element styling (body/headings/mono code/`::selection`, `:where()` zero-specificity) — ships inside `core.css`, no separate import. No global link `text-decoration` (links are color-only; underline is a component decision) | `@dustin-riley/design/core.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,30 +17,26 @@ npm i @dustin-riley/design
 @import "@dustin-riley/design/tokens.css";
 @import "@dustin-riley/design/core.css";
 
-/* Tailwind v4 + shadcn projects instead just need: */
+/* Tailwind v4 + shadcn projects also 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"; }
 ```
 
+That's the whole contract. No separate reset, no `@layer`, nothing per-app.
+
 ## What's in / out
 
 `tokens.css` — `--ds-*` custom properties + the focus ring. Pure tokens, no
-element styling; safe to import anywhere/unlayered.
+element styling.
 
 `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.
+typographic helpers, `.kbd`, …) **plus minimal base element styling** (body
+defaults, heading font/size, mono code, `::selection`). Imports `tokens.css`.
+Base rules are wrapped in `:where()` (zero specificity) so any app/component/
+Preflight rule wins.
+
+**Links are not underlined by default.** Per `DESIGN.md`, links are color-only;
+the system never sets a global link `text-decoration`. Underline is an
+intentional, component-scoped decision (e.g. article body) made by the app.
 
 `tailwind.css` — optional Tailwind v4 `@theme` + shadcn HSL bridge (pulls in
 core + tokens). Does **not** include `reset.css`.

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@dustin-riley/design",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "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,11 +18,12 @@ 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 ships inside `core.css` (no separate import, no
+  `@layer`): minimal body/heading/code/`::selection` defaults wrapped in
+  `:where()` (zero specificity), so any app/component/Preflight rule wins.
+- **Never set a global link `text-decoration`.** Links are color-only by
+  design (DESIGN.md); underline is a component-scoped app decision (e.g.
+  article body), never a system-wide default.
 
 ## Vocabulary (prefer extending these over inventing parallels)
 Buttons `.ds-btn` + `.ds-btn-primary|secondary|ghost`; layout `.ds-container`,

package/src/core.css

@@ -229,3 +229,73 @@ h6,
   border-radius: var(--ds-radius-sm);
   color: var(--ds-text);
 }
+
+/* ============================================================
+   Base element styling
+
+   Minimal, opinionated defaults for raw elements. Wrapped in
+   :where() (zero specificity) so any app/component/Preflight
+   rule wins. Ships in core.css (no separate import, no @layer):
+   apps consume core.css already.
+
+   NOTE: no global link `text-decoration`. Per DESIGN.md links
+   are color-only; underline is an intentional, component-scoped
+   decision (e.g. article body), never a system-wide default.
+   Letting Tailwind Preflight's `a{text-decoration:inherit}`
+   stand keeps links un-underlined unless a component opts in.
+   ============================================================ */
+
+: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);
+  transition: color var(--ds-duration-fast) var(--ds-ease-standard);
+}
+
+: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 { background: rgba(184, 84, 28, 0.2); }

package/src/reset.css

@@ -1,79 +0,0 @@
-@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); }