From 15749def2a12d5d3599e9c1bdc22b8ff952f5010 Mon Sep 17 00:00:00 2001 From: CatsJuice Date: Tue, 5 Nov 2024 03:48:26 +0000 Subject: [PATCH] chore: bump theme version, replace all typography in mobile (#8701) --- packages/frontend/component/package.json | 2 +- packages/frontend/core/package.json | 2 +- .../mobile/components/doc-card/styles.css.tsx | 42 +++++------ .../layouts/add-item-placeholder.css.ts | 8 +-- .../layouts/collapsible-section.css.ts | 25 ++++--- .../components/explorer/tree/node.css.ts | 25 ++++--- .../mobile/components/rename/content.css.ts | 30 ++++---- .../mobile/components/rename/dialog.css.ts | 14 ++-- .../components/search-input/style.css.ts | 23 +++--- .../search-result/universal-item.css.ts | 25 ++++--- .../components/workspace-selector/card.css.ts | 19 +++-- .../components/workspace-selector/menu.css.ts | 64 +++++++++-------- .../mobile/dialogs/selectors/generic.css.ts | 72 ++++++++++--------- .../dialogs/setting/dropdown-select.css.ts | 12 ++-- .../src/mobile/dialogs/setting/group.css.ts | 16 ++--- .../src/mobile/dialogs/setting/style.css.ts | 26 +++---- .../dialogs/setting/user-profile/style.css.ts | 23 +++--- .../dialogs/setting/user-usage/style.css.ts | 20 +++--- .../views/all-docs/collection/detail.css.ts | 21 +++--- .../views/all-docs/collection/styles.css.ts | 26 ++++--- .../src/mobile/views/all-docs/doc/menu.css.ts | 40 +++++------ .../mobile/views/all-docs/tag/detail.css.ts | 20 +++--- .../mobile/views/all-docs/tag/styles.css.ts | 26 ++++--- .../core/src/mobile/views/search/style.css.ts | 52 +++++++------- yarn.lock | 12 ++-- 25 files changed, 308 insertions(+), 337 deletions(-) diff --git a/packages/frontend/component/package.json b/packages/frontend/component/package.json index bf7d45797..b62eaee7d 100644 --- a/packages/frontend/component/package.json +++ b/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", diff --git a/packages/frontend/core/package.json b/packages/frontend/core/package.json index 7a977d000..fc980b245 100644 --- a/packages/frontend/core/package.json +++ b/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", diff --git a/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx b/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx index f3dc3a6c4..d2b562b05 100644 --- a/packages/frontend/core/src/mobile/components/doc-card/styles.css.tsx +++ b/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, diff --git a/packages/frontend/core/src/mobile/components/explorer/layouts/add-item-placeholder.css.ts b/packages/frontend/core/src/mobile/components/explorer/layouts/add-item-placeholder.css.ts index 50f6e4da2..845019df1 100644 --- a/packages/frontend/core/src/mobile/components/explorer/layouts/add-item-placeholder.css.ts +++ b/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]); diff --git a/packages/frontend/core/src/mobile/components/explorer/layouts/collapsible-section.css.ts b/packages/frontend/core/src/mobile/components/explorer/layouts/collapsible-section.css.ts index f6b0d6900..40b82dbe5 100644 --- a/packages/frontend/core/src/mobile/components/explorer/layouts/collapsible-section.css.ts +++ b/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'), diff --git a/packages/frontend/core/src/mobile/components/explorer/tree/node.css.ts b/packages/frontend/core/src/mobile/components/explorer/tree/node.css.ts index d8b465a5e..b420d5a26 100644 --- a/packages/frontend/core/src/mobile/components/explorer/tree/node.css.ts +++ b/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', diff --git a/packages/frontend/core/src/mobile/components/rename/content.css.ts b/packages/frontend/core/src/mobile/components/rename/content.css.ts index 1e7de0ff0..bacafcb48 100644 --- a/packages/frontend/core/src/mobile/components/rename/content.css.ts +++ b/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, + }, +]); diff --git a/packages/frontend/core/src/mobile/components/rename/dialog.css.ts b/packages/frontend/core/src/mobile/components/rename/dialog.css.ts index fe0994c03..d73f41d46 100644 --- a/packages/frontend/core/src/mobile/components/rename/dialog.css.ts +++ b/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'), + }, +]); diff --git a/packages/frontend/core/src/mobile/components/search-input/style.css.ts b/packages/frontend/core/src/mobile/components/search-input/style.css.ts index 3fce6dc68..897cccad9 100644 --- a/packages/frontend/core/src/mobile/components/search-input/style.css.ts +++ b/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, diff --git a/packages/frontend/core/src/mobile/components/search-result/universal-item.css.ts b/packages/frontend/core/src/mobile/components/search-result/universal-item.css.ts index 2a59fdad1..f0cd01d92 100644 --- a/packages/frontend/core/src/mobile/components/search-result/universal-item.css.ts +++ b/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'), }); diff --git a/packages/frontend/core/src/mobile/components/workspace-selector/card.css.ts b/packages/frontend/core/src/mobile/components/workspace-selector/card.css.ts index f125c5f38..927b78746 100644 --- a/packages/frontend/core/src/mobile/components/workspace-selector/card.css.ts +++ b/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, diff --git a/packages/frontend/core/src/mobile/components/workspace-selector/menu.css.ts b/packages/frontend/core/src/mobile/components/workspace-selector/menu.css.ts index c49ae7121..ff00fadea 100644 --- a/packages/frontend/core/src/mobile/components/workspace-selector/menu.css.ts +++ b/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', + }, +]); diff --git a/packages/frontend/core/src/mobile/dialogs/selectors/generic.css.ts b/packages/frontend/core/src/mobile/dialogs/selectors/generic.css.ts index 9de164702..9c7cfe046 100644 --- a/packages/frontend/core/src/mobile/dialogs/selectors/generic.css.ts +++ b/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', diff --git a/packages/frontend/core/src/mobile/dialogs/setting/dropdown-select.css.ts b/packages/frontend/core/src/mobile/dialogs/setting/dropdown-select.css.ts index 11d4ec9aa..7a55719be 100644 --- a/packages/frontend/core/src/mobile/dialogs/setting/dropdown-select.css.ts +++ b/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'), diff --git a/packages/frontend/core/src/mobile/dialogs/setting/group.css.ts b/packages/frontend/core/src/mobile/dialogs/setting/group.css.ts index 4850a7b22..e2c817750 100644 --- a/packages/frontend/core/src/mobile/dialogs/setting/group.css.ts +++ b/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'), diff --git a/packages/frontend/core/src/mobile/dialogs/setting/style.css.ts b/packages/frontend/core/src/mobile/dialogs/setting/style.css.ts index 436b6c5d9..0b141b619 100644 --- a/packages/frontend/core/src/mobile/dialogs/setting/style.css.ts +++ b/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, { diff --git a/packages/frontend/core/src/mobile/dialogs/setting/user-profile/style.css.ts b/packages/frontend/core/src/mobile/dialogs/setting/user-profile/style.css.ts index f6b9d3595..ea7e71315 100644 --- a/packages/frontend/core/src/mobile/dialogs/setting/user-profile/style.css.ts +++ b/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, diff --git a/packages/frontend/core/src/mobile/dialogs/setting/user-usage/style.css.ts b/packages/frontend/core/src/mobile/dialogs/setting/user-usage/style.css.ts index 3829f1b59..aa10e1845 100644 --- a/packages/frontend/core/src/mobile/dialogs/setting/user-usage/style.css.ts +++ b/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, diff --git a/packages/frontend/core/src/mobile/views/all-docs/collection/detail.css.ts b/packages/frontend/core/src/mobile/views/all-docs/collection/detail.css.ts index cbb2f6fe3..5f1aaf922 100644 --- a/packages/frontend/core/src/mobile/views/all-docs/collection/detail.css.ts +++ b/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, diff --git a/packages/frontend/core/src/mobile/views/all-docs/collection/styles.css.ts b/packages/frontend/core/src/mobile/views/all-docs/collection/styles.css.ts index 8f17f746d..2c16352fd 100644 --- a/packages/frontend/core/src/mobile/views/all-docs/collection/styles.css.ts +++ b/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]); diff --git a/packages/frontend/core/src/mobile/views/all-docs/doc/menu.css.ts b/packages/frontend/core/src/mobile/views/all-docs/doc/menu.css.ts index 06f185761..9a0dafe72 100644 --- a/packages/frontend/core/src/mobile/views/all-docs/doc/menu.css.ts +++ b/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, diff --git a/packages/frontend/core/src/mobile/views/all-docs/tag/detail.css.ts b/packages/frontend/core/src/mobile/views/all-docs/tag/detail.css.ts index 5d617307e..cdc291364 100644 --- a/packages/frontend/core/src/mobile/views/all-docs/tag/detail.css.ts +++ b/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, diff --git a/packages/frontend/core/src/mobile/views/all-docs/tag/styles.css.ts b/packages/frontend/core/src/mobile/views/all-docs/tag/styles.css.ts index 148585a60..ff2206995 100644 --- a/packages/frontend/core/src/mobile/views/all-docs/tag/styles.css.ts +++ b/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, diff --git a/packages/frontend/core/src/mobile/views/search/style.css.ts b/packages/frontend/core/src/mobile/views/search/style.css.ts index 456ada42e..3123021be 100644 --- a/packages/frontend/core/src/mobile/views/search/style.css.ts +++ b/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'), + }, +]); diff --git a/yarn.lock b/yarn.lock index 0ce899c67..f663554b6 100644 --- a/yarn.lock +++ b/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": - version: 1.0.15 - resolution: "@toeverything/theme@npm:1.0.15" - checksum: 10/3588d127a7878706f8f7fb978a571a87193185618f6b6a0cc6b405d0552137c489ba90b9bc2e3b416b19da8872180b6033b1df761927689e45434f2da8988d64 +"@toeverything/theme@npm:^1.0.15, @toeverything/theme@npm:^1.0.16": + version: 1.0.16 + resolution: "@toeverything/theme@npm:1.0.16" + checksum: 10/ce4b05c976f921f14641c8078f918e60168bd1ca0604f439c8f61b4feab61958f4808fa72ef9f510093cac5f365c1b59715600693f04d5caf8ff65f61318faee languageName: node linkType: hard