@primer/brand-css 0.67.0-rc.c9e85b47 → 0.67.0-rc.eb80fcc4

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/PricingOptions/PricingOptions.css

@@ -91,6 +91,7 @@
     inset-inline-end: calc(var(--brand-pricing-options-item-gap, 0px) / 2 * -1);
     height: var(--brand-borderWidth-thin);
     background-color: var(--brand-color-text-emphasized);
+    z-index: 1;
   }
 
   /* First cell: don't overflow past container start (cards override below) */
@@ -103,13 +104,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 +127,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 +153,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/components/Token/Token.css

@@ -36,15 +36,6 @@
   background-color: var(--brand-Token-bgColor-hover-default);
 }
 
-.Token--variant-dark-gray {
-  background-color: var(--brand-Token-bgColor-dark-gray);
-  color: var(--brand-Token-fgColor-dark-gray);
-}
-
-.Token--interactive.Token--variant-dark-gray:hover {
-  background-color: var(--brand-Token-bgColor-hover-dark-gray);
-}
-
 .Token--variant-accent {
   background-color: var(--brand-Token-bgColor-accent);
   color: var(--brand-Token-fgColor-accent);

package/package.json

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