[DesignTokens] Add the Design Tokens component

splitsh.json

@@ -6,6 +6,7 @@
         "ux-dropzone": "src/Dropzone",
         "ux-chartjs": "src/Chartjs",
         "ux-cropperjs": "src/Cropperjs",
+        "ux-design-tokens": "src/DesignTokens",
         "ux-icons": "src/Icons",
         "ux-live-component": "src/LiveComponent",
         "ux-map": {

src/DesignTokens/.gitattributes

@@ -0,0 +1,6 @@
+/.git* export-ignore
+/.symfony.bundle.yaml export-ignore
+/doc export-ignore
+/phpstan.dist.neon export-ignore
+/phpunit.dist.xml export-ignore
+/tests export-ignore

src/DesignTokens/.gitignore

@@ -0,0 +1,8 @@
+/config/reference.php
+/config/schema.json
+/vendor/
+/composer.lock
+/phpunit.xml
+/.phpunit.cache
+
+/var

src/DesignTokens/.symfony.bundle.yaml

@@ -0,0 +1,3 @@
+branches: ['3.x']
+maintained_branches: ['3.x']
+doc_dir: 'doc'

src/DesignTokens/CHANGELOG.md

@@ -0,0 +1,5 @@
+# CHANGELOG
+
+## 3.6.0
+
+- Add the component.

src/DesignTokens/LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2026-present Fabien Potencier
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/DesignTokens/README.md

@@ -0,0 +1,140 @@
+# Symfony UX Design Tokens
+
+**EXPERIMENTAL** This bundle is currently experimental and is likely to change,
+possibly significantly, before its first stable release.
+
+A design token is a named design decision. Write it once in a
+[DTCG 2025.10](https://www.designtokens.org/tr/2025.10/) file and this bundle hands
+the resolved value to CSS, Twig, PHP and your other build tools. Resolution
+happens on the server, so a theme per user, per brand or per tenant is a
+Resolver input rather than a rebuild.
+
+## Installation
+
+```bash
+composer require symfony/ux-design-tokens
+```
+
+## Usage
+
+Write the tokens in a DTCG file, `design/brand.tokens.json`. Keep it outside
+`assets/`, where AssetMapper would publish it:
+
+```json
+{
+    "color": {
+        "action": {
+            "$type": "color",
+            "primary": {
+                "$value": { "colorSpace": "oklch", "components": [0.62, 0.18, 255] }
+            }
+        }
+    },
+    "dimension": {
+        "radius": {
+            "$type": "dimension",
+            "control": {
+                "$value": { "value": 0.375, "unit": "rem" }
+            }
+        }
+    }
+}
+```
+
+Point the bundle at it. The configuration is required: without it,
+`ux_token_css()` renders an empty `:root {}` block.
+
+```yaml
+# config/packages/ux_design_tokens.yaml
+ux_design_tokens:
+    paths:
+        - '%kernel.project_dir%/design/brand.tokens.json'
+```
+
+Render the variables once, in the document head. With TwigBundle enabled:
+
+```twig
+{# templates/base.html.twig #}
+{{ ux_token_css() }}
+```
+
+```html
+<style>
+    @property --dt-color-action-primary {
+        syntax: '\3C color>';
+        inherits: true;
+        initial-value: oklch(62% 0.18 255);
+    }
+
+    :root {
+        --dt-color-action-primary: oklch(62% 0.18 255);
+        --dt-dimension-radius-control: 0.375rem;
+    }
+</style>
+```
+
+Stylesheets read those variables and never mention a token file. Changing the
+source changes the interface without touching CSS. When the sheet is the same
+for every visitor, `ux_token_stylesheet()` links it as a versioned AssetMapper
+asset instead of inlining it.
+
+Custom properties do not reach everywhere: an email, a PDF, an SVG attribute,
+or PHP that needs the value itself. The registry serves the same tokens, typed:
+
+```php
+// src/Mailer/BrandMailer.php
+namespace App\Mailer;
+
+use Symfony\UX\DesignTokens\TokenRegistryInterface;
+
+final class BrandMailer
+{
+    public function __construct(private readonly TokenRegistryInterface $tokens)
+    {
+    }
+
+    public function accent(): string
+    {
+        // "oklch(62% 0.18 255)"
+        return (string) $this->tokens->get('color.action.primary');
+    }
+}
+```
+
+Casting is the output edge. Before it the value keeps its DTCG structure, so a
+consumer reads the color space and the components instead of parsing a string.
+
+## What it provides
+
+- DTCG Format, Color and Resolver Module 2025.10 support
+- Typed PHP value objects and a lazy, cached `TokenRegistryInterface` service
+- Twig functions, generated CSS custom properties and versioned AssetMapper
+  assets
+- Light and dark color schemes in one stylesheet: the dark block holds only
+  the custom properties that change
+- Lint, fix, import and export commands, and a debug command
+  naming the source file behind every resolved value
+- DTCG, CSS, JavaScript, Tailwind CSS v4 and DESIGN.md exports
+- Tailwind CSS v4 `@theme` import that lists what DTCG cannot represent
+- Executable conformance fixtures derived from the reports
+
+## Interoperability
+
+The reference is the [DTCG 2025.10](https://www.designtokens.org/tr/2025.10/)
+specification, in its Format, Color and Resolver modules. Other design tools
+and build pipelines read the same files.
+
+## Documentation
+
+Read the [documentation](doc/index.rst) in this repository.
+
+> [!IMPORTANT]
+> **This repository is a READ-ONLY sub-tree split**.\
+> See https://github.com/symfony/ux to create issues or submit pull requests.
+
+## Resources
+
+- [Documentation](https://symfony.com/bundles/ux-design-tokens/current/index.html)
+- [Report issues](https://github.com/symfony/ux/issues) and
+  [send Pull Requests](https://github.com/symfony/ux/pulls)
+  in the [main Symfony UX repository](https://github.com/symfony/ux)

src/DesignTokens/composer.json

@@ -0,0 +1,68 @@
+{
+    "name": "symfony/ux-design-tokens",
+    "description": "Renders DTCG design tokens as CSS variables, Twig and PHP values.",
+    "type": "symfony-bundle",
+    "license": "MIT",
+    "keywords": [
+        "symfony-ux",
+        "design-tokens",
+        "dtcg",
+        "css",
+        "twig"
+    ],
+    "authors": [
+        {
+            "name": "Simon André",
+            "email": "smn.andre@gmail.com"
+        },
+        {
+            "name": "Symfony Community",
+            "homepage": "https://symfony.com/contributors"
+        }
+    ],
+    "homepage": "https://symfony.com",
+    "require": {
+        "php": ">=8.4",
+        "psr/log": "^1.1|^2|^3",
+        "symfony/cache-contracts": "^3.5",
+        "symfony/config": "^7.4|^8.0",
+        "symfony/console": "^7.4|^8.0",
+        "symfony/dependency-injection": "^7.4|^8.0",
+        "symfony/filesystem": "^7.4|^8.0",
+        "symfony/http-kernel": "^7.4|^8.0",
+        "symfony/service-contracts": "^3.5"
+    },
+    "require-dev": {
+        "phpstan/phpstan": "^2.1",
+        "phpunit/phpunit": "^11.1|^12.0",
+        "symfony/asset-mapper": "^7.4|^8.0",
+        "symfony/cache": "^7.4|^8.0",
+        "symfony/framework-bundle": "^7.4|^8.0",
+        "symfony/twig-bundle": "^7.4|^8.0",
+        "symfony/yaml": "^7.4|^8.0",
+        "twig/twig": "^3.24|^4.0"
+    },
+    "conflict": {
+        "twig/twig": "<3.24"
+    },
+    "autoload": {
+        "psr-4": {
+            "Symfony\\UX\\DesignTokens\\": "src/"
+        }
+    },
+    "autoload-dev": {
+        "psr-4": {
+            "Symfony\\UX\\DesignTokens\\Tests\\": "tests/"
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "extra": {
+        "thanks": {
+            "name": "symfony/ux",
+            "url": "https://github.com/symfony/ux"
+        }
+    },
+    "minimum-stability": "dev"
+}

src/DesignTokens/config/asset_mapper.php

@@ -0,0 +1,29 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\Component\DependencyInjection\Loader\Configurator;
+
+use Symfony\Component\AssetMapper\Event\PreAssetsCompileEvent;
+use Symfony\UX\DesignTokens\EventListener\WarmDesignTokensOnAssetCompileListener;
+
+return static function (ContainerConfigurator $container): void {
+    $container->services()
+        ->set('.ux_design_tokens.asset_compile_listener', WarmDesignTokensOnAssetCompileListener::class)
+            ->args([
+                service('.ux_design_tokens.cache_warmer'),
+                param('kernel.build_dir'),
+            ])
+            ->tag('kernel.event_listener', [
+                'event' => PreAssetsCompileEvent::class,
+                'method' => '__invoke',
+            ])
+    ;
+};

src/DesignTokens/config/cache.php

@@ -0,0 +1,21 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <fabien@symfony.com>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace Symfony\Component\DependencyInjection\Loader\Configurator;
+
+return static function (ContainerConfigurator $container): void {
+    $container->services()
+        ->set('.ux_design_tokens.cache')
+            ->parent('cache.system')
+            ->private()
+            ->tag('cache.pool')
+    ;
+};