@freshost/ui
v0.2.11
Published
Freshost design system — wraps PatternFly v6 (owns it as a dependency), re-exports its components/icons, and ships the Freshost brand theming as one stylesheet. Consuming apps depend only on @freshost/ui.
Readme
@freshost/ui
The Freshost design system — a thin wrapper around PatternFly v6, shared across all Freshost apps.
@freshost/ui owns PatternFly (it's a regular dependency, not a peer dep),
re-exports its component and icon surface, and ships the Freshost brand theming as
a single stylesheet. Consuming apps depend only on @freshost/ui and never import
from @patternfly/* directly — so the PatternFly version is pinned in one place.
The branding recolors PatternFly's brand / link / focus / subtle tokens to the
Freshost green (oklch(0.7607 0.1646 155.5)) in both light and dark themes,
without touching PatternFly's blue palette (so info stays blue) or red (so
danger stays red).
Install
pnpm add @freshost/ui # or npm i @freshost/ui — published on the public npm registryreact and react-dom (>=18) are peer dependencies the app provides. PatternFly
comes transitively through @freshost/ui — you don't install it yourself.
Usage
Import the single stylesheet once, at your app entry. It pulls in PatternFly base
- utility styles and the Freshost tokens, in the correct order:
import '@freshost/ui/styles.css';Import components and icons from the wrapper:
import { Button, Card, Toolbar } from '@freshost/ui';
import { PlusIcon } from '@freshost/ui/icons';Dark mode: add the pf-v6-theme-dark class to the document root (<html>) when
dark is active; the tokens flip to their dark Freshost values automatically.
Entry points
| Import | Contents |
| --------------------------- | ----------------------------------------------------------- |
| @freshost/ui | PatternFly react-core, react-table, react-data-view, and the Data-View react-component-groups symbols |
| @freshost/ui/icons | The @patternfly/react-icons set |
| @freshost/ui/styles.css | The single stylesheet to import (PF base + addons + tokens) |
| @freshost/ui/tokens.css | Brand token overrides only (advanced / manual ordering) |
Storybook
A Storybook renders every PatternFly component in the Freshost branding, with a light/dark toggle:
npm run storybook # dev server on http://localhost:6006
npm run build-storybook # static build to storybook-static/The stories are lifted from the official PatternFly examples and regenerated with
npm run gen:stories (see the header of scripts/generate-stories.mjs). They are
redistributed under PatternFly's MIT license — see THIRD-PARTY-NOTICES.md.
Theming internals
The brand theming lives in src/freshost-tokens.css, which has an extensive
header explaining why it targets the specific PatternFly tier-2 token anchors it
does (and why overriding only the three obvious semantic tokens is incomplete).
Read it before changing colors.
Releasing
The package is published to npm by CI (.github/workflows/publish.yml) using
npm Trusted Publishing (OIDC) — there is no npm token stored in the repo.
To cut a release:
- Bump
versioninpackage.json. - Commit and push to
main. - Create a GitHub Release whose tag is
v<version>(e.g.v0.3.0).
The workflow verifies the tag matches package.json, then publishes that version
(with provenance). It can also be run manually via Actions → Publish to npm →
Run workflow.
One-time setup: on npmjs.com, the
@freshost/uipackage's Trusted Publisher must point at GitHub org/userFreshost, repofreshost-ui, workflowpublish.yml.
License
MIT © Freshost.
This package wraps and redistributes PatternFly (© Red Hat, Inc., MIT). Third-party attributions are listed in THIRD-PARTY-NOTICES.md.