From 86086de662c3cd2e0eee492b7050eb5bd442e1ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Asger=20Geel=20Weirs=C3=B8e?= Date: Sun, 14 Jun 2026 20:05:00 +0200 Subject: [PATCH] adapters/bulma: theme-adaptive notifications (tinted surface + theme text) so they read in light and dark --- adapters/bulma.css | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/adapters/bulma.css b/adapters/bulma.css index d2bde8e..8cc34d2 100644 --- a/adapters/bulma.css +++ b/adapters/bulma.css @@ -90,11 +90,25 @@ hr { background-color: var(--color-border); } .tag.is-success { background-color: #10341f; color: var(--color-good); } .tag.is-danger { background-color: #3a1620; color: var(--color-bad); } -/* Notifications */ -.notification.is-info.is-light { background-color: #10243a; color: #cfe6ff; border-color: #1d3a5a; } -.notification.is-success.is-light { background-color: #10341f; color: #c8f7d6; border-color: #1d5a32; } -.notification.is-danger.is-light { background-color: #3a1620; color: #ffd0d9; border-color: #5b2230; } -.notification.is-warning.is-light { background-color: #3a2c10; color: #ffe1a8; border-color: #5b471d; } +/* Notifications — tinted surface + theme text, so they read in light AND dark + (a hardcoded colour was dark-on-dark in one theme). */ +.notification { color: var(--color-text); } +.notification.is-info.is-light { + background-color: color-mix(in srgb, var(--color-accent) 14%, var(--color-surface)); + color: var(--color-text); border-color: color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); +} +.notification.is-success.is-light { + background-color: color-mix(in srgb, var(--color-good) 16%, var(--color-surface)); + color: var(--color-text); border-color: color-mix(in srgb, var(--color-good) 40%, var(--color-border)); +} +.notification.is-danger.is-light { + background-color: color-mix(in srgb, var(--color-bad) 16%, var(--color-surface)); + color: var(--color-text); border-color: color-mix(in srgb, var(--color-bad) 40%, var(--color-border)); +} +.notification.is-warning.is-light { + background-color: color-mix(in srgb, #ffb020 16%, var(--color-surface)); + color: var(--color-text); border-color: color-mix(in srgb, #ffb020 40%, var(--color-border)); +} /* Progress bars — dark track + accent fill (native needs pseudo-els) */ .progress { background-color: var(--color-surface-2); border-radius: 999px; height: 0.6rem; }