@bundle-stats/ui 4.13.0-beta.19 → 4.13.0-beta.20

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 (29) hide show
  1. package/lib/components/bundle-assets-totals/bundle-assets-totals.js +1 -1
  2. package/lib/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -1
  3. package/lib/components/metrics-treemap/metrics-treemap.i18n.js +6 -0
  4. package/lib/components/metrics-treemap/metrics-treemap.i18n.js.map +1 -0
  5. package/lib/components/metrics-treemap/metrics-treemap.js +24 -12
  6. package/lib/components/metrics-treemap/metrics-treemap.js.map +1 -1
  7. package/lib/components/metrics-treemap/metrics-treemap.module.css +70 -25
  8. package/lib/components/metrics-treemap/metrics-treemap.utils.js +44 -5
  9. package/lib/components/metrics-treemap/metrics-treemap.utils.js.map +1 -1
  10. package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js +1 -1
  11. package/lib-esm/components/bundle-assets-totals/bundle-assets-totals.js.map +1 -1
  12. package/lib-esm/components/metrics-treemap/metrics-treemap.i18n.js +3 -0
  13. package/lib-esm/components/metrics-treemap/metrics-treemap.i18n.js.map +1 -0
  14. package/lib-esm/components/metrics-treemap/metrics-treemap.js +25 -12
  15. package/lib-esm/components/metrics-treemap/metrics-treemap.js.map +1 -1
  16. package/lib-esm/components/metrics-treemap/metrics-treemap.module.css +70 -25
  17. package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js +44 -4
  18. package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js.map +1 -1
  19. package/package.json +3 -3
  20. package/src/components/bundle-assets-totals/bundle-assets-totals.jsx +0 -1
  21. package/src/components/metrics-treemap/__tests__/metrics-treemap.utils.ts +59 -14
  22. package/src/components/metrics-treemap/metrics-treemap.constants.ts +9 -0
  23. package/src/components/metrics-treemap/metrics-treemap.i18n.ts +2 -0
  24. package/src/components/metrics-treemap/metrics-treemap.module.css +70 -25
  25. package/src/components/metrics-treemap/metrics-treemap.tsx +55 -21
  26. package/src/components/metrics-treemap/metrics-treemap.utils.ts +63 -8
  27. package/types/components/metrics-treemap/metrics-treemap.constants.d.ts +5 -0
  28. package/types/components/metrics-treemap/metrics-treemap.i18n.d.ts +2 -0
  29. package/types/components/metrics-treemap/metrics-treemap.utils.d.ts +2 -1
package/lib-esm/components/metrics-treemap/metrics-treemap.module.css CHANGED
@@ -25,40 +25,83 @@
25
25
 
26
26
  .tileGroupTitle {
27
27
  width: 100%;
28
- padding: 2px var(--space-xxxsmall);
28
+ padding: 4px var(--space-xxxsmall);
29
29
  color: var(--color-text);
30
30
  font-size: 10px;
31
+ font-family: var(--font-family-fixed);
32
+ font-weight: 500;
31
33
  line-height: 12px;
32
34
  overflow: hidden;
33
35
  white-space: nowrap;
34
36
  text-overflow: ellipsis;
35
37
  }
36
38
 
39
+ .tileGroupTitleTotal {
40
+ margin-left: var(--space-xxxsmall);
41
+ font-weight: 300;
42
+ }
43
+
37
44
  /** Tile group size variation */
38
45
  .tileGroupSizeDefault {
39
46
  transition: var(--ui-transition-in);
40
- transition-property: left top width height;
47
+ transition-property: left, top, width, height;
41
48
  }
42
49
 
43
50
  /** Tile group nested variation */
44
51
  .nested .tileGroup {
45
- background: rgba(200, 200, 200, 0.1);
46
- outline: 1px solid rgba(255, 255, 255, 0.6);
52
+ background-color: rgba(27, 26, 33, 0.04);
53
+ outline: 1px solid rgba(255, 255, 255, 0.5);
47
54
  }
48
55
 
49
- /** Update background for current tileGroup and its children */
50
56
  .nested .tileGroup:has(> .tileGroupTitle:hover),
51
- .nested .tileGroup:has(> .tileGroupTitle:hover) .tileGroup,
52
- .nested .tileGroup:has(> .tile:hover),
53
- .nested .tileGroup:has(> .tile:hover) .tileGroup {
54
- background: rgba(200, 200, 200, 0.2);
57
+ .nested .tileGroup:has(> .tile:hover) {
58
+ outline: 1px solid rgba(255, 255, 255, 1);
59
+ background-color: rgba(27, 26, 33, 0.08);
60
+ }
61
+
62
+ .nested .tileGroup--NEGATIVE:has(> .tileGroupTitle:hover),
63
+ .nested .tileGroup--NEGATIVE:has(> .tile:hover) {
64
+ background-color: rgba(194, 31, 37, 0.2);
65
+ }
66
+
67
+ .nested .tileGroup--NEGATIVE {
68
+ background-color: rgba(194, 31, 37, 0.1);
69
+ }
70
+
71
+ .nested .tileGroup--NEGATIVE:has(> .tileGroupTitle:hover),
72
+ .nested .tileGroup--NEGATIVE:has(> .tile:hover) {
73
+ background-color: rgba(194, 31, 37, 0.2);
74
+ }
75
+
76
+ .nested .tileGroup--POSITIVE {
77
+ background-color: rgba(42, 147, 39, 0.05);
78
+ }
79
+
80
+ .nested .tileGroup--POSITIVE:has(> .tileGroupTitle:hover),
81
+ .nested .tileGroup--POSITIVE:has(> .tile:hover) {
82
+ background-color: rgba(42, 147, 39, 0.1);
83
+ }
84
+
85
+ /* reset bacground color when having a not changed group */
86
+ .nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE,
87
+ .nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE {
88
+ background-color: var(--color-background);
89
+ background-image: linear-gradient(rgba(27, 26, 33, 0.04), rgba(27, 26, 33, 0.04));
90
+ }
91
+
92
+ .nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
93
+ .nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tile:hover),
94
+ .nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
95
+ .nested .tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tile:hover) {
96
+ background-color: var(--color-background);
97
+ background-image: linear-gradient(rgba(27, 26, 33, 0.08), rgba(27, 26, 33, 0.08));
55
98
  }
56
99
 
57
100
  /** Leaf wrapper button */
58
101
  .tile {
59
102
  position: absolute;
60
103
  appearance: none;
61
- outline: 1px solid rgba(255, 255, 255, 0.6);
104
+ outline: 1px solid rgba(255, 255, 255, 1);
62
105
  border: 0;
63
106
  border-radius: 0;
64
107
  padding: 0;
@@ -82,16 +125,6 @@
82
125
  width: 100%;
83
126
  height: 100%;
84
127
  background-color: currentColor;
85
- color: var(--color-highlight);
86
- transition: var(--ui-transition-out);
87
- transition-property: opacity;
88
- opacity: 0.8;
89
- }
90
-
91
- .tile:hover::before {
92
- transition: var(--ui-transition-in);
93
- transition-property: opacity;
94
- opacity: 0.7;
95
128
  }
96
129
 
97
130
  .tileContent {
@@ -152,19 +185,31 @@
152
185
  }
153
186
 
154
187
  /** Tile diff variation */
155
- .tile-NO_CHANGE {
156
- color: var(--color-text-light);
188
+ .tile {
189
+ color: var(--color-text);
190
+ transition: var(--ui-transition-out);
157
191
  }
158
192
 
159
- .tile-NO_CHANGE::before {
160
- color: var(--color-gray-50);
193
+ .tile::before {
194
+ color: var(--color-highlight);
195
+ transition: var(--ui-transition-out);
196
+ transition-property: opacity;
161
197
  opacity: 0.5;
162
198
  }
163
199
 
164
- .tile-NO_CHANGE:hover::before {
200
+ .tile:hover::before {
201
+ transition: var(--ui-transition-in);
165
202
  opacity: 0.4;
166
203
  }
167
204
 
205
+ .tile-NO_CHANGE {
206
+ color: var(--color-text-ultra-light);
207
+ }
208
+
209
+ .tile-NO_CHANGE::before {
210
+ color: var(--color-gray-50);
211
+ }
212
+
168
213
  .tile-HIGH_NEGATIVE::before {
169
214
  color: var(--color-red-100);
170
215
  }
package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js CHANGED
@@ -1,3 +1,4 @@
1
+ import { DeltaType, } from '@bundle-stats/utils';
1
2
  const ROOT_LABEL = '(root)';
2
3
  function getReportMetricRowMaxValue(item) {
3
4
  const values = item.runs.map((run) => (run === null || run === void 0 ? void 0 : run.value) || 0);
@@ -17,12 +18,25 @@ export function getTreemapNodes(items) {
17
18
  children: rootChildren,
18
19
  };
19
20
  }
21
+ function getItemValues(runs) {
22
+ var _a, _b;
23
+ const runCount = runs === null || runs === void 0 ? void 0 : runs.length;
24
+ const current = ((_a = runs[0]) === null || _a === void 0 ? void 0 : _a.value) || 0;
25
+ if (runCount < 2) {
26
+ return { current, baseline: 0 };
27
+ }
28
+ return {
29
+ current,
30
+ baseline: ((_b = runs[runCount - 1]) === null || _b === void 0 ? void 0 : _b.value) || 0,
31
+ };
32
+ }
20
33
  function setTreeNode(nodes, slugs, currentSlugId, newNode) {
34
+ var _a, _b, _c;
21
35
  const baseSlugs = slugs.slice(0, currentSlugId);
22
36
  const [currentSlug, ...restSlug] = slugs.slice(currentSlugId);
23
37
  if (!currentSlug) {
24
38
  nodes.push(newNode);
25
- return;
39
+ return getItemValues(newNode.item.runs);
26
40
  }
27
41
  const currentNodePath = [...baseSlugs, currentSlug].join('/');
28
42
  let parentNode = nodes.find((treeNode) => treeNode.id === currentNodePath);
@@ -32,17 +46,27 @@ function setTreeNode(nodes, slugs, currentSlugId, newNode) {
32
46
  label: currentSlug,
33
47
  value: 0,
34
48
  children: [],
49
+ total: {
50
+ current: 0,
51
+ baseline: 0,
52
+ },
35
53
  };
36
54
  nodes.push(parentNode);
37
55
  }
56
+ const nodeValues = getItemValues((_a = newNode === null || newNode === void 0 ? void 0 : newNode.item) === null || _a === void 0 ? void 0 : _a.runs);
57
+ parentNode.total = {
58
+ current: (((_b = parentNode.total) === null || _b === void 0 ? void 0 : _b.current) || 0) + nodeValues.current,
59
+ baseline: (((_c = parentNode.total) === null || _c === void 0 ? void 0 : _c.baseline) || 0) + (nodeValues.baseline || 0),
60
+ };
38
61
  if (restSlug.length === 0) {
39
62
  parentNode.children.push(newNode);
40
- return;
63
+ return getItemValues(newNode.item.runs);
41
64
  }
42
- setTreeNode(parentNode.children, slugs, currentSlugId + 1, newNode);
65
+ return setTreeNode(parentNode.children, slugs, currentSlugId + 1, newNode);
43
66
  }
44
67
  export function getTreemapNodesGroupedByPath(items) {
45
68
  const treeNodes = [];
69
+ const total = { current: 0, baseline: 0 };
46
70
  items.forEach((item) => {
47
71
  const slugs = item.key.split('/');
48
72
  const baseSlugs = slugs.slice(0, -1);
@@ -53,13 +77,29 @@ export function getTreemapNodesGroupedByPath(items) {
53
77
  value: getReportMetricRowMaxValue(item),
54
78
  item,
55
79
  };
56
- setTreeNode(treeNodes, baseSlugs, 0, treeNode);
80
+ const childrenTotal = setTreeNode(treeNodes, baseSlugs, 0, treeNode);
81
+ total.current += childrenTotal.current || 0;
82
+ total.baseline += childrenTotal.baseline || 0;
57
83
  });
58
84
  return {
59
85
  id: '',
60
86
  label: ROOT_LABEL,
61
87
  value: 0,
62
88
  children: treeNodes,
89
+ total,
63
90
  };
64
91
  }
92
+ export function resolveGroupDeltaType(metricRunInfo) {
93
+ if (!metricRunInfo) {
94
+ return DeltaType.NO_CHANGE;
95
+ }
96
+ const deltaType = 'displayDelta' in metricRunInfo ? metricRunInfo.deltaType : undefined;
97
+ if (deltaType === null || deltaType === void 0 ? void 0 : deltaType.match(/NEGATIVE/)) {
98
+ return DeltaType.NEGATIVE;
99
+ }
100
+ if (deltaType === null || deltaType === void 0 ? void 0 : deltaType.match(/POSITIVE/)) {
101
+ return DeltaType.POSITIVE;
102
+ }
103
+ return DeltaType.NO_CHANGE;
104
+ }
65
105
  //# sourceMappingURL=metrics-treemap.utils.js.map
package/lib-esm/components/metrics-treemap/metrics-treemap.utils.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"metrics-treemap.utils.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.utils.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"metrics-treemap.utils.js","sourceRoot":"","sources":["../../../src/components/metrics-treemap/metrics-treemap.utils.ts"],"names":[],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bundle-stats/ui",
3
- "version": "4.13.0-beta.19",
3
+ "version": "4.13.0-beta.20",
4
4
  "description": "UI components for BundleStats projects.",
5
5
  "main": "lib/index.js",
6
6
  "module": "lib-esm/index.js",
@@ -73,12 +73,12 @@
73
73
  "react-router-dom": "^5.0.0"
74
74
  },
75
75
  "dependencies": {
76
- "@bundle-stats/utils": "4.13.0-beta.19",
76
+ "@bundle-stats/utils": "4.13.0-beta.20",
77
77
  "ariakit": "2.0.0-next.44",
78
78
  "d3": "^7.8.5",
79
79
  "modern-css-reset": "1.4.0",
80
80
  "react-use": "^17.5.0",
81
81
  "use-query-params": "2.2.1"
82
82
  },
83
- "gitHead": "7fe46a0b3af3c1c5e0b82fa14d76301612a10e53"
83
+ "gitHead": "e1b9e8d14614a451ddcc2be9203100b25d4b1137"
84
84
  }
package/src/components/bundle-assets-totals/bundle-assets-totals.jsx CHANGED
@@ -97,7 +97,6 @@ export const BundleAssetsTotals = ({
97
97
  />
98
98
  </Table>
99
99
  <MetricsTreemap
100
- items={items}
101
100
  treeNodes={getTreemapNodes(items)}
102
101
  onItemClick={onTreemapItemClick || handleMetricsTreemapItemClick}
103
102
  />
package/src/components/metrics-treemap/__tests__/metrics-treemap.utils.ts CHANGED
@@ -5,27 +5,31 @@ describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
5
5
  const actual = getTreemapNodesGroupedByPath([
6
6
  {
7
7
  key: './src/app.jsx',
8
- runs: [{ value: 100 }],
8
+ runs: [{ value: 300 }, { value: 500 }],
9
9
  },
10
10
  {
11
11
  key: './src/components/header.jsx',
12
- runs: [{ value: 100 }],
12
+ runs: [{ value: 200 }, { value: 100 }],
13
13
  },
14
14
  {
15
15
  key: './src/components/footer.jsx',
16
- runs: [{ value: 100 }],
16
+ runs: [{ value: 100 }, { value: 100 }],
17
17
  },
18
18
  {
19
19
  key: './src/ui/button.jsx',
20
- runs: [{ value: 100 }],
20
+ runs: [{ value: 100 }, { value: 100 }],
21
+ },
22
+ {
23
+ key: './src/ui/input.jsx',
24
+ runs: [{ value: 0 }, { value: 100 }],
21
25
  },
22
26
  {
23
27
  key: './node_modules/react/dist/react.production.js',
24
- runs: [{ value: 100 }],
28
+ runs: [{ value: 100 }, { value: 100 }],
25
29
  },
26
30
  {
27
31
  key: 'favicon.ico',
28
- runs: [{ value: 10 }],
32
+ runs: [{ value: 10 }, { value: 10 }],
29
33
  },
30
34
  ] as any);
31
35
 
@@ -33,38 +37,54 @@ describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
33
37
  id: '',
34
38
  label: '(root)',
35
39
  value: 0,
40
+ total: {
41
+ current: 810,
42
+ baseline: 1010,
43
+ },
36
44
  children: [
37
45
  {
38
46
  id: '.',
39
47
  label: '.',
40
48
  value: 0,
49
+ total: {
50
+ current: 800,
51
+ baseline: 1000,
52
+ },
41
53
  children: [
42
54
  {
43
55
  id: './src',
44
56
  label: 'src',
45
57
  value: 0,
58
+ total: {
59
+ current: 700,
60
+ baseline: 900,
61
+ },
46
62
  children: [
47
63
  {
48
64
  id: './src/app.jsx',
49
65
  label: 'app.jsx',
50
- value: 100,
66
+ value: 500,
51
67
  item: {
52
68
  key: './src/app.jsx',
53
- runs: [{ value: 100 }],
69
+ runs: [{ value: 300 }, { value: 500 }],
54
70
  },
55
71
  },
56
72
  {
57
73
  id: './src/components',
58
74
  label: 'components',
59
75
  value: 0,
76
+ total: {
77
+ current: 300,
78
+ baseline: 200,
79
+ },
60
80
  children: [
61
81
  {
62
82
  id: './src/components/header.jsx',
63
83
  label: 'header.jsx',
64
- value: 100,
84
+ value: 200,
65
85
  item: {
66
86
  key: './src/components/header.jsx',
67
- runs: [{ value: 100 }],
87
+ runs: [{ value: 200 }, { value: 100 }],
68
88
  },
69
89
  },
70
90
  {
@@ -73,7 +93,7 @@ describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
73
93
  value: 100,
74
94
  item: {
75
95
  key: './src/components/footer.jsx',
76
- runs: [{ value: 100 }],
96
+ runs: [{ value: 100 }, { value: 100 }],
77
97
  },
78
98
  },
79
99
  ],
@@ -82,6 +102,10 @@ describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
82
102
  id: './src/ui',
83
103
  label: 'ui',
84
104
  value: 0,
105
+ total: {
106
+ current: 100,
107
+ baseline: 200,
108
+ },
85
109
  children: [
86
110
  {
87
111
  id: './src/ui/button.jsx',
@@ -89,7 +113,16 @@ describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
89
113
  value: 100,
90
114
  item: {
91
115
  key: './src/ui/button.jsx',
92
- runs: [{ value: 100 }],
116
+ runs: [{ value: 100 }, { value: 100 }],
117
+ },
118
+ },
119
+ {
120
+ id: './src/ui/input.jsx',
121
+ label: 'input.jsx',
122
+ value: 100,
123
+ item: {
124
+ key: './src/ui/input.jsx',
125
+ runs: [{ value: 0 }, { value: 100 }],
93
126
  },
94
127
  },
95
128
  ],
@@ -100,16 +133,28 @@ describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
100
133
  id: './node_modules',
101
134
  label: 'node_modules',
102
135
  value: 0,
136
+ total: {
137
+ current: 100,
138
+ baseline: 100,
139
+ },
103
140
  children: [
104
141
  {
105
142
  id: './node_modules/react',
106
143
  label: 'react',
107
144
  value: 0,
145
+ total: {
146
+ current: 100,
147
+ baseline: 100,
148
+ },
108
149
  children: [
109
150
  {
110
151
  id: './node_modules/react/dist',
111
152
  label: 'dist',
112
153
  value: 0,
154
+ total: {
155
+ current: 100,
156
+ baseline: 100,
157
+ },
113
158
  children: [
114
159
  {
115
160
  id: './node_modules/react/dist/react.production.js',
@@ -117,7 +162,7 @@ describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
117
162
  value: 100,
118
163
  item: {
119
164
  key: './node_modules/react/dist/react.production.js',
120
- runs: [{ value: 100 }],
165
+ runs: [{ value: 100 }, { value: 100 }],
121
166
  },
122
167
  },
123
168
  ],
@@ -134,7 +179,7 @@ describe('MetricsTreemap / getTreeNodesGroupedByPath', () => {
134
179
  value: 10,
135
180
  item: {
136
181
  key: 'favicon.ico',
137
- runs: [{ value: 10 }],
182
+ runs: [{ value: 10 }, { value: 10 }],
138
183
  },
139
184
  },
140
185
  ],
package/src/components/metrics-treemap/metrics-treemap.constants.ts CHANGED
@@ -1,5 +1,10 @@
1
1
  import type { ReportMetricRow } from '@bundle-stats/utils';
2
2
 
3
+ export interface TreeTotal {
4
+ current: number;
5
+ baseline: number;
6
+ }
7
+
3
8
  export interface TreeLeaf {
4
9
  /**
5
10
  * Node id - file/directory path
@@ -36,6 +41,10 @@ export interface Tree {
36
41
  * List of children nodes
37
42
  */
38
43
  children: TreeNodeChildren;
44
+ /**
45
+ * children total values for nested
46
+ */
47
+ total?: TreeTotal;
39
48
  }
40
49
 
41
50
  export type TreeNode = Tree | TreeLeaf;
package/src/components/metrics-treemap/metrics-treemap.i18n.ts ADDED
@@ -0,0 +1,2 @@
1
+ export const TILE_GROUP_LABEL = 'View children entries';
2
+ export const TILE_LABEL = 'View entry info';
package/src/components/metrics-treemap/metrics-treemap.module.css CHANGED
@@ -25,40 +25,83 @@
25
25
 
26
26
  .tileGroupTitle {
27
27
  width: 100%;
28
- padding: 2px var(--space-xxxsmall);
28
+ padding: 4px var(--space-xxxsmall);
29
29
  color: var(--color-text);
30
30
  font-size: 10px;
31
+ font-family: var(--font-family-fixed);
32
+ font-weight: 500;
31
33
  line-height: 12px;
32
34
  overflow: hidden;
33
35
  white-space: nowrap;
34
36
  text-overflow: ellipsis;
35
37
  }
36
38
 
39
+ .tileGroupTitleTotal {
40
+ margin-left: var(--space-xxxsmall);
41
+ font-weight: 300;
42
+ }
43
+
37
44
  /** Tile group size variation */
38
45
  .tileGroupSizeDefault {
39
46
  transition: var(--ui-transition-in);
40
- transition-property: left top width height;
47
+ transition-property: left, top, width, height;
41
48
  }
42
49
 
43
50
  /** Tile group nested variation */
44
51
  .nested .tileGroup {
45
- background: rgba(200, 200, 200, 0.1);
46
- outline: 1px solid rgba(255, 255, 255, 0.6);
52
+ background-color: rgba(27, 26, 33, 0.04);
53
+ outline: 1px solid rgba(255, 255, 255, 0.5);
47
54
  }
48
55
 
49
- /** Update background for current tileGroup and its children */
50
56
  .nested .tileGroup:has(> .tileGroupTitle:hover),
51
- .nested .tileGroup:has(> .tileGroupTitle:hover) .tileGroup,
52
- .nested .tileGroup:has(> .tile:hover),
53
- .nested .tileGroup:has(> .tile:hover) .tileGroup {
54
- background: rgba(200, 200, 200, 0.2);
57
+ .nested .tileGroup:has(> .tile:hover) {
58
+ outline: 1px solid rgba(255, 255, 255, 1);
59
+ background-color: rgba(27, 26, 33, 0.08);
60
+ }
61
+
62
+ .nested .tileGroup--NEGATIVE:has(> .tileGroupTitle:hover),
63
+ .nested .tileGroup--NEGATIVE:has(> .tile:hover) {
64
+ background-color: rgba(194, 31, 37, 0.2);
65
+ }
66
+
67
+ .nested .tileGroup--NEGATIVE {
68
+ background-color: rgba(194, 31, 37, 0.1);
69
+ }
70
+
71
+ .nested .tileGroup--NEGATIVE:has(> .tileGroupTitle:hover),
72
+ .nested .tileGroup--NEGATIVE:has(> .tile:hover) {
73
+ background-color: rgba(194, 31, 37, 0.2);
74
+ }
75
+
76
+ .nested .tileGroup--POSITIVE {
77
+ background-color: rgba(42, 147, 39, 0.05);
78
+ }
79
+
80
+ .nested .tileGroup--POSITIVE:has(> .tileGroupTitle:hover),
81
+ .nested .tileGroup--POSITIVE:has(> .tile:hover) {
82
+ background-color: rgba(42, 147, 39, 0.1);
83
+ }
84
+
85
+ /* reset bacground color when having a not changed group */
86
+ .nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE,
87
+ .nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE {
88
+ background-color: var(--color-background);
89
+ background-image: linear-gradient(rgba(27, 26, 33, 0.04), rgba(27, 26, 33, 0.04));
90
+ }
91
+
92
+ .nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
93
+ .nested .tileGroup--POSITIVE > .tileGroup--NO_CHANGE:has(> .tile:hover),
94
+ .nested .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tileGroupTitle:hover),
95
+ .nested .tileGroup--NEGATIVE > .tileGroup--NEGATIVE > .tileGroup--NO_CHANGE:has(> .tile:hover) {
96
+ background-color: var(--color-background);
97
+ background-image: linear-gradient(rgba(27, 26, 33, 0.08), rgba(27, 26, 33, 0.08));
55
98
  }
56
99
 
57
100
  /** Leaf wrapper button */
58
101
  .tile {
59
102
  position: absolute;
60
103
  appearance: none;
61
- outline: 1px solid rgba(255, 255, 255, 0.6);
104
+ outline: 1px solid rgba(255, 255, 255, 1);
62
105
  border: 0;
63
106
  border-radius: 0;
64
107
  padding: 0;
@@ -82,16 +125,6 @@
82
125
  width: 100%;
83
126
  height: 100%;
84
127
  background-color: currentColor;
85
- color: var(--color-highlight);
86
- transition: var(--ui-transition-out);
87
- transition-property: opacity;
88
- opacity: 0.8;
89
- }
90
-
91
- .tile:hover::before {
92
- transition: var(--ui-transition-in);
93
- transition-property: opacity;
94
- opacity: 0.7;
95
128
  }
96
129
 
97
130
  .tileContent {
@@ -152,19 +185,31 @@
152
185
  }
153
186
 
154
187
  /** Tile diff variation */
155
- .tile-NO_CHANGE {
156
- color: var(--color-text-light);
188
+ .tile {
189
+ color: var(--color-text);
190
+ transition: var(--ui-transition-out);
157
191
  }
158
192
 
159
- .tile-NO_CHANGE::before {
160
- color: var(--color-gray-50);
193
+ .tile::before {
194
+ color: var(--color-highlight);
195
+ transition: var(--ui-transition-out);
196
+ transition-property: opacity;
161
197
  opacity: 0.5;
162
198
  }
163
199
 
164
- .tile-NO_CHANGE:hover::before {
200
+ .tile:hover::before {
201
+ transition: var(--ui-transition-in);
165
202
  opacity: 0.4;
166
203
  }
167
204
 
205
+ .tile-NO_CHANGE {
206
+ color: var(--color-text-ultra-light);
207
+ }
208
+
209
+ .tile-NO_CHANGE::before {
210
+ color: var(--color-gray-50);
211
+ }
212
+
168
213
  .tile-HIGH_NEGATIVE::before {
169
214
  color: var(--color-red-100);
170
215
  }