vueless 0.0.474 → 0.0.475

package/directives/tooltip/storybook/stories.d.ts

@@ -0,0 +1,252 @@
+declare namespace _default {
+    export let id: string;
+    export let title: string;
+    export { UIcon as component };
+    export let args: {};
+    export let argTypes: {
+        defaultTemplate?: {
+            table: {
+                disable: boolean;
+            };
+        } | undefined;
+        slotTemplate?: {
+            table: {
+                disable: boolean;
+            };
+        } | undefined;
+    };
+}
+export default _default;
+export function Default(args: any): {
+    components: {
+        UIcon: import("vue").DefineComponent<{}, {
+            $emit: (event: "click", ...args: any[]) => void;
+            config: Record<string, any>;
+            name: string;
+            src: Record<string, any>;
+            tooltip: string;
+            tooltipSettings: Record<string, any>;
+            dataTest: string;
+            internal: boolean;
+            color?: string | undefined;
+            size?: string | undefined;
+            interactive?: boolean | undefined;
+            variant?: string | undefined;
+            $props: {
+                readonly config?: Record<string, any> | undefined;
+                readonly name?: string | undefined;
+                readonly src?: Record<string, any> | undefined;
+                readonly tooltip?: string | undefined;
+                readonly tooltipSettings?: Record<string, any> | undefined;
+                readonly dataTest?: string | undefined;
+                readonly internal?: boolean | undefined;
+                readonly color?: string | undefined;
+                readonly size?: string | undefined;
+                readonly interactive?: boolean | undefined;
+                readonly variant?: string | undefined;
+            };
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    };
+    directives: {
+        tooltip: {
+            mounted(el: any, bindings: any): void;
+            updated(el: any, bindings: any): void;
+            unmounted(el: any): void;
+        };
+    };
+    setup(): {
+        args: any;
+    };
+    template: string;
+};
+export namespace Default {
+    export namespace args_1 {
+        let tooltip: string;
+    }
+    export { args_1 as args };
+}
+export function Settings(args: any): {
+    components: {
+        UIcon: import("vue").DefineComponent<{}, {
+            $emit: (event: "click", ...args: any[]) => void;
+            config: Record<string, any>;
+            name: string;
+            src: Record<string, any>;
+            tooltip: string;
+            tooltipSettings: Record<string, any>;
+            dataTest: string;
+            internal: boolean;
+            color?: string | undefined;
+            size?: string | undefined;
+            interactive?: boolean | undefined;
+            variant?: string | undefined;
+            $props: {
+                readonly config?: Record<string, any> | undefined;
+                readonly name?: string | undefined;
+                readonly src?: Record<string, any> | undefined;
+                readonly tooltip?: string | undefined;
+                readonly tooltipSettings?: Record<string, any> | undefined;
+                readonly dataTest?: string | undefined;
+                readonly internal?: boolean | undefined;
+                readonly color?: string | undefined;
+                readonly size?: string | undefined;
+                readonly interactive?: boolean | undefined;
+                readonly variant?: string | undefined;
+            };
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    };
+    directives: {
+        tooltip: {
+            mounted(el: any, bindings: any): void;
+            updated(el: any, bindings: any): void;
+            unmounted(el: any): void;
+        };
+    };
+    setup(): {
+        args: any;
+    };
+    template: string;
+};
+export namespace Settings {
+    export namespace args_2 {
+        export namespace tooltip_1 {
+            let content: string;
+            let placement: string;
+        }
+        export { tooltip_1 as tooltip };
+    }
+    export { args_2 as args };
+}
+export function Placement(args: any): {
+    components: {
+        UIcon: import("vue").DefineComponent<{}, {
+            $emit: (event: "click", ...args: any[]) => void;
+            config: Record<string, any>;
+            name: string;
+            src: Record<string, any>;
+            tooltip: string;
+            tooltipSettings: Record<string, any>;
+            dataTest: string;
+            internal: boolean;
+            color?: string | undefined;
+            size?: string | undefined;
+            interactive?: boolean | undefined;
+            variant?: string | undefined;
+            $props: {
+                readonly config?: Record<string, any> | undefined;
+                readonly name?: string | undefined;
+                readonly src?: Record<string, any> | undefined;
+                readonly tooltip?: string | undefined;
+                readonly tooltipSettings?: Record<string, any> | undefined;
+                readonly dataTest?: string | undefined;
+                readonly internal?: boolean | undefined;
+                readonly color?: string | undefined;
+                readonly size?: string | undefined;
+                readonly interactive?: boolean | undefined;
+                readonly variant?: string | undefined;
+            };
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+        URow: {
+            new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
+                config: Record<string, any>;
+                dataTest: string;
+                reverse?: boolean | undefined;
+                content?: string | undefined;
+                gap?: string | undefined;
+                align?: string | undefined;
+                justify?: string | undefined;
+                wrap?: boolean | undefined;
+                noMobile?: boolean | undefined;
+                $props: {
+                    readonly config?: Record<string, any> | undefined;
+                    readonly dataTest?: string | undefined;
+                    readonly reverse?: boolean | undefined;
+                    readonly content?: string | undefined;
+                    readonly gap?: string | undefined;
+                    readonly align?: string | undefined;
+                    readonly justify?: string | undefined;
+                    readonly wrap?: boolean | undefined;
+                    readonly noMobile?: boolean | undefined;
+                };
+            }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<{}> & Readonly<{}>, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<{}> & Readonly<{}>, {
+                config: Record<string, any>;
+                dataTest: string;
+                reverse?: boolean | undefined;
+                content?: string | undefined;
+                gap?: string | undefined;
+                align?: string | undefined;
+                justify?: string | undefined;
+                wrap?: boolean | undefined;
+                noMobile?: boolean | undefined;
+                $props: {
+                    readonly config?: Record<string, any> | undefined;
+                    readonly dataTest?: string | undefined;
+                    readonly reverse?: boolean | undefined;
+                    readonly content?: string | undefined;
+                    readonly gap?: string | undefined;
+                    readonly align?: string | undefined;
+                    readonly justify?: string | undefined;
+                    readonly wrap?: boolean | undefined;
+                    readonly noMobile?: boolean | undefined;
+                };
+            }, {}, {}, {}, {}>;
+            __isFragment?: never;
+            __isTeleport?: never;
+            __isSuspense?: never;
+        } & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
+            config: Record<string, any>;
+            dataTest: string;
+            reverse?: boolean | undefined;
+            content?: string | undefined;
+            gap?: string | undefined;
+            align?: string | undefined;
+            justify?: string | undefined;
+            wrap?: boolean | undefined;
+            noMobile?: boolean | undefined;
+            $props: {
+                readonly config?: Record<string, any> | undefined;
+                readonly dataTest?: string | undefined;
+                readonly reverse?: boolean | undefined;
+                readonly content?: string | undefined;
+                readonly gap?: string | undefined;
+                readonly align?: string | undefined;
+                readonly justify?: string | undefined;
+                readonly wrap?: boolean | undefined;
+                readonly noMobile?: boolean | undefined;
+            };
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+            $slots: {
+                default?(_: {}): any;
+            };
+        });
+    };
+    directives: {
+        tooltip: {
+            mounted(el: any, bindings: any): void;
+            updated(el: any, bindings: any): void;
+            unmounted(el: any): void;
+        };
+    };
+    setup(): {
+        args: any;
+    };
+    template: string;
+};
+export namespace Placement {
+    export namespace args_3 {
+        let tooltip_2: {};
+        export { tooltip_2 as tooltip };
+        let _enum: string;
+        export { _enum as enum };
+        export let options: string[];
+    }
+    export { args_3 as args };
+}
+import UIcon from "../../../ui.image-icon/UIcon.vue";

package/directives/tooltip/storybook/stories.js

@@ -36,11 +36,11 @@ const EnumTemplate = (args) => ({
   },
   template: `
     <URow>
-      <UIcon 
-        v-for="option in args.options" 
-        interactive 
-        name="sentiment_satisfied" 
-        v-tooltip="{ content: option, ...args.tooltip, [args.enum]: option }" 
+      <UIcon
+        v-for="option in args.options"
+        interactive
+        name="sentiment_satisfied"
+        v-tooltip="{ content: option, ...args.tooltip, [args.enum]: option }"
       >
     </URow>
   `,

package/directives/tooltip/vTooltip.d.ts

@@ -0,0 +1,6 @@
+declare namespace _default {
+    function mounted(el: any, bindings: any): void;
+    function updated(el: any, bindings: any): void;
+    function unmounted(el: any): void;
+}
+export default _default;

package/index.d.ts

@@ -0,0 +1,15 @@
+import type { App } from 'vue';
+import type { CreateVuelessOptions } from './types';
+export { setTitle } from "./utils/utilHelper.js";
+export { setTheme } from "./utilsTs/utilTheme";
+export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
+export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
+export { useLocale } from "./composables/useLocale.js";
+export { useLoaderProgress } from "./ui.loader-progress/useLoaderProgress.js";
+export { loaderProgressOn, loaderProgressOff } from "./ui.loader-progress/utilLoaderProgress.js";
+export { useLoaderOverlay } from "./ui.loader-overlay/useLoaderOverlay.js";
+export { loaderOverlayOn, loaderOverlayOff } from "./ui.loader-overlay/utilLoaderOverlay.js";
+export { notify, notifySuccess, notifyWarning, notifyError, clearNotifications, setDelayedNotify, getDelayedNotify, } from "./ui.text-notify/utilNotify.js";
+export declare function createVueless(options?: CreateVuelessOptions): {
+    install: (app: App) => void;
+};

package/{index.js → index.ts}

@@ -1,11 +1,14 @@
-/* eslint-disable vue/max-len, prettier/prettier */
+/* eslint-disable prettier/prettier */
 import { createLocale, LocaleSymbol } from "./composables/useLocale.js";
 import { createLoaderOverlay, LoaderOverlaySymbol } from "./ui.loader-overlay/useLoaderOverlay.js";
 import { createLoaderProgress, LoaderProgressSymbol } from "./ui.loader-progress/useLoaderProgress.js";
-import { themeInit } from "./utils/utilTheme.js";
+import { themeInit } from "./utilsTs/utilTheme";
+
+import type { App } from 'vue'
+import type { CreateVuelessOptions } from './types'
 
 export { setTitle } from "./utils/utilHelper.js";
-export { setTheme } from "./utils/utilTheme.js";
+export { setTheme } from "./utilsTs/utilTheme";
 export { default as createVueI18nAdapter } from "./adatper.locale/vue-i18n.js";
 export { default as defaultEnLocale } from "./adatper.locale/locales/en.js";
 export { useLocale } from "./composables/useLocale.js";
@@ -22,14 +25,14 @@ export {
   setDelayedNotify,
   getDelayedNotify,
 } from "./ui.text-notify/utilNotify.js";
-/* eslint-enable vue/max-len, prettier/prettier */
+/* eslint-enable prettier/prettier */
 
-export function createVueless(options = {}) {
+export function createVueless(options: CreateVuelessOptions = {}) {
   const i18n = createLocale(options.i18n);
   const loaderOverlay = createLoaderOverlay();
   const loaderProgress = createLoaderProgress();
 
-  const install = (app) => {
+  const install = (app: App) => {
     app.provide(LocaleSymbol, i18n);
     app.provide(LoaderOverlaySymbol, loaderOverlay);
     app.provide(LoaderProgressSymbol, loaderProgress);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.474",
+  "version": "0.0.475",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [
@@ -21,7 +21,7 @@
   ],
   "homepage": "https://vueless.com",
   "author": "Johnny Grid",
-  "main": "index.js",
+  "main": "index.ts",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -31,13 +31,16 @@
     "dev": "npx @vueless/web-types && node prepare.icons && STORYBOOK_FULL=1 storybook dev -p 6006 --no-open",
     "build": "npx @vueless/web-types && node prepare.icons && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
-    "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package",
+    "ts:check": "vue-tsc --build --force --noEmit",
+    "ts:build": "vue-tsc --build --force --declaration --emitDeclarationOnly",
+    "release:prepare": "npx @vueless/web-types && node prepare.icons && rm -rf dist && mkdir -p dist && cp -r src/. package.json LICENSE web-types.json README.md dist/ && node prepare.package && npm run ts:build",
+    "release:beta": "release-it patch --ci --npm.publish --npm.tag=beta",
     "release:patch": "release-it patch --ci --npm.publish",
     "release:minor": "release-it minor --ci --npm.publish --git.tag --github.release",
     "release:major": "release-it major --ci --npm.publish --git.tag --github.release",
-    "lint": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore src/ .storybook/",
-    "lint:fix": "eslint --ext .vue,.js,.ts --fix --ignore-path .eslintignore src/ .storybook/",
-    "lint:ci": "eslint --ext .vue,.js,.ts --no-fix --ignore-path .eslintignore --max-warnings=0"
+    "lint": "eslint --no-fix src/ .storybook/",
+    "lint:fix": "eslint --fix src/ .storybook/",
+    "lint:ci": "eslint --no-fix --max-warnings=0"
   },
   "dependencies": {
     "@tailwindcss/forms": "^0.5.7",
@@ -49,30 +52,38 @@
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
+    "@eslint/js": "^9.12.0",
     "@material-symbols/svg-500": "^0.17.4",
     "@release-it/bumper": "^6.0.1",
+    "@tsconfig/node20": "^20.1.4",
+    "@types/jsdom": "^21.1.7",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^22.7.7",
     "@vitejs/plugin-vue": "^5.0.5",
-    "@vue/eslint-config-prettier": "^9.0.0",
+    "@vitest/eslint-plugin": "^1.1.7",
+    "@vue/eslint-config-prettier": "^10.0.0",
+    "@vue/eslint-config-typescript": "^14.1.1",
+    "@vue/tsconfig": "^0.5.1",
     "@vueless/plugin-vite": "^0.0.74",
     "@vueless/storybook": "^0.0.37",
     "@vueless/web-types": "^0.0.17",
     "autoprefixer": "^10.4.19",
     "cssnano": "^6.1.2",
-    "eslint": "^8.55.0",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-tailwindcss": "^3.15.1",
+    "eslint": "^9.12.0",
+    "eslint-plugin-storybook": "^0.10.0--canary.156.ce8985b.0",
+    "eslint-plugin-tailwindcss": "^3.17.5",
     "eslint-plugin-vue": "^9.25.0",
+    "globals": "^15.11.0",
+    "jsdom": "^25.0.1",
     "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "prettier-eslint": "^16.3.0",
+    "prettier": "^3.3.3",
     "release-it": "^17.2.1",
-    "vite": "^5.2.13",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.9",
     "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-eslint": "^1.8.1",
     "vue": "^3.5.4",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.3.2",
+    "vue-tsc": "^2.1.6"
   },
   "resolutions": {
     "jackspeak": "2.3.6"

package/preset.tailwind.d.ts

@@ -0,0 +1,116 @@
+import forms from "@tailwindcss/forms";
+import type { TailwindColorShades } from "./types";
+export declare const vuelessContent: string[];
+export declare const vuelessContentVue: string[];
+export declare const vuelessContentNuxt: string[];
+export declare const vuelessTailwindConfig: {
+    darkMode: string[];
+    content: string[];
+    theme: {
+        extend: {
+            colors: {
+                brand: Partial<TailwindColorShades>;
+                gray: Partial<TailwindColorShades>;
+                cool: {
+                    '50': "#f9fafb";
+                    '100': "#f3f4f6";
+                    '200': "#e5e7eb";
+                    '300': "#d1d5db";
+                    '400': "#9ca3af";
+                    '500': "#6b7280";
+                    '600': "#4b5563";
+                    '700': "#374151";
+                    '800': "#1f2937";
+                    '900': "#111827";
+                    '950': "#030712";
+                };
+            };
+            spacing: {
+                "safe-top": string;
+                "safe-bottom": string;
+                "safe-left": string;
+                "safe-right": string;
+            };
+            fontSize: {
+                "2xs": string[];
+            };
+            borderRadius: {
+                dynamic: string;
+            };
+            ringWidth: {
+                dynamic: string;
+            };
+            ringOffsetWidth: {
+                dynamic: string;
+            };
+            ringOffsetColor: {
+                dynamic: string;
+            };
+        };
+        configViewer: {
+            themeReplacements: {
+                "var(--vl-ring)": number;
+                "var(--vl-ring-offset)": number;
+                "var(--vl-ring-offset-color)": string;
+                "var(--vl-rounding)": number;
+            };
+        };
+    };
+};
+export declare function vuelessPreset(): {
+    plugins: (typeof forms)[];
+    safelist: any;
+    darkMode: string[];
+    content: string[];
+    theme: {
+        extend: {
+            colors: {
+                brand: Partial<TailwindColorShades>;
+                gray: Partial<TailwindColorShades>;
+                cool: {
+                    '50': "#f9fafb";
+                    '100': "#f3f4f6";
+                    '200': "#e5e7eb";
+                    '300': "#d1d5db";
+                    '400': "#9ca3af";
+                    '500': "#6b7280";
+                    '600': "#4b5563";
+                    '700': "#374151";
+                    '800': "#1f2937";
+                    '900': "#111827";
+                    '950': "#030712";
+                };
+            };
+            spacing: {
+                "safe-top": string;
+                "safe-bottom": string;
+                "safe-left": string;
+                "safe-right": string;
+            };
+            fontSize: {
+                "2xs": string[];
+            };
+            borderRadius: {
+                dynamic: string;
+            };
+            ringWidth: {
+                dynamic: string;
+            };
+            ringOffsetWidth: {
+                dynamic: string;
+            };
+            ringOffsetColor: {
+                dynamic: string;
+            };
+        };
+        configViewer: {
+            themeReplacements: {
+                "var(--vl-ring)": number;
+                "var(--vl-ring-offset)": number;
+                "var(--vl-ring-offset-color)": string;
+                "var(--vl-rounding)": number;
+            };
+        };
+    };
+};
+export declare function getSafelist(): any;

package/{preset.tailwind.js → preset.tailwind.ts}

@@ -10,9 +10,18 @@ import {
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
+  DEFAULT_BRAND_COLOR,
+  DEFAULT_GRAY_COLOR,
+  GRAYSCALE_COLOR,
 } from "./constants.js";
 
+import type { BrandColors, GrayColors, TailwindColorShades, TailwindSafelist } from "./types";
+
+type TailwindColors = BrandColors | GrayColors | typeof GRAY_COLOR;
+
 const isStrategyOverride = process.env.VUELESS_STRATEGY === "override";
+const brandColor = (process.env.VUELESS_BRAND as BrandColors) || DEFAULT_BRAND_COLOR;
+const grayColor = (process.env.VUELESS_GRAY as GrayColors) || DEFAULT_GRAY_COLOR;
 
 /**
  * Vueless Tailwind CSS `content` config.
@@ -76,6 +85,9 @@ export const vuelessTailwindConfig = {
       fontSize: {
         "2xs": ["0.625rem", "0.875rem"] /* 10px / 14px */,
       },
+      borderRadius: {
+        dynamic: "var(--vl-rounding)",
+      },
       ringWidth: {
         dynamic: "var(--vl-ring)",
       },
@@ -83,10 +95,7 @@ export const vuelessTailwindConfig = {
         dynamic: "var(--vl-ring-offset)",
       },
       ringOffsetColor: {
-        dynamic: "var(--vl-ring-offset-color)",
-      },
-      borderRadius: {
-        dynamic: "var(--vl-rounding)",
+        dynamic: twColorWithOpacity("--vl-ring-offset-color"),
       },
     },
     configViewer: {
@@ -96,8 +105,8 @@ export const vuelessTailwindConfig = {
         "var(--vl-ring-offset)": DEFAULT_RING_OFFSET,
         "var(--vl-ring-offset-color)": DEFAULT_RING_OFFSET_COLOR_LIGHT,
         "var(--vl-rounding)": DEFAULT_ROUNDING,
-        ...getReplacementColors(GRAY_COLOR, GRAY_COLOR),
-        ...getReplacementColors(BRAND_COLOR, GRAY_COLOR),
+        ...getReplacementColors(GRAY_COLOR, grayColor),
+        ...getReplacementColors(BRAND_COLOR, brandColor),
       },
     },
   },
@@ -105,7 +114,6 @@ export const vuelessTailwindConfig = {
 
 /**
  * Generates preset for TailwindCSS base on Vueless config.
- * @returns {Object}
  */
 export function vuelessPreset() {
   return {
@@ -117,10 +125,9 @@ export function vuelessPreset() {
 
 /**
  * Convert sting patterns to RegExp.
- * @returns {Array} - TailwindCSS safelist.
  */
 export function getSafelist() {
-  return JSON.parse(process.env.VUELESS_SAFELIST || "[]").map((rule) => ({
+  return JSON.parse(process.env.VUELESS_SAFELIST || "[]").map((rule: TailwindSafelist) => ({
     ...rule,
     pattern: new RegExp(rule.pattern),
   }));
@@ -128,25 +135,23 @@ export function getSafelist() {
 
 /**
  * Transform CSS variable with RGB numbers into CSS color.
- * @param { String } variableName
- * @returns {Function}
  */
-function twColorWithOpacity(variableName) {
+function twColorWithOpacity(variableName: string) {
   return `rgba(var(${variableName}))`;
 }
 
 /**
  * Convert sting patterns to RegExp.
- * @param { String } color (gray | brand)
- * @returns { Object } - TailwindCSS color object palette.
  */
-function getPalette(color) {
-  let palette = {
+function getPalette(color: string) {
+  const palette: Partial<TailwindColorShades> = {
     DEFAULT: twColorWithOpacity(`--vl-color-${color}-default`),
   };
 
   COLOR_SHADES.forEach((shade) => {
-    palette[shade] = twColorWithOpacity(`--vl-color-${color}-${shade}`);
+    palette[shade as keyof TailwindColorShades] = twColorWithOpacity(
+      `--vl-color-${color}-${shade}`,
+    );
   });
 
   return palette;
@@ -154,17 +159,20 @@ function getPalette(color) {
 
 /**
  * Prepare a color object for theme replacement to fix missing css color variables in `tailwind-config-viewer`.
- * @param { String } color (gray | brand)
- * @param { String } tailwindColor any tailwind color with pallet.
- * @returns { Object } - `tailwind-config-viewer` color replacement object.
  */
-function getReplacementColors(color, tailwindColor) {
+function getReplacementColors(color: "gray" | "brand", tailwindColor: TailwindColors) {
+  if (tailwindColor === GRAYSCALE_COLOR || tailwindColor === COOL_COLOR) {
+    tailwindColor = GRAY_COLOR;
+  }
+
   const varsPalette = {
     [twColorWithOpacity(`--vl-color-${color}-default`)]: colors[tailwindColor][600],
   };
 
   COLOR_SHADES.forEach((shade) => {
-    varsPalette[twColorWithOpacity(`--vl-color-${color}-${shade}`)] = colors[tailwindColor][shade];
+    varsPalette[twColorWithOpacity(`--vl-color-${color}-${shade}`)] = (colors as never)[
+      tailwindColor
+    ][shade];
   });
 
   return varsPalette;