@codebit-programando-solucoes/codebit-web-antd 1.1.41 → 1.1.44

package/dist/contexts/CodebitThemeContext.d.ts

@@ -17,6 +17,26 @@ interface CodebitThemeContextProps {
     setIsDarkMode: (isDark: boolean) => void;
 }
 
+/** A pair of color overrides for light and dark mode. Any shade left unset falls back to Codebit's default palette. */
+type CodebitThemeColorShade = {
+    light?: string;
+    dark?: string;
+};
+
+/** Optional color overrides for the theme provider. Any color/shade not provided falls back to the current default palette. */
+type CodebitThemeColors = {
+    /** Brand primary color (buttons, links, menu selection, header, sider trigger). Default: `{ light: '#29D266', dark: '#589C75' }` */
+    primary?: CodebitThemeColorShade;
+    /** Primary button hover color. Default: `{ light: '#3FE67F', dark: '#6DB589' }` */
+    primaryHover?: CodebitThemeColorShade;
+    /** Primary button active/pressed color. Default: `{ light: '#1FBF4D', dark: '#4A8361' }` */
+    primaryActive?: CodebitThemeColorShade;
+    /** Text color for selected menu items and the layout sider trigger. Default: `{ light: '#FAFAFA', dark: '#FAFAFA' }` */
+    selectedText?: CodebitThemeColorShade;
+    /** Layout sider background color. Default: `{ light: '#001529', dark: '#1a1a1a' }` */
+    siderBg?: CodebitThemeColorShade;
+};
+
 /** Properties for the theme provider component */
 type CodebitThemeProviderProps = {
     /** Child components that will have access to theme context */
@@ -27,4 +47,6 @@ type CodebitThemeProviderProps = {
     containerId?: string;
     /** Optional explicit theme override. When set, the provider uses this value instead of internal detection. */
     forcedTheme?: 'dark' | 'light' | null;
+    /** Optional color overrides. Any color/shade not provided falls back to Codebit's current default palette. */
+    colors?: CodebitThemeColors;
 } & ConfigProviderProps;

package/dist/index.cjs

@@ -698,7 +698,29 @@ var __webpack_exports__ = {};
         onMenuClick: external_prop_types_default().func
     };
     const CodebitThemeContext = /*#__PURE__*/ (0, external_react_.createContext)(null);
-    const CodebitThemeProvider = ({ children, storeThemeInLocalStorage = true, containerId = 'root', forcedTheme = null, ...props })=>{
+    const DEFAULT_THEME_COLORS = {
+        primary: {
+            light: '#29D266',
+            dark: '#589C75'
+        },
+        primaryHover: {
+            light: '#3FE67F',
+            dark: '#6DB589'
+        },
+        primaryActive: {
+            light: '#1FBF4D',
+            dark: '#4A8361'
+        },
+        selectedText: {
+            light: '#FAFAFA',
+            dark: '#FAFAFA'
+        },
+        siderBg: {
+            light: '#001529',
+            dark: '#1a1a1a'
+        }
+    };
+    const CodebitThemeProvider = ({ children, storeThemeInLocalStorage = true, containerId = 'root', forcedTheme = null, colors = {}, ...props })=>{
         const hasLoaded = (0, external_react_.useRef)(false);
         const [isDarkMode, setIsDarkMode] = (0, external_react_.useState)(()=>{
             if (forcedTheme) return 'dark' === forcedTheme;
@@ -723,6 +745,30 @@ var __webpack_exports__ = {};
         const toggleTheme = ()=>{
             setIsDarkMode((prev)=>!prev);
         };
+        const resolvedColors = (0, external_react_.useMemo)(()=>({
+                primary: {
+                    ...DEFAULT_THEME_COLORS.primary,
+                    ...colors.primary
+                },
+                primaryHover: {
+                    ...DEFAULT_THEME_COLORS.primaryHover,
+                    ...colors.primaryHover
+                },
+                primaryActive: {
+                    ...DEFAULT_THEME_COLORS.primaryActive,
+                    ...colors.primaryActive
+                },
+                selectedText: {
+                    ...DEFAULT_THEME_COLORS.selectedText,
+                    ...colors.selectedText
+                },
+                siderBg: {
+                    ...DEFAULT_THEME_COLORS.siderBg,
+                    ...colors.siderBg
+                }
+            }), [
+            colors
+        ]);
         (0, external_react_.useEffect)(()=>{
             const target = document.getElementById(containerId);
             if (!target) return;
@@ -733,10 +779,11 @@ var __webpack_exports__ = {};
                 document.documentElement.classList.remove('dark-theme');
                 target.classList.remove('dark-theme');
             }
-            document.documentElement.style.setProperty('--color-primary', isDarkMode ? '#589C75' : '#29D266');
+            document.documentElement.style.setProperty('--color-primary', resolvedColors.primary[isDarkMode ? 'dark' : 'light']);
         }, [
             isDarkMode,
-            containerId
+            containerId,
+            resolvedColors
         ]);
         (0, external_react_.useEffect)(()=>{
             if (hasLoaded.current && storeThemeInLocalStorage) localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
@@ -759,29 +806,29 @@ var __webpack_exports__ = {};
                 theme: {
                     algorithm: isDarkMode ? external_antd_namespaceObject.theme.darkAlgorithm : external_antd_namespaceObject.theme.defaultAlgorithm,
                     token: {
-                        colorPrimary: isDarkMode ? '#589C75' : '#29D266',
-                        colorInfo: isDarkMode ? '#589C75' : '#29D266',
-                        colorLink: isDarkMode ? '#589C75' : '#29D266'
+                        colorPrimary: resolvedColors.primary[isDarkMode ? 'dark' : 'light'],
+                        colorInfo: resolvedColors.primary[isDarkMode ? 'dark' : 'light'],
+                        colorLink: resolvedColors.primary[isDarkMode ? 'dark' : 'light']
                     },
                     components: {
                         Menu: {
-                            itemSelectedBg: isDarkMode ? '#589C75' : '#29D266',
-                            itemSelectedColor: '#FAFAFA',
-                            darkItemSelectedBg: isDarkMode ? '#589C75' : '#29D266',
-                            darkItemSelectedColor: '#FAFAFA'
+                            itemSelectedBg: resolvedColors.primary[isDarkMode ? 'dark' : 'light'],
+                            itemSelectedColor: resolvedColors.selectedText.light,
+                            darkItemSelectedBg: resolvedColors.primary[isDarkMode ? 'dark' : 'light'],
+                            darkItemSelectedColor: resolvedColors.selectedText.dark
                         },
                         Button: {
-                            colorPrimary: isDarkMode ? '#589C75' : '#29D266',
-                            colorPrimaryHover: isDarkMode ? '#6DB589' : '#3FE67F',
-                            colorPrimaryActive: isDarkMode ? '#4A8361' : '#1FBF4D'
+                            colorPrimary: resolvedColors.primary[isDarkMode ? 'dark' : 'light'],
+                            colorPrimaryHover: resolvedColors.primaryHover[isDarkMode ? 'dark' : 'light'],
+                            colorPrimaryActive: resolvedColors.primaryActive[isDarkMode ? 'dark' : 'light']
                         },
                         Layout: {
-                            siderBg: isDarkMode ? '#1a1a1a' : '#001529',
-                            triggerBg: isDarkMode ? '#589C75' : '#29D266',
-                            triggerColor: '#FAFAFA'
+                            siderBg: resolvedColors.siderBg[isDarkMode ? 'dark' : 'light'],
+                            triggerBg: resolvedColors.primary[isDarkMode ? 'dark' : 'light'],
+                            triggerColor: resolvedColors.selectedText[isDarkMode ? 'dark' : 'light']
                         },
                         Header: {
-                            colorPrimary: isDarkMode ? '#589C75' : '#29D266'
+                            colorPrimary: resolvedColors.primary[isDarkMode ? 'dark' : 'light']
                         }
                     }
                 },
@@ -803,7 +850,29 @@ var __webpack_exports__ = {};
             'dark',
             'light',
             null
-        ])
+        ]),
+        colors: external_prop_types_default().shape({
+            primary: external_prop_types_default().shape({
+                light: external_prop_types_default().string,
+                dark: external_prop_types_default().string
+            }),
+            primaryHover: external_prop_types_default().shape({
+                light: external_prop_types_default().string,
+                dark: external_prop_types_default().string
+            }),
+            primaryActive: external_prop_types_default().shape({
+                light: external_prop_types_default().string,
+                dark: external_prop_types_default().string
+            }),
+            selectedText: external_prop_types_default().shape({
+                light: external_prop_types_default().string,
+                dark: external_prop_types_default().string
+            }),
+            siderBg: external_prop_types_default().shape({
+                light: external_prop_types_default().string,
+                dark: external_prop_types_default().string
+            })
+        })
     };
     const ThemeToggle = ()=>{
         const config = (0, external_react_.useContext)(CodebitThemeContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codebit-programando-solucoes/codebit-web-antd",
-  "version": "1.1.41",
+  "version": "1.1.44",
   "main": "./dist/index.cjs",
   "type": "module",
   "types": "./src/index.d.ts",