chore(spindle-ui): set base font family

[herablog]

Storybookのプレビュー内では、Spindleで規定されたフォントでコンポーネントを表示するようにします。

[tokimari]

baseで設定すべき内容なのでComponent単位で指定ではなく・・ですよね。
rem/emにする際のrootのfont sizeとかもどこで指定すべきかちょっと悩んでました:thinking:

[herablog]

そうそう、こりはあくまでStorybook内での指定という感じです！共通部分の実装が決まれば取り除いてもいいかもだね。

共通部分に関しては・・・

font-familyなどサイト間で違ってほしくないものは、まとめて共通CSS(ameba-color-palette.cssの上位版? or spindle.base.css or theme-ameba.css)作って読み込んでもらってもいいかなぁと思い中です。

rootのフォントサイズはサイトによって違ってもよさそうなのとすでに今違いそうなので、以下を検討してるけどどうだろかな。

• コンポーネントではem指定しといて必要があれば親の要素で指定してもらう
• カスタムプロパティで上書きできるようにしておく (ただしIE11サポートが厳しいかも, JS使えばなんとか・・)

[tokimari]

spindle.base.css

よさそうです！
themeでもいいですが、全部がテーマみたいたものなので 💭

たしかにcomponentとしてはem指定のがよさそうですね。
親要素で指定するfont-sizeに応じて拡大縮小できればいいので、custom propertiesで上書きできなくても

コンポーネントではem指定しといて必要があれば親の要素で指定してもらう

だけでも十分そうな気もしますが、念のため・・？？
componentの利用箇所によって、component内部の文字サイズの比率を変えられるのも、いかがなものなんだろうと。

[tokimari]

書体指定はokです 🙆‍♀️

[herablog]

フォントサイズに関しては、検討案はORでした(分かりづらく申し訳ｗ)！ので、カスタムプロパティは必要に応じてにしましょう〜。