From 7d1e787f5543ab39f66db9a20b129e1b5ce3eef8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 6 Mar 2024 17:42:09 +0200
Subject: [PATCH] fix unstyled buttons focus+active+hover styles

---
 src/components/button_unstyled.style.js | 44 +++++++++++++++----------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index a47701db7b..65b5c57bf1 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,29 +41,37 @@ export default {
       }
     },
     {
-      component: 'Text',
+      component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['disabled']
+        state: ['toggled', 'hover']
       },
       directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
-      }
-    },
-    {
-      component: 'Text',
-      parent: {
-        component: 'ButtonUnstyled',
-        state: ['disabled', 'hover']
-      },
-      directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
+        textColor: '--parent--text'
       }
     },
     {
       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,