Styling & Customization

TokenFlight renders inside Shadow DOM. Page styles do not leak into the widget, and widget styles do not leak back out.

CSS Custom Properties

Override widget variables via config.customColors, setCustomColors(), or host CSS variables on <tokenflight-widget>.

const widget = new TokenFlightWidget({
  container: '#widget',
  config: {
    toToken: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
    tradeType: 'EXACT_OUTPUT',
    amount: '100',
    theme: 'dark',
    customColors: {
      "--tf-primary": "#FF6B00",
      "--tf-bg": "#1A1A2E",
      "--tf-text": "#FFFFFF",
      "--tf-border": "#2A2A4A",
    },
  },
});

<tokenflight-widget
  style="--tf-primary:#2563EB; --tf-bg:#FAFAFA;"
  to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  trade-type="EXACT_OUTPUT"
  amount="100"
></tokenflight-widget>

Custom Fonts

The widget exposes two font-family variables:

• --tf-font-family for general UI text
• --tf-font-family-mono for amounts, hashes, and other fixed-width values
• --tf-font-size for the root font size inherited through the widget
• --tf-line-height for the default line height inherited through the widget

Load your fonts on the host page first, then point the widget variables at them.

Example: Host CSS

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;700&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet">

<tokenflight-widget
  class="checkout-widget"
  to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
  trade-type="EXACT_OUTPUT"
  amount="100"
  theme="dark"
></tokenflight-widget>

.checkout-widget {
  --tf-font-family: "Space Grotesk", sans-serif;
  --tf-font-family-mono: "JetBrains Mono", monospace;
  --tf-font-size: 16px;
  --tf-line-height: 1.5;
}

Example: Imperative Runtime Override

const widget = new TokenFlightWidget({
  container: '#widget',
  config: {
    toToken: { chainId: 8453, address: '0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913' },
    tradeType: 'EXACT_OUTPUT',
    amount: '100',
    theme: 'dark',
    customColors: {
      "--tf-font-family": '"Space Grotesk", sans-serif',
      "--tf-font-family-mono": '"JetBrains Mono", monospace',
      "--tf-font-size": "16px",
      "--tf-line-height": "1.5",
    },
  },
});

Example: Brand Serif + Mono Pairing

tokenflight-widget.marketing {
  --tf-font-family: "Instrument Serif", serif;
  --tf-font-family-mono: "IBM Plex Mono", monospace;
  --tf-font-size: 17px;
  --tf-line-height: 1.55;
  --tf-font-heading: 24px;
  --tf-font-amount: 30px;
}

INFO

These variables style the TokenFlight widget UI itself. Third-party fiat provider pages or external checkout windows keep their own fonts.

Font Size Scale

All font sizes are controlled by CSS variables. Override them on the host element:

tokenflight-widget {
  --tf-font-size: 16px;
  --tf-line-height: 1.5;
  --tf-font-base: 15px;
  --tf-font-lg: 17px;
  --tf-font-xl: 18px;
}

::part() Selectors

The widget exposes named parts through the part attribute. Reach for these when CSS variables can't get you there.

Layout & shell

Part	Element
container	Root wrapper
header	Header bar
breadcrumb	Step / page breadcrumb
back-button	Back navigation button
cta-wrapper	Sticky footer wrapping the primary CTA
fee-info	Footer / fee section

Inputs & token panels

Part	Element
panel-from	"You pay" panel
panel-to	"You receive" panel
swap-arrow	Vertical swap-direction button between panels
input / amount-input	Amount input field
fiat-amount-input	Amount input for the card / fiat tab
amount-display	Read-only formatted amount
token-selector	Token picker trigger
target-token	Fixed receive-target token chip
recipient-badge	Recipient address pill
search-input	Search field inside the token picker

Buttons & status

Part	Element
button-primary	Primary action button (Connect / Swap / Confirm)
button-secondary	Secondary action button
method-buttons	Crypto / Card payment method tabs
provider-selector	Fiat provider comparison row
wallet-info	Connected wallet summary
price-preview	Quote / route preview area
progress / fiat-progress	Order progress steps
success / fiat-success	Success state container
payment-list	Selectable list of pay tokens (receive flow)
pay-token-error	Per-pay-token error row
error-banner	Top-of-widget error banner
no-offer	"No route" empty state
toast	Transient toast notification

tokenflight-widget::part(button-primary) {
  font-size: 16px;
  border-radius: 8px;
  font-weight: 700;
}

tokenflight-widget::part(container) {
  border-radius: 24px;
}

Layout Attributes

no-background

<tokenflight-widget no-background theme="dark" to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" trade-type="EXACT_OUTPUT" amount="100"></tokenflight-widget>

no-border

<tokenflight-widget no-border theme="dark" to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" trade-type="EXACT_OUTPUT" amount="100"></tokenflight-widget>

Seamless Embed

<tokenflight-widget no-background no-border theme="dark" to-token="eip155:8453:0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" trade-type="EXACT_OUTPUT" amount="100"></tokenflight-widget>