From 0bcbe05a0b08740f4dd02e3c53d33f13f69ad9f8 Mon Sep 17 00:00:00 2001
From: Jas Singh <jaskiratpal.singh@outlook.com>
Date: Fri, 16 Aug 2024 22:50:05 -0700
Subject: [PATCH] Added the ability to apply custom opacity to all elements.
 (#140)

* Added the ability to apply custom opacity to all elements.

* Apply menu opacity to settings menu
---
 options.ts                                    |  5 ++
 scss/style/bar/bar.scss                       |  7 ++-
 scss/style/common/general.scss                |  4 ++
 scss/style/menus/audiomenu.scss               |  3 +-
 scss/style/menus/bluetooth.scss               |  1 +
 scss/style/menus/calendar.scss                |  1 +
 scss/style/menus/dashboard.scss               |  1 +
 scss/style/menus/energy.scss                  | 57 ++++++++++---------
 scss/style/menus/media.scss                   |  1 +
 scss/style/menus/network.scss                 |  1 +
 scss/style/menus/notifications.scss           |  1 +
 scss/style/menus/power.scss                   |  1 +
 scss/style/notifications/popups.scss          |  1 +
 scss/style/osd/index.scss                     |  1 +
 scss/style/settings/dialog.scss               |  1 +
 widget/settings/pages/theme/bar/index.ts      |  2 +
 widget/settings/pages/theme/menus/index.ts    |  1 +
 .../pages/theme/notifications/index.ts        |  1 +
 widget/settings/pages/theme/osd/index.ts      |  1 +
 19 files changed, 61 insertions(+), 30 deletions(-)

diff --git a/options.ts b/options.ts
index 256f8b1..539acca 100644
--- a/options.ts
+++ b/options.ts
@@ -86,6 +86,7 @@ const options = mkOptions(OPTIONS, {
         },
         notification: {
             background: opt(tertiary_colors.mantle),
+            opacity: opt(100),
             actions: {
                 background: opt(secondary_colors.lavender),
                 text: opt(colors.mantle),
@@ -103,6 +104,7 @@ const options = mkOptions(OPTIONS, {
         osd: {
             enable: opt(true),
             orientation: opt<OSDOrientation>("vertical"),
+            opacity: opt(100),
             bar_container: opt(colors.crust),
             icon_container: opt(tertiary_colors.lavender),
             bar_color: opt(tertiary_colors.lavender),
@@ -119,6 +121,7 @@ const options = mkOptions(OPTIONS, {
         bar: {
             floating: opt(false),
             margin_top: opt("0.5em"),
+            opacity: opt(100),
             margin_bottom: opt("0em"),
             margin_sides: opt("0.5em"),
             border_radius: opt("0.4em"),
@@ -130,6 +133,7 @@ const options = mkOptions(OPTIONS, {
                 monochrome: opt(false),
                 spacing: opt("0.25em"),
                 radius: opt("0.3em"),
+                opacity: opt(100),
                 background: opt(colors.base2),
                 hover: opt(colors.surface1),
                 text: opt(colors.lavender),
@@ -213,6 +217,7 @@ const options = mkOptions(OPTIONS, {
             menus: {
                 monochrome: opt(false),
                 background: opt(colors.crust),
+                opacity: opt(100),
                 cards: opt(colors.base),
                 card_radius: opt("0.4em"),
                 border: {
diff --git a/scss/style/bar/bar.scss b/scss/style/bar/bar.scss
index ab0a743..58b990e 100644
--- a/scss/style/bar/bar.scss
+++ b/scss/style/bar/bar.scss
@@ -1,5 +1,4 @@
 .bar {
-
   .bar-panel-container {
     margin-top: if($bar-floating, $bar-margin_top, 0em);
     margin-bottom: if($bar-floating, $bar-margin_bottom, 0em);
@@ -7,8 +6,11 @@
     margin-right: if($bar-floating, $bar-margin_sides, 0em);
   }
 
+
   .bar-panel {
-    background: if($bar-transparent, transparent, $bar-background);
+    $bar-opacity-ratio: $bar-opacity / 100;
+    $transparency-value: 1 - $bar-opacity-ratio;
+    background: if($bar-transparent, transparent, transparentize($bar-background, $transparency-value));
     border-radius: if($bar-floating, $bar-border_radius, 0em);
   }
 }
@@ -18,6 +20,7 @@
   border-radius: $bar-buttons-radius;
   padding: 0.2rem 0.9rem;
   margin: 0.5rem $bar-buttons-spacing;
+  opacity: $bar-buttons-opacity/100;
 
   &:hover {
     background: $bar-buttons-hover;
diff --git a/scss/style/common/general.scss b/scss/style/common/general.scss
index 4f908ea..00154b0 100644
--- a/scss/style/common/general.scss
+++ b/scss/style/common/general.scss
@@ -1,6 +1,8 @@
 @import '../colors.scss';
 
 window.popup {
+  opacity: $bar-menus-opacity/100;
+
   menuitem {
     label {
       color: $bar-menus-popover-text;
@@ -32,6 +34,8 @@ tooltip {
     all: unset;
   }
 
+  opacity: $bar-menus-opacity/100;
+
   font-size: 1.1em;
 
   >*>* {
diff --git a/scss/style/menus/audiomenu.scss b/scss/style/menus/audiomenu.scss
index d5aa030..66c06b9 100644
--- a/scss/style/menus/audiomenu.scss
+++ b/scss/style/menus/audiomenu.scss
@@ -1,6 +1,7 @@
 .menu-items.audio {
   background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-volume-background-color);
   border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-volume-border-color);
+  opacity: $bar-menus-opacity/100;
 }
 
 .menu-dropdown-label.audio {
@@ -170,4 +171,4 @@
 
 .menu-items-section.playback {
   border-radius: 0em;
-}
\ No newline at end of file
+}
diff --git a/scss/style/menus/bluetooth.scss b/scss/style/menus/bluetooth.scss
index 800445c..48fa73d 100644
--- a/scss/style/menus/bluetooth.scss
+++ b/scss/style/menus/bluetooth.scss
@@ -1,6 +1,7 @@
 .menu-items.bluetooth {
   background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-bluetooth-background-color);
   border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-bluetooth-border-color);
+  opacity: $bar-menus-opacity/100;
 }
 
 .menu-items-container.bluetooth {
diff --git a/scss/style/menus/calendar.scss b/scss/style/menus/calendar.scss
index 06bcb43..40cb91d 100644
--- a/scss/style/menus/calendar.scss
+++ b/scss/style/menus/calendar.scss
@@ -6,6 +6,7 @@
   border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-clock-border-color);
   border-radius: $bar-menus-border-radius;
   margin-right: 0.5em;
+  opacity: $bar-menus-opacity/100;
 }
 
 .calendar-menu-item-container {
diff --git a/scss/style/menus/dashboard.scss b/scss/style/menus/dashboard.scss
index af8d547..911679b 100644
--- a/scss/style/menus/dashboard.scss
+++ b/scss/style/menus/dashboard.scss
@@ -4,6 +4,7 @@
   background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-dashboard-background-color);
   border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-dashboard-border-color);
   border-radius: $bar-menus-border-radius;
+  opacity: $bar-menus-opacity/100;
 
   button {
     border-radius: 0.4em;
diff --git a/scss/style/menus/energy.scss b/scss/style/menus/energy.scss
index e298dae..5a9f505 100644
--- a/scss/style/menus/energy.scss
+++ b/scss/style/menus/energy.scss
@@ -1,6 +1,7 @@
 .menu-items.energy {
   background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-battery-background-color);
   border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-battery-border-color);
+  opacity: $bar-menus-opacity/100;
 }
 
 .menu-items-container.energy {
@@ -17,9 +18,9 @@
     background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-battery-card-color);
   }
 
-    .power-profile-item {
-        color: if($bar-menus-monochrome, $bar-menus-listitems-passive, $bar-menus-menu-battery-listitems-passive);
-        margin-bottom: 0.5em;
+  .power-profile-item {
+    color: if($bar-menus-monochrome, $bar-menus-listitems-passive, $bar-menus-menu-battery-listitems-passive);
+    margin-bottom: 0.5em;
 
     label {
       margin-left: 1em;
@@ -32,43 +33,45 @@
       color: if($bar-menus-monochrome, $bar-menus-icons-passive, $bar-menus-menu-battery-icons-passive);
     }
 
-        &:hover {
-          color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
-            label {
-                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
-            }
+    &:hover {
+      color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
+
+      label {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
+      }
 
       image {
         color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
       }
     }
 
-        &.active {
-            color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
-            image {
-                color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
-            }
-        }
+    &.active {
+      color: if($bar-menus-monochrome, $bar-menus-listitems-active, $bar-menus-menu-battery-listitems-active);
+
+      image {
+        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
+      }
     }
+  }
 
   .brightness-container {
     padding-bottom: 1em;
   }
 
-    .brightness-slider-icon {
-        font-size: 1.4em;
-        min-width: 1em;
-        min-height: 1em;
-        color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
-    }
+  .brightness-slider-icon {
+    font-size: 1.4em;
+    min-width: 1em;
+    min-height: 1em;
+    color: if($bar-menus-monochrome, $bar-menus-icons-active, $bar-menus-menu-battery-icons-active);
+  }
 
-    .brightness-slider-label {
-        color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-battery-text);
-        font-size: 0.9em;
-        min-width: 2.5em;
-        font-weight: bold;
-        margin-bottom: 0.2em;
-    }
+  .brightness-slider-label {
+    color: if($bar-menus-monochrome, $bar-menus-text, $bar-menus-menu-battery-text);
+    font-size: 0.9em;
+    min-width: 2.5em;
+    font-weight: bold;
+    margin-bottom: 0.2em;
+  }
 
   .menu-slider.brightness {
     trough {
diff --git a/scss/style/menus/media.scss b/scss/style/menus/media.scss
index 1276b83..a864295 100644
--- a/scss/style/menus/media.scss
+++ b/scss/style/menus/media.scss
@@ -1,6 +1,7 @@
 .menu-items.media {
   background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-media-background-color);
   border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-media-border-color);
+  opacity: $bar-menus-opacity/100;
 }
 
 .menu-items-container.media {
diff --git a/scss/style/menus/network.scss b/scss/style/menus/network.scss
index fcff1d8..b72e417 100644
--- a/scss/style/menus/network.scss
+++ b/scss/style/menus/network.scss
@@ -1,6 +1,7 @@
 .menu-items.network {
   background: if($bar-menus-monochrome, $bar-menus-background, $bar-menus-menu-network-background-color);
   border-color: if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-network-border-color);
+  opacity: $bar-menus-opacity/100;
 }
 
 .menu-items-container.network {
diff --git a/scss/style/menus/notifications.scss b/scss/style/menus/notifications.scss
index 8b7cff7..f341a4a 100644
--- a/scss/style/menus/notifications.scss
+++ b/scss/style/menus/notifications.scss
@@ -6,6 +6,7 @@
   border: $bar-menus-border-size solid if($bar-menus-monochrome, $bar-menus-border-color, $bar-menus-menu-notifications-border);
   border-radius: $bar-menus-border-radius;
   margin-right: 0.45em;
+  opacity: $bar-menus-opacity/100;
 
   .window-content.notificationsmenu-window {
     margin-right: 0.50em;
diff --git a/scss/style/menus/power.scss b/scss/style/menus/power.scss
index b591bbe..90ddbec 100644
--- a/scss/style/menus/power.scss
+++ b/scss/style/menus/power.scss
@@ -14,6 +14,7 @@ window#verification .verification {
   min-width: 20em;
   min-height: 6em;
   font-size: 1.3em;
+  opacity: $bar-menus-opacity/100;
 
   .verification-content {
     background: if($bar-menus-monochrome, $bar-menus-cards, $bar-menus-menu-dashboard-powermenu-confirmation-card);
diff --git a/scss/style/notifications/popups.scss b/scss/style/notifications/popups.scss
index c1631d9..82fc785 100644
--- a/scss/style/notifications/popups.scss
+++ b/scss/style/notifications/popups.scss
@@ -6,6 +6,7 @@
   min-width: 26em;
   min-height: 6rem;
   border-radius: 0.6em;
+  opacity: $notification-opacity/100;
 }
 
 .notification-card-container {
diff --git a/scss/style/osd/index.scss b/scss/style/osd/index.scss
index 508c3be..6db19bd 100644
--- a/scss/style/osd/index.scss
+++ b/scss/style/osd/index.scss
@@ -1,6 +1,7 @@
 .indicator {
   .osd-container {
     margin: $osd-margins;
+    opacity: $osd-opacity/100;
   }
 
   .osd-label-container {
diff --git a/scss/style/settings/dialog.scss b/scss/style/settings/dialog.scss
index 17f58ae..7c9e0ff 100644
--- a/scss/style/settings/dialog.scss
+++ b/scss/style/settings/dialog.scss
@@ -1,4 +1,5 @@
 window.settings-dialog {
+  opacity: $bar-menus-opacity/100;
   background-color: $bar-menus-cards;
   color: $bar-menus-text;
 
diff --git a/widget/settings/pages/theme/bar/index.ts b/widget/settings/pages/theme/bar/index.ts
index 94dce94..2913adf 100644
--- a/widget/settings/pages/theme/bar/index.ts
+++ b/widget/settings/pages/theme/bar/index.ts
@@ -14,6 +14,8 @@ export const BarTheme = () => {
                 Header('General'),
                 Option({ opt: options.theme.bar.transparent, title: 'Transparent', type: 'boolean' }),
                 Option({ opt: options.theme.bar.background, title: 'Background Color', type: 'color' }),
+                Option({ opt: options.theme.bar.opacity, title: 'Background Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
+                Option({ opt: options.theme.bar.buttons.opacity, title: 'Button Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
                 Option({ opt: options.theme.bar.buttons.monochrome, title: 'Use Global Colors', type: 'boolean', disabledBinding: options.theme.matugen }),
                 Option({ opt: options.theme.bar.buttons.background, title: 'Button Background', type: 'color' }),
                 Option({ opt: options.theme.bar.buttons.hover, title: 'Button Hover', type: 'color' }),
diff --git a/widget/settings/pages/theme/menus/index.ts b/widget/settings/pages/theme/menus/index.ts
index 6ee4c0b..97ae58c 100644
--- a/widget/settings/pages/theme/menus/index.ts
+++ b/widget/settings/pages/theme/menus/index.ts
@@ -27,6 +27,7 @@ export const MenuTheme = () => {
                 Option({ opt: options.wallpaper.enable, title: 'Apply Wallpapers', subtitle: 'Whether to apply the wallpaper or to only use it for Matugen color generation.', type: 'boolean' }),
                 Option({ opt: options.wallpaper.image, title: 'Wallpaper', subtitle: options.wallpaper.image.bind("value"), type: 'wallpaper' }),
                 Option({ opt: options.theme.bar.menus.background, title: 'Background Color', type: 'color' }),
+                Option({ opt: options.theme.bar.menus.opacity, title: 'Menu Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
                 Option({ opt: options.theme.bar.menus.cards, title: 'Cards', type: 'color' }),
                 Option({ opt: options.theme.bar.menus.card_radius, title: 'Card Radius', type: 'string' }),
                 Option({ opt: options.theme.bar.menus.text, title: 'Primary Text', type: 'color' }),
diff --git a/widget/settings/pages/theme/notifications/index.ts b/widget/settings/pages/theme/notifications/index.ts
index 9f5d364..fbf71a9 100644
--- a/widget/settings/pages/theme/notifications/index.ts
+++ b/widget/settings/pages/theme/notifications/index.ts
@@ -14,6 +14,7 @@ export const NotificationsTheme = () => {
             children: [
                 Header('Notifications Theme Settings'),
                 Option({ opt: options.theme.notification.background, title: 'Notification Background', type: 'color' }),
+                Option({ opt: options.theme.notification.opacity, title: 'Notification Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
                 Option({ opt: options.theme.notification.actions.background, title: 'Action Button Background', subtitle: 'Buttons that perform actions within a notification', type: 'color' }),
                 Option({ opt: options.theme.notification.actions.text, title: 'Action Button Text Color', type: 'color' }),
                 Option({ opt: options.theme.notification.label, title: 'Label', type: 'color' }),
diff --git a/widget/settings/pages/theme/osd/index.ts b/widget/settings/pages/theme/osd/index.ts
index 566bb5a..9c578d4 100644
--- a/widget/settings/pages/theme/osd/index.ts
+++ b/widget/settings/pages/theme/osd/index.ts
@@ -13,6 +13,7 @@ export const OsdTheme = () => {
             vertical: true,
             children: [
                 Header('On Screen Display Settings'),
+                Option({ opt: options.theme.osd.opacity, title: 'OSD Opacity', type: 'number', increment: 5, min: 0, max: 100 }),
                 Option({ opt: options.theme.osd.bar_color, title: 'Bar', type: 'color' }),
                 Option({ opt: options.theme.osd.bar_overflow_color, title: 'Bar Overflow', subtitle: 'Overflow color is for when the volume goes over a 100', type: 'color' }),
                 Option({ opt: options.theme.osd.bar_empty_color, title: 'Bar Background', type: 'color' }),