@undrr/undrr-mangrove 1.3.2 → 1.4.0

package/scss/assets/scss/_mixins.scss

@@ -19,15 +19,6 @@
   animation: $animation;
 }
 
-// keyframe
-@mixin keyframes($keyframes...) {
-  -webkit-keyframes: $keyframes;
-  -moz-keyframes: $keyframes;
-  -ms-keyframes: $keyframes;
-  -o-keyframes: $keyframes;
-  keyframes: $keyframes;
-}
-
 // transition
 @mixin transition($transitions...) {
   -webkit-transition: $transitions;
@@ -102,15 +93,6 @@
   }
 }
 
-%paragraph-font-400 {
-  font-size: $mg-font-size-400;
-  line-height: 1.1;
-
-  @include devicebreak(medium) {
-    font-size: $mg-font-size-500;
-  }
-}
-
 %border-bottom {
   border-bottom: 1px solid $mg-color-neutral-400;
 }
@@ -128,45 +110,6 @@
   border: none;
 }
 
-%footer-block {
-  align-items: center;
-  border-bottom: 1px solid $mg-color-white;
-  justify-content: space-between;
-  margin-bottom: $mg-spacing-150;
-}
-
-
-// %checbox-radio-before — REMOVED (February 2026)
-// Migrated to .mg-form-check__input in _form-base.scss.
-
-%ctaimg {
-  content: "";
-  height: 1.188rem;
-  margin-left: $mg-spacing-25;
-  margin-top: 2px;
-  width: 0.813rem;
-
-  @include devicebreak(medium) {
-    margin-top: 0;
-  }
-}
-
-%arrow {
-  @include transform(translateY(-50%));
-  @include transition(all 200ms ease-in-out);
-
-  // background:
-  //   url(#{$img-path-Iconfourback}/chevron-down.svg) no-repeat center
-  //   center;
-  content: "";
-  float: right;
-  height: 13px;
-  position: absolute;
-  right: 14px;
-  top: 50%;
-  width: 20px;
-}
-
 %absolute__content {
   content: "";
   height: 100%;
@@ -176,270 +119,22 @@
   width: 100%;
 }
 
-
-%language_switcher {
-  border: none;
-  font-size: $mg-font-size-200;
-  font-weight: 600;
-  text-transform: uppercase;
-}
-
 %img_none {
   background-image: none;
 }
 
-%absolute__overflow {
-  height: 100%;
-  overflow: hidden;
-  position: absolute;
-  width: 100%;
-}
-
-// %select_default — REMOVED (February 2026)
-// Migrated to .mg-form-select in _form-base.scss.
-
-%select_option {
-  border: 2px solid $mg-color-black;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
-  box-sizing: border-box;
-  display: none;
-  min-height: 100px;
-  padding: 0 $mg-spacing-50;
-  width: 100%;
-
-  &:focus {
-    box-shadow: 0 0 4px $mg-color-blue-800;
-    outline: 0;
-  }
-}
-
-%select_rtl {
-  padding-left: 3.125rem;
-  padding-right: $mg-spacing-50;
-  text-align: right;
-}
-
-%select_rtl_after {
-  left: 16px;
-  margin: 0;
-  right: auto;
-}
-
-%no-animation {
-  -webkit-animation: none;
-  -moz-animation: none;
-  -ms-animation: none;
-  -o-animation: none;
-  animation: none;
-}
-
-%left-to-right {
-  @include transform(translateX(-100px));
-  @include transition(
-    transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1),
-    opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1)
-  );
-
-  opacity: 0;
-  visibility: hidden;
-}
-
-%inviewport_left_right {
-  @include transform(translateX(0));
-
-  opacity: 1;
-  visibility: visible;
-}
-
-[dir="rtl"] {
-  %left-to-right {
-    @include transform(translateX(100px));
-  }
-}
-
-%scale-up {
-  @include transform(scale(0.9));
-  @include transition(transform 1.2s cubic-bezier(0.34, 0.41, 0.03, 1));
-}
-
-%opacity-only {
-  @include transition(opacity 1.2s cubic-bezier(0.34, 0.41, 0.03, 1));
-
-  opacity: 0;
-}
-
-%inviewport_opacity_only {
-  @include transform(translateX(0));
-
-  opacity: 1;
-}
-
-%header {
-  background-color: $mg-color-neutral-100;
-  box-shadow: 0 3px 6px rgb(0 0 0 / 0.1);
-  height: 7.1875rem;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100%;
-  z-index: 9;
-}
-
 %background-white {
   background-color: white;
 }
 
-%sub-external {
-  align-items: center;
-  justify-content: space-between;
-}
-
-%external {
-  align-items: center;
-  content: "";
-  cursor: pointer;
-  height: 1.125rem;
-  width: 1.25rem;
-}
-
-%footerlink {
-  @extend %img_none;
-
-  color: $mg-color-white;
-  font-size: $mg-font-size-300;
-  line-height: 1.4;
-
-  &:hover {
-    color: $mg-color-blue-100;
-  }
-}
-
-%footerlinkinvert {
-  color: $mg-color-black;
-
-  &:hover {
-    color: $mg-color-neutral-600;
-  }
-}
-
-%selectoption {
-  border-top: 1px solid $mg-color-neutral-400;
-  cursor: pointer;
-  margin-bottom: 0;
-  padding: 0;
-}
-
-// burmese lang
-:lang(my) {
-  %paragraph-font-200 {
-    font-size: $mg-font-size-100;
-    line-height: 1.7;
-
-    @include devicebreak(medium) {
-      font-size: $mg-font-size-200;
-    }
-  }
-
-  %paragraph-font-300 {
-    font-size: $mg-font-size-200;
-
-    @include devicebreak(medium) {
-      font-size: $mg-font-size-300;
-    }
-  }
-
-  %paragraph-font-400 {
-    font-size: $mg-font-size-400;
-    line-height: 1.1;
-
-    @include devicebreak(medium) {
-      font-size: $mg-font-size-500;
-    }
-  }
-  %button {
-    font-size: $mg-font-size-200;
-  }
-}
-
-%logo {
-  @include transition(all 0.4s cubic-bezier(0.64, 0.05, 0.35, 1.05));
-
-  width: 40px;
-
-  @include devicebreak(xlarge) {
-    height: ($header-height-xlarge + 7px);
-    width: 60px;
-
-    &.scrolled {
-      height: $header-height-xlarge;
-    }
-  }
-
-  @include devicebreak(mediumonlytab) {
-    height: ($header-height-medium + 7px);
-
-    &.scrolled {
-      height: $header-height-medium;
-    }
-  }
-}
-
-@mixin background($background...) {
-  background: linear-gradient($background);
-}
-
-%pseudo-icon {
-  box-sizing: border-box;
-  content: "";
-  display: block;
-  position: absolute;
-}
-
-%chevron-right-expanded {
-  i {
-    @include transition(width 0.3s);
-
-    box-sizing: border-box;
-    display: block;
-    height: $mg-spacing-50;
-    left: 1.25rem;
-    position: relative;
-    width: 0;
-
-    &::before {
-      @extend %pseudo-icon;
-
-      background-color: $mg-color-red-900;
-      display: none;
-      height: 2px;
-      right: 0;
-      top: 7px;
-      width: 100%;
-    }
-
-    &::after {
-      @extend %pseudo-icon;
-      @include transform(rotate(45deg));
-
-      border-right: 2px solid $mg-color-red-900;
-      border-top: 2px solid $mg-color-red-900;
-      height: $mg-spacing-25;
-      right: 0;
-      top: 2px;
-      width: $mg-spacing-25;
-    }
-  }
-
-  &:hover {
-    i {
-      width: $mg-spacing-400;
-
-      &::before {
-        display: unset;
-      }
-    }
-  }
-}
+// --- Removed placeholders ---
+// %checkbox-radio-before, %select_default — REMOVED (February 2026).
+//   Migrated to .mg-form-check__input and .mg-form-select in _form-base.scss.
+// %ctaimg, %chevron-right-expanded, %pseudo-icon — REMOVED (March 2026, #854). CtaLink removed.
+// %paragraph-font-400, %footer-block, %arrow, %language_switcher, %absolute__overflow,
+// %select_option, %select_rtl, %select_rtl_after, %no-animation, %header,
+// %sub-external, %external, %footerlink, %footerlinkinvert, %selectoption, %logo
+//   — REMOVED (March 2026, #856). Zero consumers.
+// @mixin background() — REMOVED (March 2026, #856). Zero callers; duplicated @mixin background-image().
 
 /* placeholder end */

package/scss/assets/scss/_utility.scss

@@ -16,66 +16,11 @@
   }
 }
 
-/* animation start */
-*[data-viewport="true"] {
-  @extend %left-to-right;
-
-  &.inviewport {
-    @extend %inviewport_left_right;
-  }
-}
-
-.delay-1 {
-  transition-delay: 0.1s;
-}
-
-.delay-2 {
-  transition-delay: 0.2s;
-}
-
-.delay-3 {
-  transition-delay: 0.3s;
-}
-
-.delay-4 {
-  transition-delay: 0.4s;
-}
-
-.delay-5 {
-  transition-delay: 0.5s;
-}
-
-.scale-up {
-  @extend %scale-up;
-
-  &.inviewport {
-    @include transform(scale(1));
-  }
-}
-
-.opacity-only {
-  @extend %opacity-only;
-
-  &.inviewport {
-    @extend %inviewport_opacity_only;
-  }
-}
-
 .mg-u-expand-to-size {
-  max-width: calc(100% - 1rem);
+  max-width: calc(100% - #{mg-rem(10)});
 
   @include devicebreak(medium) {
-    max-width: calc(100% - 3rem);
-  }
-}
-
-[dir="rtl"] {
-  *[data-viewport="true"] {
-    @include transform(translateX(100px));
-
-    &.inviewport {
-      @extend %inviewport_left_right;
-    }
+    max-width: calc(100% - #{mg-rem(30)});
   }
 }
 
@@ -105,10 +50,6 @@ $colors-solid: (
       background: #{$color};
     }
 
-    // .blockquote
-    .blockquote {
-      background-color: #{$color};
-    }
   }
 }
 
@@ -288,6 +229,23 @@ $colors-solid: (
 
 /* Color utilities end */
 
+/* Flex and alignment utilities start */
+
+// Flex container utilities
+.mg-u-flex { display: flex; }
+.mg-u-flex-wrap { flex-wrap: wrap; }
+.mg-u-align-items-center { align-items: center; }
+.mg-u-gap-100 { gap: $mg-spacing-100; }
+
+// RTL-safe push utilities using CSS logical properties.
+// Push an element toward the inline-end, inline-start, or center
+// by collapsing the opposite margin with auto.
+.mg-u-push-end { margin-inline-start: auto; }
+.mg-u-push-start { margin-inline-end: auto; }
+.mg-u-push-center { margin-inline: auto; }
+
+/* Flex and alignment utilities end */
+
 /* Font size utilities start */
 
 .mg-u-font-size-150 {
@@ -355,16 +313,6 @@ $colors-solid: (
   }
 }
 
-:lang(my) {
-  .mg-u-font-size-400,
-  .mg-u-font-size-500,
-  .mg-u-font-size-600,
-  .mg-u-font-size-800,
-  .mg-u-font-size-900 {
-    line-height: 1.7;
-  }
-}
-
 :lang(ar) {
   .mg-u-font-size-600,
   .mg-u-font-size-800,

package/scss/assets/scss/_variables-delta.scss

@@ -0,0 +1,105 @@
+/**
+ * @tokens DELTA Resilience Colors
+ * @presenter Color
+ *
+ * DELTA Resilience theme overrides for Mangrove.
+ * Source: deltaresilience.org mockups + GitHub issue #776
+ *
+ * Note: Delta's primary is a dark navy (rgb 19 46 72). Mangrove
+ * already defaults to Roboto. Differentiation is primarily in
+ * border-radius, button styling, and color palette.
+ *
+ * Open design questions:
+ * - IconCard accent palette: Delta mockups show 6 pastel icon background
+ *   colors. Their design-system role (semantic, decorative, categorical) is
+ *   unknown. Currently passed as raw hex via `iconColor` prop.
+ */
+
+// Delta-specific colors — brand palette
+$delta-color-primary: rgb(19 46 72); // #132e48 — Delta's dark navy
+$delta-color-primary-800: rgb(12 30 48); // Hover shade — ~20% darker
+$delta-color-red: #b52a32; // Red accent from Delta CSS
+$delta-color-dark: #181823; // Near-black for CTA banners and dark sections
+
+// Delta accent palette — 6 pastel icon colors from "Key Features" cards.
+// TODO: These are sampled from mockups. We need to understand these from a
+// design-system perspective — are they semantic (mapped to categories/sections),
+// decorative, or part of a formalized token set? Until clarified, they are
+// passed as raw hex values via IconCard's `iconColor` prop.
+$delta-color-accent-coral: #f4b8a8;
+$delta-color-accent-teal: #b5d8d8;
+$delta-color-accent-sky: #c0d8e8;
+$delta-color-accent-peach: #f4d0a8; // TODO: confirm exact hex
+$delta-color-accent-sage: #c8d8b5; // TODO: confirm exact hex
+$delta-color-accent-lavender: #d0c0e8; // TODO: confirm exact hex
+
+// Delta card background — avoids overriding the foundational neutral scale
+$delta-color-card-bg: rgb(250 250 250); // #fafafa — Delta's lightest gray
+
+// Interactive colors — links, focus rings (stays blue)
+$mg-color-interactive: $delta-color-primary;
+$mg-color-interactive-active: $delta-color-primary;
+
+// Tags
+$mg-color-tag: $mg-color-interactive;
+$mg-color-tag--hover: $mg-color-interactive-active;
+
+// $mg-color-tag-secondary, $mg-color-tag-accent — use defaults
+$mg-radius-tag: $mg-spacing-50;
+
+// Buttons — outline style, rounded corners, blue border/text on light backgrounds
+$mg-color-button: $delta-color-primary;
+$mg-color-button--hover: $delta-color-primary-800;
+$mg-color-button-background: transparent;
+$mg-color-button-background--hover: rgba($delta-color-primary, 0.06);
+$mg-color-text-button: $delta-color-primary;
+$mg-border-color-button: $delta-color-primary;
+$mg-radius-button: $mg-spacing-50;
+$mg-border-width-button: 2px;
+$mg-padding-button: $mg-spacing-100 $mg-spacing-200;
+$mg-font-size-button: $mg-font-size-250;
+
+// Cards — light tinted background with padding, rounded corners
+$mg-card-background: $delta-color-card-bg;
+$mg-card-padding: $mg-spacing-150;
+$mg-card-border-radius: $mg-spacing-50;
+$mg-card-icon-badge-radius: 15%;
+
+// Form elements
+$mg-color-form-check: $mg-color-interactive;
+$mg-color-form-check--hover: $mg-color-interactive-active;
+$mg-color-form-check--checked: $mg-color-interactive;
+$mg-color-form-focus: $mg-color-interactive;
+$mg-radius-form-input: $mg-spacing-50;
+
+// Mega menu — white panel on Delta (base default is $mg-color-button which is dark navy here)
+$mg-color-mega-content-bg: $mg-color-white;
+
+// Hero — wider overlay and extra padding for Delta's layout
+$mg-color-hero: $delta-color-primary;
+$mg-opacity-hero: 1;
+$mg-hero-overlay-max-width: $mg-width-600;
+$mg-hero-overlay-padding: $mg-spacing-400;
+$mg-color-hero-title: oklch(68.5% 0.169 237.323);
+$mg-color-hero--tertiary: $delta-color-dark; // Dark CTA banner sections
+$mg-spacing-hero-overlay: mg-rem(20) 0;
+
+// Tabs — TODO: underline vs boxed style needs confirmation from Delta design team
+$mg-color-tabbar-background: none;
+$mg-color-tab-background: $delta-color-primary;
+$mg-color-tab-background--inactive: $mg-color-white;
+$mg-color-tab-border: $mg-color-blue-200;
+$mg-color-tab-border--hover: $delta-color-primary-800;
+$mg-color-tab-border--active: $mg-color-blue-200;
+$mg-color-tab-background--hover: rgba($delta-color-primary, 0.7);
+$mg-radius-tab: $mg-spacing-50 $mg-spacing-50 0 0;
+$mg-padding-tab: $mg-spacing-150 $mg-spacing-200;
+$mg-color-text-tab: $mg-color-neutral-700;
+$mg-color-text-tab--hover: $mg-color-white;
+$mg-color-text-tab-active: $mg-color-white;
+$mg-padding-tab-section: $mg-spacing-300;
+$mg-radius-tab-section: $mg-spacing-50;
+$mg-box-shadow-tab-section: none;
+$mg-tabs-border-bottom: true;
+
+/* variables end */

package/scss/assets/scss/_variables-irp.scss

@@ -32,7 +32,7 @@ $mg-radius-form-input: $mg-spacing-50;
 
 // Hero
 $mg-color-hero: $mg-color-interactive;
-$mg-spacing-hero-overlay: 2rem 0;
+$mg-spacing-hero-overlay: mg-rem(20) 0;
 
 // Tabs
 $mg-color-tabbar-background: rgba($irp-color-green, 0.1);

package/scss/assets/scss/_variables-mcr.scss

@@ -42,7 +42,7 @@ $mg-radius-form-input: $mg-spacing-100;
 
 // Hero
 $mg-color-hero: $mg-color-interactive;
-$mg-spacing-hero-overlay: 2rem 0;
+$mg-spacing-hero-overlay: mg-rem(20) 0;
 
 // Tabs
 $mg-color-tabbar-background: none;

package/scss/assets/scss/_variables-preventionweb.scss

@@ -29,7 +29,7 @@ $mg-color-form-focus: $mg-color-interactive;
 
 // Hero
 $mg-color-hero: $mg-color-interactive;
-$mg-spacing-hero-overlay: 2rem 0;
+$mg-spacing-hero-overlay: mg-rem(20) 0;
 
 // Tabs
 $mg-color-tabbar-background: rgba($pw-color-primary, 0.1);