@7shifts/sous-chef 3.43.3-beta.0 → 3.43.3-beta.1

package/dist/hooks/useBackgroundColor.d.ts

@@ -0,0 +1 @@
+export declare const useBackgroundColor: () => string;

package/dist/index.css

@@ -1,17 +1,3 @@
-@font-face {
-  font-family: "Proxima Nova";
-  src: url("https://app.7shifts.com/fonts/proximaNova-semibold.eot");
-  src: url("https://app.7shifts.com/fonts/proximaNova-semibold.eot?#iefix") format("embedded-opentype"), url("https://app.7shifts.com/fonts/proximaNova-semibold.woff") format("woff"), url("https://app.7shifts.com/fonts/proximaNova-semibold.ttf") format("truetype"), url("https://app.7shifts.com/fonts/proximaNova-semibold.svg#ProximaNova-Semibold") format("svg");
-  font-weight: 600;
-  font-style: normal;
-}
-@font-face {
-  font-family: "Proxima Nova";
-  src: url("https://app.7shifts.com/fonts/ProximaNova-Regular.eot");
-  src: url("https://app.7shifts.com/fonts/ProximaNova-Regular.eot?#iefix") format("embedded-opentype"), url("https://app.7shifts.com/fonts/ProximaNova-Regular.woff") format("woff"), url("https://app.7shifts.com/fonts/ProximaNova-Regular.ttf") format("truetype"), url("https://app.7shifts.com/fonts/ProximaNova-Regular.svg#proxima_nova_rgregular") format("svg");
-  font-weight: normal;
-  font-style: normal;
-}
 :root {
   --font-family-brand: "Proxima Nova", sans-serif;
   --font-family-body: "Proxima Nova", sans-serif;
@@ -143,12 +129,6 @@
   --z-index-tooltip: 300;
   --z-index-portal: 9999;
 }
-body {
-  font-family: var(--font-family-brand);
-  font-size: var(--font-size-200);
-  line-height: var(--font-line-height-200);
-  font-weight: var(--p-font-weight-normal);
-}
 ._OINV1 {
   display: flex;
 }
@@ -1018,7 +998,7 @@ Just for future references:
   pointer-events: none;
 }
 ._1oK6H {
-  top: 28px;
+  top: 24px;
   border-bottom: 0;
   border-top-right-radius: 8px;
   border-top-left-radius: 8px;
@@ -2344,7 +2324,8 @@ input:disabled + ._2W10t::after {
 ._24Yjb table thead tr th:first-of-type {
   position: sticky;
   left: 0;
-  background-color: var(--color-white);
+  -webkit-backdrop-filter: blur(100px);
+          backdrop-filter: blur(100px);
 }
 ._24Yjb table tbody tr td:first-of-type {
   position: sticky;
@@ -2388,7 +2369,8 @@ input:disabled + ._2W10t::after {
 ._2pehG table thead tr th:last-of-type {
   position: sticky;
   right: 0;
-  background-color: var(--color-white);
+  -webkit-backdrop-filter: blur(100px);
+          backdrop-filter: blur(100px);
 }
 ._2pehG table tbody tr td:last-of-type {
   position: sticky;

package/dist/index.d.ts

@@ -1,7 +1,6 @@
 import './foundation/tokens/typography/_typography-tokens.scss';
 import './foundation/tokens/color/_color-tokens.scss';
 import './foundation/tokens/zindex/_z-index-tokens.scss';
-import './foundation/_initital-setup.scss';
 export * from './foundation/tokens/color/color-constants';
 export * from './foundation/tokens/zindex/z-index-constants';
 export * from './core';

package/dist/index.js

@@ -5981,10 +5981,34 @@ var HeaderSortIcon = function HeaderSortIcon(_ref) {
   })));
 };
 
+var ModalContext = React.createContext({
+  isModalMounted: false
+});
+var useModalContext = function useModalContext() {
+  var context = React.useContext(ModalContext);
+  return context || {};
+};
+
+var useBackgroundColor = function useBackgroundColor() {
+  var _useModalContext = useModalContext(),
+    isInsideModal = _useModalContext.isModalMounted;
+  var _useState = React.useState(COLORS.white),
+    backgroundColor = _useState[0],
+    setBackgroundColor = _useState[1];
+  React.useLayoutEffect(function () {
+    if (!isInsideModal) {
+      var bodyStyles = window.getComputedStyle(document.body);
+      setBackgroundColor(bodyStyles.getPropertyValue('background-color'));
+    }
+  }, [isInsideModal]);
+  return backgroundColor;
+};
+
 var DataTableHeader = function DataTableHeader(_ref) {
   var columns = _ref.columns,
     onSort = _ref.onSort,
     showActionMenu = _ref.showActionMenu;
+  var backgroundColor = useBackgroundColor();
   var haveLabels = columns.find(function (column) {
     return column.label && column.label !== '';
   });
@@ -6006,7 +6030,11 @@ var DataTableHeader = function DataTableHeader(_ref) {
   return React__default.createElement(React.Fragment, null, React__default.createElement(ColumnSizes, {
     columns: columns,
     showActionMenu: showActionMenu
-  }), React__default.createElement("thead", null, React__default.createElement("tr", {
+  }), React__default.createElement("thead", {
+    style: {
+      backgroundColor: backgroundColor
+    }
+  }, React__default.createElement("tr", {
     className: styles$a['data-table-header']
   }, columns.filter(function (column) {
     return !column.hidden;
@@ -7692,14 +7720,6 @@ var ModalHeader = function ModalHeader(_ref) {
   }, subHeader));
 };
 
-var ModalContext = React.createContext({
-  isModalMounted: false
-});
-var useModalContext = function useModalContext() {
-  var context = React.useContext(ModalContext);
-  return context || {};
-};
-
 var _excluded$2y = ["children", "header", "subHeader", "onClose", "loading", "zIndex", "rootElementId", "width", "height", "maxWidth", "shouldReturnFocusAfterClose", "testId"];
 var Modal = function Modal(_ref) {
   var children = _ref.children,
@@ -8633,6 +8653,7 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
     stickyColumns = _ref.stickyColumns,
     isShowingColumns = _ref.isShowingColumns,
     isShowingFooter = _ref.isShowingFooter;
+  var backgroundColor = useBackgroundColor();
   var _useDataTableScrollSt = useDataTableScrollState(stickyColumns),
     scrollContainerRef = _useDataTableScrollSt.scrollContainerRef,
     onScroll = _useDataTableScrollSt.onScroll,
@@ -8657,6 +8678,9 @@ var DataTableStickyColumnsContainer = function DataTableStickyColumnsContainer(_
     isShowingColumns: !!isShowingColumns
   }), React__default.createElement("div", {
     className: classnames(styles$K[containerClassName], (_classNames = {}, _classNames[styles$K[containerClassName + "--with-footer"]] = isShowingFooter, _classNames[styles$K[containerClassName + "--with-left-sticky-columns"]] = hasLeftColumnSticky, _classNames[styles$K[containerClassName + "--with-left-sticky-columns-and-shadow"]] = hasLeftColumnSticky && hasScrollOnLeft, _classNames[styles$K[containerClassName + "--with-right-sticky-columns"]] = hasRightColumnSticky, _classNames[styles$K[containerClassName + "--with-right-sticky-columns-and-shadow"]] = hasRightColumnSticky && hasScrollOnRight, _classNames[styles$K[containerClassName + "--no-shadow"]] = noShadow, _classNames)),
+    style: {
+      backgroundColor: backgroundColor
+    },
     onScroll: onScroll,
     ref: scrollContainerRef,
     "data-testid": "sticky-columns-container"