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

package/scss/Components/ScrollContainer/scroll-container.scss

@@ -13,48 +13,57 @@
   }
 
   &:has(.mg-scroll__nav) {
-    margin-top: 40px;
+    margin-bottom: mg-rem(56);
   }
 
   &__nav {
     position: absolute;
 
     // TODO: Review this and ensure it works across all containers
-    top: -40px;
-    right: 0;
+    bottom: mg-rem(-48);
+    inset-inline-end: 0;
     display: flex;
-    gap: $mg-spacing-50;
+    gap: var(--mg-spacing-50);
     z-index: 1; // scroll nav above container content — local to scroll-container stacking context
 
     &-button {
-      width: $mg-spacing-300;
-      height: $mg-spacing-300;
+      width: mg-rem(44);
+      height: mg-rem(44);
       border: none;
-      border-radius: 4px;
-      background: $mg-color-neutral-700;
-      color: $mg-color-white;
+      border-radius: 50%;
+      background: rgb(var(--mg-color-interactive) / 0.06);
+      color: rgb(var(--mg-color-interactive));
       font-size: $mg-font-size-300;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
 
-      @include transition(background-color 0.2s, opacity 0.2s);
+      @media (prefers-reduced-motion: no-preference) {
+        transition:
+          background-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);
+      }
 
       &:hover {
-        background: $mg-color-neutral-600;
+        background: rgb(var(--mg-color-interactive));
+        color: rgb(var(--mg-color-neutral-0));
+      }
+
+      &:focus-visible {
+        @include mg-focus-ring;
       }
 
-      &:focus {
-        outline: none;
-        box-shadow:
-          0 0 0 2px $mg-color-white,
-          0 0 0 4px $mg-color-neutral-700;
+      &:active {
+        scale: 0.96;
       }
 
       &:disabled {
-        background: $mg-color-neutral-300;
-        cursor: not-allowed;
+        background: rgb(var(--mg-color-interactive) / 0.03);
+        color: rgb(var(--mg-color-neutral-500));
+        cursor: default;
       }
     }
   }
@@ -62,18 +71,20 @@
   &__container {
     display: block;
     overflow-x: auto;
-    overflow-y: auto;
+    overflow-y: hidden;
     width: 100%;
     max-width: 100%;
     max-height: inherit;
     position: relative;
     cursor: grab;
+    scroll-snap-type: inline proximity;
     -webkit-overflow-scrolling: touch;
 
     // TODO: Review - do we need it
     // Firefox 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));
 
     @include devicebreak(small) {
       height: auto;
@@ -93,20 +104,20 @@
 
     // Custom scrollbar styling
     &::-webkit-scrollbar {
-      height: $mg-spacing-50;
+      height: var(--mg-spacing-50);
     }
 
     &::-webkit-scrollbar-track {
-      background: $mg-color-neutral-100;
-      border-radius: 4px;
+      background: rgb(var(--mg-color-neutral-100));
+      border-radius: var(--mg-radius-form-input);
     }
 
     &::-webkit-scrollbar-thumb {
-      background: $mg-color-neutral-500;
-      border-radius: 4px;
+      background: rgb(var(--mg-color-neutral-500));
+      border-radius: var(--mg-radius-form-input);
 
       &:hover {
-        background: $mg-color-neutral-600;
+        background: rgb(var(--mg-color-neutral-600));
       }
     }
 
@@ -139,30 +150,39 @@
     align-items: flex-start;
     display: flex;
     flex-wrap: nowrap;
+    gap: var(--mg-spacing-150);
     height: auto;
 
     @include devicebreak(small) {
-      gap: $mg-spacing-100;
+      gap: var(--mg-spacing-100);
       height: auto;
       min-height: auto;
     }
   }
 
+  &__content--stretch {
+    align-items: stretch;
+
+    .mg-scroll__item-wrapper {
+      display: flex;
+
+      > * {
+        width: 100%;
+      }
+    }
+  }
+
   &__item-wrapper {
     width: var(--scroll-item-width, 300px);
     min-width: var(--scroll-item-width, 300px);
     flex-shrink: 0;
-    margin-right: $mg-spacing-300;
     white-space: normal;
     overflow-wrap: break-word;
+    scroll-snap-align: start;
 
     @include devicebreak(small) {
       display: inline-block;
       vertical-align: top;
     }
-
-    &:last-child {
-      margin-right: 0;
-    }
   }
 }

package/scss/Components/Snackbar/snackbar.scss

@@ -8,7 +8,7 @@
   justify-content: center;
   transform: translate(-50%, -300%);
   transition: transform 0.3s ease-in-out;
-  z-index: $mg-z-index-toast; // above modals and all page chrome
+  z-index: var(--mg-z-index-toast); // above modals and all page chrome
   width: calc(100% - 32px); // Ensure it works on small screens
   max-width: 600px; // Limit width on large screens
 
@@ -25,24 +25,18 @@
 .mg-snackbar {
   display: flex;
   align-items: center;
-  background-color: $mg-color-interactive;
-  color: $mg-color-white;
-  border-radius: $mg-radius-tab;
-  padding: $mg-padding-button;
+  background-color: rgb(var(--mg-color-interactive));
+  color: rgb(var(--mg-color-white));
+  border-radius: var(--mg-radius-tab);
+  padding: var(--mg-padding-button);
   box-shadow: 0 0 10px rgb(0 0 0 / 0.2);
-  fill: $mg-color-white;
+  fill: rgb(var(--mg-color-white));
   width: 100%;
 
-  // Ensure appropriate color contrast for accessibility
-  &__error {
-    background-color: $mg-color-red-900;
-    color: $mg-color-white; // Ensure text is readable
-  }
-
   // severity - use colors with sufficient contrast ratio
   &__error {
-    background-color: $mg-color-red-900;
-    color: $mg-color-white;
+    background-color: rgb(var(--mg-color-red-900));
+    color: rgb(var(--mg-color-white));
   }
 
   &__warning {
@@ -51,28 +45,26 @@
       $lightness: -10%
     ); // Dark amber color for warning state
 
-    color: $mg-color-white; // Use white text to be consistent with other severity types
+    color: rgb(
+      var(--mg-color-white)
+    ); // Use white text to be consistent with other severity types
   }
 
   &__info {
-    background-color: $mg-color-interactive;
-    color: $mg-color-white;
+    background-color: rgb(var(--mg-color-interactive));
+    color: rgb(var(--mg-color-white));
   }
 
   &__success {
-    background-color: color.adjust(
-      $mg-color-interactive,
-      $lightness: -5%
-    ); // Slightly darker for better distinction
-
-    color: $mg-color-white;
+    background-color: #14527a; // Slightly darker for better distinction (blue-900 darkened 5% lightness)
+    color: rgb(var(--mg-color-white));
   }
 
   &__content {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    gap: $mg-spacing-100;
+    gap: var(--mg-spacing-100);
     width: 100%;
 
     @media (max-width: $mg-breakpoint-mobile) {
@@ -82,7 +74,7 @@
 
       // On mobile, make the close button span the full width
       .mg-button {
-        margin-top: $mg-spacing-100;
+        margin-top: var(--mg-spacing-100);
         width: 100%;
         min-height: 44px; // Ensure touchable area is large enough
       }
@@ -90,7 +82,7 @@
   }
 
   &__message {
-    margin-right: $mg-spacing-200;
+    margin-inline-end: var(--mg-spacing-200);
     flex: 1; // Allow message to take up available space
     overflow-wrap: break-word; // Prevent overflow of long words
   }
@@ -98,15 +90,16 @@
   // Make button larger on touch devices for better usability
   .mg-button {
     min-width: 88px;
-    min-height: 36px;
-    padding: $mg-spacing-50 $mg-spacing-150;
+    min-height: 44px;
+    padding: var(--mg-spacing-50) var(--mg-spacing-150);
     font-weight: bold;
     cursor: pointer;
-    border-radius: 4px;
+    border-radius: var(--mg-radius-button);
     border: 1px solid rgb(255 255 255 / 0.5);
     background-color: rgb(255 255 255 / 0.1);
     color: inherit;
-    transition: background-color 0.2s ease;
+    transition: background-color var(--mg-motion-duration-fast)
+      var(--mg-motion-easing-standard);
 
     &:hover {
       background-color: rgb(255 255 255 / 0.2);
@@ -117,7 +110,7 @@
     }
 
     &:focus-visible {
-      outline: 2px solid $mg-color-white;
+      outline: 2px solid rgb(var(--mg-color-white));
       outline-offset: 2px;
     }