@7shifts/sous-chef 3.89.3 → 3.89.5

package/dist/index.js

@@ -240,7 +240,9 @@ var COLORS = {
   'hover-lighten': 'var(--color-hover-lighten)',
   'hover-darken': 'var(--color-hover-darken)',
   'brand-neutrals-caviar-dynamic': 'var(--color-brand-neutrals-caviar-dynamic)',
-  'brand-neutrals-chefscoat-dynamic': 'var(--color-brand-neutrals-chefscoat-dynamic)'
+  'brand-neutrals-chefscoat-dynamic': 'var(--color-brand-neutrals-chefscoat-dynamic)',
+  'on-graphic-black': 'var(--color-on-graphic-black)',
+  'on-graphic-white': 'var(--color-on-graphic-white)'
 };
 
 // This file is automatically generated by 'scripts/tokens/build-z-indexes.sh'
@@ -6446,6 +6448,28 @@ var useContainerBackgroundColorCheck = function useContainerBackgroundColorCheck
   return background;
 };
 
+var TIME_FORMAT = {
+  FORMAT_24H: '24h',
+  FORMAT_AMPM: 'ampm'
+};
+
+var initialValue$1 = {
+  // This country prop is currently used to configure the phone number field
+  country: 'US',
+  // This timeFormat prop is currently used to configure the time format for time fields
+  timeFormat: TIME_FORMAT.FORMAT_AMPM,
+  // Default theme is light, but it will be overridden by the useTheme hook in the SousChefProvider
+  theme: 'light'
+};
+var ProviderConfigContext = React.createContext(initialValue$1);
+var useProviderConfig = function useProviderConfig() {
+  var context = React.useContext(ProviderConfigContext);
+  if (!context) {
+    throw Error('The `<SousChefProvider>` is not set. Please wrap your application with `<SousChefProvider>`');
+  }
+  return context;
+};
+
 var _excluded$t = ["href", "target", "theme", "onClick", "children"];
 var Link = function Link(_ref) {
   var _classNames;
@@ -6459,13 +6483,19 @@ var Link = function Link(_ref) {
   var _getDataProps = getDataProps(otherProps),
     dataProps = _getDataProps.dataProps;
   var ref = React__default["default"].useRef(null);
+  var _useProviderConfig = useProviderConfig(),
+    appTheme = _useProviderConfig.theme;
   var background = useContainerBackgroundColorCheck({
     ref: ref,
     // It only needs to check the background when theme is not provided
     shouldCheck: !theme
   });
-  // If there is no theme provided, determine it based on the container background
-  var currentTheme = theme || (background === 'dark' ? LINK_THEME.CONTRAST : LINK_THEME.PRIMARY);
+  var defaultTheme = LINK_THEME.PRIMARY;
+  // If it is light mode and the background is dark we want to use the contrast theme to make sure the link is visible
+  if (appTheme === 'light' && background === 'dark') {
+    defaultTheme = LINK_THEME.CONTRAST;
+  }
+  var currentTheme = theme || defaultTheme;
   return React__default["default"].createElement("a", _extends({}, dataProps, {
     className: classnames__default["default"](styles$1i['link'], (_classNames = {}, _classNames[styles$1i['link--primary']] = currentTheme === LINK_THEME.PRIMARY, _classNames[styles$1i['link--contrast']] = currentTheme === LINK_THEME.CONTRAST, _classNames)),
     href: href,
@@ -7111,11 +7141,6 @@ var AffixContainer = function AffixContainer(_ref) {
   }, suffix));
 };
 
-var TIME_FORMAT = {
-  FORMAT_24H: '24h',
-  FORMAT_AMPM: 'ampm'
-};
-
 var TimeFieldInput = function TimeFieldInput(_ref) {
   var inputProps = _ref.inputProps,
     allOtherProps = _ref.allOtherProps,
@@ -8702,19 +8727,34 @@ var ToastContainer = function ToastContainer(_ref3) {
   });
 };
 
-var initialValue$1 = {
-  // This country prop is currently used to configure the phone number field
-  country: 'US',
-  // This timeFormat prop is currently used to configure the time format for time fields
-  timeFormat: TIME_FORMAT.FORMAT_AMPM
-};
-var ProviderConfigContext = React.createContext(initialValue$1);
-var useProviderConfig = function useProviderConfig() {
-  var context = React.useContext(ProviderConfigContext);
-  if (!context) {
-    throw Error('The `<SousChefProvider>` is not set. Please wrap your application with `<SousChefProvider>`');
-  }
-  return context;
+/**
+ * Don't use this hook directly. This is meant to be used internally by the SousChefProvider
+ * To access the current theme, use the useProviderConfig hook instead
+ */
+var useTheme = function useTheme() {
+  var _useState = React.useState(function () {
+      var isDark = document.documentElement.classList.contains('theme-dark');
+      return isDark ? 'dark' : 'light';
+    }),
+    theme = _useState[0],
+    setTheme = _useState[1];
+  React.useEffect(function () {
+    var observer = new MutationObserver(function (mutations) {
+      mutations.forEach(function (mutation) {
+        if (mutation.attributeName === 'class') {
+          var isDark = document.documentElement.classList.contains('theme-dark');
+          setTheme(isDark ? 'dark' : 'light');
+        }
+      });
+    });
+    observer.observe(document.documentElement, {
+      attributes: true
+    });
+    return function () {
+      observer.disconnect();
+    };
+  }, []);
+  return theme;
 };
 
 var SousChefProvider = function SousChefProvider(_ref) {
@@ -8725,10 +8765,12 @@ var SousChefProvider = function SousChefProvider(_ref) {
     country = _ref$country === void 0 ? 'US' : _ref$country,
     _ref$timeFormat = _ref.timeFormat,
     timeFormat = _ref$timeFormat === void 0 ? TIME_FORMAT.FORMAT_AMPM : _ref$timeFormat;
+  var theme = useTheme();
   return React__default["default"].createElement(ProviderConfigContext.Provider, {
     value: {
       country: libphonenumberJs.isSupportedCountry(country) ? country : 'US',
-      timeFormat: timeFormat
+      timeFormat: timeFormat,
+      theme: theme
     }
   }, React__default["default"].createElement(TranslationsContext.Provider, {
     value: {
@@ -10560,6 +10602,11 @@ var getSelectStyles = function getSelectStyles(_ref) {
         } : 'none'
       });
     },
+    input: function input(base) {
+      return Object.assign({}, base, {
+        color: COLORS['surface-on-color']
+      });
+    },
     indicatorSeparator: function indicatorSeparator() {
       return {
         display: 'none'