@tonic-ui/[email protected]

What's Changed

• feat: add useCSSVariables option to the theme config by @cheton in #732
• feat: add sx prop to provide a superset of CSS that maps values directly from the theme by @cheton in #747

Highlight

Superset of CSS

The sx prop supports CSS syntax including child and pseudo-selectors, media queries, raw CSS values, and more. Here are a few examples of how you can implement these CSS features:

• Using pseudo-selectors:

  <Box
    sx={{
      ':hover': {
        backgroundColor: 'gray:10',
      },
    }}
  />

• Using media queries:

  <Box
    sx={{
      '@media print': {
        width: 300,
      },
    }}
  />

• Using nested selectors:

  <Box
    sx={{
      '& .child-selector': {
        backgroundColor: 'white:secondary',
      },
    }}
  />

Read more on the sx prop page.

Full Changelog: https://github.com/trendmicro-frontend/tonic-ui/compare/@tonic-ui/[email protected]...@tonic-ui/[email protected]