Plass UI

このプロジェクトについて

Plass UI は、一つのデザイン言語を二つのライブラリとして出したものです。同じ名前と同じ数値を持つ百二十七個のコンポーネントが、React のプロジェクトでも Flutter のアプリでも使えます。React 側には、DOM にしかない問題のためのものがさらに三つあります。片方で覚えたことがそのままもう片方で通じるので、三度目のリリースあたりで二つの体系が食い違っていくということが起きません。

すべての面が一つの問いに答えます。これは押すものか、何かを収めているものか。押すものは色のついたガラスです。暗くなるのではなく同じ色の系統の中を回っていくグラデーション、その色で落ちる影、そしてポインターを追いかける光のにじみ。何かを収めるものは澄んだガラスです。半透明で深くぼかされ、白い細い線で縁取られ、決して染められません。面取りはなく、押しても動きません。奥行きは光と色とぼかしが担うからです。グラデーションのどの点もその上の文字と比べて測ってあるので、いちばん明るい隅でも読むのに要るコントラストを保ちます。

size、color、variant、density、elevation の五つが API のすべてで、ダークモードは両方ともプラットフォームに従います。React のパッケージは ESM でツリーシェイキングが効き、ランタイム依存は二つです。二つ目の highlight.js は、コードブロックが実際に何かをハイライトするときにだけダウンロードされます。Flutter のパッケージは依存がまったくなく、アセットもプラグインもプロバイダーも要りません。どちらのパッケージにも代われない仕事が一つだけあります。ガラスの後ろのページを塗ることで、そのためのトークンが二つ用意されています。

機能

• ドキュメントサイトあり

• TypeScript 型定義

• 多言語対応

• テストで検証済み

• クロスプラットフォーム対応

• アクセシビリティ対応

• ダークモード

• ツリーシェイキング対応