디자인 커스터마이징

색·간격·모서리 값이 전부 --tissue-layout-* 라는 CSS 변수로 빠져 있습니다. 그래서 이 변수 몇 개만 우리 값으로 바꾸면 컴포넌트 전체 모양이 한 번에 바뀝니다. 컴포넌트의 CSS 를 직접 건드릴 필요가 없습니다.

어떻게 바뀌나

base.css 가 .tissue-layout 안에 기본값을 정해 두고, 버튼·카드 같은 컴포넌트가 그 값을 가져다 씁니다. 그래서 위쪽 변수 하나만 바꿔도 그 값을 쓰는 컴포넌트가 모두 따라 바뀝니다.

테마 꾸미기

강조색과 모서리 값을 바꿔 보면 여러 컴포넌트가 그 자리에서 바뀝니다. 마음에 드는 값이 나오면 아래 CSS 를 복사해 앱에 붙여넣으세요.

.tissue-layout {
  --tissue-layout-accent: #2563eb;
  --tissue-layout-radius: 8px;
}

변수별 비교

같은 컴포넌트가 변수 값에 따라 어떻게 달라지는지 나란히 놓고 봅니다.

앱 전체에 적용

앱 전체를 바꾸려면 base.css 를 불러온 다음에 아래처럼 변수를 다시 정해 주면 됩니다.

/* app/theme.css — base.css 이후에 로드 */
.tissue-layout {
  --tissue-layout-accent: #16a34a;      /* 브랜드 강조색 */
  --tissue-layout-radius: 12px;          /* 더 둥근 모서리 */
  --tissue-layout-font: "Pretendard", system-ui, sans-serif;
}

일부 영역만 다르게

화면의 특정 영역만 다른 색으로 하고 싶으면, 그 영역에만 인라인 스타일로 변수를 바꿔 주면 됩니다.

<div
  className="tissue-layout"
  style={{ ["--tissue-layout-accent"]: "#db2777" } as React.CSSProperties}
>
  <Button variant="primary">핑크 강조</Button>
</div>

바꿀 수 있는 변수

base.css 가 정해 두는, 우리가 바꿔 쓸 수 있는 변수 목록입니다.

Tailwind 프리셋

Tailwind 를 쓰는 앱이라면 @tissue-ui/layout-themes/tailwind 프리셋을 얹어, 같은 색·간격 값을 Tailwind 클래스로도 쓸 수 있습니다.

import layoutPreset from "@tissue-ui/layout-themes/tailwind";
export default { presets: [layoutPreset] };