Styling Components
How to customise the appearance of Sesamy web components, and how the sizing model works.
The Styling Model
Sesamy components render inside shadow DOM. Your site's CSS cannot reach their internals: selectors targeting elements or class names inside a component will not apply. This is by design, as it keeps component rendering consistent regardless of the host page's stylesheet. Internal class names are not a stable API and can change in any release.
There are three supported ways to customise appearance:
- Design tokens - CSS custom properties named
--sesamy-*pass through the shadow boundary. Set them globally on:root, or on an individual element. See the global tokens below and the token tables on each component page. - Slots - Content you place in a named slot renders inside the component but remains part of your page. Your CSS styles it directly, and it inherits your page's fonts and colours.
- Documented attributes - Variants, sizes, and behaviour flags listed on each component's page.
Sizing
Components never use rem, so their size is unaffected by your page's <html> font size. Patterns like font-size: 62.5% do not shrink them.
To scale a component, or all components, set --sesamy-base-font-size in pixels (default 16px). All component font sizes, spacing, and corner radii scale proportionally from it.
:root {
/* Render all Sesamy components at 87.5% of their default size */
--sesamy-base-font-size: 14px;
}Global Tokens
These tokens apply across all styled components:
| Token | Styles | Default |
|---|---|---|
--sesamy-primary-color | Accent colour: sesamy-button variants, focus rings, links | #000000 |
--sesamy-font-family | Font family for all styled components | Helvetica |
--sesamy-base-font-size | Base size all component font sizes, spacing, and radii scale from. Set in px | 16px |
Component Tokens
- sesamy-login tokens - login button, avatar, and popup menu
- sesamy-paywall tokens - paywall colours, radii, and theme
Components without tokens
sesamy-content-container renders unstyled (no stylesheet, no design tokens) and sesamy-visibility only projects slots. In both cases the slotted content stays in the light DOM and is styled entirely by your page's own CSS.
Next Steps
- Web Components Overview - Installation and available components
- sesamy-login - Login button and user menu
- sesamy-paywall - Drop-in paywall
- Bootstrap Loader - Load the per-vendor bundle in production