theme updates

pureblazor · Sep 20, 2024 · 122541b · 122541b
1 parent 447db91
commit 122541b
Show file tree

Hide file tree

Showing 28 changed files with 86 additions and 62 deletions.
diff --git a/src/Pure.Blazor.Components.Icons/Pure.Blazor.Components.Icons.csproj b/src/Pure.Blazor.Components.Icons/Pure.Blazor.Components.Icons.csproj
@@ -8,7 +8,7 @@
     <WarningsAsErrors>Nullable</WarningsAsErrors>
     <GeneratePackageOnBuild>True</GeneratePackageOnBuild>
     <Title>PureBlazor Icons</Title>
-    <Version>0.32</Version>
+    <Version>0.32.8</Version>
     <PackageId>PureBlazor.Components.Icons</PackageId>
     <Description>Blazor Icons</Description>
     <PackageProjectUrl>https://pureblazor.com</PackageProjectUrl>

diff --git a/src/Pure.Blazor.Components.Icons/PureIcon.cs b/src/Pure.Blazor.Components.Icons/PureIcon.cs
@@ -167,6 +167,8 @@ private static string BuildMarkup(PureIcons icon)
             PureIcons.IconClock => "<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z\" />",
             PureIcons.PencilSquare => "<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10\" />",
             PureIcons.XMark => "<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6 18 18 6M6 6l12 12\" />",
+            PureIcons.IconMinus => "<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M5 12h14\" />",
+            PureIcons.IconCamera => "<path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M6.827 6.175A2.31 2.31 0 0 1 5.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 0 0-1.134-.175 2.31 2.31 0 0 1-1.64-1.055l-.822-1.316a2.192 2.192 0 0 0-1.736-1.039 48.774 48.774 0 0 0-5.232 0 2.192 2.192 0 0 0-1.736 1.039l-.821 1.316Z\" />\n  <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 12.75a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0ZM18.75 10.5h.008v.008h-.008V10.5Z\" />",
             _ => ""
         };
 

diff --git a/src/Pure.Blazor.Components.Icons/PureIcons.cs b/src/Pure.Blazor.Components.Icons/PureIcons.cs
@@ -55,5 +55,7 @@ public enum PureIcons
     IconPlay,
     IconClock,
     PencilSquare,
-    XMark
+    XMark,
+    IconMinus,
+    IconCamera
 }
diff --git a/src/Pure.Blazor.Components/Buttons/ButtonStyles.cs b/src/Pure.Blazor.Components/Buttons/ButtonStyles.cs
@@ -8,6 +8,7 @@ internal class ButtonStyles
     private const string SmallButton = "px-3 py-1.5 text-xs";
     private const string MediumButton = "px-3.5 py-1.5 text-sm";
     private const string LargeButton = "px-4 py-3 text-lg";
+    private const string ExtraLargeButton = "px-4 py-3 text-lg w-full";
 
     private const string PrimaryButton =
         $"{BaseAccentColors.Brand} hover:bg-brand-900 shadow-brand-950/90 border-transparent font-medium";
@@ -56,6 +57,7 @@ internal class ButtonStyles
 
     public static readonly Dictionary<PureSize, string> Sizes = new()
     {
+        { PureSize.ExtraLarge, ExtraLargeButton },
         { PureSize.Large, LargeButton },
         { PureSize.Small, SmallButton },
         { PureSize.Medium, MediumButton },

diff --git a/src/Pure.Blazor.Components/Common/DefaultTheme.cs b/src/Pure.Blazor.Components/Common/DefaultTheme.cs
@@ -22,6 +22,20 @@ public DefaultTheme()
                 nameof(PureButton),
                 new(ButtonStyles.Base) { Variants = ButtonStyles.Variants, Sizes = ButtonStyles.Sizes }
             },
+            {
+                nameof(PureInput),
+                new("peer block border-1 focus:ring focus:ring-inset ring-brand-700 bg-gray-50 text-gray-800 rounded")
+                {
+                    Sizes = new Dictionary<PureSize, string>
+                    {
+                        { PureSize.ExtraSmall, "text-xs px-1 py-0.5" },
+                        { PureSize.Small, "text-sm px-1 py-0.5" },
+                        { PureSize.Medium, "text-sm px-2 py-1" },
+                        { PureSize.Large, "text-md px-2.5 py-1.5" },
+                        { PureSize.ExtraLarge, "text-lg px-3 py-2" }
+                    }
+                }
+            },
             {
                 nameof(PureTabButton), new("sm:w-auto sm:justify-start inline-flex items-center font-medium")
                 {

diff --git a/src/Pure.Blazor.Components/Essentials/Header1.razor b/src/Pure.Blazor.Components/Essentials/Header1.razor
@@ -1,25 +1,7 @@
 @inherits PureComponent
-<div class="flex flex-col md:flex-row justify-between items-center gap-4 sm:gap-0">
-    <h1 id="@Id" class="text-2xl sm:text-3xl font-extrabold leading-6 subpixel-antialiased text-gray-800 tracking-wide @Styles">@ChildContent</h1>
-    @if (Suffix is not null)
-    {
-        @Suffix
-    }
-</div>
-@if (!string.IsNullOrWhiteSpace(Subtitle))
-{
-    <p class="mt-2 text-sm text-gray-800">@Subtitle</p>
-    <hr class="my-4 border-gray-200"/>
-}
-else
-{
-    <hr class="mt-2 mb-4 border-gray-200"/>
-}
+<h1 id="@Id" class="text-2xl sm:text-3xl font-extrabold leading-6 subpixel-antialiased text-gray-800 tracking-wide @Styles">@ChildContent</h1>
 
-@code {
 
+@code {
     [Parameter] public string Id { get; set; } = string.Empty;
-
-    [Parameter] public string? Subtitle { get; set; }
-    [Parameter] public RenderFragment? Suffix { get; set; }
 }
diff --git a/src/Pure.Blazor.Components/Essentials/PageHeader.razor b/src/Pure.Blazor.Components/Essentials/PageHeader.razor
@@ -0,0 +1,25 @@
+@inherits PureComponent
+<div class="flex flex-col md:flex-row justify-between items-center gap-4 sm:gap-0">
+    <Header1 Id="@Id">@ChildContent</Header1>
+    @if (Suffix is not null)
+    {
+        @Suffix
+    }
+</div>
+@if (!string.IsNullOrWhiteSpace(Subtitle))
+{
+    <p class="mt-2 text-sm text-gray-800">@Subtitle</p>
+    <hr class="my-4 border-gray-200"/>
+}
+else
+{
+    <hr class="mt-2 mb-4 border-gray-200"/>
+}
+
+@code {
+
+    [Parameter] public string Id { get; set; } = string.Empty;
+
+    [Parameter] public string? Subtitle { get; set; }
+    [Parameter] public RenderFragment? Suffix { get; set; }
+}
diff --git a/src/Pure.Blazor.Components/Forms/PureInput.razor b/src/Pure.Blazor.Components/Forms/PureInput.razor
@@ -14,7 +14,7 @@
     <InputText id="@Id"
                @ref="InputRef"
                @bind-Value="@TextValue"
-               class="@($"{ApplyStyle(baseCss)} {(HasError ? errorBorder : defaultBorder)}")"
+               class="@($"{ApplyStyle($"{Css.Base} {Css.Size(Size)}")} {(HasError ? errorBorder : defaultBorder)}")"
                type="@GetInputType()"
                autocomplete="@GetAutoComplete()"
                placeholder="@Placeholder"

diff --git a/src/Pure.Blazor.Components/Forms/PureInput.razor.cs b/src/Pure.Blazor.Components/Forms/PureInput.razor.cs
@@ -12,9 +12,6 @@ public partial class PureInput
     private InputText? InputRef { get; set; } = null!;
     private readonly List<IEntryValidator> validators = new();
 
-    private string baseCss =
-        "peer block px-2 py-1 border-1 focus:outline focus:outline-2 focus:outline-offset-2 outline-brand-700 bg-gray-50 text-gray-800 rounded";
-
     private string defaultBorder = "border-gray-200";
     private string errorBorder = "border-red-600";
     private string? errorMessage;
@@ -29,7 +26,7 @@ private string? TextValue
     // the suffix needs different margins depending on labels and helper text
     private string suffixCss => GetSuffixCss();
 
-    public PureSize Size { get; set; }
+    [Parameter] public PureSize Size { get; set; } = PureSize.Medium;
 
     [CascadingParameter] public PureForm? FormControl { get; set; }
 

diff --git a/src/Pure.Blazor.Components/Pure.Blazor.Components.csproj b/src/Pure.Blazor.Components/Pure.Blazor.Components.csproj
@@ -8,7 +8,7 @@
     <GeneratePackageOnBuild>True</GeneratePackageOnBuild>
     <WarningsAsErrors>Nullable</WarningsAsErrors>
     <Title>PureBlazor Components</Title>
-    <Version>0.32</Version>
+    <Version>0.32.8</Version>
     <PackageId>PureBlazor.Components</PackageId>
     <Description>Blazor UI components for .NET Blazor with an optional headless mode.</Description>
     <PackageProjectUrl>https://pureblazor.com</PackageProjectUrl>

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/AdvancedComponents.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/AdvancedComponents.razor
@@ -4,7 +4,7 @@
 @attribute [PureBlazorPage("components-advanced")]
 
 
-<Header1>Advanced Components</Header1>
+<PageHeader>Advanced Components</PageHeader>
 <div class="mb-8">
     <Header2>Syntax Highligher</Header2>
     <div class="mb-10">

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Alerts.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Alerts.razor
@@ -5,14 +5,14 @@
 
 @inject AlertService Service
 @inject SnippetService SnippetService
-<Header1 Id="alerts" Subtitle="Alerts can be triggered from code and disappear after the specified duration.">
+<PageHeader Id="alerts" Subtitle="Alerts can be triggered from code and disappear after the specified duration.">
     <ChildContent>
         Alerts
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 <PageTitle>Alerts - PureBlazor Components</PageTitle>
 
 <div class="flex flex-col gap-8 mb-8">

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/BadgeDocs.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/BadgeDocs.razor
@@ -4,14 +4,14 @@
 @attribute [PureBlazorPage("components-badges")]
 <PageTitle>Badges - PureBlazor Components</PageTitle>
 
-<Header1 Subtitle="Badges are used to highlight an item or to provide additional information. They are typically used in lists, tables, or cards.">
+<PageHeader Subtitle="Badges are used to highlight an item or to provide additional information. They are typically used in lists, tables, or cards.">
     <ChildContent>
         Badges
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true" Static="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 <div class="mb-10 flex flex-col gap-8">
     <PureBanner Accent="Accent.Default">
         The below examples take advantage of the <code>using static</code> directive to simplify the code. This is not required and you can use the full namespace if you prefer.

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/BannerDocs.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/BannerDocs.razor
@@ -4,14 +4,14 @@
 @attribute [PureBlazorPage("components-banners")]
 <PageTitle>Banners - PureBlazor Components</PageTitle>
 
-<Header1 Subtitle="Banners are used to display important information to the user. They typically contain a short message and an icon.">
+<PageHeader Subtitle="Banners are used to display important information to the user. They typically contain a short message and an icon.">
     <ChildContent>
         Banners
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Static="true" Wasm="true" Server="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 <div class="mb-10 flex flex-col gap-8">
     <div class="flex flex-col gap-8">
         <div class="flex flex-col gap-2">

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Buttons.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Buttons.razor
@@ -11,14 +11,14 @@
 </HeadContent>
 <PageTitle>Buttons - PureBlazor Components</PageTitle>
 
-<Header1 Id="overview" Subtitle="Use buttons when you need interactivity, such as saving a form. Prefer buttons over links, except when navigating to a different page.">
+<PageHeader Id="overview" Subtitle="Use buttons when you need interactivity, such as saving a form. Prefer buttons over links, except when navigating to a different page.">
     <ChildContent>
         Buttons
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 
 <div class="mb-10 flex flex-col gap-8 divide-y-1 divide-gray-300 *:pb-8 first:*:pt-0">
     <div class="flex flex-col gap-4">

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Dev.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Dev.razor
@@ -4,7 +4,7 @@
 @attribute [PureBlazorPage("components-dev")]
 @using Theme = Pure.Blazor.Components.Primitives.Theme
 @inject ILogger<Dev> Logger
-<Header1>Dev Page</Header1>
+<PageHeader>Dev Page</PageHeader>
 <Paragraph Styles="mb-8">Kitchen sink page for testing.</Paragraph>
 <div class="flex flex-col gap-8">
     <div>

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/DialogDocs.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/DialogDocs.razor
@@ -4,14 +4,14 @@
 @attribute [PureBlazorPage("components-dialog")]
 <PageTitle>Dialog - PureBlazor Components</PageTitle>
 
-<Header1 Subtitle="Dialogs are used to show a message, confirm an action, or display a form. They are modal, meaning they block interaction with the rest of the page until they are dismissed.">
+<PageHeader Subtitle="Dialogs are used to show a message, confirm an action, or display a form. They are modal, meaning they block interaction with the rest of the page until they are dismissed.">
     <ChildContent>
         Dialog
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 <div class="mb-10 flex flex-col gap-8">
     <PureBanner Accent="Warning">Dialogs are experimental and currently work best in Chromium.</PureBanner>
     <div class="flex flex-col gap-2">

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Flyout.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Flyout.razor
@@ -4,14 +4,14 @@
 @attribute [PureBlazorPage("components-flyouts")]
 <PageTitle>Flyout - PureBlazor Components</PageTitle>
 
-<Header1 Subtitle="Use a Flyout when you need more vertical real estate on a form, such as creating a new entity.">
+<PageHeader Subtitle="Use a Flyout when you need more vertical real estate on a form, such as creating a new entity.">
     <ChildContent>
         Flyout
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 <div class="mb-10 flex flex-col gap-8">
     <div class="flex flex-col gap-2">
         <Header2>Basic Flyout</Header2>

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Icons.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Icons.razor
@@ -5,14 +5,14 @@
 @* @rendermode @(new InteractiveWebAssemblyRenderMode(prerender: false)) *@
 <PageTitle>Icons - PureBlazor Components</PageTitle>
 
-<Header1 Id="overview" Subtitle="">
+<PageHeader Id="overview" Subtitle="">
     <ChildContent>
         Icons
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true" Static="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 
 <div class="mb-10 flex flex-col gap-6">
     <div class="flex flex-col gap-4">

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Inputs.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Inputs.razor
@@ -4,14 +4,14 @@
 @attribute [PureBlazorPage("components-inputs")]
 <PageTitle>TextInput - PureBlazor Components</PageTitle>
 
-<Header1 Subtitle="Common components used in forms, such as labels, inputs, and textareas.">
+<PageHeader Subtitle="Common components used in forms, such as labels, inputs, and textareas.">
     <ChildContent>
         Inputs
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 <div class="flex flex-col *:py-8 first:*:pt-0 last:*:pb-0 divide-y divide-gray-200">
     <div class="flex flex-col gap-2">
         <div class="flex flex-col gap-2">

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Popovers.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/Popovers.razor
@@ -2,14 +2,14 @@
 @rendermode InteractiveWebAssembly
 @page "/components/popovers"
 @inject SnippetService SnippetService
-<Header1 Id="alerts" Subtitle="Alerts can be triggered from code and disappear after the specified duration.">
+<PageHeader Id="alerts" Subtitle="Alerts can be triggered from code and disappear after the specified duration.">
     <ChildContent>
         Popovers
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 <PageTitle>Popovers - PureBlazor Components</PageTitle>
 
 <div class="flex flex-col gap-8 mb-8">

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/RadioButtons.razor b/website/PureBlazor.com/PureBlazor.com.Client/Pages/Components/RadioButtons.razor
@@ -4,14 +4,14 @@
 @attribute [PureBlazorPage("components-radio")]
 <PageTitle>Radio Buttons - PureBlazor Components</PageTitle>
 
-<Header1 Subtitle="Common components used in forms, such as labels, inputs, and textareas.">
+<PageHeader Subtitle="Common components used in forms, such as labels, inputs, and textareas.">
     <ChildContent>
         Radio Buttons
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 <div class="flex flex-col *:py-8 first:*:pt-0 last:*:pb-0 divide-y divide-gray-200">
     <div class="flex flex-col gap-2">
         <Header2>Basic Radio Buttons</Header2>

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Shared/Samples/CardSample.razor b/website/PureBlazor.com/PureBlazor.com.Client/Shared/Samples/CardSample.razor
@@ -1,11 +1,11 @@
-<Header1 Id="cards" Subtitle="Use cards to highlight information or as an alternative to displaying data in a table.">
+<PageHeader Id="cards" Subtitle="Use cards to highlight information or as an alternative to displaying data in a table.">
     <ChildContent>
         Cards
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true" Static="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 <div>
     <Header3 Styles="py-4">Card with footer and buttons</Header3>
     <PureCard Title="Card Title" Styles="mb-8 w-full md:w-1/2">

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Shared/Samples/DropdownSample.razor b/website/PureBlazor.com/PureBlazor.com.Client/Shared/Samples/DropdownSample.razor
@@ -1,14 +1,14 @@
 @inject ILogger<PureDropdown> Log
 @inject SnippetService SnippetService
 
-<Header1 Id="dropdowns" Subtitle="Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re toggled by clicking, not by hovering; this is an intentional design decision. Clicking outside of the dropdown will close it.">
+<PageHeader Id="dropdowns" Subtitle="Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re toggled by clicking, not by hovering; this is an intentional design decision. Clicking outside of the dropdown will close it.">
     <ChildContent>
         Dropdowns
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true"/>
     </Suffix>
-</Header1>
+</PageHeader>
 <div class="mb-10">
     <Header2>Button dropdown</Header2>
     <div class="flex items-baseline">

diff --git a/website/PureBlazor.com/PureBlazor.com.Client/Shared/Samples/TabSample.razor b/website/PureBlazor.com/PureBlazor.com.Client/Shared/Samples/TabSample.razor
@@ -1,11 +1,11 @@
-<Header1 Id="tabs" Subtitle="Use tabs to display groups of discrete data.">
+<PageHeader Id="tabs" Subtitle="Use tabs to display groups of discrete data.">
     <ChildContent>
         Tabs
     </ChildContent>
     <Suffix>
         <SupportedRenderModes Wasm="true" Server="true" />
     </Suffix>
-</Header1>
+</PageHeader>
 <div class="mb-10 flex flex-col gap-6">
     <div>
         <Header2 Styles="py-4">Outline Variant</Header2>