symfinity / ui-kernel
Design tokens, themes, and slim CSS generation for Symfony
Maintainers
Requires
- php: >=8.2
- symfony/config: ^6.4||^7.0||^8.0
- symfony/dependency-injection: ^6.4||^7.0||^8.0
- symfony/framework-bundle: ^6.4||^7.0||^8.0
- symfony/http-foundation: ^6.4||^7.0||^8.0
- symfony/http-kernel: ^6.4||^7.0||^8.0
- symfony/twig-bundle: ^6.4||^7.0||^8.0
- symfony/yaml: ^6.4||^7.0||^8.0
- twig/twig: ^3.0
Requires (Dev)
- phpstan/phpstan: ^2.1
- phpstan/phpstan-symfony: ^2.0
- phpunit/phpunit: ^10.5 || ^11.0
Suggests
- symfinity/font-manager: Optional webfont loading — pair css_variables export with --ui-font-family-sans / --ui-font-family-mono (see docs/font-manager-pairing.md)
- symfinity/ux-blocks-demo: Browser theme galleries and kernel showcase routes (dev/test only)
- symfony/web-profiler-bundle: Dev-only Web Profiler toolbar and panel for theme/CSS observability (UiKernelDataCollector)
This package is auto-updated.
Last update: 2026-06-22 18:29:47 UTC
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 W3C DTCG theme layers - Built-in themes — Balanced, Semantic, and Utility lineages (light + dark variants) on disk under
config/themes/{lineage}/ - 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 inux-blocks-*packages. ui-themer consumer themes useAuthoringThemeConfig(not the built-in DTCG catalog) — see Themes.
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: '2.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
- Usage — daily layout and override patterns
- Themes — built-in lineages, DTCG on-disk layout,
design_system_id, dark mode - Font Manager pairing — optional webfonts
Requirements
- PHP 8.2 or higher
- Symfony 6.4, 7.x, or 8.x
- Twig 3.0 or higher
Support
R2 release train (maintainers)
First public tag v0.1.0 with ui-themer, ui-action, and ux-blocks in one coordination event (PRODUCT-split-release-wave-1).
| Before tag | Consumer install order |
|---|---|
115 done; schema_version: '2.0'; Flex recipe + handbook; split row in mono.json |
1. composer require symfinity/ui-kernel |
mono repo:doctor clean for this slug |
2. composer require symfinity/ui-themer --dev (after kernel on Packagist) |
mono recipes:validate --tier=v1 clean for ui-kernel |
3. composer require symfinity/ui-action and/or symfinity/ux-blocks (parallel) |
After tag: mono recipes:publish for changed recipe dirs → Packagist webhook → Flex smoke in a clean Symfony app.