@mixtint/primer-view-components 0.89.2 → 0.90.1

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"
   ]
 }

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

@@ -1,12 +1,14 @@
 /* stylelint-disable selector-no-qualifying-type */
 /* stylelint-disable selector-max-type */
-/* stylelint-disable primer/spacing */
+
 /* CSS for Button  */
+
 /* temporary, pre primitives release */
 :root {
   --duration-fast: 80ms;
   --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
 }
+
 /* base button */
 .Button {
   position: relative;
@@ -61,10 +63,12 @@
 .Button.Button--iconOnly {
     color: var(--fgColor-muted);
   }
+
 :is(a.Button,summary.Button):hover {
     -webkit-text-decoration: none;
     text-decoration: none;
   }
+
 /* wrap grid content to allow trailingAction to lock-right */
 .Button-content {
   flex: 1 0 auto;
@@ -79,11 +83,14 @@
 .Button-content > :not(:last-child) {
     margin-right: var(--control-medium-gap);
   }
+
 /* center child elements for fullWidth */
 .Button-content--alignStart {
   justify-content: start;
 }
+
 /* button child elements */
+
 /* align svg */
 .Button-visual {
   display: flex;
@@ -93,24 +100,31 @@
     color: inherit;
     background-color: var(--buttonCounter-default-bgColor-rest);
   }
+
 .Button-label {
   line-height: var(--text-body-lineHeight-medium);
   white-space: nowrap;
   grid-area: text;
 }
+
 .Button-leadingVisual {
   grid-area: leadingVisual;
 }
+
 .Button-leadingVisual svg {
   fill: currentcolor;
 }
+
 .Button-trailingVisual {
   grid-area: trailingVisual;
 }
+
 .Button-trailingAction {
   margin-right: calc(var(--base-size-4) * -1);
 }
+
 /* sizes */
+
 .Button--small {
   min-width: var(--control-small-size);
   height: var(--control-small-size);
@@ -118,56 +132,72 @@
   font-size: var(--text-body-size-small);
   gap: var(--control-small-gap);
 }
+
 .Button--small .Button-label {
     line-height: var(--text-body-lineHeight-small);
   }
+
 :is(.Button--small .Button-content) > :not(:last-child) {
       margin-right: var(--control-small-gap);
     }
+
 .Button--large {
   height: var(--control-large-size);
   padding: 0 var(--control-large-paddingInline-spacious);
   gap: var(--control-large-gap);
 }
+
 .Button--large .Button-label {
     line-height: var(--text-body-lineHeight-large);
   }
+
 :is(.Button--large .Button-content) > :not(:last-child) {
       margin-right: var(--control-large-gap);
     }
+
 .Button--fullWidth {
   width: 100%;
 }
+
 /* allow button label text to wrap */
+
 .Button--labelWrap {
   min-width: fit-content;
   height: unset;
   min-height: var(--control-medium-size);
 }
+
 .Button--labelWrap .Button-content {
     flex: 1 1 auto;
     align-self: stretch;
     padding-block: calc(var(--control-medium-paddingBlock) - var(--base-size-2));
   }
+
 .Button--labelWrap .Button-label {
     white-space: unset;
   }
+
 .Button--labelWrap.Button--small {
     height: unset;
     min-height: var(--control-small-size);
   }
+
 .Button--labelWrap.Button--small .Button-content {
       padding-block: calc(var(--control-small-paddingBlock) - var(--base-size-2));
     }
+
 .Button--labelWrap.Button--large {
     height: unset;
     min-height: var(--control-large-size);
     padding-inline: var(--control-large-paddingInline-spacious);
   }
+
 .Button--labelWrap.Button--large .Button-content {
       padding-block: calc(var(--control-large-paddingBlock) - var(--base-size-2));
     }
+
 /* variants */
+
 /* primary */
 .Button--primary {
   color: var(--button-primary-fgColor-rest);
@@ -215,6 +245,7 @@
     color: inherit;
     background-color: var(--buttonCounter-primary-bgColor-rest);
   }
+
 /* default (secondary) */
 .Button--secondary {
   color: var(--button-default-fgColor-rest);
@@ -241,34 +272,44 @@
     background-color: var(--button-default-bgColor-disabled);
     border-color: var(--button-default-borderColor-disabled);
   }
+
 .Button--invisible {
   color: var(--button-invisible-fgColor-rest);
 }
+
 .Button--invisible.Button--iconOnly {
     color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
   }
+
 .Button--invisible:hover:not(:disabled,.Button--inactive) {
     background-color: var(--control-transparent-bgColor-hover, var(--color-action-list-item-default-hover-bg));
   }
+
 .Button--invisible[aria-pressed='true'],.Button--invisible:active:not(:disabled) {
     background-color: var(--button-invisible-bgColor-active);
   }
+
 .Button--invisible:disabled,.Button--invisible[aria-disabled='true'] {
     color: var(--button-invisible-fgColor-disabled);
     fill: var(--button-invisible-fgColor-disabled);
     background-color: var(--button-invisible-bgColor-disabled);
     border-color: var(--button-invisible-borderColor-disabled);
   }
+
 /* if button has no visuals, use link blue for text */
+
 .Button--invisible.Button--invisible-noVisuals .Button-label {
     color: var(--button-invisible-fgColor-rest);
   }
+
 .Button--invisible .Button-visual {
     color: var(--button-invisible-iconColor-rest, var(--color-fg-muted));
   }
+
 :is(.Button--invisible .Button-visual) .Counter {
       color: var(--fgColor-default);
     }
+
 .Button--link {
   display: inline-block;
   min-width: fit-content;
@@ -279,22 +320,27 @@
   fill: var(--fgColor-link);
   border: none;
 }
+
 .Button--link:hover:not(:disabled,.Button--inactive) {
     -webkit-text-decoration: underline;
     text-decoration: underline;
   }
+
 .Button--link:focus-visible,.Button--link:focus {
     outline-offset: 2px;
   }
+
 .Button--link:disabled,.Button--link[aria-disabled='true'] {
     color: var(--control-fgColor-disabled);
     fill: var(--control-fgColor-disabled);
     background-color: transparent;
     border-color: transparent;
   }
+
 .Button--link .Button-label {
       white-space: unset;
   }
+
 /* danger */
 .Button--danger {
   color: var(--button-danger-fgColor-rest);
@@ -338,18 +384,22 @@
     color: var(--buttonCounter-danger-fgColor-rest);
     background-color: var(--buttonCounter-danger-bgColor-rest);
   }
+
 .Button--iconOnly {
   display: inline-grid;
   width: var(--control-medium-size);
   padding: unset;
   place-content: center;
 }
+
 .Button--iconOnly.Button--small {
     width: var(--control-small-size);
   }
+
 .Button--iconOnly.Button--large {
     width: var(--control-large-size);
   }
+
 /* `disabled` takes precedence over `inactive` */
 .Button--inactive:not([aria-disabled='true'], :disabled) {
   color: var(--button-inactive-fgColor);

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

@@ -3,7 +3,6 @@
 /* flash */
 
 /* Default flash */
-
 .flash:not(.Banner) {
   position: relative;
   padding: var(--base-size-20) var(--control-medium-paddingInline-spacious);
@@ -16,26 +15,21 @@
   border-width: var(--borderWidth-thin);
   border-radius: var(--borderRadius-medium);
 }
-
 .flash:not(.Banner) .octicon {
     margin-right: var(--base-size-12);
     color: var(--fgColor-accent);
   }
-
 /* stylelint-disable-next-line selector-max-type */
-
 .flash:not(.Banner) p:last-child {
     margin-bottom: 0;
   }
 
 /* Contain the flash messages */
-
 .flash-messages {
   margin-bottom: var(--stack-gap-spacious);
 }
 
 /* Close button */
-
 .flash-close:not(.Banner-close) {
   float: right;
   margin-top: calc(var(--base-size-4) * -1);
@@ -47,37 +41,30 @@
   border: 0;
   appearance: none;
 }
-
 .flash-close:not(.Banner-close):hover {
     opacity: 0.7;
   }
-
 .flash-close:not(.Banner-close):active {
     opacity: 0.5;
   }
-
 .flash-close:not(.Banner-close) .octicon {
     margin-right: 0;
   }
 
 /* Action button */
-
 .flash-action:not(.Banner-actions) {
   float: right;
   margin-top: -3px;
   margin-left: var(--stack-gap-spacious);
   background-clip: padding-box;
 }
-
 .flash-action.btn:not(.Banner-actions) .octicon {
     margin-right: var(--control-small-gap);
     color: var(--fgColor-muted);
   }
-
 .flash-action.btn-primary:not(.Banner-actions) {
     background-clip: border-box;
   }
-
 .flash-action.btn-primary:not(.Banner-actions) .octicon {
       color: inherit;
     }
@@ -123,7 +110,6 @@
 }
 
 /* A banner rendered at the top of the page. */
-
 .flash-banner {
   position: fixed;
   top: 0;
@@ -136,14 +122,12 @@
 }
 
 /* Makes sure the background is opaque to cover any content underneath */
-
 .flash-full,
 .flash-banner {
   background-color: var(--bgColor-default);
 }
 
 /* FIXME deprecate this */
-
 .warning {
   padding: 0.5em;
   margin-bottom: 0.8em;

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

@@ -1,7 +1,6 @@
 /* Labels */
 
 /* Provide a wrapper to ensure labels stick together */
-
 .labels {
   position: relative;
 }
@@ -38,7 +37,6 @@
 
 /* Doesn't increase height of parent element
 ** Can be used with different font-sizes */
-
 .Label--inline {
   display: inline;
   /* stylelint-disable-next-line primer/spacing */

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

@@ -54,7 +54,6 @@
 
 /* Set the link color only on hover
    Useful when you want only part of a link to turn blue on hover */
-
 .Link--onHover:hover {
     color: var(--fgColor-accent) !important;
     -webkit-text-decoration: underline;
@@ -64,7 +63,6 @@
 
 /* When using a color utility class inside of a link class
    color should change with link on hover. */
-
 :is(.Link--secondary,.Link--primary,.Link--muted):hover [class*='color-fg'] {
     color: inherit !important;
   }