@sage/design-tokens 2.9.0 → 2.12.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 (17) hide show
  1. package/android/base.xml +28 -11
  2. package/css/base.css +28 -11
  3. package/data/tokens.json +210 -61
  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 +377 -20
  7. package/docs/tokens/base/typography/index.html +21 -0
  8. package/docs/tokens/index.html +377 -20
  9. package/ios/base.h +28 -11
  10. package/js/base/common.d.ts +17 -0
  11. package/js/base/common.js +28 -11
  12. package/js/base/es6.d.ts +17 -0
  13. package/js/base/es6.js +27 -10
  14. package/package.json +1 -1
  15. package/sage-design-tokens-2.12.0.tgz +0 -0
  16. package/scss/base.scss +28 -11
  17. package/sage-design-tokens-2.9.0.tgz +0 -0
package/docs/tokens/base/index.html CHANGED
@@ -491,6 +491,48 @@
491
491
 
492
492
  </td>
493
493
  </tr>
494
+ <tr>
495
+ <td class="with-icons is-vcentered"
496
+ id="base-colorsGray700"
497
+ title="theme: base; category: colors; name: gray; variant: 700; ">
498
+ colorsGray700
499
+ <a href="#base-colorsGray700"
500
+ title="permalink"
501
+ class="permalink">
502
+ 🔗
503
+ </a>
504
+ </td>
505
+ <td class="is-vcentered">
506
+ <pre>#4d4d4dff</pre>
507
+ </td>
508
+ <td class="is-vcentered">
509
+ <div class="table__color-preview"
510
+ style="background-color: #4d4d4dff;">
511
+ </div>
512
+
513
+ </td>
514
+ </tr>
515
+ <tr>
516
+ <td class="with-icons is-vcentered"
517
+ id="base-colorsGray750"
518
+ title="theme: base; category: colors; name: gray; variant: 750; ">
519
+ colorsGray750
520
+ <a href="#base-colorsGray750"
521
+ title="permalink"
522
+ class="permalink">
523
+ 🔗
524
+ </a>
525
+ </td>
526
+ <td class="is-vcentered">
527
+ <pre>#404040ff</pre>
528
+ </td>
529
+ <td class="is-vcentered">
530
+ <div class="table__color-preview"
531
+ style="background-color: #404040ff;">
532
+ </div>
533
+
534
+ </td>
535
+ </tr>
494
536
  <tr>
495
537
  <td class="with-icons is-vcentered"
496
538
  id="base-colorsGray850"
@@ -524,11 +566,11 @@
524
566
  </a>
525
567
  </td>
526
568
  <td class="is-vcentered">
527
- <pre>#1a1a1aff</pre>
569
+ <pre>#191919ff</pre>
528
570
  </td>
529
571
  <td class="is-vcentered">
530
572
  <div class="table__color-preview"
531
- style="background-color: #1a1a1aff;">
573
+ style="background-color: #191919ff;">
532
574
  </div>
533
575
 
534
576
  </td>
@@ -797,11 +839,11 @@
797
839
  </a>
798
840
  </td>
799
841
  <td class="is-vcentered">
800
- <pre>#ffffffff</pre>
842
+ <pre>#007e45ff</pre>
801
843
  </td>
802
844
  <td class="is-vcentered">
803
845
  <div class="table__color-preview"
804
- style="background-color: #ffffffff;">
846
+ style="background-color: #007e45ff;">
805
847
  </div>
806
848
 
807
849
  </td>
@@ -890,6 +932,27 @@
890
932
 
891
933
  </td>
892
934
  </tr>
935
+ <tr>
936
+ <td class="with-icons is-vcentered"
937
+ id="base-colorsComponentsMenuSpringChildAlt400"
938
+ title="theme: base; category: colors; group: components; name: menu; subgroup: spring; element: childAlt; variant: 400; ">
939
+ colorsComponentsMenuSpringChildAlt400
940
+ <a href="#base-colorsComponentsMenuSpringChildAlt400"
941
+ title="permalink"
942
+ class="permalink">
943
+ 🔗
944
+ </a>
945
+ </td>
946
+ <td class="is-vcentered">
947
+ <pre>#ccd6dbff</pre>
948
+ </td>
949
+ <td class="is-vcentered">
950
+ <div class="table__color-preview"
951
+ style="background-color: #ccd6dbff;">
952
+ </div>
953
+
954
+ </td>
955
+ </tr>
893
956
  <tr>
894
957
  <td class="with-icons is-vcentered"
895
958
  id="base-colorsComponentsMenuSpringChildAlt500"
@@ -932,6 +995,27 @@
932
995
 
933
996
  </td>
934
997
  </tr>
998
+ <tr>
999
+ <td class="with-icons is-vcentered"
1000
+ id="base-colorsComponentsMenuSummerStandard400"
1001
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 400; ">
1002
+ colorsComponentsMenuSummerStandard400
1003
+ <a href="#base-colorsComponentsMenuSummerStandard400"
1004
+ title="permalink"
1005
+ class="permalink">
1006
+ 🔗
1007
+ </a>
1008
+ </td>
1009
+ <td class="is-vcentered">
1010
+ <pre>#ccd6dbff</pre>
1011
+ </td>
1012
+ <td class="is-vcentered">
1013
+ <div class="table__color-preview"
1014
+ style="background-color: #ccd6dbff;">
1015
+ </div>
1016
+
1017
+ </td>
1018
+ </tr>
935
1019
  <tr>
936
1020
  <td class="with-icons is-vcentered"
937
1021
  id="base-colorsComponentsMenuSummerStandard500"
@@ -986,11 +1070,32 @@
986
1070
  </a>
987
1071
  </td>
988
1072
  <td class="is-vcentered">
989
- <pre>#f2f5f6ff</pre>
1073
+ <pre>#e6ebedff</pre>
990
1074
  </td>
991
1075
  <td class="is-vcentered">
992
1076
  <div class="table__color-preview"
993
- style="background-color: #f2f5f6ff;">
1077
+ style="background-color: #e6ebedff;">
1078
+ </div>
1079
+
1080
+ </td>
1081
+ </tr>
1082
+ <tr>
1083
+ <td class="with-icons is-vcentered"
1084
+ id="base-colorsComponentsMenuSummerStandard800"
1085
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: standard; variant: 800; ">
1086
+ colorsComponentsMenuSummerStandard800
1087
+ <a href="#base-colorsComponentsMenuSummerStandard800"
1088
+ title="permalink"
1089
+ class="permalink">
1090
+ 🔗
1091
+ </a>
1092
+ </td>
1093
+ <td class="is-vcentered">
1094
+ <pre>#e6ebedff</pre>
1095
+ </td>
1096
+ <td class="is-vcentered">
1097
+ <div class="table__color-preview"
1098
+ style="background-color: #e6ebedff;">
994
1099
  </div>
995
1100
 
996
1101
  </td>
@@ -1028,11 +1133,11 @@
1028
1133
  </a>
1029
1134
  </td>
1030
1135
  <td class="is-vcentered">
1031
- <pre>#e6ebedff</pre>
1136
+ <pre>#007e45ff</pre>
1032
1137
  </td>
1033
1138
  <td class="is-vcentered">
1034
1139
  <div class="table__color-preview"
1035
- style="background-color: #e6ebedff;">
1140
+ style="background-color: #007e45ff;">
1036
1141
  </div>
1037
1142
 
1038
1143
  </td>
@@ -1049,11 +1154,32 @@
1049
1154
  </a>
1050
1155
  </td>
1051
1156
  <td class="is-vcentered">
1052
- <pre>#f2f5f6ff</pre>
1157
+ <pre>#e6ebedff</pre>
1053
1158
  </td>
1054
1159
  <td class="is-vcentered">
1055
1160
  <div class="table__color-preview"
1056
- style="background-color: #f2f5f6ff;">
1161
+ style="background-color: #e6ebedff;">
1162
+ </div>
1163
+
1164
+ </td>
1165
+ </tr>
1166
+ <tr>
1167
+ <td class="with-icons is-vcentered"
1168
+ id="base-colorsComponentsMenuSummerChild300"
1169
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 300; ">
1170
+ colorsComponentsMenuSummerChild300
1171
+ <a href="#base-colorsComponentsMenuSummerChild300"
1172
+ title="permalink"
1173
+ class="permalink">
1174
+ 🔗
1175
+ </a>
1176
+ </td>
1177
+ <td class="is-vcentered">
1178
+ <pre>#b3c2c9ff</pre>
1179
+ </td>
1180
+ <td class="is-vcentered">
1181
+ <div class="table__color-preview"
1182
+ style="background-color: #b3c2c9ff;">
1057
1183
  </div>
1058
1184
 
1059
1185
  </td>
@@ -1070,11 +1196,11 @@
1070
1196
  </a>
1071
1197
  </td>
1072
1198
  <td class="is-vcentered">
1073
- <pre>#b3c2c9ff</pre>
1199
+ <pre>#ccd6dbff</pre>
1074
1200
  </td>
1075
1201
  <td class="is-vcentered">
1076
1202
  <div class="table__color-preview"
1077
- style="background-color: #b3c2c9ff;">
1203
+ style="background-color: #ccd6dbff;">
1078
1204
  </div>
1079
1205
 
1080
1206
  </td>
@@ -1121,6 +1247,90 @@
1121
1247
 
1122
1248
  </td>
1123
1249
  </tr>
1250
+ <tr>
1251
+ <td class="with-icons is-vcentered"
1252
+ id="base-colorsComponentsMenuSummerChild700"
1253
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 700; ">
1254
+ colorsComponentsMenuSummerChild700
1255
+ <a href="#base-colorsComponentsMenuSummerChild700"
1256
+ title="permalink"
1257
+ class="permalink">
1258
+ 🔗
1259
+ </a>
1260
+ </td>
1261
+ <td class="is-vcentered">
1262
+ <pre>#e6ebedff</pre>
1263
+ </td>
1264
+ <td class="is-vcentered">
1265
+ <div class="table__color-preview"
1266
+ style="background-color: #e6ebedff;">
1267
+ </div>
1268
+
1269
+ </td>
1270
+ </tr>
1271
+ <tr>
1272
+ <td class="with-icons is-vcentered"
1273
+ id="base-colorsComponentsMenuSummerChild800"
1274
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: child; variant: 800; ">
1275
+ colorsComponentsMenuSummerChild800
1276
+ <a href="#base-colorsComponentsMenuSummerChild800"
1277
+ title="permalink"
1278
+ class="permalink">
1279
+ 🔗
1280
+ </a>
1281
+ </td>
1282
+ <td class="is-vcentered">
1283
+ <pre>#e6ebedff</pre>
1284
+ </td>
1285
+ <td class="is-vcentered">
1286
+ <div class="table__color-preview"
1287
+ style="background-color: #e6ebedff;">
1288
+ </div>
1289
+
1290
+ </td>
1291
+ </tr>
1292
+ <tr>
1293
+ <td class="with-icons is-vcentered"
1294
+ id="base-colorsComponentsMenuSummerChildAlt300"
1295
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 300; ">
1296
+ colorsComponentsMenuSummerChildAlt300
1297
+ <a href="#base-colorsComponentsMenuSummerChildAlt300"
1298
+ title="permalink"
1299
+ class="permalink">
1300
+ 🔗
1301
+ </a>
1302
+ </td>
1303
+ <td class="is-vcentered">
1304
+ <pre>#b3c2c9ff</pre>
1305
+ </td>
1306
+ <td class="is-vcentered">
1307
+ <div class="table__color-preview"
1308
+ style="background-color: #b3c2c9ff;">
1309
+ </div>
1310
+
1311
+ </td>
1312
+ </tr>
1313
+ <tr>
1314
+ <td class="with-icons is-vcentered"
1315
+ id="base-colorsComponentsMenuSummerChildAlt400"
1316
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 400; ">
1317
+ colorsComponentsMenuSummerChildAlt400
1318
+ <a href="#base-colorsComponentsMenuSummerChildAlt400"
1319
+ title="permalink"
1320
+ class="permalink">
1321
+ 🔗
1322
+ </a>
1323
+ </td>
1324
+ <td class="is-vcentered">
1325
+ <pre>#ccd6dbff</pre>
1326
+ </td>
1327
+ <td class="is-vcentered">
1328
+ <div class="table__color-preview"
1329
+ style="background-color: #ccd6dbff;">
1330
+ </div>
1331
+
1332
+ </td>
1333
+ </tr>
1124
1334
  <tr>
1125
1335
  <td class="with-icons is-vcentered"
1126
1336
  id="base-colorsComponentsMenuSummerChildAlt500"
@@ -1133,11 +1343,11 @@
1133
1343
  </a>
1134
1344
  </td>
1135
1345
  <td class="is-vcentered">
1136
- <pre>#ccd6dbff</pre>
1346
+ <pre>#d9e0e4ff</pre>
1137
1347
  </td>
1138
1348
  <td class="is-vcentered">
1139
1349
  <div class="table__color-preview"
1140
- style="background-color: #ccd6dbff;">
1350
+ style="background-color: #d9e0e4ff;">
1141
1351
  </div>
1142
1352
 
1143
1353
  </td>
@@ -1163,6 +1373,48 @@
1163
1373
 
1164
1374
  </td>
1165
1375
  </tr>
1376
+ <tr>
1377
+ <td class="with-icons is-vcentered"
1378
+ id="base-colorsComponentsMenuSummerChildAlt700"
1379
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 700; ">
1380
+ colorsComponentsMenuSummerChildAlt700
1381
+ <a href="#base-colorsComponentsMenuSummerChildAlt700"
1382
+ title="permalink"
1383
+ class="permalink">
1384
+ 🔗
1385
+ </a>
1386
+ </td>
1387
+ <td class="is-vcentered">
1388
+ <pre>#d9e0e4ff</pre>
1389
+ </td>
1390
+ <td class="is-vcentered">
1391
+ <div class="table__color-preview"
1392
+ style="background-color: #d9e0e4ff;">
1393
+ </div>
1394
+
1395
+ </td>
1396
+ </tr>
1397
+ <tr>
1398
+ <td class="with-icons is-vcentered"
1399
+ id="base-colorsComponentsMenuSummerChildAlt800"
1400
+ title="theme: base; category: colors; group: components; name: menu; subgroup: summer; element: childAlt; variant: 800; ">
1401
+ colorsComponentsMenuSummerChildAlt800
1402
+ <a href="#base-colorsComponentsMenuSummerChildAlt800"
1403
+ title="permalink"
1404
+ class="permalink">
1405
+ 🔗
1406
+ </a>
1407
+ </td>
1408
+ <td class="is-vcentered">
1409
+ <pre>#d9e0e4ff</pre>
1410
+ </td>
1411
+ <td class="is-vcentered">
1412
+ <div class="table__color-preview"
1413
+ style="background-color: #d9e0e4ff;">
1414
+ </div>
1415
+
1416
+ </td>
1417
+ </tr>
1166
1418
  <tr>
1167
1419
  <td class="with-icons is-vcentered"
1168
1420
  id="base-colorsComponentsMenuAutumnStandard500"
@@ -1259,11 +1511,11 @@
1259
1511
  </a>
1260
1512
  </td>
1261
1513
  <td class="is-vcentered">
1262
- <pre>#001926ff</pre>
1514
+ <pre>#007e45ff</pre>
1263
1515
  </td>
1264
1516
  <td class="is-vcentered">
1265
1517
  <div class="table__color-preview"
1266
- style="background-color: #001926ff;">
1518
+ style="background-color: #007e45ff;">
1267
1519
  </div>
1268
1520
 
1269
1521
  </td>
@@ -1352,6 +1604,27 @@
1352
1604
 
1353
1605
  </td>
1354
1606
  </tr>
1607
+ <tr>
1608
+ <td class="with-icons is-vcentered"
1609
+ id="base-colorsComponentsMenuAutumnChildAlt400"
1610
+ title="theme: base; category: colors; group: components; name: menu; subgroup: autumn; element: childAlt; variant: 400; ">
1611
+ colorsComponentsMenuAutumnChildAlt400
1612
+ <a href="#base-colorsComponentsMenuAutumnChildAlt400"
1613
+ title="permalink"
1614
+ class="permalink">
1615
+ 🔗
1616
+ </a>
1617
+ </td>
1618
+ <td class="is-vcentered">
1619
+ <pre>#19475eff</pre>
1620
+ </td>
1621
+ <td class="is-vcentered">
1622
+ <div class="table__color-preview"
1623
+ style="background-color: #19475eff;">
1624
+ </div>
1625
+
1626
+ </td>
1627
+ </tr>
1355
1628
  <tr>
1356
1629
  <td class="with-icons is-vcentered"
1357
1630
  id="base-colorsComponentsMenuAutumnChildAlt500"
@@ -1490,11 +1763,11 @@
1490
1763
  </a>
1491
1764
  </td>
1492
1765
  <td class="is-vcentered">
1493
- <pre>#000000ff</pre>
1766
+ <pre>#007e45ff</pre>
1494
1767
  </td>
1495
1768
  <td class="is-vcentered">
1496
1769
  <div class="table__color-preview"
1497
- style="background-color: #000000ff;">
1770
+ style="background-color: #007e45ff;">
1498
1771
  </div>
1499
1772
 
1500
1773
  </td>
@@ -1583,6 +1856,27 @@
1583
1856
 
1584
1857
  </td>
1585
1858
  </tr>
1859
+ <tr>
1860
+ <td class="with-icons is-vcentered"
1861
+ id="base-colorsComponentsMenuWinterChildAlt400"
1862
+ title="theme: base; category: colors; group: components; name: menu; subgroup: winter; element: childAlt; variant: 400; ">
1863
+ colorsComponentsMenuWinterChildAlt400
1864
+ <a href="#base-colorsComponentsMenuWinterChildAlt400"
1865
+ title="permalink"
1866
+ class="permalink">
1867
+ 🔗
1868
+ </a>
1869
+ </td>
1870
+ <td class="is-vcentered">
1871
+ <pre>#262626ff</pre>
1872
+ </td>
1873
+ <td class="is-vcentered">
1874
+ <div class="table__color-preview"
1875
+ style="background-color: #262626ff;">
1876
+ </div>
1877
+
1878
+ </td>
1879
+ </tr>
1586
1880
  <tr>
1587
1881
  <td class="with-icons is-vcentered"
1588
1882
  id="base-colorsComponentsMenuWinterChildAlt500"
@@ -1595,11 +1889,11 @@
1595
1889
  </a>
1596
1890
  </td>
1597
1891
  <td class="is-vcentered">
1598
- <pre>#1a1a1aff</pre>
1892
+ <pre>#191919ff</pre>
1599
1893
  </td>
1600
1894
  <td class="is-vcentered">
1601
1895
  <div class="table__color-preview"
1602
- style="background-color: #1a1a1aff;">
1896
+ style="background-color: #191919ff;">
1603
1897
  </div>
1604
1898
 
1605
1899
  </td>
@@ -5606,6 +5900,48 @@
5606
5900
  style="box-shadow: 0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26">
5607
5901
  </div>
5608
5902
 
5903
+ </td>
5904
+ </tr>
5905
+ <tr>
5906
+ <td class="with-icons is-vcentered"
5907
+ id="base-boxShadow090"
5908
+ title="theme: base; category: boxShadow; variant: 090; ">
5909
+ boxShadow090
5910
+ <a href="#base-boxShadow090"
5911
+ title="permalink"
5912
+ class="permalink">
5913
+ 🔗
5914
+ </a>
5915
+ </td>
5916
+ <td class="is-vcentered">
5917
+ <pre>0 4px 8px -4px #00141e1a</pre>
5918
+ </td>
5919
+ <td class="is-vcentered">
5920
+ <div class="table__box-shadow-preview"
5921
+ style="box-shadow: 0 4px 8px -4px #00141e1a">
5922
+ </div>
5923
+
5924
+ </td>
5925
+ </tr>
5926
+ <tr>
5927
+ <td class="with-icons is-vcentered"
5928
+ id="base-boxShadow091"
5929
+ title="theme: base; category: boxShadow; variant: 091; ">
5930
+ boxShadow091
5931
+ <a href="#base-boxShadow091"
5932
+ title="permalink"
5933
+ class="permalink">
5934
+ 🔗
5935
+ </a>
5936
+ </td>
5937
+ <td class="is-vcentered">
5938
+ <pre>4px 0 8px -4px #00141e1a</pre>
5939
+ </td>
5940
+ <td class="is-vcentered">
5941
+ <div class="table__box-shadow-preview"
5942
+ style="box-shadow: 4px 0 8px -4px #00141e1a">
5943
+ </div>
5944
+
5609
5945
  </td>
5610
5946
  </tr>
5611
5947
  </table>
@@ -7121,6 +7457,27 @@
7121
7457
 
7122
7458
  </td>
7123
7459
  </tr>
7460
+ <tr>
7461
+ <td class="with-icons is-vcentered"
7462
+ id="base-typographyMenuLabelL"
7463
+ title="theme: base; category: typography; group: menu; name: label; variant: l; ">
7464
+ typographyMenuLabelL
7465
+ <a href="#base-typographyMenuLabelL"
7466
+ title="permalink"
7467
+ class="permalink">
7468
+ 🔗
7469
+ </a>
7470
+ </td>
7471
+ <td class="is-vcentered">
7472
+ <pre>500 16px/150% Sage UI</pre>
7473
+ </td>
7474
+ <td class="is-vcentered">
7475
+ <div class="table__typography-preview">
7476
+ n/a
7477
+ </div>
7478
+
7479
+ </td>
7480
+ </tr>
7124
7481
  <tr>
7125
7482
  <td class="with-icons is-vcentered"
7126
7483
  id="base-typographyMenuSegmentTitleM"
package/docs/tokens/base/typography/index.html CHANGED
@@ -1482,6 +1482,27 @@
1482
1482
 
1483
1483
  </td>
1484
1484
  </tr>
1485
+ <tr>
1486
+ <td class="with-icons is-vcentered"
1487
+ id="base-typographyMenuLabelL"
1488
+ title="theme: base; category: typography; group: menu; name: label; variant: l; ">
1489
+ typographyMenuLabelL
1490
+ <a href="#base-typographyMenuLabelL"
1491
+ title="permalink"
1492
+ class="permalink">
1493
+ 🔗
1494
+ </a>
1495
+ </td>
1496
+ <td class="is-vcentered">
1497
+ <pre>500 16px/150% Sage UI</pre>
1498
+ </td>
1499
+ <td class="is-vcentered">
1500
+ <div class="table__typography-preview">
1501
+ n/a
1502
+ </div>
1503
+
1504
+ </td>
1505
+ </tr>
1485
1506
  <tr>
1486
1507
  <td class="with-icons is-vcentered"
1487
1508
  id="base-typographyMenuSegmentTitleM"