@m4l/components 9.2.22 → 9.2.23

package/components/WindowBase/WindowBase.styles.js

@@ -58,9 +58,14 @@ const windowBaseStyles = {
       }
     },
     ...ownerState?.selected ? {
-      background: theme.vars.palette["default"].selectedOpacity
+      background: theme.vars.palette["primary"].enabledOpacity
     } : {
-      background: theme.vars.palette["default"].opacity
+      background: theme.vars.palette.background.default
+    },
+    ...ownerState?.selected ? {
+      borderBottom: `1px solid ${theme.vars.palette.border.disabled}`
+    } : {
+      borderBottom: `1px solid ${theme.vars.palette.border.default}`
     }
   }),
   /**
@@ -79,9 +84,13 @@ const windowBaseStyles = {
   /**
    * Styles for the title of the header of the window base component.
    */
-  headerTitleWindowBase: ({ theme }) => ({
+  headerTitleWindowBase: ({ theme, ownerState }) => ({
     minWidth: "30px",
-    color: theme.vars.palette.text.primary,
+    ...ownerState?.selected ? {
+      color: `${theme.vars.palette["primary"].semanticText} !important`
+    } : {
+      color: `${theme.vars.palette.text.secondary} !important`
+    },
     fontWeight: `${theme.typography.fontWeightBold} !important`,
     whiteSpace: "nowrap",
     overflow: "hidden",
@@ -125,20 +134,30 @@ const windowBaseStyles = {
   /**
    * Styles for the subtitle of the header of the window base component.
    */
-  headerSubTitleWindowBase: ({ theme }) => ({
+  headerSubTitleWindowBase: ({ theme, ownerState }) => ({
     width: "auto !important",
     height: "auto !important",
-    color: `${theme.vars.palette.text.primary} !important`
+    ...ownerState?.selected ? {
+      color: `${theme.vars.palette["primary"].semanticText} !important`
+    } : {
+      color: `${theme.vars.palette.text.secondary} !important`
+    }
   }),
   /**
    * Styles for the icon of the header of the window base component.
    */
-  headerIconWindowBase: ({ theme }) => ({
+  headerIconWindowBase: ({ theme, ownerState }) => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "center",
     borderRadius: theme.vars.size.borderRadius["r0-5"],
-    color: theme.vars.palette.text.primary
+    "& .M4LIcon-icon": {
+      ...ownerState?.selected ? {
+        backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
+      } : {
+        backgroundColor: `${theme.vars.palette.text.secondary} !important`
+      }
+    }
   }),
   /**
    * Styles for the icons wrapper of the window base component.
@@ -155,7 +174,13 @@ const windowBaseStyles = {
    * Styles for the dot icon of the window base component.
    */
   pointIcon: ({ theme, ownerState }) => ({
-    color: theme.vars.palette.text.primary,
+    "& .M4LIcon-icon": {
+      ...ownerState?.selected ? {
+        backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
+      } : {
+        backgroundColor: `${theme.vars.palette.text.secondary} !important`
+      }
+    },
     ...theme.generalSettings.isMobile ? {
       ...ownerState.size === "small" && {
         height: theme.vars.size.mobile.small.base
@@ -175,8 +200,15 @@ const windowBaseStyles = {
   /**
    * Styles for the menu actions of the window base component.
    */
-  menuActionsWindowBase: () => ({
-    left: "-50px"
+  menuActionsWindowBase: ({ theme, ownerState }) => ({
+    left: "-50px",
+    "& .M4LIcon-icon": {
+      ...ownerState?.selected ? {
+        backgroundColor: `${theme.vars.palette["primary"].semanticText} !important`
+      } : {
+        backgroundColor: `${theme.vars.palette.text.secondary} !important`
+      }
+    }
   }),
   /**
    * Styles for the linear progress of the window base component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@m4l/components",
-  "version": "9.2.22",
+  "version": "9.2.23",
   "license": "UNLICENSED",
   "lint-staged": {
     "*.{js,ts,tsx}": "eslint --fix --max-warnings 0  --no-warn-ignored"