Skip to content

Release v3.4.0

Choose a tag to compare

@github-actions github-actions released this 17 Aug 06:21
17f10cb

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/styledstyledMode() configures the provider for PrimeReact 11's styled mode: primeReactStyles (PrimeReact's component styles for every primitive, applied through the provider's defaults) together with a @primeuix/themes preset, emitted into the primereact cascade layer so an application's own CSS overrides the theme as it did on PrimeReact 10. CratisPreset is Lara on the blue primary and gray surfaces of lara-light-blue / lara-dark-blue; any preset can be passed instead. @primereact/styles and @primeuix/themes are 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 the lara-blue values in both schemes, so CSS written against them keeps resolving.
  • Message renders the severity glyph PrimeReact 10 showed; an icon prop replaces or removes it.

Changed

  • Dropdown reads label / value off option objects when no optionLabel / optionValue is 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-0 and --cratis-surface-100 resolve 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