From 50b7927b495e31f9fbebf16efee21a248d98633b Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Thu, 27 Nov 2025 09:11:04 +0100
Subject: [PATCH] fix(ui): hide checkbox indicator color when unchecked

The checkbox indicator was incorrectly displaying the checkmark color
in its unchecked state. Changed the base color to transparent and only
apply `--bui-fg-solid` when the checkbox is selected.

Also refactored state selectors to use nested parent references for
better encapsulation within the indicator block.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/bumpy-planets-go.md                |  7 ++++
 .../components/Checkbox/Checkbox.module.css   | 33 ++++++++++---------
 2 files changed, 24 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/bumpy-planets-go.md

diff --git a/.changeset/bumpy-planets-go.md b/.changeset/bumpy-planets-go.md
new file mode 100644
index 0000000000..5477711c1a
--- /dev/null
+++ b/.changeset/bumpy-planets-go.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed Checkbox indicator showing checkmark color when unchecked.
+
+Affected components: Checkbox
diff --git a/packages/ui/src/components/Checkbox/Checkbox.module.css b/packages/ui/src/components/Checkbox/Checkbox.module.css
index bc4f700bce..23a88d2b80 100644
--- a/packages/ui/src/components/Checkbox/Checkbox.module.css
+++ b/packages/ui/src/components/Checkbox/Checkbox.module.css
@@ -48,7 +48,23 @@
     background-color: var(--bui-bg-surface-1);
     padding: 0;
     flex-shrink: 0;
-    color: var(--bui-fg-solid);
+    color: transparent;
+
+    .bui-Checkbox[data-focus-visible] & {
+      transition: none;
+      outline: 2px solid var(--bui-ring);
+      outline-offset: 2px;
+    }
+
+    .bui-Checkbox[data-selected] & {
+      background-color: var(--bui-bg-solid);
+      box-shadow: none;
+      color: var(--bui-fg-solid);
+    }
+
+    .bui-Checkbox[data-hovered]:not([data-selected]) & {
+      box-shadow: inset 0 0 0 1px var(--bui-border-hover);
+    }
 
     @media (prefers-reduced-motion: reduce) {
       & {
@@ -56,19 +72,4 @@
       }
     }
   }
-
-  .bui-Checkbox[data-focus-visible] .bui-CheckboxIndicator {
-    transition: none;
-    outline: 2px solid var(--bui-ring);
-    outline-offset: 2px;
-  }
-
-  .bui-Checkbox[data-selected] .bui-CheckboxIndicator {
-    background-color: var(--bui-bg-solid);
-    box-shadow: none;
-  }
-
-  .bui-Checkbox[data-hovered]:not([data-selected]) .bui-CheckboxIndicator {
-    box-shadow: inset 0 0 0 1px var(--bui-border-hover);
-  }
 }