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

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,13 @@
     letter-spacing: 0.03em;
 
     &:hover {
-      color: $mg-color-neutral-600;
+      color: rgb(var(--mg-color-neutral-600));
       cursor: pointer;
     }
 
     &.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,7 +6,7 @@ details {
     cursor: pointer;
 
     &:focus-visible {
-      outline: 2px solid $mg-color-interactive;
+      outline: 2px solid rgb(var(--mg-color-interactive));
       outline-offset: 2px;
       border-radius: mg-rem(2);
     }
@@ -15,7 +15,7 @@ details {
 
 /* 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,7 +27,7 @@ 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);
@@ -35,7 +35,7 @@ details.mg-details {
     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);
     }
 
@@ -53,7 +53,7 @@ details.mg-details {
       height: 0;
       border-top: 6px solid transparent;
       border-bottom: 6px solid transparent;
-      border-left: 8px solid $mg-color-interactive;
+      border-left: 8px solid rgb(var(--mg-color-interactive));
       transition: transform 0.2s ease-in-out;
     }
   }
@@ -67,12 +67,12 @@ 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

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,16 +81,16 @@
 .mg-table td {
   font-size: $mg-font-size-300;
   line-height: 1.4;
-  padding: $mg-spacing-25;
+  padding: var(--mg-spacing-25);
   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;
   text-align: center;
 }
@@ -122,7 +122,7 @@
     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,14 +1,14 @@
 .mg-chip {
   align-items: center;
-  background: $mg-color-neutral-50;
+  background: rgb(var(--mg-color-neutral-50));
   border-radius: 20px;
   box-shadow: 0 1px 2px rgb(0 0 0 / 0.2);
   display: inline-flex;
-  min-height: $mg-spacing-250;
-  padding: $mg-spacing-25 $mg-spacing-50;
+  min-height: var(--mg-spacing-250);
+  padding: var(--mg-spacing-25) var(--mg-spacing-50);
 
   &:hover {
-    background-color: $mg-color-neutral-300;
+    background-color: rgb(var(--mg-color-neutral-300));
   }
 
   &.mg-chip__cross {
@@ -17,8 +17,8 @@
       content: "";
       display: inline-flex;
       height: 22px;
-      margin-left: -$mg-spacing-25;
-      margin-right: $mg-spacing-25;
+      margin-left: calc(-1 * var(--mg-spacing-25));
+      margin-right: var(--mg-spacing-25);
       padding-right: mg-rem(14);
       position: relative;
       top: 0;
@@ -29,7 +29,7 @@
 
 [dir="rtl"] {
   .mg-chip__cross::before {
-    margin-left: $mg-spacing-25;
-    margin-right: -$mg-spacing-25;
+    margin-left: var(--mg-spacing-25);
+    margin-right: calc(-1 * var(--mg-spacing-25));
   }
 }

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

@@ -18,18 +18,18 @@
   background: transparent;
   display: flex;
   font-family: $mg-font-family-headings;
-  font-size: $mg-font-size-button;
+  font-size: var(--mg-font-size-button);
   font-weight: 600;
   line-height: 1;
-  border-radius: $mg-radius-button;
-  color: $mg-color-button;
+  border-radius: var(--mg-radius-button);
+  color: rgb(var(--mg-color-button));
   cursor: pointer;
   justify-content: center;
-  padding: $mg-padding-button;
-  border: $mg-border-width-button solid $mg-border-color-button;
+  padding: var(--mg-padding-button);
+  border: var(--mg-border-width-button) solid var(--mg-border-color-button);
 
   &:focus-visible {
-    box-shadow: 0 0 4px $mg-color-button-background--hover;
+    box-shadow: 0 0 4px rgb(var(--mg-color-button-background--hover));
     outline: 0;
   }
 
@@ -44,32 +44,59 @@
 
 button {
   &:focus-visible {
-    box-shadow: 0 0 4px $mg-color-button-background;
+    box-shadow: 0 0 4px rgb(var(--mg-color-button-background));
     outline: 0;
   }
 }
 
 .mg-button-primary {
-  background-color: $mg-color-button-background;
+  background-color: rgb(var(--mg-color-button-background));
 
   &:hover {
-    color: $mg-color-button;
-    background-color: $mg-color-button-background--hover;
+    color: rgb(var(--mg-color-button));
+    background-color: rgb(var(--mg-color-button-background--hover));
   }
 }
 
 .mg-button-secondary {
-  background-color: $mg-color-button-secondary-background;
+  background-color: rgb(var(--mg-color-button-secondary-background));
 
   &:hover {
-    color: $mg-color-button;
-    background-color: $mg-color-button-secondary-background--hover;
+    color: rgb(var(--mg-color-button));
+    background-color: rgb(var(--mg-color-button-secondary-background--hover));
+  }
+}
+
+// The outline modifier composes with the existing emphasis variants:
+// .mg-button.mg-button-primary.mg-button-outline or
+// .mg-button.mg-button-secondary.mg-button-outline.
+.mg-button-outline {
+  background-color: transparent;
+}
+
+.mg-button-primary.mg-button-outline {
+  border-color: rgb(var(--mg-color-button-outline-primary));
+  color: rgb(var(--mg-color-button-outline-primary));
+
+  &:hover {
+    background-color: rgb(var(--mg-color-button-outline-primary--hover));
+    color: rgb(var(--mg-color-button));
+  }
+}
+
+.mg-button-secondary.mg-button-outline {
+  border-color: rgb(var(--mg-color-button-outline-secondary));
+  color: rgb(var(--mg-color-button-outline-secondary));
+
+  &:hover {
+    background-color: rgb(var(--mg-color-button-outline-secondary--hover));
+    color: rgb(var(--mg-color-button));
   }
 }
 
 .mg-button.disabled {
-  background-color: $mg-color-neutral-500;
-  color: $mg-color-neutral-0;
+  background-color: rgb(var(--mg-color-neutral-500));
+  color: rgb(var(--mg-color-neutral-0));
   pointer-events: none;
 }
 
@@ -81,7 +108,7 @@ button {
 //           @include transform(rotate(180deg));
 
 //           margin-left: 0;
-//           margin-right: $mg-spacing-25;
+//           margin-right: var(--mg-spacing-25);
 //         }
 
 //         &:hover::after {