Note
Read-only mirror. See CONTRIBUTING.md for how to propose changes.
- 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.
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.
composer require symfinity/ui-kernelThe Flex recipe registers the bundle for all environments and copies a minimal app config. See Installation.
{# 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.
- 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, DTCG on-disk layout,
design_system_id, dark mode - Font Manager pairing — optional webfonts
- PHP 8.2 or higher
- Symfony 6.4, 7.x, or 8.x
- Twig 3.0 or higher