From f1b48b2b3c456107f9b1c8fe8b0b34d6d6c9152b Mon Sep 17 00:00:00 2001
From: ldrovira <luisdanielrovira8@gmail.com>
Date: Tue, 29 Sep 2020 23:58:17 +0200
Subject: [PATCH] fix bugs

---
 .../.vuepress/components/Input/default.vue    |   2 +-
 .../.vuepress/components/Sidebar/group.vue    |   2 +-
 .../.vuepress/components/Sidebar/right.vue    |  87 +++++++++++++
 .../docs/.vuepress/components/button/icon.vue |   6 +-
 packages/docs/.vuepress/dist                  |   2 +-
 packages/docs/docs/components/Dialog.md       |  11 ++
 packages/docs/docs/components/Loading.md      |  35 +++++-
 packages/docs/docs/components/Sidebar.md      | 114 ++++++++++++++++++
 packages/docs/es/docs/components/Dialog.md    |  11 ++
 packages/docs/es/docs/components/Loading.md   |  35 +++++-
 packages/docs/es/docs/components/Sidebar.md   | 114 ++++++++++++++++++
 .../components/HeaderNotification.vue         |   5 +
 .../vuepress-theme-vuesax/components/Home.vue |   8 +-
 .../components/HomeComponents.vue             |   1 +
 .../vuepress-theme-vuesax/layouts/Layout.vue  |   1 +
 packages/vuesax/build/index.js                |  10 ++
 .../vuesax/build/styles/webpack.styles.js     |  26 ++++
 packages/vuesax/package-lock.json             |   2 +-
 packages/vuesax/package.json                  |   2 +-
 packages/vuesax/scripts/newComponent.js       |   1 -
 .../src/components/vsAlert/Base/style.sass    |   1 -
 .../src/components/vsAlert/Base/vsAlert.ts    |  10 ++
 .../src/components/vsAvatar/Base/style.sass   |   3 +-
 .../src/components/vsAvatar/Base/vsAvatar.ts  |  15 ++-
 .../src/components/vsButton/Base/VsButton.ts  |  13 +-
 .../src/components/vsButton/Base/_root.sass   |   2 +-
 .../src/components/vsButton/Base/style.sass   |   1 -
 .../src/components/vsButton/group/style.sass  |   1 -
 .../src/components/vsCard/Base/style.sass     |   1 -
 .../src/components/vsCard/Group/style.sass    |   4 +-
 .../src/components/vsCheckbox/Base/style.sass |   1 -
 .../components/vsCheckbox/Base/vsCheckbox.ts  |  10 ++
 .../src/components/vsDialog/Base/style.sass   |   2 +-
 .../src/components/vsDialog/Base/vsDialog.ts  |   3 +
 .../src/components/vsInput/Base/style.sass    |   1 -
 .../src/components/vsInput/Base/vsInput.ts    |  13 +-
 .../src/components/vsNavbar/Base/style.sass   |   1 -
 .../src/components/vsNavbar/Base/vsNavbar.ts  |  15 ++-
 .../src/components/vsNavbar/Group/style.sass  |   1 +
 .../components/vsPagination/Base/style.sass   |   3 +-
 .../vsPagination/Base/vsPagination.ts         |  12 +-
 .../src/components/vsRadio/Base/style.sass    |   3 +-
 .../src/components/vsRadio/Base/vsRadio.ts    |  14 ++-
 .../src/components/vsSelect/Base/style.sass   |  10 +-
 .../src/components/vsSelect/Base/vsSelect.ts  |  54 ++++++---
 .../vsSelect/Option/vsSelectOption.ts         |   1 +
 .../src/components/vsSidebar/Base/style.sass  |  14 ++-
 .../components/vsSidebar/Base/vsSidebar.ts    |  17 ++-
 .../vsSidebar/Group/vsSidebarGroup.ts         |  18 ++-
 .../src/components/vsSidebar/Item/style.sass  |   3 +-
 .../src/components/vsSwitch/Base/style.sass   |   1 -
 .../src/components/vsSwitch/Base/vsSwitch.ts  |  11 +-
 .../src/components/vsTable/Base/style.sass    |   2 +-
 .../src/components/vsTable/Td/style.sass      |   1 +
 .../src/components/vsTable/Th/style.sass      |   1 +
 .../src/components/vsTable/Tr/style.sass      |   3 +
 .../src/components/vsTooltip/Base/style.sass  |   1 -
 .../components/vsTooltip/Base/vsTooltip.ts    |  21 +++-
 .../src/functions/vsLoading/Base/style.sass   |   2 +-
 .../functions/vsNotification/Base/style.sass  |   2 +-
 packages/vuesax/src/icons/icons.sass          |   2 +-
 packages/vuesax/src/index.ts                  |   1 -
 packages/vuesax/src/layout/grid/style.sass    |   2 +-
 packages/vuesax/src/mixins/component.ts       |  74 ++----------
 packages/vuesax/src/styles/_colors.sass       |  12 ++
 packages/vuesax/src/styles/_reset.sass        |   1 -
 packages/vuesax/src/styles/index.ts           |   1 +
 .../vuesax/src/util/defineVuesaxOptions.ts    |   4 +-
 packages/vuesax/src/util/index.ts             |  39 +++++-
 packages/vuesax/src/util/ripple/index.ts      |   6 +-
 packages/vuesax/src/util/ripple/style.sass    |   4 +-
 71 files changed, 753 insertions(+), 160 deletions(-)
 create mode 100644 packages/docs/.vuepress/components/Sidebar/right.vue
 create mode 100644 packages/vuesax/build/styles/webpack.styles.js
 create mode 100644 packages/vuesax/src/styles/index.ts

diff --git a/packages/docs/.vuepress/components/Input/default.vue b/packages/docs/.vuepress/components/Input/default.vue
index 93193c25..fb90d699 100644
--- a/packages/docs/.vuepress/components/Input/default.vue
+++ b/packages/docs/.vuepress/components/Input/default.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="center content-inputs">
-    <vs-input block v-model="value" placeholder="Name" />
+    <vs-input v-model="value" placeholder="Name" />
   </div>
 </template>
 <script>
diff --git a/packages/docs/.vuepress/components/Sidebar/group.vue b/packages/docs/.vuepress/components/Sidebar/group.vue
index ee5d8b91..b04c68a0 100644
--- a/packages/docs/.vuepress/components/Sidebar/group.vue
+++ b/packages/docs/.vuepress/components/Sidebar/group.vue
@@ -141,7 +141,7 @@
 <script>
 export default {
   data:() => ({
-    active: 'home',
+    active: 'Instagram',
   })
 }
 </script>
diff --git a/packages/docs/.vuepress/components/Sidebar/right.vue b/packages/docs/.vuepress/components/Sidebar/right.vue
new file mode 100644
index 00000000..9fd3ee9e
--- /dev/null
+++ b/packages/docs/.vuepress/components/Sidebar/right.vue
@@ -0,0 +1,87 @@
+<template>
+  <div class="hidden">
+    <vs-sidebar
+      right
+      absolute
+      v-model="active"
+      open
+      >
+      <template #logo>
+        <svg class="logo-nav" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 401.69 98.4"><g id="Capa_2" data-name="Capa 2"><g id="Capa_1-2" data-name="Capa 1"><path d="M105.79,27.23h12.78l16.12,44.65L150.9,27.23h12.77L141.48,85.56h-13.4Z"/><path d="M168.29,82.12Q164,77.77,164,69.53V42.63h12.23V69.26q0,4.26,2,6.25c1.36,1.33,3.45,2,6.29,2a13.73,13.73,0,0,0,5.75-1.22A16,16,0,0,0,195,73.06V42.63h12.22V85.56H195.91l-.45-4.08a23.47,23.47,0,0,1-15.12,5Q172.54,86.47,168.29,82.12Z"/><path d="M222.22,80.8q-6.37-5.65-6.38-16.8,0-10.5,5.57-16.39t16.26-5.89q9.78,0,15.17,5.12t5.39,13.72v7.79H227.16c.6,3.32,2.13,5.65,4.57,7s6.06,2,10.83,2a39.59,39.59,0,0,0,7-.64,31.7,31.7,0,0,0,6.11-1.63v8.7q-6,2.72-15.67,2.72Q228.61,86.47,222.22,80.8Zm25.32-20V58.48q0-8-9.51-8c-4,0-6.79.8-8.42,2.4s-2.45,4.24-2.45,7.92Z"/><path d="M272.81,85.83a31.36,31.36,0,0,1-7.07-1.72V74a31.67,31.67,0,0,0,7,1.94,44,44,0,0,0,7.52.68,23.39,23.39,0,0,0,6.47-.59,2.33,2.33,0,0,0,1.77-2.4,2.8,2.8,0,0,0-1.63-2.53,39.68,39.68,0,0,0-6.25-2.36c-.91-.24-2.06-.6-3.44-1.08q-6.35-2.09-9.29-5c-2-1.93-2.94-4.64-2.94-8.15q0-6.24,4.57-9.51t14.36-3.26a47.58,47.58,0,0,1,7.29.55,34.85,34.85,0,0,1,6.2,1.45V53.77a24.42,24.42,0,0,0-5.52-1.72,30.87,30.87,0,0,0-6-.64,25.74,25.74,0,0,0-6.43.59c-1.39.4-2.08,1.17-2.08,2.31a2.47,2.47,0,0,0,1.49,2.31,38.75,38.75,0,0,0,5.75,2l3,.91A34.78,34.78,0,0,1,295.63,63a10.69,10.69,0,0,1,4,4.21,13.91,13.91,0,0,1,1.23,6.25q0,6.43-4.8,9.74t-14.22,3.31A63,63,0,0,1,272.81,85.83Z"/><path d="M312,83q-4.39-3.49-4.39-9.83A12.49,12.49,0,0,1,312.16,63q4.57-3.75,13.18-3.76H338V58a8.13,8.13,0,0,0-.95-4.26,5.63,5.63,0,0,0-3.35-2.26,24.6,24.6,0,0,0-6.84-.73A44.66,44.66,0,0,0,312.75,53v-8.6a36,36,0,0,1,7.47-2,55.67,55.67,0,0,1,9.19-.73q20.29,0,20.29,16.58V85.56H339.11l-.64-3.89q-5.25,4.8-15.58,4.8A17,17,0,0,1,312,83Zm21.19-5.89A12.69,12.69,0,0,0,338,73.6V66.81H325.61q-7.16,0-7.15,5.89,0,5.7,7.78,5.7A17.2,17.2,0,0,0,333.17,77.09Z"/><path d="M372,63.73l-15.85-21.1h13.23l9.24,12.5,9.23-12.5h13.23L385.3,63.73l16.39,21.83H388.38L378.6,72.43l-9.79,13.13H355.5Z"/><polygon points="92.25 8.05 75.25 8.05 46.14 53.12 17.04 8.05 0.04 8.05 46.15 79.45 92.25 8.05"/><polygon points="46.15 87.39 7.11 26.94 0 26.94 46.14 98.4 92.29 26.94 85.18 26.94 46.15 87.39"/><polygon points="70.34 1.37 46.14 38.17 21.95 1.37 39.75 5.87 39.75 0 52.54 0 52.54 5.87 70.34 1.37"/></g></g></svg>
+      </template>
+      <template #header>
+
+      </template>
+      <vs-sidebar-item id="home">
+        <template #icon>
+          <i class='bx bx-home'></i>
+        </template>
+        Home
+      </vs-sidebar-item>
+      <vs-sidebar-item id="market">
+        <template #icon>
+          <i class='bx bx-grid-alt'></i>
+        </template>
+        Market Overview
+      </vs-sidebar-item>
+      <vs-sidebar-item id="Music">
+        <template #icon>
+          <i class='bx bxs-music'></i>
+        </template>
+        Music
+      </vs-sidebar-item>
+      <vs-sidebar-item id="donate">
+        <template #icon>
+          <i class='bx bxs-donate-heart' ></i>
+        </template>
+        Donate
+      </vs-sidebar-item>
+      <vs-sidebar-item id="drink">
+        <template #icon>
+          <i class='bx bx-drink'></i>
+        </template>
+        Drink
+      </vs-sidebar-item>
+      <vs-sidebar-item id="shopping">
+        <template #icon>
+          <i class='bx bxs-shopping-bags'></i>
+        </template>
+        Shopping
+      </vs-sidebar-item>
+      <vs-sidebar-item id="chat">
+        <template #icon>
+          <i class='bx bx-chat' ></i>
+        </template>
+        Chat
+      </vs-sidebar-item>
+      <template #footer>
+        <vs-row justify="space-between">
+          <vs-avatar>
+            <img src="/avatars/avatar-5.png" alt="">
+          </vs-avatar>
+
+          <vs-avatar badge-color="danger" badge-position="top-right">
+            <i class='bx bx-bell' ></i>
+
+            <template #badge>
+              28
+            </template>
+          </vs-avatar>
+        </vs-row>
+      </template>
+    </vs-sidebar>
+  </div>
+</template>
+<script>
+export default {
+  data:() => ({
+    active: 'home',
+  })
+}
+</script>
+<style lang="stylus">
+  .hidden
+    overflow hidden
+    position relative
+    min-height 600px
+</style>
diff --git a/packages/docs/.vuepress/components/button/icon.vue b/packages/docs/.vuepress/components/button/icon.vue
index 993f5c68..5c0eb4cc 100644
--- a/packages/docs/.vuepress/components/button/icon.vue
+++ b/packages/docs/.vuepress/components/button/icon.vue
@@ -10,7 +10,7 @@
 
     <vs-button
       icon
-      color="success"
+      success
       flat
       :active="active == 1"
       @click="active = 1"
@@ -20,7 +20,7 @@
 
     <vs-button
       icon
-      color="danger"
+      danger
       border
       :active="active == 2"
       @click="active = 2"
@@ -30,7 +30,7 @@
 
     <vs-button
       icon
-      color="warn"
+      warn
       gradient
       :active="active == 3" @click="active = 3"
     >
diff --git a/packages/docs/.vuepress/dist b/packages/docs/.vuepress/dist
index cbdad9b1..d2d8d0e6 160000
--- a/packages/docs/.vuepress/dist
+++ b/packages/docs/.vuepress/dist
@@ -1 +1 @@
-Subproject commit cbdad9b199613676db3535a3c06c3366f1b0fb97
+Subproject commit d2d8d0e68ed1193c1b77aabe406244eddfa9efb7
diff --git a/packages/docs/docs/components/Dialog.md b/packages/docs/docs/components/Dialog.md
index a6c28930..32bb05d0 100644
--- a/packages/docs/docs/components/Dialog.md
+++ b/packages/docs/docs/components/Dialog.md
@@ -143,6 +143,17 @@ PROPS:
             <vs-dialog prevent-close v-model="active">
               ...
             </vs-dialog>
+  - name: v-on:close
+    type: Methods
+    values: function
+    description: return function when closing the dialog.
+    default: null
+    link: null
+    usage: null
+    code: >
+            <vs-dialog @close="handleClose" v-model="active">
+              ...
+            </vs-dialog>
 
 SLOTS:
   - name: slot name
diff --git a/packages/docs/docs/components/Loading.md b/packages/docs/docs/components/Loading.md
index 661b6392..abcafcc3 100644
--- a/packages/docs/docs/components/Loading.md
+++ b/packages/docs/docs/components/Loading.md
@@ -644,8 +644,39 @@ You can change the loading background with the property `loading`
 
 <div slot="template">
 
-  ```html{3,4,5}
-    ...
+  ```html
+    <div ref="target" id="target" class="center">
+      <div :style="`background: ${color};`" class="con-input">
+        <input v-model="color" type="color">
+        <i class='bx bxs-color-fill'></i>
+      </div>
+      <vs-button flat :color="color" @click="openLoading">Open Loading</vs-button>
+    </div>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+      export default {
+        data: () => ({
+          color: '#7a76cb',
+        }),
+        methods: {
+          openLoading() {
+            const loading = this.$vs.loading({
+              background: this.color,
+              color: '#fff'
+            })
+            setTimeout(() => {
+              loading.close()
+            }, 3000)
+          }
+        }
+      }
+    </script>
   ```
 
 </div>
diff --git a/packages/docs/docs/components/Sidebar.md b/packages/docs/docs/components/Sidebar.md
index 36f47844..7e7fbf07 100644
--- a/packages/docs/docs/components/Sidebar.md
+++ b/packages/docs/docs/components/Sidebar.md
@@ -166,6 +166,17 @@ PROPS:
             <vs-sidebar-item
               href="http://vuesax.com/"
             >
+  - name: right
+    type: Boolean
+    values: true,false
+    description: Determines if the component is positioned to the right
+    default: null
+    link: null
+    usage: null
+    code: >
+            <vs-sidebar right>
+              ...
+            </vs-sidebar>
 
 SLOTS:
   - name: logo
@@ -1210,6 +1221,109 @@ You can define if the sidebar is visible or hidden with the open property, this
 
 <card>
 
+## Position Right
+
+Change the position of the sidebar to the right and its animation with the `right` property
+
+<div slot="example">
+  <Sidebar-right />
+</div>
+
+<div slot="template">
+
+  ```html{2}
+    <vs-sidebar
+      right
+      absolute
+      v-model="active"
+      open
+      >
+      <template #logo>
+        ...
+      </template>
+      <template #header>
+
+      </template>
+      <vs-sidebar-item id="home">
+        <template #icon>
+          <i class='bx bx-home'></i>
+        </template>
+        Home
+      </vs-sidebar-item>
+      <vs-sidebar-item id="market">
+        <template #icon>
+          <i class='bx bx-grid-alt'></i>
+        </template>
+        Market Overview
+      </vs-sidebar-item>
+      <vs-sidebar-item id="Music">
+        <template #icon>
+          <i class='bx bxs-music'></i>
+        </template>
+        Music
+      </vs-sidebar-item>
+      <vs-sidebar-item id="donate">
+        <template #icon>
+          <i class='bx bxs-donate-heart' ></i>
+        </template>
+        Donate
+      </vs-sidebar-item>
+      <vs-sidebar-item id="drink">
+        <template #icon>
+          <i class='bx bx-drink'></i>
+        </template>
+        Drink
+      </vs-sidebar-item>
+      <vs-sidebar-item id="shopping">
+        <template #icon>
+          <i class='bx bxs-shopping-bags'></i>
+        </template>
+        Shopping
+      </vs-sidebar-item>
+      <vs-sidebar-item id="chat">
+        <template #icon>
+          <i class='bx bx-chat' ></i>
+        </template>
+        Chat
+      </vs-sidebar-item>
+      <template #footer>
+        <vs-row justify="space-between">
+          <vs-avatar>
+            <img src="/avatars/avatar-5.png" alt="">
+          </vs-avatar>
+
+          <vs-avatar badge-color="danger" badge-position="top-right">
+            <i class='bx bx-bell' ></i>
+
+            <template #badge>
+              28
+            </template>
+          </vs-avatar>
+        </vs-row>
+      </template>
+    </vs-sidebar>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+      export default {
+        data:() => ({
+          active: 'home',
+        })
+      }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
 ## API
 
 </card>
diff --git a/packages/docs/es/docs/components/Dialog.md b/packages/docs/es/docs/components/Dialog.md
index 3ba7a686..65de82cc 100644
--- a/packages/docs/es/docs/components/Dialog.md
+++ b/packages/docs/es/docs/components/Dialog.md
@@ -143,6 +143,17 @@ PROPS:
             <vs-dialog prevent-close v-model="active">
               ...
             </vs-dialog>
+  - name: v-on:close
+    type: Methods
+    values: function
+    description: función de retorno al cerrar el dialog.
+    default: null
+    link: null
+    usage: null
+    code: >
+            <vs-dialog @close="handleClose" v-model="active">
+              ...
+            </vs-dialog>
 
 SLOTS:
   - name: slot name
diff --git a/packages/docs/es/docs/components/Loading.md b/packages/docs/es/docs/components/Loading.md
index 36bb54a3..92304956 100644
--- a/packages/docs/es/docs/components/Loading.md
+++ b/packages/docs/es/docs/components/Loading.md
@@ -644,8 +644,39 @@ Puedes cambiar el background del loading con la propiedad `loading`
 
 <div slot="template">
 
-  ```html{3,4,5}
-    ...
+  ```html
+    <div ref="target" id="target" class="center">
+      <div :style="`background: ${color};`" class="con-input">
+        <input v-model="color" type="color">
+        <i class='bx bxs-color-fill'></i>
+      </div>
+      <vs-button flat :color="color" @click="openLoading">Open Loading</vs-button>
+    </div>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+      export default {
+        data: () => ({
+          color: '#7a76cb',
+        }),
+        methods: {
+          openLoading() {
+            const loading = this.$vs.loading({
+              background: this.color,
+              color: '#fff'
+            })
+            setTimeout(() => {
+              loading.close()
+            }, 3000)
+          }
+        }
+      }
+    </script>
   ```
 
 </div>
diff --git a/packages/docs/es/docs/components/Sidebar.md b/packages/docs/es/docs/components/Sidebar.md
index 65fdfe7c..8abaaebf 100644
--- a/packages/docs/es/docs/components/Sidebar.md
+++ b/packages/docs/es/docs/components/Sidebar.md
@@ -166,6 +166,17 @@ PROPS:
             <vs-sidebar-item
               href="http://vuesax.com/"
             >
+  - name: right
+    type: Boolean
+    values: true,false
+    description: Determina si el componente se posiciona hacia la derecha
+    default: null
+    link: null
+    usage: null
+    code: >
+            <vs-sidebar right>
+              ...
+            </vs-sidebar>
 
 SLOTS:
   - name: logo
@@ -1210,6 +1221,109 @@ Puedes definir si el sidebar es visible o esta oculto con la propiedad open, est
 
 <card>
 
+## Position Right
+
+Cambia la posición de el sidebar a la derecha y su animación con la propiedad `right`
+
+<div slot="example">
+  <Sidebar-right />
+</div>
+
+<div slot="template">
+
+  ```html{2}
+    <vs-sidebar
+      right
+      absolute
+      v-model="active"
+      open
+      >
+      <template #logo>
+        ...
+      </template>
+      <template #header>
+
+      </template>
+      <vs-sidebar-item id="home">
+        <template #icon>
+          <i class='bx bx-home'></i>
+        </template>
+        Home
+      </vs-sidebar-item>
+      <vs-sidebar-item id="market">
+        <template #icon>
+          <i class='bx bx-grid-alt'></i>
+        </template>
+        Market Overview
+      </vs-sidebar-item>
+      <vs-sidebar-item id="Music">
+        <template #icon>
+          <i class='bx bxs-music'></i>
+        </template>
+        Music
+      </vs-sidebar-item>
+      <vs-sidebar-item id="donate">
+        <template #icon>
+          <i class='bx bxs-donate-heart' ></i>
+        </template>
+        Donate
+      </vs-sidebar-item>
+      <vs-sidebar-item id="drink">
+        <template #icon>
+          <i class='bx bx-drink'></i>
+        </template>
+        Drink
+      </vs-sidebar-item>
+      <vs-sidebar-item id="shopping">
+        <template #icon>
+          <i class='bx bxs-shopping-bags'></i>
+        </template>
+        Shopping
+      </vs-sidebar-item>
+      <vs-sidebar-item id="chat">
+        <template #icon>
+          <i class='bx bx-chat' ></i>
+        </template>
+        Chat
+      </vs-sidebar-item>
+      <template #footer>
+        <vs-row justify="space-between">
+          <vs-avatar>
+            <img src="/avatars/avatar-5.png" alt="">
+          </vs-avatar>
+
+          <vs-avatar badge-color="danger" badge-position="top-right">
+            <i class='bx bx-bell' ></i>
+
+            <template #badge>
+              28
+            </template>
+          </vs-avatar>
+        </vs-row>
+      </template>
+    </vs-sidebar>
+  ```
+
+</div>
+
+<div slot="script">
+
+  ```html
+    <script>
+      export default {
+        data:() => ({
+          active: 'home',
+        })
+      }
+    </script>
+  ```
+
+</div>
+
+</card>
+
+<card>
+
 ## API
 
 </card>
diff --git a/packages/vuepress-theme-vuesax/components/HeaderNotification.vue b/packages/vuepress-theme-vuesax/components/HeaderNotification.vue
index 1431e3e6..84fdca5b 100644
--- a/packages/vuepress-theme-vuesax/components/HeaderNotification.vue
+++ b/packages/vuepress-theme-vuesax/components/HeaderNotification.vue
@@ -145,6 +145,11 @@ getVar(var)
 
 @media (max-width: 500px)
   .header-notification
+    ~ .navbar.fixed
+      ~ .carbon-ads
+        margin-top 6px
+    ~ .carbon-ads
+      margin-top 42px
     .con-text-n
       width calc(100% - 30px)
     .con-btn-n
diff --git a/packages/vuepress-theme-vuesax/components/Home.vue b/packages/vuepress-theme-vuesax/components/Home.vue
index 4a009dd5..b7edaca5 100644
--- a/packages/vuepress-theme-vuesax/components/Home.vue
+++ b/packages/vuepress-theme-vuesax/components/Home.vue
@@ -514,7 +514,7 @@ getVar(var)
   .home
     .hero
       width 100%
-      align-items flex-start
+      align-items center
       .content-hero
         width 100%
         align-items center
@@ -538,6 +538,7 @@ getVar(var)
 
 @media (max-width: 670px)
   .home
+    min-height auto
     .content-i
       position relative
       justify-content flex-start
@@ -554,13 +555,8 @@ getVar(var)
         order: -1
         top 0px
         padding 10px !important
-@media (max-width: 600px)
-  .home
-    .hero
-      margin-top 60px
 @media (max-width: 550px)
   .init
-    height 1000px
     min-height auto
   .home
     .hero
diff --git a/packages/vuepress-theme-vuesax/components/HomeComponents.vue b/packages/vuepress-theme-vuesax/components/HomeComponents.vue
index 7f16288b..29901229 100644
--- a/packages/vuepress-theme-vuesax/components/HomeComponents.vue
+++ b/packages/vuepress-theme-vuesax/components/HomeComponents.vue
@@ -1436,6 +1436,7 @@ getVar(var)
       left -12%
 @media (max-width: 760px)
   .con-components
+    display none
     .content-components
       left -18%
 @media (max-width: 470px)
diff --git a/packages/vuepress-theme-vuesax/layouts/Layout.vue b/packages/vuepress-theme-vuesax/layouts/Layout.vue
index acb3114d..2dfae66b 100644
--- a/packages/vuepress-theme-vuesax/layouts/Layout.vue
+++ b/packages/vuepress-theme-vuesax/layouts/Layout.vue
@@ -1,5 +1,6 @@
 <template>
   <div
+    id="vs-app"
     class="theme-container"
     :class="pageClasses"
     @touchstart="onTouchStart"
diff --git a/packages/vuesax/build/index.js b/packages/vuesax/build/index.js
index 6c657a5e..52d9de25 100644
--- a/packages/vuesax/build/index.js
+++ b/packages/vuesax/build/index.js
@@ -26,6 +26,16 @@ execSync(
   `npx webpack --config build/components/webpack.components.js`, {stdio: 'inherit'}
   )
 
+emptyLine()
+emptyLine()
+yellow(`Building Styles`)
+emptyLine()
+emptyLine()
+
+execSync(
+  `npx webpack --config build/styles/webpack.styles.js`, {stdio: 'inherit'}
+  )
+
 emptyLine()
 emptyLine()
 green(chalk.bold(`Success Build!`))
diff --git a/packages/vuesax/build/styles/webpack.styles.js b/packages/vuesax/build/styles/webpack.styles.js
new file mode 100644
index 00000000..ca75d5f1
--- /dev/null
+++ b/packages/vuesax/build/styles/webpack.styles.js
@@ -0,0 +1,26 @@
+const path = require('path')
+const baseWebpackConfig = require('../webpack.base.js')
+const merge = require('webpack-merge')
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+module.exports = merge(baseWebpackConfig, {
+  entry: {
+    'base': './src/styles/index.ts',
+    'base.min': './src/styles/index.ts',
+  },
+  output: {
+    filename: '[name].js',
+    path: path.resolve(process.cwd(), 'dist'),
+    publicPath: '/dist/',
+    library: 'Vuesax',
+    libraryTarget: 'umd',
+    libraryExport: 'default',
+    umdNamedDefine: true,
+    globalObject: 'typeof self !== \'undefined\' ? self : this'
+  },
+  plugins:[
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+    })
+  ]
+})
diff --git a/packages/vuesax/package-lock.json b/packages/vuesax/package-lock.json
index 6e83699e..1f372834 100644
--- a/packages/vuesax/package-lock.json
+++ b/packages/vuesax/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "vuesax",
-  "version": "4.0.1-alpha.24",
+  "version": "4.0.1-alpha.25",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/packages/vuesax/package.json b/packages/vuesax/package.json
index b2d972ef..4e25c496 100644
--- a/packages/vuesax/package.json
+++ b/packages/vuesax/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vuesax",
-  "version": "4.0.1-alpha.24",
+  "version": "4.0.1-alpha.25",
   "description": "Framework components for vuejs",
   "main": "dist/vuesax.js",
   "scripts": {
diff --git a/packages/vuesax/scripts/newComponent.js b/packages/vuesax/scripts/newComponent.js
index 196e2863..db954158 100644
--- a/packages/vuesax/scripts/newComponent.js
+++ b/packages/vuesax/scripts/newComponent.js
@@ -13,7 +13,6 @@ const writeToFile = (contents, file) => {
 
 function FileSass(name) {
   return `@import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-${name.toLowerCase()}-content
diff --git a/packages/vuesax/src/components/vsAlert/Base/style.sass b/packages/vuesax/src/components/vsAlert/Base/style.sass
index 098a7c3e..57f4e7f3 100644
--- a/packages/vuesax/src/components/vsAlert/Base/style.sass
+++ b/packages/vuesax/src/components/vsAlert/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-alert
diff --git a/packages/vuesax/src/components/vsAlert/Base/vsAlert.ts b/packages/vuesax/src/components/vsAlert/Base/vsAlert.ts
index 5995acf6..78e8c933 100644
--- a/packages/vuesax/src/components/vsAlert/Base/vsAlert.ts
+++ b/packages/vuesax/src/components/vsAlert/Base/vsAlert.ts
@@ -218,6 +218,9 @@ export default class VsAlert extends VsComponent {
 
     const render = h('div', {
       staticClass: 'vs-alert',
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
       class: [
         { [`vs-alert--solid`] : !!this.solid },
         { [`vs-alert--border`] : !!this.border },
@@ -226,6 +229,13 @@ export default class VsAlert extends VsComponent {
         { [`vs-alert--flat`] : !!this.flat },
         { [`vs-alert--relief`] : !!this.relief },
         { [`vs-alert--pages`] : this.getPages.length > 0 },
+
+        // colors
+        { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+        { [`vs-component--danger`] : !!this.danger },
+        { [`vs-component--warn`] : !!this.warn },
+        { [`vs-component--success`] : !!this.success },
+        { [`vs-component--dark`] : !!this.dark },
       ],
     }, [
       this.$slots.icon && icon,
diff --git a/packages/vuesax/src/components/vsAvatar/Base/style.sass b/packages/vuesax/src/components/vsAvatar/Base/style.sass
index 5a2a61f9..3de56a86 100644
--- a/packages/vuesax/src/components/vsAvatar/Base/style.sass
+++ b/packages/vuesax/src/components/vsAvatar/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-avatar-content
@@ -69,7 +68,7 @@
       background-color: #FFE53B
       z-index: -1
       background: -color('color')
-  &.vs-change-color
+  &.vs-component--is-color
     .vs-avatar
       color: -color('background')
     .vs-avatar__points
diff --git a/packages/vuesax/src/components/vsAvatar/Base/vsAvatar.ts b/packages/vuesax/src/components/vsAvatar/Base/vsAvatar.ts
index c76464f2..8a76bf77 100644
--- a/packages/vuesax/src/components/vsAvatar/Base/vsAvatar.ts
+++ b/packages/vuesax/src/components/vsAvatar/Base/vsAvatar.ts
@@ -153,9 +153,10 @@ export default class VsAvatar extends VsComponent {
       style: {
         width: `${this.size}px`,
         height: `${this.size}px`,
-        cursor: this.pointer && 'pointer'
+        cursor: this.pointer && 'pointer',
+        ['--vs-color']: this.color ? this.getColor : ''
       },
-      class: {
+      class: [{
         'history': this.history,
         'history--gradient': this.historyGradient,
         'vs-avatar-content--circle': this.circle,
@@ -164,7 +165,15 @@ export default class VsAvatar extends VsComponent {
         'vs-avatar-content--latest': this.isLatest,
         'vs-avatar-content--hasIcons': this.$slots.icons,
         [`vs-avatar-content--size`]: this.size,
-      }
+      },
+      // colors
+      { [`vs-component--primary`] : !!this.primary },
+      { [`vs-component--danger`] : !!this.danger },
+      { [`vs-component--warn`] : !!this.warn },
+      { [`vs-component--success`] : !!this.success },
+      { [`vs-component--dark`] : !!this.dark },
+      { [`vs-component--is-color`] : !!this.isColor },
+    ]
     }, [
       this.loading && loading,
       avatar,
diff --git a/packages/vuesax/src/components/vsButton/Base/VsButton.ts b/packages/vuesax/src/components/vsButton/Base/VsButton.ts
index 70978d19..e93533ff 100644
--- a/packages/vuesax/src/components/vsButton/Base/VsButton.ts
+++ b/packages/vuesax/src/components/vsButton/Base/VsButton.ts
@@ -71,6 +71,9 @@ export default class VsButton extends VsComponent {
 
     const btn = h('button', {
       staticClass: 'vs-button',
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
       class: [
         // `vs-button--${this.color.replace('#', '')}`,
         `vs-button--${this.componentColor}`,
@@ -88,6 +91,13 @@ export default class VsButton extends VsComponent {
         { [`vs-button--animate-${this.animationType}`] : !!this.animationType },
         { [`vs-button--animate-inactive`] : !!this.animateInactive },
 
+        // colors
+        { [`vs-button--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+        { [`vs-button--danger`] : !!this.danger },
+        { [`vs-button--warn`] : !!this.warn },
+        { [`vs-button--success`] : !!this.success },
+        { [`vs-button--dark`] : !!this.dark },
+
         { [`vs-button--default`] :
           !this.flat &&
           !this.border &&
@@ -122,8 +132,7 @@ export default class VsButton extends VsComponent {
                 evt,
                 (this.componentColor || this.color || 'primary') &&
                 !this.active &&
-                document.activeElement !== this.$el ?
-                this.componentColor || this.color :
+                document.activeElement !== this.$el ? 'inherit' :
                 null,
                 this.flat && !this.active && document.activeElement !== this.$el
               )
diff --git a/packages/vuesax/src/components/vsButton/Base/_root.sass b/packages/vuesax/src/components/vsButton/Base/_root.sass
index 806a176e..04c924b2 100644
--- a/packages/vuesax/src/components/vsButton/Base/_root.sass
+++ b/packages/vuesax/src/components/vsButton/Base/_root.sass
@@ -1,5 +1,5 @@
 .vs-button
-  --vs-color: var(--vs-primary)
+  --vs-color: ''
   --vs-color-rotate: var(--vs-primary)
   --vs-color-darken: var(--vs-primary)
 
diff --git a/packages/vuesax/src/components/vsButton/Base/style.sass b/packages/vuesax/src/components/vsButton/Base/style.sass
index a8147078..793d742d 100644
--- a/packages/vuesax/src/components/vsButton/Base/style.sass
+++ b/packages/vuesax/src/components/vsButton/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-button
diff --git a/packages/vuesax/src/components/vsButton/group/style.sass b/packages/vuesax/src/components/vsButton/group/style.sass
index 63be0a89..5888d419 100644
--- a/packages/vuesax/src/components/vsButton/group/style.sass
+++ b/packages/vuesax/src/components/vsButton/group/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 
 .vs-button-group
   display: flex
diff --git a/packages/vuesax/src/components/vsCard/Base/style.sass b/packages/vuesax/src/components/vsCard/Base/style.sass
index 6c798aca..c2853d5b 100644
--- a/packages/vuesax/src/components/vsCard/Base/style.sass
+++ b/packages/vuesax/src/components/vsCard/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-card-content
diff --git a/packages/vuesax/src/components/vsCard/Group/style.sass b/packages/vuesax/src/components/vsCard/Group/style.sass
index fc28e777..bda8c547 100644
--- a/packages/vuesax/src/components/vsCard/Group/style.sass
+++ b/packages/vuesax/src/components/vsCard/Group/style.sass
@@ -1,4 +1,4 @@
-@import '../../../styles/mixins'
+// @import '../../../styles/mixins'
 .vs-card__group
   width: 100%
   display: flex
@@ -34,6 +34,7 @@
     align-items: center
     justify-content: center
     background: transparent
+    border: 0px
     .vs-icon-arrow
       width: 15px
       height: 15px
@@ -44,6 +45,7 @@
       &:after
        height: 2px
   .vs-card__group-next
+    border: 0px
     z-index: 2
     position: relative
     left: 0px
diff --git a/packages/vuesax/src/components/vsCheckbox/Base/style.sass b/packages/vuesax/src/components/vsCheckbox/Base/style.sass
index 947ea776..fa7fd501 100644
--- a/packages/vuesax/src/components/vsCheckbox/Base/style.sass
+++ b/packages/vuesax/src/components/vsCheckbox/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-checkbox-content
diff --git a/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts b/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts
index 709a4c7a..0f0045e1 100644
--- a/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts
+++ b/packages/vuesax/src/components/vsCheckbox/Base/vsCheckbox.ts
@@ -162,11 +162,21 @@ export default class VsCheckbox extends VsComponent {
 
     return h('div', {
       staticClass: 'vs-checkbox-content',
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
       class: [
         { 'vs-checkbox--checked': this.isChecked },
         { 'vs-checkbox--disabled': this.$attrs.hasOwnProperty('disabled') },
         { 'vs-checkbox--loading': this.loading },
         { 'vs-checkbox--label-before': this.labelBefore },
+
+        // colors
+        { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+        { [`vs-component--danger`] : !!this.danger },
+        { [`vs-component--warn`] : !!this.warn },
+        { [`vs-component--success`] : !!this.success },
+        { [`vs-component--dark`] : !!this.dark },
       ]
     },
      [
diff --git a/packages/vuesax/src/components/vsDialog/Base/style.sass b/packages/vuesax/src/components/vsDialog/Base/style.sass
index 6b0bf07f..7b288a69 100644
--- a/packages/vuesax/src/components/vsDialog/Base/style.sass
+++ b/packages/vuesax/src/components/vsDialog/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-dialog-enter-active
@@ -175,6 +174,7 @@
     box-shadow: 0px 5px 20px 0px rgba(0,0,0, -var('shadow-opacity'))
     transition: all .25s ease
     z-index: 200
+    border: 0px
     i
       width: 34px
       height: 34px
diff --git a/packages/vuesax/src/components/vsDialog/Base/vsDialog.ts b/packages/vuesax/src/components/vsDialog/Base/vsDialog.ts
index b77a4b8d..17eaab7c 100644
--- a/packages/vuesax/src/components/vsDialog/Base/vsDialog.ts
+++ b/packages/vuesax/src/components/vsDialog/Base/vsDialog.ts
@@ -39,6 +39,7 @@ export default class VsDialog extends VsComponent {
   esc(evt: any) {
     if (evt.which == 27 && !this.preventClose) {
       this.$emit('input', false)
+      this.$emit('close')
     }
   }
 
@@ -102,6 +103,7 @@ export default class VsDialog extends VsComponent {
       on: {
         click: (evt: any) => {
           this.$emit('input', !this.value)
+          this.$emit('close')
         }
       }
     }, [
@@ -154,6 +156,7 @@ export default class VsDialog extends VsComponent {
         click: (evt: any) => {
           if (!evt.target.closest('.vs-dialog') && !this.preventClose) {
             this.$emit('input', !this.value)
+            this.$emit('close')
           }
 
           if (this.preventClose && !evt.target.closest('.vs-dialog')) {
diff --git a/packages/vuesax/src/components/vsInput/Base/style.sass b/packages/vuesax/src/components/vsInput/Base/style.sass
index 70e31236..7f1f6774 100644
--- a/packages/vuesax/src/components/vsInput/Base/style.sass
+++ b/packages/vuesax/src/components/vsInput/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 @mixin state($color)
diff --git a/packages/vuesax/src/components/vsInput/Base/vsInput.ts b/packages/vuesax/src/components/vsInput/Base/vsInput.ts
index e765f26c..8252ad0a 100644
--- a/packages/vuesax/src/components/vsInput/Base/vsInput.ts
+++ b/packages/vuesax/src/components/vsInput/Base/vsInput.ts
@@ -193,6 +193,9 @@ export default class VsInput extends VsComponent {
 
     return h('div', {
       staticClass: 'vs-input-parent',
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
       class: [
         `vs-input-parent--state-${this.state}`,
         { 'vs-input-parent--border': !!this.border },
@@ -201,7 +204,15 @@ export default class VsInput extends VsComponent {
         { block: this.block },
         { transparent: this.transparent },
         { textWhite: this.textWhite },
-        { square: this.square }
+        { square: this.square },
+
+        // colors
+        { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+        { [`vs-component--danger`] : !!this.danger },
+        { [`vs-component--warn`] : !!this.warn },
+        { [`vs-component--success`] : !!this.success },
+        { [`vs-component--dark`] : !!this.dark },
+        { [`vs-component--is-color`] : !!this.isColor },
       ]
     }, [
       inputContent,
diff --git a/packages/vuesax/src/components/vsNavbar/Base/style.sass b/packages/vuesax/src/components/vsNavbar/Base/style.sass
index 2b6da01e..260777a8 100644
--- a/packages/vuesax/src/components/vsNavbar/Base/style.sass
+++ b/packages/vuesax/src/components/vsNavbar/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-navbar-content
diff --git a/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts b/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts
index ce24a8ea..54d7c87e 100644
--- a/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts
+++ b/packages/vuesax/src/components/vsNavbar/Base/vsNavbar.ts
@@ -186,7 +186,10 @@ export default class VsNavbar extends VsComponent {
 
     return h('div', {
       staticClass: 'vs-navbar-content',
-      class: {
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
+      class: [{
         fixed: this.fixed,
         shadow: this.shadow,
         hidden: this.hidden,
@@ -195,7 +198,15 @@ export default class VsNavbar extends VsComponent {
         paddingScroll: this.paddingScroll,
         paddingScrollActive: this.paddingScrollActive,
         vsNavbarSquare: this.square,
-      }
+      },
+      // colors
+      { [`vs-component--primary`] : !!this.primary },
+      { [`vs-component--danger`] : !!this.danger },
+      { [`vs-component--warn`] : !!this.warn },
+      { [`vs-component--success`] : !!this.success },
+      { [`vs-component--dark`] : !!this.dark },
+      { [`vs-component--is-color`] : !!this.isColor },
+    ]
     }, [
       navbar,
       !this.notLine && line
diff --git a/packages/vuesax/src/components/vsNavbar/Group/style.sass b/packages/vuesax/src/components/vsNavbar/Group/style.sass
index ad35368f..065fa6a4 100644
--- a/packages/vuesax/src/components/vsNavbar/Group/style.sass
+++ b/packages/vuesax/src/components/vsNavbar/Group/style.sass
@@ -15,6 +15,7 @@
     font-weight: bold
     transition: all .25s ease, color 0s
     opacity: .7
+    border: 0px
   &__items
     position: absolute
     bottom: 0px
diff --git a/packages/vuesax/src/components/vsPagination/Base/style.sass b/packages/vuesax/src/components/vsPagination/Base/style.sass
index a19c18fd..ba2c68b5 100644
--- a/packages/vuesax/src/components/vsPagination/Base/style.sass
+++ b/packages/vuesax/src/components/vsPagination/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-pagination-content
@@ -114,6 +113,7 @@
     margin: 0px 2px
     background: -color('gray-3')
     transition: all .25s ease
+    border: 0px
     &:disabled
       opacity: .4
       pointer-events: none
@@ -230,6 +230,7 @@
     transition: all .25s ease
     color: -color('text')
     position: relative
+    border: 0px
     &.loading
       border-radius: 50%
       opacity: .5
diff --git a/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts b/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts
index a3d8bbda..34feb25d 100644
--- a/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts
+++ b/packages/vuesax/src/components/vsPagination/Base/vsPagination.ts
@@ -306,6 +306,9 @@ export default class VsPagination extends VsComponent {
 
     return h('div', {
       staticClass: 'vs-pagination-content',
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
       class: [
         {
           buttonsDotted: this.buttonsDotted,
@@ -313,7 +316,14 @@ export default class VsPagination extends VsComponent {
           square: this.square,
           disabled: this.disabled,
           notMargin: this.notMargin
-        }
+        },
+
+        // colors
+        { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+        { [`vs-component--danger`] : !!this.danger },
+        { [`vs-component--warn`] : !!this.warn },
+        { [`vs-component--success`] : !!this.success },
+        { [`vs-component--dark`] : !!this.dark },
       ]
     }, [
       (!this.onlyArrows && !this.$slots.default) && active,
diff --git a/packages/vuesax/src/components/vsRadio/Base/style.sass b/packages/vuesax/src/components/vsRadio/Base/style.sass
index 183d0587..1d302e4f 100644
--- a/packages/vuesax/src/components/vsRadio/Base/style.sass
+++ b/packages/vuesax/src/components/vsRadio/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-radio-content
@@ -81,6 +80,8 @@
 .vs-radio
   width: 20px
   height: 20px
+  min-width: 20px
+  min-height: 20px
   margin: 0px
   padding: 0px
   border-radius: 50%
diff --git a/packages/vuesax/src/components/vsRadio/Base/vsRadio.ts b/packages/vuesax/src/components/vsRadio/Base/vsRadio.ts
index fde66849..6718b6a5 100644
--- a/packages/vuesax/src/components/vsRadio/Base/vsRadio.ts
+++ b/packages/vuesax/src/components/vsRadio/Base/vsRadio.ts
@@ -70,11 +70,21 @@ export default class VsRadio extends VsComponent {
     ])
     return h('div', {
       staticClass: 'vs-radio-content',
-      class: {
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
+      class: [{
         disabled: this.disabled,
         loading: this.loading,
         active: this.isChecked
-      }
+      },
+      // colors
+      { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+      { [`vs-component--danger`] : !!this.danger },
+      { [`vs-component--warn`] : !!this.warn },
+      { [`vs-component--success`] : !!this.success },
+      { [`vs-component--dark`] : !!this.dark },
+    ]
     }, [
       this.labelBefore && label,
       radio,
diff --git a/packages/vuesax/src/components/vsSelect/Base/style.sass b/packages/vuesax/src/components/vsSelect/Base/style.sass
index 5147b001..3491b9d6 100644
--- a/packages/vuesax/src/components/vsSelect/Base/style.sass
+++ b/packages/vuesax/src/components/vsSelect/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 @mixin state($color)
@@ -121,7 +120,7 @@
       box-shadow: 0px 5px 25px -4px rgba(0,0,0, -var(shadow-opacity))
       transform: translate(0, -4px)
       transition: all .25s ease, height 0s
-      // border: 2px solid transparent !important
+      border: 2px solid transparent
       color: -color('text',1)
     .vs-select__chips
       border-radius: 12px 12px 0px 0px
@@ -144,7 +143,7 @@
     opacity: 1
     background: transparent
     padding: 7px 13px
-    // border: 2px solid transparent
+    border: 2px solid transparent
     border-radius: 12px
     cursor: pointer
     transition: all .25s ease, height 0s
@@ -220,7 +219,7 @@
       max-width: 100%
       position: relative
       min-width: 0px
-      // border: 2px solid transparent
+      border: 0px solid transparent
       background: transparent
       margin: 2px 3px
       min-width: 30px
@@ -331,13 +330,12 @@
     user-select: none
     pointer-events: none
     width: 100%
-    // height: 100%
     display: flex
     align-items: center
     justify-content: flex-start
     opacity: .4
     z-index: 500
-    top: 10px
+    // top: 10px
     &--hidden
       opacity: 0
       visibility: hidden
diff --git a/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts b/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts
index ded9795f..b3ceb4a8 100644
--- a/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts
+++ b/packages/vuesax/src/components/vsSelect/Base/vsSelect.ts
@@ -125,11 +125,13 @@ export default class VsSelect extends VsComponent {
 
   get getValueLabel() {
     const valueLabel = this.valueLabel
-    const labels: any[] = []
-    if (valueLabel) {
+    let labels: any[] = []
+    if (Array.isArray(valueLabel)) {
       valueLabel.forEach((item: any) => {
         labels.push(item.label)
       })
+    } else {
+      labels = valueLabel
     }
 
     return labels
@@ -195,7 +197,7 @@ export default class VsSelect extends VsComponent {
     }
 
     let chips: any[] = []
-    if (this.valueLabel) {
+    if (Array.isArray(this.valueLabel)) {
       this.valueLabel.forEach((item: any) => {
         chips.push(chip(item, false))
       })
@@ -233,27 +235,29 @@ export default class VsSelect extends VsComponent {
       }, index);
     }
     if (evt.code == 'ArrowDown') {
-      event.preventDefault()
+      evt.preventDefault()
       if (this.hoverOption < this.childOptions.length - 1) {
         this.hoverOption++
       } else {
         this.hoverOption = 0
       }
     } else if (evt.code == 'ArrowUp') {
-      event.preventDefault()
+      evt.preventDefault()
       if (this.hoverOption > 0) {
         this.hoverOption--
       } else {
         this.hoverOption = this.childOptions.length - 1
       }
     } else if (evt.code == 'Enter') {
-      event.preventDefault()
-      if (!this.childOptions[this.hoverOption].disabled) {
-          this.clickOption(this.childOptions[this.hoverOption].value, this.childOptions[this.hoverOption].label)
-          if (!this.multiple) {
-            this.handleBlur();
-            (this.$refs.input as HTMLElement).blur()
-          }
+      evt.preventDefault()
+      if (this.hoverOption !== -1) {
+        if (!this.childOptions[this.hoverOption].disabled) {
+            this.clickOption(this.childOptions[this.hoverOption].value, this.childOptions[this.hoverOption].label)
+            if (!this.multiple) {
+              this.handleBlur();
+              (this.$refs.input as HTMLElement).blur()
+            }
+        }
       }
     }
 
@@ -432,9 +436,19 @@ export default class VsSelect extends VsComponent {
     }, [ this.activeOptions && h('div', {
       staticClass: 'vs-select__options',
       ref: 'options',
-      class: {
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
+      class: [{
         isColorDark: this.isColorDark
       },
+      // colors
+      { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+      { [`vs-component--danger`] : !!this.danger },
+      { [`vs-component--warn`] : !!this.warn },
+      { [`vs-component--success`] : !!this.success },
+      { [`vs-component--dark`] : !!this.dark },
+    ],
       on: {
         mouseleave: () => {
           this.targetSelect = false
@@ -619,9 +633,19 @@ export default class VsSelect extends VsComponent {
 
     return  h('div', {
       staticClass: 'vs-select-content',
-      class: {
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
+      class: [{
         block: this.block
-      }
+      },
+      // colors
+      { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+      { [`vs-component--danger`] : !!this.danger },
+      { [`vs-component--warn`] : !!this.warn },
+      { [`vs-component--success`] : !!this.success },
+      { [`vs-component--dark`] : !!this.dark },
+    ]
     }, [
       selectContent,
       messageSuccess,
diff --git a/packages/vuesax/src/components/vsSelect/Option/vsSelectOption.ts b/packages/vuesax/src/components/vsSelect/Option/vsSelectOption.ts
index ebb59996..39ca91d7 100644
--- a/packages/vuesax/src/components/vsSelect/Option/vsSelectOption.ts
+++ b/packages/vuesax/src/components/vsSelect/Option/vsSelectOption.ts
@@ -85,6 +85,7 @@ export default class VsSelectOption extends VsComponent {
       on: {
         ...this.$listeners,
         mousedown: () => {
+          console.log(this.value);
           (this.$parent as any).clickOption(this.value, this.label)
         },
         blur: () => {
diff --git a/packages/vuesax/src/components/vsSidebar/Base/style.sass b/packages/vuesax/src/components/vsSidebar/Base/style.sass
index 29d5e27b..ec4f1265 100644
--- a/packages/vuesax/src/components/vsSidebar/Base/style.sass
+++ b/packages/vuesax/src/components/vsSidebar/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 @keyframes delayOpacity
@@ -27,6 +26,19 @@
   background: -color('background')
   transition: all .25s ease
   transform: translate(-110%)
+  &.right
+    left: auto
+    right: 0px
+    transform: translate(110%)
+    &.open
+      transform: translate(0)
+    &.reduce
+      .vs-sidebar__item
+        &:hover
+          .vs-sidebar__item__text-tooltip
+            opacity: 1
+            left: auto !important
+            right: 60px !important
   &.absolute
     position: absolute !important
     z-index: 9001
diff --git a/packages/vuesax/src/components/vsSidebar/Base/vsSidebar.ts b/packages/vuesax/src/components/vsSidebar/Base/vsSidebar.ts
index a65176bf..394acb4d 100644
--- a/packages/vuesax/src/components/vsSidebar/Base/vsSidebar.ts
+++ b/packages/vuesax/src/components/vsSidebar/Base/vsSidebar.ts
@@ -16,6 +16,7 @@ export default class VsSidebar extends VsComponent {
   @Prop({ default: false, type: Boolean }) notShadow: boolean
   @Prop({ default: false, type: Boolean }) relative: boolean
   @Prop({ default: false, type: Boolean }) absolute: boolean
+  @Prop({ default: false, type: Boolean }) right: boolean
   @Prop({ default: 'background', type: String }) background: string
 
   staticWidth: number = 260
@@ -112,7 +113,10 @@ export default class VsSidebar extends VsComponent {
 
     return h('div', {
       staticClass: 'vs-sidebar-content',
-      class: {
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
+      class: [{
         reduce: this.reduceInternal,
         open: this.open,
         notLineActive: this.notLineActive,
@@ -120,8 +124,17 @@ export default class VsSidebar extends VsComponent {
         notShadow: this.notShadow,
         textWhite: this.textWhite,
         relative: this.relative,
-        absolute: this.absolute
+        absolute: this.absolute,
+        right: this.right
       },
+      // colors
+      { [`vs-component--primary`] : !!this.primary },
+      { [`vs-component--danger`] : !!this.danger },
+      { [`vs-component--warn`] : !!this.warn },
+      { [`vs-component--success`] : !!this.success },
+      { [`vs-component--dark`] : !!this.dark },
+      { [`vs-component--is-color`] : !!this.isColor },
+    ],
       on: {
         mouseenter: () => {
           if (this.hoverExpand) {
diff --git a/packages/vuesax/src/components/vsSidebar/Group/vsSidebarGroup.ts b/packages/vuesax/src/components/vsSidebar/Group/vsSidebarGroup.ts
index 134ad3c7..7ce6f73f 100644
--- a/packages/vuesax/src/components/vsSidebar/Group/vsSidebarGroup.ts
+++ b/packages/vuesax/src/components/vsSidebar/Group/vsSidebarGroup.ts
@@ -1,12 +1,14 @@
 import { VNode } from 'vue'
-import { Component, Watch } from 'vue-property-decorator'
+import { Component, Prop, Watch } from 'vue-property-decorator'
 import VsComponent from '../../../mixins/component'
 
 @Component
 export default class VsSidebarGroup extends VsComponent {
 
   group: boolean = true
-  open: boolean = false
+  openState: boolean = false
+
+  @Prop({type: Boolean}) open: boolean
 
   @Watch('open')
   handleOpen(val: boolean) {
@@ -47,12 +49,18 @@ export default class VsSidebarGroup extends VsComponent {
     el.style.height = '0px'
   }
 
+  mounted() {
+    if (this.$el.querySelector('.active') || this.open) {
+      this.openState = true
+    }
+  }
+
   public render(h: any): VNode {
     const header = h('div', {
       staticClass: 'vs-sidebar__group__header',
       on: {
         click: () => {
-          this.open = !this.open
+          this.openState = !this.openState
         }
       }
     }, [
@@ -65,7 +73,7 @@ export default class VsSidebarGroup extends VsComponent {
       directives: [
         {
           name: 'show',
-          value: this.open
+          value: this.openState
         }
       ]
     }, [
@@ -83,7 +91,7 @@ export default class VsSidebarGroup extends VsComponent {
     return h('div', {
       staticClass: 'vs-sidebar__group',
       class: {
-        open: this.open
+        open: this.openState
       }
     }, [
       header,
diff --git a/packages/vuesax/src/components/vsSidebar/Item/style.sass b/packages/vuesax/src/components/vsSidebar/Item/style.sass
index 586952f4..56489d77 100644
--- a/packages/vuesax/src/components/vsSidebar/Item/style.sass
+++ b/packages/vuesax/src/components/vsSidebar/Item/style.sass
@@ -14,8 +14,7 @@
   justify-content: flex-start
   position: relative
   color: -color('text')
-  // background: -color('background')
-  // min-width: 260px
+  border: 0px
   &.hasIcon
     padding: 0px
     &.active
diff --git a/packages/vuesax/src/components/vsSwitch/Base/style.sass b/packages/vuesax/src/components/vsSwitch/Base/style.sass
index 8d2875db..205e2df8 100644
--- a/packages/vuesax/src/components/vsSwitch/Base/style.sass
+++ b/packages/vuesax/src/components/vsSwitch/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 @keyframes rotateSwitch
diff --git a/packages/vuesax/src/components/vsSwitch/Base/vsSwitch.ts b/packages/vuesax/src/components/vsSwitch/Base/vsSwitch.ts
index b7261866..4c5304a2 100644
--- a/packages/vuesax/src/components/vsSwitch/Base/vsSwitch.ts
+++ b/packages/vuesax/src/components/vsSwitch/Base/vsSwitch.ts
@@ -127,12 +127,21 @@ export default class VsSwitch extends VsComponent {
       attrs: {
         type: 'checkbox',
       },
-      class: {
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
+      class: [{
         'vs-switch--loading': this.loading,
         'vs-switch--square': this.square,
         'vs-switch--indeterminate': this.indeterminate,
         'vs-switch--icon': this.icon,
       },
+      { [`vs-component--primary`] : !this.danger && !this.success && !this.warn && !this.dark && !this.color },
+      { [`vs-component--danger`] : !!this.danger },
+      { [`vs-component--warn`] : !!this.warn },
+      { [`vs-component--success`] : !!this.success },
+      { [`vs-component--dark`] : !!this.dark },
+    ],
     }, [
       input,
       circle,
diff --git a/packages/vuesax/src/components/vsTable/Base/style.sass b/packages/vuesax/src/components/vsTable/Base/style.sass
index f33b113d..1d9915f3 100644
--- a/packages/vuesax/src/components/vsTable/Base/style.sass
+++ b/packages/vuesax/src/components/vsTable/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-table-content
@@ -16,6 +15,7 @@
     border-collapse: collapse
     width: 100%
     min-width: 500px
+    border: 0px
   &.striped
     .vs-table__tr
       &:nth-child(2n)
diff --git a/packages/vuesax/src/components/vsTable/Td/style.sass b/packages/vuesax/src/components/vsTable/Td/style.sass
index 0404a027..94e24ca5 100644
--- a/packages/vuesax/src/components/vsTable/Td/style.sass
+++ b/packages/vuesax/src/components/vsTable/Td/style.sass
@@ -3,6 +3,7 @@
   padding: 10px 12px
   transition: all .25s ease
   font-size: .8rem
+  border: 0px
   &:last-child
     border-radius: 0px 15px 15px 0px
   &:first-child
diff --git a/packages/vuesax/src/components/vsTable/Th/style.sass b/packages/vuesax/src/components/vsTable/Th/style.sass
index bebe1650..87132fab 100644
--- a/packages/vuesax/src/components/vsTable/Th/style.sass
+++ b/packages/vuesax/src/components/vsTable/Th/style.sass
@@ -4,6 +4,7 @@
   text-align: left
   transition: all .25s ease
   font-size: .8rem
+  border: 0px
   &.sort
     .vs-table__th__content
       pointer-events: none
diff --git a/packages/vuesax/src/components/vsTable/Tr/style.sass b/packages/vuesax/src/components/vsTable/Tr/style.sass
index bb08431d..827f37a0 100644
--- a/packages/vuesax/src/components/vsTable/Tr/style.sass
+++ b/packages/vuesax/src/components/vsTable/Tr/style.sass
@@ -5,6 +5,7 @@
       border-radius: 0px !important
 .vs-table__tr
   padding: 5px
+  border: 0px
   &.expand
     cursor: pointer
   &.vs-change-color
@@ -50,10 +51,12 @@
 
 .vs-table__tr__expand
   transition: all .25s ease
+  border: 0px
   td
     transition: all .25s ease
     padding: 0px
     background: -color('gray-1') !important
+    border: 0px
     .vs-table__expand__td__content
       overflow: hidden
       display: block
diff --git a/packages/vuesax/src/components/vsTooltip/Base/style.sass b/packages/vuesax/src/components/vsTooltip/Base/style.sass
index db4bc187..5be5d201 100644
--- a/packages/vuesax/src/components/vsTooltip/Base/style.sass
+++ b/packages/vuesax/src/components/vsTooltip/Base/style.sass
@@ -1,5 +1,4 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
 @import 'root'
 
 .vs-tooltip-enter-active, .vs-tooltip-leave-active
diff --git a/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts b/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts
index 0182e1b0..f68654c4 100644
--- a/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts
+++ b/packages/vuesax/src/components/vsTooltip/Base/vsTooltip.ts
@@ -52,9 +52,6 @@ export default class VsTooltip extends VsComponent {
     }
 
     setCordsPosition(tooltip, this.$refs.content, position)
-    this.$nextTick(() => {
-      this.changeColor()
-    })
   }
 
   handlerMouseEnter() {
@@ -117,6 +114,13 @@ export default class VsTooltip extends VsComponent {
   }
 
   mounted() {
+    window.addEventListener('popstate', (event) => {
+      const tooltips = document.querySelectorAll('.vs-tooltip')
+      tooltips.forEach((tooltip) => {
+        tooltip.remove()
+      })
+    })
+
     window.addEventListener('resize', this.handleResize)
     if (this.notHover) {
       window.addEventListener('mousedown', this.handleMouseDownNotHover)
@@ -139,6 +143,9 @@ export default class VsTooltip extends VsComponent {
     const tooltip = h('div', {
       staticClass: 'vs-tooltip',
       ref: 'tooltip',
+      style: {
+        ['--vs-color']: this.color ? this.getColor : ''
+      },
       class: [
         {
           top: !this.bottom && !this.left && !this.right,
@@ -152,7 +159,13 @@ export default class VsTooltip extends VsComponent {
           border: this.border,
           borderThick: this.borderThick,
           loading: this.loading
-        }
+        },
+        // colors
+        { [`vs-component--primary`] : !!this.primary },
+        { [`vs-component--danger`] : !!this.danger },
+        { [`vs-component--warn`] : !!this.warn },
+        { [`vs-component--success`] : !!this.success },
+        { [`vs-component--dark`] : !!this.dark },
       ],
       on: {
         mouseenter: () => {
diff --git a/packages/vuesax/src/functions/vsLoading/Base/style.sass b/packages/vuesax/src/functions/vsLoading/Base/style.sass
index eb598dc8..c702601b 100644
--- a/packages/vuesax/src/functions/vsLoading/Base/style.sass
+++ b/packages/vuesax/src/functions/vsLoading/Base/style.sass
@@ -1,5 +1,5 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
+// @import '../../../styles/colors'
 
 .loading-enter-active, .loading-leave-active
   transition: opacity .5s
diff --git a/packages/vuesax/src/functions/vsNotification/Base/style.sass b/packages/vuesax/src/functions/vsNotification/Base/style.sass
index cac3c762..8beffaaa 100644
--- a/packages/vuesax/src/functions/vsNotification/Base/style.sass
+++ b/packages/vuesax/src/functions/vsNotification/Base/style.sass
@@ -1,5 +1,5 @@
 @import '../../../styles/mixins'
-@import '../../../styles/colors'
+// @import '../../../styles/colors'
 
 .notification-enter-active
   transition: all .3s ease .05s, transform .3s ease, margin .25s ease, clip-path 8s ease .8s
diff --git a/packages/vuesax/src/icons/icons.sass b/packages/vuesax/src/icons/icons.sass
index 0f1c9728..ba536efd 100644
--- a/packages/vuesax/src/icons/icons.sass
+++ b/packages/vuesax/src/icons/icons.sass
@@ -1,5 +1,5 @@
 @import '../styles/mixins'
-@import '../styles/colors'
+// @import '../styles/colors'
 .vs-icon-close
   width: 30px
   height: 30px
diff --git a/packages/vuesax/src/index.ts b/packages/vuesax/src/index.ts
index f2d92b7e..e436ccba 100644
--- a/packages/vuesax/src/index.ts
+++ b/packages/vuesax/src/index.ts
@@ -9,7 +9,6 @@ const install = (Vue: any, options?: VuesaxOptions) => {
   Object.values(vsComponents).forEach((vsComponent) => {
     Vue.use(vsComponent)
   })
-
   // layout
   Object.values(vsLayouts).forEach((vsLayout) => {
     Vue.use(vsLayout)
diff --git a/packages/vuesax/src/layout/grid/style.sass b/packages/vuesax/src/layout/grid/style.sass
index 4c0c9ebe..ec3a2b31 100644
--- a/packages/vuesax/src/layout/grid/style.sass
+++ b/packages/vuesax/src/layout/grid/style.sass
@@ -1,5 +1,5 @@
 @import '../../styles/mixins'
-@import '../../styles/colors'
+// @import '../../styles/colors'
 
 .vs-row
   width: 100%
diff --git a/packages/vuesax/src/mixins/component.ts b/packages/vuesax/src/mixins/component.ts
index 2a32c9db..90922517 100644
--- a/packages/vuesax/src/mixins/component.ts
+++ b/packages/vuesax/src/mixins/component.ts
@@ -1,6 +1,6 @@
 import Vue from 'vue'
 import { Component, Prop, Watch } from 'vue-property-decorator'
-import { setColor } from '../util/index'
+import { getColor } from '../util/index'
 @Component
 export default class VsComponent extends Vue {
   static install: (vue: any) => void
@@ -8,6 +8,7 @@ export default class VsComponent extends Vue {
   static use: (vue: any) => any
 
   componentColor: string = null
+  getColor: any = null
 
   @Prop({ type: String, default: null }) color!: string
 
@@ -23,76 +24,19 @@ export default class VsComponent extends Vue {
 
   @Prop({ type: Boolean, default: false }) active!: boolean
 
+  // get getColor() {
+  //   return getColor(this.color)
+  // }
+
   get isColorDark() {
     return this.color === 'dark' || this.dark || this.componentColor === 'dark'
   }
 
-  changeColor() {
-    if (!this.$el || this.$el.nodeName == '#comment') { return }
-    this.componentColor = (this.danger && 'danger') ||
-    (this.success && 'success') ||
-    (this.warn && 'warn') ||
-    (this.dark && 'dark') ||
-    (this.primary && 'primary')
-    if (this.color || this.componentColor) {
-      setColor('color', this.componentColor || this.color || 'primary', this.$el, true)
-
-      if (this.$refs.options) {
-        setColor('color', this.componentColor || this.color || 'primary', this.$refs.options, true)
-      }
-
-      if (this.$refs.tooltip) {
-        setColor('color', this.componentColor || this.color || 'primary', this.$refs.tooltip, true)
-      }
-    }
-    if (this.componentColor == 'dark' || this.color == 'dark') {
-      this.$el.classList.add('vs-component-dark')
-    } else {
-      this.$el.classList.remove('vs-component-dark')
-    }
-
-    if (this.componentColor == 'white') {
-      this.$el.classList.add('vs-component-white')
-    } else {
-      this.$el.classList.remove('vs-component-white')
-    }
-  }
-
-  @Watch('color')
-  handleWatchColor() {
-    this.changeColor()
-  }
-
-  @Watch('primary')
-  handleWatchPrimary() {
-    this.changeColor()
-  }
-
-  @Watch('danger')
-  handleWatchDanger() {
-    this.changeColor()
-  }
-
-  @Watch('success')
-  handleWatchSuccess() {
-    this.changeColor()
-  }
-
-  @Watch('warn')
-  handleWatchWarn() {
-    this.changeColor()
-  }
-
-  @Watch('dark')
-  handleWatchDark() {
-    this.changeColor()
-  }
-
-  updated() {
-    this.changeColor()
+  get isColor() {
+    return !!this.color || !!this.primary || !!this.success || !!this.warn || !!this.danger || !!this.dark
   }
 
   mounted() {
-    this.changeColor()
+    this.getColor = getColor(this.color)
   }
 }
diff --git a/packages/vuesax/src/styles/_colors.sass b/packages/vuesax/src/styles/_colors.sass
index 77b00538..63e8a44f 100644
--- a/packages/vuesax/src/styles/_colors.sass
+++ b/packages/vuesax/src/styles/_colors.sass
@@ -41,3 +41,15 @@
   --vs-gray-3: 240, 243, 244
   --vs-gray-4: 230, 233, 234
 
+[class*="--primary"]
+  --vs-color: var(--vs-primary)
+[class*="--default"]
+  --vs-color: var(--vs-primary)
+[class*="--danger"]
+  --vs-color: var(--vs-danger)
+[class*="--success"]
+  --vs-color: var(--vs-success)
+[class*="--dark"]
+  --vs-color: var(--vs-dark)
+[class*="--warn"]
+  --vs-color: var(--vs-warn)
diff --git a/packages/vuesax/src/styles/_reset.sass b/packages/vuesax/src/styles/_reset.sass
index 7ab106be..6dd9e164 100644
--- a/packages/vuesax/src/styles/_reset.sass
+++ b/packages/vuesax/src/styles/_reset.sass
@@ -14,7 +14,6 @@ input,textarea,button,select,a
 
 
 [class*="vs-"]
-  border: 0px
   box-sizing: border-box
   outline: none
   list-style: none
diff --git a/packages/vuesax/src/styles/index.ts b/packages/vuesax/src/styles/index.ts
new file mode 100644
index 00000000..7d18375b
--- /dev/null
+++ b/packages/vuesax/src/styles/index.ts
@@ -0,0 +1 @@
+import './vuesax.sass'
diff --git a/packages/vuesax/src/util/defineVuesaxOptions.ts b/packages/vuesax/src/util/defineVuesaxOptions.ts
index a61bfcb9..c08fe504 100644
--- a/packages/vuesax/src/util/defineVuesaxOptions.ts
+++ b/packages/vuesax/src/util/defineVuesaxOptions.ts
@@ -15,7 +15,9 @@ export interface VuesaxColors {
 
 const defineColors = (colors: VuesaxColors) => {
   Object.keys(colors).forEach((item) => {
-    setColor(item, colors[item], document.body)
+    if (document.body) {
+      setColor(item, colors[item], document.body)
+    }
   })
 }
 
diff --git a/packages/vuesax/src/util/index.ts b/packages/vuesax/src/util/index.ts
index ecc71a1a..cb9f394c 100644
--- a/packages/vuesax/src/util/index.ts
+++ b/packages/vuesax/src/util/index.ts
@@ -82,7 +82,7 @@ const setColor = (colorName: string, color: string, el: any, addClass?: boolean)
       el.classList.add('vs-change-color')
     }
   } else if (isColor(color)) {
-    const style = getComputedStyle(document.body)
+    const style = window.getComputedStyle(document.body)
     newColor = style.getPropertyValue('--vs-' + color)
     setVar(colorName, newColor, el)
     if (addClass) {
@@ -108,6 +108,42 @@ const setColor = (colorName: string, color: string, el: any, addClass?: boolean)
   }
 }
 
+const getColor = (color: string) => {
+  function hexToRgb(hex: string) {
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i
+    hex = hex.replace(shorthandRegex, (m: any, r: string, g: string, b: string) => {
+      return r + r + g + g + b + b
+    })
+
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
+    return result ? {
+      r: parseInt(result[1], 16),
+      // tslint:disable-next-line:object-literal-sort-keys
+      g: parseInt(result[2], 16),
+      b: parseInt(result[3], 16)
+    } : null
+  }
+
+  const isRGB = /^(rgb|rgba)/.test(color)
+  const isRGBNumbers = /^(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d),(0|255|25[0-4]|2[0-4]\d|1\d\d|0?\d?\d)$/.test(color)
+  const isHEX = /^(#)/.test(color)
+  let newColor
+
+  if (isRGB) {
+    const arrayColor = color.replace(/[rgba()]/g, '').split(',')
+    newColor = `${arrayColor[0]},${arrayColor[1]},${arrayColor[2]}`
+  } else if (isHEX) {
+    const rgb = hexToRgb(color)
+    newColor = `${rgb!.r},${rgb!.g},${rgb!.b}`
+  } else if (isColor(color)) {
+    const style = window.getComputedStyle(document.body)
+    newColor = style.getPropertyValue('--vs-' + color)
+  } else if (isRGBNumbers) {
+    newColor = color
+  }
+  return newColor
+}
+
 const insertBody = (element: HTMLElement, parent: any) => {
   const target = parent ? parent : document.body
   target.insertBefore(element, target.lastChild)
@@ -212,6 +248,7 @@ const setCordsPosition = (element: any, parent: any, position: string) => {
 
 export {
   setColor,
+  getColor,
   setVar,
   isColor,
   insertBody,
diff --git a/packages/vuesax/src/util/ripple/index.ts b/packages/vuesax/src/util/ripple/index.ts
index 4dff186a..2ab1daa5 100644
--- a/packages/vuesax/src/util/ripple/index.ts
+++ b/packages/vuesax/src/util/ripple/index.ts
@@ -18,12 +18,14 @@ const ripple = (evt: any, color: any = '', solid: boolean = false) => {
   effectContent.className = 'vs-ripple-content'
 
   const effect = document.createElement('div')
-  setColor('color', color, effectContent)
+  if (!color) {
+    setColor('color', '#fff', effectContent)
+  }
 
   effect.className = 'vs-ripple'
   if (solid) {
     effect.classList.add('vs-ripple--solid')
-    setColor('color', color || 'primary', effectContent)
+    // setColor('color', color || 'primary', effectContent)
   }
   effect.style.transition = `all ${time}s ease`
 
diff --git a/packages/vuesax/src/util/ripple/style.sass b/packages/vuesax/src/util/ripple/style.sass
index f0971447..440863d8 100644
--- a/packages/vuesax/src/util/ripple/style.sass
+++ b/packages/vuesax/src/util/ripple/style.sass
@@ -1,8 +1,8 @@
 @import '../../styles/mixins'
-@import '../../styles/colors'
+// @import '../../styles/colors'
 
 .vs-ripple-content
-  --vs-color: var(--vs-background)
+  --vs-color: inherit
   width: 100px
   height: 100px
   position: absolute