feat: use o-visual-effects mixin to create standard box-shadow

markdoran-ft · markdoran-ft · commit 35213586d136 · 2026-04-20T17:11:35.000+01:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/dotcom-ui-header/package.json b/packages/dotcom-ui-header/package.json
@@ -32,6 +32,7 @@
     "@financial-times/logo-images": "^1.10.1",
     "@financial-times/o-header": "^15.5.0",
     "@financial-times/o3-button": "^3.15.0",
+    "@financial-times/o-visual-effects": "^5.0.2",
     "n-topic-search": "^10.1.1",
     "preact": "^10.23.2",
     "react": "17.x || 18.x",
diff --git a/packages/dotcom-ui-header/src/components/sub-navigation/subNavDropdown.scss b/packages/dotcom-ui-header/src/components/sub-navigation/subNavDropdown.scss
@@ -1,4 +1,5 @@
 @import '@financial-times/o3-foundation/css/professional.css';
+@import '@financial-times/o-visual-effects/main';
 
 @keyframes o-header-subnav-animation {
   0% {
@@ -31,7 +32,7 @@
   height: auto;
   transform: none;
   overflow-y: auto;
-  box-shadow: 2px 2px var(--o3-spacing-4xs) 0 rgba(15, 10, 46, 0.09);
+  @include oVisualEffectsShadowContent('mid');
   animation: o-header-subnav-animation 0.5s ease-out;
 }
 
