Explanation of "Targeting slots" has incorrect description.

[IkumaTadokoro]

Subject

concepts

Description

Targeting slots includes this description and sample code.

Let's say you want to apply a different border color to the checkbox control based on the size and the checked state. Here's how you would do it:

import { sva } from '../styled-system/css'
 
const button = sva({
  className: 'btn',
  slots: ['root', 'text'],
  base: {
    root: {
      bg: 'blue.500',
      _hover: {
        // v--- 🎯 this will target the `text` slot
        '& .btn__text': {
          color: 'white'
        }
      }
    }
  }
})

However, this sample code doesn't match the description.

Compound variants above the Targeting slots also has same description and sample code has border color.

Let's say you want to apply a different border color to the checkbox control based on the size and the checked state. Here's how you would do it:

import { sva } from '../styled-system/css'
const checkbox = sva({
  slots: ['root', 'control', 'label'],
  base: {...},
  variants: {
    size: {
      sm: {...},
      md: {...}
    },
    isChecked: {
      true: { control: {}, label: {} }
    }
  },
  compoundVariants: [
    {
      size: 'sm',
      isChecked: true,
      css: {
        control: { borderColor: 'green-500' }
      }
    }
  ],
  defaultVariants: {...}
})

---

I think that the description in Targeting slots should be deleted or change.

[segunadebayo]

Thanks for catching tihs @IkumaTadokoro.

I've updated the docs accordingly

[IkumaTadokoro]

@segunadebayo

Thanks for rewording!

I am sorry to be so detailed, but I think it is the text color that is changed in this sample source, not the border color.

---

Let's say you want to apply a different border color to the button text directly from the root slot. Here's how you would do it:

import { sva } from '../styled-system/css'
 
const button = sva({
  className: 'btn',
  slots: ['root', 'text'],
  base: {
    root: {
      bg: 'blue.500',
      _hover: {
        // v--- 🎯 this will target the `text` slot
        '& .btn__text': {
          color: 'white'
        }
      }
    }
  }
})

2024-05-16.at.06.52.10.mp4