This is an automated email from the ASF dual-hosted git repository.
vatsrahul1001 pushed a commit to branch v3-3-test
in repository https://gitbox.apache.org/repos/asf/airflow.git
The following commit(s) were added to refs/heads/v3-3-test by this push:
new 1ea6b369b38 UI: Make the Dag pause toggle distinguishable in dark mode
(#70203) (#70748)
1ea6b369b38 is described below
commit 1ea6b369b385550723c1d12d35e36f3f532f6aa7
Author: Rahul Vats <[email protected]>
AuthorDate: Mon Aug 3 10:57:53 2026 +0530
UI: Make the Dag pause toggle distinguishable in dark mode (#70203) (#70748)
The off-state track uses bg.emphasized, which in this palette lands within
0.05 oklch lightness of the page background, so only the white thumb reads
and the pill has no visible edge.
An inset shadow is used rather than a border because the thumb's size and
its checked travel are both derived from --switch-height/--switch-width:
anything that takes space in the control's content box shrinks the box the
thumb sits in while its translate distance stays the same, which pushes it
off centre and past the end of the track.
(cherry picked from commit 83c0a9c63787d7b5fb841e412adaad9f60dd279c)
Co-authored-by: Eddie Roman <[email protected]>
---
airflow-core/src/airflow/ui/src/theme.ts | 6 ++++++
1 file changed, 6 insertions(+)
diff --git a/airflow-core/src/airflow/ui/src/theme.ts
b/airflow-core/src/airflow/ui/src/theme.ts
index ac627182ced..f62d681cbb2 100644
--- a/airflow-core/src/airflow/ui/src/theme.ts
+++ b/airflow-core/src/airflow/ui/src/theme.ts
@@ -381,6 +381,12 @@ const defaultAirflowTheme: ThemingConfig = {
},
switch: {
slots: [],
+ base: {
+ control: {
+ shadow: "inset 0 0 0px 1px var(--shadow-color)",
+ shadowColor: { _dark: "gray.500", _light: "gray.400" },
+ },
+ },
defaultVariants: { size: "sm" } as Record<string, string>,
},
// size="sm" gives px/py:2 on cell and columnHeader vs px/py:3 for "md".
