@primer/brand-css 0.68.0-rc.982c487b → 0.68.0

package/components/Button/Button.css

@@ -8,12 +8,13 @@
   vertical-align: middle;
   align-items: center;
   justify-content: center;
-  transition: box-shadow var(--brand-animation-duration-faster);
+  transition: background-color 0.2s, border-color 0.2s;
   text-decoration: none;
-  border-radius: var(--brand-borderRadius-medium);
+  border-radius: var(--base-size-6);
   cursor: pointer;
-  border: solid var(--brand-borderWidth-thick) transparent;
+  border: solid var(--brand-borderWidth-thin) transparent;
   background: none;
+  box-sizing: border-box;
   display: inline-flex;
   gap: var(--brand-control-medium-gap);
 }
@@ -34,6 +35,10 @@
   cursor: not-allowed;
 }
 
+.Button--size-small .Button__text {
+  display: flex;
+}
+
 .Button__text {
   position: relative;
 }
@@ -77,7 +82,7 @@
 }
 
 .Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
-  background: var(--brand-button-primary-bgColor-hover);
+  background-color: var(--brand-button-primary-bgColor-hover);
 }
 
 .Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,
@@ -109,21 +114,20 @@
 /* secondary */
 
 .Button--secondary {
-  transition: background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);
-  background: var(--brand-button-secondary-bgColor-rest);
+  background-color: var(--brand-button-secondary-bgColor-rest);
   border-color: var(--brand-button-secondary-borderColor-rest);
   color: var(--brand-button-secondary-fgColor-rest);
   backdrop-filter: blur(var(--base-size-20));
 }
 
 .Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
-  background: var(--brand-button-secondary-bgColor-hover);
+  background-color: var(--brand-button-secondary-bgColor-hover);
   border-color: var(--brand-button-secondary-borderColor-hover);
 }
 
 .Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,
 .Button--secondary[aria-expanded='true'] {
-  background: var(--brand-button-secondary-bgColor-active);
+  background-color: var(--brand-button-secondary-bgColor-active);
   border-color: var(--brand-button-secondary-borderColor-active);
 }
 
@@ -144,8 +148,7 @@
 /* subtle */
 
 .Button--subtle {
-  transition: background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);
-  background: var(--brand-button-subtle-bgColor-rest);
+  background-color: var(--brand-button-subtle-bgColor-rest);
   border-width: var(--brand-borderWidth-thin);
   border-color: var(--brand-button-subtle-borderColor-rest);
   color: var(--brand-color-text-default);
@@ -153,13 +156,13 @@
 }
 
 .Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
-  background: var(--brand-button-subtle-bgColor-hover);
+  background-color: var(--brand-button-subtle-bgColor-hover);
   border-color: var(--brand-button-subtle-borderColor-hover);
 }
 
 .Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,
 .Button--subtle[aria-expanded='true'] {
-  background: var(--brand-button-subtle-bgColor-active);
+  background-color: var(--brand-button-subtle-bgColor-active);
   border-color: var(--brand-button-subtle-borderColor-active);
 }
 
@@ -186,7 +189,7 @@
 
 .Button--size-medium {
   min-height: var(--brand-control-medium-size);
-  padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-spacious);
+  padding: var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20);
 }
 
 .Button--size-large {

package/components/Hero/Hero.css

@@ -246,7 +246,7 @@
 .Hero-label {
   text-transform: uppercase;
   letter-spacing: 1px;
-  margin-block-end: var(--base-size-16);
+  margin-block-end: calc(var(--base-size-16) - var(--base-size-2));
   display: flex;
   align-items: center;
 }

package/components/Icon/Icon.css

@@ -44,7 +44,7 @@
 
 .Icon--background {
   padding: var(--base-size-12);
-  border-radius: var(--brand-borderRadius-medium);
+  border-radius: var(--base-size-12);
 }
 
 .Icon--color-default {

package/components/LogoSuite/LogoSuite.css

@@ -68,18 +68,7 @@
 .LogoSuite__logobar--variant-emphasis img,
 .LogoSuite__logobar--variant-emphasis a {
   width: auto;
-  height: var(--base-size-28);
-}
-
-@media screen and (min-width: 48rem) {
-  .LogoSuite__logobar--variant-muted svg,
-  .LogoSuite__logobar--variant-muted img,
-  .LogoSuite__logobar--variant-muted a,
-  .LogoSuite__logobar--variant-emphasis svg,
-  .LogoSuite__logobar--variant-emphasis img,
-  .LogoSuite__logobar--variant-emphasis a {
-    height: var(--base-size-32);
-  }
+  height: var(--base-size-32);
 }
 
 .LogoSuite__logobar--variant-muted svg,
@@ -241,7 +230,6 @@
 .LogoSuite--gridline-expressive .LogoSuite__content {
   padding-inline: 0;
   gap: 0;
-  max-width: 618px; /* From the Figma design */
 }
 
 .LogoSuite--gridline-expressive .LogoSuite__textContainer {
@@ -276,8 +264,12 @@
 }
 
 @media screen and (min-width: 48rem) {
+  .LogoSuite--gridline-expressive {
+    padding-inline: 91px;
+  }
+
   .LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
-    padding: var(--base-size-36);
+    padding: var(--base-size-40);
   }
   .LogoSuite--gridline-expressive .LogoSuite__content {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
@@ -288,6 +280,10 @@
 }
 
 @media screen and (min-width: 64rem) {
+  .LogoSuite--gridline-expressive {
+    padding-inline: 0;
+  }
+
   .LogoSuite--gridline-expressive .LogoSuite__content {
     max-width: 1280px;
   }

package/components/MediaPlaylist/MediaPlaylist.css

@@ -0,0 +1,358 @@
+.MediaPlaylist {
+  padding-block-start: var(--base-size-36);
+  padding-inline: var(--base-size-20);
+}
+
+@media screen and (max-width: 63.24rem) {
+  .MediaPlaylist {
+    width: 100%;
+    max-width: 38.625rem;
+    margin-inline: auto;
+    padding: 0;
+  }
+}
+
+.MediaPlaylist__layout {
+  display: flex;
+  flex-direction: column;
+  background: var(--brand-MediaPlaylist-bgColor);
+}
+
+.MediaPlaylist__playlist {
+  order: 2;
+  min-width: 0;
+  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.MediaPlaylist__heading {
+  display: flex;
+  min-height: var(--base-size-48);
+  align-items: center;
+  gap: var(--base-size-8);
+  padding: var(--base-size-12) var(--base-size-16);
+  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  color: var(--brand-color-text-muted);
+  font-family: var(--brand-fontStack-monospace);
+  font-size: var(--brand-text-size-100);
+  line-height: var(--brand-text-lineHeight-100);
+  text-transform: uppercase;
+}
+
+.MediaPlaylist__headingLabel {
+  margin: 0;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+  text-transform: inherit;
+}
+
+.MediaPlaylist__headingCounter {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-size-8);
+  color: var(--brand-color-text-default);
+}
+
+.MediaPlaylist__headingCounter::before {
+  content: '•';
+  color: var(--brand-color-text-muted);
+}
+
+.MediaPlaylist__mediaPanels {
+  order: 1;
+  width: 100%;
+  padding: var(--base-size-16);
+}
+
+.MediaPlaylist__mediaPanel {
+  min-width: 0;
+}
+
+.MediaPlaylist__mediaPanel[hidden] {
+  display: none;
+}
+
+.MediaPlaylist__panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-20);
+  width: 100%;
+}
+
+.MediaPlaylist__panelContent {
+  max-width: var(--brand-Prose-lineLength);
+}
+
+.MediaPlaylist__media {
+  overflow: hidden;
+  background-color: var(--base-color-scale-black-0);
+}
+
+.MediaPlaylist__media :is(img, picture, video, iframe) {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+}
+
+.MediaPlaylist__tablist {
+  order: 2;
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+}
+
+.MediaPlaylist--overflowItems .MediaPlaylist__tablist {
+  max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-12)));
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  scroll-padding-block: var(--base-size-24);
+}
+
+.MediaPlaylist__pagination {
+  order: 3;
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  padding: var(--base-size-12) var(--base-size-16) var(--base-size-16);
+  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.MediaPlaylist__item {
+  position: relative;
+  min-width: 0;
+  display: flex;
+  flex: 0 0 auto;
+  flex-direction: column;
+  align-items: flex-start;
+  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));
+  overflow-x: hidden;
+}
+
+.MediaPlaylist__item::before {
+  content: '';
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline: 0;
+  height: var(--brand-borderWidth-thin);
+  transform: scaleY(1);
+  transform-origin: 50% 100%;
+  background-color: var(--brand-color-border-muted);
+  transition: transform var(--brand-animation-duration-fast) ease,
+    background-color var(--brand-animation-duration-fast) ease;
+}
+
+.MediaPlaylist__item--selected {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+.MediaPlaylist__item--selected::before {
+  transform: scaleY(2);
+  background-color: var(--brand-color-accent-primary);
+}
+
+.MediaPlaylist__itemHeading {
+  display: block;
+  margin: 0;
+  color: var(--brand-color-text-muted);
+}
+
+.MediaPlaylist__item--selected .MediaPlaylist__itemHeading {
+  color: var(--brand-color-text-default);
+}
+
+.MediaPlaylist__itemHeadingContent {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.MediaPlaylist__itemHeadingDetails {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-4);
+  min-width: 0;
+}
+
+.MediaPlaylist__itemHeadingTitle {
+  display: -webkit-box;
+  color: inherit;
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.MediaPlaylist__tab {
+  box-sizing: border-box;
+  width: 100%;
+  min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-12)));
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  cursor: pointer;
+  outline: none;
+  padding: var(--base-size-12) var(--base-size-16);
+}
+
+.MediaPlaylist__tabContent {
+  display: flex;
+  align-items: flex-start;
+  min-width: 0;
+  width: 100%;
+  gap: var(--base-size-12);
+}
+
+.MediaPlaylist__thumbnail {
+  display: block;
+  flex-shrink: 0;
+  width: var(--base-size-112);
+  block-size: calc(var(--base-size-64) - var(--brand-borderWidth-thin));
+  overflow: hidden;
+  aspect-ratio: 16 / 9;
+  border-radius: var(--brand-borderRadius-small);
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+.MediaPlaylist__thumbnail > * {
+  display: block;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.MediaPlaylist__tab:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-4);
+}
+
+.MediaPlaylist__content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--base-size-12);
+}
+
+@media screen and (min-width: 38.625rem) {
+  .MediaPlaylist {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .MediaPlaylist {
+    box-sizing: border-box;
+    width: 100%;
+    max-inline-size: 80rem;
+    margin-inline: auto;
+    padding: 0;
+    border-inline: none;
+  }
+
+  .MediaPlaylist__layout {
+    --brand-MediaPlaylist-desktopGutter: 3.75rem;
+    --brand-MediaPlaylist-sidebarWidth: 27rem;
+
+    display: grid;
+    box-sizing: border-box;
+    width: 100%;
+    grid-template-areas: 'media tabs';
+    grid-template-columns: minmax(0, 1fr) minmax(0, var(--brand-MediaPlaylist-sidebarWidth));
+    -moz-column-gap: var(--brand-MediaPlaylist-desktopGutter);
+         column-gap: var(--brand-MediaPlaylist-desktopGutter);
+    padding-inline-start: var(--brand-MediaPlaylist-desktopGutter);
+  }
+
+  .MediaPlaylist__playlist {
+    grid-area: tabs;
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    padding-block-start: calc(var(--base-size-48) + var(--base-size-12));
+    border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
+  .MediaPlaylist--overflowItems .MediaPlaylist__tablist {
+    max-block-size: calc((3 * var(--base-size-64)) + (6 * var(--base-size-20)));
+  }
+
+  .MediaPlaylist__mediaPanels {
+    grid-area: media;
+    display: flex;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding-block: var(--base-size-80);
+    padding-inline: 0;
+  }
+
+  .MediaPlaylist__mediaPanel {
+    width: 100%;
+  }
+
+  .MediaPlaylist__panel {
+    gap: var(--base-size-40);
+  }
+
+  .MediaPlaylist__panelContent {
+    width: 100%;
+  }
+
+  .MediaPlaylist__media {
+    width: 100%;
+  }
+
+  .MediaPlaylist__media iframe {
+    aspect-ratio: 16 / 9;
+    border-radius: var(--base-size-6);
+  }
+
+  .MediaPlaylist__itemHeadingDetails {
+    font-size: var(--brand-text-size-200);
+    line-height: var(--brand-text-lineHeight-200);
+  }
+
+  .MediaPlaylist__panelContent :is(h1, h2, h3) + p {
+    margin-block-start: var(--base-size-12);
+  }
+
+  .MediaPlaylist__heading {
+    min-height: auto;
+    padding-block-start: var(--base-size-24);
+    padding-block-end: var(--base-size-12);
+    padding-inline-start: var(--base-size-32);
+    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);
+  }
+
+  .MediaPlaylist__item {
+    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));
+  }
+
+  .MediaPlaylist__tab {
+    min-block-size: calc(var(--base-size-64) + (2 * var(--base-size-20)));
+    padding-block: var(--base-size-20);
+    padding-inline-start: var(--base-size-32);
+    padding-inline-end: var(--brand-MediaPlaylist-desktopGutter);
+  }
+
+  .MediaPlaylist__tabContent {
+    align-items: center;
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .MediaPlaylist {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+
+  .MediaPlaylist__playlist {
+    border-inline-end: 0;
+  }
+}

package/components/Pagination/Pagination.css

@@ -6,133 +6,75 @@
 
 .Pagination__inner {
   display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
+  justify-content: center;
   gap: var(--base-size-8);
 }
 
-.Pagination__item {
-  min-width: var(--base-size-32);
-  height: var(--base-size-32);
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  text-decoration: none;
-  padding: var(--base-size-4) var(--base-size-8);
-  border: var(--brand-borderWidth-thick) solid transparent;
-  border-radius: var(--brand-borderRadius-medium);
-  transition: border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
-}
-
-.Pagination__item span {
-  font-size: var(--brand-text-size-100);
-  line-height: var(--base-size-20);
-}
-
-.Pagination__item:hover,
-.Pagination__item:focus {
-  text-decoration: none;
-  outline: 0;
-  transition-duration: 0.1s;
-  border-color: var(--brand-pagination-borderColor-hover);
-}
-
-.Pagination__item::after {
-  display: none;
-}
-
-.Pagination__item:active {
-  border-color: var(--brand-pagination-link-bgColor-active);
-}
-
-.Pagination__item[aria-current],
-.Pagination__item[aria-current]:hover {
-  background-color: var(--brand-pagination-link-bgColor-active);
-  border-color: transparent;
-}
-
-.Pagination__item[aria-current] * {
-  color: var(--brand-color-text-onEmphasis);
+.Pagination__pageItem {
+  transition: none; /* Prevents flash of background color when changing pages */
+  --brand-button-subtle-borderColor-rest: transparent;
+  --brand-button-subtle-borderColor-hover: transparent;
+  --brand-button-subtle-borderColor-active: transparent;
 }
 
-.Pagination__item[aria-disabled],
-.Pagination__item[aria-disabled]:hover,
-.Pagination__item[role='presentation'],
-.Pagination__item[role='presentation']:hover {
-  color: var(--brand-color-text-muted);
-  cursor: default;
-  background-color: transparent;
-  border-color: transparent;
-  font-size: inherit;
-  font-family: inherit;
-  padding-top: inherit;
-  padding-bottom: inherit;
-}
-
-.Pagination__item[aria-disabled] *,
-.Pagination__item[aria-disabled]:hover *,
-.Pagination__item[role='presentation'] *,
-.Pagination__item[role='presentation']:hover * {
-  color: inherit;
+.Pagination__controlContent {
+  position: relative;
+  display: inline-flex;
+  gap: var(--base-size-4);
+  align-items: center;
 }
 
-.Pagination__showPages .Pagination__item[rel='prev'] span,
-.Pagination__showPages .Pagination__item[rel='next'] span {
+.Pagination__controlArrowWrapper {
   display: none;
+  flex-shrink: 0;
 }
 
-.Pagination__item[rel='prev'] svg,
-.Pagination__item[rel='next'] svg {
-  margin-inline: 0;
-  position: relative;
+.Pagination__controlArrowWrapper--previous {
+  transform: translateX(var(--base-size-2));
 }
 
-.Pagination__item[rel='prev'] svg {
-  left: var(--base-size-2);
+.Pagination__controlArrowWrapper--next {
+  transform: translateX(calc(var(--base-size-2) * -1));
 }
 
-.Pagination__item[rel='next'] svg {
-  right: var(--base-size-2);
+.Pagination__controlArrow {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
 }
 
-@media screen and (min-width: 48rem) {
-  .Pagination__item[rel='prev'] span,
-  .Pagination__item[rel='next'] span {
-    display: block !important;
+@media screen and (max-width: 47.99rem) {
+  .Pagination__controlItem {
+    padding-inline: var(--base-size-8);
+    --brand-button-subtle-borderColor-rest: transparent;
+    --brand-button-subtle-borderColor-hover: transparent;
+    --brand-button-subtle-borderColor-active: transparent;
   }
 
-  .Pagination__item[rel='prev'] svg,
-  .Pagination__item[rel='next'] svg {
-    margin-inline: unset;
-    left: 0;
-    right: 0;
+  .Pagination__controlText {
+    position: absolute;
+    width: var(--base-size-2);
+    height: var(--base-size-2);
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    word-wrap: normal;
+    border: 0;
   }
 
-  .Pagination__item[rel='prev'][aria-disabled] svg,
-  .Pagination__item[rel='next'][aria-disabled] svg {
-    display: none;
+  .Pagination__controlArrowWrapper {
+    display: flex;
   }
-}
 
-@media (forced-colors: active) {
-  .Pagination__item[aria-current],
-  .Pagination__item[aria-current]:hover {
-    border-color: Highlight;
-    border-width: var(--brand-borderWidth-thicker);
+  .Pagination__controlItem > span {
+    display: flex;
+    align-items: center;
   }
-}
 
-/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
-@media (prefers-reduced-motion: reduce) {
-  .Pagination,
-  .Pagination::before,
-  .Pagination::after,
-  .Pagination * {
-    animation: none !important;
-    transition: none !important;
-    scroll-behavior: auto !important;
+  .Pagination__controlItem > span > span {
+    display: flex;
+    align-items: center;
+    line-height: 0;
   }
 }

package/components/SubNav/SubNav.css

@@ -367,23 +367,27 @@
   }
 
   .SubNav__links-overlay--open .SubNav__link {
-    padding: var(--base-size-8);
+    margin-inline-start: var(--base-size-8);
+    padding: var(--base-size-4) var(--base-size-12);
   }
 
   .SubNav__links-overlay--open .SubNav__link[aria-current]:not([aria-current='false']) {
-    display: inline-block;
+    display: inline-flex;
     background-color: var(--brand-SubNav-color-link-bgColor);
     border-radius: var(--brand-borderRadius-full);
-    padding: var(--base-size-2) var(--base-size-12) var(--base-size-4);
-    margin-inline-start: var(--base-size-8);
   }
 
   .SubNav__links-overlay--open .SubNav__link:hover {
+    display: inline-flex;
     background-color: var(--brand-SubNav-color-link-bgColor);
-    border-radius: var(--brand-borderRadius-medium);
+    border-radius: var(--brand-borderRadius-full);
+  }
+
+  .SubNav__links-overlay--open .SubNav__link {
+    display: inline-flex;
+    animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;
   }
 
-  .SubNav__links-overlay--open .SubNav__link,
   .SubNav__links-overlay--open .SubNav__action-container {
     display: block;
     animation: fade-in 0.3s var(--brand-animation-easing-glide) forwards;
@@ -407,6 +411,13 @@
     margin: 0;
     padding-inline-start: var(--base-size-16);
     padding-block-start: var(--base-size-8);
+    display: flex;
+    flex-direction: column;
+    gap: var(--base-size-8);
+  }
+
+  .SubNav__sub-menu .SubNav__link {
+    margin-inline-start: 0;
   }
 
   .SubNav__sub-menu--dropdown .SubNav__link:hover .SubNav__link-label {
@@ -437,10 +448,6 @@
     z-index: 100;
   }
 
-  .SubNav__link-label {
-    padding-block-end: var(--base-size-6);
-  }
-
   .SubNav__sub-menu--anchor {
     padding-inline: var(--base-size-16);
     padding-block-end: var(--base-size-16);
@@ -684,6 +691,10 @@
     cursor: pointer;
   }
 
+  .SubNav__link--has-sub-menu > .SubNav__link {
+    padding-inline-end: 0;
+  }
+
   .SubNav__sub-menu--dropdown .SubNav__link-label {
     position: relative;
     padding: var(--base-size-4) 0;
@@ -709,7 +720,6 @@
   .SubNav__links-overlay .SubNav__link[aria-current]:not([aria-current='false']) {
     background-color: var(--brand-SubNav-color-link-bgColor);
     line-height: 1.1em;
-    padding: var(--base-size-2) var(--base-size-12) var(--base-size-4);
   }
 
   /* Firefox optical alignment fix */
@@ -744,6 +754,11 @@
     transition: transform var(--brand-animation-duration-fast);
   }
 
+  .SubNav__link--has-sub-menu:not(.SubNav__link--has-active-sub-menu) .SubNav__sub-menu-icon {
+    position: relative;
+    top: calc(-1 * var(--brand-borderWidth-thin));
+  }
+
   .SubNav__sub-menu--anchor {
     padding-inline: var(--base-size-32);
   }

package/components/forms/Checkbox/Checkbox.css

@@ -9,8 +9,8 @@
 .Checkbox {
   align-items: center;
   background-color: var(--brand-control-checkbox-bg-default);
-  border: solid var(--brand-borderWidth-thick, 1px) var(--brand-control-color-border-default);
-  border-radius: var(--brand-borderRadius-small);
+  border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-color-border-default);
+  border-radius: 3px;
   cursor: pointer;
   display: inline-flex;
   height: 20px;
@@ -18,7 +18,7 @@
   margin: 3px 0; /* mimic default browser-applied vertical margin */
   transition: all 0.35s ease-out;
   width: 20px;
-  outline: 1px solid var(--brand-control-checkbox-bg-default);
+  outline: 1px solid transparent;
   box-shadow: 0 0 0 3px transparent;
 }
 
@@ -36,12 +36,12 @@
 }
 
 .Checkbox-checkmark {
-  height: 16px;
-  width: 16px;
+  height: var(--base-size-12);
+  width: var(--base-size-12);
 }
 
 .Checkbox-checkmark-path {
-  stroke: var(--brand-color-focus);
+  stroke: var(--brand-control-checkbox-fg-checked);
   stroke-dashoffset: 111.46px;
   stroke-dasharray: 111.46px;
   transition: all 350ms var(--brand-control-animation-easing);
@@ -57,6 +57,21 @@
   border-color: var(--brand-control-checkbox-border-checked);
 }
 
+.Checkbox-input:not(:checked):not([disabled]) + .Checkbox:not(.Checkbox--indeterminate):hover {
+  background: var(--brand-control-checkbox-bg-hover);
+  border-color: var(--brand-control-checkbox-border-hover);
+}
+
+.Checkbox-input:checked:not([disabled]) + .Checkbox:hover {
+  background: var(--brand-control-checkbox-bg-checked-hover);
+  border-color: var(--brand-control-checkbox-border-checked-hover);
+}
+
+.Checkbox-input:not([disabled]) + .Checkbox--indeterminate:hover {
+  background: var(--brand-control-checkbox-bg-indeterminate-hover);
+  border-color: var(--brand-control-checkbox-border-indeterminate-hover);
+}
+
 .Checkbox--indeterminate .Checkbox-checkmark {
   fill: var(--brand-control-checkbox-fg-checked);
 }
@@ -68,7 +83,7 @@
 }
 
 .Checkbox-input:focus + .Checkbox {
-  box-shadow: 0 0 0 3px var(--brand-color-focus);
+  box-shadow: 0 0 0 3px var(--brand-control-color-focus);
 }
 
 /* TODO: Check with a11y team */
@@ -77,19 +92,27 @@
   border-color: var(--brand-control-checkbox-border-checked);
 }
 
-.Checkbox-input[disabled] + .Checkbox,
-.Checkbox-input[disabled]:checked + .Checkbox {
+.Checkbox-input[disabled] + .Checkbox {
   -webkit-text-fill-color: var(--brand-control-color-fg-disabled);
   color: var(--brand-control-color-fg-disabled);
   cursor: not-allowed;
-  background-color: var(--brand-control-checkbox-bg-disabled);
-  border-color: var(--brand-control-color-border-disabled);
+  background-color: transparent;
+  border-color: var(--brand-control-checkbox-border-unchecked-disabled);
   opacity: 1;
 }
 
+.Checkbox-input[disabled]:checked + .Checkbox {
+  background-color: var(--brand-control-checkbox-bg-checked-disabled);
+  border-color: var(--brand-control-checkbox-border-checked-disabled);
+}
+
+.Checkbox-input[disabled]:checked + .Checkbox .Checkbox-checkmark-path {
+  stroke: var(--brand-control-checkbox-fg-checked-disabled);
+}
+
 @media (forced-colors: active) {
   .Checkbox-input:focus + .Checkbox {
-    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline: var(--brand-borderWidth-thin) solid Highlight;
     outline-offset: var(--base-size-2);
   }
 

package/components/forms/ControlGroup/ControlGroup.css

@@ -19,10 +19,11 @@
   display: flex;
   gap: var(--base-size-4);
   font-weight: var(--base-text-weight-medium);
+  align-items: center;
 }
 
 .ControlGroup__validation--success {
-  color: var(--brand-color-success-fg);
+  color: var(--brand-color-text-emphasized);
 }
 
 .ControlGroup__validation--error {
@@ -30,13 +31,11 @@
 }
 
 .ControlGroup__validation-icon--success {
-  position: relative;
-  top: -1px;
+  display: flex;
 }
 
 .ControlGroup__validation-icon--error {
-  position: relative;
-  top: -0.5px;
+  display: flex;
 }
 
 .ControlGroup__validation--animate-in {

package/components/forms/FormControl/FormControl.css

@@ -54,10 +54,10 @@
   cursor: pointer;
   font-size: var(--brand-text-size-100);
   font-weight: var(--base-text-weight-medium);
-  line-height: var(--base-size-24); /* FIXME */
-  position: relative;
-  top: 2px;
+  line-height: var(--base-size-24);
   width: 100%;
+  position: relative;
+  top: 1px;
 }
 
 .FormControl-control--radio {
@@ -73,6 +73,7 @@
 .FormControl-validation {
   display: flex;
   gap: var(--base-size-4);
+  align-items: center;
 }
 
 .FormControl-validation--success {
@@ -84,13 +85,11 @@
 }
 
 .FormControl-validation-success-icon {
-  position: relative;
-  top: -1px;
+  display: flex;
 }
 
 .FormControl-validation-error-icon {
-  position: relative;
-  top: -0.5px;
+  display: flex;
 }
 
 .FormControl-validation--animate-in {

package/components/forms/Radio/Radio.css

@@ -13,7 +13,7 @@
 .Radio {
   align-items: center;
   background-color: var(--brand-control-radio-bg-default);
-  border: solid var(--brand-borderWidth-thick, 1px) var(--brand-control-color-border-default);
+  border: solid var(--brand-borderWidth-thin, 1px) var(--brand-control-radio-border-default);
   border-radius: 50%;
   cursor: pointer;
   display: inline-flex;
@@ -34,11 +34,12 @@ Fixes safari bug where outline doesn't respect border-radius
 .Radio::before {
   content: '';
   position: absolute;
+  pointer-events: none;
   top: -4px;
   right: -2px;
   bottom: -2px;
   left: -4px;
-  border: 2px solid var(--brand-control-radio-bg-default);
+  border: var(--brand-borderWidth-thin) solid transparent;
   border-radius: 50%;
   width: 24px;
   height: 24px;
@@ -60,11 +61,11 @@ Fixes safari bug where outline doesn't respect border-radius
 .Radio-dot {
   position: absolute;
   display: none;
-  border-color: var(--brand-control-radio-dot-default);
+  border-color: var(--brand-control-radio-dot-checked);
   width: 12px;
   height: 12px;
   border-radius: 50%;
-  background: var(--brand-control-radio-dot-default);
+  background: var(--brand-control-radio-dot-checked);
   position: absolute;
   display: block;
   transform: scale(0.7);
@@ -86,13 +87,28 @@ Fixes safari bug where outline doesn't respect border-radius
   border-color: var(--brand-control-radio-border-checked);
 }
 
+.Radio-input:not(:checked):not([disabled]) + .Radio:hover {
+  background-color: var(--brand-control-radio-bg-hover);
+  border-color: var(--brand-control-radio-border-hover);
+}
+
+.Radio-input:checked:not([disabled]) + .Radio:hover {
+  background-color: var(--brand-control-radio-bg-checked-hover);
+  border-color: var(--brand-control-radio-border-checked-hover);
+}
+
+.Radio-input:checked:not([disabled]) + .Radio:hover .Radio-dot {
+  background: var(--brand-control-radio-dot-checked-hover);
+  border-color: var(--brand-control-radio-dot-checked-hover);
+}
+
 .Radio-input:checked + .Radio .Radio-dot {
   opacity: 1;
   transform: scale(1);
 }
 
 .Radio-input:focus + .Radio {
-  box-shadow: 0 0 0 4px var(--brand-color-focus);
+  box-shadow: 0 0 0 4px var(--brand-control-color-focus);
 }
 
 /* TODO: Check with a11y team */
@@ -106,13 +122,18 @@ Fixes safari bug where outline doesn't respect border-radius
   color: var(--brand-control-color-fg-disabled);
   cursor: not-allowed;
   background-color: var(--brand-control-radio-bg-disabled);
-  border-color: var(--brand-control-color-border-disabled);
+  border-color: var(--brand-control-radio-border-disabled);
   opacity: 1;
 }
 
+.Radio-input[disabled]:checked + .Radio .Radio-dot {
+  background: var(--brand-control-color-fg-disabled);
+  border-color: var(--brand-control-color-fg-disabled);
+}
+
 @media (forced-colors: active) {
   .Radio-input:focus + .Radio {
-    outline: var(--brand-borderWidth-thick) solid Highlight;
+    outline: var(--brand-borderWidth-thin) solid Highlight;
     outline-offset: var(--base-size-4);
   }
 

package/components/forms/Select/Select.css

@@ -36,9 +36,9 @@
 }
 
 .Select:focus-visible {
-  border-color: var(--brand-color-focus);
+  border-color: var(--brand-control-color-focus);
   outline: none;
-  box-shadow: 0 0 0 2px var(--brand-color-focus);
+  box-shadow: 0 0 0 2px var(--brand-control-color-focus);
 }
 
 @media (forced-colors: active) {

package/components/forms/TextInput/TextInput.css

@@ -102,8 +102,8 @@
 }
 
 .TextInput-wrapper:focus-within {
-  border-color: var(--brand-color-focus);
-  box-shadow: 0 0 0 1px var(--brand-color-focus);
+  border-color: var(--brand-control-color-focus);
+  box-shadow: 0 0 0 1px var(--brand-control-color-focus);
   outline: none;
 }
 

package/components/forms/Textarea/Textarea.css

@@ -109,8 +109,8 @@
 }
 
 .Textarea-wrapper:focus-within {
-  border-color: var(--brand-color-focus);
-  box-shadow: 0 0 0 1px var(--brand-color-focus);
+  border-color: var(--brand-control-color-focus);
+  box-shadow: 0 0 0 1px var(--brand-control-color-focus);
   outline: none;
 }
 

package/components/river/RiverAccordion/RiverAccordion.css

@@ -70,6 +70,15 @@
   border-radius: var(--brand-borderRadius-medium);
 }
 
+.RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {
+  margin-inline: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));
+  margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));
+}
+
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {
+  border-radius: 0;
+}
+
 .RiverAccordion__accordionContainer {
   grid-area: accordion;
 }
@@ -92,6 +101,8 @@
   grid-row: 1;
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
   opacity: 0;
   scale: 1.05;
   transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
@@ -99,11 +110,113 @@
 }
 
 .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {
+  display: block;
   width: 100%;
+  height: auto;
+  overflow: hidden;
+  border-radius: var(--brand-borderRadius-xlarge);
   -o-object-fit: contain;
      object-fit: contain;
 }
 
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.RiverAccordion__visualsWrapper > .RiverAccordion__visual img,
+.RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,
+.RiverAccordion__visualsWrapper > .RiverAccordion__visual video {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: inherit;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * img,
+.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--base-size-32);
+  background: var(--brand-RiverAccordion-visual-background, var(--brand-color-canvas-subtle));
+}
+
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {
+  max-width: 100%;
+  height: 100%;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+@media (min-width: 48rem) {
+  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {
+    padding: 0;
+    gap: 0;
+    align-items: stretch;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__accordionContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock)
+      var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);
+  }
+
+  .RiverAccordion--variant-gridline.RiverAccordion__align-start:has(.RiverAccordion__visual--has-background)
+    .RiverAccordion__accordionContainer {
+    padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);
+  }
+
+  .RiverAccordion--variant-gridline.RiverAccordion__align-end:has(.RiverAccordion__visual--has-background)
+    .RiverAccordion__accordionContainer {
+    padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);
+  }
+
+  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {
+    margin: 0;
+  }
+
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {
+    height: 100%;
+  }
+
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {
+    align-items: center;
+    justify-content: center;
+    padding: var(--base-size-64);
+  }
+
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > *,
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {
+    border-radius: var(--brand-borderRadius-large);
+  }
+}
+
 /* Show the visual when the corresponding accordion item is open */
 .RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),
 .RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.68.0-rc.982c487b",
+  "version": "0.68.0",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",