@sage/design-tokens 18.12.0 → 18.12.2

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 (12) hide show
  1. package/css/components/button.css +1 -1
  2. package/css/dark.css +11 -11
  3. package/css/light-all.css +1 -1
  4. package/js/common/components/button.js +1 -1
  5. package/js/common/dark.js +11 -11
  6. package/js/es6/components/button.js +1 -1
  7. package/js/es6/dark.js +11 -11
  8. package/json/components/button.json +1 -1
  9. package/json/dark.json +11 -11
  10. package/package.json +1 -1
  11. package/scss/components/button.scss +1 -1
  12. package/scss/dark.scss +11 -11
package/css/components/button.css CHANGED
@@ -40,7 +40,7 @@
40
40
  --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);
41
41
  --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);
42
42
  --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);
43
- --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);
43
+ --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-hover);
44
44
  --button-typical-secondary-border-active: var(--mode-color-action-main-active);
45
45
  --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);
46
46
  --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);
package/css/dark.css CHANGED
@@ -100,8 +100,8 @@
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: #1e2d3b;
104
- --mode-color-generic-surface-faint: #304658;
103
+ --mode-color-generic-surface-trace: #1b1b1b;
104
+ --mode-color-generic-surface-faint: #3b3b3b;
105
105
  --mode-color-generic-surface-harsh: #d1d6da;
106
106
  --mode-color-generic-surface-severe: #e8eaec;
107
107
  --mode-color-generic-surface-acute: #f4f5f6;
@@ -199,15 +199,15 @@
199
199
  --mode-color-action-nav-inverse-with-active: #FFFFFF;
200
200
  --mode-color-action-nav-inverse-with-default: #fffffff2;
201
201
  --mode-color-action-nav-inverse-with-hover: #FFFFFF;
202
- --mode-color-action-main-active: #8fff98;
203
- --mode-color-action-main-active-alt: #00f1424d;
204
- --mode-color-action-main-default: #00f142;
205
- --mode-color-action-main-default-alt: #00f142cc;
206
- --mode-color-action-main-default-alt2: #46fb5e;
207
- --mode-color-action-main-default-alt3: #00f14208;
208
- --mode-color-action-main-hover: #46fb5e;
209
- --mode-color-action-main-hover-alt: #00f14226;
210
- --mode-color-action-main-hover-alt2: #8fff98;
202
+ --mode-color-action-main-active: #42f355;
203
+ --mode-color-action-main-active-alt: #3dda4c4d;
204
+ --mode-color-action-main-default: #3dda4c;
205
+ --mode-color-action-main-default-alt: #3dda4ccc;
206
+ --mode-color-action-main-default-alt2: #00d639;
207
+ --mode-color-action-main-default-alt3: #3dda4c08;
208
+ --mode-color-action-main-hover: #42f355;
209
+ --mode-color-action-main-hover-alt: #3dda4c26;
210
+ --mode-color-action-main-hover-alt2: #00f142;
211
211
  --mode-color-action-main-with-active: #000000;
212
212
  --mode-color-action-main-with-default: #000000;
213
213
  --mode-color-action-main-with-hover: #000000;
package/css/light-all.css CHANGED
@@ -1214,7 +1214,7 @@
1214
1214
  --button-typical-primary-inverse-bg-hover: var(--mode-color-action-main-inverse-hover);
1215
1215
  --button-typical-primary-inverse-label-active: var(--mode-color-action-main-inverse-with-active);
1216
1216
  --button-typical-primary-inverse-label-default: var(--mode-color-action-main-inverse-with-default);
1217
- --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-default);
1217
+ --button-typical-primary-inverse-label-hover: var(--mode-color-action-main-inverse-with-hover);
1218
1218
  --button-typical-secondary-border-active: var(--mode-color-action-main-active);
1219
1219
  --button-typical-secondary-border-disabled: var(--mode-color-action-inactive-default);
1220
1220
  --button-typical-secondary-border-hover: var(--mode-color-action-main-hover);
package/js/common/components/button.js CHANGED
@@ -43,7 +43,7 @@ module.exports.buttonTypicalPrimaryInverseBgHover = "var(--mode-color-action-mai
43
43
  module.exports.buttonTypicalPrimaryInverseLabelActive = "var(--mode-color-action-main-inverse-with-active)";
44
44
  module.exports.buttonTypicalPrimaryInverseLabelDisabled = "var(--mode-color-action-inactive-inverse-txt-alt)";
45
45
  module.exports.buttonTypicalPrimaryInverseLabelDefault = "var(--mode-color-action-main-inverse-with-default)";
46
- module.exports.buttonTypicalPrimaryInverseLabelHover = "var(--mode-color-action-main-inverse-with-default)";
46
+ module.exports.buttonTypicalPrimaryInverseLabelHover = "var(--mode-color-action-main-inverse-with-hover)";
47
47
  module.exports.buttonTypicalSecondaryBgActive = "var(--mode-color-action-main-active-alt)";
48
48
  module.exports.buttonTypicalSecondaryBgDefault = "var(--mode-color-action-main-default-alt3)";
49
49
  module.exports.buttonTypicalSecondaryBgHover = "var(--mode-color-action-main-hover-alt)";
package/js/common/dark.js CHANGED
@@ -95,8 +95,8 @@ 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 = "#1e2d3b";
99
- module.exports.modeColorGenericSurfaceFaint = "#304658";
98
+ module.exports.modeColorGenericSurfaceTrace = "#1b1b1b";
99
+ module.exports.modeColorGenericSurfaceFaint = "#3b3b3b";
100
100
  module.exports.modeColorGenericSurfaceHarsh = "#d1d6da";
101
101
  module.exports.modeColorGenericSurfaceSevere = "#e8eaec";
102
102
  module.exports.modeColorGenericSurfaceAcute = "#f4f5f6";
@@ -194,15 +194,15 @@ module.exports.modeColorActionNavInverseHover = "#007219";
194
194
  module.exports.modeColorActionNavInverseWithActive = "#FFFFFF";
195
195
  module.exports.modeColorActionNavInverseWithDefault = "#fffffff2";
196
196
  module.exports.modeColorActionNavInverseWithHover = "#FFFFFF";
197
- module.exports.modeColorActionMainActive = "#8fff98";
198
- module.exports.modeColorActionMainActiveAlt = "#00f1424d";
199
- module.exports.modeColorActionMainDefault = "#00f142";
200
- module.exports.modeColorActionMainDefaultAlt = "#00f142cc";
201
- module.exports.modeColorActionMainDefaultAlt2 = "#46fb5e";
202
- module.exports.modeColorActionMainDefaultAlt3 = "#00f14208";
203
- module.exports.modeColorActionMainHover = "#46fb5e";
204
- module.exports.modeColorActionMainHoverAlt = "#00f14226";
205
- module.exports.modeColorActionMainHoverAlt2 = "#8fff98";
197
+ module.exports.modeColorActionMainActive = "#42f355";
198
+ module.exports.modeColorActionMainActiveAlt = "#3dda4c4d";
199
+ module.exports.modeColorActionMainDefault = "#3dda4c";
200
+ module.exports.modeColorActionMainDefaultAlt = "#3dda4ccc";
201
+ module.exports.modeColorActionMainDefaultAlt2 = "#00d639";
202
+ module.exports.modeColorActionMainDefaultAlt3 = "#3dda4c08";
203
+ module.exports.modeColorActionMainHover = "#42f355";
204
+ module.exports.modeColorActionMainHoverAlt = "#3dda4c26";
205
+ module.exports.modeColorActionMainHoverAlt2 = "#00f142";
206
206
  module.exports.modeColorActionMainWithActive = "#000000";
207
207
  module.exports.modeColorActionMainWithDefault = "#000000";
208
208
  module.exports.modeColorActionMainWithHover = "#000000";
package/js/es6/components/button.js CHANGED
@@ -43,7 +43,7 @@ export const buttonTypicalPrimaryInverseBgHover = "var(--mode-color-action-main-
43
43
  export const buttonTypicalPrimaryInverseLabelActive = "var(--mode-color-action-main-inverse-with-active)";
44
44
  export const buttonTypicalPrimaryInverseLabelDisabled = "var(--mode-color-action-inactive-inverse-txt-alt)";
45
45
  export const buttonTypicalPrimaryInverseLabelDefault = "var(--mode-color-action-main-inverse-with-default)";
46
- export const buttonTypicalPrimaryInverseLabelHover = "var(--mode-color-action-main-inverse-with-default)";
46
+ export const buttonTypicalPrimaryInverseLabelHover = "var(--mode-color-action-main-inverse-with-hover)";
47
47
  export const buttonTypicalSecondaryBgActive = "var(--mode-color-action-main-active-alt)";
48
48
  export const buttonTypicalSecondaryBgDefault = "var(--mode-color-action-main-default-alt3)";
49
49
  export const buttonTypicalSecondaryBgHover = "var(--mode-color-action-main-hover-alt)";
package/js/es6/dark.js CHANGED
@@ -99,8 +99,8 @@ 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 = "#1e2d3b"; // used on full page backgrounds as an alternative option
103
- export const modeColorGenericSurfaceFaint = "#304658"; // table header hover color
102
+ export const modeColorGenericSurfaceTrace = "#1b1b1b"; // used on full page backgrounds as an alternative option
103
+ export const modeColorGenericSurfaceFaint = "#3b3b3b"; // table header hover color
104
104
  export const modeColorGenericSurfaceHarsh = "#d1d6da";
105
105
  export const modeColorGenericSurfaceSevere = "#e8eaec";
106
106
  export const modeColorGenericSurfaceAcute = "#f4f5f6";
@@ -201,15 +201,15 @@ export const modeColorActionNavInverseHover = "#007219"; // hover bg for nav ite
201
201
  export const modeColorActionNavInverseWithActive = "#FFFFFF"; // txt and icons on top of active bgs in nav contxts
202
202
  export const modeColorActionNavInverseWithDefault = "#fffffff2"; // hover bg for nav items
203
203
  export const modeColorActionNavInverseWithHover = "#FFFFFF"; // hover bg for nav items
204
- export const modeColorActionMainActive = "#8fff98";
205
- export const modeColorActionMainActiveAlt = "#00f1424d"; // Active color for inverse secondary and tertiary buttons
206
- export const modeColorActionMainDefault = "#00f142";
207
- export const modeColorActionMainDefaultAlt = "#00f142cc"; // border color for secondary and tertiary inverse buttons
208
- export const modeColorActionMainDefaultAlt2 = "#46fb5e"; // default color for links
209
- export const modeColorActionMainDefaultAlt3 = "#00f14208"; // default background color of inverse secondary buttons
210
- export const modeColorActionMainHover = "#46fb5e";
211
- export const modeColorActionMainHoverAlt = "#00f14226"; // hover for inverse secondary and tertiary buttons
212
- export const modeColorActionMainHoverAlt2 = "#8fff98"; // hover for links
204
+ export const modeColorActionMainActive = "#42f355";
205
+ export const modeColorActionMainActiveAlt = "#3dda4c4d"; // Active color for inverse secondary and tertiary buttons
206
+ export const modeColorActionMainDefault = "#3dda4c";
207
+ export const modeColorActionMainDefaultAlt = "#3dda4ccc"; // border color for secondary and tertiary inverse buttons
208
+ export const modeColorActionMainDefaultAlt2 = "#00d639"; // default color for links
209
+ export const modeColorActionMainDefaultAlt3 = "#3dda4c08"; // default background color of inverse secondary buttons
210
+ export const modeColorActionMainHover = "#42f355";
211
+ export const modeColorActionMainHoverAlt = "#3dda4c26"; // hover for inverse secondary and tertiary buttons
212
+ export const modeColorActionMainHoverAlt2 = "#00f142"; // hover for links
213
213
  export const modeColorActionMainWithActive = "#000000";
214
214
  export const modeColorActionMainWithDefault = "#000000";
215
215
  export const modeColorActionMainWithHover = "#000000";
package/json/components/button.json CHANGED
@@ -40,7 +40,7 @@
40
40
  "buttonTypicalPrimaryInverseLabelActive": "var(--mode-color-action-main-inverse-with-active)",
41
41
  "buttonTypicalPrimaryInverseLabelDisabled": "var(--mode-color-action-inactive-inverse-txt-alt)",
42
42
  "buttonTypicalPrimaryInverseLabelDefault": "var(--mode-color-action-main-inverse-with-default)",
43
- "buttonTypicalPrimaryInverseLabelHover": "var(--mode-color-action-main-inverse-with-default)",
43
+ "buttonTypicalPrimaryInverseLabelHover": "var(--mode-color-action-main-inverse-with-hover)",
44
44
  "buttonTypicalSecondaryBgActive": "var(--mode-color-action-main-active-alt)",
45
45
  "buttonTypicalSecondaryBgDefault": "var(--mode-color-action-main-default-alt3)",
46
46
  "buttonTypicalSecondaryBgHover": "var(--mode-color-action-main-hover-alt)",
package/json/dark.json CHANGED
@@ -92,8 +92,8 @@
92
92
  "modeColorGenericFgInverseModerate": "#8c98a2",
93
93
  "modeColorGenericFgInverseFirm": "#75838f",
94
94
  "modeColorGenericSurfaceNought": "#000000",
95
- "modeColorGenericSurfaceTrace": "#1e2d3b",
96
- "modeColorGenericSurfaceFaint": "#304658",
95
+ "modeColorGenericSurfaceTrace": "#1b1b1b",
96
+ "modeColorGenericSurfaceFaint": "#3b3b3b",
97
97
  "modeColorGenericSurfaceHarsh": "#d1d6da",
98
98
  "modeColorGenericSurfaceSevere": "#e8eaec",
99
99
  "modeColorGenericSurfaceAcute": "#f4f5f6",
@@ -191,15 +191,15 @@
191
191
  "modeColorActionNavInverseWithActive": "#FFFFFF",
192
192
  "modeColorActionNavInverseWithDefault": "#fffffff2",
193
193
  "modeColorActionNavInverseWithHover": "#FFFFFF",
194
- "modeColorActionMainActive": "#8fff98",
195
- "modeColorActionMainActiveAlt": "#00f1424d",
196
- "modeColorActionMainDefault": "#00f142",
197
- "modeColorActionMainDefaultAlt": "#00f142cc",
198
- "modeColorActionMainDefaultAlt2": "#46fb5e",
199
- "modeColorActionMainDefaultAlt3": "#00f14208",
200
- "modeColorActionMainHover": "#46fb5e",
201
- "modeColorActionMainHoverAlt": "#00f14226",
202
- "modeColorActionMainHoverAlt2": "#8fff98",
194
+ "modeColorActionMainActive": "#42f355",
195
+ "modeColorActionMainActiveAlt": "#3dda4c4d",
196
+ "modeColorActionMainDefault": "#3dda4c",
197
+ "modeColorActionMainDefaultAlt": "#3dda4ccc",
198
+ "modeColorActionMainDefaultAlt2": "#00d639",
199
+ "modeColorActionMainDefaultAlt3": "#3dda4c08",
200
+ "modeColorActionMainHover": "#42f355",
201
+ "modeColorActionMainHoverAlt": "#3dda4c26",
202
+ "modeColorActionMainHoverAlt2": "#00f142",
203
203
  "modeColorActionMainWithActive": "#000000",
204
204
  "modeColorActionMainWithDefault": "#000000",
205
205
  "modeColorActionMainWithHover": "#000000",
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.12.0",
9
+ "version": "18.12.2",
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
@@ -36,7 +36,7 @@ $button-typical-primary-inverse-bg-default: $mode-color-action-main-inverse-defa
36
36
  $button-typical-primary-inverse-bg-hover: $mode-color-action-main-inverse-hover;
37
37
  $button-typical-primary-inverse-label-active: $mode-color-action-main-inverse-with-active;
38
38
  $button-typical-primary-inverse-label-default: $mode-color-action-main-inverse-with-default;
39
- $button-typical-primary-inverse-label-hover: $mode-color-action-main-inverse-with-default;
39
+ $button-typical-primary-inverse-label-hover: $mode-color-action-main-inverse-with-hover;
40
40
  $button-typical-secondary-border-active: $mode-color-action-main-active;
41
41
  $button-typical-secondary-border-disabled: $mode-color-action-inactive-default;
42
42
  $button-typical-secondary-border-hover: $mode-color-action-main-hover;
package/scss/dark.scss CHANGED
@@ -96,8 +96,8 @@ $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: #1e2d3b;
100
- $mode-color-generic-surface-faint: #304658;
99
+ $mode-color-generic-surface-trace: #1b1b1b;
100
+ $mode-color-generic-surface-faint: #3b3b3b;
101
101
  $mode-color-generic-surface-harsh: #d1d6da;
102
102
  $mode-color-generic-surface-severe: #e8eaec;
103
103
  $mode-color-generic-surface-acute: #f4f5f6;
@@ -195,15 +195,15 @@ $mode-color-action-nav-inverse-hover: #007219;
195
195
  $mode-color-action-nav-inverse-with-active: #FFFFFF;
196
196
  $mode-color-action-nav-inverse-with-default: #fffffff2;
197
197
  $mode-color-action-nav-inverse-with-hover: #FFFFFF;
198
- $mode-color-action-main-active: #8fff98;
199
- $mode-color-action-main-active-alt: #00f1424d;
200
- $mode-color-action-main-default: #00f142;
201
- $mode-color-action-main-default-alt: #00f142cc;
202
- $mode-color-action-main-default-alt2: #46fb5e;
203
- $mode-color-action-main-default-alt3: #00f14208;
204
- $mode-color-action-main-hover: #46fb5e;
205
- $mode-color-action-main-hover-alt: #00f14226;
206
- $mode-color-action-main-hover-alt2: #8fff98;
198
+ $mode-color-action-main-active: #42f355;
199
+ $mode-color-action-main-active-alt: #3dda4c4d;
200
+ $mode-color-action-main-default: #3dda4c;
201
+ $mode-color-action-main-default-alt: #3dda4ccc;
202
+ $mode-color-action-main-default-alt2: #00d639;
203
+ $mode-color-action-main-default-alt3: #3dda4c08;
204
+ $mode-color-action-main-hover: #42f355;
205
+ $mode-color-action-main-hover-alt: #3dda4c26;
206
+ $mode-color-action-main-hover-alt2: #00f142;
207
207
  $mode-color-action-main-with-active: #000000;
208
208
  $mode-color-action-main-with-default: #000000;
209
209
  $mode-color-action-main-with-hover: #000000;