refactor: typing css custom properties (#873)

* refactor: typing css custom properties

starting with the colors

* Update index.ts

src/utils/outputs/download.ts

@@ -21,6 +21,7 @@ import { getFontFaces } from "./web/fonts.ts";
 import { kebabCase } from "../index.ts";
 import {
   getCssPropertyAsString,
+  getTypedCssPropertyAsString,
   getCssThemeProperties,
   getFullColorCss,
   getPaletteOutput,
@@ -119,9 +120,9 @@ export const downloadTheme = async (
 
   zip.file(`${webFolder}/${fileName}-theme.css`, themeProperties);
 
-  const colorsPalette = getCssPropertyAsString(
+  const colorsPalette = getTypedCssPropertyAsString(
     getPaletteOutput(allColors, luminanceSteps),
-    true,
+    "color",
   );
   const colorSpeakingNames = getCssPropertyAsString(
     getSpeakingNames(speakingNames, allColors),
@@ -139,9 +140,9 @@ export const downloadTheme = async (
   if (theme.customColors) {
     const customColorsFolder: string = "Custom Colors";
 
-    const customColorsPalette = getCssPropertyAsString(
+    const customColorsPalette = getTypedCssPropertyAsString(
       getPaletteOutput(theme.customColors, luminanceSteps),
-      true,
+      "color",
     );
 
     const customColorsSpeakingNames = getCssPropertyAsString(

src/utils/outputs/index.ts

@@ -26,6 +26,19 @@ export const getCssPropertyAsString = (
   return resultString;
 };
 
+export const getTypedCssPropertyAsString = (
+  properties: any,
+  type: string,
+): string => {
+  let resultString = "";
+
+  for (const [key, value] of Object.entries(properties)) {
+    resultString += `@property ${key} { syntax: "<${type}>"; initial-value: ${value}; inherits: true; }\n`;
+  }
+
+  return resultString;
+};
+
 const nonRemProperties = ["opacity", "elevation", "transition", "font"];
 
 const isFontFamily = (path: string[]): boolean =>