Cleaning up our font system

貢献 UX
26

フォントサイズの相対的な変化に問題がなければ、:root 要素で異なるフォントサイズを設定するだけで、em が自動的にそれに合わせてスケーリングされます。

「いいね！」 3
27

何か見落としているのでしょうか、それとも単にテーマやプラグインに誤用を招くリスクを与えたくないという事情でしょうか？これらすべての変数を !default で宣言する（https://github.com/discourse/discourse/pull/12741）のは、これらをオーバーライドできるようにするための簡単な方法のように思えます。

「いいね！」 2
28

以前は機能しなかったのは、コアスタイルがテーマによる上書きよりも先にコンパイルされていたからではないでしょうか？少なくとも色の面ではそうでした。SCSS のコンパイル方法についていくつか変更があったと聞いていますので、もしかしたらその問題はもう存在しないかもしれません。

また、!default では不十分な場合、色の場合と同様にこれらを CSS カスタムプロパティに切り替えることも可能です。

「いいね！」 3
29

Derp、その通りですね。カスタムプロパティが結局は正解のようです！:flexed_biceps:

「いいね！」 4
30

ご確認用のリファクタリング案です。これにより、任意のスタイルシートが変数を使用または更新できるようになる可能性があります：

少し理解が深まりました。現在、ここで定義されているすべての変数は、テーマやプラグインから読み取りは可能ですが、新しい値を書き込むことはできません。これは、各スタイルシートが個別にコンパイルされるためです。CSS カスタムプロパティを追加することで、テーマやプラグインが変数を動的に上書きできるようになり、依存するすべてのスタイルシートが新しい値を取得できるようになります。:slight_smile:

「いいね！」 3
31

@bekircem さん、上記のマージが完了しましたので、今度は (クライアント側の) CSS プロパティを再定義することで、ベースのフォント変数をオーバーライドするテーマを追加できるようになりました：

// これらの値を使用する必要はありませんが、イメージはつかめるはずです：
:root {
    --font-down-1: 0.8em;
    --font-0: 2em;
    --font-up-1: 3em;
    --font-up-2: 4em;
}
「いいね！」 3