refactor(templates): Refactor styles in Styleguide

components/templates/styleguide/_foo_bar.tsx

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components'
+import { StyledTag4 } from './_styled_tag4'
+
+const fooBar = css`
+  font-size: 200%;
+`
+
+export const FooBar = () => (
+  <StyledFooBar css={ fooBar }>This is FooBar</StyledFooBar>
+)
+
+export const FooBarTag4 = () => (
+  <StyledFooBarTag4>This is FooBarTag4</StyledFooBarTag4>
+)
+
+const StyledFooBar = styled.div`
+  color: red;
+`
+
+const StyledFooBarTag4 = styled(StyledTag4)`
+  font-weight: bold;
+`

components/templates/styleguide/_styled_tag4.ts

@@ -1,3 +1,3 @@
 import styled from 'styled-components'
 
-export const Tag4 = styled.div`border: 4px solid black;`
+export const StyledTag4 = styled.div`border: 4px solid black;`

components/templates/styleguide/index.tsx

@@ -1,24 +1,93 @@
 import { Index2 } from './index2'
-import { FooBar, FooBarTag4 } from './foo_bar'
-import * as Styled from './styled'
+import { FooBar, FooBarTag4 } from './_foo_bar'
+import styled, { css, keyframes, Keyframes } from 'styled-components'
+import { StyledTag4 } from './_styled_tag4'
+
+const hover = css`
+  &:hover {
+    color: ${({ theme }) => theme.colors.primary};
+    border-color: aqua;
+    box-shadow: -15px -15px 0 0 aqua, -30px -30px 0 0 cornflowerblue;
+  }
+`
+
+const prop = css`
+  font-size: 200%;
+  color: indigo;
+`
 
 const Styleguide = () => {
   return (
     <>
       <Index2 />
       <FooBar />
       <FooBarTag4 />
-      <Styled.Title>Styleguide</Styled.Title>
-      <div css={ Styled.prop }>This is css prop</div>
-      <Styled.Tag1>Cool Styles</Styled.Tag1>
-      <Styled.Tag2>
+      <StyledTitle>Styleguide</StyledTitle>
+      <div css={ prop }>This is css prop</div>
+      <StyledTag1>Cool Styles</StyledTag1>
+      <StyledTag2>
         With <code>:hover</code>.
-      </Styled.Tag2>
-      <Styled.Tag3 animation={ Styled.bounce }>Let's bounce.</Styled.Tag3>
-      <Styled.Tag3 animation={ Styled.shake }>Let's shake.</Styled.Tag3>
-      <Styled.Tag4>This is Styled.Tag4</Styled.Tag4>
+      </StyledTag2>
+      <StyledTag3 animation={ bounce }>Let&apos;s bounce.</StyledTag3>
+      <StyledTag3 animation={ shake }>Let&apos;s shake.</StyledTag3>
+      <StyledTag4>This is Styled.Tag4</StyledTag4>
     </>
   )
 }
 
 export default Styleguide
+
+const StyledTitle = styled.h1`
+  font-size: 4rem;
+  margin: 0;
+  color: ${({ theme }) => theme.colors.primary};
+`
+
+const base = css`
+  background-color: white;
+  color: cornflowerblue;
+  border: 1px solid lightgreen;
+  border-right: none;
+  border-bottom: none;
+  box-shadow: 5px 5px 0 0 lightgreen, 10px 10px 0 0 lightyellow;
+  transition: all 0.1s linear;
+  margin: 0 3rem 3rem;
+  padding: 1rem 0.5rem;
+`
+
+const bounce = keyframes`
+  from {
+    transform: scale(1.01);
+  }
+  to {
+    transform: scale(0.99);
+  }
+`
+
+const shake = keyframes`
+  10%, 90% { transform: translateY(-1px); }
+  20%, 80% { transform: translateY(2px); }
+  30%, 50%, 70% { transform: translateY(-4px); }
+  40%, 60% { transform: translateY(4px); }
+`
+
+const StyledTag1 = styled.div`
+  ${base};
+`
+
+const StyledTag2 = styled.div`
+  ${base};
+  ${hover};
+  & code {
+    background-color: linen;
+  }
+`
+
+const StyledTag3 = styled.div<{ animation: Keyframes }>`
+  ${base};
+  ${hover};
+  & code {
+    background-color: linen;
+  }
+  animation: ${({ animation }) => animation} 0.2s infinite ease-in-out alternate;
+`