Plass UI

프로젝트 소개

Plass UI는 하나의 디자인 언어를 두 개의 라이브러리로 내놓은 것입니다. 같은 이름과 같은 수치를 가진 백스물일곱 개의 컴포넌트를 React 프로젝트에서도, Flutter 앱에서도 쓸 수 있고, React 쪽에는 DOM에만 있는 문제를 다루는 컴포넌트가 세 개 더 있습니다. 한쪽에서 익힌 것을 다른 쪽에서 그대로 쓰게 되므로, 세 번째 릴리스쯤에서 두 체계가 서로 갈라지는 일이 없습니다.

모든 표면은 하나의 질문에 답합니다. 이것은 누르는 것인가, 무언가를 담고 있는 것인가. 누르는 것은 색이 들어간 유리입니다. 어두워지는 대신 같은 색 계열 안에서 돌아가는 그러데이션, 그 색으로 드리우는 그림자, 그리고 포인터를 따라다니는 빛의 번짐입니다. 무언가를 담는 것은 맑은 유리입니다. 반투명하고 깊게 흐려져 있으며 흰 실선으로 테를 두르고 색을 입히지 않습니다. 어디에도 경사면이 없고 눌러도 움직이지 않습니다. 깊이는 빛과 색, 흐림이 만들기 때문입니다. 그러데이션의 모든 지점을 그 위의 글자와 비교해 측정했기 때문에 가장 밝은 구석에서도 읽는 데 필요한 대비를 지킵니다.

size와 color, variant, density, elevation 다섯 가지 속성이 API 전체를 이루고, 다크 모드는 양쪽 모두 플랫폼 설정을 따릅니다. React 패키지는 ESM이고 트리 셰이킹이 되며 런타임 의존성이 둘입니다. 그중 두 번째인 highlight.js는 코드 블록이 실제로 구문을 강조할 때만 내려받습니다. Flutter 패키지는 의존성이 아예 없고 에셋도, 플러그인도, 프로바이더도 필요하지 않습니다. 두 패키지 모두 대신해 줄 수 없는 한 가지는 유리 뒤의 페이지를 칠하는 일인데, 바로 그것을 위한 토큰 두 개가 준비되어 있습니다.

기능

• 문서 지원

• TypeScript 지원

• 다국어 지원

• 테스트로 검증됨

• 크로스플랫폼 지원

• 접근성 지원

• 다크 모드

• 트리 셰이킹 지원