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-accent:#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:

Part	Element
container	Root wrapper
header	Header bar
input	Amount input field
price-preview	Quote / route preview area
button-primary	Primary action button
button-secondary	Secondary action button
fee-info	Footer / fee section

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>