✅ Snyk checks have passed. No issues have been found so far.

Status	Scanner	Critical	High	Medium	Low	Total (0)
✅	Open Source Security	0	0	0	0	0 issues
✅	Licenses	0	0	0	0	0 issues

💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse.

✅ PR preview is ready!

• Consolidate/refactor theme color mapping #13740
• Support resolving to theme colors configs for charts #13739 👈 (View in Graphite)
• develop

This stack of pull requests is managed by Graphite. Learn more about stacking.

Summary

This PR adds support for Streamlit's theme colors in chart color= parameters across built-in chart functions (st.line_chart, st.bar_chart, st.area_chart, st.scatter_chart) and base chart functions (st.vega_lite_chart, st.altair_chart). Users can now use color names like red, orange, yellow, green, blue, violet, gray/grey, and primary which automatically resolve to the configured theme colors, enabling theme-aware charts that adapt to light/dark mode.

Key changes:

• Backend (Python): Added is_builtin_color_name() function in color_util.py and modified _get_color_encoding() in built_in_chart_utils.py to pass built-in color names through to the frontend instead of converting them
• Frontend (TypeScript): New colorUtils.ts module with functions to resolve built-in color names to theme colors, integrated into useVegaElementPreprocessor.ts

Code Quality

The implementation is clean and well-structured:

1. Backend (color_util.py): The BUILTIN_COLOR_NAMES frozenset and is_builtin_color_name() function follow the existing patterns in this file. Uses Final type annotation correctly.

2. Backend (built_in_chart_utils.py): The changes to _get_color_encoding() properly handle:

   • Single built-in color name: color="red"
   • List of built-in colors: color=["red", "blue"]
   • Mixed lists: color=["red", "#00ff00"]

3. Frontend (colorUtils.ts):

   • Static data structures (BUILTIN_COLOR_NAMES, COLOR_NAME_TO_THEME_KEY) are correctly declared at module level per TypeScript best practices
   • The TODO comment about consolidating similar color mapping functions is helpful for future maintainability
   • Functions have explicit return types and proper type guards

4. Frontend (useVegaElementPreprocessor.ts): Clean integration - resolveBuiltinColorsInSpec() is called after other spec processing, handling layers, vconcat, hconcat, and concat specs recursively.

Test Coverage

Test coverage is comprehensive:

Python Unit Tests:

• color_util_test.py: Tests is_builtin_color_name() for valid names (including case variations), invalid inputs, and verifies is_color_like() correctly excludes built-in names
• vega_charts_test.py:
  • test_chart_with_builtin_color_name - single color
  • test_chart_with_builtin_color_name_list - color list
  • test_chart_with_mixed_color_list - mixed built-in + hex
  • test_column_name_takes_priority_over_builtin_color_name - critical backwards compatibility test
  • test_vega_lite_chart_with_builtin_color_name - raw Vega-Lite spec support

Frontend Unit Tests:

• colorUtils.test.ts: Thorough coverage of isBuiltinColorName, resolveBuiltinColor, and resolveBuiltinColorsInSpec including edge cases (case insensitivity, grey/gray alias, layer/vconcat/hconcat specs, no encoding, non-builtin colors)
• useVegaElementPreprocessor.test.ts: Integration tests verifying colors resolve correctly through the preprocessor hook

E2E Tests:

• Single comprehensive snapshot test with custom theme colors validates the full stack
• Uses module-scoped fixture with @pytest.mark.early correctly per best practices
• Tests all 4 chart types with all 8 built-in color names

Backwards Compatibility

The implementation is fully backwards compatible:

1. Column names take priority: If a DataFrame has a column named "red", color="red" uses it as a column reference, not a color value (explicitly tested)
2. Existing colors work unchanged: Hex colors (#ff0000) and color tuples (255, 0, 0) continue to work as before
3. No breaking API changes: This only adds new functionality

The test file change updating bad_args from ["foo", "blue"] to ["foo", "notacolor"] correctly documents that "blue" is now a valid color argument.

Security & Risk

No security concerns identified. The changes are isolated to color value handling and don't introduce any new attack vectors.

Low regression risk:

• The feature is additive and doesn't modify existing color processing paths
• Built-in color names are only recognized when they don't match an existing column name
• Frontend resolution happens at spec processing time, isolated from data handling

Recommendations

No blocking issues found. Minor suggestions for future consideration (not required for this PR):

1. Documentation: Consider adding a note to the chart function docstrings mentioning the supported color names. Users will discover this through examples and release notes.

2. Future consolidation: The TODO in colorUtils.ts about consolidating color mapping functions across ProgressColumn.ts, ChartColumn.ts, and MultiselectColumn.ts would be good follow-up work.

Verdict

APPROVED: Well-implemented feature with comprehensive test coverage (Python unit, TypeScript unit, and E2E), clean code that follows existing patterns, and proper backwards compatibility handling. The PR is ready for merge.

This is an automated AI review using opus-4.5-thinking. Please verify the feedback and use your judgment.

Summary

Adds support for built-in chart color names (red/orange/etc.) by passing them through the backend and resolving them to theme colors in the Vega-Lite preprocessor. Updates docs and adds unit, frontend, and e2e coverage plus new snapshots.

Code Quality

Clear separation between backend validation/pass-through and frontend resolution, with a focused utility for spec mutation and targeted tests. The new logic is localized and avoids altering existing color pathways.

Test Coverage

Good coverage across layers: Python unit tests for validation and spec pass-through, frontend unit tests for resolution behavior, and an e2e snapshot that exercises all built-in names. The tests are aligned with the changes and cover positive and negative paths.

Backwards Compatibility

Backwards compatible. This expands accepted color inputs to include built-in names without changing existing hex/tuple behavior or column-name precedence.

Security & Risk

No security concerns identified. Primary risk is limited to edge-case Vega-Lite compositions that may not get color resolution if nested more deeply than the handled structures.

Recommendations

1. Consider handling additional Vega-Lite composition nodes (e.g., facet, repeat, nested spec) so built-in color names are resolved consistently in complex raw specs. File: frontend/lib/src/components/elements/ArrowVegaLiteChart/colorUtils.ts lines 92-117.
2. Consider scoping the e2e snapshot to a container/locator and keeping the snapshot height under 640px to align with e2e best practices (currently a full-page snapshot at 800px height). File: e2e_playwright/st_chart_builtin_colors_test.py lines 71-85.

Verdict

APPROVED: Solid implementation with comprehensive tests; only minor best-practice follow-ups suggested.

This is an automated AI review using gpt-5.2-codex-high. Please verify the feedback and use your judgment.

📈 Frontend coverage change detected

The frontend unit test (vitest) coverage has increased by 0.0900%

• Current PR: 86.4300% (13657 lines, 1853 missed)
• Latest develop: 86.3400% (13626 lines, 1860 missed)

🎉 Great job on improving test coverage!

📊 View detailed coverage comparison