@mixtint/primer-view-components 0.72.0

package/app/components/primer/beta/border_box.css

@@ -0,0 +1,218 @@
+/* stylelint-disable primer/spacing */
+/* stylelint-disable primer/typography */
+/* BorderBox */
+/* TODO: Rename to BorderBox to match PVC */
+.Box {
+  background-color: var(--bgColor-default);
+  border-color: var(--borderColor-default);
+  border-style: solid;
+  border-width: var(--borderWidth-thin);
+  border-radius: var(--borderRadius-medium);
+}
+/* Box padding density options */
+.Box--condensed {
+  line-height: 1.25;
+}
+.Box--condensed .Box-header {
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
+  }
+.Box--condensed .Box-body {
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
+  }
+.Box--condensed .Box-footer {
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
+  }
+.btn-octicon:is(.Box--condensed .Box-btn-octicon) {
+      padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
+      margin: calc(var(--controlStack-medium-gap-condensed) * -1) calc(var(--controlStack-small-gap-spacious) * -1);
+      line-height: 1.25;
+    }
+.Box--condensed .Box-row {
+    padding: var(--stack-padding-condensed) var(--stack-padding-normal);
+  }
+.Box--spacious .Box-header {
+    padding: var(--stack-padding-spacious);
+    line-height: 1.25;
+  }
+.Box--spacious .Box-title {
+    font-size: var(--text-title-size-medium);
+  }
+.Box--spacious .Box-body {
+    padding: var(--stack-padding-spacious);
+  }
+.Box--spacious .Box-footer {
+    padding: var(--stack-padding-spacious);
+  }
+.btn-octicon:is(.Box--spacious .Box-btn-octicon) {
+      padding: var(--stack-padding-spacious);
+      margin: calc(var(--stack-gap-spacious) * -1);
+    }
+.Box--spacious .Box-row {
+    padding: var(--stack-padding-spacious);
+  }
+.Box-header {
+  padding: var(--stack-padding-normal);
+  margin: calc(var(--borderWidth-thin) * -1) calc(var(--borderWidth-thin) * -1) 0;
+  background-color: var(--bgColor-muted);
+  border-color: var(--borderColor-default);
+  border-style: solid;
+  border-width: var(--borderWidth-thin);
+  border-top-left-radius: var(--borderRadius-medium);
+  border-top-right-radius: var(--borderRadius-medium);
+}
+.Box-title {
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-semibold);
+}
+.Box-body {
+  padding: var(--stack-padding-normal);
+  border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
+
+  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
+}
+.Box-body:last-of-type {
+    margin-bottom: calc(var(--borderWidth-thin) * -1);
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+/* Box rows */
+.Box-row {
+  padding: var(--stack-padding-normal);
+  margin-top: calc(var(--borderWidth-thin) * -1);
+  list-style-type: none; /* To account for applying Box component to a list */
+  border-top-color: var(--borderColor-muted);
+  border-top-style: solid;
+  border-top-width: var(--borderWidth-thin);
+}
+.Box-row:first-of-type {
+    border-top-left-radius: var(--borderRadius-medium);
+    border-top-right-radius: var(--borderRadius-medium);
+  }
+.Box-row:last-of-type {
+    border-bottom-right-radius: var(--borderRadius-medium);
+    border-bottom-left-radius: var(--borderRadius-medium);
+  }
+/* Adds a blue vertical line to the left of the row
+  ** For indicating a row item is unread */
+.Box-row.Box-row--unread,.Box-row.unread {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis);
+  }
+/* Focus styles for when drag icon */
+.Box-row.navigation-focus .Box-row--drag-button {
+      color: var(--fgColor-accent);
+      cursor: grab;
+      opacity: 100;
+    }
+/* Grabbing while row is dragged */
+.Box-row.navigation-focus.is-dragging .Box-row--drag-button {
+      cursor: grabbing;
+    }
+/* Row dragging styles */
+.Box-row.navigation-focus.sortable-chosen {
+      background-color: var(--bgColor-muted);
+    }
+/* Makes dragging row background gray */
+.Box-row.navigation-focus.sortable-ghost {
+      background-color: var(--bgColor-muted);
+
+      /* Hides contents of row while dragging so row looks solid gray */
+    }
+.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide {
+        opacity: 0;
+      }
+.Box-row--focus-gray.navigation-focus {
+    background-color: var(--bgColor-muted);
+  }
+.Box-row--focus-blue.navigation-focus {
+    background-color: var(--bgColor-accent-muted);
+  }
+.Box-row--hover-gray:hover {
+    background-color: var(--bgColor-muted);
+  }
+.Box-row--hover-blue:hover {
+    background-color: var(--bgColor-accent-muted);
+  }
+/* Optional link style
+** Makes links on mobile blue since they don't have hover state,
+** and links are dark-gray with blue hover on desktop. */
+@media (min-width: 768px) {
+.Box-row-link {
+    color: var(--fgColor-default);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+}
+
+    .Box-row-link:hover {
+      color: var(--fgColor-accent);
+      -webkit-text-decoration: none;
+      text-decoration: none;
+    }
+  }
+/* Optional drag icon styles for reordering items
+** Focus styles included in .Box-row above */
+.Box-row--drag-button {
+  opacity: 0;
+}
+.Box-footer {
+  padding: var(--stack-padding-normal);
+  margin-top: calc(var(--borderWidth-thin) * -1); /* prevents double border when used with .Box-body */
+  border-top-color: var(--borderColor-default);
+  border-top-style: solid;
+  border-top-width: var(--borderWidth-thin);
+  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
+}
+/* Option for a box with scrolling content */
+.Box--scrollable {
+  max-height: 324px;
+  overflow: scroll;
+}
+/* Box themes */
+.Box--blue {
+  border-color: var(--borderColor-accent-muted);
+}
+.Box--blue .Box-header {
+    background-color: var(--bgColor-accent-muted);
+    border-color: var(--borderColor-accent-muted);
+  }
+.Box--blue .Box-body {
+    border-color: var(--borderColor-accent-muted);
+  }
+.Box--blue .Box-row {
+    border-color: var(--borderColor-accent-muted);
+  }
+.Box--blue .Box-footer {
+    border-color: var(--borderColor-accent-muted);
+  }
+/* Applies and red border to the outside of the box,
+** but not to the border separating rows. */
+.Box--danger {
+  border-color: var(--borderColor-danger-emphasis);
+}
+:is(.Box--danger .Box-row):first-of-type {
+      border-color: var(--borderColor-danger-emphasis);
+    }
+:is(.Box--danger .Box-body):last-of-type {
+      border-color: var(--borderColor-danger-emphasis);
+    }
+.Box-header--blue {
+  background-color: var(--bgColor-accent-muted);
+  border-color: var(--borderColor-accent-muted);
+}
+/* Box row highlight themes */
+.Box-row--yellow {
+  background-color: var(--bgColor-attention-muted);
+}
+.Box-row--blue {
+  background-color: var(--bgColor-accent-muted);
+}
+.Box-row--gray {
+  background-color: var(--bgColor-muted);
+}
+/* Box with btn-octicon */
+/* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
+.Box-btn-octicon.btn-octicon {
+    padding: var(--control-medium-paddingInline-spacious);
+    margin: calc(var(--controlStack-small-gap-spacious) * -1);
+    line-height: var(--text-title-lineHeight-large); /* override btn-octicon line-height */
+  }

package/app/components/primer/beta/border_box.css.json

@@ -0,0 +1,54 @@
+{
+  "name": "beta/border_box",
+  "selectors": [
+    ".Box",
+    ".Box--condensed",
+    ".Box--condensed .Box-header",
+    ".Box--condensed .Box-body",
+    ".Box--condensed .Box-footer",
+    ".btn-octicon:is(.Box--condensed .Box-btn-octicon)",
+    ".Box--condensed .Box-row",
+    ".Box--spacious .Box-header",
+    ".Box--spacious .Box-title",
+    ".Box--spacious .Box-body",
+    ".Box--spacious .Box-footer",
+    ".btn-octicon:is(.Box--spacious .Box-btn-octicon)",
+    ".Box--spacious .Box-row",
+    ".Box-header",
+    ".Box-title",
+    ".Box-body",
+    ".Box-body:last-of-type",
+    ".Box-row",
+    ".Box-row:first-of-type",
+    ".Box-row:last-of-type",
+    ".Box-row.Box-row--unread",
+    ".Box-row.unread",
+    ".Box-row.navigation-focus .Box-row--drag-button",
+    ".Box-row.navigation-focus.is-dragging .Box-row--drag-button",
+    ".Box-row.navigation-focus.sortable-chosen",
+    ".Box-row.navigation-focus.sortable-ghost",
+    ".Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide",
+    ".Box-row--focus-gray.navigation-focus",
+    ".Box-row--focus-blue.navigation-focus",
+    ".Box-row--hover-gray:hover",
+    ".Box-row--hover-blue:hover",
+    ".Box-row-link",
+    ".Box-row-link:hover",
+    ".Box-row--drag-button",
+    ".Box-footer",
+    ".Box--scrollable",
+    ".Box--blue",
+    ".Box--blue .Box-header",
+    ".Box--blue .Box-body",
+    ".Box--blue .Box-row",
+    ".Box--blue .Box-footer",
+    ".Box--danger",
+    ":is(.Box--danger .Box-row):first-of-type",
+    ":is(.Box--danger .Box-body):last-of-type",
+    ".Box-header--blue",
+    ".Box-row--yellow",
+    ".Box-row--blue",
+    ".Box-row--gray",
+    ".Box-btn-octicon.btn-octicon"
+  ]
+}

package/app/components/primer/beta/breadcrumbs.css

@@ -0,0 +1,29 @@
+.breadcrumb-item {
+  display: inline-block;
+  list-style: none;
+  max-width: 100%;
+}
+
+.breadcrumb-item::after {
+    display: inline-block;
+    height: 0.8em;
+    /* stylelint-disable-next-line primer/spacing */
+    margin: 0 0.15em 0 0.5em;
+    content: '';
+    /* stylelint-disable-next-line primer/borders */
+    border-right: 0.1em solid var(--borderColor-neutral-emphasis);
+    transform: rotate(15deg) translateY(0.0625em);
+  }
+
+:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current='false']))::after {
+    content: none;
+  }
+
+/* stylelint-disable-next-line selector-max-type */
+
+.breadcrumb-item-selected a {
+  color: var(--fgColor-default);
+  -webkit-text-decoration: none !important;
+  text-decoration: none !important;
+  cursor: default !important;
+}

package/app/components/primer/beta/breadcrumbs.css.json

@@ -0,0 +1,9 @@
+{
+  "name": "beta/breadcrumbs",
+  "selectors": [
+    ".breadcrumb-item",
+    ".breadcrumb-item::after",
+    ":is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current='false']))::after",
+    ".breadcrumb-item-selected a"
+  ]
+}

package/app/components/primer/beta/button.css

@@ -0,0 +1,359 @@
+/* stylelint-disable selector-no-qualifying-type */
+/* stylelint-disable selector-max-type */
+/* stylelint-disable primer/spacing */
+/* CSS for Button  */
+/* temporary, pre primitives release */
+:root {
+  --duration-fast: 80ms;
+  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
+}
+/* base button */
+.Button {
+  position: relative;
+  display: inline-flex;
+  min-width: max-content;
+  height: var(--control-medium-size);
+  padding: 0 var(--control-medium-paddingInline-normal);
+  font-size: var(--text-body-size-medium);
+  font-weight: var(--base-text-weight-medium);
+  color: var(--button-default-fgColor-rest);
+  text-align: center;
+  cursor: pointer;
+  flex-direction: row;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: transparent;
+  border: var(--borderWidth-thin) solid;
+  border-color: transparent;
+  border-radius: var(--borderRadius-medium);
+  transition: var(--duration-fast) var(--easing-easeInOut);
+  transition-property: color, fill, background-color, border-color;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--base-size-4);
+
+  /* mobile friendly sizing */
+}
+@media (pointer: coarse) {
+      :is(.Button::before) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    min-height: 48px;
+    content: "";
+    transform: translateX(-50%) translateY(-50%);
+    min-width: 48px;
+  }
+  }
+/* base states */
+.Button:hover {
+    transition-duration: var(--duration-fast);
+  }
+.Button:active {
+    transition: none;
+  }
+.Button:disabled,.Button[aria-disabled='true'] {
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+.Button.Button--iconOnly {
+    color: var(--fgColor-muted);
+  }
+:is(a.Button,summary.Button):hover {
+    -webkit-text-decoration: none;
+    text-decoration: none;
+  }
+/* wrap grid content to allow trailingAction to lock-right */
+.Button-content {
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: 'leadingVisual text trailingVisual';
+  grid-template-columns: min-content minmax(0, auto) min-content;
+  align-items: center;
+  place-content: center;
+
+  /* padding-bottom: 1px; optical alignment for firefox */
+}
+.Button-content > :not(:last-child) {
+    margin-right: var(--control-medium-gap);
+  }
+/* center child elements for fullWidth */
+.Button-content--alignStart {
+  justify-content: start;
+}
+/* button child elements */
+/* align svg */
+.Button-visual {
+  display: flex;
+  pointer-events: none; /* allow click handler to work, avoiding visuals */
+}
+.Button-visual .Counter {
+    color: inherit;
+    background-color: var(--buttonCounter-default-bgColor-rest);
+  }
+.Button-label {
+  line-height: var(--text-body-lineHeight-medium);
+  white-space: nowrap;
+  grid-area: text;
+}
+.Button-leadingVisual {
+  grid-area: leadingVisual;
+}
+.Button-leadingVisual svg {
+  fill: currentcolor;
+}
+.Button-trailingVisual {
+  grid-area: trailingVisual;
+}
+.Button-trailingAction {
+  margin-right: calc(var(--base-size-4) * -1);
+}
+/* sizes */
+.Button--small {
+  min-width: var(--control-small-size);
+  height: var(--control-small-size);
+  padding: 0 var(--control-small-paddingInline-condensed);
+  font-size: var(--text-body-size-small);
+  gap: var(--control-small-gap);
+}
+.Button--small .Button-label {
+    line-height: var(--text-body-lineHeight-small);
+  }
+:is(.Button--small .Button-content) > :not(:last-child) {
+      margin-right: var(--control-small-gap);
+    }
+.Button--large {
+  height: var(--control-large-size);
+  padding: 0 var(--control-large-paddingInline-spacious);
+  gap: var(--control-large-gap);
+}
+.Button--large .Button-label {
+    line-height: var(--text-body-lineHeight-large);
+  }
+:is(.Button--large .Button-content) > :not(:last-child) {
+      margin-right: var(--control-large-gap);
+    }
+.Button--fullWidth {
+  width: 100%;
+}
+/* allow button label text to wrap */
+.Button--labelWrap {
+  min-width: fit-content;
+  height: unset;
+  min-height: var(--control-medium-size);
+}
+.Button--labelWrap .Button-content {
+    flex: 1 1 auto;
+    align-self: stretch;
+    padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));
+  }
+.Button--labelWrap .Button-label {
+    white-space: unset;
+  }
+.Button--labelWrap.Button--small {
+    height: unset;
+    min-height: var(--control-small-size);
+  }
+.Button--labelWrap.Button--small .Button-content {
+      padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));
+    }
+.Button--labelWrap.Button--large {
+    height: unset;
+    min-height: var(--control-large-size);
+    padding-inline: var(--control-large-paddingInline-spacious);
+  }
+.Button--labelWrap.Button--large .Button-content {
+      padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));
+    }
+/* variants */
+/* primary */
+.Button--primary {
+  color: var(--button-primary-fgColor-rest);
+  fill: var(--button-primary-iconColor-rest);
+  background-color: var(--button-primary-bgColor-rest);
+  border-color: var(--button-primary-borderColor-rest);
+  box-shadow: var(--shadow-resting-small, var(--color-btn-primary-shadow));
+}
+.Button--primary.Button--iconOnly {
+    color: var(--button-primary-iconColor-rest);
+  }
+.Button--primary:hover:not(:disabled,.Button--inactive) {
+    background-color: var(--button-primary-bgColor-hover);
+    border-color: var(--button-primary-borderColor-hover);
+  }
+/* fallback :focus state */
+.Button--primary:focus {
+    outline: 2px solid var(--focus-outlineColor);
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
+
+    /* remove fallback :focus if :focus-visible is supported */
+  }
+.Button--primary:focus:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+/* default focus state */
+.Button--primary:focus-visible {
+    outline: 2px solid var(--focus-outlineColor);
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis);
+  }
+.Button--primary:active:not(:disabled),.Button--primary[aria-pressed='true'] {
+    background-color: var(--button-primary-bgColor-active);
+    box-shadow: var(--button-primary-shadow-selected);
+  }
+.Button--primary:disabled,.Button--primary[aria-disabled='true'] {
+    color: var(--button-primary-fgColor-disabled);
+    fill: var(--button-primary-fgColor-disabled);
+    background-color: var(--button-primary-bgColor-disabled);
+    border-color: var(--button-primary-borderColor-disabled);
+  }
+.Button--primary .Counter {
+    color: inherit;
+    background-color: var(--buttonCounter-primary-bgColor-rest);
+  }
+/* default (secondary) */
+.Button--secondary {
+  color: var(--button-default-fgColor-rest);
+  fill: var(--fgColor-muted); /* help this */
+  background-color: var(--button-default-bgColor-rest);
+  border-color: var(--button-default-borderColor-rest);
+  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
+}
+.Button--secondary:hover:not(:disabled,.Button--inactive) {
+    background-color: var(--button-default-bgColor-hover);
+    border-color: var(--button-default-borderColor-hover);
+  }
+.Button--secondary:active:not(:disabled) {
+    background-color: var(--button-default-bgColor-active);
+    border-color: var(--button-default-borderColor-active);
+  }
+.Button--secondary[aria-pressed='true'] {
+    background-color: var(--button-default-bgColor-selected);
+    box-shadow: var(--shadow-inset);
+  }
+.Button--secondary:disabled,.Button--secondary[aria-disabled='true'] {
+    color: var(--control-fgColor-disabled);
+    fill: var(--control-fgColor-disabled);
+    background-color: var(--button-default-bgColor-disabled);
+    border-color: var(--button-default-borderColor-disabled);
+  }
+.Button--invisible {
+  color: var(--button-invisible-fgColor-rest);
+}
+.Button--invisible.Button--iconOnly {
+    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
+  }
+.Button--invisible:hover:not(:disabled,.Button--inactive) {
+    background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));
+  }
+.Button--invisible[aria-pressed='true'],.Button--invisible:active:not(:disabled) {
+    background-color: var(--button-invisible-bgColor-active);
+  }
+.Button--invisible:disabled,.Button--invisible[aria-disabled='true'] {
+    color: var(--button-invisible-fgColor-disabled);
+    fill: var(--button-invisible-fgColor-disabled);
+    background-color: var(--button-invisible-bgColor-disabled);
+    border-color: var(--button-invisible-borderColor-disabled);
+  }
+/* if button has no visuals, use link blue for text */
+.Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--button-invisible-fgColor-rest);
+  }
+.Button--invisible .Button-visual {
+    color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
+  }
+:is(.Button--invisible .Button-visual) .Counter {
+      color: var(--fgColor-default);
+    }
+.Button--link {
+  display: inline-block;
+  min-width: fit-content;
+  height: unset;
+  padding: 0;
+  font-size: inherit;
+  color: var(--fgColor-link);
+  fill: var(--fgColor-link);
+  border: none;
+}
+.Button--link:hover:not(:disabled,.Button--inactive) {
+    -webkit-text-decoration: underline;
+    text-decoration: underline;
+  }
+.Button--link:focus-visible,.Button--link:focus {
+    outline-offset: 2px;
+  }
+.Button--link:disabled,.Button--link[aria-disabled='true'] {
+    color: var(--control-fgColor-disabled);
+    fill: var(--control-fgColor-disabled);
+    background-color: transparent;
+    border-color: transparent;
+  }
+.Button--link .Button-label {
+      white-space: unset;
+  }
+/* danger */
+.Button--danger {
+  color: var(--button-danger-fgColor-rest);
+  fill: var(--button-danger-iconColor-rest);
+  background-color: var(--button-danger-bgColor-rest);
+  border-color: var(--button-danger-borderColor-rest);
+  box-shadow: var(--button-default-shadow-resting), var(--button-default-shadow-inset);
+}
+.Button--danger.Button--iconOnly {
+    color: var(--button-danger-iconColor-rest);
+  }
+.Button--danger:hover:not(:disabled,.Button--inactive) {
+    color: var(--button-danger-fgColor-hover);
+    fill: var(--button-danger-fgColor-hover);
+    background-color: var(--button-danger-bgColor-hover);
+    border-color: var(--button-danger-borderColor-hover);
+    box-shadow: var(--shadow-resting-small);
+  }
+.Button--danger:hover:not(:disabled,.Button--inactive) .Counter {
+      color: var(--buttonCounter-danger-fgColor-hover);
+      background-color: var(--buttonCounter-danger-bgColor-hover);
+    }
+.Button--danger:active:not(:disabled),.Button--danger[aria-pressed='true'] {
+    color: var(--button-danger-fgColor-active);
+    fill: var(--button-danger-fgColor-active);
+    background-color: var(--button-danger-bgColor-active);
+    border-color: var(--button-danger-borderColor-active);
+    box-shadow: var(--button-danger-shadow-selected);
+  }
+.Button--danger:disabled,.Button--danger[aria-disabled='true'] {
+    color: var(--button-danger-fgColor-disabled);
+    fill: var(--button-danger-fgColor-disabled);
+    background-color: var(--button-danger-bgColor-disabled);
+    border-color: var(--button-default-borderColor-disabled);
+  }
+:is(.Button--danger:disabled,.Button--danger[aria-disabled='true']) .Counter {
+      color: var(--buttonCounter-danger-fgColor-disabled);
+      background-color: var(--buttonCounter-danger-bgColor-disabled);
+    }
+.Button--danger .Counter {
+    color: var(--buttonCounter-danger-fgColor-rest);
+    background-color: var(--buttonCounter-danger-bgColor-rest);
+  }
+.Button--iconOnly {
+  display: inline-grid;
+  width: var(--control-medium-size);
+  padding: unset;
+  place-content: center;
+}
+.Button--iconOnly.Button--small {
+    width: var(--control-small-size);
+  }
+.Button--iconOnly.Button--large {
+    width: var(--control-large-size);
+  }
+/* `disabled` takes precedence over `inactive` */
+.Button--inactive:not([aria-disabled='true'], :disabled) {
+  color: var(--button-inactive-fgColor);
+  cursor: default;
+  background-color: var(--button-inactive-bgColor);
+  border: 0;
+}