@bundle-stats/ui 3.2.4 → 3.2.5-alpha.0

package/CHANGELOG.md

@@ -3,6 +3,38 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.5-alpha.0](https://github.com/relative-ci/bundle-stats/compare/v3.2.4...v3.2.5-alpha.0) (2022-01-23)
+
+
+### Bug Fixes
+
+* **ui:** Add - add content background ([7eae6d0](https://github.com/relative-ci/bundle-stats/commit/7eae6d06212f108d1c7b550fab684c2608275273))
+* **ui:** Add border-radius to flags ([2059ef9](https://github.com/relative-ci/bundle-stats/commit/2059ef9f84b9d1f36a84d0b5a9190f99cdce9cb2))
+* **ui:** App - decrease vertical spacing between components ([192fc8e](https://github.com/relative-ci/bundle-stats/commit/192fc8e003582abb11b10b84202b451d8e3891aa))
+* **ui:** Box - add border-radius to outline ([ed752f7](https://github.com/relative-ci/bundle-stats/commit/ed752f7b8e4748283925ef201c3997c18a9df3d2))
+* **ui:** Delta - readd inverted variation ([55c0217](https://github.com/relative-ci/bundle-stats/commit/55c0217309ed24bf604f17b920c3c39df5359e4d))
+* **ui:** Footer - container separator ([e76f50b](https://github.com/relative-ci/bundle-stats/commit/e76f50becbcf754c2c888caa42f4e4b73d666cc1))
+* **ui:** Header - add logo back ([de20e84](https://github.com/relative-ci/bundle-stats/commit/de20e84c8b93db96d743ab1d3d9d6e4fec554574))
+* **ui:** JobHeaders - tweak styles ([f0107f1](https://github.com/relative-ci/bundle-stats/commit/f0107f1acecf1bdec34ebe7f9311f7fb4207a74c))
+* **ui:** Metric - always use inline variation ([2862b68](https://github.com/relative-ci/bundle-stats/commit/2862b68b68ced1f9caf6aa4bf4dab9c9d7ab32de))
+* **ui:** Move separator to layout ([fcb97c9](https://github.com/relative-ci/bundle-stats/commit/fcb97c9930cc9ff85fc2aff2f116c1cb126ca581))
+* **ui:** Shift radius scale ([554ca52](https://github.com/relative-ci/bundle-stats/commit/554ca52cd16035c1af0820f3f3d2b2394e5accba))
+* **ui:** Table - 1px thead sep ([8193b7f](https://github.com/relative-ci/bundle-stats/commit/8193b7f682c8be8c28e841bcc7a88b63de9c01ee))
+* **ui:** Table - remove last row bottom line ([880a879](https://github.com/relative-ci/bundle-stats/commit/880a879830b3965c1643da6e7f4d8dbbec8c5e7c))
+* **ui:** Table - remove odd styles ([d691c15](https://github.com/relative-ci/bundle-stats/commit/d691c15d73da350402f7b337864b7c10f26d331e))
+* **ui:** Tabs - increase contrast ([c21d688](https://github.com/relative-ci/bundle-stats/commit/c21d68821a03a9cbaf706d13114e4bc895e80869))
+* **ui:** Update layout ([fb2ace8](https://github.com/relative-ci/bundle-stats/commit/fb2ace84bb04617a313d9f7a024eeaf7781b44b4))
+* **ui:** Variables - increase outline contrast ([2a2768a](https://github.com/relative-ci/bundle-stats/commit/2a2768aef9162ad47adfe5ecb74aad0d3f1fbb60))
+
+
+### Features
+
+* **ui:** Separator component ([937df0c](https://github.com/relative-ci/bundle-stats/commit/937df0ca7dfb778eec583c67afc6727a0affa98e))
+
+
+
+
+
 ## [3.2.4](https://github.com/relative-ci/bundle-stats/compare/v3.2.3...v3.2.4) (2022-01-17)
 
 

package/lib/app/app.js

@@ -19,6 +19,8 @@ var _constants = require("../constants");
 
 var _box = require("../layout/box");
 
+var _separator = require("../layout/separator");
+
 var _container = require("../ui/container");
 
 var _duplicatePackagesWarning = require("../components/duplicate-packages-warning");
@@ -100,6 +102,7 @@ var Layout = function Layout(_ref) {
   }), /*#__PURE__*/_react["default"].createElement("main", _extends({
     className: _appModule["default"].main
   }, props)), /*#__PURE__*/_react["default"].createElement(_footer.Footer, {
+    className: _appModule["default"].footer,
     version: version
   }));
 };
@@ -236,17 +239,21 @@ var AppComponent = function AppComponent(_ref2) {
     path: _constants.URLS.OVERVIEW,
     render: function render() {
       return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
-        space: "large"
-      }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
+        space: "medium"
+      }, /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+        space: "medium"
+      }, duplicatePackagesInsights && /*#__PURE__*/_react["default"].createElement(_duplicatePackagesWarning.DuplicatePackagesWarning, {
         duplicatePackagesCount: duplicatePackagesCount,
         showDelta: jobs.length > 1
-      })), /*#__PURE__*/_react["default"].createElement(_container.Container, null, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
+      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
+        outline: true
+      }, /*#__PURE__*/_react["default"].createElement(_box.Box, {
+        padding: "small"
+      }, /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
         space: "small"
       }, /*#__PURE__*/_react["default"].createElement(_totalSizeTypeTitle.TotalSizeTypeTitle, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsChartBars.BundleAssetsTotalsChartBars, {
         jobs: jobs
-      }), /*#__PURE__*/_react["default"].createElement(_box.Box, {
-        outline: true
-      }, /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsTable.BundleAssetsTotalsTable, {
+      }))), /*#__PURE__*/_react["default"].createElement(_separator.Separator, null), /*#__PURE__*/_react["default"].createElement(_bundleAssetsTotalsTable.BundleAssetsTotalsTable, {
         jobs: jobs
       })))));
     }

package/lib/app/app.module.css

@@ -3,7 +3,10 @@
 }
 
 .root {
-  padding-top: var(--header-height);
+}
+
+.header {
+  border-bottom: 1px solid var(--color-outline);
 }
 
 .empty {
@@ -13,16 +16,12 @@
 }
 
 .summaryContainer {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-small);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-xsmall);
 }
 
 .tabsContainer {
-  border-bottom: 1px solid var(--color-outline);
-}
-
-.tabs {
-  margin-bottom: -1px;
+  background: var(--color-light);
 }
 
 .tabActive {
@@ -34,24 +33,27 @@
 }
 
 .tabsContent {
-  padding-top: var(--space-large);
-  padding-bottom: var(--space-large);
+  padding-top: var(--space-medium);
+  padding-bottom: var(--space-medium);
   min-height: 480px;
 }
 
 @media (min-width: 600px) {
   :root {
-    --header-height: 80px;
+    --header-height: 78px;
   }
 
   .header {
-    position: fixed;
+    position: sticky;
     z-index: var(--layer-high);
-    left: 0;
     top: 0;
-    right: 0;
     height: var(--header-height);
     background-color: var(--color-background);
-    border-bottom: 1px solid var(--color-outline);
+  }
+
+  .tabsContainer {
+    position: sticky;
+    top: var(--header-height);
+    z-index: 100;
   }
 }

package/lib/app/header/header.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _flexStack = require("../../layout/flex-stack");
+
 var _container = require("../../ui/container");
 
 var _jobsHeader = require("../../components/jobs-header");
@@ -27,19 +29,23 @@ var Header = function Header(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_container.Container, {
     as: "header",
     className: (0, _classnames["default"])(_headerModule["default"].root, className)
-  }, /*#__PURE__*/_react["default"].createElement("div", {
+  }, /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    space: "small",
     className: _headerModule["default"].inner
+  }, /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
+    className: _headerModule["default"].jobs,
+    jobs: jobs
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: _headerModule["default"].options
   }, /*#__PURE__*/_react["default"].createElement("a", {
-    className: _headerModule["default"].branding,
     href: "https://github.com/relative-ci/bundle-stats",
     target: "_blank",
-    rel: "noopener noreferrer nofollow"
+    rel: "noopener noreferrer nofollow",
+    title: "View bundle-stats on GitHub"
   }, /*#__PURE__*/_react["default"].createElement(_logo.Logo, {
-    className: _headerModule["default"].brandingLogo
-  }, "BundleStats")), /*#__PURE__*/_react["default"].createElement(_jobsHeader.JobsHeader, {
-    className: _headerModule["default"].jobs,
-    jobs: jobs
-  })));
+    className: _headerModule["default"].github,
+    kind: "github"
+  }, "GitHub")))));
 };
 
 exports.Header = Header;

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

@@ -1,30 +1,23 @@
 .inner {
-  display: flex;
-  align-items: center;
-}
-
-.branding {
-  padding: var(--space-small);
-  flex: 0 0 auto;
-  color: var(--color-text);
-  display: flex;
   align-items: center;
 }
 
 .jobs {
   flex: 1 1 auto;
+  overflow-x: auto;
 }
 
-.tools {
-  border-left: 1px solid var(--color-outline);
-  padding: var(--space-small);
-  margin: 0 0 0 auto;
-  display: flex;
-  align-items: center;
-  color: var(--color-text-light);
+.options {
+  flex: 0 0 var(--space-large);
+}
+
+.option {
+  display: inline-block;
 }
 
-.toolsGithub {
-  color: inherit;
+.github {
+  display: block;
+  color: var(--color-text-ultra-light);
   width: var(--space-medium);
+  height: var(--space-medium);
 }

package/lib/components/bundle-assets/bundle-assets.module.css

@@ -31,6 +31,7 @@
 }
 
 .flag {
+  border-radius: var(--radius-small);
   display: inline-block;
   width: var(--space-xsmall);
   height: var(--space-xsmall);

package/lib/components/bundle-packages/bundle-packages.module.css

@@ -13,17 +13,21 @@
 }
 
 .duplicate {
-  margin-right: var(--space-xxxsmall);
+  border-radius: var(--radius-small);
   display: inline-block;
-  width: var(--space-small);
-  height: var(--space-small);
-  font-size: 10px;
+  width: var(--space-xsmall);
+  height: var(--space-xsmall);
+  font-family: var(--font-family);
+  font-size: 8px;
   font-weight: bold;
-  line-height: var(--space-small);
+  background: var(--color-highlight);
+  color: var(--color-text-light);
+  line-height: var(--space-xsmall);
   text-align: center;
   text-transform: uppercase;
   vertical-align: middle;
 
+  margin-right: var(--space-xxxsmall);
   background: var(--color-danger);
   color: var(--color-light);
 }

package/lib/components/delta/delta.js

@@ -15,11 +15,26 @@ var _deltaModule = _interopRequireDefault(require("./delta.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var Delta = function Delta(_ref) {
-  var className = _ref.className,
-      displayValue = _ref.displayValue,
-      deltaType = _ref.deltaType,
-      inverted = _ref.inverted;
+var propTypes = {
+  className: _propTypes["default"].string,
+  displayValue: _propTypes["default"].string.isRequired,
+  deltaType: _propTypes["default"].string.isRequired,
+  inverted: _propTypes["default"].bool
+};
+var defaultProps = {
+  className: '',
+  inverted: false
+};
+/**
+ * @param {PropTypes.InferProps<typeof propTypes>} props
+ * @return {React.FunctionComponentElement}
+ */
+
+var Delta = function Delta(props) {
+  var className = props.className,
+      displayValue = props.displayValue,
+      deltaType = props.deltaType,
+      inverted = props.inverted;
   var rootClassName = (0, _classnames["default"])(_deltaModule["default"].root, className, inverted && _deltaModule["default"].inverted, _deltaModule["default"][deltaType]);
   return /*#__PURE__*/_react["default"].createElement("span", {
     className: rootClassName
@@ -27,13 +42,5 @@ var Delta = function Delta(_ref) {
 };
 
 exports.Delta = Delta;
-Delta.defaultProps = {
-  className: '',
-  inverted: false
-};
-Delta.propTypes = {
-  className: _propTypes["default"].string,
-  displayValue: _propTypes["default"].string.isRequired,
-  deltaType: _propTypes["default"].string.isRequired,
-  inverted: _propTypes["default"].bool
-};
+Delta.defaultProps = defaultProps;
+Delta.propTypes = propTypes;

package/lib/components/delta/delta.module.css

@@ -1,6 +1,5 @@
 .root {
   white-space: nowrap;
-  color: var(--color-gray-ultra-light);
 }
 
 .HIGH_NEGATIVE {
@@ -8,7 +7,7 @@
 }
 
 .NEGATIVE {
-  color: var(--color-red-dark);
+  color: var(--color-red);
 }
 
 .LOW_NEGATIVE {
@@ -20,7 +19,7 @@
 }
 
 .POSITIVE {
-  color: var(--color-green-dark);
+  color: var(--color-green);
 }
 
 .HIGH_POSITIVE {
@@ -28,30 +27,38 @@
 }
 
 .inverted {
-  background-color: var(--color-gray-ultra-light);
+  padding: 2px;
+  border-radius: var(--radius-small);
+  background: var(--color-gray-ultra-light);
   color: var(--color-light);
 }
 
 .inverted.HIGH_NEGATIVE {
   background: var(--color-red-dark);
+  color: var(--color-highlight-danger);
 }
 
 .inverted.NEGATIVE {
-  background: var(--color-red-dark);
+  background: var(--color-red);
+  color: var(--color-highlight-danger);
 }
 
 .inverted.LOW_NEGATIVE {
   background: var(--color-red-light);
+  color: var(--color-highlight-danger);
 }
 
 .inverted.LOW_POSITIVE {
   background: var(--color-green-light);
+  color: var(--color-highlight-success);
 }
 
 .inverted.POSITIVE {
-  background: var(--color-green-dark);
+  background: var(--color-green);
+  color: var(--color-highlight-success);
 }
 
 .inverted.HIGH_POSITIVE {
   background: var(--color-green-dark);
+  color: var(--color-highlight-success);
 }

package/lib/components/duplicate-packages-warning/duplicate-packages-warning.js

@@ -36,9 +36,9 @@ var DuplicatePackagesWarning = function DuplicatePackagesWarning(props) {
     className: (0, _classnames["default"])(_duplicatePackagesWarningModule["default"].root, className)
   }, "Bundle contains ", /*#__PURE__*/_react["default"].createElement(CustomComponentLink, _utils.BUNDLE_PACKAGES_DUPLICATE, metricRunInfo.value, showDelta && metricRunInfo.delta !== 0 && /*#__PURE__*/_react["default"].createElement(_delta.Delta, {
     className: _duplicatePackagesWarningModule["default"].titleDelta,
-    inverted: true,
     displayValue: metricRunInfo.displayDelta,
-    deltaType: metricRunInfo.deltaType
+    deltaType: metricRunInfo.deltaType,
+    inverted: true
   }), " duplicate ".concat(metricRunInfo.value === 1 ? 'package' : 'packages', ".")));
 };
 

package/lib/components/job-header/job-header.js

@@ -40,7 +40,7 @@ var JobHeader = function JobHeader(props) {
   var rootClassName = (0, _classnames["default"])(_jobHeaderModule["default"].root, className);
   return /*#__PURE__*/_react["default"].createElement(_stack.Stack, {
     className: rootClassName,
-    space: "xxsmall"
+    space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement("h1", {
     className: _jobHeaderModule["default"].title
   }, /*#__PURE__*/_react["default"].createElement("span", null, "#".concat(job.internalBuildNumber)), tag && /*#__PURE__*/_react["default"].createElement("span", {
@@ -48,9 +48,10 @@ var JobHeader = function JobHeader(props) {
   }, tag)), /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     className: _jobHeaderModule["default"].meta,
     space: "xxsmall"
-  }, builtAt && /*#__PURE__*/_react["default"].createElement("span", {
+  }, builtAt && /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     className: _jobHeaderModule["default"].metaItem,
-    title: "".concat((0, _utils.formatDate)(builtAt), " ").concat((0, _utils.formatTime)(builtAt))
+    title: "".concat((0, _utils.formatDate)(builtAt), " ").concat((0, _utils.formatTime)(builtAt)),
+    space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     glyph: "clock",
     className: _jobHeaderModule["default"].metaIcon
@@ -58,9 +59,11 @@ var JobHeader = function JobHeader(props) {
     className: _jobHeaderModule["default"].metaLabel
   }, (0, _dateFns.formatDistanceToNow)(new Date(builtAt), {
     addSuffix: true
-  }))), hash && /*#__PURE__*/_react["default"].createElement("span", {
+  }))), hash && /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
+    span: true,
     className: _jobHeaderModule["default"].metaItem,
-    title: "Webpack bundle hash"
+    title: "Webpack bundle hash",
+    space: "xxxsmall"
   }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
     glyph: "commit",
     className: _jobHeaderModule["default"].metaIcon

package/lib/components/job-header/job-header.module.css

@@ -1,36 +1,32 @@
 .title {
-  line-height: 1;
-  font-weight: bold;
+  font-size: var(--size-xlarge);
   vertical-align: top;
 }
 
 .tag {
   padding: var(--space-xxxsmall);
   margin-left: var(--space-xxxsmall);
-  background-color: var(--color-highlight);
+  background: var(--color-highlight);
   color: var(--color-text-light);
   display: inline-block;
-  font-size: 9px;
+  font-size: var(--size-xsmall);
   line-height: var(--space-xxsmall);
   font-weight: normal;
   vertical-align: top;
 }
 
-.meta {
-  color: var(--color-text-light);
-}
-
 .metaItem {
   display: inline-flex;
   align-items: center;
+  white-space: nowrap;
 }
 
 .metaIcon {
   width: var(--space-small);
   height: var(--space-small);
-  margin-right: var(--space-xxxsmall);
+  color: var(--color-text-ultra-light);
 }
 
 .metaLabel {
-  line-height: var(--space-small);
+  color: var(--color-text-light);
 }

package/lib/components/jobs-header/jobs-header.js

@@ -27,7 +27,7 @@ var JobsHeader = function JobsHeader(props) {
   var rootClassName = (0, _classnames["default"])(_jobsHeaderModule["default"].root, className);
   return /*#__PURE__*/_react["default"].createElement(_flexStack.FlexStack, {
     className: rootClassName,
-    space: "none"
+    space: "small"
   }, jobs === null || jobs === void 0 ? void 0 : jobs.map(function (job, index) {
     return /*#__PURE__*/_react["default"].createElement(_jobHeader.JobHeader, {
       key: job.internalBuildNumber || index,

package/lib/components/jobs-header/jobs-header.module.css

@@ -1,11 +1,8 @@
 .root {
   align-items: stretch;
-  flex-wrap: wrap;
   padding: var(--space-small) 0;
 }
 
 .item {
-  flex: 0 0 auto;
-  padding: 0 var(--space-medium);
-  border-left: 1px solid var(--color-outline);
+  flex: 0 1 auto;
 }

package/lib/components/metric/metric.js

@@ -34,7 +34,6 @@ var Metric = function Metric(_ref) {
   var className = _ref.className,
       value = _ref.value,
       formatter = _ref.formatter,
-      inline = _ref.inline,
       anchored = _ref.anchored,
       children = _ref.children,
       enhanced = _ref.enhanced;
@@ -46,7 +45,7 @@ var Metric = function Metric(_ref) {
       displayValue = _ref3[1],
       displayUnit = _ref3[2];
 
-  var rootClassName = (0, _classnames["default"])(className, _metricModule["default"].root, inline && _metricModule["default"].inline, anchored && _metricModule["default"].anchored);
+  var rootClassName = (0, _classnames["default"])(className, _metricModule["default"].root, anchored && _metricModule["default"].anchored);
   return /*#__PURE__*/_react["default"].createElement("span", {
     className: rootClassName
   }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -65,7 +64,6 @@ Metric.defaultProps = {
   className: '',
   anchored: false,
   enhanced: false,
-  inline: false,
   value: 0,
   children: [],
   formatter: function formatter(val) {
@@ -75,7 +73,6 @@ Metric.defaultProps = {
 Metric.propTypes = {
   className: _propTypes["default"].string,
   enhanced: _propTypes["default"].bool,
-  inline: _propTypes["default"].bool,
   anchored: _propTypes["default"].bool,
   value: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
   formatter: _propTypes["default"].func,

package/lib/components/metric/metric.module.css

@@ -1,6 +1,9 @@
 .root {
   display: block;
-  letter-spacing: 0.05em;
+}
+
+.display {
+  vertical-align: middle;
 }
 
 .displayUnit {
@@ -8,7 +11,9 @@
 }
 
 .delta {
-  display: block;
+  display: inline;
+  vertical-align: middle;
+  margin: 0 0 0 var(--space-xxxsmall);
   font-size: var(--size-xsmall);
 }
 
@@ -23,8 +28,3 @@
   line-height: 1;
   margin-top: -2px;
 }
-
-.inline .delta {
-  display: inline-block;
-  margin: 0 0 0 var(--space-xxxsmall);
-}

package/lib/components/metrics-table-search/metrics-table-search.module.css

@@ -5,6 +5,7 @@
 }
 
 .input {
+  border-radius: var(--radius-medium) 0 0 var(--radius-medium);
   height: var(--space-large);
   border-color: var(--color-outline);
 }
@@ -21,12 +22,12 @@
   cursor: pointer;
   border-radius: 50%;
   position: absolute;
-  right: 0;
+  right: 2px;
   top: 50%;
   transform: translateY(-50%);
-  padding: var(--space-xxsmall);
-  width: var(--space-large);
-  height: var(--space-large);
+  padding: var(--space-xxxsmall);
+  width: var(--space-medium);
+  height: var(--space-medium);
   background: radial-gradient(var(--color-background) 50%, transparent);
   color: var(--color-text-ultra-light);
   transition: var(--transition-in);

package/lib/components/summary-item/summary-item.js

@@ -100,12 +100,12 @@ var SummaryItem = function SummaryItem(_ref2) {
     className: _summaryItemModule["default"].currentMetric,
     value: current,
     formatter: metric.formatter,
-    enhanced: true,
-    inline: true
+    enhanced: true
   }, showDelta && /*#__PURE__*/_react["default"].createElement(_delta.Delta, {
     className: _summaryItemModule["default"].delta,
     displayValue: runInfo.displayDeltaPercentage,
-    deltaType: runInfo.deltaType
+    deltaType: runInfo.deltaType,
+    inverted: true
   })), /*#__PURE__*/_react["default"].createElement(_metric.Metric, {
     className: _summaryItemModule["default"].baselineMetric,
     value: baseline,

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

@@ -29,21 +29,14 @@
 .currentMetric {
   display: block;
   color: var(--color-heading);
-  font-size: var(--size-large);
+  font-size: var(--size-xlarge);
   line-height: var(--space-medium);
   white-space: nowrap;
   font-weight: bold;
 }
 
-.delta {
-  font-size: var(--size-small);
-  line-height: var(--space-medium);
-}
-
 .baselineMetric {
   color: var(--color-text-light);
-  font-size: var(--size-small);
-  line-height: var(--space-small);
 }
 
 /* Loading state */
@@ -57,6 +50,6 @@
 
 /* Size large */
 .large .currentMetric {
-  font-size: var(--size-xxxlarge);
+  font-size: var(--size-xxlarge);
   line-height: var(--space-medium);
 }