@sage/design-tokens 18.7.6 → 18.9.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 (32) hide show
  1. package/css/components/page.css +18 -2
  2. package/css/dark.css +3 -0
  3. package/css/global.css +23 -23
  4. package/css/light-all.css +44 -25
  5. package/css/light.css +3 -0
  6. package/js/common/components/page.d.ts +30 -2
  7. package/js/common/components/page.js +18 -2
  8. package/js/common/dark.d.ts +5 -0
  9. package/js/common/dark.js +3 -0
  10. package/js/common/global.js +8 -8
  11. package/js/common/light.d.ts +5 -0
  12. package/js/common/light.js +3 -0
  13. package/js/es6/components/page.d.ts +24 -3
  14. package/js/es6/components/page.js +18 -2
  15. package/js/es6/dark.d.ts +3 -0
  16. package/js/es6/dark.js +3 -0
  17. package/js/es6/global.js +112 -686
  18. package/js/es6/light.d.ts +3 -0
  19. package/js/es6/light.js +3 -0
  20. package/json/components/page.json +19 -3
  21. package/json/dark.json +3 -0
  22. package/json/global.json +83 -83
  23. package/json/light.json +3 -0
  24. package/package.json +1 -1
  25. package/scss/components/button.scss +3 -3
  26. package/scss/components/link.scss +1 -1
  27. package/scss/components/message.scss +3 -3
  28. package/scss/components/page.scss +18 -2
  29. package/scss/components/pill.scss +2 -2
  30. package/scss/dark.scss +3 -0
  31. package/scss/global.scss +23 -23
  32. 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/components/page.json CHANGED
@@ -1,6 +1,22 @@
1
1
  {
2
- "pageBgDefault": "var(--mode-color-generic-surface-nought)",
3
2
  "pageBgAlt": "var(--mode-color-generic-surface-trace)",
4
- "pageTxtAlt": "var(--mode-color-generic-txt-moderate)",
5
- "pageTxtDefault": "var(--mode-color-generic-txt-severe)"
3
+ "pageBgDefault": "var(--mode-color-generic-surface-nought)",
4
+ "pageIconDefault": "var(--mode-color-generic-txt-severe)",
5
+ "pageTxtDefault": "var(--mode-color-generic-txt-severe)",
6
+ "pageContentIconAlt": "var(--mode-color-generic-txt-moderate)",
7
+ "pageContentIconDefault": "var(--mode-color-generic-txt-severe)",
8
+ "pageContentTxtAlt": "var(--mode-color-generic-txt-moderate)",
9
+ "pageContentTxtDefault": "var(--mode-color-generic-txt-severe)",
10
+ "pageContentInverseIconAlt": "var(--mode-color-generic-txt-inverse-moderate)",
11
+ "pageContentInverseIconDefault": "var(--mode-color-generic-txt-inverse-severe)",
12
+ "pageContentInverseTxtAlt": "var(--mode-color-generic-txt-inverse-moderate)",
13
+ "pageContentInverseTxtDefault": "var(--mode-color-generic-txt-inverse-severe)",
14
+ "pageContentCautionIcon": "var(--mode-color-status-warning-default)",
15
+ "pageContentCautionTxt": "var(--mode-color-status-warning-txt)",
16
+ "pageContentInfoIcon": "var(--mode-color-status-info-default)",
17
+ "pageContentInfoTxt": "var(--mode-color-status-info-default)",
18
+ "pageContentNegativeIcon": "var(--mode-color-status-negative-default)",
19
+ "pageContentNegativeTxt": "var(--mode-color-status-negative-default)",
20
+ "pageContentPositiveIcon": "var(--mode-color-status-positive-default)",
21
+ "pageContentPositiveTxt": "var(--mode-color-status-positive-default)"
6
22
  }
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.9.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/page.scss CHANGED
@@ -3,7 +3,23 @@
3
3
 
4
4
  // Do not edit directly, this file was auto-generated.
5
5
 
6
- $page-bg-default: $mode-color-generic-surface-nought;
7
6
  $page-bg-alt: $mode-color-generic-surface-trace;
8
- $page-txt-alt: $mode-color-generic-txt-moderate;
7
+ $page-bg-default: $mode-color-generic-surface-nought;
8
+ $page-content-caution-icon: $mode-color-status-warning-default;
9
+ $page-content-caution-txt: $mode-color-status-warning-txt;
10
+ $page-content-info-icon: $mode-color-status-info-default;
11
+ $page-content-info-txt: $mode-color-status-info-default;
12
+ $page-content-negative-icon: $mode-color-status-negative-default;
13
+ $page-content-negative-txt: $mode-color-status-negative-default;
14
+ $page-content-positive-icon: $mode-color-status-positive-default;
15
+ $page-content-positive-txt: $mode-color-status-positive-default;
16
+ $page-icon-default: $mode-color-generic-txt-severe;
9
17
  $page-txt-default: $mode-color-generic-txt-severe;
18
+ $page-content-icon-alt: $mode-color-generic-txt-moderate;
19
+ $page-content-icon-default: $mode-color-generic-txt-severe;
20
+ $page-content-txt-alt: $mode-color-generic-txt-moderate;
21
+ $page-content-txt-default: $mode-color-generic-txt-severe;
22
+ $page-content-inverse-icon-alt: $mode-color-generic-txt-inverse-moderate;
23
+ $page-content-inverse-icon-default: $mode-color-generic-txt-inverse-severe;
24
+ $page-content-inverse-txt-alt: $mode-color-generic-txt-inverse-moderate;
25
+ $page-content-inverse-txt-default: $mode-color-generic-txt-inverse-severe;
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;