@sage/design-tokens 18.4.0 → 18.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 (13) hide show
  1. package/css/components/container.css +3 -0
  2. package/css/light-all.css +3 -0
  3. package/js/common/components/container.d.ts +7 -0
  4. package/js/common/components/container.js +3 -0
  5. package/js/es6/components/container.d.ts +6 -0
  6. package/js/es6/components/container.js +3 -0
  7. package/json/components/container.json +4 -1
  8. package/package.json +1 -1
  9. package/scss/components/button.scss +3 -3
  10. package/scss/components/container.scss +3 -0
  11. package/scss/components/link.scss +1 -1
  12. package/scss/components/message.scss +2 -2
  13. package/scss/components/pill.scss +2 -2
package/css/components/container.css CHANGED
@@ -16,6 +16,9 @@
16
16
  --container-size-fluid-items-2-xl: 320px;
17
17
  --container-size-fluid-items-3-xl: 560px;
18
18
  --container-size-fluid-items-4-xl: 760px;
19
+ --container-size-dialog-maxwidth-s: 540px;
20
+ --container-size-dialog-maxwidth-m: 850px;
21
+ --container-size-dialog-maxwidth-l: 1080px;
19
22
  --container-action-bg-footer-activated: var(--mode-color-status-positive-default);
20
23
  --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);
21
24
  --container-action-border-activated: var(--mode-color-status-positive-default);
package/css/light-all.css CHANGED
@@ -1069,6 +1069,9 @@
1069
1069
  --container-size-fluid-items-2-xl: 320px;
1070
1070
  --container-size-fluid-items-3-xl: 560px;
1071
1071
  --container-size-fluid-items-4-xl: 760px;
1072
+ --container-size-dialog-maxwidth-s: 540px;
1073
+ --container-size-dialog-maxwidth-m: 850px;
1074
+ --container-size-dialog-maxwidth-l: 1080px;
1072
1075
  --container-action-bg-footer-activated: var(--mode-color-status-positive-default);
1073
1076
  --container-action-bg-footer-active: var(--mode-color-action-grayscale-active);
1074
1077
  --container-action-border-activated: var(--mode-color-status-positive-default);
package/js/common/components/container.d.ts CHANGED
@@ -115,6 +115,13 @@ declare const tokens: {
115
115
  "3XL": DesignToken;
116
116
  "4XL": DesignToken;
117
117
  };
118
+ dialog: {
119
+ maxwidth: {
120
+ S: DesignToken;
121
+ M: DesignToken;
122
+ L: DesignToken;
123
+ };
124
+ };
118
125
  };
119
126
  };
120
127
  };
package/js/common/components/container.js CHANGED
@@ -74,3 +74,6 @@ module.exports.containerSizeFluidItemsXl = "288px";
74
74
  module.exports.containerSizeFluidItems2Xl = "320px";
75
75
  module.exports.containerSizeFluidItems3Xl = "560px";
76
76
  module.exports.containerSizeFluidItems4Xl = "760px";
77
+ module.exports.containerSizeDialogMaxwidthS = "540px";
78
+ module.exports.containerSizeDialogMaxwidthM = "850px";
79
+ module.exports.containerSizeDialogMaxwidthL = "1080px";
package/js/es6/components/container.d.ts CHANGED
@@ -111,3 +111,9 @@ export const containerSizeFluidItems2Xl: string;
111
111
  export const containerSizeFluidItems3Xl: string;
112
112
  /** Max width for single line of txt. */
113
113
  export const containerSizeFluidItems4Xl: string;
114
+ /** max width for small dialog */
115
+ export const containerSizeDialogMaxwidthS: string;
116
+ /** max width for medium dialog */
117
+ export const containerSizeDialogMaxwidthM: string;
118
+ /** max width for large dialog */
119
+ export const containerSizeDialogMaxwidthL: string;
package/js/es6/components/container.js CHANGED
@@ -74,3 +74,6 @@ export const containerSizeFluidItemsXl = "288px";
74
74
  export const containerSizeFluidItems2Xl = "320px";
75
75
  export const containerSizeFluidItems3Xl = "560px";
76
76
  export const containerSizeFluidItems4Xl = "760px";
77
+ export const containerSizeDialogMaxwidthS = "540px";
78
+ export const containerSizeDialogMaxwidthM = "850px";
79
+ export const containerSizeDialogMaxwidthL = "1080px";
package/json/components/container.json CHANGED
@@ -70,5 +70,8 @@
70
70
  "containerSizeFluidItemsXl": "288px",
71
71
  "containerSizeFluidItems2Xl": "320px",
72
72
  "containerSizeFluidItems3Xl": "560px",
73
- "containerSizeFluidItems4Xl": "760px"
73
+ "containerSizeFluidItems4Xl": "760px",
74
+ "containerSizeDialogMaxwidthS": "540px",
75
+ "containerSizeDialogMaxwidthM": "850px",
76
+ "containerSizeDialogMaxwidthL": "1080px"
74
77
  }
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.4.0",
9
+ "version": "18.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/button.scss CHANGED
@@ -46,6 +46,7 @@ $button-typical-secondary-inverse-border-active: $mode-color-action-main-inverse
46
46
  $button-typical-secondary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
47
47
  $button-typical-secondary-inverse-border-hover: $mode-color-action-main-inverse-hover;
48
48
  $button-typical-secondary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
49
+ $button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
49
50
  $button-typical-secondary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
50
51
  $button-typical-tertiary-border-active: $mode-color-action-main-active;
51
52
  $button-typical-tertiary-border-disabled: $mode-color-action-inactive-default;
@@ -56,11 +57,13 @@ $button-typical-tertiary-inverse-border-active: $mode-color-action-main-inverse-
56
57
  $button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
57
58
  $button-typical-tertiary-inverse-border-hover: $mode-color-action-main-inverse-hover;
58
59
  $button-typical-tertiary-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
60
+ $button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
59
61
  $button-typical-tertiary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
60
62
  $button-typical-subtle-bg-hover: $mode-color-generic-bg-delicate;
61
63
  $button-typical-subtle-label-active: $mode-color-action-grayscale-with-active-alt;
62
64
  $button-typical-subtle-label-hover: $mode-color-action-grayscale-with-hover;
63
65
  $button-typical-subtle-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
66
+ $button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
64
67
  $button-typical-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
65
68
  $button-typical-toggle-bg-active-disabled: $mode-color-action-inactive-default;
66
69
  $button-typical-toggle-bg-active: $mode-color-action-grayscale-active;
@@ -87,7 +90,6 @@ $button-typical-secondary-inverse-bg-active: $mode-color-action-main-inverse-act
87
90
  $button-typical-secondary-inverse-bg-default: $mode-color-action-main-inverse-default-alt3;
88
91
  $button-typical-secondary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
89
92
  $button-typical-secondary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
90
- $button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
91
93
  $button-typical-tertiary-bg-active: $mode-color-action-main-active-alt;
92
94
  $button-typical-tertiary-bg-default: $button-none;
93
95
  $button-typical-tertiary-bg-hover: $mode-color-action-main-hover-alt;
@@ -97,12 +99,10 @@ $button-typical-tertiary-inverse-bg-active: $mode-color-action-main-inverse-acti
97
99
  $button-typical-tertiary-inverse-bg-default: $button-none;
98
100
  $button-typical-tertiary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
99
101
  $button-typical-tertiary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
100
- $button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
101
102
  $button-typical-subtle-bg-active: $mode-color-action-grayscale-active-alt;
102
103
  $button-typical-subtle-label-default: $mode-color-action-grayscale-default;
103
104
  $button-typical-subtle-inverse-bg-active: $mode-color-action-grayscale-inverse-active-alt;
104
105
  $button-typical-subtle-inverse-bg-hover: $mode-color-action-grayscale-inverse-hover-alt;
105
- $button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
106
106
  $button-typical-toggle-label-active-disabled: $mode-color-action-inactive-txt-alt;
107
107
  $button-typical-toggle-border-default: $mode-color-action-grayscale-default;
108
108
  $button-typical-toggle-label-default: $mode-color-action-grayscale-default-alt;
package/scss/components/container.scss CHANGED
@@ -12,6 +12,9 @@ $container-size-fluid-items-xl: 288px;
12
12
  $container-size-fluid-items-2-xl: 320px;
13
13
  $container-size-fluid-items-3-xl: 560px;
14
14
  $container-size-fluid-items-4-xl: 760px;
15
+ $container-size-dialog-maxwidth-s: 540px;
16
+ $container-size-dialog-maxwidth-m: 850px;
17
+ $container-size-dialog-maxwidth-l: 1080px;
15
18
  $container-action-bg-footer-activated: $mode-color-status-positive-default;
16
19
  $container-action-bg-footer-active: $mode-color-action-grayscale-active;
17
20
  $container-action-border-activated: $mode-color-status-positive-default;
package/scss/components/link.scss CHANGED
@@ -12,6 +12,6 @@ $link-typical-label-hover: $mode-color-action-main-hover-alt2;
12
12
  $link-typical-inverse-label-default: $mode-color-action-main-inverse-default-alt2;
13
13
  $link-typical-inverse-label-hover: $mode-color-action-main-inverse-hover-alt2;
14
14
  $link-subtle-label-hover: $mode-color-action-grayscale-active;
15
+ $link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
15
16
  $link-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-active;
16
17
  $link-subtle-label-default: $mode-color-action-grayscale-default;
17
- $link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
package/scss/components/message.scss CHANGED
@@ -7,9 +7,7 @@ $message-none: $mode-color-none;
7
7
  $message-contextual-bg: $mode-color-generic-bg-nought;
8
8
  $message-contextual-icon: $mode-color-generic-bg-nought;
9
9
  $message-contextual-icon-alt: $mode-color-status-neutral-default;
10
- $message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
11
10
  $message-contextual-ai-bg-alt: $mode-color-status-neutral-default-alt;
12
- $message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
13
11
  $message-contextual-callout-bg-alt: $mode-color-status-callout-default-alt;
14
12
  $message-contextual-error-bg-default: $mode-color-status-negative-default;
15
13
  $message-contextual-error-bg-alt: $mode-color-status-negative-default-alt;
@@ -37,6 +35,8 @@ $message-global-warning-bg-default: $mode-color-status-warning-default-alt;
37
35
  $message-global-warning-bg-hover: $mode-color-status-warning-hover-alt;
38
36
  $message-global-warning-icon: $mode-color-status-warning-default;
39
37
  $message-contextual-txt: $mode-color-status-txt-with-hover-alt;
38
+ $message-contextual-ai-bg-default: $mode-color-status-ai-default-alt;
39
+ $message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
40
40
  $message-contextual-callout-icon: $mode-color-status-txt-with-default-alt;
41
41
  $message-global-label-default: $mode-color-status-txt-with-default-alt;
42
42
  $message-global-callout-icon: $mode-color-status-txt-with-default-alt;
package/scss/components/pill.scss CHANGED
@@ -88,7 +88,7 @@ $pill-generic-label-default: $mode-color-status-txt-with-default;
88
88
  $pill-generic-label-hover: $mode-color-status-txt-with-hover;
89
89
  $pill-generic-inverse-label-default: $mode-color-status-txt-inverse-with-default;
90
90
  $pill-generic-inverse-label-hover: $mode-color-status-txt-inverse-with-hover;
91
- $pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
92
- $pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
93
91
  $pill-generic-label-alt-default: $mode-color-status-txt-with-default-alt;
94
92
  $pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
93
+ $pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
94
+ $pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;