Draft
Conversation
…lta coloring Introduce two semantic CSS theme tokens for KPI delta/comparison values: - text-kpi-positive: defaults to text-fg-secondary (gray) — no visual change - text-kpi-negative: defaults to text-red-500 (red) — no visual change Customers can opt in to green-for-positive by overriding kpi-positive in their theme YAML config (e.g., kpi-positive: '#16a34a'). Changes: - app.css: define --kpi-positive and --kpi-negative CSS vars (light + dark) - tailwind.config.ts: add kpi color object for Tailwind utilities - theme.ts: add kpi-positive/kpi-negative to Colors type - parse_theme.go: whitelist kpi-positive/kpi-negative in allowedCSSVariables - parser_test.go: add test for KPI semantic variables Updated components: - MeasureChange.svelte: text-red-500 → text-kpi-negative, text-fg-secondary → text-kpi-positive - PercentageChange.svelte: text-destructive → text-kpi-negative, add text-kpi-positive - KPI.svelte: text-red-500 → text-kpi-negative, add text-kpi-positive - MeasureBigNumber.svelte: text-red-500 → text-kpi-negative, add text-kpi-positive - LeaderboardRow.svelte: text-red-500 → text-kpi-negative, add text-kpi-positive - PivotDeltaCell.svelte: text-destructive → text-kpi-negative, text-fg-secondary → text-kpi-positive Resolves PM-129 Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
|
Cursor Agent can help with this pull request. Just |
…tive All components now use three-way checks (positive / negative / neutral) so zero-change values stay gray even when a customer overrides kpi-positive to green. Matches the acceptance criterion that zero/neutral values remain text-fg-secondary. Components fixed: - MeasureChange.svelte: add isValuePositive flag, zero → text-fg-secondary - PercentageChange.svelte: add diffIsPositive flag, zero → text-fg-secondary - KPI.svelte: percent > 0 (was >= 0), zero → text-fg-disabled fallback - MeasureBigNumber.svelte: diff > 0 (was >= 0), add isComparisonNegative PivotDeltaCell.svelte and LeaderboardRow.svelte already handled zero correctly with three-way logic. Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
Contributor
|
Correct me if im wrong, but i dont think kpi-positive is surfaced in theme.yaml. getting when trying to define it. dont forget to have it auto populate a theme.yaml when creating it and surfacing it here so users can change the color. |
Add KPI delta color tokens to all places where users discover theme variables: - new-files.ts: scaffold template shows kpi-positive/kpi-negative as commented-out options in both light and dark sections - AI instructions (theme.md): add KPI delta color examples - Reference docs (themes.md): add example theme with KPI delta colors This ensures users creating a new theme immediately see the option to customize positive/negative delta colors. Co-authored-by: ericokuma <ericokuma@users.noreply.github.com>
Contributor
but manually adding works. |
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
3 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.
This PR introduces
text-kpi-positiveandtext-kpi-negativetheme tokens to allow customers to customize the colors of positive and negative delta/comparison values in dashboards. This addresses visual asymmetry where positive deltas were gray while negative were red, improving dashboard scanability and meeting customer requests for green positive values.By default, the new tokens preserve current behavior (gray for positive, red for negative) for a safe, opt-in rollout. Customers can customize these colors (e.g., green for positive) via their
theme.yamlfile.Changes include:
--kpi-positiveand--kpi-negativeCSS variables inapp.csswith defaults.kpi.positiveandkpi.negativetotailwind.config.ts.theme.tsandparse_theme.goto expose these tokens for theme configuration.text-red-500andtext-fg-secondarywith the new KPI tokens inMeasureChange.svelte,PercentageChange.svelte,KPI.svelte,MeasureBigNumber.svelte,LeaderboardRow.svelte, andPivotDeltaCell.svelte.Checklist:
Linear Issue: PM-129