Add accent-color (#3570)

* Use native checkbox and use `accent-color`

* Add container to align checkbox

* Fix css variable

* Tweak style

* Revert change

* Address comments

* Add `--rdg-accent-color`

* Add `accent-color`

* Revert

src/cellRenderers/renderCheckbox.tsx

@@ -16,7 +16,6 @@ const checkbox = css`
   @layer rdg.CheckboxInput {
     inline-size: 20px;
     block-size: 20px;
-    accent-color: var(--rdg-checkbox-color);
 
     &:focus-visible {
       outline: 2px solid var(--rdg-checkbox-focus-color);

src/style/core.ts

@@ -14,7 +14,6 @@ const lightTheme = `
   --rdg-row-selected-background-color: hsl(207deg 76% 92%);
   --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%);
 
-  --rdg-checkbox-color: hsl(207deg 100% 29%);
   --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
 `;
 
@@ -29,7 +28,6 @@ const darkTheme = `
   --rdg-row-selected-background-color: hsl(207deg 76% 42%);
   --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%);
 
-  --rdg-checkbox-color: hsl(207deg 100% 79%);
   --rdg-checkbox-focus-color: hsl(207deg 100% 89%);
 `;
 
@@ -55,6 +53,7 @@ const root = css`
     display: grid;
 
     color-scheme: var(--rdg-color-scheme, light dark);
+    accent-color: light-dark(hsl(207deg 100% 29%), hsl(207deg 100% 79%));
 
     /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
     /* We set a stacking context so internal elements don't render on top of external elements. */