Skip to main content

Menu

Choose a theme and configure high-contrast mode. Preferences are saved in your browser only.

User Preferences

Theme

Pick a palette or follow your system preference.

High Contrast

Sharper text and borders. System follows your OS setting.

Version 2.5.1

@freshjuice/zest@2.5.1 fixes a real compliance problem: the default banner made Reject All visually weaker than Accept All. Regulators (ICO, CNIL) consider this coerced consent. Both buttons now share the same style and color.

Changed

Both buttons are now zest-btn--primary

The Reject All button no longer has a separate zest-btn--secondary class. Both Accept and Reject use zest-btn--primary — identical color, size, padding, and visual weight. Equal prominence by default.

buttonStyle config controls both buttons together

  • 'fill' (default) — solid accent-colored buttons with white text
  • 'outline' — accent-colored border, transparent background

Both buttons always use the same style. No more “Accept bright, Reject muted.”

<script>
  window.ZestConfig = { buttonStyle: "outline" };
</script>
<script src="https://cdn.jsdelivr.net/npm/@freshjuice/zest@2.5.1"></script>

Removed .zest-btn--secondary selector block from customStyles sanitizer

Previously, customStyles could not style the Reject button — the sanitizer stripped any .zest-btn--secondary rule. The class no longer exists in the HTML, so the selector block is gone. [data-action="reject-all"] and [data-action="accept-all"] attribute selectors are still blocked to prevent hiding buttons.

Install

npm install @freshjuice/zest

Or via CDN:

<script src="https://cdn.jsdelivr.net/npm/@freshjuice/zest@2.5.1"></script>