CSS variables
Every theme token becomes a CSS variable you can read from your own stylesheet.
The widget turns every theme token into a CSS variable and applies them to
its root element. All variables are namespaced with the --medos- prefix so
they can't clash with your site's own variables.
Naming pattern
--medos-{category}-{token-in-kebab-case}camelCase token names become kebab-case, so primaryHover becomes
primary-hover and fontFamily becomes font-family.
The CSS category is singular, the theme key is plural
The theme object groups tokens under plural keys (colors, radii), but the
generated variables use the singular form (color, radius). Getting
this wrong is the most common reason a var() reference silently resolves to
nothing.
| Theme object key | CSS variable prefix | Example |
|---|---|---|
colors | --medos-color- | --medos-color-primary |
typography | --medos-typography- | --medos-typography-font-family |
spacing | --medos-spacing- | --medos-spacing-md |
shadows | --medos-shadow- | --medos-shadow-md |
radii | --medos-radius- | --medos-radius-md |
transitions | --medos-transition- | --medos-transition-base |
breakpoints is the one theme category that isn't emitted as a CSS variable.
Examples
--medos-color-primary
--medos-color-primary-hover
--medos-color-text-secondary
--medos-radius-md
--medos-typography-font-familyRead them from your own CSS
The widget's root sits inside your page, so surrounding elements can consume the same variables and stay visually in sync with the widget:
.book-callout {
color: var(--medos-color-primary);
border: 1px solid var(--medos-color-border);
border-radius: var(--medos-radius-md);
}Scope matters
These variables are set on the widget's root element, not on :root. A
selector outside the widget's subtree won't inherit them — either place the
element inside the widget's container, or provide a fallback:
var(--medos-color-primary, #27903F).
Debugging
Open DevTools, inspect the widget's root element (it carries the
medos-sdk-root class), and every variable is listed under
Computed → Custom Properties. If a variable you expect is missing, check
the singular/plural rule above first.