@primer/view-components 0.3.0-rc.dc2abcf9 → 0.3.0

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

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

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

@@ -1 +1,138 @@
-.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,var(--color-canvas-default));border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default,var(--color-canvas-default));border-radius:var(--borderRadius-small,3px);border-right:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--borderRadius-small,3px)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.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,var(--color-canvas-inset));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,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted,var(--color-avatar-stack-fade-more));width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade));width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade))}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--bgColor-muted,var(--color-canvas-inset));width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-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,var(--color-canvas-default));
+  border-radius: 100px;
+}
+
+.AvatarStack-body .avatar {
+    position: relative;
+    z-index: 2;
+    display: flex;
+    width: 20px;
+    height: 20px;
+    box-sizing: content-box;
+    margin-right: -11px;
+    background-color: var(--bgColor-default,var(--color-canvas-default));
+    border-right: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));
+    border-radius: var(--borderRadius-small,3px);
+    box-shadow: none;
+    transition: margin 0.1s ease-in-out;
+  }
+
+.AvatarStack-body .avatar:first-child {
+      z-index: 3;
+    }
+
+.AvatarStack-body .avatar:last-child {
+      z-index: 1;
+      border-right: 0;
+    }
+
+.AvatarStack-body .avatar img {
+      border-radius: var(--borderRadius-small,3px);
+    }
+
+/* Account for 4+ avatars */
+
+.AvatarStack-body .avatar:nth-child(n + 4) {
+      display: none;
+      opacity: 0;
+    }
+
+.AvatarStack-body:hover .avatar {
+      margin-right: 3px;
+    }
+
+.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,var(--color-canvas-inset));
+}
+
+.avatar.avatar-more::before,
+  .avatar.avatar-more::after {
+    position: absolute;
+    display: block;
+    height: 20px;
+    content: '';
+    border-radius: 2px;
+    outline: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));
+  }
+
+.avatar.avatar-more::before {
+    width: 17px;
+    background: var(--avatarStack-fade-bgColor-muted,var(--color-avatar-stack-fade-more));
+  }
+
+.avatar.avatar-more::after {
+    width: 14px;
+    background: var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade));
+  }
+
+/* Right aligned variation */
+
+.AvatarStack--right .AvatarStack-body {
+    right: 0;
+    flex-direction: row-reverse;
+  }
+
+.AvatarStack--right .AvatarStack-body:hover .avatar {
+      margin-right: 0;
+      margin-left: 3px;
+    }
+
+.AvatarStack--right .AvatarStack-body .avatar:not(:last-child) {
+      border-left: 0;
+    }
+
+.AvatarStack--right .avatar.avatar-more {
+    background: var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade));
+  }
+
+.AvatarStack--right .avatar.avatar-more::before {
+      width: 5px;
+    }
+
+.AvatarStack--right .avatar.avatar-more::after {
+      width: 2px;
+      background: var(--bgColor-muted,var(--color-canvas-inset));
+    }
+
+.AvatarStack--right .avatar {
+    margin-right: 0;
+    margin-left: -11px;
+    border-right: 0;
+    border-left: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));
+  }

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

@@ -10,19 +10,19 @@
     ".AvatarStack-body .avatar:first-child",
     ".AvatarStack-body .avatar:last-child",
     ".AvatarStack-body .avatar img",
-    ".AvatarStack-body .avatar:nth-child(n+4)",
+    ".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",
     ".AvatarStack--right .AvatarStack-body:hover .avatar",
     ".AvatarStack--right .AvatarStack-body .avatar:not(:last-child)",
     ".AvatarStack--right .avatar.avatar-more",
-    ".AvatarStack--right .avatar.avatar-more:before",
-    ".AvatarStack--right .avatar.avatar-more:after",
+    ".AvatarStack--right .avatar.avatar-more::before",
+    ".AvatarStack--right .avatar.avatar-more::after",
     ".AvatarStack--right .avatar"
   ]
 }

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

@@ -1 +1,90 @@
-.blankslate{padding:var(--base-size-32,2rem);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted))}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-neutral-muted));border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px)}.blankslate-spacious{padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.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,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}
+/* blankslate */
+
+.blankslate {
+  position: relative;
+  padding: var(--base-size-32,2rem);
+  text-align: center;
+}
+
+.blankslate p {
+    color: var(--fgColor-muted,var(--color-fg-muted));
+  }
+
+.blankslate code {
+    padding: 2px 5px 3px;
+    font-size: var(--text-body-size-medium,0.875rem);
+    background: var(--bgColor-default,var(--color-canvas-default));
+    border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-muted,var(--color-neutral-muted));
+    border-radius: var(--borderRadius-medium,6px);
+  }
+
+.blankslate img {
+    width: 56px;
+    height: 56px;
+  }
+
+.blankslate-icon {
+  margin-right: var(--control-small-gap,0.25rem);
+  margin-bottom: var(--stack-gap-condensed,0.5rem);
+  margin-left: var(--control-small-gap,0.25rem);
+  color: var(--fgColor-muted,var(--color-fg-muted));
+}
+
+.blankslate-image {
+  margin-bottom: var(--stack-gap-normal,1rem);
+}
+
+.blankslate-heading {
+  margin-bottom: var(--base-size-4,0.25rem);
+}
+
+.blankslate-action {
+  margin-top: var(--stack-gap-normal,1rem);
+}
+
+.blankslate-action:first-of-type {
+    margin-top: var(--stack-gap-spacious,1.5rem);
+  }
+
+.blankslate-action:last-of-type {
+    margin-bottom: var(--stack-gap-condensed,0.5rem);
+  }
+
+.blankslate-capped {
+  border-radius: 0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px);
+}
+
+.blankslate-spacious {
+  padding: var(--base-size-80,5rem) var(--base-size-40,2.5rem);
+}
+
+.blankslate-narrow {
+  max-width: 485px;
+  margin: 0 auto;
+}
+
+/* was .large-format
+** QUESTION: should we deprecate this? */
+
+.blankslate-large img {
+    width: 80px;
+    height: 80px;
+  }
+
+.blankslate-large h3 {
+    margin: var(--stack-gap-normal,1rem) 0;
+
+    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */
+    font-size: 24px;
+  }
+
+.blankslate-large p {
+    font-size: var(--text-body-size-large,1rem);
+  }
+
+/* was .clean-background
+** TO DO: deprecate this and use utility instead */
+
+.blankslate-clean-background {
+  border: 0;
+}

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

@@ -1 +1,279 @@
-.Box{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem))}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed,.5rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,1.25rem)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious,1.5rem)*-1) calc(var(--stack-gap-spacious,1.5rem)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,1.5rem)}.Box-header{background-color:var(--bgColor-muted,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px);border-width:var(--borderWidth-thin,max(1px,.0625rem));margin:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) 0;padding:var(--stack-padding-normal,1rem)}.Box-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));padding:var(--stack-padding-normal,1rem)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px);margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.Box-row{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-neutral-muted));list-style-type:none;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis,var(--color-accent-fg))}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent,var(--color-accent-fg));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,var(--color-canvas-inset))}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted,var(--color-canvas-inset))}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted,var(--color-accent-muted))}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted,var(--color-canvas-inset))}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted,var(--color-accent-muted))}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px);border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted,var(--color-accent-muted))}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis))}.Box-header--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-muted));border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box-row--yellow{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle))}.Box-row--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-muted))}.Box-row--gray{background-color:var(--bgColor-muted,var(--color-canvas-inset))}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious,1rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem) var(--control-medium-paddingInline-spacious,1rem)}
+/* BorderBox */
+
+/* TODO: Rename to BorderBox to match PVC */
+
+.Box {
+  background-color: var(--bgColor-default,var(--color-canvas-default));
+  border-color: var(--borderColor-default,var(--color-border-default));
+  border-style: solid;
+  border-width: var(--borderWidth-thin,max(1px, 0.0625rem));
+  border-radius: var(--borderRadius-medium,6px);
+}
+
+/* Box padding density options */
+
+.Box--condensed {
+  line-height: 1.25;
+}
+
+.Box--condensed .Box-header {
+    padding: var(--stack-padding-condensed,0.5rem) var(--stack-padding-normal,1rem);
+  }
+
+.Box--condensed .Box-body {
+    padding: var(--stack-padding-condensed,0.5rem) var(--stack-padding-normal,1rem);
+  }
+
+.Box--condensed .Box-footer {
+    padding: var(--stack-padding-condensed,0.5rem) var(--stack-padding-normal,1rem);
+  }
+
+.Box--condensed .Box-btn-octicon.btn-octicon {
+      padding: var(--control-medium-paddingInline-condensed,0.5rem) var(--control-medium-paddingInline-spacious,1rem);
+      margin: calc(var(--controlStack-medium-gap-condensed,0.5rem) * -1) calc(var(--controlStack-small-gap-spacious,1rem) * -1);
+      line-height: 1.25;
+    }
+
+.Box--condensed .Box-row {
+    padding: var(--stack-padding-condensed,0.5rem) var(--stack-padding-normal,1rem);
+  }
+
+.Box--spacious .Box-header {
+    padding: var(--stack-padding-spacious,1.5rem);
+    line-height: 1.25;
+  }
+
+.Box--spacious .Box-title {
+    font-size: var(--text-title-size-medium,1.25rem);
+  }
+
+.Box--spacious .Box-body {
+    padding: var(--stack-padding-spacious,1.5rem);
+  }
+
+.Box--spacious .Box-footer {
+    padding: var(--stack-padding-spacious,1.5rem);
+  }
+
+.Box--spacious .Box-btn-octicon.btn-octicon {
+      padding: var(--stack-padding-spacious,1.5rem);
+      margin: calc(var(--stack-gap-spacious,1.5rem) * -1) calc(var(--stack-gap-spacious,1.5rem) * -1);
+    }
+
+.Box--spacious .Box-row {
+    padding: var(--stack-padding-spacious,1.5rem);
+  }
+
+.Box-header {
+  padding: var(--stack-padding-normal,1rem);
+  margin: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1) calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1) 0;
+  background-color: var(--bgColor-muted,var(--color-canvas-inset));
+  border-color: var(--borderColor-default,var(--color-border-default));
+  border-style: solid;
+  border-width: var(--borderWidth-thin,max(1px, 0.0625rem));
+  border-top-left-radius: var(--borderRadius-medium,6px);
+  border-top-right-radius: var(--borderRadius-medium,6px);
+}
+
+.Box-title {
+  font-size: var(--text-body-size-medium,0.875rem);
+  font-weight: var(--base-text-weight-semibold,600);
+}
+
+.Box-body {
+  padding: var(--stack-padding-normal,1rem);
+  border-bottom: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-default,var(--color-border-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,max(1px, 0.0625rem)) * -1);
+    border-bottom-right-radius: var(--borderRadius-medium,6px);
+    border-bottom-left-radius: var(--borderRadius-medium,6px);
+  }
+
+/* Box rows */
+
+.Box-row {
+  padding: var(--stack-padding-normal,1rem);
+  margin-top: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1);
+  list-style-type: none; /* To account for applying Box component to a list */
+  border-top-color: var(--borderColor-muted,var(--color-neutral-muted));
+  border-top-style: solid;
+  border-top-width: var(--borderWidth-thin,max(1px, 0.0625rem));
+}
+
+.Box-row:first-of-type {
+    border-top-left-radius: var(--borderRadius-medium,6px);
+    border-top-right-radius: var(--borderRadius-medium,6px);
+  }
+
+.Box-row:last-of-type {
+    border-bottom-right-radius: var(--borderRadius-medium,6px);
+    border-bottom-left-radius: var(--borderRadius-medium,6px);
+  }
+
+/* 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 {
+    box-shadow: inset 2px 0 0 var(--borderColor-accent-emphasis,var(--color-accent-fg));
+  }
+
+/* Focus styles for when drag icon */
+
+.Box-row.navigation-focus .Box-row--drag-button {
+      color: var(--fgColor-accent,var(--color-accent-fg));
+      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,var(--color-canvas-inset));
+    }
+
+/* Makes dragging row background gray */
+
+.Box-row.navigation-focus.sortable-ghost {
+      background-color: var(--bgColor-muted,var(--color-canvas-inset));
+
+      /* 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,var(--color-canvas-inset));
+  }
+
+.Box-row--focus-blue.navigation-focus {
+    background-color: var(--bgColor-accent-muted,var(--color-accent-muted));
+  }
+
+.Box-row--hover-gray:hover {
+    background-color: var(--bgColor-muted,var(--color-canvas-inset));
+  }
+
+.Box-row--hover-blue:hover {
+    background-color: var(--bgColor-accent-muted,var(--color-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,var(--color-fg-default));
+    text-decoration: none;
+}
+
+    .Box-row-link:hover {
+      color: var(--fgColor-accent,var(--color-accent-fg));
+      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,1rem);
+  margin-top: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1); /* prevents double border when used with .Box-body */
+  border-top-color: var(--borderColor-default,var(--color-border-default));
+  border-top-style: solid;
+  border-top-width: var(--borderWidth-thin,max(1px, 0.0625rem));
+  border-radius: 0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px);
+}
+
+/* Option for a box with scrolling content */
+
+.Box--scrollable {
+  max-height: 324px;
+  overflow: scroll;
+}
+
+/* Box themes */
+
+.Box--blue {
+  border-color: var(--borderColor-accent-muted,var(--color-accent-muted));
+}
+
+.Box--blue .Box-header {
+    background-color: var(--bgColor-accent-muted,var(--color-accent-muted));
+    border-color: var(--borderColor-accent-muted,var(--color-accent-muted));
+  }
+
+.Box--blue .Box-body {
+    border-color: var(--borderColor-accent-muted,var(--color-accent-muted));
+  }
+
+.Box--blue .Box-row {
+    border-color: var(--borderColor-accent-muted,var(--color-accent-muted));
+  }
+
+.Box--blue .Box-footer {
+    border-color: var(--borderColor-accent-muted,var(--color-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,var(--color-danger-emphasis));
+}
+
+.Box--danger .Box-row:first-of-type {
+      border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis));
+    }
+
+.Box--danger .Box-body:last-of-type {
+      border-color: var(--borderColor-danger-emphasis,var(--color-danger-emphasis));
+    }
+
+.Box-header--blue {
+  background-color: var(--bgColor-accent-muted,var(--color-accent-muted));
+  border-color: var(--borderColor-accent-muted,var(--color-accent-muted));
+}
+
+/* Box row highlight themes */
+
+.Box-row--yellow {
+  background-color: var(--bgColor-attention-muted,var(--color-attention-subtle));
+}
+
+.Box-row--blue {
+  background-color: var(--bgColor-accent-muted,var(--color-accent-muted));
+}
+
+.Box-row--gray {
+  background-color: var(--bgColor-muted,var(--color-canvas-inset));
+}
+
+/* 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,1rem) var(--control-medium-paddingInline-spacious,1rem);
+    margin: calc(var(--controlStack-small-gap-spacious,1rem) * -1) calc(var(--controlStack-small-gap-spacious,1rem) * -1);
+    line-height: 1.5; /* override btn-octicon line-height */
+  }

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

@@ -3,16 +3,16 @@
   "selectors": [
     ".Box",
     ".Box--condensed",
+    ".Box--condensed .Box-header",
     ".Box--condensed .Box-body",
     ".Box--condensed .Box-footer",
-    ".Box--condensed .Box-header",
     ".Box--condensed .Box-btn-octicon.btn-octicon",
     ".Box--condensed .Box-row",
     ".Box--spacious .Box-header",
     ".Box--spacious .Box-title",
     ".Box--spacious .Box-body",
-    ".Box--spacious .Box-btn-octicon.btn-octicon",
     ".Box--spacious .Box-footer",
+    ".Box--spacious .Box-btn-octicon.btn-octicon",
     ".Box--spacious .Box-row",
     ".Box-header",
     ".Box-title",
@@ -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",
-    ".Box--danger .Box-body:last-of-type",
     ".Box--danger .Box-row:first-of-type",
+    ".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,27 @@
-.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--fgColor-muted,var(--color-fg-muted));content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default,var(--color-fg-default))}
+.breadcrumb-item {
+  display: inline-block;
+  margin-left: -0.35em;
+  white-space: nowrap;
+  list-style: none;
+}
+
+.breadcrumb-item::after {
+    display: inline-block;
+    height: 0.8em;
+    margin: 0 0.5em;
+    content: '';
+    border-right: 0.1em solid var(--fgColor-muted,var(--color-fg-muted));
+    transform: rotate(15deg);
+  }
+
+.breadcrumb-item:first-child {
+    margin-left: 0;
+  }
+
+.breadcrumb-item-selected::after, .breadcrumb-item[aria-current]:not([aria-current='false'])::after {
+    content: none;
+  }
+
+.breadcrumb-item-selected a {
+  color: var(--fgColor-default,var(--color-fg-default));
+}