@sage/design-tokens 18.8.0 → 18.9.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.
Files changed (19) hide show
  1. package/css/components/page.css +18 -2
  2. package/css/components/pill.css +3 -3
  3. package/css/dark.css +1 -1
  4. package/css/light-all.css +21 -5
  5. package/js/common/components/page.d.ts +30 -2
  6. package/js/common/components/page.js +18 -2
  7. package/js/common/components/pill.js +3 -3
  8. package/js/common/dark.js +1 -1
  9. package/js/es6/components/page.d.ts +24 -3
  10. package/js/es6/components/page.js +18 -2
  11. package/js/es6/components/pill.js +3 -3
  12. package/js/es6/dark.js +1 -1
  13. package/json/components/page.json +19 -3
  14. package/json/components/pill.json +3 -3
  15. package/json/dark.json +1 -1
  16. package/package.json +1 -1
  17. package/scss/components/page.scss +18 -2
  18. package/scss/components/pill.scss +3 -3
  19. package/scss/dark.scss +1 -1
package/css/components/page.css CHANGED
@@ -7,8 +7,24 @@
7
7
  */
8
8
 
9
9
  :root {
10
- --page-bg-default: var(--mode-color-generic-surface-nought);
11
10
  --page-bg-alt: var(--mode-color-generic-surface-trace);
12
- --page-txt-alt: var(--mode-color-generic-txt-moderate);
11
+ --page-bg-default: var(--mode-color-generic-surface-nought);
12
+ --page-content-caution-icon: var(--mode-color-status-warning-default);
13
+ --page-content-caution-txt: var(--mode-color-status-warning-txt);
14
+ --page-content-info-icon: var(--mode-color-status-info-default);
15
+ --page-content-info-txt: var(--mode-color-status-info-default);
16
+ --page-content-negative-icon: var(--mode-color-status-negative-default);
17
+ --page-content-negative-txt: var(--mode-color-status-negative-default);
18
+ --page-content-positive-icon: var(--mode-color-status-positive-default);
19
+ --page-content-positive-txt: var(--mode-color-status-positive-default);
20
+ --page-icon-default: var(--mode-color-generic-txt-severe);
13
21
  --page-txt-default: var(--mode-color-generic-txt-severe);
22
+ --page-content-icon-alt: var(--mode-color-generic-txt-moderate);
23
+ --page-content-icon-default: var(--mode-color-generic-txt-severe);
24
+ --page-content-txt-alt: var(--mode-color-generic-txt-moderate);
25
+ --page-content-txt-default: var(--mode-color-generic-txt-severe);
26
+ --page-content-inverse-icon-alt: var(--mode-color-generic-txt-inverse-moderate);
27
+ --page-content-inverse-icon-default: var(--mode-color-generic-txt-inverse-severe);
28
+ --page-content-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);
29
+ --page-content-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);
14
30
  }
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/light-all.css CHANGED
@@ -700,11 +700,11 @@
700
700
  --pill-purple-bg-alt-hover: var(--mode-color-status-priority-hover-alt);
701
701
  --pill-purple-bg-hover: var(--mode-color-status-priority-hover);
702
702
  --pill-purple-border-default: var(--mode-color-status-priority-default);
703
- --pill-purple-inverse-bg-default: var(--mode-color-status-priority-default);
703
+ --pill-purple-inverse-bg-default: var(--mode-color-status-priority-inverse-default);
704
704
  --pill-purple-inverse-bg-alt-default: var(--mode-color-status-priority-inverse-default-alt);
705
705
  --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);
706
+ --pill-purple-inverse-bg-hover: var(--mode-color-status-priority-inverse-hover);
707
+ --pill-purple-inverse-border-default: var(--mode-color-status-priority-inverse-default);
708
708
  --pill-red-bg-default: var(--mode-color-status-negative-default);
709
709
  --pill-red-bg-alt-default: var(--mode-color-status-negative-default-alt);
710
710
  --pill-red-bg-alt-hover: var(--mode-color-status-negative-hover-alt);
@@ -733,10 +733,26 @@
733
733
  --pill-generic-inverse-label-alt-hover: var(--mode-color-status-txt-inverse-with-default-alt);
734
734
  --pill-generic-label-alt-default: var(--mode-color-status-txt-with-default-alt);
735
735
  --pill-generic-label-alt-hover: var(--mode-color-status-txt-with-default-alt);
736
- --page-bg-default: var(--mode-color-generic-surface-nought);
737
736
  --page-bg-alt: var(--mode-color-generic-surface-trace);
738
- --page-txt-alt: var(--mode-color-generic-txt-moderate);
737
+ --page-bg-default: var(--mode-color-generic-surface-nought);
738
+ --page-content-caution-icon: var(--mode-color-status-warning-default);
739
+ --page-content-caution-txt: var(--mode-color-status-warning-txt);
740
+ --page-content-info-icon: var(--mode-color-status-info-default);
741
+ --page-content-info-txt: var(--mode-color-status-info-default);
742
+ --page-content-negative-icon: var(--mode-color-status-negative-default);
743
+ --page-content-negative-txt: var(--mode-color-status-negative-default);
744
+ --page-content-positive-icon: var(--mode-color-status-positive-default);
745
+ --page-content-positive-txt: var(--mode-color-status-positive-default);
746
+ --page-icon-default: var(--mode-color-generic-txt-severe);
739
747
  --page-txt-default: var(--mode-color-generic-txt-severe);
748
+ --page-content-icon-alt: var(--mode-color-generic-txt-moderate);
749
+ --page-content-icon-default: var(--mode-color-generic-txt-severe);
750
+ --page-content-txt-alt: var(--mode-color-generic-txt-moderate);
751
+ --page-content-txt-default: var(--mode-color-generic-txt-severe);
752
+ --page-content-inverse-icon-alt: var(--mode-color-generic-txt-inverse-moderate);
753
+ --page-content-inverse-icon-default: var(--mode-color-generic-txt-inverse-severe);
754
+ --page-content-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);
755
+ --page-content-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);
740
756
  --nav-primary-bg-active: var(--mode-color-action-nav-active);
741
757
  --nav-primary-bg-default: var(--mode-color-generic-bg-inverse-nought);
742
758
  --nav-primary-bg-hover: var(--mode-color-action-nav-hover);
package/js/common/components/page.d.ts CHANGED
@@ -20,9 +20,37 @@ declare interface DesignToken {
20
20
 
21
21
  declare const tokens: {
22
22
  page: {
23
- "bg-default": DesignToken;
24
23
  "bg-alt": DesignToken;
25
- "txt-alt": DesignToken;
24
+ "bg-default": DesignToken;
25
+ "icon-default": DesignToken;
26
26
  "txt-default": DesignToken;
27
+ content: {
28
+ "icon-alt": DesignToken;
29
+ "icon-default": DesignToken;
30
+ "txt-alt": DesignToken;
31
+ "txt-default": DesignToken;
32
+ inverse: {
33
+ "icon-alt": DesignToken;
34
+ "icon-default": DesignToken;
35
+ "txt-alt": DesignToken;
36
+ "txt-default": DesignToken;
37
+ };
38
+ caution: {
39
+ icon: DesignToken;
40
+ txt: DesignToken;
41
+ };
42
+ info: {
43
+ icon: DesignToken;
44
+ txt: DesignToken;
45
+ };
46
+ negative: {
47
+ icon: DesignToken;
48
+ txt: DesignToken;
49
+ };
50
+ positive: {
51
+ icon: DesignToken;
52
+ txt: DesignToken;
53
+ };
54
+ };
27
55
  };
28
56
  };
package/js/common/components/page.js CHANGED
@@ -2,7 +2,23 @@
2
2
  * Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
3
3
  */
4
4
 
5
- module.exports.pageBgDefault = "var(--mode-color-generic-surface-nought)";
6
5
  module.exports.pageBgAlt = "var(--mode-color-generic-surface-trace)";
7
- module.exports.pageTxtAlt = "var(--mode-color-generic-txt-moderate)";
6
+ module.exports.pageBgDefault = "var(--mode-color-generic-surface-nought)";
7
+ module.exports.pageIconDefault = "var(--mode-color-generic-txt-severe)";
8
8
  module.exports.pageTxtDefault = "var(--mode-color-generic-txt-severe)";
9
+ module.exports.pageContentIconAlt = "var(--mode-color-generic-txt-moderate)";
10
+ module.exports.pageContentIconDefault = "var(--mode-color-generic-txt-severe)";
11
+ module.exports.pageContentTxtAlt = "var(--mode-color-generic-txt-moderate)";
12
+ module.exports.pageContentTxtDefault = "var(--mode-color-generic-txt-severe)";
13
+ module.exports.pageContentInverseIconAlt = "var(--mode-color-generic-txt-inverse-moderate)";
14
+ module.exports.pageContentInverseIconDefault = "var(--mode-color-generic-txt-inverse-severe)";
15
+ module.exports.pageContentInverseTxtAlt = "var(--mode-color-generic-txt-inverse-moderate)";
16
+ module.exports.pageContentInverseTxtDefault = "var(--mode-color-generic-txt-inverse-severe)";
17
+ module.exports.pageContentCautionIcon = "var(--mode-color-status-warning-default)";
18
+ module.exports.pageContentCautionTxt = "var(--mode-color-status-warning-txt)";
19
+ module.exports.pageContentInfoIcon = "var(--mode-color-status-info-default)";
20
+ module.exports.pageContentInfoTxt = "var(--mode-color-status-info-default)";
21
+ module.exports.pageContentNegativeIcon = "var(--mode-color-status-negative-default)";
22
+ module.exports.pageContentNegativeTxt = "var(--mode-color-status-negative-default)";
23
+ module.exports.pageContentPositiveIcon = "var(--mode-color-status-positive-default)";
24
+ module.exports.pageContentPositiveTxt = "var(--mode-color-status-positive-default)";
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/es6/components/page.d.ts CHANGED
@@ -6,9 +6,30 @@
6
6
  * Do not edit directly, this file was auto-generated.
7
7
  */
8
8
 
9
- export const pageBgDefault: string;
10
9
  export const pageBgAlt: string;
11
- /** for subheadings etc */
12
- export const pageTxtAlt: string;
10
+ export const pageBgDefault: string;
11
+ /** default color for standard icons */
12
+ export const pageIconDefault: string;
13
13
  /** for headings, paragraph txt etc */
14
14
  export const pageTxtDefault: string;
15
+ export const pageContentIconAlt: string;
16
+ /** default color for standard icons */
17
+ export const pageContentIconDefault: string;
18
+ /** for subheadings etc */
19
+ export const pageContentTxtAlt: string;
20
+ /** for headings, paragraph txt etc */
21
+ export const pageContentTxtDefault: string;
22
+ export const pageContentInverseIconAlt: string;
23
+ export const pageContentInverseIconDefault: string;
24
+ /** for subheadings etc */
25
+ export const pageContentInverseTxtAlt: string;
26
+ /** for headings, paragraph txt etc */
27
+ export const pageContentInverseTxtDefault: string;
28
+ export const pageContentCautionIcon: string;
29
+ export const pageContentCautionTxt: string;
30
+ export const pageContentInfoIcon: string;
31
+ export const pageContentInfoTxt: string;
32
+ export const pageContentNegativeIcon: string;
33
+ export const pageContentNegativeTxt: string;
34
+ export const pageContentPositiveIcon: string;
35
+ export const pageContentPositiveTxt: string;
package/js/es6/components/page.js CHANGED
@@ -2,7 +2,23 @@
2
2
  * Copyright © 2026 The Sage Group plc or its licensors. All Rights reserved
3
3
  */
4
4
 
5
- export const pageBgDefault = "var(--mode-color-generic-surface-nought)";
6
5
  export const pageBgAlt = "var(--mode-color-generic-surface-trace)";
7
- export const pageTxtAlt = "var(--mode-color-generic-txt-moderate)";
6
+ export const pageBgDefault = "var(--mode-color-generic-surface-nought)";
7
+ export const pageIconDefault = "var(--mode-color-generic-txt-severe)";
8
8
  export const pageTxtDefault = "var(--mode-color-generic-txt-severe)";
9
+ export const pageContentIconAlt = "var(--mode-color-generic-txt-moderate)";
10
+ export const pageContentIconDefault = "var(--mode-color-generic-txt-severe)";
11
+ export const pageContentTxtAlt = "var(--mode-color-generic-txt-moderate)";
12
+ export const pageContentTxtDefault = "var(--mode-color-generic-txt-severe)";
13
+ export const pageContentInverseIconAlt = "var(--mode-color-generic-txt-inverse-moderate)";
14
+ export const pageContentInverseIconDefault = "var(--mode-color-generic-txt-inverse-severe)";
15
+ export const pageContentInverseTxtAlt = "var(--mode-color-generic-txt-inverse-moderate)";
16
+ export const pageContentInverseTxtDefault = "var(--mode-color-generic-txt-inverse-severe)";
17
+ export const pageContentCautionIcon = "var(--mode-color-status-warning-default)";
18
+ export const pageContentCautionTxt = "var(--mode-color-status-warning-txt)";
19
+ export const pageContentInfoIcon = "var(--mode-color-status-info-default)";
20
+ export const pageContentInfoTxt = "var(--mode-color-status-info-default)";
21
+ export const pageContentNegativeIcon = "var(--mode-color-status-negative-default)";
22
+ export const pageContentNegativeTxt = "var(--mode-color-status-negative-default)";
23
+ export const pageContentPositiveIcon = "var(--mode-color-status-positive-default)";
24
+ export const pageContentPositiveTxt = "var(--mode-color-status-positive-default)";
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/json/components/page.json CHANGED
@@ -1,6 +1,22 @@
1
1
  {
2
- "pageBgDefault": "var(--mode-color-generic-surface-nought)",
3
2
  "pageBgAlt": "var(--mode-color-generic-surface-trace)",
4
- "pageTxtAlt": "var(--mode-color-generic-txt-moderate)",
5
- "pageTxtDefault": "var(--mode-color-generic-txt-severe)"
3
+ "pageBgDefault": "var(--mode-color-generic-surface-nought)",
4
+ "pageIconDefault": "var(--mode-color-generic-txt-severe)",
5
+ "pageTxtDefault": "var(--mode-color-generic-txt-severe)",
6
+ "pageContentIconAlt": "var(--mode-color-generic-txt-moderate)",
7
+ "pageContentIconDefault": "var(--mode-color-generic-txt-severe)",
8
+ "pageContentTxtAlt": "var(--mode-color-generic-txt-moderate)",
9
+ "pageContentTxtDefault": "var(--mode-color-generic-txt-severe)",
10
+ "pageContentInverseIconAlt": "var(--mode-color-generic-txt-inverse-moderate)",
11
+ "pageContentInverseIconDefault": "var(--mode-color-generic-txt-inverse-severe)",
12
+ "pageContentInverseTxtAlt": "var(--mode-color-generic-txt-inverse-moderate)",
13
+ "pageContentInverseTxtDefault": "var(--mode-color-generic-txt-inverse-severe)",
14
+ "pageContentCautionIcon": "var(--mode-color-status-warning-default)",
15
+ "pageContentCautionTxt": "var(--mode-color-status-warning-txt)",
16
+ "pageContentInfoIcon": "var(--mode-color-status-info-default)",
17
+ "pageContentInfoTxt": "var(--mode-color-status-info-default)",
18
+ "pageContentNegativeIcon": "var(--mode-color-status-negative-default)",
19
+ "pageContentNegativeTxt": "var(--mode-color-status-negative-default)",
20
+ "pageContentPositiveIcon": "var(--mode-color-status-positive-default)",
21
+ "pageContentPositiveTxt": "var(--mode-color-status-positive-default)"
6
22
  }
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/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.8.0",
9
+ "version": "18.9.1",
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/page.scss CHANGED
@@ -3,7 +3,23 @@
3
3
 
4
4
  // Do not edit directly, this file was auto-generated.
5
5
 
6
- $page-bg-default: $mode-color-generic-surface-nought;
7
6
  $page-bg-alt: $mode-color-generic-surface-trace;
8
- $page-txt-alt: $mode-color-generic-txt-moderate;
7
+ $page-bg-default: $mode-color-generic-surface-nought;
8
+ $page-content-caution-icon: $mode-color-status-warning-default;
9
+ $page-content-caution-txt: $mode-color-status-warning-txt;
10
+ $page-content-info-icon: $mode-color-status-info-default;
11
+ $page-content-info-txt: $mode-color-status-info-default;
12
+ $page-content-negative-icon: $mode-color-status-negative-default;
13
+ $page-content-negative-txt: $mode-color-status-negative-default;
14
+ $page-content-positive-icon: $mode-color-status-positive-default;
15
+ $page-content-positive-txt: $mode-color-status-positive-default;
16
+ $page-icon-default: $mode-color-generic-txt-severe;
9
17
  $page-txt-default: $mode-color-generic-txt-severe;
18
+ $page-content-icon-alt: $mode-color-generic-txt-moderate;
19
+ $page-content-icon-default: $mode-color-generic-txt-severe;
20
+ $page-content-txt-alt: $mode-color-generic-txt-moderate;
21
+ $page-content-txt-default: $mode-color-generic-txt-severe;
22
+ $page-content-inverse-icon-alt: $mode-color-generic-txt-inverse-moderate;
23
+ $page-content-inverse-icon-default: $mode-color-generic-txt-inverse-severe;
24
+ $page-content-inverse-txt-alt: $mode-color-generic-txt-inverse-moderate;
25
+ $page-content-inverse-txt-default: $mode-color-generic-txt-inverse-severe;
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;