Skip to content

Commit

Permalink
theme updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@codymullins
codymullins committed Aug 8, 2024
1 parent 3ac71d6 commit 5941841
Show file tree
Hide file tree
Showing 6 changed files with 69 additions and 58 deletions.
17 changes: 7 additions & 10 deletions src/Pure.Blazor.Components.Primitives/ComponentStyle.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,16 @@ namespace Pure.Blazor.Components.Primitives;

public record ComponentStyle
{
public readonly IReadOnlyDictionary<Accent, string> Accents;
public readonly IReadOnlyDictionary<PureVariant, Dictionary<Accent, string>> Variants;
public readonly IReadOnlyDictionary<PureSize, string> Sizes;
public IReadOnlyDictionary<Accent, string> Accents;
public IReadOnlyDictionary<PureVariant, Dictionary<Accent, string>> Variants;
public IReadOnlyDictionary<PureSize, string> Sizes;
public string Disabled { get; set; } = "opacity-50 cursor-not-allowed";

public ComponentStyle(string baseStyle,
IReadOnlyDictionary<Accent, string>? accents,
IReadOnlyDictionary<PureVariant, Dictionary<Accent, string>>? variants,
IReadOnlyDictionary<PureSize, string>? sizes)
public ComponentStyle(string baseStyle)
{
this.Accents = accents ?? new Dictionary<Accent, string>();
this.Variants = variants ?? new Dictionary<PureVariant, Dictionary<Accent, string>>();
this.Sizes = sizes ?? new Dictionary<PureSize, string>();
this.Accents = new Dictionary<Accent, string>();
this.Variants = new Dictionary<PureVariant, Dictionary<Accent, string>>();
this.Sizes = new Dictionary<PureSize, string>();
Base = baseStyle;
}

Expand Down
3 changes: 2 additions & 1 deletion src/Pure.Blazor.Components.Primitives/PureComponent.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,8 @@ protected virtual string ApplyStyle(string baseStyle, string? newStyles)

if (PureTheme?.StylePrioritizer != null)
{
return PureTheme.StylePrioritizer.PrioritizeStyles(baseStyle, newStyles);
var styles = PureTheme.StylePrioritizer.PrioritizeStyles(baseStyle, newStyles);
return styles;
}

return $"{baseStyle} {newStyles}";
Expand Down
2 changes: 1 addition & 1 deletion src/Pure.Blazor.Components.Primitives/PureTheme.cs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ public ComponentStyle GetStyle(Type type)
public ComponentStyle GetStyleByName(string name)
{
// TODO: decide if we want this to be an exceptional event
return Styles.GetValueOrDefault(name) ?? new ComponentStyle("", null, null, null);
return Styles.GetValueOrDefault(name) ?? new ComponentStyle("");
}

/// <summary>
Expand Down
63 changes: 47 additions & 16 deletions src/Pure.Blazor.Components/Common/DefaultTheme.cs
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
using Pure.Blazor.Components.Buttons;
using Pure.Blazor.Components.Common.Css;
using Pure.Blazor.Components.Display;
using Pure.Blazor.Components.Essentials;
using Pure.Blazor.Components.Feedback;
using Pure.Blazor.Components.Forms;
using Pure.Blazor.Components.Layout;
using Pure.Blazor.Components.Primitives;

namespace Pure.Blazor.Components.Common;
Expand All @@ -14,46 +16,75 @@ public DefaultTheme()
ButtonDefaults.PressEffect = Effect.InsetShadow;
ButtonDefaults.HoverEffect = Effect.Unset;
StylePrioritizer = new StylePrioritizer();
Styles = new Dictionary<string, ComponentStyle>
Styles = new()
{
{
nameof(PureButton),
new ComponentStyle(ButtonStyles.Base, null, ButtonStyles.Variants, ButtonStyles.Sizes)
new(ButtonStyles.Base) { Variants = ButtonStyles.Variants, Sizes = ButtonStyles.Sizes }
},
{
nameof(PureTabButton), new("sm:w-auto sm:justify-start inline-flex items-center font-medium")
{
Sizes = new Dictionary<PureSize, string>()
{
{ PureSize.ExtraSmall, "sm:px-6 py-1 text-xs" },
{ PureSize.Small, "sm:px-6 py-1 text-xs" },
{ PureSize.Medium, "sm:px-6 px-3 py-2 text-sm" },
{ PureSize.Large, "sm:px-6 px-4 py-3 text-lg" },
{ PureSize.ExtraLarge, "sm:px-6 px-4 py-3 text-lg" },
}
}
},
{
nameof(PureIconButton),
new ComponentStyle(ButtonStyles.Base, null, ButtonStyles.Variants, ButtonStyles.Sizes)
new(ButtonStyles.Base) { Variants = ButtonStyles.Variants, Sizes = ButtonStyles.Sizes }
},
{
nameof(PureDropdown),
new ComponentStyle(DropdownStyles.Base, null, null, DropdownStyles.Sizes)
new(DropdownStyles.Base)
{
InnerContainer = new ComponentStyle(DropdownStyles.Container.Base, null, null, null)
Sizes = DropdownStyles.Sizes, InnerContainer = new ComponentStyle(DropdownStyles.Container.Base)
}
},
{
nameof(PureSelect),
new ComponentStyle(DropdownStyles.Base, null, null, DropdownStyles.Sizes)
new(DropdownStyles.Base)
{
InnerContainer = new ComponentStyle(DropdownStyles.Container.Base, null, null, null)
Sizes = DropdownStyles.Sizes, InnerContainer = new ComponentStyle(DropdownStyles.Container.Base)
}
},
{
nameof(PureDropdownItem),
new ComponentStyle(DropdownStyles.MenuItem.Base, DropdownStyles.MenuItem.Accents, null,
DropdownStyles.MenuItem.Sizes)
new(DropdownStyles.MenuItem.Base)
{
Accents = DropdownStyles.MenuItem.Accents, Sizes = DropdownStyles.MenuItem.Sizes
}
},
{ nameof(PureBanner), new(BannerStyles.Base) { Variants = BannerStyles.Variants } },
{ nameof(PureLink), new(LinkStyles.Base) },
{
nameof(PureLabel), new("text-gray-800 inline-block")
{
Sizes = new Dictionary<PureSize, string>
{
{ PureSize.ExtraSmall, "font-bold text-xs leading-1" },
{ PureSize.Small, "font-bold text-xs leading-3" },
{ PureSize.Medium, "font-bold text-sm leading-7" },
{ PureSize.Large, "font-bold text-lg leading-7" },
{ PureSize.ExtraLarge, "font-bold text-lg leading-7" }
}
}
},
{ nameof(PureBanner), new ComponentStyle(BannerStyles.Base, null, BannerStyles.Variants, null) },
{ nameof(PureLink), new ComponentStyle(LinkStyles.Base, null, null, null) },
{ nameof(PureBadge), new ComponentStyle("", null, BadgeStyles.Variants, null) },
{ nameof(PureAlert), new ComponentStyle(AlertStyles.Base, AlertStyles.Accents, null, null) },
{ nameof(PureBadge), new("") { Variants = BadgeStyles.Variants } },
{ nameof(PureAlert), new(AlertStyles.Base) { Accents = AlertStyles.Accents } },
{
nameof(PureColorIndicator),
new ComponentStyle("", null, null, null)
new("")
{
InnerContainer = new ComponentStyle("", IndicatorStyles.Background, null, null)
InnerContainer = new("")
{
OuterContainer = new ComponentStyle("", IndicatorStyles.Foreground, null, null)
Accents = IndicatorStyles.Background,
OuterContainer = new("") { Accents = IndicatorStyles.Foreground }
}
}
},
Expand Down
15 changes: 7 additions & 8 deletions src/Pure.Blazor.Components/Essentials/PureLabel.razor
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,17 @@
@inherits PureComponent
<label for="@For" class="@ApplyStyle("font-bold text-sm font-gray-900") @AccessibilityStyles">@ChildContent</label>
<label for="@For" class="@ApplyStyle($"{Css.Base} {Css.Size(Size)}")">@ChildContent</label>

@code {

// required styles for accessibility, not overridable
// touch target should be at least 24px
// make it the same here since this field is often combined with <PureLink>
// https://www.w3.org/WAI/WCAG21/Understanding/touch-target-size.html
private string AccessibilityStyles => "inline-block leading-7";

/// <summary>
/// The ID of the content that this label is associated with.
/// </summary>
[Parameter]
public string? For { get; set; }

/// <summary>
/// The relative size of the label.
/// </summary>
[Parameter]
public PureSize Size { get; set; } = PureSize.Medium;

}
27 changes: 5 additions & 22 deletions src/Pure.Blazor.Components/Layout/PureTabButton.razor
View file
Original file line number Diff line number Diff line change
@@ -1,14 +1,13 @@
@using System.Text
@inherits PureComponent
<button @ref="_elementReference" tabindex="@(IsActive ? 0 : -1)" @onclick="@((e) => { Console.WriteLine("clicked"); OnClick.InvokeAsync(e); })" class="@ApplyStyle(InternalCss)" @onkeyup="OnKeyUp" role="tab">
<button @ref="_elementReference" tabindex="@(IsActive ? 0 : -1)" @onclick="@((e) => { Console.WriteLine("clicked"); OnClick.InvokeAsync(e); })" class="@ApplyStyle(InternalCss)" @onkeyup="OnKeyUp" role="tab">
<!-- todo: icon -->
@Title
</button>

@code {
private ElementReference? _elementReference;
private bool prevStateActive = false;
private const string BaseCss = "sm:w-auto sm:justify-start inline-flex items-center font-medium";
[Parameter] public string Title { get; set; } = string.Empty;

[Parameter] public bool IsActive { get; set; }
Expand All @@ -18,8 +17,8 @@
[Parameter] public PureSize Size { get; set; }

[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
[Parameter]
public EventCallback<KeyboardDirection> OnKeyboardNavigation { get; set; }
[Parameter] public EventCallback<KeyboardDirection> OnKeyboardNavigation { get; set; }

public void OnKeyUp(KeyboardEventArgs e)
{
if (e.IsHorizontalArrow())
Expand Down Expand Up @@ -54,24 +53,8 @@

protected override void BuildCss()
{
var builder = new StringBuilder(BaseCss);

switch (Size)
{
case PureSize.ExtraSmall:
case PureSize.Small:
builder.Append(" sm:px-6 py-1 text-xs");
break;
case PureSize.Medium:
builder.Append(" sm:px-6 px-3 py-2 text-sm");
break;
case PureSize.ExtraLarge:
case PureSize.Large:
builder.Append(" sm:px-6 px-4 py-3 text-lg");
break;
default:
throw new ArgumentOutOfRangeException();
}
var builder = new StringBuilder(Css.Base);
builder.Append(" " + Css.Sizes[Size]);

switch (Variant)
{
Expand Down

0 comments on commit 5941841

Please sign in to comment.