@sage/design-tokens 1.86.0 → 1.89.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 (22) hide show
  1. package/README.md +15 -11
  2. package/css/base.css +236 -138
  3. package/css/no-theme.css +131 -130
  4. package/data/{all.json → tokens.json} +1560 -795
  5. package/docs/index.html +4806 -3682
  6. package/index.d.ts +4 -3
  7. package/index.js +6 -1
  8. package/js/base/common.d.ts +173 -1106
  9. package/js/base/common.js +304 -206
  10. package/js/base/es6.d.ts +173 -1106
  11. package/js/base/es6.js +303 -800
  12. package/js/no-theme/common.d.ts +64 -880
  13. package/js/no-theme/common.js +191 -190
  14. package/js/no-theme/es6.d.ts +64 -880
  15. package/js/no-theme/es6.js +190 -633
  16. package/package.json +1 -1
  17. package/sage-design-tokens-1.89.0.tgz +0 -0
  18. package/scss/base.scss +237 -139
  19. package/scss/no-theme.scss +131 -130
  20. package/data/base.json +0 -1879
  21. package/data/no-theme.json +0 -1649
  22. package/sage-design-tokens-1.86.0.tgz +0 -0
package/README.md CHANGED
@@ -8,9 +8,21 @@
8
8
 
9
9
  This repository contains the design tokens from the Sage Design System. These are maintained by the Sage DS team. This library is for distributing these tokens across multiple platforms.
10
10
 
11
+ ## What are design tokens?
12
+
13
+ Design Tokens are Design System’s most basic, lowest level element. In atomic design terminology those would be the protons or electrons.
14
+
15
+ Basically those are **key-value records named and organized the same way regardless of the platform** (e.g. web, Android, iOS, Figma). They can define various properties, such as colors, paddings, margins, sizes, font sizes, font families, transitions, animations, and others. **They represent certain design decisions.**
16
+
17
+ Design tokens purpose is to:
18
+ - **Release developers from taking design decisions.** Often while developing a component, developer needs to take decision what tint of what color should be used. This decision should be taken by designer, not developer.
19
+ - **Improve handover process and communication between designers and developers.** Both, developers and designers are going to use the same token name for given property (color, background color, border, padding, margin, transition and so on). In the end, developers don't need to know what the final value will be.
20
+ - **Narrow value set to only needed values.** Design System uses narrow set of values (spacings, colors, typography properties and others). Those are only values that are needed for visual description of the component.
21
+ - **Keep visual consistency across all components of the library.**
22
+
11
23
  ## Beta
12
24
 
13
- Currently this library is in an _unstable open beta stage_. It is not ready for production at this point as the tokens are liable to drastically change between now and the production release.
25
+ Currently, this library is in an _unstable open beta stage_. It is not ready for production at this point as the tokens are liable to drastically change between now, and the production release.
14
26
 
15
27
  ## Using the design tokens
16
28
 
@@ -78,13 +90,9 @@ element.style.color = tokens.colorsBase500
78
90
 
79
91
  A type definition file is also included to work in projects with typescript installed.
80
92
 
81
- ### iOS
93
+ #### Other formats
82
94
 
83
- _COMING SOON_
84
-
85
- ### Android
86
-
87
- _COMING SOON_
95
+ It is possible to export design tokens to any format or language. If you need to use design tokens in your technology, please contact us and describe your needs.
88
96
 
89
97
  ## Contributing
90
98
 
@@ -102,8 +110,4 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
102
110
  See the License for the specific language governing permissions and
103
111
  limitations under the License.
104
112
 
105
- ## Repository maintainer
106
-
107
- [Mark Mizen, User Experience Engineer](mailto:mark.mizen@sage.com).
108
-
109
113
  Copyright (c) 2021 Sage Group Plc. All rights reserved.
package/css/base.css CHANGED
@@ -1,146 +1,205 @@
1
1
  /*
2
2
  Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
3
- */
3
+ */
4
+
4
5
  /**
5
6
  * Do not edit directly
6
- * Generated on Fri, 10 Dec 2021 11:28:20 GMT
7
+ * Generated on Wed, 26 Jan 2022 12:12:48 GMT
7
8
  */
8
9
 
9
10
  :root {
10
11
  --metaName: Base Theme;
11
12
  --metaPublic: true;
12
- --colorsLogo: #00D639;
13
- --colorsTransparent: rgba(0,0,0,0);
14
- --colorsYin030: rgba(0,0,0,0.3);
15
- --colorsYin055: rgba(0,0,0,0.55);
16
- --colorsYin065: rgba(0,0,0,0.65);
17
- --colorsYin090: rgba(0,0,0,0.9);
18
- --colorsYang100: rgba(255,255,255,1);
19
- --colorsDisabled400: #F2F5F6;
20
- --colorsDisabled500: #E6EBED;
21
- --colorsDisabled600: #CCD6DB;
22
- --colorsReadOnly400: #F2F5F6;
23
- --colorsReadOnly500: #E6EBED;
24
- --colorsReadOnly600: #CCD6DB;
25
- --colorsComponentsNavigation500: #008146;
26
- --colorsComponentsNavigation600: #006738;
27
- --colorsComponentsNavigation700: #004D2A;
28
- --colorsComponentsNavigationTransparent: rgba(0,0,0,0);
29
- --colorsComponentsNavigationYin100: rgba(0,0,0,1);
30
- --colorsComponentsNavigationYin030: rgba(0,0,0,0.3);
31
- --colorsComponentsNavigationYin055: rgba(0,0,0,0.55);
32
- --colorsComponentsNavigationYin065: rgba(0,0,0,0.65);
33
- --colorsComponentsNavigationYin090: rgba(0,0,0,0.9);
34
- --colorsComponentsNavigationYang100: rgba(255,255,255,1);
35
- --colorsUtilityMajor100: #CCD6DB;
36
- --colorsUtilityMajor150: #B3C2C9;
37
- --colorsUtilityMajor200: #99ADB7;
38
- --colorsUtilityMajor300: #668494;
39
- --colorsUtilityMajor400: #335B70;
40
- --colorsUtilityMajor500: #00324C;
41
- --colorsUtilityMajor800: #00141E;
42
- --colorsUtilityMajor025: #F2F5F6;
43
- --colorsUtilityMajor050: #E6EBED;
44
- --colorsUtilityMajor075: #D9E0E4;
45
- --colorsUtilityMajorTransparent: rgba(0,0,0,0);
46
- --colorsUtilityYin030: rgba(0,0,0,0.3);
47
- --colorsUtilityYin055: rgba(0,0,0,0.55);
48
- --colorsUtilityYin065: rgba(0,0,0,0.65);
49
- --colorsUtilityYin090: rgba(0,0,0,0.9);
50
- --colorsUtilityYang100: rgba(255,255,255,1);
51
- --colorsUtilityDisabled400: #F2F5F6;
52
- --colorsUtilityDisabled500: #E6EBED;
53
- --colorsUtilityDisabled600: #CCD6DB;
54
- --colorsUtilityReadOnly400: #F2F5F6;
55
- --colorsUtilityReadOnly500: #E6EBED;
56
- --colorsUtilityReadOnly600: #CCD6DB;
57
- --colorsActionMajor150: #B3D9C8;
58
- --colorsActionMajor500: #008146;
59
- --colorsActionMajor600: #006738;
60
- --colorsActionMajor700: #004D2A;
61
- --colorsActionMajor025: #F2F9F6;
62
- --colorsActionMajorTransparent: rgba(0,0,0,0);
63
- --colorsActionMajorYin030: rgba(0,0,0,0.3);
64
- --colorsActionMajorYin055: rgba(0,0,0,0.55);
65
- --colorsActionMajorYin065: rgba(0,0,0,0.65);
66
- --colorsActionMajorYin090: rgba(0,0,0,0.9);
67
- --colorsActionMajorYang100: rgba(255,255,255,1);
68
- --colorsActionMinor100: #E6EBED;
69
- --colorsActionMinor150: #D9E0E4;
70
- --colorsActionMinor200: #CCD6DB;
71
- --colorsActionMinor250: #B3C2C9;
72
- --colorsActionMinor300: #99ADB7;
73
- --colorsActionMinor400: #668494;
74
- --colorsActionMinor500: #335B70;
75
- --colorsActionMinor600: #00324C;
76
- --colorsActionMinor900: #00141E;
77
- --colorsActionMinor025: #FAFBFB;
78
- --colorsActionMinor050: #F2F5F6;
79
- --colorsActionMinorTransparent: rgba(0,0,0,0);
80
- --colorsActionMinorYin030: rgba(0,0,0,0.3);
81
- --colorsActionMinorYin055: rgba(0,0,0,0.55);
82
- --colorsActionMinorYin065: rgba(0,0,0,0.65);
83
- --colorsActionMinorYin090: rgba(0,0,0,0.9);
84
- --colorsActionMinorYang100: rgba(255,255,255,1);
85
- --colorsActionDisabled400: #F2F5F6;
86
- --colorsActionDisabled500: #E6EBED;
87
- --colorsActionDisabled600: #CCD6DB;
88
- --colorsActionReadOnly400: #F2F5F6;
89
- --colorsActionReadOnly500: #E6EBED;
90
- --colorsActionReadOnly600: #CCD6DB;
91
- --colorsSemanticNeutral200: #CCD6DB;
92
- --colorsSemanticNeutral500: #335B70;
93
- --colorsSemanticNeutral600: #00324C;
94
- --colorsSemanticNeutralTransparent: rgba(0,0,0,0);
95
- --colorsSemanticNeutralYin030: rgba(0,0,0,0.3);
96
- --colorsSemanticNeutralYin055: rgba(0,0,0,0.55);
97
- --colorsSemanticNeutralYin065: rgba(0,0,0,0.65);
98
- --colorsSemanticNeutralYin090: rgba(0,0,0,0.9);
99
- --colorsSemanticNeutralYang100: rgba(255,255,255,1);
100
- --colorsSemanticFocus250: #FFDA80;
101
- --colorsSemanticFocus500: #FFB500;
102
- --colorsSemanticFocusTransparent: rgba(0,0,0,0);
103
- --colorsSemanticPositive500: #008A21;
104
- --colorsSemanticPositive600: #006e1a;
105
- --colorsSemanticPositiveTransparent: rgba(0,0,0,0);
106
- --colorsSemanticPositiveYin030: rgba(0,0,0,0.3);
107
- --colorsSemanticPositiveYin055: rgba(0,0,0,0.55);
108
- --colorsSemanticPositiveYin065: rgba(0,0,0,0.65);
109
- --colorsSemanticPositiveYin090: rgba(0,0,0,0.9);
110
- --colorsSemanticPositiveYang100: rgba(255,255,255,1);
111
- --colorsSemanticNegative500: #CD384B;
112
- --colorsSemanticNegative600: #a42d3c;
113
- --colorsSemanticNegativeTransparent: rgba(0,0,0,0);
114
- --colorsSemanticNegativeYin030: rgba(0,0,0,0.3);
115
- --colorsSemanticNegativeYin055: rgba(0,0,0,0.55);
116
- --colorsSemanticNegativeYin065: rgba(0,0,0,0.65);
117
- --colorsSemanticNegativeYin090: rgba(0,0,0,0.9);
118
- --colorsSemanticNegativeYang100: rgba(255,255,255,1);
119
- --colorsSemanticCaution400: #f28533;
120
- --colorsSemanticCaution500: #EF6700;
121
- --colorsSemanticCaution600: #bf5200;
122
- --colorsSemanticCautionTransparent: rgba(0,0,0,0);
123
- --colorsSemanticCautionYin030: rgba(0,0,0,0.3);
124
- --colorsSemanticCautionYin055: rgba(0,0,0,0.55);
125
- --colorsSemanticCautionYin065: rgba(0,0,0,0.65);
126
- --colorsSemanticCautionYin090: rgba(0,0,0,0.9);
127
- --colorsSemanticCautionYang100: rgba(255,255,255,1);
128
- --colorsSemanticInfo150: #b3cfe5;
129
- --colorsSemanticInfo500: #0060A7;
130
- --colorsSemanticInfo600: #004d86;
131
- --colorsSemanticInfoTransparent: rgba(0,0,0,0);
132
- --colorsSemanticInfoYin030: rgba(0,0,0,0.3);
133
- --colorsSemanticInfoYin055: rgba(0,0,0,0.55);
134
- --colorsSemanticInfoYin065: rgba(0,0,0,0.65);
135
- --colorsSemanticInfoYin090: rgba(0,0,0,0.9);
136
- --colorsSemanticInfoYang100: rgba(255,255,255,1);
137
- --colorsTest100: #123456;
13
+ --colorsLogo: #00d639ff;
14
+ --colorsTransparent: #00000000;
15
+ --colorsYin030: #0000004d;
16
+ --colorsYin055: #0000008c;
17
+ --colorsYin065: #000000a6;
18
+ --colorsYin075: #000000bf;
19
+ --colorsYin090: #000000e6;
20
+ --colorsYang100: #ffffffff;
21
+ --colorsYang080: #ffffffcc;
22
+ --colorsGray850: #262626ff;
23
+ --colorsGray900: #1a1a1aff;
24
+ --colorsGray1000: #000000ff;
25
+ --colorsGray000: #ffffffff;
26
+ --colorsDisabled400: #f2f5f6ff;
27
+ --colorsDisabled500: #e6ebedff;
28
+ --colorsDisabled600: #ccd6dbff;
29
+ --colorsReadOnly400: #f2f5f6ff;
30
+ --colorsReadOnly500: #e6ebedff;
31
+ --colorsReadOnly600: #ccd6dbff;
32
+ --colorsComponentsMenuSpringStandard500: #e6ebedff;
33
+ --colorsComponentsMenuSpringStandard600: #007e45ff;
34
+ --colorsComponentsMenuSpringStandard700: #d9e0e4ff;
35
+ --colorsComponentsMenuSpringParent500: #e6ebedff;
36
+ --colorsComponentsMenuSpringParent600: #ffffffff;
37
+ --colorsComponentsMenuSpringParent700: #d9e0e4ff;
38
+ --colorsComponentsMenuSpringChild400: #ccd6dbff;
39
+ --colorsComponentsMenuSpringChild500: #ffffffff;
40
+ --colorsComponentsMenuSpringChild600: #007e45ff;
41
+ --colorsComponentsMenuSpringChildAlt500: #e6ebedff;
42
+ --colorsComponentsMenuSpringChildAlt600: #007e45ff;
43
+ --colorsComponentsMenuSummerStandard500: #ffffffff;
44
+ --colorsComponentsMenuSummerStandard600: #007e45ff;
45
+ --colorsComponentsMenuSummerStandard700: #f2f5f6ff;
46
+ --colorsComponentsMenuSummerParent500: #ffffffff;
47
+ --colorsComponentsMenuSummerParent600: #e6ebedff;
48
+ --colorsComponentsMenuSummerParent700: #f2f5f6ff;
49
+ --colorsComponentsMenuSummerChild400: #b3c2c9ff;
50
+ --colorsComponentsMenuSummerChild500: #e6ebedff;
51
+ --colorsComponentsMenuSummerChild600: #007e45ff;
52
+ --colorsComponentsMenuSummerChildAlt500: #ccd6dbff;
53
+ --colorsComponentsMenuSummerChildAlt600: #007e45ff;
54
+ --colorsComponentsMenuAutumnStandard500: #00324cff;
55
+ --colorsComponentsMenuAutumnStandard600: #007e45ff;
56
+ --colorsComponentsMenuAutumnStandard700: #19475eff;
57
+ --colorsComponentsMenuAutumnParent500: #00324cff;
58
+ --colorsComponentsMenuAutumnParent600: #001926ff;
59
+ --colorsComponentsMenuAutumnParent700: #19475eff;
60
+ --colorsComponentsMenuAutumnChild400: #19475eff;
61
+ --colorsComponentsMenuAutumnChild500: #001926ff;
62
+ --colorsComponentsMenuAutumnChild600: #007e45ff;
63
+ --colorsComponentsMenuAutumnChildAlt500: #00324cff;
64
+ --colorsComponentsMenuAutumnChildAlt600: #007e45ff;
65
+ --colorsComponentsMenuWinterStandard500: #000000ff;
66
+ --colorsComponentsMenuWinterStandard600: #007e45ff;
67
+ --colorsComponentsMenuWinterStandard700: #262626ff;
68
+ --colorsComponentsMenuWinterParent500: #000000ff;
69
+ --colorsComponentsMenuWinterParent600: #000000ff;
70
+ --colorsComponentsMenuWinterParent700: #262626ff;
71
+ --colorsComponentsMenuWinterChild400: #262626ff;
72
+ --colorsComponentsMenuWinterChild500: #000000ff;
73
+ --colorsComponentsMenuWinterChild600: #007e45ff;
74
+ --colorsComponentsMenuWinterChildAlt500: #1a1a1aff;
75
+ --colorsComponentsMenuWinterChildAlt600: #007e45ff;
76
+ --colorsComponentsMenuYin100: #000000ff;
77
+ --colorsComponentsMenuYin065: #000000a6;
78
+ --colorsComponentsMenuYin090: #000000e6;
79
+ --colorsComponentsMenuYang100: #ffffffff;
80
+ --colorsComponentsMenuYang080: #ffffffcc;
81
+ --colorsComponentsNavigation500: #007e45ff;
82
+ --colorsComponentsNavigation600: #006738ff;
83
+ --colorsComponentsNavigation700: #004d2aff;
84
+ --colorsComponentsNavigationTransparent: #00000000;
85
+ --colorsComponentsNavigationYin100: #000000ff;
86
+ --colorsComponentsNavigationYin030: #0000004d;
87
+ --colorsComponentsNavigationYin055: #0000008c;
88
+ --colorsComponentsNavigationYin065: #000000a6;
89
+ --colorsComponentsNavigationYin090: #000000e6;
90
+ --colorsComponentsNavigationYang100: #ffffffff;
91
+ --colorsUtilityMajor100: #ccd6dbff;
92
+ --colorsUtilityMajor150: #b3c2c9ff;
93
+ --colorsUtilityMajor200: #99adb7ff;
94
+ --colorsUtilityMajor300: #668494ff;
95
+ --colorsUtilityMajor400: #335b70ff;
96
+ --colorsUtilityMajor500: #00324cff;
97
+ --colorsUtilityMajor800: #00141eff;
98
+ --colorsUtilityMajor025: #f2f5f6ff;
99
+ --colorsUtilityMajor040: #edf1f2ff;
100
+ --colorsUtilityMajor050: #e6ebedff;
101
+ --colorsUtilityMajor075: #d9e0e4ff;
102
+ --colorsUtilityMajorTransparent: #00000000;
103
+ --colorsUtilityYin030: #0000004d;
104
+ --colorsUtilityYin055: #0000008c;
105
+ --colorsUtilityYin065: #000000a6;
106
+ --colorsUtilityYin090: #000000e6;
107
+ --colorsUtilityYang100: #ffffffff;
108
+ --colorsUtilityDisabled400: #f2f5f6ff;
109
+ --colorsUtilityDisabled500: #e6ebedff;
110
+ --colorsUtilityDisabled600: #ccd6dbff;
111
+ --colorsUtilityReadOnly400: #f2f5f6ff;
112
+ --colorsUtilityReadOnly500: #e6ebedff;
113
+ --colorsUtilityReadOnly600: #ccd6dbff;
114
+ --colorsActionMajor150: #b3d9c8ff;
115
+ --colorsActionMajor500: #007e45ff;
116
+ --colorsActionMajor600: #006738ff;
117
+ --colorsActionMajor700: #004d2aff;
118
+ --colorsActionMajor025: #f2f9f6ff;
119
+ --colorsActionMajorTransparent: #00000000;
120
+ --colorsActionMajorYin030: #0000004d;
121
+ --colorsActionMajorYin055: #0000008c;
122
+ --colorsActionMajorYin065: #000000a6;
123
+ --colorsActionMajorYin090: #000000e6;
124
+ --colorsActionMajorYang100: #ffffffff;
125
+ --colorsActionMinor100: #e6ebedff;
126
+ --colorsActionMinor150: #d9e0e4ff;
127
+ --colorsActionMinor200: #ccd6dbff;
128
+ --colorsActionMinor250: #b3c2c9ff;
129
+ --colorsActionMinor300: #99adb7ff;
130
+ --colorsActionMinor400: #668494ff;
131
+ --colorsActionMinor500: #335b70ff;
132
+ --colorsActionMinor550: #19475eff;
133
+ --colorsActionMinor600: #00324cff;
134
+ --colorsActionMinor850: #001926ff;
135
+ --colorsActionMinor900: #00141eff;
136
+ --colorsActionMinor025: #fafbfbff;
137
+ --colorsActionMinor050: #f2f5f6ff;
138
+ --colorsActionMinorTransparent: #00000000;
139
+ --colorsActionMinorYin030: #0000004d;
140
+ --colorsActionMinorYin055: #0000008c;
141
+ --colorsActionMinorYin065: #000000a6;
142
+ --colorsActionMinorYin090: #000000e6;
143
+ --colorsActionMinorYang100: #ffffffff;
144
+ --colorsActionDisabled400: #f2f5f6ff;
145
+ --colorsActionDisabled500: #e6ebedff;
146
+ --colorsActionDisabled600: #ccd6dbff;
147
+ --colorsActionReadOnly400: #f2f5f6ff;
148
+ --colorsActionReadOnly500: #e6ebedff;
149
+ --colorsActionReadOnly600: #ccd6dbff;
150
+ --colorsSemanticNeutral200: #ccd6dbff;
151
+ --colorsSemanticNeutral500: #335b70ff;
152
+ --colorsSemanticNeutral600: #00324cff;
153
+ --colorsSemanticNeutralTransparent: #00000000;
154
+ --colorsSemanticNeutralYin030: #0000004d;
155
+ --colorsSemanticNeutralYin055: #0000008c;
156
+ --colorsSemanticNeutralYin065: #000000a6;
157
+ --colorsSemanticNeutralYin090: #000000e6;
158
+ --colorsSemanticNeutralYang100: #ffffffff;
159
+ --colorsSemanticFocus250: #ffda80ff;
160
+ --colorsSemanticFocus500: #ffb500ff;
161
+ --colorsSemanticFocusTransparent: #00000000;
162
+ --colorsSemanticPositive500: #008a21ff;
163
+ --colorsSemanticPositive600: #006e1aff;
164
+ --colorsSemanticPositiveTransparent: #00000000;
165
+ --colorsSemanticPositiveYin030: #0000004d;
166
+ --colorsSemanticPositiveYin055: #0000008c;
167
+ --colorsSemanticPositiveYin065: #000000a6;
168
+ --colorsSemanticPositiveYin090: #000000e6;
169
+ --colorsSemanticPositiveYang100: #ffffffff;
170
+ --colorsSemanticNegative500: #cd384bff;
171
+ --colorsSemanticNegative600: #a42d3cff;
172
+ --colorsSemanticNegativeTransparent: #00000000;
173
+ --colorsSemanticNegativeYin030: #0000004d;
174
+ --colorsSemanticNegativeYin055: #0000008c;
175
+ --colorsSemanticNegativeYin065: #000000a6;
176
+ --colorsSemanticNegativeYin090: #000000e6;
177
+ --colorsSemanticNegativeYang100: #ffffffff;
178
+ --colorsSemanticCaution400: #f28533ff;
179
+ --colorsSemanticCaution500: #ef6700ff;
180
+ --colorsSemanticCaution600: #bf5200ff;
181
+ --colorsSemanticCautionTransparent: #00000000;
182
+ --colorsSemanticCautionYin030: #0000004d;
183
+ --colorsSemanticCautionYin055: #0000008c;
184
+ --colorsSemanticCautionYin065: #000000a6;
185
+ --colorsSemanticCautionYin090: #000000e6;
186
+ --colorsSemanticCautionYang100: #ffffffff;
187
+ --colorsSemanticInfo150: #b3cfe5ff;
188
+ --colorsSemanticInfo500: #0060a7ff;
189
+ --colorsSemanticInfo600: #004d86ff;
190
+ --colorsSemanticInfoTransparent: #00000000;
191
+ --colorsSemanticInfoYin030: #0000004d;
192
+ --colorsSemanticInfoYin055: #0000008c;
193
+ --colorsSemanticInfoYin065: #000000a6;
194
+ --colorsSemanticInfoYin090: #000000e6;
195
+ --colorsSemanticInfoYang100: #ffffffff;
138
196
  --sizing100: 8px;
139
197
  --sizing125: 10px;
140
198
  --sizing150: 12px;
141
199
  --sizing175: 14px;
142
200
  --sizing200: 16px;
143
201
  --sizing250: 20px;
202
+ --sizing275: 22px;
144
203
  --sizing300: 24px;
145
204
  --sizing350: 28px;
146
205
  --sizing375: 30px;
@@ -151,6 +210,8 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
151
210
  --sizing800: 64px;
152
211
  --sizing900: 72px;
153
212
  --sizing1000: 80px;
213
+ --sizing1300: 104px;
214
+ --sizing1600: 128px;
154
215
  --sizing025: 2px;
155
216
  --sizing050: 4px;
156
217
  --sizing075: 6px;
@@ -184,20 +245,22 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
184
245
  --fontSizes500: 22px;
185
246
  --fontSizes600: 24px;
186
247
  --fontSizes700: 32px;
187
- --fontSizes800: 48px;
188
- --fontSizes900: 56px;
189
- --fontSizes1000: 64px;
248
+ --fontSizes800: 40px;
249
+ --fontSizes900: 48px;
250
+ --fontSizes1000: 56px;
190
251
  --fontSizes010: 10px;
191
252
  --fontSizes025: 12px;
192
253
  --fontSizes050: 13px;
193
- --boxShadow100: undefined undefined undefined undefined undefined;
194
- --boxShadow200: undefined undefined undefined undefined undefined;
195
- --boxShadow300: undefined undefined undefined undefined undefined;
196
- --boxShadow400: undefined undefined undefined undefined undefined;
197
- --boxShadow050: undefined undefined undefined undefined undefined;
254
+ --boxShadow100: 0 5px 5px 0 #00141e33, 0 10px 10px 0 #00141e1a;
255
+ --boxShadow150: 0 -4px 12px 0 #00141e0d;
256
+ --boxShadow200: 0 10px 20px 0 #00141e33, 0 20px 40px 0 #00141e1a;
257
+ --boxShadow300: 0 10px 30px 0 #00141e1a, 0 30px 60px 0 #00141e1a;
258
+ --boxShadow400: 0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a;
259
+ --boxShadow050: 0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26;
198
260
  --fontWeights400: Regular;
199
261
  --fontWeights500: Medium;
200
262
  --fontWeights700: Bold;
263
+ --lineHeights300: 100%;
201
264
  --lineHeights400: 125%;
202
265
  --lineHeights500: 150%;
203
266
  --fontFamiliesDefault: Sage UI;
@@ -206,9 +269,10 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
206
269
  --fontFamiliesOther: Open Sans;
207
270
  --borderRadiusCircle: 50%;
208
271
  --typographyAccordionTitleM: Bold 20px/125% Sage UI;
209
- --typographyAccordionSubtitleM: Medium 14px/150% Sage UI;
272
+ --typographyAccordionSubtitleM: Regular 14px/150% Sage UI;
210
273
  --typographyAccordionParagraphM: Regular 14px/150% Sage UI;
211
274
  --typographyActionPopoverMenuItemM: Bold 14px/150% Sage UI;
275
+ --typographyAnchorNavLabelM: Medium 14px/150% Sage UI;
212
276
  --typographyBadgeLabelM: Medium 12px/150% Sage UI;
213
277
  --typographyButtonLabelS: Bold 14px/150% Sage UI;
214
278
  --typographyButtonLabelM: Bold 14px/150% Sage UI;
@@ -222,6 +286,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
222
286
  --typographyDialogTitleXl: Bold 20px/125% Sage UI;
223
287
  --typographyDialogParagraphXs: Bold 14px/150% Sage UI;
224
288
  --typographyDialogParagraphS: Bold 14px/150% Sage UI;
289
+ --typographyDrawerTitleM: Bold 22px/125% Sage UI;
225
290
  --typographyFlashTextM: Regular 14px/150% Sage UI;
226
291
  --typographyFlashTextL: Regular 16px/150% Sage UI;
227
292
  --typographyFormFieldLabelXs: Medium 14px/150% Sage UI;
@@ -258,6 +323,8 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
258
323
  --typographyFormFieldCharacterCountL: Regular 14px/150% Sage UI;
259
324
  --typographyLinkTextM: Regular 14px/150% Sage UI;
260
325
  --typographyLinkTextL: Regular 16px/150% Sage UI;
326
+ --typographyMenuLabelM: Medium 14px/150% Sage UI;
327
+ --typographyMenuSegmentTitleM: Medium 12px/150% Sage UI;
261
328
  --typographyMessageHeadingM: Bold 14px/150% Sage UI;
262
329
  --typographyMessageHeadingL: Bold 16px/150% Sage UI;
263
330
  --typographyMessageTextM: Regular 14px/150% Sage UI;
@@ -266,13 +333,44 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
266
333
  --typographyPillLabelM: Medium 12px/150% Sage UI;
267
334
  --typographyPillLabelL: Medium 14px/150% Sage UI;
268
335
  --typographyPillLabelXl: Medium 16px/150% Sage UI;
269
- --typographyProgressTrackerValueLabelM: Medium 14px/150% Sage UI;
336
+ --typographyProfileEmailXs: Regular 12px/100% Sage UI;
337
+ --typographyProfileEmailS: Regular 14px/100% Sage UI;
338
+ --typographyProfileEmailM: Regular 14px/125% Sage UI;
339
+ --typographyProfileEmailMl: Regular 14px/125% Sage UI;
340
+ --typographyProfileEmailL: Regular 14px/125% Sage UI;
341
+ --typographyProfileEmailXl: Regular 18px/125% Sage UI;
342
+ --typographyProfileEmailXxl: Regular 24px/125% Sage UI;
343
+ --typographyProfileInitialsXs: Medium 10px/150% Sage UI;
344
+ --typographyProfileInitialsS: Medium 14px/150% Sage UI;
345
+ --typographyProfileInitialsM: Medium 18px/150% Sage UI;
346
+ --typographyProfileInitialsMl: Medium 24px/150% Sage UI;
347
+ --typographyProfileInitialsL: Medium 32px/150% Sage UI;
348
+ --typographyProfileInitialsXl: Medium 48px/150% Sage UI;
349
+ --typographyProfileInitialsXxl: Medium 56px/150% Sage UI;
350
+ --typographyProfileNameXs: Medium 13px/100% Sage UI;
351
+ --typographyProfileNameS: Medium 14px/100% Sage UI;
352
+ --typographyProfileNameM: Medium 14px/125% Sage UI;
353
+ --typographyProfileNameMl: Medium 16px/125% Sage UI;
354
+ --typographyProfileNameL: Medium 20px/125% Sage UI;
355
+ --typographyProfileNameXl: Medium 24px/125% Sage UI;
356
+ --typographyProfileNameXxl: Medium 32px/125% Sage UI;
270
357
  --typographyProgressTrackerValueLabelS: Medium 14px/150% Sage UI;
358
+ --typographyProgressTrackerValueLabelM: Medium 14px/150% Sage UI;
271
359
  --typographyProgressTrackerValueLabelL: Medium 14px/150% Sage UI;
360
+ --typographySearchLabelM: Regular 14px/150% Sage UI;
361
+ --typographySidebarTitleS: Bold 20px/125% Sage UI;
362
+ --typographySidebarTitleM: Bold 20px/125% Sage UI;
363
+ --typographySidebarTitleL: Bold 20px/125% Sage UI;
364
+ --typographyStepFlowCompleteLabelM: Medium 14px/150% Sage UI;
365
+ --typographyStepFlowCurrentLabelM: Medium 14px/150% Sage UI;
366
+ --typographyStepFlowIncompleteLabelM: Medium 14px/150% Sage UI;
272
367
  --typographySwitchOptionLabelM: Medium 12px/150% Sage UI;
273
368
  --typographySwitchOptionLabelL: Medium 14px/150% Sage UI;
274
369
  --typographyTableHeaderTextM: Medium 14px/150% Sage UI;
275
370
  --typographyTableCellTextM: Regular 14px/150% Sage UI;
276
371
  --typographyTooltipTextM: Regular 14px/150% Sage UI;
277
372
  --typographyTooltipTextL: Regular 16px/150% Sage UI;
373
+ --opacity300: 0.3;
374
+ --opacity600: 0.6;
375
+ --opacity800: 0.8;
278
376
  }