48 lines
2.4 KiB
Markdown
48 lines
2.4 KiB
Markdown
# Compact application design
|
|
|
|
The UI package now uses a quiet neutral canvas, compact application headings,
|
|
consistent controls, and layered charcoal surfaces in dark mode. Marketing
|
|
display typography remains available through Hero and MarketingSectionHeader.
|
|
|
|
## Shared defaults
|
|
|
|
- Control heights: 32px small, 40px default, 44px large; larger targets on coarse pointers.
|
|
- Corners: 6px controls, 10px panels, 12px dialogs.
|
|
- Flat cards and metric panels, with elevation reserved for overlays and explicit variants.
|
|
- No global entry animation or automatic hover lift on every button and linked article.
|
|
- PageHeader and SectionHeader use application-scale headings.
|
|
- DatePicker aligns days to weekdays, respects month length and date bounds, and supports arrow keys and Escape.
|
|
|
|
Configure `radius-sm`, `radius-md`, `radius-lg`, `control-height-sm`,
|
|
`control-height`, `control-height-lg`, `space-panel`, and the existing semantic
|
|
color/shadow tokens through `theme.themes`. Geometry and elevation are no longer
|
|
overwritten by a second global token declaration in the generated stylesheet.
|
|
Existing names, slots, and events remain available. MetricCard's default hover
|
|
is now `none`; use `hover="lift"` to retain the explicit elevated treatment.
|
|
|
|
## Review pages
|
|
|
|
Run the component showcase and open:
|
|
|
|
- `/design-system`: composed workspace overview and invitation dialog.
|
|
- `/design-system/profile`: profile form and preferences.
|
|
- `/design-system/login`: quiet split sign-in layout.
|
|
- `/components/date-picker`: calendar variants and controls.
|
|
|
|
The preview uses sample data and never sends invitations or sign-in requests.
|
|
Light and dark buttons use the native theme stylesheet switcher. The showcase
|
|
generator preserves the navigation link; these three authored pages are not
|
|
generated or overwritten by it.
|
|
|
|
## Adopting the refresh
|
|
|
|
Consumers receive the shared component styles and theme defaults when they adopt
|
|
the updated packages. Review application overrides for large headings, nested
|
|
cards, generous gaps, and hard-coded colors. The example showcase, CRM, and basic
|
|
application styles have been adjusted here. The deployed Account application's
|
|
page source is outside this repository and still needs its own layout migration.
|
|
|
|
Validate light/dark, narrow viewports, keyboard interaction, long text, and custom
|
|
theme overrides before refreshing the visual-contract baseline. That contract
|
|
is a file-hash check, not screenshot comparison.
|