@primer/view-components 0.45.1-rc.015a120e → 0.45.2

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

@@ -1 +1,77 @@
-.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)}
+/* 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);
+}

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

@@ -1 +1,134 @@
-.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);border-right:var(--borderWidth-thin) solid var(--bgColor-default);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{border-right:0;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}:is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child){border-left: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{border-left:var(--borderWidth-thin) solid var(--bgColor-default);border-right:0;margin-left:-11px;margin-right:0}
+/* 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;
+  }

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

@@ -10,19 +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:after",
-    ".avatar.avatar-more:before",
+    ".avatar.avatar-more::before",
+    ".avatar.avatar-more::after",
     ".AvatarStack--right .AvatarStack-body",
     ":is(.AvatarStack--right .AvatarStack-body):hover .avatar",
-    ":is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child)",
     ".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 +1,168 @@
-.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)}}
+/* 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);
+    }
+}

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

@@ -1 +1,218 @@
-.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)}
+/* 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

@@ -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-footer",
     ".Box--blue .Box-row",
+    ".Box--blue .Box-footer",
     ".Box--danger",
-    ":is(.Box--danger .Box-body):last-of-type",
     ":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",

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

@@ -1 +1,29 @@
-.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}
+.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;
+}