Needless UI

가이드

테마 설정

모든 시각적 결정은 W3C 디자인 토큰에서 생성된 CSS 사용자 지정 속성입니다. 컴포넌트는 --nui-color-accent-solid 같은 시맨틱 토큰만 사용하므로, 토큰 하나를 바꾸면 그 토큰을 사용하는 모든 컴포넌트의 스타일이 바뀝니다.

라이트와 다크

기본적으로 운영체제의 설정에 따라 모드가 정해집니다. data-nui-theme 속성으로 어떤 요소에든 모드를 고정할 수 있으며, 자유롭게 중첩할 수도 있습니다.

theme-attribute.html
<html data-nui-theme="dark">
  <!-- Everything here is dark… -->
  <aside data-nui-theme="light">…except this panel.</aside>
</html>
data-nui-theme="light"
data-nui-theme="dark"

토큰 재정의

토큰은 @layer nui 안에 있으므로 앱의 일반 CSS로 재정의할 수 있습니다. 앱 전체에 적용하려면 :root에, 일부에만 적용하려면 해당 요소에 설정합니다.

override.css
/* The whole app */
:root {
  --nui-color-accent-solid: oklch(0.52 0.16 150);
  --nui-radius-md: 0.75rem;
}

/* One part of it */
.checkout {
  --nui-color-accent-solid: var(--nui-color-success-solid);
}

브랜드 팔레트

컬러 스케일은 자동으로 생성됩니다. packages/tokens/scripts/palette.ts에서 색상(hue) 값을 바꾸고 다시 생성하면, 스크립트가 모든 색을 sRGB 범위에 맞게 다시 조정하고 텍스트와 배경 조합마다 명도 대비를 다시 검사합니다.

palette.sh
# After changing a hue in packages/tokens/scripts/palette.ts
pnpm --filter @needless-ui/tokens palette
pnpm build:tokens