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

packages/frontend/component/package.json

@@ -40,7 +40,7 @@
     "@radix-ui/react-toast": "^1.1.5",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@radix-ui/react-visually-hidden": "^1.1.0",
-    "@toeverything/theme": "^1.0.11",
+    "@toeverything/theme": "^1.0.16",
     "@vanilla-extract/dynamic": "^2.1.0",
     "check-password-strength": "^2.0.10",
     "clsx": "^2.1.0",

packages/frontend/core/package.json

@@ -36,7 +36,7 @@
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-toolbar": "^1.0.4",
     "@sentry/react": "^8.0.0",
-    "@toeverything/theme": "^1.0.11",
+    "@toeverything/theme": "^1.0.16",
     "@vanilla-extract/dynamic": "^2.1.0",
     "animejs": "^3.2.2",
     "bytes": "^3.1.2",

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({
+export const title = style([
-  width: 0,
+  bodyEmphasized,
-  flex: 1,
+  {
-  fontSize: 17,
+    width: 0,
-  lineHeight: '22px',
+    flex: 1,
-  fontWeight: 600,
+    whiteSpace: 'nowrap',
-  letterSpacing: -0.43,
+    textOverflow: 'ellipsis',
-
+    overflow: 'hidden',
-  whiteSpace: 'nowrap',
+  },
-  textOverflow: 'ellipsis',
+]);
-  overflow: 'hidden',
-});
 export const untitled = style({
   opacity: 0.4,
 });
-export const content = style({
+export const content = style([
-  fontSize: 13,
+  footnoteRegular,
-  lineHeight: '18px',
+  {
-  fontWeight: 400,
+    flex: 1,
-  letterSpacing: -0.08,
+    overflow: 'hidden',
-  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({
+export const label = style([bodyRegular]);
-  fontSize: 17,
-  fontWeight: 400,
-  lineHeight: '22px',
-  letterSpacing: -0.43,
-});

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({
+export const triggerLabel = style([
-  flexGrow: '0',
+  title3Regular,
-  display: 'flex',
+  {
-  gap: 2,
+    flexGrow: '0',
-  alignItems: 'center',
+    display: 'flex',
-  justifyContent: 'start',
+    gap: 2,
-
+    alignItems: 'center',
-  color: cssVarV2('text/primary'),
+    justifyContent: 'start',
-  fontSize: 20,
+    color: cssVarV2('text/primary'),
-  lineHeight: '25px',
+  },
-  letterSpacing: -0.45,
+]);
-  fontWeight: 400,
-});
 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({
+export const itemContent = style([
-  overflow: 'hidden',
+  bodyRegular,
-  textOverflow: 'ellipsis',
+  {
-  whiteSpace: 'nowrap',
+    overflow: 'hidden',
-  alignItems: 'center',
+    textOverflow: 'ellipsis',
-  flex: 1,
+    whiteSpace: 'nowrap',
-  color: cssVarV2('text/primary'),
+    alignItems: 'center',
-
+    flex: 1,
-  fontSize: 17,
+    color: cssVarV2('text/primary'),
-  lineHeight: '22px',
+  },
-  letterSpacing: -0.43,
+]);
-  fontWeight: 400,
-});
 
 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({
+export const desc = style([
-  padding: '11px 16px',
+  bodyRegular,
-  fontSize: 17,
+  {
-  fontWeight: 400,
+    padding: '11px 16px',
-  lineHeight: '22px',
+    color: cssVarV2('text/secondary'),
-  letterSpacing: -0.43,
+  },
-  color: cssVarV2('text/secondary'),
+]);
-});
 export const doneWrapper = style({
   width: '100%',
   padding: '8px 16px',
 });
-export const done = style({
+export const done = style([
-  width: '100%',
+  bodyRegular,
-  height: 44,
+  {
-  borderRadius: 8,
+    width: '100%',
-  fontSize: 17,
+    borderRadius: 8,
-  fontWeight: 400,
+  },
-});
+]);

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({
+export const title = style([
-  fontSize: 17,
+  bodyEmphasized,
-  fontWeight: 600,
+  {
-  lineHeight: '22px',
+    color: cssVarV2('text/primary'),
-  letterSpacing: -0.43,
+  },
-  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({
+export const input = style([
-  padding: '11px 8px 11px 36px',
+  bodyRegular,
-  width: '100%',
+  {
-  height: '100%',
+    padding: '11px 8px 11px 36px',
-  outline: 'none',
+    width: '100%',
-  border: 'none',
+    height: '100%',
-
+    outline: 'none',
-  fontWeight: 400,
+    border: 'none',
-  fontSize: 17,
+  },
-  lineHeight: '22px',
+]);
-  letterSpacing: -0.43,
-});
 
 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({
+export const content = style([
-  width: 0,
+  bodyRegular,
-  flex: 1,
+  {
-  fontSize: 17,
+    width: 0,
-  lineHeight: '22px',
+    flex: 1,
-  fontWeight: 400,
+    color: cssVarV2('text/primary'),
-  letterSpacing: -0.43,
+    textOverflow: 'ellipsis',
-  color: cssVarV2('text/primary'),
+    whiteSpace: 'nowrap',
-
+    overflow: 'hidden',
-  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({
+export const label = style([
-  display: 'flex',
+  bodyEmphasized,
-  gap: 4,
+  {
-
+    display: 'flex',
-  fontSize: 17,
+    gap: 4,
-  fontWeight: 600,
+    color: cssVarV2('text/primary'),
-  lineHeight: '22px',
+  },
-  color: cssVarV2('text/primary'),
+]);
-  letterSpacing: -0.43,
-});
 
 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({
+export const head = style([
-  display: 'flex',
+  bodyEmphasized,
-  alignItems: 'center',
+  {
-  justifyContent: 'space-between',
+    display: 'flex',
-  gap: 4,
+    alignItems: 'center',
-  padding: '10px 16px',
+    justifyContent: 'space-between',
-  fontSize: 17,
+    gap: 4,
-  fontWeight: 600,
+    padding: '10px 16px',
-  lineHeight: '22px',
+    color: cssVarV2('text/primary'),
-  letterSpacing: -0.43,
+  },
-  color: cssVarV2('text/primary'),
+]);
-});
 export const body = style({
   overflowY: 'auto',
   flexShrink: 0,
   flex: 1,
 });
 export const wsList = style({});
-export const wsListTitle = style({
+export const wsListTitle = style([
-  padding: '6px 16px',
+  footnoteRegular,
-  fontSize: 13,
+  {
-  lineHeight: '18px',
+    padding: '6px 16px',
-  letterSpacing: -0.08,
+    color: cssVar('textSecondaryColor'),
-  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({
+export const wsName = style([
-  width: 0,
+  bodyRegular,
-  flex: 1,
+  {
-  textOverflow: 'ellipsis',
+    width: 0,
-  whiteSpace: 'nowrap',
+    flex: 1,
-  overflow: 'hidden',
+    textOverflow: 'ellipsis',
-  fontSize: 17,
+    whiteSpace: 'nowrap',
-  lineHeight: '22px',
+    overflow: 'hidden',
-  letterSpacing: -0.43,
+    textAlign: 'left',
-  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({
+export const headerTitle = style([
-  fontSize: 17,
+  bodyEmphasized,
-  fontWeight: 600,
+  {
-  letterSpacing: -0.43,
+    color: cssVarV2('text/primary'),
-  lineHeight: '22px',
+  },
-  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({
+export const listItemLabel = style([
-  fontWeight: 400,
+  bodyRegular,
-  fontSize: 17,
+  {
-  lineHeight: '22px',
+    color: cssVarV2('text/primary'),
-  letterSpacing: -0.43,
+    whiteSpace: 'nowrap',
-  color: cssVarV2('text/primary'),
+    overflow: 'hidden',
-  whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
-  overflow: 'hidden',
+    width: 0,
-  textOverflow: 'ellipsis',
+    flex: 1,
-  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({
+export const changedInfo = style([
-  fontSize: 15,
+  subHeadlineRegular,
-  fontWeight: 400,
+  {
-  letterSpacing: -0.23,
+    color: cssVarV2('text/primary'),
-  lineHeight: '20px',
+    height: 20,
-  color: cssVarV2('text/primary'),
+  },
-  height: 20,
+]);
-});
+export const totalInfo = style([
-export const totalInfo = style({
+  footnoteRegular,
-  fontSize: 13,
+  {
-  fontWeight: 400,
+    color: cssVarV2('text/tertiary'),
-  letterSpacing: -0.08,
+    height: 18,
-  lineHeight: '18px',
+  },
-  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({
+export const label = style([
-  fontSize: 17,
+  bodyRegular,
-  lineHeight: '22px',
+  { color: cssVarV2('text/placeholder') },
-  fontWeight: 400,
+]);
-  letterSpacing: -0.43,
-  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({
+export const title = style([
-  padding: '0px 8px',
+  footnoteRegular,
-  color: cssVarV2('text/tertiary'),
+  {
-  fontSize: 13,
+    padding: '0px 8px',
-  lineHeight: '18px',
+    color: cssVarV2('text/tertiary'),
-  letterSpacing: -0.08,
+  },
-  fontWeight: 400,
+]);
-});
 
 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({
+export const pageTitle = style([bodyEmphasized]);
-  fontSize: 17,
-  lineHeight: '22px',
-  fontWeight: 600,
-  letterSpacing: -0.43,
-});
 
 export const root = style({
   padding: '24px 16px',
@@ -22,16 +18,14 @@ export const baseSettingItem = style({
   gap: 32,
   padding: '8px 0',
 });
-export const baseSettingItemName = style({
+export const baseSettingItemName = style([
-  fontSize: 17,
+  bodyRegular,
-  lineHeight: '22px',
+  {
-  letterSpacing: -0.43,
+    color: cssVarV2('text/primary'),
-  fontWeight: 400,
+    flexShrink: 0,
-  color: cssVarV2('text/primary'),
+    whiteSpace: 'nowrap',
-
+  },
-  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({
+export const title = style([bodyRegular, { color: cssVarV2('text/primary') }]);
-  fontSize: 17,
-  lineHeight: '22px',
-  fontWeight: 400,
-  letterSpacing: -0.43,
-  color: cssVarV2('text/primary'),
-});
 
-export const caption = style({
+export const caption = style([
-  fontSize: 15,
+  subHeadlineRegular,
-  lineHeight: '20px',
+  { color: cssVarV2('text/secondary') },
-  fontWeight: 400,
+]);
-  letterSpacing: -0.23,
-  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({
+export const progressName = style([
-  fontSize: 17,
+  bodyRegular,
-  lineHeight: '22px',
+  { color: cssVarV2('text/primary') },
-  letterSpacing: -0.43,
+]);
-  color: cssVarV2('text/primary'),
+export const progressDesc = style([
-});
+  caption1Regular,
-export const progressDesc = style({
+  { color: cssVarV2('text/secondary') },
-  fontSize: 12,
+]);
-  lineHeight: '16px',
-  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({
+export const headerContent = style([
-  display: 'flex',
+  bodyEmphasized,
-  alignItems: 'center',
+  {
-  gap: 8,
+    display: 'flex',
-
+    alignItems: 'center',
-  fontSize: 17,
+    gap: 8,
-  fontWeight: 600,
+    color: cssVarV2('text/primary'),
-  lineHeight: '22px',
+  },
-  letterSpacing: -0.43,
+]);
-  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({
+export const name = style([
-  width: 0,
+  bodyEmphasized,
-  flex: 1,
+  {
-
+    width: 0,
-  overflow: 'hidden',
+    flex: 1,
-  textOverflow: 'ellipsis',
+    overflow: 'hidden',
-  whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
-
+    whiteSpace: 'nowrap',
-  color: cssVarV2('text/primary'),
+    color: cssVarV2('text/primary'),
-  fontSize: 17,
+  },
-  fontWeight: 600,
+]);
-  lineHeight: '24px',
-  letterSpacing: -0.43,
-});
 
 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({
+export const head = style([
-  padding: '10px 20px',
+  bodyEmphasized,
-  fontSize: 17,
+  {
-  fontWeight: 600,
+    padding: '10px 20px',
-  lineHeight: '22px',
+    color: cssVarV2('text/primary'),
-  letterSpacing: -0.43,
+  },
-  color: cssVarV2('text/primary'),
+]);
-});
 
-export const item = style({
+export const item = style([
-  display: 'flex',
+  bodyRegular,
-  justifyContent: 'space-between',
+  {
-  alignItems: 'center',
+    display: 'flex',
-  gap: 4,
+    justifyContent: 'space-between',
-  height: 34,
+    alignItems: 'center',
-  padding: '0 20px',
+    gap: 4,
-
+    height: 34,
-  fontSize: 17,
+    padding: '0 20px',
-  lineHeight: '22px',
+  },
-  fontWeight: 400,
+]);
-  letterSpacing: -0.43,
-});
 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({
+export const headerContent = style([
-  fontSize: 17,
+  bodyEmphasized,
-  fontWeight: 600,
+  {
-  lineHeight: '22px',
+    color: cssVarV2('text/primary'),
-  letterSpacing: -0.43,
+    whiteSpace: 'nowrap',
-  color: cssVarV2('text/primary'),
+    textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
+    overflow: 'hidden',
-  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({
+export const content = style([
-  width: 0,
+  bodyEmphasized,
-  flex: 1,
+  {
-
+    width: 0,
-  overflow: 'hidden',
+    flex: 1,
-  textOverflow: 'ellipsis',
+    overflow: 'hidden',
-  whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
-
+    whiteSpace: 'nowrap',
-  color: cssVarV2('text/primary'),
+    color: cssVarV2('text/primary'),
-  fontSize: 17,
+  },
-  fontWeight: 600,
+]);
-  lineHeight: '24px',
-  letterSpacing: -0.43,
-});
 
 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({
+export const resTitle = style([
-  padding: '6px 16px',
+  footnoteRegular,
-  marginBottom: 8,
+  {
-  height: 30,
+    padding: '6px 16px',
-
+    marginBottom: 8,
-  fontSize: 13,
+    height: 30,
-  lineHeight: '18px',
+    color: cssVarV2('text/secondary'),
-  fontWeight: 400,
+  },
-  letterSpacing: -0.08,
+]);
-
-  color: cssVarV2('text/secondary'),
-});
 
 export const resBlock = style({
   paddingBottom: 32,
@@ -26,14 +24,13 @@ export const resBlock = style({
     },
   },
 });
-export const resBlockTitle = style({
+export const resBlockTitle = style([
-  padding: '0 16px',
+  title3Regular,
-  fontSize: 20,
+  {
-  lineHeight: '25px',
+    padding: '0 16px',
-  fontWeight: 400,
+    color: cssVarV2('text/primary'),
-  letterSpacing: -0.45,
+  },
-  color: cssVarV2('text/primary'),
+]);
-});
 const resBlockContent = style({
   padding: '12px 0px',
 });
@@ -64,11 +61,10 @@ export const docCard = style({
   flexShrink: 0,
 });
 
-export const empty = style({
+export const empty = style([
-  padding: '0 16px',
+  title3Regular,
-  fontSize: 20,
+  {
-  fontWeight: 400,
+    padding: '0 16px',
-  lineHeight: '25px',
+    color: cssVarV2('text/primary'),
-  letterSpacing: -0.45,
+  },
-  color: cssVarV2('text/primary'),
+]);
-});

yarn.lock

@@ -352,7 +352,7 @@ __metadata:
     "@storybook/react": "npm:^8.2.9"
     "@storybook/react-vite": "npm:^8.2.9"
     "@testing-library/react": "npm:^16.0.0"
-    "@toeverything/theme": "npm:^1.0.11"
+    "@toeverything/theme": "npm:^1.0.16"
     "@types/react": "npm:^18.2.75"
     "@types/react-dom": "npm:^18.2.24"
     "@vanilla-extract/css": "npm:^1.14.2"
@@ -430,7 +430,7 @@ __metadata:
     "@radix-ui/react-toolbar": "npm:^1.0.4"
     "@sentry/react": "npm:^8.0.0"
     "@testing-library/react": "npm:^16.0.0"
-    "@toeverything/theme": "npm:^1.0.11"
+    "@toeverything/theme": "npm:^1.0.16"
     "@types/animejs": "npm:^3.1.12"
     "@types/bytes": "npm:^3.1.4"
     "@types/image-blob-reduce": "npm:^4.1.4"
@@ -13420,10 +13420,10 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@toeverything/theme@npm:^1.0.11, @toeverything/theme@npm:^1.0.15":
+"@toeverything/theme@npm:^1.0.15, @toeverything/theme@npm:^1.0.16":
-  version: 1.0.15
+  version: 1.0.16
-  resolution: "@toeverything/theme@npm:1.0.15"
+  resolution: "@toeverything/theme@npm:1.0.16"
-  checksum: 10/3588d127a7878706f8f7fb978a571a87193185618f6b6a0cc6b405d0552137c489ba90b9bc2e3b416b19da8872180b6033b1df761927689e45434f2da8988d64
+  checksum: 10/ce4b05c976f921f14641c8078f918e60168bd1ca0604f439c8f61b4feab61958f4808fa72ef9f510093cac5f365c1b59715600693f04d5caf8ff65f61318faee
   languageName: node
   linkType: hard