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

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,8 +76,7 @@
     outline: none;
 
     &::after {
-      outline: 2px solid $mg-color-interactive;
-      outline-offset: 2px;
+      @include mg-focus-ring;
     }
   }
 
@@ -85,9 +84,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 +95,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 +108,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,8 +119,7 @@
       }
 
       &:focus {
-        outline: 2px solid $mg-color-interactive;
-        outline-offset: 2px;
+        @include mg-focus-ring;
       }
     }
   }
@@ -135,10 +133,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 +164,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 +176,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 +215,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 +224,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

@@ -1,81 +1,82 @@
-// Commented out until we decide if we want to use the cascade or fork the classes
-// #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-btn-primary-color: #fff;
-//   --cc-btn-primary-border-color: #{$mg-color-interactive};
-//   --cc-btn-primary-hover-bg: #{$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-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-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-modal-border-radius: 0;
-//   --cc-btn-border-radius: 0;
-//   --cc-pm-toggle-border-radius: 4em;
+// Mangrove theme bridge for the externally loaded vanilla-cookieconsent UI.
+// The CDN stylesheet is appended after the local bundle and declares the same
+// custom properties, so these token mappings intentionally carry importance.
+#cc-main {
+  --cc-bg: var(--mg-surface-raised) !important;
+  --cc-primary-color: rgb(var(--mg-color-text)) !important;
+  --cc-secondary-color: rgb(var(--mg-color-neutral-600)) !important;
+  --cc-btn-primary-bg: rgb(var(--mg-color-interactive)) !important;
+  --cc-btn-primary-color: rgb(var(--mg-color-neutral-0)) !important;
+  --cc-btn-primary-border-color: rgb(var(--mg-color-interactive)) !important;
+  --cc-btn-primary-hover-bg: rgb(var(--mg-color-interactive-active)) !important;
+  --cc-btn-primary-hover-color: rgb(var(--mg-color-neutral-0)) !important;
+  --cc-btn-secondary-bg: rgb(var(--mg-color-neutral-50)) !important;
+  --cc-btn-secondary-color: rgb(var(--mg-color-text)) !important;
+  --cc-btn-secondary-border-color: rgb(var(--mg-color-neutral-200)) !important;
+  --cc-btn-secondary-hover-bg: rgb(var(--mg-color-neutral-100)) !important;
+  --cc-btn-secondary-hover-color: rgb(var(--mg-color-text)) !important;
+  --cc-toggle-on-bg: rgb(var(--mg-color-interactive)) !important;
+  --cc-toggle-off-bg: rgb(var(--mg-color-neutral-400)) !important;
+  --cc-toggle-readonly-bg: rgb(var(--mg-color-neutral-200)) !important;
+  --cc-cookie-category-block-bg: rgb(var(--mg-color-neutral-50)) !important;
+  --cc-cookie-category-block-hover-bg: rgb(
+    var(--mg-color-neutral-100)
+  ) !important;
+  --cc-section-border: rgb(var(--mg-color-neutral-200)) !important;
+  --cc-cookie-table-border: rgb(var(--mg-color-neutral-200)) !important;
+  --cc-separator-border-color: rgb(var(--mg-color-neutral-200)) !important;
+  --cc-overlay-bg: rgb(var(--mg-color-neutral-900) / 0.82) !important;
+  --cc-font-family: #{$mg-font-family} !important;
+  --cc-modal-border-radius: var(--mg-card-border-radius) !important;
+  --cc-btn-border-radius: var(--mg-radius-button) !important;
 
-//   // Custom link styles
-//   .cc__link,
-//   a {
-//     color: #{$mg-color-interactive};
-//     text-decoration: underline;
+  .cc__link,
+  a {
+    color: rgb(var(--mg-color-interactive));
+    text-decoration: underline;
+    text-underline-offset: 0.16em;
 
-//     &:hover {
-//       color: #{$mg-color-interactive-active};
-//     }
-//   }
+    &:hover {
+      color: rgb(var(--mg-color-interactive-active));
+    }
+  }
 
-//   // Bottom bar consent modal customization
-//   #cm.bar {
-//     border-top: 1px solid #{$mg-color-neutral-100};
-//     box-shadow: 0 -2px 10px rgb(0 0 0 / 0.1);
+  .c-bn,
+  .cm__btn,
+  .pm__btn {
+    font-family: $mg-font-family;
+    font-weight: 600;
 
-//     .c-bn {
-//       font-weight: 500;
-//     }
-//   }
+    @media (prefers-reduced-motion: no-preference) {
+      transition:
+        background-color var(--mg-motion-duration-fast)
+          var(--mg-motion-easing-standard),
+        border-color 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);
+    }
 
-//   // Preferences modal customization
-//   #s-cnt {
-//     .b-bn {
-//       font-weight: 500;
-//     }
+    &:active {
+      scale: 0.96;
+    }
 
-//     .pm__badge {
-//       padding: #{$mg-spacing-25} #{$mg-spacing-50};
-//       background: #{$mg-color-interactive};
-//       color: #fff;
-//       font-size: 0.8rem;
-//       border-radius: 2px;
-//       margin-left: #{$mg-spacing-50};
-//     }
-//   }
+    &:focus-visible {
+      @include mg-focus-ring;
+    }
+  }
 
-//   // Toggle switches
-//   .c-tgl {
-//     &:checked {
-//       + .c-tgl-btn {
-//         background-color: var(--cc-toggle-on-bg);
-//       }
-//     }
-//   }
-// }
+  #cm.bar,
+  .cm--bar {
+    border-block-start: 1px solid rgb(var(--mg-color-neutral-600) / 0.2);
+    box-shadow: 0 -8px 24px rgb(var(--mg-color-neutral-900) / 0.08);
+  }
+}
+
+:lang(ar) #cc-main {
+  .c-bn,
+  .cm__btn,
+  .pm__btn {
+    font-family: $mg-font-family-arabic-body;
+  }
+}

package/scss/Components/ErrorPages/error-pages.scss

@@ -1,11 +1,11 @@
 .mg-error-page {
   min-height: 100vh;
-  background-color: $mg-color-blue-900;
-  color: $mg-color-text;
+  background-color: rgb(var(--mg-color-blue-900));
+  color: rgb(var(--mg-color-text));
   padding-bottom: mg-rem(20);
 
   h1 {
-    color: $mg-color-blue-900;
+    color: rgb(var(--mg-color-blue-900));
     font-size: mg-rem(14);
     padding: 0;
     margin: 0;
@@ -18,13 +18,13 @@
     align-items: center;
 
     input[type="search"] {
-      border: 1px solid $mg-color-neutral-100;
+      border: 1px solid rgb(var(--mg-color-neutral-100));
       max-width: 300px;
     }
   }
 
   &__container {
-    background: $mg-color-neutral-0;
+    background: rgb(var(--mg-color-neutral-0));
     padding: mg-rem(20) mg-rem(15) mg-rem(10);
     max-width: 900px;
     margin: mg-rem(20) auto;
@@ -40,15 +40,15 @@
   }
 
   &--challenge {
-    background-color: $mg-color-neutral-25;
+    background-color: rgb(var(--mg-color-neutral-25));
 
     .mg-error-page__container {
       text-align: center;
       padding: mg-rem(30) mg-rem(25) mg-rem(20);
       margin-top: mg-rem(40);
       max-width: 540px;
-      border-radius: 8px;
-      box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
+      border-radius: var(--mg-card-border-radius);
+      box-shadow: var(--mg-card-shadow);
     }
 
     .undrr-logo {
@@ -61,7 +61,7 @@
     h1 {
       font-size: mg-rem(23);
       font-weight: 600;
-      color: $mg-color-text;
+      color: rgb(var(--mg-color-text));
       margin: 0 0 mg-rem(5);
     }
   }

package/scss/Components/Footer/footer.scss

@@ -4,13 +4,13 @@
 
 .mg-footer--about-footer {
   text-wrap: balance;
-  color: $mg-color-white;
-  padding-bottom: $mg-spacing-200;
-  padding-top: $mg-spacing-200;
+  color: rgb(var(--mg-color-white));
+  padding-bottom: var(--mg-spacing-200);
+  padding-top: var(--mg-spacing-200);
 
   a,
   a:hover {
-    color: $mg-color-white;
+    color: rgb(var(--mg-color-white));
   }
 
   .container {
@@ -40,26 +40,26 @@
 // Utility footer bar — secondary navigation below the main footer
 // Used by sub-branded sites (e.g. DELTA) for product-level links
 .mg-footer-bar {
-  border-top: 1px solid $mg-color-neutral-200;
-  padding: $mg-spacing-150 0;
+  border-top: 1px solid rgb(var(--mg-color-neutral-200));
+  padding: var(--mg-spacing-150) 0;
   font-size: $mg-font-size-300;
-  color: $mg-color-neutral-600;
+  color: rgb(var(--mg-color-neutral-600));
 
   &__row {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
     align-items: center;
-    gap: $mg-spacing-100;
+    gap: var(--mg-spacing-100);
   }
 
   &__links {
     display: flex;
     flex-wrap: wrap;
-    gap: $mg-spacing-50 $mg-spacing-200;
+    gap: var(--mg-spacing-50) var(--mg-spacing-200);
 
     a {
-      color: $mg-color-interactive;
+      color: rgb(var(--mg-color-interactive));
     }
   }
 
@@ -70,8 +70,8 @@
 
   &__divider {
     border: 0;
-    border-top: 1px solid $mg-color-neutral-200;
-    margin: $mg-spacing-100 0;
+    border-top: 1px solid rgb(var(--mg-color-neutral-200));
+    margin: var(--mg-spacing-100) 0;
   }
 }
 

package/scss/Components/Forms/FormAction/form-action.scss

@@ -0,0 +1,50 @@
+.mg-form-action {
+  align-items: stretch;
+  display: flex;
+  margin-top: var(--mg-spacing-25);
+  max-width: 100%;
+
+  &__control {
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
+    flex: 1 1 auto;
+    margin-top: 0;
+    min-width: 0;
+  }
+
+  > .mg-button.mg-form-action__action,
+  &__action {
+    align-self: stretch;
+    border-end-start-radius: 0;
+    border-start-start-radius: 0;
+    flex: 0 0 auto;
+    margin-inline-start: -1px;
+    min-height: mg-rem(46);
+    position: relative;
+  }
+
+  &__control:focus-visible,
+  &__action:focus-visible {
+    z-index: 1;
+  }
+
+  &--stack-mobile {
+    @media (width <= $mg-breakpoint-mobile) {
+      flex-direction: column;
+      gap: var(--mg-spacing-50);
+
+      .mg-form-action__control {
+        border-radius: var(--mg-radius-form-input);
+        margin-inline-start: 0;
+        width: 100%;
+      }
+
+      > .mg-button.mg-form-action__action,
+      .mg-form-action__action {
+        border-radius: var(--mg-radius-button);
+        margin-inline-start: 0;
+        width: 100%;
+      }
+    }
+  }
+}

package/scss/Components/Forms/FormGroup/form-group.scss

@@ -1,24 +1,35 @@
 // FormGroup — styled fieldset/legend for grouping related form controls.
 
 .mg-form-group {
-  border: 0;
-  margin: 0;
+  background: rgb(var(--mg-color-neutral-50) / 0.65);
+  border: 1px solid rgb(var(--mg-color-neutral-600) / 0.18);
+  border-radius: var(--mg-radius-form-input);
+  margin: 0 0 var(--mg-spacing-100);
   min-width: 0;
-  padding: 0;
+  padding: var(--mg-spacing-100);
 
   &__legend {
     @extend %paragraph-font-300;
 
     display: block;
-    margin-bottom: $mg-spacing-50;
-    padding: 0;
+    margin-bottom: var(--mg-spacing-25);
+    padding: 0 var(--mg-spacing-25);
   }
 
   &--disabled &__legend {
-    color: $mg-color-neutral-400;
+    color: rgb(var(--mg-color-neutral-400));
+  }
+
+  &--disabled {
+    background: rgb(var(--mg-color-neutral-50) / 0.35);
+    border-color: rgb(var(--mg-color-neutral-400) / 0.35);
   }
 
   &--error &__legend {
-    color: $mg-color-red-900;
+    color: rgb(var(--mg-color-red-900));
+  }
+
+  &--error {
+    border-color: rgb(var(--mg-color-red-900));
   }
 }

package/scss/Components/Forms/Select/select.scss

@@ -4,7 +4,7 @@
 [dir="rtl"] {
   .mg-form-select {
     background-position: left mg-rem(6.25) center;
-    padding-left: $mg-spacing-200;
+    padding-left: var(--mg-spacing-200);
     padding-right: mg-rem(6.25);
   }
 }

package/scss/Components/Forms/TextInput/text-input.scss

@@ -2,7 +2,7 @@
 // Shared form styles live in _form-base.scss.
 
 .mg-form-input[type="date"] {
-  color: $mg-color-neutral-500;
+  color: rgb(var(--mg-color-neutral-500));
 
   &::-webkit-calendar-picker-indicator {
     appearance: none;