@codenhub/styles 0.7.0 → 0.9.0

package/llms.txt

@@ -17,7 +17,7 @@ is what the public docs describe and the demo at https://demo.codenhub.dev/style
   - [Vue](./docs/integrating/vue.md): Importing the stylesheet in a Vue or Vite app.
   - [Svelte](./docs/integrating/svelte.md): Importing the stylesheet in a Svelte or SvelteKit app.
   - [Astro](./docs/integrating/astro.md): Importing the stylesheet in an Astro app.
-  - [Without a bundler](./docs/integrating/without-a-bundler.md): Linking the compiled files from plain HTML, Rails, Django, or a CDN.
+  - [Without a bundler](./docs/integrating/without-a-bundler.md): Linking the compiled files from plain HTML, Rails, Django, or a CDN, and the `chs build` command that writes a stylesheet with only the classes your templates use.
 - [Building a screen](./docs/concepts.md): Layout, type, cards, and buttons, and the model behind them: intent, fill, edge, aesthetic, and what passes down to children.
 - [Usage overview](./docs/usage/index.md): The task guides in order, then the lookup pages.
   - [Buttons](./docs/usage/buttons.md): Destructive and secondary actions, icon buttons, sizes, link buttons, disabled states, and loading icons.
@@ -28,7 +28,8 @@ is what the public docs describe and the demo at https://demo.codenhub.dev/style
   - [Aesthetics](./docs/usage/aesthetics.md): The six optional looks, what each changes, its knobs, and its limits.
   - [Solo classes](./docs/usage/solo.md): Painting an aesthetic onto one element from another library, and what a solo class reads and ignores.
   - [Composing](./docs/usage/composing.md): Lookup for combining classes, every component's default look, presentation rules, the component axis matrix, and elevation.
-  - [Customizing](./docs/usage/customizing.md): Lookup for presentation and material tokens, aesthetic knobs, the six public component variables, the generated palette, and composition helpers.
+  - [Customizing](./docs/usage/customizing.md): Lookup for presentation and material tokens, aesthetic knobs, the public component variables, the generated palette, and composition helpers.
   - [Content and layout](./docs/usage/content-and-layout.md): Lookup for layout helpers, the type scale, cards and panels, tables, quotes, code, and keys.
+  - [Presets](./docs/usage/presets.md): Three ways to set a look once instead of on every element, and when to reach for each.
 - [Accessibility](./docs/accessibility.md): What the CSS provides for focus, states, motion, contrast, forced colors, and right-to-left text, and what the application must add.
 - [Changelog](./docs/changelog/index.md): Release history, including breaking changes.

package/package.json

@@ -1,17 +1,21 @@
 {
   "name": "@codenhub/styles",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "private": false,
   "description": "Build a consistent, themeable interface by writing class names on plain HTML, with one stylesheet of tokens, a reset, layout and type helpers, and component classes, and no JavaScript.",
-  "homepage": "https://github.com/codenhub/codenhub/tree/main/packages/styles",
+  "homepage": "https://codenhub.dev/packages/styles/",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/codenhub/codenhub.git",
     "directory": "packages/styles"
   },
+  "bin": {
+    "chs": "./dist/cli.js"
+  },
   "files": [
     "dist",
+    "tw",
     "NOTICE",
     "README.md",
     "docs",
@@ -22,158 +26,190 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/index.css",
       "import": "./dist/index.css",
       "default": "./dist/index.css"
     },
     "./theme": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/theme.css",
       "import": "./dist/theme.css",
       "default": "./dist/theme.css"
     },
     "./palette": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/palette.css",
       "import": "./dist/palette.css",
       "default": "./dist/palette.css"
     },
     "./components": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/components.css",
       "import": "./dist/components.css",
       "default": "./dist/components.css"
     },
     "./aesthetics": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/index.css",
       "import": "./dist/aesthetics/index.css",
       "default": "./dist/aesthetics/index.css"
     },
     "./aesthetics/neobrutalism": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/neobrutalism.css",
       "import": "./dist/aesthetics/neobrutalism.css",
       "default": "./dist/aesthetics/neobrutalism.css"
     },
     "./aesthetics/glass": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/glass.css",
       "import": "./dist/aesthetics/glass.css",
       "default": "./dist/aesthetics/glass.css"
     },
     "./aesthetics/pixel": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/pixel.css",
       "import": "./dist/aesthetics/pixel.css",
       "default": "./dist/aesthetics/pixel.css"
     },
     "./aesthetics/chunky-tile": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/chunky-tile.css",
       "import": "./dist/aesthetics/chunky-tile.css",
       "default": "./dist/aesthetics/chunky-tile.css"
     },
     "./aesthetics/cyber": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/cyber.css",
       "import": "./dist/aesthetics/cyber.css",
       "default": "./dist/aesthetics/cyber.css"
     },
     "./aesthetics/sketch": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/aesthetics/sketch.css",
       "import": "./dist/aesthetics/sketch.css",
       "default": "./dist/aesthetics/sketch.css"
     },
     "./tw": {
-      "style": "./dist/tw/index.css",
-      "import": "./dist/tw/index.css",
-      "default": "./dist/tw/index.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/index.css",
+      "import": "./tw/index.css",
+      "default": "./tw/index.css"
     },
     "./tw/theme": {
-      "style": "./dist/tw/theme.css",
-      "import": "./dist/tw/theme.css",
-      "default": "./dist/tw/theme.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/theme.css",
+      "import": "./tw/theme.css",
+      "default": "./tw/theme.css"
     },
     "./tw/components": {
-      "style": "./dist/tw/components/index.css",
-      "import": "./dist/tw/components/index.css",
-      "default": "./dist/tw/components/index.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/index.css",
+      "import": "./tw/components/index.css",
+      "default": "./tw/components/index.css"
     },
     "./tw/surface": {
-      "style": "./dist/tw/components/surface.css",
-      "import": "./dist/tw/components/surface.css",
-      "default": "./dist/tw/components/surface.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/surface.css",
+      "import": "./tw/components/surface.css",
+      "default": "./tw/components/surface.css"
     },
     "./tw/button": {
-      "style": "./dist/tw/components/button.css",
-      "import": "./dist/tw/components/button.css",
-      "default": "./dist/tw/components/button.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/button.css",
+      "import": "./tw/components/button.css",
+      "default": "./tw/components/button.css"
     },
     "./tw/form": {
-      "style": "./dist/tw/components/form.css",
-      "import": "./dist/tw/components/form.css",
-      "default": "./dist/tw/components/form.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/form.css",
+      "import": "./tw/components/form.css",
+      "default": "./tw/components/form.css"
     },
     "./tw/feedback": {
-      "style": "./dist/tw/components/feedback.css",
-      "import": "./dist/tw/components/feedback.css",
-      "default": "./dist/tw/components/feedback.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/feedback.css",
+      "import": "./tw/components/feedback.css",
+      "default": "./tw/components/feedback.css"
     },
     "./tw/tooltip": {
-      "style": "./dist/tw/components/tooltip.css",
-      "import": "./dist/tw/components/tooltip.css",
-      "default": "./dist/tw/components/tooltip.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/components/tooltip.css",
+      "import": "./tw/components/tooltip.css",
+      "default": "./tw/components/tooltip.css"
     },
     "./tw/reset": {
-      "style": "./dist/tw/reset.css",
-      "import": "./dist/tw/reset.css",
-      "default": "./dist/tw/reset.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/reset.css",
+      "import": "./tw/reset.css",
+      "default": "./tw/reset.css"
     },
     "./tw/native": {
-      "style": "./dist/tw/native.css",
-      "import": "./dist/tw/native.css",
-      "default": "./dist/tw/native.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/native.css",
+      "import": "./tw/native.css",
+      "default": "./tw/native.css"
     },
     "./tw/typography": {
-      "style": "./dist/tw/typography.css",
-      "import": "./dist/tw/typography.css",
-      "default": "./dist/tw/typography.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/typography.css",
+      "import": "./tw/typography.css",
+      "default": "./tw/typography.css"
     },
     "./tw/utilities": {
-      "style": "./dist/tw/utilities/index.css",
-      "import": "./dist/tw/utilities/index.css",
-      "default": "./dist/tw/utilities/index.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/utilities/index.css",
+      "import": "./tw/utilities/index.css",
+      "default": "./tw/utilities/index.css"
     },
     "./tw/aesthetics": {
-      "style": "./dist/tw/aesthetics/index.css",
-      "import": "./dist/tw/aesthetics/index.css",
-      "default": "./dist/tw/aesthetics/index.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/index.css",
+      "import": "./tw/aesthetics/index.css",
+      "default": "./tw/aesthetics/index.css"
     },
     "./tw/aesthetics/neobrutalism": {
-      "style": "./dist/tw/aesthetics/neobrutalism.css",
-      "import": "./dist/tw/aesthetics/neobrutalism.css",
-      "default": "./dist/tw/aesthetics/neobrutalism.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/neobrutalism.css",
+      "import": "./tw/aesthetics/neobrutalism.css",
+      "default": "./tw/aesthetics/neobrutalism.css"
     },
     "./tw/aesthetics/glass": {
-      "style": "./dist/tw/aesthetics/glass.css",
-      "import": "./dist/tw/aesthetics/glass.css",
-      "default": "./dist/tw/aesthetics/glass.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/glass.css",
+      "import": "./tw/aesthetics/glass.css",
+      "default": "./tw/aesthetics/glass.css"
     },
     "./tw/aesthetics/pixel": {
-      "style": "./dist/tw/aesthetics/pixel.css",
-      "import": "./dist/tw/aesthetics/pixel.css",
-      "default": "./dist/tw/aesthetics/pixel.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/pixel.css",
+      "import": "./tw/aesthetics/pixel.css",
+      "default": "./tw/aesthetics/pixel.css"
     },
     "./tw/aesthetics/chunky-tile": {
-      "style": "./dist/tw/aesthetics/chunky-tile.css",
-      "import": "./dist/tw/aesthetics/chunky-tile.css",
-      "default": "./dist/tw/aesthetics/chunky-tile.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/chunky-tile.css",
+      "import": "./tw/aesthetics/chunky-tile.css",
+      "default": "./tw/aesthetics/chunky-tile.css"
     },
     "./tw/aesthetics/cyber": {
-      "style": "./dist/tw/aesthetics/cyber.css",
-      "import": "./dist/tw/aesthetics/cyber.css",
-      "default": "./dist/tw/aesthetics/cyber.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/cyber.css",
+      "import": "./tw/aesthetics/cyber.css",
+      "default": "./tw/aesthetics/cyber.css"
     },
     "./tw/aesthetics/sketch": {
-      "style": "./dist/tw/aesthetics/sketch.css",
-      "import": "./dist/tw/aesthetics/sketch.css",
-      "default": "./dist/tw/aesthetics/sketch.css"
+      "types": "./tw/index.d.ts",
+      "style": "./tw/aesthetics/sketch.css",
+      "import": "./tw/aesthetics/sketch.css",
+      "default": "./tw/aesthetics/sketch.css"
     },
     "./native": {
+      "types": "./dist/index.d.ts",
       "style": "./dist/native.css",
       "import": "./dist/native.css",
       "default": "./dist/native.css"
@@ -186,9 +222,13 @@
   "devDependencies": {
     "@codenhub/tools": "0.1.0",
     "@playwright/test": "~1.63.0",
-    "@tailwindcss/cli": "^4.3.2",
+    "@tailwindcss/cli": "^4.3.4",
+    "@tailwindcss/node": "^4.3.4",
+    "@tailwindcss/oxide": "^4.3.4",
     "@types/node": "^26.6.6",
-    "tailwindcss": "^4.3.2",
+    "@vitest/coverage-v8": "^4.1.10",
+    "tailwindcss": "^4.3.4",
+    "tsdown": "^0.23.5",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10"
   },
@@ -200,27 +240,39 @@
       "optional": true
     }
   },
+  "engines": {
+    "node": ">=24"
+  },
   "codenhub": {
     "label": "StyleKit",
     "status": "active",
-    "docs": {}
+    "docs": {
+      "versions": [
+        "^0.8.0"
+      ]
+    },
+    "tools": {
+      "timeout": 1800
+    }
   },
   "scripts": {
-    "clean": "node -e \"fs.rmSync('dist', { recursive: true, force: true })\"",
+    "clean": "node -e \"for (const d of ['dist', 'tw']) fs.rmSync(d, { recursive: true, force: true })\"",
     "dev": "pnpm --filter=@codenhub/styles-dev dev",
     "debug": "pnpm build && pnpm --filter=@codenhub/styles-debug dev",
     "demo": "pnpm build && pnpm --filter=@codenhub/styles-demo dev",
     "generate": "node scripts/generate-palette.mjs",
-    "build": "pnpm clean && node scripts/build-styles.mjs && pnpm build:tw",
+    "build": "pnpm clean && node scripts/build-styles.mjs && pnpm build:tw && pnpm build:purge && pnpm build:cli",
     "build:styles": "node scripts/build-styles.mjs --styles",
     "build:aesthetics": "node scripts/build-styles.mjs --aesthetics",
     "build:tw": "node scripts/build-tw.mjs",
+    "build:purge": "node scripts/build-purge.mjs",
+    "build:cli": "tsdown src/cli/cli.ts --format esm --no-clean --no-fixed-extension --no-dts",
     "status:npm": "npm view @codenhub/styles version dist-tags time --json && npm dist-tag ls @codenhub/styles && npm access get status @codenhub/styles",
     "status:pack": "npm pack --dry-run --ignore-scripts",
     "test": "vitest run",
     "test:browser": "playwright test",
     "test:browser:watch": "playwright test --ui",
-    "test:coverage": "pnpm test",
+    "test:coverage": "vitest run --coverage",
     "test:watch": "vitest --watch",
     "typecheck": "tsc -b"
   }

package/{dist/tw → tw}/aesthetics/chunky-tile.css

@@ -144,6 +144,17 @@
     --ui-label-case: initial;
     --ui-label-shadow: initial;
   }
+
+  /* More contrast asked for: the tile takes the controls' grey, since its own
+     is about 2.5:1 against the page in both themes. The bar under a tile is
+     this ink too, and darkens with it. A rule of its own rather than nested
+     above: `registry.test.ts` reads that block's declarations flat. See
+     docs/accessibility.md. */
+  @media (prefers-contrast: more) {
+    .chunky-tile {
+      --ui-ink: light-dark(var(--color-neutral-600), var(--color-neutral-400));
+    }
+  }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
@@ -183,15 +194,26 @@
   --_tile-bar: color-mix(in oklab, var(--_solo-ink) 72%, rgb(0 0 0));
   --_solo-depth: calc(var(--_tile-lift) * var(--ui-elevation, 1));
 
+  /* Printed as drawn; see `.glass-solo`. */
+  print-color-adjust: exact;
+
   border: 2px solid var(--_solo-edge);
   border-radius: var(--tile-radius, 0.75rem);
   box-shadow:
     0 var(--_solo-depth) 0 0 var(--_tile-bar),
     inset 0 0 0 100vmax var(--_solo-fill);
   font-family: var(--font-rounded, var(--font-default, ui-sans-serif, system-ui, sans-serif));
-  transition:
-    box-shadow var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
-    transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+}
+
+/* More contrast asked for: the controls' grey, as on `.chunky-tile`, for the
+   same 2.5:1. An element's intent still colours the line. */
+@media (prefers-contrast: more) {
+  .chunky-tile-solo {
+    --_solo-ink: var(
+      --_solo-intent-border,
+      light-dark(var(--color-neutral-600, oklch(43.9% 0 0)), var(--color-neutral-400, oklch(70.8% 0 0)))
+    );
+  }
 }
 
 /* An intent class on the element colours it, as on a component. Named rather
@@ -223,7 +245,12 @@
   color: var(--_solo-fg);
 }
 
-/* The heavier, tracked label is an action's, as under the aesthetic class. */
+/* The heavier, tracked label is an action's, as under the aesthetic class.
+
+   So is the press's transition: `transition` is one list, so writing it on
+   every solo element replaced a container's own -- a toast's fade and height
+   stopped animating. The travel is the independent `translate`, so the
+   element's own `transform` stays its own. */
 .chunky-tile-solo:is(
   button,
   a[href],
@@ -235,6 +262,16 @@
 ) {
   font-weight: 800;
   letter-spacing: 0.04em;
+  transition:
+    box-shadow var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    translate var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+
+  /* Reduced motion keeps the press and drops its motion: the tile lands on
+     its bar at once. The near-zero duration `box` uses, so a `transitionend`
+     still fires. */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
 }
 
 /* The press, only on something pressed: an action, not disabled. A solo
@@ -248,23 +285,9 @@
     input[type="button"],
     input[type="submit"],
     input[type="reset"]
-  ):active:not(:disabled, [aria-disabled="true"]) {
+  ):active:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
   box-shadow:
     0 0 0 0 var(--_tile-bar),
     inset 0 0 0 100vmax var(--_solo-fill);
-  transform: translateY(var(--_solo-depth));
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .chunky-tile-solo:is(
-      button,
-      a[href],
-      [role="button"],
-      summary,
-      input[type="button"],
-      input[type="submit"],
-      input[type="reset"]
-    ):active:not(:disabled, [aria-disabled="true"]) {
-    transform: none;
-  }
+  translate: 0 var(--_solo-depth);
 }

package/{dist/tw → tw}/aesthetics/cyber.css

@@ -88,7 +88,7 @@
 
     /* The glow holds still under the pointer and under a press; the press is the
        base scale, restated because a region nested inside another aesthetic must
-       not inherit that one's travel. Reduced motion drops it below. */
+       not inherit that one's travel. */
     --ui-hover-transform: none;
     --ui-active-shadow-x: 0px;
     --ui-active-shadow-y: 0px;
@@ -145,12 +145,6 @@
       --ui-radius-surface: 0;
     }
   }
-
-  @media (prefers-reduced-motion: reduce) {
-    .cyber {
-      --ui-active-transform: none;
-    }
-  }
 }
 
 /* Solo: the same look painted onto the one element carrying the class, for an
@@ -185,6 +179,9 @@
   );
   --_solo-edge: color-mix(in oklab, var(--_solo-ink) var(--ui-border, 100%), var(--_solo-fill));
 
+  /* Printed as drawn; see `.glass-solo`. */
+  print-color-adjust: exact;
+
   border: 1px solid var(--_solo-edge);
   /* The surface shape: the element this exists for is usually a pane. An action
      takes the control shape below. */
@@ -199,7 +196,6 @@
     0 0 var(--cyber-glow, 8px) 1px color-mix(in oklab, var(--_solo-ink) 60%, transparent),
     inset 0 0 0 100vmax var(--_solo-fill);
   font-family: var(--font-cyber, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
-  transition: transform var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
 /* An intent class on the element colours it, as on a component. Named rather
@@ -231,7 +227,12 @@
   color: var(--_solo-fg);
 }
 
-/* An action takes the control shape, on the opposite diagonal to a pane's. */
+/* An action takes the control shape, on the opposite diagonal to a pane's.
+
+   And the press's transition, on an action only: `transition` is one list, so
+   writing it on every solo element replaced a container's own -- a toast's
+   fade and height stopped animating. The press is the independent `scale`, so
+   the element's own `transform` stays its own. */
 .cyber-solo:is(
   button,
   a[href],
@@ -242,6 +243,13 @@
   input[type="reset"]
 ) {
   border-radius: var(--cyber-shape, min(var(--cyber-cut, 0.625rem), 25%) 0 / min(var(--cyber-cut, 0.625rem), 25%) 0);
+  transition: scale var(--motion-duration-normal, 200ms) var(--motion-ease, cubic-bezier(0.2, 0, 0, 1));
+
+  /* Reduced motion keeps the press and drops its motion: the element gives at
+     once. The near-zero duration `box` uses, so a `transitionend` still fires. */
+  @media (prefers-reduced-motion: reduce) {
+    transition-duration: 0.01ms;
+  }
 }
 
 @supports not (corner-shape: bevel) {
@@ -270,20 +278,6 @@
     input[type="button"],
     input[type="submit"],
     input[type="reset"]
-  ):active:not(:disabled, [aria-disabled="true"]) {
-  transform: scale(0.97);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .cyber-solo:is(
-      button,
-      a[href],
-      [role="button"],
-      summary,
-      input[type="button"],
-      input[type="submit"],
-      input[type="reset"]
-    ):active:not(:disabled, [aria-disabled="true"]) {
-    transform: none;
-  }
+  ):active:not(:disabled, .disabled, [aria-disabled="true"], [data-disabled]) {
+  scale: 0.97;
 }