diff --git a/.symfony.local.yaml b/.symfony.local.yaml index e8033e94..506415b5 100644 --- a/.symfony.local.yaml +++ b/.symfony.local.yaml @@ -1,11 +1,11 @@ workers: docker_compose: ~ sass: - cmd: ['symfony', 'console', 'sass:build', '--watch'] + cmd: ['symfony', 'console', 'sass:build', '--watch', '-vvv'] tailwind_app: - cmd: ['symfony', 'console', 'tailwind:build', '--watch', 'assets/styles/app-tailwind.css'] + cmd: ['symfony', 'console', 'tailwind:build', '--watch', 'assets/styles/app-tailwind.css', '-vvv'] tailwind_toolkit_shadcn: - cmd: ['symfony', 'console', 'tailwind:build', '--watch', 'assets/styles/toolkit-shadcn.css'] + cmd: ['symfony', 'console', 'tailwind:build', '--watch', 'assets/styles/toolkit-shadcn.css', '-vvv'] http: port: 9044 diff --git a/assets/controllers/browser-controller.js b/assets/controllers/browser-controller.js deleted file mode 100644 index 4ab51a11..00000000 --- a/assets/controllers/browser-controller.js +++ /dev/null @@ -1,8 +0,0 @@ -import { Controller } from '@hotwired/stimulus'; - -/* stimulusFetch: 'lazy' */ -export default class extends Controller { - reduce() { - this.element.classList.toggle('Browser--reduced'); - } -} diff --git a/assets/styles/app-tailwind.css b/assets/styles/app-tailwind.css index 2caceeb6..ca01485a 100644 --- a/assets/styles/app-tailwind.css +++ b/assets/styles/app-tailwind.css @@ -22,11 +22,6 @@ --n-800: #262626; --n-900: #0D0D0D; - /* Signal colors */ - --signal-red: #FB4040; - --signal-yellow: #FBC640; - --signal-green: #84DE2C; - /* Semantic colors (replaces --bs-body-bg, --bs-body-color, etc.) */ --color-body-bg: #fff; --color-body-text: #212529; @@ -98,11 +93,6 @@ --color-n-800: var(--n-800); --color-n-900: var(--n-900); - /* Signal colors */ - --color-signal-red: var(--signal-red); - --color-signal-yellow: var(--signal-yellow); - --color-signal-green: var(--signal-green); - /* Specific colors */ --color-purple: var(--color-purple); @@ -282,7 +272,6 @@ code { color: var(--color-code); - font-size: var(--text-sm); } pre code { font-size: inherit; diff --git a/assets/styles/app.scss b/assets/styles/app.scss index 3261547f..56adc973 100644 --- a/assets/styles/app.scss +++ b/assets/styles/app.scss @@ -57,6 +57,8 @@ $utilities: map-remove( "start", "end", "translate-middle", + // Shadow + "shadow", ); // Layout & components @@ -145,18 +147,12 @@ mark { @import "layouts/container"; // Components -@import "components/Button"; -@import "components/Browser"; @import "components/Changelog"; @import "components/DemoContainer"; -@import "components/DemoCard"; -@import "components/DocsLink"; -@import "components/FeatureBox"; @import "components/Icon"; @import "components/IconGrid"; @import "components/IconModal"; @import "components/IconSearch"; -@import "components/IconSetCard"; @import "components/Pagination"; @import "components/ProductGrid"; @import "components/PackageBox"; diff --git a/assets/styles/components/_Browser.scss b/assets/styles/components/_Browser.scss deleted file mode 100644 index 5097f665..00000000 --- a/assets/styles/components/_Browser.scss +++ /dev/null @@ -1,125 +0,0 @@ -.Browser { - place-self: center; - margin-inline: auto; -} -.Browser__window { - border-radius: .5rem; - overflow: hidden; - box-shadow: 0 0 0 1px #070707; - max-width: 1400px; - background: radial-gradient(circle at center, #00000021 0.15rem, #00000003 0) repeat; - background-size: 1rem 1rem; - transition: all 450ms linear; -} - -.Browser--reduced { - z-index: 555; - transform: scale(.75); -} - -.Browser__header { - display: grid; - grid-template-areas: "left center right"; - grid-template-columns: 1fr 3fr 1fr; - justify-content: space-between; - align-items: center; - padding: .6rem; - background-color: #191C1F; - border-bottom: 1px solid #070707; - box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.15); -} - -.Browser__dots { - grid-area: left; - display: flex; - gap: .5rem; - padding-inline: .5rem; -} - -.Browser__actions { - grid-area: right; - display: flex; - gap: .5rem; - flex-direction: row-reverse; -} - -.Browser__action { - color: rgba(219, 219, 220, 0.7); -} - -.Browser__url { - grid-area: center; - background-color: #0C0F12; - color: rgba(219, 219, 220, 0.7); - border-radius: .5rem; - font-size: .75rem; - width: auto; - padding: 0.1rem .5rem; - display: flex; - align-items: center; - justify-content: space-between; -} - -.Browser__url em { - color: #DBDBDC; - font-style: normal; -} - -.Browser__url .Browser__action { - float: right; -} - -.Browser__viewport { - width: 100%; - aspect-ratio: 16/10; - background-color: var(--bs-body-bg); - overflow-x: hidden; - overflow-y: scroll; - scrollbar-width: thin; -} -@media screen and (max-width: 768px) { - .Browser__viewport { - aspect-ratio: 1/2; - } -} - -.Browser__dot { - height: .75rem; - width: .75rem; - border: none; - border-radius: 50%; - background-color: var(--dot-color, #000f); - box-shadow: 0 0 0 1px #070707; - display: grid; - place-content: center; - padding: 0; -} - -.Browser__dot span { - font-size: .8rem; - mix-blend-mode: overlay; - color: #070707; - transition: all 150ms; - transform: scale(.75); - opacity: .5; - display: block; - position: relative; - top: -.05rem; -} - -.Browser__dot:hover span { - opacity: 1; - transform: scale(1); -} - -.Browser__dot--red { - --dot-color: lch(42.76% 78.42 43); -} - -.Browser__dot--orange { - --dot-color: lch(62.6% 72.82 64.92); -} - -.Browser__dot--green { - --dot-color: lch(67.05% 83.27 137.66); -} diff --git a/assets/styles/components/_Button.scss b/assets/styles/components/_Button.scss deleted file mode 100644 index 79976129..00000000 --- a/assets/styles/components/_Button.scss +++ /dev/null @@ -1,19 +0,0 @@ -.Button { - display: inline-flex; - align-items: center; - justify-items: flex-end; - - border-radius: 1.5rem; - padding: 0.75rem 1.5rem; - gap: .75rem; - - background: var(--bs-body-bg); - color: var(--bs-body-color); -} - -.Button--dark { - background: var(--bs-body-color); - color: var(--bs-body-bg); - color: #dee2e6; - border: 1px solid #a6a0a0; -} diff --git a/assets/styles/components/_DemoCard.scss b/assets/styles/components/_DemoCard.scss deleted file mode 100644 index cbcc965c..00000000 --- a/assets/styles/components/_DemoCard.scss +++ /dev/null @@ -1,87 +0,0 @@ -// ----------------------------------------------------------------- -// DemoCard -// ----------------------------------------------------------------- - -.DemoCard { - --radius: .75rem; - position: relative; - - display: flex; - flex-direction: column; - - border-radius: var(--radius); - border: 1px solid var(--bs-secondary-bg-subtle); - - transition: color 250ms ease-in-out, transform 750ms ease-in-out, box-shadow 750ms ease-in-out; - transform: translateY(0); - box-shadow: 0 0 0 transparent; - background: var(--bs-body-bg); -} - -.DemoCard:hover { - transition: color 250ms ease-in-out, transform 250ms ease-in-out, box-shadow 250ms ease-in-out; - transform: translateY(-.25rem); - box-shadow: 0 0.125rem 2rem .25rem var(--bs-secondary-bg-subtle); -} - -.DemoCard__media { - border-top-left-radius: var(--radius); - border-top-right-radius: var(--radius); - display: grid; - width: 100%; - min-height: 100px; - aspect-ratio: 16 / 9; - overflow: hidden; - place-content: center; - background: #000; -} - -.DemoCard__image { - max-width: 100%; - display: block; - object-fit: cover; - opacity: .90; -} - -.DemoCard:hover .DemoCard__image { - opacity: .93; -} - -.DemoCard__content { - padding: .75rem 1rem; - flex: 1; - border-bottom-left-radius: var(--radius); - border-bottom-right-radius: var(--radius); - gap: .5rem; - display: flex; - flex-direction: column; -} - -.DemoCard__title { - font-size: 1.1rem; - font-weight: 700; - margin: 0; - font-family: var(--font-family-title); -} - -.DemoCard__description { - font-size: 0.9rem; - font-stretch: semi-condensed; - font-weight: 400; - transition: all 250ms ease-in-out; - opacity: .65; - line-height: 1.4; - margin: 0; -} - -.DemoCard:hover .DemoCard__description { - opacity: .85; -} - -.DemoCard__tags { - margin-top: auto; - margin-bottom: 0; - display: flex; - flex-wrap: wrap; - gap: .5rem; -} diff --git a/assets/styles/components/_DocsLink.scss b/assets/styles/components/_DocsLink.scss deleted file mode 100644 index 443156ad..00000000 --- a/assets/styles/components/_DocsLink.scss +++ /dev/null @@ -1,90 +0,0 @@ -.DocsLink { - border: 1px solid var(--bs-secondary-border-subtle); - border-radius: var(--border-radius, 1rem); - display: flex; - gap: var(--space-large, 1rem); - padding: var(--space-large, 1rem); - position: relative; - place-self: stretch; - background: var(--bs-body-bg, var(--bs-secondary-border-subtle)); - opacity: .9; - transition: opacity 250ms ease-in-out, transform 250ms ease-in-out; - - &:hover { - transform: translateY(-.25rem); - opacity: 1; - } - - &.DocsLink-sm { - border-radius: var(--border-radius-sm, .5rem); - height: 52px; - opacity: 1; - padding: var(--space-small, .75rem) var(--space-large, 1.5rem); - transform: translateY(50%); - transition-property: transform; - transition-duration: 0ms; - - p { - margin-bottom: 0; - } - - svg { - font-size: 1.5rem; - } - - &:hover { - transform: translateY(50%); - } - - @media screen and (max-width: 768px) { - transform: translateY(0); - - &:hover { - transform: translateY(0); - } - } - } -} -.DocsLink_content { - display: flex; - flex-direction: column; - justify-content: center; - flex: 1 1 auto; - gap: 1rem; -} - -.DocsLink_title { - display: flex; - flex-direction: row; - align-items: center; - gap: .75rem; -} - -.DocsLink_link { - &:after { - content: ''; - position: absolute; - inset: 0 0; - z-index: 40; - } -} - -.DocsLink_arrow { - font-size: 1.5rem; - opacity: .5; - margin-inline-start: auto; - transition: opacity 600ms ease-in-out; - .DocsLink:hover & { - transition: opacity 250ms ease-in-out; - opacity: 1; - } -} - -.DocsLink_description { - p { - line-height: 1.4; - } - :last-child { - margin-bottom: 0; - } -} diff --git a/assets/styles/components/_FeatureBox.scss b/assets/styles/components/_FeatureBox.scss deleted file mode 100644 index 82cf3b63..00000000 --- a/assets/styles/components/_FeatureBox.scss +++ /dev/null @@ -1,49 +0,0 @@ -.FeatureBox { - - --bg-color: var(--bs-body-bg); - [data-bs-theme="dark"] { - --bg-color: #1b1e21; - } - - background: var(--bg-color); - border: 1px solid var(--bs-secondary-bg-subtle); - border-radius: var(--border-radius); - display: grid; - padding: 1rem; - place-content: center; - gap: .75rem; -} - -.FeatureBox_icon { - height: 2.4rem; - display: grid; - place-content: center; - svg { - height: 100%; - width: 100%; - } - path, circle { - fill: var(--bs-body-bg); - fill-opacity: .1; - stroke: currentColor; - stroke-width: 1; - transition: 400ms; - } -} -.FeatureBox:hover { - path, circle { - fill-opacity: .15; - stroke-width: 1.25; - } -} - -.FeatureBox_title { - opacity: .85; - font-weight: 400; - font-size: 1rem; - font-family: var(--font-family-text); - color: var(--bs-body-color); - text-decoration: none; - line-height: 1; - text-align: center; -} diff --git a/assets/styles/components/_Icon.scss b/assets/styles/components/_Icon.scss index b9ebf6d5..b6a91c9c 100644 --- a/assets/styles/components/_Icon.scss +++ b/assets/styles/components/_Icon.scss @@ -1,7 +1,9 @@ -.Icon { +@layer base { + .Icon { display: inline-grid; place-content: center; height: 1em; width: 1em; fill: currentColor; + } } diff --git a/assets/styles/components/_IconSetCard.scss b/assets/styles/components/_IconSetCard.scss deleted file mode 100644 index 8f33c57b..00000000 --- a/assets/styles/components/_IconSetCard.scss +++ /dev/null @@ -1,133 +0,0 @@ -// ----------------------------------------------------------------- -// IconSetCard -// ----------------------------------------------------------------- - -.IconSetCard { - --radius: .75rem; - position: relative; - --hue: calc(var(--index) * 77); - --iconset-color: lch(70% 110 var(--hue, 240)); - --iconset-color-bg: lch(80% 30 var(--hue, 240)); - color: var(--iconset-color); - display: flex; - flex-direction: column; - border-radius: var(--radius); - border: 1px solid var(--bs-secondary-bg-subtle); - transition: transform 250ms ease-in-out, box-shadow 250ms ease-in-out; - transform: translateY(0); - box-shadow: 0 0 0 transparent; -} - -.IconSetCard:hover { - transform: translateY(-.25rem); - box-shadow: 0 0.125rem 2rem .25rem var(--bs-secondary-bg-subtle); -} - -.IconSetCard__media { - border-top-left-radius: var(--radius); - border-top-right-radius: var(--radius); - display: grid; - width: 100%; - min-height: 100px; - aspect-ratio: 5/3; - overflow: hidden; - background: var(--iconset-color-bg); - place-content: stretch; -} - -.IconSetCard__icons { - max-height: 100%; - width: 100%; - border-radius: .25rem; - place-content: stretch; - display: grid; - grid-template-columns: repeat(5, 1fr); - justify-content: stretch; - align-items: stretch; -} - -.IconSetCard__icon { - display: grid; - place-items: center; - box-shadow: 0 0 1px 0 #0007; - - img { - width: 50%; - max-width: 24px; - height: auto; - display: block; - opacity: var(--icon-opacity, .8); - scale: var(--icon-scale, 1); - } -} -.IconSetCard__icon:hover { - --icon-scale: 1; -} -.IconSetCard:hover { - --icon-opacity: 1; -} - -.IconSetCard__icon:nth-child(even) { - background: rgb(0 0 0 / 0.03); -} - -.IconSetCard__icon:nth-child(odd) { - background: rgb(255 255 255 / 0.03); -} - -.IconSetCard__content { - padding: .75rem 1rem; - flex: 1; - border-bottom-left-radius: var(--radius); - border-bottom-right-radius: var(--radius); - gap: .5rem; - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; -} - -.IconSetCard__title { - font-size: 1.1rem; - font-weight: 700; - margin: 0; - font-family: var(--font-family-title); - padding: .25rem; - color: var(--bs-body-color); - - a { - color: inherit; - } -} - -.IconSetCard__total { - font-size: 0.9rem; - font-stretch: semi-condensed; - color: var(--bs-body-color); - - em { - color: var(--iconset-color); - font-family: var(--font-family-code); - font-style: normal; - font-weight: 500; - } - - span { - font-size: .75rem; - } -} - -.IconSetCard__description { - font-size: 0.9rem; - font-stretch: semi-condensed; - font-weight: 400; - transition: all 250ms ease-in-out; - opacity: .65; - line-height: 1.4; - padding: .25rem; - margin: 0; -} - -.IconSetCard:hover .IconSetCard__description { - opacity: .85; -} diff --git a/src/Twig/Components/DocsLink.php b/src/Twig/Components/DocsLink.php index d50b70e8..f43da4c0 100644 --- a/src/Twig/Components/DocsLink.php +++ b/src/Twig/Components/DocsLink.php @@ -17,22 +17,14 @@ #[AsTwigComponent] final class DocsLink { - public string $size = 'md'; public string $url; public string $title; - public ?string $text = null; - - public ?string $icon = null; + public string $text; + public string $icon; #[ExposeInTemplate] public function isExternal(): bool { return !str_starts_with($this->url, 'https://symfony.com'); } - - #[ExposeInTemplate] - public function isSmall(): bool - { - return 'sm' === $this->size; - } } diff --git a/src/Twig/Components/Icon/IconSetCard.php b/src/Twig/Components/Icon/IconSetCard.php index cf372eee..74e13c60 100644 --- a/src/Twig/Components/Icon/IconSetCard.php +++ b/src/Twig/Components/Icon/IconSetCard.php @@ -21,13 +21,12 @@ final class IconSetCard public int $index = 0; - public int $samples = 10; - private const ICONSET_SAMPLES = [ 'lucide' => [ 'home', 'user', 'settings', 'search', 'arrow-down', 'heart', 'star', 'sun', 'grid', 'image', ], + 'bi' => [ 'house', 'person', 'gear', 'search', 'arrow-down', 'heart', 'star', 'sun', 'grid', 'image', diff --git a/src/Twig/Components/ProductGrid.php b/src/Twig/Components/ProductGrid.php index 0a18d271..c81d5008 100644 --- a/src/Twig/Components/ProductGrid.php +++ b/src/Twig/Components/ProductGrid.php @@ -24,7 +24,7 @@ final class ProductGrid use ComponentToolsTrait; use DefaultActionTrait; - private const PER_PAGE = 10; + private const PER_PAGE = 12; #[LiveProp] public int $page = 1; diff --git a/templates/components/Browser.html.twig b/templates/components/Browser.html.twig index d8eee9db..50834e33 100644 --- a/templates/components/Browser.html.twig +++ b/templates/components/Browser.html.twig @@ -1,29 +1,20 @@ -{% props url = '/' %} - -
-
-
-
- - - +
+
+
+
+ + +
-
- - - ux.symfony.com - - +
+ + ux.symfony.com +
-
+ {#
{% if false %}
+
#} +
-
+
{% block content %} {% endblock %}
diff --git a/templates/components/Card.html.twig b/templates/components/Card.html.twig index 332bd4c1..b1ea44ca 100644 --- a/templates/components/Card.html.twig +++ b/templates/components/Card.html.twig @@ -1,33 +1,28 @@ {% props name, image, url, description, tags, lazyload = true %} - diff --git a/templates/components/CookbookCard.html.twig b/templates/components/CookbookCard.html.twig deleted file mode 100644 index 72474c38..00000000 --- a/templates/components/CookbookCard.html.twig +++ /dev/null @@ -1,33 +0,0 @@ -{% props name, image, url, description, tags, lazyload = true %} - -
- -
- {{ name }} -
- -
-

- - {{- name -}} - -

-

- {{- description -}} -

-

- {% for tag in tags %} - {{ tag }} - {% endfor %} -

-
- -
diff --git a/templates/components/Demo/DemoCard.html.twig b/templates/components/Demo/DemoCard.html.twig index 71789a0d..9c45b6f7 100644 --- a/templates/components/Demo/DemoCard.html.twig +++ b/templates/components/Demo/DemoCard.html.twig @@ -1,28 +1,7 @@ -
- -
- {{ demo.name }} demo preview -
- -
-

- - {{ demo.name }} - -

-

- {{ demo.description }} -

-

- {% for tag in demo.tags %} - {{ tag }} - {% endfor %} -

-
- -
+ diff --git a/templates/components/DocsLink.html.twig b/templates/components/DocsLink.html.twig index 234223a0..c584a64b 100644 --- a/templates/components/DocsLink.html.twig +++ b/templates/components/DocsLink.html.twig @@ -1,30 +1,15 @@ -
-
- {% if isSmall %} -

- - - {{ title }} -

- {% else %} -

- - {{ title }} - - {% if icon|default %} - - {% elseif isExternal %} - - {% endif %} -

- {% endif %} - - {% if text %} -
-

{{ text }}

-
- {% endif %} + +
+ + {{ title }} + +
-
+

{{ text }}

+ diff --git a/templates/components/FeatureBox.html.twig b/templates/components/FeatureBox.html.twig index 946b6c6e..96563ba5 100644 --- a/templates/components/FeatureBox.html.twig +++ b/templates/components/FeatureBox.html.twig @@ -1,6 +1,4 @@ -
-
- -
-

{{ title }}

+
+ +

{{ title }}

diff --git a/templates/components/Icon/IconSetCard.html.twig b/templates/components/Icon/IconSetCard.html.twig index c4cc97f1..cca2a499 100644 --- a/templates/components/Icon/IconSetCard.html.twig +++ b/templates/components/Icon/IconSetCard.html.twig @@ -1,11 +1,15 @@ -
- -
-
- {% set sample_icons = this.getSampleIcons() %} +{% set sample_icons = this.getSampleIcons() %} +{% set samples = sample_icons|length %} +
+
+
{% for icon in sample_icons|default([]) %} -
+
{{ icon }}
-
-

- +
+

+ {{~ iconSet.name ~}}

- - {{ this.iconSet.total|number_format }} - icons + + {{ this.iconSet.total|number_format }} + icons
diff --git a/templates/components/Package/PackageHeader.html.twig b/templates/components/Package/PackageHeader.html.twig index ef8cd8c3..d4b6f807 100644 --- a/templates/components/Package/PackageHeader.html.twig +++ b/templates/components/Package/PackageHeader.html.twig @@ -25,22 +25,23 @@

{% endif %} -
+
{% if command is not defined or command %} {% endif %} {% if package.shouldShowDocsLink %} - + + + Read the docs + {% endif %}
diff --git a/templates/components/TerminalCommand.html.twig b/templates/components/TerminalCommand.html.twig index f796e109..9311e9db 100644 --- a/templates/components/TerminalCommand.html.twig +++ b/templates/components/TerminalCommand.html.twig @@ -8,7 +8,7 @@ >{{ command }} {% endblock %} -

stimulus_action

+ ### `stimulus_action` This function attaches an event listener to an HTML element, defining actions that trigger specific methods in the controller.