Design system updates (#5397)

BTCPayServer/Views/Shared/Shopify/NavExtension.cshtml

@@ -1,7 +1,5 @@
 @using BTCPayServer.Client
-@using Microsoft.AspNetCore.Mvc.TagHelpers
 @using BTCPayServer.Abstractions.Extensions
-@using BTCPayServer.Abstractions.TagHelpers
 @using BTCPayServer.Views.Stores
 @model BTCPayServer.Components.MainNav.MainNavViewModel
 @{
@@ -10,10 +8,9 @@
 
 @if (store != null)
 {
-
     <li class="nav-item" permission="@Policies.CanModifyStoreSettings">
         <a asp-area="" asp-controller="UIShopify" asp-action="EditShopify" asp-route-storeId="@store.Id" class="nav-link @ViewData.IsActivePage("shopify", nameof(StoreNavPages))" id="StoreNav-Shopify">
-            <vc:icon symbol="shopify" />
+            <vc:icon symbol="logo-shopify" />
             <span>Shopify</span>
         </a>
     </li>

BTCPayServer/Views/Shared/_Footer.cshtml

@@ -5,19 +5,19 @@
     <div class="d-flex flex-wrap flex-column justify-content-between flex-xl-row gap-3">
         <div class="d-flex flex-wrap justify-content-center justify-content-xl-start gap-4">
             <a href="https://github.com/btcpayserver/btcpayserver" target="_blank" rel="noreferrer noopener">
-                <vc:icon symbol="github"/>
+                <vc:icon symbol="social-github"/>
                 <span>Github</span>
             </a>
             <a href="https://chat.btcpayserver.org/" target="_blank" rel="noreferrer noopener">
-                <vc:icon symbol="mattermost"/>
+                <vc:icon symbol="social-mattermost"/>
                 <span>Mattermost</span>
             </a>
             <a href="https://twitter.com/BtcpayServer" target="_blank" rel="noreferrer noopener">
-                <vc:icon symbol="twitter"/>
+                <vc:icon symbol="social-twitter"/>
                 <span>Twitter</span>
             </a>
             <a href="https://t.me/btcpayserver" target="_blank" rel="noreferrer noopener">
-                <vc:icon symbol="telegram"/>
+                <vc:icon symbol="social-telegram"/>
                 <span>Telegram</span>
             </a>
             <a href="https://btcpayserver.org/donate/" target="_blank" rel="noreferrer noopener">

BTCPayServer/Views/UIServer/ListPlugins.cshtml

@@ -234,7 +234,7 @@
                                     {
                                         <li>
                                             <a href="@downloadInfo.Source" rel="noreferrer noopener" class="d-flex align-items-center" target="_blank">
-                                                <vc:icon symbol="github" />
+                                                <vc:icon symbol="social-github" />
                                                 <span style="margin-left:.4rem">Sources</span>
                                             </a>
                                         </li>
@@ -363,7 +363,7 @@
                                 {
                                     <li>
                                         <a href="@plugin.Source" rel="noreferrer noopener" class="d-flex align-items-center" target="_blank">
-                                            <vc:icon symbol="github" />
+                                            <vc:icon symbol="social-github" />
                                             <span style="margin-left:.4rem">Sources</span>
                                         </a>
                                     </li>

BTCPayServer/wwwroot/main/bootstrap/bootstrap.css

@@ -1,5 +1,5 @@
 /*!
-   * Bootstrap  v5.3.0 (https://getbootstrap.com/)
+   * Bootstrap  v5.3.2 (https://getbootstrap.com/)
    * Copyright 2011-2023 The Bootstrap Authors
    * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
    */
@@ -13,7 +13,6 @@
   --btcpay-body-font-size: 0.875rem;
   --btcpay-body-font-weight: var(--btcpay-font-weight-normal);
   --btcpay-body-line-height: 1.6;
-  --btcpay-body-color: var(--btcpay-body-text);
   --btcpay-secondary-bg: var(--btcpay-neutral-200);
   --btcpay-secondary-bg-rgb: 233, 236, 239;
   --btcpay-tertiary-color: rgba(var(--btcpay-dark-rgb), 0.5);
@@ -26,6 +25,7 @@
   --btcpay-body-link-accent-rgb: 10, 88, 202;
   --btcpay-link-hover-decoration: none;
   --btcpay-code-color: var(--btcpay-code-text);
+  --btcpay-highlight-color: var(--btcpay-dark);
   --btcpay-highlight-bg: #fff3cd;
   --btcpay-border-width: 1px;
   --btcpay-border-style: solid;
@@ -66,7 +66,7 @@ body {
   font-size: var(--btcpay-body-font-size);
   font-weight: var(--btcpay-body-font-weight);
   line-height: var(--btcpay-body-line-height);
-  color: var(--btcpay-body-color);
+  color: var(--btcpay-body-text);
   text-align: var(--btcpay-body-text-align);
   background-color: var(--btcpay-body-bg);
   -webkit-text-size-adjust: 100%;
@@ -199,6 +199,7 @@ small, .small {
 
 mark, .mark {
   padding: 0.1875em;
+  color: var(--btcpay-highlight-color);
   background-color: var(--btcpay-highlight-bg);
 }
 
@@ -425,8 +426,8 @@ legend + * {
 }
 
 [type="search"] {
-  outline-offset: -2px;
   -webkit-appearance: textfield;
+  outline-offset: -2px;
 }
 
 /* rtl:raw:
@@ -1761,7 +1762,7 @@ progress {
   --btcpay-table-bg-type: initial;
   --btcpay-table-color-state: initial;
   --btcpay-table-bg-state: initial;
-  --btcpay-table-color: var(--btcpay-body-color);
+  --btcpay-table-color: var(--btcpay-body-text);
   --btcpay-table-bg: transparent;
   --btcpay-table-border-color: var(--btcpay-border-color);
   --btcpay-table-accent-bg: transparent;
@@ -1844,7 +1845,7 @@ progress {
 .table-primary {
   --btcpay-table-color: var(--btcpay-primary-dim-text);
   --btcpay-table-bg: var(--btcpay-primary-dim-bg);
-  --btcpay-table-border-color: #bacbe6;
+  --btcpay-table-border-color: var(--btcpay-primary-dim-border);
   --btcpay-table-striped-bg: var(--btcpay-primary-dim-bg-striped);
   --btcpay-table-striped-color: var(--btcpay-primary-dim-text-striped);
   --btcpay-table-active-bg: var(--btcpay-primary-dim-bg-active);
@@ -1858,7 +1859,7 @@ progress {
 .table-secondary {
   --btcpay-table-color: var(--btcpay-secondary-dim-text);
   --btcpay-table-bg: var(--btcpay-secondary-dim-bg);
-  --btcpay-table-border-color: #cbccce;
+  --btcpay-table-border-color: var(--btcpay-secondary-dim-border);
   --btcpay-table-striped-bg: var(--btcpay-secondary-dim-bg-striped);
   --btcpay-table-striped-color: var(--btcpay-secondary-dim-text-striped);
   --btcpay-table-active-bg: var(--btcpay-secondary-dim-bg-active);
@@ -1872,7 +1873,7 @@ progress {
 .table-success {
   --btcpay-table-color: var(--btcpay-success-dim-text);
   --btcpay-table-bg: var(--btcpay-success-dim-bg);
-  --btcpay-table-border-color: #bcd0c7;
+  --btcpay-table-border-color: var(--btcpay-success-dim-border);
   --btcpay-table-striped-bg: var(--btcpay-success-dim-bg-striped);
   --btcpay-table-striped-color: var(--btcpay-success-dim-text-striped);
   --btcpay-table-active-bg: var(--btcpay-success-dim-bg-active);
@@ -1886,7 +1887,7 @@ progress {
 .table-info {
   --btcpay-table-color: var(--btcpay-info-dim-text);
   --btcpay-table-bg: var(--btcpay-info-dim-bg);
-  --btcpay-table-border-color: #badce3;
+  --btcpay-table-border-color: var(--btcpay-info-dim-border);
   --btcpay-table-striped-bg: var(--btcpay-info-dim-bg-striped);
   --btcpay-table-striped-color: var(--btcpay-info-dim-text-striped);
   --btcpay-table-active-bg: var(--btcpay-info-dim-bg-active);
@@ -1900,7 +1901,7 @@ progress {
 .table-warning {
   --btcpay-table-color: var(--btcpay-warning-dim-text);
   --btcpay-table-bg: var(--btcpay-warning-dim-bg);
-  --btcpay-table-border-color: #e6dbb9;
+  --btcpay-table-border-color: var(--btcpay-warning-dim-border);
   --btcpay-table-striped-bg: var(--btcpay-warning-dim-bg-striped);
   --btcpay-table-striped-color: var(--btcpay-warning-dim-text-striped);
   --btcpay-table-active-bg: var(--btcpay-warning-dim-bg-active);
@@ -1914,7 +1915,7 @@ progress {
 .table-danger {
   --btcpay-table-color: var(--btcpay-danger-dim-text);
   --btcpay-table-bg: var(--btcpay-danger-dim-bg);
-  --btcpay-table-border-color: #dfc2c4;
+  --btcpay-table-border-color: var(--btcpay-danger-dim-border);
   --btcpay-table-striped-bg: var(--btcpay-danger-dim-bg-striped);
   --btcpay-table-striped-color: var(--btcpay-danger-dim-text-striped);
   --btcpay-table-active-bg: var(--btcpay-danger-dim-bg-active);
@@ -1928,7 +1929,7 @@ progress {
 .table-light {
   --btcpay-table-color: var(--btcpay-light-dim-text);
   --btcpay-table-bg: var(--btcpay-light-dim-bg);
-  --btcpay-table-border-color: #dfe0e1;
+  --btcpay-table-border-color: var(--btcpay-light-border-hover);
   --btcpay-table-striped-bg: var(--btcpay-light-dim-bg-striped);
   --btcpay-table-striped-color: var(--btcpay-light-dim-text-striped);
   --btcpay-table-active-bg: var(--btcpay-light-dim-bg-active);
@@ -1942,7 +1943,7 @@ progress {
 .table-dark {
   --btcpay-table-color: var(--btcpay-dark-dim-text);
   --btcpay-table-bg: var(--btcpay-dark-dim-bg);
-  --btcpay-table-border-color: var(--btcpay-dark-border-hover);
+  --btcpay-table-border-color: var(--btcpay-dark-dim-border);
   --btcpay-table-striped-bg: var(--btcpay-dark-dim-bg-striped);
   --btcpay-table-striped-color: var(--btcpay-dark-dim-text-striped);
   --btcpay-table-active-bg: var(--btcpay-dark-dim-bg-active);
@@ -2033,12 +2034,12 @@ progress {
   font-weight: var(--btcpay-font-weight-normal);
   line-height: 1.6;
   color: var(--btcpay-form-text);
-  background-color: var(--btcpay-form-bg);
-  background-clip: padding-box;
-  border: var(--btcpay-border-width) solid var(--btcpay-form-border);
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  background-color: var(--btcpay-form-bg);
+  background-clip: padding-box;
+  border: var(--btcpay-border-width) solid var(--btcpay-form-border);
   border-radius: var(--btcpay-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 }
@@ -2133,7 +2134,7 @@ progress {
   padding: 0.5rem 0;
   margin-bottom: 0;
   line-height: 1.6;
-  color: var(--btcpay-body-color);
+  color: var(--btcpay-body-text);
   background-color: transparent;
   border: solid transparent;
   border-width: var(--btcpay-border-width) 0;
@@ -2239,6 +2240,9 @@ textarea.form-control-lg {
   font-weight: var(--btcpay-font-weight-normal);
   line-height: 1.6;
   color: var(--btcpay-form-text);
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background-color: var(--btcpay-form-bg);
   background-image: var(--btcpay-form-select-bg-img), var(--btcpay-form-select-bg-icon, none);
   background-repeat: no-repeat;
@@ -2247,9 +2251,6 @@ textarea.form-control-lg {
   border: var(--btcpay-border-width) solid var(--btcpay-form-border);
   border-radius: var(--btcpay-border-radius);
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
 }
 
 .form-select:focus {
@@ -2315,19 +2316,20 @@ textarea.form-control-lg {
 
 .form-check-input {
   --btcpay-form-check-bg: transparent;
+  flex-shrink: 0;
   width: 1.25em;
   height: 1.25em;
   margin-top: 0.175em;
   vertical-align: top;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
   background-color: var(--btcpay-form-check-bg);
   background-image: var(--btcpay-form-check-bg-image);
   background-repeat: no-repeat;
   background-position: center;
   background-size: contain;
   border: 2px solid var(--btcpay-form-border-check);
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
   -webkit-print-color-adjust: exact;
      color-adjust: exact;
           print-color-adjust: exact;
@@ -2435,10 +2437,10 @@ textarea.form-control-lg {
   width: 100%;
   height: calc(1rem + 4px);
   padding: 0;
-  background-color: transparent;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
+  background-color: transparent;
 }
 
 .form-range:focus {
@@ -2461,13 +2463,13 @@ textarea.form-control-lg {
   width: 1rem;
   height: 1rem;
   margin-top: -0.25rem;
+  -webkit-appearance: none;
+          appearance: none;
   background-color: var(--btcpay-primary);
   border: 0;
   border-radius: 1rem;
   -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -webkit-appearance: none;
-          appearance: none;
 }
 
 .form-range::-webkit-slider-thumb:active {
@@ -2487,13 +2489,13 @@ textarea.form-control-lg {
 .form-range::-moz-range-thumb {
   width: 1rem;
   height: 1rem;
+  -moz-appearance: none;
+       appearance: none;
   background-color: var(--btcpay-primary);
   border: 0;
   border-radius: 1rem;
   -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  -moz-appearance: none;
-       appearance: none;
 }
 
 .form-range::-moz-range-thumb:active {
@@ -2633,11 +2635,13 @@ textarea.form-control-lg {
   border-width: var(--btcpay-border-width) 0;
 }
 
-.form-floating > :disabled ~ label {
+.form-floating > :disabled ~ label,
+.form-floating > .form-control:disabled ~ label {
   color: var(--btcpay-secondary);
 }
 
-.form-floating > :disabled ~ label::after {
+.form-floating > :disabled ~ label::after,
+.form-floating > .form-control:disabled ~ label::after {
   background-color: var(--btcpay-form-bg-disabled);
 }
 
@@ -2938,7 +2942,7 @@ textarea.form-control-lg {
   --btcpay-btn-font-size: 0.875rem;
   --btcpay-btn-font-weight: var(--btcpay-font-weight-semibold);
   --btcpay-btn-line-height: 1.6;
-  --btcpay-btn-color: var(--btcpay-body-color);
+  --btcpay-btn-color: var(--btcpay-body-text);
   --btcpay-btn-bg: transparent;
   --btcpay-btn-border-width: var(--btcpay-border-width);
   --btcpay-btn-border-color: transparent;
@@ -3394,7 +3398,7 @@ fieldset:disabled .btn {
   --btcpay-dropdown-inner-border-radius: calc(var(--btcpay-border-radius) - var(--btcpay-border-width));
   --btcpay-dropdown-divider-bg: var(--btcpay-body-border-medium);
   --btcpay-dropdown-divider-margin-y: 0.5rem;
-  --btcpay-dropdown-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
+  --btcpay-dropdown-box-shadow: var(--btcpay-box-shadow);
   --btcpay-dropdown-link-color: var(--btcpay-body-text);
   --btcpay-dropdown-link-hover-color: var(--btcpay-body-text);
   --btcpay-dropdown-link-hover-bg: var(--btcpay-body-bg-hover);
@@ -3838,7 +3842,7 @@ fieldset:disabled .btn {
   box-shadow: 0 0 0 0.25rem rgba(var(--btcpay-primary-rgb), 0.25);
 }
 
-.nav-link.disabled {
+.nav-link.disabled, .nav-link:disabled {
   color: var(--btcpay-nav-link-disabled-color);
   pointer-events: none;
   cursor: default;
@@ -3867,12 +3871,6 @@ fieldset:disabled .btn {
   border-color: var(--btcpay-nav-tabs-link-hover-border-color);
 }
 
-.nav-tabs .nav-link.disabled, .nav-tabs .nav-link:disabled {
-  color: var(--btcpay-nav-link-disabled-color);
-  background-color: transparent;
-  border-color: transparent;
-}
-
 .nav-tabs .nav-link.active,
 .nav-tabs .nav-item.show .nav-link {
   color: var(--btcpay-nav-tabs-link-active-color);
@@ -3896,12 +3894,6 @@ fieldset:disabled .btn {
   border-radius: var(--btcpay-nav-pills-border-radius);
 }
 
-.nav-pills .nav-link:disabled {
-  color: var(--btcpay-nav-link-disabled-color);
-  background-color: transparent;
-  border-color: transparent;
-}
-
 .nav-pills .nav-link.active,
 .nav-pills .show > .nav-link {
   color: var(--btcpay-nav-pills-link-active-color);
@@ -4417,7 +4409,7 @@ fieldset:disabled .btn {
   flex-direction: column;
   min-width: 0;
   height: var(--btcpay-card-height);
-  color: var(--btcpay-body-color);
+  color: var(--btcpay-body-text);
   word-wrap: break-word;
   background-color: var(--btcpay-card-bg);
   background-clip: border-box;
@@ -4589,7 +4581,7 @@ fieldset:disabled .btn {
 }
 
 .accordion {
-  --btcpay-accordion-color: var(--btcpay-body-color);
+  --btcpay-accordion-color: var(--btcpay-body-text);
   --btcpay-accordion-bg: transparent;
   --btcpay-accordion-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
   --btcpay-accordion-border-color: transparent;
@@ -5525,7 +5517,7 @@ fieldset:disabled .btn {
   --btcpay-modal-border-color: var(--btcpay-border-color);
   --btcpay-modal-border-width: var(--btcpay-border-width);
   --btcpay-modal-border-radius: var(--btcpay-border-radius-lg);
-  --btcpay-modal-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+  --btcpay-modal-box-shadow: var(--btcpay-box-shadow-sm);
   --btcpay-modal-inner-border-radius: calc(var(--btcpay-border-radius-lg) - (var(--btcpay-border-width)));
   --btcpay-modal-header-padding-x: 1rem;
   --btcpay-modal-header-padding-y: 1rem;
@@ -5670,7 +5662,7 @@ fieldset:disabled .btn {
 @media (min-width: 576px) {
   .modal {
     --btcpay-modal-margin: 1.75rem;
-    --btcpay-modal-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
+    --btcpay-modal-box-shadow: var(--btcpay-box-shadow);
   }
   .modal-dialog {
     max-width: var(--btcpay-modal-width);
@@ -5940,7 +5932,7 @@ fieldset:disabled .btn {
   --btcpay-popover-border-color: var(--btcpay-body-border-medium);
   --btcpay-popover-border-radius: var(--btcpay-border-radius-lg);
   --btcpay-popover-inner-border-radius: calc(var(--btcpay-border-radius-lg) - var(--btcpay-border-width));
-  --btcpay-popover-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
+  --btcpay-popover-box-shadow: var(--btcpay-box-shadow);
   --btcpay-popover-header-padding-x: 1rem;
   --btcpay-popover-header-padding-y: 0.5rem;
   --btcpay-popover-header-font-size: 0.875rem;
@@ -5948,7 +5940,7 @@ fieldset:disabled .btn {
   --btcpay-popover-header-bg: var(--btcpay-bg-tile);
   --btcpay-popover-body-padding-x: 1rem;
   --btcpay-popover-body-padding-y: 1rem;
-  --btcpay-popover-body-color: var(--btcpay-body-color);
+  --btcpay-popover-body-color: var(--btcpay-body-text);
   --btcpay-popover-arrow-width: 1rem;
   --btcpay-popover-arrow-height: 0.5rem;
   --btcpay-popover-arrow-border: var(--btcpay-popover-border-color);
@@ -6357,7 +6349,7 @@ fieldset:disabled .btn {
   --btcpay-offcanvas-height: auto;
   --btcpay-offcanvas-padding-x: 0;
   --btcpay-offcanvas-padding-y: 0.5rem;
-  --btcpay-offcanvas-color: var(--btcpay-body-color);
+  --btcpay-offcanvas-color: var(--btcpay-body-text);
   --btcpay-offcanvas-bg: var(--btcpay-bg-tile);
   --btcpay-offcanvas-border-width: var(--btcpay-border-width);
   --btcpay-offcanvas-border-color: var(--btcpay-border-color);
@@ -7250,7 +7242,7 @@ fieldset:disabled .btn {
 .vr {
   display: inline-block;
   align-self: stretch;
-  width: 1px;
+  width: var(--btcpay-border-width);
   min-height: 1em;
   background-color: currentcolor;
   opacity: 0.25;
@@ -7430,15 +7422,15 @@ fieldset:disabled .btn {
 }
 
 .shadow {
-  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05) !important;
+  box-shadow: var(--btcpay-box-shadow) !important;
 }
 
 .shadow-sm {
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
+  box-shadow: var(--btcpay-box-shadow-sm) !important;
 }
 
 .shadow-lg {
-  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
+  box-shadow: var(--btcpay-box-shadow-lg) !important;
 }
 
 .shadow-none {