Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(components): add theme provider component (#8)
* feat(components): add theme provider * feat(theme): add colors config * feat(theme): add the color scale type that represents a color with various shades * feat(theme): add the base colors model * feat(theme): add the theme colors model * feat(theme): add semantic colors * chore(utils): add color utils * chore(theme): add XML documentation * chore(theme): nits * feat(theme): add theme and layout configs * chore(theme): add divider opacity to layout config * feat(components): generate basic light and dark themes via theme provider * chore(theme): populate color variants * chore(components): uncomment `bg-divider` class for the divider component * chore(theme): nits * refactor(theme): make default color lighter in light theme * refactor(utils): remove null or whitespace string check in the `GetReadableColor` * chore(theme): add `Default` static method for the layout config * refactor(theme): make info color in light theme one shade darker * refactor(theme): add additional constructor and method to allow set the color key as default in the color scale * feat(theme): add light and dark theme colors models * feat(theme): add light and dark theme configs * chore(theme): rename `LumexThemeConfig` to `LumexTheme` * refactor(components): add culture invariance when generating a numeric value CSS vars in the theme provider * test(components): add tests for the theme provider * test(theme): add tests for the theme related types * chore(theme): nits * refactor(theme): change access modifier of the `ReverseColorValues` * refactor(theme): correct the default color of the Default color scale * feat(theme): add the new constructor for the theme with a specified default theme * fix(theme): transform semantic Light and Dark theme colors into the properties * feat(theme): add typography configuration * test(theme): add the default theme value test * test(theme): add missing tests to satisfy codecov * chore(utils): exclude color utils from code coverage
- Loading branch information
1 parent
dc36184
commit 36c3827
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| // Copyright (c) LumexUI 2024 | ||
| // LumexUI licenses this file to you under the MIT license | ||
| // See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE | ||
|
|
||
| using System.ComponentModel; | ||
|
|
||
| namespace LumexUI.Common; | ||
|
|
||
| public enum ThemeType | ||
| { | ||
| [Description( "light" )] | ||
| Light, | ||
|
|
||
| [Description( "dark" )] | ||
| Dark | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| @namespace LumexUI | ||
| @inherits ComponentBase | ||
|
|
||
| <style> | ||
| @((MarkupString)GenerateTheme(Theme.Light)) | ||
|
Check warning on line 5 in src/LumexUI/Components/Providers/LumexThemeProvider.razor
|
||
| </style> | ||
|
|
||
| <style> | ||
| @((MarkupString)GenerateTheme(Theme.Dark)) | ||
|
Check warning on line 9 in src/LumexUI/Components/Providers/LumexThemeProvider.razor
|
||
| </style> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| // Copyright (c) LumexUI 2024 | ||
| // LumexUI licenses this file to you under the MIT license | ||
| // See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE | ||
|
|
||
| using System.Globalization; | ||
| using System.Text; | ||
|
|
||
| using LumexUI.Theme; | ||
| using LumexUI.Utilities; | ||
|
|
||
| using Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace LumexUI; | ||
|
|
||
| public partial class LumexThemeProvider : ComponentBase | ||
| { | ||
| private const string Prefix = "lumex"; | ||
|
|
||
| /// <summary> | ||
| /// Gets or sets the configuration of the theme. | ||
| /// </summary> | ||
| [Parameter] public LumexTheme Theme { get; set; } | ||
|
|
||
| public LumexThemeProvider() | ||
| { | ||
| Theme = new(); | ||
| } | ||
|
|
||
| private string? GenerateTheme( ThemeConfig theme ) | ||
| { | ||
| var cssSelector = $"[data-theme={theme.Type.ToDescription()}]"; | ||
|
|
||
| if( theme.Type == Theme.DefaultTheme ) | ||
| { | ||
| cssSelector = $":root, {cssSelector}"; | ||
| } | ||
|
|
||
| var sb = new StringBuilder(); | ||
| sb.AppendLine( $"{cssSelector} {{" ); | ||
|
|
||
| // Colors | ||
| var themeColors = GetThemeColorsDict( theme.Colors ); | ||
|
|
||
| foreach( var color in themeColors ) | ||
| { | ||
| foreach( var scale in color.Value ) | ||
| { | ||
| var scaleKey = scale.Key == "default" ? "" : $"-{scale.Key}"; | ||
| var scaleValue = ColorUtils.HexToHsl( scale.Value ); | ||
|
|
||
| sb.AppendLine( $"--{Prefix}-{color.Key}{scaleKey}: {scaleValue};" ); | ||
| } | ||
| } | ||
|
|
||
| // Layout | ||
| sb.AppendLine( $"--{Prefix}-font-sans: {theme.Layout.FontFamily?.Sans};" ); | ||
| sb.AppendLine( $"--{Prefix}-font-mono: {theme.Layout.FontFamily?.Mono};" ); | ||
| sb.AppendLine( $"--{Prefix}-font-size-xs: {theme.Layout.FontSize.Xs};" ); | ||
| sb.AppendLine( $"--{Prefix}-font-size-sm: {theme.Layout.FontSize.Sm};" ); | ||
| sb.AppendLine( $"--{Prefix}-font-size-md: {theme.Layout.FontSize.Md};" ); | ||
| sb.AppendLine( $"--{Prefix}-font-size-lg: {theme.Layout.FontSize.Lg};" ); | ||
| sb.AppendLine( $"--{Prefix}-line-height-xs: {theme.Layout.LineHeight.Xs};" ); | ||
| sb.AppendLine( $"--{Prefix}-line-height-sm: {theme.Layout.LineHeight.Sm};" ); | ||
| sb.AppendLine( $"--{Prefix}-line-height-md: {theme.Layout.LineHeight.Md};" ); | ||
| sb.AppendLine( $"--{Prefix}-line-height-lg: {theme.Layout.LineHeight.Lg};" ); | ||
| sb.AppendLine( CultureInfo.InvariantCulture, $"--{Prefix}-divider-opacity: {theme.Layout.DividerOpacity};" ); | ||
| sb.AppendLine( CultureInfo.InvariantCulture, $"--{Prefix}-disabled-opacity: {theme.Layout.DisabledOpacity};" ); | ||
| sb.AppendLine( CultureInfo.InvariantCulture, $"--{Prefix}-focus-opacity: {theme.Layout.FocusOpacity};" ); | ||
| sb.AppendLine( CultureInfo.InvariantCulture, $"--{Prefix}-hover-opacity: {theme.Layout.HoverOpacity};" ); | ||
|
|
||
| sb.AppendLine( "}" ); | ||
| return sb.ToString(); | ||
| } | ||
|
|
||
| private static Dictionary<string, ColorScale> GetThemeColorsDict( ThemeColors colors ) | ||
| { | ||
| return new() | ||
| { | ||
| ["background"] = colors.Background, | ||
| ["foreground"] = colors.Foreground, | ||
| ["overlay"] = colors.Overlay, | ||
| ["focus"] = colors.Focus, | ||
| ["divider"] = colors.Divider, | ||
| ["default"] = colors.Default, | ||
| ["primary"] = colors.Primary, | ||
| ["secondary"] = colors.Secondary, | ||
| ["success"] = colors.Success, | ||
| ["warning"] = colors.Warning, | ||
| ["danger"] = colors.Danger, | ||
| ["info"] = colors.Info, | ||
| }; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.