@sage/design-tokens 18.9.1 → 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 (9) hide show
  1. package/css/global.css +3 -2
  2. package/css/light-all.css +3 -2
  3. package/js/common/global.d.ts +1 -0
  4. package/js/common/global.js +3 -2
  5. package/js/es6/global.d.ts +11 -2
  6. package/js/es6/global.js +3 -2
  7. package/json/global.json +3 -2
  8. package/package.json +1 -1
  9. package/scss/global.scss +3 -2
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;
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/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/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.1",
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/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;