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

@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed Checkbox indicator showing checkmark color when unchecked.
+
+Affected components: Checkbox

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);
-  }
 }