@sage/design-tokens 1.84.0 → 1.87.1

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 +234 -202
  3. package/css/no-theme.css +191 -190
  4. package/data/{all.json → tokens.json} +1174 -780
  5. package/docs/index.html +1763 -763
  6. package/index.d.ts +4 -3
  7. package/index.js +6 -1
  8. package/js/base/common.d.ts +554 -169
  9. package/js/base/common.js +169 -137
  10. package/js/base/es6.d.ts +554 -169
  11. package/js/base/es6.js +402 -221
  12. package/js/no-theme/common.d.ts +4 -46
  13. package/js/no-theme/common.js +131 -130
  14. package/js/no-theme/es6.d.ts +4 -46
  15. package/js/no-theme/es6.js +130 -153
  16. package/package.json +1 -1
  17. package/sage-design-tokens-1.87.1.tgz +0 -0
  18. package/scss/base.scss +234 -202
  19. package/scss/no-theme.scss +191 -190
  20. package/data/base.json +0 -1819
  21. package/data/no-theme.json +0 -1649
  22. package/sage-design-tokens-1.84.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,147 @@
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 Tue, 07 Dec 2021 11:13:17 GMT
7
+ * Generated on Wed, 12 Jan 2022 11:22:45 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
- --colorsActionMajorTransparent: rgba(0,0,0,0);
62
- --colorsActionMajorYin030: rgba(0,0,0,0.3);
63
- --colorsActionMajorYin055: rgba(0,0,0,0.55);
64
- --colorsActionMajorYin065: rgba(0,0,0,0.65);
65
- --colorsActionMajorYin090: rgba(0,0,0,0.9);
66
- --colorsActionMajorYang100: rgba(255,255,255,1);
67
- --colorsActionMajor025: #F2F9F6;
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
+ --colorsYin090: #000000e6;
19
+ --colorsYang100: #ffffffff;
20
+ --colorsDisabled400: #f2f5f6ff;
21
+ --colorsDisabled500: #e6ebedff;
22
+ --colorsDisabled600: #ccd6dbff;
23
+ --colorsReadOnly400: #f2f5f6ff;
24
+ --colorsReadOnly500: #e6ebedff;
25
+ --colorsReadOnly600: #ccd6dbff;
26
+ --colorsComponentsNavigation500: #008146ff;
27
+ --colorsComponentsNavigation600: #006738ff;
28
+ --colorsComponentsNavigation700: #004d2aff;
29
+ --colorsComponentsNavigationTransparent: #00000000;
30
+ --colorsComponentsNavigationYin100: #000000ff;
31
+ --colorsComponentsNavigationYin030: #0000004d;
32
+ --colorsComponentsNavigationYin055: #0000008c;
33
+ --colorsComponentsNavigationYin065: #000000a6;
34
+ --colorsComponentsNavigationYin090: #000000e6;
35
+ --colorsComponentsNavigationYang100: #ffffffff;
36
+ --colorsUtilityMajor100: #ccd6dbff;
37
+ --colorsUtilityMajor150: #b3c2c9ff;
38
+ --colorsUtilityMajor200: #99adb7ff;
39
+ --colorsUtilityMajor300: #668494ff;
40
+ --colorsUtilityMajor400: #335b70ff;
41
+ --colorsUtilityMajor500: #00324cff;
42
+ --colorsUtilityMajor800: #00141eff;
43
+ --colorsUtilityMajor025: #f2f5f6ff;
44
+ --colorsUtilityMajor050: #e6ebedff;
45
+ --colorsUtilityMajor075: #d9e0e4ff;
46
+ --colorsUtilityMajorTransparent: #00000000;
47
+ --colorsUtilityYin030: #0000004d;
48
+ --colorsUtilityYin055: #0000008c;
49
+ --colorsUtilityYin065: #000000a6;
50
+ --colorsUtilityYin090: #000000e6;
51
+ --colorsUtilityYang100: #ffffffff;
52
+ --colorsUtilityDisabled400: #f2f5f6ff;
53
+ --colorsUtilityDisabled500: #e6ebedff;
54
+ --colorsUtilityDisabled600: #ccd6dbff;
55
+ --colorsUtilityReadOnly400: #f2f5f6ff;
56
+ --colorsUtilityReadOnly500: #e6ebedff;
57
+ --colorsUtilityReadOnly600: #ccd6dbff;
58
+ --colorsActionMajor150: #b3d9c8ff;
59
+ --colorsActionMajor500: #008146ff;
60
+ --colorsActionMajor600: #006738ff;
61
+ --colorsActionMajor700: #004d2aff;
62
+ --colorsActionMajor025: #f2f9f6ff;
63
+ --colorsActionMajorTransparent: #00000000;
64
+ --colorsActionMajorYin030: #0000004d;
65
+ --colorsActionMajorYin055: #0000008c;
66
+ --colorsActionMajorYin065: #000000a6;
67
+ --colorsActionMajorYin090: #000000e6;
68
+ --colorsActionMajorYang100: #ffffffff;
69
+ --colorsActionMinor100: #e6ebedff;
70
+ --colorsActionMinor150: #d9e0e4ff;
71
+ --colorsActionMinor200: #ccd6dbff;
72
+ --colorsActionMinor250: #b3c2c9ff;
73
+ --colorsActionMinor300: #99adb7ff;
74
+ --colorsActionMinor400: #668494ff;
75
+ --colorsActionMinor500: #335b70ff;
76
+ --colorsActionMinor600: #00324cff;
77
+ --colorsActionMinor900: #00141eff;
78
+ --colorsActionMinor025: #fafbfbff;
79
+ --colorsActionMinor050: #f2f5f6ff;
80
+ --colorsActionMinorTransparent: #00000000;
81
+ --colorsActionMinorYin030: #0000004d;
82
+ --colorsActionMinorYin055: #0000008c;
83
+ --colorsActionMinorYin065: #000000a6;
84
+ --colorsActionMinorYin090: #000000e6;
85
+ --colorsActionMinorYang100: #ffffffff;
86
+ --colorsActionDisabled400: #f2f5f6ff;
87
+ --colorsActionDisabled500: #e6ebedff;
88
+ --colorsActionDisabled600: #ccd6dbff;
89
+ --colorsActionReadOnly400: #f2f5f6ff;
90
+ --colorsActionReadOnly500: #e6ebedff;
91
+ --colorsActionReadOnly600: #ccd6dbff;
92
+ --colorsSemanticNeutral200: #ccd6dbff;
93
+ --colorsSemanticNeutral500: #335b70ff;
94
+ --colorsSemanticNeutral600: #00324cff;
95
+ --colorsSemanticNeutralTransparent: #00000000;
96
+ --colorsSemanticNeutralYin030: #0000004d;
97
+ --colorsSemanticNeutralYin055: #0000008c;
98
+ --colorsSemanticNeutralYin065: #000000a6;
99
+ --colorsSemanticNeutralYin090: #000000e6;
100
+ --colorsSemanticNeutralYang100: #ffffffff;
101
+ --colorsSemanticFocus250: #ffda80ff;
102
+ --colorsSemanticFocus500: #ffb500ff;
103
+ --colorsSemanticFocusTransparent: #00000000;
104
+ --colorsSemanticPositive500: #008a21ff;
105
+ --colorsSemanticPositive600: #006e1aff;
106
+ --colorsSemanticPositiveTransparent: #00000000;
107
+ --colorsSemanticPositiveYin030: #0000004d;
108
+ --colorsSemanticPositiveYin055: #0000008c;
109
+ --colorsSemanticPositiveYin065: #000000a6;
110
+ --colorsSemanticPositiveYin090: #000000e6;
111
+ --colorsSemanticPositiveYang100: #ffffffff;
112
+ --colorsSemanticNegative500: #cd384bff;
113
+ --colorsSemanticNegative600: #a42d3cff;
114
+ --colorsSemanticNegativeTransparent: #00000000;
115
+ --colorsSemanticNegativeYin030: #0000004d;
116
+ --colorsSemanticNegativeYin055: #0000008c;
117
+ --colorsSemanticNegativeYin065: #000000a6;
118
+ --colorsSemanticNegativeYin090: #000000e6;
119
+ --colorsSemanticNegativeYang100: #ffffffff;
120
+ --colorsSemanticCaution400: #f28533ff;
121
+ --colorsSemanticCaution500: #ef6700ff;
122
+ --colorsSemanticCaution600: #bf5200ff;
123
+ --colorsSemanticCautionTransparent: #00000000;
124
+ --colorsSemanticCautionYin030: #0000004d;
125
+ --colorsSemanticCautionYin055: #0000008c;
126
+ --colorsSemanticCautionYin065: #000000a6;
127
+ --colorsSemanticCautionYin090: #000000e6;
128
+ --colorsSemanticCautionYang100: #ffffffff;
129
+ --colorsSemanticInfo150: #b3cfe5ff;
130
+ --colorsSemanticInfo500: #0060a7ff;
131
+ --colorsSemanticInfo600: #004d86ff;
132
+ --colorsSemanticInfoTransparent: #00000000;
133
+ --colorsSemanticInfoYin030: #0000004d;
134
+ --colorsSemanticInfoYin055: #0000008c;
135
+ --colorsSemanticInfoYin065: #000000a6;
136
+ --colorsSemanticInfoYin090: #000000e6;
137
+ --colorsSemanticInfoYang100: #ffffffff;
138
138
  --sizing100: 8px;
139
139
  --sizing125: 10px;
140
140
  --sizing150: 12px;
141
141
  --sizing175: 14px;
142
142
  --sizing200: 16px;
143
143
  --sizing250: 20px;
144
+ --sizing275: 22px;
144
145
  --sizing300: 24px;
145
146
  --sizing350: 28px;
146
147
  --sizing375: 30px;
@@ -151,6 +152,8 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
151
152
  --sizing800: 64px;
152
153
  --sizing900: 72px;
153
154
  --sizing1000: 80px;
155
+ --sizing1300: 104px;
156
+ --sizing1600: 128px;
154
157
  --sizing025: 2px;
155
158
  --sizing050: 4px;
156
159
  --sizing075: 6px;
@@ -184,20 +187,21 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
184
187
  --fontSizes500: 22px;
185
188
  --fontSizes600: 24px;
186
189
  --fontSizes700: 32px;
187
- --fontSizes800: 48px;
188
- --fontSizes900: 56px;
189
- --fontSizes1000: 64px;
190
+ --fontSizes800: 40px;
191
+ --fontSizes900: 48px;
192
+ --fontSizes1000: 56px;
190
193
  --fontSizes010: 10px;
191
194
  --fontSizes025: 12px;
192
195
  --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;
196
+ --boxShadow100: 0 5px 5px 0 #00141e33, 0 10px 10px 0 #00141e1a;
197
+ --boxShadow200: 0 10px 20px 0 #00141e33, 0 20px 40px 0 #00141e1a;
198
+ --boxShadow300: 0 10px 30px 0 #00141e1a, 0 30px 60px 0 #00141e1a;
199
+ --boxShadow400: 0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a;
200
+ --boxShadow050: 0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26;
198
201
  --fontWeights400: Regular;
199
202
  --fontWeights500: Medium;
200
203
  --fontWeights700: Bold;
204
+ --lineHeights300: 100%;
201
205
  --lineHeights400: 125%;
202
206
  --lineHeights500: 150%;
203
207
  --fontFamiliesDefault: Sage UI;
@@ -205,70 +209,98 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
205
209
  --fontFamiliesAndroid: Roboto;
206
210
  --fontFamiliesOther: Open Sans;
207
211
  --borderRadiusCircle: 50%;
208
- --typographyAccordionTitleM: Bold 20px/125% Sage UI;
209
- --typographyAccordionSubtitleM: Medium 14px/150% Sage UI;
210
- --typographyAccordionParagraphM: Regular 14px/150% Sage UI;
211
- --typographyActionPopoverMenuItemM: Bold 14px/150% Sage UI;
212
- --typographyButtonLabelS: Bold 14px/150% Sage UI;
213
- --typographyButtonLabelM: Bold 14px/150% Sage UI;
214
- --typographyButtonLabelL: Bold 16px/150% Sage UI;
215
- --typographyDialogTitleXs: Bold 20px/125% Sage UI;
216
- --typographyDialogTitleS: Bold 20px/125% Sage UI;
217
- --typographyDialogTitleMs: Bold 20px/125% Sage UI;
218
- --typographyDialogTitleM: Bold 20px/125% Sage UI;
219
- --typographyDialogTitleMl: Bold 20px/125% Sage UI;
220
- --typographyDialogTitleL: Bold 20px/125% Sage UI;
221
- --typographyDialogTitleXl: Bold 20px/125% Sage UI;
222
- --typographyDialogParagraphXs: Bold 14px/150% Sage UI;
223
- --typographyDialogParagraphS: Bold 14px/150% Sage UI;
224
- --typographyFlashTextM: Regular 14px/150% Sage UI;
225
- --typographyFlashTextL: Regular 16px/150% Sage UI;
226
- --typographyFormFieldLabelXs: Medium 14px/150% Sage UI;
227
- --typographyFormFieldLabelS: Medium 14px/150% Sage UI;
228
- --typographyFormFieldLabelM: Medium 14px/150% Sage UI;
229
- --typographyFormFieldLabelL: Medium 16px/150% Sage UI;
230
- --typographyFormFieldHintTextXs: Regular 14px/150% Sage UI;
231
- --typographyFormFieldHintTextS: Regular 14px/150% Sage UI;
232
- --typographyFormFieldHintTextM: Regular 14px/150% Sage UI;
233
- --typographyFormFieldHintTextL: Regular 16px/150% Sage UI;
234
- --typographyFormFieldErrorMessageXs: Medium 14px/150% Sage UI;
235
- --typographyFormFieldErrorMessageS: Medium 14px/150% Sage UI;
236
- --typographyFormFieldErrorMessageM: Medium 14px/150% Sage UI;
237
- --typographyFormFieldErrorMessageL: Medium 16px/150% Sage UI;
238
- --typographyFormFieldCautionMessageXs: Regular 14px/150% Sage UI;
239
- --typographyFormFieldCautionMessageS: Regular 14px/150% Sage UI;
240
- --typographyFormFieldCautionMessageM: Regular 14px/150% Sage UI;
241
- --typographyFormFieldCautionMessageL: Regular 16px/150% Sage UI;
242
- --typographyFormFieldInputTextXs: Regular 14px/150% Sage UI;
243
- --typographyFormFieldInputTextS: Regular 14px/150% Sage UI;
244
- --typographyFormFieldInputTextM: Regular 14px/150% Sage UI;
245
- --typographyFormFieldInputTextL: Regular 16px/150% Sage UI;
246
- --typographyFormFieldDropdownOptionsXs: Regular 14px/150% Sage UI;
247
- --typographyFormFieldDropdownOptionsS: Regular 14px/150% Sage UI;
248
- --typographyFormFieldDropdownOptionsM: Regular 14px/150% Sage UI;
249
- --typographyFormFieldDropdownOptionsL: Regular 16px/150% Sage UI;
250
- --typographyFormFieldSecondLabelXs: Medium 14px/150% Sage UI;
251
- --typographyFormFieldSecondLabelS: Medium 14px/150% Sage UI;
252
- --typographyFormFieldSecondLabelM: Medium 14px/150% Sage UI;
253
- --typographyFormFieldSecondLabelL: Medium 16px/150% Sage UI;
254
- --typographyFormFieldCharacterCountXs: Regular 14px/150% Sage UI;
255
- --typographyFormFieldCharacterCountS: Regular 14px/150% Sage UI;
256
- --typographyFormFieldCharacterCountM: Regular 14px/150% Sage UI;
257
- --typographyFormFieldCharacterCountL: Regular 14px/150% Sage UI;
258
- --typographyLinkTextM: Regular 14px/150% Sage UI;
259
- --typographyLinkTextL: Regular 16px/150% Sage UI;
260
- --typographyMessageHeadingM: Bold 14px/150% Sage UI;
261
- --typographyMessageHeadingL: Bold 16px/150% Sage UI;
262
- --typographyMessageTextM: Regular 14px/150% Sage UI;
263
- --typographyMessageTextL: Regular 16px/150% Sage UI;
264
- --typographyPillLabelS: Medium 10px/150% Sage UI;
265
- --typographyPillLabelM: Medium 12px/150% Sage UI;
266
- --typographyPillLabelL: Medium 14px/150% Sage UI;
267
- --typographyPillLabelXl: Medium 16px/150% Sage UI;
268
- --typographySwitchOptionLabelM: Medium 12px/150% Sage UI;
269
- --typographySwitchOptionLabelL: Medium 14px/150% Sage UI;
270
- --typographyTableHeaderTextM: Medium 14px/150% Sage UI;
271
- --typographyTableCellTextM: Regular 14px/150% Sage UI;
272
- --typographyTooltipTextM: Regular 14px/150% Sage UI;
273
- --typographyTooltipTextL: Regular 16px/150% Sage UI;
212
+ --typographyAccordionTitleM: [object Object];
213
+ --typographyAccordionSubtitleM: [object Object];
214
+ --typographyAccordionParagraphM: [object Object];
215
+ --typographyActionPopoverMenuItemM: [object Object];
216
+ --typographyAnchorNavLabelM: [object Object];
217
+ --typographyBadgeLabelM: [object Object];
218
+ --typographyButtonLabelS: [object Object];
219
+ --typographyButtonLabelM: [object Object];
220
+ --typographyButtonLabelL: [object Object];
221
+ --typographyDialogTitleXs: [object Object];
222
+ --typographyDialogTitleS: [object Object];
223
+ --typographyDialogTitleMs: [object Object];
224
+ --typographyDialogTitleM: [object Object];
225
+ --typographyDialogTitleMl: [object Object];
226
+ --typographyDialogTitleL: [object Object];
227
+ --typographyDialogTitleXl: [object Object];
228
+ --typographyDialogParagraphXs: [object Object];
229
+ --typographyDialogParagraphS: [object Object];
230
+ --typographyFlashTextM: [object Object];
231
+ --typographyFlashTextL: [object Object];
232
+ --typographyFormFieldLabelXs: [object Object];
233
+ --typographyFormFieldLabelS: [object Object];
234
+ --typographyFormFieldLabelM: [object Object];
235
+ --typographyFormFieldLabelL: [object Object];
236
+ --typographyFormFieldHintTextXs: [object Object];
237
+ --typographyFormFieldHintTextS: [object Object];
238
+ --typographyFormFieldHintTextM: [object Object];
239
+ --typographyFormFieldHintTextL: [object Object];
240
+ --typographyFormFieldErrorMessageXs: [object Object];
241
+ --typographyFormFieldErrorMessageS: [object Object];
242
+ --typographyFormFieldErrorMessageM: [object Object];
243
+ --typographyFormFieldErrorMessageL: [object Object];
244
+ --typographyFormFieldCautionMessageXs: [object Object];
245
+ --typographyFormFieldCautionMessageS: [object Object];
246
+ --typographyFormFieldCautionMessageM: [object Object];
247
+ --typographyFormFieldCautionMessageL: [object Object];
248
+ --typographyFormFieldInputTextXs: [object Object];
249
+ --typographyFormFieldInputTextS: [object Object];
250
+ --typographyFormFieldInputTextM: [object Object];
251
+ --typographyFormFieldInputTextL: [object Object];
252
+ --typographyFormFieldDropdownOptionsXs: [object Object];
253
+ --typographyFormFieldDropdownOptionsS: [object Object];
254
+ --typographyFormFieldDropdownOptionsM: [object Object];
255
+ --typographyFormFieldDropdownOptionsL: [object Object];
256
+ --typographyFormFieldSecondLabelXs: [object Object];
257
+ --typographyFormFieldSecondLabelS: [object Object];
258
+ --typographyFormFieldSecondLabelM: [object Object];
259
+ --typographyFormFieldSecondLabelL: [object Object];
260
+ --typographyFormFieldCharacterCountXs: [object Object];
261
+ --typographyFormFieldCharacterCountS: [object Object];
262
+ --typographyFormFieldCharacterCountM: [object Object];
263
+ --typographyFormFieldCharacterCountL: [object Object];
264
+ --typographyLinkTextM: [object Object];
265
+ --typographyLinkTextL: [object Object];
266
+ --typographyMessageHeadingM: [object Object];
267
+ --typographyMessageHeadingL: [object Object];
268
+ --typographyMessageTextM: [object Object];
269
+ --typographyMessageTextL: [object Object];
270
+ --typographyPillLabelS: [object Object];
271
+ --typographyPillLabelM: [object Object];
272
+ --typographyPillLabelL: [object Object];
273
+ --typographyPillLabelXl: [object Object];
274
+ --typographyProfileEmailXs: [object Object];
275
+ --typographyProfileEmailS: [object Object];
276
+ --typographyProfileEmailM: [object Object];
277
+ --typographyProfileEmailMl: [object Object];
278
+ --typographyProfileEmailL: [object Object];
279
+ --typographyProfileEmailXl: [object Object];
280
+ --typographyProfileEmailXxl: [object Object];
281
+ --typographyProfileInitialsXs: [object Object];
282
+ --typographyProfileInitialsS: [object Object];
283
+ --typographyProfileInitialsM: [object Object];
284
+ --typographyProfileInitialsMl: [object Object];
285
+ --typographyProfileInitialsL: [object Object];
286
+ --typographyProfileInitialsXl: [object Object];
287
+ --typographyProfileInitialsXxl: [object Object];
288
+ --typographyProfileNameXs: [object Object];
289
+ --typographyProfileNameS: [object Object];
290
+ --typographyProfileNameM: [object Object];
291
+ --typographyProfileNameMl: [object Object];
292
+ --typographyProfileNameL: [object Object];
293
+ --typographyProfileNameXl: [object Object];
294
+ --typographyProfileNameXxl: [object Object];
295
+ --typographyProgressTrackerValueLabelS: [object Object];
296
+ --typographyProgressTrackerValueLabelM: [object Object];
297
+ --typographyProgressTrackerValueLabelL: [object Object];
298
+ --typographySwitchOptionLabelM: [object Object];
299
+ --typographySwitchOptionLabelL: [object Object];
300
+ --typographyTableHeaderTextM: [object Object];
301
+ --typographyTableCellTextM: [object Object];
302
+ --typographyTooltipTextM: [object Object];
303
+ --typographyTooltipTextL: [object Object];
304
+ --opacity300: 0.3;
305
+ --opacity600: 0.6;
274
306
  }