@primer/brand-css 0.72.1-rc.c5f3a3b5 → 0.73.0

package/components/Card/Card.css

@@ -5,8 +5,7 @@
   text-decoration: none;
   color: var(--brand-color-text-default);
 
-  transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);
-  padding: var(--base-size-32);
+  padding: var(--brand-Card-padding-block) var(--brand-Card-padding-inline);
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
@@ -25,14 +24,22 @@
   border-radius: var(--brand-borderRadius-medium);
 }
 
+@media screen and (min-width: 64rem) {
+  .Card {
+    --brand-Card-padding-inline: var(--base-size-32);
+  }
+}
+
 .Card--align-center .Card {
+  --brand-Card-padding-block: var(--base-size-64);
+  --brand-Card-padding-inline: var(--base-size-40);
+
   text-align: center;
-  padding: var(--base-size-64) var(--base-size-40);
 }
 
 @media screen and (min-width: 64rem) {
   .Card--align-center .Card {
-    padding: var(--base-size-64) var(--base-size-80);
+    --brand-Card-padding-inline: var(--base-size-80);
   }
 }
 
@@ -145,7 +152,8 @@
 }
 
 .Card--hasLeadingVisual {
-  padding: var(--base-size-64) var(--base-size-40);
+  --brand-Card-padding-block: var(--base-size-64);
+  --brand-Card-padding-inline: var(--base-size-40);
 }
 
 .Card--imagePos-block-end .Card__image {
@@ -244,10 +252,6 @@
   ); /* This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` */
 }
 
-.Card:not(.Card--disableAnimation):hover {
-  transform: scale3d(1.025, 1.025, 1);
-}
-
 .Card__image {
   margin-block-end: var(--base-size-28);
   border-radius: var(--brand-borderRadius-medium);
@@ -255,6 +259,41 @@
   grid-area: image;
 }
 
+.Card__image--padding-none {
+  margin-inline: calc(var(--brand-Card-padding-inline) * -1);
+}
+
+.Card__image--position-block-start.Card__image--padding-none {
+  margin-block-start: calc(var(--brand-Card-padding-block) * -1);
+}
+
+.Card__image--position-block-end.Card__image--padding-none {
+  margin-block-end: calc(var(--brand-Card-padding-block) * -1);
+}
+
+.Card--border .Card__image--position-block-start.Card__image--padding-none {
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.Card--border .Card__image--position-block-end.Card__image--padding-none {
+  border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
+  border-start-start-radius: 0;
+  border-start-end-radius: 0;
+}
+
+.Card--variant-minimal .Card__image--padding-none {
+  margin-inline: 0;
+}
+
+.Card--variant-minimal .Card__image--position-block-start.Card__image--padding-none {
+  margin-block-start: 0;
+}
+
+.Card--variant-minimal .Card__image--position-block-end.Card__image--padding-none {
+  margin-block-end: 0;
+}
+
 .Card__image img,
 .Card__image picture,
 .Card__image span {
@@ -338,9 +377,9 @@
 .Card__actionLabel {
   display: block;
   min-inline-size: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow: visible;
+  text-overflow: clip;
+  white-space: normal;
 }
 
 .Card:not(.Card--ctaVariant-arrow) .Card__action {
@@ -364,20 +403,7 @@
 }
 
 .Card__actionLabelClip {
-  --actionLabelClip-duration: 400ms;
-  display: inline-flex;
-  flex: 1 1 auto;
-  align-items: center;
-  align-self: stretch;
-  min-inline-size: 0;
-  overflow: hidden;
-  max-inline-size: 0;
-  background-color: transparent;
-  opacity: 0;
-  transform: translateX(calc(var(--base-size-12) * -1));
-  transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),
-    opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,
-    margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;
+  display: contents;
 }
 
 .Card--tokensPosition-block-end .Card__action {
@@ -393,19 +419,16 @@
   min-inline-size: 0;
   max-inline-size: calc(100% - var(--Card-arrowAction-endInset));
   justify-content: flex-start;
-  -moz-column-gap: 0;
-       column-gap: 0;
+  -moz-column-gap: var(--base-size-8);
+       column-gap: var(--base-size-8);
   padding-block: var(--base-size-4);
-  padding-inline: 0;
-  border: var(--brand-borderWidth-thin) solid transparent;
+  padding-inline-start: var(--base-size-12);
+  padding-inline-end: var(--base-size-4);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
   border-radius: var(--brand-borderRadius-full);
-  background-color: transparent;
+  background-color: var(--brand-Card-background-overlay);
   flex-shrink: 0;
   overflow: hidden;
-  transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,
-    column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;
-  transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,
-    column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out, -moz-column-gap var(--actionArrow-duration) ease-out;
 }
 
 .Card__actionIcon--arrowOnly {
@@ -483,15 +506,51 @@
   margin-bottom: var(--base-size-12);
 }
 
-.Card--ctaVariant-arrow:not(.Card--disableAnimation):hover {
-  transform: none;
-}
-
 .Card--ctaVariant-arrow .Card__action {
   min-inline-size: 0;
   justify-self: start;
 }
 
+@media (hover: hover) {
+  .Card__action--arrowOnly {
+    -moz-column-gap: 0;
+         column-gap: 0;
+    padding-inline: 0;
+    border-color: transparent;
+    background-color: transparent;
+    transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,
+      column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out;
+    transition: border-color var(--actionArrow-duration) ease-out, background-color var(--actionArrow-duration) ease-out,
+      column-gap var(--actionArrow-duration) ease-out, padding-inline var(--actionArrow-duration) ease-out, -moz-column-gap var(--actionArrow-duration) ease-out;
+  }
+
+  .Card__actionLabelClip {
+    --actionLabelClip-duration: 400ms;
+
+    display: inline-flex;
+    flex: 1 1 auto;
+    align-items: center;
+    align-self: stretch;
+    min-inline-size: 0;
+    overflow: hidden;
+    max-inline-size: 0;
+    background-color: transparent;
+    opacity: 0;
+    transform: translateX(calc(var(--base-size-12) * -1));
+    margin-inline: 0;
+    padding-inline: 0;
+    transition: max-inline-size var(--actionLabelClip-duration) var(--brand-Card-animation-easing),
+      opacity var(--actionLabelClip-duration) ease-out, transform var(--actionLabelClip-duration) ease-out,
+      margin-inline var(--actionLabelClip-duration) ease-out, padding-inline var(--actionLabelClip-duration) ease-out;
+  }
+
+  .Card--ctaVariant-arrow .Card__actionLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
 .Card--align-center .Card--ctaVariant-arrow .Card__action {
   justify-self: center;
 }
@@ -523,6 +582,12 @@
   stroke-dashoffset: 20;
 }
 
+.Card--disableAnimation,
+.Card--disableAnimation * {
+  animation: none;
+  transition: none;
+}
+
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
   .Card,

package/components/FAQ/FAQ.css

@@ -10,11 +10,13 @@
 }
 
 .FAQ__content-wrapper--gridline {
+  padding-inline: var(--base-size-20);
   max-width: var(--brand-FAQ-maxWidth-list);
   margin: 0 auto;
 }
 
 .FAQ__heading-wrapper--gridline {
+  padding-inline: var(--base-size-20);
   border-block-end: var(--brand-color-border-muted) var(--brand-borderWidth-thin) solid;
   margin-block-end: var(--base-size-40);
 }
@@ -69,7 +71,19 @@
   margin: 0;
 }
 
+@media screen and (min-width: 48rem) {
+  .FAQ__content-wrapper--gridline,
+  .FAQ__heading-wrapper--gridline {
+    padding-inline: var(--base-size-36);
+  }
+}
+
 @media screen and (min-width: 63.25rem) {
+  .FAQ__content-wrapper--gridline,
+  .FAQ__heading-wrapper--gridline {
+    padding-inline: 0;
+  }
+
   .FAQ__heading-wrapper--gridline {
     margin-block-end: var(--base-size-48);
   }

package/components/MinimalVideoPlayer/MinimalVideoPlayer.css

@@ -0,0 +1,52 @@
+.MinimalVideoPlayer {
+  position: relative;
+  width: 100%;
+}
+
+.MinimalVideoPlayer__video {
+  display: block;
+  width: 100%;
+}
+
+.MinimalVideoPlayer__control {
+  position: absolute;
+  right: var(--base-size-24);
+  bottom: var(--base-size-24);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--base-size-36);
+  height: var(--base-size-36);
+  padding: 0;
+  color: var(--brand-color-text-muted);
+  cursor: pointer;
+  background-color: var(--brand-color-canvas-muted);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);
+  border-radius: var(--brand-borderRadius-full);
+}
+
+.MinimalVideoPlayer__control:focus-visible {
+  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+}
+
+/* Progressive enhancement that hides the custom control when native controls are visible. */
+.MinimalVideoPlayer__video[controls] + .MinimalVideoPlayer__control {
+  display: none;
+}
+
+@media (forced-colors: active) {
+  .MinimalVideoPlayer {
+    border: var(--brand-borderWidth-thin) solid CanvasText;
+  }
+
+  .MinimalVideoPlayer__control {
+    color: ButtonText;
+    background-color: ButtonFace;
+    border-color: ButtonText;
+  }
+
+  .MinimalVideoPlayer__control:focus-visible {
+    outline-color: Highlight;
+  }
+}

package/components/Testimonial/Testimonial.css

@@ -162,67 +162,79 @@
 .Testimonial--variant-expressive {
   display: flex;
   flex-direction: column;
-  gap: var(--base-size-48);
-}
-
-@media screen and (min-width: 48rem) {
-  .Testimonial--variant-expressive {
-    flex-direction: row;
-    align-items: flex-end;
-    gap: var(--base-size-96);
-  }
+  gap: var(--base-size-36);
+  width: 100%;
+  max-width: 1176px;
+  padding-inline: var(--base-size-20);
+  padding-block: var(--base-size-40);
 }
 
 .Testimonial--variant-expressive .Testimonial__quoteWrapper {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--base-size-24);
-  flex: 1 1 0;
+  gap: var(--base-size-36);
   min-width: 0;
 }
 
 .Testimonial--variant-expressive .Testimonial__media {
   flex-direction: column;
   align-items: flex-start;
-  gap: var(--base-size-24);
+  gap: var(--base-size-28);
   margin-block-start: 0;
-  flex: 0 0 auto;
+  width: 100%;
+}
+
+.Testimonial--variant-expressive .Testimonial-avatar {
+  width: var(--base-size-40);
+  height: var(--base-size-40);
 }
 
 .Testimonial--variant-expressive .Testimonial-caption {
   border-block-start: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-  padding-block-start: var(--base-size-24);
+  padding-block-start: var(--base-size-20);
   width: 100%;
-  gap: var(--base-size-8);
+  gap: var(--base-size-6);
 }
 
 @media screen and (min-width: 48rem) {
+  .Testimonial--variant-expressive .Testimonial__quoteWrapper {
+    gap: var(--base-size-40);
+  }
+
   .Testimonial--variant-expressive .Testimonial__media {
-    min-width: 240px;
-    max-width: 320px;
+    width: 356px;
   }
 }
 
 .Testimonial--variant-expressive .Testimonial-from {
   display: flex;
   align-items: center;
-  gap: var(--base-size-8);
+  gap: calc(var(--base-size-8) + var(--base-size-2));
   font-family: var(--brand-fontStack-monospace);
-  font-weight: var(--base-text-weight-medium);
+  font-size: var(--brand-text-size-100);
+  font-weight: var(--brand-heading-weight-500);
+  line-height: var(--brand-text-lineHeight-100);
   text-transform: uppercase;
-  letter-spacing: 0.01em;
+  letter-spacing: 0.0107em;
 }
 
 .Testimonial--variant-expressive .Testimonial-from::before {
   content: '';
   display: inline-block;
-  width: 9px;
-  height: 14px;
-  background-color: var(--testimonial-accent-color, var(--brand-Testimonial-quoteMarkColor-default));
+  width: 0.5625rem;
+  height: 0.875rem;
+  background-color: var(--brand-color-text-emphasized);
   flex-shrink: 0;
 }
 
+.Testimonial--variant-expressive .Testimonial-position {
+  font-size: var(--brand-text-size-200);
+  font-weight: var(--base-text-weight-normal);
+  line-height: 1.6;
+  letter-spacing: 0.01em;
+}
+
 .Testimonial--variant-expressive .Testimonial__quoteMark {
   font-family: var(--brand-fontStack-monospace);
   font-weight: var(--brand-fontWeight-300);
@@ -238,14 +250,97 @@
 
 .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);
+  font-size: 1.5rem;
+  font-weight: 425;
+  letter-spacing: -0.01em;
+  line-height: var(--brand-text-lineHeight-100);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+@media screen and (min-width: 48rem) {
+  .Testimonial--variant-expressive {
+    max-width: 618px;
+    margin-inline: auto;
+    padding-inline: var(--base-size-36);
+    padding-block: var(--base-size-44);
+  }
+  .Testimonial--variant-expressive .Testimonial-quote {
+    font-size: 1.625rem;
+    letter-spacing: -0.02em;
+  }
+}
+
+@media screen and (min-width: 63.25rem) {
+  .Testimonial--variant-expressive {
+    display: grid;
+    grid-template-columns: minmax(0, 744px) 312px;
+    -moz-column-gap: calc(var(--base-size-96) + var(--base-size-24));
+         column-gap: calc(var(--base-size-96) + var(--base-size-24));
+    align-items: end;
+    max-width: 1176px;
+    margin-inline: auto;
+    padding-inline: var(--base-size-48);
+    padding-block: var(--base-size-88);
+  }
+
+  .Testimonial--variant-expressive.Testimonial--hasLink {
+    row-gap: var(--base-size-48);
+  }
+
+  .Testimonial--variant-expressive .Testimonial__quoteWrapper {
+    grid-column: 1;
+    grid-row: 1;
+    gap: var(--base-size-48);
+  }
+
+  .Testimonial--variant-expressive .Testimonial__media {
+    grid-column: 2;
+    grid-row: 1;
+    width: 312px;
+    gap: var(--base-size-32);
+  }
+
+  .Testimonial--variant-expressive.Testimonial--hasLink .Testimonial__media {
+    grid-row: 1 / span 2;
+  }
+
+  .Testimonial--variant-expressive .Testimonial-caption {
+    padding-block-start: var(--base-size-24);
+  }
+
+  .Testimonial--variant-expressive .Testimonial-quote {
+    font-size: var(--base-size-32);
+  }
+
+  .Testimonial--variant-expressive .Testimonial-link {
+    grid-column: 1;
+    grid-row: 2;
+  }
+}
+
+@media screen and (min-width: 80rem) {
+  .Testimonial--variant-expressive {
+    padding-inline: 0;
+  }
+
+  .Testimonial--variant-expressive .Testimonial-avatar {
+    width: var(--base-size-48);
+    height: var(--base-size-48);
+  }
 }
 
 .Testimonial-link {
   margin-top: var(--base-size-8);
 }
 
+.Testimonial--variant-expressive .Testimonial-link {
+  align-self: flex-start;
+  width: -moz-fit-content;
+  width: fit-content;
+  margin-top: 0;
+}
+
 .Testimonial__quoteMark--default {
   --brand-Testimonial-quoteMarkColor: var(--brand-Testimonial-quoteMarkColor-default);
   --brand-Testimonial-quoteMarkBackground: var(--brand-Testimonial-quoteMarkBackground-default);

package/package.json

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