From 5d573fc57eaceabaaac9b8eca7693e3066233f67 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Andr=C3=A9?= Date: Fri, 3 May 2024 07:08:14 +0200 Subject: [PATCH 1/3] Remove light mode --- .../controllers/theme-switcher-controller.js | 28 --- ux.symfony.com/assets/images/heart.png | Bin 14418 -> 3424 bytes ux.symfony.com/assets/images/heart.webp | Bin 7776 -> 2222 bytes ux.symfony.com/assets/images/sf-ux.svg | 2 +- ux.symfony.com/assets/styles/_container.scss | 8 +- ux.symfony.com/assets/styles/_images.scss | 4 +- ux.symfony.com/assets/styles/app.scss | 5 +- ux.symfony.com/assets/styles/app/_html.scss | 2 +- .../assets/styles/components/_Banner.scss | 50 +++-- .../assets/styles/components/_Changelog.scss | 8 - .../assets/styles/components/_DemoCard.scss | 7 +- .../styles/components/_DemoContainer.scss | 13 +- .../assets/styles/components/_IconGrid.scss | 12 +- .../assets/styles/components/_IconModal.scss | 2 +- .../assets/styles/components/_PackageBox.scss | 5 +- .../styles/components/_PackageHeader.scss | 4 +- .../styles/components/_ProductGrid.scss | 2 +- .../assets/styles/components/_Tag.scss | 18 +- .../assets/styles/components/_Terminal.scss | 10 +- .../styles/components/_ThemeSwitcher.scss | 40 ---- .../assets/styles/demos/live-memory.min.css | 1 - .../styles/demos/live-memory/app/_root.scss | 13 +- .../demos/live-memory/components/_Board.scss | 2 +- .../live-memory/components/_ThemeSwitch.scss | 62 ------ .../assets/styles/sections/_header.scss | 16 +- .../assets/styles/sections/_hero.scss | 2 + .../assets/styles/sections/_nav.scss | 25 ++- .../assets/styles/utilities/_arrow.scss | 14 +- .../assets/styles/utilities/_background.scss | 6 +- .../assets/styles/vendor/_bootstrap.scss | 2 - .../assets/styles/vendor/bootstrap/_root.scss | 184 ++++++++++++++++++ 31 files changed, 274 insertions(+), 273 deletions(-) delete mode 100644 ux.symfony.com/assets/controllers/theme-switcher-controller.js delete mode 100644 ux.symfony.com/assets/styles/components/_ThemeSwitcher.scss delete mode 100644 ux.symfony.com/assets/styles/demos/live-memory/components/_ThemeSwitch.scss create mode 100644 ux.symfony.com/assets/styles/vendor/bootstrap/_root.scss 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 f957e1ed33b2c490902177fc7153d079c88bc070..324a62166d806180c8f8817cc33c5c5a49d7c273 100644 GIT binary patch literal 3424 zcmbuBS5VUnx5fVnp@SeL^n-K-IS{1R&>;k*NJNhGsz3-$q)I?~m!k1Q1VM^ON0Ax= zB26iW4iZs<6bncZQn}ul`+Q%%J+t?3_QP6lYi4EI+gWmRh;je`z-?`1=J<#3|6Mkw zKle!|_WK_|0*q~q0iZRXljgaAEHHVC z$2lN93vFyZ%;QA)CKz4?GP_O=T^zjV=-(#2gh^jiRw8+^~wOD46?i6I8=F8 z&}xItNCX+OuWZ*XU>XB4$p`CavKjCgKIL@l>|xTwvFlL+cm&`T1rWnTkY*ZKzmwTu zgk9=b1hFMyLpSmexD_B``t$|6VFR;HI}5xMU>@UD7Bom%kV7=_o1H}geSRADauL*P z-23GHo~5S^VG88G{n_<|_~#YKSO9 z%!aXN;jnWGXrM%bN9dFm_GIFFRt}mK3#C|+BX*JgGgJQU0d4lLHt^p)-xRkw^l2nl zN;@-cC-h*K7&OL3n`5F5N>KBd7&ZZ_v%hJ(@uxQ>EncmekMBGKYq34^q>@Cyp5>SD zFv_t2$iB#)M&x|3#bn=1cY+Y+g}AapnHr3!+A#Q-GL2+TK74#KWx?LY?6$f`lLa^% zV&lIQY4&n~Y!Yvr(wVLfoE^Yu;Siu=H+4l*rNxt4A@-15J$g0=){L@R{Y6H2QVz5tUi9Oi!dt0Z<4Sji#T}Iun!>3udStVtc_Dk9{3$4@`7T4{5%R(8 zz>%%t7X?L<{*6hrjQO{hEIw(^mE zew_XON#@AeiK9)w?JCUIyOppUG7|g>`{H3XBEh<5`hZ-yT$ihmBnNLni!h}QW{<(kS z_F5u~rTZF^O!u^Z6XRBiCncZE-NKZwetJ*cO4zcKkC@tvpFD|1AM~)YQ19`5VeW%5 z@bx_ZwC+Yv9Q~UtIFYR6*{s(3E+u<81w81Z8mB3hIMKPvbbn;S;Ua6!n$j+Qt3zkN zi^ov=jl3{33LP6(#l{B6RoVZOETQ_JC#ZfBVenD5@n?q~smj;uT7B1s&f)z|_(KSo zT#0+L9-P_v(swFvC#M)|a^P9>SG)r{gR9t<5Ir9V7d=60*pa=gCA61U+sFH@tvzQ= z3h_B&?;7Q_h51{+uY-sExo&H5nB8{$_;H^gL|a?_E;zM{PfWN^P307_w?Ww2h6LWa zMetmB8Mns{0#Pw^d9F8$1&<>(wpQlmN})VFHWSC+o|Jy6xYuyKhr0Ov+&fQIG#bs# z&ArYaA041aC}#wV%Yfm2yj5j3&#Sw;m@!?_=U4BpT}gtij#l|c=lY(Ktc@xz9I57~ z6EIz?Mwn!%w(d$elWL_tyT<5M&f)q8D|;GRcU%%rxd!s~lK@xobDcaFv&_QflGH#y z-{nD}&~Hn@XaL~te)g1z_J( zj7cO00I+bQ7{@J+OC6P1F?b~xH@VrJ6;M)+F4I%s<1RzkmIPM1ttZR!U0*kTubzcT z7dUV1b->1#W>J-!{AK&Wv{S9VzL}}m+9Di~S*^0XN8bDh4;;h9c01zwwb~mv!=?OJ zC{$D6-aP;lHNUn$jKxrh7bLJIAYjI#$_Sn$Rp@vBYwgn@xoYGqS9wl$2Mcm)S~ueD zd#OS^Z1s^cpF=nsU$StnQ*vMi(%OVSlc|;_lap2oh-s~4CC=$1*;nDL~uDQ*z_Wy8) ziy-{M1XPMg_^(XG0Wh4|Un=T>PaTz02HmCRE(p4oX{)aP3gYQs)c3D&R>b!eJo9z` zar@QN(ihSTju$rP)TU({9iM!jcjr>xuX3E>(%r`pq2c>+t&e`jZpey0!QpOroNYUt z7)Hfeuyk(vWaa+`A>Kbiy0be| ze~^N2;1ui=e!0Ku?lUMdbB1N;WJap%X2>3v)Rzpem6vn2x3?F4x?L|98D{4_M&$(x zGUWVaZ~CAvSfTEgUh3`%bLj8i(N@GD7GcwYMmN$PiVDpq^mZ*fRR)gVep`sxwkPr@ zi9BhVEyNfJmt|(|Y|s0u*Jua{Sz_@5fu(tsK6Q18k9lu~g(bM+OkfiH5j8(p#jRP7 z*LBuCo_^}5yR}8Tt{fe`^>vD9Hz_QhTeOs}7v|cBBwHm|TU&EXef`?j_K1(&JL$NG#5l;65_3uc{9!N^Vf7(dRui~axVVtyC>9o$5FZZ@ zeB$eHm`ZamZRJ&7-VhdxP1nJO3%j~v1hbtYs3-Yu{WtCH0q523sI5bx5s!u! zFTBsle&08fC&G2Q)O*_w78+-0S3-znG8r~D1|uJKLY45BpUBL(Ir>8E)#=*gtC#H!+ z((p+`#QBMj<`;AG^714Wi)?IaYtRy+AF_}vyHni)T3RJ;h=rm`Oyo=MhQJ>-8=T_( zrKw1(0q=aX^qF|lL5r&BkLl;L190+lo3PZ+UY`$cyG9)er>EF@Hl_}FJdWUP2}y&y z?C`;xRdT0lhKJX(yTbj{|IV|J;oOXsbp2f@+3Z+=JK7Vf5K~QP=7F#tsJl_8tv=xiE-tm#)*lRbhpdvfj0i;Si@Gv58b?o0pHU6f z4PxSrcstG}RjPlLp(14Y&c#LO9_e>V5e|zv^z?=jNF-ymt`&us?Utj)(uI?lH|*by zrs@~0s&l(k`?nh~>sVx|5cGGvTy8YzcyW;E{oZ^4iM%6Sco~XX+Te5F-q?`gO{yL7 zmg>ay+L9F%?pIcJUg~bvpsxLwp44|45GXy=E73^FX zLV&RMhcs?I28&LMev8)-zSgQ6bV2LX1A^ToE%9i=5eV$E)<16Wq}=a$1;p^g!~~A+ zFfPS`(i%lEJ+cJM@Rsu}XGCmFus&RMeQlXQ++YE|Atqc)>URD9G(o`H+|I1Y#54JS E0B?iCkpKVy literal 14418 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 diff --git a/ux.symfony.com/assets/images/heart.webp b/ux.symfony.com/assets/images/heart.webp index 44e8d73791af86bffb18b34766a2b618b441afec..41f562e88cb937c42ee6a3a0183803175ec20326 100644 GIT binary patch literal 2222 zcmV;f2vPS^Nk&Gd2mk2e}O8|2`n4^h+8;?-vmh z!2ih9vqW?)H1%LMf6=+XEV^Q;A8fqycd1XX^5gQA^$sp>-@Cd+x9GBW`TN^TOWk0Z zz3bk;v;HgJx4_=XTkD)+$-QzH*sqvb91AX2@4ai*w@WHZMz8@Ot)<3=@WQv2ny{4@&7U2~u0r4bd~1-l9K2|q?~b^tYG9WLn&y34lx0Mv$6vYl~j7uHL1w)5k8JA90 zDIj|uKzQR2;eg5npkkqDkq;>!deb-zF|^{9aqSb9znd6sn$qh=QQ~;wE-srpP*oE=@{b^cuR017dV2k$PsuORG$z&dhvS6(`ufP6k2w*2irKrV;kr*=KB-Sb<*hN&97Pd@em73j5VTq=vEUfEHUbLyFb+75A8S^8{E5&!Q2uf zj|MFwPl4DxQy&`HpShR-!Mz`yTVjI2JT`KkFQc-_-g)L*n`{a`^UTjxnhL>EKNHC& zT+IOcSC5E^{R;wCP&gnm1^@t%8UUREDnI~006t+Rj76j(Asze#06+!=wg6wXiF_yE zKP7#TDKE}`{QgO0&2qnvZ%`j~Uf>_2f9C&+e{1Xk<^%Ry)|=3upg;59`F&y@fF4^v zw?6}axqrBS0H3m-{W`!eRs z^!GJ(IgJccN@=~VEJXC5GrS(G4{W?LJg+_Ac<}|g&@uuii-e(k)ff*3a6Zfavx4Ut zFPQF58n6>_U>WCBka}L++OOPaeO55vaH>IHfKX#&q5@y}4$pc4H#&LH9n9;JbGQSasdm&8)3;Qajc0L`%1CZUKb z5N1lBJ1(pLGTem!8CR87!2xpau+*%xF9Dyh+Ol}{^0`Afe){YR|0L2fuI;8C5a9Tq zh%dC>D>v!Iz)M^5vNO4KA{vvqp5ta8z2;h+k~rdL=Z#@52!^XxDAs{V`xbmzi>-gh zUdlpvU3hO!@PK)gTb^tB`VMpX!H63@dxAr??jwQ4W6vndgEw{p_Q>4-5y>|9E@D4f z>bYwM-SXROEn*y21f`VS#ztA!JoY=@oDsgNGuMc~=abbyE>uhqK94^FEGyzdJ~DNF zH4^a9xd)S&q-PSh0%%BfC;wKfWeP-%ri|dNSN!aG2vQzFtWrP%7$7m#&er*HBTJlI ze-Po+HAWf-v*Qj)C4(^yG4R;fY}!JF8Bm+dMU;{-Ci{Rx7<=@qG9x4un`% z>3+YL<_#Z?`9cL8yjI?VQ zJ{D1xy$DxA&i9)%zWq_yLN1@=Dc2nEezfXK6b??_RJcp~7Ip6jZW6Q*1)HdENlBE{ zqFAVNL76$h9@kpIPI;?lO4xW?xIPU{Lf~#NMuQ%}^b}{d-^vqJ0>uE?qW;vO5v=0H zbN#KyaB7pSc@VT9DZj|&zA!0?TzcPW+`G$2=eKdL0L*ufF>>(xfdxI~s>ZR^Rj#8B z)OxUcLp+14p^~Z(dbMnKrU@-Xdi08>Ex12}u?z}|F4=?x)S*JzN^o!Obw@dU;&sbe zSr~EO18J1s3|fTO#qQ0srACFx*6CBv-dl84NxDA7vcvTC<+nN5p7SWTmMv+LDa{r& zsk$~gVrw>d<(6$P8!G^d*Q5&Wg(Ho3PUILb;yy0dP-Fr>VC_tZ7mznE6egjwNrq{D z7-u^Kj}4AwX81?s%D%0!0=Avz8r7Z2LF6aW|=$^a#slBxyq*3f-S?wgR!9 zv^+{ZEh~i5bO@lb&3|aly~O(VCVha(II(-tO^Hl@&)vp?yaYoAana}SFIX(ipB1;ip0$l?X*m+znMp{4GRl+HBhcJ`?0JgS6O8@`> literal 7776 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 + 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 +} From d506fbced8cb9a1c542466cc5d9f8e7098f791ae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Simon=20Andr=C3=A9?= Date: Fri, 3 May 2024 07:08:41 +0200 Subject: [PATCH 2/3] Clean templates --- .../src/Service/LiveDemoRepository.php | 44 +++++++++---------- .../src/Service/UxPackageRepository.php | 34 +++++++------- .../Twig/{ => Components/Code}/CodeBlock.php | 4 +- .../Code}/CodeWithExplanationRow.php | 4 +- .../Code}/TabbedCodeBlocks.php | 4 +- .../Components/{ => Demo}/PrevNextDemo.php | 4 +- .../{ => Components/Package}/PackageBox.php | 4 +- .../Package}/PackageHeader.php | 4 +- .../Package}/SearchPackages.php | 4 +- .../{ => Extension}/HighlightExtension.php | 2 +- ux.symfony.com/src/Twig/SideBySideCodeRow.php | 21 --------- ux.symfony.com/templates/_banner.html.twig | 11 ++--- ux.symfony.com/templates/_header.html.twig | 4 +- ux.symfony.com/templates/base.html.twig | 6 +-- .../TwigBundle/Exception/error.html.twig | 23 +++++----- ux.symfony.com/templates/changelog.html.twig | 2 +- .../templates/components/Alert.html.twig | 6 --- .../components/{ => Code}/CodeBlock.html.twig | 4 +- .../{ => Code}/CodeBlockButtons.html.twig | 0 .../components/{ => Code}/CodeLine.html.twig | 0 .../CodeWithExplanationRow.html.twig | 2 +- .../{ => Code}/TabbedCodeBlocks.html.twig | 0 .../components/{ => Demo}/DemoCard.html.twig | 0 .../PrevNext.html.twig} | 4 +- .../components/Icon/IconModal.html.twig | 32 +++++++------- .../components/Icon/IconSearch.html.twig | 4 +- .../components/Icon/IconSetCard.html.twig | 4 +- .../InvoiceCreatorLineItem.html.twig | 8 ++-- .../components/NewProductForm.html.twig | 4 +- .../{ => Package}/PackageBox.html.twig | 0 .../{ => Package}/PackageHeader.html.twig | 0 .../{ => Package}/SearchPackages.html.twig | 2 +- .../components/SideBySideCodeRow.html.twig | 10 ----- .../components/ThemeSwitcher.html.twig | 10 ----- .../components/TodoListForm.html.twig | 8 ++-- .../dependent_form_fields.html.twig | 2 +- .../live_component/infinite_scroll.html.twig | 8 ++-- .../demos/live_component/invoice.html.twig | 16 +++---- .../live_component/product_form.html.twig | 14 +++--- .../demos/live_component/voting.html.twig | 2 +- .../templates/demos/live_demo.html.twig | 2 +- .../components/LiveMemory/Tableau.html.twig | 2 +- .../LiveMemory/ThemeSwitch.html.twig | 15 ------- .../demos/live_memory/index.html.twig | 3 -- .../templates/icons/index.html.twig | 4 +- .../templates/main/_file_tree.html.twig | 14 +++--- ux.symfony.com/templates/main/demos.html.twig | 2 +- .../templates/main/homepage.html.twig | 43 ++++++++++-------- .../templates/main/packages.html.twig | 2 +- .../ux_packages/live_component.html.twig | 11 +++-- .../templates/ux_packages/package.html.twig | 8 ++-- .../_translator_demo_block.html.twig | 4 +- .../ux_packages/turbo/_chatForm.html.twig | 2 +- 53 files changed, 179 insertions(+), 248 deletions(-) rename ux.symfony.com/src/Twig/{ => Components/Code}/CodeBlock.php (97%) rename ux.symfony.com/src/Twig/{ => Components/Code}/CodeWithExplanationRow.php (82%) rename ux.symfony.com/src/Twig/{ => Components/Code}/TabbedCodeBlocks.php (86%) rename ux.symfony.com/src/Twig/Components/{ => Demo}/PrevNextDemo.php (92%) rename ux.symfony.com/src/Twig/{ => Components/Package}/PackageBox.php (85%) rename ux.symfony.com/src/Twig/{ => Components/Package}/PackageHeader.php (88%) rename ux.symfony.com/src/Twig/{ => Components/Package}/SearchPackages.php (85%) rename ux.symfony.com/src/Twig/{ => Extension}/HighlightExtension.php (95%) delete mode 100644 ux.symfony.com/src/Twig/SideBySideCodeRow.php rename ux.symfony.com/templates/components/{ => Code}/CodeBlock.html.twig (88%) rename ux.symfony.com/templates/components/{ => Code}/CodeBlockButtons.html.twig (100%) rename ux.symfony.com/templates/components/{ => Code}/CodeLine.html.twig (100%) rename ux.symfony.com/templates/components/{ => Code}/CodeWithExplanationRow.html.twig (82%) rename ux.symfony.com/templates/components/{ => Code}/TabbedCodeBlocks.html.twig (100%) rename ux.symfony.com/templates/components/{ => Demo}/DemoCard.html.twig (100%) rename ux.symfony.com/templates/components/{PrevNextDemo.html.twig => Demo/PrevNext.html.twig} (83%) rename ux.symfony.com/templates/components/{ => Package}/PackageBox.html.twig (100%) rename ux.symfony.com/templates/components/{ => Package}/PackageHeader.html.twig (100%) rename ux.symfony.com/templates/components/{ => Package}/SearchPackages.html.twig (86%) delete mode 100644 ux.symfony.com/templates/components/SideBySideCodeRow.html.twig delete mode 100644 ux.symfony.com/templates/components/ThemeSwitcher.html.twig delete mode 100644 ux.symfony.com/templates/demos/live_memory/components/LiveMemory/ThemeSwitch.html.twig 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..248146eb93c 100644 --- a/ux.symfony.com/templates/_banner.html.twig +++ b/ux.symfony.com/templates/_banner.html.twig @@ -4,17 +4,14 @@
- 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. +{# Now he needs your help. Please donate to support him in this battle.#}

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 %}