finish toggle

packages/design-system/atoms/toggle/Toggle.styled.tsx

@@ -0,0 +1,38 @@
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import styled, { css } from 'styled-components';
+import { transitions } from '../timings';
+
+export const ToggleState = styled.div`
+  height: 1em;
+  width: 1em;
+  border-radius: 1em;
+  background-color: ${palette.grey600};
+  position: absolute;
+  top: 0.15em;
+  left: 0.15em;
+  transform: translateX(0);
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform ${transitions.actionable}s ease-in-out;
+  }
+`;
+
+export const ToggleSwitch = styled.div<{ state: boolean }>`
+  display: inline-block;
+  background-color: ${(props) => (props.state ? palette.green200 : palette.taupe100)};
+  height: 1.3em;
+  width: 2.6em;
+  border-radius: 1.3em;
+  position: relative;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  top: 0.23em;
+  transition: background-color ${transitions.in2in}s ease-in-out;
+
+  ${ToggleState} {
+    ${(props) =>
+      props.state === true &&
+      css`
+        transform: translateX(1.3em);
+      `}
+  }
+`;

packages/design-system/atoms/toggle/Toggle.tsx

@@ -1,3 +1,5 @@
+import { ToggleState, ToggleSwitch } from './Toggle.styled';
+
 type ToggleProps = {
   onChange?: (newState: boolean) => void;
   children: React.ReactNode;
@@ -10,6 +12,9 @@ export const Toggle = (props: ToggleProps) => (
       props.onChange?.(!props.state);
     }}
   >
-    {props.children}:<div>{props.state ? 'on' : 'off'}!</div>
+    {props.children}{' '}
+    <ToggleSwitch state={props.state}>
+      <ToggleState />
+    </ToggleSwitch>
   </div>
 );