design-frosted: frosted glass after Apple's materials

- the wallpaper's surfaces as a thin tint (glass 0.62 by default) over
  what Hyprland blurs behind the shell (needs the README layer rule)
- hairline white rim, accent when hovered
- a white sheen along the top edge, fading out a third of the way down
- one soft low black shadow instead of the accent glow
- docs/design: board at glass 0.45 / 0.62 / 0.8, and the card at 0.62

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

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)
+}