@primer/brand-css 0.79.0 → 0.79.1-rc.5d6b749b

package/components/LogoSuite/LogoSuite.css

@@ -75,21 +75,25 @@
   display: block;
 }
 
-.LogoSuite__logobar--variant-muted svg,
-.LogoSuite__logobar--variant-muted path {
+.LogoSuite__logobar--has-linked-logos :where(a) {
+  color: var(--brand-color-text-default);
+}
+
+.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) svg,
+.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) path {
   fill: var(--brand-LogoSuite-color-logo-muted);
 }
 
-.LogoSuite__logobar--variant-muted img {
+.LogoSuite__logobar--variant-muted:where(:not(.LogoSuite__logobar--has-linked-logos)) img {
   filter: var(--brand-LogoSuite-color-logo-filter-muted);
 }
 
-.LogoSuite__logobar--variant-emphasis svg,
-.LogoSuite__logobar--variant-emphasis path {
+.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) svg,
+.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) path {
   fill: var(--brand-LogoSuite-color-logo-emphasis);
 }
 
-.LogoSuite__logobar--variant-emphasis img {
+.LogoSuite__logobar--variant-emphasis:where(:not(.LogoSuite__logobar--has-linked-logos)) img {
   filter: var(--brand-LogoSuite-color-logo-filter-emphasis);
 }
 
@@ -226,45 +230,88 @@
   fill: var(--brand-color-text-muted);
 }
 
-/* Gridline expressive variant styles */
+/* Shared gridline variant styles */
+.LogoSuite--gridline,
 .LogoSuite--gridline-expressive {
   padding: 0;
 }
 
+.LogoSuite--gridline .LogoSuite__content,
 .LogoSuite--gridline-expressive .LogoSuite__content {
   padding-inline: 0;
   gap: 0;
 }
 
-.LogoSuite--gridline-expressive .LogoSuite__textContainer {
+.LogoSuite--gridline .LogoSuite__textContainer,
+.LogoSuite--gridline-expressive .LogoSuite__textContainer,
+.LogoSuite--gridline .LogoSuite__logobarContainer,
+.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding: var(--base-size-20);
 }
 
+.LogoSuite--gridline .LogoSuite__logobar,
 .LogoSuite--gridline-expressive .LogoSuite__logobar {
   margin-block-start: auto;
+  padding-block-start: 0;
 }
-.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);
+
+.LogoSuite--gridline .LogoSuite__heading + .LogoSuite__description,
+.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {
+  padding-block-start: var(--base-size-8);
 }
 
+.LogoSuite--gridline .LogoSuite__logobar,
+.LogoSuite--gridline .LogoSuite__logobar--has-marquee,
 .LogoSuite--gridline-expressive .LogoSuite__logobar,
 .LogoSuite--gridline-expressive .LogoSuite__logobar--has-marquee {
-  max-width: none;
   width: 100%;
+  max-width: none;
 }
 
-.LogoSuite--gridline-expressive .LogoSuite__heading + .LogoSuite__description {
-  padding-block-start: var(--base-size-8);
+/* Gridline variant styles */
+.LogoSuite--gridline .LogoSuite__textContainer {
+  padding: var(--base-size-40) var(--base-size-20) 0;
 }
 
-.LogoSuite--gridline-expressive .LogoSuite__logobar {
-  padding-block-start: 0;
+.LogoSuite--gridline .LogoSuite__logobarContainer {
+  padding: var(--base-size-40) var(--base-size-20) var(--base-size-48);
+}
+
+@media screen and (min-width: 48rem) {
+  .LogoSuite--gridline .LogoSuite__textContainer {
+    padding: var(--base-size-48) var(--base-size-40) 0;
+  }
+
+  .LogoSuite--gridline .LogoSuite__logobarContainer {
+    padding: var(--base-size-40) var(--base-size-40) var(--base-size-64);
+  }
+}
+
+@media screen and (min-width: 64rem) {
+  .LogoSuite--gridline .LogoSuite__textContainer {
+    padding: var(--base-size-48) var(--base-size-64) 0;
+  }
+
+  .LogoSuite--gridline .LogoSuite__logobarContainer {
+    padding: var(--base-size-48) var(--base-size-64) var(--base-size-64);
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .LogoSuite--gridline .LogoSuite__content {
+    border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  }
+}
+
+/* Gridline expressive variant styles */
+.LogoSuite--gridline-expressive .LogoSuite__textContainer {
+  padding: var(--base-size-20);
+}
+
+.LogoSuite--gridline-expressive .LogoSuite__logobarContainer {
+  padding: var(--base-size-32) var(--base-size-20) var(--base-size-32);
 }
 
 @media screen and (min-width: 48rem) {

package/components/river/RiverBreakoutTabs/RiverBreakoutTabs.css

@@ -120,7 +120,8 @@
   display: none;
 }
 
-.RiverBreakoutTabs__tablist {
+.RiverBreakoutTabs__tablist,
+.RiverBreakoutTabs__wideTabListContentRow {
   order: 2;
   display: grid;
   grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));
@@ -128,7 +129,7 @@
 }
 
 .RiverBreakoutTabs__wideTabListActions {
-  order: 3;
+  order: 4;
   display: grid;
   grid-template-columns: repeat(var(--river-breakout-tabs-columns), minmax(0, 1fr));
   gap: var(--base-size-40);
@@ -191,6 +192,7 @@
   font: inherit;
   text-align: left;
   padding-block-start: var(--base-size-28);
+  padding-block-end: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -213,6 +215,11 @@
   margin-block-start: var(--base-size-20);
 }
 
+.RiverBreakoutTabs__wideTabListContentRow {
+  order: 3;
+  padding-block-end: calc(var(--base-size-2) / 2);
+}
+
 .RiverBreakoutTabs__wideTabListContent {
   display: flex;
   flex-direction: column;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.79.0",
+  "version": "0.79.1-rc.5d6b749b",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",