polaris_tokens 1.1.0.pre.beta.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA256:
3
+ metadata.gz: 9be9cf066ab2f634c8a72295dff33da99573621bd3f867488b8b9a1acea768ce
4
+ data.tar.gz: 25eec726d29d6b032ff045da0cea4f9a906a1074bae143fdcc89dc3ddea49009
5
+ SHA512:
6
+ metadata.gz: b9ec5149da8283d4e811c689be460993de8547cb88b0abb87f0279bc222b2783cba7e44961ab13c076e4f533e5e34072753bbc75605d03d2e109377166a52ce0
7
+ data.tar.gz: 02637f8eba84185c4db7766b602c95204f77535d5d31653dc954f87602f74f7d13faedcef75a370c53da7752b17199f5a9d3ac89cba9057679b848ee2be7be39
@@ -0,0 +1,19 @@
1
+ Copyright (c) 2017 Shopify
2
+
3
+ Permission is hereby granted, free of charge, to any person obtaining a copy
4
+ of this software and associated documentation files (the "Software"), to deal
5
+ in the Software without restriction, including without limitation the rights
6
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7
+ copies of the Software, and to permit persons to whom the Software is
8
+ furnished to do so, subject to the following conditions:
9
+
10
+ The above copyright notice and this permission notice shall be included in all
11
+ copies or substantial portions of the Software.
12
+
13
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19
+ SOFTWARE.
@@ -0,0 +1,121 @@
1
+ <h1 align="center">Polaris design tokens</h1>
2
+
3
+ <h3 align="center">Colors, spacing, typography for all platforms</h3>
4
+
5
+ <p align="center"><em>JavaScript · JSON · CSS · SCSS · Sketch · macOS · Adobe Swatch</em></p>
6
+
7
+ <div align="center" markdown="1">
8
+
9
+ [![CircleCI](https://circleci.com/gh/Shopify/polaris-tokens.svg?style=shield)](https://circleci.com/gh/Shopify/polaris-tokens) [![npm version](https://img.shields.io/npm/v/@shopify/polaris-tokens.svg)](https://www.npmjs.com/package/@shopify/polaris-tokens) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
10
+
11
+ </div>
12
+
13
+ ---
14
+
15
+ [Design tokens](https://medium.com/eightshapes-llc/tokens-in-design-systems-25dd82d58421) for [Polaris](https://polaris.shopify.com), Shopify’s design system.
16
+
17
+ Design tokens originated at Salesforce, and the best way to describe them is to simply quote their documentation:
18
+
19
+ > Design tokens are the visual design atoms of the design system — specifically, they are named entities that store visual design attributes. We use them in place of hard-coded values (such as hex values for color or pixel values for spacing) in order to maintain a scalable and consistent visual system for UI development – [Salesforce UX](https://www.lightningdesignsystem.com/design-tokens/)
20
+
21
+ ## Installation
22
+
23
+ Polaris design tokens are available on [npm](https://www.npmjs.com/) as the `@shopify/polaris-tokens` package.
24
+
25
+ The recommended way to use and install design tokens may vary depending on your project, the most common are documented below.
26
+
27
+ Using [npm](https://www.npmjs.com/):
28
+
29
+ ```
30
+ npm install @shopify/polaris-tokens --save
31
+ ```
32
+
33
+ Using [yarn](https://yarnpkg.com/en/):
34
+
35
+ ```
36
+ yarn add @shopify/polaris-tokens
37
+ ```
38
+
39
+ ## Usage
40
+
41
+ Find all available tokens in the [design tokens documentation](https://shopify.github.io/polaris-tokens/).
42
+
43
+ ### JavaScript
44
+
45
+ In JavaScript, design token names are formatted in [lower camelCase](http://wiki.c2.com/?CamelCase).
46
+
47
+ ```js
48
+ const tokens = require('@shopify/polaris-tokens');
49
+ console.log(tokens.colorBlueLighter); // rgb(235, 245, 250)
50
+ ```
51
+
52
+ In JSON, design token names are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).
53
+
54
+ ```js
55
+ const tokens = require('@shopify/polaris-tokens/dist/index.json');
56
+ console.log(tokens['color-blue-lighter']); // rgb(235, 245, 250)
57
+ ```
58
+
59
+ ### Sass
60
+
61
+ Sass variables and map keys are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).
62
+
63
+ ```scss
64
+ // Using variables
65
+ @import '~@shopify/polaris-tokens/dist/index';
66
+
67
+ a {
68
+ color: $color-blue-text;
69
+ }
70
+
71
+ // Using the map of all tokens
72
+ @import '~@shopify/polaris-tokens/dist/index.map';
73
+
74
+ a {
75
+ color: map-get($polaris-index-map, 'color-blue-text');
76
+ }
77
+
78
+ // Using the map for a specific type of tokens (here: spacing)
79
+ @import '~@shopify/polaris-tokens/dist/spacing.map';
80
+
81
+ a {
82
+ color: map-get($polaris-spacing-map, 'spacing-loose');
83
+ }
84
+ ```
85
+
86
+ ### Sass, with CSS Custom Properties
87
+
88
+ Custom properties are formatted in [kebab-case](http://wiki.c2.com/?KebabCase).
89
+
90
+ ```scss
91
+ // Omit .css at the end of the file
92
+ @import '~@shopify/polaris-tokens/dist/colors.custom-properties';
93
+
94
+ a {
95
+ color: var(--color-blue-text);
96
+ }
97
+ ```
98
+
99
+ ---
100
+
101
+ ## Contributing
102
+
103
+ The purpose of this repository is to see the core design elements of the Polaris design system
104
+ evolve and improve over time with the needs of developers, designers and partners in mind.
105
+
106
+ We gratefully accept impromptu contributions to the documentation, typo and bug fixes,
107
+ and expect design token requests and changes to be discussed before a pull request.
108
+
109
+ ### [Code of conduct](https://github.com/Shopify/polaris-tokens/blob/master/CODE_OF_CONDUCT.md)
110
+
111
+ We have a [code of conduct](https://github.com/Shopify/polaris-tokens/blob/master/CODE_OF_CONDUCT.md),
112
+ please follow it in all your interactions with the project.
113
+
114
+ ### [Contributing guide](https://github.com/Shopify/polaris-tokens/blob/master/CONTRIBUTING.md)
115
+
116
+ Read the [contributing guide](https://github.com/Shopify/polaris-tokens/blob/master/CONTRIBUTING.md)
117
+ to learn how to propose changes and understand our development process.
118
+
119
+ ### [License](https://github.com/Shopify/polaris-tokens/blob/master/LICENSE.md)
120
+
121
+ The polaris-tokens project is available under the [MIT license](https://github.com/Shopify/polaris-tokens/blob/master/LICENSE.md).
Binary file
Binary file
@@ -0,0 +1,368 @@
1
+ {
2
+ "compatibleVersion": "2.0",
3
+ "pluginVersion": "2.0",
4
+ "colors": [
5
+ {
6
+ "red": 0.5686274509803921,
7
+ "green": 0.6196078431372549,
8
+ "blue": 0.6705882352941176,
9
+ "alpha": 1
10
+ },
11
+ {
12
+ "red": 0.38823529411764707,
13
+ "green": 0.45098039215686275,
14
+ "blue": 0.5058823529411764,
15
+ "alpha": 1
16
+ },
17
+ {
18
+ "red": 0.27058823529411763,
19
+ "green": 0.30980392156862746,
20
+ "blue": 0.3568627450980392,
21
+ "alpha": 1
22
+ },
23
+ {
24
+ "red": 0.12941176470588237,
25
+ "green": 0.16862745098039217,
26
+ "blue": 0.21176470588235294,
27
+ "alpha": 1
28
+ },
29
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
30
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
31
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
32
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
33
+ {
34
+ "red": 0.9764705882352941,
35
+ "green": 0.9803921568627451,
36
+ "blue": 0.984313725490196,
37
+ "alpha": 1
38
+ },
39
+ {
40
+ "red": 0.9568627450980393,
41
+ "green": 0.9647058823529412,
42
+ "blue": 0.9725490196078431,
43
+ "alpha": 1
44
+ },
45
+ {
46
+ "red": 0.8745098039215686,
47
+ "green": 0.8901960784313725,
48
+ "blue": 0.9098039215686274,
49
+ "alpha": 1
50
+ },
51
+ {
52
+ "red": 0.7686274509803922,
53
+ "green": 0.803921568627451,
54
+ "blue": 0.8352941176470589,
55
+ "alpha": 1
56
+ },
57
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
58
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
59
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
60
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
61
+ {
62
+ "red": 0.984313725490196,
63
+ "green": 0.9176470588235294,
64
+ "blue": 0.8980392156862745,
65
+ "alpha": 1
66
+ },
67
+ {
68
+ "red": 0.996078431372549,
69
+ "green": 0.6784313725490196,
70
+ "blue": 0.6039215686274509,
71
+ "alpha": 1
72
+ },
73
+ {
74
+ "red": 0.8705882352941177,
75
+ "green": 0.21176470588235294,
76
+ "blue": 0.09411764705882353,
77
+ "alpha": 1
78
+ },
79
+ {
80
+ "red": 0.7490196078431373,
81
+ "green": 0.027450980392156862,
82
+ "blue": 0.06666666666666667,
83
+ "alpha": 1
84
+ },
85
+ {
86
+ "red": 0.2,
87
+ "green": 0.00392156862745098,
88
+ "blue": 0.00392156862745098,
89
+ "alpha": 1
90
+ },
91
+ {
92
+ "red": 0.34509803921568627,
93
+ "green": 0.23529411764705882,
94
+ "blue": 0.20784313725490197,
95
+ "alpha": 1
96
+ },
97
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
98
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
99
+ {
100
+ "red": 0.9882352941176471,
101
+ "green": 0.9215686274509803,
102
+ "blue": 0.8588235294117647,
103
+ "alpha": 1
104
+ },
105
+ {
106
+ "red": 1,
107
+ "green": 0.7725490196078432,
108
+ "blue": 0.5450980392156862,
109
+ "alpha": 1
110
+ },
111
+ {
112
+ "red": 0.9568627450980393,
113
+ "green": 0.5764705882352941,
114
+ "blue": 0.25882352941176473,
115
+ "alpha": 1
116
+ },
117
+ {
118
+ "red": 0.7529411764705882,
119
+ "green": 0.3411764705882353,
120
+ "blue": 0.09019607843137255,
121
+ "alpha": 1
122
+ },
123
+ {
124
+ "red": 0.2901960784313726,
125
+ "green": 0.08235294117647059,
126
+ "blue": 0.01568627450980392,
127
+ "alpha": 1
128
+ },
129
+ {
130
+ "red": 0.34901960784313724,
131
+ "green": 0.26666666666666666,
132
+ "blue": 0.18823529411764706,
133
+ "alpha": 1
134
+ },
135
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
136
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
137
+ {
138
+ "red": 0.9882352941176471,
139
+ "green": 0.9450980392156862,
140
+ "blue": 0.803921568627451,
141
+ "alpha": 1
142
+ },
143
+ {
144
+ "red": 1,
145
+ "green": 0.9176470588235294,
146
+ "blue": 0.5411764705882353,
147
+ "alpha": 1
148
+ },
149
+ {
150
+ "red": 0.9333333333333333,
151
+ "green": 0.7607843137254902,
152
+ "blue": 0,
153
+ "alpha": 1
154
+ },
155
+ {
156
+ "red": 0.611764705882353,
157
+ "green": 0.43529411764705883,
158
+ "blue": 0.09803921568627451,
159
+ "alpha": 1
160
+ },
161
+ {
162
+ "red": 0.3411764705882353,
163
+ "green": 0.23137254901960785,
164
+ "blue": 0,
165
+ "alpha": 1
166
+ },
167
+ {
168
+ "red": 0.34901960784313724,
169
+ "green": 0.3176470588235294,
170
+ "blue": 0.18823529411764706,
171
+ "alpha": 1
172
+ },
173
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
174
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
175
+ {
176
+ "red": 0.8901960784313725,
177
+ "green": 0.9450980392156862,
178
+ "blue": 0.8745098039215686,
179
+ "alpha": 1
180
+ },
181
+ {
182
+ "red": 0.7333333333333333,
183
+ "green": 0.8980392156862745,
184
+ "blue": 0.7019607843137254,
185
+ "alpha": 1
186
+ },
187
+ {
188
+ "red": 0.3137254901960784,
189
+ "green": 0.7215686274509804,
190
+ "blue": 0.23529411764705882,
191
+ "alpha": 1
192
+ },
193
+ {
194
+ "red": 0.06274509803921569,
195
+ "green": 0.5019607843137255,
196
+ "blue": 0.2627450980392157,
197
+ "alpha": 1
198
+ },
199
+ {
200
+ "red": 0.09019607843137255,
201
+ "green": 0.21176470588235294,
202
+ "blue": 0.18823529411764706,
203
+ "alpha": 1
204
+ },
205
+ {
206
+ "red": 0.2549019607843137,
207
+ "green": 0.30980392156862746,
208
+ "blue": 0.24313725490196078,
209
+ "alpha": 1
210
+ },
211
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
212
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
213
+ {
214
+ "red": 0.8784313725490196,
215
+ "green": 0.9607843137254902,
216
+ "blue": 0.9607843137254902,
217
+ "alpha": 1
218
+ },
219
+ {
220
+ "red": 0.7176470588235294,
221
+ "green": 0.9254901960784314,
222
+ "blue": 0.9254901960784314,
223
+ "alpha": 1
224
+ },
225
+ {
226
+ "red": 0.2784313725490196,
227
+ "green": 0.7568627450980392,
228
+ "blue": 0.7490196078431373,
229
+ "alpha": 1
230
+ },
231
+ {
232
+ "red": 0,
233
+ "green": 0.5176470588235295,
234
+ "blue": 0.5568627450980392,
235
+ "alpha": 1
236
+ },
237
+ {
238
+ "red": 0,
239
+ "green": 0.19215686274509805,
240
+ "blue": 0.20784313725490197,
241
+ "alpha": 1
242
+ },
243
+ {
244
+ "red": 0.25098039215686274,
245
+ "green": 0.3254901960784314,
246
+ "blue": 0.3215686274509804,
247
+ "alpha": 1
248
+ },
249
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
250
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
251
+ {
252
+ "red": 0.9215686274509803,
253
+ "green": 0.9607843137254902,
254
+ "blue": 0.9803921568627451,
255
+ "alpha": 1
256
+ },
257
+ {
258
+ "red": 0.7058823529411765,
259
+ "green": 0.8823529411764706,
260
+ "blue": 0.9803921568627451,
261
+ "alpha": 1
262
+ },
263
+ {
264
+ "red": 0,
265
+ "green": 0.47843137254901963,
266
+ "blue": 0.807843137254902,
267
+ "alpha": 1
268
+ },
269
+ {
270
+ "red": 0.03137254901960784,
271
+ "green": 0.3058823529411765,
272
+ "blue": 0.5411764705882353,
273
+ "alpha": 1
274
+ },
275
+ {
276
+ "red": 0,
277
+ "green": 0.0784313725490196,
278
+ "blue": 0.1607843137254902,
279
+ "alpha": 1
280
+ },
281
+ {
282
+ "red": 0.24313725490196078,
283
+ "green": 0.3058823529411765,
284
+ "blue": 0.3411764705882353,
285
+ "alpha": 1
286
+ },
287
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
288
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
289
+ {
290
+ "red": 0.9568627450980393,
291
+ "green": 0.9607843137254902,
292
+ "blue": 0.9803921568627451,
293
+ "alpha": 1
294
+ },
295
+ {
296
+ "red": 0.7019607843137254,
297
+ "green": 0.7372549019607844,
298
+ "blue": 0.9607843137254902,
299
+ "alpha": 1
300
+ },
301
+ {
302
+ "red": 0.3607843137254902,
303
+ "green": 0.41568627450980394,
304
+ "blue": 0.7686274509803922,
305
+ "alpha": 1
306
+ },
307
+ {
308
+ "red": 0.12549019607843137,
309
+ "green": 0.1803921568627451,
310
+ "blue": 0.47058823529411764,
311
+ "alpha": 1
312
+ },
313
+ {
314
+ "red": 0,
315
+ "green": 0.023529411764705882,
316
+ "blue": 0.2235294117647059,
317
+ "alpha": 1
318
+ },
319
+ {
320
+ "red": 0.24313725490196078,
321
+ "green": 0.2549019607843137,
322
+ "blue": 0.3333333333333333,
323
+ "alpha": 1
324
+ },
325
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
326
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
327
+ {
328
+ "red": 0.9647058823529412,
329
+ "green": 0.9411764705882353,
330
+ "blue": 0.9921568627450981,
331
+ "alpha": 1
332
+ },
333
+ {
334
+ "red": 0.8901960784313725,
335
+ "green": 0.8156862745098039,
336
+ "blue": 1,
337
+ "alpha": 1
338
+ },
339
+ {
340
+ "red": 0.611764705882353,
341
+ "green": 0.41568627450980394,
342
+ "blue": 0.8705882352941177,
343
+ "alpha": 1
344
+ },
345
+ {
346
+ "red": 0.3137254901960784,
347
+ "green": 0.1411764705882353,
348
+ "blue": 0.5607843137254902,
349
+ "alpha": 1
350
+ },
351
+ {
352
+ "red": 0.13725490196078433,
353
+ "green": 0,
354
+ "blue": 0.3176470588235294,
355
+ "alpha": 1
356
+ },
357
+ {
358
+ "red": 0.3137254901960784,
359
+ "green": 0.28627450980392155,
360
+ "blue": 0.35294117647058826,
361
+ "alpha": 1
362
+ },
363
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1},
364
+ {"red": 1, "green": 1, "blue": 1, "alpha": 1}
365
+ ],
366
+ "gradients": [],
367
+ "images": []
368
+ }