@bundle-stats/ui 4.1.1-alpha.0 → 4.1.1-alpha.3

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 (9) hide show
  1. package/lib/css/variables.css +56 -56
  2. package/lib/prototypes/typography.stories.js +27 -1
  3. package/lib/ui/tooltip/tooltip.js +5 -2
  4. package/lib-esm/css/variables.css +56 -56
  5. package/lib-esm/prototypes/typography.stories.js +26 -1
  6. package/lib-esm/ui/tooltip/tooltip.js +4 -1
  7. package/package.json +3 -3
  8. package/src/css/variables.css +56 -56
  9. package/src/ui/tooltip/tooltip.jsx +4 -1
package/lib/css/variables.css CHANGED
@@ -23,42 +23,42 @@
23
23
  --size-xxlarge: 1.424rem;
24
24
  --size-xxxlarge: 1.602rem;
25
25
 
26
- --line-height: 1.6em;
26
+ --line-height: 1.66em;
27
27
 
28
28
  /*
29
29
  * Color scheme:
30
- * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
31
- * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23585d63&mcgpalette4=%233385d6&themename=mcgtheme
30
+ * https://coolors.co/287acc-da444e-55b950-f6e179-192339
31
+ * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
32
32
  */
33
- --color-gray-25: #fafbfb;
34
- --color-gray-50: #ebeced;
35
- --color-gray-100: #cdced0;
36
- --color-gray-200: #acaeb1;
37
- --color-gray-300: #8a8e92;
38
- --color-gray-400: #71757a;
39
- --color-gray-500: #585d63;
40
- --color-gray-600: #50555b;
41
- --color-gray-700: #474b51;
42
- --color-gray-800: #3d4147;
43
- --color-gray-900: #2d3035;
33
+ --color-gray-25: #f3f3f4;
34
+ --color-gray-50 : #eaebec;
35
+ --color-gray-100: #cbcdd0;
36
+ --color-gray-200: #a8acb0;
37
+ --color-gray-300: #858a90;
38
+ --color-gray-400: #6a7179;
39
+ --color-gray-500: #505861;
40
+ --color-gray-600: #495059;
41
+ --color-gray-700: #40474f;
42
+ --color-gray-800: #373d45;
43
+ --color-gray-900: #272d33;
44
44
 
45
45
  --color-gray-ultra-light: var(--color-gray-200);
46
46
  --color-gray-light: var(--color-gray-300);
47
47
  --color-gray: var(--color-gray-500);
48
- --color-gray-dark: var(--color-gray-600);
49
- --color-gray-ultra-dark: var(--color-gray-700);
48
+ --color-gray-dark: var(--color-gray-700);
49
+ --color-gray-ultra-dark: var(--color-gray-900);
50
50
 
51
51
  --color-red-25: #fdf5f6;
52
- --color-red-50: #fbebec;
53
- --color-red-100: #f5cccf;
54
- --color-red-200: #eeaaaf;
55
- --color-red-300: #e7888e;
56
- --color-red-400: #e26f76;
57
- --color-red-500: #dd555e;
58
- --color-red-600: #d94e56;
59
- --color-red-700: #d4444c;
60
- --color-red-800: #cf3b42;
61
- --color-red-900: #c72a31;
52
+ --color-red-50: #fbe9ea;
53
+ --color-red-100: #f4c7ca;
54
+ --color-red-200: #eda2a7;
55
+ --color-red-300: #e57c83;
56
+ --color-red-400: #e06069;
57
+ --color-red-500: #da444e;
58
+ --color-red-600: #d63e47;
59
+ --color-red-700: #d0353d;
60
+ --color-red-800: #cb2d35;
61
+ --color-red-900: #c21f25;
62
62
  --color-red-ultra-light: var(--color-red-100);
63
63
  --color-red-light: var(--color-red-300);
64
64
  --color-red: var(--color-red-500);
@@ -66,16 +66,16 @@
66
66
  --color-red-ultra-dark: var(--color-red-900);
67
67
 
68
68
  --color-blue-25: #f3f8fd;
69
- --color-blue-50: #e7f0fa;
70
- --color-blue-100: #c2daf3;
71
- --color-blue-200: #99c2eb;
72
- --color-blue-300: #70aae2;
73
- --color-blue-400: #5297dc;
74
- --color-blue-500: #3385d6;
75
- --color-blue-600: #2e7dd1;
76
- --color-blue-700: #2772cc;
77
- --color-blue-800: #2068c6;
78
- --color-blue-900: #1455bc;
69
+ --color-blue-50: #e5eff9;
70
+ --color-blue-100: #bfd7f0;
71
+ --color-blue-200: #94bde6;
72
+ --color-blue-300: #69a2db;
73
+ --color-blue-400: #488ed4;
74
+ --color-blue-500: #287acc;
75
+ --color-blue-600: #2472c7;
76
+ --color-blue-700: #1e67c0;
77
+ --color-blue-800: #185db9;
78
+ --color-blue-900: #0f4aad;
79
79
 
80
80
  --color-blue-ultra-light: var(--color-blue-100);
81
81
  --color-blue-light: var(--color-blue-300);
@@ -84,16 +84,16 @@
84
84
  --color-blue-ultra-dark: var(--color-blue-900);
85
85
 
86
86
  --color-green-25: #f6fbf6;
87
- --color-green-50: #ecf7ec;
88
- --color-green-100: #d0eccf;
89
- --color-green-200: #b1dfaf;
90
- --color-green-300: #92d28e;
91
- --color-green-400: #7ac976;
92
- --color-green-500: #63bf5e;
93
- --color-green-600: #5bb956;
94
- --color-green-700: #51b14c;
95
- --color-green-800: #47a942;
96
- --color-green-900: #359b31;
87
+ --color-green-50: #ebf7ea;
88
+ --color-green-100: #cceacb;
89
+ --color-green-200: #aadca8;
90
+ --color-green-300: #88ce85;
91
+ --color-green-400: #6fc46a;
92
+ --color-green-500: #55b950;
93
+ --color-green-600: #4eb249;
94
+ --color-green-700: #44aa40;
95
+ --color-green-800: #3ba237;
96
+ --color-green-900: #2a9327;
97
97
 
98
98
  --color-green-ultra-light: var(--color-green-100);
99
99
  --color-green-light: var(--color-green-300);
@@ -102,16 +102,16 @@
102
102
  --color-green-ultra-dark: var(--color-green-900);
103
103
 
104
104
  --color-yellow-25: #FFFDF2;
105
- --color-yellow-50: #fefcef;
106
- --color-yellow-100: #fdf7d8;
107
- --color-yellow-200: #fbf1be;
108
- --color-yellow-300: #f9eba4;
109
- --color-yellow-400: #f8e791;
110
- --color-yellow-500: #f7e37d;
111
- --color-yellow-600: #f6e075;
112
- --color-yellow-700: #f5dc6a;
113
- --color-yellow-800: #f3d860;
114
- --color-yellow-900: #f1d04d;
105
+ --color-yellow-50: #fefbef;
106
+ --color-yellow-100: #fcf6d7;
107
+ --color-yellow-200: #fbf0bc;
108
+ --color-yellow-300: #f9eaa1;
109
+ --color-yellow-400: #f7e68d;
110
+ --color-yellow-500: #f6e179;
111
+ --color-yellow-600: #f5dd71;
112
+ --color-yellow-700: #f3d966;
113
+ --color-yellow-800: #f2d55c;
114
+ --color-yellow-900: #efcd49;
115
115
 
116
116
  --color-yellow-light-background: var(--color-yellow-25);
117
117
  --color-yellow-ultra-light: var(--color-yellow-100);
package/lib/prototypes/typography.stories.js CHANGED
@@ -10,6 +10,8 @@ var _stories = require("../stories");
10
10
 
11
11
  var _layout = require("../layout");
12
12
 
13
+ var _chartColors = _interopRequireDefault(require("../chart-colors.json"));
14
+
13
15
  var _typography = _interopRequireDefault(require("./typography.md"));
14
16
 
15
17
  var _typographyModule = _interopRequireDefault(require("./typography.module.css"));
@@ -54,6 +56,19 @@ var Item = function Item(_ref) {
54
56
  flex: '1 1 20%'
55
57
  }
56
58
  }, "".concat(colorName, " ").concat(valueName));
59
+ }; // eslint-disable-next-line react/prop-types
60
+
61
+
62
+ var ItemColorValue = function ItemColorValue(_ref2) {
63
+ var value = _ref2.value;
64
+ return /*#__PURE__*/_react["default"].createElement("div", {
65
+ style: {
66
+ background: value,
67
+ color: 'var(--color-light)',
68
+ padding: '12px',
69
+ flex: '1 1 20%'
70
+ }
71
+ }, value);
57
72
  };
58
73
 
59
74
  var COLORS = ['blue', 'red', 'green', 'yellow', 'gray'];
@@ -82,5 +97,16 @@ stories.add('color sheme', function () {
82
97
  valueName: valueName
83
98
  });
84
99
  }));
85
- }));
100
+ }), /*#__PURE__*/_react["default"].createElement("hr", null), /*#__PURE__*/_react["default"].createElement("h3", null, "Chart colors"), /*#__PURE__*/_react["default"].createElement("div", {
101
+ style: {
102
+ display: 'flex',
103
+ marginBottom: '24px',
104
+ flexWrap: 'wrap'
105
+ }
106
+ }, _chartColors["default"].map(function (color) {
107
+ return /*#__PURE__*/_react["default"].createElement(ItemColorValue, {
108
+ key: color,
109
+ value: color
110
+ });
111
+ })));
86
112
  });
package/lib/ui/tooltip/tooltip.js CHANGED
@@ -15,7 +15,7 @@ var _tooltip = require("ariakit/tooltip");
15
15
 
16
16
  var _tooltipModule = _interopRequireDefault(require("./tooltip.module.css"));
17
17
 
18
- var _excluded = ["className", "title", "children", "as", "containerRef", "darkMode"];
18
+ var _excluded = ["className", "tooltipClassName", "title", "children", "as", "containerRef", "darkMode"];
19
19
 
20
20
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
21
21
 
@@ -27,6 +27,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
27
27
 
28
28
  var Tooltip = function Tooltip(props) {
29
29
  var className = props.className,
30
+ tooltipClassName = props.tooltipClassName,
30
31
  title = props.title,
31
32
  children = props.children,
32
33
  Component = props.as,
@@ -45,7 +46,7 @@ var Tooltip = function Tooltip(props) {
45
46
  ref: ref
46
47
  } : {}, restProps), children), title && /*#__PURE__*/_react["default"].createElement(_tooltip.Tooltip, {
47
48
  state: tooltip,
48
- className: (0, _classnames["default"])(_tooltipModule["default"].tooltip, darkMode && _tooltipModule["default"].tooltipDarkMode)
49
+ className: (0, _classnames["default"])(_tooltipModule["default"].tooltip, tooltipClassName, darkMode && _tooltipModule["default"].tooltipDarkMode)
49
50
  }, /*#__PURE__*/_react["default"].createElement(_tooltip.TooltipArrow, {
50
51
  state: tooltip,
51
52
  className: _tooltipModule["default"].arrow,
@@ -56,6 +57,7 @@ var Tooltip = function Tooltip(props) {
56
57
  exports.Tooltip = Tooltip;
57
58
  Tooltip.defaultProps = {
58
59
  className: '',
60
+ tooltipClassName: '',
59
61
  title: '',
60
62
  as: 'span',
61
63
  containerRef: null,
@@ -63,6 +65,7 @@ Tooltip.defaultProps = {
63
65
  };
64
66
  Tooltip.propTypes = {
65
67
  className: _propTypes["default"].string,
68
+ tooltipClassName: _propTypes["default"].string,
66
69
  title: _propTypes["default"].node,
67
70
  children: _propTypes["default"].node.isRequired,
68
71
  as: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].element, _propTypes["default"].func]),
package/lib-esm/css/variables.css CHANGED
@@ -23,42 +23,42 @@
23
23
  --size-xxlarge: 1.424rem;
24
24
  --size-xxxlarge: 1.602rem;
25
25
 
26
- --line-height: 1.6em;
26
+ --line-height: 1.66em;
27
27
 
28
28
  /*
29
29
  * Color scheme:
30
- * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
31
- * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23585d63&mcgpalette4=%233385d6&themename=mcgtheme
30
+ * https://coolors.co/287acc-da444e-55b950-f6e179-192339
31
+ * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
32
32
  */
33
- --color-gray-25: #fafbfb;
34
- --color-gray-50: #ebeced;
35
- --color-gray-100: #cdced0;
36
- --color-gray-200: #acaeb1;
37
- --color-gray-300: #8a8e92;
38
- --color-gray-400: #71757a;
39
- --color-gray-500: #585d63;
40
- --color-gray-600: #50555b;
41
- --color-gray-700: #474b51;
42
- --color-gray-800: #3d4147;
43
- --color-gray-900: #2d3035;
33
+ --color-gray-25: #f3f3f4;
34
+ --color-gray-50 : #eaebec;
35
+ --color-gray-100: #cbcdd0;
36
+ --color-gray-200: #a8acb0;
37
+ --color-gray-300: #858a90;
38
+ --color-gray-400: #6a7179;
39
+ --color-gray-500: #505861;
40
+ --color-gray-600: #495059;
41
+ --color-gray-700: #40474f;
42
+ --color-gray-800: #373d45;
43
+ --color-gray-900: #272d33;
44
44
 
45
45
  --color-gray-ultra-light: var(--color-gray-200);
46
46
  --color-gray-light: var(--color-gray-300);
47
47
  --color-gray: var(--color-gray-500);
48
- --color-gray-dark: var(--color-gray-600);
49
- --color-gray-ultra-dark: var(--color-gray-700);
48
+ --color-gray-dark: var(--color-gray-700);
49
+ --color-gray-ultra-dark: var(--color-gray-900);
50
50
 
51
51
  --color-red-25: #fdf5f6;
52
- --color-red-50: #fbebec;
53
- --color-red-100: #f5cccf;
54
- --color-red-200: #eeaaaf;
55
- --color-red-300: #e7888e;
56
- --color-red-400: #e26f76;
57
- --color-red-500: #dd555e;
58
- --color-red-600: #d94e56;
59
- --color-red-700: #d4444c;
60
- --color-red-800: #cf3b42;
61
- --color-red-900: #c72a31;
52
+ --color-red-50: #fbe9ea;
53
+ --color-red-100: #f4c7ca;
54
+ --color-red-200: #eda2a7;
55
+ --color-red-300: #e57c83;
56
+ --color-red-400: #e06069;
57
+ --color-red-500: #da444e;
58
+ --color-red-600: #d63e47;
59
+ --color-red-700: #d0353d;
60
+ --color-red-800: #cb2d35;
61
+ --color-red-900: #c21f25;
62
62
  --color-red-ultra-light: var(--color-red-100);
63
63
  --color-red-light: var(--color-red-300);
64
64
  --color-red: var(--color-red-500);
@@ -66,16 +66,16 @@
66
66
  --color-red-ultra-dark: var(--color-red-900);
67
67
 
68
68
  --color-blue-25: #f3f8fd;
69
- --color-blue-50: #e7f0fa;
70
- --color-blue-100: #c2daf3;
71
- --color-blue-200: #99c2eb;
72
- --color-blue-300: #70aae2;
73
- --color-blue-400: #5297dc;
74
- --color-blue-500: #3385d6;
75
- --color-blue-600: #2e7dd1;
76
- --color-blue-700: #2772cc;
77
- --color-blue-800: #2068c6;
78
- --color-blue-900: #1455bc;
69
+ --color-blue-50: #e5eff9;
70
+ --color-blue-100: #bfd7f0;
71
+ --color-blue-200: #94bde6;
72
+ --color-blue-300: #69a2db;
73
+ --color-blue-400: #488ed4;
74
+ --color-blue-500: #287acc;
75
+ --color-blue-600: #2472c7;
76
+ --color-blue-700: #1e67c0;
77
+ --color-blue-800: #185db9;
78
+ --color-blue-900: #0f4aad;
79
79
 
80
80
  --color-blue-ultra-light: var(--color-blue-100);
81
81
  --color-blue-light: var(--color-blue-300);
@@ -84,16 +84,16 @@
84
84
  --color-blue-ultra-dark: var(--color-blue-900);
85
85
 
86
86
  --color-green-25: #f6fbf6;
87
- --color-green-50: #ecf7ec;
88
- --color-green-100: #d0eccf;
89
- --color-green-200: #b1dfaf;
90
- --color-green-300: #92d28e;
91
- --color-green-400: #7ac976;
92
- --color-green-500: #63bf5e;
93
- --color-green-600: #5bb956;
94
- --color-green-700: #51b14c;
95
- --color-green-800: #47a942;
96
- --color-green-900: #359b31;
87
+ --color-green-50: #ebf7ea;
88
+ --color-green-100: #cceacb;
89
+ --color-green-200: #aadca8;
90
+ --color-green-300: #88ce85;
91
+ --color-green-400: #6fc46a;
92
+ --color-green-500: #55b950;
93
+ --color-green-600: #4eb249;
94
+ --color-green-700: #44aa40;
95
+ --color-green-800: #3ba237;
96
+ --color-green-900: #2a9327;
97
97
 
98
98
  --color-green-ultra-light: var(--color-green-100);
99
99
  --color-green-light: var(--color-green-300);
@@ -102,16 +102,16 @@
102
102
  --color-green-ultra-dark: var(--color-green-900);
103
103
 
104
104
  --color-yellow-25: #FFFDF2;
105
- --color-yellow-50: #fefcef;
106
- --color-yellow-100: #fdf7d8;
107
- --color-yellow-200: #fbf1be;
108
- --color-yellow-300: #f9eba4;
109
- --color-yellow-400: #f8e791;
110
- --color-yellow-500: #f7e37d;
111
- --color-yellow-600: #f6e075;
112
- --color-yellow-700: #f5dc6a;
113
- --color-yellow-800: #f3d860;
114
- --color-yellow-900: #f1d04d;
105
+ --color-yellow-50: #fefbef;
106
+ --color-yellow-100: #fcf6d7;
107
+ --color-yellow-200: #fbf0bc;
108
+ --color-yellow-300: #f9eaa1;
109
+ --color-yellow-400: #f7e68d;
110
+ --color-yellow-500: #f6e179;
111
+ --color-yellow-600: #f5dd71;
112
+ --color-yellow-700: #f3d966;
113
+ --color-yellow-800: #f2d55c;
114
+ --color-yellow-900: #efcd49;
115
115
 
116
116
  --color-yellow-light-background: var(--color-yellow-25);
117
117
  --color-yellow-ultra-light: var(--color-yellow-100);
package/lib-esm/prototypes/typography.stories.js CHANGED
@@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react';
3
3
  import { Container, Logo } from '../ui';
4
4
  import { getWrapperDecorator } from '../stories';
5
5
  import { Header, SubHeader } from '../layout';
6
+ import CHART_COLORS from '../chart-colors.json';
6
7
  import content from './typography.md';
7
8
  import css from './typography.module.css';
8
9
  const stories = storiesOf('Prototypes/Styleguide', module);
@@ -40,6 +41,21 @@ const Item = _ref => {
40
41
  flex: '1 1 20%'
41
42
  }
42
43
  }, `${colorName} ${valueName}`);
44
+ }; // eslint-disable-next-line react/prop-types
45
+
46
+
47
+ const ItemColorValue = _ref2 => {
48
+ let {
49
+ value
50
+ } = _ref2;
51
+ return /*#__PURE__*/React.createElement("div", {
52
+ style: {
53
+ background: value,
54
+ color: 'var(--color-light)',
55
+ padding: '12px',
56
+ flex: '1 1 20%'
57
+ }
58
+ }, value);
43
59
  };
44
60
 
45
61
  const COLORS = ['blue', 'red', 'green', 'yellow', 'gray'];
@@ -63,4 +79,13 @@ stories.add('color sheme', () => /*#__PURE__*/React.createElement(Container, nul
63
79
  key: `${colorName}-${valueName}`,
64
80
  colorName: colorName,
65
81
  valueName: valueName
66
- }))))));
82
+ })))), /*#__PURE__*/React.createElement("hr", null), /*#__PURE__*/React.createElement("h3", null, "Chart colors"), /*#__PURE__*/React.createElement("div", {
83
+ style: {
84
+ display: 'flex',
85
+ marginBottom: '24px',
86
+ flexWrap: 'wrap'
87
+ }
88
+ }, CHART_COLORS.map(color => /*#__PURE__*/React.createElement(ItemColorValue, {
89
+ key: color,
90
+ value: color
91
+ })))));
package/lib-esm/ui/tooltip/tooltip.js CHANGED
@@ -8,6 +8,7 @@ import css from './tooltip.module.css';
8
8
  export const Tooltip = props => {
9
9
  const {
10
10
  className,
11
+ tooltipClassName,
11
12
  title,
12
13
  children,
13
14
  as: Component,
@@ -26,7 +27,7 @@ export const Tooltip = props => {
26
27
  ref
27
28
  } : {}, restProps), children), title && /*#__PURE__*/React.createElement(UITooltip, {
28
29
  state: tooltip,
29
- className: cx(css.tooltip, darkMode && css.tooltipDarkMode)
30
+ className: cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode)
30
31
  }, /*#__PURE__*/React.createElement(UITooltipArrow, {
31
32
  state: tooltip,
32
33
  className: css.arrow,
@@ -35,6 +36,7 @@ export const Tooltip = props => {
35
36
  };
36
37
  Tooltip.defaultProps = {
37
38
  className: '',
39
+ tooltipClassName: '',
38
40
  title: '',
39
41
  as: 'span',
40
42
  containerRef: null,
@@ -42,6 +44,7 @@ Tooltip.defaultProps = {
42
44
  };
43
45
  Tooltip.propTypes = {
44
46
  className: PropTypes.string,
47
+ tooltipClassName: PropTypes.string,
45
48
  title: PropTypes.node,
46
49
  children: PropTypes.node.isRequired,
47
50
  as: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bundle-stats/ui",
3
- "version": "4.1.1-alpha.0",
3
+ "version": "4.1.1-alpha.3",
4
4
  "description": "UI components for BundleStats projects.",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -85,12 +85,12 @@
85
85
  "react-router-dom": "^5.0.0"
86
86
  },
87
87
  "dependencies": {
88
- "@bundle-stats/utils": "^4.1.1-alpha.0",
88
+ "@bundle-stats/utils": "^4.1.1-alpha.3",
89
89
  "ariakit": "^2.0.0-next.41",
90
90
  "date-fns": "^2.28.0",
91
91
  "modern-css-reset": "^1.4.0",
92
92
  "query-string": "^7.1.0",
93
93
  "use-query-params": "^2.0.0"
94
94
  },
95
- "gitHead": "c746cf8dfedd5eb46aa216522dc803321288aae3"
95
+ "gitHead": "26d4de037b639a94fb76c82e970c39305e00adda"
96
96
  }
package/src/css/variables.css CHANGED
@@ -23,42 +23,42 @@
23
23
  --size-xxlarge: 1.424rem;
24
24
  --size-xxxlarge: 1.602rem;
25
25
 
26
- --line-height: 1.6em;
26
+ --line-height: 1.66em;
27
27
 
28
28
  /*
29
29
  * Color scheme:
30
- * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
31
- * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23585d63&mcgpalette4=%233385d6&themename=mcgtheme
30
+ * https://coolors.co/287acc-da444e-55b950-f6e179-192339
31
+ * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23f6e179&mcgpalette3=%23505861&mcgpalette4=%23287acc&themename=mcgtheme
32
32
  */
33
- --color-gray-25: #fafbfb;
34
- --color-gray-50: #ebeced;
35
- --color-gray-100: #cdced0;
36
- --color-gray-200: #acaeb1;
37
- --color-gray-300: #8a8e92;
38
- --color-gray-400: #71757a;
39
- --color-gray-500: #585d63;
40
- --color-gray-600: #50555b;
41
- --color-gray-700: #474b51;
42
- --color-gray-800: #3d4147;
43
- --color-gray-900: #2d3035;
33
+ --color-gray-25: #f3f3f4;
34
+ --color-gray-50 : #eaebec;
35
+ --color-gray-100: #cbcdd0;
36
+ --color-gray-200: #a8acb0;
37
+ --color-gray-300: #858a90;
38
+ --color-gray-400: #6a7179;
39
+ --color-gray-500: #505861;
40
+ --color-gray-600: #495059;
41
+ --color-gray-700: #40474f;
42
+ --color-gray-800: #373d45;
43
+ --color-gray-900: #272d33;
44
44
 
45
45
  --color-gray-ultra-light: var(--color-gray-200);
46
46
  --color-gray-light: var(--color-gray-300);
47
47
  --color-gray: var(--color-gray-500);
48
- --color-gray-dark: var(--color-gray-600);
49
- --color-gray-ultra-dark: var(--color-gray-700);
48
+ --color-gray-dark: var(--color-gray-700);
49
+ --color-gray-ultra-dark: var(--color-gray-900);
50
50
 
51
51
  --color-red-25: #fdf5f6;
52
- --color-red-50: #fbebec;
53
- --color-red-100: #f5cccf;
54
- --color-red-200: #eeaaaf;
55
- --color-red-300: #e7888e;
56
- --color-red-400: #e26f76;
57
- --color-red-500: #dd555e;
58
- --color-red-600: #d94e56;
59
- --color-red-700: #d4444c;
60
- --color-red-800: #cf3b42;
61
- --color-red-900: #c72a31;
52
+ --color-red-50: #fbe9ea;
53
+ --color-red-100: #f4c7ca;
54
+ --color-red-200: #eda2a7;
55
+ --color-red-300: #e57c83;
56
+ --color-red-400: #e06069;
57
+ --color-red-500: #da444e;
58
+ --color-red-600: #d63e47;
59
+ --color-red-700: #d0353d;
60
+ --color-red-800: #cb2d35;
61
+ --color-red-900: #c21f25;
62
62
  --color-red-ultra-light: var(--color-red-100);
63
63
  --color-red-light: var(--color-red-300);
64
64
  --color-red: var(--color-red-500);
@@ -66,16 +66,16 @@
66
66
  --color-red-ultra-dark: var(--color-red-900);
67
67
 
68
68
  --color-blue-25: #f3f8fd;
69
- --color-blue-50: #e7f0fa;
70
- --color-blue-100: #c2daf3;
71
- --color-blue-200: #99c2eb;
72
- --color-blue-300: #70aae2;
73
- --color-blue-400: #5297dc;
74
- --color-blue-500: #3385d6;
75
- --color-blue-600: #2e7dd1;
76
- --color-blue-700: #2772cc;
77
- --color-blue-800: #2068c6;
78
- --color-blue-900: #1455bc;
69
+ --color-blue-50: #e5eff9;
70
+ --color-blue-100: #bfd7f0;
71
+ --color-blue-200: #94bde6;
72
+ --color-blue-300: #69a2db;
73
+ --color-blue-400: #488ed4;
74
+ --color-blue-500: #287acc;
75
+ --color-blue-600: #2472c7;
76
+ --color-blue-700: #1e67c0;
77
+ --color-blue-800: #185db9;
78
+ --color-blue-900: #0f4aad;
79
79
 
80
80
  --color-blue-ultra-light: var(--color-blue-100);
81
81
  --color-blue-light: var(--color-blue-300);
@@ -84,16 +84,16 @@
84
84
  --color-blue-ultra-dark: var(--color-blue-900);
85
85
 
86
86
  --color-green-25: #f6fbf6;
87
- --color-green-50: #ecf7ec;
88
- --color-green-100: #d0eccf;
89
- --color-green-200: #b1dfaf;
90
- --color-green-300: #92d28e;
91
- --color-green-400: #7ac976;
92
- --color-green-500: #63bf5e;
93
- --color-green-600: #5bb956;
94
- --color-green-700: #51b14c;
95
- --color-green-800: #47a942;
96
- --color-green-900: #359b31;
87
+ --color-green-50: #ebf7ea;
88
+ --color-green-100: #cceacb;
89
+ --color-green-200: #aadca8;
90
+ --color-green-300: #88ce85;
91
+ --color-green-400: #6fc46a;
92
+ --color-green-500: #55b950;
93
+ --color-green-600: #4eb249;
94
+ --color-green-700: #44aa40;
95
+ --color-green-800: #3ba237;
96
+ --color-green-900: #2a9327;
97
97
 
98
98
  --color-green-ultra-light: var(--color-green-100);
99
99
  --color-green-light: var(--color-green-300);
@@ -102,16 +102,16 @@
102
102
  --color-green-ultra-dark: var(--color-green-900);
103
103
 
104
104
  --color-yellow-25: #FFFDF2;
105
- --color-yellow-50: #fefcef;
106
- --color-yellow-100: #fdf7d8;
107
- --color-yellow-200: #fbf1be;
108
- --color-yellow-300: #f9eba4;
109
- --color-yellow-400: #f8e791;
110
- --color-yellow-500: #f7e37d;
111
- --color-yellow-600: #f6e075;
112
- --color-yellow-700: #f5dc6a;
113
- --color-yellow-800: #f3d860;
114
- --color-yellow-900: #f1d04d;
105
+ --color-yellow-50: #fefbef;
106
+ --color-yellow-100: #fcf6d7;
107
+ --color-yellow-200: #fbf0bc;
108
+ --color-yellow-300: #f9eaa1;
109
+ --color-yellow-400: #f7e68d;
110
+ --color-yellow-500: #f6e179;
111
+ --color-yellow-600: #f5dd71;
112
+ --color-yellow-700: #f3d966;
113
+ --color-yellow-800: #f2d55c;
114
+ --color-yellow-900: #efcd49;
115
115
 
116
116
  --color-yellow-light-background: var(--color-yellow-25);
117
117
  --color-yellow-ultra-light: var(--color-yellow-100);
package/src/ui/tooltip/tooltip.jsx CHANGED
@@ -13,6 +13,7 @@ import css from './tooltip.module.css';
13
13
  export const Tooltip = (props) => {
14
14
  const {
15
15
  className,
16
+ tooltipClassName,
16
17
  title,
17
18
  children,
18
19
  as: Component,
@@ -35,7 +36,7 @@ export const Tooltip = (props) => {
35
36
  {children}
36
37
  </UITooltipAnchor>
37
38
  {title && (
38
- <UITooltip state={tooltip} className={cx(css.tooltip, darkMode && css.tooltipDarkMode)}>
39
+ <UITooltip state={tooltip} className={cx(css.tooltip, tooltipClassName, darkMode && css.tooltipDarkMode)}>
39
40
  <UITooltipArrow state={tooltip} className={css.arrow} size={12} />
40
41
  {title}
41
42
  </UITooltip>
@@ -46,6 +47,7 @@ export const Tooltip = (props) => {
46
47
 
47
48
  Tooltip.defaultProps = {
48
49
  className: '',
50
+ tooltipClassName: '',
49
51
  title: '',
50
52
  as: 'span',
51
53
  containerRef: null,
@@ -54,6 +56,7 @@ Tooltip.defaultProps = {
54
56
 
55
57
  Tooltip.propTypes = {
56
58
  className: PropTypes.string,
59
+ tooltipClassName: PropTypes.string,
57
60
  title: PropTypes.node,
58
61
  children: PropTypes.node.isRequired,
59
62
  as: PropTypes.oneOfType([PropTypes.string, PropTypes.element, PropTypes.func]),