@primer/brand-css 0.68.1-rc.e248cf2a → 0.69.0-rc.50f5ffef

package/components/Accordion/Accordion.css

@@ -1,8 +1,17 @@
 .Accordion {
+  --brand-Accordion-content-height: 0px;
+
   box-sizing: border-box;
   position: relative;
 }
 
+.Accordion--disableAnimation::after,
+.Accordion--disableAnimation .Accordion__summary-toggleIcon,
+.Accordion--disableAnimation > .Accordion__content,
+.Accordion--disableAnimation > .Accordion__content > .Accordion__content-inner {
+  transition: none;
+}
+
 .Accordion--default {
   border-bottom: var(--brand-borderWidth-thin) solid var(--brand-Accordion-border-color-default);
 }
@@ -52,11 +61,17 @@ details[open] > .Accordion__summary--emphasis::before {
 
 .Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {
   border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner {
   padding-block-start: var(--base-size-12);
-  padding-block-end: var(--base-size-12);
   padding-inline: var(--base-size-20);
 }
 
+.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content > .Accordion__content-inner::after {
+  block-size: var(--base-size-12);
+}
+
 .Accordion--emphasis .Accordion--default:last-child {
   border-bottom: none;
 }
@@ -69,7 +84,8 @@ details[open] > .Accordion__summary--emphasis::before {
   content: '';
   background-color: var(--brand-Accordion-border-color-default);
   height: var(--brand-borderWidth-thin);
-  transition: var(--brand-animation-duration-fast) transform;
+  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),
+    transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);
   transform: scaleY(0);
   transform-origin: 50% 100%;
   width: 100%;
@@ -89,6 +105,7 @@ details[open].Accordion--default::after {
   padding: var(--base-size-24) 0;
   position: relative;
   display: flex;
+  align-items: center;
   justify-content: space-between;
 }
 
@@ -114,46 +131,46 @@ details[open].Accordion > .Accordion__summary:focus-visible {
   outline: none;
 }
 
-.Accordion__summary--collapsed,
-.Accordion__summary--expanded {
+.Accordion__summary-toggle {
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   height: var(--base-size-24);
   width: var(--base-size-24);
-  color: var(--brand-color-text-default);
+  color: var(--brand-color-text-emphasized);
   position: absolute;
-  transition: opacity var(--brand-animation-duration-faster) ease;
+  top: 50%;
+  transform: translateY(-50%);
 }
 
-.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary--collapsed,
-.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary--expanded {
+.Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary-toggle {
   right: 0;
 }
 
-.Accordion__summary--emphasis .Accordion__summary--collapsed,
-.Accordion__summary--emphasis .Accordion__summary--expanded {
+.Accordion__summary--emphasis .Accordion__summary-toggle {
   position: static;
+  transform: none;
   order: 1;
+  margin-inline-start: auto;
+  color: var(--brand-color-text-default);
 }
 
-.Accordion__summary--emphasis .Accordion__summary--collapsed {
-  margin-inline-start: auto;
+.Accordion__summary--reversed-toggles .Accordion__summary-toggle {
+  left: 0;
 }
 
-.Accordion__summary--emphasis .Accordion__summary--expanded {
-  margin-inline-start: calc(-1 * var(--base-size-24));
+.Accordion__summary--default .Accordion__summary-toggle {
+  color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-emphasized));
 }
 
-.Accordion__summary--reversed-toggles .Accordion__summary--collapsed,
-.Accordion__summary--reversed-toggles .Accordion__summary--expanded {
-  left: 0;
+.Accordion__summary-toggleIcon {
+  transform-origin: 50% 50%;
+  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);
 }
 
-.Accordion__summary--default .Accordion__summary--collapsed,
-.Accordion__summary--default .Accordion__summary--expanded {
-  color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-default));
+details[open] > .Accordion__summary .Accordion__summary-toggleIcon {
+  transform: rotate(-180deg);
 }
 
 .Accordion__summary--toggleColor-default {
@@ -232,30 +249,6 @@ details[open].Accordion > .Accordion__summary:focus-visible {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);
 }
 
-.Accordion__summary.Accordion__summary--default .Accordion__summary--expanded {
-  opacity: 0;
-}
-
-.Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {
-  opacity: 0;
-}
-
-details[open] .Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {
-  opacity: 1;
-}
-
-details[open] .Accordion__summary.Accordion__summary--emphasis .Accordion__summary--collapsed {
-  opacity: 0;
-}
-
-details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--expanded {
-  opacity: 1;
-}
-
-details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--collapsed {
-  opacity: 0;
-}
-
 .Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {
   padding-inline-end: var(--base-size-48);
 }
@@ -266,7 +259,7 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ
 
 .Accordion__content,
 .Accordion__content p,
-.Accordion__content span:not(.Accordion__summary--expanded):not(.Accordion__summary--collapsed),
+.Accordion__content span:not(.Accordion__summary-toggle),
 .Accordion__content ul,
 .Accordion__content ol {
   color: var(--brand-color-text-muted);
@@ -276,6 +269,36 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ
   line-height: var(--brand-text-lineHeight-200);
 }
 
+.Accordion__content {
+  --brand-Accordion-content-offset: 0px; /* we reference this in JS */
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);
+  position: relative;
+}
+
+.Accordion__content-inner {
+  transform: translateY(calc(-1 * var(--brand-Accordion-content-offset)));
+  opacity: 0;
+  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);
+}
+
+.Accordion--default > .Accordion__content {
+  --brand-Accordion-content-offset: calc(var(--base-size-24) - var(--base-size-6)); /* we reference this in JS */
+  top: calc(var(--base-size-4) * -1);
+}
+
+.Accordion__summary--default + .Accordion__content > .Accordion__content-inner::before {
+  content: '';
+  display: block;
+  block-size: var(--base-size-12);
+}
+
+.Accordion__content-inner::after {
+  content: '';
+  display: block;
+}
+
 [data-color-mode='dark'] .Accordion__content {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
@@ -311,14 +334,41 @@ details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summ
 }
 
 details[open] > .Accordion__content {
-  padding-bottom: var(--base-size-24);
-  animation: fade-in 0.5s;
+  max-height: var(--brand-Accordion-content-height);
   position: relative;
   z-index: 0;
 }
 
+details[open].Accordion--disableAnimation > .Accordion__content {
+  max-height: none;
+}
+
+details[open] > .Accordion__content > .Accordion__content-inner {
+  opacity: 1;
+}
+
+details.Accordion--closing > .Accordion__content {
+  max-height: 0;
+}
+
+details.Accordion--closing > .Accordion__content > .Accordion__content-inner {
+  opacity: 0;
+}
+
 .Accordion__summary--default + .Accordion__content {
-  margin-top: calc(var(--base-size-12) * -1); /* for 12px gap between question and answer */
+  margin-block-start: 0;
+}
+
+details[open] > .Accordion__summary--default + .Accordion__content {
+  margin-block-start: 0;
+}
+
+details.Accordion--closing > .Accordion__summary--default + .Accordion__content {
+  margin-block-start: 0;
+}
+
+details.Accordion--closing > .Accordion__summary .Accordion__summary-toggleIcon {
+  transform: rotate(0deg);
 }
 
 details[open] > .Accordion__summary--reversed-toggles + .Accordion__content {
@@ -332,15 +382,6 @@ details[open] > .Accordion__summary--reversed-toggles + .Accordion__content {
   }
 }
 
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
-}
-
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Accordion,

package/components/Box/Box.css

@@ -74,12 +74,18 @@
 .Box-padding--48 {
   padding: var(--base-size-48);
 }
+.Box-padding--60 {
+  padding: var(--base-size-60);
+}
 .Box-padding--64 {
   padding: var(--base-size-64);
 }
 .Box-padding--80 {
   padding: var(--base-size-80);
 }
+.Box-padding--88 {
+  padding: var(--base-size-88);
+}
 .Box-padding--96 {
   padding: var(--base-size-96);
 }
@@ -139,12 +145,18 @@
 .Box-narrow-padding--48 {
   padding: var(--base-size-48);
 }
+.Box-narrow-padding--60 {
+  padding: var(--base-size-60);
+}
 .Box-narrow-padding--64 {
   padding: var(--base-size-64);
 }
 .Box-narrow-padding--80 {
   padding: var(--base-size-80);
 }
+.Box-narrow-padding--88 {
+  padding: var(--base-size-88);
+}
 .Box-narrow-padding--96 {
   padding: var(--base-size-96);
 }
@@ -199,12 +211,18 @@
   .Box-regular-padding--48 {
     padding: var(--base-size-48);
   }
+  .Box-regular-padding--60 {
+    padding: var(--base-size-60);
+  }
   .Box-regular-padding--64 {
     padding: var(--base-size-64);
   }
   .Box-regular-padding--80 {
     padding: var(--base-size-80);
   }
+  .Box-regular-padding--88 {
+    padding: var(--base-size-88);
+  }
   .Box-regular-padding--96 {
     padding: var(--base-size-96);
   }
@@ -266,12 +284,18 @@
   .Box-wide-padding--48 {
     padding: var(--base-size-48);
   }
+  .Box-wide-padding--60 {
+    padding: var(--base-size-60);
+  }
   .Box-wide-padding--64 {
     padding: var(--base-size-64);
   }
   .Box-wide-padding--80 {
     padding: var(--base-size-80);
   }
+  .Box-wide-padding--88 {
+    padding: var(--base-size-88);
+  }
   .Box-wide-padding--96 {
     padding: var(--base-size-96);
   }
@@ -335,12 +359,18 @@
 .Box-paddingBlockStart--48 {
   padding-block-start: var(--base-size-48);
 }
+.Box-paddingBlockStart--60 {
+  padding-block-start: var(--base-size-60);
+}
 .Box-paddingBlockStart--64 {
   padding-block-start: var(--base-size-64);
 }
 .Box-paddingBlockStart--80 {
   padding-block-start: var(--base-size-80);
 }
+.Box-paddingBlockStart--88 {
+  padding-block-start: var(--base-size-88);
+}
 .Box-paddingBlockStart--96 {
   padding-block-start: var(--base-size-96);
 }
@@ -401,12 +431,18 @@
 .Box-narrow-paddingBlockStart--48 {
   padding-block-start: var(--base-size-48);
 }
+.Box-narrow-paddingBlockStart--60 {
+  padding-block-start: var(--base-size-60);
+}
 .Box-narrow-paddingBlockStart--64 {
   padding-block-start: var(--base-size-64);
 }
 .Box-narrow-paddingBlockStart--80 {
   padding-block-start: var(--base-size-80);
 }
+.Box-narrow-paddingBlockStart--88 {
+  padding-block-start: var(--base-size-88);
+}
 .Box-narrow-paddingBlockStart--96 {
   padding-block-start: var(--base-size-96);
 }
@@ -467,12 +503,18 @@
   .Box-regular-paddingBlockStart--48 {
     padding-block-start: var(--base-size-48);
   }
+  .Box-regular-paddingBlockStart--60 {
+    padding-block-start: var(--base-size-60);
+  }
   .Box-regular-paddingBlockStart--64 {
     padding-block-start: var(--base-size-64);
   }
   .Box-regular-paddingBlockStart--80 {
     padding-block-start: var(--base-size-80);
   }
+  .Box-regular-paddingBlockStart--88 {
+    padding-block-start: var(--base-size-88);
+  }
   .Box-regular-paddingBlockStart--96 {
     padding-block-start: var(--base-size-96);
   }
@@ -534,12 +576,18 @@
   .Box-wide-paddingBlockStart--48 {
     padding-block-start: var(--base-size-48);
   }
+  .Box-wide-paddingBlockStart--60 {
+    padding-block-start: var(--base-size-60);
+  }
   .Box-wide-paddingBlockStart--64 {
     padding-block-start: var(--base-size-64);
   }
   .Box-wide-paddingBlockStart--80 {
     padding-block-start: var(--base-size-80);
   }
+  .Box-wide-paddingBlockStart--88 {
+    padding-block-start: var(--base-size-88);
+  }
   .Box-wide-paddingBlockStart--96 {
     padding-block-start: var(--base-size-96);
   }
@@ -603,12 +651,18 @@
 .Box-paddingInlineEnd--48 {
   padding-inline-end: var(--base-size-48);
 }
+.Box-paddingInlineEnd--60 {
+  padding-inline-end: var(--base-size-60);
+}
 .Box-paddingInlineEnd--64 {
   padding-inline-end: var(--base-size-64);
 }
 .Box-paddingInlineEnd--80 {
   padding-inline-end: var(--base-size-80);
 }
+.Box-paddingInlineEnd--88 {
+  padding-inline-end: var(--base-size-88);
+}
 .Box-paddingInlineEnd--96 {
   padding-inline-end: var(--base-size-96);
 }
@@ -668,12 +722,18 @@
 .Box-narrow-paddingInlineEnd--48 {
   padding-inline-end: var(--base-size-48);
 }
+.Box-narrow-paddingInlineEnd--60 {
+  padding-inline-end: var(--base-size-60);
+}
 .Box-narrow-paddingInlineEnd--64 {
   padding-inline-end: var(--base-size-64);
 }
 .Box-narrow-paddingInlineEnd--80 {
   padding-inline-end: var(--base-size-80);
 }
+.Box-narrow-paddingInlineEnd--88 {
+  padding-inline-end: var(--base-size-88);
+}
 .Box-narrow-paddingInlineEnd--96 {
   padding-inline-end: var(--base-size-96);
 }
@@ -728,12 +788,18 @@
   .Box-regular-paddingInlineEnd--48 {
     padding-inline-end: var(--base-size-48);
   }
+  .Box-regular-paddingInlineEnd--60 {
+    padding-inline-end: var(--base-size-60);
+  }
   .Box-regular-paddingInlineEnd--64 {
     padding-inline-end: var(--base-size-64);
   }
   .Box-regular-paddingInlineEnd--80 {
     padding-inline-end: var(--base-size-80);
   }
+  .Box-regular-paddingInlineEnd--88 {
+    padding-inline-end: var(--base-size-88);
+  }
   .Box-regular-paddingInlineEnd--96 {
     padding-inline-end: var(--base-size-96);
   }
@@ -795,12 +861,18 @@
   .Box-wide-paddingInlineEnd--48 {
     padding-inline-end: var(--base-size-48);
   }
+  .Box-wide-paddingInlineEnd--60 {
+    padding-inline-end: var(--base-size-60);
+  }
   .Box-wide-paddingInlineEnd--64 {
     padding-inline-end: var(--base-size-64);
   }
   .Box-wide-paddingInlineEnd--80 {
     padding-inline-end: var(--base-size-80);
   }
+  .Box-wide-paddingInlineEnd--88 {
+    padding-inline-end: var(--base-size-88);
+  }
   .Box-wide-paddingInlineEnd--96 {
     padding-inline-end: var(--base-size-96);
   }
@@ -863,12 +935,18 @@
 .Box-paddingBlockEnd--48 {
   padding-block-end: var(--base-size-48);
 }
+.Box-paddingBlockEnd--60 {
+  padding-block-end: var(--base-size-60);
+}
 .Box-paddingBlockEnd--64 {
   padding-block-end: var(--base-size-64);
 }
 .Box-paddingBlockEnd--80 {
   padding-block-end: var(--base-size-80);
 }
+.Box-paddingBlockEnd--88 {
+  padding-block-end: var(--base-size-88);
+}
 .Box-paddingBlockEnd--96 {
   padding-block-end: var(--base-size-96);
 }
@@ -928,12 +1006,18 @@
 .Box-narrow-paddingBlockEnd--48 {
   padding-block-end: var(--base-size-48);
 }
+.Box-narrow-paddingBlockEnd--60 {
+  padding-block-end: var(--base-size-60);
+}
 .Box-narrow-paddingBlockEnd--64 {
   padding-block-end: var(--base-size-64);
 }
 .Box-narrow-paddingBlockEnd--80 {
   padding-block-end: var(--base-size-80);
 }
+.Box-narrow-paddingBlockEnd--88 {
+  padding-block-end: var(--base-size-88);
+}
 .Box-narrow-paddingBlockEnd--96 {
   padding-block-end: var(--base-size-96);
 }
@@ -994,12 +1078,18 @@
   .Box-regular-paddingBlockEnd--48 {
     padding-block-end: var(--base-size-48);
   }
+  .Box-regular-paddingBlockEnd--60 {
+    padding-block-end: var(--base-size-60);
+  }
   .Box-regular-paddingBlockEnd--64 {
     padding-block-end: var(--base-size-64);
   }
   .Box-regular-paddingBlockEnd--80 {
     padding-block-end: var(--base-size-80);
   }
+  .Box-regular-paddingBlockEnd--88 {
+    padding-block-end: var(--base-size-88);
+  }
   .Box-regular-paddingBlockEnd--96 {
     padding-block-end: var(--base-size-96);
   }
@@ -1061,12 +1151,18 @@
   .Box-wide-paddingBlockEnd--48 {
     padding-block-end: var(--base-size-48);
   }
+  .Box-wide-paddingBlockEnd--60 {
+    padding-block-end: var(--base-size-60);
+  }
   .Box-wide-paddingBlockEnd--64 {
     padding-block-end: var(--base-size-64);
   }
   .Box-wide-paddingBlockEnd--80 {
     padding-block-end: var(--base-size-80);
   }
+  .Box-wide-paddingBlockEnd--88 {
+    padding-block-end: var(--base-size-88);
+  }
   .Box-wide-paddingBlockEnd--96 {
     padding-block-end: var(--base-size-96);
   }
@@ -1130,12 +1226,18 @@
 .Box-paddingInlineStart--48 {
   padding-inline-start: var(--base-size-48);
 }
+.Box-paddingInlineStart--60 {
+  padding-inline-start: var(--base-size-60);
+}
 .Box-paddingInlineStart--64 {
   padding-inline-start: var(--base-size-64);
 }
 .Box-paddingInlineStart--80 {
   padding-inline-start: var(--base-size-80);
 }
+.Box-paddingInlineStart--88 {
+  padding-inline-start: var(--base-size-88);
+}
 .Box-paddingInlineStart--96 {
   padding-inline-start: var(--base-size-96);
 }
@@ -1195,12 +1297,18 @@
 .Box-narrow-paddingInlineStart--48 {
   padding-inline-start: var(--base-size-48);
 }
+.Box-narrow-paddingInlineStart--60 {
+  padding-inline-start: var(--base-size-60);
+}
 .Box-narrow-paddingInlineStart--64 {
   padding-inline-start: var(--base-size-64);
 }
 .Box-narrow-paddingInlineStart--80 {
   padding-inline-start: var(--base-size-80);
 }
+.Box-narrow-paddingInlineStart--88 {
+  padding-inline-start: var(--base-size-88);
+}
 .Box-narrow-paddingInlineStart--96 {
   padding-inline-start: var(--base-size-96);
 }
@@ -1261,12 +1369,18 @@
   .Box-regular-paddingInlineStart--48 {
     padding-inline-start: var(--base-size-48);
   }
+  .Box-regular-paddingInlineStart--60 {
+    padding-inline-start: var(--base-size-60);
+  }
   .Box-regular-paddingInlineStart--64 {
     padding-inline-start: var(--base-size-64);
   }
   .Box-regular-paddingInlineStart--80 {
     padding-inline-start: var(--base-size-80);
   }
+  .Box-regular-paddingInlineStart--88 {
+    padding-inline-start: var(--base-size-88);
+  }
   .Box-regular-paddingInlineStart--96 {
     padding-inline-start: var(--base-size-96);
   }
@@ -1328,12 +1442,18 @@
   .Box-wide-paddingInlineStart--48 {
     padding-inline-start: var(--base-size-48);
   }
+  .Box-wide-paddingInlineStart--60 {
+    padding-inline-start: var(--base-size-60);
+  }
   .Box-wide-paddingInlineStart--64 {
     padding-inline-start: var(--base-size-64);
   }
   .Box-wide-paddingInlineStart--80 {
     padding-inline-start: var(--base-size-80);
   }
+  .Box-wide-paddingInlineStart--88 {
+    padding-inline-start: var(--base-size-88);
+  }
   .Box-wide-paddingInlineStart--96 {
     padding-inline-start: var(--base-size-96);
   }
@@ -1397,12 +1517,18 @@
 .Box-margin--48 {
   margin: var(--base-size-48);
 }
+.Box-margin--60 {
+  margin: var(--base-size-60);
+}
 .Box-margin--64 {
   margin: var(--base-size-64);
 }
 .Box-margin--80 {
   margin: var(--base-size-80);
 }
+.Box-margin--88 {
+  margin: var(--base-size-88);
+}
 .Box-margin--96 {
   margin: var(--base-size-96);
 }
@@ -1461,12 +1587,18 @@
 .Box-narrow-margin--48 {
   margin: var(--base-size-48);
 }
+.Box-narrow-margin--60 {
+  margin: var(--base-size-60);
+}
 .Box-narrow-margin--64 {
   margin: var(--base-size-64);
 }
 .Box-narrow-margin--80 {
   margin: var(--base-size-80);
 }
+.Box-narrow-margin--88 {
+  margin: var(--base-size-88);
+}
 .Box-narrow-margin--96 {
   margin: var(--base-size-96);
 }
@@ -1527,12 +1659,18 @@
   .Box-regular-margin--48 {
     margin: var(--base-size-48);
   }
+  .Box-regular-margin--60 {
+    margin: var(--base-size-60);
+  }
   .Box-regular-margin--64 {
     margin: var(--base-size-64);
   }
   .Box-regular-margin--80 {
     margin: var(--base-size-80);
   }
+  .Box-regular-margin--88 {
+    margin: var(--base-size-88);
+  }
   .Box-regular-margin--96 {
     margin: var(--base-size-96);
   }
@@ -1594,12 +1732,18 @@
   .Box-wide-margin--48 {
     margin: var(--base-size-48);
   }
+  .Box-wide-margin--60 {
+    margin: var(--base-size-60);
+  }
   .Box-wide-margin--64 {
     margin: var(--base-size-64);
   }
   .Box-wide-margin--80 {
     margin: var(--base-size-80);
   }
+  .Box-wide-margin--88 {
+    margin: var(--base-size-88);
+  }
   .Box-wide-margin--112 {
     margin: var(--base-size-112);
   }
@@ -1660,12 +1804,18 @@
 .Box-marginBlockStart--48 {
   margin-block-start: var(--base-size-48);
 }
+.Box-marginBlockStart--60 {
+  margin-block-start: var(--base-size-60);
+}
 .Box-marginBlockStart--64 {
   margin-block-start: var(--base-size-64);
 }
 .Box-marginBlockStart--80 {
   margin-block-start: var(--base-size-80);
 }
+.Box-marginBlockStart--88 {
+  margin-block-start: var(--base-size-88);
+}
 .Box-marginBlockStart--96 {
   margin-block-start: var(--base-size-96);
 }
@@ -1725,12 +1875,18 @@
 .Box-narrow-marginBlockStart--48 {
   margin-block-start: var(--base-size-48);
 }
+.Box-narrow-marginBlockStart--60 {
+  margin-block-start: var(--base-size-60);
+}
 .Box-narrow-marginBlockStart--64 {
   margin-block-start: var(--base-size-64);
 }
 .Box-narrow-marginBlockStart--80 {
   margin-block-start: var(--base-size-80);
 }
+.Box-narrow-marginBlockStart--88 {
+  margin-block-start: var(--base-size-88);
+}
 .Box-narrow-marginBlockStart--96 {
   margin-block-start: var(--base-size-96);
 }
@@ -1791,12 +1947,18 @@
   .Box-regular-marginBlockStart--48 {
     margin-block-start: var(--base-size-48);
   }
+  .Box-regular-marginBlockStart--60 {
+    margin-block-start: var(--base-size-60);
+  }
   .Box-regular-marginBlockStart--64 {
     margin-block-start: var(--base-size-64);
   }
   .Box-regular-marginBlockStart--80 {
     margin-block-start: var(--base-size-80);
   }
+  .Box-regular-marginBlockStart--88 {
+    margin-block-start: var(--base-size-88);
+  }
   .Box-regular-marginBlockStart--96 {
     margin-block-start: var(--base-size-96);
   }
@@ -1858,12 +2020,18 @@
   .Box-wide-marginBlockStart--48 {
     margin-block-start: var(--base-size-48);
   }
+  .Box-wide-marginBlockStart--60 {
+    margin-block-start: var(--base-size-60);
+  }
   .Box-wide-marginBlockStart--64 {
     margin-block-start: var(--base-size-64);
   }
   .Box-wide-marginBlockStart--80 {
     margin-block-start: var(--base-size-80);
   }
+  .Box-wide-marginBlockStart--88 {
+    margin-block-start: var(--base-size-88);
+  }
   .Box-wide-marginBlockStart--96 {
     margin-block-start: var(--base-size-96);
   }
@@ -1927,12 +2095,18 @@
 .Box-marginInlineEnd--48 {
   margin-inline-end: var(--base-size-48);
 }
+.Box-marginInlineEnd--60 {
+  margin-inline-end: var(--base-size-60);
+}
 .Box-marginInlineEnd--64 {
   margin-inline-end: var(--base-size-64);
 }
 .Box-marginInlineEnd--80 {
   margin-inline-end: var(--base-size-80);
 }
+.Box-marginInlineEnd--88 {
+  margin-inline-end: var(--base-size-88);
+}
 .Box-marginInlineEnd--96 {
   margin-inline-end: var(--base-size-96);
 }
@@ -1992,12 +2166,18 @@
 .Box-narrow-marginInlineEnd--48 {
   margin-inline-end: var(--base-size-48);
 }
+.Box-narrow-marginInlineEnd--60 {
+  margin-inline-end: var(--base-size-60);
+}
 .Box-narrow-marginInlineEnd--64 {
   margin-inline-end: var(--base-size-64);
 }
 .Box-narrow-marginInlineEnd--80 {
   margin-inline-end: var(--base-size-80);
 }
+.Box-narrow-marginInlineEnd--88 {
+  margin-inline-end: var(--base-size-88);
+}
 .Box-narrow-marginInlineEnd--96 {
   margin-inline-end: var(--base-size-96);
 }
@@ -2052,12 +2232,18 @@
   .Box-regular-marginInlineEnd--48 {
     margin-inline-end: var(--base-size-48);
   }
+  .Box-regular-marginInlineEnd--60 {
+    margin-inline-end: var(--base-size-60);
+  }
   .Box-regular-marginInlineEnd--64 {
     margin-inline-end: var(--base-size-64);
   }
   .Box-regular-marginInlineEnd--80 {
     margin-inline-end: var(--base-size-80);
   }
+  .Box-regular-marginInlineEnd--88 {
+    margin-inline-end: var(--base-size-88);
+  }
   .Box-regular-marginInlineEnd--96 {
     margin-inline-end: var(--base-size-96);
   }
@@ -2113,12 +2299,18 @@
   .Box-wide-marginInlineEnd--48 {
     margin-inline-end: var(--base-size-48);
   }
+  .Box-wide-marginInlineEnd--60 {
+    margin-inline-end: var(--base-size-60);
+  }
   .Box-wide-marginInlineEnd--64 {
     margin-inline-end: var(--base-size-64);
   }
   .Box-wide-marginInlineEnd--80 {
     margin-inline-end: var(--base-size-80);
   }
+  .Box-wide-marginInlineEnd--88 {
+    margin-inline-end: var(--base-size-88);
+  }
   .Box-wide-marginInlineEnd--96 {
     margin-inline-end: var(--base-size-96);
   }
@@ -2175,12 +2367,18 @@
 .Box-marginBlockEnd--48 {
   margin-block-end: var(--base-size-48);
 }
+.Box-marginBlockEnd--60 {
+  margin-block-end: var(--base-size-60);
+}
 .Box-marginBlockEnd--64 {
   margin-block-end: var(--base-size-64);
 }
 .Box-marginBlockEnd--80 {
   margin-block-end: var(--base-size-80);
 }
+.Box-marginBlockEnd--88 {
+  margin-block-end: var(--base-size-88);
+}
 .Box-marginBlockEnd--96 {
   margin-block-end: var(--base-size-96);
 }
@@ -2240,12 +2438,18 @@
 .Box-narrow-marginBlockEnd--48 {
   margin-block-end: var(--base-size-48);
 }
+.Box-narrow-marginBlockEnd--60 {
+  margin-block-end: var(--base-size-60);
+}
 .Box-narrow-marginBlockEnd--64 {
   margin-block-end: var(--base-size-64);
 }
 .Box-narrow-marginBlockEnd--80 {
   margin-block-end: var(--base-size-80);
 }
+.Box-narrow-marginBlockEnd--88 {
+  margin-block-end: var(--base-size-88);
+}
 .Box-narrow-marginBlockEnd--96 {
   margin-block-end: var(--base-size-96);
 }
@@ -2300,12 +2504,18 @@
   .Box-regular-marginBlockEnd--48 {
     margin-block-end: var(--base-size-48);
   }
+  .Box-regular-marginBlockEnd--60 {
+    margin-block-end: var(--base-size-60);
+  }
   .Box-regular-marginBlockEnd--64 {
     margin-block-end: var(--base-size-64);
   }
   .Box-regular-marginBlockEnd--80 {
     margin-block-end: var(--base-size-80);
   }
+  .Box-regular-marginBlockEnd--88 {
+    margin-block-end: var(--base-size-88);
+  }
   .Box-regular-marginBlockEnd--96 {
     margin-block-end: var(--base-size-96);
   }
@@ -2367,12 +2577,18 @@
   .Box-wide-marginBlockEnd--48 {
     margin-block-end: var(--base-size-48);
   }
+  .Box-wide-marginBlockEnd--60 {
+    margin-block-end: var(--base-size-60);
+  }
   .Box-wide-marginBlockEnd--64 {
     margin-block-end: var(--base-size-64);
   }
   .Box-wide-marginBlockEnd--80 {
     margin-block-end: var(--base-size-80);
   }
+  .Box-wide-marginBlockEnd--88 {
+    margin-block-end: var(--base-size-88);
+  }
   .Box-wide-marginBlockEnd--96 {
     margin-block-end: var(--base-size-96);
   }
@@ -2436,12 +2652,18 @@
 .Box-marginInlineStart--48 {
   margin-inline-start: var(--base-size-48);
 }
+.Box-marginInlineStart--60 {
+  margin-inline-start: var(--base-size-60);
+}
 .Box-marginInlineStart--64 {
   margin-inline-start: var(--base-size-64);
 }
 .Box-marginInlineStart--80 {
   margin-inline-start: var(--base-size-80);
 }
+.Box-marginInlineStart--88 {
+  margin-inline-start: var(--base-size-88);
+}
 .Box-marginInlineStart--96 {
   margin-inline-start: var(--base-size-96);
 }
@@ -2501,12 +2723,18 @@
 .Box-narrow-marginInlineStart--48 {
   margin-inline-start: var(--base-size-48);
 }
+.Box-narrow-marginInlineStart--60 {
+  margin-inline-start: var(--base-size-60);
+}
 .Box-narrow-marginInlineStart--64 {
   margin-inline-start: var(--base-size-64);
 }
 .Box-narrow-marginInlineStart--80 {
   margin-inline-start: var(--base-size-80);
 }
+.Box-narrow-marginInlineStart--88 {
+  margin-inline-start: var(--base-size-88);
+}
 .Box-narrow-marginInlineStart--96 {
   margin-inline-start: var(--base-size-96);
 }
@@ -2567,12 +2795,18 @@
   .Box-regular-marginInlineStart--48 {
     margin-inline-start: var(--base-size-48);
   }
+  .Box-regular-marginInlineStart--60 {
+    margin-inline-start: var(--base-size-60);
+  }
   .Box-regular-marginInlineStart--64 {
     margin-inline-start: var(--base-size-64);
   }
   .Box-regular-marginInlineStart--80 {
     margin-inline-start: var(--base-size-80);
   }
+  .Box-regular-marginInlineStart--88 {
+    margin-inline-start: var(--base-size-88);
+  }
   .Box-regular-marginInlineStart--96 {
     margin-inline-start: var(--base-size-96);
   }
@@ -2634,12 +2868,18 @@
   .Box-wide-marginInlineStart--48 {
     margin-inline-start: var(--base-size-48);
   }
+  .Box-wide-marginInlineStart--60 {
+    margin-inline-start: var(--base-size-60);
+  }
   .Box-wide-marginInlineStart--64 {
     margin-inline-start: var(--base-size-64);
   }
   .Box-wide-marginInlineStart--80 {
     margin-inline-start: var(--base-size-80);
   }
+  .Box-wide-marginInlineStart--88 {
+    margin-inline-start: var(--base-size-88);
+  }
   .Box-wide-marginInlineStart--96 {
     margin-inline-start: var(--base-size-96);
   }

package/components/Card/Card.css

@@ -310,7 +310,7 @@
 }
 
 .Card__heading {
-  margin-block-end: var(--base-size-20);
+  margin-block-end: var(--base-size-12);
   grid-area: heading;
 }
 
@@ -389,8 +389,7 @@
 
   margin-block-start: var(--base-size-20);
   min-height: var(--base-size-40);
-  width: -moz-fit-content;
-  width: fit-content;
+  width: auto;
   min-inline-size: 0;
   max-inline-size: calc(100% - var(--Card-arrowAction-endInset));
   justify-content: flex-start;

package/components/Hero/Hero.css

@@ -281,7 +281,7 @@
 }
 
 .Hero-actions {
-  margin-block-start: var(--base-size-32);
+  margin-block-start: var(--base-size-28);
   display: flex;
   align-items: center;
   flex-wrap: wrap;
@@ -398,7 +398,7 @@
 }
 
 .Hero--variant-gridline-expressive .Hero-actions {
-  margin-block-start: var(--base-size-24);
+  margin-block-start: var(--base-size-28);
 }
 
 .Hero--variant-gridline-expressive .Hero-trailing {
@@ -423,11 +423,11 @@
   }
 
   .Hero--variant-gridline-expressive .Hero-actions {
-    margin-block-start: var(--base-size-32);
+    margin-block-start: var(--base-size-28);
   }
 
   .Hero--variant-gridline-expressive .Hero-trailing {
-    margin-block-start: var(--base-size-32);
+    margin-block-start: var(--base-size-20);
   }
 }
 

package/components/Stack/Stack.css

@@ -96,12 +96,18 @@
 .Stack--gap-48 {
   gap: var(--base-size-48);
 }
+.Stack--gap-60 {
+  gap: var(--base-size-60);
+}
 .Stack--gap-64 {
   gap: var(--base-size-64);
 }
 .Stack--gap-80 {
   gap: var(--base-size-80);
 }
+.Stack--gap-88 {
+  gap: var(--base-size-88);
+}
 .Stack--gap-96 {
   gap: var(--base-size-96);
 }
@@ -180,12 +186,18 @@
 .Stack--padding-48 {
   padding: var(--base-size-48);
 }
+.Stack--padding-60 {
+  padding: var(--base-size-60);
+}
 .Stack--padding-64 {
   padding: var(--base-size-64);
 }
 .Stack--padding-80 {
   padding: var(--base-size-80);
 }
+.Stack--padding-88 {
+  padding: var(--base-size-88);
+}
 .Stack--padding-96 {
   padding: var(--base-size-96);
 }
@@ -248,12 +260,18 @@
 .Stack-narrow--padding-48 {
   padding: var(--base-size-48);
 }
+.Stack-narrow--padding-60 {
+  padding: var(--base-size-60);
+}
 .Stack-narrow--padding-64 {
   padding: var(--base-size-64);
 }
 .Stack-narrow--padding-80 {
   padding: var(--base-size-80);
 }
+.Stack-narrow--padding-88 {
+  padding: var(--base-size-88);
+}
 .Stack-narrow--padding-96 {
   padding: var(--base-size-96);
 }
@@ -300,12 +318,18 @@
 .Stack-narrow--gap-48 {
   gap: var(--base-size-48);
 }
+.Stack-narrow--gap-60 {
+  gap: var(--base-size-60);
+}
 .Stack-narrow--gap-64 {
   gap: var(--base-size-64);
 }
 .Stack-narrow--gap-80 {
   gap: var(--base-size-80);
 }
+.Stack-narrow--gap-88 {
+  gap: var(--base-size-88);
+}
 .Stack-narrow--gap-96 {
   gap: var(--base-size-96);
 }
@@ -369,12 +393,18 @@
   .Stack-regular--gap-48 {
     gap: var(--base-size-48);
   }
+  .Stack-regular--gap-60 {
+    gap: var(--base-size-60);
+  }
   .Stack-regular--gap-64 {
     gap: var(--base-size-64);
   }
   .Stack-regular--gap-80 {
     gap: var(--base-size-80);
   }
+  .Stack-regular--gap-88 {
+    gap: var(--base-size-88);
+  }
   .Stack-regular--gap-96 {
     gap: var(--base-size-96);
   }
@@ -437,12 +467,18 @@
   .Stack-regular--padding-48 {
     padding: var(--base-size-48);
   }
+  .Stack-regular--padding-60 {
+    padding: var(--base-size-60);
+  }
   .Stack-regular--padding-64 {
     padding: var(--base-size-64);
   }
   .Stack-regular--padding-80 {
     padding: var(--base-size-80);
   }
+  .Stack-regular--padding-88 {
+    padding: var(--base-size-88);
+  }
   .Stack-regular--padding-96 {
     padding: var(--base-size-96);
   }
@@ -507,12 +543,18 @@
   .Stack-wide--gap-48 {
     gap: var(--base-size-48);
   }
+  .Stack-wide--gap-60 {
+    gap: var(--base-size-60);
+  }
   .Stack-wide--gap-64 {
     gap: var(--base-size-64);
   }
   .Stack-wide--gap-80 {
     gap: var(--base-size-80);
   }
+  .Stack-wide--gap-88 {
+    gap: var(--base-size-88);
+  }
   .Stack-wide--gap-96 {
     gap: var(--base-size-96);
   }
@@ -575,12 +617,18 @@
   .Stack-wide--padding-48 {
     padding: var(--base-size-48);
   }
+  .Stack-wide--padding-60 {
+    padding: var(--base-size-60);
+  }
   .Stack-wide--padding-64 {
     padding: var(--base-size-64);
   }
   .Stack-wide--padding-80 {
     padding: var(--base-size-80);
   }
+  .Stack-wide--padding-88 {
+    padding: var(--base-size-88);
+  }
   .Stack-wide--padding-96 {
     padding: var(--base-size-96);
   }

package/components/Tabs/Tabs.css

@@ -112,9 +112,9 @@
   white-space: nowrap;
   font-family: var(--brand-fontStack-sansSerif);
   font-weight: var(--brand-text-weight-600);
-  font-size: var(--brand-text-size-100);
-  line-height: var(--brand-text-lineHeight-100);
-  letter-spacing: var(--brand-text-letterSpacing-100);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+  letter-spacing: var(--brand-text-letterSpacing-200);
   color: var(--brand-color-text-default);
 }
 

package/components/TextCursorAnimation/TextCursorAnimation.css

@@ -24,7 +24,7 @@
   background-color: color-mix(
     in srgb,
     var(--brand-color-canvas-subtle) calc((1 - var(--brand-TextCursorAnimation-cursor-progress, 0)) * 100%),
-    var(--brand-color-accent-primary) calc(var(--brand-TextCursorAnimation-cursor-progress, 0) * 100%)
+    var(--brand-TextCursorAnimation-cursor-color) calc(var(--brand-TextCursorAnimation-cursor-progress, 0) * 100%)
   );
 }
 

package/components/river/RiverBreakoutTabs/RiverBreakoutTabs.css

@@ -22,20 +22,77 @@
 }
 
 .RiverBreakoutTabs__sharedVisuals {
+  position: relative;
   order: 1;
   margin-block-end: var(--base-size-36);
   width: 100%;
+  overflow: hidden;
+  border-radius: var(--brand-borderRadius-small);
+}
+
+/* River removes the gridline top spacing when a subtle visual is present
+   (.RiverBreakout--variant-gridline:has(.River__visual--has-background)), bleeding the subtle
+   background up to the top gridline. Restore the top spacing so a non-full-bleed background is
+   inset from the top like the sides — only backgroundVisualFullBleed should reach the
+   top gridline. */
+.RiverBreakoutTabs:has(:global([class*='River__visual--has-background'])) {
+  padding-block-start: var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock);
 }
 
 .RiverBreakoutTabs__accordionSharedVisuals {
+  position: relative;
   margin-block-end: var(--base-size-16);
   width: 100%;
 }
 
 .RiverBreakoutTabs__sharedVisualPanel {
+  position: relative;
+  z-index: 1;
   min-width: 0;
 }
 
+.RiverBreakoutTabs__backgroundVisual {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.RiverBreakoutTabs__accordionSharedVisual {
+  position: relative;
+  z-index: 1;
+}
+
+.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,
+.RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {
+  padding: var(--base-size-32);
+}
+
+@media screen and (min-width: 63.25rem) {
+  .RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__sharedVisualPanel,
+  .RiverBreakoutTabs--has-background-visual .RiverBreakoutTabs__accordionSharedVisual {
+    padding: var(--base-size-64);
+  }
+}
+
+/* for imagePosition="block-end" */
+.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__sharedVisualPanel,
+.RiverBreakoutTabs--image-position-block-end .RiverBreakoutTabs__accordionSharedVisual {
+  padding-block-end: 0;
+}
+
+/* for backgroundVisualFullBleed — extend the backdrop to the gridline edges */
+.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__sharedVisuals {
+  overflow: visible;
+  border-radius: 0;
+}
+
+.RiverBreakoutTabs--background-visual-full-bleed .RiverBreakoutTabs__backgroundVisual {
+  inset-block-start: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerBlock));
+  inset-inline: calc(-1 * var(--brand-RiverBreakout-variant-gridline-spacing-outerInline));
+}
+
 .RiverBreakoutTabs__sharedVisual :is(img, picture, video),
 .RiverBreakoutTabs__accordionSharedVisual :is(img, picture, video) {
   display: block;
@@ -123,7 +180,6 @@
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--base-size-20);
   cursor: pointer;
   outline: none;
   padding-inline: 0;
@@ -138,11 +194,17 @@
   margin: 0;
 }
 
+/* 20px below the icon — only applies when an icon precedes the heading */
+.RiverBreakoutTabs__tab > * + .RiverBreakoutTabs__tabHeading {
+  margin-block-start: var(--base-size-20);
+}
+
 .RiverBreakoutTabs__wideTabListContent {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: var(--base-size-12);
+  margin-block-start: var(--base-size-12);
 }
 
 .RiverBreakoutTabs__wideTabListAction {
@@ -152,7 +214,7 @@
 }
 
 .RiverBreakoutTabs__wideTabListActionItem {
-  margin-block-start: var(--base-size-12);
+  margin-block-start: var(--base-size-16);
 }
 
 .RiverBreakoutTabs__content {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.68.1-rc.e248cf2a",
+  "version": "0.69.0-rc.50f5ffef",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",