@sage/design-tokens 17.4.0 → 17.5.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 (23) hide show
  1. package/css/components/dataviz.css +26 -0
  2. package/css/components/link.css +1 -1
  3. package/css/dark.css +3 -2
  4. package/css/light.css +3 -3
  5. package/js/common/components/dataviz.d.ts +46 -0
  6. package/js/common/components/dataviz.js +26 -0
  7. package/js/common/dark.d.ts +1 -0
  8. package/js/common/dark.js +3 -2
  9. package/js/common/light.d.ts +1 -1
  10. package/js/common/light.js +3 -3
  11. package/js/es6/components/dataviz.d.ts +26 -0
  12. package/js/es6/components/dataviz.js +26 -0
  13. package/js/es6/dark.d.ts +1 -0
  14. package/js/es6/dark.js +3 -2
  15. package/js/es6/light.d.ts +2 -3
  16. package/js/es6/light.js +4 -4
  17. package/json/components/dataviz.json +26 -0
  18. package/json/dark.json +3 -2
  19. package/json/light.json +3 -3
  20. package/package.json +1 -1
  21. package/scss/components/dataviz.scss +26 -0
  22. package/scss/dark.scss +3 -2
  23. package/scss/light.scss +3 -3
package/css/components/dataviz.css CHANGED
@@ -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/link.css CHANGED
@@ -16,7 +16,7 @@
16
16
  --link-typical-inverse-label-default: var(--mode-color-action-main-inverse-default-alt2);
17
17
  --link-typical-inverse-label-hover: var(--mode-color-action-main-inverse-hover-alt2);
18
18
  --link-subtle-label-hover: var(--mode-color-action-grayscale-active);
19
+ --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
19
20
  --link-subtle-inverse-label-hover: var(--mode-color-action-grayscale-inverse-active);
20
21
  --link-subtle-label-default: var(--mode-color-action-grayscale-default);
21
- --link-subtle-inverse-label-default: var(--mode-color-action-grayscale-inverse-default);
22
22
  }
package/css/dark.css CHANGED
@@ -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-deep: #7c7c7c;
48
- --mode-color-colorcode-gray-muted: #181818;
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/light.css CHANGED
@@ -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-deep: #6f6f6f;
48
- --mode-color-colorcode-gray-muted: #eeeeee;
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/common/components/dataviz.d.ts CHANGED
@@ -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;
package/js/common/components/dataviz.js CHANGED
@@ -2,6 +2,32 @@
2
2
  * Copyright © 2025 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
@@ -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
  };
package/js/common/dark.js CHANGED
@@ -39,8 +39,9 @@ module.exports.modeColorColorcodePurpleDeep = "#9463d7";
39
39
  module.exports.modeColorColorcodePurpleMuted = "#220c3a";
40
40
  module.exports.modeColorColorcodeSlateDeep = "#6b7f8d";
41
41
  module.exports.modeColorColorcodeSlateMuted = "#101a20";
42
- module.exports.modeColorColorcodeGrayDeep = "#7c7c7c";
43
- module.exports.modeColorColorcodeGrayMuted = "#181818";
42
+ module.exports.modeColorColorcodeGraySevere = "#e8eaec";
43
+ module.exports.modeColorColorcodeGrayDeep = "#a3adb5";
44
+ module.exports.modeColorColorcodeGrayMuted = "#253b4e";
44
45
  module.exports.modeColorGenericBgNought = "#000000";
45
46
  module.exports.modeColorGenericBgFaint = "#ffffff0d";
46
47
  module.exports.modeColorGenericBgDelicate = "#ffffff1a";
package/js/common/light.d.ts CHANGED
@@ -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
  };
@@ -132,7 +133,6 @@ declare const tokens: {
132
133
  soft: DesignToken;
133
134
  delicate: DesignToken;
134
135
  faint: DesignToken;
135
- "faint-copy": DesignToken;
136
136
  nought: DesignToken;
137
137
  };
138
138
  };
package/js/common/light.js CHANGED
@@ -39,8 +39,9 @@ module.exports.modeColorColorcodePurpleDeep = "#8f4bd7";
39
39
  module.exports.modeColorColorcodePurpleMuted = "#F3EBFE";
40
40
  module.exports.modeColorColorcodeSlateDeep = "#527386";
41
41
  module.exports.modeColorColorcodeSlateMuted = "#e4eff5";
42
- module.exports.modeColorColorcodeGrayDeep = "#6f6f6f";
43
- module.exports.modeColorColorcodeGrayMuted = "#eeeeee";
42
+ module.exports.modeColorColorcodeGraySevere = "#304658";
43
+ module.exports.modeColorColorcodeGrayDeep = "#6a7986";
44
+ module.exports.modeColorColorcodeGrayMuted = "#e8eaec";
44
45
  module.exports.modeColorGenericBgNought = "#FFFFFF";
45
46
  module.exports.modeColorGenericBgFaint = "#f4f5f6";
46
47
  module.exports.modeColorGenericBgDelicate = "#e8eaec";
@@ -72,7 +73,6 @@ module.exports.modeColorGenericTxtInverseModerate = "#ffffffab";
72
73
  module.exports.modeColorGenericTxtInverseSoft = "#ffffff8c";
73
74
  module.exports.modeColorGenericTxtInverseDelicate = "#ffffff6b";
74
75
  module.exports.modeColorGenericTxtInverseFaint = "#ffffff4d";
75
- module.exports.modeColorGenericTxtInverseFaintCopy = "#ffffff4d";
76
76
  module.exports.modeColorGenericTxtInverseNought = "#000000";
77
77
  module.exports.modeColorGenericFgNought = "#FFFFFF";
78
78
  module.exports.modeColorGenericFgDelicate = "#e8eaec";
package/js/es6/components/dataviz.d.ts CHANGED
@@ -6,6 +6,32 @@
6
6
  * Do not edit directly, this file was auto-generated.
7
7
  */
8
8
 
9
+ export const datavizChartLineBgDefault: string;
10
+ export const datavizChartLineBorder: string;
11
+ export const datavizChartBarGrayBgAlt: string;
12
+ export const datavizChartBarGrayBgDefault: string;
13
+ export const datavizChartBarGrayBorder: string;
14
+ export const datavizChartBarGrayPattern: string;
15
+ export const datavizChartBarGreenBgAlt: string;
16
+ export const datavizChartBarGreenBgDefault: string;
17
+ export const datavizChartBarGreenBorder: string;
18
+ export const datavizChartBarGreenPattern: string;
19
+ export const datavizChartBarOrangeBgAlt: string;
20
+ export const datavizChartBarOrangeBgDefault: string;
21
+ export const datavizChartBarOrangeBorder: string;
22
+ export const datavizChartBarOrangePattern: string;
23
+ export const datavizChartDonutGrayBgAlt: string;
24
+ export const datavizChartDonutGrayBgDefault: string;
25
+ export const datavizChartDonutGrayBorder: string;
26
+ export const datavizChartDonutGrayPattern: string;
27
+ export const datavizChartDonutGreenBgAlt: string;
28
+ export const datavizChartDonutGreenBgDefault: string;
29
+ export const datavizChartDonutGreenBorder: string;
30
+ export const datavizChartDonutGreenPattern: string;
31
+ export const datavizChartDonutOrangeBgAlt: string;
32
+ export const datavizChartDonutOrangeBgDefault: string;
33
+ export const datavizChartDonutOrangeBorder: string;
34
+ export const datavizChartDonutOrangePattern: string;
9
35
  /** Accessible on colorpicker bg-alt colors. */
10
36
  export const datavizGenericLabelAlt: string;
11
37
  /** Accessible on colorpicker bg-default colors. */
package/js/es6/components/dataviz.js CHANGED
@@ -2,6 +2,32 @@
2
2
  * Copyright © 2025 The Sage Group plc or its licensors. All Rights reserved
3
3
  */
4
4
 
5
+ export const datavizChartLineBgDefault = "var(--mode-color-colorcode-green-deep)";
6
+ export const datavizChartLineBorder = "var(--mode-color-colorcode-green-deep)";
7
+ export const datavizChartBarGrayBgAlt = "var(--mode-color-colorcode-gray-muted)";
8
+ export const datavizChartBarGrayBgDefault = "var(--mode-color-colorcode-gray-severe)";
9
+ export const datavizChartBarGrayBorder = "var(--mode-color-colorcode-gray-severe)";
10
+ export const datavizChartBarGrayPattern = "var(--mode-color-colorcode-gray-severe)";
11
+ export const datavizChartBarGreenBgAlt = "var(--mode-color-colorcode-green-muted)";
12
+ export const datavizChartBarGreenBgDefault = "var(--mode-color-colorcode-green-deep)";
13
+ export const datavizChartBarGreenBorder = "var(--mode-color-colorcode-green-deep)";
14
+ export const datavizChartBarGreenPattern = "var(--mode-color-colorcode-green-deep)";
15
+ export const datavizChartBarOrangeBgAlt = "var(--mode-color-colorcode-orange-muted)";
16
+ export const datavizChartBarOrangeBgDefault = "var(--mode-color-colorcode-orange-deep)";
17
+ export const datavizChartBarOrangeBorder = "var(--mode-color-colorcode-orange-deep)";
18
+ export const datavizChartBarOrangePattern = "var(--mode-color-colorcode-orange-deep)";
19
+ export const datavizChartDonutGrayBgAlt = "var(--mode-color-colorcode-gray-muted)";
20
+ export const datavizChartDonutGrayBgDefault = "var(--mode-color-colorcode-gray-severe)";
21
+ export const datavizChartDonutGrayBorder = "var(--mode-color-colorcode-gray-severe)";
22
+ export const datavizChartDonutGrayPattern = "var(--mode-color-colorcode-gray-severe)";
23
+ export const datavizChartDonutGreenBgAlt = "var(--mode-color-colorcode-green-muted)";
24
+ export const datavizChartDonutGreenBgDefault = "var(--mode-color-colorcode-green-deep)";
25
+ export const datavizChartDonutGreenBorder = "var(--mode-color-colorcode-green-deep)";
26
+ export const datavizChartDonutGreenPattern = "var(--mode-color-colorcode-green-deep)";
27
+ export const datavizChartDonutOrangeBgAlt = "var(--mode-color-colorcode-orange-muted)";
28
+ export const datavizChartDonutOrangeBgDefault = "var(--mode-color-colorcode-orange-deep)";
29
+ export const datavizChartDonutOrangeBorder = "var(--mode-color-colorcode-orange-deep)";
30
+ export const datavizChartDonutOrangePattern = "var(--mode-color-colorcode-orange-deep)";
5
31
  export const datavizGenericLabelAlt = "var(--mode-color-generic-txt-inverse-extreme)";
6
32
  export const datavizGenericLabelDefault = "var(--mode-color-generic-txt-extreme)";
7
33
  export const datavizGenericBlueBgAlt = "var(--mode-color-colorcode-blue-deep)";
package/js/es6/dark.d.ts CHANGED
@@ -44,6 +44,7 @@ export const modeColorColorcodePurpleDeep: string;
44
44
  export const modeColorColorcodePurpleMuted: string;
45
45
  export const modeColorColorcodeSlateDeep: string;
46
46
  export const modeColorColorcodeSlateMuted: string;
47
+ export const modeColorColorcodeGraySevere: string;
47
48
  export const modeColorColorcodeGrayDeep: string;
48
49
  export const modeColorColorcodeGrayMuted: string;
49
50
  export const modeColorGenericBgNought: string;
package/js/es6/dark.js CHANGED
@@ -43,8 +43,9 @@ export const modeColorColorcodePurpleDeep = "#9463d7";
43
43
  export const modeColorColorcodePurpleMuted = "#220c3a";
44
44
  export const modeColorColorcodeSlateDeep = "#6b7f8d";
45
45
  export const modeColorColorcodeSlateMuted = "#101a20";
46
- export const modeColorColorcodeGrayDeep = "#7c7c7c";
47
- export const modeColorColorcodeGrayMuted = "#181818";
46
+ export const modeColorColorcodeGraySevere = "#e8eaec";
47
+ export const modeColorColorcodeGrayDeep = "#a3adb5";
48
+ export const modeColorColorcodeGrayMuted = "#253b4e";
48
49
  export const modeColorGenericBgNought = "#000000";
49
50
  export const modeColorGenericBgFaint = "#ffffff0d";
50
51
  export const modeColorGenericBgDelicate = "#ffffff1a";
package/js/es6/light.d.ts CHANGED
@@ -44,6 +44,7 @@ export const modeColorColorcodePurpleDeep: string;
44
44
  export const modeColorColorcodePurpleMuted: string;
45
45
  export const modeColorColorcodeSlateDeep: string;
46
46
  export const modeColorColorcodeSlateMuted: string;
47
+ export const modeColorColorcodeGraySevere: string;
47
48
  export const modeColorColorcodeGrayDeep: string;
48
49
  export const modeColorColorcodeGrayMuted: string;
49
50
  export const modeColorGenericBgNought: string;
@@ -92,10 +93,8 @@ export const modeColorGenericTxtInverseModerate: string;
92
93
  export const modeColorGenericTxtInverseSoft: string;
93
94
  /** accessible OBJECT against white. */
94
95
  export const modeColorGenericTxtInverseDelicate: string;
95
- /** Used for disabled txt */
96
- export const modeColorGenericTxtInverseFaint: string;
97
96
  /** deprecation candidate */
98
- export const modeColorGenericTxtInverseFaintCopy: string;
97
+ export const modeColorGenericTxtInverseFaint: string;
99
98
  /** deprecation candidate */
100
99
  export const modeColorGenericTxtInverseNought: string;
101
100
  export const modeColorGenericFgNought: string;
package/js/es6/light.js CHANGED
@@ -43,8 +43,9 @@ export const modeColorColorcodePurpleDeep = "#8f4bd7";
43
43
  export const modeColorColorcodePurpleMuted = "#F3EBFE";
44
44
  export const modeColorColorcodeSlateDeep = "#527386";
45
45
  export const modeColorColorcodeSlateMuted = "#e4eff5";
46
- export const modeColorColorcodeGrayDeep = "#6f6f6f";
47
- export const modeColorColorcodeGrayMuted = "#eeeeee";
46
+ export const modeColorColorcodeGraySevere = "#304658";
47
+ export const modeColorColorcodeGrayDeep = "#6a7986";
48
+ export const modeColorColorcodeGrayMuted = "#e8eaec";
48
49
  export const modeColorGenericBgNought = "#FFFFFF";
49
50
  export const modeColorGenericBgFaint = "#f4f5f6";
50
51
  export const modeColorGenericBgDelicate = "#e8eaec";
@@ -75,8 +76,7 @@ export const modeColorGenericTxtInverseSevere = "#fffffff2";
75
76
  export const modeColorGenericTxtInverseModerate = "#ffffffab";
76
77
  export const modeColorGenericTxtInverseSoft = "#ffffff8c"; // was 0.5. Increased to 0.55 so that we can use this for hint txt etc too, and still be accessible.
77
78
  export const modeColorGenericTxtInverseDelicate = "#ffffff6b"; // accessible OBJECT against white.
78
- export const modeColorGenericTxtInverseFaint = "#ffffff4d"; // Used for disabled txt
79
- export const modeColorGenericTxtInverseFaintCopy = "#ffffff4d"; // deprecation candidate
79
+ export const modeColorGenericTxtInverseFaint = "#ffffff4d"; // deprecation candidate
80
80
  export const modeColorGenericTxtInverseNought = "#000000"; // deprecation candidate
81
81
  export const modeColorGenericFgNought = "#FFFFFF";
82
82
  export const modeColorGenericFgDelicate = "#e8eaec"; // used for dividers
package/json/components/dataviz.json CHANGED
@@ -1,4 +1,30 @@
1
1
  {
2
+ "datavizChartLineBgDefault": "var(--mode-color-colorcode-green-deep)",
3
+ "datavizChartLineBorder": "var(--mode-color-colorcode-green-deep)",
4
+ "datavizChartBarGrayBgAlt": "var(--mode-color-colorcode-gray-muted)",
5
+ "datavizChartBarGrayBgDefault": "var(--mode-color-colorcode-gray-severe)",
6
+ "datavizChartBarGrayBorder": "var(--mode-color-colorcode-gray-severe)",
7
+ "datavizChartBarGrayPattern": "var(--mode-color-colorcode-gray-severe)",
8
+ "datavizChartBarGreenBgAlt": "var(--mode-color-colorcode-green-muted)",
9
+ "datavizChartBarGreenBgDefault": "var(--mode-color-colorcode-green-deep)",
10
+ "datavizChartBarGreenBorder": "var(--mode-color-colorcode-green-deep)",
11
+ "datavizChartBarGreenPattern": "var(--mode-color-colorcode-green-deep)",
12
+ "datavizChartBarOrangeBgAlt": "var(--mode-color-colorcode-orange-muted)",
13
+ "datavizChartBarOrangeBgDefault": "var(--mode-color-colorcode-orange-deep)",
14
+ "datavizChartBarOrangeBorder": "var(--mode-color-colorcode-orange-deep)",
15
+ "datavizChartBarOrangePattern": "var(--mode-color-colorcode-orange-deep)",
16
+ "datavizChartDonutGrayBgAlt": "var(--mode-color-colorcode-gray-muted)",
17
+ "datavizChartDonutGrayBgDefault": "var(--mode-color-colorcode-gray-severe)",
18
+ "datavizChartDonutGrayBorder": "var(--mode-color-colorcode-gray-severe)",
19
+ "datavizChartDonutGrayPattern": "var(--mode-color-colorcode-gray-severe)",
20
+ "datavizChartDonutGreenBgAlt": "var(--mode-color-colorcode-green-muted)",
21
+ "datavizChartDonutGreenBgDefault": "var(--mode-color-colorcode-green-deep)",
22
+ "datavizChartDonutGreenBorder": "var(--mode-color-colorcode-green-deep)",
23
+ "datavizChartDonutGreenPattern": "var(--mode-color-colorcode-green-deep)",
24
+ "datavizChartDonutOrangeBgAlt": "var(--mode-color-colorcode-orange-muted)",
25
+ "datavizChartDonutOrangeBgDefault": "var(--mode-color-colorcode-orange-deep)",
26
+ "datavizChartDonutOrangeBorder": "var(--mode-color-colorcode-orange-deep)",
27
+ "datavizChartDonutOrangePattern": "var(--mode-color-colorcode-orange-deep)",
2
28
  "datavizGenericLabelAlt": "var(--mode-color-generic-txt-inverse-extreme)",
3
29
  "datavizGenericLabelDefault": "var(--mode-color-generic-txt-extreme)",
4
30
  "datavizGenericBlueBgAlt": "var(--mode-color-colorcode-blue-deep)",
package/json/dark.json CHANGED
@@ -36,8 +36,9 @@
36
36
  "modeColorColorcodePurpleMuted": "#220c3a",
37
37
  "modeColorColorcodeSlateDeep": "#6b7f8d",
38
38
  "modeColorColorcodeSlateMuted": "#101a20",
39
- "modeColorColorcodeGrayDeep": "#7c7c7c",
40
- "modeColorColorcodeGrayMuted": "#181818",
39
+ "modeColorColorcodeGraySevere": "#e8eaec",
40
+ "modeColorColorcodeGrayDeep": "#a3adb5",
41
+ "modeColorColorcodeGrayMuted": "#253b4e",
41
42
  "modeColorGenericBgNought": "#000000",
42
43
  "modeColorGenericBgFaint": "#ffffff0d",
43
44
  "modeColorGenericBgDelicate": "#ffffff1a",
package/json/light.json CHANGED
@@ -36,8 +36,9 @@
36
36
  "modeColorColorcodePurpleMuted": "#F3EBFE",
37
37
  "modeColorColorcodeSlateDeep": "#527386",
38
38
  "modeColorColorcodeSlateMuted": "#e4eff5",
39
- "modeColorColorcodeGrayDeep": "#6f6f6f",
40
- "modeColorColorcodeGrayMuted": "#eeeeee",
39
+ "modeColorColorcodeGraySevere": "#304658",
40
+ "modeColorColorcodeGrayDeep": "#6a7986",
41
+ "modeColorColorcodeGrayMuted": "#e8eaec",
41
42
  "modeColorGenericBgNought": "#FFFFFF",
42
43
  "modeColorGenericBgFaint": "#f4f5f6",
43
44
  "modeColorGenericBgDelicate": "#e8eaec",
@@ -69,7 +70,6 @@
69
70
  "modeColorGenericTxtInverseSoft": "#ffffff8c",
70
71
  "modeColorGenericTxtInverseDelicate": "#ffffff6b",
71
72
  "modeColorGenericTxtInverseFaint": "#ffffff4d",
72
- "modeColorGenericTxtInverseFaintCopy": "#ffffff4d",
73
73
  "modeColorGenericTxtInverseNought": "#000000",
74
74
  "modeColorGenericFgNought": "#FFFFFF",
75
75
  "modeColorGenericFgDelicate": "#e8eaec",
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": "17.4.0",
9
+ "version": "17.5.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/dataviz.scss CHANGED
@@ -3,6 +3,32 @@
3
3
 
4
4
  // Do not edit directly, this file was auto-generated.
5
5
 
6
+ $dataviz-chart-line-bg-default: $mode-color-colorcode-green-deep;
7
+ $dataviz-chart-line-border: $mode-color-colorcode-green-deep;
8
+ $dataviz-chart-bar-gray-bg-alt: $mode-color-colorcode-gray-muted;
9
+ $dataviz-chart-bar-gray-bg-default: $mode-color-colorcode-gray-severe;
10
+ $dataviz-chart-bar-gray-border: $mode-color-colorcode-gray-severe;
11
+ $dataviz-chart-bar-gray-pattern: $mode-color-colorcode-gray-severe;
12
+ $dataviz-chart-bar-green-bg-alt: $mode-color-colorcode-green-muted;
13
+ $dataviz-chart-bar-green-bg-default: $mode-color-colorcode-green-deep;
14
+ $dataviz-chart-bar-green-border: $mode-color-colorcode-green-deep;
15
+ $dataviz-chart-bar-green-pattern: $mode-color-colorcode-green-deep;
16
+ $dataviz-chart-bar-orange-bg-alt: $mode-color-colorcode-orange-muted;
17
+ $dataviz-chart-bar-orange-bg-default: $mode-color-colorcode-orange-deep;
18
+ $dataviz-chart-bar-orange-border: $mode-color-colorcode-orange-deep;
19
+ $dataviz-chart-bar-orange-pattern: $mode-color-colorcode-orange-deep;
20
+ $dataviz-chart-donut-gray-bg-alt: $mode-color-colorcode-gray-muted;
21
+ $dataviz-chart-donut-gray-bg-default: $mode-color-colorcode-gray-severe;
22
+ $dataviz-chart-donut-gray-border: $mode-color-colorcode-gray-severe;
23
+ $dataviz-chart-donut-gray-pattern: $mode-color-colorcode-gray-severe;
24
+ $dataviz-chart-donut-green-bg-alt: $mode-color-colorcode-green-muted;
25
+ $dataviz-chart-donut-green-bg-default: $mode-color-colorcode-green-deep;
26
+ $dataviz-chart-donut-green-border: $mode-color-colorcode-green-deep;
27
+ $dataviz-chart-donut-green-pattern: $mode-color-colorcode-green-deep;
28
+ $dataviz-chart-donut-orange-bg-alt: $mode-color-colorcode-orange-muted;
29
+ $dataviz-chart-donut-orange-bg-default: $mode-color-colorcode-orange-deep;
30
+ $dataviz-chart-donut-orange-border: $mode-color-colorcode-orange-deep;
31
+ $dataviz-chart-donut-orange-pattern: $mode-color-colorcode-orange-deep;
6
32
  $dataviz-generic-label-alt: $mode-color-generic-txt-inverse-extreme;
7
33
  $dataviz-generic-label-default: $mode-color-generic-txt-extreme;
8
34
  $dataviz-generic-blue-bg-alt: $mode-color-colorcode-blue-deep;
package/scss/dark.scss CHANGED
@@ -40,8 +40,9 @@ $mode-color-colorcode-purple-deep: #9463d7;
40
40
  $mode-color-colorcode-purple-muted: #220c3a;
41
41
  $mode-color-colorcode-slate-deep: #6b7f8d;
42
42
  $mode-color-colorcode-slate-muted: #101a20;
43
- $mode-color-colorcode-gray-deep: #7c7c7c;
44
- $mode-color-colorcode-gray-muted: #181818;
43
+ $mode-color-colorcode-gray-severe: #e8eaec;
44
+ $mode-color-colorcode-gray-deep: #a3adb5;
45
+ $mode-color-colorcode-gray-muted: #253b4e;
45
46
  $mode-color-generic-bg-nought: #000000;
46
47
  $mode-color-generic-bg-faint: #ffffff0d;
47
48
  $mode-color-generic-bg-delicate: #ffffff1a;
package/scss/light.scss CHANGED
@@ -40,8 +40,9 @@ $mode-color-colorcode-purple-deep: #8f4bd7;
40
40
  $mode-color-colorcode-purple-muted: #F3EBFE;
41
41
  $mode-color-colorcode-slate-deep: #527386;
42
42
  $mode-color-colorcode-slate-muted: #e4eff5;
43
- $mode-color-colorcode-gray-deep: #6f6f6f;
44
- $mode-color-colorcode-gray-muted: #eeeeee;
43
+ $mode-color-colorcode-gray-severe: #304658;
44
+ $mode-color-colorcode-gray-deep: #6a7986;
45
+ $mode-color-colorcode-gray-muted: #e8eaec;
45
46
  $mode-color-generic-bg-nought: #FFFFFF;
46
47
  $mode-color-generic-bg-faint: #f4f5f6;
47
48
  $mode-color-generic-bg-delicate: #e8eaec;
@@ -73,7 +74,6 @@ $mode-color-generic-txt-inverse-moderate: #ffffffab;
73
74
  $mode-color-generic-txt-inverse-soft: #ffffff8c;
74
75
  $mode-color-generic-txt-inverse-delicate: #ffffff6b;
75
76
  $mode-color-generic-txt-inverse-faint: #ffffff4d;
76
- $mode-color-generic-txt-inverse-faint-copy: #ffffff4d;
77
77
  $mode-color-generic-txt-inverse-nought: #000000;
78
78
  $mode-color-generic-fg-nought: #FFFFFF;
79
79
  $mode-color-generic-fg-delicate: #e8eaec;