spectrum-tk

Early alpha. This project is in an exploratory phase — APIs, file layout, and styling are all subject to change without notice. Expect rough edges and missing widgets.

A Ttk theme for Tcl/Tk that follows Adobe's Spectrum 2 design system.

Spectrum 2, not Spectrum 1. spectrum-tk targets the current Spectrum 2 (S2) era exclusively. Token values, component prop surfaces, and visual specs come from S2 sources — spectrum-css/components/<name>/themes/spectrum-two.css, the spectrum-design-data token JSON, and docs/s2-docs/. The legacy Spectrum 1 layer (themes/spectrum.css, @react-spectrum/v3) is not a reference.

The theme consumes Adobe's design tokens (vendored as a git submodule from spectrum-design-data) and converts them into Tcl variables that drive a Ttk theme implementation. It targets Tcl/Tk 9.x, which provides built-in SVG support — useful for Spectrum's icon and illustration set.

Repository Layout

File / directory	Purpose
spectrum.tcl	Theme entry point. Defines fonts, dark-mode detection, and Ttk styles.
spectrum-vars.tcl	Generated variable definitions (colors, layout, typography). Do not edit by hand.
gen-spectrum-vars.tcl	Reads Adobe's JSON tokens from spectrum-design-data/ and emits spectrum-vars.tcl.
pkgIndex.tcl	Standard Tcl package index.
spectrum-design-data/	Submodule. Tokens, component schemas, design-data spec, design guidelines.
spectrum-css/	Submodule. Adobe's CSS reference implementation.
spectrum-css-workflow-icons/	Submodule. Workflow icon SVGs and Lit wrappers.

Requirements

• Tcl/Tk 9.x
• git with submodule support (only required if you intend to regenerate tokens or icons)

Cloning

git clone https://github.com/tclmonster/spectrum-tk.git
cd spectrum-tk
git submodule update --init --recursive   # only needed to (re)generate tokens or icons

If you only intend to consume spectrum-tk via package require spectrum, the submodules are unnecessary — the generated spectrum-vars.tcl is checked in.

Usage

lappend auto_path /path/to/spectrum-tk
package require spectrum
spectrum::theme use

Spectrum 2 docs MCP server (recommended for AI assistants)

spectrum-design-data ships an MCP server that exposes the hand-written Spectrum 2 design guidelines (component anatomy, states, behaviors, usage) to AI tools. It is the preferred entry point for component-level questions when working with Claude or another MCP-aware assistant — see spectrum-design-data/docs/s2-docs/README.md.

To install and register it with Claude Code:

pushd spectrum-design-data/tools/s2-docs-mcp
npm install
popd
claude mcp add s2-docs -- node "$(pwd)"/spectrum-design-data/tools/s2-docs-mcp/src/cli.js

The server provides list-s2-components, get-s2-component, search-s2-docs, find-s2-component-by-use-case, and get-s2-stats.

Regenerating spectrum-vars.tcl

The generated file is checked in, so you only need this when bumping the upstream design tokens.

git submodule update --remote --merge spectrum-design-data
tclsh gen-spectrum-vars.tcl       # any Tcl 9.x interpreter with the tjson package

A portable Tcl 9.x shell (no Tk, no event loop) is convenient for running the generator. Prebuilt tclkitsh binaries are available here:

• Windows (x86_64)
• macOS (arm64)
• Linux (x86_64)

./tclkitsh-9.0.3-<platform> gen-spectrum-vars.tcl > spectrum-vars.tcl

License

BSD-3-Clause — see LICENSE.

The bundled Adobe Spectrum design tokens are licensed under Apache-2.0; see the generated header in spectrum-vars.tcl for attribution.