Chrome stylesheet

@pagehub/sdk/chrome.css styles the SDK's own UI: the auto-hiding scrollbars, dropdown and listbox panels, the popover fade, toolbar fields and buttons, and the image crop dialog. It doesn't style a site's pages.

CSS

@import "tailwindcss";
@import "@pagehub/sdk/theme.css";
@import "@pagehub/sdk/chrome.css";

Import it from your global CSS, after tailwindcss. The rules use @apply, so they compile with your own Tailwind setup rather than shipping prebuilt.

What it covers

File	What it styles
`chrome/utilities.css`	Hover rings on fields, and the chrome's `.btn`
`chrome/base-and-scrollbars.css`	Typography and scrollbars inside `.pagehub-sdk-root`
`chrome/toolbar-forms.css`	Field shells (`.input`, `.input-wrapper`, `.input-plain`, `.input-dialog`), sliders and toolbar buttons
`chrome/react-image-crop.css`	The crop area of the image crop dialog
`chrome/dropdowns.css`	Listbox panels (`.ph-select-content`, `.ph-select-item`) and the popover fade
`chrome/modifiers.css`	The chrome's `.btn-outline`, `.btn-ghost` and `.btn-sm`

Scoping

Most rules apply inside an element with the pagehub-sdk-root class. Put it on the container of your SDK UI, or on a portaled panel, for example className="pagehub-sdk-root ph-select-content" on a listbox's options.

The button and field rules skip anything inside #viewport or #ph-site-preview, so a site's own btn and input classes keep DaisyUI's styles when a page is shown inside your app.

Source: packages/sdk/src/css/chrome.css.