@primer/brand-css 0.67.0-rc.f47a3983 → 0.67.0

package/components/Card/Card.css

@@ -1,22 +1,28 @@
 .Card {
+  /* Keeps the dynamic height row on the description slot in the default layout so variable-height content fills the card body. */
+  --Card-grid-template-rows: auto auto auto auto auto auto 1fr auto;
+
   text-decoration: none;
   color: var(--brand-color-text-default);
-  border-radius: var(--brand-borderRadius-xlarge);
+
   transition: transform var(--brand-Card-animation-duration) var(--brand-Card-animation-easing);
   padding: var(--base-size-32);
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-template-areas:
     'image image'
+    'leadingVisual leadingVisual'
     'icon icon'
+    'tokens tokens'
     'label label'
     'heading heading'
     'description description'
     'action action';
   flex: auto;
-  grid-template-rows: auto auto auto auto 1fr;
+  grid-template-rows: var(--Card-grid-template-rows);
   position: relative;
   height: 100%;
+  border-radius: var(--brand-borderRadius-medium);
 }
 
 .Card--align-center .Card {
@@ -34,7 +40,9 @@
   grid-template-columns: 1fr;
   grid-template-areas:
     'image'
+    'leadingVisual'
     'icon'
+    'tokens'
     'label'
     'heading'
     'description'
@@ -42,10 +50,54 @@
   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;
+
+  grid-template-areas:
+    'image image'
+    'leadingVisual leadingVisual'
+    'icon icon'
+    'label label'
+    'heading heading'
+    'description description'
+    'tokens tokens'
+    'action action';
+}
+
+.Card--align-center .Card--tokensPosition-block-end {
+  grid-template-areas:
+    'image'
+    'leadingVisual'
+    'icon'
+    'label'
+    'heading'
+    'description'
+    'tokens'
+    'action';
+}
+
 /** Block end image position option */
 .Card--imagePos-block-end {
+  /* Moves the dynamic height row from action back to description because the image is rendered after the content in this layout. */
+  --Card-grid-template-rows: auto auto auto auto auto 1fr auto auto;
+
   grid-template-areas:
+    'leadingVisual leadingVisual'
     'icon icon'
+    'tokens tokens'
     'label label'
     'heading heading'
     'description description'
@@ -55,14 +107,47 @@
 
 .Card--align-center .Card--imagePos-block-end {
   grid-template-areas:
+    'leadingVisual'
+    'icon'
+    'tokens'
+    'label'
+    'heading'
+    'description'
+    'action'
+    'image';
+}
+
+.Card--imagePos-block-end.Card--tokensPosition-block-end {
+  /* Moves the dynamic height row from tokens back to description because both the tokens and image are rendered after the body copy here. */
+  --Card-grid-template-rows: auto auto auto auto 1fr auto auto auto;
+
+  grid-template-areas:
+    'leadingVisual leadingVisual'
+    'icon icon'
+    'label label'
+    'heading heading'
+    'description description'
+    'tokens tokens'
+    'action action'
+    'image image';
+}
+
+.Card--align-center .Card--imagePos-block-end.Card--tokensPosition-block-end {
+  grid-template-areas:
+    'leadingVisual'
     'icon'
     'label'
     'heading'
     'description'
+    'tokens'
     'action'
     'image';
 }
 
+.Card--hasLeadingVisual {
+  padding: var(--base-size-64) var(--base-size-40);
+}
+
 .Card--imagePos-block-end .Card__image {
   margin-bottom: 0;
   margin-top: var(--base-size-28);
@@ -84,9 +169,8 @@
   padding: 0;
 }
 
-.Card--variant-default,
-.Card--variant-torchlight.Card--colorMode-light {
-  background-color: var(--brand-Card-background-default);
+.Card--ctaVariant-arrow {
+  --Card-arrowAction-endInset: var(--base-size-40);
 }
 
 .Card:hover {
@@ -138,11 +222,11 @@
 
 .Card--border {
   border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-medium);
 }
 
 .Card__outer {
   height: 100%;
-  border-radius: var(--brand-borderRadius-xlarge);
 }
 
 .Card__outer:has(.Card--variant-minimal) {
@@ -151,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 {
@@ -159,34 +244,12 @@
   ); /* This value is adjusted so that, when combined with the container's border radius, the total border radius equals `var(--brand-borderRadius-medium)` */
 }
 
-.Card--icon {
-  grid-template-areas:
-    'image image'
-    'icon label'
-    'heading heading'
-    'description description'
-    'action action';
-}
-
-.Card--icon .Card__label {
-  justify-self: flex-end;
-}
-
-.Card--align-center .Card--icon .Card__label {
-  justify-self: center;
-}
-
-.Card--icon .Card__label,
-.Card--icon .Card__icon {
-  align-self: center;
-}
-
-.Card:not(.Card--disableAnimation, .Card--variant-torchlight.Card--colorMode-dark):hover {
+.Card:not(.Card--disableAnimation):hover {
   transform: scale3d(1.025, 1.025, 1);
 }
 
 .Card__image {
-  margin-bottom: var(--base-size-28);
+  margin-block-end: var(--base-size-28);
   border-radius: var(--brand-borderRadius-medium);
   overflow: hidden;
   grid-area: image;
@@ -198,31 +261,162 @@
   display: block;
 }
 
+.Card__leadingVisual {
+  margin-block-end: var(--base-size-36);
+  display: flex;
+  align-items: center;
+  grid-area: leadingVisual;
+}
+
+.Card--align-center .Card__leadingVisual {
+  justify-content: center;
+}
+
+.Card__leadingVisualItem {
+  display: block;
+  max-width: 100%;
+  height: var(--base-size-40);
+  width: auto;
+}
+
 .Card__icon {
   margin-bottom: var(--base-size-24);
   grid-area: icon;
 }
 
+.Card__tokens {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--base-size-8);
+  grid-area: tokens;
+  margin-bottom: var(--base-size-20);
+}
+
+.Card--align-center .Card__tokens {
+  justify-content: center;
+}
+
+.Card__tokens--position-block-end {
+  margin-block-start: var(--base-size-20);
+  margin-block-end: 0;
+}
+
 .Card__label {
-  margin-bottom: var(--base-size-24);
+  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 {
-  margin-bottom: var(--base-size-20);
+  margin-block-end: var(--base-size-20);
   grid-area: heading;
 }
 
 .Card__description {
-  margin-bottom: var(--base-size-32);
+  margin-block-end: var(--base-size-32);
   grid-area: description;
 }
 
 .Card__action {
   grid-area: action;
-  margin-top: auto;
+  margin-block-start: auto;
   display: inline-flex;
   align-items: center;
+  max-inline-size: 100%;
+  pointer-events: none;
+}
+
+.Card__actionIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.Card__actionLabel {
+  display: block;
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  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;
+  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;
+}
+
+.Card--tokensPosition-block-end .Card__action {
+  margin-block-start: var(--base-size-20);
+}
+
+.Card__action--arrowOnly {
+  --actionArrow-duration: 300ms;
+
+  margin-block-start: var(--base-size-20);
+  min-height: var(--base-size-40);
+  width: -moz-fit-content;
+  width: fit-content;
+  min-inline-size: 0;
+  max-inline-size: calc(100% - var(--Card-arrowAction-endInset));
+  justify-content: flex-start;
+  -moz-column-gap: 0;
+       column-gap: 0;
+  padding-block: var(--base-size-4);
+  padding-inline: 0;
+  border: var(--brand-borderWidth-thin) solid transparent;
+  border-radius: var(--brand-borderRadius-full);
+  background-color: transparent;
+  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 {
+  width: var(--base-size-32);
+  min-width: var(--base-size-32);
+  height: var(--base-size-32);
+  min-height: var(--base-size-32);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-full);
+  background-color: var(--brand-color-canvas-default);
 }
 
 .Card--align-center .Card__action {
@@ -234,10 +428,9 @@
   color: var(--brand-Link-color-accent);
 }
 
-.Card--skew {
-  height: 100%;
-  border-radius: var(--brand-borderRadius-xlarge);
-  overflow: hidden;
+.Card__action,
+.Card__action * {
+  cursor: inherit;
 }
 
 .Card--skew:focus-within {
@@ -249,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;
@@ -278,11 +471,56 @@
   margin-inline-start: var(--base-size-4);
 }
 
-.Card:has(.Card__link:hover) .Card--expandableArrow {
-  transform: translateX(var(--base-size-4));
+.Card--ctaVariant-arrow .Card--expandableArrow {
+  --ExpandableArrow-duration: var(--brand-Card-animation-duration);
+  --ExpandableArrow-easing: var(--brand-Card-animation-easing);
+}
+
+.Card__actionIcon--arrowOnly .Card--expandableArrow {
+  margin-inline-start: 0;
+}
+
+.Card--ctaVariant-arrow .Card__description {
+  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;
+}
+
+.Card--align-center .Card--ctaVariant-arrow .Card__action {
+  justify-self: center;
+}
+
+.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__action--arrowOnly {
+  -moz-column-gap: var(--base-size-8);
+       column-gap: var(--base-size-8);
+  padding-inline-start: var(--base-size-12);
+  padding-inline-end: var(--base-size-4);
+  border-color: var(--brand-color-border-default);
+  background-color: var(--brand-Card-background-overlay);
+}
+
+.Card--ctaVariant-arrow:is(:hover, :focus-within) .Card__actionLabelClip {
+  max-inline-size: 100%;
+  opacity: 1;
+  transform: translateX(0);
+  margin-inline-start: calc(var(--base-size-12) * -1);
+  margin-inline-end: 0;
+  padding-inline-start: var(--base-size-12);
+  padding-inline-end: var(--base-size-4);
+}
+
+.Card:is(:hover, :focus-within) .Card--expandableArrow {
+  transform: translateX(var(--base-size-2));
 }
 
-.Card:has(.Card__link:hover) .Card--expandableArrow path:nth-of-type(2) {
+.Card:is(:hover, :focus-within) .Card--expandableArrow path:nth-of-type(2) {
   stroke-dashoffset: 20;
 }
 

package/components/ExpandableArrow/ExpandableArrow.css

@@ -1,5 +1,8 @@
 .ExpandableArrow {
-  transition: transform 200ms;
+  --ExpandableArrow-duration: 200ms;
+  --ExpandableArrow-easing: ease;
+
+  transition: transform var(--ExpandableArrow-duration) var(--ExpandableArrow-easing);
   transform: translateX(0);
 }
 
@@ -10,7 +13,7 @@
 .ExpandableArrow-stem {
   stroke-dasharray: 10;
   stroke-dashoffset: 10;
-  transition: stroke-dashoffset 200ms;
+  transition: stroke-dashoffset var(--ExpandableArrow-duration) var(--ExpandableArrow-easing);
 }
 
 .ExpandableArrow-stem--expanded {

package/components/EyebrowText/EyebrowText.css

@@ -2,3 +2,7 @@
   text-transform: uppercase;
   letter-spacing: var(--brand-text-letterSpacing-100);
 }
+
+.EyebrowText--variant-accent {
+  color: var(--brand-color-accent-primary);
+}

package/components/Icon/Icon.css

@@ -44,7 +44,7 @@
 
 .Icon--background {
   padding: var(--base-size-12);
-  border-radius: var(--brand-borderRadius-full);
+  border-radius: var(--brand-borderRadius-medium);
 }
 
 .Icon--color-default {

package/components/Link/Link.css

@@ -78,6 +78,7 @@
 }
 
 .Link--label {
+  color: inherit !important; /* Some components like Accordion override all children color. We need to force this. */
   font-weight: var(--base-text-weight-medium);
 }
 

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 {