@cascivo/icons 0.3.0 → 0.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cascivo/icons",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "private": false,
   "description": "Optional SVG icon components",
   "keywords": [
@@ -22,17 +22,20 @@
     "directory": "packages/icons"
   },
   "files": [
-    "dist"
+    "dist",
+    "src/glyphs.css"
   ],
   "type": "module",
   "sideEffects": false,
   "types": "./dist/index.d.mts",
   "exports": {
+    "./package.json": "./package.json",
     ".": {
-      "import": "./dist/index.mjs",
       "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
       "default": "./dist/index.mjs"
-    }
+    },
+    "./glyphs.css": "./src/glyphs.css"
   },
   "publishConfig": {
     "access": "public",

package/readme.body.md

@@ -1,6 +1,6 @@
 A set of **~440** React SVG icon components that inherit the cascivo token system — stroked 24×24 `currentColor` geometry, token-driven sizing, and tree-shakeable named exports.
 
-Browse and search the full catalog — with click-to-copy imports and live size/color/theme previews — in the **[/icons gallery](https://docs.cascivo.com/icons)**.
+Browse and search the full catalog — with click-to-copy imports and live size/color/theme previews — in the **[/icons gallery](https://cascivo.com/icons)**.
 
 ## Usage
 
@@ -27,6 +27,33 @@ button svg {
 
 Import only the icons you use — named exports are individually tree-shakeable, so bundle cost scales with usage, not catalog size.
 
+## Pure-CSS glyphs (experimental)
+
+A small, opt-in set of UI glyphs rendered with **zero SVG** — a `background: currentColor` element clipped by `clip-path: shape()`. They inherit text color like the SVG icons, resize via one custom property, and can **morph between states with a CSS transition and no JavaScript**.
+
+```tsx
+import '@cascivo/icons/glyphs.css' // import once, anywhere in the app
+import { Glyph } from '@cascivo/icons'
+
+// static glyph
+;<Glyph name="chevron-down" size={20} aria-label="Expand" />
+
+// zero-JS morph: the shape animates when `open` flips
+;<Glyph name="chevron-toggle" open={isOpen} />
+```
+
+Or use the class directly, without React:
+
+```html
+<span class="cascivo-glyph" data-glyph="check"></span>
+```
+
+Set size with `--cascivo-glyph-size` (default `1.5rem`); color follows `currentColor`.
+
+v1 glyphs: `chevron-{down,up,left,right}`, `x`, `check`, `plus`, `minus`, `menu`, `arrow-{right,left,up,down}`, and the `chevron-toggle` morph. Geometry is authored in `packages/icons/src/glyphs/spec.ts` and expanded to outlines by `scripts/icons/generate-glyphs.mjs` (`pnpm glyphs:generate`).
+
+**Support & caveats.** `clip-path: shape()` is [Baseline 2026](https://developer.mozilla.org/en-US/docs/Web/CSS/basic-shape/shape) (Chrome/Edge 135+, Safari 18.4+, Firefox 148+); the stylesheet gates all painting behind `@supports`, so older browsers render nothing rather than a broken box — use the SVG icons where you need a wider floor. A `forced-colors` fallback keeps glyphs visible in Windows High Contrast. Because the paint is a background color, glyphs **do not print** by default (browsers strip backgrounds) — prefer the SVG icons in print-critical surfaces.
+
 ## Catalog & generation
 
 The catalog combines the original hand-authored [Feather](https://github.com/feathericons/feather)-derived icons with the [chromicons](https://github.com/lifeomic/chromicons.com) set, both MIT-licensed (see [`NOTICE`](https://github.com/cascivo/cascivo/blob/main/NOTICE)). The chromicons are vendored as SVG source under `packages/icons/svg/` and transformed into `createIcon` exports by `scripts/icons/generate.mjs` (run via `pnpm icons:generate` / `pnpm regen`) — owned code, no runtime dependency. On a name collision the existing export always wins, so the surface is purely additive.

package/src/glyphs.css

@@ -0,0 +1,265 @@
+/* GENERATED by scripts/icons/generate-glyphs.mjs — do not edit by hand. */
+/* Pure-CSS glyphs via clip-path: shape(). Geometry: packages/icons/src/glyphs/spec.ts. */
+/* Run `pnpm glyphs:generate` to refresh. */
+
+@layer cascivo.component {
+  @supports (clip-path: shape(from 0 0, close)) {
+    .cascivo-glyph {
+      display: inline-block;
+      inline-size: var(--cascivo-glyph-size, 1.5rem);
+      block-size: var(--cascivo-glyph-size, 1.5rem);
+      flex-shrink: 0;
+      background: currentColor;
+    }
+
+    .cascivo-glyph[data-glyph='chevron-down'] {
+      clip-path: shape(
+        from 22.054% 40.446%,
+        line to 50% 68.393%,
+        line to 77.946% 40.446%,
+        arc to 72.054% 34.554% of 4.167% 4.167% cw,
+        line to 50% 56.607%,
+        line to 27.946% 34.554%,
+        arc to 22.054% 40.446% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='chevron-up'] {
+      clip-path: shape(
+        from 27.946% 65.446%,
+        line to 50% 43.393%,
+        line to 72.054% 65.446%,
+        arc to 77.946% 59.554% of 4.167% 4.167% cw,
+        line to 50% 31.607%,
+        line to 22.054% 59.554%,
+        arc to 27.946% 65.446% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='chevron-left'] {
+      clip-path: shape(
+        from 59.554% 22.054%,
+        line to 31.607% 50%,
+        line to 59.554% 77.946%,
+        arc to 65.446% 72.054% of 4.167% 4.167% cw,
+        line to 43.393% 50%,
+        line to 65.446% 27.946%,
+        arc to 59.554% 22.054% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='chevron-right'] {
+      clip-path: shape(
+        from 34.554% 27.946%,
+        line to 56.607% 50%,
+        line to 34.554% 72.054%,
+        arc to 40.446% 77.946% of 4.167% 4.167% cw,
+        line to 68.393% 50%,
+        line to 40.446% 22.054%,
+        arc to 34.554% 27.946% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='x'] {
+      clip-path: shape(
+        from 22.054% 27.946%,
+        line to 72.054% 77.946%,
+        arc to 77.946% 72.054% of 4.167% 4.167% cw,
+        line to 27.946% 22.054%,
+        arc to 22.054% 27.946% of 4.167% 4.167% cw,
+        close,
+        move to 72.054% 22.054%,
+        line to 22.054% 72.054%,
+        arc to 27.946% 77.946% of 4.167% 4.167% cw,
+        line to 77.946% 27.946%,
+        arc to 72.054% 22.054% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='check'] {
+      clip-path: shape(
+        from 17.887% 55.03%,
+        line to 41.89% 79.033%,
+        line to 84.403% 29.807%,
+        arc to 78.097% 24.36% of 4.167% 4.167% cw,
+        line to 41.443% 66.801%,
+        line to 23.78% 49.137%,
+        arc to 17.887% 55.03% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='plus'] {
+      clip-path: shape(
+        from 45.833% 25%,
+        line to 45.833% 75%,
+        arc to 54.167% 75% of 4.167% 4.167% cw,
+        line to 54.167% 25%,
+        arc to 45.833% 25% of 4.167% 4.167% cw,
+        close,
+        move to 25% 54.167%,
+        line to 75% 54.167%,
+        arc to 75% 45.833% of 4.167% 4.167% cw,
+        line to 25% 45.833%,
+        arc to 25% 54.167% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='minus'] {
+      clip-path: shape(
+        from 25% 54.167%,
+        line to 75% 54.167%,
+        arc to 75% 45.833% of 4.167% 4.167% cw,
+        line to 25% 45.833%,
+        arc to 25% 54.167% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='menu'] {
+      clip-path: shape(
+        from 16.667% 33.333%,
+        line to 83.333% 33.333%,
+        arc to 83.333% 25% of 4.167% 4.167% cw,
+        line to 16.667% 25%,
+        arc to 16.667% 33.333% of 4.167% 4.167% cw,
+        close,
+        move to 16.667% 54.167%,
+        line to 83.333% 54.167%,
+        arc to 83.333% 45.833% of 4.167% 4.167% cw,
+        line to 16.667% 45.833%,
+        arc to 16.667% 54.167% of 4.167% 4.167% cw,
+        close,
+        move to 16.667% 75%,
+        line to 83.333% 75%,
+        arc to 83.333% 66.667% of 4.167% 4.167% cw,
+        line to 16.667% 66.667%,
+        arc to 16.667% 75% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='arrow-right'] {
+      clip-path: shape(
+        from 16.667% 54.167%,
+        line to 83.333% 54.167%,
+        arc to 83.333% 45.833% of 4.167% 4.167% cw,
+        line to 16.667% 45.833%,
+        arc to 16.667% 54.167% of 4.167% 4.167% cw,
+        close,
+        move to 51.22% 23.78%,
+        line to 77.441% 50%,
+        line to 51.22% 76.22%,
+        arc to 57.113% 82.113% of 4.167% 4.167% cw,
+        line to 89.226% 50%,
+        line to 57.113% 17.887%,
+        arc to 51.22% 23.78% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='arrow-left'] {
+      clip-path: shape(
+        from 83.333% 45.833%,
+        line to 16.667% 45.833%,
+        arc to 16.667% 54.167% of 4.167% 4.167% cw,
+        line to 83.333% 54.167%,
+        arc to 83.333% 45.833% of 4.167% 4.167% cw,
+        close,
+        move to 42.887% 17.887%,
+        line to 10.774% 50%,
+        line to 42.887% 82.113%,
+        arc to 48.78% 76.22% of 4.167% 4.167% cw,
+        line to 22.559% 50%,
+        line to 48.78% 23.78%,
+        arc to 42.887% 17.887% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='arrow-up'] {
+      clip-path: shape(
+        from 54.167% 83.333%,
+        line to 54.167% 16.667%,
+        arc to 45.833% 16.667% of 4.167% 4.167% cw,
+        line to 45.833% 83.333%,
+        arc to 54.167% 83.333% of 4.167% 4.167% cw,
+        close,
+        move to 23.78% 48.78%,
+        line to 50% 22.559%,
+        line to 76.22% 48.78%,
+        arc to 82.113% 42.887% of 4.167% 4.167% cw,
+        line to 50% 10.774%,
+        line to 17.887% 42.887%,
+        arc to 23.78% 48.78% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='arrow-down'] {
+      clip-path: shape(
+        from 45.833% 16.667%,
+        line to 45.833% 83.333%,
+        arc to 54.167% 83.333% of 4.167% 4.167% cw,
+        line to 54.167% 16.667%,
+        arc to 45.833% 16.667% of 4.167% 4.167% cw,
+        close,
+        move to 17.887% 57.113%,
+        line to 50% 89.226%,
+        line to 82.113% 57.113%,
+        arc to 76.22% 51.22% of 4.167% 4.167% cw,
+        line to 50% 77.441%,
+        line to 23.78% 51.22%,
+        arc to 17.887% 57.113% of 4.167% 4.167% cw,
+        close
+      );
+    }
+
+    .cascivo-glyph[data-glyph='chevron-toggle'] {
+      clip-path: shape(
+        from 22.054% 40.446%,
+        line to 50% 68.393%,
+        line to 77.946% 40.446%,
+        arc to 72.054% 34.554% of 4.167% 4.167% cw,
+        line to 50% 56.607%,
+        line to 27.946% 34.554%,
+        arc to 22.054% 40.446% of 4.167% 4.167% cw,
+        close
+      );
+      transition: clip-path 200ms ease;
+    }
+    .cascivo-glyph[data-glyph='chevron-toggle'][data-state='open'] {
+      clip-path: shape(
+        from 27.946% 65.446%,
+        line to 50% 43.393%,
+        line to 72.054% 65.446%,
+        arc to 77.946% 59.554% of 4.167% 4.167% cw,
+        line to 50% 31.607%,
+        line to 22.054% 59.554%,
+        arc to 27.946% 65.446% of 4.167% 4.167% cw,
+        close
+      );
+    }
+  }
+}
+
+/* Accessibility guarantees — top-level so they win over every layer. */
+@media (prefers-reduced-motion: reduce) {
+  .cascivo-glyph {
+    transition: none;
+  }
+}
+
+/* Forced-colors mode overrides background-color; repaint the silhouette */
+/* with the system foreground so the glyph stays visible. */
+@media (forced-colors: active) {
+  .cascivo-glyph {
+    background: CanvasText;
+  }
+}