@sage/design-tokens 2.64.0 → 2.65.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 (53) hide show
  1. package/android/base.xml +4 -2
  2. package/android/dashboard/darkMode.xml +11 -0
  3. package/android/dashboard/lightMode.xml +11 -0
  4. package/android/origin.xml +108 -97
  5. package/css/base.css +4 -2
  6. package/css/dashboard/darkMode.css +13 -0
  7. package/css/dashboard/lightMode.css +13 -0
  8. package/css/origin.css +108 -97
  9. package/data/tokens.json +1125 -132
  10. package/docs/tokens/base/border-radius/index.html +41 -20
  11. package/docs/tokens/base/border-width/index.html +2 -2
  12. package/docs/tokens/base/box-shadow/index.html +2 -2
  13. package/docs/tokens/base/colors/index.html +23 -2
  14. package/docs/tokens/base/font-families/index.html +2 -2
  15. package/docs/tokens/base/font-sizes/index.html +2 -2
  16. package/docs/tokens/base/font-weights/index.html +2 -2
  17. package/docs/tokens/base/index.html +62 -20
  18. package/docs/tokens/base/line-heights/index.html +2 -2
  19. package/docs/tokens/base/opacity/index.html +2 -2
  20. package/docs/tokens/base/sizing/index.html +2 -2
  21. package/docs/tokens/base/spacing/index.html +2 -2
  22. package/docs/tokens/base/typography/index.html +2 -2
  23. package/docs/tokens/index.html +812 -539
  24. package/docs/tokens/origin/index.html +750 -519
  25. package/docs/tokens/origin/{colors → origin-colors-reference-only}/index.html +751 -520
  26. package/index.js +4 -0
  27. package/ios/base.h +4 -2
  28. package/ios/dashboard/darkMode.h +15 -0
  29. package/ios/dashboard/lightMode.h +15 -0
  30. package/ios/origin.h +108 -97
  31. package/js/base/common.d.ts +3 -1
  32. package/js/base/common.js +4 -2
  33. package/js/base/es6.d.ts +3 -1
  34. package/js/base/es6.js +3 -1
  35. package/js/dashboard/darkMode/common.d.ts +2 -0
  36. package/js/dashboard/darkMode/common.js +13 -0
  37. package/js/dashboard/darkMode/es6.d.ts +5 -0
  38. package/js/dashboard/darkMode/es6.js +8 -0
  39. package/js/dashboard/lightMode/common.d.ts +2 -0
  40. package/js/dashboard/lightMode/common.js +13 -0
  41. package/js/dashboard/lightMode/es6.d.ts +5 -0
  42. package/js/dashboard/lightMode/es6.js +8 -0
  43. package/js/origin/common.d.ts +107 -96
  44. package/js/origin/common.js +108 -97
  45. package/js/origin/es6.d.ts +107 -96
  46. package/js/origin/es6.js +107 -96
  47. package/package.json +1 -1
  48. package/sage-design-tokens-2.65.0.tgz +0 -0
  49. package/scss/base.scss +4 -2
  50. package/scss/dashboard/darkMode.scss +10 -0
  51. package/scss/dashboard/lightMode.scss +10 -0
  52. package/scss/origin.scss +108 -97
  53. package/sage-design-tokens-2.64.0.tgz +0 -0
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -383,63 +383,84 @@
383
383
  </tr>
384
384
  <tr>
385
385
  <td class="with-icons is-vcentered"
386
- id="base-borderRadius025"
387
- title="theme: base; category: borderRadius; variant: 025; ">
388
- borderRadius025
389
- <a href="#base-borderRadius025"
386
+ id="base-borderRadius000"
387
+ title="theme: base; category: borderRadius; variant: 000; ">
388
+ borderRadius000
389
+ <a href="#base-borderRadius000"
390
390
  title="permalink"
391
391
  class="permalink">
392
392
  🔗
393
393
  </a>
394
394
  </td>
395
395
  <td class="is-vcentered">
396
- <pre>2px</pre>
396
+ <pre>0px</pre>
397
397
  </td>
398
398
  <td class="is-vcentered">
399
399
  <div class="table__border-radius-preview"
400
- style="border-top-right-radius: 2px">
400
+ style="border-top-right-radius: 0px">
401
401
  </div>
402
402
 
403
403
  </td>
404
404
  </tr>
405
405
  <tr>
406
406
  <td class="with-icons is-vcentered"
407
- id="base-borderRadius050"
408
- title="theme: base; category: borderRadius; variant: 050; ">
409
- borderRadius050
410
- <a href="#base-borderRadius050"
407
+ id="base-borderRadius010"
408
+ title="theme: base; category: borderRadius; variant: 010; ">
409
+ borderRadius010
410
+ <a href="#base-borderRadius010"
411
411
  title="permalink"
412
412
  class="permalink">
413
413
  🔗
414
414
  </a>
415
415
  </td>
416
416
  <td class="is-vcentered">
417
- <pre>4px</pre>
417
+ <pre>1px</pre>
418
418
  </td>
419
419
  <td class="is-vcentered">
420
420
  <div class="table__border-radius-preview"
421
- style="border-top-right-radius: 4px">
421
+ style="border-top-right-radius: 1px">
422
422
  </div>
423
423
 
424
424
  </td>
425
425
  </tr>
426
426
  <tr>
427
427
  <td class="with-icons is-vcentered"
428
- id="base-borderRadius000"
429
- title="theme: base; category: borderRadius; variant: 000; ">
430
- borderRadius000
431
- <a href="#base-borderRadius000"
428
+ id="base-borderRadius025"
429
+ title="theme: base; category: borderRadius; variant: 025; ">
430
+ borderRadius025
431
+ <a href="#base-borderRadius025"
432
432
  title="permalink"
433
433
  class="permalink">
434
434
  🔗
435
435
  </a>
436
436
  </td>
437
437
  <td class="is-vcentered">
438
- <pre>0px</pre>
438
+ <pre>2px</pre>
439
439
  </td>
440
440
  <td class="is-vcentered">
441
441
  <div class="table__border-radius-preview"
442
- style="border-top-right-radius: 0px">
442
+ style="border-top-right-radius: 2px">
443
+ </div>
444
+
445
+ </td>
446
+ </tr>
447
+ <tr>
448
+ <td class="with-icons is-vcentered"
449
+ id="base-borderRadius050"
450
+ title="theme: base; category: borderRadius; variant: 050; ">
451
+ borderRadius050
452
+ <a href="#base-borderRadius050"
453
+ title="permalink"
454
+ class="permalink">
455
+ 🔗
456
+ </a>
457
+ </td>
458
+ <td class="is-vcentered">
459
+ <pre>4px</pre>
460
+ </td>
461
+ <td class="is-vcentered">
462
+ <div class="table__border-radius-preview"
463
+ style="border-top-right-radius: 4px">
443
464
  </div>
444
465
 
445
466
  </td>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -4812,6 +4812,27 @@
4812
4812
 
4813
4813
  </td>
4814
4814
  </tr>
4815
+ <tr>
4816
+ <td class="with-icons is-vcentered"
4817
+ id="base-colorsComponentsMenuYang030"
4818
+ title="theme: base; category: colors; group: components; name: menu; subgroup: yang; variant: 030; ">
4819
+ colorsComponentsMenuYang030
4820
+ <a href="#base-colorsComponentsMenuYang030"
4821
+ title="permalink"
4822
+ class="permalink">
4823
+ 🔗
4824
+ </a>
4825
+ </td>
4826
+ <td class="is-vcentered">
4827
+ <pre>#ffffff4d</pre>
4828
+ </td>
4829
+ <td class="is-vcentered">
4830
+ <div class="table__color-preview"
4831
+ style="background-color: #ffffff4d;">
4832
+ </div>
4833
+
4834
+ </td>
4835
+ </tr>
4815
4836
  <tr>
4816
4837
  <td class="with-icons is-vcentered"
4817
4838
  id="base-colorsComponentsMenuTransparent"
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../origin/colors/index.html">
267
- colors
266
+ <a href="../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -4808,6 +4808,27 @@
4808
4808
 
4809
4809
  </td>
4810
4810
  </tr>
4811
+ <tr>
4812
+ <td class="with-icons is-vcentered"
4813
+ id="base-colorsComponentsMenuYang030"
4814
+ title="theme: base; category: colors; group: components; name: menu; subgroup: yang; variant: 030; ">
4815
+ colorsComponentsMenuYang030
4816
+ <a href="#base-colorsComponentsMenuYang030"
4817
+ title="permalink"
4818
+ class="permalink">
4819
+ 🔗
4820
+ </a>
4821
+ </td>
4822
+ <td class="is-vcentered">
4823
+ <pre>#ffffff4d</pre>
4824
+ </td>
4825
+ <td class="is-vcentered">
4826
+ <div class="table__color-preview"
4827
+ style="background-color: #ffffff4d;">
4828
+ </div>
4829
+
4830
+ </td>
4831
+ </tr>
4811
4832
  <tr>
4812
4833
  <td class="with-icons is-vcentered"
4813
4834
  id="base-colorsComponentsMenuTransparent"
@@ -6971,63 +6992,84 @@
6971
6992
  </tr>
6972
6993
  <tr>
6973
6994
  <td class="with-icons is-vcentered"
6974
- id="base-borderRadius025"
6975
- title="theme: base; category: borderRadius; variant: 025; ">
6976
- borderRadius025
6977
- <a href="#base-borderRadius025"
6995
+ id="base-borderRadius000"
6996
+ title="theme: base; category: borderRadius; variant: 000; ">
6997
+ borderRadius000
6998
+ <a href="#base-borderRadius000"
6978
6999
  title="permalink"
6979
7000
  class="permalink">
6980
7001
  🔗
6981
7002
  </a>
6982
7003
  </td>
6983
7004
  <td class="is-vcentered">
6984
- <pre>2px</pre>
7005
+ <pre>0px</pre>
6985
7006
  </td>
6986
7007
  <td class="is-vcentered">
6987
7008
  <div class="table__border-radius-preview"
6988
- style="border-top-right-radius: 2px">
7009
+ style="border-top-right-radius: 0px">
6989
7010
  </div>
6990
7011
 
6991
7012
  </td>
6992
7013
  </tr>
6993
7014
  <tr>
6994
7015
  <td class="with-icons is-vcentered"
6995
- id="base-borderRadius050"
6996
- title="theme: base; category: borderRadius; variant: 050; ">
6997
- borderRadius050
6998
- <a href="#base-borderRadius050"
7016
+ id="base-borderRadius010"
7017
+ title="theme: base; category: borderRadius; variant: 010; ">
7018
+ borderRadius010
7019
+ <a href="#base-borderRadius010"
6999
7020
  title="permalink"
7000
7021
  class="permalink">
7001
7022
  🔗
7002
7023
  </a>
7003
7024
  </td>
7004
7025
  <td class="is-vcentered">
7005
- <pre>4px</pre>
7026
+ <pre>1px</pre>
7006
7027
  </td>
7007
7028
  <td class="is-vcentered">
7008
7029
  <div class="table__border-radius-preview"
7009
- style="border-top-right-radius: 4px">
7030
+ style="border-top-right-radius: 1px">
7010
7031
  </div>
7011
7032
 
7012
7033
  </td>
7013
7034
  </tr>
7014
7035
  <tr>
7015
7036
  <td class="with-icons is-vcentered"
7016
- id="base-borderRadius000"
7017
- title="theme: base; category: borderRadius; variant: 000; ">
7018
- borderRadius000
7019
- <a href="#base-borderRadius000"
7037
+ id="base-borderRadius025"
7038
+ title="theme: base; category: borderRadius; variant: 025; ">
7039
+ borderRadius025
7040
+ <a href="#base-borderRadius025"
7020
7041
  title="permalink"
7021
7042
  class="permalink">
7022
7043
  🔗
7023
7044
  </a>
7024
7045
  </td>
7025
7046
  <td class="is-vcentered">
7026
- <pre>0px</pre>
7047
+ <pre>2px</pre>
7027
7048
  </td>
7028
7049
  <td class="is-vcentered">
7029
7050
  <div class="table__border-radius-preview"
7030
- style="border-top-right-radius: 0px">
7051
+ style="border-top-right-radius: 2px">
7052
+ </div>
7053
+
7054
+ </td>
7055
+ </tr>
7056
+ <tr>
7057
+ <td class="with-icons is-vcentered"
7058
+ id="base-borderRadius050"
7059
+ title="theme: base; category: borderRadius; variant: 050; ">
7060
+ borderRadius050
7061
+ <a href="#base-borderRadius050"
7062
+ title="permalink"
7063
+ class="permalink">
7064
+ 🔗
7065
+ </a>
7066
+ </td>
7067
+ <td class="is-vcentered">
7068
+ <pre>4px</pre>
7069
+ </td>
7070
+ <td class="is-vcentered">
7071
+ <div class="table__border-radius-preview"
7072
+ style="border-top-right-radius: 4px">
7031
7073
  </div>
7032
7074
 
7033
7075
  </td>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>
@@ -263,8 +263,8 @@
263
263
  </p>
264
264
  <ul class="menu-list">
265
265
  <li>
266
- <a href="../../origin/colors/index.html">
267
- colors
266
+ <a href="../../origin/origin-colors-reference-only/index.html">
267
+ origin-colors (reference only)
268
268
  </a>
269
269
  </li>
270
270
  </ul>