README

UI Kernel

Design tokens, themes, and slim CSS generation for Symfony

Note

Read-only mirror. See CONTRIBUTING.md for how to propose changes.

Features

Design tokens — --ui-color-*, spacing, radius, motion, and focus tokens from YAML themes
Built-in themes — Balanced, Semantic, and Utility lineages (light + dark variants)
OKLCH palette generator — shared ramp math; author palette refs, not raw hex, in theme packs
Twig integration — ui_kernel_css(), theme boot script, active theme id, theme shell helper
Slim kernel boundary — theme CSS only; component [data-ui-role] rules live in ux-blocks-* packages

Prerequisites

Add the symfinity/recipes Flex endpoint to your project's composer.json (see recipes README) — recipes are not in Symfony's official recipe repository yet.

Installation

composer require symfinity/ui-kernel

The Flex recipe registers the bundle for all environments and copies a minimal app config. See Installation.

Quick Start

{# templates/base.html.twig #}
<head>
    {{ ui_kernel_theme_boot_script() }}
    {{ ui_kernel_css()|raw }}
</head>

# config/packages/symfinity_ui_kernel.yaml
symfinity_ui_kernel:
    default_theme: semantic
    default_variant: semantic
    schema_version: '1.0'

See Quick start for the full walkthrough.

Documentation

Quick start — theme CSS on every page in minutes
Installation — Flex, manual setup, Web Profiler (dev)
Configuration — app wiring, user tokens, system profile
Themes — built-in lineages, dark mode, layout profiles
Font Manager pairing — optional webfonts
Upgrade — first release and future migrations

symfinity / ui-kernel

Maintainers

Package info

Statistics

Security