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

package/scss/Components/Gallery/gallery.scss

@@ -2,7 +2,7 @@
 .mg-gallery {
   position: relative;
   display: grid;
-  gap: $mg-spacing-200;
+  gap: var(--mg-spacing-200);
   width: 100%;
 
   // Mobile: stack vertically (main → description → thumbnails)
@@ -37,7 +37,7 @@
   &__main {
     grid-area: main;
     position: relative;
-    background-color: $mg-color-white;
+    background-color: rgb(var(--mg-color-white));
     overflow: hidden;
   }
 
@@ -47,14 +47,14 @@
   }
 
   &:focus-visible {
-    outline: 2px solid $mg-color-interactive;
+    outline: 2px solid rgb(var(--mg-color-interactive));
     outline-offset: 2px;
   }
 
   &__image-wrapper {
     width: 100%;
     aspect-ratio: 16 / 9;
-    background-color: $mg-color-neutral-50;
+    background-color: rgb(var(--mg-color-neutral-50));
     display: flex;
     align-items: center;
     justify-content: center;
@@ -84,7 +84,7 @@
     width: 100%;
     height: 100%;
     overflow: auto;
-    padding: $mg-spacing-200;
+    padding: var(--mg-spacing-200);
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -102,10 +102,10 @@
   }
 
   &__spinner {
-    width: $mg-spacing-300; // 30px
-    height: $mg-spacing-300;
-    border: 4px solid $mg-color-neutral-300;
-    border-top-color: $mg-color-interactive;
+    width: var(--mg-spacing-300); // 30px
+    height: var(--mg-spacing-300);
+    border: 4px solid rgb(var(--mg-color-neutral-300));
+    border-top-color: rgb(var(--mg-color-interactive));
     border-radius: 50%;
     animation: mg-gallery-spin 0.8s linear infinite;
   }
@@ -119,10 +119,10 @@
   // Description area
   &__description {
     grid-area: description;
-    padding: $mg-spacing-150 0;
+    padding: var(--mg-spacing-150) 0;
 
     @include devicebreak(medium) {
-      padding: $mg-spacing-150;
+      padding: var(--mg-spacing-150);
     }
   }
 
@@ -130,13 +130,13 @@
     font-family: $mg-font-family-headings;
     font-size: $mg-font-size-400;
     font-weight: 700;
-    margin-bottom: $mg-spacing-50;
-    color: $mg-color-text;
+    margin-bottom: var(--mg-spacing-50);
+    color: rgb(var(--mg-color-text));
   }
 
   &__caption {
     font-size: $mg-font-size-300;
-    color: $mg-color-neutral-800;
+    color: rgb(var(--mg-color-neutral-800));
     line-height: 1.5;
     margin: 0;
   }
@@ -145,8 +145,8 @@
   &__thumbnails {
     grid-area: thumbnails;
     display: flex;
-    gap: $mg-spacing-100;
-    padding: $mg-spacing-100 0;
+    gap: var(--mg-spacing-100);
+    padding: var(--mg-spacing-100) 0;
 
     // Mobile: horizontal scroll
     flex-direction: row;
@@ -172,22 +172,22 @@
 
     // Custom scrollbar styling
     scrollbar-width: thin;
-    scrollbar-color: $mg-color-neutral-500 $mg-color-neutral-100;
+    scrollbar-color: rgb(var(--mg-color-neutral-500)) rgb(var(--mg-color-neutral-100));
 
     &::-webkit-scrollbar {
-      width: $mg-spacing-50;
-      height: $mg-spacing-50;
+      width: var(--mg-spacing-50);
+      height: var(--mg-spacing-50);
     }
 
     &::-webkit-scrollbar-track {
-      background: $mg-color-neutral-100;
+      background: rgb(var(--mg-color-neutral-100));
     }
 
     &::-webkit-scrollbar-thumb {
-      background: $mg-color-neutral-500;
+      background: rgb(var(--mg-color-neutral-500));
 
       &:hover {
-        background: $mg-color-neutral-600;
+        background: rgb(var(--mg-color-neutral-600));
       }
     }
   }
@@ -195,13 +195,13 @@
   // Individual thumbnail button
   &__thumbnail {
     flex-shrink: 0;
-    width: $mg-spacing-400; // 50px
-    height: $mg-spacing-400;
+    width: var(--mg-spacing-400); // 50px
+    height: var(--mg-spacing-400);
     border: none;
     border-left: 4px solid transparent;
     overflow: hidden;
     cursor: pointer;
-    background: $mg-color-neutral-100;
+    background: rgb(var(--mg-color-neutral-100));
     padding: 0;
     position: relative;
 
@@ -214,8 +214,8 @@
     }
 
     .mg-gallery--thumbnails-bottom & {
-      width: $mg-spacing-400;
-      height: $mg-spacing-400;
+      width: var(--mg-spacing-400);
+      height: var(--mg-spacing-400);
       border-left: none;
       border-bottom: 4px solid transparent;
     }
@@ -229,11 +229,11 @@
     }
 
     &:hover {
-      border-left-color: $mg-color-neutral-400;
+      border-left-color: rgb(var(--mg-color-neutral-400));
 
       .mg-gallery--thumbnails-bottom & {
         border-left-color: transparent;
-        border-bottom-color: $mg-color-neutral-400;
+        border-bottom-color: rgb(var(--mg-color-neutral-400));
       }
     }
 
@@ -242,12 +242,12 @@
     }
 
     &:focus-visible {
-      outline: 2px solid $mg-color-interactive;
+      outline: 2px solid rgb(var(--mg-color-interactive));
       outline-offset: 2px;
     }
 
     &--active {
-      border-left-color: $mg-color-interactive;
+      border-left-color: rgb(var(--mg-color-interactive));
 
       &::after {
         content: "";
@@ -257,13 +257,13 @@
         bottom: 0;
         width: 1px;
         opacity: 0.5;
-        background: $mg-color-white;
+        background: rgb(var(--mg-color-white));
         pointer-events: none;
       }
 
       .mg-gallery--thumbnails-bottom & {
         border-left-color: transparent;
-        border-bottom-color: $mg-color-interactive;
+        border-bottom-color: rgb(var(--mg-color-interactive));
 
         &::after {
           top: auto;
@@ -277,7 +277,7 @@
     }
 
     &--html {
-      background: $mg-color-neutral-200;
+      background: rgb(var(--mg-color-neutral-200));
     }
   }
 
@@ -288,7 +288,7 @@
     width: 100%;
     height: 100%;
     font-size: $mg-font-size-400;
-    color: $mg-color-neutral-600;
+    color: rgb(var(--mg-color-neutral-600));
   }
 
   &__thumbnail-html-preview {
@@ -301,7 +301,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    background: $mg-color-neutral-50;
+    background: rgb(var(--mg-color-neutral-50));
   }
 
   &__thumbnail-html-content {
@@ -329,13 +329,13 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    width: $mg-spacing-200; // 20px
-    height: $mg-spacing-200;
+    width: var(--mg-spacing-200); // 20px
+    height: var(--mg-spacing-200);
     display: flex;
     align-items: center;
     justify-content: center;
     background: rgb(0 0 0 / 0.6);
-    color: $mg-color-white;
+    color: rgb(var(--mg-color-white));
     font-size: $mg-font-size-100; // 10px
     pointer-events: none;
     padding-left: 2px;
@@ -346,11 +346,11 @@
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
-    width: $mg-spacing-300;
-    height: $mg-spacing-300;
+    width: var(--mg-spacing-300);
+    height: var(--mg-spacing-300);
     border: none;
-    background: $mg-color-neutral-700;
-    color: $mg-color-white;
+    background: rgb(var(--mg-color-neutral-700));
+    color: rgb(var(--mg-color-white));
     font-size: $mg-font-size-400;
     cursor: pointer;
     z-index: 2; // nav button above gallery images — local to gallery stacking context
@@ -361,7 +361,7 @@
     @include transition(background-color 0.2s, opacity 0.2s);
 
     &:hover {
-      background: $mg-color-neutral-600;
+      background: rgb(var(--mg-color-neutral-600));
     }
 
     &:focus {
@@ -369,36 +369,36 @@
     }
 
     &:focus-visible {
-      outline: 2px solid $mg-color-interactive;
+      outline: 2px solid rgb(var(--mg-color-interactive));
       outline-offset: 2px;
     }
 
     &:disabled {
-      background: $mg-color-neutral-300;
+      background: rgb(var(--mg-color-neutral-300));
       cursor: not-allowed;
       opacity: 0.5;
     }
 
     &--prev {
-      left: $mg-spacing-100;
+      left: var(--mg-spacing-100);
     }
 
     &--next {
-      right: $mg-spacing-100;
+      right: var(--mg-spacing-100);
     }
 
     // Smaller arrows on mobile to avoid overlap with content
     @include devicebreak(small) {
-      width: $mg-spacing-250;
-      height: $mg-spacing-250;
+      width: var(--mg-spacing-250);
+      height: var(--mg-spacing-250);
       font-size: $mg-font-size-300;
 
       &--prev {
-        left: $mg-spacing-50;
+        left: var(--mg-spacing-50);
       }
 
       &--next {
-        right: $mg-spacing-50;
+        right: var(--mg-spacing-50);
       }
     }
   }
@@ -406,19 +406,19 @@
   // Corner arrow controls (bottom right position)
   &__arrow-controls {
     position: absolute;
-    bottom: $mg-spacing-100;
-    right: $mg-spacing-100;
+    bottom: var(--mg-spacing-100);
+    right: var(--mg-spacing-100);
     display: flex;
-    gap: $mg-spacing-100;
+    gap: var(--mg-spacing-100);
     z-index: 2; // arrow controls above gallery images — local to gallery stacking context
   }
 
   &__arrow-button {
-    width: $mg-spacing-300;
-    height: $mg-spacing-300;
+    width: var(--mg-spacing-300);
+    height: var(--mg-spacing-300);
     border: none;
-    background: $mg-color-neutral-700;
-    color: $mg-color-white;
+    background: rgb(var(--mg-color-neutral-700));
+    color: rgb(var(--mg-color-white));
     font-size: $mg-font-size-400;
     cursor: pointer;
     display: flex;
@@ -428,7 +428,7 @@
     @include transition(background-color 0.2s, opacity 0.2s);
 
     &:hover {
-      background: $mg-color-neutral-600;
+      background: rgb(var(--mg-color-neutral-600));
     }
 
     &:focus {
@@ -436,12 +436,12 @@
     }
 
     &:focus-visible {
-      outline: 2px solid $mg-color-interactive;
+      outline: 2px solid rgb(var(--mg-color-interactive));
       outline-offset: 2px;
     }
 
     &:disabled {
-      background: $mg-color-neutral-300;
+      background: rgb(var(--mg-color-neutral-300));
       cursor: not-allowed;
       opacity: 0.5;
     }
@@ -460,11 +460,11 @@
       border-right: 4px solid transparent;
 
       &:hover {
-        border-right-color: $mg-color-neutral-400;
+        border-right-color: rgb(var(--mg-color-neutral-400));
       }
 
       &--active {
-        border-right-color: $mg-color-interactive;
+        border-right-color: rgb(var(--mg-color-interactive));
 
         &::after {
           left: auto;
@@ -475,25 +475,25 @@
 
     &__arrow--prev {
       left: auto;
-      right: $mg-spacing-100;
+      right: var(--mg-spacing-100);
 
       @include devicebreak(small) {
-        right: $mg-spacing-50;
+        right: var(--mg-spacing-50);
       }
     }
 
     &__arrow--next {
       right: auto;
-      left: $mg-spacing-100;
+      left: var(--mg-spacing-100);
 
       @include devicebreak(small) {
-        left: $mg-spacing-50;
+        left: var(--mg-spacing-50);
       }
     }
 
     &__arrow-controls {
       right: auto;
-      left: $mg-spacing-100;
+      left: var(--mg-spacing-100);
     }
   }
 }

package/scss/Components/Hero/hero.scss

@@ -9,12 +9,12 @@
 .mg-hero {
   background-size: cover;
   background-position: center;
-  color: $mg-color-neutral-0;
+  color: rgb(var(--mg-color-neutral-0));
   display: grid;
   grid-template-columns: 1fr;
   position: relative;
   margin-left: calc(50% - (50vw)); // to expand out of the parent container
-  padding-left: $mg-spacing-100;
+  padding-left: var(--mg-spacing-100);
   width: 100vw;
 
   @media (min-width: $mg-breakpoint-tablet) {
@@ -30,44 +30,44 @@
   a.mg-button,
   a.mg-button:hover,
   a.mg-button:visited {
-    color: $mg-color-hero;
+    color: rgb(var(--mg-color-hero));
   }
 
   a.mg-button-primary {
-    background-color: $mg-color-neutral-0;
+    background-color: rgb(var(--mg-color-neutral-0));
   }
 
   a.mg-button-secondary,
   a.mg-button-secondary:hover,
   a.mg-button-secondary:visited {
-    background-color: $mg-color-hero-button-secondary-background;
-    color: $mg-color-hero-button-secondary-color;
-    border-color: $mg-border-color-hero-button-secondary;
+    background-color: var(--mg-color-hero-button-secondary-background);
+    color: rgb(var(--mg-color-hero-button-secondary-color));
+    border-color: rgb(var(--mg-border-color-hero-button-secondary));
   }
 
   a.mg-button:focus-visible {
-    box-shadow: 0 0 0 2px $mg-color-neutral-0;
-    outline: 2px solid $mg-color-neutral-0;
+    box-shadow: 0 0 0 2px rgb(var(--mg-color-neutral-0));
+    outline: 2px solid rgb(var(--mg-color-neutral-0));
     outline-offset: 2px;
   }
 
   &__overlay {
     align-items: center;
-    background-color: rgba($mg-color-hero, $mg-opacity-hero);
+    background-color: rgb(var(--mg-color-blue-900) / var(--mg-opacity-hero));
     display: grid;
-    margin: $mg-spacing-hero-overlay;
-    max-width: $mg-hero-overlay-max-width;
-    padding: $mg-hero-overlay-padding;
+    margin: var(--mg-spacing-hero-overlay);
+    max-width: var(--mg-hero-overlay-max-width);
+    padding: var(--mg-hero-overlay-padding);
   }
 
   &__content {
     display: grid;
-    margin-top: $mg-spacing-25;
+    margin-top: var(--mg-spacing-25);
     row-gap: mg-rem(10);
   }
 
   &__meta {
-    padding-bottom: $mg-spacing-25;
+    padding-bottom: var(--mg-spacing-25);
 
     &.meta-detail {
       display: flex;
@@ -80,8 +80,8 @@
     font-family: $mg-font-family-headings;
     font-size: $mg-font-tag;
     font-weight: bold;
-    margin-right: $mg-spacing-25;
-    padding: $mg-spacing-25 0;
+    margin-right: var(--mg-spacing-25);
+    padding: var(--mg-spacing-25) 0;
 
     &.detail {
       font-weight: normal;
@@ -92,13 +92,13 @@
   a,
   a:hover,
   a:visited {
-    color: $mg-color-neutral-0;
+    color: rgb(var(--mg-color-neutral-0));
   }
 
   // Title styles (for both <h1> and <a>)
   &__title {
-    color: $mg-color-hero-title;
-    margin-bottom: $mg-spacing-25;
+    color: rgb(var(--mg-color-hero-title));
+    margin-bottom: var(--mg-spacing-25);
     display: inline-block;
     font-family: $mg-font-family-headings;
     font-weight: bold;
@@ -108,7 +108,7 @@
     a,
     a:hover,
     a:visited {
-      color: $mg-color-hero-title;
+      color: rgb(var(--mg-color-hero-title));
     }
 
     // General text styles for larger text
@@ -135,7 +135,7 @@
     h4,
     h5,
     h6 {
-      color: $mg-color-hero-title;
+      color: rgb(var(--mg-color-hero-title));
       font-weight: bold;
       font-size: $mg-font-size-600;
 
@@ -161,14 +161,14 @@
   &__summaryText {
     @include mg-typography("small");
 
-    margin-bottom: $mg-spacing-25;
+    margin-bottom: var(--mg-spacing-25);
   }
 }
 
 .mg-hero__buttons {
-  padding-top: $mg-spacing-75;
+  padding-top: var(--mg-spacing-75);
   display: flex;
-  padding-bottom: $mg-spacing-50;
+  padding-bottom: var(--mg-spacing-50);
 }
 
 // Child variant
@@ -179,29 +179,29 @@
 }
 
 // Stylistic variants
-$variant-colours: (
-  "secondary": $mg-color-hero--secondary,
-  "tertiary": $mg-color-hero--tertiary,
-  "quaternary": $mg-color-hero--quaternary,
+$variant-colour-props: (
+  "secondary": "--mg-color-orange-800",
+  "tertiary":  "--mg-color-neutral-900",
+  "quaternary": "--mg-color-red-800",
 );
 
-@each $name, $color in $variant-colours {
+@each $name, $prop in $variant-colour-props {
   .mg-hero--#{$name} .mg-hero__overlay {
-    background-color: rgba($color, $mg-opacity-hero);
+    background-color: rgb(var(#{$prop}) / var(--mg-opacity-hero));
 
     a.mg-button,
     a.mg-button:hover,
     a.mg-button:visited {
-      color: #{$color};
+      color: rgb(var(#{$prop}));
     }
 
     // Preserve secondary button's dedicated tokens over the generic color above
     a.mg-button-secondary,
     a.mg-button-secondary:hover,
     a.mg-button-secondary:visited {
-      background-color: $mg-color-hero-button-secondary-background;
-      color: $mg-color-hero-button-secondary-color;
-      border-color: $mg-border-color-hero-button-secondary;
+      background-color: var(--mg-color-hero-button-secondary-background);
+      color: rgb(var(--mg-color-hero-button-secondary-color));
+      border-color: rgb(var(--mg-border-color-hero-button-secondary));
     }
   }
 }
@@ -209,7 +209,7 @@ $variant-colours: (
 // RTL tweaks (background layout only)
 [dir="rtl"] .mg-hero:not(.mg-hero--split) {
   margin-right: calc(50% - (50vw)); // to expand out of the parent container
-  padding-right: $mg-spacing-100;
+  padding-right: var(--mg-spacing-100);
 
   @media (min-width: $mg-breakpoint-tablet) {
     padding-right: calc(50vw - calc($mg-breakpoint-desktop / 2)); // to keep the overlay fixed
@@ -227,31 +227,31 @@ $variant-colours: (
 
   // Reset background-layout padding offsets
   padding-left: 0;
-  background-color: $mg-color-hero;
+  background-color: rgb(var(--mg-color-hero));
 
   // Button/CTA overrides (mirrors background layout, but scoped to split section
   // since there is no __overlay to target)
   a.mg-button,
   a.mg-button:hover,
   a.mg-button:visited {
-    color: $mg-color-hero;
+    color: rgb(var(--mg-color-hero));
   }
 
   a.mg-button-primary {
-    background-color: $mg-color-neutral-0;
+    background-color: rgb(var(--mg-color-neutral-0));
   }
 
   a.mg-button-secondary,
   a.mg-button-secondary:hover,
   a.mg-button-secondary:visited {
-    background-color: $mg-color-hero-button-secondary-background;
-    color: $mg-color-hero-button-secondary-color;
-    border-color: $mg-border-color-hero-button-secondary;
+    background-color: var(--mg-color-hero-button-secondary-background);
+    color: rgb(var(--mg-color-hero-button-secondary-color));
+    border-color: rgb(var(--mg-border-color-hero-button-secondary));
   }
 
   a.mg-button:focus-visible {
-    box-shadow: 0 0 0 2px $mg-color-neutral-0;
-    outline: 2px solid $mg-color-neutral-0;
+    box-shadow: 0 0 0 2px rgb(var(--mg-color-neutral-0));
+    outline: 2px solid rgb(var(--mg-color-neutral-0));
     outline-offset: 2px;
   }
 
@@ -286,7 +286,7 @@ $variant-colours: (
   .mg-hero__content {
     display: grid;
     row-gap: mg-rem(10);
-    padding: $mg-spacing-200 $mg-spacing-100;
+    padding: var(--mg-spacing-200) var(--mg-spacing-100);
     align-content: center;
   }
 
@@ -332,13 +332,13 @@ $variant-colours: (
         position: absolute;
         inset-inline: 0;
         inset-block-end: 0;
-        background: rgba($mg-color-neutral-900, 0.75);
-        color: $mg-color-neutral-0;
-        padding: $mg-spacing-50 $mg-spacing-100;
+        background: rgb(var(--mg-color-neutral-900) / 0.75);
+        color: rgb(var(--mg-color-neutral-0));
+        padding: var(--mg-spacing-50) var(--mg-spacing-100);
         display: flex;
         justify-content: space-between;
         align-items: center;
-        gap: $mg-spacing-100;
+        gap: var(--mg-spacing-100);
       }
     }
   }
@@ -359,14 +359,14 @@ $variant-colours: (
 }
 
 // Variant colours at full opacity for split (no rgba wrapper needed — no photo underneath)
-@each $name, $color in $variant-colours {
+@each $name, $prop in $variant-colour-props {
   .mg-hero--split.mg-hero--#{$name} {
-    background-color: $color;
+    background-color: rgb(var(#{$prop}));
 
     a.mg-button,
     a.mg-button:hover,
     a.mg-button:visited {
-      color: #{$color};
+      color: rgb(var(#{$prop}));
     }
   }
 }

package/scss/Components/HighlightBox/highlight-box.scss

@@ -21,18 +21,18 @@
 
 // Tone variants
 .mg-highlight-box--primary {
-  background: var(--button-color-background, #{$mg-color-blue-900});
+  background: var(--button-color-background, #{rgb(var(--mg-color-blue-900))});
 }
 
 .mg-highlight-box--secondary {
-  background: var(--tag-color-background-purple, #{$sendai-purple});
+  background: var(--tag-color-background-purple, var(--sendai-purple));
 }
 
 .mg-highlight-box.mg-highlight-box--primary,
 .mg-highlight-box.mg-highlight-box--secondary {
   border: none;
   box-shadow: inset 0 -8px 0 0 rgb(255 255 255 / 0.5);
-  color: $mg-color-white;
+  color: rgb(var(--mg-color-white));
 
   // Force every descendant to inherit the variant's white color. The double
   // class selector and descendant `*` give us specificity (0,2,1) so we beat