Skip to content

fix(interface): work around Tailwind v4 state-variant bug with custom CSS for the Toggle #615

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
jamiepine merged 8 commits into from
Aug 8, 2026
Merged

fix(interface): work around Tailwind v4 state-variant bug with custom CSS for the Toggle #615

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0e1e1b2
fix(interface): route Switch through local Toggle to fix Tailwind v4 …
mdcnick Aug 5, 2026
5528499
fix(interface): work around Tailwind v4 state-variant bug with custom…
mdcnick Aug 5, 2026
91f68c0
build: bump ethnum to 1.5.3 to fix Docker build failure
mdcnick Aug 5, 2026
41b3456
feat(deploy): add Coolify multi-agent mastermind setup
mdcnick Aug 5, 2026
c8a890d
fix(deploy): provision agent repository workspace
mdcnick Aug 6, 2026
94e4906
Revert "fix(deploy): provision agent repository workspace"
mdcnick Aug 6, 2026
a7ab8fe
Revert "feat(deploy): add Coolify multi-agent mastermind setup"
mdcnick Aug 6, 2026
a13c045
Merge remote-tracking branch 'origin/main' into pr-615
jamiepine Aug 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion interface/src/components/ChannelSettingCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import {
DialogTitle,
DialogFooter,
} from "@spacedrive/primitives";
import {Switch} from "@spacedrive/primitives";
import {Toggle as Switch} from "@/ui/Toggle";
import {PlatformIcon} from "@/lib/platformIcons";
import {
isValidE164,
Expand Down
2 changes: 1 addition & 1 deletion interface/src/components/PromptInspectModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import {
DialogHeader,
DialogTitle,
} from "@spacedrive/primitives";
import {Switch} from "@spacedrive/primitives";
import {Toggle as Switch} from "@/ui/Toggle";

interface PromptInspectModalProps {
open: boolean;
Expand Down
2 changes: 1 addition & 1 deletion interface/src/components/agent-config/ConfigSectionEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ import {
SelectValue,
SelectContent,
SelectItem,
Switch,
} from "@spacedrive/primitives";
import {Toggle as Switch} from "@/ui/Toggle";
import {ModelSelect} from "@/components/ModelSelect";
import {TagInput} from "@/components/TagInput";
import {supportsAdaptiveThinking} from "./utils";
Expand Down
3 changes: 2 additions & 1 deletion interface/src/components/settings/ServerSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import {useState, useEffect} from "react";
import {useMutation, useQueryClient} from "@tanstack/react-query";
import {api} from "@/api/client";
import {Button, Input, Switch} from "@spacedrive/primitives";
import {Button, Input} from "@spacedrive/primitives";
import {Toggle as Switch} from "@/ui/Toggle";
import type {GlobalSettingsSectionProps} from "./types";

export function ServerSection({settings, isLoading}: GlobalSettingsSectionProps) {
Expand Down
2 changes: 1 addition & 1 deletion interface/src/routes/AgentCron.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ import {
SelectContent,
SelectItem,
} from "@spacedrive/primitives";
import {Switch} from "@spacedrive/primitives";
import {Toggle as Switch} from "@/ui/Toggle";

// -- Helpers --

Expand Down
18 changes: 18 additions & 0 deletions interface/src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,3 +192,21 @@ body {
width: auto !important;
box-shadow: none !important;
}


/* Tailwind v4 workaround: state-variant class selectors (data-[state=checked]:* and aria-checked:*)
don't match at runtime in this build. Radix v1.x sets aria-checked on the root, so use it
directly via an attribute selector. The bg-app-dark-box class is on the Toggle root; the
bg-white shadow-sm combination is unique to the Toggle thumb. */
button[aria-checked="true"].bg-app-dark-box {
background-color: var(--color-accent) !important;
}
button[aria-checked="true"].w-7 > .bg-white.shadow-sm {
transform: translateX(12px) !important;
}
button[aria-checked="true"].w-9 > .bg-white.shadow-sm {
transform: translateX(16px) !important;
}
button[aria-checked="true"].w-11 > .bg-white.shadow-sm {
transform: translateX(20px) !important;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
}
8 changes: 4 additions & 4 deletions interface/src/ui/Toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ const switchStyles = cva(
"peer inline-flex shrink-0 cursor-pointer items-center rounded-full transition-colors",
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2",
"disabled:cursor-not-allowed disabled:opacity-50",
"data-[state=checked]:bg-accent data-[state=unchecked]:bg-app-dark-box",
"aria-checked:bg-accent bg-app-dark-box",
],
{
variants: {
Expand All @@ -30,9 +30,9 @@ const thumbStyles = cva(
{
variants: {
size: {
sm: "h-3 w-3 data-[state=checked]:translate-x-3 data-[state=unchecked]:translate-x-0",
md: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
lg: "h-5 w-5 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
sm: "h-3 w-3 aria-checked:translate-x-3 translate-x-0",
md: "h-4 w-4 aria-checked:translate-x-4 translate-x-0",
lg: "h-5 w-5 aria-checked:translate-x-5 translate-x-0",
},
},
defaultVariants: {
Expand Down
Loading