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

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

@@ -2,12 +2,12 @@
   max-width: 400px;
   display: flex;
   flex-direction: column;
-  gap: $mg-spacing-100;
+  gap: var(--mg-spacing-100);
 }
 
 .mg-share__header {
   font-family: $mg-font-family;
-  color: $mg-color-text;
+  color: rgb(var(--mg-color-text));
   font-weight: 600;
   font-size: $mg-font-size-300;
   display: flex;
@@ -16,7 +16,7 @@
 
 .mg-share__buttons {
   display: flex;
-  gap: $mg-spacing-50;
+  gap: var(--mg-spacing-50);
   flex-direction: row;
   justify-content: left;
   align-items: center;
@@ -26,22 +26,22 @@
   font-size: $mg-font-size-400;
   width: mg-rem(40);
   height: mg-rem(40);
-  padding: $mg-spacing-100;
-  border-radius: $mg-radius-button;
-  background-color: $mg-color-button-background;
-  color: $mg-color-button;
+  padding: var(--mg-spacing-100);
+  border-radius: var(--mg-radius-button);
+  background-color: rgb(var(--mg-color-button-background));
+  color: rgb(var(--mg-color-button));
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  border: $mg-border-width-button solid $mg-border-color-button;
+  border: var(--mg-border-width-button) solid var(--mg-border-color-button);
 
   &:hover {
-    background-color: rgba($mg-color-button-background--hover, 0.8);
+    background-color: rgb(var(--mg-color-blue-700) / 0.8);
   }
 
   &: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;
   }
 }
@@ -52,11 +52,11 @@
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
-  border: 0 solid $mg-border-color-button;
-  color: $mg-color-button;
+  border: 0 solid var(--mg-border-color-button);
+  color: rgb(var(--mg-color-button));
   font-family: $mg-font-family;
-  padding: $mg-spacing-100;
-  background-color: rgba($mg-color-button-background, 1);
+  padding: var(--mg-spacing-100);
+  background-color: rgb(var(--mg-color-blue-900));
 
   &:hover .mg-share__copy-text {
     text-decoration: underline;
@@ -77,7 +77,7 @@
 }
 
 .mg-share__copy-text {
-  color: $mg-color-button;
+  color: rgb(var(--mg-color-button));
   font-size: $mg-font-size-100;
   overflow: hidden;
   scrollbar-width: 0;
@@ -95,7 +95,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  background-color: rgba($mg-color-button-background, 0.5);
+  background-color: rgb(var(--mg-color-blue-900) / 0.5);
 
   img {
     width: 18px;

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

@@ -5,15 +5,15 @@
   display: inline-block;
   position: relative;
   isolation: isolate;
-  margin-bottom: $mg-spacing-100;
-  background: $mg-card-background;
-  padding: $mg-card-padding;
-  border-radius: $mg-card-border-radius;
+  margin-bottom: var(--mg-spacing-100);
+  background: var(--mg-card-background);
+  padding: var(--mg-card-padding);
+  border-radius: var(--mg-card-border-radius);
 
   // Vertical CARD
   &__vc {
     display: grid;
-    gap: $mg-spacing-50;
+    gap: var(--mg-spacing-50);
 
     .mg-card__visual {
       aspect-ratio: 16/9;
@@ -23,10 +23,10 @@
 
   // Horizontal CARD
   &__hc {
-    color: $mg-color-neutral-800;
+    color: rgb(var(--mg-color-neutral-800));
     display: grid;
     grid-template-columns: 1fr;
-    gap: $mg-spacing-100;
+    gap: var(--mg-spacing-100);
 
     .mg-card__content {
       grid-column: 1 / 3;
@@ -60,7 +60,7 @@
   &__hc.mg-card-book__hc {
     .mg-card__visual {
       align-self: flex-start;
-      border: 1px solid rgba($mg-color-neutral-600, 0.2);
+      border: 1px solid rgb(var(--mg-color-neutral-600) / 0.2);
       max-width: 200px;
       overflow: hidden;
 
@@ -72,7 +72,7 @@
 
     &:has(.mg-card__visual) {
       grid-template-rows: unset;
-      gap: 0 $mg-spacing-100;
+      gap: 0 var(--mg-spacing-100);
 
       @media (min-width: $mg-breakpoint-mobile) {
         grid-template-columns: 160px 1fr;
@@ -95,14 +95,14 @@
   }
 
   &__label {
-    color: $mg-color-tag;
+    color: rgb(var(--mg-color-tag));
     cursor: pointer;
     display: inline-block;
     font-size: $mg-font-tag;
-    margin-right: $mg-spacing-50;
+    margin-right: var(--mg-spacing-50);
 
     &:hover {
-      color: $mg-color-tag;
+      color: rgb(var(--mg-color-tag));
     }
   }
 
@@ -111,11 +111,11 @@
     font-size: $mg-font-size-500;
     font-weight: bold;
     line-height: $mg-font-line-height-500;
-    padding-bottom: $mg-spacing-75;
-    padding-top: $mg-spacing-100;
+    padding-bottom: var(--mg-spacing-75);
+    padding-top: var(--mg-spacing-100);
 
     a {
-      color: $mg-color-interactive;
+      color: rgb(var(--mg-color-interactive));
       cursor: pointer;
       display: inline;
       text-decoration: underline;
@@ -123,7 +123,7 @@
     }
 
     .active {
-      background: $mg-color-neutral-50;
+      background: rgb(var(--mg-color-neutral-50));
       font-weight: bold;
     }
   }
@@ -162,7 +162,7 @@
 
   // Focus: card-level outline when title link is focused via keyboard
   &__title a:focus-visible {
-    outline: 2px solid $mg-color-interactive;
+    outline: 2px solid rgb(var(--mg-color-interactive));
     outline-offset: 2px;
   }
 
@@ -191,9 +191,9 @@
 
 // Color variants (shared accent colours from _variables.scss)
 $card-variant-colours: (
-  "secondary": $mg-color-secondary,
-  "tertiary": $mg-color-tertiary,
-  "quaternary": $mg-color-quaternary,
+  "secondary": rgb(var(--mg-color-secondary)),
+  "tertiary": rgb(var(--mg-color-tertiary)),
+  "quaternary": rgb(var(--mg-color-quaternary)),
 );
 
 @each $name, $color in $card-variant-colours {
@@ -206,7 +206,7 @@ $card-variant-colours: (
 // Double class selector ensures this overrides variant colors regardless of source order
 .mg-card.mg-card--plain-title {
   .mg-card__title a {
-    color: $mg-color-text;
+    color: rgb(var(--mg-color-text));
     text-decoration: none;
   }
 
@@ -216,12 +216,12 @@ $card-variant-colours: (
 }
 
 .mg-card__summary {
-  padding-bottom: $mg-spacing-50;
+  padding-bottom: var(--mg-spacing-50);
 }
 
 .mg-card__summary a,
 .mg-card__text-link {
-  color: $mg-color-interactive;
+  color: rgb(var(--mg-color-interactive));
 }
 
 .mg-card__summary a,
@@ -248,11 +248,11 @@ $card-variant-colours: (
 
   .mg-card__visual {
     aspect-ratio: 3/4;
-    border: 1px solid rgba($mg-color-neutral-600, 0.2);
+    border: 1px solid rgb(var(--mg-color-neutral-600) / 0.2);
   }
   .mg-card__title {
     font-size: $mg-font-size-300;
-    padding-top: $mg-spacing-25;
+    padding-top: var(--mg-spacing-25);
   }
 }
 
@@ -271,7 +271,7 @@ $card-variant-colours: (
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: $mg-spacing-100;
+  gap: var(--mg-spacing-100);
   max-width: 300px;
 
   @media (min-width: $mg-breakpoint-mobile) {
@@ -286,7 +286,7 @@ $card-variant-colours: (
   .mg-card__visual-label {
     font-size: $mg-font-tag;
     font-weight: 700;
-    color: $mg-color-tag;
+    color: rgb(var(--mg-color-tag));
     width: 100%;
   }
 
@@ -358,7 +358,7 @@ $card-variant-colours: (
 
   // Icon class container - uses container query units to scale like images
   .mg-card__icon-wrap {
-    color: $mg-color-interactive;
+    color: rgb(var(--mg-color-interactive));
     line-height: 1;
     display: flex;
     align-items: center;
@@ -398,7 +398,7 @@ $card-variant-colours: (
     // 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;
+      border-radius: var(--mg-card-icon-badge-radius);
       aspect-ratio: 1;
       width: 72px;
       min-width: 72px;
@@ -408,7 +408,7 @@ $card-variant-colours: (
 
       .mg-icon {
         font-size: 32px;
-        color: var(--mg-icon-fg, #{$mg-color-neutral-700});
+        color: var(--mg-icon-fg, rgb(var(--mg-color-neutral-700)));
       }
     }
   }
@@ -435,7 +435,7 @@ $card-variant-colours: (
       outline: none;
 
       &::after {
-        outline: 2px solid $mg-color-interactive;
+        outline: 2px solid rgb(var(--mg-color-interactive));
         outline-offset: 2px;
       }
     }
@@ -456,7 +456,7 @@ $card-variant-colours: (
     line-height: $mg-font-line-height-500;
 
     a {
-      color: $mg-color-interactive;
+      color: rgb(var(--mg-color-interactive));
       text-decoration: underline;
       text-underline-offset: 3px;
 
@@ -465,7 +465,7 @@ $card-variant-colours: (
       }
 
       &:focus-visible {
-        outline: 2px solid $mg-color-interactive;
+        outline: 2px solid rgb(var(--mg-color-interactive));
         outline-offset: 2px;
         border-radius: 2px;
       }
@@ -474,16 +474,16 @@ $card-variant-colours: (
 
   .mg-card__cta {
     margin-top: auto;
-    padding-top: $mg-spacing-100;
+    padding-top: var(--mg-spacing-100);
   }
 
   .mg-card__link {
     margin-top: auto;
-    padding-top: $mg-spacing-75;
+    padding-top: var(--mg-spacing-75);
     margin-bottom: 0;
 
     a {
-      color: $mg-color-interactive;
+      color: rgb(var(--mg-color-interactive));
       text-decoration: none;
       position: relative;
       z-index: 2; // above stretched-link cover — local to card stacking context
@@ -493,7 +493,7 @@ $card-variant-colours: (
       }
 
       &:focus-visible {
-        outline: 2px solid $mg-color-interactive;
+        outline: 2px solid rgb(var(--mg-color-interactive));
         outline-offset: 2px;
         border-radius: 2px;
       }
@@ -503,7 +503,7 @@ $card-variant-colours: (
   // Bordered variant (colored border via CSS custom property)
   &--bordered {
     border: 2px solid var(--mg-card-border);
-    padding: max($mg-card-padding, $mg-spacing-150);
+    padding: max(var(--mg-card-padding), var(--mg-spacing-150));
   }
 
   // Centered variant
@@ -523,27 +523,27 @@ $card-variant-colours: (
   // Negative variant (for dark backgrounds)
   &--negative {
     .mg-card__icon-wrap {
-      color: $mg-color-white;
+      color: rgb(var(--mg-color-white));
     }
 
     .mg-card__label {
-      color: rgba($mg-color-white, 0.8);
+      color: rgb(var(--mg-color-neutral-0) / 0.8);
     }
 
     .mg-card__title,
     .mg-card__title a {
-      color: $mg-color-white;
+      color: rgb(var(--mg-color-white));
     }
 
     .mg-card__summary {
-      color: rgba($mg-color-white, 0.8);
+      color: rgb(var(--mg-color-neutral-0) / 0.8);
     }
 
     .mg-card__link a {
-      color: $mg-color-white;
+      color: rgb(var(--mg-color-white));
 
       &:focus-visible {
-        outline-color: $mg-color-white;
+        outline-color: rgb(var(--mg-color-white));
       }
     }
   }

package/scss/Components/Cards/StatsCard/stats-card.scss

@@ -5,24 +5,24 @@
 
 /* Individual Stat Item - extends mg-card base */
 .mg-stats-card-item {
-  background-color: $mg-color-white;
-  border: 1px solid $mg-color-neutral-200;
-  padding: $mg-spacing-400;
+  background-color: rgb(var(--mg-color-white));
+  border: 1px solid rgb(var(--mg-color-neutral-200));
+  padding: var(--mg-spacing-400);
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: $mg-spacing-100;
+  gap: var(--mg-spacing-100);
   position: relative;
   overflow: hidden;
 
   @include devicebreak(small) {
-    padding: $mg-spacing-300;
+    padding: var(--mg-spacing-300);
   }
 
   &__icon {
     font-size: $mg-font-size-600;
-    color: $mg-color-interactive;
-    margin-bottom: $mg-spacing-100;
+    color: rgb(var(--mg-color-interactive));
+    margin-bottom: var(--mg-spacing-100);
     line-height: 1;
 
     i {
@@ -34,7 +34,7 @@
     font-family: $mg-font-family-headings;
     font-size: $mg-font-size-200;
     font-weight: 600;
-    color: $mg-color-tag;
+    color: rgb(var(--mg-color-tag));
     text-transform: uppercase;
     letter-spacing: 0.05em;
     line-height: 1.2;
@@ -48,9 +48,9 @@
     font-variant-numeric: tabular-nums lining-nums;
     font-size: $mg-font-size-900;
     font-weight: 700;
-    color: $mg-color-interactive;
+    color: rgb(var(--mg-color-interactive));
     line-height: 1;
-    margin: $mg-spacing-100 0;
+    margin: var(--mg-spacing-100) 0;
     overflow-wrap: break-word;
     text-decoration: none;
 
@@ -76,7 +76,7 @@
     outline: none;
 
     &::after {
-      outline: 2px solid $mg-color-interactive;
+      outline: 2px solid rgb(var(--mg-color-interactive));
       outline-offset: 2px;
     }
   }
@@ -85,9 +85,9 @@
     font-family: $mg-font-family-headings;
     font-size: $mg-font-size-500;
     font-weight: 600;
-    color: $mg-color-text;
+    color: rgb(var(--mg-color-text));
     line-height: 1.3;
-    margin-bottom: $mg-spacing-50;
+    margin-bottom: var(--mg-spacing-50);
 
     @include devicebreak(small) {
       font-size: $mg-font-size-400;
@@ -96,7 +96,7 @@
 
   &__summary {
     font-size: $mg-font-size-400;
-    color: $mg-color-neutral-800;
+    color: rgb(var(--mg-color-neutral-800));
     line-height: 1.5;
 
     p {
@@ -109,7 +109,7 @@
 
     // Inline links sit above the stretched link
     a {
-      color: $mg-color-interactive;
+      color: rgb(var(--mg-color-interactive));
       text-decoration: underline;
       position: relative;
       z-index: 2; // above stretched-link cover — local to stats-card stacking context
@@ -120,7 +120,7 @@
       }
 
       &:focus {
-        outline: 2px solid $mg-color-interactive;
+        outline: 2px solid rgb(var(--mg-color-interactive));
         outline-offset: 2px;
       }
     }
@@ -135,10 +135,10 @@
 /* Variant: Compact */
 .mg-stats-card--compact {
   .mg-stats-card-item {
-    padding: $mg-spacing-300;
+    padding: var(--mg-spacing-300);
 
     @include devicebreak(small) {
-      padding: $mg-spacing-200;
+      padding: var(--mg-spacing-200);
     }
 
     &__value {
@@ -166,11 +166,11 @@
 /* Variant: Highlighted */
 .mg-stats-card--highlighted {
   .mg-stats-card-item {
-    background-color: rgba($mg-color-interactive, 0.05);
-    border-left: 4px solid $mg-color-interactive;
+    background-color: rgb(var(--mg-color-blue-900) / 0.05);
+    border-left: 4px solid rgb(var(--mg-color-interactive));
 
     &:hover {
-      background-color: rgba($mg-color-interactive, 0.08);
+      background-color: rgb(var(--mg-color-blue-900) / 0.08);
     }
   }
 }
@@ -178,38 +178,38 @@
 /* Variant: Negative (for dark backgrounds) */
 .mg-stats-card--negative {
   h2 {
-    color: $mg-color-white;
+    color: rgb(var(--mg-color-white));
   }
 
   .mg-stats-card-item {
     background-color: transparent;
     border-width: 2px;
-    border-color: rgba($mg-color-white, 0.5);
+    border-color: rgb(var(--mg-color-neutral-0) / 0.5);
 
     &__icon {
-      color: $mg-color-white;
+      color: rgb(var(--mg-color-white));
     }
 
     &__label {
-      color: rgba($mg-color-white, 0.8);
+      color: rgb(var(--mg-color-neutral-0) / 0.8);
     }
 
     &__value {
-      color: $mg-color-white;
+      color: rgb(var(--mg-color-white));
     }
 
     &__bottom-label {
-      color: $mg-color-white;
+      color: rgb(var(--mg-color-white));
     }
 
     &__summary {
-      color: rgba($mg-color-white, 0.8);
+      color: rgb(var(--mg-color-neutral-0) / 0.8);
 
       a {
-        color: $mg-color-white;
+        color: rgb(var(--mg-color-white));
 
         &:focus {
-          outline-color: $mg-color-white;
+          outline-color: rgb(var(--mg-color-white));
         }
       }
     }
@@ -217,7 +217,7 @@
 
   // Focus styles for linked cards
   .mg-stats-card-item a.mg-stats-card-item__value:focus-visible::after {
-    outline-color: $mg-color-white;
+    outline-color: rgb(var(--mg-color-white));
   }
 }
 
@@ -226,7 +226,7 @@
   .mg-stats-card--highlighted {
     .mg-stats-card-item {
       border-left: none;
-      border-right: 4px solid $mg-color-interactive;
+      border-right: 4px solid rgb(var(--mg-color-interactive));
     }
   }
 }

package/scss/Components/CookieConsentBanner/cookie-consent-banner.scss

@@ -2,33 +2,33 @@
 // #cc-main {
 //   // CSS Variables used by vanilla-cookieconsent
 //   --cc-bg: #fff;
-//   --cc-primary-color: #{$mg-color-text};
-//   --cc-secondary-color: #{$mg-color-neutral-600};
-//   --cc-btn-primary-bg: #{$mg-color-interactive};
+//   --cc-primary-color: rgb(var(--mg-color-text));
+//   --cc-secondary-color: rgb(var(--mg-color-neutral-600));
+//   --cc-btn-primary-bg: rgb(var(--mg-color-interactive));
 //   --cc-btn-primary-color: #fff;
-//   --cc-btn-primary-border-color: #{$mg-color-interactive};
-//   --cc-btn-primary-hover-bg: #{$mg-color-interactive-active};
+//   --cc-btn-primary-border-color: rgb(var(--mg-color-interactive));
+//   --cc-btn-primary-hover-bg: rgb(var(--mg-color-interactive-active));
 //   --cc-btn-primary-hover-color: #fff;
-//   --cc-btn-secondary-bg: #{$mg-color-neutral-50};
-//   --cc-btn-secondary-color: #{$mg-color-text};
-//   --cc-btn-secondary-border-color: #{$mg-color-neutral-100};
-//   --cc-btn-secondary-hover-bg: #{$mg-color-neutral-100};
-//   --cc-btn-secondary-hover-color: #{$mg-color-text};
-//   --cc-toggle-on-bg: #{$mg-color-interactive};
-//   --cc-toggle-off-bg: #{$mg-color-neutral-400};
-//   --cc-toggle-readonly-bg: #{$mg-color-neutral-200};
+//   --cc-btn-secondary-bg: rgb(var(--mg-color-neutral-50));
+//   --cc-btn-secondary-color: rgb(var(--mg-color-text));
+//   --cc-btn-secondary-border-color: rgb(var(--mg-color-neutral-100));
+//   --cc-btn-secondary-hover-bg: rgb(var(--mg-color-neutral-100));
+//   --cc-btn-secondary-hover-color: rgb(var(--mg-color-text));
+//   --cc-toggle-on-bg: rgb(var(--mg-color-interactive));
+//   --cc-toggle-off-bg: rgb(var(--mg-color-neutral-400));
+//   --cc-toggle-readonly-bg: rgb(var(--mg-color-neutral-200));
 //   --cc-toggle-on-knob-bg: #fff;
 //   --cc-toggle-off-knob-bg: #fff;
 //   --cc-toggle-readonly-knob-bg: #fff;
-//   --cc-cookie-category-block-bg: #{$mg-color-blue-50};
-//   --cc-cookie-category-block-hover-bg: #{$mg-color-blue-100};
-//   --cc-section-border: #{$mg-color-neutral-50};
-//   --cc-cookie-table-border: #{$mg-color-neutral-100};
-//   --cc-separator-border-color: #{$mg-color-neutral-100};
+//   --cc-cookie-category-block-bg: rgb(var(--mg-color-blue-50));
+//   --cc-cookie-category-block-hover-bg: rgb(var(--mg-color-blue-100));
+//   --cc-section-border: rgb(var(--mg-color-neutral-50));
+//   --cc-cookie-table-border: rgb(var(--mg-color-neutral-100));
+//   --cc-separator-border-color: rgb(var(--mg-color-neutral-100));
 //   --cc-overlay-bg: rgb(4 6 8 / 0.85);
-//   --cc-webkit-scrollbar-bg: #{$mg-color-neutral-200};
-//   --cc-webkit-scrollbar-hover-bg: #{$mg-color-interactive};
-//   --cc-font-family: #{$mg-font-family};
+//   --cc-webkit-scrollbar-bg: rgb(var(--mg-color-neutral-200));
+//   --cc-webkit-scrollbar-hover-bg: rgb(var(--mg-color-interactive));
+//   --cc-font-family: var(--mg-font-family);
 //   --cc-modal-border-radius: 0;
 //   --cc-btn-border-radius: 0;
 //   --cc-pm-toggle-border-radius: 4em;
@@ -36,17 +36,17 @@
 //   // Custom link styles
 //   .cc__link,
 //   a {
-//     color: #{$mg-color-interactive};
+//     color: rgb(var(--mg-color-interactive));
 //     text-decoration: underline;
 
 //     &:hover {
-//       color: #{$mg-color-interactive-active};
+//       color: rgb(var(--mg-color-interactive-active));
 //     }
 //   }
 
 //   // Bottom bar consent modal customization
 //   #cm.bar {
-//     border-top: 1px solid #{$mg-color-neutral-100};
+//     border-top: 1px solid rgb(var(--mg-color-neutral-100));
 //     box-shadow: 0 -2px 10px rgb(0 0 0 / 0.1);
 
 //     .c-bn {
@@ -61,12 +61,12 @@
 //     }
 
 //     .pm__badge {
-//       padding: #{$mg-spacing-25} #{$mg-spacing-50};
-//       background: #{$mg-color-interactive};
+//       padding: var(--mg-spacing-25) var(--mg-spacing-50);
+//       background: rgb(var(--mg-color-interactive));
 //       color: #fff;
 //       font-size: 0.8rem;
 //       border-radius: 2px;
-//       margin-left: #{$mg-spacing-50};
+//       margin-left: var(--mg-spacing-50);
 //     }
 //   }