@primer/view-components 0.3.0-rc.dc2abcf9 → 0.3.0

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

@@ -5,56 +5,56 @@
     ".ActionListHeader",
     ".ActionListWrap",
     ".ActionListWrap--inset",
-    ".ActionListWrap--divided .ActionListItem-label:before",
-    ".ActionListWrap--divided .ActionListItem-descriptionWrap--inline:before",
-    ".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",
-    ".ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label:before",
-    ".ActionListWrap--divided .ActionListItem--navActive+.ActionListItem .ActionListItem-label:before",
+    ".ActionListWrap--divided .ActionListItem-label::before",
+    ".ActionListWrap--divided .ActionListItem-descriptionWrap--inline::before",
+    ".ActionListWrap--divided .ActionListItem-descriptionWrap--inline .ActionListItem-label::before",
+    ".ActionListWrap--divided .ActionListItem--navActive .ActionListItem-label::before",
+    ".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",
-    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover",
-    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active",
+    ".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",
+    ".ActionListItem.ActionListItem--hasSubItem > .ActionListContent:hover",
+    ".ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active",
     ".ActionListItem:not(.ActionListItem--hasSubItem):hover",
-    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:hover:not(.ActionListItem--navActive,:focus-visible)",
-    ".ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive,:focus-visible)",
+    ".ActionListItem:not(.ActionListItem--hasSubItem):hover:not(.ActionListItem--navActive, :focus-visible)",
+    ".ActionListItem.ActionListItem--hasSubItem > .ActionListContent:hover:not(.ActionListItem--navActive, :focus-visible)",
     ".ActionListItem:not(.ActionListItem--hasSubItem):active",
-    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active:not(.ActionListItem--navActive)",
     ".ActionListItem:not(.ActionListItem--hasSubItem):active:not(.ActionListItem--navActive)",
-    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active .ActionListItem-label:before",
-    ".ActionListItem.ActionListItem--hasSubItem>.ActionListContent:active+.ActionListItem .ActionListItem-label:before",
-    ".ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label:before",
-    ".ActionListItem:not(.ActionListItem--hasSubItem):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--hasSubItem > .ActionListContent:active:not(.ActionListItem--navActive)",
+    ".ActionListItem:not(.ActionListItem--hasSubItem):active .ActionListItem-label::before",
+    ".ActionListItem.ActionListItem--hasSubItem > .ActionListContent:active .ActionListItem-label::before",
+    ".ActionListItem:not(.ActionListItem--hasSubItem):active + .ActionListItem .ActionListItem-label::before",
+    ".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",
-    ".ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)::before",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger) + .ActionListItem::before",
+    ".ActionListItem.ActionListItem--navActive:not(.ActionListItem--danger)::after",
     ".ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-label",
-    ".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-description",
-    ".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-label",
+    ".ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-label",
+    ".ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-description",
+    ".ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-description",
     ".ActionListItem.ActionListItem--disabled .ActionListContent .ActionListItem-visual",
-    ".ActionListItem[aria-disabled=true] .ActionListContent .ActionListItem-visual",
+    ".ActionListItem[aria-disabled='true'] .ActionListContent .ActionListItem-visual",
     ".ActionListItem.ActionListItem--disabled:hover",
-    ".ActionListItem[aria-disabled=true]:hover",
+    ".ActionListItem[aria-disabled='true']:hover",
     ".ActionListItem.ActionListItem--danger .ActionListItem-label",
     ".ActionListItem.ActionListItem--danger .ActionListItem-visual",
     ".ActionListItem.ActionListItem--danger:hover",
@@ -64,43 +64,43 @@
     ".ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-label",
     ".ActionListItem.ActionListItem--danger .ActionListContent:active .ActionListItem-visual",
     ".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",
-    ".ActionListContent[aria-expanded]+.ActionList--subGroup .ActionListContent",
-    ".ActionListContent.ActionListContent--visual16[aria-expanded]+.ActionList--subGroup .ActionListContent",
-    ".ActionListContent.ActionListContent--visual20[aria-expanded]+.ActionList--subGroup .ActionListContent",
-    ".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",
-    ".ActionListContent[aria-checked=true] .ActionListItem-multiSelectCheckmark",
-    ".ActionListContent[aria-selected=true] .ActionListItem-multiSelectCheckmark",
-    ".ActionListContent[aria-checked=true] .ActionListItem-singleSelectCheckmark",
-    ".ActionListContent[aria-selected=true] .ActionListItem-singleSelectCheckmark",
-    ".ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
-    ".ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
-    ".ActionListContent[aria-checked=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",
-    ".ActionListContent[aria-selected=true] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",
-    ".ActionListContent[aria-checked=false] .ActionListItem-multiSelectCheckmark",
-    ".ActionListContent[aria-selected=false] .ActionListItem-multiSelectCheckmark",
-    ".ActionListContent[aria-checked=false] .ActionListItem-singleSelectCheckmark",
-    ".ActionListContent[aria-selected=false] .ActionListItem-singleSelectCheckmark",
-    ".ActionListContent[aria-checked=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
-    ".ActionListContent[aria-selected=false] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
-    ".ActionListContent[aria-checked=false] .ActionListItem-multiSelectIconRect",
-    ".ActionListContent[aria-selected=false] .ActionListItem-multiSelectIconRect",
+    ".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",
+    ".ActionListContent[aria-expanded] + .ActionList--subGroup .ActionListContent",
+    ".ActionListContent.ActionListContent--visual16[aria-expanded] + .ActionList--subGroup .ActionListContent",
+    ".ActionListContent.ActionListContent--visual20[aria-expanded] + .ActionList--subGroup .ActionListContent",
+    ".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",
+    ".ActionListContent[aria-checked='true'] .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-selected='true'] .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-checked='true'] .ActionListItem-singleSelectCheckmark",
+    ".ActionListContent[aria-selected='true'] .ActionListItem-singleSelectCheckmark",
+    ".ActionListContent[aria-checked='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
+    ".ActionListContent[aria-selected='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
+    ".ActionListContent[aria-checked='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-selected='true'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-checked='false'] .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-selected='false'] .ActionListItem-multiSelectCheckmark",
+    ".ActionListContent[aria-checked='false'] .ActionListItem-singleSelectCheckmark",
+    ".ActionListContent[aria-selected='false'] .ActionListItem-singleSelectCheckmark",
+    ".ActionListContent[aria-checked='false'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
+    ".ActionListContent[aria-selected='false'] .ActionListItem-multiSelectIcon .ActionListItem-multiSelectIconRect",
+    ".ActionListContent[aria-checked='false'] .ActionListItem-multiSelectIconRect",
+    ".ActionListContent[aria-selected='false'] .ActionListItem-multiSelectIconRect",
     ".ActionListContent.ActionListContent--sizeLarge",
     ".ActionListContent.ActionListContent--sizeXLarge",
     ".ActionListContent.ActionListContent--blockDescription .ActionListItem-visual",
@@ -112,16 +112,16 @@
     ".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",
-    ".ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction",
     ".ActionListItem--trailingActionHover:hover .ActionListItem-trailingAction",
+    ".ActionListItem--trailingActionHover:focus-within .ActionListItem-trailingAction",
     ".ActionList-sectionDivider:not(:empty)",
     ".ActionList-sectionDivider:empty",
     ".ActionList-sectionDivider .ActionList-sectionDivider-title",

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

@@ -1 +1,130 @@
-.autocomplete-label-stacked{display:block;margin-bottom:6px}.autocomplete-label-inline{display:inline;margin-right:6px}@media (max-width:543.98px){.autocomplete-label-inline{display:block;margin-bottom:6px}}.autocomplete-body{display:inline;position:relative}.autocomplete-embedded-icon-wrap{align-items:center;display:inline-flex;padding:4px 8px}.autocomplete-embedded-icon-wrap:focus-within{border-color:var(--focus-outlineColor,var(--color-accent-fg));box-shadow:inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));outline:none}.autocomplete-embedded-icon-wrap .form-control{border:none;box-shadow:none;margin-left:8px;padding:0}.autocomplete-embedded-icon-wrap .form-control:focus{box-shadow:none}.autocomplete-embedded-icon-wrap .form-control:focus-visible{box-shadow:none}.autocomplete-results{background:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);box-shadow:var(--shadow-resting-medium,var(--color-shadow-medium));font-size:13px;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,var(--color-canvas-overlay));border:0;color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:block;font-weight:var(--base-text-weight-semibold,600);overflow:hidden;padding:4px 8px;text-align:left;text-decoration:none;text-overflow:ellipsis;white-space:nowrap;width:100%}.autocomplete-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.autocomplete-item:hover *{color:inherit!important}.autocomplete-item.navigation-focus,.autocomplete-item.selected,.autocomplete-item[aria-selected=true]{background-color:var(--bgColor-accent-emphasis,var(--color-accent-fg));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.autocomplete-item.navigation-focus *,.autocomplete-item.selected *,.autocomplete-item[aria-selected=true] *{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: 6px;
+}
+
+/* Inline label (non-default) */
+
+.autocomplete-label-inline {
+  display: inline;
+  margin-right: 6px;
+}
+
+/* Switch to stacked at smaller viewport */
+
+@media (max-width: 543.98px) {
+  .autocomplete-label-inline {
+    display: block;
+    margin-bottom: 6px;
+  }
+}
+
+/* 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: 4px 8px;
+  align-items: center;
+}
+
+.autocomplete-embedded-icon-wrap:focus-within {
+    border-color: var(--borderColor-accent-emphasis,var(--color-accent-fg));
+
+    border-color: var(--focus-outlineColor,var(--color-accent-fg));
+
+    outline: none;
+
+    box-shadow: inset 0 0 0 1px var(--focus-outlineColor,var(--color-accent-fg));
+  }
+
+.autocomplete-embedded-icon-wrap .form-control {
+    padding: 0;
+    margin-left: 8px;
+    border: none;
+    box-shadow: none;
+  }
+
+.autocomplete-embedded-icon-wrap .form-control:focus {
+      box-shadow: none;
+    }
+
+.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: 13px;
+  list-style: none;
+  background: var(--overlay-bgColor,var(--color-canvas-overlay));
+  border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-default,var(--color-border-default));
+  border-radius: var(--borderRadius-medium,6px);
+  box-shadow: var(--shadow-resting-medium,var(--color-shadow-medium));
+}
+
+/* One of the items that appears within an autocomplete group
+** Bold black text on white background */
+
+.autocomplete-item {
+  display: block;
+  width: 100%;
+  padding: 4px 8px;
+  overflow: hidden;
+  font-weight: var(--base-text-weight-semibold,600);
+  color: var(--fgColor-default,var(--color-fg-default));
+  text-align: left;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+  background-color: var(--overlay-bgColor,var(--color-canvas-overlay));
+  border: 0;
+}
+
+.autocomplete-item:hover {
+    color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+    text-decoration: none;
+    background-color: var(--bgColor-accent-emphasis,var(--color-accent-fg));
+
+    /* 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,var(--color-fg-on-emphasis));
+    text-decoration: none;
+    background-color: var(--bgColor-accent-emphasis,var(--color-accent-fg));
+
+    /* Inherit color on all child elements to ensure enough contrast */
+  }
+
+.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,11 +13,11 @@
     ".autocomplete-item",
     ".autocomplete-item:hover",
     ".autocomplete-item:hover *",
-    ".autocomplete-item.navigation-focus",
     ".autocomplete-item.selected",
-    ".autocomplete-item[aria-selected=true]",
-    ".autocomplete-item.navigation-focus *",
+    ".autocomplete-item[aria-selected='true']",
+    ".autocomplete-item.navigation-focus",
     ".autocomplete-item.selected *",
-    ".autocomplete-item[aria-selected=true] *"
+    ".autocomplete-item[aria-selected='true'] *",
+    ".autocomplete-item.navigation-focus *"
   ]
 }

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

@@ -1 +1,131 @@
-.Banner{background-image:linear-gradient(var(--bgColor-accent-muted,var(--color-accent-muted)),var(--bgColor-accent-muted,var(--color-accent-muted)));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted));border-radius:var(--borderRadius-medium,6px);color:var(--fgColor-default,var(--color-fg-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,.5rem);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,.5rem) 0 0 var(--base-size-8,.5rem)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-visual>.octicon{margin-block:calc(var(--base-size-4,.25rem)/2)}.Banner .Banner-visual>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:.375rem var(--base-size-8,.5rem)}.Banner .Banner-message p:last-child{margin-bottom:0}.Banner .Banner-message .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold,600);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}.Banner .Banner-actions:last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed,.5rem)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent,var(--color-accent-fg))}.Banner.Banner--warning{background-image:linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)),var(--bgColor-attention-muted,var(--color-attention-subtle)));border-color:var(--borderColor-attention-muted,var(--color-attention-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention,var(--color-attention-fg))}.Banner.Banner--error{background-image:linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)),var(--bgColor-danger-muted,var(--color-danger-subtle)));border-color:var(--borderColor-danger-muted,var(--color-danger-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger,var(--color-danger-fg))}.Banner.Banner--success{background-image:linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)),var(--bgColor-success-muted,var(--color-success-subtle)));border-color:var(--borderColor-success-muted,var(--color-success-muted));color:var(--fgColor-default,var(--color-fg-default))}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success,var(--color-success-fg))}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-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,max(1px, .0625rem))*-1)}}
+/* Banner alert */
+
+.Banner {
+  position: relative;
+  display: grid;
+  padding: var(--base-size-8,0.5rem);
+  color: var(--fgColor-default,var(--color-fg-default));
+  background-image: linear-gradient(var(--bgColor-accent-muted,var(--color-accent-muted)), var(--bgColor-accent-muted,var(--color-accent-muted)));
+  border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--borderColor-accent-muted,var(--color-accent-muted));
+  border-radius: var(--borderRadius-medium,6px);
+  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 variantion */
+}
+
+@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.5rem) 0 0 var(--base-size-8,0.5rem);
+    }
+  }
+
+/* Elements */
+
+.Banner .Banner-visual {
+    display: grid;
+    padding: 0.375rem var(--base-size-8,0.5rem);
+    grid-area: visual;
+    align-self: start;
+  }
+
+.Banner .Banner-visual > .octicon {
+      margin-block: calc(var(--base-size-4,0.25rem) / 2);
+    }
+
+.Banner .Banner-visual > * {
+      align-self: center;
+    }
+
+.Banner .Banner-message {
+    padding: 0.375rem var(--base-size-8,0.5rem);
+    grid-area: message;
+    align-self: center;
+  }
+
+.Banner .Banner-message p:last-child {
+      margin-bottom: 0;
+    }
+
+.Banner .Banner-message .Banner-title:not(:only-child) {
+      margin-bottom: 0;
+      font-weight: var(--base-text-weight-semibold,600);
+    }
+
+.Banner .Banner-actions {
+    grid-area: actions;
+  }
+
+.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;
+    margin-left: var(--controlStack-medium-gap-condensed,0.5rem);
+  }
+
+.Banner .Banner-visual .octicon {
+    color: var(--fgColor-accent,var(--color-accent-fg));
+  }
+
+.Banner.Banner--warning {
+    color: var(--fgColor-default,var(--color-fg-default));
+    background-image: linear-gradient(var(--bgColor-attention-muted,var(--color-attention-subtle)), var(--bgColor-attention-muted,var(--color-attention-subtle)));
+    border-color: var(--borderColor-attention-muted,var(--color-attention-muted));
+  }
+
+.Banner.Banner--warning .Banner-visual .octicon {
+      color: var(--fgColor-attention,var(--color-attention-fg));
+    }
+
+.Banner.Banner--error {
+    color: var(--fgColor-default,var(--color-fg-default));
+    background-image: linear-gradient(var(--bgColor-danger-muted,var(--color-danger-subtle)), var(--bgColor-danger-muted,var(--color-danger-subtle)));
+    border-color: var(--borderColor-danger-muted,var(--color-danger-muted));
+  }
+
+.Banner.Banner--error .Banner-visual .octicon {
+      color: var(--fgColor-danger,var(--color-danger-fg));
+    }
+
+.Banner.Banner--success {
+    color: var(--fgColor-default,var(--color-fg-default));
+    background-image: linear-gradient(var(--bgColor-success-muted,var(--color-success-subtle)), var(--bgColor-success-muted,var(--color-success-subtle)));
+    border-color: var(--borderColor-success-muted,var(--color-success-muted));
+  }
+
+.Banner.Banner--success .Banner-visual .octicon {
+      color: var(--fgColor-success,var(--color-success-fg));
+    }
+
+/* Full-width */
+
+.Banner.Banner--full {
+    margin-top: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -1);
+    border-right: 0;
+    border-left: 0;
+    border-radius: 0;
+  }
+
+@media (max-width: 767.98px) {
+    .Banner.Banner--full-whenNarrow {
+      margin-top: calc(var(--borderWidth-thin,max(1px, 0.0625rem)) * -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",
-    ".Banner .Banner-visual>.octicon",
-    ".Banner .Banner-visual>*",
+    ".Banner .Banner-visual > .octicon",
+    ".Banner .Banner-visual > *",
     ".Banner .Banner-message",
     ".Banner .Banner-message p:last-child",
     ".Banner .Banner-message .Banner-title:not(:only-child)",