fix(core): date-picker styles (#8997)

fix AF-1871

packages/frontend/component/src/ui/date-picker/calendar/calendar.css.ts

@@ -5,6 +5,8 @@ import { createVar, style } from '@vanilla-extract/css';
 export const vars = {
   gapX: createVar('gapX'),
   gapY: createVar('gapY'),
+  cellFontSize: createVar('cellFontSize'),
+  cellSize: createVar('cellSize'),
 };
 
 // basic
@@ -82,9 +84,9 @@ export const basicCell = style({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  minWidth: '28px',
-  maxWidth: '56px',
-  flex: '1',
+  width: vars.cellSize,
+  height: vars.cellSize,
+  flexBasis: vars.cellSize,
   userSelect: 'none',
 });
 
@@ -138,11 +140,16 @@ export const calendarHeaderTriggerButton = style([
   {
     display: 'inline-flex',
     lineHeight: '22px',
-    fontSize: 'var(--affine-font-sm)',
+    fontSize: vars.cellFontSize,
     fontWeight: 600,
-    padding: '2px 6px',
+    padding: '0 6px',
     borderRadius: 4,
     whiteSpace: 'nowrap',
+    selectors: {
+      '[data-mobile="true"] &': {
+        padding: '0px 4px',
+      },
+    },
   },
 ]);
 export const headerNavButtons = style({
@@ -156,7 +163,7 @@ export const headerNavGapFallback = style({
 export const headerNavToday = style([
   interactive,
   {
-    fontSize: 'var(--affine-font-sm)',
+    fontSize: vars.cellFontSize,
     fontWeight: 400,
     lineHeight: '22px',
     padding: '0 4px',
@@ -181,18 +188,13 @@ export const monthViewRow = style({
 export const monthViewHeaderCell = style([
   basicCell,
   {
-    fontSize: 'var(--affine-font-xs)',
+    fontSize: vars.cellFontSize,
     fontWeight: 500,
     color: cssVar('textSecondaryColor'),
     height: 28,
   },
 ]);
-export const monthViewBodyCell = style([
-  basicCell,
-  {
-    height: '28px',
-  },
-]);
+export const monthViewBodyCell = style([basicCell]);
 
 export const monthViewBodyCellInner = style([
   interactive,
@@ -200,7 +202,7 @@ export const monthViewBodyCellInner = style([
     width: '100%',
     height: '100%',
     borderRadius: 8,
-    fontSize: cssVar('fontSm'),
+    fontSize: vars.cellFontSize,
     color: cssVar('textPrimaryColor'),
     fontWeight: 400,
 

packages/frontend/component/src/ui/date-picker/calendar/calendar.tsx

@@ -18,7 +18,7 @@ export type { DatePickerProps } from './types';
  */
 export const DatePicker = (props: DatePickerProps) => {
   const finalProps = { ...defaultDatePickerProps, ...props };
-  const { value, gapX, gapY, onChange } = finalProps;
+  const { value, gapX, gapY, cellFontSize, cellSize, onChange } = finalProps;
 
   const [mode, setMode] = useState<SelectMode>('day');
   const [cursor, setCursor] = useState(dayjs(value));
@@ -26,6 +26,8 @@ export const DatePicker = (props: DatePickerProps) => {
   const variables = assignInlineVars({
     [styles.vars.gapX]: `${gapX}px`,
     [styles.vars.gapY]: `${gapY}px`,
+    [styles.vars.cellFontSize]: `${cellFontSize}px`,
+    [styles.vars.cellSize]: `${cellSize}px`,
   });
   const Component =
     mode === 'day' ? DayPicker : mode === 'month' ? MonthPicker : YearPicker;

packages/frontend/component/src/ui/date-picker/calendar/items.tsx

@@ -80,7 +80,12 @@ export const CalendarLayout = forwardRef<HTMLDivElement, CalendarLayoutProps>(
     ref
   ) => {
     return (
-      <div className={styles.calendarWrapper} ref={ref} data-mode={mode}>
+      <div
+        className={styles.calendarWrapper}
+        ref={ref}
+        data-mode={mode}
+        data-mobile={BUILD_CONFIG.isMobileEdition}
+      >
         <HeaderLayout
           mode={mode}
           length={length}
@@ -124,6 +129,9 @@ interface NavButtonsProps extends PropsWithChildren {
   onPrev?: () => void;
   onNext?: () => void;
 }
+
+const iconButtonSize = BUILD_CONFIG.isMobileEdition ? 28 : 16;
+
 export const NavButtons = memo(function NavButtons({
   children,
   prevDisabled,
@@ -135,7 +143,7 @@ export const NavButtons = memo(function NavButtons({
     <div className={styles.headerNavButtons} key="nav-btn-group">
       <IconButton
         key="nav-btn-prev"
-        size="16"
+        size={iconButtonSize}
         disabled={prevDisabled}
         data-testid="date-picker-nav-prev"
         onClick={onPrev}
@@ -147,7 +155,7 @@ export const NavButtons = memo(function NavButtons({
 
       <IconButton
         key="nav-btn-next"
-        size="16"
+        size={iconButtonSize}
         disabled={nextDisabled}
         data-testid="date-picker-nav-next"
         onClick={onNext}

packages/frontend/component/src/ui/date-picker/calendar/types.tsx

@@ -14,7 +14,7 @@ export interface DatePickerProps {
 
   /**
    * Customize the vertical gap between each row, in `px`
-   * @default 8
+   * @default 8 (mobile: 16)
    */
   gapY?: number;
 
@@ -25,6 +25,18 @@ export interface DatePickerProps {
    */
   gapX?: number;
 
+  /**
+   * Customize the size of the cell, in `px`
+   * @default 28 (mobile: 34)
+   */
+  cellSize?: number;
+
+  /**
+   * Customize the font size of the cell, in `px`
+   * @default 14 (mobile: 17)
+   */
+  cellFontSize?: number;
+
   /**
    * Customize weekdays, use `,` to separate each day
    * @default {} `'Su,Mo,Tu,We,Th,Fr,Sa'`
@@ -73,7 +85,9 @@ export type SelectMode = 'day' | 'month' | 'year';
 export const defaultDatePickerProps = {
   format: 'YYYY-MM-DD',
   gapX: 8,
-  gapY: 8,
+  gapY: BUILD_CONFIG.isMobileEdition ? 16 : 8,
+  cellFontSize: BUILD_CONFIG.isMobileEdition ? 17 : 14,
+  cellSize: BUILD_CONFIG.isMobileEdition ? 34 : 28,
   weekDays: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'].join(','),
   monthNames: [
     'Jan',