no-raw-pluma-css-variables
Disallow raw Pluma CSS variable strings.
Use this rule to keep application styles on typed Pluma token exports instead of raw CSS variable strings.
Incorrect
export const row = style({
color: 'var(--pluma-palette-gray-950)',
border: `1px solid var(--pluma-palette-gray-50)`,
});Correct
import { themeVars } from '@customerio/pluma-components/css/theme-tokens';
export const row = style({
color: `light-dark(${themeVars.palette['gray-950']}, ${themeVars.palette['gray-50']})`,
border: `${themeVars.border['width-0125']} solid light-dark(${themeVars.palette['gray-50']}, ${themeVars.palette['gray-900']})`,
});What is checked
The rule reports string literals and template literal text that contain
var(--pluma-...). It does not try to infer dynamic string values.