From 3e58f02c2b258c06e3ed991f40be0cfcba26eff4 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Sun, 24 Dec 2023 21:12:50 +0800
Subject: [PATCH] refactor(Step): support dark theme (#2663)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* doc: 更新 Step 示例

* refactor: 更新 Cascade 二级菜单颜色

* refactor: 更新 required 颜色

* refactor(IpAddress): 更新背景色

* doc: 更新拷贝按钮样式

* doc: 更新示例代码块过渡动画
---
 .../Components/Components/DemoBlock.razor.css               | 2 +-
 src/BootstrapBlazor.Server/Components/Components/Pre.razor  | 6 +++---
 .../Components/Samples/Steps.razor.css                      | 2 --
 src/BootstrapBlazor.Server/wwwroot/css/site.css             | 4 ++--
 .../Components/IpAddress/IpAddress.razor.scss               | 1 +
 src/BootstrapBlazor/Components/Menu/Menu.razor.scss         | 1 +
 .../Components/ValidateForm/ValidateForm.razor.scss         | 2 +-
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css
index 293f98bdd1c..a22d62f8d5d 100644
--- a/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Components/DemoBlock.razor.css
@@ -1,5 +1,5 @@
 .card {
-    transition: all .3s linear;
+    transition: box-shadow .3s linear;
 }
 
     .card:hover {
diff --git a/src/BootstrapBlazor.Server/Components/Components/Pre.razor b/src/BootstrapBlazor.Server/Components/Components/Pre.razor
index bab9cb60dbd..cedc4817b4b 100644
--- a/src/BootstrapBlazor.Server/Components/Components/Pre.razor
+++ b/src/BootstrapBlazor.Server/Components/Components/Pre.razor
@@ -11,11 +11,11 @@
             @if (ShowToolbar)
             {
                 <div class="btn-group">
-                    <Button TooltipPlacement="Placement.Top" TooltipText="@PlusTooltipTitle" TooltipTrigger="hover" Icon="fa-solid fa-plus" class="btn-plus"></Button>
-                    <Button TooltipPlacement="Placement.Top" TooltipText="@MinusTooltipTitle" TooltipTrigger="hover" Icon="fa-solid fa-minus" class="btn-minus"></Button>
+                    <Button TooltipPlacement="Placement.Top" TooltipText="@PlusTooltipTitle" TooltipTrigger="hover" Icon="fa-solid fa-plus" class="btn-code btn-plus"></Button>
+                    <Button TooltipPlacement="Placement.Top" TooltipText="@MinusTooltipTitle" TooltipTrigger="hover" Icon="fa-solid fa-minus" class="btn-code btn-minus"></Button>
                 </div>
             }
-            <Button TooltipPlacement="Placement.Top" TooltipText="@TooltipTitle" TooltipTrigger="hover" class="btn-copy">Copy</Button>
+            <Button TooltipPlacement="Placement.Top" TooltipText="@TooltipTitle" TooltipTrigger="hover" class="btn-code btn-copy">Copy</Button>
         }
     }
 </div>
diff --git a/src/BootstrapBlazor.Server/Components/Samples/Steps.razor.css b/src/BootstrapBlazor.Server/Components/Samples/Steps.razor.css
index c7cf621b455..1f27a835f4f 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Steps.razor.css
+++ b/src/BootstrapBlazor.Server/Components/Samples/Steps.razor.css
@@ -1,6 +1,4 @@
 .step-demo ::deep .step {
-    --step-item-color: #ccc;
-    background-color: #f8f9fa;
     padding: 0 1rem;
     border-radius: var(--bs-border-radius);
     border: var(--bs-border-width) solid var(--bs-border-color);
diff --git a/src/BootstrapBlazor.Server/wwwroot/css/site.css b/src/BootstrapBlazor.Server/wwwroot/css/site.css
index c667356ed9c..6033a41c1b3 100644
--- a/src/BootstrapBlazor.Server/wwwroot/css/site.css
+++ b/src/BootstrapBlazor.Server/wwwroot/css/site.css
@@ -193,7 +193,7 @@ code {
     background-color: rgba(var(--bs-emphasis-color-rgb),.1);
 }
 
-.btn-copy {
+.btn-code {
     position: absolute;
     top: .65rem;
     right: 1.5rem;
@@ -204,7 +204,7 @@ code {
     --bs-btn-padding-x: .5rem;
 }
 
-[data-bs-theme='dark'] .btn-copy {
+[data-bs-theme='dark'] .btn-code {
     --bs-btn-bg: rgba(255, 255, 255, 0.12);
     --bs-btn-color: rgba(255, 255, 255, 0.45);
     --bs-btn-border-color: #606266;
diff --git a/src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.scss b/src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.scss
index 74aff3874e2..3aa01a9e514 100644
--- a/src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.scss
+++ b/src/BootstrapBlazor/Components/IpAddress/IpAddress.razor.scss
@@ -9,6 +9,7 @@
     }
 
     .ipv4-cell {
+        background-color: var(--bs-body-bg);
         border: none;
         max-width: var(--bb-ip-cell-max-width);
         text-align: right;
diff --git a/src/BootstrapBlazor/Components/Menu/Menu.razor.scss b/src/BootstrapBlazor/Components/Menu/Menu.razor.scss
index 4960f0d0755..64359550f24 100644
--- a/src/BootstrapBlazor/Components/Menu/Menu.razor.scss
+++ b/src/BootstrapBlazor/Components/Menu/Menu.razor.scss
@@ -36,6 +36,7 @@
 
 .menu .nav .nav-link,
 .cascade .dropdown-item {
+    --bs-nav-link-color: var(--bs-body-color);
     padding: 0.5rem 1rem;
     user-select: none;
     white-space: nowrap;
diff --git a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.scss b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.scss
index 552e50a8293..3c0078f3c7b 100644
--- a/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.scss
+++ b/src/BootstrapBlazor/Components/ValidateForm/ValidateForm.razor.scss
@@ -14,7 +14,7 @@ form {
 
     .form-label[required]:before {
         content: "*";
-        color: red;
+        color: var(--bs-danger);
     }
 }