RiverBreakoutTabs + Card layout adjustments

.changeset/card-description-link-spacing.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Reduced the spacing between the `Card` description and its link from `32px` to `24px`

.changeset/river-breakout-tabs-wide-action-spacing.md

@@ -0,0 +1,10 @@
+---
+'@primer/react-brand': patch
+---
+
+Updates to the `RiverBreakoutTabs` component:
+
+- Reduced the spacing above the tab list action on wide breakpoints from `16px` to `12px`
+- Reduced the gridline outer padding from `64px` to `60px` at the widest breakpoint
+- Added a `0.3s` transition to the tab heading color
+- Fixed a shadow-border issue on hovered tab indicators. It now fills the entire parent space using a negative offset.

packages/react/src/Card/Card.module.css

@@ -314,7 +314,7 @@
 }
 
 .Card__description {
-  margin-block-end: var(--base-size-32);
+  margin-block-end: var(--base-size-24);
   grid-area: description;
 }
 

packages/react/src/river/RiverBreakoutTabs/RiverBreakoutTabs.module.css

@@ -10,6 +10,13 @@
   }
 }
 
+@media screen and (min-width: 80rem) {
+  .RiverBreakoutTabs {
+    --brand-RiverBreakout-variant-gridline-spacing-outerInline: var(--base-size-60);
+    --brand-RiverBreakout-variant-gridline-spacing-outerBlock: var(--base-size-60);
+  }
+}
+
 .RiverBreakoutTabs__accordion {
   display: flex;
   flex-direction: column;
@@ -143,20 +150,21 @@
 }
 
 .RiverBreakoutTabs__item--selected::before {
-  transform: scaleY(2);
+  transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);
   background-color: var(--brand-color-accent-primary);
 }
 
 @media screen and (min-width: 63.25rem) and (hover: hover) and (pointer: fine) {
   .RiverBreakoutTabs__item:hover::before {
-    transform: scaleY(2);
+    transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);
     background-color: var(--brand-color-accent-primary);
   }
 }
 
 .RiverBreakoutTabs__heading {
   margin: 0;
   color: var(--brand-color-text-muted);
+  transition: color var(--brand-animation-duration-fast) ease-in-out;
 }
 
 .RiverBreakoutTabs__item--selected .RiverBreakoutTabs__heading {
@@ -214,7 +222,7 @@
 }
 
 .RiverBreakoutTabs__wideTabListActionItem {
-  margin-block-start: var(--base-size-16);
+  margin-block-start: var(--base-size-12);
 }
 
 .RiverBreakoutTabs__content {
@@ -271,13 +279,13 @@
 }
 
 .RiverBreakoutTabs__accordionItem.RiverBreakoutTabs__item--selected::before {
-  transform: scaleY(2);
+  transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);
   background-color: var(--brand-color-accent-primary);
 }
 
 @media (hover: hover) and (pointer: fine) {
   .RiverBreakoutTabs__accordionItem:hover::before {
-    transform: scaleY(2);
+    transform: translateY(calc(-1 * var(--brand-borderWidth-thin))) scaleY(2);
     background-color: var(--brand-color-accent-primary);
   }
 }