@mixtint/primer-view-components 0.72.0

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

@@ -0,0 +1,36 @@
+@keyframes shimmer {
+  from {
+    mask-position: 200%;
+  }
+
+  to {
+    mask-position: 0%;
+  }
+}
+
+.SkeletonBox {
+  display: block;
+  height: 1rem;
+  background-color: var(--bgColor-muted);
+  border-radius: var(--borderRadius-small);
+  animation: shimmer;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+
+.SkeletonBox {
+    mask-image: linear-gradient(75deg, #000 30%, rgb(0, 0, 0, 0.65) 80%);
+    mask-size: 200%;
+    animation: shimmer;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+}
+  }
+
+@media (forced-colors: active) {
+
+.SkeletonBox {
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+}
+  }

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

@@ -0,0 +1,6 @@
+{
+  "name": "alpha/skeleton_box",
+  "selectors": [
+    ".SkeletonBox"
+  ]
+}

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

@@ -0,0 +1,266 @@
+.Stack {
+  display: flex;
+  flex-flow: column;
+  align-items: stretch;
+  align-content: flex-start;
+  gap: var(--stack-gap, var(--stack-gap-normal, 1rem));
+
+  /* non-responsive values */
+}
+.Stack[data-padding='none'],.Stack[data-padding-narrow='none'] {
+    padding: 0;
+  }
+.Stack[data-padding='condensed'],.Stack[data-padding-narrow='condensed'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-condensed, 8px);
+  }
+.Stack[data-padding='normal'],.Stack[data-padding-narrow='normal'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-normal, 16px);
+  }
+.Stack[data-padding='spacious'],.Stack[data-padding-narrow='spacious'] {
+    /* stylelint-disable-next-line primer/spacing */
+    padding: var(--stack-padding-spacious, 24px);
+  }
+.Stack[data-direction='horizontal'],.Stack[data-direction-narrow='horizontal'] {
+    flex-flow: row;
+  }
+.Stack[data-direction='vertical'],.Stack[data-direction-narrow='vertical'] {
+    flex-flow: column;
+  }
+.Stack[data-gap='none'],.Stack[data-gap-narrow='none'] {
+    --stack-gap: var(--stack-gap-none, 0);
+  }
+.Stack[data-gap='condensed'],.Stack[data-gap-narrow='condensed'] {
+    --stack-gap: var(--stack-gap-condensed, 0.5rem);
+  }
+.Stack[data-gap='normal'],.Stack[data-gap-narrow='normal'] {
+    --stack-gap: var(--stack-gap-normal, 1rem);
+  }
+.Stack[data-gap='spacious'],.Stack[data-gap-narrow='spacious'] {
+    --stack-gap: var(--stack-gap-spacious, 1.5rem);
+  }
+.Stack[data-align='start'],.Stack[data-align-narrow='start'] {
+    align-items: flex-start;
+  }
+.Stack[data-align='center'],.Stack[data-align-narrow='center'] {
+    align-items: center;
+  }
+.Stack[data-align='end'],.Stack[data-align-narrow='end'] {
+    align-items: flex-end;
+  }
+.Stack[data-align='baseline'],.Stack[data-align-narrow='baseline'] {
+    align-items: baseline;
+  }
+.Stack[data-justify='start'],.Stack[data-justify-narrow='start'] {
+    justify-content: flex-start;
+  }
+.Stack[data-justify='center'],.Stack[data-justify-narrow='center'] {
+    justify-content: center;
+  }
+.Stack[data-justify='end'],.Stack[data-justify-narrow='end'] {
+    justify-content: flex-end;
+  }
+.Stack[data-justify='space-between'],.Stack[data-justify-narrow='space-between'] {
+    justify-content: space-between;
+  }
+.Stack[data-justify='space-evenly'],.Stack[data-justify-narrow='space-evenly'] {
+    justify-content: space-evenly;
+  }
+.Stack[data-wrap='wrap'],.Stack[data-wrap-narrow='wrap'] {
+    flex-wrap: wrap;
+  }
+.Stack[data-wrap='nowrap'],.Stack[data-wrap-narrow='nowrap'] {
+    flex-wrap: nowrap;
+  }
+.Stack[data-wrap='reverse'],.Stack[data-wrap-narrow='reverse'] {
+    flex-wrap: wrap-reverse;
+  }
+
+/* @custom-media --veiwportRange-regular */
+@media (min-width: 48rem) {
+    .Stack[data-padding-regular='none'] {
+      padding: 0;
+    }
+
+    .Stack[data-padding-regular='condensed'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-condensed, 8px);
+    }
+
+    .Stack[data-padding-regular='normal'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-normal, 16px);
+    }
+
+    .Stack[data-padding-regular='spacious'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-spacious, 24px);
+    }
+
+    .Stack[data-direction-regular='horizontal'] {
+      flex-flow: row;
+    }
+
+    .Stack[data-direction-regular='vertical'] {
+      flex-flow: column;
+    }
+
+    .Stack[data-gap-regular='none'] {
+      --stack-gap: var(--stack-gap-none, 0);
+    }
+
+    .Stack[data-gap-regular='condensed'] {
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
+    }
+
+    .Stack[data-gap-regular='normal'] {
+      --stack-gap: var(--stack-gap-normal, 1rem);
+    }
+
+    .Stack[data-gap-regular='spacious'] {
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
+    }
+
+    .Stack[data-align-regular='start'] {
+      align-items: flex-start;
+    }
+
+    .Stack[data-align-regular='center'] {
+      align-items: center;
+    }
+
+    .Stack[data-align-regular='end'] {
+      align-items: flex-end;
+    }
+
+    .Stack[data-align-regular='baseline'] {
+      align-items: baseline;
+    }
+
+    .Stack[data-justify-regular='start'] {
+      justify-content: flex-start;
+    }
+
+    .Stack[data-justify-regular='center'] {
+      justify-content: center;
+    }
+
+    .Stack[data-justify-regular='end'] {
+      justify-content: flex-end;
+    }
+
+    .Stack[data-justify-regular='space-between'] {
+      justify-content: space-between;
+    }
+
+    .Stack[data-justify-regular='space-evenly'] {
+      justify-content: space-evenly;
+    }
+
+    .Stack[data-wrap-regular='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    .Stack[data-wrap-regular='nowrap'] {
+      flex-wrap: nowrap;
+    }
+
+    .Stack[data-wrap-regular='reverse'] {
+      flex-wrap: wrap-reverse;
+    }
+  }
+
+/* @custom-media --viewportRange-wide */
+@media (min-width: 87.5rem) {
+    .Stack[data-padding-wide='none'] {
+      padding: 0;
+    }
+
+    .Stack[data-padding-wide='condensed'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-condensed, 8px);
+    }
+
+    .Stack[data-padding-wide='normal'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-normal, 16px);
+    }
+
+    .Stack[data-padding-wide='spacious'] {
+      /* stylelint-disable-next-line primer/spacing */
+      padding: var(--stack-padding-spacious, 24px);
+    }
+
+    .Stack[data-direction-wide='horizontal'] {
+      flex-flow: row;
+    }
+
+    .Stack[data-direction-wide='vertical'] {
+      flex-flow: column;
+    }
+
+    .Stack[data-gap-wide='none'] {
+      --stack-gap: var(--stack-gap-none, 0);
+    }
+
+    .Stack[data-gap-wide='condensed'] {
+      --stack-gap: var(--stack-gap-condensed, 0.5rem);
+    }
+
+    .Stack[data-gap-wide='normal'] {
+      --stack-gap: var(--stack-gap-normal, 1rem);
+    }
+
+    .Stack[data-gap-wide='spacious'] {
+      --stack-gap: var(--stack-gap-spacious, 1.5rem);
+    }
+
+    .Stack[data-align-wide='start'] {
+      align-items: flex-start;
+    }
+
+    .Stack[data-align-wide='center'] {
+      align-items: center;
+    }
+
+    .Stack[data-align-wide='end'] {
+      align-items: flex-end;
+    }
+
+    .Stack[data-align-wide='baseline'] {
+      align-items: baseline;
+    }
+
+    .Stack[data-justify-wide='start'] {
+      justify-content: flex-start;
+    }
+
+    .Stack[data-justify-wide='center'] {
+      justify-content: center;
+    }
+
+    .Stack[data-justify-wide='end'] {
+      justify-content: flex-end;
+    }
+
+    .Stack[data-justify-wide='space-between'] {
+      justify-content: space-between;
+    }
+
+    .Stack[data-justify-wide='space-evenly'] {
+      justify-content: space-evenly;
+    }
+
+    .Stack[data-wrap-wide='wrap'] {
+      flex-wrap: wrap;
+    }
+
+    .Stack[data-wrap-wide='nowrap'] {
+      flex-wrap: nowrap;
+    }
+
+    .Stack[data-wrap-wide='reverse'] {
+      flex-wrap: wrap-reverse;
+    }
+  }

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

@@ -0,0 +1,94 @@
+{
+  "name": "alpha/stack",
+  "selectors": [
+    ".Stack",
+    ".Stack[data-padding='none']",
+    ".Stack[data-padding-narrow='none']",
+    ".Stack[data-padding='condensed']",
+    ".Stack[data-padding-narrow='condensed']",
+    ".Stack[data-padding='normal']",
+    ".Stack[data-padding-narrow='normal']",
+    ".Stack[data-padding='spacious']",
+    ".Stack[data-padding-narrow='spacious']",
+    ".Stack[data-direction='horizontal']",
+    ".Stack[data-direction-narrow='horizontal']",
+    ".Stack[data-direction='vertical']",
+    ".Stack[data-direction-narrow='vertical']",
+    ".Stack[data-gap='none']",
+    ".Stack[data-gap-narrow='none']",
+    ".Stack[data-gap='condensed']",
+    ".Stack[data-gap-narrow='condensed']",
+    ".Stack[data-gap='normal']",
+    ".Stack[data-gap-narrow='normal']",
+    ".Stack[data-gap='spacious']",
+    ".Stack[data-gap-narrow='spacious']",
+    ".Stack[data-align='start']",
+    ".Stack[data-align-narrow='start']",
+    ".Stack[data-align='center']",
+    ".Stack[data-align-narrow='center']",
+    ".Stack[data-align='end']",
+    ".Stack[data-align-narrow='end']",
+    ".Stack[data-align='baseline']",
+    ".Stack[data-align-narrow='baseline']",
+    ".Stack[data-justify='start']",
+    ".Stack[data-justify-narrow='start']",
+    ".Stack[data-justify='center']",
+    ".Stack[data-justify-narrow='center']",
+    ".Stack[data-justify='end']",
+    ".Stack[data-justify-narrow='end']",
+    ".Stack[data-justify='space-between']",
+    ".Stack[data-justify-narrow='space-between']",
+    ".Stack[data-justify='space-evenly']",
+    ".Stack[data-justify-narrow='space-evenly']",
+    ".Stack[data-wrap='wrap']",
+    ".Stack[data-wrap-narrow='wrap']",
+    ".Stack[data-wrap='nowrap']",
+    ".Stack[data-wrap-narrow='nowrap']",
+    ".Stack[data-wrap='reverse']",
+    ".Stack[data-wrap-narrow='reverse']",
+    ".Stack[data-padding-regular='none']",
+    ".Stack[data-padding-regular='condensed']",
+    ".Stack[data-padding-regular='normal']",
+    ".Stack[data-padding-regular='spacious']",
+    ".Stack[data-direction-regular='horizontal']",
+    ".Stack[data-direction-regular='vertical']",
+    ".Stack[data-gap-regular='none']",
+    ".Stack[data-gap-regular='condensed']",
+    ".Stack[data-gap-regular='normal']",
+    ".Stack[data-gap-regular='spacious']",
+    ".Stack[data-align-regular='start']",
+    ".Stack[data-align-regular='center']",
+    ".Stack[data-align-regular='end']",
+    ".Stack[data-align-regular='baseline']",
+    ".Stack[data-justify-regular='start']",
+    ".Stack[data-justify-regular='center']",
+    ".Stack[data-justify-regular='end']",
+    ".Stack[data-justify-regular='space-between']",
+    ".Stack[data-justify-regular='space-evenly']",
+    ".Stack[data-wrap-regular='wrap']",
+    ".Stack[data-wrap-regular='nowrap']",
+    ".Stack[data-wrap-regular='reverse']",
+    ".Stack[data-padding-wide='none']",
+    ".Stack[data-padding-wide='condensed']",
+    ".Stack[data-padding-wide='normal']",
+    ".Stack[data-padding-wide='spacious']",
+    ".Stack[data-direction-wide='horizontal']",
+    ".Stack[data-direction-wide='vertical']",
+    ".Stack[data-gap-wide='none']",
+    ".Stack[data-gap-wide='condensed']",
+    ".Stack[data-gap-wide='normal']",
+    ".Stack[data-gap-wide='spacious']",
+    ".Stack[data-align-wide='start']",
+    ".Stack[data-align-wide='center']",
+    ".Stack[data-align-wide='end']",
+    ".Stack[data-align-wide='baseline']",
+    ".Stack[data-justify-wide='start']",
+    ".Stack[data-justify-wide='center']",
+    ".Stack[data-justify-wide='end']",
+    ".Stack[data-justify-wide='space-between']",
+    ".Stack[data-justify-wide='space-evenly']",
+    ".Stack[data-wrap-wide='wrap']",
+    ".Stack[data-wrap-wide='nowrap']",
+    ".Stack[data-wrap-wide='reverse']"
+  ]
+}

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

@@ -0,0 +1,27 @@
+.StackItem {
+  flex: 0 1 auto;
+  min-inline-size: 0;
+}
+.StackItem[data-grow='true'],.StackItem[data-grow-narrow='true'] {
+    flex-grow: 1;
+  }
+/* @custom-media --veiwportRange-regular */
+@media (min-width: 48rem) {
+    .StackItem[data-grow-regular='true'] {
+      flex-grow: 1;
+    }
+
+    .StackItem[data-grow-regular='false'] {
+      flex-grow: 0;
+    }
+  }
+/* @custom-media --viewportRange-wide */
+@media (min-width: 87.5rem) {
+    .StackItem[data-grow-wide='true'] {
+      flex-grow: 1;
+    }
+
+    .StackItem[data-grow-wide='false'] {
+      flex-grow: 0;
+    }
+  }

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

@@ -0,0 +1,12 @@
+{
+  "name": "alpha/stack_item",
+  "selectors": [
+    ".StackItem",
+    ".StackItem[data-grow='true']",
+    ".StackItem[data-grow-narrow='true']",
+    ".StackItem[data-grow-regular='true']",
+    ".StackItem[data-grow-regular='false']",
+    ".StackItem[data-grow-wide='true']",
+    ".StackItem[data-grow-wide='false']"
+  ]
+}

package/app/components/primer/alpha/tab_container.d.ts

@@ -0,0 +1 @@
+import '@github/tab-container-element';

package/app/components/primer/alpha/tab_container.js

@@ -0,0 +1 @@
+import '@github/tab-container-element';

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

@@ -0,0 +1,112 @@
+/* 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);
+}
+
+.tabnav-tabs {
+  display: flex;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-bottom: calc(var(--borderWidth-thin) * -1);
+  overflow: hidden;
+}
+
+.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 */
+  line-height: 23px;
+  color: var(--fgColor-muted);
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  background-color: transparent;
+  border: var(--borderWidth-thin) solid transparent;
+  border-bottom: 0;
+  transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
+}
+
+.tabnav-tab.selected,.tabnav-tab[aria-selected='true'],.tabnav-tab[aria-current]:not([aria-current='false']) {
+    color: var(--fgColor-default);
+    background-color: var(--bgColor-default); /* cover bottom border */
+    border-color: var(--borderColor-default);
+    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;
+  }
+
+:is(.tabnav-tab.selected,.tabnav-tab[aria-selected='true'],.tabnav-tab[aria-current]:not([aria-current='false'])) .octicon {
+      color: inherit;
+    }
+
+.tabnav-tab:hover {
+    color: var(--fgColor-default);
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    transition-duration: 0.1s;
+  }
+
+.tabnav-tab:focus,.tabnav-tab:focus-visible {
+    border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;
+    outline-offset: -6px;
+  }
+
+.tabnav-tab:active {
+    color: var(--fgColor-muted);
+  }
+
+.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;
+  }
+
+/* Tabnav extras
+**
+** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're
+** inline text or links. */
+
+.tabnav-extra {
+  display: inline-block;
+  /* stylelint-disable-next-line primer/spacing */
+  padding-top: 10px;
+  /* stylelint-disable-next-line primer/spacing */
+  margin-left: 10px;
+  font-size: var(--text-body-size-small);
+  color: var(--fgColor-muted);
+}
+
+.tabnav-extra > .octicon {
+    margin-right: var(--base-size-2);
+  }
+
+/* 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;
+  text-decoration: none;
+}
+
+/* Tabnav buttons
+**
+** For when there are multiple buttons, space them out appropriately. Requires
+** the buttons to be floated or inline-block. */
+
+.tabnav-btn {
+  /* stylelint-disable-next-line primer/spacing */
+  margin-left: var(--controlStack-medium-gap-condensed);
+}

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

@@ -0,0 +1,22 @@
+{
+  "name": "alpha/tab_nav",
+  "selectors": [
+    ".tabnav",
+    ".tabnav-tabs",
+    ".tabnav-tab",
+    ".tabnav-tab.selected",
+    ".tabnav-tab[aria-selected='true']",
+    ".tabnav-tab[aria-current]:not([aria-current='false'])",
+    ":is(.tabnav-tab.selected,.tabnav-tab[aria-selected='true'],.tabnav-tab[aria-current]:not([aria-current='false'])) .octicon",
+    ".tabnav-tab:hover",
+    ".tabnav-tab:focus",
+    ".tabnav-tab:focus-visible",
+    ".tabnav-tab:active",
+    ".tabnav-tab .octicon",
+    ".tabnav-tab .Counter",
+    ".tabnav-extra",
+    ".tabnav-extra > .octicon",
+    "a.tabnav-extra:hover",
+    ".tabnav-btn"
+  ]
+}