From 1661f01a226afcf14ba665c744a682b5d57babec Mon Sep 17 00:00:00 2001 From: chethan616 Date: Mon, 12 Oct 2026 15:02:22 +0530 Subject: [PATCH] Word and sheet chrome chips are clear glass like the buttons beside them The Word editor's file-name pill, its style/font dropdowns and size stepper, and the page capsule painted a 35% frost, so over a picture they read as grey slabs next to the clear back, search, moon, print and PDF circles. They are clear glass now, as the PDF viewer's page pill already was, and the spreadsheet's title pill too. An open dropdown menu keeps a frost of its own so its rows stay legible. --- DESIGN.md | 6 ++++++ .../clearpdf/ui/components/LiquidGlassDropdown.kt | 9 ++++++--- .../chethan616/clearpdf/ui/screen/DocxEditorScreen.kt | 8 +++++--- .../clearpdf/ui/screen/SpreadsheetViewerScreen.kt | 4 +++- 4 files changed, 20 insertions(+), 7 deletions(-) diff --git a/DESIGN.md b/DESIGN.md index bfebc1f..a98dd18 100644 --- a/DESIGN.md +++ b/DESIGN.md @@ -168,6 +168,12 @@ by hand must do the same. `settle`, `fade` and layout springs never bounce and i - Word editor and spreadsheet: the screen provides `LocalIsDarkMode = reader mode` to everything inside it and draws its own desk (light grey `#E3E4E9`, near-black `#0D0D0F`) behind the pages, so every glass control, dropdown menu, dock, dialog and the status-bar icons follow the paper. +- Chrome that sits on the document beside the clear glass circles (title pill, page capsule, + ribbon dropdown triggers and steppers) is **clear glass too**: `surfaceColor = Color.Transparent` + / `viewerGlass(backdrop, Color.Transparent)`, never a `chipGlass` frost. A frost reads as a grey + slab over pictures and makes the chip look like a different material from the buttons beside it. + An open dropdown menu keeps its frost (`LiquidGlassDropdown` falls back to the theme frost when + its trigger is clear), because rows of text need it. - The find bar is the shared `PdfSearchBar`: it samples the live page layer (`contentBackdrop` / `screenBackdrop.content`), clear surface, adaptive ink. Never give it only the wallpaper. - **Night colours** come from `NightPaper` (Gander's matrix: invert + 180 degree hue turn), so a blue diff --git a/app/src/main/java/com/chethan616/clearpdf/ui/components/LiquidGlassDropdown.kt b/app/src/main/java/com/chethan616/clearpdf/ui/components/LiquidGlassDropdown.kt index 66e5a1e..01ec5db 100644 --- a/app/src/main/java/com/chethan616/clearpdf/ui/components/LiquidGlassDropdown.kt +++ b/app/src/main/java/com/chethan616/clearpdf/ui/components/LiquidGlassDropdown.kt @@ -129,8 +129,11 @@ fun LiquidGlassDropdown( val isDark = LocalIsDarkMode.current val fg = if (contentColor.isSpecified) contentColor else LiquidGlassColors.text(isDark) val fgSoft = fg.copy(alpha = 0.62f) - val field = if (triggerSurface.isSpecified) triggerSurface - else if (isDark) Color(0xFF111318).copy(0.74f) else Color.White.copy(0.55f) + val themeField = if (isDark) Color(0xFF111318).copy(0.74f) else Color.White.copy(0.55f) + val field = if (triggerSurface.isSpecified) triggerSurface else themeField + // A clear trigger (one sitting among clear glass buttons) still opens a frosted menu: rows of + // text need it to stay legible over whatever page or picture the menu drops onto. + val menuField = if (field.alpha > 0f) field else themeField val haptics = LocalHapticFeedback.current var open by remember { mutableStateOf(false) } var anchor by remember { mutableStateOf(Rect.Zero) } @@ -226,7 +229,7 @@ fun LiquidGlassDropdown( // during the fade and snap it in at the end (the flicker). compositingStrategy = CompositingStrategy.ModulateAlpha } - .liquidGlassPanel(backdrop, uiSensor, field) + .liquidGlassPanel(backdrop, uiSensor, menuField) .padding(4.dp), verticalArrangement = Arrangement.spacedBy(2.dp) ) { diff --git a/app/src/main/java/com/chethan616/clearpdf/ui/screen/DocxEditorScreen.kt b/app/src/main/java/com/chethan616/clearpdf/ui/screen/DocxEditorScreen.kt index be3ab49..859fefa 100644 --- a/app/src/main/java/com/chethan616/clearpdf/ui/screen/DocxEditorScreen.kt +++ b/app/src/main/java/com/chethan616/clearpdf/ui/screen/DocxEditorScreen.kt @@ -202,7 +202,6 @@ import com.chethan616.clearpdf.ui.components.NightPaper import com.chethan616.clearpdf.ui.components.OfficeStandardColors import com.chethan616.clearpdf.ui.components.OfficeThemeColors import com.chethan616.clearpdf.ui.components.UnsavedChangesDialog -import com.chethan616.clearpdf.ui.components.chipGlass import com.chethan616.clearpdf.ui.components.liquidRowClick import com.chethan616.clearpdf.ui.components.rememberScreenBackdrop import com.chethan616.clearpdf.ui.components.viewerGlass @@ -786,8 +785,11 @@ private fun DocxEditorContent( val screenBackdrop = rememberScreenBackdrop(backdrop) val statusTop = WindowInsets.statusBars.asPaddingValues().calculateTopPadding() val ribbonHeight = 52.dp - // Clear glass like the PDF viewer's chrome; the tint and ink follow the paper (see above). - val chipTint = chipGlass(onLight = !paperDark) + // Clear glass, exactly like the header and reading circles beside it and the PDF viewer's page + // pill: no frost, so the title pill, the ribbon's style/font/size controls and the page capsule + // refract the page the way the buttons do, and every Liquid Glass setting reads the same on all + // of them. A frost here made them grey slabs over pictures. The ink follows the paper (see above). + val chipTint = Color.Transparent Box( Modifier diff --git a/app/src/main/java/com/chethan616/clearpdf/ui/screen/SpreadsheetViewerScreen.kt b/app/src/main/java/com/chethan616/clearpdf/ui/screen/SpreadsheetViewerScreen.kt index fb6f19c..0e8691b 100644 --- a/app/src/main/java/com/chethan616/clearpdf/ui/screen/SpreadsheetViewerScreen.kt +++ b/app/src/main/java/com/chethan616/clearpdf/ui/screen/SpreadsheetViewerScreen.kt @@ -504,7 +504,9 @@ private fun SpreadsheetViewerContent( Box(Modifier.weight(1f), contentAlignment = Alignment.Center) { GlassTitlePill( text = (if (state.dirty) "• " else "") + state.fileName.ifBlank { stringResource(R.string.viewer_title) }, - backdrop = headerBackdrop + backdrop = headerBackdrop, + // Clear like the header circles beside it (the PDF viewer's page pill too). + surfaceColor = Color.Transparent ) } if (state.dirty && state.editable) {