raystack / raystack/apsara

Inconsistent font-size token usage in dialog and accordion

Open Beginner friendly
#873 0 comments 0 reactions 0 assignees View on GitHub

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-regular so content is not smaller than its trigger.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.