[ENG-1079] Toggle focus styling update (#1309)

updated focus styling

packages/ui/src/Switch.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta } from '@storybook/react';
+import { Switch } from './Switch';
+
+const meta: Meta<typeof Switch> = {
+	title: 'Switch',
+	component: Switch,
+	argTypes: {},
+	parameters: {
+		backgrounds: {
+			default: 'dark'
+		}
+	},
+};
+
+export default meta;
+
+
+export const Default = () => {
+	return (
+		<div className="w-full h-screen p-10 bg-app">
+			<h1 className="text-[20px] font-bold text-white">Switch</h1>
+			<div className='mt-6'>
+			<Switch/>
+			</div>
+		</div>
+	);
+};

packages/ui/src/Switch.tsx

@@ -12,7 +12,7 @@ const switchStyles = cva(
 	[
 		'relative inline-flex shrink-0 transition',
 		'items-center rounded-full p-1',
-		'bg-app-line radix-state-checked:bg-accent'
+		'bg-app-line radix-state-checked:bg-accent focus:outline-none focus:ring-1 focus:ring-accent focus:ring-offset-2 focus:ring-offset-app-selected'
 	],
 	{
 		variants: {