Slate 스타일과 동적 class

Slate는 Blueprint와 CSS로 위젯을 표시하며 Dark Mode 전환도 제공합니다. 앱에 다른 디자인을 적용할 때에는 기본 스타일이 어느 요소에 적용되는지 확인하고 필요한 규칙을 덮어씁니다.

스타일의 위치

큰 앱은 개별 위젯마다 스타일을 흩어 놓기보다 Styles 패널에서 class를 정의하고 각 위젯의 Additional Classes에 적용합니다.

일반 앱 스타일은 Less로 작성할 수 있으며 페이지 로드 때 CSS로 컴파일합니다. Inspector에 보이는 최종 CSS가 작성한 Less와 다른 이유입니다. 공간의 Global stylesheet는 CSS만 지원하므로 구분합니다.

기본 스타일 확인

브라우저에서 요소를 우클릭하고 Inspect로 렌더된 HTML과 CSS를 확인합니다. 적용된 class, 기본 규칙과 선택기의 구체성을 확인한 뒤 필요한 속성을 바꿉니다.

위젯 하나부터 조정하는 예는 사용자 스타일에 설명합니다.

Blueprint 사용

Blueprint의 기본 및 확장 색상 이름을 Slate의 Less 변수로 참조할 수 있습니다. 색상은 접근성을 고려해 구성되어 있지만 실제 앱에서 사용할 조합도 해당 화면에 맞게 선택합니다.

Button, Progress Bar와 Tag 같은 모양을 HTML로 만들 때에는 Blueprint의 JavaScript API 대신 CSS API를 확인합니다. Slate에 포함된 버전과 일치하는 class 이름을 사용합니다.

아이콘의 class 접두사도 버전에 따라 다릅니다. Blueprint v6의 CSS 아이콘 예는 다음과 같습니다.

<span class="bp6-icon-standard bp6-icon-clean"></span>

이 예는 v6 class가 제공되는 경우의 구성입니다. 기존 pt- 계열과 다른 버전의 접두사를 일괄적으로 바꾸지 않고 앱에 포함된 버전에 맞춥니다.

동적 표시

CSS는 로드 때 결정되므로 Styles editor의 규칙에 Handlebars를 넣어 속성값을 바꿀 수 없습니다. 동적 표시에는 다음 경로를 사용합니다.

Additional Classes

여러 class를 미리 정의하고 위젯의 Additional Classes를 Handlebars로 연결합니다. 함수가 현재 상태에 적용할 class를 정하도록 구성할 수 있습니다. 큰 앱은 위젯별 class를 반환하는 하나의 상태 함수로 여러 표시를 관리할 수도 있습니다.

이 방식으로 색상, 아이콘, 크기와 표시 여부를 바꿉니다. 구체적인 배치와 숨김은 레이아웃을 따릅니다.

HTML의 style 속성

HTML 위젯이나 HTML을 직접 제공하는 표 셀에서는 요소의 style 속성값을 Handlebars로 구성할 수 있습니다. 앱의 정적 스타일시트를 동적으로 수정하는 경로와는 다릅니다.

어두운 로딩 화면

URL에 ?$theme=dark를 넣으면 Slate 앱이 로딩되기 시작한 뒤 전체 로딩 화면을 어두운 테마로 표시합니다. 기존 질의 매개변수가 있으면 &$theme=dark를 사용합니다.

이 설정은 해당 URL을 통한 로드에 적용됩니다. 새로고침 뒤에도 적용하려면 매개변수를 유지해야 합니다. 브라우저가 아직 앱 경로로 이동 중인 단계까지 적용되는 것은 아닙니다.

사용자 글꼴

사용자 글꼴은 OTF 파일로 Foundry에 올린 뒤 Styles에 @font-face를 선언하여 사용합니다. 아래의 호스트와 RID 자리는 업로드한 파일의 실제 값으로 지정합니다.

@font-face {
  font-family: alliance1;
  src: url("https://<FOUNDRY_URL>/blobster/api/salt/ri.blobster.main.blob.<RID>")
    format("opentype");
}

이후 font-family로 alliance1을 사용합니다.