@sage/design-tokens 2.37.1 → 2.40.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 +3 -1
  2. package/css/base.css +3 -1
  3. package/data/tokens.json +20 -1
  4. package/docs/tokens/base/colors/index.html +21 -0
  5. package/docs/tokens/base/index.html +42 -0
  6. package/docs/tokens/base/typography/index.html +21 -0
  7. package/docs/tokens/index.html +42 -0
  8. package/ios/base.h +3 -1
  9. package/js/base/common.d.ts +2 -0
  10. package/js/base/common.js +3 -1
  11. package/js/base/es6.d.ts +2 -0
  12. package/js/base/es6.js +2 -0
  13. package/package.json +1 -1
  14. package/sage-design-tokens-2.40.0.tgz +0 -0
  15. package/scss/base.scss +3 -1
  16. package/sage-design-tokens-2.37.1.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 Mon, 27 Jun 2022 12:47:52 GMT
5
+ Generated on Wed, 13 Jul 2022 11:25:18 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -12,6 +12,7 @@
12
12
  <string name="colorsUtilityMajor200">#99adb7ff</string>
13
13
  <string name="colorsUtilityMajor300">#668494ff</string>
14
14
  <string name="colorsUtilityMajor400">#335b70ff</string>
15
+ <string name="colorsUtilityMajor450">#19475eff</string>
15
16
  <string name="colorsUtilityMajor500">#00324cff</string>
16
17
  <string name="colorsUtilityMajor800">#00141eff</string>
17
18
  <string name="colorsUtilityMajor025">#f2f5f6ff</string>
@@ -315,6 +316,7 @@
315
316
  <string name="typographyCardSelectTitleM">Bold 16px/150% Sage UI</string>
316
317
  <string name="typographyCardSelectSubtitleM">Medium 14px/150% Sage UI</string>
317
318
  <string name="typographyCardSelectParagraphM">Regular 14px/150% Sage UI</string>
319
+ <string name="typographyCardSelectFooterM">Regular 14px/150% Sage UI</string>
318
320
  <string name="typographyDatePickerCalendarDateM">Medium 14px/150% Sage UI</string>
319
321
  <string name="typographyDatePickerCalendarDayM">Bold 14px/150% Sage UI</string>
320
322
  <string name="typographyDatePickerCalendarMonthM">Bold 16px/125% 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 Mon, 27 Jun 2022 12:47:52 GMT
7
+ * Generated on Wed, 13 Jul 2022 11:25:18 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -15,6 +15,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
15
15
  --colorsUtilityMajor200: #99adb7ff;
16
16
  --colorsUtilityMajor300: #668494ff;
17
17
  --colorsUtilityMajor400: #335b70ff;
18
+ --colorsUtilityMajor450: #19475eff;
18
19
  --colorsUtilityMajor500: #00324cff;
19
20
  --colorsUtilityMajor800: #00141eff;
20
21
  --colorsUtilityMajor025: #f2f5f6ff;
@@ -318,6 +319,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
318
319
  --typographyCardSelectTitleM: 700 16px/150% Sage UI;
319
320
  --typographyCardSelectSubtitleM: 500 14px/150% Sage UI;
320
321
  --typographyCardSelectParagraphM: 400 14px/150% Sage UI;
322
+ --typographyCardSelectFooterM: 400 14px/150% Sage UI;
321
323
  --typographyDatePickerCalendarDateM: 500 14px/150% Sage UI;
322
324
  --typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
323
325
  --typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
package/data/tokens.json CHANGED
@@ -38,6 +38,10 @@
38
38
  "type": "color",
39
39
  "description": "#335B70"
40
40
  },
41
+ "450": {
42
+ "value": "#19475eff",
43
+ "type": "color"
44
+ },
41
45
  "500": {
42
46
  "value": "#00324cff",
43
47
  "type": "color",
@@ -1771,6 +1775,21 @@
1771
1775
  },
1772
1776
  "type": "typography"
1773
1777
  }
1778
+ },
1779
+ "footer": {
1780
+ "m": {
1781
+ "value": {
1782
+ "fontFamily": "Sage UI",
1783
+ "fontWeight": "Regular",
1784
+ "lineHeight": "150%",
1785
+ "fontSize": "14px",
1786
+ "letterSpacing": "0%",
1787
+ "paragraphSpacing": "0",
1788
+ "textDecoration": "none",
1789
+ "textCase": "none"
1790
+ },
1791
+ "type": "typography"
1792
+ }
1774
1793
  }
1775
1794
  },
1776
1795
  "datePicker": {
@@ -2464,7 +2483,7 @@
2464
2483
  "textCase": "none"
2465
2484
  },
2466
2485
  "type": "typography",
2467
- "description": "feat(data): Small font size, not recommended for use, as not accessible"
2486
+ "description": "Small font size, not recommended for use, as not accessible"
2468
2487
  },
2469
2488
  "m": {
2470
2489
  "value": {
package/docs/tokens/base/colors/index.html CHANGED
@@ -390,6 +390,27 @@
390
390
 
391
391
  </td>
392
392
  </tr>
393
+ <tr>
394
+ <td class="with-icons is-vcentered"
395
+ id="base-colorsUtilityMajor450"
396
+ title="theme: base; category: colors; group: utility; name: major; variant: 450; ">
397
+ colorsUtilityMajor450
398
+ <a href="#base-colorsUtilityMajor450"
399
+ title="permalink"
400
+ class="permalink">
401
+ 🔗
402
+ </a>
403
+ </td>
404
+ <td class="is-vcentered">
405
+ <pre>#19475eff</pre>
406
+ </td>
407
+ <td class="is-vcentered">
408
+ <div class="table__color-preview"
409
+ style="background-color: #19475eff;">
410
+ </div>
411
+
412
+ </td>
413
+ </tr>
393
414
  <tr>
394
415
  <td class="with-icons is-vcentered"
395
416
  id="base-colorsUtilityMajor500"
package/docs/tokens/base/index.html CHANGED
@@ -386,6 +386,27 @@
386
386
 
387
387
  </td>
388
388
  </tr>
389
+ <tr>
390
+ <td class="with-icons is-vcentered"
391
+ id="base-colorsUtilityMajor450"
392
+ title="theme: base; category: colors; group: utility; name: major; variant: 450; ">
393
+ colorsUtilityMajor450
394
+ <a href="#base-colorsUtilityMajor450"
395
+ title="permalink"
396
+ class="permalink">
397
+ 🔗
398
+ </a>
399
+ </td>
400
+ <td class="is-vcentered">
401
+ <pre>#19475eff</pre>
402
+ </td>
403
+ <td class="is-vcentered">
404
+ <div class="table__color-preview"
405
+ style="background-color: #19475eff;">
406
+ </div>
407
+
408
+ </td>
409
+ </tr>
389
410
  <tr>
390
411
  <td class="with-icons is-vcentered"
391
412
  id="base-colorsUtilityMajor500"
@@ -6932,6 +6953,27 @@
6932
6953
 
6933
6954
  </td>
6934
6955
  </tr>
6956
+ <tr>
6957
+ <td class="with-icons is-vcentered"
6958
+ id="base-typographyCardSelectFooterM"
6959
+ title="theme: base; category: typography; group: cardSelect; name: footer; variant: m; ">
6960
+ typographyCardSelectFooterM
6961
+ <a href="#base-typographyCardSelectFooterM"
6962
+ title="permalink"
6963
+ class="permalink">
6964
+ 🔗
6965
+ </a>
6966
+ </td>
6967
+ <td class="is-vcentered">
6968
+ <pre>400 14px/150% Sage UI</pre>
6969
+ </td>
6970
+ <td class="is-vcentered">
6971
+ <div class="table__typography-preview">
6972
+ n/a
6973
+ </div>
6974
+
6975
+ </td>
6976
+ </tr>
6935
6977
  <tr>
6936
6978
  <td class="with-icons is-vcentered"
6937
6979
  id="base-typographyDatePickerCalendarDateM"
package/docs/tokens/base/typography/index.html CHANGED
@@ -558,6 +558,27 @@
558
558
 
559
559
  </td>
560
560
  </tr>
561
+ <tr>
562
+ <td class="with-icons is-vcentered"
563
+ id="base-typographyCardSelectFooterM"
564
+ title="theme: base; category: typography; group: cardSelect; name: footer; variant: m; ">
565
+ typographyCardSelectFooterM
566
+ <a href="#base-typographyCardSelectFooterM"
567
+ title="permalink"
568
+ class="permalink">
569
+ 🔗
570
+ </a>
571
+ </td>
572
+ <td class="is-vcentered">
573
+ <pre>400 14px/150% Sage UI</pre>
574
+ </td>
575
+ <td class="is-vcentered">
576
+ <div class="table__typography-preview">
577
+ n/a
578
+ </div>
579
+
580
+ </td>
581
+ </tr>
561
582
  <tr>
562
583
  <td class="with-icons is-vcentered"
563
584
  id="base-typographyDatePickerCalendarDateM"
package/docs/tokens/index.html CHANGED
@@ -392,6 +392,27 @@
392
392
 
393
393
  </td>
394
394
  </tr>
395
+ <tr>
396
+ <td class="with-icons is-vcentered"
397
+ id="base-colorsUtilityMajor450"
398
+ title="theme: base; category: colors; group: utility; name: major; variant: 450; ">
399
+ colorsUtilityMajor450
400
+ <a href="#base-colorsUtilityMajor450"
401
+ title="permalink"
402
+ class="permalink">
403
+ 🔗
404
+ </a>
405
+ </td>
406
+ <td class="is-vcentered">
407
+ <pre>#19475eff</pre>
408
+ </td>
409
+ <td class="is-vcentered">
410
+ <div class="table__color-preview"
411
+ style="background-color: #19475eff;">
412
+ </div>
413
+
414
+ </td>
415
+ </tr>
395
416
  <tr>
396
417
  <td class="with-icons is-vcentered"
397
418
  id="base-colorsUtilityMajor500"
@@ -6988,6 +7009,27 @@
6988
7009
 
6989
7010
  </td>
6990
7011
  </tr>
7012
+ <tr>
7013
+ <td class="with-icons is-vcentered"
7014
+ id="base-typographyCardSelectFooterM"
7015
+ title="theme: base; category: typography; group: cardSelect; name: footer; variant: m; ">
7016
+ typographyCardSelectFooterM
7017
+ <a href="#base-typographyCardSelectFooterM"
7018
+ title="permalink"
7019
+ class="permalink">
7020
+ 🔗
7021
+ </a>
7022
+ </td>
7023
+ <td class="is-vcentered">
7024
+ <pre>400 14px/150% Sage UI</pre>
7025
+ </td>
7026
+ <td class="is-vcentered">
7027
+ <div class="table__typography-preview">
7028
+ n/a
7029
+ </div>
7030
+
7031
+ </td>
7032
+ </tr>
6991
7033
  <tr>
6992
7034
  <td class="with-icons is-vcentered"
6993
7035
  id="base-typographyDatePickerCalendarDateM"
package/ios/base.h CHANGED
@@ -4,7 +4,7 @@
4
4
  //
5
5
 
6
6
  // Do not edit directly
7
- // Generated on Mon, 27 Jun 2022 12:47:52 GMT
7
+ // Generated on Wed, 13 Jul 2022 11:25:18 GMT
8
8
 
9
9
 
10
10
  #import <Foundation/Foundation.h>
@@ -17,6 +17,7 @@
17
17
  #define colorsUtilityMajor200 #99adb7ff
18
18
  #define colorsUtilityMajor300 #668494ff
19
19
  #define colorsUtilityMajor400 #335b70ff
20
+ #define colorsUtilityMajor450 #19475eff
20
21
  #define colorsUtilityMajor500 #00324cff
21
22
  #define colorsUtilityMajor800 #00141eff
22
23
  #define colorsUtilityMajor025 #f2f5f6ff
@@ -320,6 +321,7 @@
320
321
  #define typographyCardSelectTitleM Bold 16px/150% Sage UI
321
322
  #define typographyCardSelectSubtitleM Medium 14px/150% Sage UI
322
323
  #define typographyCardSelectParagraphM Regular 14px/150% Sage UI
324
+ #define typographyCardSelectFooterM Regular 14px/150% Sage UI
323
325
  #define typographyDatePickerCalendarDateM Medium 14px/150% Sage UI
324
326
  #define typographyDatePickerCalendarDayM Bold 14px/150% Sage UI
325
327
  #define typographyDatePickerCalendarMonthM Bold 16px/125% Sage UI
package/js/base/common.d.ts CHANGED
@@ -5,6 +5,7 @@ export const colorsUtilityMajor150: string;
5
5
  export const colorsUtilityMajor200: string;
6
6
  export const colorsUtilityMajor300: string;
7
7
  export const colorsUtilityMajor400: string;
8
+ export const colorsUtilityMajor450: string;
8
9
  export const colorsUtilityMajor500: string;
9
10
  export const colorsUtilityMajor800: string;
10
11
  export const colorsUtilityMajor025: string;
@@ -308,6 +309,7 @@ export const typographyCardParagraphM: string;
308
309
  export const typographyCardSelectTitleM: string;
309
310
  export const typographyCardSelectSubtitleM: string;
310
311
  export const typographyCardSelectParagraphM: string;
312
+ export const typographyCardSelectFooterM: string;
311
313
  export const typographyDatePickerCalendarDateM: string;
312
314
  export const typographyDatePickerCalendarDayM: string;
313
315
  export const typographyDatePickerCalendarMonthM: 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 Mon, 27 Jun 2022 12:47:52 GMT
7
+ * Generated on Wed, 13 Jul 2022 11:25:18 GMT
8
8
  */
9
9
 
10
10
  module.exports = {
@@ -15,6 +15,7 @@ module.exports = {
15
15
  colorsUtilityMajor200: '#99adb7ff',
16
16
  colorsUtilityMajor300: '#668494ff',
17
17
  colorsUtilityMajor400: '#335b70ff',
18
+ colorsUtilityMajor450: '#19475eff',
18
19
  colorsUtilityMajor500: '#00324cff',
19
20
  colorsUtilityMajor800: '#00141eff',
20
21
  colorsUtilityMajor025: '#f2f5f6ff',
@@ -318,6 +319,7 @@ module.exports = {
318
319
  typographyCardSelectTitleM: '700 16px/150% Sage UI',
319
320
  typographyCardSelectSubtitleM: '500 14px/150% Sage UI',
320
321
  typographyCardSelectParagraphM: '400 14px/150% Sage UI',
322
+ typographyCardSelectFooterM: '400 14px/150% Sage UI',
321
323
  typographyDatePickerCalendarDateM: '500 14px/150% Sage UI',
322
324
  typographyDatePickerCalendarDayM: '700 14px/150% Sage UI',
323
325
  typographyDatePickerCalendarMonthM: '700 16px/125% Sage UI',
package/js/base/es6.d.ts CHANGED
@@ -6,6 +6,7 @@ declare namespace _default {
6
6
  const colorsUtilityMajor200: string;
7
7
  const colorsUtilityMajor300: string;
8
8
  const colorsUtilityMajor400: string;
9
+ const colorsUtilityMajor450: string;
9
10
  const colorsUtilityMajor500: string;
10
11
  const colorsUtilityMajor800: string;
11
12
  const colorsUtilityMajor025: string;
@@ -309,6 +310,7 @@ declare namespace _default {
309
310
  const typographyCardSelectTitleM: string;
310
311
  const typographyCardSelectSubtitleM: string;
311
312
  const typographyCardSelectParagraphM: string;
313
+ const typographyCardSelectFooterM: string;
312
314
  const typographyDatePickerCalendarDateM: string;
313
315
  const typographyDatePickerCalendarDayM: string;
314
316
  const typographyDatePickerCalendarMonthM: string;
package/js/base/es6.js CHANGED
@@ -10,6 +10,7 @@ export default {
10
10
  colorsUtilityMajor200: '#99adb7ff',
11
11
  colorsUtilityMajor300: '#668494ff',
12
12
  colorsUtilityMajor400: '#335b70ff',
13
+ colorsUtilityMajor450: '#19475eff',
13
14
  colorsUtilityMajor500: '#00324cff',
14
15
  colorsUtilityMajor800: '#00141eff',
15
16
  colorsUtilityMajor025: '#f2f5f6ff',
@@ -313,6 +314,7 @@ export default {
313
314
  typographyCardSelectTitleM: '700 16px/150% Sage UI',
314
315
  typographyCardSelectSubtitleM: '500 14px/150% Sage UI',
315
316
  typographyCardSelectParagraphM: '400 14px/150% Sage UI',
317
+ typographyCardSelectFooterM: '400 14px/150% Sage UI',
316
318
  typographyDatePickerCalendarDateM: '500 14px/150% Sage UI',
317
319
  typographyDatePickerCalendarDayM: '700 14px/150% Sage UI',
318
320
  typographyDatePickerCalendarMonthM: '700 16px/125% 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.37.1",
13
+ "version": "2.40.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.40.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 Mon, 27 Jun 2022 12:47:52 GMT
7
+ // Generated on Wed, 13 Jul 2022 11:25:18 GMT
8
8
 
9
9
  $metaName: Base Theme;
10
10
  $metaPublic: true;
@@ -13,6 +13,7 @@ $colorsUtilityMajor150: #b3c2c9ff;
13
13
  $colorsUtilityMajor200: #99adb7ff;
14
14
  $colorsUtilityMajor300: #668494ff;
15
15
  $colorsUtilityMajor400: #335b70ff;
16
+ $colorsUtilityMajor450: #19475eff;
16
17
  $colorsUtilityMajor500: #00324cff;
17
18
  $colorsUtilityMajor800: #00141eff;
18
19
  $colorsUtilityMajor025: #f2f5f6ff;
@@ -316,6 +317,7 @@ $typographyCardParagraphM: 400 14px/150% Sage UI;
316
317
  $typographyCardSelectTitleM: 700 16px/150% Sage UI;
317
318
  $typographyCardSelectSubtitleM: 500 14px/150% Sage UI;
318
319
  $typographyCardSelectParagraphM: 400 14px/150% Sage UI;
320
+ $typographyCardSelectFooterM: 400 14px/150% Sage UI;
319
321
  $typographyDatePickerCalendarDateM: 500 14px/150% Sage UI;
320
322
  $typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
321
323
  $typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
package/sage-design-tokens-2.37.1.tgz DELETED
Binary file