Skip to content

Conversation

@mayagbarnes
Copy link
Collaborator

@mayagbarnes mayagbarnes commented Jan 7, 2026

Describe your changes

Improve the consistency of our widget coloration in st.radio, st.checkbox, & st.toggle - whose border and hover colors were different than other widgets.

Current:

Theme variable Opacity Usage
borderColor (via fadedText10) 20% Buttons, inputs, most widgets
fadedText40 40% Radio/Checkbox/Toggle (current)

Current:
Current - develop
Updated:
Updated colors

Testing Plan

  • E2E Tests: ✅ Updated
    NOTE: This does change tons of snapshots

@mayagbarnes mayagbarnes added security-assessment-completed Security assessment has been completed for PR change:refactor PR contains code refactoring without behavior change impact:users PR changes affect end users labels Jan 7, 2026
@snyk-io
Copy link
Contributor

snyk-io bot commented Jan 7, 2026

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.

@github-actions
Copy link
Contributor

github-actions bot commented Jan 7, 2026

✅ PR preview is ready!

Name Link
📦 Wheel file https://core-previews.s3-us-west-2.amazonaws.com/pr-13536/streamlit-1.52.2-py3-none-any.whl
📦 @streamlit/component-v2-lib Download from artifacts
🕹️ Preview app pr-13536.streamlit.app (☁️ Deploy here if not accessible)

@mayagbarnes mayagbarnes marked this pull request as ready for review January 8, 2026 23:58
Copilot AI review requested due to automatic review settings January 8, 2026 23:58
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR consolidates border and hover colors for st.radio, st.checkbox, and st.toggle widgets to improve consistency. The changes replace the 40% opacity fadedText40 color with borderColor (20% opacity) and update hover states from fadedText20 to darkenedBgMix15.

Key Changes:

  • Updated border colors from fadedText40 to borderColor for consistent 20% opacity across all widgets
  • Updated hover background colors from fadedText20 to darkenedBgMix15 for better theming consistency
  • Updated E2E test snapshots to reflect the visual changes

Reviewed changes

Copilot reviewed 3 out of 222 changed files in this pull request and generated no comments.

File Description
frontend/lib/src/components/widgets/DataFrame/menus/ColumnVisibilityMenu.tsx Updated checkbox border color from fadedText40 to borderColor
frontend/lib/src/components/widgets/Checkbox/Checkbox.tsx Updated both border and hover background colors to use consistent theme variables
frontend/lib/src/components/shared/Radio/Radio.tsx Updated radio button border color from fadedText40 to borderColor
e2e_playwright/__snapshots__/linux/st_toggle_test/*.png Updated visual regression test snapshots for toggle widget across themes and browsers

Copy link
Collaborator

@lukasmasuch lukasmasuch left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

@mayagbarnes mayagbarnes merged commit e64974e into develop Jan 9, 2026
49 checks passed
@mayagbarnes mayagbarnes deleted the fix-colors branch January 9, 2026 06:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change:refactor PR contains code refactoring without behavior change impact:users PR changes affect end users security-assessment-completed Security assessment has been completed for PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants