vueless 0.0.691 → 0.0.693

package/bin/constants.js

@@ -18,12 +18,12 @@ export default {
   /**
     * Directive settings.
     */
-  directive: {},
+  directives: {},
 
   /**
     * Component settings.
     */
-  component: /*tw*/ {},
+  components: /*tw*/ {},
 
   /**
     * Tailwind CSS theme config.

package/composables/useUI.ts

@@ -45,7 +45,7 @@ export default function useUI<T>(
     ? (parent?.type.__name as ComponentNames)
     : (type.__name as ComponentNames);
 
-  const globalConfig = (vuelessConfig.component?.[componentName] || {}) as ComponentConfigFull<T>;
+  const globalConfig = (vuelessConfig.components?.[componentName] || {}) as ComponentConfigFull<T>;
 
   const vuelessStrategy = Object.values(STRATEGY_TYPE).includes(vuelessConfig.strategy || "")
     ? (vuelessConfig.strategy as Strategies)

package/constants.js

@@ -22,6 +22,8 @@ export const DEFAULT_RING_OFFSET = 0; /* pixels */
 export const DEFAULT_RING_OFFSET_COLOR_LIGHT = "#ffffff"; // white
 export const DEFAULT_RING_OFFSET_COLOR_DARK = "#111827"; // gray-900
 export const DEFAULT_ROUNDING = 8; /* pixels */
+export const ROUNDING_DECREMENT = 4; /* pixels */
+export const ROUNDING_INCREMENT = 6; /* pixels */
 
 /* Vueless supported colors and shades */
 export const COLOR_SHADES = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950];
@@ -237,3 +239,295 @@ 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/tooltip/vTooltip.ts

@@ -24,7 +24,7 @@ if (isCSR) {
     animation: "shift-away",
   };
 
-  settings = merge(defaultSettings, vuelessConfig.directive?.tooltip || {}) as DefaultProps;
+  settings = merge(defaultSettings, vuelessConfig.directives?.tooltip || {}) as DefaultProps;
   tippy.setDefaultProps(settings);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.691",
+  "version": "0.0.693",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/plugin-vite.js

@@ -62,7 +62,7 @@ export const Vueless = function (options = {}) {
         "process.env": {},
       },
       optimizeDeps: {
-        include: ["tailwindcss/colors.js", ...(!isVuelessEnv ? ["vueless/preset-tailwind"] : [])],
+        include: [...(!isVuelessEnv ? ["vueless/preset-tailwind"] : [])],
       },
     }),
 

package/preset-tailwind.js

@@ -4,13 +4,13 @@
  */
 import { merge } from "lodash-es";
 import forms from "@tailwindcss/forms";
-import colors from "tailwindcss/colors.js";
 import {
   COLOR_SHADES,
   BRAND_COLOR,
   GRAY_COLOR,
   COOL_COLOR,
   DARK_MODE_SELECTOR,
+  TAILWIND_COLORS,
   DEFAULT_ROUNDING,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
@@ -74,7 +74,6 @@ export const vuelessTailwindConfig = {
       colors: {
         [BRAND_COLOR]: brandColors || {},
         [GRAY_COLOR]: grayColors || {},
-        [COOL_COLOR]: { ...(colors[GRAY_COLOR] || {}) },
       },
       spacing: {
         "safe-top": "env(safe-area-inset-top)",
@@ -176,16 +175,17 @@ function getPalette(color) {
  * @returns { Object } - `tailwind-config-viewer` color replacement object.
  */
 function getReplacementColors(color, tailwindColor) {
-  if (tailwindColor === GRAYSCALE_COLOR || tailwindColor === COOL_COLOR) {
-    tailwindColor = GRAY_COLOR;
+  if (tailwindColor === GRAYSCALE_COLOR) {
+    tailwindColor = COOL_COLOR;
   }
 
   const varsPalette = {
-    [twColorWithOpacity(`--vl-color-${color}-default`)]: colors[tailwindColor][600],
+    [twColorWithOpacity(`--vl-color-${color}-default`)]: TAILWIND_COLORS[tailwindColor][600],
   };
 
   COLOR_SHADES.forEach((shade) => {
-    varsPalette[twColorWithOpacity(`--vl-color-${color}-${shade}`)] = colors[tailwindColor][shade];
+    varsPalette[twColorWithOpacity(`--vl-color-${color}-${shade}`)] =
+      TAILWIND_COLORS[tailwindColor][shade];
   });
 
   return varsPalette;

package/types.ts

@@ -133,12 +133,12 @@ export interface Config extends ThemeConfig {
   /**
    * Component configs.
    */
-  component?: Partial<Components>;
+  components?: Partial<Components>;
 
   /**
    * Directive configs.
    */
-  directive?: Partial<Directives>;
+  directives?: Partial<Directives>;
 
   /**
    * Tailwind CSS theme config.

package/ui.button/storybook/stories.ts

@@ -199,7 +199,7 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
           <UIcon
             name="heart_plus"
             size="sm"
-            color="green"
+            color="inherit"
             :variant="isDarkMode ? 'dark' : 'default'"
           />
         </template>
@@ -210,7 +210,7 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
           <UIcon
             name="settings"
             size="sm"
-            color="green"
+            color="inherit"
             :variant="isDarkMode ? 'dark' : 'default'"
           />
         </template>
@@ -221,7 +221,7 @@ export const Slots: StoryFn<UButtonArgs> = (args) => ({
           <UIcon
             name="delete"
             size="sm"
-            color="green"
+            color="inherit"
             :variant="isDarkMode ? 'dark' : 'default'"
           />
         </template>

package/ui.form-input/config.ts

@@ -2,14 +2,11 @@ export default /*tw*/ {
   inputLabel: "{ULabel}",
   wrapper: {
     base: `
-      w-full bg-white relative flex border border-gray-300 rounded-dynamic-sm transition
+      w-full bg-white relative flex border border-gray-300 rounded-dynamic transition
       hover:border-gray-400 hover:focus-within:border-brand-500 focus-within:border-brand-500
       focus-within:ring-dynamic focus-within:ring-offset-dynamic focus-within:ring-brand-700/15
     `,
     variants: {
-      labelAlign: {
-        topInside: "rounded-dynamic",
-      },
       error: {
         true: `
           border-red-300 bg-red-50

package/ui.navigation-progress/UStepperProgress.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 import { computed } from "vue";
-import colors from "tailwindcss/colors.js";
 
 import useUI from "../composables/useUI.ts";
 
 import defaultConfig from "./config.ts";
-import { GRAY_COLORS } from "../constants.js";
+import { GRAY_COLORS, TAILWIND_COLORS } from "../constants.js";
 
 import type { StepperProgressProps, Config } from "./types.ts";
 
@@ -16,18 +15,21 @@ const props = withDefaults(defineProps<StepperProgressProps>(), {
 });
 
 const stepperColor = computed(() => {
-  const isValidColor = (color: string): color is keyof typeof colors => color in colors;
-  const isGrayColor = (color: string): color is keyof typeof colors => GRAY_COLORS.includes(color);
+  const isValidColor = (color: string): color is keyof typeof TAILWIND_COLORS =>
+    color in TAILWIND_COLORS;
+
+  const isGrayColor = (color: string): color is keyof typeof TAILWIND_COLORS =>
+    GRAY_COLORS.includes(color);
 
   if (isValidColor(props.color)) {
-    return colors[props.color][500];
+    return TAILWIND_COLORS[props.color][500];
   }
 
   if (isGrayColor(props.color)) {
-    return colors[props.color][900];
+    return TAILWIND_COLORS[props.color][900];
   }
 
-  return colors.zinc[900];
+  return TAILWIND_COLORS.cool[900];
 });
 
 /**

package/ui.text-notify/UNotify.vue

@@ -72,7 +72,7 @@ function getOffsetWidth(selector: string): number {
 }
 
 function setPosition() {
-  const positionClasses = vuelessConfig.component?.UNotify?.positionClasses;
+  const positionClasses = vuelessConfig.components?.UNotify?.positionClasses;
   const pageClass = positionClasses?.page || config.value?.positionClasses?.page;
   const asideClass = positionClasses?.aside || config.value?.positionClasses?.aside;
   const pageWidth = getOffsetWidth(`${pageClass}`);

package/ui.text-notify/utilNotify.ts

@@ -31,7 +31,7 @@ interface VuelessNotifyConfig {
   };
 }
 
-const globalNotifyDuration = (vuelessConfig.component?.UNotify as VuelessNotifyConfig)?.duration;
+const globalNotifyDuration = (vuelessConfig.components?.UNotify as VuelessNotifyConfig)?.duration;
 const notifyClearAllEvent: Event = new Event("notifyClearAll");
 
 let lastMessageTime: Date | undefined = undefined;

package/utils/node/dynamicProps.js

@@ -19,7 +19,7 @@ export async function setCustomPropTypes(isVuelessEnv) {
   const srcDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_DIR;
 
   for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
-    const componentGlobalConfig = vuelessConfig.component?.[componentName];
+    const componentGlobalConfig = vuelessConfig.components?.[componentName];
     const customProps = componentGlobalConfig && componentGlobalConfig.props;
     const isHiddenStories = componentGlobalConfig && componentGlobalConfig.storybook === false;
 
@@ -27,7 +27,7 @@ export async function setCustomPropTypes(isVuelessEnv) {
       await cacheComponentTypes(path.join(srcDir, componentDir));
       await modifyComponentTypes(
         path.join(srcDir, componentDir),
-        vuelessConfig.component?.[componentName]?.props,
+        vuelessConfig.components?.[componentName]?.props,
       );
     }
   }

package/utils/node/dynamicStories.js

@@ -47,7 +47,7 @@ export async function hideHiddenStories(isVuelessEnv) {
   const srcDir = isVuelessEnv ? VUELESS_LOCAL_DIR : VUELESS_DIR;
 
   for await (const [componentName, componentDir] of Object.entries(COMPONENTS)) {
-    const componentGlobalConfig = vuelessConfig.component?.[componentName];
+    const componentGlobalConfig = vuelessConfig.components?.[componentName];
     const isHiddenStories = componentGlobalConfig && componentGlobalConfig.storybook === false;
 
     if (isHiddenStories) {

package/utils/node/loaderIcon.js

@@ -146,7 +146,7 @@ async function copyCachedVuelessIcons(isVuelessEnv) {
  */
 async function findAndCopyIcons(files) {
   const defaults = await getDefaults();
-  const safelistIcons = vuelessConfig.component?.[U_ICON]?.safelistIcons;
+  const safelistIcons = vuelessConfig.components?.[U_ICON]?.safelistIcons;
 
   safelistIcons?.forEach((iconName) => {
     copyIcon(iconName, defaults);
@@ -312,5 +312,5 @@ async function getDefaults() {
   const defaultConfigPath = path.join(cwd(), defaultIconsDir, COMPONENTS[U_ICON], "config.ts");
   const uIconDefaultConfig = await getComponentDefaultConfig(U_ICON, defaultConfigPath);
 
-  return merge({}, uIconDefaultConfig?.defaults, vuelessConfig.component?.[U_ICON]?.defaults);
+  return merge({}, uIconDefaultConfig?.defaults, vuelessConfig.components?.[U_ICON]?.defaults);
 }

package/utils/node/tailwindSafelist.js

@@ -107,8 +107,8 @@ export async function createTailwindSafelist({ mode, env, debug, targetFiles = [
 
   const globalSettings = cloneDeep(vuelessConfig);
 
-  delete globalSettings.component;
-  delete globalSettings.directive;
+  delete globalSettings.components;
+  delete globalSettings.directives;
   delete globalSettings.tailwindMerge;
 
   process.env.VUELESS_GLOBAL_SETTINGS = globalSettings;
@@ -176,7 +176,7 @@ async function getMergedComponentConfig(componentName, vuelessConfigFiles) {
 
   return getMergedConfig({
     defaultConfig: await retrieveComponentDefaultConfig(componentName, vuelessConfigFiles),
-    globalConfig: vuelessConfig.component?.[componentName] || {},
+    globalConfig: vuelessConfig.components?.[componentName] || {},
     vuelessStrategy: isStrategyValid ? vuelessConfig.strategy : STRATEGY_TYPE.merge,
   });
 }
@@ -271,7 +271,7 @@ function isDefaultComponentConfig(filePath, componentName) {
 
 function getSafelistColorsFromConfig(componentName) {
   const globalSafelistColors = vuelessConfig.safelistColors || [];
-  const componentSafelistColors = vuelessConfig.component?.[componentName]?.safelistColors || [];
+  const componentSafelistColors = vuelessConfig.components?.[componentName]?.safelistColors || [];
 
   return [...globalSafelistColors, ...componentSafelistColors];
 }

package/utils/theme.ts

@@ -1,17 +1,15 @@
 import { merge } from "lodash-es";
-import tailwindColors from "tailwindcss/colors.js";
 
 import { tailwindConfig } from "./tailwindConfig.ts";
 import { vuelessConfig } from "./ui.ts";
 import { isSSR, isCSR } from "./helper.ts";
 import {
   PX_IN_REM,
-  COOL_COLOR,
-  GRAY_COLOR,
   COLOR_MODE_KEY,
   LIGHT_MODE_SELECTOR,
   DARK_MODE_SELECTOR,
   GRAYSCALE_COLOR,
+  TAILWIND_COLORS,
   DEFAULT_RING,
   DEFAULT_RING_OFFSET,
   DEFAULT_ROUNDING,
@@ -19,6 +17,8 @@ import {
   DEFAULT_GRAY_COLOR,
   DEFAULT_RING_OFFSET_COLOR_LIGHT,
   DEFAULT_RING_OFFSET_COLOR_DARK,
+  ROUNDING_DECREMENT,
+  ROUNDING_INCREMENT,
 } from "../constants.js";
 
 import type {
@@ -31,7 +31,7 @@ import type {
 
 import { ColorMode } from "../types.ts";
 
-type DefaultColors = typeof tailwindColors;
+type DefaultColors = typeof TAILWIND_COLORS;
 
 interface Colors extends DefaultColors {
   [key: string]: Partial<TailwindColorShades> | string;
@@ -110,15 +110,16 @@ export function getSelectedGrayColor() {
 export function setTheme(config: Config = {}) {
   setColorMode(vuelessConfig.colorMode || config.colorMode || ColorMode.Light);
 
-  const rounding = config.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
-  const roundingSm = config.roundingSm ?? vuelessConfig.roundingSm ?? rounding / 2;
-  const roundingLg = config.roundingLg ?? vuelessConfig.roundingLg ?? rounding * 2;
-  const isDarkMode = isCSR && document.documentElement.classList.contains(DARK_MODE_SELECTOR);
+  const { roundingSm, rounding, roundingLg } = getRoundings(
+    config.roundingSm ?? vuelessConfig.roundingSm,
+    config.rounding ?? vuelessConfig.rounding,
+    config.roundingLg ?? vuelessConfig.roundingLg,
+  );
 
   let brand: BrandColors =
     config.brand ?? getSelectedBrandColor() ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
 
-  let gray: GrayColors =
+  const gray: GrayColors =
     config.gray ?? getSelectedGrayColor() ?? vuelessConfig.gray ?? DEFAULT_GRAY_COLOR;
 
   const ring = config.ring ?? vuelessConfig.ring ?? DEFAULT_RING;
@@ -134,30 +135,20 @@ export function setTheme(config: Config = {}) {
     vuelessConfig.ringOffsetColorLight ??
     DEFAULT_RING_OFFSET_COLOR_LIGHT;
 
+  const isDarkMode = isCSR && document.documentElement.classList.contains(DARK_MODE_SELECTOR);
+  const defaultRingOffsetColor = isDarkMode ? ringOffsetColorDark : ringOffsetColorLight;
   const defaultBrandShade = isDarkMode ? 400 : 600;
   const defaultGrayShade = isDarkMode ? 400 : 600;
-  const defaultRingOffsetColor = isDarkMode ? ringOffsetColorDark : ringOffsetColorLight;
 
   isCSR && localStorage.setItem("brand", brand);
   isCSR && localStorage.setItem("gray", gray);
 
-  if (gray === COOL_COLOR) {
-    gray = GRAY_COLOR;
-  }
-
   if (brand === GRAYSCALE_COLOR) {
     brand = gray;
   }
 
-  /* Remove deprecated color aliases. */
-  delete (tailwindColors as Partial<DefaultColors>).lightBlue;
-  delete (tailwindColors as Partial<DefaultColors>).warmGray;
-  delete (tailwindColors as Partial<DefaultColors>).trueGray;
-  delete (tailwindColors as Partial<DefaultColors>).coolGray;
-  delete (tailwindColors as Partial<DefaultColors>).blueGray;
-
   const colors: Colors = merge(
-    tailwindColors as Colors,
+    TAILWIND_COLORS as Colors,
     tailwindConfig?.theme?.extend?.colors || {},
     vuelessConfig.tailwindTheme?.extend?.colors || {},
   );
@@ -180,8 +171,8 @@ export function setTheme(config: Config = {}) {
     "--vl-rounding-sm": `${Number(roundingSm) / PX_IN_REM}rem`,
     "--vl-rounding": `${Number(rounding) / PX_IN_REM}rem`,
     "--vl-rounding-lg": `${Number(roundingLg) / PX_IN_REM}rem`,
-    "--vl-ring": `${ring}px`,
-    "--vl-ring-offset": `${ringOffset}px`,
+    "--vl-ring": `${Math.max(0, ring)}px`,
+    "--vl-ring-offset": `${Math.max(0, ringOffset)}px`,
     "--vl-ring-offset-color": convertHexInRgb(defaultRingOffsetColor),
     "--vl-color-gray-default": convertHexInRgb(colors[gray]?.[defaultBrandShade]),
     "--vl-color-brand-default": convertHexInRgb(colors[brand]?.[defaultGrayShade]),
@@ -240,3 +231,27 @@ export function convertHexInRgb(hex?: string) {
 
   return color.length === 6 || color.length === 3 ? `${r}, ${g}, ${b}` : "";
 }
+
+function getRoundings(sm?: number, md?: number, lg?: number) {
+  const rounding = Math.max(0, md ?? DEFAULT_ROUNDING);
+  let roundingSm = Math.max(0, rounding - ROUNDING_DECREMENT);
+  let roundingLg = Math.max(0, rounding + ROUNDING_INCREMENT);
+
+  if (rounding === ROUNDING_INCREMENT) {
+    roundingSm = ROUNDING_DECREMENT;
+  }
+
+  if (rounding === ROUNDING_DECREMENT) {
+    roundingSm = ROUNDING_INCREMENT - ROUNDING_DECREMENT;
+  }
+
+  if (rounding === 0) {
+    roundingLg = ROUNDING_INCREMENT - ROUNDING_DECREMENT;
+  }
+
+  return {
+    rounding,
+    roundingSm: sm === undefined ? roundingSm : Math.max(0, sm),
+    roundingLg: lg === undefined ? roundingLg : Math.max(0, lg),
+  };
+}

package/utils/ui.ts

@@ -99,7 +99,7 @@ export const cva = ({ base = "", variants = {}, compoundVariants = [], defaultVa
  */
 export function getDefaults<Props, Config>(defaultConfig: Config, name: ComponentNames) {
   const componentDefaults = (defaultConfig as UnknownObject).defaults || {};
-  const globalDefaults = vuelessConfig.component?.[name]?.defaults || {};
+  const globalDefaults = vuelessConfig.components?.[name]?.defaults || {};
 
   const defaults = merge({}, componentDefaults, globalDefaults) as Props & Defaults;