Token Editor

Overview

The Token Editor is the main workspace in YuBild. It consists of a left sidebar where you configure your design tokens and a main preview area where you see the result applied to real components. The editor is split into 10 token categories organized into two groups:

• Core Tokens (5): Colors, Typography, Layout (Border Radius), Spacing, Shadows
• Advanced Tokens (5): Borders, Effects, Motion, Focus & Accessibility, Z-Index

Each category has its own dedicated editor panel with controls tailored to that token type — color pickers for colors, font dropdowns for typography, preset sliders for spacing, etc.

Sidebar Navigation

The sidebar displays all token categories with color-coded icons. Here's how to use it effectively:

Search & Filter

At the top of the sidebar, there's a search bar. Type to filter categories instantly:

• Type font → shows Typography
• Type radius → shows Layout (Border Radius)
• Type blur → shows Effects
• Type ring → shows Focus & Accessibility

The search matches against category names, descriptions, and IDs. When no results match, an empty state message appears. Clear the search with the X button or by deleting the text.

Collapsible Sidebar

Click the Collapse button at the bottom of the sidebar to minimize it to icon-only mode (64px wide). In collapsed mode:

• Category icons are still visible and clickable
• Hover over any icon to see a tooltip with the category name and description
• A colored dot appears next to the active category
• The search bar is hidden (expand the sidebar to search)

This is useful when you need maximum preview space, especially on smaller screens.

Category Selection

Click a category to open its editor panel. Click it again to deselect and return to the category list. The active category shows a colored left border andhighlighted background matching that category's accent color:

• Colors → Emerald
• Typography → Indigo
• Layout → Violet
• Spacing → Pink
• Shadows → Amber

Editing Tokens in Detail

Colors

The color editor lets you set 9 semantic colors that form your palette:

• Primary — Your main brand color. Used for CTAs, active states, links, and primary actions.
• Secondary — Supporting color. Used for secondary buttons, tags, and less-prominent UI.
• Accent — Decorative highlights. Used for badges, indicators, and visual emphasis.
• Destructive — Danger and error states. Used for delete buttons, error messages, and warnings.
• Background — Main surface color. Usually white in light mode, dark gray in dark mode.
• Foreground — Primary text color. High contrast against background.
• Muted — Subtle background. Used for card backgrounds, secondary surfaces, disabled states.
• Border — Default border color for inputs, cards, dividers.
• Ring — Focus ring color for keyboard navigation highlighting.

For each color, you can use the color picker (click the swatch) or type ahex value directly. When you set a color, YuBild automatically generates a full50-950 shade scale with 11 steps and calculates accessible contrast colors for each shade.

Typography

Typography controls are split into several sub-sections:

• Font Families — Three font slots: Heading (for h1-h6), Body (for paragraphs and UI text), and Monospace (for code blocks). Select from Google Fonts with a searchable dropdown.
• Font Sizes — A type scale from xs (12px) to 6xl (60px). Each step is editable. The scale determines how text sizes across your entire system.
• Line Heights — Per-size line height values. Tighter for headings (1.1-1.3), more relaxed for body text (1.5-1.75).
• Letter Spacing — Tracking adjustments per size. Negative for large headings (-0.025em), slightly positive for small text (0.025em).
• Font Weights — Named weight levels: regular (400), medium (500), semibold (600), bold (700), extrabold (800). Some libraries use all of these.

Spacing

Instead of editing individual spacing values, you select a density preset:

• Compact — Base unit 3px. Best for data-dense interfaces like admin dashboards, tables, and toolbars.
• Normal — Base unit 4px (default). Balanced for most applications.
• Relaxed — Base unit 5px. More breathing room for content-heavy sites and marketing pages.
• Spacious — Base unit 6px. Maximum whitespace for editorial, portfolio, and luxury brand sites.

Each preset generates a complete scale: 0, 0.5, 1 through24, plus 32, 40, 48, 56, 64,72, 80, 96. For example, with "Normal" (4px base),spacing-4 = 16px, spacing-8 = 32px.

Other Token Editors

The remaining categories use similar preset-based controls:

• Shadows — 4 intensity presets (none/subtle/medium/strong), each generating 6 shadow levels from sm to 2xl.
• Border Radius — 7 presets from none (0px) through sm, md, lg, xl, 2xl to full (9999px).
• Borders — Width presets: thin (1px), normal (1.5px), thick (2px), heavy (3px).
• Effects — Blur intensity (none to strong), plus 3 opacity sliders for disabled (0-100%), hover (0-100%), and backdrop (0-100%).
• Motion — Speed presets (instant/fast/normal/relaxed/slow) and easing curves (ease/ease-in/ease-out/ease-in-out/linear/spring).
• Focus — Ring width (1-4px) and ring offset (0-4px). These control the focus outline visible during keyboard navigation.
• Z-Index — 3 scale presets (flat/normal/elevated) defining named layers: base, dropdown, sticky, overlay, modal, popover, toast, tooltip.

Undo / Redo System

The token editor keeps a history stack of up to 50 states. Every token change (color pick, preset selection, font change, etc.) pushes the previous state onto the stack.

• Ctrl+Z (Cmd+Z on Mac) — Undo the last change. The config reverts to the previous state.
• Ctrl+Shift+Z or Ctrl+Y — Redo. Re-applies the undone change.
• Toolbar buttons — The undo/redo buttons in the editor toolbar show the current state. They're grayed out when there's nothing to undo/redo.

How Undo Works Internally

The system uses a dual-stack pattern (history + future). When you make a change:

1. The current config is pushed onto the _history array
2. The _future array is cleared (you can't redo after making a new change)
3. The new config is applied

When you undo: the last history state becomes the current config, and the old current goes to _future. When you redo: the first future state becomes current, and the old current goes back to _history.

Preview Modes

Components Mode

The default mode. Shows real, interactive UI components from your selected library with your tokens applied via CSS variable injection. Available component demos include:

• Buttons — All variants (filled, outlined, text, elevated, tonal), all sizes (sm/md/lg), all colors (primary/secondary/error), with icons, disabled states, FABs, and icon buttons.
• Cards — Content cards, media cards, action cards with headers and footers.
• Forms & Inputs — Text fields, selects, checkboxes, radio buttons, with validation states.
• Data Display — Tables with sorting, badges, avatars, skeleton loaders.
• Feedback — Alerts (info/success/warning/error), toasts, progress indicators.
• Navigation — Tabs, breadcrumbs, menus, sidebars.
• Overlays — Dialogs, popovers, tooltips, drawers.
• Toggle & Switch — Switch toggles, toggle buttons, segmented controls.
• Accordion — Expandable sections with smooth animation.
• Scroll Area — Custom scrollbars following your theme.
• Command Palette — Search-driven command interface.
• Motion — Animation demos showing your transition speed and easing.
• Typography — Full type specimen with your heading, body, and mono fonts at all sizes.
• Charts — Data visualization using your color palette.

Design Mode

A visual overview canvas that lays out your entire design system for review:

• Color palette swatches with hex values and contrast info
• Typography specimens showing all heading levels and body text
• Spacing visualization with the full scale
• Shadow level comparison
• Border radius showcase
• Component examples in a clean grid layout

This mode is ideal for design review sessions — share the screen with designers or stakeholders to get feedback on the visual system.

Code Mode (Code Lab)

Opens the full Code Lab experience with multi-file tabs, syntax highlighting, scroll sync, and diff highlighting. See the dedicated Code Lab documentation for details.

Toolbar

The editor toolbar at the top of the page provides quick access to common actions:

• Undo / Redo buttons — Visual indicators of history state. Grayed out when unavailable.
• Save (Ctrl+S) — Persists your token configuration to the database.
• Reset — Resets all tokens to their default values. This clears undo history.
• Export — Opens the export dialog for downloading output files.
• Mode toggle — Animated segmented control to switch between Components, Design, and Code modes.
• Viewport controls — Desktop, tablet, and mobile viewport presets.
• Zoom — Scale the preview from 50% to 150%.

Responsive Testing

Use the viewport buttons in the toolbar to test your design system at different breakpoints:

• Desktop — Full width (default)
• Tablet — 768px width with a device frame
• Mobile — 375px width with a device frame

Combined with the zoom control (50%-150%), you can simulate virtually any screen size and density to ensure your tokens work across all devices.

Saving & Persistence

Your tokens are stored in two places:

1. Local storage — Zustand persists the token config to localStorage automatically. This means your changes survive page refreshes, even before saving.
2. Database — When you press Ctrl+S or click Save, the config is synced to the server. This makes it accessible from any device and persists across browser sessions.

The toolbar shows a dirty indicator when you have unsaved changes (tokens modified since the last save).