[PATCH yew-widget-toolkit-assets 2/3] tree-wide: replace the disabled opacity with a variable and decrease it

[Shannon Sterz <s.sterz@proxmox.com>]

material design 3 uses an opacity of only 38% for disabled buttons and
input fields [1,2]. adopt this opacity for disabled input fields to
increase the contrast between disabled and enabled elements. in order
to make changing this in the feature easier, the opacity is also moved
into a css variable.

[1]: https://m3.material.io/components/text-fields/specs
[2]: https://m3.material.io/components/buttons/specs

Signed-off-by: Shannon Sterz <s.sterz@proxmox.com>
---
 scss/_button.scss        |  4 ++--
 scss/_date_selector.scss |  4 ++--
 scss/_input.scss         | 12 ++++++------
 scss/_menu.scss          |  4 ++--
 scss/_miniscroll.scss    |  4 ++--
 scss/_nav.scss           |  4 ++--
 scss/_theme_common.scss  |  4 ++++
 scss/_theme_post.scss    |  9 ++++++++-
 8 files changed, 28 insertions(+), 17 deletions(-)

diff --git a/scss/_button.scss b/scss/_button.scss
index 417f74c..ef21fa5 100644
--- a/scss/_button.scss
+++ b/scss/_button.scss
@@ -33,7 +33,7 @@
     &[aria-disabled="true"] {
         @include color-scheme-vars("inverse-surface");
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 }
 
@@ -83,7 +83,7 @@ button,
     &:disabled,
     &[aria-disabled="true"] {
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
         @include elevation-box-shadow(0);
 
         &:not(.pwt-button-text) {
diff --git a/scss/_date_selector.scss b/scss/_date_selector.scss
index 126d5f2..9500194 100644
--- a/scss/_date_selector.scss
+++ b/scss/_date_selector.scss
@@ -33,7 +33,7 @@
         }
 
         &.disabled {
-            opacity: 0.5;
+            opacity: var(--pwt-disabled-opacity);
             cursor: default !important;
         }
 
@@ -57,4 +57,4 @@
         opacity: 0.5;
         padding: var(--pwt-spacer-1);
     }
-}
\ No newline at end of file
+}
diff --git a/scss/_input.scss b/scss/_input.scss
index b01edca..293717c 100644
--- a/scss/_input.scss
+++ b/scss/_input.scss
@@ -87,7 +87,7 @@ input {
     &:disabled,
     &[aria-disabled=true]{
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 }
 
@@ -119,7 +119,7 @@ input {
 }
 
 .pwt-label-disabled {
-    opacity: 0.5;
+    opacity: var(--pwt-disabled-opacity);
 }
 
 .pwt-switch {
@@ -178,7 +178,7 @@ input {
 
     &.disabled {
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 }
 
@@ -231,7 +231,7 @@ input {
 
     &.disabled {
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 
     &.disabled.checked {
@@ -279,7 +279,7 @@ input {
 
     &.disabled {
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 }
 
@@ -312,7 +312,7 @@ input {
     &.disabled,
     &:disabled {
         cursor: auto;
-        opacity: 0.5;
+        opacity: var(--pwt-disabled-opacity);
     }
 }
 
diff --git a/scss/_menu.scss b/scss/_menu.scss
index 2dcd3c3..fdfd4db 100644
--- a/scss/_menu.scss
+++ b/scss/_menu.scss
@@ -56,7 +56,7 @@ ul.pwt-menubar {
 	.pwt-menubar-item{
 		&[disabled], &[aria-disabled=true] {
 			cursor: auto;
-			opacity: 0.5;
+			opacity: var(--pwt-disabled-opacity);
 		}
 	}
 
@@ -101,7 +101,7 @@ ul.pwt-menu {
 	.pwt-menu-item {
 		&[disabled], &[aria-disabled=true] {
 			cursor: auto;
-			opacity: 0.5;
+			opacity: var(--pwt-disabled-opacity);
 		}
 	}
 
diff --git a/scss/_miniscroll.scss b/scss/_miniscroll.scss
index 7747297..b4cab0e 100644
--- a/scss/_miniscroll.scss
+++ b/scss/_miniscroll.scss
@@ -59,7 +59,7 @@
 
         &.disabled {
             cursor: auto;
-            opacity: 0.5;
+            opacity: var(--pwt-disabled-opacity);
         }
     }
 
@@ -81,7 +81,7 @@
 
         &.disabled {
             cursor: auto;
-            opacity: 0.5;
+            opacity: var(--pwt-disabled-opacity);
         }
     }
 }
diff --git a/scss/_nav.scss b/scss/_nav.scss
index c402ec5..08102d4 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -47,7 +47,7 @@
         }
 
         &.disabled {
-            opacity: 0.5;
+            opacity: var(--pwt-disabled-opacity);
             cursor: auto;
         }
     }
@@ -107,7 +107,7 @@
         }
 
         &.disabled {
-            opacity: 0.5;
+            opacity: var(--pwt-disabled-opacity);
             cursor: auto;
         }
     }
diff --git a/scss/_theme_common.scss b/scss/_theme_common.scss
index a0db087..409be88 100644
--- a/scss/_theme_common.scss
+++ b/scss/_theme_common.scss
@@ -62,5 +62,9 @@ $elevation-levels-tint-opacity: (
     5: 14%,
 );
 
+$element-state-opacity: (
+    disabled: 0.38,
+);
+
 // default accent color (primary, secentary or tertiary)
 $default-accent-color: secondary;
diff --git a/scss/_theme_post.scss b/scss/_theme_post.scss
index 459ec4f..c3b8642 100644
--- a/scss/_theme_post.scss
+++ b/scss/_theme_post.scss
@@ -58,6 +58,13 @@
     }
 }
 
+/* Opacity of elements in certain states. */
+:root {
+    @each $level, $value in $element-state-opacity {
+        --pwt-#{$level}-opacity: #{$value};
+    }
+}
+
 /* Font setup */
 @font-face {
     font-family: "Roboto Flex";
@@ -121,4 +128,4 @@ $pwt-font-monospace: monospace;
 @import "tooltip";
 @import "embedded_html";
 
-@import "rrd"; // only useed by proxmox RRD component
\ No newline at end of file
+@import "rrd"; // only useed by proxmox RRD component
-- 
2.47.3