CSS variables

The widget generates a CSS variable for every theme token and applies them to its root element. All variables are namespaced with the --medos- prefix so they can't clash with your site's variables.

Naming pattern

--medos-{category}-{key-in-kebab-case}

Examples:

• --medos-colors-primary
• --medos-colors-primary-hover
• --medos-radii-md
• --medos-typography-font-family

Read them from your own CSS

Because the widget's root is inside your page, you can consume the same variables in surrounding elements to keep the brand consistent:

.book-callout {
  color: var(--medos-colors-primary);
  border: 1px solid var(--medos-colors-border);
  border-radius: var(--medos-radii-md);
}

Debugging

Open browser DevTools, inspect the widget's root element (look for the medos-sdk-root class), and you'll see every CSS variable listed under Computed → Custom Properties.