fix toggloe checkbox active state

repub/static/app.css

@@ -392,6 +392,10 @@
     --tw-translate-x: calc(var(--spacing) * 0);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
+  .translate-x-5 {
+    --tw-translate-x: calc(var(--spacing) * 5);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .cursor-not-allowed {
     cursor: not-allowed;
   }
@@ -541,6 +545,9 @@
   .bg-amber-400 {
     background-color: var(--color-amber-400);
   }
+  .bg-amber-500 {
+    background-color: var(--color-amber-500);
+  }
   .bg-emerald-100 {
     background-color: var(--color-emerald-100);
   }

repub/static/app.tailwind.css

@@ -1 +1,2 @@
 @import "tailwindcss" source("../");
+@source inline("bg-amber-500 translate-x-5");

tests/test_web.py

@@ -6,7 +6,7 @@ from datetime import UTC, datetime, timedelta
 from pathlib import Path
 from typing import Any, cast
 
-from repub.components import status_badge
+from repub.components import status_badge, toggle_field
 from repub.datastar import RefreshBroker, render_sse_event, render_stream
 from repub.jobs import load_dashboard_view
 from repub.model import (
@@ -38,6 +38,25 @@ def test_status_badge_uses_green_done_tone() -> None:
     assert "Succeeded" in badge
 
 
+def test_toggle_field_active_state_utilities_exist_in_built_css() -> None:
+    markup = str(
+        toggle_field(
+            label="Enabled",
+            description="Enable this source",
+            signal_name="enabled",
+            checked=True,
+        )
+    )
+    css = (
+        Path(__file__).resolve().parents[1] / "repub" / "static" / "app.css"
+    ).read_text(encoding="utf-8")
+
+    assert "data-class:bg-amber-500" in markup
+    assert "data-class:translate-x-5" in markup
+    assert ".bg-amber-500" in css
+    assert ".translate-x-5" in css
+
+
 def test_runs_page_renders_completed_execution_end_time_as_relative_hoverable_time() -> (
     None
 ):