@dustin-riley/design 0.1.2 → 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` |
-| 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` |
+| 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,32 +17,26 @@ npm i @dustin-riley/design
 @import "@dustin-riley/design/tokens.css";
 @import "@dustin-riley/design/core.css";
 
-/* 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.
+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` — 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.
+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.2",
+  "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";`
-- 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.
+- 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,82 +0,0 @@
-/* ============================================================
-   @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); }