vueless 1.2.3-beta.5 → 1.2.3-beta.7

package/bin/constants.d.ts

@@ -1,3 +1,3 @@
 export const SRC_COMPONENTS_PATH: "/src/components";
 export const COMPONENTS_PATH: "/components";
-export const DEFAULT_VUELESS_CONFIG_CONTENT: "import { componentConfigs } from \"./.vueless\";\n\nexport default {\n  /**\n   * Global settings.\n   */\n  primary: \"grayscale\",\n  neutral: \"gray\",\n  text: 14,\n  outline: 2,\n  rounding: 8,\n  disabledOpacity: 50,\n  colorMode: \"auto\",\n\n  /**\n   * Component settings.\n   */\n  components: /*tw*/ {\n    ...componentConfigs,\n  },\n\n  /**\n   * Directive settings.\n   */\n  directives: {},\n\n  /**\n   * Light theme CSS variable settings.\n   */\n  lightTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-600\",\n    \"--vl-primary-lifted\": \"--vl-primary-700\",\n    \"--vl-primary-accented\": \"--vl-primary-800\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-500\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-600\",\n    \"--vl-secondary-accented\": \"--vl-neutral-700\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-600\",\n    \"--vl-success-lifted\": \"--color-green-700\",\n    \"--vl-success-accented\": \"--color-green-800\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-600\",\n    \"--vl-info-lifted\": \"--color-blue-700\",\n    \"--vl-info-accented\": \"--color-blue-800\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-600\",\n    \"--vl-notice-lifted\": \"--color-violet-700\",\n    \"--vl-notice-accented\": \"--color-violet-800\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-600\",\n    \"--vl-warning-lifted\": \"--color-orange-700\",\n    \"--vl-warning-accented\": \"--color-orange-800\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-600\",\n    \"--vl-error-lifted\": \"--color-red-700\",\n    \"--vl-error-accented\": \"--color-red-800\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-900\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-800\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-700\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-500\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-600\",\n    \"--vl-neutral-accented\": \"--vl-neutral-700\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--color-white\",\n    \"--vl-text-muted\": \"--vl-neutral-400\",\n    \"--vl-text-lifted\": \"--vl-neutral-500\",\n    \"--vl-text-accented\": \"--vl-neutral-600\",\n    \"--vl-text\": \"--vl-neutral-900\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-200\",\n    \"--vl-border\": \"--vl-neutral-300\",\n    \"--vl-border-lifted\": \"--vl-neutral-400\",\n    \"--vl-border-accented\": \"--vl-neutral-600\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--color-white\",\n    \"--vl-bg-muted\": \"--vl-neutral-50\",\n    \"--vl-bg-lifted\": \"--vl-neutral-100\",\n    \"--vl-bg-accented\": \"--vl-neutral-200\",\n    \"--vl-bg-inverted\": \"--vl-neutral-900\",\n  },\n\n  /**\n   * Dark theme CSS variable settings.\n   */\n  darkTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-400\",\n    \"--vl-primary-lifted\": \"--vl-primary-500\",\n    \"--vl-primary-accented\": \"--vl-primary-600\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-300\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-400\",\n    \"--vl-secondary-accented\": \"--vl-neutral-500\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-400\",\n    \"--vl-success-lifted\": \"--color-green-500\",\n    \"--vl-success-accented\": \"--color-green-600\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-400\",\n    \"--vl-info-lifted\": \"--color-blue-500\",\n    \"--vl-info-accented\": \"--color-blue-600\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-400\",\n    \"--vl-notice-lifted\": \"--color-violet-500\",\n    \"--vl-notice-accented\": \"--color-violet-600\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-400\",\n    \"--vl-warning-lifted\": \"--color-orange-500\",\n    \"--vl-warning-accented\": \"--color-orange-600\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-400\",\n    \"--vl-error-lifted\": \"--color-red-500\",\n    \"--vl-error-accented\": \"--color-red-600\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-100\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-200\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-300\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-300\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-400\",\n    \"--vl-neutral-accented\": \"--vl-neutral-500\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--vl-neutral-900\",\n    \"--vl-text-muted\": \"--vl-neutral-600\",\n    \"--vl-text-lifted\": \"--vl-neutral-400\",\n    \"--vl-text-accented\": \"--vl-neutral-300\",\n    \"--vl-text\": \"--vl-neutral-100\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-800\",\n    \"--vl-border\": \"--vl-neutral-700\",\n    \"--vl-border-lifted\": \"--vl-neutral-600\",\n    \"--vl-border-accented\": \"--vl-neutral-400\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--vl-neutral-900\",\n    \"--vl-bg-muted\": \"--vl-neutral-800\",\n    \"--vl-bg-lifted\": \"--vl-neutral-800\",\n    \"--vl-bg-accented\": \"--vl-neutral-700\",\n    \"--vl-bg-inverted\": \"--vl-neutral-100\",\n  },\n};\n";
+export const DEFAULT_VUELESS_CONFIG_CONTENT: "import { componentConfigs } from \"./.vueless\";\n\nexport default {\n  /**\n   * Global settings.\n   */\n  primary: \"grayscale\",\n  neutral: \"gray\",\n  text: 14,\n  outline: 2,\n  rounding: 8,\n  letterSpacing: 0,\n  disabledOpacity: 50,\n  colorMode: \"auto\",\n\n  /**\n   * Component settings.\n   */\n  components: /*tw*/ {\n    ...componentConfigs,\n  },\n\n  /**\n   * Directive settings.\n   */\n  directives: {},\n\n  /**\n   * Light theme CSS variable settings.\n   */\n  lightTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-600\",\n    \"--vl-primary-lifted\": \"--vl-primary-700\",\n    \"--vl-primary-accented\": \"--vl-primary-800\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-500\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-600\",\n    \"--vl-secondary-accented\": \"--vl-neutral-700\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-600\",\n    \"--vl-success-lifted\": \"--color-green-700\",\n    \"--vl-success-accented\": \"--color-green-800\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-600\",\n    \"--vl-info-lifted\": \"--color-blue-700\",\n    \"--vl-info-accented\": \"--color-blue-800\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-600\",\n    \"--vl-notice-lifted\": \"--color-violet-700\",\n    \"--vl-notice-accented\": \"--color-violet-800\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-600\",\n    \"--vl-warning-lifted\": \"--color-orange-700\",\n    \"--vl-warning-accented\": \"--color-orange-800\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-600\",\n    \"--vl-error-lifted\": \"--color-red-700\",\n    \"--vl-error-accented\": \"--color-red-800\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-900\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-800\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-700\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-500\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-600\",\n    \"--vl-neutral-accented\": \"--vl-neutral-700\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--color-white\",\n    \"--vl-text-muted\": \"--vl-neutral-400\",\n    \"--vl-text-lifted\": \"--vl-neutral-500\",\n    \"--vl-text-accented\": \"--vl-neutral-600\",\n    \"--vl-text\": \"--vl-neutral-900\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-200\",\n    \"--vl-border\": \"--vl-neutral-300\",\n    \"--vl-border-lifted\": \"--vl-neutral-400\",\n    \"--vl-border-accented\": \"--vl-neutral-600\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--color-white\",\n    \"--vl-bg-muted\": \"--vl-neutral-50\",\n    \"--vl-bg-lifted\": \"--vl-neutral-100\",\n    \"--vl-bg-accented\": \"--vl-neutral-200\",\n    \"--vl-bg-inverted\": \"--vl-neutral-900\",\n  },\n\n  /**\n   * Dark theme CSS variable settings.\n   */\n  darkTheme: {\n    /* Primary colors */\n    \"--vl-primary\": \"--vl-primary-400\",\n    \"--vl-primary-lifted\": \"--vl-primary-500\",\n    \"--vl-primary-accented\": \"--vl-primary-600\",\n\n    /* Secondary colors */\n    \"--vl-secondary\": \"--vl-neutral-300\",\n    \"--vl-secondary-lifted\": \"--vl-neutral-400\",\n    \"--vl-secondary-accented\": \"--vl-neutral-500\",\n\n    /* Success colors */\n    \"--vl-success\": \"--color-green-400\",\n    \"--vl-success-lifted\": \"--color-green-500\",\n    \"--vl-success-accented\": \"--color-green-600\",\n\n    /* Info colors */\n    \"--vl-info\": \"--color-blue-400\",\n    \"--vl-info-lifted\": \"--color-blue-500\",\n    \"--vl-info-accented\": \"--color-blue-600\",\n\n    /* Notice colors */\n    \"--vl-notice\": \"--color-violet-400\",\n    \"--vl-notice-lifted\": \"--color-violet-500\",\n    \"--vl-notice-accented\": \"--color-violet-600\",\n\n    /* Warning colors */\n    \"--vl-warning\": \"--color-orange-400\",\n    \"--vl-warning-lifted\": \"--color-orange-500\",\n    \"--vl-warning-accented\": \"--color-orange-600\",\n\n    /* Error colors */\n    \"--vl-error\": \"--color-red-400\",\n    \"--vl-error-lifted\": \"--color-red-500\",\n    \"--vl-error-accented\": \"--color-red-600\",\n\n    /* Grayscale colors */\n    \"--vl-grayscale\": \"--vl-neutral-100\",\n    \"--vl-grayscale-lifted\": \"--vl-neutral-200\",\n    \"--vl-grayscale-accented\": \"--vl-neutral-300\",\n\n    /* Neutral colors */\n    \"--vl-neutral\": \"--vl-neutral-300\",\n    \"--vl-neutral-lifted\": \"--vl-neutral-400\",\n    \"--vl-neutral-accented\": \"--vl-neutral-500\",\n\n    /* Text neutral colors */\n    \"--vl-text-inverted\": \"--vl-neutral-900\",\n    \"--vl-text-muted\": \"--vl-neutral-600\",\n    \"--vl-text-lifted\": \"--vl-neutral-400\",\n    \"--vl-text-accented\": \"--vl-neutral-300\",\n    \"--vl-text\": \"--vl-neutral-100\",\n\n    /* Border neutral colors */\n    \"--vl-border-muted\": \"--vl-neutral-800\",\n    \"--vl-border\": \"--vl-neutral-700\",\n    \"--vl-border-lifted\": \"--vl-neutral-600\",\n    \"--vl-border-accented\": \"--vl-neutral-400\",\n\n    /* Background neutral colors */\n    \"--vl-bg\": \"--vl-neutral-900\",\n    \"--vl-bg-muted\": \"--vl-neutral-800\",\n    \"--vl-bg-lifted\": \"--vl-neutral-800\",\n    \"--vl-bg-accented\": \"--vl-neutral-700\",\n    \"--vl-bg-inverted\": \"--vl-neutral-100\",\n  },\n};\n";

package/bin/constants.js

@@ -12,6 +12,7 @@ export default {
   text: 14,
   outline: 2,
   rounding: 8,
+  letterSpacing: 0,
   disabledOpacity: 50,
   colorMode: "auto",
 

package/constants.d.ts

@@ -8,6 +8,7 @@ export const TEXT: "text";
 export const OUTLINE: "outline";
 export const ROUNDING: "rounding";
 export const DISABLED_OPACITY: "disabled-opacity";
+export const LETTER_SPACING: "letter-spacing";
 export const COLOR_MODE_KEY: "vl-color-mode";
 export const AUTO_MODE_KEY: "vl-auto-mode";
 export const DARK_MODE_CLASS: "vl-dark";
@@ -24,6 +25,7 @@ export const DEFAULT_ROUNDING: 8;
 export const ROUNDING_DECREMENT: 4;
 export const ROUNDING_INCREMENT: 6;
 export const DEFAULT_DISABLED_OPACITY: 50;
+export const DEFAULT_LETTER_SPACING: 0;
 export const PRIMARY_COLORS: string[];
 export const STATE_COLORS: string[];
 export const NEUTRAL_COLORS: string[];

package/constants.js

@@ -16,6 +16,7 @@ export const TEXT = "text";
 export const OUTLINE = "outline";
 export const ROUNDING = "rounding";
 export const DISABLED_OPACITY = "disabled-opacity";
+export const LETTER_SPACING = "letter-spacing";
 
 /* Vueless color mode keys */
 export const COLOR_MODE_KEY = "vl-color-mode";
@@ -36,6 +37,7 @@ export const DEFAULT_ROUNDING = 8; /* pixels */
 export const ROUNDING_DECREMENT = 4; /* pixels */
 export const ROUNDING_INCREMENT = 6; /* pixels */
 export const DEFAULT_DISABLED_OPACITY = 50; /* presents */
+export const DEFAULT_LETTER_SPACING = 0; /* em */
 
 /* Vueless supported color shades */
 export const PRIMARY_COLORS = [

package/modules.d.ts

@@ -20,12 +20,6 @@ declare module "*.svg?skipsvgo" {
   export default component;
 }
 
-declare module "vueless/storybook" {
-  import type { Config, UnknownObject } from "./types";
-  export function defineConfigWithVueless(config: Config): Promise<UnknownObject>;
-  export function getVuelessStoriesGlob(vuelessEnv: string): Promise<string[]>;
-}
-
 declare module "virtual:vueless/icons" {
   import type { UnknownArray } from "./types";
   export const cachedIcons: UnknownArray;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "1.2.3-beta.5",
+  "version": "1.2.3-beta.7",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "author": "Johnny Grid <hello@vueless.com> (https://vueless.com)",
   "homepage": "https://vueless.com",
@@ -9,9 +9,10 @@
     "access": "public"
   },
   "scripts": {
-    "dev:docs": "storybook dev -p 6006 --docs --no-open",
-    "dev": "storybook dev -p 6006 --no-open",
-    "build": "storybook build --docs",
+    "link:package": "rm -rf node_modules/vueless && ln -s ../src ./node_modules/vueless",
+    "dev:docs": "npm run link:package && storybook dev -p 6006 --docs --no-open",
+    "dev": "npm run link:package && storybook dev -p 6006 --no-open",
+    "build": "npm run link:package && storybook build --docs",
     "preview": "vite preview --host --outDir=storybook-static",
     "ts:check": "vue-tsc --build --force",
     "release:icons": "npx node .scripts/icons",
@@ -21,8 +22,8 @@
     "release:patch": "release-it patch --ci --npm.publish --git.tag --github.release",
     "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 --no-fix src/ test/ .storybook/ .vueless/",
-    "lint:fix": "eslint --fix src/ test/ .storybook/ .vueless/",
+    "lint": "eslint --no-fix src/ test/ .storybook/ .vueless/ .scripts/",
+    "lint:fix": "eslint --fix src/ test/ .storybook/ .vueless/ .scripts/",
     "lint:ci": "eslint --no-fix --max-warnings=0",
     "test": "vitest",
     "test:ci": "vitest --run"
@@ -55,7 +56,7 @@
     "@vue/eslint-config-typescript": "^14.6.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "@vueless/storybook": "^1.1.3-beta.10",
+    "@vueless/storybook": "^1.2.1-beta.5",
     "eslint": "^9.32.0",
     "eslint-plugin-storybook": "^9.0.18",
     "eslint-plugin-vue": "^10.3.0",
@@ -68,8 +69,15 @@
     "vitest": "^3.2.4",
     "vue": "^3.5.18",
     "vue-router": "^4.5.1",
-    "vue-tsc": "^3.0.4",
-    "vueless": "^1.2.1-beta.2"
+    "vue-tsc": "^3.0.4"
+  },
+  "peerDependencies": {
+    "vue-router": "^4.5.0"
+  },
+  "peerDependenciesMeta": {
+    "vue-router": {
+      "optional": true
+    }
   },
   "sideEffects": false,
   "style": "tailwind.css",

package/tailwind.css

@@ -22,7 +22,7 @@
 
 @layer base {
   body {
-    @apply antialiased text-(--vl-text) bg-(--vl-bg) scheme-light dark:scheme-dark;
+    @apply antialiased text-(--vl-text) bg-(--vl-bg) tracking-(--vl-letter-spacing) scheme-light dark:scheme-dark;
   }
 
   [type='checkbox']:checked {

package/types.ts

@@ -113,6 +113,11 @@ export interface ThemeConfig {
    */
   outline?: number | Partial<ThemeConfigOutline>;
 
+  /**
+   * Default components letter spacing.
+   */
+  letterSpacing?: number;
+
   /**
    * Default components opacity for disabled state (in percents).
    */

package/ui.boilerplate/storybook/docs.mdx

@@ -1,7 +1,7 @@
 import { Meta, Title, Subtitle, Description, Primary, Controls, Stories, Source } from "@storybook/addon-docs/blocks";
 import { getSource } from "../../utils/storybook";
 
-import * as stories from "./stories.js";
+import * as stories from "./stories";
 import defaultConfig from "../config?raw"
 
 <Meta of={stories} />

package/ui.button-link/storybook/stories.ts

@@ -31,7 +31,10 @@ export default {
   },
   parameters: {
     docs: {
-      ...getDocsDescription(ULink.__name),
+      ...getDocsDescription(
+        ULink.__name,
+        "For Vue projects <a href='https://router.vuejs.org' target='_blank'>VueRouter</a> needs to be installed.",
+      ),
     },
   },
 } as Meta;

package/utils/node/webTypes.js

@@ -3,7 +3,7 @@ import { getVuelessConfig } from "./vuelessConfig.js";
 export async function buildWebTypes({ vuelessSrcDir, basePath } = {}) {
   try {
     const vuelessConfig = await getVuelessConfig(basePath);
-    const { default: build } = await import("@vueless/storybook/webTypes/index.js");
+    const { buildWebTypes: build } = await import("@vueless/storybook");
 
     await build(vuelessConfig, vuelessSrcDir);
   } catch (error) {

package/utils/storybook.ts

@@ -334,7 +334,7 @@ export function getSlotsFragment(defaultTemplate: string) {
 /**
  * Create story param config to show component description with a link on GitHub.
  */
-export function getDocsDescription(componentName: string | undefined) {
+export function getDocsDescription(componentName: string | undefined, afterText = "") {
   if (!componentName) {
     return {};
   }
@@ -342,7 +342,7 @@ export function getDocsDescription(componentName: string | undefined) {
   let viewOnGitHub = "";
 
   if (COMPONENTS[componentName as ComponentNames]) {
-    viewOnGitHub = `| <a href="https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]}" target="_blank">View on GitHub</a>`;
+    viewOnGitHub = `| <a href="https://github.com/vuelessjs/vueless/tree/main/src/${COMPONENTS[componentName as ComponentNames]}" target="_blank">View on GitHub</a><br/>${afterText}`;
   }
 
   return {

package/utils/theme.ts

@@ -33,6 +33,8 @@ import {
   TEXT_DECREMENT,
   DISABLED_OPACITY,
   DEFAULT_DISABLED_OPACITY,
+  LETTER_SPACING,
+  DEFAULT_LETTER_SPACING,
 } from "../constants";
 
 import type {
@@ -52,6 +54,7 @@ declare interface RootCSSVariableOptions {
   text: ThemeConfigText;
   rounding: ThemeConfigRounding;
   outline: ThemeConfigOutline;
+  letterSpacing: number;
   disabledOpacity: number;
   lightTheme: Partial<VuelessCssVariables>;
   darkTheme: Partial<VuelessCssVariables>;
@@ -150,6 +153,7 @@ export function setTheme(config: ThemeConfig = {}, isCachedAutoMode?: boolean) {
   const text = getText(config.text);
   const outline = getOutlines(config.outline);
   const rounding = getRoundings(config.rounding);
+  const letterSpacing = getLetterSpacing(config.letterSpacing);
   const disabledOpacity = getDisabledOpacity(config.disabledOpacity);
 
   let primary = getPrimaryColor(config.primary);
@@ -215,6 +219,7 @@ export function setTheme(config: ThemeConfig = {}, isCachedAutoMode?: boolean) {
     text,
     outline,
     rounding,
+    letterSpacing,
     disabledOpacity,
     lightTheme,
     darkTheme,
@@ -443,6 +448,24 @@ function getRoundings(rounding?: ThemeConfig["rounding"]) {
   return mergedRounding;
 }
 
+/**
+ * Retrieve letter spacing value and save them to cookie and localStorage.
+ * @return number - letter spacing value.
+ */
+function getLetterSpacing(letterSpacing?: ThemeConfig["letterSpacing"]) {
+  const storageKey = `vl-${LETTER_SPACING}`;
+
+  const spacing = letterSpacing ?? getStored(storageKey) ?? vuelessConfig.letterSpacing;
+  const mergedSpacing = Number(spacing ?? DEFAULT_LETTER_SPACING);
+
+  if (isCSR && letterSpacing) {
+    setCookie(storageKey, String(mergedSpacing));
+    localStorage.setItem(storageKey, String(mergedSpacing));
+  }
+
+  return mergedSpacing;
+}
+
 /**
  * Retrieve disabled opacity value and save them to cookie and localStorage.
  * @return number - opacity value.
@@ -487,6 +510,7 @@ function setRootCSSVariables(vars: RootCSSVariableOptions) {
     "--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-letter-spacing": `${vars.letterSpacing}em`,
     "--vl-disabled-opacity": `${vars.disabledOpacity}%`,
   };
 

package/utils/node/storybook.d.ts

@@ -1 +0,0 @@
-export function defineConfigWithVueless(config: Object): Promise<Object>;

package/utils/node/storybook.js

@@ -1,86 +0,0 @@
-import { getVuelessConfig } from "./vuelessConfig.js";
-import {
-  COMPONENTS,
-  DIRECTIVES,
-  INTERNAL_ENV,
-  VUELESS_LOCAL_DIR,
-  VUELESS_PACKAGE_DIR,
-} from "../../constants.js";
-
-/**
- * Defines the config for Storybook.
- *
- * @param {Object} config - The config object.
- * @return {Promise<Object>} A promise that resolves to the modified config object.
- */
-export function defineConfigWithVueless(config) {
-  return (async () => ({
-    ...config,
-    stories: [...config.stories, ...(await getVuelessStoriesGlob(config?.vuelessEnv))],
-    addons: [
-      ...new Set([
-        ...(config.addons || []),
-        "@storybook/addon-docs",
-        "@storybook/addon-links",
-        "@vueless/storybook-dark-mode",
-        "@storybook/addon-themes",
-      ]),
-    ],
-    staticDirs: ["public"],
-    framework: {
-      ...config.framework,
-      name: "@storybook/vue3-vite",
-      options: {
-        ...config.framework?.options,
-        builder: {
-          ...config.framework?.options?.builder,
-          viteConfigPath: ".storybook/vite.config.js",
-        },
-      },
-    },
-    env: (envConfig) => ({
-      ...envConfig,
-      BASE_URL: "/",
-    }),
-  }))();
-}
-
-/**
- * Retrieves the glob pattern for Vueless stories based on the provided Vueless environment.
- *
- * @param {string} vuelessEnv - The Vueless environment.
- * @return {Promise<string[]>} A promise that resolves to an array of glob patterns for Vueless stories.
- */
-async function getVuelessStoriesGlob(vuelessEnv) {
-  const vuelessSrcDir = vuelessEnv === INTERNAL_ENV ? VUELESS_LOCAL_DIR : VUELESS_PACKAGE_DIR;
-  const vuelessConfig = await getVuelessConfig();
-  const storiesGlob = [];
-
-  for (const [directiveName, directiveDir] of Object.entries(DIRECTIVES)) {
-    const directiveGlobalConfig = vuelessConfig.directives?.[directiveName];
-    const isHiddenStoriesByDirective = directiveGlobalConfig === false;
-    const isHiddenStoriesByKey = directiveGlobalConfig?.storybook === false;
-
-    if (isHiddenStoriesByDirective || isHiddenStoriesByKey) {
-      continue;
-    }
-
-    storiesGlob.push(`../${vuelessSrcDir}/${directiveDir}/storybook/stories.{js,ts}`);
-    storiesGlob.push(`../${vuelessSrcDir}/${directiveDir}/storybook/docs.mdx`);
-  }
-
-  for (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
-    const componentGlobalConfig = vuelessConfig.components?.[componentName];
-    const isHiddenStoriesByComponent = componentGlobalConfig === false;
-    const isHiddenStoriesByKey = componentGlobalConfig?.storybook === false;
-
-    if (isHiddenStoriesByComponent || isHiddenStoriesByKey) {
-      continue;
-    }
-
-    storiesGlob.push(`../${vuelessSrcDir}/${componentDir}/storybook/stories.{js,ts}`);
-    storiesGlob.push(`../${vuelessSrcDir}/${componentDir}/storybook/docs.mdx`);
-  }
-
-  return storiesGlob;
-}