polaris_tokens 1.3.1 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 10d39cd6ff01c78eae280d7085a083d2f438d302
-  data.tar.gz: 85643feb6f370f144f6f8eeeef09c56febce98da
+  metadata.gz: 394ea24382d2338ff7e377210010e9be8e01b57a
+  data.tar.gz: 42cb4362aabd739b1d668f0e4fdf3e0a9b9fb158
 SHA512:
-  metadata.gz: 7e585e05ed2f29b73d0a43435562a26f5021a4889bbbe832957e2e85c04b445c97370ee78e363be82ec3d8c1735fee1e9791c43a73a83009a8a6a9a44d646e2d
-  data.tar.gz: 1fdb9c37d0bf8529c55f68e3148384a6813141c1b38ec147b28e6dcb10c30cf0d92f3bb27a419aea293e5c47a7c28246666c5b5da08620d02e4384b5871560c8
+  metadata.gz: f39416b88f86cd97cf8ae264cf10312f7750d53986e7b889776ece36571b34d9780c7e2ca293a046934ffb8a4859fee8a71a84f8da095ebc74e08e1f478d46f3
+  data.tar.gz: f6364cbc9278aba16bce05cd5116d9ab0878f6e332d15d62ccec4a63f370bf0ad20d82b77a351d17d67a8bb233fe0e473d5406cb0571b6c5fe7e52d4ae913bb1

data/README.md

@@ -26,27 +26,22 @@ Polaris design tokens are available as both a npm package (`@shopify/polaris-tok
 
 The recommended way to use and install design tokens may vary depending on your project; the most common are documented below.
 
-### JavaScript package installation
-
 Using [npm](https://www.npmjs.com/):
 
-```
+```console
 npm install @shopify/polaris-tokens --save
 ```
 
 Using [yarn](https://yarnpkg.com/en/):
 
-```
+```console
 yarn add @shopify/polaris-tokens
 ```
 
-### Ruby on Rails installation
+Using [Bundler](https://bundler.io/):
 
-Add `polaris_tokens` to your `Gemfile`:
-
-```sh
-$ echo "gem 'polaris_tokens'" >> Gemfile
-$ bundle install
+```console
+bundle add polaris_tokens
 ```
 
 ## Usage
@@ -120,6 +115,60 @@ polaris_colors = JSON.parse(polaris_token_file)
 polaris_colors['color-blue-lighter'] # "rgb(235, 245, 250)"
 ```
 
+### CSS Filters
+
+Color tokens include a [CSS Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (`filter`) value as part of their metadata. When this filter is applied to an element, it will change that element’s color to _approximate_ the target token color.
+
+```
+<div>
+  No background, no filter
+</div>
+
+<div style="background-color: #fff">
+  White background, no filter
+</div>
+
+<div style="filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)">
+  No background, red filter
+</div>
+
+<div style="background-color: #fff; filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)">
+  White background, red filter
+</div>
+```
+
+![text and non-transparent backgrounds become red when filter is applied](.github/filter-example-1.png)
+
+In general, these filters shouldn’t be used unless absolutely necessary. The main use case for the filters is to apply a color to an unsafe (e.g. user-provided) SVG. Since SVGs can contain arbitrary code, we should be careful about how they are displayed. The safest option is to render SVGs as an `img` (e.g. `<img src="circle.svg" />`); when SVGs are rendered like this, browsers will block code execution. Unfortunately, it also means that the SVGs cannot be styled with external CSS (e.g. applying `fill: red` to the `img` won’t do anything.)
+
+CSS filters allow us the safety of rendering SVGs inside `img` elements, but still give us control over their appearance.
+
+```
+<div>
+  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><circle cx='20' cy='20' r='16' /></svg>" alt="" /> black circle, no filter
+</div>
+<div>
+  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><circle cx='20' cy='20' r='16' /></svg>" style="filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)" alt="" /> black circle, red filter
+</div>
+```
+
+![the filter turns the black circle red](.github/filter-example-2.png)
+
+Note that _all_ filled areas of an SVG will change color with this approach, including borders/strokes. For that reason it should only be used with monochromatic SVGs.
+
+```
+<div>
+  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><circle cx='20' cy='20' r='16' stroke='green' stroke-width='4' /></svg>" alt="" /> black circle with green border, no filter
+</div>
+<div>
+  <img src="data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50'><circle cx='20' cy='20' r='16' stroke='green' stroke-width='4' /></svg>" style="filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)" alt="" /> black circle with green border, red filter
+</div>
+```
+
+![the filter turns the entire circle red, including the border](.github/filter-example-3.png)
+
+If you need to generate new filter values, you can do so with [this CodePen](https://codepen.io/kaelig/full/jeObGP/).
+
 ---
 
 ## Contributing
@@ -143,3 +192,7 @@ to learn how to propose changes and understand our development process.
 ### [License](https://github.com/Shopify/polaris-tokens/blob/master/LICENSE.md)
 
 The polaris-tokens project is available under the [MIT license](https://github.com/Shopify/polaris-tokens/blob/master/LICENSE.md).
+
+Parts of the code in this repository are directly inspired or borrowed
+from the [Theo project](https://github.com/salesforce-ux/theo),
+property of Salesforce.com, Inc., [licensed under BSD 3-Clause](https://git.io/sfdc-license).

data/dist/Polaris.sketchpalette

@@ -3,27 +3,27 @@
   "pluginVersion": "2.0",
   "colors": [
     {
-      "red": 0.5686274509803921,
-      "green": 0.6196078431372549,
-      "blue": 0.6705882352941176,
+      "red": 0.7686274509803922,
+      "green": 0.803921568627451,
+      "blue": 0.8352941176470589,
       "alpha": 1
     },
     {
-      "red": 0.38823529411764707,
-      "green": 0.45098039215686275,
-      "blue": 0.5058823529411764,
+      "red": 0.8745098039215686,
+      "green": 0.8901960784313725,
+      "blue": 0.9098039215686274,
       "alpha": 1
     },
     {
-      "red": 0.27058823529411763,
-      "green": 0.30980392156862746,
-      "blue": 0.3568627450980392,
+      "red": 0.9568627450980393,
+      "green": 0.9647058823529412,
+      "blue": 0.9725490196078431,
       "alpha": 1
     },
     {
-      "red": 0.12941176470588237,
-      "green": 0.16862745098039217,
-      "blue": 0.21176470588235294,
+      "red": 0.9764705882352941,
+      "green": 0.9803921568627451,
+      "blue": 0.984313725490196,
       "alpha": 1
     },
     {"red": 1, "green": 1, "blue": 1, "alpha": 1},
@@ -31,27 +31,27 @@
     {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.9764705882352941,
-      "green": 0.9803921568627451,
-      "blue": 0.984313725490196,
+      "red": 0.12941176470588237,
+      "green": 0.16862745098039217,
+      "blue": 0.21176470588235294,
       "alpha": 1
     },
     {
-      "red": 0.9568627450980393,
-      "green": 0.9647058823529412,
-      "blue": 0.9725490196078431,
+      "red": 0.27058823529411763,
+      "green": 0.30980392156862746,
+      "blue": 0.3568627450980392,
       "alpha": 1
     },
     {
-      "red": 0.8745098039215686,
-      "green": 0.8901960784313725,
-      "blue": 0.9098039215686274,
+      "red": 0.38823529411764707,
+      "green": 0.45098039215686275,
+      "blue": 0.5058823529411764,
       "alpha": 1
     },
     {
-      "red": 0.7686274509803922,
-      "green": 0.803921568627451,
-      "blue": 0.8352941176470589,
+      "red": 0.5686274509803921,
+      "green": 0.6196078431372549,
+      "blue": 0.6705882352941176,
       "alpha": 1
     },
     {"red": 1, "green": 1, "blue": 1, "alpha": 1},
@@ -59,21 +59,15 @@
     {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.984313725490196,
-      "green": 0.9176470588235294,
-      "blue": 0.8980392156862745,
-      "alpha": 1
-    },
-    {
-      "red": 0.996078431372549,
-      "green": 0.6784313725490196,
-      "blue": 0.6039215686274509,
+      "red": 0.34509803921568627,
+      "green": 0.23529411764705882,
+      "blue": 0.20784313725490197,
       "alpha": 1
     },
     {
-      "red": 0.8705882352941177,
-      "green": 0.21176470588235294,
-      "blue": 0.09411764705882353,
+      "red": 0.2,
+      "green": 0.00392156862745098,
+      "blue": 0.00392156862745098,
       "alpha": 1
     },
     {
@@ -83,35 +77,35 @@
       "alpha": 1
     },
     {
-      "red": 0.2,
-      "green": 0.00392156862745098,
-      "blue": 0.00392156862745098,
+      "red": 0.8705882352941177,
+      "green": 0.21176470588235294,
+      "blue": 0.09411764705882353,
       "alpha": 1
     },
     {
-      "red": 0.34509803921568627,
-      "green": 0.23529411764705882,
-      "blue": 0.20784313725490197,
+      "red": 0.996078431372549,
+      "green": 0.6784313725490196,
+      "blue": 0.6039215686274509,
       "alpha": 1
     },
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.9882352941176471,
-      "green": 0.9215686274509803,
-      "blue": 0.8588235294117647,
+      "red": 0.984313725490196,
+      "green": 0.9176470588235294,
+      "blue": 0.8980392156862745,
       "alpha": 1
     },
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 1,
-      "green": 0.7725490196078432,
-      "blue": 0.5450980392156862,
+      "red": 0.34901960784313724,
+      "green": 0.26666666666666666,
+      "blue": 0.18823529411764706,
       "alpha": 1
     },
     {
-      "red": 0.9568627450980393,
-      "green": 0.5764705882352941,
-      "blue": 0.25882352941176473,
+      "red": 0.2901960784313726,
+      "green": 0.08235294117647059,
+      "blue": 0.01568627450980392,
       "alpha": 1
     },
     {
@@ -121,34 +115,34 @@
       "alpha": 1
     },
     {
-      "red": 0.2901960784313726,
-      "green": 0.08235294117647059,
-      "blue": 0.01568627450980392,
+      "red": 0.9568627450980393,
+      "green": 0.5764705882352941,
+      "blue": 0.25882352941176473,
       "alpha": 1
     },
     {
-      "red": 0.34901960784313724,
-      "green": 0.26666666666666666,
-      "blue": 0.18823529411764706,
+      "red": 1,
+      "green": 0.7725490196078432,
+      "blue": 0.5450980392156862,
       "alpha": 1
     },
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
       "red": 0.9882352941176471,
-      "green": 0.9450980392156862,
-      "blue": 0.803921568627451,
+      "green": 0.9215686274509803,
+      "blue": 0.8588235294117647,
       "alpha": 1
     },
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 1,
-      "green": 0.9176470588235294,
-      "blue": 0.5411764705882353,
+      "red": 0.34901960784313724,
+      "green": 0.3176470588235294,
+      "blue": 0.18823529411764706,
       "alpha": 1
     },
     {
-      "red": 0.9333333333333333,
-      "green": 0.7607843137254902,
+      "red": 0.3411764705882353,
+      "green": 0.23137254901960785,
       "blue": 0,
       "alpha": 1
     },
@@ -159,35 +153,35 @@
       "alpha": 1
     },
     {
-      "red": 0.3411764705882353,
-      "green": 0.23137254901960785,
+      "red": 0.9333333333333333,
+      "green": 0.7607843137254902,
       "blue": 0,
       "alpha": 1
     },
     {
-      "red": 0.34901960784313724,
-      "green": 0.3176470588235294,
-      "blue": 0.18823529411764706,
+      "red": 1,
+      "green": 0.9176470588235294,
+      "blue": 0.5411764705882353,
       "alpha": 1
     },
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.8901960784313725,
+      "red": 0.9882352941176471,
       "green": 0.9450980392156862,
-      "blue": 0.8745098039215686,
+      "blue": 0.803921568627451,
       "alpha": 1
     },
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.7333333333333333,
-      "green": 0.8980392156862745,
-      "blue": 0.7019607843137254,
+      "red": 0.2549019607843137,
+      "green": 0.30980392156862746,
+      "blue": 0.24313725490196078,
       "alpha": 1
     },
     {
-      "red": 0.3137254901960784,
-      "green": 0.7215686274509804,
-      "blue": 0.23529411764705882,
+      "red": 0.09019607843137255,
+      "green": 0.21176470588235294,
+      "blue": 0.18823529411764706,
       "alpha": 1
     },
     {
@@ -197,35 +191,35 @@
       "alpha": 1
     },
     {
-      "red": 0.09019607843137255,
-      "green": 0.21176470588235294,
-      "blue": 0.18823529411764706,
+      "red": 0.3137254901960784,
+      "green": 0.7215686274509804,
+      "blue": 0.23529411764705882,
       "alpha": 1
     },
     {
-      "red": 0.2549019607843137,
-      "green": 0.30980392156862746,
-      "blue": 0.24313725490196078,
+      "red": 0.7333333333333333,
+      "green": 0.8980392156862745,
+      "blue": 0.7019607843137254,
       "alpha": 1
     },
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.8784313725490196,
-      "green": 0.9607843137254902,
-      "blue": 0.9607843137254902,
+      "red": 0.8901960784313725,
+      "green": 0.9450980392156862,
+      "blue": 0.8745098039215686,
       "alpha": 1
     },
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.7176470588235294,
-      "green": 0.9254901960784314,
-      "blue": 0.9254901960784314,
+      "red": 0.25098039215686274,
+      "green": 0.3254901960784314,
+      "blue": 0.3215686274509804,
       "alpha": 1
     },
     {
-      "red": 0.2784313725490196,
-      "green": 0.7568627450980392,
-      "blue": 0.7490196078431373,
+      "red": 0,
+      "green": 0.19215686274509805,
+      "blue": 0.20784313725490197,
       "alpha": 1
     },
     {
@@ -235,35 +229,35 @@
       "alpha": 1
     },
     {
-      "red": 0,
-      "green": 0.19215686274509805,
-      "blue": 0.20784313725490197,
+      "red": 0.2784313725490196,
+      "green": 0.7568627450980392,
+      "blue": 0.7490196078431373,
       "alpha": 1
     },
     {
-      "red": 0.25098039215686274,
-      "green": 0.3254901960784314,
-      "blue": 0.3215686274509804,
+      "red": 0.7176470588235294,
+      "green": 0.9254901960784314,
+      "blue": 0.9254901960784314,
       "alpha": 1
     },
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.9215686274509803,
+      "red": 0.8784313725490196,
       "green": 0.9607843137254902,
-      "blue": 0.9803921568627451,
+      "blue": 0.9607843137254902,
       "alpha": 1
     },
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.7058823529411765,
-      "green": 0.8823529411764706,
-      "blue": 0.9803921568627451,
+      "red": 0.24313725490196078,
+      "green": 0.3058823529411765,
+      "blue": 0.3411764705882353,
       "alpha": 1
     },
     {
       "red": 0,
-      "green": 0.47843137254901963,
-      "blue": 0.807843137254902,
+      "green": 0.0784313725490196,
+      "blue": 0.1607843137254902,
       "alpha": 1
     },
     {
@@ -274,34 +268,34 @@
     },
     {
       "red": 0,
-      "green": 0.0784313725490196,
-      "blue": 0.1607843137254902,
+      "green": 0.47843137254901963,
+      "blue": 0.807843137254902,
       "alpha": 1
     },
     {
-      "red": 0.24313725490196078,
-      "green": 0.3058823529411765,
-      "blue": 0.3411764705882353,
+      "red": 0.7058823529411765,
+      "green": 0.8823529411764706,
+      "blue": 0.9803921568627451,
       "alpha": 1
     },
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.9568627450980393,
+      "red": 0.9215686274509803,
       "green": 0.9607843137254902,
       "blue": 0.9803921568627451,
       "alpha": 1
     },
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.7019607843137254,
-      "green": 0.7372549019607844,
-      "blue": 0.9607843137254902,
+      "red": 0.24313725490196078,
+      "green": 0.2549019607843137,
+      "blue": 0.3333333333333333,
       "alpha": 1
     },
     {
-      "red": 0.3607843137254902,
-      "green": 0.41568627450980394,
-      "blue": 0.7686274509803922,
+      "red": 0,
+      "green": 0.023529411764705882,
+      "blue": 0.2235294117647059,
       "alpha": 1
     },
     {
@@ -311,35 +305,35 @@
       "alpha": 1
     },
     {
-      "red": 0,
-      "green": 0.023529411764705882,
-      "blue": 0.2235294117647059,
+      "red": 0.3607843137254902,
+      "green": 0.41568627450980394,
+      "blue": 0.7686274509803922,
       "alpha": 1
     },
     {
-      "red": 0.24313725490196078,
-      "green": 0.2549019607843137,
-      "blue": 0.3333333333333333,
+      "red": 0.7019607843137254,
+      "green": 0.7372549019607844,
+      "blue": 0.9607843137254902,
       "alpha": 1
     },
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
-    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.9647058823529412,
-      "green": 0.9411764705882353,
-      "blue": 0.9921568627450981,
+      "red": 0.9568627450980393,
+      "green": 0.9607843137254902,
+      "blue": 0.9803921568627451,
       "alpha": 1
     },
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
+    {"red": 1, "green": 1, "blue": 1, "alpha": 1},
     {
-      "red": 0.8901960784313725,
-      "green": 0.8156862745098039,
-      "blue": 1,
+      "red": 0.3137254901960784,
+      "green": 0.28627450980392155,
+      "blue": 0.35294117647058826,
       "alpha": 1
     },
     {
-      "red": 0.611764705882353,
-      "green": 0.41568627450980394,
-      "blue": 0.8705882352941177,
+      "red": 0.13725490196078433,
+      "green": 0,
+      "blue": 0.3176470588235294,
       "alpha": 1
     },
     {
@@ -349,15 +343,21 @@
       "alpha": 1
     },
     {
-      "red": 0.13725490196078433,
-      "green": 0,
-      "blue": 0.3176470588235294,
+      "red": 0.611764705882353,
+      "green": 0.41568627450980394,
+      "blue": 0.8705882352941177,
       "alpha": 1
     },
     {
-      "red": 0.3137254901960784,
-      "green": 0.28627450980392155,
-      "blue": 0.35294117647058826,
+      "red": 0.8901960784313725,
+      "green": 0.8156862745098039,
+      "blue": 1,
+      "alpha": 1
+    },
+    {
+      "red": 0.9647058823529412,
+      "green": 0.9411764705882353,
+      "blue": 0.9921568627450981,
       "alpha": 1
     },
     {"red": 1, "green": 1, "blue": 1, "alpha": 1},