Merge pull request #3

Add overview pages, improve web gallery splash, add installation guide, add pills documentation
russkyc · Jan 1, 2025 · fbcdc00 · fbcdc00
2 parents 2f28b62 + 62cfaad
commit fbcdc00
Show file tree

Hide file tree

Showing 25 changed files with 704 additions and 106 deletions.
diff --git a/.github/resources/images/nuget-button.svg b/.github/resources/images/nuget-button.svg
diff --git a/Directory.Packages.props b/Directory.Packages.props
@@ -7,8 +7,7 @@
     <!-- Avalonia packages -->
     <!-- Important: keep version in sync! -->
     <PackageVersion Include="Avalonia" Version="11.2.3" />
-    <PackageVersion Include="Avalonia.Svg" Version="11.2.0.2" />
-    <PackageVersion Include="Avalonia.Xaml.Behaviors" Version="11.2.0.1" />
+    <PackageVersion Include="Avalonia.Xaml.Behaviors" Version="11.2.0.2" />
     <PackageVersion Include="Avalonia.Themes.Fluent" Version="11.2.3" />
     <PackageVersion Include="Avalonia.Fonts.Inter" Version="11.2.3" />
     <PackageVersion Include="Avalonia.Diagnostics" Version="11.2.3" />

diff --git a/README.md b/README.md
@@ -8,12 +8,35 @@
 Russkyc.UI.Avalonia provides clean, beautifully-designed, and customizable components inspired by the design of <a href="https://ui.shadcn.com">shadcn/ui</a> for Avalonia applications.
 </p>
 
-## Installation
+## Installation (Pre-release)
 
 #### 1. Download
+The package can be downloaded installed by the Nuget package manager UI,
+Package Reference, Nuget CLI, Package manager, and other Nuget supported
+channels.
 
-> [!WARNING]  
-> Russkyc.UI.Avalonia is in early development stage and currently has no available nuget packages
+<div align="center">
+    <br/>
+    <a href="https://www.nuget.org/packages/Russkyc.UI.Avalonia">
+        <img src=".github/resources/images/nuget-button.svg" style="width:200px" alt="Nuget">
+    </a>
+    <br/>
+</div>
+
+PackageReference
+```
+<PackageReference Include="Russkyc.UI.Avalonia" Version="0.1.0-pre" />
+```
+
+Nuget CLI
+```
+dotnet add package Russkyc.UI.Avalonia --version 0.1.0-pre
+```
+
+Package Manager
+```
+NuGet\Install-Package Russkyc.UI.Avalonia -Version 0.1.0-pre
+```
 
 #### 2. Configuration
 
@@ -60,25 +83,26 @@ All components use the defaults and theme provided in this template.
 ```xaml
 <ResourceDictionary xmlns="https://github.com/avaloniaui"
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
-    <!-- Defaults -->
+    <!--  Defaults  -->
     <CornerRadius x:Key="Radius">5</CornerRadius>
     <Thickness x:Key="BorderThickness">1</Thickness>
-    <Thickness x:Key="ActiveBorderThickness">2</Thickness>
+    <Thickness x:Key="ActiveBorderThickness">1</Thickness>
     <Thickness x:Key="Padding">12,7</Thickness>
-    <!-- Theme -->
+    <x:Double x:Key="ControlMinHeight">36</x:Double>
+    <!--  Theme  -->
     <ResourceDictionary.ThemeDictionaries>
-        <!-- Light -->
+        <!--  Light  -->
         <ResourceDictionary x:Key="Light">
-            <!-- Colors -->
+            <!--  Colors  -->
             <Color x:Key="Background">#FFFFFF</Color>
             <Color x:Key="Foreground">#000000</Color>
             <Color x:Key="Card">#FFFFFF</Color>
             <Color x:Key="CardForeground">#000000</Color>
             <Color x:Key="Popover">#FFFFFF</Color>
             <Color x:Key="PopoverForeground">#000000</Color>
-            <Color x:Key="Primary">	#18181b</Color>
+            <Color x:Key="Primary">#18181b</Color>
             <Color x:Key="PrimaryForeground">#FAFAFA</Color>
-            <Color x:Key="Secondary">	#f4f4f5</Color>
+            <Color x:Key="Secondary">#f4f4f5</Color>
             <Color x:Key="SecondaryForeground">#18181B</Color>
             <Color x:Key="Muted">#F4F4F5</Color>
             <Color x:Key="MutedForeground">#71717A</Color>
@@ -95,18 +119,18 @@ All components use the defaults and theme provided in this template.
             <Color x:Key="SurfaceOverlay">#06000000</Color>
             <Color x:Key="SurfaceOverlayDeepen">#12000000</Color>
         </ResourceDictionary>
-        <!-- Dark -->
+        <!--  Dark  -->
         <ResourceDictionary x:Key="Dark">
-            <!-- Colors -->
+            <!--  Colors  -->
             <Color x:Key="Background">#09090B</Color>
             <Color x:Key="Foreground">#FAFAFA</Color>
             <Color x:Key="Card">#09090B</Color>
             <Color x:Key="CardForeground">#FAFAFA</Color>
             <Color x:Key="Popover">#09090B</Color>
             <Color x:Key="PopoverForeground">#FAFAFA</Color>
-            <Color x:Key="Primary">	#FAFAFA</Color>
+            <Color x:Key="Primary">#FAFAFA</Color>
             <Color x:Key="PrimaryForeground">#18181B</Color>
-            <Color x:Key="Secondary">	#27272A</Color>
+            <Color x:Key="Secondary">#27272A</Color>
             <Color x:Key="SecondaryForeground">#FAFAFA</Color>
             <Color x:Key="Muted">#27272A</Color>
             <Color x:Key="MutedForeground">#A1A1AA</Color>
@@ -127,6 +151,23 @@ All components use the defaults and theme provided in this template.
 </ResourceDictionary>
 ```
 
+Which will now replace the default theme in `App.axaml`
+
+```xaml
+<Application.Resources>
+    <ResourceDictionary>
+        <ResourceDictionary.MergedDictionaries>
+            <!-- Theme (Replace with new theme) -->
+            <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Themes/Zinc.axaml" />
+            <!-- Base (Required) -->
+            <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Base.axaml" />
+            <ResourceInclude Source="avares://Russkyc.UI.Avalonia/Controls.axaml" />
+        </ResourceDictionary.MergedDictionaries>
+    </ResourceDictionary>
+</Application.Resources>
+```
+
+
 ## License
 
 This project is licensed under the [MIT License](LICENSE.md)

diff --git a/Russkyc.UI.Avalonia.Gallery.Browser/wwwroot/app.css b/Russkyc.UI.Avalonia.Gallery.Browser/wwwroot/app.css
@@ -10,24 +10,24 @@
     pointer-events: none;
 }
 
-@media (prefers-color-scheme: light) {
-    html, body {
-        background: white;
-    }
-    .avalonia-splash {
-        background: white;
-        color: black;
-    }
+html, body {
+    background: white;
 }
 
-@media (prefers-color-scheme: dark) {
-    html, body {
-        background: black;
-    }
-    .avalonia-splash {
-        background: black;
-        color: white;
-    }
+.avalonia-splash a {
+    color: #101010;
+}
+
+.avalonia-splash h4 {
+    font-weight: 400;
+}
+
+.avalonia-splash {
+    background: white;
+    color: black;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
 }
 
 .avalonia-splash.splash-close {