Hi-fi: S32 Global · Offline toast

Generated by botgumi-design index from ../../screens.json. Edit that file, not this page.

Stage: hifi · Key: global/offline · Data-binding map: bindings.md

Drawn in the gallery: Global. Each board is the committed HTML in screens/, drawn on the example data in docs/api/examples/.

#Contract

• toast: Connectivity lost: non-blocking toast; recording continues locally.

Flows: F6 Offline mid-upload.

Reads and calls:

• none

Local state:

• NWPathMonitor

#Boards

One row per state. A state without boards of its own says what shows it.

State	Board	Example data
toast	zh-Hans · en	article-long.json (zh-Hans · en), article-product.json (zh-Hans · en)
loading	no board of its own: From states.md (Global sheets): —
empty	no board of its own: From states.md (Global sheets): —
error	no board of its own: From states.md (Global sheets): — · fatal: error--generic, force-update--default
offline	no board of its own: From states.md (Global sheets): offline--toast

#The boards

Each state as drawn (393 × 852), one board per locale. Open a board on its own for its spec panel.

toast

#Tokens used

By path in ../../system/tokens.source.json.

Token	Where
color.accentPrimary	.btn--primary, .r1, .rec, .rec-btn …
color.accentPrimaryPressed	.btn--primary
color.accentPrimarySoft	.r2, .r3, .rec, .ring
color.bgCanvas	.device, .dock, .navbar, .screen
color.bgInverse	.one-action, .rec-btn, .toast
color.bgInverseRaised	.icon-btn, .one-action
color.bgSunken	.btn, .icon-btn, .rec, .rec-btn
color.bgSurface	.rec, .rec-btn
color.lineHairline	.progress-hair
color.lineStrong	.r1, .r2, .r3, .rec …
color.reward	.oa-head, .one-action
color.textDisabled	.btn, .rec, .rec-btn
color.textOnAccent	.btn--primary
color.textOnInverse	.icon-btn, .one-action, .rec-btn, .toast
color.textOnInverseSecondary	.c-on-inverse-2
color.textPrimary	.device, .home-indicator, .icon-btn, .progress-hair …
color.textSecondary	.c-secondary
color.textTertiary	.c-tertiary, .step-count, .timer-max, .wave
color.topicGreen	.tag--green
color.topicGreenSoft	.tag--green
radius.button	.btn
radius.lg	.one-action
radius.pill	.round-chip, .toast
radius.sm	.one-action
space.gutter	.dock, .navbar, .pad
space.s6	.screen
space.safeBottom	.dock, .has-dock, .screen
space.safeTop	.device, .screen
space.sizeCtaHeight	.btn, .has-dock, .screen
space.sizeHitMin	.icon-btn
space.sizeNavbarHeight	.navbar
space.sizeRecordButton	.rec-btn
space.sizeRecordRing	.rec
space.sizeTabbarHeight	.screen
typography.footnote	.t-footnote
typography.headline	.t-headline
typography.subheadline	.t-subhead
typography.timer	.t-timer
typography.title1	.t-title1

#Strings

app.name, common.back, common.step_of.a11y, complete.ba.second, complete.xp.round2, home.greeting.format, notif.daily.title, onboarding.progress.a11y, onboarding.welcome.illo.again, paywall.projection.score, record.advice.label, record.button.start, record.chip.round2, record.cta.caption, record.cta.round2, record.hint.idle, record.nav.round2, record.sub.round2, record.title.round2, toast.offline

#Notes for the app tracks

Motion, haptics, Dynamic Type and VoiceOver: engagement.md, tokens.md §6–7 and ios-handoff.md. Open a board with ?theme=dark&dt=1.35&binds=1 to see dark mode, the largest tested type size and every bound element.

Tracking-plan events: no tracking plan page exists yet; ADR-001 D12 names the events.

Tokens with no group in system/tokens.source.json yet (they stay in tokens.css): --dt, --elevation-2, --elevation-3, --elevation-record, --font-family-numeric, --font-family-reading, --font-family-text, --font-weight-bold, --font-weight-heavy, --font-weight-regular, --font-weight-semibold, --motion-breath, --motion-duration-base, --motion-duration-fast, --motion-duration-instant, --motion-duration-slow, --motion-ease-emphasized, --motion-ease-spring, --motion-ease-standard, --type-tracking-tight.