@primer/brand-css 0.65.0-rc.4780c31f → 0.65.0-rc.8f2d335e

package/components/Accordion/Accordion.css

@@ -8,13 +8,67 @@
 }
 
 .Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__summary {
-  border-bottom: var(--brand-borderWidth-thicker) solid var(--brand-Accordion-border-color-emphasis);
+  background-color: var(--brand-color-canvas-subtle);
+  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  padding-block: var(--base-size-20);
+  padding-inline: var(--base-size-20);
+  gap: 0;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.Accordion__summary--emphasis::before {
+  content: '';
+  display: block;
+  width: calc(var(--base-size-8) - 1px);
+  height: var(--base-size-12);
+  flex-shrink: 0;
+  margin-inline-end: var(--base-size-12);
+  background-color: var(--brand-Accordion-indicator-idle);
+}
+
+.Accordion__summary--emphasis:hover::before {
+  background-color: var(--brand-Accordion-indicator-hover);
+}
+
+details[open] > .Accordion__summary--emphasis::before {
+  background-color: var(--brand-Accordion-indicator-active);
+}
+
+.Accordion__summary--emphasis :is(h3, h4, h5, h6) {
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--brand-text-size-100);
+  font-weight: var(--brand-text-weight-500);
+  line-height: var(--brand-text-lineHeight-100);
+  letter-spacing: 0.15px;
+  text-transform: uppercase;
+}
+
+.Accordion--emphasis:not(.Accordion .Accordion)
+  + .Accordion--emphasis:not(.Accordion .Accordion)
+  > .Accordion__summary {
+  border-block-start: none;
+}
+
+.Accordion--emphasis:not(.Accordion .Accordion) > .Accordion__content {
+  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  padding-block-start: var(--base-size-12);
+  padding-block-end: var(--base-size-12);
+  padding-inline: var(--base-size-20);
+}
+
+.Accordion--emphasis .Accordion--default:last-child {
+  border-bottom: none;
+}
+
+.Accordion--emphasis .Accordion--default:last-child::after {
+  display: none;
 }
 
 .Accordion--default::after {
   content: '';
-  border: 3px solid var(--brand-Accordion-border-color-default);
-  height: 0;
+  background-color: var(--brand-Accordion-border-color-default);
+  height: var(--brand-borderWidth-thin);
   transition: var(--brand-animation-duration-fast) transform;
   transform: scaleY(0);
   transform-origin: 50% 100%;
@@ -24,8 +78,10 @@
   left: 0;
 }
 
-.Accordion--default:hover::after {
-  transform: scaleY(0.35);
+.Accordion--default:hover::after,
+details[open].Accordion--default::after {
+  background-color: var(--brand-color-accent-primary);
+  transform: scaleY(1);
 }
 
 .Accordion__summary {
@@ -48,20 +104,27 @@
   outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
 }
 
+/* When open, move focus ring to the details element to wrap summary + content as one unit */
+details[open].Accordion:has(> summary:focus-visible) {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+}
+
+details[open].Accordion > .Accordion__summary:focus-visible {
+  outline: none;
+}
+
 .Accordion__summary--collapsed,
 .Accordion__summary--expanded {
-  font-family: var(--brand-fontStack-sansSerif);
-  font-weight: 500;
   cursor: pointer;
-  font-size: 32px;
-  line-height: 24px;
-  text-align: center;
-  height: 24px;
-  width: 24px;
-  -webkit-text-fill-color: transparent;
-  -webkit-box-decoration-break: clone;
-  box-decoration-break: clone;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--base-size-24);
+  width: var(--base-size-24);
+  color: var(--brand-color-text-default);
   position: absolute;
+  transition: opacity var(--brand-animation-duration-faster) ease;
 }
 
 .Accordion__summary:not(.Accordion__summary--reversed-toggles) .Accordion__summary--collapsed,
@@ -69,134 +132,110 @@
   right: 0;
 }
 
+.Accordion__summary--emphasis .Accordion__summary--collapsed,
+.Accordion__summary--emphasis .Accordion__summary--expanded {
+  position: static;
+  order: 1;
+}
+
+.Accordion__summary--emphasis .Accordion__summary--collapsed {
+  margin-inline-start: auto;
+}
+
+.Accordion__summary--emphasis .Accordion__summary--expanded {
+  margin-inline-start: calc(-1 * var(--base-size-24));
+}
+
 .Accordion__summary--reversed-toggles .Accordion__summary--collapsed,
 .Accordion__summary--reversed-toggles .Accordion__summary--expanded {
   left: 0;
 }
 
-.Accordion__summary--default .Accordion__summary--collapsed::before,
-.Accordion__summary--default .Accordion__summary--expanded::after {
-  transition: transform var(--brand-animation-duration-fast) ease, opacity var(--brand-animation-duration-faster) ease;
-  display: block;
-  background: linear-gradient(
-    -70deg,
-    var(--brand-Accordion-toggle-color-start) 0%,
-    var(--brand-Accordion-toggle-color-end) 100%
-  );
-  -webkit-background-clip: text;
-  background-clip: text;
+.Accordion__summary--default .Accordion__summary--collapsed,
+.Accordion__summary--default .Accordion__summary--expanded {
+  color: var(--brand-Accordion-toggle-color-start, var(--brand-color-text-default));
 }
 
 .Accordion__summary--toggleColor-default {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-default);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-default);
 }
 
 .Accordion__summary--toggleColor-blue {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-blue);
 }
 
 .Accordion__summary--toggleColor-blue-purple {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-blue-purple-start);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-blue-purple-end);
 }
 
 .Accordion__summary--toggleColor-coral {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-coral);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-coral);
 }
 
 .Accordion__summary--toggleColor-green {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-green);
 }
 
 .Accordion__summary--toggleColor-green-blue {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-green-blue-start);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-green-blue-end);
 }
 
 .Accordion__summary--toggleColor-gray {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-gray);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-gray);
 }
 
 .Accordion__summary--toggleColor-indigo {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-indigo);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-indigo);
 }
 
 .Accordion__summary--toggleColor-lemon {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lemon);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-lemon);
 }
 
 .Accordion__summary--toggleColor-lime {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-lime);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-lime);
 }
 
 .Accordion__summary--toggleColor-orange {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-orange);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-orange);
 }
 
 .Accordion__summary--toggleColor-pink {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-pink);
 }
 
 .Accordion__summary--toggleColor-pink-blue {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-pink-blue-start);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-pink-blue-end);
 }
 
 .Accordion__summary--toggleColor-purple {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-purple);
 }
 
 .Accordion__summary--toggleColor-purple-red {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-purple-red-start);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-purple-red-end);
 }
 
 .Accordion__summary--toggleColor-red {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-red);
 }
 
 .Accordion__summary--toggleColor-red-orange {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-red-orange-start);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-red-orange-end);
 }
 
 .Accordion__summary--toggleColor-teal {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-teal);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-teal);
 }
 
 .Accordion__summary--toggleColor-yellow {
   --brand-Accordion-toggle-color-start: var(--brand-Accordion-toggle-color-yellow);
-  --brand-Accordion-toggle-color-end: var(--brand-Accordion-toggle-color-yellow);
 }
 
-.Accordion__summary--default .Accordion__summary--collapsed::before {
-  font-weight: var(--base-text-weight-medium);
-  content: '–';
+.Accordion__summary.Accordion__summary--default .Accordion__summary--expanded {
   opacity: 0;
 }
 
-.Accordion__summary--default .Accordion__summary--expanded::after {
-  content: '+';
-}
-
-.Accordion__summary.Accordion__summary--emphasis .Accordion__summary--collapsed,
-.Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {
-  transform: translate(0, -2px);
-}
-
 .Accordion__summary.Accordion__summary--emphasis .Accordion__summary--expanded {
   opacity: 0;
 }
@@ -209,17 +248,15 @@ details[open] .Accordion__summary.Accordion__summary--emphasis .Accordion__summa
   opacity: 0;
 }
 
-details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--collapsed::before {
+details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--expanded {
   opacity: 1;
-  transform: rotateZ(180deg);
 }
 
-details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--expanded::after {
+details[open] > .Accordion__summary.Accordion__summary--default .Accordion__summary--collapsed {
   opacity: 0;
-  transform: rotateZ(180deg);
 }
 
-.Accordion__summary:not(.Accordion__summary--reversed-toggles) {
+.Accordion__summary--default:not(.Accordion__summary--reversed-toggles) {
   padding-inline-end: var(--base-size-48);
 }
 
@@ -281,7 +318,7 @@ details[open] > .Accordion__content {
 }
 
 .Accordion__summary--default + .Accordion__content {
-  margin-top: calc(var(--base-size-16) * -1); /* for 8px gap between question and answer */
+  margin-top: calc(var(--base-size-12) * -1); /* for 12px gap between question and answer */
 }
 
 details[open] > .Accordion__summary--reversed-toggles + .Accordion__content {

package/components/FAQ/FAQ.css

@@ -3,6 +3,22 @@
   margin: 0 auto;
 }
 
+.FAQ--variant-gridline {
+  padding-block-end: var(--base-size-40);
+  border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;
+  max-width: 100%;
+}
+
+.FAQ__content-wrapper--gridline {
+  max-width: var(--brand-FAQ-maxWidth-list);
+  margin: 0 auto;
+}
+
+.FAQ__heading-wrapper--gridline {
+  border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;
+  margin-block-end: var(--base-size-40);
+}
+
 .FAQ__heading {
   color: var(--brand-FAQ-color-heading);
   margin-bottom: var(--brand-FAQ-heading-marginBottom);
@@ -11,6 +27,9 @@
 .FAQ__subheading {
   margin-bottom: var(--base-size-16);
   color: var(--brand-color-text-muted);
+  text-transform: uppercase;
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
 }
 
 .FAQ__heading--start {
@@ -49,3 +68,13 @@
   padding: 0;
   margin: 0;
 }
+
+@media screen and (min-width: 63.25rem) {
+  .FAQ__heading-wrapper--gridline {
+    margin-block-end: var(--base-size-48);
+  }
+
+  .FAQ--variant-gridline {
+    padding-block-end: var(--base-size-64);
+  }
+}

package/components/FAQ/FAQGroup.css

@@ -4,18 +4,15 @@
   gap: var(--brand-stack-gap-spacious);
 }
 
-@media screen and (min-width: 48rem) {
-  .FAQGroup {
-    display: grid;
-  }
-
-  .FAQGroup__accordion {
-    display: none;
-  }
+.FAQGroup__accordion {
+  margin-block-start: var(--base-size-48);
 }
 
 .FAQGroup__panel-subHeading {
   margin-block-start: calc(var(--base-size-8) + 1px);
+  text-transform: uppercase;
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
 }
 
 .FAQGroup__tablist .FAQ__heading {
@@ -23,26 +20,62 @@
 }
 
 .FAQGroup__tablist-button {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  border: none;
   background-color: transparent;
-  justify-content: flex-start;
-}
-
-.FAQGroup__tablist-button > span {
+  padding-block: var(--base-size-8);
+  padding-inline: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-12);
+  width: 100%;
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--brand-text-size-100);
+  font-weight: var(--brand-text-weight-500);
+  line-height: var(--brand-text-lineHeight-100);
+  letter-spacing: 0.15px;
+  text-transform: uppercase;
+  text-align: start;
+  color: var(--brand-color-text-muted);
   overflow: hidden;
-  white-space: nowrap;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: gap var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
 }
 
-.FAQGroup__tablist-button[aria-selected='true'] {
-  background-color: var(--brand-FAQ-color-tabBg-selected);
+.FAQGroup__tablist-button:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: 2px;
 }
 
-.FAQGroup__tablist-button span {
-  color: var(--brand-color-text-muted);
+.FAQGroup__tablist-button::before {
+  content: '';
+  display: block;
+  width: calc(var(--base-size-8) + var(--base-size-2));
+  height: var(--base-size-12);
+  flex-shrink: 0;
+  background-color: var(--brand-FAQGroup-buttonIndicator-idle);
+  transform: scaleX(0.7);
+  transform-origin: left;
+  transition: transform var(--brand-animation-duration-fast) var(--brand-animation-easing-default),
+    background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
 }
 
-.FAQGroup__tablist-button[aria-selected='true'] span {
+.FAQGroup__tablist-button:hover::before {
+  background-color: var(--brand-FAQGroup-buttonIndicator-hover);
+}
+
+.FAQGroup__tablist-button[aria-selected='true'] {
   color: var(--brand-FAQ-color-tabLabel-selected);
+  gap: calc(var(--base-size-12) + 3px);
+}
+
+.FAQGroup__tablist-button[aria-selected='true']::before {
+  transform: scaleX(1);
+  background-color: var(--brand-FAQGroup-buttonIndicator-active);
 }
 
 .FAQGroup__nested-accordion-item summary h4 {
@@ -51,6 +84,20 @@
   line-height: var(--brand-text-lineHeight-200);
 }
 
+/* Gridline variant */
+
+.FAQGroup__tablist--gridline {
+  padding-inline-start: var(--base-size-48);
+  padding-block: var(--base-size-80);
+}
+
+.FAQGroup__content--gridline {
+  border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  padding-inline: var(--base-size-64);
+  padding-block-start: var(--base-size-80);
+  padding-block-end: var(--base-size-96);
+}
+
 @media (forced-colors: active) {
   .FAQGroup__tablist-button[aria-selected='true'] {
     border-color: Highlight;
@@ -58,3 +105,69 @@
     color: HighlightText;
   }
 }
+
+.FAQGroup__heading {
+  padding-inline: var(--base-size-20);
+}
+
+/* Custom tablet breakpoint */
+@media screen and (min-width: 618px) {
+  .FAQGroup__gridline-wrapper {
+    border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
+  .FAQGroup__accordion {
+    margin-block-start: 0;
+    max-width: 618px;
+    margin-inline: auto;
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+  .FAQGroup__heading {
+    max-width: 618px;
+    margin: 0 auto;
+  }
+
+  .FAQGroup__heading-wrapper {
+    padding-block-end: var(--base-size-40);
+  }
+  .FAQGroup__heading-wrapper--gridline {
+    border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;
+  }
+
+  .FAQGroup__accordion--gridline:first-child summary {
+    border-block-start: none !important;
+  }
+
+  .FAQGroup__accordion--gridline:last-child summary {
+    border-block-end: none !important;
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .FAQGroup {
+    display: grid;
+  }
+
+  .FAQGroup__accordion {
+    display: none;
+  }
+
+  .FAQGroup__heading {
+    padding-inline: 0;
+    max-width: 100%;
+  }
+
+  .FAQGroup__heading-wrapper {
+    padding-block-end: var(--base-size-64);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .FAQGroup__tablist--gridline {
+    border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
+  .FAQGroup__content--gridline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}

package/components/PricingOptions/PricingOptions.css

@@ -445,6 +445,7 @@
 .PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-heading :is(h1, h2, h3, h4, h5, h6) {
   font-size: var(--feature-list-font-size);
   line-height: var(--feature-list-line-height);
+  font-weight: var(--brand-text-subhead-weight-large);
   gap: var(--base-size-8);
   display: inline-flex;
   align-items: center;

package/components/SubNav/SubNav.css

@@ -2,6 +2,7 @@
   position: absolute;
   width: 100%;
   z-index: 2;
+  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
 }
 
 .SubNav__container--with-anchor-nav {
@@ -9,11 +10,15 @@
   position: relative;
 }
 
+.SubNav__container--with-anchor-nav .SubNav {
+  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
 .SubNav {
   width: 100%;
   display: flex;
-  padding: var(--base-size-16);
   z-index: 1;
+  background-color: var(--brand-SubNav-bgColor);
 }
 
 [data-color-mode='dark'] .SubNav {
@@ -21,15 +26,20 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
-.SubNav__heading {
+.SubNav__heading,
+.SubNav__subHeading {
   display: block;
-  font-weight: var(--base-text-weight-medium);
+  font-size: calc(var(--base-size-16) - 1px); /* One-off override to match design */
+  line-height: calc(var(--base-size-16) - 1px); /* One-off override to match design */
+  font-weight: var(--brand-text-subhead-weight-medium);
   color: var(--brand-color-text-default);
   font-family: var(--brand-heading-fontFamily);
   text-decoration: none;
 }
 
-.SubNav__heading:hover {
+.SubNav__heading:hover,
+.SubNav__subHeading:hover,
+.SubNav__link:hover .SubNav__link-label {
   color: var(--brand-color-text-muted);
   text-decoration: none !important; /* dotcom override */
 }
@@ -39,10 +49,17 @@
 }
 
 .SubNav__heading-container {
+  min-height: 60px;
   position: relative;
   z-index: 9998;
-  display: inline-block;
-  margin-inline-end: var(--base-size-16);
+  display: flex;
+  align-items: center;
+  padding: var(--base-size-16);
+  border-inline-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.SubNav__heading-container + .SubNav__heading-container {
+  padding-inline-start: var(--base-size-24);
 }
 
 .SubNav--has-shadow {
@@ -80,16 +97,6 @@
   display: none;
 }
 
-.SubNav__heading-separator {
-  position: relative;
-  top: 0;
-  color: var(--brand-color-text-muted);
-  min-width: var(--base-size-8);
-  min-height: var(--base-size-16);
-  display: inline-flex;
-  align-items: center;
-}
-
 /*
    * Anchor Nav Submenu
    */
@@ -142,8 +149,8 @@
 
 .SubNav__sub-menu--anchor {
   display: flex;
-  padding-block-start: var(--base-size-12);
-  padding-block-end: var(--base-size-20);
+  padding-block: var(--base-size-12);
+  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
 }
 
 .SubNav__sub-menu--anchor .SubNav__sub-menu-list {
@@ -154,28 +161,20 @@
   gap: var(--base-size-20);
 }
 
-.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label {
-  color: var(--brand-color-text-default);
-}
-
-.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label::after,
-.SubNav__link:hover .SubNav__link-label::after,
-.SubNav__link:focus-visible .SubNav__link-label::after,
-.SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after {
-  opacity: 1;
-  transform: scale(0.8, 1);
+.SubNav__link-label {
+  font-weight: 450; /* FIXME: unsupported in our font weight primitives */
 }
 
-.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label::after,
-.SubNav__link:active .SubNav__link-label::after {
-  border-color: var(--brand-color-text-default);
-  transform: scale(0.9, 1);
+.SubNav__sub-menu--anchor .SubNav__link-label {
+  padding: var(--base-size-6) var(--base-size-12);
+  background-color: transparent;
+  border-radius: var(--brand-borderRadius-full);
+  transition: background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default),
+    color var(--brand-animation-duration-default) var(--brand-animation-easing-default);
 }
 
-.SubNav__link[data-active='true'] .SubNav__link-label::after,
-.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label::after {
-  border-color: var(--brand-color-text-default);
-  opacity: 1;
+.SubNav__sub-menu--anchor .SubNav__link--is-in-view .SubNav__link-label {
+  background-color: var(--brand-SubNav-color-link-bgColor);
 }
 
 .SubNav__link:focus-visible .SubNav__link-label::after,
@@ -183,36 +182,13 @@
   opacity: 0;
 }
 
-.SubNav__link:hover .SubNav__link-label::after,
 .SubNav__link[aria-current]:not([aria-current='false']) * {
   color: var(--brand-SubNav-color-link-active);
   text-decoration: none !important; /* dotcom override */
 }
 
-.SubNav__link-label::after,
-.SubNav__subHeading::after {
-  content: '';
-  position: absolute;
-  bottom: calc(var(--base-size-2) * -1);
-  left: 0;
-  width: 100%;
-  height: 2px;
-  border-width: 2px;
-  border-bottom: var(--base-size-2) solid var(--brand-color-text-muted);
-  transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast),
-    border-color var(--brand-animation-duration-fast);
-  opacity: 1;
-  transform: scale(0);
-  transform-origin: center;
-}
-
-.SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after {
-  border-color: var(--brand-color-text-default);
-}
-
 .SubNav__link:hover .SubNav__link-label {
   transition: color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
-  color: var(--brand-SubNav-color-link-active);
 }
 
 .SubNav__link:hover .SubNav__link-label::after {
@@ -270,6 +246,17 @@
     display: block;
   }
 
+  .SubNav--open .SubNav--header-container-outer {
+    display: flex;
+    flex-direction: column;
+    max-height: var(--subnav-available-height, 100dvh);
+    overflow: hidden;
+  }
+
+  .SubNav--open .SubNav__header-container {
+    flex-shrink: 0;
+  }
+
   .SubNav--open + .SubNav__anchor-menu-outer-container {
     z-index: -1;
   }
@@ -289,6 +276,8 @@
     display: flex;
     width: 100%;
     white-space: pre;
+    position: relative;
+    z-index: 9998;
   }
 
   .SubNav__heading-separator {
@@ -304,49 +293,55 @@
     justify-content: center;
     z-index: 9998;
     display: none;
+    padding-inline: var(--base-size-8);
   }
 
   .SubNav__links-overlay--open {
     display: flex;
     flex-direction: column;
     gap: var(--base-size-8);
-    padding-block-start: var(--base-size-16);
-    padding-block-end: var(--base-size-16);
-  }
-
-  .SubNav--has-sub-heading .SubNav__links-overlay--open {
-    border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-    margin-block-start: var(--base-size-16);
+    padding-block: var(--base-size-16);
+    border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+    justify-content: flex-start;
+    overflow-y: auto;
+    min-height: 0;
   }
 
   .SubNav__links-overlay--open .SubNav__link:hover .SubNav__link-label {
     color: var(--brand-color-text-default);
   }
 
-  .SubNav__links-overlay--open .SubNav__link--has-sub-menu:hover .SubNav__link-label {
-    color: var(--brand-color-text-muted);
-  }
-
   .SubNav__overlay-toggle {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
     display: flex;
     position: relative;
     width: 100%;
-    order: 1;
     z-index: 9999;
-    padding: 0;
     justify-content: flex-end;
+    padding-inline-end: var(--base-size-16);
   }
 
   .SubNav--has-sub-heading:not(.SubNav--subHeadingActive) .SubNav__overlay-toggle {
-    margin-block-start: var(--base-size-12);
+    border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+    display: block;
+    padding-block: var(--base-size-12);
+    margin-block: 0;
   }
 
   .SubNav__overlay-toggle-content {
-    justify-content: space-between;
     width: 100%;
+    padding-inline-start: var(--base-size-16);
+  }
+
+  .SubNav__overlay-toggle-label {
+    background-color: var(--brand-SubNav-color-link-bgColor);
+    border: none;
+    border-radius: var(--brand-borderRadius-full);
+    padding: var(--base-size-4) var(--base-size-12);
+    gap: var(--base-size-6);
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font: inherit;
   }
 
   .SubNav--full-width .SubNav__overlay-toggle {
@@ -367,10 +362,26 @@
     color: var(--brand-SubNav-color-link-active);
   }
 
+  .SubNav__links-overlay--open .SubNav__link {
+    padding: var(--base-size-8);
+  }
+
+  .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) {
+    display: inline-block;
+    background-color: var(--brand-SubNav-color-link-bgColor);
+    border-radius: var(--brand-borderRadius-full);
+    padding: var(--base-size-4) var(--base-size-12);
+    margin-inline-start: var(--base-size-8);
+  }
+
+  .SubNav__links-overlay--open .SubNav__link:hover {
+    background-color: var(--brand-SubNav-color-link-bgColor);
+    border-radius: var(--brand-borderRadius-medium);
+  }
+
   .SubNav__links-overlay--open .SubNav__link,
   .SubNav__links-overlay--open .SubNav__action-container {
     display: block;
-    padding: var(--base-size-8) 0;
     animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;
   }
 
@@ -391,6 +402,7 @@
     padding: 0;
     margin: 0;
     padding-inline-start: var(--base-size-16);
+    padding-block-start: var(--base-size-8);
   }
 
   .SubNav__sub-menu--dropdown .SubNav__link:hover .SubNav__link-label {
@@ -422,8 +434,6 @@
   }
 
   .SubNav__link-label {
-    font-size: var(--brand-text-size-200);
-    font-weight: var(--base-text-weight-medium);
     padding-block-end: var(--base-size-6);
   }
 
@@ -447,19 +457,7 @@
     display: block;
     white-space: pre;
     position: relative;
-  }
-
-  .SubNav .SubNav__link-label::after {
-    opacity: 0;
-    transform: scale(0);
-    bottom: 0;
-  }
-
-  .SubNav__link:hover .SubNav__link-label::after,
-  .SubNav__link:focus-visible .SubNav__link-label::after,
-  .SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after {
-    opacity: 1;
-    transform: scale(1);
+    top: var(--base-size-2);
   }
 }
 
@@ -481,7 +479,7 @@
 .SubNav__heading:focus-visible,
 .SubNav__subHeading:focus-visible,
 .SubNav__sub-menu-toggle:focus-visible,
-.SubNav__overlay-toggle:focus-visible {
+.SubNav__overlay-toggle-label:focus-visible {
   outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
   outline-offset: var(--base-size-2);
 }
@@ -492,20 +490,24 @@
   white-space: nowrap;
 }
 
-.SubNav__subHeading[aria-current]:not([aria-current='false'])::after,
-.SubNav__subHeading:hover::after {
-  border-color: var(--brand-color-text-default);
-  opacity: 1;
-  transform: scale(0.8, 1);
-}
-
-.SubNav__subHeading:focus-visible::after {
-  opacity: 0;
+.SubNav__subHeading[aria-current]:not([aria-current='false']) {
+  background-color: var(--brand-SubNav-color-link-bgColor);
+  border: none;
+  border-radius: var(--brand-borderRadius-full);
+  padding: var(--base-size-6) var(--base-size-12);
 }
 
 @media screen and (min-width: 48rem) {
-  .SubNav {
-    padding: var(--base-size-16) var(--base-size-24);
+  .SubNav__heading-container {
+    padding-inline: var(--base-size-24);
+  }
+
+  .SubNav__overlay-toggle-content {
+    padding-inline-start: var(--base-size-24);
+  }
+
+  .SubNav__links-overlay--open {
+    padding: var(--base-size-24);
   }
 
   .SubNav--full-width {
@@ -527,16 +529,24 @@
 
 @media screen and (min-width: 63.25rem) {
   .SubNav {
-    padding: var(--base-size-16) var(--base-size-32);
     align-items: center;
     display: flex;
     z-index: 92;
+    padding-inline: var(--base-size-32);
+  }
+
+  .SubNav__links-overlay--open {
+    padding: 0;
   }
 
   .SubNav:has(+ .SubNav__anchor-menu-container) {
     padding-block-end: 0;
   }
 
+  .SubNav__heading-container {
+    padding-inline-start: 0;
+  }
+
   .SubNav--full-width {
     padding-inline: 0;
   }
@@ -549,11 +559,6 @@
     padding-block-end: 1px;
   }
 
-  .SubNav__heading {
-    font-size: calc(var(--base-size-20) - 2px);
-    line-height: var(--base-size-24);
-  }
-
   .SubNav__heading-separator {
     margin-inline-end: var(--base-size-20);
     display: inline-flex;
@@ -569,26 +574,18 @@
     align-items: center;
   }
 
-  .SubNav__heading-container {
-    margin-inline-end: var(--base-size-20);
-  }
-
   .SubNav__header-container {
     display: flex;
     align-items: center;
   }
 
-  .SubNav__subHeading {
-    font-size: var(--brand-text-size-100);
-    line-height: var(--brand-text-lineHeight-100);
-  }
-
   .SubNav__links-overlay {
     align-items: center;
     display: flex;
     gap: var(--base-size-20);
     z-index: 92;
     flex-grow: 1;
+    padding-inline-start: var(--base-size-24);
   }
 
   .SubNav__link {
@@ -596,6 +593,8 @@
     transition: color 0.2s var(--brand-animation-easing-glide);
     position: relative;
     padding: var(--base-size-4) 0;
+    /* Optical alignment */
+    top: 1px;
   }
 
   .SubNav__link-label {
@@ -620,22 +619,20 @@
 
   .SubNav__sub-menu.SubNav__sub-menu--dropdown {
     background-clip: padding-box;
-    background-color: var(--brand-SubNav-color-subMenu-bgColor);
-    border: var(--borderWidth-thin, max(1px, 0.0625rem)) solid var(--borderColor-default, var(--color-border-default));
-    border-radius: var(--brand-borderRadius-xlarge, 0.375rem);
-    box-shadow: var(--shadow-floating-legacy, var(--color-shadow-large));
+    background-color: var(--brand-color-canvas-default);
+    border: var(--brand-color-border-muted) solid var(--brand-borderWidth-thin);
+    border-radius: var(--brand-borderRadius-medium);
     left: 0;
     list-style: none;
     margin-block-start: var(--base-size-8);
-    padding: var(--base-size-24);
-    padding-inline-end: var(--base-size-24);
+    padding: var(--base-size-8);
     position: absolute;
-    top: 100%;
+    top: 90%;
     z-index: 9998;
     transition-timing-function: var(--brand-animation-easing-glide);
     transition-duration: var(--brand-animation-duration-fast);
     transition-property: opacity, transform;
-    left: calc(var(--base-size-4) / 4 * -16);
+    left: var(--base-size-4);
     visibility: hidden;
     opacity: 0;
     transform: scale(0.99) translateY(-0.7em) translateX(-8px);
@@ -650,7 +647,6 @@
     visibility: visible;
     opacity: 1;
     transform: scale(1) translateY(0) translateX(-8px);
-    box-shadow: var(--brand-SubNav-shadow);
   }
 
   .SubNav__sub-menu-toggle {
@@ -672,10 +668,6 @@
     display: block;
   }
 
-  .SubNav__sub-menu--dropdown .SubNav__link:hover .SubNav__link-label {
-    color: var(--brand-color-text-default) !important;
-  }
-
   .SubNav__sub-menu--dropdown .SubNav__link-label::after {
     opacity: 1;
     transform: scale(0);
@@ -694,18 +686,59 @@
     padding: var(--base-size-4) 0;
   }
 
-  /* Show underline on submenu parent when child has aria-current */
-  .SubNav__link--has-sub-menu:has(.SubNav__link[aria-current]:not([aria-current='false']))
-    > .SubNav__link
-    .SubNav__link-label::after {
-    opacity: 1;
-    transform: scale(0.8, 1);
+  /* Show pill on submenu parent */
+  .SubNav__link--has-active-sub-menu {
+    background-color: var(--brand-SubNav-color-link-bgColor);
+    border-radius: var(--brand-borderRadius-full);
+    padding: 0 var(--base-size-8) 0 0;
+    gap: 0;
   }
 
-  .SubNav__link--has-sub-menu .SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label::after,
-  .SubNav__link--has-sub-menu .SubNav__link:hover .SubNav__link-label::after {
-    opacity: 1;
-    transform: scale(1);
+  .SubNav__link--has-active-sub-menu > .SubNav__link {
+    padding: var(--base-size-4) 0 var(--base-size-4) var(--base-size-12);
+  }
+
+  .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link {
+    padding: var(--base-size-12);
+  }
+
+  /* Active link pill styling */
+  .SubNav__links-overlay .SubNav__link[aria-current]:not([aria-current='false']) {
+    background-color: var(--brand-SubNav-color-link-bgColor);
+    border-radius: var(--brand-borderRadius-full);
+    padding: var(--base-size-4) var(--base-size-12);
+    line-height: 1.1em;
+  }
+
+  /* Firefox optical alignment fix */
+  @supports (-moz-appearance: none) {
+    .SubNav__links-overlay .SubNav__link[aria-current]:not([aria-current='false']) .SubNav__link-label {
+      position: relative;
+      top: 1px;
+    }
+
+    .SubNav__links-overlay
+      .SubNav__link--has-sub-menu
+      .SubNav__link[aria-current]:not([aria-current='false'])
+      .SubNav__link-label {
+      top: 0;
+    }
+  }
+
+  .SubNav__links-overlay .SubNav__link--has-active-sub-menu .SubNav__link[aria-current]:not([aria-current='false']) {
+    padding-inline-end: var(--base-size-4);
+  }
+
+  .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link[aria-current]:not([aria-current='false']) {
+    background-color: transparent;
+    border-radius: var(--brand-borderRadius-medium);
+    padding: var(--base-size-4) var(--base-size-8) var(--base-size-4) var(--base-size-12);
+    top: unset;
+  }
+
+  .SubNav__sub-menu.SubNav__sub-menu--dropdown .SubNav__link:hover {
+    background-color: var(--brand-SubNav-color-link-bgColor);
+    border-radius: var(--brand-borderRadius-medium);
   }
 
   .SubNav__sub-menu-icon {
@@ -714,10 +747,6 @@
     transition: transform var(--brand-animation-duration-fast);
   }
 
-  .SubNav__link--has-sub-menu:hover .SubNav__sub-menu-icon {
-    transform: translateY(2px);
-  }
-
   .SubNav__sub-menu--anchor {
     padding-inline: var(--base-size-32);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.65.0-rc.4780c31f",
+  "version": "0.65.0-rc.8f2d335e",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",