polaris_tokens 2.1.1 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6c2e46756c2380589610e0fddd199dbeced1e714407249cd95cf5433640ce05b
-  data.tar.gz: 4b910e67b7324954ba3f4ebc55b3d70de4839990532a65b90426ef391302ec8b
+  metadata.gz: 90ad5818eaa391e85804bf6ad8cbd55a7a03a71fc110ac27c292380b6cefc647
+  data.tar.gz: 3a31c0ebbd0476f7b7e503f395fc22ca5f6521fff4475247892d17c10fbe8794
 SHA512:
-  metadata.gz: a0b7570d09d118df00a061d954927ab9a16cfee69bba13159a03ebd572432c2596207109b150d50602e3c9a609424cd95eaeec326f4cb4031f7cf0a00ad7d2b3
-  data.tar.gz: 5aaf66fd3455be756fae90d86a201dcf5c4ec618716213ed4766d0717c90deaea1c644ed43925bd9c01bb11e7a35196b6a1f149c229a8641d67028902901f294
+  metadata.gz: 185e53dba32775e14214fd385d563fb096281b44bf83d1d14af777a2eb42e373eff22c32ce4e0cdb94d4b9ade292cafbf631898964fd38a982247e2812683cb3
+  data.tar.gz: 51659776505fcd0478dbfe731a858ae51f61b2ab3a164200092c7fd6fa25a41b0b0610682021df6cf4a5dbea34c357f00fd04a80cf89a5eb09fa0d800e0fbe93

data/README.md

@@ -127,7 +127,7 @@ polaris_colors['color-blue-lighter'] # "rgb(235, 245, 250)"
 
 Color tokens include a [CSS Filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (`filter`) value as part of [their metadata](https://github.com/Shopify/polaris-tokens/blob/master/data/color-metadata.yml). When this filter is applied to an element, it will change that element’s color to _approximate_ the target token color.
 
-```
+```html
 <div>
   No background, no filter
 </div>
@@ -136,27 +136,40 @@ Color tokens include a [CSS Filter](https://developer.mozilla.org/en-US/docs/Web
   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%)">
+<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%)">
+<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.)
+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 (as in: 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` (for example `<img src="circle.svg" alt="" />`); when SVGs are rendered like this, browsers will block code execution. Unfortunately, it also means that the SVGs cannot be styled with external CSS (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.
 
-```
+```html
 <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
+  <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
+  <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>
 ```
 
@@ -164,12 +177,21 @@ CSS filters allow us the safety of rendering SVGs inside `img` elements, but sti
 
 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.
 
-```
+```html
 <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
+  <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
+  <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>
 ```
 

data/dist/index.common.js

@@ -60,6 +60,7 @@ module.exports = {
   spacingNone: 0,
   spacingExtraTight: '4px',
   spacingTight: '8px',
+  spacingBaseTight: '12px',
   spacingBase: '16px',
   spacingLoose: '20px',
   spacingExtraLoose: '32px',

data/dist/index.custom-properties.css

@@ -60,6 +60,7 @@
   --spacing-none: 0;
   --spacing-extra-tight: 4px;
   --spacing-tight: 8px;
+  --spacing-base-tight: 12px;
   --spacing-base: 16px;
   --spacing-loose: 20px;
   --spacing-extra-loose: 32px;

data/dist/index.d.ts

@@ -60,6 +60,7 @@ declare interface Tokens {
   fontStackBase: "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif";
   fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace";
   spacingBase: "16px";
+  spacingBaseTight: "12px";
   spacingExtraLoose: "32px";
   spacingExtraTight: "4px";
   spacingLoose: "20px";

data/dist/index.json

@@ -60,6 +60,7 @@
   "spacing-none": 0,
   "spacing-extra-tight": "4px",
   "spacing-tight": "8px",
+  "spacing-base-tight": "12px",
   "spacing-base": "16px",
   "spacing-loose": "20px",
   "spacing-extra-loose": "32px",

data/dist/index.map.scss

@@ -182,6 +182,9 @@ $polaris-index-map: (
   'spacing-tight': (
     8px,
   ),
+  'spacing-base-tight': (
+    12px,
+  ),
   'spacing-base': (
     16px,
   ),

data/dist/index.raw.json

@@ -603,6 +603,13 @@
       "value": "8px",
       "originalValue": "8px"
     },
+    "spacing-base-tight": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-base-tight",
+      "value": "12px",
+      "originalValue": "12px"
+    },
     "spacing-base": {
       "type": "number",
       "category": "spacing",

data/dist/index.scss

@@ -59,6 +59,7 @@ $color-white: rgb(255, 255, 255);
 $spacing-none: 0;
 $spacing-extra-tight: 4px;
 $spacing-tight: 8px;
+$spacing-base-tight: 12px;
 $spacing-base: 16px;
 $spacing-loose: 20px;
 $spacing-extra-loose: 32px;

data/dist/spacing.common.js

@@ -2,6 +2,7 @@ module.exports = {
   spacingNone: 0,
   spacingExtraTight: '4px',
   spacingTight: '8px',
+  spacingBaseTight: '12px',
   spacingBase: '16px',
   spacingLoose: '20px',
   spacingExtraLoose: '32px',

data/dist/spacing.custom-properties.css

@@ -2,6 +2,7 @@
   --spacing-none: 0;
   --spacing-extra-tight: 4px;
   --spacing-tight: 8px;
+  --spacing-base-tight: 12px;
   --spacing-base: 16px;
   --spacing-loose: 20px;
   --spacing-extra-loose: 32px;

data/dist/spacing.json

@@ -2,6 +2,7 @@
   "spacing-none": 0,
   "spacing-extra-tight": "4px",
   "spacing-tight": "8px",
+  "spacing-base-tight": "12px",
   "spacing-base": "16px",
   "spacing-loose": "20px",
   "spacing-extra-loose": "32px"

data/dist/spacing.map.scss

@@ -8,6 +8,9 @@ $polaris-spacing-map: (
   'spacing-tight': (
     8px,
   ),
+  'spacing-base-tight': (
+    12px,
+  ),
   'spacing-base': (
     16px,
   ),

data/dist/spacing.raw.json

@@ -22,6 +22,13 @@
       "value": "8px",
       "originalValue": "8px"
     },
+    "spacing-base-tight": {
+      "type": "number",
+      "category": "spacing",
+      "name": "spacing-base-tight",
+      "value": "12px",
+      "originalValue": "12px"
+    },
     "spacing-base": {
       "type": "number",
       "category": "spacing",

data/dist/spacing.scss

@@ -1,6 +1,7 @@
 $spacing-none: 0;
 $spacing-extra-tight: 4px;
 $spacing-tight: 8px;
+$spacing-base-tight: 12px;
 $spacing-base: 16px;
 $spacing-loose: 20px;
 $spacing-extra-loose: 32px;

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-tokens",
-  "version": "2.1.1",
+  "version": "2.2.0",
   "description": "Design Tokens for the Polaris Design System",
   "main": "index.js",
   "types": "dist/index.d.ts",
@@ -54,7 +54,7 @@
   },
   "homepage": "https://github.com/Shopify/polaris-tokens#readme",
   "devDependencies": {
-    "@shopify/sewing-kit": "^0.65.0",
+    "@shopify/sewing-kit": "^0.69.0",
     "ase-util": "^1.0.1",
     "ase-utils": "^0.1.1",
     "browser-sync": "^2.26.3",
@@ -71,15 +71,15 @@
     "gulp-theo": "^2.0.0",
     "http-server": "^0.11.1",
     "immutable": "^3.8.2",
-    "js-yaml": "^3.12.0",
+    "js-yaml": "^3.12.1",
     "lodash": "^4.17.11",
     "node-fetch": "^2.3.0",
-    "nodemon": "^1.18.7",
+    "nodemon": "^1.18.9",
     "npm-run-all": "^4.1.5",
-    "renamer": "^1.1.0",
-    "rimraf": "^2.6.2",
+    "renamer": "^1.1.1",
+    "rimraf": "^2.6.3",
     "run-sequence": "^2.2.1",
-    "theo": "8.0.1",
+    "theo": "8.1.1",
     "tinycolor2": "^1.4.1",
     "xml": "^1.0.1"
   }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: polaris_tokens
 version: !ruby/object:Gem::Version
-  version: 2.1.1
+  version: 2.2.0
 platform: ruby
 authors:
 - Shopify
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-01-04 00:00:00.000000000 Z
+date: 2019-02-19 00:00:00.000000000 Z
 dependencies: []
 description: Design Tokens for the Polaris Design System
 email: