@primer/brand-css 0.67.0-rc.197d7044 → 0.67.0-rc.1f79483e

package/components/Card/Card.css

@@ -22,6 +22,7 @@
   grid-template-rows: var(--Card-grid-template-rows);
   position: relative;
   height: 100%;
+  border-radius: var(--brand-borderRadius-medium);
 }
 
 .Card--align-center .Card {
@@ -49,6 +50,18 @@
   justify-items: center;
 }
 
+.Card--backgroundColor-default {
+  background-color: var(--brand-Card-background-default);
+}
+
+.Card--backgroundColor-subtle {
+  background-color: var(--brand-color-canvas-subtle);
+}
+
+.Card--backgroundColor-none {
+  background-color: transparent;
+}
+
 .Card--tokensPosition-block-end {
   /* Moves the dynamic height row from tokens back to description because the block-end layout places tokens below the body copy. */
   --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;
@@ -156,14 +169,6 @@
   padding: 0;
 }
 
-.Card--variant-default {
-  background-color: var(--brand-Card-background-default);
-}
-
-.Card--variant-default.Card--ctaVariant-arrow {
-  background-color: transparent;
-}
-
 .Card--ctaVariant-arrow {
   --Card-arrowAction-endInset: var(--base-size-40);
 }
@@ -230,6 +235,7 @@
 
 .Card__outer:focus-within {
   outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  border-radius: var(--brand-borderRadius-medium);
 }
 
 .Card__outer:has(.Card--variant-minimal):focus-within {
@@ -334,6 +340,26 @@
   white-space: nowrap;
 }
 
+.Card:not(.Card--ctaVariant-arrow) .Card__action {
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+.Card:not(.Card--ctaVariant-arrow) .Card__action > span:first-child {
+  min-inline-size: 0;
+}
+
+.Card:not(.Card--ctaVariant-arrow) .Card__actionLabel {
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.Card--align-center:not(.Card--ctaVariant-arrow) .Card__actionLabel {
+  text-align: center;
+}
+
 .Card__actionLabelClip {
   --actionLabelClip-duration: 400ms;
   display: inline-flex;
@@ -413,7 +439,7 @@
 }
 
 .Card__skew-bounding {
-  border-radius: var(--brand-borderRadius-xlarge);
+  border-radius: var(--brand-borderRadius-medium);
   position: relative;
   overflow: hidden;
   z-index: 1;

package/components/LogoSuite/LogoSuite.css

@@ -127,7 +127,7 @@
   align-items: center;
   gap: var(--base-size-24);
   margin: auto;
-  max-width: 100dvw;
+  max-width: 100vw;
 }
 
 .LogoSuite__logobar-marqueeGroup {

package/components/PricingOptions/PricingOptions.css

@@ -103,13 +103,9 @@
     inset-inline-end: 0;
   }
 
-  /* Default layout: extend accent border into container padding to reach the container edge */
-  .PricingOptions--layout-default .PricingOptions__label-cell--has-label:first-child::after {
-    inset-inline-start: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
-  }
-
-  .PricingOptions--layout-default .PricingOptions__label-cell--has-label:last-child::after {
-    inset-inline-end: calc(var(--brand-pricing-options-container-padding-inline, 0px) * -1);
+  .PricingOptions--layout-default .PricingOptions__label-cell--has-label::after {
+    inset-inline-start: 0;
+    inset-inline-end: 0;
   }
 
   /* ---- Default layout labels ---- */
@@ -130,7 +126,18 @@
   }
 
   .PricingOptions--layout-default .PricingOptions__label-cell {
-    padding-inline: 0;
+    margin-inline: calc(var(--brand-pricing-options-item-gap) / 2 * -1);
+    padding-inline: calc(var(--brand-pricing-options-item-gap) / 2);
+  }
+
+  .PricingOptions--layout-default .PricingOptions__label-cell:first-child {
+    margin-inline-start: calc(var(--brand-pricing-options-container-padding-inline) * -1);
+    padding-inline-start: var(--brand-pricing-options-container-padding-inline);
+  }
+
+  .PricingOptions--layout-default .PricingOptions__label-cell:last-child {
+    margin-inline-end: calc(var(--brand-pricing-options-container-padding-inline) * -1);
+    padding-inline-end: var(--brand-pricing-options-container-padding-inline);
   }
 
   /* Empty cells: transparent bg/borders but structurally visible so dividers show */
@@ -145,7 +152,7 @@
     position: absolute;
     inset-block: 0;
     width: var(--brand-borderWidth-thin);
-    inset-inline-start: calc(var(--brand-pricing-options-item-gap) / 2 * -1);
+    inset-inline-start: 0;
     background-color: var(--brand-color-border-subtle);
   }
 

package/components/Testimonial/Testimonial.css

@@ -151,10 +151,7 @@
 
 .Testimonial-from {
   font-weight: var(--base-text-weight-normal);
-}
-
-.Testimonial-position {
-  font-family: var(--brand-fontStack-monospace);
+  text-transform: uppercase;
 }
 
 /* Expressive variant */
@@ -168,7 +165,7 @@
   .Testimonial--variant-expressive {
     flex-direction: row;
     align-items: flex-end;
-    gap: var(--base-size-64);
+    gap: var(--base-size-96);
   }
 }
 
@@ -193,6 +190,7 @@
   border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
   padding-block-start: var(--base-size-24);
   width: 100%;
+  gap: var(--base-size-8);
 }
 
 @media screen and (min-width: 48rem) {
@@ -236,6 +234,8 @@
 
 .Testimonial--variant-expressive .Testimonial-quote {
   font-family: var(--brand-fontStack-monospace);
+  line-height: var(--brand-text-lineHeight-400);
+  font-weight: var(--base-text-weight-normal);
 }
 
 .Testimonial-link {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.67.0-rc.197d7044",
+  "version": "0.67.0-rc.1f79483e",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",