feat(Calendar): update today cell style (#7381)

* style: 调整选中样式

* refactor: 重构代码

* refactor: 移除过期属性

* style: 更新样式

* refactor: 更新当日样式

* refactor: 更新代码

Author: ArgoZhang

src/BootstrapBlazor/Components/Calendar/Calendar.razor

@@ -1,4 +1,4 @@
-@namespace BootstrapBlazor.Components
+@namespace BootstrapBlazor.Components
 @inherits BootstrapComponentBase
 
 <div @attributes="AdditionalAttributes" class="@ClassString">
@@ -33,7 +33,7 @@
             </div>
         </div>
         <div class="calendar-body">
-            <table cellspacing="0" cellpadding="0" class="calendar-table">
+            <table class="calendar-table">
                 <thead>
                     @if (HeaderTemplate != null)
                     {
@@ -97,7 +97,7 @@
             </div>
         </div>
         <div class="calendar-body">
-            <table cellspacing="0" cellpadding="0" class="calendar-table table-week">
+            <table class="calendar-table table-week">
                 <thead>
                     @if (HeaderTemplate != null)
                     {

src/BootstrapBlazor/Components/Calendar/Calendar.razor.cs

@@ -1,4 +1,4 @@
-// Licensed to the .NET Foundation under one or more agreements.
+// Licensed to the .NET Foundation under one or more agreements.
 // The .NET Foundation licenses this file to you under the Apache 2.0 License
 // See the LICENSE file in the project root for more information.
 // Maintainer: Argo Zhang(argo@live.ca) Website: https://www.blazor.zone
@@ -9,7 +9,7 @@
 namespace BootstrapBlazor.Components;
 
 /// <summary>
-/// 
+/// 日历框组件
 /// </summary>
 public partial class Calendar
 {
@@ -243,14 +243,7 @@ protected async Task OnChangeYear(int offset)
     /// <param name="offset"></param>
     protected async Task OnChangeMonth(int offset)
     {
-        if (offset == 0)
-        {
-            Value = DateTime.Today;
-        }
-        else
-        {
-            Value = Value.AddMonths(offset);
-        }
+        Value = offset == 0 ? DateTime.Today : Value.AddMonths(offset);
         if (ValueChanged.HasDelegate)
         {
             await ValueChanged.InvokeAsync(Value);
@@ -267,14 +260,7 @@ protected async Task OnChangeMonth(int offset)
     /// <param name="offset"></param>
     protected async Task OnChangeWeek(int offset)
     {
-        if (offset == 0)
-        {
-            Value = DateTime.Today;
-        }
-        else
-        {
-            Value = Value.AddDays(offset);
-        }
+        Value = offset == 0 ? DateTime.Today : Value.AddDays(offset);
         WeekNumberText = Localizer[nameof(WeekNumberText), GetWeekCount()];
         if (ValueChanged.HasDelegate)
         {

src/BootstrapBlazor/Components/Calendar/Calendar.razor.scss

@@ -1,4 +1,8 @@
-@use "../../wwwroot/scss/variables" as *;
+@use "../../wwwroot/scss/variables" as *;
+
+[data-bs-theme='dark'] .calendar {
+    --bb-calendar-selected-bg: #{$bb-calendar-selected-bg-dark};
+}
 
 .calendar {
     --bb-calendar-padding: #{$bb-calendar-padding};
@@ -21,6 +25,7 @@
     --bb-calendar-cell-hover-bg: #{$bb-calendar-cell-hover-bg};
     --bb-calendar-header-padding: #{$bb-calendar-header-padding};
     --bb-calendar-today-color: #{$bb-calendar-today-color};
+    --bb-calendar-today-border-color: #{$bb-calendar-today-border-color};
     --bb-calendar-selected-color: #{$bb-calendar-selected-color};
     --bb-calendar-selected-bg: #{$bb-calendar-selected-bg};
     --bb-calendar-week-header-border-bottom: #{$bb-calendar-week-header-border-bottom};
@@ -111,6 +116,26 @@
 
                 &.is-today {
                     color: var(--bb-calendar-today-color);
+
+                    span {
+                        position: relative;
+
+                        &::after {
+                            position: absolute;
+                            width: 2rem;
+                            height: 2rem;
+                            top: -6px;
+                            left: -8px;
+                            border-radius: 50%;
+                            border: 1px solid var(--bb-calendar-today-border-color);
+                        }
+                    }
+
+                    &:not(.is-selected) {
+                        span::after {
+                            content: "";
+                        }
+                    }
                 }
 
                 &.is-selected {

src/BootstrapBlazor/wwwroot/scss/variables.scss

@@ -1,4 +1,4 @@
-// :root
+// :root
 $bb-primary-color: #409eff;
 $bb-primary-color-rgb: 64, 158, 255;
 $bb-border-focus-color: #86b7fe;
@@ -114,8 +114,10 @@ $bb-calendar-cell-height: 85px;
 $bb-calendar-cell-hover-bg: rgba(var(--bs-body-color-rgb),.08);
 $bb-calendar-header-padding: 12px 0;
 $bb-calendar-today-color: #409eff;
-$bb-calendar-selected-color: #409eff;
-$bb-calendar-selected-bg: rgba(var(--bs-body-color-rgb),.12);
+$bb-calendar-selected-color: #fff;
+$bb-calendar-selected-bg: #409eff;
+$bb-calendar-selected-bg-dark: #15325b;
+$bb-calendar-today-border-color: #0078d4;
 $bb-calendar-week-header-border-bottom: 2px solid var(--bs-border-color);
 $bb-calendar-week-header-min-width: 52px;
 $bb-calendar-week-header-padding: 4px;