멀티 브랜드
같은 계열의 시스템은 컴포넌트를 하나로 두고 토큰 값만 바꿔서, 여러 제품이 같은 뼈대 위에서 각자의 얼굴을 갖게 해요.
개념
Rebar 는 무엇을 공유하고 무엇을 시스템(브랜드)마다 다르게 둘지를 명확히 나눠요. 공유의 단위는 계열이에요. SEED 계열(Clay)과 Atlassian 계열(Steel·Forge)은 각자 컴포넌트와 토큰 이름을 따로 갖고, 같은 계열 안의 시스템끼리 그것을 함께 써요.
이 문서는 SEED 계열(Clay)을 예로 설명해요. Atlassian 계열도 구조는 같고, 토큰 파일 구성과 CSS 변수 접두사(--ds-*)만 달라요. 자세한 내용은 Steel 과 Forge 를 참고해요.
| 구분 | 공유 | 브랜드마다 다름 |
|---|---|---|
| 컴포넌트 코드 | 계열마다 하나 (registry/ui/*.tsx, registry/steel/ui/*.tsx) | - |
| 디자인 가이드·패턴 | 문서 하나 | - |
| 토큰 이름 | 같은 계열의 모든 시스템이 같은 목록 | - |
| 토큰 값 | - | brands/<id>/*.yaml |
| 폰트·shadcn 별칭 | - | brands/<id>/brand.yaml |
컴포넌트는 $color.bg.brand-solid 같은 토큰 이름만 알고, 실제 색은 몰라요. 그래서 브랜드를 바꿔도 컴포넌트 코드는 그대로예요.
브랜드 폴더
시스템 하나는 brands/<id>/ 폴더 하나예요(brands/clay, brands/forge, brands/steel). 토큰 파일은 SEED Design 의 Rootage 형식 YAML 을 그대로 써요. 아래는 Clay 폴더예요.
brands/clay/
brand.yaml id·system·이름·제품·설명·폰트·shadcn 별칭
color.yaml $color.palette.* (원시 색) + fg/bg/stroke 시맨틱 (light/dark)
dimension.yaml $dimension.x1 … x16, spacing-x.global-gutter …
radius.yaml $radius.r0_5 … r6, full
font-size.yaml $font-size.t1 … t14
font-weight.yaml regular, medium, bold
line-height.yaml t1 … t14
duration.yaml d1 … d6, color-transition …
timing-function.yaml easing, enter, exit …
shadow.yaml s1 … s3색 토큰은 theme-light 와 theme-dark 값을 함께 가져요. 시맨틱 토큰은 원시 팔레트를 참조하는 경우가 많아요.
$color.bg.brand-solid:
values:
theme-light: $color.palette.orange-600
theme-dark: $color.palette.orange-700토큰 빌드
@rebar/tokens 패키지가 모든 브랜드 폴더를 읽어 검증하고 다음 산출물을 만들어요.
| 파일 | 내용 | 쓰는 곳 |
|---|---|---|
dist/css/<id>.css | :root / .dark 에 한 브랜드의 CSS 변수 | 브랜드 하나만 쓰는 앱 |
dist/css/scoped.css | [data-brand="<id>"] 로 스코프한 모든 브랜드 | 문서 사이트, 멀티 브랜드 앱 |
dist/theme.css | Tailwind v4 @theme 매핑 (SEED 계열 공통) | bg-bg-brand-solid, p-x4 같은 유틸 |
dist/theme-atlas.css | Tailwind v4 @theme 매핑 (Atlassian 계열 공통) | bg-ds-background-brand-bold, p-ds-200 같은 유틸 |
dist/native/<id>.js | React Native 테마 객체 | 네이티브 앱 (로드맵) |
SEED 계열의 CSS 변수는 --rb- 접두사를 가져요(Atlassian 계열은 원본과 같은 --ds-). 예를 들어 $color.bg.brand-solid 는 --rb-color-bg-brand-solid 가 되고, Tailwind 에서는 bg-bg-brand-solid 로 써요.
data-brand 스코프
scoped.css 는 브랜드마다 [data-brand="<id>"] 선택자 아래에 변수를 정의해요. 그래서 한 페이지 안에서도 요소마다 다른 브랜드를 걸 수 있어요.
<html data-brand="clay">
<!-- 페이지 전체는 Clay -->
<section data-brand="other-brand">
<!-- 이 영역만 같은 계열의 다른 브랜드 -->
</section>
</html>다크 모드는 .dark 클래스로 켜요. .dark [data-brand] 와 [data-brand].dark 두 형태를 모두 지원해요.
이 문서 사이트도 같은 방식으로 동작해요. 상단 브랜드 선택기는 <html data-brand> 값만 바꾸고, 포털로 열리는 Dialog·Bottom Sheet 같은 컴포넌트도 그대로 브랜드를 따라요. 주소에 ?brand=<id> 를 붙이면 처음부터 그 브랜드로 열려요. 다른 계열의 시스템을 고르면 그 계열의 문서(/ 또는 /steel)로 이동해요.
shadcn 별칭
brand.yaml 의 shadcn: 블록은 shadcn/ui 의 CSS 변수(--primary, --background, --radius …)를 Rootage 토큰에 연결해요. 그래서 Rebar 에 없는 서드파티 shadcn 컴포넌트를 가져와도 브랜드 색을 따라요.
shadcn:
radius: $radius.r2_5
primary: $color.bg.brand-solid
primary-foreground: $color.fg.on-brand-solid
border: $color.stroke.neutral-muted
ring: $color.stroke.focus-ring