新しいコンポーザーのスタイリングで背景との区別がつきにくくなっています

意図的な変更かどうかわかりませんが、テキストエリアにフォーカスがない場合にコンポーザーの境界線が見えにくくなりました。理論上は些細な変更ですが、コンポーザーが背景に溶け込みすぎてしまい、フォーカス可能な部分とそうでない部分の区別がつきにくくなっています。

これはモバイルとデスクトップの両方で発生します。以下は、モバイルでの違いを示す写真です。

以前の境界線のスタイル:

新しい境界線のスタイル:

「いいね!」 4

これに同意します。また、デフォルトのライトスキームでは、textareaの境界線が上のフィールドの境界線と一致しなくなったことにも気づきました。

そして、より小さな問題ですが、送信ボタンがソフトウェアキーボードに接触しています。理想的には、そこに小さなマージンが必要です。

「いいね!」 5

変更は意図的なものです。テキストをより目立たせ、二次UI要素をもう少しうまく馴染ませることを目的としていました。

アイデアとしては、ボタンや短い入力要素に占有されていないコンポーザー内のほぼすべてのスペースがテキストエリアであるということです。または、デフォルトのデスクトップコンポーザーの場合、書き込み用とプレビュー用の2つの列に分割されているため、わずかな視覚的な区切りでも十分な場合があります。

いずれにせよ、この変更にしばらく時間をかけ、順応期間の後で色を調整したいと思います。元の境界線の色と現在の色のちょうど中間を取るかもしれません。様子を見ましょう!

フィールドのいくつかは境界線の色が調整されていませんでした。フォローアップPRで修正しました。iOSのマージンも同様です。

「いいね!」 2

境界線の色を変更することで、具体的にどのように目立たせることができるのでしょうか?

しかし、コンポーザー自体ではないUIの周囲にはまだ多くの要素があり、クリックすることもできません。そして今、周囲の部分がどこで終わり、コンポーザーがどこから始まるのかが分かりにくくなっています。

正直なところ、今は境界線がほとんどコントラストを持たないため、浮いている要素(つまり、コンポーザーとその上のすべてのボタン)がたくさんあるように感じます。イタリックボタンとリンクボタンの間の区切り線さえ、ほとんど見えないため、ほぼ無意味になっています。

はい、明らかに私はこの変更の意図を理解していませんが、順応期間を設けることについては確かに理解できます。ただ、説明が難しい理由で、この変更が特に不快だと感じています。

開発者コンソールを見ていると、境界線が --primary-medium (#909090) から --primary-low (#313131) に変わったことがわかります。これはかなり劇的な変更です。おっしゃっていた中間を取るために #616161 で試してみたところ、それは本当に大きな改善でした。元の #909090 ほど注意を引くことなく、非常に必要なコントラストを提供しています。さまざまな値を試した結果、コントラストと圧倒的でないことのバランスが非常に良いのは #515151 のようなものでもあると思います。しばらく経った後に、これを検討していただけると幸いです。

(開発者コンソールを見ると、--primary-low-mid#7a7a7a にあることがわかりました。#515151 用に --primary-low-not-quite-mid を追加する時期が来たようですね。:laughing:

「いいね!」 1

そうですね :sweat_smile: 元々ここで境界線の色を調整していたときは、もう少しコントラストの高い色を選んでいましたが、最終的には lowlow-mid のどちらかを選ぶ必要がありました。結局、新しい変数が必要になるかもしれません。

しかし、まず既存の2つがどこで使用されているかを確認し、これらの色を調整する必要があるか、またはこれらの場所のいずれかに新しい変数が役立つかどうかを確認するのが良いでしょう。

そして、新しい色を導入する場合、例えば CSS フレームワークの一部(例: tailwind)のように、数値ベースの新しい変数命名規則を検討する価値があります。例えば --primary-600 のようなものです。

cc: @awesomerobot :smiley: カラーパレットの拡張について何か考えはありますか?

「いいね!」 3

境界線の色は修正されたようですが(トピックタイトルや送信ボタンと同じ青色)、送信(返信)ボタンの下部の余白は修正されていません。

投稿を編集して、もう一度スクリーンショットをアップロードしていただけますか? :slightly_smiling_face:

「いいね!」 1

修正がまだマージされていないため、マージンがありません。:smiley:

「いいね!」 2

できれば避けたいです!ミッドローは少し調整できるかもしれませんか?もし目標が約#616161なら、#7a7a7aはかなり近いです。

はい、ミッドローは最初から奇妙なものでした。古い変数を再マッピングする限り、名前の変更には反対しません。

「いいね!」 2

それはおそらく理にかなっているでしょう。現在、low-mid#7a7a7a)はmedium#909090)にかなり近いので、いくらか無意味に感じられます。それを約#616161に移動すると、low#313131)とmedium#909090)の間に良いギャップが埋まり、その中間あたりに配置されます。

「いいね!」 1

これについて、何か変更が予定されているか確認したく、ご連絡いたしました。