menu styles

Author: mltejera

packages/react-components/masons-theme-preview/library/src/componentStyles/MenuGroupHeader.styles.ts

@@ -0,0 +1,17 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { MenuGroupHeaderState } from '../../../../react-components/src/index';
+
+export const useMenuGroupHeaderStyles = makeStyles({
+  root: {
+    padding: '12px 8px',
+  },
+});
+
+export const useCustomMenuGroupHeaderStyles = (state: unknown) => {
+  const menuGroupHeaderState = state as MenuGroupHeaderState;
+
+  const styles = useMenuGroupHeaderStyles();
+
+  // eslint-disable-next-line react-compiler/react-compiler
+  menuGroupHeaderState.root.className = mergeClasses(menuGroupHeaderState.root.className, styles.root);
+};

packages/react-components/masons-theme-preview/library/src/componentStyles/MenuItem.styles.ts

@@ -0,0 +1,17 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { MenuItemState } from '../../../../react-components/src/index';
+
+export const useMenuItemStyles = makeStyles({
+  root: {
+    backgroundColor: 'transparent',
+  },
+});
+
+export const useCustomMenuItemStyles = (state: unknown) => {
+  const menuItemState = state as MenuItemState;
+
+  const styles = useMenuItemStyles();
+
+  // eslint-disable-next-line react-compiler/react-compiler
+  menuItemState.root.className = mergeClasses(menuItemState.root.className, styles.root);
+};

packages/react-components/masons-theme-preview/library/src/componentStyles/MenuPopover.styles.ts

@@ -0,0 +1,21 @@
+import { tokens } from '@fluentui/react-theme';
+import { acrylicTokens } from '../masonsTheme/acrylicTheme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { MenuPopoverState } from '../../../../react-components/src/index';
+
+export const useMenuPopoverStyles = makeStyles({
+  root: {
+    backdropFilter: acrylicTokens.blurAcrylicBackground,
+    backgroundColor: acrylicTokens.colorAcrylicBackground,
+    borderRadius: tokens.borderRadiusLarge,
+  },
+});
+
+export const useCustomMenuPopoverStyles = (state: unknown) => {
+  const menuPopoverState = state as MenuPopoverState;
+
+  const styles = useMenuPopoverStyles();
+
+  // eslint-disable-next-line react-compiler/react-compiler
+  menuPopoverState.root.className = mergeClasses(menuPopoverState.root.className, styles.root);
+};