@papillonbits/components 1.1.0 → 1.2.0

package/build/primer/Form/form-control.scss

@@ -3,39 +3,34 @@
 @import '~@papillonbits/css/build/primer/support/mixins/misc.scss';
 @import '~@papillonbits/css/build/primer/support/mixins/layout.scss';
 
-// Needs refactoring
+// stylelint-disable custom-property-pattern
 // stylelint-disable no-descending-specificity
+
+// Needs refactoring
 // stylelint-disable selector-no-qualifying-type, selector-max-compound-selectors
 // stylelint-disable selector-max-type
 // Base form controls
 //
 // Overrides for common inputs for easier styling.
 
-fieldset {
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-label {
-  font-weight: $font-weight-bold;
-}
-
 .form-control,
 .form-select {
   // stylelint-disable-next-line primer/spacing
   padding: 5px 12px;
+  // stylelint-disable-next-line primer/typography
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   vertical-align: middle;
-  background-color: var(--color-canvas-default);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   background-repeat: no-repeat; // Repeat and position set for form states (success, error, etc)
   background-position: right 8px center; // For form validation. This keeps images 8px from right and centered vertically.
-  border: $border-width $border-style var(--color-border-default);
+  // stylelint-disable-next-line primer/borders
+  border: $border-width $border-style var(--control-borderColor-rest, var(--color-border-default));
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
-  box-shadow: var(--color-primer-shadow-inset);
+  box-shadow: var(--shadow-inset, var(--color-primer-shadow-inset));
   transition: 80ms cubic-bezier(0.33, 1, 0.68, 1);
   transition-property: color, background-color, box-shadow, border-color;
 
@@ -59,28 +54,31 @@ label {
   &.border-0 {
     &:focus,
     &:focus-visible {
-      border: $border-width $border-style var(--color-accent-fg) !important;
+      // stylelint-disable-next-line primer/borders
+      border: $border-width $border-style var(--borderColor-accent-emphasis, var(--color-accent-fg)) !important;
     }
   }
 
   &[disabled],
   fieldset[disabled] & {
-    color: var(--color-primer-fg-disabled);
-    background-color: var(--color-input-disabled-bg);
-    border-color: var(--color-border-default);
-    -webkit-text-fill-color: var(--color-primer-fg-disabled); // Fix for Safari
+    color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
+    background-color: var(--control-bgColor-disabled, var(--color-input-disabled-bg));
+    border-color: var(--control-borderColor-disabled, var(--color-border-default));
+    -webkit-text-fill-color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled)); // Fix for Safari
     opacity: 1; // Fix for Safari iOS
 
     &::placeholder {
-      color: var(--color-primer-fg-disabled);
+      color: var(--control-fgColor-disabled, var(--color-primer-fg-disabled));
     }
   }
 
   // Ensures inputs don't zoom on mobile iPhone but are body-font size on iPad
   @supports (-webkit-touch-callout: none) {
+    // stylelint-disable-next-line primer/typography
     font-size: $h4-size;
 
     @include breakpoint(md) {
+      // stylelint-disable-next-line primer/typography
       font-size: $body-font-size;
     }
   }
@@ -88,26 +86,21 @@ label {
 
 // Textarea
 textarea.form-control {
-  padding-top: $spacer-2;
-  padding-bottom: $spacer-2;
+  padding-top: var(--base-size-8);
+  padding-bottom: var(--base-size-8);
+  // stylelint-disable-next-line primer/typography
   line-height: $lh-default;
 }
 
 // Inputs with contrast for easy light gray backgrounds against white.
 .input-contrast {
-  background-color: var(--color-canvas-inset);
+  background-color: var(--bgColor-muted, var(--color-canvas-inset));
 
   &:focus {
-    background-color: var(--color-canvas-default);
+    background-color: var(--bgColor-default, var(--color-canvas-default));
   }
 }
 
-// Custom styling for HTML5 validation bubbles (WebKit only)
-::placeholder {
-  color: var(--color-fg-subtle);
-  opacity: 1; // override opacity in normalize.css
-}
-
 // Mini inputs, to match .minibutton
 .input-sm {
   min-height: $size-4;
@@ -115,6 +108,7 @@ textarea.form-control {
   padding-top: 3px;
   // stylelint-disable-next-line primer/spacing
   padding-bottom: 3px;
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
   // stylelint-disable-next-line primer/typography
   line-height: 20px;
@@ -122,6 +116,7 @@ textarea.form-control {
 
 // Large inputs
 .input-lg {
+  // stylelint-disable-next-line primer/typography
   font-size: $h4-size;
 }
 
@@ -133,6 +128,7 @@ textarea.form-control {
 
 // Inputs with monospace text
 .input-monospace {
+  // stylelint-disable-next-line primer/typography
   font-family: $mono-font;
 }
 
@@ -160,11 +156,12 @@ textarea.form-control {
   label {
     em.highlight {
       position: relative;
-      left: -$spacer-1;
+      left: calc(var(--base-size-4) * -1);
       // stylelint-disable-next-line primer/spacing
-      padding: 2px $spacer-1;
+      padding: 2px var(--base-size-4);
       font-style: normal;
-      background: var(--color-attention-subtle);
+      background: var(--bgColor-attention-muted, var(--color-attention-subtle));
+      // stylelint-disable-next-line primer/borders
       border-radius: $border-radius;
     }
   }
@@ -180,9 +177,11 @@ textarea.form-control {
   .note {
     display: block;
     margin: 0;
+    // stylelint-disable-next-line primer/typography
     font-size: $font-size-small;
+    // stylelint-disable-next-line primer/typography
     font-weight: $font-weight-normal;
-    color: var(--color-fg-muted);
+    color: var(--fgColor-muted, var(--color-fg-muted));
   }
 }
 
@@ -221,11 +220,12 @@ textarea.form-control {
         display: inline-block;
         // stylelint-disable-next-line primer/spacing
         margin: 5px 0 0;
-        color: var(--color-fg-muted);
+        color: var(--fgColor-muted, var(--color-fg-muted));
       }
 
       img {
         position: relative;
+        // stylelint-disable-next-line primer/spacing
         top: -2px;
       }
     }
@@ -269,21 +269,26 @@ input::-webkit-inner-spin-button {
 
 .form-warning {
   // stylelint-disable-next-line primer/spacing
-  padding: $spacer-2 10px;
+  padding: var(--base-size-8) 10px;
   // stylelint-disable-next-line primer/spacing
   margin: 10px 0;
+  // stylelint-disable-next-line primer/typography
   font-size: $h5-size;
-  color: var(--color-attention-fg);
-  background: var(--color-attention-subtle);
-  border: $border-width $border-style var(--color-attention-emphasis);
+  color: var(--fgColor-attention, var(--color-attention-fg));
+  background: var(--bgColor-attention-muted, var(--color-attention-subtle));
+  // stylelint-disable-next-line primer/borders
+  border: $border-width $border-style var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
+  // stylelint-disable-next-line primer/borders
   border-radius: $border-radius;
 
   p {
     margin: 0;
+    // stylelint-disable-next-line primer/typography
     line-height: $lh-default;
   }
 
   a {
+    // stylelint-disable-next-line primer/typography
     font-weight: $font-weight-bold;
   }
 }

package/build/primer/Form/form-group.scss

@@ -1,3 +1,4 @@
+// stylelint-disable custom-property-pattern
 // stylelint-disable no-descending-specificity
 // stylelint-disable selector-max-compound-selectors
 // stylelint-disable selector-max-type
@@ -18,7 +19,7 @@
   // Autocomplete with embedded icon
   .form-control.autocomplete-embedded-icon-wrap {
     &:focus-within {
-      background-color: var(--color-canvas-default);
+      background-color: var(--bgColor-default, var(--color-canvas-default));
     }
   }
 
@@ -29,10 +30,10 @@
     max-width: 100%;
     // stylelint-disable-next-line primer/spacing
     margin-right: 5px;
-    background-color: var(--color-canvas-inset);
+    background-color: var(--bgColor-muted, var(--color-canvas-inset));
 
     &:focus {
-      background-color: var(--color-canvas-default);
+      background-color: var(--bgColor-default, var(--color-canvas-default));
     }
 
     &.shorter {
@@ -71,7 +72,8 @@
   }
 
   label {
-    position: relative;
+    // fix for chrome bug, see https://github.com/github/github/issues/53931
+    position: static;
   }
 
   &.flattened dt, // TODO: Deprecate
@@ -95,14 +97,14 @@
   dd, // TODO: Deprecate
   .form-group-body {
     h4 {
-      margin: $spacer-1 0 0;
+      margin: var(--base-size-4) 0 0;
 
       &.is-error {
-        color: var(--color-danger-fg);
+        color: var(--fgColor-danger, var(--color-danger-fg));
       }
 
       &.is-success {
-        color: var(--color-success-fg);
+        color: var(--fgColor-success, var(--color-success-fg));
       }
 
       + .note {
@@ -121,7 +123,7 @@
     .form-group-header label::after {
       // stylelint-disable-next-line primer/spacing
       padding-left: 5px;
-      color: var(--color-danger-fg);
+      color: var(--fgColor-danger, var(--color-danger-fg));
       content: '*';
     }
   }
@@ -134,7 +136,9 @@
   .error,
   .indicator {
     display: none;
+    // stylelint-disable-next-line primer/typography
     font-size: $font-size-small;
+    // stylelint-disable-next-line primer/typography
     font-weight: $font-weight-bold;
   }
 
@@ -154,7 +158,7 @@
   &.successful {
     .success {
       display: inline;
-      color: var(--color-success-fg);
+      color: var(--fgColor-success, var(--color-success-fg));
     }
   }
 
@@ -172,18 +176,24 @@
       z-index: 10;
       display: block; // Show up in errored/warn state
       max-width: 450px; // Keep our long errors readable
-      padding: $spacer-1 $spacer-2;
-      margin: $spacer-2 0 0;
+      padding: var(--base-size-4) var(--base-size-8);
+      margin: var(--base-size-8) 0 0;
+      // stylelint-disable-next-line primer/typography
       font-size: $font-size-small;
+      // stylelint-disable-next-line primer/typography
       font-weight: $font-weight-normal;
+      // stylelint-disable-next-line primer/borders
       border-style: $border-style;
+      // stylelint-disable-next-line primer/borders
       border-width: $border-width;
+      // stylelint-disable-next-line primer/borders
       border-radius: $border-radius;
 
       &::after,
       &::before {
         position: absolute;
         bottom: 100%;
+        // stylelint-disable-next-line primer/spacing
         left: 10px;
         z-index: 15;
         width: 0;
@@ -210,63 +220,81 @@
 
   &.successed {
     .success {
-      color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-success-subtle), var(--color-success-subtle));
-      border-color: var(--color-success-muted);
+      color: var(--fgColor-default, var(--color-fg-default));
+      background-color: var(
+        --bgColor-default,
+        var(--color-canvas-default)
+      ); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(
+        var(--bgColor-success-muted, var(--bgColor-success-muted, var(--color-success-subtle))),
+        var(--color-success-subtle)
+      );
+      border-color: var(--borderColor-success-muted, var(--color-success-muted));
 
       &::after {
-        border-bottom-color: var(--color-success-subtle);
+        border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
       }
 
       &::before {
-        border-bottom-color: var(--color-success-muted);
+        border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
       }
     }
   }
 
   &.warn {
     .form-control:not(:focus, :focus-visible) {
-      border-color: var(--color-attention-emphasis);
+      border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
     }
 
     .warning {
-      color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-attention-subtle), var(--color-attention-subtle));
-      border-color: var(--color-attention-muted);
+      color: var(--fgColor-default, var(--color-fg-default));
+      background-color: var(
+        --bgColor-default,
+        var(--color-canvas-default)
+      ); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(
+        var(--bgColor-attention-muted, var(--bgColor-attention-muted, var(--color-attention-subtle))),
+        var(--color-attention-subtle)
+      );
+      border-color: var(--borderColor-attention-muted, var(--color-attention-muted));
 
       &::after {
-        border-bottom-color: var(--color-attention-subtle);
+        border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
       }
 
       &::before {
-        border-bottom-color: var(--color-attention-muted);
+        border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
       }
     }
   }
 
   &.errored {
     .form-control:not(:focus, :focus-visible) {
-      border-color: var(--color-danger-emphasis);
+      border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
     }
 
     label {
-      color: var(--color-danger-fg);
+      color: var(--fgColor-danger, var(--color-danger-fg));
     }
 
     .error {
-      color: var(--color-fg-default);
-      background-color: var(--color-canvas-default); // Makes sure the background is opaque to cover any content underneath
-      background-image: linear-gradient(var(--color-danger-subtle), var(--color-danger-subtle));
-      border-color: var(--color-danger-muted);
+      color: var(--fgColor-default, var(--color-fg-default));
+      background-color: var(
+        --bgColor-default,
+        var(--color-canvas-default)
+      ); // Makes sure the background is opaque to cover any content underneath
+      background-image: linear-gradient(
+        var(--bgColor-danger-muted, var(--bgColor-danger-muted, var(--color-danger-subtle))),
+        var(--color-danger-subtle)
+      );
+      border-color: var(--borderColor-danger-muted, var(--color-danger-muted));
 
       &::after {
-        border-bottom-color: var(--color-danger-subtle);
+        border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
       }
 
       &::before {
-        border-bottom-color: var(--color-danger-muted);
+        border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
       }
     }
   }
@@ -276,9 +304,10 @@
 .note {
   min-height: 17px;
   // stylelint-disable-next-line primer/spacing
-  margin: $spacer-1 0 2px;
+  margin: var(--base-size-4) 0 2px;
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
-  color: var(--color-fg-muted);
+  color: var(--fgColor-muted, var(--color-fg-muted));
 
   .spinner {
     // stylelint-disable-next-line primer/spacing

package/build/primer/Form/form-select.scss

@@ -3,6 +3,8 @@
 @import '~@papillonbits/css/build/primer/support/mixins/layout.scss';
 @import '~@papillonbits/css/build/primer/support/mixins/color-modes.scss';
 
+// stylelint-disable custom-property-pattern
+
 // Custom select
 //
 // Apply `.select` to any `<select>` element for custom styles.
@@ -10,8 +12,8 @@
   display: inline-block;
   max-width: 100%;
   height: $size-5;
-  padding-right: $spacer-4;
-  background-color: var(--color-canvas-default);
+  padding-right: var(--base-size-24);
+  background-color: var(--bgColor-default, var(--color-canvas-default));
   // SVG with fill: #586069 (--color-icon-secondary)
   background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0iIzU4NjA2OSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNC40MjcgOS40MjdsMy4zOTYgMy4zOTZhLjI1MS4yNTEgMCAwMC4zNTQgMGwzLjM5Ni0zLjM5NkEuMjUuMjUgMCAwMDExLjM5NiA5SDQuNjA0YS4yNS4yNSAwIDAwLS4xNzcuNDI3ek00LjQyMyA2LjQ3TDcuODIgMy4wNzJhLjI1LjI1IDAgMDEuMzU0IDBMMTEuNTcgNi40N2EuMjUuMjUgMCAwMS0uMTc3LjQyN0g0LjZhLjI1LjI1IDAgMDEtLjE3Ny0uNDI3eiIgLz48L3N2Zz4=');
   background-repeat: no-repeat;
@@ -42,6 +44,7 @@
   padding-top: 3px;
   // stylelint-disable-next-line primer/spacing
   padding-bottom: 3px;
+  // stylelint-disable-next-line primer/typography
   font-size: $font-size-small;
 
   &[multiple] {

package/build/primer/Form/index.scss

@@ -1,7 +1,6 @@
 @import './form-control.scss';
 @import './form-group.scss';
 @import './form-select.scss';
-@import './form-validation.scss';
 @import './FormControl.scss';
 @import './input-group.scss';
 @import './radio-group.scss';

package/build/primer/Form/input-group.scss

@@ -1,3 +1,4 @@
+// stylelint-disable custom-property-pattern
 // stylelint-disable no-descending-specificity
 
 .input-group {
@@ -32,7 +33,7 @@
   // Autocomplete with embedded icon
   .form-control.autocomplete-embedded-icon-wrap {
     display: inline-flex;
-    padding: $spacer-1 * 1.25 $spacer-2;
+    padding: calc(var(--base-size-4) * 1.25) var(--base-size-8);
   }
 }
 
@@ -56,6 +57,11 @@
   border-bottom-right-radius: 0;
 }
 
+.input-group .form-control:first-child,
+.input-group-button:first-child .btn:not(.btn-primary) {
+  border-color: var(--control-borderColor-rest, var(--color-border-default));
+}
+
 .input-group-button:first-child .btn {
   // stylelint-disable-next-line primer/spacing
   margin-right: -1px;
@@ -67,6 +73,11 @@
   border-bottom-left-radius: 0;
 }
 
+.input-group .form-control:last-child,
+.input-group-button:last-child .btn:not(.btn-primary) {
+  border-color: var(--control-borderColor-rest, var(--color-border-default));
+}
+
 .input-group-button:last-child .btn {
   // stylelint-disable-next-line primer/spacing
   margin-left: -1px;

package/build/primer/Form/radio-group.scss

@@ -1,3 +1,5 @@
+// stylelint-disable custom-property-pattern
+
 // Tab like radio group
 
 .radio-group {
@@ -7,36 +9,42 @@
 .radio-label {
   float: left;
   // stylelint-disable-next-line primer/spacing
-  padding: 6px $spacer-3 6px ($spacer-3 + 12px + $spacer-2); // 12px is the size of the radio-input
+  padding: 6px var(--base-size-16) 6px calc(var(--base-size-16) + 12px + var(--base-size-8)); // 12px is the size of the radio-input
   // stylelint-disable-next-line primer/spacing
   margin-left: -1px;
+  // stylelint-disable-next-line primer/typography
   font-size: $body-font-size;
   // stylelint-disable-next-line primer/typography
   line-height: 20px; // Specifically not inherit our `<body>` default
-  color: var(--color-fg-default);
+  color: var(--fgColor-default, var(--color-fg-default));
   cursor: pointer;
-  border: $border-width $border-style var(--color-border-default);
+  // stylelint-disable-next-line primer/borders
+  border: $border-width $border-style var(--borderColor-default, var(--color-border-default));
 
   :checked + & {
     position: relative;
     z-index: 1;
-    border-color: var(--color-accent-emphasis);
+    border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis));
   }
 
   &:first-of-type {
     margin-left: 0;
+    // stylelint-disable-next-line primer/borders
     border-top-left-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-bottom-left-radius: $border-radius;
   }
 
   &:last-of-type {
+    // stylelint-disable-next-line primer/borders
     border-top-right-radius: $border-radius;
+    // stylelint-disable-next-line primer/borders
     border-bottom-right-radius: $border-radius;
   }
 
   .octicon {
-    margin-left: $spacer-1;
-    color: var(--color-fg-subtle);
+    margin-left: var(--base-size-4);
+    color: var(--fgColor-muted, var(--color-fg-subtle));
   }
 }
 
@@ -44,15 +52,15 @@
   z-index: 3;
   float: left;
   // stylelint-disable-next-line primer/spacing
-  margin: 10px (-$spacer-5) 0 $spacer-3;
+  margin: 10px calc(var(--base-size-32) * -1) 0 var(--base-size-16);
 
   &:disabled {
     position: relative; // enables z-index
 
     + .radio-label {
-      color: var(--color-primer-fg-disabled);
+      color: var(--fgColor-disabled, var(--color-primer-fg-disabled));
       cursor: default;
-      background-color: var(--color-neutral-subtle);
+      background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle));
 
       .octicon {
         color: inherit;

package/build/primer/Grid/FlexGrid/FlexGrid.js

@@ -29,7 +29,7 @@ var _Checkbox = require("../../Form/Checkbox");
 var _Icon = require("../../Icon");
 var _jsxRuntime = require("react/jsx-runtime");
 function FlexGrid(_ref) {
-  var _items$, _items$$names;
+  var _items$;
   var className = _ref.className,
     items = _ref.items,
     idIndex = _ref.idIndex,
@@ -45,7 +45,7 @@ function FlexGrid(_ref) {
     className: (0, _classnames["default"])(className, (0, _defineProperty2["default"])({}, _FlexGrid2["default"]['flexGrid-inactive'], state === _FlexGrid.flexGridState.inactive)),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
       className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-row'], _flexbox["default"]['flex-items-start'], _colors["default"]['bg-blue-light'], (0, _defineProperty2["default"])({}, _borders["default"].border, items === null || items === void 0 ? void 0 : items[0])),
-      children: items === null || items === void 0 ? void 0 : (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : (_items$$names = _items$.names) === null || _items$$names === void 0 ? void 0 : _items$$names.map(function (name, nameIndex) {
+      children: items === null || items === void 0 || (_items$ = items[0]) === null || _items$ === void 0 || (_items$ = _items$.names) === null || _items$ === void 0 ? void 0 : _items$.map(function (name, nameIndex) {
         var _items$2;
         var isIdColumn = nameIndex === idIndex;
         var isSelectedColumn = nameIndex === isSelectedIndex;
@@ -113,7 +113,7 @@ function FlexGrid(_ref) {
                 })
               }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
                 className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-items-start'], _margin["default"]['ml-1']),
-                children: [sortComponent, nameIndex < (items === null || items === void 0 ? void 0 : (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.names.length) - 1 ?
+                children: [sortComponent, nameIndex < (items === null || items === void 0 || (_items$2 = items[0]) === null || _items$2 === void 0 ? void 0 : _items$2.names.length) - 1 ?
                 /*#__PURE__*/
                 // eslint-disable-line no-unsafe-optional-chaining
                 (0, _jsxRuntime.jsx)("span", {

package/build/primer/Grid/FlexGrid/FlexGrid.scss

@@ -1,3 +1,5 @@
+// stylelint-disable custom-property-pattern
+
 .item {
   &:hover {
     cursor: pointer;
@@ -7,7 +9,7 @@
 
 .row {
   &:nth-of-type(odd) {
-    background-color: var(--color-scale-blue-0);
+    background-color: var(--bgColor-accent-muted, var(--color-accent-subtle)); // custom-style
   }
 }
 

package/build/primer/Label/counters.scss

@@ -1,40 +1 @@
-@import '~@papillonbits/css/build/primer/support/variables/typography.scss';
-@import '~@papillonbits/css/build/primer/support/variables/layout.scss';
-@import '~@papillonbits/css/build/primer/support/variables/misc.scss';
-
-// Counters are rounded-corner badges for numbers
-.Counter {
-  display: inline-block;
-  min-width: $size-2; // makes sure it's a circle with just one digit
-  // stylelint-disable-next-line primer/spacing
-  padding: 0 6px;
-  font-size: $font-size-small;
-  font-weight: $font-weight-semibold;
-  // stylelint-disable-next-line primer/typography
-  line-height: $size-2 - 2px; // remove borders
-  color: var(--color-fg-default);
-  text-align: center;
-  background-color: var(--color-neutral-muted);
-  border: $border-width $border-style var(--color-counter-border);
-  // stylelint-disable-next-line primer/borders
-  border-radius: 2em;
-
-  &:empty {
-    display: none;
-  }
-
-  .octicon {
-    vertical-align: text-top;
-    opacity: 0.8;
-  }
-}
-
-.Counter--primary {
-  color: var(--color-fg-on-emphasis);
-  background-color: var(--color-neutral-emphasis);
-}
-
-.Counter--secondary {
-  color: var(--color-fg-muted);
-  background-color: var(--color-neutral-subtle);
-}
+@import '@primer/view-components/app/components/primer/beta/counter';

package/build/primer/Label/index.scss

@@ -3,4 +3,3 @@
 @import './labels.scss';
 @import './states.scss';
 @import './counters.scss';
-@import './diffstat.scss';