@sage/design-tokens 2.2.0 → 2.3.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 (38) hide show
  1. package/android/base.xml +385 -0
  2. package/assets/fonts/sageui.css +18 -18
  3. package/css/base.css +387 -0
  4. package/data/tokens.json +1450 -257
  5. package/docs/tokens/{no-theme → base}/border-radius/index.html +25 -20
  6. package/docs/tokens/{no-theme → base}/border-width/index.html +35 -30
  7. package/docs/tokens/base/box-shadow/index.html +451 -0
  8. package/docs/tokens/base/colors/index.html +4063 -0
  9. package/docs/tokens/{no-theme → base}/font-families/index.html +33 -28
  10. package/docs/tokens/{no-theme → base}/font-sizes/index.html +65 -60
  11. package/docs/tokens/{no-theme → base}/font-weights/index.html +29 -24
  12. package/docs/tokens/base/index.html +8353 -0
  13. package/docs/tokens/{no-theme → base}/line-heights/index.html +47 -21
  14. package/docs/tokens/{no-theme/box-shadow → base/opacity}/index.html +42 -58
  15. package/docs/tokens/{no-theme → base}/sizing/index.html +167 -78
  16. package/docs/tokens/{no-theme → base}/spacing/index.html +71 -66
  17. package/docs/tokens/base/typography/index.html +2698 -0
  18. package/docs/tokens/index.html +4318 -1771
  19. package/index.d.ts +2 -2
  20. package/index.js +2 -2
  21. package/ios/base.h +389 -0
  22. package/js/{no-theme → base}/common.d.ts +136 -16
  23. package/js/base/common.js +387 -0
  24. package/js/{no-theme → base}/es6.d.ts +136 -16
  25. package/js/base/es6.js +382 -0
  26. package/package.json +1 -1
  27. package/sage-design-tokens-2.3.0.tgz +0 -0
  28. package/scss/base.scss +384 -0
  29. package/android/no-theme.xml +0 -265
  30. package/css/no-theme.css +0 -267
  31. package/docs/tokens/no-theme/colors/index.html +0 -2903
  32. package/docs/tokens/no-theme/index.html +0 -5811
  33. package/docs/tokens/no-theme/typography/index.html +0 -1559
  34. package/ios/no-theme.h +0 -269
  35. package/js/no-theme/common.js +0 -267
  36. package/js/no-theme/es6.js +0 -262
  37. package/sage-design-tokens-2.2.0.tgz +0 -0
  38. package/scss/no-theme.scss +0 -264
package/docs/tokens/{no-theme → base}/sizing/index.html RENAMED
@@ -6,7 +6,7 @@
6
6
  <meta http-equiv="Pragma" content="no-cache" />
7
7
  <meta http-equiv="Expires" content="0" />
8
8
 
9
- <title>Sage Design Tokens / no-theme / sizing</title>
9
+ <title>Sage Design Tokens / base / sizing</title>
10
10
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
11
11
  <link rel="preconnect" href="https://fonts.googleapis.com">
12
12
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -190,66 +190,71 @@
190
190
  <aside class="hide-on-embedded navigation menu py-0">
191
191
  <section class="my-6">
192
192
  <p class="menu-label">
193
- <a href="../../no-theme/index.html">
194
- no-theme
193
+ <a href="../../base/index.html">
194
+ base
195
195
  </a>
196
196
  </p>
197
197
  <ul class="menu-list">
198
198
  <li>
199
- <a href="../../no-theme/colors/index.html">
199
+ <a href="../../base/colors/index.html">
200
200
  colors
201
201
  </a>
202
202
  </li>
203
203
  <li>
204
- <a href="../../no-theme/sizing/index.html">
204
+ <a href="../../base/sizing/index.html">
205
205
  sizing
206
206
  </a>
207
207
  </li>
208
208
  <li>
209
- <a href="../../no-theme/spacing/index.html">
209
+ <a href="../../base/spacing/index.html">
210
210
  spacing
211
211
  </a>
212
212
  </li>
213
213
  <li>
214
- <a href="../../no-theme/border-width/index.html">
214
+ <a href="../../base/border-width/index.html">
215
215
  borderWidth
216
216
  </a>
217
217
  </li>
218
218
  <li>
219
- <a href="../../no-theme/font-sizes/index.html">
219
+ <a href="../../base/font-sizes/index.html">
220
220
  fontSizes
221
221
  </a>
222
222
  </li>
223
223
  <li>
224
- <a href="../../no-theme/box-shadow/index.html">
224
+ <a href="../../base/box-shadow/index.html">
225
225
  boxShadow
226
226
  </a>
227
227
  </li>
228
228
  <li>
229
- <a href="../../no-theme/font-weights/index.html">
229
+ <a href="../../base/font-weights/index.html">
230
230
  fontWeights
231
231
  </a>
232
232
  </li>
233
233
  <li>
234
- <a href="../../no-theme/line-heights/index.html">
234
+ <a href="../../base/line-heights/index.html">
235
235
  lineHeights
236
236
  </a>
237
237
  </li>
238
238
  <li>
239
- <a href="../../no-theme/font-families/index.html">
239
+ <a href="../../base/font-families/index.html">
240
240
  fontFamilies
241
241
  </a>
242
242
  </li>
243
243
  <li>
244
- <a href="../../no-theme/border-radius/index.html">
244
+ <a href="../../base/border-radius/index.html">
245
245
  borderRadius
246
246
  </a>
247
247
  </li>
248
248
  <li>
249
- <a href="../../no-theme/typography/index.html">
249
+ <a href="../../base/typography/index.html">
250
250
  typography
251
251
  </a>
252
252
  </li>
253
+ <li>
254
+ <a href="../../base/opacity/index.html">
255
+ opacity
256
+ </a>
257
+ </li>
253
258
  </ul>
254
259
  </section>
255
260
  </aside>
@@ -260,7 +265,7 @@
260
265
  </a>
261
266
  /
262
267
  <a href="../index.html">
263
- no-theme
268
+ base
264
269
  </a>
265
270
  /
266
271
  sizing
@@ -282,10 +287,10 @@
282
287
  </thead>
283
288
  <tr>
284
289
  <td class="with-icons is-vcentered"
285
- id="no-theme-sizing100"
286
- title="theme: no-theme; category: sizing; variant: 100; ">
290
+ id="base-sizing100"
291
+ title="theme: base; category: sizing; variant: 100; ">
287
292
  sizing100
288
- <a href="#no-theme-sizing100"
293
+ <a href="#base-sizing100"
289
294
  title="permalink"
290
295
  class="permalink">
291
296
  🔗
@@ -303,10 +308,10 @@
303
308
  </tr>
304
309
  <tr>
305
310
  <td class="with-icons is-vcentered"
306
- id="no-theme-sizing125"
307
- title="theme: no-theme; category: sizing; variant: 125; ">
311
+ id="base-sizing125"
312
+ title="theme: base; category: sizing; variant: 125; ">
308
313
  sizing125
309
- <a href="#no-theme-sizing125"
314
+ <a href="#base-sizing125"
310
315
  title="permalink"
311
316
  class="permalink">
312
317
  🔗
@@ -324,10 +329,10 @@
324
329
  </tr>
325
330
  <tr>
326
331
  <td class="with-icons is-vcentered"
327
- id="no-theme-sizing150"
328
- title="theme: no-theme; category: sizing; variant: 150; ">
332
+ id="base-sizing150"
333
+ title="theme: base; category: sizing; variant: 150; ">
329
334
  sizing150
330
- <a href="#no-theme-sizing150"
335
+ <a href="#base-sizing150"
331
336
  title="permalink"
332
337
  class="permalink">
333
338
  🔗
@@ -345,10 +350,10 @@
345
350
  </tr>
346
351
  <tr>
347
352
  <td class="with-icons is-vcentered"
348
- id="no-theme-sizing175"
349
- title="theme: no-theme; category: sizing; variant: 175; ">
353
+ id="base-sizing175"
354
+ title="theme: base; category: sizing; variant: 175; ">
350
355
  sizing175
351
- <a href="#no-theme-sizing175"
356
+ <a href="#base-sizing175"
352
357
  title="permalink"
353
358
  class="permalink">
354
359
  🔗
@@ -366,10 +371,10 @@
366
371
  </tr>
367
372
  <tr>
368
373
  <td class="with-icons is-vcentered"
369
- id="no-theme-sizing200"
370
- title="theme: no-theme; category: sizing; variant: 200; ">
374
+ id="base-sizing200"
375
+ title="theme: base; category: sizing; variant: 200; ">
371
376
  sizing200
372
- <a href="#no-theme-sizing200"
377
+ <a href="#base-sizing200"
373
378
  title="permalink"
374
379
  class="permalink">
375
380
  🔗
@@ -387,10 +392,10 @@
387
392
  </tr>
388
393
  <tr>
389
394
  <td class="with-icons is-vcentered"
390
- id="no-theme-sizing250"
391
- title="theme: no-theme; category: sizing; variant: 250; ">
395
+ id="base-sizing250"
396
+ title="theme: base; category: sizing; variant: 250; ">
392
397
  sizing250
393
- <a href="#no-theme-sizing250"
398
+ <a href="#base-sizing250"
394
399
  title="permalink"
395
400
  class="permalink">
396
401
  🔗
@@ -408,10 +413,31 @@
408
413
  </tr>
409
414
  <tr>
410
415
  <td class="with-icons is-vcentered"
411
- id="no-theme-sizing300"
412
- title="theme: no-theme; category: sizing; variant: 300; ">
416
+ id="base-sizing275"
417
+ title="theme: base; category: sizing; variant: 275; ">
418
+ sizing275
419
+ <a href="#base-sizing275"
420
+ title="permalink"
421
+ class="permalink">
422
+ 🔗
423
+ </a>
424
+ </td>
425
+ <td class="is-vcentered">
426
+ <pre>22px</pre>
427
+ </td>
428
+ <td class="is-vcentered">
429
+ <div class="table__sizing-preview"
430
+ style="width: 22px; height: 22px">
431
+ </div>
432
+
433
+ </td>
434
+ </tr>
435
+ <tr>
436
+ <td class="with-icons is-vcentered"
437
+ id="base-sizing300"
438
+ title="theme: base; category: sizing; variant: 300; ">
413
439
  sizing300
414
- <a href="#no-theme-sizing300"
440
+ <a href="#base-sizing300"
415
441
  title="permalink"
416
442
  class="permalink">
417
443
  🔗
@@ -429,10 +455,10 @@
429
455
  </tr>
430
456
  <tr>
431
457
  <td class="with-icons is-vcentered"
432
- id="no-theme-sizing350"
433
- title="theme: no-theme; category: sizing; variant: 350; ">
458
+ id="base-sizing350"
459
+ title="theme: base; category: sizing; variant: 350; ">
434
460
  sizing350
435
- <a href="#no-theme-sizing350"
461
+ <a href="#base-sizing350"
436
462
  title="permalink"
437
463
  class="permalink">
438
464
  🔗
@@ -450,10 +476,10 @@
450
476
  </tr>
451
477
  <tr>
452
478
  <td class="with-icons is-vcentered"
453
- id="no-theme-sizing375"
454
- title="theme: no-theme; category: sizing; variant: 375; ">
479
+ id="base-sizing375"
480
+ title="theme: base; category: sizing; variant: 375; ">
455
481
  sizing375
456
- <a href="#no-theme-sizing375"
482
+ <a href="#base-sizing375"
457
483
  title="permalink"
458
484
  class="permalink">
459
485
  🔗
@@ -471,10 +497,10 @@
471
497
  </tr>
472
498
  <tr>
473
499
  <td class="with-icons is-vcentered"
474
- id="no-theme-sizing400"
475
- title="theme: no-theme; category: sizing; variant: 400; ">
500
+ id="base-sizing400"
501
+ title="theme: base; category: sizing; variant: 400; ">
476
502
  sizing400
477
- <a href="#no-theme-sizing400"
503
+ <a href="#base-sizing400"
478
504
  title="permalink"
479
505
  class="permalink">
480
506
  🔗
@@ -492,10 +518,31 @@
492
518
  </tr>
493
519
  <tr>
494
520
  <td class="with-icons is-vcentered"
495
- id="no-theme-sizing500"
496
- title="theme: no-theme; category: sizing; variant: 500; ">
521
+ id="base-sizing450"
522
+ title="theme: base; category: sizing; variant: 450; ">
523
+ sizing450
524
+ <a href="#base-sizing450"
525
+ title="permalink"
526
+ class="permalink">
527
+ 🔗
528
+ </a>
529
+ </td>
530
+ <td class="is-vcentered">
531
+ <pre>36px</pre>
532
+ </td>
533
+ <td class="is-vcentered">
534
+ <div class="table__sizing-preview"
535
+ style="width: 36px; height: 36px">
536
+ </div>
537
+
538
+ </td>
539
+ </tr>
540
+ <tr>
541
+ <td class="with-icons is-vcentered"
542
+ id="base-sizing500"
543
+ title="theme: base; category: sizing; variant: 500; ">
497
544
  sizing500
498
- <a href="#no-theme-sizing500"
545
+ <a href="#base-sizing500"
499
546
  title="permalink"
500
547
  class="permalink">
501
548
  🔗
@@ -513,10 +560,10 @@
513
560
  </tr>
514
561
  <tr>
515
562
  <td class="with-icons is-vcentered"
516
- id="no-theme-sizing600"
517
- title="theme: no-theme; category: sizing; variant: 600; ">
563
+ id="base-sizing600"
564
+ title="theme: base; category: sizing; variant: 600; ">
518
565
  sizing600
519
- <a href="#no-theme-sizing600"
566
+ <a href="#base-sizing600"
520
567
  title="permalink"
521
568
  class="permalink">
522
569
  🔗
@@ -534,10 +581,10 @@
534
581
  </tr>
535
582
  <tr>
536
583
  <td class="with-icons is-vcentered"
537
- id="no-theme-sizing700"
538
- title="theme: no-theme; category: sizing; variant: 700; ">
584
+ id="base-sizing700"
585
+ title="theme: base; category: sizing; variant: 700; ">
539
586
  sizing700
540
- <a href="#no-theme-sizing700"
587
+ <a href="#base-sizing700"
541
588
  title="permalink"
542
589
  class="permalink">
543
590
  🔗
@@ -555,10 +602,10 @@
555
602
  </tr>
556
603
  <tr>
557
604
  <td class="with-icons is-vcentered"
558
- id="no-theme-sizing800"
559
- title="theme: no-theme; category: sizing; variant: 800; ">
605
+ id="base-sizing800"
606
+ title="theme: base; category: sizing; variant: 800; ">
560
607
  sizing800
561
- <a href="#no-theme-sizing800"
608
+ <a href="#base-sizing800"
562
609
  title="permalink"
563
610
  class="permalink">
564
611
  🔗
@@ -576,10 +623,10 @@
576
623
  </tr>
577
624
  <tr>
578
625
  <td class="with-icons is-vcentered"
579
- id="no-theme-sizing900"
580
- title="theme: no-theme; category: sizing; variant: 900; ">
626
+ id="base-sizing900"
627
+ title="theme: base; category: sizing; variant: 900; ">
581
628
  sizing900
582
- <a href="#no-theme-sizing900"
629
+ <a href="#base-sizing900"
583
630
  title="permalink"
584
631
  class="permalink">
585
632
  🔗
@@ -597,10 +644,10 @@
597
644
  </tr>
598
645
  <tr>
599
646
  <td class="with-icons is-vcentered"
600
- id="no-theme-sizing1000"
601
- title="theme: no-theme; category: sizing; variant: 1000; ">
647
+ id="base-sizing1000"
648
+ title="theme: base; category: sizing; variant: 1000; ">
602
649
  sizing1000
603
- <a href="#no-theme-sizing1000"
650
+ <a href="#base-sizing1000"
604
651
  title="permalink"
605
652
  class="permalink">
606
653
  🔗
@@ -618,10 +665,52 @@
618
665
  </tr>
619
666
  <tr>
620
667
  <td class="with-icons is-vcentered"
621
- id="no-theme-sizing025"
622
- title="theme: no-theme; category: sizing; variant: 025; ">
668
+ id="base-sizing1300"
669
+ title="theme: base; category: sizing; variant: 1300; ">
670
+ sizing1300
671
+ <a href="#base-sizing1300"
672
+ title="permalink"
673
+ class="permalink">
674
+ 🔗
675
+ </a>
676
+ </td>
677
+ <td class="is-vcentered">
678
+ <pre>104px</pre>
679
+ </td>
680
+ <td class="is-vcentered">
681
+ <div class="table__sizing-preview"
682
+ style="width: 104px; height: 104px">
683
+ </div>
684
+
685
+ </td>
686
+ </tr>
687
+ <tr>
688
+ <td class="with-icons is-vcentered"
689
+ id="base-sizing1600"
690
+ title="theme: base; category: sizing; variant: 1600; ">
691
+ sizing1600
692
+ <a href="#base-sizing1600"
693
+ title="permalink"
694
+ class="permalink">
695
+ 🔗
696
+ </a>
697
+ </td>
698
+ <td class="is-vcentered">
699
+ <pre>128px</pre>
700
+ </td>
701
+ <td class="is-vcentered">
702
+ <div class="table__sizing-preview"
703
+ style="width: 128px; height: 128px">
704
+ </div>
705
+
706
+ </td>
707
+ </tr>
708
+ <tr>
709
+ <td class="with-icons is-vcentered"
710
+ id="base-sizing025"
711
+ title="theme: base; category: sizing; variant: 025; ">
623
712
  sizing025
624
- <a href="#no-theme-sizing025"
713
+ <a href="#base-sizing025"
625
714
  title="permalink"
626
715
  class="permalink">
627
716
  🔗
@@ -639,10 +728,10 @@
639
728
  </tr>
640
729
  <tr>
641
730
  <td class="with-icons is-vcentered"
642
- id="no-theme-sizing050"
643
- title="theme: no-theme; category: sizing; variant: 050; ">
731
+ id="base-sizing050"
732
+ title="theme: base; category: sizing; variant: 050; ">
644
733
  sizing050
645
- <a href="#no-theme-sizing050"
734
+ <a href="#base-sizing050"
646
735
  title="permalink"
647
736
  class="permalink">
648
737
  🔗
@@ -660,10 +749,10 @@
660
749
  </tr>
661
750
  <tr>
662
751
  <td class="with-icons is-vcentered"
663
- id="no-theme-sizing075"
664
- title="theme: no-theme; category: sizing; variant: 075; ">
752
+ id="base-sizing075"
753
+ title="theme: base; category: sizing; variant: 075; ">
665
754
  sizing075
666
- <a href="#no-theme-sizing075"
755
+ <a href="#base-sizing075"
667
756
  title="permalink"
668
757
  class="permalink">
669
758
  🔗
@@ -681,10 +770,10 @@
681
770
  </tr>
682
771
  <tr>
683
772
  <td class="with-icons is-vcentered"
684
- id="no-theme-sizingLogowidth"
685
- title="theme: no-theme; category: sizing; variant: logowidth; ">
773
+ id="base-sizingLogowidth"
774
+ title="theme: base; category: sizing; variant: logowidth; ">
686
775
  sizingLogowidth
687
- <a href="#no-theme-sizingLogowidth"
776
+ <a href="#base-sizingLogowidth"
688
777
  title="permalink"
689
778
  class="permalink">
690
779
  🔗
@@ -702,10 +791,10 @@
702
791
  </tr>
703
792
  <tr>
704
793
  <td class="with-icons is-vcentered"
705
- id="no-theme-sizing010"
706
- title="theme: no-theme; category: sizing; variant: 010; ">
794
+ id="base-sizing010"
795
+ title="theme: base; category: sizing; variant: 010; ">
707
796
  sizing010
708
- <a href="#no-theme-sizing010"
797
+ <a href="#base-sizing010"
709
798
  title="permalink"
710
799
  class="permalink">
711
800
  🔗