diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/Calendar.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/Calendar.razor index fac5ed2d..d48ccfe8 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/Calendar.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/Calendar.razor @@ -128,11 +128,15 @@ margin: 0 auto; padding: 15px 0; font-size: 13px; + text-align: center; + width: 300px; + max-width: 100%; + box-sizing: border-box; } .control-wrapper { margin: 0 auto; - padding-top: 20px; + width: fit-content; } .e-calendar .e-content .e-cell.personal-appointment span.e-day, diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/DateTimePicker.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/DateTimePicker.razor index a95d1646..62b2ef0e 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/DateTimePicker.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/DateTimePicker.razor @@ -111,7 +111,7 @@ This sample demonstrates the list of events of the DateTimePicker component which will be triggered for appropriate DateTimePicker actions.

- +
@@ -221,7 +221,7 @@

The DateTimePicker provides the WeekNumber and WeekRule properties to specify the rule for defining the first week of the year with options: FirstDay, FirstFullWeek, and FirstFourDayWeek.

-
Event Name
+
@@ -315,4 +315,50 @@ .e-calendar .e-content td.e-selected.e-focused-date.e-cell.official-appointment span.e-day { background-color: rgb(255 255 0 / 90%); } + + :root { + --table-bg: var(--panel-bg); + --table-border: rgba(0,0,0,0.06); + --table-border-radius: 6px; + --table-header-bg: rgba(0,0,0,0.02); + --table-header-color: var(--top-text); + --table-row-bg: #ffffff; + --table-row-border: rgba(0,0,0,0.04); + } + + .dark { + --table-bg: var(--panel-bg); + --table-border: rgba(255,255,255,0.10); + --table-header-bg: rgba(255,255,255,0.04); + --table-header-color: var(--top-text); + --table-row-bg: rgba(255,255,255,0.01); + --table-row-border: rgba(255,255,255,0.04); + } + + .table { + background-color: var(--table-bg, #ffffff); + color: var(--text-color, #111827); + border: 1px solid var(--table-border, rgba(0,0,0,0.06)); + border-radius: var(--table-border-radius, 6px); + overflow: hidden; + border-collapse: separate; + border-spacing: 0; + width: 100%; + } + + .table thead th { + background-color: var(--table-header-bg, rgba(0,0,0,0.02)); + color: var(--table-header-color, var(--top-text, #111827)); + padding: 0.75rem 1rem; + text-align: left; + font-weight: 600; + border-bottom: 1px solid var(--table-row-border, rgba(0,0,0,0.04)); + } + + .table tbody td { + padding: 0.75rem 1rem; + border-top: 1px solid var(--table-row-border, rgba(0,0,0,0.04)); + background-color: var(--table-row-bg, #ffffff); + color: var(--text-color, #111827); + } \ No newline at end of file diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/TimePicker.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/TimePicker.razor index 5533b089..4615e0ed 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/TimePicker.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Components/Calendars/TimePicker.razor @@ -139,7 +139,7 @@ This sample demonstrates the list of events of the TimePicker component which will be triggered for appropriate TimePicker actions.

-

Types
+
@@ -213,4 +213,50 @@ font-size: 14px; margin-bottom: 6px; } + + :root { + --table-bg: var(--panel-bg); + --table-border: rgba(0,0,0,0.06); + --table-border-radius: 6px; + --table-header-bg: rgba(0,0,0,0.02); + --table-header-color: var(--top-text); + --table-row-bg: #ffffff; + --table-row-border: rgba(0,0,0,0.04); + } + + .dark { + --table-bg: var(--panel-bg); + --table-border: rgba(255,255,255,0.10); + --table-header-bg: rgba(255,255,255,0.04); + --table-header-color: var(--top-text); + --table-row-bg: rgba(255,255,255,0.01); + --table-row-border: rgba(255,255,255,0.04); + } + + .table { + background-color: var(--table-bg, #ffffff); + color: var(--text-color, #111827); + border: 1px solid var(--table-border, rgba(0,0,0,0.06)); + border-radius: var(--table-border-radius, 6px); + overflow: hidden; + border-collapse: separate; + border-spacing: 0; + width: 100%; + } + + .table thead th { + background-color: var(--table-header-bg, rgba(0,0,0,0.02)); + color: var(--table-header-color, var(--top-text, #111827)); + padding: 0.75rem 1rem; + text-align: left; + font-weight: 600; + border-bottom: 1px solid var(--table-row-border, rgba(0,0,0,0.04)); + } + + .table tbody td { + padding: 0.75rem 1rem; + border-top: 1px solid var(--table-row-border, rgba(0,0,0,0.04)); + background-color: var(--table-row-bg, #ffffff); + color: var(--text-color, #111827); + } \ No newline at end of file diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/Calendar/SpecialDatesDemo.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/Calendar/SpecialDatesDemo.razor index 071cabd6..4a0f6183 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/Calendar/SpecialDatesDemo.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/Calendar/SpecialDatesDemo.razor @@ -30,12 +30,12 @@ var CurrentMonth = CurrentDate.Value.Month; if (args.Value.Value.Month == CurrentMonth && (args.Value.Value.Day == 7 || args.Value.Value.Day == 14 || args.Value.Value.Day == 24 || args.Value.Value.Day == 29)) { - this.SelectedValue = this.SelectedDate?.ToString("M / d / yyyy") + "(Personal appointment)"; + this.SelectedValue = this.SelectedDate?.ToString("M / d / yyyy") + " (Personal appointment)"; Count++; } if (args.Value.Value.Month == CurrentMonth && (args.Value.Value.Day == 3 || args.Value.Value.Day == 11 || args.Value.Value.Day == 17 || args.Value.Value.Day == 22)) { - this.SelectedValue = this.SelectedDate?.ToString("M / d / yyyy") + "(Official appointment)"; + this.SelectedValue = this.SelectedDate?.ToString("M / d / yyyy") + " (Official appointment)"; Count++; } if (Count == 0) diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/DatePicker/ViewsDemo.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/DatePicker/ViewsDemo.razor index a5624d4f..d4617c40 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/DatePicker/ViewsDemo.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/DatePicker/ViewsDemo.razor @@ -1 +1 @@ - \ No newline at end of file + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/DateTimePicker/DateTimeFormatDemo.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/DateTimePicker/DateTimeFormatDemo.razor index 59a1314e..03ab1cd5 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/DateTimePicker/DateTimeFormatDemo.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Calendars/DateTimePicker/DateTimeFormatDemo.razor @@ -1,4 +1,4 @@ - + @code { public DateTime? FormattedDateValue { get; set; } = new DateTime(2026, 12, 11, 11, 30, 00); } \ No newline at end of file diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/BubbleAndScatterCharts/ScatterChart/DataLabelDemo.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/BubbleAndScatterCharts/ScatterChart/DataLabelDemo.razor index ac09a1c1..56158ece 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/BubbleAndScatterCharts/ScatterChart/DataLabelDemo.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/BubbleAndScatterCharts/ScatterChart/DataLabelDemo.razor @@ -11,7 +11,9 @@ - + + + diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/BarChart/DataLabelDemo.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/BarChart/DataLabelDemo.razor index 4b4e5a75..8a1a259d 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/BarChart/DataLabelDemo.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/BarChart/DataLabelDemo.razor @@ -18,7 +18,9 @@ Fill="#8AA624" ColumnSpacing="0.3"> - + + + @@ -32,7 +34,9 @@ Fill="#D25D5D" ColumnSpacing="0.3"> - + + + @@ -46,7 +50,9 @@ Fill="#239BA7" ColumnSpacing="0.3"> - + + + @@ -69,6 +75,9 @@ _currentTheme = CurrentTheme; } + private bool IsDarkTheme => _currentTheme.ToString().Contains("Dark") || _currentTheme.ToString().Contains("HighContrast"); + private string TextColor => IsDarkTheme ? "#FFFFFF" : "#000000"; + public class PhonePalette { public string Year { get; set; } = string.Empty; diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/BarChart/StackingLabelsDemo.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/BarChart/StackingLabelsDemo.razor index 66a2263c..211705ff 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/BarChart/StackingLabelsDemo.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/BarChart/StackingLabelsDemo.razor @@ -7,7 +7,9 @@ - + + + @@ -56,6 +58,9 @@ _currentTheme = CurrentTheme; } + private bool IsDarkTheme => _currentTheme.ToString().Contains("Dark") || _currentTheme.ToString().Contains("HighContrast"); + private string TextColor => IsDarkTheme ? "#FFFFFF" : "#000000"; + public class AnnualEnergyDataLabel { public string X { get; set; } = string.Empty; diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/ColumnChart/StackingLabelsDemo.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/ColumnChart/StackingLabelsDemo.razor index 575f6f87..d726c5c0 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/ColumnChart/StackingLabelsDemo.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/ColumnAndBarCharts/ColumnChart/StackingLabelsDemo.razor @@ -2,9 +2,10 @@ - - + + + @@ -24,6 +25,9 @@ _currentTheme = CurrentTheme; } + private bool IsDarkTheme => _currentTheme.ToString().Contains("Dark") || _currentTheme.ToString().Contains("HighContrast"); + private string TextColor => IsDarkTheme ? "#FFFFFF" : "#000000"; + public class StackingColumnData { public string X { get; set; } = string.Empty; diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/LineCharts/SplineChart/DataLabelDemo.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/LineCharts/SplineChart/DataLabelDemo.razor index 644f3940..a1e72ee8 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/LineCharts/SplineChart/DataLabelDemo.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Charts/LineCharts/SplineChart/DataLabelDemo.razor @@ -28,7 +28,9 @@ Fill="#FF7F50" Type="ChartSeriesType.Spline"> - + + + @@ -40,7 +42,9 @@ Fill="#19DA00" Type="ChartSeriesType.Spline"> - + + + @@ -57,6 +61,9 @@ _currentTheme = CurrentTheme; } + private bool IsDarkTheme => _currentTheme.ToString().Contains("Dark") || _currentTheme.ToString().Contains("HighContrast"); + private string TextColor => IsDarkTheme ? "#FFFFFF" : "#000000"; + public class SplinePoint { public string X { get; set; } = string.Empty; diff --git a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Inputs/Uploader/TemplateDemo.razor b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Inputs/Uploader/TemplateDemo.razor index f31a99bc..1cf49438 100644 --- a/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Inputs/Uploader/TemplateDemo.razor +++ b/samples/Blazor.Toolkit.Samples.Client/Pages/Demos/Inputs/Uploader/TemplateDemo.razor @@ -6,7 +6,7 @@
File Name : @context.Name
File Size : @context.Size
-
File Status : @context.Status
+
File Status : @context.Status
diff --git a/src/Base/SfThemeRoot.Payload.cs b/src/Base/SfThemeRoot.Payload.cs index bafc40ea..d9cbed59 100644 --- a/src/Base/SfThemeRoot.Payload.cs +++ b/src/Base/SfThemeRoot.Payload.cs @@ -1499,13 +1499,6 @@ .eJSVGTooltip tspan { z-index: 1; } - .e-btn-group input:hover + label.e-btn, - .e-btn-group input:focus + label.e-btn, - .e-btn-group label.e-btn.e-active { - border-color: Highlight !important; - color: Highlight !important; - } - .e-btn-group input[aria-pressed] + label.e-btn { border-color: Highlight !important; color: Highlight !important; @@ -1529,6 +1522,13 @@ .eJSVGTooltip tspan { forced-color-adjust: none; } + .e-btn-group input:checked + label.e-btn:not(.e-active):not(.e-disabled):not(.e-outline) { + background-color: ButtonFace !important; + border-color: ButtonText !important; + color: ButtonText !important; + forced-color-adjust: none; + } + .e-btn-group input + label:hover { border-color: Highlight !important; color: Highlight !important; @@ -1537,7 +1537,8 @@ .eJSVGTooltip tspan { forced-color-adjust: none; } - .e-btn-group input:hover + label.e-btn:not(.e-disabled):not(.e-outline) { + .e-btn-group input:hover + label.e-btn:not(.e-disabled):not(.e-outline), + .e-btn-group input:hover:checked + label.e-btn:not(.e-active):not(.e-disabled):not(.e-outline) { background-color: HighlightText !important; border-color: Highlight !important; color: Highlight !important; @@ -1545,14 +1546,6 @@ .eJSVGTooltip tspan { forced-color-adjust: none; } - .e-btn-group input:checked + label.e-btn:not(.e-disabled):not(.e-outline) { - background-color: Highlight !important; - border-color: Highlight !important; - color: HighlightText !important; - box-shadow: none !important; - forced-color-adjust: none; - } - .e-switch-wrapper .e-switch-handle { background-color: ButtonText !important; forced-color-adjust: none !important; diff --git a/src/Components/Buttons/ButtonGroup/Button.razor b/src/Components/Buttons/ButtonGroup/Button.razor index dcbab732..ba112de7 100644 --- a/src/Components/Buttons/ButtonGroup/Button.razor +++ b/src/Components/Buttons/ButtonGroup/Button.razor @@ -36,7 +36,7 @@ else @onchange="HandleInputChangeAsync" @attributes="HtmlAttributes"> -
Event Name