@bundle-stats/ui 4.1.0 → 4.1.1-alpha.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 (13) hide show
  1. package/lib/css/default.css +1 -1
  2. package/lib/css/variables.css +13 -12
  3. package/lib/ui/tabs/tabs.module.css +3 -3
  4. package/lib/ui/tooltip/tooltip.js +5 -2
  5. package/lib-esm/css/default.css +1 -1
  6. package/lib-esm/css/variables.css +13 -12
  7. package/lib-esm/ui/tabs/tabs.module.css +3 -3
  8. package/lib-esm/ui/tooltip/tooltip.js +4 -1
  9. package/package.json +3 -3
  10. package/src/css/default.css +1 -1
  11. package/src/css/variables.css +13 -12
  12. package/src/ui/tabs/tabs.module.css +3 -3
  13. package/src/ui/tooltip/tooltip.jsx +4 -1
package/lib/css/default.css CHANGED
@@ -15,12 +15,12 @@ button {
15
15
  html {
16
16
  font-family: var(--font-family);
17
17
  font-size: 81.25%;
18
- line-height: 1.6;
19
18
  }
20
19
 
21
20
  body {
22
21
  background: var(--color-background);
23
22
  color: var(--color-text);
23
+ line-height: var(--line-height);
24
24
  }
25
25
 
26
26
  h1, h2, h3, h4, h5, h6 {
package/lib/css/variables.css CHANGED
@@ -28,19 +28,19 @@
28
28
  /*
29
29
  * Color scheme:
30
30
  * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
31
- * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23535558&mcgpalette4=%233385d6&themename=mcgtheme
31
+ * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23585d63&mcgpalette4=%233385d6&themename=mcgtheme
32
32
  */
33
- --color-gray-25: #fafafa;
34
- --color-gray-50: #eaebeb;
35
- --color-gray-100: #cbcccd;
36
- --color-gray-200: #a9aaac;
37
- --color-gray-300: #87888a;
38
- --color-gray-400: #6d6f71;
39
- --color-gray-500: #535558;
40
- --color-gray-600: #4c4e50;
41
- --color-gray-700: #424447;
42
- --color-gray-800: #393b3d;
43
- --color-gray-900: #292a2d;
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;
44
44
 
45
45
  --color-gray-ultra-light: var(--color-gray-200);
46
46
  --color-gray-light: var(--color-gray-300);
@@ -165,6 +165,7 @@
165
165
 
166
166
  --color-outline: var(--color-gray-50);
167
167
  --color-outline-dark: var(--color-gray-100);
168
+
168
169
  --color-outline-success: var(--color-green-100);
169
170
  --color-outline-info: var(--color-blue-100);
170
171
  --color-outline-warning: var(--color-yellow-200);
package/lib/ui/tabs/tabs.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  .item {
7
7
  position: relative;
8
8
  display: inline-block;
9
- padding: var(--space-xsmall) 0;
9
+ padding: var(--space-xsmall) var(--space-small);
10
10
  color: var(--color-text-ultra-light);
11
11
  font-weight: bold;
12
12
  text-decoration: none;
@@ -24,7 +24,7 @@
24
24
  }
25
25
 
26
26
  .item:hover {
27
- color: var(--color-text-light);
27
+ color: var(--color-primary-dark);
28
28
  outline: none;
29
29
  }
30
30
 
@@ -41,5 +41,5 @@
41
41
  }
42
42
 
43
43
  .item + .item {
44
- margin-left: var(--space-medium);
44
+ _margin-left: var(--space-medium);
45
45
  }
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/default.css CHANGED
@@ -15,12 +15,12 @@ button {
15
15
  html {
16
16
  font-family: var(--font-family);
17
17
  font-size: 81.25%;
18
- line-height: 1.6;
19
18
  }
20
19
 
21
20
  body {
22
21
  background: var(--color-background);
23
22
  color: var(--color-text);
23
+ line-height: var(--line-height);
24
24
  }
25
25
 
26
26
  h1, h2, h3, h4, h5, h6 {
package/lib-esm/css/variables.css CHANGED
@@ -28,19 +28,19 @@
28
28
  /*
29
29
  * Color scheme:
30
30
  * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
31
- * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23535558&mcgpalette4=%233385d6&themename=mcgtheme
31
+ * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23585d63&mcgpalette4=%233385d6&themename=mcgtheme
32
32
  */
33
- --color-gray-25: #fafafa;
34
- --color-gray-50: #eaebeb;
35
- --color-gray-100: #cbcccd;
36
- --color-gray-200: #a9aaac;
37
- --color-gray-300: #87888a;
38
- --color-gray-400: #6d6f71;
39
- --color-gray-500: #535558;
40
- --color-gray-600: #4c4e50;
41
- --color-gray-700: #424447;
42
- --color-gray-800: #393b3d;
43
- --color-gray-900: #292a2d;
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;
44
44
 
45
45
  --color-gray-ultra-light: var(--color-gray-200);
46
46
  --color-gray-light: var(--color-gray-300);
@@ -165,6 +165,7 @@
165
165
 
166
166
  --color-outline: var(--color-gray-50);
167
167
  --color-outline-dark: var(--color-gray-100);
168
+
168
169
  --color-outline-success: var(--color-green-100);
169
170
  --color-outline-info: var(--color-blue-100);
170
171
  --color-outline-warning: var(--color-yellow-200);
package/lib-esm/ui/tabs/tabs.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  .item {
7
7
  position: relative;
8
8
  display: inline-block;
9
- padding: var(--space-xsmall) 0;
9
+ padding: var(--space-xsmall) var(--space-small);
10
10
  color: var(--color-text-ultra-light);
11
11
  font-weight: bold;
12
12
  text-decoration: none;
@@ -24,7 +24,7 @@
24
24
  }
25
25
 
26
26
  .item:hover {
27
- color: var(--color-text-light);
27
+ color: var(--color-primary-dark);
28
28
  outline: none;
29
29
  }
30
30
 
@@ -41,5 +41,5 @@
41
41
  }
42
42
 
43
43
  .item + .item {
44
- margin-left: var(--space-medium);
44
+ _margin-left: var(--space-medium);
45
45
  }
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.0",
3
+ "version": "4.1.1-alpha.1",
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.0",
88
+ "@bundle-stats/utils": "^4.1.1-alpha.1",
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": "8818d4843bcb9bc369036eae79e930c4e2269d36"
95
+ "gitHead": "2f7d0a6c40dbf5bcf4ec161aa7aeae3c3e26fff4"
96
96
  }
package/src/css/default.css CHANGED
@@ -15,12 +15,12 @@ button {
15
15
  html {
16
16
  font-family: var(--font-family);
17
17
  font-size: 81.25%;
18
- line-height: 1.6;
19
18
  }
20
19
 
21
20
  body {
22
21
  background: var(--color-background);
23
22
  color: var(--color-text);
23
+ line-height: var(--line-height);
24
24
  }
25
25
 
26
26
  h1, h2, h3, h4, h5, h6 {
package/src/css/variables.css CHANGED
@@ -28,19 +28,19 @@
28
28
  /*
29
29
  * Color scheme:
30
30
  * https://coolors.co/3385d6-dd555e-63bf5e-f7e37d-192339
31
- * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23535558&mcgpalette4=%233385d6&themename=mcgtheme
31
+ * http://mcg.mbitson.com/#!?mcgpalette0=%23dd555e&mcgpalette1=%2363bf5e&mcgpalette2=%23f7e37d&mcgpalette3=%23585d63&mcgpalette4=%233385d6&themename=mcgtheme
32
32
  */
33
- --color-gray-25: #fafafa;
34
- --color-gray-50: #eaebeb;
35
- --color-gray-100: #cbcccd;
36
- --color-gray-200: #a9aaac;
37
- --color-gray-300: #87888a;
38
- --color-gray-400: #6d6f71;
39
- --color-gray-500: #535558;
40
- --color-gray-600: #4c4e50;
41
- --color-gray-700: #424447;
42
- --color-gray-800: #393b3d;
43
- --color-gray-900: #292a2d;
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;
44
44
 
45
45
  --color-gray-ultra-light: var(--color-gray-200);
46
46
  --color-gray-light: var(--color-gray-300);
@@ -165,6 +165,7 @@
165
165
 
166
166
  --color-outline: var(--color-gray-50);
167
167
  --color-outline-dark: var(--color-gray-100);
168
+
168
169
  --color-outline-success: var(--color-green-100);
169
170
  --color-outline-info: var(--color-blue-100);
170
171
  --color-outline-warning: var(--color-yellow-200);
package/src/ui/tabs/tabs.module.css CHANGED
@@ -6,7 +6,7 @@
6
6
  .item {
7
7
  position: relative;
8
8
  display: inline-block;
9
- padding: var(--space-xsmall) 0;
9
+ padding: var(--space-xsmall) var(--space-small);
10
10
  color: var(--color-text-ultra-light);
11
11
  font-weight: bold;
12
12
  text-decoration: none;
@@ -24,7 +24,7 @@
24
24
  }
25
25
 
26
26
  .item:hover {
27
- color: var(--color-text-light);
27
+ color: var(--color-primary-dark);
28
28
  outline: none;
29
29
  }
30
30
 
@@ -41,5 +41,5 @@
41
41
  }
42
42
 
43
43
  .item + .item {
44
- margin-left: var(--space-medium);
44
+ _margin-left: var(--space-medium);
45
45
  }
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]),