chore: bump theme version, replace all typography in mobile (#8701)

packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx

@@ -1,3 +1,7 @@
+import {
+  bodyEmphasized,
+  footnoteRegular,
+} from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -23,30 +27,26 @@ export const head = style({
   justifyContent: 'space-between',
   gap: 8,
 });
-export const title = style({
-  width: 0,
-  flex: 1,
-  fontSize: 17,
-  lineHeight: '22px',
-  fontWeight: 600,
-  letterSpacing: -0.43,
-
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-});
+export const title = style([
+  bodyEmphasized,
+  {
+    width: 0,
+    flex: 1,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+]);
 export const untitled = style({
   opacity: 0.4,
 });
-export const content = style({
-  fontSize: 13,
-  lineHeight: '18px',
-  fontWeight: 400,
-  letterSpacing: -0.08,
-  flex: 1,
-
-  overflow: 'hidden',
-});
+export const content = style([
+  footnoteRegular,
+  {
+    flex: 1,
+    overflow: 'hidden',
+  },
+]);
 
 export const contentEmpty = style({
   opacity: 0.3,

packages/frontend/core/src/mobile/components/explorer/layouts/add-item-placeholder.css.ts

@@ -1,3 +1,4 @@
+import { bodyRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -21,9 +22,4 @@ export const iconWrapper = style([
   },
 ]);
 
-export const label = style({
-  fontSize: 17,
-  fontWeight: 400,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-});
+export const label = style([bodyRegular]);

packages/frontend/core/src/mobile/components/explorer/layouts/collapsible-section.css.ts

@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { title3Regular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -19,19 +20,17 @@ export const triggerRoot = style({
   padding: '0 16px',
   borderRadius: 4,
 });
-export const triggerLabel = style({
-  flexGrow: '0',
-  display: 'flex',
-  gap: 2,
-  alignItems: 'center',
-  justifyContent: 'start',
-
-  color: cssVarV2('text/primary'),
-  fontSize: 20,
-  lineHeight: '25px',
-  letterSpacing: -0.45,
-  fontWeight: 400,
-});
+export const triggerLabel = style([
+  title3Regular,
+  {
+    flexGrow: '0',
+    display: 'flex',
+    gap: 2,
+    alignItems: 'center',
+    justifyContent: 'start',
+    color: cssVarV2('text/primary'),
+  },
+]);
 export const triggerCollapseIcon = style({
   vars: { '--y': '1px', '--r': '90deg' },
   color: cssVarV2('icon/tertiary'),

packages/frontend/core/src/mobile/components/explorer/tree/node.css.ts

@@ -1,4 +1,5 @@
 import { cssVar } from '@toeverything/theme';
+import { bodyRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { createVar, style } from '@vanilla-extract/css';
 
@@ -90,19 +91,17 @@ export const iconContainer = style({
   fontSize: 24,
 });
 
-export const itemContent = style({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  alignItems: 'center',
-  flex: 1,
-  color: cssVarV2('text/primary'),
-
-  fontSize: 17,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  fontWeight: 400,
-});
+export const itemContent = style([
+  bodyRegular,
+  {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    alignItems: 'center',
+    flex: 1,
+    color: cssVarV2('text/primary'),
+  },
+]);
 
 export const itemRenameAnchor = style({
   pointerEvents: 'none',

packages/frontend/core/src/mobile/components/rename/content.css.ts

@@ -1,3 +1,4 @@
+import { bodyRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -14,22 +15,21 @@ export const input = style({
   borderRadius: 8,
   padding: '0 4px',
 });
-export const desc = style({
-  padding: '11px 16px',
-  fontSize: 17,
-  fontWeight: 400,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  color: cssVarV2('text/secondary'),
-});
+export const desc = style([
+  bodyRegular,
+  {
+    padding: '11px 16px',
+    color: cssVarV2('text/secondary'),
+  },
+]);
 export const doneWrapper = style({
   width: '100%',
   padding: '8px 16px',
 });
-export const done = style({
-  width: '100%',
-  height: 44,
-  borderRadius: 8,
-  fontSize: 17,
-  fontWeight: 400,
-});
+export const done = style([
+  bodyRegular,
+  {
+    width: '100%',
+    borderRadius: 8,
+  },
+]);

packages/frontend/core/src/mobile/components/rename/dialog.css.ts

@@ -1,3 +1,4 @@
+import { bodyEmphasized } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -8,10 +9,9 @@ export const header = style({
   gap: 8,
   padding: '10px 16px',
 });
-export const title = style({
-  fontSize: 17,
-  fontWeight: 600,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  color: cssVarV2('text/primary'),
-});
+export const title = style([
+  bodyEmphasized,
+  {
+    color: cssVarV2('text/primary'),
+  },
+]);

packages/frontend/core/src/mobile/components/search-input/style.css.ts

@@ -1,3 +1,4 @@
+import { bodyRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { generateIdentifier, style } from '@vanilla-extract/css';
 
@@ -26,18 +27,16 @@ export const prefixIcon = style({
   pointerEvents: 'none',
 });
 
-export const input = style({
-  padding: '11px 8px 11px 36px',
-  width: '100%',
-  height: '100%',
-  outline: 'none',
-  border: 'none',
-
-  fontWeight: 400,
-  fontSize: 17,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-});
+export const input = style([
+  bodyRegular,
+  {
+    padding: '11px 8px 11px 36px',
+    width: '100%',
+    height: '100%',
+    outline: 'none',
+    border: 'none',
+  },
+]);
 
 export const placeholder = style([
   input,

packages/frontend/core/src/mobile/components/search-result/universal-item.css.ts

@@ -1,3 +1,4 @@
+import { bodyRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -25,19 +26,17 @@ export const iconWrapper = style({
   fontSize: 24,
   color: cssVarV2('icon/primary'),
 });
-export const content = style({
-  width: 0,
-  flex: 1,
-  fontSize: 17,
-  lineHeight: '22px',
-  fontWeight: 400,
-  letterSpacing: -0.43,
-  color: cssVarV2('text/primary'),
-
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-});
+export const content = style([
+  bodyRegular,
+  {
+    width: 0,
+    flex: 1,
+    color: cssVarV2('text/primary'),
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+  },
+]);
 export const suffixIcon = style({
   color: cssVarV2('icon/secondary'),
 });

packages/frontend/core/src/mobile/components/workspace-selector/card.css.ts

@@ -1,3 +1,4 @@
+import { bodyEmphasized } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -7,16 +8,14 @@ export const card = style({
   gap: 10,
 });
 
-export const label = style({
-  display: 'flex',
-  gap: 4,
-
-  fontSize: 17,
-  fontWeight: 600,
-  lineHeight: '22px',
-  color: cssVarV2('text/primary'),
-  letterSpacing: -0.43,
-});
+export const label = style([
+  bodyEmphasized,
+  {
+    display: 'flex',
+    gap: 4,
+    color: cssVarV2('text/primary'),
+  },
+]);
 
 export const dropdownIcon = style({
   fontSize: 24,

packages/frontend/core/src/mobile/components/workspace-selector/menu.css.ts

@@ -1,4 +1,9 @@
 import { cssVar } from '@toeverything/theme';
+import {
+  bodyEmphasized,
+  bodyRegular,
+  footnoteRegular,
+} from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -22,31 +27,30 @@ export const divider = style({
   },
 });
 
-export const head = style({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: 4,
-  padding: '10px 16px',
-  fontSize: 17,
-  fontWeight: 600,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  color: cssVarV2('text/primary'),
-});
+export const head = style([
+  bodyEmphasized,
+  {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 4,
+    padding: '10px 16px',
+    color: cssVarV2('text/primary'),
+  },
+]);
 export const body = style({
   overflowY: 'auto',
   flexShrink: 0,
   flex: 1,
 });
 export const wsList = style({});
-export const wsListTitle = style({
-  padding: '6px 16px',
-  fontSize: 13,
-  lineHeight: '18px',
-  letterSpacing: -0.08,
-  color: cssVar('textSecondaryColor'),
-});
+export const wsListTitle = style([
+  footnoteRegular,
+  {
+    padding: '6px 16px',
+    color: cssVar('textSecondaryColor'),
+  },
+]);
 export const wsItem = style({
   padding: '4px 12px',
 });
@@ -64,14 +68,14 @@ export const wsCard = style({
     background: cssVarV2('layer/background/hoverOverlay'),
   },
 });
-export const wsName = style({
-  width: 0,
-  flex: 1,
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  fontSize: 17,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  textAlign: 'left',
-});
+export const wsName = style([
+  bodyRegular,
+  {
+    width: 0,
+    flex: 1,
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textAlign: 'left',
+  },
+]);

packages/frontend/core/src/mobile/dialogs/selectors/generic.css.ts

@@ -1,3 +1,9 @@
+import {
+  bodyEmphasized,
+  bodyRegular,
+  footnoteRegular,
+  subHeadlineRegular,
+} from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -15,13 +21,12 @@ export const root = style({
 });
 
 // header
-export const headerTitle = style({
-  fontSize: 17,
-  fontWeight: 600,
-  letterSpacing: -0.43,
-  lineHeight: '22px',
-  color: cssVarV2('text/primary'),
-});
+export const headerTitle = style([
+  bodyEmphasized,
+  {
+    color: cssVarV2('text/primary'),
+  },
+]);
 export const scrollArea = style({
   height: 0,
   flex: 1,
@@ -64,18 +69,17 @@ export const listItemIcon = style([
     color: cssVarV2('icon/primary'),
   },
 ]);
-export const listItemLabel = style({
-  fontWeight: 400,
-  fontSize: 17,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  color: cssVarV2('text/primary'),
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  width: 0,
-  flex: 1,
-});
+export const listItemLabel = style([
+  bodyRegular,
+  {
+    color: cssVarV2('text/primary'),
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    width: 0,
+    flex: 1,
+  },
+]);
 export const listItemArrow = style({
   fontSize: 16,
   color: cssVarV2('icon/disable'),
@@ -100,22 +104,20 @@ export const actionButton = style({
   letterSpacing: -0.43,
 });
 
-export const changedInfo = style({
-  fontSize: 15,
-  fontWeight: 400,
-  letterSpacing: -0.23,
-  lineHeight: '20px',
-  color: cssVarV2('text/primary'),
-  height: 20,
-});
-export const totalInfo = style({
-  fontSize: 13,
-  fontWeight: 400,
-  letterSpacing: -0.08,
-  lineHeight: '18px',
-  color: cssVarV2('text/tertiary'),
-  height: 18,
-});
+export const changedInfo = style([
+  subHeadlineRegular,
+  {
+    color: cssVarV2('text/primary'),
+    height: 20,
+  },
+]);
+export const totalInfo = style([
+  footnoteRegular,
+  {
+    color: cssVarV2('text/tertiary'),
+    height: 18,
+  },
+]);
 export const info = style({
   display: 'flex',
   flexDirection: 'column',

packages/frontend/core/src/mobile/dialogs/setting/dropdown-select.css.ts

@@ -1,3 +1,4 @@
+import { bodyRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -6,13 +7,10 @@ export const root = style({
   alignItems: 'center',
   gap: 8,
 });
-export const label = style({
-  fontSize: 17,
-  lineHeight: '22px',
-  fontWeight: 400,
-  letterSpacing: -0.43,
-  color: cssVarV2('text/placeholder'),
-});
+export const label = style([
+  bodyRegular,
+  { color: cssVarV2('text/placeholder') },
+]);
 export const icon = style({
   fontSize: 24,
   color: cssVarV2('icon/primary'),

packages/frontend/core/src/mobile/dialogs/setting/group.css.ts

@@ -1,3 +1,4 @@
+import { footnoteRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -8,14 +9,13 @@ export const group = style({
   width: '100%',
 });
 
-export const title = style({
-  padding: '0px 8px',
-  color: cssVarV2('text/tertiary'),
-  fontSize: 13,
-  lineHeight: '18px',
-  letterSpacing: -0.08,
-  fontWeight: 400,
-});
+export const title = style([
+  footnoteRegular,
+  {
+    padding: '0px 8px',
+    color: cssVarV2('text/tertiary'),
+  },
+]);
 
 export const content = style({
   background: cssVarV2('layer/background/primary'),

packages/frontend/core/src/mobile/dialogs/setting/style.css.ts

@@ -1,12 +1,8 @@
+import { bodyEmphasized, bodyRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
-export const pageTitle = style({
-  fontSize: 17,
-  lineHeight: '22px',
-  fontWeight: 600,
-  letterSpacing: -0.43,
-});
+export const pageTitle = style([bodyEmphasized]);
 
 export const root = style({
   padding: '24px 16px',
@@ -22,16 +18,14 @@ export const baseSettingItem = style({
   gap: 32,
   padding: '8px 0',
 });
-export const baseSettingItemName = style({
-  fontSize: 17,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  fontWeight: 400,
-  color: cssVarV2('text/primary'),
-
-  flexShrink: 0,
-  whiteSpace: 'nowrap',
-});
+export const baseSettingItemName = style([
+  bodyRegular,
+  {
+    color: cssVarV2('text/primary'),
+    flexShrink: 0,
+    whiteSpace: 'nowrap',
+  },
+]);
 export const baseSettingItemAction = style([
   baseSettingItemName,
   {

packages/frontend/core/src/mobile/dialogs/setting/user-profile/style.css.ts

@@ -1,3 +1,7 @@
+import {
+  bodyRegular,
+  subHeadlineRegular,
+} from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -29,21 +33,12 @@ const ellipsis = style({
   whiteSpace: 'nowrap',
 });
 
-export const title = style({
-  fontSize: 17,
-  lineHeight: '22px',
-  fontWeight: 400,
-  letterSpacing: -0.43,
-  color: cssVarV2('text/primary'),
-});
+export const title = style([bodyRegular, { color: cssVarV2('text/primary') }]);
 
-export const caption = style({
-  fontSize: 15,
-  lineHeight: '20px',
-  fontWeight: 400,
-  letterSpacing: -0.23,
-  color: cssVarV2('text/secondary'),
-});
+export const caption = style([
+  subHeadlineRegular,
+  { color: cssVarV2('text/secondary') },
+]);
 
 export const suffixIcon = style({
   fontSize: 30,

packages/frontend/core/src/mobile/dialogs/setting/user-usage/style.css.ts

@@ -1,3 +1,4 @@
+import { bodyRegular, caption1Regular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -10,17 +11,14 @@ export const progressInfoRow = style({
   alignItems: 'center',
   paddingBottom: 4,
 });
-export const progressName = style({
-  fontSize: 17,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  color: cssVarV2('text/primary'),
-});
-export const progressDesc = style({
-  fontSize: 12,
-  lineHeight: '16px',
-  color: cssVarV2('text/secondary'),
-});
+export const progressName = style([
+  bodyRegular,
+  { color: cssVarV2('text/primary') },
+]);
+export const progressDesc = style([
+  caption1Regular,
+  { color: cssVarV2('text/secondary') },
+]);
 export const progressTrack = style({
   width: '100%',
   height: 10,

packages/frontend/core/src/mobile/views/all-docs/collection/detail.css.ts

@@ -1,17 +1,16 @@
+import { bodyEmphasized } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
-export const headerContent = style({
-  display: 'flex',
-  alignItems: 'center',
-  gap: 8,
-
-  fontSize: 17,
-  fontWeight: 600,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  color: cssVarV2('text/primary'),
-});
+export const headerContent = style([
+  bodyEmphasized,
+  {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+    color: cssVarV2('text/primary'),
+  },
+]);
 
 export const headerIcon = style({
   fontSize: 24,

packages/frontend/core/src/mobile/views/all-docs/collection/styles.css.ts

@@ -1,3 +1,4 @@
+import { bodyEmphasized } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -27,19 +28,16 @@ export const icon = style({
   flexShrink: 0,
 });
 export const prefixIcon = style([icon]);
-export const name = style({
-  width: 0,
-  flex: 1,
-
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-
-  color: cssVarV2('text/primary'),
-  fontSize: 17,
-  fontWeight: 600,
-  lineHeight: '24px',
-  letterSpacing: -0.43,
-});
+export const name = style([
+  bodyEmphasized,
+  {
+    width: 0,
+    flex: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    color: cssVarV2('text/primary'),
+  },
+]);
 
 export const suffixIcon = style([icon]);

packages/frontend/core/src/mobile/views/all-docs/doc/menu.css.ts

@@ -1,3 +1,4 @@
+import { bodyEmphasized, bodyRegular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -6,28 +7,25 @@ export const root = style({
   flexDirection: 'column',
   gap: 10,
 });
-export const head = style({
-  padding: '10px 20px',
-  fontSize: 17,
-  fontWeight: 600,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  color: cssVarV2('text/primary'),
-});
+export const head = style([
+  bodyEmphasized,
+  {
+    padding: '10px 20px',
+    color: cssVarV2('text/primary'),
+  },
+]);
 
-export const item = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  gap: 4,
-  height: 34,
-  padding: '0 20px',
-
-  fontSize: 17,
-  lineHeight: '22px',
-  fontWeight: 400,
-  letterSpacing: -0.43,
-});
+export const item = style([
+  bodyRegular,
+  {
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    gap: 4,
+    height: 34,
+    padding: '0 20px',
+  },
+]);
 export const itemSuffix = style({
   display: 'flex',
   gap: 8,

packages/frontend/core/src/mobile/views/all-docs/tag/detail.css.ts

@@ -1,16 +1,16 @@
+import { bodyEmphasized } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
-export const headerContent = style({
-  fontSize: 17,
-  fontWeight: 600,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-  color: cssVarV2('text/primary'),
-  whiteSpace: 'nowrap',
-  textOverflow: 'ellipsis',
-  overflow: 'hidden',
-});
+export const headerContent = style([
+  bodyEmphasized,
+  {
+    color: cssVarV2('text/primary'),
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+]);
 
 export const headerIcon = style({
   width: 24,

packages/frontend/core/src/mobile/views/all-docs/tag/styles.css.ts

@@ -1,3 +1,4 @@
+import { bodyEmphasized } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -19,20 +20,17 @@ export const item = style({
     },
   },
 });
-export const content = style({
-  width: 0,
-  flex: 1,
-
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-
-  color: cssVarV2('text/primary'),
-  fontSize: 17,
-  fontWeight: 600,
-  lineHeight: '24px',
-  letterSpacing: -0.43,
-});
+export const content = style([
+  bodyEmphasized,
+  {
+    width: 0,
+    flex: 1,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    color: cssVarV2('text/primary'),
+  },
+]);
 
 export const prefixIcon = style({
   width: 24,

packages/frontend/core/src/mobile/views/search/style.css.ts

@@ -1,3 +1,4 @@
+import { footnoteRegular, title3Regular } from '@toeverything/theme/typography';
 import { cssVarV2 } from '@toeverything/theme/v2';
 import { style } from '@vanilla-extract/css';
 
@@ -5,18 +6,15 @@ export const searchHeader = style({
   padding: 16,
 });
 
-export const resTitle = style({
-  padding: '6px 16px',
-  marginBottom: 8,
-  height: 30,
-
-  fontSize: 13,
-  lineHeight: '18px',
-  fontWeight: 400,
-  letterSpacing: -0.08,
-
-  color: cssVarV2('text/secondary'),
-});
+export const resTitle = style([
+  footnoteRegular,
+  {
+    padding: '6px 16px',
+    marginBottom: 8,
+    height: 30,
+    color: cssVarV2('text/secondary'),
+  },
+]);
 
 export const resBlock = style({
   paddingBottom: 32,
@@ -26,14 +24,13 @@ export const resBlock = style({
     },
   },
 });
-export const resBlockTitle = style({
-  padding: '0 16px',
-  fontSize: 20,
-  lineHeight: '25px',
-  fontWeight: 400,
-  letterSpacing: -0.45,
-  color: cssVarV2('text/primary'),
-});
+export const resBlockTitle = style([
+  title3Regular,
+  {
+    padding: '0 16px',
+    color: cssVarV2('text/primary'),
+  },
+]);
 const resBlockContent = style({
   padding: '12px 0px',
 });
@@ -64,11 +61,10 @@ export const docCard = style({
   flexShrink: 0,
 });
 
-export const empty = style({
-  padding: '0 16px',
-  fontSize: 20,
-  fontWeight: 400,
-  lineHeight: '25px',
-  letterSpacing: -0.45,
-  color: cssVarV2('text/primary'),
-});
+export const empty = style([
+  title3Regular,
+  {
+    padding: '0 16px',
+    color: cssVarV2('text/primary'),
+  },
+]);