@sage/design-tokens 1.78.0 → 1.82.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 (19) hide show
  1. package/css/base.css +70 -77
  2. package/css/no-theme.css +158 -134
  3. package/data/all.json +513 -315
  4. package/data/base.json +144 -99
  5. package/data/no-theme.json +375 -222
  6. package/docs/index.html +1422 -1081
  7. package/js/base/common.d.ts +94 -55
  8. package/js/base/common.js +10 -17
  9. package/js/base/es6.d.ts +94 -55
  10. package/js/base/es6.js +87 -33
  11. package/js/no-theme/common.d.ts +70 -46
  12. package/js/no-theme/common.js +98 -74
  13. package/js/no-theme/es6.d.ts +70 -46
  14. package/js/no-theme/es6.js +106 -82
  15. package/package.json +1 -1
  16. package/sage-design-tokens-1.82.0.tgz +0 -0
  17. package/scss/base.scss +70 -77
  18. package/scss/no-theme.scss +158 -134
  19. package/sage-design-tokens-1.78.0.tgz +0 -0
package/css/base.css CHANGED
@@ -3,7 +3,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
3
3
  */
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Wed, 03 Nov 2021 14:57:03 GMT
6
+ * Generated on Tue, 30 Nov 2021 14:50:31 GMT
7
7
  */
8
8
 
9
9
  :root {
@@ -65,11 +65,14 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
65
65
  --colorsActionMajorYin090: rgba(0,0,0,0.9);
66
66
  --colorsActionMajorYang100: rgba(255,255,255,1);
67
67
  --colorsActionMinor100: #E6EBED;
68
+ --colorsActionMinor150: #D9E0E4;
68
69
  --colorsActionMinor200: #CCD6DB;
70
+ --colorsActionMinor250: #B3C2C9;
69
71
  --colorsActionMinor300: #99ADB7;
70
72
  --colorsActionMinor400: #668494;
71
73
  --colorsActionMinor500: #335B70;
72
74
  --colorsActionMinor600: #00324C;
75
+ --colorsActionMinor900: #00141E;
73
76
  --colorsActionMinor025: #FAFBFB;
74
77
  --colorsActionMinor050: #F2F5F6;
75
78
  --colorsActionMinorTransparent: rgba(0,0,0,0);
@@ -130,6 +133,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
130
133
  --colorsSemanticInfoYin065: rgba(0,0,0,0.65);
131
134
  --colorsSemanticInfoYin090: rgba(0,0,0,0.9);
132
135
  --colorsSemanticInfoYang100: rgba(255,255,255,1);
136
+ --colorsTest100: #123456;
133
137
  --sizing100: 8px;
134
138
  --sizing125: 10px;
135
139
  --sizing150: 12px;
@@ -185,22 +189,11 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
185
189
  --fontSizes010: 10px;
186
190
  --fontSizes025: 12px;
187
191
  --fontSizes050: 13px;
188
- --boxShadow100: 0 10px 10px 0 rgba(0,20,29,0.1);
189
- --boxShadow200: 0 20px 40px 0 rgba(0,20,29,0.1);
190
- --boxShadow300: 0 30px 60px 0 rgba(0,20,29,0.1);
191
- --boxShadow400: 0 50px 80px 0 rgba(0,20,29,0.1);
192
- --opacity100: 10%;
193
- --opacity200: 20%;
194
- --opacity300: 30%;
195
- --opacity400: 40%;
196
- --opacity500: 50%;
197
- --opacity550: 55%;
198
- --opacity600: 60%;
199
- --opacity650: 65%;
200
- --opacity700: 70%;
201
- --opacity800: 80%;
202
- --opacity900: 90%;
203
- --opacity1000: 100%;
192
+ --boxShadow100: undefined undefined undefined undefined undefined;
193
+ --boxShadow200: undefined undefined undefined undefined undefined;
194
+ --boxShadow300: undefined undefined undefined undefined undefined;
195
+ --boxShadow400: undefined undefined undefined undefined undefined;
196
+ --boxShadow050: undefined undefined undefined undefined undefined;
204
197
  --fontWeights400: Regular;
205
198
  --fontWeights500: Medium;
206
199
  --fontWeights700: Bold;
@@ -211,64 +204,64 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
211
204
  --fontFamiliesAndroid: Roboto;
212
205
  --fontFamiliesOther: Open Sans;
213
206
  --borderRadiusCircle: 50%;
214
- --typographyButtonLabelS: [object Object];
215
- --typographyButtonLabelM: [object Object];
216
- --typographyButtonLabelL: [object Object];
217
- --typographyDialogTitleXs: [object Object];
218
- --typographyDialogTitleS: [object Object];
219
- --typographyDialogTitleMs: [object Object];
220
- --typographyDialogTitleM: [object Object];
221
- --typographyDialogTitleMl: [object Object];
222
- --typographyDialogTitleL: [object Object];
223
- --typographyDialogTitleXl: [object Object];
224
- --typographyFlashTextM: [object Object];
225
- --typographyFlashTextL: [object Object];
226
- --typographyFormFieldLabelXs: [object Object];
227
- --typographyFormFieldLabelS: [object Object];
228
- --typographyFormFieldLabelM: [object Object];
229
- --typographyFormFieldLabelL: [object Object];
230
- --typographyFormFieldHintTextXs: [object Object];
231
- --typographyFormFieldHintTextS: [object Object];
232
- --typographyFormFieldHintTextM: [object Object];
233
- --typographyFormFieldHintTextL: [object Object];
234
- --typographyFormFieldErrorMessageXs: [object Object];
235
- --typographyFormFieldErrorMessageS: [object Object];
236
- --typographyFormFieldErrorMessageM: [object Object];
237
- --typographyFormFieldErrorMessageL: [object Object];
238
- --typographyFormFieldCautionMessageXs: [object Object];
239
- --typographyFormFieldCautionMessageS: [object Object];
240
- --typographyFormFieldCautionMessageM: [object Object];
241
- --typographyFormFieldCautionMessageL: [object Object];
242
- --typographyFormFieldInputTextXs: [object Object];
243
- --typographyFormFieldInputTextS: [object Object];
244
- --typographyFormFieldInputTextM: [object Object];
245
- --typographyFormFieldInputTextL: [object Object];
246
- --typographyFormFieldDropdownOptionsXs: [object Object];
247
- --typographyFormFieldDropdownOptionsS: [object Object];
248
- --typographyFormFieldDropdownOptionsM: [object Object];
249
- --typographyFormFieldDropdownOptionsL: [object Object];
250
- --typographyFormFieldSecondLabelXs: [object Object];
251
- --typographyFormFieldSecondLabelS: [object Object];
252
- --typographyFormFieldSecondLabelM: [object Object];
253
- --typographyFormFieldSecondLabelL: [object Object];
254
- --typographyFormFieldCharacterCountXs: [object Object];
255
- --typographyFormFieldCharacterCountS: [object Object];
256
- --typographyFormFieldCharacterCountM: [object Object];
257
- --typographyFormFieldCharacterCountL: [object Object];
258
- --typographyLinkTextM: [object Object];
259
- --typographyLinkTextL: [object Object];
260
- --typographyMessageHeadingM: [object Object];
261
- --typographyMessageHeadingL: [object Object];
262
- --typographyMessageTextM: [object Object];
263
- --typographyMessageTextL: [object Object];
264
- --typographyPillLabelS: [object Object];
265
- --typographyPillLabelM: [object Object];
266
- --typographyPillLabelL: [object Object];
267
- --typographyPillLabelXl: [object Object];
268
- --typographySwitchOptionLabelM: [object Object];
269
- --typographySwitchOptionLabelL: [object Object];
270
- --typographyTableHeaderTextM: [object Object];
271
- --typographyTableCellTextM: [object Object];
272
- --typographyTooltipTextM: [object Object];
273
- --typographyTooltipTextL: [object Object];
207
+ --typographyButtonLabelS: Bold 14px/150% Sage UI;
208
+ --typographyButtonLabelM: Bold 14px/150% Sage UI;
209
+ --typographyButtonLabelL: Bold 16px/150% Sage UI;
210
+ --typographyDialogTitleXs: Bold 20px/125% Sage UI;
211
+ --typographyDialogTitleS: Bold 20px/125% Sage UI;
212
+ --typographyDialogTitleMs: Bold 20px/125% Sage UI;
213
+ --typographyDialogTitleM: Bold 20px/125% Sage UI;
214
+ --typographyDialogTitleMl: Bold 20px/125% Sage UI;
215
+ --typographyDialogTitleL: Bold 20px/125% Sage UI;
216
+ --typographyDialogTitleXl: Bold 20px/125% Sage UI;
217
+ --typographyFlashTextM: Regular 14px/150% Sage UI;
218
+ --typographyFlashTextL: Regular 16px/150% Sage UI;
219
+ --typographyFormFieldLabelXs: Medium 14px/150% Sage UI;
220
+ --typographyFormFieldLabelS: Medium 14px/150% Sage UI;
221
+ --typographyFormFieldLabelM: Medium 14px/150% Sage UI;
222
+ --typographyFormFieldLabelL: Medium 16px/150% Sage UI;
223
+ --typographyFormFieldHintTextXs: Regular 14px/150% Sage UI;
224
+ --typographyFormFieldHintTextS: Regular 14px/150% Sage UI;
225
+ --typographyFormFieldHintTextM: Regular 14px/150% Sage UI;
226
+ --typographyFormFieldHintTextL: Regular 16px/150% Sage UI;
227
+ --typographyFormFieldErrorMessageXs: Medium 14px/150% Sage UI;
228
+ --typographyFormFieldErrorMessageS: Medium 14px/150% Sage UI;
229
+ --typographyFormFieldErrorMessageM: Medium 14px/150% Sage UI;
230
+ --typographyFormFieldErrorMessageL: Medium 16px/150% Sage UI;
231
+ --typographyFormFieldCautionMessageXs: Regular 14px/150% Sage UI;
232
+ --typographyFormFieldCautionMessageS: Regular 14px/150% Sage UI;
233
+ --typographyFormFieldCautionMessageM: Regular 14px/150% Sage UI;
234
+ --typographyFormFieldCautionMessageL: Regular 16px/150% Sage UI;
235
+ --typographyFormFieldInputTextXs: Regular 14px/150% Sage UI;
236
+ --typographyFormFieldInputTextS: Regular 14px/150% Sage UI;
237
+ --typographyFormFieldInputTextM: Regular 14px/150% Sage UI;
238
+ --typographyFormFieldInputTextL: Regular 16px/150% Sage UI;
239
+ --typographyFormFieldDropdownOptionsXs: Regular 14px/150% Sage UI;
240
+ --typographyFormFieldDropdownOptionsS: Regular 14px/150% Sage UI;
241
+ --typographyFormFieldDropdownOptionsM: Regular 14px/150% Sage UI;
242
+ --typographyFormFieldDropdownOptionsL: Regular 16px/150% Sage UI;
243
+ --typographyFormFieldSecondLabelXs: Medium 14px/150% Sage UI;
244
+ --typographyFormFieldSecondLabelS: Medium 14px/150% Sage UI;
245
+ --typographyFormFieldSecondLabelM: Medium 14px/150% Sage UI;
246
+ --typographyFormFieldSecondLabelL: Medium 16px/150% Sage UI;
247
+ --typographyFormFieldCharacterCountXs: Regular 14px/150% Sage UI;
248
+ --typographyFormFieldCharacterCountS: Regular 14px/150% Sage UI;
249
+ --typographyFormFieldCharacterCountM: Regular 14px/150% Sage UI;
250
+ --typographyFormFieldCharacterCountL: Regular 14px/150% Sage UI;
251
+ --typographyLinkTextM: Regular 14px/150% Sage UI;
252
+ --typographyLinkTextL: Regular 16px/150% Sage UI;
253
+ --typographyMessageHeadingM: Bold 14px/150% Sage UI;
254
+ --typographyMessageHeadingL: Bold 16px/150% Sage UI;
255
+ --typographyMessageTextM: Regular 14px/150% Sage UI;
256
+ --typographyMessageTextL: Regular 16px/150% Sage UI;
257
+ --typographyPillLabelS: Medium 10px/150% Sage UI;
258
+ --typographyPillLabelM: Medium 12px/150% Sage UI;
259
+ --typographyPillLabelL: Medium 14px/150% Sage UI;
260
+ --typographyPillLabelXl: Medium 16px/150% Sage UI;
261
+ --typographySwitchOptionLabelM: Medium 12px/150% Sage UI;
262
+ --typographySwitchOptionLabelL: Medium 14px/150% Sage UI;
263
+ --typographyTableHeaderTextM: Medium 14px/150% Sage UI;
264
+ --typographyTableCellTextM: Regular 14px/150% Sage UI;
265
+ --typographyTooltipTextM: Regular 14px/150% Sage UI;
266
+ --typographyTooltipTextL: Regular 16px/150% Sage UI;
274
267
  }
package/css/no-theme.css CHANGED
@@ -3,100 +3,136 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
3
3
  */
4
4
  /**
5
5
  * Do not edit directly
6
- * Generated on Wed, 03 Nov 2021 14:57:03 GMT
6
+ * Generated on Tue, 30 Nov 2021 14:50:31 GMT
7
7
  */
8
8
 
9
9
  :root {
10
10
  --metaName: No Theme;
11
11
  --metaPublic: true;
12
12
  --colorsLogo: #ef001d;
13
+ --colorsTransparent: rgba(0,0,0,0);
13
14
  --colorsYin030: rgba(0,172,0,0.3);
14
15
  --colorsYin055: rgba(0,172,0,0.55);
15
16
  --colorsYin065: rgba(0,172,0,0.65);
16
17
  --colorsYin090: rgba(0,172,0,0.9);
17
18
  --colorsYang100: rgba(255,255,0,1);
19
+ --colorsDisabled400: #ed99f9;
20
+ --colorsDisabled500: #e880f7;
21
+ --colorsDisabled600: #e366f5;
22
+ --colorsReadOnly400: #4da6f4;
23
+ --colorsReadOnly500: #198df1;
24
+ --colorsReadOnly600: #0073d7;
18
25
  --colorsComponentsNavigation500: #fcccd2;
19
26
  --colorsComponentsNavigation600: #f999a5;
20
27
  --colorsComponentsNavigation700: #f56677;
21
- --colorsComponentsNavigation1000: #f2334a;
22
- --colorsComponentsNavigation000: #fde6e8;
23
- --colorsComponentsNavigationTransparent: rgba(0, 120, 113, 0.6);
24
- --colorsUtilityMajor100: #f999e9;
25
- --colorsUtilityMajor150: #f780e4;
26
- --colorsUtilityMajor200: #f566df;
27
- --colorsUtilityMajor300: #f44dd9;
28
- --colorsUtilityMajor400: #f233d4;
29
- --colorsUtilityMajor500: #ef00c9;
30
- --colorsUtilityMajor800: #bf00a1;
31
- --colorsUtilityMajor1000: #8f0079;
32
- --colorsUtilityMajor000: #fef2fc;
33
- --colorsUtilityMajor025: #fde6fa;
34
- --colorsUtilityMajor050: #fcccf4;
35
- --colorsUtilityMajor075: #fab3ef;
36
- --colorsUtilityMajorTransparent: rgba(3, 152, 0, 0.6);
28
+ --colorsComponentsNavigationTransparent: rgba(0,0,0,0);
29
+ --colorsComponentsNavigationYin100: rgba(0,172,0,1);
30
+ --colorsComponentsNavigationYin030: rgba(0,172,0,0.3);
31
+ --colorsComponentsNavigationYin055: rgba(0,172,0,0.55);
32
+ --colorsComponentsNavigationYin065: rgba(0,172,0,0.65);
33
+ --colorsComponentsNavigationYin090: rgba(0,172,0,0.9);
34
+ --colorsComponentsNavigationYang100: rgba(255,255,0,1);
35
+ --colorsUtilityMajor100: #94A9FF;
36
+ --colorsUtilityMajor150: #7C96FF;
37
+ --colorsUtilityMajor200: #6482FF;
38
+ --colorsUtilityMajor300: #3A61FF;
39
+ --colorsUtilityMajor400: #0031FC;
40
+ --colorsUtilityMajor500: #0029D1;
41
+ --colorsUtilityMajor800: #001053;
42
+ --colorsUtilityMajor025: #E5EAFF;
43
+ --colorsUtilityMajor050: #CED8FF;
44
+ --colorsUtilityMajor075: #AFBFFF;
45
+ --colorsUtilityMajorTransparent: rgba(0,0,0,0);
46
+ --colorsUtilityYin030: rgba(0,172,0,0.3);
47
+ --colorsUtilityYin055: rgba(0,172,0,0.55);
48
+ --colorsUtilityYin065: rgba(0,172,0,0.65);
49
+ --colorsUtilityYin090: rgba(0,172,0,0.9);
50
+ --colorsUtilityYang100: rgba(255,255,0,1);
37
51
  --colorsUtilityDisabled400: #ed99f9;
38
52
  --colorsUtilityDisabled500: #e880f7;
39
53
  --colorsUtilityDisabled600: #e366f5;
40
- --colorsUtilityReadOnly400: #cb4df4;
41
- --colorsUtilityReadOnly500: #c433f2;
42
- --colorsUtilityReadOnly600: #bc19f1;
54
+ --colorsUtilityReadOnly400: #4da6f4;
55
+ --colorsUtilityReadOnly500: #198df1;
56
+ --colorsUtilityReadOnly600: #0073d7;
43
57
  --colorsActionMajor150: #daccfc;
44
58
  --colorsActionMajor500: #9166f5;
45
59
  --colorsActionMajor600: #6c33f2;
46
60
  --colorsActionMajor700: #4700ef;
47
- --colorsActionMajor1000: #3200a7;
48
- --colorsActionMajor000: #ede6fd;
49
- --colorsActionMajorTransparent: rgba(255, 0, 0, 0.6);
50
- --colorsActionMinor100: #99abf9;
51
- --colorsActionMinor200: #8096f7;
52
- --colorsActionMinor300: #6681f5;
53
- --colorsActionMinor400: #4d6cf4;
54
- --colorsActionMinor500: #3357f2;
55
- --colorsActionMinor600: #1942f1;
56
- --colorsActionMinor1000: #001fa7;
57
- --colorsActionMinor000: #e6eafd;
58
- --colorsActionMinor025: #ccd5fc;
59
- --colorsActionMinor050: #b3c0fa;
60
- --colorsActionMinorTransparent: rgba(199, 74, 4, 0.6);
61
- --colorsActionDisabled400: #cce3fc;
62
- --colorsActionDisabled500: #b3d5fa;
63
- --colorsActionDisabled600: #99c7f9;
61
+ --colorsActionMajorTransparent: rgba(0,0,0,0);
62
+ --colorsActionMajorYin030: rgba(0,172,0,0.3);
63
+ --colorsActionMajorYin055: rgba(0,172,0,0.55);
64
+ --colorsActionMajorYin065: rgba(0,172,0,0.65);
65
+ --colorsActionMajorYin090: rgba(0,172,0,0.9);
66
+ --colorsActionMajorYang100: rgba(255,255,0,1);
67
+ --colorsActionMinor100: #CED8FF;
68
+ --colorsActionMinor150: #AFBFFF;
69
+ --colorsActionMinor200: #94A9FF;
70
+ --colorsActionMinor250: #7C96FF;
71
+ --colorsActionMinor300: #6482FF;
72
+ --colorsActionMinor400: #3A61FF;
73
+ --colorsActionMinor500: #0031FC;
74
+ --colorsActionMinor600: #0029D1;
75
+ --colorsActionMinor900: #001053;
76
+ --colorsActionMinor025: #F1F4FF;
77
+ --colorsActionMinor050: #E5EAFF;
78
+ --colorsActionMinorTransparent: rgba(0,0,0,0);
79
+ --colorsActionMinorYin030: rgba(0,172,0,0.3);
80
+ --colorsActionMinorYin055: rgba(0,172,0,0.55);
81
+ --colorsActionMinorYin065: rgba(0,172,0,0.65);
82
+ --colorsActionMinorYin090: rgba(0,172,0,0.9);
83
+ --colorsActionMinorYang100: rgba(255,255,0,1);
84
+ --colorsActionDisabled400: #ed99f9;
85
+ --colorsActionDisabled500: #e880f7;
86
+ --colorsActionDisabled600: #e366f5;
64
87
  --colorsActionReadOnly400: #4da6f4;
65
88
  --colorsActionReadOnly500: #198df1;
66
89
  --colorsActionReadOnly600: #0073d7;
67
90
  --colorsSemanticNeutral200: #99f0f9;
68
91
  --colorsSemanticNeutral500: #00d9ef;
69
92
  --colorsSemanticNeutral600: #00aebf;
70
- --colorsSemanticNeutral1000: #00828f;
71
- --colorsSemanticNeutral000: #e6fbfd;
72
- --colorsSemanticNeutralTransparent: rgba(239, 0, 0, 0.6);
93
+ --colorsSemanticNeutralTransparent: rgba(0,0,0,0);
94
+ --colorsSemanticNeutralYin030: rgba(0,172,0,0.3);
95
+ --colorsSemanticNeutralYin055: rgba(0,172,0,0.55);
96
+ --colorsSemanticNeutralYin065: rgba(0,172,0,0.65);
97
+ --colorsSemanticNeutralYin090: rgba(0,172,0,0.9);
98
+ --colorsSemanticNeutralYang100: rgba(255,255,0,1);
73
99
  --colorsSemanticFocus250: #80f7d2;
74
100
  --colorsSemanticFocus500: #00efa5;
75
- --colorsSemanticFocus1000: #007853;
76
- --colorsSemanticFocus000: #e6fdf6;
77
- --colorsSemanticFocusTransparent: rgba(214, 0, 51, 0.6);
101
+ --colorsSemanticFocusTransparent: rgba(0,0,0,0);
78
102
  --colorsSemanticPositive500: #ffc173;
79
103
  --colorsSemanticPositive600: #ffb04b;
80
- --colorsSemanticPositive1000: #b37527;
81
- --colorsSemanticPositive000: #ffedd7;
82
- --colorsSemanticPositiveTransparent: rgba(0, 21, 214, 0.6);
104
+ --colorsSemanticPositiveTransparent: rgba(0,0,0,0);
105
+ --colorsSemanticPositiveYin030: rgba(0,172,0,0.3);
106
+ --colorsSemanticPositiveYin055: rgba(0,172,0,0.55);
107
+ --colorsSemanticPositiveYin065: rgba(0,172,0,0.65);
108
+ --colorsSemanticPositiveYin090: rgba(0,172,0,0.9);
109
+ --colorsSemanticPositiveYang100: rgba(255,255,0,1);
83
110
  --colorsSemanticNegative500: #d5ef00;
84
111
  --colorsSemanticNegative600: #aabf00;
85
- --colorsSemanticNegative1000: #6b7800;
86
- --colorsSemanticNegative000: #f7fccc;
87
- --colorsSemanticNegativeTransparent: rgba(91, 0, 239, 0.6);
112
+ --colorsSemanticNegativeTransparent: rgba(0,0,0,0);
113
+ --colorsSemanticNegativeYin030: rgba(0,172,0,0.3);
114
+ --colorsSemanticNegativeYin055: rgba(0,172,0,0.55);
115
+ --colorsSemanticNegativeYin065: rgba(0,172,0,0.65);
116
+ --colorsSemanticNegativeYin090: rgba(0,172,0,0.9);
117
+ --colorsSemanticNegativeYang100: rgba(255,255,0,1);
88
118
  --colorsSemanticCaution400: #4dcbb9;
89
119
  --colorsSemanticCaution500: #01b49b;
90
120
  --colorsSemanticCaution600: #01907c;
91
- --colorsSemanticCaution1000: #016c5d;
92
- --colorsSemanticCaution000: #e6f8f5;
93
- --colorsSemanticCautionTransparent: rgba(180, 0, 12, 0.6);
121
+ --colorsSemanticCautionTransparent: rgba(0,0,0,0);
122
+ --colorsSemanticCautionYin030: rgba(0,172,0,0.3);
123
+ --colorsSemanticCautionYin055: rgba(0,172,0,0.55);
124
+ --colorsSemanticCautionYin065: rgba(0,172,0,0.65);
125
+ --colorsSemanticCautionYin090: rgba(0,172,0,0.9);
126
+ --colorsSemanticCautionYang100: rgba(255,255,0,1);
94
127
  --colorsSemanticInfo150: #ffd7c8;
95
128
  --colorsSemanticInfo500: #ffaf90;
96
129
  --colorsSemanticInfo600: #ff946b;
97
- --colorsSemanticInfo1000: #ff7946;
98
- --colorsSemanticInfo000: #fff2ed;
99
- --colorsSemanticInfoTransparent: rgba(0, 131, 204, 0.6);
130
+ --colorsSemanticInfoTransparent: rgba(0,0,0,0);
131
+ --colorsSemanticInfoYin030: rgba(0,172,0,0.3);
132
+ --colorsSemanticInfoYin055: rgba(0,172,0,0.55);
133
+ --colorsSemanticInfoYin065: rgba(0,172,0,0.65);
134
+ --colorsSemanticInfoYin090: rgba(0,172,0,0.9);
135
+ --colorsSemanticInfoYang100: rgba(255,255,0,1);
100
136
  --sizing100: 8px;
101
137
  --sizing125: 10px;
102
138
  --sizing150: 12px;
@@ -113,11 +149,11 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
113
149
  --sizing800: 64px;
114
150
  --sizing900: 72px;
115
151
  --sizing1000: 80px;
116
- --sizing010: 1px;
117
152
  --sizing025: 2px;
118
153
  --sizing050: 4px;
119
154
  --sizing075: 6px;
120
- --sizingLogowidth: 39px;
155
+ --sizingLogowidth: 40px;
156
+ --sizing010: 1px;
121
157
  --spacing100: 8px;
122
158
  --spacing125: 10px;
123
159
  --spacing150: 12px;
@@ -139,10 +175,6 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
139
175
  --borderWidth300: 3px;
140
176
  --borderWidth400: 4px;
141
177
  --borderWidth000: 0px;
142
- --boxShadow100: 0 10px 10px 0 rgba(251,69,0,0.5);
143
- --boxShadow200: 0 20px 40px 0 rgba(149,219,0,0.5);
144
- --boxShadow300: 0 30px 60px 0 rgba(0,179,219,0.5);
145
- --boxShadow400: 0 50px 80px 0 rgba(96,0,219,0.5);
146
178
  --fontSizes100: 14px;
147
179
  --fontSizes200: 16px;
148
180
  --fontSizes300: 18px;
@@ -156,18 +188,10 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
156
188
  --fontSizes010: 10px;
157
189
  --fontSizes025: 12px;
158
190
  --fontSizes050: 13px;
159
- --opacity100: 10%;
160
- --opacity200: 20%;
161
- --opacity300: 30%;
162
- --opacity400: 40%;
163
- --opacity500: 50%;
164
- --opacity550: 55%;
165
- --opacity600: 60%;
166
- --opacity650: 65%;
167
- --opacity700: 70%;
168
- --opacity800: 80%;
169
- --opacity900: 90%;
170
- --opacity1000: 100%;
191
+ --boxShadow100: 0 10px 10px 0 rgba(251,69,0,0.5);
192
+ --boxShadow200: 0 20px 40px 0 rgba(149,219,0,0.5);
193
+ --boxShadow300: 0 30px 60px 0 rgba(0,179,219,0.5);
194
+ --boxShadow400: 0 50px 80px 0 rgba(96,0,219,0.5);
171
195
  --fontWeights400: Regular;
172
196
  --fontWeights500: Medium;
173
197
  --fontWeights700: Bold;
@@ -177,65 +201,65 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
177
201
  --fontFamiliesIos: San Francisco;
178
202
  --fontFamiliesAndroid: Roboto;
179
203
  --fontFamiliesOther: Open Sans;
180
- --borderRadiusCircle: 50%;
181
- --typographyButtonLabelS: [object Object];
182
- --typographyButtonLabelM: [object Object];
183
- --typographyButtonLabelL: [object Object];
184
- --typographyDialogTitleXs: [object Object];
185
- --typographyDialogTitleS: [object Object];
186
- --typographyDialogTitleMs: [object Object];
187
- --typographyDialogTitleM: [object Object];
188
- --typographyDialogTitleMl: [object Object];
189
- --typographyDialogTitleL: [object Object];
190
- --typographyDialogTitleXl: [object Object];
191
- --typographyFlashTextM: [object Object];
192
- --typographyFlashTextL: [object Object];
193
- --typographyFormFieldLabelXs: [object Object];
194
- --typographyFormFieldLabelS: [object Object];
195
- --typographyFormFieldLabelM: [object Object];
196
- --typographyFormFieldLabelL: [object Object];
197
- --typographyFormFieldHintTextXs: [object Object];
198
- --typographyFormFieldHintTextS: [object Object];
199
- --typographyFormFieldHintTextM: [object Object];
200
- --typographyFormFieldHintTextL: [object Object];
201
- --typographyFormFieldErrorMessageXs: [object Object];
202
- --typographyFormFieldErrorMessageS: [object Object];
203
- --typographyFormFieldErrorMessageM: [object Object];
204
- --typographyFormFieldErrorMessageL: [object Object];
205
- --typographyFormFieldCautionMessageXs: [object Object];
206
- --typographyFormFieldCautionMessageS: [object Object];
207
- --typographyFormFieldCautionMessageM: [object Object];
208
- --typographyFormFieldCautionMessageL: [object Object];
209
- --typographyFormFieldInputTextXs: [object Object];
210
- --typographyFormFieldInputTextS: [object Object];
211
- --typographyFormFieldInputTextM: [object Object];
212
- --typographyFormFieldInputTextL: [object Object];
213
- --typographyFormFieldDropdownOptionsXs: [object Object];
214
- --typographyFormFieldDropdownOptionsS: [object Object];
215
- --typographyFormFieldDropdownOptionsM: [object Object];
216
- --typographyFormFieldDropdownOptionsL: [object Object];
217
- --typographyFormFieldSecondLabelXs: [object Object];
218
- --typographyFormFieldSecondLabelS: [object Object];
219
- --typographyFormFieldSecondLabelM: [object Object];
220
- --typographyFormFieldSecondLabelL: [object Object];
221
- --typographyFormFieldCharacterCountXs: [object Object];
222
- --typographyFormFieldCharacterCountS: [object Object];
223
- --typographyFormFieldCharacterCountM: [object Object];
224
- --typographyFormFieldCharacterCountL: [object Object];
225
- --typographyLinkTextM: [object Object];
226
- --typographyLinkTextL: [object Object];
227
- --typographyMessageHeadingM: [object Object];
228
- --typographyMessageHeadingL: [object Object];
229
- --typographyMessageTextM: [object Object];
230
- --typographyMessageTextL: [object Object];
231
- --typographyPillLabelS: [object Object];
232
- --typographyPillLabelM: [object Object];
233
- --typographyPillLabelL: [object Object];
234
- --typographyPillLabelXl: [object Object];
235
- --typographySwitchOptionLabelM: [object Object];
236
- --typographySwitchOptionLabelL: [object Object];
237
- --typographyTableHeaderTextM: [object Object];
238
- --typographyTableCellTextM: [object Object];
239
- --typographyTooltipTextM: [object Object];
240
- --typographyTooltipTextL: [object Object];
204
+ --borderRadiusCircle: 10%;
205
+ --typographyButtonLabelS: Bold 14px/150% Pridi;
206
+ --typographyButtonLabelM: Bold 14px/150% Pridi;
207
+ --typographyButtonLabelL: Bold 16px/150% Pridi;
208
+ --typographyDialogTitleXs: Bold 20px/125% Pridi;
209
+ --typographyDialogTitleS: Bold 20px/125% Pridi;
210
+ --typographyDialogTitleMs: Bold 20px/125% Pridi;
211
+ --typographyDialogTitleM: Bold 20px/125% Pridi;
212
+ --typographyDialogTitleMl: Bold 20px/125% Pridi;
213
+ --typographyDialogTitleL: Bold 20px/125% Pridi;
214
+ --typographyDialogTitleXl: Bold 20px/125% Pridi;
215
+ --typographyFlashTextM: Regular 14px/150% Pridi;
216
+ --typographyFlashTextL: Regular 16px/150% Pridi;
217
+ --typographyFormFieldLabelXs: Medium 14px/150% Pridi;
218
+ --typographyFormFieldLabelS: Medium 14px/150% Pridi;
219
+ --typographyFormFieldLabelM: Medium 14px/150% Pridi;
220
+ --typographyFormFieldLabelL: Medium 16px/150% Pridi;
221
+ --typographyFormFieldHintTextXs: Regular 14px/150% Pridi;
222
+ --typographyFormFieldHintTextS: Regular 14px/150% Pridi;
223
+ --typographyFormFieldHintTextM: Regular 14px/150% Pridi;
224
+ --typographyFormFieldHintTextL: Regular 16px/150% Pridi;
225
+ --typographyFormFieldErrorMessageXs: Medium 14px/150% Pridi;
226
+ --typographyFormFieldErrorMessageS: Medium 14px/150% Pridi;
227
+ --typographyFormFieldErrorMessageM: Medium 14px/150% Pridi;
228
+ --typographyFormFieldErrorMessageL: Medium 16px/150% Pridi;
229
+ --typographyFormFieldCautionMessageXs: Regular 14px/150% Pridi;
230
+ --typographyFormFieldCautionMessageS: Regular 14px/150% Pridi;
231
+ --typographyFormFieldCautionMessageM: Regular 14px/150% Pridi;
232
+ --typographyFormFieldCautionMessageL: Regular 16px/150% Pridi;
233
+ --typographyFormFieldInputTextXs: Regular 14px/150% Pridi;
234
+ --typographyFormFieldInputTextS: Regular 14px/150% Pridi;
235
+ --typographyFormFieldInputTextM: Regular 14px/150% Pridi;
236
+ --typographyFormFieldInputTextL: Regular 16px/150% Pridi;
237
+ --typographyFormFieldDropdownOptionsXs: Regular 14px/150% Pridi;
238
+ --typographyFormFieldDropdownOptionsS: Regular 14px/150% Pridi;
239
+ --typographyFormFieldDropdownOptionsM: Regular 14px/150% Pridi;
240
+ --typographyFormFieldDropdownOptionsL: Regular 16px/150% Pridi;
241
+ --typographyFormFieldSecondLabelXs: Medium 14px/150% Pridi;
242
+ --typographyFormFieldSecondLabelS: Medium 14px/150% Pridi;
243
+ --typographyFormFieldSecondLabelM: Medium 14px/150% Pridi;
244
+ --typographyFormFieldSecondLabelL: Medium 16px/150% Pridi;
245
+ --typographyFormFieldCharacterCountXs: Regular 14px/150% Pridi;
246
+ --typographyFormFieldCharacterCountS: Regular 14px/150% Pridi;
247
+ --typographyFormFieldCharacterCountM: Regular 14px/150% Pridi;
248
+ --typographyFormFieldCharacterCountL: Regular 14px/150% Pridi;
249
+ --typographyLinkTextM: Regular 14px/150% Pridi;
250
+ --typographyLinkTextL: Regular 16px/150% Pridi;
251
+ --typographyMessageHeadingM: Bold 14px/150% Pridi;
252
+ --typographyMessageHeadingL: Bold 16px/150% Pridi;
253
+ --typographyMessageTextM: Regular 14px/150% Pridi;
254
+ --typographyMessageTextL: Regular 16px/150% Pridi;
255
+ --typographyPillLabelS: Medium 10px/150% Pridi;
256
+ --typographyPillLabelM: Medium 12px/150% Pridi;
257
+ --typographyPillLabelL: Medium 14px/150% Pridi;
258
+ --typographyPillLabelXl: Medium 16px/150% Pridi;
259
+ --typographySwitchOptionLabelM: Medium 12px/150% Pridi;
260
+ --typographySwitchOptionLabelL: Medium 14px/150% Pridi;
261
+ --typographyTableHeaderTextM: Medium 14px/150% Pridi;
262
+ --typographyTableCellTextM: Regular 14px/150% Pridi;
263
+ --typographyTooltipTextM: Regular 14px/150% Pridi;
264
+ --typographyTooltipTextL: Regular 16px/150% Pridi;
241
265
  }