@primer/brand-css 0.77.1-rc.bd5b9efe → 0.78.0-rc.6fbe9fb5

package/components/ActionMenu/ActionMenu.css

@@ -37,36 +37,40 @@
   background-color: var(--brand-color-canvas-default);
 }
 
-.ActionMenu__innerButton--split-button:first-child,
-.ActionMenu__innerButton--split-button:first-child:hover {
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary,
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary:hover {
   position: relative;
   z-index: 1;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }
 
-.ActionMenu__innerButton--split-button:first-child::before,
-.ActionMenu__innerButton--split-button:hover:first-child::before {
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary::before,
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary:hover::before {
   content: '';
   position: absolute;
   top: calc(var(--base-size-2) / -2);
   right: calc(var(--base-size-2) * -1);
   width: var(--brand-borderWidth-thin);
   height: calc(100% + var(--base-size-2));
-  background-color: var(--brand-color-border-muted);
+  background-color: var(--brand-ActionMenu-color-splitButton-divider-default);
 }
 
-.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button::before {
+.ActionMenu__innerButton--primary.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary::before {
+  background-color: var(--brand-ActionMenu-color-splitButton-divider-primary);
+}
+
+.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary::before {
   top: calc(var(--base-size-2) * -1);
   height: calc(100% + var(--base-size-4));
 }
 
-.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button:active:first-child::before {
+.ActionMenu__innerButton--subtle.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-primary:active::before {
   width: 0;
 }
 
 .ActionMenu__innerButton--medium.ActionMenu__innerButton--split-button,
-.ActionMenu__innerButton--split-button:last-child {
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-menu {
   padding: var(--brand-control-medium-paddingBlock-condensed) var(--brand-control-medium-paddingInline-normal); /* Override the default button padding */
 }
 
@@ -74,7 +78,7 @@
   vertical-align: middle !important;
 }
 
-.ActionMenu__innerButton--split-button:last-child {
+.ActionMenu__innerButton--split-button.ActionMenu__innerButton--split-button-menu {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
   position: relative;

package/components/Button/Button.css

@@ -57,7 +57,7 @@
 .Button__icon-visual {
   display: flex;
   align-self: center;
-  height: var(--base-size-16);
+  height: var(--brand-Button-icon-size-medium);
   width: auto;
   fill: currentcolor;
 }
@@ -85,11 +85,11 @@
   border-width: var(--brand-borderWidth-thin);
 }
 
-.Button--primary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
+.Button--primary:where(:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true'])):hover {
   background-color: var(--brand-button-primary-bgColor-hover);
 }
 
-.Button--primary:not(.Button[disabled], .Button[aria-disabled='true']):active,
+.Button--primary:where(:not(.Button[disabled], .Button[aria-disabled='true'])):active,
 .Button--primary[aria-expanded='true'] {
   background: var(--brand-button-primary-bgColor-active);
   border-color: var(--brand-button-primary-borderColor-active);
@@ -105,12 +105,8 @@
   background-color: var(--brand-button-primary-bgColor-disabled);
 }
 
-.Button--primary:disabled .Button-arrow--disabled,
-.Button--primary[aria-disabled='true'] .Button-arrow--disabled,
-.Button--primary.Button--disabled .Button-arrow--disabled,
-.Button--primary:disabled .Button__icon-visual--disabled,
-.Button--primary[aria-disabled='true'] .Button__icon-visual--disabled,
-.Button--primary.Button--disabled .Button__icon-visual--disabled,
+.Button--primary:where(:disabled, [aria-disabled='true'], .Button--disabled)
+  :where(.Button-arrow--disabled, .Button__icon-visual--disabled),
 .Button--label-primary.Button-label--disabled {
   color: var(--brand-button-primary-fgColor-disabled);
 }
@@ -124,12 +120,12 @@
   backdrop-filter: blur(var(--base-size-20));
 }
 
-.Button--secondary:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
+.Button--secondary:where(:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true'])):hover {
   background-color: 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:where(:not(.Button[disabled], .Button[aria-disabled='true'])):active,
 .Button--secondary[aria-expanded='true'] {
   background-color: var(--brand-button-secondary-bgColor-active);
   border-color: var(--brand-button-secondary-borderColor-active);
@@ -139,12 +135,8 @@
   border-color: var(--brand-button-secondary-fgColor-disabled);
 }
 
-.Button--secondary:disabled .Button-arrow--disabled,
-.Button--secondary[aria-disabled='true'] .Button-arrow--disabled,
-.Button--secondary.Button--disabled .Button-arrow--disabled,
-.Button--secondary:disabled .Button__icon-visual--disabled,
-.Button--secondary[aria-disabled='true'] .Button__icon-visual--disabled,
-.Button--secondary.Button--disabled .Button__icon-visual--disabled,
+.Button--secondary:where(:disabled, [aria-disabled='true'], .Button--disabled)
+  :where(.Button-arrow--disabled, .Button__icon-visual--disabled),
 .Button--label-secondary.Button-label--disabled {
   color: var(--brand-button-secondary-fgColor-disabled);
 }
@@ -159,12 +151,12 @@
   backdrop-filter: blur(var(--base-size-20));
 }
 
-.Button--subtle:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true']):hover {
+.Button--subtle:where(:not(.Button[disabled], .Button[aria-disabled='true'], [aria-expanded='true'])):hover {
   background-color: 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:where(:not(.Button[disabled], .Button[aria-disabled='true'])):active,
 .Button--subtle[aria-expanded='true'] {
   background-color: var(--brand-button-subtle-bgColor-active);
   border-color: var(--brand-button-subtle-borderColor-active);
@@ -174,12 +166,8 @@
   color: var(--brand-button-subtle-fgColor-rest);
 }
 
-.Button--subtle:disabled .Button-arrow--disabled,
-.Button--subtle[aria-disabled='true'] .Button-arrow--disabled,
-.Button--subtle.Button--disabled .Button-arrow--disabled,
-.Button--subtle:disabled .Button__icon-visual--disabled,
-.Button--subtle[aria-disabled='true'] .Button__icon-visual--disabled,
-.Button--subtle.Button--disabled .Button__icon-visual--disabled,
+.Button--subtle:where(:disabled, [aria-disabled='true'], .Button--disabled)
+  :where(.Button-arrow--disabled, .Button__icon-visual--disabled),
 .Button--label-subtle.Button-label--disabled {
   color: var(--brand-button-subtle-fgColor-disabled);
 }
@@ -187,24 +175,32 @@
 /* size */
 
 .Button--size-small {
-  min-height: var(--brand-control-small-size);
+  min-height: var(--brand-Button-control-size-small);
   padding-inline: var(--brand-control-small-paddingInline-normal);
 }
 
 .Button--size-medium {
-  min-height: var(--brand-control-medium-size);
+  min-height: var(--brand-Button-control-size-medium);
   padding: var(--brand-control-medium-paddingBlock-condensed) var(--base-size-20);
 }
 
 .Button--size-large {
-  min-height: var(--brand-control-large-size);
+  min-height: var(--brand-Button-control-size-large);
   padding: var(--brand-control-large-paddingBlock-condensed) var(--brand-control-large-paddingInline-spacious);
 }
 
-.Button--size-large .Button__icon-visual,
-.Button--size-large .Button-arrow {
-  height: var(--base-size-20);
-  width: var(--base-size-20);
+/* Keep visual sizing overridable by composed controls such as IconButton. */
+.Button--size-small :where(.Button__icon-visual) {
+  height: var(--brand-Button-icon-size-small);
+}
+
+.Button--size-medium :where(.Button__icon-visual) {
+  height: var(--brand-Button-icon-size-medium);
+}
+
+.Button--size-large :where(.Button__icon-visual, .Button-arrow) {
+  height: var(--brand-Button-icon-size-large);
+  width: var(--brand-Button-icon-size-large);
 }
 
 .Button--label-medium {

package/components/ButtonGroup/ButtonGroup.css

@@ -8,3 +8,36 @@
 .ButtonGroup > * {
   flex-grow: 1;
 }
+
+.ButtonGroup--variant-joined {
+  gap: 0;
+  flex-wrap: nowrap;
+}
+
+.ButtonGroup--variant-joined .ButtonGroup__item {
+  position: relative;
+  display: flex;
+  flex-grow: 0;
+}
+
+.ButtonGroup--variant-joined .ButtonGroup__item:not(:first-child) {
+  margin-inline-start: calc(var(--brand-borderWidth-thin) * -1);
+}
+
+.ButtonGroup--variant-joined .ButtonGroup__item:focus-within {
+  z-index: 1;
+}
+
+.ButtonGroup__joinedButton.ButtonGroup__joinedButton {
+  border-radius: 0;
+}
+
+.ButtonGroup__item:first-child .ButtonGroup__joinedButton {
+  border-start-start-radius: var(--brand-borderRadius-medium);
+  border-end-start-radius: var(--brand-borderRadius-medium);
+}
+
+.ButtonGroup__item:last-child .ButtonGroup__joinedButton {
+  border-start-end-radius: var(--brand-borderRadius-medium);
+  border-end-end-radius: var(--brand-borderRadius-medium);
+}

package/components/IconButton/IconButton.css

@@ -0,0 +1,142 @@
+.IconButton {
+  flex: none;
+  gap: 0;
+  padding: 0;
+}
+
+.IconButton.IconButton {
+  min-width: var(--brand-IconButton-control-size-medium);
+  width: var(--brand-IconButton-control-size-medium);
+  height: var(--brand-IconButton-control-size-medium);
+}
+
+.IconButton--small.IconButton--small {
+  min-width: var(--brand-IconButton-control-size-small);
+  width: var(--brand-IconButton-control-size-small);
+  height: var(--brand-IconButton-control-size-small);
+}
+
+.IconButton--large.IconButton--large {
+  min-width: var(--brand-IconButton-control-size-large);
+  width: var(--brand-IconButton-control-size-large);
+  height: var(--brand-IconButton-control-size-large);
+}
+
+.IconButton--rounded.IconButton--rounded {
+  border-radius: var(--brand-borderRadius-full);
+}
+
+.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true']) {
+  color: var(--brand-IconButton-danger-fgColor-rest);
+  background-color: var(--brand-IconButton-danger-bgColor-rest);
+  border-color: var(--brand-IconButton-danger-borderColor-rest);
+}
+
+.IconButton--variant-danger.IconButton--variant-danger:not(
+    [disabled],
+    [aria-disabled='true'],
+    [aria-expanded='true']
+  ):hover {
+  color: var(--brand-IconButton-danger-fgColor-hover);
+  background-color: var(--brand-IconButton-danger-bgColor-hover);
+  border-color: var(--brand-IconButton-danger-borderColor-hover);
+}
+
+.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true']):active,
+.IconButton--variant-danger.IconButton--variant-danger:not([disabled], [aria-disabled='true'])[aria-expanded='true'] {
+  color: var(--brand-IconButton-danger-fgColor-active);
+  background-color: var(--brand-IconButton-danger-bgColor-active);
+  border-color: var(--brand-IconButton-danger-borderColor-active);
+}
+
+.IconButton--variant-invisible.IconButton--variant-invisible:where(:not(:hover, :active, [aria-expanded='true'])) {
+  background-color: var(--brand-IconButton-invisible-bgColor-rest);
+  border-color: var(--brand-IconButton-invisible-borderColor-rest);
+  backdrop-filter: none;
+}
+
+.IconButton--inactive.IconButton--inactive,
+.IconButton--inactive.IconButton--inactive:hover,
+.IconButton--inactive.IconButton--inactive:active {
+  color: var(--brand-IconButton-inactive-fgColor);
+  cursor: auto;
+  background-color: var(--brand-IconButton-inactive-bgColor);
+  border-color: var(--brand-IconButton-inactive-borderColor);
+  backdrop-filter: none;
+}
+
+.IconButton--inactive .IconButton__icon {
+  color: inherit;
+}
+
+.IconButton--small .IconButton__icon {
+  width: var(--brand-IconButton-icon-size-small);
+  height: var(--brand-IconButton-icon-size-small);
+}
+
+.IconButton--medium .IconButton__icon {
+  width: var(--brand-IconButton-icon-size-medium);
+  height: var(--brand-IconButton-icon-size-medium);
+}
+
+.IconButton--large .IconButton__icon {
+  width: var(--brand-IconButton-icon-size-large);
+  height: var(--brand-IconButton-icon-size-large);
+}
+
+.IconButton__loadingIndicator.IconButton__loadingIndicator {
+  display: block;
+  box-sizing: border-box;
+  width: var(--brand-IconButton-icon-size-medium);
+  height: var(--brand-IconButton-icon-size-medium);
+  border: var(--brand-borderWidth-thin) solid currentcolor;
+  border-inline-end-color: transparent;
+  border-radius: 50%;
+  animation: IconButton-spin var(--brand-IconButton-loadingIndicator-animationDuration-default) linear infinite;
+}
+
+.IconButton--small .IconButton__loadingIndicator {
+  width: var(--brand-IconButton-icon-size-small);
+  height: var(--brand-IconButton-icon-size-small);
+}
+
+.IconButton--large .IconButton__loadingIndicator {
+  width: var(--brand-IconButton-icon-size-large);
+  height: var(--brand-IconButton-icon-size-large);
+}
+
+.IconButton__loadingAnnouncement {
+  position: absolute;
+  width: var(--base-size-1);
+  height: var(--base-size-1);
+  padding: 0;
+  margin: calc(var(--base-size-1) * -1);
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes IconButton-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (forced-colors: active) {
+  .IconButton--inactive {
+    color: GrayText;
+    border-color: GrayText;
+  }
+
+  .IconButton__loadingIndicator {
+    border-color: ButtonText;
+    border-inline-end-color: transparent;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .IconButton__loadingIndicator {
+    animation-duration: var(--brand-IconButton-loadingIndicator-animationDuration-reducedMotion);
+  }
+}

package/components/Tooltip/Tooltip.css

@@ -65,7 +65,9 @@
 }
 
 /* Directional styles */
-.Tooltip[data-direction='n'] {
+.Tooltip[data-direction='n'],
+.Tooltip[data-direction='ne'],
+.Tooltip[data-direction='nw'] {
   -o-border-image: conic-gradient(var(--c) 0 0) 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0
     calc(var(--p) - var(--b) / 2) / 0 0 var(--h) 0;
      border-image: conic-gradient(var(--c) 0 0) fill 0 / var(--r) calc(100% - var(--p) - var(--b) / 2) 0
@@ -81,7 +83,9 @@
   );
 }
 
-.Tooltip[data-direction='s'] {
+.Tooltip[data-direction='s'],
+.Tooltip[data-direction='se'],
+.Tooltip[data-direction='sw'] {
   -o-border-image: conic-gradient(var(--c) 0 0) 0/ 0 calc(100% - var(--p) - var(--b) / 2) var(--r) calc(
       var(--p) - var(--b) / 2
     ) / var(--h) 0 0 0;
@@ -131,11 +135,25 @@
   );
 }
 
-.Tooltip[data-direction='n']::after {
+.Tooltip[data-direction='ne'],
+.Tooltip[data-direction='se'] {
+  --p: 25%;
+}
+
+.Tooltip[data-direction='nw'],
+.Tooltip[data-direction='sw'] {
+  --p: 75%;
+}
+
+.Tooltip[data-direction='n']::after,
+.Tooltip[data-direction='ne']::after,
+.Tooltip[data-direction='nw']::after {
   top: 100%;
 }
 
-.Tooltip[data-direction='s']::after {
+.Tooltip[data-direction='s']::after,
+.Tooltip[data-direction='se']::after,
+.Tooltip[data-direction='sw']::after {
   bottom: 100%;
 }
 

package/components/forms/TextInput/TextInput.css

@@ -38,6 +38,16 @@
  * Sizes
  */
 
+.TextInput-wrapper--small {
+  height: var(--brand-control-small-size);
+}
+
+.TextInput--small {
+  font-weight: var(--brand-text-weight-100);
+  font-size: var(--brand-text-size-100);
+  padding: var(--brand-control-small-paddingBlock) var(--brand-control-small-paddingInline-condensed);
+}
+
 .TextInput-wrapper--medium {
   height: var(--brand-control-medium-size);
 }
@@ -131,6 +141,12 @@
 /*
  * TextInput visuals
  */
+.TextInput--has-leading-visual--small {
+  padding-inline-start: calc(
+    var(--brand-control-small-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-small-gap)
+  );
+}
+
 .TextInput--has-leading-visual--medium {
   padding-inline-start: calc(
     var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap)
@@ -143,6 +159,12 @@
   );
 }
 
+.TextInput--has-trailing-visual--small {
+  padding-inline-end: calc(
+    var(--brand-control-small-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-small-gap)
+  );
+}
+
 .TextInput--has-trailing-visual--medium {
   padding-inline-end: calc(
     var(--brand-control-medium-paddingInline-condensed) + var(--base-size-16) + var(--brand-control-medium-gap)
@@ -177,6 +199,14 @@
   right: var(--brand-control-medium-paddingInline-condensed);
 }
 
+.TextInput-leading-visual--small {
+  left: var(--brand-control-small-paddingInline-condensed);
+}
+
+.TextInput-trailing-visual--small {
+  right: var(--brand-control-small-paddingInline-condensed);
+}
+
 .TextInput-leading-visual--large {
   left: var(--brand-control-large-paddingInline-condensed);
 }
@@ -190,6 +220,11 @@
   height: var(--base-size-16);
 }
 
+.TextInput-leading-visual-icon--small {
+  width: var(--base-size-16);
+  height: var(--base-size-16);
+}
+
 .TextInput-leading-visual-icon--large {
   width: var(--base-size-20);
   height: var(--base-size-20);
@@ -237,6 +272,11 @@
   padding-inline: var(--brand-control-medium-paddingInline-condensed);
 }
 
+.TextInput-leading-text-inner--small,
+.TextInput-trailing-text-inner--small {
+  padding-inline: var(--brand-control-small-paddingInline-condensed);
+}
+
 .TextInput-leading-text-inner--large,
 .TextInput-trailing-text-inner--large {
   padding-inline: var(--brand-control-large-paddingInline-condensed);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/brand-css",
-  "version": "0.77.1-rc.bd5b9efe",
+  "version": "0.78.0-rc.6fbe9fb5",
   "description": "CSS stylesheets for Primer Brand components",
   "keywords": [
     "primer",