Indigo themefoundation

Indigo accent for admin and back-office apps.

설치

pnpm

pnpm dlx shadcn@4.23.0 add @uikit/theme-indigo

남보라(인디고) 강조 테마입니다. 관리자 화면과 백오피스에서 primary 계열 색을 #5E6AD2 근처의 인디고로 바꿉니다. 글자색, 바탕, 의미 색은 style 아이템 그대로입니다.

설치

pnpm dlx shadcn@4.23.0 add @uikit/theme-indigo

설치하면 globals.css 의 :root 와 .dark 에 아래 토큰이 덮어써집니다. 앱 전체가 이 테마가 됩니다. 한 화면 영역만 바꾸거나 테마를 런타임에 바꾸려면 theming 의 data-theme 방식을 씁니다.

사용

tsx

import type { ReactNode } from "react";
export function AdminShell({ children }: { children: ReactNode }) {  return <div data-theme="indigo">{children}</div>;}

data-theme="indigo" 는 uikit 이 생성한 스타일시트(styles/uikit.css)를 쓰는 앱에서 동작합니다. 어두운 테마는 조상에 .dark 클래스를 두면 됩니다.

속성

밝은 테마(:root)와 어두운 테마(.dark) 둘 다 아래 토큰을 덮어씁니다. 값은 item.json 이 정본입니다.

토큰	쓰임
`primary`, `primary-foreground`	주요 버튼과 선택 표시, 그 위의 글자
`ring`	포커스 링
`sidebar-primary`, `sidebar-primary-foreground`, `sidebar-ring`	사이드바의 강조와 포커스 링
`accent`, `accent-foreground`	메뉴 항목의 호버·포커스 바탕과 그 위의 글자
`chart-1` … `chart-5`	차트 계열 색. 첫 색은 `primary` 와 같은 색상, 나머지는 색상을 돌려 구분합니다

기본으로 지키는 것

글자와 바탕 조합(primary-foreground 와 primary, accent-foreground 와 accent, sidebar-primary-foreground 와 sidebar-primary)은 밝은·어두운 테마 모두 4.5:1 이상입니다. 인디고 바탕 위 글자가 흐려 읽히지 않는 일을 막습니다.
primary, ring, chart-1 … chart-5 는 바탕과 3:1 이상 차이가 납니다. 차트와 포커스 링이 바탕에 묻히지 않습니다.
밝은 테마와 어두운 테마가 같은 토큰을 모두 덮어씁니다. 한쪽만 바뀌어 다른 테마에서 neutral 색이 섞이는 일을 막습니다.

접근성

대비는 @plott/webkit-design/color 로 계산해 테스트가 지킵니다. 어두운 테마는 neutral 의 어두운 바탕 위에서 잽니다.
색만으로 뜻을 전하지 않도록 차트에는 범례와 글자를 함께 둡니다.

의존

@uikit/style(neutral 바탕 토큰과 의미 색). 다른 패키지는 없습니다.