Yubild - You build, it ships.

Generator Architecture

Each UI library has a dedicated theme generator — a pure function that takes yourTokenConfig and returns a LibraryThemeOutput containing:

fullConfig — The complete theme file with all sections combined
sections — Individual code blocks for each token category (colors, typography, etc.)
setupInstructions — Step-by-step integration guide in markdown
fileName — Suggested file name (e.g., _yubild-theme.scss)
language — Code language for syntax highlighting

Note

Generators are lazy-loaded. Only the generator for your selected library is loaded into the browser, keeping the bundle small. They're also deterministic — the same token values always produce identical output, so regenerating is safe at any time.

React Libraries

shadcn/ui

Output: globals.css (CSS)

shadcn/ui uses HSL-based CSS custom properties following a specific naming convention. YuBild's generator converts all your token colors to HSL space and outputs them in both light and dark variants.

globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222 47% 11%;
    --primary: 160 82% 27%;
    --primary-foreground: 0 0% 100%;
    --secondary: 239 84% 67%;
    --secondary-foreground: 0 0% 100%;
    --accent: 33 90% 55%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --popover: 0 0% 100%;
    --popover-foreground: 222 47% 11%;
    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 160 82% 27%;
    --radius: 0.5rem;

    /* Color Scales (50-950) */
    --primary-50: 152 81% 96%;
    --primary-100: 149 80% 90%;
    /* ... through 950 */
  }
}

Key features: HSL format for easy Tailwind integration, full color scales, dark mode .dark variant, semantic aliases for card/popover/input.

Material UI (MUI)

Output: theme.ts (TypeScript)

Generates a complete MUI theme using createTheme(). Maps tokens to MUI's palette, typography, shape, shadows, and component override systems.

theme.ts

import { createTheme } from '@mui/material/styles';

export const yubildTheme = createTheme({
  palette: {
    primary: { main: '#0D7C66', contrastText: '#ffffff' },
    secondary: { main: '#6366f1', contrastText: '#ffffff' },
    error: { main: '#ef4444' },
    background: { default: '#ffffff', paper: '#ffffff' },
    text: { primary: '#1e293b', secondary: '#64748b' },
  },
  typography: {
    fontFamily: '"Inter", "Helvetica", sans-serif',
    h1: { fontFamily: '"Inter", sans-serif', fontWeight: 700 },
    /* ... all heading levels configured */
  },
  shape: { borderRadius: 8 },
  components: {
    MuiButton: {
      styleOverrides: {
        root: { borderRadius: 8, textTransform: 'none' },
      },
    },
    MuiCard: { styleOverrides: { root: { borderRadius: 8 } } },
    /* ... 15+ component overrides */
  },
});

Key features: Full palette mapping, all 6 heading levels configured, component overrides for Button, Card, Dialog, Chip, TextField, Select, and more. Shadow array generation. Dark theme variant.

Chakra UI

Output: theme.ts (TypeScript)

Uses extendTheme() with Chakra's semantic token system. Full color scale integration, component style overrides, and global styles.

Radix UI

Output: radix-theme.css (CSS)

CSS custom properties following Radix's design patterns. Since Radix is headless, these variables work as the styling foundation for Radix Primitives.

Vue Libraries

Vuetify

Output: vuetify.config.ts (TypeScript)

Vuetify theme configuration with custom colors, dark/light variants, and default property overrides. Maps tokens to Vuetify's built-in theme system.

vuetify.config.ts

import { createVuetify } from 'vuetify';

export default createVuetify({
  theme: {
    defaultTheme: 'yubild',
    themes: {
      yubild: {
        colors: {
          primary: '#0D7C66',
          secondary: '#6366f1',
          accent: '#f59e0b',
          error: '#ef4444',
          background: '#ffffff',
          surface: '#ffffff',
        },
      },
    },
  },
  defaults: {
    VBtn: { rounded: 'lg' },
    VCard: { rounded: 'lg' },
    VTextField: { variant: 'outlined', density: 'comfortable' },
  },
});

PrimeVue

Output: Aura theme preset (TypeScript)

PrimeVue v4 uses a design token architecture natively, making the mapping especially clean. YuBild generates an Aura preset with your tokens mapped to PrimeVue's semantic token slots.

Naive UI

Output: Theme overrides (TypeScript)

Generates a theme overrides object for Naive UI's n-config-provider. Includes global overrides (colors, borders, fonts) and per-component overrides (Button, Card, Input, Dialog, etc.).

Angular Libraries

Angular Material

Output: _yubild-theme.scss (SCSS)

The most comprehensive generator. Produces a full SCSS theme file using Angular Material'smat.m2-define-* APIs. This is a complete, drop-in theme file.

_yubild-theme.scss

@use '@angular/material' as mat;

@include mat.core();

// Color palette maps with 50-950 shades + contrast values
$yubild-primary-palette-map: (
  50: #f0fdf8,  100: #d1fae5,  200: #a7f3d0,
  300: #6ee7b7, 400: #34d399,  500: #10b981,
  600: #0D7C66, 700: #047857,  800: #065f46,
  900: #064e3b, 950: #022c22,
  contrast: (
    50: rgba(black, 0.87), 100: rgba(black, 0.87),
    500: white, 600: white, 700: white, /* ... */
  )
);

$yubild-primary: mat.m2-define-palette($yubild-primary-palette-map);
$yubild-accent:  mat.m2-define-palette($yubild-accent-palette-map);
$yubild-warn:    mat.m2-define-palette($yubild-warn-palette-map);

// Typography with heading + body fonts
$yubild-typography: mat.m2-define-typography-config(
  $font-family: '"Inter", sans-serif',
  $headline-1: mat.m2-define-typography-level(96px, 96px, 300),
  /* ... all levels */
);

// Light theme
$yubild-light-theme: mat.m2-define-light-theme((
  color: (primary: $yubild-primary, accent: $yubild-accent, warn: $yubild-warn),
  typography: $yubild-typography,
  density: 0,
));
@include mat.all-component-themes($yubild-light-theme);

// Dark theme variant
.dark { @include mat.all-component-colors($yubild-dark-theme); }

// Component overrides mixin
@mixin yubild-component-overrides {
  .mat-mdc-button { border-radius: 8px; transition: all 200ms ease-in-out; }
  .mat-mdc-card { border-radius: 8px; }
  .mat-mdc-dialog-container .mdc-dialog__surface { border-radius: 8px; }
  /* ... 10+ component overrides */
}
@include yubild-component-overrides;

Key features: Full SCSS palette maps with contrast values, Angular Material typography config, density settings based on spacing preset, light + dark theme definitions, component override mixin for buttons/cards/dialogs/chips/inputs/menus/tooltips, global CSS variables for custom components.

Tip

The Angular Material generator produces the most code (~350 lines) because Angular Material requires explicit palette maps with contrast values, typography level definitions, and theme application via @include. This is normal and expected — it's what AM needs.

PrimeNG

Output: Aura theme preset (TypeScript)

Similar to PrimeVue, generates an Aura preset adapted for PrimeNG's Angular integration.

NG-Zorro

Output: Less/SCSS variables

NG-Zorro (Ant Design for Angular) uses Less variables for theming. YuBild generates the override variables that map to NG-Zorro's theme system.

Cross-Format Outputs

In addition to library-specific themes, every project also generates:

CSS Variables — Universal :root custom properties, 60+ variables
Tailwind Config — tailwind.config.ts theme extension
Framework Integration — Runtime token access (ThemeProvider/composable/service)

This means you always have multiple output formats available, regardless of which library you selected.

What Gets Mapped

Here's a comprehensive view of which tokens affect which parts of the generated code:

Token Category	What It Generates
Colors	Palette maps/objects, semantic variables, contrast colors, dark mode overrides
Typography	Font family declarations, type scale config, heading level definitions
Spacing	Spacing scale variables, density settings (Angular Material), component padding
Shadows	Shadow variables (6 levels), MUI shadow array, elevation utilities
Border Radius	Radius variables, component override border-radius for buttons/cards/dialogs/chips/inputs
Borders	Border width variables, outlined component overrides
Effects	Blur radius, opacity variables for disabled/hover/backdrop states
Motion	Transition duration/easing, component transition overrides
Focus	Focus ring width/offset/color, keyboard focus outline overrides
Z-Index	Named z-index variables (base through tooltip)

Theme Generators