refactor(Circle): update sass file support dark theme (#2678)

dotnetcore · Dec 27, 2023 · 8c7a69f · 8c7a69f
1 parent 0e019ed
commit 8c7a69f
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 10 deletions.
diff --git a/src/BootstrapBlazor/Components/Circle/Circle.razor b/src/BootstrapBlazor/Components/Circle/Circle.razor
@@ -3,8 +3,8 @@
 
 <div @attributes="@AdditionalAttributes" class="@ClassString">
     <svg class="circle-outer" style="@PrevStyleString">
-        <circle r="@CircleR" cy="@CircleDiameter" cx="@CircleDiameter" stroke-width="2" stroke="#EAEFF4" stroke-linejoin="round" stroke-linecap="round" fill="none" />
-        <circle class="@ProgressClassString" r="@CircleR" cy="@CircleDiameter" cx="@CircleDiameter" stroke-dashoffset="@ValueString" stroke-dasharray="@DashString" stroke-width="@StrokeWidth" stroke="#1593FF" stroke-linejoin="round" stroke-linecap="round" fill="none" />
+        <circle class="circle-inner" r="@CircleR" cy="@CircleDiameter" cx="@CircleDiameter" />
+        <circle class="@ProgressClassString" r="@CircleR" cy="@CircleDiameter" cx="@CircleDiameter" stroke-dashoffset="@ValueString" stroke-dasharray="@DashString" stroke-width="@StrokeWidth" />
     </svg>
     <div class="circle-body">
         @if (ChildContent != null)

diff --git a/src/BootstrapBlazor/Components/Circle/Circle.razor.scss b/src/BootstrapBlazor/Components/Circle/Circle.razor.scss
@@ -1,38 +1,57 @@
-.circle {
+.circle {
+    --bb-circle-stroke-color: #{$bb-circle-stroke-color};
+    --bb-circle-stroke-width: #{$bb-circle-stroke-width};
+    --bb-circle-progress-stroke-color: #{$bb-circle-progress-stroke-color};
     display: inline-block;
     position: relative;
 }
 
+[data-bs-theme='dark'] .circle {
+    --bb-circle-stroke-color: #495057;
+}
+
+.circle-inner {
+    stroke: var(--bb-circle-stroke-color);
+    stroke-width: var(--bb-circle-stroke-width);
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    fill: none;
+}
+
 .circle-progress {
+    stroke: var(--bb-circle-progress-stroke-color);
+    stroke-linejoin: round;
+    stroke-linecap: round;
+    fill: none;
     transition: stroke-dashoffset .3s linear;
 }
 
 .circle-primary {
-    stroke: var(--bs-primary);
+    --bb-circle-progress-stroke-color: var(--bs-primary);
 }
 
 .circle-danger {
-    stroke: var(--bs-danger);
+    --bb-circle-progress-stroke-color: var(--bs-danger);
 }
 
 .circle-success {
-    stroke: var(--bs-success);
+    --bb-circle-progress-stroke-color: var(--bs-success);
 }
 
 .circle-warning {
-    stroke: var(--bs-warning);
+    --bb-circle-progress-stroke-color: var(--bs-warning);
 }
 
 .circle-info {
-    stroke: var(--bs-info);
+    --bb-circle-progress-stroke-color: var(--bs-info);
 }
 
 .circle-secondary {
-    stroke: var(--bs-secondary);
+    --bb-circle-progress-stroke-color: var(--bs-secondary);
 }
 
 .circle-dark {
-    stroke: var(--bs-dark);
+    --bb-circle-progress-stroke-color: var(--bs-dark);
 }
 
 .circle-body {

diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrap.blazor.scss
@@ -156,6 +156,11 @@ $bb-carousel-slide-border: solid 1px #e9ecef;
 $bb-carousel-slide-bg: rgba(31,45,61,.5);
 $bb-carousel-slide-color: #fff;
 
+// Circle
+$bb-circle-stroke-color: #e9ecef;
+$bb-circle-stroke-width: 2;
+$bb-circle-progress-stroke-color: #1593FF;
+
 // CheckBox
 $bb-checkbox-label-padding-y: 6px;
 $bb-checkbox-height: 1rem;