pleroma-fe

commit: 7d1e787f5543ab39f66db9a20b129e1b5ce3eef8
parent 7df207c9d479a4641d7695d9d0b83eaa9308b510
Author: Henry Jameson <me@hjkos.com>
Date:   Wed,  6 Mar 2024 17:42:09 +0200

fix unstyled buttons focus+active+hover styles

Diffstat:
M
src/components/button_unstyled.style.js
30
+++++++++++++++++++-----------

1 file changed, 19 insertions(+), 11 deletions(-)
diff --git 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,