@codenhub/styles 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codenhub/styles",
-  "version": "0.7.0",
+  "version": "0.8.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",
@@ -10,8 +10,12 @@
     "url": "git+https://github.com/codenhub/codenhub.git",
     "directory": "packages/styles"
   },
+  "bin": {
+    "codenhub-styles": "./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,35 +222,49 @@
   "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",
+    "tailwindcss": "^4.3.4",
+    "tsdown": "^0.23.5",
     "typescript": "^6.0.3",
     "vitest": "^4.1.10"
   },
   "peerDependencies": {
+    "@tailwindcss/cli": ">=4.3.2 <5",
     "tailwindcss": ">=4.3.2 <5"
   },
   "peerDependenciesMeta": {
+    "@tailwindcss/cli": {
+      "optional": true
+    },
     "tailwindcss": {
       "optional": true
     }
   },
+  "engines": {
+    "node": ">=24"
+  },
   "codenhub": {
     "label": "StyleKit",
     "status": "active",
-    "docs": {}
+    "docs": {},
+    "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: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: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",

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
@@ -189,9 +200,17 @@
     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 +242,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 +259,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
@@ -252,19 +286,5 @@
   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
@@ -199,7 +193,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 +224,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 +240,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) {
@@ -271,19 +276,5 @@
     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;
-  }
+  scale: 0.97;
 }