Add Kilo design tokens and playground#1
Merged
Conversation
Re-author tokens.json as the shared contract: hand-authored flat HEX (ADR 0003), primary === brand === #EDFF00 with near-black foreground (ADR 0005), split into mode-agnostic brand/status and dark-only surface/foreground/border buckets with no light-mode set (ADR 0009), plus status domain map, type scale, spacing, radius, and shadows. Add a Next.js playground (playground/) to tailor the tokens live: an exhaustive control rail for every token leaf, an in-context dark stickersheet gallery, a collapsible JSON preview panel, OKLCH preview via culori, and a local-dev-only API route that writes edits back to the canonical tokens.json.
- Rework the playground shell: semantic status pill, save loading state, reload-source guard for unsaved edits, grouped pane toggles, and responsive overlay drawers with full hover/focus/reduced-motion states. - Add a token filter to the left rail with label associations and an empty state for faster token editing. - Wrap the JSON preview to avoid horizontal scroll; copy lives in the pane. - Build into .next-build so a smoke build never clobbers a running dev server. - Remove the $comment documentation keys from tokens.json (values unchanged).
- Add sticky scrollspy section nav to the gallery (Foundations / Components groups with granular jump items) so sections are reachable without one long scroll. - Remove shadow tokens from tokens.json and all playground consumers (type, flatten, controls group, gallery section, CSS); replace dead --shadow-overlay var refs with literal values. - Fix brand.primary drift (#e0e0e0 -> #EDFF00) per ADR 0005 (primary === brand === neon yellow-green). - Make swatch labels wrap instead of clipping; commit inline hex edits only on valid hex (blur/Enter), fixing janky live editing.
…r shortcuts - Move color swatches into the left controls rail (compact, borderless, 2px radius) - Convert gallery to independent tabs instead of one scrollspy page - Add realistic mockups: settings form (all input types), mini editor, bigger inline diff, chat with tool-call cards — modeled on kilo-cloud/kilo-code - Replace marketing-style type scale with a devtools-grounded one: drop display, rename h1/h2/h3 to title/heading/subheading, add bodySmall/caption/micro/codeSmall - Restyle active tab as an underline instead of a brand-primary pill - Add Cmd+. (Ctrl+.) to toggle both side panels together - Remove primaryDim; refresh stale brand fallbacks to the #F7F586 scale
…ckups - Surfaces: add inset (sunken) + selected, rename muted->hover, drop secondary/control fills; even out hover (#3A3A3A) vs selected (#454545) - Add live Surfaces tab specimen (ramp + mini app) driven by surface tokens - Type scale: chat/editor/diff/tool code unified on the code role; chat prose and empty-state on body; bodyLg kept as the 1rem anchor (unused in examples) - Homogenize editor/diff/chat: borderless, separated by surface value only - Borderless cards/forms/inputs; swatches in left rail; tabs full-width - Sweep stale var() fallbacks (radius-sm, eyebrow, surface) to current values - Wire Agentation toolbar (dev-only)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
tokens.jsonfor the current dark-first Kilo design token contract.Validation
node -e 'JSON.parse(require("fs").readFileSync("tokens.json","utf8")); console.log("json ok")'pnpm build && npx tsc --noEmitfromplayground/