penpot/plugins/libs/plugins-styles
ump45nose 1125f72d81
🐛 Remove third-party Work Sans import from plugin styles (#12087)
@penpot/plugin-styles loaded Work Sans from fonts.bunny.net via a remote
@import in core/fonts.css, which every plugin built with the package
fetched at runtime. That broke air-gapped deployments, leaked user IPs
to a third party, and forced deployments to widen the CSP style-src
and font-src directives introduced in #11374.

Drop the remote import and use the system-ui stack instead of
'Work Sans' in the same package (both in core/fonts.css for code
blocks and in core/generic.css for the base typography, which relied
on the same webfont), so plugins no longer reach any external domain
and 'self' is enough for both CSP directives.

Verified by bundling the package entry point with esbuild using the
same options as tools/scripts/build-css.mjs: the produced styles.css
is balanced, contains system-ui, and contains no external import.

Closes #12023

Signed-off-by: ump45nose <1729065730@qq.com>
2026-10-09 18:38:05 +02:00
..
2026-10-06 15:12:15 +02:00
2026-01-27 20:59:54 +01:00

Penpot plugin-styles

This plugin contains a CSS file to help build the UI for Penpot plugins.

Getting started

Install the package:

npm install @penpot/plugin-styles

Import the CSS file into your project:

@import '@penpot/plugin-styles/styles.css';

Usage

For detailed examples and to see how to use the styles and components, visit the documentation at:

Penpot Plugin Styles Documentation

Icons

We recommend using Feather icons for Penpot plugins to ensure consistency with Penpot's design.

You can find Feather icons at: Feather Icons