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

package/scss/Components/Pager/pager.scss

@@ -3,9 +3,9 @@
 // ========================================
 
 .mg-pager {
-  margin-top: $mg-spacing-200;
-  padding-top: $mg-spacing-150;
-  border-top: 1px solid $mg-color-neutral-50;
+  margin-top: var(--mg-spacing-200);
+  padding-top: var(--mg-spacing-150);
+  border-top: 1px solid rgb(var(--mg-color-neutral-600) / 0.16);
 }
 
 // ----------------------------------------
@@ -17,7 +17,7 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
-  gap: $mg-spacing-25;
+  gap: var(--mg-spacing-50);
   list-style: none;
   margin: 0;
   padding: 0;
@@ -30,7 +30,7 @@
   &--ellipsis {
     display: flex;
     align-items: center;
-    padding: 0 $mg-spacing-25;
+    padding: 0 var(--mg-spacing-25);
   }
 }
 
@@ -38,54 +38,60 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 40px;
-  min-height: 40px;
-  padding: $mg-spacing-50;
+  min-width: mg-rem(44);
+  min-height: mg-rem(44);
+  padding: 0;
   font-size: $mg-font-size-200;
-  font-weight: 500;
-  color: $mg-color-text;
-  background: #fff;
-  border: 1px solid $mg-color-neutral-100;
-  border-radius: $mg-spacing-25;
+  font-weight: 600;
+  color: rgb(var(--mg-color-text));
+  background: transparent;
+  border: 0;
+  border-radius: 50%;
   cursor: pointer;
-  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
+
+  @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:not(:disabled, .mg-pager__link--disabled) {
-    background: $mg-color-blue-50;
-    border-color: $mg-color-interactive;
-    color: $mg-color-interactive;
+    background: rgb(var(--mg-color-interactive) / 0.08);
+    color: rgb(var(--mg-color-interactive-active));
+    text-decoration: none;
   }
 
   &:focus-visible {
-    outline: 2px solid $mg-color-interactive;
-    outline-offset: 2px;
+    @include mg-focus-ring;
+  }
+
+  &:active:not(:disabled, .mg-pager__link--disabled, .mg-pager__link--current) {
+    scale: 0.96;
   }
 
   &--current {
-    color: #fff;
-    background: $mg-color-interactive;
-    border-color: $mg-color-interactive;
+    color: rgb(var(--mg-color-text));
+    background: rgb(var(--mg-color-interactive) / 0.12);
     cursor: default;
 
     &:hover {
-      background: $mg-color-interactive;
-      color: #fff;
+      background: rgb(var(--mg-color-interactive) / 0.12);
+      color: rgb(var(--mg-color-text));
     }
   }
 
   &--disabled,
   &:disabled {
-    color: $mg-color-neutral-500;
-    background: $mg-color-neutral-50;
-    border-color: $mg-color-neutral-50;
+    color: rgb(var(--mg-color-neutral-500));
+    background: rgb(var(--mg-color-neutral-100) / 0.7);
     cursor: not-allowed;
-    opacity: 0.5;
   }
 
   &--prev,
   &--next {
-    gap: $mg-spacing-25;
-    padding: $mg-spacing-50 $mg-spacing-75;
+    background: rgb(var(--mg-color-interactive) / 0.06);
   }
 }
 
@@ -94,13 +100,19 @@
 }
 
 .mg-pager__text {
-  @media (width <= 480px) {
-    display: none;
-  }
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }
 
 .mg-pager__ellipsis {
-  color: $mg-color-neutral-500;
+  color: rgb(var(--mg-color-neutral-500));
   font-size: $mg-font-size-200;
 }
 
@@ -112,7 +124,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  gap: $mg-spacing-100;
+  gap: var(--mg-spacing-100);
 
   @media (width >= $mg-breakpoint-tablet) {
     flex-direction: row;
@@ -126,7 +138,7 @@
 
 .mg-pager__range {
   margin: 0;
-  color: $mg-color-neutral-500;
+  color: rgb(var(--mg-color-neutral-500));
   font-size: $mg-font-size-200;
   white-space: nowrap;
 }
@@ -138,30 +150,32 @@
 .mg-pager__jump {
   display: inline-flex;
   align-items: center;
-  gap: $mg-spacing-50;
+  gap: var(--mg-spacing-50);
   margin: 0;
 }
 
 .mg-pager__jump-label {
-  color: $mg-color-neutral-500;
+  color: rgb(var(--mg-color-neutral-500));
   font-size: $mg-font-size-200;
   white-space: nowrap;
 }
 
 .mg-pager__jump-input {
   width: 4em;
-  min-height: 40px;
-  padding: $mg-spacing-25 $mg-spacing-50;
+  min-height: mg-rem(44);
+  padding: var(--mg-spacing-25) var(--mg-spacing-50);
   font-size: $mg-font-size-200;
-  color: $mg-color-text;
-  background: #fff;
-  border: 1px solid $mg-color-neutral-100;
-  border-radius: $mg-spacing-25;
+  color: rgb(var(--mg-color-text));
+  background: rgb(var(--mg-color-neutral-50));
+  border: 1px solid rgb(var(--mg-color-neutral-600) / 0.22);
+  border-radius: var(--mg-radius-form-input);
   text-align: center;
 
   &:focus-visible {
-    outline: 2px solid $mg-color-interactive;
-    outline-offset: 2px;
+    background: rgb(var(--mg-color-neutral-0));
+    border-color: rgb(var(--mg-color-interactive));
+
+    @include mg-focus-ring;
   }
 }
 
@@ -169,25 +183,34 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 40px;
-  padding: $mg-spacing-25 $mg-spacing-75;
+  min-height: mg-rem(44);
+  padding: var(--mg-spacing-25) var(--mg-spacing-75);
   font-size: $mg-font-size-200;
   font-weight: 500;
-  color: #fff;
-  background: $mg-color-interactive;
-  border: 1px solid $mg-color-interactive;
-  border-radius: $mg-spacing-25;
+  color: rgb(var(--mg-color-neutral-0));
+  background: rgb(var(--mg-color-interactive));
+  border: 1px solid rgb(var(--mg-color-interactive));
+  border-radius: var(--mg-radius-button);
   cursor: pointer;
-  transition: background-color 0.15s;
+
+  @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),
+      scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
+  }
 
   &:hover:not(:disabled) {
-    background: $mg-color-interactive-active;
-    border-color: $mg-color-interactive-active;
+    background: rgb(var(--mg-color-interactive-active));
+    border-color: rgb(var(--mg-color-interactive-active));
   }
 
   &:focus-visible {
-    outline: 2px solid $mg-color-interactive;
-    outline-offset: 2px;
+    @include mg-focus-ring;
+  }
+
+  &:active:not(:disabled) {
+    scale: 0.96;
   }
 
   &:disabled {
@@ -202,27 +225,27 @@
 
 .mg-pager__notice {
   text-align: center;
-  color: $mg-color-neutral-500;
+  color: rgb(var(--mg-color-neutral-500));
   font-size: $mg-font-size-200;
-  padding: $mg-spacing-100 0;
+  padding: var(--mg-spacing-100) 0;
 }
 
 .mg-pager__notice-action {
   display: inline;
   padding: 0;
   font: inherit;
-  color: $mg-color-interactive;
+  color: rgb(var(--mg-color-interactive));
   background: none;
   border: none;
   cursor: pointer;
   text-decoration: underline;
 
   &:hover {
-    color: $mg-color-interactive-active;
+    color: rgb(var(--mg-color-interactive-active));
   }
 
   &:focus-visible {
-    outline: 2px solid $mg-color-interactive;
+    outline: 2px solid rgb(var(--mg-color-interactive));
     outline-offset: 2px;
   }
 }

package/scss/Components/PreviewAccess/preview-access.scss

@@ -21,12 +21,12 @@ html:has(body [data-mg-preview-access]:not(.mg-preview-access--unlocked)) {
   &__overlay {
     position: fixed;
     inset: 0;
-    z-index: $mg-z-index-modal;
+    z-index: var(--mg-z-index-modal);
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: $mg-spacing-200;
-    background: $mg-color-modal-scrim;
+    padding: var(--mg-spacing-200);
+    background: var(--mg-color-modal-scrim);
 
     // Re-assert visibility against the gate rule above, which uses !important
     // to win over any component-level visibility overrides on body siblings.
@@ -36,39 +36,39 @@ html:has(body [data-mg-preview-access]:not(.mg-preview-access--unlocked)) {
   &__modal {
     width: 100%;
     max-width: mg-rem(480);
-    padding: $mg-spacing-350;
-    background: $mg-color-white;
+    padding: var(--mg-spacing-350);
+    background: rgb(var(--mg-color-white));
 
     // Sharp-cornered to match Mangrove chrome (Hero, PageHeader, Cards).
     border-radius: 0;
-    border-top: mg-rem(4) solid $mg-color-interactive;
+    border-top: mg-rem(4) solid rgb(var(--mg-color-interactive));
     box-shadow: 0 mg-rem(8) mg-rem(32) rgb(0 0 0 / 0.25);
   }
 
   // Eyebrow uses a neutral colour so it passes 4.5:1 across all five themes.
   // Brand identity is carried by the top accent border and the submit button.
   &__eyebrow {
-    margin: 0 0 $mg-spacing-50;
+    margin: 0 0 var(--mg-spacing-50);
     font-family: $mg-font-family-headings;
     font-size: $mg-font-size-250;
     font-weight: 700;
-    color: $mg-color-neutral-700;
+    color: rgb(var(--mg-color-neutral-700));
   }
 
   &__title {
-    margin: 0 0 $mg-spacing-150;
+    margin: 0 0 var(--mg-spacing-150);
     font-family: $mg-font-family-headings;
     font-size: $mg-font-size-500;
     line-height: 1.2;
-    color: $mg-color-neutral-800;
+    color: rgb(var(--mg-color-neutral-800));
   }
 
   &__body {
-    margin: 0 0 $mg-spacing-250;
+    margin: 0 0 var(--mg-spacing-250);
     font-family: $mg-font-family;
     font-size: $mg-font-size-300;
     line-height: 1.5;
-    color: $mg-color-neutral-700;
+    color: rgb(var(--mg-color-neutral-700));
   }
 
   &__form {
@@ -77,80 +77,80 @@ html:has(body [data-mg-preview-access]:not(.mg-preview-access--unlocked)) {
 
   &__label {
     display: block;
-    margin: 0 0 $mg-spacing-50;
+    margin: 0 0 var(--mg-spacing-50);
     font-family: $mg-font-family-headings;
     font-size: $mg-font-size-300;
     font-weight: 700;
-    color: $mg-color-neutral-700;
+    color: rgb(var(--mg-color-neutral-700));
   }
 
   &__field {
     display: flex;
-    gap: $mg-spacing-50;
-    margin: 0 0 $mg-spacing-50;
+    gap: var(--mg-spacing-50);
+    margin: 0 0 var(--mg-spacing-50);
   }
 
   &__input {
     flex: 1;
     min-width: 0;
-    padding: $mg-spacing-100 $mg-spacing-150;
+    padding: var(--mg-spacing-100) var(--mg-spacing-150);
     font-family: $mg-font-family;
     font-size: $mg-font-size-300;
-    color: $mg-color-neutral-800;
-    background: $mg-color-white;
-    border: 1px solid $mg-color-neutral-200;
+    color: rgb(var(--mg-color-neutral-800));
+    background: rgb(var(--mg-color-white));
+    border: 1px solid rgb(var(--mg-color-neutral-200));
     border-radius: 0;
 
     &:focus {
-      outline: 2px solid $mg-color-form-focus;
+      outline: 2px solid rgb(var(--mg-color-form-focus));
       outline-offset: 2px;
-      border-color: $mg-color-form-focus;
+      border-color: rgb(var(--mg-color-form-focus));
     }
   }
 
   &__submit {
-    padding: $mg-spacing-100 $mg-spacing-200;
+    padding: var(--mg-spacing-100) var(--mg-spacing-200);
     font-family: $mg-font-family-headings;
     font-size: $mg-font-size-300;
     font-weight: 600;
-    color: $mg-color-white;
-    background: $mg-color-interactive;
+    color: rgb(var(--mg-color-white));
+    background: rgb(var(--mg-color-interactive));
     border: 0;
     border-radius: 0;
     cursor: pointer;
 
-    // $mg-color-interactive-active equals $mg-color-interactive in several
+    // rgb(var(--mg-color-interactive-active)) equals rgb(var(--mg-color-interactive)) in several
     // themes (PW, IRP, MCR, DELTA), so layer a brightness shift to ensure
     // the hover affordance is visible everywhere.
     &:hover {
-      background: $mg-color-interactive-active;
+      background: rgb(var(--mg-color-interactive-active));
       filter: brightness(0.92);
     }
 
     &:focus-visible {
-      outline: 2px solid $mg-color-form-focus;
+      outline: 2px solid rgb(var(--mg-color-form-focus));
       outline-offset: 2px;
     }
   }
 
   &__error {
-    min-height: $mg-spacing-200;
-    margin: 0 0 $mg-spacing-150;
+    min-height: var(--mg-spacing-200);
+    margin: 0 0 var(--mg-spacing-150);
     font-family: $mg-font-family;
     font-size: $mg-font-size-250;
-    color: $mg-color-red-900;
+    color: rgb(var(--mg-color-red-900));
   }
 
   &__contact {
     margin: 0;
-    padding-top: $mg-spacing-150;
+    padding-top: var(--mg-spacing-150);
     font-family: $mg-font-family;
     font-size: $mg-font-size-250;
-    color: $mg-color-neutral-600;
-    border-top: 1px solid $mg-color-neutral-100;
+    color: rgb(var(--mg-color-neutral-600));
+    border-top: 1px solid rgb(var(--mg-color-neutral-100));
 
     a {
-      color: $mg-color-interactive;
+      color: rgb(var(--mg-color-interactive));
       text-decoration: underline;
     }
   }

package/scss/Components/QuoteHighlight/quote-highlight.scss

@@ -1,7 +1,7 @@
 .mg-quote-highlight {
   display: flex;
   flex-direction: column;
-  border-radius: $mg-spacing-50;
+  border-radius: var(--mg-spacing-50);
   overflow: hidden;
   box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
 
@@ -15,13 +15,13 @@
   // Alignment variants
   &--full {
     width: 100%;
-    margin-bottom: $mg-spacing-400;
+    margin-bottom: var(--mg-spacing-400);
   }
 
   &--left {
     float: left;
-    margin-right: $mg-spacing-400;
-    margin-bottom: $mg-spacing-400;
+    margin-right: var(--mg-spacing-400);
+    margin-bottom: var(--mg-spacing-400);
     width: 100%;
 
     @include devicebreak(medium) {
@@ -32,14 +32,14 @@
     [dir="rtl"] & {
       float: right;
       margin-right: 0;
-      margin-left: $mg-spacing-400;
+      margin-left: var(--mg-spacing-400);
     }
   }
 
   &--right {
     float: right;
-    margin-left: $mg-spacing-400;
-    margin-bottom: $mg-spacing-400;
+    margin-left: var(--mg-spacing-400);
+    margin-bottom: var(--mg-spacing-400);
     width: 100%;
 
     @include devicebreak(medium) {
@@ -50,7 +50,7 @@
     [dir="rtl"] & {
       float: left;
       margin-left: 0;
-      margin-right: $mg-spacing-400;
+      margin-right: var(--mg-spacing-400);
     }
   }
 
@@ -76,33 +76,33 @@
   }
 
   &__content {
-    padding: $mg-spacing-400;
+    padding: var(--mg-spacing-400);
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
 
     @include devicebreak(medium) {
-      padding: $mg-spacing-500;
+      padding: var(--mg-spacing-500);
     }
   }
 
   &__quote {
     margin: 0;
     position: relative;
-    padding: 0 0 0 $mg-spacing-400;
+    padding: 0 0 0 var(--mg-spacing-400);
     font-weight: 600;
     font-size: $mg-font-size-400;
     font-style: italic;
     line-height: 1.5;
-    margin-bottom: $mg-spacing-300;
+    margin-bottom: var(--mg-spacing-300);
     text-wrap: balance;
 
     &::before {
       content: "\201C";
       position: absolute;
       left: 0;
-      top: -$mg-spacing-100;
+      top: calc(-1 * var(--mg-spacing-100));
       font-size: $mg-font-size-1000;
       font-weight: bold;
       color: inherit;
@@ -115,7 +115,7 @@
 
     [dir="rtl"] & {
       padding-left: 0;
-      padding-right: $mg-spacing-400;
+      padding-right: var(--mg-spacing-400);
 
       &::before {
         left: auto;
@@ -127,11 +127,11 @@
   &__separator {
     height: 4px;
     width: 100px;
-    margin: $mg-spacing-100 0 $mg-spacing-200 0;
+    margin: var(--mg-spacing-100) 0 var(--mg-spacing-200) 0;
   }
 
   &__attribution {
-    margin-top: $mg-spacing-100;
+    margin-top: var(--mg-spacing-100);
 
     &-wrapper {
       display: flex;
@@ -149,7 +149,7 @@
     }
 
     &-title {
-      margin: $mg-spacing-50 0 0;
+      margin: var(--mg-spacing-50) 0 0;
       font-size: $mg-font-size-200;
     }
   }
@@ -159,12 +159,12 @@
     height: 50px;
     border-radius: 50%;
     overflow: hidden;
-    margin-right: $mg-spacing-200;
+    margin-right: var(--mg-spacing-200);
     flex-shrink: 0;
 
     [dir="rtl"] & {
       margin-right: 0;
-      margin-left: $mg-spacing-200;
+      margin-left: var(--mg-spacing-200);
     }
   }
 
@@ -199,50 +199,50 @@
 
   // Color variants
   &--light {
-    background-color: rgba($mg-color-interactive, 0.1);
+    background-color: rgb(var(--mg-color-blue-900) / 0.1);
 
     .mg-quote-highlight__quote {
-      color: rgba($mg-color-interactive, 0.9);
+      color: rgb(var(--mg-color-blue-900) / 0.9);
 
       &::before {
-        color: rgba($mg-color-interactive, 0.5);
+        color: rgb(var(--mg-color-blue-900) / 0.5);
       }
     }
 
     .mg-quote-highlight__separator {
-      background-color: rgba($mg-color-interactive, 0.7);
+      background-color: rgb(var(--mg-color-blue-900) / 0.7);
     }
   }
 
   &--dark {
-    background-color: rgba($mg-color-interactive, 0.7);
-    color: $mg-color-white;
+    background-color: rgb(var(--mg-color-blue-900) / 0.7);
+    color: rgb(var(--mg-color-white));
 
     .mg-quote-highlight__quote {
       &::before {
-        color: rgba($mg-color-white, 0.8);
+        color: rgb(var(--mg-color-neutral-0) / 0.8);
       }
     }
 
     .mg-quote-highlight__separator {
-      background-color: $mg-color-white;
+      background-color: rgb(var(--mg-color-white));
     }
   }
 
   &--bright {
-    background-color: $mg-color-white;
-    border: 1px solid $mg-color-neutral-200;
+    background-color: rgb(var(--mg-color-white));
+    border: 1px solid rgb(var(--mg-color-neutral-200));
 
     .mg-quote-highlight__quote {
-      color: $mg-color-neutral-900;
+      color: rgb(var(--mg-color-neutral-900));
 
       &::before {
-        color: $mg-color-neutral-500;
+        color: rgb(var(--mg-color-neutral-500));
       }
     }
 
     .mg-quote-highlight__separator {
-      background-color: rgba($mg-color-interactive, 0.7);
+      background-color: rgb(var(--mg-color-blue-900) / 0.7);
     }
   }
 }