use kebabCase from lodash

ruihe774 · Dec 10, 2023 · ab76627 · ab76627
1 parent 9f09609
commit ab76627
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 6 deletions.
diff --git a/src/style.module.sass b/src/style.module.sass
@@ -95,12 +95,12 @@
     flex-grow: 1
 
 .slider
-    --slider-thumb-color: var(--accent-dark1)
+    --slider-thumb-color: var(--accent-dark-1)
     --slider-thumb-border: #ffffff
     --slider-track-color: #868686
     --slider-end: right
     @media screen and (prefers-color-scheme: dark)
-        --slider-thumb-color: var(--accent-light2)
+        --slider-thumb-color: var(--accent-light-2)
         --slider-thumb-border: #414141
         --slider-track-color: #9b9b9b
     [data-writing-mode^=vertical] &

diff --git a/src/style.ts b/src/style.ts
@@ -1,5 +1,6 @@
 import { invoke } from "@tauri-apps/api";
 import { watchEffect, reactive } from "vue";
+import { kebabCase } from "lodash-es";
 import { watchThrottled } from "./watchers";
 import panelState from "./wm";
 
@@ -24,9 +25,6 @@ const html: HTMLHtmlElement = document.querySelector(":root")!;
 
 watchEffect(() => {
     for (const [name, { r, g, b }] of Object.entries(colors)) {
-        html.style.setProperty(
-            `--${name.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`,
-            `rgb(${r},${g},${b})`,
-        );
+        html.style.setProperty(`--${kebabCase(name)}`, `rgb(${r},${g},${b})`);
     }
 });