@undrr/undrr-mangrove 1.3.2 → 1.4.0

package/scss/Atom/Images/AuthorImage/author-image.scss

@@ -1,6 +1,6 @@
 /* author image */
 
-.author__img {
+.mg-author-image {
   border-radius: $author-image-radius;
   height: 80px;
   min-width: 80px;
@@ -32,7 +32,7 @@
     }
 
     @each $name, $color in $colors {
-      &.#{$name}::before {
+      &.mg-author-image--#{$name}::before {
         @include background-image(45deg, $mg-color-yellow, transparent 53%);
       }
     }
@@ -42,14 +42,14 @@
     @extend %img-cover;
   }
 
-  &.large {
+  &.mg-author-image--large {
     height: 180px;
     width: 180px;
   }
 }
 
 [dir="rtl"] {
-  .author__img {
+  .mg-author-image {
     &::before {
       @include transform(scaleX(-1));
     }

package/scss/Atom/Images/ImageCaptionCredit/image-caption-credit.scss

@@ -1,43 +1,41 @@
 // @import '../../../assets/scss/base';
 
 /* image with caption start */
-.image {
-  &-figcaption {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-
-    .image__caption {
-      margin: $mg-spacing-50 $mg-spacing-100 0;
-
-      @include devicebreak(medium) {
-        margin: $mg-spacing-150 0 0;
-        width: 58.33333%;
-      }
+.mg-image-figcaption {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+
+  .mg-image-caption {
+    margin: $mg-spacing-50 $mg-spacing-100 0;
+
+    @include devicebreak(medium) {
+      margin: $mg-spacing-150 0 0;
+      width: 58.33333%;
     }
   }
 }
 
-.image-figcaption.medium {
+.mg-image-figcaption.mg-image-figcaption--medium {
   @include devicebreak(medium) {
     margin: 0 auto;
     width: 58.3333%;
 
-    .image__caption {
+    .mg-image-caption {
       width: 100%;
     }
   }
 }
 
-.image-figcaption.portrait {
+.mg-image-figcaption.mg-image-figcaption--portrait {
   align-items: flex-end;
 
   @include devicebreak(medium) {
-    .image-figcaption__cart {
+    .mg-image-figcaption__cart {
       width: 33.33333%;
     }
 
-    .image__caption {
+    .mg-image-caption {
       display: block;
       margin: 0 0 0 $mg-spacing-100;
       padding-bottom: 0;
@@ -49,7 +47,7 @@
         margin-bottom: $mg-spacing-50;
         padding: 0;
 
-        + .credits {
+        + .mg-credits {
           border-top: 1px solid $mg-color-neutral-500;
           margin-left: 0;
           padding: $mg-spacing-50 0 0 0;
@@ -58,19 +56,19 @@
     }
   }
 
-  .credits {
+  .mg-credits {
     border-left: 0;
     border-right: 0;
     margin-bottom: $mg-spacing-50;
   }
 
-  .author__caption {
+  .mg-author-caption {
     font-size: $mg-font-size-200;
     line-height: 1.5;
   }
 }
 
-.image-figcaption__cart {
+.mg-image-figcaption__cart {
   img {
     @extend %img-cover;
 
@@ -80,14 +78,12 @@
 
 @include devicebreak(medium) {
   [dir="rtl"] {
-    .image-figcaption.portrait {
-      .image {
-        &__caption {
-          margin: 0 $mg-spacing-100 0 0;
-        }
+    .mg-image-figcaption.mg-image-figcaption--portrait {
+      .mg-image-caption {
+        margin: 0 $mg-spacing-100 0 0;
       }
 
-      .credits {
+      .mg-credits {
         border-right: 0;
         margin-right: 0;
         padding: $mg-spacing-50 0;

package/scss/Atom/Images/ImageCredit/image-credit.scss

@@ -1,4 +1,4 @@
-.credits {
+.mg-credits {
   font-size: $mg-font-size-200;
   line-height: 1.4;
 

package/scss/Atom/Layout/Container/container.scss

@@ -5,8 +5,8 @@
 // $mg-breakpoint-desktop: 1440px;
 
 .mg-container {
-  padding-right: 1rem;
-  padding-left: 1rem;
+  padding-right: mg-rem(10);
+  padding-left: mg-rem(10);
   margin: 0 auto;
   max-width: 100%;
 

package/scss/Atom/Layout/Grid/grid.scss

@@ -5,7 +5,7 @@ g-grid {
 
 .mg-grid > * {
   flex: 1;
-  margin: $mg-spacing-0 $mg-spacing-0 1rem 1.2292%;
+  margin: $mg-spacing-0 $mg-spacing-0 $mg-spacing-100 1.2292%;
 }
 
 .mg-grid > *:first-child {

package/scss/Atom/ReachElement/Details/details.scss

@@ -1,6 +1,6 @@
 /* details tag start */
 details {
-  padding: 1rem;
+  padding: mg-rem(10);
   transition: all 0.2s ease-in-out;
 
   &:hover {
@@ -12,7 +12,7 @@ details {
 
     list-style-type: none;
     outline: 0;
-    padding: 1rem 1rem 1rem 2.5rem;
+    padding: mg-rem(10) mg-rem(10) mg-rem(10) mg-rem(25);
     cursor: pointer;
     position: relative;
     transition: background-color 0.2s ease-in-out;
@@ -24,7 +24,7 @@ details {
     &::before {
       content: "";
       position: absolute;
-      left: 1rem;
+      left: mg-rem(10);
       top: 50%;
       transform: translateY(-50%);
       width: 0;
@@ -39,7 +39,7 @@ details {
   p {
     @extend %paragraph-font-200;
 
-    padding: 1rem;
+    padding: mg-rem(10);
     margin: 0;
     line-height: 1.6;
   }
@@ -58,12 +58,12 @@ details {
 [dir="rtl"] {
   details {
     summary {
-      padding: 1rem 2.5rem 1rem 1rem;
+      padding: mg-rem(10) mg-rem(25) mg-rem(10) mg-rem(10);
     }
 
     summary::before {
       left: auto;
-      right: 1rem;
+      right: mg-rem(10);
       transform: translateY(-50%) rotate(180deg);
     }
 

package/scss/Atom/ReachElement/Figcaption/figcaption.scss

@@ -4,7 +4,7 @@ figure {
 
   img {
     max-width: 100%;
-    padding-bottom: 0.875rem;
+    padding-bottom: mg-rem(8.75);
   }
 
   figcaption {

package/scss/Atom/Table/table.scss

@@ -127,12 +127,4 @@
   }
 }
 
-// burmese lang
-// :lang(my) {
-//   th,
-//   td {
-//     line-height: 1.7;
-//   }
-// }
-
 /* table tag end */

package/scss/Components/Boilerplate/boilerplate.scss

@@ -9,8 +9,8 @@
   border-radius: $mg-radius-button;
 
   &__title {
-    font-size: 1.5rem;
-    margin-bottom: 1rem;
+    font-size: mg-rem(15);
+    margin-bottom: mg-rem(10);
 
     a {
       color: $mg-color-interactive;

package/scss/Components/Breadcrumbs/breadcrumbs.scss

@@ -1,7 +1,7 @@
 .mg-breadcrumb {
   font-family: $mg-font-family-condensed;
   font-weight: 600;
-  margin: 1rem 0 0.5rem;
+  margin: mg-rem(10) 0 mg-rem(5);
   align-items: baseline;
   display: flex;
   flex-wrap: wrap;
@@ -22,7 +22,7 @@
       font-weight: 600;
       letter-spacing: 0.03em;
       margin-right: 0;
-      max-width: calc(100vw - 2rem);
+      max-width: calc(100vw - mg-rem(20));
     }
 
     a {
@@ -105,13 +105,6 @@
   }
 }
 
-// burmese lang
-// :lang(my) {
-//   .mg-breadcrumb li:last-of-type {
-//     font-size: $mg-font-size-100;
-//   }
-// }
-
 // Arabic
 :lang(ar) {
   .mg-breadcrumb {

package/scss/Components/Buttons/Chips/chips.scss

@@ -1,17 +1,17 @@
-.chip {
+.mg-chip {
   align-items: center;
   background: $mg-color-neutral-50;
   border-radius: 20px;
   box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
   display: inline-flex;
-  min-height: 1.875rem;
+  min-height: $mg-spacing-250;
   padding: $mg-spacing-25 $mg-spacing-50;
 
   &:hover {
     background-color: $mg-color-neutral-300;
   }
 
-  &.chip__cross {
+  &.mg-chip__cross {
     &::before {
       // background: url(#{$img-path-Iconfourback}/times-red.svg) no-repeat left;
       content: "";
@@ -19,7 +19,7 @@
       height: 22px;
       margin-left: -$mg-spacing-25;
       margin-right: $mg-spacing-25;
-      padding-right: 1.375rem;
+      padding-right: mg-rem(14);
       position: relative;
       top: 0;
       width: auto;
@@ -28,22 +28,8 @@
 }
 
 [dir="rtl"] {
-  .chip__cross::before {
+  .mg-chip__cross::before {
     margin-left: $mg-spacing-25;
     margin-right: -$mg-spacing-25;
   }
 }
-
-:lang(my) {
-  .chip {
-    align-items: flex-end;
-
-    &__cross {
-      align-items: baseline;
-
-      &::before {
-        top: 5px;
-      }
-    }
-  }
-}

package/scss/Components/Buttons/CtaButton/buttons.scss

@@ -1,124 +1,3 @@
-// .mg-buttons {
-//   margin-bottom: 1em;
-//   //Media queries
-
-//   @media (max-width: $mg-breakpoint-mobile) {
-//     display: flex;
-//     flex-direction: column;
-//   }
-
-//   @media (max-width: $mg-breakpoint-tablet) {
-//     display: flex;
-//     flex-direction: column;
-//   }
-// }
-
-.mg-button {
-  align-items: center;
-  background: transparent;
-  display: flex;
-  font-size: $mg-font-size-button;
-  font-weight: 600;
-  line-height: 1;
-  border-radius: $mg-radius-button;
-  color: $mg-color-button;
-  cursor: pointer;
-  justify-content: center;
-  padding: $mg-padding-button;
-  border: $mg-border-width-button solid $mg-border-color-button;
-
-  &:focus-visible {
-    box-shadow: 0 0 4px $mg-color-button-background--hover;
-    outline: 0;
-  }
-
-  @include devicebreak(medium) {
-    display: inline-flex;
-  }
-}
-
-.mg-button + .mg-button {
-  margin-left: 1rem;
-}
-
-button {
-  &:focus-visible {
-    box-shadow: 0 0 4px $mg-color-button-background;
-    outline: 0;
-  }
-}
-
-.mg-button-primary {
-  background-color: $mg-color-button-background;
-
-  &:hover {
-    color: $mg-color-button;
-    background-color: $mg-color-button-background--hover;
-  }
-
-  // &.button-arrow {
-  //   &::after {
-  //     @include transition(0.2s ease);
-
-  //     background: url(#{$img-path-Iconfourback}/chevron-right-black.svg)
-  //       no-repeat left center;
-  //     content: '';
-  //     height: 20px;
-  //     margin-left: $mg-spacing-25;
-  //     width: 13px;
-  //   }
-
-  //   &:hover::after {
-  //     @include translate(70%, 0);
-  //   }
-
-  //   &.disabled {
-  //     &::after {
-  //       background: url(#{$img-path-Iconfourback}/chevron-right-white.svg)
-  //         no-repeat left center;
-  //       content: '';
-  //     }
-  //   }
-  // }
-}
-
-.mg-button-secondary {
-  background-color: $mg-color-blue-600;
-
-  &:hover {
-    color: $mg-color-button;
-    background-color: $mg-color-blue-400;
-  }
-}
-
-.mg-button.disabled {
-  background-color: $mg-color-neutral-400;
-  color: $mg-color-neutral-300;
-  pointer-events: none;
-}
-
-// [dir='rtl'] {
-//   .button {
-//     &.button-primary {
-//       &.button-arrow {
-//         &::after {
-//           @include transform(rotate(180deg));
-
-//           margin-left: 0;
-//           margin-right: $mg-spacing-25;
-//         }
-
-//         &:hover::after {
-//           @include transform(translate(-50%, 0) rotate(180deg));
-//         }
-//       }
-//     }
-//   }
-// }
-
-// Arabic font override
-:lang(ar) {
-  .mg-button {
-    font-family: $mg-font-family-arabic-headings;
-  }
-}
+// buttons.scss — DEPRECATED, use cta-button.scss
+@import "./cta-button";
+@warn "buttons.scss is deprecated. Import cta-button.scss instead.";

package/scss/Components/Buttons/CtaButton/cta-button.scss

@@ -0,0 +1,124 @@
+// .mg-buttons {
+//   margin-bottom: 1em;
+//   //Media queries
+
+//   @media (max-width: $mg-breakpoint-mobile) {
+//     display: flex;
+//     flex-direction: column;
+//   }
+
+//   @media (max-width: $mg-breakpoint-tablet) {
+//     display: flex;
+//     flex-direction: column;
+//   }
+// }
+
+.mg-button {
+  align-items: center;
+  background: transparent;
+  display: flex;
+  font-size: $mg-font-size-button;
+  font-weight: 600;
+  line-height: 1;
+  border-radius: $mg-radius-button;
+  color: $mg-color-button;
+  cursor: pointer;
+  justify-content: center;
+  padding: $mg-padding-button;
+  border: $mg-border-width-button solid $mg-border-color-button;
+
+  &:focus-visible {
+    box-shadow: 0 0 4px $mg-color-button-background--hover;
+    outline: 0;
+  }
+
+  @include devicebreak(medium) {
+    display: inline-flex;
+  }
+}
+
+.mg-button + .mg-button {
+  margin-left: mg-rem(10);
+}
+
+button {
+  &:focus-visible {
+    box-shadow: 0 0 4px $mg-color-button-background;
+    outline: 0;
+  }
+}
+
+.mg-button-primary {
+  background-color: $mg-color-button-background;
+
+  &:hover {
+    color: $mg-color-button;
+    background-color: $mg-color-button-background--hover;
+  }
+
+  // &.button-arrow {
+  //   &::after {
+  //     @include transition(0.2s ease);
+
+  //     background: url(#{$img-path-Iconfourback}/chevron-right-black.svg)
+  //       no-repeat left center;
+  //     content: '';
+  //     height: 20px;
+  //     margin-left: $mg-spacing-25;
+  //     width: 13px;
+  //   }
+
+  //   &:hover::after {
+  //     @include translate(70%, 0);
+  //   }
+
+  //   &.disabled {
+  //     &::after {
+  //       background: url(#{$img-path-Iconfourback}/chevron-right-white.svg)
+  //         no-repeat left center;
+  //       content: '';
+  //     }
+  //   }
+  // }
+}
+
+.mg-button-secondary {
+  background-color: $mg-color-blue-600;
+
+  &:hover {
+    color: $mg-color-button;
+    background-color: $mg-color-blue-400;
+  }
+}
+
+.mg-button.disabled {
+  background-color: $mg-color-neutral-400;
+  color: $mg-color-neutral-300;
+  pointer-events: none;
+}
+
+// [dir='rtl'] {
+//   .button {
+//     &.button-primary {
+//       &.button-arrow {
+//         &::after {
+//           @include transform(rotate(180deg));
+
+//           margin-left: 0;
+//           margin-right: $mg-spacing-25;
+//         }
+
+//         &:hover::after {
+//           @include transform(translate(-50%, 0) rotate(180deg));
+//         }
+//       }
+//     }
+//   }
+// }
+
+// Arabic font override
+:lang(ar) {
+  .mg-button {
+    font-family: $mg-font-family-arabic-headings;
+  }
+}

package/scss/Components/Buttons/ShareButtons/share-buttons.scss

@@ -24,8 +24,8 @@
 
 .mg-share__button {
   font-size: $mg-font-size-400;
-  width: 4rem;
-  height: 4rem;
+  width: mg-rem(40);
+  height: mg-rem(40);
   padding: $mg-spacing-100;
   border-radius: $mg-radius-button;
   background-color: $mg-color-button-background;

package/scss/Components/Cards/Card/card.scss

@@ -5,6 +5,9 @@
   display: inline-block;
   position: relative;
   margin-bottom: $mg-spacing-100;
+  background: $mg-card-background;
+  padding: $mg-card-padding;
+  border-radius: $mg-card-border-radius;
 
   // Vertical CARD
   &__vc {
@@ -134,12 +137,12 @@
     z-index: 100;
   }
 
-  // Inline chevron indicator (CSS border triangle — no Unicode dependency)
+  // Inline chevron indicator (CSS border triangle)
   &__title a::after {
     border-color: currentColor;
     border-style: solid;
     border-width: 0.15em 0.15em 0 0;
-    content: "";
+    content: "\2060"; // Word joiner: prevents caret from orphaning on its own line
     display: inline-block;
     height: 0.35em;
     margin-inline-start: 0.25em;
@@ -227,6 +230,10 @@ $card-variant-colours: (
   z-index: 101;
 }
 
+.mg-card__label {
+  font-weight: 700;
+}
+
 .mg-card__summary a:hover,
 .mg-card__text-link:hover {
   text-decoration: underline;
@@ -272,11 +279,20 @@ $card-variant-colours: (
     max-width: 500px;
   }
 
+  // Classification label above the icon/image inside the visual area
+  .mg-card__visual-label {
+    font-size: $mg-font-tag;
+    font-weight: 700;
+    color: $mg-color-tag;
+    width: 100%;
+  }
+
   // Reuse shared visual container with icon-specific sizing
   .mg-card__visual {
     flex-shrink: 0;
     width: 100%;
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     overflow: visible;
@@ -375,6 +391,23 @@ $card-variant-colours: (
     .mg-icon {
       margin: 0 auto;
     }
+
+    // Colored background behind icon (circle by default, rounded rect in Delta)
+    &--colored {
+      background-color: var(--mg-icon-bg);
+      border-radius: $mg-card-icon-badge-radius;
+      aspect-ratio: 1;
+      width: 72px;
+      min-width: 72px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      .mg-icon {
+        font-size: 32px;
+        color: var(--mg-icon-fg, #{$mg-color-neutral-700});
+      }
+    }
   }
 
   // Visual link for logo cards (srOnlyTitle) - stretched link pattern
@@ -464,6 +497,12 @@ $card-variant-colours: (
     }
   }
 
+  // Bordered variant (colored border via CSS custom property)
+  &--bordered {
+    border: 2px solid var(--mg-card-border);
+    padding: max($mg-card-padding + 0rem, $mg-spacing-100);
+  }
+
   // Centered variant
   &--centered {
     align-items: center;