Fix inputs placeholder color issues in BlazorUI (#13639)

src/BlazorUI/Bit.BlazorUI.Extras/Components/DataGrid/BitDataGrid.scss

@@ -33,6 +33,7 @@
 //   --bit-DataGrid-detail-background    background of the expanded detail rows      (default: $clr-bg-sec)
 //   --bit-DataGrid-footer-background    background of the footer row                (default: $clr-bg-sec)
 //   --bit-DataGrid-disabled-color       text color of a disabled grid               (default: $clr-fg-dis)
+//   --bit-DataGrid-placeholder-color    placeholder of the search and filter boxes  (default: $clr-fg-sec)
 // The row height is the RowHeight parameter (it also drives virtualization); the cell padding and the line height
 // set the density around it.
 
@@ -783,6 +784,15 @@ button.bit-dtg-htext {
     cursor: default;
 }
 
+.bit-dtg-search-input,
+.bit-dtg-filter-input {
+    @include input-placeholder(var(--bit-DataGrid-placeholder-color, #{$clr-fg-sec}));
+
+    &:disabled {
+        @include input-placeholder(var(--bit-DataGrid-disabled-color, #{$clr-fg-dis}));
+    }
+}
+
 /* Touch drag-and-drop: without touch-action none the browser turns the drag into a scroll and fires
    pointercancel. Scoped to the drag handle and to header cells that are actually reorderable
    (data-col is only rendered on those), so touch scrolling elsewhere is unaffected. */

src/BlazorUI/Bit.BlazorUI.Extras/Components/FullCalendar/BitFullCalendar.scss

@@ -9,7 +9,7 @@
 // --bit-FullCalendar-secondary-background     tab strips, the day-view sidebar, sticky titles, the timeline gutter
 // --bit-FullCalendar-hover-background         a hovered cell, slot, row or control
 // --bit-FullCalendar-color                    text
-// --bit-FullCalendar-secondary-color          weekday headers, group titles, descriptions
+// --bit-FullCalendar-secondary-color          weekday headers, group titles, descriptions, placeholders
 // --bit-FullCalendar-muted-color              hour labels, week numbers, days of the neighbouring months
 // --bit-FullCalendar-border-color             grid lines and the border of the calendar
 // --bit-FullCalendar-control-border-color     edges of the fields, selects, search box and switch tracks
@@ -1337,6 +1337,7 @@ $bfc-private-properties: evt-color;
     color: var(--bit-bfc-text);
     font-size: $tg-fs-sm;
     outline: none;
+    @include input-placeholder(var(--bit-bfc-text-secondary));
 }
 
 .bit-bfc-agenda-search input:focus {
@@ -1604,6 +1605,7 @@ $bfc-private-properties: evt-color;
     font-size: $tg-fs-sm;
     outline: none;
     box-sizing: border-box;
+    @include input-placeholder(var(--bit-bfc-text-secondary));
 }
 
 .bit-bfc-field input:focus,

src/BlazorUI/Bit.BlazorUI.Extras/Components/MarkdownEditor/BitMarkdownEditor.scss

@@ -19,7 +19,7 @@
 //   --bit-MarkdownEditor-font-size                 font size of the textarea                   (default: $tg-fs-sm)
 //   --bit-MarkdownEditor-line-height               line height of the textarea                 (default: 1.6)
 //   --bit-MarkdownEditor-padding                   padding of the textarea                     (default: spacing(1.5) spacing(1.75))
-//   --bit-MarkdownEditor-placeholder-color         placeholder of the textarea                 (default: $clr-fg-sec)
+//   --bit-MarkdownEditor-placeholder-color         placeholder of the textarea and the find box (default: $clr-fg-sec)
 //   --bit-MarkdownEditor-label-color               text of the label                           (default: --bit-MarkdownEditor-color)
 //   --bit-MarkdownEditor-label-font-size           size of the label                           (default: $tg-fs-sm)
 //   --bit-MarkdownEditor-label-font-weight         weight of the label                         (default: $tg-field-label-font-weight)
@@ -140,6 +140,10 @@ $mde-button-active-background: var(--bit-MarkdownEditor-button-active-background
         color: $clr-fg-dis;
     }
 
+    .bit-mde-txa {
+        @include input-placeholder($clr-fg-dis);
+    }
+
     .bit-mde-lbl {
         cursor: default;
     }
@@ -341,6 +345,7 @@ $mde-button-active-background: var(--bit-MarkdownEditor-button-active-background
     padding: $siz-ctrl-pad-y-sm $siz-ctrl-pad-x-sm;
     border-radius: $shp-radius-control;
     border: $shp-border-width $shp-border-style $clr-brd-pri;
+    @include input-placeholder(var(--bit-MarkdownEditor-placeholder-color, #{$clr-fg-sec}));
 
     &:focus-visible {
         @include mde-inset-ring;
@@ -484,10 +489,7 @@ $mde-button-active-background: var(--bit-MarkdownEditor-button-active-background
     padding: var(--bit-MarkdownEditor-padding, #{spacing(1.5) spacing(1.75)});
     font-family: var(--bit-MarkdownEditor-font-family, #{$tg-font-family-mono});
 
-    &::placeholder {
-        opacity: 1;
-        color: var(--bit-MarkdownEditor-placeholder-color, #{$clr-fg-sec});
-    }
+    @include input-placeholder(var(--bit-MarkdownEditor-placeholder-color, #{$clr-fg-sec}));
 
     // The textarea fills its pane, so an inset ring keeps the keyboard
     // focus indicator visible instead of being clipped by the container.

src/BlazorUI/Bit.BlazorUI.Extras/Components/PdfViewer/BitPdfViewer.scss

@@ -23,6 +23,7 @@
 //   --bit-PdfViewer-button-active-hover-background ... under the pointer                        (default: $clr-pri-hover)
 //   --bit-PdfViewer-field-background               the page box, find box and dropdowns         (default: $clr-bg-pri)
 //   --bit-PdfViewer-field-border-color             ... their border                             (default: $clr-brd-pri)
+//   --bit-PdfViewer-field-placeholder-color        ... the placeholder of the find box          (default: $clr-fg-sec)
 //   --bit-PdfViewer-sidebar-background             background of the side panels                (default: $clr-bg-sec)
 //   --bit-PdfViewer-sidebar-width                  width of the bookmarks/attachments/layers panel (default: spacing(29))
 //   --bit-PdfViewer-item-hover-background          a sidebar row under the pointer              (default: $clr-bg-sec-hover)
@@ -55,6 +56,9 @@ $pdv-button-active-background: var(--bit-PdfViewer-button-active-background, #{$
 $pdv-button-active-hover-background: var(--bit-PdfViewer-button-active-hover-background, #{$clr-pri-hover});
 $pdv-field-background: var(--bit-PdfViewer-field-background, #{$clr-bg-pri});
 $pdv-field-border: var(--bit-PdfViewer-field-border-color, #{$clr-brd-pri});
+// A field's, named with the field family rather than as the --bit-<Component>-placeholder-color of the inputs:
+// here a placeholder is also the page that has not painted yet (--bit-PdfViewer-placeholder-background).
+$pdv-field-placeholder: var(--bit-PdfViewer-field-placeholder-color, #{$clr-fg-sec});
 $pdv-sidebar-background: var(--bit-PdfViewer-sidebar-background, #{$clr-bg-sec});
 $pdv-sidebar-width: var(--bit-PdfViewer-sidebar-width, #{spacing(29)});
 $pdv-item-hover-background: var(--bit-PdfViewer-item-hover-background, #{$clr-bg-sec-hover});
@@ -299,9 +303,12 @@ $pdv-private-properties: scale;
         @include focus-ring($pdv-focus, 0);
     }
 
+    @include input-placeholder($pdv-field-placeholder);
+
     &:disabled {
         cursor: default;
         color: $clr-fg-dis;
+        @include input-placeholder($clr-fg-dis);
     }
 }
 

src/BlazorUI/Bit.BlazorUI.Extras/Components/PhoneInput/BitPhoneInput.scss

@@ -11,7 +11,7 @@
 //   --bit-PhoneInput-background              fill of the field                        (default: $clr-bg-pri)
 //   --bit-PhoneInput-color                   text of the number                       (default: $clr-fg-pri)
 //   --bit-PhoneInput-placeholder-color       placeholder of the number input, of the
-//                                            selector and of the search box           (default: $clr-fg-ter)
+//                                            selector and of the search box           (default: $clr-fg-sec)
 //   --bit-PhoneInput-border-color            frame at rest                            (default: $clr-brd-pri)
 //   --bit-PhoneInput-hover-border-color      frame under a pointer                    (default: $clr-brd-pri-hover)
 //   --bit-PhoneInput-border-width            thickness of the frame                   (default: $shp-border-width)
@@ -127,7 +127,7 @@ $phi-private-properties: sz-fs, sz-h, sz-pad, sz-icon, sz-itm-h, role-main, role
     --bit-phi-brd: var(--bit-phi-kind-brd, var(--bit-phi-role-main, var(--bit-PhoneInput-border-color, #{$clr-brd-pri})));
     --bit-phi-brd-hover: var(--bit-phi-kind-brd-hover, var(--bit-phi-role-main, var(--bit-PhoneInput-hover-border-color, #{$clr-brd-pri-hover})));
     --bit-phi-focus: var(--bit-phi-role-focus, var(--bit-PhoneInput-focus-color));
-    --bit-phi-plc: var(--bit-PhoneInput-placeholder-color, #{$clr-fg-ter});
+    --bit-phi-plc: var(--bit-PhoneInput-placeholder-color, #{$clr-fg-sec});
     --bit-phi-itm-clr: var(--bit-PhoneInput-item-color, #{$clr-fg-pri});
     --bit-phi-itm-hover-bg: var(--bit-PhoneInput-item-hover-background, #{$clr-bg-pri-hover});
 }
@@ -315,9 +315,7 @@ $phi-private-properties: sz-fs, sz-h, sz-pad, sz-icon, sz-itm-h, role-main, role
     border-start-end-radius: var(--bit-phi-radius);
     border-end-end-radius: var(--bit-phi-radius);
 
-    &::placeholder {
-        color: var(--bit-phi-plc);
-    }
+    @include input-placeholder(var(--bit-phi-plc));
 
     &:disabled {
         cursor: default;
@@ -382,8 +380,8 @@ $phi-private-properties: sz-fs, sz-h, sz-pad, sz-icon, sz-itm-h, role-main, role
         opacity: $opa-dis;
     }
 
-    .bit-phi-inp::placeholder {
-        color: var(--bit-PhoneInput-disabled-color, #{$clr-fg-dis});
+    .bit-phi-inp {
+        @include input-placeholder(var(--bit-PhoneInput-disabled-color, #{$clr-fg-dis}));
     }
 }
 
@@ -466,10 +464,7 @@ $phi-private-properties: sz-fs, sz-h, sz-pad, sz-icon, sz-itm-h, role-main, role
     color: var(--bit-phi-itm-clr);
     letter-spacing: $tg-ctrl-letter-spacing;
     padding: spacing(1) spacing(1.5);
-
-    &::placeholder {
-        color: var(--bit-phi-plc);
-    }
+    @include input-placeholder(var(--bit-phi-plc));
 }
 
 .bit-phi-scn {

src/BlazorUI/Bit.BlazorUI.Extras/Components/RichTextEditor/BitRichTextEditor.scss

@@ -18,7 +18,8 @@
 //   --bit-RichTextEditor-font-family               font of the content                             (default: inherit)
 //   --bit-RichTextEditor-font-size                 font size of the content                        (default: inherit)
 //   --bit-RichTextEditor-line-height               line height of the content                      (default: 1.6)
-//   --bit-RichTextEditor-placeholder-color         placeholder of the editing surface              (default: $clr-fg-sec)
+//   --bit-RichTextEditor-placeholder-color         placeholder of the editing surface and of the
+//                                                  fields of its panels                            (default: $clr-fg-sec)
 //   --bit-RichTextEditor-link-color                links in the content                            (default: $clr-pri)
 //   --bit-RichTextEditor-code-background           code spans and code blocks                      (default: $clr-bg-sec)
 //   --bit-RichTextEditor-quote-border-color        leading rule of a block quote                   (default: $clr-brd-pri)
@@ -76,6 +77,7 @@ $rte-rule-color: var(--bit-RichTextEditor-table-border-color, #{$clr-brd-pri});
     height: $siz-ctrl-sm;
     border-radius: $shp-radius-control;
     border: $shp-border-width $shp-border-style $clr-brd-pri;
+    @include input-placeholder(var(--bit-RichTextEditor-placeholder-color, #{$clr-fg-sec}));
 
     &:focus-visible {
         @include focus-ring($rte-focus, 0);

src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss

@@ -33,6 +33,7 @@
  *   --bit-CircularTimePicker-label-font-size              label text size           (default: $tg-fs-sm)
  *   --bit-CircularTimePicker-input-background             field background          (default: $clr-bg-pri)
  *   --bit-CircularTimePicker-input-color                  field foreground          (default: $clr-fg-pri)
+ *   --bit-CircularTimePicker-placeholder-color            field placeholder         (default: $clr-fg-sec)
  *   --bit-CircularTimePicker-input-font-size              field text size           (default: $tg-fs-sm)
  *   --bit-CircularTimePicker-input-height                 field height              (default: $siz-ctrl-md)
  *   --bit-CircularTimePicker-input-padding                field padding             (default: 0 spacing(1))
@@ -217,6 +218,7 @@ $ctp-private-properties: rl-clr, rl-text, rl-focus, inp-h, inp-fs, lbl-fs, clk-s
                 cursor: default;
                 color: var(--bit-ctp-clr-dis);
                 background: none var(--bit-ctp-bg-dis);
+                @include input-placeholder(var(--bit-ctp-clr-dis));
             }
         }
     }
@@ -364,6 +366,7 @@ $ctp-private-properties: rl-clr, rl-text, rl-focus, inp-h, inp-fs, lbl-fs, clk-s
     font-family: $tg-font-family;
     font-size: var(--bit-ctp-inp-fs, var(--bit-CircularTimePicker-input-font-size, #{$tg-fs-sm}));
     color: var(--bit-CircularTimePicker-input-color, #{$clr-fg-pri});
+    @include input-placeholder(var(--bit-CircularTimePicker-placeholder-color, #{$clr-fg-sec}));
 }
 
 .bit-ctp-ein {

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss

@@ -15,6 +15,7 @@
 //   --bit-DatePicker-input-height            height of the field                            (default: $siz-ctrl-md)
 //   --bit-DatePicker-input-font-size         text size of the field                         (default: $tg-fs-sm)
 //   --bit-DatePicker-input-color             text color of the field                        (default: $clr-fg-pri)
+//   --bit-DatePicker-placeholder-color       text color of the placeholder                  (default: $clr-fg-sec)
 //   --bit-DatePicker-input-background        background of the field                        (default: $clr-bg-pri)
 //   --bit-DatePicker-input-border-color      border color of the field at rest, which the
 //                                            open and the invalid states override           (default: $clr-brd-pri)
@@ -155,6 +156,7 @@ $dtp-private-properties: clr, clr-txt, clr-hover, clr-active, clr-focus, inp-h-s
             cursor: default;
             color: var(--bit-DatePicker-disabled-color, #{$clr-fg-dis});
             background: none $clr-bg-dis;
+            @include input-placeholder(var(--bit-DatePicker-disabled-color, #{$clr-fg-dis}));
         }
 
         .bit-dtp-pkt,
@@ -320,6 +322,7 @@ $dtp-private-properties: clr, clr-txt, clr-hover, clr-active, clr-focus, inp-h-s
     background: none transparent;
     color: var(--bit-DatePicker-input-color, #{$clr-fg-pri});
     font-family: $tg-font-family;
+    @include input-placeholder(var(--bit-DatePicker-placeholder-color, #{$clr-fg-sec}));
 }
 
 .bit-dtp-ein {

src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss

@@ -26,6 +26,7 @@
 //   --bit-DateRangePicker-input-height             height of the field             (default: $siz-ctrl-md)
 //   --bit-DateRangePicker-input-font-size          text size of the field          (default: $tg-fs-sm)
 //   --bit-DateRangePicker-input-color              text color of the field                    (default: $clr-fg-pri)
+//   --bit-DateRangePicker-placeholder-color        text color of the placeholder              (default: $clr-fg-sec)
 //   --bit-DateRangePicker-input-background         background of the field                    (default: $clr-bg-pri)
 //   --bit-DateRangePicker-input-border-color       border of the field                        (default: $clr-brd-pri)
 //   --bit-DateRangePicker-input-border-width       border stroke of the field           (default: $shp-border-width)
@@ -163,6 +164,7 @@ $dtrp-private-properties: rl-clr, rl-txt, rl-hover, rl-active, rl-body, rl-focus
             cursor: default;
             color: var(--bit-DateRangePicker-disabled-color, #{$clr-fg-dis});
             background: none $clr-bg-dis;
+            @include input-placeholder(var(--bit-DateRangePicker-disabled-color, #{$clr-fg-dis}));
         }
 
         @include dtrp-disabled-content;
@@ -358,6 +360,7 @@ $dtrp-private-properties: rl-clr, rl-txt, rl-hover, rl-active, rl-body, rl-focus
     font-size: var(--bit-dtrp-inp-fs, var(--bit-DateRangePicker-input-font-size, #{$tg-fs-sm}));
     background: none transparent;
     font-family: $tg-font-family;
+    @include input-placeholder(var(--bit-DateRangePicker-placeholder-color, #{$clr-fg-sec}));
 }
 
 .bit-dtrp-ein {

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss

@@ -257,6 +257,12 @@ $drp-private-properties: sz-fs, sz-h, sz-lbl-lh, sz-itm-h, sz-itm-fs, sz-ico, sz
             color: var(--bit-Dropdown-disabled-color, #{$clr-fg-dis});
         }
 
+        // The ComboBox input is painted apart from the field around it, so it greys out apart from it too.
+        .bit-drp-inp {
+            color: var(--bit-Dropdown-disabled-color, #{$clr-fg-dis});
+            @include input-placeholder(var(--bit-Dropdown-disabled-color, #{$clr-fg-dis}));
+        }
+
         .bit-drp-icn {
             cursor: default;
 
@@ -704,9 +710,7 @@ $drp-private-properties: sz-fs, sz-h, sz-lbl-lh, sz-itm-h, sz-itm-fs, sz-ico, sz
 
     // The typed text and the placeholder of the ComboBox input are the same two colors the selection
     // display beside it uses, so the field reads as one control whichever of the two is showing.
-    &::placeholder {
-        color: var(--bit-Dropdown-placeholder-color, #{$clr-fg-sec});
-    }
+    @include input-placeholder(var(--bit-Dropdown-placeholder-color, #{$clr-fg-sec}));
 }
 
 .bit-drp-pre,
@@ -949,10 +953,7 @@ $drp-private-properties: sz-fs, sz-h, sz-lbl-lh, sz-itm-h, sz-itm-fs, sz-ico, sz
     padding: 0 0 spacing(0.0625);
     background-color: transparent;
     color: var(--bit-Dropdown-color, #{$clr-fg-pri});
-
-    &::placeholder {
-        color: var(--bit-Dropdown-placeholder-color, #{$clr-fg-sec});
-    }
+    @include input-placeholder(var(--bit-Dropdown-placeholder-color, #{$clr-fg-sec}));
 }
 
 .bit-drp-sbcc {

src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scss

@@ -98,6 +98,7 @@ $nfl-private-properties: height, fontsize, label-fontsize, icon-size, btn-width,
             cursor: default;
             color: var(--bit-NumberField-disabled-color, #{$clr-fg-dis});
             background: var(--bit-NumberField-disabled-background, #{$clr-bg-dis});
+            @include input-placeholder(var(--bit-NumberField-disabled-color, #{$clr-fg-dis}));
         }
 
         .bit-nfl-pre,
@@ -321,9 +322,7 @@ $nfl-private-properties: height, fontsize, label-fontsize, icon-size, btn-width,
     border-start-end-radius: 0;
     border-end-end-radius: 0;
 
-    &::placeholder {
-        color: var(--bit-NumberField-placeholder-color, #{$clr-fg-sec});
-    }
+    @include input-placeholder(var(--bit-NumberField-placeholder-color, #{$clr-fg-sec}));
 }
 
 .bit-nfl-cbt {

src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss

@@ -24,7 +24,7 @@
 //   --bit-OtpInput-filled-border-color     rule of a box that holds a character          (default: the rest rule)
 //   --bit-OtpInput-focus-border-color      box rule while focused                        (default: $clr-pri)
 //   --bit-OtpInput-focus-color             focus ring color                              (default: $clr-pri-focus)
-//   --bit-OtpInput-placeholder-color       hint character of an empty box                (default: $clr-fg-ter)
+//   --bit-OtpInput-placeholder-color       hint character of an empty box                (default: $clr-fg-sec)
 //   --bit-OtpInput-label-color             label above the boxes                         (default: $clr-fg-pri)
 //   --bit-OtpInput-description-color       helper text under the boxes                   (default: $clr-fg-sec)
 //   --bit-OtpInput-separator-color         text drawn between the groups                 (default: $clr-fg-sec)
@@ -206,9 +206,7 @@ $otp-private-properties: size, fontsize, dsc-fontsize, clr, clr-focus;
     background-color: var(--bit-otp-inp-sbg, var(--bit-OtpInput-background, var(--bit-otp-bg)));
     transition: border-color $mot-duration-short $mot-easing, background-color $mot-duration-short $mot-easing;
 
-    &::placeholder {
-        color: var(--bit-OtpInput-placeholder-color, #{$clr-fg-ter});
-    }
+    @include input-placeholder(var(--bit-OtpInput-placeholder-color, #{$clr-fg-sec}));
 
     //a box that already holds a character, which is the hook for a row that shows its own progress. Both
     //of its colors fall back to the ones of the rest state, so nothing changes until one of the two is set.
@@ -483,9 +481,7 @@ $otp-private-properties: size, fontsize, dsc-fontsize, clr, clr-focus;
 
         //the hint of an empty box is a part of the field, so it has to be dimmed along with it instead of
         //staying the only thing in the component that still reads as enabled.
-        &::placeholder {
-            color: var(--bit-OtpInput-disabled-color, #{$clr-fg-dis});
-        }
+        @include input-placeholder(var(--bit-OtpInput-disabled-color, #{$clr-fg-dis}));
     }
 
     //a disabled component is out of the flow the wait belongs to, so the bar is dimmed along with the rest