Skip to content

refactor(ui): establish semantic typography and refresh Mini Apps #2727

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kev1n77 merged 2 commits into from
Sep 2, 2026
Merged

refactor(ui): establish semantic typography and refresh Mini Apps #2727

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c91c4b6
refactor(frontend): apply semantic typography roles
kev1n77 Sep 1, 2026
585916e
feat(miniapp): refresh gallery experience
kev1n77 Sep 1, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
12 changes: 6 additions & 6 deletions BitFun-Installer/src/components/InstallErrorPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ export function InstallErrorPanel({ message, variant = 'options' }: InstallError
border: '1px solid color-mix(in srgb, var(--bf-color-border-default) 70%, transparent)',
background: 'color-mix(in srgb, var(--bf-color-surface-subtle) 80%, transparent)',
color: 'var(--bf-color-content-secondary)',
fontSize: 11,
lineHeight: 1.55,
fontSize: 'var(--bf-type-support-font-size)',
lineHeight: 'var(--bf-type-support-line-height)',
textAlign: variant === 'bare' ? 'center' : 'left',
}}
>
Expand All @@ -41,8 +41,8 @@ export function InstallErrorPanel({ message, variant = 'options' }: InstallError
<div
style={{
color: 'var(--bf-color-content-muted)',
fontSize: 12,
lineHeight: 1.6,
fontSize: 'var(--bf-type-body-xs-font-size)',
lineHeight: 'var(--bf-type-body-lg-line-height)',
textAlign: 'center',
maxWidth: 320,
}}
Expand All @@ -63,8 +63,8 @@ export function InstallErrorPanel({ message, variant = 'options' }: InstallError
border: '1px solid color-mix(in srgb, var(--bf-color-status-danger-content) 55%, transparent)',
background: 'color-mix(in srgb, var(--bf-color-status-danger-content) 10%, transparent)',
color: 'var(--bf-color-content-primary)',
fontSize: 12,
lineHeight: 1.5,
fontSize: 'var(--bf-type-body-xs-font-size)',
lineHeight: 'var(--bf-type-body-md-line-height)',
}}
>
{text}
Expand Down
21 changes: 13 additions & 8 deletions BitFun-Installer/src/pages/LanguageSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,9 +47,13 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
filter: 'drop-shadow(0 0 40px color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent))',
}} />
<h1 style={{
fontFamily: 'var(--bf-font-family-sans)', fontSize: 42, fontWeight: 700,
color: 'var(--bf-color-content-primary)', letterSpacing: '-0.03em',
lineHeight: 0.95, margin: '0 0 16px 0',
fontFamily: 'var(--bf-type-display-md-font-family)',
fontSize: 'var(--bf-type-display-md-font-size)',
fontWeight: 'var(--bf-type-heading-page-font-weight)',
color: 'var(--bf-color-content-primary)',
letterSpacing: 'var(--bf-type-display-md-letter-spacing)',
lineHeight: 'var(--bf-type-display-md-line-height)',
margin: '0 0 16px 0',
textShadow: '0 0 60px color-mix(in srgb, var(--bf-color-accent-default) 15%, transparent)',
}}>BitFun</h1>
</div>
Expand All @@ -67,10 +71,10 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
margin: '0 auto',
padding: '0 24px',
textAlign: 'center',
fontSize: 11,
fontSize: 'var(--bf-type-support-font-size)',
color: 'var(--bf-color-content-muted)',
opacity: 0.6,
letterSpacing: '0.5px',
letterSpacing: 'var(--bf-type-modifier-tracking-wider-letter-spacing)',
}}>
Version 0.2.15
</div>
Expand Down Expand Up @@ -114,7 +118,7 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
cursor: 'pointer', textAlign: 'left',
transition: 'all 0.25s ease',
outline: 'none',
fontFamily: 'var(--bf-font-family-sans)',
fontFamily: 'var(--bf-type-label-lg-font-family)',
boxShadow: 'none',
}}
onMouseEnter={(e) => {
Expand All @@ -130,12 +134,13 @@ export function LanguageSelect({ onSelect }: LanguageSelectProps) {
>
<div style={{ flex: 1 }}>
<div style={{
fontSize: 14, fontWeight: 500,
fontSize: 'var(--bf-type-label-lg-font-size)',
fontWeight: 'var(--bf-type-label-lg-font-weight)',
color: isSelected ? 'var(--bf-color-content-primary)' : 'var(--bf-color-content-secondary)',
transition: 'color 0.2s ease',
}}>{lang.nativeName}</div>
<div style={{
fontSize: 11,
fontSize: 'var(--bf-type-support-font-size)',
color: 'var(--bf-color-content-muted)', opacity: 0.7,
marginTop: 2,
}}>{lang.label}</div>
Expand Down
19 changes: 13 additions & 6 deletions BitFun-Installer/src/pages/Options.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,11 @@ export function Options({
<div className="page-shell">
<div className="page-scroll">
<div className="page-container page-container--center" style={{ maxWidth: 560 }}>
<div style={{ marginBottom: 8, fontSize: 12, color: 'var(--bf-color-content-muted)' }}>
<div style={{
marginBottom: 8,
fontSize: 'var(--bf-type-body-xs-font-size)',
color: 'var(--bf-color-content-muted)',
}}>
{t('options.subtitle')}
</div>
{existingInstall?.detected ? (
Expand All @@ -90,12 +94,15 @@ export function Options({
borderRadius: 10,
border: '1px solid color-mix(in srgb, var(--bf-color-accent-default) 45%, transparent)',
background: 'color-mix(in srgb, var(--bf-color-accent-default) 8%, transparent)',
fontSize: 12,
lineHeight: 1.55,
fontSize: 'var(--bf-type-body-xs-font-size)',
lineHeight: 'var(--bf-type-support-line-height)',
color: 'var(--bf-color-content-primary)',
}}
>
<div style={{ fontWeight: 600, marginBottom: 8 }}>{t('options.existingInstallTitle')}</div>
<div style={{
fontWeight: 'var(--bf-type-label-selected-font-weight)',
marginBottom: 8,
}}>{t('options.existingInstallTitle')}</div>
{existingInstall.displayVersion ? (
<div style={{ marginBottom: 4, wordBreak: 'break-all' }}>
{t('options.existingInstallVersion', { version: existingInstall.displayVersion })}
Expand All @@ -117,7 +124,7 @@ export function Options({
<button
type="button"
className="btn"
style={{ padding: '8px 12px', fontSize: 12 }}
style={{ padding: '8px 12px', fontSize: 'var(--bf-type-body-xs-font-size)' }}
onClick={() => {
void onLaunchRegisteredUninstaller();
}}
Expand Down Expand Up @@ -172,7 +179,7 @@ export function Options({
display: 'flex',
gap: 16,
marginTop: 8,
fontSize: 11,
fontSize: 'var(--bf-type-support-font-size)',
color: 'var(--bf-color-content-muted)',
opacity: 0.7,
flexWrap: 'wrap',
Expand Down
22 changes: 18 additions & 4 deletions BitFun-Installer/src/pages/Progress.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,19 @@ export function ProgressPage({
>
{!error ? (
<>
<p style={{ fontSize: 16, fontWeight: 600, color: 'var(--bf-color-content-primary)', marginBottom: 6 }}>
<p style={{
fontSize: 'var(--bf-type-flow-title-font-size)',
fontWeight: 'var(--bf-type-flow-title-font-weight)',
color: 'var(--bf-color-content-primary)',
marginBottom: 6,
}}>
{t('progress.title')}
</p>
<p style={{ fontSize: 12, color: 'var(--bf-color-content-muted)', marginBottom: 22 }}>
<p style={{
fontSize: 'var(--bf-type-body-xs-font-size)',
color: 'var(--bf-color-content-muted)',
marginBottom: 22,
}}>
{stepLabel}
</p>
<div style={{ width: '100%', maxWidth: 320 }}>
Expand All @@ -58,7 +67,7 @@ export function ProgressPage({
justifyContent: 'space-between',
gap: 8,
marginTop: 8,
fontSize: 11,
fontSize: 'var(--bf-type-support-font-size)',
color: 'var(--bf-color-content-muted)',
opacity: 0.7,
flexWrap: 'wrap',
Expand All @@ -84,7 +93,12 @@ export function ProgressPage({
>
<circle cx="12" cy="12" r="10" /><line x1="15" y1="9" x2="9" y2="15" /><line x1="9" y1="9" x2="15" y2="15" />
</svg>
<p style={{ fontSize: 14, fontWeight: 500, color: 'var(--bf-color-content-primary)', marginBottom: 8 }}>{t('progress.failed')}</p>
<p style={{
fontSize: 'var(--bf-type-label-lg-font-size)',
fontWeight: 'var(--bf-type-label-lg-font-weight)',
color: 'var(--bf-color-content-primary)',
marginBottom: 8,
}}>{t('progress.failed')}</p>
<InstallErrorPanel message={error} variant="bare" />
</>
)}
Expand Down
8 changes: 4 additions & 4 deletions BitFun-Installer/src/pages/ThemeSetup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
<div className="page-scroll">
<div className="page-container page-container--center" style={{ maxWidth: 760 }}>
<p style={{
fontSize: 14,
fontSize: 'var(--bf-type-body-md-font-size)',
color: 'var(--bf-color-content-secondary)',
marginBottom: 12,
}}>
Expand All @@ -98,7 +98,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
<div style={{ flex: 1, background: lightPreview.colors.background.primary }} />
<div style={{ flex: 1, background: darkPreview.colors.background.primary }} />
</div>
<div style={{ fontSize: 11, color: 'var(--bf-color-content-primary)' }}>
<div style={{ fontSize: 'var(--bf-type-support-font-size)', color: 'var(--bf-color-content-primary)' }}>
{t('themeSetup.followSystem')}
</div>
</button>
Expand All @@ -115,7 +115,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
</div>
</div>
</div>
<div style={{ fontSize: 11, color: 'var(--bf-color-content-primary)' }}>
<div style={{ fontSize: 'var(--bf-type-support-font-size)', color: 'var(--bf-color-content-primary)' }}>
{t(`themeSetup.themeNames.${theme.id}`, { defaultValue: theme.name })}
</div>
</button>
Expand All @@ -134,7 +134,7 @@ export function ThemeSetup({ options, setOptions, onLaunch, onClose }: ThemeSetu
<div style={{
color: 'var(--bf-color-status-danger-content)',
marginBottom: 12,
fontSize: 12,
fontSize: 'var(--bf-type-body-xs-font-size)',
width: '100%',
}}>
{finishError}
Expand Down
Loading
Loading