From 779b3dc1228030740ccfbd5192bcd368b526ce56 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 15:15:08 +0200
Subject: [PATCH] blur support, fix toggled buttons not working right

---
 src/components/panel.style.js               |  1 +
 src/components/popover.style.js             |  1 +
 src/services/theme_data/css_utils.js        | 19 +++++++++++++++----
 src/services/theme_data/theme2_to_theme3.js |  5 ++---
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 504ecbcbf9..d9b276672c 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -24,6 +24,7 @@ export default {
       directives: {
         background: '--bg',
         roundness: 3,
+        blur: '5px',
         shadow: [{
           x: 1,
           y: 1,
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index 1b51c9b36b..0197271b94 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -21,6 +21,7 @@ export default {
     {
       directives: {
         background: '--bg',
+        blur: '10px',
         shadow: [{
           x: 2,
           y: 2,
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index b98a78ed8b..b83b90bfa8 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -108,10 +108,21 @@ export const getCssRules = (rules) => rules.map(rule => {
             ].filter(x => x).join(';\n')
           }
           const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
-          return [
-            rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
-            '  --background: ' + color
-          ].filter(x => x).join(';\n')
+          const cssDirectives = ['--background: ' + color]
+          if (rule.directives.backgroundNoCssColor !== 'yes') {
+            cssDirectives.push('background-color: ' + color)
+          }
+          return cssDirectives.filter(x => x).join(';\n')
+        }
+        case 'blur': {
+          const cssDirectives = []
+          if (rule.directives.opacity < 1) {
+            cssDirectives.push(`--backdrop-filter: blur(${v}) `)
+            if (rule.directives.backgroundNoCssColor !== 'yes') {
+              cssDirectives.push(`backdrop-filter: blur(${v}) `)
+            }
+          }
+          return cssDirectives.join(';\n')
         }
         case 'textColor': {
           if (rule.directives.textNoCssColor === 'yes') { return '' }
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 32797c42b5..7adbbd42dc 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -193,7 +193,6 @@ export const convertTheme2To3 = (data) => {
         newRules.push({ ...rule, component: 'Tab' })
       }
     })
-    console.log(newRules)
     return newRules
   }
 
@@ -424,12 +423,12 @@ export const convertTheme2To3 = (data) => {
         case 'alert': {
           const hasPanel = variantArray.find(x => x === 'Panel')
           if (hasPanel) {
-            rule.parent = { component: 'PanelHeader' }
+            newRule.parent = { component: 'PanelHeader' }
             variantArray = variantArray.filter(x => x !== 'Panel')
           }
           const hasTop = variantArray.find(x => x === 'Top') // TopBar
           if (hasTop) {
-            rule.parent = { component: 'TopBar' }
+            newRule.parent = { component: 'TopBar' }
             variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
           }
           break