@sage/design-tokens 2.23.0 → 2.26.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 +15 -14
  2. package/css/base.css +15 -14
  3. package/data/tokens.json +17 -4
  4. package/docs/tokens/base/colors/index.html +8 -8
  5. package/docs/tokens/base/index.html +38 -17
  6. package/docs/tokens/base/sizing/index.html +21 -0
  7. package/docs/tokens/base/typography/index.html +9 -9
  8. package/docs/tokens/index.html +38 -17
  9. package/ios/base.h +15 -14
  10. package/js/base/common.d.ts +1 -0
  11. package/js/base/common.js +15 -14
  12. package/js/base/es6.d.ts +1 -0
  13. package/js/base/es6.js +14 -13
  14. package/package.json +1 -1
  15. package/sage-design-tokens-2.26.0.tgz +0 -0
  16. package/scss/base.scss +15 -14
  17. package/sage-design-tokens-2.23.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 16:23:18 GMT
5
+ Generated on Thu, 26 May 2022 09:33:48 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>
@@ -332,7 +333,7 @@
332
333
  <string name="typographyDialogParagraphXl">Regular 14px/150% Sage UI</string>
333
334
  <string name="typographyDialogParagraphXxl">Regular 14px/150% Sage UI</string>
334
335
  <string name="typographyDrawerTitleM">Bold 22px/125% Sage UI</string>
335
- <string name="typographyDrawerParagraphM">0 none</string>
336
+ <string name="typographyDrawerParagraphM">Regular 14px/125% Sage UI</string>
336
337
  <string name="typographyFlashTextM">Regular 14px/150% Sage UI</string>
337
338
  <string name="typographyFlashTextL">Regular 16px/150% Sage UI</string>
338
339
  <string name="typographyFormFieldLabelXs">Medium 14px/150% Sage UI</string>
@@ -369,7 +370,7 @@
369
370
  <string name="typographyFormFieldCharacterCountL">Regular 16px/150% Sage UI</string>
370
371
  <string name="typographyLinkTextS">Regular 12px/150% Sage UI</string>
371
372
  <string name="typographyLinkTextM">Regular 14px/150% Sage UI</string>
372
- <string name="typographyLinkTextL">undefined 16px/150% Sage UI</string>
373
+ <string name="typographyLinkTextL">Regular 16px/150% Sage UI</string>
373
374
  <string name="typographyMenuLabelM">Medium 14px/150% Sage UI</string>
374
375
  <string name="typographyMenuLabelL">Medium 16px/150% Sage UI</string>
375
376
  <string name="typographyMenuSegmentTitleM">Medium 12px/150% Sage UI</string>
@@ -421,13 +422,13 @@
421
422
  <string name="typographySidebarTitleMl">Bold 20px/125% Sage UI</string>
422
423
  <string name="typographySidebarTitleL">Bold 20px/125% Sage UI</string>
423
424
  <string name="typographySidebarTitleXl">Bold 20px/125% Sage UI</string>
424
- <string name="typographySidebarParagraphXs">0 none</string>
425
- <string name="typographySidebarParagraphS">0 none</string>
426
- <string name="typographySidebarParagraphMs">0 none</string>
427
- <string name="typographySidebarParagraphM">0 none</string>
428
- <string name="typographySidebarParagraphMl">0 none</string>
429
- <string name="typographySidebarParagraphL">0 none</string>
430
- <string name="typographySidebarParagraphXl">0 none</string>
425
+ <string name="typographySidebarParagraphXs">Regular 14px/125% Sage UI</string>
426
+ <string name="typographySidebarParagraphS">Regular 14px/125% Sage UI</string>
427
+ <string name="typographySidebarParagraphMs">Regular 14px/125% Sage UI</string>
428
+ <string name="typographySidebarParagraphM">Regular 14px/125% Sage UI</string>
429
+ <string name="typographySidebarParagraphMl">Regular 14px/125% Sage UI</string>
430
+ <string name="typographySidebarParagraphL">Regular 14px/125% Sage UI</string>
431
+ <string name="typographySidebarParagraphXl">Regular 14px/125% Sage UI</string>
431
432
  <string name="typographyStepFlowCompleteLabelM">Medium 14px/150% Sage UI</string>
432
433
  <string name="typographyStepFlowCurrentLabelM">Medium 14px/150% Sage UI</string>
433
434
  <string name="typographyStepFlowIncompleteLabelM">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 16:23:18 GMT
7
+ * Generated on Thu, 26 May 2022 09:33:48 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;
@@ -335,7 +336,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
335
336
  --typographyDialogParagraphXl: 400 14px/150% Sage UI;
336
337
  --typographyDialogParagraphXxl: 400 14px/150% Sage UI;
337
338
  --typographyDrawerTitleM: 700 22px/125% Sage UI;
338
- --typographyDrawerParagraphM: 0 none;
339
+ --typographyDrawerParagraphM: 400 14px/125% Sage UI;
339
340
  --typographyFlashTextM: 400 14px/150% Sage UI;
340
341
  --typographyFlashTextL: 400 16px/150% Sage UI;
341
342
  --typographyFormFieldLabelXs: 500 14px/150% Sage UI;
@@ -372,7 +373,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
372
373
  --typographyFormFieldCharacterCountL: 400 16px/150% Sage UI;
373
374
  --typographyLinkTextS: 400 12px/150% Sage UI;
374
375
  --typographyLinkTextM: 400 14px/150% Sage UI;
375
- --typographyLinkTextL: undefined 16px/150% Sage UI;
376
+ --typographyLinkTextL: 400 16px/150% Sage UI;
376
377
  --typographyMenuLabelM: 500 14px/150% Sage UI;
377
378
  --typographyMenuLabelL: 500 16px/150% Sage UI;
378
379
  --typographyMenuSegmentTitleM: 500 12px/150% Sage UI;
@@ -424,13 +425,13 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
424
425
  --typographySidebarTitleMl: 700 20px/125% Sage UI;
425
426
  --typographySidebarTitleL: 700 20px/125% Sage UI;
426
427
  --typographySidebarTitleXl: 700 20px/125% Sage UI;
427
- --typographySidebarParagraphXs: 0 none;
428
- --typographySidebarParagraphS: 0 none;
429
- --typographySidebarParagraphMs: 0 none;
430
- --typographySidebarParagraphM: 0 none;
431
- --typographySidebarParagraphMl: 0 none;
432
- --typographySidebarParagraphL: 0 none;
433
- --typographySidebarParagraphXl: 0 none;
428
+ --typographySidebarParagraphXs: 400 14px/125% Sage UI;
429
+ --typographySidebarParagraphS: 400 14px/125% Sage UI;
430
+ --typographySidebarParagraphMs: 400 14px/125% Sage UI;
431
+ --typographySidebarParagraphM: 400 14px/125% Sage UI;
432
+ --typographySidebarParagraphMl: 400 14px/125% Sage UI;
433
+ --typographySidebarParagraphL: 400 14px/125% Sage UI;
434
+ --typographySidebarParagraphXl: 400 14px/125% Sage UI;
434
435
  --typographyStepFlowCompleteLabelM: 500 14px/150% Sage UI;
435
436
  --typographyStepFlowCurrentLabelM: 500 14px/150% Sage UI;
436
437
  --typographyStepFlowIncompleteLabelM: 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"
@@ -2030,6 +2034,7 @@
2030
2034
  "fontFamily": "Sage UI",
2031
2035
  "fontWeight": "Regular",
2032
2036
  "lineHeight": "125%",
2037
+ "fontSize": "14px",
2033
2038
  "letterSpacing": "0%",
2034
2039
  "paragraphSpacing": "0",
2035
2040
  "textDecoration": "none",
@@ -2468,6 +2473,7 @@
2468
2473
  "l": {
2469
2474
  "value": {
2470
2475
  "fontFamily": "Sage UI",
2476
+ "fontWeight": "Regular",
2471
2477
  "lineHeight": "150%",
2472
2478
  "fontSize": "16px",
2473
2479
  "letterSpacing": "0%",
@@ -3172,6 +3178,7 @@
3172
3178
  "fontFamily": "Sage UI",
3173
3179
  "fontWeight": "Regular",
3174
3180
  "lineHeight": "125%",
3181
+ "fontSize": "14px",
3175
3182
  "letterSpacing": "0%",
3176
3183
  "paragraphSpacing": "0",
3177
3184
  "textDecoration": "none",
@@ -3184,6 +3191,7 @@
3184
3191
  "fontFamily": "Sage UI",
3185
3192
  "fontWeight": "Regular",
3186
3193
  "lineHeight": "125%",
3194
+ "fontSize": "14px",
3187
3195
  "letterSpacing": "0%",
3188
3196
  "paragraphSpacing": "0",
3189
3197
  "textDecoration": "none",
@@ -3196,6 +3204,7 @@
3196
3204
  "fontFamily": "Sage UI",
3197
3205
  "fontWeight": "Regular",
3198
3206
  "lineHeight": "125%",
3207
+ "fontSize": "14px",
3199
3208
  "letterSpacing": "0%",
3200
3209
  "paragraphSpacing": "0",
3201
3210
  "textDecoration": "none",
@@ -3208,6 +3217,7 @@
3208
3217
  "fontFamily": "Sage UI",
3209
3218
  "fontWeight": "Regular",
3210
3219
  "lineHeight": "125%",
3220
+ "fontSize": "14px",
3211
3221
  "letterSpacing": "0%",
3212
3222
  "paragraphSpacing": "0",
3213
3223
  "textDecoration": "none",
@@ -3220,6 +3230,7 @@
3220
3230
  "fontFamily": "Sage UI",
3221
3231
  "fontWeight": "Regular",
3222
3232
  "lineHeight": "125%",
3233
+ "fontSize": "14px",
3223
3234
  "letterSpacing": "0%",
3224
3235
  "paragraphSpacing": "0",
3225
3236
  "textDecoration": "none",
@@ -3232,6 +3243,7 @@
3232
3243
  "fontFamily": "Sage UI",
3233
3244
  "fontWeight": "Regular",
3234
3245
  "lineHeight": "125%",
3246
+ "fontSize": "14px",
3235
3247
  "letterSpacing": "0%",
3236
3248
  "paragraphSpacing": "0",
3237
3249
  "textDecoration": "none",
@@ -3244,6 +3256,7 @@
3244
3256
  "fontFamily": "Sage UI",
3245
3257
  "fontWeight": "Regular",
3246
3258
  "lineHeight": "125%",
3259
+ "fontSize": "14px",
3247
3260
  "letterSpacing": "0%",
3248
3261
  "paragraphSpacing": "0",
3249
3262
  "textDecoration": "none",
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"
@@ -7301,7 +7322,7 @@
7301
7322
  </a>
7302
7323
  </td>
7303
7324
  <td class="is-vcentered">
7304
- <pre>0 none</pre>
7325
+ <pre>400 14px/125% Sage UI</pre>
7305
7326
  </td>
7306
7327
  <td class="is-vcentered">
7307
7328
  <div class="table__typography-preview">
@@ -8078,7 +8099,7 @@
8078
8099
  </a>
8079
8100
  </td>
8080
8101
  <td class="is-vcentered">
8081
- <pre>undefined 16px/150% Sage UI</pre>
8102
+ <pre>400 16px/150% Sage UI</pre>
8082
8103
  </td>
8083
8104
  <td class="is-vcentered">
8084
8105
  <div class="table__typography-preview">
@@ -9170,7 +9191,7 @@
9170
9191
  </a>
9171
9192
  </td>
9172
9193
  <td class="is-vcentered">
9173
- <pre>0 none</pre>
9194
+ <pre>400 14px/125% Sage UI</pre>
9174
9195
  </td>
9175
9196
  <td class="is-vcentered">
9176
9197
  <div class="table__typography-preview">
@@ -9191,7 +9212,7 @@
9191
9212
  </a>
9192
9213
  </td>
9193
9214
  <td class="is-vcentered">
9194
- <pre>0 none</pre>
9215
+ <pre>400 14px/125% Sage UI</pre>
9195
9216
  </td>
9196
9217
  <td class="is-vcentered">
9197
9218
  <div class="table__typography-preview">
@@ -9212,7 +9233,7 @@
9212
9233
  </a>
9213
9234
  </td>
9214
9235
  <td class="is-vcentered">
9215
- <pre>0 none</pre>
9236
+ <pre>400 14px/125% Sage UI</pre>
9216
9237
  </td>
9217
9238
  <td class="is-vcentered">
9218
9239
  <div class="table__typography-preview">
@@ -9233,7 +9254,7 @@
9233
9254
  </a>
9234
9255
  </td>
9235
9256
  <td class="is-vcentered">
9236
- <pre>0 none</pre>
9257
+ <pre>400 14px/125% Sage UI</pre>
9237
9258
  </td>
9238
9259
  <td class="is-vcentered">
9239
9260
  <div class="table__typography-preview">
@@ -9254,7 +9275,7 @@
9254
9275
  </a>
9255
9276
  </td>
9256
9277
  <td class="is-vcentered">
9257
- <pre>0 none</pre>
9278
+ <pre>400 14px/125% Sage UI</pre>
9258
9279
  </td>
9259
9280
  <td class="is-vcentered">
9260
9281
  <div class="table__typography-preview">
@@ -9275,7 +9296,7 @@
9275
9296
  </a>
9276
9297
  </td>
9277
9298
  <td class="is-vcentered">
9278
- <pre>0 none</pre>
9299
+ <pre>400 14px/125% Sage UI</pre>
9279
9300
  </td>
9280
9301
  <td class="is-vcentered">
9281
9302
  <div class="table__typography-preview">
@@ -9296,7 +9317,7 @@
9296
9317
  </a>
9297
9318
  </td>
9298
9319
  <td class="is-vcentered">
9299
- <pre>0 none</pre>
9320
+ <pre>400 14px/125% Sage UI</pre>
9300
9321
  </td>
9301
9322
  <td class="is-vcentered">
9302
9323
  <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
@@ -990,7 +990,7 @@
990
990
  </a>
991
991
  </td>
992
992
  <td class="is-vcentered">
993
- <pre>0 none</pre>
993
+ <pre>400 14px/125% Sage UI</pre>
994
994
  </td>
995
995
  <td class="is-vcentered">
996
996
  <div class="table__typography-preview">
@@ -1767,7 +1767,7 @@
1767
1767
  </a>
1768
1768
  </td>
1769
1769
  <td class="is-vcentered">
1770
- <pre>undefined 16px/150% Sage UI</pre>
1770
+ <pre>400 16px/150% Sage UI</pre>
1771
1771
  </td>
1772
1772
  <td class="is-vcentered">
1773
1773
  <div class="table__typography-preview">
@@ -2859,7 +2859,7 @@
2859
2859
  </a>
2860
2860
  </td>
2861
2861
  <td class="is-vcentered">
2862
- <pre>0 none</pre>
2862
+ <pre>400 14px/125% Sage UI</pre>
2863
2863
  </td>
2864
2864
  <td class="is-vcentered">
2865
2865
  <div class="table__typography-preview">
@@ -2880,7 +2880,7 @@
2880
2880
  </a>
2881
2881
  </td>
2882
2882
  <td class="is-vcentered">
2883
- <pre>0 none</pre>
2883
+ <pre>400 14px/125% Sage UI</pre>
2884
2884
  </td>
2885
2885
  <td class="is-vcentered">
2886
2886
  <div class="table__typography-preview">
@@ -2901,7 +2901,7 @@
2901
2901
  </a>
2902
2902
  </td>
2903
2903
  <td class="is-vcentered">
2904
- <pre>0 none</pre>
2904
+ <pre>400 14px/125% Sage UI</pre>
2905
2905
  </td>
2906
2906
  <td class="is-vcentered">
2907
2907
  <div class="table__typography-preview">
@@ -2922,7 +2922,7 @@
2922
2922
  </a>
2923
2923
  </td>
2924
2924
  <td class="is-vcentered">
2925
- <pre>0 none</pre>
2925
+ <pre>400 14px/125% Sage UI</pre>
2926
2926
  </td>
2927
2927
  <td class="is-vcentered">
2928
2928
  <div class="table__typography-preview">
@@ -2943,7 +2943,7 @@
2943
2943
  </a>
2944
2944
  </td>
2945
2945
  <td class="is-vcentered">
2946
- <pre>0 none</pre>
2946
+ <pre>400 14px/125% Sage UI</pre>
2947
2947
  </td>
2948
2948
  <td class="is-vcentered">
2949
2949
  <div class="table__typography-preview">
@@ -2964,7 +2964,7 @@
2964
2964
  </a>
2965
2965
  </td>
2966
2966
  <td class="is-vcentered">
2967
- <pre>0 none</pre>
2967
+ <pre>400 14px/125% Sage UI</pre>
2968
2968
  </td>
2969
2969
  <td class="is-vcentered">
2970
2970
  <div class="table__typography-preview">
@@ -2985,7 +2985,7 @@
2985
2985
  </a>
2986
2986
  </td>
2987
2987
  <td class="is-vcentered">
2988
- <pre>0 none</pre>
2988
+ <pre>400 14px/125% Sage UI</pre>
2989
2989
  </td>
2990
2990
  <td class="is-vcentered">
2991
2991
  <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"
@@ -7357,7 +7378,7 @@
7357
7378
  </a>
7358
7379
  </td>
7359
7380
  <td class="is-vcentered">
7360
- <pre>0 none</pre>
7381
+ <pre>400 14px/125% Sage UI</pre>
7361
7382
  </td>
7362
7383
  <td class="is-vcentered">
7363
7384
  <div class="table__typography-preview">
@@ -8134,7 +8155,7 @@
8134
8155
  </a>
8135
8156
  </td>
8136
8157
  <td class="is-vcentered">
8137
- <pre>undefined 16px/150% Sage UI</pre>
8158
+ <pre>400 16px/150% Sage UI</pre>
8138
8159
  </td>
8139
8160
  <td class="is-vcentered">
8140
8161
  <div class="table__typography-preview">
@@ -9226,7 +9247,7 @@
9226
9247
  </a>
9227
9248
  </td>
9228
9249
  <td class="is-vcentered">
9229
- <pre>0 none</pre>
9250
+ <pre>400 14px/125% Sage UI</pre>
9230
9251
  </td>
9231
9252
  <td class="is-vcentered">
9232
9253
  <div class="table__typography-preview">
@@ -9247,7 +9268,7 @@
9247
9268
  </a>
9248
9269
  </td>
9249
9270
  <td class="is-vcentered">
9250
- <pre>0 none</pre>
9271
+ <pre>400 14px/125% Sage UI</pre>
9251
9272
  </td>
9252
9273
  <td class="is-vcentered">
9253
9274
  <div class="table__typography-preview">
@@ -9268,7 +9289,7 @@
9268
9289
  </a>
9269
9290
  </td>
9270
9291
  <td class="is-vcentered">
9271
- <pre>0 none</pre>
9292
+ <pre>400 14px/125% Sage UI</pre>
9272
9293
  </td>
9273
9294
  <td class="is-vcentered">
9274
9295
  <div class="table__typography-preview">
@@ -9289,7 +9310,7 @@
9289
9310
  </a>
9290
9311
  </td>
9291
9312
  <td class="is-vcentered">
9292
- <pre>0 none</pre>
9313
+ <pre>400 14px/125% Sage UI</pre>
9293
9314
  </td>
9294
9315
  <td class="is-vcentered">
9295
9316
  <div class="table__typography-preview">
@@ -9310,7 +9331,7 @@
9310
9331
  </a>
9311
9332
  </td>
9312
9333
  <td class="is-vcentered">
9313
- <pre>0 none</pre>
9334
+ <pre>400 14px/125% Sage UI</pre>
9314
9335
  </td>
9315
9336
  <td class="is-vcentered">
9316
9337
  <div class="table__typography-preview">
@@ -9331,7 +9352,7 @@
9331
9352
  </a>
9332
9353
  </td>
9333
9354
  <td class="is-vcentered">
9334
- <pre>0 none</pre>
9355
+ <pre>400 14px/125% Sage UI</pre>
9335
9356
  </td>
9336
9357
  <td class="is-vcentered">
9337
9358
  <div class="table__typography-preview">
@@ -9352,7 +9373,7 @@
9352
9373
  </a>
9353
9374
  </td>
9354
9375
  <td class="is-vcentered">
9355
- <pre>0 none</pre>
9376
+ <pre>400 14px/125% Sage UI</pre>
9356
9377
  </td>
9357
9378
  <td class="is-vcentered">
9358
9379
  <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 16:23:18 GMT
7
+ // Generated on Thu, 26 May 2022 09:33:48 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
@@ -337,7 +338,7 @@
337
338
  #define typographyDialogParagraphXl Regular 14px/150% Sage UI
338
339
  #define typographyDialogParagraphXxl Regular 14px/150% Sage UI
339
340
  #define typographyDrawerTitleM Bold 22px/125% Sage UI
340
- #define typographyDrawerParagraphM 0 none
341
+ #define typographyDrawerParagraphM Regular 14px/125% Sage UI
341
342
  #define typographyFlashTextM Regular 14px/150% Sage UI
342
343
  #define typographyFlashTextL Regular 16px/150% Sage UI
343
344
  #define typographyFormFieldLabelXs Medium 14px/150% Sage UI
@@ -374,7 +375,7 @@
374
375
  #define typographyFormFieldCharacterCountL Regular 16px/150% Sage UI
375
376
  #define typographyLinkTextS Regular 12px/150% Sage UI
376
377
  #define typographyLinkTextM Regular 14px/150% Sage UI
377
- #define typographyLinkTextL undefined 16px/150% Sage UI
378
+ #define typographyLinkTextL Regular 16px/150% Sage UI
378
379
  #define typographyMenuLabelM Medium 14px/150% Sage UI
379
380
  #define typographyMenuLabelL Medium 16px/150% Sage UI
380
381
  #define typographyMenuSegmentTitleM Medium 12px/150% Sage UI
@@ -426,13 +427,13 @@
426
427
  #define typographySidebarTitleMl Bold 20px/125% Sage UI
427
428
  #define typographySidebarTitleL Bold 20px/125% Sage UI
428
429
  #define typographySidebarTitleXl Bold 20px/125% Sage UI
429
- #define typographySidebarParagraphXs 0 none
430
- #define typographySidebarParagraphS 0 none
431
- #define typographySidebarParagraphMs 0 none
432
- #define typographySidebarParagraphM 0 none
433
- #define typographySidebarParagraphMl 0 none
434
- #define typographySidebarParagraphL 0 none
435
- #define typographySidebarParagraphXl 0 none
430
+ #define typographySidebarParagraphXs Regular 14px/125% Sage UI
431
+ #define typographySidebarParagraphS Regular 14px/125% Sage UI
432
+ #define typographySidebarParagraphMs Regular 14px/125% Sage UI
433
+ #define typographySidebarParagraphM Regular 14px/125% Sage UI
434
+ #define typographySidebarParagraphMl Regular 14px/125% Sage UI
435
+ #define typographySidebarParagraphL Regular 14px/125% Sage UI
436
+ #define typographySidebarParagraphXl Regular 14px/125% Sage UI
436
437
  #define typographyStepFlowCompleteLabelM Medium 14px/150% Sage UI
437
438
  #define typographyStepFlowCurrentLabelM Medium 14px/150% Sage UI
438
439
  #define typographyStepFlowIncompleteLabelM 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 16:23:18 GMT
7
+ * Generated on Thu, 26 May 2022 09:33:48 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',
@@ -335,7 +336,7 @@ module.exports = {
335
336
  typographyDialogParagraphXl: '400 14px/150% Sage UI',
336
337
  typographyDialogParagraphXxl: '400 14px/150% Sage UI',
337
338
  typographyDrawerTitleM: '700 22px/125% Sage UI',
338
- typographyDrawerParagraphM: '0 none',
339
+ typographyDrawerParagraphM: '400 14px/125% Sage UI',
339
340
  typographyFlashTextM: '400 14px/150% Sage UI',
340
341
  typographyFlashTextL: '400 16px/150% Sage UI',
341
342
  typographyFormFieldLabelXs: '500 14px/150% Sage UI',
@@ -372,7 +373,7 @@ module.exports = {
372
373
  typographyFormFieldCharacterCountL: '400 16px/150% Sage UI',
373
374
  typographyLinkTextS: '400 12px/150% Sage UI',
374
375
  typographyLinkTextM: '400 14px/150% Sage UI',
375
- typographyLinkTextL: 'undefined 16px/150% Sage UI',
376
+ typographyLinkTextL: '400 16px/150% Sage UI',
376
377
  typographyMenuLabelM: '500 14px/150% Sage UI',
377
378
  typographyMenuLabelL: '500 16px/150% Sage UI',
378
379
  typographyMenuSegmentTitleM: '500 12px/150% Sage UI',
@@ -424,13 +425,13 @@ module.exports = {
424
425
  typographySidebarTitleMl: '700 20px/125% Sage UI',
425
426
  typographySidebarTitleL: '700 20px/125% Sage UI',
426
427
  typographySidebarTitleXl: '700 20px/125% Sage UI',
427
- typographySidebarParagraphXs: '0 none',
428
- typographySidebarParagraphS: '0 none',
429
- typographySidebarParagraphMs: '0 none',
430
- typographySidebarParagraphM: '0 none',
431
- typographySidebarParagraphMl: '0 none',
432
- typographySidebarParagraphL: '0 none',
433
- typographySidebarParagraphXl: '0 none',
428
+ typographySidebarParagraphXs: '400 14px/125% Sage UI',
429
+ typographySidebarParagraphS: '400 14px/125% Sage UI',
430
+ typographySidebarParagraphMs: '400 14px/125% Sage UI',
431
+ typographySidebarParagraphM: '400 14px/125% Sage UI',
432
+ typographySidebarParagraphMl: '400 14px/125% Sage UI',
433
+ typographySidebarParagraphL: '400 14px/125% Sage UI',
434
+ typographySidebarParagraphXl: '400 14px/125% Sage UI',
434
435
  typographyStepFlowCompleteLabelM: '500 14px/150% Sage UI',
435
436
  typographyStepFlowCurrentLabelM: '500 14px/150% Sage UI',
436
437
  typographyStepFlowIncompleteLabelM: '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',
@@ -330,7 +331,7 @@ export default {
330
331
  typographyDialogParagraphXl: '400 14px/150% Sage UI',
331
332
  typographyDialogParagraphXxl: '400 14px/150% Sage UI',
332
333
  typographyDrawerTitleM: '700 22px/125% Sage UI',
333
- typographyDrawerParagraphM: '0 none',
334
+ typographyDrawerParagraphM: '400 14px/125% Sage UI',
334
335
  typographyFlashTextM: '400 14px/150% Sage UI',
335
336
  typographyFlashTextL: '400 16px/150% Sage UI',
336
337
  typographyFormFieldLabelXs: '500 14px/150% Sage UI',
@@ -367,7 +368,7 @@ export default {
367
368
  typographyFormFieldCharacterCountL: '400 16px/150% Sage UI',
368
369
  typographyLinkTextS: '400 12px/150% Sage UI',
369
370
  typographyLinkTextM: '400 14px/150% Sage UI',
370
- typographyLinkTextL: 'undefined 16px/150% Sage UI',
371
+ typographyLinkTextL: '400 16px/150% Sage UI',
371
372
  typographyMenuLabelM: '500 14px/150% Sage UI',
372
373
  typographyMenuLabelL: '500 16px/150% Sage UI',
373
374
  typographyMenuSegmentTitleM: '500 12px/150% Sage UI',
@@ -419,13 +420,13 @@ export default {
419
420
  typographySidebarTitleMl: '700 20px/125% Sage UI',
420
421
  typographySidebarTitleL: '700 20px/125% Sage UI',
421
422
  typographySidebarTitleXl: '700 20px/125% Sage UI',
422
- typographySidebarParagraphXs: '0 none',
423
- typographySidebarParagraphS: '0 none',
424
- typographySidebarParagraphMs: '0 none',
425
- typographySidebarParagraphM: '0 none',
426
- typographySidebarParagraphMl: '0 none',
427
- typographySidebarParagraphL: '0 none',
428
- typographySidebarParagraphXl: '0 none',
423
+ typographySidebarParagraphXs: '400 14px/125% Sage UI',
424
+ typographySidebarParagraphS: '400 14px/125% Sage UI',
425
+ typographySidebarParagraphMs: '400 14px/125% Sage UI',
426
+ typographySidebarParagraphM: '400 14px/125% Sage UI',
427
+ typographySidebarParagraphMl: '400 14px/125% Sage UI',
428
+ typographySidebarParagraphL: '400 14px/125% Sage UI',
429
+ typographySidebarParagraphXl: '400 14px/125% Sage UI',
429
430
  typographyStepFlowCompleteLabelM: '500 14px/150% Sage UI',
430
431
  typographyStepFlowCurrentLabelM: '500 14px/150% Sage UI',
431
432
  typographyStepFlowIncompleteLabelM: '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.23.0",
13
+ "version": "2.26.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.26.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 16:23:18 GMT
7
+ // Generated on Thu, 26 May 2022 09:33:48 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;
@@ -333,7 +334,7 @@ $typographyDialogParagraphL: 400 14px/150% Sage UI;
333
334
  $typographyDialogParagraphXl: 400 14px/150% Sage UI;
334
335
  $typographyDialogParagraphXxl: 400 14px/150% Sage UI;
335
336
  $typographyDrawerTitleM: 700 22px/125% Sage UI;
336
- $typographyDrawerParagraphM: 0 none;
337
+ $typographyDrawerParagraphM: 400 14px/125% Sage UI;
337
338
  $typographyFlashTextM: 400 14px/150% Sage UI;
338
339
  $typographyFlashTextL: 400 16px/150% Sage UI;
339
340
  $typographyFormFieldLabelXs: 500 14px/150% Sage UI;
@@ -370,7 +371,7 @@ $typographyFormFieldCharacterCountM: 400 14px/150% Sage UI;
370
371
  $typographyFormFieldCharacterCountL: 400 16px/150% Sage UI;
371
372
  $typographyLinkTextS: 400 12px/150% Sage UI;
372
373
  $typographyLinkTextM: 400 14px/150% Sage UI;
373
- $typographyLinkTextL: undefined 16px/150% Sage UI;
374
+ $typographyLinkTextL: 400 16px/150% Sage UI;
374
375
  $typographyMenuLabelM: 500 14px/150% Sage UI;
375
376
  $typographyMenuLabelL: 500 16px/150% Sage UI;
376
377
  $typographyMenuSegmentTitleM: 500 12px/150% Sage UI;
@@ -422,13 +423,13 @@ $typographySidebarTitleM: 700 20px/125% Sage UI;
422
423
  $typographySidebarTitleMl: 700 20px/125% Sage UI;
423
424
  $typographySidebarTitleL: 700 20px/125% Sage UI;
424
425
  $typographySidebarTitleXl: 700 20px/125% Sage UI;
425
- $typographySidebarParagraphXs: 0 none;
426
- $typographySidebarParagraphS: 0 none;
427
- $typographySidebarParagraphMs: 0 none;
428
- $typographySidebarParagraphM: 0 none;
429
- $typographySidebarParagraphMl: 0 none;
430
- $typographySidebarParagraphL: 0 none;
431
- $typographySidebarParagraphXl: 0 none;
426
+ $typographySidebarParagraphXs: 400 14px/125% Sage UI;
427
+ $typographySidebarParagraphS: 400 14px/125% Sage UI;
428
+ $typographySidebarParagraphMs: 400 14px/125% Sage UI;
429
+ $typographySidebarParagraphM: 400 14px/125% Sage UI;
430
+ $typographySidebarParagraphMl: 400 14px/125% Sage UI;
431
+ $typographySidebarParagraphL: 400 14px/125% Sage UI;
432
+ $typographySidebarParagraphXl: 400 14px/125% Sage UI;
432
433
  $typographyStepFlowCompleteLabelM: 500 14px/150% Sage UI;
433
434
  $typographyStepFlowCurrentLabelM: 500 14px/150% Sage UI;
434
435
  $typographyStepFlowIncompleteLabelM: 500 14px/150% Sage UI;
package/sage-design-tokens-2.23.0.tgz DELETED
Binary file