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

View File

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

View File

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

View File

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

View File

@@ -1,3 +1,4 @@
import { bodyRegular } from '@toeverything/theme/typography';
import { cssVarV2 } from '@toeverything/theme/v2'; import { cssVarV2 } from '@toeverything/theme/v2';
import { style } from '@vanilla-extract/css'; 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,
});

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -1,3 +1,4 @@
import { bodyRegular } from '@toeverything/theme/typography';
import { cssVarV2 } from '@toeverything/theme/v2'; import { cssVarV2 } from '@toeverything/theme/v2';
import { style } from '@vanilla-extract/css'; import { style } from '@vanilla-extract/css';
@@ -6,13 +7,10 @@ export const root = style({
alignItems: 'center', alignItems: 'center',
gap: 8, 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({ export const icon = style({
fontSize: 24, fontSize: 24,
color: cssVarV2('icon/primary'), color: cssVarV2('icon/primary'),

View File

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

View File

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

View File

@@ -1,3 +1,7 @@
import {
bodyRegular,
subHeadlineRegular,
} from '@toeverything/theme/typography';
import { cssVarV2 } from '@toeverything/theme/v2'; import { cssVarV2 } from '@toeverything/theme/v2';
import { style } from '@vanilla-extract/css'; import { style } from '@vanilla-extract/css';
@@ -29,21 +33,12 @@ const ellipsis = style({
whiteSpace: 'nowrap', 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({ export const suffixIcon = style({
fontSize: 30, fontSize: 30,

View File

@@ -1,3 +1,4 @@
import { bodyRegular, caption1Regular } from '@toeverything/theme/typography';
import { cssVarV2 } from '@toeverything/theme/v2'; import { cssVarV2 } from '@toeverything/theme/v2';
import { style } from '@vanilla-extract/css'; import { style } from '@vanilla-extract/css';
@@ -10,17 +11,14 @@ export const progressInfoRow = style({
alignItems: 'center', alignItems: 'center',
paddingBottom: 4, 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({ export const progressTrack = style({
width: '100%', width: '100%',
height: 10, height: 10,

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -352,7 +352,7 @@ __metadata:
"@storybook/react": "npm:^8.2.9" "@storybook/react": "npm:^8.2.9"
"@storybook/react-vite": "npm:^8.2.9" "@storybook/react-vite": "npm:^8.2.9"
"@testing-library/react": "npm:^16.0.0" "@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": "npm:^18.2.75"
"@types/react-dom": "npm:^18.2.24" "@types/react-dom": "npm:^18.2.24"
"@vanilla-extract/css": "npm:^1.14.2" "@vanilla-extract/css": "npm:^1.14.2"
@@ -430,7 +430,7 @@ __metadata:
"@radix-ui/react-toolbar": "npm:^1.0.4" "@radix-ui/react-toolbar": "npm:^1.0.4"
"@sentry/react": "npm:^8.0.0" "@sentry/react": "npm:^8.0.0"
"@testing-library/react": "npm:^16.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/animejs": "npm:^3.1.12"
"@types/bytes": "npm:^3.1.4" "@types/bytes": "npm:^3.1.4"
"@types/image-blob-reduce": "npm:^4.1.4" "@types/image-blob-reduce": "npm:^4.1.4"
@@ -13420,10 +13420,10 @@ __metadata:
languageName: unknown languageName: unknown
linkType: soft 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 languageName: node
linkType: hard linkType: hard