tuqulore / jumpu-ui

ユーティリティフレンドリーな UI コンポーネントライブラリー
https://tuqulore.github.io/jumpu-ui/
MIT License
5 stars 0 forks source link

タイポグラフィーの扱いは`ローカルスタイル`か`ローカルバリアブル`か? #596

Open Hidetaro7 opened 7 months ago

Hidetaro7 commented 7 months ago

Figmaが今後、ローカルバリアブルを正式機能としてリリースする予定であるローカルバリアブルのほうが、今後より多くの状況に対応できるように思える。

https://help.figma.com/hc/ja/articles/14506821864087

現在、タイポグラフィーと色に関するトークンをローカルスタイルに登録している。 この問題点として、テキストスタイルで定義したプロパティの一部に変更を加えたい場合、スタイルを外すしか方法がない。 例えば行間だけを変更したい場合などがそれにあたる。

https://help.figma.com/hc/en-us/articles/4406787442711#variables

ここのComing soon では、

フォント ファミリ、サイズ、間隔などのタイポグラフィ プロパティの組み合わせを切り替える方法を提供したいと考えています

とある通り、テキストスタイルの一部にテキストバリアントによって見た目を変更できるような期待ができる。(と感じている)

ローカルスタイルとローカルバリアントの棲み分けがよくわかっていないので、気づいたことがあればコメントして、この先の方針を決めていくと良い気がしている。

knokmki612 commented 7 months ago

テスト中のブランチ(マージ済み) https://www.figma.com/file/Lo0RCwldNBkcYFnl075Rm7/branch/uGeitaFPy5pd0ddbkgoVL0/Jumpu-UI-%7C-Tailwind-CSS-Components?type=design&mode=design&t=6fxWE1RAw7pqvPkT-0

タイポグラフィーのブランチ https://www.figma.com/design/Lo0RCwldNBkcYFnl075Rm7/branch/l6vHEZWOjIyS1ud9GFo64M/Jumpu-UI-%7C-Tailwind-CSS-Components?t=ZISQ0oU6hJT3toHP-0

knokmki612 commented 2 weeks ago

タイポグラフィー

現状について確認すると、以下の組み合わせをローカルスタイルとして管理している

バリアブルの範囲の設定をFigmaで確認すると以下が取り扱える

image

Hidetaro7 commented 2 weeks ago

字体(書体、級数、ウエイト、行間、斜体等)を個別に扱えることをメリットと考えて、ローカルバリアブルにて管理することにしたい。

Hidetaro7 commented 2 weeks ago

line-height のユーティリティである leading は数値のみしかバリアブルとして扱えない。 よって、 leading-tight: 125% といった相対値は現在のところ使えない。

https://forum.figma.com/t/allow-percentages-for-line-height/69692/80

一旦、自動の値がデフォルトとして使えるようになると考えたら実用上さほど不便でもなさそうな気がするがどうだろうか...

Hidetaro7 commented 2 weeks ago

font-weight については、 数値型の場合900といったもので、文字列型だと bold などが使えるようだ。

実用性においては、書体によって semi bold ではなく demi bold などといったようにその時々で呼び方が違う。 また、そのウエイトが存在するかわからないのにバリアブルを指定するのも混乱する。 操作してみてわかるが、バリアブルを探すのにクリックする手間がかかる。実際その書体に見合ったウエイトがポップアップされるのが一番正しいわけなのと、実用性があまりないようなので、 font-weight については一旦取り扱わない。

Hidetaro7 commented 2 weeks ago

font-size を表す text-* については、 Figmaファイルすべてを修正するのは相当な労力を要するため、

これだけの変更にとどめて line-height の問題が将来 Figma から解決された場合、あらためてどのように運用するべきか検討することにしたい。

Hidetaro7 commented 2 weeks ago

テキストについて、 急な破壊的変更を行うより、現在のローカルスタイルは生かしたまま、 ローカルスタイルを使わずとも フォントサイズに直接、 tailwind ユーティリティ(text-sm など)を使うことができるという運用でしばらく進めたいと思います。

https://www.figma.com/design/Lo0RCwldNBkcYFnl075Rm7/branch/eSzJnjwQm3rojnARbiUXH7/Jumpu-UI-%7C-Tailwind-CSS-Components?m=auto&t=Yt57T3uv3KisveFa-1

にてレビューをリクエストしました。 @knokmki612

knokmki612 commented 1 week ago

font-size を表す text-* については、 Figmaファイルすべてを修正するのは相当な労力を要するため、

当面互換性を持たせる目的で廃止しないでおくのは賛成です