diff --git a/src/components/tabs-pane/index.js b/src/components/tabs-pane/index.js
index c456af657..dbc92a9c2 100644
--- a/src/components/tabs-pane/index.js
+++ b/src/components/tabs-pane/index.js
@@ -2,32 +2,9 @@ import Taro from '@tarojs/taro'
 import { View } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-
 import AtComponent from '../../common/component'
 
 export default class AtTabsPane extends AtComponent {
-  static defaultProps = {
-    customStyle: '',
-    className: '',
-    tabDirection: 'horizontal',
-    index: 0,
-    current: 0
-  }
-
-  static propTypes = {
-    customStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    className: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.string
-    ]),
-    tabDirection: PropTypes.oneOf(['horizontal', 'vertical']),
-    index: PropTypes.number,
-    current: PropTypes.number
-  }
-
   render () {
     const {
       customStyle,
@@ -54,3 +31,26 @@ export default class AtTabsPane extends AtComponent {
     )
   }
 }
+
+
+AtTabsPane.defaultProps = {
+  customStyle: '',
+  className: '',
+  tabDirection: 'horizontal',
+  index: 0,
+  current: 0,
+}
+
+AtTabsPane.propTypes = {
+  customStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  className: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string
+  ]),
+  tabDirection: PropTypes.oneOf(['horizontal', 'vertical']),
+  index: PropTypes.number,
+  current: PropTypes.number,
+}
diff --git a/src/components/textarea/index.js b/src/components/textarea/index.js
index 83fec432e..82e19889d 100644
--- a/src/components/textarea/index.js
+++ b/src/components/textarea/index.js
@@ -2,79 +2,9 @@ import Taro from '@tarojs/taro'
 import { View, Textarea } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
-
 import AtComponent from '../../common/component'
 
-const defaultFunc = () => { }
-
 export default class AtTextarea extends AtComponent {
-  static defaultProps = {
-    isTest: false,
-    customStyle: '',
-    className: '',
-    value: '',
-    cursorSpacing: 100,
-    maxlength: 200,
-    placeholder: '',
-    disabled: false,
-    autoFocus: false,
-    focus: false,
-    showConfirmBar: false,
-    selectionStart: -1,
-    selectionEnd: -1,
-    count: true,
-    fixed: false,
-    height: '',
-    textOverflowForbidden: true,
-    onLinechange: defaultFunc,
-    onChange: defaultFunc,
-    onFocus: defaultFunc,
-    onBlur: defaultFunc,
-    onConfirm: defaultFunc
-  }
-
-  static propTypes = {
-    customStyle: PropTypes.oneOfType([
-      PropTypes.object,
-      PropTypes.string
-    ]),
-    className: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.string
-    ]),
-    value: PropTypes.string.isRequired,
-    cursorSpacing: PropTypes.number,
-    maxlength: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.number
-    ]),
-    placeholderClass: PropTypes.string,
-    placeholderStyle: PropTypes.string,
-    placeholder: PropTypes.string,
-    disabled: PropTypes.bool,
-    autoFocus: PropTypes.bool,
-    focus: PropTypes.bool,
-    showConfirmBar: PropTypes.bool,
-    selectionStart: PropTypes.number,
-    selectionEnd: PropTypes.number,
-    count: PropTypes.bool,
-    textOverflowForbidden: PropTypes.bool,
-    fixed: PropTypes.bool,
-    height: PropTypes.string,
-    onLinechange: PropTypes.func,
-    onChange: PropTypes.func.isRequired,
-    onFocus: PropTypes.func,
-    onBlur: PropTypes.func,
-    onConfirm: PropTypes.func
-  }
-
-  constructor () {
-    super(...arguments)
-    if (process.env.NODE_ENV === 'test') {
-      Taro.initPxTransform({ designWidth: 750 })
-    }
-  }
-
   handleInput () {
     this.props.onChange(...arguments)
   }
@@ -170,3 +100,62 @@ export default class AtTextarea extends AtComponent {
     )
   }
 }
+
+AtTextarea.defaultProps = {
+  customStyle: '',
+  className: '',
+  value: '',
+  cursorSpacing: 100,
+  maxlength: 200,
+  placeholder: '',
+  disabled: false,
+  autoFocus: false,
+  focus: false,
+  showConfirmBar: false,
+  selectionStart: -1,
+  selectionEnd: -1,
+  count: true,
+  fixed: false,
+  height: '',
+  textOverflowForbidden: true,
+  onLinechange: () => {},
+  onChange: () => {},
+  onFocus: () => {},
+  onBlur: () => {},
+  onConfirm: () => {},
+}
+
+AtTextarea.propTypes = {
+  customStyle: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string
+  ]),
+  className: PropTypes.oneOfType([
+    PropTypes.array,
+    PropTypes.string
+  ]),
+  value: PropTypes.string.isRequired,
+  cursorSpacing: PropTypes.number,
+  maxlength: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number
+  ]),
+  placeholderClass: PropTypes.string,
+  placeholderStyle: PropTypes.string,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  autoFocus: PropTypes.bool,
+  focus: PropTypes.bool,
+  showConfirmBar: PropTypes.bool,
+  selectionStart: PropTypes.number,
+  selectionEnd: PropTypes.number,
+  count: PropTypes.bool,
+  textOverflowForbidden: PropTypes.bool,
+  fixed: PropTypes.bool,
+  height: PropTypes.string,
+  onLinechange: PropTypes.func,
+  onChange: PropTypes.func.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  onConfirm: PropTypes.func,
+}
diff --git a/src/components/timeline/index.js b/src/components/timeline/index.js
index a7a544021..84e4c01ca 100644
--- a/src/components/timeline/index.js
+++ b/src/components/timeline/index.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types'
 import Taro from '@tarojs/taro'
-import { View } from '@tarojs/components'
+import { View, Text } from '@tarojs/components'
 import classNames from 'classnames'
-
-import AtIcon from '../icon/index'
 import AtComponent from '../../common/component'
 
 export default class AtTimeline extends AtComponent {
@@ -29,24 +27,29 @@ export default class AtTimeline extends AtComponent {
         content = [],
       } = item
 
-      const itemRootClassName = ['at-timelineitem']
-      if (color) itemRootClassName.push(`at-timelineitem--${color}`)
+      const iconClass = classNames({
+        'at-icon': true,
+        [`at-icon-${icon}`]: icon,
+      })
+
+      const itemRootClassName = ['at-timeline-item']
+      if (color) itemRootClassName.push(`at-timeline-item--${color}`)
 
-      const dotClass = ['at-timelineitem__dot']
-      if (icon) dotClass.push('at-timelineitem__icon')
+      const dotClass = ['at-timeline-item__dot']
+      if (icon) dotClass.push('at-timeline-item__icon')
 
       return (
         <View className={classNames(itemRootClassName)} key={index}>
-          <View className='at-timelineitem__tail'></View>
+          <View className='at-timeline-item__tail'></View>
           <View className={classNames(dotClass)}>
-            {icon && <AtIcon customStyle={{ fontSize: '16px' }} value={icon} ></AtIcon>}
+            {icon && <Text className={iconClass}></Text>}
           </View>
-          <View className='at-timelineitem__content'>
-            <View className='at-timelineitem__content-item'>{title}</View>
+          <View className='at-timeline-item__content'>
+            <View className='at-timeline-item__content-item'>{title}</View>
             {
               content.map((sub, subIndex) => (
                 <View
-                  className='at-timelineitem__content-item at-timelineitem__content--sub'
+                  className='at-timeline-item__content-item at-timeline-item__content--sub'
                   key={subIndex}
                 >
                   {sub}
diff --git a/src/components/toast/index.js b/src/components/toast/index.js
index 83c7646ea..9b87fc5cf 100644
--- a/src/components/toast/index.js
+++ b/src/components/toast/index.js
@@ -3,8 +3,6 @@ import { View, Text, Image } from '@tarojs/components'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import _isFunction from 'lodash/isFunction'
-
-import AtIcon from '../icon/index'
 import AtComponent from '../../common/component'
 import statusImg from './img.json'
 
@@ -95,14 +93,18 @@ export default class AtToast extends AtComponent {
     const isRenderIcon = !!(icon && !(image || statusImg[status]))
 
     const bodyClass = classNames('toast-body', {
-      'at-toast-body--custom-image': image,
+      'at-toast__body--custom-image': image,
       'toast-body--text': !realImg && !icon,
-      [`at-toast-body--${status}`]: !!status
+      [`at-toast__body--${status}`]: !!status
+    })
+
+    const iconClass = classNames('at-icon', {
+      [`at-icon-${icon}`]: icon,
     })
 
     return _isOpened ? (
       <View className={classNames('at-toast', this.props.className)}>
-        {hasMask && <View className='at-toast-overlay' />}
+        {hasMask && <View className='at-toast__overlay' />}
         <View className={bodyClass} onClick={this.handleClick}>
           <View className='toast-body-content'>
             {realImg && (
@@ -116,7 +118,7 @@ export default class AtToast extends AtComponent {
             )}
             {isRenderIcon && (
               <View className='toast-body-content__icon'>
-                <AtIcon customStyle={{ fontSize: '50px' }} value={icon} color='white' />
+                <Text className={iconClass}></Text>
               </View>
             )}
             {text && (
diff --git a/src/pages/form/textarea/index.js b/src/pages/form/textarea/index.js
index a4029bea1..862853a55 100644
--- a/src/pages/form/textarea/index.js
+++ b/src/pages/form/textarea/index.js
@@ -42,7 +42,7 @@ export default class Index extends Taro.Component {
                 <AtTextarea
                   value={this.state.value1}
                   onChange={this.handleChange.bind(this, 'value1')}
-                  maxLength={200}
+                  maxlength={200}
                   placeholder='你的问题是...'
                 />
               </View>
@@ -56,7 +56,7 @@ export default class Index extends Taro.Component {
                   count={false}
                   value={this.state.value2}
                   onChange={this.handleChange.bind(this, 'value2')}
-                  maxLength={200}
+                  maxlength={200}
                   placeholder='你的问题是...'
                 />
               </View>
@@ -70,7 +70,7 @@ export default class Index extends Taro.Component {
                   textOverflowForbidden={false}
                   value={this.state.value3}
                   onChange={this.handleChange.bind(this, 'value3')}
-                  maxLength={200}
+                  maxlength={200}
                   placeholder='你的问题是...'
                 />
               </View>
@@ -84,7 +84,7 @@ export default class Index extends Taro.Component {
                   height='300'
                   value={this.state.value4}
                   onChange={this.handleChange.bind(this, 'value4')}
-                  maxLength={200}
+                  maxlength={200}
                   placeholder='你的问题是...'
                 />
               </View>
diff --git a/src/style/components/tabs.scss b/src/style/components/tabs.scss
index 812436c82..bd89fc5e2 100644
--- a/src/style/components/tabs.scss
+++ b/src/style/components/tabs.scss
@@ -1,6 +1,14 @@
 @import '../mixins/index.scss';
 @import '../variables/default.scss';
 
+$at-tabs-color: $color-text-base;
+$at-tabs-color-active: $color-brand;
+$at-tabs-font-size: $font-size-base;
+$at-tabs-line-height: 1PX;
+$at-tabs-underline-color: $color-grey-5;
+$at-tabs-bg-color: $color-bg;
+$at-tabs-pane-min-height: 100px;
+
 .at-tabs {
   width: 100%;
   height: 100%;
@@ -11,8 +19,8 @@
     position: relative;
     flex: 1;
     padding: $spacing-v-lg $spacing-h-lg;
-    color: $color-text-base;
-    font-size: $font-size-base;
+    color: $at-tabs-color;
+    font-size: $at-tabs-font-size;
     text-overflow: ellipsis;
     overflow: hidden;
 
@@ -22,14 +30,14 @@
       left: 0;
       bottom: 0;
       width: 100%;
-      height: 1PX;
-      background-color: $color-brand;
+      height: $at-tabs-line-height;
+      background-color: $at-tabs-color-active;
       transform: scaleX(0);
       transition: all 0.15s;
     }
 
     &--active {
-      color: $color-brand;
+      color: $at-tabs-color-active;
 
       &::after {
         transform: scaleX(1);
@@ -41,10 +49,10 @@
     position: relative;
     display: flex;
     width: 100%;
-    box-sizing: border-box;
     text-align: center;
     white-space: nowrap;
-    background-color: $color-bg;
+    background-color: $at-tabs-bg-color;
+    box-sizing: border-box;
     overflow: -moz-scrollbars-none;
 
     &--scroll {
@@ -59,30 +67,32 @@
     }
 
     &::-webkit-scrollbar {
-      height: 0 !important;
+      display: none;
       width: 0 !important;
+      height: 0 !important;
+      background: transparent;
     }
   }
 
   &__body {
     display: block;
+    width: 100%;
     white-space: nowrap;
     transition: all 0.3s;
-    width: 100%;
-    overflow: visible;
     will-change: transform, left, top;
+    overflow: visible;
   }
 
   &__underline {
     content: '';
     position: absolute;
-    background-color: $color-grey-5;
     top: 0;
     left: 0;
     bottom: auto;
     right: auto;
     width: 600%;
-    height: 1PX;
+    height: $at-tabs-line-height;
+    background-color: $at-tabs-underline-color;
   }
 
   /* modifiers */
@@ -94,7 +104,7 @@
     .at-tabs__body {
       display: inline-block;
       flex: 1;
-      height: 200px;
+      height: $at-tabs-pane-min-height;
       width: auto;
     }
 
@@ -102,7 +112,7 @@
       top: 0;
       left: 0;
       bottom: auto;
-      width: 1PX;
+      width: $at-tabs-line-height;
       height: 100%;
     }
 
@@ -122,7 +132,7 @@
         right: 0;
         bottom: auto;
         left: auto;
-        width: 1PX;
+        width: $at-tabs-line-height;
         height: 100%;
         transform: scaleY(0);
       }
@@ -138,8 +148,6 @@
   display: inline-block;
   width: 100%;
   white-space: initial;
-  vertical-align: top;
-  font-size: 28px;
   box-sizing: border-box;
 
   /* modifiers */
diff --git a/src/style/components/tag.scss b/src/style/components/tag.scss
index 63ab87b0d..43c492931 100644
--- a/src/style/components/tag.scss
+++ b/src/style/components/tag.scss
@@ -1,29 +1,39 @@
 @import '../mixins/index.scss';
 @import '../variables/default.scss';
 
+$at-tag-height: 60px;
+$at-tag-height-sm: 40px;
+$at-tag-color: $color-grey-1;
+$at-tag-color-active: $color-brand-light;
+$at-tag-font-size: $font-size-base;
+$at-tag-font-size-sm: $font-size-xs;
+$at-tag-bg-color: $color-bg-grey;
+$at-tag-border-size: 1PX;
+
 .at-tag {
   display: inline-block;
   padding: 0 $spacing-h-xl;
-  height: 60px;
-  color: $color-grey-1;
-  font-size: $font-size-base;
+  height: $at-tag-height;
+  color: $at-tag-color;
+  font-size: $at-tag-font-size;
   text-align: center;
-  line-height: calc(60px - 2PX);
+  line-height: $at-tag-height - 2px;
   vertical-align: middle;
-  border: 1PX solid $color-grey-6;
+  border: $at-tag-border-size solid $at-tag-bg-color;
   border-radius: $border-radius-md;
-  background-color: $color-bg-grey;
+  background-color: $at-tag-bg-color;
   box-sizing: border-box;
 
+  /* modifiers */
   &--active {
-    color: $color-brand-light;
-    border: 1PX solid $color-brand-light;
+    color: $at-tag-color-active;
+    border-color: $at-tag-color-active;
     background-color: $color-bg;
 
     &.at-tag--primary {
       color: $color-text-base-inverse;
-      border: 1PX solid $color-brand-light;
-      background-color: $color-brand-light;
+      border-color: $at-tag-color-active;
+      background-color: $at-tag-color-active;
     }
   }
 
@@ -31,16 +41,20 @@
     opacity: $opacity-disabled;
   }
 
-  &--small {
-    padding: 0 $spacing-h-md;
-    height: 40px;
-    font-size: $font-size-xs;
-    line-height: calc(40px - 2PX);
-  }
-
   &--circle {
-    border-radius: 30px;
+    border-radius: $at-tag-height / 2;
     background-clip: border-box;
     overflow: hidden;
   }
+
+  &--small {
+    padding: 0 $spacing-h-md;
+    height: $at-tag-height-sm;
+    font-size: $at-tag-font-size-sm;
+    line-height: $at-tag-height-sm - 2px;
+
+    &.at-tag--circle {
+      border-radius: $at-tag-height-sm / 2;
+    }
+  }
 }
diff --git a/src/style/components/textarea.scss b/src/style/components/textarea.scss
index a4ae2e17b..f7102feb2 100644
--- a/src/style/components/textarea.scss
+++ b/src/style/components/textarea.scss
@@ -1,22 +1,26 @@
 @import '../mixins/index.scss';
 @import '../variables/default.scss';
 
-$textarea-input-height: $font-size-base * 4;
+$at-textarea-input-height: $font-size-base * 4;
+$at-textarea-font-size: $font-size-lg;
+$at-textarea-bg-color: $color-bg;
+$at-textarea-tips-color: $color-text-placeholder;
+$at-textarea-tips-size: $font-size-base;
 
 .at-textarea {
   padding: $spacing-v-md;
   width: 100%;
-  font-size: $font-size-lg;
+  font-size: $at-textarea-font-size;
   line-height: $line-height-zh;
   border-radius: $border-radius-md;
-  background-color: $color-bg;
+  background-color: $at-textarea-bg-color;
   box-sizing: border-box;
   @include border-thin($width: 1PX);
 
   &__textarea {
     width: 100%;
-    height: $textarea-input-height;
-    font-size: $font-size-lg;
+    height: $at-textarea-input-height;
+    font-size: $at-textarea-font-size;
     line-height: $line-height-base;
     outline: none;
     resize: none;
@@ -29,12 +33,12 @@ $textarea-input-height: $font-size-base * 4;
   }
 
   &__bottom {
+    padding-top: $spacing-v-sm;
     width: 100%;
+    color: $at-textarea-tips-color;
+    font-size: $at-textarea-tips-size;
     text-align: right;
-    padding-top: $spacing-v-sm;
     line-height: $line-height-base;
-    font-size: $font-size-base;
-    color: $color-text-placeholder;
   }
 
   &--error {
diff --git a/src/style/components/timeline.scss b/src/style/components/timeline.scss
index 00b7c6589..aced39827 100644
--- a/src/style/components/timeline.scss
+++ b/src/style/components/timeline.scss
@@ -1,24 +1,32 @@
 @import '../mixins/index.scss';
 @import '../variables/default.scss';
 
-$timeline-margin-left: 40px;
-$timeline-dot-size: 24px;
-
-.at-timelineitem {
+$at-timeline-offset-left: 40px;
+$at-timeline-dot-size: 24px;
+$at-timeline-title-color: $color-grey-0;
+$at-timeline-title-font-size: $font-size-base;
+$at-timeline-desc-color: $color-grey-1;
+$at-timeline-desc-font-size: $font-size-sm;
+$at-timeline-dot-color: $color-bg;
+$at-timeline-dot-bg-color: $color-info;
+$at-timeline-line-color: $color-border-lighter;
+
+.at-timeline-item {
   position: relative;
   padding: 0 0 $spacing-v-sm;
 
+  /* elements */
   &__content {
-    margin-left: $timeline-margin-left;
+    margin-left: $at-timeline-offset-left;
     min-height: 56px;
-    color: $color-grey-0;
-    font-size: $font-size-base;
+    color: $at-timeline-title-color;
+    font-size: $at-timeline-title-font-size;
     line-height: $line-height-zh;
     text-align: left;
 
     &--sub {
-      color: $color-grey-1;
-      font-size: $font-size-sm;
+      color: $at-timeline-desc-color;
+      font-size: $at-timeline-desc-font-size;
     }
   }
 
@@ -27,49 +35,59 @@ $timeline-dot-size: 24px;
     position: absolute;
     left: 0;
     top: 5px;
-    width: 32px;
-    height: 32px;
+    width: $at-timeline-dot-size;
+    height: $at-timeline-dot-size;
     font-size: 0;
-    text-align: left;
+    text-align: center;
     vertical-align: middle;
+    border-radius: $border-radius-circle;
+    background: $at-timeline-dot-color;
     box-sizing: border-box;
-    background-color: $color-bg;
     z-index: 1;
+
+    .at-icon {
+      font-size: $at-timeline-dot-size;
+    }
   }
 
   &__dot {
-    left: -1px;
-
     &::after {
       content: '';
-      margin-top: 5px;
       display: inline-block;
       box-sizing: border-box;
-      width: $timeline-dot-size;
-      height: $timeline-dot-size;
+      width: $at-timeline-dot-size;
+      height: $at-timeline-dot-size;
       border: 1PX solid transparent;
       border-radius: $border-radius-circle;
-      border-color: $color-info;
+      border-color: $at-timeline-dot-bg-color;
     }
 
-    &.at-timelineitem__icon {
+    &.at-timeline-item__icon {
       &::after {
-        display: none;
+        border-color: transparent;
       }
     }
   }
 
   &__icon {
-    left: -4px;
-    color: $color-info;
+    color: $at-timeline-dot-bg-color;
   }
 
+  &__tail {
+    position: absolute;
+    top: $at-timeline-dot-size / 2;
+    bottom: -$at-timeline-dot-size / 2;
+    left: $at-timeline-dot-size / 2 - 2px;
+    border-left: 1PX solid $at-timeline-line-color;
+  }
+
+  /* modifiers */
   &--green {
-    .at-timelineitem__icon {
+    .at-timeline-item__icon {
       color: $color-success;
     }
 
-    .at-timelineitem__dot {
+    .at-timeline-item__dot {
       &::after {
         border-color: $color-success;
       }
@@ -77,11 +95,11 @@ $timeline-dot-size: 24px;
   }
 
   &--red {
-    .at-timelineitem__icon {
+    .at-timeline-item__icon {
       color: $color-error;
     }
 
-    .at-timelineitem__dot {
+    .at-timeline-item__dot {
       &::after {
         border-color: $color-error;
       }
@@ -89,40 +107,32 @@ $timeline-dot-size: 24px;
   }
 
   &--yellow {
-    .at-timelineitem__icon {
+    .at-timeline-item__icon {
       color: $color-warning;
     }
 
-    .at-timelineitem__dot {
+    .at-timeline-item__dot {
       &::after {
         border-color: $color-warning;
       }
     }
   }
-
-  &__tail {
-    position: absolute;
-    top: 18px;
-    bottom: -10px;
-    left: 10px;
-    border-left: 2px solid $color-border-lighter;
-  }
 }
 
 .at-timeline {
-  .at-timelineitem:last-child {
-    .at-timelineitem__tail {
+  .at-timeline-item:last-child {
+    .at-timeline-item__tail {
       display: none;
     }
   }
 
   &--pending {
-    .at-timelineitem:nth-last-child(2) {
-      .at-timelineitem__content {
+    .at-timeline-item:nth-last-child(2) {
+      .at-timeline-item__content {
         min-height: 80px;
       }
 
-      .at-timelineitem__tail {
+      .at-timeline-item__tail {
         border-left-style: dotted;
       }
     }
diff --git a/src/style/components/toast.scss b/src/style/components/toast.scss
index e45365e8d..5c8b30d1b 100644
--- a/src/style/components/toast.scss
+++ b/src/style/components/toast.scss
@@ -11,73 +11,81 @@
   }
 }
 
-$toast-image-size: 120px;
-$toast-loading-size: 100px;
+$at-toast-image-size: 120px;
+$at-toast-min-width: 256px;
+$at-toast-color: $color-white;
+$at-toast-font-size: $font-size-base;
+$at-toast-icon-size: 80px;
+$at-toast-bg-color: rgba($color: $color-black-0, $alpha: 0.8);
 
 .at-toast {
-  &-overlay {
+  /* elements */
+  &__overlay {
     @include overlay;
 
     position: fixed;
     opacity: 0;
     z-index: $zindex-toast;
   }
-}
 
-.at-toast .toast-body {
-  @include absolute-center(fixed);
+  &__body {
+    &--loading {
+      .toast-body-content__img-item {
+        animation: atRotate 1350ms linear infinite;
+      }
+    }
+  }
 
-  z-index: $zindex-toast;
-  padding: $spacing-v-lg $spacing-h-xl;
-  background-color: rgba($color: $color-black-0, $alpha: 0.8);
-  border-radius: $border-radius-md;
-  min-width: 256px;
+  .toast-body {
+    @include absolute-center(fixed);
 
-  &-content {
-    &__icon {
-      line-height: 0;
-      text-align: center;
-    }
+    padding: $spacing-v-lg $spacing-h-xl;
+    min-width: $at-toast-min-width;
+    border-radius: $border-radius-md;
+    background-color: $at-toast-bg-color;
+    z-index: $zindex-toast;
+
+    &-content {
+      &__icon {
+        color: $at-toast-color;
+        font-size: $at-toast-icon-size;
+        text-align: center;
+      }
 
-    &__img {
-      line-height: 0;
-      text-align: center;
+      &__img {
+        line-height: 0;
+        text-align: center;
 
-      &-item {
-        width: $toast-image-size;
-        height: $toast-image-size;
+        &-item {
+          width: $at-toast-image-size;
+          height: $at-toast-image-size;
+        }
       }
-    }
 
-    &__info {
-      margin-top: $spacing-v-md;
-      color: $color-white;
-      line-height: $line-height-zh;
-      font-size: $font-size-base;
-      text-align: center;
+      &__info {
+        margin-top: $spacing-v-md;
+        color: $at-toast-color;
+        font-size: $at-toast-font-size;
+        line-height: $line-height-zh;
+        text-align: center;
+      }
     }
-  }
 
-  &--text {
-    padding: $spacing-v-sm $spacing-h-lg;
-    line-height: $line-height-zh;
-    min-width: initial;
+    &--text {
+      padding: $spacing-v-sm $spacing-h-lg;
+      line-height: $line-height-zh;
+      min-width: initial;
 
-    .toast-body-content__info {
-      margin-top: 0;
+      .toast-body-content__info {
+        margin-top: 0;
+      }
     }
-  }
 
-  &.at-toast-body--custom-image,
-  &.at-toast-body--success,
-  &.at-toast-body--error,
-  &.at-toast-body--loading {
-    padding-bottom: $spacing-v-lg - (($font-size-base * $line-height-zh - $font-size-base) / 2);
-  }
-}
-
-.at-toast-body--loading {
-  .toast-body-content__img-item {
-    animation: atRotate 1350ms linear infinite;
+    &.at-toast__body--custom-image,
+    &.at-toast__body--success,
+    &.at-toast__body--error,
+    &.at-toast__body--loading {
+      padding-bottom: $spacing-v-lg - (($at-toast-font-size * $line-height-zh - $at-toast-font-size) / 2);
+    }
   }
 }