Make phase section patterns follow the current phase colour (LSA-132)

CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [Unreleased] — Make phase section patterns follow the current phase colour (LS-4179)
+
+### Fixed
+
+- Accent colour (eyebrows, numbers, icons, bullets, borders) in the phase section patterns no longer stays hardcoded to Discover's green on the other five phase pages. Added a light-surface `--ls-phase-accent` custom property (`src/scss/structural/phase-journey-nav.scss`), set per phase via the existing `page-slug-{phase}` body class alongside `--ls-phase-accent-on-dark`. `phase-introduction.php` and `phase-delivery-numbers.php` now use it directly, and `phase-common-services.php`, `phase-support-focus.php`, `phase-deliverables-and-role.php` and `phase-where-to-go-next.php` point their `$ls_phase_accent` variable at it. `phase-cta.php` (permanently dark) now uses `--ls-phase-accent-on-dark` for its checklist bullet.
+
+([#73](https://github.com/lightspeedwp/ls-theme/pull/73))
+
+---
+
 ## [Unreleased] — Add flatten-proof phase colour and a phase-services dynamic block (LS-4179)
 
 ### Fixed

inc/phase-page-body-class.php

@@ -35,3 +35,40 @@ function ls_theme_add_phase_page_body_class( $classes ) {
 	return $classes;
 }
 add_filter( 'body_class', 'ls_theme_add_phase_page_body_class' );
+
+/**
+ * Sets the per-phase accent custom properties inside the block editor canvas.
+ *
+ * The editor canvas never receives the `page-slug-{phase}` body class added above, so the per-phase
+ * rules in phase-journey-nav.scss never match there and every phase-coloured element would fall back
+ * to the Discover defaults on `body`. This appends the same two properties for the phase page
+ * being edited to the editor's styles (after the theme's editor stylesheets, so it wins), so the
+ * editor preview matches the front end. Front-end output is unaffected.
+ *
+ * @param array                   $settings       Block editor settings.
+ * @param WP_Block_Editor_Context $editor_context Current block editor context.
+ * @return array
+ */
+function ls_theme_add_phase_editor_accent( $settings, $editor_context ) {
+	$ls_phase_slugs = array( 'discover', 'create', 'build', 'launch', 'grow', 'evolve' );
+
+	if ( empty( $editor_context->post ) || ! $editor_context->post instanceof WP_Post ) {
+		return $settings;
+	}
+
+	if ( 'page' !== $editor_context->post->post_type || ! in_array( $editor_context->post->post_name, $ls_phase_slugs, true ) ) {
+		return $settings;
+	}
+
+	$ls_phase = $editor_context->post->post_name;
+
+	$settings['styles'][] = array(
+		'css' => sprintf(
+			'body{--ls-phase-accent-on-dark:var(--wp--custom--color--phase--%1$s-on-dark,var(--wp--custom--color--phase--%1$s));--ls-phase-accent:var(--wp--custom--color--phase--%1$s);}',
+			$ls_phase
+		),
+	);
+
+	return $settings;
+}
+add_filter( 'block_editor_settings_all', 'ls_theme_add_phase_editor_accent', 10, 2 );

patterns/sections/phase-common-services.php

@@ -33,7 +33,7 @@
 	__( 'Early AI-readiness assessment', 'ls-theme' ),
 );
 
-$ls_phase_accent = 'var(--wp--custom--color--phase--discover)';
+$ls_phase_accent = 'var(--ls-phase-accent)';
 ?>
 <!-- wp:group {"align":"full","tagName":"section","className":"is-style-content-band","style":{"color":{"background":"var:custom|color|surface|card"},"spacing":{"padding":{"top":"var:preset|spacing|90","right":"var:preset|spacing|60","bottom":"var:preset|spacing|90","left":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
 <section class="wp-block-group alignfull is-style-content-band has-background" style="background-color:var(--wp--custom--color--surface--card);padding-top:var(--wp--preset--spacing--90);padding-right:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--90);padding-left:var(--wp--preset--spacing--60)">

patterns/sections/phase-cta.php

@@ -76,8 +76,8 @@
 					<?php foreach ( $ls_cta_checklist as $ls_checklist_item ) : ?>
 					<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|20"}},"layout":{"type":"flex","flexWrap":"nowrap","verticalAlignment":"center"}} -->
 					<div class="wp-block-group">
-						<!-- wp:group {"style":{"color":{"background":"var(--wp--custom--color--phase--discover-on-dark)"},"border":{"radius":"var:preset|border-radius|500"},"spacing":{"padding":{"top":"var:preset|spacing|10","right":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10"}}},"layout":{"type":"flex","justifyContent":"center","verticalAlignment":"center"}} -->
-						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--500);background-color:var(--wp--custom--color--phase--discover-on-dark);padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)">
+						<!-- wp:group {"style":{"color":{"background":"var(--ls-phase-accent-on-dark)"},"border":{"radius":"var:preset|border-radius|500"},"spacing":{"padding":{"top":"var:preset|spacing|10","right":"var:preset|spacing|10","bottom":"var:preset|spacing|10","left":"var:preset|spacing|10"}}},"layout":{"type":"flex","justifyContent":"center","verticalAlignment":"center"}} -->
+						<div class="wp-block-group has-background" style="border-radius:var(--wp--preset--border-radius--500);background-color:var(--ls-phase-accent-on-dark);padding-top:var(--wp--preset--spacing--10);padding-right:var(--wp--preset--spacing--10);padding-bottom:var(--wp--preset--spacing--10);padding-left:var(--wp--preset--spacing--10)">
 							<!-- wp:icon {"icon":"lightspeed/check","className":"has-text-color","style":{"color":{"text":"var(--wp--custom--color--text--on-light)"},"dimensions":{"width":"11px"}}} /-->
 						</div>
 						<!-- /wp:group -->

patterns/sections/phase-deliverables-and-role.php

@@ -23,7 +23,7 @@
  * @package ls-theme
  */
 
-$ls_phase_accent = 'var(--wp--custom--color--phase--discover)';
+$ls_phase_accent = 'var(--ls-phase-accent)';
 
 $ls_deliverables = array(
 	__( 'A project summary with priorities, risks, and opportunities', 'ls-theme' ),

patterns/sections/phase-delivery-numbers.php

@@ -67,8 +67,8 @@
 			<!-- wp:group {"tagName":"article","className":"is-style-stat-segment","style":{"spacing":{"blockGap":"var:preset|spacing|5","padding":{"top":"var:preset|spacing|20","right":"var:preset|spacing|20","bottom":"var:preset|spacing|20","left":"var:preset|spacing|20"}}},"layout":{"type":"flex","orientation":"vertical","flexWrap":"nowrap","justifyContent":"center"}} -->
 			<article class="wp-block-group is-style-stat-segment" style="padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--20);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--20)">
 			<?php endif; ?>
-				<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(--wp--custom--color--phase--discover)"},"typography":{"fontFamily":"var:preset|font-family|heading","fontWeight":"var:custom|typography|font-weight|extrabold"}},"fontSize":"600"} -->
-				<p class="has-text-align-center has-text-color has-600-font-size" style="color:var(--wp--custom--color--phase--discover);font-family:var(--wp--preset--font-family--heading);font-weight:var(--wp--custom--typography--font-weight--extrabold)"><?php echo esc_html( $ls_stat['value'] . $ls_stat['suffix'] ); ?></p>
+				<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(--ls-phase-accent)"},"typography":{"fontFamily":"var:preset|font-family|heading","fontWeight":"var:custom|typography|font-weight|extrabold"}},"fontSize":"600"} -->
+				<p class="has-text-align-center has-text-color has-600-font-size" style="color:var(--ls-phase-accent);font-family:var(--wp--preset--font-family--heading);font-weight:var(--wp--custom--typography--font-weight--extrabold)"><?php echo esc_html( $ls_stat['value'] . $ls_stat['suffix'] ); ?></p>
 				<!-- /wp:paragraph -->
 
 				<!-- wp:paragraph {"align":"center","style":{"typography":{"textTransform":"uppercase","letterSpacing":"var:custom|typography|letter-spacing|wide","fontWeight":"var:custom|typography|font-weight|semibold","lineHeight":"var:custom|line-height|heading-snug"}},"fontSize":"200"} -->