Tesserae - Color Palette

ColorPalette

Description

A grid of named colour swatches

ColorPalette displays a set of named swatches for picking from a predefined brand or theme palette. It's distinct from the raw ColorPicker which allows any colour — use ColorPalette when the set of valid choices is known in advance.

API reference

class

ColorPalette

public sealed class ColorPalette : ComponentBase<ColorPalette, HTMLElement>

A grid of named colour swatches for letting users pick from a predefined palette.

Constructors

Constructor

ColorPalette

public ColorPalette()

Initializes a new instance of this class.

Properties

Property

ColorPalette.Value

public string Value

Gets the currently selected hex color string.

Methods

Method

ColorPalette.Define

public static ColorAndLabel Define(string label, string color)

Configures the component to define.

Method

ColorPalette.AddSwatch

public ColorPalette AddSwatch(string label, string hexColor)

Adds a swatch with a label and hex color.

Method

ColorPalette.Swatches

public ColorPalette Swatches(params ColorAndLabel[] entries)

Adds multiple swatches from an array of (label, hexColor) tuples.

Method

ColorPalette.SetValue

public ColorPalette SetValue(string hexColor)

Selects a color by hex value programmatically.

Method

ColorPalette.WithCustomColor

public ColorPalette WithCustomColor(bool value = true)

Adds a "custom…" swatch that opens the browser color picker.

Method

ColorPalette.OnChange

public ColorPalette OnChange(Action<string> onChange)

Registers a callback for when the selected color changes.

Method

ColorPalette.Render

public override HTMLElement Render()

Renders the component's root HTML element.

Samples

Brand Palette

color-palette-brand-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var selectedColor = new SettableObservable<string>("#0078d4");

            var palette = ColorPalette()
                .Swatches(
                    ColorPalette.Define("Blue",    "#0078d4"),
                    ColorPalette.Define("Purple",  "#8764b8"),
                    ColorPalette.Define("Magenta", "#e3008c"),
                    ColorPalette.Define("Red",     "#d13438"),
                    ColorPalette.Define("Orange",  "#ca5010"),
                    ColorPalette.Define("Yellow",  "#ffaa44"),
                    ColorPalette.Define("Green",   "#107c10"),
                    ColorPalette.Define("Teal",    "#038387"),
                    ColorPalette.Define("Neutral", "#737373"),
                    ColorPalette.Define("Black",   "#000000")
                )
                .SetValue("#0078d4")
                .WithCustomColor()
                .OnChange(c =>
                {
                    selectedColor.Value = c;
                    Toast().Information($"Selected: {c}");
                });

            var component = VStack().Children(
                palette,
                HStack().MT(12).AlignItems(ItemAlign.Center).Children(
                    TextBlock("Selected:").Small(),
                    DeferSync(selectedColor, c =>
                    {
                        var swatch = Span(_());
                        swatch.style.display         = "inline-block";
                        swatch.style.width           = "20px";
                        swatch.style.height          = "20px";
                        swatch.style.background      = c;
                        swatch.style.borderRadius    = "50%";
                        swatch.style.border          = "1px solid rgba(0,0,0,0.15)";
                        return HStack().AlignItems(ItemAlign.Center).Gap(8.px()).Children(
                            Raw(swatch),
                            TextBlock(c).SemiBold().Small()
                        );
                    })
                )
            );

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

Semantic Colours

color-palette-semantic-sample.js

using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var component = ColorPalette()
                .Swatches(
                    ColorPalette.Define("Success", Theme.Success.Background),
                    ColorPalette.Define("Primary", Theme.Primary.Background),
                    ColorPalette.Define("Danger",  Theme.Danger.Background),
                    ColorPalette.Define("Info",    Theme.Primary.Background)
                )
                .OnChange(c => Toast().Information($"Semantic color: {c}"));

            document.body.style.overflow = "hidden";
            MountCenteredToBody(component);
        }
    }
}

ColorPalette

Description

API reference

Constructors

ColorPalette

Properties

ColorPalette.Value

Methods

ColorPalette.Define

ColorPalette.AddSwatch

ColorPalette.Swatches

ColorPalette.SetValue

ColorPalette.WithCustomColor

ColorPalette.OnChange

ColorPalette.Render

Samples

Brand Palette

Semantic Colours

See also