@mixtint/primer-view-components 0.75.2 → 0.84.3

package/app/assets/styles/primer_view_components.css

@@ -563,7 +563,7 @@ nav-list {
 .ActionListItem-visual,
 .ActionListItem-action {
   display: flex;
-  min-height: var(--control-medium-lineBoxHeight);
+  min-height: var(--base-size-20);
   color: var(--fgColor-muted);
   pointer-events: none;
   fill: var(--fgColor-muted);
@@ -1595,6 +1595,18 @@ dialog.Overlay:not([open]) {
     border-radius: unset !important;
     flex-grow: 1;
   }
+
+  .Overlay--fullscreen-whenNarrow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    max-width: none !important;
+    height: 100vh;
+    max-height: none !important;
+    margin: 0;
+    border-radius: unset !important;
+  }
 }
 
 @keyframes Overlay--motion-slideDown {
@@ -2930,9 +2942,16 @@ dialog.Overlay:not([open]) {
   display: flex;
   /* stylelint-disable-next-line primer/spacing */
   margin-bottom: calc(var(--borderWidth-thin) * -1);
-  overflow: hidden;
+  overflow-x: auto;
+  overflow-y: hidden;
+
+  /* stylelint-disable-next-line selector-max-type */
 }
 
+.tabnav-tabs > li {
+    flex-shrink: 0;
+  }
+
 .tabnav-tab {
   display: inline-block;
   flex-shrink: 0;
@@ -4947,6 +4966,12 @@ a.tabnav-extra:hover {
   height: var(--base-size-64);
 }
 
+/* stylelint-disable selector-max-specificity */
+
+/* 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
@@ -4987,8 +5012,6 @@ a.tabnav-extra:hover {
     /* stylelint-disable-next-line primer/spacing */
     margin-right: -11px;
     background-color: var(--bgColor-default);
-    /* stylelint-disable-next-line primer/colors */
-    border-right: var(--borderWidth-thin) solid var(--bgColor-default);
     border-radius: var(--borderRadius-small);
     transition: margin 0.1s ease-in-out;
   }
@@ -4999,7 +5022,6 @@ a.tabnav-extra:hover {
 
 :is(.AvatarStack-body .avatar):last-child {
       z-index: 1;
-      border-right: 0;
     }
 
 /* stylelint-disable-next-line selector-max-type */
@@ -5015,19 +5037,37 @@ a.tabnav-extra:hover {
       opacity: 0;
     }
 
-.AvatarStack-body:hover .avatar {
+/* 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);
     }
 
-.AvatarStack-body:hover .avatar:nth-child(n + 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;
     }
 
-.AvatarStack-body:hover .avatar-more {
+: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;
@@ -5061,15 +5101,11 @@ a.tabnav-extra:hover {
     flex-direction: row-reverse;
   }
 
-:is(.AvatarStack--right .AvatarStack-body):hover .avatar {
+:is(.AvatarStack--right .AvatarStack-body):hover:not([data-disable-expand]) .avatar {
       margin-right: 0;
       margin-left: var(--base-size-4);
     }
 
-:is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child) {
-      border-left: 0;
-    }
-
 .AvatarStack--right .avatar.avatar-more {
     background: var(--avatarStack-fade-bgColor-default);
   }
@@ -5087,9 +5123,6 @@ a.tabnav-extra:hover {
     margin-right: 0;
     /* stylelint-disable-next-line primer/spacing */
     margin-left: -11px;
-    border-right: 0;
-    /* stylelint-disable-next-line primer/colors */
-    border-left: var(--borderWidth-thin) solid var(--bgColor-default);
   }
 
 /* stylelint-disable primer/spacing */
@@ -5399,6 +5432,8 @@ a.tabnav-extra:hover {
 .blankslate p {
     font-size: var(--text-body-size-large);
     color: var(--fgColor-muted);
+    max-width: 56rem;
+    margin: auto;
   }
 
 /* stylelint-disable-next-line selector-max-type */
@@ -5437,6 +5472,11 @@ a.tabnav-extra:hover {
   margin-bottom: var(--base-size-4);
   font-size: var(--text-title-size-medium);
   font-weight: var(--text-title-weight-medium);
+  text-wrap: balance;
+}
+
+.blankslate-description {
+  text-wrap: balance;
 }
 
 .blankslate-action {
@@ -6733,7 +6773,7 @@ select-panel dialog::backdrop {
   font-size: var(--text-body-size-medium);
   font-weight: var(--base-text-weight-medium);
   /* stylelint-disable-next-line primer/typography */
-  line-height: var(--control-medium-lineBoxHeight);
+  line-height: var(--base-size-20);
   text-align: center;
   white-space: nowrap;
   /* stylelint-disable-next-line primer/borders */
@@ -6744,7 +6784,6 @@ select-panel dialog::backdrop {
 .State,
 .State--draft {
   color: var(--fgColor-onEmphasis);
-  /* stylelint-disable-next-line primer/colors */
   background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));
   border: var(--borderWidth-thin) solid transparent;
   box-shadow: var(--boxShadow-thin) var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis));
@@ -6940,7 +6979,8 @@ select-panel dialog::backdrop {
 .TimelineItem-body {
   min-width: 0;
   max-width: 100%;
-  margin-top: var(--base-size-4);
+  /* stylelint-disable-next-line primer/spacing */
+  margin-top: calc(var(--base-size-4) + 1px);
   color: var(--fgColor-muted);
   flex: auto;
 }
@@ -7073,6 +7113,47 @@ select-panel dialog::backdrop {
 
 /* OP specifics */
 
+/* stylelint-disable selector-max-type, selector-max-specificity */
+
+/* Type selectors are required for the avatar-fallback custom element wrapper.
+   Specificity overrides are needed to properly style nested avatar stacking. */
+
+/* OpenProject AvatarStack - styles for avatar-fallback wrapper elements */
+
+/* Make avatar-fallback invisible to layout - inner img acts as direct child */
+
+.AvatarStack-body avatar-fallback {
+    display: contents;
+  }
+
+/*
+   * Z-index stacking for avatars inside avatar-fallback wrappers.
+   * The base CSS uses .avatar:first-child/:last-child but those selectors
+   * don't match when .avatar is inside avatar-fallback (not a direct child).
+   */
+
+.AvatarStack-body avatar-fallback:first-child .avatar {
+    z-index: 3;
+  }
+
+.AvatarStack-body avatar-fallback:nth-child(2) .avatar {
+    z-index: 2;
+  }
+
+/* Hide 4th+ wrapped avatars */
+
+.AvatarStack-body avatar-fallback:nth-child(n + 4) {
+    display: none;
+    opacity: 0;
+  }
+
+/* Show all on hover/focus */
+
+:is(.AvatarStack-body:hover:not([data-disable-expand]),.AvatarStack-body:focus-within:not([data-disable-expand])) avatar-fallback:nth-child(n + 4) {
+      display: contents;
+      opacity: 1;
+    }
+
 /* OP PageHeader */
 
 .PageHeader {
@@ -7145,6 +7226,39 @@ select-panel dialog::backdrop {
   justify-content: flex-end;
   display: flex;
   align-items: center;
+  color: var(--fgColor-default);
+}
+
+/* OpenProject legacy form markup inside header actions: match Primer / dark theme */
+
+.PageHeader-actions .form--label {
+  color: var(--fgColor-muted);
+  min-width: 0;
+  max-width: none;
+  flex-grow: 0;
+  padding: 0;
+  margin: 0;
+  white-space: nowrap;
+  font-size: var(--text-body-size-medium);
+  line-height: var(--control-medium-lineBoxHeight);
+}
+
+.PageHeader-actions select.form--select {
+  color: var(--fgColor-default);
+  background-color: var(--control-bgColor-rest);
+  border-color: var(--borderColor-default);
+}
+
+.PageHeader-actions select.form--select:focus,
+.PageHeader-actions select.form--select:active {
+  border-color: var(--fgColor-accent);
+  outline: none;
+}
+
+.PageHeader-actions select.form--select option,
+.PageHeader-actions select.form--select optgroup {
+  background-color: var(--bgColor-default);
+  color: var(--fgColor-default);
 }
 
 .PageHeader-breadcrumbs {
@@ -7161,6 +7275,24 @@ select-panel dialog::backdrop {
   flex: 1 1 auto;
 }
 
+/* Hide the context bar on desktop when no breadcrumb is visible */
+
+@media screen and (min-width: 543.98px) {
+  .PageHeader--noBreadcrumb .PageHeader-contextBar {
+    display: none;
+  }
+}
+
+/* Match the title bar and actions height with the toggle menu button for proper vertical alignment */
+
+.PageHeader--noBreadcrumb .PageHeader-titleBar {
+    line-height: var(--control-small-size);
+  }
+
+.PageHeader--noBreadcrumb .PageHeader-actions {
+    height: var(--control-small-size);
+  }
+
 /* CSS for DragHandle  */
 
 .DragHandle {
@@ -7232,6 +7364,49 @@ select-panel dialog::backdrop {
         max-width: min(960px, 100vw - 2rem);
     }
 
+.InlineMessage {
+  display: grid;
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--inline-message-fontSize);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--inline-message-lineHeight);
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--inline-message-fgColor);
+  column-gap: 0.5rem;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+}
+
+.InlineMessage[data-size='small'] {
+    --inline-message-fontSize: var(--text-body-size-small);
+    --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
+  }
+
+.InlineMessage[data-size='medium'] {
+    --inline-message-fontSize: var(--text-body-size-medium);
+    --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
+  }
+
+.InlineMessage[data-variant='warning'] {
+    --inline-message-fgColor: var(--fgColor-attention);
+  }
+
+.InlineMessage[data-variant='critical'] {
+    --inline-message-fgColor: var(--fgColor-danger);
+  }
+
+.InlineMessage[data-variant='success'] {
+    --inline-message-fgColor: var(--fgColor-success);
+  }
+
+.InlineMessage[data-variant='unavailable'] {
+    --inline-message-fgColor: var(--fgColor-muted);
+  }
+
+.InlineMessageIcon {
+  min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
+}
+
 /* CSS for SubHeader  */
 
 .SubHeader {
@@ -7345,23 +7520,85 @@ select-panel dialog::backdrop {
 /* CSS for BorderBox::CollapsibleHeader  */
 
 .CollapsibleHeader {
-    cursor: pointer;
-    display: flex;
-    align-items: center;
+  display: block;
+  container-name: collapsible-header-container;
+  container-type: inline-size;
 }
 
 .Box:has(.CollapsibleHeader--collapsed) {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    border-bottom-width: var(--borderWidth-thicker);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-width: var(--borderWidth-thicker);
 }
 
-.Box:has(.CollapsibleHeader--collapsed) .Box-row,.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer {
-        display: none;
-    }
+.Box:has(.CollapsibleHeader--collapsed) .Box-list,.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer {
+    display: none;
+  }
+
+.CollapsibleHeader-triggerArea {
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  column-gap: var(--stack-gap-normal);
+  row-gap: var(--base-size-4);
+  overflow: hidden;
+}
 
-.CollapsibleHeader--triggerArea {
+.CollapsibleHeader > .CollapsibleHeader-triggerArea {
+    flex: 1;
+  }
+
+@container collapsible-header-container (width < 544px) {
+  .CollapsibleHeader-triggerArea {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {
+    display: none;
+  }
+
+  .CollapsibleHeader-description {
+    width: 100%;
+  }
+}
+
+.CollapsibleHeader--multi-line .CollapsibleHeader-triggerArea {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+.CollapsibleHeader--multi-line.CollapsibleHeader[data-collapsed] .CollapsibleHeader-description {
+    display: none;
+  }
+
+.CollapsibleHeader--multi-line .CollapsibleHeader-description {
+    overflow: visible;
+    text-overflow: initial;
+    white-space: normal;
     width: 100%;
+  }
+
+.CollapsibleHeader-title-line {
+  flex-basis: 66%;
+  display: flex;
+  align-items: center;
+  gap: var(--stack-gap-condensed);
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.CollapsibleHeader-description {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  -webkit-user-select: text;
+          user-select: text;
 }
 
 /* CSS for CollapsibleSection  */
@@ -7369,3 +7606,91 @@ select-panel dialog::backdrop {
 .CollapsibleSection--triggerArea {
     cursor: pointer;
 }
+
+.Page {
+  min-width: var(--base-size-32);
+  height: var(--base-size-32);
+  padding: var(--base-size-8) var(--base-size-6);
+  margin-right: var(--base-size-4);
+  color: var(--fgColor-default);
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  border-radius: var(--borderRadius-medium,.375rem);
+  transition: background-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.Page[rel='prev'] > svg,
+.Page[rel='next'] > svg {
+  height: var(--base-size-16);
+  width: var(--base-size-16);
+}
+
+.Page[rel='prev'] > svg {
+  margin-inline-end: var(--base-size-4);
+}
+
+.Page[rel='next'] > svg {
+  margin-inline-start: var(--base-size-4);
+}
+
+.Page:last-child {
+  margin-right: 0;
+}
+
+.Page:hover,
+.Page:focus {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: var(--control-transparent-bgColor-hover);
+  outline: 0;
+  transition-duration: 0.1s;
+}
+
+.Page:focus-visible {
+  outline: 2px solid var(--bgColor-accent-emphasis);
+}
+
+.Page:active {
+  border-color: var(--borderColor-muted);
+}
+
+.Page[rel='prev'],
+.Page[rel='next'] {
+  color: var(--fgColor-accent);
+}
+
+.Page[aria-current],
+.Page[aria-current]:hover {
+  color: var(--fgColor-onEmphasis);
+  background-color: var(--bgColor-accent-emphasis);
+  border-color: transparent;
+}
+
+.Page[aria-current]:focus-visible {
+  outline: 2px solid var(--bgColor-accent-emphasis);
+  box-shadow: inset 0 0 0 var(--base-size-2) var(--fgColor-onEmphasis);
+}
+
+.Page[aria-hidden],
+.Page[aria-hidden]:hover,
+.Page[role='presentation'],
+.Page[role='presentation']:hover {
+  color: var(--fgColor-disabled);
+  cursor: default;
+  background-color: transparent;
+}
+
+.PaginationContainer {
+  margin: var(--base-size-16) 0;
+  text-align: center;
+}
+
+@media (max-width: 543.98px){
+  .Page:not([rel='prev']):not([rel='next']) {
+    display: none;
+  }
+}