@primer/brand-css 0.65.0-rc.e1f4ec77 → 0.65.1-rc.7ef81232

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,93 @@
   );
 }
 
+/* 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 {
+  row-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--variant-balanced .CTABanner-grid-column--secondary {
+    order: -1;
+    margin-block-start: 0;
+  }
+
+  .CTABanner--variant-balanced .CTABanner-grid-column--primary {
+    margin-block-start: var(--base-size-24);
+  }
+
+  .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 +115,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 +138,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 +159,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 +183,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 +218,53 @@
     );
   }
 }
+
+.CTABanner-image {
+  width: 100%;
+  height: auto;
+}
+
+.CTABanner--variant-balanced .CTABanner-image {
+  max-width: 476px;
+  width: 100%;
+  height: auto;
+}
+
+.CTABanner-heading code,
+.CTABanner-description code {
+  font-size: inherit;
+  font-family: var(--brand-fontStack-monospace);
+  background-color: var(--brand-color-canvas-default);
+  padding: 0 var(--base-size-4) 0;
+  margin-inline: var(--base-size-2);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-small);
+  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
+}
+
+.CTABanner--bgColor-default .CTABanner-heading code,
+.CTABanner--bgColor-default .CTABanner-description code {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+.CTABanner-description code {
+  padding: 0 var(--base-size-4) 0;
+}
+
+.CTABanner-heading.CTABanner-heading:has(code) {
+  line-height: calc(1lh * 2);
+}
+
+@media screen and (min-width: 63.25rem) {
+  .CTABanner--variant-balanced .CTABanner-heading.CTABanner-heading:has(code) {
+    line-height: calc(1lh * 2.8);
+  }
+}
+
+.CTABanner--variant-minimal .CTABanner-heading.CTABanner-heading:has(code) {
+  line-height: calc(1lh * 1.9);
+}
+
+.CTABanner-description.CTABanner-description:has(code) {
+  line-height: calc(1lh * 1.25);
+}

package/components/Card/Card.css

@@ -98,6 +98,29 @@
   text-decoration: none !important;
 }
 
+.Card__link code,
+.Card__description code {
+  font-size: inherit;
+  font-family: var(--brand-fontStack-monospace);
+  background-color: var(--brand-color-canvas-subtle);
+  padding: 0 var(--base-size-4) var(--base-size-2);
+  margin-inline: var(--base-size-2);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-small);
+  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
+}
+
+.Card__description code {
+  padding: var(--base-size-2) var(--base-size-4) 0;
+}
+.Card__link:has(code) {
+  line-height: calc(1lh * 1.4);
+}
+
+.Card__description.Card__description:has(code) {
+  line-height: calc(1lh * 1.25);
+}
+
 .Card--disableAnimation:hover .Card__link {
   text-decoration: underline !important;
 }

package/components/EyebrowText/EyebrowText.css

@@ -0,0 +1,4 @@
+.EyebrowText {
+  text-transform: uppercase;
+  letter-spacing: var(--brand-text-letterSpacing-100);
+}

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