Appearance

Type@tryyoursize/sdk

Look and feel of the elements and our windows, modelled on Stripe’s Appearance API: a theme, a few variables, and web fonts. The default theme, inherit, reads your page where the element is mounted, so it looks native to your store.

interface Appearance

Properties

themeThemeOptional

"inherit" (default): your page's font, text colour and background. "tryyoursize": our light beige brand.

variablesAppearanceVariablesOptional

Properties

colorPrimarystringOptional

Buttons and the tape line on the body.

colorBackgroundstringOptional

colorTextstringOptional

fontFamilystringOptional

borderRadiusnumberOptional

Corner radius in px for cards, inputs and buttons.

fonts{ cssSrc: string }[]Optional

Stylesheets with @font-face rules (Google Fonts only), like Stripe's cssSrc.

Example

JavaScriptSwiftKotlin

tys.elements({
  appearance: {
    theme: "inherit",
    variables: { colorPrimary: "#3b2f26", fontFamily: "Inter, sans-serif", borderRadius: 8 },
    fonts: [{ cssSrc: "https://fonts.googleapis.com/css2?family=Inter:wght@400;600" }],
  },
});

let config = TryYourSize.Configuration(appearance: Appearance(
    colorPrimary: TYSColor(hex: "#3b2f26"), fontFamily: "Inter, -apple-system", borderRadius: 8))

val config = TryYourSize.Configuration(
    appearance = Appearance(colorPrimary = 0xFF3B2F26.toInt(), borderRadius = 8f),
)

See also

• Appearance and theming