50 lines
2.7 KiB
Markdown
50 lines
2.7 KiB
Markdown
# UI Style Guide
|
||
|
||
Use the post editor as the visual reference for every screen. New UI must feel like part of the same application in both the sidebar and editor area.
|
||
|
||
## Source of truth
|
||
|
||
- Reuse the primitives in `crates/bds-ui/src/components/inputs.rs`.
|
||
- Reuse the code-editor theme in `crates/bds-editor/src/widget.rs`.
|
||
- Follow `crates/bds-ui/src/views/post_editor.rs` for editor hierarchy and spacing.
|
||
- Extend a shared primitive when several screens need the same treatment; do not copy color or border closures into each view.
|
||
|
||
## Layout
|
||
|
||
- Use 16 px outer editor padding and 8–12 px spacing between groups.
|
||
- Put the editor header, metadata, summaries, previews, and content editors on `inputs::card` surfaces.
|
||
- Use `inputs::toolbar` for content modes and related actions.
|
||
- Use `inputs::disclosure_button` inside a compact card for collapsible sections. Expanded content belongs in a separate card directly below it.
|
||
- Keep sidebars visually quieter than editor content. Sidebar rows use 6 px corner radii, 5×8 px padding, and a distinct selected state.
|
||
- Avoid separators and boxes when spacing or a shared surface already communicates the grouping.
|
||
|
||
## Controls
|
||
|
||
- Text fields use `inputs::labeled_input` or `inputs::field_style`.
|
||
- Selects use `inputs::labeled_select`; multiline fields use `inputs::text_editor_style`.
|
||
- Primary actions use `inputs::primary_button`, secondary actions use `inputs::secondary_button`, and destructive actions use `inputs::danger_button`.
|
||
- Controls have 6 px corner radii; cards use 10 px; chips and badges may use pill radii.
|
||
- Keep one visually dominant primary action per action group.
|
||
- Put infrequent operations in Quick Actions instead of adding buttons to metadata forms.
|
||
- Do not use Iced's default field or button styling in application screens.
|
||
|
||
## Editor consistency
|
||
|
||
Every entity editor should have the same order:
|
||
|
||
1. Header card with title/status and actions.
|
||
2. Metadata card or collapsible metadata section.
|
||
3. Content toolbar when the content has modes or insertion actions.
|
||
4. Content editor or preview card that receives the remaining height.
|
||
5. Validation and timestamps as quiet supporting information.
|
||
|
||
Labels, placeholders, actions, empty states, and status text must use the UI localization system.
|
||
|
||
## Before merging UI work
|
||
|
||
- Compare the changed screen with the post editor at the same window size.
|
||
- Check its sidebar as well as its editor area.
|
||
- Check collapsed and expanded disclosures, hover/focus states, empty states, and disabled actions.
|
||
- Check media, script, template, Settings, and Tags screens when changing a shared primitive.
|
||
- Run `cargo test --workspace`, `cargo build --workspace`, and visually inspect the macOS app bundle.
|