Inconsistent font-size token usage in dialog and accordion
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 70
- Forks
- 13
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 8
Description
Summary
Apsara has a mostly consistent typography rule:
--rs-font-size-small(12px) for UI controls and chrome (buttons, inputs, menus, selects, labels, table headers)--rs-font-size-regular(14px) for readable content (table cells, data-view list cells, drawer description, empty-state subheader)
Two components break this rule.
Inconsistencies
1. Dialog description vs drawer description
Both components use a large title, but their descriptions differ:
dialog.module.css— description uses--rs-font-size-small(12px)drawer.module.css— description uses--rs-font-size-regular(14px)
These are similar surfaces and should use the same body size.
2. Accordion content smaller than its trigger
- Trigger uses
--rs-font-size-regular(14px) - Content inside uses
--rs-font-size-small(12px)
The body text is smaller than its own header, and smaller than body text elsewhere (table cells, drawer description).
Suggested fix
- Align dialog description with drawer description (pick one — likely regular, since descriptions are readable content).
- Change accordion content to
--rs-font-size-regularso content is not smaller than its trigger.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the typography rules in dialog.module.css and drawer.module.css, then locate the accordion styles and review its trigger and content tokens. Align the dialog description with the chosen drawer description size and make accordion content use the regular token; the relevant component styling checks should confirm the changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 78/100