@sage/design-tokens 1.93.0 → 2.1.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 (61) hide show
  1. package/README.md +5 -4
  2. package/android/base.xml +19 -10
  3. package/android/no-theme.xml +1 -1
  4. package/assets/fonts/sageui-bold.otf +0 -0
  5. package/assets/fonts/sageui-bold.ttf +0 -0
  6. package/assets/fonts/sageui-bold.woff +0 -0
  7. package/assets/fonts/sageui-bold.woff2 +0 -0
  8. package/assets/fonts/sageui-medium.otf +0 -0
  9. package/assets/fonts/sageui-medium.ttf +0 -0
  10. package/assets/fonts/sageui-medium.woff +0 -0
  11. package/assets/fonts/sageui-medium.woff2 +0 -0
  12. package/assets/fonts/sageui-regular.otf +0 -0
  13. package/assets/fonts/sageui-regular.ttf +0 -0
  14. package/assets/fonts/sageui-regular.woff +0 -0
  15. package/assets/fonts/sageui-regular.woff2 +0 -0
  16. package/assets/fonts/sageui.css +36 -0
  17. package/css/base.css +122 -113
  18. package/css/no-theme.css +64 -64
  19. package/data/tokens.json +192 -85
  20. package/docs/tokens/base/border-radius/index.html +399 -0
  21. package/docs/tokens/base/border-width/index.html +483 -0
  22. package/docs/tokens/base/box-shadow/index.html +525 -0
  23. package/docs/tokens/base/colors/index.html +4137 -0
  24. package/docs/tokens/base/font-families/index.html +462 -0
  25. package/docs/tokens/base/font-sizes/index.html +664 -0
  26. package/docs/tokens/base/font-weights/index.html +441 -0
  27. package/docs/tokens/base/index.html +8427 -0
  28. package/docs/tokens/base/line-heights/index.html +441 -0
  29. package/docs/tokens/base/opacity/index.html +441 -0
  30. package/docs/tokens/base/sizing/index.html +903 -0
  31. package/docs/tokens/base/spacing/index.html +735 -0
  32. package/docs/tokens/base/typography/index.html +2772 -0
  33. package/docs/tokens/figma-only/index.html +394 -0
  34. package/docs/tokens/figma-only/sizing/index.html +399 -0
  35. package/docs/tokens/index.html +14129 -0
  36. package/docs/tokens/no-theme/border-radius/index.html +399 -0
  37. package/docs/tokens/no-theme/border-width/index.html +483 -0
  38. package/docs/tokens/no-theme/box-shadow/index.html +462 -0
  39. package/docs/tokens/no-theme/colors/index.html +2982 -0
  40. package/docs/tokens/no-theme/font-families/index.html +462 -0
  41. package/docs/tokens/no-theme/font-sizes/index.html +664 -0
  42. package/docs/tokens/no-theme/font-weights/index.html +441 -0
  43. package/docs/tokens/no-theme/index.html +5890 -0
  44. package/docs/tokens/no-theme/line-heights/index.html +420 -0
  45. package/docs/tokens/no-theme/sizing/index.html +819 -0
  46. package/docs/tokens/no-theme/spacing/index.html +735 -0
  47. package/docs/tokens/no-theme/typography/index.html +1638 -0
  48. package/ios/base.h +19 -10
  49. package/ios/no-theme.h +1 -1
  50. package/js/base/common.d.ts +17 -8
  51. package/js/base/common.js +122 -113
  52. package/js/base/es6.d.ts +17 -8
  53. package/js/base/es6.js +121 -112
  54. package/js/no-theme/common.js +64 -64
  55. package/js/no-theme/es6.js +63 -63
  56. package/package.json +19 -18
  57. package/sage-design-tokens-2.1.0.tgz +0 -0
  58. package/scss/base.scss +122 -113
  59. package/scss/no-theme.scss +64 -64
  60. package/docs/index.html +0 -13427
  61. package/sage-design-tokens-1.93.0.tgz +0 -0
package/README.md CHANGED
@@ -1,6 +1,5 @@
1
1
  # Sage Design Tokens
2
2
 
3
- [![stability-alpha](https://img.shields.io/badge/stability-alpha-f4d03f.svg)](https://github.com/mkenney/software-guides/blob/master/STABILITY-BADGES.md#alpha)
4
3
  [![GitHub release](https://img.shields.io/github/release/Sage/design-tokens.svg)](https://GitHub.com/Sage/design-tokens/releases/)
5
4
  [![License](https://img.shields.io/badge/License-Apache%202.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
6
5
  [![Maintenance](https://img.shields.io/badge/Maintained%3F-yes-green.svg)](https://GitHub.com/Sage/design-tokens/graphs/commit-activity)
@@ -20,9 +19,11 @@ Design tokens purpose is to:
20
19
  - **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
20
  - **Keep visual consistency across all components of the library.**
22
21
 
23
- ## Beta
24
-
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.
22
+ ## Docs:
23
+ - [Figma tokens github workflow](./docs/figma-github-workflow.md)
24
+ - [Pre-transform phase](./docs/pretransform-phase.md)
25
+ - [Generating icons](./docs/icons.md)
26
+ - [Generating tokens documentation](./docs/tokens-documentation.md)
26
27
 
27
28
  ## Using the design tokens
28
29
 
package/android/base.xml CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!--
4
4
  Do not edit directly
5
- Generated on Mon, 28 Feb 2022 15:40:32 GMT
5
+ Generated on Mon, 14 Mar 2022 10:20:22 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">Base Theme</string>
@@ -15,6 +15,7 @@
15
15
  <string name="colorsYin075">#000000bf</string>
16
16
  <string name="colorsYin090">#000000e6</string>
17
17
  <string name="colorsYang100">#ffffffff</string>
18
+ <string name="colorsYang030">#ffffff4d</string>
18
19
  <string name="colorsYang080">#ffffffcc</string>
19
20
  <string name="colorsGray850">#262626ff</string>
20
21
  <string name="colorsGray900">#1a1a1aff</string>
@@ -100,6 +101,8 @@
100
101
  <string name="colorsUtilityReadOnly500">#e6ebedff</string>
101
102
  <string name="colorsUtilityReadOnly600">#ccd6dbff</string>
102
103
  <string name="colorsActionMajor150">#b3d9c8ff</string>
104
+ <string name="colorsActionMajor350">#4da77eff</string>
105
+ <string name="colorsActionMajor450">#198e59ff</string>
103
106
  <string name="colorsActionMajor500">#007e45ff</string>
104
107
  <string name="colorsActionMajor600">#006738ff</string>
105
108
  <string name="colorsActionMajor700">#004d2aff</string>
@@ -110,6 +113,7 @@
110
113
  <string name="colorsActionMajorYin065">#000000a6</string>
111
114
  <string name="colorsActionMajorYin090">#000000e6</string>
112
115
  <string name="colorsActionMajorYang100">#ffffffff</string>
116
+ <string name="colorsActionMajorYang030">#ffffff4d</string>
113
117
  <string name="colorsActionMinor100">#e6ebedff</string>
114
118
  <string name="colorsActionMinor150">#d9e0e4ff</string>
115
119
  <string name="colorsActionMinor200">#ccd6dbff</string>
@@ -275,16 +279,10 @@
275
279
  <string name="typographyDatePickerCalendarDateM">Bold 14px/150% Sage UI</string>
276
280
  <string name="typographyDatePickerCalendarDayM">Bold 14px/150% Sage UI</string>
277
281
  <string name="typographyDatePickerCalendarMonthM">Bold 16px/125% Sage UI</string>
278
- <string name="typographyDialogTitleXs">Bold 24px/125% Sage UI</string>
279
- <string name="typographyDialogTitleS">Bold 24px/125% Sage UI</string>
280
- <string name="typographyDialogTitleMs">Bold 24px/125% Sage UI</string>
281
282
  <string name="typographyDialogTitleM">Bold 24px/125% Sage UI</string>
282
- <string name="typographyDialogTitleMl">Bold 24px/125% Sage UI</string>
283
- <string name="typographyDialogTitleL">Bold 24px/125% Sage UI</string>
284
- <string name="typographyDialogTitleXl">Bold 24px/125% Sage UI</string>
285
- <string name="typographyDialogParagraphXs">Bold 14px/150% Sage UI</string>
286
- <string name="typographyDialogParagraphS">Bold 14px/150% Sage UI</string>
283
+ <string name="typographyDialogParagraphM">Regular 14px/150% Sage UI</string>
287
284
  <string name="typographyDrawerTitleM">Bold 22px/125% Sage UI</string>
285
+ <string name="typographyDrawerParagraphM">0 none</string>
288
286
  <string name="typographyFlashTextM">Regular 14px/150% Sage UI</string>
289
287
  <string name="typographyFlashTextL">Regular 16px/150% Sage UI</string>
290
288
  <string name="typographyFormFieldLabelXs">Medium 14px/150% Sage UI</string>
@@ -318,7 +316,8 @@
318
316
  <string name="typographyFormFieldCharacterCountXs">Regular 14px/150% Sage UI</string>
319
317
  <string name="typographyFormFieldCharacterCountS">Regular 14px/150% Sage UI</string>
320
318
  <string name="typographyFormFieldCharacterCountM">Regular 14px/150% Sage UI</string>
321
- <string name="typographyFormFieldCharacterCountL">Regular 14px/150% Sage UI</string>
319
+ <string name="typographyFormFieldCharacterCountL">Regular 16px/150% Sage UI</string>
320
+ <string name="typographyLinkTextS">Regular 12px/150% Sage UI</string>
322
321
  <string name="typographyLinkTextM">Regular 14px/150% Sage UI</string>
323
322
  <string name="typographyLinkTextL">Regular 16px/150% Sage UI</string>
324
323
  <string name="typographyMenuLabelM">Medium 14px/150% Sage UI</string>
@@ -328,6 +327,7 @@
328
327
  <string name="typographyMessageTextM">Regular 14px/150% Sage UI</string>
329
328
  <string name="typographyMessageTextL">Regular 16px/150% Sage UI</string>
330
329
  <string name="typographyPaginationLabelM">Regular 13px/150% Sage UI</string>
330
+ <string name="typographyTileParagraphM">Regular 14px/150% Sage UI</string>
331
331
  <string name="typographyPillLabelS">Medium 10px/150% Sage UI</string>
332
332
  <string name="typographyPillLabelM">Medium 12px/150% Sage UI</string>
333
333
  <string name="typographyPillLabelL">Medium 14px/150% Sage UI</string>
@@ -360,13 +360,22 @@
360
360
  <string name="typographySidebarTitleS">Bold 20px/125% Sage UI</string>
361
361
  <string name="typographySidebarTitleM">Bold 20px/125% Sage UI</string>
362
362
  <string name="typographySidebarTitleL">Bold 20px/125% Sage UI</string>
363
+ <string name="typographySidebarParagraphM">0 none</string>
363
364
  <string name="typographyStepFlowCompleteLabelM">Medium 14px/150% Sage UI</string>
364
365
  <string name="typographyStepFlowCurrentLabelM">Medium 14px/150% Sage UI</string>
365
366
  <string name="typographyStepFlowIncompleteLabelM">Medium 14px/150% Sage UI</string>
366
367
  <string name="typographySwitchOptionLabelM">Medium 12px/150% Sage UI</string>
367
368
  <string name="typographySwitchOptionLabelL">Medium 14px/150% Sage UI</string>
369
+ <string name="typographyTableHeaderTextXs">Medium 13px/150% Sage UI</string>
370
+ <string name="typographyTableHeaderTextS">Medium 14px/150% Sage UI</string>
368
371
  <string name="typographyTableHeaderTextM">Medium 14px/150% Sage UI</string>
372
+ <string name="typographyTableHeaderTextL">Medium 16px/150% Sage UI</string>
373
+ <string name="typographyTableHeaderTextXl">Medium 16px/150% Sage UI</string>
374
+ <string name="typographyTableCellTextXs">Regular 13px/150% Sage UI</string>
375
+ <string name="typographyTableCellTextS">Regular 14px/150% Sage UI</string>
369
376
  <string name="typographyTableCellTextM">Regular 14px/150% Sage UI</string>
377
+ <string name="typographyTableCellTextL">Regular 16px/150% Sage UI</string>
378
+ <string name="typographyTableCellTextXl">Regular 16px/150% Sage UI</string>
370
379
  <string name="typographyTooltipTextM">Regular 14px/150% Sage UI</string>
371
380
  <string name="typographyTooltipTextL">Regular 16px/150% Sage UI</string>
372
381
  <string name="opacity300">0.3</string>
package/android/no-theme.xml CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
  <!--
4
4
  Do not edit directly
5
- Generated on Mon, 28 Feb 2022 15:40:32 GMT
5
+ Generated on Mon, 14 Mar 2022 10:20:22 GMT
6
6
  -->
7
7
  <resources>
8
8
  <string name="metaName">No Theme</string>
package/assets/fonts/sageui-bold.otf ADDED
Binary file
package/assets/fonts/sageui-bold.ttf ADDED
Binary file
package/assets/fonts/sageui-bold.woff ADDED
Binary file
package/assets/fonts/sageui-bold.woff2 ADDED
Binary file
package/assets/fonts/sageui-medium.otf ADDED
Binary file
package/assets/fonts/sageui-medium.ttf ADDED
Binary file
package/assets/fonts/sageui-medium.woff ADDED
Binary file
package/assets/fonts/sageui-medium.woff2 ADDED
Binary file
package/assets/fonts/sageui-regular.otf ADDED
Binary file
package/assets/fonts/sageui-regular.ttf ADDED
Binary file
package/assets/fonts/sageui-regular.woff ADDED
Binary file
package/assets/fonts/sageui.css ADDED
@@ -0,0 +1,36 @@
1
+ /*
2
+ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
3
+ */
4
+
5
+ @font-face {
6
+ font-family: "SageUI";
7
+ font-style: normal;
8
+ font-weight: 400;
9
+ src:local("SageUI Regular") local("SageUI-Regular");
10
+ src:url("./sageui-regular.woff2") format("woff2"),
11
+ url("./sageui-regular.woff") format("woff"),
12
+ url("./sageui-regular.ttf") format("truetype"),
13
+ url("./sageui-regular.otf") format("opentype");
14
+ }
15
+
16
+ @font-face {
17
+ font-family: "SageUI";
18
+ font-style: normal;
19
+ font-weight: 500;
20
+ src:local("SageUI Medium") local("SageUI-Medium");
21
+ src:url("./sageui-medium.woff2") format("woff2"),
22
+ url("./sageui-medium.woff") format("woff"),
23
+ url("./sageui-medium.ttf") format("truetype"),
24
+ url("./sageui-medium.otf") format("opentype");
25
+ }
26
+
27
+ @font-face {
28
+ font-family: "SageUI";
29
+ font-style: normal;
30
+ font-weight: 700;
31
+ src:local("SageUI Bold") local("SageUI-Bold");
32
+ src:url("./sageui-bold.woff2") format("woff2"),
33
+ url("./sageui-bold.woff") format("woff"),
34
+ url("./sageui-bold.ttf") format("truetype"),
35
+ url("./sageui-bold.otf") format("opentype");
36
+ }
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 Mon, 28 Feb 2022 15:40:31 GMT
7
+ * Generated on Mon, 14 Mar 2022 10:20:22 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -18,6 +18,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
18
18
  --colorsYin075: #000000bf;
19
19
  --colorsYin090: #000000e6;
20
20
  --colorsYang100: #ffffffff;
21
+ --colorsYang030: #ffffff4d;
21
22
  --colorsYang080: #ffffffcc;
22
23
  --colorsGray850: #262626ff;
23
24
  --colorsGray900: #1a1a1aff;
@@ -103,6 +104,8 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
103
104
  --colorsUtilityReadOnly500: #e6ebedff;
104
105
  --colorsUtilityReadOnly600: #ccd6dbff;
105
106
  --colorsActionMajor150: #b3d9c8ff;
107
+ --colorsActionMajor350: #4da77eff;
108
+ --colorsActionMajor450: #198e59ff;
106
109
  --colorsActionMajor500: #007e45ff;
107
110
  --colorsActionMajor600: #006738ff;
108
111
  --colorsActionMajor700: #004d2aff;
@@ -113,6 +116,7 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
113
116
  --colorsActionMajorYin065: #000000a6;
114
117
  --colorsActionMajorYin090: #000000e6;
115
118
  --colorsActionMajorYang100: #ffffffff;
119
+ --colorsActionMajorYang030: #ffffff4d;
116
120
  --colorsActionMinor100: #e6ebedff;
117
121
  --colorsActionMinor150: #d9e0e4ff;
118
122
  --colorsActionMinor200: #ccd6dbff;
@@ -252,9 +256,9 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
252
256
  --boxShadow400: 0 10px 40px 0 #00141e0a, 0 50px 80px 0 #00141e1a;
253
257
  --boxShadow075: inset 0 6px 4px -4px #00141e0d;
254
258
  --boxShadow050: 0 3px 3px 0 #00141e33, 0 2px 4px 0 #00141e26;
255
- --fontWeights400: Regular;
256
- --fontWeights500: Medium;
257
- --fontWeights700: Bold;
259
+ --fontWeights400: 400;
260
+ --fontWeights500: 500;
261
+ --fontWeights700: 700;
258
262
  --lineHeights300: 100%;
259
263
  --lineHeights400: 125%;
260
264
  --lineHeights500: 150%;
@@ -263,115 +267,120 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
263
267
  --fontFamiliesAndroid: Roboto;
264
268
  --fontFamiliesOther: Open Sans;
265
269
  --borderRadiusCircle: 50%;
266
- --typographyAccordionTitleM: Bold 20px/125% Sage UI;
267
- --typographyAccordionSubtitleM: Regular 14px/150% Sage UI;
268
- --typographyAccordionParagraphM: Regular 14px/150% Sage UI;
269
- --typographyActionPopoverMenuItemM: Bold 14px/150% Sage UI;
270
- --typographyAnchorNavLabelM: Medium 14px/150% Sage UI;
271
- --typographyBadgeLabelM: Medium 12px/150% Sage UI;
272
- --typographyButtonLabelS: Bold 14px/150% Sage UI;
273
- --typographyButtonLabelM: Bold 14px/150% Sage UI;
274
- --typographyButtonLabelL: Bold 16px/150% Sage UI;
275
- --typographyCardSelectTitleM: Bold 16px/150% Sage UI;
276
- --typographyCardSelectSubtitleM: Medium 14px/150% Sage UI;
277
- --typographyCardSelectParagraphM: Regular 14px/150% Sage UI;
278
- --typographyDatePickerCalendarDateM: Bold 14px/150% Sage UI;
279
- --typographyDatePickerCalendarDayM: Bold 14px/150% Sage UI;
280
- --typographyDatePickerCalendarMonthM: Bold 16px/125% Sage UI;
281
- --typographyDialogTitleXs: Bold 24px/125% Sage UI;
282
- --typographyDialogTitleS: Bold 24px/125% Sage UI;
283
- --typographyDialogTitleMs: Bold 24px/125% Sage UI;
284
- --typographyDialogTitleM: Bold 24px/125% Sage UI;
285
- --typographyDialogTitleMl: Bold 24px/125% Sage UI;
286
- --typographyDialogTitleL: Bold 24px/125% Sage UI;
287
- --typographyDialogTitleXl: Bold 24px/125% Sage UI;
288
- --typographyDialogParagraphXs: Bold 14px/150% Sage UI;
289
- --typographyDialogParagraphS: Bold 14px/150% Sage UI;
290
- --typographyDrawerTitleM: Bold 22px/125% Sage UI;
291
- --typographyFlashTextM: Regular 14px/150% Sage UI;
292
- --typographyFlashTextL: Regular 16px/150% Sage UI;
293
- --typographyFormFieldLabelXs: Medium 14px/150% Sage UI;
294
- --typographyFormFieldLabelS: Medium 14px/150% Sage UI;
295
- --typographyFormFieldLabelM: Medium 14px/150% Sage UI;
296
- --typographyFormFieldLabelL: Medium 16px/150% Sage UI;
297
- --typographyFormFieldHintTextXs: Regular 14px/150% Sage UI;
298
- --typographyFormFieldHintTextS: Regular 14px/150% Sage UI;
299
- --typographyFormFieldHintTextM: Regular 14px/150% Sage UI;
300
- --typographyFormFieldHintTextL: Regular 16px/150% Sage UI;
301
- --typographyFormFieldErrorMessageXs: Medium 14px/150% Sage UI;
302
- --typographyFormFieldErrorMessageS: Medium 14px/150% Sage UI;
303
- --typographyFormFieldErrorMessageM: Medium 14px/150% Sage UI;
304
- --typographyFormFieldErrorMessageL: Medium 16px/150% Sage UI;
305
- --typographyFormFieldCautionMessageXs: Regular 14px/150% Sage UI;
306
- --typographyFormFieldCautionMessageS: Regular 14px/150% Sage UI;
307
- --typographyFormFieldCautionMessageM: Regular 14px/150% Sage UI;
308
- --typographyFormFieldCautionMessageL: Regular 16px/150% Sage UI;
309
- --typographyFormFieldInputTextXs: Regular 14px/150% Sage UI;
310
- --typographyFormFieldInputTextS: Regular 14px/150% Sage UI;
311
- --typographyFormFieldInputTextM: Regular 14px/150% Sage UI;
312
- --typographyFormFieldInputTextL: Regular 16px/150% Sage UI;
313
- --typographyFormFieldDropdownOptionsXs: Regular 14px/150% Sage UI;
314
- --typographyFormFieldDropdownOptionsS: Regular 14px/150% Sage UI;
315
- --typographyFormFieldDropdownOptionsM: Regular 14px/150% Sage UI;
316
- --typographyFormFieldDropdownOptionsL: Regular 16px/150% Sage UI;
317
- --typographyFormFieldSecondLabelXs: Medium 14px/150% Sage UI;
318
- --typographyFormFieldSecondLabelS: Medium 14px/150% Sage UI;
319
- --typographyFormFieldSecondLabelM: Medium 14px/150% Sage UI;
320
- --typographyFormFieldSecondLabelL: Medium 16px/150% Sage UI;
321
- --typographyFormFieldCharacterCountXs: Regular 14px/150% Sage UI;
322
- --typographyFormFieldCharacterCountS: Regular 14px/150% Sage UI;
323
- --typographyFormFieldCharacterCountM: Regular 14px/150% Sage UI;
324
- --typographyFormFieldCharacterCountL: Regular 14px/150% Sage UI;
325
- --typographyLinkTextM: Regular 14px/150% Sage UI;
326
- --typographyLinkTextL: Regular 16px/150% Sage UI;
327
- --typographyMenuLabelM: Medium 14px/150% Sage UI;
328
- --typographyMenuSegmentTitleM: Medium 12px/150% Sage UI;
329
- --typographyMessageHeadingM: Bold 14px/150% Sage UI;
330
- --typographyMessageHeadingL: Bold 16px/150% Sage UI;
331
- --typographyMessageTextM: Regular 14px/150% Sage UI;
332
- --typographyMessageTextL: Regular 16px/150% Sage UI;
333
- --typographyPaginationLabelM: Regular 13px/150% Sage UI;
334
- --typographyPillLabelS: Medium 10px/150% Sage UI;
335
- --typographyPillLabelM: Medium 12px/150% Sage UI;
336
- --typographyPillLabelL: Medium 14px/150% Sage UI;
337
- --typographyPillLabelXl: Medium 16px/150% Sage UI;
338
- --typographyProfileEmailXs: Regular 12px/100% Sage UI;
339
- --typographyProfileEmailS: Regular 14px/100% Sage UI;
340
- --typographyProfileEmailM: Regular 14px/125% Sage UI;
341
- --typographyProfileEmailMl: Regular 14px/125% Sage UI;
342
- --typographyProfileEmailL: Regular 14px/125% Sage UI;
343
- --typographyProfileEmailXl: Regular 18px/125% Sage UI;
344
- --typographyProfileEmailXxl: Regular 24px/125% Sage UI;
345
- --typographyProfileInitialsXs: Medium 10px/150% Sage UI;
346
- --typographyProfileInitialsS: Medium 14px/150% Sage UI;
347
- --typographyProfileInitialsM: Medium 18px/150% Sage UI;
348
- --typographyProfileInitialsMl: Medium 24px/150% Sage UI;
349
- --typographyProfileInitialsL: Medium 32px/150% Sage UI;
350
- --typographyProfileInitialsXl: Medium 48px/150% Sage UI;
351
- --typographyProfileInitialsXxl: Medium 56px/150% Sage UI;
352
- --typographyProfileNameXs: Medium 13px/100% Sage UI;
353
- --typographyProfileNameS: Medium 14px/100% Sage UI;
354
- --typographyProfileNameM: Medium 14px/125% Sage UI;
355
- --typographyProfileNameMl: Medium 16px/125% Sage UI;
356
- --typographyProfileNameL: Medium 20px/125% Sage UI;
357
- --typographyProfileNameXl: Medium 24px/125% Sage UI;
358
- --typographyProfileNameXxl: Medium 32px/125% Sage UI;
359
- --typographyProgressTrackerValueLabelS: Medium 14px/150% Sage UI;
360
- --typographyProgressTrackerValueLabelM: Medium 14px/150% Sage UI;
361
- --typographyProgressTrackerValueLabelL: Medium 14px/150% Sage UI;
362
- --typographySearchLabelM: Regular 14px/150% Sage UI;
363
- --typographySidebarTitleS: Bold 20px/125% Sage UI;
364
- --typographySidebarTitleM: Bold 20px/125% Sage UI;
365
- --typographySidebarTitleL: Bold 20px/125% Sage UI;
366
- --typographyStepFlowCompleteLabelM: Medium 14px/150% Sage UI;
367
- --typographyStepFlowCurrentLabelM: Medium 14px/150% Sage UI;
368
- --typographyStepFlowIncompleteLabelM: Medium 14px/150% Sage UI;
369
- --typographySwitchOptionLabelM: Medium 12px/150% Sage UI;
370
- --typographySwitchOptionLabelL: Medium 14px/150% Sage UI;
371
- --typographyTableHeaderTextM: Medium 14px/150% Sage UI;
372
- --typographyTableCellTextM: Regular 14px/150% Sage UI;
373
- --typographyTooltipTextM: Regular 14px/150% Sage UI;
374
- --typographyTooltipTextL: Regular 16px/150% Sage UI;
270
+ --typographyAccordionTitleM: 700 20px/125% Sage UI;
271
+ --typographyAccordionSubtitleM: 400 14px/150% Sage UI;
272
+ --typographyAccordionParagraphM: 400 14px/150% Sage UI;
273
+ --typographyActionPopoverMenuItemM: 700 14px/150% Sage UI;
274
+ --typographyAnchorNavLabelM: 500 14px/150% Sage UI;
275
+ --typographyBadgeLabelM: 500 12px/150% Sage UI;
276
+ --typographyButtonLabelS: 700 14px/150% Sage UI;
277
+ --typographyButtonLabelM: 700 14px/150% Sage UI;
278
+ --typographyButtonLabelL: 700 16px/150% Sage UI;
279
+ --typographyCardSelectTitleM: 700 16px/150% Sage UI;
280
+ --typographyCardSelectSubtitleM: 500 14px/150% Sage UI;
281
+ --typographyCardSelectParagraphM: 400 14px/150% Sage UI;
282
+ --typographyDatePickerCalendarDateM: 700 14px/150% Sage UI;
283
+ --typographyDatePickerCalendarDayM: 700 14px/150% Sage UI;
284
+ --typographyDatePickerCalendarMonthM: 700 16px/125% Sage UI;
285
+ --typographyDialogTitleM: 700 24px/125% Sage UI;
286
+ --typographyDialogParagraphM: 400 14px/150% Sage UI;
287
+ --typographyDrawerTitleM: 700 22px/125% Sage UI;
288
+ --typographyDrawerParagraphM: 0 none;
289
+ --typographyFlashTextM: 400 14px/150% Sage UI;
290
+ --typographyFlashTextL: 400 16px/150% Sage UI;
291
+ --typographyFormFieldLabelXs: 500 14px/150% Sage UI;
292
+ --typographyFormFieldLabelS: 500 14px/150% Sage UI;
293
+ --typographyFormFieldLabelM: 500 14px/150% Sage UI;
294
+ --typographyFormFieldLabelL: 500 16px/150% Sage UI;
295
+ --typographyFormFieldHintTextXs: 400 14px/150% Sage UI;
296
+ --typographyFormFieldHintTextS: 400 14px/150% Sage UI;
297
+ --typographyFormFieldHintTextM: 400 14px/150% Sage UI;
298
+ --typographyFormFieldHintTextL: 400 16px/150% Sage UI;
299
+ --typographyFormFieldErrorMessageXs: 500 14px/150% Sage UI;
300
+ --typographyFormFieldErrorMessageS: 500 14px/150% Sage UI;
301
+ --typographyFormFieldErrorMessageM: 500 14px/150% Sage UI;
302
+ --typographyFormFieldErrorMessageL: 500 16px/150% Sage UI;
303
+ --typographyFormFieldCautionMessageXs: 400 14px/150% Sage UI;
304
+ --typographyFormFieldCautionMessageS: 400 14px/150% Sage UI;
305
+ --typographyFormFieldCautionMessageM: 400 14px/150% Sage UI;
306
+ --typographyFormFieldCautionMessageL: 400 16px/150% Sage UI;
307
+ --typographyFormFieldInputTextXs: 400 14px/150% Sage UI;
308
+ --typographyFormFieldInputTextS: 400 14px/150% Sage UI;
309
+ --typographyFormFieldInputTextM: 400 14px/150% Sage UI;
310
+ --typographyFormFieldInputTextL: 400 16px/150% Sage UI;
311
+ --typographyFormFieldDropdownOptionsXs: 400 14px/150% Sage UI;
312
+ --typographyFormFieldDropdownOptionsS: 400 14px/150% Sage UI;
313
+ --typographyFormFieldDropdownOptionsM: 400 14px/150% Sage UI;
314
+ --typographyFormFieldDropdownOptionsL: 400 16px/150% Sage UI;
315
+ --typographyFormFieldSecondLabelXs: 500 14px/150% Sage UI;
316
+ --typographyFormFieldSecondLabelS: 500 14px/150% Sage UI;
317
+ --typographyFormFieldSecondLabelM: 500 14px/150% Sage UI;
318
+ --typographyFormFieldSecondLabelL: 500 16px/150% Sage UI;
319
+ --typographyFormFieldCharacterCountXs: 400 14px/150% Sage UI;
320
+ --typographyFormFieldCharacterCountS: 400 14px/150% Sage UI;
321
+ --typographyFormFieldCharacterCountM: 400 14px/150% Sage UI;
322
+ --typographyFormFieldCharacterCountL: 400 16px/150% Sage UI;
323
+ --typographyLinkTextS: 400 12px/150% Sage UI;
324
+ --typographyLinkTextM: 400 14px/150% Sage UI;
325
+ --typographyLinkTextL: 400 16px/150% Sage UI;
326
+ --typographyMenuLabelM: 500 14px/150% Sage UI;
327
+ --typographyMenuSegmentTitleM: 500 12px/150% Sage UI;
328
+ --typographyMessageHeadingM: 700 14px/150% Sage UI;
329
+ --typographyMessageHeadingL: 700 16px/150% Sage UI;
330
+ --typographyMessageTextM: 400 14px/150% Sage UI;
331
+ --typographyMessageTextL: 400 16px/150% Sage UI;
332
+ --typographyPaginationLabelM: 400 13px/150% Sage UI;
333
+ --typographyTileParagraphM: 400 14px/150% Sage UI;
334
+ --typographyPillLabelS: 500 10px/150% Sage UI;
335
+ --typographyPillLabelM: 500 12px/150% Sage UI;
336
+ --typographyPillLabelL: 500 14px/150% Sage UI;
337
+ --typographyPillLabelXl: 500 16px/150% Sage UI;
338
+ --typographyProfileEmailXs: 400 12px/100% Sage UI;
339
+ --typographyProfileEmailS: 400 14px/100% Sage UI;
340
+ --typographyProfileEmailM: 400 14px/125% Sage UI;
341
+ --typographyProfileEmailMl: 400 14px/125% Sage UI;
342
+ --typographyProfileEmailL: 400 14px/125% Sage UI;
343
+ --typographyProfileEmailXl: 400 18px/125% Sage UI;
344
+ --typographyProfileEmailXxl: 400 24px/125% Sage UI;
345
+ --typographyProfileInitialsXs: 500 10px/150% Sage UI;
346
+ --typographyProfileInitialsS: 500 14px/150% Sage UI;
347
+ --typographyProfileInitialsM: 500 18px/150% Sage UI;
348
+ --typographyProfileInitialsMl: 500 24px/150% Sage UI;
349
+ --typographyProfileInitialsL: 500 32px/150% Sage UI;
350
+ --typographyProfileInitialsXl: 500 48px/150% Sage UI;
351
+ --typographyProfileInitialsXxl: 500 56px/150% Sage UI;
352
+ --typographyProfileNameXs: 500 13px/100% Sage UI;
353
+ --typographyProfileNameS: 500 14px/100% Sage UI;
354
+ --typographyProfileNameM: 500 14px/125% Sage UI;
355
+ --typographyProfileNameMl: 500 16px/125% Sage UI;
356
+ --typographyProfileNameL: 500 20px/125% Sage UI;
357
+ --typographyProfileNameXl: 500 24px/125% Sage UI;
358
+ --typographyProfileNameXxl: 500 32px/125% Sage UI;
359
+ --typographyProgressTrackerValueLabelS: 500 14px/150% Sage UI;
360
+ --typographyProgressTrackerValueLabelM: 500 14px/150% Sage UI;
361
+ --typographyProgressTrackerValueLabelL: 500 14px/150% Sage UI;
362
+ --typographySearchLabelM: 400 14px/150% Sage UI;
363
+ --typographySidebarTitleS: 700 20px/125% Sage UI;
364
+ --typographySidebarTitleM: 700 20px/125% Sage UI;
365
+ --typographySidebarTitleL: 700 20px/125% Sage UI;
366
+ --typographySidebarParagraphM: 0 none;
367
+ --typographyStepFlowCompleteLabelM: 500 14px/150% Sage UI;
368
+ --typographyStepFlowCurrentLabelM: 500 14px/150% Sage UI;
369
+ --typographyStepFlowIncompleteLabelM: 500 14px/150% Sage UI;
370
+ --typographySwitchOptionLabelM: 500 12px/150% Sage UI;
371
+ --typographySwitchOptionLabelL: 500 14px/150% Sage UI;
372
+ --typographyTableHeaderTextXs: 500 13px/150% Sage UI;
373
+ --typographyTableHeaderTextS: 500 14px/150% Sage UI;
374
+ --typographyTableHeaderTextM: 500 14px/150% Sage UI;
375
+ --typographyTableHeaderTextL: 500 16px/150% Sage UI;
376
+ --typographyTableHeaderTextXl: 500 16px/150% Sage UI;
377
+ --typographyTableCellTextXs: 400 13px/150% Sage UI;
378
+ --typographyTableCellTextS: 400 14px/150% Sage UI;
379
+ --typographyTableCellTextM: 400 14px/150% Sage UI;
380
+ --typographyTableCellTextL: 400 16px/150% Sage UI;
381
+ --typographyTableCellTextXl: 400 16px/150% Sage UI;
382
+ --typographyTooltipTextM: 400 14px/150% Sage UI;
383
+ --typographyTooltipTextL: 400 16px/150% Sage UI;
375
384
  --opacity300: 0.3;
376
385
  --opacity600: 0.6;
377
386
  --opacity800: 0.8;
package/css/no-theme.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 Mon, 28 Feb 2022 15:40:32 GMT
7
+ * Generated on Mon, 14 Mar 2022 10:20:22 GMT
8
8
  */
9
9
 
10
10
  :root {
@@ -194,9 +194,9 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
194
194
  --boxShadow200: 0 20px 40px 0 #95db0080;
195
195
  --boxShadow300: 0 30px 60px 0 #00b3db80;
196
196
  --boxShadow400: 0 50px 80px 0 #6000db80;
197
- --fontWeights400: Regular;
198
- --fontWeights500: Medium;
199
- --fontWeights700: Bold;
197
+ --fontWeights400: 400;
198
+ --fontWeights500: 500;
199
+ --fontWeights700: 700;
200
200
  --lineHeights400: 125%;
201
201
  --lineHeights500: 150%;
202
202
  --fontFamiliesDefault: Pridi;
@@ -204,64 +204,64 @@ Copyright © 2021 The Sage Group plc or its licensors. All Rights reserved
204
204
  --fontFamiliesAndroid: Roboto;
205
205
  --fontFamiliesOther: Open Sans;
206
206
  --borderRadiusCircle: 10%;
207
- --typographyButtonLabelS: Bold 14px/150% Pridi;
208
- --typographyButtonLabelM: Bold 14px/150% Pridi;
209
- --typographyButtonLabelL: Bold 16px/150% Pridi;
210
- --typographyDialogTitleXs: Bold 20px/125% Pridi;
211
- --typographyDialogTitleS: Bold 20px/125% Pridi;
212
- --typographyDialogTitleMs: Bold 20px/125% Pridi;
213
- --typographyDialogTitleM: Bold 20px/125% Pridi;
214
- --typographyDialogTitleMl: Bold 20px/125% Pridi;
215
- --typographyDialogTitleL: Bold 20px/125% Pridi;
216
- --typographyDialogTitleXl: Bold 20px/125% Pridi;
217
- --typographyFlashTextM: Regular 14px/150% Pridi;
218
- --typographyFlashTextL: Regular 16px/150% Pridi;
219
- --typographyFormFieldLabelXs: Medium 14px/150% Pridi;
220
- --typographyFormFieldLabelS: Medium 14px/150% Pridi;
221
- --typographyFormFieldLabelM: Medium 14px/150% Pridi;
222
- --typographyFormFieldLabelL: Medium 16px/150% Pridi;
223
- --typographyFormFieldHintTextXs: Regular 14px/150% Pridi;
224
- --typographyFormFieldHintTextS: Regular 14px/150% Pridi;
225
- --typographyFormFieldHintTextM: Regular 14px/150% Pridi;
226
- --typographyFormFieldHintTextL: Regular 16px/150% Pridi;
227
- --typographyFormFieldErrorMessageXs: Medium 14px/150% Pridi;
228
- --typographyFormFieldErrorMessageS: Medium 14px/150% Pridi;
229
- --typographyFormFieldErrorMessageM: Medium 14px/150% Pridi;
230
- --typographyFormFieldErrorMessageL: Medium 16px/150% Pridi;
231
- --typographyFormFieldCautionMessageXs: Regular 14px/150% Pridi;
232
- --typographyFormFieldCautionMessageS: Regular 14px/150% Pridi;
233
- --typographyFormFieldCautionMessageM: Regular 14px/150% Pridi;
234
- --typographyFormFieldCautionMessageL: Regular 16px/150% Pridi;
235
- --typographyFormFieldInputTextXs: Regular 14px/150% Pridi;
236
- --typographyFormFieldInputTextS: Regular 14px/150% Pridi;
237
- --typographyFormFieldInputTextM: Regular 14px/150% Pridi;
238
- --typographyFormFieldInputTextL: Regular 16px/150% Pridi;
239
- --typographyFormFieldDropdownOptionsXs: Regular 14px/150% Pridi;
240
- --typographyFormFieldDropdownOptionsS: Regular 14px/150% Pridi;
241
- --typographyFormFieldDropdownOptionsM: Regular 14px/150% Pridi;
242
- --typographyFormFieldDropdownOptionsL: Regular 16px/150% Pridi;
243
- --typographyFormFieldSecondLabelXs: Medium 14px/150% Pridi;
244
- --typographyFormFieldSecondLabelS: Medium 14px/150% Pridi;
245
- --typographyFormFieldSecondLabelM: Medium 14px/150% Pridi;
246
- --typographyFormFieldSecondLabelL: Medium 16px/150% Pridi;
247
- --typographyFormFieldCharacterCountXs: Regular 14px/150% Pridi;
248
- --typographyFormFieldCharacterCountS: Regular 14px/150% Pridi;
249
- --typographyFormFieldCharacterCountM: Regular 14px/150% Pridi;
250
- --typographyFormFieldCharacterCountL: Regular 14px/150% Pridi;
251
- --typographyLinkTextM: Regular 14px/150% Pridi;
252
- --typographyLinkTextL: Regular 16px/150% Pridi;
253
- --typographyMessageHeadingM: Bold 14px/150% Pridi;
254
- --typographyMessageHeadingL: Bold 16px/150% Pridi;
255
- --typographyMessageTextM: Regular 14px/150% Pridi;
256
- --typographyMessageTextL: Regular 16px/150% Pridi;
257
- --typographyPillLabelS: Medium 10px/150% Pridi;
258
- --typographyPillLabelM: Medium 12px/150% Pridi;
259
- --typographyPillLabelL: Medium 14px/150% Pridi;
260
- --typographyPillLabelXl: Medium 16px/150% Pridi;
261
- --typographySwitchOptionLabelM: Medium 12px/150% Pridi;
262
- --typographySwitchOptionLabelL: Medium 14px/150% Pridi;
263
- --typographyTableHeaderTextM: Medium 14px/150% Pridi;
264
- --typographyTableCellTextM: Regular 14px/150% Pridi;
265
- --typographyTooltipTextM: Regular 14px/150% Pridi;
266
- --typographyTooltipTextL: Regular 16px/150% Pridi;
207
+ --typographyButtonLabelS: 700 14px/150% Pridi;
208
+ --typographyButtonLabelM: 700 14px/150% Pridi;
209
+ --typographyButtonLabelL: 700 16px/150% Pridi;
210
+ --typographyDialogTitleXs: 700 20px/125% Pridi;
211
+ --typographyDialogTitleS: 700 20px/125% Pridi;
212
+ --typographyDialogTitleMs: 700 20px/125% Pridi;
213
+ --typographyDialogTitleM: 700 20px/125% Pridi;
214
+ --typographyDialogTitleMl: 700 20px/125% Pridi;
215
+ --typographyDialogTitleL: 700 20px/125% Pridi;
216
+ --typographyDialogTitleXl: 700 20px/125% Pridi;
217
+ --typographyFlashTextM: 400 14px/150% Pridi;
218
+ --typographyFlashTextL: 400 16px/150% Pridi;
219
+ --typographyFormFieldLabelXs: 500 14px/150% Pridi;
220
+ --typographyFormFieldLabelS: 500 14px/150% Pridi;
221
+ --typographyFormFieldLabelM: 500 14px/150% Pridi;
222
+ --typographyFormFieldLabelL: 500 16px/150% Pridi;
223
+ --typographyFormFieldHintTextXs: 400 14px/150% Pridi;
224
+ --typographyFormFieldHintTextS: 400 14px/150% Pridi;
225
+ --typographyFormFieldHintTextM: 400 14px/150% Pridi;
226
+ --typographyFormFieldHintTextL: 400 16px/150% Pridi;
227
+ --typographyFormFieldErrorMessageXs: 500 14px/150% Pridi;
228
+ --typographyFormFieldErrorMessageS: 500 14px/150% Pridi;
229
+ --typographyFormFieldErrorMessageM: 500 14px/150% Pridi;
230
+ --typographyFormFieldErrorMessageL: 500 16px/150% Pridi;
231
+ --typographyFormFieldCautionMessageXs: 400 14px/150% Pridi;
232
+ --typographyFormFieldCautionMessageS: 400 14px/150% Pridi;
233
+ --typographyFormFieldCautionMessageM: 400 14px/150% Pridi;
234
+ --typographyFormFieldCautionMessageL: 400 16px/150% Pridi;
235
+ --typographyFormFieldInputTextXs: 400 14px/150% Pridi;
236
+ --typographyFormFieldInputTextS: 400 14px/150% Pridi;
237
+ --typographyFormFieldInputTextM: 400 14px/150% Pridi;
238
+ --typographyFormFieldInputTextL: 400 16px/150% Pridi;
239
+ --typographyFormFieldDropdownOptionsXs: 400 14px/150% Pridi;
240
+ --typographyFormFieldDropdownOptionsS: 400 14px/150% Pridi;
241
+ --typographyFormFieldDropdownOptionsM: 400 14px/150% Pridi;
242
+ --typographyFormFieldDropdownOptionsL: 400 16px/150% Pridi;
243
+ --typographyFormFieldSecondLabelXs: 500 14px/150% Pridi;
244
+ --typographyFormFieldSecondLabelS: 500 14px/150% Pridi;
245
+ --typographyFormFieldSecondLabelM: 500 14px/150% Pridi;
246
+ --typographyFormFieldSecondLabelL: 500 16px/150% Pridi;
247
+ --typographyFormFieldCharacterCountXs: 400 14px/150% Pridi;
248
+ --typographyFormFieldCharacterCountS: 400 14px/150% Pridi;
249
+ --typographyFormFieldCharacterCountM: 400 14px/150% Pridi;
250
+ --typographyFormFieldCharacterCountL: 400 14px/150% Pridi;
251
+ --typographyLinkTextM: 400 14px/150% Pridi;
252
+ --typographyLinkTextL: 400 16px/150% Pridi;
253
+ --typographyMessageHeadingM: 700 14px/150% Pridi;
254
+ --typographyMessageHeadingL: 700 16px/150% Pridi;
255
+ --typographyMessageTextM: 400 14px/150% Pridi;
256
+ --typographyMessageTextL: 400 16px/150% Pridi;
257
+ --typographyPillLabelS: 500 10px/150% Pridi;
258
+ --typographyPillLabelM: 500 12px/150% Pridi;
259
+ --typographyPillLabelL: 500 14px/150% Pridi;
260
+ --typographyPillLabelXl: 500 16px/150% Pridi;
261
+ --typographySwitchOptionLabelM: 500 12px/150% Pridi;
262
+ --typographySwitchOptionLabelL: 500 14px/150% Pridi;
263
+ --typographyTableHeaderTextM: 500 14px/150% Pridi;
264
+ --typographyTableCellTextM: 400 14px/150% Pridi;
265
+ --typographyTooltipTextM: 400 14px/150% Pridi;
266
+ --typographyTooltipTextL: 400 16px/150% Pridi;
267
267
  }