@sage/design-tokens 2.8.0 → 2.11.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 +40 -18
  2. package/css/base.css +40 -18
  3. package/data/tokens.json +280 -62
  4. package/docs/tokens/base/colors/index.html +314 -20
  5. package/docs/tokens/base/index.html +510 -48
  6. package/docs/tokens/base/typography/index.html +196 -28
  7. package/docs/tokens/index.html +510 -48
  8. package/ios/base.h +40 -18
  9. package/js/base/common.d.ts +29 -7
  10. package/js/base/common.js +40 -18
  11. package/js/base/es6.d.ts +29 -7
  12. package/js/base/es6.js +39 -17
  13. package/package.json +1 -1
  14. package/sage-design-tokens-2.11.0.tgz +0 -0
  15. package/scss/base.scss +40 -18
  16. package/sage-design-tokens-2.8.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 09:08:31 GMT
5
+ Generated on Thu, 31 Mar 2022 10:59:37 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>
@@ -324,6 +338,7 @@
324
338
  <string name="typographyLinkTextM">Regular 14px/150% Sage UI</string>
325
339
  <string name="typographyLinkTextL">undefined 16px/150% Sage UI</string>
326
340
  <string name="typographyMenuLabelM">Medium 14px/150% Sage UI</string>
341
+ <string name="typographyMenuLabelL">Medium 16px/150% Sage UI</string>
327
342
  <string name="typographyMenuSegmentTitleM">Medium 12px/150% Sage UI</string>
328
343
  <string name="typographyMessageHeadingM">Bold 14px/150% Sage UI</string>
329
344
  <string name="typographyMessageHeadingL">Bold 16px/150% Sage UI</string>
@@ -335,13 +350,20 @@
335
350
  <string name="typographyPillLabelM">Medium 12px/150% Sage UI</string>
336
351
  <string name="typographyPillLabelL">Medium 14px/150% Sage UI</string>
337
352
  <string name="typographyPillLabelXl">Medium 16px/150% Sage UI</string>
338
- <string name="typographyProfileEmailXs">Regular 12px/100% Sage UI</string>
339
- <string name="typographyProfileEmailS">Regular 14px/100% Sage UI</string>
340
- <string name="typographyProfileEmailM">Regular 14px/125% Sage UI</string>
341
- <string name="typographyProfileEmailMl">Regular 14px/125% Sage UI</string>
342
- <string name="typographyProfileEmailL">Regular 14px/125% Sage UI</string>
343
- <string name="typographyProfileEmailXl">Regular 18px/125% Sage UI</string>
344
- <string name="typographyProfileEmailXxl">Regular 24px/125% Sage UI</string>
353
+ <string name="typographyProfileEmailTextXs">Regular 12px/100% Sage UI</string>
354
+ <string name="typographyProfileEmailTextS">Regular 14px/100% Sage UI</string>
355
+ <string name="typographyProfileEmailTextM">Regular 14px/125% Sage UI</string>
356
+ <string name="typographyProfileEmailTextMl">Regular 14px/125% Sage UI</string>
357
+ <string name="typographyProfileEmailTextL">Regular 14px/125% Sage UI</string>
358
+ <string name="typographyProfileEmailTextXl">Regular 18px/125% Sage UI</string>
359
+ <string name="typographyProfileEmailTextXxl">Regular 24px/125% Sage UI</string>
360
+ <string name="typographyProfileEmailLinkXs">Regular 12px/100% Sage UI</string>
361
+ <string name="typographyProfileEmailLinkS">Regular 14px/100% Sage UI</string>
362
+ <string name="typographyProfileEmailLinkM">Regular 14px/125% Sage UI</string>
363
+ <string name="typographyProfileEmailLinkMl">Regular 14px/125% Sage UI</string>
364
+ <string name="typographyProfileEmailLinkL">Regular 14px/125% Sage UI</string>
365
+ <string name="typographyProfileEmailLinkXl">Regular 18px/125% Sage UI</string>
366
+ <string name="typographyProfileEmailLinkXxl">Regular 24px/125% Sage UI</string>
345
367
  <string name="typographyProfileInitialsXs">Medium 10px/150% Sage UI</string>
346
368
  <string name="typographyProfileInitialsS">Medium 14px/150% Sage UI</string>
347
369
  <string name="typographyProfileInitialsM">Medium 18px/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 09:08:31 GMT
7
+ * Generated on Thu, 31 Mar 2022 10:59:36 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;
@@ -327,6 +341,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
327
341
  --typographyLinkTextM: 400 14px/150% Sage UI;
328
342
  --typographyLinkTextL: undefined 16px/150% Sage UI;
329
343
  --typographyMenuLabelM: 500 14px/150% Sage UI;
344
+ --typographyMenuLabelL: 500 16px/150% Sage UI;
330
345
  --typographyMenuSegmentTitleM: 500 12px/150% Sage UI;
331
346
  --typographyMessageHeadingM: 700 14px/150% Sage UI;
332
347
  --typographyMessageHeadingL: 700 16px/150% Sage UI;
@@ -338,13 +353,20 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
338
353
  --typographyPillLabelM: 500 12px/150% Sage UI;
339
354
  --typographyPillLabelL: 500 14px/150% Sage UI;
340
355
  --typographyPillLabelXl: 500 16px/150% Sage UI;
341
- --typographyProfileEmailXs: 400 12px/100% Sage UI;
342
- --typographyProfileEmailS: 400 14px/100% Sage UI;
343
- --typographyProfileEmailM: 400 14px/125% Sage UI;
344
- --typographyProfileEmailMl: 400 14px/125% Sage UI;
345
- --typographyProfileEmailL: 400 14px/125% Sage UI;
346
- --typographyProfileEmailXl: 400 18px/125% Sage UI;
347
- --typographyProfileEmailXxl: 400 24px/125% Sage UI;
356
+ --typographyProfileEmailTextXs: 400 12px/100% Sage UI;
357
+ --typographyProfileEmailTextS: 400 14px/100% Sage UI;
358
+ --typographyProfileEmailTextM: 400 14px/125% Sage UI;
359
+ --typographyProfileEmailTextMl: 400 14px/125% Sage UI;
360
+ --typographyProfileEmailTextL: 400 14px/125% Sage UI;
361
+ --typographyProfileEmailTextXl: 400 18px/125% Sage UI;
362
+ --typographyProfileEmailTextXxl: 400 24px/125% Sage UI;
363
+ --typographyProfileEmailLinkXs: 400 12px/100% Sage UI;
364
+ --typographyProfileEmailLinkS: 400 14px/100% Sage UI;
365
+ --typographyProfileEmailLinkM: 400 14px/125% Sage UI;
366
+ --typographyProfileEmailLinkMl: 400 14px/125% Sage UI;
367
+ --typographyProfileEmailLinkL: 400 14px/125% Sage UI;
368
+ --typographyProfileEmailLinkXl: 400 18px/125% Sage UI;
369
+ --typographyProfileEmailLinkXxl: 400 24px/125% Sage UI;
348
370
  --typographyProfileInitialsXs: 500 10px/150% Sage UI;
349
371
  --typographyProfileInitialsS: 500 14px/150% Sage UI;
350
372
  --typographyProfileInitialsM: 500 18px/150% Sage UI;