CSS: ai-gradient ​

.--background-ai-horizontal — 맞춤 표면용 AI 강조 그라디언트 헬퍼로, 공유 InstUI 계약용이 아닙니다.

Source: index.ts

사용법 ​

css
@import "@pantoken/plugin-custom-components/custom-components.css";

수정자 ​

수정자설명
.--background-ai공유 AI 그라디언트로 요소 배경을 칠합니다.
.--background-ai-horizontalinstructure 가로 로고(다크).
.--border-color-ai공유 AI 그라디언트로 둘러싸인 투명한 테두리입니다.
.--border-color-ai-horizontalinstructure 가로 로고(다크).

접근성 ​

규칙 (axe-core)리브랜딩 (라이트)리브랜딩 (다크)Canvas캔버스 고대비
color-contrastWCAG 2.2 1.4.3검토 필요검토 필요검토 필요검토 필요

요소는 최소 색상 대비율 기준을 충족해야 합니다

  • .--border-color-ai
  • main > .--border-color-ai-horizontal
  • .--background-ai
  • main > .--background-ai-horizontal
  • div[dir="rtl"] > .--border-color-ai-horizontal
조건리브랜딩 (라이트)리브랜딩 (다크)Canvas캔버스 고대비
more-contrast-respectedWCAG 2.2 1.4.3, 1.4.6검토 필요검토 필요검토 필요검토 필요

prefers-contrast: more에 따라 페이지가 변경되지만, 측정 가능한 표시 텍스트는 없습니다.

reflow-at-320pxWCAG 2.2 1.4.10PassPassPassPass
text-spacing-no-clippingWCAG 2.2 1.4.12PassPassPassPass
스크린 리더 (시뮬레이션)리브랜딩 (라이트)리브랜딩 (다크)Canvas캔버스 고대비
AnnouncementsPassPassPassPass

이 자동화된 결과만으로 페이지의 WCAG 준수 여부를 확정할 수 없으며, 수동 검토가 여전히 필요합니다.

사용된 토큰 ​

Token타입값
--instui-border-width-sm<length>0.0625rem
--instui-color-background-base<color>LightDarklight-dark(#ffffff, #10141A)
--instui-color-stroke-ai-bottom-gradient<color>LightDarklight-dark(#00828E, #04A4B7)
--instui-color-stroke-ai-top-gradient<color>LightDarklight-dark(#9E58BD, #B680CC)