@primer/brand-css 0.74.0-rc.ffd69649 → 0.75.0-rc.5af1749e

package/components/CTABanner/CTABanner.css

@@ -281,41 +281,21 @@
 
 .CTABanner-heading code,
 .CTABanner-description code {
-  font-size: inherit;
   font-family: var(--brand-fontStack-monospace);
-  background-color: var(--brand-color-canvas-default);
-  padding: 0 var(--base-size-4) 0;
-  margin-inline: var(--base-size-2);
-  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-  border-radius: var(--brand-borderRadius-small);
-  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
-}
-
-.CTABanner--bgColor-default .CTABanner-heading code,
-.CTABanner--bgColor-default .CTABanner-description code {
-  background-color: var(--brand-color-canvas-subtle);
-}
-
-.CTABanner-description code {
-  padding: 0 var(--base-size-4) 0;
-}
-
-.CTABanner-heading.CTABanner-heading:has(code) {
-  line-height: calc(1lh * 2);
-}
-
-@media screen and (min-width: 63.25rem) {
-  .CTABanner--variant-balanced .CTABanner-heading.CTABanner-heading:has(code) {
-    line-height: calc(1lh * 2.8);
-  }
-}
-
-.CTABanner--variant-minimal .CTABanner-heading.CTABanner-heading:has(code) {
-  line-height: calc(1lh * 1.9);
-}
-
-.CTABanner-description.CTABanner-description:has(code) {
-  line-height: calc(1lh * 1.25);
+  /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */
+  font-size: calc(1em - 1px);
+  font-weight: var(--base-text-weight-regular);
+  /* Keep the background clear of adjacent lines when large text wraps. */
+  line-height: 1.6;
+  color: var(--brand-InlineCode-color-fg-default);
+  background-color: var(--brand-InlineCode-bgColor);
+  padding-block: 0;
+  padding-inline: var(--base-size-4);
+  border-radius: var(--base-size-2);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 
 .CTABanner-buttonGroup {

package/components/Card/Card.css

@@ -192,25 +192,21 @@
 
 .Card__link code,
 .Card__description code {
-  font-size: inherit;
   font-family: var(--brand-fontStack-monospace);
-  background-color: var(--brand-color-canvas-subtle);
-  padding: 0 var(--base-size-4) var(--base-size-2);
-  margin-inline: var(--base-size-2);
-  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-  border-radius: var(--brand-borderRadius-small);
-  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
-}
-
-.Card__description code {
-  padding: var(--base-size-2) var(--base-size-4) 0;
-}
-.Card__link:has(code) {
-  line-height: calc(1lh * 1.4);
-}
-
-.Card__description.Card__description:has(code) {
-  line-height: calc(1lh * 1.25);
+  /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */
+  font-size: calc(1em - 1px);
+  font-weight: var(--base-text-weight-regular);
+  /* Keep the background clear of adjacent lines when large text wraps. */
+  line-height: 1.6;
+  color: var(--brand-InlineCode-color-fg-default);
+  background-color: var(--brand-InlineCode-bgColor);
+  padding-block: 0;
+  padding-inline: var(--base-size-4);
+  border-radius: var(--base-size-2);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 
 .Card--disableAnimation:hover .Card__link {

package/components/InlineCode/InlineCode.css

@@ -0,0 +1,38 @@
+.InlineCode {
+  font-family: var(--brand-fontStack-monospace);
+  /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */
+  font-size: calc(1em - 1px);
+  font-weight: var(--base-text-weight-regular);
+  /* Keep the background clear of adjacent lines when large text wraps. */
+  line-height: 1.6;
+  color: var(--brand-InlineCode-color-fg-default);
+  background-color: var(--brand-InlineCode-bgColor);
+  padding-block: 0;
+  padding-inline: var(--base-size-4);
+  border-radius: var(--base-size-2);
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+.InlineCode.InlineCode--nowrap {
+  white-space: nowrap;
+  overflow-wrap: normal;
+}
+
+:where(h1, h2, h3, h4, h5, h6) .InlineCode {
+  border-radius: var(--base-size-4);
+}
+
+:where(h1, h2, h3, h4, h5, h6) .InlineCode__text {
+  color: var(--brand-InlineCode-color-fg-heading);
+}
+
+.InlineCode__text {
+  position: relative;
+  /* TODO: this is some optical correction, but doesn't work well for uppercase. */
+  inset-block-start: -0.03em;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: auto;
+}

package/components/MinimalFooter/MinimalFooter.css

@@ -1,44 +1,160 @@
-.Footer {
+.MinimalFooter {
   position: relative;
+  border-top: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);
   background-color: var(--brand-footer-bg-color);
 }
 
+.MinimalFooter--withFootnotes {
+  border-top: 0;
+}
+
 /**
- * Footer shared styles
+ * MinimalFooter shared styles
  */
-.Footer__container {
+.MinimalFooter__container {
   max-width: var(--brand-footer-max-width, 1280px);
-  padding: 0 28px; /* should match SubdomainNavBar */
+  padding-inline: var(--base-size-20);
   margin-right: auto;
   margin-left: auto;
 }
 
+@media screen and (min-width: 48rem) {
+  .MinimalFooter__container {
+    padding-inline: var(--base-size-32);
+  }
+}
+
 /**
- * Footer terms section
+ * MinimalFooter terms section
  */
-.Footer__terms {
+.MinimalFooter__terms {
   padding: var(--base-size-48) 0;
 }
 
-.Footer__terms-item {
+.MinimalFooter__terms-item {
   margin-bottom: var(--base-size-24);
 }
 
-.Footer__terms-item sup {
+.MinimalFooter__terms-item sup {
   font-size: var(--base-size-12);
   vertical-align: super;
   display: inline-block;
   margin-right: var(--base-size-4);
 }
 
-.Footer__terms-item:last-child {
+.MinimalFooter__terms-item:last-child {
   margin-bottom: 0;
 }
 
 /**
- * Footer social and logomarks section
+ * MinimalFooter top section
+ */
+.MinimalFooter__top {
+  padding-top: var(--base-size-48);
+  padding-bottom: var(--base-size-32);
+  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);
+}
+
+.MinimalFooter__top-row {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  gap: var(--base-size-24);
+}
+
+.MinimalFooter__top-actions {
+  display: contents;
+}
+
+.MinimalFooter__top-actions > .MinimalFooter__links {
+  grid-column: 1 / -1;
+  grid-row: 2;
+  justify-content: flex-start;
+}
+
+.MinimalFooter__top-actions > .MinimalFooter__backToTop {
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: flex-end;
+}
+
+.MinimalFooter__logo {
+  display: inline-flex;
+  color: var(--brand-color-text-default);
+}
+
+.MinimalFooter__logo > svg {
+  width: var(--base-size-24);
+  height: var(--base-size-24);
+}
+
+.MinimalFooter__bottom {
+  padding-top: var(--base-size-32);
+  padding-bottom: var(--base-size-32);
+}
+
+@media screen and (min-width: 80rem) {
+  .MinimalFooter__top {
+    padding-top: var(--base-size-32);
+  }
+
+  .MinimalFooter__top-row {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .MinimalFooter__top-actions {
+    display: flex;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--base-size-20);
+    min-width: 0;
+  }
+
+  .MinimalFooter__top-actions > .MinimalFooter__links {
+    justify-content: flex-end;
+  }
+
+  .MinimalFooter__logo > svg {
+    width: var(--base-size-32);
+    height: var(--base-size-32);
+  }
+}
+
+.MinimalFooter__section {
+  min-width: 0;
+}
+
+.MinimalFooter__section--footnotes {
+  border-bottom: var(--brand-borderWidth-thick) solid var(--brand-footer-borderColor);
+  background-color: var(--brand-color-canvas-default);
+}
+
+.MinimalFooter__section--center > .MinimalFooter__container {
+  padding-top: var(--base-size-32);
+  padding-bottom: var(--base-size-32);
+}
+
+.MinimalFooter__section--center + .MinimalFooter__section--bottom {
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-subtle);
+}
+
+/**
+ * MinimalFooter bottom section
  */
-.Footer__social-links {
+.MinimalFooter__bottom-row {
+  display: flex;
+}
+
+.MinimalFooter__bottom-row {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--base-size-24);
+}
+
+.MinimalFooter__social-links {
   display: flex;
   padding: 0;
   margin: 0;
@@ -48,96 +164,131 @@
   gap: var(--base-size-16);
 }
 
-.Footer__logomarks {
-  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-}
-
-.Footer__logomarks,
-.Footer__legal-and-links {
-  padding-top: var(--base-size-48);
-  padding-bottom: var(--base-size-48);
-}
-
-.Footer__social-link {
+.MinimalFooter__social-link {
   position: relative;
-}
-
-.Footer__social-link::before {
-  content: '';
-  display: block;
-  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   min-width: var(--base-size-24);
   min-height: var(--base-size-24);
 }
 
-.Footer__social-link:hover .Footer__social-icon,
-.Footer__social-link:focus-visible .Footer__social-icon {
+.MinimalFooter__social-link:hover .MinimalFooter__social-icon,
+.MinimalFooter__social-link:focus-visible .MinimalFooter__social-icon {
   filter: var(--brand-footer-socialIcon-hoverFilter);
 }
 
-.Footer__social-icon {
+.MinimalFooter__social-icon {
   display: block;
-  width: 24px;
+  width: auto;
   height: auto;
+  max-height: var(--base-size-20);
+  filter: var(--brand-footer-socialIcon-restFilter);
 }
 
-[data-color-mode='light'] .Footer__social-icon {
-  filter: brightness(95%) saturate(100%);
+.MinimalFooter__copyright {
+  margin: 0;
+  text-transform: uppercase;
 }
 
-/**
- * Footer legal section
- */
+/* Keep the size-100 text rhythm, but use the approved 12px size token for footer chrome. */
+.MinimalFooter__metaText {
+  font-size: var(--base-size-12);
+}
 
-.Footer__copyright {
+.MinimalFooter__links {
   display: flex;
-  order: 2;
-  padding-bottom: var(--base-size-4);
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--base-size-20);
 }
 
-@media screen and (min-width: 48rem) {
-  .Footer__copyright {
-    order: 1;
-  }
+.MinimalFooter__link {
+  align-self: center;
+  color: var(--brand-color-text-muted);
+  text-decoration: none;
+  border: 0;
+  background-color: transparent;
+  cursor: pointer;
+  padding: 0;
+  text-transform: uppercase;
 }
 
-.Footer__links {
-  order: 1;
+.MinimalFooter__link:hover {
+  text-decoration: underline;
 }
 
 @media screen and (min-width: 48rem) {
-  .Footer__links {
-    order: 2;
+  .MinimalFooter__social-links {
+    gap: var(--base-size-20);
   }
 }
 
-.Footer__link {
-  align-self: flex-start;
-  color: var(--brand-color-text-muted);
-  text-decoration: none;
-  border-top: none;
-  border-right: none;
-  border-left: none;
-  border-bottom: var(--brand-borderWidth-thin) solid transparent;
-  background-color: inherit;
-  cursor: pointer;
-  padding: 0 0 var(--base-size-4) 0;
-  transition: border var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);
+@media screen and (min-width: 80rem) {
+  .MinimalFooter__bottom-row {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+  }
 }
 
-.Footer__link:hover {
+.MinimalFooter__backToTop {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  display: inline-flex;
+  padding: 0;
+  border: 0;
   color: var(--brand-color-text-default);
-  border-bottom-color: var(--brand-color-text-muted);
-  text-decoration: none;
+  background: none;
+  cursor: pointer;
+}
+
+.MinimalFooter__backToTop:focus-visible {
+  outline: var(--base-size-4) solid var(--brand-color-focus);
+  outline-offset: var(--base-size-2);
+}
+
+.MinimalFooter__backToTop:disabled,
+.MinimalFooter__backToTop[aria-disabled='true'] {
+  cursor: not-allowed;
+}
+
+.MinimalFooter__backToTop-content {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--base-size-12);
+}
+
+.MinimalFooter__backToTop-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--brand-borderWidth-thin) solid var(--brand-footer-backToTop-borderColor-rest);
+  border-radius: var(--base-size-6);
+  background-color: var(--brand-footer-backToTop-bgColor-rest);
+  min-width: var(--brand-footer-backToTop-minTarget);
+  min-height: var(--brand-footer-backToTop-minTarget);
+  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide),
+    border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-glide);
+}
+
+.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):hover .MinimalFooter__backToTop-icon {
+  border-color: var(--brand-footer-backToTop-borderColor-hover);
+  background-color: var(--brand-footer-backToTop-bgColor-hover);
+}
+
+.MinimalFooter__backToTop:not([disabled], [aria-disabled='true']):active .MinimalFooter__backToTop-icon {
+  border-color: var(--brand-footer-backToTop-borderColor-active);
+  background-color: var(--brand-footer-backToTop-bgColor-active);
 }
 
 /* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
 @media (prefers-reduced-motion: reduce) {
-  .Footer,
-  .Footer::before,
-  .Footer::after,
-  .Footer * {
+  .MinimalFooter,
+  .MinimalFooter::before,
+  .MinimalFooter::after,
+  .MinimalFooter * {
     animation: none !important;
     transition: none !important;
     scroll-behavior: auto !important;

package/components/TextCursorAnimation/TextCursorAnimation.css

@@ -3,37 +3,80 @@
   align-items: center;
 }
 
-.TextCursorAnimation-inner {
+.TextCursorAnimation__inner {
   position: relative;
   display: inline-flex;
   align-items: center;
 }
 
-.TextCursorAnimation-text {
+.TextCursorAnimation__text {
   font-weight: var(--brand-text-weight-500);
-  clip-path: inset(0 calc((1 - var(--brand-TextCursorAnimation-reveal-progress, 1)) * 100%) 0 0);
   white-space: pre;
 }
 
-.TextCursorAnimation-cursor {
+.TextCursorAnimation__sizingContainer {
+  display: inline-grid;
+  clip-path: inset(50%);
+}
+
+.TextCursorAnimation__sizingText {
+  grid-area: 1 / 1;
+}
+
+.TextCursorAnimation__content {
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--base-size-8) + var(--base-size-2));
+}
+
+.TextCursorAnimation__content--animated {
   position: absolute;
-  left: calc((var(--brand-TextCursorAnimation-reveal-progress, 1) * 100%) + var(--base-size-6));
-  top: calc((1lh - 0.3cap) / 2 - 0.5cap);
-  width: var(--base-size-8);
-  height: 1cap;
-  background-color: color-mix(
-    in srgb,
-    var(--brand-color-canvas-subtle) calc((1 - var(--brand-TextCursorAnimation-cursor-progress, 0)) * 100%),
-    var(--brand-TextCursorAnimation-cursor-color) calc(var(--brand-TextCursorAnimation-cursor-progress, 0) * 100%)
-  );
+  inset-block-start: 0;
+  inset-inline-start: 0;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .TextCursorAnimation-cursor {
-    display: none;
+.TextCursorAnimation__cursor {
+  width: calc(var(--base-size-8) + var(--base-size-2) / 2);
+  height: calc(var(--base-size-12) + var(--base-size-2));
+  flex: 0 0 calc(var(--base-size-8) + var(--base-size-2) / 2);
+}
+
+.TextCursorAnimation__cursor--initial {
+  background-color: var(--brand-TextCursorAnimation-cursor-color);
+}
+
+.TextCursorAnimation__cursor--animated {
+  animation: TextCursorAnimation-cursor-blink var(--brand-TextCursorAnimation-cursor-animationDuration) steps(1, end)
+    250ms 3 forwards;
+}
+
+.TextCursorAnimation__cursor--correction {
+  background-color: var(--brand-TextCursorAnimation-cursor-deleteColor);
+}
+
+.TextCursorAnimation__cursor--final,
+.TextCursorAnimation__cursor--complete {
+  background-color: var(--brand-TextCursorAnimation-cursor-finalColor);
+}
+
+@keyframes TextCursorAnimation-cursor-blink {
+  0%,
+  79% {
+    opacity: 1;
   }
 
-  .TextCursorAnimation-text {
-    clip-path: none;
+  80%,
+  99% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .TextCursorAnimation__cursor {
+    animation: none;
   }
 }

package/components/river/river-shared.css

@@ -131,32 +131,21 @@
 
 .River__heading code,
 .River__text code {
-  font-size: inherit;
-  font-family: var(--brand-fontStack-monospace) !important;
-  background-color: var(--brand-color-canvas-subtle);
-  padding: 0 var(--base-size-4) var(--base-size-2);
-  margin-inline: var(--base-size-2);
-  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-  border-radius: var(--brand-borderRadius-small);
-  box-shadow: var(--brand-borderWidth-thin) var(--brand-borderWidth-thin) 0 0 var(--brand-color-border-default);
-}
-
-.River__text code {
-  padding: var(--base-size-2) var(--base-size-4) 0;
-}
-
-.River__heading-inner:has(code) {
-  line-height: calc(1lh * 1.8);
-}
-
-@media screen and (min-width: 64rem) {
-  .River__heading-inner:has(code) {
-    line-height: calc(1lh * 2.1);
-  }
-}
-
-.River__text:has(code) {
-  line-height: calc(1lh * 1.1);
+  font-family: var(--brand-fontStack-monospace);
+  /* optical resize relative to parent. monospace tends to be a little taller than sans-serif */
+  font-size: calc(1em - 1px);
+  font-weight: var(--base-text-weight-regular);
+  /* Keep the background clear of adjacent lines when large text wraps. */
+  line-height: 1.6;
+  color: var(--brand-InlineCode-color-fg-default);
+  background-color: var(--brand-InlineCode-bgColor);
+  padding-block: 0;
+  padding-inline: var(--base-size-4);
+  border-radius: var(--base-size-2);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  -webkit-box-decoration-break: clone;
+  box-decoration-break: clone;
 }
 
 .River__leadingComponent :is(img, picture),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.74.0-rc.ffd69649",
+  "version": "0.75.0-rc.5af1749e",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",