Ocean themefoundation
Blue primary family.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/theme-ocean파랑 계열 테마입니다. primary 계열 색을 바다 파랑으로 바꿉니다. 글자색, 바탕, 의미 색은 style 아이템 그대로입니다. 의미 색 info 와 색상이 가까우므로, 안내 표시에는 StatusBadge 의 글자를 함께 씁니다.
설치
sh
pnpm dlx shadcn@4.23.0 add @uikit/theme-ocean설치하면 globals.css 의 :root 와 .dark 에 아래 토큰이 덮어써집니다. 앱 전체가 이 테마가 됩니다. 한 화면 영역만 바꾸거나 테마를 런타임에 바꾸려면 theming 의 data-theme 방식을 씁니다.
사용
tsx
import type { ReactNode } from "react";
export function OceanShell({ children }: { children: ReactNode }) { return <div data-theme="ocean">{children}</div>;}data-theme="ocean" 는 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 바탕 토큰과 의미 색). 다른 패키지는 없습니다.