Fix st.toggle background color (streamlit#7788)

* Update background color for toggle, to match radio and checkboxes * Regenerate toggle snapshots * Add back regenerated snapshots
zyxue · Apr 16, 2024 · 1461775 · 1461775
1 parent 6b5c186
commit 1461775
Show file tree

Hide file tree

Showing 43 changed files with 2 additions and 4 deletions.
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-1[dark_theme-chromium].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-1[dark_theme-chromium].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-1[dark_theme-firefox].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-1[dark_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-1[dark_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-1[dark_theme-webkit].png
diff --git a/...laywright/__snapshots__/linux/st_toggle_test/toggle-1[light_theme-chromium].png b/...laywright/__snapshots__/linux/st_toggle_test/toggle-1[light_theme-chromium].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-1[light_theme-firefox].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-1[light_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-1[light_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-1[light_theme-webkit].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-2[dark_theme-chromium].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-2[dark_theme-chromium].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-2[dark_theme-firefox].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-2[dark_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-2[dark_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-2[dark_theme-webkit].png
diff --git a/...laywright/__snapshots__/linux/st_toggle_test/toggle-2[light_theme-chromium].png b/...laywright/__snapshots__/linux/st_toggle_test/toggle-2[light_theme-chromium].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-2[light_theme-firefox].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-2[light_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-2[light_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-2[light_theme-webkit].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-3[dark_theme-chromium].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-3[dark_theme-chromium].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-3[dark_theme-firefox].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-3[dark_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-3[dark_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-3[dark_theme-webkit].png
diff --git a/...laywright/__snapshots__/linux/st_toggle_test/toggle-3[light_theme-chromium].png b/...laywright/__snapshots__/linux/st_toggle_test/toggle-3[light_theme-chromium].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-3[light_theme-firefox].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-3[light_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-3[light_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-3[light_theme-webkit].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-4[dark_theme-chromium].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-4[dark_theme-chromium].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-4[dark_theme-firefox].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-4[dark_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-4[dark_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-4[dark_theme-webkit].png
diff --git a/...laywright/__snapshots__/linux/st_toggle_test/toggle-4[light_theme-chromium].png b/...laywright/__snapshots__/linux/st_toggle_test/toggle-4[light_theme-chromium].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-4[light_theme-firefox].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-4[light_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-4[light_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-4[light_theme-webkit].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-5[dark_theme-chromium].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-5[dark_theme-chromium].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-5[dark_theme-firefox].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-5[dark_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-5[dark_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-5[dark_theme-webkit].png
diff --git a/...laywright/__snapshots__/linux/st_toggle_test/toggle-5[light_theme-chromium].png b/...laywright/__snapshots__/linux/st_toggle_test/toggle-5[light_theme-chromium].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-5[light_theme-firefox].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-5[light_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-5[light_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-5[light_theme-webkit].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-6[dark_theme-chromium].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-6[dark_theme-chromium].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-6[dark_theme-firefox].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-6[dark_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-6[dark_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-6[dark_theme-webkit].png
diff --git a/...laywright/__snapshots__/linux/st_toggle_test/toggle-6[light_theme-chromium].png b/...laywright/__snapshots__/linux/st_toggle_test/toggle-6[light_theme-chromium].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-6[light_theme-firefox].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-6[light_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-6[light_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-6[light_theme-webkit].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-7[dark_theme-chromium].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-7[dark_theme-chromium].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-7[dark_theme-firefox].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-7[dark_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-7[dark_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-7[dark_theme-webkit].png
diff --git a/...laywright/__snapshots__/linux/st_toggle_test/toggle-7[light_theme-chromium].png b/...laywright/__snapshots__/linux/st_toggle_test/toggle-7[light_theme-chromium].png
diff --git a/...playwright/__snapshots__/linux/st_toggle_test/toggle-7[light_theme-firefox].png b/...playwright/__snapshots__/linux/st_toggle_test/toggle-7[light_theme-firefox].png
diff --git a/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-7[light_theme-webkit].png b/e2e_playwright/__snapshots__/linux/st_toggle_test/toggle-7[light_theme-webkit].png
diff --git a/frontend/lib/src/components/widgets/Checkbox/Checkbox.tsx b/frontend/lib/src/components/widgets/Checkbox/Checkbox.tsx
@@ -203,12 +203,10 @@ class Checkbox extends React.PureComponent<Props, State> {
                 $checked: boolean
                 $isHovered: boolean
               }) => {
-                let backgroundColor = lightTheme
-                  ? colors.gray50
-                  : colors.gray80
+                let backgroundColor = colors.fadedText40
 
                 if ($isHovered && !disabled) {
-                  backgroundColor = lightTheme ? colors.gray60 : colors.gray70
+                  backgroundColor = colors.fadedText20
                 }
 
                 if ($checked && !disabled) {