@7shifts/sous-chef 3.45.1 → 3.45.2

package/dist/foundation/tokens/color/color-codes.d.ts

@@ -7,12 +7,12 @@ export declare const COLOR_CODES: {
     readonly 'tangerine-400': " #ff6808";
     readonly 'tangerine-500': " #cf5406";
     readonly 'tangerine-600': " #95400a";
-    readonly 'eggplant-100': " #f0f3fb";
-    readonly 'eggplant-200': " #d3dbf4";
-    readonly 'eggplant-300': " #a7b7ea";
-    readonly 'eggplant-400': " #6d87dd";
-    readonly 'eggplant-500': " #6179c6";
-    readonly 'eggplant-600': " #415184";
+    readonly 'eggplant-100': " #f8f3ff";
+    readonly 'eggplant-200': " #ebdcff";
+    readonly 'eggplant-300': " #d9bff4";
+    readonly 'eggplant-400': " #c293f1";
+    readonly 'eggplant-500': " #846db3";
+    readonly 'eggplant-600': " #453e75";
     readonly 'mint-100': " #ecfaf8";
     readonly 'mint-200': " #c6f1eb";
     readonly 'mint-300': " #8de4d7";

package/dist/index.css

@@ -54,18 +54,18 @@
   --color-tangerine-500-rgb: 207, 84, 6;
   --color-tangerine-600: #95400a;
   --color-tangerine-600-rgb: 149, 64, 10;
-  --color-eggplant-100: #f0f3fb;
-  --color-eggplant-100-rgb: 240, 243, 251;
-  --color-eggplant-200: #d3dbf4;
-  --color-eggplant-200-rgb: 211, 219, 244;
-  --color-eggplant-300: #a7b7ea;
-  --color-eggplant-300-rgb: 67, 183, 234;
-  --color-eggplant-400: #6d87dd;
-  --color-eggplant-400-rgb: 109, 135, 221;
-  --color-eggplant-500: #6179c6;
-  --color-eggplant-500-rgb: 97, 121, 198;
-  --color-eggplant-600: #415184;
-  --color-eggplant-600-rgb: 65, 81, 132;
+  --color-eggplant-100: #f8f3ff;
+  --color-eggplant-100-rgb: 248, 243, 255;
+  --color-eggplant-200: #ebdcff;
+  --color-eggplant-200-rgb: 235, 220, 255;
+  --color-eggplant-300: #d9bff4;
+  --color-eggplant-300-rgb: 217, 191, 244;
+  --color-eggplant-400: #c293f1;
+  --color-eggplant-400-rgb: 194, 147, 241;
+  --color-eggplant-500: #846db3;
+  --color-eggplant-500-rgb: 132, 109, 179;
+  --color-eggplant-600: #453e75;
+  --color-eggplant-600-rgb: 69, 62, 117;
   --color-mint-100: #ecfaf8;
   --color-mint-100-rgb: 236, 250, 248;
   --color-mint-200: #c6f1eb;
@@ -491,6 +491,7 @@ Just for future references:
   line-height: var(--font-line-height-200);
   font-weight: var(--p-font-weight-normal);
   font-weight: var(--p-font-weight-bold);
+  line-height: normal;
   text-align: center;
   padding: 9px 12px;
   border-radius: var(--border-radius-400);
@@ -500,6 +501,7 @@ Just for future references:
   cursor: pointer;
   display: inline-flex;
   justify-content: center;
+  align-items: center;
   width: auto;
   height: -moz-fit-content;
   height: fit-content;
@@ -587,19 +589,19 @@ Just for future references:
   color: var(--color-white);
 }
 ._9zcZL:hover {
-  background: #122d56;
+  background: #20519a;
   border-color: var(--color-blackberry-600);
   color: var(--color-white);
 }
 ._9zcZL:disabled {
-  background: var(--color-blackberry-200);
-  border-color: var(--color-blackberry-200);
-  color: var(--color-white);
+  background: var(--color-grey-200);
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
 }
 ._9zcZL[aria-disabled=true] {
-  background: var(--color-blackberry-200);
-  border-color: var(--color-blackberry-200);
-  color: var(--color-white);
+  background: var(--color-grey-200);
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
 }
 
 ._1lXaO {
@@ -624,24 +626,24 @@ Just for future references:
 }
 
 ._1cX3x {
-  background: var(--color-eggplant-400);
-  border-color: var(--color-eggplant-400);
-  color: var(--color-white);
+  background: var(--color-eggplant-300);
+  border-color: var(--color-eggplant-300);
+  color: var(--color-grey-600);
 }
 ._1cX3x:hover {
-  background: var(--color-eggplant-500);
-  border-color: var(--color-eggplant-500);
-  color: var(--color-white);
+  background: #cfaef1;
+  border-color: #cfaef1;
+  color: var(--color-grey-600);
 }
 ._1cX3x:disabled {
-  background: var(--color-eggplant-300);
-  border-color: var(--color-eggplant-300);
-  color: var(--color-white);
+  background: var(--color-grey-200);
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
 }
 ._1cX3x[aria-disabled=true] {
-  background: var(--color-eggplant-300);
-  border-color: var(--color-eggplant-300);
-  color: var(--color-white);
+  background: var(--color-grey-200);
+  border-color: var(--color-grey-200);
+  color: var(--color-grey-300);
 }
 
 ._1KiTO {
@@ -788,7 +790,7 @@ Just for future references:
 ._13HZE {
   background: transparent;
   border-color: transparent;
-  color: var(--color-eggplant-400);
+  color: var(--color-eggplant-500);
   text-decoration: underline;
 }
 ._13HZE:hover {

package/dist/index.js

@@ -6010,20 +6010,30 @@ var useAccordionContext = function useAccordionContext() {
   return context || {};
 };
 
+var CardContext = React.createContext({
+  isCardMounted: false
+});
+var useCardContext = function useCardContext() {
+  var context = React.useContext(CardContext);
+  return context || {};
+};
+
 var useBackgroundColor = function useBackgroundColor() {
   var _useModalContext = useModalContext(),
     isInsideModal = _useModalContext.isModalMounted;
   var _useAccordionContext = useAccordionContext(),
     isInsideAccordion = _useAccordionContext.isAccordionMounted;
+  var _useCardContext = useCardContext(),
+    isInsideCard = _useCardContext.isCardMounted;
   var _useState = React.useState(COLORS.white),
     backgroundColor = _useState[0],
     setBackgroundColor = _useState[1];
   React.useLayoutEffect(function () {
-    if (!isInsideModal && !isInsideAccordion) {
+    if (!isInsideModal && !isInsideAccordion && !isInsideCard) {
       var bodyStyles = window.getComputedStyle(document.body);
       setBackgroundColor(bodyStyles.getPropertyValue('background-color'));
     }
-  }, [isInsideModal, isInsideAccordion]);
+  }, [isInsideModal, isInsideAccordion, isInsideCard]);
   return backgroundColor;
 };
 
@@ -7372,7 +7382,11 @@ var Card$1 = function Card(_ref) {
   var positionStyles = usePositionStyles(positionProps);
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
-  return React__default.createElement("div", _extends({
+  return React__default.createElement(CardContext.Provider, {
+    value: {
+      isCardMounted: true
+    }
+  }, React__default.createElement("div", _extends({
     className: classnames(styles$q['card']),
     style: positionStyles
   }, dataProps), onClick ? React__default.createElement("button", {
@@ -7397,7 +7411,7 @@ var Card$1 = function Card(_ref) {
   }, React__default.createElement(Button, {
     theme: "link-icon",
     onClick: onClose
-  }, React__default.createElement(IconTimes, null))));
+  }, React__default.createElement(IconTimes, null)))));
 };
 
 var styles$r = {"callout-card__close":"_cQT44","callout-card__header":"_rSzMg"};
@@ -9344,8 +9358,8 @@ var getSelectStyles = function getSelectStyles(_ref) {
     },
     option: function option(base, state) {
       return Object.assign({}, base, {
-        backgroundColor: state.isDisabled ? null : state.isSelected ? COLORS['eggplant-200'] : state.isFocused ? COLORS['grey-100'] : COLORS['white'],
-        color: state.isDisabled ? COLORS['grey-400'] : state.isSelected ? COLORS['eggplant-600'] : COLORS['grey-500'],
+        backgroundColor: state.isDisabled ? null : state.isSelected ? COLORS['blackberry-200'] : state.isFocused ? COLORS['grey-100'] : COLORS['white'],
+        color: state.isDisabled ? COLORS['grey-400'] : state.isSelected ? COLORS['blackberry-600'] : COLORS['grey-500'],
         cursor: 'pointer',
         fontFamily: FONT_FAMILY,
         fontSize: '14px',
@@ -13185,7 +13199,8 @@ var Paywall = function Paywall(props) {
   if (as === 'card') {
     var _classnames;
     return React__default.createElement(Card$1, {
-      onClose: onClose
+      onClose: onClose,
+      actions: onClose ? [] : undefined
     }, React__default.createElement("div", {
       className: classnames(styles$1i['paywall--as-card'], (_classnames = {}, _classnames[styles$1i['paywall--as-card--centered']] = size === 'small', _classnames))
     }, emptyStateContainer));
@@ -13219,7 +13234,8 @@ var EmptyState = function EmptyState(props) {
   if (as === 'card') {
     var _classnames;
     return React__default.createElement(Card$1, {
-      onClose: onClose
+      onClose: onClose,
+      actions: onClose ? [] : undefined
     }, React__default.createElement("div", {
       className: classnames(styles$1j['empty-state--as-card'], (_classnames = {}, _classnames[styles$1j['empty-state--as-card--centered']] = size === 'small', _classnames))
     }, emptyStateContainer));