vueless 0.0.690 → 0.0.692

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,294 @@ 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 = {
+  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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.690",
+  "version": "0.0.692",
   "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/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.form-input/storybook/stories.ts

@@ -9,6 +9,8 @@ import UInput from "../../ui.form-input/UInput.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UCol from "../../ui.container-col/UCol.vue";
+import URow from "../../ui.container-row/URow.vue";
+import UAvatar from "../../ui.image-avatar/UAvatar.vue";
 
 import type { Meta, StoryFn } from "@storybook/vue3";
 import type { Props } from "../types.ts";
@@ -36,14 +38,18 @@ export default {
 } as Meta;
 
 const DefaultTemplate: StoryFn<UInputArgs> = (args: UInputArgs) => ({
-  components: { UInput, UIcon, UButton },
+  components: { UInput, UIcon },
   setup() {
     const slots = getSlotNames(UInput.__name);
 
     return { args, slots };
   },
   template: `
-    <UInput v-bind="args" v-model="args.modelValue">
+    <UInput
+      v-bind="args"
+      v-model="args.modelValue"
+      class="max-w-96"
+    >
       ${args.slotTemplate || getSlotsFragment("")}
     </UInput>
   `,
@@ -52,19 +58,58 @@ const DefaultTemplate: StoryFn<UInputArgs> = (args: UInputArgs) => ({
 const EnumVariantTemplate: StoryFn<UInputArgs> = (args: UInputArgs, { argTypes }) => ({
   components: { UInput, UCol },
   setup() {
+    function getDescription(option: string) {
+      switch (option) {
+        case "string":
+          return "Only letters are allowed";
+        case "number":
+          return "Numbers are allowed (including decimals)";
+        case "integer":
+          return "Only integers are allowed";
+        case "stringAndNumber":
+          return "Letters and numbers are allowed";
+        case "symbol":
+          return "Special characters are allowed";
+        default:
+          return "";
+      }
+    }
+
+    let filteredOptions = argTypes?.[args.enum]?.options;
+
+    if (args.enum === "labelAlign") {
+      filteredOptions = argTypes?.[args.enum]?.options?.filter(
+        (item) => item !== "right" && item !== "topWithDesc",
+      );
+    }
+
     return {
       args,
-      options: argTypes?.[args.enum]?.options,
+      filteredOptions,
+      getDescription,
     };
   },
   template: `
     <UCol>
       <UInput
-        v-for="(option, index) in options"
+        v-for="(option, index) in filteredOptions"
         :key="index"
         v-bind="args"
         :[args.enum]="option"
         :label="option"
+        :description="getDescription(option)"
+        class="max-w-96"
+      />
+
+      <UInput
+        v-if="args.enum === 'validationRule'"
+        v-bind="args"
+        validation-rule="^#([a-fA-F0-9]{3,4}|[a-fA-F0-9]{6}|[a-fA-F0-9]{8})$"
+        label="Custom RegExp"
+        description="Enter a valid hex color code (e.g., #FF5733)"
+        labelAlign="topWithDesc"
+        placeholder="#FF5733"
+        class="max-w-96"
       />
     </UCol>
   `,
@@ -73,23 +118,20 @@ const EnumVariantTemplate: StoryFn<UInputArgs> = (args: UInputArgs, { argTypes }
 export const Default = DefaultTemplate.bind({});
 Default.args = {};
 
-export const Disabled = DefaultTemplate.bind({});
-Disabled.args = { disabled: true };
+export const Placeholder = DefaultTemplate.bind({});
+Placeholder.args = { placeholder: "Type something here..." };
 
 export const Description = DefaultTemplate.bind({});
-Description.args = { description: "some description text" };
+Description.args = { description: "Provide additional details if necessary." };
 
 export const Error = DefaultTemplate.bind({});
-Error.args = { error: "some error text" };
-
-export const Placeholder = DefaultTemplate.bind({});
-Placeholder.args = { placeholder: "some placeholder text" };
+Error.args = { error: "This field is required. Please enter a value." };
 
 export const Readonly = DefaultTemplate.bind({});
-Readonly.args = { readonly: true, modelValue: "some value for read" };
+Readonly.args = { readonly: true, modelValue: "Pre-filled content that cannot be changed" };
 
-export const NoAutocomplete = DefaultTemplate.bind({});
-NoAutocomplete.args = { noAutocomplete: true };
+export const Disabled = DefaultTemplate.bind({});
+Disabled.args = { disabled: true };
 
 export const TypePassword = DefaultTemplate.bind({});
 TypePassword.args = { type: "password" };
@@ -101,28 +143,57 @@ export const Sizes = EnumVariantTemplate.bind({});
 Sizes.args = { enum: "size" };
 
 export const ValidationRules = EnumVariantTemplate.bind({});
-ValidationRules.args = { enum: "validationRule" };
-
-export const LeftIcon = DefaultTemplate.bind({});
-LeftIcon.args = { leftIcon: "star" };
-
-export const RightIcon = DefaultTemplate.bind({});
-RightIcon.args = { rightIcon: "star" };
+ValidationRules.args = { enum: "validationRule", labelAlign: "topWithDesc" };
+ValidationRules.parameters = {
+  docs: {
+    description: {
+      story:
+        "`validationRule` prop prevents some characters from input. You can use predefined values or your own RegExp.",
+    },
+  },
+};
 
-export const LeftSlot = DefaultTemplate.bind({});
-LeftSlot.args = {
-  slotTemplate: `
-    <template #left>
-      <UIcon name="star" />
-    </template>
+export const IconProps: StoryFn<UInputArgs> = (args) => ({
+  components: { UInput, URow },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow>
+      <UInput
+        v-bind="args"
+        left-icon="feedback"
+        label="Your opinion"
+        placeholder="Share your feedback with us"
+      />
+      <UInput
+        v-bind="args"
+        right-icon="person"
+        label="Username"
+        placeholder="Enter your username"
+      />
+    </URow>
   `,
-};
+});
 
-export const RightSlot = DefaultTemplate.bind({});
-RightSlot.args = {
-  slotTemplate: `
-    <template #right>
-      <UIcon name="star" />
-    </template>
+export const Slots: StoryFn<UInputArgs> = (args) => ({
+  components: { UInput, URow, UButton, UAvatar },
+  setup() {
+    return { args };
+  },
+  template: `
+    <URow no-mobile>
+      <UInput v-bind="args">
+        <template #left>
+          <UAvatar />
+        </template>
+      </UInput>
+
+      <UInput v-bind="args" :config="{ rightSlot: 'pr-0' }">
+        <template #right>
+          <UButton label="Search" size="sm" class="rounded-l-none h-full" />
+        </template>
+      </UInput>
+    </URow>
   `,
-};
+});

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/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),
+  };
+}