@sage/design-tokens 2.1.0 → 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.
Files changed (47) hide show
  1. package/android/no-theme.xml +1 -1
  2. package/css/no-theme.css +1 -1
  3. package/data/tokens.json +0 -2864
  4. package/docs/tokens/index.html +68 -8329
  5. package/docs/tokens/no-theme/border-radius/index.html +0 -79
  6. package/docs/tokens/no-theme/border-width/index.html +0 -79
  7. package/docs/tokens/no-theme/box-shadow/index.html +0 -79
  8. package/docs/tokens/no-theme/colors/index.html +0 -79
  9. package/docs/tokens/no-theme/font-families/index.html +0 -79
  10. package/docs/tokens/no-theme/font-sizes/index.html +0 -79
  11. package/docs/tokens/no-theme/font-weights/index.html +0 -79
  12. package/docs/tokens/no-theme/index.html +0 -79
  13. package/docs/tokens/no-theme/line-heights/index.html +0 -79
  14. package/docs/tokens/no-theme/sizing/index.html +0 -79
  15. package/docs/tokens/no-theme/spacing/index.html +0 -79
  16. package/docs/tokens/no-theme/typography/index.html +0 -79
  17. package/index.d.ts +0 -2
  18. package/index.js +0 -2
  19. package/ios/no-theme.h +1 -1
  20. package/js/no-theme/common.js +1 -1
  21. package/package.json +1 -1
  22. package/sage-design-tokens-2.2.0.tgz +0 -0
  23. package/scss/no-theme.scss +1 -1
  24. package/android/base.xml +0 -385
  25. package/css/base.css +0 -387
  26. package/docs/tokens/base/border-radius/index.html +0 -399
  27. package/docs/tokens/base/border-width/index.html +0 -483
  28. package/docs/tokens/base/box-shadow/index.html +0 -525
  29. package/docs/tokens/base/colors/index.html +0 -4137
  30. package/docs/tokens/base/font-families/index.html +0 -462
  31. package/docs/tokens/base/font-sizes/index.html +0 -664
  32. package/docs/tokens/base/font-weights/index.html +0 -441
  33. package/docs/tokens/base/index.html +0 -8427
  34. package/docs/tokens/base/line-heights/index.html +0 -441
  35. package/docs/tokens/base/opacity/index.html +0 -441
  36. package/docs/tokens/base/sizing/index.html +0 -903
  37. package/docs/tokens/base/spacing/index.html +0 -735
  38. package/docs/tokens/base/typography/index.html +0 -2772
  39. package/docs/tokens/figma-only/index.html +0 -394
  40. package/docs/tokens/figma-only/sizing/index.html +0 -399
  41. package/ios/base.h +0 -389
  42. package/js/base/common.d.ts +0 -376
  43. package/js/base/common.js +0 -387
  44. package/js/base/es6.d.ts +0 -379
  45. package/js/base/es6.js +0 -382
  46. package/sage-design-tokens-2.1.0.tgz +0 -0
  47. package/scss/base.scss +0 -384
package/docs/tokens/base/box-shadow/index.html DELETED
@@ -1,525 +0,0 @@
1
- <!doctype html>
2
- <html class="no-js" lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
6
- <meta http-equiv="Pragma" content="no-cache" />
7
- <meta http-equiv="Expires" content="0" />
8
-
9
- <title>Sage Design Tokens / base / boxShadow</title>
10
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
11
- <link rel="preconnect" href="https://fonts.googleapis.com">
12
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
13
- <link href="https://fonts.googleapis.com/css?family=Lato:400,500,600" rel="stylesheet">
14
- <meta name="description" content="">
15
- <style>
16
- *, *::before, *::after {
17
- box-sizing: border-box;
18
- }
19
-
20
- html {
21
- font-size: 62.5%;
22
- }
23
-
24
- body {
25
- font-size: 1.4rem;
26
- font-family: 'Lato', Arial, sans-serif;
27
- padding: 20px 40px;
28
- }
29
-
30
- table {
31
- width: 100%;
32
- }
33
-
34
- .menu {
35
- position: sticky;
36
- display: inline-block;
37
- vertical-align: top;
38
- max-height: 100vh;
39
- overflow-y: auto;
40
- top: 0;
41
- bottom: 0;
42
- font-size: 14px;
43
- }
44
-
45
- .with-icons:hover .permalink {
46
- visibility: visible;
47
- }
48
-
49
- .permalink {
50
- visibility: hidden;
51
- font-size: 80%;
52
- line-height: inherit;
53
- text-decoration: none;
54
- vertical-align: middle;
55
- }
56
-
57
- .table__color-preview,
58
- .table__spacing-preview,
59
- .table__border-width-preview,
60
- .table__font-size-preview,
61
- .table__sizing-preview,
62
- .table__opacity-preview,
63
- .table__typography-preview,
64
- .table__font-weight-preview,
65
- .table__box-shadow-preview,
66
- .table__font-family-preview,
67
- .table__border-radius-preview {
68
- height: 40px;
69
- width: 100%;
70
- }
71
-
72
- .table__font-size-preview,
73
- .table__typography-preview,
74
- .table__font-weight-preview,
75
- .table__font-family-preview {
76
- vertical-align: middle;
77
- display: table-cell;
78
- }
79
-
80
- .table__box-shadow-preview {
81
- height: 50px;
82
- }
83
-
84
- .table__spacing-preview {
85
- background-color: #626566;
86
- height: 10px;
87
- }
88
-
89
- .table__border-width-preview {
90
- border-style: solid;
91
- border-color: #CCD6DB;
92
- background-color: #626566;
93
- }
94
-
95
- .table__sizing-preview {
96
- background-color: #626566;
97
- }
98
-
99
- .table__opacity-preview {
100
- background-color: #ccc;
101
- }
102
-
103
- .table__opacity-preview div {
104
- width: 100%;
105
- height: 100%;
106
- background-color: #fff;
107
- }
108
-
109
- .table__border-radius-preview {
110
- width: 40px;
111
- border-color: #626566;
112
- border-width: 3px 3px 0 0;
113
- border-style: solid;
114
- }
115
-
116
- #main-container {
117
- max-width: 1024px;
118
- margin: 0 auto;
119
- }
120
-
121
- .embedded #main-container {
122
- max-width: 100%;
123
- }
124
-
125
- #icons-container {
126
- display: grid;
127
- grid-template-columns: repeat(6, 1fr);
128
- grid-gap: 20px;
129
- }
130
-
131
- .divider {
132
- margin: 20px 0 30px;
133
- }
134
-
135
- .grid-item {
136
- display: block;
137
- text-align: center;
138
- position: relative;
139
- padding-bottom: 40px;
140
- padding-top: 20px;
141
- border: 1px solid #dbdbdb;
142
- }
143
-
144
- .grid-item .codes {
145
- position: absolute;
146
- display: flex;
147
- justify-content: space-between;
148
- padding: 5px 20px;
149
- bottom: 0;
150
- left: 0;
151
- right: 0;
152
- border-top: 1px solid rgba(10, 10, 10, .1);
153
- }
154
-
155
- .grid-item .codes div {
156
- cursor: default;
157
- color: rgba(10, 10, 10, .6);
158
- }
159
-
160
- .preview {
161
- display: block;
162
- width: 32px;
163
- height: auto;
164
- }
165
-
166
- .layout {
167
- display: flex;
168
- }
169
-
170
- .layout .navigation {
171
- flex: 0 0 200px;
172
- }
173
-
174
- .layout .content {
175
- flex: 1 1 auto;
176
- }
177
-
178
- .embedded {
179
- padding: 10px;
180
- }
181
-
182
- .embedded .hide-on-embedded {
183
- display: none;
184
- }
185
- </style>
186
- </head>
187
- <body>
188
- <div id="main-container">
189
- <div class="layout">
190
- <aside class="hide-on-embedded navigation menu py-0">
191
- <section class="my-6">
192
- <p class="menu-label">
193
- <a href="../../base/index.html">
194
- base
195
- </a>
196
- </p>
197
- <ul class="menu-list">
198
- <li>
199
- <a href="../../base/colors/index.html">
200
- colors
201
- </a>
202
- </li>
203
- <li>
204
- <a href="../../base/sizing/index.html">
205
- sizing
206
- </a>
207
- </li>
208
- <li>
209
- <a href="../../base/spacing/index.html">
210
- spacing
211
- </a>
212
- </li>
213
- <li>
214
- <a href="../../base/border-width/index.html">
215
- borderWidth
216
- </a>
217
- </li>
218
- <li>
219
- <a href="../../base/font-sizes/index.html">
220
- fontSizes
221
- </a>
222
- </li>
223
- <li>
224
- <a href="../../base/box-shadow/index.html">
225
- boxShadow
226
- </a>
227
- </li>
228
- <li>
229
- <a href="../../base/font-weights/index.html">
230
- fontWeights
231
- </a>
232
- </li>
233
- <li>
234
- <a href="../../base/line-heights/index.html">
235
- lineHeights
236
- </a>
237
- </li>
238
- <li>
239
- <a href="../../base/font-families/index.html">
240
- fontFamilies
241
- </a>
242
- </li>
243
- <li>
244
- <a href="../../base/border-radius/index.html">
245
- borderRadius
246
- </a>
247
- </li>
248
- <li>
249
- <a href="../../base/typography/index.html">
250
- typography
251
- </a>
252
- </li>
253
- <li>
254
- <a href="../../base/opacity/index.html">
255
- opacity
256
- </a>
257
- </li>
258
- </ul>
259
- <p class="menu-label">
260
- <a href="../../no-theme/index.html">
261
- no-theme
262
- </a>
263
- </p>
264
- <ul class="menu-list">
265
- <li>
266
- <a href="../../no-theme/colors/index.html">
267
- colors
268
- </a>
269
- </li>
270
- <li>
271
- <a href="../../no-theme/sizing/index.html">
272
- sizing
273
- </a>
274
- </li>
275
- <li>
276
- <a href="../../no-theme/spacing/index.html">
277
- spacing
278
- </a>
279
- </li>
280
- <li>
281
- <a href="../../no-theme/border-width/index.html">
282
- borderWidth
283
- </a>
284
- </li>
285
- <li>
286
- <a href="../../no-theme/font-sizes/index.html">
287
- fontSizes
288
- </a>
289
- </li>
290
- <li>
291
- <a href="../../no-theme/box-shadow/index.html">
292
- boxShadow
293
- </a>
294
- </li>
295
- <li>
296
- <a href="../../no-theme/font-weights/index.html">
297
- fontWeights
298
- </a>
299
- </li>
300
- <li>
301
- <a href="../../no-theme/line-heights/index.html">
302
- lineHeights
303
- </a>
304
- </li>
305
- <li>
306
- <a href="../../no-theme/font-families/index.html">
307
- fontFamilies
308
- </a>
309
- </li>
310
- <li>
311
- <a href="../../no-theme/border-radius/index.html">
312
- borderRadius
313
- </a>
314
- </li>
315
- <li>
316
- <a href="../../no-theme/typography/index.html">
317
- typography
318
- </a>
319
- </li>
320
- </ul>
321
- <p class="menu-label">
322
- <a href="../../figma-only/index.html">
323
- figma-only
324
- </a>
325
- </p>
326
- <ul class="menu-list">
327
- <li>
328
- <a href="../../figma-only/sizing/index.html">
329
- sizing
330
- </a>
331
- </li>
332
- </ul>
333
- </section>
334
- </aside>
335
- <main class="content">
336
- <h1 class="hide-on-embedded">
337
- <a href="../../index.html">
338
- Sage Design Tokens
339
- </a>
340
- /
341
- <a href="../index.html">
342
- base
343
- </a>
344
- /
345
- boxShadow
346
- </h1>
347
-
348
- <section class="my-6">
349
- <table class="table is-bordered is-hoverable is-fullwidth">
350
- <colgroup>
351
- <col width="50%">
352
- <col width="25%">
353
- <col width="35%">
354
- </colgroup>
355
- <thead>
356
- <tr>
357
- <th class="has-background-light">Name</th>
358
- <th class="has-background-light">Value</th>
359
- <th class="has-background-light">Preview</th>
360
- </tr>
361
- </thead>
362
- <tr>
363
- <td class="with-icons is-vcentered"
364
- id="base-boxShadow100"
365
- title="theme: base; category: boxShadow; variant: 100; ">
366
- boxShadow100
367
- <a href="#base-boxShadow100"
368
- title="permalink"
369
- class="permalink">
370
- 🔗
371
- </a>
372
- </td>
373
- <td class="is-vcentered">
374
- <pre>0 5px 5px 0 #00141e33, 0 10px 10px 0 #00141e1a</pre>
375
- </td>
376
- <td class="is-vcentered">
377
- <div class="table__box-shadow-preview"
378
- style="box-shadow: 0 5px 5px 0 #00141e33, 0 10px 10px 0 #00141e1a">
379
- </div>
380
-
381
- </td>
382
- </tr>
383
- <tr>
384
- <td class="with-icons is-vcentered"
385
- id="base-boxShadow150"
386
- title="theme: base; category: boxShadow; variant: 150; ">
387
- boxShadow150
388
- <a href="#base-boxShadow150"
389
- title="permalink"
390
- class="permalink">
391
- 🔗
392
- </a>
393
- </td>
394
- <td class="is-vcentered">
395
- <pre>0 -4px 12px 0 #00141e0d</pre>
396
- </td>
397
- <td class="is-vcentered">
398
- <div class="table__box-shadow-preview"
399
- style="box-shadow: 0 -4px 12px 0 #00141e0d">
400
- </div>
401
-
402
- </td>
403
- </tr>
404
- <tr>
405
- <td class="with-icons is-vcentered"
406
- id="base-boxShadow200"
407
- title="theme: base; category: boxShadow; variant: 200; ">
408
- boxShadow200
409
- <a href="#base-boxShadow200"
410
- title="permalink"
411
- class="permalink">
412
- 🔗
413
- </a>
414
- </td>
415
- <td class="is-vcentered">
416
- <pre>0 10px 20px 0 #00141e33, 0 20px 40px 0 #00141e1a</pre>
417
- </td>
418
- <td class="is-vcentered">
419
- <div class="table__box-shadow-preview"
420
- style="box-shadow: 0 10px 20px 0 #00141e33, 0 20px 40px 0 #00141e1a">
421
- </div>
422
-
423
- </td>
424
- </tr>
425
- <tr>
426
- <td class="with-icons is-vcentered"
427
- id="base-boxShadow300"
428
- title="theme: base; category: boxShadow; variant: 300; ">
429
- boxShadow300
430
- <a href="#base-boxShadow300"
431
- title="permalink"
432
- class="permalink">
433
- 🔗
434
- </a>
435
- </td>
436
- <td class="is-vcentered">
437
- <pre>0 10px 30px 0 #00141e1a, 0 30px 60px 0 #00141e1a</pre>
438
- </td>
439
- <td class="is-vcentered">
440
- <div class="table__box-shadow-preview"
441
- style="box-shadow: 0 10px 30px 0 #00141e1a, 0 30px 60px 0 #00141e1a">
442
- </div>
443
-
444
- </td>
445
- </tr>
446
- <tr>
447
- <td class="with-icons is-vcentered"
448
- id="base-boxShadow400"
449
- title="theme: base; category: boxShadow; variant: 400; ">
450
- boxShadow400
451
- <a href="#base-boxShadow400"
452
- title="permalink"
453
- class="permalink">
454
- 🔗
455
- </a>
456
- </td>
457
- <td class="is-vcentered">
458
- <pre>0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a</pre>
459
- </td>
460
- <td class="is-vcentered">
461
- <div class="table__box-shadow-preview"
462
- style="box-shadow: 0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a">
463
- </div>
464
-
465
- </td>
466
- </tr>
467
- <tr>
468
- <td class="with-icons is-vcentered"
469
- id="base-boxShadow075"
470
- title="theme: base; category: boxShadow; variant: 075; ">
471
- boxShadow075
472
- <a href="#base-boxShadow075"
473
- title="permalink"
474
- class="permalink">
475
- 🔗
476
- </a>
477
- </td>
478
- <td class="is-vcentered">
479
- <pre>inset 0 6px 4px -4px #00141e0d</pre>
480
- </td>
481
- <td class="is-vcentered">
482
- <div class="table__box-shadow-preview"
483
- style="box-shadow: inset 0 6px 4px -4px #00141e0d">
484
- </div>
485
-
486
- </td>
487
- </tr>
488
- <tr>
489
- <td class="with-icons is-vcentered"
490
- id="base-boxShadow050"
491
- title="theme: base; category: boxShadow; variant: 050; ">
492
- boxShadow050
493
- <a href="#base-boxShadow050"
494
- title="permalink"
495
- class="permalink">
496
- 🔗
497
- </a>
498
- </td>
499
- <td class="is-vcentered">
500
- <pre>0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26</pre>
501
- </td>
502
- <td class="is-vcentered">
503
- <div class="table__box-shadow-preview"
504
- style="box-shadow: 0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26">
505
- </div>
506
-
507
- </td>
508
- </tr>
509
- </table>
510
- </section>
511
- </main>
512
- </div>
513
-
514
-
515
- </div>
516
-
517
- <script>
518
- const searchParams = new URLSearchParams(window.location.search);
519
- const embedded = !!searchParams.get('embedded');
520
- if(embedded) {
521
- document.body.classList.add('embedded')
522
- }
523
- </script>
524
- </body>
525
- </html>