@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/css/dark.css CHANGED
@@ -78,6 +78,9 @@
78
78
  --mode-color-generic-bg-inverse-faint: #f4f5f6;
79
79
  --mode-color-generic-bg-inverse-delicate: #e8eaec;
80
80
  --mode-color-generic-bg-inverse-soft: #dde0e3;
81
+ --mode-color-generic-depth-faint: #ffffff1a;
82
+ --mode-color-generic-depth-delicate: #ffffff26;
83
+ --mode-color-generic-depth-soft: #fff3;
81
84
  --mode-color-generic-txt-extreme: #FFFFFF;
82
85
  --mode-color-generic-txt-severe: #fffffff2;
83
86
  --mode-color-generic-txt-moderate: #ffffffab;
package/css/global.css CHANGED
@@ -8,18 +8,22 @@
8
8
 
9
9
  :root {
10
10
  --global-borderwidth-none: 0;
11
- --global-borderwidth-xs: 1px;
12
- --global-borderwidth-s: 2px;
13
- --global-borderwidth-m: 3px;
14
- --global-borderwidth-l: 4px;
15
- --global-borderwidth-xl: 6px;
16
- --global-borderwidth-xxl: 8px;
17
11
  --global-breakpoint-xs: 320px;
18
12
  --global-breakpoint-s: 600px;
19
13
  --global-breakpoint-m: 960px;
20
14
  --global-breakpoint-l: 1260px;
21
15
  --global-breakpoint-xl: 1600px;
22
16
  --global-breakpoint-xxl: 1920px;
17
+ --global-modifier-button-active: 0.30;
18
+ --global-modifier-button-active-alt: 0.15;
19
+ --global-modifier-button-hover: 0.15;
20
+ --global-modifier-button-hover-alt: 0.10;
21
+ --global-modifier-input-disabled-fg: 0.3;
22
+ --global-modifier-input-disabled-bg: 0.05;
23
+ --global-radius-none: 0;
24
+ --global-radius-container-circle: 999px;
25
+ --global-radius-action-circle: 999px;
26
+ --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
23
27
  --global-font-fluid-heading-s: 500 clamp(1.1646rem, 1.1207rem + 0.2195vw, 1.2964rem)/1.25 Sage UI;
24
28
  --global-font-fluid-heading-m: 700 clamp(1.2811rem, 1.2155rem + 0.3279vw, 1.4778rem)/1.25 Sage UI;
25
29
  --global-font-fluid-heading-l: 700 clamp(1.5869rem, 1.417rem + 0.8494vw, 2.4363rem)/1.25 Sage UI;
@@ -94,13 +98,19 @@
94
98
  --global-font-static-comp-placeholder-l: 500 30px/1.5 Sage UI;
95
99
  --global-font-static-comp-placeholder-xl: 500 40px/1.5 Sage UI;
96
100
  --global-font-static-comp-placeholder-xxl: 500 52px/1.5 Sage UI;
97
- --global-modifier-button-active: 0.30;
98
- --global-modifier-button-active-alt: 0.15;
99
- --global-modifier-button-hover: 0.15;
100
- --global-modifier-button-hover-alt: 0.10;
101
- --global-modifier-input-disabled-fg: 0.3;
102
- --global-modifier-input-disabled-bg: 0.05;
103
- --global-radius-none: 0;
101
+ --global-depth-lvl0: 0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft);
102
+ --global-depth-lvl1: 0 1px 2px 0 var(--mode-color-generic-depth-faint), 2px 2px 10px 0 var(--mode-color-generic-depth-soft);
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
+ --global-depth-lvl3: 0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint);
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);
108
+ --global-borderwidth-xs: 1px;
109
+ --global-borderwidth-s: 2px;
110
+ --global-borderwidth-m: 3px;
111
+ --global-borderwidth-l: 4px;
112
+ --global-borderwidth-xl: 6px;
113
+ --global-borderwidth-xxl: 8px;
104
114
  --global-radius-container-3-xs: 1px;
105
115
  --global-radius-container-2-xs: 2px;
106
116
  --global-radius-container-xs: 4px;
@@ -111,7 +121,6 @@
111
121
  --global-radius-container-2-xl: 32px;
112
122
  --global-radius-container-3-xl: 40px;
113
123
  --global-radius-container-4-xl: 80px;
114
- --global-radius-container-circle: 999px;
115
124
  --global-radius-action-2-xs: 1px;
116
125
  --global-radius-action-xs: 2px;
117
126
  --global-radius-action-s: 4px;
@@ -119,15 +128,6 @@
119
128
  --global-radius-action-l: 16px;
120
129
  --global-radius-action-xl: 20px;
121
130
  --global-radius-action-2-xl: 24px;
122
- --global-radius-action-circle: 999px;
123
- --global-depth-none: 0 0 0 0 rgba(0,0,0,0);
124
- --global-depth-lvl0: 0 0 1px 1px #0000001A, 1px 2px 2px 0 #00000033;
125
- --global-depth-lvl1: 0 1px 2px 0 #0000001A, 2px 2px 10px 0 #00000033;
126
- --global-depth-lvl2: 0 2px 3px 0 #0000001A, 6px 6px 30px 0 #00000026;
127
- --global-depth-lvl3: 0 3px 4px 0 #0000001A, 10px 10px 60px 0 #0000001A;
128
- --global-depth-sticky-b: 0 -1px 2px 0 #0000001A, 2px -2px 10px 0 #00000033;
129
- --global-depth-sticky-l: -2px 0 2px 0 #0000001A, -5px 0 5px 0 #0000001A;
130
- --global-depth-sticky-r: 2px 0 2px 0 #0000001A, 5px 0 5px 0 #0000001A;
131
131
  --global-size-none: 0px;
132
132
  --global-size-6-xs: 2px;
133
133
  --global-size-5-xs: 4px;
package/css/light-all.css CHANGED
@@ -4,18 +4,22 @@
4
4
 
5
5
  :root {
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 @@
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 var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft);
98
+ --global-depth-lvl1: 0 1px 2px 0 var(--mode-color-generic-depth-faint), 2px 2px 10px 0 var(--mode-color-generic-depth-soft);
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
+ --global-depth-lvl3: 0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint);
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);
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 @@
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 @@
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;
@@ -227,6 +227,9 @@
227
227
  --mode-color-generic-bg-inverse-faint: #ffffff0d;
228
228
  --mode-color-generic-bg-inverse-delicate: #ffffff1a;
229
229
  --mode-color-generic-bg-inverse-soft: #ffffff26;
230
+ --mode-color-generic-depth-faint: #0000001a;
231
+ --mode-color-generic-depth-delicate: #00000026;
232
+ --mode-color-generic-depth-soft: #0003;
230
233
  --mode-color-generic-txt-extreme: #000000;
231
234
  --mode-color-generic-txt-severe: #000000f2;
232
235
  --mode-color-generic-txt-moderate: #000000a6;
package/css/light.css CHANGED
@@ -78,6 +78,9 @@
78
78
  --mode-color-generic-bg-inverse-faint: #ffffff0d;
79
79
  --mode-color-generic-bg-inverse-delicate: #ffffff1a;
80
80
  --mode-color-generic-bg-inverse-soft: #ffffff26;
81
+ --mode-color-generic-depth-faint: #0000001a;
82
+ --mode-color-generic-depth-delicate: #00000026;
83
+ --mode-color-generic-depth-soft: #0003;
81
84
  --mode-color-generic-txt-extreme: #000000;
82
85
  --mode-color-generic-txt-severe: #000000f2;
83
86
  --mode-color-generic-txt-moderate: #000000a6;
package/js/common/dark.d.ts CHANGED
@@ -133,6 +133,11 @@ declare const tokens: {
133
133
  soft: DesignToken;
134
134
  };
135
135
  };
136
+ depth: {
137
+ faint: DesignToken;
138
+ delicate: DesignToken;
139
+ soft: DesignToken;
140
+ };
136
141
  txt: {
137
142
  extreme: DesignToken;
138
143
  severe: DesignToken;
package/js/common/dark.js CHANGED
@@ -73,6 +73,9 @@ module.exports.modeColorGenericBgInverseNought = "#FFFFFF";
73
73
  module.exports.modeColorGenericBgInverseFaint = "#f4f5f6";
74
74
  module.exports.modeColorGenericBgInverseDelicate = "#e8eaec";
75
75
  module.exports.modeColorGenericBgInverseSoft = "#dde0e3";
76
+ module.exports.modeColorGenericDepthFaint = "#ffffff1a";
77
+ module.exports.modeColorGenericDepthDelicate = "#ffffff26";
78
+ module.exports.modeColorGenericDepthSoft = "#fff3";
76
79
  module.exports.modeColorGenericTxtExtreme = "#FFFFFF";
77
80
  module.exports.modeColorGenericTxtSevere = "#fffffff2";
78
81
  module.exports.modeColorGenericTxtModerate = "#ffffffab";
package/js/common/global.js CHANGED
@@ -115,14 +115,14 @@ module.exports.globalRadiusActionL = "16px";
115
115
  module.exports.globalRadiusActionXl = "20px";
116
116
  module.exports.globalRadiusAction2Xl = "24px";
117
117
  module.exports.globalRadiusActionCircle = "999px";
118
- module.exports.globalDepthNone = [{"blur":"0","spread":"0","color":"rgba(0,0,0,0)","type":"dropShadow","offsetX":"0","offsetY":"0"}];
119
- module.exports.globalDepthLvl0 = [{"blur":"1px","spread":"1px","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"0"},{"blur":"2px","spread":"0","color":"#00000033","type":"dropShadow","offsetX":"1px","offsetY":"2px"}];
120
- module.exports.globalDepthLvl1 = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"1px"},{"blur":"10px","spread":"0","color":"#00000033","type":"dropShadow","offsetX":"2px","offsetY":"2px"}];
121
- module.exports.globalDepthLvl2 = [{"blur":"3px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"2px"},{"blur":"30px","spread":"0","color":"#00000026","type":"dropShadow","offsetX":"6px","offsetY":"6px"}];
122
- module.exports.globalDepthLvl3 = [{"blur":"4px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"3px"},{"blur":"60px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"10px","offsetY":"10px"}];
123
- module.exports.globalDepthStickyB = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"0","offsetY":"-1px"},{"blur":"10px","spread":"0","color":"#00000033","type":"dropShadow","offsetX":"2px","offsetY":"-2px"}];
124
- module.exports.globalDepthStickyL = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"-2px","offsetY":"0"},{"blur":"5px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"-5px","offsetY":"0"}];
125
- module.exports.globalDepthStickyR = [{"blur":"2px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"2px","offsetY":"0"},{"blur":"5px","spread":"0","color":"#0000001A","type":"dropShadow","offsetX":"5px","offsetY":"0"}];
118
+ module.exports.globalDepthNone = "0 0 0 0 rgba(0,0,0,0)";
119
+ module.exports.globalDepthLvl0 = "0 0 1px 1px var(--mode-color-generic-depth-faint), 1px 2px 2px 0 var(--mode-color-generic-depth-soft)";
120
+ module.exports.globalDepthLvl1 = "0 1px 2px 0 var(--mode-color-generic-depth-faint), 2px 2px 10px 0 var(--mode-color-generic-depth-soft)";
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
+ module.exports.globalDepthLvl3 = "0 3px 4px 0 var(--mode-color-generic-depth-faint), 10px 10px 60px 0 var(--mode-color-generic-depth-faint)";
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)";
126
126
  module.exports.globalSizeNone = "0px";
127
127
  module.exports.globalSize6Xs = "2px";
128
128
  module.exports.globalSize5Xs = "4px";
package/js/common/light.d.ts CHANGED
@@ -133,6 +133,11 @@ declare const tokens: {
133
133
  soft: DesignToken;
134
134
  };
135
135
  };
136
+ depth: {
137
+ faint: DesignToken;
138
+ delicate: DesignToken;
139
+ soft: DesignToken;
140
+ };
136
141
  txt: {
137
142
  extreme: DesignToken;
138
143
  severe: DesignToken;
package/js/common/light.js CHANGED
@@ -73,6 +73,9 @@ module.exports.modeColorGenericBgInverseNought = "#000000";
73
73
  module.exports.modeColorGenericBgInverseFaint = "#ffffff0d";
74
74
  module.exports.modeColorGenericBgInverseDelicate = "#ffffff1a";
75
75
  module.exports.modeColorGenericBgInverseSoft = "#ffffff26";
76
+ module.exports.modeColorGenericDepthFaint = "#0000001a";
77
+ module.exports.modeColorGenericDepthDelicate = "#00000026";
78
+ module.exports.modeColorGenericDepthSoft = "#0003";
76
79
  module.exports.modeColorGenericTxtExtreme = "#000000";
77
80
  module.exports.modeColorGenericTxtSevere = "#000000f2";
78
81
  module.exports.modeColorGenericTxtModerate = "#000000a6";
package/js/es6/dark.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/dark.js CHANGED
@@ -77,6 +77,9 @@ export const modeColorGenericBgInverseNought = "#FFFFFF";
77
77
  export const modeColorGenericBgInverseFaint = "#f4f5f6";
78
78
  export const modeColorGenericBgInverseDelicate = "#e8eaec";
79
79
  export const modeColorGenericBgInverseSoft = "#dde0e3";
80
+ export const modeColorGenericDepthFaint = "#ffffff1a";
81
+ export const modeColorGenericDepthDelicate = "#ffffff26";
82
+ export const modeColorGenericDepthSoft = "#fff3";
80
83
  export const modeColorGenericTxtExtreme = "#FFFFFF";
81
84
  export const modeColorGenericTxtSevere = "#fffffff2";
82
85
  export const modeColorGenericTxtModerate = "#ffffffab";