@undrr/undrr-mangrove 1.3.0 → 1.3.2

package/scss/Components/Boilerplate/boilerplate.scss

@@ -11,6 +11,21 @@
   &__title {
     font-size: 1.5rem;
     margin-bottom: 1rem;
+
+    a {
+      color: $mg-color-interactive;
+      text-decoration: underline;
+      text-underline-offset: 3px;
+
+      &:hover {
+        text-decoration-thickness: 2px;
+      }
+
+      &:focus-visible {
+        outline: 2px solid $mg-color-interactive;
+        outline-offset: 2px;
+      }
+    }
   }
 
   &__content {

package/scss/Components/Cards/Card/card.scss

@@ -1,18 +1,4 @@
 /* content-card start */
-// $colors: (
-//   'yellow': $mg-color-yellow,
-//   'red': $mg-color-red-900,
-//   'green': $mg-color-green,
-//   'blue': $mg-color-azure,
-//   'gray': $mg-color-neutral-100,
-// );
-// $backgroundcolors: (
-//   'yellow': $mg-color-yellow-light,
-//   'red': $mg-color-red-600,
-//   'green': $mg-color-green-light,
-//   'blue': $mg-color-azure-light,
-//   'gray': $mg-color-neutral-100,
-// );
 
 // MG CARD using CSS GRID
 .mg-card {
@@ -105,14 +91,14 @@
   }
 
   &__label {
-    color: $mg-color-label;
+    color: $mg-color-tag;
     cursor: pointer;
     display: inline-block;
-    font-size: $mg-font-label;
+    font-size: $mg-font-tag;
     margin-right: $mg-spacing-50;
 
     &:hover {
-      color: $mg-color-label;
+      color: $mg-color-tag;
     }
   }
 
@@ -124,9 +110,11 @@
     padding-top: $mg-spacing-100;
 
     a {
-      color: $mg-color-text;
+      color: $mg-color-interactive;
       cursor: pointer;
-      display: inline-block;
+      display: inline;
+      text-decoration: underline;
+      text-underline-offset: 3px;
     }
 
     .active {
@@ -135,7 +123,8 @@
     }
   }
 
-  &__title a::after {
+  // Stretched link overlay (covers entire card)
+  &__title a::before {
     bottom: 0;
     content: "";
     left: 0;
@@ -144,6 +133,81 @@
     top: 0;
     z-index: 100;
   }
+
+  // Inline chevron indicator (CSS border triangle — no Unicode dependency)
+  &__title a::after {
+    border-color: currentColor;
+    border-style: solid;
+    border-width: 0.15em 0.15em 0 0;
+    content: "";
+    display: inline-block;
+    height: 0.35em;
+    margin-inline-start: 0.25em;
+    position: relative;
+    top: -0.1em;
+    transform: rotate(45deg);
+    translate: 0 0;
+    vertical-align: middle;
+    width: 0.35em;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: translate 200ms ease;
+    }
+  }
+
+  // Focus: card-level outline when title link is focused via keyboard
+  &__title a:focus-visible {
+    outline: 2px solid $mg-color-interactive;
+    outline-offset: 2px;
+  }
+
+  // Hover: thicker underline + nudge chevron
+  &:hover &__title a {
+    text-decoration-thickness: 2px;
+  }
+
+  &:hover &__title a::after {
+    @media (prefers-reduced-motion: no-preference) {
+      translate: 0.15em 0;
+    }
+  }
+}
+
+// RTL chevron — flip direction
+[dir="rtl"] .mg-card__title a::after {
+  transform: rotate(225deg);
+}
+
+[dir="rtl"] .mg-card:hover .mg-card__title a::after {
+  @media (prefers-reduced-motion: no-preference) {
+    translate: -0.15em 0;
+  }
+}
+
+// Color variants (shared accent colours from _variables.scss)
+$card-variant-colours: (
+  "secondary": $mg-color-secondary,
+  "tertiary": $mg-color-tertiary,
+  "quaternary": $mg-color-quaternary,
+);
+
+@each $name, $color in $card-variant-colours {
+  .mg-card--#{$name} .mg-card__title a {
+    color: #{$color};
+  }
+}
+
+// Opt-out modifier: plain title (no blue, no underline, no chevron)
+// 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;
+    text-decoration: none;
+  }
+
+  .mg-card__title a::after {
+    content: none;
+  }
 }
 
 .mg-card__summary {
@@ -356,11 +420,12 @@
     line-height: $mg-font-line-height-500;
 
     a {
-      color: $mg-color-text;
-      text-decoration: none;
+      color: $mg-color-interactive;
+      text-decoration: underline;
+      text-underline-offset: 3px;
 
       &:hover {
-        text-decoration: underline;
+        text-decoration-thickness: 2px;
       }
 
       &:focus-visible {

package/scss/Components/Cards/StatsCard/stats-card.scss

@@ -33,7 +33,7 @@
   &__label {
     font-size: $mg-font-size-200;
     font-weight: 600;
-    color: $mg-color-label;
+    color: $mg-color-tag;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     line-height: 1.2;

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

@@ -38,4 +38,31 @@
     height: 50px;
     margin: 1rem 0;
   }
+
+  &--challenge {
+    background-color: $mg-color-neutral-25;
+
+    .mg-error-page__container {
+      text-align: center;
+      padding: 3rem 2.5rem 2rem;
+      margin-top: 4rem;
+      max-width: 540px;
+      border-radius: 8px;
+      box-shadow: 0 2px 12px rgb(0 0 0 / 0.08);
+    }
+
+    .undrr-logo {
+      width: 100%;
+      margin: 0 0 2.5rem;
+      background-position: center;
+      height: 35px;
+    }
+
+    h1 {
+      font-size: 2.3rem;
+      font-weight: 600;
+      color: $mg-color-text;
+      margin: 0 0 0.5rem;
+    }
+  }
 }

package/scss/Components/Footer/footer.scss

@@ -1,6 +1,4 @@
-.mg-footer,
-.page-node-type-landing_page_gutenberg .field--name-body > * {
-  // reset the spacer for the landing page body of the footer
+.mg-footer {
   --mg-gutenberg-spacer: 0;
 }
 
@@ -14,6 +12,10 @@
   a:hover {
     color: $mg-color-white;
   }
+
+  .container {
+    margin-bottom: 0;
+  }
 }
 
 .mg-footer--about-footer--links {
@@ -24,4 +26,19 @@
 
 .mg-footer--about-footer--description {
   font-size: $mg-font-size-400;
+}
+
+.mg-footer--social-links {
+  display: inline-flex;
+  gap: 1.5rem;
+  padding-left: 0;
+
+  li {
+    display: inline-block;
+  }
+
+  li a {
+    color: $mg-color-white;
+    text-underline-offset: 5px;
+  }
 }

package/scss/Components/Forms/Checkbox/checkbox.scss

@@ -1,22 +1,2 @@
-/* checkbox */
-.form-check {
-  align-items: center;
-  display: flex;
-  position: relative;
-
-  label {
-    cursor: pointer;
-    font-size: $mg-font-size-300;
-    padding: 0 7px;
-  }
-}
-
-input[type="checkbox"] {
-  @extend %checbox-radio-before;
-
-  border-radius: 0;
-
-  // &:checked {
-  //   background: url(#{$img-path-Icon}/icon-check.svg) 1px 0 no-repeat;
-  // }
-}
+// Checkbox-specific overrides.
+// Shared form styles live in _form-base.scss (.mg-form-check).

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

@@ -0,0 +1,24 @@
+// FormGroup — styled fieldset/legend for grouping related form controls.
+
+.mg-form-group {
+  border: 0;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+
+  &__legend {
+    @extend %paragraph-font-300;
+
+    display: block;
+    margin-bottom: $mg-spacing-50;
+    padding: 0;
+  }
+
+  &--disabled &__legend {
+    color: $mg-color-neutral-400;
+  }
+
+  &--error &__legend {
+    color: $mg-color-red-900;
+  }
+}

package/scss/Components/Forms/InputFields/input-fields.scss

@@ -1,177 +1,7 @@
-label {
-  @extend %paragraph-font-300;
-
-  display: block;
-
-  &.error {
-    @extend %paragraph-font-300;
-
-    color: $mg-color-black;
-    margin-top: 0;
-  }
-
-  &.disabled {
-    color: $mg-color-neutral-400;
-  }
-}
-
-.help {
-  color: $mg-color-neutral-500;
-  display: block;
-  font-size: $mg-font-size-200;
-  margin-bottom: 0;
-  margin-top: $mg-spacing-25;
-}
-
-.error {
-  color: $mg-color-red-900;
-  font-size: $mg-font-size-300;
-  margin-bottom: 0;
-  margin-top: $mg-spacing-25;
-}
-
-input[type="text"],
-input[type="number"],
-input[type="email"],
-input[type="password"],
-input[type="search"],
-input[type="tel"],
-input[type="date"],
-textarea {
-  @extend %background-white;
-
-  -moz-appearance: none;
-  -webkit-appearance: none;
-  appearance: none;
-  border: 2px solid $mg-color-black;
-  border-radius: 0;
-  box-sizing: border-box;
-  display: block;
-  font-family: $mg-font-family;
-  font-size: $mg-font-size-300;
-  height: 46px;
-  margin-top: $mg-spacing-25;
-  padding: 0.625rem;
-  width: 100%;
-
-  &::placeholder {
-    color: $mg-color-neutral-500;
-  }
-
-  &:focus {
-    box-shadow: 0 0 4px $mg-color-blue-800;
-    outline: 0;
-  }
-
-  input[type="date"],
-  input[type="search"] {
-    position: relative;
-  }
-
-  &.disabled {
-    background-color: $mg-color-white;
-    border: 2px solid $mg-color-neutral-400;
-    color: $mg-color-neutral-400;
-
-    &::placeholder {
-      color: $mg-color-neutral-400;
-    }
-  }
-
-  &.error {
-    border: 2px solid $mg-color-red-900;
-  }
-}
-
-input[type="date"] {
-  // background:
-  //   url(#{$img-path-Icon}/calender-black.svg) no-repeat left 14px
-  //   bottom 12px;
-  background-color: $mg-color-white;
-  color: $mg-color-neutral-500;
-}
-
-
-.help {
-  &.disabled {
-    color: $mg-color-neutral-400;
-  }
-}
-
-textarea {
-  height: auto;
-  max-width: 100%;
-  resize: vertical;
-}
-
-input[type="date"]::-webkit-calendar-picker-indicator {
-  appearance: none;
-  left: 3px;
-  opacity: 0;
-  position: absolute;
-}
-
-[dir="rtl"] {
-  input[type="text"],
-  input[type="number"],
-  input[type="email"],
-  input[type="password"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="date"],
-  textarea {
-    @media (hover: none) and (pointer: coarse) {
-      input[type="date"] {
-        padding-right: $mg-spacing-100;
-      }
-    }
-  }
-
-  // input[type="date"],
-  // input[type="search"] {
-  //   background:
-  //     url(#{$img-path-Icon}/calender-black.svg) no-repeat right 14px
-  //     bottom 12px;
-  //   background-color: $mg-color-white;
-  //   padding-left: 0.635rem;
-  //   padding-right: $mg-spacing-200;
-  //   text-align: right;
-  // }
-
-  // input[type="search"] {
-  //   background:
-  //     url(#{$img-path-Icon}/search-black.svg) no-repeat right 14px
-  //     bottom 12px;
-  // }
-
-  // input[type="date"] {
-  //   &.disabled {
-  //     background-image: url(#{$img-path-Icon}/date-disabled.svg);
-  //   }
-  // }
-
-  input[type="date"]::-webkit-calendar-picker-indicator {
-    left: inherit;
-    position: absolute;
-    right: 27px;
-  }
-
-  input::-webkit-date-and-time-value {
-    margin-right: 0;
-    text-align: right;
-  }
-}
-
-// Arabic
-:lang(ar) {
-  input[type="text"],
-  input[type="number"],
-  input[type="email"],
-  input[type="password"],
-  input[type="search"],
-  input[type="tel"],
-  input[type="date"],
-  textarea {
-    font-family: $mg-font-family-arabic-body;
-  }
-}
+// DEPRECATED — February 2026
+// This file has been replaced by:
+//   - stories/Components/Forms/_form-base.scss (shared form styles)
+//   - stories/Components/Forms/TextInput/text-input.scss (TextInput-specific)
+// Scheduled for removal: August 2026.
+// If you see this message, update your import path.
+@warn "input-fields.scss is deprecated. Import _form-base.scss and TextInput/text-input.scss instead. Removal: August 2026.";

package/scss/Components/Forms/Radio/radio.scss

@@ -1,13 +1,2 @@
-/* radio */
-input[type="radio"] {
-  @extend %checbox-radio-before;
-
-  background-color: transparent;
-  border-radius: 100%;
-  box-shadow: inset 0 0 0 $mg-color-white;
-
-  &:checked {
-    background-color: $mg-color-red-900;
-    box-shadow: inset 0 0 0 3px $mg-color-white;
-  }
-}
+// Radio-specific overrides.
+// Shared form styles live in _form-base.scss (.mg-form-check).

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

@@ -1,19 +1,10 @@
-.select-default {
-  @extend %select_default;
-  @include x-appearance(none);
-
-  // background:
-  //   $mg-color-white url(#{$img-path-Icon}/chevron-down.svg) no-repeat
-  //   right 22px center;
-  border-radius: 0;
-  color: $mg-color-black;
-  display: block;
-}
+// Select-specific overrides.
+// Shared form styles live in _form-base.scss (.mg-form-select).
 
 [dir="rtl"] {
-  .select-default {
-    background-position: left 22px center;
-    padding: $mg-spacing-50 $mg-spacing-50 $mg-spacing-50 $mg-spacing-800;
-    text-align: right;
+  .mg-form-select {
+    background-position: left 0.625rem center;
+    padding-left: $mg-spacing-200;
+    padding-right: 0.625rem;
   }
 }

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

@@ -0,0 +1,13 @@
+// TextInput-specific overrides (date picker styling).
+// Shared form styles live in _form-base.scss.
+
+.mg-form-input[type="date"] {
+  color: $mg-color-neutral-500;
+
+  &::-webkit-calendar-picker-indicator {
+    appearance: none;
+    left: 3px;
+    opacity: 0;
+    position: absolute;
+  }
+}

package/scss/Components/Forms/Textarea/textarea.scss

@@ -0,0 +1,2 @@
+// Textarea-specific overrides.
+// Shared form styles live in _form-base.scss (.mg-form-textarea).