@sage/design-tokens 2.9.0 → 2.12.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 +28 -11
  2. package/css/base.css +28 -11
  3. package/data/tokens.json +210 -61
  4. package/docs/tokens/base/box-shadow/index.html +42 -0
  5. package/docs/tokens/base/colors/index.html +314 -20
  6. package/docs/tokens/base/index.html +377 -20
  7. package/docs/tokens/base/typography/index.html +21 -0
  8. package/docs/tokens/index.html +377 -20
  9. package/ios/base.h +28 -11
  10. package/js/base/common.d.ts +17 -0
  11. package/js/base/common.js +28 -11
  12. package/js/base/es6.d.ts +17 -0
  13. package/js/base/es6.js +27 -10
  14. package/package.json +1 -1
  15. package/sage-design-tokens-2.12.0.tgz +0 -0
  16. package/scss/base.scss +28 -11
  17. package/sage-design-tokens-2.9.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, 24 Mar 2022 11:24:49 GMT
5
+ Generated on Fri, 01 Apr 2022 11:37:42 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -17,8 +17,10 @@
17
17
  <string name="colorsYang100">#ffffffff</string>
18
18
  <string name="colorsYang030">#ffffff4d</string>
19
19
  <string name="colorsYang080">#ffffffcc</string>
20
+ <string name="colorsGray700">#4d4d4dff</string>
21
+ <string name="colorsGray750">#404040ff</string>
20
22
  <string name="colorsGray850">#262626ff</string>
21
- <string name="colorsGray900">#1a1a1aff</string>
23
+ <string name="colorsGray900">#191919ff</string>
22
24
  <string name="colorsGray1000">#000000ff</string>
23
25
  <string name="colorsGray000">#ffffffff</string>
24
26
  <string name="colorsDisabled400">#f2f5f6ff</string>
@@ -31,45 +33,57 @@
31
33
  <string name="colorsComponentsMenuSpringStandard600">#007e45ff</string>
32
34
  <string name="colorsComponentsMenuSpringStandard700">#d9e0e4ff</string>
33
35
  <string name="colorsComponentsMenuSpringParent500">#e6ebedff</string>
34
- <string name="colorsComponentsMenuSpringParent600">#ffffffff</string>
36
+ <string name="colorsComponentsMenuSpringParent600">#007e45ff</string>
35
37
  <string name="colorsComponentsMenuSpringParent700">#d9e0e4ff</string>
36
38
  <string name="colorsComponentsMenuSpringChild400">#ccd6dbff</string>
37
39
  <string name="colorsComponentsMenuSpringChild500">#ffffffff</string>
38
40
  <string name="colorsComponentsMenuSpringChild600">#007e45ff</string>
41
+ <string name="colorsComponentsMenuSpringChildAlt400">#ccd6dbff</string>
39
42
  <string name="colorsComponentsMenuSpringChildAlt500">#e6ebedff</string>
40
43
  <string name="colorsComponentsMenuSpringChildAlt600">#007e45ff</string>
44
+ <string name="colorsComponentsMenuSummerStandard400">#ccd6dbff</string>
41
45
  <string name="colorsComponentsMenuSummerStandard500">#ffffffff</string>
42
46
  <string name="colorsComponentsMenuSummerStandard600">#007e45ff</string>
43
- <string name="colorsComponentsMenuSummerStandard700">#f2f5f6ff</string>
47
+ <string name="colorsComponentsMenuSummerStandard700">#e6ebedff</string>
48
+ <string name="colorsComponentsMenuSummerStandard800">#e6ebedff</string>
44
49
  <string name="colorsComponentsMenuSummerParent500">#ffffffff</string>
45
- <string name="colorsComponentsMenuSummerParent600">#e6ebedff</string>
46
- <string name="colorsComponentsMenuSummerParent700">#f2f5f6ff</string>
47
- <string name="colorsComponentsMenuSummerChild400">#b3c2c9ff</string>
50
+ <string name="colorsComponentsMenuSummerParent600">#007e45ff</string>
51
+ <string name="colorsComponentsMenuSummerParent700">#e6ebedff</string>
52
+ <string name="colorsComponentsMenuSummerChild300">#b3c2c9ff</string>
53
+ <string name="colorsComponentsMenuSummerChild400">#ccd6dbff</string>
48
54
  <string name="colorsComponentsMenuSummerChild500">#e6ebedff</string>
49
55
  <string name="colorsComponentsMenuSummerChild600">#007e45ff</string>
50
- <string name="colorsComponentsMenuSummerChildAlt500">#ccd6dbff</string>
56
+ <string name="colorsComponentsMenuSummerChild700">#e6ebedff</string>
57
+ <string name="colorsComponentsMenuSummerChild800">#e6ebedff</string>
58
+ <string name="colorsComponentsMenuSummerChildAlt300">#b3c2c9ff</string>
59
+ <string name="colorsComponentsMenuSummerChildAlt400">#ccd6dbff</string>
60
+ <string name="colorsComponentsMenuSummerChildAlt500">#d9e0e4ff</string>
51
61
  <string name="colorsComponentsMenuSummerChildAlt600">#007e45ff</string>
62
+ <string name="colorsComponentsMenuSummerChildAlt700">#d9e0e4ff</string>
63
+ <string name="colorsComponentsMenuSummerChildAlt800">#d9e0e4ff</string>
52
64
  <string name="colorsComponentsMenuAutumnStandard500">#00324cff</string>
53
65
  <string name="colorsComponentsMenuAutumnStandard600">#007e45ff</string>
54
66
  <string name="colorsComponentsMenuAutumnStandard700">#19475eff</string>
55
67
  <string name="colorsComponentsMenuAutumnParent500">#00324cff</string>
56
- <string name="colorsComponentsMenuAutumnParent600">#001926ff</string>
68
+ <string name="colorsComponentsMenuAutumnParent600">#007e45ff</string>
57
69
  <string name="colorsComponentsMenuAutumnParent700">#19475eff</string>
58
70
  <string name="colorsComponentsMenuAutumnChild400">#19475eff</string>
59
71
  <string name="colorsComponentsMenuAutumnChild500">#001926ff</string>
60
72
  <string name="colorsComponentsMenuAutumnChild600">#007e45ff</string>
73
+ <string name="colorsComponentsMenuAutumnChildAlt400">#19475eff</string>
61
74
  <string name="colorsComponentsMenuAutumnChildAlt500">#00324cff</string>
62
75
  <string name="colorsComponentsMenuAutumnChildAlt600">#007e45ff</string>
63
76
  <string name="colorsComponentsMenuWinterStandard500">#000000ff</string>
64
77
  <string name="colorsComponentsMenuWinterStandard600">#007e45ff</string>
65
78
  <string name="colorsComponentsMenuWinterStandard700">#262626ff</string>
66
79
  <string name="colorsComponentsMenuWinterParent500">#000000ff</string>
67
- <string name="colorsComponentsMenuWinterParent600">#000000ff</string>
80
+ <string name="colorsComponentsMenuWinterParent600">#007e45ff</string>
68
81
  <string name="colorsComponentsMenuWinterParent700">#262626ff</string>
69
82
  <string name="colorsComponentsMenuWinterChild400">#262626ff</string>
70
83
  <string name="colorsComponentsMenuWinterChild500">#000000ff</string>
71
84
  <string name="colorsComponentsMenuWinterChild600">#007e45ff</string>
72
- <string name="colorsComponentsMenuWinterChildAlt500">#1a1a1aff</string>
85
+ <string name="colorsComponentsMenuWinterChildAlt400">#262626ff</string>
86
+ <string name="colorsComponentsMenuWinterChildAlt500">#191919ff</string>
73
87
  <string name="colorsComponentsMenuWinterChildAlt600">#007e45ff</string>
74
88
  <string name="colorsComponentsMenuYin100">#000000ff</string>
75
89
  <string name="colorsComponentsMenuYin065">#000000a6</string>
@@ -256,6 +270,8 @@
256
270
  <string name="boxShadow400">0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a</string>
257
271
  <string name="boxShadow075">inset 0 6px 4px -4px #00141e0d</string>
258
272
  <string name="boxShadow050">0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26</string>
273
+ <string name="boxShadow090">0 4px 8px -4px #00141e1a</string>
274
+ <string name="boxShadow091">4px 0 8px -4px #00141e1a</string>
259
275
  <string name="fontWeights400">Regular</string>
260
276
  <string name="fontWeights500">Medium</string>
261
277
  <string name="fontWeights700">Bold</string>
@@ -324,6 +340,7 @@
324
340
  <string name="typographyLinkTextM">Regular 14px/150% Sage UI</string>
325
341
  <string name="typographyLinkTextL">undefined 16px/150% Sage UI</string>
326
342
  <string name="typographyMenuLabelM">Medium 14px/150% Sage UI</string>
343
+ <string name="typographyMenuLabelL">Medium 16px/150% Sage UI</string>
327
344
  <string name="typographyMenuSegmentTitleM">Medium 12px/150% Sage UI</string>
328
345
  <string name="typographyMessageHeadingM">Bold 14px/150% Sage UI</string>
329
346
  <string name="typographyMessageHeadingL">Bold 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, 24 Mar 2022 11:24:49 GMT
7
+ * Generated on Fri, 01 Apr 2022 11:37:42 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -20,8 +20,10 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
20
20
  --colorsYang100: #ffffffff;
21
21
  --colorsYang030: #ffffff4d;
22
22
  --colorsYang080: #ffffffcc;
23
+ --colorsGray700: #4d4d4dff;
24
+ --colorsGray750: #404040ff;
23
25
  --colorsGray850: #262626ff;
24
- --colorsGray900: #1a1a1aff;
26
+ --colorsGray900: #191919ff;
25
27
  --colorsGray1000: #000000ff;
26
28
  --colorsGray000: #ffffffff;
27
29
  --colorsDisabled400: #f2f5f6ff;
@@ -34,45 +36,57 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
34
36
  --colorsComponentsMenuSpringStandard600: #007e45ff;
35
37
  --colorsComponentsMenuSpringStandard700: #d9e0e4ff;
36
38
  --colorsComponentsMenuSpringParent500: #e6ebedff;
37
- --colorsComponentsMenuSpringParent600: #ffffffff;
39
+ --colorsComponentsMenuSpringParent600: #007e45ff;
38
40
  --colorsComponentsMenuSpringParent700: #d9e0e4ff;
39
41
  --colorsComponentsMenuSpringChild400: #ccd6dbff;
40
42
  --colorsComponentsMenuSpringChild500: #ffffffff;
41
43
  --colorsComponentsMenuSpringChild600: #007e45ff;
44
+ --colorsComponentsMenuSpringChildAlt400: #ccd6dbff;
42
45
  --colorsComponentsMenuSpringChildAlt500: #e6ebedff;
43
46
  --colorsComponentsMenuSpringChildAlt600: #007e45ff;
47
+ --colorsComponentsMenuSummerStandard400: #ccd6dbff;
44
48
  --colorsComponentsMenuSummerStandard500: #ffffffff;
45
49
  --colorsComponentsMenuSummerStandard600: #007e45ff;
46
- --colorsComponentsMenuSummerStandard700: #f2f5f6ff;
50
+ --colorsComponentsMenuSummerStandard700: #e6ebedff;
51
+ --colorsComponentsMenuSummerStandard800: #e6ebedff;
47
52
  --colorsComponentsMenuSummerParent500: #ffffffff;
48
- --colorsComponentsMenuSummerParent600: #e6ebedff;
49
- --colorsComponentsMenuSummerParent700: #f2f5f6ff;
50
- --colorsComponentsMenuSummerChild400: #b3c2c9ff;
53
+ --colorsComponentsMenuSummerParent600: #007e45ff;
54
+ --colorsComponentsMenuSummerParent700: #e6ebedff;
55
+ --colorsComponentsMenuSummerChild300: #b3c2c9ff;
56
+ --colorsComponentsMenuSummerChild400: #ccd6dbff;
51
57
  --colorsComponentsMenuSummerChild500: #e6ebedff;
52
58
  --colorsComponentsMenuSummerChild600: #007e45ff;
53
- --colorsComponentsMenuSummerChildAlt500: #ccd6dbff;
59
+ --colorsComponentsMenuSummerChild700: #e6ebedff;
60
+ --colorsComponentsMenuSummerChild800: #e6ebedff;
61
+ --colorsComponentsMenuSummerChildAlt300: #b3c2c9ff;
62
+ --colorsComponentsMenuSummerChildAlt400: #ccd6dbff;
63
+ --colorsComponentsMenuSummerChildAlt500: #d9e0e4ff;
54
64
  --colorsComponentsMenuSummerChildAlt600: #007e45ff;
65
+ --colorsComponentsMenuSummerChildAlt700: #d9e0e4ff;
66
+ --colorsComponentsMenuSummerChildAlt800: #d9e0e4ff;
55
67
  --colorsComponentsMenuAutumnStandard500: #00324cff;
56
68
  --colorsComponentsMenuAutumnStandard600: #007e45ff;
57
69
  --colorsComponentsMenuAutumnStandard700: #19475eff;
58
70
  --colorsComponentsMenuAutumnParent500: #00324cff;
59
- --colorsComponentsMenuAutumnParent600: #001926ff;
71
+ --colorsComponentsMenuAutumnParent600: #007e45ff;
60
72
  --colorsComponentsMenuAutumnParent700: #19475eff;
61
73
  --colorsComponentsMenuAutumnChild400: #19475eff;
62
74
  --colorsComponentsMenuAutumnChild500: #001926ff;
63
75
  --colorsComponentsMenuAutumnChild600: #007e45ff;
76
+ --colorsComponentsMenuAutumnChildAlt400: #19475eff;
64
77
  --colorsComponentsMenuAutumnChildAlt500: #00324cff;
65
78
  --colorsComponentsMenuAutumnChildAlt600: #007e45ff;
66
79
  --colorsComponentsMenuWinterStandard500: #000000ff;
67
80
  --colorsComponentsMenuWinterStandard600: #007e45ff;
68
81
  --colorsComponentsMenuWinterStandard700: #262626ff;
69
82
  --colorsComponentsMenuWinterParent500: #000000ff;
70
- --colorsComponentsMenuWinterParent600: #000000ff;
83
+ --colorsComponentsMenuWinterParent600: #007e45ff;
71
84
  --colorsComponentsMenuWinterParent700: #262626ff;
72
85
  --colorsComponentsMenuWinterChild400: #262626ff;
73
86
  --colorsComponentsMenuWinterChild500: #000000ff;
74
87
  --colorsComponentsMenuWinterChild600: #007e45ff;
75
- --colorsComponentsMenuWinterChildAlt500: #1a1a1aff;
88
+ --colorsComponentsMenuWinterChildAlt400: #262626ff;
89
+ --colorsComponentsMenuWinterChildAlt500: #191919ff;
76
90
  --colorsComponentsMenuWinterChildAlt600: #007e45ff;
77
91
  --colorsComponentsMenuYin100: #000000ff;
78
92
  --colorsComponentsMenuYin065: #000000a6;
@@ -259,6 +273,8 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
259
273
  --boxShadow400: 0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a;
260
274
  --boxShadow075: inset 0 6px 4px -4px #00141e0d;
261
275
  --boxShadow050: 0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26;
276
+ --boxShadow090: 0 4px 8px -4px #00141e1a;
277
+ --boxShadow091: 4px 0 8px -4px #00141e1a;
262
278
  --fontWeights400: 400;
263
279
  --fontWeights500: 500;
264
280
  --fontWeights700: 700;
@@ -327,6 +343,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
327
343
  --typographyLinkTextM: 400 14px/150% Sage UI;
328
344
  --typographyLinkTextL: undefined 16px/150% Sage UI;
329
345
  --typographyMenuLabelM: 500 14px/150% Sage UI;
346
+ --typographyMenuLabelL: 500 16px/150% Sage UI;
330
347
  --typographyMenuSegmentTitleM: 500 12px/150% Sage UI;
331
348
  --typographyMessageHeadingM: 700 14px/150% Sage UI;
332
349
  --typographyMessageHeadingL: 700 16px/150% Sage UI;