create-quilltap-theme 2.0.9 → 2.0.11

package/dist/index.js

@@ -123,6 +123,24 @@ async function scaffoldBundle(config) {
     "utf-8"
   );
   success("Created fonts/");
+  const iconsDir = path.join(destPath, "icons");
+  fs.mkdirSync(iconsDir, { recursive: true });
+  fs.writeFileSync(
+    path.join(iconsDir, ".gitkeep"),
+    [
+      "# Place icon override assets here (.svg or .webp) and map them in theme.json:",
+      "#",
+      '#   "icons": {',
+      '#     "settings": "icons/settings.svg",   // .svg keeps currentColor tinting',
+      '#     "brand": "icons/brand.webp"          // .webp bakes in its own color',
+      "#   }",
+      "#",
+      "# Icon names must match Quilltap's built-in icon names. Unmatched names are ignored.",
+      ""
+    ].join("\n"),
+    "utf-8"
+  );
+  success("Created icons/");
   heading("Done! Next steps:");
   log(`  ${colors.dim}# Edit your theme:${colors.reset}`);
   log(`  ${colors.cyan}cd ${config.themeId}${colors.reset}`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-quilltap-theme",
-  "version": "2.0.9",
+  "version": "2.0.11",
   "description": "Scaffold a new Quilltap theme plugin",
   "main": "dist/index.js",
   "bin": {

package/templates/bundle/README.md.template

@@ -14,6 +14,7 @@ This is a `.qtap-theme` bundle — a simple directory (or zip archive) containin
 ├── tokens.json     # Design tokens (colors, typography, spacing, effects)
 ├── styles.css      # CSS overrides (optional)
 ├── fonts/          # Custom font files (optional)
+├── icons/          # Icon override assets (optional)
 └── README.md       # This file
 ```
 
@@ -24,6 +25,29 @@ This is a `.qtap-theme` bundle — a simple directory (or zip archive) containin
 - **Spacing/Radius**: Edit `tokens.json` → `spacing` section
 - **Component styles**: Edit `styles.css` for custom CSS overrides
 - **Custom fonts**: Add `.woff2` files to `fonts/` and reference them in `theme.json`
+- **Custom icons**: Add `.svg` or `.webp` files to `icons/` and map them in `theme.json` (see below)
+
+## Custom icons
+
+Quilltap renders its UI icons through a central registry, so a theme can replace
+any of them. Drop replacement assets into `icons/` and add an `icons` map to
+`theme.json`, keyed by Quilltap's built-in icon name:
+
+```json
+{
+  "icons": {
+    "settings": "icons/settings.svg",
+    "brand": "icons/brand.webp"
+  }
+}
+```
+
+- **`.svg` overrides** are tinted by the current text color, exactly like the
+  built-in icons — good for monochrome glyphs that should follow the theme.
+- **`.webp` overrides** are drawn in full color — good for textured or
+  multi-color marks (the `brand` quill is always drawn in full color).
+- Icon names must match Quilltap's built-in names; unknown names are ignored.
+  Run `quilltap themes validate` to catch typos and bad asset paths.
 
 ## Installing
 

package/templates/bundle/styles.css.template

@@ -120,6 +120,23 @@
   /* --qt-input-placeholder: var(--color-muted-foreground); */
   /* --qt-input-focus-ring: var(--color-ring); */
   /* --qt-input-transition: colors 150ms cubic-bezier(0.4, 0, 0.2, 1); */
+  /* Select chevron — a full url() data URI; swap the whole glyph to restyle it. */
+  /* --qt-select-arrow: url("data:image/svg+xml,..."); */
+
+  /* ======================================================================
+     CHECKBOX & RADIO VARIABLES
+     accent-color recolors the native fill/check; size/border/radius apply
+     to appearance:none controls.
+     ====================================================================== */
+  /* --qt-checkbox-size: 1rem; */
+  /* --qt-checkbox-radius: var(--radius-sm); */
+  /* --qt-checkbox-border: var(--color-border); */
+  /* --qt-checkbox-accent: var(--color-primary); */
+  /* --qt-checkbox-focus-ring: var(--color-ring); */
+  /* --qt-radio-size: 1rem; */
+  /* --qt-radio-border: var(--color-border); */
+  /* --qt-radio-accent: var(--color-primary); */
+  /* --qt-radio-focus-ring: var(--color-ring); */
 
   /* ======================================================================
      NAVBAR VARIABLES

package/templates/docs/THEME_PLUGIN_DEVELOPMENT.md.template

@@ -594,8 +594,24 @@ Override these variables for consistent component styling:
 --qt-input-radius
 --qt-input-padding-y
 --qt-input-padding-x
+--qt-input-bg
+--qt-input-fg
 --qt-input-border
+--qt-input-placeholder
+--qt-input-focus-ring
 --qt-input-transition
+--qt-select-arrow        /* full url() data URI for the <select> chevron */
+
+/* Checkboxes & radios (accent-color is the fill/check hook) */
+--qt-checkbox-size
+--qt-checkbox-radius
+--qt-checkbox-border
+--qt-checkbox-accent
+--qt-checkbox-focus-ring
+--qt-radio-size
+--qt-radio-border
+--qt-radio-accent
+--qt-radio-focus-ring
 
 /* Badges */
 --qt-badge-radius

package/templates/stories/Components.stories.tsx.template

@@ -2,6 +2,7 @@ import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import {
   ColorPalette,
+  Icons,
   Typography,
   Spacing,
   Buttons,
@@ -23,6 +24,12 @@ export const Colors: StoryObj = {
   render: () => <ColorPalette />,
 };
 
+// Icons
+export const IconReference: StoryObj = {
+  name: 'Icons',
+  render: () => <Icons />,
+};
+
 // Typography
 export const Fonts: StoryObj = {
   name: 'Typography',