From cae638c993e4e49dded7797c9905346839a7708b Mon Sep 17 00:00:00 2001
From: dev <info@activething.com>
Date: Thu, 21 May 2026 23:16:45 +0200
Subject: [PATCH] fix(color-picker): ValueSwatch color overlay now actually
 shows on top of checker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Follow-up to 8515f5e6 — that commit had the stacking inverted.

The bug
-------
I put the checker on `::before { z-index: -1 }` and expected the soma's
inline `background-color` to paint on top. But within a stacking context
(my parent has `isolation: isolate`), `::before { z-index: -1 }` lands
in layer 2 — ABOVE the parent's own background (layer 1). So the
checker still covered the colour and the user only saw transparency.

The fix
-------
Inverted the layering — back to the same pattern the trigger swatch
already uses:

- Parent `[data-color-picker-value-swatch]` carries the **checker** as
  its own `background-image` (sits at layer 1 of the stacking context).
- `::before` (positioned descendant, layer 2 ABOVE layer 1) paints the
  **colour** via `var(--cp-current-color, transparent)`. The soma
  emits `--cp-current-color: <hex>` inline as part of the swatch style.
- Where the colour has alpha < 1 (rgba), the checker shows through
  the `::before` because semitransparent colour over the checker is
  the standard pattern.

Default brand colour (opaque blue) now renders as a solid blue square
again; semitransparent colours show the checker behind. Checks:
67/67 component-audit PASS, svelte-check 0 errors / 0 warnings.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../components/color-picker/color-picker.css  | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

diff --git a/src/uix/eidos/components/color-picker/color-picker.css b/src/uix/eidos/components/color-picker/color-picker.css
index 9a2827053..5d76652d7 100644
--- a/src/uix/eidos/components/color-picker/color-picker.css
+++ b/src/uix/eidos/components/color-picker/color-picker.css
@@ -182,6 +182,15 @@
 
 /* ── ValueSwatch / ValueText ─────────────────────────────────────────────── */
 
+/* Stacking notes:
+ *   • Element's own `background-image` (checker) sits at the bottom of
+ *     the stacking context.
+ *   • `::before` is a positioned descendant painted ABOVE the parent's
+ *     own background — perfect place for the colour overlay.
+ *   • The colour comes from `--cp-current-color`, set inline by
+ *     `ColorPickerValueSwatchProvider`. Where the colour has alpha < 1
+ *     (rgba) the checker shows through underneath. */
+
 [data-color-picker-value-swatch] {
 	position: relative;
 	display: inline-block;
@@ -189,12 +198,13 @@
 	block-size: var(--_color-picker-swatch-size);
 	border-radius: var(--color-picker-swatch-radius);
 	border: 1px solid var(--color-picker-swatch-border);
-	/* Checker behind the colour swatch — visible only where the colour
-	   has alpha < 1. We use ::before for the checker (z-index -1 inside an
-	   isolated stacking context) and let the soma-set inline
-	   background-color paint the colour itself. The inline `style` from
-	   `ColorPickerValueSwatchProvider` also emits `--cp-current-color` so
-	   downstream consumers can pull the value as a CSS variable too. */
+	background-image: var(--cp-checker);
+	background-size: var(--cp-checker-cell) var(--cp-checker-cell);
+	background-position:
+		0 0,
+		0 calc(var(--cp-checker-cell) / 2),
+		calc(var(--cp-checker-cell) / 2) calc(var(--cp-checker-cell) / -2),
+		calc(var(--cp-checker-cell) / -2) 0;
 	overflow: hidden;
 	isolation: isolate;
 }
@@ -203,14 +213,7 @@
 	content: '';
 	position: absolute;
 	inset: 0;
-	z-index: -1;
-	background-image: var(--cp-checker);
-	background-size: var(--cp-checker-cell) var(--cp-checker-cell);
-	background-position:
-		0 0,
-		0 calc(var(--cp-checker-cell) / 2),
-		calc(var(--cp-checker-cell) / 2) calc(var(--cp-checker-cell) / -2),
-		calc(var(--cp-checker-cell) / -2) 0;
+	background: var(--cp-current-color, transparent);
 	pointer-events: none;
 }