minor #1811 [Site] Adapt highlighted code blocks to tempest (smnandre)

This PR was merged into the 2.x branch.

Discussion
----------

[Site] Adapt highlighted code blocks to tempest

Very mid.. but i'd like to clean the "CodeBLock" / "Terminal" / "CodeLine" first :)

Commits
-------

b1c42ac [Site] Adapt highlighted code blocks to tempest

Author: kbond

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

@@ -15,4 +15,8 @@
   .AppHeader + * &  {
     padding-top: 3rem;
   }
+
+  [data-bs-theme="dark"] & {
+    background-blend-mode: hue !important;
+  }
 }

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

@@ -1,15 +1,16 @@
 .Terminal {
     --border-radius: .75rem;
+    --bg-color: #1b1e21;
 
-    background-color: $n-900;
+    background-color: var(--bg-color);
     border-radius: .75rem;
     position: relative;
     font-size: 12px;
 }
 
 .Terminal_header {
     display: flex;
-    background-color: $n-900;
+    background-color: #0D0D0DBA;
     border-top-left-radius: var(--border-radius);
     border-top-right-radius: var(--border-radius);
     align-items: center;
@@ -26,11 +27,10 @@
     .nav-link {
         border-bottom: 0;
         margin-bottom: 0;
-        color: inherit;
         color: $n-100;
     }
     .nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
-        background-color: $n-800;
+        background-color: var(--bg-color);
         border-color: $n-800;
         color: $n-100;
     }
@@ -84,7 +84,6 @@
 
 
 .Terminal_body {
-    background-color: $n-800;
     height: 100%;
     font-family: var(--font-family-code);
     font-size: 14px;
@@ -140,14 +139,19 @@
     margin: 0;
 }
 .Terminal_content {
-    font-size: .9rem;
     overflow-x: auto;
     overflow-y: auto;
-    padding: 1rem;
+    padding: 1em;
     pre {
         overflow: visible;
     }
     scrollbar-width: thin;
+    pre {
+        background: none;
+    }
+    code {
+        background: none;
+    }
 }
 
 @media screen and (min-width: 768px) {

ux.symfony.com/assets/styles/vendor/_highlight.scss

@@ -1,34 +1,39 @@
-/** tempest/highlight theme (https://github.com/tempestphp/highlight/blob/main/src/Themes/Css/dracula.css) */
+.Terminal_content {
+    pre, code {
+        color: #cad3f5;
+    }
+}
+
 .hl-keyword {
-    color: #FF79C6;
+    color: #c6a0f6;
 }
 
 .hl-property {
-    color: #50FA7B;
+    color: #8aadf4;
 }
 
 .hl-attribute {
-    font-style: italic;
+//    font-style: italic;
 }
 
 .hl-type {
-    color: #8BE9FD;
+    color: #eed49f;
 }
 
 .hl-generic {
-    color: #9d3af6;
+    color: #ed8796;
 }
 
 .hl-value {
-    color: #F1FA8C;
+    color: #a6da95;
 }
 
 .hl-variable {
-    color: #F8F8F2;
+    color: #CFCFCF;
 }
 
 .hl-comment {
-    color: #6272A4;
+    color: #6e738d;
 }
 
 .hl-blur {

ux.symfony.com/templates/ux_packages/translator.html.twig

@@ -27,14 +27,6 @@
 
 {% block demo_content %}
 
-        {% apply highlight('js') %}
-            import { trans, SAY_HELLO } from '../translator';
-
-            trans(SAY_HELLO, {
-                name: 'Fabien',
-            }})
-        {% endapply %}
-
         {% embed 'ux_packages/translator/_translator_demo_block.html.twig' with {
             message: 'HELLO',
         } %}

ux.symfony.com/templates/ux_packages/translator/_translator_demo_block.html.twig

@@ -5,7 +5,7 @@
      data-translator-demo-block-message-value="{{ message }}"
 >
     <div class="col-5">
-        <div class="Terminal_body">
+        <div class="Terminal Terminal_body">
             <div class="Terminal_content">
                 <pre data-translator-demo-block-target="code">
 <small><span class="hl-keyword">import</span> { trans, <span class="hl-variable constant_">{{ message }}</span> } <span class="hl-keyword">from</span> '<span class="hl-value">../translator</span>';</small>