Styling Hype's storefront components

Hype Cart Drawer's storefront components are styled in three layers. Pick the lowest one that does the job.

Everything a shopper sees is a variable. The components never hardcode a color, radius, weight or gutter: each rule reads a public custom property and falls back to the built-in look.

How a variable is resolved

Each component reads every public variable into a private one, with the built-in value as the fallback, and its own rules use only the private value:

:host {  --_card-radius: var(--hype-card-radius, 18px);}.card { border-radius: var(--_card-radius); }

Components never declare a public --hype-* variable on themselves. That is what lets you set one anywhere above the component while the merchant's admin values still win.

Why setting a variable on body works

The offer blocks and the cart drawer are custom elements that render inside a shadow root. Ordinary selectors from your theme stylesheet cannot reach inside one — .hype-block .card matches nothing. CSS custom properties are the exception: they inherit through the shadow boundary like any other inherited property. A variable set on body, on a section wrapper, or on the element itself is visible to every rule inside the component.

/* Everywhere on the storefront */body {  --hype-card-radius: 4px;  --hype-cta-radius: 4px;}/* One block */hype-volume-stack {  --hype-cta-radius: 999px;}

Which layer wins

The admin writes the merchant's design values as inline custom properties on the element. Inline values beat values inherited from an ancestor, so theme CSS styles everything the merchant has not customized. To override something the merchant did customize, either target the element with a more specific selector, or use ::part() — parts are applied from the page's own stylesheet and always beat the component's internal rules, inline values included.

hype-fixed-bundle-showcase::part(cta) {  text-transform: uppercase;  letter-spacing: 0.06em;}

Never set --hype-ac by hand

The accent tint steps (--hype-ac-04, -05, -06, -07, -10, -12, -30, -35, plus --hype-ac-glow and --hype-ac-soft) are computed in JavaScript from the accent color and stamped on the element. Setting --hype-ac yourself changes the base color but leaves every tint stale. Change the accent in the admin, or redirect the individual uses through --hype-tint, --hype-tint-strong, --hype-badge-bg, --hype-savings and --hype-focus.

Tints and neutrals are mixed from the text and card colors with color-mix(), so a dark card keeps legible greys without any extra work. Browsers without color-mix() fall back to fixed greys.

Which knob controls what

For the offer blocks, the customizer's controls map onto the block like this:

The accent-owned elements are one scale, not one variable. If you need to split them apart, reach for the variables or the parts.

Two contracts, one language

The drawer takes the same merchant design tokens as the blocks (they arrive as --hype-* on its host) and maps them onto its own --hype-cd-* contract. Its sections only ever read --hype-cd-*, so that is the prefix to set from theme CSS.

Font family is not an offer-block customizer control. --hype-font defaults to inherit, so a block picks up whatever font the theme gives it; point --hype-font and --hype-font-heading at a family your theme already loads if you want something else.

Related

• Cart drawer CSS variables
• Cart drawer parts and recipes
• Custom CSS and custom JavaScript