Skip to content

v4.4.0 - AccentColor helper for diversified block palettes

Choose a tag to compare

View all tags
@tallcms tallcms released this 29 Apr 15:38
· 38 commits to main since this release
v4.4.0
6799493

Highlights

Themes can now show their full palette across blocks. Site editors get a per-block Accent Color dropdown on hotspot blocks (Features, Stats, Testimonials, How-To, Timeline, Pricing) — picking secondary, accent, info, success, etc. recolors icons, markers, quote marks, step circles, popular-plan highlights, and timeline node markers instead of every block always rendering primary.

Backwards compatible: every block defaults to `primary`, so existing pages render byte-identical until an editor chooses otherwise.

What's new

`AccentColor` helper class

New `TallCms\Cms\Filament\Blocks\Support\AccentColor` with 9 static methods returning literal Tailwind classes per daisyUI semantic token (primary, secondary, accent, neutral, info, success, warning, error):

  • `text()` / `text20()` — text color, full or `/20` opacity
  • `bg()` / `tint5()` / `tint10()` — backgrounds, full or `/5`/`/10` tint
  • `fill()` — paired `bg-X text-X-content`
  • `border()`, `shadow10()`, `badge()` — border, shadow, daisyUI badge modifier

Tailwind v4's PHP source scanner discovers all variants from the helper's `match()` arms via the existing theme `@source` directive — no theme stylesheet changes needed.

`@accent` Blade directive

`@accent('tint10', $accent_color ?? 'primary')` for inline class attributes, dispatching through `AccentColor::resolve()`.

Three consumption modes documented

PR #72 surfaced an important Blade compiler edge case: the `@accent` directive doesn't work inside Blade component tag attributes (`<x-...>`) because the component-tag compiler captures the class string as a literal before custom directives run. Three patterns:

  1. Plain HTML class: `@accent('tint10', $accent ?? 'primary')`
  2. PHP-built class string inside `@php`: precomputed `$accentTint5 = AccentColor::tint5($accent)` + concat
  3. Blade component tag attribute: inline `{{ \TallCms\Cms\Filament\Blocks\Support\AccentColor::text($accent ?? 'primary') }}`

Form helper

`getAccentColorOptions()` added to the `HasDaisyUIOptions` trait, returning the 8-token semantic map for `Select::make('accent_color')` form fields.

Migrated blocks

Six core blocks pick up the new `accent_color` field:

  • Features — icon container tint + icon color
  • Stats — stat icon + stat value
  • How-To — step number circles
  • Testimonials — quote marks (`/20` opacity) + avatar wrap
  • Timeline — node markers (numbered, icon, date, dot variants) + date label in content card
  • Pricing — popular plan card border, tint, and (Elevate-only) shadow

Standalone overrides at `resources/views/cms/blocks/...` and Elevate theme overrides at `themes/elevate/...` migrated in lockstep so no shadow-view erases the fix.

Intentionally unchanged

  • Elevate features icon container gradient (`bg-gradient-to-br from-primary/10 to-secondary/10`) — multi-color theme decoration; outside `accent_color`'s remit.
  • Elevate testimonials quote marks (`text-gradient-primary` custom utility) — same reason.
  • Posts featured-post badges — block already had its own per-color class maps; not duotone, left alone.

Other fixes in this release

  • AdminPanelProvider guards the registration-plugin bridge with `class_exists()` so fresh CI checkouts (and plugin-mode consumers without the local registration plugin) boot cleanly.

Testing

  • Unit + directive tests for the helper: 158 assertions covering all 9 methods × 8 tokens, the `resolve()` dispatcher, unknown-token / unknown-variant fallbacks.
  • End-to-end render tests in standalone for each migrated block: Features (canonical + Elevate emphasized-card), Stats, How-To, Testimonials, Timeline, Pricing — 35 assertions verifying the right elements recolor with non-primary accents and remain pixel-identical with default primary.

Pull requests

  • #72 — AccentColor helper + Features pilot
  • #73 — Sweep across Stats / Testimonials / How-To / Timeline / Pricing
  • #74 — `badge()` variant (forward-looking; used by tallcms/pro 1.9.0)
  • #75 — Pro plugin Tabs + Table render tests

Pro plugin

`tallcms/pro` 1.9.0 (separately released) ships `accent_color` knobs on Tabs and Table blocks and pins `compatibility.tallcms` to `>=4.4.0`.

Upgrading

No code changes required for existing sites. Editors will see the new Accent Color dropdown on the affected blocks; default value is `primary` so nothing visually changes until they pick a different token.

Assets 2
Loading