@primer/brand-css 0.67.0-rc.5d487e6f → 0.67.0-rc.6189a70f

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/package.json

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