From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [IPv6:2a01:7e0:0:424::9]) by lore.proxmox.com (Postfix) with ESMTPS id 344C81FF13C for ; Thu, 05 Mar 2026 12:21:33 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id BE30961FC; Thu, 5 Mar 2026 12:22:38 +0100 (CET) From: Shannon Sterz To: yew-devel@lists.proxmox.com Subject: [PATCH yew-widget-toolkit-assets 2/3] tree-wide: replace the disabled opacity with a variable and decrease it Date: Thu, 5 Mar 2026 12:21:56 +0100 Message-ID: <20260305112158.220557-3-s.sterz@proxmox.com> X-Mailer: git-send-email 2.47.3 In-Reply-To: <20260305112158.220557-1-s.sterz@proxmox.com> References: <20260305112158.220557-1-s.sterz@proxmox.com> MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Bm-Milter-Handled: 55990f41-d878-4baa-be0a-ee34c49e34d2 X-Bm-Transport-Timestamp: 1772709694920 X-SPAM-LEVEL: Spam detection results: 0 AWL 0.096 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Message-ID-Hash: ZIBW3M4P52WX7Y5UDLKSVMNOEC5HVJGS X-Message-ID-Hash: ZIBW3M4P52WX7Y5UDLKSVMNOEC5HVJGS X-MailFrom: s.sterz@proxmox.com X-Mailman-Rule-Misses: dmarc-mitigation; no-senders; approved; loop; banned-address; emergency; member-moderation; nonmember-moderation; administrivia; implicit-dest; max-recipients; max-size; news-moderation; no-subject; digests; suspicious-header X-Mailman-Version: 3.3.10 Precedence: list List-Id: Yew framework devel list at Proxmox List-Help: List-Owner: List-Post: List-Subscribe: List-Unsubscribe: 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 --- 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