deploy: a7a6827

btcpayserver · Jun 26, 2024 · c3af684 · c3af684
1 parent e205c0f
commit c3af684
Show file tree

Hide file tree

Showing 10 changed files with 112 additions and 43 deletions.
diff --git a/_sketch/dark.html b/_sketch/dark.html
@@ -1498,15 +1498,25 @@ <h3>Badges</h3>
         </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>
     </div>
   </article>

diff --git a/_sketch/light.html b/_sketch/light.html
@@ -1498,15 +1498,25 @@ <h3>Badges</h3>
         </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>
     </div>
   </article>

diff --git a/_state.json b/_state.json
@@ -2,7 +2,7 @@
   "config": {
     "name": "BTCPay Server Design System",
     "version": "0.1.0",
-    "update": 1718692942239,
+    "update": 1719427589218,
     "logo": "/resources/design-files/btcpay-logo.svg",
     "source": {
       "components": [
@@ -2650,7 +2650,7 @@
           "componentId": "bootstrap",
           "title": "Badges",
           "extension": "html",
-          "raw": "<div class=\"bd-example\">\n        <p class=\"h1\">Example heading <span class=\"badge bg-primary\">New</span></p>\n        <p class=\"h2\">Example heading <span class=\"badge bg-secondary\">New</span></p>\n        <p class=\"h3\">Example heading <span class=\"badge bg-success\">New</span></p>\n        <p class=\"h4\">Example heading <span class=\"badge bg-danger\">New</span></p>\n        <p class=\"h5\">Example heading <span class=\"badge bg-warning\">New</span></p>\n        <p class=\"h6\">Example heading <span class=\"badge bg-info\">New</span></p>\n        <p class=\"h6\">Example heading <span class=\"badge bg-light\">New</span></p>\n        <p class=\"h6\">Example heading <span class=\"badge bg-dark\">New</span></p>\n        </div>\n\n        <div class=\"bd-example\">\n\n        <span class=\"badge rounded-pill bg-primary\">Primary</span>\n        <span class=\"badge rounded-pill bg-secondary\">Secondary</span>\n        <span class=\"badge rounded-pill bg-success\">Success</span>\n        <span class=\"badge rounded-pill bg-danger\">Danger</span>\n        <span class=\"badge rounded-pill bg-warning\">Warning</span>\n        <span class=\"badge rounded-pill bg-info\">Info</span>\n        <span class=\"badge rounded-pill bg-light\">Light</span>\n        <span class=\"badge rounded-pill bg-dark\">Dark</span>\n        </div>"
+          "raw": "<div class=\"bd-example\">\n        <p class=\"h1\">Example heading <span class=\"badge bg-primary\">New</span></p>\n        <p class=\"h2\">Example heading <span class=\"badge bg-secondary\">New</span></p>\n        <p class=\"h3\">Example heading <span class=\"badge bg-success\">New</span></p>\n        <p class=\"h4\">Example heading <span class=\"badge bg-danger\">New</span></p>\n        <p class=\"h5\">Example heading <span class=\"badge bg-warning\">New</span></p>\n        <p class=\"h6\">Example heading <span class=\"badge bg-info\">New</span></p>\n        <p class=\"h6\">Example heading <span class=\"badge bg-light\">New</span></p>\n        <p class=\"h6\">Example heading <span class=\"badge bg-dark\">New</span></p>\n        </div>\n\n        <div class=\"bd-example\">\n        <span class=\"badge rounded-pill text-bg-primary\">Primary</span>\n        <!--<span class=\"badge rounded-pill text-bg-secondary\">Secondary</span>-->\n        <span class=\"badge rounded-pill text-bg-success\">Success</span>\n        <span class=\"badge rounded-pill text-bg-danger\">Danger</span>\n        <span class=\"badge rounded-pill text-bg-warning\">Warning</span>\n        <span class=\"badge rounded-pill text-bg-info\">Info</span>\n        <!--<span class=\"badge rounded-pill text-bg-light\">Light</span>-->\n        <!--<span class=\"badge rounded-pill text-bg-dark\">Dark</span>-->\n        </div>\n\n        <div class=\"bd-example\">\n        <span class=\"badge badge-translucent rounded-pill text-bg-primary\">Primary</span>\n        <!--<span class=\"badge badge-translucent rounded-pill text-bg-secondary\">Secondary</span>-->\n        <span class=\"badge badge-translucent rounded-pill text-bg-success\">Success</span>\n        <span class=\"badge badge-translucent rounded-pill text-bg-danger\">Danger</span>\n        <span class=\"badge badge-translucent rounded-pill text-bg-warning\">Warning</span>\n        <span class=\"badge badge-translucent rounded-pill text-bg-info\">Info</span>\n        <!--<span class=\"badge badge-translucent rounded-pill text-bg-light\">Light</span>-->\n        <!--<span class=\"badge badge-translucent rounded-pill text-bg-dark\">Dark</span>-->\n        </div>"
         },
         {
           "file": "buttons.html",

diff --git a/_variants/dark/bootstrap/badges.html-8.html b/_variants/dark/bootstrap/badges.html-8.html
@@ -24,15 +24,25 @@
         </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>
 
     <link href="/styles/patternlib-overrides.css" rel="stylesheet">

diff --git a/_variants/light/bootstrap/badges.html-8.html b/_variants/light/bootstrap/badges.html-8.html
@@ -24,15 +24,25 @@
         </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>
 
     <link href="/styles/patternlib-overrides.css" rel="stylesheet">

diff --git a/index.html b/index.html
diff --git a/styles/btcpayserver-bootstrap.css b/styles/btcpayserver-bootstrap.css
@@ -12266,11 +12266,9 @@ ul:not([class]) li {
 }
 
 .accordion-button .icon {
-  flex-shrink: 0;
-  width: 24px;
-  height: 24px;
+  --icon-size: 1.5rem;
   margin-left: auto;
-  transition: transform 0.2s ease-in-out;
+  transition: transform var(--btcpay-transition-duration-fast) ease-in-out;
 }
 
 .accordion-button:not(.collapsed) .icon {
@@ -12306,6 +12304,37 @@ ul:not([class]) li {
   padding: 1rem;
 }
 
+/* Badges */
+.badge-translucent {
+  --btcpay-bg-opacity: .25;
+}
+.badge-translucent.text-bg-primary {
+  --btcpay-primary-text: var(--btcpay-primary);
+}
+.badge-translucent.text-bg-secondary {
+  --btcpay-secondary-text: var(--btcpay-neutral-light-900);
+  --btcpay-secondary-rgb: 248, 249, 250;
+}
+.badge-translucent.text-bg-success {
+  --btcpay-success-text: var(--btcpay-success);
+}
+.badge-translucent.text-bg-info {
+  --btcpay-info-text: var(--btcpay-info);
+}
+.badge-translucent.text-bg-warning {
+  --btcpay-warning-text: var(--btcpay-yellow-600);
+}
+.badge-translucent.text-bg-danger {
+  --btcpay-danger-text: var(--btcpay-danger);
+}
+.badge-translucent.text-bg-light {
+  --btcpay-light-text: var(--btcpay-neutral-800);
+  --btcpay-bg-opacity: .75;
+}
+.badge-translucent.text-bg-dark {
+  --btcpay-dark-text: var(--btcpay-white);
+}
+
 /* Icons */
 .icon {
     display: inline-block;

diff --git a/styles/btcpayserver-bootstrap.min.css b/styles/btcpayserver-bootstrap.min.css
diff --git a/styles/btcpayserver-variables.css b/styles/btcpayserver-variables.css
@@ -254,7 +254,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);
@@ -277,7 +277,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);

diff --git a/styles/btcpayserver-variables.min.css b/styles/btcpayserver-variables.min.css