@sage/design-tokens 18.2.1 → 18.3.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.
- package/README.md +1 -1
- package/css/components/container.css +2 -1
- package/css/light-all.css +2 -1
- package/js/common/components/container.d.ts +2 -1
- package/js/common/components/container.js +2 -1
- package/js/es6/components/container.d.ts +3 -2
- package/js/es6/components/container.js +2 -1
- package/json/components/container.json +2 -1
- package/package.json +1 -1
- package/scss/components/container.scss +2 -1
package/README.md
CHANGED
|
@@ -166,7 +166,7 @@ It is possible to export design tokens to any format or language. If you need to
|
|
|
166
166
|
|
|
167
167
|
## Contributing
|
|
168
168
|
|
|
169
|
-
If you would like to help contribute to this library, please read our [contributing documentation](./
|
|
169
|
+
If you would like to help contribute to this library, please read our [contributing documentation](./CONTRIBUTING.md),
|
|
170
170
|
|
|
171
171
|
## Licence
|
|
172
172
|
|
|
@@ -43,7 +43,6 @@
|
|
|
43
43
|
--container-standard-border-alt: var(--mode-color-generic-fg-firm);
|
|
44
44
|
--container-standard-border-default: var(--mode-color-generic-fg-soft);
|
|
45
45
|
--container-standard-dimmer: var(--mode-color-action-inactive-mask);
|
|
46
|
-
--container-standard-icon: var(--mode-color-generic-fg-firm);
|
|
47
46
|
--container-standard-inverse-bg-alt: var(--mode-color-generic-bg-inverse-delicate);
|
|
48
47
|
--container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);
|
|
49
48
|
--container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);
|
|
@@ -73,8 +72,10 @@
|
|
|
73
72
|
--container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);
|
|
74
73
|
--container-standard-txt-alt: var(--mode-color-generic-txt-moderate);
|
|
75
74
|
--container-standard-txt-default: var(--mode-color-generic-txt-severe);
|
|
75
|
+
--container-standard-icon: var(--mode-color-generic-txt-severe);
|
|
76
76
|
--container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);
|
|
77
77
|
--container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);
|
|
78
|
+
--container-standard-inverse-icon: var(--mode-color-generic-txt-inverse-severe);
|
|
78
79
|
--container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);
|
|
79
80
|
--container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);
|
|
80
81
|
--container-action-txt-disabled: var(--mode-color-action-inactive-txt);
|
package/css/light-all.css
CHANGED
|
@@ -1094,7 +1094,6 @@
|
|
|
1094
1094
|
--container-standard-border-alt: var(--mode-color-generic-fg-firm);
|
|
1095
1095
|
--container-standard-border-default: var(--mode-color-generic-fg-soft);
|
|
1096
1096
|
--container-standard-dimmer: var(--mode-color-action-inactive-mask);
|
|
1097
|
-
--container-standard-icon: var(--mode-color-generic-fg-firm);
|
|
1098
1097
|
--container-standard-inverse-bg-alt: var(--mode-color-generic-bg-inverse-delicate);
|
|
1099
1098
|
--container-standard-inverse-border-alt: var(--mode-color-generic-fg-inverse-firm);
|
|
1100
1099
|
--container-standard-inverse-bg-default: var(--mode-color-generic-bg-inverse-nought);
|
|
@@ -1124,8 +1123,10 @@
|
|
|
1124
1123
|
--container-standard-border-ai-v: var(--mode-color-status-ai-inverse-default-vertical);
|
|
1125
1124
|
--container-standard-txt-alt: var(--mode-color-generic-txt-moderate);
|
|
1126
1125
|
--container-standard-txt-default: var(--mode-color-generic-txt-severe);
|
|
1126
|
+
--container-standard-icon: var(--mode-color-generic-txt-severe);
|
|
1127
1127
|
--container-standard-inverse-txt-alt: var(--mode-color-generic-txt-inverse-moderate);
|
|
1128
1128
|
--container-standard-inverse-txt-default: var(--mode-color-generic-txt-inverse-severe);
|
|
1129
|
+
--container-standard-inverse-icon: var(--mode-color-generic-txt-inverse-severe);
|
|
1129
1130
|
--container-standard-priority-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);
|
|
1130
1131
|
--container-standard-priority-inverse-bg-ai: var(--mode-color-status-ai-inverse-default-vertical);
|
|
1131
1132
|
--container-action-txt-disabled: var(--mode-color-action-inactive-txt);
|
|
@@ -69,9 +69,9 @@ declare const tokens: {
|
|
|
69
69
|
"border-alt": DesignToken;
|
|
70
70
|
"border-default": DesignToken;
|
|
71
71
|
dimmer: DesignToken;
|
|
72
|
-
icon: DesignToken;
|
|
73
72
|
"txt-alt": DesignToken;
|
|
74
73
|
"txt-default": DesignToken;
|
|
74
|
+
icon: DesignToken;
|
|
75
75
|
inverse: {
|
|
76
76
|
"bg-alt": DesignToken;
|
|
77
77
|
"border-alt": DesignToken;
|
|
@@ -79,6 +79,7 @@ declare const tokens: {
|
|
|
79
79
|
"border-default": DesignToken;
|
|
80
80
|
"txt-alt": DesignToken;
|
|
81
81
|
"txt-default": DesignToken;
|
|
82
|
+
icon: DesignToken;
|
|
82
83
|
};
|
|
83
84
|
priority: {
|
|
84
85
|
"bg-ai": DesignToken;
|
|
@@ -40,15 +40,16 @@ module.exports.containerStandardBorderAiV = "var(--mode-color-status-ai-inverse-
|
|
|
40
40
|
module.exports.containerStandardBorderAlt = "var(--mode-color-generic-fg-firm)";
|
|
41
41
|
module.exports.containerStandardBorderDefault = "var(--mode-color-generic-fg-soft)";
|
|
42
42
|
module.exports.containerStandardDimmer = "var(--mode-color-action-inactive-mask)";
|
|
43
|
-
module.exports.containerStandardIcon = "var(--mode-color-generic-fg-firm)";
|
|
44
43
|
module.exports.containerStandardTxtAlt = "var(--mode-color-generic-txt-moderate)";
|
|
45
44
|
module.exports.containerStandardTxtDefault = "var(--mode-color-generic-txt-severe)";
|
|
45
|
+
module.exports.containerStandardIcon = "var(--mode-color-generic-txt-severe)";
|
|
46
46
|
module.exports.containerStandardInverseBgAlt = "var(--mode-color-generic-bg-inverse-delicate)";
|
|
47
47
|
module.exports.containerStandardInverseBorderAlt = "var(--mode-color-generic-fg-inverse-firm)";
|
|
48
48
|
module.exports.containerStandardInverseBgDefault = "var(--mode-color-generic-bg-inverse-nought)";
|
|
49
49
|
module.exports.containerStandardInverseBorderDefault = "var(--mode-color-generic-fg-inverse-soft)";
|
|
50
50
|
module.exports.containerStandardInverseTxtAlt = "var(--mode-color-generic-txt-inverse-moderate)";
|
|
51
51
|
module.exports.containerStandardInverseTxtDefault = "var(--mode-color-generic-txt-inverse-severe)";
|
|
52
|
+
module.exports.containerStandardInverseIcon = "var(--mode-color-generic-txt-inverse-severe)";
|
|
52
53
|
module.exports.containerStandardPriorityBgAi = "var(--mode-color-status-ai-inverse-default-vertical)";
|
|
53
54
|
module.exports.containerStandardPriorityBgCaution = "var(--mode-color-status-warning-default)";
|
|
54
55
|
module.exports.containerStandardPriorityBgNegative = "var(--mode-color-status-negative-default)";
|
|
@@ -63,12 +63,12 @@ export const containerStandardBorderAlt: string;
|
|
|
63
63
|
export const containerStandardBorderDefault: string;
|
|
64
64
|
/** dimmed mask for dialogs */
|
|
65
65
|
export const containerStandardDimmer: string;
|
|
66
|
-
/** Link preview image thumbnail */
|
|
67
|
-
export const containerStandardIcon: string;
|
|
68
66
|
/** for subheadings etc */
|
|
69
67
|
export const containerStandardTxtAlt: string;
|
|
70
68
|
/** for headings, paragraph txt etc */
|
|
71
69
|
export const containerStandardTxtDefault: string;
|
|
70
|
+
/** Link preview image thumbnail */
|
|
71
|
+
export const containerStandardIcon: string;
|
|
72
72
|
export const containerStandardInverseBgAlt: string;
|
|
73
73
|
export const containerStandardInverseBorderAlt: string;
|
|
74
74
|
export const containerStandardInverseBgDefault: string;
|
|
@@ -77,6 +77,7 @@ export const containerStandardInverseBorderDefault: string;
|
|
|
77
77
|
export const containerStandardInverseTxtAlt: string;
|
|
78
78
|
/** for headings, paragraph txt etc */
|
|
79
79
|
export const containerStandardInverseTxtDefault: string;
|
|
80
|
+
export const containerStandardInverseIcon: string;
|
|
80
81
|
export const containerStandardPriorityBgAi: string;
|
|
81
82
|
export const containerStandardPriorityBgCaution: string;
|
|
82
83
|
export const containerStandardPriorityBgNegative: string;
|
|
@@ -40,15 +40,16 @@ export const containerStandardBorderAiV = "var(--mode-color-status-ai-inverse-de
|
|
|
40
40
|
export const containerStandardBorderAlt = "var(--mode-color-generic-fg-firm)";
|
|
41
41
|
export const containerStandardBorderDefault = "var(--mode-color-generic-fg-soft)";
|
|
42
42
|
export const containerStandardDimmer = "var(--mode-color-action-inactive-mask)";
|
|
43
|
-
export const containerStandardIcon = "var(--mode-color-generic-fg-firm)";
|
|
44
43
|
export const containerStandardTxtAlt = "var(--mode-color-generic-txt-moderate)";
|
|
45
44
|
export const containerStandardTxtDefault = "var(--mode-color-generic-txt-severe)";
|
|
45
|
+
export const containerStandardIcon = "var(--mode-color-generic-txt-severe)";
|
|
46
46
|
export const containerStandardInverseBgAlt = "var(--mode-color-generic-bg-inverse-delicate)";
|
|
47
47
|
export const containerStandardInverseBorderAlt = "var(--mode-color-generic-fg-inverse-firm)";
|
|
48
48
|
export const containerStandardInverseBgDefault = "var(--mode-color-generic-bg-inverse-nought)";
|
|
49
49
|
export const containerStandardInverseBorderDefault = "var(--mode-color-generic-fg-inverse-soft)";
|
|
50
50
|
export const containerStandardInverseTxtAlt = "var(--mode-color-generic-txt-inverse-moderate)";
|
|
51
51
|
export const containerStandardInverseTxtDefault = "var(--mode-color-generic-txt-inverse-severe)";
|
|
52
|
+
export const containerStandardInverseIcon = "var(--mode-color-generic-txt-inverse-severe)";
|
|
52
53
|
export const containerStandardPriorityBgAi = "var(--mode-color-status-ai-inverse-default-vertical)";
|
|
53
54
|
export const containerStandardPriorityBgCaution = "var(--mode-color-status-warning-default)";
|
|
54
55
|
export const containerStandardPriorityBgNegative = "var(--mode-color-status-negative-default)";
|
|
@@ -37,15 +37,16 @@
|
|
|
37
37
|
"containerStandardBorderAlt": "var(--mode-color-generic-fg-firm)",
|
|
38
38
|
"containerStandardBorderDefault": "var(--mode-color-generic-fg-soft)",
|
|
39
39
|
"containerStandardDimmer": "var(--mode-color-action-inactive-mask)",
|
|
40
|
-
"containerStandardIcon": "var(--mode-color-generic-fg-firm)",
|
|
41
40
|
"containerStandardTxtAlt": "var(--mode-color-generic-txt-moderate)",
|
|
42
41
|
"containerStandardTxtDefault": "var(--mode-color-generic-txt-severe)",
|
|
42
|
+
"containerStandardIcon": "var(--mode-color-generic-txt-severe)",
|
|
43
43
|
"containerStandardInverseBgAlt": "var(--mode-color-generic-bg-inverse-delicate)",
|
|
44
44
|
"containerStandardInverseBorderAlt": "var(--mode-color-generic-fg-inverse-firm)",
|
|
45
45
|
"containerStandardInverseBgDefault": "var(--mode-color-generic-bg-inverse-nought)",
|
|
46
46
|
"containerStandardInverseBorderDefault": "var(--mode-color-generic-fg-inverse-soft)",
|
|
47
47
|
"containerStandardInverseTxtAlt": "var(--mode-color-generic-txt-inverse-moderate)",
|
|
48
48
|
"containerStandardInverseTxtDefault": "var(--mode-color-generic-txt-inverse-severe)",
|
|
49
|
+
"containerStandardInverseIcon": "var(--mode-color-generic-txt-inverse-severe)",
|
|
49
50
|
"containerStandardPriorityBgAi": "var(--mode-color-status-ai-inverse-default-vertical)",
|
|
50
51
|
"containerStandardPriorityBgCaution": "var(--mode-color-status-warning-default)",
|
|
51
52
|
"containerStandardPriorityBgNegative": "var(--mode-color-status-negative-default)",
|
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.
|
|
9
|
+
"version": "18.3.0",
|
|
10
10
|
"license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
|
|
11
11
|
"tags": [
|
|
12
12
|
"design tokens",
|
|
@@ -39,7 +39,6 @@ $container-standard-border-active: $mode-color-action-grayscale-active;
|
|
|
39
39
|
$container-standard-border-alt: $mode-color-generic-fg-firm;
|
|
40
40
|
$container-standard-border-default: $mode-color-generic-fg-soft;
|
|
41
41
|
$container-standard-dimmer: $mode-color-action-inactive-mask;
|
|
42
|
-
$container-standard-icon: $mode-color-generic-fg-firm;
|
|
43
42
|
$container-standard-inverse-bg-alt: $mode-color-generic-bg-inverse-delicate;
|
|
44
43
|
$container-standard-inverse-border-alt: $mode-color-generic-fg-inverse-firm;
|
|
45
44
|
$container-standard-inverse-bg-default: $mode-color-generic-bg-inverse-nought;
|
|
@@ -69,8 +68,10 @@ $container-standard-border-ai-h: $mode-color-status-ai-inverse-default-horizonta
|
|
|
69
68
|
$container-standard-border-ai-v: $mode-color-status-ai-inverse-default-vertical;
|
|
70
69
|
$container-standard-txt-alt: $mode-color-generic-txt-moderate;
|
|
71
70
|
$container-standard-txt-default: $mode-color-generic-txt-severe;
|
|
71
|
+
$container-standard-icon: $mode-color-generic-txt-severe;
|
|
72
72
|
$container-standard-inverse-txt-alt: $mode-color-generic-txt-inverse-moderate;
|
|
73
73
|
$container-standard-inverse-txt-default: $mode-color-generic-txt-inverse-severe;
|
|
74
|
+
$container-standard-inverse-icon: $mode-color-generic-txt-inverse-severe;
|
|
74
75
|
$container-standard-priority-bg-ai: $mode-color-status-ai-inverse-default-vertical;
|
|
75
76
|
$container-standard-priority-inverse-bg-ai: $mode-color-status-ai-inverse-default-vertical;
|
|
76
77
|
$container-action-txt-disabled: $mode-color-action-inactive-txt;
|