コンテンツにスキップ

ADR-0073: コードを動かす画面を、地の上に角の丸い紙の面を重ねる見た目にし、面の角を 6〜14px で丸める

Status

承認

Context

コードを動かす画面の、ペインの区切りと角の丸めを決め直す必要がある。

組 ライト ダーク
地と面（surface-ground、surface-pane） 1.23:1（sumi-100、sumi-0） 1.10:1（sumi-950、sumi-800）
地とエディタの背景（code-surface） 1.10:1（sumi-75） 1.07:1（sumi-1000、地より暗い）
面と今の hover の面（surface-subtle） 1.08:1（sumi-50） 1.00:1（どちらも sumi-800）
面と sumi-750 対象外 1.16:1
フォーカスの輪と面 17.25:1 14.86:1

Decision

コードを動かす画面（プレイグラウンドの Node、SQL、Go のツールのページと、記事に埋め込んだ実行環境）だけ、ペインを地の上に重ねた紙の面にする。

  • 面と地
    • セマンティックトークンに、地の surface-ground と、ペインの紙の面の surface-pane を足す。ライトは地を sumi-100、面を sumi-0 にする。ダークは地を sumi-950、面を sumi-800 にする。エディタと端末の背景（code-surface）は変えない。
    • 地の出し方は、利用者が承認した W2 の画像のとおりにする。
      • 地は、ツールのページの main に塗る。
      • ページのヘッダは地の上に置き、面を塗らない。
      • PC の配置では、画面の縁とペインの間を 6px 空ける。
      • 狭い配置でも、ツールのページでは地を出す。
    • ペインの中で surface を直に塗っている面（ToolPane の面、SQL の結果の欄）は、surface-pane に替える。
    • ファイルの木の名前の欄（1px の枠を持つ欄）の背景は、surface のままにする。欄は枠で示し、背景の色を変える理由が無いためである。
    • ペインの中で scroll-fade-end を使う枠には、--fd-scroll-fade-bg に surface-pane を渡すユーティリティを並べて付ける。scroll-fade-code が code-surface の色を渡すのと同じ方法である。scroll-fade-end のデフォルトの色は、記事の表と Table が使うので変えない。
    • ペインの四方の枠と、ペインの間の仕切りの罫を引かない。面と地の濃さの差で区切る。
    • ハイコントラストのとき（forced-colors: active）だけ、ペインの面に 1px の枠を引く。面の塗りが消え、ペインの区切りが見えなくなるためである。
    • ペインの中の罫は、タブの帯の下の罫だけにする。見出しの帯の下、行番号の縦、エディタの下の案内の帯、プレビューの URL の帯の下の罫を引かない。
    • 面の上の hover の面と選んだ行の面の色として、セマンティックトークン surface-pane-subtle を足す。
      • 値は、ライトを sumi-50、ダークを sumi-750 にする。ダークの surface-subtle は面と同じ sumi-800 で、面の上の hover が見えないためである。
      • surface-subtle の値は、画面の外に影響するので変えない。
      • packages/ui のコンポーネントは、density="compact" か size="XS" のときに、surface-subtle の代わりに surface-pane-subtle を使う。対象は、hover の面、選んだ行の面、boxed の TextField の面、Switch と Checkbox の hover、neutral のラベルの面である。
      • ダークの sumi-750 は surface-disabled と同じ値である。hover の面と無効の面は、面の色では見分けられないので、文字の色（text-disabled）で見分ける。
  • 角
    • ペインの面を 10px、ペインの中の操作できる要素を 6px で丸める。下のタブの帯、左の縦のタブの帯、ファイルのドロワーは 14px で丸める。紙の面の重なりを、角の丸めで見分けるためである。
    • テーマ変数に、rounded-pane（10px）、rounded-sheet（14px）、rounded-control-compact（6px）を足す。rounded-control（2px）の値は変えない。
    • rounded-control-compact は、packages/ui のコンポーネントが density="compact" のとき（Button は size="XS" のとき）に、rounded-control の代わりに使う。対象は、Button、IconButton、boxed の TextField、TreeView の行、Disclosure の要約、タブの閉じるボタン、ActionMenu の開くボタン、Switch、Checkbox である。値を上書きせずに別の名前にし、既にある density と size の props で切り替えると、使う所をコードで追えるためである。ADR-0062 の compact のトークンと同じ分け方である。
    • Dialog、ActionMenu のメニューの面、エディタの補完の一覧は、重なる面なので 2px のままにする。ページのヘッダの要素も 2px のままにする。
    • ADR-0028 が丸めないと決めた要素（Tabs のタブ、下罫だけの検索の欄、メニューの項目、Notice、StatusBadge、Table、コードブロック）は、今のとおり丸めない。
    • フォーカスの輪は、要素の角の丸めに沿わせる。
  • 重なる面
    • 下のタブの帯と左の縦のタブの帯は、ペインと同じ surface-pane の面にし、枠と影を付けない。ペインに重ならずに並ぶ面で、ADR-0028 の重なる面に当たらないためである。
    • ファイルのドロワーは、ペインに重なる面として、surface-raised の面と、右の縁の 1px の枠（border-field）で示し、影を付けない。利用者が承認した W2 の画像のとおりである。
      • ライトとダークのどちらでも、surface-raised は surface-pane と同じ色である。
      • ドロワーを開いている間は、ドロワーの外の画面を薄い墨の面で覆う。この覆いと右の縁の枠で、ドロワーとペインを見分ける。
    • 画面の中の Dialog、ActionMenu、エディタの補完の一覧は、ADR-0028 の重なる面の組（surface-raised、1px の枠、影）のままにする。
  • 使う範囲
    • surface-ground、surface-pane、surface-pane-subtle、rounded-pane、rounded-sheet、rounded-control-compact は、コードを動かす画面の外で使わない。
    • 上の 6 つの名前のユーティリティを、コードを動かす画面のコンポーネントの外で使うと、check:utilities が失敗する。
      • 対象は、apps/web/src の全体と、packages/ui/src のうちコードを動かす画面のコンポーネントを除いた部分である。
      • 使ってよいディレクトリは、チェックのスクリプトに列挙する。
      • この規則の原則の ID を、packages/ui/DESIGN.md に足す。
  • 間隔
    • マウスで押す端末の PC の配置では、ペインの間を 8px にする。面の間に地が見えないと、紙を重ねたように見えないためである。
    • 分割の幅を変える SplitPane の仕切りは、ペインの間の余白に置く。
      • 線はふだん出さず、マウスを載せたときに 2px の線を出す。
      • 仕切りの押せる幅は ADR-0062 が、フォーカスの輪は ADR-0066 が決める。
    • 触る端末（pointer: coarse）で PC の配置になるとき（横に向けたタブレット）は、ペインの間を 44px にする。触る端末の仕切りの押せる幅（44px）にそろえるためである。
  • 記事の埋め込み
    • 記事の枠の中で、ペインを 1 つずつ出す配置では、地を出さず、ペインの面を枠いっぱいに置き、角を丸めない。記事の枠と面の縁が、二重の線に見えないようにするためである。枠の上のタブは、ペインの面の上に置き、タブの帯の下の罫だけを引く。
    • 高さが 500px 未満の iframe で左の縦のタブにするときは、縦のタブの帯の右に罫を 1 本引き、ペインと分ける。地を出さないと、帯とペインが同じ色の面で続くためである。
    • 記事の枠の中でペインを並べる配置の、地と角の出し方は、記事に埋め込む iframe の大きさが決まるまで決めない。記事の段の幅（640px）では、ペインを並べる配置にならない。

承認の条件

  • ADR-0062 と ADR-0072 を先に承認していること。
  • 実装した画面を、ライトとダーク、PC と 375px で撮っていること。撮った画像で、面の縁、hover の面、エディタの背景と surface-ground の境が見えることを、利用者が確認していること。撮る組には、ダークのドロワー、記事の埋め込み、触る端末の PC の配置（ペインの間 44px）を含める。
  • 撮った画像で、仕切りの hover の 2px の線と、8px の幅の中の内側の輪が見えること。
  • ペインの中に、名前の欄のほかに bg-surface を直に塗る所が残っていないこと。
  • ダークで撮った画像で、利用者が hover の面と無効の面を見分けられること。
  • コントラストのチェックに、surface-ground、surface-pane、surface-pane-subtle の上の文字、border-field、フォーカスの輪の組が入っていること。その組で、文字は 4.5:1 以上、枠と輪は 3:1 以上であること。
  • Chrome、Firefox、WebKit で撮った画像で、フォーカスの輪が 6px と 10px の角に沿って引かれていること。
  • ハイコントラストのとき、ペインの区切りの 1px の枠が出ること。

Considered Options

選択肢 強み 弱み
採用: 地の上に角の丸い紙の面を重ね、ペインの間を 8px にする（W2） 直角の線の数が最も減る。生成りの紙を重ねる形が、和紙と墨のサイトの考え方に合う 角丸の名前が 3 つ増える。仕切りの押せる幅が 2.5.8 に届かない
ペインの四方の枠を外し、帯の罫と余白だけで区切る（W1） ADR-0028 の角を変えない 帯の罫は残り、利用者が挙げた角ばった見た目が残る
VS Code のように、ペインの間を空けず 1px の罫で仕切る 画面を最も広く使える。仕切りの押せる領域を罫の上に重ねられる 罫で区切る今の見た目に近く、角ばった見た目が残る
今のまま（W0） 変更が無い ペインの間が約 52px 空き、枠と罫が重なる

Consequences

Positive

  • PC の画面で、ペインの間が約 52px から 8px になり、エディタとプレビューが広くなる。
  • ペインの区切りの罫が減り、ペインの中の内容が目に入りやすくなる見込みである。

Negative

  • コードを動かす画面と、サイトのほかの画面で、操作できる要素の角の丸めが違う。
  • 地と面のセマンティックトークンが 3 つ、角丸のテーマ変数が 3 つ増える。
  • 記事の埋め込みと、ツールのページで、面の角と地の出し方が違う。