From 167fa1f64ab912a8a864c820b95ddacdd123d8fd Mon Sep 17 00:00:00 2001
From: Dilshod Turobov <deebov@yandex.com>
Date: Fri, 2 Oct 2026 14:13:22 +0200
Subject: [PATCH] Toggle: crisp inner border on the track

The track's 0.5px ring-secondary ring was anti-aliased into a soft light
halo against bg-brand-solid when the toggle was on. It's now a 1px inner
border in translucent alpha-black (inset-ring-1 inset-ring-alpha-black/10),
which stays crisp on both the gray and the brand track and flips to a light
edge in dark mode. The slim variant keeps its own 1px ring.
---
 components/base/toggle/toggle.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/components/base/toggle/toggle.tsx b/components/base/toggle/toggle.tsx
index c5b4c4a..20b5529 100644
--- a/components/base/toggle/toggle.tsx
+++ b/components/base/toggle/toggle.tsx
@@ -44,13 +44,15 @@ export const ToggleBase = ({ className, isHovered, isDisabled, isFocusVisible, i
     return (
         <div
             className={cx(
-                "cursor-pointer rounded-full bg-tertiary ring-[0.5px] ring-secondary outline-focus-ring transition duration-150 ease-linear ring-inset",
+                "cursor-pointer rounded-full bg-tertiary outline-focus-ring transition duration-150 ease-linear",
+                // A whole-pixel translucent inner border stays crisp on both the gray and the brand track.
+                !slim && "inset-ring-1 inset-ring-alpha-black/10",
                 isSelected && "bg-brand-solid",
                 isSelected && isHovered && "bg-brand-solid_hover",
                 isDisabled && "cursor-not-allowed opacity-50",
                 isFocusVisible && "outline-2 outline-offset-2",
 
-                slim && "ring-1",
+                slim && "ring-1 ring-secondary ring-inset",
                 slim && isSelected && "ring-transparent",
                 classes.root,
                 className,