primer_view_components 0.2.0 → 0.3.0

data/app/components/primer/alpha/toggle_switch.pcss

@@ -34,8 +34,8 @@
   text-decoration: none;
   cursor: pointer;
   user-select: none;
-  background-color: var(--color-switch-track-bg);
-  border: var(--borderWidth-thin) solid var(--color-switch-track-border);
+  background-color: var(--controlTrack-bgColor-rest);
+  border: var(--borderWidth-thin) solid var(--controlTrack-borderColor-rest);
   border-radius: var(--borderRadius-medium);
   transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
   transition-duration: 80ms;
@@ -48,11 +48,11 @@
   }
 
   &:hover {
-    background-color: var(--color-switch-track-hover-bg);
+    background-color: var(--controlTrack-bgColor-hover);
   }
 
   &:active {
-    background-color: var(--color-switch-track-active-bg);
+    background-color: var(--controlTrack-bgColor-active);
   }
 
   @media (pointer: coarse) {
@@ -71,28 +71,28 @@
 }
 
 .ToggleSwitch-track[aria-pressed='true'][disabled] {
-  background-color: var(--color-switch-track-disabled-bg);
-  color: var(--color-switch-track-checked-disabled-fg);
+  background-color: var(--controlTrack-bgColor-disabled);
+  color: var(--control-checked-fgColor-disabled);
   border-color: transparent;
 }
 
 .ToggleSwitch-track[aria-pressed='true'] {
-  background-color: var(--color-switch-track-checked-bg);
-  border-color: var(--color-switch-track-checked-border);
+  background-color: var(--control-checked-bgColor-rest);
+  border-color: var(--controlTrack-borderColor-rest);
 
   &:not([disabled]) {
     &:hover {
-      background-color: var(--color-switch-track-checked-hover-bg);
+      background-color: var(--control-checked-bgColor-hover);
     }
 
     &:active {
-      background-color: var(--color-switch-track-checked-active-bg);
+      background-color: var(--control-checked-bgColor-active);
     }
   }
 
   & .ToggleSwitch-knob {
-    background-color: var(--color-switch-knob-checked-bg);
-    border-color: var(--color-switch-knob-checked-border);
+    background-color: var(--controlKnob-bgColor-checked);
+    border-color: var(--controlKnob-borderColor-checked);
     transform: translateX(100%);
   }
 
@@ -107,21 +107,21 @@
 
 .ToggleSwitch-track[disabled] {
   cursor: not-allowed;
-  background-color: var(--color-switch-track-disabled-bg);
+  background-color: var(--controlTrack-bgColor-disabled);
   border-color: transparent;
   transition-property: none;
 
   & .ToggleSwitch-knob {
-    border-color: var(--color-border-default);
+    border-color: var(--controlKnob-borderColor-disabled);
     box-shadow: none;
   }
 
   & .ToggleSwitch-lineIcon {
-    color: var(--color-switch-track-disabled-fg);
+    color: var(--controlTrack-fgColor-disabled);
   }
 
   & .ToggleSwitch-circleIcon {
-    color: var(--color-switch-track-disabled-fg);
+    color: var(--controlTrack-fgColor-disabled);
   }
 }
 
@@ -135,7 +135,7 @@
 
 .ToggleSwitch-lineIcon {
   line-height: 0;
-  color: var(--color-switch-track-checked-fg);
+  color: var(--control-checked-fgColor-rest);
   transition-duration: 80ms;
   transition-property: transform;
   transform: translateX(-100%);
@@ -144,7 +144,7 @@
 
 .ToggleSwitch-circleIcon {
   line-height: 0;
-  color: var(--color-switch-track-fg);
+  color: var(--controlTrack-fgColor-rest);
   transition-duration: 80ms;
   transition-property: transform;
   transform: translateX(0);
@@ -157,10 +157,10 @@
   bottom: 0;
   z-index: 1;
   width: 50%;
-  background-color: var(--color-switch-knob-bg);
-  border: var(--borderWidth-thin) solid var(--color-switch-knob-border);
+  background-color: var(--controlKnob-bgColor-rest);
+  border: var(--borderWidth-thin) solid var(--controlKnob-borderColor-rest);
   border-radius: var(--borderRadius-medium);
-  box-shadow: var(--color-shadow-medium), var(--color-btn-inset-shadow);
+  box-shadow: var(--shadow-resting-medium), var(--button-default-shadow-inset);
   transition-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
   transition-duration: 80ms;
   transition-property: transform;
@@ -174,7 +174,7 @@
   position: relative;
   font-size: var(--text-body-size-medium);
   line-height: 1.5;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   text-align: right;
 }
 
@@ -197,7 +197,7 @@
 
 .ToggleSwitch--disabled {
   & .ToggleSwitch-status {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
   }
 }
 

data/app/components/primer/alpha/toggle_switch.ts

@@ -1,5 +1,4 @@
 import {controller, target} from '@github/catalyst'
-import {debounce} from '@github/mini-throttle/decorators'
 
 @controller
 class ToggleSwitchElement extends HTMLElement {
@@ -7,6 +6,8 @@ class ToggleSwitchElement extends HTMLElement {
   @target loadingSpinner: HTMLElement
   @target errorIcon: HTMLElement
 
+  private toggling = false
+
   get src(): string | null {
     const src = this.getAttribute('src')
     if (!src) return null
@@ -31,14 +32,18 @@ class ToggleSwitchElement extends HTMLElement {
     return this.src != null
   }
 
-  @debounce(300)
   async toggle() {
+    if (this.toggling) return
+
+    this.toggling = true
+
     if (this.isDisabled()) {
       return
     }
 
     if (!this.isRemote()) {
       this.performToggle()
+      this.toggling = false
       return
     }
 
@@ -57,6 +62,8 @@ class ToggleSwitchElement extends HTMLElement {
       }
 
       return
+    } finally {
+      this.toggling = false
     }
 
     this.setSuccessState()

data/app/components/primer/alpha/tooltip.rb

@@ -8,20 +8,20 @@ module Primer
     # When using a tooltip, follow the provided guidelines to avoid accessibility issues:
     # - Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.
     # - `Tooltip` should be rendered through the API of <%= link_to_component(Primer::ButtonComponent)%>, <%= link_to_component(Primer::Beta::Link)%>, or <%= link_to_component(Primer::IconButton)%>. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).
-    # @accessibility
-    #   - Tooltip text must be brief and concise whether it is a label or a description.
-    #   - Tooltip can only hold string content.
-    #   - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only users
-    #   and screen reader users. Use of tooltip through <%= link_to_component(Primer::ButtonComponent) %>, <%= link_to_component(Primer::Beta::Link) %>, or <%= link_to_component(Primer::IconButton) %> will guarantee this.
-    #   - If you must use `Tooltip` as a standalone component, place it adjacent after the trigger element in the DOM. This allows screen reader users to navigate to and copy the tooltip
+    # - Tooltip text must be brief and concise even when used to display a description.
+    # - Tooltips can only hold string content.
+    # - Tooltips are not allowed on `disabled` elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use `aria-disabled="true"` instead and programmatically disable the element.
+    # - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only
+    # and screen reader users. Use of tooltips through <%= link_to_component(Primer::Beta::Button) %>, <%= link_to_component(Primer::Beta::Link) %>, or <%= link_to_component(Primer::Beta::IconButton) %> will guarantee this.
+    # - If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.
     #   content.
-    #   ### Which type should I set?
-    #   Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a
-    #   `aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
-    #   - When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.
-    #   The majority of tooltips will fall under this category.
-    #   - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
-    #   `label` type is usually only appropriate for an icon-only control.
+    #
+    # Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either a
+    # `aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
+    # - When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.
+    # The majority of tooltips will fall under this category.
+    # - When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.
+    # `label` type is usually only appropriate for an icon-only control.
     class Tooltip < Primer::Component
       DIRECTION_DEFAULT = :s
       DIRECTION_OPTIONS = [DIRECTION_DEFAULT, :n, :e, :w, :ne, :nw, :se, :sw].freeze

data/app/components/primer/alpha/underline_nav.css

@@ -1 +1 @@
-.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--color-border-muted);display:flex;justify-content:space-between;min-height:var(--base-size-48,3rem);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--color-neutral-muted);color:var(--color-fg-default);margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--color-neutral-emphasis);color:var(--color-fg-on-emphasis)}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--color-fg-default);cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--color-neutral-muted);color:var(--color-fg-default);outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--color-action-list-item-default-hover-bg);color:var(--color-fg-default);text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--color-primer-border-active);color:var(--color-fg-default);font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--color-primer-border-active);border-radius:var(--borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,3rem)}.UnderlineNav-octicon{fill:var(--color-fg-muted);color:var(--color-fg-muted);display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}
+.UnderlineNav{-webkit-overflow-scrolling:auto;box-shadow:inset 0 -1px 0 var(--borderColor-muted,var(--color-neutral-muted));display:flex;justify-content:space-between;min-height:var(--base-size-48,3rem);overflow-x:auto;overflow-y:hidden}.UnderlineNav .Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));margin-left:var(--control-medium-gap,.5rem)}.UnderlineNav .Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.UnderlineNav-body{align-items:center;display:flex;gap:var(--control-medium-gap,.5rem);list-style:none}.UnderlineNav-item{align-items:center;background-color:initial;border:0;border-radius:var(--borderRadius-medium,6px);color:var(--fgColor-default,var(--color-fg-default));cursor:pointer;display:flex;font-size:var(--text-body-size-medium,.875rem);line-height:30px;padding:0 var(--control-medium-paddingInline-condensed,.5rem);position:relative;text-align:center;white-space:nowrap}.UnderlineNav-item:focus,.UnderlineNav-item:focus-visible,.UnderlineNav-item:hover{border-bottom-color:var(--borderColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-default,var(--color-fg-default));outline-offset:-2px;text-decoration:none;transition:border-bottom-color .12s ease-out}.UnderlineNav-item [data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.UnderlineNav-item:before{content:"";height:100%;left:50%;min-height:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}@media (pointer:fine){.UnderlineNav-item:hover{background:var(--control-transparent-bgColor-hover,var(--color-action-list-item-default-hover-bg));color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition:background .12s ease-out}}.UnderlineNav-item.selected,.UnderlineNav-item[aria-current]:not([aria-current=false]),.UnderlineNav-item[role=tab][aria-selected=true]{border-bottom-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));color:var(--fgColor-default,var(--color-fg-default));font-weight:var(--base-text-weight-semibold,600)}.UnderlineNav-item.selected:after,.UnderlineNav-item[aria-current]:not([aria-current=false]):after,.UnderlineNav-item[role=tab][aria-selected=true]:after{background:var(--underlineNav-borderColor-active,var(--color-primer-border-active));border-radius:var(--borderRadius-medium,6px);bottom:calc(50% - 25px);content:"";height:2px;position:absolute;right:50%;transform:translate(50%,-50%);width:100%;z-index:1}.UnderlineNav--right{justify-content:flex-end}.UnderlineNav--right .UnderlineNav-actions{flex:1 1 auto}.UnderlineNav-actions{align-self:center}.UnderlineNav--full{display:block}.UnderlineNav--full .UnderlineNav-body{min-height:var(--base-size-48,3rem)}.UnderlineNav-octicon{fill:var(--fgColor-muted,var(--color-fg-muted));color:var(--fgColor-muted,var(--color-fg-muted));display:inline!important;margin-right:var(--control-medium-gap,.5rem)}.UnderlineNav-container{display:flex;justify-content:space-between}

data/app/components/primer/alpha/underline_nav.css.map

@@ -1 +1 @@
-{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,mDAAoD,CAJpD,YAAa,CAMb,6BAA8B,CAL9B,mCAA+B,CAC/B,eAAgB,CAChB,iBAeF,CAVE,uBAGE,2CAA4C,CAD5C,6BAA8B,CAD9B,2CAGF,CAEA,gCAEE,8CAA+C,CAD/C,iCAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,mCAA8B,CAC9B,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,4CAAyC,CANzC,6BAA8B,CAG9B,cAAe,CAPf,YAAa,CAEb,8CAAuC,CACvC,gBAAiB,CAFjB,6DAAwD,CAFxD,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,8CAA+C,CAF/C,6BAA8B,CAG9B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,yDAA0D,CAF1D,6BAA8B,CAC9B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,qDAAsD,CADtD,6BAA8B,CAD9B,gDAiBF,CAZE,0JAQE,4CAA6C,CAC7C,4CAAyC,CALzC,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,0BAA2B,CAD3B,2BAA4B,CAF5B,wBAA0B,CAC1B,4CAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--color-border-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--control-medium-gap);\n    color: var(--color-fg-default);\n    background-color: var(--color-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--color-fg-on-emphasis);\n    background-color: var(--color-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--control-medium-gap);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--control-medium-paddingInline-condensed);\n  font-size: var(--text-body-size-medium);\n  line-height: 30px;\n  color: var(--color-fg-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--color-fg-default);\n    text-decoration: none;\n    border-bottom-color: var(--color-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--color-fg-default);\n      text-decoration: none;\n      background: var(--color-action-list-item-default-hover-bg);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--color-fg-default);\n    border-bottom-color: var(--color-primer-border-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      z-index: 1; /* raise above full-width flash banner */\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--color-primer-border-active);\n      border-radius: var(--borderRadius-medium);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--control-medium-gap);\n  color: var(--color-fg-muted);\n  fill: var(--color-fg-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}
+{"version":3,"sources":["underline_nav.pcss","<no source>"],"names":[],"mappings":"AAEA,cAME,+BAAgC,CADhC,6EAAmD,CAJnD,YAAa,CAMb,6BAA8B,CAL9B,mCAA+B,CAC/B,eAAgB,CAChB,iBAeF,CAVE,uBAGE,wEAA8C,CAD9C,oDAA6B,CAD7B,2CAGF,CAEA,gCAEE,uEAAiD,CADjD,2DAEF,CAGF,mBAEE,kBAAmB,CADnB,YAAa,CAEb,mCAA8B,CAC9B,eACF,CAEA,mBAaE,kBAAmB,CAHnB,wBAA6B,CAC7B,QAAS,CACT,4CAAyC,CANzC,oDAA6B,CAG7B,cAAe,CAPf,YAAa,CAEb,8CAAuC,CACvC,gBAAiB,CAFjB,6DAAwD,CAFxD,iBAAkB,CAMlB,iBAAkB,CAClB,kBA8DF,CAvDE,mFAKE,+EAAqD,CAFrD,oDAA6B,CAG7B,mBAAoB,CAFpB,oBAAqB,CAGrB,4CACF,CAGA,yCAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,0BClEJ,WAAA,YAAA,SAAA,gBAAA,kBAAA,QAAA,4CAAA,UDkE8B,CAI5B,sBACE,yBAGE,kGAAoD,CAFpD,oDAA6B,CAC7B,oBAAqB,CAErB,mCACF,CACF,CAEA,wIAKE,4FAA2D,CAD3D,oDAA6B,CAD7B,gDAiBF,CAZE,0JAQE,mFAAkD,CAClD,4CAAyC,CALzC,uBAAwB,CAGxB,UAAW,CADX,UAAW,CALX,iBAAkB,CAElB,SAAU,CAOV,6BAA+B,CAL/B,UAAW,CAHX,SASF,CAIJ,qBACE,wBAKF,CAHE,2CACE,aACF,CAGF,sBACE,iBACF,CAEA,oBACE,aAMF,CAHE,uCACE,mCACF,CAGF,sBAIE,+CAA0B,CAD1B,gDAA2B,CAF3B,wBAA0B,CAC1B,4CAGF,CAEA,wBACE,YAAa,CACb,6BACF","file":"underline_nav.css","sourcesContent":["/* UnderlineNav */\n\n.UnderlineNav {\n  display: flex;\n  min-height: var(--base-size-48);\n  overflow-x: auto;\n  overflow-y: hidden;\n  box-shadow: inset 0 -1px 0 var(--borderColor-muted);\n  -webkit-overflow-scrolling: auto;\n  justify-content: space-between;\n\n  & .Counter {\n    margin-left: var(--control-medium-gap);\n    color: var(--fgColor-default);\n    background-color: var(--bgColor-neutral-muted);\n  }\n\n  & .Counter--primary {\n    color: var(--fgColor-onEmphasis);\n    background-color: var(--bgColor-neutral-emphasis);\n  }\n}\n\n.UnderlineNav-body {\n  display: flex;\n  align-items: center;\n  gap: var(--control-medium-gap);\n  list-style: none;\n}\n\n.UnderlineNav-item {\n  position: relative;\n  display: flex;\n  padding: 0 var(--control-medium-paddingInline-condensed);\n  font-size: var(--text-body-size-medium);\n  line-height: 30px;\n  color: var(--fgColor-default);\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  background-color: transparent;\n  border: 0;\n  border-radius: var(--borderRadius-medium);\n  align-items: center;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    color: var(--fgColor-default);\n    text-decoration: none;\n    border-bottom-color: var(--borderColor-neutral-muted);\n    outline-offset: -2px;\n    transition: border-bottom-color 0.12s ease-out;\n  }\n\n  /* renders a visibly hidden \"copy\" of the label in bold, reserving box space for when label becomes bold on selected */\n  & [data-content]::before {\n    display: block;\n    height: 0;\n    font-weight: var(--base-text-weight-semibold);\n    visibility: hidden;\n    content: attr(data-content);\n  }\n\n  /* increase touch target area */\n  &::before {\n    @mixin minTouchTarget 48px;\n  }\n\n  /* hover state was \"sticking\" on mobile after click */\n  @media (pointer: fine) {\n    &:hover {\n      color: var(--fgColor-default);\n      text-decoration: none;\n      background: var(--control-transparent-bgColor-hover);\n      transition: background 0.12s ease-out;\n    }\n  }\n\n  &.selected,\n  &[role='tab'][aria-selected='true'],\n  &[aria-current]:not([aria-current='false']) {\n    font-weight: var(--base-text-weight-semibold);\n    color: var(--fgColor-default);\n    border-bottom-color: var(--underlineNav-borderColor-active);\n\n    /* current/selected underline */\n    &::after {\n      position: absolute;\n      z-index: 1; /* raise above full-width flash banner */\n      right: 50%;\n      bottom: calc(50% - 25px); /* 48px total height / 2 (24px) + 1px */\n      width: 100%;\n      height: 2px;\n      content: '';\n      background: var(--underlineNav-borderColor-active);\n      border-radius: var(--borderRadius-medium);\n      transform: translate(50%, -50%);\n    }\n  }\n}\n\n.UnderlineNav--right {\n  justify-content: flex-end;\n\n  & .UnderlineNav-actions {\n    flex: 1 1 auto;\n  }\n}\n\n.UnderlineNav-actions {\n  align-self: center;\n}\n\n.UnderlineNav--full {\n  display: block;\n\n  /* required for underline to align with additional wrapper element */\n  & .UnderlineNav-body {\n    min-height: var(--base-size-48);\n  }\n}\n\n.UnderlineNav-octicon {\n  display: inline !important;\n  margin-right: var(--control-medium-gap);\n  color: var(--fgColor-muted);\n  fill: var(--fgColor-muted);\n}\n\n.UnderlineNav-container {\n  display: flex;\n  justify-content: space-between;\n}\n",null]}

data/app/components/primer/alpha/underline_nav.pcss

@@ -5,19 +5,19 @@
   min-height: var(--base-size-48);
   overflow-x: auto;
   overflow-y: hidden;
-  box-shadow: inset 0 -1px 0 var(--color-border-muted);
+  box-shadow: inset 0 -1px 0 var(--borderColor-muted);
   -webkit-overflow-scrolling: auto;
   justify-content: space-between;
 
   & .Counter {
     margin-left: var(--control-medium-gap);
-    color: var(--color-fg-default);
-    background-color: var(--color-neutral-muted);
+    color: var(--fgColor-default);
+    background-color: var(--bgColor-neutral-muted);
   }
 
   & .Counter--primary {
-    color: var(--color-fg-on-emphasis);
-    background-color: var(--color-neutral-emphasis);
+    color: var(--fgColor-onEmphasis);
+    background-color: var(--bgColor-neutral-emphasis);
   }
 }
 
@@ -34,7 +34,7 @@
   padding: 0 var(--control-medium-paddingInline-condensed);
   font-size: var(--text-body-size-medium);
   line-height: 30px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default);
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
@@ -46,9 +46,9 @@
   &:hover,
   &:focus,
   &:focus-visible {
-    color: var(--color-fg-default);
+    color: var(--fgColor-default);
     text-decoration: none;
-    border-bottom-color: var(--color-neutral-muted);
+    border-bottom-color: var(--borderColor-neutral-muted);
     outline-offset: -2px;
     transition: border-bottom-color 0.12s ease-out;
   }
@@ -70,9 +70,9 @@
   /* hover state was "sticking" on mobile after click */
   @media (pointer: fine) {
     &:hover {
-      color: var(--color-fg-default);
+      color: var(--fgColor-default);
       text-decoration: none;
-      background: var(--color-action-list-item-default-hover-bg);
+      background: var(--control-transparent-bgColor-hover);
       transition: background 0.12s ease-out;
     }
   }
@@ -81,8 +81,8 @@
   &[role='tab'][aria-selected='true'],
   &[aria-current]:not([aria-current='false']) {
     font-weight: var(--base-text-weight-semibold);
-    color: var(--color-fg-default);
-    border-bottom-color: var(--color-primer-border-active);
+    color: var(--fgColor-default);
+    border-bottom-color: var(--underlineNav-borderColor-active);
 
     /* current/selected underline */
     &::after {
@@ -93,7 +93,7 @@
       width: 100%;
       height: 2px;
       content: '';
-      background: var(--color-primer-border-active);
+      background: var(--underlineNav-borderColor-active);
       border-radius: var(--borderRadius-medium);
       transform: translate(50%, -50%);
     }
@@ -124,8 +124,8 @@
 .UnderlineNav-octicon {
   display: inline !important;
   margin-right: var(--control-medium-gap);
-  color: var(--color-fg-muted);
-  fill: var(--color-fg-muted);
+  color: var(--fgColor-muted);
+  fill: var(--fgColor-muted);
 }
 
 .UnderlineNav-container {

data/app/components/primer/anchored_position.js

@@ -133,11 +133,9 @@ export default class AnchoredPositionElement extends HTMLElement {
             const anchor = this.anchorElement;
             if (!anchor)
                 return;
-            const { left, top, anchorSide, anchorAlign } = getAnchoredPosition(this, anchor, this);
+            const { left, top } = getAnchoredPosition(this, anchor, this);
             this.style.top = `${top}px`;
             this.style.left = `${left}px`;
-            this.classList.remove('Overlay--anchorAlign-start', 'Overlay--anchorAlign-center', 'Overlay--anchorAlign-end', 'Overlay--anchorSide-insideTop', 'Overlay--anchorSide-insideBottom', 'Overlay--anchorSide-insideLeft', 'Overlay--anchorSide-insideRight', 'Overlay--anchorSide-insideCenter', 'Overlay--anchorSide-outsideTop', 'Overlay--anchorSide-outsideLeft', 'Overlay--anchorSide-outsideRight');
-            this.classList.add(`Overlay--anchorAlign-${anchorAlign}`, `Overlay--anchorSide-${anchorSide}`);
         }), "f");
     }
 }

data/app/components/primer/anchored_position.ts

@@ -134,23 +134,9 @@ export default class AnchoredPositionElement extends HTMLElement implements Posi
     this.#animationFrame = requestAnimationFrame(() => {
       const anchor = this.anchorElement
       if (!anchor) return
-      const {left, top, anchorSide, anchorAlign} = getAnchoredPosition(this, anchor, this)
+      const {left, top} = getAnchoredPosition(this, anchor, this)
       this.style.top = `${top}px`
       this.style.left = `${left}px`
-      this.classList.remove(
-        'Overlay--anchorAlign-start',
-        'Overlay--anchorAlign-center',
-        'Overlay--anchorAlign-end',
-        'Overlay--anchorSide-insideTop',
-        'Overlay--anchorSide-insideBottom',
-        'Overlay--anchorSide-insideLeft',
-        'Overlay--anchorSide-insideRight',
-        'Overlay--anchorSide-insideCenter',
-        'Overlay--anchorSide-outsideTop',
-        'Overlay--anchorSide-outsideLeft',
-        'Overlay--anchorSide-outsideRight'
-      )
-      this.classList.add(`Overlay--anchorAlign-${anchorAlign}`, `Overlay--anchorSide-${anchorSide}`)
     })
   }
 }

data/app/components/primer/beta/avatar.css

@@ -1 +1 @@
-.avatar{background-color:var(--color-avatar-bg);border-radius:var(--borderRadius-medium,6px);box-shadow:0 0 0 1px var(--color-avatar-border);display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small,3px)}.avatar-1{height:var(--base-size-16,1rem);width:var(--base-size-16,1rem)}.avatar-2{height:var(--base-size-20,1.25rem);width:var(--base-size-20,1.25rem)}.avatar-3{height:var(--base-size-24,1.5rem);width:var(--base-size-24,1.5rem)}.avatar-4{height:var(--base-size-28,1.75rem);width:var(--base-size-28,1.75rem)}.avatar-5{height:var(--base-size-32,2rem);width:var(--base-size-32,2rem)}.avatar-6{height:var(--base-size-40,2.5rem);width:var(--base-size-40,2.5rem)}.avatar-7{height:var(--base-size-48,3rem);width:var(--base-size-48,3rem)}.avatar-8{height:var(--base-size-64,4rem);width:var(--base-size-64,4rem)}
+.avatar{background-color:var(--avatar-bgColor,var(--color-avatar-bg));border-radius:var(--borderRadius-medium,6px);box-shadow:0 0 0 1px var(--avatar-borderColor,var(--color-avatar-border));display:inline-block;flex-shrink:0;line-height:1;overflow:hidden;vertical-align:middle}.avatar-link{float:left;line-height:1}.avatar-group-item{display:inline-block;margin-bottom:3px}.avatar-1,.avatar-2,.avatar-small{border-radius:var(--borderRadius-small,3px)}.avatar-1{height:var(--base-size-16,1rem);width:var(--base-size-16,1rem)}.avatar-2{height:var(--base-size-20,1.25rem);width:var(--base-size-20,1.25rem)}.avatar-3{height:var(--base-size-24,1.5rem);width:var(--base-size-24,1.5rem)}.avatar-4{height:var(--base-size-28,1.75rem);width:var(--base-size-28,1.75rem)}.avatar-5{height:var(--base-size-32,2rem);width:var(--base-size-32,2rem)}.avatar-6{height:var(--base-size-40,2.5rem);width:var(--base-size-40,2.5rem)}.avatar-7{height:var(--base-size-48,3rem);width:var(--base-size-48,3rem)}.avatar-8{height:var(--base-size-64,4rem);width:var(--base-size-64,4rem)}

data/app/components/primer/beta/avatar.css.map

@@ -1 +1 @@
-{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,uCAAwC,CACxC,4CAAyC,CAEzC,+CAAgD,CAPhD,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,2CACF,CAIA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n  display: inline-block;\n  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n  line-height: 1;\n  vertical-align: middle;\n  background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */\n  border-radius: var(--borderRadius-medium);\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px var(--color-avatar-border);\n}\n\n.avatar-link {\n  float: left;\n  line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n  display: inline-block;\n  margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n  border-radius: var(--borderRadius-small);\n}\n\n/* Sizes */\n\n.avatar-1 {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n.avatar-2 {\n  width: var(--base-size-20);\n  height: var(--base-size-20);\n}\n\n.avatar-3 {\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.avatar-4 {\n  width: var(--base-size-28);\n  height: var(--base-size-28);\n}\n\n.avatar-5 {\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n}\n\n.avatar-6 {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.avatar-7 {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n.avatar-8 {\n  width: var(--base-size-64);\n  height: var(--base-size-64);\n}\n"]}
+{"version":3,"sources":["avatar.pcss"],"names":[],"mappings":"AAEA,QAKE,6DAAuC,CACvC,4CAAyC,CAEzC,yEAA+C,CAP/C,oBAAqB,CAMrB,aAAc,CAJd,aAAc,CADd,eAAgB,CAEhB,qBAKF,CAEA,aACE,UAAW,CACX,aACF,CAGA,mBACE,oBAAqB,CACrB,iBACF,CAIA,kCAGE,2CACF,CAIA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,kCAA2B,CAD3B,iCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,iCAA2B,CAD3B,gCAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF,CAEA,UAEE,+BAA2B,CAD3B,8BAEF","file":"avatar.css","sourcesContent":["/* avatar */\n\n.avatar {\n  display: inline-block;\n  overflow: hidden; /* Ensure page layout in Firefox should images fail to load */\n  line-height: 1;\n  vertical-align: middle;\n  background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */\n  border-radius: var(--borderRadius-medium);\n  flex-shrink: 0;\n  box-shadow: 0 0 0 1px var(--avatar-borderColor);\n}\n\n.avatar-link {\n  float: left;\n  line-height: 1;\n}\n\n/* User for example on /stars and /user for grids of avatars */\n.avatar-group-item {\n  display: inline-block;\n  margin-bottom: 3px;\n}\n\n/* Border radius */\n\n.avatar-1,\n.avatar-2,\n.avatar-small {\n  border-radius: var(--borderRadius-small);\n}\n\n/* Sizes */\n\n.avatar-1 {\n  width: var(--base-size-16);\n  height: var(--base-size-16);\n}\n\n.avatar-2 {\n  width: var(--base-size-20);\n  height: var(--base-size-20);\n}\n\n.avatar-3 {\n  width: var(--base-size-24);\n  height: var(--base-size-24);\n}\n\n.avatar-4 {\n  width: var(--base-size-28);\n  height: var(--base-size-28);\n}\n\n.avatar-5 {\n  width: var(--base-size-32);\n  height: var(--base-size-32);\n}\n\n.avatar-6 {\n  width: var(--base-size-40);\n  height: var(--base-size-40);\n}\n\n.avatar-7 {\n  width: var(--base-size-48);\n  height: var(--base-size-48);\n}\n\n.avatar-8 {\n  width: var(--base-size-64);\n  height: var(--base-size-64);\n}\n"]}

data/app/components/primer/beta/avatar.pcss

@@ -5,10 +5,10 @@
   overflow: hidden; /* Ensure page layout in Firefox should images fail to load */
   line-height: 1;
   vertical-align: middle;
-  background-color: var(--color-avatar-bg); /* adds opaque bg to transparent avatars */
+  background-color: var(--avatar-bgColor); /* adds opaque bg to transparent avatars */
   border-radius: var(--borderRadius-medium);
   flex-shrink: 0;
-  box-shadow: 0 0 0 1px var(--color-avatar-border);
+  box-shadow: 0 0 0 1px var(--avatar-borderColor);
 }
 
 .avatar-link {

data/app/components/primer/beta/avatar_stack.css

@@ -1 +1 @@
-.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--color-canvas-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--color-canvas-default);border-radius:var(--borderRadius-small,3px);border-right:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-canvas-default);box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--borderRadius-small,3px)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--color-canvas-subtle);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-canvas-default);position:absolute}.avatar.avatar-more:before{background:var(--color-avatar-stack-fade-more);width:17px}.avatar.avatar-more:after{background:var(--color-avatar-stack-fade);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--color-avatar-stack-fade)}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--color-canvas-subtle);width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-canvas-default);border-right:0;margin-left:-11px;margin-right:0}
+.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default,var(--color-canvas-default));border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default,var(--color-canvas-default));border-radius:var(--borderRadius-small,3px);border-right:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));box-shadow:none;box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}.AvatarStack-body .avatar:first-child{z-index:3}.AvatarStack-body .avatar:last-child{border-right:0;z-index:1}.AvatarStack-body .avatar img{border-radius:var(--borderRadius-small,3px)}.AvatarStack-body .avatar:nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:3px}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted,var(--color-canvas-inset));margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted,var(--color-avatar-stack-fade-more));width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade));width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}.AvatarStack--right .AvatarStack-body:hover .avatar{margin-left:3px;margin-right:0}.AvatarStack--right .AvatarStack-body .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default,var(--color-avatar-stack-fade))}.AvatarStack--right .avatar.avatar-more:before{width:5px}.AvatarStack--right .avatar.avatar-more:after{background:var(--bgColor-muted,var(--color-canvas-inset));width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--bgColor-default,var(--color-canvas-default));border-right:0;margin-left:-11px;margin-right:0}

data/app/components/primer/beta/avatar_stack.css.map

@@ -1 +1 @@
-{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,sCAAuC,CACvC,mBAAoB,CAFpB,YAoDF,CAhDE,0BAQE,4CAA6C,CAE7C,2CAAwC,CADxC,wFAAuE,CAEvE,eAAgB,CALhB,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAEZ,kBAAmB,CANnB,iBAAkB,CAWlB,iCAAmC,CARnC,UAAW,CAFX,SA8BF,CAlBE,sCACE,SACF,CAEA,qCAEE,cAAe,CADf,SAEF,CAEA,8BACE,2CACF,CAGA,yCACE,YAAa,CACb,SACF,CAIA,gCACE,gBACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,qCAAsC,CADtC,cAAe,CADf,SAuBF,CAnBE,qDAME,iBAAkB,CADlB,UAAW,CAFX,aAAc,CACd,WAAY,CAGZ,mFAAkE,CALlE,iBAMF,CAEA,2BAEE,8CAA+C,CAD/C,UAEF,CAEA,0BAEE,yCAA0C,CAD1C,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,oDAEE,eAAgB,CADhB,cAEF,CAEA,+DACE,aACF,CAGF,wCACE,yCAUF,CARE,+CACE,SACF,CAEA,8CAEE,qCAAsC,CADtC,SAEF,CAGF,4BAIE,uFAAsE,CADtE,cAAe,CADf,iBAAkB,CADlB,cAIF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--color-canvas-default);\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    margin-right: -11px;\n    background-color: var(--color-canvas-default);\n    border-right: var(--borderWidth-thin) solid var(--color-canvas-default);\n    border-radius: var(--borderRadius-small);\n    box-shadow: none;\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n      border-right: 0;\n    }\n\n    & img {\n      border-radius: var(--borderRadius-small);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: 3px;\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--color-canvas-subtle);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    border-radius: 2px;\n    outline: var(--borderWidth-thin) solid var(--color-canvas-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--color-avatar-stack-fade-more);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--color-avatar-stack-fade);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: 3px;\n    }\n\n    & .avatar:not(:last-child) {\n      border-left: 0;\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--color-avatar-stack-fade);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--color-canvas-subtle);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    margin-left: -11px;\n    border-right: 0;\n    border-left: var(--borderWidth-thin) solid var(--color-canvas-default);\n  }\n}\n"]}
+{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,6DAAkC,CAClC,mBAAoB,CAFpB,YAoDF,CAhDE,0BAQE,mEAAwC,CAExC,2CAAwC,CADxC,+GAAkE,CAElE,eAAgB,CALhB,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAEZ,kBAAmB,CANnB,iBAAkB,CAWlB,iCAAmC,CARnC,UAAW,CAFX,SA8BF,CAlBE,sCACE,SACF,CAEA,qCAEE,cAAe,CADf,SAEF,CAEA,8BACE,2CACF,CAGA,yCACE,YAAa,CACb,SACF,CAIA,gCACE,gBACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,yDAAgC,CADhC,cAAe,CADf,SAuBF,CAnBE,qDAME,iBAAkB,CADlB,UAAW,CAFX,aAAc,CACd,WAAY,CAGZ,0GAA6D,CAL7D,iBAMF,CAEA,2BAEE,oFAAiD,CADjD,UAEF,CAEA,0BAEE,iFAAmD,CADnD,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,oDAEE,eAAgB,CADhB,cAEF,CAEA,+DACE,aACF,CAGF,wCACE,iFAUF,CARE,+CACE,SACF,CAEA,8CAEE,yDAAgC,CADhC,SAEF,CAGF,4BAIE,8GAAiE,CADjE,cAAe,CADf,iBAAkB,CADlB,cAIF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n  position: relative;\n  min-width: 26px;\n  height: 20px;\n\n  & .AvatarStack-body {\n    position: absolute;\n  }\n\n  &.AvatarStack--two {\n    min-width: 36px;\n  }\n\n  &.AvatarStack--three-plus {\n    min-width: 46px;\n  }\n}\n\n.AvatarStack-body {\n  display: flex;\n  background: var(--bgColor-default);\n  border-radius: 100px;\n\n  & .avatar {\n    position: relative;\n    z-index: 2;\n    display: flex;\n    width: 20px;\n    height: 20px;\n    box-sizing: content-box;\n    margin-right: -11px;\n    background-color: var(--bgColor-default);\n    border-right: var(--borderWidth-thin) solid var(--bgColor-default);\n    border-radius: var(--borderRadius-small);\n    box-shadow: none;\n    transition: margin 0.1s ease-in-out;\n\n    &:first-child {\n      z-index: 3;\n    }\n\n    &:last-child {\n      z-index: 1;\n      border-right: 0;\n    }\n\n    & img {\n      border-radius: var(--borderRadius-small);\n    }\n\n    /* Account for 4+ avatars */\n    &:nth-child(n + 4) {\n      display: none;\n      opacity: 0;\n    }\n  }\n\n  &:hover {\n    & .avatar {\n      margin-right: 3px;\n    }\n\n    & .avatar:nth-child(n + 4) {\n      display: flex;\n      opacity: 1;\n    }\n\n    & .avatar-more {\n      display: none !important;\n    }\n  }\n}\n\n.avatar.avatar-more {\n  z-index: 1;\n  margin-right: 0;\n  background: var(--bgColor-muted);\n\n  &::before,\n  &::after {\n    position: absolute;\n    display: block;\n    height: 20px;\n    content: '';\n    border-radius: 2px;\n    outline: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n\n  &::before {\n    width: 17px;\n    background: var(--avatarStack-fade-bgColor-muted);\n  }\n\n  &::after {\n    width: 14px;\n    background: var(--avatarStack-fade-bgColor-default);\n  }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n  & .AvatarStack-body {\n    right: 0;\n    flex-direction: row-reverse;\n\n    &:hover .avatar {\n      margin-right: 0;\n      margin-left: 3px;\n    }\n\n    & .avatar:not(:last-child) {\n      border-left: 0;\n    }\n  }\n\n  & .avatar.avatar-more {\n    background: var(--avatarStack-fade-bgColor-default);\n\n    &::before {\n      width: 5px;\n    }\n\n    &::after {\n      width: 2px;\n      background: var(--bgColor-muted);\n    }\n  }\n\n  & .avatar {\n    margin-right: 0;\n    margin-left: -11px;\n    border-right: 0;\n    border-left: var(--borderWidth-thin) solid var(--bgColor-default);\n  }\n}\n"]}

data/app/components/primer/beta/avatar_stack.pcss

@@ -23,7 +23,7 @@
 
 .AvatarStack-body {
   display: flex;
-  background: var(--color-canvas-default);
+  background: var(--bgColor-default);
   border-radius: 100px;
 
   & .avatar {
@@ -34,8 +34,8 @@
     height: 20px;
     box-sizing: content-box;
     margin-right: -11px;
-    background-color: var(--color-canvas-default);
-    border-right: var(--borderWidth-thin) solid var(--color-canvas-default);
+    background-color: var(--bgColor-default);
+    border-right: var(--borderWidth-thin) solid var(--bgColor-default);
     border-radius: var(--borderRadius-small);
     box-shadow: none;
     transition: margin 0.1s ease-in-out;
@@ -79,7 +79,7 @@
 .avatar.avatar-more {
   z-index: 1;
   margin-right: 0;
-  background: var(--color-canvas-subtle);
+  background: var(--bgColor-muted);
 
   &::before,
   &::after {
@@ -88,17 +88,17 @@
     height: 20px;
     content: '';
     border-radius: 2px;
-    outline: var(--borderWidth-thin) solid var(--color-canvas-default);
+    outline: var(--borderWidth-thin) solid var(--bgColor-default);
   }
 
   &::before {
     width: 17px;
-    background: var(--color-avatar-stack-fade-more);
+    background: var(--avatarStack-fade-bgColor-muted);
   }
 
   &::after {
     width: 14px;
-    background: var(--color-avatar-stack-fade);
+    background: var(--avatarStack-fade-bgColor-default);
   }
 }
 
@@ -120,7 +120,7 @@
   }
 
   & .avatar.avatar-more {
-    background: var(--color-avatar-stack-fade);
+    background: var(--avatarStack-fade-bgColor-default);
 
     &::before {
       width: 5px;
@@ -128,7 +128,7 @@
 
     &::after {
       width: 2px;
-      background: var(--color-canvas-subtle);
+      background: var(--bgColor-muted);
     }
   }
 
@@ -136,6 +136,6 @@
     margin-right: 0;
     margin-left: -11px;
     border-right: 0;
-    border-left: var(--borderWidth-thin) solid var(--color-canvas-default);
+    border-left: var(--borderWidth-thin) solid var(--bgColor-default);
   }
 }

data/app/components/primer/beta/blankslate.css

@@ -1 +1 @@
-.blankslate{padding:var(--base-size-32,2rem);position:relative;text-align:center}.blankslate p{color:var(--color-fg-muted)}.blankslate code{background:var(--color-canvas-default);border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-muted);border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--color-fg-muted);margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px)}.blankslate-spacious{padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}
+.blankslate{padding:var(--base-size-32,2rem);position:relative;text-align:center}.blankslate p{color:var(--fgColor-muted,var(--color-fg-muted))}.blankslate code{background:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-neutral-muted));border-radius:var(--borderRadius-medium,6px);font-size:var(--text-body-size-medium,.875rem);padding:2px 5px 3px}.blankslate img{height:56px;width:56px}.blankslate-icon{color:var(--fgColor-muted,var(--color-fg-muted));margin-bottom:var(--stack-gap-condensed,.5rem);margin-left:var(--control-small-gap,.25rem);margin-right:var(--control-small-gap,.25rem)}.blankslate-image{margin-bottom:var(--stack-gap-normal,1rem)}.blankslate-heading{margin-bottom:var(--base-size-4,.25rem)}.blankslate-action{margin-top:var(--stack-gap-normal,1rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-spacious,1.5rem)}.blankslate-action:last-of-type{margin-bottom:var(--stack-gap-condensed,.5rem)}.blankslate-capped{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px)}.blankslate-spacious{padding:var(--base-size-80,5rem) var(--base-size-40,2.5rem)}.blankslate-narrow{margin:0 auto;max-width:485px}.blankslate-large img{height:80px;width:80px}.blankslate-large h3{font-size:24px;margin:var(--stack-gap-normal,1rem) 0}.blankslate-large p{font-size:var(--text-body-size-large,1rem)}.blankslate-clean-background{border:0}

data/app/components/primer/beta/blankslate.css.map

@@ -1 +1 @@
-{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,YAEE,gCAA4B,CAD5B,iBAAkB,CAElB,iBAkBF,CAhBE,cACE,2BACF,CAEA,iBAGE,sCAAuC,CACvC,gFAA+D,CAC/D,4CAAyC,CAHzC,8CAAuC,CADvC,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,2BAA4B,CAF5B,8CAAyC,CACzC,2CAAqC,CAFrC,4CAIF,CAEA,kBACE,0CACF,CAEA,oBACE,uCACF,CAEA,mBACE,uCASF,CAPE,iCACE,2CACF,CAEA,gCACE,8CACF,CAGF,mBACE,+EACF,CAEA,qBACE,2DACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,qCAIF,CAEA,oBACE,0CACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n  position: relative;\n  padding: var(--base-size-32);\n  text-align: center;\n\n  & p {\n    color: var(--color-fg-muted);\n  }\n\n  & code {\n    padding: 2px 5px 3px;\n    font-size: var(--text-body-size-medium);\n    background: var(--color-canvas-default);\n    border: var(--borderWidth-thin) solid var(--color-border-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  margin-right: var(--control-small-gap);\n  margin-bottom: var(--stack-gap-condensed);\n  margin-left: var(--control-small-gap);\n  color: var(--color-fg-muted);\n}\n\n.blankslate-image {\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n}\n\n.blankslate-action {\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  padding: var(--base-size-80) var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  & h3 {\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    font-size: 24px;\n  }\n\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n"]}
+{"version":3,"sources":["blankslate.pcss"],"names":[],"mappings":"AAEA,YAEE,gCAA4B,CAD5B,iBAAkB,CAElB,iBAkBF,CAhBE,cACE,gDACF,CAEA,iBAGE,6DAAkC,CAClC,0GAA8D,CAC9D,4CAAyC,CAHzC,8CAAuC,CADvC,mBAKF,CAEA,gBAEE,WAAY,CADZ,UAEF,CAGF,iBAIE,gDAA2B,CAF3B,8CAAyC,CACzC,2CAAqC,CAFrC,4CAIF,CAEA,kBACE,0CACF,CAEA,oBACE,uCACF,CAEA,mBACE,uCASF,CAPE,iCACE,2CACF,CAEA,gCACE,8CACF,CAGF,mBACE,+EACF,CAEA,qBACE,2DACF,CAEA,mBAEE,aAAc,CADd,eAEF,CAKE,sBAEE,WAAY,CADZ,UAEF,CAEA,qBAIE,cAAe,CAHf,qCAIF,CAEA,oBACE,0CACF,CAKF,6BACE,QACF","file":"blankslate.css","sourcesContent":["/* blankslate */\n\n.blankslate {\n  position: relative;\n  padding: var(--base-size-32);\n  text-align: center;\n\n  & p {\n    color: var(--fgColor-muted);\n  }\n\n  & code {\n    padding: 2px 5px 3px;\n    font-size: var(--text-body-size-medium);\n    background: var(--bgColor-default);\n    border: var(--borderWidth-thin) solid var(--borderColor-muted);\n    border-radius: var(--borderRadius-medium);\n  }\n\n  & img {\n    width: 56px;\n    height: 56px;\n  }\n}\n\n.blankslate-icon {\n  margin-right: var(--control-small-gap);\n  margin-bottom: var(--stack-gap-condensed);\n  margin-left: var(--control-small-gap);\n  color: var(--fgColor-muted);\n}\n\n.blankslate-image {\n  margin-bottom: var(--stack-gap-normal);\n}\n\n.blankslate-heading {\n  margin-bottom: var(--base-size-4);\n}\n\n.blankslate-action {\n  margin-top: var(--stack-gap-normal);\n\n  &:first-of-type {\n    margin-top: var(--stack-gap-spacious);\n  }\n\n  &:last-of-type {\n    margin-bottom: var(--stack-gap-condensed);\n  }\n}\n\n.blankslate-capped {\n  border-radius: 0 0 var(--borderRadius-medium) var(--borderRadius-medium);\n}\n\n.blankslate-spacious {\n  padding: var(--base-size-80) var(--base-size-40);\n}\n\n.blankslate-narrow {\n  max-width: 485px;\n  margin: 0 auto;\n}\n\n/* was .large-format\n** QUESTION: should we deprecate this? */\n.blankslate-large {\n  & img {\n    width: 80px;\n    height: 80px;\n  }\n\n  & h3 {\n    margin: var(--stack-gap-normal) 0;\n\n    /* font-size: $h3-size; // This doesn't actually make the text larger. Should this be $h2-size? */\n    font-size: 24px;\n  }\n\n  & p {\n    font-size: var(--text-body-size-large);\n  }\n}\n\n/* was .clean-background\n** TO DO: deprecate this and use utility instead */\n.blankslate-clean-background {\n  border: 0;\n}\n"]}

data/app/components/primer/beta/blankslate.pcss

@@ -6,14 +6,14 @@
   text-align: center;
 
   & p {
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted);
   }
 
   & code {
     padding: 2px 5px 3px;
     font-size: var(--text-body-size-medium);
-    background: var(--color-canvas-default);
-    border: var(--borderWidth-thin) solid var(--color-border-muted);
+    background: var(--bgColor-default);
+    border: var(--borderWidth-thin) solid var(--borderColor-muted);
     border-radius: var(--borderRadius-medium);
   }
 
@@ -27,7 +27,7 @@
   margin-right: var(--control-small-gap);
   margin-bottom: var(--stack-gap-condensed);
   margin-left: var(--control-small-gap);
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted);
 }
 
 .blankslate-image {

data/app/components/primer/beta/border_box.css

@@ -1 +1 @@
-.Box{background-color:var(--color-canvas-default);border-color:var(--color-border-default);border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem))}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed,.5rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,1.25rem)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious,1.5rem)*-1) calc(var(--stack-gap-spacious,1.5rem)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,1.5rem)}.Box-header{background-color:var(--color-canvas-subtle);border-color:var(--color-border-default);border-style:solid;border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px);border-width:var(--borderWidth-thin,max(1px,.0625rem));margin:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) 0;padding:var(--stack-padding-normal,1rem)}.Box-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);padding:var(--stack-padding-normal,1rem)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px);margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.Box-row{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-muted);list-style-type:none;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--color-accent-emphasis)}.Box-row.navigation-focus .Box-row--drag-button{color:var(--color-accent-fg);cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--color-canvas-subtle)}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--color-canvas-subtle)}.Box-row--focus-blue.navigation-focus{background-color:var(--color-accent-subtle)}.Box-row--hover-gray:hover{background-color:var(--color-canvas-subtle)}.Box-row--hover-blue:hover{background-color:var(--color-accent-subtle)}@media (min-width:768px){.Box-row-link{color:var(--color-fg-default);text-decoration:none}.Box-row-link:hover{color:var(--color-accent-fg);text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px);border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--color-border-default);margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--color-accent-muted)}.Box--blue .Box-header{background-color:var(--color-accent-subtle)}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--color-accent-muted)}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--color-danger-emphasis)}.Box-header--blue{background-color:var(--color-accent-subtle);border-color:var(--color-accent-muted)}.Box-row--yellow{background-color:var(--color-attention-subtle)}.Box-row--blue{background-color:var(--color-accent-subtle)}.Box-row--gray{background-color:var(--color-canvas-subtle)}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious,1rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem) var(--control-medium-paddingInline-spacious,1rem)}
+.Box{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,6px);border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem))}.Box--condensed{line-height:1.25}.Box--condensed .Box-body,.Box--condensed .Box-footer,.Box--condensed .Box-header{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--condensed .Box-btn-octicon.btn-octicon{line-height:1.25;margin:calc(var(--controlStack-medium-gap-condensed,.5rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.Box--condensed .Box-row{padding:var(--stack-padding-condensed,.5rem) var(--stack-padding-normal,1rem)}.Box--spacious .Box-header{line-height:1.25;padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-title{font-size:var(--text-title-size-medium,1.25rem)}.Box--spacious .Box-body,.Box--spacious .Box-btn-octicon.btn-octicon,.Box--spacious .Box-footer{padding:var(--stack-padding-spacious,1.5rem)}.Box--spacious .Box-btn-octicon.btn-octicon{margin:calc(var(--stack-gap-spacious,1.5rem)*-1) calc(var(--stack-gap-spacious,1.5rem)*-1)}.Box--spacious .Box-row{padding:var(--stack-padding-spacious,1.5rem)}.Box-header{background-color:var(--bgColor-muted,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px);border-width:var(--borderWidth-thin,max(1px,.0625rem));margin:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) calc(var(--borderWidth-thin,max(1px, .0625rem))*-1) 0;padding:var(--stack-padding-normal,1rem)}.Box-title{font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-semibold,600)}.Box-body{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));padding:var(--stack-padding-normal,1rem)}.Box-body:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px);margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1)}.Box-row{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-neutral-muted));list-style-type:none;margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box-row:first-of-type{border-top-left-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}.Box-row:last-of-type{border-bottom-left-radius:var(--borderRadius-medium,6px);border-bottom-right-radius:var(--borderRadius-medium,6px)}.Box-row.Box-row--unread,.Box-row.unread{box-shadow:inset 2px 0 0 var(--borderColor-accent-emphasis,var(--color-accent-fg))}.Box-row.navigation-focus .Box-row--drag-button{color:var(--fgColor-accent,var(--color-accent-fg));cursor:grab;opacity:1}.Box-row.navigation-focus.is-dragging .Box-row--drag-button{cursor:grabbing}.Box-row.navigation-focus.sortable-chosen,.Box-row.navigation-focus.sortable-ghost{background-color:var(--bgColor-muted,var(--color-canvas-inset))}.Box-row.navigation-focus.sortable-ghost .Box-row--drag-hide{opacity:0}.Box-row--focus-gray.navigation-focus{background-color:var(--bgColor-muted,var(--color-canvas-inset))}.Box-row--focus-blue.navigation-focus{background-color:var(--bgColor-accent-muted,var(--color-accent-muted))}.Box-row--hover-gray:hover{background-color:var(--bgColor-muted,var(--color-canvas-inset))}.Box-row--hover-blue:hover{background-color:var(--bgColor-accent-muted,var(--color-accent-muted))}@media (min-width:768px){.Box-row-link{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none}.Box-row-link:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}}.Box-row--drag-button{opacity:0}.Box-footer{border-radius:0 0 var(--borderRadius-medium,6px) var(--borderRadius-medium,6px);border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-top:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);padding:var(--stack-padding-normal,1rem)}.Box--scrollable{max-height:324px;overflow:scroll}.Box--blue,.Box--blue .Box-header{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--blue .Box-header{background-color:var(--bgColor-accent-muted,var(--color-accent-muted))}.Box--blue .Box-body,.Box--blue .Box-footer,.Box--blue .Box-row{border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box--danger,.Box--danger .Box-body:last-of-type,.Box--danger .Box-row:first-of-type{border-color:var(--borderColor-danger-emphasis,var(--color-danger-emphasis))}.Box-header--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-muted));border-color:var(--borderColor-accent-muted,var(--color-accent-muted))}.Box-row--yellow{background-color:var(--bgColor-attention-muted,var(--color-attention-subtle))}.Box-row--blue{background-color:var(--bgColor-accent-muted,var(--color-accent-muted))}.Box-row--gray{background-color:var(--bgColor-muted,var(--color-canvas-inset))}.Box-btn-octicon.btn-octicon{line-height:1.5;margin:calc(var(--controlStack-small-gap-spacious,1rem)*-1) calc(var(--controlStack-small-gap-spacious,1rem)*-1);padding:var(--control-medium-paddingInline-spacious,1rem) var(--control-medium-paddingInline-spacious,1rem)}