updates and cleanup

Author: requestmethod

.gitignore

@@ -1,2 +1,3 @@
 .vscode
-dist
+dist
+node_modules

src/defaults.ts

@@ -0,0 +1,22 @@
+import { ThemesConfig } from "./types.ts";
+
+export function themes(colors?: any): ThemesConfig {
+  return {
+    light: {
+      "background-primary": colors?.zinc[100],
+      "background-secondary": colors?.zinc[200],
+      "content-primary": colors?.zinc[900],
+      "content-secondary": colors?.zinc[700],
+      accent: colors?.indigo[600],
+    },
+    dark: {
+      "background-primary": colors?.zinc[900],
+      "background-secondary": colors?.zinc[800],
+      "content-primary": colors?.zinc[100],
+      "content-secondary": colors?.zinc[300],
+      accent: colors?.indigo[400],
+    },
+  };
+}
+
+export const prefix = "theme--";

src/index.ts

@@ -1,32 +1,41 @@
 import plugin from "https://esm.sh/[email protected]/plugin";
-import { ThemeConfig } from "https://esm.sh/[email protected]/types/config.d.ts";
+
+import * as defaults from "./defaults.ts";
+import { ThemesConfig } from "./types.ts";
 
 import {
   getTailwindCssVariables,
   getThemeTokens,
   getRgbThemeConfig,
 } from "./utils.ts";
 
+interface PluginOptions {
+  prefix?: string;
+  themes?: (colors?: any) => ThemesConfig;
+}
+
 export default plugin.withOptions(
-  ({
-      prefix,
-      themes,
-    }: {
-      prefix?: string;
-      themes: (
-        colors?: Partial<ThemeConfig["colors"]>
-      ) => Record<string | number | symbol, never>;
-    }) =>
+  (options: PluginOptions) =>
     ({ addComponents, theme }) => {
       const colors = theme("colors");
-      const rgbThemeConfig = getRgbThemeConfig(themes(colors), prefix);
+
+      const rgbThemeConfig = getRgbThemeConfig(
+        options.themes ? options.themes(colors) : defaults.themes(colors),
+        options.prefix || defaults.prefix
+      );
 
       addComponents({
         ...rgbThemeConfig,
       });
     },
   ({ themes }) => {
-    const tokens = getThemeTokens(themes());
+    let tokens: string[];
+
+    if (themes) {
+      tokens = getThemeTokens(themes());
+    } else {
+      tokens = getThemeTokens(defaults.themes());
+    }
 
     const cssVariables = getTailwindCssVariables(tokens);
 

src/types.ts

@@ -0,0 +1,3 @@
+export interface ThemesConfig {
+  [themeName: string]: Record<string, string>;
+}

src/utils.ts

@@ -1,6 +1,7 @@
 import { ThemeConfig } from "https://esm.sh/[email protected]/types/config.d.ts";
 
 import hexToRgb from "./hex-rgb.ts";
+import { ThemesConfig } from "./types.ts";
 
 export function getThemeTokens(themes?: Partial<ThemeConfig["colors"]>) {
   const tokens: string[] = [];
@@ -13,12 +14,10 @@ export function getThemeTokens(themes?: Partial<ThemeConfig["colors"]>) {
     }
   }
 
-  console.log(Array.from(new Set(tokens.flat())));
-
   return Array.from(new Set(tokens.flat()));
 }
 
-export function getTailwindCssVariables(tokens) {
+export function getTailwindCssVariables(tokens: string[]) {
   return tokens.reduce((acc, token) => {
     return {
       ...acc,
@@ -27,20 +26,26 @@ export function getTailwindCssVariables(tokens) {
   }, {});
 }
 
-export function getRgbThemeConfig(config, prefix) {
-  let rgbThemeConfig = {};
+export function getRgbThemeConfig(
+  config: ThemesConfig,
+  prefix: string
+): ThemesConfig {
+  const classString = `.`;
+  const rgbThemeConfig: ThemesConfig = {};
 
   // Loop through user themes to apply theme prefix and convert hex to rgb
   for (const [userThemeName, userThemeValues] of Object.entries(config)) {
-    let updatedThemeConfig = [];
+    const updatedThemeConfig: string[][] = [];
 
     // Loop through each value of theme to convert hex to rgb
     for (const [token, hex] of Object.entries(userThemeValues)) {
-      updatedThemeConfig.push([`--${token}`, hexToRgb(hex)]);
+      if (hex) {
+        updatedThemeConfig.push([`--${token}`, hexToRgb(hex)]);
+      }
     }
 
     const updatedTheme = {
-      [`.${prefix.concat(userThemeName)}`]: Object.fromEntries(
+      [classString.concat(prefix, userThemeName)]: Object.fromEntries(
         new Map(updatedThemeConfig)
       ),
     };