Skip to content

docs: add dark mode support + theme toggle#235

Merged
desmondinho merged 7 commits intodevfrom
feat/docs-dark-mode
Aug 7, 2025
Merged

docs: add dark mode support + theme toggle#235
desmondinho merged 7 commits intodevfrom
feat/docs-dark-mode

Conversation

@desmondinho
Copy link
Contributor

@desmondinho desmondinho commented Aug 7, 2025

Description

Closes #119

This PR adds dark mode support and theme toggle in the docs.

What's been done?

  • {Change 1}
  • {Change 2}
  • ...

Checklist

  • My code follows the project's coding style and guidelines.
  • I have included inline docs for my changes, where applicable.
  • I have added, updated or removed tests according to my changes.
  • All tests are passing.
  • There's an open issue for the PR that I am making.

Additional Notes

Summary by CodeRabbit

  • New Features

    • Added a theme toggle component for switching between light and dark modes.
    • Introduced line numbering for code blocks throughout documentation and code samples.
    • Enabled expandable code snippets with improved UI and expand/collapse functionality.
  • Enhancements

    • Refined dark mode styling and added dark mode variants across many components, including cards, navigation, and installation steps.
    • Updated visual styles for chips, badges, links, and navigation items for consistency and improved accessibility.
    • Improved code preview and snippet components with new icons, line numbering, and enhanced expand/collapse behavior.
    • Enhanced card, dropdown, listbox, and tabs examples with updated layouts, colors, and responsive design adjustments.
    • Synchronized theme between parent and iframe in embedded preview layouts.
  • Bug Fixes

    • Prevented rendering of empty tab panels when no content is present.
  • Chores

    • Upgraded PrismJS to v1.30.0, adding the line-numbers plugin and updating code highlighting.
    • Updated Tailwind CSS CLI version for build tooling.
    • Removed unused or redundant CSS classes and components.
    • Refactored code for maintainability and consistency, including removal of obsolete components and properties.
  • Documentation

    • Expanded and improved sample HTML and code snippets for better clarity and usability.
    • Added and updated visual examples to reflect new styling and features.

@desmondinho desmondinho linked an issue Aug 7, 2025 that may be closed by this pull request
1 task
@coderabbitai
Copy link

coderabbitai bot commented Aug 7, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

This update extensively refactors the documentation site's components and styles to enhance dark mode support and introduce a theme toggle. It removes redundant or legacy components, updates CSS classes for dark mode compatibility, adds a new ThemeToggle component, synchronizes theme state across iframes, and upgrades PrismJS to enable line numbers in code blocks.

Changes

Cohort / File(s) Change Summary
Dark Mode & Theme Toggle Implementation
docs/LumexUI.Docs.Client/Components/Header.razor, docs/LumexUI.Docs.Client/Components/ThemeToggle.razor, docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/ExampleLayout.razor, docs/LumexUI.Docs/wwwroot/js/docs.js, docs/LumexUI.Docs/Styles/globals.css
Added a ThemeToggle component, integrated it into the header, synchronized theme between parent and iframe, updated global CSS for dark mode, and ensured theme class is applied on page load.
Code Snippet Expansion & Line Numbers
docs/LumexUI.Docs.Client/Components/CodeSnippet.razor, docs/LumexUI.Docs.Client/Components/CodeSnippet.razor.cs, docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor, docs/LumexUI.Docs.Client/Components/CodeSnippetCollapsible.razor.cs, docs/LumexUI.Docs.Client/Pages/Theming/DesignTokens.razor, docs/LumexUI.Docs.Generator/CodeSnippets.cs, docs/LumexUI.Docs/Styles/prism.css, docs/LumexUI.Docs/Styles/typography.css, docs/LumexUI.Docs.Client/Samples/*, docs/LumexUI.Docs/wwwroot/js/prism.js
Unified and enhanced code snippet display: removed legacy collapsible component, made snippets expandable, enabled line numbers in code blocks, updated code generator and PrismJS for line number support, and adjusted related CSS.
Component & UI Dark Mode Styling
docs/LumexUI.Docs.Client/Components/*, docs/LumexUI.Docs.Client/Pages/Components/*, docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor, docs/LumexUI.Docs.Client/Pages/Theming/Customization/CustomThemesPreview.razor
Updated CSS classes throughout components and pages for better dark mode support, including color, background, border, and text adjustments.
Navigation & Layout Adjustments
docs/LumexUI.Docs.Client/Components/Layouts/DocsContentLayout.razor, docs/LumexUI.Docs.Client/Components/Layouts/DocsLayout.razor, docs/LumexUI.Docs/Components/Routes.razor
Removed custom scrollbar styling, improved dark mode prose inversion, and eliminated focus-on-navigate for accessibility.
Icon & DynamicIcon Updates
src/LumexUI.Shared.Icons/CodeXmlIcon.razor, src/LumexUI.Shared.Icons/DynamicIcon.cs, docs/LumexUI.Docs.Client/Components/Callout.razor
Added a new code XML icon, updated DynamicIcon parameter handling, and changed the danger callout icon type.
Badge & Chip Component Styling
src/LumexUI/Styles/Badge.cs, docs/LumexUI.Docs.Client/Components/NavItemBadge.razor, docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/CustomCells.razor
Refactored badge and chip color styling for flat variants, migrated status indicators to chips, and improved dark mode color handling.
Miscellaneous UI & Content Tweaks
(multiple files in docs/LumexUI.Docs.Client/Pages/Components/Card/Examples, .../Divider/Examples, .../Tabs/Examples, .../Listbox/Examples, .../Dropdown/Examples, etc.)
Updated text, spacing, and class attributes for improved consistency, dark mode, and visual refinement across various UI examples and documentation samples.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Header
    participant ThemeToggle
    participant ThemeService
    participant Document

    User->>ThemeToggle: Click toggle button
    ThemeToggle->>ThemeService: ToggleThemeAsync()
    ThemeService-->>ThemeToggle: Theme changed event
    ThemeToggle-->>Header: Notify theme changed
    Header-->>Document: Update root class (light/dark)
    Document-->>User: UI updates with new theme
Loading
sequenceDiagram
    participant User
    participant CodeSnippet
    participant UI

    User->>CodeSnippet: View code snippet (Expandable=true)
    CodeSnippet->>UI: Render snippet (collapsed, max-height)
    User->>CodeSnippet: Click "Expand" button
    CodeSnippet->>UI: Expand snippet (remove max-height)
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~40 minutes

Assessment against linked issues

Objective Addressed Explanation
Implement Dark Mode and toggle on the documentation site (#119)

Assessment against linked issues: Out-of-scope changes

Code Change Explanation
Refactoring and visual tweaks to various card, divider, chip, and other component example files (e.g., docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/BlurredCard.razor, .../Divider/Examples/Usage.razor, .../Tabs/Examples/CustomStyles.razor, etc.) These changes are general UI/UX improvements and not strictly required for the dark mode implementation or toggle feature. However, they may be indirectly related to ensuring visual consistency for dark mode.
Removal of <FocusOnNavigate> from routing (docs/LumexUI.Docs/Components/Routes.razor) This change is not directly related to dark mode or theme toggling, but rather affects navigation accessibility.
Upgrade of PrismJS and addition of line numbers to code blocks (docs/LumexUI.Docs/wwwroot/js/prism.js, docs/LumexUI.Docs/Styles/prism.css, docs/LumexUI.Docs.Generator/CodeSnippets.cs) While improving code block readability, this is not strictly required for implementing dark mode or the theme toggle.

Possibly related PRs

  • LumexUI/lumexui#222: Adds the Badge component, which relates to the refactoring and color changes for badges in this PR.
  • LumexUI/lumexui#234: Updates the OctagonAlertFilledIcon, which is now used for the danger callout in this PR.
  • LumexUI/lumexui#229: Removes the C# theme config system and legacy components, which aligns with the removal and refactoring of theming and code snippet components in this PR.

Suggested labels

📚 Scope: Docs, ♿️ Scope: Accessibility, 🚀 Type: Feature

Poem

In the docs where the code blocks gleam,
A bunny toggles the dark mode theme.
With chips and badges shining bright,
And line numbers glowing in the night.
Hop, hop, hooray—
The docs look better every day!
🐇✨

Note

🔌 MCP (Model Context Protocol) integration is now available in Early Access!

Pro users can now connect to remote MCP servers under the Integrations page to get reviews and chat conversations that understand additional development context.


📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 670d862 and 874e83a.

📒 Files selected for processing (2)
  • docs/LumexUI.Docs.Client/Components/ThemeToggle.razor (1 hunks)
  • docs/LumexUI.Docs/wwwroot/js/docs.js (1 hunks)
✨ Finishing Touches
  • 📝 Generate Docstrings
🧪 Generate unit tests
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch feat/docs-dark-mode

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai generate unit tests to generate unit tests for this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 9

🔭 Outside diff range comments (1)
src/LumexUI/Styles/Badge.cs (1)

268-341: Hard-coding colour tokens reduces maintainability

Replacing the reusable ColorVariants.Flat[...] constants with literal class strings duplicates colour logic in this file and breaks the single-source-of-truth pattern adopted elsewhere (Solid, Shadow). Any future palette change must now be updated in two places.

- [nameof( BadgeSlots.Badge )] = "bg-primary-200/80 text-primary-600 dark:bg-primary/20"
+ [nameof( BadgeSlots.Badge )] = ColorVariants.Flat[ThemeColor.Primary]

Recommend reverting to the constants or extracting the new strings into the existing ColorVariants.Flat dictionary so all variants stay centralised.

🧹 Nitpick comments (16)
docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/LoadingContent.razor (1)

1-1: Remove unnecessary Razor expression on boolean literal

@true is parsed the same as true but adds cognitive overhead and is easy to overlook when scanning markup.
A plain literal is clearer.

-<LumexDataGrid Data="@_users" Loading="@true">
+<LumexDataGrid Data="@_users" Loading="true">
docs/LumexUI.Docs.Client/Pages/Components/Card/PreviewCodes/CustomStyles.razor (1)

4-4: Align preview-wrapper styling with the new global pattern
Most updated previews also add padding (p-8) and sometimes a ring/border on the wrapper for visual consistency. This instance only sets bg-default-50. Consider matching the new convention so all preview blocks look identical.

-PreviewWrapper = "bg-default-50"
+PreviewWrapper = "bg-default-50 p-8"
docs/LumexUI.Docs.Client/Samples/Installation/installationPackage.html (1)

1-1: Mixed use of no-line-numbers – verify intention.

Every other updated sample now opts-in to line numbers, but this one explicitly opts-out.
If this is intentional (e.g., to keep a one-liner compact) no change is needed. Otherwise, switch to the standard line-numbers class for consistency.

-<pre class="no-line-numbers"><code class="language-shell">
+<pre class="line-numbers"><code class="language-shell">
src/LumexUI/Components/Tabs/LumexTabs.razor (1)

32-38: Whitespace-only diff – consider excluding from functional PRs

These lines only tweak spacing. While harmless, whitespace-only changes introduce noisy diffs that complicate future git blame or cherry-picks. Prefer bundling formatting changes in a dedicated “style” commit or let an automated formatter run in a separate workflow.

docs/LumexUI.Docs.Client/Pages/Components/Chip/Examples/CloseButton.razor (1)

4-4: Consider using a more descriptive comment or removing it entirely.

The empty block comment /* */ doesn't provide meaningful information. Consider either adding a descriptive comment explaining the close behavior or removing the comment entirely for cleaner code.

-private void OnClose( MouseEventArgs args ) { /* */ }
+private void OnClose( MouseEventArgs args ) { }
docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/Image.razor (1)

3-5: Confirm availability of text-tiny & rounded-medium utilities

Similar to the previous file, these classes are non-standard. Ensure they are declared in your Tailwind config or exposed via a plugin (e.g. @lumexui/tailwind-preset). Otherwise the new typography / radius will silently be ignored.

You can reuse the shell snippet above, replacing the search patterns with text-tiny and rounded-medium.

Also applies to: 9-9

docs/LumexUI.Docs.Client/Components/CodeSnippet.razor.cs (3)

12-12: Fix indentation inconsistency.

The parameter declaration uses tabs instead of spaces, which is inconsistent with the rest of the codebase that uses spaces for indentation.

-	[Parameter] public bool Expandable { get; set; }
+    [Parameter] public bool Expandable { get; set; }

19-19: Fix indentation inconsistency.

The field declaration uses tabs instead of spaces, which is inconsistent with the rest of the codebase.

-	private bool _isExpanded;
+    private bool _isExpanded;

21-21: Fix indentation inconsistency.

The constructor declaration uses tabs instead of spaces, which is inconsistent with the rest of the codebase.

-	public CodeSnippet()
+    public CodeSnippet()
docs/LumexUI.Docs.Client/Pages/Components/Navbar/Examples/Pages/ExampleLayout.razor (1)

4-29: Well-implemented theme synchronization solution.

The JavaScript implementation effectively handles theme synchronization between parent and iframe using MutationObserver. The approach covers both initial sync and dynamic changes, which is essential for responsive theme toggling.

Consider adding error handling for potential cross-origin access issues:

 function syncThemeWithParent() {
+  try {
     const parentHtml = window.parent.document.documentElement;
     const iframeHtml = document.documentElement;

     const applyTheme = () => {
       const isDark = parentHtml.classList.contains('dark');
       iframeHtml.classList.toggle('dark', isDark);
     };

     // Initial sync
     applyTheme();

     // Observe for class changes
     const observer = new MutationObserver(() => {
       applyTheme();
     });

     observer.observe(parentHtml, {
       attributes: true,
       attributeFilter: ['class'],
     });
+  } catch (error) {
+    // Fallback or silent fail for cross-origin scenarios
+    console.warn('Theme sync failed:', error);
+  }
 }
docs/LumexUI.Docs.Client/Components/DocsApiSection.razor (1)

27-29: Remove commented-out code.

The commented-out span element should be removed to keep the codebase clean, unless it's intentionally kept for documentation purposes.

-        @* <span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-default-50">
-            @($"<{component} />")
-        </span> *@
docs/LumexUI.Docs.Client/Pages/Components/Collapse/Examples/Usage.razor (1)

24-36: Remove duplicate CSS class in the builder chain.

The ElementClass builder chain includes py-1 twice (lines 29 and 30), which is redundant and could lead to confusion.

Apply this diff to remove the duplicate:

 private string _directoryStyles = new ElementClass()
     .Add( "flex" )
     .Add( "items-center" )
     .Add( "gap-2" )
     .Add( "px-2" )
     .Add( "py-1" )
-    .Add( "py-1" )
     .Add( "rounded-medium" )
     .Add( "cursor-pointer" )
     .Add( "hover:bg-indigo-50" )
     .Add( "hover:text-indigo-600" )
     .Add( "dark:hover:bg-indigo-500/15" )
     .Add( "dark:hover:text-indigo-200" );
src/LumexUI.Shared.Icons/DynamicIcon.cs (1)

40-44: Consider parameter update behavior with TryAdd.

The use of TryAdd means that if the same parameter is passed multiple times during the component lifecycle, only the first value will be preserved. This might not be the intended behavior for parameter updates.

Consider using direct assignment instead:

 else
 {
-    _attributes.TryAdd( entry.Name, entry.Value );
+    _attributes[entry.Name] = entry.Value;
 }

Alternatively, clear the dictionary at the start of SetParametersAsync if you want to maintain the TryAdd approach:

 public Task SetParametersAsync( ParameterView parameters )
 {
+    _attributes.Clear();
     // This manual parameter assignment logic will be marginally faster than calling
docs/LumexUI.Docs.Client/Components/Header.razor (1)

7-7: Consider performance impact of inline object creation

While the inline object creation works, consider if this creates unnecessary allocations compared to a static predefined object, especially if this component renders frequently.

+private static readonly NavbarSlots _navbarClasses = new() { Wrapper = "gap-6" };

-Classes="@(new() { Wrapper = "gap-6" })"
+Classes="@_navbarClasses"
docs/LumexUI.Docs.Client/Components/CodeSnippet.razor (1)

24-28: Consider simplifying complex button styling

The expand button functionality is well-implemented, but the CSS class string is quite complex. Consider extracting some classes to a CSS file or breaking into multiple class assignments for better maintainability.

-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"
+class="@_expandButtonClasses"

And add to code section:

private const string _expandButtonClasses = 
    "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";
docs/LumexUI.Docs/Styles/prism.css (1)

71-107: Consider using design system tokens for consistency

The line numbering implementation is comprehensive and well-structured. However, consider replacing the hard-coded hover background color with a design system token for better theme consistency.

-background-color: rgba(128,128,128,.2)
+background-color: var(--color-zinc-500/20)

Also consider extracting the magic numbers (3.8em, 3em) as CSS custom properties for easier maintenance:

+:root {
+  --line-numbers-width: 3em;
+  --line-numbers-padding: 3.8em;
+}

-padding-left: 3.8em;
+padding-left: var(--line-numbers-padding);

-left: -3.8em;
-width: 3em;
+left: calc(-1 * var(--line-numbers-padding));
+width: var(--line-numbers-width);

@desmondinho desmondinho merged commit 259e265 into dev Aug 7, 2025
1 of 2 checks passed
@desmondinho desmondinho deleted the feat/docs-dark-mode branch August 7, 2025 19:41
desmondinho added a commit that referenced this pull request Aug 24, 2025
* feat: support Tailwind CSS v4 (#183)

* build(deps): bump TailwindMerge.NET from 0.3.0 to 1.0.0

* feat: add new CSS theme file

* feat/build: add custom targets file to improve library usability

* chore: move `Plugin` folder one level higher; remove `Scripts` folder

* feat/build: pack new theme and custom `.targets` files

* build(docs): add `Directory.Build.props` and `Directory.Build.targets`

* chore(docs): remove tailwind npm deps; use standalone CLI instead

* docs: apply `static` on theme

* refactor(theme-provider): simplify names of box-shadow css variables

* refactor(theme-provider): opacities are percentage to match `color-mix` function syntax

* chore(components): apply  `static` on theme; fix some vars

* refactor(components): drop Tailwind CSS v3 support

* feat(theme): add custom transition variables

* fix(theme): correct `default` color; add `default-foreground` color

* chore(theme): add reference for the custom transitions approach (it's not in docs afaik)

* fix: rename `shadow-sm` to `shadow-xs`

* fix: rename `rounded-sm` to `rounded-xs`

* fix: rename `rounded` to `rounded-sm`

* fix: rename `outline-none` to `outline-hidden`

* fix: rename `ring-1` to `ring`

* fix(button): add base `cursor-pointer` class

* docs: remove `children` custom variant in favor of `*`

* fix(theme): correct `enter` custom animation

* chore(components): cleanup styles

* fix(theme): add missing comma separator in custom transition vars

* docs: configure typography

* refactor(theme): simplify `scrollbar-hide` utility

* chore(theme): apply `inline` on theme

* refactor: replace `theme` function with CSS vars

* fix(components): correct scale/translate transitions

* feat(theme): update colors from hex to oklch

* docs(installation): update installation guide

* feat(theme): add leading CSS vars

* chore(docs): fix prose `<code>` tag ticks

* refactor(utils): remove hex luminance calculator

* docs(customization): update Theme and Colors pages

* docs(colors): remove 'common colors are not configurable' callout

* fix(checkbox): correct radius styles

* fix(data-grid): correct striped styles

* fix(input/select): correct label placement out transitions

* fix(input/select): correct outlined variant focus styles

* fix(input): add cursor-pointer style on the clear button

* fix(input/select): correct flat variant focus styles

* fix(docs): correct some component examples

* build(docs): adjust Tailwind standalone CLI file download for Linux

* build(docs): adjust Tailwind standalone CLI file download for Linux

* ci(deploy): try add staging env in the ci/cd

* ci(build-test): change trigger branch

* ci(deploy): update trigger branches

* ci(deploy): change env vars usage (test)

* ci: add deploy-dev.yml; revert deploy.yml

* ci(deploy): test staging

* chore(docs): nits

* chore(components): tweak styles of some components

* chore(docs): tweak some components examples

* chore: coderabbit comments

* ci: remove deploy-dev.yml

* fix(theme): remove extra shade (950) from the color scales for consistency in dark mode (#199)

* fix(theme): remove extra key (950) from the color scales for consistency in dark mode

* build(docs): explicitly set Tailwind v4.0.9

* feat(components): introduce Avatar and AvatarGroup components (#201)

* feat: add baseline implementation

* feat: add slots

* feat: add basic slots styles

* feat: add appearance params, such as `Color`, `Radius`, `Size`

* feat: add `Bordered` and `Disabled` params

* feat: add compound variants styles

* feat: apply slots styles

* docs: add baseline examples page

* feat: add `data-loaded` attribute on img

* feat: add `ShowFallback` parameter

* chore: fix compound style variants

* chore: set `showFallback` on after first render

* feat(utils): add implicit cast to string for the `ElementClass`

* feat: add LumexAvatarGroup component

* feat: take into account when LumexAvatar is rendered inside the LumexAvatarGroup

* feat: add `AvatarClasses` parameter in the avatar group component

* docs: add Avatar page

* build(docs): explicitly set Tailwind v4.0.9

* test: add tests for LumexAvatar and LumexAvatarGroup components

* chore: simplify condition for fallback render

* fix(docs): replace usages of `-foreground-950` CSS classes with `-foreground-900`

* fix(docs): remove `dark:prose-invert` CSS class until dark theme is properly configured

* feat(components): introduce Skeleton component (#202)

* feat(skeleton): add baseline implementation of the component

* feat(skeleton): add slots and styles

* feat(skeleton): add XML summaries

* fix(skeleton): return back `after` pseudo CSS classes to prevent flickering on state change

* docs(skeleton): add Skeleton page

* test(skeleton): add tests

* docs(skeleton): fix Loading example button text

* fix(navbar): add a check before toggling navbar menu on navigation (#204)

* feat(components): introduce Spinner component (#207)

* feat(spinner): add baseline implementation

* feat(spinner): add variants and styles

* feat(spinner): add slots

* docs(spinner): add Spinner page

* docs: nits

* test(spinner): add tests

* docs: map static assets

* build(docs): remove extra MSBuild target for the Tailwind prod build

* docs: revert static assets changes

* docs: update static assets usage

* Revert "docs: update static assets usage"

This reverts commit 94ae9ec.

* feat(components): introduce Chip component (#211)

* feat(chip): add baseline implementation

* feat(chip): add ChipVariant enum

* feat(chip): add appearance parameters and styles

* feat(chip): add AvatarContent parameter

* feat(chip): adjust paddings when chip has start/end content

* docs(chip): add Chip page

* feat(chip): add XML summaries

* test(chip): add tests

* chore(components): add missing XML documentation summaries

* feat(components): add new Badge component (#222)

* feat(badge): initial

* feat(badge): add badge slots

* feat(badge): add badge baseline implementation

* feat(badge): add base visual-related params

* feat(badge): add majority of badge styles

* feat(badge): add outline around badge

* feat(badge): add `Invisible` param to control badge visibility

* feat(badge): add `IsOneChar` param to make badge equilateral

* feat(badge): decrease badge dimensions if no content provided

* refactor(badge): rename `IsOneChar` param to `OneChar`

* fix(badge): use correct type for `Variant` param

* feat(badge): apply CSS classes directly to the badge slot

* fix(badge): ensure correct placement styles

* fix(badge): correct `Content` check condition

* fix(badge): allow null for content

* fix(badge): properly render Content as RenderFragment

* docs(badge): add Badge docs page

* test(badge): add tests

* test(badge): add more tests

* fix(badge): ensure `OneChar` param is taken into account

* fix(badge): fix one char switch

* chore: apply CodeRabbit suggestions

* build(deps): bump requests from 2.32.0 to 2.32.4 in /scripts (#219)

Bumps [requests](https://github.com/psf/requests) from 2.32.0 to 2.32.4.
- [Release notes](https://github.com/psf/requests/releases)
- [Changelog](https://github.com/psf/requests/blob/main/HISTORY.md)
- [Commits](psf/requests@v2.32.0...v2.32.4)

---
updated-dependencies:
- dependency-name: requests
  dependency-version: 2.32.4
  dependency-type: direct:production
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* feat(components): add Tooltip component (#224)

* feat(tooltip): initial

* refactor(popover): introduce PopoverWrapper to simplify open state

* fix(popover): ensure arrow is positioned correctly

* fix(popover): ensure popover closes on trigger click if already opened

* fix(popover): position flicker

* test(popover/dropdown): adjust tests

* refactor(popover): remove LastShown meta from popover service

* feat(tooltip): add baseline implementation

* feat(tooltip): add common visual-related parameters to pass into popover

* feat(tooltip): add OpenDelay and CloseDelay params

* docs(tooltip): add Tooltip page

* feat(tooltip): pass slots to popover

* chore(popover): add full radius styles

* test(tooltip): add tests

* docs(tooltip): minor tweaks

* docs(tooltip): typo

* feat(components): add Alert component (#225)

* feat(alert): add baseline implementation

* feat(alert): add styles (may be not complete)

* feat(alert): complete styles

* feat(button): add full radius styles

* feat(alert): apply styles

* feat(alert): add close button handler

* chore(alert): complete XML docs summaries

* chore(docs): adjust background colors for preview and toolbar

* chore(components): darken text color for warning flat variant

* chore(alert): styling tweaks

* feat(docs): add Alert page

* chore(alert): add missing close-button slot attribute

* chore(alert): ensure TitleContent takes precedence over Title

* docs(alert): add callout regarding Title and TitleContent parameters usage

* test(alert): add tests

* fix(theme): add tw custom CSS class-based dark mode variant (#226)

* 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

* feat(theme): introduce a mechanism to toggle light/dark modes (#230)

* feat(theme): introduce Theme service to manage and persist theme settings (JS)

* feat(theme): introduce Theme service to manage and persist theme settings

* docs(*): rename ComponentStatus enum to PageStatus

* docs(theming): add Dark Mode page

* chore(docs): component rename

* feat(button): add new `IconOnly` parameter

* docs(button): add demo for `IconOnly` parameter

* refactor(*): remove all bundled Google Material Icons and related code (#232)

* build: add new shared icons project

* feat(icons): add base icon component

* feat(icons): add dynamic icon component

* feat(icons): add some icons

* build(deps): reference icons in components

* refactor(accordion): use new icon components

* docs(components): use new icons in Callout components

* docs(*): use new icons

* refactor(icons): add "Icon" suffix; add more icons

* docs(*): use new icons

* test(*): fix tests

* refactor(components): remove `LumexIcon` component

* docs(datagrid): formatting

* refactor(icons): remove all Google Material Icons

* refactor(icons): remove script for downloading/updating icons

* feat(components): add dark mode support (#234)

* feat(alert): add dark mode support

* feat(button): add dark mode support

* feat(chip): add dark mode support

* feat(datagrid): add dark mode support

* feat(textbox/numbox): add dark mode support

* feat(listbox): add dark mode support

* feat(menu): add dark mode support

* feat(select): add dark mode support

* feat(tabs): add dark mode support

* fix(theme): ensure default values are of correct shade in dark mode

* feat(theme): add `color-scheme` in light theme

* fix(icons): use better icons for alert component

* docs: add dark mode support + theme toggle (#235)

* docs: add dark mode support

* docs: add missing border for the preview component

* docs: remove extra border in the preview code component

* chore(badge): improve flat variant contrast in light theme

* chore(tabs): remove `EditorRequired` attribute from `Id` param

* docs: add null check and theme class cleanup to prevent issues

* docs: remove IPopoverService injection from theme toggle component

* chore(components): remove unused / redundant types

* fix(data-grid): correct outside click handler creation

* feat(popover): enable position autoUpdate

* refactor(popover): make use of popover trigger component instead of service

* feat(dropdown): introduce dropdown trigger component instead of relying on popover service

* docs(dark-mode): update theme toggle dropdown example

* docs: add Home page with library usage examples (#241)

* feat(icons): add more icons

* docs: add showcases on home page

* chore(components): adjust some styles

* docs(overview): update paths

* chore(docs): nits

* fix(components): add missing popover js parts

* chore(docs): nits

* fix(popover): use overlay to close instead of custom outside click event

* fix(tooltip): remove pressed effect from on trigger hover

* chore(showcases): complete column visibility toggling in UserTable example

* chore(showcases): adjust legend color in usage chart

* test(popover): update tests

* chore(docs): coderabbit suggestions

* chore(*): migrate to DigitalOcean app platform

* fix(*): update custom LumexUI targets to copy theme files before build

* chore(*): add missing css files in the pack

* v2.0.0-preview.4

* perf(*): optimize fonts in docs app

* fix(docs): stylesheets import ordering

* perf(docs): optimize docs CSS output

* fix(docs): correct linux tailwind executable file name

* chore(*): delete update-icons.yml

* perf(docs): enable stream rendering on all pages

* fix(docs): ensure initial theme is set

* docs(overview): update content

* docs(installation): update content

* docs(design-tokens): update content

* docs(customization): update content

* docs(dark-mode): update content

* docs(accordion): update content

* refactor(docs): replace `Callout` with `LumexAlert`

* docs(avatar): update content

* docs(components): replace `Code` component usages with HTML tag

* fix(docs): ensure ThemeSelector sets correct theme value on init

* docs(landing): make adaptive

* docs(customization): add dark mode for global theme sample

* refactor(components): remove deprecated `Root` slot

* refactor(utils): remove redundant; update access modifiers

* docs(card): update slot names

* refactor(docs): make stream rendering global

* docs(header): remove active state from links; update stars counter

* ci(*): remove deploy.yml

* ci: run build-test on PR to main

* v2.0.0

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Feature]: Implement Dark Mode and toggle on the documentation site

1 participant