feat(checkbox): refactor and simplify rendering/style logic

BREAKING CHANGE: Removed reducedTouchTarget. Instead, set the width and height on the checkbox.

PiperOrigin-RevId: 495087302

checkbox/_checkbox.scss

@@ -1 +1,6 @@
-@forward './lib/checkbox-theme' show theme, theme-extension;
+//
+// Copyright 2022 Google LLC
+// SPDX-License-Identifier: Apache-2.0
+//
+
+@forward './lib/checkbox' show theme;

checkbox/checkbox.ts

@@ -8,15 +8,19 @@ import {customElement} from 'lit/decorators.js';
 
 import {Checkbox} from './lib/checkbox.js';
 import {styles} from './lib/checkbox-styles.css.js';
+import {styles as forcedColorsStyles} from './lib/forced-colors-styles.css.js';
 
 declare global {
   interface HTMLElementTagNameMap {
     'md-checkbox': MdCheckbox;
   }
 }
 
-/** @soyCompatible */
+/**
+ * Checkboxes allow users to select one or more items from a set. Checkboxes can
+ * turn an option on or off.
+ */
 @customElement('md-checkbox')
 export class MdCheckbox extends Checkbox {
-  static override styles = [styles];
+  static override styles = [styles, forcedColorsStyles];
 }

checkbox/checkbox_test.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+// import 'jasmine'; (google3-only)
+
+import {createTokenTests} from '../testing/tokens.js';
+
+import {MdCheckbox} from './checkbox.js';
+
+describe('<md-checkbox>', () => {
+  describe('.styles', () => {
+    createTokenTests(MdCheckbox.styles);
+  });
+});

checkbox/harness.ts

@@ -14,6 +14,6 @@ import {Checkbox} from './lib/checkbox.js';
 export class CheckboxHarness extends Harness<Checkbox> {
   override async getInteractiveElement() {
     await this.element.updateComplete;
-    return this.element.renderRoot.querySelector('input') as HTMLInputElement;
+    return this.element.renderRoot.querySelector('input')!;
   }
 }