@undrr/undrr-mangrove 1.8.2 → 2.0.0-alpha.2

package/scss/Components/MegaMenu/mega-menu.scss

@@ -1,15 +1,15 @@
 .mg-mega-wrapper {
   position: relative;
-  background: $mg-color-white;
-  box-shadow: 0 2px 3px 0 rgb(51 51 51 / 0.31);
-  z-index: $mg-z-index-nav;
+  background: rgb(var(--mg-color-white));
+  box-shadow: inset 0 -1px 0 rgb(var(--mg-color-neutral-600) / 0.24);
+  z-index: var(--mg-z-index-nav);
 }
 
 .mg-mega-topbar {
   width: 100%;
   display: flex;
   align-items: flex-start;
-  z-index: $mg-z-index-nav;
+  z-index: var(--mg-z-index-nav);
   padding: 0;
   max-width: $mg-breakpoint-desktop;
   margin: 0 auto;
@@ -38,12 +38,12 @@
       position: relative;
       width: auto;
       margin-inline-start: auto;
-      background: $mg-color-white;
+      background: rgb(var(--mg-color-white));
       flex-shrink: 0;
       box-shadow: -3px 0 6px -2px rgb(0 0 0 / 0.15);
 
       &:has(.mg-icon-angle-circled-left) {
-        background: $mg-color-white;
+        background: rgb(var(--mg-color-white));
         box-shadow: -3px 0 6px -2px rgb(0 0 0 / 0.15);
       }
     }
@@ -65,7 +65,7 @@
     min-width: 0; // allow shrinking below intrinsic size
     display: flex;
     align-items: center;
-    padding: $mg-spacing-100 $mg-spacing-150;
+    padding: var(--mg-spacing-100) var(--mg-spacing-150);
   }
 
   // Logo image
@@ -110,7 +110,7 @@
     }
 
     font-size: $mg-font-size-300;
-    color: $mg-color-interactive;
+    color: rgb(var(--mg-color-interactive));
     font-weight: bold;
     list-style: none;
     padding: 0;
@@ -122,7 +122,7 @@
 
     > a,
     > button {
-      padding: $mg-spacing-150;
+      padding: var(--mg-spacing-150);
       display: block;
       cursor: pointer;
       line-height: mg-rem(18); // normalization
@@ -135,16 +135,16 @@
 
     @media screen and (min-width: $mg-breakpoint-tablet) {
       &--active {
-        background: rgba($mg-color-interactive, 0.2);
+        box-shadow: inset 0 -3px 0 rgb(var(--mg-color-interactive));
 
         a,
         .mg-mega-topbar__item-link {
-          color: $mg-color-interactive;
+          color: rgb(var(--mg-color-interactive));
           text-decoration: none;
         }
 
         a.mg-button-primary {
-          color: $mg-color-white;
+          color: rgb(var(--mg-color-white));
           text-decoration: none;
         }
 
@@ -157,7 +157,7 @@
 
   &__item-link {
     font-family: $mg-font-family-headings;
-    color: $mg-color-interactive;
+    color: rgb(var(--mg-color-interactive));
     background: none;
     border: none;
     font-weight: bold;
@@ -189,10 +189,10 @@
   top: 1px;
   align-items: flex-start;
   justify-content: start;
-  background-color: rgba($mg-color-mega-content-bg, 0.7);
-  backdrop-filter: blur(10px);
-  border-radius: $mg-radius-tab;
-  box-shadow: -1px 5px 10px -1px rgb(0 0 0 / 0.25);
+  background-color: rgb(var(--mg-color-neutral-0));
+  box-shadow:
+    inset 0 1px 0 rgb(var(--mg-color-neutral-600) / 0.2),
+    0 18px 45px rgb(var(--mg-color-neutral-900) / 0.14);
   inset-inline-start: 0;
   z-index: 1; // submenu floats above page content within mega-menu stacking context
   width: 100%;
@@ -221,7 +221,7 @@
   &__left {
     height: 100%;
     width: 100%; // mobile-first
-    background-color: rgba($mg-color-mega-content-bg, 0.8);
+    background-color: rgb(var(--mg-color-neutral-0) / 0.8);
 
     @media screen and (min-width: $mg-breakpoint-tablet) {
       flex-basis: 33%;
@@ -231,12 +231,12 @@
     }
   }
   &__banner {
-    padding: $mg-spacing-250;
+    padding: var(--mg-spacing-250);
     header {
       font-family: $mg-font-family-headings;
       font-size: $mg-font-size-500;
       font-weight: bold;
-      padding-bottom: $mg-spacing-100;
+      padding-bottom: var(--mg-spacing-100);
     }
     p {
       a {
@@ -260,10 +260,8 @@
 }
 
 .mg-mega-content__left {
-  box-shadow: inset 0 5px 5px -3px rgb(0 0 0 / 0.2);
-
   // RTL-friendly border
-  border-inline-end: 2px solid rgba($mg-color-black, 0.2);
+  border-inline-end: 1px solid rgb(var(--mg-color-neutral-600) / 0.24);
 
   // Mobile-first: Hide section list on mobile
   .mg-mega-content__section-list {
@@ -276,12 +274,12 @@
 
   .mg-mega-content__section-list-link:hover,
   .mg-mega-content__section-list-link {
-    color: $mg-color-interactive-active;
+    color: rgb(var(--mg-color-interactive-active));
   }
 }
 
 .mg-mega-content__section-list {
-  padding-inline: $mg-spacing-200;
+  padding-inline: var(--mg-spacing-200);
 }
 
 .mg-mega-content__section-list-item {
@@ -296,8 +294,8 @@
     // RTL-friendly: Use logical properties for better improvements
     letter-spacing: 0.2px;
     position: relative;
-    padding: $mg-spacing-150 $mg-spacing-250;
-    margin-inline: -$mg-spacing-200; // extend hit area to both edges
+    padding: var(--mg-spacing-150) var(--mg-spacing-250);
+    margin-inline: calc(-1 * var(--mg-spacing-200)); // extend hit area to both edges
     font-weight: 600;
     transition:
       background-color 150ms ease,
@@ -306,7 +304,7 @@
 
     &:hover,
     &:focus-visible {
-      background: rgba($mg-color-interactive, 0.15);
+      background: rgb(var(--mg-color-blue-900) / 0.15);
       text-decoration: underline;
     }
 
@@ -317,8 +315,8 @@
       position: absolute;
       font-size: mg-rem(30);
       inset-inline-end: auto;
-      padding-inline-start: $mg-spacing-150;
-      margin-inline-end: $mg-spacing-150;
+      padding-inline-start: var(--mg-spacing-150);
+      margin-inline-end: var(--mg-spacing-150);
       transition:
         transform 150ms ease,
         inset-inline-start 200ms cubic-bezier(0.4, 0, 0.2, 1),
@@ -328,11 +326,11 @@
     }
 
     &--active {
-      padding: $mg-spacing-150 $mg-spacing-250;
-      margin-inline-start: -$mg-spacing-200;
-      border-inline-start: 4px solid $mg-color-interactive; // RTL-friendly vertical rule
+      padding: var(--mg-spacing-150) var(--mg-spacing-250);
+      margin-inline-start: calc(-1 * var(--mg-spacing-200));
+      border-inline-start: 4px solid rgb(var(--mg-color-interactive)); // RTL-friendly vertical rule
       text-decoration: underline;
-      background: rgba($mg-color-interactive, 0.15);
+      background: rgb(var(--mg-color-blue-900) / 0.15);
 
       &::after {
         opacity: 1;
@@ -353,18 +351,18 @@
 @keyframes mg-mega-tab-pulse {
   0% {
     box-shadow:
-      inset 4px 0 0 0 $mg-color-button,
-      0 0 0 0 rgba($mg-color-interactive, 0);
+      inset 4px 0 0 0 rgb(var(--mg-color-button)),
+      0 0 0 0 rgb(var(--mg-color-blue-900) / 0);
   }
   60% {
     box-shadow:
-      inset 4px 0 0 0 $mg-color-button,
-      0 0 0 8px rgba($mg-color-interactive, 0.12);
+      inset 4px 0 0 0 rgb(var(--mg-color-button)),
+      0 0 0 8px rgb(var(--mg-color-blue-900) / 0.12);
   }
   100% {
     box-shadow:
-      inset 4px 0 0 0 $mg-color-button,
-      0 0 0 0 rgba($mg-color-interactive, 0);
+      inset 4px 0 0 0 rgb(var(--mg-color-button)),
+      0 0 0 0 rgb(var(--mg-color-blue-900) / 0);
   }
 }
 
@@ -390,12 +388,11 @@
 
 /* Stronger keyboard focus ring for accessibility */
 .mg-mega-content__section-list-link:focus-visible {
-  outline: 2px solid $mg-color-white;
+  outline: 2px solid rgb(var(--mg-color-white));
   outline-offset: -2px;
 }
 
 .mg-mega-content__right {
-  box-shadow: inset 0 5px 5px -3px rgb(0 0 0 / 0.2);
   flex: 1;
   display: flex;
 
@@ -449,7 +446,7 @@
 
   ul {
     flex: 1;
-    padding: $mg-spacing-150;
+    padding: var(--mg-spacing-150);
     list-style: none;
 
     // Multicolumn layout only on desktop. This is primarily a Safari fix:
@@ -466,14 +463,14 @@
       // 300px was too wide — 3 columns never formed within the normal
       // constrained layout. See https://github.com/unisdr/undrr-mangrove/issues/970.
       column-width: 280px;
-      column-gap: $mg-spacing-200;
+      column-gap: var(--mg-spacing-200);
       column-fill: balance;
     }
 
     // nested menus - RTL-friendly
     ul {
       padding-block: 0;
-      padding-inline: $mg-spacing-150;
+      padding-inline: var(--mg-spacing-150);
       opacity: 0.8;
       break-inside: avoid;
     }
@@ -485,15 +482,15 @@
 
       a {
         display: block;
-        padding: $mg-spacing-50;
+        padding: var(--mg-spacing-50);
         overflow: hidden;
         white-space: wrap;
         text-overflow: clip;
-        color: $mg-color-black;
+        color: rgb(var(--mg-color-black));
         font-weight: bold;
 
         &:hover {
-          color: $mg-color-black;
+          color: rgb(var(--mg-color-black));
           text-decoration: underline;
         }
       }
@@ -506,7 +503,7 @@
   0% {
     background: linear-gradient(
       to bottom,
-      rgba($mg-color-interactive, 0.06) 0%,
+      rgb(var(--mg-color-blue-900) / 0.06) 0%,
       transparent 100%
     );
   }
@@ -528,7 +525,7 @@
 }
 
 .mg-icon-button {
-  padding: $mg-spacing-100;
+  padding: var(--mg-spacing-100);
   background-color: transparent;
   border: none;
   cursor: pointer;
@@ -537,7 +534,7 @@
   justify-content: center;
 
   &:hover {
-    background-color: $mg-color-interactive-active;
+    background-color: rgb(var(--mg-color-interactive-active));
   }
 }
 
@@ -554,17 +551,17 @@
 
     ol li {
       list-style: none;
-      padding-block: $mg-spacing-50;
-      padding-inline-start: $mg-spacing-300; // RTL-friendly
+      padding-block: var(--mg-spacing-50);
+      padding-inline-start: var(--mg-spacing-300); // RTL-friendly
       margin: 0;
 
       a {
-        color: $mg-color-white;
+        color: rgb(var(--mg-color-white));
         text-decoration: none;
       }
 
       &:hover {
-        background: $mg-color-interactive-active;
+        background: rgb(var(--mg-color-interactive-active));
       }
     }
   }
@@ -574,15 +571,15 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: $mg-color-white;
+  color: rgb(var(--mg-color-white));
   cursor: pointer;
-  padding: $mg-spacing-100 $mg-spacing-250;
+  padding: var(--mg-spacing-100) var(--mg-spacing-250);
 
   // Mobile-first: Start with mobile styles
-  background: $mg-color-interactive;
+  background: rgb(var(--mg-color-interactive));
   width: 100%;
   border: none;
-  border-block-end: 1px solid $mg-color-white; // RTL-friendly
+  border-block-end: 1px solid rgb(var(--mg-color-white)); // RTL-friendly
 
   // Desktop: Remove mobile-specific styles
   @media screen and (min-width: $mg-breakpoint-tablet) {
@@ -591,8 +588,8 @@
   }
 
   &:hover {
-    background: $mg-color-interactive-active;
-    color: $mg-color-white;
+    background: rgb(var(--mg-color-interactive-active));
+    color: rgb(var(--mg-color-white));
   }
 
   &:focus-visible {
@@ -624,8 +621,8 @@
 .mg-mega-sidebar {
   position: absolute;
   overflow: auto;
-  background-color: $mg-color-interactive-active;
-  z-index: $mg-z-index-nav;
+  background-color: rgb(var(--mg-color-interactive-active));
+  z-index: var(--mg-z-index-nav);
 
   // Mobile-first: Full-width mobile sidebar
   width: 100%;
@@ -659,7 +656,7 @@
 }
 
 .mg-mega-sidebar__list {
-  background: $mg-color-white;
+  background: rgb(var(--mg-color-white));
   display: flex;
   flex-direction: column;
   padding: 0;
@@ -673,12 +670,12 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: $mg-spacing-150 $mg-spacing-300;
-  color: $mg-color-white;
+  padding: var(--mg-spacing-150) var(--mg-spacing-300);
+  color: rgb(var(--mg-color-white));
   cursor: pointer;
 
   &:hover {
-    background: $mg-color-interactive-active;
+    background: rgb(var(--mg-color-interactive-active));
   }
 }
 
@@ -687,16 +684,16 @@
   position: absolute;
   inset-inline-end: 0; // RTL-friendly
   background: rgb(0 0 0 / 0); // we let the menu items show through to advertise the contents
-  color: $mg-color-interactive;
+  color: rgb(var(--mg-color-interactive));
   font-size: mg-rem(20);
   width: 100vw;
   height: 100%;
-  padding: $mg-spacing-100;
+  padding: var(--mg-spacing-100);
   border: none;
   cursor: pointer;
   align-items: start;
   justify-content: start;
-  z-index: $mg-z-index-nav-toggle;
+  z-index: var(--mg-z-index-nav-toggle);
   display: flex;
 
   // Hide mobile button on desktop
@@ -705,8 +702,8 @@
   }
 
   &:hover {
-    // background: $mg-color-interactive-active;
-    color: rgba($mg-color-interactive, 0.9);
+    // background: rgb(var(--mg-color-interactive-active));
+    color: rgb(var(--mg-color-blue-900) / 0.9);
   }
 
   .mg-mega-topbar {
@@ -715,7 +712,7 @@
 
   &:has(.mg-icon-angle-circled-left) {
     background: rgb(255 255 255 / 0.8);
-    color: $mg-color-interactive-active;
+    color: rgb(var(--mg-color-interactive-active));
     box-shadow: 0 0 4px rgb(0 0 0 / 0.2);
   }
 }
@@ -727,10 +724,10 @@
   position: absolute;
   top: 0;
   inset-inline-start: 0; // RTL-friendly
-  z-index: $mg-z-index-nav - 1;
+  z-index: calc(var(--mg-z-index-nav) - 1);
   display: block;
   overflow: auto;
-  background-color: $mg-color-interactive;
+  background-color: rgb(var(--mg-color-interactive));
   max-height: 80vh;
   height: 80vh;
   transform: translateY(-100vh);
@@ -757,7 +754,7 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  z-index: $mg-z-index-nav - 1;
+  z-index: calc(var(--mg-z-index-nav) - 1);
 
   // Desktop: Hide
   @media screen and (min-width: $mg-breakpoint-tablet) {

package/scss/Components/OnThisPageNav/on-this-page-nav.scss

@@ -9,12 +9,12 @@
   // Set this in your theme CSS to dock below a sticky MegaMenu or header.
   position: sticky;
   top: var(--mg-on-this-page-nav-offset, 0);
-  z-index: $mg-z-index-sticky; // above MegaMenu, below PageHeader
+  z-index: var(--mg-z-index-sticky); // above MegaMenu, below PageHeader
   display: flex;
   align-items: center;
-  background: $mg-color-neutral-0;
-  box-shadow: 0 2px 3px 0 rgb(51 51 51 / 0.31);
-  padding: 0 $mg-container-spacer;
+  background: rgb(var(--mg-color-neutral-0));
+  box-shadow: inset 0 -1px 0 rgb(var(--mg-color-neutral-600) / 0.24);
+  padding: 0 var(--mg-container-spacer);
 
   // Full-bleed: break out of any parent container to span the viewport.
   // Works even when nested inside an mg-container or Drupal content column.
@@ -27,11 +27,11 @@
   @media screen and (height <= 400px) {
     position: static;
     box-shadow: none;
-    border-bottom: 1px solid $mg-color-neutral-50;
+    border-bottom: 1px solid rgb(var(--mg-color-neutral-50));
   }
 
   @media screen and (min-width: $mg-breakpoint-tablet) {
-    padding: 0 $mg-spacing-200;
+    padding: 0 var(--mg-spacing-200);
   }
 
   &--hidden {
@@ -51,9 +51,9 @@
     // Fade gradient on the trailing edge signals more content is scrollable.
     // Uses mask-image so the fade is transparent (works on any background).
     // padding-inline-end gives the fade space so text isn't masked mid-character.
-    padding-inline-end: $mg-spacing-300;
-    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - #{$mg-spacing-500}), transparent);
-    mask-image: linear-gradient(to right, #000 calc(100% - #{$mg-spacing-500}), transparent);
+    padding-inline-end: var(--mg-spacing-300);
+    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--mg-spacing-500)), transparent);
+    mask-image: linear-gradient(to right, #000 calc(100% - var(--mg-spacing-500)), transparent);
 
     // Hide scrollbar but keep functional
     scrollbar-width: none;
@@ -65,9 +65,9 @@
     // When content is scrolled left, also fade the leading edge so users know
     // items are hidden behind the scroll button on that side.
     .mg-on-this-page-nav--has-left-overflow & {
-      padding-inline-start: $mg-spacing-300;
-      -webkit-mask-image: linear-gradient(to right, transparent, #000 #{$mg-spacing-500}, #000 calc(100% - #{$mg-spacing-500}), transparent);
-      mask-image: linear-gradient(to right, transparent, #000 #{$mg-spacing-500}, #000 calc(100% - #{$mg-spacing-500}), transparent);
+      padding-inline-start: var(--mg-spacing-300);
+      -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--mg-spacing-500), #000 calc(100% - var(--mg-spacing-500)), transparent);
+      mask-image: linear-gradient(to right, transparent, #000 var(--mg-spacing-500), #000 calc(100% - var(--mg-spacing-500)), transparent);
     }
   }
 
@@ -78,67 +78,67 @@
 
   &__link {
     display: block;
-    padding: $mg-spacing-150 $mg-spacing-150;
+    padding: var(--mg-spacing-150) var(--mg-spacing-150);
     font-family: $mg-font-family-headings;
     font-size: $mg-font-size-300;
     font-weight: 600;
-    color: $mg-color-neutral-600;
+    color: rgb(var(--mg-color-neutral-600));
     text-decoration: none;
     white-space: nowrap;
     border-bottom: 3px solid transparent;
-    transition: color 0.2s ease, border-color 0.2s ease;
+    transition:
+      border-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),
+      color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
 
     @media (prefers-reduced-motion: reduce) {
       transition: none;
     }
 
     &:hover {
-      color: $mg-color-interactive-active;
-      border-bottom-color: $mg-color-interactive-active;
+      color: rgb(var(--mg-color-interactive-active));
+      border-bottom-color: rgb(var(--mg-color-interactive-active));
       text-decoration: none;
     }
 
     &:focus-visible {
-      outline: 2px solid $mg-color-interactive;
-      outline-offset: -2px;
+      @include mg-focus-ring;
     }
 
     // Active state and active+hover — active wins over hover
     &--active,
     &--active:hover {
-      color: $mg-color-interactive;
-      border-bottom-color: $mg-color-interactive;
+      color: rgb(var(--mg-color-interactive));
+      border-bottom-color: rgb(var(--mg-color-interactive));
     }
   }
 
   &__cta {
     flex-shrink: 0;
     margin-inline-start: auto;
-    padding: $mg-spacing-150 $mg-spacing-150;
+    padding: var(--mg-spacing-150) var(--mg-spacing-150);
     font-family: $mg-font-family-headings;
     font-size: $mg-font-size-300;
     font-weight: 600;
-    color: $mg-color-neutral-0;
-    background: $mg-color-interactive;
+    color: rgb(var(--mg-color-neutral-0));
+    background: rgb(var(--mg-color-interactive));
     text-decoration: none;
     white-space: nowrap;
     border: 0;
     cursor: pointer;
-    transition: background-color 0.2s ease;
+    transition: background-color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
 
     @media (prefers-reduced-motion: reduce) {
       transition: none;
     }
 
     &:hover {
-      background: $mg-color-interactive-active;
+      background: rgb(var(--mg-color-interactive-active));
       text-decoration: none;
-      color: $mg-color-neutral-0;
+      color: rgb(var(--mg-color-neutral-0));
     }
 
     &:focus-visible {
-      outline: 2px solid $mg-color-interactive;
-      outline-offset: 2px;
+      @include mg-focus-ring;
     }
   }
 
@@ -150,13 +150,13 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    min-width: $mg-spacing-250; // WCAG 2.5.8 minimum touch target (24px)
-    padding: 0 $mg-spacing-150;
+    min-width: var(--mg-spacing-250); // WCAG 2.5.8 minimum touch target (24px)
+    padding: 0 var(--mg-spacing-150);
     border: 0;
-    background: $mg-color-neutral-0;
+    background: rgb(var(--mg-color-neutral-0));
     cursor: pointer;
-    color: $mg-color-neutral-600;
-    transition: color 0.2s ease;
+    color: rgb(var(--mg-color-neutral-600));
+    transition: color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
 
     // display:flex above would otherwise override the UA [hidden]{display:none} rule
     // since author styles always beat the user-agent stylesheet.
@@ -169,12 +169,11 @@
     }
 
     &:hover {
-      color: $mg-color-interactive-active;
+      color: rgb(var(--mg-color-interactive-active));
     }
 
     &:focus-visible {
-      outline: 2px solid $mg-color-interactive;
-      outline-offset: -2px;
+      @include mg-focus-ring;
     }
 
     svg {

package/scss/Components/PageHeader/page-header.scss

@@ -12,7 +12,7 @@
       url(//www.undrr.org/themes/custom/undrr_common/images/toolbar-background.png)
       no-repeat center center;
     box-shadow: 0 2px 4px 0 rgb(0 0 0 / 0.3);
-    z-index: $mg-z-index-header;
+    z-index: var(--mg-z-index-header);
 
     @media (width >= $mg-breakpoint-tablet) {
       .mg-page-header__container {
@@ -110,19 +110,19 @@
       display: inline-block;
 
       &:nth-child(1) {
-        background: $sendai-red-900;
+        background: var(--sendai-red-900);
       }
 
       &:nth-child(2) {
-        background: $sendai-purple-900;
+        background: var(--sendai-purple-900);
       }
 
       &:nth-child(3) {
-        background: $sendai-orange-900;
+        background: var(--sendai-orange-900);
       }
 
       &:nth-child(4) {
-        background: $sendai-turquoise-900;
+        background: var(--sendai-turquoise-900);
       }
     }
   }
@@ -132,8 +132,8 @@
   display: inline-block;
   font-size: $mg-font-tag;
   font-weight: bold;
-  margin-right: $mg-spacing-25;
-  padding: $mg-spacing-25 0;
+  margin-right: var(--mg-spacing-25);
+  padding: var(--mg-spacing-25) 0;
 
   @media (max-width: $mg-breakpoint-tablet) {
     display: none;