@primer/view-components 0.45.1-rc.015a120e → 0.45.2

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

@@ -8,84 +8,84 @@
     ".ActionListWrap",
     ".ActionListWrap--inset",
     ".ActionListWrap--inset[popover]",
-    ".ActionListWrap--divided .ActionListItem-label:before",
-    ":is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline):before",
-    ":is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline) .ActionListItem-label:before",
-    ".ActionList-sectionDivider+.ActionListItem .ActionListItem-descriptionWrap--inline:before",
-    ".ActionList-sectionDivider+.ActionListItem .ActionListItem-label:before",
-    ".ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline:before",
-    ".ActionListItem:first-of-type .ActionListItem-label:before",
-    ":is(.ActionListWrap--divided .ActionListItem--navActive) .ActionListItem-label:before",
-    ":is(.ActionListWrap--divided .ActionListItem--navActive)+.ActionListItem .ActionListItem-label:before",
+    ".ActionListWrap--divided .ActionListItem-label::before",
+    ":is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline)::before",
+    ":is(.ActionListWrap--divided .ActionListItem-descriptionWrap--inline) .ActionListItem-label::before",
+    ":is(.ActionListWrap--divided .ActionListItem--navActive) .ActionListItem-label::before",
+    ":is(.ActionListWrap--divided .ActionListItem--navActive) + .ActionListItem .ActionListItem-label::before",
+    ".ActionListItem:first-of-type .ActionListItem-label::before",
+    ".ActionList-sectionDivider + .ActionListItem .ActionListItem-label::before",
+    ".ActionListItem:first-of-type .ActionListItem-descriptionWrap--inline::before",
+    ".ActionList-sectionDivider + .ActionListItem .ActionListItem-descriptionWrap--inline::before",
     ".ActionListItem",
-    ".ActionListItem:active",
     ".ActionListItem:hover",
-    ".ActionListItem:hover .ActionListItem-descriptionWrap--inline:before",
-    ".ActionListItem:hover .ActionListItem-label:before",
-    ".ActionListItem:hover+.ActionListItem .ActionListItem-descriptionWrap--inline:before",
-    ".ActionListItem:hover+.ActionListItem .ActionListItem-label:before",
-    ".ActionListItem[hidden]+.ActionList-sectionDivider",
-    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent",
-    ":is(.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover",
-    ":is(.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active",
-    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover",
-    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible)",
-    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active",
-    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem>.ActionListContent):active:not(.ActionListItem--navActive)",
-    ":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",
-    ".ActionListItem[aria-selected=true]",
-    ".ActionListItem[aria-selected=true]:hover",
-    ".ActionListItem[aria-selected=true]+.ActionListItem:before",
-    ".ActionListItem[aria-selected=true]:before",
-    ".ActionListItem[aria-selected=true]:after",
+    ".ActionListItem:active",
+    ".ActionListItem:hover .ActionListItem-label::before",
+    ".ActionListItem:hover + .ActionListItem .ActionListItem-label::before",
+    ".ActionListItem:hover .ActionListItem-descriptionWrap--inline::before",
+    ".ActionListItem:hover + .ActionListItem .ActionListItem-descriptionWrap--inline::before",
+    ".ActionListItem[hidden] + .ActionList-sectionDivider",
+    ".ActionListItem.ActionListItem--hasSubItem > .ActionListContent",
+    ":is(.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover",
+    ":is(.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active",
+    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover",
+    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):hover:not(.ActionListItem--navActive,:focus-visible)",
+    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active",
+    ":is(.ActionListItem:not(.ActionListItem--hasSubItem),.ActionListItem.ActionListItem--hasSubItem > .ActionListContent):active:not(.ActionListItem--navActive)",
+    ":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",
+    ".ActionListItem[aria-selected='true']",
+    ".ActionListItem[aria-selected='true']:hover",
+    ".ActionListItem[aria-selected='true']::before",
+    ".ActionListItem[aria-selected='true'] + .ActionListItem::before",
+    ".ActionListItem[aria-selected='true']::after",
     ".ActionListItem.ActionListItem--navActive",
     ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--subItem) .ActionListItem-label",
     ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)",
     ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):hover",
-    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)+.ActionListItem:before",
-    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):before",
-    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger):after",
-    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-description",
-    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-label",
-    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]) .ActionListContent) .ActionListItem-visual",
-    ":is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled=true]):hover",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)::before",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) + .ActionListItem::before",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)::after",
+    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-label",
+    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-description",
+    ":is(:is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']) .ActionListContent) .ActionListItem-visual",
+    ":is(.ActionListItem.ActionListItem--disabled,.ActionListItem[aria-disabled='true']):hover",
     ".ActionListItem.ActionListItem--danger .ActionListItem-label",
     ".ActionListItem.ActionListItem--danger .ActionListItem-visual",
     ".ActionListItem.ActionListItem--danger:hover",
-    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-description",
     ".ActionListItem.ActionListItem--danger:hover .ActionListItem-label",
     ".ActionListItem.ActionListItem--danger:hover .ActionListItem-visual",
+    ".ActionListItem.ActionListItem--danger:hover .ActionListItem-description",
     ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active",
-    ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-description",
     ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-label",
     ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-visual",
+    ":is(.ActionListItem.ActionListItem--danger .ActionListContent):active .ActionListItem-description",
     ".ActionListContent",
-    ".ActionListContent>:not(:last-child)",
+    ".ActionListContent > :not(:last-child)",
     ".ActionListContent:hover",
-    ".ActionListContent[aria-disabled=true] .ActionListItem-description",
-    ".ActionListContent[aria-disabled=true] .ActionListItem-label",
-    ".ActionListContent[aria-disabled=true] .ActionListItem-visual",
-    ".ActionListContent[aria-disabled=true]:hover",
-    ".ActionListContent[aria-expanded]+.ActionList--subGroup",
-    ":is(.ActionListContent[aria-expanded]+.ActionList--subGroup) .ActionListContent",
-    ":is(.ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup) .ActionListContent",
-    ":is(.ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup) .ActionListContent",
-    ":is(.ActionListContent.ActionListContent--visual24[aria-expanded]+.ActionList--subGroup) .ActionListContent",
-    ".ActionListContent[aria-expanded=true] .ActionListItem-collapseIcon",
-    ".ActionListContent[aria-expanded=true]+.ActionList--subGroup",
-    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=true]>.ActionListItem-label",
-    ".ActionListContent[aria-expanded=false] .ActionListItem-collapseIcon",
-    ".ActionListContent[aria-expanded=false]+.ActionList--subGroup",
-    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]",
-    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false] .ActionListItem-label",
-    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]+.ActionListItem:before",
-    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:before",
-    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded=false]:after",
-    ":is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox",
-    ":is(:is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .FormControl-checkbox):before",
-    ":is(.ActionListContent[aria-checked=true],.ActionListContent[aria-selected=true]) .ActionListItem-singleSelectCheckmark",
-    ":is(.ActionListContent[aria-checked=false],.ActionListContent[aria-selected=false]) .ActionListItem-singleSelectCheckmark",
+    ".ActionListContent[aria-disabled='true'] .ActionListItem-label",
+    ".ActionListContent[aria-disabled='true'] .ActionListItem-description",
+    ".ActionListContent[aria-disabled='true'] .ActionListItem-visual",
+    ".ActionListContent[aria-disabled='true']:hover",
+    ".ActionListContent[aria-expanded] + .ActionList--subGroup",
+    ":is(.ActionListContent[aria-expanded] + .ActionList--subGroup) .ActionListContent",
+    ":is(.ActionListContent.ActionListContent--visual16[aria-expanded] + .ActionList--subGroup) .ActionListContent",
+    ":is(.ActionListContent.ActionListContent--visual20[aria-expanded] + .ActionList--subGroup) .ActionListContent",
+    ":is(.ActionListContent.ActionListContent--visual24[aria-expanded] + .ActionList--subGroup) .ActionListContent",
+    ".ActionListContent[aria-expanded='true'] .ActionListItem-collapseIcon",
+    ".ActionListContent[aria-expanded='true'] + .ActionList--subGroup",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='true'] > .ActionListItem-label",
+    ".ActionListContent[aria-expanded='false'] .ActionListItem-collapseIcon",
+    ".ActionListContent[aria-expanded='false'] + .ActionList--subGroup",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false']",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] .ActionListItem-label",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false']::before",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false'] + .ActionListItem::before",
+    ".ActionListContent.ActionListContent--hasActiveSubItem[aria-expanded='false']::after",
+    ":is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .FormControl-checkbox",
+    ":is(:is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .FormControl-checkbox)::before",
+    ":is(.ActionListContent[aria-checked='true'],.ActionListContent[aria-selected='true']) .ActionListItem-singleSelectCheckmark",
+    ":is(.ActionListContent[aria-checked='false'],.ActionListContent[aria-selected='false']) .ActionListItem-singleSelectCheckmark",
     ".ActionListContent.ActionListContent--sizeLarge",
     ".ActionListContent.ActionListContent--sizeXLarge",
     ".ActionListContent.ActionListContent--blockDescription .ActionListItem-visual",
@@ -98,11 +98,11 @@
     ".ActionListItem-descriptionWrap .ActionListItem-label",
     ".ActionListItem-descriptionWrap--inline",
     ".ActionListItem-description",
-    ".ActionListItem-action",
     ".ActionListItem-visual",
+    ".ActionListItem-action",
     ".ActionListItem-label",
     ".ActionListItem-label--truncate",
-    ".ActionListItem--subItem>.ActionListContent>.ActionListItem-label",
+    ".ActionListItem--subItem > .ActionListContent > .ActionListItem-label",
     ".ActionListItem--withActions",
     ".ActionListItem-trailingAction",
     ".ActionListItem--trailingActionHover .ActionListItem-trailingAction",

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

@@ -1 +1,131 @@
-.autocomplete-label-stacked{display:block;margin-bottom:var(--base-size-6)}.autocomplete-label-inline{display:inline;margin-right:var(--base-size-6)}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:var(--base-size-6)}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:var(--base-size-4) var(--base-size-8)}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor);box-shadow:inset 0 0 0 1px var(--focus-outlineColor);outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:var(--base-size-8);padding:0}:is(.autocomplete-embedded-icon-wrap .form-control):focus,:is(.autocomplete-embedded-icon-wrap .form-control):focus-visible{box-shadow:none}.autocomplete-results{background:var(--overlay-bgColor);border:var(--borderWidth-thin) solid var(--borderColor-default);border-radius:var(--borderRadius-medium);box-shadow:var(--shadow-resting-medium);font-size:var(--text-codeBlock-size);left:0;list-style:none;max-height:20em;min-width:100%;overflow-y:auto;position:absolute;width:max-content;z-index:99}.autocomplete-item{background-color:var(--overlay-bgColor);border:0;color:var(--fgColor-default);cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold);overflow:hidden;padding:var(--base-size-4) var(--base-size-8);text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item,.autocomplete-item:hover{-webkit-text-decoration:none;text-decoration:none}.autocomplete-item:hover{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis)}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--bgColor-accent-emphasis);color:var(--fgColor-onEmphasis);-webkit-text-decoration:none;text-decoration:none}:is(.autocomplete-item.selected,.autocomplete-item[aria-selected=true],.autocomplete-item.navigation-focus) *{color:inherit!important}
+/* 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

@@ -13,9 +13,9 @@
     ".autocomplete-item",
     ".autocomplete-item:hover",
     ".autocomplete-item:hover *",
-    ".autocomplete-item.navigation-focus",
     ".autocomplete-item.selected",
-    ".autocomplete-item[aria-selected=true]",
-    ":is(.autocomplete-item.selected,.autocomplete-item[aria-selected=true],.autocomplete-item.navigation-focus) *"
+    ".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

@@ -1 +1,146 @@
-.Banner{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);color:var(--fgColor-default);display:grid;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;padding:var(--base-size-8);position:relative}@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)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:var(--base-size-6) var(--base-size-8)}:is(.Banner .Banner-visual)>.octicon{margin-block:calc(var(--base-size-4)/2)}:is(.Banner .Banner-visual)>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:var(--base-size-6) var(--base-size-8)}:is(.Banner .Banner-message) p:last-child{margin-bottom:0}:is(.Banner .Banner-message) .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}:is(.Banner .Banner-actions):last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent)}.Banner.Banner--warning{background-image:linear-gradient(var(--bgColor-attention-muted),var(--bgColor-attention-muted));border-color:var(--borderColor-attention-muted);color:var(--fgColor-default)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention)}.Banner.Banner--error{background-image:linear-gradient(var(--bgColor-danger-muted),var(--bgColor-danger-muted));border-color:var(--borderColor-danger-muted);color:var(--fgColor-default)}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger)}.Banner.Banner--success{background-image:linear-gradient(var(--bgColor-success-muted),var(--bgColor-success-muted));border-color:var(--borderColor-success-muted);color:var(--fgColor-default)}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success)}.Banner.Banner--upsell{background-image:linear-gradient(var(--bgColor-done-muted),var(--bgColor-done-muted));border-color:var(--borderColor-done-muted);color:var(--fgColor-default)}.Banner.Banner--upsell .Banner-visual .octicon{color:var(--fgColor-done)}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin)*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin)*-1)}}
+/* 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

@@ -4,8 +4,8 @@
     ".Banner",
     ".Banner .Banner-actions",
     ".Banner .Banner-visual",
-    ":is(.Banner .Banner-visual)>.octicon",
-    ":is(.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)",

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

@@ -1 +1,183 @@
-.btn-mktg{appearance:none!important;background:linear-gradient(180deg,#ffffff26 0,#fff0 100%),var(--color-mktg-btn-bg)!important;border:0;border-radius:.375rem;color:var(--bgColor-default);display:inline-block;font-size:1rem;font-weight:var(--base-text-weight-semibold);line-height:1;padding:.9rem 1.5rem 1.1rem;position:relative;text-align:center;transition:box-shadow .2s,outline .2s ease;-webkit-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;z-index:1}.btn-mktg:before{background:linear-gradient(180deg,#ffffff26,#fff0)!important;background-blend-mode:normal;border-radius:inherit;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s;z-index:-1}.btn-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover)!important;-webkit-text-decoration:none;text-decoration:none}:is(.btn-mktg:hover,.btn-mktg:focus,.btn-mktg:focus-visible,.btn-mktg.focus):before{opacity:1}.btn-mktg:focus{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}.btn-mktg:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-mktg:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}.btn-mktg:active:before{opacity:.5!important}.btn-mktg.disabled,.btn-mktg[disabled]{cursor:default;opacity:.5;pointer-events:none}.btn-muted-mktg{background:none!important;box-shadow:var(--color-mktg-btn-shadow-outline);color:var(--fgColor-default)!important}.btn-muted-mktg:before{display:none}.btn-muted-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-muted-mktg:active{box-shadow:var(--fgColor-default) 0 0 0 3px inset!important}.btn-muted-mktg:disabled{box-shadow:var(--fgColor-default) 0 0 0 1px inset!important}.btn-subtle-mktg{box-shadow:none!important;color:var(--fgColor-default)!important}.btn-subtle-mktg,.btn-subtle-mktg:before{background:none!important}.btn-subtle-mktg:hover{box-shadow:var(--color-mktg-btn-shadow-hover-muted)!important}.btn-signup-mktg{background:linear-gradient(180deg,#34b75926,#2ea44f00),#2ea44f!important;color:#fff}.btn-signup-mktg:before{background:linear-gradient(180deg,#34b75926,#2ea44f00)!important}.btn-signup-mktg:focus{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}.btn-signup-mktg:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.btn-signup-mktg:focus-visible{box-shadow:none;outline:2px solid var(--focus-outlineColor);outline-offset:2px}.btn-small-mktg{padding:.625rem 1rem .8125rem}.btn-large-mktg{font-size:1.25rem;padding:16px 30px 20px!important}
+.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;
+}