polaris_tokens 2.1.1 → 2.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +32 -10
- data/dist/index.common.js +1 -0
- data/dist/index.custom-properties.css +1 -0
- data/dist/index.d.ts +1 -0
- data/dist/index.json +1 -0
- data/dist/index.map.scss +3 -0
- data/dist/index.raw.json +7 -0
- data/dist/index.scss +1 -0
- data/dist/spacing.common.js +1 -0
- data/dist/spacing.custom-properties.css +1 -0
- data/dist/spacing.json +1 -0
- data/dist/spacing.map.scss +3 -0
- data/dist/spacing.raw.json +7 -0
- data/dist/spacing.scss +1 -0
- data/package.json +7 -7
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 90ad5818eaa391e85804bf6ad8cbd55a7a03a71fc110ac27c292380b6cefc647
|
|
4
|
+
data.tar.gz: 3a31c0ebbd0476f7b7e503f395fc22ca5f6521fff4475247892d17c10fbe8794
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
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
|
|
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
|
|
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
|
|
|
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 (
|
|
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
|
|
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
|
|
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
|
|
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
|
|
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
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
data/dist/index.map.scss
CHANGED
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
data/dist/spacing.common.js
CHANGED
data/dist/spacing.json
CHANGED
data/dist/spacing.map.scss
CHANGED
data/dist/spacing.raw.json
CHANGED
|
@@ -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
data/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shopify/polaris-tokens",
|
|
3
|
-
"version": "2.
|
|
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.
|
|
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.
|
|
74
|
+
"js-yaml": "^3.12.1",
|
|
75
75
|
"lodash": "^4.17.11",
|
|
76
76
|
"node-fetch": "^2.3.0",
|
|
77
|
-
"nodemon": "^1.18.
|
|
77
|
+
"nodemon": "^1.18.9",
|
|
78
78
|
"npm-run-all": "^4.1.5",
|
|
79
|
-
"renamer": "^1.1.
|
|
80
|
-
"rimraf": "^2.6.
|
|
79
|
+
"renamer": "^1.1.1",
|
|
80
|
+
"rimraf": "^2.6.3",
|
|
81
81
|
"run-sequence": "^2.2.1",
|
|
82
|
-
"theo": "8.
|
|
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.
|
|
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-
|
|
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:
|