@primer/brand-css 0.64.1-rc.9bfb4676 → 0.65.0-rc.0d69fc03

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/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/Card/Card.css

@@ -190,19 +190,11 @@
   grid-area: heading;
 }
 
-.Card--fullWidth:not(.Card--align-center) .Card__heading {
-  max-width: 320px;
-}
-
 .Card__description {
   margin-bottom: var(--base-size-32);
   grid-area: description;
 }
 
-.Card--fullWidth:not(.Card--align-center) .Card__description {
-  max-width: 400px;
-}
-
 .Card__action {
   grid-area: action;
   margin-top: auto;

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);
+  }
+}