tools system palette - BevvyTech/BrewskiDocs GitHub Wiki

Tools – Pallette (/tools/system/palette)

Purpose

  • Provides super users with a quick reference grid of pastel-ready hex values for mock-ups, documentation screenshots, or component theming experiments.
  • Offers a lightweight randomiser so designers and engineers can grab a fresh pastel swatch without leaving the admin suite.

Data & Dependencies

  • Access is restricted to teams with teamRoleType su, matching other Tools › System utilities.
  • Colours are generated client-side by PastelPalette (Admin/src/lib/pastel-palette.ts), which builds 120 swatches (5 lightness levels × 24 evenly spaced hues) and exposes a random() helper.
  • Clipboard interaction uses the browser navigator.clipboard API (no backend calls).

Key Interactions

  • Breadcrumb joins the broader Tools section and the existing System landing page.
  • Random pastel card: displays a large swatch with hue/saturation/lightness metadata and a button to pull a new colour via PastelPalette.random().
  • Pastel matrix: 20 columns of squares rendered via CSS grid (additional hues automatically flow to new rows); clicking any swatch copies the hex code to the clipboard and shows the value beneath each tile for quick scanning.

Feature Flags

  • None; page is always available to super/support accounts once deployed.
⚠️ **GitHub.com Fallback** ⚠️