@primer/view-components 0.45.2 → 0.46.0-rc.4214e155

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

@@ -1,77 +1 @@
-/* avatar */
-
-.avatar {
-  display: inline-block;
-  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 1;
-  vertical-align: middle;
-  background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */
-  border-radius: var(--borderRadius-medium);
-  flex-shrink: 0;
-  /* stylelint-disable-next-line primer/box-shadow */
-  box-shadow: 0 0 0 1px var(--avatar-borderColor);
-}
-
-.avatar-link {
-  float: left;
-  /* stylelint-disable-next-line primer/typography */
-  line-height: 1;
-}
-
-/* User for example on /stars and /user for grids of avatars */
-
-.avatar-group-item {
-  display: inline-block;
-  margin-bottom: var(--base-size-4);
-}
-
-/* Border radius */
-
-.avatar-1,
-.avatar-2,
-.avatar-small {
-  border-radius: var(--borderRadius-small);
-}
-
-/* Sizes */
-
-.avatar-1 {
-  width: var(--base-size-16);
-  height: var(--base-size-16);
-}
-
-.avatar-2 {
-  width: var(--base-size-20);
-  height: var(--base-size-20);
-}
-
-.avatar-3 {
-  width: var(--base-size-24);
-  height: var(--base-size-24);
-}
-
-.avatar-4 {
-  width: var(--base-size-28);
-  height: var(--base-size-28);
-}
-
-.avatar-5 {
-  width: var(--base-size-32);
-  height: var(--base-size-32);
-}
-
-.avatar-6 {
-  width: var(--base-size-40);
-  height: var(--base-size-40);
-}
-
-.avatar-7 {
-  width: var(--base-size-48);
-  height: var(--base-size-48);
-}
-
-.avatar-8 {
-  width: var(--base-size-64);
-  height: var(--base-size-64);
-}
+.avatar{background-color:var(--avatar-bgColor);border-radius:var(--borderRadius-medium);box-shadow:0 0 0 1px var(--avatar-borderColor);display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:var(--base-size-4)}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small)}.avatar-1{height:var(--base-size-16);width:var(--base-size-16)}.avatar-2{height:var(--base-size-20);width:var(--base-size-20)}.avatar-3{height:var(--base-size-24);width:var(--base-size-24)}.avatar-4{height:var(--base-size-28);width:var(--base-size-28)}.avatar-5{height:var(--base-size-32);width:var(--base-size-32)}.avatar-6{height:var(--base-size-40);width:var(--base-size-40)}.avatar-7{height:var(--base-size-48);width:var(--base-size-48)}.avatar-8{height:var(--base-size-64);width:var(--base-size-64)}

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

@@ -1,134 +1 @@
-/* AvatarStack */
-
-/* Stacked avatars can be used to show who is participating in thread when
-** there is limited space available. */
-
-.AvatarStack {
-  position: relative;
-  min-width: 26px;
-  height: 20px;
-}
-
-.AvatarStack .AvatarStack-body {
-    position: absolute;
-  }
-
-.AvatarStack.AvatarStack--two {
-    min-width: 36px;
-  }
-
-.AvatarStack.AvatarStack--three-plus {
-    min-width: 46px;
-  }
-
-.AvatarStack-body {
-  display: flex;
-  background: var(--bgColor-default);
-  /* stylelint-disable-next-line primer/borders */
-  border-radius: 100px;
-}
-
-.AvatarStack-body .avatar {
-    position: relative;
-    z-index: 2;
-    display: flex;
-    width: 20px;
-    height: 20px;
-    box-sizing: content-box;
-    /* stylelint-disable-next-line primer/spacing */
-    margin-right: -11px;
-    background-color: var(--bgColor-default);
-    border-radius: var(--borderRadius-small);
-    transition: margin 0.1s ease-in-out;
-  }
-
-:is(.AvatarStack-body .avatar):first-child {
-      z-index: 3;
-    }
-
-:is(.AvatarStack-body .avatar):last-child {
-      z-index: 1;
-    }
-
-/* stylelint-disable-next-line selector-max-type */
-
-:is(.AvatarStack-body .avatar) img {
-      border-radius: var(--borderRadius-small);
-    }
-
-/* Account for 4+ avatars */
-
-:is(.AvatarStack-body .avatar):nth-child(n + 4) {
-      display: none;
-      opacity: 0;
-    }
-
-.AvatarStack-body:hover .avatar {
-      margin-right: var(--base-size-4);
-    }
-
-.AvatarStack-body:hover .avatar:nth-child(n + 4) {
-      display: flex;
-      opacity: 1;
-    }
-
-.AvatarStack-body:hover .avatar-more {
-      display: none !important;
-    }
-
-.avatar.avatar-more {
-  z-index: 1;
-  margin-right: 0;
-  background: var(--bgColor-muted);
-}
-
-.avatar.avatar-more::before,.avatar.avatar-more::after {
-    position: absolute;
-    display: block;
-    height: 20px;
-    content: '';
-    /* stylelint-disable-next-line primer/borders */
-    border-radius: 2px;
-    outline: var(--borderWidth-thin) solid var(--bgColor-default);
-  }
-
-.avatar.avatar-more::before {
-    width: 17px;
-    background: var(--avatarStack-fade-bgColor-muted);
-  }
-
-.avatar.avatar-more::after {
-    width: 14px;
-    background: var(--avatarStack-fade-bgColor-default);
-  }
-
-/* Right aligned variation */
-
-.AvatarStack--right .AvatarStack-body {
-    right: 0;
-    flex-direction: row-reverse;
-  }
-
-:is(.AvatarStack--right .AvatarStack-body):hover .avatar {
-      margin-right: 0;
-      margin-left: var(--base-size-4);
-    }
-
-.AvatarStack--right .avatar.avatar-more {
-    background: var(--avatarStack-fade-bgColor-default);
-  }
-
-:is(.AvatarStack--right .avatar.avatar-more)::before {
-      width: 5px;
-    }
-
-:is(.AvatarStack--right .avatar.avatar-more)::after {
-      width: 2px;
-      background: var(--bgColor-muted);
-    }
-
-.AvatarStack--right .avatar {
-    margin-right: 0;
-    /* stylelint-disable-next-line primer/spacing */
-    margin-left: -11px;
-  }
+.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}:is(.AvatarStack-body .avatar):first-child{z-index:3}:is(.AvatarStack-body .avatar):last-child{z-index:1}:is(.AvatarStack-body .avatar) img{border-radius:var(--borderRadius-small)}:is(.AvatarStack-body .avatar):nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:var(--base-size-4)}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin) solid var(--bgColor-default);position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted);width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}:is(.AvatarStack--right .AvatarStack-body):hover .avatar{margin-left:var(--base-size-4);margin-right:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default)}:is(.AvatarStack--right .avatar.avatar-more):before{width:5px}:is(.AvatarStack--right .avatar.avatar-more):after{background:var(--bgColor-muted);width:2px}.AvatarStack--right .avatar{margin-left:-11px;margin-right:0}

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

@@ -10,18 +10,18 @@
     ":is(.AvatarStack-body .avatar):first-child",
     ":is(.AvatarStack-body .avatar):last-child",
     ":is(.AvatarStack-body .avatar) img",
-    ":is(.AvatarStack-body .avatar):nth-child(n + 4)",
+    ":is(.AvatarStack-body .avatar):nth-child(n+4)",
     ".AvatarStack-body:hover .avatar",
-    ".AvatarStack-body:hover .avatar:nth-child(n + 4)",
+    ".AvatarStack-body:hover .avatar:nth-child(n+4)",
     ".AvatarStack-body:hover .avatar-more",
     ".avatar.avatar-more",
-    ".avatar.avatar-more::before",
-    ".avatar.avatar-more::after",
+    ".avatar.avatar-more:after",
+    ".avatar.avatar-more:before",
     ".AvatarStack--right .AvatarStack-body",
     ":is(.AvatarStack--right .AvatarStack-body):hover .avatar",
     ".AvatarStack--right .avatar.avatar-more",
-    ":is(.AvatarStack--right .avatar.avatar-more)::before",
-    ":is(.AvatarStack--right .avatar.avatar-more)::after",
+    ":is(.AvatarStack--right .avatar.avatar-more):before",
+    ":is(.AvatarStack--right .avatar.avatar-more):after",
     ".AvatarStack--right .avatar"
   ]
 }

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

@@ -1,168 +1 @@
-/* blankslate */
-
-.blankslate-container {
-  container-type: inline-size;
-  width: 100%;
-}
-
-.blankslate {
-  --blankslate-outer-padding-block: var(--base-size-32);
-  --blankslate-outer-padding-inline: var(--base-size-32);
-
-  position: relative;
-  /* stylelint-disable-next-line primer/spacing */
-  padding: var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);
-  text-align: center;
-
-  /* stylelint-disable-next-line selector-max-type */
-}
-
-.blankslate p {
-    font-size: var(--text-body-size-large);
-    color: var(--fgColor-muted);
-  }
-
-/* stylelint-disable-next-line selector-max-type */
-
-.blankslate code {
-    padding: var(--base-size-2) var(--base-size-4) var(--base-size-4);
-    font-size: var(--text-body-size-medium);
-    background: var(--bgColor-default);
-    border: var(--borderWidth-thin) solid var(--borderColor-muted);
-    border-radius: var(--borderRadius-medium);
-  }
-
-/* stylelint-disable-next-line selector-max-type */
-
-.blankslate img {
-    width: 56px;
-    height: 56px;
-  }
-
-.blankslate-icon {
-  /* stylelint-disable-next-line primer/spacing */
-  margin-right: var(--control-small-gap);
-  /* stylelint-disable-next-line primer/spacing */
-  margin-bottom: var(--stack-gap-condensed);
-  /* stylelint-disable-next-line primer/spacing */
-  margin-left: var(--control-small-gap);
-  color: var(--fgColor-muted);
-}
-
-.blankslate-image {
-  /* stylelint-disable-next-line primer/spacing */
-  margin-bottom: var(--stack-gap-normal);
-}
-
-.blankslate-heading {
-  margin-bottom: var(--base-size-4);
-  font-size: var(--text-title-size-medium);
-  font-weight: var(--text-title-weight-medium);
-}
-
-.blankslate-action {
-  /* stylelint-disable-next-line primer/spacing */
-  margin-top: var(--stack-gap-normal);
-}
-
-.blankslate-action:first-of-type {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-top: var(--stack-gap-spacious);
-  }
-
-.blankslate-action:last-of-type {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-bottom: var(--stack-gap-condensed);
-  }
-
-.blankslate-capped {
-  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);
-}
-
-.blankslate-spacious {
-  --blankslate-outer-padding-block: var(--base-size-80);
-  --blankslate-outer-padding-inline: var(--base-size-40);
-}
-
-.blankslate-narrow {
-  max-width: 485px;
-  margin: 0 auto;
-}
-
-/* was .large-format
-** QUESTION: should we deprecate this? */
-
-/* stylelint-disable-next-line selector-max-type */
-
-.blankslate-large img {
-    width: 80px;
-    height: 80px;
-  }
-
-/* stylelint-disable-next-line selector-max-type */
-
-.blankslate-large h3 {
-    /* stylelint-disable-next-line primer/spacing */
-    margin: var(--stack-gap-normal) 0;
-
-    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
-    /* stylelint-disable-next-line primer/typography */
-    font-size: 24px;
-  }
-
-/* stylelint-disable-next-line selector-max-type */
-
-.blankslate-large p {
-    font-size: var(--text-body-size-large);
-  }
-
-/* was .clean-background
-** TO DO: deprecate this and use utility instead */
-
-.blankslate-clean-background {
-  border: 0;
-}
-
-/* At the time these styles were written,
-   `34rem` was our "small" breakpoint width */
-
-@container (max-width: 34rem) {
-  .blankslate {
-    --blankslate-outer-padding-block: var(--base-size-20);
-    --blankslate-outer-padding-inline: var(--base-size-20);
-  }
-
-  .blankslate-spacious {
-    --blankslate-outer-padding-block: var(--base-size-44);
-    --blankslate-outer-padding-inline: var(--base-size-28);
-  }
-
-  .blankslate-icon {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-bottom: var(--stack-gap-condensed);
-  }
-
-  .blankslate-heading {
-    font-size: var(--text-title-size-small);
-  }
-
-  /* stylelint-disable-next-line selector-max-type */
-  .blankslate p {
-    font-size: var(--text-body-size-medium);
-  }
-
-  .blankslate-action {
-    /* stylelint-disable-next-line primer/spacing */
-    margin-top: var(--stack-gap-condensed);
-  }
-
-    .blankslate-action:first-of-type {
-      /* stylelint-disable-next-line primer/spacing */
-      margin-top: var(--stack-gap-normal);
-    }
-
-    .blankslate-action:last-of-type {
-      /* stylelint-disable-next-line primer/spacing */
-      margin-bottom: calc(var(--stack-gap-condensed) / 2);
-    }
-}
+.blankslate-container{container-type:inline-size;width:100%}.blankslate{--blankslate-outer-padding-block:var(--base-size-32);--blankslate-outer-padding-inline:var(--base-size-32);padding:var(--blankslate-outer-padding-block) var(--blankslate-outer-padding-inline);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted);font-size:var(--text-body-size-large)}.blankslate code{background:var(--bgColor-default);border:var(--borderWidth-thin) solid var(--borderColor-muted);border-radius:var(--borderRadius-medium);font-size:var(--text-body-size-medium);padding:var(--base-size-2) var(--base-size-4) var(--base-size-4)}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted);margin-bottom:var(--stack-gap-condensed);margin-left:var(--control-small-gap);margin-right:var(--control-small-gap)}.blankslate-image{margin-bottom:var(--stack-gap-normal)}.blankslate-heading{font-size:var(--text-title-size-medium);font-weight:var(--text-title-weight-medium);margin-bottom:var(--base-size-4)}.blankslate-action{margin-top:var(--stack-gap-normal)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-80);--blankslate-outer-padding-inline:var(--base-size-40)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal) 0}.blankslate-large p{font-size:var(--text-body-size-large)}.blankslate-clean-background{border:0}@container (max-width: 34rem){.blankslate{--blankslate-outer-padding-block:var(--base-size-20);--blankslate-outer-padding-inline:var(--base-size-20)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44);--blankslate-outer-padding-inline:var(--base-size-28)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed)}.blankslate-heading{font-size:var(--text-title-size-small)}.blankslate p{font-size:var(--text-body-size-medium)}.blankslate-action{margin-top:var(--stack-gap-condensed)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed)/2)}}

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

@@ -1,218 +1 @@
-/* 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 */
-  }
+.Box{background-color:var(--bgColor-default);border-color:var(--borderColor-default);border-radius:var(--borderRadius-medium);border-style:solid;border-width:var(--borderWidth-thin)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.btn-octicon:is(.Box--condensed .Box-btn-octicon){line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed)*-1) calc(var(--controlStack-small-gap-spacious)*-1);padding:var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed) var(--stack-padding-normal)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium)}.Box--spacious .Box-body,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious)}.btn-octicon:is(.Box--spacious .Box-btn-octicon){margin:calc(var(--stack-gap-spacious)*-1);padding:var(--stack-padding-spacious)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious)}.Box-header{background-color:var(--bgColor-muted);border-color:var(--borderColor-default);border-style:solid;border-top-left-radius:var(--borderRadius-medium);border-top-right-radius:var(--borderRadius-medium);border-width:var(--borderWidth-thin);margin:calc(var(--borderWidth-thin)*-1) calc(var(--borderWidth-thin)*-1) 0;padding:var(--stack-padding-normal)}.Box-title{font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-semibold)}.Box-body{border-bottom:var(--borderWidth-thin) solid var(--borderColor-default);padding:var(--stack-padding-normal)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium);border-bottom-right-radius:var(--borderRadius-medium);margin-bottom:calc(var(--borderWidth-thin)*-1)}.Box-row{border-top:var(--borderWidth-thin) solid var(--borderColor-muted);list-style-type:none;margin-top:calc(var(--borderWidth-thin)*-1);padding:var(--stack-padding-normal)}.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-left-radius:var(--borderRadius-medium);border-bottom-right-radius:var(--borderRadius-medium)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted)}.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)}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default)}.Box-row-link,.Box-row-link:hover{-webkit-text-decoration:none;text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent)}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium) var(--borderRadius-medium);border-top:var(--borderWidth-thin) solid var(--borderColor-default);margin-top:calc(var(--borderWidth-thin)*-1);padding:var(--stack-padding-normal)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted)}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted)}.Box--danger,:is(.Box--danger .Box-body):last-of-type,:is(.Box--danger .Box-row):first-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--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-btn-octicon.btn-octicon{line-height:var(--text-title-lineHeight-large);margin:calc(var(--controlStack-small-gap-spacious)*-1);padding:var(--control-medium-paddingInline-spacious)}

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

@@ -3,9 +3,9 @@
   "selectors": [
     ".Box",
     ".Box--condensed",
-    ".Box--condensed .Box-header",
     ".Box--condensed .Box-body",
     ".Box--condensed .Box-footer",
+    ".Box--condensed .Box-header",
     ".btn-octicon:is(.Box--condensed .Box-btn-octicon)",
     ".Box--condensed .Box-row",
     ".Box--spacious .Box-header",
@@ -40,11 +40,11 @@
     ".Box--blue",
     ".Box--blue .Box-header",
     ".Box--blue .Box-body",
-    ".Box--blue .Box-row",
     ".Box--blue .Box-footer",
+    ".Box--blue .Box-row",
     ".Box--danger",
-    ":is(.Box--danger .Box-row):first-of-type",
     ":is(.Box--danger .Box-body):last-of-type",
+    ":is(.Box--danger .Box-row):first-of-type",
     ".Box-header--blue",
     ".Box-row--yellow",
     ".Box-row--blue",

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

@@ -1,29 +1 @@
-.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;
-}
+.breadcrumb-item{display:inline-block;list-style:none;max-width:100%}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .15em 0 .5em;transform:rotate(15deg) translateY(.0625em)}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}