@sage/design-tokens 18.10.0 → 18.11.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 (9) hide show
  1. package/css/global.css +98 -91
  2. package/css/light-all.css +98 -91
  3. package/js/common/global.d.ts +9 -0
  4. package/js/common/global.js +98 -91
  5. package/js/es6/global.d.ts +9 -0
  6. package/js/es6/global.js +98 -91
  7. package/json/global.json +540 -91
  8. package/package.json +1 -1
  9. package/scss/global.scss +98 -91
package/js/common/global.js CHANGED
@@ -15,80 +15,86 @@ module.exports.globalBreakpointM = "960px";
15
15
  module.exports.globalBreakpointL = "1260px";
16
16
  module.exports.globalBreakpointXl = "1600px";
17
17
  module.exports.globalBreakpointXxl = "1920px";
18
- module.exports.globalFontFluidHeadingS = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)"};
19
- module.exports.globalFontFluidHeadingM = {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)"};
20
- module.exports.globalFontFluidHeadingL = {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)"};
21
- module.exports.globalFontFluidSubheadingM = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)"};
22
- module.exports.globalFontFluidSubheadingL = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)"};
23
- module.exports.globalFontFluidSectionHeadingS = {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)"};
24
- module.exports.globalFontFluidSectionHeadingM = {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)"};
25
- module.exports.globalFontFluidBodyRegularS = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"16px"};
26
- module.exports.globalFontFluidBodyRegularM = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"24px"};
27
- module.exports.globalFontFluidBodyRegularL = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"24px"};
28
- module.exports.globalFontFluidBodyMediumS = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"16px"};
29
- module.exports.globalFontFluidBodyMediumM = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"24px"};
30
- module.exports.globalFontFluidBodyMediumL = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"24px"};
31
- module.exports.globalFontFluidCompMediumXs = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)","paragraphSpacing":"0"};
32
- module.exports.globalFontFluidCompMediumS = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
33
- module.exports.globalFontFluidCompMediumM = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
34
- module.exports.globalFontFluidCompMediumL = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"0"};
35
- module.exports.globalFontFluidCompRegularXs = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)","paragraphSpacing":"0"};
36
- module.exports.globalFontFluidCompRegularS = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
37
- module.exports.globalFontFluidCompRegularM = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
38
- module.exports.globalFontFluidCompRegularL = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"0"};
39
- module.exports.globalFontFluidCompIconS = {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"};
40
- module.exports.globalFontFluidCompIconM = {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"};
41
- module.exports.globalFontFluidCompIconL = {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"};
42
- module.exports.globalFontFluidCompLinedRegularS = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
43
- module.exports.globalFontFluidCompLinedRegularM = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
44
- module.exports.globalFontFluidCompLinedRegularL = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
45
- module.exports.globalFontFluidCompLinedMediumS = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
46
- module.exports.globalFontFluidCompLinedMediumM = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
47
- module.exports.globalFontFluidCompLinedMediumL = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
48
- module.exports.globalFontFluidCompPlaceholderXs = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)","paragraphSpacing":"0"};
49
- module.exports.globalFontFluidCompPlaceholderS = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
50
- module.exports.globalFontFluidCompPlaceholderM = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"0"};
51
- module.exports.globalFontFluidCompPlaceholderMl = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)","paragraphSpacing":"0"};
52
- module.exports.globalFontFluidCompPlaceholderL = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)","paragraphSpacing":"0"};
53
- module.exports.globalFontFluidCompPlaceholderXl = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)","paragraphSpacing":"0"};
54
- module.exports.globalFontFluidCompPlaceholderXxl = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)","paragraphSpacing":"0"};
55
- module.exports.globalFontStaticHeadingS = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"21px"};
56
- module.exports.globalFontStaticHeadingM = {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"24px"};
57
- module.exports.globalFontStaticHeadingL = {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"30px"};
58
- module.exports.globalFontStaticSubheadingM = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"16px"};
59
- module.exports.globalFontStaticSubheadingL = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"18px"};
60
- module.exports.globalFontStaticSectionHeadingS = {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"16px"};
61
- module.exports.globalFontStaticSectionHeadingM = {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"21px"};
62
- module.exports.globalFontStaticBodyRegularS = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"16px"};
63
- module.exports.globalFontStaticBodyRegularM = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"24px"};
64
- module.exports.globalFontStaticBodyRegularL = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"24px"};
65
- module.exports.globalFontStaticBodyMediumS = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"16px"};
66
- module.exports.globalFontStaticBodyMediumM = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"24px"};
67
- module.exports.globalFontStaticBodyMediumL = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"24px"};
68
- module.exports.globalFontStaticCompMediumXs = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"13px","paragraphSpacing":"0"};
69
- module.exports.globalFontStaticCompMediumS = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
70
- module.exports.globalFontStaticCompMediumM = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
71
- module.exports.globalFontStaticCompMediumL = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"};
72
- module.exports.globalFontStaticCompRegularXs = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"13px","paragraphSpacing":"0"};
73
- module.exports.globalFontStaticCompRegularS = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
74
- module.exports.globalFontStaticCompRegularM = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
75
- module.exports.globalFontStaticCompRegularL = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"};
76
- module.exports.globalFontStaticCompIconS = {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"};
77
- module.exports.globalFontStaticCompIconM = {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"};
78
- module.exports.globalFontStaticCompIconL = {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"};
79
- module.exports.globalFontStaticCompLinedRegularS = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
80
- module.exports.globalFontStaticCompLinedRegularM = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
81
- module.exports.globalFontStaticCompLinedRegularL = {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
82
- module.exports.globalFontStaticCompLinedMediumS = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
83
- module.exports.globalFontStaticCompLinedMediumM = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
84
- module.exports.globalFontStaticCompLinedMediumL = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
85
- module.exports.globalFontStaticCompPlaceholderXs = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"12px","paragraphSpacing":"0"};
86
- module.exports.globalFontStaticCompPlaceholderS = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
87
- module.exports.globalFontStaticCompPlaceholderM = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"18px","paragraphSpacing":"0"};
88
- module.exports.globalFontStaticCompPlaceholderMl = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"24px","paragraphSpacing":"0"};
89
- module.exports.globalFontStaticCompPlaceholderL = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"30px","paragraphSpacing":"0"};
90
- module.exports.globalFontStaticCompPlaceholderXl = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"40px","paragraphSpacing":"0"};
91
- module.exports.globalFontStaticCompPlaceholderXxl = {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"52px","paragraphSpacing":"0"};
18
+ module.exports.globalFontFluidHeadingS = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)"};
19
+ module.exports.globalFontFluidHeadingM = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)"};
20
+ module.exports.globalFontFluidHeadingL = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)"};
21
+ module.exports.globalFontFluidSubheadingM = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)"};
22
+ module.exports.globalFontFluidSubheadingL = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)"};
23
+ module.exports.globalFontFluidSectionHeadingS = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)"};
24
+ module.exports.globalFontFluidSectionHeadingM = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)"};
25
+ module.exports.globalFontFluidBodyRegularS = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"16px"};
26
+ module.exports.globalFontFluidBodyRegularM = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"24px"};
27
+ module.exports.globalFontFluidBodyRegularL = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"24px"};
28
+ module.exports.globalFontFluidBodyMediumS = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"16px"};
29
+ module.exports.globalFontFluidBodyMediumM = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"24px"};
30
+ module.exports.globalFontFluidBodyMediumL = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"24px"};
31
+ module.exports.globalFontFluidCompMediumXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)","paragraphSpacing":"0"};
32
+ module.exports.globalFontFluidCompMediumS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
33
+ module.exports.globalFontFluidCompMediumM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
34
+ module.exports.globalFontFluidCompMediumL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"0"};
35
+ module.exports.globalFontFluidCompRegularXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)","paragraphSpacing":"0"};
36
+ module.exports.globalFontFluidCompRegularS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
37
+ module.exports.globalFontFluidCompRegularM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
38
+ module.exports.globalFontFluidCompRegularL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"0"};
39
+ module.exports.globalFontFluidCompIconS = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
40
+ module.exports.globalFontFluidCompIconM = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
41
+ module.exports.globalFontFluidCompIconL = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
42
+ module.exports.globalFontFluidCompLinedRegularS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
43
+ module.exports.globalFontFluidCompLinedRegularM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
44
+ module.exports.globalFontFluidCompLinedRegularL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
45
+ module.exports.globalFontFluidCompLinedMediumS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
46
+ module.exports.globalFontFluidCompLinedMediumM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
47
+ module.exports.globalFontFluidCompLinedMediumL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
48
+ module.exports.globalFontFluidCompPlaceholderXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)","paragraphSpacing":"0"};
49
+ module.exports.globalFontFluidCompPlaceholderS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
50
+ module.exports.globalFontFluidCompPlaceholderM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"0"};
51
+ module.exports.globalFontFluidCompPlaceholderMl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)","paragraphSpacing":"0"};
52
+ module.exports.globalFontFluidCompPlaceholderL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)","paragraphSpacing":"0"};
53
+ module.exports.globalFontFluidCompPlaceholderXl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)","paragraphSpacing":"0"};
54
+ module.exports.globalFontFluidCompPlaceholderXxl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)","paragraphSpacing":"0"};
55
+ module.exports.globalFontStaticHeadingS = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"500","lineHeight":1.25,"fontSize":"21px"};
56
+ module.exports.globalFontStaticHeadingM = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"700","lineHeight":1.25,"fontSize":"24px"};
57
+ module.exports.globalFontStaticHeadingL = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"700","lineHeight":1.25,"fontSize":"30px"};
58
+ module.exports.globalFontStaticSubheadingM = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"500","lineHeight":1.25,"fontSize":"16px"};
59
+ module.exports.globalFontStaticSubheadingL = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"500","lineHeight":1.25,"fontSize":"18px"};
60
+ module.exports.globalFontStaticSectionHeadingS = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"700","lineHeight":1.25,"fontSize":"16px"};
61
+ module.exports.globalFontStaticSectionHeadingM = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"700","lineHeight":1.25,"fontSize":"21px"};
62
+ module.exports.globalFontStaticBodyRegularS = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"16px"};
63
+ module.exports.globalFontStaticBodyRegularM = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"24px"};
64
+ module.exports.globalFontStaticBodyRegularL = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"24px"};
65
+ module.exports.globalFontStaticBodyMediumS = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"16px"};
66
+ module.exports.globalFontStaticBodyMediumM = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"24px"};
67
+ module.exports.globalFontStaticBodyMediumL = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"24px"};
68
+ module.exports.globalFontStaticCompMediumXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"13px","paragraphSpacing":"0"};
69
+ module.exports.globalFontStaticCompMediumS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
70
+ module.exports.globalFontStaticCompMediumM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
71
+ module.exports.globalFontStaticCompMediumL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"};
72
+ module.exports.globalFontStaticCompRegularXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"13px","paragraphSpacing":"0"};
73
+ module.exports.globalFontStaticCompRegularS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
74
+ module.exports.globalFontStaticCompRegularM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
75
+ module.exports.globalFontStaticCompRegularL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"};
76
+ module.exports.globalFontStaticCompIconS = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
77
+ module.exports.globalFontStaticCompIconM = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
78
+ module.exports.globalFontStaticCompIconL = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
79
+ module.exports.globalFontStaticCompLinedRegularS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
80
+ module.exports.globalFontStaticCompLinedRegularM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
81
+ module.exports.globalFontStaticCompLinedRegularL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
82
+ module.exports.globalFontStaticCompLinedMediumS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
83
+ module.exports.globalFontStaticCompLinedMediumM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
84
+ module.exports.globalFontStaticCompLinedMediumL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
85
+ module.exports.globalFontStaticCompPlaceholderXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"12px","paragraphSpacing":"0"};
86
+ module.exports.globalFontStaticCompPlaceholderS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
87
+ module.exports.globalFontStaticCompPlaceholderM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"18px","paragraphSpacing":"0"};
88
+ module.exports.globalFontStaticCompPlaceholderMl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"24px","paragraphSpacing":"0"};
89
+ module.exports.globalFontStaticCompPlaceholderL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"30px","paragraphSpacing":"0"};
90
+ module.exports.globalFontStaticCompPlaceholderXl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"40px","paragraphSpacing":"0"};
91
+ module.exports.globalFontStaticCompPlaceholderXxl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"52px","paragraphSpacing":"0"};
92
+ module.exports.globalFontFamiliesHeading = "Sage UI";
93
+ module.exports.globalFontFamiliesSubheading = "Sage UI";
94
+ module.exports.globalFontFamiliesBody = "Sage UI";
95
+ module.exports.globalFontFamiliesComponent = "Sage UI";
96
+ module.exports.globalFontFamiliesSageIcons = "sage-icons";
97
+ module.exports.globalFontFamiliesOther = "Open Sans";
92
98
  module.exports.globalModifierButtonActive = "0.30";
93
99
  module.exports.globalModifierButtonActiveAlt = "0.15";
94
100
  module.exports.globalModifierButtonHover = "0.15";
@@ -96,24 +102,25 @@ module.exports.globalModifierButtonHoverAlt = "0.10";
96
102
  module.exports.globalModifierInputDisabledFg = "0.3";
97
103
  module.exports.globalModifierInputDisabledBg = "0.05";
98
104
  module.exports.globalRadiusNone = "0";
99
- module.exports.globalRadiusContainer3Xs = "1px";
100
- module.exports.globalRadiusContainer2Xs = "2px";
101
- module.exports.globalRadiusContainerXs = "4px";
102
- module.exports.globalRadiusContainerS = "6px";
103
- module.exports.globalRadiusContainerM = "8px";
104
- module.exports.globalRadiusContainerL = "16px";
105
- module.exports.globalRadiusContainerXl = "24px";
106
- module.exports.globalRadiusContainer2Xl = "32px";
107
- module.exports.globalRadiusContainer3Xl = "40px";
108
- module.exports.globalRadiusContainer4Xl = "80px";
105
+ module.exports.globalRadiusScale = "1";
106
+ module.exports.globalRadiusContainer3Xs = "calc(1px * var(--global-radius-scale))";
107
+ module.exports.globalRadiusContainer2Xs = "calc(2px * var(--global-radius-scale))";
108
+ module.exports.globalRadiusContainerXs = "calc(4px * var(--global-radius-scale))";
109
+ module.exports.globalRadiusContainerS = "calc(6px * var(--global-radius-scale))";
110
+ module.exports.globalRadiusContainerM = "calc(8px * var(--global-radius-scale))";
111
+ module.exports.globalRadiusContainerL = "calc(16px * var(--global-radius-scale))";
112
+ module.exports.globalRadiusContainerXl = "calc(24px * var(--global-radius-scale))";
113
+ module.exports.globalRadiusContainer2Xl = "calc(32px * var(--global-radius-scale))";
114
+ module.exports.globalRadiusContainer3Xl = "calc(40px * var(--global-radius-scale))";
115
+ module.exports.globalRadiusContainer4Xl = "calc(80px * var(--global-radius-scale))";
109
116
  module.exports.globalRadiusContainerCircle = "999px";
110
- module.exports.globalRadiusAction2Xs = "1px";
111
- module.exports.globalRadiusActionXs = "2px";
112
- module.exports.globalRadiusActionS = "4px";
113
- module.exports.globalRadiusActionM = "8px";
114
- module.exports.globalRadiusActionL = "16px";
115
- module.exports.globalRadiusActionXl = "20px";
116
- module.exports.globalRadiusAction2Xl = "24px";
117
+ module.exports.globalRadiusAction2Xs = "calc(1px * var(--global-radius-scale))";
118
+ module.exports.globalRadiusActionXs = "calc(2px * var(--global-radius-scale))";
119
+ module.exports.globalRadiusActionS = "calc(4px * var(--global-radius-scale))";
120
+ module.exports.globalRadiusActionM = "calc(8px * var(--global-radius-scale))";
121
+ module.exports.globalRadiusActionL = "calc(16px * var(--global-radius-scale))";
122
+ module.exports.globalRadiusActionXl = "calc(20px * var(--global-radius-scale))";
123
+ module.exports.globalRadiusAction2Xl = "calc(24px * var(--global-radius-scale))";
117
124
  module.exports.globalRadiusActionCircle = "999px";
118
125
  module.exports.globalDepthNone = "0 0 0 0 rgba(0,0,0,0)";
119
126
  module.exports.globalDepthLvl0 = "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)";
package/js/es6/global.d.ts CHANGED
@@ -551,6 +551,14 @@ export const globalFontStaticCompPlaceholderXxl: {
551
551
  fontSize: string;
552
552
  paragraphSpacing: string;
553
553
  };
554
+ export const globalFontFamiliesHeading: string;
555
+ export const globalFontFamiliesSubheading: string;
556
+ export const globalFontFamiliesBody: string;
557
+ /** Used in componentry such as tables, buttons, inputs etc. */
558
+ export const globalFontFamiliesComponent: string;
559
+ export const globalFontFamiliesSageIcons: string;
560
+ /** Fallback for when Sage fonts cannot load. */
561
+ export const globalFontFamiliesOther: string;
554
562
  /** Actve modifier used when 15% hover is used */
555
563
  export const globalModifierButtonActive: string;
556
564
  /** Actve modifier used when 15% hover is used */
@@ -565,6 +573,7 @@ export const globalModifierInputDisabledFg: string;
565
573
  export const globalModifierInputDisabledBg: string;
566
574
  /** Button groups (internal/adjacent corners), Card select group (internal/adjacent corners), File input (integrated base bar top corners). */
567
575
  export const globalRadiusNone: string;
576
+ export const globalRadiusScale: string;
568
577
  /** Validation bar on input components */
569
578
  export const globalRadiusContainer3Xs: string;
570
579
  /** Pill */
package/js/es6/global.js CHANGED
@@ -15,80 +15,86 @@ export const globalBreakpointM = "960px";
15
15
  export const globalBreakpointL = "1260px";
16
16
  export const globalBreakpointXl = "1600px";
17
17
  export const globalBreakpointXxl = "1920px";
18
- export const globalFontFluidHeadingS = "500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem) Sage UI";
19
- export const globalFontFluidHeadingM = "700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem) Sage UI";
20
- export const globalFontFluidHeadingL = "700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem) Sage UI";
21
- export const globalFontFluidSubheadingM = "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
22
- export const globalFontFluidSubheadingL = "500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI";
23
- export const globalFontFluidSectionHeadingS = "700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
24
- export const globalFontFluidSectionHeadingM = "700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem) Sage UI";
25
- export const globalFontFluidBodyRegularS = "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
26
- export const globalFontFluidBodyRegularM = "400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
27
- export const globalFontFluidBodyRegularL = "400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI";
28
- export const globalFontFluidBodyMediumS = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
29
- export const globalFontFluidBodyMediumM = "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
30
- export const globalFontFluidBodyMediumL = "500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI";
31
- export const globalFontFluidCompMediumXs = "500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem) Sage UI";
32
- export const globalFontFluidCompMediumS = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
33
- export const globalFontFluidCompMediumM = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
34
- export const globalFontFluidCompMediumL = "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
35
- export const globalFontFluidCompRegularXs = "400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem) Sage UI";
36
- export const globalFontFluidCompRegularS = "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
37
- export const globalFontFluidCompRegularM = "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
38
- export const globalFontFluidCompRegularL = "400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
39
- export const globalFontFluidCompIconS = "20px sage-icons";
40
- export const globalFontFluidCompIconM = "20px sage-icons";
41
- export const globalFontFluidCompIconL = "20px sage-icons";
42
- export const globalFontFluidCompLinedRegularS = "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
43
- export const globalFontFluidCompLinedRegularM = "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
44
- export const globalFontFluidCompLinedRegularL = "400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
45
- export const globalFontFluidCompLinedMediumS = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
46
- export const globalFontFluidCompLinedMediumM = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
47
- export const globalFontFluidCompLinedMediumL = "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI";
48
- export const globalFontFluidCompPlaceholderXs = "500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem) Sage UI";
49
- export const globalFontFluidCompPlaceholderS = "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI";
50
- export const globalFontFluidCompPlaceholderM = "500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI";
51
- export const globalFontFluidCompPlaceholderMl = "500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem) Sage UI";
52
- export const globalFontFluidCompPlaceholderL = "500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem) Sage UI";
53
- export const globalFontFluidCompPlaceholderXl = "500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem) Sage UI";
54
- export const globalFontFluidCompPlaceholderXxl = "500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem) Sage UI";
55
- export const globalFontStaticHeadingS = "500 21px Sage UI";
56
- export const globalFontStaticHeadingM = "700 24px Sage UI";
57
- export const globalFontStaticHeadingL = "700 30px Sage UI";
58
- export const globalFontStaticSubheadingM = "500 16px Sage UI";
59
- export const globalFontStaticSubheadingL = "500 18px Sage UI";
60
- export const globalFontStaticSectionHeadingS = "700 16px Sage UI";
61
- export const globalFontStaticSectionHeadingM = "700 21px Sage UI";
62
- export const globalFontStaticBodyRegularS = "400 14px Sage UI";
63
- export const globalFontStaticBodyRegularM = "400 14px Sage UI";
64
- export const globalFontStaticBodyRegularL = "400 16px Sage UI";
65
- export const globalFontStaticBodyMediumS = "500 14px Sage UI";
66
- export const globalFontStaticBodyMediumM = "500 14px Sage UI";
67
- export const globalFontStaticBodyMediumL = "500 16px Sage UI";
68
- export const globalFontStaticCompMediumXs = "500 13px Sage UI";
69
- export const globalFontStaticCompMediumS = "500 14px Sage UI";
70
- export const globalFontStaticCompMediumM = "500 14px Sage UI";
71
- export const globalFontStaticCompMediumL = "500 16px Sage UI";
72
- export const globalFontStaticCompRegularXs = "400 13px Sage UI";
73
- export const globalFontStaticCompRegularS = "400 14px Sage UI";
74
- export const globalFontStaticCompRegularM = "400 14px Sage UI";
75
- export const globalFontStaticCompRegularL = "400 16px Sage UI";
76
- export const globalFontStaticCompIconS = "20px sage-icons";
77
- export const globalFontStaticCompIconM = "20px sage-icons";
78
- export const globalFontStaticCompIconL = "20px sage-icons";
79
- export const globalFontStaticCompLinedRegularS = "400 14px Sage UI";
80
- export const globalFontStaticCompLinedRegularM = "400 14px Sage UI";
81
- export const globalFontStaticCompLinedRegularL = "400 16px Sage UI";
82
- export const globalFontStaticCompLinedMediumS = "500 14px Sage UI";
83
- export const globalFontStaticCompLinedMediumM = "500 14px Sage UI";
84
- export const globalFontStaticCompLinedMediumL = "500 16px Sage UI";
85
- export const globalFontStaticCompPlaceholderXs = "500 12px Sage UI";
86
- export const globalFontStaticCompPlaceholderS = "500 14px Sage UI";
87
- export const globalFontStaticCompPlaceholderM = "500 18px Sage UI";
88
- export const globalFontStaticCompPlaceholderMl = "500 24px Sage UI";
89
- export const globalFontStaticCompPlaceholderL = "500 30px Sage UI";
90
- export const globalFontStaticCompPlaceholderXl = "500 40px Sage UI";
91
- export const globalFontStaticCompPlaceholderXxl = "500 52px Sage UI";
18
+ export const globalFontFluidHeadingS = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)"};
19
+ export const globalFontFluidHeadingM = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)"};
20
+ export const globalFontFluidHeadingL = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)"};
21
+ export const globalFontFluidSubheadingM = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)"};
22
+ export const globalFontFluidSubheadingL = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)"};
23
+ export const globalFontFluidSectionHeadingS = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)"};
24
+ export const globalFontFluidSectionHeadingM = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)"};
25
+ export const globalFontFluidBodyRegularS = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"16px"};
26
+ export const globalFontFluidBodyRegularM = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"24px"};
27
+ export const globalFontFluidBodyRegularL = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"24px"};
28
+ export const globalFontFluidBodyMediumS = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"16px"};
29
+ export const globalFontFluidBodyMediumM = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"24px"};
30
+ export const globalFontFluidBodyMediumL = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"24px"};
31
+ export const globalFontFluidCompMediumXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)","paragraphSpacing":"0"};
32
+ export const globalFontFluidCompMediumS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
33
+ export const globalFontFluidCompMediumM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
34
+ export const globalFontFluidCompMediumL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"0"};
35
+ export const globalFontFluidCompRegularXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)","paragraphSpacing":"0"};
36
+ export const globalFontFluidCompRegularS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
37
+ export const globalFontFluidCompRegularM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
38
+ export const globalFontFluidCompRegularL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"0"};
39
+ export const globalFontFluidCompIconS = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
40
+ export const globalFontFluidCompIconM = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
41
+ export const globalFontFluidCompIconL = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
42
+ export const globalFontFluidCompLinedRegularS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
43
+ export const globalFontFluidCompLinedRegularM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
44
+ export const globalFontFluidCompLinedRegularL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
45
+ export const globalFontFluidCompLinedMediumS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
46
+ export const globalFontFluidCompLinedMediumM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
47
+ export const globalFontFluidCompLinedMediumL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
48
+ export const globalFontFluidCompPlaceholderXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)","paragraphSpacing":"0"};
49
+ export const globalFontFluidCompPlaceholderS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"};
50
+ export const globalFontFluidCompPlaceholderM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"0"};
51
+ export const globalFontFluidCompPlaceholderMl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)","paragraphSpacing":"0"};
52
+ export const globalFontFluidCompPlaceholderL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)","paragraphSpacing":"0"};
53
+ export const globalFontFluidCompPlaceholderXl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)","paragraphSpacing":"0"};
54
+ export const globalFontFluidCompPlaceholderXxl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)","paragraphSpacing":"0"};
55
+ export const globalFontStaticHeadingS = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"500","lineHeight":1.25,"fontSize":"21px"};
56
+ export const globalFontStaticHeadingM = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"700","lineHeight":1.25,"fontSize":"24px"};
57
+ export const globalFontStaticHeadingL = {"fontFamily":"var(--global-font-families-heading)","fontWeight":"700","lineHeight":1.25,"fontSize":"30px"};
58
+ export const globalFontStaticSubheadingM = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"500","lineHeight":1.25,"fontSize":"16px"};
59
+ export const globalFontStaticSubheadingL = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"500","lineHeight":1.25,"fontSize":"18px"};
60
+ export const globalFontStaticSectionHeadingS = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"700","lineHeight":1.25,"fontSize":"16px"};
61
+ export const globalFontStaticSectionHeadingM = {"fontFamily":"var(--global-font-families-subheading)","fontWeight":"700","lineHeight":1.25,"fontSize":"21px"};
62
+ export const globalFontStaticBodyRegularS = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"16px"};
63
+ export const globalFontStaticBodyRegularM = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"24px"};
64
+ export const globalFontStaticBodyRegularL = {"fontFamily":"var(--global-font-families-body)","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"24px"};
65
+ export const globalFontStaticBodyMediumS = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"16px"};
66
+ export const globalFontStaticBodyMediumM = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"24px"};
67
+ export const globalFontStaticBodyMediumL = {"fontFamily":"var(--global-font-families-body)","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"24px"};
68
+ export const globalFontStaticCompMediumXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"13px","paragraphSpacing":"0"};
69
+ export const globalFontStaticCompMediumS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
70
+ export const globalFontStaticCompMediumM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
71
+ export const globalFontStaticCompMediumL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"};
72
+ export const globalFontStaticCompRegularXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"13px","paragraphSpacing":"0"};
73
+ export const globalFontStaticCompRegularS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
74
+ export const globalFontStaticCompRegularM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
75
+ export const globalFontStaticCompRegularL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"};
76
+ export const globalFontStaticCompIconS = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
77
+ export const globalFontStaticCompIconM = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
78
+ export const globalFontStaticCompIconL = {"fontSize":"20px","fontFamily":"var(--global-font-families-sage-icons)","paragraphSpacing":"0"};
79
+ export const globalFontStaticCompLinedRegularS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
80
+ export const globalFontStaticCompLinedRegularM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
81
+ export const globalFontStaticCompLinedRegularL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
82
+ export const globalFontStaticCompLinedMediumS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
83
+ export const globalFontStaticCompLinedMediumM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
84
+ export const globalFontStaticCompLinedMediumL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"};
85
+ export const globalFontStaticCompPlaceholderXs = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"12px","paragraphSpacing":"0"};
86
+ export const globalFontStaticCompPlaceholderS = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"};
87
+ export const globalFontStaticCompPlaceholderM = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"18px","paragraphSpacing":"0"};
88
+ export const globalFontStaticCompPlaceholderMl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"24px","paragraphSpacing":"0"};
89
+ export const globalFontStaticCompPlaceholderL = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"30px","paragraphSpacing":"0"};
90
+ export const globalFontStaticCompPlaceholderXl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"40px","paragraphSpacing":"0"};
91
+ export const globalFontStaticCompPlaceholderXxl = {"fontFamily":"var(--global-font-families-component)","fontWeight":"500","lineHeight":1.5,"fontSize":"52px","paragraphSpacing":"0"};
92
+ export const globalFontFamiliesHeading = "Sage UI";
93
+ export const globalFontFamiliesSubheading = "Sage UI";
94
+ export const globalFontFamiliesBody = "Sage UI";
95
+ export const globalFontFamiliesComponent = "Sage UI";
96
+ export const globalFontFamiliesSageIcons = "sage-icons";
97
+ export const globalFontFamiliesOther = "Open Sans";
92
98
  export const globalModifierButtonActive = "0.30";
93
99
  export const globalModifierButtonActiveAlt = "0.15";
94
100
  export const globalModifierButtonHover = "0.15";
@@ -96,24 +102,25 @@ export const globalModifierButtonHoverAlt = "0.10";
96
102
  export const globalModifierInputDisabledFg = "0.3";
97
103
  export const globalModifierInputDisabledBg = "0.05";
98
104
  export const globalRadiusNone = "0";
99
- export const globalRadiusContainer3Xs = "1px";
100
- export const globalRadiusContainer2Xs = "2px";
101
- export const globalRadiusContainerXs = "4px";
102
- export const globalRadiusContainerS = "6px";
103
- export const globalRadiusContainerM = "8px";
104
- export const globalRadiusContainerL = "16px";
105
- export const globalRadiusContainerXl = "24px";
106
- export const globalRadiusContainer2Xl = "32px";
107
- export const globalRadiusContainer3Xl = "40px";
108
- export const globalRadiusContainer4Xl = "80px";
105
+ export const globalRadiusScale = "1";
106
+ export const globalRadiusContainer3Xs = "calc(1px * var(--global-radius-scale))";
107
+ export const globalRadiusContainer2Xs = "calc(2px * var(--global-radius-scale))";
108
+ export const globalRadiusContainerXs = "calc(4px * var(--global-radius-scale))";
109
+ export const globalRadiusContainerS = "calc(6px * var(--global-radius-scale))";
110
+ export const globalRadiusContainerM = "calc(8px * var(--global-radius-scale))";
111
+ export const globalRadiusContainerL = "calc(16px * var(--global-radius-scale))";
112
+ export const globalRadiusContainerXl = "calc(24px * var(--global-radius-scale))";
113
+ export const globalRadiusContainer2Xl = "calc(32px * var(--global-radius-scale))";
114
+ export const globalRadiusContainer3Xl = "calc(40px * var(--global-radius-scale))";
115
+ export const globalRadiusContainer4Xl = "calc(80px * var(--global-radius-scale))";
109
116
  export const globalRadiusContainerCircle = "999px";
110
- export const globalRadiusAction2Xs = "1px";
111
- export const globalRadiusActionXs = "2px";
112
- export const globalRadiusActionS = "4px";
113
- export const globalRadiusActionM = "8px";
114
- export const globalRadiusActionL = "16px";
115
- export const globalRadiusActionXl = "20px";
116
- export const globalRadiusAction2Xl = "24px";
117
+ export const globalRadiusAction2Xs = "calc(1px * var(--global-radius-scale))";
118
+ export const globalRadiusActionXs = "calc(2px * var(--global-radius-scale))";
119
+ export const globalRadiusActionS = "calc(4px * var(--global-radius-scale))";
120
+ export const globalRadiusActionM = "calc(8px * var(--global-radius-scale))";
121
+ export const globalRadiusActionL = "calc(16px * var(--global-radius-scale))";
122
+ export const globalRadiusActionXl = "calc(20px * var(--global-radius-scale))";
123
+ export const globalRadiusAction2Xl = "calc(24px * var(--global-radius-scale))";
117
124
  export const globalRadiusActionCircle = "999px";
118
125
  export const globalDepthNone = "0 0 0 0 rgba(0,0,0,0)";
119
126
  export const globalDepthLvl0 = "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)";