@sage/design-tokens 18.9.0 → 18.10.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 (19) hide show
  1. package/css/components/pill.css +3 -3
  2. package/css/dark.css +1 -1
  3. package/css/global.css +3 -2
  4. package/css/light-all.css +6 -5
  5. package/js/common/components/pill.js +3 -3
  6. package/js/common/dark.js +1 -1
  7. package/js/common/global.d.ts +1 -0
  8. package/js/common/global.js +3 -2
  9. package/js/es6/components/pill.js +3 -3
  10. package/js/es6/dark.js +1 -1
  11. package/js/es6/global.d.ts +11 -2
  12. package/js/es6/global.js +3 -2
  13. package/json/components/pill.json +3 -3
  14. package/json/dark.json +1 -1
  15. package/json/global.json +3 -2
  16. package/package.json +1 -1
  17. package/scss/components/pill.scss +3 -3
  18. package/scss/dark.scss +1 -1
  19. package/scss/global.scss +3 -2
package/css/components/pill.css CHANGED
@@ -63,11 +63,11 @@
63
63
  --pill-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);
64
64
  --pill-purple-bg-hover: var(--mode-color-status-priority-hover);
65
65
  --pill-purple-border-default: var(--mode-color-status-priority-default);
66
- --pill-purple-inverse-bg-default: var(--mode-color-status-priority-default);
66
+ --pill-purple-inverse-bg-default: var(--mode-color-status-priority-inverse-default);
67
67
  --pill-purple-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);
68
68
  --pill-purple-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);
69
- --pill-purple-inverse-bg-hover: var(--mode-color-status-priority-hover);
70
- --pill-purple-inverse-border-default: var(--mode-color-status-priority-default);
69
+ --pill-purple-inverse-bg-hover: var(--mode-color-status-priority-inverse-hover);
70
+ --pill-purple-inverse-border-default: var(--mode-color-status-priority-inverse-default);
71
71
  --pill-red-bg-default: var(--mode-color-status-negative-default);
72
72
  --pill-red-bg-alt-default: var(--mode-color-status-negative-default-alt);
73
73
  --pill-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);
package/css/dark.css CHANGED
@@ -100,7 +100,7 @@
100
100
  --mode-color-generic-fg-inverse-moderate: #8c98a2;
101
101
  --mode-color-generic-fg-inverse-firm: #75838f;
102
102
  --mode-color-generic-surface-nought: #000000;
103
- --mode-color-generic-surface-trace: #253b4e;
103
+ --mode-color-generic-surface-trace: #1e2d3b;
104
104
  --mode-color-generic-surface-faint: #304658;
105
105
  --mode-color-generic-surface-harsh: #d1d6da;
106
106
  --mode-color-generic-surface-severe: #e8eaec;
package/css/global.css CHANGED
@@ -103,8 +103,9 @@
103
103
  --global-depth-lvl2: 0 2px 3px 0 var(--mode-color-generic-depth-faint), 6px 6px 30px 0 var(--mode-color-generic-depth-delicate);
104
104
  --global-depth-lvl3: 0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint);
105
105
  --global-depth-sticky-b: 0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft);
106
- --global-depth-sticky-l: -2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint);
107
- --global-depth-sticky-r: 2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint);
106
+ --global-depth-sticky-l: 2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint);
107
+ --global-depth-sticky-r: -2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint);
108
+ --global-depth-sticky-t: inset 0 8px 4px -4px var(--mode-color-generic-depth-faint);
108
109
  --global-borderwidth-xs: 1px;
109
110
  --global-borderwidth-s: 2px;
110
111
  --global-borderwidth-m: 3px;
package/css/light-all.css CHANGED
@@ -99,8 +99,9 @@
99
99
  --global-depth-lvl2: 0 2px 3px 0 var(--mode-color-generic-depth-faint), 6px 6px 30px 0 var(--mode-color-generic-depth-delicate);
100
100
  --global-depth-lvl3: 0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint);
101
101
  --global-depth-sticky-b: 0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft);
102
- --global-depth-sticky-l: -2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint);
103
- --global-depth-sticky-r: 2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint);
102
+ --global-depth-sticky-l: 2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint);
103
+ --global-depth-sticky-r: -2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint);
104
+ --global-depth-sticky-t: inset 0 8px 4px -4px var(--mode-color-generic-depth-faint);
104
105
  --global-borderwidth-xs: 1px;
105
106
  --global-borderwidth-s: 2px;
106
107
  --global-borderwidth-m: 3px;
@@ -700,11 +701,11 @@
700
701
  --pill-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);
701
702
  --pill-purple-bg-hover: var(--mode-color-status-priority-hover);
702
703
  --pill-purple-border-default: var(--mode-color-status-priority-default);
703
- --pill-purple-inverse-bg-default: var(--mode-color-status-priority-default);
704
+ --pill-purple-inverse-bg-default: var(--mode-color-status-priority-inverse-default);
704
705
  --pill-purple-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);
705
706
  --pill-purple-inverse-bg-alt-hover: var(--mode-color-status-priority-inverse-hover-alt);
706
- --pill-purple-inverse-bg-hover: var(--mode-color-status-priority-hover);
707
- --pill-purple-inverse-border-default: var(--mode-color-status-priority-default);
707
+ --pill-purple-inverse-bg-hover: var(--mode-color-status-priority-inverse-hover);
708
+ --pill-purple-inverse-border-default: var(--mode-color-status-priority-inverse-default);
708
709
  --pill-red-bg-default: var(--mode-color-status-negative-default);
709
710
  --pill-red-bg-alt-default: var(--mode-color-status-negative-default-alt);
710
711
  --pill-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);
package/js/common/components/pill.js CHANGED
@@ -66,11 +66,11 @@ module.exports.pillPurpleBgAltDefault = "var(--mode-color-status-priority-defaul
66
66
  module.exports.pillPurpleBgAltHover = "var(--mode-color-status-priority-hover-alt)";
67
67
  module.exports.pillPurpleBgHover = "var(--mode-color-status-priority-hover)";
68
68
  module.exports.pillPurpleBorderDefault = "var(--mode-color-status-priority-default)";
69
- module.exports.pillPurpleInverseBgDefault = "var(--mode-color-status-priority-default)";
69
+ module.exports.pillPurpleInverseBgDefault = "var(--mode-color-status-priority-inverse-default)";
70
70
  module.exports.pillPurpleInverseBgAltDefault = "var(--mode-color-status-priority-inverse-default-alt)";
71
71
  module.exports.pillPurpleInverseBgAltHover = "var(--mode-color-status-priority-inverse-hover-alt)";
72
- module.exports.pillPurpleInverseBgHover = "var(--mode-color-status-priority-hover)";
73
- module.exports.pillPurpleInverseBorderDefault = "var(--mode-color-status-priority-default)";
72
+ module.exports.pillPurpleInverseBgHover = "var(--mode-color-status-priority-inverse-hover)";
73
+ module.exports.pillPurpleInverseBorderDefault = "var(--mode-color-status-priority-inverse-default)";
74
74
  module.exports.pillRedBgDefault = "var(--mode-color-status-negative-default)";
75
75
  module.exports.pillRedBgAltDefault = "var(--mode-color-status-negative-default-alt)";
76
76
  module.exports.pillRedBgAltHover = "var(--mode-color-status-negative-hover-alt)";
package/js/common/dark.js CHANGED
@@ -95,7 +95,7 @@ module.exports.modeColorGenericFgInverseSoft = "#a3adb5";
95
95
  module.exports.modeColorGenericFgInverseModerate = "#8c98a2";
96
96
  module.exports.modeColorGenericFgInverseFirm = "#75838f";
97
97
  module.exports.modeColorGenericSurfaceNought = "#000000";
98
- module.exports.modeColorGenericSurfaceTrace = "#253b4e";
98
+ module.exports.modeColorGenericSurfaceTrace = "#1e2d3b";
99
99
  module.exports.modeColorGenericSurfaceFaint = "#304658";
100
100
  module.exports.modeColorGenericSurfaceHarsh = "#d1d6da";
101
101
  module.exports.modeColorGenericSurfaceSevere = "#e8eaec";
package/js/common/global.d.ts CHANGED
@@ -224,6 +224,7 @@ declare const tokens: {
224
224
  stickyB: DesignToken;
225
225
  stickyL: DesignToken;
226
226
  stickyR: DesignToken;
227
+ stickyT: DesignToken;
227
228
  };
228
229
  size: {
229
230
  none: DesignToken;
package/js/common/global.js CHANGED
@@ -121,8 +121,9 @@ module.exports.globalDepthLvl1 = "0 1px 2px 0 var(--mode-color-generic-depth-fai
121
121
  module.exports.globalDepthLvl2 = "0 2px 3px 0 var(--mode-color-generic-depth-faint), 6px 6px 30px 0 var(--mode-color-generic-depth-delicate)";
122
122
  module.exports.globalDepthLvl3 = "0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint)";
123
123
  module.exports.globalDepthStickyB = "0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft)";
124
- module.exports.globalDepthStickyL = "-2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint)";
125
- module.exports.globalDepthStickyR = "2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint)";
124
+ module.exports.globalDepthStickyL = "2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint)";
125
+ module.exports.globalDepthStickyR = "-2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint)";
126
+ module.exports.globalDepthStickyT = "inset 0 8px 4px -4px var(--mode-color-generic-depth-faint)";
126
127
  module.exports.globalSizeNone = "0px";
127
128
  module.exports.globalSize6Xs = "2px";
128
129
  module.exports.globalSize5Xs = "4px";
package/js/es6/components/pill.js CHANGED
@@ -66,11 +66,11 @@ export const pillPurpleBgAltDefault = "var(--mode-color-status-priority-default-
66
66
  export const pillPurpleBgAltHover = "var(--mode-color-status-priority-hover-alt)";
67
67
  export const pillPurpleBgHover = "var(--mode-color-status-priority-hover)";
68
68
  export const pillPurpleBorderDefault = "var(--mode-color-status-priority-default)";
69
- export const pillPurpleInverseBgDefault = "var(--mode-color-status-priority-default)";
69
+ export const pillPurpleInverseBgDefault = "var(--mode-color-status-priority-inverse-default)";
70
70
  export const pillPurpleInverseBgAltDefault = "var(--mode-color-status-priority-inverse-default-alt)";
71
71
  export const pillPurpleInverseBgAltHover = "var(--mode-color-status-priority-inverse-hover-alt)";
72
- export const pillPurpleInverseBgHover = "var(--mode-color-status-priority-hover)";
73
- export const pillPurpleInverseBorderDefault = "var(--mode-color-status-priority-default)";
72
+ export const pillPurpleInverseBgHover = "var(--mode-color-status-priority-inverse-hover)";
73
+ export const pillPurpleInverseBorderDefault = "var(--mode-color-status-priority-inverse-default)";
74
74
  export const pillRedBgDefault = "var(--mode-color-status-negative-default)";
75
75
  export const pillRedBgAltDefault = "var(--mode-color-status-negative-default-alt)";
76
76
  export const pillRedBgAltHover = "var(--mode-color-status-negative-hover-alt)";
package/js/es6/dark.js CHANGED
@@ -99,7 +99,7 @@ export const modeColorGenericFgInverseSoft = "#a3adb5"; // table dividers and bo
99
99
  export const modeColorGenericFgInverseModerate = "#8c98a2";
100
100
  export const modeColorGenericFgInverseFirm = "#75838f";
101
101
  export const modeColorGenericSurfaceNought = "#000000"; // used on full page backgrounds
102
- export const modeColorGenericSurfaceTrace = "#253b4e"; // used on full page backgrounds as an alternative option
102
+ export const modeColorGenericSurfaceTrace = "#1e2d3b"; // used on full page backgrounds as an alternative option
103
103
  export const modeColorGenericSurfaceFaint = "#304658"; // table header hover color
104
104
  export const modeColorGenericSurfaceHarsh = "#d1d6da";
105
105
  export const modeColorGenericSurfaceSevere = "#e8eaec";
package/js/es6/global.d.ts CHANGED
@@ -654,7 +654,7 @@ export const globalDepthStickyB: {
654
654
  offsetX: string;
655
655
  offsetY: string;
656
656
  }[];
657
- /** Right sticky column in Table. */
657
+ /** Left sticky column in Table. */
658
658
  export const globalDepthStickyL: {
659
659
  blur: string;
660
660
  spread: string;
@@ -663,7 +663,7 @@ export const globalDepthStickyL: {
663
663
  offsetX: string;
664
664
  offsetY: string;
665
665
  }[];
666
- /** Left sticky column in Table. */
666
+ /** Right sticky column in Table. */
667
667
  export const globalDepthStickyR: {
668
668
  blur: string;
669
669
  spread: string;
@@ -672,6 +672,15 @@ export const globalDepthStickyR: {
672
672
  offsetX: string;
673
673
  offsetY: string;
674
674
  }[];
675
+ /** Sticky inset shadow applied to first child cells on expandable table */
676
+ export const globalDepthStickyT: {
677
+ blur: string;
678
+ spread: string;
679
+ color: string;
680
+ type: string;
681
+ offsetX: string;
682
+ offsetY: string;
683
+ }[];
675
684
  export const globalSizeNone: string;
676
685
  export const globalSize6Xs: string;
677
686
  export const globalSize5Xs: string;
package/js/es6/global.js CHANGED
@@ -121,8 +121,9 @@ export const globalDepthLvl1 = "0 1px 2px 0 var(--mode-color-generic-depth-faint
121
121
  export const globalDepthLvl2 = "0 2px 3px 0 var(--mode-color-generic-depth-faint), 6px 6px 30px 0 var(--mode-color-generic-depth-delicate)";
122
122
  export const globalDepthLvl3 = "0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint)";
123
123
  export const globalDepthStickyB = "0 -1px 2px 0 var(--mode-color-generic-depth-faint), 2px -2px 10px 0 var(--mode-color-generic-depth-soft)";
124
- export const globalDepthStickyL = "-2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint)";
125
- export const globalDepthStickyR = "2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint)";
124
+ export const globalDepthStickyL = "2px 0 2px 0 var(--mode-color-generic-depth-faint), 5px 0 5px 0 var(--mode-color-generic-depth-faint)";
125
+ export const globalDepthStickyR = "-2px 0 2px 0 var(--mode-color-generic-depth-faint), -5px 0 5px 0 var(--mode-color-generic-depth-faint)";
126
+ export const globalDepthStickyT = "inset 0 8px 4px -4px var(--mode-color-generic-depth-faint)";
126
127
  export const globalSizeNone = "0px";
127
128
  export const globalSize6Xs = "2px";
128
129
  export const globalSize5Xs = "4px";
package/json/components/pill.json CHANGED
@@ -63,11 +63,11 @@
63
63
  "pillPurpleBgAltHover": "var(--mode-color-status-priority-hover-alt)",
64
64
  "pillPurpleBgHover": "var(--mode-color-status-priority-hover)",
65
65
  "pillPurpleBorderDefault": "var(--mode-color-status-priority-default)",
66
- "pillPurpleInverseBgDefault": "var(--mode-color-status-priority-default)",
66
+ "pillPurpleInverseBgDefault": "var(--mode-color-status-priority-inverse-default)",
67
67
  "pillPurpleInverseBgAltDefault": "var(--mode-color-status-priority-inverse-default-alt)",
68
68
  "pillPurpleInverseBgAltHover": "var(--mode-color-status-priority-inverse-hover-alt)",
69
- "pillPurpleInverseBgHover": "var(--mode-color-status-priority-hover)",
70
- "pillPurpleInverseBorderDefault": "var(--mode-color-status-priority-default)",
69
+ "pillPurpleInverseBgHover": "var(--mode-color-status-priority-inverse-hover)",
70
+ "pillPurpleInverseBorderDefault": "var(--mode-color-status-priority-inverse-default)",
71
71
  "pillRedBgDefault": "var(--mode-color-status-negative-default)",
72
72
  "pillRedBgAltDefault": "var(--mode-color-status-negative-default-alt)",
73
73
  "pillRedBgAltHover": "var(--mode-color-status-negative-hover-alt)",
package/json/dark.json CHANGED
@@ -92,7 +92,7 @@
92
92
  "modeColorGenericFgInverseModerate": "#8c98a2",
93
93
  "modeColorGenericFgInverseFirm": "#75838f",
94
94
  "modeColorGenericSurfaceNought": "#000000",
95
- "modeColorGenericSurfaceTrace": "#253b4e",
95
+ "modeColorGenericSurfaceTrace": "#1e2d3b",
96
96
  "modeColorGenericSurfaceFaint": "#304658",
97
97
  "modeColorGenericSurfaceHarsh": "#d1d6da",
98
98
  "modeColorGenericSurfaceSevere": "#e8eaec",
package/json/global.json CHANGED
@@ -118,8 +118,9 @@
118
118
  "globalDepthLvl2": "0 2px 3px 0 var(--mode-color-generic-depth-faint), 6px 6px 30px 0 var(--mode-color-generic-depth-delicate)",
119
119
  "globalDepthLvl3": "0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint)",
120
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)",
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
+ "globalDepthStickyT": "inset 0 8px 4px -4px var(--mode-color-generic-depth-faint)",
123
124
  "globalSizeNone": "0px",
124
125
  "globalSize6Xs": "2px",
125
126
  "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.9.0",
9
+ "version": "18.10.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/pill.scss CHANGED
@@ -59,11 +59,11 @@ $pill-purple-bg-alt-default: $mode-color-status-priority-default-alt;
59
59
  $pill-purple-bg-alt-hover: $mode-color-status-priority-hover-alt;
60
60
  $pill-purple-bg-hover: $mode-color-status-priority-hover;
61
61
  $pill-purple-border-default: $mode-color-status-priority-default;
62
- $pill-purple-inverse-bg-default: $mode-color-status-priority-default;
62
+ $pill-purple-inverse-bg-default: $mode-color-status-priority-inverse-default;
63
63
  $pill-purple-inverse-bg-alt-default: $mode-color-status-priority-inverse-default-alt;
64
64
  $pill-purple-inverse-bg-alt-hover: $mode-color-status-priority-inverse-hover-alt;
65
- $pill-purple-inverse-bg-hover: $mode-color-status-priority-hover;
66
- $pill-purple-inverse-border-default: $mode-color-status-priority-default;
65
+ $pill-purple-inverse-bg-hover: $mode-color-status-priority-inverse-hover;
66
+ $pill-purple-inverse-border-default: $mode-color-status-priority-inverse-default;
67
67
  $pill-red-bg-default: $mode-color-status-negative-default;
68
68
  $pill-red-bg-alt-default: $mode-color-status-negative-default-alt;
69
69
  $pill-red-bg-alt-hover: $mode-color-status-negative-hover-alt;
package/scss/dark.scss CHANGED
@@ -96,7 +96,7 @@ $mode-color-generic-fg-inverse-soft: #a3adb5;
96
96
  $mode-color-generic-fg-inverse-moderate: #8c98a2;
97
97
  $mode-color-generic-fg-inverse-firm: #75838f;
98
98
  $mode-color-generic-surface-nought: #000000;
99
- $mode-color-generic-surface-trace: #253b4e;
99
+ $mode-color-generic-surface-trace: #1e2d3b;
100
100
  $mode-color-generic-surface-faint: #304658;
101
101
  $mode-color-generic-surface-harsh: #d1d6da;
102
102
  $mode-color-generic-surface-severe: #e8eaec;
package/scss/global.scss CHANGED
@@ -99,8 +99,9 @@ $global-depth-lvl1: 0 1px 2px 0 $mode-color-generic-depth-faint, 2px 2px 10px 0
99
99
  $global-depth-lvl2: 0 2px 3px 0 $mode-color-generic-depth-faint, 6px 6px 30px 0 $mode-color-generic-depth-delicate;
100
100
  $global-depth-lvl3: 0 3px 4px 0 $mode-color-generic-depth-faint, 10px 10px 60px 0 $mode-color-generic-depth-faint;
101
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;
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-depth-sticky-t: inset 0 8px 4px -4px $mode-color-generic-depth-faint;
104
105
  $global-borderwidth-xs: 1px;
105
106
  $global-borderwidth-s: 2px;
106
107
  $global-borderwidth-m: 3px;