@sage/design-tokens 18.9.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.
- package/css/components/pill.css +3 -3
- package/css/dark.css +1 -1
- package/css/light-all.css +3 -3
- package/js/common/components/pill.js +3 -3
- package/js/common/dark.js +1 -1
- package/js/es6/components/pill.js +3 -3
- package/js/es6/dark.js +1 -1
- package/json/components/pill.json +3 -3
- package/json/dark.json +1 -1
- package/package.json +1 -1
- package/scss/components/pill.scss +3 -3
- package/scss/dark.scss +1 -1
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: #
|
|
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);
|
|
@@ -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 = "#
|
|
98
|
+
module.exports.modeColorGenericSurfaceTrace = "#1e2d3b";
|
|
99
99
|
module.exports.modeColorGenericSurfaceFaint = "#304658";
|
|
100
100
|
module.exports.modeColorGenericSurfaceHarsh = "#d1d6da";
|
|
101
101
|
module.exports.modeColorGenericSurfaceSevere = "#e8eaec";
|
|
@@ -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 = "#
|
|
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";
|
|
@@ -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": "#
|
|
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.9.
|
|
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",
|
|
@@ -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: #
|
|
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;
|