@primer/brand-css 0.60.1 → 0.61.0

package/components/CTABanner/CTABanner.css

@@ -72,7 +72,7 @@
 /* Large breakpoint and up */
 @media screen and (min-width: 63.25rem) {
   .CTABanner-content {
-    gap: var(--base-size-32);
+    gap: var(--base-size-24);
   }
   .CTABanner-container {
     padding: var(--base-size-128) var(--base-size-64);

package/components/ComparisonTable/ComparisonTable.css

@@ -59,7 +59,7 @@
 }
 
 .ComparisonTable-cell-heading {
-  font-weight: var(--base-text-weight-semibold);
+  font-weight: var(--base-text-weight-medium);
   font-size: var(--brand-text-size-200);
   line-height: var(--brand-text-lineHeight-200);
 }

package/components/EyebrowBanner/EyebrowBanner.css

@@ -57,7 +57,7 @@
 .EyebrowBanner__leadingLabel {
   display: flex;
   font-family: var(--brand-body-fontFamily);
-  font-weight: var(--base-text-weight-bold);
+  font-weight: var(--base-text-weight-medium);
   font-size: var(--brand-EyebrowBanner-label-size);
   line-height: 1em; /* for optical alignment */
   letter-spacing: var(--brand-text-letterSpacing-200);

package/components/FAQ/FAQ.css

@@ -26,7 +26,7 @@
 
 .FAQ__heading--large {
   /*Visual appearance as a h2*/
-  font-weight: var(--brand-text-weight-800);
+  font-weight: var(--brand-text-weight-normal);
   font-size: var(--brand-text-size-800);
   line-height: var(--brand-text-lineHeight-800);
   letter-spacing: var(--brand-text-letterSpacing-800);
@@ -37,7 +37,7 @@
 }
 
 .FAQ.details__summary {
-  font-weight: var(--brand-text-weight-800);
+  font-weight: var(--brand-text-weight-normal);
   font-size: var(--brand-text-size-800);
   line-height: var(--brand-text-lineHeight-800);
   letter-spacing: var(--brand-text-letterSpacing-800);

package/components/Heading/Heading.css

@@ -3,6 +3,14 @@
   color: var(--brand-color-text-default);
 }
 
+.Heading--textWrap-balance {
+  text-wrap: balance;
+}
+
+.Heading--textWrap-wrap {
+  text-wrap: wrap;
+}
+
 .Heading-font--hubot-sans {
   --condensed-stretch: 90%;
 }

package/components/Label/Label.css

@@ -189,7 +189,7 @@
 }
 
 .Label__label {
-  font-weight: var(--base-text-weight-semibold);
+  font-weight: var(--base-text-weight-medium);
   line-height: inherit;
 }
 

package/components/Link/Link.css

@@ -15,6 +15,10 @@
 .Link--arrow-end {
   --gap: var(--base-size-4);
   --arrow-size: var(--base-size-16);
+
+  /* Optical alignment */
+  position: relative;
+  top: 0.05em;
 }
 
 .Link--arrow-start.Link--large,
@@ -74,7 +78,7 @@
 }
 
 .Link--label {
-  font-weight: var(--base-text-weight-semibold);
+  font-weight: var(--base-text-weight-medium);
 }
 
 .Link--large .Link--label {

package/components/Prose/Prose.css

@@ -93,7 +93,7 @@
 
 .Prose h4 {
   --spacing: var(--base-size-48);
-  font-weight: var(--brand-text-weight-350);
+  font-weight: var(--brand-heading-weight-400);
   font-size: var(--brand-text-size-300);
   line-height: var(--brand-text-lineHeight-300);
   font-family: var(--brand-heading-fontFamily);
@@ -173,8 +173,11 @@
 /* 7. Inline elements                                         */
 /* ---------------------------------------------------------- */
 
-.Prose strong {
-  font-weight: var(--brand-text-weight-800);
+.Prose strong,
+.Prose b {
+  font-weight: var(
+    --brand-text-weight-heavy
+  ) !important; /* Overrides Primer product styles in dotcom. Should compute to 550 */
 }
 
 .Prose em {

package/components/SectionIntro/SectionIntro.css

@@ -28,7 +28,7 @@
 }
 
 .SectionIntro-heading {
-  max-width: 18ch;
+  max-width: 24ch;
 }
 
 .SectionIntro--full-width .SectionIntro-heading {

package/components/SectionIntroStacked/SectionIntroStacked.css

@@ -13,7 +13,7 @@
 .SectionIntroStackedItem__item-text b {
   color: var(--brand-color-text-default);
   font-style: normal;
-  font-weight: var(--base-text-weight-semibold);
+  font-weight: var(--base-text-weight-normal);
 }
 
 .SectionIntroStacked--full-width .SectionIntroStacked-heading {

package/components/SubNav/SubNav.css

@@ -23,7 +23,7 @@
 
 .SubNav__heading {
   display: block;
-  font-weight: var(--base-text-weight-semibold);
+  font-weight: var(--base-text-weight-medium);
   color: var(--brand-color-text-default);
   font-family: var(--brand-heading-fontFamily);
   text-decoration: none;
@@ -423,7 +423,7 @@
 
   .SubNav__link-label {
     font-size: var(--brand-text-size-200);
-    font-weight: var(--base-text-weight-semibold);
+    font-weight: var(--base-text-weight-medium);
     padding-block-end: var(--base-size-6);
   }
 

package/components/SubdomainNavBar/SubdomainNavBar.css

@@ -92,7 +92,7 @@
 
 .SubdomainNavBar-title-separator {
   color: var(--brand-color-text-muted);
-  font-weight: var(--base-text-weight-semibold);
+  font-weight: var(--base-text-weight-normal);
   font-size: var(--base-size-32);
   line-height: 29px;
 }
@@ -107,6 +107,9 @@
   text-decoration: none;
   padding-right: var(--base-size-16);
   white-space: nowrap;
+  /* Optical alignment with logo */
+  position: relative;
+  top: 1px;
 }
 
 .SubdomainNavBar-title:hover {
@@ -270,14 +273,14 @@
   }
 
   .SubdomainNavBar-link--title {
-    font-weight: var(--base-text-weight-bold);
+    font-weight: var(--base-text-weight-medium);
   }
 }
 
 @media screen and (min-width: 48rem) {
   .SubdomainNavBar-link {
     font-family: var(--brand-heading-fontFamily);
-    font-weight: var(--base-text-weight-semibold);
+    font-weight: var(--base-text-weight-normal);
     font-size: var(--base-size-16);
     line-height: var(--base-size-16);
     padding: var(--base-size-16) var(--base-size-16);

package/components/Testimonial/Testimonial.css

@@ -139,7 +139,7 @@
 }
 
 .Testimonial-from {
-  font-weight: var(--base-text-weight-semibold);
+  font-weight: var(--base-text-weight-normal);
 }
 
 .Testimonial-position {

package/components/forms/FormControl/FormControl.css

@@ -22,7 +22,7 @@
 
 .FormControl-label {
   color: var(--brand-color-text-default);
-  font-weight: var(--base-text-weight-semibold);
+  font-weight: var(--base-text-weight-medium);
   font-family: var(--brand-body-fontFamily);
 }
 
@@ -53,7 +53,7 @@
 .FormControl-label--checkbox {
   cursor: pointer;
   font-size: var(--brand-text-size-100);
-  font-weight: var(--base-text-weight-semibold);
+  font-weight: var(--base-text-weight-medium);
   line-height: var(--base-size-24); /* FIXME */
   position: relative;
   top: 2px;

package/components/river/river-shared.css

@@ -42,7 +42,7 @@
 
 .River__text strong,
 .River__text b {
-  font-weight: var(--base-text-weight-semibold);
+  font-weight: var(--base-text-weight-normal);
   color: var(--brand-color-text-default);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.60.1",
+  "version": "0.61.0",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",