Code Lab

Overview

Code Lab is YuBild's integrated code viewer. It shows you the exact theme code that will be generated from your design tokens, with full syntax highlighting, navigation, and copy functionality. Access it by switching to Code mode in the preview area.

Code Lab is not just a passive viewer — it's designed to help you understand the generated code and integrate it into your project efficiently.

Multi-File Tab System

Code Lab presents generated code as multiple files in tabs across the top of the editor. Every project generates 4 files:

1. Theme File (Library-Specific)

The primary output — the theme file your UI library expects. The file name and format vary:

This file contains all token sections: colors, typography, spacing, shadows, borders, motion, effects, focus, z-index, and (where applicable) component overrides and dark theme variant.

2. design-tokens.css

Universal CSS custom properties. This file works with any framework or even plain HTML. It defines all your tokens as :root variables:

:root {
  --color-primary: #0D7C66;
  --color-primary-foreground: #ffffff;
  --color-secondary: #6366f1;
  --font-heading: 'Inter', sans-serif;
  --font-body: 'Inter', sans-serif;
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  --radius-base: 0.5rem;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --transition-duration: 200ms;
  --transition-easing: ease-in-out;
  --z-modal: 500;
  /* ...60+ variables total */
}

3. tailwind.config.ts

A Tailwind CSS theme extension ready to drop into your project. Maps your tokens to Tailwind's utility class system:

import type { Config } from "tailwindcss";

const config: Config = {
  theme: {
    extend: {
      colors: {
        primary: { DEFAULT: "#0D7C66", "50": "#f0fdf8", ... },
        secondary: { DEFAULT: "#6366f1", ... },
        destructive: { DEFAULT: "#ef4444", ... },
      },
      fontFamily: {
        sans: ["Inter", "sans-serif"],
        heading: ["Inter", "sans-serif"],
        mono: ["JetBrains Mono", "monospace"],
      },
      borderRadius: { base: "0.5rem" },
      transitionDuration: { DEFAULT: "200ms" },
      zIndex: { modal: "500", tooltip: "9999" },
    },
  },
};

4. Framework Integration File

A framework-specific integration file for runtime token access:

• React: ThemeProvider.tsx — Context provider + useDesignTokens() hook
• Vue: YubildTheme.vue — Component wrapper + useDesignTokens() composable
• Angular: design-token.service.ts — Injectable service + _yubild-tokens.scss SCSS file

These let you access token values programmatically in your components (e.g., for dynamic styling, conditional theming, or passing values to third-party libraries that don't use CSS variables).

Sidebar Navigation Sync

The left sidebar in Code Lab mirrors the token categories from the editor. When viewing the main theme file tab:

1. Click any category (e.g., "Colors", "Typography", "Spacing")
2. Code Lab switches to the Full Config view (if not already)
3. The Monaco editor scrolls directly to that section in the code
4. The target lines are highlighted in blue for 1.5 seconds so you can spot them

This is especially useful for large theme files. For example, the Angular Material theme generates 300+ lines of SCSS. Instead of manually scrolling to find the shadow variables, just click "Shadows" in the sidebar and you're there.

How Scroll Sync Works

Code Lab parses the generated code for section comment markers (e.g., // ── Color Palettesor /* Shadows */) and builds a line-number map for each category. When you click a category, it calls Monaco's revealLineInCenter() to scroll there, then applies temporary decorations for the flash highlight.

Diff Highlighting

When you change a token value in the editor, Code Lab detects the change and highlights the affected lines in the generated code:

• Green background on modified lines
• Green dot in the gutter margin
• Highlights auto-clear after 3 seconds to keep the view clean

This gives you immediate visual feedback: "I changed the primary color, and here's exactly what changed in the generated SCSS."

Interactive Setup Guide

Click Setup Guide in the sidebar to open an interactive step-by-step walkthrough for integrating the generated theme into your project.

Features of the Setup Guide

• Numbered steps with clear instructions tailored to your library and framework
• Code blocks per step with a dedicated Copy button
• Progress tracking — Steps turn green when you copy their code, showing a checkmark
• Completion counter — "3/5 completed" header showing your progress
• Success banner when all steps are done

The guide content is generated by each library's theme generator, so it's always accurate for the library you're using. For example, the Angular Material guide mentionsng add @angular/material and angular.json font imports, while the shadcn guide references globals.css and tailwind.config.ts.

Monaco Editor Features

Code Lab uses Monaco Editor (VS Code's editor engine). While the code is read-only, you still have access to:

• Ctrl+F — Search within the current file
• Ctrl+A then Ctrl+C — Select all and copy
• Syntax highlighting — Full language support for CSS, SCSS, TypeScript, TSX, HTML
• Line numbers — Click a line number to select the entire line
• Word wrap — Enabled by default so you don't need to scroll horizontally
• Smooth scrolling — Animated scroll for comfortable navigation
• Dark/Light theme — Automatically matches your system/app theme preference
• Automatic layout — Resizes correctly when the window changes size

Recommended Workflow

1. Design your tokens in the editor with Components preview mode
2. Switch to Code mode when you're satisfied with the visual result
3. Browse the theme file tab — use sidebar navigation to check each section
4. Check the CSS variables tab for universal tokens
5. Check the Tailwind config tab if you use Tailwind
6. Open the Setup Guide and follow the steps to integrate
7. Copy individual files using the copy button on each tab