New version. Add Material UI implementation with theme customization, about dialog, and news system

components-wiki/figures/checkbox/theming.html

@@ -0,0 +1,22 @@
+<div class="figure-wrapper">
+  <figure
+    style="justify-content: center; align-items: center"
+    class="styled-example"
+    aria-label="Image of a checkbox with a different theme applied"
+  >
+    <style>
+      .styled-example {
+        background-color: white;
+        border-radius: 28px;
+        /* System tokens */
+        --md-sys-color-primary: #006a6a;
+        --md-sys-color-on-primary: #ffffff;
+        --md-sys-color-on-surface-variant: #3f4948;
+        /* Component tokens */
+        --md-checkbox-container-shape: 0px;
+      }
+    </style>
+    <md-checkbox touch-target="wrapper"></md-checkbox>
+    <md-checkbox touch-target="wrapper" checked></md-checkbox>
+  </figure>
+</div>

components-wiki/figures/checkbox/usage-label.html

@@ -0,0 +1,13 @@
+<div class="figure-wrapper">
+  <figure
+    style="justify-content: center; align-items: center"
+    aria-label="Two checkboxes with labels"
+  >
+    <label style="display: flex; align-items: center">
+      <md-checkbox touch-target="wrapper"></md-checkbox>
+      Checkbox one
+    </label>
+    <md-checkbox id="checkbox-two" touch-target="wrapper"></md-checkbox>
+    <label for="checkbox-two">Checkbox two</label>
+  </figure>
+</div>

components-wiki/figures/checkbox/usage.html

@@ -0,0 +1,9 @@
+<div class="figure-wrapper">
+  <figure
+      style="justify-content:center;"
+      aria-label="Three checkboxes in a row that are unselected, selected, and indeterminate">
+    <md-checkbox touch-target="wrapper"></md-checkbox>
+    <md-checkbox touch-target="wrapper" checked></md-checkbox>
+    <md-checkbox touch-target="wrapper" indeterminate></md-checkbox>
+  </figure>
+</div>