@bundle-stats/ui 4.22.3 → 4.23.0-beta.10

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

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

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

@@ -1,5 +1,5 @@
 .title {
-  color: var(--color-text-ultra-light);
+  color: var(--color-text-light);
   font-weight: bold;
   font-size: var(--size-xsmall);
   text-transform: uppercase;
@@ -16,14 +16,11 @@
 
 .titleIcon {
   flex: 0 0 var(--space-small);
+  /* compensate for the button icon spacing */
   margin-top: -3px !important;
   margin-bottom: -3px !important;
 }
 
-.title + .info {
-  margin-top: var(--space-xxsmall);
-}
-
 .currentMetric {
   color: var(--color-heading);
   white-space: nowrap;
@@ -32,33 +29,32 @@
   height: var(--line-height-number);
 }
 
-.delta {
-  font-weight: bold;
-}
-
-.deltaValue + .deltaValue::before {
-  margin-left: calc(var(--space-xxxsmall) / 2);
-  margin-right: calc(var(--space-xxxsmall) / 2);
-  content: '/';
-  color: var(--color-text-ultra-light);
-}
-
 .baselineMetric {
   color: var(--color-text-ultra-light);
   font-size: var(--size-small);
+  font-family: var(--font-family-fixed);
+  font-weight: normal;
   line-height: var(--line-height-number);
   height: var(--line-height-number);
 }
 
-/* Loading state */
-.loading.currentMetric {
-  min-width: 0;
-  max-width: 8em;
+.baselineMetricValue {
+  color: var(--color-text-light);
+  line-height: inherit;
 }
 
-.loading.baselineMetric {
-  min-width: 0;
-  max-width: 8em;
+
+.delta {
+  font-weight: bold;
+  font-size: var(--size-small);
+  line-height: var(--line-height-number);
+}
+
+.deltaValue + .deltaValue::before {
+  margin-left: var(--space-xxxsmall);
+  margin-right: var(--space-xxxsmall);
+  content: '/';
+  color: var(--color-outline-dark);
 }
 
 /* Hover state */
@@ -82,15 +78,28 @@
     visibility 0s;
 }
 
-/* Size variation */
-.currentMetric {
-  font-size: var(--size-xxlarge);
+/* Loading state */
+.loading .currentMetric {
+  max-width: 6em;
 }
 
+.loading .baselineMetric {
+  max-width: 6em;
+}
+
+.loading .delta {
+  max-width: 12em;
+}
+
+/* Size variation */
 .small .currentMetric {
   font-size: var(--size-medium);
 }
 
+.currentMetric {
+  font-size: var(--size-xxlarge);
+}
+
 .large .currentMetric {
   font-size: var(--size-xxxlarge);
 }

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.js

@@ -10,25 +10,25 @@ const get_1 = __importDefault(require("lodash/get"));
 const utils_1 = require("@bundle-stats/utils");
 const constants_1 = require("../../constants");
 const box_1 = require("../../layout/box");
+const flex_stack_1 = require("../../layout/flex-stack");
 const component_link_1 = require("../component-link");
 const metric_run_info_1 = require("../metric-run-info");
 const summary_module_css_1 = __importDefault(require("./summary.module.css"));
-const METRICS_WEBPACK_OTHERS = [
-    ...constants_1.METRICS_WEBPACK_ASSETS,
-    ...constants_1.METRICS_WEBPACK_MODULES,
-    ...constants_1.METRICS_WEBPACK_PACKAGES,
-];
+const layout_1 = require("../../layout");
 const SummaryItem = (props) => {
     const { className = '', metricId, data, customLink: SummaryItemCustomLink, size, loading, showDelta, showBaseline, } = props;
     const componentLink = utils_1.METRIC_COMPONENT_LINKS.get(metricId);
     const metricData = (0, get_1.default)(data, metricId, { current: 0, baseline: 0 });
-    return (react_1.default.createElement(box_1.Box, { key: metricId, outline: true, outlineHover: true, padding: "small", as: SummaryItemCustomLink, ...componentLink?.link, className: className },
+    return (react_1.default.createElement(SummaryItemCustomLink, { key: metricId, ...componentLink?.link, className: className },
         react_1.default.createElement(metric_run_info_1.MetricRunInfo, { metricId: metricId, current: metricData.current, baseline: metricData.baseline, showDelta: showDelta, showBaseline: showBaseline, size: size, loading: loading })));
 };
 const Summary = ({ className = '', data = null, loading = false, showSummaryItemDelta = true, showSummaryItemBaseline = true, summaryItemLink = component_link_1.ComponentLink, }) => (react_1.default.createElement(box_1.Box, { className: (0, classnames_1.default)(summary_module_css_1.default.root, className) },
-    react_1.default.createElement("div", { className: summary_module_css_1.default.wrapper },
-        react_1.default.createElement("div", { className: summary_module_css_1.default.items }, constants_1.METRICS_WEBPACK_GENERAL.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "large", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline }))))),
-    react_1.default.createElement("div", { className: summary_module_css_1.default.wrapper },
-        react_1.default.createElement("div", { className: summary_module_css_1.default.items }, METRICS_WEBPACK_OTHERS.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: (0, classnames_1.default)(summary_module_css_1.default.item, summary_module_css_1.default.itemSmall), metricId: metricId, data: data, customLink: summaryItemLink, loading: loading, showDelta: showSummaryItemDelta, showBaseline: false })))))));
+    react_1.default.createElement(flex_stack_1.FlexStack, { wrap: "wrap", gap: "small", className: summary_module_css_1.default.row },
+        react_1.default.createElement(box_1.Box, { outline: true, padding: "small", className: summary_module_css_1.default.rowGroup },
+            react_1.default.createElement(flex_stack_1.FlexStack, { wrap: "wrap", gap: "medium" }, constants_1.METRICS_WEBPACK_GENERAL.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "xlarge", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline })))))),
+    react_1.default.createElement(flex_stack_1.FlexStack, { wrap: "wrap", gap: "small", className: summary_module_css_1.default.row }, [constants_1.METRICS_GROUP_ASSETS, constants_1.METRICS_GROUP_MODULES, constants_1.METRICS_GROUP_PACKAGES].map((metricGroup) => (react_1.default.createElement(layout_1.Stack, { className: summary_module_css_1.default.rowGroup, key: metricGroup.title },
+        react_1.default.createElement("h3", { className: summary_module_css_1.default.rowGroupTitle }, metricGroup.title),
+        react_1.default.createElement(box_1.Box, { outline: true, padding: "small" },
+            react_1.default.createElement(flex_stack_1.FlexStack, { wrap: "wrap", gap: "medium" }, metricGroup.metrics.map((metricId) => (react_1.default.createElement(SummaryItem, { key: metricId, className: summary_module_css_1.default.item, metricId: metricId, data: data, size: "large", loading: loading, customLink: summaryItemLink, showDelta: showSummaryItemDelta, showBaseline: showSummaryItemBaseline })))))))))));
 exports.Summary = Summary;
 //# sourceMappingURL=summary.js.map

package/lib/components/summary/summary.js.map

@@ -1 +1 @@
-{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAC5B,qDAA6B;AAC7B,+CAA6D;AAE7D,+CAKyB;AACzB,0CAAuC;AACvC,sDAAkD;AAClD,wDAAuE;AACvE,8EAAuC;AAEvC,MAAM,sBAAsB,GAAG;IAC7B,GAAG,kCAAsB;IACzB,GAAG,mCAAuB;IAC1B,GAAG,oCAAwB;CAC5B,CAAC;AAYF,MAAM,WAAW,GAAG,CAAC,KAAqD,EAAE,EAAE;IAC5E,MAAM,EACJ,SAAS,GAAG,EAAE,EACd,QAAQ,EACR,IAAI,EACJ,UAAU,EAAE,qBAAqB,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,YAAY,GACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,8BAAsB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAC3D,MAAM,UAAU,GAAG,IAAA,aAAG,EAAC,IAAI,EAAE,QAAQ,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC,CAAC;IAEpE,OAAO,CACL,8BAAC,SAAG,IACF,GAAG,EAAE,QAAQ,EACb,OAAO,QACP,YAAY,QACZ,OAAO,EAAC,OAAO,EACf,EAAE,EAAE,qBAAqB,KACrB,aAAa,EAAE,IAAI,EACvB,SAAS,EAAE,SAAS;QAEpB,8BAAC,+BAAa,IACZ,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,UAAU,CAAC,OAAO,EAC3B,QAAQ,EAAE,UAAU,CAAC,QAAQ,EAC7B,SAAS,EAAE,SAAS,EACpB,YAAY,EAAE,YAAY,EAC1B,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,GAChB,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAeK,MAAM,OAAO,GAAG,CAAC,EACtB,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,IAAI,EACX,OAAO,GAAG,KAAK,EACf,oBAAoB,GAAG,IAAI,EAC3B,uBAAuB,GAAG,IAAI,EAC9B,eAAe,GAAG,8BAAa,GACY,EAAE,EAAE,CAAC,CAChD,8BAAC,SAAG,IAAC,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,SAAS,CAAC;IACrC,uCAAK,SAAS,EAAE,4BAAG,CAAC,OAAO;QACzB,uCAAK,SAAS,EAAE,4BAAG,CAAC,KAAK,IACtB,mCAAuB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACzC,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,4BAAG,CAAC,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,IAAI,EAAC,OAAO,EACZ,OAAO,EAAE,OAAO,EAChB,UAAU,EAAE,eAAe,EAC3B,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,uBAAuB,GACrC,CACH,CAAC,CACE,CACF;IACN,uCAAK,SAAS,EAAE,4BAAG,CAAC,OAAO;QACzB,uCAAK,SAAS,EAAE,4BAAG,CAAC,KAAK,IACtB,sBAAsB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CACxC,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,IAAA,oBAAE,EAAC,4BAAG,CAAC,IAAI,EAAE,4BAAG,CAAC,SAAS,CAAC,EACtC,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,eAAe,EAC3B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,oBAAoB,EAC/B,YAAY,EAAE,KAAK,GACnB,CACH,CAAC,CACE,CACF,CACF,CACP,CAAC;AA3CW,QAAA,OAAO,WA2ClB"}
+{"version":3,"file":"summary.js","sourceRoot":"","sources":["../../../src/components/summary/summary.tsx"],"names":[],"mappings":"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"}

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

@@ -3,29 +3,75 @@
   width: 100%;
 }
 
-.wrapper {
+.row {
   width: 100%;
 }
 
-.wrapper + .wrapper {
-  margin-top: var(--summary-gap);
+.rowGroup {
+  flex: 1 1 auto;
+}
+
+.rowGroupTitle {
+  position: absolute;
+  font-size: 0;
+  width: 0;
+  left: -99999px;
 }
 
-.items {
-  display: flex;
-  flex-wrap: wrap;
-  width: calc(100% + var(--summary-gap));
-  margin-top: calc(0px - var(--summary-gap));
-  margin-left: calc(0px - var(--summary-gap));
+.row + .row {
+  margin-top: var(--summary-gap);
 }
 
 .item {
-  margin: var(--summary-gap) 0 0 var(--summary-gap);
-  flex: 1 0 10%; /* force equal sizes */
-  min-width: 12em;
+  flex: 1 1 10%; /* force equal sizes */
+  min-width: 8em;
   text-decoration: none;
+  position: relative;
+  z-index: 0;
 }
 
-.itemSmall {
-  min-width: 8em;
+.item::before {
+  content: '';
+  border-radius: var(--radius-medium);
+  background: var(--color-highlight);
+  display: block;
+  position: absolute;
+  z-index: -1;
+  top: calc(0px - var(--space-xsmall));
+  right: calc(0px - var(--space-xsmall));
+  bottom: calc(0px - var(--space-xsmall));
+  left: calc(0px - var(--space-xsmall));
+  opacity: 0;
+  transition: var(--transition-out);
+}
+
+.item:focus::before,
+.item:active::before,
+.item:hover::before {
+  opacity: 1;
+  transition: var(--transition-in);
+}
+
+.item + .item::after {
+  content: '';
+  border-radius: var(--radius-medium);
+  background: var(--color-outline);
+  display: block;
+  width: 1px;
+  position: absolute;
+  left: calc(0px - var(--space-xsmall));
+  top: var(--space-xxsmall);
+  bottom: var(--space-xxsmall);
+  opacity: 1;
+  transition: var(--transition-out);
+}
+
+.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/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModuleSizeMetrics = exports.ModuleSizeMetric = exports.MetricsDisplayGroupByDefault = exports.MetricsDisplayGroupBy = exports.MetricsDisplayTypeDefault = exports.MetricsDisplayType = exports.SORT = exports.METRICS_WEBPACK_PACKAGES = exports.METRICS_WEBPACK_MODULES = exports.METRICS_WEBPACK_ASSETS = exports.METRICS_WEBPACK_GENERAL = exports.ASSETS_SIZES_FILE_TYPE_MAP = exports.SECTION_URLS = exports.URLS = void 0;
+exports.ModuleSizeMetrics = exports.ModuleSizeMetric = exports.MetricsDisplayGroupByDefault = exports.MetricsDisplayGroupBy = exports.MetricsDisplayTypeDefault = exports.MetricsDisplayType = exports.SORT = exports.METRICS_GROUP_PACKAGES = exports.METRICS_GROUP_MODULES = exports.METRICS_GROUP_ASSETS = exports.METRICS_WEBPACK_PACKAGES = exports.METRICS_WEBPACK_MODULES = exports.METRICS_WEBPACK_ASSETS = exports.METRICS_WEBPACK_GENERAL = exports.ASSETS_SIZES_FILE_TYPE_MAP = exports.SECTION_URLS = exports.URLS = void 0;
 const utils_1 = require("@bundle-stats/utils");
 exports.URLS = {
     OVERVIEW: '/',
@@ -31,6 +31,18 @@ exports.METRICS_WEBPACK_MODULES = [
     'webpack.duplicateCode',
 ];
 exports.METRICS_WEBPACK_PACKAGES = ['webpack.packageCount', 'webpack.duplicatePackagesCount'];
+exports.METRICS_GROUP_ASSETS = {
+    title: 'Assets',
+    metrics: exports.METRICS_WEBPACK_ASSETS,
+};
+exports.METRICS_GROUP_MODULES = {
+    title: 'Modules',
+    metrics: exports.METRICS_WEBPACK_MODULES,
+};
+exports.METRICS_GROUP_PACKAGES = {
+    title: 'Packages',
+    metrics: exports.METRICS_WEBPACK_PACKAGES,
+};
 exports.SORT = {
     ASC: 'asc',
     DESC: 'desc',

package/lib/constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;AAAA,+CAA2D;AAE9C,QAAA,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEW,QAAA,YAAY,GAAG;IAC1B,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,QAAQ;IAChC,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,MAAM;IAC9B,CAAC,gBAAQ,CAAC,OAAO,CAAC,EAAE,YAAI,CAAC,OAAO;IAChC,CAAC,gBAAQ,CAAC,QAAQ,CAAC,EAAE,YAAI,CAAC,QAAQ;CACnC,CAAC;AAEW,QAAA,0BAA0B,GAAG,kBAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEW,QAAA,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACW,QAAA,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACtE,QAAA,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACW,QAAA,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC;AAEtF,QAAA,IAAI,GAAG;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAEY,QAAA,yBAAyB,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAElE,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC/B,0CAAiB,CAAA;IACjB,0CAAiB,CAAA;AACnB,CAAC,EAHW,qBAAqB,qCAArB,qBAAqB,QAGhC;AAEY,QAAA,4BAA4B,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAEzE,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,kCAAc,CAAA;IACd,oDAAgC,CAAA;IAChC,4CAAwB,CAAA;AAC1B,CAAC,EAJW,gBAAgB,gCAAhB,gBAAgB,QAI3B;AAEY,QAAA,iBAAiB,GAAG;IAC/B,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;QACvB,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,2CAA2C;KACrD;IACD,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE;QAC7B,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,iDAAiD;KAC3D;IACD,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE;QACjC,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,uBAAuB;KACjC;CACF,CAAC"}
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":";;;AAAA,+CAA2D;AAE9C,QAAA,IAAI,GAAG;IAClB,QAAQ,EAAE,GAAG;IACb,MAAM,EAAE,SAAS;IACjB,OAAO,EAAE,UAAU;IACnB,QAAQ,EAAE,WAAW;CACtB,CAAC;AAEW,QAAA,YAAY,GAAG;IAC1B,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,QAAQ;IAChC,CAAC,gBAAQ,CAAC,MAAM,CAAC,EAAE,YAAI,CAAC,MAAM;IAC9B,CAAC,gBAAQ,CAAC,OAAO,CAAC,EAAE,YAAI,CAAC,OAAO;IAChC,CAAC,gBAAQ,CAAC,QAAQ,CAAC,EAAE,YAAI,CAAC,QAAQ;CACnC,CAAC;AAEW,QAAA,0BAA0B,GAAG,kBAAU,CAAC,MAAM,CACzD,CAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAC;IAClB,GAAG,GAAG;IACN,CAAC,gCAAgC,QAAQ,EAAE,CAAC,EAAE,QAAQ;CACvD,CAAC,EACF,EAAE,CACH,CAAC;AAEW,QAAA,uBAAuB,GAAG;IACrC,4BAA4B;IAC5B,4BAA4B;IAC5B,6BAA6B;IAC7B,2BAA2B;CAC5B,CAAC;AACW,QAAA,sBAAsB,GAAG,CAAC,oBAAoB,EAAE,oBAAoB,CAAC,CAAC;AACtE,QAAA,uBAAuB,GAAG;IACrC,qBAAqB;IACrB,+BAA+B;IAC/B,uBAAuB;CACxB,CAAC;AACW,QAAA,wBAAwB,GAAG,CAAC,sBAAsB,EAAE,gCAAgC,CAAC,CAAC;AAEtF,QAAA,oBAAoB,GAAG;IAClC,KAAK,EAAE,QAAQ;IACf,OAAO,EAAE,8BAAsB;CAChC,CAAC;AACW,QAAA,qBAAqB,GAAG;IACnC,KAAK,EAAE,SAAS;IAChB,OAAO,EAAE,+BAAuB;CACjC,CAAC;AACW,QAAA,sBAAsB,GAAG;IACpC,KAAK,EAAE,UAAU;IACjB,OAAO,EAAE,gCAAwB;CAClC,CAAC;AAEW,QAAA,IAAI,GAAG;IAClB,GAAG,EAAE,KAAK;IACV,IAAI,EAAE,MAAM;CACJ,CAAC;AAEX,IAAY,kBAGX;AAHD,WAAY,kBAAkB;IAC5B,yCAAmB,CAAA;IACnB,qCAAe,CAAA;AACjB,CAAC,EAHW,kBAAkB,kCAAlB,kBAAkB,QAG7B;AAEY,QAAA,yBAAyB,GAAG,kBAAkB,CAAC,KAAK,CAAC;AAElE,IAAY,qBAGX;AAHD,WAAY,qBAAqB;IAC/B,0CAAiB,CAAA;IACjB,0CAAiB,CAAA;AACnB,CAAC,EAHW,qBAAqB,qCAArB,qBAAqB,QAGhC;AAEY,QAAA,4BAA4B,GAAG,qBAAqB,CAAC,MAAM,CAAC;AAEzE,IAAY,gBAIX;AAJD,WAAY,gBAAgB;IAC1B,kCAAc,CAAA;IACd,oDAAgC,CAAA;IAChC,4CAAwB,CAAA;AAC1B,CAAC,EAJW,gBAAgB,gCAAhB,gBAAgB,QAI3B;AAEY,QAAA,iBAAiB,GAAG;IAC/B,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE;QACvB,KAAK,EAAE,MAAM;QACb,OAAO,EAAE,2CAA2C;KACrD;IACD,CAAC,gBAAgB,CAAC,UAAU,CAAC,EAAE;QAC7B,KAAK,EAAE,YAAY;QACnB,OAAO,EAAE,iDAAiD;KAC3D;IACD,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE;QACjC,KAAK,EAAE,gBAAgB;QACvB,OAAO,EAAE,uBAAuB;KACjC;CACF,CAAC"}

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

@@ -32,22 +32,21 @@
   --line-height-number: 1.2em;
 
   /*
-   * Color scheme:
-   * https://coolors.co/287acc-da444e-55b950-efcc1a-192339
-   * http://mcg.mbitson.com/#!?mcgpalette0=%23da444e&mcgpalette1=%2355b950&mcgpalette2=%23ebc013&mcgpalette3=%232a2933&mcgpalette4=%23287acc&themename=bundle-stats
-   * https://hihayk.github.io/scale/#4/5/50/90/-51/0/0/14/353138/53/49/56/white
+   * Color scheme: https://coolors.co/287acc-da444e-55b950-e5c110-192339-353538
    */
+
   --color-gray-25: #f9f9f9;
-  --color-gray-50: #e5e5e7;
-  --color-gray-100: #d2d2d4;
-  --color-gray-200: #959499;
-  --color-gray-300: #6a6970;
-  --color-gray-400: #4a4952;
-  --color-gray-500: #2a2933;
-  --color-gray-600: #25242e;
-  --color-gray-700: #1f1f27;
-  --color-gray-800: #191920;
-  --color-gray-900: #0f0f14;
+  /** 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);
@@ -56,16 +55,17 @@
   --color-gray-ultra-dark: var(--color-gray-900);
 
   --color-red-25: #fdf5f6;
-  --color-red-50: #fbe9ea;
-  --color-red-100: #f4c7ca;
-  --color-red-200: #eda2a7;
-  --color-red-300: #e57c83;
-  --color-red-400: #e06069;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/DA444E/218/68/78/white */
+  --color-red-50: #fbeced;
+  --color-red-100: #f5cbcd;
+  --color-red-200: #eea9ae;
+  --color-red-300: #e7878e;
+  --color-red-400: #e1666e;
   --color-red-500: #da444e;
-  --color-red-600: #d63e47;
-  --color-red-700: #d0353d;
-  --color-red-800: #cb2d35;
-  --color-red-900: #c21f25;
+  --color-red-600: #c92a35;
+  --color-red-700: #b31520;
+  --color-red-800: #8c0710;
+  --color-red-900: #660005;
   --color-red-ultra-light: var(--color-red-100);
   --color-red-light: var(--color-red-300);
   --color-red: var(--color-red-500);
@@ -73,16 +73,17 @@
   --color-red-ultra-dark: var(--color-red-900);
 
   --color-blue-25: #f3f8fd;
-  --color-blue-50: #e5eff9;
-  --color-blue-100: #bfd7f0;
-  --color-blue-200: #94bde6;
-  --color-blue-300: #69a2db;
-  --color-blue-400: #488ed4;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/287ACC/40/122/204/white */
+  --color-blue-50: #eaf2fa;
+  --color-blue-100: #c3daf1;
+  --color-blue-200: #9cc2e8;
+  --color-blue-300: #75aade;
+  --color-blue-400: #4f92d5;
   --color-blue-500: #287acc;
-  --color-blue-600: #2472c7;
-  --color-blue-700: #1e67c0;
-  --color-blue-800: #185db9;
-  --color-blue-900: #0f4aad;
+  --color-blue-600: #1168bf;
+  --color-blue-700: #0055ac;
+  --color-blue-800: #00438c;
+  --color-blue-900: #003166;
 
   --color-blue-ultra-light: var(--color-blue-100);
   --color-blue-light: var(--color-blue-300);
@@ -91,16 +92,17 @@
   --color-blue-ultra-dark: var(--color-blue-900);
 
   --color-green-25: #f6fbf6;
-  --color-green-50: #ebf7ea;
-  --color-green-100: #cceacb;
-  --color-green-200: #aadca8;
-  --color-green-300: #88ce85;
-  --color-green-400: #6fc46a;
+  /* https://hihayk.github.io/scale/#4/5/60/90/0/-0/0/100/55b950/85/185/80/white */
+  --color-green-50: #eef8ee;
+  --color-green-100: #cfebce;
+  --color-green-200: #b1dfaf;
+  --color-green-300: #92d28f;
+  --color-green-400: #74c670;
   --color-green-500: #55b950;
-  --color-green-600: #4eb249;
-  --color-green-700: #44aa40;
-  --color-green-800: #3ba237;
-  --color-green-900: #2a9327;
+  --color-green-600: #3ea839;
+  --color-green-700: #2b9426;
+  --color-green-800: #1b7b16;
+  --color-green-900: #0f5f0b;
 
   --color-green-ultra-light: var(--color-green-100);
   --color-green-light: var(--color-green-300);
@@ -109,32 +111,35 @@
   --color-green-ultra-dark: var(--color-green-900);
 
   --color-yellow-25: #fffdf2;
-  --color-yellow-50: #fdf7e3;
-  --color-yellow-100: #f9ecb8;
-  --color-yellow-200: #f5e089;
-  --color-yellow-300: #f1d35a;
-  --color-yellow-400: #eec936;
-  --color-yellow-500: #ebc013;
-  --color-yellow-600: #e9ba11;
-  --color-yellow-700: #e5b20e;
-  --color-yellow-800: #e2aa0b;
-  --color-yellow-900: #dd9c06;
-
-  --color-yellow-light-background: var(--color-yellow-25);
+  /* https://hihayk.github.io/scale/#4/5/20/80/0/-0/0/0/E5C110/229/193/16/white */
+  --color-yellow-50: #faf3cf;
+  --color-yellow-100: #f6e9a9;
+  --color-yellow-200: #f2df83;
+  --color-yellow-300: #edd55d;
+  --color-yellow-400: #e9cb36;
+  --color-yellow-500: #e5c110;
+  --color-yellow-600: #dab70f;
+  --color-yellow-700: #ceae0e;
+  --color-yellow-800: #c3a40e;
+  --color-yellow-900: #b79a0d;
+
   --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;
 
-  /* Functional color variables */
-  --color-branding-light: #2b76d4;
+  /* https://hihayk.github.io/scale/#4/4/40/40/0/-0/0/0/1a477f/26/71/127/white */
+  --color-branding-light: #31598c;
   --color-branding: #1a477f;
-  --color-branding-dark: #09182a;
+  --color-branding-dark: #102b4c;
+}
 
+body {
+  /* Functional color variables */
   --color-text-ultra-light: var(--color-gray-ultra-light);
   --color-text-light: var(--color-gray-light);
   --color-text: var(--color-gray);
@@ -142,6 +147,10 @@
   --color-text-ultra-dark: var(--color-gray-ultra-dark);
   --color-heading: var(--color-gray-ultra-dark);
 
+  --color-accent-light: var(--color-branding-light);
+  --color-accent: var(--color-branding);
+  --color-accent-dark: var(--color-branding-dark);
+
   --color-success-light: var(--color-green-light);
   --color-success: var(--color-green);
   --color-success-dark: var(--color-green-dark);
@@ -183,8 +192,8 @@
   --color-backdrop: rgba(0, 0, 0, 0.05);
   --color-shadow: rgba(0, 0, 0, 0.25);
 
-  --transition-duration-in: 0.2s;
-  --transition-duration-out: 0.17s;
+  --transition-duration-in: 120ms;
+  --transition-duration-out: 80ms;
   --transition-in: all var(--transition-duration-in) ease-in;
   --transition-out: all var(--transition-duration-out) ease-out;
 
@@ -193,9 +202,15 @@
   --layer: 100;
   /** for components with overlays (tooltips, hovercards) */
   --layer-high: 1000;
+  /** for the sticky header, tabs and side panels */
   --layer-xhigh: 10000;
   /** for dialogs/modals */
   --layer-xxhigh: 100000;
+  /**
+   * z-index used by overlays (tooltips, hovercards, dropdowns)
+   * overridden by the dialog portal to place nested overlays above the dialog
+   */
+  --layer-overlay: var(--layer-high);
 
   --shadow-layer: 0 0 var(--space-xxxsmall) var(--color-shadow);
   --shadow-layer-high: 0 0 var(--space-xxsmall) var(--color-shadow);
@@ -219,3 +234,12 @@
   --entry-info-width: 64rem;
   --entry-info-top: var(--header-height);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation-duration: 0s !important;
+    animation-delay: 0s !important;
+    transition-duration: 0s !important;
+    transition-delay: 0s !important;
+  }
+}

package/lib/layout/flex-stack/flex-stack.js

@@ -9,8 +9,8 @@ const classnames_1 = __importDefault(require("classnames"));
 const tokens_1 = require("../../tokens");
 const flex_stack_module_css_1 = __importDefault(require("./flex-stack.module.css"));
 const FlexStack = (props) => {
-    const { as: Component = 'div', className = '', space = tokens_1.NO_SPACE, inline = false, alignItems = '', ...restProps } = props;
-    const rootClassName = (0, classnames_1.default)(flex_stack_module_css_1.default.root, flex_stack_module_css_1.default[`space--${space}`], flex_stack_module_css_1.default[`align-items--${alignItems}`], inline && flex_stack_module_css_1.default.inline, className);
+    const { as: Component = 'div', className = '', gap, space, inline = false, direction = '', wrap = '', alignItems = '', justifyContent = '', ...restProps } = props;
+    const rootClassName = (0, classnames_1.default)(flex_stack_module_css_1.default.root, flex_stack_module_css_1.default[`gap--${gap ?? space ?? tokens_1.NO_SPACE}`], flex_stack_module_css_1.default[`direction--${direction}`], flex_stack_module_css_1.default[`wrap--${wrap}`], flex_stack_module_css_1.default[`align-items--${alignItems}`], flex_stack_module_css_1.default[`justify-content--${justifyContent}`], inline && flex_stack_module_css_1.default.inline, className);
     return react_1.default.createElement(Component, { ...restProps, className: rootClassName });
 };
 exports.FlexStack = FlexStack;

package/lib/layout/flex-stack/flex-stack.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex-stack.js","sourceRoot":"","sources":["../../../src/layout/flex-stack/flex-stack.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,yCAAgD;AAChD,oFAA0C;AAWnC,MAAM,SAAS,GAAG,CACvB,KAAiF,EACjF,EAAE;IACF,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,KAAK,GAAG,iBAAQ,EAChB,MAAM,GAAG,KAAK,EACd,UAAU,GAAG,EAAE,EACf,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,+BAAG,CAAC,IAAI,EACR,+BAAG,CAAC,UAAU,KAAK,EAAE,CAAC,EACtB,+BAAG,CAAC,gBAAgB,UAAU,EAAE,CAAC,EACjC,MAAM,IAAI,+BAAG,CAAC,MAAM,EACpB,SAAS,CACV,CAAC;IAEF,OAAO,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AArBW,QAAA,SAAS,aAqBpB"}
+{"version":3,"file":"flex-stack.js","sourceRoot":"","sources":["../../../src/layout/flex-stack/flex-stack.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4DAA4B;AAE5B,yCAAgD;AAChD,oFAA0C;AAwBnC,MAAM,SAAS,GAAG,CACvB,KAAiF,EACjF,EAAE;IACF,MAAM,EACJ,EAAE,EAAE,SAAS,GAAG,KAAK,EACrB,SAAS,GAAG,EAAE,EACd,GAAG,EACH,KAAK,EACL,MAAM,GAAG,KAAK,EACd,SAAS,GAAG,EAAE,EACd,IAAI,GAAG,EAAE,EACT,UAAU,GAAG,EAAE,EACf,cAAc,GAAG,EAAE,EACnB,GAAG,SAAS,EACb,GAAG,KAAK,CAAC;IAEV,MAAM,aAAa,GAAG,IAAA,oBAAE,EACtB,+BAAG,CAAC,IAAI,EACR,+BAAG,CAAC,QAAQ,GAAG,IAAI,KAAK,IAAI,iBAAQ,EAAE,CAAC,EACvC,+BAAG,CAAC,cAAc,SAAS,EAAE,CAAC,EAC9B,+BAAG,CAAC,SAAS,IAAI,EAAE,CAAC,EACpB,+BAAG,CAAC,gBAAgB,UAAU,EAAE,CAAC,EACjC,+BAAG,CAAC,oBAAoB,cAAc,EAAE,CAAC,EACzC,MAAM,IAAI,+BAAG,CAAC,MAAM,EACpB,SAAS,CACV,CAAC;IAEF,OAAO,8BAAC,SAAS,OAAK,SAAS,EAAE,SAAS,EAAE,aAAa,GAAI,CAAC;AAChE,CAAC,CAAC;AA5BW,QAAA,SAAS,aA4BpB"}