docs: add dark mode support + theme toggle

docs/LumexUI.Docs.Client/Components/Callout.razor

@@ -42,7 +42,7 @@
         {
             CalloutVariant.Info => typeof( InfoIcon ),
             CalloutVariant.Warning => typeof( ShieldAlertIcon ),
-            CalloutVariant.Danger => typeof( OctagonAlertIcon ),
+            CalloutVariant.Danger => typeof( OctagonAlertFilledIcon ),
             CalloutVariant.Success => typeof( CircleCheckIcon ),
             CalloutVariant.Tip => typeof( InfoIcon ),
             _ => throw new NotImplementedException()

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

@@ -1,18 +1,30 @@
 @namespace LumexUI.Docs.Client.Components
 @rendermode InteractiveWebAssembly
 
-<div class="relative my-6 first:mt-0 last:mb-0 rounded-large overflow-hidden" @ref="@_ref">
-    <div class="prose prose-zinc bg-zinc-800">
-        @if( !string.IsNullOrEmpty( Code.Name ) )
-        {
-            <div class="flex items-center px-3 py-2 text-xs leading-6 border-b border-zinc-600/50">
-                <div class="flex items-center px-2 py-0.5 text-orange-400 bg-zinc-700/40 rounded-lg">
+<div class="group relative my-6 first:mt-0 last:mb-0"
+     data-expanded="@(Expandable ? _isExpanded.ToAttributeValue() : null)">
+    <div class="rounded-large overflow-hidden group-data-[expanded=false]:max-h-72">
+        <div class="prose prose-zinc dark:prose-invert">
+            @if( !string.IsNullOrEmpty( Code.Name ) )
+            {
+                <div class="flex items-center px-4 py-2.5 gap-2 border-b border-zinc-700 text-small text-foreground-400 bg-zinc-800 dark:text-foreground-500 dark:bg-zinc-900">
+                    <CodeXmlIcon Size="16" />
                     @Code.Name
                 </div>
+            }
+
+            <div id="@Id" class="*:my-0" @ref="@_ref">
+                @_renderCodeSnippet
             </div>
-        }
-        <div id="@Id" class="*:my-0">
-            @_renderCodeSnippet
         </div>
     </div>
+
+    @if( Expandable )
+    {
+        <button type="button"
+                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-foreground-200 text-small group-data-[expanded=true]:hidden dark:from-default-50/70 dark:to-default-50 dark:text-foreground-700"
+                @onclick="@(() => _isExpanded = true)">
+            Expand
+        </button>
+    }
 </div>

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

@@ -9,14 +9,16 @@ namespace LumexUI.Docs.Client.Components;
 public partial class CodeSnippet
 {
     [Parameter] public string? Id { get; set; }
+	[Parameter] public bool Expandable { get; set; }
     [Parameter, EditorRequired] public CodeBlock Code { get; set; } = default!;
 
     [Inject] private IJSRuntime JSRuntime { get; set; } = default!;
 
     private readonly RenderFragment _renderCodeSnippet;
     private ElementReference _ref;
+	private bool _isExpanded;
 
-    public CodeSnippet()
+	public CodeSnippet()
     {
         _renderCodeSnippet = RenderCodeSnippet;
     }

docs/LumexUI.Docs.Client/Components/DocsApiSection.razor

@@ -12,14 +12,21 @@
             var componentPathSegment = component.Replace( "Lumex", "" ).SplitPascalCase().ToKebabCase();
 
             <li>
-                <LumexLink Href="@($"{NavigationManager.BaseUri}docs/api/{componentPathSegment}")"
-                           Class="border-none text-orange-500 text-xs font-normal not-prose">
-                    <span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-orange-50">
+                <LumexChip Size="@Size.Small"
+                           Radius="@Radius.Small"
+                           Variant="@ChipVariant.Flat"
+                           Class="not-prose bg-default-50 ring ring-default-900/10">
+                    <LumexLink Href="@($"{NavigationManager.BaseUri}docs/api/{componentPathSegment}")"
+                               Class="font-mono text-orange-600 dark:text-orange-400">
                         @($"<{component} />")
-                    </span>
-                </LumexLink>
+                    </LumexLink>
+                </LumexChip>
             </li>
         }
+
+        @* <span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-default-50">
+            @($"<{component} />")
+        </span> *@
     </ul>
 </DocsSection>
 

docs/LumexUI.Docs.Client/Components/DocsCompositionSection.razor

@@ -8,7 +8,7 @@
         @foreach( var component in Components )
         {
             <li>
-                <strong class="text-orange-500">@component.Name</strong>: @component.Description
+                <strong class="text-orange-500 dark:text-orange-400">@component.Name</strong>: @component.Description
             </li>
         }
     </ul>

docs/LumexUI.Docs.Client/Components/DocsSection.razor

@@ -7,10 +7,9 @@
     <LumexComponent As="@(IsSubsection ? "h3" : "h2")"
                     id="@_id">
         <LumexLink Href="@($"{RelativePath}#{_id}")"
-                   Color="@ThemeColor.None"
-                   Class="border-none">
+                   Color="@ThemeColor.None">
             @Title
-            <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-xs ring ring-foreground-900/10 hover:ring-orange-200 hover:bg-orange-50 hover:text-orange-500">
+            <span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-xs ring ring-default-900/10 hover:ring-orange-300 hover:bg-orange-400/10 hover:text-orange-500 dark:text-foreground-500 dark:hover:ring-orange-300/60 dark:hover:text-orange-200">
                 <Link2Icon Size="16" />
             </span>
         </LumexLink>

docs/LumexUI.Docs.Client/Components/DocsSlotsSection.razor

@@ -9,7 +9,7 @@
         @foreach( var slot in Slots )
         {
             <li>
-                <strong class="text-orange-500">@slot.Name:</strong> @slot.Description
+                <strong class="text-orange-500 dark:text-orange-400">@slot.Name:</strong> @slot.Description
             </li>
         }
     </ul>

docs/LumexUI.Docs.Client/Components/Header.razor

@@ -4,7 +4,7 @@
 <LumexNavbar Sticky="@true"
              Bordered="@true"
              MaxWidth="@MaxWidth.XLarge"
-             Classes="@_navbarClasses">
+             Classes="@(new() { Wrapper = "gap-6" })">
     <LumexNavbarBrand>
         <LumexLink Href="/"
                    Class="font-bold text-xl text-foreground-900">
@@ -18,13 +18,13 @@
             <LumexNavbarItem>
                 <LumexLink Href="@item.Link"
                            Color="@ThemeColor.None"
-                           Class="hover:text-orange-500 data-[active=true]:text-orange-500">
+                           Class="data-[active=true]:text-orange-500 dark:text-foreground-700 dark:data-[active=true]:text-orange-400">
                     @item.Name
                 </LumexLink>
             </LumexNavbarItem>
         }
 
-        <LumexNavbarItem Class="h-full">
+        <LumexNavbarItem Class="h-6">
             <LumexDivider Orientation="@Orientation.Vertical" />
         </LumexNavbarItem>
         @_headerActions
@@ -41,22 +41,20 @@
 </LumexNavbar>
 
 @code {
-    private static RenderFragment _headerActions =
+    private readonly RenderFragment _headerActions =
     @<text>
         <LumexNavbarItem Class="flex">
             <LumexLink Href="https://github.com/LumexUI/lumexui"
                        External="@true"
-                       Class="text-foreground-400 hover:text-foreground-600">
+                       Class="text-foreground-500 hover:text-foreground-600 hover:opacity-100">
                 <GithubIcon Size="20" />
             </LumexLink>
         </LumexNavbarItem>
+        <LumexNavbarItem Class="flex">
+            <ThemeToggle />
+        </LumexNavbarItem>
     </text>;
 
-    private readonly NavbarSlots _navbarClasses = new()
-        {
-            Wrapper = "py-5 gap-6"
-        };
-
     private readonly NavItem[] _navItems = new NavItem[]
     {
         new("/", "Docs"),

docs/LumexUI.Docs.Client/Components/InstallationSteps.razor

@@ -5,12 +5,12 @@
     {
         foreach( var step in Steps )
         {
-            <li class="relative pl-10 pb-8 xl:grid xl:grid-cols-5 xl:gap-10 before:absolute before:content-[counter(step)] before:left-0 before:flex before:items-center before:justify-center before:size-6 before:text-[0.625rem] before:font-bold before:text-zinc-700 before:rounded-md before:shadow-xs before:ring before:ring-foreground-900/10 after:absolute after:top-8 after:bottom-0 after:left-3 after:w-px after:bg-divider" style="counter-increment: step;">
+            <li class="relative pl-10 pb-8 xl:grid xl:grid-cols-5 xl:gap-10 before:absolute before:content-[counter(step)] before:left-0 before:flex before:items-center before:justify-center before:size-6 before:text-[0.625rem] before:font-bold before:text-foreground before:rounded-md before:shadow-xs before:ring before:ring-default-900/5 after:absolute after:top-8 after:bottom-0 after:left-3 after:w-px after:bg-divider last:after:w-0 dark:before:bg-default-200 dark:before:highlight-white/15" style="counter-increment: step;">
                 <div class="mb-6 xl:mb-0 xl:col-span-2">
-                    <h4 class="text-sm leading-6 font-semibold mb-2">
+                    <h4 class="mb-2 text-foreground-900 text-sm font-semibold leading-6">
                         @step.Title
                     </h4>
-                    <div class="prose prose-zinc prose-sm">
+                    <div class="prose prose-zinc prose-sm dark:prose-invert">
                         @step.Body
                     </div>
                 </div>

docs/LumexUI.Docs.Client/Components/Layouts/DocsContentLayout.razor

@@ -11,14 +11,14 @@
                     Description="@_description"
                     LinksProps="@_linksProps" />
 
-        <main class="mt-8 prose prose-zinc">
+        <main class="mt-8 prose prose-zinc dark:prose-invert">
             <LumexDivider />
 
             @Body
         </main>
 
         <DocsFooter />
-        <div class="scrollbar hidden fixed z-20 overflow-y-auto top-[4.0625rem] right-[max(0px,calc(50%-40rem))] bottom-0 w-[13rem] pb-10 xl:block">
+        <div class="hidden fixed z-20 overflow-y-auto top-[4.0625rem] right-[max(0px,calc(50%-40rem))] bottom-0 w-[13rem] pb-10 xl:block">
             @TableOfContents
         </div>
     </div>

docs/LumexUI.Docs.Client/Components/Layouts/DocsLayout.razor

@@ -5,7 +5,7 @@
 <Header />
 
 <div class="container max-w-7xl mx-auto px-6">
-    <aside class="scrollbar hidden fixed z-20 overflow-y-auto inset-0 top-[4.0625rem] left-[max(0px,calc(50%-40rem))] right-auto w-[16rem] pl-6 pb-10 lg:block">
+    <aside class="hidden fixed z-20 overflow-y-auto inset-0 top-[4.0625rem] left-[max(0px,calc(50%-40rem))] right-auto w-[16rem] pl-6 pb-10 lg:block">
         <NavMenu />
     </aside>
     <div class="lg:pl-[14.5rem]">

docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor

@@ -10,7 +10,7 @@
                 Description="Follow the steps below to get started with LumexUI quickly!" />
 
     <main class="mt-8">
-        <div class="mb-8 prose prose-zinc">
+        <div class="mb-8 prose prose-zinc dark:prose-invert">
             <DocsSection Title="Prerequisites">
                 <p>Before you begin, ensure that you have the following:</p>
                 <ul>

docs/LumexUI.Docs.Client/Components/NavItemBadge.razor

@@ -2,31 +2,35 @@
 
 @if( Status.HasValue )
 {
-    <span class="@RootClasses">
+    <LumexChip Size="@Size.Small"
+               Radius="@Radius.Full"
+               Variant="@ChipVariant.Flat"
+               Classes="@Classes">
         @Status.ToString()
-    </span>
+    </LumexChip>
 }
 
 @code {
     [Parameter] public PageStatus? Status { get; set; }
 
-    private string? RootClasses => ElementClass.Empty()
-        .Add( "px-1.5" )
-        .Add( "py-[3px]" )
-        .Add( "rounded-full" )
-        .Add( "ring" )
-        .Add( "font-semibold" )
-        .Add( "text-[9px]" )
-        .Add( "uppercase" )
-        .Add( "leading-none" )
-        .Add( _variants[Status!.Value], when: Status.HasValue )
-        .ToString();
+    private ChipSlots Classes => new()
+    {
+        Base = new ElementClass()
+            .Add( "h-4" )
+            .Add( "ring" )
+            .Add( _variants[Status!.Value] ),
+        Content = new ElementClass()
+            .Add( "uppercase" )
+            .Add( "text-[10px]" )
+            .Add( "font-medium" )
+            .Add( "leading-none" )
+    };
 
     private static readonly Dictionary<PageStatus, string> _variants = new()
     {
-        [PageStatus.New] = "bg-orange-100 ring-orange-300 text-orange-600",
-        [PageStatus.Soon] = "bg-foreground-100 ring-foreground-300 text-foreground-600",
-        [PageStatus.Preview] = "bg-indigo-50 ring-indigo-200 text-indigo-600",
-        [PageStatus.Updated] = "bg-teal-50 ring-teal-200 text-teal-600",
+        [PageStatus.New] = "bg-orange-400/15 ring-orange-300 text-orange-600 dark:ring-orange-300/60 dark:text-orange-200",
+        [PageStatus.Soon] = "bg-teal-400/15 ring-teal-300 text-teal-600 dark:ring-teal-300/60 dark:text-teal-200",
+        [PageStatus.Preview] = "bg-indigo-400/15 ring-indigo-200 text-indigo-600 dark:ring-indigo-300/60 dark:text-indigo-200",
+        [PageStatus.Updated] = "bg-zinc-400/15 ring-zinc-300 text-zinc-500 dark:ring-zinc-300/60 dark:text-zinc-300",
     };
 }

docs/LumexUI.Docs.Client/Components/NavMenu.razor

@@ -39,7 +39,7 @@
             <li>
                 <LumexLink Href="@($"docs/api/{formattedName.ToKebabCase()}")"
                            Match="@NavLinkMatch.Prefix"
-                           Class="block border-l pl-4 -ml-px border-transparent text-foreground hover:border-foreground-400 data-[active=true]:text-orange-500 data-[active=true]:border-current">
+                           Class="block border-l pl-4 -ml-px border-transparent text-foreground hover:border-foreground-400 data-[active=true]:text-orange-500 data-[active=true]:border-current/80 dark:data-[active=true]:text-orange-400">
                     @item.Name.Replace( "Lumex", "" )
                 </LumexLink>
             </li>
@@ -55,7 +55,7 @@
             <li class="@styles">
                 <LumexLink Href="@($"docs/{categoryName.ToKebabCase()}/{formattedName.ToKebabCase()}")"
                            Match="@NavLinkMatch.Prefix"
-                           Class="block border-l pl-4 -ml-px border-transparent text-foreground hover:border-foreground-400 data-[active=true]:text-orange-500 data-[active=true]:border-current">
+                           Class="block border-l pl-4 -ml-px border-transparent text-foreground hover:border-foreground-400 data-[active=true]:text-orange-500 data-[active=true]:border-current/80 dark:data-[active=true]:text-orange-400">
                     @formattedName
                 </LumexLink>
                 <NavItemBadge Status="@item.Status" />

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

@@ -23,11 +23,11 @@
         TwMerge.Merge( _slots.Preview, Classes?.Preview );
 
     private readonly Slots _slots = new()
-        {
-            Preview = "relative p-4 flex flex-wrap items-center gap-4 overflow-visible scrollbar-hide",
-            PreviewWrapper = "relative p-4 rounded-large ring ring-foreground-900/10 not-prose",
-            Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
-        };
+    {
+        Preview = "relative p-4 flex flex-wrap items-center gap-4 overflow-visible scrollbar-hide",
+        PreviewWrapper = "relative p-4 rounded-large ring ring-default-900/10 not-prose",
+        Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
+    };
 
     public class Slots
     {

docs/LumexUI.Docs.Client/Components/PreviewCode.razor

@@ -8,25 +8,25 @@
     </Preview>
 
     <div class="@ToolbarClass">
-        <div class="flex items-center justify-end">
+        <div class="flex items-center justify-end gap-2">
             <LumexButton Size="@Size.Small"
+                         Radius="@Radius.Full"
                          OnClick="@Expand"
-                         Class="h-6 px-2 me-1 rounded-full bg-orange-50 border border-orange-300 text-orange-500 text-[11px]">
+                         Class="h-6 px-2 bg-orange-400/10 border border-orange-300 text-orange-500 text-[11px] dark:text-orange-200 dark:border-orange-300/60">
                 @(_expanded ? "Collapse code" : "Expand code")
             </LumexButton>
             <LumexButton IconOnly="@true"
                          Size="@Size.Small"
                          Variant="@Variant.Light"
                          OnClick="@CopyToClipboard">
-                @(_copied
-                    ? @<CheckIcon Size="16" class="text-foreground-500" />
-                    : @<CopyIcon Size="16" class="text-foreground-500" />
-                )
+                <DynamicIcon Type="@(_copied ? typeof( CheckIcon ) : typeof( CopyIcon ))"
+                             Size="16"
+                             class="text-foreground-500" />
             </LumexButton>
         </div>
     </div>
 
-    <LumexCollapse Expanded="@_expanded" Class="*:rounded-t-none">
+    <LumexCollapse Expanded="@_expanded" Class="**:rounded-t-none">
         <CodeSnippet Id="@_id" Code="@Code" />
     </LumexCollapse>
 </div>