pleroma-fe

commit: ab295c588d66f7e53dc9433c61836a88a9b8979a
parent 02ecd8bb6c56f7dd136f2baa2bf52867b434447f
Author: Henry Jameson <me@hjkos.com>
Date:   Thu,  3 Oct 2024 00:12:40 +0300

better input styles

Diffstat:
M
src/components/input.style.js
27
++++++++++++++++-----------
M
static/palettes/index.json
4
++--

2 files changed, 18 insertions(+), 13 deletions(-)
diff --git a/src/components/input.style.js b/src/components/input.style.js
@@ -1,12 +1,3 @@
-const hoverGlow = {
-  x: 0,
-  y: 0,
-  blur: 4,
-  spread: 0,
-  color: '--text',
-  alpha: 1
-}
-
 export default {
   name: 'Input',
   selector: '.input',
@@ -27,7 +18,9 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)'
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2), $borderSide(#000000 top 0.2)',
+        '--defaultInputHoverGlow': 'shadow | 0 0 4 --text / 0.5',
+        '--defaultInputFocusGlow': 'shadow | 0 0 4 4 --link / 0.5'
       }
     },
     {
@@ -54,7 +47,19 @@ export default {
     {
       state: ['hover'],
       directives: {
-        shadow: [hoverGlow, '--defaultInputBevel']
+        shadow: ['--defaultInputHoverGlow', '--defaultInputBevel']
+      }
+    },
+    {
+      state: ['focused'],
+      directives: {
+        shadow: ['--defaultInputFocusGlow', '--defaultInputBevel']
+      }
+    },
+    {
+      state: ['focused', 'hover'],
+      directives: {
+        shadow: ['--defaultInputFocusGlow', '--defaultInputHoverGlow', '--defaultInputBevel']
       }
     },
     {
diff --git a/static/palettes/index.json b/static/palettes/index.json
@@ -20,8 +20,8 @@
     "link": "#81a2be",
     "text": "#c5c8c6",
     "cRed": "#cc6666",
-    "cGreen": "#8abeb7",
-    "cBlue": "#b5bd68",
+    "cBlue": "#8abeb7",
+    "cGreen": "#b5bd68",
     "cOrange": "#de935f",
     "_cYellow": "#f0c674",
     "_cPurple": "#b294bb"