feat(blazorui): rename Accent to Background in BitSearchBox #11184 (#11194)

Author: msynk

src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.razor.cs

@@ -25,13 +25,13 @@ public partial class BitSearchBox : BitTextInputBase<string?>
 
 
     /// <summary>
-    /// The accent color kind of the search box.
+    /// The background color kind of the search box.
     /// </summary>
     [Parameter, ResetClassBuilder]
-    public BitColorKind? Accent { get; set; }
+    public BitColorKind? Background { get; set; }
 
     /// <summary>
-    /// Custom CSS classes for different parts of the BitSearchBox.
+    /// Custom CSS classes for different parts of the search box.
     /// </summary>
     [Parameter] public BitSearchBoxClassStyles? Classes { get; set; }
 
@@ -47,7 +47,7 @@ public partial class BitSearchBox : BitTextInputBase<string?>
     public BitColor? Color { get; set; }
 
     /// <summary>
-    /// The default value of the text in the SearchBox, in the case of an uncontrolled component.
+    /// The default value of the text in the search box, in the case of an uncontrolled component.
     /// </summary>
     [Parameter] public string? DefaultValue { get; set; }
 
@@ -70,7 +70,7 @@ public partial class BitSearchBox : BitTextInputBase<string?>
     public bool HideIcon { get; set; }
 
     /// <summary>
-    /// Whether to hide the clear button when the BitSearchBox has value.
+    /// Whether to hide the clear button when the search box has value.
     /// </summary>
     [Parameter] public bool HideClearButton { get; set; }
 
@@ -128,12 +128,12 @@ public partial class BitSearchBox : BitTextInputBase<string?>
     [Parameter] public string? Placeholder { get; set; }
 
     /// <summary>
-    /// Prefix text displayed before the searchbox input. This is not included in the value.
+    /// Prefix text displayed before the search box input. This is not included in the value.
     /// </summary>
     [Parameter] public string? Prefix { get; set; }
 
     /// <summary>
-    /// The custom template for the prefix of the searchbox.
+    /// The custom template for the prefix of the search box.
     /// </summary>
     [Parameter] public RenderFragment? PrefixTemplate { get; set; }
 
@@ -154,17 +154,17 @@ public partial class BitSearchBox : BitTextInputBase<string?>
     public bool ShowSearchButton { get; set; }
 
     /// <summary>
-    /// Custom CSS styles for different parts of the BitSearchBox.
+    /// Custom CSS styles for different parts of the search box.
     /// </summary>
     [Parameter] public BitSearchBoxClassStyles? Styles { get; set; }
 
     /// <summary>
-    /// Suffix text displayed after the searchbox input. This is not included in the value. 
+    /// Suffix text displayed after the search box input. This is not included in the value. 
     /// </summary>
     [Parameter] public string? Suffix { get; set; }
 
     /// <summary>
-    /// The custom template for the suffix of the searchbox.
+    /// The custom template for the suffix of the search box.
     /// </summary>
     [Parameter] public RenderFragment? SuffixTemplate { get; set; }
 
@@ -184,12 +184,12 @@ public partial class BitSearchBox : BitTextInputBase<string?>
     [Parameter] public BitSearchBoxSuggestItemsProvider? SuggestItemsProvider { get; set; }
 
     /// <summary>
-    /// The custom template for rendering the suggest items of the BitSearchBox.
+    /// The custom template for rendering the suggest items of the search box.
     /// </summary>
     [Parameter] public RenderFragment<string>? SuggestItemTemplate { get; set; }
 
     /// <summary>
-    /// Whether or not the SearchBox is underlined.
+    /// Whether or not the search box is underlined.
     /// </summary>
     [Parameter, ResetClassBuilder]
     public bool Underlined { get; set; }
@@ -240,13 +240,13 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => NoBorder ? "bit-srb-nbr" : string.Empty);
 
-        ClassBuilder.Register(() => Accent switch
+        ClassBuilder.Register(() => Background switch
         {
-            BitColorKind.Primary => "bit-srb-apri",
-            BitColorKind.Secondary => "bit-srb-asec",
-            BitColorKind.Tertiary => "bit-srb-ater",
-            BitColorKind.Transparent => "bit-srb-atra",
-            _ => string.Empty
+            BitColorKind.Primary => "bit-srb-bpr",
+            BitColorKind.Secondary => "bit-srb-bse",
+            BitColorKind.Tertiary => "bit-srb-btr",
+            BitColorKind.Transparent => "bit-srb-btn",
+            _ => "bit-srb-bpr"
         });
 
         ClassBuilder.Register(() => Color switch

src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss

@@ -137,8 +137,8 @@
     flex-flow: row nowrap;
     box-sizing: border-box;
     font-size: spacing(1.75);
-    background-color: $clr-bg-pri;
     border-radius: $shp-border-radius;
+    background-color: var(--bit-srb-clr-bg);
     border: $shp-border-width $shp-border-style $clr-brd-pri;
 }
 
@@ -445,30 +445,6 @@
     }
 }
 
-.bit-srb-apri {
-    .bit-srb-cnt {
-        background-color: $clr-bg-pri;
-    }
-}
-
-.bit-srb-asec {
-    .bit-srb-cnt {
-        background-color: $clr-bg-sec;
-    }
-}
-
-.bit-srb-ater {
-    .bit-srb-cnt {
-        background-color: $clr-bg-ter;
-    }
-}
-
-.bit-srb-atra {
-    .bit-srb-cnt {
-        background-color: transparent;
-    }
-}
-
 .bit-srb-hic {
     .bit-srb-cnt {
         //padding: 0 spacing(1);
@@ -556,6 +532,23 @@
 }
 
 
+.bit-srb-bpr {
+    --bit-srb-clr-bg: #{$clr-bg-pri};
+}
+
+.bit-srb-bse {
+    --bit-srb-clr-bg: #{$clr-bg-sec};
+}
+
+.bit-srb-btr {
+    --bit-srb-clr-bg: #{$clr-bg-ter};
+}
+
+.bit-srb-btn {
+    --bit-srb-clr-bg: transparent;
+}
+
+
 .bit-srb-pri {
     --bit-srb-clr: #{$clr-pri};
     --bit-srb-clr-txt: #{$clr-pri-text};