@sage/design-tokens 18.7.6 → 18.8.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 (25) hide show
  1. package/css/dark.css +3 -0
  2. package/css/global.css +23 -23
  3. package/css/light-all.css +26 -23
  4. package/css/light.css +3 -0
  5. package/js/common/dark.d.ts +5 -0
  6. package/js/common/dark.js +3 -0
  7. package/js/common/global.js +8 -8
  8. package/js/common/light.d.ts +5 -0
  9. package/js/common/light.js +3 -0
  10. package/js/es6/dark.d.ts +3 -0
  11. package/js/es6/dark.js +3 -0
  12. package/js/es6/global.js +112 -686
  13. package/js/es6/light.d.ts +3 -0
  14. package/js/es6/light.js +3 -0
  15. package/json/dark.json +3 -0
  16. package/json/global.json +83 -83
  17. package/json/light.json +3 -0
  18. package/package.json +1 -1
  19. package/scss/components/button.scss +3 -3
  20. package/scss/components/link.scss +1 -1
  21. package/scss/components/message.scss +3 -3
  22. package/scss/components/pill.scss +2 -2
  23. package/scss/dark.scss +3 -0
  24. package/scss/global.scss +23 -23
  25. package/scss/light.scss +3 -0
package/js/es6/light.d.ts CHANGED
@@ -78,6 +78,9 @@ export const modeColorGenericBgInverseNought: string;
78
78
  export const modeColorGenericBgInverseFaint: string;
79
79
  export const modeColorGenericBgInverseDelicate: string;
80
80
  export const modeColorGenericBgInverseSoft: string;
81
+ export const modeColorGenericDepthFaint: string;
82
+ export const modeColorGenericDepthDelicate: string;
83
+ export const modeColorGenericDepthSoft: string;
81
84
  export const modeColorGenericTxtExtreme: string;
82
85
  export const modeColorGenericTxtSevere: string;
83
86
  export const modeColorGenericTxtModerate: string;
package/js/es6/light.js CHANGED
@@ -77,6 +77,9 @@ export const modeColorGenericBgInverseNought = "#000000";
77
77
  export const modeColorGenericBgInverseFaint = "#ffffff0d";
78
78
  export const modeColorGenericBgInverseDelicate = "#ffffff1a";
79
79
  export const modeColorGenericBgInverseSoft = "#ffffff26";
80
+ export const modeColorGenericDepthFaint = "#0000001a";
81
+ export const modeColorGenericDepthDelicate = "#00000026";
82
+ export const modeColorGenericDepthSoft = "#0003";
80
83
  export const modeColorGenericTxtExtreme = "#000000";
81
84
  export const modeColorGenericTxtSevere = "#000000f2";
82
85
  export const modeColorGenericTxtModerate = "#000000a6";
package/json/dark.json CHANGED
@@ -70,6 +70,9 @@
70
70
  "modeColorGenericBgInverseFaint": "#f4f5f6",
71
71
  "modeColorGenericBgInverseDelicate": "#e8eaec",
72
72
  "modeColorGenericBgInverseSoft": "#dde0e3",
73
+ "modeColorGenericDepthFaint": "#ffffff1a",
74
+ "modeColorGenericDepthDelicate": "#ffffff26",
75
+ "modeColorGenericDepthSoft": "#fff3",
73
76
  "modeColorGenericTxtExtreme": "#FFFFFF",
74
77
  "modeColorGenericTxtSevere": "#fffffff2",
75
78
  "modeColorGenericTxtModerate": "#ffffffab",
package/json/global.json CHANGED
@@ -12,80 +12,80 @@
12
12
  "globalBreakpointL": "1260px",
13
13
  "globalBreakpointXl": "1600px",
14
14
  "globalBreakpointXxl": "1920px",
15
- "globalFontFluidHeadingS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)"},
16
- "globalFontFluidHeadingM": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)"},
17
- "globalFontFluidHeadingL": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)"},
18
- "globalFontFluidSubheadingM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)"},
19
- "globalFontFluidSubheadingL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)"},
20
- "globalFontFluidSectionHeadingS": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)"},
21
- "globalFontFluidSectionHeadingM": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)"},
22
- "globalFontFluidBodyRegularS": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"16px"},
23
- "globalFontFluidBodyRegularM": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"24px"},
24
- "globalFontFluidBodyRegularL": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"24px"},
25
- "globalFontFluidBodyMediumS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"16px"},
26
- "globalFontFluidBodyMediumM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"24px"},
27
- "globalFontFluidBodyMediumL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"24px"},
28
- "globalFontFluidCompMediumXs": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)","paragraphSpacing":"0"},
29
- "globalFontFluidCompMediumS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"},
30
- "globalFontFluidCompMediumM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"},
31
- "globalFontFluidCompMediumL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"0"},
32
- "globalFontFluidCompRegularXs": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem)","paragraphSpacing":"0"},
33
- "globalFontFluidCompRegularS": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"},
34
- "globalFontFluidCompRegularM": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"},
35
- "globalFontFluidCompRegularL": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem)","paragraphSpacing":"0"},
36
- "globalFontFluidCompIconS": {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"},
37
- "globalFontFluidCompIconM": {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"},
38
- "globalFontFluidCompIconL": {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"},
39
- "globalFontFluidCompLinedRegularS": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"},
40
- "globalFontFluidCompLinedRegularM": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"},
41
- "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"},
42
- "globalFontFluidCompLinedMediumS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"},
43
- "globalFontFluidCompLinedMediumM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"},
44
- "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"},
45
- "globalFontFluidCompPlaceholderXs": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem)","paragraphSpacing":"0"},
46
- "globalFontFluidCompPlaceholderS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(0.875rem, 0.875rem + 0vw, 0.875rem)","paragraphSpacing":"0"},
47
- "globalFontFluidCompPlaceholderM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem)","paragraphSpacing":"0"},
48
- "globalFontFluidCompPlaceholderMl": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)","paragraphSpacing":"0"},
49
- "globalFontFluidCompPlaceholderL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)","paragraphSpacing":"0"},
50
- "globalFontFluidCompPlaceholderXl": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem)","paragraphSpacing":"0"},
51
- "globalFontFluidCompPlaceholderXxl": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem)","paragraphSpacing":"0"},
52
- "globalFontStaticHeadingS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"21px"},
53
- "globalFontStaticHeadingM": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"24px"},
54
- "globalFontStaticHeadingL": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"30px"},
55
- "globalFontStaticSubheadingM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"16px"},
56
- "globalFontStaticSubheadingL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.25,"fontSize":"18px"},
57
- "globalFontStaticSectionHeadingS": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"16px"},
58
- "globalFontStaticSectionHeadingM": {"fontFamily":"Sage UI","fontWeight":"700","lineHeight":1.25,"fontSize":"21px"},
59
- "globalFontStaticBodyRegularS": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"16px"},
60
- "globalFontStaticBodyRegularM": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"24px"},
61
- "globalFontStaticBodyRegularL": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"24px"},
62
- "globalFontStaticBodyMediumS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"16px"},
63
- "globalFontStaticBodyMediumM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"24px"},
64
- "globalFontStaticBodyMediumL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"24px"},
65
- "globalFontStaticCompMediumXs": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"13px","paragraphSpacing":"0"},
66
- "globalFontStaticCompMediumS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"},
67
- "globalFontStaticCompMediumM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"},
68
- "globalFontStaticCompMediumL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"},
69
- "globalFontStaticCompRegularXs": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"13px","paragraphSpacing":"0"},
70
- "globalFontStaticCompRegularS": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"},
71
- "globalFontStaticCompRegularM": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"},
72
- "globalFontStaticCompRegularL": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","paragraphSpacing":"0"},
73
- "globalFontStaticCompIconS": {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"},
74
- "globalFontStaticCompIconM": {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"},
75
- "globalFontStaticCompIconL": {"fontSize":"20px","fontFamily":"sage-icons","paragraphSpacing":"0"},
76
- "globalFontStaticCompLinedRegularS": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"},
77
- "globalFontStaticCompLinedRegularM": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"},
78
- "globalFontStaticCompLinedRegularL": {"fontFamily":"Sage UI","fontWeight":"400","lineHeight":1.5,"fontSize":"16px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"},
79
- "globalFontStaticCompLinedMediumS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"},
80
- "globalFontStaticCompLinedMediumM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"},
81
- "globalFontStaticCompLinedMediumL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"16px","txtDecoration":"underline","paragraphSpacing":"0","textDecoration":"underline"},
82
- "globalFontStaticCompPlaceholderXs": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"12px","paragraphSpacing":"0"},
83
- "globalFontStaticCompPlaceholderS": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"14px","paragraphSpacing":"0"},
84
- "globalFontStaticCompPlaceholderM": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"18px","paragraphSpacing":"0"},
85
- "globalFontStaticCompPlaceholderMl": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"24px","paragraphSpacing":"0"},
86
- "globalFontStaticCompPlaceholderL": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"30px","paragraphSpacing":"0"},
87
- "globalFontStaticCompPlaceholderXl": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"40px","paragraphSpacing":"0"},
88
- "globalFontStaticCompPlaceholderXxl": {"fontFamily":"Sage UI","fontWeight":"500","lineHeight":1.5,"fontSize":"52px","paragraphSpacing":"0"},
15
+ "globalFontFluidHeadingS": "500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem) Sage UI",
16
+ "globalFontFluidHeadingM": "700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem) Sage UI",
17
+ "globalFontFluidHeadingL": "700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem) Sage UI",
18
+ "globalFontFluidSubheadingM": "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI",
19
+ "globalFontFluidSubheadingL": "500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI",
20
+ "globalFontFluidSectionHeadingS": "700 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI",
21
+ "globalFontFluidSectionHeadingM": "700 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem) Sage UI",
22
+ "globalFontFluidBodyRegularS": "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
23
+ "globalFontFluidBodyRegularM": "400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI",
24
+ "globalFontFluidBodyRegularL": "400 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI",
25
+ "globalFontFluidBodyMediumS": "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
26
+ "globalFontFluidBodyMediumM": "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI",
27
+ "globalFontFluidBodyMediumL": "500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI",
28
+ "globalFontFluidCompMediumXs": "500 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem) Sage UI",
29
+ "globalFontFluidCompMediumS": "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
30
+ "globalFontFluidCompMediumM": "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
31
+ "globalFontFluidCompMediumL": "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI",
32
+ "globalFontFluidCompRegularXs": "400 clamp(0.7675rem, 0.8048rem + -0.0465vw, 0.7955rem) Sage UI",
33
+ "globalFontFluidCompRegularS": "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
34
+ "globalFontFluidCompRegularM": "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
35
+ "globalFontFluidCompRegularL": "400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI",
36
+ "globalFontFluidCompIconS": "20px sage-icons",
37
+ "globalFontFluidCompIconM": "20px sage-icons",
38
+ "globalFontFluidCompIconL": "20px sage-icons",
39
+ "globalFontFluidCompLinedRegularS": "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
40
+ "globalFontFluidCompLinedRegularM": "400 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
41
+ "globalFontFluidCompLinedRegularL": "400 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI",
42
+ "globalFontFluidCompLinedMediumS": "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
43
+ "globalFontFluidCompLinedMediumM": "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
44
+ "globalFontFluidCompLinedMediumL": "500 clamp(0.9625rem, 0.9508rem + 0.0583vw, 0.9975rem) Sage UI",
45
+ "globalFontFluidCompPlaceholderXs": "500 clamp(0.6733rem, 0.7398rem + -0.0831vw, 0.7231rem) Sage UI",
46
+ "globalFontFluidCompPlaceholderS": "500 clamp(0.875rem, 0.875rem + 0vw, 0.875rem) Sage UI",
47
+ "globalFontFluidCompPlaceholderM": "500 clamp(1.0588rem, 1.0326rem + 0.1307vw, 1.1372rem) Sage UI",
48
+ "globalFontFluidCompPlaceholderMl": "500 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem) Sage UI",
49
+ "globalFontFluidCompPlaceholderL": "500 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem) Sage UI",
50
+ "globalFontFluidCompPlaceholderXl": "500 clamp(1.8756rem, 1.6688rem + 1.034vw, 2.496rem) Sage UI",
51
+ "globalFontFluidCompPlaceholderXxl": "500 clamp(2.2695rem, 1.9448rem + 1.6238vw, 3.2438rem) Sage UI",
52
+ "globalFontStaticHeadingS": "500 21px Sage UI",
53
+ "globalFontStaticHeadingM": "700 24px Sage UI",
54
+ "globalFontStaticHeadingL": "700 30px Sage UI",
55
+ "globalFontStaticSubheadingM": "500 16px Sage UI",
56
+ "globalFontStaticSubheadingL": "500 18px Sage UI",
57
+ "globalFontStaticSectionHeadingS": "700 16px Sage UI",
58
+ "globalFontStaticSectionHeadingM": "700 21px Sage UI",
59
+ "globalFontStaticBodyRegularS": "400 14px Sage UI",
60
+ "globalFontStaticBodyRegularM": "400 14px Sage UI",
61
+ "globalFontStaticBodyRegularL": "400 16px Sage UI",
62
+ "globalFontStaticBodyMediumS": "500 14px Sage UI",
63
+ "globalFontStaticBodyMediumM": "500 14px Sage UI",
64
+ "globalFontStaticBodyMediumL": "500 16px Sage UI",
65
+ "globalFontStaticCompMediumXs": "500 13px Sage UI",
66
+ "globalFontStaticCompMediumS": "500 14px Sage UI",
67
+ "globalFontStaticCompMediumM": "500 14px Sage UI",
68
+ "globalFontStaticCompMediumL": "500 16px Sage UI",
69
+ "globalFontStaticCompRegularXs": "400 13px Sage UI",
70
+ "globalFontStaticCompRegularS": "400 14px Sage UI",
71
+ "globalFontStaticCompRegularM": "400 14px Sage UI",
72
+ "globalFontStaticCompRegularL": "400 16px Sage UI",
73
+ "globalFontStaticCompIconS": "20px sage-icons",
74
+ "globalFontStaticCompIconM": "20px sage-icons",
75
+ "globalFontStaticCompIconL": "20px sage-icons",
76
+ "globalFontStaticCompLinedRegularS": "400 14px Sage UI",
77
+ "globalFontStaticCompLinedRegularM": "400 14px Sage UI",
78
+ "globalFontStaticCompLinedRegularL": "400 16px Sage UI",
79
+ "globalFontStaticCompLinedMediumS": "500 14px Sage UI",
80
+ "globalFontStaticCompLinedMediumM": "500 14px Sage UI",
81
+ "globalFontStaticCompLinedMediumL": "500 16px Sage UI",
82
+ "globalFontStaticCompPlaceholderXs": "500 12px Sage UI",
83
+ "globalFontStaticCompPlaceholderS": "500 14px Sage UI",
84
+ "globalFontStaticCompPlaceholderM": "500 18px Sage UI",
85
+ "globalFontStaticCompPlaceholderMl": "500 24px Sage UI",
86
+ "globalFontStaticCompPlaceholderL": "500 30px Sage UI",
87
+ "globalFontStaticCompPlaceholderXl": "500 40px Sage UI",
88
+ "globalFontStaticCompPlaceholderXxl": "500 52px Sage UI",
89
89
  "globalModifierButtonActive": "0.30",
90
90
  "globalModifierButtonActiveAlt": "0.15",
91
91
  "globalModifierButtonHover": "0.15",
@@ -112,14 +112,14 @@
112
112
  "globalRadiusActionXl": "20px",
113
113
  "globalRadiusAction2Xl": "24px",
114
114
  "globalRadiusActionCircle": "999px",
115
- "globalDepthNone": [{"blur":"0","spread":"0","color":"rgba(0,0,0,0)","type":"dropShadow","offsetX":"0","offsetY":"0"}],
116
- "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"}],
117
- "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"}],
118
- "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"}],
119
- "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"}],
120
- "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"}],
121
- "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"}],
122
- "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"}],
115
+ "globalDepthNone": "0 0 0 0 rgba(0,0,0,0)",
116
+ "globalDepthLvl0": "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)",
117
+ "globalDepthLvl1": "0 1px 2px 0 var(--mode-color-generic-depth-faint), 2px 2px 10px 0 var(--mode-color-generic-depth-soft)",
118
+ "globalDepthLvl2": "0 2px 3px 0 var(--mode-color-generic-depth-faint), 6px 6px 30px 0 var(--mode-color-generic-depth-delicate)",
119
+ "globalDepthLvl3": "0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint)",
120
+ "globalDepthStickyB": "0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft)",
121
+ "globalDepthStickyL": "-2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint)",
122
+ "globalDepthStickyR": "2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint)",
123
123
  "globalSizeNone": "0px",
124
124
  "globalSize6Xs": "2px",
125
125
  "globalSize5Xs": "4px",
@@ -152,4 +152,4 @@
152
152
  "globalSpaceCompL": "16px",
153
153
  "globalSpaceCompXl": "24px",
154
154
  "globalSpaceComp2Xl": "32px"
155
- }
155
+ }
package/json/light.json CHANGED
@@ -70,6 +70,9 @@
70
70
  "modeColorGenericBgInverseFaint": "#ffffff0d",
71
71
  "modeColorGenericBgInverseDelicate": "#ffffff1a",
72
72
  "modeColorGenericBgInverseSoft": "#ffffff26",
73
+ "modeColorGenericDepthFaint": "#0000001a",
74
+ "modeColorGenericDepthDelicate": "#00000026",
75
+ "modeColorGenericDepthSoft": "#0003",
73
76
  "modeColorGenericTxtExtreme": "#000000",
74
77
  "modeColorGenericTxtSevere": "#000000f2",
75
78
  "modeColorGenericTxtModerate": "#000000a6",
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.6",
9
+ "version": "18.8.0",
10
10
  "license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
11
11
  "tags": [
12
12
  "design tokens",
package/scss/components/button.scss CHANGED
@@ -46,7 +46,6 @@ $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;
50
49
  $button-typical-secondary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
51
50
  $button-typical-tertiary-border-active: $mode-color-action-main-active;
52
51
  $button-typical-tertiary-border-disabled: $mode-color-action-inactive-default;
@@ -57,13 +56,11 @@ $button-typical-tertiary-inverse-border-active: $mode-color-action-main-inverse-
57
56
  $button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
58
57
  $button-typical-tertiary-inverse-border-hover: $mode-color-action-main-inverse-hover;
59
58
  $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;
61
59
  $button-typical-tertiary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
62
60
  $button-typical-subtle-bg-hover: $mode-color-generic-bg-delicate;
63
61
  $button-typical-subtle-label-active: $mode-color-action-grayscale-with-active-alt;
64
62
  $button-typical-subtle-label-hover: $mode-color-action-grayscale-with-hover;
65
63
  $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;
67
64
  $button-typical-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
68
65
  $button-typical-toggle-bg-active-disabled: $mode-color-action-inactive-default;
69
66
  $button-typical-toggle-bg-active: $mode-color-action-grayscale-active;
@@ -91,6 +88,7 @@ $button-typical-secondary-inverse-bg-active: $mode-color-action-main-inverse-act
91
88
  $button-typical-secondary-inverse-bg-default: $mode-color-action-main-inverse-default-alt3;
92
89
  $button-typical-secondary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
93
90
  $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;
94
92
  $button-typical-tertiary-bg-active: $mode-color-action-main-active-alt;
95
93
  $button-typical-tertiary-bg-default: $button-none;
96
94
  $button-typical-tertiary-bg-hover: $mode-color-action-main-hover-alt;
@@ -100,10 +98,12 @@ $button-typical-tertiary-inverse-bg-active: $mode-color-action-main-inverse-acti
100
98
  $button-typical-tertiary-inverse-bg-default: $button-none;
101
99
  $button-typical-tertiary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
102
100
  $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;
103
102
  $button-typical-subtle-bg-active: $mode-color-action-grayscale-active-alt;
104
103
  $button-typical-subtle-label-default: $mode-color-action-grayscale-default;
105
104
  $button-typical-subtle-inverse-bg-active: $mode-color-action-grayscale-inverse-active-alt;
106
105
  $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;
package/scss/components/link.scss CHANGED
@@ -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;
16
15
  $link-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-active;
17
16
  $link-subtle-label-default: $mode-color-action-grayscale-default;
17
+ $link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
package/scss/components/message.scss CHANGED
@@ -7,7 +7,10 @@ $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;
10
11
  $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;
11
14
  $message-contextual-callout-bg-alt: $mode-color-status-callout-default-alt;
12
15
  $message-contextual-error-bg-default: $mode-color-status-negative-default;
13
16
  $message-contextual-error-bg-alt: $mode-color-status-negative-default-alt;
@@ -38,9 +41,6 @@ $message-global-warning-bg-default: $mode-color-status-warning-default-alt;
38
41
  $message-global-warning-bg-hover: $mode-color-status-warning-hover-alt;
39
42
  $message-global-warning-icon: $mode-color-status-warning-default;
40
43
  $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;
package/scss/components/pill.scss CHANGED
@@ -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-label-alt-default: $mode-color-status-txt-with-default-alt;
92
- $pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
93
91
  $pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
94
92
  $pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
93
+ $pill-generic-label-alt-default: $mode-color-status-txt-with-default-alt;
94
+ $pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
package/scss/dark.scss CHANGED
@@ -74,6 +74,9 @@ $mode-color-generic-bg-inverse-nought: #FFFFFF;
74
74
  $mode-color-generic-bg-inverse-faint: #f4f5f6;
75
75
  $mode-color-generic-bg-inverse-delicate: #e8eaec;
76
76
  $mode-color-generic-bg-inverse-soft: #dde0e3;
77
+ $mode-color-generic-depth-faint: #ffffff1a;
78
+ $mode-color-generic-depth-delicate: #ffffff26;
79
+ $mode-color-generic-depth-soft: #fff3;
77
80
  $mode-color-generic-txt-extreme: #FFFFFF;
78
81
  $mode-color-generic-txt-severe: #fffffff2;
79
82
  $mode-color-generic-txt-moderate: #ffffffab;
package/scss/global.scss CHANGED
@@ -4,18 +4,22 @@
4
4
  // Do not edit directly, this file was auto-generated.
5
5
 
6
6
  $global-borderwidth-none: 0;
7
- $global-borderwidth-xs: 1px;
8
- $global-borderwidth-s: 2px;
9
- $global-borderwidth-m: 3px;
10
- $global-borderwidth-l: 4px;
11
- $global-borderwidth-xl: 6px;
12
- $global-borderwidth-xxl: 8px;
13
7
  $global-breakpoint-xs: 320px;
14
8
  $global-breakpoint-s: 600px;
15
9
  $global-breakpoint-m: 960px;
16
10
  $global-breakpoint-l: 1260px;
17
11
  $global-breakpoint-xl: 1600px;
18
12
  $global-breakpoint-xxl: 1920px;
13
+ $global-modifier-button-active: 0.30;
14
+ $global-modifier-button-active-alt: 0.15;
15
+ $global-modifier-button-hover: 0.15;
16
+ $global-modifier-button-hover-alt: 0.10;
17
+ $global-modifier-input-disabled-fg: 0.3;
18
+ $global-modifier-input-disabled-bg: 0.05;
19
+ $global-radius-none: 0;
20
+ $global-radius-container-circle: 999px;
21
+ $global-radius-action-circle: 999px;
22
+ $global-depth-none: 0 0 0 0 rgba(0,0,0,0);
19
23
  $global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
20
24
  $global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;
21
25
  $global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;
@@ -90,13 +94,19 @@ $global-font-static-comp-placeholder-ml: 500 24px/1.5 Sage UI;
90
94
  $global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;
91
95
  $global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;
92
96
  $global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;
93
- $global-modifier-button-active: 0.30;
94
- $global-modifier-button-active-alt: 0.15;
95
- $global-modifier-button-hover: 0.15;
96
- $global-modifier-button-hover-alt: 0.10;
97
- $global-modifier-input-disabled-fg: 0.3;
98
- $global-modifier-input-disabled-bg: 0.05;
99
- $global-radius-none: 0;
97
+ $global-depth-lvl0: 0 0 1px 1px $mode-color-generic-depth-faint, 1px 2px 2px 0 $mode-color-generic-depth-soft;
98
+ $global-depth-lvl1: 0 1px 2px 0 $mode-color-generic-depth-faint, 2px 2px 10px 0 $mode-color-generic-depth-soft;
99
+ $global-depth-lvl2: 0 2px 3px 0 $mode-color-generic-depth-faint, 6px 6px 30px 0 $mode-color-generic-depth-delicate;
100
+ $global-depth-lvl3: 0 3px 4px 0 $mode-color-generic-depth-faint, 10px 10px 60px 0 $mode-color-generic-depth-faint;
101
+ $global-depth-sticky-b: 0 -1px 2px 0 $mode-color-generic-depth-faint, 2px -2px 10px 0 $mode-color-generic-depth-soft;
102
+ $global-depth-sticky-l: -2px 0 2px 0 $mode-color-generic-depth-faint, -5px 0 5px 0 $mode-color-generic-depth-faint;
103
+ $global-depth-sticky-r: 2px 0 2px 0 $mode-color-generic-depth-faint, 5px 0 5px 0 $mode-color-generic-depth-faint;
104
+ $global-borderwidth-xs: 1px;
105
+ $global-borderwidth-s: 2px;
106
+ $global-borderwidth-m: 3px;
107
+ $global-borderwidth-l: 4px;
108
+ $global-borderwidth-xl: 6px;
109
+ $global-borderwidth-xxl: 8px;
100
110
  $global-radius-container-3-xs: 1px;
101
111
  $global-radius-container-2-xs: 2px;
102
112
  $global-radius-container-xs: 4px;
@@ -107,7 +117,6 @@ $global-radius-container-xl: 24px;
107
117
  $global-radius-container-2-xl: 32px;
108
118
  $global-radius-container-3-xl: 40px;
109
119
  $global-radius-container-4-xl: 80px;
110
- $global-radius-container-circle: 999px;
111
120
  $global-radius-action-2-xs: 1px;
112
121
  $global-radius-action-xs: 2px;
113
122
  $global-radius-action-s: 4px;
@@ -115,15 +124,6 @@ $global-radius-action-m: 8px;
115
124
  $global-radius-action-l: 16px;
116
125
  $global-radius-action-xl: 20px;
117
126
  $global-radius-action-2-xl: 24px;
118
- $global-radius-action-circle: 999px;
119
- $global-depth-none: 0 0 0 0 rgba(0,0,0,0);
120
- $global-depth-lvl0: 0 0 1px 1px #0000001A, 1px 2px 2px 0 #00000033;
121
- $global-depth-lvl1: 0 1px 2px 0 #0000001A, 2px 2px 10px 0 #00000033;
122
- $global-depth-lvl2: 0 2px 3px 0 #0000001A, 6px 6px 30px 0 #00000026;
123
- $global-depth-lvl3: 0 3px 4px 0 #0000001A, 10px 10px 60px 0 #0000001A;
124
- $global-depth-sticky-b: 0 -1px 2px 0 #0000001A, 2px -2px 10px 0 #00000033;
125
- $global-depth-sticky-l: -2px 0 2px 0 #0000001A, -5px 0 5px 0 #0000001A;
126
- $global-depth-sticky-r: 2px 0 2px 0 #0000001A, 5px 0 5px 0 #0000001A;
127
127
  $global-size-none: 0px;
128
128
  $global-size-6-xs: 2px;
129
129
  $global-size-5-xs: 4px;
package/scss/light.scss CHANGED
@@ -74,6 +74,9 @@ $mode-color-generic-bg-inverse-nought: #000000;
74
74
  $mode-color-generic-bg-inverse-faint: #ffffff0d;
75
75
  $mode-color-generic-bg-inverse-delicate: #ffffff1a;
76
76
  $mode-color-generic-bg-inverse-soft: #ffffff26;
77
+ $mode-color-generic-depth-faint: #0000001a;
78
+ $mode-color-generic-depth-delicate: #00000026;
79
+ $mode-color-generic-depth-soft: #0003;
77
80
  $mode-color-generic-txt-extreme: #000000;
78
81
  $mode-color-generic-txt-severe: #000000f2;
79
82
  $mode-color-generic-txt-moderate: #000000a6;