border/at-rule-disallowed-list

Use Polaris shape tokens instead of custom styles so that border is consistent across the Admin. This helps merchants have a coherent user experience and also ensures that border is in sync with the design system.

// Do
+ outline: var(--p-border-width-025) solid transparent;
// Don't
- @include high-contrast-outline()

NOTE: The focus-ring at rule does not currently have an equivalent token or component. If you need to use it, feel free to add a stylelint ignore comment until a solution from Polaris is ready.

// Do
+ &:focus {
  + outline: var(--p-border-width-050) solid var(--p-color-border-focus);
  + outline-offset: var(--p-space-050);
+ }
// Don't
- @include focus-ring

Contribute

Have you found that merchants benefit from styles or components that aren't in Polaris? We'd love to learn more. You can jumpstart a contribution to Polaris in GitHub by:

• Starting a discussion to collaborate with the community to find a solution
• Submitting a feature proposal issue to share context on your suggestion
• Drafting a pull request with your proposed improvement or addition

Ignore failure

If styles are intentionally designed to diverge from Polaris and it isn't viable to contribute back to the design system, you can ignore the failing rule. Make sure to provide context as to why you are writing custom styles with a disable description.

// stylelint-disable-next-line -- why custom styles are being used instead of Polaris