@mixtint/primer-view-components 0.89.2 → 0.90.1

package/app/components/primer/alpha/action_bar.css

@@ -10,40 +10,46 @@
   overflow: hidden;
   justify-content: flex-end;
 }
+
 .ActionBar-item-container {
   height: var(--control-medium-size);
   box-sizing: content-box;
   overflow: hidden;
 }
+
 .ActionBar-item {
   position: relative;
   float: left;
 }
+
 .ActionBar-more-menu {
   float: left;
 }
+
 .ActionBar--small {
   min-width: calc(var(--control-small-size) * 3);
 }
+
 .ActionBar--large {
   min-width: calc(var(--control-large-size) * 3);
 }
+
 /* Divider */
+
 .ActionBar-divider {
   top: 50%;
   bottom: 50%;
   float: left;
   height: calc(var(--control-medium-size) / 2);
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-medium-gap-condensed);
   border-left: var(--borderWidth-thin) solid var(--borderColor-muted);
   transform: translateY(-50%);
 }
+
 .ActionBar--small .ActionBar-divider {
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-small-gap-condensed);
 }
+
 .ActionBar--large .ActionBar-divider {
-  /* stylelint-disable-next-line primer/spacing */
   margin: 0 var(--controlStack-large-gap-condensed);
 }

package/app/components/primer/alpha/action_list.css

@@ -4,29 +4,37 @@
 :root {
   --actionListContent-paddingBlock: var(--control-medium-paddingBlock);
 }
+
 /* ActionList */
+
 /* stylelint-disable-next-line selector-max-type */
 action-list {
   display: block;
 }
+
 /* stylelint-disable-next-line selector-max-type */
 nav-list {
   display: block;
 }
+
 .ActionListHeader {
   margin-bottom: var(--base-size-16);
   margin-left: var(--base-size-8);
 }
+
 /* <ul> */
 .ActionListWrap {
   list-style: none;
 }
+
 .ActionListWrap--inset,
 .ActionListWrap--inset[popover] {
   margin-left: 0;
   padding: var(--base-size-8);
 }
+
 /* list dividers */
+
 .ActionListWrap--divided .ActionListItem-label::before {
     position: absolute;
     /* stylelint-disable-next-line primer/spacing */
@@ -38,7 +46,9 @@ nav-list {
     /* stylelint-disable-next-line primer/colors */
     background: var(--borderColor-muted);
   }
+
 /* if descriptionWrap--inline exists, move pseudo divider to wrapper */
+
 :is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline)::before {
       position: absolute;
       /* stylelint-disable-next-line primer/spacing */
@@ -50,25 +60,33 @@ nav-list {
       /* stylelint-disable-next-line primer/colors */
       background: var(--borderColor-muted);
     }
+
 /* unset the default label pseudo */
+
 :is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline) .ActionListItem-label::before {
       content: unset;
     }
+
 /* hide divider if item is active */
+
 :is(.ActionListWrap--divided .ActionListItem--navActive) .ActionListItem-label::before,:is(.ActionListWrap--divided .ActionListItem--navActive) + .ActionListItem .ActionListItem-label::before {
       visibility: hidden;
     }
+
 /* hide if item is first of type with label::before, or is the first item after a sectionDivider */
 .ActionListItem:first-of-type .ActionListItem-label::before,
 .ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before {
   visibility: hidden;
 }
+
 /* hide if item is first of type with label::before, or is the first item after a sectionDivider */
 .ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before,
 .ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before {
   visibility: hidden;
 }
+
 /* ActionList::Item */
+
 .ActionListItem {
   position: relative;
   list-style: none;
@@ -77,10 +95,13 @@ nav-list {
 
   /* state */
 }
+
 .ActionListItem:hover,.ActionListItem:active {
     cursor: pointer;
   }
+
 /* hide dividers  */
+
 @media (hover: hover) {
       .ActionListItem:hover .ActionListItem-label::before,.ActionListItem:hover + .ActionListItem .ActionListItem-label::before {
         visibility: hidden;
@@ -90,24 +111,33 @@ nav-list {
         visibility: hidden;
       }
   }
+
 /* Make sure that the first visible item isn't a divider */
+
 .ActionListItem[hidden] + .ActionList-sectionDivider {
     display: none;
   }
+
 /* collapse styles here */
+
 /* first child */
+
 .ActionListItem.ActionListItem--hasSubItem > .ActionListContent {
       z-index: 1;
     }
+
 @media (hover: hover) {
         :is(.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover {
           background-color: var(--control-transparent-bgColor-hover);
         }
       }
+
 :is(.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active {
         background-color: var(--control-transparent-bgColor-active);
       }
+
 /* only hover li without list as children */
+
 @media (hover: hover) {
       :is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover {
         cursor: pointer;
@@ -121,32 +151,41 @@ nav-list {
           box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
         }
     }
+
 :is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active {
       background: var(--control-transparent-bgColor-active);
     }
+
 :is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active:not(.ActionListItem--navActive) {
         /* Support for "Windows high contrast mode" https:sarahmhigley.com/writing/whcm-quick-tips/ */
         outline: solid var(--borderWidth-thin) transparent;
         outline-offset: calc(-1 * var(--borderWidth-thin));
         box-shadow: var(--boxShadow-thin) var(--control-transparent-borderColor-active);
       }
+
 :is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active .ActionListItem-label::before,:is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active + .ActionListItem .ActionListItem-label::before {
         visibility: hidden;
       }
+
 /* Autocomplete [aria-selected] items */
+
 .ActionListItem[aria-selected='true'] {
     font-weight: var(--base-text-weight-normal);
     background: var(--control-transparent-bgColor-selected);
   }
+
 @media (hover: hover) {
       .ActionListItem[aria-selected='true']:hover {
         background-color: var(--control-transparent-bgColor-hover);
       }
     }
+
 .ActionListItem[aria-selected='true']::before,.ActionListItem[aria-selected='true'] + .ActionListItem::before {
       visibility: hidden;
     }
+
 /* blue accent line */
+
 .ActionListItem[aria-selected='true']::after {
       position: absolute;
       top: calc(50% - 12px);
@@ -157,26 +196,34 @@ nav-list {
       background: var(--borderColor-accent-emphasis);
       border-radius: var(--borderRadius-medium);
     }
+
 /* active state [aria-current] */
+
 .ActionListItem.ActionListItem--navActive {
     /* provides a visual indication of the current item for Windows high-contrast mode */
     outline: 2px solid transparent;
   }
+
 .ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label {
         font-weight: var(--base-text-weight-semibold);
       }
+
 .ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) {
       background: var(--control-transparent-bgColor-selected);
     }
+
 @media (hover: hover) {
         .ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover {
           background-color: var(--control-transparent-bgColor-hover);
         }
       }
+
 .ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)::before,.ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) + .ActionListItem::before {
         visibility: hidden;
       }
+
 /* blue accent line  */
+
 .ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)::after {
         position: absolute;
         top: calc(50% - 12px);
@@ -187,27 +234,36 @@ nav-list {
         background: var(--borderColor-accent-emphasis);
         border-radius: var(--borderRadius-medium);
       }
+
 /* disabled */
+
 :is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-label,:is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-description {
         color: var(--control-fgColor-disabled);
       }
+
 :is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-visual {
         fill: var(--control-fgColor-disabled);
       }
+
 @media (hover: hover) {
       :is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']):hover {
         cursor: not-allowed;
         background-color: transparent;
       }
     }
+
 /* variants */
+
 /* danger */
+
 .ActionListItem.ActionListItem--danger .ActionListItem-label {
       color: var(--control-danger-fgColor-rest);
     }
+
 .ActionListItem.ActionListItem--danger .ActionListItem-visual {
       color: var(--control-danger-fgColor-rest);
     }
+
 @media (hover: hover) {
       .ActionListItem.ActionListItem--danger:hover {
         background: var(--control-danger-bgColor-hover);
@@ -217,12 +273,15 @@ nav-list {
           color: var(--control-danger-fgColor-hover);
         }
     }
+
 :is(.ActionListItem.ActionListItem--danger .ActionListContent):active {
         background: var(--control-danger-bgColor-active);
       }
+
 :is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-label,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-visual,:is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-description {
           color: var(--control-danger-fgColor-hover);
         }
+
 /* button or a href */
 .ActionListContent {
   position: relative;
@@ -230,7 +289,6 @@ nav-list {
   width: 100%;
   /* stylelint-disable-next-line primer/spacing */
   padding-block: var(--actionListContent-paddingBlock);
-  /* stylelint-disable-next-line primer/spacing */
   padding-inline: var(--control-medium-paddingInline-condensed);
   color: var(--control-fgColor-rest);
   text-align: left;
@@ -250,7 +308,6 @@ nav-list {
   /* column-gap persists with empty grid-areas, margin applies only when children exist */
 }
 .ActionListContent > :not(:last-child) {
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-medium-gap);
   }
 /* state */
@@ -382,24 +439,32 @@ nav-list {
 .ActionListContent.ActionListContent--blockDescription .ActionListItem-visual {
       place-self: start;
     }
+
 /* place children on grid */
+
 .ActionListItem-action--leading {
   grid-area: leadingAction;
 }
+
 .ActionListItem-visual--leading {
   grid-area: leadingVisual;
 }
+
 .ActionListItem-visual--trailing {
   grid-area: trailingVisual;
 }
+
 .ActionListItem-action--trailing {
   grid-area: trailingAction;
 }
+
 /* have leading visual svg filled with chosen color */
+
 /* stylelint-disable-next-line selector-max-type */
 .ActionListItem-visual--leading svg {
   fill: currentcolor;
 }
+
 /* wrapper span
  default block */
 .ActionListItem-descriptionWrap {
@@ -411,6 +476,7 @@ nav-list {
 .ActionListItem-descriptionWrap .ActionListItem-label {
     font-weight: var(--base-text-weight-semibold);
   }
+
 /* inline */
 .ActionListItem-descriptionWrap--inline {
   position: relative;
@@ -418,6 +484,7 @@ nav-list {
   align-items: baseline;
   gap: var(--base-size-8);
 }
+
 /* description */
 .ActionListItem-description {
   font-size: var(--text-body-size-small);
@@ -425,6 +492,7 @@ nav-list {
   line-height: var(--text-body-lineHeight-small);
   color: var(--fgColor-muted);
 }
+
 /* helper for grid alignment with multi-line content
  span wrapping svg or text */
 .ActionListItem-visual,
@@ -436,6 +504,7 @@ nav-list {
   fill: var(--fgColor-muted);
   align-items: center;
 }
+
 /* text */
 .ActionListItem-label {
   position: relative;
@@ -445,36 +514,48 @@ nav-list {
   color: var(--fgColor-default);
   grid-area: label;
 }
+
 .ActionListItem-label--truncate {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
 /* nested lists (only supports 1 level currently)
  target ActionListItem--subItem for padding-left to maintain :active :after state */
+
 .ActionListItem--subItem > .ActionListContent > .ActionListItem-label {
   font-size: var(--text-body-size-small);
   line-height: var(--text-body-lineHeight-small);
 }
+
 /* trailing action icon button */
+
 .ActionListItem--withActions {
   display: flex;
   flex-wrap: nowrap;
   align-items: center;
 }
+
 .ActionListItem-trailingAction {
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
+
 /* show trailing action button on hover */
+
 .ActionListItem--trailingActionHover .ActionListItem-trailingAction {
     visibility: hidden;
   }
+
 :is(.ActionListItem--trailingActionHover:hover,.ActionListItem--trailingActionHover:focus-within) .ActionListItem-trailingAction {
       visibility: visible;
     }
+
 /* ActionList::Divider */
+
 /* with children */
+
 .ActionList-sectionDivider:not(:empty) {
     display: flex;
     font-size: var(--text-body-size-small);
@@ -486,7 +567,9 @@ nav-list {
     padding-inline: var(--actionListContent-paddingBlock);
     padding-block: var(--base-size-8);
   }
+
 /* no children */
+
 .ActionList-sectionDivider:empty {
     display: block;
     height: var(--borderWidth-thin);
@@ -500,26 +583,31 @@ nav-list {
     background: var(--borderColor-muted);
     border: 0;
   }
+
 .ActionList-sectionDivider .ActionList-sectionDivider-title {
     font-size: var(--text-body-size-small);
     font-weight: var(--base-text-weight-semibold);
     color: var(--fgColor-muted);
     align-self: flex-start;
   }
+
 .ActionList-sectionDividerHeader {
   display: flex;
   align-items: center;
   gap: var(--base-size-8);
 }
+
 .ActionList-sectionDividerHeader .ActionList-sectionDivider-title {
   align-self: baseline;
 }
+
 .ActionList-sectionDivider-trailingVisual {
   display: inline-flex;
   align-items: center;
   margin-inline-start: auto;
   flex-shrink: 0;
 }
+
 .ActionList-sectionDivider--filled {
   /* stylelint-disable-next-line primer/spacing */
   margin-block-start: calc(var(--base-size-8) - var(--borderWidth-thin));
@@ -531,10 +619,12 @@ nav-list {
 
   /* if no children, treat as divider */
 }
+
 .ActionList-sectionDivider--filled:empty {
     height: var(--base-size-8);
     box-sizing: border-box;
   }
+
 .ActionList-sectionDivider--filled:first-child {
     margin-block-start: 0;
   }

package/app/components/primer/alpha/auto_complete.css

@@ -4,21 +4,18 @@
 ** AutoComplete relies on FormControl, Overlay and ActionList CSS */
 
 /* Stacked label (default) */
-
 .autocomplete-label-stacked {
   display: block;
   margin-bottom: var(--base-size-6);
 }
 
 /* Inline label (non-default) */
-
 .autocomplete-label-inline {
   display: inline;
   margin-right: var(--base-size-6);
 }
 
 /* Switch to stacked at smaller viewport */
-
 @media (max-width: 543.98px) {
   .autocomplete-label-inline {
     display: block;
@@ -27,20 +24,17 @@
 }
 
 /* Wrapper for the input and result elements to ensure alignment */
-
 .autocomplete-body {
   position: relative;
   display: inline;
 }
 
 /* Wrapper and conditional styles for when an icon is added */
-
 .autocomplete-embedded-icon-wrap {
   display: inline-flex;
   padding: var(--base-size-4) var(--base-size-8);
   align-items: center;
 }
-
 .autocomplete-embedded-icon-wrap:focus-within {
     border-color: var(--borderColor-accent-emphasis);
 
@@ -50,24 +44,20 @@
 
     box-shadow: inset 0 0 0 1px var(--focus-outlineColor);
   }
-
 .autocomplete-embedded-icon-wrap .form-control {
     padding: 0;
     margin-left: var(--base-size-8);
     border: none;
     box-shadow: none;
   }
-
 :is(.autocomplete-embedded-icon-wrap .form-control):focus {
       box-shadow: none;
     }
-
 :is(.autocomplete-embedded-icon-wrap .form-control):focus-visible {
       box-shadow: none;
     }
 
 /* A pop up list of items used to show autocompleted results */
-
 .autocomplete-results {
   position: absolute;
   left: 0;
@@ -102,6 +92,10 @@
   cursor: pointer;
   background-color: var(--overlay-bgColor);
   border: 0;
+
+  /* `color` is inherited, so setting it on the item recolors descendants
+  ** without a universal `… *` descendant rule (which forces a slow
+  ** style-recalc match attempt against every element on the page). */
 }
 
 .autocomplete-item:hover {
@@ -109,23 +103,11 @@
     -webkit-text-decoration: none;
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
-
-    /* Inherit color on all child elements to ensure enough contrast */
   }
 
-.autocomplete-item:hover * {
-      color: inherit !important;
-    }
-
 .autocomplete-item.selected,.autocomplete-item[aria-selected='true'],.autocomplete-item.navigation-focus {
     color: var(--fgColor-onEmphasis);
     -webkit-text-decoration: none;
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
-
-    /* Inherit color on all child elements to ensure enough contrast */
   }
-
-:is(.autocomplete-item.selected,.autocomplete-item[aria-selected='true'],.autocomplete-item.navigation-focus) * {
-      color: inherit !important;
-    }

package/app/components/primer/alpha/auto_complete.css.json

@@ -12,10 +12,8 @@
     ".autocomplete-results",
     ".autocomplete-item",
     ".autocomplete-item:hover",
-    ".autocomplete-item:hover *",
     ".autocomplete-item.selected",
     ".autocomplete-item[aria-selected='true']",
-    ".autocomplete-item.navigation-focus",
-    ":is(.autocomplete-item.selected,.autocomplete-item[aria-selected='true'],.autocomplete-item.navigation-focus) *"
+    ".autocomplete-item.navigation-focus"
   ]
 }

package/app/components/primer/alpha/banner.css

@@ -77,7 +77,6 @@
 
 .Banner .Banner-close {
     grid-area: close;
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--controlStack-medium-gap-condensed);
   }
 

package/app/components/primer/alpha/button_marketing.css

@@ -19,7 +19,7 @@
   -webkit-user-select: none;
           user-select: none;
   /* stylelint-disable-next-line primer/colors */
-  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%),
+  background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%),
     var(--color-mktg-btn-bg) !important;
   border: 0;
 
@@ -39,7 +39,7 @@
     content: '';
 
     /* stylelint-disable-next-line primer/colors */
-    background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0) 100%) !important;
+    background: linear-gradient(180deg, rgb(255, 255, 255, 0.15) 0%, rgb(255, 255, 255, 0) 100%) !important;
     border-radius: inherit;
     opacity: 0;
     transition: opacity 0.2s;
@@ -136,12 +136,12 @@
   color: #fff;
 
   /* stylelint-disable-next-line primer/colors */
-  background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
+  background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%), rgb(46, 164, 79) !important;
 }
 
 .btn-signup-mktg::before {
     /* stylelint-disable-next-line primer/colors */
-    background: linear-gradient(180deg, rgba(52, 183, 89, 0.15) 0%, rgba(46, 164, 79, 0) 100%) !important;
+    background: linear-gradient(180deg, rgb(52, 183, 89, 0.15) 0%, rgb(46, 164, 79, 0) 100%) !important;
   }
 
 /* fallback :focus state */