Available Transforms

// @ts-nocheck
import { style } from "@vanilla-extract/css";
import { vars } from "@seed-design/css";
import { f, reset } from "@/shared/styles";
import { typography, text } from '@/src/styles/tokens';

export const title = style([
  typography.h4,
  {
    textAlign: "center",
    color: vars.$scale.color.gray900,
    margin: 0,
  },
]);

export const subtitle = style([
  f.typography.title2Bold,
  {
    marginBottom: "0.375rem",
    color: vars.$scale.color.gray900,
  },
]);

export const smallText = style([
  typo.caption2Regular,
  {
    color: vars.$scale.color.gray700,
  },
]);

export const largeTitle = style([
  typo.bodyL1Regular,
  {
    color: vars.$scale.color.gray900,
  },
]);

export const button = style([
  typography['$semantic.label2Regular'],
  {
    width: '100%',
    paddingTop: rem(14),
    paddingRight: rem(16),
    paddingBottom: rem(14),
    paddingLeft: rem(16),
  },
]);

export const day = style([
  {
    display: 'flex',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: rem(30),
  },
  typography['$semantic.caption1Regular'],
]);

// Additional test cases for various mappings
export const titleBold = style([
  typography.title3Bold,
  {
    fontWeight: 'bold',
  },
]);

export const subtitleRegular = style([
  f.typography.subtitle2Regular,
  {
    color: vars.$scale.color.gray800,
  },
]);

export const bodyText = style([
  typo.bodyM1Regular,
  {
    lineHeight: 1.5,
  },
]);

export const labelText = style([
  typography['$semantic.label1Bold'],
  {
    textTransform: 'uppercase',
  },
]);

export const captionBold = style([
  typography['$semantic.caption2Bold'],
  {
    fontSize: '12px',
  },
]);

// Test deprecated tokens with alternative
export const deprecatedBody = style([
  typo.bodyL2Regular,
  {
    margin: '8px 0',
  },
]);

export const deprecatedLabel = style([
  typography['$semantic.label6Regular'],
  {
    opacity: 0.8,
  },
]);

// Test multiple token choices (should use first one)
export const headerText = style([
  typography.h4,
  {
    textAlign: 'center',
  },
]);

export const text = style([
  text['$semantic.bodyL2Bold'],
]);

// @ts-nocheck
import { style } from "@vanilla-extract/css";
import { vars } from "@seed-design/css";
import { f, reset } from "@/shared/styles";
import { typography, text } from '@/src/styles/tokens';

export const title = style([
  typography.t10Bold,
  {
    textAlign: "center",
    color: vars.$scale.color.gray900,
    margin: 0,
  },
]);

export const subtitle = style([
  f.typography.t7Bold,
  {
    marginBottom: "0.375rem",
    color: vars.$scale.color.gray900,
  },
]);

export const smallText = style([
  typo.t2Regular,
  {
    color: vars.$scale.color.gray700,
  },
]);

export const largeTitle = style([
  typo.articleBody,
  {
    color: vars.$scale.color.gray900,
  },
]);

export const button = style([
  typography.t5Regular,
  {
    width: '100%',
    paddingTop: rem(14),
    paddingRight: rem(16),
    paddingBottom: rem(14),
    paddingLeft: rem(16),
  },
]);

export const day = style([
  {
    display: 'flex',
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: rem(30),
  },
  typography.t3Regular,
]);

// Additional test cases for various mappings
export const titleBold = style([
  typography.t6Bold,
  {
    fontWeight: 'bold',
  },
]);

export const subtitleRegular = style([
  f.typography.t4Regular,
  {
    color: vars.$scale.color.gray800,
  },
]);

export const bodyText = style([
  typo.t5Regular,
  {
    lineHeight: 1.5,
  },
]);

export const labelText = style([
  typography.t6Bold,
  {
    textTransform: 'uppercase',
  },
]);

export const captionBold = style([
  typography.t2Bold,
  {
    fontSize: '12px',
  },
]);

// Test deprecated tokens with alternative
export const deprecatedBody = style([
  typo.t4Regular,
  {
    margin: '8px 0',
  },
]);

export const deprecatedLabel = style([
  typography.t1Regular,
  {
    opacity: 0.8,
  },
]);

// Test multiple token choices (should use first one)
export const headerText = style([
  typography.t10Bold,
  {
    textAlign: 'center',
  },
]);

export const text = style([
  text.t4Bold,
]);

// @ts-nocheck

export function BasicExample() {
  return (
    <div>
      <div className="caption1Bold whitespace-pre-wrap text-center text-[--tick-color]">Primary Background</div>
      <p className="bodyL2Regular text-palette-gray-800">{formState.content}</p>
      <div className="title3Bold">Hover Primary Low Background</div>
      <div className="caption2Regular">Focus Primary Low Background</div>
      <div className="[&>section_h2]:subtitle1Bold">Focus Primary Low Background</div>
      <h3 className={cn('subtitle1Bold', className)} {...props} />
      <h3 className={isDisabled ? 'subtitle1Regular' : 'subtitle1Bold'} {...props} />
      <p className="caption2Regular text-palette-gray-800">{description}</p>
      <div className="text-caption1Bold">Text with prefix</div>
      <span className="text-bodyL2Regular">Another text with prefix</span>
      <h2 className="text-title3Bold">Title with prefix</h2>
    </div>
  );
}

// @ts-nocheck

export function BasicExample() {
  return (
    <div>
      <div className="t3-bold whitespace-pre-wrap text-center text-[--tick-color]">Primary Background</div>
      <p className="t4-regular text-palette-gray-800">{formState.content}</p>
      <div className="t6-bold">Hover Primary Low Background</div>
      <div className="t2-regular">Focus Primary Low Background</div>
      <div className="[&>section_h2]:t5-bold">Focus Primary Low Background</div>
      <h3 className={cn("t5-bold", className)} {...props} />
      <h3 className={isDisabled ? "t5-regular" : "t5-bold"} {...props} />
      <p className="t2-regular text-palette-gray-800">{description}</p>
      <div className="t3-bold">Text with prefix</div>
      <span className="t4-regular">Another text with prefix</span>
      <h2 className="t6-bold">Title with prefix</h2>
    </div>
  );
}

// @ts-nocheck
import {
  subtitle1Regular,
  subtitle2Regular,
  h4,
  title1Bold,
  title2Bold,
  bodyL1Regular,
  bodyL2Regular,
  caption1Regular,
  caption2Regular,
  label5Regular,
} from '@src/constants/typography'
import { bodyM1Regular as customTypo } from '@karrot/typography'

const S_StoreRequestTitle = styled.h1`
  ${subtitle1Regular};
  margin: 0 0 0.25rem;
  color: ${vars.$scale.color.gray900};
  text-align: center;
`
const S_StoreRequestText = styled.p`
  ${subtitle2Regular};
  margin: 0;
  color: ${vars.$scale.color.gray600};
  text-align: center;
`

// 추가 테스트 케이스
// screenTitle 매핑 테스트
const S_ScreenHeader = styled.h1`
  ${h4};
  margin-bottom: 1rem;
`

// 일반 매핑 테스트
const S_Title = styled.h2`
  ${title1Bold};
  color: ${vars.$scale.color.gray900};
`

// 여러 테스트 케이스를 담은 컴포넌트
const Card = styled.div`
  // title2Bold 매핑 테스트
  h3 {
    ${title2Bold};
    margin-bottom: 8px;
  }
  
  // bodyL1Regular 매핑 테스트
  p.description {
    ${bodyL1Regular};
    color: ${vars.$scale.color.gray800};
  }
  
  // 대체 토큰으로 매핑되는 케이스
  p.content {
    ${bodyL2Regular};
    margin: 0;
  }
  
  // 캡션 스타일
  p.caption {
    ${caption1Regular};
    color: ${vars.$scale.color.gray600};
  }
  
  // 작은 텍스트
  small {
    ${caption2Regular};
    color: ${vars.$scale.color.gray500};
  }
  
  // 라벨 스타일
  label {
    ${label5Regular};
    margin-right: 4px;
  }
`

// 다른 모듈에서 가져온 타이포그래피 처리 (별칭 유지해야 함)
const S_CustomContent = styled.div`
  ${customTypo};
  color: ${vars.$scale.color.gray700};
`

// 변수로 사용하는 경우
const titleStyle = title1Bold;
const textStyle = subtitle1Regular;

// @ts-nocheck
import {
  t5Regular,
  t4Regular,
  t10Bold,
  t9Bold,
  t7Bold,
  articleBody,
  t3Regular,
  t2Regular,
  t1Regular,
} from '@src/constants/typography';
import { t5Regular as customTypo } from '@karrot/typography'

const S_StoreRequestTitle = styled.h1`
  ${t5Regular};
  margin: 0 0 0.25rem;
  color: ${vars.$scale.color.gray900};
  text-align: center;
`
const S_StoreRequestText = styled.p`
  ${t4Regular};
  margin: 0;
  color: ${vars.$scale.color.gray600};
  text-align: center;
`

// 추가 테스트 케이스
// screenTitle 매핑 테스트
const S_ScreenHeader = styled.h1`
  ${t10Bold};
  margin-bottom: 1rem;
`

// 일반 매핑 테스트
const S_Title = styled.h2`
  ${t9Bold};
  color: ${vars.$scale.color.gray900};
`

// 여러 테스트 케이스를 담은 컴포넌트
const Card = styled.div`
  // title2Bold 매핑 테스트
  h3 {
    ${t7Bold};
    margin-bottom: 8px;
  }
  
  // bodyL1Regular 매핑 테스트
  p.description {
    ${articleBody};
    color: ${vars.$scale.color.gray800};
  }
  
  // 대체 토큰으로 매핑되는 케이스
  p.content {
    ${t4Regular};
    margin: 0;
  }
  
  // 캡션 스타일
  p.caption {
    ${t3Regular};
    color: ${vars.$scale.color.gray600};
  }
  
  // 작은 텍스트
  small {
    ${t2Regular};
    color: ${vars.$scale.color.gray500};
  }
  
  // 라벨 스타일
  label {
    ${t1Regular};
    margin-right: 4px;
  }
`

// 다른 모듈에서 가져온 타이포그래피 처리 (별칭 유지해야 함)
const S_CustomContent = styled.div`
  ${customTypo};
  color: ${vars.$scale.color.gray700};
`

// 변수로 사용하는 경우
const titleStyle = t9Bold;
const textStyle = t5Regular;

// @ts-nocheck
import { vars } from '@/shared/style/vars';

export const date = style({
  ...vars.typography.caption1Regular,
  color: vars.color.gray600,
});

export const color1 = style({
  color: vars.color.yellow500,
});

export const color2 = style({
  color: vars.color.blue500,
});

export const color3 = style({
  color: vars.color.red500,
});

export const title = style({
  ...vars.typography.bodyM1Bold,
  color: vars.color.primary,
});

export const subtitle = style({
  ...vars.typography.bodyM2Regular,
  color: vars.color.secondary,
});

// 배경색 케이스
export const cardBackground = style({
  backgroundColor: vars.color.paperSheet,
  padding: '16px',
});

// 테두리 케이스
export const divider = style({
  borderTop: `1px solid ${vars.color.divider1}`,
  marginTop: '8px',
  marginBottom: '8px',
});

// 상태 색상 케이스
export const successMessage = style({
  ...vars.typography.bodyM1Bold,
  color: vars.color.success,
  backgroundColor: vars.color.successLow,
  padding: '12px',
  borderRadius: '4px',
});

export const warningMessage = style({
  ...vars.typography.bodyM1Bold,
  color: vars.color.warning,
  backgroundColor: vars.color.warningLow,
  padding: '12px',
  borderRadius: '4px',
});

export const errorMessage = style({
  ...vars.typography.bodyM1Bold,
  color: vars.color.danger,
  backgroundColor: vars.color.dangerLow,
  padding: '12px',
  borderRadius: '4px',
});

// 다양한 타이포그래피 케이스
export const heading = style({
  ...vars.typography.h4,
  color: vars.color.inkText,
});

export const body = style({
  ...vars.typography.bodyL1Regular,
  color: vars.color.inkTextLow,
});

export const label = style({
  ...vars.typography.label3Bold,
  color: vars.color.grayActive,
});

// 알파 색상 케이스
export const overlay = style({
  backgroundColor: vars.color.overlayDim,
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
});

// 복합 케이스와 상호작용 상태
export const button = style({
  ...vars.typography.label2Bold,
  backgroundColor: vars.color.primary,
  color: vars.color.onPrimary,
  borderRadius: '4px',
  padding: '8px 16px',
  border: 'none',
  cursor: 'pointer',
  ':hover': {
    backgroundColor: vars.color.primaryHover,
  },
  ':active': {
    backgroundColor: vars.color.primaryPressed,
  },
});

export const secondaryButton = style({
  ...vars.typography.label2Bold,
  backgroundColor: vars.color.secondaryLow,
  color: vars.color.secondary,
  borderRadius: '4px',
  padding: '8px 16px',
  border: 'none',
  cursor: 'pointer',
  ':hover': {
    backgroundColor: vars.color.grayHover,
  },
  ':active': {
    backgroundColor: vars.color.grayPressed,
  },
});

// 중첩 경로 케이스
export const floatingPanel = style({
  backgroundColor: vars.color.paperFloating,
  boxShadow: `0 2px 8px ${vars.color.overlayLow}`,
  padding: '20px',
  borderRadius: '8px',
});

export const dialogPanel = style({
  backgroundColor: vars.color.paperDialog,
  padding: '24px',
  boxShadow: `0 4px 16px ${vars.color.overlayDim}`,
  borderRadius: '12px',
});

// 정적 색상 케이스
export const staticColors = style({
  color: vars.color.staticBlack,
  backgroundColor: vars.color.staticWhite,
  border: `1px solid ${vars.color.staticBlackAlpha200}`,
});

// 정적 색상 케이스 (명시적으로 static 프리픽스 테스트)
export const staticExplicitColors = style({
  color: vars.color.staticBlack,
  backgroundColor: vars.color.staticWhite,
  boxShadow: `0 2px 4px ${vars.color.staticBlackAlpha500}`,
  outline: `1px solid ${vars.color.staticBlackAlpha200}`,
});

export const specialBackground = style({
  background: `linear-gradient(to bottom, ${vars.color.staticWhiteAlpha50}, ${vars.color.staticWhiteAlpha200})`,
  backdropFilter: 'blur(8px)',
});

// 복합 스타일 및 다중 속성 케이스
export const multiProperty = style({
  ...vars.typography.title2Bold,
  color: vars.color.accent,
  borderLeft: `4px solid ${vars.color.accent}`,
  borderRight: `4px solid ${vars.color.accent}`,
  boxShadow: `inset 0 0 0 1px ${vars.color.divider2}, 0 2px 4px ${vars.color.overlayLow}`,
  padding: '16px',
  backgroundColor: vars.color.paperDefault,
});

// 믹스인 스타일 케이스
export const mixinStyle = {
  primary: {
    background: vars.color.primary,
    color: vars.color.onPrimary,
  },
  secondary: {
    background: vars.color.secondary,
  },
  accent: {
    background: vars.color.accent,
    color: vars.color.onGrayOverlay50,
  },
};

// 특수 속성 및 스케일 색상 케이스
export const scaleColors = style({
  fill: vars.color.carrot500,
  stroke: vars.color.gray400,
  stopColor: vars.color.blue400,
  floodColor: vars.color.red400,
  lightingColor: vars.color.green400,
});

// 특수 타이포그래피 케이스
export const specialTypographies = {
  title: vars.typography.title1Bold,
  subtitle: vars.typography.subtitle1Regular,
  label: vars.typography.label5Regular,
  caption: vars.typography.caption2Bold,
};

// 다양한 경로를 가진 컬러 토큰
export const colorContexts = style({
  // 일반 색상
  color: vars.color.primaryLow,
  // 배경 색상
  backgroundColor: vars.color.paperBackground,
  // 테두리 색상
  borderColor: vars.color.divider3,
  // 호버 색상
  ':hover': {
    backgroundColor: vars.color.primaryLowHover,
    borderColor: vars.color.primaryLowActive,
  },
});

// 복잡한 다중 경로와 중첩된 객체
export const nestedStyleObject = {
  button: {
    default: {
      backgroundColor: vars.color.paperAccent,
      color: vars.color.inkText,
      border: `1px solid ${vars.color.carrot300}`,
    },
    hover: {
      backgroundColor: vars.color.carrot100,
      borderColor: vars.color.carrot400,
    },
    active: {
      backgroundColor: vars.color.carrot200,
      color: vars.color.inkTextLow,
    },
  },
  panel: {
    header: {
      ...vars.typography.subtitle2Bold,
      color: vars.color.blue600,
      borderBottom: `1px solid ${vars.color.blue200}`,
    },
    body: {
      ...vars.typography.bodyM2Regular,
      color: vars.color.inkTextLow,
      backgroundColor: vars.color.blue50,
    },
    footer: {
      backgroundColor: vars.color.blue100,
      borderTop: `1px solid ${vars.color.blue200}`,
    },
  },
};

// 테두리 속성 매핑 테스트
export const borderMapping = style({
  // stroke 토큰으로 매핑될 속성
  borderColor: vars.color.divider2,
  // stroke 토큰이 없어서 fg 토큰으로 대체되는 케이스
  borderTopColor: vars.color.primary,
  borderBottomColor: vars.color.accent,
  // stroke 또는 fg 토큰으로 대체
  boxShadow: `0 0 0 1px ${vars.color.primary}, 0 2px 4px ${vars.color.overlayLow}`,
  // 복합 속성
  border: `1px solid ${vars.color.secondary}`,
});

// @ts-nocheck
import { vars } from "@/shared/style/vars";

export const date = style({
  ...vars.typography.t3Regular,
  color: vars.color.palette.gray700,
});

export const color1 = style({
  color: vars.color.palette.yellow700,
});

export const color2 = style({
  color: vars.color.palette.blue600,
});

export const color3 = style({
  color: vars.color.palette.red700,
});

export const title = style({
  ...vars.typography.t5Bold,
  color: vars.color.fg.brand,
});

export const subtitle = style({
  ...vars.typography.t4Regular,
  color: vars.color.palette.gray900,
});

// 배경색 케이스
export const cardBackground = style({
  backgroundColor: vars.color.bg.layerFloating,
  padding: "16px",
});

// 테두리 케이스
export const divider = style({
  borderTop: `1px solid ${vars.color.stroke.neutralSubtle}`,
  marginTop: "8px",
  marginBottom: "8px",
});

// 상태 색상 케이스
export const successMessage = style({
  ...vars.typography.t5Bold,
  color: vars.color.fg.positive,
  backgroundColor: vars.color.bg.positiveWeak,
  padding: "12px",
  borderRadius: "4px",
});

export const warningMessage = style({
  ...vars.typography.t5Bold,
  color: vars.color.bg.warningSolid,
  backgroundColor: vars.color.bg.warningWeak,
  padding: "12px",
  borderRadius: "4px",
});

export const errorMessage = style({
  ...vars.typography.t5Bold,
  color: vars.color.fg.critical,
  backgroundColor: vars.color.bg.criticalWeak,
  padding: "12px",
  borderRadius: "4px",
});

// 다양한 타이포그래피 케이스
export const heading = style({
  ...vars.typography.t10Bold,
  color: vars.color.fg.neutral,
});

export const body = style({
  ...vars.typography.articleBody,
  color: vars.color.fg.neutralSubtle,
});

export const label = style({
  ...vars.typography.t4Bold,
  color: vars.color.fg.neutralMuted,
});

// 알파 색상 케이스
export const overlay = style({
  backgroundColor: vars.color.bg.overlay,
  position: "absolute",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
});

// 복합 케이스와 상호작용 상태
export const button = style({
  ...vars.typography.t5Bold,
  backgroundColor: vars.color.bg.brandSolid,
  color: vars.color.palette.staticWhite,
  borderRadius: "4px",
  padding: "8px 16px",
  border: "none",
  cursor: "pointer",
  ":hover": {
    backgroundColor: vars.color.bg.brandSolidPressed,
  },
  ":active": {
    backgroundColor: vars.color.bg.brandSolidPressed,
  },
});

export const secondaryButton = style({
  ...vars.typography.t5Bold,
  backgroundColor: vars.color.bg.neutralWeak,
  color: vars.color.palette.gray900,
  borderRadius: "4px",
  padding: "8px 16px",
  border: "none",
  cursor: "pointer",
  ":hover": {
    backgroundColor: vars.color.bg.neutralWeakPressed,
  },
  ":active": {
    backgroundColor: vars.color.bg.neutralWeakPressed,
  },
});

// 중첩 경로 케이스
export const floatingPanel = style({
  backgroundColor: vars.color.bg.layerFloating,
  boxShadow: `0 2px 8px ${vars.color.bg.overlayMuted}`,
  padding: "20px",
  borderRadius: "8px",
});

export const dialogPanel = style({
  backgroundColor: vars.color.bg.layerFloating,
  padding: "24px",
  boxShadow: `0 4px 16px ${vars.color.bg.overlay}`,
  borderRadius: "12px",
});

// 정적 색상 케이스
export const staticColors = style({
  color: vars.color.palette.staticBlack,
  backgroundColor: vars.color.palette.staticWhite,
  border: `1px solid ${vars.color.palette.staticBlackAlpha200}`,
});

// 정적 색상 케이스 (명시적으로 static 프리픽스 테스트)
export const staticExplicitColors = style({
  color: vars.color.palette.staticBlack,
  backgroundColor: vars.color.palette.staticWhite,
  boxShadow: `0 2px 4px ${vars.color.palette.staticBlackAlpha500}`,
  outline: `1px solid ${vars.color.palette.staticBlackAlpha200}`,
});

export const specialBackground = style({
  background: `linear-gradient(to bottom, ${vars.color.palette.staticWhiteAlpha50}, ${vars.color.palette.staticWhiteAlpha200})`,
  backdropFilter: "blur(8px)",
});

// 복합 스타일 및 다중 속성 케이스
export const multiProperty = style({
  ...vars.typography.t7Bold,
  color: vars.color.fg.informative,
  borderLeft: `4px solid ${vars.color.fg.informative}`,
  borderRight: `4px solid ${vars.color.fg.informative}`,
  boxShadow: `inset 0 0 0 1px ${vars.color.stroke.neutral}, 0 2px 4px ${vars.color.bg.overlayMuted}`,
  padding: "16px",
  backgroundColor: vars.color.bg.layerDefault,
});

// 믹스인 스타일 케이스
export const mixinStyle = {
  primary: {
    background: vars.color.bg.brandSolid,
    color: vars.color.palette.staticWhite,
  },
  secondary: {
    background: vars.color.palette.gray900,
  },
  accent: {
    background: vars.color.bg.informativeSolid,
    color: vars.color.stroke.onImage,
  },
};

// 특수 속성 및 스케일 색상 케이스
export const scaleColors = style({
  fill: vars.color.palette.carrot600,
  stroke: vars.color.palette.gray500,
  stopColor: vars.color.palette.blue400,
  floodColor: vars.color.palette.red600,
  lightingColor: vars.color.palette.green500,
});

// 특수 타이포그래피 케이스
export const specialTypographies = {
  title: vars.typography.t9Bold,
  subtitle: vars.typography.t5Regular,
  label: vars.typography.t1Regular,
  caption: vars.typography.t2Bold,
};

// 다양한 경로를 가진 컬러 토큰
export const colorContexts = style({
  // 일반 색상
  color: vars.color.palette.carrot100,
  // 배경 색상
  backgroundColor: vars.color.bg.layerBasement,
  // 테두리 색상
  borderColor: vars.color.palette.gray400,
  // 호버 색상
  ":hover": {
    backgroundColor: vars.color.palette.carrot200,
    borderColor: vars.color.palette.carrot100,
  },
});

// 복잡한 다중 경로와 중첩된 객체
export const nestedStyleObject = {
  button: {
    default: {
      backgroundColor: vars.color.palette.carrot100,
      color: vars.color.fg.neutral,
      border: `1px solid ${vars.color.palette.carrot400}`,
    },
    hover: {
      backgroundColor: vars.color.palette.carrot200,
      borderColor: vars.color.palette.carrot500,
    },
    active: {
      backgroundColor: vars.color.palette.carrot300,
      color: vars.color.fg.neutralSubtle,
    },
  },
  panel: {
    header: {
      ...vars.typography.t4Bold,
      color: vars.color.palette.blue600,
      borderBottom: `1px solid ${vars.color.palette.blue300}`,
    },
    body: {
      ...vars.typography.t4Regular,
      color: vars.color.fg.neutralSubtle,
      backgroundColor: vars.color.palette.blue100,
    },
    footer: {
      backgroundColor: vars.color.palette.blue200,
      borderTop: `1px solid ${vars.color.palette.blue300}`,
    },
  },
};

// 테두리 속성 매핑 테스트
export const borderMapping = style({
  // stroke 토큰으로 매핑될 속성
  borderColor: vars.color.stroke.neutral,
  // stroke 토큰이 없어서 fg 토큰으로 대체되는 케이스
  borderTopColor: vars.color.fg.brand,
  borderBottomColor: vars.color.fg.informative,
  // stroke 또는 fg 토큰으로 대체
  boxShadow: `0 0 0 1px ${vars.color.bg.brandSolid}, 0 2px 4px ${vars.color.bg.overlayMuted}`,
  // 복합 속성
  border: `1px solid ${vars.color.palette.gray900}`,
});

// @ts-nocheck

const ContentText = styled('p', {
  ...userSelectText,
  overflow: 'hidden',
  whiteSpace: 'pre-wrap',
  wordBreak: 'break-word',
  color: '$gray900',
  variants: {
    size: {
      medium: {
        $text: 'bodyM1Regular',
      },
      large: {
        $text: 'bodyL1Regular',
      },
      xlarge: {
        $text: "h4",
      },
    },
  },
});

const ContentText2 = styled('p', {
  ...userSelectText,
  overflow: 'hidden',
  whiteSpace: 'pre-wrap',
  wordBreak: 'break-word',
  color: '$gray900',
  variants: {
    size: {
      medium: {
        $typography: 'bodyM1Regular',
      },
      large: {
        $typography: 'bodyL1Regular',
      },
      xlarge: {
        $typography: "h4",
      },
    },
  },
});

// @ts-nocheck

const ContentText = styled('p', {
  ...userSelectText,
  overflow: 'hidden',
  whiteSpace: 'pre-wrap',
  wordBreak: 'break-word',
  color: '$gray900',
  variants: {
    size: {
      medium: {
        $text: "t5Regular",
      },
      large: {
        $text: "articleBody",
      },
      xlarge: {
        $text: "t10Bold",
      },
    },
  },
});

const ContentText2 = styled('p', {
  ...userSelectText,
  overflow: 'hidden',
  whiteSpace: 'pre-wrap',
  wordBreak: 'break-word',
  color: '$gray900',
  variants: {
    size: {
      medium: {
        $typography: "t5Regular",
      },
      large: {
        $typography: "articleBody",
      },
      xlarge: {
        $typography: "t10Bold",
      },
    },
  },
});

// @ts-nocheck

import { theme } from "@src/stitches/stitches.config";

const semanticColors = {
  primary: theme.colors["primary-semantic"].computedValue,
  onPrimary: theme.colors["onPrimary-semantic"].computedValue,
  primaryLow: theme.colors["primaryLow-semantic"].computedValue,
  success: theme.colors["success-semantic"].computedValue,
  warning: theme.colors["warning-semantic"].computedValue,
  danger: theme.colors["danger-semantic"].computedValue,
  paperDefault: theme.colors["paperDefault-semantic"].computedValue,
  paperContents: theme.colors["paperContents-semantic"].computedValue,
  paperDialog: theme.colors["paperDialog-semantic"].computedValue,
  inkText: theme.colors["inkText-semantic"].computedValue,
  inkTextLow: theme.colors["inkTextLow-semantic"].computedValue,
  divider1: theme.colors["divider1-semantic"].computedValue,
  divider2: theme.colors["divider2-semantic"].computedValue,
  overlayDim: theme.colors["overlayDim-semantic"].computedValue,
  accent: theme.colors["accent-semantic"].computedValue,
};

const scaleColors = {
  gray00: theme.colors.gray00.computedValue,
  gray100: theme.colors.gray100.computedValue,
  gray200: theme.colors.gray200.computedValue,
  gray300: theme.colors.gray300.computedValue,
  gray400: theme.colors.gray400.computedValue,
  gray500: theme.colors.gray500.computedValue,
  gray600: theme.colors.gray600.computedValue,
  gray700: theme.colors.gray700.computedValue,
  gray800: theme.colors.gray800.computedValue,
  gray900: theme.colors.gray900.computedValue,
  carrot100: theme.colors.carrot100.computedValue,
  carrot500: theme.colors.carrot500.computedValue,
  carrot900: theme.colors.carrot900.computedValue,
  carrotAlpha50: theme.colors.carrotAlpha50.computedValue,
  carrotAlpha100: theme.colors.carrotAlpha100.computedValue,
  carrotAlpha200: theme.colors.carrotAlpha200.computedValue,
  blue300: theme.colors.blue300.computedValue,
  blue600: theme.colors.blue600.computedValue,
  red500: theme.colors.red500.computedValue,
};

const staticColors = {
  white: theme.colors["white-static"].computedValue,
  black: theme.colors["black-static"].computedValue,
  blackAlpha200: theme.colors["blackAlpha200-static"].computedValue,
  whiteAlpha200: theme.colors["whiteAlpha200-static"].computedValue,
  gray900: theme.colors["gray900-static"].computedValue,
  carrot50: theme.colors["carrot50-static"].computedValue,
  carrot800: theme.colors["carrot800-static"].computedValue,
  blue50: theme.colors["blue50-static"].computedValue,
  blue800: theme.colors["blue800-static"].computedValue,
  red50: theme.colors["red50-static"].computedValue,
  red800: theme.colors["red800-static"].computedValue,
};

const Component = () => {
  return (
    <div>
      <Button
        backgroundColor={theme.colors["primary-semantic"].computedValue}
        color={theme.colors["onPrimary-semantic"].computedValue}
      >
        버튼
      </Button>
      <InfoBox borderColor={theme.colors.gray300.computedValue}>
        <Text color={theme.colors.gray900.computedValue}>안내사항</Text>
        <WarningIcon fill={theme.colors["warning-semantic"].computedValue} />
      </InfoBox>
      <Badge backgroundColor={theme.colors["danger-semantic"].computedValue}>
        <BadgeText color={theme.colors["white-static"].computedValue}>중요</BadgeText>
      </Badge>
    </div>
  );
};

const Dialog = ({ isOpen, onClose }) => {
  const styles = {
    overlay: {
      backgroundColor: theme.colors["overlayDim-semantic"].computedValue,
    },
    container: {
      backgroundColor: theme.colors["paperDialog-semantic"].computedValue,
      borderColor: theme.colors.gray300.computedValue,
    },
    header: {
      borderBottom: `1px solid ${theme.colors["divider1-semantic"].computedValue}`,
    },
    title: {
      color: theme.colors.gray900.computedValue,
    },
    content: {
      color: theme.colors.gray700.computedValue,
      backgroundColor: theme.colors["paperContents-semantic"].computedValue,
    },
    footer: {
      borderTop: `1px solid ${theme.colors["divider2-semantic"].computedValue}`,
    },
    closeButton: {
      color: theme.colors.gray500.computedValue,
    },
    submitButton: {
      backgroundColor: theme.colors.blue600.computedValue,
      color: theme.colors["white-static"].computedValue,
    },
  };

  return isOpen ? (
    <div style={styles.overlay}>
      <div style={styles.container}>
        <div style={styles.header}>
          <h2 style={styles.title}>다이얼로그 제목</h2>
          <button style={styles.closeButton} onClick={onClose}>
            닫기
          </button>
        </div>
        <div style={styles.content}>다이얼로그 내용</div>
        <div style={styles.footer}>
          <button style={styles.submitButton}>확인</button>
        </div>
      </div>
    </div>
  ) : null;
};

export { semanticColors, scaleColors, staticColors, Component, Dialog };

// @ts-nocheck

import { theme } from "@src/stitches/stitches.config";

const semanticColors = {
  primary: theme.colors["bg-brand-solid"].computedValue,
  onPrimary: theme.colors["palette-static-white"].computedValue,
  primaryLow: theme.colors["palette-carrot-100"].computedValue,
  success: theme.colors["bg-positive-solid"].computedValue,
  warning: theme.colors["bg-warning-solid"].computedValue,
  danger: theme.colors["bg-critical-solid"].computedValue,
  paperDefault: theme.colors["bg-layer-default"].computedValue,
  paperContents: theme.colors["bg-layer-fill"].computedValue,
  paperDialog: theme.colors["bg-layer-floating"].computedValue,
  inkText: theme.colors["fg-neutral"].computedValue,
  inkTextLow: theme.colors["fg-neutral-subtle"].computedValue,
  divider1: theme.colors["stroke-neutral-subtle"].computedValue,
  divider2: theme.colors["stroke-neutral-muted"].computedValue,
  overlayDim: theme.colors["bg-overlay"].computedValue,
  accent: theme.colors["bg-informative-solid"].computedValue,
};

const scaleColors = {
  gray00: theme.colors["palette-gray-00"].computedValue,
  gray100: theme.colors["palette-gray-200"].computedValue,
  gray200: theme.colors["palette-gray-300"].computedValue,
  gray300: theme.colors["palette-gray-400"].computedValue,
  gray400: theme.colors["palette-gray-500"].computedValue,
  gray500: theme.colors["palette-gray-600"].computedValue,
  gray600: theme.colors["palette-gray-700"].computedValue,
  gray700: theme.colors["palette-gray-800"].computedValue,
  gray800: theme.colors["palette-gray-900"].computedValue,
  gray900: theme.colors["palette-gray-1000"].computedValue,
  carrot100: theme.colors["palette-carrot-200"].computedValue,
  carrot500: theme.colors["palette-carrot-600"].computedValue,
  carrot900: theme.colors["palette-carrot-800"].computedValue,
  carrotAlpha50: theme.colors["palette-carrot-100"].computedValue,
  carrotAlpha100: theme.colors["palette-carrot-200"].computedValue,
  carrotAlpha200: theme.colors["palette-carrot-200"].computedValue,
  blue300: theme.colors["palette-blue-400"].computedValue,
  blue600: theme.colors["palette-blue-600"].computedValue,
  red500: theme.colors["palette-red-700"].computedValue,
};

const staticColors = {
  white: theme.colors["palette-static-white"].computedValue,
  black: theme.colors["palette-static-black"].computedValue,
  blackAlpha200: theme.colors["palette-static-black-alpha-500"].computedValue,
  whiteAlpha200: theme.colors["palette-static-white-alpha-300"].computedValue,
  gray900: theme.colors["palette-static-black"].computedValue,
  carrot50: theme.colors["palette-carrot-100"].computedValue,
  carrot800: theme.colors["palette-carrot-700"].computedValue,
  blue50: theme.colors["palette-blue-100"].computedValue,
  blue800: theme.colors["palette-blue-700"].computedValue,
  red50: theme.colors["palette-red-100"].computedValue,
  red800: theme.colors["palette-red-700"].computedValue,
};

const Component = () => {
  return (
    <div>
      <Button
        backgroundColor={theme.colors["bg-brand-solid"].computedValue}
        color={theme.colors["palette-static-white"].computedValue}
      >
        버튼
      </Button>
      <InfoBox borderColor={theme.colors["palette-gray-400"].computedValue}>
        <Text color={theme.colors["palette-gray-1000"].computedValue}>안내사항</Text>
        <WarningIcon fill={theme.colors["bg-warning-solid"].computedValue} />
      </InfoBox>
      <Badge backgroundColor={theme.colors["bg-critical-solid"].computedValue}>
        <BadgeText color={theme.colors["palette-static-white"].computedValue}>중요</BadgeText>
      </Badge>
    </div>
  );
};

const Dialog = ({ isOpen, onClose }) => {
  const styles = {
    overlay: {
      backgroundColor: theme.colors["bg-overlay"].computedValue,
    },
    container: {
      backgroundColor: theme.colors["bg-layer-floating"].computedValue,
      borderColor: theme.colors["palette-gray-400"].computedValue,
    },
    header: {
      borderBottom: `1px solid ${theme.colors["stroke-neutral-subtle"].computedValue}`,
    },
    title: {
      color: theme.colors["palette-gray-1000"].computedValue,
    },
    content: {
      color: theme.colors["palette-gray-800"].computedValue,
      backgroundColor: theme.colors["bg-layer-fill"].computedValue,
    },
    footer: {
      borderTop: `1px solid ${theme.colors["stroke-neutral-muted"].computedValue}`,
    },
    closeButton: {
      color: theme.colors["palette-gray-600"].computedValue,
    },
    submitButton: {
      backgroundColor: theme.colors["palette-blue-600"].computedValue,
      color: theme.colors["palette-static-white"].computedValue,
    },
  };

  return isOpen ? (
    <div style={styles.overlay}>
      <div style={styles.container}>
        <div style={styles.header}>
          <h2 style={styles.title}>다이얼로그 제목</h2>
          <button style={styles.closeButton} onClick={onClose}>
            닫기
          </button>
        </div>
        <div style={styles.content}>다이얼로그 내용</div>
        <div style={styles.footer}>
          <button style={styles.submitButton}>확인</button>
        </div>
      </div>
    </div>
  ) : null;
};

export { semanticColors, scaleColors, staticColors, Component, Dialog };

:root[data-seed] {
  --seed-alert-dialog-backdrop-background: var(--seed-semantic-color-overlay-dim);
  --seed-alert-dialog-content-background: var(--seed-semantic-color-paper-dialog);
  --seed-alert-dialog-title-color: var(--seed-scale-color-gray-900);
  --seed-alert-dialog-description-color: var(--seed-scale-color-gray-900);

  --seed-box-button-focus-border: 2px solid var(--seed-scale-color-blue-600);

  box-shadow: 0 0 0 2px var(--seed-scale-color-blue-600);
  background: linear-gradient(to bottom, var(--seed-scale-color-blue-600), var(--seed-scale-color-blue-700));
}

:root[data-seed] {
  --seed-alert-dialog-backdrop-background: var(--seed-color-bg-overlay);
  --seed-alert-dialog-content-background: var(--seed-color-bg-layer-floating);
  --seed-alert-dialog-title-color: var(--seed-color-palette-gray-1000);
  --seed-alert-dialog-description-color: var(--seed-color-palette-gray-1000);

  --seed-box-button-focus-border: 2px solid var(--seed-color-palette-blue-600);

  box-shadow: 0 0 0 2px var(--seed-color-palette-blue-600);
  background: linear-gradient(to bottom, var(--seed-color-palette-blue-600), var(--seed-color-palette-blue-800));
}

// @ts-nocheck

import {
  IconSellRegular,
  IconListFill,
  IconAddFill as AddIconAlias,
} from "@seed-design/react-icon";
import IconSellFill from "@seed-design/react-icon/IconSellFill";
import IconAddThin from '@karrotmarket/karrot-ui-icon/lib/react/IconAddThin';
import IconCloseThin from '@karrotmarket/karrot-ui-icon/lib/react/IconCloseThin';
import IconCarRegular from '@karrotmarket/karrot-ui-icon/lib/react/IconCarRegular';

function App() {
  console.log(IconSellRegular);

  return (
    <>
      <IconListFill />
      <IconCloseThin />
      <IconCarRegular />
      <AddIconAlias />
    </>
  );
}

// @ts-nocheck

import {
  IconPlusSquareLine,
  IconDothorizline3VerticalFill,
  IconPlusFill as AddIconAlias,
} from "@karrotmarket/react-monochrome-icon";
import IconPlusSquareFill from "@karrotmarket/react-monochrome-icon/IconPlusSquareFill";
import IconPlusLine from "@karrotmarket/react-monochrome-icon/IconPlusLine";
import IconXmarkLine from "@karrotmarket/react-monochrome-icon/IconXmarkLine";
import IconCarFrontsideLine from "@karrotmarket/react-monochrome-icon/IconCarFrontsideLine";

function App() {
  console.log(IconPlusSquareLine);

  return (
    <>
      <IconDothorizline3VerticalFill />
      <IconXmarkLine />
      <IconCarFrontsideLine />
      <AddIconAlias />
    </>
  );
}

import { vars as legacyVars } from "@seed-design/design-token";

import { vars } from "@seed-design/css/vars";
import { vars as typoVars } from "@seed-design/css/vars/component/typography";

const color = vars.$color.palette.gray600;
const typography = typoVars.textStyleT5Bold.enabled.root;
const legacyColor = legacyVars.$static.color.staticWhiteAlpha50;

import { vars as legacyVars } from "@seed-design/design-token";

import { vars } from "@seed-design/css/vars";
import { vars as typoVars } from "@seed-design/css/vars/component/typography";

const color = vars.$color.palette.gray600;
const typography = typoVars.textStyleT5Bold.enabled.root;
const legacyColor = legacyVars.$static.color.staticWhiteAlpha50;

// @ts-nocheck
import React from "react";
import { vars } from "@seed-design/css/vars";

// 인라인 스타일에서 stroke 토큰 사용
const Component1 = () => (
  <div
    style={{
      borderColor: vars.$color.stroke.neutralMuted,
      borderTopColor: vars.$color.stroke.neutral,
      borderBottomColor: vars.$color.stroke.onImage,
      outlineColor: vars.$color.stroke.fieldFocused,
    }}
  />
);

// 객체 스타일에서 사용
const styles = {
  container: {
    borderColor: vars.$color.stroke.control,
    border: `1px solid ${vars.$color.stroke.field}`,
  },
  button: {
    borderColor: vars.$color.stroke.brand,
    outlineColor: vars.$color.stroke.positive,
  },
  input: {
    borderColor: vars.$color.stroke.informative,
    "&:focus": {
      borderColor: vars.$color.stroke.warning,
    },
  },
  error: {
    borderColor: vars.$color.stroke.critical,
  },
};

// 삼항 연산자에서 사용
const ConditionalComponent = ({ isActive }: { isActive: boolean }) => (
  <div
    style={{
      borderColor: isActive ? vars.$color.stroke.neutralMuted : vars.$color.stroke.neutral,
      stroke: vars.$color.stroke.onImage,
    }}
  />
);

// 새로운 토큰들 (변경되지 않아야 함)
const NewTokensComponent = () => (
  <div
    style={{
      borderColor: vars.$color.stroke.brandWeak,
      outlineColor: vars.$color.stroke.neutralSubtle,
    }}
  />
);

// @ts-nocheck
import React from "react";
import { vars } from "@seed-design/css/vars";

// 인라인 스타일에서 stroke 토큰 사용
const Component1 = () => (
  <div
    style={{
      borderColor: vars.$color.stroke.neutralSubtle,
      borderTopColor: vars.$color.stroke.neutralMuted,
      borderBottomColor: vars.$color.stroke.neutralSubtle,
      outlineColor: vars.$color.stroke.neutralContrast,
    }}
  />
);

// 객체 스타일에서 사용
const styles = {
  container: {
    borderColor: vars.$color.stroke.neutralWeak,
    border: `1px solid ${vars.$color.stroke.neutralWeak}`,
  },
  button: {
    borderColor: vars.$color.stroke.brandWeak,
    outlineColor: vars.$color.stroke.positiveWeak,
  },
  input: {
    borderColor: vars.$color.stroke.informativeWeak,
    "&:focus": {
      borderColor: vars.$color.stroke.warningWeak,
    },
  },
  error: {
    borderColor: vars.$color.stroke.criticalWeak,
  },
};

// 삼항 연산자에서 사용
const ConditionalComponent = ({ isActive }: { isActive: boolean }) => (
  <div
    style={{
      borderColor: isActive ? vars.$color.stroke.neutralSubtle : vars.$color.stroke.neutralMuted,
      stroke: vars.$color.stroke.neutralSubtle,
    }}
  />
);

// 새로운 토큰들 (변경되지 않아야 함)
const NewTokensComponent = () => (
  <div
    style={{
      borderColor: vars.$color.stroke.brandWeak,
      outlineColor: vars.$color.stroke.neutralSubtle,
    }}
  />
);

// @ts-nocheck

import Text from 'components/Base/Text';

const Component = () => {
  return (
    <div>
      {/* 기존 variant prop 케이스 */}
      <Text variant="title2Bold">광고 노출 기준</Text>
      <Text variant="subtitle1Regular">
        앱 내 최근 활동 이력을 분석하여 이용자의 관심사와 관련성이 높은 게시글을 노출해요.
      </Text>
      
      {/* typography prop + color prop 케이스 */}
      <Text typography="$semantic.bodyL1Regular" color="$scale.gray700">
        앱 내 최근 활동 이력을 분석하여 이용자의 관심사와 관련성이 높은 게시글을 노출해요.
      </Text>
      <Text typography="$semantic.label3Bold" color="$scale.gray600" className={marginLeft['4px']}>
        지역 선택하기
      </Text>
      <Text typography="$semantic.label2Bold" color="$scale.gray900">
        지표별 성과
      </Text>
      
      {/* 다양한 typography prop 형태 */}
      <Text typography="bodyL1Regular">접두사 없는 토큰</Text>
      <Text typography="label2Bold">또 다른 토큰</Text>
      
      {/* 다양한 color prop 형태 */}
      <Text variant="title1Bold" color="$semantic.primary">시맨틱 컬러</Text>
      <Text variant="body1Regular" color="$static.white">스태틱 컬러</Text>
      <Text variant="caption1Regular" textColor="$scale.carrot500">textColor prop</Text>
      
      {/* 조건부 표현식 케이스 */}
      <Text variant={isActive ? "title1Bold" : "body1Regular"}>조건부 variant</Text>
      <Text color={isError ? "$semantic.danger" : "$scale.gray700"}>조건부 color</Text>
      
      {/* JSX 표현식 컨테이너 케이스 */}
      <Text typography={"$semantic.bodyL1Regular"} color={"$scale.gray500"}>
        표현식 컨테이너
      </Text>
    </div>
  );
};

// @ts-nocheck

import { Text } from "@seed-design/react";

const Component = () => {
  return (
    <div>
      {/* 기존 variant prop 케이스 */}
      <Text textStyle="t7Bold">광고 노출 기준</Text>
      <Text textStyle="t5Regular">
        앱 내 최근 활동 이력을 분석하여 이용자의 관심사와 관련성이 높은 게시글을 노출해요.
      </Text>
      {/* typography prop + color prop 케이스 */}
      <Text color="palette.gray800" textStyle="articleBody">
        앱 내 최근 활동 이력을 분석하여 이용자의 관심사와 관련성이 높은 게시글을 노출해요.
      </Text>
      <Text color="palette.gray700" className={marginLeft['4px']} textStyle="t4Bold">
        지역 선택하기
      </Text>
      <Text color="palette.gray1000" textStyle="t5Bold">
        지표별 성과
      </Text>
      {/* 다양한 typography prop 형태 */}
      <Text textStyle="articleBody">접두사 없는 토큰</Text>
      <Text textStyle="t5Bold">또 다른 토큰</Text>
      {/* 다양한 color prop 형태 */}
      <Text color="fg.brand" textStyle="t9Bold">시맨틱 컬러</Text>
      <Text variant="body1Regular" color="$static.white">스태틱 컬러</Text>
      <Text textColor="palette.carrot600" textStyle="t3Regular">textColor prop</Text>
      {/* 조건부 표현식 케이스 */}
      <Text textStyle={isActive ? "t9Bold" : "body1Regular"}>조건부 variant</Text>
      <Text color={isError ? "fg.critical" : "palette.gray800"}>조건부 color</Text>
      {/* JSX 표현식 컨테이너 케이스 */}
      <Text color={"palette.gray600"} textStyle="articleBody">
        표현식 컨테이너
      </Text>
    </div>
  );
};

// @ts-nocheck

import { classNames } from "@seed-design/design-token";
import { style } from "@vanilla-extract/css";

const typography = {
  one: classNames.$semantic.typography.title2Regular,
  two: classNames.$semantic.typography.label3Regular,
  three: classNames.$semantic.typography.label5Regular,
  four: classNames.$semantic.typography.label6Regular,
}

export const footer = style([
  classNames.$semantic.typography.caption1Regular,
  {
    padding: "16px",
    marginTop: "12px",
    color: vars.$scale.color.gray700,
    backgroundColor: vars.$semantic.color.paperContents,
  },
]);

// @ts-nocheck

import { text } from "@seed-design/css/recipes/text";
import { style } from "@vanilla-extract/css";

const typography = {
  one: text({ textStyle: "t7Regular" }),
  two: text({ textStyle: "t4Regular" }),
  three: text({ textStyle: "t1Regular" }),
  four: text({ textStyle: "t1Regular" }),
}

export const footer = style([
  text({ textStyle: "t3Regular" }),
  {
    padding: "16px",
    marginTop: "12px",
    color: vars.$scale.color.gray700,
    backgroundColor: vars.$semantic.color.paperContents,
  },
]);

// @ts-nocheck

const SemanticColorTestComponent = styled("div", {
  // Semantic Color 테스트
  color: "$primary-semantic",
  color: "$onPrimary-semantic",
  color: "$primaryLow-semantic",
  color: "$secondary-semantic",
  color: "$secondaryLow-semantic",
  color: "$success-semantic",
  color: "$successLow-semantic",
  color: "$warning-semantic",
  color: "$warningLow-semantic",
  color: "$danger-semantic",
  color: "$dangerLow-semantic",
  color: "$overlayDim-semantic",
  color: "$overlayLow-semantic",
  color: "$paperSheet-semantic",
  color: "$paperDialog-semantic",
  color: "$paperFloating-semantic",
  color: "$paperContents-semantic",
  color: "$paperDefault-semantic",
  color: "$paperBackground-semantic",
  color: "$paperAccent-semantic",
  color: "$primaryHover-semantic",
  color: "$primaryPressed-semantic",
  color: "$primaryLowHover-semantic",
  color: "$primaryLowActive-semantic",
  color: "$primaryLowPressed-semantic",
  color: "$grayHover-semantic",
  color: "$grayPressed-semantic",
  color: "$onPrimaryOverlay50-semantic",
  color: "$onPrimaryOverlay200-semantic",
  color: "$onPrimaryLowOverlay50-semantic",
  color: "$onPrimaryLowOverlay100-semantic",
  color: "$onPrimaryLowOverlay200-semantic",
  color: "$onGrayOverlay50-semantic",
  color: "$onGrayOverlay100-semantic",
  color: "$divider1-semantic",
  color: "$divider2-semantic",
  color: "$divider3-semantic",
  color: "$accent-semantic",
  color: "$inkText-semantic",
  color: "$inkTextLow-semantic",
  color: "$grayActive-semantic",
});

const ScaleColorTestComponent = styled("div", {
  // Scale Color Gray 테스트
  color: "$gray00",
  color: "$gray50",
  color: "$gray100",
  color: "$gray200",
  color: "$gray300",
  color: "$gray400",
  color: "$gray500",
  color: "$gray600",
  color: "$gray700",
  color: "$gray800",
  color: "$gray900",
  color: "$grayAlpha50",
  color: "$grayAlpha100",
  color: "$grayAlpha200",
  color: "$grayAlpha500",

  // Scale Color Carrot 테스트
  color: "$carrot50",
  color: "$carrot100",
  color: "$carrot200",
  color: "$carrot300",
  color: "$carrot400",
  color: "$carrot500",
  color: "$carrot600",
  color: "$carrot700",
  color: "$carrot800",
  color: "$carrot900",
  color: "$carrot950",
  color: "$carrotAlpha50",
  color: "$carrotAlpha100",
  color: "$carrotAlpha200",

  // Scale Color Blue 테스트
  color: "$blue50",
  color: "$blue100",
  color: "$blue200",
  color: "$blue300",
  color: "$blue400",
  color: "$blue500",
  color: "$blue600",
  color: "$blue700",
  color: "$blue800",
  color: "$blue900",
  color: "$blue950",
  color: "$blueAlpha50",
  color: "$blueAlpha100",
  color: "$blueAlpha200",

  // Scale Color Red 테스트
  color: "$red50",
  color: "$red100",
  color: "$red200",
  color: "$red300",
  color: "$red400",
  color: "$red500",
  color: "$red600",
  color: "$red700",
  color: "$red800",
  color: "$red900",
  color: "$red950",
  color: "$redAlpha50",
  color: "$redAlpha100",
  color: "$redAlpha200",

  // Scale Color Green 테스트
  color: "$green50",
  color: "$green100",
  color: "$green200",
  color: "$green300",
  color: "$green400",
  color: "$green500",
  color: "$green600",
  color: "$green700",
  color: "$green800",
  color: "$green900",
  color: "$green950",
  color: "$greenAlpha50",
  color: "$greenAlpha100",
  color: "$greenAlpha200",

  // Scale Color Yellow 테스트
  color: "$yellow50",
  color: "$yellow100",
  color: "$yellow200",
  color: "$yellow300",
  color: "$yellow400",
  color: "$yellow500",
  color: "$yellow600",
  color: "$yellow700",
  color: "$yellow800",
  color: "$yellow900",
  color: "$yellow950",
  color: "$yellowAlpha50",
  color: "$yellowAlpha100",
  color: "$yellowAlpha200",

  // Scale Color Purple 테스트
  color: "$purple50",
  color: "$purple100",
  color: "$purple200",
  color: "$purple300",
  color: "$purple400",
  color: "$purple500",
  color: "$purple600",
  color: "$purple700",
  color: "$purple800",
  color: "$purple900",
  color: "$purple950",
});

const StaticColorTestComponent = styled("div", {
  // Static Color 테스트
  color: "$black-static",
  color: "$white-static",
  color: "$gray900-static",
  color: "$carrot50-static",
  color: "$carrot800-static",
  color: "$green50-static",
  color: "$green800-static",
  color: "$yellow50-static",
  color: "$yellow800-static",
  color: "$red50-static",
  color: "$red800-static",
  color: "$blue50-static",
  color: "$blue800-static",
  color: "$blackAlpha200-static",
  color: "$blackAlpha500-static",
  color: "$whiteAlpha50-static",
  color: "$whiteAlpha200-static",
});

// 복합 속성 테스트
const ComplexPropertyTestComponent = styled("div", {
  border: "1px solid $gray700",
  boxShadow: "0 0 10px $overlayDim-semantic",
  outline: "2px solid $accent-semantic",
  textDecoration: "underline $danger-semantic",

  // 네스팅된 속성 테스트
  "&:before": {
    borderBottom: "1px solid $divider1-semantic",
    background: "$paperContents-semantic",
  },

  // 변형 테스트
  variants: {
    theme: {
      primary: {
        background: "$primary-semantic",
        color: "$onPrimary-semantic",
      },
      secondary: {
        background: "$secondaryLow-semantic",
        color: "$inkText-semantic",
      },
      danger: {
        background: "$danger-semantic",
        color: "$white-static",
      },
    },
  },
});

// 복합 속성 (색상 토큰이 앞에 있는 경우) 테스트
const BorderAndColorTestComponent = styled("div", {
  color: "$scale-red500 solid 1px",
  color: "$red600 dashed 2px",
  color: "$scale-blue400 dotted 3px",
  color: "$scale-green600 double 4px",
  color: "$scale-yellow500 groove 2px",
  outlineColor: "$scale-purple500",
});

const ImportantTest = styled("div", {
  color: "$primary-semantic !important",
  color: "$onPrimary-semantic !important",
  color: "$primaryLow-semantic !important",
  color: "$gray00 !important",
  color: "$gray50 !important",
  color: "$gray100 !important",
  css: {
    color: "$scale-gray600 !important",
    borderColor: "$scale-gray400 !important",
    backgroundColor: "$scale-gray100 !important",
  },
});

const Li_FieldItem = styled("li", {
  borderBottom: `${rem(1)} solid $semantic-divider1`,
  borderBottom: `0.5rem solid $semantic-paperBackground`,
  border: check ? "1px solid $semantic-divider1" : "0.5rem solid $semantic-paperBackground",
});