@7shifts/sous-chef 3.89.3 → 3.89.5

package/dist/core/SousChefProvider/context/ProviderConfigContext.d.ts

@@ -3,6 +3,7 @@ import { TimeFormat } from '../../../forms/TimeField/types';
 export type ProviderConfigContextType = {
     country: CountryCode;
     timeFormat: TimeFormat;
+    theme: 'light' | 'dark';
 };
 declare const ProviderConfigContext: import("react").Context<ProviderConfigContextType>;
 export declare const useProviderConfig: () => ProviderConfigContextType;

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

@@ -187,4 +187,6 @@ export declare const COLORS: {
     readonly 'hover-darken': "var(--color-hover-darken)";
     readonly 'brand-neutrals-caviar-dynamic': "var(--color-brand-neutrals-caviar-dynamic)";
     readonly 'brand-neutrals-chefscoat-dynamic': "var(--color-brand-neutrals-chefscoat-dynamic)";
+    readonly 'on-graphic-black': "var(--color-on-graphic-black)";
+    readonly 'on-graphic-white': "var(--color-on-graphic-white)";
 };

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

@@ -1 +1 @@
-export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'seq-1' | 'seq-2' | 'seq-3' | 'seq-4' | 'seq-5' | 'seq-6' | 'seq-7' | 'seq-8' | 'seq-9' | 'seq-10' | 'seq-11' | 'seq-12' | 'seq-13' | 'seq-14' | 'seq-15' | 'seq-16' | 'seq-17' | 'seq-18' | 'seq-19' | 'seq-20' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-15' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-15' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'hover-inverse' | 'hover-lighten' | 'hover-darken' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-chefscoat-dynamic';
+export type Color = 'white' | 'black' | 'tangerine-100' | 'tangerine-200' | 'tangerine-300' | 'tangerine-400' | 'tangerine-500' | 'tangerine-600' | 'eggplant-100' | 'eggplant-200' | 'eggplant-300' | 'eggplant-400' | 'eggplant-500' | 'eggplant-600' | 'mint-100' | 'mint-200' | 'mint-300' | 'mint-400' | 'mint-500' | 'mint-600' | 'radish-100' | 'radish-200' | 'radish-300' | 'radish-400' | 'radish-500' | 'radish-600' | 'blueberry-100' | 'blueberry-200' | 'blueberry-300' | 'blueberry-400' | 'blueberry-500' | 'blueberry-600' | 'banana-100' | 'banana-200' | 'banana-300' | 'banana-400' | 'banana-500' | 'banana-600' | 'grey-100' | 'grey-200' | 'grey-300' | 'grey-400' | 'grey-500' | 'grey-600' | 'oat-100' | 'oat-200' | 'oat-300' | 'oat-400' | 'oat-500' | 'oat-600' | 'lime-100' | 'lime-200' | 'lime-300' | 'lime-400' | 'lime-500' | 'lime-600' | 'blackberry-100' | 'blackberry-200' | 'blackberry-300' | 'blackberry-400' | 'blackberry-500' | 'blackberry-600' | 'seq-1' | 'seq-2' | 'seq-3' | 'seq-4' | 'seq-5' | 'seq-6' | 'seq-7' | 'seq-8' | 'seq-9' | 'seq-10' | 'seq-11' | 'seq-12' | 'seq-13' | 'seq-14' | 'seq-15' | 'seq-16' | 'seq-17' | 'seq-18' | 'seq-19' | 'seq-20' | 'neutral-color' | 'neutral-on-color' | 'neutral-container' | 'neutral-on-container' | 'neutral-container-variant' | 'neutral-on-container-variant' | 'neutral-black-transparent-05' | 'neutral-black-transparent-10' | 'neutral-black-transparent-15' | 'neutral-black-transparent-20' | 'neutral-black-transparent-30' | 'neutral-black-transparent-40' | 'neutral-black-transparent-50' | 'neutral-black-transparent-60' | 'neutral-black-transparent-70' | 'neutral-black-transparent-80' | 'neutral-black-transparent-90' | 'neutral-white-transparent-05' | 'neutral-white-transparent-10' | 'neutral-white-transparent-15' | 'neutral-white-transparent-20' | 'neutral-white-transparent-30' | 'neutral-white-transparent-40' | 'neutral-white-transparent-50' | 'neutral-white-transparent-60' | 'neutral-white-transparent-70' | 'neutral-white-transparent-80' | 'neutral-white-transparent-90' | 'surface-color-overlay' | 'surface-color-dim' | 'surface-color' | 'surface-on-color-disabled' | 'surface-on-color-subtle' | 'surface-on-color' | 'surface-on-color-bold' | 'surface-container' | 'surface-container-high' | 'surface-container-highest' | 'surface-container-disabled' | 'surface-container-disabled-variant' | 'surface-on-container-disabled' | 'surface-inverse' | 'surface-on-inverse' | 'surface-on-inverse-disabled' | 'outline' | 'outline-variant' | 'outline-inverse' | 'primary-color' | 'primary-on-color' | 'primary-color-variant' | 'primary-on-color-variant' | 'primary-container' | 'primary-on-container' | 'primary-container-variant' | 'primary-on-container-variant' | 'secondary-color' | 'secondary-on-color' | 'secondary-container' | 'secondary-on-container' | 'secondary-container-variant' | 'secondary-on-container-variant' | 'tertiary-color' | 'tertiary-on-color' | 'tertiary-container' | 'tertiary-on-container' | 'tertiary-container-variant' | 'tertiary-on-container-variant' | 'success-color' | 'success-on-color' | 'success-container' | 'success-on-container' | 'success-container-variant' | 'success-on-container-variant' | 'danger-color' | 'danger-on-color' | 'danger-container' | 'danger-on-container' | 'danger-container-variant' | 'danger-on-container-variant' | 'info-color' | 'info-on-color' | 'info-container' | 'info-on-container' | 'info-container-variant' | 'info-on-container-variant' | 'upsell-color' | 'upsell-on-color' | 'upsell-color-variant' | 'upsell-on-color-variant' | 'upsell-container' | 'upsell-on-container' | 'upsell-container-variant' | 'upsell-on-container-variant' | 'warning-color' | 'warning-on-color' | 'warning-container' | 'warning-on-container' | 'warning-container-variant' | 'warning-on-container-variant' | 'shadow-overlay' | 'shadow-active' | 'hover-inverse' | 'hover-lighten' | 'hover-darken' | 'brand-neutrals-caviar-dynamic' | 'brand-neutrals-chefscoat-dynamic' | 'on-graphic-black' | 'on-graphic-white';

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,5 @@
+/**
+ * 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
+ */
+export declare const useTheme: () => "light" | "dark";

package/dist/index.css

@@ -295,6 +295,8 @@
   --color-hover-darken: var(--color-neutral-black-transparent-05);
   --color-brand-neutrals-caviar-dynamic: #000;
   --color-brand-neutrals-chefscoat-dynamic: #fff;
+  --color-on-graphic-black: #000;
+  --color-on-graphic-white: #fff;
 }
 
 .theme-dark {
@@ -402,6 +404,8 @@
   --color-hover-darken: var(--color-neutral-white-transparent-05);
   --color-brand-neutrals-caviar-dynamic: #fff;
   --color-brand-neutrals-chefscoat-dynamic: #000;
+  --color-on-graphic-black: #000;
+  --color-on-graphic-white: #fff;
 }
 :root {
   --border-radius-300: 4px;
@@ -425,6 +429,11 @@ body {
   color: var(--color-surface-on-color);
   background-color: var(--color-surface-color-dim) !important;
 }
+
+body * {
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-neutral-black-transparent-50) transparent;
+}
 ._GFHBy {
   display: flex;
 }
@@ -1734,15 +1743,19 @@ h5._i2LHD {
 }
 ._2An1I {
   background-color: var(--color-warning-color);
+  color: var(--color-warning-on-color);
 }
 ._-Bw8L {
   background-color: var(--color-danger-color);
+  color: var(--color-danger-on-color);
 }
 ._RxlMz {
   background-color: var(--color-success-color);
+  color: var(--color-success-on-color);
 }
 ._dzCH- {
   background-color: var(--color-info-color);
+  color: var(--color-info-on-color);
 }
 ._Ix9tP {
   font-variant-numeric: tabular-nums;