pleroma-fe

commit: 28955d8444d966e76a2f2777a6ec1d49ec0b7432
parent 3cab1faaf4d127cb69f4bc1963a471fc6ab3aa08
Author: Henry Jameson <me@hjkos.com>
Date:   Tue,  7 Jan 2025 18:28:24 +0200

bring stock theme to be on par with v2 pleroma-dark/light

Diffstat:
M
src/components/button.style.js
16
++++++++--------
M
src/components/panel.style.js
17
+++++++++++++----
M
src/components/panel_header.style.js
19
++++++++++++++++++-
M
src/components/top_bar.style.js
13
+++++++++++--
M
src/components/user_avatar/avatar.style.js
4
++--
M
src/services/theme_data/theme3_slot_functions.js
1
+

6 files changed, 53 insertions(+), 17 deletions(-)
diff --git a/src/components/button.style.js b/src/components/button.style.js
@@ -35,11 +35,11 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--buttonDefaultHoverGlow': 'shadow | 0 0 4 --text / 0.5',
-        '--buttonDefaultFocusGlow': 'shadow | 0 0 4 4 --link / 0.5',
+        '--buttonDefaultHoverGlow': 'shadow | 0 0 1 2 --text / 0.4',
+        '--buttonDefaultFocusGlow': 'shadow | 0 0 1 2 --link / 0.5',
         '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
-        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 2), $borderSide(#000000 bottom 0.2 2)',
-        '--buttonPressedBevel': 'shadow | $borderSide(#FFFFFF bottom 0.2 2), $borderSide(#000000 top 0.2 2)'
+        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
+        '--buttonPressedBevel': 'shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)'
       }
     },
     {
@@ -78,28 +78,28 @@ export default {
     {
       state: ['toggled'],
       directives: {
-        background: '--inheritedBackground,-14.2',
+        background: '--accent,-24.2',
         shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
-        background: '--inheritedBackground,-14.2',
+        background: '--accent,-24.2',
         shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
       }
     },
     {
       state: ['toggled', 'disabled'],
       directives: {
-        background: '$blend(--inheritedBackground 0.25 --parent)',
+        background: '$blend(--accent 0.25 --parent)',
         shadow: ['--buttonPressedBevel']
       }
     },
     {
       state: ['disabled'],
       directives: {
-        background: '$blend(--inheritedBackground 0.25 --parent)',
+        background: '$blend(--accent 0.25 --parent)',
         shadow: ['--buttonDefaultBevel']
       }
     },
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
@@ -38,12 +38,21 @@ export default {
         roundness: 3,
         blur: '5px',
         shadow: [{
-          x: 1,
-          y: 1,
-          blur: 4,
+          x: 0,
+          y: 0,
+          blur: 3,
           spread: 0,
           color: '#000000',
-          alpha: 0.6
+          alpha: 0.5
+        },
+        {
+          x: 0,
+          y: 4,
+          blur: 6,
+          spread: 3,
+          inset: false,
+          color: '#000000',
+          alpha: 0.3
         }]
       }
     }
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
@@ -17,7 +17,24 @@ export default {
       directives: {
         backgroundNoCssColor: 'yes',
         background: '--fg',
-        shadow: []
+        shadow: [{
+          x: 0,
+          y: 1,
+          blur: 3,
+          spread: 0,
+          inset: false,
+          color: '#000000',
+          alpha: 0.4
+        },
+        {
+          x: 0,
+          y: 1,
+          blur: 0,
+          spread: 0,
+          inset: true,
+          color: '#ffffff',
+          alpha: 0.2
+        }]
       }
     }
   ]
diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
@@ -16,11 +16,20 @@ export default {
         background: '--fg',
         shadow: [{
           x: 0,
-          y: 0,
+          y: 1,
           blur: 4,
           spread: 0,
           color: '#000000',
-          alpha: 0.6
+          alpha: 0.4
+        },
+        {
+          x: 0,
+          y: 2,
+          blur: 7,
+          spread: 0,
+          inset: false,
+          color: '#000000',
+          alpha: 0.3
         }]
       }
     },
diff --git a/src/components/user_avatar/avatar.style.js b/src/components/user_avatar/avatar.style.js
@@ -11,10 +11,10 @@ export default {
         shadow: [{
           x: 0,
           y: 1,
-          blur: 8,
+          blur: 4,
           spread: 0,
           color: '#000000',
-          alpha: 0.7
+          alpha: 0.2
         }]
       }
     }
diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
@@ -127,6 +127,7 @@ export const shadowFunctions = {
     args: [
       'color: border color',
       'side: string indicating on which side border should be, takes either one word or two words joined by dash (i.e. "left" or "bottom-right")',
+      'width: border width (thickness)',
       '[alpha]: (Optional) border opacity, defaults to 1 (fully opaque)',
       '[inset]: (Optional) whether border should be on the inside or outside, defaults to inside'
     ],