@actuate-media/cms-admin 0.63.2 → 0.64.0

package/src/components/ui/form-control.ts

@@ -0,0 +1,12 @@
+/**
+ * Shared form-control surface styles (`.inp` in the design system handoff).
+ * Imported by Input and Select so geometry stays aligned.
+ */
+export const formControlBase =
+  'w-full rounded-[var(--r-control)] border border-[var(--bdr)] bg-[var(--bg)] px-3 py-[9px] text-[length:var(--fs-body)] text-[var(--txt)] outline-none transition-[border-color] duration-150 placeholder:text-[var(--muted)] focus:border-[var(--acc-m)] focus-visible:border-[var(--acc-m)] disabled:cursor-not-allowed disabled:opacity-50'
+
+export const formControlState = {
+  default: '',
+  invalid: 'border-[var(--err)] focus:border-[var(--err)] focus-visible:border-[var(--err)]',
+  valid: 'border-[var(--suc)] focus:border-[var(--suc)] focus-visible:border-[var(--suc)]',
+} as const

package/src/components/ui/index.ts

@@ -34,5 +34,8 @@ export { Pagination } from './Pagination.js'
 export type { PaginationProps } from './Pagination.js'
 export { SearchInput } from './SearchInput.js'
 export type { SearchInputProps } from './SearchInput.js'
+export { Toggle, toggleTrackVariants, toggleThumbVariants } from './Toggle.js'
+export type { ToggleProps, ToggleVariants } from './Toggle.js'
+export { formControlBase, formControlState } from './form-control.js'
 export { CommandPalette } from './CommandPalette.js'
 export type { CommandPaletteProps } from './CommandPalette.js'

package/src/layout/Header.tsx

@@ -8,6 +8,7 @@ import { CommandPalette } from '../components/CommandPalette.js'
 import { NotificationBell } from '../components/NotificationBell.js'
 import { useTheme } from '../components/ThemeProvider.js'
 import { LocaleSwitcher } from '../components/LocaleSwitcher.js'
+import { inputVariants } from '../components/ui/Input.js'
 
 export interface HeaderProps {
   onToggleSidebar: () => void
@@ -51,7 +52,7 @@ export function Header({
 
   return (
     <>
-      <header className="border-border bg-background flex h-14 items-center gap-3 border-b px-4">
+      <header className="border-sidebar-border bg-sidebar flex h-[var(--tbh)] items-center gap-3 border-b px-4">
         <button
           onClick={onToggleSidebar}
           className="hover:bg-accent rounded-lg p-2 transition-colors md:hidden"
@@ -77,7 +78,10 @@ export function Header({
             onKeyDown={(e) => {
               if (e.key === 'Escape') (e.target as HTMLInputElement).blur()
             }}
-            className="border-border bg-input-background text-foreground placeholder:text-muted-foreground focus:ring-ring h-9 w-full max-w-md rounded-lg border py-1.5 pr-14 pl-9 text-sm focus:border-transparent focus:ring-2 focus:outline-none"
+            className={inputVariants({
+              class:
+                'h-9 w-full max-w-md py-1.5 pr-14 pl-9 focus-visible:ring-0 focus-visible:ring-offset-0',
+            })}
           />
           {/* Keyboard hint pill. Hidden on narrow widths to avoid overlap. */}
           <span

package/src/layout/Sidebar.tsx

@@ -253,13 +253,13 @@ export function Sidebar({
 
   return (
     <aside
-      className={`bg-sidebar border-sidebar-border flex h-full flex-col border-r transition-all duration-200 ${
-        collapsed ? 'w-20' : 'w-64'
+      className={`bg-sidebar border-sidebar-border flex h-full flex-col border-r transition-[width] duration-[var(--motion-layout)] ${
+        collapsed ? 'w-[var(--sbw-col)]' : 'w-[var(--sbw)]'
       }`}
     >
       {/* Brand header — no toggle button here anymore; it now lives in the footer. */}
       <div
-        className={`border-sidebar-border flex h-14 shrink-0 items-center border-b px-4 ${
+        className={`border-sidebar-border flex h-[var(--tbh)] shrink-0 items-center border-b px-4 ${
           collapsed ? 'justify-center' : ''
         }`}
       >

package/src/layout/primitives/tokens.ts

@@ -49,13 +49,20 @@ export const tokens = {
 
   radius: {
     none: 0,
-    sm: 2,
-    md: 6,
-    lg: 8,
+    sm: 6,
+    md: 8,
+    lg: 10,
     xl: 12,
-    full: 9999,
+    full: 99,
   } as const satisfies Record<RadiusToken, number>,
 
+  /** Layout dimensions from the design system (px). */
+  layout: {
+    sidebarWidth: 224,
+    sidebarWidthCollapsed: 60,
+    topbarHeight: 56,
+  } as const,
+
   // Breakpoints mirror Tailwind defaults so primitives can compose with
   // utility classes without surprises. Use `matchMedia(`(min-width: …`)` to
   // sync JS-driven layout decisions with these values.

package/src/styles/actuate-tokens.css

@@ -0,0 +1,97 @@
+/*
+ * ActuateCMS design tokens — scoped to the admin root.
+ * Source: design-system/tokens.json (v1.0).
+ * Appearance accent overrides set --acc / --primary at runtime.
+ */
+
+.actuate-admin {
+  /* Surfaces */
+  --bg: #f5f4fa;
+  --sb: #ffffff;
+  --card: #ffffff;
+  --bdr: #e8e6f2;
+
+  /* Text */
+  --txt: #1a1827;
+  --sub: #6b6878;
+  --muted: #b0adbe;
+
+  /* Accent */
+  --acc: #7c3aed;
+  --acc-l: #ede9fe;
+  --acc-m: #c4b5fd;
+
+  /* Semantic */
+  --suc: #059669;
+  --suc-l: #ecfdf5;
+  --warn: #d97706;
+  --warn-l: #fffbeb;
+  --err: #dc2626;
+  --err-l: #fef2f2;
+  --info: #0891b2;
+  --info-l: #e0f7fa;
+
+  /* AI */
+  --ai1: #7c3aed;
+  --ai2: #c026d3;
+  --ai-soft: linear-gradient(135deg, rgba(124, 58, 237, 0.09), rgba(192, 38, 211, 0.07));
+
+  /* Layout */
+  --sbw: 224px;
+  --sbw-col: 60px;
+  --tbh: 56px;
+  --r: 10px;
+  --r-control: 8px;
+  --r-sm: 6px;
+  --r-pill: 99px;
+
+  /* Elevation */
+  --shd: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 4px rgba(0, 0, 0, 0.04);
+  --shd2: 0 4px 16px rgba(0, 0, 0, 0.1);
+
+  /* Typography */
+  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', monospace;
+  --fs-page: 21px;
+  --fs-card: 14px;
+  --fs-body: 13px;
+  --fs-sub: 12px;
+  --fs-hint: 11.5px;
+  --fs-label: 10px;
+
+  /* Motion */
+  --motion-fast: 0.12s;
+  --motion-base: 0.18s;
+  --motion-layout: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dark .actuate-admin,
+.actuate-admin.dark,
+.actuate-admin[data-theme='dark'] {
+  --bg: #0d0c18;
+  --sb: #141222;
+  --card: #1c1a2e;
+  --bdr: #2c2a42;
+
+  --txt: #eae8f5;
+  --sub: #8e8ba8;
+  --muted: #504e68;
+
+  --acc: #9d71f0;
+  --acc-l: #231950;
+  --acc-m: #5e3eaa;
+
+  --suc: #10b981;
+  --suc-l: #022c22;
+  --warn: #fbbf24;
+  --warn-l: #1a1000;
+  --err: #f87171;
+  --err-l: #200808;
+  --info: #38bdf8;
+  --info-l: #0a2838;
+
+  --ai-soft: linear-gradient(135deg, rgba(157, 113, 240, 0.16), rgba(192, 38, 211, 0.12));
+
+  --shd: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 4px rgba(0, 0, 0, 0.2);
+  --shd2: 0 4px 20px rgba(0, 0, 0, 0.45);
+}

package/src/styles/theme.css

@@ -1,113 +1,74 @@
 @custom-variant dark (&:is(.dark *));
 
+@import './actuate-tokens.css';
+
+/*
+ * Semantic Tailwind tokens mapped from the ActuateCMS design system.
+ * Raw tokens live in actuate-tokens.css; Appearance accent overrides
+ * mutate --acc, --primary, --sidebar-primary, etc. at runtime.
+ */
 .actuate-admin {
-  --font-size: 16px;
-  --background: #ffffff;
-  --foreground: oklch(0.145 0 0);
-  --card: #ffffff;
-  --card-foreground: oklch(0.145 0 0);
-  --popover: oklch(1 0 0);
-  --popover-foreground: oklch(0.145 0 0);
-  --primary: #030213;
-  --primary-foreground: oklch(1 0 0);
-  --secondary: oklch(0.95 0.0058 264.53);
-  --secondary-foreground: #030213;
-  --muted: #ececf0;
-  --muted-foreground: #717182;
-  --accent: #e9ebef;
-  --accent-foreground: #030213;
-  --destructive: #d4183d;
+  --font-size: var(--fs-body);
+  --background: var(--bg);
+  --foreground: var(--txt);
+  /* --card surface token is defined in actuate-tokens.css */
+  --card-foreground: var(--txt);
+  --popover: var(--card);
+  --popover-foreground: var(--txt);
+  --primary: var(--acc);
+  --primary-foreground: #ffffff;
+  --secondary: var(--acc-l);
+  --secondary-foreground: var(--txt);
+  --muted: color-mix(in srgb, var(--bdr) 55%, var(--card));
+  --muted-foreground: var(--sub);
+  --accent: var(--acc-l);
+  --accent-foreground: var(--acc);
+  --destructive: var(--err);
   --destructive-foreground: #ffffff;
-  /*
-   * Semantic status + brand tokens.
-   * ----------------------------------------------------------------
-   * `destructive` already covers the "error/danger" state; these add
-   * the remaining semantic states the admin needs (success / warning /
-   * info) plus the violet brand accent used for links and primary
-   * affordances. Values are tuned to read as TEXT on both the card
-   * surface and their own `/10` tint (badge backgrounds), and as a
-   * solid fill (dots, progress bars). The `*-foreground` variants are
-   * for text placed on a SOLID fill. Light values match the previous
-   * emerald/amber/blue/violet-600 palette so tokenizing is a no-op
-   * visually; dark values track the *-300/*-400 tints used before.
-   */
-  --success: oklch(0.5 0.13 155);
+  --success: var(--suc);
   --success-foreground: #ffffff;
-  --warning: oklch(0.52 0.13 73);
-  --warning-foreground: oklch(0.205 0 0);
-  --info: oklch(0.5 0.17 254);
+  --warning: var(--warn);
+  --warning-foreground: var(--txt);
+  --info: var(--info);
   --info-foreground: #ffffff;
-  --brand: oklch(0.54 0.23 293);
+  --brand: var(--acc);
   --brand-foreground: #ffffff;
-  --border: rgba(0, 0, 0, 0.1);
+  --border: var(--bdr);
   --input: transparent;
-  --input-background: #f3f3f5;
-  --switch-background: #cbced4;
+  --input-background: var(--card);
+  --switch-background: var(--bdr);
   --font-weight-medium: 500;
   --font-weight-normal: 400;
-  --ring: oklch(0.708 0 0);
-  --chart-1: oklch(0.646 0.222 41.116);
-  --chart-2: oklch(0.6 0.118 184.704);
-  --chart-3: oklch(0.398 0.07 227.392);
-  --chart-4: oklch(0.828 0.189 84.429);
-  --chart-5: oklch(0.769 0.188 70.08);
-  --radius: 0.625rem;
-  --sidebar: oklch(0.985 0 0);
-  --sidebar-foreground: oklch(0.145 0 0);
-  --sidebar-primary: #030213;
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.97 0 0);
-  --sidebar-accent-foreground: oklch(0.205 0 0);
-  --sidebar-border: oklch(0.922 0 0);
-  --sidebar-ring: oklch(0.708 0 0);
+  --ring: var(--acc-m);
+  --chart-1: var(--acc);
+  --chart-2: var(--info);
+  --chart-3: var(--suc);
+  --chart-4: var(--warn);
+  --chart-5: var(--err);
+  --radius: var(--r);
+  --sidebar: var(--sb);
+  --sidebar-foreground: var(--txt);
+  --sidebar-primary: var(--acc);
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: var(--acc-l);
+  --sidebar-accent-foreground: var(--acc);
+  --sidebar-border: var(--bdr);
+  --sidebar-ring: var(--acc-m);
+  --shadow-card: var(--shd);
+  --shadow-elevated: var(--shd2);
 }
 
 .dark .actuate-admin,
 .actuate-admin.dark {
-  --background: oklch(0.145 0 0);
-  --foreground: oklch(0.985 0 0);
-  --card: oklch(0.185 0 0);
-  --card-foreground: oklch(0.985 0 0);
-  --popover: oklch(0.185 0 0);
-  --popover-foreground: oklch(0.985 0 0);
-  --primary: oklch(0.985 0 0);
-  --primary-foreground: oklch(0.205 0 0);
-  --secondary: oklch(0.269 0 0);
-  --secondary-foreground: oklch(0.985 0 0);
-  --muted: oklch(0.269 0 0);
-  --muted-foreground: oklch(0.708 0 0);
-  --accent: oklch(0.269 0 0);
-  --accent-foreground: oklch(0.985 0 0);
-  --destructive: oklch(0.396 0.141 25.723);
-  --destructive-foreground: oklch(0.637 0.237 25.331);
-  --success: oklch(0.72 0.15 155);
-  --success-foreground: oklch(0.205 0 0);
-  --warning: oklch(0.8 0.13 80);
-  --warning-foreground: oklch(0.205 0 0);
-  --info: oklch(0.72 0.14 252);
-  --info-foreground: oklch(0.205 0 0);
-  --brand: oklch(0.72 0.18 293);
-  --brand-foreground: oklch(0.205 0 0);
-  --border: oklch(0.269 0 0);
-  --input: oklch(0.269 0 0);
-  --input-background: oklch(0.205 0 0);
-  --switch-background: oklch(0.35 0 0);
-  --ring: oklch(0.439 0 0);
-  --font-weight-medium: 500;
-  --font-weight-normal: 400;
-  --chart-1: oklch(0.488 0.243 264.376);
-  --chart-2: oklch(0.696 0.17 162.48);
-  --chart-3: oklch(0.769 0.188 70.08);
-  --chart-4: oklch(0.627 0.265 303.9);
-  --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
-  --sidebar-foreground: oklch(0.985 0 0);
-  --sidebar-primary: oklch(0.488 0.243 264.376);
-  --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
-  --sidebar-accent-foreground: oklch(0.985 0 0);
-  --sidebar-border: oklch(0.269 0 0);
-  --sidebar-ring: oklch(0.439 0 0);
+  --primary-foreground: #0d0c18;
+  --secondary-foreground: var(--txt);
+  --warning-foreground: var(--txt);
+  --brand-foreground: #0d0c18;
+  --success-foreground: #0d0c18;
+  --info-foreground: #0d0c18;
+  --destructive-foreground: #0d0c18;
+  --sidebar-primary-foreground: #0d0c18;
+  --muted: color-mix(in srgb, var(--bdr) 40%, var(--card));
 }
 
 @theme inline {
@@ -145,10 +106,10 @@
   --color-chart-3: var(--chart-3);
   --color-chart-4: var(--chart-4);
   --color-chart-5: var(--chart-5);
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 4px);
+  --radius-sm: var(--r-sm);
+  --radius-md: var(--r-control);
+  --radius-lg: var(--r);
+  --radius-xl: calc(var(--r) + 2px);
   --color-sidebar: var(--sidebar);
   --color-sidebar-foreground: var(--sidebar-foreground);
   --color-sidebar-primary: var(--sidebar-primary);
@@ -157,6 +118,12 @@
   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
+  --text-2xl: var(--fs-page);
+  --text-xl: calc(var(--fs-card) + 4px);
+  --text-lg: var(--fs-card);
+  --text-base: var(--fs-body);
+  --text-sm: var(--fs-sub);
+  --text-xs: var(--fs-hint);
 }
 
 @layer base {
@@ -166,102 +133,67 @@
 
   .actuate-admin {
     @apply bg-background text-foreground;
-    /*
-     * Content font is var-driven so the Appearance tab can switch it at
-     * runtime, but defaults to the system-ui stack. We do NOT load web fonts
-     * here (no Google Fonts / @font-face) — the chosen family is applied as a
-     * family string and falls back to system-ui when not installed, keeping
-     * the admin dependency-free per the design system. This is the single
-     * permitted `!important` (it must beat consumer global resets).
-     */
-    font-family: var(
-      --actuate-admin-font,
-      system-ui,
-      -apple-system,
-      BlinkMacSystemFont,
-      'Segoe UI',
-      Roboto,
-      sans-serif
-    ) !important;
+    font-family: var(--actuate-admin-font, var(--font-sans)) !important;
     font-size: var(--font-size);
     line-height: 1.5;
     isolation: isolate;
-    /*
-     * Use `contain: style` only — NOT `contain: layout`.
-     *
-     * `contain: layout` would make every `.actuate-admin` element a
-     * *containing block* for `position: fixed` descendants. That
-     * silently breaks <AdminRoot>'s own fixed overlay (`position: fixed;
-     * inset: 0`) whenever a consumer wraps AdminRoot in their own
-     * `<div className="actuate-admin">` for tailwind isolation — the
-     * inner fixed div resolves relative to the wrapper instead of the
-     * viewport, and if the wrapper is 0-height (because all its
-     * children are out-of-flow), every admin element renders offscreen
-     * while still reporting non-zero computed dimensions. The visible
-     * symptom is `<body> intercepts pointer events` on every click in
-     * Playwright; the user-visible symptom is a blank-looking admin.
-     *
-     * `contain: style` keeps the style-scoping benefit (e.g. counters
-     * don't leak out) without the positioning footgun.
-     */
     contain: style;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 
   .actuate-admin h1 {
-    font-size: var(--text-2xl);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--fs-page);
+    font-weight: 700;
+    letter-spacing: -0.5px;
     line-height: 1.5;
   }
 
   .actuate-admin h2 {
-    font-size: var(--text-xl);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--fs-card);
+    font-weight: 600;
     line-height: 1.5;
   }
 
   .actuate-admin h3 {
-    font-size: var(--text-lg);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--fs-card);
+    font-weight: 600;
     line-height: 1.5;
   }
 
   .actuate-admin h4 {
-    font-size: var(--text-base);
-    font-weight: var(--font-weight-medium);
+    font-size: var(--fs-body);
+    font-weight: 600;
     line-height: 1.5;
   }
 
   .actuate-admin label {
-    font-size: var(--text-base);
+    font-size: var(--fs-body);
     font-weight: var(--font-weight-medium);
     line-height: 1.5;
   }
 
   .actuate-admin button {
-    font-size: var(--text-base);
+    font-size: var(--fs-body);
     font-weight: var(--font-weight-medium);
     line-height: 1.5;
   }
 
   .actuate-admin input {
-    font-size: var(--text-base);
+    font-size: var(--fs-body);
     font-weight: var(--font-weight-normal);
     line-height: 1.5;
   }
+
+  .actuate-admin .actuate-section-label {
+    font-size: var(--fs-label);
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--sub);
+  }
 }
 
-/*
- * Reduce-motion (admin-level Appearance toggle).
- *
- * Intentionally UNLAYERED: unlayered rules beat Tailwind's `@layer utilities`
- * transition/animation classes without needing `!important`, so the toggle can
- * neutralize utility-driven motion. We shorten (not delete) durations and never
- * touch outlines/focus rings, so state changes and focus visibility remain
- * intact. The OS `prefers-reduced-motion` is still respected app-wide via
- * `motion-safe:`/`motion-reduce:`; this class lets users opt in regardless.
- */
 .actuate-admin.reduce-motion,
 .actuate-admin.reduce-motion *,
 .actuate-admin.reduce-motion *::before,

package/src/views/Forms.tsx

@@ -8,7 +8,7 @@
  * opens the right-side `FormSchemaDrawer`.
  */
 import { ChevronRight, ClipboardList, Plus, Search, Settings2 } from 'lucide-react'
-import * as Switch from '@radix-ui/react-switch'
+import { Toggle } from '../components/ui/Toggle.js'
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react'
 import { toast } from 'sonner'
 import { sortByRelevance } from '../lib/search.js'
@@ -382,14 +382,12 @@ function FormsTable({
                     {formatRelative(form.lastEntryAt)}
                   </td>
                   <td className="px-4 py-3 text-center">
-                    <Switch.Root
+                    <Toggle
                       checked={form.notifyEnabled ?? false}
                       onCheckedChange={(v) => onNotifyToggle(form, v)}
                       aria-label={`Notifications for ${form.name}`}
-                      className="bg-destructive data-[state=checked]:bg-success focus-visible:ring-ring relative inline-flex h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none"
-                    >
-                      <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
-                    </Switch.Root>
+                      variant="enabled"
+                    />
                   </td>
                   <td className="px-4 py-3 text-right">
                     <button

package/src/views/page-builder/BottomBar.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { Plus, Grid3X3 } from 'lucide-react'
-import * as Switch from '@radix-ui/react-switch'
+import { Toggle } from '../../components/ui/Toggle.js'
 import type { DeviceMode } from '../../hooks/useBuilderState.js'
 
 export interface BottomBarProps {
@@ -45,14 +45,11 @@ export function BottomBar({
       {/* Grid overlay toggle */}
       <label className="flex cursor-pointer items-center gap-2">
         <Grid3X3 size={14} className="text-muted-foreground" />
-        <Switch.Root
+        <Toggle
           checked={showGridOverlay}
           onCheckedChange={onToggleGrid}
-          className="bg-input-background data-[state=checked]:bg-primary relative h-[18px] w-8 rounded-full transition-colors"
           aria-label="Toggle grid overlay"
-        >
-          <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
-        </Switch.Root>
+        />
         <span className="text-muted-foreground text-xs">Grid</span>
       </label>
 

package/src/views/seo/TechnicalTab.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useId, useState } from 'react'
 import { RefreshCw, Map, AlertTriangle, CheckCircle2, ExternalLink, Bot } from 'lucide-react'
-import * as Switch from '@radix-ui/react-switch'
+import { Toggle as UiToggle } from '../../components/ui/Toggle.js'
 import { toast } from 'sonner'
 import {
   fetchSitemapStatus,
@@ -67,16 +67,13 @@ function Toggle({
           {help}
         </span>
       </span>
-      <Switch.Root
+      <UiToggle
         checked={checked}
         onCheckedChange={onChange}
         disabled={disabled}
         aria-labelledby={labelId}
         aria-describedby={helpId}
-        className="bg-input-background data-[state=checked]:bg-primary focus-visible:ring-ring relative h-[18px] w-8 shrink-0 rounded-full transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        <Switch.Thumb className="bg-background block h-3.5 w-3.5 translate-x-0.5 rounded-full shadow-sm transition-transform data-[state=checked]:translate-x-[14px]" />
-      </Switch.Root>
+      />
     </div>
   )
 }

package/src/views/settings/components.tsx

@@ -3,6 +3,7 @@
 import * as Dialog from '@radix-ui/react-dialog'
 import { AlertTriangle, Check, Loader2, Lock } from 'lucide-react'
 import { useId, type ReactNode } from 'react'
+import { Card, CardContent, CardDescription, CardHeader } from '../../components/ui/Card.js'
 import { adminPortalContainer } from '../../lib/portal-container.js'
 import type { SettingsSourceMetadata, ValidationIssue } from './useGeneralSettings.js'
 
@@ -34,21 +35,21 @@ export function SettingsCard({
 }) {
   const headingId = useId()
   return (
-    <section
-      aria-labelledby={headingId}
-      className={`border-border bg-card rounded-lg border p-6 ${className ?? ''}`}
-    >
-      <header className="mb-4 flex items-start justify-between gap-3">
+    <Card padding="none" aria-labelledby={headingId} role="region" className={className}>
+      <CardHeader className="flex items-start justify-between gap-3">
         <div className="min-w-0">
-          <Heading id={headingId} className="text-foreground text-lg font-medium">
+          <Heading
+            id={headingId}
+            className="text-[length:var(--fs-card)] font-semibold text-[var(--txt)]"
+          >
             {title}
           </Heading>
-          {description && <p className="text-muted-foreground mt-0.5 text-sm">{description}</p>}
+          {description && <CardDescription>{description}</CardDescription>}
         </div>
         {actions && <div className="flex shrink-0 items-center gap-2">{actions}</div>}
-      </header>
-      {children}
-    </section>
+      </CardHeader>
+      <CardContent className="pt-0 text-[var(--txt)]">{children}</CardContent>
+    </Card>
   )
 }