Platform & Browser Support

The floor is set by exactly two CSS features the token layer uses: oklch() colors and color-mix(). Both have been Baseline across Chrome, Edge, Safari, and Firefox since May 2023, and the versions above are where each engine shipped them. Nothing else in canvas.css is newer than that: it is plain custom properties, a few @media preference blocks (reduced motion, reduced transparency, increased contrast, print), one cascade layer for its base rules, and a handful of rules (among them the :focus-visible ring and the :where() and :is() selectors of the palette and material blocks), all shipped in every engine before the versions above. There is no build step and no @property, which is what used to push the Firefox floor to 128.

On iOS and Android there is no browser and no CSS feature floor. Components read the active design tokens with useTheme and build their React Native styles from them; the native minimums above come from React Native 0.74 and react-native-svg, the package's peer dependencies.

Canvas components resolve to inline styles through react-native-web and run in much older browsers. It is the shipped stylesheet, canvas.css and the token files it imports, that sets the modern-browser baseline above. If you must support older browsers, restate the same custom properties in a colour space your target supports; the token layer is plain CSS you can copy.

Components handle reduced motion at the platform layer: they read the OS preference through AccessibilityInfo (React Native on native, react-native-web in the browser) and drop non-essential animation. The token layer's one contribution is the @media (prefers-reduced-motion) block that zeroes the --duration-* variables, so custom CSS written against the motion tokens quiets down with the same preference.