From 95084cc640a79041b7179adf731bcb301dca5ebb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 9 Sep 2026 10:43:04 -0700 Subject: [PATCH 1/8] Styles/lighting: toplevel shadows --- lib/Styles/Common/_borders.scss | 4 +++ lib/Styles/Common/_lighting.scss | 61 ++++++++++++++++++++++++++------ lib/Styles/Granite/Dialog.scss | 12 +------ lib/Styles/Gtk/Popover.scss | 9 ++--- lib/Styles/Gtk/Window.scss | 13 +------ 5 files changed, 60 insertions(+), 39 deletions(-) diff --git a/lib/Styles/Common/_borders.scss b/lib/Styles/Common/_borders.scss index f7ca7217b..47f3937b3 100644 --- a/lib/Styles/Common/_borders.scss +++ b/lib/Styles/Common/_borders.scss @@ -11,3 +11,7 @@ @mixin border-interactive-roundrect { border-radius: rem($window_radius / 2); } + +.toplevel { + border-radius: rem($window_radius); +} diff --git a/lib/Styles/Common/_lighting.scss b/lib/Styles/Common/_lighting.scss index 646b8f90d..300f8591e 100644 --- a/lib/Styles/Common/_lighting.scss +++ b/lib/Styles/Common/_lighting.scss @@ -40,11 +40,6 @@ 0 3px 8px 2px rgba(black, 0.1), 0 5px 5px -3px rgba(black, 0.4), 0 8px 5px 1px rgba(black, 0.1); - } @else if $level == 4 { - @return - 0 2px 4px 2px rgba(black, 0.1), - 0 15px 12px -10px rgba(black, 0.4), - 0 8px 14px 4px rgba(black, 0.15); } } @else if $color-scheme == "dark" { @if $level == 1 { @@ -60,11 +55,6 @@ 0 3px 8px 2px rgba(black, 0.2), 0 5px 5px -3px rgba(black, 0.5), 0 8px 5px 1px rgba(black, 0.2); - } @else if $level == 4 { - @return - 0 2px 4px 2px rgba(black, 0.2), - 0 15px 12px -10px rgba(black, 0.5), - 0 8px 14px 4px rgba(black, 0.25); } } } @@ -115,3 +105,54 @@ inset 0 1px 1px rgba(black, 0.05), inset 0 0 1px 1px rgba(black, 0.05); } + +.toplevel { + //popover + .shadow-2 { + box-shadow: + highlight(), + 0 0 0 1px var(--toplevel-border-color), + shadow(2); + } + + //window.dialog + .shadow-3 { + box-shadow: + highlight(), + 0 0 0 1px var(--toplevel-border-color), + shadow(3); + + &:backdrop { + box-shadow: + highlight(), + 0 0 0 1px var(--toplevel-border-color), + shadow(2); + } + } + + // window + .shadow-4 { + box-shadow: + highlight(), + 0 0 0 1px var(--toplevel-border-color), + 0 2px 4px 2px rgba(black, 0.1), + 0 15px 12px -10px rgba(black, 0.4), + 0 8px 14px 4px rgba(black, 0.15); + + @media (prefers-color-scheme: dark) { + box-shadow: + highlight(), + 0 0 0 1px var(--toplevel-border-color), + 0 2px 4px 2px rgba(black, 0.2), + 0 15px 12px -10px rgba(black, 0.5), + 0 8px 14px 4px rgba(black, 0.25); + } + + &:backdrop { + box-shadow: + highlight(), + 0 0 0 1px var(--toplevel-border-color), + shadow(2); + } + } +} diff --git a/lib/Styles/Granite/Dialog.scss b/lib/Styles/Granite/Dialog.scss index de241f2b7..1ecfaf8fe 100644 --- a/lib/Styles/Granite/Dialog.scss +++ b/lib/Styles/Granite/Dialog.scss @@ -1,15 +1,5 @@ window.csd.dialog { - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - shadow(3); - - &:backdrop { - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - shadow(2); - } + @extend .toplevel, .shadow-3; .dialog-content-area { margin: rem(12px); diff --git a/lib/Styles/Gtk/Popover.scss b/lib/Styles/Gtk/Popover.scss index 1375f3a76..4435cc0a6 100644 --- a/lib/Styles/Gtk/Popover.scss +++ b/lib/Styles/Gtk/Popover.scss @@ -11,11 +11,12 @@ popover { } > contents { + @extend .toplevel; + box-shadow: // No highlight because of the arrow 0 0 0 1px var(--toplevel-border-color), shadow(2); - border-radius: rem($window_radius); undershoot { &.top { @@ -29,11 +30,7 @@ popover { } &.menu > contents { - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - shadow(2); - padding: $button-spacing; + @extend .toplevel, .shadow-2; } &.emoji-picker { diff --git a/lib/Styles/Gtk/Window.scss b/lib/Styles/Gtk/Window.scss index ed9fd0713..aa8860272 100644 --- a/lib/Styles/Gtk/Window.scss +++ b/lib/Styles/Gtk/Window.scss @@ -3,18 +3,7 @@ window { color: var(--fg-color); &.csd { - border-radius: rem($window_radius); - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - shadow(4); - - &:backdrop { - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - shadow(2); - } + @extend .toplevel, .shadow-4; // black behind corners &.maximized { From 3520ed91d130af3a417cd8a6e07f9721c8dbc18e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 9 Sep 2026 10:51:13 -0700 Subject: [PATCH 2/8] use color mix --- lib/Styles/Common/_lighting.scss | 12 ++++++------ lib/Styles/Gtk/Popover.scss | 2 ++ 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/lib/Styles/Common/_lighting.scss b/lib/Styles/Common/_lighting.scss index 300f8591e..331348a4d 100644 --- a/lib/Styles/Common/_lighting.scss +++ b/lib/Styles/Common/_lighting.scss @@ -135,17 +135,17 @@ box-shadow: highlight(), 0 0 0 1px var(--toplevel-border-color), - 0 2px 4px 2px rgba(black, 0.1), - 0 15px 12px -10px rgba(black, 0.4), - 0 8px 14px 4px rgba(black, 0.15); + 0 2px 4px 2px color-mix(in srgb black 10%, transparent), + 0 15px 12px -10px color-mix(in srgb black 40%, transparent), + 0 8px 14px 4px color-mix(in srgb black 15%, transparent); @media (prefers-color-scheme: dark) { box-shadow: highlight(), 0 0 0 1px var(--toplevel-border-color), - 0 2px 4px 2px rgba(black, 0.2), - 0 15px 12px -10px rgba(black, 0.5), - 0 8px 14px 4px rgba(black, 0.25); + 0 2px 4px 2px color-mix(in srgb black 20%, transparent), + 0 15px 12px -10px color-mix(in srgb black 50%, transparent), + 0 8px 14px 4px color-mix(in srgb black 25%, transparent); } &:backdrop { diff --git a/lib/Styles/Gtk/Popover.scss b/lib/Styles/Gtk/Popover.scss index 4435cc0a6..71fbf648d 100644 --- a/lib/Styles/Gtk/Popover.scss +++ b/lib/Styles/Gtk/Popover.scss @@ -31,6 +31,8 @@ popover { &.menu > contents { @extend .toplevel, .shadow-2; + + padding: $button-spacing; } &.emoji-picker { From 12c5c4c4d54573dae6ed36f8ec3f918652aa71d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 9 Sep 2026 11:00:54 -0700 Subject: [PATCH 3/8] try to calculate shadow multiplier --- lib/Styles/Common/_lighting.scss | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/lib/Styles/Common/_lighting.scss b/lib/Styles/Common/_lighting.scss index 331348a4d..c7bf1b12d 100644 --- a/lib/Styles/Common/_lighting.scss +++ b/lib/Styles/Common/_lighting.scss @@ -132,22 +132,19 @@ // window .shadow-4 { - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - 0 2px 4px 2px color-mix(in srgb black 10%, transparent), - 0 15px 12px -10px color-mix(in srgb black 40%, transparent), - 0 8px 14px 4px color-mix(in srgb black 15%, transparent); + --shadow-multiplier: 0%; @media (prefers-color-scheme: dark) { - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - 0 2px 4px 2px color-mix(in srgb black 20%, transparent), - 0 15px 12px -10px color-mix(in srgb black 50%, transparent), - 0 8px 14px 4px color-mix(in srgb black 25%, transparent); + --shadow-multiplier: 10%; } + box-shadow: + highlight(), + 0 0 0 1px var(--toplevel-border-color), + 0 2px 4px 2px color-mix(in srgb, black calc(10% + var(--shadow-multiplier)), transparent), + 0 15px 12px -10px color-mix(in srgb, black calc(40% + var(--shadow-multiplier)), transparent), + 0 8px 14px 4px color-mix(in srgb, black calc(15% + var(--shadow-multiplier)), transparent); + &:backdrop { box-shadow: highlight(), From e906e6a275c7e0caa516f1e27407c73fc224e7a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 9 Sep 2026 11:06:00 -0700 Subject: [PATCH 4/8] Fix selectors --- lib/Styles/Common/_lighting.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/lib/Styles/Common/_lighting.scss b/lib/Styles/Common/_lighting.scss index c7bf1b12d..8e5dbab3f 100644 --- a/lib/Styles/Common/_lighting.scss +++ b/lib/Styles/Common/_lighting.scss @@ -108,7 +108,7 @@ .toplevel { //popover - .shadow-2 { + &.shadow-2 { box-shadow: highlight(), 0 0 0 1px var(--toplevel-border-color), @@ -116,7 +116,7 @@ } //window.dialog - .shadow-3 { + &.shadow-3 { box-shadow: highlight(), 0 0 0 1px var(--toplevel-border-color), @@ -131,7 +131,7 @@ } // window - .shadow-4 { + &.shadow-4 { --shadow-multiplier: 0%; @media (prefers-color-scheme: dark) { @@ -139,11 +139,11 @@ } box-shadow: - highlight(), 0 0 0 1px var(--toplevel-border-color), 0 2px 4px 2px color-mix(in srgb, black calc(10% + var(--shadow-multiplier)), transparent), 0 15px 12px -10px color-mix(in srgb, black calc(40% + var(--shadow-multiplier)), transparent), - 0 8px 14px 4px color-mix(in srgb, black calc(15% + var(--shadow-multiplier)), transparent); + 0 8px 14px 4px color-mix(in srgb, black calc(15% + var(--shadow-multiplier)), transparent), + highlight(); &:backdrop { box-shadow: From b55bf5381062eebce03306238b4888302059509f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 9 Sep 2026 12:10:45 -0700 Subject: [PATCH 5/8] Create a shadow calculator --- lib/Styles/Common/_lighting.scss | 57 ++++++++++++++++---------------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/lib/Styles/Common/_lighting.scss b/lib/Styles/Common/_lighting.scss index 8e5dbab3f..256c7110d 100644 --- a/lib/Styles/Common/_lighting.scss +++ b/lib/Styles/Common/_lighting.scss @@ -107,49 +107,50 @@ } .toplevel { + --shadow-multiplier: 0%; + @media (prefers-color-scheme: dark) { + --shadow-multiplier: 10%; + } + + --shadow-offset: calc(var(--shadow-level) * 2px + 2px); + --shadow-radius: calc(var(--shadow-level) * 3px); + --shadow-spread: calc(var(--shadow-radius) * -0.5); + --shadow-color: color-mix(in srgb, black calc(var(--shadow-level) * 4% + 10% + var(--shadow-multiplier)), transparent); + + --bloom-shadow-offset: calc(var(--shadow-offset) * 1.1); + --bloom-shadow-radius: calc(var(--shadow-radius) * 1.05 + 5px); + --bloom-shadow-spread: calc(var(--shadow-radius) * 0.6); + --bloom-shadow-color: color-mix(in srgb, var(--shadow-color) 50%, transparent); + + box-shadow: + inset 0 1px 0 0 color-mix(in srgb, var(--highlight-color) 30%, transparent), + inset 0 -1px 0 0 color-mix(in srgb, var(--highlight-color) 20%, transparent), + inset 1px 0 0 0 color-mix(in srgb, var(--highlight-color) 7%, transparent), + inset -1px 0 0 0 color-mix(in srgb, var(--highlight-color) 7%, transparent), + 0 0 0 1px var(--toplevel-border-color), + 0 var(--shadow-offset) var(--shadow-radius) var(--shadow-spread) var(--shadow-color), + 0 var(--bloom-shadow-offset) var(--bloom-shadow-radius) var(--bloom-shadow-spread) var(--bloom-shadow-color); + //popover &.shadow-2 { - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - shadow(2); + --shadow-level: 1; } //window.dialog &.shadow-3 { - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - shadow(3); + --shadow-level: 2; &:backdrop { - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - shadow(2); + --shadow-level: 1; } } // window &.shadow-4 { - --shadow-multiplier: 0%; - - @media (prefers-color-scheme: dark) { - --shadow-multiplier: 10%; - } - - box-shadow: - 0 0 0 1px var(--toplevel-border-color), - 0 2px 4px 2px color-mix(in srgb, black calc(10% + var(--shadow-multiplier)), transparent), - 0 15px 12px -10px color-mix(in srgb, black calc(40% + var(--shadow-multiplier)), transparent), - 0 8px 14px 4px color-mix(in srgb, black calc(15% + var(--shadow-multiplier)), transparent), - highlight(); + --shadow-level: 3; &:backdrop { - box-shadow: - highlight(), - 0 0 0 1px var(--toplevel-border-color), - shadow(2); + --shadow-level: 1; } } } From 64ae9047cbe1e554b03eaec1c187e4449139a43a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 9 Sep 2026 12:13:33 -0700 Subject: [PATCH 6/8] simplify --- lib/Styles/Common/_lighting.scss | 23 ----------------------- lib/Styles/Granite/Dialog.scss | 8 +++++++- lib/Styles/Gtk/Popover.scss | 4 +++- lib/Styles/Gtk/Window.scss | 8 +++++++- 4 files changed, 17 insertions(+), 26 deletions(-) diff --git a/lib/Styles/Common/_lighting.scss b/lib/Styles/Common/_lighting.scss index 256c7110d..7aa238c16 100644 --- a/lib/Styles/Common/_lighting.scss +++ b/lib/Styles/Common/_lighting.scss @@ -130,27 +130,4 @@ 0 0 0 1px var(--toplevel-border-color), 0 var(--shadow-offset) var(--shadow-radius) var(--shadow-spread) var(--shadow-color), 0 var(--bloom-shadow-offset) var(--bloom-shadow-radius) var(--bloom-shadow-spread) var(--bloom-shadow-color); - - //popover - &.shadow-2 { - --shadow-level: 1; - } - - //window.dialog - &.shadow-3 { - --shadow-level: 2; - - &:backdrop { - --shadow-level: 1; - } - } - - // window - &.shadow-4 { - --shadow-level: 3; - - &:backdrop { - --shadow-level: 1; - } - } } diff --git a/lib/Styles/Granite/Dialog.scss b/lib/Styles/Granite/Dialog.scss index 1ecfaf8fe..a18749de9 100644 --- a/lib/Styles/Granite/Dialog.scss +++ b/lib/Styles/Granite/Dialog.scss @@ -1,5 +1,11 @@ window.csd.dialog { - @extend .toplevel, .shadow-3; + @extend .toplevel; + + --shadow-level: 2; + + &:backdrop { + --shadow-level: 1; + } .dialog-content-area { margin: rem(12px); diff --git a/lib/Styles/Gtk/Popover.scss b/lib/Styles/Gtk/Popover.scss index 71fbf648d..032c95bb9 100644 --- a/lib/Styles/Gtk/Popover.scss +++ b/lib/Styles/Gtk/Popover.scss @@ -30,7 +30,9 @@ popover { } &.menu > contents { - @extend .toplevel, .shadow-2; + @extend .toplevel; + + --shadow-level: 1; padding: $button-spacing; } diff --git a/lib/Styles/Gtk/Window.scss b/lib/Styles/Gtk/Window.scss index aa8860272..a6d5fa23d 100644 --- a/lib/Styles/Gtk/Window.scss +++ b/lib/Styles/Gtk/Window.scss @@ -3,7 +3,13 @@ window { color: var(--fg-color); &.csd { - @extend .toplevel, .shadow-4; + @extend .toplevel; + + --shadow-level: 3; + + &:backdrop { + --shadow-level: 1; + } // black behind corners &.maximized { From 2bcf958583caa25115542c740809a9dfde716186 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 9 Sep 2026 12:25:26 -0700 Subject: [PATCH 7/8] Smooth those highlight corners --- lib/Styles/Common/_lighting.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/Styles/Common/_lighting.scss b/lib/Styles/Common/_lighting.scss index 7aa238c16..0ffd6879c 100644 --- a/lib/Styles/Common/_lighting.scss +++ b/lib/Styles/Common/_lighting.scss @@ -123,8 +123,8 @@ --bloom-shadow-color: color-mix(in srgb, var(--shadow-color) 50%, transparent); box-shadow: - inset 0 1px 0 0 color-mix(in srgb, var(--highlight-color) 30%, transparent), - inset 0 -1px 0 0 color-mix(in srgb, var(--highlight-color) 20%, transparent), + inset 0 2px 0 -1px color-mix(in srgb, var(--highlight-color) 30%, transparent), + inset 0 -2px 0 -1px color-mix(in srgb, var(--highlight-color) 20%, transparent), inset 1px 0 0 0 color-mix(in srgb, var(--highlight-color) 7%, transparent), inset -1px 0 0 0 color-mix(in srgb, var(--highlight-color) 7%, transparent), 0 0 0 1px var(--toplevel-border-color), From cf196c9dc59493b56e42011a90d5cf3aa318a1f3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Danielle=20For=C3=A9?= Date: Wed, 9 Sep 2026 12:30:33 -0700 Subject: [PATCH 8/8] less side highlight --- lib/Styles/Common/_lighting.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lib/Styles/Common/_lighting.scss b/lib/Styles/Common/_lighting.scss index 0ffd6879c..e5dc0ab12 100644 --- a/lib/Styles/Common/_lighting.scss +++ b/lib/Styles/Common/_lighting.scss @@ -125,8 +125,8 @@ box-shadow: inset 0 2px 0 -1px color-mix(in srgb, var(--highlight-color) 30%, transparent), inset 0 -2px 0 -1px color-mix(in srgb, var(--highlight-color) 20%, transparent), - inset 1px 0 0 0 color-mix(in srgb, var(--highlight-color) 7%, transparent), - inset -1px 0 0 0 color-mix(in srgb, var(--highlight-color) 7%, transparent), + inset 1px 0 0 0 color-mix(in srgb, var(--highlight-color) 5%, transparent), + inset -1px 0 0 0 color-mix(in srgb, var(--highlight-color) 5%, transparent), 0 0 0 1px var(--toplevel-border-color), 0 var(--shadow-offset) var(--shadow-radius) var(--shadow-spread) var(--shadow-color), 0 var(--bloom-shadow-offset) var(--bloom-shadow-radius) var(--bloom-shadow-spread) var(--bloom-shadow-color);