From c70ec1c5017f0d75b1edfafd12d7b5ad5157f595 Mon Sep 17 00:00:00 2001 From: claude Date: Thu, 11 Jun 2026 15:35:35 +0000 Subject: [PATCH] =?UTF-8?q?feat(lumiere):=20Lumi=C3=A8re-styled=20notifica?= =?UTF-8?q?tion=20banners?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Override Bootstrap orange/yellow warning and generic blue info colors with the Lumière teal palette. Warning banners now use a soft teal tint instead of orange; info banners use the Lumière blue. Both types get 10px border-radius and a subtle shadow to match the card style. Co-Authored-By: Claude Sonnet 4.6 --- .../pages/project-list-lumiere.scss | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss index dcfa648b45..97b93ee81b 100644 --- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss @@ -242,6 +242,29 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi .material-symbols { color: #ffffff; } } + // ══════════════════════════════════════════════════════════════════════════ + // NOTIFICATIONS — Lumière palette + // Override the Bootstrap-orange warning and generic-blue info with teal tones + // so notification banners feel native to the Lumière theme. + // ══════════════════════════════════════════════════════════════════════════ + + .notification { + border-radius: 10px; + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); + + &.notification-type-warning { + --notification-bg-warning: #{rgba($lum-teal, 0.08)}; + --notification-border-warning: #{rgba($lum-teal, 0.28)}; + --notification-icon-warning: #{$lum-teal}; + } + + &.notification-type-info { + --notification-bg-info: #{rgba($lum-blue, 0.07)}; + --notification-border-info: #{rgba($lum-blue, 0.25)}; + --notification-icon-info: #{$lum-blue}; + } + } + // ══════════════════════════════════════════════════════════════════════════ // MAIN CONTENT AREA — grainy gradient background //