@sage/design-tokens 2.1.0 → 2.4.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 (51) hide show
  1. package/android/base.xml +9 -3
  2. package/assets/fonts/sageui.css +18 -18
  3. package/css/base.css +9 -3
  4. package/data/tokens.json +60 -1677
  5. package/docs/tokens/base/border-radius/index.html +0 -74
  6. package/docs/tokens/base/border-width/index.html +0 -74
  7. package/docs/tokens/base/box-shadow/index.html +0 -74
  8. package/docs/tokens/base/colors/index.html +0 -74
  9. package/docs/tokens/base/font-families/index.html +0 -74
  10. package/docs/tokens/base/font-sizes/index.html +0 -74
  11. package/docs/tokens/base/font-weights/index.html +0 -74
  12. package/docs/tokens/base/index.html +148 -96
  13. package/docs/tokens/base/line-heights/index.html +0 -74
  14. package/docs/tokens/base/opacity/index.html +0 -74
  15. package/docs/tokens/base/sizing/index.html +21 -95
  16. package/docs/tokens/base/spacing/index.html +63 -74
  17. package/docs/tokens/base/typography/index.html +64 -75
  18. package/docs/tokens/index.html +148 -5736
  19. package/index.d.ts +0 -2
  20. package/index.js +0 -2
  21. package/ios/base.h +9 -3
  22. package/js/base/common.d.ts +7 -1
  23. package/js/base/common.js +9 -3
  24. package/js/base/es6.d.ts +7 -1
  25. package/js/base/es6.js +8 -2
  26. package/package.json +1 -1
  27. package/sage-design-tokens-2.4.0.tgz +0 -0
  28. package/scss/base.scss +9 -3
  29. package/android/no-theme.xml +0 -265
  30. package/css/no-theme.css +0 -267
  31. package/docs/tokens/figma-only/index.html +0 -394
  32. package/docs/tokens/figma-only/sizing/index.html +0 -399
  33. package/docs/tokens/no-theme/border-radius/index.html +0 -399
  34. package/docs/tokens/no-theme/border-width/index.html +0 -483
  35. package/docs/tokens/no-theme/box-shadow/index.html +0 -462
  36. package/docs/tokens/no-theme/colors/index.html +0 -2982
  37. package/docs/tokens/no-theme/font-families/index.html +0 -462
  38. package/docs/tokens/no-theme/font-sizes/index.html +0 -664
  39. package/docs/tokens/no-theme/font-weights/index.html +0 -441
  40. package/docs/tokens/no-theme/index.html +0 -5890
  41. package/docs/tokens/no-theme/line-heights/index.html +0 -420
  42. package/docs/tokens/no-theme/sizing/index.html +0 -819
  43. package/docs/tokens/no-theme/spacing/index.html +0 -735
  44. package/docs/tokens/no-theme/typography/index.html +0 -1638
  45. package/ios/no-theme.h +0 -269
  46. package/js/no-theme/common.d.ts +0 -256
  47. package/js/no-theme/common.js +0 -267
  48. package/js/no-theme/es6.d.ts +0 -259
  49. package/js/no-theme/es6.js +0 -262
  50. package/sage-design-tokens-2.1.0.tgz +0 -0
  51. package/scss/no-theme.scss +0 -264
package/docs/tokens/base/index.html CHANGED
@@ -256,80 +256,6 @@
256
256
  </a>
257
257
  </li>
258
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
259
  </section>
334
260
  </aside>
335
261
  <main class="content">
@@ -4551,6 +4477,27 @@
4551
4477
 
4552
4478
  </td>
4553
4479
  </tr>
4480
+ <tr>
4481
+ <td class="with-icons is-vcentered"
4482
+ id="base-sizing010"
4483
+ title="theme: base; category: sizing; variant: 010; ">
4484
+ sizing010
4485
+ <a href="#base-sizing010"
4486
+ title="permalink"
4487
+ class="permalink">
4488
+ 🔗
4489
+ </a>
4490
+ </td>
4491
+ <td class="is-vcentered">
4492
+ <pre>1px</pre>
4493
+ </td>
4494
+ <td class="is-vcentered">
4495
+ <div class="table__sizing-preview"
4496
+ style="width: 1px; height: 1px">
4497
+ </div>
4498
+
4499
+ </td>
4500
+ </tr>
4554
4501
  <tr>
4555
4502
  <td class="with-icons is-vcentered"
4556
4503
  id="base-sizing025"
@@ -4633,27 +4580,6 @@
4633
4580
  style="width: 40px; height: 40px">
4634
4581
  </div>
4635
4582
 
4636
- </td>
4637
- </tr>
4638
- <tr>
4639
- <td class="with-icons is-vcentered"
4640
- id="base-sizing010"
4641
- title="theme: base; category: sizing; variant: 010; ">
4642
- sizing010
4643
- <a href="#base-sizing010"
4644
- title="permalink"
4645
- class="permalink">
4646
- 🔗
4647
- </a>
4648
- </td>
4649
- <td class="is-vcentered">
4650
- <pre>1px</pre>
4651
- </td>
4652
- <td class="is-vcentered">
4653
- <div class="table__sizing-preview"
4654
- style="width: 1px; height: 1px">
4655
- </div>
4656
-
4657
4583
  </td>
4658
4584
  </tr>
4659
4585
  </table>
@@ -4694,6 +4620,27 @@
4694
4620
 
4695
4621
  </td>
4696
4622
  </tr>
4623
+ <tr>
4624
+ <td class="with-icons is-vcentered"
4625
+ id="base-spacing110"
4626
+ title="theme: base; category: spacing; variant: 110; ">
4627
+ spacing110
4628
+ <a href="#base-spacing110"
4629
+ title="permalink"
4630
+ class="permalink">
4631
+ 🔗
4632
+ </a>
4633
+ </td>
4634
+ <td class="is-vcentered">
4635
+ <pre>9px</pre>
4636
+ </td>
4637
+ <td class="is-vcentered">
4638
+ <div class="table__spacing-preview"
4639
+ style="width: 9px">
4640
+ </div>
4641
+
4642
+ </td>
4643
+ </tr>
4697
4644
  <tr>
4698
4645
  <td class="with-icons is-vcentered"
4699
4646
  id="base-spacing125"
@@ -4967,6 +4914,27 @@
4967
4914
 
4968
4915
  </td>
4969
4916
  </tr>
4917
+ <tr>
4918
+ <td class="with-icons is-vcentered"
4919
+ id="base-spacing010"
4920
+ title="theme: base; category: spacing; variant: 010; ">
4921
+ spacing010
4922
+ <a href="#base-spacing010"
4923
+ title="permalink"
4924
+ class="permalink">
4925
+ 🔗
4926
+ </a>
4927
+ </td>
4928
+ <td class="is-vcentered">
4929
+ <pre>1px</pre>
4930
+ </td>
4931
+ <td class="is-vcentered">
4932
+ <div class="table__spacing-preview"
4933
+ style="width: 1px">
4934
+ </div>
4935
+
4936
+ </td>
4937
+ </tr>
4970
4938
  <tr>
4971
4939
  <td class="with-icons is-vcentered"
4972
4940
  id="base-spacing025"
@@ -5009,6 +4977,27 @@
5009
4977
 
5010
4978
  </td>
5011
4979
  </tr>
4980
+ <tr>
4981
+ <td class="with-icons is-vcentered"
4982
+ id="base-spacing060"
4983
+ title="theme: base; category: spacing; variant: 060; ">
4984
+ spacing060
4985
+ <a href="#base-spacing060"
4986
+ title="permalink"
4987
+ class="permalink">
4988
+ 🔗
4989
+ </a>
4990
+ </td>
4991
+ <td class="is-vcentered">
4992
+ <pre>5px</pre>
4993
+ </td>
4994
+ <td class="is-vcentered">
4995
+ <div class="table__spacing-preview"
4996
+ style="width: 5px">
4997
+ </div>
4998
+
4999
+ </td>
5000
+ </tr>
5012
5001
  <tr>
5013
5002
  <td class="with-icons is-vcentered"
5014
5003
  id="base-spacing075"
@@ -7048,6 +7037,69 @@
7048
7037
 
7049
7038
  </td>
7050
7039
  </tr>
7040
+ <tr>
7041
+ <td class="with-icons is-vcentered"
7042
+ id="base-typographyLinkOlDtextS"
7043
+ title="theme: base; category: typography; group: link; name: OLDtext; variant: s; ">
7044
+ typographyLinkOlDtextS
7045
+ <a href="#base-typographyLinkOlDtextS"
7046
+ title="permalink"
7047
+ class="permalink">
7048
+ 🔗
7049
+ </a>
7050
+ </td>
7051
+ <td class="is-vcentered">
7052
+ <pre>400 12px/150% Sage UI</pre>
7053
+ </td>
7054
+ <td class="is-vcentered">
7055
+ <div class="table__typography-preview">
7056
+ n/a
7057
+ </div>
7058
+
7059
+ </td>
7060
+ </tr>
7061
+ <tr>
7062
+ <td class="with-icons is-vcentered"
7063
+ id="base-typographyLinkOlDtextM"
7064
+ title="theme: base; category: typography; group: link; name: OLDtext; variant: m; ">
7065
+ typographyLinkOlDtextM
7066
+ <a href="#base-typographyLinkOlDtextM"
7067
+ title="permalink"
7068
+ class="permalink">
7069
+ 🔗
7070
+ </a>
7071
+ </td>
7072
+ <td class="is-vcentered">
7073
+ <pre>400 14px/150% Sage UI</pre>
7074
+ </td>
7075
+ <td class="is-vcentered">
7076
+ <div class="table__typography-preview">
7077
+ n/a
7078
+ </div>
7079
+
7080
+ </td>
7081
+ </tr>
7082
+ <tr>
7083
+ <td class="with-icons is-vcentered"
7084
+ id="base-typographyLinkOlDtextL"
7085
+ title="theme: base; category: typography; group: link; name: OLDtext; variant: l; ">
7086
+ typographyLinkOlDtextL
7087
+ <a href="#base-typographyLinkOlDtextL"
7088
+ title="permalink"
7089
+ class="permalink">
7090
+ 🔗
7091
+ </a>
7092
+ </td>
7093
+ <td class="is-vcentered">
7094
+ <pre>400 16px/150% Sage UI</pre>
7095
+ </td>
7096
+ <td class="is-vcentered">
7097
+ <div class="table__typography-preview">
7098
+ n/a
7099
+ </div>
7100
+
7101
+ </td>
7102
+ </tr>
7051
7103
  <tr>
7052
7104
  <td class="with-icons is-vcentered"
7053
7105
  id="base-typographyLinkTextS"
@@ -7102,7 +7154,7 @@
7102
7154
  </a>
7103
7155
  </td>
7104
7156
  <td class="is-vcentered">
7105
- <pre>400 16px/150% Sage UI</pre>
7157
+ <pre>undefined 16px/150% Sage UI</pre>
7106
7158
  </td>
7107
7159
  <td class="is-vcentered">
7108
7160
  <div class="table__typography-preview">
package/docs/tokens/base/line-heights/index.html CHANGED
@@ -256,80 +256,6 @@
256
256
  </a>
257
257
  </li>
258
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
259
  </section>
334
260
  </aside>
335
261
  <main class="content">
package/docs/tokens/base/opacity/index.html CHANGED
@@ -256,80 +256,6 @@
256
256
  </a>
257
257
  </li>
258
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
259
  </section>
334
260
  </aside>
335
261
  <main class="content">
package/docs/tokens/base/sizing/index.html CHANGED
@@ -256,80 +256,6 @@
256
256
  </a>
257
257
  </li>
258
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
259
  </section>
334
260
  </aside>
335
261
  <main class="content">
@@ -779,6 +705,27 @@
779
705
 
780
706
  </td>
781
707
  </tr>
708
+ <tr>
709
+ <td class="with-icons is-vcentered"
710
+ id="base-sizing010"
711
+ title="theme: base; category: sizing; variant: 010; ">
712
+ sizing010
713
+ <a href="#base-sizing010"
714
+ title="permalink"
715
+ class="permalink">
716
+ 🔗
717
+ </a>
718
+ </td>
719
+ <td class="is-vcentered">
720
+ <pre>1px</pre>
721
+ </td>
722
+ <td class="is-vcentered">
723
+ <div class="table__sizing-preview"
724
+ style="width: 1px; height: 1px">
725
+ </div>
726
+
727
+ </td>
728
+ </tr>
782
729
  <tr>
783
730
  <td class="with-icons is-vcentered"
784
731
  id="base-sizing025"
@@ -861,27 +808,6 @@
861
808
  style="width: 40px; height: 40px">
862
809
  </div>
863
810
 
864
- </td>
865
- </tr>
866
- <tr>
867
- <td class="with-icons is-vcentered"
868
- id="base-sizing010"
869
- title="theme: base; category: sizing; variant: 010; ">
870
- sizing010
871
- <a href="#base-sizing010"
872
- title="permalink"
873
- class="permalink">
874
- 🔗
875
- </a>
876
- </td>
877
- <td class="is-vcentered">
878
- <pre>1px</pre>
879
- </td>
880
- <td class="is-vcentered">
881
- <div class="table__sizing-preview"
882
- style="width: 1px; height: 1px">
883
- </div>
884
-
885
811
  </td>
886
812
  </tr>
887
813
  </table>