DP-41032-Highlight-and-callout-are-too-close-together-vertically

changelogs/DP-41032.yml

@@ -0,0 +1,6 @@
+Fixed:
+  - project: Assets
+    component: Callout
+    description: Add vertical spacing for Highlight and callout components in rich text.
+    issue: DP-41032
+    impact: Patch

packages/assets/scss/01-atoms/_buttons.scss

@@ -1,122 +1,124 @@
-@use "00-base/configure" as *;
-
-$primarycolors: (
-  "c-primary-alt": $c-primary-alt,
-  "c-highlight": $c-highlight,
-  "c-black": $c-gray-darkest,
-  "c-gray-dark": $c-gray-dark,
-  "c-white": $c-white
-);
-
-
-button {
-  cursor: pointer;
-  font-family: $fonts;
-  font-weight: $fonts-light;
-}
-
-.ma__button {
-
-  @include ma-button-base;
-  text-transform: none;
-  letter-spacing: $letter-spacing-small;
-
-  &--uppercase {
-    text-transform: uppercase;
-    letter-spacing: $letter-spacing-large;
-  }
-
-  svg {
-    margin-left: .5rem;
-    flex-shrink: 0;
-  }
-
-  @include ma-button-size;
-
-  &--small {
-
-    @include ma-button-size("small");
-    padding: 0.2em 0.6em;
-  }
-
-  &--large {
-
-    @include ma-button-size("large");
-  }
-
-  @include ma-button("solid",$c-primary);
-
-  @each $class, $c in $primarycolors {
-    &--#{$class} {
-
-      @include ma-button("solid",$c);
-    }
-  }
-
-  // Prevents buttons inside rich-text from inheriting link border-bottom underlines on hover
-  &:not(&--quaternary) {
-    .ma__rich-text & {
-      border-bottom: none;
-
-      &:hover:not(:disabled) {
-        border-bottom: none;
-      }
-    }
-  }
-
-}
-
-.ma__button--secondary {
-
-  @include ma-button("outline",$c-primary);
-
-  &.ma__button--c-primary-alt {
-
-    @include ma-button("outline",$c-primary-alt);
-  }
-
-  &.ma__button--c-highlight {
-
-    @include ma-button("outline",$c-highlight);
-  }
-
-  &.ma__button--c-gray-dark {
-
-    @include ma-button("outline",$c-gray-dark);
-  }
-}
-
-.ma__button--tertiary {
-
-  @include ma-button("solid",$c-gray-light);
-  color: var(--mf-c-font-base);
-
-  svg {
-    color: var(--mf-c-gray-darkest);
-  }
-}
-
-.ma__button--quaternary {
-  background-color: transparent;
-  box-shadow: none;
-  border: none;
-  border-bottom: 2px solid var(--mf-c-link);
-  color: var(--mf-c-primary);
-  padding: 0;
-  text-transform: none;
-  letter-spacing: $letter-spacing-default;
-
-  svg {
-    color: var(--mf-c-primary);
-  }
-
-  &:hover:not(:disabled) {
-   border-bottom: 3px solid var(--mf-c-primary);
-   background-color: transparent;
-  }
-}
-
-.ma__button--disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
+@use "00-base/configure" as *;
+
+$primarycolors: (
+  "c-primary-alt": $c-primary-alt,
+  "c-highlight": $c-highlight,
+  "c-black": $c-gray-darkest,
+  "c-gray-dark": $c-gray-dark,
+  "c-white": $c-white
+);
+
+
+button {
+  cursor: pointer;
+  font-family: $fonts;
+  font-weight: $fonts-light;
+}
+
+.ma__button {
+
+  @include ma-button-base;
+  text-transform: none;
+  letter-spacing: $letter-spacing-small;
+
+  &--uppercase {
+    text-transform: uppercase;
+    letter-spacing: $letter-spacing-large;
+  }
+
+  svg {
+    margin-left: .5rem;
+    flex-shrink: 0;
+  }
+
+  @include ma-button-size;
+
+  &--small {
+
+    @include ma-button-size("small");
+    padding: 0.2em 0.6em;
+  }
+
+  &--large {
+
+    @include ma-button-size("large");
+  }
+
+  @include ma-button("solid",$c-primary);
+
+  @each $class, $c in $primarycolors {
+    &--#{$class} {
+
+      @include ma-button("solid",$c);
+    }
+  }
+
+  // Prevents buttons inside rich-text from inheriting link border-bottom underlines on hover
+
+  &:not(&--quaternary) {
+
+    .ma__rich-text & {
+      border-bottom: none;
+
+      &:hover:not(:disabled) {
+        border-bottom: none;
+      }
+    }
+  }
+
+}
+
+.ma__button--secondary {
+
+  @include ma-button("outline",$c-primary);
+
+  &.ma__button--c-primary-alt {
+
+    @include ma-button("outline",$c-primary-alt);
+  }
+
+  &.ma__button--c-highlight {
+
+    @include ma-button("outline",$c-highlight);
+  }
+
+  &.ma__button--c-gray-dark {
+
+    @include ma-button("outline",$c-gray-dark);
+  }
+}
+
+.ma__button--tertiary {
+
+  @include ma-button("solid",$c-gray-light);
+  color: var(--mf-c-font-base);
+
+  svg {
+    color: var(--mf-c-gray-darkest);
+  }
+}
+
+.ma__button--quaternary {
+  background-color: transparent;
+  box-shadow: none;
+  border: none;
+  border-bottom: 2px solid var(--mf-c-link);
+  color: var(--mf-c-primary);
+  padding: 0;
+  text-transform: none;
+  letter-spacing: $letter-spacing-default;
+
+  svg {
+    color: var(--mf-c-primary);
+  }
+
+  &:hover:not(:disabled) {
+   border-bottom: 3px solid var(--mf-c-primary);
+   background-color: transparent;
+  }
+}
+
+.ma__button--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}

packages/assets/scss/02-molecules/_inline-message.scss

@@ -3,6 +3,7 @@
 // Inline Message molecule.
 // Supported variants: info (default), warning.
 // Structure: icon + heading on same row; paragraph below full-width.
+
 .ma__inline-message {
   background-color: var(--mf-c-bay-blue-lightest, #f1f4f6); // Design token — light blue background
   border: 1px solid var(--mf-c-bd-divider, #d5dce0);
@@ -12,6 +13,7 @@
   overflow: auto;
 
   // Top row: icon + bold heading on same horizontal line
+
   &__header {
     display: flex;
     align-items: center;
@@ -37,8 +39,11 @@
   }
 
   // Body: paragraph text — full-width below the header row
+
   &__content {
+
     .ma__rich-text {
+
       >*:first-child {
         margin-top: 0;
       }
@@ -51,6 +56,7 @@
   }
 
   // Warning variant — yellow icon tint, background, and border
+
   &--warning {
     background-color: var(--mf-c-duckling-yellow-lightest, #fef9e8);
     border-color: var(--mf-c-duckling-yellow-lighter, #fbe28d);

packages/assets/scss/03-organisms/_action-finder.scss

@@ -27,6 +27,22 @@ $action-finder-bp: 900px;
     }
   }
 
+  .ma__rich-text & {
+    margin-bottom: 1.5rem;
+
+    @media ($bp-small-min) {
+      margin-bottom: 1.75rem;
+    }
+
+    &:not(:first-child) {
+      margin-top: 1.5rem;
+
+      @media ($bp-small-min) {
+        margin-top: 1.75rem;
+      }
+    }
+  }
+
   &__container {
 
     @include ma-container;