diff --git a/ux.symfony.com/assets/controllers/theme-switcher-controller.js b/ux.symfony.com/assets/controllers/theme-switcher-controller.js deleted file mode 100644 index 4cdee07faa6..00000000000 --- a/ux.symfony.com/assets/controllers/theme-switcher-controller.js +++ /dev/null @@ -1,28 +0,0 @@ -import { Controller } from '@hotwired/stimulus'; - -export default class extends Controller { - switch() { - let currentTheme = localStorage.getItem('user-theme'); - if (!currentTheme) { - currentTheme = document.documentElement.getAttribute('data-bs-theme'); - } - - const theme = currentTheme === 'dark' ? 'light' : 'dark'; - - this.select(theme); - } - - select (theme) { - clearTimeout(this.timeout); - - this.element.setAttribute('data-switch', theme); - localStorage.setItem('user-theme', theme); - - this.timeout = setTimeout(() => { - /** - * Small delay to allow CSS transitions during theme switch. - */ - document.documentElement.setAttribute('data-bs-theme', theme); - }, 250); - } -} diff --git a/ux.symfony.com/assets/images/heart.png b/ux.symfony.com/assets/images/heart.png index f957e1ed33b..324a62166d8 100644 Binary files a/ux.symfony.com/assets/images/heart.png and b/ux.symfony.com/assets/images/heart.png differ diff --git a/ux.symfony.com/assets/images/heart.webp b/ux.symfony.com/assets/images/heart.webp index 44e8d73791a..41f562e88cb 100644 Binary files a/ux.symfony.com/assets/images/heart.webp and b/ux.symfony.com/assets/images/heart.webp differ diff --git a/ux.symfony.com/assets/images/sf-ux.svg b/ux.symfony.com/assets/images/sf-ux.svg index 141a4e57e63..a44fd6d3043 100644 --- a/ux.symfony.com/assets/images/sf-ux.svg +++ b/ux.symfony.com/assets/images/sf-ux.svg @@ -1,4 +1,4 @@ - + diff --git a/ux.symfony.com/assets/styles/_container.scss b/ux.symfony.com/assets/styles/_container.scss index 438e1f686af..9f25aa2f3b3 100644 --- a/ux.symfony.com/assets/styles/_container.scss +++ b/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; diff --git a/ux.symfony.com/assets/styles/_images.scss b/ux.symfony.com/assets/styles/_images.scss index fb54bf1f929..b4e5e41322f 100644 --- a/ux.symfony.com/assets/styles/_images.scss +++ b/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); } diff --git a/ux.symfony.com/assets/styles/app.scss b/ux.symfony.com/assets/styles/app.scss index d2b2e33c5b5..c938f4fa500 100644 --- a/ux.symfony.com/assets/styles/app.scss +++ b/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"; diff --git a/ux.symfony.com/assets/styles/app/_html.scss b/ux.symfony.com/assets/styles/app/_html.scss index 1daaeffcefc..1904d09413d 100644 --- a/ux.symfony.com/assets/styles/app/_html.scss +++ b/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 { diff --git a/ux.symfony.com/assets/styles/components/_Banner.scss b/ux.symfony.com/assets/styles/components/_Banner.scss index 2821acc26b2..03f44de7b47 100644 --- a/ux.symfony.com/assets/styles/components/_Banner.scss +++ b/ux.symfony.com/assets/styles/components/_Banner.scss @@ -13,17 +13,14 @@ 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 { @@ -31,9 +28,9 @@ 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 { @@ -41,27 +38,30 @@ 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; } } diff --git a/ux.symfony.com/assets/styles/components/_Changelog.scss b/ux.symfony.com/assets/styles/components/_Changelog.scss index 69f0a7ff863..4c261239cf3 100644 --- a/ux.symfony.com/assets/styles/components/_Changelog.scss +++ b/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; diff --git a/ux.symfony.com/assets/styles/components/_DemoCard.scss b/ux.symfony.com/assets/styles/components/_DemoCard.scss index 9b295b1981c..18ef3d0e751 100644 --- a/ux.symfony.com/assets/styles/components/_DemoCard.scss +++ b/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; } diff --git a/ux.symfony.com/assets/styles/components/_DemoContainer.scss b/ux.symfony.com/assets/styles/components/_DemoContainer.scss index 82736d4c857..cc058d88f2d 100644 --- a/ux.symfony.com/assets/styles/components/_DemoContainer.scss +++ b/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; } diff --git a/ux.symfony.com/assets/styles/components/_IconGrid.scss b/ux.symfony.com/assets/styles/components/_IconGrid.scss index d7285c12667..2e663b9762a 100644 --- a/ux.symfony.com/assets/styles/components/_IconGrid.scss +++ b/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 { diff --git a/ux.symfony.com/assets/styles/components/_IconModal.scss b/ux.symfony.com/assets/styles/components/_IconModal.scss index 4063d3aefe3..26243932fa0 100644 --- a/ux.symfony.com/assets/styles/components/_IconModal.scss +++ b/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; } diff --git a/ux.symfony.com/assets/styles/components/_PackageBox.scss b/ux.symfony.com/assets/styles/components/_PackageBox.scss index 9fd414aea95..583de00e1ca 100644 --- a/ux.symfony.com/assets/styles/components/_PackageBox.scss +++ b/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)); diff --git a/ux.symfony.com/assets/styles/components/_PackageHeader.scss b/ux.symfony.com/assets/styles/components/_PackageHeader.scss index 2e5206465f9..4dd3f8a0e52 100644 --- a/ux.symfony.com/assets/styles/components/_PackageHeader.scss +++ b/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; } diff --git a/ux.symfony.com/assets/styles/components/_ProductGrid.scss b/ux.symfony.com/assets/styles/components/_ProductGrid.scss index d5107d631ed..4812ccec54e 100644 --- a/ux.symfony.com/assets/styles/components/_ProductGrid.scss +++ b/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; } diff --git a/ux.symfony.com/assets/styles/components/_Tag.scss b/ux.symfony.com/assets/styles/components/_Tag.scss index 798741b3711..8b54da8e0fc 100644 --- a/ux.symfony.com/assets/styles/components/_Tag.scss +++ b/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; } diff --git a/ux.symfony.com/assets/styles/components/_Terminal.scss b/ux.symfony.com/assets/styles/components/_Terminal.scss index 996a79a0795..7f7dca06f0a 100644 --- a/ux.symfony.com/assets/styles/components/_Terminal.scss +++ b/ux.symfony.com/assets/styles/components/_Terminal.scss @@ -82,10 +82,8 @@ &.green { background: $green; } - [data-bs-theme="dark"] & { - opacity: .85; - filter: grayscale(.4); - } + opacity: .85; + filter: grayscale(.4); } @@ -99,9 +97,7 @@ border: 1px solid var(--bs-body-color); position: relative; - [data-bs-theme="dark"] & { - border: 1px solid var(--bs-secondary-bg-subtle); - } + border: 1px solid var(--bs-secondary-bg-subtle); } .Terminal_header + .Terminal_body, diff --git a/ux.symfony.com/assets/styles/components/_ThemeSwitcher.scss b/ux.symfony.com/assets/styles/components/_ThemeSwitcher.scss deleted file mode 100644 index ea4a991b453..00000000000 --- a/ux.symfony.com/assets/styles/components/_ThemeSwitcher.scss +++ /dev/null @@ -1,40 +0,0 @@ -.ThemeSwitcher { - --mod-light: 1; - --mod-dark: 0; - - [data-bs-theme="dark"] & { - --mod-light: 0; - --mod-dark: 1; - } - - position: relative; - display: inline-flex; - background: none; - border: none; - height: 1em; - width: 1em; - color: var(--bs-body-color); - - .Icon { - position: absolute; - border: none; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); - color: inherit; - transition: opacity 250ms ease-in-out, - scale 250ms linear; - } - - .Icon--theme-light { - opacity: calc(var(--mod-light)); - scale: calc(var(--mod-light)); - } - - .Icon--theme-dark { - opacity: calc(var(--mod-dark)); - scale: calc(var(--mod-dark)); - } -} - - diff --git a/ux.symfony.com/assets/styles/demos/live-memory.min.css b/ux.symfony.com/assets/styles/demos/live-memory.min.css index 26f2a11023b..a8f6892db8b 100644 --- a/ux.symfony.com/assets/styles/demos/live-memory.min.css +++ b/ux.symfony.com/assets/styles/demos/live-memory.min.css @@ -20,7 +20,6 @@ @import "live-memory/components/Metric"; @import "live-memory/components/Overlay"; @import "live-memory/components/Score"; -@import "live-memory/components/ThemeSwitch"; @import "live-memory/components/Timer"; @import "../utilities/background"; diff --git a/ux.symfony.com/assets/styles/demos/live-memory/app/_root.scss b/ux.symfony.com/assets/styles/demos/live-memory/app/_root.scss index 8a7b51eef43..cc93abf5698 100644 --- a/ux.symfony.com/assets/styles/demos/live-memory/app/_root.scss +++ b/ux.symfony.com/assets/styles/demos/live-memory/app/_root.scss @@ -26,18 +26,7 @@ --live-memory-pink-rgb: 189, 58, 225; } -:root, -[data-theme=light], -[data-bs-theme=light] { - --color-text: #212529; - --color-text-rgb: 33 37 41; - --color-background: #fff; - --color-background-rgb: 255 255 255; - --color-border: #DEE2E6; -} - -[data-theme=dark], -[data-bs-theme=dark] { +:root { --color-text: #DEE2E6; --color-text-rgb: 222 226 230; --color-background: #212529; diff --git a/ux.symfony.com/assets/styles/demos/live-memory/components/_Board.scss b/ux.symfony.com/assets/styles/demos/live-memory/components/_Board.scss index 6409f12a8bd..f564cfde3ac 100644 --- a/ux.symfony.com/assets/styles/demos/live-memory/components/_Board.scss +++ b/ux.symfony.com/assets/styles/demos/live-memory/components/_Board.scss @@ -106,7 +106,7 @@ --footer-color: var(--color-text); --footer-color-subtle: var(--color-text); } -[data-bs-theme="dark"] .LiveMemory-Footer { +.LiveMemory-Footer { mix-blend-mode: overlay; } diff --git a/ux.symfony.com/assets/styles/demos/live-memory/components/_ThemeSwitch.scss b/ux.symfony.com/assets/styles/demos/live-memory/components/_ThemeSwitch.scss deleted file mode 100644 index 713fabeb7ff..00000000000 --- a/ux.symfony.com/assets/styles/demos/live-memory/components/_ThemeSwitch.scss +++ /dev/null @@ -1,62 +0,0 @@ -// ----------------------------------------------------------------- -// ThemeSwitch -// ----------------------------------------------------------------- - -.LiveMemory-ThemeSwitch { - position: relative; - transform-style: preserve-3d; - cursor: pointer; - border: 0; - padding: 0; - width: 2.25rem; - height: 2.25rem; - border-radius: 12%; - transition: transform 250ms linear; -} -[data-bs-theme="dark"] .LiveMemory-ThemeSwitch { - transform: rotateY(180deg); -} -.LiveMemory-ThemeSwitch[data-switch="dark"] { - transform: rotateY(180deg); -} -.LiveMemory-ThemeSwitch[data-switch="light"] { - transform: rotateY(0deg); - } - -.LiveMemory-ThemeSwitch-Mode { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: grid; - place-content: center; - align-items: center; - backface-visibility: hidden; - color: var(--color-text); - background: rgb(var(--color-background-rgb) / 50%); - border-radius: 4px; - opacity: .50; -} - -.LiveMemory-ThemeSwitch:hover .LiveMemory-ThemeSwitch-Mode { - opacity: 1; - transition: 250ms; - background: rgb(var(--color-background-rgb) / 100%); -} - -.LiveMemory-ThemeSwitch-Dark { - transform: rotateY(180deg); -} -.LiveMemory-ThemeSwitch-Dark:hover { - background: var(--color-background); - border: var(--color-border); -} - -.LiveMemory-ThemeSwitch-Light { - transform: rotateY(0deg); -} -.LiveMemory-ThemeSwitch-Light:hover { - background: var(--color-background); - border: var(--color-border); -} diff --git a/ux.symfony.com/assets/styles/sections/_header.scss b/ux.symfony.com/assets/styles/sections/_header.scss index d06a074e6fc..c6dd09dd5ef 100644 --- a/ux.symfony.com/assets/styles/sections/_header.scss +++ b/ux.symfony.com/assets/styles/sections/_header.scss @@ -3,7 +3,7 @@ } .AppHeader { - --color-background-rgb: 255 255 255; + --color-background-rgb: 0 0 0; --text-color: var(--bs-body-color); position: absolute; inset: 0 0 auto; @@ -14,11 +14,6 @@ padding-top: 2rem; } } -[data-bs-theme="dark"] { - .AppHeader { - --color-background-rgb: 0 0 0; - } -} .AppHeader--white { --text-color: #fff; } @@ -59,17 +54,10 @@ body.locked { height: var(--height); width: calc(161 / 30 * var(--height)); display: block; - transition: filter 250ms ease-in; flex-shrink: 0; - .AppHeader--white &, - [data-bs-theme="dark"] & { - filter: invert(1); - } img { - display: block; width: 100%; - height: 100%; - object-fit: fill; + height: auto; } } diff --git a/ux.symfony.com/assets/styles/sections/_hero.scss b/ux.symfony.com/assets/styles/sections/_hero.scss index d22fb9b7545..7869ce5ccd1 100644 --- a/ux.symfony.com/assets/styles/sections/_hero.scss +++ b/ux.symfony.com/assets/styles/sections/_hero.scss @@ -7,6 +7,8 @@ -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-style: normal; + filter: brightness(102%) contrast(200%) saturate(100%) drop-shadow(1px 1px 3px #0008); + letter-spacing: 0; } .hero-background { diff --git a/ux.symfony.com/assets/styles/sections/_nav.scss b/ux.symfony.com/assets/styles/sections/_nav.scss index eb2e23a5b65..e786cf0fd79 100644 --- a/ux.symfony.com/assets/styles/sections/_nav.scss +++ b/ux.symfony.com/assets/styles/sections/_nav.scss @@ -82,7 +82,7 @@ font-size: 1rem; font-weight: 500; letter-spacing: 0; - opacity: .85; + opacity: .9; transition: opacity 250ms; padding: 0; border: none; @@ -109,26 +109,25 @@ .AppNav_badge { position: absolute; - color: lightskyblue; right: -1rem; top: -.75rem; text-align: right; padding: .2rem .4rem; - font-size: .75rem; - border: 1px solid var(--color-text); - font-stretch: condensed; + font-size: .5rem; font-family: var(--font-family-text); - height: 1rem; - line-height: normal; + text-transform: uppercase; + line-height: 1; + color: #fff; + background: rgba(0,0,0,0.1); + border-radius: .25rem; + opacity: 0.5; + display: flex; +} +.AppNav_badge:after { + content: attr(data-content); } @media (max-width: 859px) { .AppNav_badge { display: none; } } - -@media (max-width: 360px) { - .ThemeSwitcher + .AppNav_item { - display: none; - } -} diff --git a/ux.symfony.com/assets/styles/utilities/_arrow.scss b/ux.symfony.com/assets/styles/utilities/_arrow.scss index a259988a71c..aa2aaf3c059 100644 --- a/ux.symfony.com/assets/styles/utilities/_arrow.scss +++ b/ux.symfony.com/assets/styles/utilities/_arrow.scss @@ -3,11 +3,8 @@ height: 36px; background: url(../images/arrow.png) no-repeat center; background-size: contain; - - [data-bs-theme="dark"] & { - filter: invert(100); - opacity: .75; - } + filter: invert(100); + opacity: .75; } .arrow-2 { @@ -15,9 +12,6 @@ background-size: contain; width: 100%; height: 66px; - - [data-bs-theme="dark"] & { - filter: invert(100); - opacity: .75; - } + filter: invert(100); + opacity: .75; } diff --git a/ux.symfony.com/assets/styles/utilities/_background.scss b/ux.symfony.com/assets/styles/utilities/_background.scss index 612f5556711..fe03bd83245 100644 --- a/ux.symfony.com/assets/styles/utilities/_background.scss +++ b/ux.symfony.com/assets/styles/utilities/_background.scss @@ -1,11 +1,7 @@ .background-glass { --glass-opacity: .75; - --glass-color: 255 255 255; + --glass-color: 0 0 0; background: rgba(var(--glass-color) / var(--glass-opacity)); - - [data-bs-theme="dark"] & { - --glass-color: 0 0 0; - } } .background-cover { diff --git a/ux.symfony.com/assets/styles/vendor/_bootstrap.scss b/ux.symfony.com/assets/styles/vendor/_bootstrap.scss index 2cccb5b9528..8e8674ce224 100644 --- a/ux.symfony.com/assets/styles/vendor/_bootstrap.scss +++ b/ux.symfony.com/assets/styles/vendor/_bootstrap.scss @@ -18,7 +18,6 @@ opacity: 1; } - [data-bs-theme="dark"] & { --color: var(--bs-body-color); --bs-btn-color: var(--color); @@ -34,7 +33,6 @@ --bs-btn-disabled-color: var(--color); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--color); - } } .btn-sm { diff --git a/ux.symfony.com/assets/styles/vendor/bootstrap/_root.scss b/ux.symfony.com/assets/styles/vendor/bootstrap/_root.scss new file mode 100644 index 00000000000..dd551fb340c --- /dev/null +++ b/ux.symfony.com/assets/styles/vendor/bootstrap/_root.scss @@ -0,0 +1,184 @@ +:root { + // Note: Custom variable values only support SassScript inside `#{}`. + + // Colors + // + // Generate palettes for full colors, grays, and theme colors. + + @each $color, $value in $colors { + --#{$prefix}#{$color}: #{$value}; + } + + @each $color, $value in $grays { + --#{$prefix}gray-#{$color}: #{$value}; + } + + @each $color, $value in $theme-colors { + --#{$prefix}#{$color}: #{$value}; + } + + @each $color, $value in $theme-colors-rgb { + --#{$prefix}#{$color}-rgb: #{$value}; + } + + @each $color, $value in $theme-colors-text { + --#{$prefix}#{$color}-text-emphasis: #{$value}; + } + + @each $color, $value in $theme-colors-bg-subtle { + --#{$prefix}#{$color}-bg-subtle: #{$value}; + } + + @each $color, $value in $theme-colors-border-subtle { + --#{$prefix}#{$color}-border-subtle: #{$value}; + } + + --#{$prefix}white-rgb: #{to-rgb($white)}; + --#{$prefix}black-rgb: #{to-rgb($black)}; + + // Fonts + + // Note: Use `inspect` for lists so that quoted items keep the quotes. + // See https://github.com/sass/sass/issues/2383#issuecomment-336349172 + --#{$prefix}font-sans-serif: #{inspect($font-family-sans-serif)}; + --#{$prefix}font-monospace: #{inspect($font-family-monospace)}; + --#{$prefix}gradient: #{$gradient}; + + // Root and body + // scss-docs-start root-body-variables + @if $font-size-root != null { + --#{$prefix}root-font-size: #{$font-size-root}; + } + --#{$prefix}body-font-family: #{inspect($font-family-base)}; + @include rfs($font-size-base, --#{$prefix}body-font-size); + --#{$prefix}body-font-weight: #{$font-weight-base}; + --#{$prefix}body-line-height: #{$line-height-base}; + @if $body-text-align != null { + --#{$prefix}body-text-align: #{$body-text-align}; + } + + --#{$prefix}body-color: #{$body-color}; + --#{$prefix}body-color-rgb: #{to-rgb($body-color)}; + --#{$prefix}body-bg: #{$body-bg}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg)}; + + --#{$prefix}emphasis-color: #{$body-emphasis-color}; + --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)}; + + --#{$prefix}secondary-color: #{$body-secondary-color}; + --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)}; + --#{$prefix}secondary-bg: #{$body-secondary-bg}; + --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)}; + + --#{$prefix}tertiary-color: #{$body-tertiary-color}; + --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)}; + --#{$prefix}tertiary-bg: #{$body-tertiary-bg}; + --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)}; + // scss-docs-end root-body-variables + + --#{$prefix}heading-color: #{$headings-color}; + + --#{$prefix}link-color: #{$link-color}; + --#{$prefix}link-color-rgb: #{to-rgb($link-color)}; + --#{$prefix}link-decoration: #{$link-decoration}; + + --#{$prefix}link-hover-color: #{$link-hover-color}; + --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)}; + + @if $link-hover-decoration != null { + --#{$prefix}link-hover-decoration: #{$link-hover-decoration}; + } + + --#{$prefix}code-color: #{$code-color}; + --#{$prefix}highlight-color: #{$mark-color}; + --#{$prefix}highlight-bg: #{$mark-bg}; + + // scss-docs-start root-border-var + --#{$prefix}border-width: #{$border-width}; + --#{$prefix}border-style: #{$border-style}; + --#{$prefix}border-color: #{$border-color}; + --#{$prefix}border-color-translucent: #{$border-color-translucent}; + + --#{$prefix}border-radius: #{$border-radius}; + --#{$prefix}border-radius-sm: #{$border-radius-sm}; + --#{$prefix}border-radius-lg: #{$border-radius-lg}; + --#{$prefix}border-radius-xl: #{$border-radius-xl}; + --#{$prefix}border-radius-xxl: #{$border-radius-xxl}; + --#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency + --#{$prefix}border-radius-pill: #{$border-radius-pill}; + // scss-docs-end root-border-var + + --#{$prefix}box-shadow: #{$box-shadow}; + --#{$prefix}box-shadow-sm: #{$box-shadow-sm}; + --#{$prefix}box-shadow-lg: #{$box-shadow-lg}; + --#{$prefix}box-shadow-inset: #{$box-shadow-inset}; + + // Focus styles + // scss-docs-start root-focus-variables + --#{$prefix}focus-ring-width: #{$focus-ring-width}; + --#{$prefix}focus-ring-opacity: #{$focus-ring-opacity}; + --#{$prefix}focus-ring-color: #{$focus-ring-color}; + // scss-docs-end root-focus-variables + + // scss-docs-start root-form-validation-variables + --#{$prefix}form-valid-color: #{$form-valid-color}; + --#{$prefix}form-valid-border-color: #{$form-valid-border-color}; + --#{$prefix}form-invalid-color: #{$form-invalid-color}; + --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color}; + // scss-docs-end root-form-validation-variables + + + + + + // scss-docs-start root-dark-mode-vars + --#{$prefix}body-color: #{$body-color-dark}; + --#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)}; + --#{$prefix}body-bg: #{$body-bg-dark}; + --#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)}; + + --#{$prefix}emphasis-color: #{$body-emphasis-color-dark}; + --#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)}; + + --#{$prefix}secondary-color: #{$body-secondary-color-dark}; + --#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)}; + --#{$prefix}secondary-bg: #{$body-secondary-bg-dark}; + --#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)}; + + --#{$prefix}tertiary-color: #{$body-tertiary-color-dark}; + --#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)}; + --#{$prefix}tertiary-bg: #{$body-tertiary-bg-dark}; + --#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)}; + + @each $color, $value in $theme-colors-text-dark { + --#{$prefix}#{$color}-text-emphasis: #{$value}; + } + + @each $color, $value in $theme-colors-bg-subtle-dark { + --#{$prefix}#{$color}-bg-subtle: #{$value}; + } + + @each $color, $value in $theme-colors-border-subtle-dark { + --#{$prefix}#{$color}-border-subtle: #{$value}; + } + + --#{$prefix}heading-color: #{$headings-color-dark}; + + --#{$prefix}link-color: #{$link-color-dark}; + --#{$prefix}link-hover-color: #{$link-hover-color-dark}; + --#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)}; + --#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)}; + + --#{$prefix}code-color: #{$code-color-dark}; + --#{$prefix}highlight-color: #{$mark-color-dark}; + --#{$prefix}highlight-bg: #{$mark-bg-dark}; + + --#{$prefix}border-color: #{$border-color-dark}; + --#{$prefix}border-color-translucent: #{$border-color-translucent-dark}; + + --#{$prefix}form-valid-color: #{$form-valid-color-dark}; + --#{$prefix}form-valid-border-color: #{$form-valid-border-color-dark}; + --#{$prefix}form-invalid-color: #{$form-invalid-color-dark}; + --#{$prefix}form-invalid-border-color: #{$form-invalid-border-color-dark}; + // scss-docs-end root-dark-mode-vars +} diff --git a/ux.symfony.com/src/Service/LiveDemoRepository.php b/ux.symfony.com/src/Service/LiveDemoRepository.php index 1d917b87299..b062a33baab 100644 --- a/ux.symfony.com/src/Service/LiveDemoRepository.php +++ b/ux.symfony.com/src/Service/LiveDemoRepository.php @@ -22,18 +22,16 @@ public function findAll(): array { return [ new LiveDemo( - 'auto-validating-form', - name: 'Auto-Validating Form', - description: 'Create a form that validates each field in-real-time as the user enters data!', - route: 'app_demo_live_component_auto_validating_form', + 'live-memory', + name: 'LiveMemory Card Game', + description: 'A Memorable Game UX with Live Components!', + route: 'app_demo_live_memory', longDescription: << -This renders a normal Symfony form but with extras added on top, -all generated from Symfony & Twig. +A Memorable Game UX with Live Components! Discover how to use Live Components to create a game with a vibrant interface, + rich interactions and real-time updates. This journey will take you through many features of Live Components, and you'll + learn how to use them to create a fun and engaging game. EOF, - tags: ['form', 'validation', 'inline'], + tags: ['game', 'time', 'events', 'LiveAction'], ), new LiveDemo( 'infinite-scroll', @@ -46,18 +44,6 @@ public function findAll(): array EOF, tags: ['pattern', 'pagination', 'navigation'], ), - new LiveDemo( - 'live-memory', - name: 'LiveMemory Card Game', - description: 'A Memorable Game UX with Live Components!', - route: 'app_demo_live_memory', - longDescription: << +This renders a normal Symfony form but with extras added on top, +all generated from Symfony & Twig. +EOF, + tags: ['form', 'validation', 'inline'], + ), new LiveDemo( 'dependent-form-fields', name: 'Dependent Form Fields', diff --git a/ux.symfony.com/src/Service/UxPackageRepository.php b/ux.symfony.com/src/Service/UxPackageRepository.php index a70a47075c0..2076d3f3c3c 100644 --- a/ux.symfony.com/src/Service/UxPackageRepository.php +++ b/ux.symfony.com/src/Service/UxPackageRepository.php @@ -26,7 +26,7 @@ public function findAll(?string $query = null): array 'Turbo', 'app_turbo', '#5920A0', - 'linear-gradient(95.22deg, #5920A0 -4.7%, #844EC9 105.43%)', + 'linear-gradient(95deg, #5920A0 -5%, #844EC9 105%)', 'Integration with Turbo for single-page-app and real-time experience', 'I need to transform my app into an SPA!' )) @@ -37,8 +37,8 @@ public function findAll(?string $query = null): array 'live-component', 'Live Components', 'app_live_component', - '#AC5727', - 'linear-gradient(94.81deg, #AC5727 -1.76%, #CB804A 104.47%)', + '#D98A11', + 'linear-gradient(124deg, #BF5421, #D98A11)', 'Build dynamic interfaces with zero JavaScript', 'I need Twig templates that update in real-time!' ), @@ -48,7 +48,7 @@ public function findAll(?string $query = null): array 'Autocomplete', 'app_autocomplete', '#DF275E', - 'linear-gradient(95.22deg, #DF275E -4.7%, #E85995 105.43%)', + 'linear-gradient(95deg, #DF275E -5%, #E85995 105%)', 'Ajax-powered, auto-completable `select` elements', 'I need an Ajax-autocomplete select field' ), @@ -58,7 +58,7 @@ public function findAll(?string $query = null): array 'Chart.js', 'app_chartjs', '#21A81E', - 'linear-gradient(95.26deg, #21A81E 0.06%, #45DD42 108.28%)', + 'linear-gradient(95deg, #21A81E, #45DD42 108%)', 'Easy charts with Chart.js', 'I need to build a chart' )) @@ -69,7 +69,7 @@ public function findAll(?string $query = null): array 'React', 'app_react', '#10A2CB', - 'linear-gradient(95.22deg, #10a2cb -4.7%, #42caf0 105.43%)', + 'linear-gradient(95deg, #10a2cb -5%, #42caf0 105%)', 'Quickly render `` components & pass them props.', 'I need to render React components from Twig' )) @@ -80,7 +80,7 @@ public function findAll(?string $query = null): array 'Vue.js', 'app_vue', '#35b67c', - 'linear-gradient(95.22deg, #35B67C -4.7%, #8CE3BC 105.43%)', + 'linear-gradient(95deg, #35B67C -5%, #8CE3BC 105%)', 'Quickly render `` components & pass them props.', 'I need to render Vue.js components from Twig' )) @@ -91,7 +91,7 @@ public function findAll(?string $query = null): array 'Svelte', 'app_svelte', '#FF3E00', - 'linear-gradient(137.59deg, #FF3E00 -7.89%, #FF8A00 110.57%)', + 'linear-gradient(115deg, #BE3030, #FF3E00)', 'Quickly render `` components & pass them props.', 'I need to render Svelte components from Twig', 'svelte.svg', @@ -103,7 +103,7 @@ public function findAll(?string $query = null): array 'Image Cropper', 'app_cropperjs', '#1E8FA8', - 'linear-gradient(135.73deg, #1E8FA8 -7.05%, #3FC0DC 105.11%)', + 'linear-gradient(136deg, #1E8FA8 -7%, #3FC0DC 105%)', 'Form Type and tools for cropping images', 'I need to add a JavaScript image cropper' )) @@ -114,7 +114,7 @@ public function findAll(?string $query = null): array 'Lazy Image', 'app_lazy_image', '#AC2777', - 'linear-gradient(133.55deg, #AC2777 -8.06%, #F246AD 104.87%)', + 'linear-gradient(136deg, #AC2777 -8%, #F246AD 105%)', 'Optimize Image Loading with BlurHash', 'I need to delay large image loading' ), @@ -124,7 +124,7 @@ public function findAll(?string $query = null): array 'Twig Components', 'app_twig_component', '#7FA020', - 'linear-gradient(95.22deg, #7FA020 -4.7%, #A1C94E 105.43%)', + 'linear-gradient(95deg, #7FA020 -5%, #A1C94E 105%)', 'Create PHP classes that can render themselves', 'I need to create PHP classes that render' ), @@ -134,7 +134,7 @@ public function findAll(?string $query = null): array 'Stylized Dropzone', 'app_dropzone', '#AC9F27', - 'linear-gradient(135.69deg, #AC9F27 -8.56%, #E8D210 106.51%)', + 'linear-gradient(135deg, #AC9F27 -8%, #E8D210 105%)', 'Form type for stylized "drop zone" for file uploads', 'I need an upload field that looks great' ), @@ -143,7 +143,7 @@ public function findAll(?string $query = null): array 'Swup Integration', 'app_swup', '#D87036', - 'linear-gradient(95.22deg, #D87036 -4.7%, #EA9633 105.43%)', + 'linear-gradient(95deg, #D87036 -5%, #EA9633 105%)', 'Integration with the page transition library Swup', 'I need stylized page transitions' )) @@ -154,7 +154,7 @@ public function findAll(?string $query = null): array 'Notify', 'app_notify', '#204CA0', - 'linear-gradient(94.17deg, #204CA0 -6.1%, #3D82EA 105.25%)', + 'linear-gradient(95deg, #204CA0 -6%, #3D82EA 105%)', 'Trigger native browser notifications from inside PHP', 'I need to send browser notifications', ), @@ -164,7 +164,7 @@ public function findAll(?string $query = null): array 'Toggle Password', 'app_toggle_password', '#BE0404', - 'linear-gradient(142.8deg, #FD963C -14.8%, #BE0404 95.43%)', + 'linear-gradient(142deg, #FD963C -15%, #BE0404 95%)', 'Switch the visibility of a password field', 'I need to toggle the visibility of a password field', ), @@ -174,7 +174,7 @@ public function findAll(?string $query = null): array 'Typed', 'app_typed', '#20A091', - 'linear-gradient(95.22deg, #20A091 -4.7%, #4EC9B3 105.43%)', + 'linear-gradient(95deg, #20A091 -5%, #4EC9B3 105%)', 'Animated typing with Typed.js', 'I need to type onto the screen... like this' )) @@ -185,7 +185,7 @@ public function findAll(?string $query = null): array 'Translator', 'app_translator', '#2248D0', - 'linear-gradient(139.1deg, #2248D0 -20.18%, #00FFB2 113.25%)', + 'linear-gradient(139deg, #2248D0 -20%, #00FFB2 113%)', "Use Symfony's translations in JavaScript", 'I need to translate strings in JavaScript', 'translator.svg' diff --git a/ux.symfony.com/src/Twig/CodeBlock.php b/ux.symfony.com/src/Twig/Components/Code/CodeBlock.php similarity index 97% rename from ux.symfony.com/src/Twig/CodeBlock.php rename to ux.symfony.com/src/Twig/Components/Code/CodeBlock.php index 13fb2d7c0d8..6518e28f238 100644 --- a/ux.symfony.com/src/Twig/CodeBlock.php +++ b/ux.symfony.com/src/Twig/Components/Code/CodeBlock.php @@ -9,14 +9,14 @@ * file that was distributed with this source code. */ -namespace App\Twig; +namespace App\Twig\Components\Code; use App\Util\FilenameHelper; use App\Util\SourceCleaner; use Symfony\Component\DependencyInjection\Attribute\Autowire; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; -#[AsTwigComponent] +#[AsTwigComponent('CodeBlock', template: 'components/Code/CodeBlock.html.twig')] class CodeBlock { public string $filename; diff --git a/ux.symfony.com/src/Twig/CodeWithExplanationRow.php b/ux.symfony.com/src/Twig/Components/Code/CodeWithExplanationRow.php similarity index 82% rename from ux.symfony.com/src/Twig/CodeWithExplanationRow.php rename to ux.symfony.com/src/Twig/Components/Code/CodeWithExplanationRow.php index cdd744e9c9c..36221b7b7ee 100644 --- a/ux.symfony.com/src/Twig/CodeWithExplanationRow.php +++ b/ux.symfony.com/src/Twig/Components/Code/CodeWithExplanationRow.php @@ -9,11 +9,11 @@ * file that was distributed with this source code. */ -namespace App\Twig; +namespace App\Twig\Components\Code; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; -#[AsTwigComponent] +#[AsTwigComponent('Code:CodeWithExplanationRow')] class CodeWithExplanationRow { public string $filename; diff --git a/ux.symfony.com/src/Twig/TabbedCodeBlocks.php b/ux.symfony.com/src/Twig/Components/Code/TabbedCodeBlocks.php similarity index 86% rename from ux.symfony.com/src/Twig/TabbedCodeBlocks.php rename to ux.symfony.com/src/Twig/Components/Code/TabbedCodeBlocks.php index b87bcc0b879..4a7821c0961 100644 --- a/ux.symfony.com/src/Twig/TabbedCodeBlocks.php +++ b/ux.symfony.com/src/Twig/Components/Code/TabbedCodeBlocks.php @@ -9,12 +9,12 @@ * file that was distributed with this source code. */ -namespace App\Twig; +namespace App\Twig\Components\Code; use App\Util\FilenameHelper; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; -#[AsTwigComponent] +#[AsTwigComponent('Code:TabbedCodeBlocks')] class TabbedCodeBlocks { public array $files = []; diff --git a/ux.symfony.com/src/Twig/Components/PrevNextDemo.php b/ux.symfony.com/src/Twig/Components/Demo/PrevNextDemo.php similarity index 92% rename from ux.symfony.com/src/Twig/Components/PrevNextDemo.php rename to ux.symfony.com/src/Twig/Components/Demo/PrevNextDemo.php index cdf18ac04cc..fd9b6b994ba 100644 --- a/ux.symfony.com/src/Twig/Components/PrevNextDemo.php +++ b/ux.symfony.com/src/Twig/Components/Demo/PrevNextDemo.php @@ -9,13 +9,13 @@ * file that was distributed with this source code. */ -namespace App\Twig\Components; +namespace App\Twig\Components\Demo; use App\Model\LiveDemo; use App\Service\LiveDemoRepository; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; -#[AsTwigComponent('PrevNextDemo')] +#[AsTwigComponent('Demo:PrevNext')] class PrevNextDemo { public function __construct( diff --git a/ux.symfony.com/src/Twig/PackageBox.php b/ux.symfony.com/src/Twig/Components/Package/PackageBox.php similarity index 85% rename from ux.symfony.com/src/Twig/PackageBox.php rename to ux.symfony.com/src/Twig/Components/Package/PackageBox.php index 511a58560f1..2ad46b9762f 100644 --- a/ux.symfony.com/src/Twig/PackageBox.php +++ b/ux.symfony.com/src/Twig/Components/Package/PackageBox.php @@ -9,12 +9,12 @@ * file that was distributed with this source code. */ -namespace App\Twig; +namespace App\Twig\Components\Package; use App\Model\UxPackage; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; -#[AsTwigComponent] +#[AsTwigComponent('PackageBox')] class PackageBox { public UxPackage $package; diff --git a/ux.symfony.com/src/Twig/PackageHeader.php b/ux.symfony.com/src/Twig/Components/Package/PackageHeader.php similarity index 88% rename from ux.symfony.com/src/Twig/PackageHeader.php rename to ux.symfony.com/src/Twig/Components/Package/PackageHeader.php index 9dddadb6df5..7bc94c006f2 100644 --- a/ux.symfony.com/src/Twig/PackageHeader.php +++ b/ux.symfony.com/src/Twig/Components/Package/PackageHeader.php @@ -9,14 +9,14 @@ * file that was distributed with this source code. */ -namespace App\Twig; +namespace App\Twig\Components\Package; use App\Model\UxPackage; use App\Repository\ChatRepository; use App\Service\UxPackageRepository; use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; -#[AsTwigComponent] +#[AsTwigComponent('PackageHeader', template: 'components/Package/PackageHeader.html.twig')] class PackageHeader { public UxPackage $package; diff --git a/ux.symfony.com/src/Twig/SearchPackages.php b/ux.symfony.com/src/Twig/Components/Package/SearchPackages.php similarity index 85% rename from ux.symfony.com/src/Twig/SearchPackages.php rename to ux.symfony.com/src/Twig/Components/Package/SearchPackages.php index b79b3f8575e..6f5a45b7f48 100644 --- a/ux.symfony.com/src/Twig/SearchPackages.php +++ b/ux.symfony.com/src/Twig/Components/Package/SearchPackages.php @@ -9,14 +9,14 @@ * file that was distributed with this source code. */ -namespace App\Twig; +namespace App\Twig\Components\Package; use App\Service\UxPackageRepository; use Symfony\UX\LiveComponent\Attribute\AsLiveComponent; use Symfony\UX\LiveComponent\Attribute\LiveProp; use Symfony\UX\LiveComponent\DefaultActionTrait; -#[AsLiveComponent] +#[AsLiveComponent('SearchPackages', template: 'components/Package/SearchPackages.html.twig')] class SearchPackages { use DefaultActionTrait; diff --git a/ux.symfony.com/src/Twig/HighlightExtension.php b/ux.symfony.com/src/Twig/Extension/HighlightExtension.php similarity index 95% rename from ux.symfony.com/src/Twig/HighlightExtension.php rename to ux.symfony.com/src/Twig/Extension/HighlightExtension.php index f19924a6615..33b949e0a89 100644 --- a/ux.symfony.com/src/Twig/HighlightExtension.php +++ b/ux.symfony.com/src/Twig/Extension/HighlightExtension.php @@ -9,7 +9,7 @@ * file that was distributed with this source code. */ -namespace App\Twig; +namespace App\Twig\Extension; use Tempest\Highlight\Highlighter; use Twig\Extension\AbstractExtension; diff --git a/ux.symfony.com/src/Twig/SideBySideCodeRow.php b/ux.symfony.com/src/Twig/SideBySideCodeRow.php deleted file mode 100644 index 9ac481db375..00000000000 --- a/ux.symfony.com/src/Twig/SideBySideCodeRow.php +++ /dev/null @@ -1,21 +0,0 @@ - - * - * For the full copyright and license information, please view the LICENSE - * file that was distributed with this source code. - */ - -namespace App\Twig; - -use Symfony\UX\TwigComponent\Attribute\AsTwigComponent; - -#[AsTwigComponent] -class SideBySideCodeRow -{ - public string $file1; - public string $file2; -} diff --git a/ux.symfony.com/templates/_banner.html.twig b/ux.symfony.com/templates/_banner.html.twig index 02ae3f3818a..9d6dbdc5a2f 100644 --- a/ux.symfony.com/templates/_banner.html.twig +++ b/ux.symfony.com/templates/_banner.html.twig @@ -4,17 +4,13 @@
- Clock + Heart
-

Help Ryan Get The Treatment He - Needs!

+

Help Ryan Get The Treatment He Needs!

- Ryan is the lead maintainer of Symfony UX and always gives so much to the community. -

-

- Now he needs your help. Please donate to support him in this battle. + Ryan is the lead maintainer of Symfony UX. Now he needs your help.

diff --git a/ux.symfony.com/templates/_header.html.twig b/ux.symfony.com/templates/_header.html.twig index fa4f1f71afb..e46725754ff 100644 --- a/ux.symfony.com/templates/_header.html.twig +++ b/ux.symfony.com/templates/_header.html.twig @@ -15,8 +15,6 @@ > - - Turbo Live Components - New + Icons Packages diff --git a/ux.symfony.com/templates/base.html.twig b/ux.symfony.com/templates/base.html.twig index fa88287e43c..4b1724cf58a 100644 --- a/ux.symfony.com/templates/base.html.twig +++ b/ux.symfony.com/templates/base.html.twig @@ -4,7 +4,7 @@ {% block title %}{{ meta.title|default }}{{ meta.title_suffix|default(' - Symfony UX') }}{% endblock %} - + {% block stylesheets %} {% endblock %} {% if meta.canonical|default %} @@ -24,10 +24,6 @@ {% block javascripts %} - {% block importmap %}