Skip to content

Add a simple but powerful theming API#7733

Open
javiereguiluz wants to merge 6 commits into
EasyCorp:5.xfrom
javiereguiluz:theme_api
Open

Add a simple but powerful theming API#7733
javiereguiluz wants to merge 6 commits into
EasyCorp:5.xfrom
javiereguiluz:theme_api

Conversation

@javiereguiluz

Copy link
Copy Markdown
Collaborator

This completes the theming work from #7719, #7730 and #7731 with a shadcn-inspired PHP API to configure the design tokens without writing CSS:

Dashboard::new()->setTheme(Theme::new()
    ->primaryColor('#15803d', dark: 'oklch(0.6 0.2 150)') // dark is optional
    ->radius('0.5rem')   // CSS length or preset: none|xs|sm|md|lg|xl
    ->spacing('md')      // CSS length or preset: xs|sm|md|lg|xl
    ->grays('zinc'));    // neutral|stone|zinc|gray|slate
  • Emits an inline <style> in <head>, placed so user CSS still wins over the theme.
  • All values are strictly validated (they end up in a <style> tag, so this is a security boundary): hex/rgb()/hsl()/oklch() colors, px/rem lengths.
  • The text color shown on primary-colored elements (--ea-primary-foreground) is computed automatically from the primary color's luminance (black or white).

It also includes some related fixes and improvements found while testing it:

  • Fixed the header search input styles (broken by the CSS cascade layers migration).
  • Fieldset spacing used fixed values via --bs-gutter-x; everything (including Bootstrap's grid gutter) is now based on spacing tokens, so it scales with
    spacing().
  • Redesigned the boxed fieldsets after the shadcn Card component: larger border radius (12px), uniform paddings driven by a single --form-fieldset-spacing variable, and tighter, consistent gaps between fieldsets.

@javiereguiluz javiereguiluz added this to the 5.x milestone Jul 19, 2026
@nlemoine

nlemoine commented Jul 23, 2026

Copy link
Copy Markdown
Contributor

Nice work and approach! Have you considered about DTCG tokens? It's the emerging standard to define design tokens. Awesome tooling with Terrazzo, WP uses it for its admin theme redesign.

I built a PHP library to consume them: https://github.com/nlemoine/dtcg-tokens

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants