turn Toggle styles into CSS custom props

breaking: highlight_matches action rename optional acceptNode to node_filter
janosh · Feb 2, 2024 · f8457d5 · f8457d5
1 parent b2d45dc
commit f8457d5
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 28 deletions.
diff --git a/src/lib/Slider.svelte b/src/lib/Slider.svelte
@@ -40,7 +40,7 @@
     place-items: center;
     gap: var(--zoo-slider-gap, 1ex);
     margin: var(--zoo-slider-margin);
-    padding: var(--zoo-slider-padding, 0 4pt);
+    padding: var(--zoo-slider-padding);
   }
   input[type='number'] {
     background: transparent;

diff --git a/src/lib/Toggle.svelte b/src/lib/Toggle.svelte
@@ -21,42 +21,42 @@
 
 <style>
   label {
-    display: inline-flex;
-    align-items: center;
-    width: max-content;
-    vertical-align: middle;
+    display: var(--zoo-toggle-label-display, inline-flex);
+    align-items: var(--zoo-toggle-label-align-items, center);
+    width: var(--zoo-toggle-label-width, max-content);
+    vertical-align: var(--zoo-toggle-label-vertical-align, middle);
   }
   span {
-    height: 1.5em;
-    width: 2.7em;
-    padding: 0.1em;
     box-sizing: border-box;
-    border: 1px solid lightgray;
-    border-radius: 0.75em;
-    transition: 0.3s;
+    height: var(--zoo-toggle-knob-height, 1.5em);
+    width: var(--zoo-toggle-knob-width, 3em);
+    padding: var(--zoo-toggle-knob-padding, 0.1em);
+    border: var(--zoo-toggle-knob-border, 1px solid lightgray);
+    border-radius: var(--zoo-toggle-knob-border-radius, 0.75em);
+    transition: var(--zoo-toggle-knob-transition, 0.3s);
   }
   input:checked + span {
-    background: black;
+    background: var(--zoo-toggle-background, black);
   }
   input {
     position: absolute;
     opacity: 0;
-    width: 1em;
+    width: var(--zoo-toggle-input-width, 1em);
   }
   input + span::after {
     content: '';
-    display: block;
-    height: 1.2em;
-    width: 1.2em;
-    border-radius: 50%;
-    background: gray;
-    transition: 0.3s;
+    display: var(--zoo-toggle-knob-after-display, block);
+    height: var(--zoo-toggle-knob-after-height, 1.2em);
+    width: var(--zoo-toggle-knob-after-width, 1.2em);
+    border-radius: var(--zoo-toggle-knob-after-border-radius, 50%);
+    background: var(--zoo-toggle-knob-after-background, gray);
+    transition: var(--zoo-toggle-knob-after-transition, 0.3s);
   }
   input:checked + span::after {
-    background: green;
-    transform: translate(100%);
+    background: var(--zoo-toggle-knob-after-background, green);
+    transform: var(--zoo-toggle-knob-after-transform, translate(100%));
   }
   input:focus + span {
-    border: 1px solid cornflowerblue;
+    border: var(--zoo-toggle-knob-focus-border, 1px solid cornflowerblue);
   }
 </style>
diff --git a/src/lib/actions.ts b/src/lib/actions.ts
@@ -48,10 +48,10 @@ export function sortable(
 }
 
 type HighlightOptions = {
-  query: string
-  disabled: boolean
-  acceptNode: (node: Node) => number
-  css_class: string
+  query?: string
+  disabled?: boolean
+  node_filter?: (node: Node) => number
+  css_class?: string
 }
 
 export function highlight_matches(node: HTMLElement, ops: HighlightOptions) {
@@ -65,7 +65,7 @@ function update_highlights(node: Node, ops: HighlightOptions) {
   const {
     query = ``,
     disabled = false,
-    acceptNode = () => NodeFilter.FILTER_ACCEPT,
+    node_filter = () => NodeFilter.FILTER_ACCEPT,
     css_class = `highlight-match`,
   } = ops
 
@@ -75,7 +75,7 @@ function update_highlights(node: Node, ops: HighlightOptions) {
   if (!query || disabled || typeof CSS == `undefined` || !CSS.highlights) return // abort if CSS highlight API not supported
 
   const tree_walker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, {
-    acceptNode,
+    acceptNode: node_filter,
   })
   const text_nodes: Node[] = []
   let current_node = tree_walker.nextNode()