polaris_view_components 3.2.1 → 4.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0f703b7720bfbc23a767f3048d59c4103a98f8b531d6e2286ff3ab547d9fd8c5
-  data.tar.gz: 06d9061f7aeb530dd0212628fc12193a938163358e2d936cde52e778b5daf98e
+  metadata.gz: 8fec4405e8b1c604811d7bf69ece811a57fa31447754fe6a3f67cac17fc5c9ed
+  data.tar.gz: d670c3c83b34ec0bff77066c94ffbe0eca60530985f6b3d44589108c740f071e
 SHA512:
-  metadata.gz: 0e5d4e8773ef7188b38fe25480d44055344669ffa423062d34081d2688195fcc3787824664be85b7dad9b33c8fbac2b8e52a4775dd72e208f9cde20ff8e6dc89
-  data.tar.gz: 8eabe9ca213beacb929666e490b7f76bb15b5030ef0c944271d6b9783e92c2e9103cb9b146da4ce10236981891e227cd9bf62fe6107cbcd78e499f9e25a2c371
+  metadata.gz: 29daf7afd8f7a06ec3b9c41530a97b02bdd2accc663f911133ab413d8682c06d503a697afc0ea28719084fc9498d7a04cf98ac61fcdab3632f0c299a451006b2
+  data.tar.gz: 0120f2a3d552796b7eeb7ef4de1d38fb7d8862865e776d96548abfaacb8b95879b0a29ed964006ad8ca7c8b00cd865beeec40333bab665371c05af604033bcb9

data/README.md

@@ -44,7 +44,7 @@ Check out [UPGRADING.md](UPGRADING.md) for upgrade instructions.
 To get started:
 
 1. Run: `bundle install`
-1. Run: `pnpm install`
+1. Run: `pnpm install --frozen-lockfile`
 1. Run: `bin/dev`
 
 It will open the demo app with component previews on `localhost:4000`. You can change components and they will be updated on page reload. Component previews are located in `demo/app/previews`.

data/app/assets/fonts/OFL.txt

@@ -0,0 +1,92 @@
+Copyright (c) 2016 The Inter Project Authors (https://github.com/rsms/inter)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION AND CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

data/app/assets/icons/polaris/AlertCircleFilledIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 20 20"><path fill-rule="evenodd" d="M8 1a7 7 0 1 1 0 14 7 7 0 0 1 0-14m0 9a1 1 0 1 0 0 2 1 1 0 0 0 0-2m0-6a.75.75 0 0 0-.75.75v3.496a.75.75 0 1 0 1.5 0v-3.496a.75.75 0 0 0-.75-.75"/></svg>

data/app/assets/icons/polaris/CheckCircleFilledIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 20 20"><path fill-rule="evenodd" d="M8 1a7 7 0 1 1 .001 14.001 7 7 0 0 1-.001-14.001m2.66 4.37a.75.75 0 0 0-1.037.222l-2.249 3.471-1.094-1.093a.75.75 0 1 0-1.06 1.06l1.75 1.75a.75.75 0 0 0 1.16-.122l2.752-4.25a.75.75 0 0 0-.222-1.038"/></svg>

data/app/assets/icons/polaris/InfoFilledIcon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 20 20"><path fill-rule="evenodd" d="M8 1a7 7 0 1 1 0 14 7 7 0 0 1 0-14m-1.25 6a.75.75 0 0 0 0 1.5h.752v2.747a.75.75 0 0 0 1.5 0v-3.497a.75.75 0 0 0-.75-.75zm1.25-3a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/></svg>

data/app/assets/javascripts/polaris_view_components/button_controller.js

@@ -9,7 +9,7 @@ export default class extends Controller {
     } else {
       this.disabledValue = true
       this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading")
-      this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML)
+      this.button.insertAdjacentHTML("afterbegin", this.spinnerHTML)
     }
   }
 
@@ -46,12 +46,11 @@ export default class extends Controller {
 
   get spinnerHTML() {
     return `
-      <span class="Polaris-Button__Spinner">
-        <span class="Polaris-Spinner Polaris-Spinner--sizeSmall">
-          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
-            <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"></path>
-          </svg>
-        </span>
+      <span class="Polaris-Button__Spinner" role="status" aria-label="Loading">
+        <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+          <circle class="Polaris-Button__SpinnerTrack" r="14" stroke-width="3" cx="22" cy="22"></circle>
+          <circle class="Polaris-Button__SpinnerIndicator" pathLength="10" r="14" stroke-width="3" cx="22" cy="22"></circle>
+        </svg>
       </span>
     `
   }

data/app/assets/javascripts/polaris_view_components/dropzone_controller.js

@@ -378,6 +378,8 @@ export default class extends Controller {
   }
 
   calculateSize () {
+    if (this.sizeValue === SIZES.SMALL) return SIZES.SMALL
+
     const width = this.element.getBoundingClientRect().width
 
     let size = SIZES.LARGE

data/app/assets/javascripts/polaris_view_components/index.js

@@ -11,6 +11,7 @@ import Popover from './popover_controller'
 import ResourceItem from './resource_item_controller'
 import Scrollable from './scrollable_controller'
 import Select from './select_controller'
+import Tabs from './tabs_controller'
 import TextField from './text_field_controller'
 import Toast from './toast_controller'
 import Tooltip from './tooltip_controller'
@@ -32,6 +33,7 @@ export function registerPolarisControllers(application) {
   application.register('polaris-resource-item', ResourceItem)
   application.register('polaris-scrollable', Scrollable)
   application.register('polaris-select', Select)
+  application.register('polaris-tabs', Tabs)
   application.register('polaris-text-field', TextField)
   application.register('polaris-toast', Toast)
   application.register('polaris-tooltip', Tooltip)

data/app/assets/javascripts/polaris_view_components/popover_controller.js

@@ -5,6 +5,7 @@ import {
   offset,
   flip,
   shift,
+  size,
 } from "@floating-ui/dom";
 
 export default class extends Controller {
@@ -18,19 +19,27 @@ export default class extends Controller {
   };
 
   connect() {
-    if (this.appendToBodyValue) {
-      const clonedTemplate = this.templateTarget.content.cloneNode(true);
-      this.target = clonedTemplate.firstElementChild;
-      document.body.appendChild(clonedTemplate);
+    // Popovers appended to the body are created on first open, so long lists don't add a popover per row up front.
+    if (!this.appendToBodyValue) {
+      this.target.style.display = "none";
     }
 
-    this.target.style.display = "none";
-
     if (this.activeValue) {
       this.show();
     }
   }
 
+  ensureTarget() {
+    if (this.appendToBodyValue && !this._target) {
+      const clonedTemplate = this.templateTarget.content.cloneNode(true);
+      this.target = clonedTemplate.firstElementChild;
+      this.target.style.display = "none";
+      document.body.appendChild(clonedTemplate);
+    }
+
+    return this.target;
+  }
+
   disconnect() {
     if (this.cleanup) {
       this.cleanup();
@@ -55,6 +64,14 @@ export default class extends Controller {
             fallbackStrategy: "bestFit",
           }),
           shift({ padding: 5 }),
+          // Full width popovers match the activator, like autocomplete results under their field
+          size({
+            apply: ({ rects }) => {
+              if (this.fullWidth) {
+                this.target.style.width = `${rects.reference.width}px`;
+              }
+            },
+          }),
         ],
       }).then(({ x, y }) => {
         Object.assign(this.target.style, {
@@ -66,6 +83,8 @@ export default class extends Controller {
   }
 
   toggle() {
+    this.ensureTarget();
+
     if (this.target.classList.contains(this.openClass)) {
       this.forceHide();
     } else {
@@ -74,6 +93,7 @@ export default class extends Controller {
   }
 
   show() {
+    this.ensureTarget();
     this.target.style.display = "block";
     this.target.classList.remove(this.closedClass);
     this.target.classList.add(this.openClass);
@@ -81,6 +101,7 @@ export default class extends Controller {
   }
 
   hide(event) {
+    if (!this.target) return;
     if (this.element.contains(event.target)) return;
     if (this.target.classList.contains(this.closedClass)) return;
     if (this.appendToBodyValue && this.target.contains(event.target)) return;
@@ -89,6 +110,8 @@ export default class extends Controller {
   }
 
   forceHide() {
+    if (!this.target) return;
+
     this.target.style.display = "none";
     this.target.classList.remove(this.openClass);
     this.target.classList.add(this.closedClass);
@@ -104,6 +127,10 @@ export default class extends Controller {
     }
   }
 
+  get fullWidth() {
+    return this.target.querySelector(".Polaris-Popover--fullWidth") !== null;
+  }
+
   get target() {
     if (this.hasPopoverTarget) {
       return this.popoverTarget;

data/app/assets/javascripts/polaris_view_components/tabs_controller.js

@@ -0,0 +1,14 @@
+import { Controller } from '@hotwired/stimulus'
+
+// eslint-disable-next-line import/no-default-export
+export default class extends Controller {
+  connect () {
+    const selectedTab = this.element.querySelector('.Polaris-LegacyTabs__Tab--selected')
+    if (!selectedTab) return
+
+    // Scrolls only the tab list, while scrollIntoView could also move the page
+    const list = this.element.getBoundingClientRect()
+    const tab = selectedTab.getBoundingClientRect()
+    this.element.scrollLeft += tab.left - list.left - (list.width - tab.width) / 2
+  }
+}

data/app/assets/javascripts/polaris_view_components.js

@@ -312,7 +312,7 @@ class Button extends Controller {
     } else {
       this.disabledValue = true;
       this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading");
-      this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML);
+      this.button.insertAdjacentHTML("afterbegin", this.spinnerHTML);
     }
   }
   disableWithoutLoader(event) {
@@ -340,7 +340,7 @@ class Button extends Controller {
     return this.button.querySelector(".Polaris-Button__Spinner");
   }
   get spinnerHTML() {
-    return `\n      <span class="Polaris-Button__Spinner">\n        <span class="Polaris-Spinner Polaris-Spinner--sizeSmall">\n          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">\n            <path d="M7.229 1.173a9.25 9.25 0 1011.655 11.412 1.25 1.25 0 10-2.4-.698 6.75 6.75 0 11-8.506-8.329 1.25 1.25 0 10-.75-2.385z"></path>\n          </svg>\n        </span>\n      </span>\n    `;
+    return `\n      <span class="Polaris-Button__Spinner" role="status" aria-label="Loading">\n        <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">\n          <circle class="Polaris-Button__SpinnerTrack" r="14" stroke-width="3" cx="22" cy="22"></circle>\n          <circle class="Polaris-Button__SpinnerIndicator" pathLength="10" r="14" stroke-width="3" cx="22" cy="22"></circle>\n        </svg>\n      </span>\n    `;
   }
 }
 
@@ -694,6 +694,7 @@ class Dropzone extends Controller {
     this.previewRendered = false;
   }
   calculateSize() {
+    if (this.sizeValue === SIZES.SMALL) return SIZES.SMALL;
     const width = this.element.getBoundingClientRect().width;
     let size = SIZES.LARGE;
     if (width < 100) {
@@ -1485,6 +1486,71 @@ const shift = function(options) {
   };
 };
 
+const size = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "size",
+    options: options,
+    async fn(state) {
+      const {placement: placement, rects: rects, platform: platform, elements: elements} = state;
+      const {apply: apply = (() => {}), ...detectOverflowOptions} = evaluate(options, state);
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const side = getSide(placement);
+      const alignment = getAlignment(placement);
+      const isYAxis = getSideAxis(placement) === "y";
+      const {width: width, height: height} = rects.floating;
+      let heightSide;
+      let widthSide;
+      if (side === "top" || side === "bottom") {
+        heightSide = side;
+        widthSide = alignment === (await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
+      } else {
+        widthSide = side;
+        heightSide = alignment === "end" ? "top" : "bottom";
+      }
+      const overflowAvailableHeight = height - overflow[heightSide];
+      const overflowAvailableWidth = width - overflow[widthSide];
+      const noShift = !state.middlewareData.shift;
+      let availableHeight = overflowAvailableHeight;
+      let availableWidth = overflowAvailableWidth;
+      if (isYAxis) {
+        const maximumClippingWidth = width - overflow.left - overflow.right;
+        availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
+      } else {
+        const maximumClippingHeight = height - overflow.top - overflow.bottom;
+        availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
+      }
+      if (noShift && !alignment) {
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
+        if (isYAxis) {
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
+        } else {
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+        }
+      }
+      await apply({
+        ...state,
+        availableWidth: availableWidth,
+        availableHeight: availableHeight
+      });
+      const nextDimensions = await platform.getDimensions(elements.floating);
+      if (width !== nextDimensions.width || height !== nextDimensions.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
 function getNodeName(node) {
   if (isNode(node)) {
     return (node.nodeName || "").toLowerCase();
@@ -2145,16 +2211,22 @@ class Popover extends Controller {
     textFieldActivator: Boolean
   };
   connect() {
-    if (this.appendToBodyValue) {
-      const clonedTemplate = this.templateTarget.content.cloneNode(true);
-      this.target = clonedTemplate.firstElementChild;
-      document.body.appendChild(clonedTemplate);
+    if (!this.appendToBodyValue) {
+      this.target.style.display = "none";
     }
-    this.target.style.display = "none";
     if (this.activeValue) {
       this.show();
     }
   }
+  ensureTarget() {
+    if (this.appendToBodyValue && !this._target) {
+      const clonedTemplate = this.templateTarget.content.cloneNode(true);
+      this.target = clonedTemplate.firstElementChild;
+      this.target.style.display = "none";
+      document.body.appendChild(clonedTemplate);
+    }
+    return this.target;
+  }
   disconnect() {
     if (this.cleanup) {
       this.cleanup();
@@ -2176,6 +2248,12 @@ class Popover extends Controller {
           fallbackStrategy: "bestFit"
         }), shift({
           padding: 5
+        }), size({
+          apply: ({rects: rects}) => {
+            if (this.fullWidth) {
+              this.target.style.width = `${rects.reference.width}px`;
+            }
+          }
         }) ]
       }).then((({x: x, y: y}) => {
         Object.assign(this.target.style, {
@@ -2186,6 +2264,7 @@ class Popover extends Controller {
     }));
   }
   toggle() {
+    this.ensureTarget();
     if (this.target.classList.contains(this.openClass)) {
       this.forceHide();
     } else {
@@ -2193,18 +2272,21 @@ class Popover extends Controller {
     }
   }
   show() {
+    this.ensureTarget();
     this.target.style.display = "block";
     this.target.classList.remove(this.closedClass);
     this.target.classList.add(this.openClass);
     this.updatePosition();
   }
   hide(event) {
+    if (!this.target) return;
     if (this.element.contains(event.target)) return;
     if (this.target.classList.contains(this.closedClass)) return;
     if (this.appendToBodyValue && this.target.contains(event.target)) return;
     this.forceHide();
   }
   forceHide() {
+    if (!this.target) return;
     this.target.style.display = "none";
     this.target.classList.remove(this.openClass);
     this.target.classList.add(this.closedClass);
@@ -2216,6 +2298,9 @@ class Popover extends Controller {
       return this.activatorTarget;
     }
   }
+  get fullWidth() {
+    return this.target.querySelector(".Polaris-Popover--fullWidth") !== null;
+  }
   get target() {
     if (this.hasPopoverTarget) {
       return this.popoverTarget;
@@ -2314,6 +2399,16 @@ class Select extends Controller {
   }
 }
 
+class Tabs extends Controller {
+  connect() {
+    const selectedTab = this.element.querySelector(".Polaris-LegacyTabs__Tab--selected");
+    if (!selectedTab) return;
+    const list = this.element.getBoundingClientRect();
+    const tab = selectedTab.getBoundingClientRect();
+    this.element.scrollLeft += tab.left - list.left - (list.width - tab.width) / 2;
+  }
+}
+
 class TextField extends Controller {
   static targets=[ "input", "clearButton", "characterCount" ];
   static classes=[ "hasValue", "clearButtonHidden" ];
@@ -2568,6 +2663,7 @@ function registerPolarisControllers(application) {
   application.register("polaris-resource-item", ResourceItem);
   application.register("polaris-scrollable", Scrollable);
   application.register("polaris-select", Select);
+  application.register("polaris-tabs", Tabs);
   application.register("polaris-text-field", TextField);
   application.register("polaris-toast", Toast);
   application.register("polaris-tooltip", Tooltip);

data/app/assets/stylesheets/polaris_view_components/action_list.pcss

@@ -2,24 +2,39 @@ html[class~="Polaris-Summer-Editions-2023"] .Polaris-ActionList {
   .Polaris-ActionMenu-SecondaryAction a,
   .Polaris-ActionMenu-SecondaryAction button,
   .Polaris-ActionList__Item {
-    padding: var(--p-space-200);
+    padding: var(--p-space-150) var(--p-space-200);
+    border-radius: var(--p-border-radius-300);
     background: transparent !important;
 
     &:hover {
-      background: var(--p-color-bg-surface-secondary-hover) !important;
+      background: var(--p-color-bg-fill-transparent-hover) !important;
     }
 
+    &:active,
     &.Polaris-ActionList--active {
-      background: var(--p-color-bg-surface-secondary-active) !important;
+      background: var(--p-color-bg-fill-transparent-active) !important;
+      font-weight: var(--p-font-weight-medium);
     }
 
     &.Polaris-ActionList--destructive {
+      color: var(--p-color-text-critical);
+
       &:hover {
-        background: var(--p-color-bg-surface-critical-hover) !important;
+        background: var(--p-color-bg-surface-critical) !important;
       }
+
       svg {
         fill: var(--p-color-text-critical);
       }
     }
+
+    &.Polaris-ActionList--disabled:hover {
+      background: transparent !important;
+    }
+  }
+
+  .Polaris-ActionList__Prefix svg,
+  .Polaris-ActionList__Suffix svg {
+    fill: var(--p-color-icon);
   }
 }

data/app/assets/stylesheets/polaris_view_components/badge.pcss

@@ -0,0 +1,75 @@
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge {
+  --pc-badge-bg: rgba(0, 0, 0, 0.05);
+  --pc-badge-text: var(--p-color-text-secondary);
+  min-height: 1.25rem;
+  padding: var(--p-space-025) var(--p-space-150);
+  gap: var(--p-space-100);
+  border-radius: var(--p-border-radius-200);
+  background-color: var(--pc-badge-bg);
+  color: var(--pc-badge-text);
+  font-weight: var(--p-font-weight-medium);
+
+  .Polaris-Text--root {
+    font-size: var(--p-font-size-300);
+    font-weight: inherit;
+    line-height: 1.125rem;
+    letter-spacing: -0.01em;
+  }
+
+  svg {
+    fill: currentColor;
+  }
+
+  /* Progress pips sit in a 16px icon slot, like badge icons in the admin. */
+  &:has(> .Polaris-Badge__PipContainer) {
+    padding-left: var(--p-space-100);
+  }
+
+  .Polaris-Badge__PipContainer {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1rem;
+    height: 1rem;
+    margin: 0;
+  }
+
+  &.Polaris-Badge--statusInfo {
+    --pc-badge-bg: var(--p-color-bg-fill-info-secondary);
+    --pc-badge-text: #01596f;
+  }
+
+  &.Polaris-Badge--statusSuccess {
+    --pc-badge-bg: var(--p-color-bg-fill-success-secondary);
+    --pc-badge-text: #214b03;
+  }
+
+  &.Polaris-Badge--statusAttention {
+    --pc-badge-bg: var(--p-color-bg-fill-caution-secondary);
+    --pc-badge-text: #574100;
+  }
+
+  &.Polaris-Badge--statusWarning {
+    --pc-badge-bg: var(--p-color-bg-fill-warning-secondary);
+    --pc-badge-text: #6f2e01;
+  }
+
+  &.Polaris-Badge--statusCritical {
+    --pc-badge-bg: var(--p-color-bg-fill-critical-secondary);
+    --pc-badge-text: #7e100c;
+  }
+
+  &.Polaris-Badge--statusNew {
+    font-weight: var(--p-font-weight-semibold);
+  }
+
+  &.Polaris-Badge__sizeLarge--experimental,
+  &.Polaris-Badge--sizeLarge {
+    min-height: 1.75rem;
+    padding: var(--p-space-100) var(--p-space-200);
+  }
+}
+
+html[class~="Polaris-Summer-Editions-2023"] .Polaris-Badge-Pip {
+  --pc-pip-color: currentColor;
+}