feat(component): mobile menu support (#7892)

packages/frontend/component/src/ui/menu/styles.css.ts

@@ -1,57 +1,92 @@
 import { cssVar } from '@toeverything/theme';
+import { cssVarV2 } from '@toeverything/theme/v2';
 import { createVar, style } from '@vanilla-extract/css';
-export const triggerWidthVar = createVar('triggerWidthVar');
+
+export const iconColor = createVar('iconColor');
+export const labelColor = createVar('labelColor');
+export const bgColor = createVar('bgColor');
+
 export const menuContent = style({
   minWidth: '180px',
-  color: cssVar('textPrimaryColor'),
   borderRadius: '8px',
   padding: '8px',
   fontSize: cssVar('fontSm'),
   fontWeight: '400',
-  backgroundColor: cssVar('backgroundOverlayPanelColor'),
+  backgroundColor: cssVarV2('layer/background/overlayPanel'),
   boxShadow: cssVar('menuShadow'),
   userSelect: 'none',
   ['WebkitAppRegion' as string]: 'no-drag',
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 4,
+  selectors: {
+    '&.mobile': {
+      padding: 0,
+      boxShadow: 'none',
+    },
+  },
 });
+
 export const menuItem = style({
+  vars: {
+    [iconColor]: cssVarV2('icon/primary'),
+    [labelColor]: cssVarV2('text/primary'),
+    [bgColor]: 'transparent',
+  },
+  color: labelColor,
+  backgroundColor: bgColor,
+
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'space-between',
-  padding: '4px 12px',
-  borderRadius: '4px',
+  gap: 8,
+  padding: '4px',
+  borderRadius: 4,
   lineHeight: '22px',
   border: 'none',
   outline: 'none',
   cursor: 'pointer',
   boxSizing: 'border-box',
   selectors: {
-    '&:not(:last-of-type)': {
-      marginBottom: '4px',
-    },
     '&.block': {
       maxWidth: '100%',
     },
     '&[data-disabled]': {
-      color: cssVar('textDisableColor'),
+      vars: {
+        [iconColor]: cssVarV2('icon/disable'),
+        [labelColor]: cssVarV2('text/secondary'),
+      },
       pointerEvents: 'none',
-      cursor: 'not-allowed',
-    },
-    '&[data-highlighted]': {
-      backgroundColor: cssVar('hoverColor'),
+      cursor: 'default',
     },
     '&:hover': {
-      backgroundColor: cssVar('hoverColor'),
+      vars: {
+        [bgColor]: cssVar('hoverColor'),
+      },
+      outline: 'none !important',
+    },
+    '&:focus-visible': {
+      outline: '1px solid ' + cssVarV2('layer/insideBorder/primaryBorder'),
     },
     '&.danger:hover': {
-      color: cssVar('errorColor'),
-      backgroundColor: cssVar('backgroundErrorColor'),
+      vars: {
+        [iconColor]: cssVar('errorColor'),
+        [labelColor]: cssVar('errorColor'),
+        [bgColor]: cssVar('backgroundErrorColor'),
+      },
     },
     '&.warning:hover': {
-      color: cssVar('warningColor'),
-      backgroundColor: cssVar('backgroundWarningColor'),
+      vars: {
+        [iconColor]: cssVar('warningColor'),
+        [labelColor]: cssVar('warningColor'),
+        [bgColor]: cssVar('backgroundWarningColor'),
+      },
     },
-    '&.checked': {
-      color: cssVar('primaryColor'),
+    '&.checked, &.selected': {
+      vars: {
+        [iconColor]: cssVar('primaryColor'),
+        [labelColor]: cssVar('primaryColor'),
+      },
     },
   },
 });
@@ -66,84 +101,24 @@ export const menuItemIcon = style({
   display: 'flex',
   flexShrink: 0,
   fontSize: cssVar('fontH5'),
-  color: cssVar('iconColor'),
-  selectors: {
-    '&.start': { marginRight: '4px' },
-    '&.end': { marginLeft: '4px' },
-    '&.selected, &.checked': {
-      color: cssVar('primaryColor'),
-    },
-    [`${menuItem}.danger:hover &`]: {
-      color: cssVar('errorColor'),
-    },
-    [`${menuItem}.warning:hover &`]: {
-      color: cssVar('warningColor'),
-    },
-  },
+  color: iconColor,
+  width: 20,
+  height: 20,
 });
+
 export const menuSeparator = style({
-  height: '1px',
-  backgroundColor: cssVar('borderColor'),
-  marginTop: '12px',
-  marginBottom: '8px',
-});
-export const menuTrigger = style({
-  vars: {
-    [triggerWidthVar]: 'auto',
-  },
-  width: triggerWidthVar,
-  height: 28,
-  lineHeight: '22px',
-  padding: '0 10px',
-  color: cssVar('textPrimaryColor'),
-  border: '1px solid',
-  backgroundColor: cssVar('white'),
-  borderRadius: 8,
-  display: 'inline-flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  fontSize: cssVar('fontXs'),
-  cursor: 'pointer',
-  ['WebkitAppRegion' as string]: 'no-drag',
-  borderColor: cssVar('borderColor'),
-  outline: 'none',
-  selectors: {
-    '&:hover': {
-      background: cssVar('hoverColor'),
-    },
-    '&.no-border': {
-      border: 'unset',
-    },
-    '&.block': {
-      display: 'flex',
-      width: '100%',
-    },
-    // size
-    '&.large': {
-      height: 32,
-    },
-    '&.extra-large': {
-      height: 40,
-      fontWeight: 600,
-    },
-    // color
-    '&.disabled': {
-      cursor: 'default',
-      color: cssVar('textDisableColor'),
-      pointerEvents: 'none',
-    },
-    // TODO(@catsjuice): wait for design
-    '&.error': {
-      // borderColor: 'var(--affine-error-color)',
-    },
-    '&.success': {
-      // borderColor: 'var(--affine-success-color)',
-    },
-    '&.warning': {
-      // borderColor: 'var(--affine-warning-color)',
-    },
-    '&.default': {
-      // borderColor: 'var(--affine-border-color)',
-    },
+  width: '100%',
+  height: '8px',
+  position: 'relative',
+  ':after': {
+    content: '""',
+    display: 'block',
+    height: '1px',
+    width: '100%',
+    backgroundColor: cssVarV2('layer/insideBorder/border'),
+    position: 'absolute',
+    top: '50%',
+    left: 0,
+    transform: 'translateY(-50%) scaleY(0.5)',
   },
 });