Skip to content

Commit edc436b

Browse files
desmondinhodesmondinho
authored
refactor(theme): replace C# theme config with a new CSS-first approach (#229)
* feat(theme): add light and dark theme CSS files * refactor(components): cleanup theme provider * refactor(theme): remove Theme directory * test(theme): remove Theme directory * docs(theme): remove theme config * fix(alert): correct RenderFragment parameters usage * chore(theme): correct theme variables * docs(customization): replace Customization section with Theming * test(theme-provider): remove all tests
1 parent ec9ed48 commit edc436b

File tree

76 files changed

+1125
-2851
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

76 files changed

+1125
-2851
lines changed

‎docs/LumexUI.Docs.Client/Common/Navigation/NavigationStore.cs‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,10 @@ public class NavigationStore
1313
.Add( new( "Overview" ) )
1414
.Add( new( "Installation" ) );
1515

16-
private static NavigationCategory CustomizationCategory =>
17-
new NavigationCategory( "Customization", Icons.Rounded.DesignServices )
18-
.Add( new( "Theme" ) )
19-
.Add( new( "Layout" ) )
20-
.Add( new( "Colors" ) )
21-
.Add( new( "Customize Theme" ) );
16+
private static NavigationCategory ThemingCategory =>
17+
new NavigationCategory( "Theming", Icons.Rounded.DesignServices )
18+
.Add( new( "Design Tokens" ) )
19+
.Add( new( "Customization" ) );
2220

2321
private static NavigationCategory ComponentsCategory =>
2422
new NavigationCategory( "Components", Icons.Rounded.Joystick )
@@ -104,7 +102,7 @@ public static Navigation GetNavigation()
104102
{
105103
_navigation ??= new Navigation()
106104
.Add( GettingStartedCategory )
107-
.Add( CustomizationCategory )
105+
.Add( ThemingCategory )
108106
.Add( ComponentsCategory )
109107
.Add( ComponentsApiCategory );
110108

‎docs/LumexUI.Docs.Client/Components/CodeSnippet.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@namespace LumexUI.Docs.Client.Components
22
@rendermode InteractiveWebAssembly
33

4-
<div class="relative mt-5 mb-8 first:mt-0 last:mb-0 rounded-2xl overflow-hidden" @ref="@_ref">
4+
<div class="relative my-6 first:mt-0 last:mb-0 rounded-large overflow-hidden" @ref="@_ref">
55
<div class="prose prose-zinc bg-zinc-800">
66
@if( !string.IsNullOrEmpty( Code.Name ) )
77
{

‎docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@namespace LumexUI.Docs.Client.Components
2+
@inherits CodeSnippet
3+
4+
<div class="group relative"
5+
data-expanded="@_isExpanded.ToAttributeValue()">
6+
<div class="rounded-b-large overflow-hidden group-data-[expanded=false]:max-h-72">
7+
@{
8+
base.BuildRenderTree( __builder );
9+
}
10+
</div>
11+
12+
<button type="button"
13+
class="absolute inset-x-0 bottom-0 flex h-20 items-center justify-center rounded-b-large bg-linear-to-b from-default-800/70 to-default-800 text-default text-small group-data-[expanded=true]:hidden"
14+
@onclick="@Expand">
15+
Expand
16+
</button>
17+
</div>

‎docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
// Copyright (c) LumexUI 2024
2+
// LumexUI licenses this file to you under the MIT license
3+
// See the license here https://github.com/LumexUI/lumexui/blob/main/LICENSE
4+
5+
namespace LumexUI.Docs.Client.Components;
6+
7+
public partial class CodeSnippetCollapsible : CodeSnippet
8+
{
9+
private bool _isExpanded;
10+
11+
private void Expand()
12+
{
13+
_isExpanded = true;
14+
}
15+
}

‎docs/LumexUI.Docs.Client/Components/ColorSwatches.razor‎

Lines changed: 44 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,57 @@
11
@namespace LumexUI.Docs.Client.Components
2-
@rendermode InteractiveWebAssembly
32

4-
@foreach( var swatch in _swatches )
5-
{
6-
<div class="@(swatch.Title == "Base" ? "order-last sm:order-none" : default)">
7-
<div class="font-semibold text-sm text-foreground-900">@swatch.Title</div>
8-
<div class="grid grid-cols-1 sm:grid-cols-11 mt-3 gap-2.5 sm:mt-2">
9-
@foreach( var color in swatch.Scale )
3+
<div class="my-10 sm:my-16">
4+
<div class="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-y-4 gap-x-8">
5+
<div class="col-start-2 grid grid-cols-10 justify-items-center gap-1.5 py-1 bg-background font-medium text-small text-foreground-900 *:rotate-180 *:[writing-mode:vertical-lr] sm:gap-4 sm:*:rotate-325 sm:*:[writing-mode:horizontal-tb]">
6+
@foreach( var (key, value) in BaseColors )
107
{
11-
@if( color.Key != "default" && color.Key != "foreground" )
12-
{
13-
var isDivider = color.Key == "divider";
14-
15-
<LumexButton Color="@ThemeColor.None"
16-
Class="w-full min-w-fit h-auto p-0 justify-start gap-x-3 overflow-visible rounded-small sm:block sm:space-y-1">
17-
<div class="relative w-12 h-12 rounded-md ring ring-inset ring-foreground-900/15 sm:w-full"
18-
style="background-color: @(color.Value + (isDivider ? "26" : default))">
8+
<div>@value</div>
9+
}
10+
</div>
1911

20-
<span class="absolute top-1 right-1.5 font-medium text-[0.625rem] leading-none"
21-
style="color: @(isDivider ? "black" : ColorUtils.GetReadableColor(color.Value))">
22-
@color.Key
23-
</span>
12+
<p class="mb-4 capitalize font-medium text-foreground-900 text-small">Base</p>
13+
<div class="mb-4 grid grid-cols-10 gap-1.5 sm:gap-4">
14+
@foreach( var (key, value) in BaseColors )
15+
{
16+
<div class="aspect-square w-full rounded-sm inset-ring inset-ring-default-900/10 sm:rounded-md"
17+
style="background-color: var(--color-@key)" />
18+
}
19+
</div>
2420

25-
@if( swatch.Scale.TryGetValue( "default", out var defValue ) && color.Value == defValue )
26-
{
27-
<span class="absolute top-1 left-1.5 text-[0.625rem] leading-none"
28-
style="color: @swatch.Scale["foreground"]">
29-
●
30-
</span>
31-
}
32-
</div>
33-
</LumexButton>
34-
}
21+
<div class="sticky top-16 z-10 bg-background">&nbsp;</div>
22+
<div class="sticky top-16 z-10 col-start-2 grid grid-cols-10 justify-items-center gap-1.5 py-1 bg-background font-medium text-small text-foreground-900 *:rotate-180 *:[writing-mode:vertical-lr] sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb]">
23+
@foreach( var shade in Shades )
24+
{
25+
<div>@shade</div>
3526
}
3627
</div>
28+
29+
@foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
30+
{
31+
var colorName = color.ToString().ToLower();
32+
33+
<p class="capitalize font-medium text-foreground-900 text-small">@colorName</p>
34+
<div class="grid grid-cols-10 gap-1.5 sm:gap-4">
35+
@foreach( var shade in Shades )
36+
{
37+
<div class="aspect-square w-full rounded-sm inset-ring inset-ring-default-900/10 sm:rounded-md"
38+
style="background-color: var(--color-@colorName-@shade)" />
39+
}
40+
</div>
41+
}
3742
</div>
38-
}
43+
</div>
3944

4045
@code {
41-
private readonly Swatch[] _swatches = new Swatch[]
46+
private static readonly int[] Shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
47+
private static readonly Dictionary<string, string> BaseColors = new()
4248
{
43-
new("Base", [
44-
new( "bg", SemanticColors.Light.Background["default"] ),
45-
new( "text", SemanticColors.Light.Foreground["default"] ),
46-
new( "overlay", SemanticColors.Light.Overlay["default"] ),
47-
new( "divider", SemanticColors.Light.Divider["default"] ),
48-
new( "focus", SemanticColors.Light.Focus["default"] ),
49-
new( "surface1", SemanticColors.Light.Surface1["default"] ),
50-
new( "surface2", SemanticColors.Light.Surface2["default"] ),
51-
new( "surface3", SemanticColors.Light.Surface3["default"] ),
52-
]),
53-
new("Default", SemanticColors.Light.Default),
54-
new("Primary", SemanticColors.Light.Primary),
55-
new("Secondary", SemanticColors.Light.Secondary),
56-
new("Success", SemanticColors.Light.Success),
57-
new("Warning", SemanticColors.Light.Warning),
58-
new("Danger", SemanticColors.Light.Danger),
59-
new("Info", SemanticColors.Light.Info),
49+
["background"] = "bg",
50+
["foreground"] = "text",
51+
["focus"] = "focus",
52+
["divider"] = "divider",
53+
["surface1"] = "surface1",
54+
["surface2"] = "surface2",
55+
["surface3"] = "surface3"
6056
};
61-
62-
private record Swatch( string Title, ColorScale Scale );
6357
}

‎docs/LumexUI.Docs.Client/Components/Layouts/MainLayout.razor‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@namespace LumexUI.Docs.Client.Components
22
@inherits LayoutComponentBase
33

4-
<LumexThemeProvider Theme="@_theme" />
4+
<LumexThemeProvider />
55

66
@Body
77

@@ -10,7 +10,3 @@
1010
<a href="" class="reload">Reload</a>
1111
<a class="dismiss">🗙</a>
1212
</div>
13-
14-
@code {
15-
private readonly LumexTheme _theme = new DocsTheme();
16-
}

‎docs/LumexUI.Docs.Client/Components/Preview.razor‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@
2424

2525
private readonly Slots _slots = new()
2626
{
27-
Preview = "relative p-4 flex flex-wrap items-center gap-4 overflow-x-auto scrollbar-hide",
28-
PreviewWrapper = "relative p-4 rounded-xl ring ring-foreground-900/10 not-prose",
27+
Preview = "relative p-4 flex flex-wrap items-center gap-4 overflow-visible scrollbar-hide",
28+
PreviewWrapper = "relative p-4 rounded-large ring ring-foreground-900/10 not-prose",
2929
Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
3030
};
3131

‎docs/LumexUI.Docs.Client/Pages/Customization/Colors.razor‎

Lines changed: 0 additions & 76 deletions
This file was deleted.

0 commit comments

Comments
 (0)