Cart drawer CSS variables

Every visual decision in the Hype Cart Drawer drawer is a --hype-cd-* custom property on the drawer's host. Set them on hype-cart-drawer (or an ancestor) from theme CSS, or in the editor's Advanced panel, Custom CSS. Values set in the Design panel land inline on the host and beat inherited values; override those with ::part().

Templates

template is one of three permanent ids, carried on the host as an attribute:

id	Name	What it is
`base`	Bold	The built-in look: white paper, near-black ink, the shop's accent, the theme's font
`noir`	Noir	Dark paper, bone ink and buttons, modern sans, inverted knob, brighter tints, deep shadows
`atelier`	Atelier	Bone paper, green ink, serif faces, 2px geometry, tracked small caps, hairline header rule, a paper grain

hype-cart-drawer[template='atelier'] { --hype-cd-panel-texture-opacity: 0; }

Switching template replaces the merchant's colors and fonts. Discard undoes it.

Panel style

Panel style (General panel) is Flush — against the viewport edge, square corners — or Floating, which leaves --hype-cd-float-gap on the right, top and bottom and rounds every corner with --hype-cd-panel-radius. Phones are always flush and full screen. The host carries the value as a panel attribute: hype-cart-drawer[panel='floating'].

Typefaces

Two selects in the Design panel:

Setting	Values	Sets
Font	Theme font, Modern sans, Geometric sans, Humanist sans, Editorial serif, Classic serif, Monospace, Custom, Google Font	`--hype-font` (body)
Heading font	Same as body, or any of the above	`--hype-cd-font-heading`

Theme font and Same as body set nothing, leaving the body on the storefront's own font and the headings on the body face. The named stacks are system fonts and download nothing. Google Font takes a family name as it appears on fonts.google.com; the drawer adds one Google Fonts link per family, weights 400–700, display: swap, plus preconnects — the one setting that makes the storefront fetch a font. Custom (loaded by your theme) takes a family list exactly as your theme declares it, "Brand Sans", sans-serif, capped at 200 characters, and your theme must already load that face.

The heading face draws the drawer title and the upsell heading.

Design panel tokens to variables

The Design panel's tokens become --hype-* properties on the host, which the drawer maps onto its own contract:

Panel control	`--hype-*`	Drawer variables it feeds
Theme (color)	`--hype-ac` + tint scale	`-primary`, `-tint`, `-tint-strong`, `-savings`, `-badge-bg`, `-badge-color`, `-banner-bg`, `-selection`, `-focus`, CTA default
Card background	`--hype-card-bg`	`-bg`, the base every neutral mixes toward
Border	`--hype-card-border`	`-border`
Text	`--hype-text`	`-text`, and `-text-2`, `-muted`, `-faint`, `-surface-2`, `-surface-3`, `-border-strong` derived from it
Title	`--hype-heading`	`-heading`
Button background	`--hype-cta-bg`	`-cta-bg`
Button text	`--hype-cta-color`	`-cta-color`
Corner radius	`--hype-card-radius`, `--hype-cta-radius`	`-card-radius`, `-cta-radius`, `-control-radius` / `-thumb-radius` at 0.7×
Spacing	`--hype-card-padding`	`-pad-x`
Title size	`--hype-title-size`	`-title-size`

Accent tints mix toward the card background, not white, so a tinted upsell card stays part of a dark drawer.

Paper and ink

Variable	Base	Controls
`--hype-cd-bg`	`#ffffff`	Panel background
`--hype-cd-text`	`#161616`	Body text
`--hype-cd-heading`	`var(--hype-cd-text)`	Title, subtotal value
`--hype-cd-text-2`	text 78%	Icons, close button, secondary copy
`--hype-cd-muted`	text 68% (74% Atelier)	Variant lines, row labels, footnotes
`--hype-cd-faint`	text 56% (64% Atelier)	Struck prices, text marks, remove icon
`--hype-cd-border`	`#ebeae7`	Hairlines, dividers, thumbnail border
`--hype-cd-border-strong`	text 16%	Inputs, stepper, secondary buttons
`--hype-cd-surface-2`	text 4.5%	Count badge, discount chip, hover fills
`--hype-cd-surface-3`	text 8%	Goal track, locked goal icons
`--hype-cd-control-bg`	`var(--hype-cd-bg)`	Input, stepper, select backgrounds
`--hype-cd-knob`	`#ffffff`	Toggle knob
`--hype-cd-overlay`	`rgba(22, 22, 22, 0.5)`	Overlay behind the panel

Percentages are a color-mix() toward --hype-cd-bg; browsers without it get fixed greys.

Accent-driven

Variable	Base	Controls
`--hype-cd-primary`	`var(--hype-ac)`	Goal fill and marker, unlocked icons, shield icon
`--hype-cd-on-accent`	`#ffffff`	Text on `--hype-cd-primary`
`--hype-cd-tint`	`var(--hype-ac-05)`	Upsell card, protection shield tile
`--hype-cd-tint-strong`	`var(--hype-ac-12)`	Focus halo, next-goal halo
`--hype-cd-savings`	`var(--hype-ac)`	Savings amounts, "to go" note
`--hype-cd-selection`	`var(--hype-ac-30)`	Text selection
`--hype-cd-focus`	`var(--hype-ac)`	Focus outlines, field border, caret
`--hype-cd-badge-bg`	`var(--hype-ac-10)`	SAVE and offer badges
`--hype-cd-badge-color`	`var(--hype-ac)`	Badge text
`--hype-cd-banner-bg`	`var(--hype-ac-10)`	Announcement bar, if its colors are empty
`--hype-cd-banner-text`	`var(--hype-cd-text)`	Its text
`--hype-cd-banner-timer`	`var(--hype-cd-heading)`	Its countdown

Buttons

Variable	Base	Controls
`--hype-cd-cta-bg`	`var(--hype-cta-bg, var(--hype-ac))`	Checkout, launcher, upsell Add pill
`--hype-cd-cta-color`	`var(--hype-cta-color, #ffffff)`	Their text
`--hype-cd-cta-radius`	`var(--hype-cta-radius, 12px)`	Checkout corners
`--hype-cd-cta-height`	`54px`	Checkout height
`--hype-cd-cta-size`	`15px`	Checkout, Apply and Add size
`--hype-cd-cta-weight`	`600`	Their weight
`--hype-cd-cta-transform`	`none`	Their `text-transform`
`--hype-cd-cta-tracking`	`0`	Their letter-spacing
`--hype-cd-cta-shadow`	`0 12px 24px -14px var(--hype-ac-glow)`	Checkout and launcher shadow
`--hype-cd-cta-shadow-hover`	`0 16px 30px -14px var(--hype-ac-glow)`	On hover
`--hype-cd-secondary-bg`	`var(--hype-cd-surface-2)`	The Apply button
`--hype-cd-secondary-color`	`var(--hype-cd-text)`	Its text
`--hype-cd-secondary-border`	`var(--hype-cd-border-strong)`	Its border
`--hype-cd-pill-radius`	`999px`	Add pill, carousel pager

Geometry

Variable	Base	Controls
`--hype-cd-width`	`420px` (a setting)	Panel width, desktop
`--hype-cd-pad-x`	`var(--hype-card-padding, 24px)`	The horizontal gutter
`--hype-cd-section-pad-x`	`var(--hype-cd-pad-x)`	Gutter of one section
`--hype-cd-panel-radius`	`16px` (Atelier `4px`)	Panel corners, floating only
`--hype-cd-float-gap`	`12px`	Gap from the edges when floating
`--hype-cd-panel-shadow`	Soft outward shadow	The panel's shadow
`--hype-cd-card-radius`	`var(--hype-card-radius, 14px)`	Upsell card
`--hype-cd-control-radius`	radius × 0.7	Inputs, stepper, Apply, shield
`--hype-cd-badge-radius`	`999px`	Badges, chips, count badge
`--hype-cd-thumb-size`	`68px`	Line-item thumbnail
`--hype-cd-thumb-radius`	radius × 0.7	Thumbnail corners
`--hype-cd-thumb-fit`	`cover`	Thumbnail `object-fit`; `contain` on white
`--hype-cd-thumb-padding`	`0px`	Thumbnail inner padding
`--hype-cd-thumb-bg`	`var(--hype-cd-surface-2)`	Thumbnail frame
`--hype-cd-thumb-border`	`var(--hype-cd-border)`	Thumbnail frame border
`--hype-cd-row-gap`	`18px`	Vertical padding of a line item
`--hype-cd-divider`	`1px solid var(--hype-cd-border)`	Every hairline; `none` removes all
`--hype-cd-header-rule`	`none` (Atelier: the divider)	Rule under the header
`--hype-cd-stepper-height`	`32px`	Quantity stepper
`--hype-cd-control-height`	`44px`	Discount field, Apply, Continue
`--hype-cd-trust-icon-size`	`15px`	Trust strip icons
`--hype-cd-trust-icon`	`var(--hype-cd-text-2)`	Trust strip icon color
`--hype-cd-mark-height`	`22px`	Payment-mark height
`--hype-cd-mark-radius`	`0px`	Payment-mark corners
`--hype-cd-mark-border`	`transparent`	Payment-mark frame
`--hype-cd-mark-gap`	`6px`	Space between payment marks
`--hype-cd-marks-align`	`center`	`justify-content` of the mark row

Type

Variable	Base	Controls
`--hype-font`	`inherit` (a setting)	Body face
`--hype-cd-font-heading`	`inherit` (a setting)	Title and section headings
`--hype-cd-title-size`	`var(--hype-title-size, 16px)`	Drawer title
`--hype-cd-heading-weight`	`600`	Title and section headings
`--hype-cd-heading-transform`	`none`	Their case
`--hype-cd-heading-tracking`	`-0.01em`	Their tracking
`--hype-cd-body-size`	`14px`	Item titles, prices, subtotal label
`--hype-cd-small-size`	`12.5px`	Variants, summary rows, footnotes
`--hype-cd-label-size`	`10.5px`	Micro-caps: trust badges, marks
`--hype-cd-label-weight`	`600`	Their weight
`--hype-cd-label-transform`	`uppercase`	Their case
`--hype-cd-label-tracking`	`0.07em`	Their tracking
`--hype-cd-item-title-weight`	`500`	Product names
`--hype-cd-price-weight`	`600`	Prices and subtotal
`--hype-cd-badge-tracking`	`0.04em`	Badges and chips
`--hype-cd-numerals`	`"tnum" 1, "lnum" 1`	Every amount

Paper texture

Variable	Base	Controls
`--hype-cd-panel-texture`	`none`	A `url()` tiled over the panel
`--hype-cd-panel-texture-opacity`	`0` (Atelier `0.16`)	Strength of that layer
`--hype-cd-panel-texture-blend`	`multiply`	Its `mix-blend-mode`; `screen` on dark paper