Add translucent badge option

btcpayserver · Feb 7, 2024 · 186e218 · 186e218
1 parent 50fd6ef
commit 186e218
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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);