fix unstyled buttons focus+active+hover styles

1 files changed, 19 insertions, 11 deletions

diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index a47701db..65b5c57b 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -2,10 +2,10 @@ export default {
   name: 'ButtonUnstyled',
   selector: '.button-unstyled',
   states: {
+    toggled: '.toggled',
     disabled: ':disabled',
     hover: ':hover:not(:disabled)',
-    focused: ':focus-within',
-    toggled: '.toggled'
+    focused: ':focus-within'
   },
   validInnerComponents: [
     'Text',
@@ -41,31 +41,39 @@ export default {
       }
     },
     {
-      component: 'Text',
+      component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['disabled']
+        state: ['toggled', 'hover']
       },
       directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
+        textColor: '--parent--text'
       }
     },
     {
-      component: 'Text',
+      component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['disabled', 'hover']
+        state: ['toggled', 'focused']
       },
       directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
+        textColor: '--parent--text'
       }
     },
     {
       component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
+        state: ['toggled', 'focused', 'hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'ButtonUnstyled',
         state: ['disabled']
       },
       directives: {
@@ -77,7 +85,7 @@ export default {
       component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['disabled', 'hover']
+        state: ['disabled']
       },
       directives: {
         textOpacity: 0.25,