@primer/view-components 0.45.2 → 0.46.0-rc.4285adec

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",
-    ":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",
+    ".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",
     ".ActionListItem",
-    ".ActionListItem:hover",
     ".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: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.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)::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--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--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-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[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.ActionListContent--sizeLarge",
     ".ActionListContent.ActionListContent--sizeXLarge",
     ".ActionListContent.ActionListContent--blockDescription .ActionListItem-visual",
@@ -98,11 +98,11 @@
     ".ActionListItem-descriptionWrap .ActionListItem-label",
     ".ActionListItem-descriptionWrap--inline",
     ".ActionListItem-description",
-    ".ActionListItem-visual",
     ".ActionListItem-action",
+    ".ActionListItem-visual",
     ".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,131 +1 @@
-/* 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;
-    }
+.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}

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

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

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

@@ -1,146 +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;
-    }
-  }
+.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)}}

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,183 +1 @@
-.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;
-}
+.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}