fix(ui): make shared switches visible across CMS themes
This commit is contained in:
Simo committed
1 parent
35d0f3ee01
commit
7033d65846
8 files changed
+131
-61
No files matched your search
@@ -39,32 +39,6 @@
|
||||
line-height: 1.5;
|
||||
color: var(--admin-text-muted);
|
||||
}
|
||||
.toggle[data-slot="switch"] {
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--admin-text-muted);
|
||||
background: var(--admin-border);
|
||||
cursor: pointer;
|
||||
}
|
||||
.toggle[data-checked] {
|
||||
background: var(--admin-accent);
|
||||
border-color: var(--admin-accent);
|
||||
}
|
||||
.toggle [data-slot="switch-thumb"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
left: 2px;
|
||||
background: var(--admin-text);
|
||||
color: var(--admin-canvas);
|
||||
}
|
||||
.toggle[data-checked] [data-slot="switch-thumb"] {
|
||||
left: 22px;
|
||||
}
|
||||
.toggle:focus-visible {
|
||||
outline: 2px solid var(--admin-accent);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.option[data-disabled] .toggle,
|
||||
.option[data-disabled] .label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
@@ -864,7 +864,6 @@ function ToggleRow({
|
||||
onCheckedChange={onChange}
|
||||
disabled={disabled}
|
||||
aria-describedby={`${id}-description`}
|
||||
className={styles.toggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
.root {
|
||||
--switch-off: var(--color-input);
|
||||
--switch-on: var(--color-primary);
|
||||
--switch-border: var(--color-muted-foreground);
|
||||
--switch-thumb: var(--color-foreground);
|
||||
--switch-mark: var(--color-background);
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
width: 44px;
|
||||
height: 24px;
|
||||
border: 1px solid var(--switch-border);
|
||||
border-radius: 999px;
|
||||
background: var(--switch-off);
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition:
|
||||
background-color 150ms,
|
||||
border-color 150ms;
|
||||
}
|
||||
body:has([data-admin]) .root {
|
||||
--switch-off: var(--admin-border);
|
||||
--switch-on: var(--admin-accent);
|
||||
--switch-border: var(--admin-text-muted);
|
||||
--switch-thumb: var(--admin-text);
|
||||
--switch-mark: var(--admin-canvas);
|
||||
}
|
||||
.root[data-checked] {
|
||||
background: var(--switch-on);
|
||||
border-color: var(--switch-on);
|
||||
}
|
||||
.root:focus-visible {
|
||||
outline: 2px solid var(--switch-on);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
.root[data-disabled] {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
.thumb {
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
top: 50%;
|
||||
left: 2px;
|
||||
transform: translateY(-50%);
|
||||
border-radius: 999px;
|
||||
background: var(--switch-thumb);
|
||||
color: var(--switch-mark);
|
||||
transition: left 150ms;
|
||||
}
|
||||
.root[data-checked] .thumb {
|
||||
left: 22px;
|
||||
}
|
||||
.check {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
stroke-width: 3;
|
||||
opacity: 0;
|
||||
}
|
||||
.root[data-checked] .check {
|
||||
opacity: 1;
|
||||
}
|
||||
.root[data-size="sm"] {
|
||||
width: 32px;
|
||||
height: 20px;
|
||||
}
|
||||
.root[data-size="sm"] .thumb {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
.root[data-size="sm"][data-checked] .thumb {
|
||||
left: 14px;
|
||||
}
|
||||
.root[data-size="sm"] .check {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.root,
|
||||
.thumb {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@media (forced-colors: active) {
|
||||
.root {
|
||||
border-color: ButtonText;
|
||||
background: Canvas;
|
||||
}
|
||||
.root[data-checked] {
|
||||
background: Highlight;
|
||||
border-color: Highlight;
|
||||
}
|
||||
.thumb {
|
||||
background: ButtonText;
|
||||
color: Canvas;
|
||||
}
|
||||
.root:focus-visible {
|
||||
outline-color: Highlight;
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,7 @@ import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
|
||||
import { CheckIcon } from "lucide-react";
|
||||
|
||||
import { cn } from "@/lib/utils";
|
||||
import styles from "./switch.module.css";
|
||||
|
||||
function Switch({
|
||||
className,
|
||||
@@ -16,35 +17,11 @@ function Switch({
|
||||
<SwitchPrimitive.Root
|
||||
data-slot="switch"
|
||||
data-size={size}
|
||||
className={cn(
|
||||
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-colors",
|
||||
"bg-input hover:bg-input/80",
|
||||
"data-checked:bg-primary data-checked:hover:bg-primary/90",
|
||||
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40",
|
||||
"disabled:cursor-not-allowed disabled:opacity-50",
|
||||
"data-[size=default]:h-5 data-[size=default]:w-9",
|
||||
"data-[size=sm]:h-4 data-[size=sm]:w-7",
|
||||
className,
|
||||
)}
|
||||
className={cn(styles.root, className)}
|
||||
{...props}
|
||||
>
|
||||
<SwitchPrimitive.Thumb
|
||||
data-slot="switch-thumb"
|
||||
className={cn(
|
||||
"pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full bg-background text-primary shadow-sm ring-0 transition-[left,colors]",
|
||||
"left-0.5 data-checked:left-[calc(100%-1.125rem)]",
|
||||
"group-data-[size=default]/switch:size-4",
|
||||
"group-data-[size=sm]/switch:size-3 group-data-[size=sm]/switch:data-checked:left-[calc(100%-0.875rem)]",
|
||||
)}
|
||||
>
|
||||
<CheckIcon
|
||||
aria-hidden
|
||||
className={cn(
|
||||
"size-2.5 stroke-[3] opacity-0 transition-opacity",
|
||||
"group-data-checked/switch:opacity-100",
|
||||
"group-data-[size=sm]/switch:size-2",
|
||||
)}
|
||||
/>
|
||||
<SwitchPrimitive.Thumb data-slot="switch-thumb" className={styles.thumb}>
|
||||
<CheckIcon aria-hidden className={styles.check} />
|
||||
</SwitchPrimitive.Thumb>
|
||||
</SwitchPrimitive.Root>
|
||||
);
|
||||
|
||||
Reference in new issue
Block a user