feat(themes): Add Blush theme

.github/workflows/ci.yml

@@ -103,6 +103,8 @@ jobs:
                         value: "castor sylius:payment-gateways:setup stripe"
                     -   name: Canvas theme
                         value: "castor sylius:theme:setup canvas"
+                    -   name: Blush theme
+                        value: "castor sylius:theme:setup blush"
                     -   name: Prompt theme
                         value: "castor sylius:theme:setup prompt"
                     -   name: Volt theme

AGENTS.md

@@ -11,6 +11,7 @@ To refresh the full-page homepage and Comet Pulse T-Shirt screenshots for a them
 
 ```bash
 node scripts/capture-theme-screenshots.mjs canvas
+node scripts/capture-theme-screenshots.mjs blush
 node scripts/capture-theme-screenshots.mjs prompt
 node scripts/capture-theme-screenshots.mjs volt
 ```
@@ -21,10 +22,33 @@ Add `--include-cart` to also put the Comet Pulse T-Shirt in a fresh browser cart
 
 ```bash
 node scripts/capture-theme-screenshots.mjs canvas --include-cart
+node scripts/capture-theme-screenshots.mjs blush --include-cart
 node scripts/capture-theme-screenshots.mjs prompt --include-cart
 node scripts/capture-theme-screenshots.mjs volt --include-cart
 ```
 
 The cart uses an isolated temporary browser profile and does not alter another browser session's cart.
 
 The script requires Node.js 22+ and Google Chrome or Chromium. Set `CHROME_BIN` if the browser executable is not detected automatically. The selected theme must be active on the storefront.
+
+## Running commands in the Sylius app
+
+Run Symfony console commands through the Castor app container from the repository
+root:
+
+```bash
+castor app:bash -- php bin/console cache:clear --env=dev
+castor app:bash -- php bin/console lint:twig templates --env=test
+```
+
+To switch the active storefront theme, use:
+
+```bash
+castor sylius:theme:setup <theme>
+```
+
+## Theme styling
+
+Never rely on `data-test-*` attributes in CSS selectors. They are testing
+helpers and may not be present in the production storefront; target stable
+classes or semantic structure instead.

README.md

@@ -18,6 +18,7 @@ your stack into a Sylius app, and gives you the tasks to drive it.
     * [🎨 Setup a theme](#-setup-a-theme)
         * [Available themes](#available-themes)
         * [Canvas theme](#canvas-theme)
+        * [Blush theme](#blush-theme)
         * [Prompt theme](#prompt-theme)
         * [Volt theme](#volt-theme)
     * [☰ Remove menu items from the Admin panel](#-remove-menu-items-from-the-admin-panel)
@@ -212,6 +213,7 @@ castor sylius:theme:setup canvas
 | Theme   | Description                                       |
 |---------|---------------------------------------------------|
 | canvas  | Install the Canvas storefront theme                    |
+| blush   | Install the Blush storefront theme                     |
 | prompt  | Install the terminal-inspired Prompt storefront theme  |
 | volt    | Install the bold, electric Volt storefront theme       |
 | default | No theme applied; rebuilds the application assets     |
@@ -251,6 +253,7 @@ The theme restyles the shop through SCSS overrides and Sylius Twig hooks:
 - **Layout** — squared corners everywhere (no border radius), minimal borders and
   generous spacing; the footer is rendered in dark charcoal.
 - **Header** — the default top bar and navbar are replaced by a single taxon navigation.
+- **Checkout** — the checkout header uses the Canvas wordmark and category navigation.
 - **Branding** — a dedicated Canvas wordmark appears in the header; the footer has no logo,
   and breadcrumbs stay text-only.
 - **Homepage** — a full-width banner and a "latest products" section; the deals and
@@ -263,17 +266,48 @@ The theme restyles the shop through SCSS overrides and Sylius Twig hooks:
 
 Install it with `castor sylius:theme:setup canvas`.
 
-Capture its screenshots, including the cart with a test product, using:
+#### Blush theme
 
-```bash
-node scripts/capture-theme-screenshots.mjs canvas --include-cart
-```
+The Blush theme adapts the visual language of the
+[JoliCode Sylius Starter](https://jolicode.github.io/sylius-starter/fr/) landing
+page into a storefront: a crisp white canvas, expressive raspberry accents,
+soft rose panels and a deep plum footer.
+
+- **Palette** — white and pale rose surfaces (`#FFFFFF`, `#FBF6F8`), raspberry
+  (`#B54878`) accents and plum (`#2D141F`) typography and footer.
+- **Components** — rounded buttons and product cards, a custom wordmark and
+  responsive taxon navigation.
+- **Homepage** — a French editorial hero with a CSS illustration and a direct
+  link to the latest products; the new-collection block is hidden.
+- **Shopping flow** — matching buttons, forms and checkout branding, including
+  the Blush wordmark and category navigation in the checkout header.
+
+Install it with `castor sylius:theme:setup blush`.
+
+Here are snapshots of the Blush storefront, including its cart with a product:
+
+<table>
+  <tr>
+    <td align="center" width="33%">
+      <a href="docs/images/blush-homepage.png"><img src="docs/images/blush-homepage.png" alt="Blush storefront homepage" width="100%"></a><br>
+      <strong>Homepage</strong>
+    </td>
+    <td align="center" width="33%">
+      <a href="docs/images/blush-comet-pulse-product.png"><img src="docs/images/blush-comet-pulse-product.png" alt="Comet Pulse T-Shirt product page in Blush" width="100%"></a><br>
+      <strong>Comet Pulse T-Shirt</strong>
+    </td>
+    <td align="center" width="33%">
+      <a href="docs/images/blush-cart.png"><img src="docs/images/blush-cart.png" alt="Blush cart containing the Comet Pulse T-Shirt" width="100%"></a><br>
+      <strong>Cart</strong>
+    </td>
+  </tr>
+</table>
 
 #### Prompt theme
 
-Prompt turns the [JoliCode Sylius Starter](https://jolicode.github.io/sylius-starter/en/)'s
-command-line aesthetic into a storefront: a dark workspace, terminal-green
-accents, monospaced typography and a command-inspired homepage panel.
+Prompt is a separate terminal-inspired storefront direction: a dark workspace,
+terminal-green accents, monospaced typography and a command-inspired homepage
+panel.
 
 Here are snapshots of the Prompt storefront, including its cart with a product:
 
@@ -302,15 +336,10 @@ Here are snapshots of the Prompt storefront, including its cart with a product:
   direct link to the latest products.
 - **Shopping flow** — matching cart and checkout styling, with light sage
   summary panels for contrast.
+- **Checkout** — the checkout header uses the Prompt wordmark and category navigation.
 
 Install it with `castor sylius:theme:setup prompt`.
 
-Refresh its screenshots and capture the cart with a test product using:
-
-```bash
-node scripts/capture-theme-screenshots.mjs prompt --include-cart
-```
-
 #### Volt theme
 
 The Volt theme takes the opposite route: a high-energy, sport-tech storefront
@@ -327,6 +356,8 @@ additional image assets.
 - **Product page** — the price sits directly below the product name, before reviews.
 - **Homepage** — an oversized, responsive graphic hero with a direct link to
   the latest products; new collection blocks are hidden.
+- **Checkout** — the checkout header uses the Volt wordmark and responsive
+  category navigation.
 
 Here are snapshots of the Volt storefront, including its cart with a product:
 
@@ -349,12 +380,6 @@ Here are snapshots of the Volt storefront, including its cart with a product:
 
 Install it with `castor sylius:theme:setup volt`.
 
-Capture its screenshots, including the cart with a test product, using:
-
-```bash
-node scripts/capture-theme-screenshots.mjs volt --include-cart
-```
-
 ### ☰ Remove menu items from the Admin panel
 
 Clean up the Sylius Admin panel by removing menu items you don't need.

resources/theme/blush/assets/shop/styles/_base.scss

@@ -0,0 +1,102 @@
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  min-height: 100vh;
+  background-color: $paper;
+  color: $ink;
+  font-family: $font-family-base;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  color: $pink;
+  text-underline-offset: 0.2em;
+  transition: color 160ms ease;
+
+  &:hover,
+  &.link-reset:hover {
+    color: $plum;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: $ink;
+  font-family: $headings-font-family;
+  font-weight: $headings-font-weight;
+  letter-spacing: -0.045em;
+  line-height: 1.08;
+  text-wrap: balance;
+}
+
+h1 {
+  font-size: clamp(2.5rem, 5.5vw, 4.75rem);
+}
+
+h2 {
+  font-size: clamp(1.9rem, 3.8vw, 3rem);
+}
+
+::selection {
+  background-color: $pink-bright;
+  color: $white;
+}
+
+:focus-visible {
+  outline: 3px solid $pink-bright;
+  outline-offset: 3px;
+}
+
+.text-muted,
+.text-body-secondary {
+  color: $muted !important;
+}
+
+.bg-light {
+  --bs-body-color: #{$ink};
+  --bs-body-color-rgb: 42, 32, 36;
+  --bs-emphasis-color: #{$ink};
+  --bs-emphasis-color-rgb: 42, 32, 36;
+  background-color: $rose !important;
+  color: $ink !important;
+}
+
+.bg-light :is(.text-muted, .text-body-secondary) {
+  color: $muted !important;
+}
+
+.bg-white {
+  --bs-body-color: #{$ink};
+  --bs-body-color-rgb: 42, 32, 36;
+  --bs-emphasis-color: #{$ink};
+  --bs-emphasis-color-rgb: 42, 32, 36;
+  color: $ink !important;
+}
+
+.bg-white :is(.text-muted, .text-body-secondary) {
+  color: $muted !important;
+}
+
+.blush-checkout-brand,
+.blush-checkout-account {
+  color: $ink;
+}
+
+.blush-checkout-brand a,
+.blush-checkout-account a,
+.blush-checkout-account .btn {
+  color: $pink !important;
+}
+
+.blush-checkout-brand a:hover,
+.blush-checkout-account a:hover,
+.blush-checkout-account .btn:hover {
+  color: $plum !important;
+}

resources/theme/blush/assets/shop/styles/_buttons.scss

@@ -0,0 +1,58 @@
+.btn {
+  min-height: 2.875rem;
+  padding: 0.75rem 1.4rem;
+  border-radius: 50rem;
+  font-size: 0.86rem;
+  font-weight: 700;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    color 160ms ease,
+    transform 160ms ease;
+
+  &:hover {
+    transform: translateY(-1px);
+  }
+}
+
+.btn-primary {
+  --bs-btn-color: #{$white};
+  --bs-btn-bg: #{$pink};
+  --bs-btn-border-color: #{$pink};
+  --bs-btn-hover-color: #{$white};
+  --bs-btn-hover-bg: #{$plum};
+  --bs-btn-hover-border-color: #{$plum};
+  --bs-btn-active-color: #{$white};
+  --bs-btn-active-bg: #{$plum};
+  --bs-btn-active-border-color: #{$plum};
+}
+
+.btn-secondary {
+  --bs-btn-color: #{$ink};
+  --bs-btn-bg: #{$rose-soft};
+  --bs-btn-border-color: #{$rose-soft};
+  --bs-btn-hover-color: #{$plum};
+  --bs-btn-hover-bg: #{$rose};
+  --bs-btn-hover-border-color: #{$rose};
+}
+
+.btn-outline-primary {
+  --bs-btn-color: #{$pink};
+  --bs-btn-bg: transparent;
+  --bs-btn-border-color: #{$pink};
+  --bs-btn-hover-color: #{$white};
+  --bs-btn-hover-bg: #{$pink};
+  --bs-btn-hover-border-color: #{$pink};
+}
+
+.btn-link {
+  color: $pink;
+
+  &:hover {
+    color: $plum;
+  }
+}
+
+#add-to-cart-button {
+  width: 100%;
+}

resources/theme/blush/assets/shop/styles/_cards.scss

@@ -0,0 +1,38 @@
+.card {
+  overflow: hidden;
+  border: 1px solid $border;
+  border-radius: 0.875rem;
+  background-color: $white;
+  box-shadow: 0 0.5rem 1.5rem rgba($plum, 0.035);
+  transition:
+    box-shadow 180ms ease,
+    transform 180ms ease;
+
+  &:hover {
+    box-shadow: 0 1rem 2rem rgba($plum, 0.09);
+    transform: translateY(-3px);
+  }
+}
+
+.card-body {
+  padding: 1.25rem;
+}
+
+.card-title {
+  margin-bottom: 0.5rem;
+  color: $ink;
+  font-weight: 700;
+}
+
+.card-text {
+  color: $muted;
+}
+
+.card-footer {
+  border-top-color: $border;
+  background-color: $white;
+}
+
+.products-grid {
+  gap: 1.5rem;
+}