@sage/design-tokens 18.2.0 → 18.2.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/light-all.css +1 -1
- package/css/light.css +1 -1
- package/js/common/light.js +1 -1
- package/js/es6/light.js +1 -1
- package/json/light.json +1 -1
- package/package.json +1 -1
- package/scss/components/button.scss +3 -3
- package/scss/components/link.scss +1 -1
- package/scss/components/message.scss +2 -2
- package/scss/components/pill.scss +2 -2
- package/scss/light.scss +1 -1
package/css/light-all.css
CHANGED
|
@@ -319,7 +319,7 @@
|
|
|
319
319
|
--mode-color-action-grayscale-with-hover: #000000;
|
|
320
320
|
--mode-color-action-grayscale-inverse-active: #FFFFFF;
|
|
321
321
|
--mode-color-action-grayscale-inverse-active-alt: #ffffff26;
|
|
322
|
-
--mode-color-action-grayscale-inverse-default: #
|
|
322
|
+
--mode-color-action-grayscale-inverse-default: #ffffffeb;
|
|
323
323
|
--mode-color-action-grayscale-inverse-default-alt: #ffffffab;
|
|
324
324
|
--mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;
|
|
325
325
|
--mode-color-action-grayscale-inverse-hover: #ffffff26;
|
package/css/light.css
CHANGED
|
@@ -170,7 +170,7 @@
|
|
|
170
170
|
--mode-color-action-grayscale-with-hover: #000000;
|
|
171
171
|
--mode-color-action-grayscale-inverse-active: #FFFFFF;
|
|
172
172
|
--mode-color-action-grayscale-inverse-active-alt: #ffffff26;
|
|
173
|
-
--mode-color-action-grayscale-inverse-default: #
|
|
173
|
+
--mode-color-action-grayscale-inverse-default: #ffffffeb;
|
|
174
174
|
--mode-color-action-grayscale-inverse-default-alt: #ffffffab;
|
|
175
175
|
--mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;
|
|
176
176
|
--mode-color-action-grayscale-inverse-hover: #ffffff26;
|
package/js/common/light.js
CHANGED
|
@@ -165,7 +165,7 @@ module.exports.modeColorActionGrayscaleWithDefault = "#FFFFFF";
|
|
|
165
165
|
module.exports.modeColorActionGrayscaleWithHover = "#000000";
|
|
166
166
|
module.exports.modeColorActionGrayscaleInverseActive = "#FFFFFF";
|
|
167
167
|
module.exports.modeColorActionGrayscaleInverseActiveAlt = "#ffffff26";
|
|
168
|
-
module.exports.modeColorActionGrayscaleInverseDefault = "#
|
|
168
|
+
module.exports.modeColorActionGrayscaleInverseDefault = "#ffffffeb";
|
|
169
169
|
module.exports.modeColorActionGrayscaleInverseDefaultAlt = "#ffffffab";
|
|
170
170
|
module.exports.modeColorActionGrayscaleInverseHoverAlt = "#ffffff1a";
|
|
171
171
|
module.exports.modeColorActionGrayscaleInverseHover = "#ffffff26";
|
package/js/es6/light.js
CHANGED
|
@@ -172,7 +172,7 @@ export const modeColorActionGrayscaleWithDefault = "#FFFFFF";
|
|
|
172
172
|
export const modeColorActionGrayscaleWithHover = "#000000";
|
|
173
173
|
export const modeColorActionGrayscaleInverseActive = "#FFFFFF";
|
|
174
174
|
export const modeColorActionGrayscaleInverseActiveAlt = "#ffffff26";
|
|
175
|
-
export const modeColorActionGrayscaleInverseDefault = "#
|
|
175
|
+
export const modeColorActionGrayscaleInverseDefault = "#ffffffeb";
|
|
176
176
|
export const modeColorActionGrayscaleInverseDefaultAlt = "#ffffffab"; // subtle and toggle button txt
|
|
177
177
|
export const modeColorActionGrayscaleInverseHoverAlt = "#ffffff1a"; // Accordion, secondary, tertiary, menu bg on hov
|
|
178
178
|
export const modeColorActionGrayscaleInverseHover = "#ffffff26"; // subtle table header hover
|
package/json/light.json
CHANGED
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
"modeColorActionGrayscaleWithHover": "#000000",
|
|
163
163
|
"modeColorActionGrayscaleInverseActive": "#FFFFFF",
|
|
164
164
|
"modeColorActionGrayscaleInverseActiveAlt": "#ffffff26",
|
|
165
|
-
"modeColorActionGrayscaleInverseDefault": "#
|
|
165
|
+
"modeColorActionGrayscaleInverseDefault": "#ffffffeb",
|
|
166
166
|
"modeColorActionGrayscaleInverseDefaultAlt": "#ffffffab",
|
|
167
167
|
"modeColorActionGrayscaleInverseHoverAlt": "#ffffff1a",
|
|
168
168
|
"modeColorActionGrayscaleInverseHover": "#ffffff26",
|
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.2.
|
|
9
|
+
"version": "18.2.1",
|
|
10
10
|
"license": "SEE LICENSE IN https://github.com/Sage/design-tokens/blob/master/license",
|
|
11
11
|
"tags": [
|
|
12
12
|
"design tokens",
|
|
@@ -46,7 +46,6 @@ $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;
|
|
50
49
|
$button-typical-secondary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
|
|
51
50
|
$button-typical-tertiary-border-active: $mode-color-action-main-active;
|
|
52
51
|
$button-typical-tertiary-border-disabled: $mode-color-action-inactive-default;
|
|
@@ -57,12 +56,10 @@ $button-typical-tertiary-inverse-border-active: $mode-color-action-main-inverse-
|
|
|
57
56
|
$button-typical-tertiary-inverse-border-disabled: $mode-color-action-inactive-inverse-default;
|
|
58
57
|
$button-typical-tertiary-inverse-border-hover: $mode-color-action-main-inverse-hover;
|
|
59
58
|
$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;
|
|
61
59
|
$button-typical-tertiary-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
|
|
62
60
|
$button-typical-subtle-label-active: $mode-color-action-grayscale-with-active-alt;
|
|
63
61
|
$button-typical-subtle-label-hover: $mode-color-action-grayscale-with-hover;
|
|
64
62
|
$button-typical-subtle-inverse-label-active: $mode-color-action-grayscale-inverse-with-active-alt;
|
|
65
|
-
$button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
66
63
|
$button-typical-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-with-hover;
|
|
67
64
|
$button-typical-toggle-bg-active-disabled: $mode-color-action-inactive-default;
|
|
68
65
|
$button-typical-toggle-bg-active: $mode-color-action-grayscale-active;
|
|
@@ -88,6 +85,7 @@ $button-typical-secondary-inverse-bg-active: $mode-color-action-main-inverse-act
|
|
|
88
85
|
$button-typical-secondary-inverse-bg-default: $mode-color-action-main-inverse-default-alt3;
|
|
89
86
|
$button-typical-secondary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
|
|
90
87
|
$button-typical-secondary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
|
|
88
|
+
$button-typical-secondary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
91
89
|
$button-typical-tertiary-bg-active: $mode-color-action-main-active-alt;
|
|
92
90
|
$button-typical-tertiary-bg-default: $button-none;
|
|
93
91
|
$button-typical-tertiary-bg-hover: $mode-color-action-main-hover-alt;
|
|
@@ -97,11 +95,13 @@ $button-typical-tertiary-inverse-bg-active: $mode-color-action-main-inverse-acti
|
|
|
97
95
|
$button-typical-tertiary-inverse-bg-default: $button-none;
|
|
98
96
|
$button-typical-tertiary-inverse-bg-hover: $mode-color-action-main-inverse-hover-alt;
|
|
99
97
|
$button-typical-tertiary-inverse-border-default: $mode-color-action-main-inverse-default-alt;
|
|
98
|
+
$button-typical-tertiary-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
100
99
|
$button-typical-subtle-bg-active: $mode-color-action-grayscale-active-alt;
|
|
101
100
|
$button-typical-subtle-bg-hover: $mode-color-action-grayscale-hover-alt;
|
|
102
101
|
$button-typical-subtle-label-default: $mode-color-action-grayscale-default;
|
|
103
102
|
$button-typical-subtle-inverse-bg-active: $mode-color-action-grayscale-inverse-active-alt;
|
|
104
103
|
$button-typical-subtle-inverse-bg-hover: $mode-color-action-grayscale-inverse-hover-alt;
|
|
104
|
+
$button-typical-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
105
105
|
$button-typical-toggle-label-active-disabled: $mode-color-action-inactive-txt-alt;
|
|
106
106
|
$button-typical-toggle-bg-hover: $mode-color-action-grayscale-hover-alt;
|
|
107
107
|
$button-typical-toggle-border-default: $mode-color-action-grayscale-default;
|
|
@@ -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;
|
|
16
15
|
$link-subtle-inverse-label-hover: $mode-color-action-grayscale-inverse-active;
|
|
17
16
|
$link-subtle-label-default: $mode-color-action-grayscale-default;
|
|
17
|
+
$link-subtle-inverse-label-default: $mode-color-action-grayscale-inverse-default;
|
|
@@ -7,7 +7,9 @@ $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;
|
|
10
11
|
$message-contextual-ai-bg-alt: $mode-color-status-neutral-default-alt;
|
|
12
|
+
$message-contextual-ai-border-default: $mode-color-status-ai-default-alt;
|
|
11
13
|
$message-contextual-callout-bg-alt: $mode-color-status-callout-default-alt;
|
|
12
14
|
$message-contextual-error-bg-default: $mode-color-status-negative-default;
|
|
13
15
|
$message-contextual-error-bg-alt: $mode-color-status-negative-default-alt;
|
|
@@ -35,8 +37,6 @@ $message-global-warning-bg-default: $mode-color-status-warning-default-alt;
|
|
|
35
37
|
$message-global-warning-bg-hover: $mode-color-status-warning-hover-alt;
|
|
36
38
|
$message-global-warning-icon: $mode-color-status-warning-default;
|
|
37
39
|
$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;
|
|
@@ -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-label-alt-default: $mode-color-status-txt-with-default-alt;
|
|
92
|
-
$pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
|
|
93
91
|
$pill-generic-inverse-label-alt-default: $mode-color-status-txt-inverse-with-default-alt;
|
|
94
92
|
$pill-generic-inverse-label-alt-hover: $mode-color-status-txt-inverse-with-default-alt;
|
|
93
|
+
$pill-generic-label-alt-default: $mode-color-status-txt-with-default-alt;
|
|
94
|
+
$pill-generic-label-alt-hover: $mode-color-status-txt-with-default-alt;
|
package/scss/light.scss
CHANGED
|
@@ -166,7 +166,7 @@ $mode-color-action-grayscale-with-default: #FFFFFF;
|
|
|
166
166
|
$mode-color-action-grayscale-with-hover: #000000;
|
|
167
167
|
$mode-color-action-grayscale-inverse-active: #FFFFFF;
|
|
168
168
|
$mode-color-action-grayscale-inverse-active-alt: #ffffff26;
|
|
169
|
-
$mode-color-action-grayscale-inverse-default: #
|
|
169
|
+
$mode-color-action-grayscale-inverse-default: #ffffffeb;
|
|
170
170
|
$mode-color-action-grayscale-inverse-default-alt: #ffffffab;
|
|
171
171
|
$mode-color-action-grayscale-inverse-hover-alt: #ffffff1a;
|
|
172
172
|
$mode-color-action-grayscale-inverse-hover: #ffffff26;
|