@primer/brand-css 0.65.0-rc.8f2d335e → 0.65.0-rc.974ab0ba

package/components/CTABanner/CTABanner.css

@@ -19,14 +19,84 @@
   );
 }
 
+/* Heading size overrides for balanced and minimal variants */
+.CTABanner--variant-balanced .CTABanner-heading {
+  font-weight: var(--brand-heading-weight-700);
+  font-size: var(--brand-text-size-700);
+  line-height: var(--brand-heading-lineHeight-700);
+  letter-spacing: var(--brand-heading-letterSpacing-700);
+}
+
+.CTABanner--variant-minimal .CTABanner-heading {
+  font-weight: var(--brand-heading-weight-400);
+  font-size: var(--brand-text-size-400);
+  line-height: var(--brand-text-lineHeight-400);
+  letter-spacing: var(--brand-heading-letterSpacing-400);
+}
+
+.CTABanner-grid {
+  gap: 0;
+  --brand-Grid-spacing-row: 0;
+  padding-inline: 0;
+}
+
+.CTABanner-grid-column--primary {
+  display: flex;
+  align-items: center;
+}
+
+.CTABanner-grid-column--secondary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.CTABanner--variant-minimal .CTABanner-grid-column--secondary {
+  justify-content: flex-end;
+}
+
+.CTABanner--variant-balanced .CTABanner-grid-column--secondary {
+  justify-content: flex-start;
+}
+
+@media screen and (min-width: 63.25rem) {
+  .CTABanner--variant-balanced .CTABanner-grid-column--secondary {
+    justify-content: flex-end;
+  }
+}
+
+/* Stack on narrow viewports */
+@media screen and (max-width: 63.24rem) {
+  .CTABanner--variant-minimal .CTABanner-grid-column--secondary {
+    justify-content: flex-start;
+  }
+
+  .CTABanner-grid-column--secondary {
+    margin-block-start: var(--base-size-24);
+  }
+}
+
+.CTABanner-outer-container--border {
+  border-block: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
 .CTABanner-container {
-  border-radius: var(--brand-borderRadius-xlarge);
-  padding: var(--base-size-40) var(--base-size-32);
+  padding: var(--base-size-64) var(--base-size-32);
   z-index: 1;
   width: 100%;
   box-sizing: border-box;
 }
 
+.CTABanner--variant-balanced .CTABanner-container {
+  padding-inline: var(--base-size-20);
+  padding-block: var(--base-size-32);
+}
+
+.CTABanner--variant-minimal .CTABanner-container {
+  padding-inline: var(--base-size-20);
+  padding-block: var(--base-size-40);
+}
+
 .CTABanner-content {
   display: flex;
   flex-direction: column;
@@ -36,10 +106,19 @@
   margin: 0 auto;
 }
 
+.CTABanner--variant-minimal .CTABanner-content {
+  gap: 0;
+}
+
+.CTABanner--variant-balanced .CTABanner-content,
+.CTABanner--variant-minimal .CTABanner-content {
+  max-width: 576px;
+  margin: 0;
+}
+
 .CTABanner-container--background {
-  border-radius: var(--brand-borderRadius-xlarge);
   background-repeat: no-repeat;
-  background-color: var(--brand-CTABanner-narrow-background-color, var(--brand-CTABanner-background-color));
+  background-color: var(--brand-CTABanner-bgColor);
   background-image: var(--brand-CTABanner-narrow-background-image-src, var(--brand-CTABanner-background-image-src));
   background-size: var(--brand-CTABanner-narrow-background-image-size, var(--brand-CTABanner-background-image-size));
 
@@ -50,7 +129,13 @@
 }
 
 .CTABanner-container--border {
-  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.CTABanner-container--border-gridlines {
+  border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  margin-inline: auto;
+  max-width: 534px; /* To match tablet for river */
 }
 
 .CTABanner-content--center {
@@ -65,22 +150,19 @@
 /* Medium breakpoint and up */
 @media screen and (min-width: 48rem) {
   .CTABanner-container {
-    padding: var(--base-size-80) var(--base-size-64);
+    padding: var(--base-size-80) var(--base-size-36);
   }
-}
 
-/* Large breakpoint and up */
-@media screen and (min-width: 63.25rem) {
-  .CTABanner-content {
-    gap: var(--base-size-24);
+  .CTABanner--variant-balanced .CTABanner-container {
+    padding: var(--base-size-36);
+    padding-block-end: var(--base-size-48);
   }
-  .CTABanner-container {
-    padding: var(--base-size-128) var(--base-size-64);
+
+  .CTABanner--variant-minimal .CTABanner-container {
+    padding: var(--base-size-36);
+    padding-block: var(--base-size-48);
   }
-}
 
-/* Regular */
-@media screen and (min-width: 48rem) {
   .CTABanner-container--background {
     background-color: var(--brand-CTABanner-regular-background-color, var(--brand-CTABanner-background-color));
     background-image: var(--brand-CTABanner-regular-background-image-src, var(--brand-CTABanner-background-image-src));
@@ -92,6 +174,28 @@
   }
 }
 
+/* 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-16);
+  }
+  .CTABanner-container {
+    padding: var(--base-size-96) var(--base-size-64);
+    max-width: 100%;
+  }
+
+  .CTABanner--variant-balanced .CTABanner-container {
+    padding: var(--base-size-64);
+  }
+
+  .CTABanner--variant-minimal .CTABanner-container {
+    padding: var(--base-size-64);
+  }
+}
+
 /* Wide */
 @media screen and (min-width: 80rem) {
   .CTABanner-container--background {
@@ -105,3 +209,14 @@
     );
   }
 }
+
+.CTABanner-image {
+  width: 100%;
+  height: auto;
+}
+
+.CTABanner--variant-balanced .CTABanner-image {
+  max-width: 476px;
+  width: 100%;
+  height: auto;
+}

package/components/Hero/Hero.css

@@ -256,6 +256,12 @@
   max-width: 924px;
 }
 
+.Hero-heading b {
+  color: var(--brand-color-accent-primary);
+  font-style: normal;
+  font-weight: inherit;
+}
+
 .Hero-heading--fullWidth {
   max-width: unset;
 }

package/components/SubNav/SubNav.css

@@ -370,7 +370,7 @@
     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);
+    padding: var(--base-size-2) var(--base-size-12) var(--base-size-4);
     margin-inline-start: var(--base-size-8);
   }
 
@@ -582,7 +582,7 @@
   .SubNav__links-overlay {
     align-items: center;
     display: flex;
-    gap: var(--base-size-20);
+    gap: var(--base-size-2);
     z-index: 92;
     flex-grow: 1;
     padding-inline-start: var(--base-size-24);
@@ -592,9 +592,8 @@
     text-decoration: none !important; /* dotcom override */
     transition: color 0.2s var(--brand-animation-easing-glide);
     position: relative;
-    padding: var(--base-size-4) 0;
-    /* Optical alignment */
-    top: 1px;
+    padding: var(--base-size-4) var(--base-size-12);
+    border-radius: var(--brand-borderRadius-full);
   }
 
   .SubNav__link-label {
@@ -705,18 +704,11 @@
   /* 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'])

package/package.json

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