polaris_tokens 2.1.1 → 2.2.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6c2e46756c2380589610e0fddd199dbeced1e714407249cd95cf5433640ce05b
4
- data.tar.gz: 4b910e67b7324954ba3f4ebc55b3d70de4839990532a65b90426ef391302ec8b
3
+ metadata.gz: 90ad5818eaa391e85804bf6ad8cbd55a7a03a71fc110ac27c292380b6cefc647
4
+ data.tar.gz: 3a31c0ebbd0476f7b7e503f395fc22ca5f6521fff4475247892d17c10fbe8794
5
5
  SHA512:
6
- metadata.gz: a0b7570d09d118df00a061d954927ab9a16cfee69bba13159a03ebd572432c2596207109b150d50602e3c9a609424cd95eaeec326f4cb4031f7cf0a00ad7d2b3
7
- data.tar.gz: 5aaf66fd3455be756fae90d86a201dcf5c4ec618716213ed4766d0717c90deaea1c644ed43925bd9c01bb11e7a35196b6a1f149c229a8641d67028902901f294
6
+ metadata.gz: 185e53dba32775e14214fd385d563fb096281b44bf83d1d14af777a2eb42e373eff22c32ce4e0cdb94d4b9ade292cafbf631898964fd38a982247e2812683cb3
7
+ data.tar.gz: 51659776505fcd0478dbfe731a858ae51f61b2ab3a164200092c7fd6fa25a41b0b0610682021df6cf4a5dbea34c357f00fd04a80cf89a5eb09fa0d800e0fbe93
data/README.md CHANGED
@@ -127,7 +127,7 @@ polaris_colors['color-blue-lighter'] # "rgb(235, 245, 250)"
127
127
 
128
128
  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.
129
129
 
130
- ```
130
+ ```html
131
131
  <div>
132
132
  No background, no filter
133
133
  </div>
@@ -136,27 +136,40 @@ Color tokens include a [CSS Filter](https://developer.mozilla.org/en-US/docs/Web
136
136
  White background, no filter
137
137
  </div>
138
138
 
139
- <div style="filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)">
139
+ <div
140
+ style="filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)"
141
+ >
140
142
  No background, red filter
141
143
  </div>
142
144
 
143
- <div style="background-color: #fff; filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)">
145
+ <div
146
+ style="background-color: #fff; filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)"
147
+ >
144
148
  White background, red filter
145
149
  </div>
146
150
  ```
147
151
 
148
152
  ![text and non-transparent backgrounds become red when filter is applied](.github/filter-example-1.png)
149
153
 
150
- 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.)
154
+ 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.)
151
155
 
152
156
  CSS filters allow us the safety of rendering SVGs inside `img` elements, but still give us control over their appearance.
153
157
 
154
- ```
158
+ ```html
155
159
  <div>
156
- <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
160
+ <img
161
+ 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>"
162
+ alt=""
163
+ />
164
+ black circle, no filter
157
165
  </div>
158
166
  <div>
159
- <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
167
+ <img
168
+ 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>"
169
+ style="filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)"
170
+ alt=""
171
+ />
172
+ black circle, red filter
160
173
  </div>
161
174
  ```
162
175
 
@@ -164,12 +177,21 @@ CSS filters allow us the safety of rendering SVGs inside `img` elements, but sti
164
177
 
165
178
  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.
166
179
 
167
- ```
180
+ ```html
168
181
  <div>
169
- <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
182
+ <img
183
+ 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>"
184
+ alt=""
185
+ />
186
+ black circle with green border, no filter
170
187
  </div>
171
188
  <div>
172
- <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
189
+ <img
190
+ 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>"
191
+ style="filter: brightness(0) saturate(100%) invert(28%) sepia(67%) saturate(3622%) hue-rotate(353deg) brightness(89%) contrast(95%)"
192
+ alt=""
193
+ />
194
+ black circle with green border, red filter
173
195
  </div>
174
196
  ```
175
197
 
data/dist/index.common.js CHANGED
@@ -60,6 +60,7 @@ module.exports = {
60
60
  spacingNone: 0,
61
61
  spacingExtraTight: '4px',
62
62
  spacingTight: '8px',
63
+ spacingBaseTight: '12px',
63
64
  spacingBase: '16px',
64
65
  spacingLoose: '20px',
65
66
  spacingExtraLoose: '32px',
@@ -60,6 +60,7 @@
60
60
  --spacing-none: 0;
61
61
  --spacing-extra-tight: 4px;
62
62
  --spacing-tight: 8px;
63
+ --spacing-base-tight: 12px;
63
64
  --spacing-base: 16px;
64
65
  --spacing-loose: 20px;
65
66
  --spacing-extra-loose: 32px;
data/dist/index.d.ts CHANGED
@@ -60,6 +60,7 @@ declare interface Tokens {
60
60
  fontStackBase: "-apple-system, 'BlinkMacSystemFont', 'San Francisco', 'Roboto', 'Segoe UI', 'Helvetica Neue', sans-serif";
61
61
  fontStackMonospace: "Monaco, Consolas, 'Lucida Console', monospace";
62
62
  spacingBase: "16px";
63
+ spacingBaseTight: "12px";
63
64
  spacingExtraLoose: "32px";
64
65
  spacingExtraTight: "4px";
65
66
  spacingLoose: "20px";
data/dist/index.json CHANGED
@@ -60,6 +60,7 @@
60
60
  "spacing-none": 0,
61
61
  "spacing-extra-tight": "4px",
62
62
  "spacing-tight": "8px",
63
+ "spacing-base-tight": "12px",
63
64
  "spacing-base": "16px",
64
65
  "spacing-loose": "20px",
65
66
  "spacing-extra-loose": "32px",
data/dist/index.map.scss CHANGED
@@ -182,6 +182,9 @@ $polaris-index-map: (
182
182
  'spacing-tight': (
183
183
  8px,
184
184
  ),
185
+ 'spacing-base-tight': (
186
+ 12px,
187
+ ),
185
188
  'spacing-base': (
186
189
  16px,
187
190
  ),
data/dist/index.raw.json CHANGED
@@ -603,6 +603,13 @@
603
603
  "value": "8px",
604
604
  "originalValue": "8px"
605
605
  },
606
+ "spacing-base-tight": {
607
+ "type": "number",
608
+ "category": "spacing",
609
+ "name": "spacing-base-tight",
610
+ "value": "12px",
611
+ "originalValue": "12px"
612
+ },
606
613
  "spacing-base": {
607
614
  "type": "number",
608
615
  "category": "spacing",
data/dist/index.scss CHANGED
@@ -59,6 +59,7 @@ $color-white: rgb(255, 255, 255);
59
59
  $spacing-none: 0;
60
60
  $spacing-extra-tight: 4px;
61
61
  $spacing-tight: 8px;
62
+ $spacing-base-tight: 12px;
62
63
  $spacing-base: 16px;
63
64
  $spacing-loose: 20px;
64
65
  $spacing-extra-loose: 32px;
@@ -2,6 +2,7 @@ module.exports = {
2
2
  spacingNone: 0,
3
3
  spacingExtraTight: '4px',
4
4
  spacingTight: '8px',
5
+ spacingBaseTight: '12px',
5
6
  spacingBase: '16px',
6
7
  spacingLoose: '20px',
7
8
  spacingExtraLoose: '32px',
@@ -2,6 +2,7 @@
2
2
  --spacing-none: 0;
3
3
  --spacing-extra-tight: 4px;
4
4
  --spacing-tight: 8px;
5
+ --spacing-base-tight: 12px;
5
6
  --spacing-base: 16px;
6
7
  --spacing-loose: 20px;
7
8
  --spacing-extra-loose: 32px;
data/dist/spacing.json CHANGED
@@ -2,6 +2,7 @@
2
2
  "spacing-none": 0,
3
3
  "spacing-extra-tight": "4px",
4
4
  "spacing-tight": "8px",
5
+ "spacing-base-tight": "12px",
5
6
  "spacing-base": "16px",
6
7
  "spacing-loose": "20px",
7
8
  "spacing-extra-loose": "32px"
@@ -8,6 +8,9 @@ $polaris-spacing-map: (
8
8
  'spacing-tight': (
9
9
  8px,
10
10
  ),
11
+ 'spacing-base-tight': (
12
+ 12px,
13
+ ),
11
14
  'spacing-base': (
12
15
  16px,
13
16
  ),
@@ -22,6 +22,13 @@
22
22
  "value": "8px",
23
23
  "originalValue": "8px"
24
24
  },
25
+ "spacing-base-tight": {
26
+ "type": "number",
27
+ "category": "spacing",
28
+ "name": "spacing-base-tight",
29
+ "value": "12px",
30
+ "originalValue": "12px"
31
+ },
25
32
  "spacing-base": {
26
33
  "type": "number",
27
34
  "category": "spacing",
data/dist/spacing.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  $spacing-none: 0;
2
2
  $spacing-extra-tight: 4px;
3
3
  $spacing-tight: 8px;
4
+ $spacing-base-tight: 12px;
4
5
  $spacing-base: 16px;
5
6
  $spacing-loose: 20px;
6
7
  $spacing-extra-loose: 32px;
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@shopify/polaris-tokens",
3
- "version": "2.1.1",
3
+ "version": "2.2.0",
4
4
  "description": "Design Tokens for the Polaris Design System",
5
5
  "main": "index.js",
6
6
  "types": "dist/index.d.ts",
@@ -54,7 +54,7 @@
54
54
  },
55
55
  "homepage": "https://github.com/Shopify/polaris-tokens#readme",
56
56
  "devDependencies": {
57
- "@shopify/sewing-kit": "^0.65.0",
57
+ "@shopify/sewing-kit": "^0.69.0",
58
58
  "ase-util": "^1.0.1",
59
59
  "ase-utils": "^0.1.1",
60
60
  "browser-sync": "^2.26.3",
@@ -71,15 +71,15 @@
71
71
  "gulp-theo": "^2.0.0",
72
72
  "http-server": "^0.11.1",
73
73
  "immutable": "^3.8.2",
74
- "js-yaml": "^3.12.0",
74
+ "js-yaml": "^3.12.1",
75
75
  "lodash": "^4.17.11",
76
76
  "node-fetch": "^2.3.0",
77
- "nodemon": "^1.18.7",
77
+ "nodemon": "^1.18.9",
78
78
  "npm-run-all": "^4.1.5",
79
- "renamer": "^1.1.0",
80
- "rimraf": "^2.6.2",
79
+ "renamer": "^1.1.1",
80
+ "rimraf": "^2.6.3",
81
81
  "run-sequence": "^2.2.1",
82
- "theo": "8.0.1",
82
+ "theo": "8.1.1",
83
83
  "tinycolor2": "^1.4.1",
84
84
  "xml": "^1.0.1"
85
85
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: polaris_tokens
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.1.1
4
+ version: 2.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Shopify
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2019-01-04 00:00:00.000000000 Z
11
+ date: 2019-02-19 00:00:00.000000000 Z
12
12
  dependencies: []
13
13
  description: Design Tokens for the Polaris Design System
14
14
  email: