@sage/design-tokens 18.7.4 → 18.7.6
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.
package/js/common/global.js
CHANGED
|
@@ -15,80 +15,80 @@ 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 = "
|
|
19
|
-
module.exports.globalFontFluidHeadingM = "
|
|
20
|
-
module.exports.globalFontFluidHeadingL = "
|
|
21
|
-
module.exports.globalFontFluidSubheadingM = "
|
|
22
|
-
module.exports.globalFontFluidSubheadingL = "
|
|
23
|
-
module.exports.globalFontFluidSectionHeadingS = "
|
|
24
|
-
module.exports.globalFontFluidSectionHeadingM = "
|
|
25
|
-
module.exports.globalFontFluidBodyRegularS = "
|
|
26
|
-
module.exports.globalFontFluidBodyRegularM = "
|
|
27
|
-
module.exports.globalFontFluidBodyRegularL = "
|
|
28
|
-
module.exports.globalFontFluidBodyMediumS = "
|
|
29
|
-
module.exports.globalFontFluidBodyMediumM = "
|
|
30
|
-
module.exports.globalFontFluidBodyMediumL = "
|
|
31
|
-
module.exports.globalFontFluidCompMediumXs = "
|
|
32
|
-
module.exports.globalFontFluidCompMediumS = "
|
|
33
|
-
module.exports.globalFontFluidCompMediumM = "
|
|
34
|
-
module.exports.globalFontFluidCompMediumL = "
|
|
35
|
-
module.exports.globalFontFluidCompRegularXs = "
|
|
36
|
-
module.exports.globalFontFluidCompRegularS = "
|
|
37
|
-
module.exports.globalFontFluidCompRegularM = "
|
|
38
|
-
module.exports.globalFontFluidCompRegularL = "
|
|
39
|
-
module.exports.globalFontFluidCompIconS = "
|
|
40
|
-
module.exports.globalFontFluidCompIconM = "
|
|
41
|
-
module.exports.globalFontFluidCompIconL = "
|
|
42
|
-
module.exports.globalFontFluidCompLinedRegularS = "
|
|
43
|
-
module.exports.globalFontFluidCompLinedRegularM = "
|
|
44
|
-
module.exports.globalFontFluidCompLinedRegularL = "
|
|
45
|
-
module.exports.globalFontFluidCompLinedMediumS = "
|
|
46
|
-
module.exports.globalFontFluidCompLinedMediumM = "
|
|
47
|
-
module.exports.globalFontFluidCompLinedMediumL = "
|
|
48
|
-
module.exports.globalFontFluidCompPlaceholderXs = "
|
|
49
|
-
module.exports.globalFontFluidCompPlaceholderS = "
|
|
50
|
-
module.exports.globalFontFluidCompPlaceholderM = "
|
|
51
|
-
module.exports.globalFontFluidCompPlaceholderMl = "
|
|
52
|
-
module.exports.globalFontFluidCompPlaceholderL = "
|
|
53
|
-
module.exports.globalFontFluidCompPlaceholderXl = "
|
|
54
|
-
module.exports.globalFontFluidCompPlaceholderXxl = "
|
|
55
|
-
module.exports.globalFontStaticHeadingS = "
|
|
56
|
-
module.exports.globalFontStaticHeadingM = "
|
|
57
|
-
module.exports.globalFontStaticHeadingL = "
|
|
58
|
-
module.exports.globalFontStaticSubheadingM = "
|
|
59
|
-
module.exports.globalFontStaticSubheadingL = "
|
|
60
|
-
module.exports.globalFontStaticSectionHeadingS = "
|
|
61
|
-
module.exports.globalFontStaticSectionHeadingM = "
|
|
62
|
-
module.exports.globalFontStaticBodyRegularS = "
|
|
63
|
-
module.exports.globalFontStaticBodyRegularM = "
|
|
64
|
-
module.exports.globalFontStaticBodyRegularL = "
|
|
65
|
-
module.exports.globalFontStaticBodyMediumS = "
|
|
66
|
-
module.exports.globalFontStaticBodyMediumM = "
|
|
67
|
-
module.exports.globalFontStaticBodyMediumL = "
|
|
68
|
-
module.exports.globalFontStaticCompMediumXs = "
|
|
69
|
-
module.exports.globalFontStaticCompMediumS = "
|
|
70
|
-
module.exports.globalFontStaticCompMediumM = "
|
|
71
|
-
module.exports.globalFontStaticCompMediumL = "
|
|
72
|
-
module.exports.globalFontStaticCompRegularXs = "
|
|
73
|
-
module.exports.globalFontStaticCompRegularS = "
|
|
74
|
-
module.exports.globalFontStaticCompRegularM = "
|
|
75
|
-
module.exports.globalFontStaticCompRegularL = "
|
|
76
|
-
module.exports.globalFontStaticCompIconS = "
|
|
77
|
-
module.exports.globalFontStaticCompIconM = "
|
|
78
|
-
module.exports.globalFontStaticCompIconL = "
|
|
79
|
-
module.exports.globalFontStaticCompLinedRegularS = "
|
|
80
|
-
module.exports.globalFontStaticCompLinedRegularM = "
|
|
81
|
-
module.exports.globalFontStaticCompLinedRegularL = "
|
|
82
|
-
module.exports.globalFontStaticCompLinedMediumS = "
|
|
83
|
-
module.exports.globalFontStaticCompLinedMediumM = "
|
|
84
|
-
module.exports.globalFontStaticCompLinedMediumL = "
|
|
85
|
-
module.exports.globalFontStaticCompPlaceholderXs = "
|
|
86
|
-
module.exports.globalFontStaticCompPlaceholderS = "
|
|
87
|
-
module.exports.globalFontStaticCompPlaceholderM = "
|
|
88
|
-
module.exports.globalFontStaticCompPlaceholderMl = "
|
|
89
|
-
module.exports.globalFontStaticCompPlaceholderL = "
|
|
90
|
-
module.exports.globalFontStaticCompPlaceholderXl = "
|
|
91
|
-
module.exports.globalFontStaticCompPlaceholderXxl = "
|
|
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"};
|
|
92
92
|
module.exports.globalModifierButtonActive = "0.30";
|
|
93
93
|
module.exports.globalModifierButtonActiveAlt = "0.15";
|
|
94
94
|
module.exports.globalModifierButtonHover = "0.15";
|
|
@@ -115,14 +115,14 @@ module.exports.globalRadiusActionL = "16px";
|
|
|
115
115
|
module.exports.globalRadiusActionXl = "20px";
|
|
116
116
|
module.exports.globalRadiusAction2Xl = "24px";
|
|
117
117
|
module.exports.globalRadiusActionCircle = "999px";
|
|
118
|
-
module.exports.globalDepthNone = "
|
|
119
|
-
module.exports.globalDepthLvl0 = "
|
|
120
|
-
module.exports.globalDepthLvl1 = "
|
|
121
|
-
module.exports.globalDepthLvl2 = "
|
|
122
|
-
module.exports.globalDepthLvl3 = "
|
|
123
|
-
module.exports.globalDepthStickyB = "
|
|
124
|
-
module.exports.globalDepthStickyL = "
|
|
125
|
-
module.exports.globalDepthStickyR = "
|
|
118
|
+
module.exports.globalDepthNone = [{"blur":"0","spread":"0","color":"rgba(0,0,0,0)","type":"dropShadow","offsetX":"0","offsetY":"0"}];
|
|
119
|
+
module.exports.globalDepthLvl0 = [{"blur":"1px","spread":"1px","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"0"},{"blur":"2px","spread":"0","color":"#00000033","type":"dropShadow","offsetX":"1px","offsetY":"2px"}];
|
|
120
|
+
module.exports.globalDepthLvl1 = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"1px"},{"blur":"10px","spread":"0","color":"#00000033","type":"dropShadow","offsetX":"2px","offsetY":"2px"}];
|
|
121
|
+
module.exports.globalDepthLvl2 = [{"blur":"3px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"2px"},{"blur":"30px","spread":"0","color":"#00000026","type":"dropShadow","offsetX":"6px","offsetY":"6px"}];
|
|
122
|
+
module.exports.globalDepthLvl3 = [{"blur":"4px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"3px"},{"blur":"60px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"10px","offsetY":"10px"}];
|
|
123
|
+
module.exports.globalDepthStickyB = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"-1px"},{"blur":"10px","spread":"0","color":"#00000033","type":"dropShadow","offsetX":"2px","offsetY":"-2px"}];
|
|
124
|
+
module.exports.globalDepthStickyL = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"-2px","offsetY":"0"},{"blur":"5px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"-5px","offsetY":"0"}];
|
|
125
|
+
module.exports.globalDepthStickyR = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"2px","offsetY":"0"},{"blur":"5px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"5px","offsetY":"0"}];
|
|
126
126
|
module.exports.globalSizeNone = "0px";
|
|
127
127
|
module.exports.globalSize6Xs = "2px";
|
|
128
128
|
module.exports.globalSize5Xs = "4px";
|
package/package.json
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
},
|
|
7
7
|
"description": "Design tokens for the Sage Design System.",
|
|
8
8
|
"author": "The Sage Group plc",
|
|
9
|
-
"version": "18.7.
|
|
9
|
+
"version": "18.7.6",
|
|
10
10
|
"license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
|
|
11
11
|
"tags": [
|
|
12
12
|
"design tokens",
|
|
@@ -46,6 +46,7 @@ $button-typical-secondary-inverse-border-active: $mode-color-action-main-inverse
|
|
|
46
46
|
$button-typical-secondary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
|
|
47
47
|
$button-typical-secondary-inverse-border-hover: $mode-color-action-main-inverse-hover;
|
|
48
48
|
$button-typical-secondary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
|
|
49
|
+
$button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
49
50
|
$button-typical-secondary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
|
|
50
51
|
$button-typical-tertiary-border-active: $mode-color-action-main-active;
|
|
51
52
|
$button-typical-tertiary-border-disabled: $mode-color-action-inactive-default;
|
|
@@ -56,11 +57,13 @@ $button-typical-tertiary-inverse-border-active: $mode-color-action-main-inverse-
|
|
|
56
57
|
$button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
|
|
57
58
|
$button-typical-tertiary-inverse-border-hover: $mode-color-action-main-inverse-hover;
|
|
58
59
|
$button-typical-tertiary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
|
|
60
|
+
$button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
59
61
|
$button-typical-tertiary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
|
|
60
62
|
$button-typical-subtle-bg-hover: $mode-color-generic-bg-delicate;
|
|
61
63
|
$button-typical-subtle-label-active: $mode-color-action-grayscale-with-active-alt;
|
|
62
64
|
$button-typical-subtle-label-hover: $mode-color-action-grayscale-with-hover;
|
|
63
65
|
$button-typical-subtle-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
|
|
66
|
+
$button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
64
67
|
$button-typical-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
|
|
65
68
|
$button-typical-toggle-bg-active-disabled: $mode-color-action-inactive-default;
|
|
66
69
|
$button-typical-toggle-bg-active: $mode-color-action-grayscale-active;
|
|
@@ -88,7 +91,6 @@ $button-typical-secondary-inverse-bg-active: $mode-color-action-main-inverse-act
|
|
|
88
91
|
$button-typical-secondary-inverse-bg-default: $mode-color-action-main-inverse-default-alt3;
|
|
89
92
|
$button-typical-secondary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
|
|
90
93
|
$button-typical-secondary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
|
|
91
|
-
$button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
92
94
|
$button-typical-tertiary-bg-active: $mode-color-action-main-active-alt;
|
|
93
95
|
$button-typical-tertiary-bg-default: $button-none;
|
|
94
96
|
$button-typical-tertiary-bg-hover: $mode-color-action-main-hover-alt;
|
|
@@ -98,12 +100,10 @@ $button-typical-tertiary-inverse-bg-active: $mode-color-action-main-inverse-acti
|
|
|
98
100
|
$button-typical-tertiary-inverse-bg-default: $button-none;
|
|
99
101
|
$button-typical-tertiary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
|
|
100
102
|
$button-typical-tertiary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
|
|
101
|
-
$button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
102
103
|
$button-typical-subtle-bg-active: $mode-color-action-grayscale-active-alt;
|
|
103
104
|
$button-typical-subtle-label-default: $mode-color-action-grayscale-default;
|
|
104
105
|
$button-typical-subtle-inverse-bg-active: $mode-color-action-grayscale-inverse-active-alt;
|
|
105
106
|
$button-typical-subtle-inverse-bg-hover: $mode-color-action-grayscale-inverse-hover-alt;
|
|
106
|
-
$button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
107
107
|
$button-typical-toggle-label-active-disabled: $mode-color-action-inactive-txt-alt;
|
|
108
108
|
$button-typical-toggle-border-default: $mode-color-action-grayscale-default;
|
|
109
109
|
$button-typical-toggle-label-default: $mode-color-action-grayscale-default-alt;
|
|
@@ -12,6 +12,6 @@ $link-typical-label-hover: $mode-color-action-main-hover-alt2;
|
|
|
12
12
|
$link-typical-inverse-label-default: $mode-color-action-main-inverse-default-alt2;
|
|
13
13
|
$link-typical-inverse-label-hover: $mode-color-action-main-inverse-hover-alt2;
|
|
14
14
|
$link-subtle-label-hover: $mode-color-action-grayscale-active;
|
|
15
|
+
$link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
15
16
|
$link-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-active;
|
|
16
17
|
$link-subtle-label-default: $mode-color-action-grayscale-default;
|
|
17
|
-
$link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
@@ -7,10 +7,7 @@ $message-contextual-icon: #ffffff;
|
|
|
7
7
|
$message-none: $mode-color-none;
|
|
8
8
|
$message-contextual-bg: $mode-color-generic-bg-nought;
|
|
9
9
|
$message-contextual-icon-alt: $mode-color-status-neutral-default;
|
|
10
|
-
$message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
|
|
11
10
|
$message-contextual-ai-bg-alt: $mode-color-status-neutral-default-alt;
|
|
12
|
-
$message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
|
|
13
|
-
$message-contextual-ai-border-alt: $mode-color-status-ai-with-default-alt;
|
|
14
11
|
$message-contextual-callout-bg-alt: $mode-color-status-callout-default-alt;
|
|
15
12
|
$message-contextual-error-bg-default: $mode-color-status-negative-default;
|
|
16
13
|
$message-contextual-error-bg-alt: $mode-color-status-negative-default-alt;
|
|
@@ -41,6 +38,9 @@ $message-global-warning-bg-default: $mode-color-status-warning-default-alt;
|
|
|
41
38
|
$message-global-warning-bg-hover: $mode-color-status-warning-hover-alt;
|
|
42
39
|
$message-global-warning-icon: $mode-color-status-warning-default;
|
|
43
40
|
$message-contextual-txt: $mode-color-status-txt-with-hover-alt;
|
|
41
|
+
$message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
|
|
42
|
+
$message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
|
|
43
|
+
$message-contextual-ai-border-alt: $mode-color-status-ai-with-default-alt;
|
|
44
44
|
$message-contextual-callout-icon: $mode-color-status-txt-with-default-alt;
|
|
45
45
|
$message-global-label-default: $mode-color-status-txt-with-default-alt;
|
|
46
46
|
$message-global-callout-icon: $mode-color-status-txt-with-default-alt;
|
|
@@ -88,7 +88,7 @@ $pill-generic-label-default: $mode-color-status-txt-with-default;
|
|
|
88
88
|
$pill-generic-label-hover: $mode-color-status-txt-with-hover;
|
|
89
89
|
$pill-generic-inverse-label-default: $mode-color-status-txt-inverse-with-default;
|
|
90
90
|
$pill-generic-inverse-label-hover: $mode-color-status-txt-inverse-with-hover;
|
|
91
|
-
$pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
|
|
92
|
-
$pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
|
|
93
91
|
$pill-generic-label-alt-default: $mode-color-status-txt-with-default-alt;
|
|
94
92
|
$pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
|
|
93
|
+
$pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
|
|
94
|
+
$pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
|