[Site] Some more cleaning

Author: smnandre

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

@@ -69,10 +69,10 @@
 @import "components/Browser";
 @import "components/Changelog";
 @import "components/DataList";
-@import "components/demo-container";
+@import "components/DemoContainer";
 @import "components/DemoCard";
 @import "components/DocsLink";
-@import "components/file_tree";
+@import "components/FileTree";
 @import "components/Icon";
 @import "components/IconGrid";
 @import "components/IconModal";
@@ -93,7 +93,6 @@
 @import "utilities/background";
 @import "utilities/info-tooltips";
 @import "utilities/font";
-@import "utilities/rich-text";
 @import "utilities/shadow";
 @import "utilities/text";
 

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

@@ -2,11 +2,9 @@
 h1 {
   font-size: 52px;
   font-weight: 700;
-  letter-spacing: -0.035em;
-}
-
-h1.ubuntu {
   line-height: 60px;
+  letter-spacing: -0.035em;
+  font-family: var(--font-family-title);
 }
 
 h2.ubuntu {
@@ -77,7 +75,7 @@ h4.ubuntu {
 
 
 @media (max-width: 576px) {
-  h1.ubuntu {
+  h1 {
     font-size: 36px;
     line-height: 41px;
     letter-spacing: -1px;

ux.symfony.com/assets/styles/components/_DemoContainer.scss

@@ -0,0 +1,18 @@
+.DemoContainer {
+  background-color: var(--bs-body-bg);
+  border: 1px solid var(--bs-secondary-bg-subtle);
+  border-top-left-radius: 12px;
+  border-top-right-radius: 12px;
+}
+
+.DemoContainer-inner {
+  background-color: var(--bs-secondary-bg);
+  border: 1px solid var(--bs-secondary-bg-subtle);
+  border-top: transparent;
+  border-bottom-left-radius: 12px;
+  border-bottom-right-radius: 12px;
+}
+
+.demo-chat > .DemoContainer-inner {
+  border-radius: 0;
+}

ux.symfony.com/assets/styles/components/_file_tree.scss renamed to ux.symfony.com/assets/styles/components/_FileTree.scss

@@ -1,42 +1,42 @@
-.file-tree ul {
+.FileTree ul {
   display: flex;
   flex-direction: column;
   align-items: stretch;
   justify-content: flex-start;
 }
 
-.file-tree li > span {
+.FileTree li > span {
   display: flex;
   flex-direction: row;
   gap: 1rem;
 }
 
-.file-tree-main::before {
+.FileTree-main::before {
   background: none !important;
 }
 
-.file-tree ul {
+.FileTree ul {
   position: relative;
   padding-inline-start: 1rem;
 }
 
-.file-tree .tooltip-inner {
+.FileTree .tooltip-inner {
   max-width: 350px;
 }
 
-.file-tree.nodots ul :not(span) {
+.FileTree.nodots ul :not(span) {
   margin-left: 12px;
 }
 
-.file-tree ul::before {
+.FileTree ul::before {
   content: '';
   width: 1rem;
   background: url(../images/dot.svg) left top / 2px 2px;
   display: block;
   position: absolute;
 }
 
-.file-tree ul::before {
+.FileTree ul::before {
   top: 0;
   height: 100%;
   background-repeat: repeat-y;

ux.symfony.com/assets/styles/components/_demo-container.scss

@@ -1,14 +1,8 @@
-.component-arrow {
-  color: $n-200;
-}
-
 .arrow {
-  background: url(../images/arrow.png);
   width: 100%;
   height: 36px;
+  background: url(../images/arrow.png) no-repeat center;
   background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center;
 
   [data-bs-theme="dark"] & {
     filter: invert(100);
@@ -17,12 +11,10 @@
 }
 
 .arrow-2 {
-  background: url(../images/arrow-2.png);
+  background: url(../images/arrow-2.png) no-repeat right;
+  background-size: contain;
   width: 100%;
   height: 66px;
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: right;
 
   [data-bs-theme="dark"] & {
     filter: invert(100);

ux.symfony.com/assets/styles/utilities/_arrow.scss

@@ -1,15 +1,3 @@
 .ubuntu {
   font-family: var(--font-family-title);
 }
-
-.font-title {
-  font-family: var(--font-family-title);
-}
-
-.font-text {
-  font-family: var(--font-family-text);
-}
-
-.font-code {
-  font-family: var(--font-family-code);
-}

ux.symfony.com/assets/styles/utilities/_font.scss

@@ -1,8 +1,6 @@
 twig:
     default_path: '%kernel.project_dir%/templates'
     form_themes: ['bootstrap_5_layout.html.twig']
-    globals:
-        twigPackageHelper: '@App\Service\TwigPackageHelper'
 
     paths:
         '%kernel.project_dir%/templates/demos/live_memory': ~

ux.symfony.com/assets/styles/utilities/_rich-text.scss

@@ -15,7 +15,6 @@
 use App\Form\AddTodoItemForm;
 use App\Form\AnimalCreationForm;
 use App\Repository\ChatRepository;
-use App\Service\PackageContext;
 use App\Service\UxPackageRepository;
 use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
 use Symfony\Component\HttpFoundation\Request;
@@ -30,12 +29,10 @@ class TurboController extends AbstractController
 {
     #[Route('/turbo', name: 'app_turbo')]
     #[Route('/turbo/{name}/the/{animal}', name: 'app_turbo_with_animal')]
-    public function __invoke(UxPackageRepository $packageRepository, ChatRepository $chatRepository, Request $request, PackageContext $packageContext, ?string $name = null, ?string $animal = null): Response
+    public function __invoke(UxPackageRepository $packageRepository, ChatRepository $chatRepository, Request $request, ?string $name = null, ?string $animal = null): Response
     {
         $package = $packageRepository->find('turbo');
 
-        $packageContext->setCurrentPackage('turbo');
-
         $form = $this->createForm(AnimalCreationForm::class);
         $form->handleRequest($request);
         if ($form->isSubmitted() && $form->isValid()) {

ux.symfony.com/config/packages/twig.yaml

@@ -19,7 +19,7 @@
     <main style="display: grid; place-content: center;text-align: center;" >
         <div class="d-flex flex-column align-items-center position-relative" style="gap:.5rem;">
             <span class="eyebrows" style="font-size: 1rem;">Error</span>
-            <h1 class="ubuntu" style="font-size: calc(6rem + 10vw); line-height: .75;letter-spacing: -.5rem;">{{ status_code }}</h1>
+            <h1 style="font-size: calc(6rem + 10vw); line-height: .75;letter-spacing: -.5rem;">{{ status_code }}</h1>
             <p class="hero-sub-text">{{ status_text }}</p>
             <a class="btn btn-outline-primary stretched-link" href="{{ url('app_homepage') }}">Back to the homepage</a>
         </div>

ux.symfony.com/src/Controller/UxPackage/TurboController.php

@@ -11,7 +11,7 @@
 
     <div class="hero">
         <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
-            <h1 class="text-center ubuntu mt-5"><a href="{{ url('app_changelog') }}">Changelog</a></h1>
+            <h1 class="text-center mt-5"><a href="{{ url('app_changelog') }}">Changelog</a></h1>
             <p class="text-center mt-2 mb-5">New features, bug fixes, performances and security improvements.</p>
         </div>
     </div>

ux.symfony.com/src/Service/PackageContext.php

@@ -3,7 +3,7 @@
 
         <p class="eyebrows text-center font-white mt-5" style="opacity: 0.8;">{{ eyebrowText|raw }}</p>
 
-        <h1 class="ubuntu text-center font-white">{% block title_header %}{% endblock %}</h1>
+        <h1 class="text-center font-white">{% block title_header %}{% endblock %}</h1>
 
         <div class="d-flex justify-content-center">
             <p class="text-center font-white mt-3 pb-3 hero-sub-text">

ux.symfony.com/src/Service/TwigPackageHelper.php

@@ -17,7 +17,7 @@
                         <a href="{{ url('app_demos') }}">DEMOS</a> /
                         <a href="{{ url('app_demos') }}">LiveComponent</a>
                     </p>
-                    <h1 class="ubuntu text-center">{{ demo.name }}</h1>
+                    <h1 class="text-center">{{ demo.name }}</h1>
                     <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 demo-introduction">
                         {{ demo.longDescription|markdown_to_html }}
                     </div>

ux.symfony.com/templates/bundles/TwigBundle/Exception/error.html.twig

@@ -16,7 +16,7 @@
     <div class="hero">
         <div class="container-fluid container-xxl px-4 pt-4 px-md-5">
             <p class="eyebrows text-center mt-5">SVG icons made easy</p>
-            <h1 class="text-center ubuntu">
+            <h1 class="text-center">
                 <a href="{{ url('app_icons') }}">UX Icons</a>
             </h1>
             <div style="font-size: 1rem; line-height: 1.75rem;" class="mt-4 text-center demo-introduction">