feat(core): adjust property table's style to match design (#10849)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/LakojjjzZNf6ogjOVwKE/278b9dbf-a089-4007-bf35-088301a29d89.png)

packages/frontend/core/src/components/doc-properties/table.css.ts

@@ -121,9 +121,9 @@ export const actionContainer = style({
 
 export const propertyActionButton = style({
   fontSize: cssVar('fontSm'),
-  color: `${cssVarV2('text/secondary')}`,
-  padding: '0 6px',
-  height: 34,
+  color: `${cssVarV2.text.tertiary}`,
+  padding: '0 4px',
+  height: 30,
   fontWeight: 400,
   gap: 6,
   width: '160px',

packages/frontend/core/src/components/doc-properties/table.tsx

@@ -449,7 +449,9 @@ const DocPropertiesTableInner = ({
           onOpenChange={setExpanded}
         />
         <Collapsible.Content>
-          <DocIntegrationPropertiesTable />
+          <DocIntegrationPropertiesTable
+            divider={<div className={styles.tableHeaderDivider} />}
+          />
           <DocWorkspacePropertiesTableBody
             defaultOpen={
               !defaultOpenProperty || defaultOpenProperty.type === 'workspace'

packages/frontend/core/src/components/doc-properties/types/doc-primary-mode.tsx

@@ -1,15 +1,11 @@
-import {
-  notify,
-  PropertyValue,
-  RadioGroup,
-  type RadioItem,
-} from '@affine/component';
+import { notify, PropertyValue, type RadioItem } from '@affine/component';
 import { DocService } from '@affine/core/modules/doc';
 import { useI18n } from '@affine/i18n';
 import type { DocMode } from '@blocksuite/affine/model';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
+import { DocPropertyRadioGroup } from '../widgets/radio-group';
 import * as styles from './doc-primary-mode.css';
 import type { PropertyValueProps } from './types';
 
@@ -59,14 +55,11 @@ export const DocPrimaryModeValue = ({
       hoverable={false}
       readonly={readonly}
     >
-      <RadioGroup
-        width={BUILD_CONFIG.isMobileEdition ? '100%' : 194}
-        itemHeight={24}
+      <DocPropertyRadioGroup
         value={primaryMode}
         onChange={handleChange}
         items={DocModeItems}
         disabled={readonly}
-        className={styles.radioGroup}
       />
     </PropertyValue>
   );

packages/frontend/core/src/components/doc-properties/types/edgeless-theme.tsx

@@ -1,9 +1,10 @@
-import { PropertyValue, RadioGroup, type RadioItem } from '@affine/component';
+import { PropertyValue, type RadioItem } from '@affine/component';
 import { DocService } from '@affine/core/modules/doc';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
+import { DocPropertyRadioGroup } from '../widgets/radio-group';
 import * as styles from './edgeless-theme.css';
 import type { PropertyValueProps } from './types';
 
@@ -46,9 +47,7 @@ export const EdgelessThemeValue = ({
       hoverable={false}
       readonly={readonly}
     >
-      <RadioGroup
-        width={BUILD_CONFIG.isMobileEdition ? '100%' : 194}
-        itemHeight={24}
+      <DocPropertyRadioGroup
         value={edgelessTheme || 'system'}
         onChange={handleChange}
         items={themeItems}

packages/frontend/core/src/components/doc-properties/types/journal.css.ts

@@ -3,7 +3,7 @@ import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
 export const property = style({
-  padding: 4,
+  padding: '3px 4px',
 });
 
 export const root = style({

packages/frontend/core/src/components/doc-properties/types/page-width.tsx

@@ -1,10 +1,11 @@
-import { PropertyValue, RadioGroup, type RadioItem } from '@affine/component';
+import { PropertyValue, type RadioItem } from '@affine/component';
 import { DocService } from '@affine/core/modules/doc';
 import { EditorSettingService } from '@affine/core/modules/editor-setting';
 import { useI18n } from '@affine/i18n';
 import { useLiveData, useService } from '@toeverything/infra';
 import { useCallback, useMemo } from 'react';
 
+import { DocPropertyRadioGroup } from '../widgets/radio-group';
 import { container } from './page-width.css';
 import type { PageLayoutMode, PropertyValueProps } from './types';
 
@@ -50,9 +51,7 @@ export const PageWidthValue = ({ readonly }: PropertyValueProps) => {
   );
   return (
     <PropertyValue className={container} hoverable={false} readonly={readonly}>
-      <RadioGroup
-        width={BUILD_CONFIG.isMobileEdition ? '100%' : 194}
-        itemHeight={24}
+      <DocPropertyRadioGroup
         value={radioValue}
         onChange={handleChange}
         items={radioItems}

packages/frontend/core/src/components/doc-properties/types/tags.css.ts

@@ -2,10 +2,6 @@ import { style } from '@vanilla-extract/css';
 
 export const tagInlineEditor = style({
   width: '100%',
-  minHeight: 34,
-  padding: `6px`,
 });
 
-export const container = style({
-  padding: '0px !important',
-});
+export const container = style({});

packages/frontend/core/src/components/doc-properties/widgets/radio-group.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css';
+
+export const label = style({
+  fontWeight: 400,
+});

packages/frontend/core/src/components/doc-properties/widgets/radio-group.tsx

@@ -0,0 +1,41 @@
+import { RadioGroup, type RadioItem, type RadioProps } from '@affine/component';
+import clsx from 'clsx';
+import { useMemo } from 'react';
+
+import * as styles from './radio-group.css';
+
+export const DocPropertyRadioGroup = ({
+  width = 194,
+  items,
+  value,
+  onChange,
+  disabled,
+}: Pick<RadioProps, 'items' | 'value' | 'onChange' | 'disabled' | 'width'>) => {
+  const finalItems = useMemo(
+    () =>
+      items.map(item => {
+        let finalItem: RadioItem = { value: '' };
+        if (typeof item === 'string') {
+          finalItem.label = item;
+          finalItem.value = item;
+        } else {
+          finalItem = { ...item };
+          finalItem.className = clsx(styles.label, item.className);
+        }
+        return finalItem;
+      }),
+    [items]
+  );
+
+  return (
+    <RadioGroup
+      width={BUILD_CONFIG.isMobileEdition ? '100%' : width}
+      itemHeight={20}
+      borderRadius={8}
+      value={value}
+      onChange={onChange}
+      items={finalItems}
+      disabled={disabled}
+    />
+  );
+};