vueless 1.2.8 → 1.2.10-beta.0

package/ui.form-textarea/tests/UTextarea.test.ts

@@ -408,7 +408,7 @@ describe("UTextarea.vue", () => {
         },
       });
 
-      const labelElement = component.getComponent(ULabel).find("label");
+      const labelElement = component.getComponent(ULabel).find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(customLabelContent);
     });
@@ -425,7 +425,7 @@ describe("UTextarea.vue", () => {
         },
       });
 
-      const labelElement = component.getComponent(ULabel).find("label");
+      const labelElement = component.getComponent(ULabel).find("[vl-child-key='label']");
 
       expect(labelElement.text()).toBe(`Modified ${defaultLabel}`);
     });

package/ui.text-alert/config.ts

@@ -1,6 +1,6 @@
 export default /*tw*/ {
   wrapper: {
-    base: "p-4 border-box flex flex-col border rounded-medium w-full",
+    base: "p-4 border-box flex flex-col border border-solid rounded-medium w-full",
     variants: {
       variant: {
         solid: "text-inverted bg-{color} border-transparent",

package/ui.text-badge/config.ts

@@ -2,7 +2,7 @@ export default /*tw*/ {
   badge: {
     base: `
       inline-flex items-center justify-between py-1
-      border rounded-medium !leading-none outline-hidden
+      border border-solid rounded-medium !leading-none outline-hidden
     `,
     variants: {
       variant: {

package/utils/helper.ts

@@ -196,6 +196,10 @@ export function toNumber(value: unknown): number | undefined {
     return value;
   }
 
+  if (typeof value === "boolean") {
+    return Number(value);
+  }
+
   if (typeof value === "string" && value.trim() !== "") {
     const number = Number(value);
 

package/utils/node/dynamicProps.d.ts

@@ -1,2 +1,5 @@
-export function setCustomPropTypes({ vuelessSrcDir, basePath }?: {}): Promise<void>;
-export function removeCustomPropTypes(srcDir: any): Promise<void>;
+export function setCustomPropTypes({ vuelessSrcDir, basePath }?: {
+    vuelessSrcDir: string;
+    basePath: string;
+}): Promise<void>;
+export function removeCustomPropTypes(srcDir: string): Promise<void>;

package/utils/node/dynamicProps.js

@@ -1,6 +1,6 @@
+import path from "node:path";
 import fs from "node:fs/promises";
 import { existsSync } from "node:fs";
-import path from "node:path";
 
 import { removeFolderIfEmpty } from "./helper.js";
 import { getVuelessConfig } from "./vuelessConfig.js";
@@ -8,86 +8,97 @@ import { getVuelessConfig } from "./vuelessConfig.js";
 import {
   CACHE_DIR,
   COMPONENTS,
-  GRAYSCALE_COLOR,
+  TEXT_COLOR,
   INHERIT_COLOR,
   PRIMARY_COLOR,
-  TEXT_COLOR,
+  GRAYSCALE_COLOR,
+  VUELESS_CACHE_DIR,
 } from "../../constants.js";
+import { buildWebTypes } from "./webTypes.js";
 
+/* local constants */
+const SAFE_COLORS = [PRIMARY_COLOR, GRAYSCALE_COLOR, INHERIT_COLOR, TEXT_COLOR];
 const OPTIONAL_MARK = "?";
 const CLOSING_BRACKET = "}";
 const IGNORE_PROP = "@ignore";
 const CUSTOM_PROP = "@custom";
 
+/* regular expressions */
 const PROPS_INTERFACE_REG_EXP = /export\s+interface\s+Props(?:<[^>]+>)?\s*{([^}]*)}/s;
 const UNION_SYMBOLS_REG_EXP = /[?|:"|;]/g;
 const WORD_IN_QUOTE_REG_EXP = /"([^"]+)"/g;
 
-const DEFAULT_SAFE_COLORS = [PRIMARY_COLOR, GRAYSCALE_COLOR, INHERIT_COLOR, TEXT_COLOR];
-
+/**
+ * Updates custom PropTypes for components based on provided configuration and colors.
+ *
+ * @param {Object} options Configuration options.
+ * @param {string} options.vuelessSrcDir The source directory for Vueless components.
+ * @param {string} options.basePath The base path for retrieving the Vueless configuration file.
+ * @return {Promise<void>} Resolves when custom PropTypes for all components are updated successfully.
+ */
 export async function setCustomPropTypes({ vuelessSrcDir, basePath } = {}) {
   const vuelessConfig = await getVuelessConfig(basePath);
 
+  const hasCustomColors = vuelessConfig.colors?.length;
+  const hasCustomColorProp = !!Object.values(vuelessConfig.components || {}).find(
+    (component) => component.props?.color,
+  );
+
+  let componentsWithColorProp = [];
+
+  /* Build web-types.json to get list of components with color prop */
+  if (hasCustomColors || hasCustomColorProp) {
+    await buildWebTypes({ vuelessSrcDir, basePath });
+
+    componentsWithColorProp = await getComponentsWithColors();
+  }
+
   for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
     let componentGlobalConfig = vuelessConfig.components?.[componentName];
+    const hasDefaultColorProp = componentsWithColorProp.some((item) => item.name === componentName);
+
+    /* Skip components without props and without global colors in config */
+    if (!componentGlobalConfig?.props && !(hasCustomColors && hasDefaultColorProp)) {
+      continue;
+    }
 
-    if (vuelessConfig.colors && vuelessConfig.colors.length && componentGlobalConfig) {
-      const customProps = componentGlobalConfig.props || [];
-      const colorPropsIndex = customProps.findIndex((prop) => prop.name === "color");
-      const isCustomColorProp = colorPropsIndex !== -1;
+    /* Add colors to the default or custom color prop */
+    if (componentGlobalConfig?.props?.color || (hasCustomColors && hasDefaultColorProp)) {
+      // eslint-disable-next-line prettier/prettier
+      const defaultColors = componentsWithColorProp.find((component) => component.name === componentName)?.colors || [];
+      const safelistedColors = defaultColors.filter((color) => SAFE_COLORS.includes(color));
 
-      const modifiedCustomColorProp = isCustomColorProp
-        ? customProps.with(colorPropsIndex, {
-            ...customProps[colorPropsIndex],
-            name: "color",
+      componentGlobalConfig = {
+        ...(componentGlobalConfig || {}),
+        props: {
+          ...(componentGlobalConfig?.props || {}),
+          color: {
+            ...(componentGlobalConfig?.props?.color || {}),
             values: [
               ...new Set([
-                ...(customProps[colorPropsIndex]?.values || []),
-                ...vuelessConfig.colors,
-                ...DEFAULT_SAFE_COLORS,
+                ...(componentGlobalConfig?.props?.color?.values || []),
+                ...(vuelessConfig.colors || []),
+                ...safelistedColors,
               ]),
             ],
-          })
-        : undefined;
-
-      const customPropsWithColor = [
-        ...customProps,
-        {
-          name: "color",
-          values: [...new Set([...vuelessConfig.colors, ...DEFAULT_SAFE_COLORS])],
-          required: false,
-        },
-      ];
-
-      componentGlobalConfig = {
-        ...componentGlobalConfig,
-        props: isCustomColorProp ? modifiedCustomColorProp : customPropsWithColor,
-      };
-    }
-
-    if (vuelessConfig.colors && vuelessConfig.colors.length && !componentGlobalConfig) {
-      componentGlobalConfig = {
-        props: [
-          {
-            name: "color",
-            values: [...new Set([...vuelessConfig.colors, ...DEFAULT_SAFE_COLORS])],
-            required: false,
           },
-        ],
+        },
       };
     }
 
-    const isCustomProps = componentGlobalConfig && componentGlobalConfig.props;
+    const cachePath = path.join(vuelessSrcDir, componentDir);
 
-    if (isCustomProps) {
-      const cachePath = path.join(vuelessSrcDir, componentDir);
-
-      await cacheComponentTypes(cachePath);
-      await modifyComponentTypes(cachePath, componentGlobalConfig.props);
-    }
+    await cacheComponentTypes(cachePath);
+    await modifyComponentTypes(cachePath, componentGlobalConfig.props);
   }
 }
 
+/**
+ * Removes custom prop types definitions for components.
+ *
+ * @param {string} srcDir - The source directory containing the component directories.
+ * @return {Promise<void>} - A promise that resolves when custom prop types have been removed.
+ */
 export async function removeCustomPropTypes(srcDir) {
   for await (const componentDir of Object.values(COMPONENTS)) {
     await restoreComponentTypes(path.join(srcDir, componentDir));
@@ -95,6 +106,39 @@ export async function removeCustomPropTypes(srcDir) {
   }
 }
 
+/**
+ * Retrieves a list of components that have a "color" prop from the `web-types.json` file.
+ *
+ * @return {Promise<Array<string>>} A promise that resolves with an array of component names.
+ */
+async function getComponentsWithColors() {
+  const webTypesPath = path.join(VUELESS_CACHE_DIR, "web-types.json");
+
+  if (!existsSync(webTypesPath)) {
+    return [];
+  }
+
+  const webTypesContent = await fs.readFile(webTypesPath, "utf8");
+  const webTypes = JSON.parse(webTypesContent);
+
+  if (!webTypes.contributions?.html?.tags) {
+    return [];
+  }
+
+  return webTypes.contributions.html.tags
+    .filter((component) => component?.attributes.some((attribute) => attribute.name === "color"))
+    .map((component) => ({
+      name: component.name,
+      colors: component.attributes.find((attribute) => attribute.name === "color")?.enum,
+    }));
+}
+
+/**
+ * Caches the component types by copying a source file to a specified cache directory.
+ *
+ * @param {string} filePath - The directory path where the source file is located and the cache directory will be created.
+ * @return {Promise<void>} A promise that resolves when the file has been successfully copied, or immediately if no action is taken.
+ */
 async function cacheComponentTypes(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(filePath, "types.ts");
@@ -111,6 +155,13 @@ async function cacheComponentTypes(filePath) {
   await fs.cp(sourceFile, destFile);
 }
 
+/**
+ * Clears the cached component types by removing the specified cache file
+ * and deleting the corresponding folder if it is empty.
+ *
+ * @param {string} filePath - The base file path where the cache directory resides.
+ * @return {Promise<void>} A promise that resolves when the cache has been cleared.
+ */
 async function clearComponentTypesCache(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(cacheDir, "types.ts");
@@ -122,6 +173,13 @@ async function clearComponentTypesCache(filePath) {
   await removeFolderIfEmpty(cacheDir);
 }
 
+/**
+ * Restores the component type definitions by copying a cached file to the destination.
+ *
+ * @param {string} filePath - The directory path where the component types should be restored.
+ * This path serves as the base for locating the cached file and the destination file.
+ * @return {Promise<void>} A promise that resolves when the component types have been successfully restored.
+ */
 async function restoreComponentTypes(filePath) {
   const cacheDir = path.join(filePath, CACHE_DIR);
   const sourceFile = path.join(cacheDir, "types.ts");
@@ -132,6 +190,14 @@ async function restoreComponentTypes(filePath) {
   }
 }
 
+/**
+ * Extracts and processes the values from multiple lines based on the given indices.
+ *
+ * @param {Array<string>} lines - The array of lines to process.
+ * @param {number} propIndex - The index from which to start slicing the lines.
+ * @param {number} propEndIndex - The index until which to slice the lines (inclusive).
+ * @return {Array<string>} An array of strings with processed values, trimmed of unnecessary symbols.
+ */
 function getMultiLineUnionValues(lines, propIndex, propEndIndex) {
   return lines
     .slice(propIndex)
@@ -139,6 +205,15 @@ function getMultiLineUnionValues(lines, propIndex, propEndIndex) {
     .map((item) => item.replace(UNION_SYMBOLS_REG_EXP, "").trim());
 }
 
+/**
+ * Extracts and returns inline union values from the specified lines of text,
+ * based on provided property indices.
+ *
+ * @param {string[]} lines - The array of string lines to extract union values from.
+ * @param {number} propIndex - The starting index in the lines array from where extraction begins.
+ * @param {number} propEndIndex - The ending index in the lines array up to which extraction is performed.
+ * @return {string[]} An array of extracted union values, or an empty array if no matches are found.
+ */
 function getInlineUnionValues(lines, propIndex, propEndIndex) {
   const types = lines
     .slice(propIndex)
@@ -167,10 +242,8 @@ async function modifyComponentTypes(filePath, props) {
 
     const lines = propsInterface.split("\n");
 
-    for (const prop of props) {
-      const { name, type, values = [], description, required, ignore } = prop;
-
-      if (!name) return;
+    for (const name in props) {
+      const { type = "string", values = [], description, required, ignore } = props[name];
 
       /* Find line with prop. */
       const propRegex = new RegExp(`^\\s*${name}[?:]?\\s*:`);

package/utils/node/helper.d.ts

@@ -1,15 +1,18 @@
-export function getDirFiles(dirPath: any, ext: any, { recursive, exclude }?: {
+export function getDirFiles(dirPath: string, ext: string, { recursive, exclude }?: {
     recursive?: boolean | undefined;
-    exclude?: never[] | undefined;
+    exclude?: string[] | undefined;
 }): Promise<string[]>;
 export function getNuxtDirs(): string[];
 export function getVueDirs(): string[];
 export function getVuelessConfigDirs(): string[];
-export function getMergedComponentConfig(name: any): Promise<any>;
-export function getDefaultComponentConfig(name: any, configDir: any): Promise<{}>;
-export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {}): Promise<void>;
-export function buildTSFile(entryPath: any, configOutFile: any): Promise<void>;
-export function removeFolderIfEmpty(dirPath: any): Promise<void>;
+export function getMergedComponentConfig(name: string): Promise<Object>;
+export function getDefaultComponentConfig(name: string, configDir: string): Promise<Object>;
+export function cacheMergedConfigs({ vuelessSrcDir, basePath }?: {
+    vuelessSrcDir: string;
+    basePath: string;
+}): Promise<void>;
+export function buildTSFile(entryPath: string, configOutFile: string): Promise<void>;
+export function removeFolderIfEmpty(dirPath: string): Promise<void>;
 export function detectTypeScript(): Promise<boolean>;
 export function autoImportUserConfigs(basePath?: string): Promise<void>;
 export function generateConfigIndexContent(imports?: string[], componentEntries?: string[]): Promise<string>;

package/utils/node/helper.js

@@ -20,6 +20,16 @@ import {
   CONFIG_INDEX_FILE_NAME,
 } from "../../constants.js";
 
+/**
+ * Retrieves a list of file names in a specified directory that match the given extension and filtering criteria.
+ *
+ * @param {string} dirPath - The path of the directory to search for files.
+ * @param {string} ext - The extension of the files to include in the result.
+ * @param {Object} [options] - Optional settings to customize the file search.
+ * @param {boolean} [options.recursive=true] - Whether to search directories recursively.
+ * @param {string[]} [options.exclude=[]] - A list of file or directory names to exclude from the result.
+ * @return {Promise<string[]>} - A promise that resolves to an array of file paths that match the specified criteria.
+ */
 export async function getDirFiles(dirPath, ext, { recursive = true, exclude = [] } = {}) {
   let fileNames = [];
 
@@ -65,6 +75,10 @@ export async function getDirFiles(dirPath, ext, { recursive = true, exclude = []
     .filter((filePath) => !statSync(filePath).isDirectory());
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Nuxt.js project.
+ * @return {string[]}.
+ */
 export function getNuxtDirs() {
   return [
     path.join(cwd(), "app"),
@@ -82,14 +96,28 @@ export function getNuxtDirs() {
   ];
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Vue.js project.
+ * @return {string[]}.
+ */
 export function getVueDirs() {
   return [path.join(cwd(), "src")];
 }
 
+/**
+ * Retrieves an array of directory paths and specific file paths within the current working directory related to a Vueless project.
+ * @return {string[]}.
+ */
 export function getVuelessConfigDirs() {
   return [path.join(cwd(), VUELESS_CONFIG_DIR)];
 }
 
+/**
+ * Retrieves the merged config for a specific component.
+ *
+ * @param {string} name - The name of the component.
+ * @return {Promise<Object>} A promise that resolves to the merged configuration object for the specified component.
+ */
 export async function getMergedComponentConfig(name) {
   const configOutPath = path.join(cwd(), `${VUELESS_MERGED_CONFIGS_CACHED_DIR}/${name}.json`);
 
@@ -100,6 +128,13 @@ export async function getMergedComponentConfig(name) {
   }
 }
 
+/**
+ * Retrieves the default config for a specific component.
+ *
+ * @param {string} name - The name of the component.
+ * @param {string} configDir - The directory path where the component's configuration file is located.
+ * @return {Promise<Object>} A promise that resolves to the default configuration object for the specified component.
+ */
 export async function getDefaultComponentConfig(name, configDir) {
   const configOutPath = path.join(cwd(), `${VUELESS_CONFIGS_CACHED_DIR}/${name}.mjs`);
   let config = {};
@@ -117,6 +152,14 @@ export async function getDefaultComponentConfig(name, configDir) {
   return config;
 }
 
+/**
+ * Caches merged configs for all components.
+ *
+ * @param {Object} options - Configuration options.
+ * @param {string} options.vuelessSrcDir - The source directory for Vueless components.
+ * @param {string} options.basePath - The base path for retrieving the Vueless configuration file.
+ * @return {Promise<void>} A promise that resolves when all merged configs have been cached.
+ */
 export async function cacheMergedConfigs({ vuelessSrcDir, basePath } = {}) {
   const vuelessConfig = await getVuelessConfig(basePath);
   const componentNames = Object.entries(COMPONENTS);
@@ -146,6 +189,13 @@ export async function cacheMergedConfigs({ vuelessSrcDir, basePath } = {}) {
   }
 }
 
+/**
+ * Builds a TypeScript file into a JavaScript file using esbuild.
+ *
+ * @param {string} entryPath - The path to the TypeScript file to be built.
+ * @param {string} configOutFile - The output path for the resulting JavaScript file.
+ * @return {Promise<void>} A promise that resolves when the build is complete.
+ */
 export async function buildTSFile(entryPath, configOutFile) {
   await esbuild.build({
     entryPoints: [entryPath],
@@ -158,13 +208,20 @@ export async function buildTSFile(entryPath, configOutFile) {
   });
 }
 
+/**
+ * Removes a folder if it is empty.
+ * @param {string} dirPath - The path to the directory to be removed.
+ * @return {Promise<void>} A promise that resolves when the directory has been removed.
+ */
 export async function removeFolderIfEmpty(dirPath) {
-  if (existsSync(dirPath)) {
+  try {
     const files = await readdir(dirPath);
 
     if (!files.length) {
-      await rmdir(dirPath);
+      await rmdir(dirPath, { recursive: false, force: true });
     }
+  } catch {
+    // suppress errors
   }
 }
 

package/utils/node/tailwindSafelist.js

@@ -233,7 +233,14 @@ function getClassesToSafelist(config) {
   const safelistItems = [];
 
   for (const key in config) {
-    if (key === SYSTEM_CONFIG_KEY.defaults) continue;
+    const nonClassKeys = [
+      SYSTEM_CONFIG_KEY.defaults,
+      SYSTEM_CONFIG_KEY.props,
+      SYSTEM_CONFIG_KEY.i18n,
+      SYSTEM_CONFIG_KEY.colors,
+    ];
+
+    if (nonClassKeys.some((item) => key === item)) continue;
 
     if (Object.hasOwn(config, key)) {
       const classes = config[key];
@@ -267,7 +274,7 @@ function getClassesToSafelist(config) {
  */
 function getSafelistClasses(config, colors) {
   const classes = new Set();
-  const defaultColor = config.defaults?.color || "";
+  const defaultColor = config.defaults?.color || config.props?.color?.default || "";
 
   getClassesToSafelist(config).map((safelistClass) => {
     [...colors, defaultColor].forEach((color) => {

package/utils/theme.ts

@@ -35,6 +35,8 @@ import {
   DEFAULT_DISABLED_OPACITY,
   LETTER_SPACING,
   DEFAULT_LETTER_SPACING,
+  LIGHT_THEME,
+  DARK_THEME,
 } from "../constants";
 
 import type {
@@ -49,18 +51,6 @@ import type {
 } from "../types";
 import { ColorMode } from "../types";
 
-declare interface RootCSSVariableOptions {
-  primary: PrimaryColors | string;
-  neutral: NeutralColors | string;
-  text: ThemeConfigText;
-  rounding: ThemeConfigRounding;
-  outline: ThemeConfigOutline;
-  letterSpacing: number;
-  disabledOpacity: number;
-  lightTheme: Partial<VuelessCssVariables>;
-  darkTheme: Partial<VuelessCssVariables>;
-}
-
 declare interface SetColorMode {
   colorMode: `${ColorMode}`;
   isColorModeAuto: boolean;
@@ -191,6 +181,8 @@ export function resetTheme() {
     `vl-${ROUNDING}-lg`,
     `vl-${LETTER_SPACING}`,
     `vl-${DISABLED_OPACITY}`,
+    `vl-${LIGHT_THEME}`,
+    `vl-${DARK_THEME}`,
   ];
 
   themeKeys.forEach((key) => {
@@ -217,8 +209,8 @@ export function getTheme(config?: ThemeConfig): MergedThemeConfig {
   const letterSpacing = getLetterSpacing(config?.letterSpacing);
   const disabledOpacity = getDisabledOpacity(config?.disabledOpacity);
 
-  const lightTheme = merge({}, DEFAULT_LIGHT_THEME, vuelessConfig.lightTheme);
-  const darkTheme = merge({}, DEFAULT_DARK_THEME, vuelessConfig.darkTheme);
+  const lightTheme = getLightTheme(config?.lightTheme);
+  const darkTheme = getDarkTheme(config?.darkTheme);
 
   return {
     colorMode,
@@ -254,8 +246,8 @@ export function setTheme(config: ThemeConfig = {}) {
   let primary = getPrimaryColor(config.primary);
   const neutral = getNeutralColor(config.neutral);
 
-  const lightTheme = merge({}, DEFAULT_LIGHT_THEME, vuelessConfig.lightTheme, config.lightTheme);
-  const darkTheme = merge({}, DEFAULT_DARK_THEME, vuelessConfig.darkTheme, config.darkTheme);
+  const lightTheme = getLightTheme(config.lightTheme);
+  const darkTheme = getDarkTheme(config.darkTheme);
 
   /* Redeclare primary color if grayscale color set as default */
   if (primary === GRAYSCALE_COLOR) {
@@ -330,10 +322,10 @@ export function setTheme(config: ThemeConfig = {}) {
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function normalizeThemeConfig(theme: any): MergedThemeConfig {
   return {
-    colorMode: theme.colorMode,
-    isColorModeAuto: theme.isColorModeAuto,
-    primary: theme.primary,
-    neutral: theme.neutral,
+    colorMode: String(theme.colorMode ?? "") as ColorMode,
+    isColorModeAuto: !!toNumber(theme.isColorModeAuto),
+    primary: String(theme.primary ?? ""),
+    neutral: String(theme.neutral ?? ""),
     text: {
       xs: toNumber(theme.text?.xs),
       sm: toNumber(theme.text?.sm),
@@ -608,7 +600,7 @@ function getLetterSpacing(letterSpacing?: ThemeConfig["letterSpacing"]) {
   const storageKey = `vl-${LETTER_SPACING}`;
 
   const spacing = letterSpacing ?? getStored(storageKey) ?? vuelessConfig.letterSpacing;
-  const mergedSpacing = Math.max(0, Number(spacing ?? DEFAULT_LETTER_SPACING));
+  const mergedSpacing = Number(spacing ?? DEFAULT_LETTER_SPACING);
 
   if (isCSR && letterSpacing !== undefined) {
     setCookie(storageKey, String(mergedSpacing));
@@ -636,24 +628,76 @@ function getDisabledOpacity(disabledOpacity?: ThemeConfig["disabledOpacity"]) {
   return mergedOpacity;
 }
 
+/**
+ * Retrieve light theme configuration and save them to cookie and localStorage.
+ * @return Partial<VuelessCssVariables> - light theme configuration.
+ */
+function getLightTheme(lightTheme?: Partial<VuelessCssVariables>) {
+  const storageKey = `vl-${LIGHT_THEME}`;
+
+  const storedLightTheme: Partial<VuelessCssVariables> = JSON.parse(getStored(storageKey) ?? "{}");
+
+  const mergedLightTheme = merge(
+    {},
+    DEFAULT_LIGHT_THEME,
+    vuelessConfig.lightTheme,
+    storedLightTheme,
+    lightTheme,
+  );
+
+  if (isCSR && lightTheme !== undefined) {
+    const themeString = JSON.stringify(mergedLightTheme);
+
+    localStorage.setItem(storageKey, themeString);
+  }
+
+  return mergedLightTheme;
+}
+
+/**
+ * Retrieve dark theme configuration and save them to cookie and localStorage.
+ * @return Partial<VuelessCssVariables> - dark theme configuration.
+ */
+function getDarkTheme(darkTheme?: Partial<VuelessCssVariables>) {
+  const storageKey = `vl-${DARK_THEME}`;
+
+  const storedDarkTheme: Partial<VuelessCssVariables> = JSON.parse(getStored(storageKey) ?? "{}");
+
+  const mergedDarkTheme = merge(
+    {},
+    DEFAULT_DARK_THEME,
+    vuelessConfig.darkTheme,
+    storedDarkTheme,
+    darkTheme,
+  );
+
+  if (isCSR && darkTheme !== undefined) {
+    const themeString = JSON.stringify(mergedDarkTheme);
+
+    localStorage.setItem(storageKey, themeString);
+  }
+
+  return mergedDarkTheme;
+}
+
 /**
  * Generate and apply Vueless CSS variables.
  * @return string - Vueless CSS variables string.
  */
-function setRootCSSVariables(vars: RootCSSVariableOptions) {
+export function setRootCSSVariables(vars: MergedThemeConfig) {
   let darkVariables: Partial<VuelessCssVariables> = {};
 
   let variables: Partial<VuelessCssVariables> = {
-    "--vl-text-xs": `${vars.text.xs / PX_IN_REM}rem`,
-    "--vl-text-sm": `${vars.text.sm / PX_IN_REM}rem`,
-    "--vl-text-md": `${vars.text.md / PX_IN_REM}rem`,
-    "--vl-text-lg": `${vars.text.lg / PX_IN_REM}rem`,
+    "--vl-text-xs": `${Number(vars.text?.xs ?? 0) / PX_IN_REM}rem`,
+    "--vl-text-sm": `${Number(vars.text?.sm ?? 0) / PX_IN_REM}rem`,
+    "--vl-text-md": `${Number(vars.text?.md ?? 0) / PX_IN_REM}rem`,
+    "--vl-text-lg": `${Number(vars.text?.lg ?? 0) / PX_IN_REM}rem`,
     "--vl-outline-sm": `${vars.outline.sm}px`,
     "--vl-outline-md": `${vars.outline.md}px`,
     "--vl-outline-lg": `${vars.outline.lg}px`,
-    "--vl-rounding-sm": `${vars.rounding.sm / PX_IN_REM}rem`,
-    "--vl-rounding-md": `${vars.rounding.md / PX_IN_REM}rem`,
-    "--vl-rounding-lg": `${vars.rounding.lg / PX_IN_REM}rem`,
+    "--vl-rounding-sm": `${Number(vars.rounding.sm ?? 0) / PX_IN_REM}rem`,
+    "--vl-rounding-md": `${Number(vars.rounding.md ?? 0) / PX_IN_REM}rem`,
+    "--vl-rounding-lg": `${Number(vars.rounding.lg ?? 0) / PX_IN_REM}rem`,
     "--vl-letter-spacing": `${vars.letterSpacing}em`,
     "--vl-disabled-opacity": `${vars.disabledOpacity}%`,
   };
@@ -668,7 +712,7 @@ function setRootCSSVariables(vars: RootCSSVariableOptions) {
       `var(--color-${vars.neutral}-${shade})`;
   }
 
-  const [light, dark] = generateCSSColorVariables(vars.lightTheme, vars.darkTheme);
+  const [light, dark] = generateCSSColorVariables(vars.lightTheme ?? {}, vars.darkTheme ?? {});
 
   variables = { ...variables, ...light };
   darkVariables = { ...darkVariables, ...dark };
@@ -719,7 +763,7 @@ function setCSSVariables(
     .join(" ");
 
   const rootVariables = `
-    :root {${variablesString}}
+    :host, :root {${variablesString}}
     .${DARK_MODE_CLASS} {${darkVariablesString}}
   `;