@sage/design-tokens 2.47.0 → 2.49.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 (16) hide show
  1. package/android/base.xml +4 -2
  2. package/css/base.css +4 -2
  3. package/data/tokens.json +11 -1
  4. package/docs/tokens/base/colors/index.html +42 -0
  5. package/docs/tokens/base/index.html +43 -1
  6. package/docs/tokens/base/typography/index.html +1 -1
  7. package/docs/tokens/index.html +43 -1
  8. package/ios/base.h +4 -2
  9. package/js/base/common.d.ts +2 -0
  10. package/js/base/common.js +4 -2
  11. package/js/base/es6.d.ts +2 -0
  12. package/js/base/es6.js +3 -1
  13. package/package.json +1 -1
  14. package/sage-design-tokens-2.49.0.tgz +0 -0
  15. package/scss/base.scss +4 -2
  16. package/sage-design-tokens-2.47.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 Thu, 13 Oct 2022 16:10:44 GMT
5
+ Generated on Mon, 14 Nov 2022 11:43:00 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -21,6 +21,7 @@
21
21
  <string name="colorsUtilityMajor050">#e6ebedff</string>
22
22
  <string name="colorsUtilityMajor075">#d9e0e4ff</string>
23
23
  <string name="colorsUtilityMajorTransparent">#00000000</string>
24
+ <string name="colorsUtilityYin100">#000000ff</string>
24
25
  <string name="colorsUtilityYin030">#0000004d</string>
25
26
  <string name="colorsUtilityYin055">#0000008c</string>
26
27
  <string name="colorsUtilityYin065">#000000a6</string>
@@ -122,6 +123,7 @@
122
123
  <string name="colorsSemanticInfoYang100">#ffffffff</string>
123
124
  <string name="colorsLogo">#00d639ff</string>
124
125
  <string name="colorsTransparent">#00000000</string>
126
+ <string name="colorsYin100">#000000ff</string>
125
127
  <string name="colorsYin030">#0000004d</string>
126
128
  <string name="colorsYin055">#0000008c</string>
127
129
  <string name="colorsYin065">#000000a6</string>
@@ -387,7 +389,7 @@
387
389
  <string name="typographyLinkTextL">Regular 16px/150% Sage UI</string>
388
390
  <string name="typographyMenuLabelM">Medium 14px/150% Sage UI</string>
389
391
  <string name="typographyMenuLabelL">Medium 16px/150% Sage UI</string>
390
- <string name="typographyMenuSegmentTitleM">Medium 12px/150% Sage UI</string>
392
+ <string name="typographyMenuSegmentTitleM">Medium 14px/150% Sage UI</string>
391
393
  <string name="typographyMessageHeadingM">Bold 14px/150% Sage UI</string>
392
394
  <string name="typographyMessageHeadingL">Bold 16px/150% Sage UI</string>
393
395
  <string name="typographyMessageTextM">Regular 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 Thu, 13 Oct 2022 16:10:44 GMT
7
+ * Generated on Mon, 14 Nov 2022 11:43:00 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -24,6 +24,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
24
24
  --colorsUtilityMajor050: #e6ebedff;
25
25
  --colorsUtilityMajor075: #d9e0e4ff;
26
26
  --colorsUtilityMajorTransparent: #00000000;
27
+ --colorsUtilityYin100: #000000ff;
27
28
  --colorsUtilityYin030: #0000004d;
28
29
  --colorsUtilityYin055: #0000008c;
29
30
  --colorsUtilityYin065: #000000a6;
@@ -125,6 +126,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
125
126
  --colorsSemanticInfoYang100: #ffffffff;
126
127
  --colorsLogo: #00d639ff;
127
128
  --colorsTransparent: #00000000;
129
+ --colorsYin100: #000000ff;
128
130
  --colorsYin030: #0000004d;
129
131
  --colorsYin055: #0000008c;
130
132
  --colorsYin065: #000000a6;
@@ -390,7 +392,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
390
392
  --typographyLinkTextL: 400 16px/150% Sage UI;
391
393
  --typographyMenuLabelM: 500 14px/150% Sage UI;
392
394
  --typographyMenuLabelL: 500 16px/150% Sage UI;
393
- --typographyMenuSegmentTitleM: 500 12px/150% Sage UI;
395
+ --typographyMenuSegmentTitleM: 500 14px/150% Sage UI;
394
396
  --typographyMessageHeadingM: 700 14px/150% Sage UI;
395
397
  --typographyMessageHeadingL: 700 16px/150% Sage UI;
396
398
  --typographyMessageTextM: 400 14px/150% Sage UI;
package/data/tokens.json CHANGED
@@ -82,6 +82,11 @@
82
82
  }
83
83
  },
84
84
  "yin": {
85
+ "100": {
86
+ "value": "#000000ff",
87
+ "type": "color",
88
+ "description": "NOT for text"
89
+ },
85
90
  "030": {
86
91
  "value": "#0000004d",
87
92
  "type": "color"
@@ -577,6 +582,11 @@
577
582
  "description": "Reference only. Do not use in components."
578
583
  },
579
584
  "yin": {
585
+ "100": {
586
+ "value": "#000000ff",
587
+ "type": "color",
588
+ "description": "Reference only. Do not use in components."
589
+ },
580
590
  "030": {
581
591
  "value": "#0000004d",
582
592
  "type": "color",
@@ -2640,7 +2650,7 @@
2640
2650
  "fontFamily": "Sage UI",
2641
2651
  "fontWeight": "Medium",
2642
2652
  "lineHeight": "150%",
2643
- "fontSize": "12px",
2653
+ "fontSize": "14px",
2644
2654
  "letterSpacing": "0%",
2645
2655
  "paragraphSpacing": "0px",
2646
2656
  "textDecoration": "none",
package/docs/tokens/base/colors/index.html CHANGED
@@ -579,6 +579,27 @@
579
579
 
580
580
  </td>
581
581
  </tr>
582
+ <tr>
583
+ <td class="with-icons is-vcentered"
584
+ id="base-colorsUtilityYin100"
585
+ title="theme: base; category: colors; group: utility; name: yin; variant: 100; ">
586
+ colorsUtilityYin100
587
+ <a href="#base-colorsUtilityYin100"
588
+ title="permalink"
589
+ class="permalink">
590
+ 🔗
591
+ </a>
592
+ </td>
593
+ <td class="is-vcentered">
594
+ <pre>#000000ff</pre>
595
+ </td>
596
+ <td class="is-vcentered">
597
+ <div class="table__color-preview"
598
+ style="background-color: #000000ff;">
599
+ </div>
600
+
601
+ </td>
602
+ </tr>
582
603
  <tr>
583
604
  <td class="with-icons is-vcentered"
584
605
  id="base-colorsUtilityYin030"
@@ -2700,6 +2721,27 @@
2700
2721
 
2701
2722
  </td>
2702
2723
  </tr>
2724
+ <tr>
2725
+ <td class="with-icons is-vcentered"
2726
+ id="base-colorsYin100"
2727
+ title="theme: base; category: colors; name: yin; variant: 100; ">
2728
+ colorsYin100
2729
+ <a href="#base-colorsYin100"
2730
+ title="permalink"
2731
+ class="permalink">
2732
+ 🔗
2733
+ </a>
2734
+ </td>
2735
+ <td class="is-vcentered">
2736
+ <pre>#000000ff</pre>
2737
+ </td>
2738
+ <td class="is-vcentered">
2739
+ <div class="table__color-preview"
2740
+ style="background-color: #000000ff;">
2741
+ </div>
2742
+
2743
+ </td>
2744
+ </tr>
2703
2745
  <tr>
2704
2746
  <td class="with-icons is-vcentered"
2705
2747
  id="base-colorsYin030"
package/docs/tokens/base/index.html CHANGED
@@ -575,6 +575,27 @@
575
575
 
576
576
  </td>
577
577
  </tr>
578
+ <tr>
579
+ <td class="with-icons is-vcentered"
580
+ id="base-colorsUtilityYin100"
581
+ title="theme: base; category: colors; group: utility; name: yin; variant: 100; ">
582
+ colorsUtilityYin100
583
+ <a href="#base-colorsUtilityYin100"
584
+ title="permalink"
585
+ class="permalink">
586
+ 🔗
587
+ </a>
588
+ </td>
589
+ <td class="is-vcentered">
590
+ <pre>#000000ff</pre>
591
+ </td>
592
+ <td class="is-vcentered">
593
+ <div class="table__color-preview"
594
+ style="background-color: #000000ff;">
595
+ </div>
596
+
597
+ </td>
598
+ </tr>
578
599
  <tr>
579
600
  <td class="with-icons is-vcentered"
580
601
  id="base-colorsUtilityYin030"
@@ -2696,6 +2717,27 @@
2696
2717
 
2697
2718
  </td>
2698
2719
  </tr>
2720
+ <tr>
2721
+ <td class="with-icons is-vcentered"
2722
+ id="base-colorsYin100"
2723
+ title="theme: base; category: colors; name: yin; variant: 100; ">
2724
+ colorsYin100
2725
+ <a href="#base-colorsYin100"
2726
+ title="permalink"
2727
+ class="permalink">
2728
+ 🔗
2729
+ </a>
2730
+ </td>
2731
+ <td class="is-vcentered">
2732
+ <pre>#000000ff</pre>
2733
+ </td>
2734
+ <td class="is-vcentered">
2735
+ <div class="table__color-preview"
2736
+ style="background-color: #000000ff;">
2737
+ </div>
2738
+
2739
+ </td>
2740
+ </tr>
2699
2741
  <tr>
2700
2742
  <td class="with-icons is-vcentered"
2701
2743
  id="base-colorsYin030"
@@ -8456,7 +8498,7 @@
8456
8498
  </a>
8457
8499
  </td>
8458
8500
  <td class="is-vcentered">
8459
- <pre>500 12px/150% Sage UI</pre>
8501
+ <pre>500 14px/150% Sage UI</pre>
8460
8502
  </td>
8461
8503
  <td class="is-vcentered">
8462
8504
  <div class="table__typography-preview">
package/docs/tokens/base/typography/index.html CHANGED
@@ -1977,7 +1977,7 @@
1977
1977
  </a>
1978
1978
  </td>
1979
1979
  <td class="is-vcentered">
1980
- <pre>500 12px/150% Sage UI</pre>
1980
+ <pre>500 14px/150% Sage UI</pre>
1981
1981
  </td>
1982
1982
  <td class="is-vcentered">
1983
1983
  <div class="table__typography-preview">
package/docs/tokens/index.html CHANGED
@@ -581,6 +581,27 @@
581
581
 
582
582
  </td>
583
583
  </tr>
584
+ <tr>
585
+ <td class="with-icons is-vcentered"
586
+ id="base-colorsUtilityYin100"
587
+ title="theme: base; category: colors; group: utility; name: yin; variant: 100; ">
588
+ colorsUtilityYin100
589
+ <a href="#base-colorsUtilityYin100"
590
+ title="permalink"
591
+ class="permalink">
592
+ 🔗
593
+ </a>
594
+ </td>
595
+ <td class="is-vcentered">
596
+ <pre>#000000ff</pre>
597
+ </td>
598
+ <td class="is-vcentered">
599
+ <div class="table__color-preview"
600
+ style="background-color: #000000ff;">
601
+ </div>
602
+
603
+ </td>
604
+ </tr>
584
605
  <tr>
585
606
  <td class="with-icons is-vcentered"
586
607
  id="base-colorsUtilityYin030"
@@ -2702,6 +2723,27 @@
2702
2723
 
2703
2724
  </td>
2704
2725
  </tr>
2726
+ <tr>
2727
+ <td class="with-icons is-vcentered"
2728
+ id="base-colorsYin100"
2729
+ title="theme: base; category: colors; name: yin; variant: 100; ">
2730
+ colorsYin100
2731
+ <a href="#base-colorsYin100"
2732
+ title="permalink"
2733
+ class="permalink">
2734
+ 🔗
2735
+ </a>
2736
+ </td>
2737
+ <td class="is-vcentered">
2738
+ <pre>#000000ff</pre>
2739
+ </td>
2740
+ <td class="is-vcentered">
2741
+ <div class="table__color-preview"
2742
+ style="background-color: #000000ff;">
2743
+ </div>
2744
+
2745
+ </td>
2746
+ </tr>
2705
2747
  <tr>
2706
2748
  <td class="with-icons is-vcentered"
2707
2749
  id="base-colorsYin030"
@@ -8512,7 +8554,7 @@
8512
8554
  </a>
8513
8555
  </td>
8514
8556
  <td class="is-vcentered">
8515
- <pre>500 12px/150% Sage UI</pre>
8557
+ <pre>500 14px/150% Sage UI</pre>
8516
8558
  </td>
8517
8559
  <td class="is-vcentered">
8518
8560
  <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 Thu, 13 Oct 2022 16:10:44 GMT
7
+ // Generated on Mon, 14 Nov 2022 11:43:00 GMT
8
8
 
9
9
 
10
10
  #import <Foundation/Foundation.h>
@@ -26,6 +26,7 @@
26
26
  #define colorsUtilityMajor050 #e6ebedff
27
27
  #define colorsUtilityMajor075 #d9e0e4ff
28
28
  #define colorsUtilityMajorTransparent #00000000
29
+ #define colorsUtilityYin100 #000000ff
29
30
  #define colorsUtilityYin030 #0000004d
30
31
  #define colorsUtilityYin055 #0000008c
31
32
  #define colorsUtilityYin065 #000000a6
@@ -127,6 +128,7 @@
127
128
  #define colorsSemanticInfoYang100 #ffffffff
128
129
  #define colorsLogo #00d639ff
129
130
  #define colorsTransparent #00000000
131
+ #define colorsYin100 #000000ff
130
132
  #define colorsYin030 #0000004d
131
133
  #define colorsYin055 #0000008c
132
134
  #define colorsYin065 #000000a6
@@ -392,7 +394,7 @@
392
394
  #define typographyLinkTextL Regular 16px/150% Sage UI
393
395
  #define typographyMenuLabelM Medium 14px/150% Sage UI
394
396
  #define typographyMenuLabelL Medium 16px/150% Sage UI
395
- #define typographyMenuSegmentTitleM Medium 12px/150% Sage UI
397
+ #define typographyMenuSegmentTitleM Medium 14px/150% Sage UI
396
398
  #define typographyMessageHeadingM Bold 14px/150% Sage UI
397
399
  #define typographyMessageHeadingL Bold 16px/150% Sage UI
398
400
  #define typographyMessageTextM Regular 14px/150% Sage UI
package/js/base/common.d.ts CHANGED
@@ -14,6 +14,7 @@ export const colorsUtilityMajor040: string;
14
14
  export const colorsUtilityMajor050: string;
15
15
  export const colorsUtilityMajor075: string;
16
16
  export const colorsUtilityMajorTransparent: string;
17
+ export const colorsUtilityYin100: string;
17
18
  export const colorsUtilityYin030: string;
18
19
  export const colorsUtilityYin055: string;
19
20
  export const colorsUtilityYin065: string;
@@ -115,6 +116,7 @@ export const colorsSemanticInfoYin090: string;
115
116
  export const colorsSemanticInfoYang100: string;
116
117
  export const colorsLogo: string;
117
118
  export const colorsTransparent: string;
119
+ export const colorsYin100: string;
118
120
  export const colorsYin030: string;
119
121
  export const colorsYin055: string;
120
122
  export const colorsYin065: 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, 13 Oct 2022 16:10:44 GMT
7
+ * Generated on Mon, 14 Nov 2022 11:43:00 GMT
8
8
  */
9
9
 
10
10
  module.exports = {
@@ -24,6 +24,7 @@ module.exports = {
24
24
  colorsUtilityMajor050: '#e6ebedff',
25
25
  colorsUtilityMajor075: '#d9e0e4ff',
26
26
  colorsUtilityMajorTransparent: '#00000000',
27
+ colorsUtilityYin100: '#000000ff',
27
28
  colorsUtilityYin030: '#0000004d',
28
29
  colorsUtilityYin055: '#0000008c',
29
30
  colorsUtilityYin065: '#000000a6',
@@ -125,6 +126,7 @@ module.exports = {
125
126
  colorsSemanticInfoYang100: '#ffffffff',
126
127
  colorsLogo: '#00d639ff',
127
128
  colorsTransparent: '#00000000',
129
+ colorsYin100: '#000000ff',
128
130
  colorsYin030: '#0000004d',
129
131
  colorsYin055: '#0000008c',
130
132
  colorsYin065: '#000000a6',
@@ -390,7 +392,7 @@ module.exports = {
390
392
  typographyLinkTextL: '400 16px/150% Sage UI',
391
393
  typographyMenuLabelM: '500 14px/150% Sage UI',
392
394
  typographyMenuLabelL: '500 16px/150% Sage UI',
393
- typographyMenuSegmentTitleM: '500 12px/150% Sage UI',
395
+ typographyMenuSegmentTitleM: '500 14px/150% Sage UI',
394
396
  typographyMessageHeadingM: '700 14px/150% Sage UI',
395
397
  typographyMessageHeadingL: '700 16px/150% Sage UI',
396
398
  typographyMessageTextM: '400 14px/150% Sage UI',
package/js/base/es6.d.ts CHANGED
@@ -15,6 +15,7 @@ declare namespace _default {
15
15
  const colorsUtilityMajor050: string;
16
16
  const colorsUtilityMajor075: string;
17
17
  const colorsUtilityMajorTransparent: string;
18
+ const colorsUtilityYin100: string;
18
19
  const colorsUtilityYin030: string;
19
20
  const colorsUtilityYin055: string;
20
21
  const colorsUtilityYin065: string;
@@ -116,6 +117,7 @@ declare namespace _default {
116
117
  const colorsSemanticInfoYang100: string;
117
118
  const colorsLogo: string;
118
119
  const colorsTransparent: string;
120
+ const colorsYin100: string;
119
121
  const colorsYin030: string;
120
122
  const colorsYin055: string;
121
123
  const colorsYin065: string;
package/js/base/es6.js CHANGED
@@ -19,6 +19,7 @@ export default {
19
19
  colorsUtilityMajor050: '#e6ebedff',
20
20
  colorsUtilityMajor075: '#d9e0e4ff',
21
21
  colorsUtilityMajorTransparent: '#00000000',
22
+ colorsUtilityYin100: '#000000ff',
22
23
  colorsUtilityYin030: '#0000004d',
23
24
  colorsUtilityYin055: '#0000008c',
24
25
  colorsUtilityYin065: '#000000a6',
@@ -120,6 +121,7 @@ export default {
120
121
  colorsSemanticInfoYang100: '#ffffffff',
121
122
  colorsLogo: '#00d639ff',
122
123
  colorsTransparent: '#00000000',
124
+ colorsYin100: '#000000ff',
123
125
  colorsYin030: '#0000004d',
124
126
  colorsYin055: '#0000008c',
125
127
  colorsYin065: '#000000a6',
@@ -385,7 +387,7 @@ export default {
385
387
  typographyLinkTextL: '400 16px/150% Sage UI',
386
388
  typographyMenuLabelM: '500 14px/150% Sage UI',
387
389
  typographyMenuLabelL: '500 16px/150% Sage UI',
388
- typographyMenuSegmentTitleM: '500 12px/150% Sage UI',
390
+ typographyMenuSegmentTitleM: '500 14px/150% Sage UI',
389
391
  typographyMessageHeadingM: '700 14px/150% Sage UI',
390
392
  typographyMessageHeadingL: '700 16px/150% Sage UI',
391
393
  typographyMessageTextM: '400 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.47.0",
13
+ "version": "2.49.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.49.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 Thu, 13 Oct 2022 16:10:44 GMT
7
+ // Generated on Mon, 14 Nov 2022 11:43:00 GMT
8
8
 
9
9
  $metaName: Base Theme;
10
10
  $metaPublic: true;
@@ -22,6 +22,7 @@ $colorsUtilityMajor040: #edf1f2ff;
22
22
  $colorsUtilityMajor050: #e6ebedff;
23
23
  $colorsUtilityMajor075: #d9e0e4ff;
24
24
  $colorsUtilityMajorTransparent: #00000000;
25
+ $colorsUtilityYin100: #000000ff;
25
26
  $colorsUtilityYin030: #0000004d;
26
27
  $colorsUtilityYin055: #0000008c;
27
28
  $colorsUtilityYin065: #000000a6;
@@ -123,6 +124,7 @@ $colorsSemanticInfoYin090: #000000e6;
123
124
  $colorsSemanticInfoYang100: #ffffffff;
124
125
  $colorsLogo: #00d639ff;
125
126
  $colorsTransparent: #00000000;
127
+ $colorsYin100: #000000ff;
126
128
  $colorsYin030: #0000004d;
127
129
  $colorsYin055: #0000008c;
128
130
  $colorsYin065: #000000a6;
@@ -388,7 +390,7 @@ $typographyLinkTextM: 400 14px/150% Sage UI;
388
390
  $typographyLinkTextL: 400 16px/150% Sage UI;
389
391
  $typographyMenuLabelM: 500 14px/150% Sage UI;
390
392
  $typographyMenuLabelL: 500 16px/150% Sage UI;
391
- $typographyMenuSegmentTitleM: 500 12px/150% Sage UI;
393
+ $typographyMenuSegmentTitleM: 500 14px/150% Sage UI;
392
394
  $typographyMessageHeadingM: 700 14px/150% Sage UI;
393
395
  $typographyMessageHeadingL: 700 16px/150% Sage UI;
394
396
  $typographyMessageTextM: 400 14px/150% Sage UI;
package/sage-design-tokens-2.47.0.tgz DELETED
Binary file