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

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 {
@@ -298,6 +304,9 @@
 .Card__label {
   margin-block-end: var(--base-size-20);
   grid-area: label;
+  inline-size: -moz-fit-content;
+  inline-size: fit-content;
+  max-inline-size: 100%;
 }
 
 .Card__heading {
@@ -334,6 +343,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 +442,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

@@ -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);
   }
 
@@ -475,6 +483,41 @@
   padding-block-start: var(--base-size-20);
 }
 
+.PricingOptions__actions-message {
+  display: flex;
+  gap: var(--base-size-12);
+  align-items: flex-start;
+  inline-size: 100%;
+  max-inline-size: 100%;
+  padding: var(--base-size-12);
+  border-block: var(--brand-borderWidth-thin) solid var(--brand-PricingOptions-actionsMessage-borderColor);
+  border-inline: 0;
+  border-radius: 0;
+  background-color: var(--brand-PricingOptions-actionsMessage-bgColor);
+}
+
+.PricingOptions__actions-message-leading-component {
+  flex: 0 0 auto;
+  display: flex;
+  margin-block-start: var(--base-size-4);
+  color: var(--brand-PricingOptions-actionsMessage-accentColor);
+}
+
+.PricingOptions__actions-message-leading-component :where(svg) {
+  display: block;
+  inline-size: var(--base-size-16);
+  block-size: var(--base-size-16);
+}
+
+.PricingOptions__actions-message-content {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+}
+
+.PricingOptions__actions-message-content :where(p) {
+  margin: 0;
+}
+
 /* MenuAction: full-width ActionMenu wrapper */
 .PricingOptions__menu-action {
   width: 100%;

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

@@ -8,7 +8,7 @@
   max-width: 100%;
   padding-inline: var(--base-size-8);
   padding-block: var(--base-size-6);
-  padding-block-end: calc(var(--base-size-6) - 1px); /* Compensate for 1px border to maintain height */
+  padding-block-end: var(--base-size-6);
   vertical-align: middle;
 }
 
@@ -22,6 +22,11 @@
   text-decoration: none;
 }
 
+.Token--interactive:focus-visible {
+  outline: var(--base-size-4) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+}
+
 [data-color-mode='dark'] .Token {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;
@@ -36,15 +41,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);
@@ -83,6 +79,7 @@
   font-weight: var(--base-text-weight-normal);
   line-height: 0.85;
   white-space: nowrap;
+  letter-spacing: var(--brand-text-letterSpacing-100);
 }
 
 .Token > .Token__label {
@@ -121,4 +118,8 @@
   .Token {
     outline: var(--brand-borderWidth-thin) solid transparent;
   }
+
+  .Token--interactive:focus-visible {
+    outline-color: Highlight;
+  }
 }

package/package.json

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