@carbon/themes 10.10.0-rc.0 → 10.10.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.
Files changed (12) hide show
  1. package/docs/sass.md +2 -2
  2. package/es/index.js +73 -6
  3. package/lib/index.js +75 -6
  4. package/package.json +9 -8
  5. package/scss/generated/_themes.scss +2 -2
  6. package/scss/generated/_tokens.scss +1 -1
  7. package/src/g10.js +2 -1
  8. package/src/g100.js +3 -2
  9. package/src/g90.js +4 -2
  10. package/src/tools.js +27 -0
  11. package/src/white.js +2 -1
  12. package/umd/index.js +78 -10
package/docs/sass.md CHANGED
@@ -1777,6 +1777,7 @@ $carbon--theme--g90: map-merge(
1777
1777
  visited-link: #be95ff,
1778
1778
  disabled-01: #393939,
1779
1779
  disabled-02: #6f6f6f,
1780
+ disabled-03: #a8a8a8,
1780
1781
  highlight: #0043ce,
1781
1782
  skeleton-01: #353535,
1782
1783
  skeleton-02: #525252,
@@ -1849,7 +1850,6 @@ $carbon--theme--g100: map-merge(
1849
1850
  visited-link: #be95ff,
1850
1851
  disabled-01: #262626,
1851
1852
  disabled-02: #525252,
1852
- disabled-03: #6f6f6f,
1853
1853
  highlight: #002d9c,
1854
1854
  skeleton-01: #353535,
1855
1855
  skeleton-02: #393939,
@@ -3326,7 +3326,7 @@ $hover-danger: if(
3326
3326
  'hover-danger'
3327
3327
  ),
3328
3328
  map-get($carbon--theme, 'hover-danger'),
3329
- #ba1b23
3329
+ #b81921
3330
3330
  );
3331
3331
  ```
3332
3332
 
package/es/index.js CHANGED
@@ -1,9 +1,76 @@
1
+ import Color from 'color';
1
2
  import { blue20, blue40, blue60, blue70, blue80, gray10, gray20, gray30, gray40, gray50, gray60, gray70, gray80, gray100, blue50, green40, green50, yellow, red50, red60, red80, purple60, white, rgba, blue30, gray90, red40, purple40, red30 } from '@carbon/colors';
2
3
  import { caption01, label01, helperText01, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04, unstable_tokens } from '@carbon/type';
3
4
  export { caption01, label01, helperText01, bodyShort01, bodyLong01, bodyShort02, bodyLong02, code01, code02, heading01, productiveHeading01, heading02, productiveHeading02, productiveHeading03, productiveHeading04, productiveHeading05, productiveHeading06, productiveHeading07, expressiveHeading01, expressiveHeading02, expressiveHeading03, expressiveHeading04, expressiveHeading05, expressiveHeading06, expressiveParagraph01, quotation01, quotation02, display01, display02, display03, display04 } from '@carbon/type';
4
5
  import { spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, layout01, layout02, layout03, layout04, layout05, layout06, layout07, container01, container02, container03, container04, container05, iconSize01, iconSize02, unstable_tokens as unstable_tokens$1 } from '@carbon/layout';
5
6
  export { spacing01, spacing02, spacing03, spacing04, spacing05, spacing06, spacing07, spacing08, spacing09, spacing10, spacing11, spacing12, fluidSpacing01, fluidSpacing02, fluidSpacing03, fluidSpacing04, layout01, layout02, layout03, layout04, layout05, layout06, layout07, container01, container02, container03, container04, container05, iconSize01, iconSize02 } from '@carbon/layout';
6
7
 
8
+ function _defineProperty(obj, key, value) {
9
+ if (key in obj) {
10
+ Object.defineProperty(obj, key, {
11
+ value: value,
12
+ enumerable: true,
13
+ configurable: true,
14
+ writable: true
15
+ });
16
+ } else {
17
+ obj[key] = value;
18
+ }
19
+
20
+ return obj;
21
+ }
22
+
23
+ function ownKeys(object, enumerableOnly) {
24
+ var keys = Object.keys(object);
25
+
26
+ if (Object.getOwnPropertySymbols) {
27
+ var symbols = Object.getOwnPropertySymbols(object);
28
+ if (enumerableOnly) symbols = symbols.filter(function (sym) {
29
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
30
+ });
31
+ keys.push.apply(keys, symbols);
32
+ }
33
+
34
+ return keys;
35
+ }
36
+
37
+ function _objectSpread2(target) {
38
+ for (var i = 1; i < arguments.length; i++) {
39
+ var source = arguments[i] != null ? arguments[i] : {};
40
+
41
+ if (i % 2) {
42
+ ownKeys(Object(source), true).forEach(function (key) {
43
+ _defineProperty(target, key, source[key]);
44
+ });
45
+ } else if (Object.getOwnPropertyDescriptors) {
46
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
47
+ } else {
48
+ ownKeys(Object(source)).forEach(function (key) {
49
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
50
+ });
51
+ }
52
+ }
53
+
54
+ return target;
55
+ }
56
+
57
+ /**
58
+ * Adjust a given token's lightness by a specified percentage
59
+ * Example: token = hsl(10, 10, 10);
60
+ * adjustLightness(token, 5) === hsl(10, 10, 15);
61
+ * adjustLightness(token, -5) === hsl(10, 10, 5);
62
+ * @param {string} token
63
+ * @param {integer} shift The number of percentage points (positive or negative) by which to shift the lightness of a token.
64
+ * @returns {string}
65
+ */
66
+
67
+ function adjustLightness(token, shift) {
68
+ var original = Color(token).hsl().object();
69
+ return Color(_objectSpread2({}, original, {
70
+ l: original.l += shift
71
+ })).round().hex().toLowerCase();
72
+ }
73
+
7
74
  /**
8
75
  * Copyright IBM Corp. 2018, 2018
9
76
  *
@@ -60,7 +127,7 @@ var activeUI = gray30;
60
127
  var selectedUI = gray20;
61
128
  var inverseHoverUI = '#4c4c4c';
62
129
  var hoverSelectedUI = '#cacaca';
63
- var hoverDanger = '#ba1b23';
130
+ var hoverDanger = adjustLightness(danger, -8);
64
131
  var activeDanger = red80;
65
132
  var hoverRow = '#e5e5e5';
66
133
  var visitedLink = purple60;
@@ -261,7 +328,7 @@ var activeUI$1 = gray30;
261
328
  var selectedUI$1 = gray20;
262
329
  var inverseHoverUI$1 = '#4c4c4c';
263
330
  var hoverSelectedUI$1 = '#cacaca';
264
- var hoverDanger$1 = '#ba1b23';
331
+ var hoverDanger$1 = adjustLightness(danger$1, -8);
265
332
  var activeDanger$1 = red80;
266
333
  var hoverRow$1 = '#e5e5e5';
267
334
  var visitedLink$1 = purple60;
@@ -462,13 +529,13 @@ var activeUI$2 = gray70;
462
529
  var selectedUI$2 = gray80;
463
530
  var inverseHoverUI$2 = '#e5e5e5';
464
531
  var hoverSelectedUI$2 = '#4c4c4c';
465
- var hoverDanger$2 = '#ba1b23';
532
+ var hoverDanger$2 = adjustLightness(danger$2, -8);
466
533
  var activeDanger$2 = red80;
467
534
  var hoverRow$2 = '#353535';
468
535
  var visitedLink$2 = purple40;
469
536
  var disabled01$2 = gray90;
470
537
  var disabled02$2 = gray70;
471
- var disabled03$2 = gray60;
538
+ var disabled03$2 = gray50;
472
539
  var highlight$2 = blue80;
473
540
  var skeleton01$2 = '#353535';
474
541
  var skeleton02$2 = gray80;
@@ -663,13 +730,13 @@ var activeUI$3 = gray60;
663
730
  var selectedUI$3 = gray70;
664
731
  var inverseHoverUI$3 = '#e5e5e5';
665
732
  var hoverSelectedUI$3 = '#656565';
666
- var hoverDanger$3 = '#ba1b23';
733
+ var hoverDanger$3 = adjustLightness(danger$3, -8);
667
734
  var activeDanger$3 = red80;
668
735
  var hoverRow$3 = '#4c4c4c';
669
736
  var visitedLink$3 = purple40;
670
737
  var disabled01$3 = gray80;
671
738
  var disabled02$3 = gray60;
672
- var disabled03$3 = gray50;
739
+ var disabled03$3 = gray40;
673
740
  var highlight$3 = blue70;
674
741
  var skeleton01$3 = '#353535';
675
742
  var skeleton02$3 = gray70;
package/lib/index.js CHANGED
@@ -2,10 +2,79 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
6
+
7
+ var Color = _interopDefault(require('color'));
5
8
  var colors = require('@carbon/colors');
6
9
  var type = require('@carbon/type');
7
10
  var layout = require('@carbon/layout');
8
11
 
12
+ function _defineProperty(obj, key, value) {
13
+ if (key in obj) {
14
+ Object.defineProperty(obj, key, {
15
+ value: value,
16
+ enumerable: true,
17
+ configurable: true,
18
+ writable: true
19
+ });
20
+ } else {
21
+ obj[key] = value;
22
+ }
23
+
24
+ return obj;
25
+ }
26
+
27
+ function ownKeys(object, enumerableOnly) {
28
+ var keys = Object.keys(object);
29
+
30
+ if (Object.getOwnPropertySymbols) {
31
+ var symbols = Object.getOwnPropertySymbols(object);
32
+ if (enumerableOnly) symbols = symbols.filter(function (sym) {
33
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
34
+ });
35
+ keys.push.apply(keys, symbols);
36
+ }
37
+
38
+ return keys;
39
+ }
40
+
41
+ function _objectSpread2(target) {
42
+ for (var i = 1; i < arguments.length; i++) {
43
+ var source = arguments[i] != null ? arguments[i] : {};
44
+
45
+ if (i % 2) {
46
+ ownKeys(Object(source), true).forEach(function (key) {
47
+ _defineProperty(target, key, source[key]);
48
+ });
49
+ } else if (Object.getOwnPropertyDescriptors) {
50
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
51
+ } else {
52
+ ownKeys(Object(source)).forEach(function (key) {
53
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
54
+ });
55
+ }
56
+ }
57
+
58
+ return target;
59
+ }
60
+
61
+ /**
62
+ * Adjust a given token's lightness by a specified percentage
63
+ * Example: token = hsl(10, 10, 10);
64
+ * adjustLightness(token, 5) === hsl(10, 10, 15);
65
+ * adjustLightness(token, -5) === hsl(10, 10, 5);
66
+ * @param {string} token
67
+ * @param {integer} shift The number of percentage points (positive or negative) by which to shift the lightness of a token.
68
+ * @returns {string}
69
+ */
70
+
71
+ function adjustLightness(token, shift) {
72
+ var original = Color(token).hsl().object();
73
+ return Color(_objectSpread2({}, original, {
74
+ l: original.l += shift
75
+ })).round().hex().toLowerCase();
76
+ }
77
+
9
78
  /**
10
79
  * Copyright IBM Corp. 2018, 2018
11
80
  *
@@ -62,7 +131,7 @@ var activeUI = colors.gray30;
62
131
  var selectedUI = colors.gray20;
63
132
  var inverseHoverUI = '#4c4c4c';
64
133
  var hoverSelectedUI = '#cacaca';
65
- var hoverDanger = '#ba1b23';
134
+ var hoverDanger = adjustLightness(danger, -8);
66
135
  var activeDanger = colors.red80;
67
136
  var hoverRow = '#e5e5e5';
68
137
  var visitedLink = colors.purple60;
@@ -263,7 +332,7 @@ var activeUI$1 = colors.gray30;
263
332
  var selectedUI$1 = colors.gray20;
264
333
  var inverseHoverUI$1 = '#4c4c4c';
265
334
  var hoverSelectedUI$1 = '#cacaca';
266
- var hoverDanger$1 = '#ba1b23';
335
+ var hoverDanger$1 = adjustLightness(danger$1, -8);
267
336
  var activeDanger$1 = colors.red80;
268
337
  var hoverRow$1 = '#e5e5e5';
269
338
  var visitedLink$1 = colors.purple60;
@@ -464,13 +533,13 @@ var activeUI$2 = colors.gray70;
464
533
  var selectedUI$2 = colors.gray80;
465
534
  var inverseHoverUI$2 = '#e5e5e5';
466
535
  var hoverSelectedUI$2 = '#4c4c4c';
467
- var hoverDanger$2 = '#ba1b23';
536
+ var hoverDanger$2 = adjustLightness(danger$2, -8);
468
537
  var activeDanger$2 = colors.red80;
469
538
  var hoverRow$2 = '#353535';
470
539
  var visitedLink$2 = colors.purple40;
471
540
  var disabled01$2 = colors.gray90;
472
541
  var disabled02$2 = colors.gray70;
473
- var disabled03$2 = colors.gray60;
542
+ var disabled03$2 = colors.gray50;
474
543
  var highlight$2 = colors.blue80;
475
544
  var skeleton01$2 = '#353535';
476
545
  var skeleton02$2 = colors.gray80;
@@ -665,13 +734,13 @@ var activeUI$3 = colors.gray60;
665
734
  var selectedUI$3 = colors.gray70;
666
735
  var inverseHoverUI$3 = '#e5e5e5';
667
736
  var hoverSelectedUI$3 = '#656565';
668
- var hoverDanger$3 = '#ba1b23';
737
+ var hoverDanger$3 = adjustLightness(danger$3, -8);
669
738
  var activeDanger$3 = colors.red80;
670
739
  var hoverRow$3 = '#4c4c4c';
671
740
  var visitedLink$3 = colors.purple40;
672
741
  var disabled01$3 = colors.gray80;
673
742
  var disabled02$3 = colors.gray60;
674
- var disabled03$3 = colors.gray50;
743
+ var disabled03$3 = colors.gray40;
675
744
  var highlight$3 = colors.blue70;
676
745
  var skeleton01$3 = '#353535';
677
746
  var skeleton02$3 = colors.gray70;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@carbon/themes",
3
3
  "description": "Themes for applying color in the Carbon Design System",
4
- "version": "10.10.0-rc.0",
4
+ "version": "10.10.1",
5
5
  "license": "Apache-2.0",
6
6
  "main": "lib/index.js",
7
7
  "module": "es/index.js",
@@ -24,14 +24,15 @@
24
24
  "build": "yarn clean && bundler bundle src/index.js --name CarbonThemes && node tasks/build.js && bundler check \"scss/*.scss\" && bundler sassdoc \"scss/**/*.scss\""
25
25
  },
26
26
  "dependencies": {
27
- "@carbon/colors": "^10.8.0-rc.0",
28
- "@carbon/layout": "^10.8.0-rc.0",
29
- "@carbon/type": "^10.9.0-rc.0"
27
+ "@carbon/colors": "^10.8.0",
28
+ "@carbon/layout": "^10.8.1",
29
+ "@carbon/type": "^10.9.1",
30
+ "color": "^3.1.2"
30
31
  },
31
32
  "devDependencies": {
32
- "@carbon/cli-reporter": "10.3.0",
33
- "@carbon/scss-generator": "^10.6.0-rc.0",
34
- "@carbon/test-utils": "^10.7.0-rc.0",
33
+ "@carbon/cli-reporter": "^10.3.0",
34
+ "@carbon/scss-generator": "^10.6.0",
35
+ "@carbon/test-utils": "^10.7.0",
35
36
  "change-case": "^4.1.1",
36
37
  "core-js": "^3.0.1",
37
38
  "fs-extra": "^8.1.0",
@@ -39,5 +40,5 @@
39
40
  "node-sass": "^4.13.1",
40
41
  "rimraf": "^3.0.0"
41
42
  },
42
- "gitHead": "fd36b443faf91ffb99359c6cef95e8fe95e5e616"
43
+ "gitHead": "7d43dabaf011f2bcc70798b96c30173f7fc54e44"
43
44
  }
package/scss/generated/_themes.scss CHANGED
@@ -56,7 +56,7 @@ $carbon--theme--white: (
56
56
  selected-ui: #e0e0e0,
57
57
  inverse-hover-ui: #4c4c4c,
58
58
  hover-selected-ui: #cacaca,
59
- hover-danger: #ba1b23,
59
+ hover-danger: #b81921,
60
60
  active-danger: #750e13,
61
61
  hover-row: #e5e5e5,
62
62
  visited-link: #8a3ffc,
@@ -556,6 +556,7 @@ $carbon--theme--g90: map-merge(
556
556
  visited-link: #be95ff,
557
557
  disabled-01: #393939,
558
558
  disabled-02: #6f6f6f,
559
+ disabled-03: #a8a8a8,
559
560
  highlight: #0043ce,
560
561
  skeleton-01: #353535,
561
562
  skeleton-02: #525252,
@@ -618,7 +619,6 @@ $carbon--theme--g100: map-merge(
618
619
  visited-link: #be95ff,
619
620
  disabled-01: #262626,
620
621
  disabled-02: #525252,
621
- disabled-03: #6f6f6f,
622
622
  highlight: #002d9c,
623
623
  skeleton-01: #353535,
624
624
  skeleton-02: #393939,
package/scss/generated/_tokens.scss CHANGED
@@ -547,7 +547,7 @@ $hover-danger: if(
547
547
  global-variable-exists('carbon--theme') and
548
548
  map-has-key($carbon--theme, 'hover-danger'),
549
549
  map-get($carbon--theme, 'hover-danger'),
550
- #ba1b23
550
+ #b81921
551
551
  ) !default;
552
552
 
553
553
  /// Danger active; `$support-01` active
package/src/g10.js CHANGED
@@ -4,6 +4,7 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
+ import { adjustLightness } from './tools';
7
8
 
8
9
  import {
9
10
  // Blue
@@ -111,7 +112,7 @@ export const inverseHoverUI = '#4c4c4c';
111
112
 
112
113
  export const hoverSelectedUI = '#cacaca';
113
114
 
114
- export const hoverDanger = '#ba1b23';
115
+ export const hoverDanger = adjustLightness(danger, -8);
115
116
  export const activeDanger = red80;
116
117
 
117
118
  export const hoverRow = '#e5e5e5';
package/src/g100.js CHANGED
@@ -4,6 +4,7 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
+ import { adjustLightness } from './tools';
7
8
 
8
9
  import {
9
10
  // Blue
@@ -110,7 +111,7 @@ export const inverseHoverUI = '#e5e5e5';
110
111
 
111
112
  export const hoverSelectedUI = '#4c4c4c';
112
113
 
113
- export const hoverDanger = '#ba1b23';
114
+ export const hoverDanger = adjustLightness(danger, -8);
114
115
  export const activeDanger = red80;
115
116
 
116
117
  export const hoverRow = '#353535';
@@ -119,7 +120,7 @@ export const visitedLink = purple40;
119
120
 
120
121
  export const disabled01 = gray90;
121
122
  export const disabled02 = gray70;
122
- export const disabled03 = gray60;
123
+ export const disabled03 = gray50;
123
124
 
124
125
  export const highlight = blue80;
125
126
 
package/src/g90.js CHANGED
@@ -4,6 +4,7 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
+ import { adjustLightness } from './tools';
7
8
 
8
9
  import {
9
10
  // Blue
@@ -17,6 +18,7 @@ import {
17
18
  // Gray
18
19
  gray10,
19
20
  gray30,
21
+ gray40,
20
22
  gray50,
21
23
  gray60,
22
24
  gray70,
@@ -111,7 +113,7 @@ export const inverseHoverUI = '#e5e5e5';
111
113
 
112
114
  export const hoverSelectedUI = '#656565';
113
115
 
114
- export const hoverDanger = '#ba1b23';
116
+ export const hoverDanger = adjustLightness(danger, -8);
115
117
  export const activeDanger = red80;
116
118
 
117
119
  export const hoverRow = '#4c4c4c';
@@ -120,7 +122,7 @@ export const visitedLink = purple40;
120
122
 
121
123
  export const disabled01 = gray80;
122
124
  export const disabled02 = gray60;
123
- export const disabled03 = gray50;
125
+ export const disabled03 = gray40;
124
126
 
125
127
  export const highlight = blue70;
126
128
 
package/src/tools.js ADDED
@@ -0,0 +1,27 @@
1
+ /**
2
+ * Copyright IBM Corp. 2016, 2018
3
+ *
4
+ * This source code is licensed under the Apache-2.0 license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import Color from 'color';
8
+
9
+ /**
10
+ * Adjust a given token's lightness by a specified percentage
11
+ * Example: token = hsl(10, 10, 10);
12
+ * adjustLightness(token, 5) === hsl(10, 10, 15);
13
+ * adjustLightness(token, -5) === hsl(10, 10, 5);
14
+ * @param {string} token
15
+ * @param {integer} shift The number of percentage points (positive or negative) by which to shift the lightness of a token.
16
+ * @returns {string}
17
+ */
18
+ export function adjustLightness(token, shift) {
19
+ const original = Color(token)
20
+ .hsl()
21
+ .object();
22
+
23
+ return Color({ ...original, l: (original.l += shift) })
24
+ .round()
25
+ .hex()
26
+ .toLowerCase();
27
+ }
package/src/white.js CHANGED
@@ -4,6 +4,7 @@
4
4
  * This source code is licensed under the Apache-2.0 license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
+ import { adjustLightness } from './tools';
7
8
 
8
9
  import {
9
10
  // Blue
@@ -111,7 +112,7 @@ export const inverseHoverUI = '#4c4c4c';
111
112
 
112
113
  export const hoverSelectedUI = '#cacaca';
113
114
 
114
- export const hoverDanger = '#ba1b23';
115
+ export const hoverDanger = adjustLightness(danger, -8);
115
116
  export const activeDanger = red80;
116
117
 
117
118
  export const hoverRow = '#e5e5e5';
package/umd/index.js CHANGED
@@ -1,8 +1,76 @@
1
1
  (function (global, factory) {
2
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@carbon/colors'), require('@carbon/type'), require('@carbon/layout')) :
3
- typeof define === 'function' && define.amd ? define(['exports', '@carbon/colors', '@carbon/type', '@carbon/layout'], factory) :
4
- (factory((global.CarbonThemes = {}),global.CarbonColors,global.CarbonType,global.CarbonLayout));
5
- }(this, (function (exports,colors,type,layout) { 'use strict';
2
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('color'), require('@carbon/colors'), require('@carbon/type'), require('@carbon/layout')) :
3
+ typeof define === 'function' && define.amd ? define(['exports', 'color', '@carbon/colors', '@carbon/type', '@carbon/layout'], factory) :
4
+ (factory((global.CarbonThemes = {}),global.Color,global.CarbonColors,global.CarbonType,global.CarbonLayout));
5
+ }(this, (function (exports,Color,colors,type,layout) { 'use strict';
6
+
7
+ Color = Color && Color.hasOwnProperty('default') ? Color['default'] : Color;
8
+
9
+ function _defineProperty(obj, key, value) {
10
+ if (key in obj) {
11
+ Object.defineProperty(obj, key, {
12
+ value: value,
13
+ enumerable: true,
14
+ configurable: true,
15
+ writable: true
16
+ });
17
+ } else {
18
+ obj[key] = value;
19
+ }
20
+
21
+ return obj;
22
+ }
23
+
24
+ function ownKeys(object, enumerableOnly) {
25
+ var keys = Object.keys(object);
26
+
27
+ if (Object.getOwnPropertySymbols) {
28
+ var symbols = Object.getOwnPropertySymbols(object);
29
+ if (enumerableOnly) symbols = symbols.filter(function (sym) {
30
+ return Object.getOwnPropertyDescriptor(object, sym).enumerable;
31
+ });
32
+ keys.push.apply(keys, symbols);
33
+ }
34
+
35
+ return keys;
36
+ }
37
+
38
+ function _objectSpread2(target) {
39
+ for (var i = 1; i < arguments.length; i++) {
40
+ var source = arguments[i] != null ? arguments[i] : {};
41
+
42
+ if (i % 2) {
43
+ ownKeys(Object(source), true).forEach(function (key) {
44
+ _defineProperty(target, key, source[key]);
45
+ });
46
+ } else if (Object.getOwnPropertyDescriptors) {
47
+ Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
48
+ } else {
49
+ ownKeys(Object(source)).forEach(function (key) {
50
+ Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
51
+ });
52
+ }
53
+ }
54
+
55
+ return target;
56
+ }
57
+
58
+ /**
59
+ * Adjust a given token's lightness by a specified percentage
60
+ * Example: token = hsl(10, 10, 10);
61
+ * adjustLightness(token, 5) === hsl(10, 10, 15);
62
+ * adjustLightness(token, -5) === hsl(10, 10, 5);
63
+ * @param {string} token
64
+ * @param {integer} shift The number of percentage points (positive or negative) by which to shift the lightness of a token.
65
+ * @returns {string}
66
+ */
67
+
68
+ function adjustLightness(token, shift) {
69
+ var original = Color(token).hsl().object();
70
+ return Color(_objectSpread2({}, original, {
71
+ l: original.l += shift
72
+ })).round().hex().toLowerCase();
73
+ }
6
74
 
7
75
  /**
8
76
  * Copyright IBM Corp. 2018, 2018
@@ -60,7 +128,7 @@
60
128
  var selectedUI = colors.gray20;
61
129
  var inverseHoverUI = '#4c4c4c';
62
130
  var hoverSelectedUI = '#cacaca';
63
- var hoverDanger = '#ba1b23';
131
+ var hoverDanger = adjustLightness(danger, -8);
64
132
  var activeDanger = colors.red80;
65
133
  var hoverRow = '#e5e5e5';
66
134
  var visitedLink = colors.purple60;
@@ -261,7 +329,7 @@
261
329
  var selectedUI$1 = colors.gray20;
262
330
  var inverseHoverUI$1 = '#4c4c4c';
263
331
  var hoverSelectedUI$1 = '#cacaca';
264
- var hoverDanger$1 = '#ba1b23';
332
+ var hoverDanger$1 = adjustLightness(danger$1, -8);
265
333
  var activeDanger$1 = colors.red80;
266
334
  var hoverRow$1 = '#e5e5e5';
267
335
  var visitedLink$1 = colors.purple60;
@@ -462,13 +530,13 @@
462
530
  var selectedUI$2 = colors.gray80;
463
531
  var inverseHoverUI$2 = '#e5e5e5';
464
532
  var hoverSelectedUI$2 = '#4c4c4c';
465
- var hoverDanger$2 = '#ba1b23';
533
+ var hoverDanger$2 = adjustLightness(danger$2, -8);
466
534
  var activeDanger$2 = colors.red80;
467
535
  var hoverRow$2 = '#353535';
468
536
  var visitedLink$2 = colors.purple40;
469
537
  var disabled01$2 = colors.gray90;
470
538
  var disabled02$2 = colors.gray70;
471
- var disabled03$2 = colors.gray60;
539
+ var disabled03$2 = colors.gray50;
472
540
  var highlight$2 = colors.blue80;
473
541
  var skeleton01$2 = '#353535';
474
542
  var skeleton02$2 = colors.gray80;
@@ -663,13 +731,13 @@
663
731
  var selectedUI$3 = colors.gray70;
664
732
  var inverseHoverUI$3 = '#e5e5e5';
665
733
  var hoverSelectedUI$3 = '#656565';
666
- var hoverDanger$3 = '#ba1b23';
734
+ var hoverDanger$3 = adjustLightness(danger$3, -8);
667
735
  var activeDanger$3 = colors.red80;
668
736
  var hoverRow$3 = '#4c4c4c';
669
737
  var visitedLink$3 = colors.purple40;
670
738
  var disabled01$3 = colors.gray80;
671
739
  var disabled02$3 = colors.gray60;
672
- var disabled03$3 = colors.gray50;
740
+ var disabled03$3 = colors.gray40;
673
741
  var highlight$3 = colors.blue70;
674
742
  var skeleton01$3 = '#353535';
675
743
  var skeleton02$3 = colors.gray70;