feat(ui): convert Radio to styled component

packages/ui/src/atoms/Radio.js

 import React from 'react'
-import classnames from 'classnames'
-import classes from './Radio.local.scss'
+import styled, { keyframes } from 'styled-components'
+
+const Input = styled.input`
+  display: none;
+`
+
+const PseudoInput = styled.span`
+  --local-border-size: 2px;
+  --local-borderTwo-size: 1px;
+
+  display: inline-block;
+  content: ' ';
+  width: 0.6em;
+  height: 0.6em;
+  vertical-align: center;
+  margin-left: 0.2em;
+  margin-right: 0.6em;
+
+  border: var(--local-border-size) solid white;
+  border-radius: 50%;
+
+  transition: border 0.2s ease;
+`
+
+const Label = styled.span`
+  display: inline-block;
+  font-family: inherit;
+  font-size: 1em;
+  font-style: italic;
+`
+
+const checking = keyframes`
+  0% {
+    transform: scale(0.8);
+  }
+  20% {
+    transform: scale(1.2);
+  }
+  80% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(1);
+  }
+`
+
+const Root = styled.label`
+  align-items: center;
+  cursor: pointer;
+  display: ${props => (props.inline ? 'inline-flex' : 'flex')};
+  transition: all 2s;
+
+  &:not(:last-child) {
+    margin-right: ${props => (props.inline ? '2.7em' : '0')};
+    margin-bottom: ${props => (props.inline ? '0' : '0.5rem')};
+  }
+
+  ${PseudoInput} {
+    background: ${props => (props.checked ? 'currentcolor' : 'transparent')};
+    box-shadow: 0 0 0 var(--local-borderTwo-size) currentcolor;
+  }
+
+  &:hover {
+    ${Label} {
+      color: ${props => (props.checked ? 'inherit' : 'var(--color-primary)')};
+    }
+
+    ${PseudoInput} {
+      animation-name: ${props => (props.checked ? 'none' : checking)};
+      animation-duration: 0.5s;
+      box-shadow: 0 0 0 var(--local-borderTwo-size)
+        ${props => (props.checked ? 'currentcolor' : 'var(--color-primary)')};
+    }
+  }
+`
+
+/* Not used for now
+.root.author {
+  font-family: var(--font-author);
+}
+
+.root.author span {
+  font-size: 1.3em;
+  text-transform: lowercase;
+}
+*/
 
 const Radio = ({
   className,
@@ -14,20 +98,9 @@ const Radio = ({
   onChange,
   readonly,
 }) => (
-  <label
-    className={classnames(
-      classes.root,
-      {
-        [classes.inline]: inline,
-        [classes.checked]: checked,
-      },
-      className,
-    )}
-    style={{ color }}
-  >
-    <input
+  <Root checked={checked} style={{ color }}>
+    <Input
       checked={checked}
-      className={classes.input}
       disabled={readonly}
       name={name}
       onChange={onChange}
@@ -35,9 +108,8 @@ const Radio = ({
       type="radio"
       value={value}
     />{' '}
-    <span className={classes.pseudoInput} style={{ color }} />{' '}
-    <span className={classes.label}> {label} </span>{' '}
-  </label>
+    <PseudoInput style={{ color }} /> <Label> {label} </Label>{' '}
+  </Root>
 )
 
 export default Radio

packages/ui/src/atoms/Radio.local.scss

-.root {
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  transition: all 2s;
-}
-
-.root.inline {
-  display: inline-flex;
-}
-
-.root.inline:not(:last-child) {
-  margin-right: 2.7em;
-}
-
-.root:not(.inline):not(:last-child) {
-  margin-bottom: 0.5rem;
-}
-
-.label {
-  display: inline-block;
-  font-family: inherit;
-  font-size: 1em;
-  font-style: italic;
-}
-
-.root:not(.checked):hover .label {
-  color: var(--color-primary);
-}
-
-.input {
-  display: none;
-}
-
-.pseudoInput {
-  --local-border-size: 2px;
-  --local-borderTwo-size: 1px;
-
-  border: var(--local-border-size) solid white;
-  border-radius: 50%;
-  box-shadow: 0 0 0 var(--local-borderTwo-size) currentcolor;
-  content: ' ';
-  display: inline-block;
-  height: 0.6em;
-  margin-left: 0.2em;
-  margin-right: 0.6em;
-  transition: border 0.2s ease;
-  vertical-align: center;
-  width: 0.6em;
-}
-
-.root.checked .pseudoInput {
-  background: currentcolor;
-  box-shadow: 0 0 0 var(--local-borderTwo-size) currentcolor;
-}
-
-.root:not(.checked):hover .pseudoInput {
-  animation: checking 0.5s;
-  background: var(--color-primary);
-  box-shadow: 0 0 0 var(--local-borderTwo-size) var(--color-primary);
-}
-
-/* Not used for now
-.root.author {
-  font-family: var(--font-author);
-}
-
-.root.author span {
-  font-size: 1.3em;
-  text-transform: lowercase;
-}
-*/
-
-@keyframes checking {
-  0% {
-    transform: scale(0.8);
-  }
-  20% {
-    transform: scale(1.2);
-  }
-  80% {
-    transform: scale(1);
-  }
-  100% {
-    transform: scale(1);
-  }
-}