diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml index aeebc4d..b73f645 100644 --- a/.github/workflows/publish.yml +++ b/.github/workflows/publish.yml @@ -32,7 +32,7 @@ jobs: fi # guard: the plugin manifests ride the same version (the skill drives this CLI). - run: pnpm plugin:version --check - - run: pnpm --filter tonex build - - run: pnpm --filter tonex publish --no-git-checks --access public + - run: pnpm --filter @tonex-dev/cli build + - run: pnpm --filter @tonex-dev/cli publish --no-git-checks --access public env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/README.md b/README.md index e344c33..90fd6d9 100644 --- a/README.md +++ b/README.md @@ -21,10 +21,10 @@ The full editor lives at **[tonex.dev](https://tonex.dev/)**. Pick a seed, tune ## Agent-first CLI ```bash -npx tonex@latest generate --seed "#6750a4" +npx @tonex-dev/cli@latest generate --seed "#6750a4" ``` -Point an agent at `npx tonex@latest describe` first. It prints every command and flag the CLI exposes, so the agent can build a palette from a plain description without memorized syntax. Run `npx tonex@latest --help` for the same list by hand, or read the [full CLI docs](https://tonex.dev/docs/cli/introduction). +Point an agent at `npx @tonex-dev/cli@latest describe` first. It prints every command and flag the CLI exposes, so the agent can build a palette from a plain description without memorized syntax. Run `npx @tonex-dev/cli@latest --help` for the same list by hand, or read the [full CLI docs](https://tonex.dev/docs/cli/introduction). ### Use it with a skill @@ -37,7 +37,7 @@ npx skills add patrick-xin/tonex ### Run it manually ```bash -npx tonex@latest generate --seed "#6A9CFF" --to shadcn --format hex +npx @tonex-dev/cli@latest generate --seed "#6A9CFF" --to shadcn --format hex ``` See the available [commands](https://tonex.dev/docs/cli/commands). diff --git a/apps/www/content/docs/agent-skills/installation.mdx b/apps/www/content/docs/agent-skills/installation.mdx index c60b800..a4db589 100644 --- a/apps/www/content/docs/agent-skills/installation.mdx +++ b/apps/www/content/docs/agent-skills/installation.mdx @@ -13,7 +13,7 @@ The skill does not replace the CLI. It tells the agent how to call Tonex, when t ## How the agent runs Tonex -The skill tells the agent to check whether `tonex` is installed globally. If it is, the agent can run `tonex ...`. If not, it should run the published package with `npx tonex@latest ...`. +The skill tells the agent to check whether `tonex` is installed globally. If it is, the agent can run `tonex ...`. If not, it should run the published package with `npx @tonex-dev/cli@latest ...`. That keeps examples readable while still working in a fresh environment. @@ -62,4 +62,4 @@ It can also load npm plugins listed in `opencode.json`: } ``` -Tonex does not require an OpenCode plugin to use the CLI. Use the Tonex skill when your agent supports skills; otherwise, tell the agent to run `npx tonex@latest ...` directly. +Tonex does not require an OpenCode plugin to use the CLI. Use the Tonex skill when your agent supports skills; otherwise, tell the agent to run `npx @tonex-dev/cli@latest ...` directly. diff --git a/apps/www/content/docs/agent-skills/introduction.mdx b/apps/www/content/docs/agent-skills/introduction.mdx index a8145b9..4818e4e 100644 --- a/apps/www/content/docs/agent-skills/introduction.mdx +++ b/apps/www/content/docs/agent-skills/introduction.mdx @@ -47,7 +47,7 @@ A good agent flow looks like this: Use Tonex to generate a light-mode hex palette from the brand seed. Email clients need conservative color output, so prefer `--format hex`. ```bash - npx tonex@latest generate --seed "#7a517b" --to colors --format hex + npx @tonex-dev/cli@latest generate --seed "#7a517b" --to colors --format hex ``` @@ -57,7 +57,7 @@ A good agent flow looks like this: Verify the pairs the email actually uses: `on-primary` on `primary` for the button, `on-surface` on `surface` for body copy, `on-surface-variant` on `surface` for muted footer text, and `primary` on `surface` for links. ```bash - npx tonex@latest check --seed "#7a517b" --mode light \ + npx @tonex-dev/cli@latest check --seed "#7a517b" --mode light \ --pairs '[["on-surface","surface"],["on-surface-variant","surface"],["on-primary","primary"],["primary","surface"]]' ``` diff --git a/apps/www/content/docs/cli/commands.mdx b/apps/www/content/docs/cli/commands.mdx index 078babb..bb960aa 100644 --- a/apps/www/content/docs/cli/commands.mdx +++ b/apps/www/content/docs/cli/commands.mdx @@ -6,7 +6,7 @@ description: generate, check, adjust, and describe — the full command surface. Tonex is a subcommand CLI: ```bash -npx tonex [options] +npx @tonex-dev/cli [options] ``` The commands are `generate`, `check`, `adjust`, and `describe`. Flags use the `--flag value` form, or `--flag=value`, rather than `key=value`. Unknown flags are usage errors. Run `tonex --help` for the same reference in your terminal, or `tonex describe` for it as JSON. @@ -16,7 +16,7 @@ The commands are `generate`, `check`, `adjust`, and `describe`. Flags use the `- Derive a theme from a seed and print it. ```bash -npx tonex generate --seed "#6A9CFF" [options] > globals.css +npx @tonex-dev/cli generate --seed "#6A9CFF" [options] > globals.css ``` ### Seed @@ -69,12 +69,12 @@ These opt-in emissions cover the parts of a theme the engine doesn't derive on i | `--chart-palette` | none | `single`, `multi`, or `polychrome`. Picks the chart series and emits it (implies `--with-chart`). | ```bash -npx tonex generate --seed "#6A9CFF" > globals.css -npx tonex generate --seed "#6A9CFF" --variant expressive --desaturate 0.5 -npx tonex generate --seed "#6A9CFF" --with-brand --chart-palette polychrome -npx tonex generate --seed "#6A9CFF" --to colors -npx tonex generate --seed "#6A9CFF" --to yaml --mode dark -npx tonex generate --seed "#6A9CFF" --to json --format hex +npx @tonex-dev/cli generate --seed "#6A9CFF" > globals.css +npx @tonex-dev/cli generate --seed "#6A9CFF" --variant expressive --desaturate 0.5 +npx @tonex-dev/cli generate --seed "#6A9CFF" --with-brand --chart-palette polychrome +npx @tonex-dev/cli generate --seed "#6A9CFF" --to colors +npx @tonex-dev/cli generate --seed "#6A9CFF" --to yaml --mode dark +npx @tonex-dev/cli generate --seed "#6A9CFF" --to json --format hex ``` Delivered projections carry their own recipe so a later agent can reproduce them. `shadcn` and `yaml` emit a leading command comment; `json` embeds the command in its description. `colors` emits structured recipe metadata because it is usually a transient read target. For the full `--to colors` → map by intent → `check --pairs` workflow, see [Mapping to Other Tools](/docs/cli/other-tools). @@ -84,11 +84,11 @@ Delivered projections carry their own recipe so a later agent can reproduce them Audit WCAG contrast. Exit `0` clears the level; exit `1` means a text pair fails. Add `--json` to any form for machine-readable output, `--aaa` to raise the bar from AA to AAA, and `--large` on ad-hoc pair checks to use large-text thresholds. ```bash -npx tonex check --seed "#6A9CFF" [--variant ] [--contrast <0..1>] [--mode light|dark] [--aaa] [--json] -npx tonex check --seed "#6A9CFF" --find-contrast [--variant ] [--mode light|dark] [--aaa] [--json] -npx tonex check "#1a1a1a" "#ffffff" [--aaa] [--large] [--json] -npx tonex check --pairs '[["#1a1a1a","#ffffff"],["#888","#fff"]]' [--aaa] [--large] [--json] -npx tonex check --seed "#6A9CFF" --pairs '[["--color-on-surface","--color-surface"]]' [--variant ] [--mode light|dark] [--aaa] [--json] +npx @tonex-dev/cli check --seed "#6A9CFF" [--variant ] [--contrast <0..1>] [--mode light|dark] [--aaa] [--json] +npx @tonex-dev/cli check --seed "#6A9CFF" --find-contrast [--variant ] [--mode light|dark] [--aaa] [--json] +npx @tonex-dev/cli check "#1a1a1a" "#ffffff" [--aaa] [--large] [--json] +npx @tonex-dev/cli check --pairs '[["#1a1a1a","#ffffff"],["#888","#fff"]]' [--aaa] [--large] [--json] +npx @tonex-dev/cli check --seed "#6A9CFF" --pairs '[["--color-on-surface","--color-surface"]]' [--variant ] [--mode light|dark] [--aaa] [--json] ``` Example verdicts: @@ -119,7 +119,7 @@ Use the `--color-` prefix for token-name checks and adjustments. Shift named tokens by a relative HCT delta and print before/after facts plus the gamut-clamped achieved delta. Exit `0` on a clean shift, `2` on a bad token name or malformed `--shifts`. It never gates contrast — run `check` for that. ```bash -npx tonex adjust --seed "#6A9CFF" \ +npx @tonex-dev/cli adjust --seed "#6A9CFF" \ --shifts '[{"mode":"light","token":"--color-surface","dTone":-4,"dChroma":2}]' [--json] ``` @@ -136,7 +136,7 @@ light --color-surface oklch(…) → oklch(…) req t-4 c+2 got t-3.9 c+2.1 Print the machine-readable surface — every command and flag from the same specs the parser validates against, the contrast verdict policy and thresholds, and the exit-code taxonomy. ```bash -npx tonex describe +npx @tonex-dev/cli describe ``` Top-level JSON keys include `tool`, `exitCodes`, `commands`, `contrast`, `variants`, `targets`, and `bindings`. diff --git a/apps/www/content/docs/cli/installation.mdx b/apps/www/content/docs/cli/installation.mdx index 7617097..7a94a3b 100644 --- a/apps/www/content/docs/cli/installation.mdx +++ b/apps/www/content/docs/cli/installation.mdx @@ -6,7 +6,7 @@ description: Run Tonex with npx, install it globally, or add the agent skill. You usually do not need to install Tonex. Run the published package directly with `npx`: ```bash -npx tonex@latest generate --seed "#6A9CFF" > globals.css +npx @tonex-dev/cli@latest generate --seed "#6A9CFF" > globals.css ``` Use this form for one-off generation, CI scripts, and agent runs. It always resolves the npm package, runs the command, and exits without adding a project dependency. @@ -16,10 +16,10 @@ Use this form for one-off generation, CI scripts, and agent runs. It always reso If you use Tonex often, install it globally for the shorter command. ```package-install -npm i -g tonex +npm i -g @tonex-dev/cli ``` -Then run the same commands without `npx tonex@latest`: +Then run the same commands without `npx @tonex-dev/cli@latest`: ```bash tonex generate --seed "#6A9CFF" > globals.css @@ -31,16 +31,16 @@ tonex check --seed "#6A9CFF" Use `--help` for human-readable usage: ```bash -npx tonex@latest --help +npx @tonex-dev/cli@latest --help ``` Use `describe` when an agent or script needs the machine-readable contract: ```bash -npx tonex@latest describe +npx @tonex-dev/cli@latest describe ``` -If you installed globally, replace `npx tonex@latest` with `tonex`. +If you installed globally, replace `npx @tonex-dev/cli@latest` with `tonex`. ## Agent skill diff --git a/apps/www/content/docs/cli/introduction.mdx b/apps/www/content/docs/cli/introduction.mdx index ce3a0c1..974e145 100644 --- a/apps/www/content/docs/cli/introduction.mdx +++ b/apps/www/content/docs/cli/introduction.mdx @@ -6,7 +6,7 @@ description: Generate, check, and hand off Tonex color systems from the terminal The CLI is the terminal surface for Tonex. It runs the same engine as the web app, but in a form that fits scripts, CI, and agents: input a seed, print a deterministic artifact, then verify the pairings that matter. ```bash -npx tonex@latest generate --seed "#6A9CFF" > globals.css +npx @tonex-dev/cli@latest generate --seed "#6A9CFF" > globals.css ``` That command gives you a role-mapped color system from one seed. The output target can be shadcn CSS, Material JSON, a DESIGN.md color block, or the raw Tonex role set for an agent to map into another tool. @@ -41,5 +41,5 @@ That separation matters: a contrast failure means the colors need a remedy; a us | `adjust` | Shift named tokens by relative HCT tone/chroma deltas. | | `describe` | Print the machine-readable CLI surface. | -Run `npx tonex@latest --help` for human-readable usage, or `npx tonex@latest describe` for the machine-readable contract. +Run `npx @tonex-dev/cli@latest --help` for human-readable usage, or `npx @tonex-dev/cli@latest describe` for the machine-readable contract. diff --git a/apps/www/content/docs/cli/other-tools.mdx b/apps/www/content/docs/cli/other-tools.mdx index 7ee778e..5c4d89d 100644 --- a/apps/www/content/docs/cli/other-tools.mdx +++ b/apps/www/content/docs/cli/other-tools.mdx @@ -13,8 +13,8 @@ Tonex exports `shadcn` and `json` natively. For every other tool, use Tonex as t | `--to yaml` | The target tool can consume a DESIGN.md `colors:` block, or you want a portable semantic contract. | ```bash -npx tonex generate --seed "#6A9CFF" --to colors -npx tonex generate --seed "#6A9CFF" --to yaml +npx @tonex-dev/cli generate --seed "#6A9CFF" --to colors +npx @tonex-dev/cli generate --seed "#6A9CFF" --to yaml ``` ## Map by intent @@ -28,7 +28,7 @@ For example, another tool might call its main action color `brand`, `accent`, or After mapping, check the pairs the target UI will actually render: ```bash -npx tonex check --seed "#6A9CFF" --pairs '[["--color-on-surface","--color-surface"]]' +npx @tonex-dev/cli check --seed "#6A9CFF" --pairs '[["--color-on-surface","--color-surface"]]' ``` Token-name pairs use the CSS variable form with a `--color-` prefix: diff --git a/apps/www/content/docs/cli/targets-formats.mdx b/apps/www/content/docs/cli/targets-formats.mdx index 0d10f79..845ba8d 100644 --- a/apps/www/content/docs/cli/targets-formats.mdx +++ b/apps/www/content/docs/cli/targets-formats.mdx @@ -19,10 +19,10 @@ description: Two independent choices on generate — which document to emit, and `colors`, `shadcn`, and `json` co-emit both light and dark. `yaml` alone reads `--mode` to pick which projection to emit. The default mode is `light`. ```bash -npx tonex generate --seed "#6A9CFF" --to colors -npx tonex generate --seed "#6A9CFF" --to shadcn --format hex -npx tonex generate --seed "#6A9CFF" --to yaml --mode dark -npx tonex generate --seed "#6A9CFF" --to json +npx @tonex-dev/cli generate --seed "#6A9CFF" --to colors +npx @tonex-dev/cli generate --seed "#6A9CFF" --to shadcn --format hex +npx @tonex-dev/cli generate --seed "#6A9CFF" --to yaml --mode dark +npx @tonex-dev/cli generate --seed "#6A9CFF" --to json ``` ## Format diff --git a/apps/www/content/docs/quickstart.mdx b/apps/www/content/docs/quickstart.mdx index f1c787e..8053f18 100644 --- a/apps/www/content/docs/quickstart.mdx +++ b/apps/www/content/docs/quickstart.mdx @@ -12,13 +12,13 @@ import { PanelsTopLeftIcon, SquareTerminalIcon, BotIcon } from "lucide-react"; `generate` derives a theme from a seed and prints it. No install, no config, no account — just `npx`: ```bash -npx tonex generate --seed "#6A9CFF" +npx @tonex-dev/cli generate --seed "#6A9CFF" ``` The same seed and flags produce the same output every time — no agent, no network call. Change the palette's character without touching the seed by adding knobs: ```bash -npx tonex generate --seed "#6A9CFF" --variant expressive --desaturate 0.5 +npx @tonex-dev/cli generate --seed "#6A9CFF" --variant expressive --desaturate 0.5 ``` Pick your output with `--to`. See [Commands](/docs/cli/commands) for the full flag list and [Targets & formats](/docs/cli/targets-formats) for every target. @@ -28,7 +28,7 @@ Pick your output with `--to`. See [Commands](/docs/cli/commands) for the full fl The default target. Writes a paste-ready `:root`/`.dark` block — both light and dark modes — straight to your stylesheet: ```bash -npx tonex generate --seed "#6A9CFF" > globals.css +npx @tonex-dev/cli generate --seed "#6A9CFF" > globals.css ``` Paste it into a shadcn (Tailwind) project and the theme is live. @@ -38,7 +38,7 @@ Paste it into a shadcn (Tailwind) project and the theme is live. A single-mode [DESIGN.md](https://github.com/google-labs-code/design.md) `colors:` block — the semantic contract an agent maps into any tool that isn't shadcn: ```bash -npx tonex generate --seed "#6A9CFF" --to yaml --mode dark +npx @tonex-dev/cli generate --seed "#6A9CFF" --to yaml --mode dark ``` ### Material Theme JSON @@ -46,7 +46,7 @@ npx tonex generate --seed "#6A9CFF" --to yaml --mode dark A Material Theme export, with colors encoded as hex: ```bash -npx tonex generate --seed "#6A9CFF" --to json --format hex +npx @tonex-dev/cli generate --seed "#6A9CFF" --to json --format hex ``` ## From the web app diff --git a/packages/cli/README.md b/packages/cli/README.md index 6079fca..997b754 100644 --- a/packages/cli/README.md +++ b/packages/cli/README.md @@ -10,9 +10,11 @@ real contrast check. Stop hand-picking hex. ## Install ```bash -npm i -g tonex +npm i -g @tonex-dev/cli +# the global command is `tonex`: +tonex describe # or run without installing: -npx tonex describe +npx @tonex-dev/cli describe ``` ## Commands diff --git a/packages/cli/package.json b/packages/cli/package.json index deb3a68..4661dc7 100644 --- a/packages/cli/package.json +++ b/packages/cli/package.json @@ -1,5 +1,5 @@ { - "name": "tonex", + "name": "@tonex-dev/cli", "version": "0.1.0", "description": "Turn a brand seed color into a complete light+dark theme with guaranteed WCAG contrast — shadcn, design.md, Material, or JSON — via Google's Material Color Utilities. Stop hand-picking hex.", "keywords": [ diff --git a/skills/tonex/SKILL.md b/skills/tonex/SKILL.md index 32a363a..b4acd35 100644 --- a/skills/tonex/SKILL.md +++ b/skills/tonex/SKILL.md @@ -9,7 +9,7 @@ Builds a complete color system from source colors using Google's Material Color Tonex provides a safety net; you're still the painter. It derives roles, but it does not decide every binding — how those roles land on the target's slots. For common targets (shadcn, design.md, Material JSON), binding is pre-baked as a `--to` convenience. For anything else, map roles→slots yourself and verify each asserted pairing with `check --pairs`. -Before running Tonex, choose the command prefix once: if `command -v tonex` succeeds, use `tonex ...`; otherwise use `npx tonex@latest ...`. Examples below use the short `tonex ...` form. +Before running Tonex, choose the command prefix once: if `command -v tonex` succeeds, use `tonex ...`; otherwise use `npx @tonex-dev/cli@latest ...`. Examples below use the short `tonex ...` form. `tonex describe` is the live contract. If these docs disagree with the CLI about flags, variants, thresholds, or exit codes, trust `tonex describe`.