From 89fd18d4c937660f00a19ef1f56f6b1c7f4137b3 Mon Sep 17 00:00:00 2001 From: Shewart Date: Mon, 8 Dec 2025 23:20:04 +0200 Subject: [PATCH 01/32] chore: Bump version to 0.1.0; enhance project initialization process with improved status updates and cleanup of Bootstrap files. --- src/ShellUI.CLI/Services/InitService.cs | 235 +++++++++++------- .../Services/TailwindDownloader.cs | 2 +- src/ShellUI.CLI/ShellUI.CLI.csproj | 2 +- 3 files changed, 149 insertions(+), 90 deletions(-) diff --git a/src/ShellUI.CLI/Services/InitService.cs b/src/ShellUI.CLI/Services/InitService.cs index 909d505..b6e3c91 100644 --- a/src/ShellUI.CLI/Services/InitService.cs +++ b/src/ShellUI.CLI/Services/InitService.cs @@ -19,11 +19,22 @@ public static async Task InitializeAsync(string style, bool force) } // Step 1: Detect project - AnsiConsole.MarkupLine("[cyan]Initializing ShellUI...[/]"); - var projectInfo = ProjectDetector.DetectProject(); - AnsiConsole.MarkupLine($"[green]Detected:[/] {projectInfo.ProjectType}"); - AnsiConsole.MarkupLine($"[dim]Project: {projectInfo.ProjectName}[/]"); - AnsiConsole.MarkupLine($"[dim]Namespace: {projectInfo.RootNamespace}[/]"); + ProjectInfo projectInfo = null!; + + await AnsiConsole.Status() + .StartAsync("Initializing ShellUI...", async ctx => + { + ctx.Status("Detecting project type..."); + await Task.Delay(300); // Brief delay for UX + projectInfo = ProjectDetector.DetectProject(); + AnsiConsole.MarkupLine($"[green]Detected:[/] {projectInfo.ProjectType}"); + AnsiConsole.MarkupLine($"[dim]Project: {projectInfo.ProjectName}[/]"); + AnsiConsole.MarkupLine($"[dim]Namespace: {projectInfo.RootNamespace}[/]"); + + // Clean up bootstrap files + ctx.Status("Checking for Bootstrap files..."); + RemoveBootstrapFiles(); + }); // Step 2: Ask user for Tailwind method preference AnsiConsole.MarkupLine("[cyan]Setting up Tailwind CSS...[/]"); @@ -46,88 +57,93 @@ public static async Task InitializeAsync(string style, bool force) } AnsiConsole.MarkupLine($"[green]Selected:[/] {method}"); - // Step 3: Create Components/UI folder - AnsiConsole.MarkupLine("[cyan]Creating component folders...[/]"); - var componentsPath = Path.Combine(Directory.GetCurrentDirectory(), "Components", "UI"); - Directory.CreateDirectory(componentsPath); - AnsiConsole.MarkupLine($"[green]Created:[/] Components/UI/"); - - // Step 4: Create shellui.json - AnsiConsole.MarkupLine("[cyan]Creating configuration...[/]"); - var config = new ShellUIConfig - { - Style = style, - ComponentsPath = "Components/UI", - ProjectType = projectInfo.ProjectType, - Tailwind = new TailwindConfig - { - Enabled = true, - Version = method == "npm" ? "4.1.14" : "3.4.0", - Method = method, - CssPath = "wwwroot/app.css" - } - }; - - var json = JsonSerializer.Serialize(config, new JsonSerializerOptions - { - WriteIndented = true - }); - File.WriteAllText(configPath, json); - AnsiConsole.MarkupLine($"[green]Created:[/] shellui.json"); - - // Step 5: Create _Imports.razor if it doesn't exist - AnsiConsole.MarkupLine("[cyan]Setting up imports...[/]"); - var importsPath = Path.Combine(Directory.GetCurrentDirectory(), "Components", "_Imports.razor"); - if (File.Exists(importsPath)) - { - var importsContent = File.ReadAllText(importsPath); - var usingStatement = $"@using {projectInfo.RootNamespace}.Components.UI"; - - if (!importsContent.Contains(usingStatement)) + await AnsiConsole.Status() + .StartAsync("Installing ShellUI components...", async ctx => { - File.AppendAllText(importsPath, $"\n{usingStatement}\n"); - AnsiConsole.MarkupLine($"[green]Updated:[/] Components/_Imports.razor"); - } - } - - // Step 6: Set up Tailwind CSS based on method - if (method == "npm") - { - await SetupTailwindNpmAsync(); - } - else - { - await SetupTailwindStandaloneAsync(); - } - - // Step 7: Create MSBuild targets file - AnsiConsole.MarkupLine("[cyan]Setting up MSBuild integration...[/]"); - var buildPath = Path.Combine(Directory.GetCurrentDirectory(), "Build"); - Directory.CreateDirectory(buildPath); - - var targetsPath = Path.Combine(buildPath, "ShellUI.targets"); - var targetsContent = GetTargetsFileContent(method); - File.WriteAllText(targetsPath, targetsContent); - AnsiConsole.MarkupLine($"[green]Created:[/] Build/ShellUI.targets"); - - // Update .csproj to import targets - await UpdateProjectFileAsync(projectInfo.ProjectPath, targetsPath); - AnsiConsole.MarkupLine($"[green]Updated:[/] {Path.GetFileName(projectInfo.ProjectPath)}"); - - // Step 8: Run initial Tailwind build - AnsiConsole.MarkupLine("[cyan]Building Tailwind CSS...[/]"); - if (method == "npm") - { - await RunNpmTailwindBuildAsync(); - } - else - { - var tailwindPath = await TailwindDownloader.EnsureTailwindCliAsync(Directory.GetCurrentDirectory()); - var inputCssPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "input.css"); - var appCssPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "app.css"); - await RunTailwindBuildAsync(tailwindPath, inputCssPath, appCssPath); - } - AnsiConsole.MarkupLine($"[green]Built:[/] Tailwind CSS"); + // Step 3: Create Components/UI folder + ctx.Status("Creating component folders..."); + var componentsPath = Path.Combine(Directory.GetCurrentDirectory(), "Components", "UI"); + Directory.CreateDirectory(componentsPath); + AnsiConsole.MarkupLine($"[green]Created:[/] Components/UI/"); + + // Step 4: Create shellui.json + ctx.Status("Creating configuration..."); + var config = new ShellUIConfig + { + Style = style, + ComponentsPath = "Components/UI", + ProjectType = projectInfo.ProjectType, + Tailwind = new TailwindConfig + { + Enabled = true, + Version = method == "npm" ? "4.1.17" : "3.4.0", + Method = method, + CssPath = "wwwroot/app.css" + } + }; + + var json = JsonSerializer.Serialize(config, new JsonSerializerOptions + { + WriteIndented = true + }); + File.WriteAllText(configPath, json); + AnsiConsole.MarkupLine($"[green]Created:[/] shellui.json"); + + // Step 5: Create _Imports.razor if it doesn't exist + ctx.Status("Setting up imports..."); + var importsPath = Path.Combine(Directory.GetCurrentDirectory(), "Components", "_Imports.razor"); + if (File.Exists(importsPath)) + { + var importsContent = File.ReadAllText(importsPath); + var usingStatement = $"@using {projectInfo.RootNamespace}.Components.UI"; + + if (!importsContent.Contains(usingStatement)) + { + File.AppendAllText(importsPath, $"\n{usingStatement}\n"); + AnsiConsole.MarkupLine($"[green]Updated:[/] Components/_Imports.razor"); + } + } + + // Step 6: Set up Tailwind CSS based on method + ctx.Status("Setting up Tailwind CSS..."); + if (method == "npm") + { + await SetupTailwindNpmAsync(); + } + else + { + await SetupTailwindStandaloneAsync(); + } + + // Step 7: Create MSBuild targets file + ctx.Status("Setting up MSBuild integration..."); + var buildPath = Path.Combine(Directory.GetCurrentDirectory(), "Build"); + Directory.CreateDirectory(buildPath); + + var targetsPath = Path.Combine(buildPath, "ShellUI.targets"); + var targetsContent = GetTargetsFileContent(method); + File.WriteAllText(targetsPath, targetsContent); + AnsiConsole.MarkupLine($"[green]Created:[/] Build/ShellUI.targets"); + + // Update .csproj to import targets + await UpdateProjectFileAsync(projectInfo.ProjectPath, targetsPath); + AnsiConsole.MarkupLine($"[green]Updated:[/] {Path.GetFileName(projectInfo.ProjectPath)}"); + + // Step 8: Run initial Tailwind build + ctx.Status("Building Tailwind CSS..."); + if (method == "npm") + { + await RunNpmTailwindBuildAsync(); + } + else + { + var tailwindPath = await TailwindDownloader.EnsureTailwindCliAsync(Directory.GetCurrentDirectory()); + var inputCssPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "input.css"); + var appCssPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot", "app.css"); + await RunTailwindBuildAsync(tailwindPath, inputCssPath, appCssPath); + } + AnsiConsole.MarkupLine($"[green]Built:[/] Tailwind CSS"); + }); AnsiConsole.MarkupLine("\n[green]ShellUI initialized successfully![/]"); AnsiConsole.MarkupLine("\n[blue]Next steps:[/]"); @@ -145,8 +161,8 @@ private static async Task SetupTailwindNpmAsync() // Install Tailwind CSS packages (v4 with @tailwindcss/cli) AnsiConsole.MarkupLine("[cyan]Installing Tailwind CSS packages...[/]"); - await RunNpmCommandAsync("install", "-D", "tailwindcss@^4.1.14", "@tailwindcss/cli@^4.1.14"); - AnsiConsole.MarkupLine("[green]Installed:[/] tailwindcss v4.1.14, @tailwindcss/cli"); + await RunNpmCommandAsync("install", "-D", "tailwindcss@^4.1.17", "@tailwindcss/cli@^4.1.17"); + AnsiConsole.MarkupLine("[green]Installed:[/] tailwindcss v4.1.17, @tailwindcss/cli"); // Create CSS files AnsiConsole.MarkupLine("[cyan]Creating CSS files...[/]"); @@ -385,5 +401,48 @@ private static async Task UpdateProjectFileAsync(string projectFilePath, string await File.WriteAllTextAsync(projectFilePath, content); } } + + private static void RemoveBootstrapFiles() + { + try + { + var wwwrootPath = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot"); + if (!Directory.Exists(wwwrootPath)) return; + + AnsiConsole.MarkupLine("[cyan]Checking for Bootstrap files to clean up...[/]"); + var deletedCount = 0; + + // 1. Delete wwwroot/lib/bootstrap + var libBootstrap = Path.Combine(wwwrootPath, "lib", "bootstrap"); + if (Directory.Exists(libBootstrap)) + { + Directory.Delete(libBootstrap, true); + AnsiConsole.MarkupLine($"[dim]Deleted:[/] wwwroot/lib/bootstrap folder"); + deletedCount++; + } + + // 2. Delete bootstrap css files in wwwroot/css + var cssPath = Path.Combine(wwwrootPath, "css"); + if (Directory.Exists(cssPath)) + { + var bootstrapFiles = Directory.GetFiles(cssPath, "bootstrap*.*"); + foreach (var file in bootstrapFiles) + { + File.Delete(file); + AnsiConsole.MarkupLine($"[dim]Deleted:[/] css/{Path.GetFileName(file)}"); + deletedCount++; + } + } + + if (deletedCount > 0) + { + AnsiConsole.MarkupLine($"[green]Removed {deletedCount} Bootstrap items.[/]"); + } + } + catch (Exception ex) + { + AnsiConsole.MarkupLine($"[yellow]Warning: Could not remove some Bootstrap files: {ex.Message}[/]"); + } + } } diff --git a/src/ShellUI.CLI/Services/TailwindDownloader.cs b/src/ShellUI.CLI/Services/TailwindDownloader.cs index 7a05952..214e65d 100644 --- a/src/ShellUI.CLI/Services/TailwindDownloader.cs +++ b/src/ShellUI.CLI/Services/TailwindDownloader.cs @@ -6,7 +6,7 @@ namespace ShellUI.CLI.Services; public class TailwindDownloader { - private const string TailwindVersion = "v4.1.14"; + private const string TailwindVersion = "v4.1.17"; private const string BaseUrl = "https://github.com/tailwindlabs/tailwindcss/releases/download"; public static async Task EnsureTailwindCliAsync(string projectRoot) diff --git a/src/ShellUI.CLI/ShellUI.CLI.csproj b/src/ShellUI.CLI/ShellUI.CLI.csproj index bf1fdd3..518e816 100644 --- a/src/ShellUI.CLI/ShellUI.CLI.csproj +++ b/src/ShellUI.CLI/ShellUI.CLI.csproj @@ -20,7 +20,7 @@ true shellui ShellUI.CLI - 0.0.3 + 0.1.0 README.md Shell Technologies CLI tool for ShellUI - Blazor component library inspired by shadcn/ui From b697d757378773a416fa03444e3a78b39b6bf00b Mon Sep 17 00:00:00 2001 From: Shewart Date: Mon, 8 Dec 2025 23:31:27 +0200 Subject: [PATCH 02/32] chore: Update Tailwind CSS version from 4.1.14 to 4.1.17 in ShellUIConfig to ensure compatibility with latest features and improvements. --- src/ShellUI.Core/Models/ShellUIConfig.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/ShellUI.Core/Models/ShellUIConfig.cs b/src/ShellUI.Core/Models/ShellUIConfig.cs index 21fd7e4..4ea34de 100644 --- a/src/ShellUI.Core/Models/ShellUIConfig.cs +++ b/src/ShellUI.Core/Models/ShellUIConfig.cs @@ -13,7 +13,7 @@ public class ShellUIConfig public class TailwindConfig { public bool Enabled { get; set; } = true; - public string Version { get; set; } = "4.1.14"; + public string Version { get; set; } = "4.1.17"; public string Method { get; set; } = "standalone"; // "standalone" or "npm" public string ConfigPath { get; set; } = "tailwind.config.js"; public string CssPath { get; set; } = "wwwroot/app.css"; From 9fee3b333a04354b18316c782f701f1215493bb6 Mon Sep 17 00:00:00 2001 From: Shewart Date: Mon, 8 Dec 2025 23:32:26 +0200 Subject: [PATCH 03/32] refactor: Update component properties to use new binding syntax and improve consistency across demos; enhance layout and structure for better readability. --- .../Components/Demo/AdvancedFormDemo.razor | 18 +++++---- .../Components/Demo/BadgesDialogDemo.razor | 32 +++++++++------- .../Components/Demo/ButtonsDemo.razor | 22 +++++------ .../Components/Demo/CardsAlertsDemo.razor | 38 +++++++++++-------- .../Demo/ComplexComponentsDemo.razor | 6 +-- .../Components/Demo/DataDisplayDemo.razor | 14 +++---- .../Components/Demo/FormControlsDemo.razor | 6 +-- .../Components/Demo/NavigationDemo.razor | 11 ++++-- .../Components/Demo/OverlayDemo.razor | 14 +++---- .../Components/Layout/MainLayout.razor | 16 +++----- 10 files changed, 93 insertions(+), 84 deletions(-) diff --git a/NET9/BlazorInteractiveServer/Components/Demo/AdvancedFormDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/AdvancedFormDemo.razor index 415035e..f5d7c5b 100644 --- a/NET9/BlazorInteractiveServer/Components/Demo/AdvancedFormDemo.razor +++ b/NET9/BlazorInteractiveServer/Components/Demo/AdvancedFormDemo.razor @@ -1,4 +1,5 @@ @namespace BlazorInteractiveServer.Components.Demo +@using BlazorInteractiveServer.Components

Advanced Forms

@@ -46,7 +47,7 @@
- @if (!string.IsNullOrEmpty(_selectedTech)) @@ -56,7 +57,7 @@
- @if (!string.IsNullOrEmpty(_selectedFramework)) @@ -73,7 +74,7 @@
- + @if (_selectedDate.HasValue) {

Selected: @_selectedDate.Value.ToString("MMMM dd, yyyy")

@@ -81,7 +82,7 @@
- + @if (_selectedDate2.HasValue) {

Selected: @_selectedDate2.Value.ToString("MMMM dd, yyyy")

@@ -106,7 +107,7 @@

Time Picker

- + @if (_selectedTime.HasValue) {

Selected: @_selectedTime.Value.ToString(@"hh\:mm")

@@ -134,8 +135,10 @@ @if (_formSubmitted) { - - Form submitted successfully! + + + Form submitted successfully! + }
@@ -287,4 +290,3 @@ await FormSubmittedChanged.InvokeAsync(_formSubmitted); } } - diff --git a/NET9/BlazorInteractiveServer/Components/Demo/BadgesDialogDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/BadgesDialogDemo.razor index 2ec9a21..206ae11 100644 --- a/NET9/BlazorInteractiveServer/Components/Demo/BadgesDialogDemo.razor +++ b/NET9/BlazorInteractiveServer/Components/Demo/BadgesDialogDemo.razor @@ -1,26 +1,31 @@ @using BlazorInteractiveServer.Components.UI +@using BlazorInteractiveServer.Components

Badges & Dialog

- Default - Secondary - Destructive - Success - Warning - Info + Default + Secondary + Destructive + Success + Warning + Info
- - + + + + ShellUI Dialog + This is a demo of the Dialog component. +

This dialog demonstrates the ShellUI Dialog component. You can put any content here!

- -
- - -
+ + + + + @code { @@ -36,4 +41,3 @@ isDialogOpen = false; } } - diff --git a/NET9/BlazorInteractiveServer/Components/Demo/ButtonsDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/ButtonsDemo.razor index a78b1a5..73e029c 100644 --- a/NET9/BlazorInteractiveServer/Components/Demo/ButtonsDemo.razor +++ b/NET9/BlazorInteractiveServer/Components/Demo/ButtonsDemo.razor @@ -1,24 +1,25 @@ @using BlazorInteractiveServer.Components.UI +@using BlazorInteractiveServer.Components

Variants

- - - - - - + + + + + +

Sizes

- - - - + + + +
@@ -48,4 +49,3 @@ isLoading = false; } } - diff --git a/NET9/BlazorInteractiveServer/Components/Demo/CardsAlertsDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/CardsAlertsDemo.razor index 4f05e58..b8e83fd 100644 --- a/NET9/BlazorInteractiveServer/Components/Demo/CardsAlertsDemo.razor +++ b/NET9/BlazorInteractiveServer/Components/Demo/CardsAlertsDemo.razor @@ -1,35 +1,41 @@ @using BlazorInteractiveServer.Components.UI +@using BlazorInteractiveServer.Components

Card

-
-

Card Title

-

Card description goes here.

-
- + + Card Title + Card description goes here. + +

This is the main content of the card. It can contain any content you want.

- -
- -
+ + + +

Alerts

- - This is an informational alert. + + + This is an informational alert. + - - Operation completed successfully! + + + Operation completed successfully! + - - Please check your input. + + + Please check your input. +
- diff --git a/NET9/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor index f10cef1..8622e6c 100644 --- a/NET9/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor +++ b/NET9/BlazorInteractiveServer/Components/Demo/ComplexComponentsDemo.razor @@ -1,4 +1,5 @@ @namespace BlazorInteractiveServer.Components.Demo +@using BlazorInteractiveServer.Components

Complex Components

@@ -18,7 +19,7 @@ Title="Are you sure?" Description="This action cannot be undone. This will permanently delete your account and remove your data from our servers." ConfirmText="Delete Account" - ConfirmVariant="destructive" + ConfirmVariant="@ButtonVariant.Destructive" CancelText="Cancel" OnConfirm="HandleAlertConfirm" OnCancel="HandleAlertCancel" @@ -89,7 +90,7 @@

Hover Card

- +
@@ -328,4 +329,3 @@ "; } } - diff --git a/NET9/BlazorInteractiveServer/Components/Demo/DataDisplayDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/DataDisplayDemo.razor index 9c0b0a2..8bdad34 100644 --- a/NET9/BlazorInteractiveServer/Components/Demo/DataDisplayDemo.razor +++ b/NET9/BlazorInteractiveServer/Components/Demo/DataDisplayDemo.razor @@ -1,4 +1,5 @@ @namespace BlazorInteractiveServer.Components.Demo +@using BlazorInteractiveServer.Components

Data Display

@@ -13,7 +14,7 @@
- +
@@ -47,7 +48,7 @@

Section 1

- +

Section 2

@@ -63,9 +64,9 @@

Avatar

- - - + + +
@@ -92,7 +93,7 @@ Shell Technologies contact@shell-tech.dev Organization - Verified + Verified @@ -102,4 +103,3 @@ @code { } - diff --git a/NET9/BlazorInteractiveServer/Components/Demo/FormControlsDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/FormControlsDemo.razor index 78f5529..142a31c 100644 --- a/NET9/BlazorInteractiveServer/Components/Demo/FormControlsDemo.razor +++ b/NET9/BlazorInteractiveServer/Components/Demo/FormControlsDemo.razor @@ -1,4 +1,5 @@ @namespace BlazorInteractiveServer.Components.Demo +@using BlazorInteractiveServer.Components

Form Controls

@@ -77,8 +78,8 @@ Toggle Me - Outline - Small + Outline + Small

Pressed: @(_togglePressed ? "Yes" : "No")

@@ -188,4 +189,3 @@ await TogglePressed3Changed.InvokeAsync(value); } } - diff --git a/NET9/BlazorInteractiveServer/Components/Demo/NavigationDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/NavigationDemo.razor index d956272..fa57ded 100644 --- a/NET9/BlazorInteractiveServer/Components/Demo/NavigationDemo.razor +++ b/NET9/BlazorInteractiveServer/Components/Demo/NavigationDemo.razor @@ -1,4 +1,5 @@ @namespace BlazorInteractiveServer.Components.Demo +@using BlazorInteractiveServer.Components

Navigation

@@ -9,13 +10,16 @@
- ShellUI +
+ + ShellUI +
- +
@@ -78,7 +82,7 @@ -

Yes. It adheres to the WAI-ARIA design pattern.

+

Yes. It adheres to the WAI-ARIA design pattern.

Yes. It comes with default styles that matches the other components aesthetic.

@@ -103,4 +107,3 @@ await IsSidebarOpenChanged.InvokeAsync(IsSidebarOpen); } } - diff --git a/NET9/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor b/NET9/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor index 8b935f7..655f22b 100644 --- a/NET9/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor +++ b/NET9/BlazorInteractiveServer/Components/Demo/OverlayDemo.razor @@ -1,4 +1,5 @@ @namespace BlazorInteractiveServer.Components.Demo +@using BlazorInteractiveServer.Components

Overlays

@@ -28,7 +29,7 @@
- +

This is a tooltip on top!

@@ -36,7 +37,7 @@ - +

This is a tooltip on bottom!

@@ -44,7 +45,7 @@ - +

Tooltip on the left

@@ -58,7 +59,7 @@

Popover

- +
@@ -81,8 +82,8 @@

Toast

- - + +
@@ -127,4 +128,3 @@ await ShowWarningToastChanged.InvokeAsync(ShowWarningToast); } } - diff --git a/NET9/BlazorInteractiveServer/Components/Layout/MainLayout.razor b/NET9/BlazorInteractiveServer/Components/Layout/MainLayout.razor index b81a13f..372eb6b 100644 --- a/NET9/BlazorInteractiveServer/Components/Layout/MainLayout.razor +++ b/NET9/BlazorInteractiveServer/Components/Layout/MainLayout.razor @@ -16,12 +16,10 @@
-
- - - -
-

ShellUI

+ + +

ShellUI

+
@@ -89,11 +87,7 @@
-
- - - -
+

Menu

From 17d9e835e92d5d422e1797d339f65f6a619bbe65 Mon Sep 17 00:00:00 2001 From: Shewart Date: Mon, 8 Dec 2025 23:33:33 +0200 Subject: [PATCH 04/32] refactor: Update CSS variables and styles for improved theming; add new SVG assets for light and dark UI modes, enhancing visual consistency and accessibility. --- NET9/BlazorInteractiveServer/wwwroot/app.css | 618 ++++++++---------- .../BlazorInteractiveServer/wwwroot/input.css | 194 +++--- .../wwwroot/shellui-dark.svg | 41 ++ .../wwwroot/shellui-light.svg | 27 + 4 files changed, 446 insertions(+), 434 deletions(-) create mode 100644 NET9/BlazorInteractiveServer/wwwroot/shellui-dark.svg create mode 100644 NET9/BlazorInteractiveServer/wwwroot/shellui-light.svg diff --git a/NET9/BlazorInteractiveServer/wwwroot/app.css b/NET9/BlazorInteractiveServer/wwwroot/app.css index c5cc51a..f034f21 100644 --- a/NET9/BlazorInteractiveServer/wwwroot/app.css +++ b/NET9/BlazorInteractiveServer/wwwroot/app.css @@ -13,15 +13,6 @@ --tw-space-y-reverse: 0; --tw-space-x-reverse: 0; --tw-border-style: solid; - --tw-gradient-position: initial; - --tw-gradient-from: #0000; - --tw-gradient-via: #0000; - --tw-gradient-to: #0000; - --tw-gradient-stops: initial; - --tw-gradient-via-stops: initial; - --tw-gradient-from-position: 0%; - --tw-gradient-via-position: 50%; - --tw-gradient-to-position: 100%; --tw-leading: initial; --tw-font-weight: initial; --tw-tracking: initial; @@ -73,16 +64,12 @@ --font-sans: var(--font-sans); --font-serif: var(--font-serif); --font-mono: var(--font-mono); - --color-red-50: oklch(97.1% 0.013 17.38); - --color-red-500: oklch(63.7% 0.237 25.331); - --color-red-900: oklch(39.6% 0.141 25.723); - --color-yellow-50: oklch(98.7% 0.026 102.212); --color-yellow-400: oklch(85.2% 0.199 91.936); --color-yellow-500: oklch(79.5% 0.184 86.047); --color-yellow-600: oklch(68.1% 0.162 75.834); --color-yellow-700: oklch(55.4% 0.135 66.442); - --color-yellow-900: oklch(42.1% 0.095 57.708); --color-green-50: oklch(98.2% 0.018 155.826); + --color-green-100: oklch(96.2% 0.044 156.743); --color-green-400: oklch(79.2% 0.209 151.711); --color-green-500: oklch(72.3% 0.219 149.579); --color-green-600: oklch(62.7% 0.194 149.214); @@ -92,15 +79,8 @@ --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); - --color-gray-100: oklch(96.7% 0.003 264.542); - --color-gray-200: oklch(92.8% 0.006 264.531); - --color-gray-300: oklch(87.2% 0.01 258.338); --color-gray-400: oklch(70.7% 0.022 261.325); - --color-gray-500: oklch(55.1% 0.027 264.364); - --color-gray-600: oklch(44.6% 0.03 256.802); - --color-gray-700: oklch(37.3% 0.034 259.733); --color-gray-800: oklch(27.8% 0.033 256.848); - --color-gray-900: oklch(21% 0.034 264.665); --color-black: #000; --color-white: #fff; --spacing: 0.25rem; @@ -301,6 +281,17 @@ .pointer-events-none { pointer-events: none; } + .sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; + } .absolute { position: absolute; } @@ -319,6 +310,9 @@ .inset-0 { inset: calc(var(--spacing) * 0); } + .inset-x-0 { + inset-inline: calc(var(--spacing) * 0); + } .inset-y-0 { inset-block: calc(var(--spacing) * 0); } @@ -340,6 +334,12 @@ .top-8 { top: calc(var(--spacing) * 8); } + .top-\[1px\] { + top: 1px; + } + .top-\[50\%\] { + top: 50%; + } .top-full { top: 100%; } @@ -352,9 +352,6 @@ .right-2 { right: calc(var(--spacing) * 2); } - .right-3 { - right: calc(var(--spacing) * 3); - } .right-4 { right: calc(var(--spacing) * 4); } @@ -382,9 +379,15 @@ .left-4 { left: calc(var(--spacing) * 4); } + .left-\[50\%\] { + left: 50%; + } .left-full { left: 100%; } + .z-10 { + z-index: 10; + } .z-40 { z-index: 40; } @@ -409,9 +412,6 @@ max-width: 96rem; } } - .mx-2 { - margin-inline: calc(var(--spacing) * 2); - } .mx-auto { margin-inline: auto; } @@ -427,9 +427,6 @@ .mt-2 { margin-top: calc(var(--spacing) * 2); } - .mt-3 { - margin-top: calc(var(--spacing) * 3); - } .mt-4 { margin-top: calc(var(--spacing) * 4); } @@ -442,11 +439,11 @@ .mt-12 { margin-top: calc(var(--spacing) * 12); } - .mr-0 { - margin-right: calc(var(--spacing) * 0); + .mt-24 { + margin-top: calc(var(--spacing) * 24); } - .mr-1 { - margin-right: calc(var(--spacing) * 1); + .mt-auto { + margin-top: auto; } .mr-2 { margin-right: calc(var(--spacing) * 2); @@ -472,9 +469,15 @@ .mb-8 { margin-bottom: calc(var(--spacing) * 8); } + .mb-24 { + margin-bottom: calc(var(--spacing) * 24); + } .-ml-1 { margin-left: calc(var(--spacing) * -1); } + .ml-1 { + margin-left: calc(var(--spacing) * 1); + } .ml-2 { margin-left: calc(var(--spacing) * 2); } @@ -520,6 +523,9 @@ .h-1\.5 { height: calc(var(--spacing) * 1.5); } + .h-1\/2 { + height: calc(1/2 * 100%); + } .h-2 { height: calc(var(--spacing) * 2); } @@ -583,6 +589,9 @@ .h-\[1px\] { height: 1px; } + .h-auto { + height: auto; + } .h-full { height: 100%; } @@ -640,9 +649,6 @@ .w-5 { width: calc(var(--spacing) * 5); } - .w-5\/6 { - width: calc(5/6 * 100%); - } .w-6 { width: calc(var(--spacing) * 6); } @@ -673,15 +679,6 @@ .w-24 { width: calc(var(--spacing) * 24); } - .w-32 { - width: calc(var(--spacing) * 32); - } - .w-36 { - width: calc(var(--spacing) * 36); - } - .w-48 { - width: calc(var(--spacing) * 48); - } .w-56 { width: calc(var(--spacing) * 56); } @@ -706,12 +703,18 @@ .w-full { width: 100%; } + .w-max { + width: max-content; + } .max-w-4xl { max-width: var(--container-4xl); } .max-w-lg { max-width: var(--container-lg); } + .max-w-max { + max-width: max-content; + } .max-w-md { max-width: var(--container-md); } @@ -761,10 +764,18 @@ --tw-translate-x: calc(var(--spacing) * 5); translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-x-\[-50\%\] { + --tw-translate-x: -50%; + translate: var(--tw-translate-x) var(--tw-translate-y); + } .-translate-y-1\/2 { --tw-translate-y: calc(calc(1/2 * 100%) * -1); translate: var(--tw-translate-x) var(--tw-translate-y); } + .translate-y-\[-50\%\] { + --tw-translate-y: -50%; + translate: var(--tw-translate-x) var(--tw-translate-y); + } .scale-\[1\.02\] { scale: 1.02; } @@ -795,9 +806,15 @@ .touch-none { touch-action: none; } + .list-none { + list-style-type: none; + } .appearance-none { appearance: none; } + .grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @@ -810,6 +827,9 @@ .flex-col-reverse { flex-direction: column-reverse; } + .flex-row { + flex-direction: row; + } .flex-wrap { flex-wrap: wrap; } @@ -828,6 +848,9 @@ .justify-center { justify-content: center; } + .justify-end { + justify-content: flex-end; + } .gap-0\.5 { gap: calc(var(--spacing) * 0.5); } @@ -908,13 +931,6 @@ margin-inline-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-x-reverse))); } } - .space-x-3 { - :where(& > :not(:last-child)) { - --tw-space-x-reverse: 0; - margin-inline-start: calc(calc(var(--spacing) * 3) * var(--tw-space-x-reverse)); - margin-inline-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-x-reverse))); - } - } .space-x-4 { :where(& > :not(:last-child)) { --tw-space-x-reverse: 0; @@ -961,6 +977,14 @@ .rounded-sm { border-radius: calc(var(--radius) - 4px); } + .rounded-t-\[10px\] { + border-top-left-radius: 10px; + border-top-right-radius: 10px; + } + .rounded-b-\[10px\] { + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + } .border { border-style: var(--tw-border-style); border-width: 1px; @@ -985,6 +1009,10 @@ border-bottom-style: var(--tw-border-style); border-bottom-width: 1px; } + .border-l { + border-left-style: var(--tw-border-style); + border-left-width: 1px; + } .border-dashed { --tw-border-style: dashed; border-style: dashed; @@ -998,15 +1026,12 @@ .border-border { border-color: var(--border); } + .border-destructive { + border-color: var(--destructive); + } .border-destructive\/50 { border-color: color-mix(in oklab, var(--destructive) 50%, transparent); } - .border-gray-200 { - border-color: var(--color-gray-200); - } - .border-gray-300 { - border-color: var(--color-gray-300); - } .border-green-500 { border-color: var(--color-green-500); } @@ -1028,18 +1053,12 @@ .border-primary\/20 { border-color: color-mix(in oklab, var(--primary) 20%, transparent); } - .border-red-500 { - border-color: var(--color-red-500); - } .border-ring { border-color: var(--ring); } .border-transparent { border-color: transparent; } - .border-yellow-500 { - border-color: var(--color-yellow-500); - } .border-yellow-500\/50 { border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 50%, transparent); @supports (color: color-mix(in lab, red, red)) { @@ -1073,6 +1092,12 @@ background-color: color-mix(in oklab, var(--color-black) 50%, transparent); } } + .bg-black\/80 { + background-color: color-mix(in srgb, #000 80%, transparent); + @supports (color: color-mix(in lab, red, red)) { + background-color: color-mix(in oklab, var(--color-black) 80%, transparent); + } + } .bg-blue-500 { background-color: var(--color-blue-500); } @@ -1085,9 +1110,6 @@ .bg-destructive { background-color: var(--destructive); } - .bg-gray-100 { - background-color: var(--color-gray-100); - } .bg-green-50 { background-color: var(--color-green-50); } @@ -1100,6 +1122,9 @@ .bg-muted { background-color: var(--muted); } + .bg-muted\/30 { + background-color: color-mix(in oklab, var(--muted) 30%, transparent); + } .bg-muted\/50 { background-color: color-mix(in oklab, var(--muted) 50%, transparent); } @@ -1115,39 +1140,24 @@ .bg-primary\/20 { background-color: color-mix(in oklab, var(--primary) 20%, transparent); } - .bg-red-50 { - background-color: var(--color-red-50); - } .bg-secondary { background-color: var(--secondary); } .bg-transparent { background-color: transparent; } - .bg-yellow-50 { - background-color: var(--color-yellow-50); - } .bg-yellow-500 { background-color: var(--color-yellow-500); } - .bg-gradient-to-br { - --tw-gradient-position: to bottom right in oklab; - background-image: linear-gradient(var(--tw-gradient-stops)); - } - .from-white { - --tw-gradient-from: var(--color-white); - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } - .to-gray-400 { - --tw-gradient-to: var(--color-gray-400); - --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position)); - } .fill-primary-foreground { fill: var(--primary-foreground); } .object-cover { object-fit: cover; } + .p-0 { + padding: calc(var(--spacing) * 0); + } .p-0\.5 { padding: calc(var(--spacing) * 0.5); } @@ -1169,6 +1179,9 @@ .p-8 { padding: calc(var(--spacing) * 8); } + .px-1 { + padding-inline: calc(var(--spacing) * 1); + } .px-1\.5 { padding-inline: calc(var(--spacing) * 1.5); } @@ -1217,6 +1230,15 @@ .pt-2 { padding-top: calc(var(--spacing) * 2); } + .pr-2 { + padding-right: calc(var(--spacing) * 2); + } + .pr-2\.5 { + padding-right: calc(var(--spacing) * 2.5); + } + .pr-3 { + padding-right: calc(var(--spacing) * 3); + } .pr-6 { padding-right: calc(var(--spacing) * 6); } @@ -1226,6 +1248,15 @@ .pb-4 { padding-bottom: calc(var(--spacing) * 4); } + .pl-2 { + padding-left: calc(var(--spacing) * 2); + } + .pl-2\.5 { + padding-left: calc(var(--spacing) * 2.5); + } + .pl-4 { + padding-left: calc(var(--spacing) * 4); + } .text-center { text-align: center; } @@ -1242,18 +1273,10 @@ font-size: var(--text-2xl); line-height: var(--tw-leading, var(--text-2xl--line-height)); } - .text-3xl { - font-size: var(--text-3xl); - line-height: var(--tw-leading, var(--text-3xl--line-height)); - } .text-5xl { font-size: var(--text-5xl); line-height: var(--tw-leading, var(--text-5xl--line-height)); } - .text-base { - font-size: var(--text-base); - line-height: var(--tw-leading, var(--text-base--line-height)); - } .text-lg { font-size: var(--text-lg); line-height: var(--tw-leading, var(--text-lg--line-height)); @@ -1321,24 +1344,12 @@ .text-foreground { color: var(--foreground); } - .text-gray-400 { - color: var(--color-gray-400); - } - .text-gray-600 { - color: var(--color-gray-600); - } - .text-gray-700 { - color: var(--color-gray-700); - } - .text-gray-800 { - color: var(--color-gray-800); - } - .text-gray-900 { - color: var(--color-gray-900); - } .text-green-700 { color: var(--color-green-700); } + .text-green-900 { + color: var(--color-green-900); + } .text-muted-foreground { color: var(--muted-foreground); } @@ -1360,6 +1371,9 @@ .text-yellow-700 { color: var(--color-yellow-700); } + .underline { + text-decoration-line: underline; + } .underline-offset-4 { text-underline-offset: 4px; } @@ -1381,10 +1395,6 @@ .opacity-90 { opacity: 90%; } - .shadow { - --tw-shadow: var(--shadow); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } .shadow-lg { --tw-shadow: var(--shadow-lg); box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); @@ -1449,6 +1459,11 @@ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,); } + .transition { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter; + transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); + transition-duration: var(--tw-duration, var(--default-transition-duration)); + } .transition-all { transition-property: all; transition-timing-function: var(--tw-ease, var(--default-transition-timing-function)); @@ -1529,11 +1544,6 @@ font-weight: var(--font-weight-medium); } } - .placeholder\:text-gray-500 { - &::placeholder { - color: var(--color-gray-500); - } - } .placeholder\:text-muted-foreground { &::placeholder { color: var(--muted-foreground); @@ -1560,13 +1570,6 @@ } } } - .hover\:bg-background\/50 { - &:hover { - @media (hover: hover) { - background-color: color-mix(in oklab, var(--background) 50%, transparent); - } - } - } .hover\:bg-background\/90 { &:hover { @media (hover: hover) { @@ -1605,13 +1608,6 @@ } } } - .hover\:bg-gray-100 { - &:hover { - @media (hover: hover) { - background-color: var(--color-gray-100); - } - } - } .hover\:bg-green-600 { &:hover { @media (hover: hover) { @@ -1717,6 +1713,13 @@ } } } + .hover\:opacity-80 { + &:hover { + @media (hover: hover) { + opacity: 80%; + } + } + } .hover\:opacity-100 { &:hover { @media (hover: hover) { @@ -1734,11 +1737,6 @@ background-color: var(--accent); } } - .focus\:bg-gray-100 { - &:focus { - background-color: var(--color-gray-100); - } - } .focus\:bg-primary { &:focus { background-color: var(--primary); @@ -1754,12 +1752,6 @@ color: var(--primary-foreground); } } - .focus\:ring-1 { - &:focus { - --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor); - box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); - } - } .focus\:ring-2 { &:focus { --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor); @@ -1795,6 +1787,11 @@ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } } + .focus-visible\:ring-destructive { + &:focus-visible { + --tw-ring-color: var(--destructive); + } + } .focus-visible\:ring-ring { &:focus-visible { --tw-ring-color: var(--ring); @@ -1837,6 +1834,43 @@ opacity: 50%; } } + .data-\[disabled\]\:pointer-events-none { + &[data-disabled] { + pointer-events: none; + } + } + .data-\[disabled\]\:opacity-50 { + &[data-disabled] { + opacity: 50%; + } + } + .data-\[state\=closed\]\:duration-300 { + &[data-state="closed"] { + --tw-duration: 300ms; + transition-duration: 300ms; + } + } + .data-\[state\=open\]\:bg-accent { + &[data-state="open"] { + background-color: var(--accent); + } + } + .data-\[state\=open\]\:bg-secondary { + &[data-state="open"] { + background-color: var(--secondary); + } + } + .data-\[state\=open\]\:text-muted-foreground { + &[data-state="open"] { + color: var(--muted-foreground); + } + } + .data-\[state\=open\]\:duration-500 { + &[data-state="open"] { + --tw-duration: 500ms; + transition-duration: 500ms; + } + } .data-\[state\=selected\]\:bg-muted { &[data-state="selected"] { background-color: var(--muted); @@ -1847,21 +1881,11 @@ background-color: color-mix(in oklab, var(--background) 60%, transparent); } } - .sm\:mt-0 { - @media (width >= 40rem) { - margin-top: calc(var(--spacing) * 0); - } - } .sm\:block { @media (width >= 40rem) { display: block; } } - .sm\:inline { - @media (width >= 40rem) { - display: inline; - } - } .sm\:inline-flex { @media (width >= 40rem) { display: inline-flex; @@ -1872,6 +1896,11 @@ width: auto; } } + .sm\:max-w-sm { + @media (width >= 40rem) { + max-width: var(--container-sm); + } + } .sm\:flex-col { @media (width >= 40rem) { flex-direction: column; @@ -1920,14 +1949,14 @@ } } } - .sm\:p-6 { + .sm\:rounded-lg { @media (width >= 40rem) { - padding: calc(var(--spacing) * 6); + border-radius: var(--radius); } } - .sm\:px-4 { + .sm\:p-6 { @media (width >= 40rem) { - padding-inline: calc(var(--spacing) * 4); + padding: calc(var(--spacing) * 6); } } .sm\:text-left { @@ -2013,35 +2042,11 @@ border-color: var(--color-green-500); } } - .dark\:border-green-500\/50 { - @media (prefers-color-scheme: dark) { - border-color: color-mix(in srgb, oklch(72.3% 0.219 149.579) 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-green-500) 50%, transparent); - } - } - } - .dark\:border-red-500\/50 { - @media (prefers-color-scheme: dark) { - border-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-red-500) 50%, transparent); - } - } - } .dark\:border-yellow-500 { @media (prefers-color-scheme: dark) { border-color: var(--color-yellow-500); } } - .dark\:border-yellow-500\/50 { - @media (prefers-color-scheme: dark) { - border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 50%, transparent); - @supports (color: color-mix(in lab, red, red)) { - border-color: color-mix(in oklab, var(--color-yellow-500) 50%, transparent); - } - } - } .dark\:bg-green-900\/20 { @media (prefers-color-scheme: dark) { background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 20%, transparent); @@ -2050,25 +2055,14 @@ } } } - .dark\:bg-red-900\/20 { - @media (prefers-color-scheme: dark) { - background-color: color-mix(in srgb, oklch(39.6% 0.141 25.723) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-red-900) 20%, transparent); - } - } - } - .dark\:bg-yellow-900\/20 { + .dark\:text-blue-400 { @media (prefers-color-scheme: dark) { - background-color: color-mix(in srgb, oklch(42.1% 0.095 57.708) 20%, transparent); - @supports (color: color-mix(in lab, red, red)) { - background-color: color-mix(in oklab, var(--color-yellow-900) 20%, transparent); - } + color: var(--color-blue-400); } } - .dark\:text-blue-400 { + .dark\:text-green-100 { @media (prefers-color-scheme: dark) { - color: var(--color-blue-400); + color: var(--color-green-100); } } .dark\:text-green-400 { @@ -2266,112 +2260,110 @@ } } :root { - --background: oklch(0.9491 0.0085 197.0126); - --foreground: oklch(0.3772 0.0619 212.6640); - --card: oklch(0.9724 0.0053 197.0692); - --card-foreground: oklch(0.3772 0.0619 212.6640); - --popover: oklch(0.9724 0.0053 197.0692); - --popover-foreground: oklch(0.3772 0.0619 212.6640); - --primary: oklch(0.5624 0.0947 203.2755); - --primary-foreground: oklch(1.0000 0 0); - --secondary: oklch(0.9244 0.0181 196.8450); - --secondary-foreground: oklch(0.3772 0.0619 212.6640); - --muted: oklch(0.9295 0.0107 196.9723); - --muted-foreground: oklch(0.5428 0.0594 201.5662); - --accent: oklch(0.9021 0.0297 201.8915); - --accent-foreground: oklch(0.3772 0.0619 212.6640); - --destructive: oklch(0.5732 0.1901 25.5409); - --destructive-foreground: oklch(1.0000 0 0); - --border: oklch(0.8931 0.0205 204.4136); - --input: oklch(0.9244 0.0181 196.8450); - --ring: oklch(0.5624 0.0947 203.2755); - --chart-1: oklch(0.5624 0.0947 203.2755); - --chart-2: oklch(0.6389 0.1029 201.5918); - --chart-3: oklch(0.7124 0.1075 201.2486); - --chart-4: oklch(0.7701 0.0979 201.1816); - --chart-5: oklch(0.8336 0.0771 200.9702); - --sidebar: oklch(0.9280 0.0183 205.3151); - --sidebar-foreground: oklch(0.3772 0.0619 212.6640); - --sidebar-primary: oklch(0.5624 0.0947 203.2755); - --sidebar-primary-foreground: oklch(1.0000 0 0); - --sidebar-accent: oklch(0.9021 0.0297 201.8915); - --sidebar-accent-foreground: oklch(0.3772 0.0619 212.6640); - --sidebar-border: oklch(0.8931 0.0205 204.4136); - --sidebar-ring: oklch(0.5624 0.0947 203.2755); - --font-sans: Courier New, monospace; - --font-serif: Courier New, monospace; - --font-mono: Courier New, monospace; - --default-font-family: Courier New, monospace; - --radius: 0.125rem; - --shadow-x: 1px; + --background: oklch(0.9900 0 0); + --foreground: oklch(0 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0 0 0); + --popover: oklch(0.9900 0 0); + --popover-foreground: oklch(0 0 0); + --primary: oklch(0 0 0); + --primary-foreground: oklch(1 0 0); + --secondary: oklch(0.9400 0 0); + --secondary-foreground: oklch(0 0 0); + --muted: oklch(0.9700 0 0); + --muted-foreground: oklch(0.4400 0 0); + --accent: oklch(0.9400 0 0); + --accent-foreground: oklch(0 0 0); + --destructive: oklch(0.6300 0.1900 23.0300); + --destructive-foreground: oklch(1 0 0); + --border: oklch(0.9200 0 0); + --input: oklch(0.9400 0 0); + --ring: oklch(0 0 0); + --chart-1: oklch(0.8100 0.1700 75.3500); + --chart-2: oklch(0.5500 0.2200 264.5300); + --chart-3: oklch(0.7200 0 0); + --chart-4: oklch(0.9200 0 0); + --chart-5: oklch(0.5600 0 0); + --sidebar: oklch(0.9900 0 0); + --sidebar-foreground: oklch(0 0 0); + --sidebar-primary: oklch(0 0 0); + --sidebar-primary-foreground: oklch(1 0 0); + --sidebar-accent: oklch(0.9400 0 0); + --sidebar-accent-foreground: oklch(0 0 0); + --sidebar-border: oklch(0.9400 0 0); + --sidebar-ring: oklch(0 0 0); + --font-sans: Geist, sans-serif; + --font-serif: Georgia, serif; + --font-mono: Geist Mono, monospace; + --radius: 0.5rem; + --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; - --shadow-opacity: 0.15; - --shadow-color: hsl(185 70% 30% / 0.15); - --shadow-2xs: 1px 1px 2px 0px hsl(185 70% 30% / 0.07); - --shadow-xs: 1px 1px 2px 0px hsl(185 70% 30% / 0.07); - --shadow-sm: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15); - --shadow: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15); - --shadow-md: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 2px 4px -1px hsl(185 70% 30% / 0.15); - --shadow-lg: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 4px 6px -1px hsl(185 70% 30% / 0.15); - --shadow-xl: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 8px 10px -1px hsl(185 70% 30% / 0.15); - --shadow-2xl: 1px 1px 2px 0px hsl(185 70% 30% / 0.38); + --shadow-opacity: 0.18; + --shadow-color: hsl(0 0% 0%); + --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); + --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); + --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); + --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); --tracking-normal: 0em; --spacing: 0.25rem; } .dark { - --background: oklch(0.2068 0.0247 224.4533); - --foreground: oklch(0.8520 0.1269 195.0354); - --card: oklch(0.2293 0.0276 216.0674); - --card-foreground: oklch(0.8520 0.1269 195.0354); - --popover: oklch(0.2293 0.0276 216.0674); - --popover-foreground: oklch(0.8520 0.1269 195.0354); - --primary: oklch(0.8520 0.1269 195.0354); - --primary-foreground: oklch(0.2068 0.0247 224.4533); - --secondary: oklch(0.3775 0.0564 216.5010); - --secondary-foreground: oklch(0.8520 0.1269 195.0354); - --muted: oklch(0.2894 0.0412 218.8153); - --muted-foreground: oklch(0.6611 0.0975 195.0526); - --accent: oklch(0.3775 0.0564 216.5010); - --accent-foreground: oklch(0.8520 0.1269 195.0354); - --destructive: oklch(0.6168 0.2086 25.8088); - --destructive-foreground: oklch(0.9612 0 0); - --border: oklch(0.3775 0.0564 216.5010); - --input: oklch(0.3775 0.0564 216.5010); - --ring: oklch(0.8520 0.1269 195.0354); - --chart-1: oklch(0.8520 0.1269 195.0354); - --chart-2: oklch(0.6611 0.0975 195.0526); - --chart-3: oklch(0.5804 0.0849 195.0673); - --chart-4: oklch(0.4269 0.0630 202.6247); - --chart-5: oklch(0.3142 0.0455 204.1575); - --sidebar: oklch(0.2068 0.0247 224.4533); - --sidebar-foreground: oklch(0.8520 0.1269 195.0354); - --sidebar-primary: oklch(0.8520 0.1269 195.0354); - --sidebar-primary-foreground: oklch(0.2068 0.0247 224.4533); - --sidebar-accent: oklch(0.3775 0.0564 216.5010); - --sidebar-accent-foreground: oklch(0.8520 0.1269 195.0354); - --sidebar-border: oklch(0.3775 0.0564 216.5010); - --sidebar-ring: oklch(0.8520 0.1269 195.0354); - --font-sans: Source Code Pro, monospace; - --font-serif: Source Code Pro, monospace; - --font-mono: Source Code Pro, monospace; - --default-font-family: Source Code Pro, monospace; - --radius: 0.125rem; - --shadow-x: 1px; + --background: oklch(0 0 0); + --foreground: oklch(1 0 0); + --card: oklch(0.1400 0 0); + --card-foreground: oklch(1 0 0); + --popover: oklch(0.1800 0 0); + --popover-foreground: oklch(1 0 0); + --primary: oklch(1 0 0); + --primary-foreground: oklch(0 0 0); + --secondary: oklch(0.2500 0 0); + --secondary-foreground: oklch(1 0 0); + --muted: oklch(0.2300 0 0); + --muted-foreground: oklch(0.7200 0 0); + --accent: oklch(0.3200 0 0); + --accent-foreground: oklch(1 0 0); + --destructive: oklch(0.6900 0.2000 23.9100); + --destructive-foreground: oklch(0 0 0); + --border: oklch(0.2600 0 0); + --input: oklch(0.3200 0 0); + --ring: oklch(0.7200 0 0); + --chart-1: oklch(0.8100 0.1700 75.3500); + --chart-2: oklch(0.5800 0.2100 260.8400); + --chart-3: oklch(0.5600 0 0); + --chart-4: oklch(0.4400 0 0); + --chart-5: oklch(0.9200 0 0); + --sidebar: oklch(0.1800 0 0); + --sidebar-foreground: oklch(1 0 0); + --sidebar-primary: oklch(1 0 0); + --sidebar-primary-foreground: oklch(0 0 0); + --sidebar-accent: oklch(0.3200 0 0); + --sidebar-accent-foreground: oklch(1 0 0); + --sidebar-border: oklch(0.3200 0 0); + --sidebar-ring: oklch(0.7200 0 0); + --font-sans: Geist, sans-serif; + --font-serif: Georgia, serif; + --font-mono: Geist Mono, monospace; + --radius: 0.5rem; + --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; - --shadow-opacity: 0.2; - --shadow-color: hsl(180 70% 60% / 0.2); - --shadow-2xs: 1px 1px 2px 0px hsl(180 70% 60% / 0.10); - --shadow-xs: 1px 1px 2px 0px hsl(180 70% 60% / 0.10); - --shadow-sm: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20); - --shadow: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20); - --shadow-md: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 2px 4px -1px hsl(180 70% 60% / 0.20); - --shadow-lg: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 4px 6px -1px hsl(180 70% 60% / 0.20); - --shadow-xl: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 8px 10px -1px hsl(180 70% 60% / 0.20); - --shadow-2xl: 1px 1px 2px 0px hsl(180 70% 60% / 0.50); + --shadow-opacity: 0.18; + --shadow-color: hsl(0 0% 0%); + --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); + --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); + --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); + --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); } html, body, :host { font-family: var(--font-sans) !important; @@ -2469,48 +2461,6 @@ html, body, :host { inherits: false; initial-value: solid; } -@property --tw-gradient-position { - syntax: "*"; - inherits: false; -} -@property --tw-gradient-from { - syntax: ""; - inherits: false; - initial-value: #0000; -} -@property --tw-gradient-via { - syntax: ""; - inherits: false; - initial-value: #0000; -} -@property --tw-gradient-to { - syntax: ""; - inherits: false; - initial-value: #0000; -} -@property --tw-gradient-stops { - syntax: "*"; - inherits: false; -} -@property --tw-gradient-via-stops { - syntax: "*"; - inherits: false; -} -@property --tw-gradient-from-position { - syntax: ""; - inherits: false; - initial-value: 0%; -} -@property --tw-gradient-via-position { - syntax: ""; - inherits: false; - initial-value: 50%; -} -@property --tw-gradient-to-position { - syntax: ""; - inherits: false; - initial-value: 100%; -} @property --tw-leading { syntax: "*"; inherits: false; diff --git a/NET9/BlazorInteractiveServer/wwwroot/input.css b/NET9/BlazorInteractiveServer/wwwroot/input.css index 686709d..1428af4 100644 --- a/NET9/BlazorInteractiveServer/wwwroot/input.css +++ b/NET9/BlazorInteractiveServer/wwwroot/input.css @@ -1,113 +1,111 @@ @import "tailwindcss"; :root { - --background: oklch(0.9491 0.0085 197.0126); - --foreground: oklch(0.3772 0.0619 212.6640); - --card: oklch(0.9724 0.0053 197.0692); - --card-foreground: oklch(0.3772 0.0619 212.6640); - --popover: oklch(0.9724 0.0053 197.0692); - --popover-foreground: oklch(0.3772 0.0619 212.6640); - --primary: oklch(0.5624 0.0947 203.2755); - --primary-foreground: oklch(1.0000 0 0); - --secondary: oklch(0.9244 0.0181 196.8450); - --secondary-foreground: oklch(0.3772 0.0619 212.6640); - --muted: oklch(0.9295 0.0107 196.9723); - --muted-foreground: oklch(0.5428 0.0594 201.5662); - --accent: oklch(0.9021 0.0297 201.8915); - --accent-foreground: oklch(0.3772 0.0619 212.6640); - --destructive: oklch(0.5732 0.1901 25.5409); - --destructive-foreground: oklch(1.0000 0 0); - --border: oklch(0.8931 0.0205 204.4136); - --input: oklch(0.9244 0.0181 196.8450); - --ring: oklch(0.5624 0.0947 203.2755); - --chart-1: oklch(0.5624 0.0947 203.2755); - --chart-2: oklch(0.6389 0.1029 201.5918); - --chart-3: oklch(0.7124 0.1075 201.2486); - --chart-4: oklch(0.7701 0.0979 201.1816); - --chart-5: oklch(0.8336 0.0771 200.9702); - --sidebar: oklch(0.9280 0.0183 205.3151); - --sidebar-foreground: oklch(0.3772 0.0619 212.6640); - --sidebar-primary: oklch(0.5624 0.0947 203.2755); - --sidebar-primary-foreground: oklch(1.0000 0 0); - --sidebar-accent: oklch(0.9021 0.0297 201.8915); - --sidebar-accent-foreground: oklch(0.3772 0.0619 212.6640); - --sidebar-border: oklch(0.8931 0.0205 204.4136); - --sidebar-ring: oklch(0.5624 0.0947 203.2755); - --font-sans: Courier New, monospace; - --font-serif: Courier New, monospace; - --font-mono: Courier New, monospace; - --default-font-family: Courier New, monospace; - --radius: 0.125rem; - --shadow-x: 1px; + --background: oklch(0.9900 0 0); + --foreground: oklch(0 0 0); + --card: oklch(1 0 0); + --card-foreground: oklch(0 0 0); + --popover: oklch(0.9900 0 0); + --popover-foreground: oklch(0 0 0); + --primary: oklch(0 0 0); + --primary-foreground: oklch(1 0 0); + --secondary: oklch(0.9400 0 0); + --secondary-foreground: oklch(0 0 0); + --muted: oklch(0.9700 0 0); + --muted-foreground: oklch(0.4400 0 0); + --accent: oklch(0.9400 0 0); + --accent-foreground: oklch(0 0 0); + --destructive: oklch(0.6300 0.1900 23.0300); + --destructive-foreground: oklch(1 0 0); + --border: oklch(0.9200 0 0); + --input: oklch(0.9400 0 0); + --ring: oklch(0 0 0); + --chart-1: oklch(0.8100 0.1700 75.3500); + --chart-2: oklch(0.5500 0.2200 264.5300); + --chart-3: oklch(0.7200 0 0); + --chart-4: oklch(0.9200 0 0); + --chart-5: oklch(0.5600 0 0); + --sidebar: oklch(0.9900 0 0); + --sidebar-foreground: oklch(0 0 0); + --sidebar-primary: oklch(0 0 0); + --sidebar-primary-foreground: oklch(1 0 0); + --sidebar-accent: oklch(0.9400 0 0); + --sidebar-accent-foreground: oklch(0 0 0); + --sidebar-border: oklch(0.9400 0 0); + --sidebar-ring: oklch(0 0 0); + --font-sans: Geist, sans-serif; + --font-serif: Georgia, serif; + --font-mono: Geist Mono, monospace; + --radius: 0.5rem; + --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; - --shadow-opacity: 0.15; - --shadow-color: hsl(185 70% 30% / 0.15); - --shadow-2xs: 1px 1px 2px 0px hsl(185 70% 30% / 0.07); - --shadow-xs: 1px 1px 2px 0px hsl(185 70% 30% / 0.07); - --shadow-sm: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15); - --shadow: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15); - --shadow-md: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 2px 4px -1px hsl(185 70% 30% / 0.15); - --shadow-lg: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 4px 6px -1px hsl(185 70% 30% / 0.15); - --shadow-xl: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 8px 10px -1px hsl(185 70% 30% / 0.15); - --shadow-2xl: 1px 1px 2px 0px hsl(185 70% 30% / 0.38); + --shadow-opacity: 0.18; + --shadow-color: hsl(0 0% 0%); + --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); + --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); + --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); + --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); --tracking-normal: 0em; --spacing: 0.25rem; } .dark { - --background: oklch(0.2068 0.0247 224.4533); - --foreground: oklch(0.8520 0.1269 195.0354); - --card: oklch(0.2293 0.0276 216.0674); - --card-foreground: oklch(0.8520 0.1269 195.0354); - --popover: oklch(0.2293 0.0276 216.0674); - --popover-foreground: oklch(0.8520 0.1269 195.0354); - --primary: oklch(0.8520 0.1269 195.0354); - --primary-foreground: oklch(0.2068 0.0247 224.4533); - --secondary: oklch(0.3775 0.0564 216.5010); - --secondary-foreground: oklch(0.8520 0.1269 195.0354); - --muted: oklch(0.2894 0.0412 218.8153); - --muted-foreground: oklch(0.6611 0.0975 195.0526); - --accent: oklch(0.3775 0.0564 216.5010); - --accent-foreground: oklch(0.8520 0.1269 195.0354); - --destructive: oklch(0.6168 0.2086 25.8088); - --destructive-foreground: oklch(0.9612 0 0); - --border: oklch(0.3775 0.0564 216.5010); - --input: oklch(0.3775 0.0564 216.5010); - --ring: oklch(0.8520 0.1269 195.0354); - --chart-1: oklch(0.8520 0.1269 195.0354); - --chart-2: oklch(0.6611 0.0975 195.0526); - --chart-3: oklch(0.5804 0.0849 195.0673); - --chart-4: oklch(0.4269 0.0630 202.6247); - --chart-5: oklch(0.3142 0.0455 204.1575); - --sidebar: oklch(0.2068 0.0247 224.4533); - --sidebar-foreground: oklch(0.8520 0.1269 195.0354); - --sidebar-primary: oklch(0.8520 0.1269 195.0354); - --sidebar-primary-foreground: oklch(0.2068 0.0247 224.4533); - --sidebar-accent: oklch(0.3775 0.0564 216.5010); - --sidebar-accent-foreground: oklch(0.8520 0.1269 195.0354); - --sidebar-border: oklch(0.3775 0.0564 216.5010); - --sidebar-ring: oklch(0.8520 0.1269 195.0354); - --font-sans: Source Code Pro, monospace; - --font-serif: Source Code Pro, monospace; - --font-mono: Source Code Pro, monospace; - --default-font-family: Source Code Pro, monospace; - --radius: 0.125rem; - --shadow-x: 1px; + --background: oklch(0 0 0); + --foreground: oklch(1 0 0); + --card: oklch(0.1400 0 0); + --card-foreground: oklch(1 0 0); + --popover: oklch(0.1800 0 0); + --popover-foreground: oklch(1 0 0); + --primary: oklch(1 0 0); + --primary-foreground: oklch(0 0 0); + --secondary: oklch(0.2500 0 0); + --secondary-foreground: oklch(1 0 0); + --muted: oklch(0.2300 0 0); + --muted-foreground: oklch(0.7200 0 0); + --accent: oklch(0.3200 0 0); + --accent-foreground: oklch(1 0 0); + --destructive: oklch(0.6900 0.2000 23.9100); + --destructive-foreground: oklch(0 0 0); + --border: oklch(0.2600 0 0); + --input: oklch(0.3200 0 0); + --ring: oklch(0.7200 0 0); + --chart-1: oklch(0.8100 0.1700 75.3500); + --chart-2: oklch(0.5800 0.2100 260.8400); + --chart-3: oklch(0.5600 0 0); + --chart-4: oklch(0.4400 0 0); + --chart-5: oklch(0.9200 0 0); + --sidebar: oklch(0.1800 0 0); + --sidebar-foreground: oklch(1 0 0); + --sidebar-primary: oklch(1 0 0); + --sidebar-primary-foreground: oklch(0 0 0); + --sidebar-accent: oklch(0.3200 0 0); + --sidebar-accent-foreground: oklch(1 0 0); + --sidebar-border: oklch(0.3200 0 0); + --sidebar-ring: oklch(0.7200 0 0); + --font-sans: Geist, sans-serif; + --font-serif: Georgia, serif; + --font-mono: Geist Mono, monospace; + --radius: 0.5rem; + --shadow-x: 0px; --shadow-y: 1px; --shadow-blur: 2px; --shadow-spread: 0px; - --shadow-opacity: 0.2; - --shadow-color: hsl(180 70% 60% / 0.2); - --shadow-2xs: 1px 1px 2px 0px hsl(180 70% 60% / 0.10); - --shadow-xs: 1px 1px 2px 0px hsl(180 70% 60% / 0.10); - --shadow-sm: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20); - --shadow: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20); - --shadow-md: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 2px 4px -1px hsl(180 70% 60% / 0.20); - --shadow-lg: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 4px 6px -1px hsl(180 70% 60% / 0.20); - --shadow-xl: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 8px 10px -1px hsl(180 70% 60% / 0.20); - --shadow-2xl: 1px 1px 2px 0px hsl(180 70% 60% / 0.50); + --shadow-opacity: 0.18; + --shadow-color: hsl(0 0% 0%); + --shadow-2xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-xs: 0px 1px 2px 0px hsl(0 0% 0% / 0.09); + --shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); + --shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); + --shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); + --shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); + --shadow-2xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.45); } @theme inline { @@ -130,10 +128,6 @@ --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); - - /* Hover states */ - --color-accent-hover: color-mix(in oklch, var(--accent) 90%, var(--foreground) 10%); - --color-muted-hover: color-mix(in oklch, var(--muted) 80%, var(--foreground) 20%); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); diff --git a/NET9/BlazorInteractiveServer/wwwroot/shellui-dark.svg b/NET9/BlazorInteractiveServer/wwwroot/shellui-dark.svg new file mode 100644 index 0000000..83640a8 --- /dev/null +++ b/NET9/BlazorInteractiveServer/wwwroot/shellui-dark.svg @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/NET9/BlazorInteractiveServer/wwwroot/shellui-light.svg b/NET9/BlazorInteractiveServer/wwwroot/shellui-light.svg new file mode 100644 index 0000000..37f7a7f --- /dev/null +++ b/NET9/BlazorInteractiveServer/wwwroot/shellui-light.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + From c8a39476a5ce20d41ad11556bbbc796e6416f48c Mon Sep 17 00:00:00 2001 From: Shewart Date: Fri, 12 Dec 2025 23:48:43 +0200 Subject: [PATCH 05/32] feat: Initialize ShellUI.Preview project with core components, routing, and layout structure; add Tailwind CSS configuration and sample data for weather component. --- NET9/ShellUI.Preview/App.razor | 6 + NET9/ShellUI.Preview/Layout/MainLayout.razor | 16 + .../Layout/PreviewLayout.razor | 6 + .../Pages/ComponentPreview.razor | 156 + NET9/ShellUI.Preview/Pages/Home.razor | 7 + NET9/ShellUI.Preview/Pages/NotFound.razor | 5 + NET9/ShellUI.Preview/Program.cs | 11 + .../Properties/launchSettings.json | 25 + NET9/ShellUI.Preview/ShellUI.Preview.csproj | 19 + NET9/ShellUI.Preview/_Imports.razor | 10 + NET9/ShellUI.Preview/tailwind.config.js | 8 + NET9/ShellUI.Preview/wwwroot/css/app.css | 2721 +++++++++++++++++ NET9/ShellUI.Preview/wwwroot/index.html | 50 + NET9/ShellUI.Preview/wwwroot/input.css | 188 ++ .../wwwroot/sample-data/weather.json | 27 + 15 files changed, 3255 insertions(+) create mode 100644 NET9/ShellUI.Preview/App.razor create mode 100644 NET9/ShellUI.Preview/Layout/MainLayout.razor create mode 100644 NET9/ShellUI.Preview/Layout/PreviewLayout.razor create mode 100644 NET9/ShellUI.Preview/Pages/ComponentPreview.razor create mode 100644 NET9/ShellUI.Preview/Pages/Home.razor create mode 100644 NET9/ShellUI.Preview/Pages/NotFound.razor create mode 100644 NET9/ShellUI.Preview/Program.cs create mode 100644 NET9/ShellUI.Preview/Properties/launchSettings.json create mode 100644 NET9/ShellUI.Preview/ShellUI.Preview.csproj create mode 100644 NET9/ShellUI.Preview/_Imports.razor create mode 100644 NET9/ShellUI.Preview/tailwind.config.js create mode 100644 NET9/ShellUI.Preview/wwwroot/css/app.css create mode 100644 NET9/ShellUI.Preview/wwwroot/index.html create mode 100644 NET9/ShellUI.Preview/wwwroot/input.css create mode 100644 NET9/ShellUI.Preview/wwwroot/sample-data/weather.json diff --git a/NET9/ShellUI.Preview/App.razor b/NET9/ShellUI.Preview/App.razor new file mode 100644 index 0000000..cd51468 --- /dev/null +++ b/NET9/ShellUI.Preview/App.razor @@ -0,0 +1,6 @@ +๏ปฟ + + + + + diff --git a/NET9/ShellUI.Preview/Layout/MainLayout.razor b/NET9/ShellUI.Preview/Layout/MainLayout.razor new file mode 100644 index 0000000..76eb725 --- /dev/null +++ b/NET9/ShellUI.Preview/Layout/MainLayout.razor @@ -0,0 +1,16 @@ +๏ปฟ@inherits LayoutComponentBase +
+
+ +
+ +
+
+ About +
+ +
+ @Body +
+
+
diff --git a/NET9/ShellUI.Preview/Layout/PreviewLayout.razor b/NET9/ShellUI.Preview/Layout/PreviewLayout.razor new file mode 100644 index 0000000..9b5aee3 --- /dev/null +++ b/NET9/ShellUI.Preview/Layout/PreviewLayout.razor @@ -0,0 +1,6 @@ +@inherits LayoutComponentBase + +
+ @Body +
+ diff --git a/NET9/ShellUI.Preview/Pages/ComponentPreview.razor b/NET9/ShellUI.Preview/Pages/ComponentPreview.razor new file mode 100644 index 0000000..673b534 --- /dev/null +++ b/NET9/ShellUI.Preview/Pages/ComponentPreview.razor @@ -0,0 +1,156 @@ +@page "/preview/{ComponentName}" +@layout Layout.PreviewLayout +@using ShellUI.Components +@using ShellUI.Components.Models + +@if (RenderComponent != null) +{ +
+ @RenderComponent +
+} +else +{ +
+ Component @ComponentName not found. +
+} + +@code { + [Parameter] public string ComponentName { get; set; } = ""; + [SupplyParameterFromQuery] public string? Variant { get; set; } + [SupplyParameterFromQuery] public string? Size { get; set; } + [SupplyParameterFromQuery] public string? Style { get; set; } + + // Helper data for complex components + private List _tabItems = new() + { + new TabItem { Id = "account", Label = "Account", Content = builder => builder.AddMarkupContent(0, "
Account settings here.
") }, + new TabItem { Id = "password", Label = "Password", Content = builder => builder.AddMarkupContent(0, "
Change password here.
") } + }; + + private List _comboboxOptions = new() { "Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro" }; + + private RenderFragment? RenderComponent => ComponentName.ToLowerInvariant() switch + { + "button" => builder => + { + builder.OpenComponent @if (IsOpen) { -
+
@ChildContent
}
@code { - [CascadingParameter] - private Accordion? Accordion { get; set; } - - [Parameter] - public string Title { get; set; } = ""; - - [Parameter] - public bool IsOpen { get; set; } - - [Parameter] - public RenderFragment? ChildContent { get; set; } - - [Parameter] - public string ClassName { get; set; } = ""; - + [CascadingParameter] private Accordion? Accordion { get; set; } + [Parameter] public string Title { get; set; } = ""; + [Parameter] public bool IsOpen { get; set; } + [Parameter] public RenderFragment? ChildContent { get; set; } + [Parameter] public string? Class { get; set; } [Parameter(CaptureUnmatchedValues = true)] public Dictionary? AdditionalAttributes { get; set; } @@ -51,4 +41,3 @@ IsOpen = !IsOpen; } } - diff --git a/src/ShellUI.Components/Components/Alert.razor b/src/ShellUI.Components/Components/Alert.razor index 2fee74e..59aab66 100644 --- a/src/ShellUI.Components/Components/Alert.razor +++ b/src/ShellUI.Components/Components/Alert.razor @@ -1,6 +1,6 @@ @namespace ShellUI.Components -