Add PrimeReact's styled mode and the PrimeReact 10 palette - #148
Merged
Conversation
PrimeReact 11's `primereact` package is unstyled primitives: a preset on the provider emits design tokens, but the primitives render without any `p-*` class, so nothing this library builds on them ever picked up the look a `@primeuix/themes` preset was meant to give. PrimeReact's own styled components are those primitives with their `styles` prop preset from `@primereact/styles`, and the provider accepts default props per component name - which is all the gluing there is. `@cratis/components/styled` does that gluing for every primitive at once. `primeReactStyles` maps each primitive's root to its PrimeReact styles (and the animating parts to their motion names), `CratisPreset` is Lara on the blue primary and gray surfaces of the lara-blue themes Cratis applications ran on PrimeReact 10, and `styledMode()` combines the two for the provider's `value`, emitting the theme into the `primereact` cascade layer between Tailwind's base and components layers so an application's own CSS overrides it exactly as it did with v10's `@layer primereact` stylesheets and its utilities still win. `@cratis/components/primereact-v10-palette` restores the `--surface-*`, `--text-color`, `--primary-color` and color-scale names v10's themes published, with the lara-blue values, so CSS written against them keeps resolving; the semantic names follow the active preset. The two surface tokens v11 has no scale for, `--cratis-surface-0` and `-100`, now read v11's form-field and hover surfaces instead of `--p-surface-0/100`, which are white in both schemes. `@primereact/styles` and `@primeuix/themes` are optional peers: only the styled entry imports them, and it is built as its own bundle so the root export stays free of them. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
…forward
The v11 primitives leave to the composer what v10 rendered on its own:
- `Dropdown` shows `option.label` and compares `option.value` when no
`optionLabel` / `optionValue` is given, as v10's Dropdown did - v11's
Select compared the option object itself against the value, so
`[{ label, value }]` options showed the raw value in the trigger. The
trigger also carries the chevron (through the Indicator part, not the
popup's Arrow) and a clear glyph again.
- `Message` renders the severity glyph v10 showed - info-circle, check,
exclamation-triangle, times-circle - with an `icon` prop to replace or
drop it.
- Column headers render through the DataTable title part, so a theme's
column-title weight reaches them, and the empty-message body carries
the tbody class so a theme's cell rules pad and border it like a row.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
PrimeReact 11 renders the backdrop and the positioner as siblings under the portal and leaves placing them to CSS. The baseline theme styled the popup but not those two, so the backdrop was a zero-height block and the dialog flowed in after the page content, below the fold. Pin both to the viewport and center the popup, as PrimeReact's own dialog style does. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
A preset alone was documented as what styles the components; it never did on the primitives this library builds on. The styling guides, migration guide, README and provider docs now describe styled mode - `styledMode()`, `CratisPreset`, `primeReactStyles`, the cascade layer - next to the baseline theme and unstyled paths, the palette that carries a v10 stylesheet's variables forward, and the Dropdown label/value convention. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This was referenced Aug 17, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
PrimeReact 11's
primereactpackage is unstyled primitives, so a@primeuix/themespreset handed to the provider emitted design tokens but styled nothing this library renders — every application that upgraded lost its look. Styled mode brings PrimeReact's own component styles to every primitive under the provider, painted by a preset that reproduces thelara-bluelook Cratis applications had on PrimeReact 10, and the palette those applications' own CSS is written against comes back as a stylesheet.Added
@cratis/components/styled—styledMode()configures the provider for PrimeReact 11's styled mode:primeReactStyles(PrimeReact's component styles for every primitive, applied through the provider'sdefaults) together with a@primeuix/themespreset, emitted into theprimereactcascade layer so an application's own CSS overrides the theme as it did on PrimeReact 10.CratisPresetis Lara on the blue primary and gray surfaces oflara-light-blue/lara-dark-blue; any preset can be passed instead.@primereact/stylesand@primeuix/themesare optional peers, needed only for this path.@cratis/components/primereact-v10-palette— the--surface-*,--text-color,--primary-color,--highlight-*,--focus-ring,--surface-0…900,--primary-*and color-scale variables PrimeReact 10's themes published, with thelara-bluevalues in both schemes, so CSS written against them keeps resolving.Messagerenders the severity glyph PrimeReact 10 showed; aniconprop replaces or removes it.Changed
Dropdownreadslabel/valueoff option objects when nooptionLabel/optionValueis given, as PrimeReact 10's Dropdown did, and renders the trigger chevron and clear glyph again.--cratis-surface-0and--cratis-surface-100resolve from PrimeReact 11's form-field and hover surface tokens rather than--p-surface-0/100, which are white in both color schemes.Fixed
🤖 Generated with Claude Code