Fix legacy outermost/icon-block CSS selectors broken by Core Icon migration (LS-3720)

CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ---
 
+## [Unreleased] — Fix legacy outermost/icon-block CSS selectors broken by Core Icon migration (LS-3720)
+
+### Fixed
+
+- Fixed mega-menu and Work-archive card icon hover/focus colour treatments no longer applying after the Core Icon block migration (LS-3229): `.wp-block-outermost-icon-block` selectors in `src/scss/animations/_menu-motion.scss` and `src/scss/structural/work-archive-sections.scss` only matched the legacy `outermost/icon-block` markup, so any icon already converted to WordPress 7.1's Core `core/icon` block (`.wp-block-icon`) lost its hover styling. Both selector sets now target `.wp-block-outermost-icon-block` and `.wp-block-icon` side by side, so neither markup shape loses the treatment while any remaining legacy instances are migrated.
+- Removed a redundant, footer-specific `.icon-container svg { fill: currentColor; }` rule from `src/scss/animations/_footer-motion.scss`.
+- Removed the stale compiled artifact `assets/css/animations.min.css`.
+
+### Changed
+
+- Moved the `.is-style-mega-menu-item-default` icon hover/focus `color` rule from `src/scss/animations/_menu-motion.scss` to `src/scss/structural/_mega-menu.scss`, per code review: motion partials may only contain `transition`/`transform`/`animation`-family properties (AGENTS.md), so the non-motion colour swap now lives in the structural partial alongside the rest of that style's rules, while the animations file retains only the `transition` and its `prefers-reduced-motion` override.
+
+---
+
 ## [Unreleased] — Fix button.fill color contrast (LS-2937)
 
 ### Fixed

src/scss/animations/_footer-motion.scss

@@ -96,18 +96,6 @@
   }
 }
 
-/*
- * Icon Block SVGs (the phase-colour dots beside each nav-column heading, the "Available for
- * selected projects" checkmark, and the social icons) render with the browser's default SVG fill
- * — solid black — because none of their <svg> markup declares fill="currentColor". That means the
- * `color` set via their inline style (the semantic phase/text colour token) was never actually
- * reaching the icon glyph, in either light or dark mode. Same fix already applied to
- * .ls-icon-frame-glow and the Services card icon shell elsewhere in this file family.
- */
-.site-footer .icon-container svg {
-  fill: currentColor;
-}
-
 /*
  * Footer nav links (.ls-footer-nav-link, folded in from
  * styles/blocks/paragraphs/footer-nav-link.json — LS-2341): underline reveals on hover/focus by

src/scss/animations/_menu-motion.scss

@@ -3,28 +3,26 @@
 /********** Mega Menu Item **********/
 
 /*
- * Hover/focus states for .is-style-mega-menu-item-default (styles/blocks/groups/mega-menu-item-default.json)
- * and .is-style-mega-menu-item-service (styles/blocks/groups/mega-menu-item-service.json). WordPress's
- * global-styles engine only generates :hover/:focus CSS for the elements.link/button/etc. allowlist
- * — arbitrary block style variations never get pseudo-state rules, so this piece can't be expressed
- * in either JSON style. Base (non-hover) styles for these rows, and the icon well's own appearance,
- * remain authored in theme.json/style JSON. The shared background-raise contract itself lives in
- * _shared-hover.scss — only the Default item's icon-colour transition is unique to this file.
+ * Hover/focus transition for .is-style-mega-menu-item-default (styles/blocks/groups/mega-menu-item-default.json).
+ * The colour swap itself lives in src/scss/structural/_mega-menu.scss (motion files may only hold
+ * transition/transform/animation properties — see AGENTS.md); this file owns only the transition
+ * timing and its prefers-reduced-motion override.
  */
 .is-style-mega-menu-item-default {
-  .wp-block-outermost-icon-block {
+  // .wp-block-outermost-icon-block covers any not-yet-converted outermost/icon-block
+  // instance (see LS-3229's "Missing icons" tracking list); .wp-block-icon covers the
+  // WP 7.1 Core Icon block that replaces it. Both selectors are kept side by side rather
+  // than one replacing the other, so neither markup shape loses this hover treatment.
+  .wp-block-outermost-icon-block,
+  .wp-block-icon {
     transition: color var(--wp--custom--animation--duration--base)
       var(--wp--custom--animation--easing--standard);
   }
-
-  &:hover .wp-block-outermost-icon-block,
-  &:focus-within .wp-block-outermost-icon-block {
-    color: var(--wp--custom--color--text--subtle);
-  }
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .is-style-mega-menu-item-default .wp-block-outermost-icon-block {
+  .is-style-mega-menu-item-default .wp-block-outermost-icon-block,
+  .is-style-mega-menu-item-default .wp-block-icon {
     transition: none;
   }
 }

src/scss/structural/_mega-menu.scss

@@ -185,6 +185,17 @@
     inset: 0;
     z-index: 1;
   }
+
+  // Hover/focus colour for the row's icon (transition timing lives in
+  // src/scss/animations/_menu-motion.scss). .wp-block-outermost-icon-block covers any
+  // not-yet-converted outermost/icon-block instance (see LS-3229's "Missing icons"
+  // tracking list); .wp-block-icon covers the WP 7.1 Core Icon block that replaces it.
+  &:hover .wp-block-outermost-icon-block,
+  &:focus-within .wp-block-outermost-icon-block,
+  &:hover .wp-block-icon,
+  &:focus-within .wp-block-icon {
+    color: var(--wp--custom--color--text--subtle);
+  }
 }
 
 .is-style-mega-menu-item-service {

src/scss/structural/work-archive-sections.scss

@@ -100,8 +100,15 @@
     border-color: var(--ls-card-link-row-border-active);
   }
 
+  // .wp-block-outermost-icon-block .icon-container covers any not-yet-converted
+  // outermost/icon-block instance (see LS-3229's "Missing icons" tracking list);
+  // .wp-block-icon covers the WP 7.1 Core Icon block that replaces it — a single
+  // wrapper, not two nested ones, so it needs its own selector rather than reuse
+  // of the two-class descendant chain above.
   &:hover .wp-block-outermost-icon-block .icon-container,
-  &:focus-within .wp-block-outermost-icon-block .icon-container {
+  &:focus-within .wp-block-outermost-icon-block .icon-container,
+  &:hover .wp-block-icon,
+  &:focus-within .wp-block-icon {
     color: var(--ls-card-link-row-icon-active) !important;
   }
 }