Hype5 Theater 0.7.0 · Beta — by invitation
CSS and design tokens
Hype5 Theater's public output is scoped under one root element and styled through design tokens (CSS custom properties) and stable component classes. Themes change colours by setting tokens, adjust components with scoped selectors, or override templates for structural changes. This page lists the root, style modes, tokens, classes and the rules for custom CSS.
Root element
Every component is wrapped in an element produced by Appearance::root():
<div class="hype5 hype5t-public …" data-hype5-style="hype5" data-hype5-meta="inline">
data-hype5-style— the style mode:hype5(full Hype5 styling),hybrid(inherits more of the theme's typography and colour),minimal(functional layout and focus styles only).data-hype5-meta— the facts layout:inlineorstacked.
Stylesheets: assets/public.css and assets/foundation.css, loaded only on pages that show Hype5 content. Saved colour tokens and custom CSS are added inline after them.
Tokens
Prefix each name with --hype5-.
| Family | Tokens |
|---|---|
| Colours | background, foreground, surface, surface-muted, primary, primary-foreground, muted, muted-foreground, border, ring |
| Radius | radius-sm, radius-md, radius-lg |
| Shadow | shadow-sm, shadow-md |
| Width | content-width, wide-width |
| Spacing | space-sm, space-md, space-lg |
| Typography | text-sm, text-body, text-title |
The ten colour tokens can be set in Appearance → Theme → Public site colours as six-digit hex values; they are output as :where(.hype5:not(.hype5 .hype5)) { --hype5-primary: …; }, which has zero specificity. A theme can set any token itself:
.hype5 { --hype5-primary: #713e68; --hype5-border: #d8ced6; }
Component classes
| Area | Classes |
|---|---|
| Production | .hype5-production, .hype5-production__hero, .hype5-hero--editorial, --poster, --wide, --cinematic, .hype5-production__sections, .hype5-production__meta, .hype5-section, .hype5-section__header |
| Credits | .hype5-cast--inline, --list, --table, --grid; __group, __row, __credit, __people, __affiliation |
| Schedule | .hype5-schedule--agenda, --compact, --cards, --table, --past; .hype5-performance, __date, __details, __status, __events, __replacement |
| Tickets | .hype5-ticket-offers, .hype5-ticket-chooser, __panel, .hype5t-ticket-button |
| Gallery | .hype5-gallery--masonry, --grid, --carousel, --feature; __items, __item, __controls |
| Production sections | .hype5-important-info, .hype5-warning, .hype5-accessibility, .hype5-visitor--cards, --list, .hype5-media--featured, --grid, --list, .hype5-file, .hype5-partners--logos, --list, --compact, .hype5-articles--list, --cards, --compact, .hype5-review-quote, .hype5-links |
| Person | .hype5-person, --profile, --editorial, --minimal, __hero, __sections, __biography; .hype5-person-productions--cards, --list, --compact, --timeline, --current, --past, __credits |
| Collections | .hype5-collection, --productions, --people, --schedule, layout modifiers --cards, --editorial, --compact, --list, --grid, --alphabetical; __group, __items; .hype5-production-card, __image, __body, __meta, __teaser, __next; .hype5-person-card; .hype5-filterbar, .hype5-results, .hype5-pagination, .hype5-empty-state |
| Buttons | .hype5-button, --secondary, --ghost |
Classes prefixed hype5t- that are not listed are implementation details.
Images
Images keep their natural proportions by default; the plugin does not crop. Explicit exceptions: the Cinematic production layout covers its hero image; gallery_fit="cover" (ignored by the masonry layout) and directory_fit="cover" (collections, data-fit="cover") crop to uniform tiles.
Overriding styles
Hype5-mode rules use a specificity of about two classes with scope proximity, so plain theme rules with one class can lose even when they come later. To change a component, use a selector with one extra class or attribute:
.hype5[data-hype5-style] .hype5t-ticket-button { border-radius: 10px; }
The Cinematic hero image rule is .hype5-hero--cinematic .hype5-hero__image :is(img, svg); match or exceed it to change that crop.
Carousel and lightbox scripts load only when that output is used; carousels have no autoplay. Ticket choosers and collection filters work without JavaScript.
Custom CSS
Appearance → Theme → Custom CSS (classic: Appearance → Custom CSS) stores up to 100 KB of CSS that is printed after the plugin's styles on pages with Hype5 content. Opening Appearance needs manage_options; changing the CSS needs edit_css (see Appearance). The CSS is not HTML-sanitised: only the size, NUL bytes and the sequence </style are checked. It is trusted administrator input, not a sandbox. Scope rules to .hype5 to avoid changing the theme.
The administration styles of the plugin and the Hype5 app are not part of this API.