fix(ui): make shared switches visible across CMS themes

2026-09-06 21:30:13 +02:00
parent 35d0f3ee01
commit 7033d65846
8 changed files with 131 additions and 61 deletions
@@ -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;
+	}
+}