From c85f33675e3679c157667ac65edeb665417cf960 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20Andr=C3=A9?= <smn.andre@gmail.com>
Date: Sat, 2 Nov 2024 03:52:19 +0100
Subject: [PATCH] colors

---
 ux.symfony.com/assets/styles/app.scss         |   6 +
 ux.symfony.com/assets/styles/app/_border.scss |  18 ++
 ux.symfony.com/assets/styles/app/_color.scss  |  58 ++++
 ux.symfony.com/assets/styles/ux/_code.scss    |  10 +
 .../assets/styles/ux/_packages.scss           |  10 +
 .../src/Controller/StyleController.php        |  25 ++
 .../templates/components/Hero.html.twig       |   2 +-
 .../templates/style/index.html.twig           | 263 ++++++++++++++++++
 8 files changed, 391 insertions(+), 1 deletion(-)
 create mode 100644 ux.symfony.com/assets/styles/app/_border.scss
 create mode 100644 ux.symfony.com/assets/styles/app/_color.scss
 create mode 100644 ux.symfony.com/assets/styles/ux/_code.scss
 create mode 100644 ux.symfony.com/assets/styles/ux/_packages.scss
 create mode 100644 ux.symfony.com/src/Controller/StyleController.php
 create mode 100644 ux.symfony.com/templates/style/index.html.twig

diff --git a/ux.symfony.com/assets/styles/app.scss b/ux.symfony.com/assets/styles/app.scss
index b5da5a7be79..11dfa1b4b05 100644
--- a/ux.symfony.com/assets/styles/app.scss
+++ b/ux.symfony.com/assets/styles/app.scss
@@ -76,4 +76,10 @@
 @import "./images";
 
 
+// Symfony UX
+@import "app/color";
+
+
+@import "ux/packages";
+
 
diff --git a/ux.symfony.com/assets/styles/app/_border.scss b/ux.symfony.com/assets/styles/app/_border.scss
new file mode 100644
index 00000000000..16b7a5e6676
--- /dev/null
+++ b/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%;
+    
+    
+    
+    
+  
+}
diff --git a/ux.symfony.com/assets/styles/app/_color.scss b/ux.symfony.com/assets/styles/app/_color.scss
new file mode 100644
index 00000000000..13879ef89f9
--- /dev/null
+++ b/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);
+}
diff --git a/ux.symfony.com/assets/styles/ux/_code.scss b/ux.symfony.com/assets/styles/ux/_code.scss
new file mode 100644
index 00000000000..c0d0194bdf4
--- /dev/null
+++ b/ux.symfony.com/assets/styles/ux/_code.scss
@@ -0,0 +1,10 @@
+:root {
+
+  
+  
+  
+  
+  
+  
+
+}
diff --git a/ux.symfony.com/assets/styles/ux/_packages.scss b/ux.symfony.com/assets/styles/ux/_packages.scss
new file mode 100644
index 00000000000..c0d0194bdf4
--- /dev/null
+++ b/ux.symfony.com/assets/styles/ux/_packages.scss
@@ -0,0 +1,10 @@
+:root {
+
+  
+  
+  
+  
+  
+  
+
+}
diff --git a/ux.symfony.com/src/Controller/StyleController.php b/ux.symfony.com/src/Controller/StyleController.php
new file mode 100644
index 00000000000..98b3972dfb8
--- /dev/null
+++ b/ux.symfony.com/src/Controller/StyleController.php
@@ -0,0 +1,25 @@
+<?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 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');
+    }
+}
diff --git a/ux.symfony.com/templates/components/Hero.html.twig b/ux.symfony.com/templates/components/Hero.html.twig
index 8a2e5cc5a41..598fc814267 100644
--- a/ux.symfony.com/templates/components/Hero.html.twig
+++ b/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>
diff --git a/ux.symfony.com/templates/style/index.html.twig b/ux.symfony.com/templates/style/index.html.twig
new file mode 100644
index 00000000000..e19ba5b1610
--- /dev/null
+++ b/ux.symfony.com/templates/style/index.html.twig
@@ -0,0 +1,263 @@
+{% extends 'base.html.twig' %}
+
+{% block title 'Twig - The flexible, fast, and secure PHP template engine' %}
+
+{% block meta '' %}
+
+{% block content %}
+
+  <div class="section">
+    <div class="container container--xl">
+      <h1>Color Palette</h1>
+      <p>These are the colors used in the design system.</p>
+  
+      {{ block('colorboxes') }}
+      
+    </div>
+  </div>
+
+{% endblock %}
+
+
+{% block colorboxes %}
+<style>
+  /* Color Grid Container */
+  .color-grid {
+    display: grid;
+    gap: 2rem;
+    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    padding: 2rem;
+    background-color: #212529;
+    color: #e0e0e0;
+    font-family: Arial, sans-serif;
+  }
+
+  /* General Color Box Styling */
+  .colorbox {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    height: 100px;
+    border-radius: 8px;
+    font-size: 0.875rem;
+    font-weight: bold;
+    color: var(--colorbox-fg); /* Foreground (Text) Color */
+    background-color: var(--colorbox-bg); /* Background Color */
+    border: 2px solid var(--colorbox-border); /* Border Color */
+  }
+
+  /* Main Colors */
+  .colorbox-main {
+    --colorbox-bg: #1C2024;
+    --colorbox-border: #333;
+    --colorbox-fg: #ffffff;
+  }
+
+  /* Dark Variations */
+  .colorbox-dark-xxx {
+    --colorbox-bg: #161719;
+    --colorbox-border: #2a2a2a;
+    --colorbox-fg: #e0e0e0;
+  }
+
+  .colorbox-dark-yyy {
+    --colorbox-bg: #0d0e0f;
+    --colorbox-border: #1a1a1a;
+    --colorbox-fg: #e0e0e0;
+  }
+
+  .colorbox-dark-zzz {
+    --colorbox-bg: #2C2F33;
+    --colorbox-border: #3a3a3a;
+    --colorbox-fg: #e0e0e0;
+  }
+
+  /* Code Color Box */
+  .colorbox-code {
+    --colorbox-bg: #0d0e0f;
+    --colorbox-border: #333;
+    --colorbox-fg: #cfd1d5;
+  }
+
+  /* Status Colors */
+  .colorbox-info {
+    --colorbox-bg: #007bff;
+    --colorbox-border: #0056b3;
+    --colorbox-fg: #ffffff;
+  }
+
+  .colorbox-success {
+    --colorbox-bg: #28a745;
+    --colorbox-border: #1c7430;
+    --colorbox-fg: #ffffff;
+  }
+
+  .colorbox-error {
+    --colorbox-bg: #dc3545;
+    --colorbox-border: #a71d2a;
+    --colorbox-fg: #ffffff;
+  }
+
+  .colorbox-warning {
+    --colorbox-bg: #ffc107;
+    --colorbox-border: #d39e00;
+    --colorbox-fg: #000000;
+  }
+
+  /* Browser UI Colors */
+  .colorbox-browser-background {
+    --colorbox-bg: #2c2f33;
+    --colorbox-border: #23272a;
+    --colorbox-fg: #ffffff;
+  }
+
+  .colorbox-browser-bar {
+    --colorbox-bg: #1c1e21;
+    --colorbox-border: #141517;
+    --colorbox-fg: #ffffff;
+  }
+
+  /* Product Card Background */
+  .colorbox-card-background {
+    --colorbox-bg: #161719;
+    --colorbox-border: #0f1012;
+    --colorbox-fg: #e0e0e0;
+  }
+</style>
+
+<div class="color-grid">
+  <!-- Main Color Box -->
+  <div class="colorbox colorbox-main">Main</div>
+
+  <!-- Dark Variations -->
+  <div class="colorbox colorbox-dark-xxx">Dark XXX</div>
+  <div class="colorbox colorbox-dark-yyy">Dark YYY</div>
+  <div class="colorbox colorbox-dark-zzz">Dark ZZZ</div>
+
+  <!-- Code Color Box -->
+  <div class="colorbox colorbox-code">Code</div>
+
+  <!-- Status Variations -->
+  <div class="colorbox colorbox-info">Info</div>
+  <div class="colorbox colorbox-success">Success</div>
+  <div class="colorbox colorbox-error">Error</div>
+  <div class="colorbox colorbox-warning">Warning</div>
+
+  <!-- Browser UI Colors -->
+  <div class="colorbox colorbox-browser-background">Browser Background</div>
+  <div class="colorbox colorbox-browser-bar">Browser Bar</div>
+
+  <!-- Product Card Background -->
+  <div class="colorbox colorbox-card-background">Card Background</div>
+</div>
+{% endblock %}
+
+{% block colorboxes2 %}
+<style>
+    /* Color Grid Container */
+    .color-grid {
+      display: grid;
+      gap: 2rem;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      padding: 2rem;
+      color: var(--fg-base);
+      font-family: Arial, sans-serif;
+    }
+  
+    /* General Color Box Styling */
+    .colorbox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      height: auto;
+      aspect-ratio: 16/9;
+      border-radius: 12px;
+      font-size: 0.875rem;
+      font-weight: lighter;
+      color: var(--colorbox-fg); /* Foreground (Text) Color */
+      background-color: var(--colorbox-bg); /* Background Color */
+      border: 1px solid var(--colorbox-border); /* Border Color */
+    }
+  
+    /* Specific Color Variants */
+  
+    /* Main */
+    .colorbox-main {
+      --colorbox-bg: #1C2024;
+      --colorbox-border: #333;
+      --colorbox-fg: #ffffff;
+    }
+  
+    /* Dark Variants */
+    .colorbox-dark-xxx {
+      --colorbox-bg: #161719;
+      --colorbox-border: #2a2a2a;
+      --colorbox-fg: #e0e0e0;
+    }
+  
+    .colorbox-dark-yyy {
+      --colorbox-bg: #0d0e0f;
+      --colorbox-border: #1a1a1a;
+      --colorbox-fg: #e0e0e0;
+    }
+  
+    .colorbox-dark-zzz {
+      --colorbox-bg: #2C2F33;
+      --colorbox-border: #3a3a3a;
+      --colorbox-fg: #e0e0e0;
+    }
+  
+    /* Code */
+    .colorbox-code {
+      --colorbox-bg: #0d0e0f;
+      --colorbox-border: #333;
+      --colorbox-fg: #cfd1d5;
+    }
+  
+    /* Status Colors */
+    .colorbox-info {
+      --colorbox-bg: #007bff;
+      --colorbox-border: #0056b3;
+      --colorbox-fg: #ffffff;
+    }
+  
+    .colorbox-success {
+      --colorbox-bg: #28a745;
+      --colorbox-border: #1c7430;
+      --colorbox-fg: #ffffff;
+    }
+  
+    .colorbox-error {
+      --colorbox-bg: #dc3545;
+      --colorbox-border: #a71d2a;
+      --colorbox-fg: #ffffff;
+    }
+  
+    .colorbox-warning {
+      --colorbox-bg: #ffc107;
+      --colorbox-border: #d39e00;
+      --colorbox-fg: #000000;
+    }
+  </style>
+  
+  <div class="color-grid">
+    <!-- Main Color Box -->
+    <div class="colorbox colorbox-main">Main</div>
+  
+    <!-- Dark Variations -->
+    <div class="colorbox colorbox-dark-xxx">Dark XXX</div>
+    <div class="colorbox colorbox-dark-yyy">Dark YYY</div>
+    <div class="colorbox colorbox-dark-zzz">Dark ZZZ</div>
+  
+    <!-- Code Color Box -->
+    <div class="colorbox colorbox-code">Code</div>
+  
+    <!-- Status Variations -->
+    <div class="colorbox colorbox-info">Info</div>
+    <div class="colorbox colorbox-success">Success</div>
+    <div class="colorbox colorbox-error">Error</div>
+    <div class="colorbox colorbox-warning">Warning</div>
+  </div>
+{% endblock %}