From 12d5bac4a7a7d54e51cc87d19934ecfc725e4a9f Mon Sep 17 00:00:00 2001
From: Max Strasinsky <98811342+mstrasinskis@users.noreply.github.com>
Date: Mon, 23 Dec 2024 10:08:03 +0000
Subject: [PATCH] Add banner bg variable (#557)

# Motivation

To solve the low contrast of the banners in cards and standardize their
appearance, a new color theme variable has been added.

# Changes

- Added `--banner-background` to both themes.

# Screenshots

| Before | After |
|--------|--------|
| <img width="792" alt="image"
src="https://github.com/user-attachments/assets/cae9911b-b076-44de-b1dc-0ab9643b391d"
/> | <img width="786" alt="image"
src="https://github.com/user-attachments/assets/fe88b1a8-3721-4445-9b99-064796e2d050"
/> |
| <img width="777" alt="image"
src="https://github.com/user-attachments/assets/6583d802-b434-4a9e-ab19-e73f882cf454"
/> | <img width="779" alt="image"
src="https://github.com/user-attachments/assets/931df786-fe04-4b35-9cd7-e8b25ec8368e"
/> |
| <img width="1176" alt="image"
src="https://github.com/user-attachments/assets/7cb46733-8d86-4442-8175-d1374eeee8b0"
/> | <img width="1175" alt="image"
src="https://github.com/user-attachments/assets/796af1bb-d75f-47e1-8246-9fb813bcf741"
/> |
| <img width="1166" alt="image"
src="https://github.com/user-attachments/assets/fad8defb-dc8a-4fb9-8c43-1c749df6651c"
/> | <img width="1174" alt="image"
src="https://github.com/user-attachments/assets/ba9f453d-f64a-4861-b838-1c6f298b624d"
/> |
---
 src/lib/styles/themes/dark.scss  | 2 ++
 src/lib/styles/themes/light.scss | 2 ++
 2 files changed, 4 insertions(+)

diff --git a/src/lib/styles/themes/dark.scss b/src/lib/styles/themes/dark.scss
index 9d5e32ac..b993aa82 100644
--- a/src/lib/styles/themes/dark.scss
+++ b/src/lib/styles/themes/dark.scss
@@ -231,4 +231,6 @@
   --tag-executed-background: var(--orchid-200-a25);
   --tag-failed-text: var(--orange-200);
   --tag-failed-background: var(--orange-200-a25);
+
+  --banner-background: var(--card-background-tint);
 }
diff --git a/src/lib/styles/themes/light.scss b/src/lib/styles/themes/light.scss
index 58aa5392..4adb5eda 100644
--- a/src/lib/styles/themes/light.scss
+++ b/src/lib/styles/themes/light.scss
@@ -241,5 +241,7 @@
     --tag-executed-background: var(--orchid-200-a25);
     --tag-failed-text: var(--orange-200);
     --tag-failed-background: var(--orange-200-a25);
+
+    --banner-background: var(--card-background-tint);
   }
 }