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

package/app/components/primer/beta/breadcrumbs.css.json

@@ -2,10 +2,10 @@
   "name": "beta/breadcrumbs",
   "selectors": [
     ".breadcrumb-item",
-    ".breadcrumb-item:after",
+    ".breadcrumb-item::after",
     ".breadcrumb-item:first-child",
-    ".breadcrumb-item-selected:after",
-    ".breadcrumb-item[aria-current]:not([aria-current=false]):after",
+    ".breadcrumb-item-selected::after",
+    ".breadcrumb-item[aria-current]:not([aria-current='false'])::after",
     ".breadcrumb-item-selected a"
   ]
 }

package/app/components/primer/beta/button.css

@@ -1 +1,385 @@
-:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium,6px);color:var(--button-default-fgColor-rest,var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium,.875rem);font-weight:var(--base-text-weight-medium,500);gap:var(--base-size-4,.25rem);height:var(--control-medium-size,2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal,.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media (pointer:coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}.Button-withTooltip{display:inline-block;position:relative}a.Button:hover,summary.Button:hover{text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0,auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap,.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium,1.42857);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4,.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small,.75rem);gap:var(--control-small-gap,.25rem);height:var(--control-small-size,1.75rem);padding:0 var(--control-small-paddingInline-condensed,.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small,1.66667)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap,.25rem)}.Button--large{gap:var(--control-large-gap,.5rem);height:var(--control-large-size,2.5rem);padding:0 var(--control-large-paddingInline-spacious,1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large,1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap,.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest,var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small)),var(--shadow-highlight,var(--color-primer-shadow-highlight));color:var(--button-primary-fgColor-rest,var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled){background-color:var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor,var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted,var(--color-fg-muted));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest,var(--color-btn-text))}.Button--secondary:hover:not(:disabled){background-color:var(--button-default-bgColor-hover,var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover,var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active,var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active,var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected,var(--color-btn-selected-bg));box-shadow:var(--shadow-inset,var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-rest,var(--color-btn-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));color:var(--fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-invisible-fgColor-rest,var(--color-btn-outline-text))}.Button--invisible:hover:not(:disabled){background-color:var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));border-color:#0000;color:var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--fgColor-link-rest,var(--color-accent-fg))}.Button--invisible .Button-visual{color:var(--fgColor-muted,var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default,var(--color-fg-default))}.Button--link{fill:var(--fgColor-link-rest,var(--color-accent-fg));border:none;color:var(--fgColor-link-rest,var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled){text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--fgColor-disabled,var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--fgColor-disabled,var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest,var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest,var(--color-btn-border));box-shadow:var(--button-default-shadow-resting,var(--color-btn-shadow)),var(--button-default-shadow-inset,var(--color-btn-inset-shadow));color:var(--button-danger-fgColor-rest,var(--color-btn-danger-text))}.Button--danger:hover:not(:disabled){fill:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));background-color:var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));border-color:var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));box-shadow:var(--shadow-resting-small,var(--color-shadow-small)),var(--shadow-highlight,var(--color-primer-shadow-highlight));color:var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text))}.Button--danger:hover:not(:disabled) .Counter{background-color:var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));color:var(--buttonCounter-danger-fgColor-hover,var(--btn-danger-hoverCounterFg))}.Button--danger:active:not(:disabled),.Button--danger[aria-pressed=true]{fill:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));background-color:var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));border-color:var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));box-shadow:var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));color:var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text))}.Button--danger:disabled,.Button--danger[aria-disabled=true]{fill:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));background-color:var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));border-color:var(--button-default-borderColor-rest,var(--color-btn-border));color:var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text))}.Button--danger:disabled .Counter,.Button--danger[aria-disabled=true] .Counter{background-color:var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));color:var(--buttonCounter-danger-fgColor-disabled,var(--btn-danger-disabledCounterFg))}.Button--danger .Counter{background-color:var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));color:var(--buttonCounter-danger-fgColor-rest,var(--btn-danger-counterFg))}.Button--iconOnly{display:inline-grid;padding:unset;place-content:center;width:var(--control-medium-size,2rem)}.Button--iconOnly.Button--small{width:var(--control-small-size,1.75rem)}.Button--iconOnly.Button--large{width:var(--control-large-size,2.5rem)}
+/* CSS for Button  */
+
+/* temporary, pre primitives release */
+
+:root {
+  --duration-fast: 80ms;
+  --easing-easeInOut: cubic-bezier(0.65, 0, 0.35, 1);
+}
+
+/* base button */
+
+.Button {
+  position: relative;
+  font-size: var(--text-body-size-medium,0.875rem);
+  font-weight: var(--base-text-weight-medium,500);
+  cursor: pointer;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: transparent;
+  border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid;
+  border-color: transparent;
+  border-radius: var(--borderRadius-medium,6px);
+  color: var(--button-default-fgColor-rest,var(--color-btn-text));
+  transition: var(--duration-fast) var(--easing-easeInOut);
+  transition-property: color, fill, background-color, border-color;
+  text-align: center;
+  height: var(--control-medium-size,2rem);
+  padding: 0 var(--control-medium-paddingInline-normal,0.75rem);
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--base-size-4,0.25rem);
+  min-width: max-content;
+
+  /* mobile friendly sizing */
+}
+
+@media (pointer: coarse) {
+      .Button::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    min-height: 48px;
+    content: "";
+    transform: translateX(-50%) translateY(-50%);
+    min-width: 48px;
+  }
+  }
+
+/* base states */
+
+.Button:hover {
+    transition-duration: var(--duration-fast);
+  }
+
+.Button:active {
+    transition: none;
+  }
+
+.Button:disabled,
+  .Button[aria-disabled='true'] {
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+.Button-withTooltip {
+  position: relative;
+  display: inline-block;
+}
+
+a.Button:hover, summary.Button:hover {
+    text-decoration: none;
+  }
+
+/* wrap grid content to allow trailingAction to lock-right */
+
+.Button-content {
+  flex: 1 0 auto;
+  display: grid;
+  grid-template-areas: 'leadingVisual text trailingVisual';
+  grid-template-columns: min-content minmax(0, auto) min-content;
+  align-items: center;
+  place-content: center;
+
+  /* padding-bottom: 1px; optical alignment for firefox */
+}
+
+.Button-content > :not(:last-child) {
+    margin-right: var(--control-medium-gap,0.5rem);
+  }
+
+/* center child elements for fullWidth */
+
+.Button-content--alignStart {
+  justify-content: start;
+}
+
+/* button child elements */
+
+/* align svg */
+
+.Button-visual {
+  display: flex;
+  pointer-events: none; /* allow click handler to work, avoiding visuals */
+}
+
+.Button-visual .Counter {
+    color: inherit;
+    background-color: var(--buttonCounter-default-bgColor-rest,var(--color-btn-counter-bg));
+  }
+
+.Button-label {
+  grid-area: text;
+  white-space: nowrap;
+  line-height: var(--text-body-lineHeight-medium,calc(20/14));
+}
+
+.Button-leadingVisual {
+  grid-area: leadingVisual;
+}
+
+.Button-trailingVisual {
+  grid-area: trailingVisual;
+}
+
+.Button-trailingAction {
+  margin-right: calc(var(--base-size-4,0.25rem) * -1);
+}
+
+/* sizes */
+
+.Button--small {
+  font-size: var(--text-body-size-small,0.75rem);
+  height: var(--control-small-size,1.75rem);
+  padding: 0 var(--control-small-paddingInline-condensed,0.5rem);
+  gap: var(--control-small-gap,0.25rem);
+}
+
+.Button--small .Button-label {
+    line-height: var(--text-body-lineHeight-small,calc(20/12));
+  }
+
+.Button--small .Button-content > :not(:last-child) {
+      margin-right: var(--control-small-gap,0.25rem);
+    }
+
+.Button--large {
+  height: var(--control-large-size,2.5rem);
+  padding: 0 var(--control-large-paddingInline-spacious,1rem);
+  gap: var(--control-large-gap,0.5rem);
+}
+
+.Button--large .Button-label {
+    line-height: var(--text-body-lineHeight-large,calc(24/16));
+  }
+
+.Button--large .Button-content > :not(:last-child) {
+      margin-right: var(--control-large-gap,0.5rem);
+    }
+
+.Button--fullWidth {
+  width: 100%;
+}
+
+/* variants */
+
+/* primary */
+
+.Button--primary {
+  color: var(--button-primary-fgColor-rest,var(--color-btn-primary-text));
+  fill: var(--button-primary-iconColor-rest,var(--color-btn-primary-icon));
+  background-color: var(--button-primary-bgColor-rest,var(--color-btn-primary-bg));
+  border-color: var(--button-primary-borderColor-rest,var(--color-btn-primary-border));
+  box-shadow: var(--shadow-resting-small,var(--color-shadow-small)), var(--shadow-highlight,var(--color-primer-shadow-highlight));
+}
+
+.Button--primary:hover:not(:disabled) {
+    background-color: var(--button-primary-bgColor-hover,var(--color-btn-primary-hover-bg));
+    border-color: var(--button-primary-borderColor-hover,var(--color-btn-primary-hover-border));
+  }
+
+/* fallback :focus state */
+
+.Button--primary:focus {
+    outline: 2px solid var(--focus-outlineColor,var(--color-accent-fg));
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+
+    /* remove fallback :focus if :focus-visible is supported */
+  }
+
+.Button--primary:focus:not(:focus-visible) {
+      outline: solid 1px transparent;
+      box-shadow: none;
+    }
+
+/* default focus state */
+
+.Button--primary:focus-visible {
+    outline: 2px solid var(--focus-outlineColor,var(--color-accent-fg));
+    outline-offset: -2px;
+    box-shadow: inset 0 0 0 3px var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+  }
+
+.Button--primary:active:not(:disabled),
+  .Button--primary[aria-pressed='true'] {
+    background-color: var(--button-primary-bgColor-active,var(--color-btn-primary-selected-bg));
+    box-shadow: var(--button-primary-shadow-selected,var(--color-btn-primary-selected-shadow));
+  }
+
+.Button--primary:disabled,
+  .Button--primary[aria-disabled='true'] {
+    color: var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));
+    background-color: var(--button-primary-bgColor-disabled,var(--color-btn-primary-disabled-bg));
+    border-color: var(--button-primary-borderColor-disabled,var(--color-btn-primary-disabled-border));
+    fill: var(--button-primary-fgColor-disabled,var(--color-btn-primary-disabled-text));
+  }
+
+.Button--primary .Counter {
+    color: inherit;
+    background-color: var(--buttonCounter-primary-bgColor-rest,var(--color-btn-primary-counter-bg));
+  }
+
+/* default (secondary) */
+
+.Button--secondary {
+  color: var(--button-default-fgColor-rest,var(--color-btn-text));
+  fill: var(--fgColor-muted,var(--color-fg-muted)); /* help this */
+  background-color: var(--button-default-bgColor-rest,var(--color-btn-bg));
+  border-color: var(--button-default-borderColor-rest,var(--color-btn-border));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow)), var(--button-default-shadow-inset,var(--color-btn-inset-shadow));
+}
+
+.Button--secondary:hover:not(:disabled) {
+    background-color: var(--button-default-bgColor-hover,var(--color-btn-hover-bg));
+    border-color: var(--button-default-borderColor-hover,var(--color-btn-hover-border));
+  }
+
+.Button--secondary:active:not(:disabled) {
+    background-color: var(--button-default-bgColor-active,var(--color-btn-active-bg));
+    border-color: var(--button-default-borderColor-active,var(--color-btn-active-border));
+  }
+
+.Button--secondary[aria-pressed='true'] {
+    background-color: var(--button-default-bgColor-selected,var(--color-btn-selected-bg));
+    box-shadow: var(--shadow-inset,var(--color-primer-shadow-inset));
+  }
+
+.Button--secondary:disabled,
+  .Button--secondary[aria-disabled='true'] {
+    color: var(--fgColor-disabled,var(--color-primer-fg-disabled));
+    background-color: var(--button-default-bgColor-rest,var(--color-btn-bg));
+    border-color: var(--button-default-borderColor-rest,var(--color-btn-border));
+    fill: var(--fgColor-disabled,var(--color-primer-fg-disabled));
+  }
+
+.Button--invisible {
+  color: var(--button-invisible-fgColor-rest,var(--color-btn-outline-text));
+}
+
+.Button--invisible:hover:not(:disabled) {
+    background-color: var(--button-invisible-bgColor-hover,var(--color-action-list-item-default-hover-bg));
+  }
+
+.Button--invisible[aria-pressed='true'],
+  .Button--invisible:active:not(:disabled) {
+    background-color: var(--button-invisible-bgColor-active,var(--color-action-list-item-default-active-bg));
+  }
+
+.Button--invisible:disabled,
+  .Button--invisible[aria-disabled='true'] {
+    color: var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));
+    background-color: var(--button-invisible-bgColor-disabled,var(--color-action-list-item-default-selected-bg));
+    border-color: transparent;
+    fill: var(--button-invisible-fgColor-disabled,var(--color-primer-fg-disabled));
+  }
+
+/* if button has no visuals, use link blue for text */
+
+.Button--invisible.Button--invisible-noVisuals .Button-label {
+    color: var(--fgColor-link-rest,var(--color-accent-fg));
+  }
+
+.Button--invisible .Button-visual {
+    color: var(--fgColor-muted,var(--color-fg-muted));
+  }
+
+.Button--invisible .Button-visual .Counter {
+      color: var(--fgColor-default,var(--color-fg-default));
+    }
+
+.Button--link {
+  color: var(--fgColor-link-rest,var(--color-accent-fg));
+  fill: var(--fgColor-link-rest,var(--color-accent-fg));
+  display: inline-block;
+  font-size: inherit;
+  border: none;
+  height: unset;
+  padding: 0;
+}
+
+.Button--link:hover:not(:disabled) {
+    text-decoration: underline;
+  }
+
+.Button--link:focus-visible,
+  .Button--link:focus {
+    outline-offset: 2px;
+  }
+
+.Button--link:disabled,
+  .Button--link[aria-disabled='true'] {
+    color: var(--fgColor-disabled,var(--color-primer-fg-disabled));
+    background-color: transparent;
+    border-color: transparent;
+    fill: var(--fgColor-disabled,var(--color-primer-fg-disabled));
+  }
+
+/* danger */
+
+.Button--danger {
+  color: var(--button-danger-fgColor-rest,var(--color-btn-danger-text));
+  fill: var(--button-danger-iconColor-rest,var(--color-btn-danger-icon));
+  background-color: var(--button-danger-bgColor-rest,var(--color-btn-bg));
+  border-color: var(--button-danger-borderColor-rest,var(--color-btn-border));
+  box-shadow: var(--button-default-shadow-resting,var(--color-btn-shadow)), var(--button-default-shadow-inset,var(--color-btn-inset-shadow));
+}
+
+.Button--danger:hover:not(:disabled) {
+    color: var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));
+    fill: var(--button-danger-fgColor-hover,var(--color-btn-danger-hover-text));
+    background-color: var(--button-danger-bgColor-hover,var(--color-btn-danger-hover-bg));
+    border-color: var(--button-danger-borderColor-hover,var(--color-btn-danger-hover-border));
+    box-shadow: var(--shadow-resting-small,var(--color-shadow-small)), var(--shadow-highlight,var(--color-primer-shadow-highlight));
+  }
+
+.Button--danger:hover:not(:disabled) .Counter {
+      color: var(--buttonCounter-danger-fgColor-hover,var(--btn-danger-hoverCounterFg));
+      background-color: var(--buttonCounter-danger-bgColor-hover,var(--color-btn-danger-hover-counter-bg));
+    }
+
+.Button--danger:active:not(:disabled),
+  .Button--danger[aria-pressed='true'] {
+    color: var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));
+    fill: var(--button-danger-fgColor-active,var(--color-btn-danger-selected-text));
+    background-color: var(--button-danger-bgColor-active,var(--color-btn-danger-selected-bg));
+    border-color: var(--button-danger-borderColor-active,var(--color-btn-danger-selected-border));
+    box-shadow: var(--button-danger-shadow-selected,var(--color-btn-danger-selected-shadow));
+  }
+
+.Button--danger:disabled,
+  .Button--danger[aria-disabled='true'] {
+    color: var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));
+    fill: var(--button-danger-fgColor-disabled,var(--color-btn-danger-disabled-text));
+    background-color: var(--button-danger-bgColor-disabled,var(--color-btn-danger-disabled-bg));
+    border-color: var(--button-default-borderColor-rest,var(--color-btn-border));
+  }
+
+.Button--danger:disabled .Counter, .Button--danger[aria-disabled='true'] .Counter {
+      color: var(--buttonCounter-danger-fgColor-disabled,var(--btn-danger-disabledCounterFg));
+      background-color: var(--buttonCounter-danger-bgColor-disabled,var(--color-btn-danger-disabled-counter-bg));
+    }
+
+.Button--danger .Counter {
+    color: var(--buttonCounter-danger-fgColor-rest,var(--btn-danger-counterFg));
+    background-color: var(--buttonCounter-danger-bgColor-rest,var(--color-btn-danger-counter-bg));
+  }
+
+.Button--iconOnly {
+  display: inline-grid;
+  place-content: center;
+  padding: unset;
+  width: var(--control-medium-size,2rem);
+}
+
+.Button--iconOnly.Button--small {
+    width: var(--control-small-size,1.75rem);
+  }
+
+.Button--iconOnly.Button--large {
+    width: var(--control-large-size,2.5rem);
+  }

package/app/components/primer/beta/button.css.json

@@ -3,16 +3,16 @@
   "selectors": [
     ":root",
     ".Button",
-    ".Button:before",
+    ".Button::before",
     ".Button:hover",
     ".Button:active",
     ".Button:disabled",
-    ".Button[aria-disabled=true]",
+    ".Button[aria-disabled='true']",
     ".Button-withTooltip",
     "a.Button:hover",
     "summary.Button:hover",
     ".Button-content",
-    ".Button-content>:not(:last-child)",
+    ".Button-content > :not(:last-child)",
     ".Button-content--alignStart",
     ".Button-visual",
     ".Button-visual .Counter",
@@ -22,10 +22,10 @@
     ".Button-trailingAction",
     ".Button--small",
     ".Button--small .Button-label",
-    ".Button--small .Button-content>:not(:last-child)",
+    ".Button--small .Button-content > :not(:last-child)",
     ".Button--large",
     ".Button--large .Button-label",
-    ".Button--large .Button-content>:not(:last-child)",
+    ".Button--large .Button-content > :not(:last-child)",
     ".Button--fullWidth",
     ".Button--primary",
     ".Button--primary:hover:not(:disabled)",
@@ -33,40 +33,40 @@
     ".Button--primary:focus:not(:focus-visible)",
     ".Button--primary:focus-visible",
     ".Button--primary:active:not(:disabled)",
-    ".Button--primary[aria-pressed=true]",
+    ".Button--primary[aria-pressed='true']",
     ".Button--primary:disabled",
-    ".Button--primary[aria-disabled=true]",
+    ".Button--primary[aria-disabled='true']",
     ".Button--primary .Counter",
     ".Button--secondary",
     ".Button--secondary:hover:not(:disabled)",
     ".Button--secondary:active:not(:disabled)",
-    ".Button--secondary[aria-pressed=true]",
+    ".Button--secondary[aria-pressed='true']",
     ".Button--secondary:disabled",
-    ".Button--secondary[aria-disabled=true]",
+    ".Button--secondary[aria-disabled='true']",
     ".Button--invisible",
     ".Button--invisible:hover:not(:disabled)",
+    ".Button--invisible[aria-pressed='true']",
     ".Button--invisible:active:not(:disabled)",
-    ".Button--invisible[aria-pressed=true]",
     ".Button--invisible:disabled",
-    ".Button--invisible[aria-disabled=true]",
+    ".Button--invisible[aria-disabled='true']",
     ".Button--invisible.Button--invisible-noVisuals .Button-label",
     ".Button--invisible .Button-visual",
     ".Button--invisible .Button-visual .Counter",
     ".Button--link",
     ".Button--link:hover:not(:disabled)",
-    ".Button--link:focus",
     ".Button--link:focus-visible",
+    ".Button--link:focus",
     ".Button--link:disabled",
-    ".Button--link[aria-disabled=true]",
+    ".Button--link[aria-disabled='true']",
     ".Button--danger",
     ".Button--danger:hover:not(:disabled)",
     ".Button--danger:hover:not(:disabled) .Counter",
     ".Button--danger:active:not(:disabled)",
-    ".Button--danger[aria-pressed=true]",
+    ".Button--danger[aria-pressed='true']",
     ".Button--danger:disabled",
-    ".Button--danger[aria-disabled=true]",
+    ".Button--danger[aria-disabled='true']",
     ".Button--danger:disabled .Counter",
-    ".Button--danger[aria-disabled=true] .Counter",
+    ".Button--danger[aria-disabled='true'] .Counter",
     ".Button--danger .Counter",
     ".Button--iconOnly",
     ".Button--iconOnly.Button--small",

package/app/components/primer/beta/button_group.css

@@ -1 +1,23 @@
-.ButtonGroup{display:inline-flex}.ButtonGroup .Button{border-radius:0;margin-inline-end:-1px;position:relative}.ButtonGroup .Button:active,.ButtonGroup .Button:focus,.ButtonGroup .Button:hover{z-index:1}.ButtonGroup>.Button-withTooltip:first-child .Button,.ButtonGroup>:first-child{border-bottom-left-radius:var(--borderRadius-medium,6px);border-top-left-radius:var(--borderRadius-medium,6px)}.ButtonGroup>.Button-withTooltip:last-child .Button,.ButtonGroup>:last-child{border-bottom-right-radius:var(--borderRadius-medium,6px);border-top-right-radius:var(--borderRadius-medium,6px)}
+.ButtonGroup {
+  display: inline-flex;
+}
+.ButtonGroup .Button {
+    margin-inline-end: -1px;
+    position: relative;
+    border-radius: 0;
+  }
+.ButtonGroup .Button:focus,
+    .ButtonGroup .Button:active,
+    .ButtonGroup .Button:hover {
+      z-index: 1;
+    }
+.ButtonGroup > :first-child,
+  .ButtonGroup > .Button-withTooltip:first-child .Button {
+    border-top-left-radius: var(--borderRadius-medium,6px);
+    border-bottom-left-radius: var(--borderRadius-medium,6px);
+  }
+.ButtonGroup > :last-child,
+  .ButtonGroup > .Button-withTooltip:last-child .Button {
+    border-top-right-radius: var(--borderRadius-medium,6px);
+    border-bottom-right-radius: var(--borderRadius-medium,6px);
+  }

package/app/components/primer/beta/button_group.css.json

@@ -3,12 +3,12 @@
   "selectors": [
     ".ButtonGroup",
     ".ButtonGroup .Button",
-    ".ButtonGroup .Button:active",
     ".ButtonGroup .Button:focus",
+    ".ButtonGroup .Button:active",
     ".ButtonGroup .Button:hover",
-    ".ButtonGroup>.Button-withTooltip:first-child .Button",
-    ".ButtonGroup>:first-child",
-    ".ButtonGroup>.Button-withTooltip:last-child .Button",
-    ".ButtonGroup>:last-child"
+    ".ButtonGroup > :first-child",
+    ".ButtonGroup > .Button-withTooltip:first-child .Button",
+    ".ButtonGroup > :last-child",
+    ".ButtonGroup > .Button-withTooltip:last-child .Button"
   ]
 }

package/app/components/primer/beta/counter.css

@@ -1 +1,36 @@
-.Counter{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));border-radius:2em;color:var(--fgColor-default,var(--color-fg-default));display:inline-block;font-size:var(--text-body-size-small,.75rem);font-weight:var(--base-text-weight-medium,500);line-height:calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, .0625rem))*2);min-width:var(--base-size-20,1.25rem);padding:0 6px;text-align:center}.Counter:empty{display:none}.Counter .octicon{opacity:.8;vertical-align:text-top}.Counter--primary{background-color:var(--bgColor-neutral-emphasis,var(--color-fg-subtle));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis))}.Counter--secondary{background-color:var(--bgColor-neutral-muted,var(--color-neutral-muted));color:var(--fgColor-muted,var(--color-fg-muted))}
+/* Counter */
+
+.Counter {
+  display: inline-block;
+  min-width: var(--base-size-20,1.25rem); /* makes sure it's a circle with just one digit */
+  padding: 0 6px;
+  font-size: var(--text-body-size-small,0.75rem);
+  font-weight: var(--base-text-weight-medium,500);
+  line-height: calc(var(--base-size-20,1.25rem) - var(--borderWidth-thin,max(1px, 0.0625rem)) * 2); /* 20px - 2px for the borders */
+  color: var(--fgColor-default,var(--color-fg-default));
+  text-align: center;
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted));
+  border: var(--borderWidth-thin,max(1px, 0.0625rem)) solid var(--counter-borderColor,var(--color-counter-border));
+  border-radius: 2em;
+}
+
+.Counter:empty {
+    display: none;
+  }
+
+/* Is this selector used? could not find any use of it */
+
+.Counter .octicon {
+    vertical-align: text-top;
+    opacity: 0.8;
+  }
+
+.Counter--primary {
+  color: var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));
+  background-color: var(--bgColor-neutral-emphasis,var(--color-fg-subtle));
+}
+
+.Counter--secondary {
+  color: var(--fgColor-muted,var(--color-fg-muted));
+  background-color: var(--bgColor-neutral-muted,var(--color-neutral-muted));
+}