@primer/brand-css 0.73.0-rc.dc32d936 → 0.74.0-rc.6f254662

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 {
@@ -455,40 +451,6 @@
   cursor: inherit;
 }
 
-.Card--skew:focus-within {
-  outline: var(--brand-borderWidth-thick) solid var(--brand-color-focus);
-}
-
-.Card--skew:hover .Card__torch {
-  opacity: 0.85;
-}
-
-.Card__skew-bounding {
-  border-radius: var(--brand-borderRadius-medium);
-  position: relative;
-  overflow: hidden;
-  z-index: 1;
-  height: 100%;
-  background-color: var(--brand-Card-background-default);
-}
-
-.Card__torch {
-  width: 650px;
-  height: 650px;
-  background-color: var(--brand-color-accent-primary);
-  filter: blur(180px);
-  border-radius: 300px;
-  opacity: 0;
-  transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1);
-  mix-blend-mode: soft-light;
-  will-change: transform;
-  pointer-events: none;
-  position: absolute;
-  bottom: 0;
-  right: 0;
-  z-index: -1;
-}
-
 .Card--expandableArrow {
   margin-inline-start: var(--base-size-4);
 }

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/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.73.0-rc.dc32d936",
+  "version": "0.74.0-rc.6f254662",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",