Merge branch 'fix-breezy' into 'develop'

Fix breezy

See merge request pleroma/pleroma-fe!2108

public/static/styles/Breezy DX.iss

@@ -25,7 +25,7 @@
   accent: #1CA4F3;
   cBlue: #1CA4F3;
   cRed: #f41a51;
-  cGreen: #1af46e;
+  cGreen: #0b6a30;
   cOrange: #f4af1a;
   border: #d8e6f9;
   link: #1CA4F3;
@@ -39,7 +39,7 @@
   accent: #1CA4F3;
   cRed: #f41a51;
   cBlue: #1CA4F3;
-  cGreen: #1af46e;
+  cGreen: #0b6a30;
   cOrange: #f4af1a;
 }
 
@@ -47,45 +47,46 @@ Root {
   --badgeNotification: color | --cRed;
   --buttonDefaultHoverGlow: shadow | inset 0 0 0 1 --accent / 1;
   --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1;
-  --buttonDefaultShadow: shadow | inset 0 0 0 1 --parent--text / 0.35, 0 5 5 -5 #000000 / 0.35;
+  --buttonDefaultShadow: shadow | inset 0 0 0 1 --text / 0.35, 0 5 5 -5 #000000 / 0.35;
   --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1;
   --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05;
-  --defaultInputBevel: shadow | inset 0 0 0 1 --parent--text / 0.35;
+  --defaultInputBevel: shadow | inset 0 0 0 1 --text / 0.35;
   --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1;
   --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1;
 }
 
+Button {
+  background: --parent;
+}
+
 Button:disabled {
   shadow: --buttonDefaultBevel, --buttonDefaultShadow
 }
 
 Button:hover {
+  background: --inheritedBackground;
   shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow
 }
 
 Button:toggled {
-  background: $blend(--bg 0.3 --accent)
+  background: $blend(--inheritedBackground 0.3 --accent)
 }
 
 Button:pressed {
-  background: $blend(--bg 0.8 --accent)
+  background: $blend(--inheritedBackground 0.8 --accent)
 }
 
 Button:pressed:toggled {
-  background: $blend(--bg 0.2 --accent)
+  background: $blend(--inheritedBackground 0.2 --accent)
 }
 
 Button:toggled:hover {
-  background: $blend(--bg 0.3 --accent)
-}
-
-Button {
-  background: --parent;
+  background: $blend(--inheritedBackground 0.3 --accent)
 }
 
 Input {
   shadow: --defaultInputBevel;
-  background: --parent;
+  background: $mod(--bg -10);
 }
 
 PanelHeader {
@@ -97,5 +98,5 @@ Tab:hover {
 }
 
 Tab {
-  background: --parent;
+  background: --bg;
 }

src/App.scss

@@ -388,6 +388,10 @@ nav {
   &:disabled {
     cursor: not-allowed;
   }
+
+  &:active {
+    transform: translate(1px, 1px);
+  }
 }
 
 .menu-item {

src/services/theme_data/theme3_slot_functions.js

@@ -112,10 +112,7 @@ export const colorFunctions = {
       const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
       const amount = Number(amountArg)
 
-      const effectiveBackground = dynamicVars.lowerLevelBackground ??
-            dynamicVars.background ??
-            dynamicVars.inheritedBackground ??
-            staticVars[colorArg]
+      const effectiveBackground = dynamicVars.lowerLevelBackground ?? color
       const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
       const mod = isLightOnDark ? 1 : -1
       return brightness(amount * mod, color).rgb

src/services/theme_data/theme_data_3.service.js

@@ -78,23 +78,24 @@ export const findColor = (color, { dynamicVars, staticVars }) => {
         targetColor = { r, g, b }
       } else if (variableSlot.startsWith('parent')) {
         if (variableSlot === 'parent') {
-          const { r, g, b } = dynamicVars.lowerLevelBackground
+          const { r, g, b } = dynamicVars.lowerLevelBackground ?? {}
           targetColor = { r, g, b }
         } else {
           const virtualSlot = variableSlot.replace(/^parent/, '')
           targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
         }
       } else {
-        switch (variableSlot) {
-          case 'inheritedBackground':
-            targetColor = convert(dynamicVars.inheritedBackground).rgb
-            break
-          case 'background':
-            targetColor = convert(dynamicVars.background).rgb
-            break
-          default:
-            targetColor = convert(staticVars[variableSlot]).rgb
+        const staticVar = staticVars[variableSlot]
+        const dynamicVar = dynamicVars[variableSlot]
+        if (!staticVar && !dynamicVar) {
+          console.warn(dynamicVars, variableSlot, dynamicVars[variableSlot])
+          console.warn(`Couldn't find variable "${variableSlot}", falling back to magenta. Variables are:
+Static:
+${JSON.stringify(staticVars, null, 2)}
+Dynamic:
+${JSON.stringify(dynamicVars, null, 2)}`)
         }
+        targetColor = convert(staticVar ?? dynamicVar ?? '#FF00FF').rgb
       }
 
       if (modifier) {
@@ -109,7 +110,7 @@ export const findColor = (color, { dynamicVars, staticVars }) => {
       try {
         targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars })
       } catch (e) {
-        console.error('Failure executing color function', e)
+        console.error('Failure executing color function', e ,'\n Function: ' + color)
         targetColor = '#FF00FF'
       }
     }
@@ -120,7 +121,7 @@ export const findColor = (color, { dynamicVars, staticVars }) => {
 Static:
 ${JSON.stringify(staticVars, null, 2)}
 Dynamic:
-${JSON.stringify(dynamicVars, null, 2)}`, e)
+${JSON.stringify(dynamicVars, null, 2)}\nError: ${e}`)
   }
 }
 
@@ -516,7 +517,7 @@ export const init = ({
         .filter(c => virtualComponents.has(c) && !nonEditableComponents.has(c))
     } else if (liteMode) {
       validInnerComponents = (component.validInnerComponentsLite || component.validInnerComponents || [])
-    } else if (component.name === 'Root' || component.states != null) {
+    } else if (component.name === 'Root' || component.states != null || component.background?.includes('--parent')) {
       validInnerComponents = component.validInnerComponents || []
     } else {
       validInnerComponents = component