conventions/custom-property-allowed-list
Allows definition of custom properties not using Polaris prefixes, flags declaration property values that are not valid Polaris tokens, flags declaration property values using private tokens.
Allows definition of custom properties not prefixed with --p-, --pc-, or --polaris-version-.
Example
root: {
// Do
+ --osui_animation-name-drag-handle-pulse: osui_drag-handle-pulse;
// Don't
- --p-animation-name-drag-handle-pulse: osui_drag-handle-pulse;
};
Flags declaration property values using --p-* that are not valid Polaris tokens.
Example
// Do
+ font-size: var(--p-font-size-400);
// Don't
- font-size: var(--p-fontsize-200);
Flags declaration property values using private --pc-* tokens.
Example
// Do
+ background: var(--p-color-bg-fill-inverse);
// Don't
- background: var(--pc-button-color-depressed);
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.
Example
// stylelint-disable-next-line -- why custom styles are being used instead of Polaris