Skip to content

Commit 3708bc2

Browse files
desmondinhodesmondinho
authored
feat: support Tailwind CSS v4 (#183)
* build(deps): bump TailwindMerge.NET from 0.3.0 to 1.0.0 * feat: add new CSS theme file * feat/build: add custom targets file to improve library usability * chore: move `Plugin` folder one level higher; remove `Scripts` folder * feat/build: pack new theme and custom `.targets` files * build(docs): add `Directory.Build.props` and `Directory.Build.targets` * chore(docs): remove tailwind npm deps; use standalone CLI instead * docs: apply `static` on theme * refactor(theme-provider): simplify names of box-shadow css variables * refactor(theme-provider): opacities are percentage to match `color-mix` function syntax * chore(components): apply `static` on theme; fix some vars * refactor(components): drop Tailwind CSS v3 support * feat(theme): add custom transition variables * fix(theme): correct `default` color; add `default-foreground` color * chore(theme): add reference for the custom transitions approach (it's not in docs afaik) * fix: rename `shadow-sm` to `shadow-xs` * fix: rename `rounded-sm` to `rounded-xs` * fix: rename `rounded` to `rounded-sm` * fix: rename `outline-none` to `outline-hidden` * fix: rename `ring-1` to `ring` * fix(button): add base `cursor-pointer` class * docs: remove `children` custom variant in favor of `*` * fix(theme): correct `enter` custom animation * chore(components): cleanup styles * fix(theme): add missing comma separator in custom transition vars * docs: configure typography * refactor(theme): simplify `scrollbar-hide` utility * chore(theme): apply `inline` on theme * refactor: replace `theme` function with CSS vars * fix(components): correct scale/translate transitions * feat(theme): update colors from hex to oklch * docs(installation): update installation guide * feat(theme): add leading CSS vars * chore(docs): fix prose `<code>` tag ticks * refactor(utils): remove hex luminance calculator * docs(customization): update Theme and Colors pages * docs(colors): remove 'common colors are not configurable' callout * fix(checkbox): correct radius styles * fix(data-grid): correct striped styles * fix(input/select): correct label placement out transitions * fix(input/select): correct outlined variant focus styles * fix(input): add cursor-pointer style on the clear button * fix(input/select): correct flat variant focus styles * fix(docs): correct some component examples * build(docs): adjust Tailwind standalone CLI file download for Linux * build(docs): adjust Tailwind standalone CLI file download for Linux * ci(deploy): try add staging env in the ci/cd * ci(build-test): change trigger branch * ci(deploy): update trigger branches * ci(deploy): change env vars usage (test) * ci: add deploy-dev.yml; revert deploy.yml * ci(deploy): test staging * chore(docs): nits * chore(components): tweak styles of some components * chore(docs): tweak some components examples * chore: coderabbit comments * ci: remove deploy-dev.yml
1 parent c2f34f5 commit 3708bc2

File tree

105 files changed

+1297
-3083
lines changed

Some content is hidden

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

105 files changed

+1297
-3083
lines changed

‎.github/workflows/build-test.yml

+9-10
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,29 @@
1-
21
name: Build and Test
32

43
on:
54
pull_request:
65
branches:
7-
- main
6+
- dev
87
paths:
9-
- 'docs/**'
10-
- 'src/**'
11-
- 'tests/**'
8+
- "docs/**"
9+
- "src/**"
10+
- "tests/**"
1211

1312
jobs:
1413
build-test:
1514
runs-on: ubuntu-latest
16-
15+
1716
steps:
1817
- name: Checkout repository
1918
uses: actions/checkout@v4
20-
19+
2120
- name: Setup .NET Core
2221
uses: actions/setup-dotnet@v4
2322
with:
24-
dotnet-version: |
23+
dotnet-version: |
2524
8.0.x
2625
9.0.x
27-
26+
2827
- name: Restore
2928
run: dotnet restore
3029

@@ -36,5 +35,5 @@ jobs:
3635

3736
- name: Upload coverage reports to Codecov
3837
uses: codecov/codecov-action@v4
39-
env:
38+
env:
4039
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}

‎.github/workflows/deploy.yml

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ name: Deploy to Azure Web App
66
on:
77
push:
88
branches:
9-
- main
9+
- dev
1010
paths:
1111
- "docs/**"
1212
workflow_dispatch:
@@ -41,7 +41,7 @@ jobs:
4141
runs-on: ubuntu-latest
4242
needs: build
4343
environment:
44-
name: "Production"
44+
name: "staging"
4545
url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}
4646
permissions:
4747
id-token: write #This is required for requesting the JWT
@@ -64,5 +64,5 @@ jobs:
6464
uses: azure/webapps-deploy@v3
6565
with:
6666
app-name: "lumexui"
67-
slot-name: "Production"
67+
slot-name: "staging"
6868
package: .

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -405,3 +405,4 @@ FodyWeavers.xsd
405405
/src/LumexUI/**/dist
406406

407407
/docs/LumexUI.Docs/**/*/css
408+
/docs/LumexUI.Docs/*.exe

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
</div>
1212
</div>
1313
}
14-
<div id="@Id" class="children:my-0">
14+
<div id="@Id" class="*:my-0">
1515
@_renderCodeSnippet
1616
</div>
1717
</div>

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

+2-7
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,10 @@
1414

1515
<LumexButton Color="@ThemeColor.None"
1616
Class="w-full min-w-fit h-auto p-0 justify-start gap-x-3 overflow-visible rounded-small sm:block sm:space-y-1">
17-
<div class="relative w-12 h-12 rounded-md ring-1 ring-inset ring-foreground-950/10 sm:w-full"
17+
<div class="relative w-12 h-12 rounded-md ring ring-inset ring-foreground-950/10 sm:w-full"
1818
style="background-color: @(color.Value + (isDivider ? "26" : default))">
1919

20-
<span class="hidden absolute top-1 right-1.5 font-medium text-[0.625rem] leading-none sm:block"
20+
<span class="absolute top-1 right-1.5 font-medium text-[0.625rem] leading-none"
2121
style="color: @(isDivider ? "black" : ColorUtils.GetReadableColor(color.Value))">
2222
@color.Key
2323
</span>
@@ -30,11 +30,6 @@
3030
</span>
3131
}
3232
</div>
33-
34-
<div class="px-0.5 text-left">
35-
<div class="font-medium text-foreground-900 text-xs sm:hidden">@color.Key</div>
36-
<div class="font-mono text-foreground-500 text-xs">@color.Value</div>
37-
</div>
3833
</LumexButton>
3934
}
4035
}

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

+11-15
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<LumexButton As="a"
77
Size="@Size.Small"
88
StartContent="@BlazorIcon"
9-
Class="bg-default-100 text-default-700"
9+
Class="bg-default-100 text-default-700 text-small"
1010
href="https://learn.microsoft.com/en-us/aspnet/core/blazor/fundamentals/?view=aspnetcore-8.0#client-and-server-rendering-concepts"
1111
target="_blank"
1212
rel="noopener noreferrer">
@@ -17,7 +17,7 @@
1717
<LumexButton As="a"
1818
Size="@Size.Small"
1919
StartContent="@GithubIcon"
20-
Class="bg-default-100 text-default-700"
20+
Class="bg-default-100 text-default-700 text-small"
2121
href="@($"{Constants.GitHub.ComponentPath}/{ComponentName}")"
2222
target="_blank"
2323
rel="noopener noreferrer">
@@ -27,7 +27,7 @@
2727
<LumexButton As="a"
2828
Size="@Size.Small"
2929
StartContent="@GithubIcon"
30-
Class="bg-default-100 text-default-700"
30+
Class="bg-default-100 text-default-700 text-small"
3131
href="@($"{Constants.GitHub.ComponentStylesPath}/{ComponentName}.cs")"
3232
target="_blank"
3333
rel="noopener noreferrer">
@@ -39,17 +39,13 @@
3939
[Parameter, EditorRequired] public string ComponentName { get; set; } = default!;
4040
[Parameter] public bool IsServer { get; set; }
4141

42-
private RenderFragment BlazorIcon =>
43-
@<text>
44-
<LumexIcon Icon="@Icons.Brands.Blazor"
45-
Size="@new("20")"
46-
viewBox="-10 -38 340 340" />
47-
</text>;
42+
private static readonly RenderFragment BlazorIcon =
43+
@<LumexIcon Icon="@Icons.Brands.Blazor"
44+
Size="@new("20")"
45+
viewBox="-10 -38 340 340" />;
4846

49-
private RenderFragment GithubIcon =>
50-
@<text>
51-
<LumexIcon Icon="@Icons.Brands.GitHub"
52-
Size="@new("20")"
53-
viewBox="0 0 24 24" />
54-
</text>;
47+
private static readonly RenderFragment GithubIcon =
48+
@<LumexIcon Icon="@Icons.Brands.GitHub"
49+
Size="@new("20")"
50+
viewBox="0 0 24 24" />;
5551
}

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<li>
1515
<LumexLink Href="@($"{NavigationManager.BaseUri}docs/api/{componentPathSegment}")"
1616
Class="border-none text-orange-500 text-xs font-normal not-prose">
17-
<span class="px-1 py-0.5 rounded-md ring-1 ring-orange-200 bg-orange-50">
17+
<span class="px-1 py-0.5 rounded-md ring ring-orange-200 bg-orange-50">
1818
@($"<{component} />")
1919
</span>
2020
</LumexLink>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
Color="@ThemeColor.None"
99
Class="border-none">
1010
@Title
11-
<span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-sm ring-1 ring-foreground-950/5 hover:ring-orange-200 hover:bg-orange-50 hover:text-orange-500">
11+
<span class="flex items-center justify-center size-6 ml-2 rounded-md text-foreground-400 shadow-xs ring ring-foreground-950/5 hover:ring-orange-200 hover:bg-orange-50 hover:text-orange-500">
1212
<LumexIcon Icon="@Icons.Rounded.Link"
1313
Size="@new("16")" />
1414
</span>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{
66
foreach( var step in Steps )
77
{
8-
<li class="relative pl-10 pb-8 xl:grid xl:grid-cols-5 xl:gap-10 before:absolute before:content-[counter(step)] before:left-0 before:flex before:items-center before:justify-center before:size-6 before:text-[0.625rem] before:font-bold before:text-zinc-700 before:rounded-md before:shadow-sm before:ring-1 before:ring-foreground-950/5 after:absolute after:top-8 after:bottom-0 after:left-3 after:w-px after:bg-divider" style="counter-increment: step;">
8+
<li class="relative pl-10 pb-8 xl:grid xl:grid-cols-5 xl:gap-10 before:absolute before:content-[counter(step)] before:left-0 before:flex before:items-center before:justify-center before:size-6 before:text-[0.625rem] before:font-bold before:text-zinc-700 before:rounded-md before:shadow-xs before:ring before:ring-foreground-950/5 after:absolute after:top-8 after:bottom-0 after:left-3 after:w-px after:bg-divider" style="counter-increment: step;">
99
<div class="mb-6 xl:mb-0 xl:col-span-2">
1010
<h4 class="text-sm leading-6 font-semibold mb-2">
1111
@step.Title

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

+2-9
Original file line numberDiff line numberDiff line change
@@ -25,9 +25,9 @@
2525
or later
2626
</li>
2727
<li>
28-
<LumexLink Href="https://v3.tailwindcss.com"
28+
<LumexLink Href="https://tailwindcss.com"
2929
External="@true">
30-
Tailwind CSS 3.4
30+
Tailwind CSS 4.0
3131
<LumexIcon Icon="@Icons.Rounded.OpenInNew"
3232
Size="@new("16")"
3333
Class="mx-1 text-orange-400" />
@@ -45,13 +45,6 @@
4545
</li>
4646
</ul>
4747
</DocsSection>
48-
49-
<Callout Variant="@CalloutVariant.Warning">
50-
Please be aware that LumexUI isn't fully compatible with Tailwind CSS v4.0 at this time. If this is the
51-
version you plan on using, proceed at your own risk. More information can be found in
52-
<LumexLink Href="https://github.com/LumexUI/lumexui/issues/156"
53-
External="true">this Github conversation</LumexLink>.
54-
</Callout>
5548
<LumexDivider />
5649
</div>
5750

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
.Add( "px-1.5" )
1515
.Add( "py-[3px]" )
1616
.Add( "rounded-full" )
17-
.Add( "ring-1" )
17+
.Add( "ring" )
1818
.Add( "font-semibold" )
1919
.Add( "text-[0.5rem]" )
2020
.Add( "uppercase" )

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
private readonly Slots _slots = new()
2626
{
2727
Preview = "relative flex flex-wrap items-center gap-4",
28-
PreviewWrapper = "relative p-8 rounded-xl bg-zinc-50 ring-1 ring-foreground-950/5 not-prose",
28+
PreviewWrapper = "relative p-8 rounded-xl bg-zinc-50 ring ring-foreground-950/5 not-prose",
2929
Background = "absolute inset-0 [mask-image:radial-gradient(#fff_0%,transparent_100%)]",
3030
};
3131

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
</div>
2626
</div>
2727

28-
<LumexCollapse Expanded="@_expanded" Class="children:rounded-t-none">
28+
<LumexCollapse Expanded="@_expanded" Class="*:rounded-t-none">
2929
<CodeSnippet Id="@_id" Code="@Code" />
3030
</LumexCollapse>
3131
</div>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@ public partial class PreviewCode
1515

1616
private string? BaseClass => ElementClass.Empty()
1717
.Add( "rounded-2xl" )
18-
.Add( "ring-1" )
18+
.Add( "ring" )
1919
.Add( "ring-foreground-950/5" )
20-
.Add( "shadow-sm" )
20+
.Add( "shadow-xs" )
2121
.Add( "overflow-hidden" )
2222
.Add( Class )
2323
.ToString();

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
@Description
1919
</p>
2020
</div>
21-
<div class="absolute -z-10 -inset-3 rounded-2xl bg-gray-50 peer-hover:ring-1 peer-hover:ring-foreground-950/5"></div>
21+
<div class="absolute -z-10 -inset-3 rounded-2xl bg-gray-50 peer-hover:ring peer-hover:ring-foreground-950/5"></div>
2222
</li>
2323

2424
@code {

‎docs/LumexUI.Docs.Client/Pages/Api/Api.razor

+3-3
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525
@if( _properties.Length > 1 )
2626
{
2727
<DocsSection Title="Properties">
28-
<div class="overflow-x-auto children:mt-0">
28+
<div class="overflow-x-auto *:mt-0">
2929
<table>
3030
<thead>
3131
<tr>
@@ -40,7 +40,7 @@
4040
{
4141
<tr>
4242
<td class="text-orange-500">@property.Name</td>
43-
<td class="max-w-44 overflow-x-auto scrollbar:h-1 scrollbar:w-1 scrollbar-thumb:rounded scrollbar-thumb:bg-foreground-200 scrollbar-track:rounded scrollbar-track:bg-foreground-100">
43+
<td class="max-w-44 overflow-x-auto scrollbar:h-1 scrollbar:w-1 scrollbar-thumb:rounded-sm scrollbar-thumb:bg-foreground-200 scrollbar-track:rounded-sm scrollbar-track:bg-foreground-100">
4444
<Code>@GetTypeName( property.PropertyType )</Code>
4545
</td>
4646
<td>@GetDescription( property )</td>
@@ -68,7 +68,7 @@
6868
@if( _methods.Length > 1 )
6969
{
7070
<DocsSection Title="Methods">
71-
<div class="overflow-x-auto children:mt-0">
71+
<div class="overflow-x-auto *:mt-0">
7272
<table>
7373
<thead>
7474
<tr>

‎docs/LumexUI.Docs.Client/Pages/Components/Accordion/Examples/StartContent.razor

+3-3
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Title="General Settings"
44
Subtitle="Custom display, sound, privacy, connectivity, updates">
55
<StartContent>
6-
<span class="h-8 w-8 flex items-center justify-center bg-primary text-zinc-50 rounded-lg ring ring-primary/30">
6+
<span class="h-8 w-8 flex items-center justify-center bg-primary text-zinc-50 rounded-lg ring-3 ring-primary/30">
77
<LumexIcon Icon="@Icons.Rounded.Settings"
88
Color="@ThemeColor.None" />
99
</span>
@@ -16,7 +16,7 @@
1616
Title="Advanced Settings"
1717
Subtitle="Detailed system, developer, security, network, diagnostics">
1818
<StartContent>
19-
<span class="h-8 w-8 flex items-center justify-center bg-secondary text-zinc-50 rounded-lg ring ring-secondary/30">
19+
<span class="h-8 w-8 flex items-center justify-center bg-secondary text-zinc-50 rounded-lg ring-3 ring-secondary/30">
2020
<LumexIcon Icon="@Icons.Rounded.Manufacturing"
2121
Color="@ThemeColor.None" />
2222
</span>
@@ -29,7 +29,7 @@
2929
Title="Personal Data"
3030
Subtitle="Contacts, messages, photos, account info, preferences">
3131
<StartContent>
32-
<span class="h-8 w-8 flex items-center justify-center bg-danger text-zinc-50 rounded-lg ring ring-danger/30">
32+
<span class="h-8 w-8 flex items-center justify-center bg-danger text-zinc-50 rounded-lg ring-3 ring-danger/30">
3333
<LumexIcon Icon="@Icons.Rounded.ManageAccounts"
3434
Color="@ThemeColor.None" />
3535
</span>

‎docs/LumexUI.Docs.Client/Pages/Components/Card/Examples/CustomStyles.razor

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
@code {
2020
private CardSlots _classes = new()
2121
{
22-
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)]",
22+
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)]",
2323
Header = "justify-center text-center",
2424
Body = "py-0 justify-center text-center",
2525
Footer = "justify-center gap-2"

‎docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/Editing.razor

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<LumexDataGrid Data="@_users">
1+
<LumexDataGrid Data="@_users"
2+
Layout="@Layout.Fixed"
3+
Classes="@(new() { Table = "w-full" })">
24
<EditColumn Property="@(p => p.Name)" />
35
<EditColumn Property="@(p => p.Role)" />
46
<EditColumn Property="@(p => p.Status)" />

‎docs/LumexUI.Docs.Client/Pages/Components/DataGrid/Examples/MultipleSelection.razor

+7-29
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,15 @@
77
<PropertyColumn Property="@(p => p.Status)" />
88
</LumexDataGrid>
99

10-
<fieldset class="flex gap-4">
11-
@foreach( var color in _colors )
10+
<LumexRadioGroup Orientation="@Orientation.Horizontal"
11+
@bind-Value="@_color">
12+
@foreach( var color in Enum.GetValues<ThemeColor>()[1..] )
1213
{
13-
var value = color.ToString();
14-
15-
<div class="flex gap-1">
16-
<input type="radio"
17-
id="@($"multiple-sel-{value.ToLower()}")"
18-
name="color"
19-
@bind:event="onchange"
20-
@bind:get="@color"
21-
@bind:set="@OnColorSelect" />
22-
<label for="@($"multiple-sel-{value.ToLower()}")">@value</label>
23-
</div>
14+
<LumexRadio Value="@color" Color="@color">
15+
@color.ToString()
16+
</LumexRadio>
2417
}
25-
</fieldset>
18+
</LumexRadioGroup>
2619

2720
@if( _selectedUsers.Count > 0 )
2821
{
@@ -46,23 +39,8 @@
4639
new( "Diana Lee", "Moderator", "Active" )
4740
}.AsQueryable();
4841

49-
private readonly ThemeColor[] _colors = [
50-
ThemeColor.Default,
51-
ThemeColor.Primary,
52-
ThemeColor.Secondary,
53-
ThemeColor.Success,
54-
ThemeColor.Warning,
55-
ThemeColor.Danger,
56-
ThemeColor.Info
57-
];
58-
5942
private ThemeColor _color = ThemeColor.Default;
6043
private ICollection<User> _selectedUsers = [];
6144

62-
private void OnColorSelect( ThemeColor value )
63-
{
64-
_color = value;
65-
}
66-
6745
private record User( string Name, string Role, string Status );
6846
}

0 commit comments

Comments
 (0)