diff --git a/.specs/switch.md b/.specs/switch.md index fdcacdb0c..33c97d1ee 100644 --- a/.specs/switch.md +++ b/.specs/switch.md @@ -7,9 +7,9 @@ spec_version: 8 figma: url: https://www.figma.com/design/t97pXRs7xME3SJDs5iZ5RF/Webkit?node-id=2027-1247 node_id: 2027:1247 -checksum: d07fae422a497cb00a24640d4a769d8606e356e43bb0f237420bc7a29c6afe1e +checksum: d0c25d3560295ca270a2cd5f861fa667d3065be33ef85df51e018050a3f40bd8 created: 2026-05-22 -last_updated: 2026-06-23 +last_updated: 2026-07-25 --- # Switch — Component Spec @@ -72,17 +72,22 @@ const enabled = ref(false) |---|---| | track (off) — background | `var(--bg-surface)` | | track (off) — border | `var(--border-default)` | -| track (on) — background | `var(--success-contrast)` | +| track (on) — background | `var(--accent)` | +| handle (off) — fill | `var(--text-muted)` | +| handle (on) — fill | `var(--color-base-white)` (theme-independent white knob on the `--accent` track) | +| lock icon (off) | `var(--bg-surface)` | +| lock icon (on) | `var(--color-base-black)` (theme-independent black on the white knob; both stay fixed across themes) | | track (hover) — overlay | `var(--bg-hover)` (applies to both off and on tracks) | | focus-visible / `data-focused` ring | `var(--ring-color)` | -| shape | `rounded-full` (Tailwind native; pill — DESIGN.md § Shapes does not gate `rounded-full`) | +| shape — track | `rounded-[var(--shape-elements)]` (6px) | +| shape — handle | `rounded-[var(--radius)]` (4px — concentric with the track: track 6px − `px-0.5` inset 2px) | ## Theme gaps | Figma variable | Temporary primitive | Follow-up | |---|---|---| | handle fill (off) — Figma `--surface-300` (#b2b2b2) | inline `bg-[var(--text-muted)]` (closest semantic) | `TODO: introduce semantic --fg-handle (or equivalent) in DESIGN.md` | -| handle fill (on) — dark contrast over `--success-contrast` | inline `bg-[var(--bg-canvas)]` (closest semantic) | `TODO: introduce semantic --fg-handle-on in DESIGN.md` | +| handle fill (on) — fixed white knob over `--accent` (must not flip with theme) | inline `bg-[var(--color-base-white)]` + lock icon `text-[var(--color-base-black)]` (base primitives, intentionally theme-independent) | `TODO: introduce semantic --fg-handle-on / --fg-handle-on-contrast in DESIGN.md` | ## Accessibility (WCAG 2.1 AA) diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png index 97ff8b8fa..86384d327 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png index f5671b9c9..5b5ecfcdd 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--dark-tablet.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png index 98b8bf177..87fa90e74 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-desktop.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png index 176a8d5ca..e29a24029 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png index 98b8bf177..87fa90e74 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled--light-tablet.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png index f5671b9c9..5b5ecfcdd 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--disabled.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--dark-mobile.png index ed1086671..f9b54361c 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--dark-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--dark-tablet.png index a9602dfc5..4262093f8 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--dark-tablet.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-desktop.png index de8a1e36c..a05e1a1fc 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-desktop.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-mobile.png index a44a54ef4..8531bc7ae 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-tablet.png index de8a1e36c..a05e1a1fc 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states--light-tablet.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states.png index a9602dfc5..4262093f8 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitch--states.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png index 7c3c91660..db8dd9c6b 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--dark-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-mobile.png index c3e9cc9c3..13fbc21e1 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldswitchblock--disabled--light-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--default--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--default--dark-mobile.png index 6da208118..b86da71b3 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--default--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--default--dark-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--default--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--default--light-mobile.png index a7bd94b06..4b1ccc647 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--default--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--default--light-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--disabled--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--disabled--dark-mobile.png index 239674a63..ee997b3ba 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--disabled--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--disabled--dark-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--disabled--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--disabled--light-mobile.png index a4875145d..55bda1540 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--disabled--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--disabled--light-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--invalid--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--invalid--dark-mobile.png index df4ea392d..97807f122 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--invalid--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--invalid--dark-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--invalid--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--invalid--light-mobile.png index 7bf7e7ba0..5cdc18866 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--invalid--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--invalid--light-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--required--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--required--dark-mobile.png index d9836b55a..de44f8369 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--required--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--required--dark-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--required--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--required--light-mobile.png index bdbaf9ac1..790710ee8 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--required--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-fieldtextswitch--required--light-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--dark-mobile.png index 1a05134ee..0e5908b82 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--dark-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--dark-tablet.png index 19dda3b0d..18337ba61 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--dark-tablet.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-desktop.png index 6318d31f2..275d2dc85 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-desktop.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-mobile.png index 03ea572a5..f7ddbdc09 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-tablet.png index 797a09169..275d2dc85 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default--light-tablet.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default.png index 1bb7b9772..18337ba61 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--default.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--dark-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--dark-mobile.png index 25ff8d8be..94db878e1 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--dark-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--dark-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--dark-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--dark-tablet.png index 355a4949d..7500145f8 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--dark-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--dark-tablet.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-desktop.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-desktop.png index 8b4e3b544..d872680e0 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-desktop.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-desktop.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-mobile.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-mobile.png index f6b37743b..e5e645c3e 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-mobile.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-mobile.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-tablet.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-tablet.png index 5797172fc..d872680e0 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-tablet.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types--light-tablet.png differ diff --git a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types.png b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types.png index 8336897b8..7500145f8 100644 Binary files a/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types.png and b/apps/storybook/.storybook/test-visual/__image_snapshots__/linux/components-inputs-switch--types.png differ diff --git a/packages/webkit/src/components/inputs/switch/switch.vue b/packages/webkit/src/components/inputs/switch/switch.vue index 6ff8ed5cf..617ce5c7c 100644 --- a/packages/webkit/src/components/inputs/switch/switch.vue +++ b/packages/webkit/src/components/inputs/switch/switch.vue @@ -65,14 +65,14 @@ } const ROOT_CLASS = - 'group relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border border-[var(--border-default)] bg-[var(--bg-surface)] px-0.5 transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[focused]:ring-2 data-[focused]:ring-[var(--ring-color)] data-[focused]:ring-offset-2 data-[focused]:ring-offset-[var(--bg-canvas)] hover:shadow-[inset_0_0_0_999px_var(--bg-hover)] data-[checked]:border-transparent data-[checked]:bg-[var(--success-contrast)]' + 'group relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-[var(--shape-elements)] border border-[var(--border-default)] bg-[var(--bg-surface)] px-0.5 transition-colors duration-150 ease-out motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring-color)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg-canvas)] data-[focused]:ring-2 data-[focused]:ring-[var(--ring-color)] data-[focused]:ring-offset-2 data-[focused]:ring-offset-[var(--bg-canvas)] hover:shadow-[inset_0_0_0_999px_var(--bg-hover)] data-[checked]:border-transparent data-[checked]:bg-[var(--accent)]' const HANDLE_CLASS = - 'pointer-events-none relative inline-flex h-4 w-4 items-center justify-center rounded-full bg-[var(--text-muted)] transition-transform duration-150 ease-out motion-reduce:transition-none motion-reduce:transform-none group-data-[checked]:translate-x-4 group-data-[checked]:bg-[var(--bg-canvas)]' + 'pointer-events-none relative inline-flex h-4 w-4 items-center justify-center rounded-[var(--radius)] bg-[var(--text-muted)] transition-transform duration-150 ease-out motion-reduce:transition-none motion-reduce:transform-none group-data-[checked]:translate-x-4 group-data-[checked]:bg-[var(--color-base-white)]' const LOCK_ICON_CLASS = 'pi text-body-xxs leading-none' const LOCK_OFF_CLASS = `${LOCK_ICON_CLASS} pi-lock text-[var(--bg-surface)]` - const LOCK_ON_CLASS = `${LOCK_ICON_CLASS} pi-lock-open text-[var(--success-contrast)]` + const LOCK_ON_CLASS = `${LOCK_ICON_CLASS} pi-lock-open text-[var(--color-base-black)]` const rootClass = computed(() => cn(ROOT_CLASS, attrs.class as string | undefined))