polaris_tokens 2.2.0 → 2.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 90ad5818eaa391e85804bf6ad8cbd55a7a03a71fc110ac27c292380b6cefc647
-  data.tar.gz: 3a31c0ebbd0476f7b7e503f395fc22ca5f6521fff4475247892d17c10fbe8794
+  metadata.gz: 4ee99caf6b099795b84dbbba56012a67a41013c12a2a322d18a53162f806b8f4
+  data.tar.gz: 91f4a5abd1b82cfd981c82aec2a2f394cf256ca632a709d5d515daea222433c8
 SHA512:
-  metadata.gz: 185e53dba32775e14214fd385d563fb096281b44bf83d1d14af777a2eb42e373eff22c32ce4e0cdb94d4b9ade292cafbf631898964fd38a982247e2812683cb3
-  data.tar.gz: 51659776505fcd0478dbfe731a858ae51f61b2ab3a164200092c7fd6fa25a41b0b0610682021df6cf4a5dbea34c357f00fd04a80cf89a5eb09fa0d800e0fbe93
+  metadata.gz: 93ac987889f431b0a13a0f60024c11c0f3e7f15a6dd74811d18c23717f7e8639a911f23c48f4e84fccdc569ec8fedcf45ba5546df39597737612265766dc7219
+  data.tar.gz: ca5bbe48a5ad7af8ce40782b1002568d574e82c7cf984517161fe5c7aea4b23e61999b6d0e90a1d4542af029f5fc45d0e3e8721961c867739322e513ec500885

data/README.md

@@ -92,10 +92,10 @@ a {
 }
 
 // Using the map for a specific type of tokens (here: spacing)
-@import '~@shopify/polaris-tokens/dist/spacing.map';
+@import '~@shopify/polaris-tokens/dist/spacing.spacing-map';
 
 a {
-  color: map-get($polaris-spacing-map, 'spacing-loose');
+  color: map-get($polaris-spacing-map, 'loose');
 }
 ```
 
@@ -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,15 +136,11 @@ 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>
 ```
@@ -155,21 +151,12 @@ In general, these filters shouldn’t be used unless absolutely necessary. The m
 
 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>
 ```
 
@@ -177,21 +164,12 @@ 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/spacing.spacing-map.scss

@@ -0,0 +1,9 @@
+$polaris-spacing: (
+  'none': 0,
+  'extra-tight': 4px,
+  'tight': 8px,
+  'base-tight': 12px,
+  'base': 16px,
+  'loose': 20px,
+  'extra-loose': 32px,
+);

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shopify/polaris-tokens",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Design Tokens for the Polaris Design System",
   "main": "index.js",
   "types": "dist/index.d.ts",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: polaris_tokens
 version: !ruby/object:Gem::Version
-  version: 2.2.0
+  version: 2.3.0
 platform: ruby
 authors:
 - Shopify
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-02-19 00:00:00.000000000 Z
+date: 2019-02-20 00:00:00.000000000 Z
 dependencies: []
 description: Design Tokens for the Polaris Design System
 email:
@@ -51,6 +51,7 @@ files:
 - dist/spacing.map.scss
 - dist/spacing.raw.json
 - dist/spacing.scss
+- dist/spacing.spacing-map.scss
 - dist/typography.common.js
 - dist/typography.custom-properties.css
 - dist/typography.json