@rokkit/cli 1.10.1 → 1.11.0

package/dist/src/init.d.ts

@@ -109,10 +109,64 @@ export function generateZenSumiConfig(opts?: {}): {
             900: string;
             950: string;
         };
+        beni: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        ai: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        murasaki: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
     };
     colorSpace: string;
     tokens: string;
     skin: {
+        overrides: {
+            [k: string]: {
+                light: string;
+                dark: string;
+            };
+        };
+        success: string;
+        warning: string;
+        danger: string;
+        error: string;
+        info: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        accent: string;
         surface: {
             light: string;
             dark: string;
@@ -121,13 +175,6 @@ export function generateZenSumiConfig(opts?: {}): {
             light: string;
             dark: string;
         };
-        primary: string;
-        accent: string;
-        success: string;
-        warning: string;
-        danger: string;
-        error: string;
-        info: string;
     };
     shape: {
         radius: string;
@@ -209,10 +256,64 @@ export function generateZenSumiConfig(opts?: {}): {
             900: string;
             950: string;
         };
+        beni: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        ai: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        murasaki: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
     };
     colorSpace: string;
     tokens: string;
     skin: {
+        overrides: {
+            [k: string]: {
+                light: string;
+                dark: string;
+            };
+        };
+        success: string;
+        warning: string;
+        danger: string;
+        error: string;
+        info: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        accent: string;
         surface: {
             light: string;
             dark: string;
@@ -221,13 +322,6 @@ export function generateZenSumiConfig(opts?: {}): {
             light: string;
             dark: string;
         };
-        primary: string;
-        accent: string;
-        success: string;
-        warning: string;
-        danger: string;
-        error: string;
-        info: string;
     };
     shape: {
         radius: string;
@@ -309,10 +403,64 @@ export function generateZenSumiConfig(opts?: {}): {
             900: string;
             950: string;
         };
+        beni: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        ai: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        murasaki: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
     };
     colorSpace: string;
     tokens: string;
     skin: {
+        overrides: {
+            [k: string]: {
+                light: string;
+                dark: string;
+            };
+        };
+        success: string;
+        warning: string;
+        danger: string;
+        error: string;
+        info: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        accent: string;
         surface: {
             light: string;
             dark: string;
@@ -321,13 +469,6 @@ export function generateZenSumiConfig(opts?: {}): {
             light: string;
             dark: string;
         };
-        primary: string;
-        accent: string;
-        success: string;
-        warning: string;
-        danger: string;
-        error: string;
-        info: string;
     };
     shape: {
         radius: string;
@@ -409,10 +550,64 @@ export function generateZenSumiConfig(opts?: {}): {
             900: string;
             950: string;
         };
+        beni: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        ai: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
+        murasaki: {
+            50: string;
+            100: string;
+            200: string;
+            300: string;
+            400: string;
+            500: string;
+            600: string;
+            700: string;
+            800: string;
+            900: string;
+            950: string;
+        };
     };
     colorSpace: string;
     tokens: string;
     skin: {
+        overrides: {
+            [k: string]: {
+                light: string;
+                dark: string;
+            };
+        };
+        success: string;
+        warning: string;
+        danger: string;
+        error: string;
+        info: string;
+        primary: string;
+        secondary: string;
+        tertiary: string;
+        accent: string;
         surface: {
             light: string;
             dark: string;
@@ -421,13 +616,6 @@ export function generateZenSumiConfig(opts?: {}): {
             light: string;
             dark: string;
         };
-        primary: string;
-        accent: string;
-        success: string;
-        warning: string;
-        danger: string;
-        error: string;
-        info: string;
     };
     shape: {
         radius: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rokkit/cli",
-  "version": "1.10.1",
+  "version": "1.11.0",
   "description": "Command line utilities for icon bundling and conversion.",
   "repository": {
     "type": "git",
@@ -27,9 +27,9 @@
     "vitest": "^4.1.11"
   },
   "dependencies": {
-    "@rokkit/core": "1.10.1",
+    "@rokkit/core": "1.11.0",
     "@mdi/svg": "^7.4.47",
-    "@rokkit/unocss": "1.10.1",
+    "@rokkit/unocss": "1.11.0",
     "sade": "^1.8.1",
     "@iconify/tools": "^5.0.14",
     "@iconify/types": "^2.0.0",

package/skills/semantic-styles-rokkit/SKILL.md

@@ -52,6 +52,18 @@ The preset wraps values into complete colors when it emits CSS vars (see Layer 3
 
 ---
 
+## Layer 1a — Palette families (prefer these to hand-copied palettes)
+
+Before writing palette literals, check whether a rokkit family fits: `zen-sumi`, `sea-glass`,
+`sakura-ember`, `fuji-dusk`, `moss-garden`, from `@rokkit/unocss/palettes`. Each is
+`{ name, description, palettes, skin }` and passes AA for every ink tone and status text in both
+modes. Use `palettes: { ...zenSumi.palettes }, colorSpace: 'oklch', skin: zenSumi.skin` (or
+`skins: { default: zenSumi.skin, 'sea-glass': seaGlass.skin }`). A copied family drifts; an
+imported one follows rokkit's tuning on upgrade. A skin may carry its own `overrides` block
+(token → `palette.shade` or `{ light, dark }`), which is how the families put status text on a
+mode-appropriate shade.
+
+
 ## Layer 2 — Skin and skins
 
 **What:** A skin maps semantic role names to palette names. The core roles that back the
@@ -312,7 +324,7 @@ Default stays `'core'`.
 documents the vocabulary). Two starters via the palette prompt:
 
 - **Tailwind (rgb)** — `skin` of Tailwind palette names, `colorSpace: 'rgb'`, `tokens: 'core'`. Single-palette → light-leaning (see Layer 2b).
-- **Zen-Sumi (OKLCH)** — ships `palettes` (kami/sumi/shu/…), `colorSpace: 'oklch'`, dual-palette `surface`/`ink` → full dark mode out of the box.
+- **Zen-Sumi (OKLCH)** — writes `import { zenSumi } from '@rokkit/unocss/palettes'` with `palettes: zenSumi.palettes`, `skin: zenSumi.skin`, `colorSpace: 'oklch'` → full dark mode out of the box, and the family's tuning follows rokkit upgrades.
 
 **`rokkit doctor`** validates an existing setup. Beyond file checks (config exists,
 `uno.config.js` uses `presetRokkit(config)`, `app.css` imports a theme, `app.html` has the

package/skills/skin-system-rokkit/SKILL.md

@@ -70,6 +70,45 @@ Consumer `skins:` in `rokkit.config.js` merge on top and can override or extend
 
 ---
 
+## Palette families — import, don't copy
+
+rokkit exports ready-made colour systems, so an app imports a family instead of copying its
+values. Each family is `{ name, description, palettes, skin }`: `palettes` are bare OKLCH
+components (`colorSpace: 'oklch'`), and `skin` maps every role — surface and ink as a light/dark
+pair, primary, secondary, tertiary, accent and the five status roles.
+
+| Family | Mood | Primary | Paper |
+| --- | --- | --- | --- |
+| `zen-sumi` | Sumi ink on washi paper with a vermillion seal — quiet, warm, deliberate | shu (vermillion) | kami / sumi |
+| `sea-glass` | Sea teal and open sky over cool mist — calm, clear, airy | umi (teal) | kiri / yoru |
+| `sakura-ember` | Bitter-orange embers and cherry blossom on warm paper — lively, friendly | daidai (orange) | kami / sumi |
+| `fuji-dusk` | Wisteria and bellflower at dusk over cool mist — dreamy, focused | fuji (violet) | kiri / yoru |
+| `moss-garden` | Moss and running water on warm stone paper — grounded, fresh | koke (emerald) | kami / sumi |
+
+```js
+// rokkit.config.js
+import { zenSumi, seaGlass } from '@rokkit/unocss/palettes'
+
+export default {
+  palettes: { ...zenSumi.palettes, ...seaGlass.palettes },
+  colorSpace: 'oklch',
+  skins: { default: zenSumi.skin, 'sea-glass': seaGlass.skin }
+}
+```
+
+`PALETTE_FAMILIES` maps every family by name. Families share a palette name only where the
+values are identical, so several can be spread into one `palettes` block.
+
+Every family is held to the same bar in both modes: all four ink tones read at AA (4.5:1) on
+`paper` and `paper-soft`; primary and the status roles are distinct palettes; the primary fill
+takes a readable on-colour; and status text (`text-danger`, `-success`, `-warning`, `-info`)
+reads at AA on paper. No single shade does that on both light and dark paper, so each family
+skin carries its own `overrides` — status text uses a darker shade on light paper and a lighter
+one on dark paper (zen-sumi: `danger` is `beni.600` in light, `beni.400` in dark). A skin
+`overrides` block takes the same shape as the config's, and applies wherever that skin
+applies. `text-on-{role}` reads `--on-{role}`, which the preset derives per skin and mode from
+the fill actually painted.
+
 ## Switching at runtime
 
 Three moving parts: **`vibe.skin`** (reactive state), **`themable`** (writes `data-skin` to

package/src/init.js

@@ -5,6 +5,7 @@ import { resolve } from 'path'
 import { execFileSync } from 'child_process'
 import { detectPackageManager, buildInstallCommand } from './upgrade.js'
 import { themeInitScript } from '@rokkit/unocss/hooks'
+import { PALETTE_FAMILIES, zenSumi } from '@rokkit/unocss/palettes'
 
 const ROKKIT_PACKAGES = ['@rokkit/ui', '@rokkit/unocss', '@rokkit/themes', '@rokkit/icons']
 const LOCKFILES = ['bun.lock', 'bun.lockb', 'pnpm-lock.yaml', 'yarn.lock', 'package-lock.json']
@@ -36,6 +37,41 @@ const OKLCH_PALETTES_NOTE = `/**
  */
 `
 
+/**
+ * Exported palette families, by the binding a config imports them under. A family's
+ * `palettes` or `skin` in a config serializes as a reference to the import, not a copy.
+ */
+const FAMILY_BINDINGS = Object.values(PALETTE_FAMILIES).map((family) => ({
+	family,
+	binding: family.name.replace(/-(\w)/g, (_, c) => c.toUpperCase())
+}))
+
+/**
+ * The families a config uses by reference, and the JSON with each reference written as an
+ * expression (`zenSumi.palettes`) instead of its values.
+ * @param {Record<string, unknown>} config
+ * @returns {{ imports: string[], json: string }}
+ */
+function serializeFamilies(config) {
+	const used = new Set()
+	const json = JSON.stringify(
+		config,
+		(_key, value) => {
+			for (const { family, binding } of FAMILY_BINDINGS) {
+				for (const part of ['palettes', 'skin']) {
+					if (value === family[part]) {
+						used.add(binding)
+						return `@@${binding}.${part}@@`
+					}
+				}
+			}
+			return value
+		},
+		2
+	).replace(/"@@([\w.]+)@@"/g, '$1')
+	return { imports: [...used], json }
+}
+
 /**
  * Derive a safe localStorage key from an npm package name.
  * Strips the scope, keeps case, maps unsafe chars to '-'. Returns '' when there
@@ -58,7 +94,9 @@ export function storageKeyFromName(name) {
  */
 export function serializeRokkitConfig(config) {
 	const palettesNote = config.palettes ? OKLCH_PALETTES_NOTE : ''
-	return `${NAMED_TOKEN_HEADER}${palettesNote}export default ${JSON.stringify(config, null, 2)}\n`
+	const { imports, json } = serializeFamilies(config)
+	const importLine = imports.length ? `import { ${imports.join(', ')} } from '@rokkit/unocss/palettes'\n\n` : ''
+	return `${importLine}${NAMED_TOKEN_HEADER}${palettesNote}export default ${json}\n`
 }
 
 /**
@@ -169,40 +207,6 @@ function resolveSkin(palette, customColors) {
 	}
 }
 
-// Zen-Sumi OKLCH palettes — bare "L C H" components (colorSpace: 'oklch').
-const ZEN_SUMI_PALETTES = {
-	kami: {
-		50: '0.985 0.005 85', 100: '0.975 0.008 85', 200: '0.955 0.010 85',
-		300: '0.920 0.012 85', 400: '0.850 0.010 70', 500: '0.750 0.008 50',
-		600: '0.510 0.010 50', 700: '0.470 0.012 50', 800: '0.380 0.012 50',
-		900: '0.220 0.012 50', 950: '0.170 0.010 50'
-	},
-	sumi: {
-		50: '0.170 0.010 50', 100: '0.210 0.012 50', 200: '0.250 0.012 50',
-		300: '0.320 0.012 50', 400: '0.420 0.010 50', 500: '0.570 0.010 50',
-		600: '0.660 0.009 85', 700: '0.720 0.009 85', 800: '0.780 0.008 85',
-		900: '0.940 0.008 85', 950: '0.975 0.008 85'
-	},
-	shu: {
-		50: '0.970 0.020 35', 100: '0.940 0.040 35', 200: '0.880 0.070 35',
-		300: '0.800 0.100 35', 400: '0.700 0.130 35', 500: '0.580 0.150 35',
-		600: '0.500 0.140 35', 700: '0.420 0.120 35', 800: '0.350 0.100 35',
-		900: '0.280 0.080 35', 950: '0.220 0.060 35'
-	},
-	hisui: {
-		50: '0.970 0.015 160', 100: '0.940 0.030 160', 200: '0.880 0.050 160',
-		300: '0.800 0.065 160', 400: '0.720 0.075 160', 500: '0.620 0.080 160',
-		600: '0.540 0.075 160', 700: '0.460 0.065 160', 800: '0.380 0.055 160',
-		900: '0.300 0.045 160', 950: '0.240 0.035 160'
-	},
-	kohaku: {
-		50: '0.980 0.020 75', 100: '0.950 0.040 75', 200: '0.900 0.070 75',
-		300: '0.850 0.095 75', 400: '0.790 0.110 75', 500: '0.720 0.120 75',
-		600: '0.640 0.110 75', 700: '0.560 0.095 75', 800: '0.470 0.080 75',
-		900: '0.380 0.065 75', 950: '0.300 0.050 75'
-	}
-}
-
 /**
  * Build the chart config section from user prompt answers.
  * @param {{ chartColors: string, chartShades: string }} opts
@@ -227,20 +231,10 @@ export function generateChartConfig({ chartColors, chartShades }) {
  * function rather than being rebuilt per call alongside the user's answers.
  */
 const ZEN_SUMI_BASE = {
-	palettes: ZEN_SUMI_PALETTES,
+	palettes: zenSumi.palettes,
 	colorSpace: 'oklch',
 	tokens: 'core',
-	skin: {
-		surface: { light: 'kami', dark: 'sumi' },
-		ink: { light: 'kami', dark: 'sumi' },
-		primary: 'shu',
-		accent: 'shu',
-		success: 'hisui',
-		warning: 'kohaku',
-		danger: 'shu',
-		error: 'shu',
-		info: 'kohaku'
-	},
+	skin: zenSumi.skin,
 	shape: { radius: 'soft' },
 	typography: {
 		display: "'Fraunces', 'Iowan Old Style', Georgia, serif",