往 A CSS patch for applications and channels to update the design language

Usage no npm install needed!

<script type="module">
  import shopifyPolarisDesignLanguageCssPatch from 'https://cdn.skypack.dev/@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

  1. Clone the repository dev clone polaris-design-language-css-patch
  2. Install dependencies dev up
  3. Make changes to the style.css file
  4. Create a pull request and merge your changes into master

Release changes

  1. Checkout the master branch and get the latest changes git checkout master && git pull
  2. Create a new version and push the yarn version
  3. Push the version tag to GitHub git push --follow-tags
  4. Open Shipit and deploy the tag

Applications and channels using style.min.css

  1. Add the patch CSS file to your HTML
  2. Add a .NewDesign class to the parent element of your HTML <body class="NewDesign">
  3. Test the new styles and make sure that interactive states like focus and hover still work
<!DOCTYPE html>
<html lang="en">
+  <link rel="stylesheet" href="https://unpkg.com/@shopify/polaris-design-language-css-patch@latest/style.min.css">
- <body>
+ <body class="NewDesign">
  <!-- Your content -->