@bundle-stats/ui 4.23.0-beta.3 → 4.23.0-beta.4

package/lib/app/app.module.css

@@ -42,11 +42,13 @@
 }
 
 .tabActive {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-in);
 }
 
 .tabActive::after {
-  background: currentColor;
+  opacity: 1;
+  transition: var(--transition-in);
 }
 
 .tabsContent {

package/lib/app/header/header.module.css

@@ -11,14 +11,12 @@
   border-radius: 50%;
   opacity: 0.8;
   color: var(--color-text-ultra-dark);
-  transition: var(--transition-out);
 }
 
-.toolsGitHub:hover,
 .toolsGitHub:focus,
+.toolsGitHub:hover,
 .toolsGitHub:active {
   opacity: 1;
-  transition: var(--transition-in);
 }
 
 .toolsGitHubIcon {

package/lib/chart-colors.json

@@ -1,59 +1,59 @@
 [
-  "rgba(0,85,172,1)",
-  "rgba(13,85,174,1)",
-  "rgba(26,85,175,1)",
-  "rgba(39,85,177,1)",
-  "rgba(52,85,178,1)",
-  "rgba(65,84,180,1)",
-  "rgba(78,84,181,1)",
-  "rgba(91,84,183,1)",
-  "rgba(104,84,184,1)",
-  "rgba(112,83,184,1)",
-  "rgba(119,82,183,1)",
-  "rgba(127,81,183,1)",
-  "rgba(134,80,183,1)",
-  "rgba(142,79,182,1)",
-  "rgba(149,78,182,1)",
-  "rgba(157,77,181,1)",
-  "rgba(164,76,181,1)",
-  "rgba(170,75,179,1)",
-  "rgba(176,74,177,1)",
-  "rgba(182,73,174,1)",
-  "rgba(189,72,172,1)",
-  "rgba(195,71,170,1)",
-  "rgba(201,70,168,1)",
-  "rgba(207,69,165,1)",
-  "rgba(213,68,163,1)",
-  "rgba(217,68,160,1)",
-  "rgba(222,69,156,1)",
-  "rgba(226,69,153,1)",
-  "rgba(231,69,149,1)",
-  "rgba(235,69,146,1)",
-  "rgba(239,70,142,1)",
-  "rgba(244,70,139,1)",
-  "rgba(248,70,135,1)",
-  "rgba(249,73,131,1)",
-  "rgba(250,76,127,1)",
-  "rgba(251,78,122,1)",
-  "rgba(252,81,118,1)",
-  "rgba(252,84,114,1)",
-  "rgba(253,87,110,1)",
-  "rgba(254,89,105,1)",
-  "rgba(255,92,101,1)",
-  "rgba(255,96,96,1)",
-  "rgba(255,101,91,1)",
-  "rgba(255,105,86,1)",
-  "rgba(255,110,82,1)",
-  "rgba(255,114,77,1)",
-  "rgba(255,118,72,1)",
-  "rgba(255,123,67,1)",
-  "rgba(255,127,62,1)",
-  "rgba(255,132,54,1)",
-  "rgba(255,137,47,1)",
-  "rgba(255,142,39,1)",
-  "rgba(255,147,31,1)",
-  "rgba(255,151,23,1)",
-  "rgba(255,156,16,1)",
-  "rgba(255,161,8,1)",
+  "rgba(79,146,213,1)",
+  "rgba(86,146,215,1)",
+  "rgba(92,145,217,1)",
+  "rgba(99,145,219,1)",
+  "rgba(105,144,221,1)",
+  "rgba(112,144,223,1)",
+  "rgba(118,143,225,1)",
+  "rgba(125,143,227,1)",
+  "rgba(131,142,229,1)",
+  "rgba(138,141,229,1)",
+  "rgba(145,140,229,1)",
+  "rgba(152,138,229,1)",
+  "rgba(159,137,229,1)",
+  "rgba(165,136,228,1)",
+  "rgba(172,135,228,1)",
+  "rgba(179,133,228,1)",
+  "rgba(186,132,228,1)",
+  "rgba(192,130,226,1)",
+  "rgba(198,129,223,1)",
+  "rgba(204,127,221,1)",
+  "rgba(210,125,218,1)",
+  "rgba(216,123,216,1)",
+  "rgba(222,122,213,1)",
+  "rgba(228,120,211,1)",
+  "rgba(234,118,208,1)",
+  "rgba(237,117,204,1)",
+  "rgba(239,116,199,1)",
+  "rgba(242,114,195,1)",
+  "rgba(245,113,191,1)",
+  "rgba(247,112,186,1)",
+  "rgba(250,111,182,1)",
+  "rgba(252,109,177,1)",
+  "rgba(255,108,173,1)",
+  "rgba(255,109,167,1)",
+  "rgba(255,109,162,1)",
+  "rgba(255,110,156,1)",
+  "rgba(255,111,151,1)",
+  "rgba(255,111,145,1)",
+  "rgba(255,112,139,1)",
+  "rgba(255,112,134,1)",
+  "rgba(255,113,128,1)",
+  "rgba(255,116,122,1)",
+  "rgba(255,119,116,1)",
+  "rgba(255,121,109,1)",
+  "rgba(255,124,103,1)",
+  "rgba(255,127,97,1)",
+  "rgba(255,130,91,1)",
+  "rgba(255,132,84,1)",
+  "rgba(255,135,78,1)",
+  "rgba(255,139,68,1)",
+  "rgba(255,143,59,1)",
+  "rgba(255,147,49,1)",
+  "rgba(255,151,39,1)",
+  "rgba(255,154,29,1)",
+  "rgba(255,158,20,1)",
+  "rgba(255,162,10,1)",
   "rgba(255,166,0,1)"
 ]

package/lib/components/entry-info/entry-info.module.css

@@ -107,7 +107,6 @@
   line-height: var(--line-height-heading);
   border-radius: var(--radius-small);
   background: var(--color-highlight);
-  transition: var(--transition-out);
 
   text-decoration: none;
   text-transform: none;

package/lib/components/metric-run-info/metric-run-info.js

@@ -65,7 +65,7 @@ const MetricHoverCard = ({ title, description, url }) => {
                         react_1.default.createElement(icon_1.Icon, { glyph: icon_1.Icon.ICONS.EXTERNAL_LINK, size: "small" }))))))));
 };
 const MetricRunInfo = (props) => {
-    const { metricId, current, baseline = 0, showDelta = true, showMetricDescription = true, showBaseline = true, titleWrapper: CustomTitleWrapper = react_1.default.Fragment, ...restProps } = props;
+    const { metricId, current, baseline = 0, showDelta = true, showMetricDescription = true, showBaseline = true, showDeltaAbsoluteValue = false, titleWrapper: CustomTitleWrapper = react_1.default.Fragment, ...restProps } = props;
     const metric = (0, utils_1.getGlobalMetricType)(metricId);
     const metricRunInfo = (0, utils_1.getMetricRunInfo)(metric, current, baseline || 0);
     const titleHoverCard = (0, react_1.useMemo)(() => {
@@ -99,8 +99,9 @@ const MetricRunInfo = (props) => {
             showDelta: true,
             deltaType: metricRunInfo.deltaType,
             deltaPercentage: metricRunInfo.displayDeltaPercentage,
+            ...(showDeltaAbsoluteValue && { delta: metricRunInfo.displayDelta }),
         };
-    }, [metric, metricRunInfo, showDelta]);
+    }, [metric, metricRunInfo, showDelta, showDeltaAbsoluteValue]);
     return (react_1.default.createElement(run_info_1.RunInfo, { title: title, titleHoverCard: titleHoverCard, enhance: true, current: metricRunInfo.displayValue, ...baselineProps, ...deltaProps, ...restProps }));
 };
 exports.MetricRunInfo = MetricRunInfo;

package/lib/components/metric-run-info/metric-run-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"metric-run-info.js","sourceRoot":"","sources":["../../../src/components/metric-run-info/metric-run-info.tsx"],"names":[],"mappings":"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"}

package/lib/components/metrics-display-selector/metrics-display-selector.module.css

@@ -1,6 +1,5 @@
 .dropdownGroup {
   border: 1px solid var(--color-outline);
-  transition: var(--transition-out);
 }
 
 .dropdownGroupButton {
@@ -9,7 +8,6 @@
 
 .dropdownGroup:hover {
   border-color: var(--color-outline-dark);
-  transition: var(--transition-in);
 }
 
 .itemActive {

package/lib/components/sort-button/sort-button.module.css

@@ -18,7 +18,6 @@
   overflow: hidden;
   right: -2px; /* compensate for the button padding */
   color: var(--color-text-ultra-light);
-  transition: var(--transition-out);
 }
 
 .directionIcon {
@@ -36,7 +35,6 @@
 .direction:active,
 .direction:focus {
   color: var(--color-text-dark);
-  transition: var(--transition-in);
 }
 
 .directionAsc {

package/lib/components/summary/summary.module.css

@@ -42,7 +42,7 @@
 }
 
 .item::before {
-  content: "";
+  content: '';
   border-radius: var(--radius-medium);
   background: var(--color-highlight);
   display: block;
@@ -56,13 +56,15 @@
   transition: var(--transition-out);
 }
 
+.item:focus::before,
+.item:active::before,
 .item:hover::before {
   opacity: 1;
   transition: var(--transition-in);
 }
 
 .item + .item::after {
-  content: "";
+  content: '';
   border-radius: var(--radius-medium);
   background: var(--color-outline);
   display: block;
@@ -75,7 +77,12 @@
   transition: var(--transition-out);
 }
 
-.item:hover::after,  .item:hover + .item::after {
+.item:focus::after,
+.item:active::after,
+.item:hover::after,
+.item:focus + .item::after,
+.item:active + .item::after,
+.item:hover + .item::after {
   opacity: 0;
   transition: var(--transition-in);
 }

package/lib/css/default.css

@@ -15,6 +15,7 @@ html {
 
 body {
   background: var(--color-background);
+  accent-color: var(--color-accent);
   color: var(--color-text);
   line-height: var(--line-height);
 }
@@ -59,12 +60,14 @@ code {
 }
 
 a {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-out);
 }
 
-a:hover,
+a:focus,
 a:active,
-a:focus {
-  color: var(--color-primary-dark);
+a:hover {
+  color: var(--color-accent-dark);
   outline: none;
+  transition: var(--transition-in);
 }

package/lib/css/variables.css

@@ -35,18 +35,18 @@
    * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
    */
 
-   --color-gray-25: #f9f9f9;
-   /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
-   --color-gray-50: #ececed;
-   --color-gray-100: #c9c9cc;
-   --color-gray-200: #a7a7aa;
-   --color-gray-300: #848489;
-   --color-gray-400: #626268;
-   --color-gray-500: #3f3f47;
-   --color-gray-600: #36363c;
-   --color-gray-700: #2c2c32;
-   --color-gray-800: #232327;
-   --color-gray-900: #19191c;
+  --color-gray-25: #f9f9f9;
+  /** https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/0/3F3F47/63/63/71/white */
+  --color-gray-50: #ececed;
+  --color-gray-100: #c9c9cc;
+  --color-gray-200: #a7a7aa;
+  --color-gray-300: #848489;
+  --color-gray-400: #626268;
+  --color-gray-500: #3f3f47;
+  --color-gray-600: #36363c;
+  --color-gray-700: #2c2c32;
+  --color-gray-800: #232327;
+  --color-gray-900: #19191c;
 
   --color-gray-ultra-light: var(--color-gray-200);
   --color-gray-light: var(--color-gray-300);
@@ -98,7 +98,7 @@
   --color-green-200: #b1dfaf;
   --color-green-300: #92d28f;
   --color-green-400: #74c670;
-  --color-green-500: #55B950;
+  --color-green-500: #55b950;
   --color-green-600: #3ea839;
   --color-green-700: #2b9426;
   --color-green-800: #1b7b16;
@@ -112,7 +112,7 @@
 
   --color-yellow-25: #fffdf2;
   /* https://hihayk.github.io/scale/#4/5/40/80/0/-0/0/0/E5C110/229/193/16/white */
-  --color-yellow-50:  #faf3cf;
+  --color-yellow-50: #faf3cf;
   --color-yellow-100: #f6e9a9;
   --color-yellow-200: #f2df83;
   --color-yellow-300: #edd55d;
@@ -126,8 +126,8 @@
   --color-yellow-ultra-light: var(--color-yellow-100);
   --color-yellow-light: var(--color-yellow-300);
   --color-yellow: var(--color-yellow-500);
-  --color-yellow-ultra-dark: var(--color-yellow-700);
-  --color-yellow-dark: var(--color-yellow-900);
+  --color-yellow-dark: var(--color-yellow-700);
+  --color-yellow-ultra-dark: var(--color-yellow-900);
 
   --color-dark: #111;
   --color-light: #fff;
@@ -146,6 +146,10 @@ body {
   --color-text-ultra-dark: var(--color-gray-ultra-dark);
   --color-heading: var(--color-gray-ultra-dark);
 
+  --color-accent-light: var(--color-gray);
+  --color-accent: var(--color-gray-dark);
+  --color-accent-dark: var(--color-gray-ultra-dark);
+
   --color-success-light: var(--color-green-light);
   --color-success: var(--color-green);
   --color-success-dark: var(--color-green-dark);
@@ -188,7 +192,7 @@ body {
   --color-shadow: rgba(0, 0, 0, 0.25);
 
   --transition-duration-in: 0.16s;
-  --transition-duration-out: 0.10s;
+  --transition-duration-out: 0.1s;
   --transition-in: all var(--transition-duration-in) ease-in;
   --transition-out: all var(--transition-duration-out) ease-out;
 

package/lib/ui/button/button.module.css

@@ -3,28 +3,32 @@
   --button-space: 0px;
   /* button border width */
   --border-width: 0px;
+  /* line height in pixels to prevent layout shift when rendering a glyph */
+  --line-height: var(--space-small);
 
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: calc(max(var(--button-space), var(--space-xxsmall)) * 0.66);
+  gap: calc(var(--button-space) * 0.66);
   appearance: none;
   padding: 0;
   border: var(--border-width) solid transparent;
   background: none;
-  transition: var(--transition-out);
   color: var(--color-text-ultra-light);
+  font-size: var(--size-medium);
   font-family: var(--font-family);
+  line-height: var(--line-height);
   white-space: nowrap;
+  transition: var(--transition-out);
 }
 
 a.root {
   text-decoration: none;
 }
 
+.root:focus,
 .root:hover,
-.root:active,
-.root:focus {
+.root:active {
   outline: none;
   color: var(--color-text-light);
   transition: var(--transition-in);
@@ -32,6 +36,8 @@ a.root {
 
 .glyph {
   flex: 0 0 auto;
+  width: var(--line-height);
+  height: var(--line-height);
 }
 
 .text {
@@ -182,38 +188,21 @@ a.root {
  */
 .small {
   --button-space: var(--space-xxsmall);
+  --line-height: var(--space-small);
 
   font-size: var(--size-small);
-  line-height: var(--space-small);
-}
-
-.small .glyph {
-  width: var(--space-small);
-  height: var(--space-small);
 }
 
 .medium {
   --button-space: var(--space-xsmall);
-
-  font-size: var(--size-medium);
-  line-height: calc(var(--space-small) + var(--space-xxxsmall));
-}
-
-.medium .glyph {
-  width: calc(var(--space-small) + var(--space-xxxsmall));
-  height: calc(var(--space-small) + var(--space-xxxsmall));
+  --line-height: calc(var(--space-small) + var(--space-xxxsmall));
 }
 
 .large {
   --button-space: var(--space-small);
+  --line-height: var(--space-medium);
 
   font-size: var(--size-large);
-  line-height: var(--space-medium);
-}
-
-.large .glyph {
-  width: var(--space-medium);
-  height: var(--space-medium);
 }
 
 /**

package/lib/ui/copy-to-clipboard/copy-to-clipboard.module.css

@@ -6,10 +6,10 @@
 
 /** done state */
 .root svg {
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
 }
 
 .done svg {
   color: var(--color-success);
-  transition: var(--ui-transition-in);
+  transition: var(--transition-in);
 }

package/lib/ui/dropdown/dropdown.module.css

@@ -45,6 +45,9 @@
   border-radius: var(--radius-small);
   padding: var(--space-xxxsmall);
   background: none;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
   text-align: left;
   text-decoration: none;
   cursor: default;
@@ -70,14 +73,13 @@
   color: var(--color-primary-dark);
 }
 
-
 .group {
   position: relative;
   padding: calc(var(--space-xxxsmall) / 2 + 1px) 0 calc(var(--space-xxxsmall) / 2);
 }
 
 .group::before {
-  content: " ";
+  content: ' ';
   display: block;
   position: absolute;
   left: var(--space-xxxsmall);

package/lib/ui/filters/filters.module.css

@@ -45,9 +45,9 @@
   transition: var(--transition-out);
 }
 
-.filterSingle:hover,
+.filterSingle:focus,
 .filterSingle:active,
-.filterSingle:focus {
+.filterSingle:hover {
   border-color: var(--color-outline-dark);
   transition: var(--transition-in);
 }

package/lib/ui/hover-card/hover-card.module.css

@@ -10,13 +10,12 @@
   transition: var(--transition-out);
 }
 
+.anchor:focus,
+.anchor:active,
 .anchor:hover {
-  color: var(--color-primary);
-  transition: var(--transition-in);
-}
-
-.anchor:focus {
+  color: var(--color-accent-dark);
   outline: 0;
+  transition: var(--transition-in);
 }
 
 .hoverCard {

package/lib/ui/input/input.module.css

@@ -3,7 +3,7 @@
   border-radius: var(--radius-small);
   color: var(--color-text-light);
   width: 100%;
-  transition: var(--transition-in);
+  transition: var(--transition-out);
   appearance: none;
   outline: none;
 }
@@ -27,7 +27,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-out);
+  transition: var(--transition-in);
 }
 
 /** Size modifier */

package/lib/ui/table/table.module.css

@@ -38,10 +38,10 @@
   text-decoration: none;
 }
 
-.root tbody td a:hover,
 .root tbody td a:focus,
-.root tbody td a:active {
-  color: var(--color-primary);
+.root tbody td a:active,
+.root tbody td a:hover {
+  color: var(--color-accent);
   text-decoration: underline;
 }
 

package/lib/ui/tabs/tabs.module.css

@@ -13,7 +13,7 @@
   color: var(--color-text-ultra-light);
   font-weight: bold;
   text-decoration: none;
-  transition: var(--ui-transition-out);
+  transition: var(--transition-out);
 }
 
 .item::after {
@@ -24,27 +24,31 @@
   right: 0;
   bottom: -1px;
   height: 2px;
-  background: transparent;
+  background: currentColor;
+  opacity: 0;
+  transition: var(--transition-out);
 }
 
-.item:hover,
+.item:focus,
 .item:active,
-.item:focus {
-  color: var(--color-primary);
+.item:hover {
+  color: var(--color-accent);
   outline: none;
-  transition: var(--ui-transition-out);
 }
 
 .item:hover::after,
 .item:active::after,
 .item:focus::after {
   background: currentColor;
+  transition: var(--transition-in);
 }
 
 .itemActive {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-in);
 }
 
 .itemActive::after {
-  background: currentColor;
+  opacity: 1;
+  transition: var(--transition-in);
 }

package/lib/ui/tag/tag.module.css

@@ -10,7 +10,6 @@
 
 a.root {
   text-decoration: none;
-  transition: var(--transition-out);
 }
 
 a.root:hover,
@@ -19,7 +18,6 @@ a.root:active {
   opacity: 0.8;
   color: var(--color-light);
   text-decoration: none;
-  transition: var(--transition-in);
 }
 
 /** Kind variation */

package/lib/ui/textarea/textarea.module.css

@@ -4,7 +4,7 @@
   color: var(--color-text-light);
   width: 100%;
   resize: vertical;
-  transition: var(--transition-in);
+  transition: var(--transition-out);
   appearance: none;
   outline: none;
 }
@@ -28,7 +28,7 @@
 .root:focus {
   border-color: var(--color-outline-dark);
   color: inherit;
-  transition: var(--transition-out);
+  transition: var(--transition-in);
 }
 
 .root[readonly=''] {

package/lib-esm/app/app.module.css

@@ -42,11 +42,13 @@
 }
 
 .tabActive {
-  color: var(--color-primary);
+  color: var(--color-accent);
+  transition: var(--transition-in);
 }
 
 .tabActive::after {
-  background: currentColor;
+  opacity: 1;
+  transition: var(--transition-in);
 }
 
 .tabsContent {