@sage/design-tokens 2.10.0 → 2.13.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 (18) hide show
  1. package/android/base.xml +30 -12
  2. package/css/base.css +30 -12
  3. package/data/tokens.json +246 -88
  4. package/docs/tokens/base/box-shadow/index.html +42 -0
  5. package/docs/tokens/base/colors/index.html +314 -20
  6. package/docs/tokens/base/index.html +419 -41
  7. package/docs/tokens/base/sizing/index.html +21 -0
  8. package/docs/tokens/base/typography/index.html +42 -21
  9. package/docs/tokens/index.html +419 -41
  10. package/ios/base.h +30 -12
  11. package/js/base/common.d.ts +19 -1
  12. package/js/base/common.js +30 -12
  13. package/js/base/es6.d.ts +19 -1
  14. package/js/base/es6.js +29 -11
  15. package/package.json +1 -1
  16. package/sage-design-tokens-2.13.0.tgz +0 -0
  17. package/scss/base.scss +30 -12
  18. package/sage-design-tokens-2.10.0.tgz +0 -0
package/docs/tokens/base/box-shadow/index.html CHANGED
@@ -430,6 +430,48 @@
430
430
  style="box-shadow: 0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26">
431
431
  </div>
432
432
 
433
+ </td>
434
+ </tr>
435
+ <tr>
436
+ <td class="with-icons is-vcentered"
437
+ id="base-boxShadow090"
438
+ title="theme: base; category: boxShadow; variant: 090; ">
439
+ boxShadow090
440
+ <a href="#base-boxShadow090"
441
+ title="permalink"
442
+ class="permalink">
443
+ 🔗
444
+ </a>
445
+ </td>
446
+ <td class="is-vcentered">
447
+ <pre>0 4px 8px -4px #00141e1a</pre>
448
+ </td>
449
+ <td class="is-vcentered">
450
+ <div class="table__box-shadow-preview"
451
+ style="box-shadow: 0 4px 8px -4px #00141e1a">
452
+ </div>
453
+
454
+ </td>
455
+ </tr>
456
+ <tr>
457
+ <td class="with-icons is-vcentered"
458
+ id="base-boxShadow091"
459
+ title="theme: base; category: boxShadow; variant: 091; ">
460
+ boxShadow091
461
+ <a href="#base-boxShadow091"
462
+ title="permalink"
463
+ class="permalink">
464
+ 🔗
465
+ </a>
466
+ </td>
467
+ <td class="is-vcentered">
468
+ <pre>4px 0 8px -4px #00141e1a</pre>
469
+ </td>
470
+ <td class="is-vcentered">
471
+ <div class="table__box-shadow-preview"
472
+ style="box-shadow: 4px 0 8px -4px #00141e1a">
473
+ </div>
474
+
433
475
  </td>
434
476
  </tr>
435
477
  </table>
package/docs/tokens/base/colors/index.html CHANGED
@@ -495,6 +495,48 @@
495
495
 
496
496
  </td>
497
497
  </tr>
498
+ <tr>
499
+ <td class="with-icons is-vcentered"
500
+ id="base-colorsGray700"
501
+ title="theme: base; category: colors; name: gray; variant: 700; ">
502
+ colorsGray700
503
+ <a href="#base-colorsGray700"
504
+ title="permalink"
505
+ class="permalink">
506
+ 🔗
507
+ </a>
508
+ </td>
509
+ <td class="is-vcentered">
510
+ <pre>#4d4d4dff</pre>
511
+ </td>
512
+ <td class="is-vcentered">
513
+ <div class="table__color-preview"
514
+ style="background-color: #4d4d4dff;">
515
+ </div>
516
+
517
+ </td>
518
+ </tr>
519
+ <tr>
520
+ <td class="with-icons is-vcentered"
521
+ id="base-colorsGray750"
522
+ title="theme: base; category: colors; name: gray; variant: 750; ">
523
+ colorsGray750
524
+ <a href="#base-colorsGray750"
525
+ title="permalink"
526
+ class="permalink">
527
+ 🔗
528
+ </a>
529
+ </td>
530
+ <td class="is-vcentered">
531
+ <pre>#404040ff</pre>
532
+ </td>
533
+ <td class="is-vcentered">
534
+ <div class="table__color-preview"
535
+ style="background-color: #404040ff;">
536
+ </div>
537
+
538
+ </td>
539
+ </tr>
498
540
  <tr>
499
541
  <td class="with-icons is-vcentered"
500
542
  id="base-colorsGray850"
@@ -528,11 +570,11 @@
528
570
  </a>
529
571
  </td>
530
572
  <td class="is-vcentered">
531
- <pre>#1a1a1aff</pre>
573
+ <pre>#191919ff</pre>
532
574
  </td>
533
575
  <td class="is-vcentered">
534
576
  <div class="table__color-preview"
535
- style="background-color: #1a1a1aff;">
577
+ style="background-color: #191919ff;">
536
578
  </div>
537
579
 
538
580
  </td>
@@ -801,11 +843,11 @@
801
843
  </a>
802
844
  </td>
803
845
  <td class="is-vcentered">
804
- <pre>#ffffffff</pre>
846
+ <pre>#007e45ff</pre>
805
847
  </td>
806
848
  <td class="is-vcentered">
807
849
  <div class="table__color-preview"
808
- style="background-color: #ffffffff;">
850
+ style="background-color: #007e45ff;">
809
851
  </div>
810
852
 
811
853
  </td>
@@ -894,6 +936,27 @@
894
936
 
895
937
  </td>
896
938
  </tr>
939
+ <tr>
940
+ <td class="with-icons is-vcentered"
941
+ id="base-colorsComponentsMenuSpringChildAlt400"
942
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: childAlt; variant: 400; ">
943
+ colorsComponentsMenuSpringChildAlt400
944
+ <a href="#base-colorsComponentsMenuSpringChildAlt400"
945
+ title="permalink"
946
+ class="permalink">
947
+ 🔗
948
+ </a>
949
+ </td>
950
+ <td class="is-vcentered">
951
+ <pre>#ccd6dbff</pre>
952
+ </td>
953
+ <td class="is-vcentered">
954
+ <div class="table__color-preview"
955
+ style="background-color: #ccd6dbff;">
956
+ </div>
957
+
958
+ </td>
959
+ </tr>
897
960
  <tr>
898
961
  <td class="with-icons is-vcentered"
899
962
  id="base-colorsComponentsMenuSpringChildAlt500"
@@ -936,6 +999,27 @@
936
999
 
937
1000
  </td>
938
1001
  </tr>
1002
+ <tr>
1003
+ <td class="with-icons is-vcentered"
1004
+ id="base-colorsComponentsMenuSummerStandard400"
1005
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 400; ">
1006
+ colorsComponentsMenuSummerStandard400
1007
+ <a href="#base-colorsComponentsMenuSummerStandard400"
1008
+ title="permalink"
1009
+ class="permalink">
1010
+ 🔗
1011
+ </a>
1012
+ </td>
1013
+ <td class="is-vcentered">
1014
+ <pre>#ccd6dbff</pre>
1015
+ </td>
1016
+ <td class="is-vcentered">
1017
+ <div class="table__color-preview"
1018
+ style="background-color: #ccd6dbff;">
1019
+ </div>
1020
+
1021
+ </td>
1022
+ </tr>
939
1023
  <tr>
940
1024
  <td class="with-icons is-vcentered"
941
1025
  id="base-colorsComponentsMenuSummerStandard500"
@@ -990,11 +1074,32 @@
990
1074
  </a>
991
1075
  </td>
992
1076
  <td class="is-vcentered">
993
- <pre>#f2f5f6ff</pre>
1077
+ <pre>#e6ebedff</pre>
994
1078
  </td>
995
1079
  <td class="is-vcentered">
996
1080
  <div class="table__color-preview"
997
- style="background-color: #f2f5f6ff;">
1081
+ style="background-color: #e6ebedff;">
1082
+ </div>
1083
+
1084
+ </td>
1085
+ </tr>
1086
+ <tr>
1087
+ <td class="with-icons is-vcentered"
1088
+ id="base-colorsComponentsMenuSummerStandard800"
1089
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 800; ">
1090
+ colorsComponentsMenuSummerStandard800
1091
+ <a href="#base-colorsComponentsMenuSummerStandard800"
1092
+ title="permalink"
1093
+ class="permalink">
1094
+ 🔗
1095
+ </a>
1096
+ </td>
1097
+ <td class="is-vcentered">
1098
+ <pre>#e6ebedff</pre>
1099
+ </td>
1100
+ <td class="is-vcentered">
1101
+ <div class="table__color-preview"
1102
+ style="background-color: #e6ebedff;">
998
1103
  </div>
999
1104
 
1000
1105
  </td>
@@ -1032,11 +1137,11 @@
1032
1137
  </a>
1033
1138
  </td>
1034
1139
  <td class="is-vcentered">
1035
- <pre>#e6ebedff</pre>
1140
+ <pre>#007e45ff</pre>
1036
1141
  </td>
1037
1142
  <td class="is-vcentered">
1038
1143
  <div class="table__color-preview"
1039
- style="background-color: #e6ebedff;">
1144
+ style="background-color: #007e45ff;">
1040
1145
  </div>
1041
1146
 
1042
1147
  </td>
@@ -1053,11 +1158,32 @@
1053
1158
  </a>
1054
1159
  </td>
1055
1160
  <td class="is-vcentered">
1056
- <pre>#f2f5f6ff</pre>
1161
+ <pre>#e6ebedff</pre>
1057
1162
  </td>
1058
1163
  <td class="is-vcentered">
1059
1164
  <div class="table__color-preview"
1060
- style="background-color: #f2f5f6ff;">
1165
+ style="background-color: #e6ebedff;">
1166
+ </div>
1167
+
1168
+ </td>
1169
+ </tr>
1170
+ <tr>
1171
+ <td class="with-icons is-vcentered"
1172
+ id="base-colorsComponentsMenuSummerChild300"
1173
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 300; ">
1174
+ colorsComponentsMenuSummerChild300
1175
+ <a href="#base-colorsComponentsMenuSummerChild300"
1176
+ title="permalink"
1177
+ class="permalink">
1178
+ 🔗
1179
+ </a>
1180
+ </td>
1181
+ <td class="is-vcentered">
1182
+ <pre>#b3c2c9ff</pre>
1183
+ </td>
1184
+ <td class="is-vcentered">
1185
+ <div class="table__color-preview"
1186
+ style="background-color: #b3c2c9ff;">
1061
1187
  </div>
1062
1188
 
1063
1189
  </td>
@@ -1074,11 +1200,11 @@
1074
1200
  </a>
1075
1201
  </td>
1076
1202
  <td class="is-vcentered">
1077
- <pre>#b3c2c9ff</pre>
1203
+ <pre>#ccd6dbff</pre>
1078
1204
  </td>
1079
1205
  <td class="is-vcentered">
1080
1206
  <div class="table__color-preview"
1081
- style="background-color: #b3c2c9ff;">
1207
+ style="background-color: #ccd6dbff;">
1082
1208
  </div>
1083
1209
 
1084
1210
  </td>
@@ -1125,6 +1251,90 @@
1125
1251
 
1126
1252
  </td>
1127
1253
  </tr>
1254
+ <tr>
1255
+ <td class="with-icons is-vcentered"
1256
+ id="base-colorsComponentsMenuSummerChild700"
1257
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 700; ">
1258
+ colorsComponentsMenuSummerChild700
1259
+ <a href="#base-colorsComponentsMenuSummerChild700"
1260
+ title="permalink"
1261
+ class="permalink">
1262
+ 🔗
1263
+ </a>
1264
+ </td>
1265
+ <td class="is-vcentered">
1266
+ <pre>#e6ebedff</pre>
1267
+ </td>
1268
+ <td class="is-vcentered">
1269
+ <div class="table__color-preview"
1270
+ style="background-color: #e6ebedff;">
1271
+ </div>
1272
+
1273
+ </td>
1274
+ </tr>
1275
+ <tr>
1276
+ <td class="with-icons is-vcentered"
1277
+ id="base-colorsComponentsMenuSummerChild800"
1278
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 800; ">
1279
+ colorsComponentsMenuSummerChild800
1280
+ <a href="#base-colorsComponentsMenuSummerChild800"
1281
+ title="permalink"
1282
+ class="permalink">
1283
+ 🔗
1284
+ </a>
1285
+ </td>
1286
+ <td class="is-vcentered">
1287
+ <pre>#e6ebedff</pre>
1288
+ </td>
1289
+ <td class="is-vcentered">
1290
+ <div class="table__color-preview"
1291
+ style="background-color: #e6ebedff;">
1292
+ </div>
1293
+
1294
+ </td>
1295
+ </tr>
1296
+ <tr>
1297
+ <td class="with-icons is-vcentered"
1298
+ id="base-colorsComponentsMenuSummerChildAlt300"
1299
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 300; ">
1300
+ colorsComponentsMenuSummerChildAlt300
1301
+ <a href="#base-colorsComponentsMenuSummerChildAlt300"
1302
+ title="permalink"
1303
+ class="permalink">
1304
+ 🔗
1305
+ </a>
1306
+ </td>
1307
+ <td class="is-vcentered">
1308
+ <pre>#b3c2c9ff</pre>
1309
+ </td>
1310
+ <td class="is-vcentered">
1311
+ <div class="table__color-preview"
1312
+ style="background-color: #b3c2c9ff;">
1313
+ </div>
1314
+
1315
+ </td>
1316
+ </tr>
1317
+ <tr>
1318
+ <td class="with-icons is-vcentered"
1319
+ id="base-colorsComponentsMenuSummerChildAlt400"
1320
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 400; ">
1321
+ colorsComponentsMenuSummerChildAlt400
1322
+ <a href="#base-colorsComponentsMenuSummerChildAlt400"
1323
+ title="permalink"
1324
+ class="permalink">
1325
+ 🔗
1326
+ </a>
1327
+ </td>
1328
+ <td class="is-vcentered">
1329
+ <pre>#ccd6dbff</pre>
1330
+ </td>
1331
+ <td class="is-vcentered">
1332
+ <div class="table__color-preview"
1333
+ style="background-color: #ccd6dbff;">
1334
+ </div>
1335
+
1336
+ </td>
1337
+ </tr>
1128
1338
  <tr>
1129
1339
  <td class="with-icons is-vcentered"
1130
1340
  id="base-colorsComponentsMenuSummerChildAlt500"
@@ -1137,11 +1347,11 @@
1137
1347
  </a>
1138
1348
  </td>
1139
1349
  <td class="is-vcentered">
1140
- <pre>#ccd6dbff</pre>
1350
+ <pre>#d9e0e4ff</pre>
1141
1351
  </td>
1142
1352
  <td class="is-vcentered">
1143
1353
  <div class="table__color-preview"
1144
- style="background-color: #ccd6dbff;">
1354
+ style="background-color: #d9e0e4ff;">
1145
1355
  </div>
1146
1356
 
1147
1357
  </td>
@@ -1167,6 +1377,48 @@
1167
1377
 
1168
1378
  </td>
1169
1379
  </tr>
1380
+ <tr>
1381
+ <td class="with-icons is-vcentered"
1382
+ id="base-colorsComponentsMenuSummerChildAlt700"
1383
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 700; ">
1384
+ colorsComponentsMenuSummerChildAlt700
1385
+ <a href="#base-colorsComponentsMenuSummerChildAlt700"
1386
+ title="permalink"
1387
+ class="permalink">
1388
+ 🔗
1389
+ </a>
1390
+ </td>
1391
+ <td class="is-vcentered">
1392
+ <pre>#d9e0e4ff</pre>
1393
+ </td>
1394
+ <td class="is-vcentered">
1395
+ <div class="table__color-preview"
1396
+ style="background-color: #d9e0e4ff;">
1397
+ </div>
1398
+
1399
+ </td>
1400
+ </tr>
1401
+ <tr>
1402
+ <td class="with-icons is-vcentered"
1403
+ id="base-colorsComponentsMenuSummerChildAlt800"
1404
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 800; ">
1405
+ colorsComponentsMenuSummerChildAlt800
1406
+ <a href="#base-colorsComponentsMenuSummerChildAlt800"
1407
+ title="permalink"
1408
+ class="permalink">
1409
+ 🔗
1410
+ </a>
1411
+ </td>
1412
+ <td class="is-vcentered">
1413
+ <pre>#d9e0e4ff</pre>
1414
+ </td>
1415
+ <td class="is-vcentered">
1416
+ <div class="table__color-preview"
1417
+ style="background-color: #d9e0e4ff;">
1418
+ </div>
1419
+
1420
+ </td>
1421
+ </tr>
1170
1422
  <tr>
1171
1423
  <td class="with-icons is-vcentered"
1172
1424
  id="base-colorsComponentsMenuAutumnStandard500"
@@ -1263,11 +1515,11 @@
1263
1515
  </a>
1264
1516
  </td>
1265
1517
  <td class="is-vcentered">
1266
- <pre>#001926ff</pre>
1518
+ <pre>#007e45ff</pre>
1267
1519
  </td>
1268
1520
  <td class="is-vcentered">
1269
1521
  <div class="table__color-preview"
1270
- style="background-color: #001926ff;">
1522
+ style="background-color: #007e45ff;">
1271
1523
  </div>
1272
1524
 
1273
1525
  </td>
@@ -1356,6 +1608,27 @@
1356
1608
 
1357
1609
  </td>
1358
1610
  </tr>
1611
+ <tr>
1612
+ <td class="with-icons is-vcentered"
1613
+ id="base-colorsComponentsMenuAutumnChildAlt400"
1614
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 400; ">
1615
+ colorsComponentsMenuAutumnChildAlt400
1616
+ <a href="#base-colorsComponentsMenuAutumnChildAlt400"
1617
+ title="permalink"
1618
+ class="permalink">
1619
+ 🔗
1620
+ </a>
1621
+ </td>
1622
+ <td class="is-vcentered">
1623
+ <pre>#19475eff</pre>
1624
+ </td>
1625
+ <td class="is-vcentered">
1626
+ <div class="table__color-preview"
1627
+ style="background-color: #19475eff;">
1628
+ </div>
1629
+
1630
+ </td>
1631
+ </tr>
1359
1632
  <tr>
1360
1633
  <td class="with-icons is-vcentered"
1361
1634
  id="base-colorsComponentsMenuAutumnChildAlt500"
@@ -1494,11 +1767,11 @@
1494
1767
  </a>
1495
1768
  </td>
1496
1769
  <td class="is-vcentered">
1497
- <pre>#000000ff</pre>
1770
+ <pre>#007e45ff</pre>
1498
1771
  </td>
1499
1772
  <td class="is-vcentered">
1500
1773
  <div class="table__color-preview"
1501
- style="background-color: #000000ff;">
1774
+ style="background-color: #007e45ff;">
1502
1775
  </div>
1503
1776
 
1504
1777
  </td>
@@ -1587,6 +1860,27 @@
1587
1860
 
1588
1861
  </td>
1589
1862
  </tr>
1863
+ <tr>
1864
+ <td class="with-icons is-vcentered"
1865
+ id="base-colorsComponentsMenuWinterChildAlt400"
1866
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 400; ">
1867
+ colorsComponentsMenuWinterChildAlt400
1868
+ <a href="#base-colorsComponentsMenuWinterChildAlt400"
1869
+ title="permalink"
1870
+ class="permalink">
1871
+ 🔗
1872
+ </a>
1873
+ </td>
1874
+ <td class="is-vcentered">
1875
+ <pre>#262626ff</pre>
1876
+ </td>
1877
+ <td class="is-vcentered">
1878
+ <div class="table__color-preview"
1879
+ style="background-color: #262626ff;">
1880
+ </div>
1881
+
1882
+ </td>
1883
+ </tr>
1590
1884
  <tr>
1591
1885
  <td class="with-icons is-vcentered"
1592
1886
  id="base-colorsComponentsMenuWinterChildAlt500"
@@ -1599,11 +1893,11 @@
1599
1893
  </a>
1600
1894
  </td>
1601
1895
  <td class="is-vcentered">
1602
- <pre>#1a1a1aff</pre>
1896
+ <pre>#191919ff</pre>
1603
1897
  </td>
1604
1898
  <td class="is-vcentered">
1605
1899
  <div class="table__color-preview"
1606
- style="background-color: #1a1a1aff;">
1900
+ style="background-color: #191919ff;">
1607
1901
  </div>
1608
1902
 
1609
1903
  </td>