@primer/brand-css 0.58.1 → 0.58.2-rc.72bf7a8f

package/components/FrostedGlassVFX/FrostedGlassVFX.css

@@ -8,18 +8,15 @@
 }
 
 .FrostedGlassVFX--intensity-low {
-  -webkit-backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-low));
-          backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-low));
+  backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-low));
 }
 
 .FrostedGlassVFX--intensity-medium {
-  -webkit-backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-medium));
-          backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-medium));
+  backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-medium));
 }
 
 .FrostedGlassVFX--intensity-high {
-  -webkit-backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-high));
-          backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-high));
+  backdrop-filter: blur(var(--brand-FrostedGlassVFX-blurIntensity-high));
 }
 
 .FrostedGlassVFX::before {

package/components/IDE/IDE.css

@@ -5,8 +5,7 @@
 }
 
 .IDE--glass {
-  -webkit-backdrop-filter: blur(var(--base-size-12));
-          backdrop-filter: blur(var(--base-size-12));
+  backdrop-filter: blur(var(--base-size-12));
 }
 
 .IDE--glass .IDE__inner {

package/components/PricingOptions/PricingOptions.css

@@ -365,6 +365,9 @@
 /* ---------------------------------------------------------- */
 
 .PricingOptions__feature-list {
+  --feature-list-font-size: var(--brand-text-size-200);
+  --feature-list-line-height: var(--brand-text-lineHeight-200);
+
   display: flex;
   flex-direction: column;
   gap: var(--base-size-8);
@@ -400,6 +403,21 @@
   margin-block-start: var(--base-size-20);
 }
 
+.PricingOptions__feature-list-item,
+.PricingOptions__feature-list-item span {
+  font-size: var(--feature-list-font-size) !important;
+  line-height: var(--feature-list-line-height) !important;
+}
+
+.PricingOptions__feature-list-group-heading {
+  font-size: var(--feature-list-font-size) !important;
+}
+
+.PricingOptions--items4 .PricingOptions__feature-list {
+  --feature-list-font-size: var(--brand-text-size-100);
+  --feature-list-line-height: var(--brand-text-lineHeight-100);
+}
+
 /*
  * Accordion component overrides
  */
@@ -425,8 +443,8 @@
 
 /* Accordion heading styling */
 .PricingOptions__feature-list-accordion .PricingOptions__feature-list-accordion-heading :is(h1, h2, h3, h4, h5, h6) {
-  font-size: var(--brand-text-size-200);
-  line-height: var(--brand-text-lineHeight-200);
+  font-size: var(--feature-list-font-size);
+  line-height: var(--feature-list-line-height);
   gap: var(--base-size-8);
   display: inline-flex;
   align-items: center;

package/components/Statistic/Statistic.css

@@ -75,6 +75,24 @@
 
 .Statistic__heading {
   font-stretch: 75%;
+  position: relative;
+}
+
+.Statistic__heading sup {
+  font-size: var(--brand-text-size-100);
+  line-height: 0;
+  font-weight: var(--brand-text-weight-100);
+  font-stretch: normal;
+  vertical-align: top;
+  top: var(--base-size-6); /* Optical align to heading top */
+  position: relative;
+}
+
+.Statistic__heading sup a {
+  /* Targets footnote links. Specificity not ideal, but these are passed through by the user */
+  padding: var(--base-size-4);
+  display: inline-block;
+  line-height: 1;
 }
 
 /*
@@ -85,7 +103,23 @@
 }
 
 .Statistic__description {
+  position: relative;
   display: block;
   margin-block-start: var(--base-size-8);
   font-stretch: normal;
 }
+
+.Statistic__description sup {
+  font-size: var(--brand-text-size-100);
+  vertical-align: top;
+  top: 0;
+  position: relative;
+  line-height: 0;
+}
+
+.Statistic__description sup a {
+  /* Targets footnote links. Specificity not ideal, but these are passed through by the user */
+  padding: var(--base-size-4);
+  display: inline-block;
+  line-height: 1;
+}

package/components/SubdomainNavBar/SubdomainNavBar.css

@@ -6,7 +6,6 @@
   z-index: 90;
   font-weight: 550;
   background: var(--brand-SubdomainNavBar-canvas-default);
-  -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),
@@ -561,7 +560,6 @@
     left: 0;
     right: 0;
     background: var(--brand-SubdomainNavBar-canvas-search);
-    -webkit-backdrop-filter: blur(100px);
     backdrop-filter: blur(100px);
     height: 100vh;
     width: 100vw;
@@ -589,7 +587,6 @@
 .SubdomainNavBar-search-dialog-control-area {
   height: 74px;
   background: var(--brand-SubdomainNavBar-canvas-default);
-  -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
   padding: var(--base-size-12) var(--base-size-28);
   display: flex;

package/components/list/ListItem/ListItem.css

@@ -13,7 +13,7 @@
 }
 
 .ListItem__leading-visual {
-  margin: var(--base-size-4) 0;
+  height: 1lh;
 }
 
 .ListItem__leading-visual--muted {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.58.1",
+  "version": "0.58.2-rc.72bf7a8f",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",