From 510e61a553066e98fbe277f8088a206d0889a37a Mon Sep 17 00:00:00 2001
From: Falkan <falkan@openclaw.local>
Date: Tue, 17 Mar 2026 11:00:38 -0400
Subject: [PATCH] fix+feat: fix invisible result values, inline symbol into
 label
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix: .result-value was using color: var(--pico-color) which broke when
our custom palette variables weren't in scope. Now inherits body color —
Pico handles light/dark correctly without us needing to re-assert it.

Feat: unit symbol merged inline into label as 'Blurbs (bl)', replacing
the separate third line. Removes .result-symbol CSS rule. Cards are
shorter and less cluttered.
---
 src/app.css                            | 10 ++++------
 src/components/ConversionResult.svelte |  3 +--
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/app.css b/src/app.css
index 4d5b404..59bb195 100644
--- a/src/app.css
+++ b/src/app.css
@@ -88,7 +88,9 @@
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   word-break: break-all;
-  color: var(--pico-color); /* explicit; do not rely on inheritance */
+  /* No explicit color — inherit from body. Pico sets this correctly for both
+     light (#373c44) and dark (#c2c7d0). Overriding with a CSS var here is
+     what caused the invisible-text regression. */
 }
 
 .result-label {
@@ -96,11 +98,7 @@
   color: var(--color-label);
 }
 
-.result-symbol {
-  font-size: 0.75rem;
-  color: var(--pico-muted-color);
-  font-style: italic;
-}
+/* .result-symbol removed — symbol is now rendered inline in the label */
 
 /* ── Highlighted result (above grid) ──────────────────────────────────────── */
 .highlighted-result {
diff --git a/src/components/ConversionResult.svelte b/src/components/ConversionResult.svelte
index 5ff341e..01a4f80 100644
--- a/src/components/ConversionResult.svelte
+++ b/src/components/ConversionResult.svelte
@@ -57,6 +57,5 @@
   aria-pressed={highlighted}
 >
   <span class="result-value">{formattedValue}</span>
-  <span class="result-label">{unit.labelPlural}</span>
-  <span class="result-symbol">{unit.symbol}</span>
+  <span class="result-label">{unit.labelPlural} ({unit.symbol})</span>
 </div>