@shopify/polaris-design-language-css-patch
🩹 A CSS patch for applications and channels to update the design language
This was created for the 2020 design language rollout. Partners who could not easily update the polaris dependency were given a small CSS file to override the styles to make the application or channel look like the design language.
This repo hosts the style.min.css file on unpkg.com through a NPM package. The style.min.css file is minified from style.css when releasing a new version.
How to use
Local development
- Clone the repository
dev clone polaris-design-language-css-patch - Install dependencies
dev up - Make changes to the
style.cssfile - Create a pull request and merge your changes into master
Release changes
- Checkout the master branch and get the latest changes
git checkout master && git pull - Create a new version and push the
yarn version - Push the version tag to GitHub
git push --follow-tags - Open Shipit and deploy the tag
Applications and channels using style.min.css
- Add the patch CSS file to your HTML
- Add a
.NewDesignclass to the parent element of your HTML<body class="NewDesign"> - Test the new styles and make sure that interactive states like focus and hover still work
<!DOCTYPE html>
<html lang="en">
<head>
+ <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris-design-language-css-patch@latest/style.min.css">
</head>
- <body>
+ <body class="NewDesign">
<!-- Your content -->
</body>
</html>