@linagora/twake-mui 10.4.0 → 10.4.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## @linagora/twake-mui [10.4.1](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.4.0...@linagora/twake-mui@10.4.1) (2026-10-07)
+
+
+### Bug Fixes
+
+* **twake-mui:** Follow the color scheme in overrides and SearchBar ([#142](https://github.com/linagora/twake-ui/issues/142)) ([1c2efac](https://github.com/linagora/twake-ui/commit/1c2efacba0a3e140384775e9a4f8e76416409b7a))
+
 # @linagora/twake-mui [10.4.0](https://github.com/linagora/twake-ui/compare/@linagora/twake-mui@10.3.0...@linagora/twake-mui@10.4.0) (2026-10-07)
 
 

package/dist/components/ContactPopover/AttendeeInfo.js

@@ -1,6 +1,6 @@
 import { Icon } from '@linagora/twake-icons';
 import { Copy } from '@linagora/twake-icons';
-import { Box, IconButton, Typography, useTheme, alpha } from '@mui/material';
+import { Box, IconButton, Typography, useTheme } from '@mui/material';
 import React, { useState } from 'react';
 import { useI18n } from 'twake-i18n';
 import { Avatar } from '../Avatar';
@@ -28,8 +28,8 @@ export const AttendeeInfo = ({ name, email, onEmailCopy }) => {
             name && name !== email ? (React.createElement(Typography, { variant: "body1", sx: { fontWeight: 500, wordBreak: 'break-word' } }, name)) : null,
             React.createElement(Box, { sx: { display: 'flex', alignItems: 'center', gap: 1 } },
                 React.createElement(Typography, { variant: "body2", color: "text.secondary", sx: { wordBreak: 'break-word' } }, email),
-                React.createElement(IconButton, { size: "small", onClick: () => void handleCopy(), sx: { p: 0.5, color: alpha(theme.palette.grey[900], 0.9) }, title: showCopied
+                React.createElement(IconButton, { size: "small", onClick: () => void handleCopy(), sx: { p: 0.5, color: 'text.primary' }, title: showCopied
                         ? t('ContactPopover.copiedTooltip')
                         : t('ContactPopover.copyTooltip') },
-                    React.createElement(Icon, { icon: Copy, size: 16, color: theme.palette.text.icon }))))));
+                    React.createElement(Icon, { icon: Copy, size: 16, color: theme.vars.palette.text.icon }))))));
 };

package/dist/components/ContactPopover/ContactPopoverCalendarAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverCalendarAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
-        React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
+        React.createElement(Icon, { icon: CalendarToday, size: 20, color: theme.vars.palette.text.icon })));
 };

package/dist/components/ContactPopover/ContactPopoverChatAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverChatAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
-        React.createElement(Icon, { icon: Discuss, size: 20, color: theme.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
+        React.createElement(Icon, { icon: Discuss, size: 20, color: theme.vars.palette.text.icon })));
 };

package/dist/components/ContactPopover/ContactPopoverEmailAction.js

@@ -6,7 +6,7 @@ export const ContactPopoverEmailAction = ({ url, disabled = false }) => {
     const { t } = useI18n();
     return (React.createElement(Button, { href: url, target: "_blank", rel: "noopener noreferrer", variant: "outlined", size: "small", disabled: disabled, sx: {
             justifyContent: 'center',
-            color: theme.palette.text.primary,
-            borderColor: theme.palette.divider
+            color: theme.vars.palette.text.primary,
+            borderColor: theme.vars.palette.divider
         } }, t('ContactPopover.emailButton')));
 };

package/dist/components/ContactPopover/ContactPopoverVideoAction.js

@@ -4,6 +4,6 @@ import { IconButton, useTheme } from '@mui/material';
 import React from 'react';
 export const ContactPopoverVideoAction = ({ url, disabled = false }) => {
     const theme = useTheme();
-    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.palette.divider}` } },
-        React.createElement(Icon, { icon: Camera, size: 20, color: theme.palette.text.icon })));
+    return (React.createElement(IconButton, { href: url, target: "_blank", rel: "noopener noreferrer", size: "small", disabled: disabled, sx: { border: `1px solid ${theme.vars.palette.divider}` } },
+        React.createElement(Icon, { icon: Camera, size: 20, color: theme.vars.palette.text.icon })));
 };

package/dist/components/SearchBar/DisableHighlight.js

@@ -1,5 +1,5 @@
 import { styled } from '@mui/material';
 import { Highlight } from './Highlight';
 export const DisableHighlight = styled(Highlight)(({ theme }) => ({
-    backgroundColor: theme.palette.action.disabled
+    backgroundColor: theme.vars.palette.action.disabled
 }));

package/dist/components/SearchBar/FocusHighlight.js

@@ -2,5 +2,5 @@ import { styled } from '@mui/material';
 import { Highlight } from './Highlight';
 export const FocusHighlight = styled(Highlight)(({ theme }) => ({
     pointerEvents: 'none',
-    backgroundColor: theme.palette.action.hover
+    backgroundColor: theme.vars.palette.action.hover
 }));

package/dist/components/SearchBar/SearchBarIconWrapper.js

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material';
 export const SearchBarIconWrapper = styled('div')(({ theme }) => ({
-    color: theme.palette.text.secondary,
+    color: theme.vars.palette.text.secondary,
     padding: '0 1rem',
     display: 'flex'
 }));

package/dist/components/SearchBar/SearchBarRoot.js

@@ -15,10 +15,10 @@ export const SearchBarRoot = styled(Paper, {
         borderStyle: 'solid',
         borderWidth: 1,
         paddingRight: '0.5rem',
-        borderColor: isFocused ? theme.palette.primary.main : 'transparent',
+        borderColor: isFocused ? theme.vars.palette.primary.main : 'transparent',
         backgroundColor: isFocused
-            ? theme.palette.background.paper
-            : theme.palette.background.default,
+            ? theme.vars.palette.background.paper
+            : theme.vars.palette.background.default,
         transition: theme.transitions.create(['border-color', 'background-color']),
         '&:hover': {
             '&:not(.Mui-disabled):not(.SearchBar-focused)': {
@@ -29,7 +29,7 @@ export const SearchBarRoot = styled(Paper, {
         },
         '&.Mui-disabled': {
             '& .SearchBar-icon': {
-                color: theme.palette.text.disabled
+                color: theme.vars.palette.text.disabled
             },
             '& .SearchBar-disableHighlight': {
                 opacity: 1

package/dist/components/SpaceOverlay/OverlayFrame.js

@@ -1,24 +1,20 @@
-import { Box } from '@mui/material';
-import React, { useLayoutEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
+import { Box, Portal } from '@mui/material';
+import React from 'react';
 export const OverlayFrame = ({ name, src, title, sandbox, allow, clipPath }) => {
-    const ref = useRef(null);
     const empty = clipPath.startsWith('inset(');
-    // Set by hand: it changes with every move of a menu, a class per value
-    // would pile up.
-    useLayoutEffect(() => {
-        if (ref.current)
-            ref.current.style.clipPath = clipPath;
-    }, [clipPath, ref]);
-    return createPortal(React.createElement(Box, { component: "iframe", ref: ref, name: name, src: src, title: title, sandbox: sandbox, allow: allow, "aria-hidden": empty || undefined, tabIndex: empty ? -1 : undefined, sx: {
-            position: 'fixed',
-            inset: 0,
-            width: '100%',
-            height: '100%',
-            border: 0,
-            background: 'transparent',
-            // A frame whose colour scheme differs from the page is painted opaque
-            colorScheme: 'normal',
-            zIndex: theme => theme.zIndex.modal - 1
-        } }), document.body);
+    return (React.createElement(Portal, null,
+        React.createElement(Box, { component: "iframe", name: name, src: src, title: title, sandbox: sandbox, allow: allow, "aria-hidden": empty || undefined, tabIndex: empty ? -1 : undefined, 
+            // Inline: it changes with every move of a menu, a class per value
+            // would pile up
+            style: { clipPath }, sx: {
+                position: 'fixed',
+                inset: 0,
+                width: '100%',
+                height: '100%',
+                border: 0,
+                background: 'transparent',
+                // A frame whose colour scheme differs from the page is painted opaque
+                colorScheme: 'normal',
+                zIndex: theme => theme.zIndex.modal - 1
+            } })));
 };

package/dist/components/SpaceOverlay/SpaceOverlay.js

@@ -1,5 +1,5 @@
+import { Portal } from '@mui/material';
 import React, { createContext, useContext, useSyncExternalStore } from 'react';
-import { createPortal } from 'react-dom';
 const SpaceOverlayContext = createContext(null);
 export const SpaceOverlayProvider = ({ overlay, children }) => (React.createElement(SpaceOverlayContext.Provider, { value: overlay }, children));
 const NO_OVERLAY = () => () => undefined;
@@ -31,7 +31,7 @@ export const OverlayPortal = ({ children }) => {
     if (status === 'connecting')
         return null;
     const body = status === 'connected' ? (overlay?.getBody() ?? null) : null;
-    return React.createElement(React.Fragment, null, body === null ? children : createPortal(children, body));
+    return (React.createElement(Portal, { container: body, disablePortal: body === null }, children));
 };
 /**
  * Theme options sending every dialog and temporary drawer to the overlay, so

package/dist/index.d.ts

@@ -41,7 +41,10 @@ export { default as AccordionExpandIcon } from './components/AccordionExpandIcon
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
-export * from './components/SpaceOverlay';
+export { connectSpaceOverlay, computeOverlayRegion } from './components/SpaceOverlay/spaceOverlay';
+export { OverlayPortal, SpaceOverlayProvider, overlayThemeOptions, useOverlayWindow } from './components/SpaceOverlay/SpaceOverlay';
+export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlayRegionMessage } from './components/SpaceOverlay/region';
+export { OverlayFrame } from './components/SpaceOverlay/OverlayFrame';
 export type { TwakeTheme } from './lib/theme';
 export type { PaletteJson } from './lib/types';
 export type { AvatarProps } from './components/Avatar';
@@ -54,6 +57,10 @@ export type { ContactPopoverVideoActionProps } from './components/ContactPopover
 export type { ContactPopoverCalendarActionProps } from './components/ContactPopover/ContactPopoverCalendarAction';
 export type { ContactPopoverEmailActionProps } from './components/ContactPopover/ContactPopoverEmailAction';
 export type { ChipProps } from './components/Chip';
+export type { SpaceOverlay, SpaceOverlayStatus } from './components/SpaceOverlay/spaceOverlay';
+export type { SpaceOverlayProviderProps } from './components/SpaceOverlay/SpaceOverlay';
+export type { OverlayBox, OverlayRegion } from './components/SpaceOverlay/region';
+export type { OverlayFrameProps } from './components/SpaceOverlay/OverlayFrame';
 export type { DialogProps, DialogSize } from './components/Dialog';
 export type { PointerAlertProps, PointerAlertDirection } from './components/PointerAlert';
 export type { EmptyProps, EmptyIconSize, EmptyComponentsProps } from './components/Empty';

package/dist/index.js

@@ -44,5 +44,8 @@ export { default as AccordionExpandIcon } from './components/AccordionExpandIcon
 export { default as VirtualizedTable } from './components/VirtualizedTable';
 export { VirtuosoMockContext } from 'react-virtuoso';
 export { useBreakpoints } from './hooks/useBreakpoints';
-export * from './components/SpaceOverlay';
+export { connectSpaceOverlay, computeOverlayRegion } from './components/SpaceOverlay/spaceOverlay';
+export { OverlayPortal, SpaceOverlayProvider, overlayThemeOptions, useOverlayWindow } from './components/SpaceOverlay/SpaceOverlay';
+export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlayRegionMessage } from './components/SpaceOverlay/region';
+export { OverlayFrame } from './components/SpaceOverlay/OverlayFrame';
 export { ContactPopoverActions, ContactPopoverChatAction, ContactPopoverVideoAction, ContactPopoverCalendarAction, ContactPopoverEmailAction } from './components/ContactPopover';

package/dist/lib/overrides.js

@@ -16,7 +16,7 @@ import { selectClasses } from '@mui/material/Select';
 import { switchClasses } from '@mui/material/Switch';
 import { tabClasses } from '@mui/material/Tab';
 import { tabsClasses } from '@mui/material/Tabs';
-import { alpha, darken } from '@mui/material/styles';
+import { alpha } from '@mui/material/styles';
 import React from 'react';
 import { radius } from './radius';
 import AccordionExpandIcon from '../components/AccordionExpandIcon';
@@ -520,7 +520,7 @@ export const overrides = {
                 height: 14,
                 minWidth: 14,
                 padding: 0,
-                border: `2px solid ${theme.palette.background.paper}`,
+                border: `2px solid ${theme.vars.palette.background.paper}`,
                 borderRadius: '100%',
                 fontSize: theme.typography.pxToRem(10)
             }),
@@ -587,12 +587,12 @@ export const overrides = {
     MuiToggleButtonGroup: {
         styleOverrides: {
             root: ({ theme }) => ({
-                borderColor: theme.palette.secondary.dark,
+                borderColor: theme.vars.palette.secondary.dark,
                 '& .MuiToggleButton-root:not(.Mui-selected)': {
-                    color: theme.palette.text.secondary,
-                    backgroundColor: alpha(theme.palette.text.secondary, 0.08),
+                    color: theme.vars.palette.text.secondary,
+                    backgroundColor: theme.alpha(theme.vars.palette.text.secondary, 0.08),
                     '& svg, & .MuiSvgIcon-root': {
-                        color: theme.palette.text.secondary
+                        color: theme.vars.palette.text.secondary
                     }
                 }
             })
@@ -601,15 +601,15 @@ export const overrides = {
     MuiToggleButton: {
         styleOverrides: {
             root: ({ theme }) => ({
-                color: theme.palette.text.primary,
+                color: theme.vars.palette.text.primary,
                 '&.Mui-selected': {
-                    color: theme.palette.text.primary,
+                    color: theme.vars.palette.text.primary,
                     backgroundColor: 'transparent',
                     '&:hover': {
                         backgroundColor: 'transparent'
                     },
                     '& svg, & .MuiSvgIcon-root': {
-                        color: theme.palette.primary.main
+                        color: theme.vars.palette.primary.main
                     }
                 },
                 variants: [
@@ -631,7 +631,7 @@ export const overrides = {
                     {
                         props: { color: 'default' },
                         style: {
-                            color: theme.palette.text.secondary
+                            color: theme.vars.palette.text.secondary
                         }
                     },
                     {
@@ -955,7 +955,9 @@ export const overrides = {
                 marginLeft: 5,
                 marginRight: -12,
                 transform: 'rotate(-90deg)',
-                [`&.${accordionSummaryClasses.expanded}`]: { transform: 'rotate(0deg)' }
+                [`&.${accordionSummaryClasses.expanded}`]: {
+                    transform: 'rotate(0deg)'
+                }
             }),
             content: {
                 paddingLeft: 8,
@@ -981,23 +983,23 @@ export const overrides = {
                 borderRadius: 28,
                 width: 96,
                 height: 96,
-                color: theme.palette.text.primary,
-                backgroundColor: theme.palette.background.paper,
+                color: theme.vars.palette.text.primary,
+                backgroundColor: theme.vars.palette.background.paper,
                 '&:hover': {
-                    backgroundColor: darken(theme.palette.background.paper, 0.05)
+                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.background.paper}, #000 5%)`
                 },
                 '@media (hover: none)': {
-                    backgroundColor: theme.palette.background.paper
+                    backgroundColor: theme.vars.palette.background.paper
                 }
             }),
             primary: ({ theme }) => ({
-                color: theme.palette.primary.dark,
-                backgroundColor: theme.palette.primary.light,
+                color: theme.vars.palette.primary.dark,
+                backgroundColor: theme.vars.palette.primary.light,
                 '&:hover': {
-                    backgroundColor: darken(theme.palette.primary.light, 0.05)
+                    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.primary.light}, #000 5%)`
                 },
                 '@media (hover: none)': {
-                    backgroundColor: theme.palette.primary.light
+                    backgroundColor: theme.vars.palette.primary.light
                 }
             }),
             extended: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linagora/twake-mui",
   "type": "module",
-  "version": "10.4.0",
+  "version": "10.4.1",
   "description": "MUI v9 theme system for Twake applications",
   "author": "Twake",
   "license": "MIT",

package/dist/components/SpaceOverlay/index.d.ts

@@ -1,8 +0,0 @@
-export { connectSpaceOverlay, computeOverlayRegion } from './spaceOverlay';
-export type { SpaceOverlay, SpaceOverlayStatus } from './spaceOverlay';
-export { OverlayPortal, SpaceOverlayProvider, overlayThemeOptions, useOverlayWindow } from './SpaceOverlay';
-export type { SpaceOverlayProviderProps } from './SpaceOverlay';
-export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlayRegionMessage } from './region';
-export type { OverlayBox, OverlayRegion } from './region';
-export { OverlayFrame } from './OverlayFrame';
-export type { OverlayFrameProps } from './OverlayFrame';

package/dist/components/SpaceOverlay/index.js

@@ -1,4 +0,0 @@
-export { connectSpaceOverlay, computeOverlayRegion } from './spaceOverlay';
-export { OverlayPortal, SpaceOverlayProvider, overlayThemeOptions, useOverlayWindow } from './SpaceOverlay';
-export { overlayClipPath, overlayRegionMessage, parseOverlayRegion, parseOverlayRegionMessage } from './region';
-export { OverlayFrame } from './OverlayFrame';