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

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.
@@ -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 {
@@ -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);
@@ -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
  }
@@ -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 {
@@ -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);
@@ -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/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.0",
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.0",
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": "c746cf8dfedd5eb46aa216522dc803321288aae3"
96
96
  }
@@ -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 {
@@ -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);
@@ -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
  }