Skip to content

fix(index.css,Tooltip): CSS tokens undocumented in file, color-scheme dark missing causing light scrollbars, no Tooltip component despite Radix dep #406

Description

@k-deejah

Problem

1. index.css uses CSS custom properties for tokens but none are documented with their intended usage context — tokens like --color-ink-3, --color-surface-2, and --color-line-2 exist but a developer adding a new component doesn't know when to use ink-3 vs ink-4, or surface vs surface-2. No visual reference or usage guide exists.

2. index.css does not define color-scheme: dark on :root — without this declaration, browser UI elements (scrollbars, form controls, <select> dropdowns) render in light mode even though the app is dark-themed. On Chrome/Edge, this causes a jarring white scrollbar against a dark background.

3. The library has no Tooltip component despite @radix-ui/react-tooltip being in package.jsontitle attributes are used for tooltips throughout the codebase (e.g. FeeEstimator refresh button, AddressDisplay, InfoCell). Native title tooltips are inaccessible on mobile, delayed on desktop, and unstyled. A proper Tooltip component should replace all title usages.

Solution

  1. Add a /* Design Token Reference */ comment block in index.css with a table of each token, its value, and intended use case.
  2. Add color-scheme: dark to the :root selector in index.css.
  3. Create src/components/ui/Tooltip.tsx using @radix-ui/react-tooltip, exported from index.ts, and replace key title usages in FeeEstimator and AddressDisplay.

Acceptance Criteria

  • index.css has a token reference comment block
  • Browser scrollbars and form controls render in dark mode
  • Tooltip component exported from "sorokit-ui"
  • FeeEstimator refresh button and AddressDisplay copy button use Tooltip instead of title
  • npm run build passes

Note for Contributors: Write a clear PR description. Include a screenshot of the dark scrollbar after adding color-scheme: dark, and a screenshot of the styled Tooltip in action.

Metadata

Metadata

Assignees

Labels

Stellar WaveIssues in the Stellar wave programenhancementNew feature or request

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions