@sage/design-tokens 2.22.0 → 2.25.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 +9 -8
  2. package/css/base.css +9 -8
  3. package/data/tokens.json +20 -10
  4. package/docs/tokens/base/colors/index.html +8 -8
  5. package/docs/tokens/base/index.html +32 -11
  6. package/docs/tokens/base/sizing/index.html +21 -0
  7. package/docs/tokens/base/typography/index.html +3 -3
  8. package/docs/tokens/index.html +32 -11
  9. package/ios/base.h +9 -8
  10. package/js/base/common.d.ts +1 -0
  11. package/js/base/common.js +9 -8
  12. package/js/base/es6.d.ts +1 -0
  13. package/js/base/es6.js +8 -7
  14. package/package.json +1 -1
  15. package/sage-design-tokens-2.25.0.tgz +0 -0
  16. package/scss/base.scss +9 -8
  17. package/sage-design-tokens-2.22.0.tgz +0 -0
package/android/base.xml CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!--
4
4
  Do not edit directly
5
- Generated on Fri, 22 Apr 2022 14:33:47 GMT
5
+ Generated on Wed, 27 Apr 2022 17:05:47 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -43,12 +43,12 @@
43
43
  <string name="colorsComponentsMenuSpringChildAlt500">#e6ebedff</string>
44
44
  <string name="colorsComponentsMenuSpringChildAlt600">#007e45ff</string>
45
45
  <string name="colorsComponentsMenuSummerStandard400">#ccd6dbff</string>
46
- <string name="colorsComponentsMenuSummerStandard500">#00000000</string>
46
+ <string name="colorsComponentsMenuSummerStandard500">#ffffffff</string>
47
47
  <string name="colorsComponentsMenuSummerStandard600">#007e45ff</string>
48
48
  <string name="colorsComponentsMenuSummerStandard700">#e6ebedff</string>
49
49
  <string name="colorsComponentsMenuSummerStandard800">#e6ebedff</string>
50
50
  <string name="colorsComponentsMenuSummerParent400">#ccd6dbff</string>
51
- <string name="colorsComponentsMenuSummerParent500">#00000000</string>
51
+ <string name="colorsComponentsMenuSummerParent500">#ffffffff</string>
52
52
  <string name="colorsComponentsMenuSummerParent600">#007e45ff</string>
53
53
  <string name="colorsComponentsMenuSummerParent700">#e6ebedff</string>
54
54
  <string name="colorsComponentsMenuSummerParent800">#e6ebedff</string>
@@ -77,12 +77,12 @@
77
77
  <string name="colorsComponentsMenuAutumnChildAlt500">#00324cff</string>
78
78
  <string name="colorsComponentsMenuAutumnChildAlt600">#007e45ff</string>
79
79
  <string name="colorsComponentsMenuWinterStandard400">#4d4d4dff</string>
80
- <string name="colorsComponentsMenuWinterStandard500">#00000000</string>
80
+ <string name="colorsComponentsMenuWinterStandard500">#000000ff</string>
81
81
  <string name="colorsComponentsMenuWinterStandard600">#007e45ff</string>
82
82
  <string name="colorsComponentsMenuWinterStandard700">#262626ff</string>
83
83
  <string name="colorsComponentsMenuWinterStandard800">#262626ff</string>
84
84
  <string name="colorsComponentsMenuWinterParent400">#4d4d4dff</string>
85
- <string name="colorsComponentsMenuWinterParent500">#00000000</string>
85
+ <string name="colorsComponentsMenuWinterParent500">#000000ff</string>
86
86
  <string name="colorsComponentsMenuWinterParent600">#007e45ff</string>
87
87
  <string name="colorsComponentsMenuWinterParent700">#262626ff</string>
88
88
  <string name="colorsComponentsMenuWinterParent800">#262626ff</string>
@@ -233,6 +233,7 @@
233
233
  <string name="sizing800">64px</string>
234
234
  <string name="sizing900">72px</string>
235
235
  <string name="sizing1000">80px</string>
236
+ <string name="sizing1200">96px</string>
236
237
  <string name="sizing1300">104px</string>
237
238
  <string name="sizing1600">128px</string>
238
239
  <string name="sizing010">1px</string>
@@ -305,9 +306,9 @@
305
306
  <string name="typographyActionPopoverMenuItemM">Bold 14px/150% Sage UI</string>
306
307
  <string name="typographyAnchorNavLabelM">Medium 14px/150% Sage UI</string>
307
308
  <string name="typographyBadgeLabelM">Medium 12px/150% Sage UI</string>
308
- <string name="typographyButtonLabelS">Bold 14px/150% Sage UI</string>
309
- <string name="typographyButtonLabelM">Bold 14px/150% Sage UI</string>
310
- <string name="typographyButtonLabelL">Bold 16px/150% Sage UI</string>
309
+ <string name="typographyButtonLabelS">Medium 14px/150% Sage UI</string>
310
+ <string name="typographyButtonLabelM">Medium 14px/150% Sage UI</string>
311
+ <string name="typographyButtonLabelL">Medium 16px/150% Sage UI</string>
311
312
  <string name="typographyCardParagraphM">Regular 14px/150% Sage UI</string>
312
313
  <string name="typographyCardSelectTitleM">Bold 16px/150% Sage UI</string>
313
314
  <string name="typographyCardSelectSubtitleM">Medium 14px/150% Sage UI</string>
package/css/base.css CHANGED
@@ -4,7 +4,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
4
4
 
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Fri, 22 Apr 2022 14:33:47 GMT
7
+ * Generated on Wed, 27 Apr 2022 17:05:47 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -46,12 +46,12 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
46
46
  --colorsComponentsMenuSpringChildAlt500: #e6ebedff;
47
47
  --colorsComponentsMenuSpringChildAlt600: #007e45ff;
48
48
  --colorsComponentsMenuSummerStandard400: #ccd6dbff;
49
- --colorsComponentsMenuSummerStandard500: #00000000;
49
+ --colorsComponentsMenuSummerStandard500: #ffffffff;
50
50
  --colorsComponentsMenuSummerStandard600: #007e45ff;
51
51
  --colorsComponentsMenuSummerStandard700: #e6ebedff;
52
52
  --colorsComponentsMenuSummerStandard800: #e6ebedff;
53
53
  --colorsComponentsMenuSummerParent400: #ccd6dbff;
54
- --colorsComponentsMenuSummerParent500: #00000000;
54
+ --colorsComponentsMenuSummerParent500: #ffffffff;
55
55
  --colorsComponentsMenuSummerParent600: #007e45ff;
56
56
  --colorsComponentsMenuSummerParent700: #e6ebedff;
57
57
  --colorsComponentsMenuSummerParent800: #e6ebedff;
@@ -80,12 +80,12 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
80
80
  --colorsComponentsMenuAutumnChildAlt500: #00324cff;
81
81
  --colorsComponentsMenuAutumnChildAlt600: #007e45ff;
82
82
  --colorsComponentsMenuWinterStandard400: #4d4d4dff;
83
- --colorsComponentsMenuWinterStandard500: #00000000;
83
+ --colorsComponentsMenuWinterStandard500: #000000ff;
84
84
  --colorsComponentsMenuWinterStandard600: #007e45ff;
85
85
  --colorsComponentsMenuWinterStandard700: #262626ff;
86
86
  --colorsComponentsMenuWinterStandard800: #262626ff;
87
87
  --colorsComponentsMenuWinterParent400: #4d4d4dff;
88
- --colorsComponentsMenuWinterParent500: #00000000;
88
+ --colorsComponentsMenuWinterParent500: #000000ff;
89
89
  --colorsComponentsMenuWinterParent600: #007e45ff;
90
90
  --colorsComponentsMenuWinterParent700: #262626ff;
91
91
  --colorsComponentsMenuWinterParent800: #262626ff;
@@ -236,6 +236,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
236
236
  --sizing800: 64px;
237
237
  --sizing900: 72px;
238
238
  --sizing1000: 80px;
239
+ --sizing1200: 96px;
239
240
  --sizing1300: 104px;
240
241
  --sizing1600: 128px;
241
242
  --sizing010: 1px;
@@ -308,9 +309,9 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
308
309
  --typographyActionPopoverMenuItemM: 700 14px/150% Sage UI;
309
310
  --typographyAnchorNavLabelM: 500 14px/150% Sage UI;
310
311
  --typographyBadgeLabelM: 500 12px/150% Sage UI;
311
- --typographyButtonLabelS: 700 14px/150% Sage UI;
312
- --typographyButtonLabelM: 700 14px/150% Sage UI;
313
- --typographyButtonLabelL: 700 16px/150% Sage UI;
312
+ --typographyButtonLabelS: 500 14px/150% Sage UI;
313
+ --typographyButtonLabelM: 500 14px/150% Sage UI;
314
+ --typographyButtonLabelL: 500 16px/150% Sage UI;
314
315
  --typographyCardParagraphM: 400 14px/150% Sage UI;
315
316
  --typographyCardSelectTitleM: 700 16px/150% Sage UI;
316
317
  --typographyCardSelectSubtitleM: 500 14px/150% Sage UI;
package/data/tokens.json CHANGED
@@ -204,7 +204,7 @@
204
204
  "description": "selected menu button border"
205
205
  },
206
206
  "500": {
207
- "value": "#00000000",
207
+ "value": "#ffffffff",
208
208
  "type": "color",
209
209
  "description": "default menu button (to sit on colors.gray.000 nav bar)"
210
210
  },
@@ -231,7 +231,7 @@
231
231
  "description": "selected menu button border (on parent with clickable action)"
232
232
  },
233
233
  "500": {
234
- "value": "#00000000",
234
+ "value": "#ffffffff",
235
235
  "type": "color",
236
236
  "description": "default menu button (to sit on colors.gray.000 nav bar)"
237
237
  },
@@ -385,7 +385,7 @@
385
385
  "description": "selected menu button border"
386
386
  },
387
387
  "500": {
388
- "value": "#00000000",
388
+ "value": "#000000ff",
389
389
  "type": "color",
390
390
  "description": "default menu button (to sit on colors.gray.1000 nav bar)"
391
391
  },
@@ -412,7 +412,7 @@
412
412
  "description": "selected menu button border (for parent with clickable action)"
413
413
  },
414
414
  "500": {
415
- "value": "#00000000",
415
+ "value": "#000000ff",
416
416
  "type": "color",
417
417
  "description": "default menu button (to sit on colors.gray.1000 nav bar)"
418
418
  },
@@ -1148,6 +1148,10 @@
1148
1148
  "value": "80px",
1149
1149
  "type": "sizing"
1150
1150
  },
1151
+ "1200": {
1152
+ "value": "96px",
1153
+ "type": "sizing"
1154
+ },
1151
1155
  "1300": {
1152
1156
  "value": "104px",
1153
1157
  "type": "sizing"
@@ -1659,33 +1663,39 @@
1659
1663
  "s": {
1660
1664
  "value": {
1661
1665
  "fontFamily": "Sage UI",
1662
- "fontWeight": "Bold",
1666
+ "fontWeight": "Medium",
1663
1667
  "lineHeight": "150%",
1664
1668
  "fontSize": "14px",
1665
1669
  "letterSpacing": "0%",
1666
- "paragraphSpacing": "0px"
1670
+ "paragraphSpacing": "0px",
1671
+ "textDecoration": "none",
1672
+ "textCase": "none"
1667
1673
  },
1668
1674
  "type": "typography"
1669
1675
  },
1670
1676
  "m": {
1671
1677
  "value": {
1672
1678
  "fontFamily": "Sage UI",
1673
- "fontWeight": "Bold",
1679
+ "fontWeight": "Medium",
1674
1680
  "lineHeight": "150%",
1675
1681
  "fontSize": "14px",
1676
1682
  "letterSpacing": "0%",
1677
- "paragraphSpacing": "0px"
1683
+ "paragraphSpacing": "0px",
1684
+ "textDecoration": "none",
1685
+ "textCase": "none"
1678
1686
  },
1679
1687
  "type": "typography"
1680
1688
  },
1681
1689
  "l": {
1682
1690
  "value": {
1683
1691
  "fontFamily": "Sage UI",
1684
- "fontWeight": "Bold",
1692
+ "fontWeight": "Medium",
1685
1693
  "lineHeight": "150%",
1686
1694
  "fontSize": "16px",
1687
1695
  "letterSpacing": "0%",
1688
- "paragraphSpacing": "0px"
1696
+ "paragraphSpacing": "0px",
1697
+ "textDecoration": "none",
1698
+ "textCase": "none"
1689
1699
  },
1690
1700
  "type": "typography"
1691
1701
  }
package/docs/tokens/base/colors/index.html CHANGED
@@ -1053,11 +1053,11 @@
1053
1053
  </a>
1054
1054
  </td>
1055
1055
  <td class="is-vcentered">
1056
- <pre>#00000000</pre>
1056
+ <pre>#ffffffff</pre>
1057
1057
  </td>
1058
1058
  <td class="is-vcentered">
1059
1059
  <div class="table__color-preview"
1060
- style="background-color: #00000000;">
1060
+ style="background-color: #ffffffff;">
1061
1061
  </div>
1062
1062
 
1063
1063
  </td>
@@ -1158,11 +1158,11 @@
1158
1158
  </a>
1159
1159
  </td>
1160
1160
  <td class="is-vcentered">
1161
- <pre>#00000000</pre>
1161
+ <pre>#ffffffff</pre>
1162
1162
  </td>
1163
1163
  <td class="is-vcentered">
1164
1164
  <div class="table__color-preview"
1165
- style="background-color: #00000000;">
1165
+ style="background-color: #ffffffff;">
1166
1166
  </div>
1167
1167
 
1168
1168
  </td>
@@ -1767,11 +1767,11 @@
1767
1767
  </a>
1768
1768
  </td>
1769
1769
  <td class="is-vcentered">
1770
- <pre>#00000000</pre>
1770
+ <pre>#000000ff</pre>
1771
1771
  </td>
1772
1772
  <td class="is-vcentered">
1773
1773
  <div class="table__color-preview"
1774
- style="background-color: #00000000;">
1774
+ style="background-color: #000000ff;">
1775
1775
  </div>
1776
1776
 
1777
1777
  </td>
@@ -1872,11 +1872,11 @@
1872
1872
  </a>
1873
1873
  </td>
1874
1874
  <td class="is-vcentered">
1875
- <pre>#00000000</pre>
1875
+ <pre>#000000ff</pre>
1876
1876
  </td>
1877
1877
  <td class="is-vcentered">
1878
1878
  <div class="table__color-preview"
1879
- style="background-color: #00000000;">
1879
+ style="background-color: #000000ff;">
1880
1880
  </div>
1881
1881
 
1882
1882
  </td>
package/docs/tokens/base/index.html CHANGED
@@ -1049,11 +1049,11 @@
1049
1049
  </a>
1050
1050
  </td>
1051
1051
  <td class="is-vcentered">
1052
- <pre>#00000000</pre>
1052
+ <pre>#ffffffff</pre>
1053
1053
  </td>
1054
1054
  <td class="is-vcentered">
1055
1055
  <div class="table__color-preview"
1056
- style="background-color: #00000000;">
1056
+ style="background-color: #ffffffff;">
1057
1057
  </div>
1058
1058
 
1059
1059
  </td>
@@ -1154,11 +1154,11 @@
1154
1154
  </a>
1155
1155
  </td>
1156
1156
  <td class="is-vcentered">
1157
- <pre>#00000000</pre>
1157
+ <pre>#ffffffff</pre>
1158
1158
  </td>
1159
1159
  <td class="is-vcentered">
1160
1160
  <div class="table__color-preview"
1161
- style="background-color: #00000000;">
1161
+ style="background-color: #ffffffff;">
1162
1162
  </div>
1163
1163
 
1164
1164
  </td>
@@ -1763,11 +1763,11 @@
1763
1763
  </a>
1764
1764
  </td>
1765
1765
  <td class="is-vcentered">
1766
- <pre>#00000000</pre>
1766
+ <pre>#000000ff</pre>
1767
1767
  </td>
1768
1768
  <td class="is-vcentered">
1769
1769
  <div class="table__color-preview"
1770
- style="background-color: #00000000;">
1770
+ style="background-color: #000000ff;">
1771
1771
  </div>
1772
1772
 
1773
1773
  </td>
@@ -1868,11 +1868,11 @@
1868
1868
  </a>
1869
1869
  </td>
1870
1870
  <td class="is-vcentered">
1871
- <pre>#00000000</pre>
1871
+ <pre>#000000ff</pre>
1872
1872
  </td>
1873
1873
  <td class="is-vcentered">
1874
1874
  <div class="table__color-preview"
1875
- style="background-color: #00000000;">
1875
+ style="background-color: #000000ff;">
1876
1876
  </div>
1877
1877
 
1878
1878
  </td>
@@ -5044,6 +5044,27 @@
5044
5044
 
5045
5045
  </td>
5046
5046
  </tr>
5047
+ <tr>
5048
+ <td class="with-icons is-vcentered"
5049
+ id="base-sizing1200"
5050
+ title="theme: base; category: sizing; variant: 1200; ">
5051
+ sizing1200
5052
+ <a href="#base-sizing1200"
5053
+ title="permalink"
5054
+ class="permalink">
5055
+ 🔗
5056
+ </a>
5057
+ </td>
5058
+ <td class="is-vcentered">
5059
+ <pre>96px</pre>
5060
+ </td>
5061
+ <td class="is-vcentered">
5062
+ <div class="table__sizing-preview"
5063
+ style="width: 96px; height: 96px">
5064
+ </div>
5065
+
5066
+ </td>
5067
+ </tr>
5047
5068
  <tr>
5048
5069
  <td class="with-icons is-vcentered"
5049
5070
  id="base-sizing1300"
@@ -6734,7 +6755,7 @@
6734
6755
  </a>
6735
6756
  </td>
6736
6757
  <td class="is-vcentered">
6737
- <pre>700 14px/150% Sage UI</pre>
6758
+ <pre>500 14px/150% Sage UI</pre>
6738
6759
  </td>
6739
6760
  <td class="is-vcentered">
6740
6761
  <div class="table__typography-preview">
@@ -6755,7 +6776,7 @@
6755
6776
  </a>
6756
6777
  </td>
6757
6778
  <td class="is-vcentered">
6758
- <pre>700 14px/150% Sage UI</pre>
6779
+ <pre>500 14px/150% Sage UI</pre>
6759
6780
  </td>
6760
6781
  <td class="is-vcentered">
6761
6782
  <div class="table__typography-preview">
@@ -6776,7 +6797,7 @@
6776
6797
  </a>
6777
6798
  </td>
6778
6799
  <td class="is-vcentered">
6779
- <pre>700 16px/150% Sage UI</pre>
6800
+ <pre>500 16px/150% Sage UI</pre>
6780
6801
  </td>
6781
6802
  <td class="is-vcentered">
6782
6803
  <div class="table__typography-preview">
package/docs/tokens/base/sizing/index.html CHANGED
@@ -684,6 +684,27 @@
684
684
 
685
685
  </td>
686
686
  </tr>
687
+ <tr>
688
+ <td class="with-icons is-vcentered"
689
+ id="base-sizing1200"
690
+ title="theme: base; category: sizing; variant: 1200; ">
691
+ sizing1200
692
+ <a href="#base-sizing1200"
693
+ title="permalink"
694
+ class="permalink">
695
+ 🔗
696
+ </a>
697
+ </td>
698
+ <td class="is-vcentered">
699
+ <pre>96px</pre>
700
+ </td>
701
+ <td class="is-vcentered">
702
+ <div class="table__sizing-preview"
703
+ style="width: 96px; height: 96px">
704
+ </div>
705
+
706
+ </td>
707
+ </tr>
687
708
  <tr>
688
709
  <td class="with-icons is-vcentered"
689
710
  id="base-sizing1300"
package/docs/tokens/base/typography/index.html CHANGED
@@ -423,7 +423,7 @@
423
423
  </a>
424
424
  </td>
425
425
  <td class="is-vcentered">
426
- <pre>700 14px/150% Sage UI</pre>
426
+ <pre>500 14px/150% Sage UI</pre>
427
427
  </td>
428
428
  <td class="is-vcentered">
429
429
  <div class="table__typography-preview">
@@ -444,7 +444,7 @@
444
444
  </a>
445
445
  </td>
446
446
  <td class="is-vcentered">
447
- <pre>700 14px/150% Sage UI</pre>
447
+ <pre>500 14px/150% Sage UI</pre>
448
448
  </td>
449
449
  <td class="is-vcentered">
450
450
  <div class="table__typography-preview">
@@ -465,7 +465,7 @@
465
465
  </a>
466
466
  </td>
467
467
  <td class="is-vcentered">
468
- <pre>700 16px/150% Sage UI</pre>
468
+ <pre>500 16px/150% Sage UI</pre>
469
469
  </td>
470
470
  <td class="is-vcentered">
471
471
  <div class="table__typography-preview">
package/docs/tokens/index.html CHANGED
@@ -1055,11 +1055,11 @@
1055
1055
  </a>
1056
1056
  </td>
1057
1057
  <td class="is-vcentered">
1058
- <pre>#00000000</pre>
1058
+ <pre>#ffffffff</pre>
1059
1059
  </td>
1060
1060
  <td class="is-vcentered">
1061
1061
  <div class="table__color-preview"
1062
- style="background-color: #00000000;">
1062
+ style="background-color: #ffffffff;">
1063
1063
  </div>
1064
1064
 
1065
1065
  </td>
@@ -1160,11 +1160,11 @@
1160
1160
  </a>
1161
1161
  </td>
1162
1162
  <td class="is-vcentered">
1163
- <pre>#00000000</pre>
1163
+ <pre>#ffffffff</pre>
1164
1164
  </td>
1165
1165
  <td class="is-vcentered">
1166
1166
  <div class="table__color-preview"
1167
- style="background-color: #00000000;">
1167
+ style="background-color: #ffffffff;">
1168
1168
  </div>
1169
1169
 
1170
1170
  </td>
@@ -1769,11 +1769,11 @@
1769
1769
  </a>
1770
1770
  </td>
1771
1771
  <td class="is-vcentered">
1772
- <pre>#00000000</pre>
1772
+ <pre>#000000ff</pre>
1773
1773
  </td>
1774
1774
  <td class="is-vcentered">
1775
1775
  <div class="table__color-preview"
1776
- style="background-color: #00000000;">
1776
+ style="background-color: #000000ff;">
1777
1777
  </div>
1778
1778
 
1779
1779
  </td>
@@ -1874,11 +1874,11 @@
1874
1874
  </a>
1875
1875
  </td>
1876
1876
  <td class="is-vcentered">
1877
- <pre>#00000000</pre>
1877
+ <pre>#000000ff</pre>
1878
1878
  </td>
1879
1879
  <td class="is-vcentered">
1880
1880
  <div class="table__color-preview"
1881
- style="background-color: #00000000;">
1881
+ style="background-color: #000000ff;">
1882
1882
  </div>
1883
1883
 
1884
1884
  </td>
@@ -5055,6 +5055,27 @@
5055
5055
 
5056
5056
  </td>
5057
5057
  </tr>
5058
+ <tr>
5059
+ <td class="with-icons is-vcentered"
5060
+ id="base-sizing1200"
5061
+ title="theme: base; category: sizing; variant: 1200; ">
5062
+ sizing1200
5063
+ <a href="#base-sizing1200"
5064
+ title="permalink"
5065
+ class="permalink">
5066
+ 🔗
5067
+ </a>
5068
+ </td>
5069
+ <td class="is-vcentered">
5070
+ <pre>96px</pre>
5071
+ </td>
5072
+ <td class="is-vcentered">
5073
+ <div class="table__sizing-preview"
5074
+ style="width: 96px; height: 96px">
5075
+ </div>
5076
+
5077
+ </td>
5078
+ </tr>
5058
5079
  <tr>
5059
5080
  <td class="with-icons is-vcentered"
5060
5081
  id="base-sizing1300"
@@ -6790,7 +6811,7 @@
6790
6811
  </a>
6791
6812
  </td>
6792
6813
  <td class="is-vcentered">
6793
- <pre>700 14px/150% Sage UI</pre>
6814
+ <pre>500 14px/150% Sage UI</pre>
6794
6815
  </td>
6795
6816
  <td class="is-vcentered">
6796
6817
  <div class="table__typography-preview">
@@ -6811,7 +6832,7 @@
6811
6832
  </a>
6812
6833
  </td>
6813
6834
  <td class="is-vcentered">
6814
- <pre>700 14px/150% Sage UI</pre>
6835
+ <pre>500 14px/150% Sage UI</pre>
6815
6836
  </td>
6816
6837
  <td class="is-vcentered">
6817
6838
  <div class="table__typography-preview">
@@ -6832,7 +6853,7 @@
6832
6853
  </a>
6833
6854
  </td>
6834
6855
  <td class="is-vcentered">
6835
- <pre>700 16px/150% Sage UI</pre>
6856
+ <pre>500 16px/150% Sage UI</pre>
6836
6857
  </td>
6837
6858
  <td class="is-vcentered">
6838
6859
  <div class="table__typography-preview">
package/ios/base.h CHANGED
@@ -4,7 +4,7 @@
4
4
  //
5
5
 
6
6
  // Do not edit directly
7
- // Generated on Fri, 22 Apr 2022 14:33:47 GMT
7
+ // Generated on Wed, 27 Apr 2022 17:05:47 GMT
8
8
 
9
9
 
10
10
  #import <Foundation/Foundation.h>
@@ -48,12 +48,12 @@
48
48
  #define colorsComponentsMenuSpringChildAlt500 #e6ebedff
49
49
  #define colorsComponentsMenuSpringChildAlt600 #007e45ff
50
50
  #define colorsComponentsMenuSummerStandard400 #ccd6dbff
51
- #define colorsComponentsMenuSummerStandard500 #00000000
51
+ #define colorsComponentsMenuSummerStandard500 #ffffffff
52
52
  #define colorsComponentsMenuSummerStandard600 #007e45ff
53
53
  #define colorsComponentsMenuSummerStandard700 #e6ebedff
54
54
  #define colorsComponentsMenuSummerStandard800 #e6ebedff
55
55
  #define colorsComponentsMenuSummerParent400 #ccd6dbff
56
- #define colorsComponentsMenuSummerParent500 #00000000
56
+ #define colorsComponentsMenuSummerParent500 #ffffffff
57
57
  #define colorsComponentsMenuSummerParent600 #007e45ff
58
58
  #define colorsComponentsMenuSummerParent700 #e6ebedff
59
59
  #define colorsComponentsMenuSummerParent800 #e6ebedff
@@ -82,12 +82,12 @@
82
82
  #define colorsComponentsMenuAutumnChildAlt500 #00324cff
83
83
  #define colorsComponentsMenuAutumnChildAlt600 #007e45ff
84
84
  #define colorsComponentsMenuWinterStandard400 #4d4d4dff
85
- #define colorsComponentsMenuWinterStandard500 #00000000
85
+ #define colorsComponentsMenuWinterStandard500 #000000ff
86
86
  #define colorsComponentsMenuWinterStandard600 #007e45ff
87
87
  #define colorsComponentsMenuWinterStandard700 #262626ff
88
88
  #define colorsComponentsMenuWinterStandard800 #262626ff
89
89
  #define colorsComponentsMenuWinterParent400 #4d4d4dff
90
- #define colorsComponentsMenuWinterParent500 #00000000
90
+ #define colorsComponentsMenuWinterParent500 #000000ff
91
91
  #define colorsComponentsMenuWinterParent600 #007e45ff
92
92
  #define colorsComponentsMenuWinterParent700 #262626ff
93
93
  #define colorsComponentsMenuWinterParent800 #262626ff
@@ -238,6 +238,7 @@
238
238
  #define sizing800 64px
239
239
  #define sizing900 72px
240
240
  #define sizing1000 80px
241
+ #define sizing1200 96px
241
242
  #define sizing1300 104px
242
243
  #define sizing1600 128px
243
244
  #define sizing010 1px
@@ -310,9 +311,9 @@
310
311
  #define typographyActionPopoverMenuItemM Bold 14px/150% Sage UI
311
312
  #define typographyAnchorNavLabelM Medium 14px/150% Sage UI
312
313
  #define typographyBadgeLabelM Medium 12px/150% Sage UI
313
- #define typographyButtonLabelS Bold 14px/150% Sage UI
314
- #define typographyButtonLabelM Bold 14px/150% Sage UI
315
- #define typographyButtonLabelL Bold 16px/150% Sage UI
314
+ #define typographyButtonLabelS Medium 14px/150% Sage UI
315
+ #define typographyButtonLabelM Medium 14px/150% Sage UI
316
+ #define typographyButtonLabelL Medium 16px/150% Sage UI
316
317
  #define typographyCardParagraphM Regular 14px/150% Sage UI
317
318
  #define typographyCardSelectTitleM Bold 16px/150% Sage UI
318
319
  #define typographyCardSelectSubtitleM Medium 14px/150% Sage UI
package/js/base/common.d.ts CHANGED
@@ -226,6 +226,7 @@ export const sizing700: string;
226
226
  export const sizing800: string;
227
227
  export const sizing900: string;
228
228
  export const sizing1000: string;
229
+ export const sizing1200: string;
229
230
  export const sizing1300: string;
230
231
  export const sizing1600: string;
231
232
  export const sizing010: string;
package/js/base/common.js CHANGED
@@ -4,7 +4,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
4
4
 
5
5
  /**
6
6
  * Do not edit directly
7
- * Generated on Fri, 22 Apr 2022 14:33:47 GMT
7
+ * Generated on Wed, 27 Apr 2022 17:05:47 GMT
8
8
  */
9
9
 
10
10
  module.exports = {
@@ -46,12 +46,12 @@ module.exports = {
46
46
  colorsComponentsMenuSpringChildAlt500: '#e6ebedff',
47
47
  colorsComponentsMenuSpringChildAlt600: '#007e45ff',
48
48
  colorsComponentsMenuSummerStandard400: '#ccd6dbff',
49
- colorsComponentsMenuSummerStandard500: '#00000000',
49
+ colorsComponentsMenuSummerStandard500: '#ffffffff',
50
50
  colorsComponentsMenuSummerStandard600: '#007e45ff',
51
51
  colorsComponentsMenuSummerStandard700: '#e6ebedff',
52
52
  colorsComponentsMenuSummerStandard800: '#e6ebedff',
53
53
  colorsComponentsMenuSummerParent400: '#ccd6dbff',
54
- colorsComponentsMenuSummerParent500: '#00000000',
54
+ colorsComponentsMenuSummerParent500: '#ffffffff',
55
55
  colorsComponentsMenuSummerParent600: '#007e45ff',
56
56
  colorsComponentsMenuSummerParent700: '#e6ebedff',
57
57
  colorsComponentsMenuSummerParent800: '#e6ebedff',
@@ -80,12 +80,12 @@ module.exports = {
80
80
  colorsComponentsMenuAutumnChildAlt500: '#00324cff',
81
81
  colorsComponentsMenuAutumnChildAlt600: '#007e45ff',
82
82
  colorsComponentsMenuWinterStandard400: '#4d4d4dff',
83
- colorsComponentsMenuWinterStandard500: '#00000000',
83
+ colorsComponentsMenuWinterStandard500: '#000000ff',
84
84
  colorsComponentsMenuWinterStandard600: '#007e45ff',
85
85
  colorsComponentsMenuWinterStandard700: '#262626ff',
86
86
  colorsComponentsMenuWinterStandard800: '#262626ff',
87
87
  colorsComponentsMenuWinterParent400: '#4d4d4dff',
88
- colorsComponentsMenuWinterParent500: '#00000000',
88
+ colorsComponentsMenuWinterParent500: '#000000ff',
89
89
  colorsComponentsMenuWinterParent600: '#007e45ff',
90
90
  colorsComponentsMenuWinterParent700: '#262626ff',
91
91
  colorsComponentsMenuWinterParent800: '#262626ff',
@@ -236,6 +236,7 @@ module.exports = {
236
236
  sizing800: '64px',
237
237
  sizing900: '72px',
238
238
  sizing1000: '80px',
239
+ sizing1200: '96px',
239
240
  sizing1300: '104px',
240
241
  sizing1600: '128px',
241
242
  sizing010: '1px',
@@ -308,9 +309,9 @@ module.exports = {
308
309
  typographyActionPopoverMenuItemM: '700 14px/150% Sage UI',
309
310
  typographyAnchorNavLabelM: '500 14px/150% Sage UI',
310
311
  typographyBadgeLabelM: '500 12px/150% Sage UI',
311
- typographyButtonLabelS: '700 14px/150% Sage UI',
312
- typographyButtonLabelM: '700 14px/150% Sage UI',
313
- typographyButtonLabelL: '700 16px/150% Sage UI',
312
+ typographyButtonLabelS: '500 14px/150% Sage UI',
313
+ typographyButtonLabelM: '500 14px/150% Sage UI',
314
+ typographyButtonLabelL: '500 16px/150% Sage UI',
314
315
  typographyCardParagraphM: '400 14px/150% Sage UI',
315
316
  typographyCardSelectTitleM: '700 16px/150% Sage UI',
316
317
  typographyCardSelectSubtitleM: '500 14px/150% Sage UI',
package/js/base/es6.d.ts CHANGED
@@ -227,6 +227,7 @@ declare namespace _default {
227
227
  const sizing800: string;
228
228
  const sizing900: string;
229
229
  const sizing1000: string;
230
+ const sizing1200: string;
230
231
  const sizing1300: string;
231
232
  const sizing1600: string;
232
233
  const sizing010: string;
package/js/base/es6.js CHANGED
@@ -41,12 +41,12 @@ export default {
41
41
  colorsComponentsMenuSpringChildAlt500: '#e6ebedff',
42
42
  colorsComponentsMenuSpringChildAlt600: '#007e45ff',
43
43
  colorsComponentsMenuSummerStandard400: '#ccd6dbff',
44
- colorsComponentsMenuSummerStandard500: '#00000000',
44
+ colorsComponentsMenuSummerStandard500: '#ffffffff',
45
45
  colorsComponentsMenuSummerStandard600: '#007e45ff',
46
46
  colorsComponentsMenuSummerStandard700: '#e6ebedff',
47
47
  colorsComponentsMenuSummerStandard800: '#e6ebedff',
48
48
  colorsComponentsMenuSummerParent400: '#ccd6dbff',
49
- colorsComponentsMenuSummerParent500: '#00000000',
49
+ colorsComponentsMenuSummerParent500: '#ffffffff',
50
50
  colorsComponentsMenuSummerParent600: '#007e45ff',
51
51
  colorsComponentsMenuSummerParent700: '#e6ebedff',
52
52
  colorsComponentsMenuSummerParent800: '#e6ebedff',
@@ -75,12 +75,12 @@ export default {
75
75
  colorsComponentsMenuAutumnChildAlt500: '#00324cff',
76
76
  colorsComponentsMenuAutumnChildAlt600: '#007e45ff',
77
77
  colorsComponentsMenuWinterStandard400: '#4d4d4dff',
78
- colorsComponentsMenuWinterStandard500: '#00000000',
78
+ colorsComponentsMenuWinterStandard500: '#000000ff',
79
79
  colorsComponentsMenuWinterStandard600: '#007e45ff',
80
80
  colorsComponentsMenuWinterStandard700: '#262626ff',
81
81
  colorsComponentsMenuWinterStandard800: '#262626ff',
82
82
  colorsComponentsMenuWinterParent400: '#4d4d4dff',
83
- colorsComponentsMenuWinterParent500: '#00000000',
83
+ colorsComponentsMenuWinterParent500: '#000000ff',
84
84
  colorsComponentsMenuWinterParent600: '#007e45ff',
85
85
  colorsComponentsMenuWinterParent700: '#262626ff',
86
86
  colorsComponentsMenuWinterParent800: '#262626ff',
@@ -231,6 +231,7 @@ export default {
231
231
  sizing800: '64px',
232
232
  sizing900: '72px',
233
233
  sizing1000: '80px',
234
+ sizing1200: '96px',
234
235
  sizing1300: '104px',
235
236
  sizing1600: '128px',
236
237
  sizing010: '1px',
@@ -303,9 +304,9 @@ export default {
303
304
  typographyActionPopoverMenuItemM: '700 14px/150% Sage UI',
304
305
  typographyAnchorNavLabelM: '500 14px/150% Sage UI',
305
306
  typographyBadgeLabelM: '500 12px/150% Sage UI',
306
- typographyButtonLabelS: '700 14px/150% Sage UI',
307
- typographyButtonLabelM: '700 14px/150% Sage UI',
308
- typographyButtonLabelL: '700 16px/150% Sage UI',
307
+ typographyButtonLabelS: '500 14px/150% Sage UI',
308
+ typographyButtonLabelM: '500 14px/150% Sage UI',
309
+ typographyButtonLabelL: '500 16px/150% Sage UI',
309
310
  typographyCardParagraphM: '400 14px/150% Sage UI',
310
311
  typographyCardSelectTitleM: '700 16px/150% Sage UI',
311
312
  typographyCardSelectSubtitleM: '500 14px/150% Sage UI',
package/package.json CHANGED
@@ -10,7 +10,7 @@
10
10
  },
11
11
  "description": "Design tokens for the Sage Design System.",
12
12
  "author": "The Sage Group plc",
13
- "version": "2.22.0",
13
+ "version": "2.25.0",
14
14
  "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
15
15
  "tags": [
16
16
  "design tokens",
package/sage-design-tokens-2.25.0.tgz ADDED
Binary file
package/scss/base.scss CHANGED
@@ -4,7 +4,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
4
4
 
5
5
 
6
6
  // Do not edit directly
7
- // Generated on Fri, 22 Apr 2022 14:33:47 GMT
7
+ // Generated on Wed, 27 Apr 2022 17:05:47 GMT
8
8
 
9
9
  $metaName: Base Theme;
10
10
  $metaPublic: true;
@@ -44,12 +44,12 @@ $colorsComponentsMenuSpringChildAlt400: #ccd6dbff;
44
44
  $colorsComponentsMenuSpringChildAlt500: #e6ebedff;
45
45
  $colorsComponentsMenuSpringChildAlt600: #007e45ff;
46
46
  $colorsComponentsMenuSummerStandard400: #ccd6dbff;
47
- $colorsComponentsMenuSummerStandard500: #00000000;
47
+ $colorsComponentsMenuSummerStandard500: #ffffffff;
48
48
  $colorsComponentsMenuSummerStandard600: #007e45ff;
49
49
  $colorsComponentsMenuSummerStandard700: #e6ebedff;
50
50
  $colorsComponentsMenuSummerStandard800: #e6ebedff;
51
51
  $colorsComponentsMenuSummerParent400: #ccd6dbff;
52
- $colorsComponentsMenuSummerParent500: #00000000;
52
+ $colorsComponentsMenuSummerParent500: #ffffffff;
53
53
  $colorsComponentsMenuSummerParent600: #007e45ff;
54
54
  $colorsComponentsMenuSummerParent700: #e6ebedff;
55
55
  $colorsComponentsMenuSummerParent800: #e6ebedff;
@@ -78,12 +78,12 @@ $colorsComponentsMenuAutumnChildAlt400: #19475eff;
78
78
  $colorsComponentsMenuAutumnChildAlt500: #00324cff;
79
79
  $colorsComponentsMenuAutumnChildAlt600: #007e45ff;
80
80
  $colorsComponentsMenuWinterStandard400: #4d4d4dff;
81
- $colorsComponentsMenuWinterStandard500: #00000000;
81
+ $colorsComponentsMenuWinterStandard500: #000000ff;
82
82
  $colorsComponentsMenuWinterStandard600: #007e45ff;
83
83
  $colorsComponentsMenuWinterStandard700: #262626ff;
84
84
  $colorsComponentsMenuWinterStandard800: #262626ff;
85
85
  $colorsComponentsMenuWinterParent400: #4d4d4dff;
86
- $colorsComponentsMenuWinterParent500: #00000000;
86
+ $colorsComponentsMenuWinterParent500: #000000ff;
87
87
  $colorsComponentsMenuWinterParent600: #007e45ff;
88
88
  $colorsComponentsMenuWinterParent700: #262626ff;
89
89
  $colorsComponentsMenuWinterParent800: #262626ff;
@@ -234,6 +234,7 @@ $sizing700: 56px;
234
234
  $sizing800: 64px;
235
235
  $sizing900: 72px;
236
236
  $sizing1000: 80px;
237
+ $sizing1200: 96px;
237
238
  $sizing1300: 104px;
238
239
  $sizing1600: 128px;
239
240
  $sizing010: 1px;
@@ -306,9 +307,9 @@ $typographyAccordionParagraphM: 400 14px/150% Sage UI;
306
307
  $typographyActionPopoverMenuItemM: 700 14px/150% Sage UI;
307
308
  $typographyAnchorNavLabelM: 500 14px/150% Sage UI;
308
309
  $typographyBadgeLabelM: 500 12px/150% Sage UI;
309
- $typographyButtonLabelS: 700 14px/150% Sage UI;
310
- $typographyButtonLabelM: 700 14px/150% Sage UI;
311
- $typographyButtonLabelL: 700 16px/150% Sage UI;
310
+ $typographyButtonLabelS: 500 14px/150% Sage UI;
311
+ $typographyButtonLabelM: 500 14px/150% Sage UI;
312
+ $typographyButtonLabelL: 500 16px/150% Sage UI;
312
313
  $typographyCardParagraphM: 400 14px/150% Sage UI;
313
314
  $typographyCardSelectTitleM: 700 16px/150% Sage UI;
314
315
  $typographyCardSelectSubtitleM: 500 14px/150% Sage UI;
package/sage-design-tokens-2.22.0.tgz DELETED
Binary file