Function tokenVar

A CSS var() reading a theme token, with the light default as its fallback.

Use it wherever a component paints a token in inline styles or SVG attributes. The fallback applies only when no theme stylesheet is in force (a bare grid with no ThemeRootStyles above it), and it comes from defaultTheme, so it cannot drift from the real default.

tokenVar('color-base-300')     // 'var(--sxl-color-base-300, #e0e0e0)'
tokenVar('color-series', 2)    // 'var(--sxl-color-series-3, …)': zero-based, rotates past the end
Copy

A CSS var() reading a theme token, with the light default as its fallback.

Use it wherever a component paints a token in inline styles or SVG attributes. The fallback applies only when no theme stylesheet is in force (a bare grid with no ThemeRootStyles above it), and it comes from defaultTheme, so it cannot drift from the real default.

tokenVar('color-base-300')     // 'var(--sxl-color-base-300, #e0e0e0)'
tokenVar('color-series', 2)    // 'var(--sxl-color-series-3, …)': zero-based, rotates past the end
Copy