v0.2.6

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",

src/components/Button/Button.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import { styled } from '../../styling/Theme'
 
 export const ButtonComponent = styled.button`
   color: red;

src/components/Checkbox/Checkbox.stories.tsx

@@ -2,11 +2,10 @@
 import React, { useRef, useState, useCallback } from 'react'
 import { action } from '@storybook/addon-actions'
 import { boolean, select, withKnobs } from '@storybook/addon-knobs'
-import styled from 'styled-components'
 import { random } from 'lodash-es'
 
 /* Internal dependencies */
-import { LightTheme, ThemeProvider } from '../../styling/Theme'
+import { styled, LightTheme, ThemeProvider } from '../../styling/Theme'
 import Checkbox from './Checkbox'
 import CheckType from './CheckType'
 

src/components/Checkbox/Checkbox.styled.ts

@@ -1,7 +1,5 @@
-/* External dependencies */
-import styled from 'styled-components'
-
 /* Internal dependencies */
+import { styled } from '../../styling/Theme'
 import { absoluteCenter } from '../../styling/Mixins'
 import Palette from '../../styling/Palette'
 import { StyledWrapperProps, StyledCheckerProps, StyledContentProps } from './Checkbox.types'
@@ -11,9 +9,6 @@ const CHECKER_BOX_SIZE = 18
 const CHECKER_ICON_THICKNESS = 2
 const CHECKER_BORDER_THICKNESS = 2
 
-const TRANSITION_DURATION = '.15s'
-const TRANSITION_FUNCTION = 'ease-in-out'
-
 export const Wrapper = styled.div<StyledWrapperProps>`
   display: inline-flex;
   align-items: center;
@@ -34,7 +29,7 @@ const checkerBase = (props: StyledCheckerProps) => `
     border-bottom: solid ${CHECKER_ICON_THICKNESS}px transparent;
     border-color: ${Palette.white};
     content: '';
-    transition: border-color ${TRANSITION_DURATION} ${TRANSITION_FUNCTION};
+    transition: ${props.theme?.transition?.BorderTransition};
   }
 
   ${(props.checkStatus === CheckType.True || props.checkStatus === CheckType.Partial) ? `
@@ -87,9 +82,7 @@ export const Checker = styled.div<StyledCheckerProps>`
   background-color: ${Palette.white};
   border: ${CHECKER_BORDER_THICKNESS}px solid ${props => props.theme?.colors?.border3};
   border-radius: 4px;
-  transition:
-    ${`color ${TRANSITION_DURATION} ${TRANSITION_FUNCTION}`},
-    ${`background ${TRANSITION_DURATION} ${TRANSITION_FUNCTION}`};
+  transition: ${props => props.theme?.transition?.BackgroundTransition}, ${props => props.theme?.transition?.ColorTransition};
 
   ${props => (!props.disabled ? `
     &:hover {
@@ -109,6 +102,6 @@ export const Checker = styled.div<StyledCheckerProps>`
 export const Content = styled.div<StyledContentProps>`
   box-sizing: border-box;
   padding: ${CHECKER_BORDER_THICKNESS}px 0;
-  margin-left: 2px;
+  margin-left: 9px;
   user-select: none;
 `

src/components/Icon/Icon.stories.tsx

@@ -1,11 +1,10 @@
 /* External dependencies */
 import React from 'react'
 import { withKnobs, select, color, number } from '@storybook/addon-knobs'
-import styled from 'styled-components'
 
 /* Internal dependencies */
 import { Text } from '../Text'
-import { ThemeProvider, LightTheme } from '../../styling/Theme'
+import { styled, ThemeProvider, LightTheme } from '../../styling/Theme'
 import Palette from '../../styling/Palette'
 import icons, { IconName } from './generated'
 import Icon from './Icon'

src/components/Icon/Icon.styled.ts

@@ -1,7 +1,5 @@
-/* External dependencies */
-import styled from 'styled-components'
-
 /* Internal dependencies */
+import { styled } from '../../styling/Theme'
 import { IconStyledProps } from './Icon.types'
 
 function getMargin({
@@ -16,6 +14,7 @@ function getMargin({
 const Icon = styled.svg<IconStyledProps>`
   color: ${props => props.color || 'inherit'};
   margin: ${getMargin};
+  transition: ${props => props.theme?.transition?.ColorTransition};
 `
 
 export default Icon

src/components/Radio/Radio.styled.ts

@@ -1,8 +1,6 @@
 /* eslint-disable @typescript-eslint/indent, consistent-return */
-/* External dependencies */
-import styled, { css } from 'styled-components'
-
 /* Internal dependencies */
+import { styled, css } from '../../styling/Theme'
 import RadioProps, { StyledRadioHandleProps } from './Radio.types'
 
 export const StyledRadioWrapper = styled.div<RadioProps>`
@@ -31,6 +29,7 @@ const StyledRadioHandleDot = css<StyledRadioHandleProps>`
       return 'transparent'
     }};
   border-radius: 50%;
+  transition: ${props => props.theme?.transition?.BackgroundTransition};
 `
 
 export const StyledRadioHandle = styled.div<RadioProps & StyledRadioHandleProps>`
@@ -51,6 +50,7 @@ export const StyledRadioHandle = styled.div<RadioProps & StyledRadioHandleProps>
       if (props.checked) { return props.theme?.colors?.success1 }
       return props.theme?.colors?.background0
     }};
+  transition: ${props => props.theme?.transition?.BackgroundTransition};
 
   &::after {
     ${StyledRadioHandleDot};

src/components/Switch/Switch.styled.ts

@@ -1,7 +1,5 @@
-/* External dependencies */
-import styled from 'styled-components'
-
 /* Internal dependencies */
+import { styled } from '../../styling/Theme'
 import { WrapperProps, ContentProps } from './Switch.types'
 
 const PADDING = 4

src/components/Text/Text.styled.ts

@@ -1,7 +1,5 @@
-/* External dependencies */
-import styled from 'styled-components'
-
 /* Internal dependencies */
+import { styled } from '../../styling/Theme'
 import TextProps from './Text.types'
 
 const Text = styled.span<TextProps>`

src/index.ts

@@ -12,7 +12,8 @@ export * from './layout/Navigation'
 export * from './layout/GlobalHeader'
 
 /* Styling */
+export { default as Transition } from './styling/Transition'
 export { default as Typography } from './styling/Typography'
+export { default as Palette } from './styling/Palette'
 export * from './styling/Colors'
 export * from './styling/Theme'
-export { default as Palette } from './styling/Palette'

src/layout/GNB/GNB.styled.ts

@@ -1,7 +1,5 @@
-/* External dependencies */
-import styled from 'styled-components'
-
 /* Internal dependencies */
+import { styled } from '../../styling/Theme'
 import GNBProps from './GNB.types'
 
 const GNB = styled.div<GNBProps>`

src/layout/GlobalHeader/GlobalHeader.styled.ts

@@ -1,7 +1,5 @@
-/* External dependencies */
-import styled from 'styled-components'
-
 /* Internal dependencies */
+import { styled } from '../../styling/Theme'
 import GlobalHeaderProps from './GlobalHeader.types'
 
 export const StyledGlobalHeader = styled.div<GlobalHeaderProps>`

src/layout/Navigation/Navigation.styled.ts

@@ -1,7 +1,5 @@
-/* External dependencies */
-import styled from 'styled-components'
-
 /* Internal dependencies */
+import { styled } from '../../styling/Theme'
 import NavigationProps from './Navigation.types'
 
 export const StyledNavigation = styled.div<NavigationProps>`

src/styling/Theme.ts

@@ -2,20 +2,26 @@
 import * as StyledComponents from 'styled-components'
 
 /* Internal dependencies */
+import Transition from './Transition'
 import BaseColors, { Colors } from './Colors'
 
 export default interface Theme {
   colors: Colors
+  transition: typeof Transition
 }
 
 export const LightTheme: Theme = {
   colors: BaseColors.Light,
+  transition: Transition,
 }
 
 export const DarkTheme: Theme = {
   colors: BaseColors.Dark,
+  transition: Transition,
 }
 
 export const {
+  default: styled,
+  css,
   ThemeProvider,
 } = StyledComponents as StyledComponents.ThemedStyledComponentsModule<Theme>

src/styling/Transition.ts

@@ -0,0 +1,39 @@
+enum TransitionDuration {
+  Default = '.15s',
+  Slow = '.25s',
+}
+
+enum TransitionEffect {
+  EaseInOut = 'ease-in-out',
+  EaseIn = 'ease-in',
+  DefaultCubic = 'cubic-bezier(.72, .36, .09, .99)',
+}
+
+const BackgroundTransition = `background-color ${TransitionEffect.EaseInOut} ${TransitionDuration.Default}`
+
+/* eslint-disable-next-line max-len */
+const BorderTransition = `border-color ${TransitionEffect.EaseInOut} ${TransitionDuration.Default}, box-shadow ${TransitionEffect.EaseInOut} ${TransitionDuration.Default}`
+
+const ColorTransition = `color ${TransitionEffect.EaseInOut} ${TransitionDuration.Default}`
+
+const OpacityTransition = `opacity ${TransitionEffect.EaseInOut} ${TransitionDuration.Default}`
+
+const OpacitySlowTransition = `opacity ${TransitionEffect.EaseInOut} ${TransitionDuration.Slow}`
+
+const BoxShadowTransition = `box-shadow ${TransitionEffect.EaseInOut} ${TransitionDuration.Default}`
+
+const TransformTransition = `transform ${TransitionEffect.EaseInOut} ${TransitionDuration.Default}`
+
+export default {
+  BackgroundTransition,
+  BorderTransition,
+  ColorTransition,
+  OpacityTransition,
+  OpacitySlowTransition,
+  BoxShadowTransition,
+  TransformTransition,
+
+  // Transition Atoms
+  TransitionEffect,
+  TransitionDuration,
+}