From 186e218980d15d91146c3cf3b15095ea729225b9 Mon Sep 17 00:00:00 2001
From: Dennis Reimann <mail@dennisreimann.de>
Date: Wed, 7 Feb 2024 12:36:07 +0100
Subject: [PATCH] Add translucent badge option

---
 src/bootstrap/_customizations.css             | 38 +++++++++++++++++++
 src/components/bootstrap/variants/badges.html | 26 +++++++++----
 src/static/styles/btcpayserver-bootstrap.css  | 38 +++++++++++++++++++
 src/styles/variables/theme.css                |  4 +-
 4 files changed, 96 insertions(+), 10 deletions(-)

diff --git a/src/bootstrap/_customizations.css b/src/bootstrap/_customizations.css
index 4c2bad0..b8fc02c 100644
--- a/src/bootstrap/_customizations.css
+++ b/src/bootstrap/_customizations.css
@@ -162,6 +162,44 @@ ul:not([class]) li {
   padding: 1rem;
 }
 
+/* Badges */
+.badge-translucent {
+  --btcpay-bg-opacity: .5;
+}
+.badge-translucent.text-bg-primary {
+  color: var(--btcpay-primary-accent);
+}
+.badge-translucent.text-bg-secondary {
+  color: var(--btcpay-secondary-accent);
+}
+.badge-translucent.text-bg-success {
+  color: var(--btcpay-success-accent);
+}
+.badge-translucent.text-bg-info {
+  color: var(--btcpay-info-accent);
+}
+.badge-translucent.text-bg-warning {
+  color: var(--btcpay-warning-accent);
+}
+.badge-translucent.text-bg-danger {
+  color: var(--btcpay-danger-accent);
+}
+.badge-translucent.text-bg-light {
+  color: var(--btcpay-dark-accent);
+}
+.badge-translucent.text-bg-dark {
+  color: var(--btcpay-light-accent);
+}
+.badge-translucent.text-bg-body {
+  color: var(--btcpay-body-accent);
+}
+.badge-translucent.text-bg-white {
+  color: var(--btcpay-black);
+}
+.badge-translucent.text-bg-black {
+  color: var(--btcpay-white);
+}
+
 /* Button */
 .btn-outline-secondary {
   --btcpay-btn-color: var(--btcpay-secondary-text);
diff --git a/src/components/bootstrap/variants/badges.html b/src/components/bootstrap/variants/badges.html
index 6990f66..67ec437 100644
--- a/src/components/bootstrap/variants/badges.html
+++ b/src/components/bootstrap/variants/badges.html
@@ -11,13 +11,23 @@
         </div>
 
         <div class="bd-example">
+        <span class="badge rounded-pill text-bg-primary">Primary</span>
+        <span class="badge rounded-pill text-bg-secondary">Secondary</span>
+        <span class="badge rounded-pill text-bg-success">Success</span>
+        <span class="badge rounded-pill text-bg-danger">Danger</span>
+        <span class="badge rounded-pill text-bg-warning">Warning</span>
+        <span class="badge rounded-pill text-bg-info">Info</span>
+        <span class="badge rounded-pill text-bg-light">Light</span>
+        <span class="badge rounded-pill text-bg-dark">Dark</span>
+        </div>
 
-        <span class="badge rounded-pill bg-primary">Primary</span>
-        <span class="badge rounded-pill bg-secondary">Secondary</span>
-        <span class="badge rounded-pill bg-success">Success</span>
-        <span class="badge rounded-pill bg-danger">Danger</span>
-        <span class="badge rounded-pill bg-warning">Warning</span>
-        <span class="badge rounded-pill bg-info">Info</span>
-        <span class="badge rounded-pill bg-light">Light</span>
-        <span class="badge rounded-pill bg-dark">Dark</span>
+        <div class="bd-example">
+        <span class="badge badge-translucent rounded-pill text-bg-primary">Primary</span>
+        <span class="badge badge-translucent rounded-pill text-bg-secondary">Secondary</span>
+        <span class="badge badge-translucent rounded-pill text-bg-success">Success</span>
+        <span class="badge badge-translucent rounded-pill text-bg-danger">Danger</span>
+        <span class="badge badge-translucent rounded-pill text-bg-warning">Warning</span>
+        <span class="badge badge-translucent rounded-pill text-bg-info">Info</span>
+        <span class="badge badge-translucent rounded-pill text-bg-light">Light</span>
+        <span class="badge badge-translucent rounded-pill text-bg-dark">Dark</span>
         </div>
diff --git a/src/static/styles/btcpayserver-bootstrap.css b/src/static/styles/btcpayserver-bootstrap.css
index d0ab8bd..e808398 100644
--- a/src/static/styles/btcpayserver-bootstrap.css
+++ b/src/static/styles/btcpayserver-bootstrap.css
@@ -12314,6 +12314,44 @@ ul:not([class]) li {
   padding: 1rem;
 }
 
+/* Badges */
+.badge-translucent {
+  --btcpay-bg-opacity: .5;
+}
+.badge-translucent.text-bg-primary {
+  color: var(--btcpay-primary-accent);
+}
+.badge-translucent.text-bg-secondary {
+  color: var(--btcpay-secondary-accent);
+}
+.badge-translucent.text-bg-success {
+  color: var(--btcpay-success-accent);
+}
+.badge-translucent.text-bg-info {
+  color: var(--btcpay-info-accent);
+}
+.badge-translucent.text-bg-warning {
+  color: var(--btcpay-warning-accent);
+}
+.badge-translucent.text-bg-danger {
+  color: var(--btcpay-danger-accent);
+}
+.badge-translucent.text-bg-light {
+  color: var(--btcpay-dark-accent);
+}
+.badge-translucent.text-bg-dark {
+  color: var(--btcpay-light-accent);
+}
+.badge-translucent.text-bg-body {
+  color: var(--btcpay-body-accent);
+}
+.badge-translucent.text-bg-white {
+  color: var(--btcpay-black);
+}
+.badge-translucent.text-bg-black {
+  color: var(--btcpay-white);
+}
+
 /* Button */
 .btn-outline-secondary {
   --btcpay-btn-color: var(--btcpay-secondary-text);
diff --git a/src/styles/variables/theme.css b/src/styles/variables/theme.css
index b05084d..837524a 100644
--- a/src/styles/variables/theme.css
+++ b/src/styles/variables/theme.css
@@ -89,7 +89,7 @@
   --btcpay-pre-bg: var(--btcpay-neutral-900);
 
   --btcpay-primary: var(--btcpay-brand-primary);
-  --btcpay-primary-accent: var(--btcpay-brand-tertiary);
+  --btcpay-primary-accent: var(--btcpay-primary-700);
   --btcpay-primary-text: var(--btcpay-white);
   --btcpay-primary-text-hover: var(--btcpay-white);
   --btcpay-primary-text-active: var(--btcpay-white);
@@ -112,7 +112,7 @@
   --btcpay-primary-rgb: 81, 177, 62;
 
   --btcpay-secondary: var(--btcpay-white);
-  --btcpay-secondary-accent: var(--btcpay-secondary);
+  --btcpay-secondary-accent: var(--btcpay-neutral-700);
   --btcpay-secondary-text: var(--btcpay-primary);
   --btcpay-secondary-text-hover: var(--btcpay-primary);
   --btcpay-secondary-text-active: var(--btcpay-brand-dark);