@primer/brand-css 0.71.1-rc.8e8d7e50 → 0.72.0-rc.0349c28f

package/components/CTABanner/CTABanner.css

@@ -75,12 +75,16 @@
 }
 
 .CTABanner-container {
-  padding: var(--base-size-64) var(--base-size-32);
+  padding: var(--base-size-64) var(--base-size-20);
   z-index: 1;
   width: 100%;
   box-sizing: border-box;
 }
 
+.CTABanner-container--rounded {
+  border-radius: var(--brand-borderRadius-medium);
+}
+
 .CTABanner--variant-balanced .CTABanner-container {
   padding-inline: var(--base-size-20);
   padding-block: var(--base-size-32);
@@ -92,16 +96,17 @@
 }
 
 .CTABanner-content {
+  --CTABanner-content-gap: var(--base-size-16);
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-16);
+  gap: var(--CTABanner-content-gap);
   align-items: flex-start;
   max-width: 800px;
   margin: 0 auto;
 }
 
 .CTABanner--variant-minimal .CTABanner-content {
-  gap: 0;
+  --CTABanner-content-gap: 0;
 }
 
 .CTABanner--variant-balanced .CTABanner-content,
@@ -170,11 +175,8 @@
 
 /* Large breakpoint and up */
 @media screen and (min-width: 63.25rem) {
-  .CTABanner-content {
-    gap: var(--base-size-24);
-  }
   .CTABanner--variant-balanced .CTABanner-content {
-    gap: var(--base-size-32);
+    --CTABanner-content-gap: var(--base-size-32);
   }
   .CTABanner-container {
     padding: var(--base-size-96) var(--base-size-64);
@@ -311,3 +313,8 @@
 .CTABanner-description.CTABanner-description:has(code) {
   line-height: calc(1lh * 1.25);
 }
+
+.CTABanner-buttonGroup {
+  margin-block-start: calc(-1 * var(--CTABanner-content-gap, 0px));
+  padding-block-start: var(--base-size-12);
+}

package/components/Hero/Hero.css

@@ -67,6 +67,10 @@
   width: 100%;
 }
 
+.Hero-image > img {
+  border-radius: inherit;
+}
+
 .Hero-mediaContainer {
   width: 100%;
   height: 100%;

package/components/NavList/NavList.css

@@ -1,4 +1,12 @@
 .NavList {
+  --brand-NavList-label-indent-level-2: 0px;
+  --brand-NavList-label-indent-level-3: var(--base-size-16);
+  --brand-NavList-label-indent-level-4: var(--base-size-32);
+  --brand-NavList-label-indent-level-5: var(--base-size-48);
+  --brand-NavList-item-paddingInlineStart-base: var(--base-size-24);
+  --brand-NavList-control-paddingInlineStart: var(--base-size-8);
+  --brand-NavList-label-paddingInlineStart: var(--base-size-6);
+
   box-sizing: border-box;
   font-family: var(--brand-fontStack-sansSerif);
   color: var(--brand-color-text-default);
@@ -22,11 +30,12 @@
 
 .NavList__list--flat,
 .NavList__groupList {
-  --brand-NavList-alignedLabel-paddingInlineStart: var(--base-size-2);
+  --brand-NavList-item-paddingInlineStart-base: var(--base-size-2);
 }
 
-.NavList__groupList {
-  --brand-NavList-item-paddingInlineStart-level-2: var(--base-size-2);
+.NavList__groupList .NavList__subNav .NavList__item--leaf {
+  --brand-NavList-item-paddingInlineStart-base: 0px;
+  --brand-NavList-label-paddingInlineStart: var(--base-size-8);
 }
 
 .NavList__item,
@@ -69,6 +78,48 @@
   min-width: 0;
 }
 
+.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4) > .NavList__itemContent {
+  padding-block: calc(var(--base-size-8) + var(--base-size-2));
+  padding-inline-end: var(--base-size-16);
+}
+
+.NavList__item--level-2 {
+  --brand-NavList-item-label-indent: var(--brand-NavList-label-indent-level-2);
+}
+
+.NavList__item--level-3 {
+  --brand-NavList-item-label-indent: var(--brand-NavList-label-indent-level-3);
+}
+
+.NavList__item--level-4 {
+  --brand-NavList-item-label-indent: var(--brand-NavList-label-indent-level-4);
+}
+
+.NavList__item--level-5 {
+  --brand-NavList-item-label-indent: var(--brand-NavList-label-indent-level-5);
+}
+
+.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent {
+  min-height: var(--base-size-32);
+  padding-block: 0;
+  padding-inline-end: var(--base-size-16);
+}
+
+.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4, .NavList__item--level-5)
+  > .NavList__itemContent {
+  padding-inline-start: calc(
+    var(--brand-NavList-item-paddingInlineStart-base) + var(--brand-NavList-item-label-indent)
+  );
+}
+
+.NavList__item:not(.NavList__item--level-1) > .NavList__itemContent :is(.NavList__link, .NavList__accordionButton) {
+  padding-inline-start: var(--brand-NavList-control-paddingInlineStart);
+}
+
+.NavList__item:not(.NavList__item--level-1) > .NavList__itemContent .NavList__labelArea {
+  padding-inline-start: var(--brand-NavList-label-paddingInlineStart);
+}
+
 .NavList__link {
   position: relative;
   display: flex;
@@ -113,7 +164,6 @@
 .NavList__item:not(.NavList__item--level-1) > .NavList__itemContent .NavList__accordionButton .NavList__labelArea {
   order: 2;
   min-height: var(--base-size-32);
-  padding-inline-start: var(--base-size-6);
 }
 
 .NavList__item:not(.NavList__item--level-1)
@@ -146,7 +196,6 @@
 .NavList__link[aria-current]:not([aria-current='false']) {
   color: var(--brand-color-text-default);
   background-color: var(--brand-color-canvas-subtle);
-  padding-inline-start: var(--base-size-6);
 }
 
 .NavList__item--leaf:not(.NavList__item--level-1) .NavList__link[aria-current]:not([aria-current='false'])::before {
@@ -328,45 +377,6 @@
   margin-inline-start: auto;
 }
 
-.NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4) > .NavList__itemContent {
-  padding-block: calc(var(--base-size-8) + var(--base-size-2));
-  padding-inline-end: var(--base-size-16);
-}
-
-.NavList__item--level-2 > .NavList__itemContent {
-  padding-inline-start: var(--brand-NavList-item-paddingInlineStart-level-2, var(--base-size-24));
-}
-
-.NavList__item--level-3 > .NavList__itemContent {
-  padding-inline-start: var(--base-size-40);
-}
-
-.NavList__item--level-4 > .NavList__itemContent {
-  padding-inline-start: calc(var(--base-size-48) + var(--base-size-8));
-}
-
-.NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent {
-  min-height: var(--base-size-32);
-  padding-block: 0;
-  padding-inline: var(--base-size-16);
-}
-
-.NavList__item--leaf.NavList__item--level-2 > .NavList__itemContent {
-  padding-inline-start: var(--brand-NavList-alignedLabel-paddingInlineStart, var(--base-size-24));
-}
-
-.NavList__item--leaf.NavList__item--level-3 > .NavList__itemContent {
-  padding-inline-start: var(--base-size-40);
-}
-
-.NavList__item--leaf.NavList__item--level-4 > .NavList__itemContent {
-  padding-inline-start: calc(var(--base-size-48) + var(--base-size-8));
-}
-
-.NavList__item--leaf.NavList__item--level-5 > .NavList__itemContent {
-  padding-inline-start: calc(var(--base-size-64) + var(--base-size-8));
-}
-
 .NavList__item:is(.NavList__item--level-2, .NavList__item--level-3, .NavList__item--level-4)
   > .NavList__itemContent
   .NavList__toggleIcon {
@@ -378,7 +388,6 @@
   .NavList__accordionButton {
   min-height: var(--base-size-32);
   margin-block: calc(-1 * var(--base-size-8));
-  padding-inline-start: var(--base-size-8);
   border-radius: var(--brand-borderRadius-small);
 }
 
@@ -387,7 +396,7 @@
   .NavList__toggleIcon {
   position: absolute;
   inset-block-start: 50%;
-  inset-inline-start: calc(-1 * var(--base-size-8));
+  inset-inline-start: calc(-1 * var(--brand-NavList-control-paddingInlineStart));
   transform: translateY(-50%);
 }
 
@@ -421,19 +430,16 @@
 
 .NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link {
   min-height: var(--base-size-32);
-  padding-inline-start: var(--base-size-8);
   border-radius: var(--brand-borderRadius-small);
 }
 
 .NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__labelArea {
   min-height: calc(var(--base-size-32) - var(--brand-borderWidth-thin));
   margin-block-end: var(--brand-borderWidth-thin);
-  padding-inline-start: var(--base-size-6);
 }
 
 .NavList__item--leaf:not(.NavList__item--level-1) .NavList__link[aria-current]:not([aria-current='false']) {
   background-color: transparent;
-  padding-inline-start: var(--base-size-8);
 }
 
 .NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link:hover .NavList__labelArea,
@@ -445,7 +451,6 @@
 
 .NavList__item--leaf:not(.NavList__item--level-1) > .NavList__itemContent .NavList__link:hover {
   background-color: transparent;
-  padding-inline-start: var(--base-size-8);
 }
 
 [data-color-mode='dark'] .NavList {

package/components/SectionIntroStacked/SectionIntroStacked.css

@@ -1,5 +1,20 @@
 .SectionIntroStacked {
-  --brand-Grid-spacing-row: var(--base-size-48);
+  --brand-Grid-spacing-row: var(--base-size-64);
+}
+
+@media screen and (min-width: 48rem) and (max-width: 63.24rem) {
+  .SectionIntroStacked {
+    max-width: 618px;
+    margin-inline: auto;
+  }
+
+  .SectionIntroStacked.SectionIntroStacked--variant-gridline {
+    padding-inline: var(--base-size-32);
+    padding-block: calc(var(--base-size-64) - var(--base-size-4));
+
+    --SectionIntroStacked-item-divider-overflow-start: var(--base-size-32);
+    --SectionIntroStacked-item-divider-overflow-end: var(--base-size-32);
+  }
 }
 
 .SectionIntroStacked--variant-gridline {
@@ -21,15 +36,6 @@
   }
 }
 
-@media screen and (min-width: 63.25rem) {
-  .SectionIntroStacked--variant-gridline {
-    padding-inline: var(--base-size-64);
-    padding-block: var(--base-size-64);
-    --SectionIntroStacked-item-divider-overflow-start: 0px;
-    --SectionIntroStacked-item-divider-overflow-end: calc(var(--brand-Grid-spacing-margin) + var(--base-size-64));
-  }
-}
-
 @media screen and (min-width: 80rem) {
   .SectionIntroStacked--variant-gridline {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
@@ -71,10 +77,13 @@
   flex-direction: column;
 }
 
-@media screen and (max-width: 63.25rem) {
+@media screen and (max-width: 63.24rem) {
   .SectionIntroStacked-heading {
     font-size: var(--brand-text-size-600);
   }
+  .SectionIntroStacked-items {
+    overflow: hidden;
+  }
 }
 
 @media screen and (min-width: 63.25rem) {
@@ -86,15 +95,18 @@
   .SectionIntroStacked--variant-gridline .SectionIntroStacked-items {
     border-inline-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
     margin-block: calc(-1 * var(--base-size-64));
-    padding-block: 0;
+    padding-block: calc(var(--base-size-64) - var(--base-size-32));
     position: static;
     top: auto;
   }
 
+  .SectionIntroStacked-content {
+    padding-inline-end: var(--base-size-80);
+  }
+
   .SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {
     /* Inset item content from the vertical gridline */
-    padding-inline-start: var(--base-size-32);
-    padding-inline-end: var(--base-size-32);
+    padding-inline-start: var(--base-size-64);
   }
 }
 
@@ -137,21 +149,22 @@
 
 .SectionIntroStackedItem-item--with-icon {
   display: flex;
-  flex-direction: row;
   align-items: flex-start;
   gap: var(--base-size-24);
+  flex-direction: column;
 }
 
-@media screen and (min-width: 63.25rem) {
+@media screen and (min-width: 48rem) {
   .SectionIntroStackedItem-item--with-icon {
     gap: var(--base-size-48);
+    flex-direction: row;
   }
 }
 
 .SectionIntroStackedItem__content {
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-8);
+  gap: var(--base-size-12);
   flex: 1;
   min-width: 0;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.71.1-rc.8e8d7e50",
+  "version": "0.72.0-rc.0349c28f",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",