vueless 0.0.824 → 0.0.825-beta.1

package/bin/constants.js

@@ -6,13 +6,24 @@ export default {
    * Global settings.
    */
   strategy: "merge",
-  brand: "grayscale",
-  gray: "cool",
+  primary: "grayscale",
+  neutral: "gray",
   outline: 2,
   rounding: 8,
+  fontSize: 14,
   colorMode: "auto",
   baseClasses: "",
 
+  /**
+   * Light theme CSS variable settings.
+   */
+  lightTheme: {},
+
+  /**
+   * Dark theme CSS variable settings.
+   */
+  darkTheme: {},
+
   /**
    * Directive settings.
    */
@@ -23,20 +34,10 @@ export default {
    */
   components: /*tw*/ {},
 
-  /**
-   * Tailwind CSS theme config.
-   * https://tailwindcss.com/docs/theme
-   */
-  tailwindTheme: {
-    extend: {
-      colors: {},
-    },
-  },
-
   /**
    * Custom classes TailwindMerge settings.
    * All lists of rules available here:
-   * https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts
+   * https://github.com/dcastil/tailwind-merge/blob/main/src/lib/default-config.ts
    */
   tailwindMerge: {},
 };

package/composables/useUI.ts

@@ -1,7 +1,7 @@
-import { ref, watch, watchEffect, getCurrentInstance, toValue, useAttrs, computed } from "vue";
+import { ref, watch, getCurrentInstance, toValue, useAttrs, computed } from "vue";
 import { isEqual } from "lodash-es";
 
-import { cx, cva, setColor, getColor, vuelessConfig, getMergedConfig } from "../utils/ui.ts";
+import { cx, cva, setColor, vuelessConfig, getMergedConfig } from "../utils/ui.ts";
 import { isCSR } from "../utils/helper.ts";
 import {
   STRATEGY_TYPE,
@@ -20,9 +20,9 @@ import type {
   KeyAttrs,
   KeysAttrs,
   Strategies,
-  BrandColors,
   MutatedProps,
   UnknownObject,
+  PrimaryColors,
   ComponentNames,
   NestedComponent,
   ComponentConfigFull,
@@ -56,16 +56,22 @@ export default function useUI<T>(
   const firstClassKey = Object.keys(defaultConfig || {})[0];
   const config = ref({}) as Ref<ComponentConfigFull<T>>;
 
-  watchEffect(() => {
-    const propsConfig = props.config as ComponentConfigFull<T>;
+  watch(
+    () => props.config,
+    (newVal, oldVal) => {
+      if (isEqual(newVal, oldVal)) return;
+
+      const propsConfig = props.config as ComponentConfigFull<T>;
 
-    config.value = getMergedConfig({
-      defaultConfig,
-      globalConfig,
-      propsConfig,
-      vuelessStrategy,
-    }) as ComponentConfigFull<T>;
-  });
+      config.value = getMergedConfig({
+        defaultConfig,
+        globalConfig,
+        propsConfig,
+        vuelessStrategy,
+      }) as ComponentConfigFull<T>;
+    },
+    { deep: true, immediate: true },
+  );
 
   /**
    * Get classes by given key (including CVA if config set).
@@ -74,7 +80,7 @@ export default function useUI<T>(
     return computed(() => {
       const mutatedPropsValue = toValue(mutatedProps);
       const value = (config.value as ComponentConfigFull<T>)[key];
-      const color = (toValue(mutatedProps || {}).color || props.color) as BrandColors;
+      const color = (toValue(mutatedProps || {}).color || props.color) as PrimaryColors;
 
       const isTopLevelKey = (topLevelClassKey || firstClassKey) === key;
       const isNestedComponent = Boolean(getNestedComponent(value));
@@ -85,7 +91,7 @@ export default function useUI<T>(
         classes = cva(value)({
           ...props,
           ...mutatedPropsValue,
-          ...(color ? { color: getColor(color) } : {}),
+          ...(color ? { color } : {}),
         });
       }
 

package/constants.js

@@ -4,9 +4,8 @@
  */
 
 /* Custom Vueless colors */
-export const BRAND_COLOR = "brand";
-export const GRAY_COLOR = "gray";
-export const COOL_COLOR = "cool";
+export const PRIMARY_COLOR = "primary";
+export const NEUTRAL_COLOR = "neutral";
 export const GRAYSCALE_COLOR = "grayscale";
 
 /* Vueless dark mode */
@@ -15,22 +14,21 @@ export const LIGHT_MODE_SELECTOR = "vl-light";
 export const COLOR_MODE_KEY = "vl-color-mode";
 
 /* Vueless defaults */
-export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;
-export const DEFAULT_GRAY_COLOR = COOL_COLOR;
+export const DEFAULT_PRIMARY_COLOR = GRAYSCALE_COLOR;
+export const DEFAULT_NEUTRAL_COLOR = "gray";
+export const DEFAULT_FONT_SIZE = 14; /* pixels */
+export const FONT_SIZE_DECREMENT = 2; /* pixels */
+export const FONT_SIZE_INCREMENT = 2; /* pixels */
 export const DEFAULT_OUTLINE = 2; /* pixels */
 export const OUTLINE_DECREMENT = 1; /* pixels */
 export const OUTLINE_INCREMENT = 1; /* pixels */
 export const DEFAULT_ROUNDING = 8; /* pixels */
 export const ROUNDING_DECREMENT = 4; /* pixels */
 export const ROUNDING_INCREMENT = 6; /* pixels */
-export const DEFAULT_BASE_CLASSES = `
-  text-gray-900 dark:text-gray-100
-`;
+export const DEFAULT_BASE_CLASSES = ``;
 
-/* Vueless supported colors and shades */
-export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
-export const GRAY_COLORS = ["slate", COOL_COLOR, "zinc", "neutral", "stone"];
-export const BRAND_COLORS = [
+/* Vueless supported color shades */
+export const PRIMARY_COLORS = [
   "red",
   "orange",
   "amber",
@@ -49,6 +47,123 @@ export const BRAND_COLORS = [
   "pink",
   "rose",
 ];
+export const STATE_COLORS = ["info", "warning", "error", "success"];
+export const NEUTRAL_COLORS = ["slate", "gray", "zinc", "neutral", "stone"];
+export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
+
+export const DEFAULT_LIGHT_THEME = {
+  /* Primary colors */
+  "--vl-primary": "--color-primary-600",
+  "--vl-primary-lifted": "--color-primary-700",
+  "--vl-primary-accented": "--color-primary-800",
+
+  /* Info colors */
+  "--vl-info": "--color-blue-600",
+  "--vl-info-lifted": "--color-blue-700",
+  "--vl-info-accented": "--color-blue-800",
+
+  /* Error colors */
+  "--vl-error": "--color-red-600",
+  "--vl-error-lifted": "--color-red-700",
+  "--vl-error-accented": "--color-red-800",
+
+  /* Warning colors */
+  "--vl-warning": "--color-orange-600",
+  "--vl-warning-lifted": "--color-orange-700",
+  "--vl-warning-accented": "--color-orange-800",
+
+  /* Success colors */
+  "--vl-success": "--color-green-600",
+  "--vl-success-lifted": "--color-green-700",
+  "--vl-success-accented": "--color-green-800",
+
+  /* Neutral colors */
+  "--vl-neutral": "--vl-neutral-500",
+  "--vl-neutral-lifted": "--vl-neutral-600",
+  "--vl-neutral-accented": "--vl-neutral-700",
+
+  /* Grayscale colors */
+  "--vl-grayscale": "--vl-neutral-900",
+  "--vl-grayscale-lifted": "--vl-neutral-800",
+  "--vl-grayscale-accented": "--vl-neutral-700",
+
+  /* Text neutral colors */
+  "--vl-text": "--vl-neutral-900",
+  "--vl-text-lifted": "--vl-neutral-500",
+  "--vl-text-accented": "--vl-neutral-600",
+  "--vl-text-muted": "--vl-neutral-400",
+  "--vl-text-inverted": "--color-white",
+
+  /* Border neutral colors */
+  "--vl-border": "--vl-neutral-300",
+  "--vl-border-lifted": "--vl-neutral-400",
+  "--vl-border-accented": "--vl-neutral-600",
+  "--vl-border-muted": "--vl-neutral-200",
+
+  /* Background neutral colors */
+  "--vl-bg": "--color-white",
+  "--vl-bg-lifted": "--vl-neutral-100",
+  "--vl-bg-accented": "--vl-neutral-200",
+  "--vl-bg-muted": "--vl-neutral-50",
+  "--vl-bg-inverted": "--vl-neutral-900",
+};
+
+export const DEFAULT_DARK_THEME = {
+  /* Primary colors */
+  "--vl-primary": "--color-primary-400",
+  "--vl-primary-lifted": "--color-primary-500",
+  "--vl-primary-accented": "--color-primary-600",
+
+  /* Info colors */
+  "--vl-info": "--color-blue-400",
+  "--vl-info-lifted": "--color-blue-500",
+  "--vl-info-accented": "--color-blue-600",
+
+  /* Error colors */
+  "--vl-error": "--color-red-400",
+  "--vl-error-lifted": "--color-red-500",
+  "--vl-error-accented": "--color-red-600",
+
+  /* Warning colors */
+  "--vl-warning": "--color-orange-400",
+  "--vl-warning-lifted": "--color-orange-500",
+  "--vl-warning-accented": "--color-orange-600",
+
+  /* Success colors */
+  "--vl-success": "--color-green-400",
+  "--vl-success-lifted": "--color-green-500",
+  "--vl-success-accented": "--color-green-600",
+
+  /* Neutral colors */
+  "--vl-neutral": "--vl-neutral-300",
+  "--vl-neutral-lifted": "--vl-neutral-400",
+  "--vl-neutral-accented": "--vl-neutral-500",
+
+  /* Grayscale colors */
+  "--vl-grayscale": "--vl-neutral-100",
+  "--vl-grayscale-lifted": "--vl-neutral-200",
+  "--vl-grayscale-accented": "--vl-neutral-300",
+
+  /* Text neutral colors */
+  "--vl-text": "--vl-neutral-100",
+  "--vl-text-lifted": "--vl-neutral-400",
+  "--vl-text-accented": "--vl-neutral-300",
+  "--vl-text-muted": "--vl-neutral-600",
+  "--vl-text-inverted": "--vl-neutral-900",
+
+  /* Border neutral colors */
+  "--vl-border": "--vl-neutral-700",
+  "--vl-border-lifted": "--vl-neutral-600",
+  "--vl-border-accented": "--vl-neutral-400",
+  "--vl-border-muted": "--vl-neutral-800",
+
+  /* Background neutral colors */
+  "--vl-bg": "--vl-neutral-900",
+  "--vl-bg-lifted": "--vl-neutral-800",
+  "--vl-bg-accented": "--vl-neutral-700",
+  "--vl-bg-muted": "--vl-neutral-800",
+  "--vl-bg-inverted": "--vl-neutral-100",
+};
 
 /* Vueless merge class strategy types */
 export const STRATEGY_TYPE = {
@@ -165,31 +280,41 @@ export const COMPONENTS = {
 /**
  * Extending Tailwind Merge by vueless custom tailwind classes.
  * All lists of rules available here:
- * https://github.com/dcastil/tailwind-merge/blob/v2.3.0/src/lib/default-config.ts
+ * https://github.com/dcastil/tailwind-merge/blob/main/src/lib/default-config.ts
  */
 export const TAILWIND_MERGE_EXTENSION = {
   extend: {
     theme: {
+      colors: ["brand", "brand-"],
       spacing: ["safe-top", "safe-bottom", "safe-left", "safe-right"],
     },
     classGroups: {
-      "outline-w": [{ outline: ["dynamic", "dynamic-sm", "dynamic-lg"] }],
-      "font-size": [{ text: ["2xs"] }],
-      rounded: [{ rounded: ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-s": [{ "rounded-s": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-e": [{ "rounded-e": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-t": [{ "rounded-t": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-r": [{ "rounded-r": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-b": [{ "rounded-b": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-l": [{ "rounded-l": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-ss": [{ "rounded-ss": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-se": [{ "rounded-se": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-ee": [{ "rounded-ee": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-es": [{ "rounded-es": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-tl": [{ "rounded-tl": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-tr": [{ "rounded-tr": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-br": [{ "rounded-br": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
-      "rounded-bl": [{ "rounded-bl": ["dynamic", "dynamic-sm", "dynamic-lg", "inherit"] }],
+      "outline-w": [{ outline: ["small", "medium", "large"] }],
+      "font-size": [{ text: ["xsmall", "small", "medium", "large"] }],
+      "bg-color": [{ bg: ["default", "muted", "lifted", "accented", "inverted"] }],
+      "text-color": [{ text: ["default", "muted", "lifted", "accented", "inverted"] }],
+      "border-color": [{ border: ["default", "muted", "lifted", "accented"] }],
+      "border-color-x": [{ "border-x": ["default", "muted", "lifted", "accented"] }],
+      "border-color-y": [{ "border-y": ["default", "muted", "lifted", "accented"] }],
+      "border-color-t": [{ "border-t": ["default", "muted", "lifted", "accented"] }],
+      "border-color-r": [{ "border-r": ["default", "muted", "lifted", "accented"] }],
+      "border-color-b": [{ "border-b": ["default", "muted", "lifted", "accented"] }],
+      "border-color-l": [{ "border-l": ["default", "muted", "lifted", "accented"] }],
+      rounded: [{ rounded: ["small", "medium", "large", "inherit"] }],
+      "rounded-s": [{ "rounded-s": ["small", "medium", "large", "inherit"] }],
+      "rounded-e": [{ "rounded-e": ["small", "medium", "large", "inherit"] }],
+      "rounded-t": [{ "rounded-t": ["small", "medium", "large", "inherit"] }],
+      "rounded-r": [{ "rounded-r": ["small", "medium", "large", "inherit"] }],
+      "rounded-b": [{ "rounded-b": ["small", "medium", "large", "inherit"] }],
+      "rounded-l": [{ "rounded-l": ["small", "medium", "large", "inherit"] }],
+      "rounded-ss": [{ "rounded-ss": ["small", "medium", "large", "inherit"] }],
+      "rounded-se": [{ "rounded-se": ["small", "medium", "large", "inherit"] }],
+      "rounded-ee": [{ "rounded-ee": ["small", "medium", "large", "inherit"] }],
+      "rounded-es": [{ "rounded-es": ["small", "medium", "large", "inherit"] }],
+      "rounded-tl": [{ "rounded-tl": ["small", "medium", "large", "inherit"] }],
+      "rounded-tr": [{ "rounded-tr": ["small", "medium", "large", "inherit"] }],
+      "rounded-br": [{ "rounded-br": ["small", "medium", "large", "inherit"] }],
+      "rounded-bl": [{ "rounded-bl": ["small", "medium", "large", "inherit"] }],
     },
   },
 };
@@ -223,6 +348,7 @@ export const VUELESS_ICONS_DIR = `${VUELESS_DIR}/${ICONS_DIR}`;
 export const VUELESS_ICONS_LOCAL_DIR = `src/${ICONS_DIR}`;
 export const VUELESS_ICONS_CACHED_DIR = `${VUELESS_CACHE_DIR}/${ICONS_DIR}`;
 export const VUELESS_CONFIGS_CACHED_DIR = `${VUELESS_CACHE_DIR}/configs`;
+export const VUELESS_TAILWIND_SAFELIST = `${VUELESS_CACHE_DIR}/safelist.txt`;
 
 /* System error codes */
 export const DEFAULT_EXIT_CODE = 0;
@@ -233,300 +359,5 @@ export const PX_IN_REM = 16;
 export const NESTED_COMPONENT_PATTERN_REG_EXP = /\{(U[^}]*)}/;
 export const EXTENDS_PATTERN_REG_EXP = /\{>[^}]*}/g;
 export const DYNAMIC_COLOR_PATTERN = "{color}";
-export const TAILWIND_COLOR_OPACITY_DELIMITER = "/";
-export const TAILWIND_VARIANT_DELIMITER = ":";
-export const TAILWIND_VARIANT_DELIMITER_REG_EXP = /:(?![^[]*])/;
 export const JAVASCRIPT_EXT = ".js";
 export const TYPESCRIPT_EXT = ".ts";
-
-/* Default tailwind colors */
-export const TAILWIND_COLORS = {
-  white: "#ffffff",
-  slate: {
-    50: "#f8fafc",
-    100: "#f1f5f9",
-    200: "#e2e8f0",
-    300: "#cbd5e1",
-    400: "#94a3b8",
-    500: "#64748b",
-    600: "#475569",
-    700: "#334155",
-    800: "#1e293b",
-    900: "#0f172a",
-    950: "#020617",
-  },
-  /* ex. `gray` color */
-  cool: {
-    50: "#f9fafb",
-    100: "#f3f4f6",
-    200: "#e5e7eb",
-    300: "#d1d5db",
-    400: "#9ca3af",
-    500: "#6b7280",
-    600: "#4b5563",
-    700: "#374151",
-    800: "#1f2937",
-    900: "#111827",
-    950: "#030712",
-  },
-  zinc: {
-    50: "#fafafa",
-    100: "#f4f4f5",
-    200: "#e4e4e7",
-    300: "#d4d4d8",
-    400: "#a1a1aa",
-    500: "#71717a",
-    600: "#52525b",
-    700: "#3f3f46",
-    800: "#27272a",
-    900: "#18181b",
-    950: "#09090b",
-  },
-  neutral: {
-    50: "#fafafa",
-    100: "#f5f5f5",
-    200: "#e5e5e5",
-    300: "#d4d4d4",
-    400: "#a3a3a3",
-    500: "#737373",
-    600: "#525252",
-    700: "#404040",
-    800: "#262626",
-    900: "#171717",
-    950: "#0a0a0a",
-  },
-  stone: {
-    50: "#fafaf9",
-    100: "#f5f5f4",
-    200: "#e7e5e4",
-    300: "#d6d3d1",
-    400: "#a8a29e",
-    500: "#78716c",
-    600: "#57534e",
-    700: "#44403c",
-    800: "#292524",
-    900: "#1c1917",
-    950: "#0c0a09",
-  },
-  red: {
-    50: "#fef2f2",
-    100: "#fee2e2",
-    200: "#fecaca",
-    300: "#fca5a5",
-    400: "#f87171",
-    500: "#ef4444",
-    600: "#dc2626",
-    700: "#b91c1c",
-    800: "#991b1b",
-    900: "#7f1d1d",
-    950: "#450a0a",
-  },
-  orange: {
-    50: "#fff7ed",
-    100: "#ffedd5",
-    200: "#fed7aa",
-    300: "#fdba74",
-    400: "#fb923c",
-    500: "#f97316",
-    600: "#ea580c",
-    700: "#c2410c",
-    800: "#9a3412",
-    900: "#7c2d12",
-    950: "#431407",
-  },
-  amber: {
-    50: "#fffbeb",
-    100: "#fef3c7",
-    200: "#fde68a",
-    300: "#fcd34d",
-    400: "#fbbf24",
-    500: "#f59e0b",
-    600: "#d97706",
-    700: "#b45309",
-    800: "#92400e",
-    900: "#78350f",
-    950: "#451a03",
-  },
-  yellow: {
-    50: "#fefce8",
-    100: "#fef9c3",
-    200: "#fef08a",
-    300: "#fde047",
-    400: "#facc15",
-    500: "#eab308",
-    600: "#ca8a04",
-    700: "#a16207",
-    800: "#854d0e",
-    900: "#713f12",
-    950: "#422006",
-  },
-  lime: {
-    50: "#f7fee7",
-    100: "#ecfccb",
-    200: "#d9f99d",
-    300: "#bef264",
-    400: "#a3e635",
-    500: "#84cc16",
-    600: "#65a30d",
-    700: "#4d7c0f",
-    800: "#3f6212",
-    900: "#365314",
-    950: "#1a2e05",
-  },
-  green: {
-    50: "#f0fdf4",
-    100: "#dcfce7",
-    200: "#bbf7d0",
-    300: "#86efac",
-    400: "#4ade80",
-    500: "#22c55e",
-    600: "#16a34a",
-    700: "#15803d",
-    800: "#166534",
-    900: "#14532d",
-    950: "#052e16",
-  },
-  emerald: {
-    50: "#ecfdf5",
-    100: "#d1fae5",
-    200: "#a7f3d0",
-    300: "#6ee7b7",
-    400: "#34d399",
-    500: "#10b981",
-    600: "#059669",
-    700: "#047857",
-    800: "#065f46",
-    900: "#064e3b",
-    950: "#022c22",
-  },
-  teal: {
-    50: "#f0fdfa",
-    100: "#ccfbf1",
-    200: "#99f6e4",
-    300: "#5eead4",
-    400: "#2dd4bf",
-    500: "#14b8a6",
-    600: "#0d9488",
-    700: "#0f766e",
-    800: "#115e59",
-    900: "#134e4a",
-    950: "#042f2e",
-  },
-  cyan: {
-    50: "#ecfeff",
-    100: "#cffafe",
-    200: "#a5f3fc",
-    300: "#67e8f9",
-    400: "#22d3ee",
-    500: "#06b6d4",
-    600: "#0891b2",
-    700: "#0e7490",
-    800: "#155e75",
-    900: "#164e63",
-    950: "#083344",
-  },
-  sky: {
-    50: "#f0f9ff",
-    100: "#e0f2fe",
-    200: "#bae6fd",
-    300: "#7dd3fc",
-    400: "#38bdf8",
-    500: "#0ea5e9",
-    600: "#0284c7",
-    700: "#0369a1",
-    800: "#075985",
-    900: "#0c4a6e",
-    950: "#082f49",
-  },
-  blue: {
-    50: "#eff6ff",
-    100: "#dbeafe",
-    200: "#bfdbfe",
-    300: "#93c5fd",
-    400: "#60a5fa",
-    500: "#3b82f6",
-    600: "#2563eb",
-    700: "#1d4ed8",
-    800: "#1e40af",
-    900: "#1e3a8a",
-    950: "#172554",
-  },
-  indigo: {
-    50: "#eef2ff",
-    100: "#e0e7ff",
-    200: "#c7d2fe",
-    300: "#a5b4fc",
-    400: "#818cf8",
-    500: "#6366f1",
-    600: "#4f46e5",
-    700: "#4338ca",
-    800: "#3730a3",
-    900: "#312e81",
-    950: "#1e1b4b",
-  },
-  violet: {
-    50: "#f5f3ff",
-    100: "#ede9fe",
-    200: "#ddd6fe",
-    300: "#c4b5fd",
-    400: "#a78bfa",
-    500: "#8b5cf6",
-    600: "#7c3aed",
-    700: "#6d28d9",
-    800: "#5b21b6",
-    900: "#4c1d95",
-    950: "#2e1065",
-  },
-  purple: {
-    50: "#faf5ff",
-    100: "#f3e8ff",
-    200: "#e9d5ff",
-    300: "#d8b4fe",
-    400: "#c084fc",
-    500: "#a855f7",
-    600: "#9333ea",
-    700: "#7e22ce",
-    800: "#6b21a8",
-    900: "#581c87",
-    950: "#3b0764",
-  },
-  fuchsia: {
-    50: "#fdf4ff",
-    100: "#fae8ff",
-    200: "#f5d0fe",
-    300: "#f0abfc",
-    400: "#e879f9",
-    500: "#d946ef",
-    600: "#c026d3",
-    700: "#a21caf",
-    800: "#86198f",
-    900: "#701a75",
-    950: "#4a044e",
-  },
-  pink: {
-    50: "#fdf2f8",
-    100: "#fce7f3",
-    200: "#fbcfe8",
-    300: "#f9a8d4",
-    400: "#f472b6",
-    500: "#ec4899",
-    600: "#db2777",
-    700: "#be185d",
-    800: "#9d174d",
-    900: "#831843",
-    950: "#500724",
-  },
-  rose: {
-    50: "#fff1f2",
-    100: "#ffe4e6",
-    200: "#fecdd3",
-    300: "#fda4af",
-    400: "#fb7185",
-    500: "#f43f5e",
-    600: "#e11d48",
-    700: "#be123c",
-    800: "#9f1239",
-    900: "#881337",
-    950: "#4c0519",
-  },
-};

package/directives/clickOutside/storybook/stories.ts

@@ -48,7 +48,7 @@ const DefaultTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArgs
 
     <UCalendar v-model="date" v-if="isShownCalendar" class="mt-2" />
 
-    <UAlert class="mt-4" variant="secondary">
+    <UAlert class="mt-4" variant="outlined">
       <p>
         Click on calendar itself will trigger directive callback, use ignore option to prevent this behavior.
       </p>
@@ -98,7 +98,7 @@ const SettingsTemplate: StoryFn<VOnClickOutsideArgs> = (args: VOnClickOutsideArg
       <UCalendar v-model="date" v-if="isShownCalendar" class="mt-2" />
     </div>
 
-    <UAlert class="mt-4" variant="secondary">
+    <UAlert class="mt-4" variant="outlined">
       <p>
         Click on calendar will not trigger directive callback now.
       </p>