fix toggleswitch color when checked #542 (#545)

* fix(toggleswitch): only add color when toggle is checked

* chore(toggleswitch): make ToggleSwitch story interactive

Author: leorotzler

src/lib/components/ToggleSwitch/ToggleSwitch.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, Story } from '@storybook/react/types-6-0';
+import { useState } from 'react';
 import theme from '../../theme/default';
 import type { ToggleSwitchProps } from './ToggleSwitch';
 import { ToggleSwitch } from './ToggleSwitch';
@@ -10,7 +11,15 @@ export default {
   component: ToggleSwitch,
 } as Meta;
 
-const Template: Story<ToggleSwitchProps> = (args) => <ToggleSwitch {...args} />;
+const Template: Story<ToggleSwitchProps> = ({ checked, onChange, ...args }) => {
+  const [switchChecked, setSwitchChecked] = useState(checked);
+
+  const handleChange = () => {
+    setSwitchChecked((currentCheck) => !currentCheck);
+  };
+
+  return <ToggleSwitch checked={switchChecked} onChange={handleChange} {...args} />;
+};
 
 export const DefaultToggleSwitch = Template.bind({});
 DefaultToggleSwitch.storyName = 'Toggle switch';

src/lib/components/ToggleSwitch/ToggleSwitch.tsx

@@ -71,7 +71,7 @@ export const ToggleSwitch: FC<ToggleSwitchProps> = ({
           className={classNames(
             theme.toggle.base,
             theme.toggle.checked[checked ? 'on' : 'off'],
-            !disabled && theme.toggle.checked.color[color],
+            !disabled && checked && theme.toggle.checked.color[color],
           )}
         />
         <span