From 0841db60537c4f62b77ed6988b668a6b4c600180 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Mon, 11 May 2026 23:51:09 +0330 Subject: [PATCH 01/28] first step --- ...IBitBlazorUIServiceCollectionExtensions.cs | 3 + .../Fluent/bit.blazorui.fluent-dark.scss | 6 + .../Fluent/bit.blazorui.fluent-light.scss | 6 + .../Styles/Fluent/bit.blazorui.fluent.scss | 6 + .../Styles/Fluent/forced-colors.fluent.scss | 32 +++++ .../Styles/Fluent/motion.fluent.scss | 15 ++ .../Styles/Fluent/semantic-tokens.fluent.scss | 10 ++ .../Utils/Theme/BitAccentColorPresets.cs | 14 ++ .../Theme/BitExternalThemeJsExtensions.cs | 14 ++ .../Utils/Theme/BitExternalThemeLoader.cs | 25 ++++ .../Utils/Theme/BitTheme/BitTheme.cs | 4 + .../Theme/BitTheme/BitThemeBreakpoints.cs | 10 ++ .../Utils/Theme/BitTheme/BitThemeLayout.cs | 12 ++ .../Utils/Theme/BitTheme/BitThemeMotion.cs | 9 ++ .../Utils/Theme/BitThemeBreakpointDefaults.cs | 13 ++ .../Utils/Theme/BitThemeChangedEventArgs.cs | 19 +++ .../Utils/Theme/BitThemeColorContrast.cs | 43 ++++++ .../Utils/Theme/BitThemeColorDerivation.cs | 12 +- .../Utils/Theme/BitThemeCookie.cs | 11 ++ .../Utils/Theme/BitThemeDensityPresets.cs | 17 +++ .../Utils/Theme/BitThemeJsExtensions.cs | 15 ++ .../Utils/Theme/BitThemeJsNotifierReceiver.cs | 24 ++++ .../Utils/Theme/BitThemeManager.cs | 60 +++++++- .../Utils/Theme/BitThemeMapper.cs | 26 ++++ .../Utils/Theme/BitThemeNotifications.cs | 16 +++ .../Bit.BlazorUI/Utils/Theme/bit-theme.ts | 136 +++++++++++++++++- .../Pages/ThemingPage.razor | 46 ++++++ .../Utils/Theme/BitThemeColorContrastTests.cs | 23 +++ 28 files changed, 617 insertions(+), 10 deletions(-) create mode 100644 src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss create mode 100644 src/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scss create mode 100644 src/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scss create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cs create mode 100644 src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cs create mode 100644 src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs diff --git a/src/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cs index 7cfa447bf2..1fa8893c9e 100644 --- a/src/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cs +++ b/src/BlazorUI/Bit.BlazorUI/Extensions/IBitBlazorUIServiceCollectionExtensions.cs @@ -7,7 +7,10 @@ public static class IBitBlazorUIServiceCollectionExtensions { public static IServiceCollection AddBitBlazorUIServices(this IServiceCollection services) { + services.TryAddScoped(); + services.TryAddScoped(); services.TryAddScoped(); + services.TryAddScoped(); services.TryAddScoped(); diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scss index 991b0d46cb..4ef7f6650b 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-dark.scss @@ -9,3 +9,9 @@ @import "shapes.fluent.scss"; @import "typography.fluent.scss"; + +@import "motion.fluent.scss"; + +@import "forced-colors.fluent.scss"; + +@import "semantic-tokens.fluent.scss"; diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scss index b91212ae0c..90da559910 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent-light.scss @@ -9,3 +9,9 @@ @import "shapes.fluent.scss"; @import "typography.fluent.scss"; + +@import "motion.fluent.scss"; + +@import "forced-colors.fluent.scss"; + +@import "semantic-tokens.fluent.scss"; diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scss index e01dddb9de..7ba552b8bb 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/bit.blazorui.fluent.scss @@ -13,3 +13,9 @@ @import "shapes.fluent.scss"; @import "typography.fluent.scss"; + +@import "motion.fluent.scss"; + +@import "forced-colors.fluent.scss"; + +@import "semantic-tokens.fluent.scss"; diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss new file mode 100644 index 0000000000..03da9f5883 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss @@ -0,0 +1,32 @@ +// Windows High Contrast / forced-colors: preserve readability with system palette. +@media (forced-colors: active) { + :root { + --bit-clr-fg-pri: CanvasText; + --bit-clr-fg-sec: CanvasText; + --bit-clr-fg-ter: CanvasText; + --bit-clr-bg-pri: Canvas; + --bit-clr-bg-sec: Canvas; + --bit-clr-bg-ter: Canvas; + --bit-clr-brd-pri: CanvasText; + --bit-clr-brd-sec: CanvasText; + --bit-clr-pri: LinkText; + --bit-clr-pri-hover: LinkText; + --bit-clr-pri-active: LinkText; + --bit-clr-pri-text: Canvas; + --bit-clr-err: CanvasText; + --bit-clr-suc: CanvasText; + --bit-clr-wrn: CanvasText; + --bit-shd-cal: none; + --bit-shd-sm: none; + --bit-shd-nm: none; + --bit-shd-md: none; + --bit-shd-lg: none; + } +} + +// Stronger contrast preference (non-forced): deepen borders and primary text slightly. +@media (prefers-contrast: more) { + :root { + --bit-shp-brd-width: max(var(--bit-shp-brd-width, 1px), 1px); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scss new file mode 100644 index 0000000000..4ce01d9c65 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/motion.fluent.scss @@ -0,0 +1,15 @@ +:root { + --bit-mot-duration: 200ms; + --bit-mot-duration-short: 100ms; + --bit-mot-duration-long: 300ms; + --bit-mot-easing: cubic-bezier(0.33, 0, 0.67, 1); + --bit-layout-density-scale: 1; +} + +@media (prefers-reduced-motion: reduce) { + :root { + --bit-mot-duration: 0.01ms; + --bit-mot-duration-short: 0.01ms; + --bit-mot-duration-long: 0.01ms; + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scss new file mode 100644 index 0000000000..285262b2d6 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scss @@ -0,0 +1,10 @@ +// Semantic aliases over primitive tokens — use in app CSS instead of raw --bit-clr-* where intent matters. +:root { + --bit-sem-surface-page: var(--bit-clr-bg-pri); + --bit-sem-surface-elevated: var(--bit-clr-bg-sec); + --bit-sem-surface-muted: var(--bit-clr-bg-ter); + --bit-sem-text-primary: var(--bit-clr-fg-pri); + --bit-sem-text-secondary: var(--bit-clr-fg-sec); + --bit-sem-border-default: var(--bit-clr-brd-pri); + --bit-sem-accent-primary: var(--bit-clr-pri); +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cs new file mode 100644 index 0000000000..6330c87143 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitAccentColorPresets.cs @@ -0,0 +1,14 @@ +namespace Bit.BlazorUI; + +/// +/// Sample accent (primary) hex values for branding — assign to or derive via . +/// +public static class BitAccentColorPresets +{ + public const string Blue = "#1A86D8"; + public const string Purple = "#8764B8"; + public const string Green = "#107C10"; + public const string Orange = "#CA5010"; + public const string Teal = "#038387"; + public const string Rose = "#C239B3"; +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cs new file mode 100644 index 0000000000..583cb99db3 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeJsExtensions.cs @@ -0,0 +1,14 @@ +namespace Bit.BlazorUI; + +internal static class BitExternalThemeJsExtensions +{ + internal static ValueTask BitExternalThemeAttach(this IJSRuntime js, string linkElementId, string href) + { + return js.InvokeVoid("BitExternalTheme.attach", linkElementId, href); + } + + internal static ValueTask BitExternalThemeDetach(this IJSRuntime js, string linkElementId) + { + return js.InvokeVoid("BitExternalTheme.detach", linkElementId); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs new file mode 100644 index 0000000000..87d50c34d5 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitExternalThemeLoader.cs @@ -0,0 +1,25 @@ +namespace Bit.BlazorUI; + +/// +/// Loads optional alternate CSS bundles by id (creates or updates a <link rel="stylesheet">). +/// Use only trusted/same-origin values. +/// +public sealed class BitExternalThemeLoader +{ + private readonly IJSRuntime _js; + + public BitExternalThemeLoader(IJSRuntime js) + { + _js = js; + } + + public ValueTask AttachStylesheetAsync(string linkElementId, string href) + { + return _js.BitExternalThemeAttach(linkElementId, href); + } + + public ValueTask DetachStylesheetAsync(string linkElementId) + { + return _js.BitExternalThemeDetach(linkElementId); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cs index 6d178a7f09..0f50b280e7 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cs +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitTheme.cs @@ -13,4 +13,8 @@ public class BitTheme public BitThemeShapes Shape { get; set; } = new(); public BitThemeTypography Typography { get; set; } = new(); + + public BitThemeMotion Motion { get; set; } = new(); + + public BitThemeLayout Layout { get; set; } = new(); } diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cs new file mode 100644 index 0000000000..00340435cd --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeBreakpoints.cs @@ -0,0 +1,10 @@ +namespace Bit.BlazorUI; + +public class BitThemeBreakpoints +{ + public string? Xs { get; set; } + public string? Sm { get; set; } + public string? Md { get; set; } + public string? Lg { get; set; } + public string? Xl { get; set; } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cs new file mode 100644 index 0000000000..5bdf67f8fc --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeLayout.cs @@ -0,0 +1,12 @@ +namespace Bit.BlazorUI; + +public class BitThemeLayout +{ + /// CSS direction for the document or region, e.g. ltr or rtl. Maps to --bit-layout-dir. + public string? Direction { get; set; } + + /// Multiplier for compact UI (e.g. 0.9); combine with .. Maps to --bit-layout-density-scale. + public string? DensityScale { get; set; } + + public BitThemeBreakpoints Breakpoints { get; set; } = new(); +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cs new file mode 100644 index 0000000000..f7adef9d3f --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitTheme/BitThemeMotion.cs @@ -0,0 +1,9 @@ +namespace Bit.BlazorUI; + +public class BitThemeMotion +{ + public string? Duration { get; set; } + public string? DurationShort { get; set; } + public string? DurationLong { get; set; } + public string? EasingStandard { get; set; } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cs new file mode 100644 index 0000000000..6747c96772 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeBreakpointDefaults.cs @@ -0,0 +1,13 @@ +namespace Bit.BlazorUI; + +/// +/// Default breakpoint widths (px) for ; align with your app media queries. +/// +public static class BitThemeBreakpointDefaults +{ + public const string Xs = "0px"; + public const string Sm = "600px"; + public const string Md = "900px"; + public const string Lg = "1200px"; + public const string Xl = "1536px"; +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cs new file mode 100644 index 0000000000..5b1c3b55b7 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeChangedEventArgs.cs @@ -0,0 +1,19 @@ +namespace Bit.BlazorUI; + +/// +/// Event data when the document bit-theme attribute changes (resolved preset name, e.g. light/dark). +/// +public sealed class BitThemeChangedEventArgs : EventArgs +{ + public BitThemeChangedEventArgs(string newTheme, string oldTheme) + { + NewTheme = newTheme; + OldTheme = oldTheme; + } + + /// Resolved theme name now on bit-theme. + public string NewTheme { get; } + + /// Previous resolved theme name. + public string OldTheme { get; } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cs new file mode 100644 index 0000000000..4f7e44d55b --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorContrast.cs @@ -0,0 +1,43 @@ +namespace Bit.BlazorUI; + +/// +/// WCAG 2.x contrast helpers for pairs of solid hex colors (sRGB). +/// +public static class BitThemeColorContrast +{ + /// Returns the contrast ratio in [1, 21]. + public static double GetContrastRatio(string foregroundHex, string backgroundHex) + { + try + { + var fg = new BitInternalColor(foregroundHex.Trim()); + var bg = new BitInternalColor(backgroundHex.Trim()); + var l1 = RelativeLuminance(fg.R, fg.G, fg.B); + var l2 = RelativeLuminance(bg.R, bg.G, bg.B); + var lighter = Math.Max(l1, l2); + var darker = Math.Min(l1, l2); + return (lighter + 0.05) / (darker + 0.05); + } + catch + { + return 1; + } + } + + public static bool MeetsWcagAaNormalText(double contrastRatio) => contrastRatio >= 4.5; + + public static bool MeetsWcagAaLargeText(double contrastRatio) => contrastRatio >= 3.0; + + private static double RelativeLuminance(byte r, byte g, byte b) + { + var rs = Linearize(r / 255.0); + var gs = Linearize(g / 255.0); + var bs = Linearize(b / 255.0); + return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs; + } + + private static double Linearize(double channel) + { + return channel <= 0.03928 ? channel / 12.92 : Math.Pow((channel + 0.055) / 1.055, 2.4); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs index df6d80ab9b..050110a23a 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeColorDerivation.cs @@ -6,7 +6,8 @@ namespace Bit.BlazorUI; public static class BitThemeColorDerivation { /// Fills unset fields from . - public static void FillColorRoleFromMain(BitThemeColorVariants? variants, string? mainHex) + /// When true, flips suggested on-color text if contrast vs fails WCAG AA for normal text. + public static void FillColorRoleFromMain(BitThemeColorVariants? variants, string? mainHex, bool adjustTextForWcagAa = false) { if (variants is null || string.IsNullOrWhiteSpace(mainHex)) return; @@ -25,6 +26,15 @@ public static void FillColorRoleFromMain(BitThemeColorVariants? variants, string variants.LightHover ??= ToHex(h, s, AddV(v, 0.12)); variants.LightActive ??= ToHex(h, s, AddV(v, 0.16)); variants.Text ??= SuggestOnColorText(baseColor); + + if (adjustTextForWcagAa && variants.Main is not null && variants.Text is not null) + { + var ratio = BitThemeColorContrast.GetContrastRatio(variants.Text, variants.Main); + if (!BitThemeColorContrast.MeetsWcagAaNormalText(ratio)) + { + variants.Text = variants.Text.Equals("#000000", StringComparison.OrdinalIgnoreCase) ? "#FFFFFF" : "#000000"; + } + } } catch { diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cs new file mode 100644 index 0000000000..625ac288a1 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeCookie.cs @@ -0,0 +1,11 @@ +namespace Bit.BlazorUI; + +/// +/// Cookie name convention for persisting a theme preference on the server when using SSR or hybrid hosting. +/// Read this value in middleware or layout code and emit / bit-theme consistently with the client. +/// +public static class BitThemeCookie +{ + /// Suggested cookie name for the abstract theme key (e.g. system, dark, fluent-light). + public const string PreferenceCookieName = "bit-theme-preference"; +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cs new file mode 100644 index 0000000000..b4dd7fed99 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeDensityPresets.cs @@ -0,0 +1,17 @@ +namespace Bit.BlazorUI; + +/// +/// Pre-built density tweaks; merge with a baseline from your app. +/// +public static class BitThemeDensityPresets +{ + /// Returns a theme overlay that tightens vertical rhythm via and spacing scale. + public static BitTheme CreateCompactOverlay() + { + return new BitTheme + { + Layout = { DensityScale = "0.9" }, + Spacing = { ScalingFactor = "0.95" }, + }; + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cs index 9078410418..16b28e4c75 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cs +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsExtensions.cs @@ -31,4 +31,19 @@ internal static ValueTask BitThemeGetCurrentPersistedTheme(this IJSRunti { return js.Invoke("BitTheme.getPersisted"); } + + internal static ValueTask BitThemeClearAppliedBitTheme(this IJSRuntime js, ElementReference? element) + { + return js.InvokeVoid("BitTheme.clearAppliedBitTheme", element); + } + + internal static ValueTask BitThemeRegisterDotNetNotifier(this IJSRuntime js, DotNetObjectReference dotNetRef) + { + return js.InvokeVoid("BitTheme.registerDotNetNotifier", dotNetRef); + } + + internal static ValueTask BitThemeUnregisterDotNetNotifier(this IJSRuntime js) + { + return js.InvokeVoid("BitTheme.unregisterDotNetNotifier"); + } } diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cs new file mode 100644 index 0000000000..846e403efd --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeJsNotifierReceiver.cs @@ -0,0 +1,24 @@ +namespace Bit.BlazorUI; + +/// +/// JS-invokable bridge for BitTheme.registerDotNetNotifier; registered lazily by . +/// +public sealed class BitThemeJsNotifierReceiver : IDisposable +{ + private readonly BitThemeNotifications _notifications; + + public BitThemeJsNotifierReceiver(BitThemeNotifications notifications) + { + _notifications = notifications; + } + + [JSInvokable] + public void NotifyThemeChangedFromJs(string newTheme, string oldTheme) + { + _notifications.Raise(newTheme, oldTheme); + } + + public void Dispose() + { + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cs index 69a44fb652..be01593c4a 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cs +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeManager.cs @@ -6,46 +6,100 @@ /// sets --bit-* variables on the target element (default document.body), overriding stylesheet defaults for that subtree. /// Nested scopes overrides to its root element. /// -public class BitThemeManager +public sealed class BitThemeManager : IAsyncDisposable { - private IJSRuntime _js = default!; + private readonly IJSRuntime _js; + private readonly BitThemeJsNotifierReceiver _jsNotifierReceiver; - public BitThemeManager(IJSRuntime js) + private DotNetObjectReference? _jsNotifierReference; + private bool _jsNotifierRegistered; + + public BitThemeManager(IJSRuntime js, BitThemeJsNotifierReceiver jsNotifierReceiver) { _js = js; + _jsNotifierReceiver = jsNotifierReceiver; } /// Returns the active bit-theme name from the document element. public async ValueTask GetCurrentThemeAsync() { + await EnsureJsNotifierRegisteredAsync().ConfigureAwait(false); return await _js.BitThemeGetCurrentTheme(); } /// Sets the bit-theme attribute (use values from or custom names matching your CSS). public async ValueTask SetThemeAsync(string themeName) { + await EnsureJsNotifierRegisteredAsync().ConfigureAwait(false); return await _js.BitThemeSetTheme(themeName); } /// Toggles between configured light and dark theme names. public async ValueTask ToggleDarkLightAsync() { + await EnsureJsNotifierRegisteredAsync().ConfigureAwait(false); return await _js.BitThemeToggleThemeDarkLight(); } /// Applies as CSS custom properties on (default: body), overriding stylesheet tokens for that subtree. public async ValueTask ApplyBitThemeAsync(BitTheme? bitTheme, ElementReference? element = null) { + await EnsureJsNotifierRegisteredAsync().ConfigureAwait(false); await _js.BitThemeApplyBitTheme(BitThemeUtilities.ToCssVariables(bitTheme), element); } + /// + /// Removes custom properties previously applied by on (default: document body). + /// Prefer scoping token overrides under when possible. + /// + public async ValueTask ClearBitThemeOverridesAsync(ElementReference? element = null) + { + await EnsureJsNotifierRegisteredAsync().ConfigureAwait(false); + await _js.BitThemeClearAppliedBitTheme(element); + } + public async ValueTask IsSystemInDarkMode() { + await EnsureJsNotifierRegisteredAsync().ConfigureAwait(false); return await _js.BitThemeIsSystemDark(); } public async ValueTask GetCurrentPersistedThemeAsync() { + await EnsureJsNotifierRegisteredAsync().ConfigureAwait(false); return await _js.BitThemeGetCurrentPersistedTheme(); } + + /// Ensures the client script can notify ; safe to call multiple times. + public async ValueTask EnsureThemeNotificationsRegisteredAsync() + { + await EnsureJsNotifierRegisteredAsync().ConfigureAwait(false); + } + + private async ValueTask EnsureJsNotifierRegisteredAsync() + { + if (_jsNotifierRegistered) return; + + _jsNotifierReference = DotNetObjectReference.Create(_jsNotifierReceiver); + await _js.BitThemeRegisterDotNetNotifier(_jsNotifierReference).ConfigureAwait(false); + _jsNotifierRegistered = true; + } + + public async ValueTask DisposeAsync() + { + if (_jsNotifierReference is null) return; + + try + { + await _js.BitThemeUnregisterDotNetNotifier().ConfigureAwait(false); + } + catch (JSDisconnectedException) + { + // Circuit gone + } + + _jsNotifierReference.Dispose(); + _jsNotifierReference = null; + _jsNotifierRegistered = false; + } } diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cs index 1b82bf5ece..feabb24c31 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cs +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeMapper.cs @@ -357,6 +357,19 @@ internal static Dictionary MapToCssVariables(BitTheme bitTheme) addCssVar("--bit-tpg-subtitle2-line-height", bitTheme.Typography.Subtitle2.LineHeight); addCssVar("--bit-tpg-subtitle2-letter-spacing", bitTheme.Typography.Subtitle2.LetterSpacing); + addCssVar("--bit-mot-duration", bitTheme.Motion.Duration); + addCssVar("--bit-mot-duration-short", bitTheme.Motion.DurationShort); + addCssVar("--bit-mot-duration-long", bitTheme.Motion.DurationLong); + addCssVar("--bit-mot-easing", bitTheme.Motion.EasingStandard); + + addCssVar("--bit-layout-dir", bitTheme.Layout.Direction); + addCssVar("--bit-layout-density-scale", bitTheme.Layout.DensityScale); + addCssVar("--bit-bp-xs", bitTheme.Layout.Breakpoints.Xs); + addCssVar("--bit-bp-sm", bitTheme.Layout.Breakpoints.Sm); + addCssVar("--bit-bp-md", bitTheme.Layout.Breakpoints.Md); + addCssVar("--bit-bp-lg", bitTheme.Layout.Breakpoints.Lg); + addCssVar("--bit-bp-xl", bitTheme.Layout.Breakpoints.Xl); + return result; void addCssVar(string key, string? value) { if (value is not null) result!.Add(key, value); } @@ -715,6 +728,19 @@ internal static BitTheme Merge(BitTheme bitTheme, BitTheme other) result.Typography.Subtitle2.LineHeight = bitTheme.Typography.Subtitle2.LineHeight ?? other.Typography.Subtitle2.LineHeight; result.Typography.Subtitle2.LetterSpacing = bitTheme.Typography.Subtitle2.LetterSpacing ?? other.Typography.Subtitle2.LetterSpacing; + result.Motion.Duration = bitTheme.Motion.Duration ?? other.Motion.Duration; + result.Motion.DurationShort = bitTheme.Motion.DurationShort ?? other.Motion.DurationShort; + result.Motion.DurationLong = bitTheme.Motion.DurationLong ?? other.Motion.DurationLong; + result.Motion.EasingStandard = bitTheme.Motion.EasingStandard ?? other.Motion.EasingStandard; + + result.Layout.Direction = bitTheme.Layout.Direction ?? other.Layout.Direction; + result.Layout.DensityScale = bitTheme.Layout.DensityScale ?? other.Layout.DensityScale; + result.Layout.Breakpoints.Xs = bitTheme.Layout.Breakpoints.Xs ?? other.Layout.Breakpoints.Xs; + result.Layout.Breakpoints.Sm = bitTheme.Layout.Breakpoints.Sm ?? other.Layout.Breakpoints.Sm; + result.Layout.Breakpoints.Md = bitTheme.Layout.Breakpoints.Md ?? other.Layout.Breakpoints.Md; + result.Layout.Breakpoints.Lg = bitTheme.Layout.Breakpoints.Lg ?? other.Layout.Breakpoints.Lg; + result.Layout.Breakpoints.Xl = bitTheme.Layout.Breakpoints.Xl ?? other.Layout.Breakpoints.Xl; + return result; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cs new file mode 100644 index 0000000000..94568181e9 --- /dev/null +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeNotifications.cs @@ -0,0 +1,16 @@ +namespace Bit.BlazorUI; + +/// +/// Raised when the global bit-theme document attribute changes (including OS-driven updates when following system theme). +/// Subscribe in scoped components; requires interop at least once per circuit so the client script can notify .NET. +/// +public sealed class BitThemeNotifications +{ + /// Fires after BitTheme.set, toggleDarkLight, or prefers-color-scheme updates while following system theme. + public event EventHandler? ThemeChanged; + + internal void Raise(string newTheme, string oldTheme) + { + ThemeChanged?.Invoke(this, new BitThemeChangedEventArgs(newTheme, oldTheme)); + } +} diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts index 2040d035a2..8803c860bd 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/bit-theme.ts @@ -10,12 +10,18 @@ interface BitThemeOptions { onChange?: onThemeChangeType; } +interface BitThemeSetOptions { + /** When true, startup init so resolved light/dark does not disable OS sync from bit-theme-system. */ + fromInit?: boolean; + /** Reserved for internal OS refresh paths (same as normal set without touching follow-system flags). */ + internalOsRefresh?: boolean; +} + class BitTheme { private static SYSTEM_THEME = 'system'; private static THEME_ATTRIBUTE = 'bit-theme'; private static THEME_STORAGE_KEY = 'bit-current-theme'; - private static _persist = false; private static _darkTheme: string = 'dark'; private static _lightTheme: string = 'light'; @@ -23,6 +29,15 @@ class BitTheme { private static _currentTheme = BitTheme._lightTheme; private static _onThemeChange: onThemeChangeType = () => { }; + /** When true, user pinned an explicit theme via set (not system); disables following OS until set('system'). */ + private static _stopFollowingSystem = false; + + private static _schemeMediaQuery: MediaQueryList | null = null; + private static _onSchemeChange = () => BitTheme.applyResolvedSystemThemeFromOs(); + + private static _dotnetNotifier: DotNetObject | null = null; + + private static _appliedVarKeys = new WeakMap(); public static init(options: BitThemeOptions) { Object.assign(BitTheme._initOptions, options); @@ -50,7 +65,8 @@ class BitTheme { theme = BitTheme.getPersisted() || theme; } - BitTheme.set(theme); + BitTheme.set(theme, { fromInit: true }); + BitTheme.syncSystemThemeListener(); } public static onChange(fn: onThemeChangeType) { @@ -68,7 +84,18 @@ class BitTheme { return BitTheme._currentTheme; } - public static set(themeName: string) { + public static set(themeName: string, options?: BitThemeSetOptions) { + const fromInit = options?.fromInit === true; + const internalOs = options?.internalOsRefresh === true; + + if (!fromInit && !internalOs) { + if (themeName === BitTheme.SYSTEM_THEME) { + BitTheme._stopFollowingSystem = false; + } else { + BitTheme._stopFollowingSystem = true; + } + } + BitTheme._currentTheme = BitTheme.getActualTheme(themeName)!; if (BitTheme._persist) { @@ -79,7 +106,9 @@ class BitTheme { document.documentElement.setAttribute(BitTheme.THEME_ATTRIBUTE, BitTheme._currentTheme); - BitTheme._onThemeChange?.(BitTheme._currentTheme, oldTheme); + BitTheme.dispatchThemeChange(BitTheme._currentTheme, oldTheme); + + BitTheme.syncSystemThemeListener(); return BitTheme._currentTheme; } @@ -94,9 +123,26 @@ class BitTheme { return BitTheme._currentTheme; } - public static applyBitTheme(theme: any, element?: HTMLElement) { + /** Pins storage (when persist is on) to system and follows OS light/dark until an explicit preset is set. */ + public static useSystem() { + return BitTheme.set(BitTheme.SYSTEM_THEME); + } + + public static applyBitTheme(theme: Record, element?: HTMLElement) { const el = element || document.body; - Object.keys(theme).forEach(key => el.style.setProperty(key, theme[key])); + const keys = Object.keys(theme); + const prev = BitTheme._appliedVarKeys.get(el) || []; + keys.forEach(key => el.style.setProperty(key, theme[key])); + BitTheme._appliedVarKeys.set(el, [...new Set([...prev, ...keys])]); + } + + /** Removes --bit-* properties previously applied by applyBitTheme on the target (default document.body). */ + public static clearAppliedBitTheme(element?: HTMLElement) { + const el = element || document.body; + const keys = BitTheme._appliedVarKeys.get(el); + if (!keys || keys.length === 0) return; + keys.forEach(k => el.style.removeProperty(k)); + BitTheme._appliedVarKeys.delete(el); } public static isSystemDark() { @@ -109,6 +155,65 @@ class BitTheme { return localStorage.getItem(BitTheme.THEME_STORAGE_KEY); } + public static registerDotNetNotifier(dotNetRef: DotNetObject) { + BitTheme._dotnetNotifier = dotNetRef; + } + + public static unregisterDotNetNotifier() { + BitTheme._dotnetNotifier = null; + } + + private static shouldFollowSystem(): boolean { + if (typeof document === 'undefined') return false; + if (BitTheme._stopFollowingSystem) return false; + if (BitTheme._persist && BitTheme.getPersisted() === BitTheme.SYSTEM_THEME) return true; + if (document.documentElement.hasAttribute('bit-theme-system')) return true; + return false; + } + + private static syncSystemThemeListener() { + BitTheme.detachSystemThemeListener(); + if (!BitTheme.shouldFollowSystem()) return; + BitTheme.attachSystemThemeListener(); + } + + private static attachSystemThemeListener() { + if (!window.matchMedia) return; + BitTheme._schemeMediaQuery = matchMedia('(prefers-color-scheme: dark)'); + BitTheme._schemeMediaQuery.addEventListener('change', BitTheme._onSchemeChange); + const legacy = BitTheme._schemeMediaQuery as unknown as { addListener?: (cb: () => void) => void }; + legacy.addListener?.(BitTheme._onSchemeChange); + } + + private static detachSystemThemeListener() { + if (!BitTheme._schemeMediaQuery) return; + BitTheme._schemeMediaQuery.removeEventListener('change', BitTheme._onSchemeChange); + const legacy = BitTheme._schemeMediaQuery as unknown as { removeListener?: (cb: () => void) => void }; + legacy.removeListener?.(BitTheme._onSchemeChange); + BitTheme._schemeMediaQuery = null; + } + + private static applyResolvedSystemThemeFromOs() { + if (!BitTheme.shouldFollowSystem()) return; + + const resolved = BitTheme.isSystemDark() ? BitTheme._darkTheme : BitTheme._lightTheme; + const oldTheme = document.documentElement.getAttribute(BitTheme.THEME_ATTRIBUTE) || ''; + + if (resolved === oldTheme) return; + + BitTheme._currentTheme = resolved; + document.documentElement.setAttribute(BitTheme.THEME_ATTRIBUTE, resolved); + BitTheme.dispatchThemeChange(resolved, oldTheme); + } + + private static dispatchThemeChange(newTheme: string, oldTheme: string) { + BitTheme._onThemeChange?.(newTheme, oldTheme); + const n = BitTheme._dotnetNotifier; + if (n) { + void n.invokeMethodAsync('NotifyThemeChangedFromJs', newTheme, oldTheme); + } + } + private static getActualTheme(theme: string | null) { if (theme === BitTheme.SYSTEM_THEME) { return BitTheme.isSystemDark() ? BitTheme._darkTheme : BitTheme._lightTheme; @@ -118,6 +223,24 @@ class BitTheme { } } +/** Attach or swap alternate theme stylesheets at runtime (prefer same-origin / trusted URLs). */ +class BitExternalTheme { + public static attach(linkId: string, href: string) { + let el = document.getElementById(linkId) as HTMLLinkElement | null; + if (!el) { + el = document.createElement('link'); + el.id = linkId; + el.rel = 'stylesheet'; + document.head.appendChild(el); + } + el.href = href; + } + + public static detach(linkId: string) { + document.getElementById(linkId)?.remove(); + } +} + (function () { const options = { system: document.documentElement.hasAttribute('bit-theme-system'), @@ -132,3 +255,4 @@ class BitTheme { }()); (window as any).BitTheme = BitTheme; +(window as any).BitExternalTheme = BitExternalTheme; diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor index b978899f42..301de48efa 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/ThemingPage.razor @@ -572,6 +572,52 @@ BitThemeColorDerivation.FillColorRoleFromMain(myTheme.Color.Primary, "#1A86D8");
+ + Advanced theming (API overview) +
+ + OS appearance: When bit-theme-system is on <html> or the persisted key is system, the client script listens for prefers-color-scheme changes and updates bit-theme without a reload. Call BitTheme.useSystem() or SetThemeAsync("system") to follow the OS again after choosing an explicit preset. + +
+ + .NET notifications: Inject BitThemeNotifications and subscribe to ThemeChanged. Use any method on BitThemeManager once per circuit so the script registers the JS bridge (or call EnsureThemeNotificationsRegisteredAsync). + +
+ + Clearing token overrides: ClearBitThemeOverridesAsync removes variables previously applied by ApplyBitThemeAsync. Prefer scoping brand tweaks inside BitThemeProvider instead of document.body. + +
+ + Accessibility: Fluent bundles include forced-colors / prefers-contrast guards and motion tokens (--bit-mot-*) with prefers-reduced-motion. Use BitThemeColorContrast for WCAG ratios and optional FillColorRoleFromMain(..., adjustTextForWcagAa: true). + +
+ + Layout tokens: BitTheme.Motion, BitTheme.Layout (direction, density scale, breakpoints) map to --bit-mot-*, --bit-layout-*, --bit-bp-*. Defaults include BitThemeBreakpointDefaults; compact presets via BitThemeDensityPresets.CreateCompactOverlay(). Semantic aliases such as --bit-sem-surface-page point at primitive tokens. + +
+ + RTL: Set dir="rtl" on <html> or a root element, and optionally Layout.Direction on BitTheme for --bit-layout-dir. Use logical properties in your app CSS where needed. + +
+ + Accent samples: BitAccentColorPresets lists starter hex values for primary branding. + +
+ + External CSS bundles: BitExternalThemeLoader attaches or removes a stylesheet link by id (BitExternalTheme.attach in JS). Use trusted URLs only. + +
+ + SSR cookies: BitThemeCookie.PreferenceCookieName documents a conventional cookie for server-rendered first paint; combine with your host reading the cookie and emitting the same theme key the client will use. + +
+ + Component defaults: Use cascading BitParams for per-tree defaults; a single global "component defaults registry" in BitTheme would need a design pass to avoid duplicating that model. + + + +
+ diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs new file mode 100644 index 0000000000..e6cdf7b46d --- /dev/null +++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorContrastTests.cs @@ -0,0 +1,23 @@ +using Microsoft.VisualStudio.TestTools.UnitTesting; + +namespace Bit.BlazorUI.Tests.Utils.Theme; + +[TestClass] +public sealed class BitThemeColorContrastTests +{ + [TestMethod] + public void BlackOnWhite_IsHighContrast() + { + var ratio = BitThemeColorContrast.GetContrastRatio("#000000", "#FFFFFF"); + Assert.IsTrue(ratio > 20); + Assert.IsTrue(BitThemeColorContrast.MeetsWcagAaNormalText(ratio)); + } + + [TestMethod] + public void SameColor_IsMinimumRatio() + { + var ratio = BitThemeColorContrast.GetContrastRatio("#FFFFFF", "#FFFFFF"); + Assert.AreEqual(1.0, ratio, 0.001); + Assert.IsFalse(BitThemeColorContrast.MeetsWcagAaNormalText(ratio)); + } +} From eee52c7a129736fc288da4e4f34f0fcaed3173da Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Tue, 19 May 2026 21:49:46 +0330 Subject: [PATCH 02/28] add focus state --- .../Buttons/ActionButton/BitActionButton.scss | 3 +- .../Components/Buttons/Button/BitButton.scss | 4 ++ .../Buttons/MenuButton/BitMenuButton.scss | 5 +++ .../Buttons/ToggleButton/BitToggleButton.scss | 4 ++ .../Inputs/Calendar/BitCalendar.scss | 3 +- .../Inputs/Checkbox/BitCheckbox.scss | 5 +++ .../Inputs/ChoiceGroup/BitChoiceGroup.scss | 6 +++ .../BitCircularTimePicker.scss | 23 ++++++----- .../Inputs/DatePicker/BitDatePicker.scss | 26 ++++++------ .../DateRangePicker/BitDateRangePicker.scss | 26 ++++++------ .../Inputs/Dropdown/BitDropdown.scss | 24 ++--------- .../Inputs/NumberField/BitNumberField.scss | 15 ++----- .../Inputs/OtpInput/BitOtpInput.scss | 9 ++-- .../Inputs/SearchBox/BitSearchBox.scss | 33 ++++++--------- .../Components/Inputs/Slider/BitSlider.scss | 19 ++++++++- .../Inputs/TagsInput/BitTagsInput.scss | 20 ++++----- .../Inputs/TextField/BitTextField.scss | 33 +++++++-------- .../Inputs/TimePicker/BitTimePicker.scss | 26 ++++++------ .../Components/Inputs/Toggle/BitToggle.scss | 4 ++ .../Navs/Breadcrumb/BitBreadcrumb.scss | 5 +++ .../Components/Navs/DropMenu/BitDropMenu.scss | 5 +++ .../Components/Navs/Pivot/BitPivot.scss | 8 ++++ .../Components/Utilities/Link/BitLink.scss | 9 ++++ .../Styles/Fluent/colors.fluent-dark.scss | 14 +++++++ .../Styles/Fluent/colors.fluent-light.scss | 14 +++++++ .../Styles/Fluent/forced-colors.fluent.scss | 13 ++++++ .../Styles/Fluent/semantic-tokens.fluent.scss | 2 + .../Styles/Fluent/shapes.fluent.scss | 8 ++++ src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss | 41 ++++++++++++++++++- .../Bit.BlazorUI/Styles/functions.scss | 41 +++++++++++++++++++ .../Bit.BlazorUI/Styles/theme-variables.scss | 18 ++++++++ 31 files changed, 323 insertions(+), 143 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss index 2419f9bc96..ab13c352f9 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss @@ -26,9 +26,8 @@ } &:focus-visible { - outline: none; + @include focus-ring(var(--bit-acb-clr-hover)); border-radius: $shp-border-radius; - box-shadow: 0 0 0 spacing(0.25) var(--bit-acb-clr-hover); } &.bit-dis { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss index 706393d462..04c68c80b7 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss @@ -21,6 +21,10 @@ --bit-btn-clr-brd-dis: #{$clr-brd-dis}; --bit-btn-float-offset: #{spacing(2)}; + &:focus-visible { + @include focus-ring(var(--bit-btn-clr)); + } + &.bit-dis { cursor: default; color: $clr-fg-dis; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss index ed6c18c215..e6fe9e5691 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss @@ -15,6 +15,11 @@ --bit-mnb-cal-opa: 0; --bit-mnb-cal-tra: translateY(#{spacing(-1.25)}); + &:focus-visible, + &:focus-within { + @include focus-ring(var(--bit-mnb-clr)); + } + &.bit-dis { cursor: default; color: $clr-fg-dis; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss index 11d9f8877a..7370ea9241 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss @@ -17,6 +17,10 @@ font-size: var(--bit-tgb-fontsize); --bit-tgb-icn-margin: #{spacing(0.5)}; + &:focus-visible { + @include focus-ring(var(--bit-tgb-clr)); + } + &.bit-dis { cursor: default; color: $clr-fg-dis; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss index 2e4d4e4486..dc19e6675a 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Calendar/BitCalendar.scss @@ -471,9 +471,8 @@ } &:focus { + @include focus-underline-ring; border: none; - outline: none; - border-bottom: $shp-border-width $shp-border-style $clr-brd-pri-active; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss index ca17030c29..c81772a33f 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss @@ -3,11 +3,16 @@ .bit-chb { cursor: pointer; width: fit-content; + border-radius: $shp-border-radius; font-family: $tg-font-family; --bit-chb-ico-opa: 0; --bit-chb-box-clr-brd: #{$clr-brd-pri}; --bit-chb-ico-clr: #{var(--bit-chb-clr-txt-sec)}; + &:focus-visible { + @include focus-ring; + } + @media (hover: hover) { &:hover { --bit-chb-ico-opa: 1; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss index e0e852a80e..c887475017 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss @@ -154,9 +154,15 @@ justify-content: center; min-height: spacing(2.5); transition: all 0.2s ease; + border-radius: $shp-border-radius; padding-block-start: spacing(2.75); border: $shp-border-width $shp-border-style transparent; + &:focus-visible, + input:focus-visible + & { + @include focus-ring; + } + .bit-chg-rad { position: absolute; top: calc(var(--bit-chg-circle-size) / 4); diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss index 969a882103..d4a529d25e 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/CircularTimePicker/BitCircularTimePicker.scss @@ -44,6 +44,14 @@ .bit-ctp-icn { border-color: $clr-err; } + + &.bit-ctp-foc .bit-ctp-icn { + @include focus-ring($clr-err-focus); + } + + &.bit-ctp-und.bit-ctp-foc .bit-ctp-icn { + @include focus-underline-ring($clr-err-focus); + } } } @@ -122,13 +130,8 @@ } .bit-ctp-foc { - .bit-ctp-icn::after { - content: ""; - position: absolute; - pointer-events: none; - inset: spacing(-0.125); - border-radius: $shp-border-radius; - border: spacing(0.25) $shp-border-style $clr-pri; + .bit-ctp-icn { + @include focus-ring; } } @@ -152,10 +155,8 @@ } &.bit-ctp-foc { - .bit-ctp-icn::after { - border: none; - border-radius: 0; - border-bottom: spacing(0.25) $shp-border-style $clr-brd-pri; + .bit-ctp-icn { + @include focus-underline-ring; } } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss index 6d8fc51efa..dd700a0a58 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DatePicker/BitDatePicker.scss @@ -50,6 +50,14 @@ .bit-dtp-icn { border-color: $clr-err; } + + &.bit-dtp-foc .bit-dtp-icn { + @include focus-ring($clr-err-focus); + } + + &.bit-dtp-und.bit-dtp-foc .bit-dtp-icn { + @include focus-underline-ring($clr-err-focus); + } } &.bit-rtl { @@ -163,13 +171,8 @@ } .bit-dtp-foc { - .bit-dtp-icn::after { - content: ""; - position: absolute; - pointer-events: none; - inset: spacing(-0.125); - border-radius: $shp-border-radius; - border: spacing(0.25) $shp-border-style $clr-pri; + .bit-dtp-icn { + @include focus-ring; } } @@ -655,9 +658,8 @@ } &:focus { + @include focus-underline-ring; border: none; - border-bottom: $shp-border-width $shp-border-style $clr-brd-pri-active; - outline: none; } &:disabled { @@ -722,10 +724,8 @@ } &.bit-dtp-foc { - .bit-dtp-icn::after { - border: none; - border-radius: 0; - border-bottom: spacing(0.25) $shp-border-style $clr-brd-pri; + .bit-dtp-icn { + @include focus-underline-ring; } } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss index 0add6f91e9..41c88aee5e 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/DateRangePicker/BitDateRangePicker.scss @@ -50,6 +50,14 @@ .bit-dtrp-icp { border-color: $clr-err; } + + &.bit-dtrp-foc .bit-dtrp-icn { + @include focus-ring($clr-err-focus); + } + + &.bit-dtrp-und.bit-dtrp-foc .bit-dtrp-icn { + @include focus-underline-ring($clr-err-focus); + } } &.bit-rtl { @@ -163,13 +171,8 @@ } .bit-dtrp-foc { - .bit-dtrp-icn::after { - content: ""; - position: absolute; - pointer-events: none; - inset: spacing(-0.125); - border-radius: $shp-border-radius; - border: spacing(0.25) $shp-border-style $clr-pri; + .bit-dtrp-icn { + @include focus-ring; } } @@ -688,9 +691,8 @@ } &:focus { + @include focus-underline-ring; border: none; - outline: none; - border-bottom: $shp-border-width $shp-border-style $clr-brd-pri-active; } &:disabled { @@ -766,10 +768,8 @@ } &.bit-dtrp-foc { - .bit-dtrp-icn::after { - border: none; - border-radius: 0; - border-bottom: spacing(0.25) $shp-border-style $clr-brd-pri; + .bit-dtrp-icn { + @include focus-underline-ring; } } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss index b236acee23..b61627025c 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Dropdown/BitDropdown.scss @@ -28,9 +28,7 @@ } &:focus { - &::after { - border-color: $clr-err; - } + @include focus-ring($clr-err-focus); } } } @@ -51,12 +49,7 @@ &:focus { color: $clr-fg-dis; border-color: $clr-brd-dis; - - &::after { - width: 0; - height: 0; - border: none; - } + box-shadow: none; // Suppress focus ring while disabled. } } @@ -102,9 +95,7 @@ } &:focus { - &::after { - border: none; - } + box-shadow: none; // No-border variant suppresses the themed focus ring. } } } @@ -167,14 +158,7 @@ color: $clr-fg-pri; } - &::after { - content: ""; - position: absolute; - pointer-events: none; - inset: spacing(-0.125); - border-radius: $shp-border-radius; - border: spacing(0.25) $shp-border-style $clr-pri; - } + @include focus-ring; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scss index 19c1e37c05..63aa870255 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.scss @@ -52,10 +52,8 @@ border-color: $clr-err; } - &.bit-nfl-fcs { - .bit-nfl-cnt::after { - border-color: $clr-err; - } + &.bit-nfl-fcs .bit-nfl-cnt { + @include focus-ring($clr-err-focus); } } @@ -259,13 +257,8 @@ } .bit-nfl-fcs { - .bit-nfl-cnt::after { - content: ""; - position: absolute; - pointer-events: none; - inset: spacing(-0.125); - border-radius: $shp-border-radius; - border: spacing(0.25) $shp-border-style $clr-pri; + .bit-nfl-cnt { + @include focus-ring; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss index 120f6352fd..ebbdfdea11 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss @@ -23,6 +23,10 @@ .bit-otp-inp { outline: none; border-color: $clr-err; + + &:focus-visible { + @include focus-ring($clr-err-focus); + } } } } @@ -65,9 +69,8 @@ -webkit-appearance: none } - &:focus { - outline: none; - border: spacing(0.25) $shp-border-style $clr-pri; + &:focus-visible { + @include focus-ring; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss index d218bd57eb..116c841bb6 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss @@ -84,13 +84,14 @@ } &.bit-srb-foc { - .bit-srb-cnt::after { - border-color: $clr-err; + .bit-srb-cnt { + @include focus-ring($clr-err-focus); } &.bit-srb-und { - .bit-srb-cnt::after { - border-color: $clr-err; + .bit-srb-cnt, + .bit-srb-sbn { + @include focus-underline-ring($clr-err-focus); } } } @@ -346,32 +347,22 @@ border-color: var(--bit-srb-clr); } - .bit-srb-cnt::after { - content: ""; - position: absolute; - pointer-events: none; - inset: spacing(-0.125); - border-radius: $shp-border-radius; - border: spacing(0.25) $shp-border-style var(--bit-srb-clr); + .bit-srb-cnt { + @include focus-ring(var(--bit-srb-clr)); } &.bit-srb-und { - .bit-srb-cnt::after, - .bit-srb-sbn::after { - content: ""; - border: none; - position: absolute; - pointer-events: none; - inset: spacing(-0.125); - border-bottom: spacing(0.25) $shp-border-style var(--bit-srb-clr); + .bit-srb-cnt, + .bit-srb-sbn { + @include focus-underline-ring(var(--bit-srb-clr)); } } } .bit-srb-nbr { - .bit-srb-cnt, - .bit-srb-cnt::after { + .bit-srb-cnt { border: none; + box-shadow: none; // Suppress the themed focus ring for the no-border variant. } .bit-srb-sbn { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss index 1e82079532..eb515a8804 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Slider/BitSlider.scss @@ -15,10 +15,27 @@ $BgHover: $clr-pri-light; background: none; &:focus { - outline: none; + outline: none; // The visible focus indicator lives on the thumb pseudo-element below. } } /**/ + /*webkit*/ + input:focus-visible::-webkit-slider-thumb, + input:focus::-webkit-slider-thumb { + border-color: $clr-pri-focus; + box-shadow: + 0 0 0 $shp-focus-ring-offset $clr-bg-pri-focus, + 0 0 0 calc(#{$shp-focus-ring-offset} + #{$shp-focus-ring-width}) $clr-pri-focus; + } + + input:focus-visible::-moz-range-thumb, + input:focus::-moz-range-thumb { + border-color: $clr-pri-focus; + box-shadow: + 0 0 0 $shp-focus-ring-offset $clr-bg-pri-focus, + 0 0 0 calc(#{$shp-focus-ring-offset} + #{$shp-focus-ring-width}) $clr-pri-focus; + } + /*webkit*/ input::-webkit-slider-thumb { width: spacing(2); diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scss index 4f9dcf4c00..585d2c54be 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TagsInput/BitTagsInput.scss @@ -23,6 +23,11 @@ .bit-tgi-cnt { border-color: $clr-err; } + + &.bit-tgi-fcs .bit-tgi-cnt { + @include focus-ring($clr-err-focus); + border-color: $clr-err-focus; + } } @media (hover: hover) { @@ -42,19 +47,8 @@ .bit-tgi-fcs { .bit-tgi-cnt { - border-color: $clr-pri; - outline: none; - - &::after { - content: ""; - height: 2px; - left: -1px; - right: -1px; - bottom: -1px; - position: absolute; - background-color: $clr-pri; - border-radius: 0 0 $shp-border-radius $shp-border-radius; - } + @include focus-ring; + border-color: $clr-pri-focus; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss index 0075196c42..8a534fbfd0 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.scss @@ -69,13 +69,17 @@ } &.bit-tfl-fcs { - .bit-tfl-fgp::after { - border-color: $clr-err; + .bit-tfl-fgp { + @include focus-ring($clr-err-focus); } &.bit-tfl-und { - .bit-tfl-wrp::after { - border-color: $clr-err; + .bit-tfl-fgp { + box-shadow: none; + } + + .bit-tfl-wrp { + @include focus-underline-ring($clr-err-focus); } } } @@ -313,26 +317,17 @@ color: var(--bit-tfl-clr); } - .bit-tfl-fgp::after { - content: ""; - position: absolute; - pointer-events: none; - inset: spacing(-0.125); - border-radius: $shp-border-radius; - border: spacing(0.25) $shp-border-style var(--bit-tfl-clr); + .bit-tfl-fgp { + @include focus-ring(var(--bit-tfl-clr)); } &.bit-tfl-und { - .bit-tfl-fgp::after { - border: none; + .bit-tfl-fgp { + box-shadow: none; // underlined variant uses a bottom rule instead of a full ring. } - .bit-tfl-wrp::after { - content: ""; - position: absolute; - pointer-events: none; - inset: spacing(-0.125); - border-bottom: spacing(0.25) $shp-border-style var(--bit-tfl-clr); + .bit-tfl-wrp { + @include focus-underline-ring(var(--bit-tfl-clr)); } } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scss index 881531c550..49eb53243e 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/TimePicker/BitTimePicker.scss @@ -41,6 +41,14 @@ .bit-tpc-icn { border-color: $clr-err; } + + &.bit-tpc-foc .bit-tpc-icn { + @include focus-ring($clr-err-focus); + } + + &.bit-tpc-und.bit-tpc-foc .bit-tpc-icn { + @include focus-underline-ring($clr-err-focus); + } } &.bit-rtl { @@ -129,13 +137,8 @@ } .bit-tpc-foc { - .bit-tpc-icn::after { - content: ""; - position: absolute; - pointer-events: none; - inset: spacing(-0.125); - border-radius: $shp-border-radius; - border: spacing(0.25) $shp-border-style $clr-pri; + .bit-tpc-icn { + @include focus-ring; } } @@ -159,10 +162,8 @@ } &.bit-tpc-foc { - .bit-tpc-icn::after { - border: none; - border-radius: 0; - border-bottom: spacing(0.25) $shp-border-style $clr-brd-pri; + .bit-tpc-icn { + @include focus-underline-ring; } } } @@ -281,9 +282,8 @@ } &:focus { + @include focus-underline-ring; border: none; - border-bottom: $shp-border-width $shp-border-style $clr-brd-pri-active; - outline: none; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scss index 272168857b..10b84879e8 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Toggle/BitToggle.scss @@ -120,6 +120,10 @@ border-radius: spacing(1.25); border: $shp-border-width $shp-border-style $clr-brd-pri; + &:focus-visible { + @include focus-ring; + } + @media (hover: hover) { &:hover { border-color: $clr-brd-pri-hover; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scss index 49baafcb2e..8f17d3d8fb 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Breadcrumb/BitBreadcrumb.scss @@ -146,6 +146,11 @@ line-height: spacing(2.5); background-color: transparent; border: $shp-border-width $shp-border-style transparent; + border-radius: $shp-border-radius; + + &:focus-visible { + @include focus-ring; + } } .bit-brc-ofi { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss index 8f8300bfbf..d7b64d2883 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/DropMenu/BitDropMenu.scss @@ -50,6 +50,11 @@ justify-content: center; background-color: transparent; padding: spacing(1.0) spacing(1.5); + border-radius: $shp-border-radius; + + &:focus-visible { + @include focus-ring; + } } .bit-drm-trn { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss index a74b4e844e..a21721d260 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss @@ -168,6 +168,10 @@ background-color: transparent; color: $clr-fg-pri; + &:focus-visible { + @include focus-ring(var(--bit-pvt-clr)); + } + > span { height: 100%; display: flex; @@ -207,6 +211,10 @@ line-height: spacing(5.5); background-color: transparent; + &:focus-visible { + @include focus-ring(var(--bit-pvt-clr)); + } + &::before { bottom: 0; content: ""; diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss index 1402f2c809..7bf2faa285 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss @@ -11,6 +11,7 @@ color: var(--bit-lnk-clr); font-family: $tg-font-family; background-color: transparent; + border-radius: $shp-border-radius; &:hover, &:active, @@ -18,6 +19,10 @@ color: var(--bit-lnk-clr-hover); } + &:focus-visible { + @include focus-ring(var(--bit-lnk-clr)); + } + &:hover, &:active { text-decoration: underline; @@ -33,6 +38,10 @@ color: $clr-fg-dis; } + &:focus-visible { + box-shadow: none; + } + &:hover, &:active { text-decoration: none; diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss index a9cf715ed3..29fa4a71cf 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss @@ -179,4 +179,18 @@ --bit-clr-brd-dis: #21262D; //req --bit-clr-req: #A4262C; + //focus (a11y) — color of the focus indicator per role. + //Aliased to the role's base color so they track theme/brand overrides. + //Override these directly to differentiate focus from base color. + --bit-clr-pri-focus: var(--bit-clr-pri); + --bit-clr-sec-focus: var(--bit-clr-sec); + --bit-clr-ter-focus: var(--bit-clr-ter); + --bit-clr-inf-focus: var(--bit-clr-inf); + --bit-clr-suc-focus: var(--bit-clr-suc); + --bit-clr-wrn-focus: var(--bit-clr-wrn); + --bit-clr-swr-focus: var(--bit-clr-swr); + --bit-clr-err-focus: var(--bit-clr-err); + --bit-clr-fg-pri-focus: var(--bit-clr-fg-pri); + --bit-clr-bg-pri-focus: var(--bit-clr-bg-pri); + --bit-clr-brd-pri-focus: var(--bit-clr-pri); } diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss index 8932a59828..17d73d3d44 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss @@ -181,4 +181,18 @@ --bit-clr-brd-dis: #E5E3DF; //req --bit-clr-req: #A4262C; + //focus (a11y) — color of the focus indicator per role. + //Aliased to the role's base color so they track theme/brand overrides. + //Override these directly to differentiate focus from base color. + --bit-clr-pri-focus: var(--bit-clr-pri); + --bit-clr-sec-focus: var(--bit-clr-sec); + --bit-clr-ter-focus: var(--bit-clr-ter); + --bit-clr-inf-focus: var(--bit-clr-inf); + --bit-clr-suc-focus: var(--bit-clr-suc); + --bit-clr-wrn-focus: var(--bit-clr-wrn); + --bit-clr-swr-focus: var(--bit-clr-swr); + --bit-clr-err-focus: var(--bit-clr-err); + --bit-clr-fg-pri-focus: var(--bit-clr-fg-pri); + --bit-clr-bg-pri-focus: var(--bit-clr-bg-pri); + --bit-clr-brd-pri-focus: var(--bit-clr-pri); } diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss index 03da9f5883..0e8816c937 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/forced-colors.fluent.scss @@ -21,6 +21,19 @@ --bit-shd-nm: none; --bit-shd-md: none; --bit-shd-lg: none; + // Focus must remain visible in High Contrast — use system Highlight color and a single solid ring. + --bit-clr-pri-focus: Highlight; + --bit-clr-sec-focus: Highlight; + --bit-clr-ter-focus: Highlight; + --bit-clr-inf-focus: Highlight; + --bit-clr-suc-focus: Highlight; + --bit-clr-wrn-focus: Highlight; + --bit-clr-swr-focus: Highlight; + --bit-clr-err-focus: Highlight; + --bit-clr-fg-pri-focus: Highlight; + --bit-clr-bg-pri-focus: Canvas; + --bit-clr-brd-pri-focus: Highlight; + --bit-shd-focus-ring: 0 0 0 max(2px, var(--bit-shp-focus-ring-width)) Highlight; } } diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scss index 285262b2d6..b00a3ec20c 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/semantic-tokens.fluent.scss @@ -7,4 +7,6 @@ --bit-sem-text-secondary: var(--bit-clr-fg-sec); --bit-sem-border-default: var(--bit-clr-brd-pri); --bit-sem-accent-primary: var(--bit-clr-pri); + --bit-sem-focus-ring: var(--bit-shd-focus-ring); + --bit-sem-focus-color: var(--bit-clr-pri-focus); } diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scss index 3e99d57778..f13ee70d8c 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/shapes.fluent.scss @@ -16,4 +16,12 @@ --bit-shp-brd-radius: 0.125rem; --bit-shp-brd-width: 0.0625rem; --bit-shp-brd-style: solid; + //focus ring (a11y) — width is the visible thickness, offset is the gap between the element and the ring. + --bit-shp-focus-ring-width: 0.125rem; //2px + --bit-shp-focus-ring-offset: 0.125rem; //2px + //global focus shadow used by the focus-ring mixin and the .bit-css-shd-focus utility. + //Inner ring uses the page background to create a separator between the element and the colored ring (WCAG 2.4.11/2.4.13). + --bit-shd-focus-ring: + 0 0 0 var(--bit-shp-focus-ring-offset) var(--bit-clr-bg-pri-focus), + 0 0 0 calc(var(--bit-shp-focus-ring-offset) + var(--bit-shp-focus-ring-width)) var(--bit-clr-pri-focus); } diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss b/src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss index 5fbd89cc52..86e4221c24 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/bit-css.scss @@ -1,4 +1,4 @@ -@import "theme-variables.scss"; +@import "functions.scss"; //primary .bit-css-clr-pri { @@ -939,3 +939,42 @@ .bit-css-shp-brd-style { border-style: $shp-border-style; } + + +//focus (a11y) — color tokens applied on :focus-visible. +.bit-css-clr-pri-focus:focus-visible { + color: $clr-pri-focus; +} + +.bit-css-clr-sec-focus:focus-visible { + color: $clr-sec-focus; +} + +.bit-css-clr-ter-focus:focus-visible { + color: $clr-ter-focus; +} + +.bit-css-clr-inf-focus:focus-visible { + color: $clr-inf-focus; +} + +.bit-css-clr-suc-focus:focus-visible { + color: $clr-suc-focus; +} + +.bit-css-clr-wrn-focus:focus-visible { + color: $clr-wrn-focus; +} + +.bit-css-clr-swr-focus:focus-visible { + color: $clr-swr-focus; +} + +.bit-css-clr-err-focus:focus-visible { + color: $clr-err-focus; +} + +//focus ring utility — drop-in class to apply the global, theme-aware focus indicator. +.bit-css-shd-focus-ring:focus-visible { + @include focus-ring; +} diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss b/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss index feee193b9f..d9f11a5839 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/functions.scss @@ -18,3 +18,44 @@ $html-font-size: 16px; @function spacing($spacingValue) { @return calc($spacing-scaling-factor * $spacingValue); } + +/* + * focus-ring($color, $offset) + * -------------------------------------------------- + * Renders a consistent, theme-aware focus indicator across components. + * + * Behavior: + * - Uses a two-layer box-shadow: an inner ring matching the page background + * (separator) and an outer colored ring (visible indicator). This satisfies + * WCAG 2.4.11 (Focus Not Obscured) and 2.4.13 (Focus Appearance). + * - Width is driven by --bit-shp-focus-ring-width and offset by --bit-shp-focus-ring-offset, + * both globally themable. + * - Color defaults to --bit-clr-pri-focus and accepts any role token (e.g. $clr-err-focus) + * so invalid/success/etc. variants can opt into matching focus colors. + * - In Windows High Contrast mode the global --bit-shd-focus-ring is overridden to a + * single solid Highlight ring; @see forced-colors.fluent.scss. + * + * Usage: + * .my-component { + * &:focus-visible { @include focus-ring; } + * &.bit-inv:focus-visible { @include focus-ring($clr-err-focus); } + * } + */ +@mixin focus-ring($color: $clr-pri-focus, $offset: $shp-focus-ring-offset) { + outline: none; // Replace native outline with the themed ring below. + box-shadow: + 0 0 0 #{$offset} #{$clr-bg-pri-focus}, + 0 0 0 calc(#{$offset} + #{$shp-focus-ring-width}) #{$color}; +} + +/* + * focus-underline-ring($color) + * -------------------------------------------------- + * Renders a focus indicator as a single bottom rule, used by "underlined" + * input variants (TextField/SearchBox/DatePicker .bit-*-und) where a full ring + * conflicts with the visual language of the component. + */ +@mixin focus-underline-ring($color: $clr-pri-focus) { + outline: none; + box-shadow: inset 0 calc(-1 * #{$shp-focus-ring-width}) 0 0 #{$color}; +} diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss b/src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss index 66c82ab061..b1da141eab 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss @@ -189,6 +189,19 @@ $clr-brd-dis: var(--bit-clr-brd-dis); //required $clr-req: var(--bit-clr-req); +//focus (a11y) — per-role focus indicator color, plus shape/shadow tokens consumed by the focus-ring mixin. +$clr-pri-focus: var(--bit-clr-pri-focus); +$clr-sec-focus: var(--bit-clr-sec-focus); +$clr-ter-focus: var(--bit-clr-ter-focus); +$clr-inf-focus: var(--bit-clr-inf-focus); +$clr-suc-focus: var(--bit-clr-suc-focus); +$clr-wrn-focus: var(--bit-clr-wrn-focus); +$clr-swr-focus: var(--bit-clr-swr-focus); +$clr-err-focus: var(--bit-clr-err-focus); +$clr-fg-pri-focus: var(--bit-clr-fg-pri-focus); +$clr-bg-pri-focus: var(--bit-clr-bg-pri-focus); +$clr-brd-pri-focus: var(--bit-clr-brd-pri-focus); + //neutrals $clr-ntr-white: var(--bit-clr-ntr-white); $clr-ntr-black: var(--bit-clr-ntr-black); @@ -268,6 +281,11 @@ $zindex-base: var(--bit-zin-base); $shp-border-radius: var(--bit-shp-brd-radius); $shp-border-width: var(--bit-shp-brd-width); $shp-border-style: var(--bit-shp-brd-style); +$shp-focus-ring-width: var(--bit-shp-focus-ring-width); +$shp-focus-ring-offset: var(--bit-shp-focus-ring-offset); + +//shadows-focus +$box-shadow-focus-ring: var(--bit-shd-focus-ring); /*---- Typography ----*/ $tg-font-family: var(--bit-tpg-font-family); From 4d4e8e0adfedd3f3eeb4f3496d585338fb25bc26 Mon Sep 17 00:00:00 2001 From: Saleh Yusefnejad Date: Fri, 22 May 2026 11:21:34 +0330 Subject: [PATCH 03/28] add per-role disabled color --- .../Buttons/ActionButton/BitActionButton.scss | 21 +- .../Components/Buttons/Button/BitButton.scss | 52 +- .../Buttons/ButtonGroup/BitButtonGroup.scss | 54 +- .../Buttons/MenuButton/BitMenuButton.scss | 55 +- .../Buttons/ToggleButton/BitToggleButton.scss | 50 +- .../Inputs/Checkbox/BitCheckbox.scss | 50 +- .../Inputs/ChoiceGroup/BitChoiceGroup.scss | 46 +- .../Inputs/SearchBox/BitSearchBox.scss | 54 +- .../Lists/Timeline/BitTimeline.scss | 24 +- .../Components/Navs/NavBar/BitNavBar.scss | 21 +- .../Navs/Pagination/BitPagination.scss | 23 +- .../Components/Navs/Pivot/BitPivot.scss | 44 +- .../Notifications/Badge/BitBadge.scss | 26 +- .../Components/Notifications/Tag/BitTag.scss | 44 +- .../Components/Utilities/Icon/BitIcon.scss | 58 +- .../Components/Utilities/Link/BitLink.scss | 21 +- .../Styles/Fluent/colors.fluent-dark.scss | 34 + .../Styles/Fluent/colors.fluent-light.scss | 34 + .../Bit.BlazorUI/Styles/theme-variables.scss | 36 + .../ActionButton/BitActionButtonDemo.razor | 33 + .../BitActionButtonDemo.razor.samples.cs | 24 +- .../Buttons/Button/BitButtonDemo.razor | 110 ++++ .../Button/BitButtonDemo.razor.samples.cs | 73 ++- .../ButtonGroup/BitButtonGroupDemo.razor.scss | 7 +- .../_BitButtonGroupCustomDemo.razor | 123 ++++ ..._BitButtonGroupCustomDemo.razor.samples.cs | 76 ++- .../ButtonGroup/_BitButtonGroupItemDemo.razor | 191 +++++- .../_BitButtonGroupItemDemo.razor.samples.cs | 76 ++- .../_BitButtonGroupOptionDemo.razor | 225 +++++++ ..._BitButtonGroupOptionDemo.razor.samples.cs | 176 +++++ .../MenuButton/_BitMenuButtonCustomDemo.razor | 208 ++++++ .../_BitMenuButtonCustomDemo.razor.samples.cs | 157 ++++- .../MenuButton/_BitMenuButtonItemDemo.razor | 208 ++++++ .../_BitMenuButtonItemDemo.razor.samples.cs | 157 ++++- .../MenuButton/_BitMenuButtonOptionDemo.razor | 616 ++++++++++++++++++ .../_BitMenuButtonOptionDemo.razor.cs | 565 +++++++++++++++- .../ToggleButton/BitToggleButtonDemo.razor | 106 +++ .../BitToggleButtonDemo.razor.samples.cs | 71 +- .../Inputs/Checkbox/BitCheckboxDemo.razor | 110 ++++ .../Checkbox/BitCheckboxDemo.razor.samples.cs | 71 +- .../_BitChoiceGroupCustomDemo.razor | 174 +++++ ..._BitChoiceGroupCustomDemo.razor.samples.cs | 137 +++- .../ChoiceGroup/_BitChoiceGroupItemDemo.razor | 157 +++++ .../_BitChoiceGroupItemDemo.razor.samples.cs | 122 +++- .../_BitChoiceGroupOptionDemo.razor | 158 +++++ ..._BitChoiceGroupOptionDemo.razor.samples.cs | 119 ++++ .../Inputs/SearchBox/BitSearchBoxDemo.razor | 72 ++ .../BitSearchBoxDemo.razor.samples.cs | 106 ++- .../Timeline/_BitTimelineCustomDemo.razor | 58 ++ .../_BitTimelineCustomDemo.razor.samples.cs | 37 +- .../Lists/Timeline/_BitTimelineItemDemo.razor | 58 ++ .../_BitTimelineItemDemo.razor.samples.cs | 37 +- .../Timeline/_BitTimelineOptionDemo.razor | 154 +++++ .../Timeline/_BitTimelineOptionDemo.razor.cs | 154 +++++ .../Navs/Pagination/BitPaginationDemo.razor | 58 ++ .../BitPaginationDemo.razor.samples.cs | 37 +- .../Components/Navs/Pivot/BitPivotDemo.razor | 207 ++++-- .../Navs/Pivot/BitPivotDemo.razor.cs | 148 +++-- .../Notifications/Badge/BitBadgeDemo.razor | 106 +++ .../Notifications/Badge/BitBadgeDemo.razor.cs | 81 +++ .../Notifications/Tag/BitTagDemo.razor | 25 + .../Notifications/Tag/BitTagDemo.razor.cs | 25 +- .../Utilities/Icon/BitIconDemo.razor | 92 +++ .../Utilities/Icon/BitIconDemo.razor.cs | 38 +- .../Utilities/Link/BitLinkDemo.razor | 42 ++ .../Link/BitLinkDemo.razor.samples.cs | 24 +- 66 files changed, 6297 insertions(+), 259 deletions(-) diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss index ab13c352f9..3acb76b4cf 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ActionButton/BitActionButton.scss @@ -32,9 +32,9 @@ &.bit-dis { cursor: default; - color: $clr-fg-dis; pointer-events: none; - --bit-acb-clr-ico: #{$clr-fg-dis}; + color: var(--bit-acb-clr-dis-text); + --bit-acb-clr-ico: var(--bit-acb-clr-dis-text); } } @@ -117,48 +117,56 @@ --bit-acb-clr-ico: #{$clr-pri}; --bit-acb-clr-hover: #{$clr-pri-hover}; --bit-acb-clr-active: #{$clr-pri-active}; + --bit-acb-clr-dis-text: #{$clr-pri-dis-text}; } .bit-acb-sec { --bit-acb-clr-ico: #{$clr-sec}; --bit-acb-clr-hover: #{$clr-sec-hover}; --bit-acb-clr-active: #{$clr-sec-active}; + --bit-acb-clr-dis-text: #{$clr-sec-dis-text}; } .bit-acb-ter { --bit-acb-clr-ico: #{$clr-ter}; --bit-acb-clr-hover: #{$clr-ter-hover}; --bit-acb-clr-active: #{$clr-ter-active}; + --bit-acb-clr-dis-text: #{$clr-ter-dis-text}; } .bit-acb-inf { --bit-acb-clr-ico: #{$clr-inf}; --bit-acb-clr-hover: #{$clr-inf-hover}; --bit-acb-clr-active: #{$clr-inf-active}; + --bit-acb-clr-dis-text: #{$clr-inf-dis-text}; } .bit-acb-suc { --bit-acb-clr-ico: #{$clr-suc}; --bit-acb-clr-hover: #{$clr-suc-hover}; --bit-acb-clr-active: #{$clr-suc-active}; + --bit-acb-clr-dis-text: #{$clr-suc-dis-text}; } .bit-acb-wrn { --bit-acb-clr-ico: #{$clr-wrn}; --bit-acb-clr-hover: #{$clr-wrn-hover}; --bit-acb-clr-active: #{$clr-wrn-active}; + --bit-acb-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-acb-swr { --bit-acb-clr-ico: #{$clr-swr}; --bit-acb-clr-hover: #{$clr-swr-hover}; --bit-acb-clr-active: #{$clr-swr-active}; + --bit-acb-clr-dis-text: #{$clr-swr-dis-text}; } .bit-acb-err { --bit-acb-clr-ico: #{$clr-err}; --bit-acb-clr-hover: #{$clr-err-hover}; --bit-acb-clr-active: #{$clr-err-active}; + --bit-acb-clr-dis-text: #{$clr-err-dis-text}; } @@ -166,54 +174,63 @@ --bit-acb-clr-ico: #{$clr-bg-pri}; --bit-acb-clr-hover: #{$clr-bg-pri-hover}; --bit-acb-clr-active: #{$clr-bg-pri-active}; + --bit-acb-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-acb-sbg { --bit-acb-clr-ico: #{$clr-bg-sec}; --bit-acb-clr-hover: #{$clr-bg-sec-hover}; --bit-acb-clr-active: #{$clr-bg-sec-active}; + --bit-acb-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-acb-tbg { --bit-acb-clr-ico: #{$clr-bg-ter}; --bit-acb-clr-hover: #{$clr-bg-ter-hover}; --bit-acb-clr-active: #{$clr-bg-ter-active}; + --bit-acb-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-acb-pfg { --bit-acb-clr-ico: #{$clr-fg-pri}; --bit-acb-clr-hover: #{$clr-fg-pri-hover}; --bit-acb-clr-active: #{$clr-fg-pri-active}; + --bit-acb-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-acb-sfg { --bit-acb-clr-ico: #{$clr-fg-sec}; --bit-acb-clr-hover: #{$clr-fg-sec-hover}; --bit-acb-clr-active: #{$clr-fg-sec-active}; + --bit-acb-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-acb-tfg { --bit-acb-clr-ico: #{$clr-fg-ter}; --bit-acb-clr-hover: #{$clr-fg-ter-hover}; --bit-acb-clr-active: #{$clr-fg-ter-active}; + --bit-acb-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-acb-pbr { --bit-acb-clr-ico: #{$clr-brd-pri}; --bit-acb-clr-hover: #{$clr-brd-pri-hover}; --bit-acb-clr-active: #{$clr-brd-pri-active}; + --bit-acb-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-acb-sbr { --bit-acb-clr-ico: #{$clr-brd-sec}; --bit-acb-clr-hover: #{$clr-brd-sec-hover}; --bit-acb-clr-active: #{$clr-brd-sec-active}; + --bit-acb-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-acb-tbr { --bit-acb-clr-ico: #{$clr-brd-ter}; --bit-acb-clr-hover: #{$clr-brd-ter-hover}; --bit-acb-clr-active: #{$clr-brd-ter-active}; + --bit-acb-clr-dis-text: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss index 04c68c80b7..79932c46d8 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/Button/BitButton.scss @@ -17,8 +17,6 @@ border-width: $shp-border-width; border-style: $shp-border-style; border-radius: $shp-border-radius; - --bit-btn-clr-bg-dis: #{$clr-bg-dis}; - --bit-btn-clr-brd-dis: #{$clr-brd-dis}; --bit-btn-float-offset: #{spacing(2)}; &:focus-visible { @@ -27,7 +25,6 @@ &.bit-dis { cursor: default; - color: $clr-fg-dis; pointer-events: none; } @@ -134,8 +131,9 @@ } &.bit-dis { - border-color: var(--bit-btn-clr-brd-dis); - background-color: var(--bit-btn-clr-bg-dis); + color: var(--bit-btn-clr-dis-text); + border-color: var(--bit-btn-clr-dis); + background-color: var(--bit-btn-clr-dis); } } @@ -157,7 +155,9 @@ } &.bit-dis { - border-color: var(--bit-btn-clr-brd-dis); + color: var(--bit-btn-clr-dis-text); + border-color: var(--bit-btn-clr-dis); + background-color: transparent; } } @@ -177,6 +177,12 @@ color: var(--bit-btn-clr-txt); background-color: var(--bit-btn-clr-active); } + + &.bit-dis { + color: var(--bit-btn-clr-dis-text); + border-color: transparent; + background-color: transparent; + } } @@ -186,6 +192,8 @@ --bit-btn-clr-hover: #{$clr-pri-hover}; --bit-btn-clr-active: #{$clr-pri-active}; --bit-btn-clr-spn: #{$clr-pri-dark}; + --bit-btn-clr-dis: #{$clr-pri-dis}; + --bit-btn-clr-dis-text: #{$clr-pri-dis-text}; } .bit-btn-sec { @@ -194,6 +202,8 @@ --bit-btn-clr-hover: #{$clr-sec-hover}; --bit-btn-clr-active: #{$clr-sec-active}; --bit-btn-clr-spn: #{$clr-sec-dark}; + --bit-btn-clr-dis: #{$clr-sec-dis}; + --bit-btn-clr-dis-text: #{$clr-sec-dis-text}; } .bit-btn-ter { @@ -202,6 +212,8 @@ --bit-btn-clr-hover: #{$clr-ter-hover}; --bit-btn-clr-active: #{$clr-ter-active}; --bit-btn-clr-spn: #{$clr-ter-dark}; + --bit-btn-clr-dis: #{$clr-ter-dis}; + --bit-btn-clr-dis-text: #{$clr-ter-dis-text}; } .bit-btn-inf { @@ -210,6 +222,8 @@ --bit-btn-clr-hover: #{$clr-inf-hover}; --bit-btn-clr-active: #{$clr-inf-active}; --bit-btn-clr-spn: #{$clr-inf-dark}; + --bit-btn-clr-dis: #{$clr-inf-dis}; + --bit-btn-clr-dis-text: #{$clr-inf-dis-text}; } .bit-btn-suc { @@ -218,6 +232,8 @@ --bit-btn-clr-hover: #{$clr-suc-hover}; --bit-btn-clr-active: #{$clr-suc-active}; --bit-btn-clr-spn: #{$clr-suc-dark}; + --bit-btn-clr-dis: #{$clr-suc-dis}; + --bit-btn-clr-dis-text: #{$clr-suc-dis-text}; } .bit-btn-wrn { @@ -226,6 +242,8 @@ --bit-btn-clr-hover: #{$clr-wrn-hover}; --bit-btn-clr-active: #{$clr-wrn-active}; --bit-btn-clr-spn: #{$clr-wrn-dark}; + --bit-btn-clr-dis: #{$clr-wrn-dis}; + --bit-btn-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-btn-swr { @@ -234,6 +252,8 @@ --bit-btn-clr-hover: #{$clr-swr-hover}; --bit-btn-clr-active: #{$clr-swr-active}; --bit-btn-clr-spn: #{$clr-swr-dark}; + --bit-btn-clr-dis: #{$clr-swr-dis}; + --bit-btn-clr-dis-text: #{$clr-swr-dis-text}; } .bit-btn-err { @@ -242,6 +262,8 @@ --bit-btn-clr-hover: #{$clr-err-hover}; --bit-btn-clr-active: #{$clr-err-active}; --bit-btn-clr-spn: #{$clr-err-dark}; + --bit-btn-clr-dis: #{$clr-err-dis}; + --bit-btn-clr-dis-text: #{$clr-err-dis-text}; } .bit-btn-pbg { @@ -250,6 +272,8 @@ --bit-btn-clr-hover: #{$clr-bg-pri-hover}; --bit-btn-clr-active: #{$clr-bg-pri-active}; --bit-btn-clr-spn: #{$clr-fg-pri}; + --bit-btn-clr-dis: #{$clr-bg-pri-dis}; + --bit-btn-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-btn-sbg { @@ -258,6 +282,8 @@ --bit-btn-clr-hover: #{$clr-bg-sec-hover}; --bit-btn-clr-active: #{$clr-bg-sec-active}; --bit-btn-clr-spn: #{$clr-fg-pri}; + --bit-btn-clr-dis: #{$clr-bg-sec-dis}; + --bit-btn-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-btn-tbg { @@ -266,6 +292,8 @@ --bit-btn-clr-hover: #{$clr-bg-ter-hover}; --bit-btn-clr-active: #{$clr-bg-ter-active}; --bit-btn-clr-spn: #{$clr-fg-pri}; + --bit-btn-clr-dis: #{$clr-bg-ter-dis}; + --bit-btn-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-btn-pfg { @@ -274,6 +302,8 @@ --bit-btn-clr-hover: #{$clr-fg-pri-hover}; --bit-btn-clr-active: #{$clr-fg-pri-active}; --bit-btn-clr-spn: #{$clr-bg-pri}; + --bit-btn-clr-dis: #{$clr-fg-pri-dis}; + --bit-btn-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-btn-sfg { @@ -282,6 +312,8 @@ --bit-btn-clr-hover: #{$clr-fg-sec-hover}; --bit-btn-clr-active: #{$clr-fg-sec-active}; --bit-btn-clr-spn: #{$clr-bg-pri}; + --bit-btn-clr-dis: #{$clr-fg-sec-dis}; + --bit-btn-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-btn-tfg { @@ -290,6 +322,8 @@ --bit-btn-clr-hover: #{$clr-fg-ter-hover}; --bit-btn-clr-active: #{$clr-fg-ter-active}; --bit-btn-clr-spn: #{$clr-bg-pri}; + --bit-btn-clr-dis: #{$clr-fg-ter-dis}; + --bit-btn-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-btn-pbr { @@ -298,6 +332,8 @@ --bit-btn-clr-hover: #{$clr-brd-pri-hover}; --bit-btn-clr-active: #{$clr-brd-pri-active}; --bit-btn-clr-spn: #{$clr-fg-pri}; + --bit-btn-clr-dis: #{$clr-brd-pri-dis}; + --bit-btn-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-btn-sbr { @@ -306,6 +342,8 @@ --bit-btn-clr-hover: #{$clr-brd-sec-hover}; --bit-btn-clr-active: #{$clr-brd-sec-active}; --bit-btn-clr-spn: #{$clr-fg-pri}; + --bit-btn-clr-dis: #{$clr-brd-sec-dis}; + --bit-btn-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-btn-tbr { @@ -314,6 +352,8 @@ --bit-btn-clr-hover: #{$clr-brd-ter-hover}; --bit-btn-clr-active: #{$clr-brd-ter-active}; --bit-btn-clr-spn: #{$clr-fg-pri}; + --bit-btn-clr-dis: #{$clr-brd-ter-dis}; + --bit-btn-clr-dis-text: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scss index 3e6fb265db..57763b97ac 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ButtonGroup/BitButtonGroup.scss @@ -13,14 +13,14 @@ &.bit-dis, &.bit-dis * { cursor: default; - color: $clr-fg-dis; pointer-events: none; } &.bit-dis { - border-color: $clr-brd-dis; - --bit-btg-itm-clr-bg: #{$clr-bg-dis}; - --bit-btg-itm-clr-brd: #{$clr-brd-dis}; + color: var(--bit-btg-clr-dis-text); + border-color: var(--bit-btg-clr-dis); + --bit-btg-itm-clr-bg: var(--bit-btg-clr-dis); + --bit-btg-itm-clr-brd: var(--bit-btg-clr-dis); } } @@ -64,8 +64,8 @@ &[disabled] { cursor: default; - color: $clr-fg-dis; pointer-events: none; + color: var(--bit-btg-clr-dis-text); background-color: var(--bit-btg-itm-clr-bg-dis); } @@ -92,7 +92,7 @@ --bit-btg-itm-clr-hover: var(--bit-btg-clr-txt); --bit-btg-itm-clr-bg-hover: var(--bit-btg-clr-hover); --bit-btg-itm-clr-bg-active: var(--bit-btg-clr-active); - --bit-btg-itm-clr-bg-dis: #{$clr-bg-dis}; + --bit-btg-itm-clr-bg-dis: var(--bit-btg-clr-dis); @media (hover: hover) { &:hover { @@ -113,7 +113,7 @@ --bit-btg-itm-clr-hover: var(--bit-btg-clr-txt); --bit-btg-itm-clr-bg-hover: var(--bit-btg-clr-hover); --bit-btg-itm-clr-bg-active: var(--bit-btg-clr-active); - --bit-btg-itm-clr-bg-dis: transprent; + --bit-btg-itm-clr-bg-dis: transparent; @media (hover: hover) { &:hover { @@ -124,6 +124,10 @@ &:active { border-color: var(--bit-btg-clr-active); } + + &.bit-dis { + background-color: transparent; + } } .bit-btg-txt { @@ -134,7 +138,7 @@ --bit-btg-itm-clr-hover: var(--bit-btg-clr-txt); --bit-btg-itm-clr-bg-hover: var(--bit-btg-clr-hover); --bit-btg-itm-clr-bg-active: var(--bit-btg-clr-active); - --bit-btg-itm-clr-bg-dis: transprent; + --bit-btg-itm-clr-bg-dis: transparent; &.bit-dis { border-color: transparent; @@ -168,6 +172,8 @@ --bit-btg-clr-dark: #{$clr-pri-dark}; --bit-btg-clr-dark-hover: #{$clr-pri-dark-hover}; --bit-btg-clr-dark-active: #{$clr-pri-dark-active}; + --bit-btg-clr-dis: #{$clr-pri-dis}; + --bit-btg-clr-dis-text: #{$clr-pri-dis-text}; } .bit-btg-sec { @@ -179,6 +185,8 @@ --bit-btg-clr-dark: #{$clr-sec-dark}; --bit-btg-clr-dark-hover: #{$clr-sec-dark-hover}; --bit-btg-clr-dark-active: #{$clr-sec-dark-active}; + --bit-btg-clr-dis: #{$clr-sec-dis}; + --bit-btg-clr-dis-text: #{$clr-sec-dis-text}; } .bit-btg-ter { @@ -190,6 +198,8 @@ --bit-btg-clr-dark: #{$clr-ter-dark}; --bit-btg-clr-dark-hover: #{$clr-ter-dark-hover}; --bit-btg-clr-dark-active: #{$clr-ter-dark-active}; + --bit-btg-clr-dis: #{$clr-ter-dis}; + --bit-btg-clr-dis-text: #{$clr-ter-dis-text}; } .bit-btg-inf { @@ -201,6 +211,8 @@ --bit-btg-clr-dark: #{$clr-inf-dark}; --bit-btg-clr-dark-hover: #{$clr-inf-dark-hover}; --bit-btg-clr-dark-active: #{$clr-inf-dark-active}; + --bit-btg-clr-dis: #{$clr-inf-dis}; + --bit-btg-clr-dis-text: #{$clr-inf-dis-text}; } .bit-btg-suc { @@ -212,6 +224,8 @@ --bit-btg-clr-dark: #{$clr-suc-dark}; --bit-btg-clr-dark-hover: #{$clr-suc-dark-hover}; --bit-btg-clr-dark-active: #{$clr-suc-dark-active}; + --bit-btg-clr-dis: #{$clr-suc-dis}; + --bit-btg-clr-dis-text: #{$clr-suc-dis-text}; } .bit-btg-wrn { @@ -223,6 +237,8 @@ --bit-btg-clr-dark: #{$clr-wrn-dark}; --bit-btg-clr-dark-hover: #{$clr-wrn-dark-hover}; --bit-btg-clr-dark-active: #{$clr-wrn-dark-active}; + --bit-btg-clr-dis: #{$clr-wrn-dis}; + --bit-btg-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-btg-swr { @@ -234,6 +250,8 @@ --bit-btg-clr-dark: #{$clr-swr-dark}; --bit-btg-clr-dark-hover: #{$clr-swr-dark-hover}; --bit-btg-clr-dark-active: #{$clr-swr-dark-active}; + --bit-btg-clr-dis: #{$clr-swr-dis}; + --bit-btg-clr-dis-text: #{$clr-swr-dis-text}; } .bit-btg-err { @@ -245,6 +263,8 @@ --bit-btg-clr-dark: #{$clr-err-dark}; --bit-btg-clr-dark-hover: #{$clr-err-dark-hover}; --bit-btg-clr-dark-active: #{$clr-err-dark-active}; + --bit-btg-clr-dis: #{$clr-err-dis}; + --bit-btg-clr-dis-text: #{$clr-err-dis-text}; } @@ -257,6 +277,8 @@ --bit-btg-clr-dark: #{$clr-bg-pri}; --bit-btg-clr-dark-hover: #{$clr-bg-pri-hover}; --bit-btg-clr-dark-active: #{$clr-bg-pri-active}; + --bit-btg-clr-dis: #{$clr-bg-pri-dis}; + --bit-btg-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-btg-sbg { @@ -268,6 +290,8 @@ --bit-btg-clr-dark: #{$clr-bg-sec}; --bit-btg-clr-dark-hover: #{$clr-bg-sec-hover}; --bit-btg-clr-dark-active: #{$clr-bg-sec-active}; + --bit-btg-clr-dis: #{$clr-bg-sec-dis}; + --bit-btg-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-btg-tbg { @@ -279,6 +303,8 @@ --bit-btg-clr-dark: #{$clr-bg-ter}; --bit-btg-clr-dark-hover: #{$clr-bg-ter-hover}; --bit-btg-clr-dark-active: #{$clr-bg-ter-active}; + --bit-btg-clr-dis: #{$clr-bg-ter-dis}; + --bit-btg-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-btg-pfg { @@ -290,6 +316,8 @@ --bit-btg-clr-dark: #{$clr-fg-pri}; --bit-btg-clr-dark-hover: #{$clr-fg-pri-hover}; --bit-btg-clr-dark-active: #{$clr-fg-pri-active}; + --bit-btg-clr-dis: #{$clr-fg-pri-dis}; + --bit-btg-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-btg-sfg { @@ -301,6 +329,8 @@ --bit-btg-clr-dark: #{$clr-fg-sec}; --bit-btg-clr-dark-hover: #{$clr-fg-sec-hover}; --bit-btg-clr-dark-active: #{$clr-fg-sec-active}; + --bit-btg-clr-dis: #{$clr-fg-sec-dis}; + --bit-btg-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-btg-tfg { @@ -312,6 +342,8 @@ --bit-btg-clr-dark: #{$clr-fg-ter}; --bit-btg-clr-dark-hover: #{$clr-fg-ter-hover}; --bit-btg-clr-dark-active: #{$clr-fg-ter-active}; + --bit-btg-clr-dis: #{$clr-fg-ter-dis}; + --bit-btg-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-btg-pbr { @@ -323,6 +355,8 @@ --bit-btg-clr-dark: #{$clr-brd-pri}; --bit-btg-clr-dark-hover: #{$clr-brd-pri-hover}; --bit-btg-clr-dark-active: #{$clr-brd-pri-active}; + --bit-btg-clr-dis: #{$clr-brd-pri-dis}; + --bit-btg-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-btg-sbr { @@ -334,6 +368,8 @@ --bit-btg-clr-dark: #{$clr-brd-sec}; --bit-btg-clr-dark-hover: #{$clr-brd-sec-hover}; --bit-btg-clr-dark-active: #{$clr-brd-sec-active}; + --bit-btg-clr-dis: #{$clr-brd-sec-dis}; + --bit-btg-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-btg-tbr { @@ -345,6 +381,8 @@ --bit-btg-clr-dark: #{$clr-brd-ter}; --bit-btg-clr-dark-hover: #{$clr-brd-ter-hover}; --bit-btg-clr-dark-active: #{$clr-brd-ter-active}; + --bit-btg-clr-dis: #{$clr-brd-ter-dis}; + --bit-btg-clr-dis-text: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss index e6fe9e5691..cb858f93c9 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/MenuButton/BitMenuButton.scss @@ -22,9 +22,9 @@ &.bit-dis { cursor: default; - color: $clr-fg-dis; pointer-events: none; - --bit-mnb-clr-spb: #{$clr-fg-dis}; + color: var(--bit-mnb-clr-dis-text); + --bit-mnb-clr-spb: var(--bit-mnb-clr-dis-text); } } @@ -146,7 +146,7 @@ &[disabled] { cursor: default; - color: $clr-fg-dis; + color: var(--bit-mnb-clr-dis-text); pointer-events: none; } @@ -184,8 +184,9 @@ } &.bit-dis { - border-color: $clr-brd-dis; - background-color: $clr-bg-dis; + color: var(--bit-mnb-clr-dis-text); + border-color: var(--bit-mnb-clr-dis); + background-color: var(--bit-mnb-clr-dis); } } @@ -206,7 +207,9 @@ } &.bit-dis { - border-color: $clr-brd-dis; + color: var(--bit-mnb-clr-dis-text); + border-color: var(--bit-mnb-clr-dis); + background-color: transparent; } } @@ -215,6 +218,12 @@ border-color: transparent; background-color: transparent; --bit-mnb-clr-spb: var(--bit-mnb-clr); + + &.bit-dis { + color: var(--bit-mnb-clr-dis-text); + border-color: transparent; + background-color: transparent; + } } .bit-mnb-pri { @@ -222,6 +231,8 @@ --bit-mnb-clr-txt: #{$clr-pri-text}; --bit-mnb-clr-hover: #{$clr-pri-hover}; --bit-mnb-clr-active: #{$clr-pri-active}; + --bit-mnb-clr-dis: #{$clr-pri-dis}; + --bit-mnb-clr-dis-text: #{$clr-pri-dis-text}; } .bit-mnb-sec { @@ -229,6 +240,8 @@ --bit-mnb-clr-txt: #{$clr-sec-text}; --bit-mnb-clr-hover: #{$clr-sec-hover}; --bit-mnb-clr-active: #{$clr-sec-active}; + --bit-mnb-clr-dis: #{$clr-sec-dis}; + --bit-mnb-clr-dis-text: #{$clr-sec-dis-text}; } .bit-mnb-ter { @@ -236,6 +249,8 @@ --bit-mnb-clr-txt: #{$clr-ter-text}; --bit-mnb-clr-hover: #{$clr-ter-hover}; --bit-mnb-clr-active: #{$clr-ter-active}; + --bit-mnb-clr-dis: #{$clr-ter-dis}; + --bit-mnb-clr-dis-text: #{$clr-ter-dis-text}; } .bit-mnb-inf { @@ -243,6 +258,8 @@ --bit-mnb-clr-txt: #{$clr-inf-text}; --bit-mnb-clr-hover: #{$clr-inf-hover}; --bit-mnb-clr-active: #{$clr-inf-active}; + --bit-mnb-clr-dis: #{$clr-inf-dis}; + --bit-mnb-clr-dis-text: #{$clr-inf-dis-text}; } .bit-mnb-suc { @@ -250,6 +267,8 @@ --bit-mnb-clr-txt: #{$clr-suc-text}; --bit-mnb-clr-hover: #{$clr-suc-hover}; --bit-mnb-clr-active: #{$clr-suc-active}; + --bit-mnb-clr-dis: #{$clr-suc-dis}; + --bit-mnb-clr-dis-text: #{$clr-suc-dis-text}; } .bit-mnb-wrn { @@ -257,6 +276,8 @@ --bit-mnb-clr-txt: #{$clr-wrn-text}; --bit-mnb-clr-hover: #{$clr-wrn-hover}; --bit-mnb-clr-active: #{$clr-wrn-active}; + --bit-mnb-clr-dis: #{$clr-wrn-dis}; + --bit-mnb-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-mnb-swr { @@ -264,6 +285,8 @@ --bit-mnb-clr-txt: #{$clr-swr-text}; --bit-mnb-clr-hover: #{$clr-swr-hover}; --bit-mnb-clr-active: #{$clr-swr-active}; + --bit-mnb-clr-dis: #{$clr-swr-dis}; + --bit-mnb-clr-dis-text: #{$clr-swr-dis-text}; } .bit-mnb-err { @@ -271,6 +294,8 @@ --bit-mnb-clr-txt: #{$clr-err-text}; --bit-mnb-clr-hover: #{$clr-err-hover}; --bit-mnb-clr-active: #{$clr-err-active}; + --bit-mnb-clr-dis: #{$clr-err-dis}; + --bit-mnb-clr-dis-text: #{$clr-err-dis-text}; } .bit-mnb-pbg { @@ -278,6 +303,8 @@ --bit-mnb-clr-txt: #{$clr-fg-pri}; --bit-mnb-clr-hover: #{$clr-bg-pri-hover}; --bit-mnb-clr-active: #{$clr-bg-pri-active}; + --bit-mnb-clr-dis: #{$clr-bg-pri-dis}; + --bit-mnb-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-mnb-sbg { @@ -285,6 +312,8 @@ --bit-mnb-clr-txt: #{$clr-fg-pri}; --bit-mnb-clr-hover: #{$clr-bg-sec-hover}; --bit-mnb-clr-active: #{$clr-bg-sec-active}; + --bit-mnb-clr-dis: #{$clr-bg-sec-dis}; + --bit-mnb-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-mnb-tbg { @@ -292,6 +321,8 @@ --bit-mnb-clr-txt: #{$clr-fg-pri}; --bit-mnb-clr-hover: #{$clr-bg-ter-hover}; --bit-mnb-clr-active: #{$clr-bg-ter-active}; + --bit-mnb-clr-dis: #{$clr-bg-ter-dis}; + --bit-mnb-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-mnb-pfg { @@ -299,6 +330,8 @@ --bit-mnb-clr-txt: #{$clr-bg-pri}; --bit-mnb-clr-hover: #{$clr-fg-pri-hover}; --bit-mnb-clr-active: #{$clr-fg-pri-active}; + --bit-mnb-clr-dis: #{$clr-fg-pri-dis}; + --bit-mnb-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-mnb-sfg { @@ -306,6 +339,8 @@ --bit-mnb-clr-txt: #{$clr-bg-pri}; --bit-mnb-clr-hover: #{$clr-fg-sec-hover}; --bit-mnb-clr-active: #{$clr-fg-sec-active}; + --bit-mnb-clr-dis: #{$clr-fg-sec-dis}; + --bit-mnb-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-mnb-tfg { @@ -313,6 +348,8 @@ --bit-mnb-clr-txt: #{$clr-bg-pri}; --bit-mnb-clr-hover: #{$clr-fg-ter-hover}; --bit-mnb-clr-active: #{$clr-fg-ter-active}; + --bit-mnb-clr-dis: #{$clr-fg-ter-dis}; + --bit-mnb-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-mnb-pbr { @@ -320,6 +357,8 @@ --bit-mnb-clr-txt: #{$clr-fg-pri}; --bit-mnb-clr-hover: #{$clr-brd-pri-hover}; --bit-mnb-clr-active: #{$clr-brd-pri-active}; + --bit-mnb-clr-dis: #{$clr-brd-pri-dis}; + --bit-mnb-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-mnb-sbr { @@ -327,6 +366,8 @@ --bit-mnb-clr-txt: #{$clr-fg-pri}; --bit-mnb-clr-hover: #{$clr-brd-sec-hover}; --bit-mnb-clr-active: #{$clr-brd-sec-active}; + --bit-mnb-clr-dis: #{$clr-brd-sec-dis}; + --bit-mnb-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-mnb-tbr { @@ -334,6 +375,8 @@ --bit-mnb-clr-txt: #{$clr-fg-pri}; --bit-mnb-clr-hover: #{$clr-brd-ter-hover}; --bit-mnb-clr-active: #{$clr-brd-ter-active}; + --bit-mnb-clr-dis: #{$clr-brd-ter-dis}; + --bit-mnb-clr-dis-text: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss index 7370ea9241..5a1619aefd 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Buttons/ToggleButton/BitToggleButton.scss @@ -23,7 +23,6 @@ &.bit-dis { cursor: default; - color: $clr-fg-dis; pointer-events: none; } } @@ -56,8 +55,9 @@ } &.bit-dis { - border-color: $clr-brd-dis; - background-color: $clr-bg-dis; + color: var(--bit-tgb-clr-dis-text); + border-color: var(--bit-tgb-clr-dis); + background-color: var(--bit-tgb-clr-dis); } } @@ -81,7 +81,9 @@ } &.bit-dis { - border-color: $clr-brd-dis; + color: var(--bit-tgb-clr-dis-text); + border-color: var(--bit-tgb-clr-dis); + background-color: transparent; } } @@ -103,6 +105,12 @@ border-color: var(--bit-tgb-clr-active); background-color: var(--bit-tgb-clr-active); } + + &.bit-dis { + color: var(--bit-tgb-clr-dis-text); + border-color: transparent; + background-color: transparent; + } } .bit-tgb-chk { @@ -131,6 +139,8 @@ --bit-tgb-clr-dark: #{$clr-pri-dark}; --bit-tgb-clr-dark-hover: #{$clr-pri-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-pri-dark-active}; + --bit-tgb-clr-dis: #{$clr-pri-dis}; + --bit-tgb-clr-dis-text: #{$clr-pri-dis-text}; } .bit-tgb-sec { @@ -141,6 +151,8 @@ --bit-tgb-clr-dark: #{$clr-sec-dark}; --bit-tgb-clr-dark-hover: #{$clr-sec-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-sec-dark-active}; + --bit-tgb-clr-dis: #{$clr-sec-dis}; + --bit-tgb-clr-dis-text: #{$clr-sec-dis-text}; } .bit-tgb-ter { @@ -151,6 +163,8 @@ --bit-tgb-clr-dark: #{$clr-ter-dark}; --bit-tgb-clr-dark-hover: #{$clr-ter-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-ter-dark-active}; + --bit-tgb-clr-dis: #{$clr-ter-dis}; + --bit-tgb-clr-dis-text: #{$clr-ter-dis-text}; } .bit-tgb-inf { @@ -161,6 +175,8 @@ --bit-tgb-clr-dark: #{$clr-inf-dark}; --bit-tgb-clr-dark-hover: #{$clr-inf-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-inf-dark-active}; + --bit-tgb-clr-dis: #{$clr-inf-dis}; + --bit-tgb-clr-dis-text: #{$clr-inf-dis-text}; } .bit-tgb-suc { @@ -171,6 +187,8 @@ --bit-tgb-clr-dark: #{$clr-suc-dark}; --bit-tgb-clr-dark-hover: #{$clr-suc-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-suc-dark-active}; + --bit-tgb-clr-dis: #{$clr-suc-dis}; + --bit-tgb-clr-dis-text: #{$clr-suc-dis-text}; } .bit-tgb-wrn { @@ -181,6 +199,8 @@ --bit-tgb-clr-dark: #{$clr-wrn-dark}; --bit-tgb-clr-dark-hover: #{$clr-wrn-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-wrn-dark-active}; + --bit-tgb-clr-dis: #{$clr-wrn-dis}; + --bit-tgb-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-tgb-swr { @@ -191,6 +211,8 @@ --bit-tgb-clr-dark: #{$clr-swr-dark}; --bit-tgb-clr-dark-hover: #{$clr-swr-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-swr-dark-active}; + --bit-tgb-clr-dis: #{$clr-swr-dis}; + --bit-tgb-clr-dis-text: #{$clr-swr-dis-text}; } .bit-tgb-err { @@ -201,6 +223,8 @@ --bit-tgb-clr-dark: #{$clr-err-dark}; --bit-tgb-clr-dark-hover: #{$clr-err-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-err-dark-active}; + --bit-tgb-clr-dis: #{$clr-err-dis}; + --bit-tgb-clr-dis-text: #{$clr-err-dis-text}; } .bit-tgb-pbg { @@ -211,6 +235,8 @@ --bit-tgb-clr-dark: #{$clr-bg-pri-dark}; --bit-tgb-clr-dark-hover: #{$clr-bg-pri-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-bg-pri-dark-active}; + --bit-tgb-clr-dis: #{$clr-bg-pri-dis}; + --bit-tgb-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-tgb-sbg { @@ -221,6 +247,8 @@ --bit-tgb-clr-dark: #{$clr-bg-sec-dark}; --bit-tgb-clr-dark-hover: #{$clr-bg-sec-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-bg-sec-dark-active}; + --bit-tgb-clr-dis: #{$clr-bg-sec-dis}; + --bit-tgb-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-tgb-tbg { @@ -231,6 +259,8 @@ --bit-tgb-clr-dark: #{$clr-bg-ter-dark}; --bit-tgb-clr-dark-hover: #{$clr-bg-ter-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-bg-ter-dark-active}; + --bit-tgb-clr-dis: #{$clr-bg-ter-dis}; + --bit-tgb-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-tgb-pfg { @@ -241,6 +271,8 @@ --bit-tgb-clr-dark: #{$clr-fg-pri-dark}; --bit-tgb-clr-dark-hover: #{$clr-fg-pri-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-fg-pri-dark-active}; + --bit-tgb-clr-dis: #{$clr-fg-pri-dis}; + --bit-tgb-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-tgb-sfg { @@ -251,6 +283,8 @@ --bit-tgb-clr-dark: #{$clr-fg-sec-dark}; --bit-tgb-clr-dark-hover: #{$clr-fg-sec-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-fg-sec-dark-active}; + --bit-tgb-clr-dis: #{$clr-fg-sec-dis}; + --bit-tgb-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-tgb-tfg { @@ -261,6 +295,8 @@ --bit-tgb-clr-dark: #{$clr-fg-ter-dark}; --bit-tgb-clr-dark-hover: #{$clr-fg-ter-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-fg-ter-dark-active}; + --bit-tgb-clr-dis: #{$clr-fg-ter-dis}; + --bit-tgb-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-tgb-pbr { @@ -271,6 +307,8 @@ --bit-tgb-clr-dark: #{$clr-brd-pri-dark}; --bit-tgb-clr-dark-hover: #{$clr-brd-pri-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-brd-pri-dark-active}; + --bit-tgb-clr-dis: #{$clr-brd-pri-dis}; + --bit-tgb-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-tgb-sbr { @@ -281,6 +319,8 @@ --bit-tgb-clr-dark: #{$clr-brd-sec-dark}; --bit-tgb-clr-dark-hover: #{$clr-brd-sec-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-brd-sec-dark-active}; + --bit-tgb-clr-dis: #{$clr-brd-sec-dis}; + --bit-tgb-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-tgb-tbr { @@ -291,6 +331,8 @@ --bit-tgb-clr-dark: #{$clr-brd-ter-dark}; --bit-tgb-clr-dark-hover: #{$clr-brd-ter-dark-hover}; --bit-tgb-clr-dark-active: #{$clr-brd-ter-dark-active}; + --bit-tgb-clr-dis: #{$clr-brd-ter-dis}; + --bit-tgb-clr-dis-text: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss index c81772a33f..5889c28969 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/Checkbox/BitCheckbox.scss @@ -37,20 +37,20 @@ &.bit-dis { cursor: default; - color: $clr-fg-dis; + color: var(--bit-chb-clr-dis-text); pointer-events: none; - --bit-chb-ico-clr: #{$clr-fg-dis}; - --bit-chb-ico-clr-bg: #{$clr-bg-dis}; - --bit-chb-box-clr-brd: #{$clr-brd-dis}; + --bit-chb-ico-clr: #{var(--bit-chb-clr-dis-text)}; + --bit-chb-ico-clr-bg: #{var(--bit-chb-clr-dis)}; + --bit-chb-box-clr-brd: #{var(--bit-chb-clr-dis)}; &.bit-chb-ckd { - --bit-chb-ico-clr: #{$clr-fg-dis}; - --bit-chb-box-clr-bg: #{$clr-bg-dis}; - --bit-chb-box-clr-brd: #{$clr-bg-dis}; + --bit-chb-ico-clr: #{var(--bit-chb-clr-dis-text)}; + --bit-chb-box-clr-bg: #{var(--bit-chb-clr-dis)}; + --bit-chb-box-clr-brd: #{var(--bit-chb-clr-dis)}; } &.bit-chb-ind { - --bit-chb-ico-clr-bg: #{$clr-bg-dis}; + --bit-chb-ico-clr-bg: #{var(--bit-chb-clr-dis)}; } } } @@ -168,6 +168,8 @@ --bit-chb-clr-txt: #{$clr-pri-text}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-pri-text}; + --bit-chb-clr-dis: #{$clr-pri-dis}; + --bit-chb-clr-dis-text: #{$clr-pri-dis-text}; } .bit-chb-sec { @@ -176,6 +178,8 @@ --bit-chb-clr-txt: #{$clr-sec-text}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-sec-text}; + --bit-chb-clr-dis: #{$clr-sec-dis}; + --bit-chb-clr-dis-text: #{$clr-sec-dis-text}; } .bit-chb-ter { @@ -184,6 +188,8 @@ --bit-chb-clr-txt: #{$clr-ter-text}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-ter-text}; + --bit-chb-clr-dis: #{$clr-ter-dis}; + --bit-chb-clr-dis-text: #{$clr-ter-dis-text}; } .bit-chb-inf { @@ -192,6 +198,8 @@ --bit-chb-clr-txt: #{$clr-inf-text}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-inf-text}; + --bit-chb-clr-dis: #{$clr-inf-dis}; + --bit-chb-clr-dis-text: #{$clr-inf-dis-text}; } .bit-chb-suc { @@ -200,6 +208,8 @@ --bit-chb-clr-txt: #{$clr-suc-text}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-suc-text}; + --bit-chb-clr-dis: #{$clr-suc-dis}; + --bit-chb-clr-dis-text: #{$clr-suc-dis-text}; } .bit-chb-wrn { @@ -208,6 +218,8 @@ --bit-chb-clr-txt: #{$clr-wrn-text}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-wrn-text}; + --bit-chb-clr-dis: #{$clr-wrn-dis}; + --bit-chb-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-chb-swr { @@ -216,6 +228,8 @@ --bit-chb-clr-txt: #{$clr-swr-text}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-swr-text}; + --bit-chb-clr-dis: #{$clr-swr-dis}; + --bit-chb-clr-dis-text: #{$clr-swr-dis-text}; } .bit-chb-err { @@ -224,6 +238,8 @@ --bit-chb-clr-txt: #{$clr-err-text}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-err-text}; + --bit-chb-clr-dis: #{$clr-err-dis}; + --bit-chb-clr-dis-text: #{$clr-err-dis-text}; } .bit-chb-pbg { @@ -232,6 +248,8 @@ --bit-chb-clr-txt: #{$clr-fg-pri}; --bit-chb-clr-txt-sec: #{$clr-bg-sec}; --bit-chb-clr-txt-hover: #{$clr-fg-pri-hover}; + --bit-chb-clr-dis: #{$clr-bg-pri-dis}; + --bit-chb-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-chb-sbg { @@ -240,6 +258,8 @@ --bit-chb-clr-txt: #{$clr-fg-sec}; --bit-chb-clr-txt-sec: #{$clr-bg-sec}; --bit-chb-clr-txt-hover: #{$clr-fg-sec-hover}; + --bit-chb-clr-dis: #{$clr-bg-sec-dis}; + --bit-chb-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-chb-tbg { @@ -248,6 +268,8 @@ --bit-chb-clr-txt: #{$clr-fg-ter}; --bit-chb-clr-txt-sec: #{$clr-bg-sec}; --bit-chb-clr-txt-hover: #{$clr-fg-ter-hover}; + --bit-chb-clr-dis: #{$clr-bg-ter-dis}; + --bit-chb-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-chb-pfg { @@ -256,6 +278,8 @@ --bit-chb-clr-txt: #{$clr-bg-pri}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-bg-pri-hover}; + --bit-chb-clr-dis: #{$clr-fg-pri-dis}; + --bit-chb-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-chb-sfg { @@ -264,6 +288,8 @@ --bit-chb-clr-txt: #{$clr-bg-sec}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-bg-sec-hover}; + --bit-chb-clr-dis: #{$clr-fg-sec-dis}; + --bit-chb-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-chb-tfg { @@ -272,6 +298,8 @@ --bit-chb-clr-txt: #{$clr-bg-ter}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-bg-ter-hover}; + --bit-chb-clr-dis: #{$clr-fg-ter-dis}; + --bit-chb-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-chb-pbr { @@ -280,6 +308,8 @@ --bit-chb-clr-txt: #{$clr-fg-pri}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-fg-pri-hover}; + --bit-chb-clr-dis: #{$clr-brd-pri-dis}; + --bit-chb-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-chb-sbr { @@ -288,6 +318,8 @@ --bit-chb-clr-txt: #{$clr-fg-sec}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-fg-sec-hover}; + --bit-chb-clr-dis: #{$clr-brd-sec-dis}; + --bit-chb-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-chb-tbr { @@ -296,6 +328,8 @@ --bit-chb-clr-txt: #{$clr-fg-ter}; --bit-chb-clr-txt-sec: #{$clr-fg-sec}; --bit-chb-clr-txt-hover: #{$clr-fg-ter-hover}; + --bit-chb-clr-dis: #{$clr-brd-ter-dis}; + --bit-chb-clr-dis-text: #{$clr-brd-ter-dis-text}; } .bit-chb-sm { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss index c887475017..72e3284b4f 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/ChoiceGroup/BitChoiceGroup.scss @@ -315,21 +315,21 @@ .bit-chg-rad { cursor: default; pointer-events: none; - color: $clr-fg-dis; + color: var(--bit-chg-clr-dis-text); &::before { - border-color: $clr-brd-dis; + border-color: var(--bit-chg-clr-dis); } &::after { - background-color: $clr-bg-dis; + background-color: var(--bit-chg-clr-dis); } } .bit-chg-ili { cursor: default; border-color: transparent; - color: $clr-fg-dis; + color: var(--bit-chg-clr-dis-text); @media (hover: hover) { &:hover { @@ -339,11 +339,11 @@ } .bit-chg-icw { - color: $clr-fg-dis; + color: var(--bit-chg-clr-dis-text); } .bit-chg-ico { - color: $clr-fg-dis; + color: var(--bit-chg-clr-dis-text); } } @@ -352,6 +352,8 @@ --bit-chg-clr-bg: #{$clr-bg-sec}; --bit-chg-clr-brd: #{$clr-brd-pri}; --bit-chg-clr-hover: #{$clr-pri-hover}; + --bit-chg-clr-dis: #{$clr-pri-dis}; + --bit-chg-clr-dis-text: #{$clr-pri-dis-text}; } .bit-chg-sec { @@ -359,6 +361,8 @@ --bit-chg-clr-bg: #{$clr-bg-sec}; --bit-chg-clr-brd: #{$clr-brd-sec}; --bit-chg-clr-hover: #{$clr-sec-hover}; + --bit-chg-clr-dis: #{$clr-sec-dis}; + --bit-chg-clr-dis-text: #{$clr-sec-dis-text}; } .bit-chg-ter { @@ -366,6 +370,8 @@ --bit-chg-clr-bg: #{$clr-bg-sec}; --bit-chg-clr-brd: #{$clr-brd-ter}; --bit-chg-clr-hover: #{$clr-ter-hover}; + --bit-chg-clr-dis: #{$clr-ter-dis}; + --bit-chg-clr-dis-text: #{$clr-ter-dis-text}; } .bit-chg-inf { @@ -373,6 +379,8 @@ --bit-chg-clr-bg: #{$clr-bg-sec}; --bit-chg-clr-brd: #{$clr-inf}; --bit-chg-clr-hover: #{$clr-inf-hover}; + --bit-chg-clr-dis: #{$clr-inf-dis}; + --bit-chg-clr-dis-text: #{$clr-inf-dis-text}; } .bit-chg-suc { @@ -380,6 +388,8 @@ --bit-chg-clr-bg: #{$clr-bg-sec}; --bit-chg-clr-brd: #{$clr-suc}; --bit-chg-clr-hover: #{$clr-suc-hover}; + --bit-chg-clr-dis: #{$clr-suc-dis}; + --bit-chg-clr-dis-text: #{$clr-suc-dis-text}; } .bit-chg-wrn { @@ -387,6 +397,8 @@ --bit-chg-clr-brd: #{$clr-wrn}; --bit-chg-clr-hover: #{$clr-wrn-hover}; --bit-chg-clr-bg: #{$clr-bg-sec}; + --bit-chg-clr-dis: #{$clr-wrn-dis}; + --bit-chg-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-chg-swr { @@ -394,6 +406,8 @@ --bit-chg-clr-bg: #{$clr-bg-sec}; --bit-chg-clr-brd: #{$clr-swr}; --bit-chg-clr-hover: #{$clr-swr-hover}; + --bit-chg-clr-dis: #{$clr-swr-dis}; + --bit-chg-clr-dis-text: #{$clr-swr-dis-text}; } .bit-chg-err { @@ -401,6 +415,8 @@ --bit-chg-clr-brd: #{$clr-err}; --bit-chg-clr-hover: #{$clr-err-hover}; --bit-chg-clr-bg: #{$clr-bg-sec}; + --bit-chg-clr-dis: #{$clr-err-dis}; + --bit-chg-clr-dis-text: #{$clr-err-dis-text}; } .bit-chg-pbg { @@ -408,6 +424,8 @@ --bit-chg-clr-bg: #{$clr-fg-pri}; --bit-chg-clr-brd: #{$clr-bg-pri}; --bit-chg-clr-hover: #{$clr-bg-pri-hover}; + --bit-chg-clr-dis: #{$clr-bg-pri-dis}; + --bit-chg-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-chg-sbg { @@ -415,6 +433,8 @@ --bit-chg-clr-bg: #{$clr-fg-pri}; --bit-chg-clr-brd: #{$clr-bg-sec}; --bit-chg-clr-hover: #{$clr-bg-sec-hover}; + --bit-chg-clr-dis: #{$clr-bg-sec-dis}; + --bit-chg-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-chg-tbg { @@ -422,6 +442,8 @@ --bit-chg-clr-brd: #{$clr-bg-ter}; --bit-chg-clr-hover: #{$clr-bg-ter-hover}; --bit-chg-clr-bg: #{$clr-fg-pri}; + --bit-chg-clr-dis: #{$clr-bg-ter-dis}; + --bit-chg-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-chg-pfg { @@ -429,6 +451,8 @@ --bit-chg-clr-bg: #{$clr-bg-sec}; --bit-chg-clr-brd: #{$clr-fg-pri}; --bit-chg-clr-hover: #{$clr-fg-pri-hover}; + --bit-chg-clr-dis: #{$clr-fg-pri-dis}; + --bit-chg-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-chg-sfg { @@ -436,6 +460,8 @@ --bit-chg-clr-brd: #{$clr-fg-sec}; --bit-chg-clr-hover: #{$clr-fg-sec-hover}; --bit-chg-clr-bg: #{$clr-bg-sec}; + --bit-chg-clr-dis: #{$clr-fg-sec-dis}; + --bit-chg-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-chg-tfg { @@ -443,6 +469,8 @@ --bit-chg-clr-bg: #{$clr-bg-sec}; --bit-chg-clr-brd: #{$clr-fg-ter}; --bit-chg-clr-hover: #{$clr-fg-ter-hover}; + --bit-chg-clr-dis: #{$clr-fg-ter-dis}; + --bit-chg-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-chg-pbr { @@ -450,6 +478,8 @@ --bit-chg-clr-brd: #{$clr-brd-pri}; --bit-chg-clr-hover: #{$clr-brd-pri-hover}; --bit-chg-clr-bg: #{$clr-bg-sec}; + --bit-chg-clr-dis: #{$clr-brd-pri-dis}; + --bit-chg-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-chg-sbr { @@ -457,6 +487,8 @@ --bit-chg-clr-bg: #{$clr-bg-sec}; --bit-chg-clr-brd: #{$clr-brd-sec}; --bit-chg-clr-hover: #{$clr-brd-sec-hover}; + --bit-chg-clr-dis: #{$clr-brd-sec-dis}; + --bit-chg-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-chg-tbr { @@ -464,6 +496,8 @@ --bit-chg-clr-bg: #{$clr-bg-sec}; --bit-chg-clr-brd: #{$clr-brd-ter}; --bit-chg-clr-hover: #{$clr-brd-ter-hover}; + --bit-chg-clr-dis: #{$clr-brd-ter-dis}; + --bit-chg-clr-dis-text: #{$clr-brd-ter-dis-text}; } .bit-chg-sm { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss index 116c841bb6..7b07b6e480 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/SearchBox/BitSearchBox.scss @@ -12,42 +12,42 @@ pointer-events: none; .bit-srb-cnt { - color: $clr-fg-dis; - border-color: $clr-brd-dis; - background-color: $clr-bg-dis; + color: var(--bit-srb-clr-dis-text); + border-color: var(--bit-srb-clr-dis); + background-color: var(--bit-srb-clr-dis); } .bit-srb-iwp { i { - color: $clr-fg-dis; + color: var(--bit-srb-clr-dis-text); } } .bit-srb-pre, .bit-srb-suf { - color: $clr-fg-dis; + color: var(--bit-srb-clr-dis-text); } @media (hover: hover) { &:hover { .bit-srb-cnt { - border-color: $clr-brd-dis; + border-color: var(--bit-srb-clr-dis); } .bit-srb-iwp { i { - color: $clr-fg-dis; + color: var(--bit-srb-clr-dis-text); } } } } .bit-srb-sbn { - border-color: $clr-brd-dis; - background-color: $clr-bg-dis; + border-color: var(--bit-srb-clr-dis); + background-color: var(--bit-srb-clr-dis); i { - color: $clr-fg-dis; + color: var(--bit-srb-clr-dis-text); } } @@ -545,6 +545,8 @@ --bit-srb-clr-txt: #{$clr-pri-text}; --bit-srb-clr-hover: #{$clr-pri-hover}; --bit-srb-clr-active: #{$clr-pri-active}; + --bit-srb-clr-dis: #{$clr-pri-dis}; + --bit-srb-clr-dis-text: #{$clr-pri-dis-text}; } .bit-srb-sec { @@ -552,6 +554,8 @@ --bit-srb-clr-txt: #{$clr-sec-text}; --bit-srb-clr-hover: #{$clr-sec-hover}; --bit-srb-clr-active: #{$clr-sec-active}; + --bit-srb-clr-dis: #{$clr-sec-dis}; + --bit-srb-clr-dis-text: #{$clr-sec-dis-text}; } .bit-srb-ter { @@ -559,6 +563,8 @@ --bit-srb-clr-txt: #{$clr-ter-text}; --bit-srb-clr-hover: #{$clr-ter-hover}; --bit-srb-clr-active: #{$clr-ter-active}; + --bit-srb-clr-dis: #{$clr-ter-dis}; + --bit-srb-clr-dis-text: #{$clr-ter-dis-text}; } .bit-srb-inf { @@ -566,6 +572,8 @@ --bit-srb-clr-txt: #{$clr-inf-text}; --bit-srb-clr-hover: #{$clr-inf-hover}; --bit-srb-clr-active: #{$clr-inf-active}; + --bit-srb-clr-dis: #{$clr-inf-dis}; + --bit-srb-clr-dis-text: #{$clr-inf-dis-text}; } .bit-srb-suc { @@ -573,6 +581,8 @@ --bit-srb-clr-txt: #{$clr-suc-text}; --bit-srb-clr-hover: #{$clr-suc-hover}; --bit-srb-clr-active: #{$clr-suc-active}; + --bit-srb-clr-dis: #{$clr-suc-dis}; + --bit-srb-clr-dis-text: #{$clr-suc-dis-text}; } .bit-srb-wrn { @@ -580,6 +590,8 @@ --bit-srb-clr-txt: #{$clr-wrn-text}; --bit-srb-clr-hover: #{$clr-wrn-hover}; --bit-srb-clr-active: #{$clr-wrn-active}; + --bit-srb-clr-dis: #{$clr-wrn-dis}; + --bit-srb-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-srb-swr { @@ -587,6 +599,8 @@ --bit-srb-clr-txt: #{$clr-swr-text}; --bit-srb-clr-hover: #{$clr-swr-hover}; --bit-srb-clr-active: #{$clr-swr-active}; + --bit-srb-clr-dis: #{$clr-swr-dis}; + --bit-srb-clr-dis-text: #{$clr-swr-dis-text}; } .bit-srb-err { @@ -594,6 +608,8 @@ --bit-srb-clr-txt: #{$clr-err-text}; --bit-srb-clr-hover: #{$clr-err-hover}; --bit-srb-clr-active: #{$clr-err-active}; + --bit-srb-clr-dis: #{$clr-err-dis}; + --bit-srb-clr-dis-text: #{$clr-err-dis-text}; } .bit-srb-pbg { @@ -601,6 +617,8 @@ --bit-srb-clr-txt: #{$clr-fg-pri}; --bit-srb-clr-hover: #{$clr-bg-pri-hover}; --bit-srb-clr-active: #{$clr-bg-pri-active}; + --bit-srb-clr-dis: #{$clr-bg-pri-dis}; + --bit-srb-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-srb-sbg { @@ -608,6 +626,8 @@ --bit-srb-clr-txt: #{$clr-fg-pri}; --bit-srb-clr-hover: #{$clr-bg-sec-hover}; --bit-srb-clr-active: #{$clr-bg-sec-active}; + --bit-srb-clr-dis: #{$clr-bg-sec-dis}; + --bit-srb-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-srb-tbg { @@ -615,6 +635,8 @@ --bit-srb-clr-txt: #{$clr-fg-pri}; --bit-srb-clr-hover: #{$clr-bg-ter-hover}; --bit-srb-clr-active: #{$clr-bg-ter-active}; + --bit-srb-clr-dis: #{$clr-bg-ter-dis}; + --bit-srb-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-srb-pfg { @@ -622,6 +644,8 @@ --bit-srb-clr-txt: #{$clr-bg-pri}; --bit-srb-clr-hover: #{$clr-fg-pri-hover}; --bit-srb-clr-active: #{$clr-fg-pri-active}; + --bit-srb-clr-dis: #{$clr-fg-pri-dis}; + --bit-srb-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-srb-sfg { @@ -629,6 +653,8 @@ --bit-srb-clr-txt: #{$clr-bg-pri}; --bit-srb-clr-hover: #{$clr-fg-sec-hover}; --bit-srb-clr-active: #{$clr-fg-sec-active}; + --bit-srb-clr-dis: #{$clr-fg-sec-dis}; + --bit-srb-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-srb-tfg { @@ -636,6 +662,8 @@ --bit-srb-clr-txt: #{$clr-bg-pri}; --bit-srb-clr-hover: #{$clr-fg-ter-hover}; --bit-srb-clr-active: #{$clr-fg-ter-active}; + --bit-srb-clr-dis: #{$clr-fg-ter-dis}; + --bit-srb-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-srb-pbr { @@ -643,6 +671,8 @@ --bit-srb-clr-txt: #{$clr-fg-pri}; --bit-srb-clr-hover: #{$clr-brd-pri-hover}; --bit-srb-clr-active: #{$clr-brd-pri-active}; + --bit-srb-clr-dis: #{$clr-brd-pri-dis}; + --bit-srb-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-srb-sbr { @@ -650,6 +680,8 @@ --bit-srb-clr-txt: #{$clr-fg-pri}; --bit-srb-clr-hover: #{$clr-brd-sec-hover}; --bit-srb-clr-active: #{$clr-brd-sec-active}; + --bit-srb-clr-dis: #{$clr-brd-sec-dis}; + --bit-srb-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-srb-tbr { @@ -657,4 +689,6 @@ --bit-srb-clr-txt: #{$clr-fg-pri}; --bit-srb-clr-hover: #{$clr-brd-ter-hover}; --bit-srb-clr-active: #{$clr-brd-ter-active}; + --bit-srb-clr-dis: #{$clr-brd-ter-dis}; + --bit-srb-clr-dis-text: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss index 26d1728e43..67f42cd0f9 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Lists/Timeline/BitTimeline.scss @@ -17,9 +17,9 @@ --bit-tln-dvd-top: 0; --bit-tln-dvd-height: 100%; --bit-tln-dvd-width: #{spacing(0.25)}; - --bit-tln-clr-dis: #{$clr-fg-dis}; - --bit-tln-clr-bg-dis: #{$clr-bg-dis}; - --bit-tln-clr-brd-dis: #{$clr-brd-dis}; + --bit-tln-clr-dis: var(--bit-tln-clr-dis-text); + --bit-tln-clr-bg-dis: var(--bit-tln-clr-dis-bg); + --bit-tln-clr-brd-dis: var(--bit-tln-clr-dis-bg); &.bit-dis { cursor: default; @@ -49,7 +49,7 @@ user-select: none; pointer-events: none; color: var(--bit-tln-clr-dis); - --bit-tln-dot-ico-clr: #{$clr-fg-dis}; + --bit-tln-dot-ico-clr: var(--bit-tln-clr-dis-text); } } @@ -181,48 +181,64 @@ --bit-tln-clr: #{$clr-pri}; --bit-tln-clr-fg: #{$clr-pri-text}; --bit-tln-clr-ico: #{$clr-pri-text}; + --bit-tln-clr-dis-bg: #{$clr-pri-dis}; + --bit-tln-clr-dis-text: #{$clr-pri-dis-text}; } .bit-tln-sec, .bit-tln-ise { --bit-tln-clr: #{$clr-sec}; --bit-tln-clr-fg: #{$clr-sec-text}; --bit-tln-clr-ico: #{$clr-sec-text}; + --bit-tln-clr-dis-bg: #{$clr-sec-dis}; + --bit-tln-clr-dis-text: #{$clr-sec-dis-text}; } .bit-tln-ter, .bit-tln-ite { --bit-tln-clr: #{$clr-ter}; --bit-tln-clr-fg: #{$clr-ter-text}; --bit-tln-clr-ico: #{$clr-ter-text}; + --bit-tln-clr-dis-bg: #{$clr-ter-dis}; + --bit-tln-clr-dis-text: #{$clr-ter-dis-text}; } .bit-tln-inf, .bit-tln-iin { --bit-tln-clr: #{$clr-inf}; --bit-tln-clr-fg: #{$clr-inf-text}; --bit-tln-clr-ico: #{$clr-inf-text}; + --bit-tln-clr-dis-bg: #{$clr-inf-dis}; + --bit-tln-clr-dis-text: #{$clr-inf-dis-text}; } .bit-tln-suc, .bit-tln-isu { --bit-tln-clr: #{$clr-suc}; --bit-tln-clr-fg: #{$clr-suc-text}; --bit-tln-clr-ico: #{$clr-suc-text}; + --bit-tln-clr-dis-bg: #{$clr-suc-dis}; + --bit-tln-clr-dis-text: #{$clr-suc-dis-text}; } .bit-tln-wrn, .bit-tln-iwr { --bit-tln-clr: #{$clr-wrn}; --bit-tln-clr-fg: #{$clr-wrn-text}; --bit-tln-clr-ico: #{$clr-wrn-text}; + --bit-tln-clr-dis-bg: #{$clr-wrn-dis}; + --bit-tln-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-tln-swr, .bit-tln-isw { --bit-tln-clr: #{$clr-swr}; --bit-tln-clr-fg: #{$clr-swr-text}; --bit-tln-clr-ico: #{$clr-swr-text}; + --bit-tln-clr-dis-bg: #{$clr-swr-dis}; + --bit-tln-clr-dis-text: #{$clr-swr-dis-text}; } .bit-tln-err, .bit-tln-ier { --bit-tln-clr: #{$clr-err}; --bit-tln-clr-fg: #{$clr-err-text}; --bit-tln-clr-ico: #{$clr-err-text}; + --bit-tln-clr-dis-bg: #{$clr-err-dis}; + --bit-tln-clr-dis-text: #{$clr-err-dis-text}; } .bit-tln-sm, .bit-tln-ism { diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scss index 07576906f2..15eb966e19 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/NavBar/BitNavBar.scss @@ -9,7 +9,7 @@ pointer-events: none; .bit-nbr-itm { - color: $clr-fg-dis; + color: var(--bit-nbr-clr-dis); } } } @@ -64,75 +64,92 @@ } .bit-nbr-dis { - color: $clr-fg-dis; + color: var(--bit-nbr-clr-dis); pointer-events: none; } .bit-nbr-pri { --bit-nbr-clr: #{$clr-pri}; + --bit-nbr-clr-dis: #{$clr-pri-dis-text}; } .bit-nbr-sec { --bit-nbr-clr: #{$clr-sec}; + --bit-nbr-clr-dis: #{$clr-sec-dis-text}; } .bit-nbr-ter { --bit-nbr-clr: #{$clr-ter}; + --bit-nbr-clr-dis: #{$clr-ter-dis-text}; } .bit-nbr-inf { --bit-nbr-clr: #{$clr-inf}; + --bit-nbr-clr-dis: #{$clr-inf-dis-text}; } .bit-nbr-suc { --bit-nbr-clr: #{$clr-suc}; + --bit-nbr-clr-dis: #{$clr-suc-dis-text}; } .bit-nbr-wrn { --bit-nbr-clr: #{$clr-wrn}; + --bit-nbr-clr-dis: #{$clr-wrn-dis-text}; } .bit-nbr-swr { --bit-nbr-clr: #{$clr-swr}; + --bit-nbr-clr-dis: #{$clr-swr-dis-text}; } .bit-nbr-err { --bit-nbr-clr: #{$clr-err}; + --bit-nbr-clr-dis: #{$clr-err-dis-text}; } .bit-nbr-pbg { --bit-nbr-clr: #{$clr-bg-pri}; + --bit-nbr-clr-dis: #{$clr-bg-pri-dis-text}; } .bit-nbr-sbg { --bit-nbr-clr: #{$clr-bg-sec}; + --bit-nbr-clr-dis: #{$clr-bg-sec-dis-text}; } .bit-nbr-tbg { --bit-nbr-clr: #{$clr-bg-ter}; + --bit-nbr-clr-dis: #{$clr-bg-ter-dis-text}; } .bit-nbr-pfg { --bit-nbr-clr: #{$clr-fg-pri}; + --bit-nbr-clr-dis: #{$clr-fg-pri-dis-text}; } .bit-nbr-sfg { --bit-nbr-clr: #{$clr-fg-sec}; + --bit-nbr-clr-dis: #{$clr-fg-sec-dis-text}; } .bit-nbr-tfg { --bit-nbr-clr: #{$clr-fg-ter}; + --bit-nbr-clr-dis: #{$clr-fg-ter-dis-text}; } .bit-nbr-pbr { --bit-nbr-clr: #{$clr-brd-pri}; + --bit-nbr-clr-dis: #{$clr-brd-pri-dis-text}; } .bit-nbr-sbr { --bit-nbr-clr: #{$clr-brd-sec}; + --bit-nbr-clr-dis: #{$clr-brd-sec-dis-text}; } .bit-nbr-tbr { --bit-nbr-clr: #{$clr-brd-ter}; + --bit-nbr-clr-dis: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scss index be21d2f680..117b5f8c48 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pagination/BitPagination.scss @@ -8,8 +8,8 @@ font-size: var(--bit-pgn-font-size); --bit-pgn-ico-transform-end: scaleX(1); --bit-pgn-ico-transform-start: scaleX(-1); - --bit-pgn-clr-dis: #{$clr-bg-dis}; - --bit-pgn-clr-txt-dis: #{$clr-fg-dis}; + --bit-pgn-clr-dis: var(--bit-pgn-clr-dis-bg); + --bit-pgn-clr-txt-dis: var(--bit-pgn-clr-dis-text); --bit-pgn-clr-btn-txt-hover: var(--bit-pgn-clr-txt); --bit-pgn-clr-btn-bg-hover: var(--bit-pgn-clr-hover); --bit-pgn-clr-btn-brd-hover: var(--bit-pgn-clr-hover); @@ -34,8 +34,8 @@ &.bit-dis { cursor: default; - color: $clr-fg-dis; pointer-events: none; + color: var(--bit-pgn-clr-txt-dis); } } @@ -90,7 +90,6 @@ &[disabled] { cursor: default; - color: $clr-fg-dis; pointer-events: none; color: var(--bit-pgn-clr-btn-txt-dis); border-color: var(--bit-pgn-clr-btn-brd-dis); @@ -151,6 +150,8 @@ --bit-pgn-clr-sel: #{$clr-pri-dark}; --bit-pgn-clr-sel-hover: #{$clr-pri-dark-hover}; --bit-pgn-clr-sel-active: #{$clr-pri-dark-active}; + --bit-pgn-clr-dis-bg: #{$clr-pri-dis}; + --bit-pgn-clr-dis-text: #{$clr-pri-dis-text}; } .bit-pgn-sec { @@ -161,6 +162,8 @@ --bit-pgn-clr-sel: #{$clr-sec-dark}; --bit-pgn-clr-sel-hover: #{$clr-sec-dark-hover}; --bit-pgn-clr-sel-active: #{$clr-sec-dark-active}; + --bit-pgn-clr-dis-bg: #{$clr-sec-dis}; + --bit-pgn-clr-dis-text: #{$clr-sec-dis-text}; } .bit-pgn-ter { @@ -171,6 +174,8 @@ --bit-pgn-clr-sel: #{$clr-ter-dark}; --bit-pgn-clr-sel-hover: #{$clr-ter-dark-hover}; --bit-pgn-clr-sel-active: #{$clr-ter-dark-active}; + --bit-pgn-clr-dis-bg: #{$clr-ter-dis}; + --bit-pgn-clr-dis-text: #{$clr-ter-dis-text}; } .bit-pgn-inf { @@ -181,6 +186,8 @@ --bit-pgn-clr-sel: #{$clr-inf-dark}; --bit-pgn-clr-sel-hover: #{$clr-inf-dark-hover}; --bit-pgn-clr-sel-active: #{$clr-inf-dark-active}; + --bit-pgn-clr-dis-bg: #{$clr-inf-dis}; + --bit-pgn-clr-dis-text: #{$clr-inf-dis-text}; } .bit-pgn-suc { @@ -191,6 +198,8 @@ --bit-pgn-clr-sel: #{$clr-suc-dark}; --bit-pgn-clr-sel-hover: #{$clr-suc-dark-hover}; --bit-pgn-clr-sel-active: #{$clr-suc-dark-active}; + --bit-pgn-clr-dis-bg: #{$clr-suc-dis}; + --bit-pgn-clr-dis-text: #{$clr-suc-dis-text}; } .bit-pgn-wrn { @@ -201,6 +210,8 @@ --bit-pgn-clr-sel: #{$clr-wrn-dark}; --bit-pgn-clr-sel-hover: #{$clr-wrn-dark-hover}; --bit-pgn-clr-sel-active: #{$clr-wrn-dark-active}; + --bit-pgn-clr-dis-bg: #{$clr-wrn-dis}; + --bit-pgn-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-pgn-swr { @@ -211,6 +222,8 @@ --bit-pgn-clr-sel: #{$clr-swr-dark}; --bit-pgn-clr-sel-hover: #{$clr-swr-dark-hover}; --bit-pgn-clr-sel-active: #{$clr-swr-dark-active}; + --bit-pgn-clr-dis-bg: #{$clr-swr-dis}; + --bit-pgn-clr-dis-text: #{$clr-swr-dis-text}; } .bit-pgn-err { @@ -221,6 +234,8 @@ --bit-pgn-clr-sel: #{$clr-err-dark}; --bit-pgn-clr-sel-hover: #{$clr-err-dark-hover}; --bit-pgn-clr-sel-active: #{$clr-err-dark-active}; + --bit-pgn-clr-dis-bg: #{$clr-err-dis}; + --bit-pgn-clr-dis-text: #{$clr-err-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss index a21721d260..a9ffcdab64 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Navs/Pivot/BitPivot.scss @@ -8,17 +8,17 @@ .content-container { cursor: default; pointer-events: none; - color: $clr-fg-dis; + color: var(--bit-pvt-clr-dis-text); } .bit-pvti { cursor: default; pointer-events: none; - color: $clr-fg-dis; + color: var(--bit-pvt-clr-dis-text); } .bit-pvti-sel::before { - background-color: $clr-brd-dis; + background-color: var(--bit-pvt-clr-dis); } } } @@ -184,10 +184,10 @@ &.bit-dis { cursor: default; pointer-events: none; - color: $clr-fg-dis; + color: var(--bit-pvt-clr-dis-text); &.bit-pvti-sel::before { - background-color: $clr-brd-dis; + background-color: var(--bit-pvt-clr-dis); } } } @@ -258,48 +258,64 @@ --bit-pvt-clr: #{$clr-pri}; --bit-pvt-clr-hover: #{$clr-pri-hover}; --bit-pvt-clr-text: #{$clr-pri-text}; + --bit-pvt-clr-dis: #{$clr-pri-dis}; + --bit-pvt-clr-dis-text: #{$clr-pri-dis-text}; } .bit-pvt-sec { --bit-pvt-clr: #{$clr-sec}; --bit-pvt-clr-hover: #{$clr-sec-hover}; --bit-pvt-clr-text: #{$clr-sec-text}; + --bit-pvt-clr-dis: #{$clr-sec-dis}; + --bit-pvt-clr-dis-text: #{$clr-sec-dis-text}; } .bit-pvt-ter { --bit-pvt-clr: #{$clr-ter}; --bit-pvt-clr-hover: #{$clr-ter-hover}; --bit-pvt-clr-text: #{$clr-ter-text}; + --bit-pvt-clr-dis: #{$clr-ter-dis}; + --bit-pvt-clr-dis-text: #{$clr-ter-dis-text}; } .bit-pvt-inf { --bit-pvt-clr: #{$clr-inf}; --bit-pvt-clr-hover: #{$clr-inf-hover}; --bit-pvt-clr-text: #{$clr-inf-text}; + --bit-pvt-clr-dis: #{$clr-inf-dis}; + --bit-pvt-clr-dis-text: #{$clr-inf-dis-text}; } .bit-pvt-suc { --bit-pvt-clr: #{$clr-suc}; --bit-pvt-clr-hover: #{$clr-suc-hover}; --bit-pvt-clr-text: #{$clr-suc-text}; + --bit-pvt-clr-dis: #{$clr-suc-dis}; + --bit-pvt-clr-dis-text: #{$clr-suc-dis-text}; } .bit-pvt-wrn { --bit-pvt-clr: #{$clr-wrn}; --bit-pvt-clr-hover: #{$clr-wrn-hover}; --bit-pvt-clr-text: #{$clr-wrn-text}; + --bit-pvt-clr-dis: #{$clr-wrn-dis}; + --bit-pvt-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-pvt-swr { --bit-pvt-clr: #{$clr-swr}; --bit-pvt-clr-hover: #{$clr-swr-hover}; --bit-pvt-clr-text: #{$clr-swr-text}; + --bit-pvt-clr-dis: #{$clr-swr-dis}; + --bit-pvt-clr-dis-text: #{$clr-swr-dis-text}; } .bit-pvt-err { --bit-pvt-clr: #{$clr-err}; --bit-pvt-clr-hover: #{$clr-err-hover}; --bit-pvt-clr-text: #{$clr-err-text}; + --bit-pvt-clr-dis: #{$clr-err-dis}; + --bit-pvt-clr-dis-text: #{$clr-err-dis-text}; } @@ -307,52 +323,70 @@ --bit-pvt-clr: #{$clr-bg-pri}; --bit-pvt-clr-hover: #{$clr-bg-pri-hover}; --bit-pvt-clr-text: #{$clr-fg-pri}; + --bit-pvt-clr-dis: #{$clr-bg-pri-dis}; + --bit-pvt-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-pvt-sbg { --bit-pvt-clr: #{$clr-bg-sec}; --bit-pvt-clr-hover: #{$clr-bg-sec-hover}; --bit-pvt-clr-text: #{$clr-fg-pri}; + --bit-pvt-clr-dis: #{$clr-bg-sec-dis}; + --bit-pvt-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-pvt-tbg { --bit-pvt-clr: #{$clr-bg-ter}; --bit-pvt-clr-hover: #{$clr-bg-ter-hover}; --bit-pvt-clr-text: #{$clr-fg-pri}; + --bit-pvt-clr-dis: #{$clr-bg-ter-dis}; + --bit-pvt-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-pvt-pfg { --bit-pvt-clr: #{$clr-fg-pri}; --bit-pvt-clr-hover: #{$clr-fg-pri-hover}; --bit-pvt-clr-text: #{$clr-bg-pri}; + --bit-pvt-clr-dis: #{$clr-fg-pri-dis}; + --bit-pvt-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-pvt-sfg { --bit-pvt-clr: #{$clr-fg-sec}; --bit-pvt-clr-hover: #{$clr-fg-sec-hover}; --bit-pvt-clr-text: #{$clr-bg-pri}; + --bit-pvt-clr-dis: #{$clr-fg-sec-dis}; + --bit-pvt-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-pvt-tfg { --bit-pvt-clr: #{$clr-fg-ter}; --bit-pvt-clr-hover: #{$clr-fg-ter-hover}; --bit-pvt-clr-text: #{$clr-bg-pri}; + --bit-pvt-clr-dis: #{$clr-fg-ter-dis}; + --bit-pvt-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-pvt-pbr { --bit-pvt-clr: #{$clr-brd-pri}; --bit-pvt-clr-hover: #{$clr-brd-pri-hover}; --bit-pvt-clr-text: #{$clr-fg-pri}; + --bit-pvt-clr-dis: #{$clr-brd-pri-dis}; + --bit-pvt-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-pvt-sbr { --bit-pvt-clr: #{$clr-brd-sec}; --bit-pvt-clr-hover: #{$clr-brd-sec-hover}; --bit-pvt-clr-text: #{$clr-fg-pri}; + --bit-pvt-clr-dis: #{$clr-brd-sec-dis}; + --bit-pvt-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-pvt-tbr { --bit-pvt-clr: #{$clr-brd-ter}; --bit-pvt-clr-hover: #{$clr-brd-ter-hover}; --bit-pvt-clr-text: #{$clr-fg-pri}; + --bit-pvt-clr-dis: #{$clr-brd-ter-dis}; + --bit-pvt-clr-dis-text: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss index fbcc96f71e..dee4688dbc 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Badge/BitBadge.scss @@ -6,7 +6,7 @@ &.bit-dis { --bit-bdg-poievents: none; - --bit-bdg-cnt-clr-txt: #{$clr-fg-dis}; + --bit-bdg-cnt-clr-txt: var(--bit-bdg-clr-dis-text); --bit-bdg-cnt-clr-bg: var(--bit-bdg-clr-bg-dis); --bit-bdg-cnt-clr-brd: var(--bit-bdg-clr-brd-dis); } @@ -292,8 +292,8 @@ .bit-bdg-fil { - --bit-bdg-clr-bg-dis: #{$clr-bg-dis}; - --bit-bdg-clr-brd-dis: #{$clr-brd-dis}; + --bit-bdg-clr-bg-dis: var(--bit-bdg-clr-dis); + --bit-bdg-clr-brd-dis: var(--bit-bdg-clr-dis); --bit-bdg-cnt-clr-bg: var(--bit-bdg-clr); --bit-bdg-cnt-clr-brd: var(--bit-bdg-clr); --bit-bdg-cnt-clr-txt: var(--bit-bdg-clr-txt); @@ -301,7 +301,8 @@ .bit-bdg-otl { --bit-bdg-cnt-clr-bg: transparent; - --bit-bdg-clr-brd-dis: #{$clr-brd-dis}; + --bit-bdg-clr-bg-dis: transparent; + --bit-bdg-clr-brd-dis: var(--bit-bdg-clr-dis); --bit-bdg-cnt-clr-txt: var(--bit-bdg-clr); --bit-bdg-cnt-clr-brd: var(--bit-bdg-clr); } @@ -309,6 +310,7 @@ .bit-bdg-txt { --bit-bdg-cnt-clr-bg: transparent; --bit-bdg-cnt-clr-brd: transparent; + --bit-bdg-clr-bg-dis: transparent; --bit-bdg-clr-brd-dis: transparent; --bit-bdg-cnt-clr-txt: var(--bit-bdg-clr); } @@ -317,41 +319,57 @@ .bit-bdg-pri { --bit-bdg-clr: #{$clr-pri}; --bit-bdg-clr-txt: #{$clr-pri-text}; + --bit-bdg-clr-dis: #{$clr-pri-dis}; + --bit-bdg-clr-dis-text: #{$clr-pri-dis-text}; } .bit-bdg-sec { --bit-bdg-clr: #{$clr-sec}; --bit-bdg-clr-txt: #{$clr-sec-text}; + --bit-bdg-clr-dis: #{$clr-sec-dis}; + --bit-bdg-clr-dis-text: #{$clr-sec-dis-text}; } .bit-bdg-ter { --bit-bdg-clr: #{$clr-ter}; --bit-bdg-clr-txt: #{$clr-ter-text}; + --bit-bdg-clr-dis: #{$clr-ter-dis}; + --bit-bdg-clr-dis-text: #{$clr-ter-dis-text}; } .bit-bdg-inf { --bit-bdg-clr: #{$clr-inf}; --bit-bdg-clr-txt: #{$clr-inf-text}; + --bit-bdg-clr-dis: #{$clr-inf-dis}; + --bit-bdg-clr-dis-text: #{$clr-inf-dis-text}; } .bit-bdg-suc { --bit-bdg-clr: #{$clr-suc}; --bit-bdg-clr-txt: #{$clr-suc-text}; + --bit-bdg-clr-dis: #{$clr-suc-dis}; + --bit-bdg-clr-dis-text: #{$clr-suc-dis-text}; } .bit-bdg-wrn { --bit-bdg-clr: #{$clr-wrn}; --bit-bdg-clr-txt: #{$clr-wrn-text}; + --bit-bdg-clr-dis: #{$clr-wrn-dis}; + --bit-bdg-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-bdg-swr { --bit-bdg-clr: #{$clr-swr}; --bit-bdg-clr-txt: #{$clr-swr-text}; + --bit-bdg-clr-dis: #{$clr-swr-dis}; + --bit-bdg-clr-dis-text: #{$clr-swr-dis-text}; } .bit-bdg-err { --bit-bdg-clr: #{$clr-err}; --bit-bdg-clr-txt: #{$clr-err-text}; + --bit-bdg-clr-dis: #{$clr-err-dis}; + --bit-bdg-clr-dis-text: #{$clr-err-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss index dba1b9dab6..9effece144 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss @@ -18,7 +18,6 @@ &.bit-dis { cursor: default; user-select: none; - color: $clr-fg-dis; pointer-events: none; } } @@ -45,8 +44,9 @@ background-color: var(--bit-tag-clr); &.bit-dis { - border-color: $clr-brd-dis; - background-color: $clr-bg-dis; + color: var(--bit-tag-clr-dis-text); + border-color: var(--bit-tag-clr-dis); + background-color: var(--bit-tag-clr-dis); } } @@ -56,7 +56,8 @@ background-color: transparent; &.bit-dis { - border-color: $clr-brd-dis; + color: var(--bit-tag-clr-dis-text); + border-color: var(--bit-tag-clr-dis); background-color: transparent; } } @@ -67,6 +68,7 @@ background-color: transparent; &.bit-dis { + color: var(--bit-tag-clr-dis-text); border-color: transparent; background-color: transparent; } @@ -75,86 +77,120 @@ .bit-tag-pri { --bit-tag-clr: #{$clr-pri}; --bit-tag-clr-txt: #{$clr-pri-text}; + --bit-tag-clr-dis: #{$clr-pri-dis}; + --bit-tag-clr-dis-text: #{$clr-pri-dis-text}; } .bit-tag-sec { --bit-tag-clr: #{$clr-sec}; --bit-tag-clr-txt: #{$clr-sec-text}; + --bit-tag-clr-dis: #{$clr-sec-dis}; + --bit-tag-clr-dis-text: #{$clr-sec-dis-text}; } .bit-tag-ter { --bit-tag-clr: #{$clr-ter}; --bit-tag-clr-txt: #{$clr-ter-text}; + --bit-tag-clr-dis: #{$clr-ter-dis}; + --bit-tag-clr-dis-text: #{$clr-ter-dis-text}; } .bit-tag-inf { --bit-tag-clr: #{$clr-inf}; --bit-tag-clr-txt: #{$clr-inf-text}; + --bit-tag-clr-dis: #{$clr-inf-dis}; + --bit-tag-clr-dis-text: #{$clr-inf-dis-text}; } .bit-tag-suc { --bit-tag-clr: #{$clr-suc}; --bit-tag-clr-txt: #{$clr-suc-text}; + --bit-tag-clr-dis: #{$clr-suc-dis}; + --bit-tag-clr-dis-text: #{$clr-suc-dis-text}; } .bit-tag-wrn { --bit-tag-clr: #{$clr-wrn}; --bit-tag-clr-txt: #{$clr-wrn-text}; + --bit-tag-clr-dis: #{$clr-wrn-dis}; + --bit-tag-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-tag-swr { --bit-tag-clr: #{$clr-swr}; --bit-tag-clr-txt: #{$clr-swr-text}; + --bit-tag-clr-dis: #{$clr-swr-dis}; + --bit-tag-clr-dis-text: #{$clr-swr-dis-text}; } .bit-tag-err { --bit-tag-clr: #{$clr-err}; --bit-tag-clr-txt: #{$clr-err-text}; + --bit-tag-clr-dis: #{$clr-err-dis}; + --bit-tag-clr-dis-text: #{$clr-err-dis-text}; } .bit-tag-pbg { --bit-tag-clr: #{$clr-bg-pri}; --bit-tag-clr-txt: #{$clr-fg-pri}; + --bit-tag-clr-dis: #{$clr-bg-pri-dis}; + --bit-tag-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-tag-sbg { --bit-tag-clr: #{$clr-bg-sec}; --bit-tag-clr-txt: #{$clr-fg-pri}; + --bit-tag-clr-dis: #{$clr-bg-sec-dis}; + --bit-tag-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-tag-tbg { --bit-tag-clr: #{$clr-bg-ter}; --bit-tag-clr-txt: #{$clr-fg-pri}; + --bit-tag-clr-dis: #{$clr-bg-ter-dis}; + --bit-tag-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-tag-pfg { --bit-tag-clr: #{$clr-fg-pri}; --bit-tag-clr-txt: #{$clr-bg-pri}; + --bit-tag-clr-dis: #{$clr-fg-pri-dis}; + --bit-tag-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-tag-sfg { --bit-tag-clr: #{$clr-fg-sec}; --bit-tag-clr-txt: #{$clr-bg-pri}; + --bit-tag-clr-dis: #{$clr-fg-sec-dis}; + --bit-tag-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-tag-tfg { --bit-tag-clr: #{$clr-fg-ter}; --bit-tag-clr-txt: #{$clr-bg-pri}; + --bit-tag-clr-dis: #{$clr-fg-ter-dis}; + --bit-tag-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-tag-pbr { --bit-tag-clr: #{$clr-brd-pri}; --bit-tag-clr-txt: #{$clr-fg-pri}; + --bit-tag-clr-dis: #{$clr-brd-pri-dis}; + --bit-tag-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-tag-sbr { --bit-tag-clr: #{$clr-brd-sec}; --bit-tag-clr-txt: #{$clr-fg-pri}; + --bit-tag-clr-dis: #{$clr-brd-sec-dis}; + --bit-tag-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-tag-tbr { --bit-tag-clr: #{$clr-brd-ter}; --bit-tag-clr-txt: #{$clr-fg-pri}; + --bit-tag-clr-dis: #{$clr-brd-ter-dis}; + --bit-tag-clr-dis-text: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scss b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scss index ad9a4a9583..ee4f143c0d 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Icon/BitIcon.scss @@ -7,7 +7,7 @@ border-width: $shp-border-width; &.bit-dis { - color: $clr-fg-dis; + color: var(--bit-ico-clr-dis-text); } } @@ -16,12 +16,24 @@ color: var(--bit-ico-clr-txt); border-color: var(--bit-ico-clr); background-color: var(--bit-ico-clr); + + &.bit-dis { + color: var(--bit-ico-clr-dis-text); + border-color: var(--bit-ico-clr-dis); + background-color: var(--bit-ico-clr-dis); + } } .bit-ico-out { color: var(--bit-ico-clr); border-color: var(--bit-ico-clr); background-color: transparent; + + &.bit-dis { + color: var(--bit-ico-clr-dis-text); + border-color: var(--bit-ico-clr-dis); + background-color: transparent; + } } .bit-ico-txt { @@ -30,92 +42,130 @@ background-color: transparent; border: none; padding: 0; + + &.bit-dis { + color: var(--bit-ico-clr-dis-text); + } } .bit-ico-pri { --bit-ico-clr: #{$clr-pri}; --bit-ico-clr-txt: #{$clr-pri-text}; + --bit-ico-clr-dis: #{$clr-pri-dis}; + --bit-ico-clr-dis-text: #{$clr-pri-dis-text}; } .bit-ico-sec { --bit-ico-clr: #{$clr-sec}; --bit-ico-clr-txt: #{$clr-sec-text}; + --bit-ico-clr-dis: #{$clr-sec-dis}; + --bit-ico-clr-dis-text: #{$clr-sec-dis-text}; } .bit-ico-ter { --bit-ico-clr: #{$clr-ter}; --bit-ico-clr-txt: #{$clr-ter-text}; + --bit-ico-clr-dis: #{$clr-ter-dis}; + --bit-ico-clr-dis-text: #{$clr-ter-dis-text}; } .bit-ico-inf { --bit-ico-clr: #{$clr-inf}; --bit-ico-clr-txt: #{$clr-inf-text}; + --bit-ico-clr-dis: #{$clr-inf-dis}; + --bit-ico-clr-dis-text: #{$clr-inf-dis-text}; } .bit-ico-suc { --bit-ico-clr: #{$clr-suc}; --bit-ico-clr-txt: #{$clr-suc-text}; + --bit-ico-clr-dis: #{$clr-suc-dis}; + --bit-ico-clr-dis-text: #{$clr-suc-dis-text}; } .bit-ico-wrn { --bit-ico-clr: #{$clr-wrn}; --bit-ico-clr-txt: #{$clr-wrn-text}; + --bit-ico-clr-dis: #{$clr-wrn-dis}; + --bit-ico-clr-dis-text: #{$clr-wrn-dis-text}; } .bit-ico-swr { --bit-ico-clr: #{$clr-swr}; --bit-ico-clr-txt: #{$clr-swr-text}; + --bit-ico-clr-dis: #{$clr-swr-dis}; + --bit-ico-clr-dis-text: #{$clr-swr-dis-text}; } .bit-ico-err { --bit-ico-clr: #{$clr-err}; --bit-ico-clr-txt: #{$clr-err-text}; + --bit-ico-clr-dis: #{$clr-err-dis}; + --bit-ico-clr-dis-text: #{$clr-err-dis-text}; } .bit-ico-pbg { --bit-ico-clr: #{$clr-bg-pri}; --bit-ico-clr-txt: #{$clr-fg-pri}; + --bit-ico-clr-dis: #{$clr-bg-pri-dis}; + --bit-ico-clr-dis-text: #{$clr-bg-pri-dis-text}; } .bit-ico-sbg { --bit-ico-clr: #{$clr-bg-sec}; --bit-ico-clr-txt: #{$clr-fg-sec}; + --bit-ico-clr-dis: #{$clr-bg-sec-dis}; + --bit-ico-clr-dis-text: #{$clr-bg-sec-dis-text}; } .bit-ico-tbg { --bit-ico-clr: #{$clr-bg-ter}; --bit-ico-clr-txt: #{$clr-fg-ter}; + --bit-ico-clr-dis: #{$clr-bg-ter-dis}; + --bit-ico-clr-dis-text: #{$clr-bg-ter-dis-text}; } .bit-ico-pfg { --bit-ico-clr: #{$clr-fg-pri}; --bit-ico-clr-txt: #{$clr-bg-pri}; + --bit-ico-clr-dis: #{$clr-fg-pri-dis}; + --bit-ico-clr-dis-text: #{$clr-fg-pri-dis-text}; } .bit-ico-sfg { --bit-ico-clr: #{$clr-fg-sec}; --bit-ico-clr-txt: #{$clr-bg-sec}; + --bit-ico-clr-dis: #{$clr-fg-sec-dis}; + --bit-ico-clr-dis-text: #{$clr-fg-sec-dis-text}; } .bit-ico-tfg { --bit-ico-clr: #{$clr-fg-ter}; --bit-ico-clr-txt: #{$clr-bg-ter}; + --bit-ico-clr-dis: #{$clr-fg-ter-dis}; + --bit-ico-clr-dis-text: #{$clr-fg-ter-dis-text}; } .bit-ico-pbr { - --bit-ico-clr: #{$clr-bg-pri}; + --bit-ico-clr: #{$clr-brd-pri}; --bit-ico-clr-txt: #{$clr-fg-pri}; + --bit-ico-clr-dis: #{$clr-brd-pri-dis}; + --bit-ico-clr-dis-text: #{$clr-brd-pri-dis-text}; } .bit-ico-sbr { - --bit-ico-clr: #{$clr-bg-sec}; + --bit-ico-clr: #{$clr-brd-sec}; --bit-ico-clr-txt: #{$clr-fg-sec}; + --bit-ico-clr-dis: #{$clr-brd-sec-dis}; + --bit-ico-clr-dis-text: #{$clr-brd-sec-dis-text}; } .bit-ico-tbr { - --bit-ico-clr: #{$clr-bg-ter}; + --bit-ico-clr: #{$clr-brd-ter}; --bit-ico-clr-txt: #{$clr-fg-ter}; + --bit-ico-clr-dis: #{$clr-brd-ter-dis}; + --bit-ico-clr-dis-text: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss index 7bf2faa285..80641a1566 100644 --- a/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss +++ b/src/BlazorUI/Bit.BlazorUI/Components/Utilities/Link/BitLink.scss @@ -30,12 +30,12 @@ &.bit-dis { cursor: default; - color: $clr-fg-dis; + color: var(--bit-lnk-clr-dis); &:hover, &:active, &:focus { - color: $clr-fg-dis; + color: var(--bit-lnk-clr-dis); } &:focus-visible { @@ -82,84 +82,101 @@ .bit-lnk-pri { --bit-lnk-clr: #{$clr-pri}; --bit-lnk-clr-hover: #{$clr-pri-hover}; + --bit-lnk-clr-dis: #{$clr-pri-dis-text}; } .bit-lnk-sec { --bit-lnk-clr: #{$clr-sec}; --bit-lnk-clr-hover: #{$clr-sec-hover}; + --bit-lnk-clr-dis: #{$clr-sec-dis-text}; } .bit-lnk-ter { --bit-lnk-clr: #{$clr-ter}; --bit-lnk-clr-hover: #{$clr-ter-hover}; + --bit-lnk-clr-dis: #{$clr-ter-dis-text}; } .bit-lnk-inf { --bit-lnk-clr: #{$clr-inf}; --bit-lnk-clr-hover: #{$clr-inf-hover}; + --bit-lnk-clr-dis: #{$clr-inf-dis-text}; } .bit-lnk-suc { --bit-lnk-clr: #{$clr-suc}; --bit-lnk-clr-hover: #{$clr-suc-hover}; + --bit-lnk-clr-dis: #{$clr-suc-dis-text}; } .bit-lnk-wrn { --bit-lnk-clr: #{$clr-wrn}; --bit-lnk-clr-hover: #{$clr-wrn-hover}; + --bit-lnk-clr-dis: #{$clr-wrn-dis-text}; } .bit-lnk-swr { --bit-lnk-clr: #{$clr-swr}; --bit-lnk-clr-hover: #{$clr-swr-hover}; + --bit-lnk-clr-dis: #{$clr-swr-dis-text}; } .bit-lnk-err { --bit-lnk-clr: #{$clr-err}; --bit-lnk-clr-hover: #{$clr-err-hover}; + --bit-lnk-clr-dis: #{$clr-err-dis-text}; } .bit-lnk-pbg { --bit-lnk-clr: #{$clr-bg-pri}; --bit-lnk-clr-hover: #{$clr-bg-pri-hover}; + --bit-lnk-clr-dis: #{$clr-bg-pri-dis-text}; } .bit-lnk-sbg { --bit-lnk-clr: #{$clr-bg-sec}; --bit-lnk-clr-hover: #{$clr-bg-sec-hover}; + --bit-lnk-clr-dis: #{$clr-bg-sec-dis-text}; } .bit-lnk-tbg { --bit-lnk-clr: #{$clr-bg-ter}; --bit-lnk-clr-hover: #{$clr-bg-ter-hover}; + --bit-lnk-clr-dis: #{$clr-bg-ter-dis-text}; } .bit-lnk-pfg { --bit-lnk-clr: #{$clr-fg-pri}; --bit-lnk-clr-hover: #{$clr-fg-pri-hover}; + --bit-lnk-clr-dis: #{$clr-fg-pri-dis-text}; } .bit-lnk-sfg { --bit-lnk-clr: #{$clr-fg-sec}; --bit-lnk-clr-hover: #{$clr-fg-sec-hover}; + --bit-lnk-clr-dis: #{$clr-fg-sec-dis-text}; } .bit-lnk-tfg { --bit-lnk-clr: #{$clr-fg-ter}; --bit-lnk-clr-hover: #{$clr-fg-ter-hover}; + --bit-lnk-clr-dis: #{$clr-fg-ter-dis-text}; } .bit-lnk-pbr { --bit-lnk-clr: #{$clr-brd-pri}; --bit-lnk-clr-hover: #{$clr-brd-pri-hover}; + --bit-lnk-clr-dis: #{$clr-brd-pri-dis-text}; } .bit-lnk-sbr { --bit-lnk-clr: #{$clr-brd-sec}; --bit-lnk-clr-hover: #{$clr-brd-sec-hover}; + --bit-lnk-clr-dis: #{$clr-brd-sec-dis-text}; } .bit-lnk-tbr { --bit-lnk-clr: #{$clr-brd-ter}; --bit-lnk-clr-hover: #{$clr-brd-ter-hover}; + --bit-lnk-clr-dis: #{$clr-brd-ter-dis-text}; } diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss index 29fa4a71cf..0f35f38252 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-dark.scss @@ -12,6 +12,8 @@ --bit-clr-pri-light-hover: #78B2FF; --bit-clr-pri-light-active: #67A9FF; --bit-clr-pri-text: #212121; + --bit-clr-pri-dis: #2A4A6B; + --bit-clr-pri-dis-text: #4A7AAF; //secondary --bit-clr-sec: #FF9E67; --bit-clr-sec-hover: #E58E5D; @@ -23,6 +25,8 @@ --bit-clr-sec-light-hover: #FFB185; --bit-clr-sec-light-active: #FFA876; --bit-clr-sec-text: #212121; + --bit-clr-sec-dis: #5C3A22; + --bit-clr-sec-dis-text: #A06840; //tertiary --bit-clr-ter: #E6E6E6; --bit-clr-ter-hover: #CFCFCF; @@ -34,6 +38,8 @@ --bit-clr-ter-light-hover: #EBEBEB; --bit-clr-ter-light-active: #E9E9E9; --bit-clr-ter-text: #212121; + --bit-clr-ter-dis: #3D3D3D; + --bit-clr-ter-dis-text: #6B6B6B; //info --bit-clr-inf: #ABACAE; --bit-clr-inf-hover: #9A9B9D; @@ -45,6 +51,8 @@ --bit-clr-inf-light-hover: #BCBDBE; --bit-clr-inf-light-active: #B3B4B6; --bit-clr-inf-text: #212121; + --bit-clr-inf-dis: #3A3D40; + --bit-clr-inf-dis-text: #6B7078; //success --bit-clr-suc: #7FB58A; --bit-clr-suc-hover: #72A37C; @@ -56,6 +64,8 @@ --bit-clr-suc-light-hover: #99C4A1; --bit-clr-suc-light-active: #8CBC96; --bit-clr-suc-text: #212121; + --bit-clr-suc-dis: #2A4A2E; + --bit-clr-suc-dis-text: #4A8050; //warning --bit-clr-wrn: #FFD07A; --bit-clr-wrn-hover: #E5BB6E; @@ -67,6 +77,8 @@ --bit-clr-wrn-light-hover: #FFD995; --bit-clr-wrn-light-active: #FFD587; --bit-clr-wrn-text: #212121; + --bit-clr-wrn-dis: #5C4A1F; + --bit-clr-wrn-dis-text: #A08540; //severe-warning --bit-clr-swr: #E8A874; --bit-clr-swr-hover: #D19768; @@ -78,6 +90,8 @@ --bit-clr-swr-light-hover: #EDB990; --bit-clr-swr-light-active: #EAB182; --bit-clr-swr-text: #212121; + --bit-clr-swr-dis: #5C3A1F; + --bit-clr-swr-dis-text: #A06830; //error --bit-clr-err: #DC7C7C; --bit-clr-err-hover: #C67070; @@ -89,6 +103,8 @@ --bit-clr-err-light-hover: #E39696; --bit-clr-err-light-active: #E08989; --bit-clr-err-text: #212121; + --bit-clr-err-dis: #5C2A2A; + --bit-clr-err-dis-text: #A05050; //foregrounds --bit-clr-fg-pri: #F6F7F8; --bit-clr-fg-pri-hover: #DEDFE0; @@ -99,6 +115,8 @@ --bit-clr-fg-pri-light: #FFFFFF; --bit-clr-fg-pri-light-hover: #EDEDED; --bit-clr-fg-pri-light-active: #DCDCDC; + --bit-clr-fg-pri-dis: #4A4A4A; + --bit-clr-fg-pri-dis-text: #3A3A3A; --bit-clr-fg-sec: #ADB5BF; --bit-clr-fg-sec-hover: #9DA4AD; --bit-clr-fg-sec-active: #8B9199; @@ -108,6 +126,8 @@ --bit-clr-fg-sec-light: #B8C1CC; --bit-clr-fg-sec-light-hover: #A8B1BB; --bit-clr-fg-sec-light-active: #979DA7; + --bit-clr-fg-sec-dis: #3D4450; + --bit-clr-fg-sec-dis-text: #2E343D; --bit-clr-fg-ter: #616973; --bit-clr-fg-ter-hover: #565D66; --bit-clr-fg-ter-active: #4B5159; @@ -117,6 +137,8 @@ --bit-clr-fg-ter-light: #717881; --bit-clr-fg-ter-light-hover: #636A72; --bit-clr-fg-ter-light-active: #575D64; + --bit-clr-fg-ter-dis: #2E333A; + --bit-clr-fg-ter-dis-text: #22272D; --bit-clr-fg-dis: #666; //backgrounds --bit-clr-bg-pri: #010409; @@ -128,6 +150,8 @@ --bit-clr-bg-pri-light: #030914; --bit-clr-bg-pri-light-hover: #151C24; --bit-clr-bg-pri-light-active: #111A24; + --bit-clr-bg-pri-dis: #0A0E13; + --bit-clr-bg-pri-dis-text: #3A3A3A; --bit-clr-bg-sec: #101419; --bit-clr-bg-sec-hover: #1C222B; --bit-clr-bg-sec-active: #202731; @@ -137,6 +161,8 @@ --bit-clr-bg-sec-light: #1A1F26; --bit-clr-bg-sec-light-hover: #242A33; --bit-clr-bg-sec-light-active: #2B323D; + --bit-clr-bg-sec-dis: #141920; + --bit-clr-bg-sec-dis-text: #3A3A3A; --bit-clr-bg-ter: #181F26; --bit-clr-bg-ter-hover: #1B232B; --bit-clr-bg-ter-active: #202A33; @@ -146,6 +172,8 @@ --bit-clr-bg-ter-light: #202830; --bit-clr-bg-ter-light-hover: #212A33; --bit-clr-bg-ter-light-active: #27313B; + --bit-clr-bg-ter-dis: #1C232B; + --bit-clr-bg-ter-dis-text: #3A3A3A; --bit-clr-bg-dis: #222; --bit-clr-bg-overlay: rgba(255, 255, 255, 0.2); //borders @@ -158,6 +186,8 @@ --bit-clr-brd-pri-light: #78838E; --bit-clr-brd-pri-light-hover: #A1AFBD; --bit-clr-brd-pri-light-active: #B5C3D3; + --bit-clr-brd-pri-dis: #3A4250; + --bit-clr-brd-pri-dis-text: #4A5260; --bit-clr-brd-sec: #38424D; --bit-clr-brd-sec-hover: #5E6F80; --bit-clr-brd-sec-active: #718599; @@ -167,6 +197,8 @@ --bit-clr-brd-sec-light: #424C57; --bit-clr-brd-sec-light-hover: #68798A; --bit-clr-brd-sec-light-active: #7E91A4; + --bit-clr-brd-sec-dis: #252D36; + --bit-clr-brd-sec-dis-text: #3A4250; --bit-clr-brd-ter: #232933; --bit-clr-brd-ter-hover: #465266; --bit-clr-brd-ter-active: #586780; @@ -176,6 +208,8 @@ --bit-clr-brd-ter-light: #2E343E; --bit-clr-brd-ter-light-hover: #505B6F; --bit-clr-brd-ter-light-active: #637189; + --bit-clr-brd-ter-dis: #1A1F27; + --bit-clr-brd-ter-dis-text: #2A3038; --bit-clr-brd-dis: #21262D; //req --bit-clr-req: #A4262C; diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss index 17d73d3d44..4f32e45ded 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/Fluent/colors.fluent-light.scss @@ -14,6 +14,8 @@ --bit-clr-pri-light-hover: #8CC3EC; --bit-clr-pri-light-active: #76B6E8; --bit-clr-pri-text: #FFFFFF; + --bit-clr-pri-dis: #A3CFEF; + --bit-clr-pri-dis-text: #8BBDE5; //secondary --bit-clr-sec: #FF7D33; --bit-clr-sec-hover: #F27730; @@ -25,6 +27,8 @@ --bit-clr-sec-light-hover: #FFB185; --bit-clr-sec-light-active: #FFA470; --bit-clr-sec-text: #FFFFFF; + --bit-clr-sec-dis: #FFCFB3; + --bit-clr-sec-dis-text: #FFAD80; //tertiary --bit-clr-ter: #434343; --bit-clr-ter-hover: #3C3C3C; @@ -36,6 +40,8 @@ --bit-clr-ter-light-hover: #8E8E8E; --bit-clr-ter-light-active: #7B7B7B; --bit-clr-ter-text: #FFFFFF; + --bit-clr-ter-dis: #B8B8B8; + --bit-clr-ter-dis-text: #9E9E9E; //info --bit-clr-inf: #888F95; --bit-clr-inf-hover: #81888E; @@ -47,6 +53,8 @@ --bit-clr-inf-light-hover: #B8BCBF; --bit-clr-inf-light-active: #ACB1B5; --bit-clr-inf-text: #FFFFFF; + --bit-clr-inf-dis: #C3C7CA; + --bit-clr-inf-dis-text: #ACB1B5; //success --bit-clr-suc: #49A94C; --bit-clr-suc-hover: #45A148; @@ -58,6 +66,8 @@ --bit-clr-suc-light-hover: #92CB94; --bit-clr-suc-light-active: #80C382; --bit-clr-suc-text: #FFFFFF; + --bit-clr-suc-dis: #B5DDB7; + --bit-clr-suc-dis-text: #8CC98F; //warning --bit-clr-wrn: #F2B01F; --bit-clr-wrn-hover: #E6A71D; @@ -69,6 +79,8 @@ --bit-clr-wrn-light-hover: #F7D079; --bit-clr-wrn-light-active: #F6C862; --bit-clr-wrn-text: #FFFFFF; + --bit-clr-wrn-dis: #FBDFAA; + --bit-clr-wrn-dis-text: #F5C75E; //severe-warning --bit-clr-swr: #D47E30; --bit-clr-swr-hover: #C9782E; @@ -80,6 +92,8 @@ --bit-clr-swr-light-hover: #DD9859; --bit-clr-swr-light-active: #DA914F; --bit-clr-swr-text: #FFFFFF; + --bit-clr-swr-dis: #EABB8E; + --bit-clr-swr-dis-text: #D9A06A; //error --bit-clr-err: #DF3A2E; --bit-clr-err-hover: #D4372C; @@ -91,6 +105,8 @@ --bit-clr-err-light-hover: #E56158; --bit-clr-err-light-active: #E4584D; --bit-clr-err-text: #FFFFFF; + --bit-clr-err-dis: #F0ADA8; + --bit-clr-err-dis-text: #E8827A; //foreground --bit-clr-fg-pri: #1A1A1A; --bit-clr-fg-pri-hover: #111111; @@ -101,6 +117,8 @@ --bit-clr-fg-pri-light: #262626; --bit-clr-fg-pri-light-hover: #191919; --bit-clr-fg-pri-light-active: #111111; + --bit-clr-fg-pri-dis: #8A8A8A; + --bit-clr-fg-pri-dis-text: #BEBEBE; --bit-clr-fg-sec: #5A5A5A; --bit-clr-fg-sec-hover: #444444; --bit-clr-fg-sec-active: #333333; @@ -110,6 +128,8 @@ --bit-clr-fg-sec-light: #484848; --bit-clr-fg-sec-light-hover: #515151; --bit-clr-fg-sec-light-active: #414141; + --bit-clr-fg-sec-dis: #A3A3A3; + --bit-clr-fg-sec-dis-text: #C8C8C8; --bit-clr-fg-ter: #999999; --bit-clr-fg-ter-hover: #666666; --bit-clr-fg-ter-active: #4D4D4D; @@ -119,6 +139,8 @@ --bit-clr-fg-ter-light: #A7A7A7; --bit-clr-fg-ter-light-hover: #747474; --bit-clr-fg-ter-light-active: #5A5A5A; + --bit-clr-fg-ter-dis: #C8C8C8; + --bit-clr-fg-ter-dis-text: #DADADA; --bit-clr-fg-dis: #AAAAAA; //backgrounds --bit-clr-bg-pri: #FFFFFF; @@ -130,6 +152,8 @@ --bit-clr-bg-pri-light: #FFFFFF; --bit-clr-bg-pri-light-hover: #F2F2F2; --bit-clr-bg-pri-light-active: #EBEBEB; + --bit-clr-bg-pri-dis: #F7F7F7; + --bit-clr-bg-pri-dis-text: #CCCCCC; --bit-clr-bg-sec: #F5F5F5; --bit-clr-bg-sec-hover: #F2F1F0; --bit-clr-bg-sec-active: #E8E7E6; @@ -139,6 +163,8 @@ --bit-clr-bg-sec-light: #F5F5F5; --bit-clr-bg-sec-light-hover: #F2F1F0; --bit-clr-bg-sec-light-active: #E8E7E6; + --bit-clr-bg-sec-dis: #F9F9F9; + --bit-clr-bg-sec-dis-text: #CCCCCC; --bit-clr-bg-ter: #EDECEB; --bit-clr-bg-ter-hover: #E5E5E4; --bit-clr-bg-ter-active: #E0DFDF; @@ -148,6 +174,8 @@ --bit-clr-bg-ter-light: #F1F1F1; --bit-clr-bg-ter-light-hover: #EDEDED; --bit-clr-bg-ter-light-active: #E6E6E6; + --bit-clr-bg-ter-dis: #F5F5F4; + --bit-clr-bg-ter-dis-text: #CCCCCC; --bit-clr-bg-dis: #F3F2F1; --bit-clr-bg-overlay: rgba(0, 0, 0, 0.4); //borders @@ -160,6 +188,8 @@ --bit-clr-brd-pri-light: #898989; --bit-clr-brd-pri-light-hover: #6C6B6B; --bit-clr-brd-pri-light-active: #535353; + --bit-clr-brd-pri-dis: #BEBEBE; + --bit-clr-brd-pri-dis-text: #CCCCCC; --bit-clr-brd-sec: #B0AFAE; --bit-clr-brd-sec-hover: #7D7C7C; --bit-clr-brd-sec-active: #636362; @@ -169,6 +199,8 @@ --bit-clr-brd-sec-light: #BFBFBF; --bit-clr-brd-sec-light-hover: #8A8A8A; --bit-clr-brd-sec-light-active: #727272; + --bit-clr-brd-sec-dis: #D8D8D7; + --bit-clr-brd-sec-dis-text: #CCCCCC; --bit-clr-brd-ter: #DEDDDC; --bit-clr-brd-ter-hover: #CBCBCB; --bit-clr-brd-ter-active: #B0B0B0; @@ -178,6 +210,8 @@ --bit-clr-brd-ter-light: #E9E9E9; --bit-clr-brd-ter-light-hover: #D7D7D7; --bit-clr-brd-ter-light-active: #C1C1C1; + --bit-clr-brd-ter-dis: #EEEDEC; + --bit-clr-brd-ter-dis-text: #CCCCCC; --bit-clr-brd-dis: #E5E3DF; //req --bit-clr-req: #A4262C; diff --git a/src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss b/src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss index b1da141eab..ba58cf8bc8 100644 --- a/src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss +++ b/src/BlazorUI/Bit.BlazorUI/Styles/theme-variables.scss @@ -105,6 +105,8 @@ $clr-fg-pri-dark-active: var(--bit-clr-fg-pri-dark-active); $clr-fg-pri-light: var(--bit-clr-fg-pri-light); $clr-fg-pri-light-hover: var(--bit-clr-fg-pri-light-hover); $clr-fg-pri-light-active: var(--bit-clr-fg-pri-light-active); +$clr-fg-pri-dis: var(--bit-clr-fg-pri-dis); +$clr-fg-pri-dis-text: var(--bit-clr-fg-pri-dis-text); $clr-fg-sec: var(--bit-clr-fg-sec); $clr-fg-sec-hover: var(--bit-clr-fg-sec-hover); $clr-fg-sec-active: var(--bit-clr-fg-sec-active); @@ -114,6 +116,8 @@ $clr-fg-sec-dark-active: var(--bit-clr-fg-sec-dark-active); $clr-fg-sec-light: var(--bit-clr-fg-sec-light); $clr-fg-sec-light-hover: var(--bit-clr-fg-sec-light-hover); $clr-fg-sec-light-active: var(--bit-clr-fg-sec-light-active); +$clr-fg-sec-dis: var(--bit-clr-fg-sec-dis); +$clr-fg-sec-dis-text: var(--bit-clr-fg-sec-dis-text); $clr-fg-ter: var(--bit-clr-fg-ter); $clr-fg-ter-hover: var(--bit-clr-fg-ter-hover); $clr-fg-ter-active: var(--bit-clr-fg-ter-active); @@ -123,6 +127,8 @@ $clr-fg-ter-dark-active: var(--bit-clr-fg-ter-dark-active); $clr-fg-ter-light: var(--bit-clr-fg-ter-light); $clr-fg-ter-light-hover: var(--bit-clr-fg-ter-light-hover); $clr-fg-ter-light-active: var(--bit-clr-fg-ter-light-active); +$clr-fg-ter-dis: var(--bit-clr-fg-ter-dis); +$clr-fg-ter-dis-text: var(--bit-clr-fg-ter-dis-text); $clr-fg-dis: var(--bit-clr-fg-dis); //backgrounds @@ -135,6 +141,8 @@ $clr-bg-pri-dark-active: var(--bit-clr-bg-pri-dark-active); $clr-bg-pri-light: var(--bit-clr-bg-pri-light); $clr-bg-pri-light-hover: var(--bit-clr-bg-pri-light-hover); $clr-bg-pri-light-active: var(--bit-clr-bg-pri-light-active); +$clr-bg-pri-dis: var(--bit-clr-bg-pri-dis); +$clr-bg-pri-dis-text: var(--bit-clr-bg-pri-dis-text); $clr-bg-sec: var(--bit-clr-bg-sec); $clr-bg-sec-hover: var(--bit-clr-bg-sec-hover); $clr-bg-sec-active: var(--bit-clr-bg-sec-active); @@ -144,6 +152,8 @@ $clr-bg-sec-dark-active: var(--bit-clr-bg-sec-dark-active); $clr-bg-sec-light: var(--bit-clr-bg-sec-light); $clr-bg-sec-light-hover: var(--bit-clr-bg-sec-light-hover); $clr-bg-sec-light-active: var(--bit-clr-bg-sec-light-active); +$clr-bg-sec-dis: var(--bit-clr-bg-sec-dis); +$clr-bg-sec-dis-text: var(--bit-clr-bg-sec-dis-text); $clr-bg-ter: var(--bit-clr-bg-ter); $clr-bg-ter-hover: var(--bit-clr-bg-ter-hover); $clr-bg-ter-active: var(--bit-clr-bg-ter-active); @@ -153,6 +163,8 @@ $clr-bg-ter-dark-active: var(--bit-clr-bg-ter-dark-active); $clr-bg-ter-light: var(--bit-clr-bg-ter-light); $clr-bg-ter-light-hover: var(--bit-clr-bg-ter-light-hover); $clr-bg-ter-light-active: var(--bit-clr-bg-ter-light-active); +$clr-bg-ter-dis: var(--bit-clr-bg-ter-dis); +$clr-bg-ter-dis-text: var(--bit-clr-bg-ter-dis-text); $clr-bg-dis: var(--bit-clr-bg-dis); $clr-bg-overlay: var(--bit-clr-bg-overlay); @@ -166,6 +178,8 @@ $clr-brd-pri-dark-active: var(--bit-clr-brd-pri-dark-active); $clr-brd-pri-light: var(--bit-clr-brd-pri-light); $clr-brd-pri-light-hover: var(--bit-clr-brd-pri-light-hover); $clr-brd-pri-light-active: var(--bit-clr-brd-pri-light-active); +$clr-brd-pri-dis: var(--bit-clr-brd-pri-dis); +$clr-brd-pri-dis-text: var(--bit-clr-brd-pri-dis-text); $clr-brd-sec: var(--bit-clr-brd-sec); $clr-brd-sec-hover: var(--bit-clr-brd-sec-hover); $clr-brd-sec-active: var(--bit-clr-brd-sec-active); @@ -175,6 +189,8 @@ $clr-brd-sec-dark-active: var(--bit-clr-brd-sec-dark-active); $clr-brd-sec-light: var(--bit-clr-brd-sec-light); $clr-brd-sec-light-hover: var(--bit-clr-brd-sec-light-hover); $clr-brd-sec-light-active: var(--bit-clr-brd-sec-light-active); +$clr-brd-sec-dis: var(--bit-clr-brd-sec-dis); +$clr-brd-sec-dis-text: var(--bit-clr-brd-sec-dis-text); $clr-brd-ter: var(--bit-clr-brd-ter); $clr-brd-ter-hover: var(--bit-clr-brd-ter-hover); $clr-brd-ter-active: var(--bit-clr-brd-ter-active); @@ -184,11 +200,31 @@ $clr-brd-ter-dark-active: var(--bit-clr-brd-ter-dark-active); $clr-brd-ter-light: var(--bit-clr-brd-ter-light); $clr-brd-ter-light-hover: var(--bit-clr-brd-ter-light-hover); $clr-brd-ter-light-active: var(--bit-clr-brd-ter-light-active); +$clr-brd-ter-dis: var(--bit-clr-brd-ter-dis); +$clr-brd-ter-dis-text: var(--bit-clr-brd-ter-dis-text); $clr-brd-dis: var(--bit-clr-brd-dis); //required $clr-req: var(--bit-clr-req); +//disabled — per-role disabled colors +$clr-pri-dis: var(--bit-clr-pri-dis); +$clr-pri-dis-text: var(--bit-clr-pri-dis-text); +$clr-sec-dis: var(--bit-clr-sec-dis); +$clr-sec-dis-text: var(--bit-clr-sec-dis-text); +$clr-ter-dis: var(--bit-clr-ter-dis); +$clr-ter-dis-text: var(--bit-clr-ter-dis-text); +$clr-inf-dis: var(--bit-clr-inf-dis); +$clr-inf-dis-text: var(--bit-clr-inf-dis-text); +$clr-suc-dis: var(--bit-clr-suc-dis); +$clr-suc-dis-text: var(--bit-clr-suc-dis-text); +$clr-wrn-dis: var(--bit-clr-wrn-dis); +$clr-wrn-dis-text: var(--bit-clr-wrn-dis-text); +$clr-swr-dis: var(--bit-clr-swr-dis); +$clr-swr-dis-text: var(--bit-clr-swr-dis-text); +$clr-err-dis: var(--bit-clr-err-dis); +$clr-err-dis-text: var(--bit-clr-err-dis-text); + //focus (a11y) — per-role focus indicator color, plus shape/shadow tokens consumed by the focus-ring mixin. $clr-pri-focus: var(--bit-clr-pri-focus); $clr-sec-focus: var(--bit-clr-sec-focus); diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor index 99763e9673..d32514263f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor @@ -450,6 +450,39 @@ +

+
Disabled:
+
+
+ Primary + Secondary + Tertiary + Info + Success + Warning + SevereWarning + Error +
+

+
+
+ PrimaryBackground + SecondaryBackground + TertiaryBackground +
+
+
+
+ PrimaryForeground + SecondaryForeground + TertiaryForeground +
+
+
+ PrimaryBorder + SecondaryBorder + TertiaryBorder +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs index b1cce7a4fe..96ff875359 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ActionButton/BitActionButtonDemo.razor.samples.cs @@ -275,7 +275,29 @@ More info TertiaryBorder -"; + + + +Primary +Secondary +Tertiary +Info +Success +Warning +SevereWarning +Error + +PrimaryBackground +SecondaryBackground +TertiaryBackground + +PrimaryForeground +SecondaryForeground +TertiaryForeground + +PrimaryBorder +SecondaryBorder +TertiaryBorder"; private readonly string example12RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor index 686fc9883a..101d9252d7 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor @@ -588,6 +588,116 @@ TertiaryBorder +

+
Disabled:
+
+
+ Primary + Primary + Primary +
+
+
+ Secondary + Secondary + Secondary +
+
+
+ Tertiary + Tertiary + Tertiary +
+
+
+ Info + Info + Info +
+
+
+ Success + Success + Success +
+
+
+ Warning + Warning + Warning +
+
+
+ SevereWarning + SevereWarning + SevereWarning +
+
+
+ Error + Error + Error +
+

+
+
+ PrimaryBackground + PrimaryBackground + PrimaryBackground +
+
+
+ SecondaryBackground + SecondaryBackground + SecondaryBackground +
+
+
+ TertiaryBackground + TertiaryBackground + TertiaryBackground +
+
+
+
+
+ PrimaryForeground + PrimaryForeground + PrimaryForeground +
+
+
+ SecondaryForeground + SecondaryForeground + SecondaryForeground +
+
+
+ TertiaryForeground + TertiaryForeground + TertiaryForeground +
+
+
+
+
+ PrimaryBorder + PrimaryBorder + PrimaryBorder +
+
+
+ SecondaryBorder + SecondaryBorder + SecondaryBorder +
+
+
+ TertiaryBorder + TertiaryBorder + TertiaryBorder +
+
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs index 76f5a4718e..7c120bb5e1 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/Button/BitButtonDemo.razor.samples.cs @@ -523,7 +523,78 @@ private async Task LoadingTemplateClick() TertiaryBorder TertiaryBorder -TertiaryBorder"; +TertiaryBorder + + +Disabled: + +Primary +Primary +Primary + +Secondary +Secondary +Secondary + +Tertiary +Tertiary +Tertiary + +Info +Info +Info + +Success +Success +Success + +Warning +Warning +Warning + +SevereWarning +SevereWarning +SevereWarning + +Error +Error +Error + +PrimaryBackground +PrimaryBackground +PrimaryBackground + +SecondaryBackground +SecondaryBackground +SecondaryBackground + +TertiaryBackground +TertiaryBackground +TertiaryBackground + +PrimaryForeground +PrimaryForeground +PrimaryForeground + +SecondaryForeground +SecondaryForeground +SecondaryForeground + +TertiaryForeground +TertiaryForeground +TertiaryForeground + +PrimaryBorder +PrimaryBorder +PrimaryBorder + +SecondaryBorder +SecondaryBorder +SecondaryBorder + +TertiaryBorder +TertiaryBorder +TertiaryBorder"; private readonly string example18RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss index daf5d6992e..1581699430 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/BitButtonGroupDemo.razor.scss @@ -3,6 +3,11 @@ gap: 0.5rem; display: flex; flex-flow: column; + + &.row { + flex-flow: row; + flex-wrap: wrap; + } } .custom-class { @@ -32,4 +37,4 @@ border-color: aliceblue; background-color: crimson; } -} +} \ No newline at end of file diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor index 7a2a029365..a04dd9f48f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor @@ -358,6 +358,129 @@ +

+
Disabled:
+
+
+
Primary
+ + + +
+

+
+
Secondary
+ + + +
+

+
+
Tertiary
+ + + +
+

+
+
Info
+ + + +
+

+
+
Success
+ + + +
+

+
+
Warning
+ + + +
+

+
+
SevereWarning
+ + + +
+

+
+
Error
+ + + +
+

+
+
+
PrimaryBackground
+ + + +
+

+
+
SecondaryBackground
+ + + +
+

+
+
TertiaryBackground
+ + + +
+
+

+
+
PrimaryForeground
+ + + +
+

+
+
SecondaryForeground
+ + + +
+

+
+
TertiaryForeground
+ + + +
+

+
+
PrimaryBorder
+ + + +
+

+
+
SecondaryBorder
+ + + +
+

+
+
TertiaryBorder
+ + + +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs index f2ca479e18..b4efe3ffe3 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupCustomDemo.razor.samples.cs @@ -375,7 +375,81 @@ public class Operation -"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example11CsharpCode = @" private BitButtonGroupNameSelectors nameSelector = new() { Text = { Selector = i => i.Name } }; diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor index 1a1c463421..f18068e9b6 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor @@ -206,126 +206,249 @@
Offering a range of specialized colors, providing visual cues for specific states within your application.


-
-
Primary
+
Primary
+


-
-
Secondary
+
Secondary
+


-
-
Tertiary
+
Tertiary
+


-
-
Info
+
Info
+


-
-
Success
+
Success
+


-
-
Warning
+
Warning
+


-
-
SevereWarning
+
SevereWarning
+


-
-
Error
+
Error
+


-
-
PrimaryBackground
+
PrimaryBackground
+


-
-
SecondaryBackground
+
SecondaryBackground
+


-
-
TertiaryBackground
+
TertiaryBackground
+


-
-
PrimaryForeground
+
PrimaryForeground
+


-
-
SecondaryForeground
+
SecondaryForeground
+


-
-
TertiaryForeground
+
TertiaryForeground
+


-
-
PrimaryBorder
+
PrimaryBorder
+


-
-
SecondaryBorder
+
SecondaryBorder
+


-
-
TertiaryBorder
+
TertiaryBorder
+
+



+
Disabled:
+
+
Primary
+
+ + + +
+

+
Secondary
+
+ + + +
+

+
Tertiary
+
+ + + +
+

+
Info
+
+ + + +
+

+
Success
+
+ + + +
+

+
Warning
+
+ + + +
+

+
SevereWarning
+
+ + + +
+

+
Error
+
+ + + +
+

+
+
PrimaryBackground
+
+ + + +
+

+
SecondaryBackground
+
+ + + +
+

+
TertiaryBackground
+
+ + + +
+
+

+
PrimaryForeground
+
+ + + +
+

+
SecondaryForeground
+
+ + + +
+

+
TertiaryForeground
+
+ + + +
+

+
PrimaryBorder
+
+ + + +
+

+
SecondaryBorder
+
+ + + +
+

+
TertiaryBorder
+
+ + + +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs index 2710b82603..e144a08b51 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupItemDemo.razor.samples.cs @@ -240,7 +240,81 @@ protected override void OnInitialized() -"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example11CsharpCode = @" private List basicItems = [ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor index 52ce3ef8e1..8bb7ce4bfb 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor @@ -557,6 +557,231 @@
+

+
Disabled:
+
+
+
Primary
+ + + + + + + + + +
+

+
+
Secondary
+ + + + + + + + + +
+

+
+
Tertiary
+ + + + + + + + + +
+

+
+
Info
+ + + + + + + + + +
+

+
+
Success
+ + + + + + + + + +
+

+
+
Warning
+ + + + + + + + + +
+

+
+
SevereWarning
+ + + + + + + + + +
+

+
+
Error
+ + + + + + + + + +
+

+
+
+
PrimaryBackground
+ + + + + + + + + +
+

+
+
SecondaryBackground
+ + + + + + + + + +
+

+
+
TertiaryBackground
+ + + + + + + + + +
+
+

+
+
PrimaryForeground
+ + + + + + + + + +
+

+
+
SecondaryForeground
+ + + + + + + + + +
+

+
+
TertiaryForeground
+ + + + + + + + + +
+

+
+
PrimaryBorder
+ + + + + + + + + +
+

+
+
SecondaryBorder
+ + + + + + + + + +
+

+
+
TertiaryBorder
+ + + + + + + + + +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs index f031af76c5..c28039649f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ButtonGroup/_BitButtonGroupOptionDemo.razor.samples.cs @@ -400,6 +400,182 @@ public partial class _BitButtonGroupOptionDemo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + "; private readonly string example12RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor index d6b843a0a2..178349d0e1 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor @@ -248,6 +248,214 @@
+

+
Disabled:
+
+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs index 62f08f2ef3..7f57e999c3 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonCustomDemo.razor.samples.cs @@ -245,7 +245,162 @@ public class Operation -"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example4CsharpCode = @" public class Operation { diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor index 342c1fb086..7f755a1b74 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor @@ -248,6 +248,214 @@
+

+
Disabled:
+
+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
+

+
+ + + +
+
+
+ + + +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs index 3b12ba5081..9081fc1f23 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonItemDemo.razor.samples.cs @@ -1,4 +1,4 @@ -namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.MenuButton; +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.MenuButton; public partial class _BitMenuButtonItemDemo { @@ -197,7 +197,160 @@ public partial class _BitMenuButtonItemDemo -"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example4CsharpCode = @" private List basicItems = [ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor index ec51515222..902be91a34 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor @@ -780,6 +780,622 @@
+

+
Disabled:
+
+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
+

+
+ + + + + + + + + + + + + + + +
+
+
+ + + + + + + + + + + + + + + +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs index 3fcfeafb16..ed4b7aa632 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/MenuButton/_BitMenuButtonOptionDemo.razor.cs @@ -1,4 +1,4 @@ -namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.MenuButton; +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Buttons.MenuButton; public partial class _BitMenuButtonOptionDemo { @@ -691,6 +691,569 @@ public partial class _BitMenuButtonOptionDemo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + "; private readonly string example5RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor index e937028327..cea903c782 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor @@ -272,6 +272,112 @@ TertiaryBorder TertiaryBorder
+

+
Disabled:
+
+
+ Primary + Primary + Primary +
+
+
+ Secondary + Secondary + Secondary +
+
+
+ Tertiary + Tertiary + Tertiary +
+
+
+ Info + Info + Info +
+
+
+ Success + Success + Success +
+
+
+ Warning + Warning + Warning +
+
+
+ SevereWarning + SevereWarning + SevereWarning +
+
+
+ Error + Error + Error +
+

+
+
+ PrimaryBackground + PrimaryBackground + PrimaryBackground +
+
+
+ SecondaryBackground + SecondaryBackground + SecondaryBackground +
+
+
+ TertiaryBackground + TertiaryBackground + TertiaryBackground +
+
+
+
+ PrimaryForeground + PrimaryForeground + PrimaryForeground +
+
+
+ SecondaryForeground + SecondaryForeground + SecondaryForeground +
+
+
+ TertiaryForeground + TertiaryForeground + TertiaryForeground +
+
+
+ PrimaryBorder + PrimaryBorder + PrimaryBorder +
+
+
+ SecondaryBorder + SecondaryBorder + SecondaryBorder +
+
+
+ TertiaryBorder + TertiaryBorder + TertiaryBorder +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cs index 4928c4548a..8f30b8fcaf 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Buttons/ToggleButton/BitToggleButtonDemo.razor.samples.cs @@ -182,7 +182,76 @@ Click me (@clickCounter) TertiaryBorder TertiaryBorder -TertiaryBorder"; +TertiaryBorder + + +Primary +Primary +Primary + +Secondary +Secondary +Secondary + +Tertiary +Tertiary +Tertiary + +Info +Info +Info + +Success +Success +Success + +Warning +Warning +Warning + +SevereWarning +SevereWarning +SevereWarning + +Error +Error +Error + +PrimaryBackground +PrimaryBackground +PrimaryBackground + +SecondaryBackground +SecondaryBackground +SecondaryBackground + +TertiaryBackground +TertiaryBackground +TertiaryBackground + +PrimaryForeground +PrimaryForeground +PrimaryForeground + +SecondaryForeground +SecondaryForeground +SecondaryForeground + +TertiaryForeground +TertiaryForeground +TertiaryForeground + +PrimaryBorder +PrimaryBorder +PrimaryBorder + +SecondaryBorder +SecondaryBorder +SecondaryBorder + +TertiaryBorder +TertiaryBorder +TertiaryBorder"; private readonly string example10RazorCode = @"
+

+
Disabled:
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+

+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
+
+
+
+ + + +
+
+
+ + + +
+
+
+ + + +
+
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cs index 7bcb7efa0a..844f4e124f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Checkbox/BitCheckboxDemo.razor.samples.cs @@ -181,7 +181,76 @@ private async Task HandleValidSubmit() { } -"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example11RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor index 4e545126b5..bae96b4331 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor @@ -483,8 +483,182 @@
+

+
Disabled:
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
Use icons from external libraries like FontAwesome or Bootstrap Icons with the Icon parameter and NameSelectors.
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs index f7a5e2e121..e5c8184d54 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupCustomDemo.razor.samples.cs @@ -1,4 +1,4 @@ -namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.ChoiceGroup; +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.ChoiceGroup; public partial class _BitChoiceGroupCustomDemo { @@ -767,6 +767,141 @@ public class Order Horizontal Items=""basicCustoms"" DefaultValue=""basicCustoms[1].ItemValue"" + NameSelectors=""@(new() { Text = { Name = nameof(Order.Name) }, Value = { Name = nameof(Order.ItemValue) } })"" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example11CsharpCode = @" public class Order diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor index 61259174a1..e39b934b90 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor @@ -362,8 +362,165 @@
+

+
Disabled:
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
Use icons from external libraries like FontAwesome or Bootstrap Icons with the Icon parameter.
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs index fd446cc780..ccac9dd592 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupItemDemo.razor.samples.cs @@ -1,4 +1,4 @@ -namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.ChoiceGroup; +namespace Bit.BlazorUI.Demo.Client.Core.Pages.Components.Inputs.ChoiceGroup; public partial class _BitChoiceGroupItemDemo { @@ -556,7 +556,125 @@ Horizontal Inline /> Label=""TertiaryBorder"" Horizontal Items=""basicItems"" - DefaultValue=""basicItems[1].Value"" />"; + DefaultValue=""basicItems[1].Value"" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example11CsharpCode = @" private readonly List> basicItems = [ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor index d02cadf1c4..a891b06f0f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor @@ -567,8 +567,166 @@
+

+
Disabled:
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
+
+ + + + + + +
+
Use icons from external libraries like FontAwesome or Bootstrap Icons with the Icon parameter.
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs index a4ae96f13c..782a0f36cc 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/ChoiceGroup/_BitChoiceGroupOptionDemo.razor.samples.cs @@ -523,6 +523,125 @@ private void HandleValidSubmit() { } + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + + + +"" TValue=""string"" Horizontal> + + + + "; private readonly string example12RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor index bb9f7189dd..d5e4fb409f 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor @@ -316,6 +316,78 @@
+

+
Disabled:
+
+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+
+ +
+ +

+ +
+ +

+ +
+ +
+

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ +

+ +
+ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs index 29b17d7f8a..be68a06be5 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/SearchBox/BitSearchBoxDemo.razor.samples.cs @@ -238,8 +238,110 @@ public class ValidationSearchBoxModel private ValidationSearchBoxModel validationBoxModel = new();"; private readonly string example12RazorCode = @" - -"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + + + + + + +
+ + + + + + + + + + + + + + + + + +"; private readonly string example13RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor index 992d13b4ce..26ac7a0127 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor @@ -127,6 +127,64 @@
+

+
Disabled:
+
+
Primary

+ +
+ +
+ +


+
Secondary

+ +
+ +
+ +


+
Tertiary

+ +
+ +
+ +


+
Info

+ +
+ +
+ +


+
Success

+ +
+ +
+ +


+
Warning

+ +
+ +
+ +


+
SevereWarning

+ +
+ +
+ +


+
Error

+ +
+ +
+ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs index 976f3436c5..c1ecf0c51c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineCustomDemo.razor.samples.cs @@ -272,7 +272,42 @@ public class Event -"; + + + +Disabled: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example8CsharpCode = @" public class Event { diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor index d6b6cb75eb..560adfb32c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor @@ -127,6 +127,64 @@
+

+
Disabled:
+
+
Primary

+ +
+ +
+ +


+
Secondary

+ +
+ +
+ +


+
Tertiary

+ +
+ +
+ +


+
Info

+ +
+ +
+ +


+
Success

+ +
+ +
+ +


+
Warning

+ +
+ +
+ +


+
SevereWarning

+ +
+ +
+ +


+
Error

+ +
+ +
+ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs index ef12776e10..fb42740b15 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineItemDemo.razor.samples.cs @@ -175,7 +175,42 @@ public partial class _BitTimelineItemDemo -"; + + + +Disabled: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example8CsharpCode = @" private List iconItems = [ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor index 1904596ffb..10fdebd06a 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor @@ -393,6 +393,160 @@ +

+
Disabled:
+
+
Primary

+ + + + + +
+ + + + + +
+ + + + + +


+
Secondary

+ + + + + +
+ + + + + +
+ + + + + +


+
Tertiary

+ + + + + +
+ + + + + +
+ + + + + +


+
Info

+ + + + + +
+ + + + + +
+ + + + + +


+
Success

+ + + + + +
+ + + + + +
+ + + + + +


+
Warning

+ + + + + +
+ + + + + +
+ + + + + +


+
SevereWarning

+ + + + + +
+ + + + + +
+ + + + + +


+
Error

+ + + + + +
+ + + + + +
+ + + + + diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs index ed8cb21826..d87e3f80bb 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Lists/Timeline/_BitTimelineOptionDemo.razor.cs @@ -371,6 +371,160 @@ public partial class _BitTimelineOptionDemo + + + +Disabled: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + "; private readonly string example9RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor index a6f9e728eb..2768511ba2 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor @@ -119,6 +119,64 @@

+



+
Disabled:
+

+
Primary

+ +

+ +

+ +



+
Secondary

+ +

+ +

+ +



+
Tertiary

+ +

+ +

+ +



+
Info

+ +

+ +

+ +



+
Success

+ +

+ +

+ +



+
Warning

+ +

+ +

+ +



+
SevereWarning

+ +

+ +

+ +



+
Error

+ +

+ +

+ diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs index 16dbd583c4..420127d047 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pagination/BitPaginationDemo.razor.samples.cs @@ -56,7 +56,42 @@ public partial class BitPaginationDemo -"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example9RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor index a762abb8bf..e823ac82a5 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor @@ -535,77 +535,160 @@ +
Offering a range of specialized colors, providing visual cues for specific states within your application.
+
Using the Color parameter and its value of type BitColor enum:
+
+ +
Primary:
+
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +
+

+ +
Secondary:
+
- -

Pivot #1: Primary

-
- Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. - Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment - when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, - for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way. -
- - -

Pivot #2: Secondary

-
- Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. - These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. - Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and - inspirations will be built. Soon, these lines will transform into narratives that provoke thought, - spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty - in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities - are boundless. This space is yours to craft, yours to shape, yours to bring to life. -
- - -

Pivot #3: Info

-
- In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits - to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite - possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the - vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be - shaped into meaning, and the emotions ready to resonate with every reader. -
- +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +
+

+ +
Tertiary:
+
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +
+

+ +
Info:
+
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +
+

+ +
Success:
+
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +
+

+ +
Warning:
+
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +
+

+ +
SevereWarning:
+
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +
+

+ +
Error:
+
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +
+


+ +
Tab header type with role colors:
+
+
+ +
Pivot #1: Primary
 +
Pivot #2: Secondary
 +
Pivot #3: Tertiary

- -

Pivot #1: Primary background

-
- Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. - Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment - when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, - for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way. -
- - -

Pivot #2: Secondary background

-
- Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. - These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. - Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and - inspirations will be built. Soon, these lines will transform into narratives that provoke thought, - spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty - in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities - are boundless. This space is yours to craft, yours to shape, yours to bring to life. -
- - -

Pivot #3: Tertiary foreground

-
- In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits - to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite - possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the - vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be - shaped into meaning, and the emotions ready to resonate with every reader. -
- +
Pivot #1: Info
 +
Pivot #2: Success
 +
Pivot #3: Warning
+
+
+ +
Pivot #1: SevereWarning
 +
Pivot #2: Error
 +
Pivot #3: Info
 + +
+ + + +
Disabled pivot:
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +


+ +
Disabled pivot item:
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +


+ +
Disabled tab:
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + +


+ +
Disabled tab item:
+
+ +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs index 647b8dafe3..795904ea9c 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Navs/Pivot/BitPivotDemo.razor.cs @@ -1107,72 +1107,71 @@ These placeholder words symbolize the beginning—a moment of possibility where "; private readonly string example11RazorCode = @" + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + - -

Pivot #1: Primary

-
- Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. - Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment - when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, - for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way. -
- - -

Pivot #2: Secondary

-
- Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. - These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. - Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and - inspirations will be built. Soon, these lines will transform into narratives that provoke thought, - spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty - in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities - are boundless. This space is yours to craft, yours to shape, yours to bring to life. -
- - -

Pivot #3: Info

-
- In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits - to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite - possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the - vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be - shaped into meaning, and the emotions ready to resonate with every reader. -
- +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + + + +
Pivot #1: Primary
 +
Pivot #2: Secondary
 +
Pivot #3: Tertiary
 - -

Pivot #1: Primary background

-
- Once upon a time, stories wove connections between people, a symphony of voices crafting shared dreams. - Each word carried meaning, each pause brought understanding. Placeholder text reminds us of that moment - when possibilities are limitless, waiting for content to emerge. The spaces here are open for growth, - for ideas that change minds and spark emotions. This is where the journey begins—your words will lead the way. -
- - -

Pivot #2: Secondary background

-
- Every story starts with a blank canvas, a quiet space waiting to be filled with ideas, emotions, and dreams. - These placeholder words symbolize the beginning—a moment of possibility where creativity has yet to take shape. - Imagine this text as the scaffolding of something remarkable, a foundation upon which connections and - inspirations will be built. Soon, these lines will transform into narratives that provoke thought, - spark emotion, and resonate with those who encounter them. Until then, they remind us of the beauty - in potential—the quiet magic of beginnings, where everything is still to come, and the possibilities - are boundless. This space is yours to craft, yours to shape, yours to bring to life. -
- - -

Pivot #3: Tertiary foreground

-
- In the beginning, there is silence—a blank canvas yearning to be filled, a quiet space where creativity waits - to awaken. These words are temporary, standing in place of ideas yet to come, a glimpse into the infinite - possibilities that lie ahead. Think of this text as a bridge, connecting the empty spaces of now with the - vibrant narratives of tomorrow. It whispers of the stories waiting to be told, of the thoughts yet to be - shaped into meaning, and the emotions ready to resonate with every reader. -
- +
Pivot #1: Info
 +
Pivot #2: Success
 +
Pivot #3: Warning
 + + + +
Pivot #1: SevereWarning
 +
Pivot #2: Error
 +
Pivot #3: Info
 "; private readonly string example12RazorCode = @" @@ -1460,4 +1459,29 @@ راهکارها و شرایط سخت تایپ به پایان رسد وزمان اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد. "; + + private readonly string example15RazorCode = @" + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 + + + +
Pivot #1: File
 +
Pivot #2: Shared
 +
Pivot #3: Recent
 +"; } diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor index 3cd4c188b0..789b626ddd 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor @@ -215,6 +215,112 @@ +

+
Disabled:
+
+
Primary

+
+ + + + + + + + + +
+

+
Secondary

+
+ + + + + + + + + +
+

+
Tertiary

+
+ + + + + + + + + +
+

+
Info

+
+ + + + + + + + + +
+

+
Success

+
+ + + + + + + + + +
+

+
Warning

+
+ + + + + + + + + +
+

+
SevereWarning

+
+ + + + + + + + + +
+

+
Error

+
+ + + + + + + + + +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cs index 29eb30b6ef..75c3dfb103 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Badge/BitBadgeDemo.razor.cs @@ -573,6 +573,87 @@ public partial class BitBadgeDemo + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + "; private readonly string example10RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor index 6f25ae28df..c58558bd34 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor @@ -116,6 +116,31 @@     +


+
Disabled:
+
+   +   +   +   +   +   +   + +

+
+   +   + +
+
+   +   + +

+   +   + diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs index 22c0cd8d12..344372fa05 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs @@ -409,7 +409,30 @@ public partial class BitTagDemo     -"; + + +Disabled: + + + + + + + + + + + + + + + + + + + + +"; private readonly string example6RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor index f834edbba0..55c2e204ce 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor @@ -129,6 +129,98 @@   + +



+ +
+
PrimaryBackground
+
+ +   + +   + + +



+ +
SecondaryBackground
+
+ +   + +   + + +



+ +
TertiaryBackground
+
+ +   + +   + +
+ +



+ +
PrimaryForeground
+
+ +   + +   + + +



+ +
SecondaryForeground
+
+ +   + +   + + +



+ +
TertiaryForeground
+
+ +   + +   + + +



+ +
PrimaryBorder
+
+ +   + +   + + +



+ +
SecondaryBorder
+
+ +   + +   + + +



+ +
TertiaryBorder
+
+ +   + +   + diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs index fa28a82786..dee1b6e030 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Icon/BitIconDemo.razor.cs @@ -302,7 +302,43 @@ public partial class BitIconDemo -"; + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +"; private readonly string example4RazorCode = @" diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor index 1907d68fe1..973e4ca24b 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor @@ -146,6 +146,48 @@

TertiaryBorder Color Link +

+
Disabled:
+
+ Primary (default) +

+ Secondary +

+ Tertiary +

+ Info +

+ Success +

+ Warning +

+ SevereWarning +

+ Error +

+
+ PrimaryBackground +

+ SecondaryBackground +

+ TertiaryBackground +
+
+
+ PrimaryForeground +

+ SecondaryForeground +

+ TertiaryForeground +
+
+
+ PrimaryBorder +

+ SecondaryBorder +

+ TertiaryBorder +
diff --git a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cs b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cs index e444d10cf9..d734826593 100644 --- a/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cs +++ b/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Utilities/Link/BitLinkDemo.razor.samples.cs @@ -106,7 +106,29 @@ and your voice a reflection of who you are and what you wish to share with the w PrimaryBorder Color Link SecondaryBorder Color Link -TertiaryBorder Color Link"; +TertiaryBorder Color Link + + +Primary (default) +Secondary +Tertiary +Info +Success +Warning +SevereWarning +Error + +PrimaryBackground +SecondaryBackground +TertiaryBackground + +PrimaryForeground +SecondaryForeground +TertiaryForeground + +PrimaryBorder +SecondaryBorder +TertiaryBorder"; private readonly string example10RazorCode = @" breakout defense-in-depth + case '\\': // CSS escape sequences + case '\0': + case '\n': + case '\r': + case '\f': // null / newlines / form feed + return true; + } + } + + // Comment markers could swallow trailing declarations in the inline-style concatenation + // (e.g. "red/*" eating the following ";--next:..." up to a later "*/"). + return value.Contains("/*", StringComparison.Ordinal) + || value.Contains("*/", StringComparison.Ordinal); + } + internal static BitTheme Merge(BitTheme bitTheme, BitTheme other) { var result = new BitTheme(); diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cs index 6a5a8e4ca1..d1cd846ef5 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cs +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeProvider.cs @@ -11,6 +11,12 @@ public sealed class BitThemeProvider : ComponentBase /// The element used for the root node. Ignored when no wrapping element is needed /// (i.e. when both and are ). /// + /// + /// When a wrapping element is rendered it defaults to display:contents so it produces no + /// layout box and stays transparent to the surrounding flex/grid layout, while still letting the + /// applied CSS custom properties inherit to descendants. Supply style="display:…" via the + /// splatted attributes to opt back into a real box (e.g. when you also set box-model styles on it). + /// [Parameter] public string? RootElement { get; set; } /// @@ -26,9 +32,12 @@ public sealed class BitThemeProvider : ComponentBase /// /// Catch-all for HTML attributes splatted onto the wrapping element (e.g. class, id, - /// data-*, ARIA roles). Only emitted when this provider renders a wrapping element — - /// when both and are the - /// provider renders just and these attributes are ignored. + /// data-*, ARIA roles). Only emitted when this provider renders a wrapping element — that + /// is, when a local is applied (its CSS variables need a host element), or + /// when a cascading is re-exposed under a custom . + /// When there is nothing to apply at this layer (no local and no + /// ) the provider renders just and these + /// attributes are ignored. /// [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary? AdditionalAttributes { get; set; } @@ -62,18 +71,27 @@ protected override void OnParametersSet() if (Theme is null) { - // Local theme not set but a ParentTheme is cascading from above. Re-cascade the - // parent so consumers below us still see it (the previous implementation broke - // the cascade when Theme was null and rendered ChildContent without the wrapper). - // No inline style to emit at this layer; the ancestor provider owns those CSS vars. + // Local theme not set, but a ParentTheme is cascading from above. Keep it as the value + // we would re-expose, and emit no inline style at this layer (the ancestor provider owns + // those CSS vars). BuildRenderTree only renders a wrapper + CascadingValue when a custom + // ThemeName needs the value re-exposed under that name; otherwise it renders ChildContent + // directly and relies on the ancestor's existing unnamed cascade, avoiding a redundant + // wrapper element and duplicate CascadingValue. _cachedMergedTheme = ParentTheme; _cachedCssVarStyle = null; return; } - var mergedTheme = ParentTheme is null - ? Theme - : BitThemeMapper.Merge(Theme, ParentTheme); + // Always produce a FRESH merged BitTheme (BitThemeMapper.Merge allocates a new instance), + // even when there is no ParentTheme. This keeps the CascadingValue change-detection + // behavior consistent: previously the no-parent path cascaded the caller's own Theme instance, + // so an in-place mutation of that instance produced the same reference and CascadingValue + // (which compares reference types with ReferenceEquals) never notified [CascadingParameter] + // consumers — whereas the with-parent path always allocated a new reference and did notify. + // Going through Merge in both cases means a token change yields a new reference (consumers are + // notified), while the CSS-string equality suppression below preserves the cached reference + // when nothing actually changed (consumers are not woken up needlessly). + var mergedTheme = BitThemeMapper.Merge(Theme, ParentTheme ?? new BitTheme()); var cssVarStyle = BuildCssVarStyle(mergedTheme); @@ -98,6 +116,17 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) return; } + if (_cachedCssVarStyle is null && ThemeName is null) + { + // Nothing to apply at this layer: no CSS variables to emit (Theme is null — only a + // ParentTheme is cascading from above) and no custom ThemeName to re-expose the value + // under. The ancestor's unnamed CascadingValue already reaches our + // descendants, so rendering ChildContent directly preserves the cascade while avoiding + // a redundant wrapper element and a duplicate CascadingValue. + builder.AddContent(0, ChildContent); + return; + } + builder.OpenElement(1, RootElement ?? "div"); // Splat user attributes individually so we can pull out any "style" entry and merge it @@ -119,21 +148,25 @@ protected override void BuildRenderTree(RenderTreeBuilder builder) } } - // Compose the inline style. CSS-variable declarations come first so the user-supplied - // style wins on conflicting properties (typical "splat overrides component defaults"). - // When Theme is null but ParentTheme is non-null we have no CSS vars to emit, but a user - // style still needs to make it onto the element. - var style = _cachedCssVarStyle is null - ? userStyle - : userStyle is null - ? _cachedCssVarStyle - : $"{_cachedCssVarStyle};{userStyle}"; - - if (style is not null) + // Compose the inline style. The wrapper defaults to `display:contents` so it produces no + // layout box of its own: the element must exist for CSS custom properties to inherit to + // descendants (inheritance follows the DOM tree, not the box tree), but it should not + // perturb the surrounding flex/grid layout or child selectors the way a default `div` + // block box would. The CSS-variable declarations come next, and the user-supplied style + // comes last so a caller can override both the layout mode (e.g. `style="display:flex"`) + // and any individual token on conflict. + var style = "display:contents"; + if (_cachedCssVarStyle is not null) + { + style = $"{style};{_cachedCssVarStyle}"; + } + if (userStyle is not null) { - builder.AddAttribute(3, "style", style); + style = $"{style};{userStyle}"; } + builder.AddAttribute(3, "style", style); + builder.OpenComponent>(4); if (ThemeName is not null) { diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cs index c0a6aa854a..dad2f3d695 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cs +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSerialization.cs @@ -61,17 +61,26 @@ private static void PruneEmptyObjectNodes(JsonNode? node) /// /// Replaces branch objects on a deserialized so the - /// graph matches a freshly-constructed new BitTheme(). Sparse JSON (the format produced - /// by ) omits empty nested objects, and - /// then leaves those branches null on the result; callers that walk the graph (the mapper, - /// merge, derivation helpers) rely on every branch being non-null. + /// graph matches a freshly-constructed new BitTheme(). Callers that walk the graph (the + /// mapper, merge, derivation helpers) rely on every branch being non-null. /// /// + /// + /// This is a safety net for externally-authored JSON. The sparse format produced by + /// never emits a branch as explicit null (null leaves are omitted + /// and empty objects are pruned), and leaves absent + /// properties at their constructor-initialized new() values — so a framework round-trip + /// already yields a fully-populated graph. The case this guards is hand-written or third-party + /// JSON that contains an explicit "color": null (or similar), which the serializer would + /// otherwise honor by setting the branch to . + /// + /// /// Previously this method walked the type via reflection. Reflection breaks under trimming / /// AOT (IL2070/IL2075/IL3050) unless the entire graph is preserved by /// [DynamicallyAccessedMembers], which is hard to keep correct as the model evolves. /// Walking the graph explicitly is verbose but trim-safe and removes the reflection /// suppression pragmas that previously hid genuine warnings. + /// /// private static void EnsureNestedObjects(BitTheme theme) { @@ -112,11 +121,11 @@ private static void EnsureNestedObjects(BitTheme theme) typography.Subtitle2 ??= new BitThemeTypographyVariants(); typography.Body1 ??= new BitThemeTypographyVariants(); typography.Body2 ??= new BitThemeTypographyVariants(); - typography.Button ??= new BitThemeTypographyVariants(); + typography.Button ??= new BitThemeLabelTypographyVariants(); typography.Caption1 ??= new BitThemeTypographyVariants(); typography.Caption2 ??= new BitThemeTypographyVariants(); - typography.Overline ??= new BitThemeTypographyVariants(); - typography.Inherit ??= new BitThemeTypographyVariants(); + typography.Overline ??= new BitThemeLabelTypographyVariants(); + typography.Inherit ??= new BitThemeInheritTypographyVariants(); // Layout branch. theme.Layout.Breakpoints ??= new BitThemeBreakpoints(); diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cs index 71c02f3ae4..f60f4e3140 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cs +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeSsr.cs @@ -41,6 +41,95 @@ public static string BuildInlineHeadScript(string? nonce) return $""; } + /// + /// Builds the bit-theme* attribute string to render on the root <html> + /// element from a persisted preference (typically read from the + /// cookie) so server-rendered markup paints + /// the correct theme before the client script runs. + /// + /// + /// The stored abstract theme key (for example dark, fluent-light, or + /// system). Usually the cookie value; may be /blank when no + /// preference has been stored yet. + /// + /// + /// Optional theme to use when is missing, or as the + /// no-JS base when the OS is being followed. + /// + /// + /// An attribute fragment such as bit-theme="dark" or + /// bit-theme-system bit-theme-default="light", ready to interpolate into the root + /// <html> tag. + /// + /// + /// + /// A concrete preference is emitted as bit-theme="…" so first paint is correct with no + /// flash. The special system value (and a missing preference with no default) emit the + /// bit-theme-system marker and defer the light/dark resolution to the client inline + /// script — the server cannot read prefers-color-scheme. A missing preference with a + /// concrete paints that default directly. + /// + /// + /// Values are normalized (trim + lower-case, matching ) and validated + /// against a strict [a-z0-9-] theme-name pattern; anything else is ignored and treated as + /// missing, so a tampered cookie cannot inject markup into the document. + /// + /// + /// This is the server half of cookie-based persistence: the app is responsible for writing the + /// cookie (client- or server-side) under . + /// + /// + public static string BuildRootThemeAttributes(string? persistedPreference, string? defaultTheme = null) + { + var preference = NormalizeThemeToken(persistedPreference); + var fallback = NormalizeThemeToken(defaultTheme); + + // Explicit "system" → follow the OS; the inline head script resolves light/dark before + // paint. Carry a concrete default through for no-JS clients. + if (preference == BitThemePresets.System) + { + return fallback is null || fallback == BitThemePresets.System + ? BitThemeAttributeNames.ThemeSystem + : $"{BitThemeAttributeNames.ThemeSystem} {BitThemeAttributeNames.ThemeDefault}=\"{fallback}\""; + } + + // Concrete persisted preference → paint it directly (no flash). + if (preference is not null) + { + return $"{BitThemeAttributeNames.Theme}=\"{preference}\""; + } + + // No stored preference: use the configured default theme, or follow the OS if none. + if (fallback is not null && fallback != BitThemePresets.System) + { + return $"{BitThemeAttributeNames.Theme}=\"{fallback}\""; + } + + return BitThemeAttributeNames.ThemeSystem; + } + + /// + /// Normalizes a theme key (trim + lower-case invariant) and validates it as a safe + /// [a-z0-9-] token. Returns for blank or invalid input so callers + /// treat it as "no preference" — this also prevents a tampered cookie value from being emitted + /// into the document. + /// + private static string? NormalizeThemeToken(string? value) + { + if (string.IsNullOrWhiteSpace(value)) return null; + + var token = value.Trim().ToLowerInvariant(); + if (token.Length > 64) return null; + + foreach (var ch in token) + { + var allowed = (ch >= 'a' && ch <= 'z') || (ch >= '0' && ch <= '9') || ch == '-'; + if (allowed is false) return null; + } + + return token; + } + private static string BuildInlineScriptBody() { // Centralizing names through BitThemeAttributeNames means the inline script picks up renames @@ -50,21 +139,27 @@ private static string BuildInlineScriptBody() var themeDefault = BitThemeAttributeNames.ThemeDefault; var themeSystem = BitThemeAttributeNames.ThemeSystem; var themePersist = BitThemeAttributeNames.ThemePersist; + var themePersistCookie = BitThemeAttributeNames.ThemePersistCookie; var themeDark = BitThemeAttributeNames.ThemeDark; var themeLight = BitThemeAttributeNames.ThemeLight; var storageKey = BitThemeAttributeNames.ThemeStorageKey; + var cookieName = BitThemeCookie.PreferenceCookieName; // The inline script is intentionally compact; it runs on every first paint before stylesheets. - // Logic mirrors Theme.init in bit-theme.ts. + // Logic mirrors Theme.init in bit-theme.ts, including the localStorage→cookie persistence + // fallback so a cookie-only (SSR) persistence setup paints correctly with no flash. return "(function(){var r=document.documentElement," + $"k='{storageKey}'," + + $"ck='{cookieName}'," + $"lt=r.getAttribute('{themeLight}')||'light'," + $"dk=r.getAttribute('{themeDark}')||'dark'," + "m=window.matchMedia&&matchMedia('(prefers-color-scheme:dark)').matches," + $"base=r.getAttribute('{theme}')||r.getAttribute('{themeDefault}')||'light';" + $"if(r.hasAttribute('{themeSystem}')){{base=m?dk:lt;}}" + - $"var cur=base;if(r.hasAttribute('{themePersist}')){{try{{cur=localStorage.getItem(k)||base;}}catch(e){{}}}}" + + "var cur=base,got=false;" + + $"if(r.hasAttribute('{themePersist}')){{try{{var s=localStorage.getItem(k);if(s){{cur=s;got=true;}}}}catch(e){{}}}}" + + $"if(!got&&r.hasAttribute('{themePersistCookie}')){{var cm=('; '+document.cookie).match('; '+ck+'=([^;]*)');if(cm){{try{{cur=decodeURIComponent(cm[1]);}}catch(e){{cur=cm[1];}}}}}}" + "if(cur==='system'){cur=m?dk:lt;}" + $"r.setAttribute('{theme}',cur);}})();"; } diff --git a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cs b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cs index 16b79bd32c..4c4e9cf7b5 100644 --- a/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cs +++ b/src/BlazorUI/Bit.BlazorUI/Utils/Theme/BitThemeUtilities.cs @@ -15,6 +15,15 @@ public static class BitThemeUtilities /// this cost is dwarfed by the JS-interop /// boundary. If you have a hot, allocation-sensitive path, hold the result yourself and pass /// the same reference until you intentionally rebuild it. + /// + /// Token values that contain characters capable of escaping a single CSS declaration (for + /// example ;, {, }, <, >, or comment markers) are + /// dropped rather than emitted. Theme values can originate from untrusted sources (see + /// ), and the output is concatenated into an inline + /// style attribute by ; dropping injection-prone values + /// prevents a malicious token from adding extra CSS. A dropped token falls back to the + /// stylesheet default. + /// /// public static IReadOnlyDictionary ToCssVariables(BitTheme? bitTheme) { diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cs index 04ce9ab8a6..7a18cba65d 100644 --- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cs +++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeColorDerivationTests.cs @@ -32,23 +32,39 @@ public void FillColorRoleFromMainEmptyHexDoesNotThrow() } [TestMethod] - public void FillColorRoleFromMainInvalidHexDoesNotThrow() + public void FillColorRoleFromMainInvalidHexIsNoOp() { var v = new BitThemeColorVariants(); BitThemeColorDerivation.FillColorRoleFromMain(v, "not-a-color"); - // BitInternalColor silently falls back to white when the format is unrecognised - // (its own catch resets R/G/B to 255 without rethrowing), so FillColorRoleFromMain's - // outer catch never fires and all variants are populated with white-derived values. - Assert.IsNotNull(v.Main, "Main"); - Assert.IsNotNull(v.Dark, "Dark"); - Assert.IsNotNull(v.Light, "Light"); - Assert.IsNotNull(v.Text, "Text"); - Assert.IsNotNull(v.MainHover, "MainHover"); - Assert.IsNotNull(v.MainActive, "MainActive"); - Assert.IsNotNull(v.DarkHover, "DarkHover"); - Assert.IsNotNull(v.DarkActive, "DarkActive"); - Assert.IsNotNull(v.LightHover, "LightHover"); - Assert.IsNotNull(v.LightActive, "LightActive"); + + // An unrecognized hex is now treated as "nothing to derive from" (a no-op), consistent + // with the null/empty guards and with BitThemeColorContrast's validation. The previous + // behavior fabricated an all-white palette, which masked the mistake and overrode + // stylesheet defaults; the variants must stay untouched instead. + Assert.IsNull(v.Main, "Main"); + Assert.IsNull(v.Dark, "Dark"); + Assert.IsNull(v.Light, "Light"); + Assert.IsNull(v.Text, "Text"); + Assert.IsNull(v.MainHover, "MainHover"); + Assert.IsNull(v.MainActive, "MainActive"); + Assert.IsNull(v.DarkHover, "DarkHover"); + Assert.IsNull(v.DarkActive, "DarkActive"); + Assert.IsNull(v.LightHover, "LightHover"); + Assert.IsNull(v.LightActive, "LightActive"); + } + + [TestMethod] + public void FillColorRoleFromMainShorthandHexExpandsLikeSixDigit() + { + // '#FFF' must be expanded to '#FFFFFF' (matching BitThemeColorContrast), not misparsed by + // the underlying 24-bit parser. The derived Main should equal the six-digit equivalent. + var shorthand = new BitThemeColorVariants(); + var full = new BitThemeColorVariants(); + BitThemeColorDerivation.FillColorRoleFromMain(shorthand, "#FFF"); + BitThemeColorDerivation.FillColorRoleFromMain(full, "#FFFFFF"); + + Assert.IsNotNull(shorthand.Main); + Assert.AreEqual(full.Main, shorthand.Main); } // ── All slots populated ──────────────────────────────────────────────────── diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeManagerTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeManagerTests.cs new file mode 100644 index 0000000000..b00ac39790 --- /dev/null +++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeManagerTests.cs @@ -0,0 +1,59 @@ +using System.Threading.Tasks; +using Bunit; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.JSInterop; +using Microsoft.VisualStudio.TestTools.UnitTesting; + +namespace Bit.BlazorUI.Tests.Utils.Theme; + +[TestClass] +public sealed class BitThemeManagerTests : BunitTestContext +{ + [TestMethod] + public async Task SetThemeAsyncNormalizesNameToCanonicalLowercaseForm() + { + var manager = new BitThemeManager(Services.GetRequiredService()); + + await manager.SetThemeAsync(" Fluent-Light "); + + // The raw string API must normalize the same way BitThemeName does, so the value written + // onto bit-theme matches the lowercase :root[bit-theme=...] selectors in the packaged CSS. + var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.Theme.set"); + Assert.AreEqual("fluent-light", invocation.Arguments[0]); + } + + [TestMethod] + public async Task SetThemeAsyncWithBitThemeNameWritesNormalizedValue() + { + var manager = new BitThemeManager(Services.GetRequiredService()); + + await manager.SetThemeAsync(BitThemeName.Custom("Brand-DARK")); + + var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.Theme.set"); + Assert.AreEqual("brand-dark", invocation.Arguments[0]); + } + + [TestMethod] + public async Task SetThemeAsyncBlankNameIsForwardedAsEmptyNoOp() + { + var manager = new BitThemeManager(Services.GetRequiredService()); + + await manager.SetThemeAsync(" "); + + // Whitespace-only collapses to empty string, which the client script treats as a no-op + // (keeps the current theme) rather than writing a literal whitespace attribute value. + var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.Theme.set"); + Assert.AreEqual(string.Empty, invocation.Arguments[0]); + } + + [TestMethod] + public async Task SetThemeAsyncLeavesAlreadyCanonicalNameUnchanged() + { + var manager = new BitThemeManager(Services.GetRequiredService()); + + await manager.SetThemeAsync(BitThemePresets.FluentDark); + + var invocation = Context.JSInterop.VerifyInvoke("BitBlazorUI.Theme.set"); + Assert.AreEqual("fluent-dark", invocation.Arguments[0]); + } +} diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperContractTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperContractTests.cs index 866a39b006..d8bbe0f0c4 100644 --- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperContractTests.cs +++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperContractTests.cs @@ -92,6 +92,54 @@ public void MergeChildOverridesParentForSingleProperty() Assert.AreEqual("#333333", merged.Color.Primary.MainHover); } + [DataTestMethod] + [DataRow("red; background:url(https://evil.example/x)", DisplayName = "semicolon injects a declaration")] + [DataRow("red/* comment-out trailing */", DisplayName = "comment marker")] + [DataRow("red} body{display:none", DisplayName = "block delimiters")] + [DataRow("red visited) { if (obj is null) return; diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cs index 3b79d530b8..c4f1562d1c 100644 --- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cs +++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeMapperMergeDriftTests.cs @@ -16,11 +16,11 @@ namespace Bit.BlazorUI.Tests.Utils.Theme; /// /// /// We pin the contract via the mapper's emitted CSS-variable surface rather than the underlying -/// property graph. The model exposes a few properties the mapper deliberately doesn't emit -/// (e.g. Typography.H1.FontFamily — typography font-family is a single root-level token); -/// asserting on every model property would fail on those by design. Asserting on emitted vars -/// gives us the contract that actually matters: every CSS variable that survives serialization -/// of one theme must also survive serialization of the merge of that theme over an empty one. +/// property graph. Asserting on emitted vars gives us the contract that actually matters: every +/// CSS variable that survives serialization of one theme must also survive serialization of the +/// merge of that theme over an empty one. (The model is now shaped so that every leaf property +/// maps to a CSS variable — per-variant typography tokens that aren't wired to CSS, such as a +/// per-heading font-family, are no longer exposed; see .) /// /// /// If this test fails, find the entry in BitThemeMapper.MapToCssVariables that emits the diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cs new file mode 100644 index 0000000000..7e364fa2fb --- /dev/null +++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeModelCoverageTests.cs @@ -0,0 +1,169 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Reflection; +using Microsoft.VisualStudio.TestTools.UnitTesting; + +namespace Bit.BlazorUI.Tests.Utils.Theme; + +/// +/// Coverage contracts for the hand-mirrored model plumbing: +/// BitThemeMapper.MapToCssVariables, BitThemeMapper.Merge, and +/// BitThemeSerialization.EnsureNestedObjects. +/// +/// +/// +/// These three methods are written out by hand, one line per token / branch. Without a guard, +/// adding a property to the model and forgetting to extend one of them fails silently: a token +/// that isn't mapped never reaches CSS, a branch that isn't re-inflated throws a +/// the first time a sparse deserialized theme is walked, and a +/// merge gap drops the value during cascading composition. +/// +/// +/// Runtime reflection is intentionally NOT used in the production mapper (it breaks under +/// trimming / AOT — see BitThemeSerialization.EnsureNestedObjects), but the test assembly +/// has no such constraint, so we use reflection here to pin the contract at build/test time. +/// +/// +/// Companion: pins that every emitted variable +/// survives Merge. Combined with +/// (every leaf token is emitted), the two together guarantee every model token survives a merge. +/// +/// +[TestClass] +public sealed class BitThemeModelCoverageTests +{ + [TestMethod] + public void EveryLeafStringTokenIsEmittedByTheMapper() + { + // Set every settable string property in the graph to a unique non-empty sentinel, then + // assert the mapper emits exactly one CSS variable per token. A shortfall means either a + // token was added to the model without a matching addCssVar(...) in + // BitThemeMapper.MapToCssVariables, or two tokens were mapped to the same CSS variable + // name (a copy/paste bug — which additionally surfaces as a duplicate-key throw below). + var theme = new BitTheme(); + var leafCount = FillStringLeavesWithSentinels(theme); + + var emitted = BitThemeUtilities.ToCssVariables(theme); + + Assert.AreEqual(leafCount, emitted.Count, + $"The BitTheme model exposes {leafCount} settable string tokens but " + + $"BitThemeMapper.MapToCssVariables emitted {emitted.Count} CSS variables. Every token must map " + + "to exactly one unique CSS variable. If you added a token, add the matching addCssVar(...) entry " + + "(and the null-coalesce in BitThemeMapper.Merge). A shortfall also occurs when two tokens map to " + + "the same CSS variable name."); + } + + [TestMethod] + public void DeserializeEmptyJsonReInflatesEveryBranch() + { + // "{}" has no nested objects at all; EnsureNestedObjects must rebuild the whole graph so + // downstream walkers (mapper, merge, derivation) never hit a null branch. + var theme = BitThemeSerialization.Deserialize("{}"); + + AssertNoNullBranches(theme, "Deserialize(\"{}\")"); + } + + [TestMethod] + public void DeserializeSparseRoundTripReInflatesEveryBranch() + { + // Serialize prunes empty nested objects, so a theme with a single token round-trips through + // JSON with most branches absent. EnsureNestedObjects must restore them all. + var sparse = new BitTheme(); + sparse.Color.Primary.Main = "#123456"; + sparse.Typography.Inherit.FontFamily = "Inter"; + + var json = BitThemeSerialization.Serialize(sparse); + var theme = BitThemeSerialization.Deserialize(json); + + AssertNoNullBranches(theme, "round-tripped sparse theme"); + Assert.AreEqual("#123456", theme.Color.Primary.Main); + Assert.AreEqual("Inter", theme.Typography.Inherit.FontFamily); + } + + [TestMethod] + public void FreshThemeHasNoNullBranches() + { + // Sanity check that the model's property initializers themselves leave no null branch; + // this is the shape EnsureNestedObjects is expected to reproduce. + AssertNoNullBranches(new BitTheme(), "new BitTheme()"); + } + + /// + /// Walks the graph and sets every readable/writable property to a unique + /// non-empty sentinel (so the mapper's whitespace guard never skips it), returning the count. + /// + private static int FillStringLeavesWithSentinels(object root) + { + var visited = new HashSet(ReferenceEqualityComparer.Instance); + var counter = 0; + Walk(root, visited, ref counter); + return counter; + + static void Walk(object obj, HashSet visited, ref int counter) + { + if (!visited.Add(obj)) return; + + foreach (var prop in GetModelProperties(obj.GetType())) + { + var pt = prop.PropertyType; + + if (pt == typeof(string)) + { + prop.SetValue(obj, $"sentinel-{counter++}"); + } + else if (IsModelBranch(pt)) + { + var child = prop.GetValue(obj); + if (child is null) + { + child = Activator.CreateInstance(pt); + if (child is null) continue; + prop.SetValue(obj, child); + } + Walk(child, visited, ref counter); + } + } + } + } + + private static void AssertNoNullBranches(object root, string scenario) + { + var visited = new HashSet(ReferenceEqualityComparer.Instance); + var nullBranches = new List(); + Walk(root, root.GetType().Name, visited, nullBranches); + + Assert.AreEqual(0, nullBranches.Count, + $"Null branches found after {scenario}; extend BitThemeSerialization.EnsureNestedObjects to " + + $"initialize them:\n {string.Join("\n ", nullBranches)}"); + + static void Walk(object obj, string path, HashSet visited, List nullBranches) + { + if (!visited.Add(obj)) return; + + foreach (var prop in GetModelProperties(obj.GetType())) + { + if (!IsModelBranch(prop.PropertyType)) continue; + + var child = prop.GetValue(obj); + var childPath = $"{path}.{prop.Name}"; + if (child is null) + { + nullBranches.Add(childPath); + continue; + } + Walk(child, childPath, visited, nullBranches); + } + } + } + + private static IEnumerable GetModelProperties(Type type) + => type.GetProperties(BindingFlags.Public | BindingFlags.Instance) + .Where(p => p.CanRead && p.CanWrite && p.GetIndexParameters().Length == 0); + + /// A nested model object: a non-string reference type declared in the Bit.BlazorUI namespace. + private static bool IsModelBranch(Type type) + => type != typeof(string) + && !type.IsValueType + && string.Equals(type.Namespace, "Bit.BlazorUI", StringComparison.Ordinal); +} diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cs index a6adb24f33..aacab3e734 100644 --- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cs +++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeProviderTests.cs @@ -62,6 +62,51 @@ public void SplatsAdditionalAttributesOntoRootElement() Assert.IsTrue((root.GetAttribute("style") ?? string.Empty).Contains("--bit-clr-pri", StringComparison.Ordinal)); } + [TestMethod] + public void WrapperIsLayoutNeutralByDefault() + { + var theme = new BitTheme(); + theme.Color.Primary.Main = "#ABCDEF"; + + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Theme, theme); + parameters.Add(p => p.RootElement, "section"); + parameters.AddChildContent(); + }); + + var style = component.Find("section").GetAttribute("style") ?? string.Empty; + + // The wrapper must not introduce a layout box of its own; display:contents keeps it + // transparent to the surrounding layout while the CSS vars still cascade to descendants. + StringAssert.StartsWith(style, "display:contents", StringComparison.Ordinal); + Assert.IsTrue(style.Contains("--bit-clr-pri:#ABCDEF", StringComparison.Ordinal), + $"CSS vars must still be emitted after the layout-neutral display. Actual: {style}"); + } + + [TestMethod] + public void UserSuppliedDisplayOverridesLayoutNeutralDefault() + { + var theme = new BitTheme(); + theme.Color.Primary.Main = "#ABCDEF"; + + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Theme, theme); + parameters.Add(p => p.RootElement, "section"); + parameters.AddUnmatched("style", "display:flex;gap:8px"); + parameters.AddChildContent(); + }); + + var style = component.Find("section").GetAttribute("style") ?? string.Empty; + + // The user's style is appended last, so on the conflicting `display` property it wins + // (last declaration in an inline style block takes effect). + StringAssert.StartsWith(style, "display:contents", StringComparison.Ordinal); + StringAssert.EndsWith(style, "display:flex;gap:8px", StringComparison.Ordinal); + Assert.IsTrue(style.Contains("--bit-clr-pri:#ABCDEF", StringComparison.Ordinal)); + } + [TestMethod] public void ReCascadesParentThemeWhenLocalThemeIsNull() { @@ -83,6 +128,79 @@ public void ReCascadesParentThemeWhenLocalThemeIsNull() Assert.AreEqual(ParentPrimary, probe.GetAttribute("data-primary")); } + [TestMethod] + public void InnerProviderWithoutThemeOrThemeNameAddsNoWrapperElement() + { + const string ParentPrimary = "#AABBCC"; + + var parent = new BitTheme(); + parent.Color.Primary.Main = ParentPrimary; + + var component = RenderComponent(parameters => + { + parameters.Add(p => p.OuterTheme, parent); + parameters.Add(p => p.InnerTheme, null); + }); + + // The outer provider applies a Theme so it renders exactly one wrapper element. The inner + // provider (Theme null, no ThemeName) must NOT add a second wrapper — it relies on the + // ancestor's existing unnamed cascade — while the probe still resolves the parent theme. + Assert.AreEqual(1, component.FindAll("div").Count); + Assert.AreEqual(ParentPrimary, component.Find("span").GetAttribute("data-primary")); + } + + [TestMethod] + public void UpdatesCascadeWhenThemeReferenceChanges() + { + var first = new BitTheme(); + first.Color.Primary.Main = "#111111"; + + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Theme, first); + parameters.AddChildContent(); + }); + + Assert.AreEqual("#111111", component.Find("span").GetAttribute("data-primary")); + + // Assigning a new BitTheme reference recomputes the cascade and propagates the new value + // to consumers (CascadingValue change detection is reference-based). + var second = new BitTheme(); + second.Color.Primary.Main = "#222222"; + component.SetParametersAndRender(parameters => parameters.Add(p => p.Theme, second)); + + Assert.AreEqual("#222222", component.Find("span").GetAttribute("data-primary")); + } + + [TestMethod] + public void InPlaceThemeMutationUpdatesInlineCssVariablesOnReRender() + { + var theme = new BitTheme(); + theme.Color.Primary.Main = "#111111"; + + var component = RenderComponent(parameters => + { + parameters.Add(p => p.Theme, theme); + parameters.Add(p => p.RootElement, "section"); + parameters.AddChildContent(); + }); + + StringAssert.Contains(component.Find("section").GetAttribute("style"), "--bit-clr-pri:#111111"); + + // Mutating the held BitTheme instance in place is reflected in the emitted CSS variables on + // the next render: the provider rebuilds its inline style from the current token values + // every parameters update (it does not rely on the Theme reference changing). + theme.Color.Primary.Main = "#222222"; + component.SetParametersAndRender(parameters => + { + parameters.Add(p => p.Theme, theme); + parameters.Add(p => p.RootElement, "section"); + parameters.AddChildContent(); + }); + + StringAssert.Contains(component.Find("section").GetAttribute("style"), "--bit-clr-pri:#222222"); + } + [TestMethod] public void InnerThemeMergesOverParentTheme() { diff --git a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cs b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cs index d97e996693..3b52328a0f 100644 --- a/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cs +++ b/src/BlazorUI/Tests/Bit.BlazorUI.Tests/Utils/Theme/BitThemeSsrTests.cs @@ -63,4 +63,86 @@ public void BuildInlineHeadScriptHtmlEncodesNonce() Assert.IsTrue(script.Contains("nonce=\"abc"<&>\"", StringComparison.Ordinal), $"Encoded nonce attribute missing in: {script}"); } + + [TestMethod] + public void InlineHeadScriptBodyEncodesSharedThemeResolutionPrecedence() + { + // The first-paint precedence encoded here MUST stay in lockstep with Theme.init in + // BitTheme.ts. The order is: a `bit-theme-system` opt-in resolves the OS theme and wins + // over an explicit bit-theme / bit-theme-default base; a persisted preference then wins + // over that; finally a literal "system" value (explicit or persisted) resolves to the OS + // light/dark theme. If you change any of this, change BitTheme.ts init() to match. + var body = BitThemeSsr.InlineHeadScriptBody; + + var systemOverridesBase = body.IndexOf( + $"if(r.hasAttribute('{BitThemeAttributeNames.ThemeSystem}')){{base=m?dk:lt;}}", + StringComparison.Ordinal); + Assert.IsTrue(systemOverridesBase >= 0, + "Inline script must resolve the OS theme when bit-theme-system is present, overriding the explicit base."); + + var persistedReadsStorage = body.IndexOf( + $"if(r.hasAttribute('{BitThemeAttributeNames.ThemePersist}'))", + StringComparison.Ordinal); + Assert.IsTrue(persistedReadsStorage >= 0, + "Inline script must read the persisted preference when bit-theme-persist is present."); + + // A persisted preference is applied AFTER the system override, so it wins (highest precedence). + Assert.IsTrue(persistedReadsStorage > systemOverridesBase, + "Persisted preference must be resolved after (and therefore win over) the bit-theme-system override."); + + // A literal "system" value (explicit attribute or persisted) is resolved to OS light/dark last. + var systemValueResolvesLast = body.IndexOf("if(cur==='system'){cur=m?dk:lt;}", StringComparison.Ordinal); + Assert.IsTrue(systemValueResolvesLast > persistedReadsStorage, + "A literal 'system' value must be resolved to the OS theme after the persisted preference is read."); + } + + [TestMethod] + public void BuildRootThemeAttributesEmitsConcretePreferenceDirectly() + { + Assert.AreEqual("bit-theme=\"dark\"", BitThemeSsr.BuildRootThemeAttributes("dark")); + Assert.AreEqual("bit-theme=\"fluent-light\"", BitThemeSsr.BuildRootThemeAttributes("fluent-light")); + } + + [TestMethod] + public void BuildRootThemeAttributesNormalizesPreference() + { + Assert.AreEqual("bit-theme=\"fluent-dark\"", BitThemeSsr.BuildRootThemeAttributes(" Fluent-DARK ")); + } + + [TestMethod] + public void BuildRootThemeAttributesSystemFollowsOsAndCarriesDefault() + { + Assert.AreEqual("bit-theme-system", BitThemeSsr.BuildRootThemeAttributes("system")); + Assert.AreEqual("bit-theme-system bit-theme-default=\"light\"", + BitThemeSsr.BuildRootThemeAttributes("system", defaultTheme: "light")); + } + + [TestMethod] + public void BuildRootThemeAttributesMissingPreferenceUsesDefaultThenSystem() + { + Assert.AreEqual("bit-theme=\"light\"", BitThemeSsr.BuildRootThemeAttributes(null, defaultTheme: "light")); + Assert.AreEqual("bit-theme-system", BitThemeSsr.BuildRootThemeAttributes(null)); + Assert.AreEqual("bit-theme-system", BitThemeSsr.BuildRootThemeAttributes(" ")); + } + + [DataTestMethod] + [DataRow("\">", DisplayName = "html injection")] + [DataRow("dark; color:red", DisplayName = "css/space characters")] + [DataRow("light\"onload=", DisplayName = "attribute breakout")] + public void BuildRootThemeAttributesIgnoresTamperedPreference(string tampered) + { + // A tampered cookie value must never reach the document. Invalid tokens are treated as + // "no preference", so the result falls back to the safe system marker (no default here). + var attributes = BitThemeSsr.BuildRootThemeAttributes(tampered); + + Assert.AreEqual("bit-theme-system", attributes); + } + + [TestMethod] + public void BuildRootThemeAttributesIgnoresTamperedDefaultButKeepsValidPreference() + { + // An invalid default is ignored; a valid concrete preference is still emitted safely. + Assert.AreEqual("bit-theme=\"dark\"", + BitThemeSsr.BuildRootThemeAttributes("dark", defaultTheme: "\">")); + } }