Skip to content
New Webhooks added: Inventory and Order modifications. Check the changelog →
Cartly Developers

Admin Design Tokens

CSS custom properties (--adm-*) for the Cartly admin panel. Match the admin visual language in embedded apps and App Bridge extensions.

Token Reference

All --adm-* tokens are scoped to the .cartly-admin class. Without this wrapper they resolve to initial.

Background

  • --adm-bg-canvas — outermost background
  • --adm-bg-surface — cards, panels
  • --adm-bg-elevated — modals, dropdowns
  • --adm-bg-subtle — hover, stripes

Text

  • --adm-text-primary / --adm-text-secondary / --adm-text-tertiary

Semantic

  • --adm-accent / --adm-accent-hover / --adm-accent-fg
  • --adm-danger / --adm-warning / --adm-success
  • --adm-border / --adm-border-subtle

Spacing (4px unit)

  • --adm-space-1 (4px) through --adm-space-8 (32px)

Typography

  • --adm-text-xs (11px) to --adm-text-lg (16px)
  • --adm-font-normal / --adm-font-medium / --adm-font-semibold

Border radius

  • --adm-radius-sm (4px) to --adm-radius-xl (12px); --adm-radius-full (9999px)

Theme Bridge

Dark mode default; stored as cartly-admin-theme in localStorage; applied as data-theme on <html>. Pre-paint inline script eliminates flash-of-wrong-theme. Embedded apps receive tokens via postMessage type CARTLY_THEME_TOKENS.

Full Admin Design Tokens guide →