From b28bc425043fbecb3e6a57147f2487c28dd883a7 Mon Sep 17 00:00:00 2001 From: "mr. m" Date: Sat, 12 Jul 2025 11:20:17 +0200 Subject: [PATCH] feat: Improved color saturation calculations, b=no-bug, c=common, workspaces --- .../shared/preferences/zen-preferences.css | 1 - .../common/styles/zen-browser-container.css | 6 ++++ src/zen/common/styles/zen-theme.css | 10 ++++-- src/zen/workspaces/ZenGradientGenerator.mjs | 36 +++---------------- src/zen/workspaces/zen-workspaces.css | 5 ++- 5 files changed, 22 insertions(+), 36 deletions(-) diff --git a/src/browser/themes/shared/preferences/zen-preferences.css b/src/browser/themes/shared/preferences/zen-preferences.css index 1dfa52ebe..497d851f7 100644 --- a/src/browser/themes/shared/preferences/zen-preferences.css +++ b/src/browser/themes/shared/preferences/zen-preferences.css @@ -592,7 +592,6 @@ groupbox h2 { #dataCollectionGroup, #websiteAdvertisingCategory, #websiteAdvertisingGroup, -#webAppearanceGroup, #helpButton { display: none !important; } diff --git a/src/zen/common/styles/zen-browser-container.css b/src/zen/common/styles/zen-browser-container.css index abf632bd0..08402fea3 100644 --- a/src/zen/common/styles/zen-browser-container.css +++ b/src/zen/common/styles/zen-browser-container.css @@ -19,6 +19,12 @@ & browser[transparent='true'] { background: light-dark(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1)); } + + @media not -moz-pref('layout.css.prefers-color-scheme.content-override', 2) { + & browser[type='content'] { + color-scheme: env(-moz-content-preferred-color-scheme); + } + } } } } diff --git a/src/zen/common/styles/zen-theme.css b/src/zen/common/styles/zen-theme.css index 098937898..6d992bf7b 100644 --- a/src/zen/common/styles/zen-theme.css +++ b/src/zen/common/styles/zen-theme.css @@ -118,7 +118,7 @@ --zen-toolbar-element-bg: light-dark( color-mix(in oklch, var(--toolbox-textcolor) 8%, transparent), - color-mix(in oklch, var(--toolbox-textcolor) 15%, transparent) + color-mix(in oklch, var(--toolbox-textcolor) 12.5%, transparent) ); --zen-toolbar-element-bg-hover: light-dark( @@ -229,7 +229,13 @@ background: transparent; --zen-themed-toolbar-bg-transparent: transparent; @media -moz-pref('widget.windows.mica.toplevel-backdrop', 2) { - --zen-themed-toolbar-bg-transparent: light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.1)); + --zen-themed-toolbar-bg-transparent: light-dark( + rgba(0, 0, 0, 0.2), + rgba(255, 255, 255, 0.35) + ); + } + @media (-moz-platform: macos) { + --zen-themed-toolbar-bg-transparent: rgba(255, 255, 255, 0.3); } } diff --git a/src/zen/workspaces/ZenGradientGenerator.mjs b/src/zen/workspaces/ZenGradientGenerator.mjs index 69a926ad7..e397585af 100644 --- a/src/zen/workspaces/ZenGradientGenerator.mjs +++ b/src/zen/workspaces/ZenGradientGenerator.mjs @@ -462,8 +462,9 @@ } const normalizedDistance = 1 - Math.min(distance / radius, 1); // Normalize distance to [0, 1] const hue = (angle / 360) * 360; // Normalize angle to [0, 360) - const saturation = normalizedDistance * 100; // Scale distance to [0, 100] + let saturation = normalizedDistance * 100; // stays high even in center if (type !== EXPLICIT_LIGHTNESS_TYPE) { + saturation = 80 + (1 - normalizedDistance) * 20; // Set the current lightness to how far we are from the center of the circle // For example, moving the dot outside will have higher lightness, while moving it inside will have lower lightness this.#currentLightness = Math.round((1 - normalizedDistance) * 100); @@ -1009,22 +1010,6 @@ } themedColors(colors) { - if (this.isMica) { - const isDarkMode = this.isDarkMode; - const baseColor = !isDarkMode ? [255, 255, 255] : [0, 0, 0]; - return colors.map((color) => { - if (color.isCustom) { - return color; - } - const [r, g, b] = color.c; - // Blend with white or black based on the theme - const blendedColor = this.blendColors([r, g, b], baseColor, isDarkMode ? 30 : 70); - return { - ...color, - c: blendedColor, - }; - }); - } // For non-Mica themes, we return the colors as they are return [...colors]; } @@ -1063,19 +1048,6 @@ } blendWithWhiteOverlay(baseColor, opacity) { - if (AppConstants.platform === 'macosx') { - const blendColor = [255, 255, 255]; - const blendAlpha = 0.2; - const baseAlpha = baseColor[3] !== undefined ? baseColor[3] : 1; - const blended = []; - - for (let i = 0; i < 3; i++) { - blended[i] = Math.round(blendColor[i] * (1 - opacity) + baseColor[i] * opacity); - } - - const blendedAlpha = +(blendAlpha * (1 - opacity) + baseAlpha * opacity).toFixed(3); - return `rgba(${blended[0]}, ${blended[1]}, ${blended[2]}, ${blendedAlpha})`; - } return `rgba(${baseColor[0]}, ${baseColor[1]}, ${baseColor[2]}, ${opacity})`; } @@ -1182,7 +1154,7 @@ } shouldBeDarkMode(accentColor) { - if (Services.prefs.getBoolPref('zen.theme.use-sysyem-colors') || this.isMica) { + if (Services.prefs.getBoolPref('zen.theme.use-sysyem-colors')) { return this.isDarkMode; } @@ -1202,7 +1174,7 @@ let lightText = this.getToolbarColor(false); // e.g. [r, g, b, a] if (this.canBeTransparent) { - lightText[3] -= 0.15; // Reduce alpha for light text + lightText[3] -= 0.25; // Reduce alpha for light text } // Composite text color over background diff --git a/src/zen/workspaces/zen-workspaces.css b/src/zen/workspaces/zen-workspaces.css index ebbe67895..cd0d509f3 100644 --- a/src/zen/workspaces/zen-workspaces.css +++ b/src/zen/workspaces/zen-workspaces.css @@ -215,7 +215,10 @@ transition: opacity 0.1s; order: 5; --toolbarbutton-inner-padding: 6px; - --tab-border-radius: 6px; + + & image { + border-radius: calc(var(--border-radius-medium) - 4px); + } :root[zen-renaming-tab='true'] & { display: none;