colors

ux.symfony.com/assets/styles/app.scss

@@ -76,4 +76,10 @@
 @import "./images";
 
 
+// Symfony UX
+@import "app/color";
+
+
+@import "ux/packages";
+
 

ux.symfony.com/assets/styles/app/_border.scss

@@ -0,0 +1,18 @@
+
+:root {
+
+    --border-radius-thinnest: .5rem;
+    --border-radius-thinner: 1rem;
+    --border-radius: 1.5rem;
+    --border-radius-thicker: 2rem;
+    --border-radius-thickest: 3rem;
+
+    --border-radius-percent-light: 6.25%;
+    --border-radius-percent: 12.5%;
+    --border-radius-percent-bold: 18.75%;
+
+
+
+
+
+}

ux.symfony.com/assets/styles/app/_color.scss

@@ -0,0 +1,58 @@
+:root {
+
+  --color-base: #ffffff;
+  --color-base-contrast: #000000;
+
+  @media (prefers-color-scheme: dark) {
+    --color-base: #000000;
+    --color-base-contrast: #ffffff;
+  }
+}
+
+:root {
+
+  --color-main: #ffffff;
+  --color-accent: #1a73e8;
+
+  --color-success: #84DE2C;
+  --color-info: #007bff;
+  --color-warning: #FBC640;
+  --color-danger: #FB4040;
+
+  --bg-base: #121212;
+  --bg-main: color-mix(in lch, var(--bg-base), #ffffff 10%);
+  --bg-muted: color-mix(in lch, var(--bg-base), #ffffff 20%);
+
+  --fg-base: #ffffff;
+  --fg-main: color-mix(in lch, var(--fg-base), #000000 90%);
+  --fg-muted: color-mix(in lch, var(--fg-base), #000000 50%);
+
+  --bg-accent: var(--color-accent);
+  --bg-accent-muted: color-mix(in lch, var(--bg-accent), #000000 20%);
+
+  --fg-accent: var(--bg-accent);
+  --fg-accent-muted: color-mix(in lch, var(--bg-accent), #000000 50%);
+
+  --bg-code: color-mix(in lch, var(--bg-main), #000000 10%);
+  --bg-quote: color-mix(in lch, var(--bg-main), #ffffff 5%);
+  --bg-highlight: color-mix(in lch, var(--bg-accent), #ffffff 30%);
+
+  --fg-code: color-mix(in lch, var(--fg-base), #1a73e8 10%);
+  --fg-quote: var(--fg-muted);
+  --fg-highlight: color-mix(in lch, var(--fg-base), #1a73e8 15%);
+
+  --bg-interactive: var(--bg-accent);
+  --bg-interactive-muted: color-mix(in lch, var(--bg-interactive), #000000 20%);
+
+  --bg-info: color-mix(in lch, var(--color-info), var(--bg-main) 15%);
+  --bg-success: color-mix(in lch, var(--color-success), var(--bg-main) 15%);
+  --bg-error: color-mix(in lch, var(--color-danger), var(--bg-main) 15%);
+  --bg-warning: color-mix(in lch, var(--color-warning), var(--bg-main) 15%);
+
+  --fg-interactive: var(--fg-accent);
+
+  --fg-info: var(--fg-base);
+  --fg-success: var(--fg-base);
+  --fg-error: var(--fg-base);
+  --fg-warning: var(--fg-base);
+}

ux.symfony.com/assets/styles/ux/_code.scss

@@ -0,0 +1,10 @@
+:root {
+
+
+
+
+
+
+
+
+}

ux.symfony.com/assets/styles/ux/_packages.scss

@@ -0,0 +1,10 @@
+:root {
+
+
+
+
+
+
+
+
+}

ux.symfony.com/src/Controller/StyleController.php

@@ -0,0 +1,25 @@
+<?php
+
+/*
+ * This file is part of the Symfony package.
+ *
+ * (c) Fabien Potencier <[email protected]>
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+namespace App\Controller;
+
+use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
+use Symfony\Component\HttpFoundation\Response;
+use Symfony\Component\Routing\Attribute\Route;
+
+class StyleController extends AbstractController
+{
+    #[Route('/style/', name: 'app_style')]
+    public function index(): Response
+    {
+        return $this->render('style/index.html.twig');
+    }
+}

ux.symfony.com/templates/components/Hero.html.twig

@@ -30,7 +30,7 @@
         {%- if subtitle -%}
             <p class="Hero__subtitle">{{- subtitle -}}</p>
         {%- endif -%}
-        {%- if (block('content') is defined) or (description is defined) -%}
+        {%- if (block('content') is defined) or description is not null -%}
             <div class="Hero__content">
                 {{- description ?? block('content') -}}
             </div>