@primer/brand-css 0.66.0-rc.972af494 → 0.66.0-rc.bfc673d9

package/components/SectionIntroStacked/SectionIntroStacked.css

@@ -2,6 +2,60 @@
   --brand-Grid-spacing-row: var(--base-size-48);
 }
 
+.SectionIntroStacked--variant-gridline {
+  position: relative;
+  padding-inline: var(--base-size-24);
+  padding-block: var(--base-size-32);
+
+  --SectionIntroStacked-item-divider-overflow-start: var(--base-size-24);
+  --SectionIntroStacked-item-divider-overflow-end: var(--base-size-24);
+}
+
+@media screen and (min-width: 63.25rem) {
+  .SectionIntroStacked--variant-gridline {
+    padding-inline: var(--base-size-64);
+    padding-block: var(--base-size-64);
+    /* At large viewports, left overflow is 0 (vertical divider bounds the start) */
+    --SectionIntroStacked-item-divider-overflow-start: 0px;
+    --SectionIntroStacked-item-divider-overflow-end: var(--base-size-64);
+  }
+}
+
+@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));
+  }
+}
+
+.SectionIntroStacked--variant-gridline::before,
+.SectionIntroStacked--variant-gridline::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  height: 0;
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  z-index: 1;
+}
+
+.SectionIntroStacked--variant-gridline::before {
+  top: 0;
+}
+
+.SectionIntroStacked--variant-gridline::after {
+  bottom: 0;
+}
+
+@media screen and (min-width: 80rem) {
+  .SectionIntroStacked--variant-gridline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
 .SectionIntroStacked-heading--muted,
 .SectionIntroStackedItem__item-text--muted {
   color: var(--brand-color-text-muted);
@@ -20,6 +74,11 @@
   max-width: none;
 }
 
+.SectionIntroStacked-description {
+  margin-block-start: var(--base-size-16);
+  max-width: 50ch;
+}
+
 .SectionIntroStacked-link {
   margin-block-start: var(--base-size-16);
 }
@@ -30,7 +89,6 @@
   list-style: none;
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-32);
 }
 
 @media screen and (max-width: 63.25rem) {
@@ -39,14 +97,86 @@
   }
 }
 
-@media screen and (min-width: 48rem) {
-  .SectionIntroStackedItem-item {
-    gap: var(--base-size-40);
-  }
-
+@media screen and (min-width: 63.25rem) {
   .SectionIntroStacked-items {
-    /* Optical alignment with adjacent content */
     position: relative;
     top: var(--base-size-2);
   }
+
+  .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;
+    position: static;
+    top: auto;
+  }
+
+  .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);
+  }
+}
+
+.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item {
+  border-block-end: none;
+  position: relative;
+}
+
+/* Restore equal padding on first/last items in gridline variant */
+.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:first-child {
+  padding-block-start: var(--base-size-40);
+}
+
+.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:last-child {
+  padding-block-end: var(--base-size-40);
+}
+
+.SectionIntroStacked--variant-gridline .SectionIntroStackedItem-item:not(:last-child)::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-start));
+  right: calc(-1 * var(--SectionIntroStacked-item-divider-overflow-end));
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.SectionIntroStackedItem-item {
+  padding-block: var(--base-size-40);
+  border-block-end: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+}
+
+.SectionIntroStackedItem-item:last-child {
+  border-block-end: none;
+  padding-block-end: 0;
+}
+
+.SectionIntroStackedItem-item:first-child {
+  padding-block-start: 0;
+}
+
+.SectionIntroStackedItem-item--with-icon {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: var(--base-size-24);
+}
+
+@media screen and (min-width: 63.25rem) {
+  .SectionIntroStackedItem-item--with-icon {
+    gap: var(--base-size-48);
+  }
+}
+
+.SectionIntroStackedItem__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-8);
+  flex: 1;
+  min-width: 0;
+}
+
+.SectionIntroStackedItem__icon {
+  flex-shrink: 0;
+  border-radius: var(--brand-borderRadius-medium);
 }

package/components/Testimonial/Testimonial.css

@@ -1,5 +1,4 @@
 .Testimonial {
-  display: grid;
   color: var(--brand-color-text-default);
   font-family: var(--brand-fontStack-sansSerif);
 }
@@ -87,11 +86,27 @@
   mask-composite: exclude;
 }
 
-.Testimonial--size-large .Testimonial__quoteMark {
+.Testimonial__quoteMark--hasBackground {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: calc(var(--base-size-48) + var(--base-size-8));
+  height: calc(var(--base-size-48) + var(--base-size-8));
+  border-radius: var(--base-size-12);
+  background-color: var(--brand-Testimonial-quoteMarkBackground, var(--base-color-scale-gray-0));
+  font-size: var(--base-size-64);
+  line-height: 1;
+}
+
+.Testimonial--size-large .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {
   font-size: 7.5rem; /* 120px */
   line-height: 1;
 }
 
+.Testimonial__quoteMarkGlyph {
+  display: block;
+}
+
 .Testimonial-quote {
   font-family: var(--brand-fontStack-sansSerif);
   font-size: var(--brand-Testimonial-quote-fontSize-default);
@@ -107,13 +122,9 @@
   letter-spacing: var(--brand-Testimonial-quote-letterSpacing-large);
 }
 
-.Testimonial-quote--muted {
-  color: var(--brand-color-text-muted);
-}
-
 .Testimonial-quote em,
 .Testimonial-quote b {
-  color: var(--brand-color-text-default);
+  color: var(--brand-Testimonial-quote-color-emphasis);
   font-style: normal;
   font-weight: inherit;
 }
@@ -146,83 +157,187 @@
   font-family: var(--brand-fontStack-monospace);
 }
 
+/* Expressive variant */
+.Testimonial--variant-expressive {
+  display: flex;
+  flex-direction: column;
+  gap: var(--base-size-48);
+}
+
+@media screen and (min-width: 48rem) {
+  .Testimonial--variant-expressive {
+    flex-direction: row;
+    align-items: flex-end;
+    gap: var(--base-size-64);
+  }
+}
+
+.Testimonial--variant-expressive .Testimonial__quoteWrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--base-size-24);
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.Testimonial--variant-expressive .Testimonial__media {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--base-size-24);
+  margin-block-start: 0;
+  flex: 0 0 auto;
+}
+
+.Testimonial--variant-expressive .Testimonial-caption {
+  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  padding-block-start: var(--base-size-24);
+  width: 100%;
+}
+
+@media screen and (min-width: 48rem) {
+  .Testimonial--variant-expressive .Testimonial__media {
+    min-width: 240px;
+    max-width: 320px;
+  }
+}
+
+.Testimonial--variant-expressive .Testimonial-from {
+  display: flex;
+  align-items: center;
+  gap: var(--base-size-8);
+  font-family: var(--brand-fontStack-monospace);
+  font-weight: var(--base-text-weight-medium);
+  text-transform: uppercase;
+  letter-spacing: 0.01em;
+}
+
+.Testimonial--variant-expressive .Testimonial-from::before {
+  content: '';
+  display: inline-block;
+  width: 9px;
+  height: 14px;
+  background-color: var(--testimonial-accent-color, var(--brand-Testimonial-quoteMarkColor-default));
+  flex-shrink: 0;
+}
+
+.Testimonial--variant-expressive .Testimonial__quoteMark {
+  font-family: var(--brand-fontStack-monospace);
+  font-weight: var(--brand-fontWeight-300);
+}
+
+.Testimonial--variant-expressive .Testimonial__quoteMarkGlyph {
+  transform: translateY(var(--base-size-12));
+}
+
+.Testimonial--variant-expressive .Testimonial__quoteMark:not(.Testimonial__quoteMark--hasBackground) {
+  margin-left: -0.18em;
+}
+
+.Testimonial--variant-expressive .Testimonial-quote {
+  font-family: var(--brand-fontStack-monospace);
+}
+
+.Testimonial-link {
+  margin-top: var(--base-size-8);
+}
+
 .Testimonial__quoteMark--default {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-default);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-default);
 }
 
 .Testimonial__quoteMark--blue {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-blue);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue);
 }
 
 .Testimonial__quoteMark--blue-purple {
   --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-blue-purple-start);
   --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-blue-purple-end);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-blue-purple);
 }
 
 .Testimonial__quoteMark--coral {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-coral);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-coral);
 }
 
 .Testimonial__quoteMark--green {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-green);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green);
 }
 
 .Testimonial__quoteMark--green-blue {
   --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-green-blue-start);
   --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-green-blue-end);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-green-blue);
 }
 
 .Testimonial__quoteMark--gray {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-gray);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-gray);
 }
 
 .Testimonial__quoteMark--indigo {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-indigo);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-indigo);
 }
 
 .Testimonial__quoteMark--lemon {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lemon);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lemon);
 }
 
 .Testimonial__quoteMark--lime {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-lime);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-lime);
 }
 
 .Testimonial__quoteMark--orange {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-orange);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-orange);
 }
 
 .Testimonial__quoteMark--pink {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-pink);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink);
 }
 
 .Testimonial__quoteMark--pink-blue {
   --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-pink-blue-start);
   --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-pink-blue-end);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-pink-blue);
 }
 
 .Testimonial__quoteMark--purple {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-purple);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple);
 }
 
 .Testimonial__quoteMark--purple-red {
   --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-purple-red-start);
   --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-purple-red-end);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-purple-red);
 }
 
 .Testimonial__quoteMark--red {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-red);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red);
 }
 
 .Testimonial__quoteMark--red-orange {
   --brand-Testimonial-quoteMarkColor-start: var(--brand-Testimonial-quoteMarkColor-red-orange-start);
   --brand-Testimonial-quoteMarkColor-end: var(--brand-Testimonial-quoteMarkColor-red-orange-end);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-red-orange);
 }
 
 .Testimonial__quoteMark--teal {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-teal);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-teal);
 }
 
 .Testimonial__quoteMark--yellow {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-yellow);
+  --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-yellow);
 }

package/components/river/RiverAccordion/RiverAccordion.css

@@ -32,6 +32,64 @@
   }
 }
 
+/* Gridline variant */
+
+.RiverAccordion--variant-gridline {
+  position: relative;
+  padding-inline: var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);
+  padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);
+}
+
+.RiverAccordion--variant-gridline::before,
+.RiverAccordion--variant-gridline::after {
+  content: '';
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100vw;
+  height: 0;
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  z-index: 1;
+}
+
+.RiverAccordion--variant-gridline::before {
+  top: 0;
+}
+
+.RiverAccordion--variant-gridline::after {
+  bottom: 0;
+}
+
+@media (min-width: 48rem) {
+  .RiverAccordion--variant-gridline {
+    --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);
+    --half-column: calc(50% - var(--gap-width) / 2);
+
+    gap: var(--gap-width);
+    align-items: center;
+  }
+
+  .RiverAccordion--variant-gridline.RiverAccordion__align-start {
+    grid-template-columns: var(--half-column) var(--half-column);
+    grid-template-areas: 'accordion visual';
+  }
+
+  .RiverAccordion--variant-gridline.RiverAccordion__align-end {
+    grid-template-columns: var(--half-column) var(--half-column);
+    grid-template-areas: 'visual accordion';
+  }
+}
+
+@media (min-width: 80rem) {
+  .RiverAccordion--variant-gridline {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper {
+  border-radius: var(--brand-borderRadius-medium);
+}
+
 .RiverAccordion__accordionContainer {
   grid-area: accordion;
 }
@@ -41,6 +99,7 @@
 }
 
 .RiverAccordion__visualsWrapper {
+  width: 100%;
   overflow: hidden;
   border-radius: var(--brand-borderRadius-xlarge);
   display: grid;
@@ -159,10 +218,12 @@
 }
 
 .RiverAccordion__icon {
-  opacity: 1;
-  transition: opacity var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  color: var(--brand-color-text-muted);
 }
 
 .RiverAccordion__item--open .RiverAccordion__icon {
-  opacity: 0;
+  color: var(--brand-color-text-default);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.66.0-rc.972af494",
+  "version": "0.66.0-rc.bfc673d9",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",