Restyle the Chart tool on the theme's design tokens - #321
Merged
Conversation
The plugin carried its own token layer in theme.css — a teal accent, 4px
and 6px radii, its own Source Sans stack — none of which reached the
design system, so the panel drifted from the rest of the app. That file
is deleted; ChartComponent.css reads --theme-* directly, the same way
AOI, MapControl, and LayerManager do, with the horizon value as each
fallback.
The horizon bundle was compiled to confirm what the tokens resolve to
rather than assuming. That settled the type steps: the old sheet's four
sizes (13/14/16/24px) have no one-for-one equivalent on the theme's
scale, so labels and subtitles take 3xs, body copy and stat values 2xs,
the panel title sm, and the headline mean lg. Two literals stay, the
16px title glyph and the 18px close glyph, both icon sizes rather than
type steps.
.chart-tool-host and .chart-tool__exit are removed. Nothing applies
either class, and the host rule claimed to position the panel at a fixed
offset with a shadow of its own — the panel owns placement, and the tool
spans whatever it is given.
Core's global `*:focus { outline: none }` strips the native focus ring
and the close button had no replacement, so the plugin restores one.
The histogram is painted by script rather than by the stylesheet, so
ChartComponent.tsx reads the same three tokens off the canvas.
BhattaraiSijan
approved these changes
Aug 13, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Moves the Chart plugin onto the global design tokens, following #318 for the AOI tool.
Tokens
The plugin carried its own layer in
theme.css— every value a literal of its own choosing (a teal accent, 4px/6px radii, a Source Sans stack). None of it reached the design system, so the tool drifted from the rest of the app. That file is deleted; everything now reads--theme-*directly, the same way AOI, MapControl, and LayerManager do.--chart-*bg#ffffff--theme-color-white#ffffffbg-muted#f6f7f8--theme-color-base-lightest#f6f6f6fg#1b1b1b--theme-color-ink#17171bfg-muted#565c65--theme-color-base-dark#58585baccent#137480--theme-color-primary#1c67e3border#dfe1e2--theme-color-base-lighter#e3e3e3radius-sm/radius-md4px/6px--theme-radius-sm2pxspace-1…space-5--theme-spacing-05…3I compiled the horizon bundle to confirm what these resolve to rather than assuming, which is what settled the type steps. The old sheet's four sizes — 13/14/16/24px — have no one-for-one equivalent on the theme's scale, so they map to the hierarchy the panel actually has:
--theme-font-size-3xs--theme-font-size-2xs--theme-font-size-sm--theme-font-size-lgTwo literals stay: the 16px title glyph and the 18px close glyph, both icon sizes rather than type steps.
Three changes beyond a straight swap
.chart-tool-hostis removed. Nothing in the repo applies that class — I grepped for it and for any dynamically-suffixed-host. It claimed to position the panel attop: 70px; right: 16px; width: 372pxwith a shadow, so a reader would reasonably believe it did. The panel owns placement;.chart-toolspans what it is given..chart-tool__exitis removed for the same reason — no element inChartComponent.tsxcarries it.:focus-visiblering is added. Core's global*:focus { outline: none }strips the native one and the close button had no replacement. Matches the block AOI added.The histogram
It is painted by script rather than by the stylesheet, so
ChartComponent.tsxreads the same three tokens off the canvas viagetComputedStyle, with fallbacks matching the sheet.Verification
tsc --noEmitis clean. There are no tests undersrc/essence/Tools/Chart, so nothing exercises this beyond the type check — the panel is worth a look in a running instance before merging. Trigger it by drawing an area and running an analysis, since Chart mounts onplugin:fetch-stats:analysisReady.