@mixtint/primer-view-components 0.72.0

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

@@ -0,0 +1,131 @@
+/* autocomplete */
+
+/* This file can be deprecated when AutoComplete is upstreamed to PVC + rolled out to dotcom https://github.com/github/primer/issues/796
+** 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;
+    margin-bottom: var(--base-size-6);
+  }
+}
+
+/* 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);
+
+    border-color: var(--focus-outlineColor);
+
+    outline: none;
+
+    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;
+  z-index: 99;
+  width: max-content;
+  min-width: 100%;
+  max-height: 20em;
+  overflow-y: auto;
+  font-size: var(--text-codeBlock-size);
+  list-style: none;
+  background: var(--overlay-bgColor);
+  border: var(--borderWidth-thin) solid var(--borderColor-default);
+  border-radius: var(--borderRadius-medium);
+  box-shadow: var(--shadow-resting-medium);
+}
+
+/* One of the items that appears within an autocomplete group
+** Bold black text on white background */
+
+.autocomplete-item {
+  display: block;
+  width: 100%;
+  padding: var(--base-size-4) var(--base-size-8);
+  overflow: hidden;
+  font-weight: var(--base-text-weight-semibold);
+  color: var(--fgColor-default);
+  text-align: left;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: var(--overlay-bgColor);
+  border: 0;
+}
+
+.autocomplete-item:hover {
+    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 */
+  }
+
+.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

@@ -0,0 +1,21 @@
+{
+  "name": "alpha/auto_complete",
+  "selectors": [
+    ".autocomplete-label-stacked",
+    ".autocomplete-label-inline",
+    ".autocomplete-body",
+    ".autocomplete-embedded-icon-wrap",
+    ".autocomplete-embedded-icon-wrap:focus-within",
+    ".autocomplete-embedded-icon-wrap .form-control",
+    ":is(.autocomplete-embedded-icon-wrap .form-control):focus",
+    ":is(.autocomplete-embedded-icon-wrap .form-control):focus-visible",
+    ".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) *"
+  ]
+}

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

@@ -0,0 +1,146 @@
+/* Banner alert */
+
+.Banner {
+  position: relative;
+  display: grid;
+  padding: var(--base-size-8);
+  color: var(--fgColor-default);
+  background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));
+  border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);
+  border-radius: var(--borderRadius-medium);
+  grid-auto-flow: column;
+  grid-template-areas: 'visual message actions close';
+  grid-template-columns: min-content 1fr minmax(0, auto) min-content;
+  grid-template-rows: min-content;
+
+  /* `sm` breakpoint variation */
+}
+
+@media (max-width: 543.98px) {
+
+.Banner {
+    grid-template-areas:
+      'visual message close'
+      '. actions actions';
+    grid-template-columns: min-content 1fr min-content;
+    grid-template-rows: min-content min-content;
+}
+
+    .Banner .Banner-actions {
+      margin: var(--base-size-8) 0 0 var(--base-size-8);
+    }
+  }
+
+/* Elements */
+
+.Banner .Banner-visual {
+    display: grid;
+    padding: var(--base-size-6) var(--base-size-8);
+    grid-area: visual;
+    align-self: start;
+  }
+
+:is(.Banner .Banner-visual) > .octicon {
+      margin-block: calc(var(--base-size-4) / 2);
+    }
+
+:is(.Banner .Banner-visual) > * {
+      align-self: center;
+    }
+
+.Banner .Banner-message {
+    padding: var(--base-size-6) var(--base-size-8);
+    grid-area: message;
+    align-self: center;
+
+    /* stylelint-disable-next-line selector-max-type */
+  }
+
+:is(.Banner .Banner-message) p:last-child {
+      margin-bottom: 0;
+    }
+
+:is(.Banner .Banner-message) .Banner-title:not(:only-child) {
+      margin-bottom: 0;
+      font-weight: var(--base-text-weight-semibold);
+    }
+
+.Banner .Banner-actions {
+    grid-area: actions;
+  }
+
+:is(.Banner .Banner-actions):last-child {
+      align-self: center;
+    }
+
+/* is this used anywhere? could not find any use, but unsure */
+
+.Banner .Banner-close {
+    grid-area: close;
+    /* stylelint-disable-next-line primer/spacing */
+    margin-left: var(--controlStack-medium-gap-condensed);
+  }
+
+.Banner .Banner-visual .octicon {
+    color: var(--fgColor-accent);
+  }
+
+.Banner.Banner--warning {
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));
+    border-color: var(--borderColor-attention-muted);
+  }
+
+.Banner.Banner--warning .Banner-visual .octicon {
+      color: var(--fgColor-attention);
+    }
+
+.Banner.Banner--error {
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));
+    border-color: var(--borderColor-danger-muted);
+  }
+
+.Banner.Banner--error .Banner-visual .octicon {
+      color: var(--fgColor-danger);
+    }
+
+.Banner.Banner--success {
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));
+    border-color: var(--borderColor-success-muted);
+  }
+
+.Banner.Banner--success .Banner-visual .octicon {
+      color: var(--fgColor-success);
+    }
+
+.Banner.Banner--upsell {
+    color: var(--fgColor-default);
+    background-image: linear-gradient(var(--bgColor-done-muted), var(--bgColor-done-muted));
+    border-color: var(--borderColor-done-muted);
+  }
+
+.Banner.Banner--upsell .Banner-visual .octicon {
+      color: var(--fgColor-done);
+    }
+
+/* Full-width */
+
+.Banner.Banner--full {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-top: calc(var(--borderWidth-thin) * -1);
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+
+@media (max-width: 767.98px) {
+    .Banner.Banner--full-whenNarrow {
+      /* stylelint-disable-next-line primer/spacing */
+      margin-top: calc(var(--borderWidth-thin) * -1);
+      border-right: 0;
+      border-left: 0;
+      border-radius: 0;
+    }
+  }

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

@@ -0,0 +1,26 @@
+{
+  "name": "alpha/banner",
+  "selectors": [
+    ".Banner",
+    ".Banner .Banner-actions",
+    ".Banner .Banner-visual",
+    ":is(.Banner .Banner-visual) > .octicon",
+    ":is(.Banner .Banner-visual) > *",
+    ".Banner .Banner-message",
+    ":is(.Banner .Banner-message) p:last-child",
+    ":is(.Banner .Banner-message) .Banner-title:not(:only-child)",
+    ":is(.Banner .Banner-actions):last-child",
+    ".Banner .Banner-close",
+    ".Banner .Banner-visual .octicon",
+    ".Banner.Banner--warning",
+    ".Banner.Banner--warning .Banner-visual .octicon",
+    ".Banner.Banner--error",
+    ".Banner.Banner--error .Banner-visual .octicon",
+    ".Banner.Banner--success",
+    ".Banner.Banner--success .Banner-visual .octicon",
+    ".Banner.Banner--upsell",
+    ".Banner.Banner--upsell .Banner-visual .octicon",
+    ".Banner.Banner--full",
+    ".Banner.Banner--full-whenNarrow"
+  ]
+}

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

@@ -0,0 +1,183 @@
+.btn-mktg {
+  position: relative;
+  z-index: 1;
+  display: inline-block;
+
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 0.9rem 1.5rem 1.1rem;
+
+  /* stylelint-disable-next-line primer/typography */
+  font-size: 1rem;
+  font-weight: var(--base-text-weight-semibold);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: 1;
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--bgColor-default);
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: middle;
+  -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%),
+    var(--color-mktg-btn-bg) !important;
+  border: 0;
+
+  /* stylelint-disable-next-line primer/borders */
+  border-radius: 0.375rem;
+  transition: box-shadow 0.2s, outline 0.2s ease;
+  appearance: none !important;
+}
+
+.btn-mktg::before {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: -1;
+    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;
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity 0.2s;
+    background-blend-mode: normal;
+  }
+
+.btn-mktg:hover {
+    -webkit-text-decoration: none;
+    text-decoration: none;
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: var(--color-mktg-btn-shadow-hover) !important;
+  }
+
+:is(.btn-mktg:hover,.btn-mktg:focus,.btn-mktg:focus-visible,.btn-mktg.focus)::before {
+      opacity: 1;
+    }
+
+/* fallback :focus state */
+
+.btn-mktg:focus {
+    outline: 2px solid var(--focus-outlineColor);
+    outline-offset: 2px;
+    box-shadow: none;
+
+    /* remove fallback :focus if :focus-visible is supported */
+  }
+
+.btn-mktg:focus:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+
+/* default focus state */
+
+.btn-mktg:focus-visible {
+    outline: 2px solid var(--focus-outlineColor);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+.btn-mktg:active::before {
+      opacity: 0.5 !important;
+    }
+
+.btn-mktg.disabled,.btn-mktg[disabled] {
+    pointer-events: none;
+    cursor: default;
+    opacity: 0.5;
+  }
+
+.btn-muted-mktg {
+  color: var(--fgColor-default) !important;
+  background: none !important;
+  /* stylelint-disable-next-line primer/box-shadow */
+  box-shadow: var(--color-mktg-btn-shadow-outline);
+}
+
+.btn-muted-mktg::before {
+    display: none;
+  }
+
+.btn-muted-mktg:hover {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+
+.btn-muted-mktg:active {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: var(--fgColor-default) 0 0 0 3px inset !important;
+  }
+
+.btn-muted-mktg:disabled {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: var(--fgColor-default) 0 0 0 1px inset !important;
+  }
+
+.btn-subtle-mktg {
+  color: var(--fgColor-default) !important;
+  background: none !important;
+  box-shadow: none !important;
+}
+
+.btn-subtle-mktg::before {
+    background: none !important;
+  }
+
+.btn-subtle-mktg:hover {
+    /* stylelint-disable-next-line primer/box-shadow */
+    box-shadow: var(--color-mktg-btn-shadow-hover-muted) !important;
+  }
+
+.btn-signup-mktg {
+  /* stylelint-disable-next-line primer/colors */
+  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;
+}
+
+.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;
+  }
+
+/* fallback :focus state */
+
+.btn-signup-mktg:focus {
+    outline: 2px solid var(--focus-outlineColor);
+    outline-offset: 2px;
+    box-shadow: none;
+
+    /* remove fallback :focus if :focus-visible is supported */
+  }
+
+.btn-signup-mktg:focus:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+
+/* default focus state */
+
+.btn-signup-mktg:focus-visible {
+    outline: 2px solid var(--focus-outlineColor);
+    outline-offset: 2px;
+    box-shadow: none;
+  }
+
+/* Size modifiers */
+
+.btn-small-mktg {
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 0.625rem 1rem 0.8125rem;
+}
+
+.btn-large-mktg {
+  /* stylelint-disable-next-line primer/spacing */
+  padding: 16px 30px 20px !important;
+
+  /* stylelint-disable-next-line primer/typography */
+  font-size: 1.25rem;
+}

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

@@ -0,0 +1,30 @@
+{
+  "name": "alpha/button_marketing",
+  "selectors": [
+    ".btn-mktg",
+    ".btn-mktg::before",
+    ".btn-mktg:hover",
+    ":is(.btn-mktg:hover,.btn-mktg:focus,.btn-mktg:focus-visible,.btn-mktg.focus)::before",
+    ".btn-mktg:focus",
+    ".btn-mktg:focus:not(:focus-visible)",
+    ".btn-mktg:focus-visible",
+    ".btn-mktg:active::before",
+    ".btn-mktg.disabled",
+    ".btn-mktg[disabled]",
+    ".btn-muted-mktg",
+    ".btn-muted-mktg::before",
+    ".btn-muted-mktg:hover",
+    ".btn-muted-mktg:active",
+    ".btn-muted-mktg:disabled",
+    ".btn-subtle-mktg",
+    ".btn-subtle-mktg::before",
+    ".btn-subtle-mktg:hover",
+    ".btn-signup-mktg",
+    ".btn-signup-mktg::before",
+    ".btn-signup-mktg:focus",
+    ".btn-signup-mktg:focus:not(:focus-visible)",
+    ".btn-signup-mktg:focus-visible",
+    ".btn-small-mktg",
+    ".btn-large-mktg"
+  ]
+}