fix unstyled buttons focus+active+hover styles

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',
+    focused: ':focus-within'
-    toggled: '.toggled'
   },
   validInnerComponents: [
     'Text',
@@ -41,29 +41,37 @@ export default {
       }
     },
     {
-      component: 'Text',
+      component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['disabled']
+        state: ['toggled', 'hover']
       },
       directives: {
-        textOpacity: 0.25,
+        textColor: '--parent--text'
-        textOpacityMode: 'blend'
-      }
-    },
-    {
-      component: 'Text',
-      parent: {
-        component: 'ButtonUnstyled',
-        state: ['disabled', 'hover']
-      },
-      directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
       }
     },
     {
       component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled', 'focused']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled', 'focused', 'hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Text',
       parent: {
         component: 'ButtonUnstyled',
         state: ['disabled']
@@ -77,7 +85,7 @@ export default {
       component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['disabled', 'hover']
+        state: ['disabled']
       },
       directives: {
         textOpacity: 0.25,