diff --git a/packages/core/classes/Theme.js b/packages/core/classes/Theme.js
index c60af947e..22202d2ba 100644
--- a/packages/core/classes/Theme.js
+++ b/packages/core/classes/Theme.js
@@ -1,4 +1,4 @@
-import { paramCase } from 'change-case';
+import { kebabCase } from 'change-case';
 export const DEFAULT_PALETTE_THEME = 'default';
 export const PALETTE_THEMES = {
   default: {
@@ -335,7 +335,7 @@ function generateVars(colors, name = '', result = {}) {
     });
     return result;
   } else {
-    result[`--${paramCase(name)}`] = colors;
+    result[`--${kebabCase(name)}`] = colors;
     return result;
   }
 }
diff --git a/packages/core/composables/useFonts.js b/packages/core/composables/useFonts.js
index f5bee9b5e..d3fe54f47 100644
--- a/packages/core/composables/useFonts.js
+++ b/packages/core/composables/useFonts.js
@@ -1,4 +1,4 @@
-import { paramCase } from 'change-case';
+import { kebabCase } from 'change-case';
 import AmigaTopaz13 from '../assets/fonts/Amiga-Topaz-13/Amiga-Topaz-13.woff2';
 import AmigaTopaz13Console from '../assets/fonts/Amiga-Topaz-13-Console/Amiga-Topaz-13-Console.woff2';
 import BitFont from '../assets/fonts/BitFont/BitFont.woff2';
@@ -10,7 +10,7 @@ export default function useFonts() {
       .filter(font => font.preload)
       .map(font => {
         return {
-          key: `preload-${paramCase(font.fontFamily)}`,
+          key: `preload-${kebabCase(font.fontFamily)}`,
           rel: 'preload',
           as: 'font',
           href: font.src[0],