primer_view_components 0.3.1 → 0.5.0

data/app/components/primer/alpha/tool_tip.js

@@ -10,10 +10,11 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
 var _ToolTipElement_instances, _ToolTipElement_abortController, _ToolTipElement_align, _ToolTipElement_side, _ToolTipElement_allowUpdatePosition, _ToolTipElement_update, _ToolTipElement_updateControlReference, _ToolTipElement_updateDirection, _ToolTipElement_updatePosition;
+import '@oddbird/popover-polyfill';
 import { getAnchoredPosition } from '@primer/behaviors';
-const TOOLTIP_OPEN_CLASS = 'tooltip-open';
 const TOOLTIP_ARROW_EDGE_OFFSET = 6;
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only';
+const TOOLTIP_OFFSET = 10;
 const DIRECTION_CLASSES = [
     'tooltip-n',
     'tooltip-s',
@@ -24,6 +25,23 @@ const DIRECTION_CLASSES = [
     'tooltip-nw',
     'tooltip-sw'
 ];
+function closeOpenTooltips(except) {
+    for (const tooltip of openTooltips) {
+        if (tooltip === except)
+            continue;
+        if (tooltip.matches(':popover-open')) {
+            tooltip.hidePopover();
+        }
+        else {
+            openTooltips.delete(tooltip);
+        }
+    }
+}
+function focusOutListener() {
+    closeOpenTooltips();
+}
+const tooltips = new Set();
+const openTooltips = new Set();
 class ToolTipElement extends HTMLElement {
     constructor() {
         super(...arguments);
@@ -36,12 +54,10 @@ class ToolTipElement extends HTMLElement {
     styles() {
         return `
       :host {
-        position: absolute;
-        z-index: 1000000;
-        padding: .5em .75em;
+        padding: .5em .75em !important;
         font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
         -webkit-font-smoothing: subpixel-antialiased;
-        color: var(--color-fg-on-emphasis);
+        color: var(--color-fg-on-emphasis) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
@@ -49,13 +65,16 @@ class ToolTipElement extends HTMLElement {
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--color-neutral-emphasis-plus);
+        background: var(--color-neutral-emphasis-plus) !important;
         border-radius: 6px;
+        border: 0 !important;
         opacity: 0;
         max-width: 250px;
         word-wrap: break-word;
         white-space: normal;
-        width: max-content;
+        width: max-content !important;
+        inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
+        overflow: visible !important;
       }
 
       :host:before{
@@ -69,7 +88,7 @@ class ToolTipElement extends HTMLElement {
 
       @keyframes tooltip-appear {
         from {
-          opacity: 0
+          opacity: 0;
         }
         to {
           opacity: 1
@@ -85,8 +104,17 @@ class ToolTipElement extends HTMLElement {
         content: ""
       }
 
-      :host(.${TOOLTIP_OPEN_CLASS}),
-      :host(.${TOOLTIP_OPEN_CLASS}):before {
+      :host(:popover-open),
+      :host(:popover-open):before {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
+        animation-delay: .4s
+      }
+
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
@@ -177,16 +205,22 @@ class ToolTipElement extends HTMLElement {
     get control() {
         return this.ownerDocument.getElementById(this.htmlFor);
     }
+    /* @deprecated */
     set hiddenFromView(value) {
-        this.classList.toggle(TOOLTIP_SR_ONLY_CLASS, value);
-        if (this.isConnected)
-            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
+        if (value && this.matches(':popover-open')) {
+            this.hidePopover();
+        }
+        else if (!value && !this.matches(':popover-open')) {
+            this.showPopover();
+        }
     }
+    /* @deprecated */
     get hiddenFromView() {
-        return this.classList.contains(TOOLTIP_SR_ONLY_CLASS);
+        return !this.matches(':popover-open');
     }
     connectedCallback() {
-        var _a;
+        var _a, _b;
+        tooltips.add(this);
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateControlReference).call(this);
         __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updateDirection).call(this);
         if (!this.shadowRoot) {
@@ -195,7 +229,7 @@ class ToolTipElement extends HTMLElement {
             style.textContent = this.styles();
             shadow.appendChild(document.createElement('slot'));
         }
-        this.hiddenFromView = true;
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, false);
         __classPrivateFieldSet(this, _ToolTipElement_allowUpdatePosition, true, "f");
         if (!this.control)
             return;
@@ -204,35 +238,48 @@ class ToolTipElement extends HTMLElement {
         __classPrivateFieldSet(this, _ToolTipElement_abortController, new AbortController(), "f");
         const { signal } = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f");
         this.addEventListener('mouseleave', this, { signal });
+        this.addEventListener('toggle', this, { signal });
         this.control.addEventListener('mouseenter', this, { signal });
         this.control.addEventListener('mouseleave', this, { signal });
         this.control.addEventListener('focus', this, { signal });
-        this.control.addEventListener('blur', this, { signal });
+        this.control.addEventListener('mousedown', this, { signal });
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore popoverTargetElement is not in the type definition
+        (_b = this.control.popoverTargetElement) === null || _b === void 0 ? void 0 : _b.addEventListener('beforetoggle', this, {
+            signal
+        });
+        this.ownerDocument.addEventListener('focusout', focusOutListener);
         this.ownerDocument.addEventListener('keydown', this, { signal });
-        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this);
     }
     disconnectedCallback() {
         var _a;
+        tooltips.delete(this);
+        openTooltips.delete(this);
         (_a = __classPrivateFieldGet(this, _ToolTipElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
     }
-    handleEvent(event) {
+    async handleEvent(event) {
         if (!this.control)
             return;
+        const showing = this.matches(':popover-open');
         // Ensures that tooltip stays open when hovering between tooltip and element
         // WCAG Success Criterion 1.4.13 Hoverable
-        if ((event.type === 'mouseenter' || event.type === 'focus') && this.hiddenFromView) {
-            this.hiddenFromView = false;
-        }
-        else if (event.type === 'blur') {
-            this.hiddenFromView = true;
-        }
-        else if (event.type === 'mouseleave' &&
+        const shouldShow = event.type === 'mouseenter' || event.type === 'focus';
+        const isMouseLeaveFromButton = event.type === 'mouseleave' &&
             event.relatedTarget !== this.control &&
-            event.relatedTarget !== this) {
-            this.hiddenFromView = true;
+            event.relatedTarget !== this;
+        const isEscapeKeydown = event.type === 'keydown' && event.key === 'Escape';
+        const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control;
+        const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this;
+        const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover;
+        await Promise.resolve();
+        if (!showing && shouldShow) {
+            this.showPopover();
+        }
+        else if (showing && shouldHide) {
+            this.hidePopover();
         }
-        else if (event.type === 'keydown' && event.key === 'Escape' && !this.hiddenFromView) {
-            this.hiddenFromView = true;
+        if (event.type === 'toggle') {
+            __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_update).call(this, event.newState === 'open');
         }
     }
     attributeChangedCallback(name) {
@@ -246,17 +293,17 @@ class ToolTipElement extends HTMLElement {
         }
     }
 }
-_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update() {
-    if (this.hiddenFromView) {
-        this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES);
+_ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new WeakMap(), _ToolTipElement_side = new WeakMap(), _ToolTipElement_allowUpdatePosition = new WeakMap(), _ToolTipElement_instances = new WeakSet(), _ToolTipElement_update = function _ToolTipElement_update(isOpen) {
+    if (isOpen) {
+        openTooltips.add(this);
+        this.classList.remove(TOOLTIP_SR_ONLY_CLASS);
+        closeOpenTooltips(this);
+        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
     }
     else {
-        this.classList.add(TOOLTIP_OPEN_CLASS);
-        for (const tooltip of this.ownerDocument.querySelectorAll(this.tagName)) {
-            if (tooltip !== this)
-                tooltip.hiddenFromView = true;
-        }
-        __classPrivateFieldGet(this, _ToolTipElement_instances, "m", _ToolTipElement_updatePosition).call(this);
+        openTooltips.delete(this);
+        this.classList.remove(...DIRECTION_CLASSES);
+        this.classList.add(TOOLTIP_SR_ONLY_CLASS);
     }
 }, _ToolTipElement_updateControlReference = function _ToolTipElement_updateControlReference() {
     if (!this.id || !this.control)
@@ -331,10 +378,8 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
 }, _ToolTipElement_updatePosition = function _ToolTipElement_updatePosition() {
     if (!this.control)
         return;
-    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || this.hiddenFromView)
+    if (!__classPrivateFieldGet(this, _ToolTipElement_allowUpdatePosition, "f") || !this.matches(':popover-open'))
         return;
-    const TOOLTIP_OFFSET = 10;
-    this.style.left = `0px`; // Ensures we have reliable tooltip width in `getAnchoredPosition`
     const position = getAnchoredPosition(this, this.control, {
         side: __classPrivateFieldGet(this, _ToolTipElement_side, "f"),
         align: __classPrivateFieldGet(this, _ToolTipElement_align, "f"),
@@ -342,8 +387,8 @@ _ToolTipElement_abortController = new WeakMap(), _ToolTipElement_align = new Wea
     });
     const anchorSide = position.anchorSide;
     const align = position.anchorAlign;
-    this.style.top = `${position.top}px`;
-    this.style.left = `${position.left}px`;
+    this.style.setProperty('--tool-tip-position-top', `${position.top}px`);
+    this.style.setProperty('--tool-tip-position-left', `${position.left}px`);
     let direction = 's';
     if (anchorSide === 'outside-left') {
         direction = 'w';

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

@@ -1,9 +1,10 @@
 import type {AnchorAlignment, AnchorSide} from '@primer/behaviors'
+import '@oddbird/popover-polyfill'
 import {getAnchoredPosition} from '@primer/behaviors'
 
-const TOOLTIP_OPEN_CLASS = 'tooltip-open'
 const TOOLTIP_ARROW_EDGE_OFFSET = 6
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only'
+const TOOLTIP_OFFSET = 10
 
 type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
 
@@ -18,16 +19,31 @@ const DIRECTION_CLASSES = [
   'tooltip-sw'
 ]
 
+function closeOpenTooltips(except?: Element) {
+  for (const tooltip of openTooltips) {
+    if (tooltip === except) continue
+    if (tooltip.matches(':popover-open')) {
+      tooltip.hidePopover()
+    } else {
+      openTooltips.delete(tooltip)
+    }
+  }
+}
+
+function focusOutListener() {
+  closeOpenTooltips()
+}
+
+const tooltips = new Set<ToolTipElement>()
+const openTooltips = new Set<ToolTipElement>()
 class ToolTipElement extends HTMLElement {
   styles() {
     return `
       :host {
-        position: absolute;
-        z-index: 1000000;
-        padding: .5em .75em;
+        padding: .5em .75em !important;
         font: normal normal 11px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
         -webkit-font-smoothing: subpixel-antialiased;
-        color: var(--color-fg-on-emphasis);
+        color: var(--color-fg-on-emphasis) !important;
         text-align: center;
         text-decoration: none;
         text-shadow: none;
@@ -35,13 +51,16 @@ class ToolTipElement extends HTMLElement {
         letter-spacing: normal;
         word-wrap: break-word;
         white-space: pre;
-        background: var(--color-neutral-emphasis-plus);
+        background: var(--color-neutral-emphasis-plus) !important;
         border-radius: 6px;
+        border: 0 !important;
         opacity: 0;
         max-width: 250px;
         word-wrap: break-word;
         white-space: normal;
-        width: max-content;
+        width: max-content !important;
+        inset: var(--tool-tip-position-top, 0) auto auto var(--tool-tip-position-left, 0) !important;
+        overflow: visible !important;
       }
 
       :host:before{
@@ -55,7 +74,7 @@ class ToolTipElement extends HTMLElement {
 
       @keyframes tooltip-appear {
         from {
-          opacity: 0
+          opacity: 0;
         }
         to {
           opacity: 1
@@ -71,8 +90,17 @@ class ToolTipElement extends HTMLElement {
         content: ""
       }
 
-      :host(.${TOOLTIP_OPEN_CLASS}),
-      :host(.${TOOLTIP_OPEN_CLASS}):before {
+      :host(:popover-open),
+      :host(:popover-open):before {
+        animation-name: tooltip-appear;
+        animation-duration: .1s;
+        animation-fill-mode: forwards;
+        animation-timing-function: ease-in;
+        animation-delay: .4s
+      }
+
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
@@ -176,16 +204,22 @@ class ToolTipElement extends HTMLElement {
     return this.ownerDocument.getElementById(this.htmlFor)
   }
 
+  /* @deprecated */
   set hiddenFromView(value: true | false) {
-    this.classList.toggle(TOOLTIP_SR_ONLY_CLASS, value)
-    if (this.isConnected) this.#update()
+    if (value && this.matches(':popover-open')) {
+      this.hidePopover()
+    } else if (!value && !this.matches(':popover-open')) {
+      this.showPopover()
+    }
   }
 
+  /* @deprecated */
   get hiddenFromView() {
-    return this.classList.contains(TOOLTIP_SR_ONLY_CLASS)
+    return !this.matches(':popover-open')
   }
 
   connectedCallback() {
+    tooltips.add(this)
     this.#updateControlReference()
     this.#updateDirection()
     if (!this.shadowRoot) {
@@ -194,7 +228,7 @@ class ToolTipElement extends HTMLElement {
       style.textContent = this.styles()
       shadow.appendChild(document.createElement('slot'))
     }
-    this.hiddenFromView = true
+    this.#update(false)
     this.#allowUpdatePosition = true
 
     if (!this.control) return
@@ -206,49 +240,66 @@ class ToolTipElement extends HTMLElement {
     const {signal} = this.#abortController
 
     this.addEventListener('mouseleave', this, {signal})
+    this.addEventListener('toggle', this, {signal})
     this.control.addEventListener('mouseenter', this, {signal})
     this.control.addEventListener('mouseleave', this, {signal})
     this.control.addEventListener('focus', this, {signal})
-    this.control.addEventListener('blur', this, {signal})
+    this.control.addEventListener('mousedown', this, {signal})
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore popoverTargetElement is not in the type definition
+    this.control.popoverTargetElement?.addEventListener('beforetoggle', this, {
+      signal
+    })
+    this.ownerDocument.addEventListener('focusout', focusOutListener)
     this.ownerDocument.addEventListener('keydown', this, {signal})
-    this.#update()
   }
 
   disconnectedCallback() {
+    tooltips.delete(this)
+    openTooltips.delete(this)
     this.#abortController?.abort()
   }
 
-  handleEvent(event: Event) {
+  async handleEvent(event: Event) {
     if (!this.control) return
+    const showing = this.matches(':popover-open')
 
     // Ensures that tooltip stays open when hovering between tooltip and element
     // WCAG Success Criterion 1.4.13 Hoverable
-    if ((event.type === 'mouseenter' || event.type === 'focus') && this.hiddenFromView) {
-      this.hiddenFromView = false
-    } else if (event.type === 'blur') {
-      this.hiddenFromView = true
-    } else if (
+    const shouldShow = event.type === 'mouseenter' || event.type === 'focus'
+    const isMouseLeaveFromButton =
       event.type === 'mouseleave' &&
       (event as MouseEvent).relatedTarget !== this.control &&
       (event as MouseEvent).relatedTarget !== this
-    ) {
-      this.hiddenFromView = true
-    } else if (event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape' && !this.hiddenFromView) {
-      this.hiddenFromView = true
+    const isEscapeKeydown = event.type === 'keydown' && (event as KeyboardEvent).key === 'Escape'
+    const isMouseDownOnButton = event.type === 'mousedown' && event.currentTarget === this.control
+    const isOpeningOtherPopover = event.type === 'beforetoggle' && event.currentTarget !== this
+    const shouldHide = isMouseLeaveFromButton || isEscapeKeydown || isMouseDownOnButton || isOpeningOtherPopover
+
+    await Promise.resolve()
+    if (!showing && shouldShow) {
+      this.showPopover()
+    } else if (showing && shouldHide) {
+      this.hidePopover()
+    }
+
+    if (event.type === 'toggle') {
+      this.#update((event as ToggleEvent).newState === 'open')
     }
   }
 
   static observedAttributes = ['data-type', 'data-direction', 'id']
 
-  #update() {
-    if (this.hiddenFromView) {
-      this.classList.remove(TOOLTIP_OPEN_CLASS, ...DIRECTION_CLASSES)
-    } else {
-      this.classList.add(TOOLTIP_OPEN_CLASS)
-      for (const tooltip of this.ownerDocument.querySelectorAll<ToolTipElement>(this.tagName)) {
-        if (tooltip !== this) tooltip.hiddenFromView = true
-      }
+  #update(isOpen: boolean) {
+    if (isOpen) {
+      openTooltips.add(this)
+      this.classList.remove(TOOLTIP_SR_ONLY_CLASS)
+      closeOpenTooltips(this)
       this.#updatePosition()
+    } else {
+      openTooltips.delete(this)
+      this.classList.remove(...DIRECTION_CLASSES)
+      this.classList.add(TOOLTIP_SR_ONLY_CLASS)
     }
   }
 
@@ -326,11 +377,7 @@ class ToolTipElement extends HTMLElement {
 
   #updatePosition() {
     if (!this.control) return
-    if (!this.#allowUpdatePosition || this.hiddenFromView) return
-
-    const TOOLTIP_OFFSET = 10
-
-    this.style.left = `0px` // Ensures we have reliable tooltip width in `getAnchoredPosition`
+    if (!this.#allowUpdatePosition || !this.matches(':popover-open')) return
 
     const position = getAnchoredPosition(this, this.control, {
       side: this.#side,
@@ -340,8 +387,8 @@ class ToolTipElement extends HTMLElement {
     const anchorSide = position.anchorSide
     const align = position.anchorAlign
 
-    this.style.top = `${position.top}px`
-    this.style.left = `${position.left}px`
+    this.style.setProperty('--tool-tip-position-top', `${position.top}px`)
+    this.style.setProperty('--tool-tip-position-left', `${position.left}px`)
 
     let direction: Direction = 's'
 

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

@@ -110,6 +110,7 @@ module Primer
         @system_arguments[:id] ||= self.class.generate_id
         @system_arguments[:tag] = :"tool-tip"
         @system_arguments[:for] = for_id
+        @system_arguments[:popover] = "manual"
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
           "sr-only"

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-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(--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,4EAAmD,CAJnD,YAAa,CAMb,6BAA8B,CAL9B,mCAA+B,CAC/B,eAAgB,CAChB,iBAeF,CAVE,uBAGE,wEAA0E,CAD1E,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, var(--color-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, var(--color-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/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 {