@primer/brand-css 0.68.0-rc.59bbed40 → 0.68.0-rc.982c487b

package/components/ActionMenu/ActionMenu.css

@@ -70,6 +70,10 @@
   padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal); /* Override the default button padding */
 }
 
+.ActionMenu__inner-button-dropdown-icon {
+  vertical-align: middle !important;
+}
+
 .ActionMenu__innerButton--split-button:last-child {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;

package/components/Button/Button.css

@@ -38,6 +38,13 @@
   position: relative;
 }
 
+.Button--label {
+  font-family: var(--brand-body-fontFamily);
+  font-style: normal;
+  font-weight: var(--base-text-weight-medium);
+  text-align: center;
+}
+
 .Button__icon-visual {
   display: flex;
   align-self: center;
@@ -63,19 +70,20 @@
 .Button--primary {
   color: var(--brand-button-primary-fgColor-rest);
   background-color: var(--brand-button-primary-bgColor-rest);
-  border: solid var(--brand-borderWidth-thin) var(--brand-button-primary-borderColor-rest);
+}
+
+.Button--size-small.Button--primary {
+  border-width: var(--brand-borderWidth-thin);
 }
 
 .Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
-  background-color: var(--brand-button-primary-bgColor-hover);
-  border-color: var(--brand-button-primary-borderColor-hover);
+  background: var(--brand-button-primary-bgColor-hover);
 }
 
 .Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,
 .Button--primary[aria-expanded='true'] {
-  background-color: var(--brand-button-primary-bgColor-active);
+  background: var(--brand-button-primary-bgColor-active);
   border-color: var(--brand-button-primary-borderColor-active);
-  box-shadow: var(--brand-button-primary-shadow-active);
 }
 
 .Button--label-primary {
@@ -86,7 +94,6 @@
 .Button--primary[aria-disabled='true'],
 .Button--primary.Button--disabled {
   background-color: var(--brand-button-primary-bgColor-disabled);
-  border-color: var(--brand-button-primary-borderColor-disabled);
 }
 
 .Button--primary:disabled .Button-arrow--disabled,
@@ -99,61 +106,24 @@
   color: var(--brand-button-primary-fgColor-disabled);
 }
 
-/* accent */
-
-.Button--accent {
-  color: var(--brand-button-accent-fgColor-rest);
-  background-color: var(--brand-button-accent-bgColor-rest);
-}
-
-.Button--size-small.Button--accent {
-  border-width: var(--brand-borderWidth-thin);
-}
-
-.Button--accent:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
-  background: var(--brand-button-accent-bgColor-hover);
-}
-
-.Button--accent:not(.Button[disabled], .Button[aria-disabled='true']):active,
-.Button--accent[aria-expanded='true'] {
-  background-color: var(--brand-button-accent-bgColor-active);
-  border-color: var(--brand-button-accent-borderColor-active);
-}
-
-.Button--label-accent {
-  color: var(--brand-button-accent-fgColor-rest);
-}
-
-.Button--accent:disabled,
-.Button--accent[aria-disabled='true'],
-.Button--accent.Button--disabled {
-  background-color: var(--brand-button-accent-bgColor-disabled);
-}
-
-.Button--accent:disabled .Button-arrow--disabled,
-.Button--accent[aria-disabled='true'] .Button-arrow--disabled,
-.Button--accent.Button--disabled .Button-arrow--disabled,
-.Button--accent:disabled .Button__icon-visual--disabled,
-.Button--accent[aria-disabled='true'] .Button__icon-visual--disabled,
-.Button--accent.Button--disabled .Button__icon-visual--disabled,
-.Button--label-accent.Button-label--disabled {
-  color: var(--brand-button-accent-fgColor-disabled);
-}
-
 /* secondary */
 
 .Button--secondary {
-  transition: background-color, border-color 200ms;
+  transition: background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);
+  background: var(--brand-button-secondary-bgColor-rest);
   border-color: var(--brand-button-secondary-borderColor-rest);
   color: var(--brand-button-secondary-fgColor-rest);
+  backdrop-filter: blur(var(--base-size-20));
 }
 
 .Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
+  background: var(--brand-button-secondary-bgColor-hover);
   border-color: var(--brand-button-secondary-borderColor-hover);
 }
 
 .Button--secondary:not(.Button[disabled], .Button[aria-disabled='true']):active,
 .Button--secondary[aria-expanded='true'] {
+  background: var(--brand-button-secondary-bgColor-active);
   border-color: var(--brand-button-secondary-borderColor-active);
 }
 
@@ -174,19 +144,23 @@
 /* subtle */
 
 .Button--subtle {
-  background-color: var(--brand-button-subtle-bgColor-rest);
+  transition: background var(--brand-animation-duration-faster), border-color var(--brand-animation-duration-faster);
+  background: var(--brand-button-subtle-bgColor-rest);
+  border-width: var(--brand-borderWidth-thin);
+  border-color: var(--brand-button-subtle-borderColor-rest);
   color: var(--brand-color-text-default);
-  transition: background-color, border-color var(--brand-animation-duration-faster);
+  backdrop-filter: blur(var(--base-size-20));
 }
 
 .Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
-  background-color: var(--brand-button-subtle-bgColor-hover);
+  background: var(--brand-button-subtle-bgColor-hover);
+  border-color: var(--brand-button-subtle-borderColor-hover);
 }
 
 .Button--subtle:not(.Button[disabled], .Button[aria-disabled='true']):active,
 .Button--subtle[aria-expanded='true'] {
-  background-color: var(--brand-button-subtle-bgColor-active);
-  border-color: transparent;
+  background: var(--brand-button-subtle-bgColor-active);
+  border-color: var(--brand-button-subtle-borderColor-active);
 }
 
 .Button--label-subtle {
@@ -227,8 +201,9 @@
 }
 
 .Button--label-medium {
-  font-size: var(--brand-text-subhead-size-medium);
-  line-height: var(--brand-text-subhead-lineHeight-medium);
+  font-size: var(--brand-text-size-200);
+  line-height: var(--brand-text-lineHeight-200);
+  letter-spacing: 0.01rem;
 }
 
 .Button--label-large {

package/components/Pillar/Pillar.css

@@ -1,10 +1,13 @@
 .Pillar {
-  max-width: 50ch;
   color: var(--brand-color-text-default);
   display: flex;
   flex-direction: column;
 }
 
+.Pillar--has-max-width {
+  max-width: 50ch;
+}
+
 .Pillar--has-border {
   border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
   border-radius: var(--brand-borderRadius-medium);
@@ -28,12 +31,13 @@
 }
 
 .Pillar__image img,
-.Pillar__image span {
+.Pillar__image span,
+.Pillar__image picture {
   display: block;
 }
 
 .Pillar__icon {
-  margin-bottom: var(--base-size-24);
+  margin-bottom: var(--base-size-48);
 }
 
 .Pillar__icon--with-background > svg {

package/components/SectionIntroStacked/SectionIntroStacked.css

@@ -30,26 +30,6 @@
   }
 }
 
-.SectionIntroStacked--variant-gridline::before,
-.SectionIntroStacked--variant-gridline::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100vw;
-  height: 0;
-  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-  z-index: 1;
-}
-
-.SectionIntroStacked--variant-gridline::before {
-  top: 0;
-}
-
-.SectionIntroStacked--variant-gridline::after {
-  bottom: 0;
-}
-
 @media screen and (min-width: 80rem) {
   .SectionIntroStacked--variant-gridline {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);

package/components/Tiles/Tiles.css

@@ -37,29 +37,6 @@
   }
 }
 
-.Tiles--variant-gridlines {
-  position: relative;
-}
-
-.Tiles--variant-gridlines::before,
-.Tiles--variant-gridlines::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100vw;
-  height: 0;
-  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-}
-
-.Tiles--variant-gridlines::before {
-  top: 0;
-}
-
-.Tiles--variant-gridlines::after {
-  bottom: 0;
-}
-
 .Tiles--variant-gridlines .Tiles-grid {
   position: relative;
   padding-right: var(--brand-borderWidth-thin);

package/components/component-helpers/shared.css

@@ -0,0 +1,32 @@
+/*
+ * .gridline: horizontal gridlines that span the visible viewport, breaking
+ * out of constrained-width parents. Uses border-image-outset to extend the
+ * line visually without affecting layout or causing scrollbar overflow.
+ */
+
+.gridline {
+  position: relative;
+}
+
+.gridline::before,
+.gridline::after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-top: var(--brand-borderWidth-thin) solid;
+  -o-border-image: linear-gradient(var(--brand-color-border-muted), var(--brand-color-border-muted)) 1;
+     border-image: linear-gradient(var(--brand-color-border-muted), var(--brand-color-border-muted)) 1;
+  border-image-outset: 0 100vw;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.gridline::before {
+  top: 0;
+}
+
+.gridline::after {
+  bottom: 0;
+}

package/components/river/RiverAccordion/RiverAccordion.css

@@ -40,26 +40,6 @@
   padding-block: var(--brand-RiverAccordion-variant-gridline-spacing-outerBlock);
 }
 
-.RiverAccordion--variant-gridline::before,
-.RiverAccordion--variant-gridline::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100vw;
-  height: 0;
-  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-  z-index: 1;
-}
-
-.RiverAccordion--variant-gridline::before {
-  top: 0;
-}
-
-.RiverAccordion--variant-gridline::after {
-  bottom: 0;
-}
-
 @media (min-width: 48rem) {
   .RiverAccordion--variant-gridline {
     --gap-width: var(--brand-RiverAccordion-variant-gridline-spacing-contentGap);

package/components/river/river-shared.css

@@ -20,26 +20,6 @@
   }
 }
 
-.River--variant-gridline::before,
-.River--variant-gridline::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100vw;
-  height: 0;
-  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-  z-index: 1;
-}
-
-.River--variant-gridline::before {
-  top: 0;
-}
-
-.River--variant-gridline::after {
-  bottom: 0;
-}
-
 @media screen and (min-width: 80rem) {
   .River--variant-gridline {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
@@ -475,25 +455,6 @@
   }
 }
 
-.RiverBreakout--variant-gridline::before,
-.RiverBreakout--variant-gridline::after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100vw;
-  height: 0;
-  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);
-}
-
-.RiverBreakout--variant-gridline::before {
-  top: 0;
-}
-
-.RiverBreakout--variant-gridline::after {
-  bottom: 0;
-}
-
 @media screen and (min-width: 618px) {
   .RiverBreakout--variant-gridline {
     border-inline: var(--brand-borderWidth-thin) solid var(--brand-color-border-muted);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.68.0-rc.59bbed40",
+  "version": "0.68.0-rc.982c487b",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",
@@ -32,7 +32,7 @@
   "devDependencies": {
     "@types/node": "24.12.0",
     "autoprefixer": "10.4.27",
-    "postcss": "8.5.8",
+    "postcss": "8.5.10",
     "tsx": "^4.21.0",
     "typescript": "5.9.3"
   },