Skip to content

Inconsistent font-size token usage in dialog and accordion #873

Description

@ravisuhag

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions