@sage/design-tokens 2.43.0 → 2.45.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.
package/android/base.xml CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!--
4
4
  Do not edit directly
5
- Generated on Thu, 06 Oct 2022 11:57:31 GMT
5
+ Generated on Fri, 07 Oct 2022 10:08:14 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -307,12 +307,15 @@
307
307
  <string name="fontFamiliesAndroid">Roboto</string>
308
308
  <string name="fontFamiliesOther">Open Sans</string>
309
309
  <string name="borderRadiusCircle">50%</string>
310
- <string name="typographyAccordionTitleM">Bold 20px/125% Sage UI</string>
310
+ <string name="typographyAccordionTitleM">Medium 20px/125% Sage UI</string>
311
+ <string name="typographyAccordionTitleS">Medium 16px/125% Sage UI</string>
311
312
  <string name="typographyAccordionSubtitleM">Regular 14px/150% Sage UI</string>
312
313
  <string name="typographyAccordionParagraphM">Regular 14px/150% Sage UI</string>
313
314
  <string name="typographyActionPopoverMenuItemM">Medium 14px/150% Sage UI</string>
314
315
  <string name="typographyAnchorNavLabelM">Medium 14px/150% Sage UI</string>
315
316
  <string name="typographyBadgeLabelM">Medium 12px/150% Sage UI</string>
317
+ <string name="typographyBreadcrumbSeparatorM">Regular 14px/150% Sage UI</string>
318
+ <string name="typographyBreadcrumbCurrentPageM">Regular 14px/150% Sage UI</string>
316
319
  <string name="typographyButtonLabelS">Medium 14px/150% Sage UI</string>
317
320
  <string name="typographyButtonLabelM">Medium 14px/150% Sage UI</string>
318
321
  <string name="typographyButtonLabelL">Medium 16px/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 Thu, 06 Oct 2022 11:57:31 GMT
7
+ * Generated on Fri, 07 Oct 2022 10:08:14 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -310,12 +310,15 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
310
310
  --fontFamiliesAndroid: Roboto;
311
311
  --fontFamiliesOther: Open Sans;
312
312
  --borderRadiusCircle: 50%;
313
- --typographyAccordionTitleM: 700 20px/125% Sage UI;
313
+ --typographyAccordionTitleM: 500 20px/125% Sage UI;
314
+ --typographyAccordionTitleS: 500 16px/125% Sage UI;
314
315
  --typographyAccordionSubtitleM: 400 14px/150% Sage UI;
315
316
  --typographyAccordionParagraphM: 400 14px/150% Sage UI;
316
317
  --typographyActionPopoverMenuItemM: 500 14px/150% Sage UI;
317
318
  --typographyAnchorNavLabelM: 500 14px/150% Sage UI;
318
319
  --typographyBadgeLabelM: 500 12px/150% Sage UI;
320
+ --typographyBreadcrumbSeparatorM: 400 14px/150% Sage UI;
321
+ --typographyBreadcrumbCurrentPageM: 400 14px/150% Sage UI;
319
322
  --typographyButtonLabelS: 500 14px/150% Sage UI;
320
323
  --typographyButtonLabelM: 500 14px/150% Sage UI;
321
324
  --typographyButtonLabelL: 500 16px/150% Sage UI;
package/data/tokens.json CHANGED
@@ -1593,7 +1593,7 @@
1593
1593
  "m": {
1594
1594
  "value": {
1595
1595
  "fontFamily": "Sage UI",
1596
- "fontWeight": "Bold",
1596
+ "fontWeight": "Medium",
1597
1597
  "lineHeight": "125%",
1598
1598
  "fontSize": "20px",
1599
1599
  "letterSpacing": "0%",
@@ -1602,6 +1602,19 @@
1602
1602
  "textCase": "none"
1603
1603
  },
1604
1604
  "type": "typography"
1605
+ },
1606
+ "s": {
1607
+ "value": {
1608
+ "fontFamily": "Sage UI",
1609
+ "fontWeight": "Medium",
1610
+ "lineHeight": "125%",
1611
+ "fontSize": "16px",
1612
+ "letterSpacing": "0%",
1613
+ "paragraphSpacing": "0",
1614
+ "textDecoration": "none",
1615
+ "textCase": "none"
1616
+ },
1617
+ "type": "typography"
1605
1618
  }
1606
1619
  },
1607
1620
  "subtitle": {
@@ -1686,6 +1699,32 @@
1686
1699
  }
1687
1700
  }
1688
1701
  },
1702
+ "breadcrumb": {
1703
+ "separator": {
1704
+ "m": {
1705
+ "value": {
1706
+ "fontFamily": "Sage UI",
1707
+ "fontWeight": "Regular",
1708
+ "lineHeight": "150%",
1709
+ "fontSize": "14px"
1710
+ },
1711
+ "type": "typography",
1712
+ "description": "Style for the slash forward character that separates the breadcrumbs"
1713
+ }
1714
+ },
1715
+ "currentPage": {
1716
+ "m": {
1717
+ "value": {
1718
+ "fontFamily": "Sage UI",
1719
+ "fontWeight": "Regular",
1720
+ "lineHeight": "150%",
1721
+ "fontSize": "14px"
1722
+ },
1723
+ "type": "typography",
1724
+ "description": "Style for the current page text"
1725
+ }
1726
+ }
1727
+ },
1689
1728
  "button": {
1690
1729
  "label": {
1691
1730
  "s": {
@@ -6776,7 +6776,28 @@
6776
6776
  </a>
6777
6777
  </td>
6778
6778
  <td class="is-vcentered">
6779
- <pre>700 20px/125% Sage UI</pre>
6779
+ <pre>500 20px/125% Sage UI</pre>
6780
+ </td>
6781
+ <td class="is-vcentered">
6782
+ <div class="table__typography-preview">
6783
+ n/a
6784
+ </div>
6785
+
6786
+ </td>
6787
+ </tr>
6788
+ <tr>
6789
+ <td class="with-icons is-vcentered"
6790
+ id="base-typographyAccordionTitleS"
6791
+ title="theme: base; category: typography; group: accordion; name: title; variant: s; ">
6792
+ typographyAccordionTitleS
6793
+ <a href="#base-typographyAccordionTitleS"
6794
+ title="permalink"
6795
+ class="permalink">
6796
+ 🔗
6797
+ </a>
6798
+ </td>
6799
+ <td class="is-vcentered">
6800
+ <pre>500 16px/125% Sage UI</pre>
6780
6801
  </td>
6781
6802
  <td class="is-vcentered">
6782
6803
  <div class="table__typography-preview">
@@ -6890,6 +6911,48 @@
6890
6911
 
6891
6912
  </td>
6892
6913
  </tr>
6914
+ <tr>
6915
+ <td class="with-icons is-vcentered"
6916
+ id="base-typographyBreadcrumbSeparatorM"
6917
+ title="theme: base; category: typography; group: breadcrumb; name: separator; variant: m; ">
6918
+ typographyBreadcrumbSeparatorM
6919
+ <a href="#base-typographyBreadcrumbSeparatorM"
6920
+ title="permalink"
6921
+ class="permalink">
6922
+ 🔗
6923
+ </a>
6924
+ </td>
6925
+ <td class="is-vcentered">
6926
+ <pre>400 14px/150% Sage UI</pre>
6927
+ </td>
6928
+ <td class="is-vcentered">
6929
+ <div class="table__typography-preview">
6930
+ n/a
6931
+ </div>
6932
+
6933
+ </td>
6934
+ </tr>
6935
+ <tr>
6936
+ <td class="with-icons is-vcentered"
6937
+ id="base-typographyBreadcrumbCurrentPageM"
6938
+ title="theme: base; category: typography; group: breadcrumb; name: currentPage; variant: m; ">
6939
+ typographyBreadcrumbCurrentPageM
6940
+ <a href="#base-typographyBreadcrumbCurrentPageM"
6941
+ title="permalink"
6942
+ class="permalink">
6943
+ 🔗
6944
+ </a>
6945
+ </td>
6946
+ <td class="is-vcentered">
6947
+ <pre>400 14px/150% Sage UI</pre>
6948
+ </td>
6949
+ <td class="is-vcentered">
6950
+ <div class="table__typography-preview">
6951
+ n/a
6952
+ </div>
6953
+
6954
+ </td>
6955
+ </tr>
6893
6956
  <tr>
6894
6957
  <td class="with-icons is-vcentered"
6895
6958
  id="base-typographyButtonLabelS"
@@ -297,7 +297,28 @@
297
297
  </a>
298
298
  </td>
299
299
  <td class="is-vcentered">
300
- <pre>700 20px/125% Sage UI</pre>
300
+ <pre>500 20px/125% Sage UI</pre>
301
+ </td>
302
+ <td class="is-vcentered">
303
+ <div class="table__typography-preview">
304
+ n/a
305
+ </div>
306
+
307
+ </td>
308
+ </tr>
309
+ <tr>
310
+ <td class="with-icons is-vcentered"
311
+ id="base-typographyAccordionTitleS"
312
+ title="theme: base; category: typography; group: accordion; name: title; variant: s; ">
313
+ typographyAccordionTitleS
314
+ <a href="#base-typographyAccordionTitleS"
315
+ title="permalink"
316
+ class="permalink">
317
+ 🔗
318
+ </a>
319
+ </td>
320
+ <td class="is-vcentered">
321
+ <pre>500 16px/125% Sage UI</pre>
301
322
  </td>
302
323
  <td class="is-vcentered">
303
324
  <div class="table__typography-preview">
@@ -411,6 +432,48 @@
411
432
 
412
433
  </td>
413
434
  </tr>
435
+ <tr>
436
+ <td class="with-icons is-vcentered"
437
+ id="base-typographyBreadcrumbSeparatorM"
438
+ title="theme: base; category: typography; group: breadcrumb; name: separator; variant: m; ">
439
+ typographyBreadcrumbSeparatorM
440
+ <a href="#base-typographyBreadcrumbSeparatorM"
441
+ title="permalink"
442
+ class="permalink">
443
+ 🔗
444
+ </a>
445
+ </td>
446
+ <td class="is-vcentered">
447
+ <pre>400 14px/150% Sage UI</pre>
448
+ </td>
449
+ <td class="is-vcentered">
450
+ <div class="table__typography-preview">
451
+ n/a
452
+ </div>
453
+
454
+ </td>
455
+ </tr>
456
+ <tr>
457
+ <td class="with-icons is-vcentered"
458
+ id="base-typographyBreadcrumbCurrentPageM"
459
+ title="theme: base; category: typography; group: breadcrumb; name: currentPage; variant: m; ">
460
+ typographyBreadcrumbCurrentPageM
461
+ <a href="#base-typographyBreadcrumbCurrentPageM"
462
+ title="permalink"
463
+ class="permalink">
464
+ 🔗
465
+ </a>
466
+ </td>
467
+ <td class="is-vcentered">
468
+ <pre>400 14px/150% Sage UI</pre>
469
+ </td>
470
+ <td class="is-vcentered">
471
+ <div class="table__typography-preview">
472
+ n/a
473
+ </div>
474
+
475
+ </td>
476
+ </tr>
414
477
  <tr>
415
478
  <td class="with-icons is-vcentered"
416
479
  id="base-typographyButtonLabelS"
@@ -6832,7 +6832,28 @@
6832
6832
  </a>
6833
6833
  </td>
6834
6834
  <td class="is-vcentered">
6835
- <pre>700 20px/125% Sage UI</pre>
6835
+ <pre>500 20px/125% Sage UI</pre>
6836
+ </td>
6837
+ <td class="is-vcentered">
6838
+ <div class="table__typography-preview">
6839
+ n/a
6840
+ </div>
6841
+
6842
+ </td>
6843
+ </tr>
6844
+ <tr>
6845
+ <td class="with-icons is-vcentered"
6846
+ id="base-typographyAccordionTitleS"
6847
+ title="theme: base; category: typography; group: accordion; name: title; variant: s; ">
6848
+ typographyAccordionTitleS
6849
+ <a href="#base-typographyAccordionTitleS"
6850
+ title="permalink"
6851
+ class="permalink">
6852
+ 🔗
6853
+ </a>
6854
+ </td>
6855
+ <td class="is-vcentered">
6856
+ <pre>500 16px/125% Sage UI</pre>
6836
6857
  </td>
6837
6858
  <td class="is-vcentered">
6838
6859
  <div class="table__typography-preview">
@@ -6946,6 +6967,48 @@
6946
6967
 
6947
6968
  </td>
6948
6969
  </tr>
6970
+ <tr>
6971
+ <td class="with-icons is-vcentered"
6972
+ id="base-typographyBreadcrumbSeparatorM"
6973
+ title="theme: base; category: typography; group: breadcrumb; name: separator; variant: m; ">
6974
+ typographyBreadcrumbSeparatorM
6975
+ <a href="#base-typographyBreadcrumbSeparatorM"
6976
+ title="permalink"
6977
+ class="permalink">
6978
+ 🔗
6979
+ </a>
6980
+ </td>
6981
+ <td class="is-vcentered">
6982
+ <pre>400 14px/150% Sage UI</pre>
6983
+ </td>
6984
+ <td class="is-vcentered">
6985
+ <div class="table__typography-preview">
6986
+ n/a
6987
+ </div>
6988
+
6989
+ </td>
6990
+ </tr>
6991
+ <tr>
6992
+ <td class="with-icons is-vcentered"
6993
+ id="base-typographyBreadcrumbCurrentPageM"
6994
+ title="theme: base; category: typography; group: breadcrumb; name: currentPage; variant: m; ">
6995
+ typographyBreadcrumbCurrentPageM
6996
+ <a href="#base-typographyBreadcrumbCurrentPageM"
6997
+ title="permalink"
6998
+ class="permalink">
6999
+ 🔗
7000
+ </a>
7001
+ </td>
7002
+ <td class="is-vcentered">
7003
+ <pre>400 14px/150% Sage UI</pre>
7004
+ </td>
7005
+ <td class="is-vcentered">
7006
+ <div class="table__typography-preview">
7007
+ n/a
7008
+ </div>
7009
+
7010
+ </td>
7011
+ </tr>
6949
7012
  <tr>
6950
7013
  <td class="with-icons is-vcentered"
6951
7014
  id="base-typographyButtonLabelS"
package/ios/base.h CHANGED
@@ -4,7 +4,7 @@
4
4
  //
5
5
 
6
6
  // Do not edit directly
7
- // Generated on Thu, 06 Oct 2022 11:57:31 GMT
7
+ // Generated on Fri, 07 Oct 2022 10:08:14 GMT
8
8
 
9
9
 
10
10
  #import <Foundation/Foundation.h>
@@ -312,12 +312,15 @@
312
312
  #define fontFamiliesAndroid Roboto
313
313
  #define fontFamiliesOther Open Sans
314
314
  #define borderRadiusCircle 50%
315
- #define typographyAccordionTitleM Bold 20px/125% Sage UI
315
+ #define typographyAccordionTitleM Medium 20px/125% Sage UI
316
+ #define typographyAccordionTitleS Medium 16px/125% Sage UI
316
317
  #define typographyAccordionSubtitleM Regular 14px/150% Sage UI
317
318
  #define typographyAccordionParagraphM Regular 14px/150% Sage UI
318
319
  #define typographyActionPopoverMenuItemM Medium 14px/150% Sage UI
319
320
  #define typographyAnchorNavLabelM Medium 14px/150% Sage UI
320
321
  #define typographyBadgeLabelM Medium 12px/150% Sage UI
322
+ #define typographyBreadcrumbSeparatorM Regular 14px/150% Sage UI
323
+ #define typographyBreadcrumbCurrentPageM Regular 14px/150% Sage UI
321
324
  #define typographyButtonLabelS Medium 14px/150% Sage UI
322
325
  #define typographyButtonLabelM Medium 14px/150% Sage UI
323
326
  #define typographyButtonLabelL Medium 16px/150% Sage UI
@@ -301,11 +301,14 @@ export const fontFamiliesAndroid: string;
301
301
  export const fontFamiliesOther: string;
302
302
  export const borderRadiusCircle: string;
303
303
  export const typographyAccordionTitleM: string;
304
+ export const typographyAccordionTitleS: string;
304
305
  export const typographyAccordionSubtitleM: string;
305
306
  export const typographyAccordionParagraphM: string;
306
307
  export const typographyActionPopoverMenuItemM: string;
307
308
  export const typographyAnchorNavLabelM: string;
308
309
  export const typographyBadgeLabelM: string;
310
+ export const typographyBreadcrumbSeparatorM: string;
311
+ export const typographyBreadcrumbCurrentPageM: string;
309
312
  export const typographyButtonLabelS: string;
310
313
  export const typographyButtonLabelM: string;
311
314
  export const typographyButtonLabelL: 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 Thu, 06 Oct 2022 11:57:31 GMT
7
+ * Generated on Fri, 07 Oct 2022 10:08:14 GMT
8
8
  */
9
9
 
10
10
  module.exports = {
@@ -310,12 +310,15 @@ module.exports = {
310
310
  fontFamiliesAndroid: 'Roboto',
311
311
  fontFamiliesOther: 'Open Sans',
312
312
  borderRadiusCircle: '50%',
313
- typographyAccordionTitleM: '700 20px/125% Sage UI',
313
+ typographyAccordionTitleM: '500 20px/125% Sage UI',
314
+ typographyAccordionTitleS: '500 16px/125% Sage UI',
314
315
  typographyAccordionSubtitleM: '400 14px/150% Sage UI',
315
316
  typographyAccordionParagraphM: '400 14px/150% Sage UI',
316
317
  typographyActionPopoverMenuItemM: '500 14px/150% Sage UI',
317
318
  typographyAnchorNavLabelM: '500 14px/150% Sage UI',
318
319
  typographyBadgeLabelM: '500 12px/150% Sage UI',
320
+ typographyBreadcrumbSeparatorM: '400 14px/150% Sage UI',
321
+ typographyBreadcrumbCurrentPageM: '400 14px/150% Sage UI',
319
322
  typographyButtonLabelS: '500 14px/150% Sage UI',
320
323
  typographyButtonLabelM: '500 14px/150% Sage UI',
321
324
  typographyButtonLabelL: '500 16px/150% Sage UI',
package/js/base/es6.d.ts CHANGED
@@ -302,11 +302,14 @@ declare namespace _default {
302
302
  const fontFamiliesOther: string;
303
303
  const borderRadiusCircle: string;
304
304
  const typographyAccordionTitleM: string;
305
+ const typographyAccordionTitleS: string;
305
306
  const typographyAccordionSubtitleM: string;
306
307
  const typographyAccordionParagraphM: string;
307
308
  const typographyActionPopoverMenuItemM: string;
308
309
  const typographyAnchorNavLabelM: string;
309
310
  const typographyBadgeLabelM: string;
311
+ const typographyBreadcrumbSeparatorM: string;
312
+ const typographyBreadcrumbCurrentPageM: string;
310
313
  const typographyButtonLabelS: string;
311
314
  const typographyButtonLabelM: string;
312
315
  const typographyButtonLabelL: string;
package/js/base/es6.js CHANGED
@@ -305,12 +305,15 @@ export default {
305
305
  fontFamiliesAndroid: 'Roboto',
306
306
  fontFamiliesOther: 'Open Sans',
307
307
  borderRadiusCircle: '50%',
308
- typographyAccordionTitleM: '700 20px/125% Sage UI',
308
+ typographyAccordionTitleM: '500 20px/125% Sage UI',
309
+ typographyAccordionTitleS: '500 16px/125% Sage UI',
309
310
  typographyAccordionSubtitleM: '400 14px/150% Sage UI',
310
311
  typographyAccordionParagraphM: '400 14px/150% Sage UI',
311
312
  typographyActionPopoverMenuItemM: '500 14px/150% Sage UI',
312
313
  typographyAnchorNavLabelM: '500 14px/150% Sage UI',
313
314
  typographyBadgeLabelM: '500 12px/150% Sage UI',
315
+ typographyBreadcrumbSeparatorM: '400 14px/150% Sage UI',
316
+ typographyBreadcrumbCurrentPageM: '400 14px/150% Sage UI',
314
317
  typographyButtonLabelS: '500 14px/150% Sage UI',
315
318
  typographyButtonLabelM: '500 14px/150% Sage UI',
316
319
  typographyButtonLabelL: '500 16px/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.43.0",
13
+ "version": "2.45.0",
14
14
  "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
15
15
  "tags": [
16
16
  "design tokens",
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 Thu, 06 Oct 2022 11:57:31 GMT
7
+ // Generated on Fri, 07 Oct 2022 10:08:14 GMT
8
8
 
9
9
  $metaName: Base Theme;
10
10
  $metaPublic: true;
@@ -308,12 +308,15 @@ $fontFamiliesIos: San Francisco;
308
308
  $fontFamiliesAndroid: Roboto;
309
309
  $fontFamiliesOther: Open Sans;
310
310
  $borderRadiusCircle: 50%;
311
- $typographyAccordionTitleM: 700 20px/125% Sage UI;
311
+ $typographyAccordionTitleM: 500 20px/125% Sage UI;
312
+ $typographyAccordionTitleS: 500 16px/125% Sage UI;
312
313
  $typographyAccordionSubtitleM: 400 14px/150% Sage UI;
313
314
  $typographyAccordionParagraphM: 400 14px/150% Sage UI;
314
315
  $typographyActionPopoverMenuItemM: 500 14px/150% Sage UI;
315
316
  $typographyAnchorNavLabelM: 500 14px/150% Sage UI;
316
317
  $typographyBadgeLabelM: 500 12px/150% Sage UI;
318
+ $typographyBreadcrumbSeparatorM: 400 14px/150% Sage UI;
319
+ $typographyBreadcrumbCurrentPageM: 400 14px/150% Sage UI;
317
320
  $typographyButtonLabelS: 500 14px/150% Sage UI;
318
321
  $typographyButtonLabelM: 500 14px/150% Sage UI;
319
322
  $typographyButtonLabelL: 500 16px/150% Sage UI;
Binary file