Pie menu: give it its own surface colours so the disc is actually visible

Reported as "wrong and hard to see", and the cause was a colour source that
had nothing to do with the pie.

The disc was filled with MaterialTheme.colors.secondary. In dark that is
#3A3C42 against a page ground of #313338 - a difference small enough that the
disc read as part of the background. The wedges were then drawn at white
alpha 0.16 on top of that, so they vanished as well. The result was an outline
with labels and no visible body, which is what the screenshot showed.

The pie now carries its own four colours in the theme, alongside the calendar
colours, because "is this visible" is a property of that surface and should
not be inherited from a general-purpose role like secondary:

  dark   ground #313338 -> face #4A4D55 -> wedge #5C6068, line #EDEDEF, ink white
  light  ground #F2F0F0 -> face #FFFFFF -> wedge #C9C6C6, line #3A3436, ink #1A1617

Wedges are now opaque rather than a white overlay, so the three steps (ground,
face, wedge) are guaranteed to differ by construction rather than by luck.

The light values needed a second pass. The first attempt used #E2E0E0 for the
wedge, which on a #F2F0F0 ground was judged too close to separate - the same
failure as the dark case, caught by checking the light theme rather than
assuming the dark fix carried over. #C9C6C6 gives the wedge a clear edge
against both the white face and the grey ground.

Verified in both themes at 3.2x: the disc body is visible, the outer ring is
present, the cross reads as four sections, the labels sit inside their own
wedges in the mid band, and in each case it is unambiguous which label belongs
to which wedge.

2 files changed, 51 insertions, 8 deletions

diff --git a/modules/orgflow-ui/src/commonMain/kotlin/jp/orgflow/web/PieMenu.kt b/modules/orgflow-ui/src/commonMain/kotlin/jp/orgflow/web/PieMenu.kt
index 48728a9..784e8e4 100644
--- a/modules/orgflow-ui/src/commonMain/kotlin/jp/orgflow/web/PieMenu.kt
+++ b/modules/orgflow-ui/src/commonMain/kotlin/jp/orgflow/web/PieMenu.kt
@@ -75,7 +75,12 @@ fun PieMenu(
     diameterDp: Int = 132,
 ) {
     val accent = MaterialTheme.colors.primary
-    val disc = MaterialTheme.colors.secondary
+    // パイの面の色はテーマから取る(WebTheme がダーク/ライト両方の値を
+    // 持つ)。以前は MaterialTheme.colors.secondary を使っていたが、
+    // ダークの secondary は地色とほぼ同じ明るさで、円盤が背景に
+    // 溶けていた(2026-09-27 指摘「おかしいしみにくい」)。
+    val cal = LocalCalendarColors.current
+    val disc = cal.pieFace
     var touched by remember { mutableStateOf(-1) }
     var outward by remember { mutableStateOf(false) }
     var childIndex by remember { mutableStateOf(-1) }
@@ -130,7 +135,7 @@ fun PieMenu(
             val r = w / 2f
             val c = Offset(r, r)
 
-            // 円(地)
+            // 円盤の面(テーマの pieFace)。地色との差が十分にある。
             drawCircle(disc, radius = r, center = c)
 
             // 各項目の扇。中心角 ± (360/n)/2 を占める。
@@ -144,7 +149,10 @@ fun PieMenu(
             for (i in 0 until n) {
                 val isTouched = i == touched
                 drawArc(
-                    color = if (isTouched) accent else Color.White.copy(alpha = 0.16f),
+                    // 触れていない扇は pieWedge(テーマ値)。
+                    // 以前は白の alpha 0.16 で、地色とほぼ同じ面の上では
+                    // 見えなかった。不透明な色にして段差を付ける。
+                    color = if (isTouched) accent else cal.pieWedge,
                     startAngle = angles[i] - sweep / 2f,
                     sweepAngle = sweep,
                     useCenter = true,
@@ -164,7 +172,7 @@ fun PieMenu(
             for (i in 0 until n) {
                 val a = (angles[i] - sweep / 2f) * PI.toFloat() / 180f
                 drawLine(
-                    Color.White.copy(alpha = 0.85f),
+                    cal.pieLine.copy(alpha = 0.85f),
                     c,
                     Offset(c.x + cos(a) * r, c.y + sin(a) * r),
                     2.6f,
@@ -176,7 +184,7 @@ fun PieMenu(
             // 円の縁が地色との淡い差だけで決まっており、円の範囲が
             // 分かりにくかった。外周に白い輪を1本入れて円を閉じる。
             drawCircle(
-                Color.White.copy(alpha = 0.85f),
+                cal.pieLine,
                 radius = r - 1.2f,
                 center = c,
                 style = Stroke(2.4f),
@@ -213,7 +221,7 @@ fun PieMenu(
         }
         Text("W", color = Color.White, fontWeight = FontWeight.Bold)
         // 項目名を円の中に置く。外側に置くとどの扇の名前か分からない。
-        PieInDiscLabels(items, touched)
+        PieInDiscLabels(items, touched, cal.pieInk)
     }
 }
 
@@ -236,7 +244,7 @@ fun PieMenu(
  * 定数で補正できない(§2.35 に記録)。
  */
 @Composable
-private fun PieInDiscLabels(items: List<PieItem>, touched: Int) {
+private fun PieInDiscLabels(items: List<PieItem>, touched: Int, ink: Color) {
     // 4項目のとき、左上/右上/左下/右下 の4スロットに置く。
     // 4以外は数が合わないので出さない(現状 4 のみ運用)。
     if (items.size != 4) return
@@ -282,7 +290,7 @@ private fun PieInDiscLabels(items: List<PieItem>, touched: Int) {
                                 // 白は十分なコントラストがある。
                                 // 触れている扇は主色(ワイン)で塗られるので、
                                 // その上でも白は読める。
-                                color = Color.White,
+                                color = ink,
                                 maxLines = 1,
                             )
                         }
diff --git a/modules/orgflow-ui/src/commonMain/kotlin/jp/orgflow/web/WebTheme.kt b/modules/orgflow-ui/src/commonMain/kotlin/jp/orgflow/web/WebTheme.kt
index 91f0e15..8f68cab 100644
--- a/modules/orgflow-ui/src/commonMain/kotlin/jp/orgflow/web/WebTheme.kt
+++ b/modules/orgflow-ui/src/commonMain/kotlin/jp/orgflow/web/WebTheme.kt
@@ -72,6 +72,19 @@ data class CalendarColors(
     val onHeader: Color,    // 見出し帯の上の文字
     val onToday: Color,     // 今日のセルの上の文字
     val barColors: List<Color>, // 予定の色(パイ4象限+象限なし)
+
+    // パイメニューの面(2026-09-27 追加)。
+    //
+    // なぜ専用の色が要るか: 前版は円盤に MaterialTheme.colors.secondary を
+    // 使っていた。ダークの secondary は DiscordHigh #3A3C42 で、
+    // 地色 #313338 との差がわずかしかない。そのため円盤が背景に溶け、
+    // 扇の塗り(alpha 0.16)も合わせて消えていた(2026-09-27 指摘
+    // 「おかしいしみにくい」)。面と地の差は「見えるかどうか」を
+    // 決めるので、テーマ側で明示的に持つ。
+    val pieFace: Color,     // 円盤の面
+    val pieWedge: Color,    // 扇(触れていない)
+    val pieLine: Color,     // 区切り線と外枠
+    val pieInk: Color,      // 扇の上の文字
 )
 
 /**
@@ -148,6 +161,13 @@ fun WebTheme(
                         onHeader = White,
                         onToday = White,
                         barColors = EventPalette,
+                        // 地 #313338 に対し、面 #4A4D55 / 扇 #5C6068 と
+                        // 段階を付ける。secondary #3A3C42 では地との差が
+                        // 足りず円盤が消えていた(2026-09-27 の指摘)。
+                        pieFace = Color(0xFF4A4D55),
+                        pieWedge = Color(0xFF5C6068),
+                        pieLine = Color(0xFFEDEDEF),
+                        pieInk = White,
                     )
                 } else {
                     CalendarColors(
@@ -159,6 +179,16 @@ fun WebTheme(
                         onHeader = Color(0xFF1A1617),
                         onToday = White,
                         barColors = EventPalette,
+                        // ライトでは地 #F2F0F0 に対し、面を白・扇を
+                        // はっきりした灰にして段階を付ける。
+                        // 最初は扇を #E2E0E0 にしたが、地との差が
+                        // 小さすぎて「境界が分からない」と判定された。
+                        // 地とのコントラストを確保できる値にする
+                        // (白い面 #FFFFFF と扇 #C9C6C6 の組)。
+                        pieFace = Color(0xFFFFFFFF),
+                        pieWedge = Color(0xFFC9C6C6),
+                        pieLine = Color(0xFF3A3436),
+                        pieInk = Color(0xFF1A1617),
                     )
                 },
                 content = content,
@@ -169,6 +199,7 @@ fun WebTheme(
 
 /** カレンダーの色。WebTheme の内側でのみ有効。 */
 val LocalCalendarColors = staticCompositionLocalOf {
+    // 既定はダーク(WebTheme の既定 dark = true に合わせる)。
     CalendarColors(
         ground = DiscordGround,
         cell = CalendarDarkCell,
@@ -178,5 +209,9 @@ val LocalCalendarColors = staticCompositionLocalOf {
         onHeader = White,
         onToday = White,
         barColors = EventPalette,
+        pieFace = Color(0xFF4A4D55),
+        pieWedge = Color(0xFF5C6068),
+        pieLine = Color(0xFFEDEDEF),
+        pieInk = White,
     )
 }