diff --git a/docs/design/frosted-0.62-card.png b/docs/design/frosted-0.62-card.png new file mode 100644 index 0000000..30d1ede Binary files /dev/null and b/docs/design/frosted-0.62-card.png differ diff --git a/docs/design/frosted-board.png b/docs/design/frosted-board.png new file mode 100644 index 0000000..0b3155d Binary files /dev/null and b/docs/design/frosted-board.png differ diff --git a/shell.conf b/shell.conf index ad83052..2773c09 100644 --- a/shell.conf +++ b/shell.conf @@ -10,4 +10,4 @@ transition_ms = 400 # how opaque the shell's surfaces are, 0.05 to 1 (1 = solid). below 1 the desktop shows # through; to frost it, Hyprland has to blur behind the shell (README: Glass) -glass = 1.0 +glass = 0.62 diff --git a/src/surface.rs b/src/surface.rs index 86c6b47..96faae8 100644 --- a/src/surface.rs +++ b/src/surface.rs @@ -1,4 +1,4 @@ -use amane::{Blend, Color, Rectangle, Shadow}; +use amane::{Blend, Color, Gradient, Rectangle, Shadow, Stack, children}; use crate::island::{backdrop, faded}; use crate::theme; @@ -7,22 +7,38 @@ use crate::theme; * what the island, the idle pill and the workspace pill are made of: one place, so * a design is this file. `shell` wraps `content` (already width x height, with its * own alignment and padding) in the surface. `lift` (0 to 1) is how hovered it is. - * the default: the gradient of `colors`, a 1 px rim, a soft glow in the accent + * + * design: frosted glass, after Apple's materials. the wallpaper's surface colours as + * a thin tint (glass, 0.62 by default) over what Hyprland blurs behind the shell, a + * hairline light rim, a soft highlight along the top edge as if lit from above, and + * one soft low shadow instead of a coloured glow. hovered, the rim takes the accent */ pub fn shell(width: f32, height: f32, radius: f32, colors: &[Color; 3], lift: f32, content: Rectangle) -> Rectangle { let theme = theme::now(); + // inset by the rim, so the rim stays crisp over it + let sheen = Rectangle::new() + .width(width - 2.0) + .height(height - 2.0) + .radius((radius - 1.0).max(0.0)) + .fill(Gradient::linear(180.0, [(0.0, white(34)), (0.3, white(9)), (0.65, white(0))])) + .translate(1.0, 1.0); + Rectangle::new() .width(width) .height(height) .radius(radius) .fill(backdrop(colors, alpha(theme::glass()))) - .border(1.0, Color::blend(theme.outline, faded(theme.accent, 110), lift)) - .shadow(Shadow::drop(theme.accent).opacity(0.3 + 0.4 * lift).blur(22.0)) - .child(content) + .border(1.0, Color::blend(white(48), faded(theme.accent, 150), lift)) + .shadow(Shadow::drop(Color::BLACK).opacity(0.24 + 0.1 * lift).blur(24.0).offset(0.0, 6.0)) + .child(Stack::new(children![sheen, content]).width(width).height(height)) } // an opacity, 0 to 1, as a colour's alpha pub fn alpha(opacity: f32) -> u8 { (opacity.clamp(0.0, 1.0) * 255.0).round() as u8 } + +fn white(alpha: u8) -> Color { + Color::rgba(255, 255, 255, alpha) +}