Style with host tokens

.funnel-note {
  color: var(--tappify-fg-sub, rgba(18, 18, 18, 0.7));
  border-top: 1px solid var(--tappify-divider, #d5d7da);
  border-radius: var(--tappify-radius-control, 8px);
  font-family: var(--font-one-ui, system-ui, sans-serif);
}

​

The variables

​

The UI kit already uses them

import { Card, Metric } from "@tappify/extension-sdk/ui";
import "@tappify/extension-sdk/ui/styles.css";

​

Two rules the checks read

• No bundled fonts and no third-party stylesheets. A publish rejects a bundle that loads a font or a script from another origin. Use --font-one-ui for interface text and a system monospace stack for code. Writing a stylesheet into the document is a warning rather than a rejection, and the warning is worth acting on: styles put on document.head leave your shadow root and land on the host and on every other extension on the page. An emitted .css asset is a rejection, because a separate file never reaches a shadow root — the build inlines the stylesheets your entry imports, so that one does not fire on its own.
• Container queries, not viewport queries. A slot’s width has nothing to do with the viewport. Your mount is the container, so size against it:

@container (min-width: 480px) {
  .funnel-grid {
    grid-template-columns: 1fr 1fr;
  }
}