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.json — title 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
- Add a
/* Design Token Reference */ comment block in index.css with a table of each token, its value, and intended use case.
- Add
color-scheme: dark to the :root selector in index.css.
- 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
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.
Problem
1.
index.cssuses 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-2exist but a developer adding a new component doesn't know when to useink-3vsink-4, orsurfacevssurface-2. No visual reference or usage guide exists.2.
index.cssdoes not definecolor-scheme: darkon: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
Tooltipcomponent despite@radix-ui/react-tooltipbeing inpackage.json—titleattributes are used for tooltips throughout the codebase (e.g.FeeEstimatorrefresh button,AddressDisplay,InfoCell). Nativetitletooltips are inaccessible on mobile, delayed on desktop, and unstyled. A properTooltipcomponent should replace alltitleusages.Solution
/* Design Token Reference */comment block inindex.csswith a table of each token, its value, and intended use case.color-scheme: darkto the:rootselector inindex.css.src/components/ui/Tooltip.tsxusing@radix-ui/react-tooltip, exported fromindex.ts, and replace keytitleusages inFeeEstimatorandAddressDisplay.Acceptance Criteria
index.csshas a token reference comment blockTooltipcomponent exported from"sorokit-ui"FeeEstimatorrefresh button andAddressDisplaycopy button useTooltipinstead oftitlenpm run buildpasses