[FilesDarkMode] Adopt new cr-toggle variables
This is the part 2 of offline dark mode change, a follow up of
CL:3252473. The change here depends on CL:3251412 and utilize
the variables exposed there to support paper-ripple size/ring/
box-shadow customization.
Demo: http://shortn/_Mc479hKfal
Bug: 1250587
Test: Deploy and visually inspect
Test: browser_tests --gtest_filter=*FilesApp*
Change-Id: Id59575d2a5163804901134e9ad953865f7d83803
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3266841
Reviewed-by: Austin Tankiang <austinct@chromium.org>
Commit-Queue: Wenbo Jie <wenbojie@chromium.org>
Cr-Commit-Position: refs/heads/main@{#940135}
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index 70b443f9..eae48c5 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -1090,6 +1090,13 @@
--cr-toggle-unchecked-bar-color: var(--cros-switch-track-color-inactive);
--cr-toggle-unchecked-button-color: var(--cros-switch-knob-color-inactive);
--cr-toggle-unchecked-ripple-color: var(--cros-focus-aura-color);
+ --cr-toggle-box-shadow: var(--cros-elevation-1-shadow);
+ --cr-toggle-ripple-diameter: 32px;
+}
+
+/* only show the ripple ring for tab navigation */
+html.focus-outline-visible .dialog-header.files-ng cr-toggle:focus {
+ --cr-toggle-ripple-ring: 2px solid var(--cros-focus-ring-color);
}
/* Container for the detail and thumbnail list views. */
