TokenFlight
Open app

Styling

Match your site: a brand colour, light and dark, a see-through card.

The widget works without any of this. When you want it to match your site, these three cover most needs.

Use your brand colour

One value recolours the main button, the focus ring and the highlights. The text on the button is picked for contrast.

ts

config: { customColors: { "--tf-primary": "#2563eb" } }

Different colours in light and dark

Give a table per theme. The widget uses the one for the theme on screen (including auto, which follows the visitor's system) and switches by itself. A theme without a table keeps the widget's own colours.

ts

config: {
  customColors: {
    light: { "--tf-primary": "#2563eb" },
    dark: { "--tf-primary": "#93b4ff" },
  },
}

Let your page show through

Drop the card's fill and its edge, so your own background is behind the form.

ts

config: { noBackground: true, noBorder: true }

Hide the "Powered by TokenFlight" line with hidePoweredBy: true. You can change the look at any time with widget.update({ config }); the new look replaces the old one.

Reference: every key

customColors uses the names of tokenflight-embed's customColors, so a map written for the swap widget can be reused. Radii and shadows are set here too.

KeySets
--tf-bgThe page floor. The frame is transparent, so this is rarely visible.
--tf-surfaceThe card, its pills and buttons (follows into dialogs unless --tf-bg-elevated is set).
--tf-bg-elevatedDialogs. Set it solid when --tf-surface is see-through.
--tf-bg-secondaryQuiet fills inside the card.
--tf-surface-hoverPills and rows under the pointer (follows --tf-bg-secondary unless set).
--tf-input-bgInput fields and recessed wells.
--tf-textMain text. The strong edge (focus ring, outlines) is derived from it.
--tf-text-secondaryLabels and supporting text.
--tf-text-tertiaryPlaceholders and disabled text.
--tf-borderHairlines and the card's edge.
--tf-border-lightLighter hairlines.
--tf-primaryThe main button, focus ring and highlights.
--tf-text-on-primaryText on the main button. Picked for contrast if you leave it out.
--tf-successDone state. Its tinted background is derived.
--tf-errorFailed state. Its tinted background is derived.
--tf-warningWaiting state. Its tinted background is derived.
--tf-radius-xsCorner radius, smallest (0 to 48px or 3rem).
--tf-radius-smCorner radius, small.
--tf-radiusCorner radius, medium.
--tf-radius-lgCorner radius, large.
--tf-radius-xlCorner radius of the card.
--tf-button-radiusButtons and pills: a length, or full for a pill.
--tf-shadowFloating parts: none, or up to four layers like 0 4px 16px rgba(0,0,0,0.1).
--tf-shadow-lgDialogs: same form as --tf-shadow.
--tf-font-familysystem (the default is the page's own font).

Values

  • Colours: a hex value, rgb(), hsl(), oklch() (or oklab, lab, lch) or transparent.
  • At most 64 characters per value (160 for shadows) and 40 keys.
  • A map is either flat or { light, dark }; it cannot mix the two.
  • The SDK throws on a key or value outside this, so a typo shows in development. The widget drops such an entry on its own, so a value from elsewhere cannot add CSS to it.
Keys this widget does not use (--tf-accent, --tf-accent-light, --tf-accent-glow, --tf-primary-alpha, ...) are ignored without an error, so a map written for the swap widget can be passed as it is. Any other unknown key is refused.

Arbitrary CSS and a stylesheet URL are deliberately not offered: a host-supplied stylesheet could restyle or hide what the page shows.