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

package/scss/Components/Buttons/CtaButton/cta-button.scss

@@ -17,19 +17,38 @@
   align-items: center;
   background: transparent;
   display: flex;
-  font-family: $mg-font-family-headings;
-  font-size: $mg-font-size-button;
+  font-family: $mg-font-family;
+  font-size: var(--mg-font-size-button);
   font-weight: 600;
   line-height: 1;
-  border-radius: $mg-radius-button;
-  color: $mg-color-button;
+  border-radius: var(--mg-radius-button);
+  color: rgb(var(--mg-color-button));
   cursor: pointer;
   justify-content: center;
-  padding: $mg-padding-button;
-  border: $mg-border-width-button solid $mg-border-color-button;
+  padding: var(--mg-padding-button);
+  border: var(--mg-border-width-button) solid var(--mg-border-color-button);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition:
+      background-color 200ms ease,
+      border-color 200ms ease,
+      color 200ms ease,
+      scale var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
+  }
+
+  &:active:not(.disabled) {
+    scale: 0.96;
+  }
 
+  // Visible, token-driven focus ring. A neutral separator ring plus a
+  // focus-coloured ring reads clearly on any button background (unlike a
+  // same-colour glow), follows the button's border-radius, and is not clipped
+  // by overflow like an outline can be.
   &:focus-visible {
-    box-shadow: 0 0 4px $mg-color-button-background--hover;
+    box-shadow:
+      0 0 0 var(--mg-focus-ring-offset) rgb(var(--mg-color-neutral-0)),
+      0 0 0 calc(var(--mg-focus-ring-offset) + var(--mg-focus-ring-width))
+        rgb(var(--mg-color-focus-ring));
     outline: 0;
   }
 
@@ -38,41 +57,144 @@
   }
 }
 
-.mg-button + .mg-button {
-  margin-left: mg-rem(10);
+.mg-buttons {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mg-spacing-75);
 }
 
 button {
   &:focus-visible {
-    box-shadow: 0 0 4px $mg-color-button-background;
+    box-shadow: 0 0 4px rgb(var(--mg-color-button-background));
     outline: 0;
   }
 }
 
 .mg-button-primary {
-  background-color: $mg-color-button-background;
+  background-color: rgb(var(--mg-color-button-background));
 
   &:hover {
-    color: $mg-color-button;
-    background-color: $mg-color-button-background--hover;
+    color: rgb(var(--mg-color-button));
+    background-color: rgb(var(--mg-color-button-background--hover));
   }
 }
 
 .mg-button-secondary {
-  background-color: $mg-color-button-secondary-background;
+  background-color: rgb(var(--mg-color-button-secondary-background));
+
+  &:hover {
+    color: rgb(var(--mg-color-button));
+    background-color: rgb(var(--mg-color-button-secondary-background--hover));
+  }
+}
+
+// The outline modifier composes with the existing emphasis variants:
+// .mg-button.mg-button-primary.mg-button-outline or
+// .mg-button.mg-button-secondary.mg-button-outline.
+.mg-button-outline {
+  background-color: transparent;
+}
+
+.mg-button-primary.mg-button-outline {
+  border-color: rgb(var(--mg-color-button-outline-primary));
+  color: rgb(var(--mg-color-button-outline-primary));
 
   &:hover {
-    color: $mg-color-button;
-    background-color: $mg-color-button-secondary-background--hover;
+    background-color: rgb(var(--mg-color-button-outline-primary--hover));
+    color: rgb(var(--mg-color-button));
+  }
+}
+
+.mg-button-secondary.mg-button-outline {
+  border-color: rgb(var(--mg-color-button-outline-secondary));
+  color: rgb(var(--mg-color-button-outline-secondary));
+
+  &:hover {
+    background-color: rgb(var(--mg-color-button-outline-secondary--hover));
+    color: rgb(var(--mg-color-button));
   }
 }
 
 .mg-button.disabled {
-  background-color: $mg-color-neutral-500;
-  color: $mg-color-neutral-0;
+  background-color: rgb(var(--mg-color-neutral-500));
+  color: rgb(var(--mg-color-neutral-0));
   pointer-events: none;
 }
 
+// Compact editorial CTA: text plus a circular directional badge. Consumers opt
+// into this modifier so form submits and utility actions retain their
+// conventional button treatment.
+.mg-button.mg-button-cta {
+  background: transparent;
+  border-color: transparent;
+  color: rgb(var(--mg-color-text));
+  flex: 0 0 auto;
+  justify-content: flex-start;
+  max-inline-size: 100%;
+  min-height: mg-rem(44);
+  overflow-wrap: anywhere;
+  padding: var(--mg-spacing-50) 0;
+  padding-inline-end: calc(#{mg-rem(22)} + var(--mg-spacing-50));
+  position: relative;
+  text-align: start;
+  white-space: normal;
+
+  // The compact editorial treatment keeps its label steady and gives the
+  // directional badge the tactile response instead of scaling the whole row.
+  &:active:not(.disabled) {
+    scale: 1;
+  }
+
+  &::after {
+    align-items: center;
+    background: rgb(var(--mg-color-interactive));
+    border-radius: 50%;
+    color: rgb(var(--mg-color-neutral-0));
+    content: "›";
+    display: inline-flex;
+    flex: 0 0 mg-rem(22);
+    font-family: $mg-font-family;
+    font-size: mg-rem(18);
+    font-weight: 700;
+    height: mg-rem(22);
+    inline-size: mg-rem(22);
+    inset-block-start: 50%;
+    inset-inline-end: 0;
+    justify-content: center;
+    line-height: 1;
+    padding-block-end: 0.06em; // optically centres the asymmetric chevron
+    padding-inline-start: 0.03em;
+    position: absolute;
+    translate: 0 -50%;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: background-color var(--mg-motion-duration-fast)
+        var(--mg-motion-easing-standard);
+    }
+  }
+
+  &:hover {
+    background: transparent;
+    border-color: transparent;
+    color: rgb(var(--mg-color-interactive-active));
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+
+    &::after {
+      background: rgb(var(--mg-color-interactive-active));
+    }
+  }
+
+  &:active::after {
+    scale: 0.96;
+  }
+}
+
+[dir="rtl"] .mg-button.mg-button-cta::after {
+  content: "‹";
+}
+
 // [dir='rtl'] {
 //   .button {
 //     &.button-primary {
@@ -81,7 +203,7 @@ button {
 //           @include transform(rotate(180deg));
 
 //           margin-left: 0;
-//           margin-right: $mg-spacing-25;
+//           margin-right: var(--mg-spacing-25);
 //         }
 
 //         &:hover::after {
@@ -95,6 +217,6 @@ button {
 // Arabic font override
 :lang(ar) {
   .mg-button {
-    font-family: $mg-font-family-arabic-headings;
+    font-family: $mg-font-family-arabic-body;
   }
 }

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,28 +5,47 @@
   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);
+  box-shadow: var(--mg-card-shadow);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: box-shadow var(--mg-motion-duration-fast) var(--mg-motion-easing-standard);
+  }
+
+  &:hover {
+    box-shadow: var(--mg-card-shadow-hover);
+  }
 
   // Vertical CARD
   &__vc {
+    align-content: flex-start;
     display: grid;
-    gap: $mg-spacing-50;
+    gap: var(--mg-spacing-50);
 
     .mg-card__visual {
       aspect-ratio: 16/9;
+      border-radius: calc(var(--mg-card-border-radius) / 2);
       overflow: hidden;
+      outline: 1px solid rgb(var(--mg-color-neutral-900) / 0.1);
+    }
+
+    &:not(.mg-card__book) .mg-card__image {
+      block-size: 100%;
+      inline-size: 100%;
     }
+
+    @include mg-card-image-zoom;
   }
 
   // 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;
@@ -57,10 +76,22 @@
     }
   }
 
+  // Horizontal card image zoom on hover (book covers excluded — they sit in a
+  // bordered frame where a zoom reads oddly).
+  &__hc:not(.mg-card-book__hc) {
+    .mg-card__visual {
+      border-radius: calc(var(--mg-card-border-radius) / 2);
+      overflow: hidden;
+      outline: 1px solid rgb(var(--mg-color-neutral-900) / 0.1);
+    }
+
+    @include mg-card-image-zoom;
+  }
+
   &__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 +103,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 +126,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 +142,12 @@
     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);
+    text-wrap: balance;
 
     a {
-      color: $mg-color-interactive;
+      color: rgb(var(--mg-color-interactive));
       cursor: pointer;
       display: inline;
       text-decoration: underline;
@@ -123,7 +155,7 @@
     }
 
     .active {
-      background: $mg-color-neutral-50;
+      background: rgb(var(--mg-color-neutral-50));
       font-weight: bold;
     }
   }
@@ -162,8 +194,7 @@
 
   // Focus: card-level outline when title link is focused via keyboard
   &__title a:focus-visible {
-    outline: 2px solid $mg-color-interactive;
-    outline-offset: 2px;
+    @include mg-focus-ring;
   }
 
   // Hover: thicker underline + nudge chevron
@@ -191,9 +222,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 +237,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 +247,13 @@ $card-variant-colours: (
 }
 
 .mg-card__summary {
-  padding-bottom: $mg-spacing-50;
+  padding-bottom: var(--mg-spacing-50);
+  text-wrap: pretty;
 }
 
 .mg-card__summary a,
 .mg-card__text-link {
-  color: $mg-color-interactive;
+  color: rgb(var(--mg-color-interactive));
 }
 
 .mg-card__summary a,
@@ -248,11 +280,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 +303,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 +318,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 +390,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 +430,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 +440,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,8 +467,7 @@ $card-variant-colours: (
       outline: none;
 
       &::after {
-        outline: 2px solid $mg-color-interactive;
-        outline-offset: 2px;
+        @include mg-focus-ring;
       }
     }
   }
@@ -456,7 +487,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,25 +496,23 @@ $card-variant-colours: (
       }
 
       &:focus-visible {
-        outline: 2px solid $mg-color-interactive;
-        outline-offset: 2px;
-        border-radius: 2px;
+        @include mg-focus-ring;
       }
     }
   }
 
   .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,9 +522,7 @@ $card-variant-colours: (
       }
 
       &:focus-visible {
-        outline: 2px solid $mg-color-interactive;
-        outline-offset: 2px;
-        border-radius: 2px;
+        @include mg-focus-ring;
       }
     }
   }
@@ -503,7 +530,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 +550,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));
       }
     }
   }