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

This commit is contained in:
CatsJuice
2024-11-05 03:48:26 +00:00
parent 902635e60f
commit 15749def2a
25 changed files with 308 additions and 337 deletions
+1 -1
View File
@@ -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",
+1 -1
View File
@@ -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",
@@ -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,
@@ -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]);
@@ -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'),
@@ -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',
@@ -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,
},
]);
@@ -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'),
},
]);
@@ -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,
@@ -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'),
});
@@ -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,
@@ -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',
},
]);
@@ -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',
@@ -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'),
@@ -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'),
@@ -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,
{
@@ -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,
@@ -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,
@@ -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,
@@ -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]);
@@ -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,
@@ -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,
@@ -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,
@@ -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'),
},
]);
+6 -6
View File
@@ -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