primer_view_components 0.0.110 → 0.0.112

data/app/components/primer/beta/avatar_stack.pcss

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

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

@@ -0,0 +1 @@
+.Box{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--primer-borderRadius-medium,6px);border-style:solid;border-width:var(--primer-borderWidth-thin,1px)}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--primer-stack-padding-condensed,8px) var(--primer-stack-padding-normal,16px)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--primer-controlStack-medium-gap-condensed, 8px)*-1) calc(var(--primer-controlStack-small-gap-spacious, 16px)*-1);padding:var(--primer-control-medium-paddingInline-condensed,8px) var(--primer-control-medium-paddingInline-spacious,16px)}.Box--condensed .Box-row{padding:var(--primer-stack-padding-condensed,8px) var(--primer-stack-padding-normal,16px)}.Box--spacious .Box-header{line-height:1.25;padding:var(--primer-stack-padding-spacious,24px)}.Box--spacious .Box-title{font-size:var(--primer-text-title-size-medium,20px)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--primer-stack-padding-spacious,24px)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--primer-stack-gap-spacious, 24px)*-1) calc(var(--primer-stack-gap-spacious, 24px)*-1)}.Box--spacious .Box-row{padding:var(--primer-stack-padding-spacious,24px)}.Box-header{background-color:var(--color-canvas-subtle);border-color:var(--color-border-default);border-style:solid;border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px);border-width:var(--primer-borderWidth-thin,1px);margin:calc(var(--primer-borderWidth-thin, 1px)*-1) calc(var(--primer-borderWidth-thin, 1px)*-1) 0;padding:var(--primer-stack-padding-normal,16px)}.Box-title{font-size:var(--primer-text-body-size-medium,14px);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);padding:var(--primer-stack-padding-normal,16px)}.Box-body:last-of-type{border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px);margin-bottom:calc(var(--primer-borderWidth-thin, 1px)*-1)}.Box-row{border-top:var(--primer-borderWidth-thin,1px) solid var(--color-border-muted);list-style-type:none;margin-top:calc(var(--primer-borderWidth-thin, 1px)*-1);padding:var(--primer-stack-padding-normal,16px)}.Box-row:first-of-type{border-top-left-radius:var(--primer-borderRadius-medium,6px);border-top-right-radius:var(--primer-borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--primer-borderRadius-medium,6px);border-bottom-right-radius:var(--primer-borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--color-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color: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(--color-canvas-subtle)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--color-canvas-subtle)}.Box-row--focus-blue.navigation-focus{background-color:var(--color-accent-subtle)}.Box-row--hover-gray:hover{background-color:var(--color-canvas-subtle)}.Box-row--hover-blue:hover{background-color:var(--color-accent-subtle)}@media (min-width:768px){.Box-row-link{color:var(--color-fg-default);text-decoration:none}.Box-row-link:hover{color:var(--color-accent-fg);text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--primer-borderRadius-medium,6px) var(--primer-borderRadius-medium,6px);border-top:var(--primer-borderWidth-thin,1px) solid var(--color-border-default);margin-top:calc(var(--primer-borderWidth-thin, 1px)*-1);padding:var(--primer-stack-padding-normal,16px)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--color-accent-muted)}.Box--blue .Box-header{background-color:var(--color-accent-subtle)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--color-accent-muted)}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--color-danger-emphasis)}.Box-header--blue{background-color:var(--color-accent-subtle);border-color:var(--color-accent-muted)}.Box-row--yellow{background-color:var(--color-attention-subtle)}.Box-row--blue{background-color:var(--color-accent-subtle)}.Box-row--gray{background-color:var(--color-canvas-subtle)}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--primer-controlStack-small-gap-spacious, 16px)*-1) calc(var(--primer-controlStack-small-gap-spacious, 16px)*-1);padding:var(--primer-control-medium-paddingInline-spacious,16px) var(--primer-control-medium-paddingInline-spacious,16px)}

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

@@ -0,0 +1 @@
+{"name":"beta/border_box","selectors":[".Box",".Box--condensed",".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-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-footer",".Box--blue .Box-row",".Box--danger",".Box--danger .Box-body:last-of-type",".Box--danger .Box-row:first-of-type",".Box-header--blue",".Box-row--yellow",".Box-row--blue",".Box-row--gray",".Box-btn-octicon.btn-octicon"]}

data/app/components/primer/beta/border_box.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["border_box.pcss"],"names":[],"mappings":"AAGA,KACE,4CAA6C,CAC7C,wCAAyC,CAGzC,mDAAqD,CAFrD,kBAAmB,CACnB,+CAEF,CAGA,gBACE,gBAyBF,CAfE,kFACE,yFACF,CAGE,6CAGE,gBAAiB,CADjB,iIAAsI,CADtI,yHAGF,CAGF,yBACE,yFACF,CAIA,2BAEE,gBAAiB,CADjB,iDAEF,CAEA,0BACE,mDACF,CAWE,gGAJA,iDAOA,CAHA,4CAEE,sGACF,CAGF,wBACE,iDACF,CAGF,YAGE,2CAA4C,CAC5C,wCAAyC,CACzC,kBAAmB,CAEnB,4DAA8D,CAC9D,6DAA+D,CAF/D,+CAAiD,CAJjD,kGAAuG,CADvG,+CAQF,CAEA,WACE,kDAAoD,CACpD,gDACF,CAEA,UAEE,kFAAoF,CADpF,+CASF,CALE,uBAGE,+DAAiE,CADjE,gEAAkE,CADlE,0DAGF,CAIF,SAME,6EAAqD,CAHrD,oBAAqB,CADrB,uDAA0D,CAD1D,+CAqDF,CA9CE,uBACE,4DAA8D,CAC9D,6DACF,CAEA,sBAEE,+DAAiE,CADjE,gEAEF,CAIA,yCAGE,qDACF,CAIE,gDACE,4BAA6B,CAC7B,WAAY,CACZ,SACF,CAGA,4DACE,eACF,CAQA,mFACE,2CAMF,CAHE,6DACE,SACF,CAMJ,sCACE,2CACF,CAIA,sCACE,2CACF,CAIA,2BACE,2CACF,CAIA,2BACE,2CACF,CAOA,yBADF,cAEI,6BAA8B,CAC9B,oBAOJ,CALI,oBACE,4BAA6B,CAC7B,oBACF,CACF,CAKF,sBACE,SACF,CAEA,YAME,6FAAgG,CADhG,+EAAqD,CAHrD,uDAA0D,CAD1D,+CAMF,CAGA,iBACE,gBAAiB,CACjB,eACF,CAOE,kCAFA,sCAKA,CAHA,uBACE,2CAEF,CAUA,gEACE,sCACF,CAeE,qFACE,yCACF,CAIJ,kBACE,2CAA4C,CAC5C,sCACF,CAIA,iBACE,8CACF,CAEA,eACE,2CACF,CAEA,eACE,2CACF,CAKE,6BAGE,eAAgB,CADhB,gIAAqI,CADrI,yHAGF","file":"border_box.css","sourcesContent":["/* BorderBox */\n\n/* TODO: Rename to BorderBox to match PVC */\n.Box {\n  background-color: var(--color-canvas-default);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--primer-borderWidth-thin, 1px);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n/* Box padding density options */\n.Box--condensed {\n  line-height: 1.25;\n\n  & .Box-header {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n\n  & .Box-body {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n\n  & .Box-footer {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);\n      margin: calc(var(--primer-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);\n      line-height: 1.25;\n    }\n  }\n\n  & .Box-row {\n    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);\n  }\n}\n\n.Box--spacious {\n  & .Box-header {\n    padding: var(--primer-stack-padding-spacious, 24px);\n    line-height: 1.25;\n  }\n\n  & .Box-title {\n    font-size: var(--primer-text-title-size-medium, 20px);\n  }\n\n  & .Box-body {\n    padding: var(--primer-stack-padding-spacious, 24px);\n  }\n\n  & .Box-footer {\n    padding: var(--primer-stack-padding-spacious, 24px);\n  }\n\n  & .Box-btn-octicon {\n    &.btn-octicon {\n      padding: var(--primer-stack-padding-spacious, 24px);\n      margin: calc(var(--primer-stack-gap-spacious, 24px) * -1) calc(var(--primer-stack-gap-spacious, 24px) * -1);\n    }\n  }\n\n  & .Box-row {\n    padding: var(--primer-stack-padding-spacious, 24px);\n  }\n}\n\n.Box-header {\n  padding: var(--primer-stack-padding-normal, 16px);\n  margin: calc(var(--primer-borderWidth-thin, 1px) * -1) calc(var(--primer-borderWidth-thin, 1px) * -1) 0;\n  background-color: var(--color-canvas-subtle);\n  border-color: var(--color-border-default);\n  border-style: solid;\n  border-width: var(--primer-borderWidth-thin, 1px);\n  border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n  border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n}\n\n.Box-title {\n  font-size: var(--primer-text-body-size-medium, 14px);\n  font-weight: var(--base-text-weight-semibold, 600);\n}\n\n.Box-body {\n  padding: var(--primer-stack-padding-normal, 16px);\n  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);\n\n  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */\n  &:last-of-type {\n    margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n}\n\n/* Box rows */\n.Box-row {\n  padding: var(--primer-stack-padding-normal, 16px);\n  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);\n  list-style-type: none; /* To account for applying Box component to a list */\n  border-top-color: var(--color-border-muted);\n  border-top-style: solid;\n  border-top-width: var(--primer-borderWidth-thin, 1px);\n\n  &:first-of-type {\n    border-top-left-radius: var(--primer-borderRadius-medium, 6px);\n    border-top-right-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  &:last-of-type {\n    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);\n    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);\n  }\n\n  /* Adds a blue vertical line to the left of the row\n  ** For indicating a row item is unread */\n  &.Box-row--unread,\n  /* .unread to be deprecated with .Box-row-unread */\n  &.unread {\n    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);\n  }\n\n  &.navigation-focus {\n    /* Focus styles for when drag icon */\n    & .Box-row--drag-button {\n      color: var(--color-accent-fg);\n      cursor: grab;\n      opacity: 100;\n    }\n\n    /* Grabbing while row is dragged */\n    &.is-dragging .Box-row--drag-button {\n      cursor: grabbing;\n    }\n\n    /* Row dragging styles */\n    &.sortable-chosen {\n      background-color: var(--color-canvas-subtle);\n    }\n\n    /* Makes dragging row background gray */\n    &.sortable-ghost {\n      background-color: var(--color-canvas-subtle);\n\n      /* Hides contents of row while dragging so row looks solid gray */\n      & .Box-row--drag-hide {\n        opacity: 0;\n      }\n    }\n  }\n}\n\n.Box-row--focus-gray {\n  &.navigation-focus {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--focus-blue {\n  &.navigation-focus {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n.Box-row--hover-gray {\n  &:hover {\n    background-color: var(--color-canvas-subtle);\n  }\n}\n\n.Box-row--hover-blue {\n  &:hover {\n    background-color: var(--color-accent-subtle);\n  }\n}\n\n/* Optional link style\n** Makes links on mobile blue since they don't have hover state,\n** and links are dark-gray with blue hover on desktop. */\n.Box-row-link {\n  @media (min-width: 768px) {\n    color: var(--color-fg-default);\n    text-decoration: none;\n\n    &:hover {\n      color: var(--color-accent-fg);\n      text-decoration: none;\n    }\n  }\n}\n\n/* Optional drag icon styles for reordering items\n** Focus styles included in .Box-row above */\n.Box-row--drag-button {\n  opacity: 0;\n}\n\n.Box-footer {\n  padding: var(--primer-stack-padding-normal, 16px);\n  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */\n  border-top-color: var(--color-border-default);\n  border-top-style: solid;\n  border-top-width: var(--primer-borderWidth-thin, 1px);\n  border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);\n}\n\n/* Option for a box with scrolling content */\n.Box--scrollable {\n  max-height: 324px;\n  overflow: scroll;\n}\n\n/* Box themes */\n\n.Box--blue {\n  border-color: var(--color-accent-muted);\n\n  & .Box-header {\n    background-color: var(--color-accent-subtle);\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-body {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-row {\n    border-color: var(--color-accent-muted);\n  }\n\n  & .Box-footer {\n    border-color: var(--color-accent-muted);\n  }\n}\n\n/* Applies and red border to the outside of the box,\n** but not to the border separating rows. */\n.Box--danger {\n  border-color: var(--color-danger-emphasis);\n\n  & .Box-row {\n    &:first-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n\n  & .Box-body {\n    &:last-of-type {\n      border-color: var(--color-danger-emphasis);\n    }\n  }\n}\n\n.Box-header--blue {\n  background-color: var(--color-accent-subtle);\n  border-color: var(--color-accent-muted);\n}\n\n/* Box row highlight themes */\n\n.Box-row--yellow {\n  background-color: var(--color-attention-subtle);\n}\n\n.Box-row--blue {\n  background-color: var(--color-accent-subtle);\n}\n\n.Box-row--gray {\n  background-color: var(--color-canvas-subtle);\n}\n\n/* Box with btn-octicon */\n.Box-btn-octicon {\n  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */\n  &.btn-octicon {\n    padding: var(--primer-control-medium-paddingInline-spacious, 16px) var(--primer-control-medium-paddingInline-spacious, 16px);\n    margin: calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);\n    line-height: 1.5; /* override btn-octicon line-height */\n  }\n}\n"]}

data/app/components/primer/beta/border_box.pcss

@@ -0,0 +1,284 @@
+/* BorderBox */
+
+/* TODO: Rename to BorderBox to match PVC */
+.Box {
+  background-color: var(--color-canvas-default);
+  border-color: var(--color-border-default);
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thin, 1px);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+/* Box padding density options */
+.Box--condensed {
+  line-height: 1.25;
+
+  & .Box-header {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-body {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-footer {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+
+  & .Box-btn-octicon {
+    &.btn-octicon {
+      padding: var(--primer-control-medium-paddingInline-condensed, 8px) var(--primer-control-medium-paddingInline-spacious, 16px);
+      margin: calc(var(--primer-controlStack-medium-gap-condensed, 8px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
+      line-height: 1.25;
+    }
+  }
+
+  & .Box-row {
+    padding: var(--primer-stack-padding-condensed, 8px) var(--primer-stack-padding-normal, 16px);
+  }
+}
+
+.Box--spacious {
+  & .Box-header {
+    padding: var(--primer-stack-padding-spacious, 24px);
+    line-height: 1.25;
+  }
+
+  & .Box-title {
+    font-size: var(--primer-text-title-size-medium, 20px);
+  }
+
+  & .Box-body {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+
+  & .Box-footer {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+
+  & .Box-btn-octicon {
+    &.btn-octicon {
+      padding: var(--primer-stack-padding-spacious, 24px);
+      margin: calc(var(--primer-stack-gap-spacious, 24px) * -1) calc(var(--primer-stack-gap-spacious, 24px) * -1);
+    }
+  }
+
+  & .Box-row {
+    padding: var(--primer-stack-padding-spacious, 24px);
+  }
+}
+
+.Box-header {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin: calc(var(--primer-borderWidth-thin, 1px) * -1) calc(var(--primer-borderWidth-thin, 1px) * -1) 0;
+  background-color: var(--color-canvas-subtle);
+  border-color: var(--color-border-default);
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thin, 1px);
+  border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+  border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+}
+
+.Box-title {
+  font-size: var(--primer-text-body-size-medium, 14px);
+  font-weight: var(--base-text-weight-semibold, 600);
+}
+
+.Box-body {
+  padding: var(--primer-stack-padding-normal, 16px);
+  border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-default);
+
+  /* Ensures bottom-border doesn't poke out when .Box-body used without box-footer */
+  &:last-of-type {
+    margin-bottom: calc(var(--primer-borderWidth-thin, 1px) * -1);
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+}
+
+/* Box rows */
+.Box-row {
+  padding: var(--primer-stack-padding-normal, 16px);
+  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);
+  list-style-type: none; /* To account for applying Box component to a list */
+  border-top-color: var(--color-border-muted);
+  border-top-style: solid;
+  border-top-width: var(--primer-borderWidth-thin, 1px);
+
+  &:first-of-type {
+    border-top-left-radius: var(--primer-borderRadius-medium, 6px);
+    border-top-right-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  &:last-of-type {
+    border-bottom-right-radius: var(--primer-borderRadius-medium, 6px);
+    border-bottom-left-radius: var(--primer-borderRadius-medium, 6px);
+  }
+
+  /* Adds a blue vertical line to the left of the row
+  ** For indicating a row item is unread */
+  &.Box-row--unread,
+  /* .unread to be deprecated with .Box-row-unread */
+  &.unread {
+    box-shadow: inset 2px 0 0 var(--color-accent-emphasis);
+  }
+
+  &.navigation-focus {
+    /* Focus styles for when drag icon */
+    & .Box-row--drag-button {
+      color: var(--color-accent-fg);
+      cursor: grab;
+      opacity: 100;
+    }
+
+    /* Grabbing while row is dragged */
+    &.is-dragging .Box-row--drag-button {
+      cursor: grabbing;
+    }
+
+    /* Row dragging styles */
+    &.sortable-chosen {
+      background-color: var(--color-canvas-subtle);
+    }
+
+    /* Makes dragging row background gray */
+    &.sortable-ghost {
+      background-color: var(--color-canvas-subtle);
+
+      /* Hides contents of row while dragging so row looks solid gray */
+      & .Box-row--drag-hide {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+.Box-row--focus-gray {
+  &.navigation-focus {
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+.Box-row--focus-blue {
+  &.navigation-focus {
+    background-color: var(--color-accent-subtle);
+  }
+}
+
+.Box-row--hover-gray {
+  &:hover {
+    background-color: var(--color-canvas-subtle);
+  }
+}
+
+.Box-row--hover-blue {
+  &:hover {
+    background-color: var(--color-accent-subtle);
+  }
+}
+
+/* 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. */
+.Box-row-link {
+  @media (min-width: 768px) {
+    color: var(--color-fg-default);
+    text-decoration: none;
+
+    &:hover {
+      color: 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(--primer-stack-padding-normal, 16px);
+  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1); /* prevents double border when used with .Box-body */
+  border-top-color: var(--color-border-default);
+  border-top-style: solid;
+  border-top-width: var(--primer-borderWidth-thin, 1px);
+  border-radius: 0 0 var(--primer-borderRadius-medium, 6px) var(--primer-borderRadius-medium, 6px);
+}
+
+/* Option for a box with scrolling content */
+.Box--scrollable {
+  max-height: 324px;
+  overflow: scroll;
+}
+
+/* Box themes */
+
+.Box--blue {
+  border-color: var(--color-accent-muted);
+
+  & .Box-header {
+    background-color: var(--color-accent-subtle);
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-body {
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-row {
+    border-color: var(--color-accent-muted);
+  }
+
+  & .Box-footer {
+    border-color: 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(--color-danger-emphasis);
+
+  & .Box-row {
+    &:first-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+
+  & .Box-body {
+    &:last-of-type {
+      border-color: var(--color-danger-emphasis);
+    }
+  }
+}
+
+.Box-header--blue {
+  background-color: var(--color-accent-subtle);
+  border-color: var(--color-accent-muted);
+}
+
+/* Box row highlight themes */
+
+.Box-row--yellow {
+  background-color: var(--color-attention-subtle);
+}
+
+.Box-row--blue {
+  background-color: var(--color-accent-subtle);
+}
+
+.Box-row--gray {
+  background-color: var(--color-canvas-subtle);
+}
+
+/* Box with btn-octicon */
+.Box-btn-octicon {
+  /* Increase specificity when btn-octicon is used because comes after .Box in the cascade */
+  &.btn-octicon {
+    padding: var(--primer-control-medium-paddingInline-spacious, 16px) var(--primer-control-medium-paddingInline-spacious, 16px);
+    margin: calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1) calc(var(--primer-controlStack-small-gap-spacious, 16px) * -1);
+    line-height: 1.5; /* override btn-octicon line-height */
+  }
+}

data/app/components/primer/beta/button.rb

@@ -58,7 +58,7 @@ module Primer
       renders_one :trailing_visual, types: {
         icon: Primer::OcticonComponent,
         label: Primer::Beta::Label,
-        counter: Primer::CounterComponent
+        counter: Primer::Beta::Counter
       }
 
       # Trailing action appears to the right of the trailing visual.

data/app/components/primer/beta/flash.css

@@ -0,0 +1 @@
+.flash:not(.Banner){background-image:linear-gradient(var(--color-accent-subtle),var(--color-accent-subtle));border-color:var(--color-accent-muted);border-radius:var(--primer-borderRadius-medium,6px);border-style:solid;border-width:var(--primer-borderWidth-thin,1px);color:var(--color-fg-default);padding:var(--base-size-20,20px) var(--primer-control-medium-paddingInline-spacious,16px);position:relative}.flash:not(.Banner) .octicon{color:var(--color-accent-fg);margin-right:var(--base-size-12,12px)}.flash:not(.Banner) p:last-child{margin-bottom:0}.flash-messages{margin-bottom:var(--primer-stack-gap-spacious,24px)}.flash-close:not(.Banner-close){-webkit-appearance:none;appearance:none;background:none;border:0;cursor:pointer;float:right;margin:calc(var(--primer-control-medium-paddingInline-spacious, 16px)*-1);padding:var(--primer-control-medium-paddingInline-spacious,16px);text-align:center}.flash-close:not(.Banner-close):hover{opacity:.7}.flash-close:not(.Banner-close):active{opacity:.5}.flash-close:not(.Banner-close) .octicon{margin-right:0}.flash-action:not(.Banner-actions){background-clip:padding-box;float:right;margin-left:var(--primer-stack-gap-spacious,24px);margin-top:-3px}.flash-action.btn:not(.Banner-actions) .octicon{color:var(--color-fg-muted);margin-right:var(--primer-control-small-gap,4px)}.flash-action.btn-primary:not(.Banner-actions){background-clip:initial}.flash-action.btn-primary:not(.Banner-actions) .octicon{color:inherit}.flash-warn:not(.Banner){background-image:linear-gradient(var(--color-attention-subtle),var(--color-attention-subtle));border-color:var(--color-attention-muted);color:var(--color-fg-default)}.flash-warn:not(.Banner) .octicon{color:var(--color-attention-fg)}.flash-error:not(.Banner){background-image:linear-gradient(var(--color-danger-subtle),var(--color-danger-subtle));border-color:var(--color-danger-muted);color:var(--color-fg-default)}.flash-error:not(.Banner) .octicon{color:var(--color-danger-fg)}.flash-success:not(.Banner){background-image:linear-gradient(var(--color-success-subtle),var(--color-success-subtle));border-color:var(--color-success-muted);color:var(--color-fg-default)}.flash-success:not(.Banner) .octicon{color:var(--color-success-fg)}.flash-full:not(.Banner){border-radius:0;border-width:var(--primer-borderWidth-thin,1px) 0;margin-top:calc(var(--primer-borderWidth-thin, 1px)*-1)}.flash-banner{border-left:0;border-radius:0;border-right:0;border-top:0;position:fixed;top:0;width:100%;z-index:90}.flash-banner,.flash-full{background-color:var(--color-canvas-default)}.warning{background-color:var(--color-attention-subtle);font-weight:var(--base-text-weight-semibold,600);margin-bottom:.8em;padding:.5em}

data/app/components/primer/beta/flash.css.json

@@ -0,0 +1 @@
+{"name":"beta/flash","selectors":[".flash:not(.Banner)",".flash:not(.Banner) .octicon",".flash:not(.Banner) p:last-child",".flash-messages",".flash-close:not(.Banner-close)",".flash-close:not(.Banner-close):hover",".flash-close:not(.Banner-close):active",".flash-close:not(.Banner-close) .octicon",".flash-action:not(.Banner-actions)",".flash-action.btn:not(.Banner-actions) .octicon",".flash-action.btn-primary:not(.Banner-actions)",".flash-action.btn-primary:not(.Banner-actions) .octicon",".flash-warn:not(.Banner)",".flash-warn:not(.Banner) .octicon",".flash-error:not(.Banner)",".flash-error:not(.Banner) .octicon",".flash-success:not(.Banner)",".flash-success:not(.Banner) .octicon",".flash-full:not(.Banner)",".flash-banner",".flash-full",".warning"]}

data/app/components/primer/beta/flash.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["flash.pcss"],"names":[],"mappings":"AAGA,oBASE,uFAAyF,CACzF,sCAAuC,CALvC,mDAAqD,CAFrD,kBAAmB,CACnB,+CAAiD,CAIjD,6BAA8B,CAN9B,yFAA4F,CAD5F,iBAmBF,CARE,6BACE,4BAA6B,CAC7B,qCACF,CAEA,iCACE,eACF,CAIF,gBACE,mDACF,CAGA,gCAUE,uBAAgB,CAAhB,eAAgB,CAFhB,eAAgB,CAChB,QAAS,CAJT,cAAe,CAJf,WAAY,CAEZ,yEAA4E,CAD5E,gEAAkE,CAElE,iBAmBF,CAXE,sCACE,UACF,CAEA,uCACE,UACF,CAEA,yCACE,cACF,CAIF,mCAIE,2BAA4B,CAH5B,WAAY,CAEZ,iDAAmD,CADnD,eAgBF,CAZE,gDAEE,2BAA4B,CAD5B,gDAEF,CAEA,+CACE,uBAKF,CAHE,wDACE,aACF,CAOJ,yBAEE,6FAA+F,CAC/F,yCAA0C,CAF1C,6BAOF,CAHE,kCACE,+BACF,CAGF,0BAEE,uFAAyF,CACzF,sCAAuC,CAFvC,6BAOF,CAHE,mCACE,4BACF,CAGF,4BAEE,yFAA2F,CAC3F,uCAAwC,CAFxC,6BAOF,CAHE,qCACE,6BACF,CAKF,yBAGE,eAAgB,CADhB,iDAAmD,CADnD,uDAGF,CAGA,cAOE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,YAAa,CAJb,cAAe,CACf,KAAM,CAEN,UAAW,CADX,UAMF,CAGA,0BAEE,4CACF,CAGA,SAIE,8CAA+C,CAD/C,gDAAkD,CADlD,kBAAoB,CADpB,YAIF","file":"flash.css","sourcesContent":["/* flash */\n\n/* Default flash */\n.flash:not(.Banner) {\n  position: relative;\n  padding: var(--base-size-20, 20px) var(--primer-control-medium-paddingInline-spacious, 16px);\n  border-style: solid;\n  border-width: var(--primer-borderWidth-thin, 1px);\n  border-radius: var(--primer-borderRadius-medium, 6px);\n\n  /* Default color */\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));\n  border-color: var(--color-accent-muted);\n\n  & .octicon {\n    color: var(--color-accent-fg);\n    margin-right: var(--base-size-12, 12px);\n  }\n\n  & p:last-child {\n    margin-bottom: 0;\n  }\n}\n\n/* Contain the flash messages */\n.flash-messages {\n  margin-bottom: var(--primer-stack-gap-spacious, 24px);\n}\n\n/* Close button */\n.flash-close:not(.Banner-close) {\n  float: right;\n  padding: var(--primer-control-medium-paddingInline-spacious, 16px);\n  margin: calc(var(--primer-control-medium-paddingInline-spacious, 16px) * -1);\n  text-align: center;\n  cursor: pointer;\n\n  /* Undo `<button>` styles */\n  background: none;\n  border: 0;\n  appearance: none;\n\n  &:hover {\n    opacity: 0.7;\n  }\n\n  &:active {\n    opacity: 0.5;\n  }\n\n  & .octicon {\n    margin-right: 0;\n  }\n}\n\n/* Action button */\n.flash-action:not(.Banner-actions) {\n  float: right;\n  margin-top: -3px;\n  margin-left: var(--primer-stack-gap-spacious, 24px);\n  background-clip: padding-box;\n\n  &.btn .octicon {\n    margin-right: var(--primer-control-small-gap, 4px);\n    color: var(--color-fg-muted);\n  }\n\n  &.btn-primary {\n    background-clip: border-box;\n\n    & .octicon {\n      color: inherit;\n    }\n  }\n}\n\n\n/* Color variations */\n\n.flash-warn:not(.Banner) {\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));\n  border-color: var(--color-attention-muted);\n\n  & .octicon {\n    color: var(--color-attention-fg);\n  }\n}\n\n.flash-error:not(.Banner) {\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));\n  border-color: var(--color-danger-muted);\n\n  & .octicon {\n    color: var(--color-danger-fg);\n  }\n}\n\n.flash-success:not(.Banner) {\n  color: var(--color-fg-default);\n  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));\n  border-color: var(--color-success-muted);\n\n  & .octicon {\n    color: var(--color-success-fg);\n  }\n}\n\n/* Layout variations */\n\n.flash-full:not(.Banner) {\n  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);\n  border-width: var(--primer-borderWidth-thin, 1px) 0;\n  border-radius: 0;\n}\n\n/* A banner rendered at the top of the page. */\n.flash-banner {\n  position: fixed;\n  top: 0;\n  z-index: 90;\n  width: 100%;\n  border-top: 0;\n  border-right: 0;\n  border-left: 0;\n  border-radius: 0;\n}\n\n/* Makes sure the background is opaque to cover any content underneath */\n.flash-full,\n.flash-banner {\n  background-color: var(--color-canvas-default);\n}\n\n/* FIXME deprecate this */\n.warning {\n  padding: 0.5em;\n  margin-bottom: 0.8em;\n  font-weight: var(--base-text-weight-semibold, 600);\n  background-color: var(--color-attention-subtle);\n}\n"]}

data/app/components/primer/beta/flash.pcss

@@ -0,0 +1,143 @@
+/* flash */
+
+/* Default flash */
+.flash:not(.Banner) {
+  position: relative;
+  padding: var(--base-size-20, 20px) var(--primer-control-medium-paddingInline-spacious, 16px);
+  border-style: solid;
+  border-width: var(--primer-borderWidth-thin, 1px);
+  border-radius: var(--primer-borderRadius-medium, 6px);
+
+  /* Default color */
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-accent-subtle), var(--color-accent-subtle));
+  border-color: var(--color-accent-muted);
+
+  & .octicon {
+    color: var(--color-accent-fg);
+    margin-right: var(--base-size-12, 12px);
+  }
+
+  & p:last-child {
+    margin-bottom: 0;
+  }
+}
+
+/* Contain the flash messages */
+.flash-messages {
+  margin-bottom: var(--primer-stack-gap-spacious, 24px);
+}
+
+/* Close button */
+.flash-close:not(.Banner-close) {
+  float: right;
+  padding: var(--primer-control-medium-paddingInline-spacious, 16px);
+  margin: calc(var(--primer-control-medium-paddingInline-spacious, 16px) * -1);
+  text-align: center;
+  cursor: pointer;
+
+  /* Undo `<button>` styles */
+  background: none;
+  border: 0;
+  appearance: none;
+
+  &:hover {
+    opacity: 0.7;
+  }
+
+  &:active {
+    opacity: 0.5;
+  }
+
+  & .octicon {
+    margin-right: 0;
+  }
+}
+
+/* Action button */
+.flash-action:not(.Banner-actions) {
+  float: right;
+  margin-top: -3px;
+  margin-left: var(--primer-stack-gap-spacious, 24px);
+  background-clip: padding-box;
+
+  &.btn .octicon {
+    margin-right: var(--primer-control-small-gap, 4px);
+    color: var(--color-fg-muted);
+  }
+
+  &.btn-primary {
+    background-clip: border-box;
+
+    & .octicon {
+      color: inherit;
+    }
+  }
+}
+
+
+/* Color variations */
+
+.flash-warn:not(.Banner) {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
+  border-color: var(--color-attention-muted);
+
+  & .octicon {
+    color: var(--color-attention-fg);
+  }
+}
+
+.flash-error:not(.Banner) {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
+  border-color: var(--color-danger-muted);
+
+  & .octicon {
+    color: var(--color-danger-fg);
+  }
+}
+
+.flash-success:not(.Banner) {
+  color: var(--color-fg-default);
+  background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
+  border-color: var(--color-success-muted);
+
+  & .octicon {
+    color: var(--color-success-fg);
+  }
+}
+
+/* Layout variations */
+
+.flash-full:not(.Banner) {
+  margin-top: calc(var(--primer-borderWidth-thin, 1px) * -1);
+  border-width: var(--primer-borderWidth-thin, 1px) 0;
+  border-radius: 0;
+}
+
+/* A banner rendered at the top of the page. */
+.flash-banner {
+  position: fixed;
+  top: 0;
+  z-index: 90;
+  width: 100%;
+  border-top: 0;
+  border-right: 0;
+  border-left: 0;
+  border-radius: 0;
+}
+
+/* Makes sure the background is opaque to cover any content underneath */
+.flash-full,
+.flash-banner {
+  background-color: var(--color-canvas-default);
+}
+
+/* FIXME deprecate this */
+.warning {
+  padding: 0.5em;
+  margin-bottom: 0.8em;
+  font-weight: var(--base-text-weight-semibold, 600);
+  background-color: var(--color-attention-subtle);
+}

data/app/components/primer/beta/link.css

@@ -0,0 +1 @@
+.Link{color:var(--color-accent-fg)}.Link:hover{cursor:pointer;text-decoration:underline}.Link:focus,.Link:focus-visible{outline-offset:0}.Link--primary{color:var(--color-fg-default)!important}.Link--primary:hover{color:var(--color-accent-fg)!important}.Link--secondary{color:var(--color-fg-muted)!important}.Link--secondary:hover{color:var(--color-accent-fg)!important}.Link--muted{color:var(--color-fg-muted)!important}.Link--muted:hover{text-decoration:none}.Link--muted:hover,.Link--onHover:hover{color:var(--color-accent-fg)!important}.Link--onHover:hover{cursor:pointer;text-decoration:underline}.Link--muted:hover [class*=color-fg],.Link--primary:hover [class*=color-fg],.Link--secondary:hover [class*=color-fg]{color:inherit!important}

data/app/components/primer/beta/link.css.json

@@ -0,0 +1 @@
+{"name":"beta/link","selectors":[".Link",".Link:hover",".Link:focus",".Link:focus-visible",".Link--primary",".Link--primary:hover",".Link--secondary",".Link--secondary:hover",".Link--muted",".Link--muted:hover",".Link--onHover:hover",".Link--muted:hover [class*=color-fg]",".Link--primary:hover [class*=color-fg]",".Link--secondary:hover [class*=color-fg]"]}

data/app/components/primer/beta/link.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["link.pcss"],"names":[],"mappings":"AAEA,MACE,4BAWF,CATE,YAEE,cAAe,CADf,yBAEF,CAEA,gCAEE,gBACF,CAGF,eACE,uCAKF,CAHE,qBACE,sCACF,CAGF,iBACE,qCAKF,CAHE,uBACE,sCACF,CAGF,aACE,qCAMF,CAJE,mBAEE,oBACF,CAMA,wCARE,sCAYF,CAJA,qBAGE,cAAe,CADf,yBAEF,CAQA,qHACE,uBACF","file":"link.css","sourcesContent":["/* Links */\n\n.Link {\n  color: var(--color-accent-fg);\n\n  &:hover {\n    text-decoration: underline;\n    cursor: pointer;\n  }\n\n  &:focus,\n  &:focus-visible {\n    outline-offset: 0;\n  }\n}\n\n.Link--primary {\n  color: var(--color-fg-default) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n  }\n}\n\n.Link--secondary {\n  color: var(--color-fg-muted) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n  }\n}\n\n.Link--muted {\n  color: var(--color-fg-muted) !important;\n\n  &:hover {\n    color: var(--color-accent-fg) !important;\n    text-decoration: none;\n  }\n}\n\n/* Set the link color only on hover\n   Useful when you want only part of a link to turn blue on hover */\n.Link--onHover {\n  &:hover {\n    color: var(--color-accent-fg) !important;\n    text-decoration: underline;\n    cursor: pointer;\n  }\n}\n\n/* When using a color utility class inside of a link class\n   color should change with link on hover. */\n.Link--secondary,\n.Link--primary,\n.Link--muted {\n  &:hover [class*='color-fg'] {\n    color: inherit !important;\n  }\n}\n"]}