Styling Third-Party Components — data attribute로 입히는 우리 디자인

// styled-system/recipes/dialog.ts
import { sva } from 'styled-system/css'
 
export const dialog = sva({
  slots: ['overlay', 'content', 'title'],
  base: {
    overlay: {
      position: 'fixed', inset: 0,
      bg: 'blackAlpha.500',
      _open: { animation: 'fadeIn 150ms ease-out' },
      _closed: { animation: 'fadeOut 150ms ease-in' },
    },
    content: {
      position: 'fixed',
      top: '50%', left: '50%',
      transform: 'translate(-50%, -50%)',
      bg: 'surface.default',
      borderRadius: 'lg',
      shadow: 'xl',
      _open: { animation: 'slideUpIn 200ms ease-out' },
      _closed: { animation: 'slideUpOut 200ms ease-in' },
    },
    title: { fontWeight: 'semibold', fontSize: 'lg' },
  },
})

// panda.config.ts
export default defineConfig({
  conditions: {
    extend: {
      indeterminate: '&[data-indeterminate]',
      loading: '&[data-loading]',
    },
  },
})

<Dialog.Content
  className="
    fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2
    bg-white rounded-lg shadow-xl
    data-[state=open]:animate-in
    data-[state=closed]:animate-out
    data-[state=closed]:fade-out
    data-[state=open]:fade-in
  "
>

<Dialog.Content
  className="
    data-[state=open]:animate-in
    data-[state=closed]:animate-out
    data-[state=closed]:fade-out-0
    data-[state=open]:fade-in-0
    data-[state=closed]:zoom-out-95
    data-[state=open]:zoom-in-95
  "
>

// packages/ds/src/select.tsx
import * as RadixSelect from '@radix-ui/react-select'
import { css, cx } from 'styled-system/css'
import { ChevronDownIcon, CheckIcon } from '@your-co/icons'
 
const triggerStyles = css({
  display: 'inline-flex',
  alignItems: 'center',
  gap: '2',
  px: '3', py: '2',
  borderRadius: 'md',
  borderWidth: '1px',
  borderColor: 'border.default',
  bg: 'surface.default',
  fontSize: 'sm',
  _hover: { bg: 'surface.muted' },
  _focusVisible: { ringColor: 'brand.500', ringWidth: '2px' },
  _disabled: { opacity: 0.5, cursor: 'not-allowed' },
  '&[data-placeholder]': { color: 'text.muted' },
})
 
const contentStyles = css({
  bg: 'surface.default',
  borderRadius: 'md',
  shadow: 'lg',
  borderWidth: '1px',
  borderColor: 'border.default',
  overflow: 'hidden',
  _open: { animation: 'fadeIn 100ms ease-out' },
  _closed: { animation: 'fadeOut 100ms ease-in' },
})
 
const itemStyles = css({
  px: '3', py: '2',
  fontSize: 'sm',
  cursor: 'pointer',
  outline: 'none',
  _highlighted: { bg: 'brand.100', color: 'brand.900' },  // Radix가 [data-highlighted]
  _disabled: { opacity: 0.5, pointerEvents: 'none' },
})
 
export const Select = {
  Root: RadixSelect.Root,
  Value: RadixSelect.Value,
 
  Trigger: forwardRef<HTMLButtonElement, RadixSelect.SelectTriggerProps>((props, ref) => (
    <RadixSelect.Trigger ref={ref} {...props} className={cx(triggerStyles, props.className)}>
      {props.children}
      <RadixSelect.Icon><ChevronDownIcon /></RadixSelect.Icon>
    </RadixSelect.Trigger>
  )),
 
  Content: forwardRef<HTMLDivElement, RadixSelect.SelectContentProps>((props, ref) => (
    <RadixSelect.Portal>
      <RadixSelect.Content ref={ref} {...props} className={cx(contentStyles, props.className)}>
        <RadixSelect.Viewport>{props.children}</RadixSelect.Viewport>
      </RadixSelect.Content>
    </RadixSelect.Portal>
  )),
 
  Item: forwardRef<HTMLDivElement, RadixSelect.SelectItemProps>((props, ref) => (
    <RadixSelect.Item ref={ref} {...props} className={cx(itemStyles, props.className)}>
      <RadixSelect.ItemText>{props.children}</RadixSelect.ItemText>
      <RadixSelect.ItemIndicator><CheckIcon /></RadixSelect.ItemIndicator>
    </RadixSelect.Item>
  )),
}

<Select.Root value={tier} onValueChange={setTier}>
  <Select.Trigger><Select.Value placeholder="플랜 선택" /></Select.Trigger>
  <Select.Content>
    <Select.Item value="free">Free</Select.Item>
    <Select.Item value="pro">Pro</Select.Item>
  </Select.Content>
</Select.Root>