@sage/design-tokens 18.8.0 → 18.9.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/components/page.css +18 -2
  2. package/css/light-all.css +18 -2
  3. package/js/common/components/page.d.ts +30 -2
  4. package/js/common/components/page.js +18 -2
  5. package/js/es6/components/page.d.ts +24 -3
  6. package/js/es6/components/page.js +18 -2
  7. package/json/components/page.json +19 -3
  8. package/package.json +1 -1
  9. package/scss/components/page.scss +18 -2
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/light-all.css CHANGED
@@ -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/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/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/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.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/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;