[Site] Remove light mode & clean templates

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

@@ -1,6 +1,6 @@
 .components-container {
   background: var(--bs-body-bg);
-  border-radius: 15px;
+  border-radius: 1rem;
   border: 0.66px solid var(--bs-secondary-bg-subtle);
 
   h4 {
@@ -10,12 +10,14 @@
 
 .ux-container {
   border: 1px solid var(--bs-secondary-bg-subtle);
-  border-radius: 12px;
+  border-radius: 1rem;
 }
 
+
+
 .markdown-container {
   border: 1px solid var(--bs-secondary-bg-subtle);
-  border-radius: 5px;
+  border-radius: .75rem;
   height: 100%;
   width: 100%;
   position: relative;

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

@@ -11,8 +11,6 @@
 }
 
 .img-dark-negative {
-    [data-bs-theme="dark"] & {
-        filter: invert(100%) hue-rotate(180deg);
-    }
+    filter: invert(100%) hue-rotate(180deg);
 }
 

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

@@ -15,7 +15,9 @@
 @import "../../vendor/twbs/bootstrap/scss/maps";
 @import "../../vendor/twbs/bootstrap/scss/mixins";
 @import "../../vendor/twbs/bootstrap/scss/utilities";
-@import "../../vendor/twbs/bootstrap/scss/root";
+
+// @import "../../vendor/twbs/bootstrap/scss/root";
+@import "vendor/bootstrap/root";
 
 // Layout & components
 @import "../../vendor/twbs/bootstrap/scss/reboot";
@@ -86,7 +88,6 @@
 @import "components/Tag";
 @import "components/Terminal";
 @import "components/TerminalCommand";
-@import "components/ThemeSwitcher";
 
 // Utilities
 @import "utilities/arrow";

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

@@ -46,7 +46,7 @@ button:active {
 }
 
 a.link {
-  --color: #d9438e;
+  --color: var(--bs-code-color);
   color: var(--color);
   position: relative;
   &:after {

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

@@ -13,55 +13,55 @@
   display: none;
 }
 
-.Banner .container-xxl {
-  max-width: 1320px;
-  margin: 0 auto;
-}
-
 .BannerInner {
   display: flex;
   flex-direction: column;
-  padding: 2rem 1rem;
+  padding: 1rem 0;
   gap: 1rem;
   position: relative;
+  max-width: 920px;
+  margin: 0 auto;
 }
 
 .BannerMedia {
   align-self: center;
   justify-self: center;
 }
 .BannerImage {
-  width: 92px;
+  width: max(10vw, 40px);
   height: auto;
-  filter: drop-shadow(1px 1px 8px #000) drop-shadow(2px 2px 32px #970404);
+  filter: drop-shadow(1px 1px .5rem #000) drop-shadow(2px 2px 2rem #970404);
 }
 
 .BannerContent {
   flex: 1;
   display: flex;
   flex-direction: column;
   place-content: center;
-  color: #fff;
-  font-family: var(--font-family-text);
+  gap: 0.5rem;
+  text-wrap: balance;
 }
 
 .BannerTitle {
   text-align: center;
-  font-size: 1.5rem;
+  font-size: 1.2em;
   font-family: var(--font-family-title);
+  margin: 0;
 }
-.BannerTitle a {
+.BannerTitle a:hover {
   text-shadow: 0 0 1px 4px red;
-  font-size: 1.05em;
 }
 
 .BannerText {
-  margin-block-end: 0.5rem;
+  text-align: center;
+  margin: 0;
+  font-size: 0.85rem;
+  line-height: 1.2;
+  font-weight: 300;
 }
 .BannerText em {
   text-decoration: underline;
   text-underline-offset: .25rem;
-  text-underline-style: double;
 }
 
 .BannerAction {
@@ -73,20 +73,19 @@
 .BannerButton {
   display: flex;
   align-items: center;
-  padding: .75rem 1.5rem;
+  padding: .35em .75em;
   align-self: center;
   color: #fffc;
-  font-size: 1.5rem;
+  font-size: 1.1em;
   font-family: var(--font-family-title);
-  gap: .5rem;
+  gap: .5em;
   justify-content: center;
   background: linear-gradient(#000e, #000d) padding-box,
   linear-gradient(90deg, #D65831 0%, #D2D631 36.52%, #31D673 71.83%, #3aa3ff 100%) border-box;
-  border-radius: 2rem;
-  border: 4px solid transparent;
+  border-radius: 2em;
+  border: 2px solid transparent;
   transition: all 250ms linear;
 }
-
 .BannerButton:hover {
   color: #fff;
 }
@@ -102,21 +101,16 @@
   color: currentColor;
   transition: all 250ms linear;
 }
-
 .BannerButton:hover svg {
   transform: scale(1.1);
 }
 
 @media screen and (min-width: 768px) {
   .BannerImage {
-    width: 128px;
+    width: 64px;
   }
   .BannerInner {
     flex-direction: row;
-    padding: 2rem;
-    gap: 4rem;
-  }
-  .BannerTitle {
-    text-align: left;
+    padding: 1rem 2rem;
   }
 }

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

@@ -79,11 +79,7 @@
 .ChangelogItem__Content {
   padding: 1.5rem;
   border-radius: 0.5rem;
-  background-color: #eef0f91a;
   border: 1px solid var(--bs-secondary-bg);
-}
-
-[data-bs-theme="dark"] .ChangelogItem__Content {
   background-color: #1c2024;
 }
 
@@ -114,10 +110,6 @@
   margin-block-end: 0;
 }
 
-.ChangelogItem [open] .ChangelogItem__Title {
-  font-size: 1.25rem;
-}
-
 .ChangelogItem__Text {
   margin-top: 1rem;
   padding-block-start: 1rem;

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

@@ -50,7 +50,7 @@
   flex: 1;
   border-bottom-left-radius: var(--radius);
   border-bottom-right-radius: var(--radius);
-  gap: .15rem;
+  gap: .5rem;
   display: flex;
   flex-direction: column;
 }
@@ -60,7 +60,6 @@
   font-weight: 700;
   margin: 0;
   font-family: var(--font-family-title);
-  padding: .25rem;
 }
 
 .DemoCard__description {
@@ -70,7 +69,6 @@
   transition: all 250ms ease-in-out;
   opacity: .65;
   line-height: 1.4;
-  padding: .25rem;
   margin: 0;
 }
 .DemoCard:hover .DemoCard__description {
@@ -80,4 +78,7 @@
 .DemoCard__tags {
   margin-top: auto;
   margin-bottom: 0;
+  display: flex;
+  flex-wrap: wrap;
+    gap: .5rem;
 }

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

@@ -13,6 +13,15 @@
   border-bottom-right-radius: 12px;
 }
 
-.demo-chat > .DemoContainer-inner {
-  border-radius: 0;
+.demo-introduction {
+  max-inline-size: 800px;
+  margin-inline: auto;
+}
+
+.demo-introduction a {
+  color: var(--bs-code-color);
+  font-weight: 500;
+}
+.demo-introduction code {
+  font-size: 0.95em;
 }

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

@@ -148,14 +148,12 @@
   }
 }
 
-[data-bs-theme="dark"] {
-  .IconCard {
-    background: rgb(0 0 0 / 50%);
-  }
+.IconCard {
+  background: rgb(0 0 0 / 50%);
+}
 
-  .IconCard__icon {
-    filter: invert(1) hue-rotate(180deg);
-  }
+.IconCard__icon {
+  filter: invert(1) hue-rotate(180deg);
 }
 
 .Icons-icon:hover {

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

@@ -99,7 +99,7 @@
   height: auto;
   filter: invert(var(--invert));
 }
-[data-bs-theme="dark"] .IconModal__icon img {
+.IconModal__icon img {
   --invert: 1;
 }
 

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

@@ -76,10 +76,7 @@
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
-
-  [data-bs-theme="dark"] & {
-    background-blend-mode: darken;
-  }
+  background-blend-mode: darken;
 
   img {
     width: calc(0.4 * var(--logo-size));

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

@@ -16,7 +16,5 @@
     padding-top: 3rem;
   }
 
-  [data-bs-theme="dark"] & {
-    background-blend-mode: hue !important;
-  }
+  background-blend-mode: hue !important;
 }

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

@@ -32,7 +32,7 @@
   border-radius: 4px;
 }
 
-[data-bs-theme="dark"] .ProductGrid_item {
+.ProductGrid_item {
   background: var(--bs-secondary-bg-subtle);
   background-blend-mode: color-burn;
 }

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

@@ -1,22 +1,18 @@
 
 .Tag {
-  --background: #E2EAF2;
-  --color: #191E27;
+  --color: #C5DBF0;
+  --background: #1a1e29;
 
-  font-stretch: semi-condensed;
+  font-stretch: condensed;
   font-weight: 400;
   display: inline-flex;
-  font-size: .65rem;
-  padding-inline: .4rem;
+  font-size: .7rem;
+  padding-inline: .5rem;
   line-height: 1.4rem;
-  border-radius: .35rem;
+  border-radius: .45rem;
   text-transform: uppercase;
   vertical-align: middle;
   color: var(--color);
   background: var(--background);
-}
-
-[data-bs-theme="dark"] .Tag {
-  --background: #191E27;
-  --color: #A5C4E2;
+  border: 1px solid #06080D88;
 }