@octoguide/mui-ui-toolkit 0.7.0 → 0.7.2

package/dist/index.mjs

@@ -503,9 +503,10 @@ function resolveThemeName() {
 
 // src/themes/createMuiTheme.ts
 import { createTheme, alpha, darken } from "@mui/material/styles";
-function createMuiTheme(tokens) {
+function createMuiTheme(tokens, darkMode = false) {
   return createTheme({
     palette: {
+      mode: darkMode ? "dark" : "light",
       primary: {
         main: tokens.colors.primary,
         dark: tokens.colors.primaryDark,
@@ -523,17 +524,17 @@ 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: {
+      text: darkMode ? void 0 : {
         primary: tokens.colors.textPrimary,
         secondary: tokens.colors.textSecondary,
         disabled: tokens.colors.textDisabled
       },
-      divider: tokens.colors.divider
+      divider: darkMode ? void 0 : tokens.colors.divider
     },
     typography: {
       fontFamily: tokens.typography.fontFamilyBase,
@@ -684,14 +685,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
@@ -701,7 +702,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": {
@@ -710,17 +711,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: {
@@ -804,11 +805,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: {
@@ -820,26 +821,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: {
@@ -1088,11 +1090,12 @@ import { jsx, jsxs } from "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__ */ jsxs(MuiThemeProvider, { theme: muiTheme, children: [
     injectCssBaseline && /* @__PURE__ */ jsx(CssBaseline, {}),
     children
@@ -2444,7 +2447,7 @@ var StyledParagraph = styled13("p", {
   outline: "transparent",
   fontSize: theme.tokens.typography.fontSizeLg,
   lineHeight: theme.tokens.typography.lineHeightBase,
-  color: $isOnDarkBg ? theme.palette.common.white : theme.tokens.colors.textPrimary,
+  color: $isOnDarkBg || theme.palette.mode === "dark" ? theme.palette.common.white : theme.tokens.colors.textPrimary,
   ...$variant === "regular" && {
     fontWeight: theme.tokens.typography.fontWeightRegular
   },
@@ -2461,7 +2464,7 @@ var StyledParagraph = styled13("p", {
     fontWeight: theme.tokens.typography.fontWeightBold
   },
   ...$variant === "overline" && {
-    color: $isOnDarkBg ? theme.tokens.colors.overlayLight75 : theme.tokens.colors.textSecondary,
+    color: $isOnDarkBg || theme.palette.mode === "dark" ? theme.tokens.colors.overlayLight75 : theme.tokens.colors.textSecondary,
     fontWeight: theme.tokens.typography.fontWeightBold,
     letterSpacing: "0.125rem",
     textTransform: "uppercase"