@primer/brand-css 0.68.0-rc.0963e67e → 0.68.0-rc.4784c3e3

package/components/Pillar/Pillar.css

@@ -1,10 +1,13 @@
 .Pillar {
-  max-width: 50ch;
   color: var(--brand-color-text-default);
   display: flex;
   flex-direction: column;
 }
 
+.Pillar--has-max-width {
+  max-width: 50ch;
+}
+
 .Pillar--has-border {
   border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
   border-radius: var(--brand-borderRadius-medium);
@@ -28,7 +31,8 @@
 }
 
 .Pillar__image img,
-.Pillar__image span {
+.Pillar__image span,
+.Pillar__image picture {
   display: block;
 }
 

package/components/SectionIntroStacked/SectionIntroStacked.css

@@ -30,26 +30,6 @@
   }
 }
 
-.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);

package/components/Tiles/Tiles.css

@@ -37,29 +37,6 @@
   }
 }
 
-.Tiles--variant-gridlines {
-  position: relative;
-}
-
-.Tiles--variant-gridlines::before,
-.Tiles--variant-gridlines::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);
-}
-
-.Tiles--variant-gridlines::before {
-  top: 0;
-}
-
-.Tiles--variant-gridlines::after {
-  bottom: 0;
-}
-
 .Tiles--variant-gridlines .Tiles-grid {
   position: relative;
   padding-right: var(--brand-borderWidth-thin);

package/components/component-helpers/shared.css

@@ -0,0 +1,32 @@
+/*
+ * .gridline: horizontal gridlines that span the visible viewport, breaking
+ * out of constrained-width parents. Uses border-image-outset to extend the
+ * line visually without affecting layout or causing scrollbar overflow.
+ */
+
+.gridline {
+  position: relative;
+}
+
+.gridline::before,
+.gridline::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-top: var(--brand-borderWidth-thin) solid;
+  -o-border-image: linear-gradient(var(--brand-color-border-muted), var(--brand-color-border-muted)) 1;
+     border-image: linear-gradient(var(--brand-color-border-muted), var(--brand-color-border-muted)) 1;
+  border-image-outset: 0 100vw;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.gridline::before {
+  top: 0;
+}
+
+.gridline::after {
+  bottom: 0;
+}

package/components/river/RiverAccordion/RiverAccordion.css

@@ -40,26 +40,6 @@
   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);
@@ -90,6 +70,15 @@
   border-radius: var(--brand-borderRadius-medium);
 }
 
+.RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {
+  margin-inline: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerInline));
+  margin-block-start: calc(-1 * var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock));
+}
+
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {
+  border-radius: 0;
+}
+
 .RiverAccordion__accordionContainer {
   grid-area: accordion;
 }
@@ -112,6 +101,8 @@
   grid-row: 1;
   width: 100%;
   height: 100%;
+  display: flex;
+  align-items: center;
   opacity: 0;
   scale: 1.05;
   transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
@@ -119,11 +110,113 @@
 }
 
 .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {
+  display: block;
   width: 100%;
+  height: auto;
+  overflow: hidden;
+  border-radius: var(--brand-borderRadius-xlarge);
   -o-object-fit: contain;
      object-fit: contain;
 }
 
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual > * {
+  border-radius: var(--brand-borderRadius-medium);
+}
+
+.RiverAccordion__visualsWrapper > .RiverAccordion__visual img,
+.RiverAccordion__visualsWrapper > .RiverAccordion__visual picture,
+.RiverAccordion__visualsWrapper > .RiverAccordion__visual video {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: inherit;
+  -o-object-fit: contain;
+     object-fit: contain;
+}
+
+.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * img,
+.RiverAccordion__visualsWrapper > .RiverAccordion__visual > * video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: inherit;
+  -o-object-fit: cover;
+     object-fit: cover;
+}
+
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--base-size-32);
+  background: var(--brand-RiverAccordion-visual-background, var(--brand-color-canvas-subtle));
+}
+
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > * {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,
+.RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {
+  max-width: 100%;
+  height: 100%;
+  border-radius: var(--brand-borderRadius-large);
+}
+
+@media (min-width: 48rem) {
+  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) {
+    padding: 0;
+    gap: 0;
+    align-items: stretch;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__accordionContainer {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock)
+      var(--brand-RiverAccordion-variant-gridline-spacing-outerInline);
+  }
+
+  .RiverAccordion--variant-gridline.RiverAccordion__align-start:has(.RiverAccordion__visual--has-background)
+    .RiverAccordion__accordionContainer {
+    padding-inline-end: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);
+  }
+
+  .RiverAccordion--variant-gridline.RiverAccordion__align-end:has(.RiverAccordion__visual--has-background)
+    .RiverAccordion__accordionContainer {
+    padding-inline-start: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);
+  }
+
+  .RiverAccordion--variant-gridline:has(.RiverAccordion__visual--has-background) .RiverAccordion__visualsContainer {
+    margin: 0;
+  }
+
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper:has(.RiverAccordion__visual--has-background) {
+    height: 100%;
+  }
+
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background {
+    align-items: center;
+    justify-content: center;
+    padding: var(--base-size-64);
+  }
+
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background > *,
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background img,
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background picture,
+  .RiverAccordion--variant-gridline .RiverAccordion__visualsWrapper > .RiverAccordion__visual--has-background video {
+    border-radius: var(--brand-borderRadius-large);
+  }
+}
+
 /* Show the visual when the corresponding accordion item is open */
 .RiverAccordion:has(.RiverAccordion__item--open:nth-child(1)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(1),
 .RiverAccordion:has(.RiverAccordion__item--open:nth-child(2)) .RiverAccordion__visualsContainer .RiverAccordion__visual:nth-child(2),

package/components/river/river-shared.css

@@ -20,26 +20,6 @@
   }
 }
 
-.River--variant-gridline::before,
-.River--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;
-}
-
-.River--variant-gridline::before {
-  top: 0;
-}
-
-.River--variant-gridline::after {
-  bottom: 0;
-}
-
 @media screen and (min-width: 80rem) {
   .River--variant-gridline {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
@@ -475,25 +455,6 @@
   }
 }
 
-.RiverBreakout--variant-gridline::before,
-.RiverBreakout--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);
-}
-
-.RiverBreakout--variant-gridline::before {
-  top: 0;
-}
-
-.RiverBreakout--variant-gridline::after {
-  bottom: 0;
-}
-
 @media screen and (min-width: 618px) {
   .RiverBreakout--variant-gridline {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.68.0-rc.0963e67e",
+  "version": "0.68.0-rc.4784c3e3",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",