@tonic-ui/[email protected]

2.6.1

Patch Changes

• feat(styled-system): introduce _has, _is, and _not style props to support functional pseudo-class selectors by @cheton in #972
• Updated dependencies [008d823]
  • @tonic-ui/[email protected]

🚀 Examples

• :has(<relative-selector-list>)
  https://trendmicro-frontend.github.io/tonic-ui/react/v2/styled-system/pseudo-style-props/#hasrelative-selector-list)

  _has={{
    '+ li': {
      color: 'red:50',
    },
  }}

• :is(<forgiving-selector-list>)
  https://trendmicro-frontend.github.io/tonic-ui/react/v2/styled-system/pseudo-style-props/#isforgiving-selector-list

  _is={{
    ':first-of-type, :last-of-type': {
      color: 'red:50',
    },
  }}

• :not(<complex-selector-list>)
  https://trendmicro-frontend.github.io/tonic-ui/react/v2/styled-system/pseudo-style-props/#notcomplex-selector-list

  _not={{
    ':first-of-type, :last-of-type': {
      color: 'red:50',
    },
  }}

---

⚠️ Deprecation Notice

• The properties _focusHover and _focusActive are deprecated and will be removed in the next major release. Instead, use _focus with nested selectors (PR #972):

  _focus={{
    '&:hover': {
      // Styles for `&:focus:hover`
    },
    '&:active': {
      // Styles for `&:focus:active`
    },
  }}