@mixtint/primer-view-components 0.89.1 → 0.90.1

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

@@ -2,29 +2,37 @@
 /* The selector-max-specificity rule is disabled here because the nested selectors
  in AvatarStack require high specificity to properly override default styles and 
  achieve the intended visual stacking. */
+
 /* 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;
@@ -38,49 +46,65 @@
     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;
     }
+
 /* stylelint-disable-next-line selector-max-type */
+
 .AvatarStack-body span:nth-child(n + 4) .avatar {
     display: none;
     opacity: 0;
   }
+
 :is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar {
       margin-right: var(--base-size-4);
     }
+
 :is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar:nth-child(n + 4) {
       display: flex;
       opacity: 1;
     }
+
 /* stylelint-disable-next-line selector-max-type */
+
 :is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) span:nth-child(n + 4) .avatar {
       display: flex;
       opacity: 1;
     }
+
 :is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) .avatar-more {
       display: none !important;
     }
+
 .AvatarStack-body[data-disable-expand] {
     position: relative;
   }
+
 .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;
@@ -90,33 +114,42 @@
     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:not([data-disable-expand]) .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 */

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

@@ -18,7 +18,7 @@
 }
 
 .blankslate p {
-    font-size: var(--text-body-size-large);
+    font-size: var(--text-body-size-medium);
     color: var(--fgColor-muted);
     max-width: 56rem;
     margin: auto;
@@ -42,23 +42,19 @@
   }
 
 .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-size: var(--text-title-size-small);
   font-weight: var(--text-title-weight-medium);
   text-wrap: balance;
 }
@@ -68,17 +64,14 @@
 }
 
 .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);
   }
 
@@ -98,78 +91,26 @@
 
 /* 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,6 +1,8 @@
 /* stylelint-disable primer/spacing */
 /* stylelint-disable primer/typography */
+
 /* BorderBox */
+
 /* TODO: Rename to BorderBox to match PVC */
 .Box {
   background-color: var(--bgColor-default);
@@ -9,6 +11,7 @@
   border-width: var(--borderWidth-thin);
   border-radius: var(--borderRadius-medium);
 }
+
 /* Box padding density options */
 .Box--condensed {
   line-height: 1.25;
@@ -30,26 +33,33 @@
 .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;
@@ -60,21 +70,25 @@
   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);
@@ -121,18 +135,23 @@
 .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. */
@@ -149,11 +168,13 @@
       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 */
@@ -162,28 +183,36 @@
   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 {
@@ -195,20 +224,26 @@
 :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 {

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

@@ -15,12 +15,15 @@
     transform: rotate(15deg) translateY(0.0625em);
   }
 
-:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current='false']))::after {
-    content: none;
-  }
+/* Expanded per-class so each selector buckets by its own class during style
+** recalc, instead of compiling to a merged `:is(...)` that Blink cannot
+** fast-reject. */
+.breadcrumb-item-selected::after,
+.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;

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

@@ -3,7 +3,8 @@
   "selectors": [
     ".breadcrumb-item",
     ".breadcrumb-item::after",
-    ":is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current='false']))::after",
+    ".breadcrumb-item-selected::after",
+    ".breadcrumb-item[aria-current]:not([aria-current='false'])::after",
     ".breadcrumb-item-selected a"
   ]
 }