@sage/design-tokens 2.36.0 → 2.38.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 +3 -2
- package/css/base.css +3 -2
- package/data/tokens.json +5 -1
- package/docs/tokens/base/colors/index.html +21 -0
- package/docs/tokens/base/index.html +22 -1
- package/docs/tokens/base/typography/index.html +1 -1
- package/docs/tokens/index.html +22 -1
- package/ios/base.h +3 -2
- package/js/base/common.d.ts +1 -0
- package/js/base/common.js +3 -2
- package/js/base/es6.d.ts +1 -0
- package/js/base/es6.js +2 -1
- package/package.json +1 -1
- package/sage-design-tokens-2.38.0.tgz +0 -0
- package/scss/base.scss +3 -2
- package/sage-design-tokens-2.36.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
|
|
5
|
+
Generated on Tue, 28 Jun 2022 14:03:47 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,7 +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>
|
|
318
|
-
<string name="typographyDatePickerCalendarDateM">
|
|
319
|
+
<string name="typographyDatePickerCalendarDateM">Medium 14px/150% Sage UI</string>
|
|
319
320
|
<string name="typographyDatePickerCalendarDayM">Bold 14px/150% Sage UI</string>
|
|
320
321
|
<string name="typographyDatePickerCalendarMonthM">Bold 16px/125% Sage UI</string>
|
|
321
322
|
<string name="typographyDialogTitleXs">Bold 24px/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
|
|
7
|
+
* Generated on Tue, 28 Jun 2022 14:03:47 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,7 +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;
|
|
321
|
-
--typographyDatePickerCalendarDateM:
|
|
322
|
+
--typographyDatePickerCalendarDateM: 500 14px/150% Sage UI;
|
|
322
323
|
--typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
|
|
323
324
|
--typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
|
|
324
325
|
--typographyDialogTitleXs: 700 24px/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",
|
|
@@ -1779,7 +1783,7 @@
|
|
|
1779
1783
|
"m": {
|
|
1780
1784
|
"value": {
|
|
1781
1785
|
"fontFamily": "Sage UI",
|
|
1782
|
-
"fontWeight": "
|
|
1786
|
+
"fontWeight": "Medium",
|
|
1783
1787
|
"lineHeight": "150%",
|
|
1784
1788
|
"fontSize": "14px",
|
|
1785
1789
|
"letterSpacing": "0%",
|
|
@@ -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"
|
|
@@ -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"
|
|
@@ -6944,7 +6965,7 @@
|
|
|
6944
6965
|
</a>
|
|
6945
6966
|
</td>
|
|
6946
6967
|
<td class="is-vcentered">
|
|
6947
|
-
<pre>
|
|
6968
|
+
<pre>500 14px/150% Sage UI</pre>
|
|
6948
6969
|
</td>
|
|
6949
6970
|
<td class="is-vcentered">
|
|
6950
6971
|
<div class="table__typography-preview">
|
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"
|
|
@@ -7000,7 +7021,7 @@
|
|
|
7000
7021
|
</a>
|
|
7001
7022
|
</td>
|
|
7002
7023
|
<td class="is-vcentered">
|
|
7003
|
-
<pre>
|
|
7024
|
+
<pre>500 14px/150% Sage UI</pre>
|
|
7004
7025
|
</td>
|
|
7005
7026
|
<td class="is-vcentered">
|
|
7006
7027
|
<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
|
|
7
|
+
// Generated on Tue, 28 Jun 2022 14:03:47 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,7 +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
|
|
323
|
-
#define typographyDatePickerCalendarDateM
|
|
324
|
+
#define typographyDatePickerCalendarDateM Medium 14px/150% Sage UI
|
|
324
325
|
#define typographyDatePickerCalendarDayM Bold 14px/150% Sage UI
|
|
325
326
|
#define typographyDatePickerCalendarMonthM Bold 16px/125% Sage UI
|
|
326
327
|
#define typographyDialogTitleXs Bold 24px/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;
|
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
|
|
7
|
+
* Generated on Tue, 28 Jun 2022 14:03:47 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,7 +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',
|
|
321
|
-
typographyDatePickerCalendarDateM: '
|
|
322
|
+
typographyDatePickerCalendarDateM: '500 14px/150% Sage UI',
|
|
322
323
|
typographyDatePickerCalendarDayM: '700 14px/150% Sage UI',
|
|
323
324
|
typographyDatePickerCalendarMonthM: '700 16px/125% Sage UI',
|
|
324
325
|
typographyDialogTitleXs: '700 24px/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;
|
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,7 +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',
|
|
316
|
-
typographyDatePickerCalendarDateM: '
|
|
317
|
+
typographyDatePickerCalendarDateM: '500 14px/150% Sage UI',
|
|
317
318
|
typographyDatePickerCalendarDayM: '700 14px/150% Sage UI',
|
|
318
319
|
typographyDatePickerCalendarMonthM: '700 16px/125% Sage UI',
|
|
319
320
|
typographyDialogTitleXs: '700 24px/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.
|
|
13
|
+
"version": "2.38.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
|
|
7
|
+
// Generated on Tue, 28 Jun 2022 14:03:47 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,7 +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;
|
|
319
|
-
$typographyDatePickerCalendarDateM:
|
|
320
|
+
$typographyDatePickerCalendarDateM: 500 14px/150% Sage UI;
|
|
320
321
|
$typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
|
|
321
322
|
$typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
|
|
322
323
|
$typographyDialogTitleXs: 700 24px/125% Sage UI;
|
|
Binary file
|