@mixtint/primer-view-components 0.89.1 → 0.90.1

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

@@ -5,7 +5,9 @@
 /* stylelint-disable primer/spacing */
 /* stylelint-disable selector-no-qualifying-type */
 /* stylelint-disable selector-max-type */
+
 /* Overlay */
+
 /* The --dialog-scrollgutter property is used only on the body element to
  * simulate scrollbar-gutter:stable. This property is not and should not
  * be used elsewhere in the DOM. There is a performance penalty to
@@ -18,22 +20,30 @@
   inherits: false;
   syntax: "<length>";
 }
-body:has(dialog:modal.Overlay--disableScroll) {
+
+body.has-modal {
   padding-right: var(--dialog-scrollgutter) !important;
+}
+
+body.has-modal-disable-scroll {
   overflow: hidden !important;
 }
+
 dialog.Overlay:not([open]) {
   display: none;
 }
+
 .Overlay--hidden {
   display: none !important;
 }
+
 .Overlay--visibilityHidden {
   height: 0;
   overflow: hidden;
   visibility: hidden;
   opacity: 0;
 }
+
 /* This is for @oddbird/popover-polyfill;
  * A FOUC occurs in browsers which do not support :popover-open.
  * We can try to hide the popover if :popover-open is not supported.
@@ -43,6 +53,7 @@ dialog.Overlay:not([open]) {
     display: none;
   }
 }
+
 .Overlay {
   position: static;
   display: flex;
@@ -61,107 +72,137 @@ dialog.Overlay:not([open]) {
   opacity: 1;
   inset: 0;
 }
+
 .Overlay.Overlay--size-auto {
     min-width: 192px;
     max-width: calc(100vw - 2rem);
     max-height: calc(100vh - 2rem);
   }
+
 .Overlay.Overlay--size-full {
     width: 100vw;
     height: 100vh;
   }
+
 .Overlay.Overlay--size-xsmall {
     --overlay-width: 192px;
 
     max-height: calc(100vh - 2rem);
   }
+
 .Overlay.Overlay--size-small {
     --overlay-height: 256px;
     --overlay-width: 320px;
   }
+
 .Overlay.Overlay--size-small-portrait {
     --overlay-height: 432px;
     --overlay-width: 320px;
   }
+
 .Overlay.Overlay--size-medium {
     --overlay-height: 320px;
     --overlay-width: 480px;
   }
+
 .Overlay.Overlay--size-medium-portrait {
     --overlay-height: 600px;
     --overlay-width: 480px;
   }
+
 .Overlay.Overlay--size-large {
     --overlay-height: 432px;
     --overlay-width: 640px;
   }
+
 .Overlay.Overlay--size-xlarge {
     --overlay-height: 600px;
     --overlay-width: 960px;
   }
+
 .Overlay.Overlay--height-auto {
     height: auto;
   }
+
 .Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right {
     position: fixed;
     height: 100%;
     max-height: unset;
   }
+
 @media screen and (prefers-reduced-motion: no-preference) {
+
 .Overlay.Overlay--motion-scaleFade,.Overlay.Overlay--placement-left,.Overlay.Overlay--placement-right {
       animation: 200ms cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running Overlay--motion-scaleFade;
   }
     }
+
 .Overlay.Overlay--placement-left {
     inset: 0 auto 0 0;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
     animation-name: Overlay--motion-slideInRight;
   }
+
 .Overlay.Overlay--placement-right {
     inset: 0 0 0 auto;
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
     animation-name: Overlay--motion-slideInLeft;
   }
+
 /* start deprecate in favor of Alpha::Dialog */
+
 .Overlay.Overlay--height-xsmall {
     height: min(192px, 100vh - 2rem);
   }
+
 .Overlay.Overlay--height-small {
     height: min(256px, 100vh - 2rem);
   }
+
 .Overlay.Overlay--height-medium {
     height: min(320px, 100vh - 2rem);
   }
+
 .Overlay.Overlay--height-large {
     height: min(432px, 100vh - 2rem);
   }
+
 .Overlay.Overlay--height-xlarge {
     height: min(600px, 100vh - 2rem);
   }
+
 .Overlay.Overlay--width-auto {
     width: auto;
   }
+
 .Overlay.Overlay--width-small {
     width: min(256px, 100vw - 2rem);
   }
+
 .Overlay.Overlay--width-medium {
     width: min(320px, 100vw - 2rem);
   }
+
 .Overlay.Overlay--width-large {
     width: min(480px, 100vw - 2rem);
   }
+
 .Overlay.Overlay--width-xlarge {
     width: min(640px, 100vw - 2rem);
   }
+
 .Overlay.Overlay--width-xxlarge {
     width: min(960px, 100vw - 2rem);
   }
+
 /* end deprecate */
+
 .Overlay:modal {
   position: fixed;
 }
+
 @keyframes Overlay--motion-scaleFade {
   0% {
     opacity: 0;
@@ -173,6 +214,7 @@ dialog.Overlay:not([open]) {
     transform: scale(1);
   }
 }
+
 /* for <form> element that wraps entire contents of overlay */
 .Overlay-form {
   display: flex;
@@ -180,37 +222,45 @@ dialog.Overlay:not([open]) {
   flex-direction: column;
   flex-grow: 1;
 }
+
 .Overlay-header {
   z-index: 1;
   display: flex;
   color: var(--fgColor-default);
   flex-direction: column;
 }
+
 .Overlay-header.Overlay-header--divided {
     padding-bottom: var(--stack-padding-condensed);
     /* stylelint-disable-next-line primer/box-shadow */
     box-shadow: inset 0 calc(var(--borderWidth-thin) * -1) var(--borderColor-default);
   }
+
 :is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap {
         gap: var(--stack-gap-condensed);
       }
+
 :is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title {
           font-size: var(--text-title-size-medium);
         }
+
 :is(:is(.Overlay-header.Overlay-header--large .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description {
           font-size: var(--text-body-size-medium);
         }
+
 .Overlay-header .Overlay-headerContentWrap {
     display: flex;
     align-items: flex-start;
     gap: var(--stack-gap-condensed);
     padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);
   }
+
 :is(.Overlay-header .Overlay-headerContentWrap) .Overlay-actionWrap {
       display: flex;
       flex-direction: row;
       gap: var(--stack-gap-condensed);
     }
+
 :is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap {
       display: flex;
       padding: calc(var(--stack-gap-condensed) * 0.75) 0 calc(var(--stack-gap-condensed) * 0.75)
@@ -219,20 +269,24 @@ dialog.Overlay:not([open]) {
       flex-grow: 1;
       gap: var(--control-small-gap);
     }
+
 :is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-title {
         margin: 0;
         font-size: var(--text-body-size-medium);
         font-weight: var(--base-text-weight-semibold);
       }
+
 :is(:is(.Overlay-header .Overlay-headerContentWrap) .Overlay-titleWrap) .Overlay-description {
         margin: 0;
         font-size: var(--text-body-size-small);
         font-weight: var(--base-text-weight-normal);
         color: var(--fgColor-muted);
       }
+
 .Overlay-headerFilter {
   padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);
 }
+
 /* generic body content slot */
 .Overlay-body {
   padding: var(--stack-padding-normal);
@@ -248,6 +302,7 @@ dialog.Overlay:not([open]) {
 .Overlay-body.Overlay-body--paddingNone {
     padding: 0;
   }
+
 /* generic footer slot */
 .Overlay-footer {
   z-index: 1;
@@ -274,6 +329,7 @@ dialog.Overlay:not([open]) {
     justify-content: flex-end;
     gap: var(--stack-gap-condensed);
   }
+
 /* TODO: replace with refactored IconButton */
 .Overlay-closeButton {
   position: relative;
@@ -303,8 +359,11 @@ dialog.Overlay:not([open]) {
 .Overlay-closeButton.close-button {
     border: var(--borderWidth-thin) solid transparent;
   }
+
 /* variants must be mixins so we can extend within a media query (@extend is not supported inside media queries) */
+
 /* border-radius repeats within placement options to ensure the original radius is reset when two classes co-exist */
+
 /* full width */
 .Overlay--full {
   width: 100%;
@@ -314,7 +373,9 @@ dialog.Overlay:not([open]) {
   border-radius: unset !important;
   flex-grow: 1;
 }
+
 /* responsive variants */
+
 /* --viewportRange-narrowLandscape */
 @media (max-width: 767px) {
   .Overlay.Overlay--placement-left-whenNarrow, .Overlay--placement-right-whenNarrow {
@@ -367,21 +428,25 @@ dialog.Overlay:not([open]) {
     border-radius: unset !important;
   }
 }
+
 @keyframes Overlay--motion-slideDown {
   from {
     transform: translateY(-100%);
   }
 }
+
 @keyframes Overlay--motion-slideUp {
   from {
     transform: translateY(100%);
   }
 }
+
 @keyframes Overlay--motion-slideInRight {
   from {
     transform: translateX(-100%);
   }
 }
+
 @keyframes Overlay--motion-slideInLeft {
   from {
     transform: translateX(100%);

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

@@ -1,7 +1,8 @@
 {
   "name": "alpha/dialog",
   "selectors": [
-    "body:has(dialog:modal.Overlay--disableScroll)",
+    "body.has-modal",
+    "body.has-modal-disable-scroll",
     "dialog.Overlay:not([open])",
     ".Overlay--hidden",
     ".Overlay--visibilityHidden",

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

@@ -77,7 +77,6 @@
   }
 
 /* Dropdown items (can be links or buttons) */
-
 .dropdown-item {
   display: block;
   padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed) var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);
@@ -86,28 +85,23 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-
 .dropdown-item:hover {
     color: var(--fgColor-onEmphasis);
     -webkit-text-decoration: none;
     text-decoration: none;
     background-color: var(--bgColor-accent-emphasis);
   }
-
 .dropdown-item:hover > .octicon {
       color: inherit;
       opacity: 1;
     }
-
 .dropdown-item:hover [class*='color-fg-'] {
       color: inherit !important;
     }
-
 .dropdown-item:hover > .Label {
       color: inherit !important;
       border-color: currentcolor;
     }
-
 .dropdown-item.btn-link {
     width: 100%;
     text-align: left;

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

@@ -1,5 +1,7 @@
 /* Layout */
 
+/* stylelint-disable nesting-selector-no-missing-scoping-root -- inside @define-mixin the & resolves at the @mixin include site, so there is a scoping root */
+
 .Layout {
   display: grid;
 
@@ -193,7 +195,7 @@
 
   grid-auto-flow: column;
   grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */
-  grid-gap: var(--Layout-gutter);
+  gap: var(--Layout-gutter);
 }
 
 .Layout .Layout-sidebar {

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

@@ -3,7 +3,6 @@
 /* A menu on the side of a page, defaults to left side. e.g. github.com/about */
 
 .menu {
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-normal);
   list-style: none;
   background-color: var(--bgColor-default);
@@ -14,7 +13,6 @@
 .menu-item {
   position: relative;
   display: block;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
   color: var(--fgColor-default);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
@@ -68,7 +66,6 @@
 
 .menu-item .octicon {
     width: 16px;
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-medium-gap);
     color: var(--fgColor-muted);
     text-align: center;
@@ -76,7 +73,6 @@
 
 .menu-item .Counter {
     float: right;
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--control-small-gap);
   }
 
@@ -87,7 +83,6 @@
 
 .menu-item .avatar {
     float: left;
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-small-gap);
   }
 
@@ -97,7 +92,6 @@
 
 .menu-heading {
   display: block;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);
   margin-top: 0;
   margin-bottom: 0;

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

@@ -6,18 +6,23 @@ anchored-position[popover] {
   overflow: visible;
   border-width: 0;
 }
+
 anchored-position:not(.Overlay) {
   background: none;
 }
+
 .Overlay[popover]:not(:popover-open) {
   display: none
 }
+
 anchored-position.not-anchored::backdrop, dialog::backdrop {
   background-color: var(--overlay-backdrop-bgColor, var(--color-neutral-muted));
 }
+
 select-panel dialog::backdrop {
   background: none;
 }
+
 @media (forced-colors: active) {
   .Overlay {
     outline: solid 1px transparent;

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

@@ -104,9 +104,7 @@
 .SegmentedControl-item:not(:first-child)::before {
       position: absolute;
       inset: 0 0 0 -1px;
-      /* stylelint-disable-next-line primer/spacing */
       margin-top: var(--control-medium-paddingBlock);
-      /* stylelint-disable-next-line primer/spacing */
       margin-bottom: var(--control-medium-paddingBlock);
       content: '';
       border-left: var(--borderWidth-thin) solid var(--borderColor-default);
@@ -150,11 +148,9 @@
   }
 
 /* fullWidth */
-
 .SegmentedControl--fullWidth {
   display: flex;
 }
-
 .SegmentedControl--fullWidth .SegmentedControl-item {
     flex: 1;
     justify-content: center;

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

@@ -1,10 +1,8 @@
 /* tabnav */
 
 /* Outer wrapper */
-
 .tabnav {
   margin-top: 0;
-  /* stylelint-disable-next-line primer/spacing */
   margin-bottom: var(--stack-gap-normal);
   border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);
 }
@@ -26,7 +24,6 @@
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;
-  /* stylelint-disable-next-line primer/spacing */
   padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);
   font-size: var(--text-body-size-medium);
   /* stylelint-disable-next-line primer/typography */
@@ -68,13 +65,11 @@
   }
 
 .tabnav-tab .octicon {
-    /* stylelint-disable-next-line primer/spacing */
     margin-right: var(--control-small-gap);
     color: var(--fgColor-muted);
   }
 
 .tabnav-tab .Counter {
-    /* stylelint-disable-next-line primer/spacing */
     margin-left: var(--control-small-gap);
     color: inherit;
   }
@@ -99,9 +94,7 @@
   }
 
 /* When tabnav-extra are anchors */
-
 /* stylelint-disable-next-line selector-no-qualifying-type, selector-max-type */
-
 a.tabnav-extra:hover {
   color: var(--fgColor-accent);
   -webkit-text-decoration: none;
@@ -114,6 +107,5 @@ a.tabnav-extra:hover {
 ** the buttons to be floated or inline-block. */
 
 .tabnav-btn {
-  /* stylelint-disable-next-line primer/spacing */
   margin-left: var(--controlStack-medium-gap-condensed);
 }