@octoguide/mui-ui-toolkit 0.7.0 → 0.7.1

package/dist/index.d.mts

@@ -358,6 +358,11 @@ interface ToolkitThemeProviderProps {
      * Defaults to true.
      */
     injectCssBaseline?: boolean;
+    /**
+     * Enable dark mode. When true, palette.mode is set to 'dark' and
+     * component overrides adapt accordingly.
+     */
+    darkMode?: boolean;
 }
 /**
  * Drop-in ThemeProvider for any app using the mui-ui-toolkit.
@@ -380,7 +385,7 @@ interface ToolkitThemeProviderProps {
  *     <App />
  *   </ToolkitThemeProvider>
  */
-declare function ToolkitThemeProvider({ theme, children, injectCssBaseline, }: ToolkitThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function ToolkitThemeProvider({ theme, children, injectCssBaseline, darkMode, }: ToolkitThemeProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Takes a ThemeTokens object and produces a fully configured MUI Theme.
@@ -393,7 +398,7 @@ declare function ToolkitThemeProvider({ theme, children, injectCssBaseline, }: T
  * augmentation in types/mui.d.ts) so components can read any token
  * not already exposed by MUI's built-in theme shape.
  */
-declare function createMuiTheme(tokens: ThemeTokens): Theme;
+declare function createMuiTheme(tokens: ThemeTokens, darkMode?: boolean): Theme;
 
 /**
  * Resolves the active theme name from the environment.

package/dist/index.d.ts

@@ -358,6 +358,11 @@ interface ToolkitThemeProviderProps {
      * Defaults to true.
      */
     injectCssBaseline?: boolean;
+    /**
+     * Enable dark mode. When true, palette.mode is set to 'dark' and
+     * component overrides adapt accordingly.
+     */
+    darkMode?: boolean;
 }
 /**
  * Drop-in ThemeProvider for any app using the mui-ui-toolkit.
@@ -380,7 +385,7 @@ interface ToolkitThemeProviderProps {
  *     <App />
  *   </ToolkitThemeProvider>
  */
-declare function ToolkitThemeProvider({ theme, children, injectCssBaseline, }: ToolkitThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function ToolkitThemeProvider({ theme, children, injectCssBaseline, darkMode, }: ToolkitThemeProviderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Takes a ThemeTokens object and produces a fully configured MUI Theme.
@@ -393,7 +398,7 @@ declare function ToolkitThemeProvider({ theme, children, injectCssBaseline, }: T
  * augmentation in types/mui.d.ts) so components can read any token
  * not already exposed by MUI's built-in theme shape.
  */
-declare function createMuiTheme(tokens: ThemeTokens): Theme;
+declare function createMuiTheme(tokens: ThemeTokens, darkMode?: boolean): Theme;
 
 /**
  * Resolves the active theme name from the environment.

package/dist/index.js

@@ -619,9 +619,10 @@ function resolveThemeName() {
 
 // src/themes/createMuiTheme.ts
 var import_styles = require("@mui/material/styles");
-function createMuiTheme(tokens) {
+function createMuiTheme(tokens, darkMode = false) {
   return (0, import_styles.createTheme)({
     palette: {
+      mode: darkMode ? "dark" : "light",
       primary: {
         main: tokens.colors.primary,
         dark: tokens.colors.primaryDark,
@@ -639,9 +640,9 @@ function createMuiTheme(tokens) {
       error: { main: tokens.colors.error },
       info: { main: tokens.colors.info },
       background: {
-        default: tokens.colors.background,
-        paper: tokens.colors.backgroundPaper,
-        subtle: tokens.colors.backgroundSubtle
+        default: darkMode ? "#0d0d0d" : tokens.colors.background,
+        paper: darkMode ? "#1a1a1a" : tokens.colors.backgroundPaper,
+        subtle: darkMode ? "#2a2a2a" : tokens.colors.backgroundSubtle
       },
       border: tokens.colors.border,
       text: {
@@ -800,14 +801,14 @@ function createMuiTheme(tokens) {
       },
       MuiTextField: {
         styleOverrides: {
-          root: {
+          root: ({ theme }) => ({
             "& .MuiOutlinedInput-root": {
               borderRadius: tokens.components.input.borderRadius,
-              backgroundColor: tokens.components.input.background,
+              backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.paper : tokens.components.input.background,
               minHeight: tokens.components.input.minHeight,
               "& fieldset": {
                 borderWidth: tokens.components.input.borderWidth,
-                borderColor: tokens.colors.border
+                borderColor: theme.palette.mode === "dark" ? theme.palette.divider : tokens.colors.border
               },
               "&:hover fieldset": {
                 borderColor: tokens.colors.primary
@@ -817,7 +818,7 @@ function createMuiTheme(tokens) {
                 borderColor: tokens.colors.borderFocus
               },
               "&.Mui-disabled": {
-                backgroundColor: tokens.components.input.backgroundDisabled
+                backgroundColor: theme.palette.mode === "dark" ? theme.palette.action.disabledBackground : tokens.components.input.backgroundDisabled
               }
             },
             "& .MuiInputLabel-root": {
@@ -826,17 +827,17 @@ function createMuiTheme(tokens) {
             "& .MuiFormHelperText-root": {
               fontSize: tokens.components.input.helperFontSize
             }
-          }
+          })
         }
       },
       MuiCard: {
         styleOverrides: {
-          root: {
+          root: ({ theme }) => ({
             borderRadius: tokens.components.card.borderRadius,
-            backgroundColor: tokens.components.card.background,
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.paper : tokens.components.card.background,
             boxShadow: tokens.shadows.sm,
-            border: `${tokens.components.card.borderWidth} solid ${tokens.colors.divider}`
-          }
+            border: `${tokens.components.card.borderWidth} solid ${theme.palette.divider}`
+          })
         }
       },
       MuiCardContent: {
@@ -920,11 +921,11 @@ function createMuiTheme(tokens) {
       },
       MuiDialog: {
         styleOverrides: {
-          paper: {
+          paper: ({ theme }) => ({
             borderRadius: tokens.components.dialog.borderRadius,
-            backgroundColor: tokens.components.dialog.background,
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.paper : tokens.components.dialog.background,
             maxWidth: tokens.components.dialog.maxWidth
-          }
+          })
         }
       },
       MuiDialogContent: {
@@ -936,26 +937,27 @@ function createMuiTheme(tokens) {
       },
       MuiTableCell: {
         styleOverrides: {
-          root: {
+          root: ({ theme }) => ({
             paddingLeft: tokens.components.table.cellPaddingX,
             paddingRight: tokens.components.table.cellPaddingX,
             paddingTop: tokens.components.table.cellPaddingY,
             paddingBottom: tokens.components.table.cellPaddingY,
-            borderBottom: `${tokens.components.table.borderWidth} solid ${tokens.components.table.borderColor}`
-          },
-          head: {
+            borderBottom: `${tokens.components.table.borderWidth} solid ${theme.palette.mode === "dark" ? theme.palette.divider : tokens.components.table.borderColor}`
+          }),
+          head: ({ theme }) => ({
             fontWeight: tokens.components.table.headerFontWeight,
-            backgroundColor: tokens.components.table.headerBackground
-          }
+            backgroundColor: theme.palette.mode === "dark" ? theme.palette.background.default : tokens.components.table.headerBackground,
+            color: theme.palette.text.secondary
+          })
         }
       },
       MuiTableRow: {
         styleOverrides: {
-          root: {
+          root: ({ theme }) => ({
             "&:hover": {
-              backgroundColor: tokens.components.table.rowHoverBackground
+              backgroundColor: theme.palette.mode === "dark" ? theme.palette.action.hover : tokens.components.table.rowHoverBackground
             }
-          }
+          })
         }
       },
       MuiAvatar: {
@@ -1204,11 +1206,12 @@ var import_jsx_runtime = require("react/jsx-runtime");
 function ToolkitThemeProvider({
   theme,
   children,
-  injectCssBaseline = true
+  injectCssBaseline = true,
+  darkMode = false
 }) {
   const themeName = theme ?? resolveThemeName();
   const tokens = getThemeTokens(themeName);
-  const muiTheme = createMuiTheme(tokens);
+  const muiTheme = createMuiTheme(tokens, darkMode);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_material.ThemeProvider, { theme: muiTheme, children: [
     injectCssBaseline && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_material.CssBaseline, {}),
     children