테마와 스타일

Light and dark

MBSW는 기본적으로 밝은 테마를 사용하며, .dark 클래스가 있는 영역에 어두운 테마의 토큰을 적용합니다. 앱 전체의 테마를 바꾸려면 html에 클래스를 설정합니다.

// 브라우저에서 앱의 테마 상태가 변경될 때 실행합니다.
document.documentElement.classList.toggle('dark', dark);

이렇게 하면 body 아래의 포털에 표시되는 Dialog, Select 등의 테마도 함께 바뀝니다. 일부 영역에만 테마를 적용한다면 포털이 어느 요소 아래에 렌더링되는지 함께 확인하세요.

CSS variables

Foundation의 토큰 목록에서 실제 공개 변수 이름을 복사할 수 있습니다. 가능하면 구체적인 팔레트 값보다 역할에 맞는 semantic 토큰을 사용합니다.

.panel {
  border: 1px solid var(--riido-border);
}

@mbsw/tokens/manifest에는 토큰 이름과 분류 정보가 포함됩니다. 이 문서의 토큰 값은 설치된 패키지의 styles.css에서 가져옵니다. 타이포그래피처럼 여러 속성을 묶은 토큰은 여러 CSS 선언으로 표시됩니다.

Optional styles

@mbsw/tokens/tailwind.css는 Tailwind CSS 4의 테마를 확장합니다. Tailwind 유틸리티를 사용하는 앱에서는 기존 Tailwind 설정과 함께 불러옵니다. 기본 테마를 초기화하지 않고 확장하므로 기존 유틸리티를 함께 사용할 수 있습니다.

@mbsw/tokens/gradient-canvas.css를 불러오면 --gradient-canvas 변수를 사용할 수 있습니다. 그라데이션은 영역의 왼쪽 위에서 오른쪽 아래로 향하며, 가로세로 비율에 따라 각도가 달라집니다. 미리보기와 적용 코드는 Gradient에서 확인하세요.

@mbsw/tokens/motion.css는 OS의 모션 줄이기 설정에 따라 애니메이션과 전환 시간을 줄입니다. 이 스타일시트는 불러온 문서 전체에 적용되므로 앱의 모션 정책에 맞게 선택합니다.