@sage/design-tokens 17.4.0 → 17.5.1
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.
- package/assets/fonts/sageui.css +1 -1
- package/css/components/badge.css +1 -1
- package/css/components/button.css +1 -1
- package/css/components/container.css +1 -1
- package/css/components/dataviz.css +27 -1
- package/css/components/focus.css +1 -1
- package/css/components/input.css +1 -1
- package/css/components/link.css +1 -1
- package/css/components/logo.css +1 -1
- package/css/components/message.css +1 -1
- package/css/components/nav.css +1 -1
- package/css/components/page.css +1 -1
- package/css/components/pill.css +1 -1
- package/css/components/popover.css +1 -1
- package/css/components/profile.css +1 -1
- package/css/components/progress.css +1 -1
- package/css/components/tab.css +1 -1
- package/css/components/table.css +1 -1
- package/css/dark.css +4 -3
- package/css/global.css +8 -8
- package/css/light.css +4 -4
- package/js/ES6/index.js +1 -1
- package/js/common/components/badge.d.ts +1 -1
- package/js/common/components/badge.js +1 -1
- package/js/common/components/button.d.ts +1 -1
- package/js/common/components/button.js +1 -1
- package/js/common/components/container.d.ts +1 -1
- package/js/common/components/container.js +1 -1
- package/js/common/components/dataviz.d.ts +47 -1
- package/js/common/components/dataviz.js +27 -1
- package/js/common/components/focus.d.ts +1 -1
- package/js/common/components/focus.js +1 -1
- package/js/common/components/input.d.ts +1 -1
- package/js/common/components/input.js +1 -1
- package/js/common/components/link.d.ts +1 -1
- package/js/common/components/link.js +1 -1
- package/js/common/components/logo.d.ts +1 -1
- package/js/common/components/logo.js +1 -1
- package/js/common/components/message.d.ts +1 -1
- package/js/common/components/message.js +1 -1
- package/js/common/components/nav.d.ts +1 -1
- package/js/common/components/nav.js +1 -1
- package/js/common/components/page.d.ts +1 -1
- package/js/common/components/page.js +1 -1
- package/js/common/components/pill.d.ts +1 -1
- package/js/common/components/pill.js +1 -1
- package/js/common/components/popover.d.ts +1 -1
- package/js/common/components/popover.js +1 -1
- package/js/common/components/profile.d.ts +1 -1
- package/js/common/components/profile.js +1 -1
- package/js/common/components/progress.d.ts +1 -1
- package/js/common/components/progress.js +1 -1
- package/js/common/components/tab.d.ts +1 -1
- package/js/common/components/tab.js +1 -1
- package/js/common/components/table.d.ts +1 -1
- package/js/common/components/table.js +1 -1
- package/js/common/dark.d.ts +2 -1
- package/js/common/dark.js +4 -3
- package/js/common/global.d.ts +1 -1
- package/js/common/global.js +1 -1
- package/js/common/index.js +1 -1
- package/js/common/light.d.ts +2 -2
- package/js/common/light.js +4 -4
- package/js/es6/components/badge.d.ts +1 -1
- package/js/es6/components/badge.js +1 -1
- package/js/es6/components/button.d.ts +1 -1
- package/js/es6/components/button.js +1 -1
- package/js/es6/components/container.d.ts +1 -1
- package/js/es6/components/container.js +1 -1
- package/js/es6/components/dataviz.d.ts +27 -1
- package/js/es6/components/dataviz.js +27 -1
- package/js/es6/components/focus.d.ts +1 -1
- package/js/es6/components/focus.js +1 -1
- package/js/es6/components/input.d.ts +1 -1
- package/js/es6/components/input.js +1 -1
- package/js/es6/components/link.d.ts +1 -1
- package/js/es6/components/link.js +1 -1
- package/js/es6/components/logo.d.ts +1 -1
- package/js/es6/components/logo.js +1 -1
- package/js/es6/components/message.d.ts +1 -1
- package/js/es6/components/message.js +1 -1
- package/js/es6/components/nav.d.ts +1 -1
- package/js/es6/components/nav.js +1 -1
- package/js/es6/components/page.d.ts +1 -1
- package/js/es6/components/page.js +1 -1
- package/js/es6/components/pill.d.ts +1 -1
- package/js/es6/components/pill.js +1 -1
- package/js/es6/components/popover.d.ts +1 -1
- package/js/es6/components/popover.js +1 -1
- package/js/es6/components/profile.d.ts +1 -1
- package/js/es6/components/profile.js +1 -1
- package/js/es6/components/progress.d.ts +1 -1
- package/js/es6/components/progress.js +1 -1
- package/js/es6/components/tab.d.ts +1 -1
- package/js/es6/components/tab.js +1 -1
- package/js/es6/components/table.d.ts +1 -1
- package/js/es6/components/table.js +1 -1
- package/js/es6/dark.d.ts +2 -1
- package/js/es6/dark.js +4 -3
- package/js/es6/global.d.ts +1 -1
- package/js/es6/global.js +1 -1
- package/js/es6/light.d.ts +3 -4
- package/js/es6/light.js +5 -5
- package/json/components/dataviz.json +26 -0
- package/json/dark.json +3 -2
- package/json/light.json +3 -3
- package/package.json +1 -1
- package/scss/components/badge.scss +1 -1
- package/scss/components/button.scss +4 -4
- package/scss/components/container.scss +1 -1
- package/scss/components/dataviz.scss +27 -1
- package/scss/components/focus.scss +1 -1
- package/scss/components/input.scss +1 -1
- package/scss/components/link.scss +2 -2
- package/scss/components/logo.scss +1 -1
- package/scss/components/message.scss +3 -3
- package/scss/components/nav.scss +1 -1
- package/scss/components/page.scss +1 -1
- package/scss/components/pill.scss +3 -3
- package/scss/components/popover.scss +1 -1
- package/scss/components/profile.scss +1 -1
- package/scss/components/progress.scss +1 -1
- package/scss/components/tab.scss +1 -1
- package/scss/components/table.scss +1 -1
- package/scss/dark.scss +4 -3
- package/scss/global.scss +8 -8
- package/scss/light.scss +4 -4
package/assets/fonts/sageui.css
CHANGED
package/css/components/badge.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -7,6 +7,32 @@
|
|
|
7
7
|
*/
|
|
8
8
|
|
|
9
9
|
:root {
|
|
10
|
+
--dataviz-chart-line-bg-default: var(--mode-color-colorcode-green-deep);
|
|
11
|
+
--dataviz-chart-line-border: var(--mode-color-colorcode-green-deep);
|
|
12
|
+
--dataviz-chart-bar-gray-bg-alt: var(--mode-color-colorcode-gray-muted);
|
|
13
|
+
--dataviz-chart-bar-gray-bg-default: var(--mode-color-colorcode-gray-severe);
|
|
14
|
+
--dataviz-chart-bar-gray-border: var(--mode-color-colorcode-gray-severe);
|
|
15
|
+
--dataviz-chart-bar-gray-pattern: var(--mode-color-colorcode-gray-severe);
|
|
16
|
+
--dataviz-chart-bar-green-bg-alt: var(--mode-color-colorcode-green-muted);
|
|
17
|
+
--dataviz-chart-bar-green-bg-default: var(--mode-color-colorcode-green-deep);
|
|
18
|
+
--dataviz-chart-bar-green-border: var(--mode-color-colorcode-green-deep);
|
|
19
|
+
--dataviz-chart-bar-green-pattern: var(--mode-color-colorcode-green-deep);
|
|
20
|
+
--dataviz-chart-bar-orange-bg-alt: var(--mode-color-colorcode-orange-muted);
|
|
21
|
+
--dataviz-chart-bar-orange-bg-default: var(--mode-color-colorcode-orange-deep);
|
|
22
|
+
--dataviz-chart-bar-orange-border: var(--mode-color-colorcode-orange-deep);
|
|
23
|
+
--dataviz-chart-bar-orange-pattern: var(--mode-color-colorcode-orange-deep);
|
|
24
|
+
--dataviz-chart-donut-gray-bg-alt: var(--mode-color-colorcode-gray-muted);
|
|
25
|
+
--dataviz-chart-donut-gray-bg-default: var(--mode-color-colorcode-gray-severe);
|
|
26
|
+
--dataviz-chart-donut-gray-border: var(--mode-color-colorcode-gray-severe);
|
|
27
|
+
--dataviz-chart-donut-gray-pattern: var(--mode-color-colorcode-gray-severe);
|
|
28
|
+
--dataviz-chart-donut-green-bg-alt: var(--mode-color-colorcode-green-muted);
|
|
29
|
+
--dataviz-chart-donut-green-bg-default: var(--mode-color-colorcode-green-deep);
|
|
30
|
+
--dataviz-chart-donut-green-border: var(--mode-color-colorcode-green-deep);
|
|
31
|
+
--dataviz-chart-donut-green-pattern: var(--mode-color-colorcode-green-deep);
|
|
32
|
+
--dataviz-chart-donut-orange-bg-alt: var(--mode-color-colorcode-orange-muted);
|
|
33
|
+
--dataviz-chart-donut-orange-bg-default: var(--mode-color-colorcode-orange-deep);
|
|
34
|
+
--dataviz-chart-donut-orange-border: var(--mode-color-colorcode-orange-deep);
|
|
35
|
+
--dataviz-chart-donut-orange-pattern: var(--mode-color-colorcode-orange-deep);
|
|
10
36
|
--dataviz-generic-label-alt: var(--mode-color-generic-txt-inverse-extreme);
|
|
11
37
|
--dataviz-generic-label-default: var(--mode-color-generic-txt-extreme);
|
|
12
38
|
--dataviz-generic-blue-bg-alt: var(--mode-color-colorcode-blue-deep);
|
package/css/components/focus.css
CHANGED
package/css/components/input.css
CHANGED
package/css/components/link.css
CHANGED
package/css/components/logo.css
CHANGED
package/css/components/nav.css
CHANGED
package/css/components/page.css
CHANGED
package/css/components/pill.css
CHANGED
package/css/components/tab.css
CHANGED
package/css/components/table.css
CHANGED
package/css/dark.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -44,8 +44,9 @@
|
|
|
44
44
|
--mode-color-colorcode-purple-muted: #220c3a;
|
|
45
45
|
--mode-color-colorcode-slate-deep: #6b7f8d;
|
|
46
46
|
--mode-color-colorcode-slate-muted: #101a20;
|
|
47
|
-
--mode-color-colorcode-gray-
|
|
48
|
-
--mode-color-colorcode-gray-
|
|
47
|
+
--mode-color-colorcode-gray-severe: #e8eaec;
|
|
48
|
+
--mode-color-colorcode-gray-deep: #a3adb5;
|
|
49
|
+
--mode-color-colorcode-gray-muted: #253b4e;
|
|
49
50
|
--mode-color-generic-bg-nought: #000000;
|
|
50
51
|
--mode-color-generic-bg-faint: #ffffff0d;
|
|
51
52
|
--mode-color-generic-bg-delicate: #ffffff1a;
|
package/css/global.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -114,13 +114,13 @@
|
|
|
114
114
|
--global-radius-action-xl: 20px;
|
|
115
115
|
--global-radius-action-2-xl: 24px;
|
|
116
116
|
--global-radius-action-circle: 999px;
|
|
117
|
-
--global-depth-none:
|
|
118
|
-
--global-depth-lvl1:
|
|
119
|
-
--global-depth-lvl2:
|
|
120
|
-
--global-depth-lvl3:
|
|
121
|
-
--global-depth-sticky-b:
|
|
122
|
-
--global-depth-sticky-l:
|
|
123
|
-
--global-depth-sticky-r:
|
|
117
|
+
--global-depth-none: 0 0 0 0 rgba(0,0,0,0);
|
|
118
|
+
--global-depth-lvl1: 0 1px 2px 0 #0000001A, 2px 2px 10px 0 #00000033;
|
|
119
|
+
--global-depth-lvl2: 0 2px 3px 0 #0000001A, 6px 6px 30px 0 #00000026;
|
|
120
|
+
--global-depth-lvl3: 0 3px 4px 0 #0000001A, 10px 10px 60px 0 #0000001A;
|
|
121
|
+
--global-depth-sticky-b: 0 -1px 2px 0 #0000001A, 2px -2px 10px 0 #00000033;
|
|
122
|
+
--global-depth-sticky-l: -2px 0 2px 0 #0000001A, -5px 0 5px 0 #0000001A;
|
|
123
|
+
--global-depth-sticky-r: 2px 0 2px 0 #0000001A, 5px 0 5px 0 #0000001A;
|
|
124
124
|
--global-size-none: 0px;
|
|
125
125
|
--global-size-6-xs: 2px;
|
|
126
126
|
--global-size-5-xs: 4px;
|
package/css/light.css
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -44,8 +44,9 @@
|
|
|
44
44
|
--mode-color-colorcode-purple-muted: #F3EBFE;
|
|
45
45
|
--mode-color-colorcode-slate-deep: #527386;
|
|
46
46
|
--mode-color-colorcode-slate-muted: #e4eff5;
|
|
47
|
-
--mode-color-colorcode-gray-
|
|
48
|
-
--mode-color-colorcode-gray-
|
|
47
|
+
--mode-color-colorcode-gray-severe: #304658;
|
|
48
|
+
--mode-color-colorcode-gray-deep: #6a7986;
|
|
49
|
+
--mode-color-colorcode-gray-muted: #e8eaec;
|
|
49
50
|
--mode-color-generic-bg-nought: #FFFFFF;
|
|
50
51
|
--mode-color-generic-bg-faint: #f4f5f6;
|
|
51
52
|
--mode-color-generic-bg-delicate: #e8eaec;
|
|
@@ -77,7 +78,6 @@
|
|
|
77
78
|
--mode-color-generic-txt-inverse-soft: #ffffff8c;
|
|
78
79
|
--mode-color-generic-txt-inverse-delicate: #ffffff6b;
|
|
79
80
|
--mode-color-generic-txt-inverse-faint: #ffffff4d;
|
|
80
|
-
--mode-color-generic-txt-inverse-faint-copy: #ffffff4d;
|
|
81
81
|
--mode-color-generic-txt-inverse-nought: #000000;
|
|
82
82
|
--mode-color-generic-fg-nought: #FFFFFF;
|
|
83
83
|
--mode-color-generic-fg-delicate: #e8eaec;
|
package/js/ES6/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -20,6 +20,52 @@ declare interface DesignToken {
|
|
|
20
20
|
|
|
21
21
|
declare const tokens: {
|
|
22
22
|
dataviz: {
|
|
23
|
+
chart: {
|
|
24
|
+
line: {
|
|
25
|
+
"bg-default": DesignToken;
|
|
26
|
+
border: DesignToken;
|
|
27
|
+
};
|
|
28
|
+
bar: {
|
|
29
|
+
gray: {
|
|
30
|
+
"bg-alt": DesignToken;
|
|
31
|
+
"bg-default": DesignToken;
|
|
32
|
+
border: DesignToken;
|
|
33
|
+
pattern: DesignToken;
|
|
34
|
+
};
|
|
35
|
+
green: {
|
|
36
|
+
"bg-alt": DesignToken;
|
|
37
|
+
"bg-default": DesignToken;
|
|
38
|
+
border: DesignToken;
|
|
39
|
+
pattern: DesignToken;
|
|
40
|
+
};
|
|
41
|
+
orange: {
|
|
42
|
+
"bg-alt": DesignToken;
|
|
43
|
+
"bg-default": DesignToken;
|
|
44
|
+
border: DesignToken;
|
|
45
|
+
pattern: DesignToken;
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
donut: {
|
|
49
|
+
gray: {
|
|
50
|
+
"bg-alt": DesignToken;
|
|
51
|
+
"bg-default": DesignToken;
|
|
52
|
+
border: DesignToken;
|
|
53
|
+
pattern: DesignToken;
|
|
54
|
+
};
|
|
55
|
+
green: {
|
|
56
|
+
"bg-alt": DesignToken;
|
|
57
|
+
"bg-default": DesignToken;
|
|
58
|
+
border: DesignToken;
|
|
59
|
+
pattern: DesignToken;
|
|
60
|
+
};
|
|
61
|
+
orange: {
|
|
62
|
+
"bg-alt": DesignToken;
|
|
63
|
+
"bg-default": DesignToken;
|
|
64
|
+
border: DesignToken;
|
|
65
|
+
pattern: DesignToken;
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
};
|
|
23
69
|
generic: {
|
|
24
70
|
"label-alt": DesignToken;
|
|
25
71
|
"label-default": DesignToken;
|
|
@@ -1,7 +1,33 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
|
+
module.exports.datavizChartLineBgDefault = "var(--mode-color-colorcode-green-deep)";
|
|
6
|
+
module.exports.datavizChartLineBorder = "var(--mode-color-colorcode-green-deep)";
|
|
7
|
+
module.exports.datavizChartBarGrayBgAlt = "var(--mode-color-colorcode-gray-muted)";
|
|
8
|
+
module.exports.datavizChartBarGrayBgDefault = "var(--mode-color-colorcode-gray-severe)";
|
|
9
|
+
module.exports.datavizChartBarGrayBorder = "var(--mode-color-colorcode-gray-severe)";
|
|
10
|
+
module.exports.datavizChartBarGrayPattern = "var(--mode-color-colorcode-gray-severe)";
|
|
11
|
+
module.exports.datavizChartBarGreenBgAlt = "var(--mode-color-colorcode-green-muted)";
|
|
12
|
+
module.exports.datavizChartBarGreenBgDefault = "var(--mode-color-colorcode-green-deep)";
|
|
13
|
+
module.exports.datavizChartBarGreenBorder = "var(--mode-color-colorcode-green-deep)";
|
|
14
|
+
module.exports.datavizChartBarGreenPattern = "var(--mode-color-colorcode-green-deep)";
|
|
15
|
+
module.exports.datavizChartBarOrangeBgAlt = "var(--mode-color-colorcode-orange-muted)";
|
|
16
|
+
module.exports.datavizChartBarOrangeBgDefault = "var(--mode-color-colorcode-orange-deep)";
|
|
17
|
+
module.exports.datavizChartBarOrangeBorder = "var(--mode-color-colorcode-orange-deep)";
|
|
18
|
+
module.exports.datavizChartBarOrangePattern = "var(--mode-color-colorcode-orange-deep)";
|
|
19
|
+
module.exports.datavizChartDonutGrayBgAlt = "var(--mode-color-colorcode-gray-muted)";
|
|
20
|
+
module.exports.datavizChartDonutGrayBgDefault = "var(--mode-color-colorcode-gray-severe)";
|
|
21
|
+
module.exports.datavizChartDonutGrayBorder = "var(--mode-color-colorcode-gray-severe)";
|
|
22
|
+
module.exports.datavizChartDonutGrayPattern = "var(--mode-color-colorcode-gray-severe)";
|
|
23
|
+
module.exports.datavizChartDonutGreenBgAlt = "var(--mode-color-colorcode-green-muted)";
|
|
24
|
+
module.exports.datavizChartDonutGreenBgDefault = "var(--mode-color-colorcode-green-deep)";
|
|
25
|
+
module.exports.datavizChartDonutGreenBorder = "var(--mode-color-colorcode-green-deep)";
|
|
26
|
+
module.exports.datavizChartDonutGreenPattern = "var(--mode-color-colorcode-green-deep)";
|
|
27
|
+
module.exports.datavizChartDonutOrangeBgAlt = "var(--mode-color-colorcode-orange-muted)";
|
|
28
|
+
module.exports.datavizChartDonutOrangeBgDefault = "var(--mode-color-colorcode-orange-deep)";
|
|
29
|
+
module.exports.datavizChartDonutOrangeBorder = "var(--mode-color-colorcode-orange-deep)";
|
|
30
|
+
module.exports.datavizChartDonutOrangePattern = "var(--mode-color-colorcode-orange-deep)";
|
|
5
31
|
module.exports.datavizGenericLabelAlt = "var(--mode-color-generic-txt-inverse-extreme)";
|
|
6
32
|
module.exports.datavizGenericLabelDefault = "var(--mode-color-generic-txt-extreme)";
|
|
7
33
|
module.exports.datavizGenericBlueBgAlt = "var(--mode-color-colorcode-blue-deep)";
|
package/js/common/dark.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Copyright ©
|
|
2
|
+
* Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
/**
|
|
@@ -90,6 +90,7 @@ declare const tokens: {
|
|
|
90
90
|
muted: DesignToken;
|
|
91
91
|
};
|
|
92
92
|
gray: {
|
|
93
|
+
severe: DesignToken;
|
|
93
94
|
deep: DesignToken;
|
|
94
95
|
muted: DesignToken;
|
|
95
96
|
};
|