From 4907a978f6208d47305144401285a683381550f5 Mon Sep 17 00:00:00 2001 From: Brandonma21 Date: Tue, 4 Aug 2026 13:09:16 +0200 Subject: [PATCH 1/6] Refactor section patterns to enhance layout and styling consistency across work-related components --- patterns/cards/work-engagement-stat.php | 2 +- patterns/hero/work-hero.php | 4 +- patterns/section-stats-grid.php | 170 ++++++++++--------- patterns/sections/work-categories.php | 12 +- patterns/sections/work-discuss-project.php | 10 +- patterns/sections/work-related-routes.php | 4 +- patterns/sections/work-selected-projects.php | 10 +- 7 files changed, 121 insertions(+), 91 deletions(-) diff --git a/patterns/cards/work-engagement-stat.php b/patterns/cards/work-engagement-stat.php index d5e1c9c..8ccdd8e 100644 --- a/patterns/cards/work-engagement-stat.php +++ b/patterns/cards/work-engagement-stat.php @@ -16,7 +16,7 @@
- +

diff --git a/patterns/hero/work-hero.php b/patterns/hero/work-hero.php index ea9afe9..3b92135 100644 --- a/patterns/hero/work-hero.php +++ b/patterns/hero/work-hero.php @@ -31,8 +31,8 @@
- -
+ +
diff --git a/patterns/section-stats-grid.php b/patterns/section-stats-grid.php index 68da9ca..f11c044 100644 --- a/patterns/section-stats-grid.php +++ b/patterns/section-stats-grid.php @@ -49,91 +49,109 @@
- -
- -
- -

- - - -

- + +
+ + +
+ +
+ +
+ +

+ + + +

+ +
+ + + +

+ + + +

+ +
+
- + - -

- - - -

- -
- -
- - - -
- -
- - - -
- -
- -
- -

- - - -

- + +
+
- - - -

- - - -

- -
- + +
+
- -
- -
- -

- - - -

- + +
+ + +
+ +
+ +
+ +

+ + + +

+ +
+ + + +

+ + + +

+ +
+
- - - -

- - - -

- -
- + + + +
+ +
+ +
+ +

+ + + +

+ +
+ + + +

+ + + +

+ +
+ +
+ +
+
diff --git a/patterns/sections/work-categories.php b/patterns/sections/work-categories.php index 0e196a0..8abbc57 100644 --- a/patterns/sections/work-categories.php +++ b/patterns/sections/work-categories.php @@ -24,7 +24,17 @@
- + +
+ +
+ + + +

+ +
+

diff --git a/patterns/sections/work-discuss-project.php b/patterns/sections/work-discuss-project.php index 121408b..40b0699 100644 --- a/patterns/sections/work-discuss-project.php +++ b/patterns/sections/work-discuss-project.php @@ -20,15 +20,15 @@
-
+
- -
+ +
- -
+ +
diff --git a/patterns/sections/work-related-routes.php b/patterns/sections/work-related-routes.php index 0faaee2..99d926e 100644 --- a/patterns/sections/work-related-routes.php +++ b/patterns/sections/work-related-routes.php @@ -21,8 +21,8 @@
- -
+ +
diff --git a/patterns/sections/work-selected-projects.php b/patterns/sections/work-selected-projects.php index 3da705a..d6e578a 100644 --- a/patterns/sections/work-selected-projects.php +++ b/patterns/sections/work-selected-projects.php @@ -26,8 +26,8 @@
- -
+ +
@@ -53,9 +53,11 @@ -
+
- + +
+ From f6f36825e439f3691a568d5d00116018a6505d6c Mon Sep 17 00:00:00 2001 From: Brandonma21 Date: Tue, 4 Aug 2026 14:29:45 +0200 Subject: [PATCH 2/6] Fix Stats Grid card border and relocate block style variation files Co-Authored-By: Claude Sonnet 5 --- patterns/cards/work-engagement-stat.php | 4 +- patterns/section-stats-grid.php | 68 ++++++++++++------- .../columns}/card-divider-both.json | 0 .../cards => blocks/groups}/stat-segment.json | 3 +- 4 files changed, 48 insertions(+), 27 deletions(-) rename styles/{sections/cards => blocks/columns}/card-divider-both.json (100%) rename styles/{sections/cards => blocks/groups}/stat-segment.json (87%) diff --git a/patterns/cards/work-engagement-stat.php b/patterns/cards/work-engagement-stat.php index 8ccdd8e..124b7f5 100644 --- a/patterns/cards/work-engagement-stat.php +++ b/patterns/cards/work-engagement-stat.php @@ -13,8 +13,8 @@ */ ?> - -
+ +
diff --git a/patterns/section-stats-grid.php b/patterns/section-stats-grid.php index f11c044..3b79a0b 100644 --- a/patterns/section-stats-grid.php +++ b/patterns/section-stats-grid.php @@ -19,28 +19,50 @@
- +
- -
- -

- + +
- -

- -
- + +
+ +
+ +
+ + +
+ +

+ - -
- -

- + +

+ +
+ +
+ +
+ +
+ + + +
+ +
+ +

+ +
+ +
+
- +
@@ -54,8 +76,8 @@
- -
+ +
@@ -97,8 +119,8 @@
- -
+ +
@@ -125,8 +147,8 @@
- -
+ +
diff --git a/styles/sections/cards/card-divider-both.json b/styles/blocks/columns/card-divider-both.json similarity index 100% rename from styles/sections/cards/card-divider-both.json rename to styles/blocks/columns/card-divider-both.json diff --git a/styles/sections/cards/stat-segment.json b/styles/blocks/groups/stat-segment.json similarity index 87% rename from styles/sections/cards/stat-segment.json rename to styles/blocks/groups/stat-segment.json index 1690937..9361121 100644 --- a/styles/sections/cards/stat-segment.json +++ b/styles/blocks/groups/stat-segment.json @@ -19,7 +19,6 @@ "bottom": "var:preset|spacing|40", "left": "var:preset|spacing|30" } - }, - "css": "&{border-inline-end:1px solid var(--wp--custom--color--border--card);}" + } } } From ccc7b90777d60e000a2bed5a1d3909e048a0129c Mon Sep 17 00:00:00 2001 From: Brandonma21 Date: Tue, 4 Aug 2026 15:49:10 +0200 Subject: [PATCH 3/6] Center-align Related Routes card icons and adjust Selected Projects filter spacing Co-Authored-By: Claude Sonnet 5 --- patterns/cards/work-next-steps-card.php | 2 +- patterns/sections/work-related-routes.php | 14 +++++++------- patterns/sections/work-selected-projects.php | 4 ++-- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/patterns/cards/work-next-steps-card.php b/patterns/cards/work-next-steps-card.php index 6efce63..27d856a 100644 --- a/patterns/cards/work-next-steps-card.php +++ b/patterns/cards/work-next-steps-card.php @@ -13,7 +13,7 @@ */ ?> - +
diff --git a/patterns/sections/work-related-routes.php b/patterns/sections/work-related-routes.php index 99d926e..ff6c600 100644 --- a/patterns/sections/work-related-routes.php +++ b/patterns/sections/work-related-routes.php @@ -40,7 +40,7 @@ - +
@@ -60,7 +60,7 @@
- +
@@ -80,7 +80,7 @@
- +
@@ -100,7 +100,7 @@
- +
@@ -120,7 +120,7 @@
- +
@@ -140,7 +140,7 @@
- +
@@ -160,7 +160,7 @@
- +
diff --git a/patterns/sections/work-selected-projects.php b/patterns/sections/work-selected-projects.php index d6e578a..74a344e 100644 --- a/patterns/sections/work-selected-projects.php +++ b/patterns/sections/work-selected-projects.php @@ -55,8 +55,8 @@
- -
+ +
From 5e277249a5500ce972d4b632c79671e0a97bd077 Mon Sep 17 00:00:00 2001 From: Brandonma21 Date: Wed, 5 Aug 2026 17:01:52 +0200 Subject: [PATCH 4/6] Enhance responsive design and layout for selected projects and stats grid; update text for clarity and add Playwright test helpers for improved testing coverage. --- assets/css/animations.css | 17 +++ patterns/cards/work-engagement-stat.php | 2 +- patterns/section-stats-grid.php | 6 +- patterns/sections/work-selected-projects.php | 4 +- src/scss/animations.scss | 4 +- src/scss/sections/_selected-projects.scss | 16 +++ src/scss/sections/_stats-grid.scss | 27 ++++ tests/helpers/assertions.ts | 126 +++++++++++++++++++ tests/specs/work-single.spec.ts | 54 ++++++++ 9 files changed, 249 insertions(+), 7 deletions(-) create mode 100644 src/scss/sections/_selected-projects.scss create mode 100644 src/scss/sections/_stats-grid.scss create mode 100644 tests/helpers/assertions.ts create mode 100644 tests/specs/work-single.spec.ts diff --git a/assets/css/animations.css b/assets/css/animations.css index 2cdd681..6a52e1c 100644 --- a/assets/css/animations.css +++ b/assets/css/animations.css @@ -2001,3 +2001,20 @@ background-color: var(--wp--custom--color--card--platform--wordpress); color: var(--wp--custom--color--text--on-dark); } + +@media (max-width: 833.98px) { + .is-style-card-divider-both { + flex-wrap: wrap !important; + } + .is-style-card-divider-both > .wp-block-column { + flex-basis: 100% !important; + } + .is-style-card-divider-both > .wp-block-column:first-child > .is-not-stacked-on-mobile > .wp-block-column:last-child > .is-style-stat-segment { + border-right: none !important; + } +} +@media (min-width: 601px) and (max-width: 800px) { + .work-selected-projects-grid .wp-block-post-template.is-layout-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } +} diff --git a/patterns/cards/work-engagement-stat.php b/patterns/cards/work-engagement-stat.php index 124b7f5..1177830 100644 --- a/patterns/cards/work-engagement-stat.php +++ b/patterns/cards/work-engagement-stat.php @@ -33,7 +33,7 @@ -

+

diff --git a/patterns/section-stats-grid.php b/patterns/section-stats-grid.php index 3b79a0b..7707d67 100644 --- a/patterns/section-stats-grid.php +++ b/patterns/section-stats-grid.php @@ -147,8 +147,8 @@
- -
+ +
@@ -166,7 +166,7 @@ -

+

diff --git a/patterns/sections/work-selected-projects.php b/patterns/sections/work-selected-projects.php index 74a344e..f7d2ecb 100644 --- a/patterns/sections/work-selected-projects.php +++ b/patterns/sections/work-selected-projects.php @@ -52,8 +52,8 @@
- -
+ +
diff --git a/src/scss/animations.scss b/src/scss/animations.scss index c9594a0..fafc32d 100644 --- a/src/scss/animations.scss +++ b/src/scss/animations.scss @@ -9,4 +9,6 @@ @use "animations/mobile-menu-motion"; @use "animations/footer-motion"; @use "animations/header-motion"; -@use "animations/taxonomy-filter"; \ No newline at end of file +@use "animations/taxonomy-filter"; +@use "sections/stats-grid"; +@use "sections/selected-projects"; \ No newline at end of file diff --git a/src/scss/sections/_selected-projects.scss b/src/scss/sections/_selected-projects.scss new file mode 100644 index 0000000..da74ec3 --- /dev/null +++ b/src/scss/sections/_selected-projects.scss @@ -0,0 +1,16 @@ +// Selected Projects (patterns/sections/work-selected-projects.php): the +// project-card Query Loop is a fixed 3-column grid (post-template +// columnCount: 3). WordPress's own responsive fallback for a fixed-column +// grid has exactly one native breakpoint — max-width: 600px, collapsing to +// 1 column — with no native way to add an intermediate 2-column step above +// that, so this override is necessary rather than avoidable. It's scoped to +// the 600.01px–800px gap ONLY, so it never touches WordPress's own native +// 1-column mobile behaviour at 600px and below. Also scoped to +// .work-selected-projects-grid (set on the wp:query block itself) so it +// can't affect any other 3-column grid elsewhere on the site. + +@media (min-width: 601px) and (max-width: 800px) { + .work-selected-projects-grid .wp-block-post-template.is-layout-grid { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } +} diff --git a/src/scss/sections/_stats-grid.scss b/src/scss/sections/_stats-grid.scss new file mode 100644 index 0000000..caf0d45 --- /dev/null +++ b/src/scss/sections/_stats-grid.scss @@ -0,0 +1,27 @@ +// Stats Grid (patterns/section-stats-grid.php): the 4-stat row switches from +// 4-across to 2-per-row below 834px — narrower than that starts to look +// squeezed, based on direct testing. WordPress's own default column-stacking +// breakpoint (782px) is too low for this section specifically, and core has +// no attribute to pick a custom breakpoint value, so this override is +// necessary rather than avoidable. +// +// Below the same breakpoint, the Subscribers card's border-right (needed on +// desktop as the divider before TTFB) becomes a trailing edge instead, once +// it's the last card in its 2-per-row line — same fix already applied to the +// Tokens card directly in the pattern markup, but Subscribers needs it +// removed conditionally instead of always, since it's a real divider above +// this breakpoint. + +@media (max-width: 833.98px) { + .is-style-card-divider-both { + flex-wrap: wrap !important; + + > .wp-block-column { + flex-basis: 100% !important; + } + } + + .is-style-card-divider-both > .wp-block-column:first-child > .is-not-stacked-on-mobile > .wp-block-column:last-child > .is-style-stat-segment { + border-right: none !important; + } +} diff --git a/tests/helpers/assertions.ts b/tests/helpers/assertions.ts new file mode 100644 index 0000000..73391f1 --- /dev/null +++ b/tests/helpers/assertions.ts @@ -0,0 +1,126 @@ +import { expect, type Page, type Locator } from '@playwright/test'; + +/** + * Generic Playwright assertion helpers for ls-theme. + * + * None of these know about any specific page, pattern, or template — every + * input (selector, text, count, viewport width, expected value) is a + * parameter. They were extracted from testing the Work Archive template, + * but apply to any pattern in the theme with the same shape. + */ + +/** Asserts a list of text markers appears on the page in that exact order. */ +export async function expectSectionOrder(page: Page, markers: string[]) { + const bodyText = await page.locator('body').innerText(); + const positions = markers.map((marker) => bodyText.indexOf(marker)); + + positions.forEach((pos, i) => { + expect(pos, `Expected to find "${markers[i]}" on the page`).toBeGreaterThan(-1); + }); + + for (let i = 1; i < positions.length; i++) { + expect( + positions[i], + `Expected "${markers[i]}" to appear after "${markers[i - 1]}"` + ).toBeGreaterThan(positions[i - 1]); + } +} + +/** Asserts a selector matches exactly `count` elements. */ +export async function expectElementCount(page: Page, selector: string, count: number) { + await expect(page.locator(selector)).toHaveCount(count); +} + +/** + * Asserts every element matching `cardSelector` contains all of its + * `requiredParts` (each a sub-selector, e.g. 'a', '.wp-block-post-excerpt'). + */ +export async function expectCardParts(page: Page, cardSelector: string, requiredParts: string[]) { + const cards = page.locator(cardSelector); + const count = await cards.count(); + expect(count, `Expected at least one "${cardSelector}" card`).toBeGreaterThan(0); + + for (let i = 0; i < count; i++) { + const card = cards.nth(i); + for (const part of requiredParts) { + await expect( + card.locator(part), + `Card ${i} (${cardSelector}) is missing required part "${part}"` + ).toHaveCount(1, { timeout: 2000 }); + } + } +} + +/** Asserts a link, found by its visible text, has the expected href. */ +export async function expectLinkHref(page: Page, linkText: string, expectedHref: string) { + const link = page.getByRole('link', { name: linkText, exact: false }); + await expect(link).toHaveAttribute('href', expectedHref); +} + +/** + * Resizes the viewport to `viewportWidth` and asserts the grid at + * `gridSelector` shows exactly `expectedColumns` columns — works for both + * CSS Grid (reads grid-template-columns) and flex-wrap layouts (groups + * elements by their top offset). + */ +export async function expectGridColumnsAtViewport( + page: Page, + gridSelector: string, + viewportWidth: number, + expectedColumns: number, + viewportHeight = 900 +) { + await page.setViewportSize({ width: viewportWidth, height: viewportHeight }); + + const grid = page.locator(gridSelector).first(); + const display = await grid.evaluate((el) => getComputedStyle(el).display); + + if (display === 'grid') { + const columns = await grid.evaluate( + (el) => getComputedStyle(el).gridTemplateColumns.split(' ').length + ); + expect(columns, `Expected ${expectedColumns} grid columns at ${viewportWidth}px`).toBe( + expectedColumns + ); + return; + } + + // Flex/columns layout: count distinct items sharing the first row's top offset. + const tops: number[] = await grid.evaluate((el) => + [...el.children].map((child) => Math.round(child.getBoundingClientRect().top)) + ); + const firstRowCount = tops.filter((t) => t === tops[0]).length; + expect( + firstRowCount, + `Expected ${expectedColumns} items in the first row at ${viewportWidth}px` + ).toBe(expectedColumns); +} + +/** + * Asserts a computed CSS property on `selector` equals `expectedValue`, + * optionally after resizing to `viewportWidth` first. + */ +export async function expectComputedStyle( + page: Page, + selector: string, + property: string, + expectedValue: string, + viewportWidth?: number, + viewportHeight = 900 +) { + if (viewportWidth) { + await page.setViewportSize({ width: viewportWidth, height: viewportHeight }); + } + + const value = await page + .locator(selector) + .first() + .evaluate((el, prop) => getComputedStyle(el).getPropertyValue(prop), property); + + expect( + value, + `Expected ${selector} to have ${property}: ${expectedValue}${ + viewportWidth ? ` at ${viewportWidth}px` : '' + }` + ).toBe(expectedValue); +} diff --git a/tests/specs/work-single.spec.ts b/tests/specs/work-single.spec.ts new file mode 100644 index 0000000..d9328ab --- /dev/null +++ b/tests/specs/work-single.spec.ts @@ -0,0 +1,54 @@ +import { test } from '@playwright/test'; +import { + expectSectionOrder, + expectElementCount, + expectCardParts, + expectLinkHref, + expectGridColumnsAtViewport, + expectComputedStyle, +} from '../helpers/assertions'; + +// ILLUSTRATIVE — selectors below are guesses at what work-single will look +// like, based on today's conventions (breadcrumbs, eyebrow badge, CTA +// buttons, a related-projects card row). Swap these for the real selectors +// once the pattern exists. This file exists to show the *shape* of how the +// 6 helpers get used, not to test anything real yet. + +const SINGLE_PROJECT_URL = '/portfolio/african-safari-consultants/'; + +test.describe('Work Single template', () => { + test('renders sections in order', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectSectionOrder(page, ['Home', 'Portfolio', 'Related projects']); + }); + + test('shows exactly 3 related-project cards', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectElementCount(page, '.is-style-card-case-study', 3); + }); + + test('each related-project card has its required parts', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectCardParts(page, '.is-style-card-case-study', [ + '.wp-block-post-title a', + '.wp-block-post-excerpt', + 'text=View project', + ]); + }); + + test('the CTA button links to the consultation page', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectLinkHref(page, 'Book a consultation', '/free-consultation/'); + }); + + test('related-projects grid reflows from 3 to 1 column on mobile', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectGridColumnsAtViewport(page, '.related-projects-grid', 1280, 3); + await expectGridColumnsAtViewport(page, '.related-projects-grid', 375, 1); + }); + + test('the single-project hero keeps its bottom divider border', async ({ page }) => { + await page.goto(SINGLE_PROJECT_URL); + await expectComputedStyle(page, '.work-single-hero', 'border-bottom-width', '1px'); + }); +}); From c709cc0fb0b85614449cc353c057bfdd9c02af32 Mon Sep 17 00:00:00 2001 From: Brandonma21 Date: Thu, 6 Aug 2026 08:34:29 +0200 Subject: [PATCH 5/6] Add card hover state and alternating section backgrounds to Work Archive - Add hover/focus-within lift, border, and shadow to is-style-card-case-study (Selected Projects cards), matching the existing card-motion treatment used elsewhere on the page - Add surface.canvas-alt token (theme.json + styles/dark.json) with new neutral-150/neutral-850 palette swatches, verified against WCAG AA 2.2 for text tokens rendered directly on section bands - Fix text.brand contrast: swap brand-500 for brand-600 so it clears 4.5:1 AA on canvas, card, and canvas-alt backgrounds - Add content-band-alt style variation (canvas-alt background, 16px radius) and apply it to the Selected Projects and Discuss Project sections for an alternating section rhythm down the page --- assets/css/animations.css | 16 ++++++++++++ patterns/sections/work-discuss-project.php | 4 +-- patterns/sections/work-selected-projects.php | 4 +-- src/scss/animations/_card-motion.scss | 24 +++++++++++++++++ styles/dark.json | 1 + styles/sections/content/content-band-alt.json | 26 +++++++++++++++++++ theme.json | 13 +++++++++- 7 files changed, 83 insertions(+), 5 deletions(-) create mode 100644 styles/sections/content/content-band-alt.json diff --git a/assets/css/animations.css b/assets/css/animations.css index 6a52e1c..1bcc727 100644 --- a/assets/css/animations.css +++ b/assets/css/animations.css @@ -406,6 +406,19 @@ gap: var(--wp--preset--spacing--10); } +/* Card - Work Project (Case Study) */ +.is-style-card-case-study { + --ls-card-case-study-border-active: var(--wp--custom--color--link--accent); + --ls-card-case-study-shadow-active: var(--wp--custom--shadow--card--hover); + --ls-card-case-study-lift: -4px; + transition: border-color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard), box-shadow var(--wp--custom--animation--duration--medium) var(--wp--custom--animation--easing--standard), transform var(--wp--custom--animation--duration--medium) var(--wp--custom--animation--easing--emphasised); +} +.is-style-card-case-study:hover, .is-style-card-case-study:focus-within { + border-color: var(--ls-card-case-study-border-active); + box-shadow: var(--ls-card-case-study-shadow-active); + transform: translateY(var(--ls-card-case-study-lift)); +} + /* Card - Services */ .is-style-card-services { --ls-card-services-border-rest: var(--wp--custom--color--border--card); @@ -672,6 +685,7 @@ .is-style-card-feature, .is-style-card-feature :is(.ls-card__icon-shell, .ls-card-feature__icon-shell), .is-style-card-category, + .is-style-card-case-study, .is-style-card-link-row, .is-style-card-services, .is-style-card-services::before, @@ -687,6 +701,8 @@ .is-style-card-feature:focus-within, .is-style-card-category:hover, .is-style-card-category:focus-within, + .is-style-card-case-study:hover, + .is-style-card-case-study:focus-within, .is-style-card-services:hover, .is-style-card-services:focus-within { transform: none; diff --git a/patterns/sections/work-discuss-project.php b/patterns/sections/work-discuss-project.php index 40b0699..cbd360f 100644 --- a/patterns/sections/work-discuss-project.php +++ b/patterns/sections/work-discuss-project.php @@ -13,8 +13,8 @@ */ ?> - -
+ +
diff --git a/patterns/sections/work-selected-projects.php b/patterns/sections/work-selected-projects.php index f7d2ecb..fa0d9db 100644 --- a/patterns/sections/work-selected-projects.php +++ b/patterns/sections/work-selected-projects.php @@ -13,8 +13,8 @@ */ ?> - -
+ +
diff --git a/src/scss/animations/_card-motion.scss b/src/scss/animations/_card-motion.scss index 80d77fd..c07bbe2 100644 --- a/src/scss/animations/_card-motion.scss +++ b/src/scss/animations/_card-motion.scss @@ -241,6 +241,27 @@ } } +/* Card - Work Project (Case Study) */ +.is-style-card-case-study { + --ls-card-case-study-border-active: var(--wp--custom--color--link--accent); + --ls-card-case-study-shadow-active: var(--wp--custom--shadow--card--hover); + --ls-card-case-study-lift: -4px; + transition: + border-color var(--wp--custom--animation--duration--base) + var(--wp--custom--animation--easing--standard), + box-shadow var(--wp--custom--animation--duration--medium) + var(--wp--custom--animation--easing--standard), + transform var(--wp--custom--animation--duration--medium) + var(--wp--custom--animation--easing--emphasised); + + &:hover, + &:focus-within { + border-color: var(--ls-card-case-study-border-active); + box-shadow: var(--ls-card-case-study-shadow-active); + transform: translateY(var(--ls-card-case-study-lift)); + } +} + /* Card - Services */ .is-style-card-services { --ls-card-services-border-rest: var(--wp--custom--color--border--card); @@ -571,6 +592,7 @@ .is-style-card-feature, .is-style-card-feature :is(.ls-card__icon-shell, .ls-card-feature__icon-shell), .is-style-card-category, + .is-style-card-case-study, .is-style-card-link-row, .is-style-card-services, .is-style-card-services::before, @@ -588,6 +610,8 @@ .is-style-card-feature:focus-within, .is-style-card-category:hover, .is-style-card-category:focus-within, + .is-style-card-case-study:hover, + .is-style-card-case-study:focus-within, .is-style-card-services:hover, .is-style-card-services:focus-within { transform: none; diff --git a/styles/dark.json b/styles/dark.json index bc08418..be9fbaf 100644 --- a/styles/dark.json +++ b/styles/dark.json @@ -17,6 +17,7 @@ }, "surface": { "canvas": "var:preset|color|contrast", + "canvas-alt": "var:preset|color|neutral-850", "card": "var:preset|color|neutral-900", "card-raised": "var:preset|color|neutral-800", "highlight": "var:preset|color|base", diff --git a/styles/sections/content/content-band-alt.json b/styles/sections/content/content-band-alt.json new file mode 100644 index 0000000..ef9ce87 --- /dev/null +++ b/styles/sections/content/content-band-alt.json @@ -0,0 +1,26 @@ +{ + "$schema": "https://schemas.wp.org/wp/6.9/theme.json", + "version": 3, + "title": "Content Band - Alt", + "slug": "content-band-alt", + "blockTypes": [ + "core/group" + ], + "description": "Alternate full-width content band for a page section: same padding as Content Band, but uses the tinted canvas-alt surface so alternating sections read as visually distinct from the default white/dark canvas.", + "styles": { + "color": { + "background": "var:custom|color|surface|canvas-alt" + }, + "border": { + "radius": "16px" + }, + "spacing": { + "padding": { + "top": "var:preset|spacing|80", + "right": "var:preset|spacing|30", + "bottom": "var:preset|spacing|90", + "left": "var:preset|spacing|30" + } + } + } +} diff --git a/theme.json b/theme.json index 41d8a46..554249f 100644 --- a/theme.json +++ b/theme.json @@ -25,6 +25,11 @@ "slug": "neutral-100", "color": "#F4F4F4" }, + { + "name": "Neutral 150", + "slug": "neutral-150", + "color": "#F0F0F0" + }, { "name": "Neutral 200", "slug": "neutral-200", @@ -60,6 +65,11 @@ "slug": "neutral-800", "color": "#303030" }, + { + "name": "Neutral 850", + "slug": "neutral-850", + "color": "#262626" + }, { "name": "Neutral 900", "slug": "neutral-900", @@ -482,13 +492,14 @@ "inverse": "var:preset|color|base", "muted": "var:preset|color|neutral-700", "subtle": "var:preset|color|neutral-600", - "brand": "var:preset|color|brand-500", + "brand": "var:preset|color|brand-600", "brand-strong": "var:preset|color|brand-800", "on-dark": "var:preset|color|base", "on-dark-muted": "var:preset|color|neutral-400" }, "surface": { "canvas": "var:preset|color|base", + "canvas-alt": "var:preset|color|neutral-150", "card": "var:preset|color|neutral-100", "card-raised": "var:preset|color|neutral-200", "highlight": "var:preset|color|base", From 97481f730d0a972dd933c9f9c76fa9a2c0b9bbc8 Mon Sep 17 00:00:00 2001 From: Brandonma21 Date: Thu, 6 Aug 2026 09:01:29 +0200 Subject: [PATCH 6/6] Apply valid CodeRabbit/Copilot review findings from PR #19 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove 5 hardcoded iconColor/iconColorValue attributes; they already rendered via the icon.background custom token (light + dark values) - Restore missing block-gap inline style on work-discuss-project's wp:columns wrapper to match its serialized attribute - Fix expectCardParts() to check presence instead of an exact count of 1 - Remove unused Locator import and trim getPropertyValue() output in tests/helpers/assertions.ts - Skip the illustrative work-single.spec.ts suite until the template exists - Fix two Stylelint violations and switch to border-inline-end for RTL safety in the SCSS section partials - Rebuild assets/css/animations.css from the corrected SCSS sources Not applied (3 recommendations): - CodeRabbit suggested reverting the Selected Projects breakpoint from 601px back to 600.01px. Declined: 600.01px was already tried and caused a devicePixelRatio:2 rounding bug where it and WordPress's native ≤600px query matched simultaneously at reported width 600, breaking the native 1-column mobile layout. 601px was the verified fix. - CodeRabbit suggested routing the 833.98px and 601–800px breakpoints through the shared mq() Sass mixin. Declined: mq() only supports named breakpoints from the theme's $ls-breakpoints map, and neither of these custom pixel values exists in that map — using raw @media queries was the deliberate workaround for that exact limitation, not an oversight. - Copilot suggested the grid-template-columns column count in expectGridColumnsAtViewport() is unreliable because minmax() isn't split correctly. Declined: getComputedStyle().gridTemplateColumns is a CSSOM special case that returns resolved pixel tracks, not the minmax()/repeat() source syntax, so splitting on spaces is correct — confirmed by this session's own live browser testing. --- assets/css/animations.css | 2 +- patterns/hero/work-hero.php | 4 ++-- patterns/sections/work-categories.php | 4 ++-- patterns/sections/work-discuss-project.php | 6 +++--- patterns/sections/work-related-routes.php | 4 ++-- patterns/sections/work-selected-projects.php | 4 ++-- src/scss/animations/_card-motion.scss | 1 + src/scss/sections/_stats-grid.scss | 3 +-- tests/helpers/assertions.ts | 8 ++++---- tests/specs/work-single.spec.ts | 5 ++++- 10 files changed, 22 insertions(+), 19 deletions(-) diff --git a/assets/css/animations.css b/assets/css/animations.css index 1bcc727..d08f7d9 100644 --- a/assets/css/animations.css +++ b/assets/css/animations.css @@ -2026,7 +2026,7 @@ flex-basis: 100% !important; } .is-style-card-divider-both > .wp-block-column:first-child > .is-not-stacked-on-mobile > .wp-block-column:last-child > .is-style-stat-segment { - border-right: none !important; + border-inline-end: none !important; } } @media (min-width: 601px) and (max-width: 800px) { diff --git a/patterns/hero/work-hero.php b/patterns/hero/work-hero.php index 3b92135..55b2cc2 100644 --- a/patterns/hero/work-hero.php +++ b/patterns/hero/work-hero.php @@ -31,8 +31,8 @@
- -
+ +
diff --git a/patterns/sections/work-categories.php b/patterns/sections/work-categories.php index 8abbc57..50475fe 100644 --- a/patterns/sections/work-categories.php +++ b/patterns/sections/work-categories.php @@ -26,8 +26,8 @@
- -
+ +
diff --git a/patterns/sections/work-discuss-project.php b/patterns/sections/work-discuss-project.php index cbd360f..d776d3e 100644 --- a/patterns/sections/work-discuss-project.php +++ b/patterns/sections/work-discuss-project.php @@ -20,15 +20,15 @@
-
+
- -
+ +
diff --git a/patterns/sections/work-related-routes.php b/patterns/sections/work-related-routes.php index ff6c600..9569ece 100644 --- a/patterns/sections/work-related-routes.php +++ b/patterns/sections/work-related-routes.php @@ -21,8 +21,8 @@
- -
+ +
diff --git a/patterns/sections/work-selected-projects.php b/patterns/sections/work-selected-projects.php index fa0d9db..48a9604 100644 --- a/patterns/sections/work-selected-projects.php +++ b/patterns/sections/work-selected-projects.php @@ -26,8 +26,8 @@
- -
+ +
diff --git a/src/scss/animations/_card-motion.scss b/src/scss/animations/_card-motion.scss index c07bbe2..201e33e 100644 --- a/src/scss/animations/_card-motion.scss +++ b/src/scss/animations/_card-motion.scss @@ -246,6 +246,7 @@ --ls-card-case-study-border-active: var(--wp--custom--color--link--accent); --ls-card-case-study-shadow-active: var(--wp--custom--shadow--card--hover); --ls-card-case-study-lift: -4px; + transition: border-color var(--wp--custom--animation--duration--base) var(--wp--custom--animation--easing--standard), diff --git a/src/scss/sections/_stats-grid.scss b/src/scss/sections/_stats-grid.scss index caf0d45..954b4a5 100644 --- a/src/scss/sections/_stats-grid.scss +++ b/src/scss/sections/_stats-grid.scss @@ -4,7 +4,6 @@ // breakpoint (782px) is too low for this section specifically, and core has // no attribute to pick a custom breakpoint value, so this override is // necessary rather than avoidable. -// // Below the same breakpoint, the Subscribers card's border-right (needed on // desktop as the divider before TTFB) becomes a trailing edge instead, once // it's the last card in its 2-per-row line — same fix already applied to the @@ -22,6 +21,6 @@ } .is-style-card-divider-both > .wp-block-column:first-child > .is-not-stacked-on-mobile > .wp-block-column:last-child > .is-style-stat-segment { - border-right: none !important; + border-inline-end: none !important; } } diff --git a/tests/helpers/assertions.ts b/tests/helpers/assertions.ts index 73391f1..92aaf25 100644 --- a/tests/helpers/assertions.ts +++ b/tests/helpers/assertions.ts @@ -1,4 +1,4 @@ -import { expect, type Page, type Locator } from '@playwright/test'; +import { expect, type Page } from '@playwright/test'; /** * Generic Playwright assertion helpers for ls-theme. @@ -44,9 +44,9 @@ export async function expectCardParts(page: Page, cardSelector: string, required const card = cards.nth(i); for (const part of requiredParts) { await expect( - card.locator(part), + card.locator(part).first(), `Card ${i} (${cardSelector}) is missing required part "${part}"` - ).toHaveCount(1, { timeout: 2000 }); + ).toBeAttached({ timeout: 2000 }); } } } @@ -115,7 +115,7 @@ export async function expectComputedStyle( const value = await page .locator(selector) .first() - .evaluate((el, prop) => getComputedStyle(el).getPropertyValue(prop), property); + .evaluate((el, prop) => getComputedStyle(el).getPropertyValue(prop).trim(), property); expect( value, diff --git a/tests/specs/work-single.spec.ts b/tests/specs/work-single.spec.ts index d9328ab..f70a257 100644 --- a/tests/specs/work-single.spec.ts +++ b/tests/specs/work-single.spec.ts @@ -16,7 +16,10 @@ import { const SINGLE_PROJECT_URL = '/portfolio/african-safari-consultants/'; -test.describe('Work Single template', () => { +// Skipped: work-single doesn't exist yet, and these selectors/URL are illustrative +// guesses, not real markup. Un-skip once the template is built and selectors are +// swapped for the real ones. +test.describe.skip('Work Single template', () => { test('renders sections in order', async ({ page }) => { await page.goto(SINGLE_PROJECT_URL); await expectSectionOrder(page, ['Home', 'Portfolio', 'Related projects']);