Improve disabled checkbox readability using Theme V2 styling - PR_26162_048-controls-checkbox-state-styling

Author: ToolboxAid

assets/theme-v2/css/colors.css

@@ -72,6 +72,9 @@
   --forgebot-stage-background: radial-gradient(circle at 50% 55%, rgba(255, 122, 0, .25), var(--transparent) 48%), linear-gradient(145deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025));
   --button-primary-background: linear-gradient(135deg, var(--orange), var(--button-primary-end));
   --button-cyan-background: linear-gradient(135deg, var(--button-cyan-start), var(--button-cyan-end));
+  --checkbox-disabled-background: color-mix(in srgb, var(--white) 72%, var(--steel-gray));
+  --checkbox-disabled-border: color-mix(in srgb, var(--iron-black) 28%, var(--steel-gray));
+  --checkbox-disabled-check: var(--iron-black);
   --text: #f5f7fb;
   --muted: #aeb6c2;
   --orange: var(--molten-orange);

assets/theme-v2/css/forms.css

@@ -106,6 +106,32 @@ input[type="radio"] {
   padding: var(--space-0)
 }
 
+input[type="checkbox"]:disabled {
+  appearance: none;
+  box-sizing: border-box;
+  display: inline-grid;
+  place-content: center;
+  border: var(--border-width-sm) solid var(--checkbox-disabled-border);
+  border-radius: var(--radius-xs);
+  background: var(--checkbox-disabled-background);
+  opacity: 1;
+  cursor: not-allowed
+}
+
+input[type="checkbox"]:disabled::before {
+  content: "";
+  width: calc(var(--icon-size-sm) * .58);
+  height: calc(var(--icon-size-sm) * .58);
+  background: var(--checkbox-disabled-check);
+  clip-path: polygon(14% 44%, 0 58%, 38% 96%, 100% 20%, 86% 8%, 36% 66%);
+  transform: scale(0);
+  transform-origin: center
+}
+
+input[type="checkbox"]:checked:disabled::before {
+  transform: scale(1)
+}
+
 input[type="hidden"] {
   display: none
 }

docs_build/dev/reports/codex_changed_files.txt

@@ -1,16 +1,18 @@
 # git status --short
-M docs_build/dev/reports/coverage_changed_js_guardrail.txt
+M assets/theme-v2/css/colors.css
+ M assets/theme-v2/css/forms.css
+ M docs_build/dev/reports/coverage_changed_js_guardrail.txt
  M docs_build/dev/reports/playwright_v8_coverage_report.txt
  M tests/playwright/tools/InputMappingV2Tool.spec.mjs
- M toolbox/controls/controls.js
-?? docs_build/dev/reports/controls-edit-row-in-place-fix-report.md
+?? docs_build/dev/reports/controls-checkbox-state-styling-report.md
 
 # git ls-files --others --exclude-standard
-docs_build/dev/reports/controls-edit-row-in-place-fix-report.md
+docs_build/dev/reports/controls-checkbox-state-styling-report.md
 
 # git diff --stat
-.../dev/reports/coverage_changed_js_guardrail.txt  |   4 +-
- .../dev/reports/playwright_v8_coverage_report.txt  |  14 ++-
- tests/playwright/tools/InputMappingV2Tool.spec.mjs | 116 +++++++++++++++++++++
- toolbox/controls/controls.js                       |  14 ++-
- 4 files changed, 130 insertions(+), 18 deletions(-)
+assets/theme-v2/css/colors.css                     |  3 +++
+ assets/theme-v2/css/forms.css                      | 26 +++++++++++++++++++
+ .../dev/reports/coverage_changed_js_guardrail.txt  |  3 +--
+ .../dev/reports/playwright_v8_coverage_report.txt  | 29 ++++++----------------
+ tests/playwright/tools/InputMappingV2Tool.spec.mjs | 29 ++++++++++++++++++++++
+ 5 files changed, 66 insertions(+), 24 deletions(-)

docs_build/dev/reports/codex_review.diff

@@ -0,0 +1,56 @@
+# PR_26162_048-controls-checkbox-state-styling
+
+## Branch Validation
+- PASS: current branch is `main`.
+- Expected branch: `main`.
+
+## Requirement Checklist
+- PASS: Current enabled checkbox styling is unchanged. The new CSS is scoped to `input[type="checkbox"]:disabled` only.
+- PASS: Disabled checkboxes use a lighter gray Theme V2 background through `--checkbox-disabled-background`.
+- PASS: Disabled checked checkboxes use a black Theme V2 checkmark through `--checkbox-disabled-check`.
+- PASS: Disabled checkbox visibility/readability is preserved with `opacity: 1`.
+- PASS: Styling is implemented through reusable Theme V2 CSS in `assets/theme-v2/css/colors.css` and `assets/theme-v2/css/forms.css`.
+- PASS: No page-local CSS, inline styles, or tool-specific styling was added.
+- PASS: The pattern applies to the Controls Enabled, D, H, U, and DC columns because those cells render standard disabled checkboxes.
+- PASS: Future Theme V2 disabled Controls checkboxes using the same standard checkbox pattern inherit the styling.
+
+## Changed Files
+- `assets/theme-v2/css/colors.css`
+- `assets/theme-v2/css/forms.css`
+- `tests/playwright/tools/InputMappingV2Tool.spec.mjs`
+- `docs_build/dev/reports/coverage_changed_js_guardrail.txt`
+- `docs_build/dev/reports/playwright_v8_coverage_report.txt`
+- `docs_build/dev/reports/controls-checkbox-state-styling-report.md`
+
+## Impacted Lanes
+- Theme V2 shared forms styling.
+- Toolbox Controls runtime visual validation.
+- Playwright impacted: Yes.
+
+## Validation Performed
+- PASS: `node --check tests/playwright/tools/InputMappingV2Tool.spec.mjs`
+- PASS: `git diff --check`
+- PASS: `npx playwright test tests/playwright/tools/InputMappingV2Tool.spec.mjs --grep "Toolbox Controls"`
+- WARN: `npm run check:style-system-guard` reported existing `missing-page:toolbox/localization/index.html`; no issue was reported for this PR's Theme V2 CSS or Controls page.
+
+## Playwright Result
+- PASS: Targeted Controls Playwright test passed, including disabled checkbox rendered style checks for lighter background, black checked icon, and full opacity.
+
+## V8 Coverage
+- Generated: `docs_build/dev/reports/playwright_v8_coverage_report.txt`
+- Note: This PR changes Theme V2 CSS and Playwright assertions, not runtime JavaScript. The coverage helper still reports advisory browser runtime coverage for the current repository HEAD.
+
+## Skipped Lanes
+- Full samples validation skipped: samples are not in scope and no sample JSON or runtime sample behavior changed.
+- Full workspace suite skipped: this PR only changes reusable disabled checkbox styling and targeted Controls coverage validates the affected surface.
+- Broad visual sweep skipped: requested scope is Controls checkbox state styling, and the implementation is reusable Theme V2 CSS without page-local styling.
+
+## Manual Validation Steps
+1. Open `/toolbox/controls/index.html`.
+2. Confirm the Game Controls table renders the Enabled, D, H, U, and DC checkbox columns.
+3. Confirm disabled unchecked checkboxes use a light gray fill and remain readable.
+4. Confirm disabled checked checkboxes use the same light gray fill with a black checkmark.
+5. Confirm enabled/editable checkbox behavior still uses the existing checkbox styling.
+
+## Samples Decision
+- SKIP: Full samples validation was not run because this PR does not touch samples, sample JSON, game runtime, or sample launch behavior.

docs_build/dev/reports/controls-checkbox-state-styling-report.md

@@ -6,8 +6,7 @@ Missing changed runtime JS files are WARN, not FAIL.
 Source: Playwright/Chromium built-in V8 coverage from the active Playwright run.
 
 Changed runtime JS files considered:
-(95%) toolbox/controls/controls.js - current PR changed runtime JS file with browser V8 coverage; executed lines 546/546; executed functions 57/60
-(89%) src/engine/input/NormalizedInputRegistry.js - reporter HEAD-baseline file with browser V8 coverage; not part of the current PR diff; advisory only
+(67%) toolbox/controls/controls.js - executed lines 546/546; executed functions 35/52
 
 Guardrail warnings:
 (100%) none - no changed runtime JS coverage warnings

docs_build/dev/reports/coverage_changed_js_guardrail.txt

@@ -12,40 +12,25 @@ Note: entry percentages use function coverage when available, otherwise line cov
 Note: coverage entries are aggregated across every page/tool where coverageReporter.start(page) and coverageReporter.stop(page) ran.
 
 Exercised tool entry points detected:
-(89%) Toolbox Index - exercised 3 runtime JS files
+(71%) Toolbox Index - exercised 3 runtime JS files
 (0%) Tool Template V2 - not exercised by this Playwright run
-(62%) Theme V2 Shared JS - exercised 2 runtime JS files
+(58%) Theme V2 Shared JS - exercised 2 runtime JS files
 
 Changed runtime JS files covered:
-(95%) toolbox/controls/controls.js - current PR changed runtime JS file with browser V8 coverage; executed lines 546/546; executed functions 57/60
-(89%) src/engine/input/NormalizedInputRegistry.js - reporter HEAD-baseline file with browser V8 coverage; not part of the current PR diff; advisory only
+(67%) toolbox/controls/controls.js - executed lines 546/546; executed functions 35/52
 
 Files with executed line/function counts where available:
-(11%) src/engine/input/InputMappingManifest.js - executed lines 78/78; executed functions 1/9
-(23%) src/engine/input/InputComboState.js - executed lines 173/173; executed functions 3/13
-(30%) src/engine/input/InputService.js - executed lines 451/451; executed functions 20/66
-(33%) src/engine/input/InputMap.js - executed lines 62/62; executed functions 3/9
-(40%) src/engine/input/MouseState.js - executed lines 57/57; executed functions 4/10
-(41%) src/engine/input/GamepadInputClassifier.js - executed lines 412/412; executed functions 14/34
-(43%) src/engine/input/KeyboardState.js - executed lines 34/34; executed functions 3/7
-(50%) src/engine/input/InputCaptureService.js - executed lines 163/163; executed functions 7/14
+(29%) src/engine/input/NormalizedInputRegistry.js - executed lines 321/321; executed functions 6/21
 (53%) src/engine/api/server-api-client.js - executed lines 159/159; executed functions 10/19
-(59%) src/engine/input/PointerDragState.js - executed lines 225/225; executed functions 13/22
-(60%) src/engine/input/InputCapabilityDescriptors.js - executed lines 261/261; executed functions 9/15
-(61%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 625/625; executed functions 33/54
+(57%) assets/theme-v2/js/gamefoundry-partials.js - executed lines 625/625; executed functions 30/53
 (64%) assets/theme-v2/js/tool-display-mode.js - executed lines 209/209; executed functions 9/14
+(67%) toolbox/controls/controls.js - executed lines 546/546; executed functions 35/52
 (75%) toolbox/tool-registry-api-client.js - executed lines 152/152; executed functions 21/28
-(80%) src/engine/input/GamepadState.js - executed lines 100/100; executed functions 16/20
-(89%) src/engine/input/NormalizedInputRegistry.js - executed lines 321/321; executed functions 24/27
-(94%) account/user-controls-page.js - executed lines 961/961; executed functions 111/118
-(95%) toolbox/controls/controls.js - executed lines 546/546; executed functions 57/60
-(100%) account/user-controls.js - executed lines 2/2; executed functions 1/1
 (100%) toolbox/controls/controls-api-client.js - executed lines 12/12; executed functions 2/2
 
 Uncovered or low-coverage changed JS files:
 (100%) none - no low-coverage changed runtime JS files
 
 Changed JS files considered:
 (0%) tests/playwright/tools/InputMappingV2Tool.spec.mjs - changed JS file not collected as browser runtime coverage
-(89%) src/engine/input/NormalizedInputRegistry.js - reporter HEAD-baseline file with browser V8 coverage; not part of the current PR diff
-(95%) toolbox/controls/controls.js - current PR changed runtime JS file with browser V8 coverage
+(67%) toolbox/controls/controls.js - changed JS file with browser V8 coverage

docs_build/dev/reports/playwright_v8_coverage_report.txt

@@ -260,6 +260,35 @@ test("Toolbox Controls shows game controls only and keeps presets wireframe safe
     await expect(primaryRow.locator("input[aria-label='U']")).not.toBeChecked();
     await expect(primaryRow.locator("input[aria-label='DC']")).not.toBeChecked();
     await expect(primaryRow.locator("td:has(input[aria-label='D'])")).toHaveAttribute("data-input-event-checked", "true");
+    await expect(primaryRow.locator("input[aria-label='D']")).toBeDisabled();
+    await expect(primaryRow.locator("input[aria-label='H']")).toBeDisabled();
+
+    const checkedDisabledCheckboxStyle = await primaryRow.locator("input[aria-label='D']").evaluate((input) => {
+      const checkboxStyle = window.getComputedStyle(input);
+      const checkStyle = window.getComputedStyle(input, "::before");
+      return {
+        backgroundColor: checkboxStyle.backgroundColor,
+        checkBackgroundColor: checkStyle.backgroundColor,
+        checkTransform: checkStyle.transform,
+        opacity: checkboxStyle.opacity,
+      };
+    });
+    const uncheckedDisabledCheckboxStyle = await primaryRow.locator("input[aria-label='H']").evaluate((input) => {
+      const checkboxStyle = window.getComputedStyle(input);
+      const checkStyle = window.getComputedStyle(input, "::before");
+      return {
+        backgroundColor: checkboxStyle.backgroundColor,
+        checkTransform: checkStyle.transform,
+        opacity: checkboxStyle.opacity,
+      };
+    });
+    expect(checkedDisabledCheckboxStyle.backgroundColor).toBe(uncheckedDisabledCheckboxStyle.backgroundColor);
+    expect(checkedDisabledCheckboxStyle.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
+    expect(checkedDisabledCheckboxStyle.checkBackgroundColor).toBe("rgb(18, 18, 18)");
+    expect(checkedDisabledCheckboxStyle.checkTransform).not.toBe("matrix(0, 0, 0, 0, 0, 0)");
+    expect(checkedDisabledCheckboxStyle.opacity).toBe("1");
+    expect(uncheckedDisabledCheckboxStyle.checkTransform).toBe("matrix(0, 0, 0, 0, 0, 0)");
+    expect(uncheckedDisabledCheckboxStyle.opacity).toBe("1");
 
     const aimRightRow = page.locator("[data-input-mapping-row]").filter({ hasText: "Aim Right" }).first();
     await expect(aimRightRow.locator("td").nth(0).locator("input")).not.toBeChecked();