Use material web switch for private toggle

package.json

@@ -39,9 +39,9 @@
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
     "rollup": "^2.60.2",
+    "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-import-assertions": "^0.3.0",
-    "rollup-plugin-version-injector": "^1.3.3",
-    "rollup-plugin-copy": "^3.3.0"
+    "rollup-plugin-version-injector": "^1.3.3"
   },
   "browser": {
     "crypto": false
@@ -103,6 +103,7 @@
     "@material/mwc-textarea": "^0.27.0",
     "@material/mwc-textfield": "^0.27.0",
     "@material/mwc-top-app-bar": "^0.27.0",
+    "@material/web": "^1.1.1",
     "@mdi/js": "^5.8.55",
     "@types/leaflet": "^1.5.19",
     "d3": "^7.8.2",
@@ -122,4 +123,4 @@
     "pwa-helpers": "^0.9.1",
     "tippy.js": "^6.3.7"
   }
-}
+}

src/SharedStyles.js

@@ -4,6 +4,7 @@ export const sharedStyles = css`
   :host {
     --grampsjs-body-font-family: 'Inter var', sans-serif;
     --grampsjs-heading-font-family: 'Roboto Slab', serif;
+    --md-ref-typeface-plain: 'Inter var', sans-serif;
     font-size: 18px;
     font-family: var(--grampsjs-body-font-family);
     font-weight: 300;
@@ -16,6 +17,55 @@ export const sharedStyles = css`
     --mdc-typography-font-family: var(--grampsjs-body-font-family);
     --color-boy: #64b5f6;
     --color-girl: #ef9a9a;
+    --md-sys-color-primary: rgb(109 76 65);
+    --md-sys-color-surface-tint: rgb(109 76 65);
+    --md-sys-color-on-primary: rgb(255 255 255);
+    --md-sys-color-primary-container: rgb(255 219 207);
+    --md-sys-color-on-primary-container: rgb(57 12 0);
+    --md-sys-color-secondary: rgb(49 98 141);
+    --md-sys-color-on-secondary: rgb(255 255 255);
+    --md-sys-color-secondary-container: rgb(207 229 255);
+    --md-sys-color-on-secondary-container: rgb(0 29 52);
+    --md-sys-color-tertiary: rgb(106 94 47);
+    --md-sys-color-on-tertiary: rgb(255 255 255);
+    --md-sys-color-tertiary-container: rgb(243 226 167);
+    --md-sys-color-on-tertiary-container: rgb(34 27 0);
+    --md-sys-color-error: rgb(186 26 26);
+    --md-sys-color-on-error: rgb(255 255 255);
+    --md-sys-color-error-container: rgb(255 218 214);
+    --md-sys-color-on-error-container: rgb(65 0 2);
+    --md-sys-color-background: rgb(255 248 246);
+    --md-sys-color-on-background: rgb(35 25 23);
+    --md-sys-color-surface: rgb(255 248 246);
+    --md-sys-color-on-surface: rgb(35 25 23);
+    --md-sys-color-surface-variant: rgb(245 222 215);
+    --md-sys-color-on-surface-variant: rgb(83 67 63);
+    --md-sys-color-outline: rgb(133 115 110);
+    --md-sys-color-outline-variant: rgb(216 194 187);
+    --md-sys-color-shadow: rgb(0 0 0);
+    --md-sys-color-scrim: rgb(0 0 0);
+    --md-sys-color-inverse-surface: rgb(57 46 43);
+    --md-sys-color-inverse-on-surface: rgb(255 237 232);
+    --md-sys-color-inverse-primary: rgb(255 181 156);
+    --md-sys-color-primary-fixed: rgb(255 219 207);
+    --md-sys-color-on-primary-fixed: rgb(57 12 0);
+    --md-sys-color-primary-fixed-dim: rgb(255 181 156);
+    --md-sys-color-on-primary-fixed-variant: rgb(114 53 32);
+    --md-sys-color-secondary-fixed: rgb(207 229 255);
+    --md-sys-color-on-secondary-fixed: rgb(0 29 52);
+    --md-sys-color-secondary-fixed-dim: rgb(157 203 251);
+    --md-sys-color-on-secondary-fixed-variant: rgb(18 74 115);
+    --md-sys-color-tertiary-fixed: rgb(243 226 167);
+    --md-sys-color-on-tertiary-fixed: rgb(34 27 0);
+    --md-sys-color-tertiary-fixed-dim: rgb(214 198 141);
+    --md-sys-color-on-tertiary-fixed-variant: rgb(81 70 26);
+    --md-sys-color-surface-dim: rgb(232 214 209);
+    --md-sys-color-surface-bright: rgb(255 248 246);
+    --md-sys-color-surface-container-lowest: rgb(255 255 255);
+    --md-sys-color-surface-container-low: rgb(255 241 237);
+    --md-sys-color-surface-container: rgb(252 234 229);
+    --md-sys-color-surface-container-high: rgb(247 228 223);
+    --md-sys-color-surface-container-highest: rgb(241 223 217);
   }
 
   mwc-tab-bar {
@@ -30,6 +80,15 @@ export const sharedStyles = css`
     flex-grow: 0;
   }
 
+  label {
+    display: inline-flex;
+    place-items: center;
+    gap: 12px;
+    font-size: 15px;
+    font-weight: 350;
+    color: var(--md-sys-color-on-background, #000);
+  }
+
   h2,
   h3,
   h4 {

src/components/GrampsjsFormPrivate.js

@@ -4,7 +4,9 @@ Element for selecting a Gramps type
 
 import {html, css, LitElement} from 'lit'
 import '@material/mwc-checkbox'
+import '@material/web/switch/switch.js'
 
+import {mdiLock, mdiLockOpen} from '@mdi/js'
 import {sharedStyles} from '../SharedStyles.js'
 import {GrampsjsTranslateMixin} from '../mixins/GrampsjsTranslateMixin.js'
 
@@ -28,16 +30,22 @@ class GrampsjsFormPrivate extends GrampsjsTranslateMixin(LitElement) {
 
   render() {
     return html`
-      <p>
-        <mwc-formfield label="${this._('Private')}" id="switch-private">
-          <mwc-checkbox
-            id="private-checkbox"
-            @change="${this.handleChange}"
-            ?checked="${this.checked}"
-            ?disabled="${this.disabled}"
-          ></mwc-checkbox>
-        </mwc-formfield>
-      </p>
+      <label>
+        ${this._('Private')}
+        <md-switch
+          icons
+          @change="${this.handleChange}"
+          ?selected="${this.checked}"
+          ?disabled="${this.disabled}"
+        >
+          <svg viewBox="0 0 24 24" slot="on-icon">
+            <path d="${mdiLock}" />
+          </svg>
+          <svg viewBox="0 0 24 24" slot="off-icon">
+            <path d="${mdiLockOpen}" />
+          </svg>
+        </md-switch>
+      </label>
     `
   }
 
@@ -46,7 +54,7 @@ class GrampsjsFormPrivate extends GrampsjsTranslateMixin(LitElement) {
   }
 
   handleChange(e) {
-    this.checked = e.target.checked
+    this.checked = e.target.selected
     this.dispatchEvent(
       new CustomEvent('formdata:changed', {
         bubbles: true,