diff --git a/packages/jet-plan-ui/action-feedback/__tests__/ActionFeedback.spec.js b/packages/jet-plan-ui/action-feedback/__tests__/ActionFeedback.spec.js
index 17eab38f..77496d7c 100644
--- a/packages/jet-plan-ui/action-feedback/__tests__/ActionFeedback.spec.js
+++ b/packages/jet-plan-ui/action-feedback/__tests__/ActionFeedback.spec.js
@@ -61,12 +61,6 @@ describe('ActionFeedback.vue', () => {
 
         const wrapper = mount(ActionFeedback)
 
-        expect(wrapper.classes()).not.toContain(
-            'custom-color'
-        )
-
-        expect(wrapper.attributes('style')).not.toBeTruthy()
-
         const colorData = {
             colorFocusOutline: '#fff',
             colorActive: '#263238',
@@ -76,26 +70,12 @@ describe('ActionFeedback.vue', () => {
 
         await wrapper.setProps(colorData)
 
-        expect(wrapper.classes()).toContain(
-            'custom-color'
-        )
-
-        expect(wrapper.attributes('style')).toContain(
-            '--color-focus-out-line',
-            '--color-active',
-            '--color-focus',
-            '--color-hover',
-        )
-
         const style = cssAttrsStringToObj(
             wrapper.attributes('style')
         )
         expect(style['--color-focus-out-line']).toEqual(
             colorData.colorFocusOutline
         )
-        expect(style['--color-active']).toEqual(
-            colorData.colorActive
-        )
         expect(style['--color-focus']).toEqual(
             colorData.colorFocus
         )
diff --git a/packages/jet-plan-ui/action-feedback/__tests__/__snapshots__/ActionFeedback.spec.js.snap b/packages/jet-plan-ui/action-feedback/__tests__/__snapshots__/ActionFeedback.spec.js.snap
index b0ad5a58..94819233 100644
--- a/packages/jet-plan-ui/action-feedback/__tests__/__snapshots__/ActionFeedback.spec.js.snap
+++ b/packages/jet-plan-ui/action-feedback/__tests__/__snapshots__/ActionFeedback.spec.js.snap
@@ -1,26 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ActionFeedback.vue Style test 1`] = `
-<div class="j-action-feedback" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
+<div class="j-action-feedback" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask);" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
 </div>
 `;
 
 exports[`ActionFeedback.vue Style test 2`] = `
-<div class="j-action-feedback hover" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
+<div class="j-action-feedback hover" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask);" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
 </div>
 `;
 
 exports[`ActionFeedback.vue Style test 3`] = `
-<div class="j-action-feedback hover focus" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
+<div class="j-action-feedback hover focus" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask);" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
 </div>
 `;
 
 exports[`ActionFeedback.vue Style test 4`] = `
-<div class="j-action-feedback hover focus-outline focus" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
+<div class="j-action-feedback hover focus-outline focus" style="--color-focus-out-line: var(--border); --color-focus: var(--mask); --color-hover: var(--mask);" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
 </div>
 `;
 
 exports[`ActionFeedback.vue Style test 5`] = `
-<div class="j-action-feedback hover focus-outline custom-color focus" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }" style="--color-focus-out-line: #fff; --color-active: #263238; --color-focus: #5a7fa2; --color-hover: #a3b3d4;">Submit<transition-group-stub></transition-group-stub>
+<div class="j-action-feedback hover focus-outline focus" style="--color-focus-out-line: #fff; --color-focus: #5a7fa2; --color-hover: #a3b3d4;" ontouchstart="function () { [native code] }" ontouchcancel="function () { [native code] }" ontouchend="function () { [native code] }">Submit<transition-group-stub></transition-group-stub>
 </div>
 `;
diff --git a/packages/jet-plan-ui/avater/__tests__/__snapshots__/Avater.spec.js.snap b/packages/jet-plan-ui/avater/__tests__/__snapshots__/Avater.spec.js.snap
index c5da0aa5..fb9d3d21 100644
--- a/packages/jet-plan-ui/avater/__tests__/__snapshots__/Avater.spec.js.snap
+++ b/packages/jet-plan-ui/avater/__tests__/__snapshots__/Avater.spec.js.snap
@@ -1,25 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Avater Document test 1`] = `
-<div class="j-avater circle" style="--size: 2em; --color: var(--foreground);">
+<div class="j-avater circle" style="--size: 2em; --color: var(--foreground); transition: 0.1s ease-in-out;">
   <div class="content"></div>
 </div>
 `;
 
 exports[`Avater Document test 2`] = `
-<div class="j-avater border circle" style="--size: 2em; --color: var(--foreground);">
+<div class="j-avater border circle" style="--size: 2em; --color: var(--foreground); transition: 0.1s ease-in-out;">
   <div class="content"></div>
 </div>
 `;
 
 exports[`Avater Document test 3`] = `
-<div class="j-avater border" style="--size: 2em; --color: var(--foreground);">
+<div class="j-avater border" style="--size: 2em; --color: var(--foreground); transition: 0.1s ease-in-out;">
   <div class="content"></div>
 </div>
 `;
 
 exports[`Avater Document test 4`] = `
-<div class="j-avater border" style="--size: 2em; --color: #61ff73;">
+<div class="j-avater border" style="--size: 2em; --color: #61ff73; transition: 0.1s ease-in-out;">
   <div class="content"></div>
 </div>
 `;
diff --git a/packages/jet-plan-ui/table/__tests__/Table.spec.js b/packages/jet-plan-ui/table/__tests__/Table.spec.js
index 73649403..6bb685bc 100644
--- a/packages/jet-plan-ui/table/__tests__/Table.spec.js
+++ b/packages/jet-plan-ui/table/__tests__/Table.spec.js
@@ -5,7 +5,13 @@ import {
 import Table from '../Table.vue'
 
 const data = {
-    test: 'test'
+    list: [{
+        name: 'n1'
+    }, {
+        name: 'n2'
+    }, {
+        name: 'n3'
+    }]
 }
 
 describe('Table', () => {