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

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

@@ -5,11 +5,11 @@ g-grid {
 
 .mg-grid > * {
   flex: 1;
-  margin: $mg-spacing-0 $mg-spacing-0 $mg-spacing-100 1.2292%;
+  margin: var(--mg-spacing-0) var(--mg-spacing-0) var(--mg-spacing-100) 1.2292%;
 }
 
 .mg-grid > *:first-child {
-  margin-left: $mg-spacing-0;
+  margin-left: var(--mg-spacing-0);
 }
 
 [class*="mg-grid__"] {
@@ -20,50 +20,50 @@ g-grid {
 // Unfortunately IE11 (which this flexbox grid is for) does not support calc inside of flex
 // So we've hard coded the percentage values. All other modern browsers get to use grid.
 .mg-grid__col-2 > * {
-  flex: $mg-spacing-0 $mg-spacing-0 49.38538%;
+  flex: var(--mg-spacing-0) var(--mg-spacing-0) 49.38538%;
   max-width: 49.38538%;
 
   &:nth-of-type(3n) {
-    margin-left: $mg-spacing-0;
+    margin-left: var(--mg-spacing-0);
   }
 }
 
 .mg-grid__col-3 > * {
-  flex: $mg-spacing-0 $mg-spacing-0 32.51384%;
+  flex: var(--mg-spacing-0) var(--mg-spacing-0) 32.51384%;
   max-width: 32.51384%;
 
   &:nth-of-type(4n) {
-    margin-left: $mg-spacing-0;
+    margin-left: var(--mg-spacing-0);
   }
 }
 
 .mg-grid__col-4 > * {
   // 0.9219246
-  flex: $mg-spacing-0 $mg-spacing-0 24.078%;
+  flex: var(--mg-spacing-0) var(--mg-spacing-0) 24.078%;
   max-width: 24.078%;
 
   &:nth-of-type(5n) {
-    margin-left: $mg-spacing-0;
+    margin-left: var(--mg-spacing-0);
   }
 }
 
 .mg-grid__col-5 > * {
   // 0.98338624
-  flex: $mg-spacing-0 $mg-spacing-0 19.01661%;
+  flex: var(--mg-spacing-0) var(--mg-spacing-0) 19.01661%;
   max-width: 19.01661%;
 
   &:nth-of-type(6n) {
-    margin-left: $mg-spacing-0;
+    margin-left: var(--mg-spacing-0);
   }
 }
 
 .mg-grid__col-6 > * {
   // 1.024360667
-  flex: $mg-spacing-0 $mg-spacing-0 15.6423%;
+  flex: var(--mg-spacing-0) var(--mg-spacing-0) 15.6423%;
   max-width: 15.6423%;
 
   &:nth-of-type(7n) {
-    margin-left: $mg-spacing-0;
+    margin-left: var(--mg-spacing-0);
   }
 }
 
@@ -81,8 +81,8 @@ g-grid {
   .mg-grid {
     display: grid;
     grid-column: main;
-    column-gap: $mg-spacing-200;
-    row-gap: $mg-spacing-200;
+    column-gap: var(--mg-spacing-200);
+    row-gap: var(--mg-spacing-200);
   }
 
   @media (min-width: $mg-breakpoint-tablet) {
@@ -99,7 +99,7 @@ g-grid {
   }
 
   .mg-grid > * {
-    margin: $mg-spacing-0;
+    margin: var(--mg-spacing-0);
     max-width: unset;
   }
 

package/scss/Atom/Navigation/MenuItems/menu-items.scss

@@ -9,13 +9,20 @@
     letter-spacing: 0.03em;
 
     &:hover {
-      color: $mg-color-neutral-600;
+      color: rgb(var(--mg-color-neutral-600));
       cursor: pointer;
+      text-decoration: underline;
+    }
+
+    &:focus-visible {
+      @include mg-focus-ring;
+
+      text-decoration: underline;
     }
 
     &.selected {
-      border-bottom: 2px solid $mg-color-red-900;
-      padding-bottom: $mg-spacing-25;
+      border-bottom: 2px solid rgb(var(--mg-color-red-900));
+      padding-bottom: var(--mg-spacing-25);
     }
   }
 }

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

@@ -6,16 +6,14 @@ details {
     cursor: pointer;
 
     &:focus-visible {
-      outline: 2px solid $mg-color-interactive;
-      outline-offset: 2px;
-      border-radius: mg-rem(2);
+      @include mg-focus-ring;
     }
   }
 }
 
 /* Enhanced: opt-in card treatment via .mg-details */
 details.mg-details {
-  border: 1px solid $mg-color-neutral-400; // #808080 — 3.95:1 on white (passes WCAG 1.4.11)
+  border: 1px solid rgb(var(--mg-color-neutral-400)); // #808080 — 3.95:1 on white (passes WCAG 1.4.11)
   border-radius: mg-rem(4);
   padding: mg-rem(10);
   transition: box-shadow 0.2s ease-in-out;
@@ -27,15 +25,20 @@ details.mg-details {
   > summary {
     @extend %paragraph-font-300;
 
-    color: $mg-color-interactive;
+    color: rgb(var(--mg-color-interactive));
     font-weight: 600;
     list-style-type: none;
-    padding: mg-rem(10) mg-rem(10) mg-rem(10) mg-rem(32);
+    min-height: mg-rem(48);
+    padding-block: mg-rem(10);
+    padding-inline: mg-rem(10) mg-rem(44);
     position: relative;
     transition: background-color 0.2s ease-in-out;
 
     &:hover {
-      background-color: rgba($mg-color-interactive, 0.08); // theme-adaptive tint
+      background-color: rgb(
+        var(--mg-color-blue-900) / 0.08
+      ); // interactive hover tint
+
       border-radius: mg-rem(2);
     }
 
@@ -44,17 +47,36 @@ details.mg-details {
     }
 
     &::before {
-      content: "";
+      align-items: center;
+      background: rgb(var(--mg-color-interactive) / 0.06);
+      border-radius: 50%;
+      content: "+";
+      display: flex;
+      font-family: $mg-font-family;
+      font-size: $mg-font-size-400;
+      font-weight: 400;
+      height: mg-rem(30);
+      inset-inline-end: mg-rem(10);
+      justify-content: center;
       position: absolute;
-      left: mg-rem(10);
       top: 50%;
-      transform: translateY(-50%); // ► collapsed
-      width: 0;
-      height: 0;
-      border-top: 6px solid transparent;
-      border-bottom: 6px solid transparent;
-      border-left: 8px solid $mg-color-interactive;
-      transition: transform 0.2s ease-in-out;
+      transform: translateY(-50%);
+      width: mg-rem(30);
+
+      @media (prefers-reduced-motion: no-preference) {
+        transition:
+          background-color var(--mg-motion-duration-fast)
+            var(--mg-motion-easing-standard),
+          scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
+      }
+    }
+
+    &:hover::before {
+      background: rgb(var(--mg-color-interactive) / 0.12);
+    }
+
+    &:active::before {
+      scale: 0.96;
     }
   }
 
@@ -67,35 +89,18 @@ details.mg-details {
   }
 
   &[open] {
-    border-color: $mg-color-interactive; // theme-adaptive; #004f91 = 8.27:1 on white
+    border-color: rgb(
+      var(--mg-color-interactive)
+    ); // theme-adaptive; #004f91 = 8.27:1 on white
 
     > summary {
       margin-bottom: 0;
       padding-bottom: mg-rem(10);
-      border-bottom: 1px solid $mg-color-neutral-400; // 3.95:1 on white
+      border-bottom: 1px solid rgb(var(--mg-color-neutral-400)); // 3.95:1 on white
 
       &::before {
-        transform: translateY(-50%) rotate(90deg); // ▼ open
-      }
-    }
-  }
-}
-
-[dir="rtl"] {
-  details.mg-details {
-    > summary {
-      padding: mg-rem(10) mg-rem(32) mg-rem(10) mg-rem(10);
-    }
-
-    > summary::before {
-      left: auto;
-      right: mg-rem(10);
-      transform: translateY(-50%) rotate(180deg); // ◄ collapsed (RTL)
-    }
-
-    &[open] {
-      > summary::before {
-        transform: translateY(-50%) rotate(90deg); // ▼ open (RTL)
+        content: "−";
+        transform: translateY(-50%);
       }
     }
   }

package/scss/Atom/Table/table.scss

@@ -23,7 +23,7 @@
       @extend %border-none;
 
       &:nth-child(even) {
-        background-color: $mg-color-neutral-25;
+        background-color: rgb(var(--mg-color-neutral-25));
       }
     }
   }
@@ -33,7 +33,7 @@
 
     th,
     td {
-      border: 1px solid $mg-color-neutral-400;
+      border: 1px solid rgb(var(--mg-color-neutral-400));
       border-collapse: collapse;
       box-sizing: border-box;
       min-width: 50px;
@@ -62,14 +62,14 @@
 
     &.mg-table--border {
       tr {
-        border: 1px solid $mg-color-neutral-400;
+        border: 1px solid rgb(var(--mg-color-neutral-400));
 
         th,
         td {
           @extend %border-none;
 
           @include devicebreak(medium) {
-            border: 1px solid $mg-color-neutral-400;
+            border: 1px solid rgb(var(--mg-color-neutral-400));
           }
         }
       }
@@ -81,20 +81,33 @@
 .mg-table td {
   font-size: $mg-font-size-300;
   line-height: 1.4;
-  padding: $mg-spacing-25;
+  padding: var(--mg-spacing-25);
+  text-align: start;
   vertical-align: top;
 
   @include devicebreak(medium) {
-    padding: $mg-spacing-25 $mg-spacing-200 $mg-spacing-25 $mg-spacing-25;
+    padding: var(--mg-spacing-25) var(--mg-spacing-200) var(--mg-spacing-25)
+      var(--mg-spacing-25);
   }
 }
 
 .mg-table thead tr th {
-  // background-color: $mg-color-neutral-300;
+  // background-color: rgb(var(--mg-color-neutral-300));
   font-weight: 600;
+}
+
+.mg-table .mg-table__cell--start {
+  text-align: start;
+}
+
+.mg-table .mg-table__cell--center {
   text-align: center;
 }
 
+.mg-table .mg-table__cell--end {
+  text-align: end;
+}
+
 .mg-table tbody tr {
   @extend %border-bottom;
 }
@@ -119,10 +132,9 @@
 [dir="rtl"] {
   .mg-table th,
   .mg-table td {
-    text-align: right;
-
     @include devicebreak(medium) {
-      padding: $mg-spacing-25 $mg-spacing-25 $mg-spacing-25 $mg-spacing-200;
+      padding: var(--mg-spacing-25) var(--mg-spacing-25) var(--mg-spacing-25)
+        var(--mg-spacing-200);
     }
   }
 }

package/scss/Atom/Tag/tag.scss

@@ -2,7 +2,7 @@
 // -
 // A compact tag used to categorise content (content type, country, theme, etc.).
 // Inherits its background from the --tag-color-background CSS custom property set
-// by each site theme, falling back to the $mg-color-tag token.
+// by each site theme, falling back to the rgb(var(--mg-color-tag)) token.
 // -
 // Usage:
 //   <span class="mg-tag">Organization</span>
@@ -14,72 +14,72 @@
 
 .mg-tag {
   display: inline-block;
-  padding: $mg-spacing-25 $mg-spacing-50;
+  padding: var(--mg-spacing-25) var(--mg-spacing-50);
   font-family: $mg-font-family-headings;
   font-size: $mg-font-size-250;
   font-weight: 500;
   line-height: 1.4;
   color: #fff;
-  background-color: $mg-color-tag;
-  background-color: var(--tag-color-background, #{$mg-color-tag});
-  border-radius: $mg-radius-tag;
+  background-color: rgb(var(--mg-color-tag));
+  background-color: var(--tag-color-background, #{rgb(var(--mg-color-tag))});
+  border-radius: var(--mg-radius-tag);
   text-decoration: none;
   transition: background-color 0.2s ease;
 
   &:hover {
     color: #fff;
-    background-color: $mg-color-tag--hover;
-    background-color: var(--tag-color-background-hover, #{$mg-color-tag--hover});
+    background-color: rgb(var(--mg-color-tag--hover));
+    background-color: var(--tag-color-background-hover, #{rgb(var(--mg-color-tag--hover))});
     text-decoration: none;
   }
 }
 
 // --secondary: de-emphasised/metadata tags (neutral gray)
 .mg-tag--secondary {
-  background-color: $mg-color-tag-secondary;
-  background-color: var(--tag-color-background-secondary, #{$mg-color-tag-secondary});
+  background-color: rgb(var(--mg-color-tag-secondary));
+  background-color: var(--tag-color-background-secondary, #{rgb(var(--mg-color-tag-secondary))});
 
   &:hover {
-    background-color: $mg-color-tag-secondary--hover;
-    background-color: var(--tag-color-background-secondary-hover, #{$mg-color-tag-secondary--hover});
+    background-color: rgb(var(--mg-color-tag-secondary--hover));
+    background-color: var(--tag-color-background-secondary-hover, #{rgb(var(--mg-color-tag-secondary--hover))});
   }
 }
 
 // --outline: subtle border-only tag
 .mg-tag--outline {
-  color: $mg-color-tag;
-  color: var(--tag-color-background, #{$mg-color-tag});
+  color: rgb(var(--mg-color-tag));
+  color: var(--tag-color-background, #{rgb(var(--mg-color-tag))});
   background-color: transparent;
-  border: 1px solid $mg-color-tag;
-  border-color: var(--tag-color-background, #{$mg-color-tag});
+  border: 1px solid rgb(var(--mg-color-tag));
+  border-color: var(--tag-color-background, #{rgb(var(--mg-color-tag))});
 
   &:hover {
-    color: $mg-color-tag;
-    color: var(--tag-color-background, #{$mg-color-tag});
-    background-color: $mg-color-blue-50;
-    background-color: var(--tag-color-background-outline-hover, #{$mg-color-blue-50});
+    color: rgb(var(--mg-color-tag));
+    color: var(--tag-color-background, #{rgb(var(--mg-color-tag))});
+    background-color: rgb(var(--mg-color-blue-50));
+    background-color: var(--tag-color-background-outline-hover, #{rgb(var(--mg-color-blue-50))});
   }
 }
 
 // --accent: featured/highlighted content (orange)
 .mg-tag--accent {
-  background-color: $mg-color-tag-accent;
-  background-color: var(--tag-color-background-accent, #{$mg-color-tag-accent});
+  background-color: rgb(var(--mg-color-tag-accent));
+  background-color: var(--tag-color-background-accent, #{rgb(var(--mg-color-tag-accent))});
 
   &:hover {
-    background-color: $mg-color-tag-accent--hover;
-    background-color: var(--tag-color-background-accent-hover, #{$mg-color-tag-accent--hover});
+    background-color: rgb(var(--mg-color-tag-accent--hover));
+    background-color: var(--tag-color-background-accent-hover, #{rgb(var(--mg-color-tag-accent--hover))});
   }
 }
 
 // Adjacent tag spacing
 .mg-tag + .mg-tag {
-  margin-left: $mg-spacing-25;
+  margin-left: var(--mg-spacing-25);
 }
 
 [dir="rtl"] .mg-tag + .mg-tag {
   margin-left: 0;
-  margin-right: $mg-spacing-25;
+  margin-right: var(--mg-spacing-25);
 }
 
 // Tag container — auto-styles child elements as tags.
@@ -88,28 +88,28 @@
 .mg-tag-container {
   display: flex;
   flex-wrap: wrap;
-  gap: $mg-spacing-25;
+  gap: var(--mg-spacing-25);
 
   > span,
   > div,
   > a,
   > li {
     display: inline-block;
-    padding: $mg-spacing-25 $mg-spacing-50;
+    padding: var(--mg-spacing-25) var(--mg-spacing-50);
     font-size: $mg-font-size-250;
     font-weight: 500;
     line-height: 1.4;
     color: #fff;
-    background-color: $mg-color-tag;
-    background-color: var(--tag-color-background, #{$mg-color-tag});
-    border-radius: $mg-radius-tag;
+    background-color: rgb(var(--mg-color-tag));
+    background-color: var(--tag-color-background, #{rgb(var(--mg-color-tag))});
+    border-radius: var(--mg-radius-tag);
     text-decoration: none;
     transition: background-color 0.2s ease;
 
     &:hover {
       color: #fff;
-      background-color: $mg-color-tag--hover;
-      background-color: var(--tag-color-background-hover, #{$mg-color-tag--hover});
+      background-color: rgb(var(--mg-color-tag--hover));
+      background-color: var(--tag-color-background-hover, #{rgb(var(--mg-color-tag--hover))});
       text-decoration: none;
     }
   }

package/scss/Components/Boilerplate/boilerplate.scss

@@ -4,16 +4,16 @@
 
 .mg-boilerplate {
   // Add your base styles here
-  padding: $mg-spacing-100;
-  border: 1px solid $mg-color-red-900;
-  border-radius: $mg-radius-button;
+  padding: var(--mg-spacing-100);
+  border: 1px solid rgb(var(--mg-color-red-900));
+  border-radius: var(--mg-radius-button);
 
   &__title {
     font-size: mg-rem(15);
     margin-bottom: mg-rem(10);
 
     a {
-      color: $mg-color-interactive;
+      color: rgb(var(--mg-color-interactive));
       text-decoration: underline;
       text-underline-offset: 3px;
 
@@ -22,7 +22,7 @@
       }
 
       &:focus-visible {
-        outline: 2px solid $mg-color-interactive;
+        outline: 2px solid rgb(var(--mg-color-interactive));
         outline-offset: 2px;
       }
     }
@@ -34,10 +34,10 @@
 
   // Add any additional nested styles or modifiers here
   &--primary {
-    background-color: $mg-color-blue-200;
+    background-color: rgb(var(--mg-color-blue-200));
   }
 
   &--secondary {
-    background-color: $mg-color-blue-100;
+    background-color: rgb(var(--mg-color-blue-100));
   }
 }

package/scss/Components/Breadcrumbs/breadcrumbs.scss

@@ -27,12 +27,12 @@
 
     a {
       background: none;
-      color: $mg-color-text;
+      color: rgb(var(--mg-color-text));
       font-weight: 600;
       letter-spacing: 0.03em;
 
       &:hover {
-        color: $mg-color-text;
+        color: rgb(var(--mg-color-text));
       }
     }
   }
@@ -43,8 +43,8 @@
     display: inline-block;
     width: 0.4em;
     height: 0.4em;
-    border-right: 0.125em solid $mg-color-text;
-    border-top: 0.125em solid $mg-color-text;
+    border-right: 0.125em solid rgb(var(--mg-color-text));
+    border-top: 0.125em solid rgb(var(--mg-color-text));
     transform: rotate(45deg);
 
     // Asymmetric margin: left side is larger to optically center the rotated
@@ -61,12 +61,12 @@
 
 .mg-breadcrumb.mg-breadcrumb--white {
   li {
-    color: $mg-color-white;
+    color: rgb(var(--mg-color-white));
     a {
-      color: $mg-color-white;
+      color: rgb(var(--mg-color-white));
 
       &:hover {
-        color: $mg-color-white;
+        color: rgb(var(--mg-color-white));
         opacity: 0.7;
       }
     }
@@ -74,11 +74,11 @@
 
   &:last-of-type,
   li:last-of-type {
-    color: $mg-color-white;
+    color: rgb(var(--mg-color-white));
   }
 
   li + li:before {
-    border-color: $mg-color-white;
+    border-color: rgb(var(--mg-color-white));
   }
 }
 

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

@@ -1,35 +1,75 @@
 .mg-chip {
   align-items: center;
-  background: $mg-color-neutral-50;
-  border-radius: 20px;
-  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
+  background: rgb(var(--mg-color-neutral-50));
+  border: 0;
+  border-radius: 999px;
+  box-sizing: border-box;
+  box-shadow: var(--mg-shadow-raised);
+  color: rgb(var(--mg-color-text));
+  cursor: pointer;
   display: inline-flex;
-  min-height: $mg-spacing-250;
-  padding: $mg-spacing-25 $mg-spacing-50;
+  font-family: $mg-font-family;
+  font-size: $mg-font-size-250;
+  font-weight: 500;
+  justify-content: center;
+  line-height: 1.25;
+  min-height: mg-rem(40);
+  padding: var(--mg-spacing-50) var(--mg-spacing-150);
+  text-align: start;
+  text-decoration: none;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard),
+      box-shadow var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),
+      color var(--mg-motion-duration-fast) var(--mg-motion-easing-standard),
+      scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
+  }
 
   &:hover {
-    background-color: $mg-color-neutral-300;
+    background-color: rgb(var(--mg-color-neutral-300));
+    color: rgb(var(--mg-color-text));
+    text-decoration: none;
+  }
+
+  &:active {
+    scale: 0.96;
+  }
+
+  &:focus-visible {
+    border-radius: 999px;
+    box-shadow:
+      0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),
+      0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width))
+        rgb(var(--mg-color-focus-ring));
+    outline: 0;
   }
 
-  &.mg-chip__cross {
-    &::before {
-      // background: url(#{$img-path-Iconfourback}/times-red.svg) no-repeat left;
-      content: "";
-      display: inline-flex;
-      height: 22px;
-      margin-left: -$mg-spacing-25;
-      margin-right: $mg-spacing-25;
-      padding-right: mg-rem(14);
-      position: relative;
-      top: 0;
-      width: auto;
+  @media (forced-colors: active) {
+    border: 1px solid ButtonText;
+
+    &:focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
     }
   }
-}
 
-[dir="rtl"] {
-  .mg-chip__cross::before {
-    margin-left: $mg-spacing-25;
-    margin-right: -$mg-spacing-25;
+  &.mg-chip__cross::after {
+    align-items: center;
+    content: "×";
+    display: inline-flex;
+    flex: 0 0 mg-rem(20);
+    font-size: mg-rem(18);
+    font-weight: 400;
+    height: mg-rem(20);
+    justify-content: center;
+    line-height: 1;
+    margin-inline-end: calc(-1 * var(--mg-spacing-50));
+    margin-inline-start: var(--mg-spacing-50);
   }
 }
+
+:lang(ar) .mg-chip {
+  font-family: $mg-font-family-arabic-body;
+}