Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Inconsistent font-size token usage in dialog and accordion

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

Maintainers usually reply within 1 day

Nobody has claimed this yet.

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
78/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Quiet
Tech stack
css, react, typescript
Domain
design, frontend

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.

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.
Dominant language
TypeScript
Stars
70
Forks
13
Avg merge
8d 56m
Merged PRs (30d)
16

Getting set up

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.

More from raystack/apsara

All issues in raystack/apsara

Similar issues

More TypeScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.