From 3708bc26e16bf0671bee985e60fdd4c1eb2916be Mon Sep 17 00:00:00 2001 From: desmondinho <68395709+desmondinho@users.noreply.github.com> Date: Tue, 4 Mar 2025 21:03:00 +0200 Subject: [PATCH] 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 `` 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 --- .github/workflows/build-test.yml | 19 +- .github/workflows/deploy.yml | 6 +- .gitignore | 1 + .../Components/CodeSnippet.razor | 2 +- .../Components/ColorSwatches.razor | 9 +- .../Components/ComponentLinks.razor | 26 +- .../Components/DocsApiSection.razor | 2 +- .../Components/DocsSection.razor | 2 +- .../Components/InstallationSteps.razor | 2 +- .../Layouts/InstallationLayout.razor | 11 +- .../Components/NavItemBadge.razor | 2 +- .../Components/Preview.razor | 2 +- .../Components/PreviewCode.razor | 2 +- .../Components/PreviewCode.razor.cs | 4 +- .../Components/QuickLink.razor | 2 +- docs/LumexUI.Docs.Client/Pages/Api/Api.razor | 6 +- .../Accordion/Examples/StartContent.razor | 6 +- .../Card/Examples/CustomStyles.razor | 2 +- .../DataGrid/Examples/Editing.razor | 4 +- .../DataGrid/Examples/MultipleSelection.razor | 36 +- .../DataGrid/Examples/Shadows.razor | 33 +- .../DataGrid/Examples/SingleSelection.razor | 36 +- .../DataGrid/Examples/_HeaderContent.razor | 5 +- .../DataGrid/Examples/_Radius.razor | 33 +- .../Divider/Examples/CustomStyles.razor | 2 +- .../Components/Divider/Examples/Usage.razor | 2 +- .../Divider/Examples/_Orientation.razor | 2 +- .../Dropdown/Examples/ColorsVariants.razor | 3 +- .../Dropdown/Examples/CustomStyles.razor | 2 +- .../Listbox/Examples/ColorsVariants.razor | 48 +- .../Listbox/Examples/CustomStyles.razor | 4 +- .../Listbox/Examples/Description.razor | 2 +- .../Listbox/Examples/Disabled.razor | 2 +- .../Listbox/Examples/DisabledItems.razor | 2 +- .../Listbox/Examples/EmptyContent.razor | 2 +- .../Listbox/Examples/StartEndContent.razor | 2 +- .../Examples/TwoWayDataBindingMultiple.razor | 2 +- .../Examples/TwoWayDataBindingSingle.razor | 2 +- .../Components/Listbox/Examples/Usage.razor | 2 +- .../Pages/Components/Navbar/Navbar.razor | 5 - .../Navbar/PreviewCodes/Blurred.razor | 2 +- .../Navbar/PreviewCodes/Bordered.razor | 2 +- .../Navbar/PreviewCodes/Brand.razor | 2 +- .../Navbar/PreviewCodes/CustomStyles.razor | 2 +- .../Navbar/PreviewCodes/Height.razor | 2 +- .../Navbar/PreviewCodes/MaxWidth.razor | 2 +- .../Components/Navbar/PreviewCodes/Menu.razor | 2 +- .../Navbar/PreviewCodes/Sticky.razor | 2 +- .../Navbar/PreviewCodes/Usage.razor | 2 +- .../Numbox/Examples/StartEndContent.razor | 2 +- .../Pages/Components/Numbox/Numbox.razor | 1 + .../Select/Examples/CustomStyles.razor | 2 +- .../Select/Examples/Description.razor | 2 +- .../Select/Examples/ItemStartEndContent.razor | 2 +- .../Components/Select/Examples/_Radius.razor | 4 +- .../Switch/Examples/CustomStyles.razor | 2 +- .../Pages/Customization/Colors.razor | 11 +- .../Pages/Customization/Theme.razor | 33 +- .../Pages/Getting Started/Installation.razor | 24 +- .../Pages/Getting Started/Overview.razor | 12 +- .../Customization/Colors/colorsCommon.html | 2 +- .../Colors/colorsCommonScale.html | 22 +- .../Customization/Colors/colorsSemantic.html | 2 +- .../Colors/colorsSemanticCustom.html | 49 - .../Customize Theme/customizeThemeColors.html | 2 +- .../Installation/installationConfig.html | 15 +- .../Installation/installationFiles.html | 21 +- .../Installation/installationServices.html | 1 + docs/LumexUI.Docs/Components/App.razor | 5 +- docs/LumexUI.Docs/Directory.Build.props | 5 + docs/LumexUI.Docs/Directory.Build.targets | 11 + docs/LumexUI.Docs/LumexUI.Docs.csproj | 48 +- docs/LumexUI.Docs/Styles/fonts.css | 2 +- docs/LumexUI.Docs/Styles/globals.css | 58 +- docs/LumexUI.Docs/Styles/typography.css | 37 + docs/LumexUI.Docs/package-lock.json | 1434 ----------------- docs/LumexUI.Docs/package.json | 12 - docs/LumexUI.Docs/tailwind.config.js | 71 - .../Navbar/LumexNavbarMenuToggle.razor | 4 +- .../Providers/LumexThemeProvider.razor.cs | 21 +- src/LumexUI/LumexUI.csproj | 11 +- src/LumexUI/LumexUI.targets | 20 + src/LumexUI/Scripts/Plugin/animations.js | 28 - src/LumexUI/Scripts/Plugin/plugin.js | 211 --- src/LumexUI/Scripts/Plugin/scrollbar-hide.js | 22 - src/LumexUI/Scripts/Plugin/transitions.js | 37 - src/LumexUI/Styles/Accordion.cs | 3 +- src/LumexUI/Styles/Button.cs | 11 +- src/LumexUI/Styles/Checkbox.cs | 22 +- src/LumexUI/Styles/DataGrid.cs | 20 +- src/LumexUI/Styles/InputField.cs | 56 +- src/LumexUI/Styles/Menu.cs | 3 +- src/LumexUI/Styles/Navbar.cs | 6 +- src/LumexUI/Styles/Popover.cs | 4 +- src/LumexUI/Styles/Radio.cs | 2 +- src/LumexUI/Styles/Select.cs | 69 +- src/LumexUI/Styles/Switch.cs | 6 +- src/LumexUI/Styles/Tabs.cs | 4 +- src/LumexUI/Styles/Utils.cs | 6 +- src/LumexUI/Styles/_theme.css | 212 +++ src/LumexUI/Theme/Colors/Colors.cs | 926 +++++------ src/LumexUI/Utilities/ColorUtils.cs | 142 +- src/LumexUI/package.json | 4 +- src/LumexUI/rollup.config.mjs | 14 +- .../Providers/ThemeProviderTests.cs | 269 ++-- 105 files changed, 1297 insertions(+), 3083 deletions(-) delete mode 100644 docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsSemanticCustom.html create mode 100644 docs/LumexUI.Docs/Directory.Build.props create mode 100644 docs/LumexUI.Docs/Directory.Build.targets create mode 100644 docs/LumexUI.Docs/Styles/typography.css delete mode 100644 docs/LumexUI.Docs/package-lock.json delete mode 100644 docs/LumexUI.Docs/package.json delete mode 100644 docs/LumexUI.Docs/tailwind.config.js create mode 100644 src/LumexUI/LumexUI.targets delete mode 100644 src/LumexUI/Scripts/Plugin/animations.js delete mode 100644 src/LumexUI/Scripts/Plugin/plugin.js delete mode 100644 src/LumexUI/Scripts/Plugin/scrollbar-hide.js delete mode 100644 src/LumexUI/Scripts/Plugin/transitions.js create mode 100644 src/LumexUI/Styles/_theme.css diff --git a/.github/workflows/build-test.yml b/.github/workflows/build-test.yml index a690df68..9c969dda 100644 --- a/.github/workflows/build-test.yml +++ b/.github/workflows/build-test.yml @@ -1,30 +1,29 @@ - name: Build and Test on: pull_request: branches: - - main + - dev paths: - - 'docs/**' - - 'src/**' - - 'tests/**' + - "docs/**" + - "src/**" + - "tests/**" jobs: build-test: runs-on: ubuntu-latest - + steps: - name: Checkout repository uses: actions/checkout@v4 - + - name: Setup .NET Core uses: actions/setup-dotnet@v4 with: - dotnet-version: | + dotnet-version: | 8.0.x 9.0.x - + - name: Restore run: dotnet restore @@ -36,5 +35,5 @@ jobs: - name: Upload coverage reports to Codecov uses: codecov/codecov-action@v4 - env: + env: CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }} diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 5b1b4610..bfe623b9 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -6,7 +6,7 @@ name: Deploy to Azure Web App on: push: branches: - - main + - dev paths: - "docs/**" workflow_dispatch: @@ -41,7 +41,7 @@ jobs: runs-on: ubuntu-latest needs: build environment: - name: "Production" + name: "staging" url: ${{ steps.deploy-to-webapp.outputs.webapp-url }} permissions: id-token: write #This is required for requesting the JWT @@ -64,5 +64,5 @@ jobs: uses: azure/webapps-deploy@v3 with: app-name: "lumexui" - slot-name: "Production" + slot-name: "staging" package: . diff --git a/.gitignore b/.gitignore index 195f1ba2..a092b4d4 100644 --- a/.gitignore +++ b/.gitignore @@ -405,3 +405,4 @@ FodyWeavers.xsd /src/LumexUI/**/dist /docs/LumexUI.Docs/**/*/css +/docs/LumexUI.Docs/*.exe diff --git a/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor b/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor index 2c246ea5..bf3fd891 100644 --- a/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor +++ b/docs/LumexUI.Docs.Client/Components/CodeSnippet.razor @@ -11,7 +11,7 @@ } -
+
@_renderCodeSnippet
diff --git a/docs/LumexUI.Docs.Client/Components/ColorSwatches.razor b/docs/LumexUI.Docs.Client/Components/ColorSwatches.razor index a392eaa6..a10fec5e 100644 --- a/docs/LumexUI.Docs.Client/Components/ColorSwatches.razor +++ b/docs/LumexUI.Docs.Client/Components/ColorSwatches.razor @@ -14,10 +14,10 @@ -
- @@ -30,11 +30,6 @@ }
- -
-
@color.Key
-
@color.Value
-
} } diff --git a/docs/LumexUI.Docs.Client/Components/ComponentLinks.razor b/docs/LumexUI.Docs.Client/Components/ComponentLinks.razor index 39aae5bb..7d606659 100644 --- a/docs/LumexUI.Docs.Client/Components/ComponentLinks.razor +++ b/docs/LumexUI.Docs.Client/Components/ComponentLinks.razor @@ -6,7 +6,7 @@ @@ -17,7 +17,7 @@ @@ -27,7 +27,7 @@ @@ -39,17 +39,13 @@ [Parameter, EditorRequired] public string ComponentName { get; set; } = default!; [Parameter] public bool IsServer { get; set; } - private RenderFragment BlazorIcon => - @ - - ; + private static readonly RenderFragment BlazorIcon = + @; - private RenderFragment GithubIcon => - @ - - ; + private static readonly RenderFragment GithubIcon = + @; } diff --git a/docs/LumexUI.Docs.Client/Components/DocsApiSection.razor b/docs/LumexUI.Docs.Client/Components/DocsApiSection.razor index da5bc01e..b702b7e5 100644 --- a/docs/LumexUI.Docs.Client/Components/DocsApiSection.razor +++ b/docs/LumexUI.Docs.Client/Components/DocsApiSection.razor @@ -14,7 +14,7 @@
  • - + @($"<{component} />") diff --git a/docs/LumexUI.Docs.Client/Components/DocsSection.razor b/docs/LumexUI.Docs.Client/Components/DocsSection.razor index 7f159662..2e0fc093 100644 --- a/docs/LumexUI.Docs.Client/Components/DocsSection.razor +++ b/docs/LumexUI.Docs.Client/Components/DocsSection.razor @@ -8,7 +8,7 @@ Color="@ThemeColor.None" Class="border-none"> @Title - + diff --git a/docs/LumexUI.Docs.Client/Components/InstallationSteps.razor b/docs/LumexUI.Docs.Client/Components/InstallationSteps.razor index 72e6e703..19f91591 100644 --- a/docs/LumexUI.Docs.Client/Components/InstallationSteps.razor +++ b/docs/LumexUI.Docs.Client/Components/InstallationSteps.razor @@ -5,7 +5,7 @@ { foreach( var step in Steps ) { -
  • +

  • @step.Title diff --git a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor index 20e817d6..ce79d2af 100644 --- a/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor +++ b/docs/LumexUI.Docs.Client/Components/Layouts/InstallationLayout.razor @@ -25,9 +25,9 @@ or later

  • - - Tailwind CSS 3.4 + Tailwind CSS 4.0 @@ -45,13 +45,6 @@
    • - - - Please be aware that LumexUI isn't fully compatible with Tailwind CSS v4.0 at this time. If this is the - version you plan on using, proceed at your own risk. More information can be found in - this Github conversation. - diff --git a/docs/LumexUI.Docs.Client/Components/NavItemBadge.razor b/docs/LumexUI.Docs.Client/Components/NavItemBadge.razor index ff8ea4f6..49b0a9fd 100644 --- a/docs/LumexUI.Docs.Client/Components/NavItemBadge.razor +++ b/docs/LumexUI.Docs.Client/Components/NavItemBadge.razor @@ -14,7 +14,7 @@ .Add( "px-1.5" ) .Add( "py-[3px]" ) .Add( "rounded-full" ) - .Add( "ring-1" ) + .Add( "ring" ) .Add( "font-semibold" ) .Add( "text-[0.5rem]" ) .Add( "uppercase" ) diff --git a/docs/LumexUI.Docs.Client/Components/Preview.razor b/docs/LumexUI.Docs.Client/Components/Preview.razor index c7d7cea3..3e6c3511 100644 --- a/docs/LumexUI.Docs.Client/Components/Preview.razor +++ b/docs/LumexUI.Docs.Client/Components/Preview.razor @@ -25,7 +25,7 @@ private readonly Slots _slots = new() { Preview = "relative flex flex-wrap items-center gap-4", - PreviewWrapper = "relative p-8 rounded-xl bg-zinc-50 ring-1 ring-foreground-950/5 not-prose", + PreviewWrapper = "relative p-8 rounded-xl bg-zinc-50 ring ring-foreground-950/5 not-prose", Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]", }; diff --git a/docs/LumexUI.Docs.Client/Components/PreviewCode.razor b/docs/LumexUI.Docs.Client/Components/PreviewCode.razor index 14b39730..ff16fe5f 100644 --- a/docs/LumexUI.Docs.Client/Components/PreviewCode.razor +++ b/docs/LumexUI.Docs.Client/Components/PreviewCode.razor @@ -25,7 +25,7 @@ - + diff --git a/docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs b/docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs index 25b008bd..9eb7c705 100644 --- a/docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs +++ b/docs/LumexUI.Docs.Client/Components/PreviewCode.razor.cs @@ -15,9 +15,9 @@ public partial class PreviewCode private string? BaseClass => ElementClass.Empty() .Add( "rounded-2xl" ) - .Add( "ring-1" ) + .Add( "ring" ) .Add( "ring-foreground-950/5" ) - .Add( "shadow-sm" ) + .Add( "shadow-xs" ) .Add( "overflow-hidden" ) .Add( Class ) .ToString(); diff --git a/docs/LumexUI.Docs.Client/Components/QuickLink.razor b/docs/LumexUI.Docs.Client/Components/QuickLink.razor index 92d3b229..2c26da12 100644 --- a/docs/LumexUI.Docs.Client/Components/QuickLink.razor +++ b/docs/LumexUI.Docs.Client/Components/QuickLink.razor @@ -18,7 +18,7 @@ @Description

    -
    +
    @code { diff --git a/docs/LumexUI.Docs.Client/Pages/Api/Api.razor b/docs/LumexUI.Docs.Client/Pages/Api/Api.razor index b1a76aeb..ad79dcfc 100644 --- a/docs/LumexUI.Docs.Client/Pages/Api/Api.razor +++ b/docs/LumexUI.Docs.Client/Pages/Api/Api.razor @@ -25,7 +25,7 @@ @if( _properties.Length > 1 ) { -
    +
    @@ -40,7 +40,7 @@ { - @@ -68,7 +68,7 @@ @if( _methods.Length > 1 ) { -
    +
    @property.Name + @GetTypeName( property.PropertyType ) @GetDescription( property )
    diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Accordion/Examples/StartContent.razor b/docs/LumexUI.Docs.Client/Pages/Components/Accordion/Examples/StartContent.razor index ab0db1bb..d56c56c2 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Accordion/Examples/StartContent.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Accordion/Examples/StartContent.razor @@ -3,7 +3,7 @@ Title="General Settings" Subtitle="Custom display, sound, privacy, connectivity, updates"> - + @@ -16,7 +16,7 @@ Title="Advanced Settings" Subtitle="Detailed system, developer, security, network, diagnostics"> - + @@ -29,7 +29,7 @@ Title="Personal Data" Subtitle="Contacts, messages, photos, account info, preferences"> - + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CustomStyles.razor index d5ddcb6d..16567b2d 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CustomStyles.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CustomStyles.razor @@ -19,7 +19,7 @@ @code { private CardSlots _classes = new() { - Root = "max-w-md py-4 rounded-3xl bg-zinc-100 shadow-[5px_5px_10px_theme(colors.zinc.200),-5px_-5px_10px_theme(colors.zinc.50)]", + Root = "max-w-md py-4 rounded-3xl bg-zinc-100 shadow-[5px_5px_10px_var(--color-zinc-200),-5px_-5px_10px_var(--color-zinc-50)]", Header = "justify-center text-center", Body = "py-0 justify-center text-center", Footer = "justify-center gap-2" diff --git a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/Editing.razor b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/Editing.razor index 54b81604..0b1defe8 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/Editing.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/Editing.razor @@ -1,4 +1,6 @@ - + diff --git a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/MultipleSelection.razor b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/MultipleSelection.razor index 9edf454a..401df0ac 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/MultipleSelection.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/MultipleSelection.razor @@ -7,22 +7,15 @@ -
    - @foreach( var color in _colors ) + + @foreach( var color in Enum.GetValues()[1..] ) { - var value = color.ToString(); - -
    - - -
    + + @color.ToString() + } -
    + @if( _selectedUsers.Count > 0 ) { @@ -46,23 +39,8 @@ new( "Diana Lee", "Moderator", "Active" ) }.AsQueryable(); - private readonly ThemeColor[] _colors = [ - ThemeColor.Default, - ThemeColor.Primary, - ThemeColor.Secondary, - ThemeColor.Success, - ThemeColor.Warning, - ThemeColor.Danger, - ThemeColor.Info - ]; - private ThemeColor _color = ThemeColor.Default; private ICollection _selectedUsers = []; - private void OnColorSelect( ThemeColor value ) - { - _color = value; - } - private record User( string Name, string Role, string Status ); } \ No newline at end of file diff --git a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/Shadows.razor b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/Shadows.razor index 9cbd4340..429c20ec 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/Shadows.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/Shadows.razor @@ -4,22 +4,15 @@     -
    - @foreach( var shadow in _shadows ) + + @foreach( var shadow in Enum.GetValues() ) { - var value = shadow.ToString(); - -
    - - -
    + + @shadow.ToString() + } -
    + @code { private readonly IQueryable _users = new List @@ -30,19 +23,7 @@ new( "Diana Lee", "Moderator", "Active" ) }.AsQueryable(); - private readonly Shadow[] _shadows = [ - Shadow.None, - Shadow.Small, - Shadow.Medium, - Shadow.Large - ]; - private Shadow _shadow = Shadow.Small; - private void OnShadowSelect( Shadow value ) - { - _shadow = value; - } - private record User( string Name, string Role, string Status ); } \ No newline at end of file diff --git a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/SingleSelection.razor b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/SingleSelection.razor index fca9adfd..4e88824d 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/SingleSelection.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/SingleSelection.razor @@ -7,22 +7,15 @@ -
    - @foreach( var color in _colors ) + + @foreach( var color in Enum.GetValues()[1..] ) { - var value = color.ToString(); - -
    - - -
    + + @color.ToString() + } -
    + @if( _selectedUsers.Count > 0 ) { @@ -46,23 +39,8 @@ new( "Diana Lee", "Moderator", "Active" ) }.AsQueryable(); - private readonly ThemeColor[] _colors = [ - ThemeColor.Default, - ThemeColor.Primary, - ThemeColor.Secondary, - ThemeColor.Success, - ThemeColor.Warning, - ThemeColor.Danger, - ThemeColor.Info - ]; - private ThemeColor _color = ThemeColor.Default; private ICollection _selectedUsers = []; - private void OnColorSelect( ThemeColor value ) - { - _color = value; - } - private record User( string Name, string Role, string Status ); } \ No newline at end of file diff --git a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/_HeaderContent.razor b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/_HeaderContent.razor index ebd426db..e290e9b2 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/_HeaderContent.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/_HeaderContent.razor @@ -14,11 +14,12 @@ Radius="@Radius.Small" Placement="@PopoverPlacement.BottomEnd"> + Color="@ThemeColor.None" + Class="text-default-500" /> -
    - @foreach( var radius in _radiuses ) + + @foreach( var radius in Enum.GetValues() ) { - var value = radius.ToString(); - -
    - - -
    + + @radius.ToString() + } -
    + @code { private readonly IQueryable _users = new List @@ -30,19 +23,7 @@ new( "Diana Lee", "Moderator", "Active" ) }.AsQueryable(); - private readonly Radius[] _radiuses = [ - Radius.None, - Radius.Small, - Radius.Medium, - Radius.Large - ]; - private Radius _radius = Radius.Small; - private void OnRadiusSelect( Radius value ) - { - _radius = value; - } - private record User( string Name, string Role, string Status ); } \ No newline at end of file diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/CustomStyles.razor index 9925c1fa..a9ce3d11 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/CustomStyles.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/CustomStyles.razor @@ -8,6 +8,6 @@
  • Art
    • + Style="--lumex-divider: var(--lumex-danger); --lumex-opacity-divider: 50%" />
  • Breaking News
    • diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/Usage.razor b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/Usage.razor index cf0fde6a..3fc147b3 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/Usage.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/Usage.razor @@ -1,4 +1,4 @@ -
    +
    RG diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/_Orientation.razor b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/_Orientation.razor index db57a12d..fe62a36a 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/_Orientation.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Divider/Examples/_Orientation.razor @@ -1,4 +1,4 @@ -
    +
    diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/ColorsVariants.razor b/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/ColorsVariants.razor index fb84af1a..bda05dda 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/ColorsVariants.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/ColorsVariants.razor @@ -28,8 +28,7 @@ }
    - @foreach( var color in Enum.GetValues()[1..] ) { diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/CustomStyles.razor index 9033efd8..d11934ec 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/CustomStyles.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Dropdown/Examples/CustomStyles.razor @@ -33,7 +33,7 @@ diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Numbox.razor b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Numbox.razor index 205ad41e..975334d3 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Numbox.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Numbox/Numbox.razor @@ -173,6 +173,7 @@ private readonly Heading[] _headings = new Heading[] { + new("Types"), new("Usage", [ new("Disabled"), new("Read-Only"), diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/CustomStyles.razor index c41213fa..5308d82b 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/CustomStyles.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/CustomStyles.razor @@ -59,8 +59,8 @@ .Add("bg-default-200/50") .Add("backdrop-blur-xl") .Add("backdrop-saturate-200") - .Add("hover:bg-default-200/70") .Add("group-data-[focus=true]:bg-default-200/85") + .Add("group-data-[focus=false]:hover:bg-default-200/70") .ToString(), }; diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/Description.razor b/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/Description.razor index 9652d2f4..fd55a81b 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/Description.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/Description.razor @@ -1,7 +1,7 @@  @foreach (var animal in _animals) { diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/ItemStartEndContent.razor b/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/ItemStartEndContent.razor index 70f1e1cc..6e406dc5 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/ItemStartEndContent.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/ItemStartEndContent.razor @@ -14,7 +14,7 @@ @code { private RenderFragment<(string Alt, string Src)> _countryFlag = flag => - @ + @ @flag.Alt ; diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/_Radius.razor b/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/_Radius.razor index 46ddfca6..67357dd0 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/_Radius.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Select/Examples/_Radius.razor @@ -1,12 +1,12 @@ 
    - @foreach (var radius in Enum.GetValues()) + @foreach( var radius in Enum.GetValues() ) {
    - @foreach (var animal in _animals) + @foreach( var animal in _animals ) { @animal.Value diff --git a/docs/LumexUI.Docs.Client/Pages/Components/Switch/Examples/CustomStyles.razor b/docs/LumexUI.Docs.Client/Pages/Components/Switch/Examples/CustomStyles.razor index a659ec40..936b8f5c 100644 --- a/docs/LumexUI.Docs.Client/Pages/Components/Switch/Examples/CustomStyles.razor +++ b/docs/LumexUI.Docs.Client/Pages/Components/Switch/Examples/CustomStyles.razor @@ -18,7 +18,7 @@ .ToString(), Wrapper = "p-0 h-4 overflow-visible", Thumb = ElementClass.Empty() - .Add( "w-6 h-6 border-2 shadow-lg" ) + .Add( "w-6 h-6 border-2 border-default-200 shadow-lg" ) .Add( "group-hover:border-primary" ) // toggled .Add( "group-data-[checked=true]:ml-6" ) diff --git a/docs/LumexUI.Docs.Client/Pages/Customization/Colors.razor b/docs/LumexUI.Docs.Client/Pages/Customization/Colors.razor index f9a66f2d..9e752e98 100644 --- a/docs/LumexUI.Docs.Client/Pages/Customization/Colors.razor +++ b/docs/LumexUI.Docs.Client/Pages/Customization/Colors.razor @@ -14,8 +14,8 @@

    - The common colors are based on the full range of the expertly-crafted - Tailwind colors, + The common colors are constants based on the full range of the expertly-crafted + Tailwind colors, providing a great starting point if you don’t have your own specific branding in mind.

    @@ -28,13 +28,6 @@     - - The common colors are not configurable. - Any changes made to the Tailwind CSS color palette in the tailwind.config.js - will not affect the C# common colors, and vice versa. - The C# Colors and Tailwind colors operate independently and do not share configuration settings. - -

    The semantic colors are designed to adapt with the theme, diff --git a/docs/LumexUI.Docs.Client/Pages/Customization/Theme.razor b/docs/LumexUI.Docs.Client/Pages/Customization/Theme.razor index 7a380c1a..28526a3f 100644 --- a/docs/LumexUI.Docs.Client/Pages/Customization/Theme.razor +++ b/docs/LumexUI.Docs.Client/Pages/Customization/Theme.razor @@ -9,7 +9,6 @@ typography, and component styles, that defines the visual appearance of a UI. It provides a consistent look and feel across all components, allowing developers to easily customize and align the UI with the app's brand identity or design preferences. - By applying a theme, you can ensure uniformity in the presentation.

    @@ -25,8 +24,8 @@

    1. C# Object for Customization

      -

      - LumexUI exports the @nameof( LumexTheme ) that allows you to +

      + LumexUI exports the @nameof( LumexTheme ) that allows you to configure colors, fonts, layout settings, and more. This approach ensures that Blazor developers can define their theme programmatically, staying within the familiar environment. @@ -37,32 +36,14 @@

    2. Extensible Tailwind CSS Configuration

      -

      +

      In addition to the C# object, LumexUI leverages Tailwind CSS for styling. The Tailwind CSS configuration is fully extensible, allowing you to build upon the base configurations set by the library. Developers can extend the default Tailwind setup to suit their specific needs, adding or modifying utility classes for more granular control over the design.

      - - Learn More - - -
      3. -
    3. -

      Custom Tailwind CSS Plugin

      -

      - To ensure seamless integration between the @nameof( LumexTheme ) - configurations and Tailwind CSS, LumexUI exports a custom Tailwind plugin. - This plugin takes the configurations defined in C# and injects them - into the Tailwind config, automatically extending it with your custom styles and settings. - This means that any C# theme adjustments you make will be reflected in your Tailwind styles, - creating a smooth and cohesive theming experience for Blazor applications. -

      - Learn More The following section assumes that you have already completed a basic setup of Tailwind CSS. If you haven't, please refer to the - official documentation @@ -95,9 +76,9 @@

      - The last step is adding the LumexUI plugin to your tailwind.config.js file. + The last step is adding the LumexUI theme file to your app.css file.

      - + diff --git a/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor b/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor index a8e85e4d..a7b2fe9e 100644 --- a/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor +++ b/docs/LumexUI.Docs.Client/Pages/Getting Started/Installation.razor @@ -10,19 +10,19 @@ { Title = "Install LumexUI", Code = new CodeBlock("Terminal", "installationPackage"), - Body = @

      Install LumexUI via terminal using .NET CLI.

      + Body = @

      Install LumexUI via terminal using .NET CLI or NuGet Package Manager.

      }, new Step() { Title = "Install Tailwind CSS", - Code = new CodeBlock("tailwind.config.js", "installationConfig"), + Code = new CodeBlock("app.css", "installationConfig"), Body = @

      - LumexUI is built on top of Tailwind CSS. To install, follow the official installation guide. Then, modify the tailwind.config.js file. + LumexUI is built on top of Tailwind CSS. To install it, follow the official installation guide. Then, modify your app CSS file. +

      +

      + Note: Using Tailwind standalone CLI is recommended if you don't need Node.js or npm.

      - - Note: the PATH_TO_NUGET is the NuGet package path on the machine. -       }, new Step() @@ -38,22 +38,10 @@ Body = @

      Include the mandatory static files into the @("") and the @("").

      }, new Step() - { - Title = "Import library's namespace", - Code = new CodeBlock("_Imports.razor", "installationImport"), - Body = @

      Modify _Imports.razor file to easily access components throughout your app.

      - }, - new Step() { Title = "Setup theme provider", Code = new CodeBlock("MainLayout.razor", "installationThemeProvider"), Body = @

      Add the LumexThemeProvider into your MainLayout.razor file to enable theming.

      - }, - new Step() - { - Title = "Use the components", - Code = new CodeBlock("Index.razor", "installationUsage"), - Body = @

      Now you are all set up to start using LumexUI components in your app!

      } }; } diff --git a/docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor b/docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor index c2211cde..abb71294 100644 --- a/docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor +++ b/docs/LumexUI.Docs.Client/Pages/Getting Started/Overview.razor @@ -17,23 +17,17 @@

      We drew inspiration from - - NextUI + HeroUI , a React component library, in shaping the foundational ideas behind LumexUI. - NextUI’s approach to using Tailwind CSS, its elegant design, + HeroUI’s approach to using Tailwind CSS, its elegant design, and robust customization system greatly influenced us. Our goal is to bring these same principles to the Blazor ecosystem, making them accessible to developers who prefer Blazor for their projects.

      - - - This project is currently in the development stage, - and we welcome contributions from the community to help improve and expand the library. - Your feedback and involvement are crucial as we continue to evolve and refine the components. -       diff --git a/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsCommon.html b/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsCommon.html index 403c8521..82a11cf9 100644 --- a/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsCommon.html +++ b/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsCommon.html @@ -1,2 +1,2 @@ -
      var blue = Colors.Blue["500"]; // #3b82f6
+
      var blue = Colors.Blue["500"]; // oklch(0.623 0.214 259.815)
 
      
diff --git a/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsCommonScale.html b/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsCommonScale.html
index 399096ed..ae91b3e3 100644
--- a/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsCommonScale.html
+++ b/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsCommonScale.html
@@ -3,16 +3,16 @@
 /// </summary>
 public readonly static Dictionary<string, string> Blue = new()
 {
-    ["50"] = "#eff6ff",
-    ["100"] = "#dbeafe",
-    ["200"] = "#bfdbfe",
-    ["300"] = "#93c5fd",
-    ["400"] = "#60a5fa",
-    ["500"] = "#3b82f6",
-    ["600"] = "#2563eb",
-    ["700"] = "#1d4ed8",
-    ["800"] = "#1e40af",
-    ["900"] = "#1e3a8a",
-    ["950"] = "#172554"
+    ["50"] = "oklch(0.97 0.014 254.604)",
+    ["100"] = "oklch(0.932 0.032 255.585)",
+    ["200"] = "oklch(0.882 0.059 254.128)",
+    ["300"] = "oklch(0.809 0.105 251.813)",
+    ["400"] = "oklch(0.707 0.165 254.624)",
+    ["500"] = "oklch(0.623 0.214 259.815)",
+    ["600"] = "oklch(0.546 0.245 262.881)",
+    ["700"] = "oklch(0.488 0.243 264.376)",
+    ["800"] = "oklch(0.424 0.199 265.638)",
+    ["900"] = "oklch(0.379 0.146 265.522)",
+    ["950"] = "oklch(0.282 0.091 267.935)"
 };
      diff --git a/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsSemantic.html b/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsSemantic.html index 4ebb6e08..75b3233c 100644 --- a/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsSemantic.html +++ b/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsSemantic.html @@ -1,2 +1,2 @@ -
      var primary = SemanticColors.Light.Primary["500"]; // #3b82f6
+
      var primary = SemanticColors.Light.Primary["500"]; // oklch(0.623 0.214 259.815)
 
      
diff --git a/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsSemanticCustom.html b/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsSemanticCustom.html
deleted file mode 100644
index cb4ba4cc..00000000
--- a/docs/LumexUI.Docs.Client/Samples/Customization/Colors/colorsSemanticCustom.html
+++ /dev/null
@@ -1,49 +0,0 @@
-
      public record MyTheme : LumexTheme
-{
-    public MyTheme()
-    {
-        Light = new ThemeConfigLight()
-        {
-            Colors = new ThemeColorsLight()
-            {
-                //  ["default"] = "#ffffff"
-                Background = new ColorScale( defaultColor: Colors.White ),
-
-                /*
-                 *  ["50...950"] => The slate color scale
-                 *  ["default"] => The slate color '700'
-                 *  ["foreground"] => A readable color against the "default"
-                 */
-                Foreground = new ColorScale( colors: Colors.Slate, defaultKey: "700" ),
-
-                /*
-                 *  ["50...950"] => The orange color scale
-                 *  ["default"] => The orange color '600'
-                 *  ["foreground"] => The black color
-                 */
-                Primary = [
-                    .. Colors.Orange,
-                    new("default", Colors.Orange["600"]), // KeyValuePair<string, string>
-                    new("foreground", Colors.Black),
-                ],
-                // ... rest of the colors
-            }
-        };
-
-        Dark = new ThemeConfigDark()
-        {
-            Colors = new ThemeColorsDark()
-            {
-                Background = new ColorScale( defaultColor: Colors.Slate["900"] ),
-                Foreground = new ColorScale( colors: Colors.Slate, defaultKey: "200" ),
-                Primary = [
-                    .. Colors.Orange,
-                    new("default", Colors.Orange["400"]),
-                    new("foreground", Colors.White),
-                ],
-                // ... rest of the colors
-            }
-        };
-    }
-}
-
      
diff --git a/docs/LumexUI.Docs.Client/Samples/Customization/Customize Theme/customizeThemeColors.html b/docs/LumexUI.Docs.Client/Samples/Customization/Customize Theme/customizeThemeColors.html
index ffd4063c..a00c8a2d 100644
--- a/docs/LumexUI.Docs.Client/Samples/Customization/Customize Theme/customizeThemeColors.html	
+++ b/docs/LumexUI.Docs.Client/Samples/Customization/Customize Theme/customizeThemeColors.html	
@@ -7,7 +7,7 @@
             Colors = new ThemeColorsLight()
             {
                 Primary = new ColorScale( Colors.Orange ),
-                Focus = new ColorScale( Colors.Orange["500"] ) // #f97316
+                Focus = new ColorScale( Colors.Orange["500"] ) // oklch(0.705 0.213 47.604)
             }
         };
     }
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationConfig.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationConfig.html
index f84a8d30..ffe01102 100644
--- a/docs/LumexUI.Docs.Client/Samples/Installation/installationConfig.html
+++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationConfig.html
@@ -1,14 +1,5 @@
-
      const lumexui = require("{PATH_TO_NUGET}/theme/plugin");
+
      @import "tailwindcss";
+@import "../bin/lumexui/theme"; /* theme file */
 
-/** @type {import("tailwindcss").Config} */
-module.exports = {
-    content: [
-        // ...
-        "{PATH_TO_NUGET}/theme/components/*.cs"
-    ],
-    theme: {
-        extend: {},
-    },
-    plugins: [lumexui],
-};
+@source "../bin/lumexui/*.cs"; /* components styles */
 
      
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationFiles.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationFiles.html
index f17521e3..0143f296 100644
--- a/docs/LumexUI.Docs.Client/Samples/Installation/installationFiles.html
+++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationFiles.html
@@ -1,13 +1,12 @@
 
      <!DOCTYPE html>
-   <html>
-   <head>
-       <meta charset="utf-8" />
-       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-       <link href="output.css" rel="stylesheet" />
-   </head>
-   <body>
-       <script src="_content/LumexUI/js/LumexUI.js" type="module"></script>
-       <!-- Blazor framework assets -->
-   </body>
-   </html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link href="app.css" rel="stylesheet" />
+</head>
+<body>
+    <script src="_content/LumexUI/js/LumexUI.js" type="module"></script>
+</body>
+</html>
 
      
diff --git a/docs/LumexUI.Docs.Client/Samples/Installation/installationServices.html b/docs/LumexUI.Docs.Client/Samples/Installation/installationServices.html
index 9282197b..947a9b74 100644
--- a/docs/LumexUI.Docs.Client/Samples/Installation/installationServices.html
+++ b/docs/LumexUI.Docs.Client/Samples/Installation/installationServices.html
@@ -1,4 +1,5 @@
 
      using LumexUI.Extensions;
 
+// ...
 builder.Services.AddLumexServices();
 
      
diff --git a/docs/LumexUI.Docs/Components/App.razor b/docs/LumexUI.Docs/Components/App.razor
index 8651661e..274956bf 100644
--- a/docs/LumexUI.Docs/Components/App.razor
+++ b/docs/LumexUI.Docs/Components/App.razor
@@ -5,14 +5,15 @@
     
     
     
-    
+    @*  *@
+    
     
     LumexUI - A versatile Blazor UI library built using Tailwind CSS
     
 
 
 
-    
      
+    
      
         
     
      
 
diff --git a/docs/LumexUI.Docs/Directory.Build.props b/docs/LumexUI.Docs/Directory.Build.props
new file mode 100644
index 00000000..84c46c99
--- /dev/null
+++ b/docs/LumexUI.Docs/Directory.Build.props
@@ -0,0 +1,5 @@
+
+	
+		$(MSBuildThisFileDirectory)../../
+	
+
\ No newline at end of file
diff --git a/docs/LumexUI.Docs/Directory.Build.targets b/docs/LumexUI.Docs/Directory.Build.targets
new file mode 100644
index 00000000..0c53f3ab
--- /dev/null
+++ b/docs/LumexUI.Docs/Directory.Build.targets
@@ -0,0 +1,11 @@
+
+	
+		
+			
+		
+		
+		
+	
+
\ No newline at end of file
diff --git a/docs/LumexUI.Docs/LumexUI.Docs.csproj b/docs/LumexUI.Docs/LumexUI.Docs.csproj
index 66d96593..205b191d 100644
--- a/docs/LumexUI.Docs/LumexUI.Docs.csproj
+++ b/docs/LumexUI.Docs/LumexUI.Docs.csproj
@@ -6,10 +6,6 @@
 		enable
 	
 
-	
-		$(MSBuildThisFileDirectory)../../
-	
-
 	
 		dotnet run -c Release --project "$(SolutionDir)docs/LumexUI.Docs.Generator/LumexUI.Docs.Generator.csproj"
 	
@@ -27,29 +23,33 @@
 	
 		
 	
-	
-	
-	
-		
-		
-	
 
-	
-	
-		
-		
+	
+	
+		
+			
+			https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-windows-x64.exe
+			tailwindcss-windows-x64.exe
+
+			
+			https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64
+			tailwindcss-linux-x64
+		
+
+		
+		
+		
+		
+		
+
+		
+		
+		
 	
 
-	
-	
-		
-		
+	
+		
+		
 	
 
-	
-	
-		
-		
-	
-
 
diff --git a/docs/LumexUI.Docs/Styles/fonts.css b/docs/LumexUI.Docs/Styles/fonts.css
index 981b1fc3..3fdc7e73 100644
--- a/docs/LumexUI.Docs/Styles/fonts.css
+++ b/docs/LumexUI.Docs/Styles/fonts.css
@@ -1,6 +1,6 @@
 @font-face {
     font-family: 'Inter var';
-    font-weight: 100 900;
+    font-weight: 300 900;
     font-display: block;
     font-style: normal;
     src: url(/assets/fonts/Inter-VariableFont_slnt,wght.ttf) format("truetype") tech(variations), 
diff --git a/docs/LumexUI.Docs/Styles/globals.css b/docs/LumexUI.Docs/Styles/globals.css
index 3b5d44e8..e6c8c65f 100644
--- a/docs/LumexUI.Docs/Styles/globals.css
+++ b/docs/LumexUI.Docs/Styles/globals.css
@@ -1,29 +1,49 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@import "tailwindcss" theme(static);
+@import "../bin/lumexui/_theme";
+@import "./prism" layer(components);
+@import "./blazor" layer(components);
+@import "./typography" layer(utilities);
+@import "./fonts";
 
-@import 'blazor.css';
-@import 'prism.css';
-@import 'fonts.css';
+@source "../../LumexUI.Docs.Client/{Pages,Components}/**/*.{razor,razor.cs}"; /* docs */
+@source "../bin/lumexui/*.cs"; /* components */
+
+@plugin "@tailwindcss/typography";
+
+@theme {
+    --font-sans: Inter var, system-ui;
+    --font-sans--font-feature-settings: "cv02", "cv03", "cv04", "cv11";
+    --font-mono: Fira Code var, ui-monospace;
+}
+
+@custom-variant scrollbar (&::-webkit-scrollbar);
+@custom-variant scrollbar-track (&::-webkit-scrollbar-track);
+@custom-variant scrollbar-thumb (&::-webkit-scrollbar-thumb);
 
 .dark {
     color-scheme: dark;
 }
 
-html {
-    height: 100%;
+.light {
+    color-scheme: light;
 }
 
-body {
-    min-height: 100%;
+.scrollbar {
+    @apply 
+        scrollbar:h-2 
+        scrollbar:w-2 
+        scrollbar-thumb:rounded-sm
+        scrollbar-thumb:bg-foreground-200 
+        scrollbar-track:rounded-sm
+        scrollbar-track:bg-foreground-100;
 }
 
-@layer utilities {
-    .bordered-link {
-        @apply font-semibold leading-tight text-current border-b border-current hover:border-b-2;
-    }
-
-    .scrollbar {
-        @apply scrollbar:h-2 scrollbar:w-2 scrollbar-thumb:rounded scrollbar-thumb:bg-foreground-200 scrollbar-track:rounded scrollbar-track:bg-foreground-100;
-    }
-}
\ No newline at end of file
+.bordered-link {
+    @apply 
+        font-semibold 
+        leading-tight 
+        text-current 
+        border-b 
+        border-current 
+        hover:border-b-2;
+}
diff --git a/docs/LumexUI.Docs/Styles/typography.css b/docs/LumexUI.Docs/Styles/typography.css
new file mode 100644
index 00000000..e2400236
--- /dev/null
+++ b/docs/LumexUI.Docs/Styles/typography.css
@@ -0,0 +1,37 @@
+/* Visual Studio does not support modern CSS nesting yet. */
+
+.prose {
+    max-width: none;
+}
+
+    .prose :is(h2, h3, h4):where(:not(.not-prose, .not-prose *)) {
+        scroll-margin-top: var(--scroll-mt);
+    }
+
+    .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)) {
+        font-weight: var(--font-weight-semibold);
+    }
+
+    .prose a:not(:where(:is(h2, h3, h4) *)):where(:not(.not-prose, .not-prose *)) {
+        color: var(--tw-prose-links);
+        font-weight: var(--font-weight-semibold);
+        text-decoration: underline;
+        text-underline-offset: 3px;
+        text-decoration-color: var(--color-orange-400);
+        text-decoration-thickness: 1px;
+    }
+
+    .prose a:hover:where(:not(.not-prose, .not-prose *)) {
+        text-decoration-thickness: 2px;
+    }
+
+    .prose pre:where(:not(.not-prose, .not-prose *)) {
+        display: flex;
+        padding: --spacing(5);
+        color: var(--color-zinc-100);
+    }
+
+    .prose :where(code[class]):not(:where([class~=not-prose],[class~=not-prose] *)):before,
+    .prose :where(code[class]):not(:where([class~=not-prose],[class~=not-prose] *)):after {
+        content: none;
+    }
diff --git a/docs/LumexUI.Docs/package-lock.json b/docs/LumexUI.Docs/package-lock.json
deleted file mode 100644
index 0bebb68e..00000000
--- a/docs/LumexUI.Docs/package-lock.json
+++ /dev/null
@@ -1,1434 +0,0 @@
-{
-  "name": "lumexui.docs",
-  "lockfileVersion": 3,
-  "requires": true,
-  "packages": {
-    "": {
-      "name": "lumexui.docs",
-      "devDependencies": {
-        "@tailwindcss/typography": "^0.5.15",
-        "tailwindcss": "^3.4.10"
-      }
-    },
-    "node_modules/@alloc/quick-lru": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
-      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/@isaacs/cliui": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",
-      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
-      "dev": true,
-      "dependencies": {
-        "string-width": "^5.1.2",
-        "string-width-cjs": "npm:string-width@^4.2.0",
-        "strip-ansi": "^7.0.1",
-        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
-        "wrap-ansi": "^8.1.0",
-        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
-      },
-      "engines": {
-        "node": ">=12"
-      }
-    },
-    "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
-      "integrity": "sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
-        "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/resolve-uri": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
-      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
-    "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
-      "dev": true
-    },
-    "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/resolve-uri": "^3.1.0",
-        "@jridgewell/sourcemap-codec": "^1.4.14"
-      }
-    },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
-      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "2.0.5",
-        "run-parallel": "^1.1.9"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
-      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
-      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.scandir": "2.1.5",
-        "fastq": "^1.6.0"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/@pkgjs/parseargs": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
-      "integrity": "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==",
-      "dev": true,
-      "optional": true,
-      "engines": {
-        "node": ">=14"
-      }
-    },
-    "node_modules/@tailwindcss/typography": {
-      "version": "0.5.15",
-      "resolved": "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz",
-      "integrity": "sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==",
-      "dev": true,
-      "dependencies": {
-        "lodash.castarray": "^4.4.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.merge": "^4.6.2",
-        "postcss-selector-parser": "6.0.10"
-      },
-      "peerDependencies": {
-        "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20"
-      }
-    },
-    "node_modules/@tailwindcss/typography/node_modules/postcss-selector-parser": {
-      "version": "6.0.10",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
-      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
-      "dev": true,
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/ansi-regex": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz",
-      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
-      }
-    },
-    "node_modules/ansi-styles": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
-      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
-      "dev": true,
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/any-promise": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
-      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
-      "dev": true
-    },
-    "node_modules/anymatch": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
-      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
-      "dev": true,
-      "dependencies": {
-        "normalize-path": "^3.0.0",
-        "picomatch": "^2.0.4"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/arg": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
-      "dev": true
-    },
-    "node_modules/balanced-match": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
-      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
-      "dev": true
-    },
-    "node_modules/binary-extensions": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
-      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/brace-expansion": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz",
-      "integrity": "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==",
-      "dev": true,
-      "dependencies": {
-        "balanced-match": "^1.0.0"
-      }
-    },
-    "node_modules/braces": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
-      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
-      "dependencies": {
-        "fill-range": "^7.1.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/camelcase-css": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
-      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/chokidar": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
-      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
-      "dev": true,
-      "dependencies": {
-        "anymatch": "~3.1.2",
-        "braces": "~3.0.2",
-        "glob-parent": "~5.1.2",
-        "is-binary-path": "~2.1.0",
-        "is-glob": "~4.0.1",
-        "normalize-path": "~3.0.0",
-        "readdirp": "~3.6.0"
-      },
-      "engines": {
-        "node": ">= 8.10.0"
-      },
-      "funding": {
-        "url": "https://paulmillr.com/funding/"
-      },
-      "optionalDependencies": {
-        "fsevents": "~2.3.2"
-      }
-    },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/color-convert": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
-      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
-      "dev": true,
-      "dependencies": {
-        "color-name": "~1.1.4"
-      },
-      "engines": {
-        "node": ">=7.0.0"
-      }
-    },
-    "node_modules/color-name": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
-      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
-      "dev": true
-    },
-    "node_modules/commander": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
-      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/cross-spawn": {
-      "version": "7.0.3",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-      "dev": true,
-      "dependencies": {
-        "path-key": "^3.1.0",
-        "shebang-command": "^2.0.0",
-        "which": "^2.0.1"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/cssesc": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
-      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
-      "dev": true,
-      "bin": {
-        "cssesc": "bin/cssesc"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/didyoumean": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
-      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
-      "dev": true
-    },
-    "node_modules/dlv": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
-      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
-      "dev": true
-    },
-    "node_modules/eastasianwidth": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
-      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
-      "dev": true
-    },
-    "node_modules/emoji-regex": {
-      "version": "9.2.2",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
-      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
-      "dev": true
-    },
-    "node_modules/fast-glob": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
-      "integrity": "sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==",
-      "dev": true,
-      "dependencies": {
-        "@nodelib/fs.stat": "^2.0.2",
-        "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.2",
-        "merge2": "^1.3.0",
-        "micromatch": "^4.0.4"
-      },
-      "engines": {
-        "node": ">=8.6.0"
-      }
-    },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/fastq": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz",
-      "integrity": "sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==",
-      "dev": true,
-      "dependencies": {
-        "reusify": "^1.0.4"
-      }
-    },
-    "node_modules/fill-range": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
-      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
-      "dependencies": {
-        "to-regex-range": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/foreground-child": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz",
-      "integrity": "sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==",
-      "dev": true,
-      "dependencies": {
-        "cross-spawn": "^7.0.0",
-        "signal-exit": "^4.0.1"
-      },
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/fsevents": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
-      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
-    "node_modules/function-bind": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
-      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/glob": {
-      "version": "10.4.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
-      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
-      "dev": true,
-      "dependencies": {
-        "foreground-child": "^3.1.0",
-        "jackspeak": "^3.1.2",
-        "minimatch": "^9.0.4",
-        "minipass": "^7.1.2",
-        "package-json-from-dist": "^1.0.0",
-        "path-scurry": "^1.11.1"
-      },
-      "bin": {
-        "glob": "dist/esm/bin.mjs"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/glob-parent": {
-      "version": "6.0.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.3"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/hasown": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
-      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
-      "dependencies": {
-        "function-bind": "^1.1.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      }
-    },
-    "node_modules/is-binary-path": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
-      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
-      "dev": true,
-      "dependencies": {
-        "binary-extensions": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-core-module": {
-      "version": "2.15.1",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.15.1.tgz",
-      "integrity": "sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==",
-      "dev": true,
-      "dependencies": {
-        "hasown": "^2.0.2"
-      },
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/is-extglob": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-fullwidth-code-point": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
-      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/is-glob": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
-      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
-      "dependencies": {
-        "is-extglob": "^2.1.1"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/is-number": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
-      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.12.0"
-      }
-    },
-    "node_modules/isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true
-    },
-    "node_modules/jackspeak": {
-      "version": "3.4.3",
-      "resolved": "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz",
-      "integrity": "sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==",
-      "dev": true,
-      "dependencies": {
-        "@isaacs/cliui": "^8.0.2"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      },
-      "optionalDependencies": {
-        "@pkgjs/parseargs": "^0.11.0"
-      }
-    },
-    "node_modules/jiti": {
-      "version": "1.21.6",
-      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.6.tgz",
-      "integrity": "sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==",
-      "dev": true,
-      "bin": {
-        "jiti": "bin/jiti.js"
-      }
-    },
-    "node_modules/lilconfig": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
-      "integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/lines-and-columns": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
-      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
-      "dev": true
-    },
-    "node_modules/lodash.castarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz",
-      "integrity": "sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==",
-      "dev": true
-    },
-    "node_modules/lodash.isplainobject": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz",
-      "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==",
-      "dev": true
-    },
-    "node_modules/lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
-    },
-    "node_modules/lru-cache": {
-      "version": "10.4.3",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
-      "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
-      "dev": true
-    },
-    "node_modules/merge2": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
-      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/micromatch": {
-      "version": "4.0.8",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
-      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
-      "dependencies": {
-        "braces": "^3.0.3",
-        "picomatch": "^2.3.1"
-      },
-      "engines": {
-        "node": ">=8.6"
-      }
-    },
-    "node_modules/minimatch": {
-      "version": "9.0.5",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
-      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
-      "dev": true,
-      "dependencies": {
-        "brace-expansion": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
-      "dev": true,
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/mz": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
-      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0",
-        "object-assign": "^4.0.1",
-        "thenify-all": "^1.0.0"
-      }
-    },
-    "node_modules/nanoid": {
-      "version": "3.3.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "bin": {
-        "nanoid": "bin/nanoid.cjs"
-      },
-      "engines": {
-        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
-      }
-    },
-    "node_modules/normalize-path": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
-      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/object-hash": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
-      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/package-json-from-dist": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.0.tgz",
-      "integrity": "sha512-dATvCeZN/8wQsGywez1mzHtTlP22H8OEfPrVMLNr4/eGa+ijtLn/6M5f0dY8UKNrC2O9UCU6SSoG3qRKnt7STw==",
-      "dev": true
-    },
-    "node_modules/path-key": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-      "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/path-parse": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
-      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "dev": true
-    },
-    "node_modules/path-scurry": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz",
-      "integrity": "sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^10.2.0",
-        "minipass": "^5.0.0 || ^6.0.2 || ^7.0.0"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.18"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/picocolors": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
-      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw==",
-      "dev": true
-    },
-    "node_modules/picomatch": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
-      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
-      "engines": {
-        "node": ">=8.6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/jonschlinkert"
-      }
-    },
-    "node_modules/pify": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
-      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/pirates": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz",
-      "integrity": "sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==",
-      "dev": true,
-      "engines": {
-        "node": ">= 6"
-      }
-    },
-    "node_modules/postcss": {
-      "version": "8.4.45",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
-      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "tidelift",
-          "url": "https://tidelift.com/funding/github/npm/postcss"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "nanoid": "^3.3.7",
-        "picocolors": "^1.0.1",
-        "source-map-js": "^1.2.0"
-      },
-      "engines": {
-        "node": "^10 || ^12 || >=14"
-      }
-    },
-    "node_modules/postcss-import": {
-      "version": "15.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
-      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
-      "dev": true,
-      "dependencies": {
-        "postcss-value-parser": "^4.0.0",
-        "read-cache": "^1.0.0",
-        "resolve": "^1.1.7"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.0.0"
-      }
-    },
-    "node_modules/postcss-js": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
-      "integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
-      "dev": true,
-      "dependencies": {
-        "camelcase-css": "^2.0.1"
-      },
-      "engines": {
-        "node": "^12 || ^14 || >= 16"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/postcss/"
-      },
-      "peerDependencies": {
-        "postcss": "^8.4.21"
-      }
-    },
-    "node_modules/postcss-load-config": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz",
-      "integrity": "sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "lilconfig": "^3.0.0",
-        "yaml": "^2.3.4"
-      },
-      "engines": {
-        "node": ">= 14"
-      },
-      "peerDependencies": {
-        "postcss": ">=8.0.9",
-        "ts-node": ">=9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "postcss": {
-          "optional": true
-        },
-        "ts-node": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/postcss-load-config/node_modules/lilconfig": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
-      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antonk52"
-      }
-    },
-    "node_modules/postcss-nested": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
-      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "opencollective",
-          "url": "https://opencollective.com/postcss/"
-        },
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "dependencies": {
-        "postcss-selector-parser": "^6.1.1"
-      },
-      "engines": {
-        "node": ">=12.0"
-      },
-      "peerDependencies": {
-        "postcss": "^8.2.14"
-      }
-    },
-    "node_modules/postcss-selector-parser": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
-      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
-      "dev": true,
-      "dependencies": {
-        "cssesc": "^3.0.0",
-        "util-deprecate": "^1.0.2"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/postcss-value-parser": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
-      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
-      "dev": true
-    },
-    "node_modules/queue-microtask": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
-      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/read-cache": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
-      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
-      "dev": true,
-      "dependencies": {
-        "pify": "^2.3.0"
-      }
-    },
-    "node_modules/readdirp": {
-      "version": "3.6.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
-      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
-      "dev": true,
-      "dependencies": {
-        "picomatch": "^2.2.1"
-      },
-      "engines": {
-        "node": ">=8.10.0"
-      }
-    },
-    "node_modules/resolve": {
-      "version": "1.22.8",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.8.tgz",
-      "integrity": "sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==",
-      "dev": true,
-      "dependencies": {
-        "is-core-module": "^2.13.0",
-        "path-parse": "^1.0.7",
-        "supports-preserve-symlinks-flag": "^1.0.0"
-      },
-      "bin": {
-        "resolve": "bin/resolve"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/reusify": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz",
-      "integrity": "sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==",
-      "dev": true,
-      "engines": {
-        "iojs": ">=1.0.0",
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/run-parallel": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
-      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ],
-      "dependencies": {
-        "queue-microtask": "^1.2.2"
-      }
-    },
-    "node_modules/shebang-command": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-      "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-      "dev": true,
-      "dependencies": {
-        "shebang-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/shebang-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-      "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/signal-exit": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
-      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
-      "dev": true,
-      "engines": {
-        "node": ">=14"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/isaacs"
-      }
-    },
-    "node_modules/source-map-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
-      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/string-width": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz",
-      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
-      "dev": true,
-      "dependencies": {
-        "eastasianwidth": "^0.2.0",
-        "emoji-regex": "^9.2.2",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/string-width-cjs": {
-      "name": "string-width",
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/string-width-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
-    "node_modules/string-width-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
-      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
-      }
-    },
-    "node_modules/strip-ansi-cjs": {
-      "name": "strip-ansi",
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/strip-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/sucrase": {
-      "version": "3.35.0",
-      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz",
-      "integrity": "sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==",
-      "dev": true,
-      "dependencies": {
-        "@jridgewell/gen-mapping": "^0.3.2",
-        "commander": "^4.0.0",
-        "glob": "^10.3.10",
-        "lines-and-columns": "^1.1.6",
-        "mz": "^2.7.0",
-        "pirates": "^4.0.1",
-        "ts-interface-checker": "^0.1.9"
-      },
-      "bin": {
-        "sucrase": "bin/sucrase",
-        "sucrase-node": "bin/sucrase-node"
-      },
-      "engines": {
-        "node": ">=16 || 14 >=14.17"
-      }
-    },
-    "node_modules/supports-preserve-symlinks-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
-      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "dev": true,
-      "engines": {
-        "node": ">= 0.4"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/ljharb"
-      }
-    },
-    "node_modules/tailwindcss": {
-      "version": "3.4.10",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.10.tgz",
-      "integrity": "sha512-KWZkVPm7yJRhdu4SRSl9d4AK2wM3a50UsvgHZO7xY77NQr2V+fIrEuoDGQcbvswWvFGbS2f6e+jC/6WJm1Dl0w==",
-      "dev": true,
-      "dependencies": {
-        "@alloc/quick-lru": "^5.2.0",
-        "arg": "^5.0.2",
-        "chokidar": "^3.5.3",
-        "didyoumean": "^1.2.2",
-        "dlv": "^1.1.3",
-        "fast-glob": "^3.3.0",
-        "glob-parent": "^6.0.2",
-        "is-glob": "^4.0.3",
-        "jiti": "^1.21.0",
-        "lilconfig": "^2.1.0",
-        "micromatch": "^4.0.5",
-        "normalize-path": "^3.0.0",
-        "object-hash": "^3.0.0",
-        "picocolors": "^1.0.0",
-        "postcss": "^8.4.23",
-        "postcss-import": "^15.1.0",
-        "postcss-js": "^4.0.1",
-        "postcss-load-config": "^4.0.1",
-        "postcss-nested": "^6.0.1",
-        "postcss-selector-parser": "^6.0.11",
-        "resolve": "^1.22.2",
-        "sucrase": "^3.32.0"
-      },
-      "bin": {
-        "tailwind": "lib/cli.js",
-        "tailwindcss": "lib/cli.js"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      }
-    },
-    "node_modules/thenify": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
-      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
-      "dev": true,
-      "dependencies": {
-        "any-promise": "^1.0.0"
-      }
-    },
-    "node_modules/thenify-all": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
-      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
-      "dev": true,
-      "dependencies": {
-        "thenify": ">= 3.1.0 < 4"
-      },
-      "engines": {
-        "node": ">=0.8"
-      }
-    },
-    "node_modules/to-regex-range": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
-      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
-      "dependencies": {
-        "is-number": "^7.0.0"
-      },
-      "engines": {
-        "node": ">=8.0"
-      }
-    },
-    "node_modules/ts-interface-checker": {
-      "version": "0.1.13",
-      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
-      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
-      "dev": true
-    },
-    "node_modules/util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
-      "dev": true
-    },
-    "node_modules/which": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
-      "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
-      "dev": true,
-      "dependencies": {
-        "isexe": "^2.0.0"
-      },
-      "bin": {
-        "node-which": "bin/node-which"
-      },
-      "engines": {
-        "node": ">= 8"
-      }
-    },
-    "node_modules/wrap-ansi": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
-      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^6.1.0",
-        "string-width": "^5.0.1",
-        "strip-ansi": "^7.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs": {
-      "name": "wrap-ansi",
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
-      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^4.0.0",
-        "string-width": "^4.1.0",
-        "strip-ansi": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-regex": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
-      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
-      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
-      "dev": true,
-      "dependencies": {
-        "color-convert": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/emoji-regex": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
-      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
-      "dev": true
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/string-width": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
-      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
-      "dev": true,
-      "dependencies": {
-        "emoji-regex": "^8.0.0",
-        "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/wrap-ansi-cjs/node_modules/strip-ansi": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
-      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^5.0.1"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/yaml": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
-      "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
-      "dev": true,
-      "bin": {
-        "yaml": "bin.mjs"
-      },
-      "engines": {
-        "node": ">= 14"
-      }
-    }
-  }
-}
diff --git a/docs/LumexUI.Docs/package.json b/docs/LumexUI.Docs/package.json
deleted file mode 100644
index 47dc5367..00000000
--- a/docs/LumexUI.Docs/package.json
+++ /dev/null
@@ -1,12 +0,0 @@
-{
-  "name": "lumexui.docs",
-  "private": "true",
-  "scripts": {
-    "build": "tailwindcss -i ./Styles/globals.css -o ./wwwroot/css/docs.css",
-    "build:prod": "tailwindcss -i ./Styles/globals.css -o ./wwwroot/css/docs.css --minify"
-  },
-  "devDependencies": {
-    "@tailwindcss/typography": "^0.5.15",
-    "tailwindcss": "^3.4.10"
-  }
-}
diff --git a/docs/LumexUI.Docs/tailwind.config.js b/docs/LumexUI.Docs/tailwind.config.js
deleted file mode 100644
index 3442fed7..00000000
--- a/docs/LumexUI.Docs/tailwind.config.js
+++ /dev/null
@@ -1,71 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme');
-const lumexui = '../../src/LumexUI';
-
-/** @type {import('tailwindcss').Config} */
-module.exports = {
-    content: [
-        './Components/**/*.razor',
-        '../LumexUI.Docs.Client/{Pages,Components}/**/*.{razor,razor.cs}',
-        `${lumexui}/Styles/*.cs`
-    ],
-    darkMode: 'class',
-    theme: {
-        extend: {
-            fontFamily: {
-                sans: ['Inter var', ...defaultTheme.fontFamily.sans],
-                mono: ['Fira Code var', ...defaultTheme.fontFamily.mono]
-            },
-            typography: (theme) => ({
-                DEFAULT: {
-                    css: {
-                        maxWidth: 'none',
-                        'h2, h3, h4': {
-                            'scroll-margin-top': 'var(--scroll-mt)',
-                        },
-                        a: {
-                            color: 'var(--tw-prose-links) !important',
-                            lineHeight: theme('lineHeight.tight'),
-                            fontWeight: theme('fontWeight.semibold'),
-                            textDecoration: 'none',
-                            borderBottom: `1px solid ${theme('colors.orange.400')}`,
-                        },
-                        'a:hover': {
-                            borderBottomWidth: '2px',
-                        },
-                        pre: {
-                            color: theme('colors.zinc.100'),
-                            padding: theme('padding.5'),
-                            display: 'flex'
-                        },
-                        'code[class]::before': {
-                            content: '""'
-                        },
-                        'code[class]::after': {
-                            content: '""'
-                        }
-                    }
-                }
-            }),
-        },
-    },
-    plugins: [
-        require(`${lumexui}/Scripts/Plugin/dist/plugin`),
-        require('@tailwindcss/typography'),
-        function ({ addVariant }) {
-            addVariant('children', '& > *')
-            addVariant('scrollbar', '&::-webkit-scrollbar')
-            addVariant('scrollbar-track', '&::-webkit-scrollbar-track')
-            addVariant('scrollbar-thumb', '&::-webkit-scrollbar-thumb')
-        },
-        function ({ addUtilities, theme }) {
-            let color = theme('colors.indigo.200').replace('#', '%23');
-            let backgroundImage = `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='1' fill='${color}' /%3E%3C/svg%3E")`;
-
-            addUtilities({
-                '.bg-dots': {
-                    backgroundImage
-                },
-            })
-        }
-    ],
-};
diff --git a/src/LumexUI/Components/Navbar/LumexNavbarMenuToggle.razor b/src/LumexUI/Components/Navbar/LumexNavbarMenuToggle.razor
index 8d695e53..e82d409c 100644
--- a/src/LumexUI/Components/Navbar/LumexNavbarMenuToggle.razor
+++ b/src/LumexUI/Components/Navbar/LumexNavbarMenuToggle.razor
@@ -5,9 +5,9 @@
                 Class="@RootClass"
                 Style="@RootStyle"
                 type="button"
-                data-slot="toggle-icon"
+                data-slot="toggle"
                 data-expanded="@Context.Menu?.Expanded"
                 @attributes="@AdditionalAttributes"
                 @onclick="@Toggle">
-    
+    
 
diff --git a/src/LumexUI/Components/Providers/LumexThemeProvider.razor.cs b/src/LumexUI/Components/Providers/LumexThemeProvider.razor.cs
index 8114f76f..2f9bc3d8 100644
--- a/src/LumexUI/Components/Providers/LumexThemeProvider.razor.cs
+++ b/src/LumexUI/Components/Providers/LumexThemeProvider.razor.cs
@@ -52,10 +52,11 @@ public LumexThemeProvider()
 		{
 			foreach( var scale in color.Value )
 			{
-				var scaleKey = scale.Key == "default" ? "" : $"-{scale.Key}";
-				var scaleValue = ColorUtils.HexToHsl( scale.Value );
+				var scaleKey = scale.Key != "default" 
+					? $"{color.Key}-{scale.Key}"
+					: $"{color.Key}";
 
-				sb.AppendLine( $"--{Prefix}-{color.Key}{scaleKey}: {scaleValue};" );
+				sb.AppendLine( $"--{Prefix}-{scaleKey}: {scale.Value};" );
 			}
 		}
 
@@ -73,13 +74,13 @@ public LumexThemeProvider()
 		sb.AppendLine( $"--{Prefix}-radius-small: {theme.Layout.Radius.Sm};" );
 		sb.AppendLine( $"--{Prefix}-radius-medium: {theme.Layout.Radius.Md};" );
 		sb.AppendLine( $"--{Prefix}-radius-large: {theme.Layout.Radius.Lg};" );
-		sb.AppendLine( $"--{Prefix}-box-shadow-small: {theme.Layout.Shadow.Sm};" );
-		sb.AppendLine( $"--{Prefix}-box-shadow-medium: {theme.Layout.Shadow.Md};" );
-		sb.AppendLine( $"--{Prefix}-box-shadow-large: {theme.Layout.Shadow.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( $"--{Prefix}-shadow-small: {theme.Layout.Shadow.Sm};" );
+		sb.AppendLine( $"--{Prefix}-shadow-medium: {theme.Layout.Shadow.Md};" );
+		sb.AppendLine( $"--{Prefix}-shadow-large: {theme.Layout.Shadow.Lg};" );
+		sb.AppendLine( $"--{Prefix}-opacity-divider: {theme.Layout.DividerOpacity * 100}%;" );
+		sb.AppendLine( $"--{Prefix}-opacity-disabled: {theme.Layout.DisabledOpacity * 100}%;" );
+		sb.AppendLine( $"--{Prefix}-opacity-focus: {theme.Layout.FocusOpacity * 100}%;" );
+		sb.AppendLine( $"--{Prefix}-opacity-hover: {theme.Layout.HoverOpacity * 100}%;" );
 
 		sb.AppendLine( "}" );
 		return sb.ToString();
diff --git a/src/LumexUI/LumexUI.csproj b/src/LumexUI/LumexUI.csproj
index dd612d99..6178413c 100644
--- a/src/LumexUI/LumexUI.csproj
+++ b/src/LumexUI/LumexUI.csproj
@@ -31,8 +31,9 @@
 		
 		
 		
-		
-		
+		
+		
+		
 	
 
 	
@@ -49,11 +50,11 @@
 
 	
 		
-		
+		
 	
-
+	
 	
-	
+	
 		
 		
 	
diff --git a/src/LumexUI/LumexUI.targets b/src/LumexUI/LumexUI.targets
new file mode 100644
index 00000000..087c4fc8
--- /dev/null
+++ b/src/LumexUI/LumexUI.targets
@@ -0,0 +1,20 @@
+
+
+	
+	
+		
+		
+			$(MSBuildProjectDirectory)\bin\lumexui
+		
+	
+
+	
+		
+		
+			
+		
+
+		
+		
+	
+
\ No newline at end of file
diff --git a/src/LumexUI/Scripts/Plugin/animations.js b/src/LumexUI/Scripts/Plugin/animations.js
deleted file mode 100644
index 110c65f2..00000000
--- a/src/LumexUI/Scripts/Plugin/animations.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export default {
-    animation: {
-        "appearance-in": "appearance-in 200ms ease-out normal both",
-        "appearance-out": "appearance-out 60ms ease-in normal both",
-    },
-    keyframes: {
-        "appearance-in": {
-            "0%": {
-                opacity: "0",
-                transform: "translateZ(0)  scale(0.85)",
-            },
-            "100%": {
-                opacity: "1",
-                transform: "translateZ(0) scale(1)",
-            },
-        },
-        "appearance-out": {
-            "0%": {
-                opacity: "1",
-                transform: "scale(1)",
-            },
-            "100%": {
-                opacity: "0",
-                transform: "scale(0.85)",
-            },
-        }
-    },
-};
\ No newline at end of file
diff --git a/src/LumexUI/Scripts/Plugin/plugin.js b/src/LumexUI/Scripts/Plugin/plugin.js
deleted file mode 100644
index ea476a65..00000000
--- a/src/LumexUI/Scripts/Plugin/plugin.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import plugin from 'tailwindcss/plugin';
-import animations from './animations';
-import scrollbarHide from './scrollbar-hide';
-import transitions, { DEFAULT_TRANSITION_DURATION } from './transitions';
-
-const lumexui = plugin(
-    ({ addUtilities }) => {
-        addUtilities({ ...transitions });
-        addUtilities({ ...scrollbarHide });
-    },
-    {
-        theme: {
-            extend: {
-                colors: {
-                    // Base
-                    background: {
-                        DEFAULT: 'hsl(var(--lumex-background) / )'
-                    },
-                    foreground: {
-                        50: 'hsl(var(--lumex-foreground-50) / )',
-                        100: 'hsl(var(--lumex-foreground-100) / )',
-                        200: 'hsl(var(--lumex-foreground-200) / )',
-                        300: 'hsl(var(--lumex-foreground-300) / )',
-                        400: 'hsl(var(--lumex-foreground-400) / )',
-                        500: 'hsl(var(--lumex-foreground-500) / )',
-                        600: 'hsl(var(--lumex-foreground-600) / )',
-                        700: 'hsl(var(--lumex-foreground-700) / )',
-                        800: 'hsl(var(--lumex-foreground-800) / )',
-                        900: 'hsl(var(--lumex-foreground-900) / )',
-                        950: 'hsl(var(--lumex-foreground-950) / )',
-                        DEFAULT: 'hsl(var(--lumex-foreground) / )'
-                    },
-                    focus: {
-                        DEFAULT: 'hsl(var(--lumex-focus) / )'
-                    },
-                    overlay: {
-                        DEFAULT: 'hsl(var(--lumex-overlay) / )'
-                    },
-                    divider: {
-                        DEFAULT: 'hsl(var(--lumex-divider) / var(--lumex-divider-opacity, ))'
-                    },
-                    surface1: {
-                        DEFAULT: 'hsl(var(--lumex-surface1) / )',
-                        foreground: 'hsl(var(--lumex-surface1-foreground) / )'
-                    },
-                    surface2: {
-                        DEFAULT: 'hsl(var(--lumex-surface2) / )',
-                        foreground: 'hsl(var(--lumex-surface2-foreground) / )'
-                    },
-                    surface3: {
-                        DEFAULT: 'hsl(var(--lumex-surface3) / )',
-                        foreground: 'hsl(var(--lumex-surface3-foreground) / )'
-                    },
-
-                    // Default
-                    default: {
-                        50: 'hsl(var(--lumex-default-50) / )',
-                        100: 'hsl(var(--lumex-default-100) / )',
-                        200: 'hsl(var(--lumex-default-200) / )',
-                        300: 'hsl(var(--lumex-default-300) / )',
-                        400: 'hsl(var(--lumex-default-400) / )',
-                        500: 'hsl(var(--lumex-default-500) / )',
-                        600: 'hsl(var(--lumex-default-600) / )',
-                        700: 'hsl(var(--lumex-default-700) / )',
-                        800: 'hsl(var(--lumex-default-800) / )',
-                        900: 'hsl(var(--lumex-default-900) / )',
-                        950: 'hsl(var(--lumex-default-950) / )',
-                        DEFAULT: 'hsl(var(--lumex-default) / )',
-                        foreground: 'hsl(var(--lumex-default-foreground) / )'
-                    },
-
-                    // Primary
-                    primary: {
-                        50: 'hsl(var(--lumex-primary-50) / )',
-                        100: 'hsl(var(--lumex-primary-100) / )',
-                        200: 'hsl(var(--lumex-primary-200) / )',
-                        300: 'hsl(var(--lumex-primary-300) / )',
-                        400: 'hsl(var(--lumex-primary-400) / )',
-                        500: 'hsl(var(--lumex-primary-500) / )',
-                        600: 'hsl(var(--lumex-primary-600) / )',
-                        700: 'hsl(var(--lumex-primary-700) / )',
-                        800: 'hsl(var(--lumex-primary-800) / )',
-                        900: 'hsl(var(--lumex-primary-900) / )',
-                        950: 'hsl(var(--lumex-primary-950) / )',
-                        DEFAULT: 'hsl(var(--lumex-primary) / )',
-                        foreground: 'hsl(var(--lumex-primary-foreground) / )'
-                    },
-
-                    // Secondary
-                    secondary: {
-                        50: 'hsl(var(--lumex-secondary-50) / )',
-                        100: 'hsl(var(--lumex-secondary-100) / )',
-                        200: 'hsl(var(--lumex-secondary-200) / )',
-                        300: 'hsl(var(--lumex-secondary-300) / )',
-                        400: 'hsl(var(--lumex-secondary-400) / )',
-                        500: 'hsl(var(--lumex-secondary-500) / )',
-                        600: 'hsl(var(--lumex-secondary-600) / )',
-                        700: 'hsl(var(--lumex-secondary-700) / )',
-                        800: 'hsl(var(--lumex-secondary-800) / )',
-                        900: 'hsl(var(--lumex-secondary-900) / )',
-                        950: 'hsl(var(--lumex-secondary-950) / )',
-                        DEFAULT: 'hsl(var(--lumex-secondary) / )',
-                        foreground: 'hsl(var(--lumex-secondary-foreground) / )'
-                    },
-
-                    // Success
-                    success: {
-                        50: 'hsl(var(--lumex-success-50) / )',
-                        100: 'hsl(var(--lumex-success-100) / )',
-                        200: 'hsl(var(--lumex-success-200) / )',
-                        300: 'hsl(var(--lumex-success-300) / )',
-                        400: 'hsl(var(--lumex-success-400) / )',
-                        500: 'hsl(var(--lumex-success-500) / )',
-                        600: 'hsl(var(--lumex-success-600) / )',
-                        700: 'hsl(var(--lumex-success-700) / )',
-                        800: 'hsl(var(--lumex-success-800) / )',
-                        900: 'hsl(var(--lumex-success-900) / )',
-                        950: 'hsl(var(--lumex-success-950) / )',
-                        DEFAULT: 'hsl(var(--lumex-success) / )',
-                        foreground: 'hsl(var(--lumex-success-foreground) / )'
-                    },
-
-                    // Warning
-                    warning: {
-                        50: 'hsl(var(--lumex-warning-50) / )',
-                        100: 'hsl(var(--lumex-warning-100) / )',
-                        200: 'hsl(var(--lumex-warning-200) / )',
-                        300: 'hsl(var(--lumex-warning-300) / )',
-                        400: 'hsl(var(--lumex-warning-400) / )',
-                        500: 'hsl(var(--lumex-warning-500) / )',
-                        600: 'hsl(var(--lumex-warning-600) / )',
-                        700: 'hsl(var(--lumex-warning-700) / )',
-                        800: 'hsl(var(--lumex-warning-800) / )',
-                        900: 'hsl(var(--lumex-warning-900) / )',
-                        950: 'hsl(var(--lumex-warning-950) / )',
-                        DEFAULT: 'hsl(var(--lumex-warning) / )',
-                        foreground: 'hsl(var(--lumex-warning-foreground) / )'
-                    },
-
-                    // Danger
-                    danger: {
-                        50: 'hsl(var(--lumex-danger-50) / )',
-                        100: 'hsl(var(--lumex-danger-100) / )',
-                        200: 'hsl(var(--lumex-danger-200) / )',
-                        300: 'hsl(var(--lumex-danger-300) / )',
-                        400: 'hsl(var(--lumex-danger-400) / )',
-                        500: 'hsl(var(--lumex-danger-500) / )',
-                        600: 'hsl(var(--lumex-danger-600) / )',
-                        700: 'hsl(var(--lumex-danger-700) / )',
-                        800: 'hsl(var(--lumex-danger-800) / )',
-                        900: 'hsl(var(--lumex-danger-900) / )',
-                        950: 'hsl(var(--lumex-danger-950) / )',
-                        DEFAULT: 'hsl(var(--lumex-danger) / )',
-                        foreground: 'hsl(var(--lumex-danger-foreground) / )'
-                    },
-
-                    // Info
-                    info: {
-                        50: 'hsl(var(--lumex-info-50) / )',
-                        100: 'hsl(var(--lumex-info-100) / )',
-                        200: 'hsl(var(--lumex-info-200) / )',
-                        300: 'hsl(var(--lumex-info-300) / )',
-                        400: 'hsl(var(--lumex-info-400) / )',
-                        500: 'hsl(var(--lumex-info-500) / )',
-                        600: 'hsl(var(--lumex-info-600) / )',
-                        700: 'hsl(var(--lumex-info-700) / )',
-                        800: 'hsl(var(--lumex-info-800) / )',
-                        900: 'hsl(var(--lumex-info-900) / )',
-                        950: 'hsl(var(--lumex-info-950) / )',
-                        DEFAULT: 'hsl(var(--lumex-info) / )',
-                        foreground: 'hsl(var(--lumex-info-foreground) / )'
-                    }
-                },
-                fontSize: {
-                    tiny: ['var(--lumex-font-size-tiny)', 'var(--lumex-line-height-tiny)'],
-                    small: ['var(--lumex-font-size-small)', 'var(--lumex-line-height-small)'],
-                    medium: ['var(--lumex-font-size-medium)', 'var(--lumex-line-height-medium)'],
-                    large: ['var(--lumex-font-size-large)', 'var(--lumex-line-height-large)']
-                },
-                lineHeight: {
-                    tiny: 'var(--lumex-line-height-tiny)',
-                    small: 'var(--lumex-line-height-small)',
-                    medium: 'var(--lumex-line-height-medium)',
-                    large: 'var(--lumex-line-height-large)'
-                },
-                borderRadius: {
-                    small: 'var(--lumex-radius-small)',
-                    medium: 'var(--lumex-radius-medium)',
-                    large: 'var(--lumex-radius-large)'
-                },
-                boxShadow: {
-                    small: 'var(--lumex-box-shadow-small)',
-                    medium: 'var(--lumex-box-shadow-medium)',
-                    large: 'var(--lumex-box-shadow-large)'
-                },
-                opacity: {
-                    divider: 'var(--lumex-divider-opacity)',
-                    disabled: 'var(--lumex-disabled-opacity)',
-                    focus: 'var(--lumex-focus-opacity)',
-                    hover: 'var(--lumex-hover-opacity)'
-                },
-                transitionDuration: {
-                    DEFAULT: DEFAULT_TRANSITION_DURATION
-                },
-                ...animations
-            }
-        }
-    }
-);
-
-export default lumexui;
\ No newline at end of file
diff --git a/src/LumexUI/Scripts/Plugin/scrollbar-hide.js b/src/LumexUI/Scripts/Plugin/scrollbar-hide.js
deleted file mode 100644
index ab49c021..00000000
--- a/src/LumexUI/Scripts/Plugin/scrollbar-hide.js
+++ /dev/null
@@ -1,22 +0,0 @@
-export default {
-    ".scrollbar-hide": {
-        /* IE and Edge */
-        "-ms-overflow-style": "none",
-        /* Firefox */
-        "scrollbar-width": "none",
-        /* Safari and Chrome */
-        "&::-webkit-scrollbar": {
-            display: "none",
-        },
-    },
-    ".scrollbar-default": {
-        /* IE and Edge */
-        "-ms-overflow-style": "auto",
-        /* Firefox */
-        "scrollbar-width": "auto",
-        /* Safari and Chrome */
-        "&::-webkit-scrollbar": {
-            display: "block",
-        },
-    },
-};
\ No newline at end of file
diff --git a/src/LumexUI/Scripts/Plugin/transitions.js b/src/LumexUI/Scripts/Plugin/transitions.js
deleted file mode 100644
index 22639223..00000000
--- a/src/LumexUI/Scripts/Plugin/transitions.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import defaultTheme from 'tailwindcss/defaultTheme';
-
-const defaultTransitionFunction = defaultTheme.transitionTimingFunction.DEFAULT;
-
-export const DEFAULT_TRANSITION_DURATION = '250ms';
-
-export default {
-    '.transition-colors-shadow': {
-        'transition-property':
-            'color, background-color, border-color, text-decoration-color, fill, stroke, box-shadow',
-        'transition-timing-function': defaultTransitionFunction,
-        'transition-duration': DEFAULT_TRANSITION_DURATION,
-    },
-    '.transition-colors-opacity': {
-        'transition-property':
-            'color, background-color, border-color, text-decoration-color, fill, stroke, opacity',
-        'transition-timing-function': defaultTransitionFunction,
-        'transition-duration': DEFAULT_TRANSITION_DURATION,
-    },
-    '.transition-transform-colors': {
-        'transition-property':
-            'transform, color, background, background-color, border-color, text-decoration-color, fill, stroke',
-        'transition-timing-function': defaultTransitionFunction,
-        'transition-duration': DEFAULT_TRANSITION_DURATION,
-    },
-    '.transition-transform-colors-opacity': {
-        'transition-property':
-            'transform, color, background, background-color, border-color, text-decoration-color, fill, stroke, opacity',
-        'transition-timing-function': defaultTransitionFunction,
-        'transition-duration': DEFAULT_TRANSITION_DURATION,
-    },
-    '.transition-transform-opacity': {
-        'transition-property': 'transform, opacity',
-        'transition-timing-function': defaultTransitionFunction,
-        'transition-duration': DEFAULT_TRANSITION_DURATION
-    }
-};
\ No newline at end of file
diff --git a/src/LumexUI/Styles/Accordion.cs b/src/LumexUI/Styles/Accordion.cs
index ad450f5f..90696a4d 100644
--- a/src/LumexUI/Styles/Accordion.cs
+++ b/src/LumexUI/Styles/Accordion.cs
@@ -51,7 +51,8 @@ internal readonly record struct AccordionItem
         .Add( "gap-3" )
         .Add( "w-full" )
         .Add( "items-center" )
-        .Add( "outline-none" )
+        .Add( "outline-hidden" )
+        .Add( "cursor-pointer" )
         .ToString();
 
     private readonly static string _startContent = ElementClass.Empty()
diff --git a/src/LumexUI/Styles/Button.cs b/src/LumexUI/Styles/Button.cs
index 38bdb218..a8d7524b 100644
--- a/src/LumexUI/Styles/Button.cs
+++ b/src/LumexUI/Styles/Button.cs
@@ -17,17 +17,16 @@ internal class Button
 		.Add( "items-center" )
 		.Add( "justify-center" )
 		.Add( "min-w-max" )
-		.Add( "text-medium" )
 		.Add( "font-normal" )
 		.Add( "appearance-none" )
-		.Add( "outline-none" )
 		.Add( "select-none" )
 		.Add( "whitespace-nowrap" )
 		.Add( "subpixel-antialiased" )
 		.Add( "overflow-hidden" )
+		.Add( "cursor-pointer" )
 		.Add( "active:scale-[0.97]" )
 		// transition
-		.Add( "transition-transform-colors-opacity" )
+		.Add( "transition-colors-transform-opacity" )
 		.Add( "motion-reduce:transition-none" )
 		// focus ring
 		.Add( Utils.FocusVisible )
@@ -45,9 +44,9 @@ internal class Button
 	private static ElementClass GetSizeStyles( Size size )
 	{
 		return ElementClass.Empty()
-			.Add( "min-w-16 h-8 px-3 gap-2 text-small rounded-small", when: size is Size.Small )
-			.Add( "min-w-20 h-10 px-4 gap-2 text-medium rounded-medium", when: size is Size.Medium )
-			.Add( "min-w-24 h-12 px-6 gap-2 text-large rounded-large", when: size is Size.Large );
+			.Add( "min-w-16 h-8 px-3 gap-2 text-tiny rounded-small", when: size is Size.Small )
+			.Add( "min-w-20 h-10 px-4 gap-2 text-small rounded-medium", when: size is Size.Medium )
+			.Add( "min-w-24 h-12 px-6 gap-2 text-medium rounded-large", when: size is Size.Large );
 	}
 
 	private static ElementClass GetRadiusStyles( Radius radius )
diff --git a/src/LumexUI/Styles/Checkbox.cs b/src/LumexUI/Styles/Checkbox.cs
index d426d4a3..d5c0388c 100644
--- a/src/LumexUI/Styles/Checkbox.cs
+++ b/src/LumexUI/Styles/Checkbox.cs
@@ -20,7 +20,7 @@ internal readonly record struct Checkbox
         .Add( "inline-flex" )
         .Add( "items-center" )
         .Add( "justify-start" )
-        .Add( "outline-none" )
+        .Add( "outline-hidden" )
         .Add( "cursor-pointer" )
         .ToString();
 
@@ -48,7 +48,7 @@ internal readonly record struct Checkbox
         .Add( "after:scale-50" )
         .Add( "after:opacity-0" )
         .Add( "after:origin-center" )
-        .Add( "after:transition-transform-opacity" )
+        .Add( "after:transition[transform,opacity]" )
         .Add( "after:!duration-200" )
         .Add( "group-data-[checked=true]:after:scale-100" )
         .Add( "group-data-[checked=true]:after:opacity-100" )
@@ -79,21 +79,21 @@ internal readonly record struct Checkbox
         .ToString();
 
     private readonly static string _radiusSmall = ElementClass.Empty()
-        .Add( "rounded-[calc(theme(borderRadius.small)*0.5)]" )
-        .Add( "before:rounded-[calc(theme(borderRadius.small)*0.5)]" )
-        .Add( "after:rounded-[calc(theme(borderRadius.small)*0.5)]" )
+        .Add( "rounded-[calc(var(--radius-small)*0.5)]" )
+        .Add( "before:rounded-[calc(var(--radius-small)*0.5)]" )
+        .Add( "after:rounded-[calc(var(--radius-small)*0.5)]" )
         .ToString();
 
     private readonly static string _radiusMedium = ElementClass.Empty()
-        .Add( "rounded-[calc(theme(borderRadius.medium)*0.5)]" )
-        .Add( "before:rounded-[calc(theme(borderRadius.medium)*0.5)]" )
-        .Add( "after:rounded-[calc(theme(borderRadius.medium)*0.5)]" )
+        .Add( "rounded-[calc(var(--radius-medium)*0.5)]" )
+        .Add( "before:rounded-[calc(var(--radius-medium)*0.5)]" )
+        .Add( "after:rounded-[calc(var(--radius-medium)*0.5)]" )
         .ToString();
 
     private readonly static string _radiusLarge = ElementClass.Empty()
-        .Add( "rounded-[calc(theme(borderRadius.large)*0.5)]" )
-        .Add( "before:rounded-[calc(theme(borderRadius.large)*0.5)]" )
-        .Add( "after:rounded-[calc(theme(borderRadius.large)*0.5)]" )
+        .Add( "rounded-[calc(var(--radius-large)*0.5)]" )
+        .Add( "before:rounded-[calc(var(--radius-large)*0.5)]" )
+        .Add( "after:rounded-[calc(var(--radius-large)*0.5)]" )
         .ToString();
 
     private static ElementClass GetColorStyles( ThemeColor color )
diff --git a/src/LumexUI/Styles/DataGrid.cs b/src/LumexUI/Styles/DataGrid.cs
index e7b0bcc2..b34f9683 100644
--- a/src/LumexUI/Styles/DataGrid.cs
+++ b/src/LumexUI/Styles/DataGrid.cs
@@ -58,7 +58,6 @@ internal class DataGrid
 
     private readonly static string _tr = ElementClass.Empty()
         .Add( "group" )
-        .Add( "outline-none" )
         // focus
         .Add( Utils.FocusVisible )
         .ToString();
@@ -73,7 +72,6 @@ internal class DataGrid
         .Add( "text-tiny" )
         .Add( "font-semibold" )
         .Add( "whitespace-nowrap" )
-        .Add( "outline-none" )
         .Add( "first:rounded-s-lg" )
         .Add( "last:rounded-e-lg" )
         .Add( "hover:text-foreground-400" )
@@ -88,8 +86,6 @@ internal class DataGrid
         .Add( "px-3" )
         .Add( "align-middle" )
         .Add( "text-small" )
-        .Add( "outline-none" )
-        .Add( "data-[selected=false]:bg-transparent" )
         // disabled
         .Add( "group-data-[disabled=true]:text-foreground-300" )
         .Add( "group-data-[disabled=true]:cursor-not-allowed" )
@@ -110,7 +106,7 @@ internal class DataGrid
          .Add( "ms-2" )
          .Add( "opacity-0" )
          .Add( "-rotate-90" )
-         .Add( "transition-[transform,opacity]" )
+         .Add( "transition-transform-opacity" )
          .Add( "data-[visible=true]:opacity-100" )
          .Add( "group-hover/th:opacity-100" )
          .Add( "group-aria-[sort=ascending]/th:rotate-90" )
@@ -267,25 +263,25 @@ private static ElementClass GetColorStyles( ThemeColor color, string slot )
         return color switch
         {
             ThemeColor.Default => ElementClass.Empty()
-                .Add( "bg-default-100 data-[selected=true]:text-default-foreground", when: slot is nameof( _td ) ),
+                .Add( "data-[selected=true]:bg-default-100 data-[selected=true]:text-default-foreground", when: slot is nameof( _td ) ),
 
             ThemeColor.Primary => ElementClass.Empty()
-                .Add( "bg-primary-100 data-[selected=true]:text-primary-700", when: slot is nameof( _td ) ),
+                .Add( "data-[selected=true]:bg-primary-100 data-[selected=true]:text-primary-700", when: slot is nameof( _td ) ),
 
             ThemeColor.Secondary => ElementClass.Empty()
-                .Add( "bg-secondary-100 data-[selected=true]:text-secondary-700", when: slot is nameof( _td ) ),
+                .Add( "data-[selected=true]:bg-secondary-100 data-[selected=true]:text-secondary-700", when: slot is nameof( _td ) ),
 
             ThemeColor.Success => ElementClass.Empty()
-                .Add( "bg-success-100 data-[selected=true]:text-success-700", when: slot is nameof( _td ) ),
+                .Add( "data-[selected=true]:bg-success-100 data-[selected=true]:text-success-700", when: slot is nameof( _td ) ),
 
             ThemeColor.Warning => ElementClass.Empty()
-                .Add( "bg-warning-100 data-[selected=true]:text-warning-700", when: slot is nameof( _td ) ),
+                .Add( "data-[selected=true]:bg-warning-100 data-[selected=true]:text-warning-700", when: slot is nameof( _td ) ),
 
             ThemeColor.Danger => ElementClass.Empty()
-                .Add( "bg-danger-100 data-[selected=true]:text-danger-700", when: slot is nameof( _td ) ),
+                .Add( "data-[selected=true]:bg-danger-100 data-[selected=true]:text-danger-700", when: slot is nameof( _td ) ),
 
             ThemeColor.Info => ElementClass.Empty()
-                .Add( "bg-info-100 data-[selected=true]:text-info-700", when: slot is nameof( _td ) ),
+                .Add( "data-[selected=true]:bg-info-100 data-[selected=true]:text-info-700", when: slot is nameof( _td ) ),
 
             _ => ElementClass.Empty()
         };
diff --git a/src/LumexUI/Styles/InputField.cs b/src/LumexUI/Styles/InputField.cs
index efd9ea1e..46790b0d 100644
--- a/src/LumexUI/Styles/InputField.cs
+++ b/src/LumexUI/Styles/InputField.cs
@@ -36,7 +36,7 @@ internal static class InputField
         .Add( "group-data-[filled-focused=true]:pointer-events-auto" )
         // transition
         .Add( "will-change-auto" )
-        .Add( "transition-[transform,color,left,opacity]" )
+        .Add( "transition-[transform,color,left,opacity,translate,scale]" )
         .Add( "motion-reduce:transition-none" )
         .ToString();
 
@@ -51,7 +51,7 @@ internal static class InputField
         .Add( "px-3" )
         .Add( "gap-3" )
         .Add( "w-full" )
-        .Add( "shadow-sm" )
+        .Add( "shadow-xs" )
         .Add( "cursor-text" )
         // transition
         .Add( "transition-[background]" )
@@ -70,7 +70,7 @@ internal static class InputField
         .Add( "w-full" )
         .Add( "font-normal" )
         .Add( "bg-transparent" )
-        .Add( "focus-visible:outline-none" )
+        .Add( "focus-visible:outline-hidden" )
         .Add( "placeholder:text-foreground-500" )
         .Add( "autofill:bg-transparent" )
         .Add( "data-[has-start-content=true]:ps-1.5" )
@@ -79,7 +79,6 @@ internal static class InputField
 
     private readonly static string _clearButton = ElementClass.Empty()
         .Add( "p-0.5" )
-        //.Add( "-m-2" )
         .Add( "z-10" )
         .Add( "absolute" )
         .Add( "end-1.5" )
@@ -87,6 +86,7 @@ internal static class InputField
         .Add( "hover:!opacity-100" )
         .Add( "active:!opacity-focus" )
         .Add( "rounded-full" )
+        .Add( "cursor-pointer" )
         // transition
         .Add( "transition-opacity" )
         .Add( "motion-reduce:transition-none" )
@@ -191,8 +191,8 @@ private static ElementClass GetVariantStyles( InputVariant variant, string slot
             InputVariant.Flat => ElementClass.Empty()
                 .Add( ElementClass.Empty()
                     .Add( "bg-default-100" )
-                    .Add( "hover:bg-default-200" )
-                    .Add( "group-data-[focus=true]:bg-default-100" ), when: slot is nameof( _inputWrapper ) ),
+                    .Add( "group-data-[focus=true]:bg-default-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-default-200" ), when: slot is nameof( _inputWrapper ) ),
             // focus ring
             // TODO: Seems like we need a JavaScript call similar to React Aria `useFocusVisible` hook
             //.Add( Utils.GroupDataFocusVisible ) )
@@ -201,9 +201,9 @@ private static ElementClass GetVariantStyles( InputVariant variant, string slot
                 .Add( ElementClass.Empty()
                     .Add( "border-2" )
                     .Add( "border-default-200" )
-                    .Add( "hover:border-default-300" )
-                    .Add( "transition-colors" )
-                    .Add( "group-data-[focus=true]:border-default-foreground" ), when: slot is nameof( _inputWrapper ) ),
+                    .Add( "group-data-[focus=true]:border-default-foreground" )
+                    .Add( "group-data-[focus=false]:hover:border-default-300" )
+                    .Add( "transition-colors" ), when: slot is nameof( _inputWrapper ) ),
 
             InputVariant.Underlined => ElementClass.Empty()
                 .Add( ElementClass.Empty()
@@ -237,13 +237,13 @@ private static ElementClass GetVariantInvalidStyles( InputVariant variant, strin
             InputVariant.Flat => ElementClass.Empty()
                 .Add( ElementClass.Empty()
                     .Add( "!bg-danger-50" )
-                    .Add( "hover:!bg-danger-100" )
-                    .Add( "group-data-[focus=true]:!bg-danger-50" ), when: slot is nameof( _inputWrapper ) ),
+                    .Add( "hover:bg-danger-100!" )
+                    .Add( "group-data-[focus=true]:bg-danger-50!" ), when: slot is nameof( _inputWrapper ) ),
 
             InputVariant.Outlined => ElementClass.Empty()
                 .Add( ElementClass.Empty()
-                    .Add( "!border-danger" )
-                    .Add( "group-data-[focus=true]:!border-danger" ), when: slot is nameof( _inputWrapper ) ),
+                    .Add( "border-danger!" )
+                    .Add( "group-data-[focus=true]:border-danger!" ), when: slot is nameof( _inputWrapper ) ),
 
             InputVariant.Underlined => ElementClass.Empty()
                 .Add( "after:!bg-danger", when: slot is nameof( _inputWrapper ) ),
@@ -263,7 +263,7 @@ private static ElementClass GetVariantFlatByColorStyles( ThemeColor color, strin
                 .Add( ElementClass.Empty()
                     .Add( "text-primary" )
                     .Add( "bg-primary-50" )
-                    .Add( "hover:bg-primary-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-primary-100" )
                     .Add( "placeholder:text-primary" )
                     .Add( "group-data-[focus=true]:bg-primary-50" ), when: slot is nameof( _inputWrapper ) )
                 .Add( "placeholder:text-primary", when: slot is nameof( _input ) )
@@ -273,7 +273,7 @@ private static ElementClass GetVariantFlatByColorStyles( ThemeColor color, strin
                 .Add( ElementClass.Empty()
                     .Add( "text-secondary" )
                     .Add( "bg-secondary-50" )
-                    .Add( "hover:bg-secondary-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-secondary-100" )
                     .Add( "placeholder:text-secondary" )
                     .Add( "group-data-[focus=true]:bg-secondary-50" ), when: slot is nameof( _inputWrapper ) )
                 .Add( "placeholder:text-secondary", when: slot is nameof( _input ) )
@@ -284,7 +284,7 @@ private static ElementClass GetVariantFlatByColorStyles( ThemeColor color, strin
                     .Add( "text-success-600" )
                     .Add( "dark:text-success" )
                     .Add( "bg-success-50" )
-                    .Add( "hover:bg-success-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-success-100" )
                     .Add( "placeholder:text-success-600" )
                     .Add( "group-data-[focus=true]:bg-success-50" ), when: slot is nameof( _inputWrapper ) )
                 .Add( "placeholder:text-success-600 dark:placeholder:text-success", when: slot is nameof( _input ) )
@@ -295,7 +295,7 @@ private static ElementClass GetVariantFlatByColorStyles( ThemeColor color, strin
                     .Add( "text-warning-600" )
                     .Add( "dark:text-warning" )
                     .Add( "bg-warning-50" )
-                    .Add( "hover:bg-warning-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-warning-100" )
                     .Add( "placeholder:text-warning-600" )
                     .Add( "group-data-[focus=true]:bg-warning-50" ), when: slot is nameof( _inputWrapper ) )
                 .Add( "placeholder:text-warning-600 dark:placeholder:text-warning", when: slot is nameof( _input ) )
@@ -306,7 +306,7 @@ private static ElementClass GetVariantFlatByColorStyles( ThemeColor color, strin
                     .Add( "text-danger-600" )
                     .Add( "dark:text-danger" )
                     .Add( "bg-danger-50" )
-                    .Add( "hover:bg-danger-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-danger-100" )
                     .Add( "placeholder:text-danger-600" )
                     .Add( "group-data-[focus=true]:bg-danger-50" ), when: slot is nameof( _inputWrapper ) )
                 .Add( "placeholder:text-danger-600 dark:placeholder:text-danger", when: slot is nameof( _input ) )
@@ -316,7 +316,7 @@ private static ElementClass GetVariantFlatByColorStyles( ThemeColor color, strin
                 .Add( ElementClass.Empty()
                     .Add( "text-info" )
                     .Add( "bg-info-50" )
-                    .Add( "hover:bg-info-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-info-100" )
                     .Add( "placeholder:text-info" )
                     .Add( "group-data-[focus=true]:bg-info-50" ), when: slot is nameof( _inputWrapper ) )
                 .Add( "placeholder:text-info", when: slot is nameof( _input ) )
@@ -423,19 +423,19 @@ private static ElementClass GetLabelPlacementInsideBySizeStyles( Size size, stri
                 .Add( "h-12 py-1.5", when: slot is nameof( _inputWrapper ) )
                 .Add( ElementClass.Empty()
                     .Add( "text-small" )
-                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]" ), when: slot is nameof( _label ) ),
+                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(50%_+_var(--text-tiny)/2_-_8px)]" ), when: slot is nameof( _label ) ),
 
             Size.Medium => ElementClass.Empty()
                 .Add( "h-14 py-2", when: slot is nameof( _inputWrapper ) )
                 .Add( ElementClass.Empty()
                     .Add( "text-small" )
-                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]" ), when: slot is nameof( _label ) ),
+                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(50%_+_var(--text-small)/2_-_6px)]" ), when: slot is nameof( _label ) ),
 
             Size.Large => ElementClass.Empty()
                 .Add( "h-16 py-2.5", when: slot is nameof( _inputWrapper ) )
                 .Add( ElementClass.Empty()
                     .Add( "text-medium" )
-                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]" ), when: slot is nameof( _label ) ),
+                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(50%_+_var(--text-small)/2_-_8px)]" ), when: slot is nameof( _label ) ),
 
             _ => ElementClass.Empty()
         };
@@ -446,25 +446,25 @@ private static ElementClass GetLabelPlacementOutsideBySizeStyles( Size size, str
         return size switch
         {
             Size.Small => ElementClass.Empty()
-                .Add( "has-[label]:mt-[calc(theme(fontSize.small)_+_8px)]", when: slot is nameof( _base ) )
+                .Add( "has-[label]:mt-[calc(var(--text-small))_+_8px)]", when: slot is nameof( _base ) )
                 .Add( ElementClass.Empty()
                     .Add( "text-tiny" )
                     .Add( "left-2" )
-                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]" ), when: slot is nameof( _label ) ),
+                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(100%_+_var(--text-tiny)/2_+_16px)]" ), when: slot is nameof( _label ) ),
 
             Size.Medium => ElementClass.Empty()
-                .Add( "has-[label]:mt-[calc(theme(fontSize.small)_+_10px)]", when: slot is nameof( _base ) )
+                .Add( "has-[label]:mt-[calc(var(--text-small)_+_10px)]", when: slot is nameof( _base ) )
                 .Add( ElementClass.Empty()
                     .Add( "text-small" )
                     .Add( "left-3" )
-                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]" ), when: slot is nameof( _label ) ),
+                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(100%_+_var(--text-small)/2_+_20px)]" ), when: slot is nameof( _label ) ),
 
             Size.Large => ElementClass.Empty()
-                .Add( "has-[label]:mt-[calc(theme(fontSize.small)_+_12px)]", when: slot is nameof( _base ) )
+                .Add( "has-[label]:mt-[calc(var(--text-small)_+_12px)]", when: slot is nameof( _base ) )
                 .Add( ElementClass.Empty()
                     .Add( "text-medium" )
                     .Add( "left-3" )
-                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]" ), when: slot is nameof( _label ) ),
+                    .Add( "group-data-[filled-focused=true]:-translate-y-[calc(100%_+_var(--text-small)/2_+_24px)]" ), when: slot is nameof( _label ) ),
 
             _ => ElementClass.Empty()
         };
diff --git a/src/LumexUI/Styles/Menu.cs b/src/LumexUI/Styles/Menu.cs
index d0e98744..151f14b3 100644
--- a/src/LumexUI/Styles/Menu.cs
+++ b/src/LumexUI/Styles/Menu.cs
@@ -41,7 +41,7 @@ public static ComponentVariant Style( TwMerge twMerge )
 					.Add( "flex" )
 					.Add( "flex-col" )
 					.Add( "gap-0.5" )
-					.Add( "outline-none" )
+					.Add( "outline-hidden" )
 					.ToString(),
 
 				[nameof( MenuSlots.EmptyContent )] = new ElementClass()
@@ -82,7 +82,6 @@ public static ComponentVariant Style( TwMerge twMerge )
 					.Add( "items-center" )
 					.Add( "justify-between" )
 					.Add( "rounded-small" )
-					.Add( "outline-none" )
 					.Add( "cursor-pointer" )
 					// transition
 					.Add( "hover:transition-colors-shadow" )
diff --git a/src/LumexUI/Styles/Navbar.cs b/src/LumexUI/Styles/Navbar.cs
index bda0b79e..55aedd47 100644
--- a/src/LumexUI/Styles/Navbar.cs
+++ b/src/LumexUI/Styles/Navbar.cs
@@ -35,10 +35,10 @@ internal readonly record struct Navbar
         .Add( "group" )
         .Add( "w-6" )
         .Add( "h-full" )
-        .Add( "outline-none" )
         .Add( "rounded-small" )
-        // focus
-        .Add( Utils.FocusVisible )
+		.Add( "cursor-pointer" )
+		// focus
+		.Add( Utils.FocusVisible )
         .ToString();
 
     private readonly static string _toggleIcon = ElementClass.Empty()
diff --git a/src/LumexUI/Styles/Popover.cs b/src/LumexUI/Styles/Popover.cs
index 464b016a..aab799c1 100644
--- a/src/LumexUI/Styles/Popover.cs
+++ b/src/LumexUI/Styles/Popover.cs
@@ -31,7 +31,7 @@ public static ComponentVariant Style( TwMerge twMerge )
 					.ToString(),
 
 				["Wrapper"] = new ElementClass()
-					.Add( "animate-appearance-in" )
+					.Add( "animate-enter" )
 					.ToString(),
 
 				[nameof( PopoverSlots.Content )] = new ElementClass()
@@ -55,7 +55,7 @@ public static ComponentVariant Style( TwMerge twMerge )
 					.Add( "h-2.5" )
 					.Add( "absolute" )
 					.Add( "rotate-45" )
-					.Add( "rounded-sm" )
+					.Add( "rounded-xs" )
 					.ToString(),
 			},
 
diff --git a/src/LumexUI/Styles/Radio.cs b/src/LumexUI/Styles/Radio.cs
index 241819ec..4b4580b5 100644
--- a/src/LumexUI/Styles/Radio.cs
+++ b/src/LumexUI/Styles/Radio.cs
@@ -53,7 +53,7 @@ internal static class Radio
         .Add( "group-hover:bg-default-100" )
         .Add( "group-active:scale-95" )
         // transition
-        .Add( "transition-transform-colors" )
+        .Add( "transition-colors-transform" )
         .Add( Utils.ReduceMotion )
         // focus ring
         .Add( Utils.GroupFocusVisible )
diff --git a/src/LumexUI/Styles/Select.cs b/src/LumexUI/Styles/Select.cs
index 458608e0..0784f2b6 100644
--- a/src/LumexUI/Styles/Select.cs
+++ b/src/LumexUI/Styles/Select.cs
@@ -28,7 +28,7 @@ internal class Select
         // transition
         .Add( "will-change-auto" )
         .Add( "origin-top-left" )
-        .Add( "transition-[transform,color,left,opacity]" )
+        .Add( "transition-[transform,color,left,opacity,translate,scale]" )
         .Add( "motion-reduce:transition-none" )
         .ToString();
 
@@ -45,8 +45,9 @@ internal class Select
         .Add( "items-center" )
         .Add( "gap-3" )
         .Add( "px-3" )
-        .Add( "shadow-sm" )
-        .Add( "outline-none" )
+        .Add( "shadow-xs" )
+        .Add( "outline-hidden" )
+        .Add( "cursor-pointer" )
         // transition
         .Add( "transition-[background]" )
         .Add( "motion-reduce:transition-none" )
@@ -55,7 +56,7 @@ internal class Select
     private readonly static string _innerWrapper = ElementClass.Empty()
         .Add( "h-full" )
         .Add( "min-h-4" )
-        .Add( "w-[calc(100%_-_theme(spacing.6))]" )
+        .Add( "w-[calc(100%_-_--spacing(6))]" )
         .Add( "gap-1.5" )
         .Add( "inline-flex" )
         .Add( "items-center" )
@@ -63,14 +64,14 @@ internal class Select
 
     private readonly static string _selectorIcon = ElementClass.Empty()
         .Add( "absolute" )
-        .Add( "w-4" )
-        .Add( "h-4" )
+        .Add( "w-5" )
+        .Add( "h-5" )
         .Add( "end-3" )
         .Add( "data-[open=true]:rotate-180" )
         // transition
-        .Add( "transition-[transform,color]" )
-        .Add( "duration-150" )
-        .Add( "ease" )
+        .Add( "duration-200" )
+        .Add( "ease-out" )
+        .Add( "transition-colors-transform-opacity" )
         .Add( "motion-reduce:transition-none" )
         .ToString();
 
@@ -229,8 +230,8 @@ private static ElementClass GetVariantStyles( InputVariant variant, string slot
             InputVariant.Flat => ElementClass.Empty()
                 .Add( ElementClass.Empty()
                     .Add( "bg-default-100" )
-                    .Add( "hover:bg-default-50" )
                     .Add( "group-data-[focus=true]:bg-default-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-default-50" )
                     // focus ring
                     .Add( Utils.FocusVisible ), when: slot is nameof( _trigger ) ),
 
@@ -238,9 +239,9 @@ private static ElementClass GetVariantStyles( InputVariant variant, string slot
                 .Add( ElementClass.Empty()
                     .Add( "border-2" )
                     .Add( "border-default-200" )
-                    .Add( "hover:border-default-300" )
                     .Add( "data-[open=true]:border-default-foreground" )
                     .Add( "group-data-[focus=true]:border-default-foreground" )
+                    .Add( "group-data-[focus=false]:hover:border-default-300" )
                     .Add( "transition-colors" )
                     .Add( "motion-reduce:transition-none" ), when: slot is nameof( _trigger ) )
                 .Add( "group-data-[has-value=true]:text-default-foreground", when: slot is nameof( _value ) ),
@@ -360,14 +361,14 @@ private static ElementClass GetCompoundStyles( InputVariant variant, ThemeColor
             (InputVariant.Flat, ThemeColor.Default ) => ElementClass.Empty()
                 .Add( ElementClass.Empty()
                     .Add( "bg-default-100" )
-                    .Add( "hover:bg-default-50" ), when: slot is nameof( _trigger ) )
+                    .Add( "group-data-[focus=false]:hover:bg-default-50" ), when: slot is nameof( _trigger ) )
                 .Add( "group-data-[has-value=true]:text-default-foreground", when: slot is nameof( _value ) ),
 
             (InputVariant.Flat, ThemeColor.Primary ) => ElementClass.Empty()
                 .Add( ElementClass.Empty()
                     .Add( "bg-primary-50" )
                     .Add( "text-primary" )
-                    .Add( "hover:bg-primary-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-primary-100" )
                     .Add( "group-data-[focus=true]:bg-primary-50" ), when: slot is nameof( _trigger ) )
                 .Add( "text-primary", when: slot is nameof( _value ) )
                 .Add( "text-primary", when: slot is nameof( _label ) ),
@@ -376,7 +377,7 @@ private static ElementClass GetCompoundStyles( InputVariant variant, ThemeColor
                 .Add( ElementClass.Empty()
                     .Add( "bg-secondary-50" )
                     .Add( "text-secondary" )
-                    .Add( "hover:bg-secondary-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-secondary-100" )
                     .Add( "group-data-[focus=true]:bg-secondary-50" ), when: slot is nameof( _trigger ) )
                 .Add( "text-secondary", when: slot is nameof( _value ) )
                 .Add( "text-secondary", when: slot is nameof( _label ) ),
@@ -385,7 +386,7 @@ private static ElementClass GetCompoundStyles( InputVariant variant, ThemeColor
                 .Add( ElementClass.Empty()
                     .Add( "bg-success-50" )
                     .Add( "text-success-600" )
-                    .Add( "hover:bg-success-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-success-100" )
                     .Add( "group-data-[focus=true]:bg-success-50" ), when: slot is nameof( _trigger ) )
                 .Add( "text-success-600", when: slot is nameof( _value ) )
                 .Add( "text-success-600", when: slot is nameof( _label ) ),
@@ -394,7 +395,7 @@ private static ElementClass GetCompoundStyles( InputVariant variant, ThemeColor
                 .Add( ElementClass.Empty()
                     .Add( "bg-warning-50" )
                     .Add( "text-warning-600" )
-                    .Add( "hover:bg-warning-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-warning-100" )
                     .Add( "group-data-[focus=true]:bg-warning-50" ), when: slot is nameof( _trigger ) )
                 .Add( "text-warning", when: slot is nameof( _value ) )
                 .Add( "text-warning", when: slot is nameof( _label ) ),
@@ -403,7 +404,7 @@ private static ElementClass GetCompoundStyles( InputVariant variant, ThemeColor
                 .Add( ElementClass.Empty()
                     .Add( "bg-danger-50" )
                     .Add( "text-danger-600" )
-                    .Add( "hover:bg-danger-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-danger-100" )
                     .Add( "group-data-[focus=true]:bg-danger-50" ), when: slot is nameof( _trigger ) )
                 .Add( "text-danger", when: slot is nameof( _value ) )
                 .Add( "text-danger", when: slot is nameof( _label ) ),
@@ -412,7 +413,7 @@ private static ElementClass GetCompoundStyles( InputVariant variant, ThemeColor
                 .Add( ElementClass.Empty()
                     .Add( "bg-info-50" )
                     .Add( "text-info-600" )
-                    .Add( "hover:bg-info-100" )
+                    .Add( "group-data-[focus=false]:hover:bg-info-100" )
                     .Add( "group-data-[focus=true]:bg-info-50" ), when: slot is nameof( _trigger ) )
                 .Add( "text-info", when: slot is nameof( _value ) )
                 .Add( "text-info", when: slot is nameof( _label ) ),
@@ -515,7 +516,7 @@ private static ElementClass GetCompoundStyles( LabelPlacement labelPLacement, Si
             // outside / size
 
             (LabelPlacement.Outside, Size.Small ) => ElementClass.Empty()
-                .Add( "justify-end has-[label]:mt-[calc(theme(fontSize.small)_+_8px)]", when: slot is nameof( _base ) )
+                .Add( "justify-end has-[label]:mt-[calc(var(--text-small)_+_8px)]", when: slot is nameof( _base ) )
                 .Add( ElementClass.Empty()
                     .Add( "text-tiny" )
                     .Add( "z-20" )
@@ -523,10 +524,10 @@ private static ElementClass GetCompoundStyles( LabelPlacement labelPLacement, Si
                     .Add( "start-2" )
                     .Add( "-translate-y-1/2" )
                     .Add( "group-data-[filled=true]:start-0" )
-                    .Add( "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]" ), when: slot is nameof( _label ) ),
+                    .Add( "group-data-[filled=true]:-translate-y-[calc(100%_+_var(--text-tiny)/2_+_16px)]" ), when: slot is nameof( _label ) ),
 
             (LabelPlacement.Outside, Size.Medium ) => ElementClass.Empty()
-                .Add( "justify-end has-[label]:mt-[calc(theme(fontSize.small)_+_10px)]", when: slot is nameof( _base ) )
+                .Add( "justify-end has-[label]:mt-[calc(var(--text-small)_+_10px)]", when: slot is nameof( _base ) )
                 .Add( ElementClass.Empty()
                     .Add( "text-small" )
                     .Add( "z-20" )
@@ -534,10 +535,10 @@ private static ElementClass GetCompoundStyles( LabelPlacement labelPLacement, Si
                     .Add( "start-3" )
                     .Add( "-translate-y-1/2" )
                     .Add( "group-data-[filled=true]:start-0" )
-                    .Add( "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]" ), when: slot is nameof( _label ) ),
+                    .Add( "group-data-[filled=true]:-translate-y-[calc(100%_+_var(--text-small)/2_+_20px)]" ), when: slot is nameof( _label ) ),
 
             (LabelPlacement.Outside, Size.Large ) => ElementClass.Empty()
-                .Add( "justify-end has-[label]:mt-[calc(theme(fontSize.small)_+_12px)]", when: slot is nameof( _base ) )
+                .Add( "justify-end has-[label]:mt-[calc(var(--text-small)_+_12px)]", when: slot is nameof( _base ) )
                 .Add( ElementClass.Empty()
                     .Add( "text-medium" )
                     .Add( "z-20" )
@@ -545,7 +546,7 @@ private static ElementClass GetCompoundStyles( LabelPlacement labelPLacement, Si
                     .Add( "start-3" )
                     .Add( "-translate-y-1/2" )
                     .Add( "group-data-[filled=true]:start-0" )
-                    .Add( "group-data-[filled=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]" ), when: slot is nameof( _label ) ),
+                    .Add( "group-data-[filled=true]:-translate-y-[calc(100%_+_var(--text-small)/2_+_24px)]" ), when: slot is nameof( _label ) ),
 
             _ => ElementClass.Empty()
         };
@@ -559,35 +560,35 @@ private static ElementClass GetCompoundStyles( Size size, InputVariant variant,
             // size / flat
 
             (Size.Small, InputVariant.Flat ) => ElementClass.Empty()
-                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px)]", when: slot is nameof( _label ) ),
+                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--text-tiny)/2_-_8px)]", when: slot is nameof( _label ) ),
 
             (Size.Medium, InputVariant.Flat ) => ElementClass.Empty()
-                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px)]", when: slot is nameof( _label ) ),
+                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--text-small)/2_-_6px)]", when: slot is nameof( _label ) ),
 
             (Size.Large, InputVariant.Flat ) => ElementClass.Empty()
-                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px)]", when: slot is nameof( _label ) ),
+                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--text-small)/2_-_8px)]", when: slot is nameof( _label ) ),
 
             // size / outlined
 
             (Size.Small, InputVariant.Outlined ) => ElementClass.Empty()
-                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_8px_-_theme(borderWidth.2))]", when: slot is nameof( _label ) ),
+                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--text-tiny)/2_-_8px_-_--spacing(0.5))]", when: slot is nameof( _label ) ),
 
             (Size.Medium, InputVariant.Outlined ) => ElementClass.Empty()
-                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_6px_-_theme(borderWidth.2))]", when: slot is nameof( _label ) ),
+                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--text-small)/2_-_6px_-_--spacing(0.5))]", when: slot is nameof( _label ) ),
 
             (Size.Large, InputVariant.Outlined ) => ElementClass.Empty()
-                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_8px_-_theme(borderWidth.2))]", when: slot is nameof( _label ) ),
+                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--text-small)/2_-_8px_-_--spacing(0.5))]", when: slot is nameof( _label ) ),
 
             // size / underlined
 
             (Size.Small, InputVariant.Underlined ) => ElementClass.Empty()
-                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.tiny)/2_-_5px)]", when: slot is nameof( _label ) ),
+                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--text-tiny)/2_-_5px)]", when: slot is nameof( _label ) ),
 
             (Size.Medium, InputVariant.Underlined ) => ElementClass.Empty()
-                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_3.5px)]", when: slot is nameof( _label ) ),
+                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--text-small)/2_-_3.5px)]", when: slot is nameof( _label ) ),
 
             (Size.Large, InputVariant.Underlined ) => ElementClass.Empty()
-                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_theme(fontSize.small)/2_-_4px)]", when: slot is nameof( _label ) ),
+                .Add( "group-data-[filled=true]:-translate-y-[calc(50%_+_var(--text-small)/2_-_4px)]", when: slot is nameof( _label ) ),
 
             _ => ElementClass.Empty()
         };
@@ -602,7 +603,7 @@ private static ElementClass GetCompoundStyles( InputVariant variant, string slot
                 .Add( "bg-danger-50 hover:bg-danger-100 group-data-[focus=true]:bg-danger-50", when: slot is nameof( _trigger ) ),
 
             InputVariant.Outlined => ElementClass.Empty()
-                .Add( "!border-danger group-data-[focus=true]:border-danger", when: slot is nameof( _trigger ) ),
+                .Add( "border-danger! group-data-[focus=true]:border-danger", when: slot is nameof( _trigger ) ),
 
             InputVariant.Underlined => ElementClass.Empty()
                 .Add( "after:bg-danger", when: slot is nameof( _trigger ) ),
diff --git a/src/LumexUI/Styles/Switch.cs b/src/LumexUI/Styles/Switch.cs
index 5d970115..be51ecd3 100644
--- a/src/LumexUI/Styles/Switch.cs
+++ b/src/LumexUI/Styles/Switch.cs
@@ -19,7 +19,7 @@ internal readonly record struct Switch
         .Add( "inline-flex" )
         .Add( "items-center" )
         .Add( "justify-start" )
-        .Add( "outline-none" )
+        .Add( "outline-hidden" )
         .Add( "cursor-pointer" )
         .Add( "touch-none" )
         .ToString();
@@ -67,7 +67,7 @@ internal readonly record struct Switch
         // transition
         .Add( "opacity-0" )
         .Add( "scale-50" )
-        .Add( "transition-[transform,opacity]" )
+        .Add( "transition-transform-opacity" )
         .Add( "group-data-[checked=true]:scale-100" )
         .Add( "group-data-[checked=true]:opacity-100" )
         .ToString();
@@ -79,7 +79,7 @@ internal readonly record struct Switch
         .Add( "text-default-600" )
         // transition
         .Add( "opacity-100" )
-        .Add( "transition-[transform,opacity]" )
+        .Add( "transition-transform-opacity" )
         .Add( "group-data-[checked=true]:translate-x-3" )
         .Add( "group-data-[checked=true]:opacity-0" )
         .ToString();
diff --git a/src/LumexUI/Styles/Tabs.cs b/src/LumexUI/Styles/Tabs.cs
index ac082e3b..d8261548 100644
--- a/src/LumexUI/Styles/Tabs.cs
+++ b/src/LumexUI/Styles/Tabs.cs
@@ -40,7 +40,6 @@ internal class Tabs
 		.Add( "py-1" )
 		.Add( "justify-center" )
 		.Add( "items-center" )
-		.Add( "outline-none" )
 		.Add( "cursor-pointer" )
 		.Add( "data-[disabled=true]:!opacity-disabled" )
 		.Add( "data-[disabled=true]:cursor-not-allowed" )
@@ -65,7 +64,6 @@ internal class Tabs
 	private static readonly string _tabPanel = ElementClass.Empty()
 		.Add( "px-1" )
 		.Add( "py-3" )
-		.Add( "outline-none" )
 		// focus ring
 		.Add( Utils.FocusVisible )
 		.ToString();
@@ -140,7 +138,7 @@ private static ElementClass GetVariantStyles( TabVariant variant, string slot )
 				.Add( "inset-0", when: slot is nameof( _cursor ) ),
 
 			TabVariant.Outlined => ElementClass.Empty()
-				.Add( "bg-transparent border-2 border-default-200 shadow-sm", when: slot is nameof( _tabList ) )
+				.Add( "bg-transparent border-2 border-default-200 shadow-xs", when: slot is nameof( _tabList ) )
 				.Add( "inset-0", when: slot is nameof( _cursor ) ),
 
 			TabVariant.Underlined => ElementClass.Empty()
diff --git a/src/LumexUI/Styles/Utils.cs b/src/LumexUI/Styles/Utils.cs
index dad84ef5..e8d91362 100644
--- a/src/LumexUI/Styles/Utils.cs
+++ b/src/LumexUI/Styles/Utils.cs
@@ -9,7 +9,7 @@ internal class Utils
         .ToString();
 
     public readonly static string FocusVisible = ElementClass.Empty()
-        .Add( "outline-none" )
+        .Add( "outline-hidden" )
         .Add( "focus-visible:z-10" )
         .Add( "focus-visible:outline-2" )
         .Add( "focus-visible:outline-focus" )
@@ -17,7 +17,7 @@ internal class Utils
         .ToString();
 
     public readonly static string GroupFocusVisible = ElementClass.Empty()
-        .Add( "outline-none" )
+        .Add( "outline-hidden" )
         .Add( "group-focus-visible:z-10" )
         .Add( "group-focus-visible:ring-2" )
         .Add( "group-focus-visible:ring-focus" )
@@ -30,7 +30,7 @@ internal class Utils
         .ToString();
 
     //public readonly static string GroupDataFocusVisible = ElementClass.Empty()
-    //    .Add( "outline-none" )
+    //    .Add( "outline-hidden" )
     //    .Add( "group-data-[focus-visible=true]:z-10" )
     //    .Add( "group-data-[focus-visible=true]:ring-2" )
     //    .Add( "group-data-[focus-visible=true]:ring-focus" )
diff --git a/src/LumexUI/Styles/_theme.css b/src/LumexUI/Styles/_theme.css
new file mode 100644
index 00000000..7b4d5121
--- /dev/null
+++ b/src/LumexUI/Styles/_theme.css
@@ -0,0 +1,212 @@
+/* https://tailwindcss.com/docs/theme#theme-variable-namespaces */
+@theme static inline {
+    /* Colors */
+    --color-background: var(--lumex-background);
+
+    --color-foreground-50: var(--lumex-foreground-50);
+    --color-foreground-100: var(--lumex-foreground-100);
+    --color-foreground-200: var(--lumex-foreground-200);
+    --color-foreground-300: var(--lumex-foreground-300);
+    --color-foreground-400: var(--lumex-foreground-400);
+    --color-foreground-500: var(--lumex-foreground-500);
+    --color-foreground-600: var(--lumex-foreground-600);
+    --color-foreground-700: var(--lumex-foreground-700);
+    --color-foreground-800: var(--lumex-foreground-800);
+    --color-foreground-900: var(--lumex-foreground-900);
+    --color-foreground-950: var(--lumex-foreground-950);
+    --color-foreground: var(--lumex-foreground);
+
+    --color-focus: var(--lumex-focus);
+    --color-overlay: var(--lumex-overlay);
+    --color-divider: --alpha(var(--lumex-divider) / var(--lumex-opacity-divider));
+    --color-surface1: var(--lumex-surface1);
+    --color-surface1-foreground: var(--lumex-surface1-foreground);
+    --color-surface2: var(--lumex-surface2);
+    --color-surface2-foreground: var(--lumex-surface2-foreground);
+    --color-surface3: var(--lumex-surface3);
+    --color-surface3-foreground: var(--lumex-surface3-foreground);
+
+    --color-default-50: var(--lumex-default-50);
+    --color-default-100: var(--lumex-default-100);
+    --color-default-200: var(--lumex-default-200);
+    --color-default-300: var(--lumex-default-300);
+    --color-default-400: var(--lumex-default-400);
+    --color-default-500: var(--lumex-default-500);
+    --color-default-600: var(--lumex-default-600);
+    --color-default-700: var(--lumex-default-700);
+    --color-default-800: var(--lumex-default-800);
+    --color-default-900: var(--lumex-default-900);
+    --color-default-950: var(--lumex-default-950);
+    --color-default: var(--lumex-default);
+    --color-default-foreground: var(--lumex-default-foreground);
+
+    --color-primary-50: var(--lumex-primary-50);
+    --color-primary-100: var(--lumex-primary-100);
+    --color-primary-200: var(--lumex-primary-200);
+    --color-primary-300: var(--lumex-primary-300);
+    --color-primary-400: var(--lumex-primary-400);
+    --color-primary-500: var(--lumex-primary-500);
+    --color-primary-600: var(--lumex-primary-600);
+    --color-primary-700: var(--lumex-primary-700);
+    --color-primary-800: var(--lumex-primary-800);
+    --color-primary-900: var(--lumex-primary-900);
+    --color-primary-950: var(--lumex-primary-950);
+    --color-primary: var(--lumex-primary);
+    --color-primary-foreground: var(--lumex-primary-foreground);
+
+    --color-secondary-50: var(--lumex-secondary-50);
+    --color-secondary-100: var(--lumex-secondary-100);
+    --color-secondary-200: var(--lumex-secondary-200);
+    --color-secondary-300: var(--lumex-secondary-300);
+    --color-secondary-400: var(--lumex-secondary-400);
+    --color-secondary-500: var(--lumex-secondary-500);
+    --color-secondary-600: var(--lumex-secondary-600);
+    --color-secondary-700: var(--lumex-secondary-700);
+    --color-secondary-800: var(--lumex-secondary-800);
+    --color-secondary-900: var(--lumex-secondary-900);
+    --color-secondary-950: var(--lumex-secondary-950);
+    --color-secondary: var(--lumex-secondary);
+    --color-secondary-foreground: var(--lumex-secondary-foreground);
+
+    --color-success-50: var(--lumex-success-50);
+    --color-success-100: var(--lumex-success-100);
+    --color-success-200: var(--lumex-success-200);
+    --color-success-300: var(--lumex-success-300);
+    --color-success-400: var(--lumex-success-400);
+    --color-success-500: var(--lumex-success-500);
+    --color-success-600: var(--lumex-success-600);
+    --color-success-700: var(--lumex-success-700);
+    --color-success-800: var(--lumex-success-800);
+    --color-success-900: var(--lumex-success-900);
+    --color-success-950: var(--lumex-success-950);
+    --color-success: var(--lumex-success);
+    --color-success-foreground: var(--lumex-success-foreground);
+
+    --color-warning-50: var(--lumex-warning-50);
+    --color-warning-100: var(--lumex-warning-100);
+    --color-warning-200: var(--lumex-warning-200);
+    --color-warning-300: var(--lumex-warning-300);
+    --color-warning-400: var(--lumex-warning-400);
+    --color-warning-500: var(--lumex-warning-500);
+    --color-warning-600: var(--lumex-warning-600);
+    --color-warning-700: var(--lumex-warning-700);
+    --color-warning-800: var(--lumex-warning-800);
+    --color-warning-900: var(--lumex-warning-900);
+    --color-warning-950: var(--lumex-warning-950);
+    --color-warning: var(--lumex-warning);
+    --color-warning-foreground: var(--lumex-warning-foreground);
+
+    --color-danger-50: var(--lumex-danger-50);
+    --color-danger-100: var(--lumex-danger-100);
+    --color-danger-200: var(--lumex-danger-200);
+    --color-danger-300: var(--lumex-danger-300);
+    --color-danger-400: var(--lumex-danger-400);
+    --color-danger-500: var(--lumex-danger-500);
+    --color-danger-600: var(--lumex-danger-600);
+    --color-danger-700: var(--lumex-danger-700);
+    --color-danger-800: var(--lumex-danger-800);
+    --color-danger-900: var(--lumex-danger-900);
+    --color-danger-950: var(--lumex-danger-950);
+    --color-danger: var(--lumex-danger);
+    --color-danger-foreground: var(--lumex-danger-foreground);
+
+    --color-info-50: var(--lumex-info-50);
+    --color-info-100: var(--lumex-info-100);
+    --color-info-200: var(--lumex-info-200);
+    --color-info-300: var(--lumex-info-300);
+    --color-info-400: var(--lumex-info-400);
+    --color-info-500: var(--lumex-info-500);
+    --color-info-600: var(--lumex-info-600);
+    --color-info-700: var(--lumex-info-700);
+    --color-info-800: var(--lumex-info-800);
+    --color-info-900: var(--lumex-info-900);
+    --color-info-950: var(--lumex-info-950);
+    --color-info: var(--lumex-info);
+    --color-info-foreground: var(--lumex-info-foreground);
+
+    /* Typography */
+    --text-tiny: var(--lumex-font-size-tiny);
+    --text-small: var(--lumex-font-size-small);
+    --text-medium: var(--lumex-font-size-medium);
+    --text-large: var(--lumex-font-size-large);
+
+    --text-tiny--line-height: var(--lumex-line-height-tiny);
+    --text-small--line-height: var(--lumex-line-height-small);
+    --text-medium--line-height: var(--lumex-line-height-medium);
+    --text-large--line-height: var(--lumex-line-height-large);
+
+    --leading-tiny: var(--lumex-line-height-tiny);
+    --leading-small: var(--lumex-line-height-small);
+    --leading-medium: var(--lumex-line-height-medium);
+    --leading-large: var(--lumex-line-height-large);
+
+    /* Border Radii */
+    --radius-small: var(--lumex-radius-small);
+    --radius-medium: var(--lumex-radius-medium);
+    --radius-large: var(--lumex-radius-large);
+
+    /* Box Shadows */
+    --shadow-small: var(--lumex-shadow-small);
+    --shadow-medium: var(--lumex-shadow-medium);
+    --shadow-large: var(--lumex-shadow-large);
+
+    /* Opacities */
+    --opacity-divider: var(--lumex-opacity-divider);
+    --opacity-disabled: var(--lumex-opacity-disabled);
+    --opacity-focus: var(--lumex-opacity-focus);
+    --opacity-hover: var(--lumex-opacity-hover);
+
+    /* 
+        Transitions
+        See https://github.com/tailwindlabs/tailwindcss/issues/16639#issuecomment-2668151481
+    */
+    /* 
+        `--transition-colors` and `transition-transform` are reusable variables. 
+        They not defined as `--transition-property-colors` and `--transition-property-transform` due to a bug in the Tailwind compiler.
+        See https://github.com/tailwindlabs/tailwindcss/issues/16639#issuecomment-2668844455
+    */
+    --transition-colors: color, background-color, border-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
+    --transition-transforms: transform, translate, scale, rotate;
+    --transition-property-colors-shadow: var(--transition-colors), box-shadow;
+    --transition-property-colors-opacity: var(--transition-colors), opacity;
+    --transition-property-colors-transform: var(--transition-colors), var(--transition-transforms);
+    --transition-property-colors-transform-opacity: var(--transition-property-colors-transform), opacity;
+    --transition-property-transform-opacity: var(--transition-transforms), opacity;
+
+    /* Animations */
+    --animate-enter: enter 200ms ease-out normal both;
+
+    @keyframes enter {
+        0% {
+            opacity: 0;
+            transform: translateZ(0)  scale(0.85);
+        }
+
+        100% {
+            opacity: 1;
+            transform: translateZ(0) scale(1);
+        }
+    }
+
+    /* Override Defaults */
+    --default-transition-duration: 250ms;
+}
+
+/*
+    The `opacity-*` utilities are generated from the `--opacity-*` theme values.
+    See https://tailwindcss.com/docs/adding-custom-styles#matching-theme-values
+*/
+@utility opacity-* {
+    opacity: --value(--opacity-*);
+}
+
+@utility scrollbar-hide {
+    /* Hide scrollbar for IE, Edge and Firefox */
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+
+    /* Hide scrollbar for Chrome, Safari and Opera */
+    &::-webkit-scrollbar {
+        display: none;
+    }
+}
diff --git a/src/LumexUI/Theme/Colors/Colors.cs b/src/LumexUI/Theme/Colors/Colors.cs
index 6440f447..2bdaf9fa 100644
--- a/src/LumexUI/Theme/Colors/Colors.cs
+++ b/src/LumexUI/Theme/Colors/Colors.cs
@@ -5,494 +5,494 @@
 namespace LumexUI.Theme;
 
 /// 
-/// Provides predefined colors and color scales for themes.
-/// 
-/// See 
-/// 
+/// Provides a set of predefined color scales.
 /// 
+/// 
+/// See 
+/// 
 public static class Colors
 {
-    /// 
-    /// The white color.
-    /// 
-    public const string White = "#FFFFFF";
+	/// 
+	/// The black color.
+	/// 
+	public const string Black = "#000";
 
-    /// 
-    /// The black color.
-    /// 
-    public const string Black = "#000000";
+	/// 
+	/// The white color.
+	/// 
+	public const string White = "#fff";
 
-    /// 
-    /// The scale of slate colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Slate = new Dictionary()
-    {
-        ["50"] = "#f8fafc",
-        ["100"] = "#f1f5f9",
-        ["200"] = "#e2e8f0",
-        ["300"] = "#cbd5e1",
-        ["400"] = "#94a3b8",
-        ["500"] = "#64748b",
-        ["600"] = "#475569",
-        ["700"] = "#334155",
-        ["800"] = "#1e293b",
-        ["900"] = "#0f172a",
-        ["950"] = "#020617"
-    }.AsReadOnly();
+	/// 
+	/// The scale of slate colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Slate = new Dictionary()
+	{
+		["50"] = "oklch(0.984 0.003 247.858)",
+		["100"] = "oklch(0.968 0.007 247.896)",
+		["200"] = "oklch(0.929 0.013 255.508)",
+		["300"] = "oklch(0.869 0.022 252.894)",
+		["400"] = "oklch(0.704 0.04 256.788)",
+		["500"] = "oklch(0.554 0.046 257.417)",
+		["600"] = "oklch(0.446 0.043 257.281)",
+		["700"] = "oklch(0.372 0.044 257.287)",
+		["800"] = "oklch(0.279 0.041 260.031)",
+		["900"] = "oklch(0.208 0.042 265.755)",
+		["950"] = "oklch(0.129 0.042 264.695)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of gray colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Gray = new Dictionary()
-    {
-        ["50"] = "#f9fafb",
-        ["100"] = "#f3f4f6",
-        ["200"] = "#e5e7eb",
-        ["300"] = "#d1d5db",
-        ["400"] = "#9ca3af",
-        ["500"] = "#6b7280",
-        ["600"] = "#4b5563",
-        ["700"] = "#374151",
-        ["800"] = "#1f2937",
-        ["900"] = "#111827",
-        ["950"] = "#030712"
-    }.AsReadOnly();
+	/// 
+	/// The scale of gray colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Gray = new Dictionary()
+	{
+		["50"] = "oklch(0.985 0.002 247.839)",
+		["100"] = "oklch(0.967 0.003 264.542)",
+		["200"] = "oklch(0.928 0.006 264.531)",
+		["300"] = "oklch(0.872 0.01 258.338)",
+		["400"] = "oklch(0.707 0.022 261.325)",
+		["500"] = "oklch(0.551 0.027 264.364)",
+		["600"] = "oklch(0.446 0.03 256.802)",
+		["700"] = "oklch(0.373 0.034 259.733)",
+		["800"] = "oklch(0.278 0.033 256.848)",
+		["900"] = "oklch(0.21 0.034 264.665)",
+		["950"] = "oklch(0.13 0.028 261.692)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of zinc colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Zinc = new Dictionary()
-    {
-        ["50"] = "#fafafa",
-        ["100"] = "#f4f4f5",
-        ["200"] = "#e4e4e7",
-        ["300"] = "#d4d4d8",
-        ["400"] = "#a1a1aa",
-        ["500"] = "#71717a",
-        ["600"] = "#52525b",
-        ["700"] = "#3f3f46",
-        ["800"] = "#27272a",
-        ["900"] = "#18181b",
-        ["950"] = "#09090b"
-    }.AsReadOnly();
+	/// 
+	/// The scale of zinc colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Zinc = new Dictionary()
+	{
+		["50"] = "oklch(0.985 0 0)",
+		["100"] = "oklch(0.967 0.001 286.375)",
+		["200"] = "oklch(0.92 0.004 286.32)",
+		["300"] = "oklch(0.871 0.006 286.286)",
+		["400"] = "oklch(0.705 0.015 286.067)",
+		["500"] = "oklch(0.552 0.016 285.938)",
+		["600"] = "oklch(0.442 0.017 285.786)",
+		["700"] = "oklch(0.37 0.013 285.805)",
+		["800"] = "oklch(0.274 0.006 286.033)",
+		["900"] = "oklch(0.21 0.006 285.885)",
+		["950"] = "oklch(0.141 0.005 285.823)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of neutral colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Neutral = new Dictionary()
-    {
-        ["50"] = "#fafafa",
-        ["100"] = "#f5f5f5",
-        ["200"] = "#e5e5e5",
-        ["300"] = "#d4d4d4",
-        ["400"] = "#a3a3a3",
-        ["500"] = "#737373",
-        ["600"] = "#525252",
-        ["700"] = "#404040",
-        ["800"] = "#262626",
-        ["900"] = "#171717",
-        ["950"] = "#0a0a0a"
-    }.AsReadOnly();
+	/// 
+	/// The scale of neutral colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Neutral = new Dictionary()
+	{
+		["50"] = "oklch(0.985 0 0)",
+		["100"] = "oklch(0.97 0 0)",
+		["200"] = "oklch(0.922 0 0)",
+		["300"] = "oklch(0.87 0 0)",
+		["400"] = "oklch(0.708 0 0)",
+		["500"] = "oklch(0.556 0 0)",
+		["600"] = "oklch(0.439 0 0)",
+		["700"] = "oklch(0.371 0 0)",
+		["800"] = "oklch(0.269 0 0)",
+		["900"] = "oklch(0.205 0 0)",
+		["950"] = "oklch(0.145 0 0)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of stone colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Stone = new Dictionary()
-    {
-        ["50"] = "#fafaf9",
-        ["100"] = "#f5f5f4",
-        ["200"] = "#e7e5e4",
-        ["300"] = "#d6d3d1",
-        ["400"] = "#a8a29e",
-        ["500"] = "#78716c",
-        ["600"] = "#57534e",
-        ["700"] = "#44403c",
-        ["800"] = "#292524",
-        ["900"] = "#1c1917",
-        ["950"] = "#0c0a09"
-    }.AsReadOnly();
+	/// 
+	/// The scale of stone colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Stone = new Dictionary()
+	{
+		["50"] = "oklch(0.985 0.001 106.423)",
+		["100"] = "oklch(0.97 0.001 106.424)",
+		["200"] = "oklch(0.923 0.003 48.717)",
+		["300"] = "oklch(0.869 0.005 56.366)",
+		["400"] = "oklch(0.709 0.01 56.259)",
+		["500"] = "oklch(0.553 0.013 58.071)",
+		["600"] = "oklch(0.444 0.011 73.639)",
+		["700"] = "oklch(0.374 0.01 67.558)",
+		["800"] = "oklch(0.268 0.007 34.298)",
+		["900"] = "oklch(0.216 0.006 56.043)",
+		["950"] = "oklch(0.147 0.004 49.25)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of red colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Red = new Dictionary()
-    {
-        ["50"] = "#fef2f2",
-        ["100"] = "#fee2e2",
-        ["200"] = "#fecaca",
-        ["300"] = "#fca5a5",
-        ["400"] = "#f87171",
-        ["500"] = "#ef4444",
-        ["600"] = "#dc2626",
-        ["700"] = "#b91c1c",
-        ["800"] = "#991b1b",
-        ["900"] = "#7f1d1d",
-        ["950"] = "#450a0a"
-    }.AsReadOnly();
+	/// 
+	/// The scale of red colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Red = new Dictionary()
+	{
+		["50"] = "oklch(0.971 0.013 17.38)",
+		["100"] = "oklch(0.936 0.032 17.717)",
+		["200"] = "oklch(0.885 0.062 18.334)",
+		["300"] = "oklch(0.808 0.114 19.571)",
+		["400"] = "oklch(0.704 0.191 22.216)",
+		["500"] = "oklch(0.637 0.237 25.331)",
+		["600"] = "oklch(0.577 0.245 27.325)",
+		["700"] = "oklch(0.505 0.213 27.518)",
+		["800"] = "oklch(0.444 0.177 26.899)",
+		["900"] = "oklch(0.396 0.141 25.723)",
+		["950"] = "oklch(0.258 0.092 26.042)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of orange colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Orange = new Dictionary()
-    {
-        ["50"] = "#fff7ed",
-        ["100"] = "#ffedd5",
-        ["200"] = "#fed7aa",
-        ["300"] = "#fdba74",
-        ["400"] = "#fb923c",
-        ["500"] = "#f97316",
-        ["600"] = "#ea580c",
-        ["700"] = "#c2410c",
-        ["800"] = "#9a3412",
-        ["900"] = "#7c2d12",
-        ["950"] = "#431407"
-    }.AsReadOnly();
+	/// 
+	/// The scale of orange colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Orange = new Dictionary()
+	{
+		["50"] = "oklch(0.98 0.016 73.684)",
+		["100"] = "oklch(0.954 0.038 75.164)",
+		["200"] = "oklch(0.901 0.076 70.697)",
+		["300"] = "oklch(0.837 0.128 66.29)",
+		["400"] = "oklch(0.75 0.183 55.934)",
+		["500"] = "oklch(0.705 0.213 47.604)",
+		["600"] = "oklch(0.646 0.222 41.116)",
+		["700"] = "oklch(0.553 0.195 38.402)",
+		["800"] = "oklch(0.47 0.157 37.304)",
+		["900"] = "oklch(0.408 0.123 38.172)",
+		["950"] = "oklch(0.266 0.079 36.259)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of amber colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Amber = new Dictionary()
-    {
-        ["50"] = "#fffbeb",
-        ["100"] = "#fef3c7",
-        ["200"] = "#fde68a",
-        ["300"] = "#fcd34d",
-        ["400"] = "#fbbf24",
-        ["500"] = "#f59e0b",
-        ["600"] = "#d97706",
-        ["700"] = "#b45309",
-        ["800"] = "#92400e",
-        ["900"] = "#78350f",
-        ["950"] = "#451a03"
-    }.AsReadOnly();
+	/// 
+	/// The scale of amber colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Amber = new Dictionary()
+	{
+		["50"] = "oklch(0.987 0.022 95.277)",
+		["100"] = "oklch(0.962 0.059 95.617)",
+		["200"] = "oklch(0.924 0.12 95.746)",
+		["300"] = "oklch(0.879 0.169 91.605)",
+		["400"] = "oklch(0.828 0.189 84.429)",
+		["500"] = "oklch(0.769 0.188 70.08)",
+		["600"] = "oklch(0.666 0.179 58.318)",
+		["700"] = "oklch(0.555 0.163 48.998)",
+		["800"] = "oklch(0.473 0.137 46.201)",
+		["900"] = "oklch(0.414 0.112 45.904)",
+		["950"] = "oklch(0.279 0.077 45.635)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of yellow colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Yellow = new Dictionary()
-    {
-        ["50"] = "#fefce8",
-        ["100"] = "#fef9c3",
-        ["200"] = "#fef08a",
-        ["300"] = "#fde047",
-        ["400"] = "#facc15",
-        ["500"] = "#eab308",
-        ["600"] = "#ca8a04",
-        ["700"] = "#a16207",
-        ["800"] = "#854d0e",
-        ["900"] = "#713f12",
-        ["950"] = "#422006"
-    }.AsReadOnly();
+	/// 
+	/// The scale of yellow colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Yellow = new Dictionary()
+	{
+		["50"] = "oklch(0.987 0.026 102.212)",
+		["100"] = "oklch(0.973 0.071 103.193)",
+		["200"] = "oklch(0.945 0.129 101.54)",
+		["300"] = "oklch(0.905 0.182 98.111)",
+		["400"] = "oklch(0.852 0.199 91.936)",
+		["500"] = "oklch(0.795 0.184 86.047)",
+		["600"] = "oklch(0.681 0.162 75.834)",
+		["700"] = "oklch(0.554 0.135 66.442)",
+		["800"] = "oklch(0.476 0.114 61.907)",
+		["900"] = "oklch(0.421 0.095 57.708)",
+		["950"] = "oklch(0.286 0.066 53.813)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of lime colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Lime = new Dictionary()
-    {
-        ["50"] = "#f7fee7",
-        ["100"] = "#ecfccb",
-        ["200"] = "#d9f99d",
-        ["300"] = "#bef264",
-        ["400"] = "#a3e635",
-        ["500"] = "#84cc16",
-        ["600"] = "#65a30d",
-        ["700"] = "#4d7c0f",
-        ["800"] = "#3f6212",
-        ["900"] = "#365314",
-        ["950"] = "#1a2e05"
-    }.AsReadOnly();
+	/// 
+	/// The scale of lime colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Lime = new Dictionary()
+	{
+		["50"] = "oklch(0.986 0.031 120.757)",
+		["100"] = "oklch(0.967 0.067 122.328)",
+		["200"] = "oklch(0.938 0.127 124.321)",
+		["300"] = "oklch(0.897 0.196 126.665)",
+		["400"] = "oklch(0.841 0.238 128.85)",
+		["500"] = "oklch(0.768 0.233 130.85)",
+		["600"] = "oklch(0.648 0.2 131.684)",
+		["700"] = "oklch(0.532 0.157 131.589)",
+		["800"] = "oklch(0.453 0.124 130.933)",
+		["900"] = "oklch(0.405 0.101 131.063)",
+		["950"] = "oklch(0.274 0.072 132.109)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of green colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Green = new Dictionary()
-    {
-        ["50"] = "#f0fdf4",
-        ["100"] = "#dcfce7",
-        ["200"] = "#bbf7d0",
-        ["300"] = "#86efac",
-        ["400"] = "#4ade80",
-        ["500"] = "#22c55e",
-        ["600"] = "#16a34a",
-        ["700"] = "#15803d",
-        ["800"] = "#166534",
-        ["900"] = "#14532d",
-        ["950"] = "#052e16"
-    }.AsReadOnly();
+	/// 
+	/// The scale of green colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Green = new Dictionary()
+	{
+		["50"] = "oklch(0.982 0.018 155.826)",
+		["100"] = "oklch(0.962 0.044 156.743)",
+		["200"] = "oklch(0.925 0.084 155.995)",
+		["300"] = "oklch(0.871 0.15 154.449)",
+		["400"] = "oklch(0.792 0.209 151.711)",
+		["500"] = "oklch(0.723 0.219 149.579)",
+		["600"] = "oklch(0.627 0.194 149.214)",
+		["700"] = "oklch(0.527 0.154 150.069)",
+		["800"] = "oklch(0.448 0.119 151.328)",
+		["900"] = "oklch(0.393 0.095 152.535)",
+		["950"] = "oklch(0.266 0.065 152.934)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of emerald colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Emerald = new Dictionary()
-    {
-        ["50"] = "#ecfdf5",
-        ["100"] = "#d1fae5",
-        ["200"] = "#a7f3d0",
-        ["300"] = "#6ee7b7",
-        ["400"] = "#34d399",
-        ["500"] = "#10b981",
-        ["600"] = "#059669",
-        ["700"] = "#047857",
-        ["800"] = "#065f46",
-        ["900"] = "#064e3b",
-        ["950"] = "#022c22"
-    }.AsReadOnly();
+	/// 
+	/// The scale of emerald colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Emerald = new Dictionary()
+	{
+		["50"] = "oklch(0.979 0.021 166.113)",
+		["100"] = "oklch(0.95 0.052 163.051)",
+		["200"] = "oklch(0.905 0.093 164.15)",
+		["300"] = "oklch(0.845 0.143 164.978)",
+		["400"] = "oklch(0.765 0.177 163.223)",
+		["500"] = "oklch(0.696 0.17 162.48)",
+		["600"] = "oklch(0.596 0.145 163.225)",
+		["700"] = "oklch(0.508 0.118 165.612)",
+		["800"] = "oklch(0.432 0.095 166.913)",
+		["900"] = "oklch(0.378 0.077 168.94)",
+		["950"] = "oklch(0.262 0.051 172.552)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of teal colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Teal = new Dictionary()
-    {
-        ["50"] = "#f0fdfa",
-        ["100"] = "#ccfbf1",
-        ["200"] = "#99f6e4",
-        ["300"] = "#5eead4",
-        ["400"] = "#2dd4bf",
-        ["500"] = "#14b8a6",
-        ["600"] = "#0d9488",
-        ["700"] = "#0f766e",
-        ["800"] = "#115e59",
-        ["900"] = "#134e4a",
-        ["950"] = "#042f2e"
-    }.AsReadOnly();
+	/// 
+	/// The scale of teal colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Teal = new Dictionary()
+	{
+		["50"] = "oklch(0.984 0.014 180.72)",
+		["100"] = "oklch(0.953 0.051 180.801)",
+		["200"] = "oklch(0.91 0.096 180.426)",
+		["300"] = "oklch(0.855 0.138 181.071)",
+		["400"] = "oklch(0.777 0.152 181.912)",
+		["500"] = "oklch(0.704 0.14 182.503)",
+		["600"] = "oklch(0.6 0.118 184.704)",
+		["700"] = "oklch(0.511 0.096 186.391)",
+		["800"] = "oklch(0.437 0.078 188.216)",
+		["900"] = "oklch(0.386 0.063 188.416)",
+		["950"] = "oklch(0.277 0.046 192.524)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of cyan colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Cyan = new Dictionary()
-    {
-        ["50"] = "#ecfeff",
-        ["100"] = "#cffafe",
-        ["200"] = "#a5f3fc",
-        ["300"] = "#67e8f9",
-        ["400"] = "#22d3ee",
-        ["500"] = "#06b6d4",
-        ["600"] = "#0891b2",
-        ["700"] = "#0e7490",
-        ["800"] = "#155e75",
-        ["900"] = "#164e63",
-        ["950"] = "#083344"
-    }.AsReadOnly();
+	/// 
+	/// The scale of cyan colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Cyan = new Dictionary()
+	{
+		["50"] = "oklch(0.984 0.019 200.873)",
+		["100"] = "oklch(0.956 0.045 203.388)",
+		["200"] = "oklch(0.917 0.08 205.041)",
+		["300"] = "oklch(0.865 0.127 207.078)",
+		["400"] = "oklch(0.789 0.154 211.53)",
+		["500"] = "oklch(0.715 0.143 215.221)",
+		["600"] = "oklch(0.609 0.126 221.723)",
+		["700"] = "oklch(0.52 0.105 223.128)",
+		["800"] = "oklch(0.45 0.085 224.283)",
+		["900"] = "oklch(0.398 0.07 227.392)",
+		["950"] = "oklch(0.302 0.056 229.695)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of sky colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Sky = new Dictionary()
-    {
-        ["50"] = "#f0f9ff",
-        ["100"] = "#e0f2fe",
-        ["200"] = "#bae6fd",
-        ["300"] = "#7dd3fc",
-        ["400"] = "#38bdf8",
-        ["500"] = "#0ea5e9",
-        ["600"] = "#0284c7",
-        ["700"] = "#0369a1",
-        ["800"] = "#075985",
-        ["900"] = "#0c4a6e",
-        ["950"] = "#082f49"
-    }.AsReadOnly();
+	/// 
+	/// The scale of sky colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Sky = new Dictionary()
+	{
+		["50"] = "oklch(0.977 0.013 236.62)",
+		["100"] = "oklch(0.951 0.026 236.824)",
+		["200"] = "oklch(0.901 0.058 230.902)",
+		["300"] = "oklch(0.828 0.111 230.318)",
+		["400"] = "oklch(0.746 0.16 232.661)",
+		["500"] = "oklch(0.685 0.169 237.323)",
+		["600"] = "oklch(0.588 0.158 241.966)",
+		["700"] = "oklch(0.5 0.134 242.749)",
+		["800"] = "oklch(0.443 0.11 240.79)",
+		["900"] = "oklch(0.391 0.09 240.876)",
+		["950"] = "oklch(0.293 0.066 243.157)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of blue colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Blue = new Dictionary()
-    {
-        ["50"] = "#eff6ff",
-        ["100"] = "#dbeafe",
-        ["200"] = "#bfdbfe",
-        ["300"] = "#93c5fd",
-        ["400"] = "#60a5fa",
-        ["500"] = "#3b82f6",
-        ["600"] = "#2563eb",
-        ["700"] = "#1d4ed8",
-        ["800"] = "#1e40af",
-        ["900"] = "#1e3a8a",
-        ["950"] = "#172554"
-    }.AsReadOnly();
+	/// 
+	/// The scale of blue colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Blue = new Dictionary()
+	{
+		["50"] = "oklch(0.97 0.014 254.604)",
+		["100"] = "oklch(0.932 0.032 255.585)",
+		["200"] = "oklch(0.882 0.059 254.128)",
+		["300"] = "oklch(0.809 0.105 251.813)",
+		["400"] = "oklch(0.707 0.165 254.624)",
+		["500"] = "oklch(0.623 0.214 259.815)",
+		["600"] = "oklch(0.546 0.245 262.881)",
+		["700"] = "oklch(0.488 0.243 264.376)",
+		["800"] = "oklch(0.424 0.199 265.638)",
+		["900"] = "oklch(0.379 0.146 265.522)",
+		["950"] = "oklch(0.282 0.091 267.935)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of indigo colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Indigo = new Dictionary()
-    {
-        ["50"] = "#eef2ff",
-        ["100"] = "#e0e7ff",
-        ["200"] = "#c7d2fe",
-        ["300"] = "#a5b4fc",
-        ["400"] = "#818cf8",
-        ["500"] = "#6366f1",
-        ["600"] = "#4f46e5",
-        ["700"] = "#4338ca",
-        ["800"] = "#3730a3",
-        ["900"] = "#312e81",
-        ["950"] = "#1e1b4b"
-    }.AsReadOnly();
+	/// 
+	/// The scale of indigo colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Indigo = new Dictionary()
+	{
+		["50"] = "oklch(0.962 0.018 272.314)",
+		["100"] = "oklch(0.93 0.034 272.788)",
+		["200"] = "oklch(0.87 0.065 274.039)",
+		["300"] = "oklch(0.785 0.115 274.713)",
+		["400"] = "oklch(0.673 0.182 276.935)",
+		["500"] = "oklch(0.585 0.233 277.117)",
+		["600"] = "oklch(0.511 0.262 276.966)",
+		["700"] = "oklch(0.457 0.24 277.023)",
+		["800"] = "oklch(0.398 0.195 277.366)",
+		["900"] = "oklch(0.359 0.144 278.697)",
+		["950"] = "oklch(0.257 0.09 281.288)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of violet colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Violet = new Dictionary()
-    {
-        ["50"] = "#f5f3ff",
-        ["100"] = "#ede9fe",
-        ["200"] = "#ddd6fe",
-        ["300"] = "#c4b5fd",
-        ["400"] = "#a78bfa",
-        ["500"] = "#8b5cf6",
-        ["600"] = "#7c3aed",
-        ["700"] = "#6d28d9",
-        ["800"] = "#5b21b6",
-        ["900"] = "#4c1d95",
-        ["950"] = "#2e1065"
-    }.AsReadOnly();
+	/// 
+	/// The scale of violet colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Violet = new Dictionary()
+	{
+		["50"] = "oklch(0.969 0.016 293.756)",
+		["100"] = "oklch(0.943 0.029 294.588)",
+		["200"] = "oklch(0.894 0.057 293.283)",
+		["300"] = "oklch(0.811 0.111 293.571)",
+		["400"] = "oklch(0.702 0.183 293.541)",
+		["500"] = "oklch(0.606 0.25 292.717)",
+		["600"] = "oklch(0.541 0.281 293.009)",
+		["700"] = "oklch(0.491 0.27 292.581)",
+		["800"] = "oklch(0.432 0.232 292.759)",
+		["900"] = "oklch(0.38 0.189 293.745)",
+		["950"] = "oklch(0.283 0.141 291.089)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of purple colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Purple = new Dictionary()
-    {
-        ["50"] = "#faf5ff",
-        ["100"] = "#f3e8ff",
-        ["200"] = "#e9d5ff",
-        ["300"] = "#d8b4fe",
-        ["400"] = "#c084fc",
-        ["500"] = "#a855f7",
-        ["600"] = "#9333ea",
-        ["700"] = "#7e22ce",
-        ["800"] = "#6b21a8",
-        ["900"] = "#581c87",
-        ["950"] = "#3b0764"
-    }.AsReadOnly();
+	/// 
+	/// The scale of purple colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Purple = new Dictionary()
+	{
+		["50"] = "oklch(0.977 0.014 308.299)",
+		["100"] = "oklch(0.946 0.033 307.174)",
+		["200"] = "oklch(0.902 0.063 306.703)",
+		["300"] = "oklch(0.827 0.119 306.383)",
+		["400"] = "oklch(0.714 0.203 305.504)",
+		["500"] = "oklch(0.627 0.265 303.9)",
+		["600"] = "oklch(0.558 0.288 302.321)",
+		["700"] = "oklch(0.496 0.265 301.924)",
+		["800"] = "oklch(0.438 0.218 303.724)",
+		["900"] = "oklch(0.381 0.176 304.987)",
+		["950"] = "oklch(0.291 0.149 302.717)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of fuchsia colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Fuchsia = new Dictionary()
-    {
-        ["50"] = "#fdf4ff",
-        ["100"] = "#fae8ff",
-        ["200"] = "#f5d0fe",
-        ["300"] = "#f0abfc",
-        ["400"] = "#e879f9",
-        ["500"] = "#d946ef",
-        ["600"] = "#c026d3",
-        ["700"] = "#a21caf",
-        ["800"] = "#86198f",
-        ["900"] = "#701a75",
-        ["950"] = "#4a044e"
-    }.AsReadOnly();
+	/// 
+	/// The scale of fuchsia colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Fuchsia = new Dictionary()
+	{
+		["50"] = "oklch(0.977 0.017 320.058)",
+		["100"] = "oklch(0.952 0.037 318.852)",
+		["200"] = "oklch(0.903 0.076 319.62)",
+		["300"] = "oklch(0.833 0.145 321.434)",
+		["400"] = "oklch(0.74 0.238 322.16)",
+		["500"] = "oklch(0.667 0.295 322.15)",
+		["600"] = "oklch(0.591 0.293 322.896)",
+		["700"] = "oklch(0.518 0.253 323.949)",
+		["800"] = "oklch(0.452 0.211 324.591)",
+		["900"] = "oklch(0.401 0.17 325.612)",
+		["950"] = "oklch(0.293 0.136 325.661)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of pink colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Pink = new Dictionary()
-    {
-        ["50"] = "#fdf2f8",
-        ["100"] = "#fce7f3",
-        ["200"] = "#fbcfe8",
-        ["300"] = "#f9a8d4",
-        ["400"] = "#f472b6",
-        ["500"] = "#ec4899",
-        ["600"] = "#db2777",
-        ["700"] = "#be185d",
-        ["800"] = "#9d174d",
-        ["900"] = "#831843",
-        ["950"] = "#500724"
-    }.AsReadOnly();
+	/// 
+	/// The scale of pink colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Pink = new Dictionary()
+	{
+		["50"] = "oklch(0.971 0.014 343.198)",
+		["100"] = "oklch(0.948 0.028 342.258)",
+		["200"] = "oklch(0.899 0.061 343.231)",
+		["300"] = "oklch(0.823 0.12 346.018)",
+		["400"] = "oklch(0.718 0.202 349.761)",
+		["500"] = "oklch(0.656 0.241 354.308)",
+		["600"] = "oklch(0.592 0.249 0.584)",
+		["700"] = "oklch(0.525 0.223 3.958)",
+		["800"] = "oklch(0.459 0.187 3.815)",
+		["900"] = "oklch(0.408 0.153 2.432)",
+		["950"] = "oklch(0.284 0.109 3.907)"
+	}.AsReadOnly();
 
-    /// 
-    /// The scale of rose colors.
-    /// 
-    /// See 
-    /// 
-    /// 
-    public readonly static IReadOnlyDictionary Rose = new Dictionary()
-    {
-        ["50"] = "#fff1f2",
-        ["100"] = "#ffe4e6",
-        ["200"] = "#fecdd3",
-        ["300"] = "#fda4af",
-        ["400"] = "#fb7185",
-        ["500"] = "#f43f5e",
-        ["600"] = "#e11d48",
-        ["700"] = "#be123c",
-        ["800"] = "#9f1239",
-        ["900"] = "#881337",
-        ["950"] = "#4c0519"
-    }.AsReadOnly();
+	/// 
+	/// The scale of rose colors.
+	/// 
+	/// 
+	/// See 
+	/// 
+	public readonly static IReadOnlyDictionary Rose = new Dictionary()
+	{
+		["50"] = "oklch(0.969 0.015 12.422)",
+		["100"] = "oklch(0.941 0.03 12.58)",
+		["200"] = "oklch(0.892 0.058 10.001)",
+		["300"] = "oklch(0.81 0.117 11.638)",
+		["400"] = "oklch(0.712 0.194 13.428)",
+		["500"] = "oklch(0.645 0.246 16.439)",
+		["600"] = "oklch(0.586 0.253 17.585)",
+		["700"] = "oklch(0.514 0.222 16.935)",
+		["800"] = "oklch(0.455 0.188 13.697)",
+		["900"] = "oklch(0.41 0.159 10.272)",
+		["950"] = "oklch(0.271 0.105 12.094)"
+	}.AsReadOnly();
 
-    /// 
-    /// Reverses the order of color values in a given color scale.
-    /// 
-    /// The color scale to reverse.
-    /// A  with the color scale reversed.
-    internal static Dictionary ReverseColorValues( IReadOnlyDictionary colorScale )
-    {
-        return colorScale.Keys
-            .Zip( colorScale.Values.Reverse(), ( key, reversedValue ) => new { Key = key, Value = reversedValue } )
-            .ToDictionary( x => x.Key, x => x.Value );
-    }
+	/// 
+	/// Reverses the order of color values in a given color scale.
+	/// 
+	/// The color scale to reverse.
+	/// A  with the color scale reversed.
+	internal static Dictionary ReverseColorValues( IReadOnlyDictionary colorScale )
+	{
+		return colorScale.Keys
+			.Zip( colorScale.Values.Reverse(), ( key, reversedValue ) => new { Key = key, Value = reversedValue } )
+			.ToDictionary( x => x.Key, x => x.Value );
+	}
 }
diff --git a/src/LumexUI/Utilities/ColorUtils.cs b/src/LumexUI/Utilities/ColorUtils.cs
index e7cbe07e..9e9e4b4e 100644
--- a/src/LumexUI/Utilities/ColorUtils.cs
+++ b/src/LumexUI/Utilities/ColorUtils.cs
@@ -4,107 +4,57 @@
 
 using System.Diagnostics.CodeAnalysis;
 using System.Globalization;
+using System.Text.RegularExpressions;
 
 using LumexUI.Theme;
 
 namespace LumexUI.Utilities;
 
 [ExcludeFromCodeCoverage]
-internal static class ColorUtils
+internal static partial class ColorUtils
 {
-    internal static string HexToHsl( string color )
-    {
-        HexToHsl( color, out var H, out var S, out var L );
-
-        var _H = H.ToString( "0.##", CultureInfo.InvariantCulture );
-        var _S = S.ToString( "0.##", CultureInfo.InvariantCulture );
-        var _L = L.ToString( "0.##", CultureInfo.InvariantCulture );
-
-        return $"{_H} {_S}% {_L}%";
-    }
-
-    internal static string GetReadableColor( string color )
-    {
-        return Luminance( color ) < .3 ? Colors.White : Colors.Black;
-    }
-
-    private static void HexToRgb( string color, out byte R, out byte G, out byte B )
-    {
-        color = color[1..];
-
-        if( color == null || !uint.TryParse( color, NumberStyles.HexNumber, CultureInfo.InvariantCulture, out var decimalValue ) )
-        {
-            throw new ArgumentException( $"Color hexadecimal value '{color}' is not in the correct format.", nameof( color ) );
-        }
-
-        R = (byte)( decimalValue >> 16 );
-        G = (byte)( decimalValue >> 8 );
-        B = (byte)( decimalValue >> 0 );
-    }
-
-    private static void HexToHsl( string color, out double H, out double S, out double L )
-    {
-        HexToRgb( color, out var R, out var G, out var B );
-
-        var _R = R / 255d;
-        var _G = G / 255d;
-        var _B = B / 255d;
-
-        var max = Math.Max( _R, Math.Max( _G, _B ) );
-        var min = Math.Min( _R, Math.Min( _G, _B ) );
-        var delta = max - min;
-
-        H = 0;
-        S = 0;
-        L = ( max + min ) / 2d;
-
-        if( delta != 0 )
-        {
-            S = L < 0.5
-                ? delta / ( max + min )
-                : delta / ( 2d - max - min );
-
-            if( _R == max )
-            {
-                H = ( _G - _B ) / delta;
-            }
-            else if( _G == max )
-            {
-                H = 2d + ( ( _B - _R ) / delta );
-            }
-            else if( _B == max )
-            {
-                H = 4d + ( ( _R - _G ) / delta );
-            }
-        }
-
-        H = Math.Round( H *= 60d, 2 );
-        S = Math.Round( S *= 100d, 2 );
-        L = Math.Round( L *= 100d, 2 );
-
-        if( H < 0 )
-        {
-            H += 360;
-        }
-    }
-
-    private static double Luminance( string color )
-    {
-        if( color == "transparent" )
-        {
-            return 0;
-        }
-
-        HexToRgb( color, out var R, out var G, out var B );
-        return 0.2126 * Linear( R ) + 0.7152 * Linear( G ) + 0.0722 * Linear( B );
-
-        static double Linear( double x )
-        {
-            var channel = x / 255;
-
-            return channel <= 0.04045
-                ? channel / 12.92
-                : Math.Pow( ( channel + 0.055 ) / 1.055, 2.4 );
-        }
-    }
+	internal static string GetReadableColor( string color )
+	{
+		ArgumentNullException.ThrowIfNull( color, nameof( color ) );
+
+		if( color is Colors.White )
+		{
+			return Colors.Black;
+		}
+		else if( color is Colors.Black )
+		{
+			return Colors.White;
+		}
+
+		return Luminance( color.Trim() ) < .65 ? Colors.White : Colors.Black;
+	}
+
+	private static double Luminance( string color )
+	{
+		if( color == "transparent" )
+		{
+			return 0;
+		}
+
+		if( color.StartsWith( "oklch" ) )
+		{
+			return GetOklchLuminance( color );
+		}
+
+		return 0;
+	}
+
+	private static double GetOklchLuminance( string color )
+	{
+		var match = Oklch().Match( color );
+		if( match.Success )
+		{
+			return double.Parse( match.Groups[1].Value, CultureInfo.InvariantCulture );
+		}
+
+		throw new ArgumentException( $"Color '{color}' is not in the correct format.", nameof( color ) );
+	}
+
+	[GeneratedRegex( @"oklch\(([\d.]+)\s([\d.]+)\s([\d.]+)\)" )]
+	private static partial Regex Oklch();
 }
diff --git a/src/LumexUI/package.json b/src/LumexUI/package.json
index b823745f..8618abed 100644
--- a/src/LumexUI/package.json
+++ b/src/LumexUI/package.json
@@ -6,9 +6,7 @@
     "@floating-ui/dom": "^1.6.10"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^26.0.1",
     "@rollup/plugin-node-resolve": "^15.2.3",
-    "rollup": "^4.24.0",
-    "tailwindcss": "^3.4.10"
+    "rollup": "^4.24.0"
   }
 }
diff --git a/src/LumexUI/rollup.config.mjs b/src/LumexUI/rollup.config.mjs
index cac08166..d6a99730 100644
--- a/src/LumexUI/rollup.config.mjs
+++ b/src/LumexUI/rollup.config.mjs
@@ -1,5 +1,4 @@
 import { defineConfig } from 'rollup';
-import commonjs from '@rollup/plugin-commonjs';
 import resolve from '@rollup/plugin-node-resolve';
 
 export default defineConfig([
@@ -10,16 +9,5 @@ export default defineConfig([
             format: 'esm',
         },
         plugins: [resolve()],
-    },
-    {
-        input: 'Scripts/Plugin/plugin.js',
-        output: {
-            file: 'Scripts/Plugin/dist/plugin.js',
-            format: 'cjs',
-        },
-        plugins: [
-            resolve(),
-            commonjs()
-        ],
-    }
+    } 
 ]);
diff --git a/tests/LumexUI.Tests/Components/Providers/ThemeProviderTests.cs b/tests/LumexUI.Tests/Components/Providers/ThemeProviderTests.cs
index 0a060604..35a7e086 100644
--- a/tests/LumexUI.Tests/Components/Providers/ThemeProviderTests.cs
+++ b/tests/LumexUI.Tests/Components/Providers/ThemeProviderTests.cs
@@ -4,6 +4,7 @@
 
 using System.Globalization;
 using System.Text;
+using System.Threading;
 
 using AngleSharp.Html.Dom;
 
@@ -36,140 +37,140 @@ public void ThemeProvider_DifferentCultures_ShouldRenderCorrectly( string cultur
 
         var expectedCssVars = new StringBuilder().AppendJoin( "\n",
             ":root, [data-theme=light] {",
-            "--lumex-background: 0 0% 100%;",
-            "--lumex-foreground-50: 0 0% 98.04%;",
-            "--lumex-foreground-100: 240 4.76% 95.88%;",
-            "--lumex-foreground-200: 240 5.88% 90%;",
-            "--lumex-foreground-300: 240 4.88% 83.92%;",
-            "--lumex-foreground-400: 240 5.03% 64.9%;",
-            "--lumex-foreground-500: 240 3.83% 46.08%;",
-            "--lumex-foreground-600: 240 5.2% 33.92%;",
-            "--lumex-foreground-700: 240 5.26% 26.08%;",
-            "--lumex-foreground-800: 240 3.7% 15.88%;",
-            "--lumex-foreground-900: 240 5.88% 10%;",
-            "--lumex-foreground-950: 240 10% 3.92%;",
-            "--lumex-foreground: 240 5.26% 26.08%;",
-            "--lumex-overlay: 0 0% 0%;",
-            "--lumex-focus: 217.22 91.22% 59.8%;",
-            "--lumex-divider: 240 5.88% 10%;",
-            "--lumex-surface1: 0 0% 100%;",
-			"--lumex-surface1-foreground: 240 5.88% 10%;",
-            "--lumex-surface2: 240 4.76% 95.88%;",
-            "--lumex-surface2-foreground: 240 3.7% 15.88%;",
-            "--lumex-surface3: 240 5.88% 90%;",
-            "--lumex-surface3-foreground: 240 5.26% 26.08%;",
-            "--lumex-default-50: 0 0% 98.04%;",
-            "--lumex-default-100: 240 4.76% 95.88%;",
-            "--lumex-default-200: 240 5.88% 90%;",
-            "--lumex-default-300: 240 4.88% 83.92%;",
-            "--lumex-default-400: 240 5.03% 64.9%;",
-            "--lumex-default-500: 240 3.83% 46.08%;",
-            "--lumex-default-600: 240 5.2% 33.92%;",
-            "--lumex-default-700: 240 5.26% 26.08%;",
-            "--lumex-default-800: 240 3.7% 15.88%;",
-            "--lumex-default-900: 240 5.88% 10%;",
-            "--lumex-default-950: 240 10% 3.92%;",
-            "--lumex-default: 240 4.88% 83.92%;",
-            "--lumex-default-foreground: 0 0% 0%;",
-            "--lumex-primary-50: 213.75 100% 96.86%;",
-            "--lumex-primary-100: 214.29 94.59% 92.75%;",
-            "--lumex-primary-200: 213.33 96.92% 87.25%;",
-            "--lumex-primary-300: 211.7 96.36% 78.43%;",
-            "--lumex-primary-400: 213.12 93.9% 67.84%;",
-            "--lumex-primary-500: 217.22 91.22% 59.8%;",
-            "--lumex-primary-600: 221.21 83.19% 53.33%;",
-            "--lumex-primary-700: 224.28 76.33% 48.04%;",
-            "--lumex-primary-800: 225.93 70.73% 40.2%;",
-            "--lumex-primary-900: 224.44 64.29% 32.94%;",
-            "--lumex-primary-950: 226.23 57.01% 20.98%;",
-            "--lumex-primary: 217.22 91.22% 59.8%;",
-            "--lumex-primary-foreground: 0 0% 100%;",
-            "--lumex-secondary-50: 250 100% 97.65%;",
-            "--lumex-secondary-100: 251.43 91.3% 95.49%;",
-            "--lumex-secondary-200: 250.5 95.24% 91.76%;",
-            "--lumex-secondary-300: 252.5 94.74% 85.1%;",
-            "--lumex-secondary-400: 255.14 91.74% 76.27%;",
-            "--lumex-secondary-500: 258.31 89.53% 66.27%;",
-            "--lumex-secondary-600: 262.12 83.26% 57.84%;",
-            "--lumex-secondary-700: 263.39 69.96% 50.39%;",
-            "--lumex-secondary-800: 263.36 69.3% 42.16%;",
-            "--lumex-secondary-900: 263.5 67.42% 34.9%;",
-            "--lumex-secondary-950: 261.18 72.65% 22.94%;",
-            "--lumex-secondary: 258.31 89.53% 66.27%;",
-            "--lumex-secondary-foreground: 0 0% 100%;",
-            "--lumex-success-50: 138.46 76.47% 96.67%;",
-            "--lumex-success-100: 140.62 84.21% 92.55%;",
-            "--lumex-success-200: 141 78.95% 85.1%;",
-            "--lumex-success-300: 141.71 76.64% 73.14%;",
-            "--lumex-success-400: 141.89 69.16% 58.04%;",
-            "--lumex-success-500: 142.09 70.56% 45.29%;",
-            "--lumex-success-600: 142.13 76.22% 36.27%;",
-            "--lumex-success-700: 142.43 71.81% 29.22%;",
-            "--lumex-success-800: 142.78 64.23% 24.12%;",
-            "--lumex-success-900: 143.81 61.17% 20.2%;",
-            "--lumex-success-950: 144.88 80.39% 10%;",
-            "--lumex-success: 142.09 70.56% 45.29%;",
-            "--lumex-success-foreground: 0 0% 0%;",
-            "--lumex-warning-50: 48 100% 96.08%;",
-            "--lumex-warning-100: 48 96.49% 88.82%;",
-            "--lumex-warning-200: 48 96.64% 76.67%;",
-            "--lumex-warning-300: 45.94 96.69% 64.51%;",
-            "--lumex-warning-400: 43.26 96.41% 56.27%;",
-            "--lumex-warning-500: 37.69 92.13% 50.2%;",
-            "--lumex-warning-600: 32.13 94.62% 43.73%;",
-            "--lumex-warning-700: 25.96 90.48% 37.06%;",
-            "--lumex-warning-800: 22.73 82.5% 31.37%;",
-            "--lumex-warning-900: 21.71 77.78% 26.47%;",
-            "--lumex-warning-950: 20.91 91.67% 14.12%;",
-            "--lumex-warning: 37.69 92.13% 50.2%;",
-            "--lumex-warning-foreground: 0 0% 0%;",
-            "--lumex-danger-50: 355.71 100% 97.25%;",
-            "--lumex-danger-100: 355.56 100% 94.71%;",
-            "--lumex-danger-200: 352.65 96.08% 90%;",
-            "--lumex-danger-300: 352.58 95.7% 81.76%;",
-            "--lumex-danger-400: 351.3 94.52% 71.37%;",
-            "--lumex-danger-500: 349.72 89.16% 60.2%;",
-            "--lumex-danger-600: 346.84 77.17% 49.8%;",
-            "--lumex-danger-700: 345.35 82.69% 40.78%;",
-            "--lumex-danger-800: 343.4 79.66% 34.71%;",
-            "--lumex-danger-900: 341.54 75.48% 30.39%;",
-            "--lumex-danger-950: 343.1 87.65% 15.88%;",
-            "--lumex-danger: 349.72 89.16% 60.2%;",
-            "--lumex-danger-foreground: 0 0% 100%;",
-            "--lumex-info-50: 204 100% 97.06%;",
-            "--lumex-info-100: 204 93.75% 93.73%;",
-            "--lumex-info-200: 200.6 94.37% 86.08%;",
-            "--lumex-info-300: 199.37 95.49% 73.92%;",
-            "--lumex-info-400: 198.44 93.2% 59.61%;",
-            "--lumex-info-500: 198.63 88.66% 48.43%;",
-            "--lumex-info-600: 200.41 98.01% 39.41%;",
-            "--lumex-info-700: 201.27 96.34% 32.16%;",
-            "--lumex-info-800: 200.95 90% 27.45%;",
-            "--lumex-info-900: 202.04 80.33% 23.92%;",
-            "--lumex-info-950: 204 80.25% 15.88%;",
-            "--lumex-info: 198.63 88.66% 48.43%;",
-            "--lumex-info-foreground: 0 0% 0%;",
-            "--lumex-font-sans: ;",
-            "--lumex-font-mono: ;",
-            "--lumex-font-size-tiny: .75rem;",
-            "--lumex-font-size-small: .875rem;",
-            "--lumex-font-size-medium: 1rem;",
-            "--lumex-font-size-large: 1.125rem;",
-            "--lumex-line-height-tiny: 1rem;",
-            "--lumex-line-height-small: 1.25rem;",
-            "--lumex-line-height-medium: 1.5rem;",
-            "--lumex-line-height-large: 1.75rem;",
-            "--lumex-radius-small: .375rem;",
-            "--lumex-radius-medium: .625rem;",
-            "--lumex-radius-large: .875rem;",
-            "--lumex-box-shadow-small: 0px 0px 5px 0px rgba(0,0,0,.02),0px 2px 10px 0px rgba(0,0,0,.06),0px 0px 1px 0px rgba(0,0,0,.15);",
-            "--lumex-box-shadow-medium: 0px 0px 15px 0px rgba(0,0,0,.03),0px 2px 30px 0px rgba(0,0,0,.08),0px 0px 1px 0px rgba(0,0,0,.15);",
-            "--lumex-box-shadow-large: 0px 0px 20px 0px rgba(0,0,0,.04),0px 2px 50px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.15);",
-            "--lumex-divider-opacity: 0.15;",
-            "--lumex-disabled-opacity: 0.6;",
-            "--lumex-focus-opacity: 0.7;",
-            "--lumex-hover-opacity: 0.8;",
-            "}"
+			"--lumex-background: #fff;",
+			"--lumex-foreground-50: oklch(0.985 0 0);",
+			"--lumex-foreground-100: oklch(0.967 0.001 286.375);",
+			"--lumex-foreground-200: oklch(0.92 0.004 286.32);",
+			"--lumex-foreground-300: oklch(0.871 0.006 286.286);",
+			"--lumex-foreground-400: oklch(0.705 0.015 286.067);",
+			"--lumex-foreground-500: oklch(0.552 0.016 285.938);",
+			"--lumex-foreground-600: oklch(0.442 0.017 285.786);",
+			"--lumex-foreground-700: oklch(0.37 0.013 285.805);",
+			"--lumex-foreground-800: oklch(0.274 0.006 286.033);",
+			"--lumex-foreground-900: oklch(0.21 0.006 285.885);",
+			"--lumex-foreground-950: oklch(0.141 0.005 285.823);",
+			"--lumex-foreground: oklch(0.37 0.013 285.805);",
+			"--lumex-overlay: #000;",
+			"--lumex-focus: oklch(0.623 0.214 259.815);",
+			"--lumex-divider: oklch(0.21 0.006 285.885);",
+			"--lumex-surface1: #fff;",
+			"--lumex-surface1-foreground: oklch(0.21 0.006 285.885);",
+			"--lumex-surface2: oklch(0.967 0.001 286.375);",
+			"--lumex-surface2-foreground: oklch(0.274 0.006 286.033);",
+			"--lumex-surface3: oklch(0.92 0.004 286.32);",
+			"--lumex-surface3-foreground: oklch(0.37 0.013 285.805);",
+			"--lumex-default-50: oklch(0.985 0 0);",
+			"--lumex-default-100: oklch(0.967 0.001 286.375);",
+			"--lumex-default-200: oklch(0.92 0.004 286.32);",
+			"--lumex-default-300: oklch(0.871 0.006 286.286);",
+			"--lumex-default-400: oklch(0.705 0.015 286.067);",
+			"--lumex-default-500: oklch(0.552 0.016 285.938);",
+			"--lumex-default-600: oklch(0.442 0.017 285.786);",
+			"--lumex-default-700: oklch(0.37 0.013 285.805);",
+			"--lumex-default-800: oklch(0.274 0.006 286.033);",
+			"--lumex-default-900: oklch(0.21 0.006 285.885);",
+			"--lumex-default-950: oklch(0.141 0.005 285.823);",
+			"--lumex-default: oklch(0.871 0.006 286.286);",
+			"--lumex-default-foreground: #000;",
+			"--lumex-primary-50: oklch(0.97 0.014 254.604);",
+			"--lumex-primary-100: oklch(0.932 0.032 255.585);",
+			"--lumex-primary-200: oklch(0.882 0.059 254.128);",
+			"--lumex-primary-300: oklch(0.809 0.105 251.813);",
+			"--lumex-primary-400: oklch(0.707 0.165 254.624);",
+			"--lumex-primary-500: oklch(0.623 0.214 259.815);",
+			"--lumex-primary-600: oklch(0.546 0.245 262.881);",
+			"--lumex-primary-700: oklch(0.488 0.243 264.376);",
+			"--lumex-primary-800: oklch(0.424 0.199 265.638);",
+			"--lumex-primary-900: oklch(0.379 0.146 265.522);",
+			"--lumex-primary-950: oklch(0.282 0.091 267.935);",
+			"--lumex-primary: oklch(0.623 0.214 259.815);",
+			"--lumex-primary-foreground: #fff;",
+			"--lumex-secondary-50: oklch(0.969 0.016 293.756);",
+			"--lumex-secondary-100: oklch(0.943 0.029 294.588);",
+			"--lumex-secondary-200: oklch(0.894 0.057 293.283);",
+			"--lumex-secondary-300: oklch(0.811 0.111 293.571);",
+			"--lumex-secondary-400: oklch(0.702 0.183 293.541);",
+			"--lumex-secondary-500: oklch(0.606 0.25 292.717);",
+			"--lumex-secondary-600: oklch(0.541 0.281 293.009);",
+			"--lumex-secondary-700: oklch(0.491 0.27 292.581);",
+			"--lumex-secondary-800: oklch(0.432 0.232 292.759);",
+			"--lumex-secondary-900: oklch(0.38 0.189 293.745);",
+			"--lumex-secondary-950: oklch(0.283 0.141 291.089);",
+			"--lumex-secondary: oklch(0.606 0.25 292.717);",
+			"--lumex-secondary-foreground: #fff;",
+			"--lumex-success-50: oklch(0.982 0.018 155.826);",
+			"--lumex-success-100: oklch(0.962 0.044 156.743);",
+			"--lumex-success-200: oklch(0.925 0.084 155.995);",
+			"--lumex-success-300: oklch(0.871 0.15 154.449);",
+			"--lumex-success-400: oklch(0.792 0.209 151.711);",
+			"--lumex-success-500: oklch(0.723 0.219 149.579);",
+			"--lumex-success-600: oklch(0.627 0.194 149.214);",
+			"--lumex-success-700: oklch(0.527 0.154 150.069);",
+			"--lumex-success-800: oklch(0.448 0.119 151.328);",
+			"--lumex-success-900: oklch(0.393 0.095 152.535);",
+			"--lumex-success-950: oklch(0.266 0.065 152.934);",
+			"--lumex-success: oklch(0.723 0.219 149.579);",
+			"--lumex-success-foreground: #000;",
+			"--lumex-warning-50: oklch(0.987 0.022 95.277);",
+			"--lumex-warning-100: oklch(0.962 0.059 95.617);",
+			"--lumex-warning-200: oklch(0.924 0.12 95.746);",
+			"--lumex-warning-300: oklch(0.879 0.169 91.605);",
+			"--lumex-warning-400: oklch(0.828 0.189 84.429);",
+			"--lumex-warning-500: oklch(0.769 0.188 70.08);",
+			"--lumex-warning-600: oklch(0.666 0.179 58.318);",
+			"--lumex-warning-700: oklch(0.555 0.163 48.998);",
+			"--lumex-warning-800: oklch(0.473 0.137 46.201);",
+			"--lumex-warning-900: oklch(0.414 0.112 45.904);",
+			"--lumex-warning-950: oklch(0.279 0.077 45.635);",
+			"--lumex-warning: oklch(0.769 0.188 70.08);",
+			"--lumex-warning-foreground: #000;",
+			"--lumex-danger-50: oklch(0.969 0.015 12.422);",
+			"--lumex-danger-100: oklch(0.941 0.03 12.58);",
+			"--lumex-danger-200: oklch(0.892 0.058 10.001);",
+			"--lumex-danger-300: oklch(0.81 0.117 11.638);",
+			"--lumex-danger-400: oklch(0.712 0.194 13.428);",
+			"--lumex-danger-500: oklch(0.645 0.246 16.439);",
+			"--lumex-danger-600: oklch(0.586 0.253 17.585);",
+			"--lumex-danger-700: oklch(0.514 0.222 16.935);",
+			"--lumex-danger-800: oklch(0.455 0.188 13.697);",
+			"--lumex-danger-900: oklch(0.41 0.159 10.272);",
+			"--lumex-danger-950: oklch(0.271 0.105 12.094);",
+			"--lumex-danger: oklch(0.645 0.246 16.439);",
+			"--lumex-danger-foreground: #fff;",
+			"--lumex-info-50: oklch(0.977 0.013 236.62);",
+			"--lumex-info-100: oklch(0.951 0.026 236.824);",
+			"--lumex-info-200: oklch(0.901 0.058 230.902);",
+			"--lumex-info-300: oklch(0.828 0.111 230.318);",
+			"--lumex-info-400: oklch(0.746 0.16 232.661);",
+			"--lumex-info-500: oklch(0.685 0.169 237.323);",
+			"--lumex-info-600: oklch(0.588 0.158 241.966);",
+			"--lumex-info-700: oklch(0.5 0.134 242.749);",
+			"--lumex-info-800: oklch(0.443 0.11 240.79);",
+			"--lumex-info-900: oklch(0.391 0.09 240.876);",
+			"--lumex-info-950: oklch(0.293 0.066 243.157);",
+			"--lumex-info: oklch(0.685 0.169 237.323);",
+			"--lumex-info-foreground: #000;",
+			"--lumex-font-sans: ;",
+			"--lumex-font-mono: ;",
+			"--lumex-font-size-tiny: .75rem;",
+			"--lumex-font-size-small: .875rem;",
+			"--lumex-font-size-medium: 1rem;",
+			"--lumex-font-size-large: 1.125rem;",
+			"--lumex-line-height-tiny: 1rem;",
+			"--lumex-line-height-small: 1.25rem;",
+			"--lumex-line-height-medium: 1.5rem;",
+			"--lumex-line-height-large: 1.75rem;",
+			"--lumex-radius-small: .375rem;",
+			"--lumex-radius-medium: .625rem;",
+			"--lumex-radius-large: .875rem;",
+			"--lumex-shadow-small: 0px 0px 5px 0px rgba(0,0,0,.02),0px 2px 10px 0px rgba(0,0,0,.06),0px 0px 1px 0px rgba(0,0,0,.15);",
+			"--lumex-shadow-medium: 0px 0px 15px 0px rgba(0,0,0,.03),0px 2px 30px 0px rgba(0,0,0,.08),0px 0px 1px 0px rgba(0,0,0,.15);",
+			"--lumex-shadow-large: 0px 0px 20px 0px rgba(0,0,0,.04),0px 2px 50px 0px rgba(0,0,0,.1),0px 0px 1px 0px rgba(0,0,0,.15);",
+			"--lumex-opacity-divider: 15%;",
+			"--lumex-opacity-disabled: 60%;",
+			"--lumex-opacity-focus: 70%;",
+			"--lumex-opacity-hover: 80%;",
+		"}"
         ).ToString();
 
         styleNodes[0].InnerHtml.Trim().Should().BeEquivalentTo( expectedCssVars );