feat: switch and buttons

scss/_ctp-vars.scss

@@ -1,4 +1,5 @@
 :root {
+  // following are mapped to variables used in logseq
   --ctp-primary-background-color: rgb(var(--ctp-base));
   --ctp-secondary-background-color: rgb(var(--ctp-mantle));
   --ctp-tertiary-background-color: rgb(var(--ctp-crust));
@@ -92,4 +93,15 @@
   --ctp-error-color: var(--ctp-red);
   --ctp-warning-color: var(--ctp-peach);
   --ctp-success-color: var(--ctp-green);
-}
+
+  // following used in _custom.scss
+
+  // Switches
+  --ctp-switch-background: var(--color-base-50);
+  --ctp-switch-handle-color: var(--ctp-accent, var(--ctp-blue));
+
+  // Buttons
+  --ctp-button-background: var(--ctp-accent, var(--ctp-blue));
+  --ctp-button-text: var(--color-base-10);
+
+}

scss/_custom.scss

@@ -0,0 +1,23 @@
+// place for selection to customise elements not supported by default variables
+
+// Switches
+a.ui__toggle {
+    & .wrapper:focus {
+        --tw-shadow: 0 0 0 3px rgba(var(--ctp-switch-handle-color), 0.5)
+    }
+    span {
+        background-color: var(--ctp-switch-background);
+        span.switcher {
+            background-color: rgb(var(--ctp-switch-handle-color));
+        }
+    }
+}
+
+// Buttons
+button.ui__button {
+    color: var(--ctp-button-text);
+    background-color: rgb(var(--ctp-button-background));
+    &:hover {
+        background-color: rgb(var(--ctp-button-background));
+    }
+}

scss/_main.scss

@@ -1,3 +1,4 @@
 @use "theme.scss";
 @use "ctp-vars.scss";
-@use "ls-vars.scss";
+@use "ls-vars.scss";
+@use "custom.scss";