Release v3.4.0
Summary
PrimeReact 11's primereact package is unstyled primitives, so a @primeuix/themes preset 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 the lara-blue look 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.- Table column headers render through PrimeReact's title part, so a theme's column-title weight applies, and the empty-message row is padded and bordered like a data row.
--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
- The Cratis baseline theme positions the dialog backdrop and centers the dialog; both rendered in normal flow below the page content.
🤖 Generated with Claude Code