Fix Type errors and expose themePropertiesConfig option

[kaelansmith]

This PR adds a user-facing option when instantiating a Theme instance, called themePropertiesConfig. This allows users to customize the default/internal themePropertiesConfig, providing control over how theme properties' CSS variables get generated (i.e. customize the prefix and/or provide a custom type class to handle custom value conversion logic, like how the internal ColorProperty class adds the HSL conversion logic). I came across the need for this because I'm using the tailwind-scrollbar package, and needed to add a scrollbar-specific color palette via the plugin's custom scrollbarColor tailwind theme property, while ensuring it used the ColorProperty logic -- see below:

import { Theme, ColorProperty } from "tailwind-easy-theme";

const theme = new Theme(
  {
    textColor: "#000000",
    scrollbarColor: "#FEFEFE", // custom theme property (see config below)
  },
  {
    themePropertiesConfig: { // gets merged with default config
      scrollbarColor: {
        prefix: "scrollbar",
        type: ColorProperty,
      },
    },
  }

This PR also fixes some TS errors.

[kaelansmith]

Hi @ankarhem, just following up about this PR :)

[ankarhem]

    if (options?.selector) this.selector = options.selector;

Please revert this syntax or add curly braces.

[ankarhem]

Hey @kaelansmith, sorry about missing this. I'm not sure I follow why this customization is needed?

If the package requires some specific css variable, couldn't you just alias the one generated from the theme?

Something like:

import { Theme, ColorProperty } from "tailwind-easy-theme";

const theme = new Theme(
  {
    textColor: "#000000",
    scrollbarColor: "#FEFEFE", // custom theme property (see config below)
  }
);

// input.css
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  --scrolly-scroll-prop: hsl(var(--color-scrollbar-color));
}

[kaelansmith]

@ankarhem thanks for following up on this :) Without this customization, scrollbarColor wouldn't get converted from HEX to HSL, because it isn't registered as a "ColorProperty". The default/internal theme property config is this:

const defaultThemePropertiesConfig: ThemePropertiesConfig = {
  colors: { prefix: "", type: ColorProperty },
  backgroundColor: { prefix: "bg", type: ColorProperty },
  textColor: { prefix: "text", type: ColorProperty },
  borderColor: { prefix: "border", type: ColorProperty },
  accentColor: { prefix: "accent", type: ColorProperty },
  ringColor: { prefix: "ring", type: ColorProperty },
  caretColor: { prefix: "caret", type: ColorProperty },
  divideColor: { prefix: "divide", type: ColorProperty },
  outlineColor: { prefix: "outline", type: ColorProperty },
  boxShadowColor: { prefix: "box-shadow", type: ColorProperty },
  ringOffsetColor: { prefix: "ring-offset", type: ColorProperty },
  placeholderColor: { prefix: "placeholder", type: ColorProperty },
  textDecorationColor: { prefix: "text-decoration", type: ColorProperty },
  gradientColorStops: { prefix: "gradient", type: ColorProperty },
  fill: { prefix: "fill", type: ColorProperty },
  stroke: { prefix: "stroke", type: ColorProperty },
};

By exposing this new API, users can extend/modify/override that default config as they wish, unlocking all kinds of flexibility in terms of how certain theme properties get converted into CSS variables.

Does that make sense?

[ankarhem]

Alright, can you rebase this and I'll approve.

[ankarhem]

@kaelansmith ping