diff --git a/src/Button/src/styles/theme.js b/src/Button/src/styles/theme.js
index 5a73a8e33..0a934dbe1 100644
--- a/src/Button/src/styles/theme.js
+++ b/src/Button/src/styles/theme.js
@@ -1,132 +1,135 @@
+import lightScheme from '../../../_interoperation/lightStyleScheme.scss'
+import darkScheme from '../../../_interoperation/darkStyleScheme.scss'
+
 const light = {
   default: {
-    color: '#fff',
-    hoverColor: '#fff',
-    activeColor: '#fff',
-    focusColor: '#fff',
+    color: lightScheme.baseBackgroundColor,
+    hoverColor: lightScheme.baseBackgroundColor,
+    activeColor: lightScheme.baseBackgroundColor,
+    focusColor: lightScheme.baseBackgroundColor,
 
-    textColor: 'rgba(0, 0, 0, .72)',
-    hoverTextColor: '#36ad6a',
-    activeTextColor: '#0c7a43',
-    focusTextColor: '#36ad6a',
+    textColor: lightScheme.secondaryTextColor,
+    hoverTextColor: lightScheme.primaryHoverColor,
+    activeTextColor: lightScheme.primaryActiveColor,
+    focusTextColor: lightScheme.primaryHoverColor,
 
-    textTypedTextColor: 'rgba(0, 0, 0, .72)',
-    textTypedHoverTextColor: '#36ad6a',
-    textTypedActiveTextColor: '#0c7a43',
-    textTypedFocusTextColor: '#36ad6a',
+    textTypedTextColor: lightScheme.secondaryTextColor,
+    textTypedHoverTextColor: lightScheme.primaryHoverColor,
+    textTypedActiveTextColor: lightScheme.primaryActiveColor,
+    textTypedFocusTextColor: lightScheme.primaryHoverColor,
 
-    ghostTypedTextColor: 'rgba(0, 0, 0, .72)',
-    ghostTypedHoverTextColor: '#36ad6a',
-    ghostTypedActiveTextColor: '#0c7a43',
-    ghostTypedFocusTextColor: '#36ad6a',
+    ghostTypedTextColor: lightScheme.secondaryTextColor,
+    ghostTypedHoverTextColor: lightScheme.primaryHoverColor,
+    ghostTypedActiveTextColor: lightScheme.primaryActiveColor,
+    ghostTypedFocusTextColor: lightScheme.primaryHoverColor,
 
-    borderColor: '#d9d9d9',
-    hoverBorderColor: '#36ad6a',
-    activeBorderColor: '#0c7a43',
-    focusBorderColor: '#36ad6a',
+    borderColor: lightScheme.borderColor,
+    hoverBorderColor: lightScheme.primaryHoverColor,
+    activeBorderColor: lightScheme.primaryActiveColor,
+    focusBorderColor: lightScheme.primaryHoverColor,
 
-    rippleColor: '#18a058'
+    rippleColor: lightScheme.primaryColor
   },
   primary: {
-    color: '#18a058',
-    hoverColor: '#36ad6a',
-    activeColor: '#0c7a43',
-    focusColor: '#36ad6a',
-    textColor: '#fff'
+    color: lightScheme.primaryColor,
+    hoverColor: lightScheme.primaryHoverColor,
+    activeColor: lightScheme.primaryActiveColor,
+    focusColor: lightScheme.primaryHoverColor,
+    textColor: lightScheme.baseBackgroundColor
   },
   info: {
-    color: '#2080f0',
-    hoverColor: '#4098fc',
-    activeColor: '#1060c9',
-    focusColor: '#4098fc',
-    textColor: '#fff'
+    color: lightScheme.infoColor,
+    hoverColor: lightScheme.infoHoverColor,
+    activeColor: lightScheme.infoActiveColor,
+    focusColor: lightScheme.infoHoverColor,
+    textColor: lightScheme.baseBackgroundColor
   },
   success: {
-    color: '#18a058',
-    hoverColor: '#36ad6a',
-    activeColor: '#0c7a43',
-    focusColor: '#36ad6a',
-    textColor: '#fff'
+    color: lightScheme.successColor,
+    hoverColor: lightScheme.successHoverColor,
+    activeColor: lightScheme.successActiveColor,
+    focusColor: lightScheme.successHoverColor,
+    textColor: lightScheme.baseBackgroundColor
   },
   warning: {
-    color: '#f0a020',
-    hoverColor: '#fcb040',
-    activeColor: '#c97c10',
-    focusColor: '#fcb040',
-    textColor: '#fff'
+    color: lightScheme.warningColor,
+    hoverColor: lightScheme.warningHoverColor,
+    activeColor: lightScheme.warningActiveColor,
+    focusColor: lightScheme.warningHoverColor,
+    textColor: lightScheme.baseBackgroundColor
   },
   error: {
-    color: '#d03050',
-    hoverColor: '#de576d',
-    activeColor: '#ab1f3f',
-    focusColor: '#de576d',
-    textColor: '#fff'
+    color: lightScheme.errorColor,
+    hoverColor: lightScheme.errorHoverColor,
+    activeColor: lightScheme.errorActiveColor,
+    focusColor: lightScheme.errorHoverColor,
+    textColor: lightScheme.baseBackgroundColor
   }
 }
 
 const dark = {
   default: {
-    color: 'transparent',
-    hoverColor: 'transparent',
-    activeColor: 'transparent',
-    focusColor: 'transparent',
+    color: darkScheme.baseBackgroundColor,
+    hoverColor: darkScheme.baseBackgroundColor,
+    activeColor: darkScheme.baseBackgroundColor,
+    focusColor: darkScheme.baseBackgroundColor,
 
-    textColor: 'rgba(255, 255, 255, .84)',
-    hoverTextColor: '#7fe7c4',
-    activeTextColor: '#5acea7',
-    focusTextColor: '#7fe7c4',
+    textColor: darkScheme.secondaryTextColor,
+    hoverTextColor: darkScheme.primaryHoverColor,
+    activeTextColor: darkScheme.primaryActiveColor,
+    focusTextColor: darkScheme.primaryHoverColor,
 
-    textTypedTextColor: 'rgba(255, 255, 255, .84)',
-    textTypedHoverTextColor: '#7fe7c4',
-    textTypedActiveTextColor: '#5acea7',
-    textTypedFocusTextColor: '#7fe7c4',
+    textTypedTextColor: darkScheme.secondaryTextColor,
+    textTypedHoverTextColor: darkScheme.primaryHoverColor,
+    textTypedActiveTextColor: darkScheme.primaryActiveColor,
+    textTypedFocusTextColor: darkScheme.primaryHoverColor,
 
-    ghostTypedTextColor: 'rgba(255, 255, 255, .84)',
-    ghostTypedHoverTextColor: '#7fe7c4',
-    ghostTypedActiveTextColor: '#5acea7',
-    ghostTypedFocusTextColor: '#7fe7c4',
+    ghostTypedTextColor: darkScheme.secondaryTextColor,
+    ghostTypedHoverTextColor: darkScheme.primaryHoverColor,
+    ghostTypedActiveTextColor: darkScheme.primaryActiveColor,
+    ghostTypedFocusTextColor: darkScheme.primaryHoverColor,
 
-    borderColor: 'rgba(255, 255, 255, .24)',
-    hoverBorderColor: '#7fe7c4',
-    activeBorderColor: '#5acea7',
-    focusBorderColor: '#7fe7c4',
+    borderColor: darkScheme.borderColor,
+    hoverBorderColor: darkScheme.primaryHoverColor,
+    activeBorderColor: darkScheme.primaryActiveColor,
+    focusBorderColor: darkScheme.primaryHoverColor,
 
-    rippleColor: '#63e2b7'
+    rippleColor: darkScheme.primaryColor
   },
   primary: {
-    color: '#63e2b7',
-    hoverColor: '#7fe7c4',
-    activeColor: '#5acea7',
-    focusColor: '#7fe7c4',
-    textColor: '#000'
+    color: darkScheme.primaryColor,
+    hoverColor: darkScheme.primaryHoverColor,
+    activeColor: darkScheme.primaryActiveColor,
+    focusColor: darkScheme.primaryHoverColor,
+    textColor: darkScheme.baseBackgroundColor
   },
   info: {
-    color: '#70C0E8',
-    hoverColor: '#8acbec',
-    activeColor: '#66afd3',
-    focusColor: '#8acbec',
-    textColor: '#000'
+    color: darkScheme.infoColor,
+    hoverColor: darkScheme.infoHoverColor,
+    activeColor: darkScheme.infoActiveColor,
+    focusColor: darkScheme.infoHoverColor,
+    textColor: darkScheme.baseBackgroundColor
   },
   success: {
-    color: '#64e3b8',
-    hoverColor: '#7ee7c4',
-    activeColor: '#5acea7',
-    focusColor: '#7ee7c4',
-    textColor: '#000'
+    color: darkScheme.successColor,
+    hoverColor: darkScheme.successHoverColor,
+    activeColor: darkScheme.successActiveColor,
+    focusColor: darkScheme.successHoverColor,
+    textColor: darkScheme.baseBackgroundColor
   },
   warning: {
-    color: '#f2c97d',
-    hoverColor: '#f5d599',
-    activeColor: '#e6c260',
-    focusColor: '#f5d599',
-    textColor: '#000'
+    color: darkScheme.warningColor,
+    hoverColor: darkScheme.warningHoverColor,
+    activeColor: darkScheme.warningActiveColor,
+    focusColor: darkScheme.warningHoverColor,
+    textColor: darkScheme.baseBackgroundColor
   },
   error: {
-    color: '#e88080',
-    hoverColor: '#e98b8b',
-    activeColor: '#e57272',
-    focusColor: '#e98b8b',
-    textColor: '#000'
+    color: darkScheme.errorColor,
+    hoverColor: darkScheme.errorHoverColor,
+    activeColor: darkScheme.errorActiveColor,
+    focusColor: darkScheme.errorHoverColor,
+    textColor: darkScheme.baseBackgroundColor
   }
 }
 
diff --git a/src/_interoperation/common.js b/src/_interoperation/common.js
index f735a0734..f57da7874 100644
--- a/src/_interoperation/common.js
+++ b/src/_interoperation/common.js
@@ -1,7 +1,13 @@
-export const itemSize = {
-  tiny: 22,
-  small: 28,
-  medium: 34,
-  large: 40,
-  huge: 46
+import commonStyle from './common.scss'
+
+function extractLength (length) {
+  return Number(length.match(/^\d+/)[0])
+}
+
+export const itemSize = {
+  tiny: extractLength(commonStyle.tinySize),
+  small: extractLength(commonStyle.smallSize),
+  medium: extractLength(commonStyle.mediumSize),
+  large: extractLength(commonStyle.largeSize),
+  huge: extractLength(commonStyle.hugeSize)
 }
diff --git a/src/_interoperation/common.scss b/src/_interoperation/common.scss
new file mode 100644
index 000000000..18cb7c207
--- /dev/null
+++ b/src/_interoperation/common.scss
@@ -0,0 +1,9 @@
+@import '../../styles/themes/common.scss';
+
+:export {
+  tinySize: map-get($--n-height, 'tiny');
+  smallSize: map-get($--n-height, 'small');
+  mediumSize: map-get($--n-height, 'medium');
+  largeSize: map-get($--n-height, 'large');
+  hugeSize: map-get($--n-height, 'huge');
+}
\ No newline at end of file
diff --git a/src/_interoperation/darkStyleScheme.scss b/src/_interoperation/darkStyleScheme.scss
index 1c540fa7c..13dc98311 100644
--- a/src/_interoperation/darkStyleScheme.scss
+++ b/src/_interoperation/darkStyleScheme.scss
@@ -5,6 +5,7 @@
 
 /* stylelint-disable */
 :export {
+  baseBackgroundColor: $--n-base-background-color;
   primaryColor: $--n-primary-color;
   primaryHoverColor: $--n-primary-hover-color;
   primaryActiveColor: $--n-primary-active-color;
@@ -31,6 +32,7 @@
   dividerColor: $--overlay-divider;
   borderColor: $--n-border-color;
   easeInOutCubicBezier: $--n-ease-in-out-cubic-bezier;
+  // unstable
   tableHeaderOverlayBackgroundColor: $--n-table-header-overlay-background-color;
   inputOverlayBackgroundColor: $--n-input-overlay-background-color;
 }
\ No newline at end of file
diff --git a/src/_interoperation/lightStyleScheme.scss b/src/_interoperation/lightStyleScheme.scss
index eeb29d9c9..a7b624ee0 100644
--- a/src/_interoperation/lightStyleScheme.scss
+++ b/src/_interoperation/lightStyleScheme.scss
@@ -5,6 +5,7 @@
 
 /* stylelint-disable */
 :export {
+  baseBackgroundColor: $--n-base-background-color;
   primaryColor: $--n-primary-color;
   primaryHoverColor: $--n-primary-hover-color;
   primaryActiveColor: $--n-primary-active-color;
@@ -32,6 +33,7 @@
   dividerColor: $--overlay-divider;
   borderColor: $--n-border-color;
   easeInOutCubicBezier: $--n-ease-in-out-cubic-bezier;
+  // unstable
   tableHeaderOverlayBackgroundColor: $--n-table-header-overlay-background-color;
   inputOverlayBackgroundColor: $--n-input-overlay-background-color;
 }
\ No newline at end of file
diff --git a/src/_utils/cssr/index.js b/src/_utils/cssr/index.js
index 1cebf542c..fbc06c935 100644
--- a/src/_utils/cssr/index.js
+++ b/src/_utils/cssr/index.js
@@ -1,12 +1,52 @@
 import { CSSRender } from 'css-render'
 import BEMPlugin from '@css-render/plugin-bem'
 
+const prefix = '.n-'
+
 const cssr = CSSRender()
 const plugin = BEMPlugin({
-  blockPrefix: '.n-'
+  blockPrefix: prefix
 })
 cssr.use(plugin)
-const { c } = cssr
+const { c, context } = cssr
+context.theme = null
 const { cB, cE, cM, cNotM } = plugin
 
-export { c, cB, cE, cM, cNotM }
+const cTB = (selector, ...rest) => {
+  return cB(selector, [
+    ({ context: ctx }) => {
+      if (ctx.theme) {
+        return c('&' + prefix + ctx.theme + '-theme', ...rest)
+      }
+      return c('&', ...rest)
+    }
+  ])
+}
+
+function createThemedStyle (style, themes) {
+  const fallbackPallete = themes.fallback
+  return c([
+    /** render a fallback style */
+    c({
+      before: ctx => {
+        ctx.theme = null
+        ctx.pallete = fallbackPallete
+      },
+      after: ctx => { ctx.theme = null }
+    }, [
+      style
+    ]),
+    /** render themed styles */
+    c({
+      before: ctx => {
+        ctx.theme = 'dark'
+        ctx.pallete = themes['dark'] || fallbackPallete
+      },
+      after: ctx => { ctx.theme = null }
+    }, [
+      style
+    ])
+  ])
+}
+
+export { c, cTB, cB, cE, cM, cNotM, createThemedStyle }
diff --git a/styles/Button.scss b/styles/Button.scss
index b8e840139..20adf438d 100644
--- a/styles/Button.scss
+++ b/styles/Button.scss
@@ -78,167 +78,7 @@
   }
 }
 
-// @mixin button-icon-mixin($color) {
-//   @include e(icon) {
-//     .#{block(icon)}, .#{block(base-loading)} {
-//       fill: $color;
-//       stroke: $color;
-//     }
-//   }
-// }
-
-// @mixin button-type-mixin-content ($type) {
-//   color: map-get($--button-text-color, $type);
-//   background-color: map-get($--button-background-color, $type);
-//   border: 1px solid map-get($--button-border-color, $type);
-//   @include button-icon-mixin(map-get($--button-text-color, $type));
-//   @include not-m(disabled) {
-//     @include m(enter-pressed) {
-//       background-color: map-get($--button-background-color, $type + '-active');
-//       color: map-get($--button-text-color, $type + '-active');
-//       @include e(border-mask) {
-//         box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active');
-//       }
-//       @include button-icon-mixin(map-get($--button-text-color, $type + '-active'));
-//     }
-//     @include not-m(enter-pressed) {
-//       &:hover {
-//         background-color: map-get($--button-background-color, $type + '-hover');
-//         color: map-get($--button-text-color, $type + '-hover');
-//         @include e(border-mask) {
-//           box-shadow: map-get($--button-border-mask-box-shadow, $type + '-hover');
-//         }
-//         @include button-icon-mixin(map-get($--button-text-color, $type + '-hover'));
-//       }
-//       &:active {
-//         background-color: map-get($--button-background-color, $type + '-active');
-//         color: map-get($--button-text-color, $type + '-active');
-//         @include e(border-mask) {
-//           box-shadow: map-get($--button-border-mask-box-shadow, $type + '-active');
-//         }
-//         @include button-icon-mixin(map-get($--button-text-color, $type + '-active'));
-//       }
-//     }
-//     &:not(:active):focus {
-//       @include not-m(enter-pressed) {
-//         background-color: map-get($--button-background-color, $type + '-focus');
-//         color: map-get($--button-text-color, $type + '-focus');
-//         @include e(border-mask) {
-//           box-shadow: map-get($--button-border-mask-box-shadow, $type + '-focus');
-//         }
-//         @include button-icon-mixin(map-get($--button-text-color, $type + '-focus'));
-//       } 
-//     }
-//     @include m(rippling) {
-//       &::after {
-//         animation-name: #{$theme}-#{$type}-button-ripple--spread, #{$theme}-#{$type}-button-ripple--opacity;
-//       }
-//     }
-//   }
-//   @include m(ghost) {
-//     background-color: map-get($--button-ghost-typed-background-color, $type);
-//     color: map-get($--button-ghost-typed-text-color, $type);
-//     border: 1px solid map-get($--button-ghost-typed-border-color, $type);
-//     @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type));
-//     @include not-m(disabled) {
-//       @include m(enter-pressed) {
-//         background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
-//         color: map-get($--button-ghost-typed-text-color, $type + '-active');
-//         @include e(border-mask) {
-//           box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-active');
-//         }
-//         @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
-//       }
-//       &:not(:active):focus {
-//         @include not-m(enter-pressed) {
-//           color: map-get($--button-ghost-typed-text-color, $type + '-focus');
-//           background-color: map-get($--button-ghost-typed-background-color, $type + '-focus');
-//           @include e(border-mask) {
-//             box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-focus');
-//           }
-//           @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-focus'));
-//         } 
-//       }
-//       @include not-m(enter-pressed) {
-//         &:hover {
-//           background-color: map-get($--button-ghost-typed-background-color, $type + '-hover');
-//           color: map-get($--button-ghost-typed-text-color, $type + '-hover');
-//           @include e(border-mask) {
-//             box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-hover');
-//           }
-//           @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-hover'));
-//         }
-//         &:active {
-//           background-color: map-get($--button-ghost-typed-background-color, $type + '-active');
-//           color: map-get($--button-ghost-typed-text-color, $type + '-active');
-//           @include e(border-mask) {
-//             box-shadow: map-get($--button-ghost-typed-border-mask-box-shadow, $type + '-active');
-//           }
-//           @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
-//         }
-//       }
-//     }
-//   }
-//   @include m(text) {
-//     color: map-get($--button-text-typed-text-color, $type);
-//     @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type));
-//     @include not-m(disabled) {
-//       @include m(enter-pressed) {
-//         color: map-get($--button-text-typed-text-color, $type + '-active');
-//         @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
-//       }
-//       &:not(:active):focus {
-//         @include not-m(enter-pressed) {
-//           color: map-get($--button-text-typed-text-color, $type + '-focus');
-//           @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-focus'));
-//         } 
-//       }
-//       @include not-m(enter-pressed) {
-//         &:hover {
-//           color: map-get($--button-text-typed-text-color, $type + '-hover');
-//           @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-hover'));
-//         }
-//         &:active {
-//           color: map-get($--button-text-typed-text-color, $type + '-active');
-//           @include button-icon-mixin(map-get($--button-ghost-typed-text-color, $type + '-active'));
-//         }
-//       }
-//     }
-//   }
-// }
-
-// @mixin button-type-mixin ($type) {
-//   @include m($type + '-colored') {
-//     @include button-type-mixin-content($type);
-//   }
-// }
-
-// @mixin button-ripple-mixin($type) {
-//   @keyframes #{$theme}-#{$type}-button-ripple--spread {
-//     from {
-//       box-shadow: map-get($--button-ripple-box-shadow, $type + '-start');
-//     }
-//     to {
-//       box-shadow: map-get($--button-ripple-box-shadow, $type + '-end');
-//     }
-//   }
-//   @keyframes #{$theme}-#{$type}-button-ripple--opacity {
-//     from {
-//       opacity: .4;
-//     }
-//     to {
-//       opacity: 0;
-//     }
-//   }
-// }
-
 @include themes-mixin {
-  // @include button-ripple-mixin('default');
-  // @include button-ripple-mixin('primary');
-  // @include button-ripple-mixin('error');
-  // @include button-ripple-mixin('success');
-  // @include button-ripple-mixin('warning');
-  // @include button-ripple-mixin('info');
   @include b(button) {
     @include once {
       box-sizing: border-box;
@@ -335,12 +175,6 @@
     @include m(disabled) {
       opacity: $--button-disabled-opacity;
     }
-    // @include button-type-mixin('default');
-    // @include button-type-mixin('primary');
-    // @include button-type-mixin('info');
-    // @include button-type-mixin('success');
-    // @include button-type-mixin('warning');
-    // @include button-type-mixin('error');
   }
 }
 
diff --git a/styles/themes/dark/components/Button.scss b/styles/themes/dark/components/Button.scss
index b46d746af..2046a74d6 100644
--- a/styles/themes/dark/components/Button.scss
+++ b/styles/themes/dark/components/Button.scss
@@ -1,204 +1,3 @@
 @mixin setup-dark-button {
-  $--button-box-shadow-ripple-spread: 4px;
-  $--button-ripple-box-shadow: (
-    'default-start': (0 0 0 0 $--n-primary-color),  
-    'default-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
-    'primary-start': (0 0 0 0 $--n-primary-color),  
-    'primary-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
-    'success-start': (0 0 0 0 $--n-success-color),  
-    'success-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-success-color),
-    'info-start': (0 0 0 0 $--n-info-color),  
-    'info-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-info-color),
-    'warning-start': (0 0 0 0 $--n-warning-color),  
-    'warning-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-warning-color),
-    'error-start': (0 0 0 0 $--n-error-color),  
-    'error-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-error-color)
-  ) !global;
-  $--button-border-color: (
-    'default': $--n-border-color,
-    'primary': transparent,
-    'success': transparent,
-    'info': transparent,
-    'warning': transparent,
-    'error': transparent
-  ) !global;
-  $--button-border-mask-box-shadow: (
-    'default-hover': inset 0 0 0 1px $--n-primary-hover-color,
-    'default-active': inset 0 0 0 1px $--n-primary-active-color,
-    'default-focus': (inset 0 0 0 1px $--n-primary-color),
-    'primary-hover': none,
-    'primary-active': none,
-    'primary-focus': none,
-    'success-hover': none,
-    'success-active': none,
-    'success-focus': none,
-    'info-hover': none,
-    'info-active': none,
-    'info-focus': none,
-    'warning-hover': none,
-    'warning-active': none,
-    'warning-focus': none,
-    'error-hover': none,
-    'error-active': none,
-    'error-focus': none
-  ) !global;
-  $--button-ghost-typed-border-color: (
-    'default': $--n-border-color,
-    'primary': change-color($--n-primary-color, $alpha: $--n-tertiary-opacity),
-    'success': change-color($--n-success-color, $alpha: $--n-tertiary-opacity),
-    'info': change-color($--n-info-color, $alpha: $--n-tertiary-opacity),
-    'warning': change-color($--n-warning-color, $alpha: $--n-tertiary-opacity),
-    'error': change-color($--n-error-color, $alpha: $--n-tertiary-opacity),
-  ) !global;
-  $--button-ghost-typed-border-mask-box-shadow: (
-    'default-hover': inset 0 0 0 1px $--n-primary-hover-color,
-    'default-active': inset 0 0 0 1px $--n-primary-active-color,
-    'default-focus': inset 0 0 0 1px $--n-primary-hover-color,
-    'primary-hover': inset 0 0 0 1px $--n-primary-hover-color,
-    'primary-active': inset 0 0 0 1px $--n-primary-active-color,
-    'primary-focus': inset 0 0 0 1px $--n-primary-hover-color,
-    'success-hover': inset 0 0 0 1px $--n-success-hover-color,
-    'success-active': inset 0 0 0 1px $--n-success-active-color,
-    'success-focus': inset 0 0 0 1px $--n-success-hover-color,
-    'info-hover': inset 0 0 0 1px $--n-info-hover-color,
-    'info-active': inset 0 0 0 1px $--n-info-active-color,
-    'info-focus': inset 0 0 0 1px $--n-info-hover-color,
-    'warning-hover': inset 0 0 0 1px $--n-warning-hover-color,
-    'warning-active': inset 0 0 0 1px $--n-warning-active-color,
-    'warning-focus': inset 0 0 0 1px $--n-warning-hover-color,
-    'error-hover': inset 0 0 0 1px $--n-error-hover-color,
-    'error-active': inset 0 0 0 1px $--n-error-active-color,
-    'error-focus': inset 0 0 0 1px $--n-error-hover-color
-  ) !global;
-  $--button-background-color: (
-    'default': transparent,
-    'default-focus': transparent,
-    'default-hover': transparent,
-    'default-active': transparent,
-    'primary': $--n-primary-color,
-    'primary-focus': $--n-primary-hover-color,
-    'primary-hover': $--n-primary-hover-color,
-    'primary-active': $--n-primary-active-color,
-    'info': $--n-info-color,
-    'info-focus': $--n-info-hover-color,
-    'info-hover': $--n-info-hover-color,
-    'info-active': $--n-info-active-color,
-    'success': $--n-success-color,
-    'success-focus': $--n-success-hover-color,
-    'success-hover': $--n-success-hover-color,
-    'success-active': $--n-success-active-color,
-    'warning': $--n-warning-color,
-    'warning-focus': $--n-warning-hover-color,
-    'warning-hover': $--n-warning-hover-color,
-    'warning-active': $--n-warning-active-color,
-    'error': $--n-error-color,
-    'error-focus': $--n-error-hover-color,
-    'error-hover': $--n-error-hover-color,
-    'error-active': $--n-error-active-color,
-  ) !global;
-  $--button-ghost-typed-background-color: (
-    'default': transparent,
-    'default-focus': transparent,
-    'default-hover': transparent,
-    'default-active': transparent,
-    'primary': transparent,
-    'primary-focus': transparent,
-    'primary-hover': transparent,
-    'primary-active': transparent,
-    'info': transparent,
-    'info-focus': transparent,
-    'info-hover': transparent,
-    'info-active': transparent,
-    'success': transparent,
-    'success-focus': transparent,
-    'success-hover': transparent,
-    'success-active': transparent,
-    'error': transparent,
-    'error-focus': transparent,
-    'error-hover': transparent,
-    'error-active': transparent,
-    'warning': transparent,
-    'warning-focus': transparent,
-    'warning-hover': transparent,
-    'warning-active': transparent
-  )!global;
-  $--button-ghost-typed-text-color: (
-    'default': $--n-secondary-text-color,
-    'default-focus': $--n-primary-hover-color,
-    'default-hover': $--n-primary-hover-color,
-    'default-active': $--n-primary-active-color,
-    'primary': $--n-primary-color,
-    'primary-focus': $--n-primary-hover-color,
-    'primary-hover': $--n-primary-hover-color,
-    'primary-active': $--n-primary-active-color,
-    'info': $--n-info-color,
-    'info-focus': $--n-info-hover-color,
-    'info-hover': $--n-info-hover-color,
-    'info-active': $--n-info-active-color,
-    'success': $--n-success-color,
-    'success-focus': $--n-success-hover-color,
-    'success-hover': $--n-success-hover-color,
-    'success-active': $--n-success-active-color,
-    'warning': $--n-warning-color,
-    'warning-focus': $--n-warning-hover-color,
-    'warning-hover': $--n-warning-hover-color,
-    'warning-active': $--n-warning-active-color,
-    'error': $--n-error-color,
-    'error-focus': $--n-error-hover-color,
-    'error-hover': $--n-error-hover-color,
-    'error-active': $--n-error-active-color,
-  ) !global;
-  $--button-text-color: (
-    'default': $--n-secondary-text-color,
-    'default-focus': $--n-primary-hover-color,
-    'default-hover': $--n-primary-hover-color,
-    'default-active': $--n-primary-active-color,
-    'primary': $--n-base-background-color,
-    'primary-focus': $--n-base-background-color,
-    'primary-hover': $--n-base-background-color,
-    'primary-active': $--n-base-background-color,
-    'info': $--n-base-background-color,
-    'info-focus': $--n-base-background-color,
-    'info-hover': $--n-base-background-color,
-    'info-active': $--n-base-background-color,
-    'success': $--n-base-background-color,
-    'success-focus':$--n-base-background-color,
-    'success-hover': $--n-base-background-color,
-    'success-active': $--n-base-background-color,
-    'warning': $--n-base-background-color,
-    'warning-focus': $--n-base-background-color,
-    'warning-hover': $--n-base-background-color,
-    'warning-active': $--n-base-background-color,
-    'error': $--n-base-background-color,
-    'error-focus': $--n-base-background-color,
-    'error-hover': $--n-base-background-color,
-    'error-active': $--n-base-background-color
-  ) !global;
-  $--button-text-typed-text-color: (
-    'default': $--n-secondary-text-color,
-    'default-hover': $--n-primary-hover-color,
-    'default-active': $--n-primary-active-color,
-    'default-focus': $--n-primary-hover-color,
-    'primary': $--n-primary-color,
-    'primary-hover': $--n-primary-hover-color,
-    'primary-active': $--n-primary-active-color,
-    'primary-focus': $--n-primary-hover-color,
-    'info': $--n-info-color,
-    'info-hover': $--n-info-hover-color,
-    'info-active': $--n-info-active-color,
-    'info-focus': $--n-info-hover-color,
-    'success': $--n-success-color,
-    'success-hover': $--n-success-hover-color,
-    'success-active': $--n-success-active-color,
-    'success-focus': $--n-success-hover-color,
-    'warning': $--n-warning-color,
-    'warning-hover': $--n-warning-hover-color,
-    'warning-active': $--n-warning-active-color,
-    'warning-focus': $--n-warning-hover-color,
-    'error': $--n-error-color,
-    'error-hover': $--n-error-hover-color,
-    'error-active': $--n-error-active-color,
-    'error-focus': $--n-error-hover-color
-  ) !global;
   $--button-disabled-opacity: $--n-disabled-opacity !global;
 }
\ No newline at end of file
diff --git a/styles/themes/light/components/Button.scss b/styles/themes/light/components/Button.scss
index 9fdd2cf61..91b51f6fc 100644
--- a/styles/themes/light/components/Button.scss
+++ b/styles/themes/light/components/Button.scss
@@ -1,204 +1,3 @@
 @mixin setup-light-button {
-  $--button-box-shadow-ripple-spread: 4px;
-  $--button-ripple-box-shadow: (
-    'default-start': (0 0 0 0 $--n-primary-color),  
-    'default-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
-    'primary-start': (0 0 0 0 $--n-primary-color),  
-    'primary-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-primary-color),
-    'success-start': (0 0 0 0 $--n-success-color),  
-    'success-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-success-color),
-    'info-start': (0 0 0 0 $--n-info-color),  
-    'info-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-info-color),
-    'warning-start': (0 0 0 0 $--n-warning-color),  
-    'warning-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-warning-color),
-    'error-start': (0 0 0 0 $--n-error-color),  
-    'error-end': (0 0 0 $--button-box-shadow-ripple-spread $--n-error-color)
-  ) !global;
-  $--button-border-color: (
-    'default': $--n-border-color,
-    'primary': transparent,
-    'success': transparent,
-    'info': transparent,
-    'warning': transparent,
-    'error': transparent
-  ) !global;
-  $--button-border-mask-box-shadow: (
-    'default-hover': inset 0 0 0 1px $--n-primary-hover-color,
-    'default-active': inset 0 0 0 1px $--n-primary-active-color,
-    'default-focus': (inset 0 0 0 1px $--n-primary-color),
-    'primary-hover': none,
-    'primary-active': none,
-    'primary-focus': none,
-    'success-hover': none,
-    'success-active': none,
-    'success-focus': none,
-    'info-hover': none,
-    'info-active': none,
-    'info-focus': none,
-    'warning-hover': none,
-    'warning-active': none,
-    'warning-focus': none,
-    'error-hover': none,
-    'error-active': none,
-    'error-focus': none
-  ) !global;
-  $--button-ghost-typed-border-color: (
-    'default': $--n-border-color,
-    'primary': $--n-primary-color,
-    'success': $--n-success-color,
-    'info': $--n-info-color,
-    'warning': $--n-warning-color,
-    'error': $--n-error-color,
-  ) !global;
-  $--button-ghost-typed-border-mask-box-shadow: (
-    'default-hover': (inset 0 0 0 1px $--n-primary-hover-color),
-    'default-active': (inset 0 0 0 1px $--n-primary-active-color),
-    'default-focus': (inset 0 0 0 1px $--n-primary-hover-color),
-    'primary-hover': inset 0 0 0 1px $--n-primary-hover-color,
-    'primary-active': inset 0 0 0 1px $--n-primary-active-color,
-    'primary-focus': inset 0 0 0 1px $--n-primary-hover-color,
-    'success-hover': inset 0 0 0 1px $--n-success-hover-color,
-    'success-active': inset 0 0 0 1px $--n-success-active-color,
-    'success-focus': inset 0 0 0 1px $--n-success-hover-color,
-    'info-hover': inset 0 0 0 1px $--n-info-hover-color,
-    'info-active': inset 0 0 0 1px $--n-info-active-color,
-    'info-focus': inset 0 0 0 1px $--n-info-hover-color,
-    'warning-hover': inset 0 0 0 1px $--n-warning-hover-color,
-    'warning-active': inset 0 0 0 1px $--n-warning-active-color,
-    'warning-focus': inset 0 0 0 1px $--n-warning-hover-color,
-    'error-hover': inset 0 0 0 1px $--n-error-hover-color,
-    'error-active': inset 0 0 0 1px $--n-error-active-color,
-    'error-focus': inset 0 0 0 1px $--n-error-hover-color
-  ) !global;
-  $--button-background-color: (
-    'default': $--n-base-background-color,
-    'default-focus': $--n-base-background-color,
-    'default-hover': $--n-base-background-color,
-    'default-active': $--n-base-background-color,
-    'primary': $--n-primary-color,
-    'primary-focus': $--n-primary-hover-color,
-    'primary-hover': $--n-primary-hover-color,
-    'primary-active': $--n-primary-active-color,
-    'info': $--n-info-color,
-    'info-focus': $--n-info-hover-color,
-    'info-hover': $--n-info-hover-color,
-    'info-active': $--n-info-active-color,
-    'success': $--n-success-color,
-    'success-focus': $--n-success-hover-color,
-    'success-hover': $--n-success-hover-color,
-    'success-active': $--n-success-active-color,
-    'warning': $--n-warning-color,
-    'warning-focus': $--n-warning-hover-color,
-    'warning-hover': $--n-warning-hover-color,
-    'warning-active': $--n-warning-active-color,
-    'error': $--n-error-color,
-    'error-focus': $--n-error-hover-color,
-    'error-hover': $--n-error-hover-color,
-    'error-active': $--n-error-active-color,
-  ) !global;
-  $--button-ghost-typed-background-color: (
-    'default': transparent,
-    'default-focus': transparent,
-    'default-hover': transparent,
-    'default-active': transparent,
-    'primary': transparent,
-    'primary-focus': transparent,
-    'primary-hover': transparent,
-    'primary-active': transparent,
-    'info': transparent,
-    'info-focus': transparent,
-    'info-hover': transparent,
-    'info-active': transparent,
-    'success': transparent,
-    'success-focus': transparent,
-    'success-hover': transparent,
-    'success-active': transparent,
-    'error': transparent,
-    'error-focus': transparent,
-    'error-hover': transparent,
-    'error-active': transparent,
-    'warning': transparent,
-    'warning-focus': transparent,
-    'warning-hover': transparent,
-    'warning-active': transparent
-  )!global;
-  $--button-ghost-typed-text-color: (
-    'default': $--n-secondary-text-color,
-    'default-focus': $--n-primary-hover-color,
-    'default-hover': $--n-primary-hover-color,
-    'default-active': $--n-primary-active-color,
-    'primary': $--n-primary-color,
-    'primary-focus': $--n-primary-hover-color,
-    'primary-hover': $--n-primary-hover-color,
-    'primary-active': $--n-primary-active-color,
-    'info': $--n-info-color,
-    'info-focus': $--n-info-hover-color,
-    'info-hover': $--n-info-hover-color,
-    'info-active': $--n-info-active-color,
-    'success': $--n-success-color,
-    'success-focus': $--n-success-hover-color,
-    'success-hover': $--n-success-hover-color,
-    'success-active': $--n-success-active-color,
-    'warning': $--n-warning-color,
-    'warning-focus': $--n-warning-hover-color,
-    'warning-hover': $--n-warning-hover-color,
-    'warning-active': $--n-warning-active-color,
-    'error': $--n-error-color,
-    'error-focus': $--n-error-hover-color,
-    'error-hover': $--n-error-hover-color,
-    'error-active': $--n-error-active-color,
-  ) !global;
-  $--button-text-color: (
-    'default': $--n-secondary-text-color,
-    'default-focus': $--n-primary-hover-color,
-    'default-hover': $--n-primary-hover-color,
-    'default-active': $--n-primary-active-color,
-    'primary': $--n-base-background-color,
-    'primary-focus': $--n-base-background-color,
-    'primary-hover': $--n-base-background-color,
-    'primary-active': $--n-base-background-color,
-    'info': $--n-base-background-color,
-    'info-focus': $--n-base-background-color,
-    'info-hover': $--n-base-background-color,
-    'info-active': $--n-base-background-color,
-    'success': $--n-base-background-color,
-    'success-focus':$--n-base-background-color,
-    'success-hover': $--n-base-background-color,
-    'success-active': $--n-base-background-color,
-    'warning': $--n-base-background-color,
-    'warning-focus': $--n-base-background-color,
-    'warning-hover': $--n-base-background-color,
-    'warning-active': $--n-base-background-color,
-    'error': $--n-base-background-color,
-    'error-focus': $--n-base-background-color,
-    'error-hover': $--n-base-background-color,
-    'error-active': $--n-base-background-color
-  ) !global;
-  $--button-text-typed-text-color: (
-    'default': $--n-secondary-text-color,
-    'default-hover': $--n-primary-hover-color,
-    'default-active': $--n-primary-active-color,
-    'default-focus': $--n-primary-hover-color,
-    'primary': $--n-primary-color,
-    'primary-hover': $--n-primary-hover-color,
-    'primary-active': $--n-primary-active-color,
-    'primary-focus': $--n-primary-hover-color,
-    'info': $--n-info-color,
-    'info-hover': $--n-info-hover-color,
-    'info-active': $--n-info-active-color,
-    'info-focus': $--n-info-hover-color,
-    'success': $--n-success-color,
-    'success-hover': $--n-success-hover-color,
-    'success-active': $--n-success-active-color,
-    'success-focus': $--n-success-hover-color,
-    'warning': $--n-warning-color,
-    'warning-hover': $--n-warning-hover-color,
-    'warning-active': $--n-warning-active-color,
-    'warning-focus': $--n-warning-hover-color,
-    'error': $--n-error-color,
-    'error-hover': $--n-error-hover-color,
-    'error-active': $--n-error-active-color,
-    'error-focus': $--n-error-hover-color,
-  ) !global;
   $--button-disabled-opacity: $--n-disabled-opacity !global;
 }
\ No newline at end of file