From 2f8b875c968bae2356d35c2985b6f5b42ddf17d9 Mon Sep 17 00:00:00 2001 From: Codex Luna <268560960+lipluscodex@users.noreply.github.com> Date: Mon, 12 Oct 2026 00:34:03 +0900 Subject: [PATCH] fix(account): soften participant display colors --- docs/2-screen.md | 12 ++++++------ src/main.ts | 10 +++++----- src/styles.css | 28 ++++++++++++---------------- 3 files changed, 23 insertions(+), 27 deletions(-) diff --git a/docs/2-screen.md b/docs/2-screen.md index 36eb195..9568d9e 100644 --- a/docs/2-screen.md +++ b/docs/2-screen.md @@ -75,7 +75,7 @@ **送信だけは塗る。** `送信` は 塗ったボタンとして残す。画面が前に出す操作を一つに絞るためである。他のボタンはすべてカーソルを待ってから現れる。 -**送信の地はアプリのアイコンの青である（#258）。** 地はライトとダークのどちらでも `#1e9be8`——タスクバーのアイコン（`src-tauri/app-icon.svg`、#246）の青——であり、線画は白である。Master「さらに細かいんだけど、pullceptのアイコンの青色に。送信ボタンも合わせることって可能？」（2026-10-03）。それまでは `--accent`（ライト `#185fa5`、ダーク `#7aa7d8`）で塗り、線画は `--bg` だった。色は専用のトークン（`--send-ground` / `--send-ink`）に置き、`--accent` は変えない——参加者ごとの色の明度と彩度は `--accent` から測っている（下記「参加者ごとの色」）。カーソルの下では地を黒へ 15% 寄せ、ライトとダークのどちらでも少し濃くなる。それまでは `--fg` へ寄せており、ダークでは明るくなっていた——地が両方の面で同じ一色になったため、寄せる先も一つに固定した。 +**送信の地はアプリのアイコンの青である（#258）。** 地はライトとダークのどちらでも `#1e9be8`——タスクバーのアイコン（`src-tauri/app-icon.svg`、#246）の青——であり、線画は白である。Master「さらに細かいんだけど、pullceptのアイコンの青色に。送信ボタンも合わせることって可能？」（2026-10-03）。それまでは `--accent`（ライト `#185fa5`、ダーク `#7aa7d8`）で塗り、線画は `--bg` だった。色は専用のトークン（`--send-ground` / `--send-ink`）に置き、`--accent` は変えない——参加者ごとの色は専用の明度・彩度トークンで描く（下記「参加者ごとの色」）。カーソルの下では地を黒へ 15% 寄せ、ライトとダークのどちらでも少し濃くなる。それまでは `--fg` へ寄せており、ダークでは明るくなっていた——地が両方の面で同じ一色になったため、寄せる先も一つに固定した。 **カーソルの塗りは地の上に重ねる影であって、色ではない。** カーソルの塗り `--hover` は半透明の黒（ダークでは白）であり、`:root` とダークの両方に定義する。ボタンが `--bg` の上にあっても `--surface` の上にあっても、同じだけ持ち上がる。旧規則（下記）が枠で守っていた「操作はどの面に載っていても一つの形である」は、この形で保たれる。選択の塗り `--selected` も #235 までは同じ作りだったが、ライトでは Claude デスクトップのサイドバーの選ばれた行の色 `#edece8` になった（下記「ライトの色」）。ライトの二つの地はどちらもほぼ白であり、一つの色でも両方の上で同じに読める。ダークは半透明の白のままである。 @@ -394,12 +394,12 @@ Master「コメント書き込み欄の上にある下までスクロールボ **宛先の候補は増えていない。** オフラインの行は部屋の名簿に居ないため、宛先には出ない。届かない相手を名指せる状態は、宛先を名簿から引くという判断（#43）の理由に反する。 -**参加者ごとの色。** 発言の丸印の色（#225 までは縁の色線）と名簿の丸印の色（#253 までは点）は同じであり、参加者ごとに異なる。明度と彩度は `--accent` の実測値に固定し、色相だけを振る。 +**参加者ごとの色。** 発言の丸印の色（#225 までは縁の色線）と名簿の丸印の色（#253 までは点）は同じであり、参加者ごとに異なる。宣言色と名前からの導出色は、テーマごとの共通の明度・彩度（`--speaker-l` / `--speaker-c`）で色相だけを振る。#395 で accent の実測値より少し明るく、彩度を抑えた淡い色へ調整した。アカウントの一覧・チャット・宛先など、同じ話し手色を使う表示へ共通して反映する。宣言の無い本人は引き続き `--accent` で描く。 | | 明度 | 彩度 | |---|---|---| -| ライト（`#185fa5`。#235 までは `#3a6ea5` の 0.528 / 0.104） | 0.481 | 0.131 | -| ダーク（`#7aa7d8`） | 0.715 | 0.087 | +| ライト | 0.54 | 0.09 | +| ダーク | 0.76 | 0.065 | 色相の出所は 3 段の梯子であり、上から順に決まる。 @@ -719,7 +719,7 @@ DOM の描画は床として残す。WebGL が使えない環境では読み込 - **次の一手** — 現在の実装に参加者パネルと宛先を足した、実装可能な範囲。両方とも実装済みである。この 1 枚と実装の差は、操作ボタンのうち未実装のリサイズとミュート（端末と終了は実装済みで、参加者のリストの各行のメニューに載っている）、宛先の見た目（削除可能なチップ）、そして #53 / #57 / #59 / #62 で入ったアカウントまわり（種別ごとのグループ、行の開始・終了・編集、モーダル、ランチャ行の廃止）である。宛先は本文に `@名前` と書き、送ると部屋がそれを宛先へ移して本文から消す形であり（#204 / #206）、チップの形の差は追っていない。アカウントの側はキャンバスが実装より大きく遅れており、差は #46 で追う。 - **全体像** — ルーム一覧 / ダイレクト / 参加者・セッション状態パネル -色と寸法は `src/styles.css` の実値をそのまま使っている（`--accent: #3a6ea5` / `--surface: #f4f4f7` / 角丸 4・6px / system-ui + Yu Gothic UI）。参加者ごとの色は accent と同じ彩度・明度で色相だけ変えたもの。絵と実装が同じトークンの上に乗るため、キャンバスの値をそのまま実装へ移せる。 +色と寸法は `src/styles.css` の実値をそのまま使っている（`--accent: #3a6ea5` / `--surface: #f4f4f7` / 角丸 4・6px / system-ui + Yu Gothic UI）。当時の参加者ごとの色は accent と同じ彩度・明度で色相だけ変えたもの（現行の淡色化は上記「参加者ごとの色」）。絵と実装が同じトークンの上に乗るため、キャンバスの値をそのまま実装へ移せる。 **この UI は本番向けではない。** 段階的に作り、機能と並行して改善する前提の暫定案である。確定仕様として扱わない。 @@ -728,7 +728,7 @@ DOM の描画は床として残す。WebGL が使えない環境では読み込 - 会話面はメッセージ単位を保つ。端末は診断面側に置き、会話面には置かない。 - 参加者パネルを持つ（実装済み。上記「参加者パネル」）。セッションの接続方法・起動コマンド・作業ディレクトリ・開始時刻を出す。操作のうち端末と終了は実装済みで、アカウントごとの行に載っている。ミュートは未実装であり、キャンバス側にのみある。 - 発言に宛先を持たせる（実装済み。本文に参加者の `@名前` を書く。入力欄で `@` を打てば候補から選べる。複数可。書かなければ全体宛。#204 / #206）。 -- 参加者ごとの色（実装済み。accent と同じ明度・彩度で色相のみ）。色相は宣言でき、宣言が導出に優先する（上記「参加者パネル」の梯子）。 +- 参加者ごとの色（実装済み。現行の宣言色・導出色はテーマごとの共通の明度・彩度で色相のみ）。色相は宣言でき、宣言が導出に優先する（上記「参加者パネル」の梯子）。 - 名前と色は「この部屋での自分は誰か」の宣言である（実装済み。人間もセッションも、アカウントの属性として）。 - アカウントは起動していなくても存在する（実装済み。「[アカウント](3-accounts.md#アカウント)」）。同一性は id であり、名前は表示と宛先のための属性である。 - **人間はアカウントである**（実装済み。種別 `admin`。#53 が保留にし、#59 が決めた。#192 で `user` から改名）。画面の本人も他の参加者と同じ行を持ち、名簿と宛先の出所は一本化された。人間の同一性を config のエントリとして持つことは受け入れる——本人であることは `localStorage` に残り、config に入るのは名前と色だけである。 diff --git a/src/main.ts b/src/main.ts index d41afd0..a324ab8 100644 --- a/src/main.ts +++ b/src/main.ts @@ -63,9 +63,9 @@ const LOCAL_KEY = "pullcept.local-account"; /** * The hues a participant can declare. * - * Hue only. Lightness and chroma stay the accent's in whichever theme is - * showing, so a declared colour sits at the same weight on the page as every - * other participant's and stays readable in both themes (#43). Offering a full + * Hue only. Lightness and chroma use the theme's shared display tokens, so + * declared colours share one weight on the page. The softer pair (#395) is + * independent of accent; the hue-only contract stays (#43). Offering a full * colour picker would ask for two values and silently discard them. * * A short list rather than a continuous dial: what this has to buy is that any @@ -616,8 +616,8 @@ function hueFor(name: string): number { /** * The colour a participant is drawn in. * - * Lightness and chroma are the accent's, in whichever theme is showing; only - * the hue turns. One ladder, in this order: + * Declared and derived colours use the theme's shared display lightness and + * chroma; only hue turns. Undeclared oneself keeps accent. One ladder: * * declared > oneself's accent > derived from the name * diff --git a/src/styles.css b/src/styles.css index 2c329c5..04e47a5 100644 --- a/src/styles.css +++ b/src/styles.css @@ -50,8 +50,8 @@ --composer-line: rgb(0 0 0 / 0.2); /* 送信's ground and its drawing (#258): the blue of the app's icon (src-tauri/app-icon.svg), in light and dark alike, so it is not - redefined below. Not `--accent`, which the participants' colours are - measured from (`--speaker-l` / `--speaker-c`). */ + redefined below. Separate from `--accent` and the participants' + colour tokens (`--speaker-l` / `--speaker-c`). */ --send-ground: #1e9be8; --send-ink: #ffffff; /* How far a participant's colour is carried into the circle and into one's @@ -64,15 +64,12 @@ --avatar-ink-toward: #000000; --mine-ground: 9%; --mine-edge: 35%; - /* One participant is told from another by hue alone: every participant - colour is the accent's own lightness and chroma with the hue turned. The - pair below is #185fa5 measured in oklch, not a value chosen next to it, so - a participant sits at the same weight on the page as the accent does. - This pair is what a participant may not choose — declaring a colour - declares a hue, and these two hold whatever hue lands on them readable in - this theme. */ - --speaker-l: 0.481; - --speaker-c: 0.131; + /* Declared and derived participant colours share this theme's lightness + and chroma; only hue varies. Slightly lighter and less saturated than + the accent's measured pair (#395), for softer display colours. + A declaration chooses only hue. An undeclared own colour stays accent. */ + --speaker-l: 0.54; + --speaker-c: 0.09; /* The shadow under a control that floats over the room's lines — 最新の発言へ (#243) — so it reads as above them and not as one of them. Deeper in dark, where a shadow on a dark ground barely shows. */ @@ -152,11 +149,10 @@ --avatar-ink: 100%; --mine-ground: 14%; --mine-edge: 14%; - /* #7aa7d8 measured the same way. The dark accent is lighter and slightly - less saturated, so carrying the light pair over here would leave every - participant but oneself too dark to read against #17171a. */ - --speaker-l: 0.715; - --speaker-c: 0.087; + /* The softer dark pair (#395) stays lighter than the light theme's + colours, for the dark ground. It is independent of the accent. */ + --speaker-l: 0.76; + --speaker-c: 0.065; --float-shadow: 0 2px 8px rgb(0 0 0 / 0.5); } }