[Css] Add the CSS component

apps/bundler/assets/app-encore.js

@@ -10,6 +10,7 @@ import { registerReactControllerComponents } from '@symfony/ux-react';
 
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.css';
+import '../var/ux_css/styles.css';
 import { trans } from './translator.js';
 
 registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/));

apps/bundler/assets/app-reprise.ts

@@ -10,6 +10,7 @@ import { registerReactControllerComponents } from '@symfony/ux-react';
 
 // any CSS you import will output into a single css file (app.css in this case)
 import './styles/app.css';
+import '../var/ux_css/styles.css';
 import { trans } from './translator.js';
 
 registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.{jsx,tsx}', { eager: true }));

apps/bundler/composer.json

@@ -17,6 +17,8 @@
         "symfony/ux-autocomplete": "3.x-dev",
         "symfony/ux-chartjs": "3.x-dev",
         "symfony/ux-cropperjs": "3.x-dev",
+        "symfony/ux-css": "3.x-dev",
+        "symfony/ux-design-tokens": "3.x-dev",
         "symfony/ux-dropzone": "3.x-dev",
         "symfony/ux-google-map": "3.x-dev",
         "symfony/ux-icons": "3.x-dev",

apps/bundler/config/bundles.php

@@ -7,6 +7,8 @@
     Symfony\UX\Autocomplete\AutocompleteBundle::class => ['all' => true],
     Symfony\UX\Chartjs\ChartjsBundle::class => ['all' => true],
     Symfony\UX\Cropperjs\CropperjsBundle::class => ['all' => true],
+    Symfony\UX\DesignTokens\UXDesignTokensBundle::class => ['all' => true],
+    Symfony\UX\Css\UXCssBundle::class => ['all' => true],
     Symfony\UX\Dropzone\DropzoneBundle::class => ['all' => true],
     Symfony\UX\Map\UXMapBundle::class => ['all' => true],
     Symfony\Bundle\TwigBundle\TwigBundle::class => ['all' => true],

apps/bundler/config/packages/ux_css.yaml

@@ -0,0 +1 @@
+ux_css: ~

apps/bundler/config/packages/ux_design_tokens.yaml

@@ -0,0 +1,2 @@
+ux_design_tokens:
+    paths: ['%kernel.project_dir%/design/tokens.json']

apps/bundler/config/reference.php

@@ -704,6 +704,31 @@
  *     controller_paths?: list<scalar|Param|null>,
  *     controllers_json?: scalar|Param|null, // Default: "%kernel.project_dir%/assets/controllers.json"
  * }
+ * @psalm-type UxDesignTokensConfig = array{
+ *     paths?: list<scalar|Param|null>,
+ *     resolver?: array{ // A DTCG 2025.10 Resolver document and the contexts it selects by default.
+ *         path?: scalar|Param|null, // Path to a .resolver.json document. // Default: null
+ *         inputs?: list<mixed>,
+ *     },
+ *     color_scheme?: array{ // The Resolver modifier whose contexts the CSS output writes as the light and dark color schemes.
+ *         modifier?: scalar|Param|null, // Name of the modifier. // Default: "scheme"
+ *         light?: scalar|Param|null, // Context written to :root. // Default: "light"
+ *         dark?: scalar|Param|null, // Context whose differences are written for prefers-color-scheme: dark and [data-theme="dark"]. // Default: "dark"
+ *     },
+ *     css_prefix?: scalar|Param|null, // Application-owned prefix for generated CSS custom properties. // Default: "dt"
+ * }
+ * @psalm-type UxCssConfig = array{
+ *     conditions?: array<string, mixed>,
+ *     strict_tokens?: bool|Param, // Only accept tokens for properties bound to a token category; raw values must be written between brackets. // Default: true
+ *     strict_property_values?: bool|Param, // Only accept the keywords of a property whose grammar is made of keywords. // Default: true
+ *     static_css?: array{ // Values to write in the stylesheet even when no template uses them as is, for css() calls with dynamic values.
+ *         css?: list<array{ // Default: []
+ *             properties?: array<string, list<scalar|Param|null>>,
+ *             conditions?: list<scalar|Param|null>,
+ *             responsive?: bool|Param, // Also write each value for every breakpoint. // Default: false
+ *         }>,
+ *     },
+ * }
  * @psalm-type UxMapConfig = array{
  *     renderer?: scalar|Param|null, // Default: null
  *     google_maps?: array{
@@ -850,6 +875,8 @@
  *     framework?: FrameworkConfig,
  *     webpack_encore?: WebpackEncoreConfig,
  *     stimulus?: StimulusConfig,
+ *     ux_design_tokens?: UxDesignTokensConfig,
+ *     ux_css?: UxCssConfig,
  *     ux_map?: UxMapConfig,
  *     twig?: TwigConfig,
  *     ux_icons?: UxIconsConfig,
@@ -870,6 +897,8 @@
  *         framework?: FrameworkConfig,
  *         webpack_encore?: WebpackEncoreConfig,
  *         stimulus?: StimulusConfig,
+ *         ux_design_tokens?: UxDesignTokensConfig,
+ *         ux_css?: UxCssConfig,
  *         ux_map?: UxMapConfig,
  *         twig?: TwigConfig,
  *         ux_icons?: UxIconsConfig,
@@ -891,6 +920,8 @@
  *         framework?: FrameworkConfig,
  *         webpack_encore?: WebpackEncoreConfig,
  *         stimulus?: StimulusConfig,
+ *         ux_design_tokens?: UxDesignTokensConfig,
+ *         ux_css?: UxCssConfig,
  *         ux_map?: UxMapConfig,
  *         twig?: TwigConfig,
  *         ux_icons?: UxIconsConfig,
@@ -912,6 +943,8 @@
  *         framework?: FrameworkConfig,
  *         webpack_encore?: WebpackEncoreConfig,
  *         stimulus?: StimulusConfig,
+ *         ux_design_tokens?: UxDesignTokensConfig,
+ *         ux_css?: UxCssConfig,
  *         ux_map?: UxMapConfig,
  *         twig?: TwigConfig,
  *         ux_icons?: UxIconsConfig,