@sage/design-tokens 2.10.0 → 2.13.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 (18) hide show
  1. package/android/base.xml +30 -12
  2. package/css/base.css +30 -12
  3. package/data/tokens.json +246 -88
  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 +419 -41
  7. package/docs/tokens/base/sizing/index.html +21 -0
  8. package/docs/tokens/base/typography/index.html +42 -21
  9. package/docs/tokens/index.html +419 -41
  10. package/ios/base.h +30 -12
  11. package/js/base/common.d.ts +19 -1
  12. package/js/base/common.js +30 -12
  13. package/js/base/es6.d.ts +19 -1
  14. package/js/base/es6.js +29 -11
  15. package/package.json +1 -1
  16. package/sage-design-tokens-2.13.0.tgz +0 -0
  17. package/scss/base.scss +30 -12
  18. package/sage-design-tokens-2.10.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 14:56:51 GMT
5
+ Generated on Mon, 04 Apr 2022 12:43:17 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>
@@ -199,6 +213,7 @@
199
213
  <string name="sizing400">32px</string>
200
214
  <string name="sizing450">36px</string>
201
215
  <string name="sizing500">40px</string>
216
+ <string name="sizing525">42px</string>
202
217
  <string name="sizing600">48px</string>
203
218
  <string name="sizing700">56px</string>
204
219
  <string name="sizing800">64px</string>
@@ -256,6 +271,8 @@
256
271
  <string name="boxShadow400">0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a</string>
257
272
  <string name="boxShadow075">inset 0 6px 4px -4px #00141e0d</string>
258
273
  <string name="boxShadow050">0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26</string>
274
+ <string name="boxShadow090">0 4px 8px -4px #00141e1a</string>
275
+ <string name="boxShadow091">4px 0 8px -4px #00141e1a</string>
259
276
  <string name="fontWeights400">Regular</string>
260
277
  <string name="fontWeights500">Medium</string>
261
278
  <string name="fontWeights700">Bold</string>
@@ -324,13 +341,13 @@
324
341
  <string name="typographyLinkTextM">Regular 14px/150% Sage UI</string>
325
342
  <string name="typographyLinkTextL">undefined 16px/150% Sage UI</string>
326
343
  <string name="typographyMenuLabelM">Medium 14px/150% Sage UI</string>
344
+ <string name="typographyMenuLabelL">Medium 16px/150% Sage UI</string>
327
345
  <string name="typographyMenuSegmentTitleM">Medium 12px/150% Sage UI</string>
328
346
  <string name="typographyMessageHeadingM">Bold 14px/150% Sage UI</string>
329
347
  <string name="typographyMessageHeadingL">Bold 16px/150% Sage UI</string>
330
348
  <string name="typographyMessageTextM">Regular 14px/150% Sage UI</string>
331
349
  <string name="typographyMessageTextL">Regular 16px/150% Sage UI</string>
332
350
  <string name="typographyPaginationLabelM">Regular 13px/150% Sage UI</string>
333
- <string name="typographyTileParagraphM">Regular 14px/150% Sage UI</string>
334
351
  <string name="typographyPillLabelS">Medium 10px/150% Sage UI</string>
335
352
  <string name="typographyPillLabelM">Medium 12px/150% Sage UI</string>
336
353
  <string name="typographyPillLabelL">Medium 14px/150% Sage UI</string>
@@ -386,6 +403,7 @@
386
403
  <string name="typographyTableCellTextM">Regular 14px/150% Sage UI</string>
387
404
  <string name="typographyTableCellTextL">Regular 16px/150% Sage UI</string>
388
405
  <string name="typographyTableCellTextXl">Regular 16px/150% Sage UI</string>
406
+ <string name="typographyTileParagraphM">Regular 14px/150% Sage UI</string>
389
407
  <string name="typographyTooltipTextM">Regular 14px/150% Sage UI</string>
390
408
  <string name="typographyTooltipTextL">Regular 16px/150% Sage UI</string>
391
409
  <string name="opacity300">0.3</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 14:56:51 GMT
7
+ * Generated on Mon, 04 Apr 2022 12:43:17 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;
@@ -202,6 +216,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
202
216
  --sizing400: 32px;
203
217
  --sizing450: 36px;
204
218
  --sizing500: 40px;
219
+ --sizing525: 42px;
205
220
  --sizing600: 48px;
206
221
  --sizing700: 56px;
207
222
  --sizing800: 64px;
@@ -259,6 +274,8 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
259
274
  --boxShadow400: 0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a;
260
275
  --boxShadow075: inset 0 6px 4px -4px #00141e0d;
261
276
  --boxShadow050: 0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26;
277
+ --boxShadow090: 0 4px 8px -4px #00141e1a;
278
+ --boxShadow091: 4px 0 8px -4px #00141e1a;
262
279
  --fontWeights400: 400;
263
280
  --fontWeights500: 500;
264
281
  --fontWeights700: 700;
@@ -327,13 +344,13 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
327
344
  --typographyLinkTextM: 400 14px/150% Sage UI;
328
345
  --typographyLinkTextL: undefined 16px/150% Sage UI;
329
346
  --typographyMenuLabelM: 500 14px/150% Sage UI;
347
+ --typographyMenuLabelL: 500 16px/150% Sage UI;
330
348
  --typographyMenuSegmentTitleM: 500 12px/150% Sage UI;
331
349
  --typographyMessageHeadingM: 700 14px/150% Sage UI;
332
350
  --typographyMessageHeadingL: 700 16px/150% Sage UI;
333
351
  --typographyMessageTextM: 400 14px/150% Sage UI;
334
352
  --typographyMessageTextL: 400 16px/150% Sage UI;
335
353
  --typographyPaginationLabelM: 400 13px/150% Sage UI;
336
- --typographyTileParagraphM: 400 14px/150% Sage UI;
337
354
  --typographyPillLabelS: 500 10px/150% Sage UI;
338
355
  --typographyPillLabelM: 500 12px/150% Sage UI;
339
356
  --typographyPillLabelL: 500 14px/150% Sage UI;
@@ -389,6 +406,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
389
406
  --typographyTableCellTextM: 400 14px/150% Sage UI;
390
407
  --typographyTableCellTextL: 400 16px/150% Sage UI;
391
408
  --typographyTableCellTextXl: 400 16px/150% Sage UI;
409
+ --typographyTileParagraphM: 400 14px/150% Sage UI;
392
410
  --typographyTooltipTextM: 400 14px/150% Sage UI;
393
411
  --typographyTooltipTextL: 400 16px/150% Sage UI;
394
412
  --opacity300: 0.3;